Commit 071ad50a authored by Johan Degn's avatar Johan Degn
Browse files

Completed addblock functionality (NOT nice looking)

parent 2263570b
Pipeline #52408 passed with stage
in 41 seconds
......@@ -2,21 +2,28 @@
<div class="home">
<div id="grid">
<div @mousedown="resizeVertical($event, rowIndex)" class="row" v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }">
<div @click="editBlock(colBlock.type)" @mousedown="resizeHorizontal($event, rowIndex, colIndex)" class="col" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width }">
<div @click="editBlock(colBlock.type, rowIndex, colIndex)" @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>
<div class="modal-overlay" v-if="chooseBlockActive" @click="chooseBlockActive = false"></div>
<div class="modal" v-if="chooseBlockActive">
<button class="" @click="chooseBlockActive = false">
<div class="modal-overlay" v-if="addBlockInfo.chooseBlockActive" @click="addBlockInfo.chooseBlockActive = false"></div>
<div class="modal" v-if="addBlockInfo.chooseBlockActive">
<div>
<button class="close-choose-block" @click="addBlockInfo.chooseBlockActive = false">
<img v-svg-inline class="icon" src="@/assets/cross.svg"/>
</button>
</div>
<ul>
<li v-for="(block, index) in blockTypes" :key="index">
<button class="choose-specific-block" @click="setBlock(block.type)">
<span> {{ block.name }} </span>
</button>
</li>
</ul>
</div>
<button v-if="!addBlocksActive" class="add-block" @click="addBlocksActive = true">
<button v-if="!addBlockInfo.addBlocksActive" class="add-block" @click="addBlockInfo.addBlocksActive = true">
<img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
</button>
<div v-else>
......@@ -39,7 +46,7 @@
</button>
</div>
<div class="add-block-div">
<button class="add-block" @click="addBlocksActive = false">
<button class="add-block" @click="addBlockInfo.addBlocksActive = false">
<img v-svg-inline class="icon" src="@/assets/cross.svg"/>
<span>Cancel</span>
</button>
......@@ -86,11 +93,21 @@ export default {
blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
}
],
addBlocksActive: false,
chooseBlockActive: false,
addBlockInfo: {
addBlocksActive: false,
chooseBlockActive: false,
changeAtIndex: {row: null, col: null},
},
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {index: 0},
horizontalResizeObject: {row: 0, col: 0}
horizontalResizeObject: {row: 0, col: 0},
blockTypes: [
{name: "Aktive Kurser", type: "ActiveCourses"},
{name: "Deadlines", type: "Deadlines"},
{name: "Feed", type: "Feed"},
{name: "Mail", type: "Mail"},
{name: "Kalender", type: "Calendar"}
]
}
},
......@@ -98,8 +115,8 @@ export default {
addBlock(cells) {
// Creates the new blocks data object
let blocks = [];
const element = { type: "Edit", width: 100 / cells };
for (let i = 0; i < cells; i++) {
const element = { type: "Edit", width: 100 / cells };
blocks.push(element);
}
......@@ -110,13 +127,21 @@ export default {
});
// Shows the plus again
this.addBlocksActive = false;
this.addBlockInfo.addBlocksActive = false;
},
editBlock(type) {
editBlock(type, row, col) {
if (type !== "Edit")
return;
this.chooseBlockActive = true;
this.addBlockInfo.chooseBlockActive = true;
this.addBlockInfo.changeAtIndex = {row: row, col: col};
},
setBlock(type) {
const row = this.addBlockInfo.changeAtIndex.row;
const col = this.addBlockInfo.changeAtIndex.col;
this.layout[row].blocks[col].type = type;
this.addBlockInfo.chooseBlockActive = false;
},
resizeHorizontalMouseMove(event) {
......@@ -330,6 +355,7 @@ export default {
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
......@@ -343,8 +369,36 @@ export default {
z-index: 101;
width: 100%;
max-width: 700px;
max-width: 400px;
background-color: $bg-color;
border-radius: 8px;
border-radius: 10px;
}
.close-choose-block {
width: 40px;
height: 40px;
border: none;
background: none;
padding: 0px;
float: right;
z-index: 102;
svg {
width: 100%;
height: 100%;
fill: #777f80;
}
&:hover, &:focus {
cursor: pointer;
svg {
fill: $darker-theme-color;
}
}
}
.choose-specific-block {
}
</style>
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