Commit 9ef6d797 authored by Kent Nielsen's avatar Kent Nielsen
Browse files

Merge branch 'feature/resize-interface' into 'develop'

Feature/resize interface

See merge request !15
parents b6238b63 be847904
Pipeline #51928 passed with stages
in 1 minute and 58 seconds
......@@ -64,4 +64,8 @@
height: 100%;
}
.no-select{
@include no-select;
}
</style>
<template>
<div class="home">
<div id="grid">
<div class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<div @mousedown="resizeVertical($event, rowIndex)" class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<component :is="colBlock.type"></component>
</div>
</div>
......@@ -38,8 +38,11 @@ export default {
height: 300,
blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
}
]
};
],
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {index: 0},
horizontalResizeObject: {row: 0, col: 0}
}
},
methods: {
......@@ -48,6 +51,78 @@ export default {
height: 300,
blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
});
},
resizeHorizontalMouseMove(event){
const deltaX = this.mouseDragPos.x - event.x;
this.mouseDragPos.x = event.x;
const row = this.horizontalResizeObject.row;
const col = this.horizontalResizeObject.col;
// Find index of select col in html document
let colIndex = col;
for (let i = 0; i < row; i++) {
const element = this.layout[i];
colIndex += element.blocks.length;
}
const leftCol = document.getElementsByClassName("col")[colIndex - 1];
const rigthCol = document.getElementsByClassName("col")[colIndex];
// Total flex allowed from layout
const totalFlex = this.layout[row].blocks[col -1].width + this.layout[row].blocks[col].width;
const contentWidth = leftCol.clientWidth + rigthCol.clientWidth + 40;
// Resized size
const newLeftWidth = leftCol.clientWidth - deltaX;
const newRightWidth = rigthCol.clientWidth + deltaX;
// Calculating new flexGrow value
// This is not normalized to 100"%"
let newFlexRight = contentWidth/newRightWidth;
let newFlexLeft = (newLeftWidth * parseFloat(newFlexRight))/newRightWidth;
// Normalizing flewGrow to 100"%"
const preAdjustedTotalFlex = newFlexRight+newFlexLeft;
newFlexRight = (newFlexRight/preAdjustedTotalFlex)*totalFlex;
newFlexLeft = (newFlexLeft/preAdjustedTotalFlex)*totalFlex;
// Storing new style.
this.layout[row].blocks[col -1].width = newFlexLeft;
this.layout[row].blocks[col].width = newFlexRight;
},
resizeVerticalMouseMove(event){
const deltaY = this.mouseDragPos.y - event.y;
this.mouseDragPos.y = event.y;
this.layout[this.verticalResizeObject.index].height -= deltaY
},
resizeHorizontal(event, row, col){
if(event.offsetX < 0){
this.mouseDragPos.x = event.x;
this.horizontalResizeObject.row = row;
this.horizontalResizeObject.col = col;
document.addEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
}
},
resizeVertical(event, index){
if(event.offsetY > this.layout[index].height){
this.mouseDragPos.y = event.y;
this.verticalResizeObject.index = index;
document.addEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.addEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.add("no-select");
}
},
eventRemover(){
document.removeEventListener("mousemove", this.resizeHorizontalMouseMove, false);
document.removeEventListener("mousemove", this.resizeVerticalMouseMove, false);
document.removeEventListener("mouseup", this.eventRemover, false);
document.getElementsByTagName("html")[0].classList.remove("no-select");
}
},
......@@ -72,18 +147,41 @@ export default {
.row {
display: flex;
margin-bottom: $gap;
position: relative;
}
// Must be outside ".row" or else after affect children
.row::after{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
bottom: - $gap;
width: 100%;
height: $gap;
cursor: n-resize;
}
.col {
flex-basis: 0; // a basis of 0px. very important!
background-color: $light-green-theme-color;
border-radius: 4px;
overflow: hidden;
border: 2px solid $theme-color;
position: relative;
&:not(:first-child) {
margin-left: $gap / 2;
&::before{
content: " ";
background-color: rgba(0, 0, 0, 0);
position: absolute;
left: - $gap - 2px;
width: $gap;
height: 100%;
cursor: w-resize;
}
}
&:not(:last-child) {
margin-right: $gap / 2;
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment