Commit b4fecd2a authored by Johan Degn's avatar Johan Degn
Browse files

Completed edit block and fixed mobile view

parent e53f279f
Pipeline #52527 passed with stage
in 39 seconds
<template>
<p>pencil svg icon here</p>
<div class="edit-pencil">
<img v-svg-inline class="edit-pencil-icon" src="@/assets/pencil-sharp.svg"/>
</div>
</template>
<script>
export default {
name: 'Edit'
}
</script>
<style scoped lang="scss">
.edit-pencil {
min-height: 100;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
&:hover {
background: $lighter-green-theme-color;
.edit-pencil-icon {
fill: $lighter-green-theme-color;
}
}
}
.edit-pencil-icon {
max-height: 150px;
max-width: 150px;
fill: $light-green-theme-color;
background: $light-theme-color;
}
</style>
\ No newline at end of file
......@@ -7,10 +7,10 @@
<span class="col-preview">
<component :is="previewType"></component>
</span>
<div @click="editBlock(colBlock.type, rowIndex, colIndex)" @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col"
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" :class="colBlock.type"
v-show="!isDragged(rowIndex, colIndex)" v-for="(colBlock, colIndex) in rowBlock.blocks" :key="colIndex" :style="{ 'flex-grow': colBlock.width, 'order': colIndex }">
<component :is="colBlock.type" :row="rowIndex" :col="colIndex"></component>
<button class="hidden-row-item pencil" @click="editBlock('Edit', rowIndex, colIndex)">
<component :is="colBlock.type" :row="rowIndex" :col="colIndex" @click="tryEditBlock(colBlock.type, rowIndex, colIndex)"></component>
<button class="hidden-row-item pencil" v-if="colBlock.type!=='Edit'" @click="editBlock(rowIndex, colIndex)">
<img v-svg-inline class="icon" src="@/assets/pencil.svg"/>
</button>
</div>
......@@ -150,9 +150,13 @@ export default {
this.addBlockInfo.addBlocksActive = false;
},
editBlock(type, row, col) {
tryEditBlock(type, row, col) {
if (type !== "Edit")
return;
this.editBlock(row, col);
},
editBlock(row, col) {
this.addBlockInfo.chooseBlockActive = true;
this.addBlockInfo.changeAtIndex = {row: row, col: col};
},
......@@ -169,7 +173,8 @@ export default {
blurRow(rowIndex) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col animate-blur-grey-out-zoom";
col.classList.remove("animate-slight-blur-grey-out");
col.classList.add("animate-blur-grey-out-zoom");
}
},
......@@ -177,7 +182,7 @@ export default {
if(!this.deleting) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col animate-slight-blur-grey-out";
col.classList.add("animate-slight-blur-grey-out");
}
}
},
......@@ -186,7 +191,8 @@ export default {
if(!this.deleting) {
const cols = document.getElementById(rowIndex).getElementsByClassName("col");
for (const col of cols) {
col.className = "col";
col.classList.remove("animate-slight-blur-grey-out");
col.classList.remove("animate-blur-grey-out-zoom");
}
}
},
......@@ -596,14 +602,18 @@ export default {
.row {
display: flex;
padding-top: $gap / 2;
//padding-top: $gap / 2;
flex-direction: column;
position: relative;
min-height: 150px;
//min-height: 150px;
&.drag * {
pointer-events: none;
}
&:first-of-type {
padding-top: $gap / 2;
}
}
.col, .col-preview {
......@@ -616,10 +626,11 @@ export default {
.col {
position: relative;
margin-bottom: $gap / 2;
}
&:not(:last-of-type) {
margin-bottom: $gap / 2;
}
.Edit {
display: none;
}
.col-preview {
......@@ -729,6 +740,7 @@ export default {
}
}
}
.remove-block {
right: $gap - 5px + $gap / 2;
order: 1000;
......@@ -883,6 +895,10 @@ export default {
flex-direction: row;
padding-top: $gap;
&:first-of-type {
padding-top: $gap;
}
&:hover {
.remove-block {
width: 0;
......@@ -990,6 +1006,10 @@ export default {
}
}
.Edit {
display: block;
}
.add-block{
display: initial;
}
......
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