Commit 09b6babb authored by Johan Tanderup Degn's avatar Johan Tanderup Degn
Browse files

Merge branch 'feature/add-block' into 'develop'

Feature/add block

See merge request !26
parents 378f3791 cfb96907
Pipeline #52537 passed with stages
in 2 minutes and 42 seconds
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 120 120"
xml:space="preserve"
sodipodi:docname="add-double.svg"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
width="120"
height="120"><metadata
id="metadata30"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs28" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview26"
showgrid="false"
inkscape:zoom="5.0203873"
inkscape:cx="49.099233"
inkscape:cy="51.399697"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"
inkscape:document-rotation="0" /><g
id="g23"
transform="scale(0.97648303,1.0022551)"><path
d="m 22.72,0 h 77.45 c 6.25,0 11.93,2.56 16.05,6.67 4.11,4.11 6.67,9.79 6.67,16.05 v 74.29 c 0,6.25 -2.56,11.93 -6.67,16.05 l -0.32,0.29 c -4.09,3.94 -9.64,6.38 -15.73,6.38 H 22.72 c -6.25,0 -11.93,-2.56 -16.05,-6.67 l -0.3,-0.32 C 2.43,108.64 0,103.09 0,97.01 V 22.71 C 0,16.46 2.55,10.78 6.67,6.66 10.78,2.55 16.46,0 22.72,0 Z m 38.72,110.87146 c -40.96,-73.914307 -20.48,-36.957153 0,0 z M 100.16,10.24 H 22.72 c -3.43,0 -6.54,1.41 -8.81,3.67 -2.26,2.26 -3.67,5.38 -3.67,8.81 v 74.29 c 0,3.33 1.31,6.35 3.43,8.59 l 0.24,0.22 c 2.26,2.26 5.38,3.67 8.81,3.67 h 77.45 c 3.32,0 6.35,-1.31 8.59,-3.44 l 0.21,-0.23 c 2.26,-2.26 3.67,-5.38 3.67,-8.81 v -74.3 c 0,-3.42 -1.41,-6.54 -3.67,-8.81 -2.26,-2.25 -5.38,-3.66 -8.81,-3.66 z"
id="path21"
sodipodi:nodetypes="sscssccssccssssccsscssccssccsscs" /></g><path
d="M 55.00485,5 65,5.1530066 C 65,41.756291 65,78.359573 65,114.96284 L 55.00485,115 c -0.0042,-36.666662 -0.0084,-73.333298 0,-109.9999674 z"
id="path21-9-9"
sodipodi:nodetypes="ccccc"
style="stroke-width:0.953616" /></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 120 120"
xml:space="preserve"
sodipodi:docname="add-single.svg"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
width="120"
height="120"><metadata
id="metadata30"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs28" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview26"
showgrid="false"
inkscape:zoom="5.0203873"
inkscape:cx="49.099233"
inkscape:cy="51.399697"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"
inkscape:document-rotation="0" /><g
id="g23"
transform="scale(0.97648303,1.0022551)"><path
d="m 22.72,0 h 77.45 c 6.25,0 11.93,2.56 16.05,6.67 4.11,4.11 6.67,9.79 6.67,16.05 v 74.29 c 0,6.25 -2.56,11.93 -6.67,16.05 l -0.32,0.29 c -4.09,3.94 -9.64,6.38 -15.73,6.38 H 22.72 c -6.25,0 -11.93,-2.56 -16.05,-6.67 l -0.3,-0.32 C 2.43,108.64 0,103.09 0,97.01 V 22.71 C 0,16.46 2.55,10.78 6.67,6.66 10.78,2.55 16.46,0 22.72,0 Z m 38.72,110.87146 c -40.96,-73.914307 -20.48,-36.957153 0,0 z M 100.16,10.24 H 22.72 c -3.43,0 -6.54,1.41 -8.81,3.67 -2.26,2.26 -3.67,5.38 -3.67,8.81 v 74.29 c 0,3.33 1.31,6.35 3.43,8.59 l 0.24,0.22 c 2.26,2.26 5.38,3.67 8.81,3.67 h 77.45 c 3.32,0 6.35,-1.31 8.59,-3.44 l 0.21,-0.23 c 2.26,-2.26 3.67,-5.38 3.67,-8.81 v -74.3 c 0,-3.42 -1.41,-6.54 -3.67,-8.81 -2.26,-2.25 -5.38,-3.66 -8.81,-3.66 z"
id="path21"
sodipodi:nodetypes="sscssccssccssssccsscssccssccsscs" /></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 120 120"
xml:space="preserve"
sodipodi:docname="add-double.svg"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"
width="120"
height="120"><metadata
id="metadata30"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs28" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview26"
showgrid="false"
inkscape:zoom="5.0203873"
inkscape:cx="49.099233"
inkscape:cy="51.399697"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_1"
inkscape:document-rotation="0" /><g
id="g23"
transform="scale(0.97648303,1.0022551)"><path
d="m 22.72,0 h 77.45 c 6.25,0 11.93,2.56 16.05,6.67 4.11,4.11 6.67,9.79 6.67,16.05 v 74.29 c 0,6.25 -2.56,11.93 -6.67,16.05 l -0.32,0.29 c -4.09,3.94 -9.64,6.38 -15.73,6.38 H 22.72 c -6.25,0 -11.93,-2.56 -16.05,-6.67 l -0.3,-0.32 C 2.43,108.64 0,103.09 0,97.01 V 22.71 C 0,16.46 2.55,10.78 6.67,6.66 10.78,2.55 16.46,0 22.72,0 Z m 38.72,110.87146 c -40.96,-73.914307 -20.48,-36.957153 0,0 z M 100.16,10.24 H 22.72 c -3.43,0 -6.54,1.41 -8.81,3.67 -2.26,2.26 -3.67,5.38 -3.67,8.81 v 74.29 c 0,3.33 1.31,6.35 3.43,8.59 l 0.24,0.22 c 2.26,2.26 5.38,3.67 8.81,3.67 h 77.45 c 3.32,0 6.35,-1.31 8.59,-3.44 l 0.21,-0.23 c 2.26,-2.26 3.67,-5.38 3.67,-8.81 v -74.3 c 0,-3.42 -1.41,-6.54 -3.67,-8.81 -2.26,-2.25 -5.38,-3.66 -8.81,-3.66 z"
id="path21"
sodipodi:nodetypes="sscssccssccssssccsscssccssccsscs" /></g><path
d="m 71.67185,5 9.995166,0.1530066 c 0,36.6032804 0,73.2065604 0,109.8098434 L 71.67185,115 c -0.0042,-36.666668 -0.0084,-73.333302 0,-109.9999674 z"
id="path21-9"
sodipodi:nodetypes="ccccc"
style="stroke-width:0.953618" /><path
d="M 38.33785,5 48.333,5.1530066 c 0,36.6032844 0,73.2065664 0,109.8098334 L 38.33785,115 c -0.0042,-36.666662 -0.0084,-73.333298 0,-109.9999674 z"
id="path21-9-9"
sodipodi:nodetypes="ccccc"
style="stroke-width:0.953616" /></svg>
<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122.88 119.72" style="enable-background:new 0 0 122.88 119.72" xml:space="preserve"><g><path d="M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z"/></g></svg>
\ No newline at end of file
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 120 120"
xml:space="preserve"
sodipodi:docname="collapse-plus.svg"
width="120"
height="120"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"><metadata
id="metadata11"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
id="defs9" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview7"
showgrid="false"
inkscape:zoom="7.0998997"
inkscape:cx="61.439999"
inkscape:cy="59.860001"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g4" /><g
id="g4"
transform="scale(0.97648303,1.0022551)"><path
d="m 22.72,0 h 77.45 c 6.25,0 11.93,2.56 16.05,6.67 4.11,4.11 6.67,9.79 6.67,16.05 v 74.29 c 0,6.25 -2.56,11.93 -6.67,16.05 l -0.32,0.29 c -4.09,3.94 -9.64,6.38 -15.73,6.38 H 22.72 c -6.25,0 -11.93,-2.56 -16.05,-6.67 l -0.3,-0.32 C 2.43,108.64 0,103.09 0,97.01 V 22.71 C 0,16.46 2.55,10.78 6.67,6.66 10.78,2.55 16.46,0 22.72,0 Z m 32.75,38.34 c 0,-3.3 2.67,-5.97 5.97,-5.97 3.3,0 5.97,2.67 5.97,5.97 v 15.55 h 15.55 c 3.3,0 5.97,2.67 5.97,5.97 0,3.3 -2.67,5.97 -5.97,5.97 H 67.41 v 15.55 c 0,3.3 -2.67,5.97 -5.97,5.97 -3.3,0 -5.97,-2.67 -5.97,-5.97 V 65.83 H 39.91 c -3.3,0 -5.97,-2.67 -5.97,-5.97 0,-3.3 2.67,-5.97 5.97,-5.97 H 55.46 V 38.34 Z m 44.69,-28.1 H 22.72 c -3.43,0 -6.54,1.41 -8.81,3.67 -2.26,2.26 -3.67,5.38 -3.67,8.81 v 74.29 c 0,3.33 1.31,6.35 3.43,8.59 l 0.24,0.22 c 2.26,2.26 5.38,3.67 8.81,3.67 h 77.45 c 3.32,0 6.35,-1.31 8.59,-3.44 l 0.21,-0.23 c 2.26,-2.26 3.67,-5.38 3.67,-8.81 v -74.3 c 0,-3.42 -1.41,-6.54 -3.67,-8.81 -2.26,-2.25 -5.38,-3.66 -8.81,-3.66 z"
id="path2" /></g></svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 122.87001 122.87001"
xml:space="preserve"
sodipodi:docname="pencil-sharp.svg"
width="122.87"
height="122.87"
inkscape:version="1.0.2-2 (e86c870879, 2021-01-15)"><metadata
id="metadata13"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
id="defs11" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1017"
id="namedview9"
showgrid="false"
inkscape:zoom="6.9173179"
inkscape:cx="60.511321"
inkscape:cy="52.473941"
inkscape:window-x="1912"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="g6"
inkscape:document-rotation="0" /><style
type="text/css"
id="style2">.st0{fill-rule:evenodd;clip-rule:evenodd;}</style><g
id="g6"><path
class="st0"
d="M 125.47216,-1.7347764 V 125.47216 H -2.1684705 V -1.7347764 Z m -43.132079,29.3817284 13.24504,13.21039 c 1.745228,1.739298 1.745228,4.596718 0,6.325665 l -7.334117,7.309196 -19.60266,-19.536054 7.334118,-7.309197 c 1.745228,-1.739299 4.602002,-1.739299 6.357619,0 z M 52.203719,90.38595 c -5.298017,1.635769 -10.606421,3.261185 -15.914825,4.907307 -12.476309,3.840952 -12.41398,6.398133 -9.017016,-5.559545 l 5.360345,-18.842405 v 0 l -0.02078,-0.0207 32.328286,-32.218443 19.60266,19.536055 -32.30751,32.208088 z M 35.987634,74.21461 48.858697,87.04194 c -3.48007,1.066357 -6.970528,2.132712 -10.460986,3.219774 -8.185954,2.505419 -8.144401,4.192953 -5.921311,-3.664952 z"
id="path4"
sodipodi:nodetypes="ccccccccccscccccccccccccccc"
style="stroke-width:1.03706" /></g></svg>
<template>
<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
<template>
<div class="home">
<div id="grid">
<div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
<div @mousedown="resizeVertical($event, rowIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex" class="row" :class="{ drag: draggedBlock !== null }"
v-for="(rowBlock, rowIndex) in layout" :key="rowIndex" :style="{ height: rowBlock.height + 'px' }" @mouseleave="cancelRemoveRow(rowIndex)"
@dragover="dragHover($event, rowIndex)" @dragleave="hidePreview()" @drop="drop($event, rowIndex)">
<span class="col-preview">
<component :is="previewType"></component>
</span>
<div @mousedown="resizeHorizontal($event, rowIndex, colIndex)" @mouseup="saveAndStopResizing()" :id="rowIndex+','+colIndex" class="col" 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">
<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" @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>
......@@ -24,15 +24,59 @@
<img v-svg-inline class="icon" src="@/assets/draw-tick.svg"/>
</button>
</div>
<button class="add-block" @click="addBlock()">
<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="!addBlockInfo.addBlocksActive" class="add-block" @click="addBlockInfo.addBlocksActive = true">
<img v-svg-inline class="icon" src="@/assets/collapse-plus.svg"/>
</button>
<div v-else>
<div class="add-block-div">
<button class="add-block" @click="addBlock(1)">
<img v-svg-inline class="icon" src="@/assets/add-single.svg"/>
<span>Single</span>
</button>
</div>
<div class="add-block-div">
<button class="add-block" @click="addBlock(2)">
<img v-svg-inline class="icon" src="@/assets/add-double.svg"/>
<span>Double</span>
</button>
</div>
<div class="add-block-div">
<button class="add-block" @click="addBlock(3)">
<img v-svg-inline class="icon" src="@/assets/add-triple.svg"/>
<span>Triple</span>
</button>
</div>
<div class="add-block-div">
<button class="add-block" @click="addBlockInfo.addBlocksActive = false">
<img v-svg-inline class="icon" src="@/assets/cross.svg"/>
<span>Cancel</span>
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { computed } from 'vue';
import Edit from "@/components/blocks/Edit";
import ActiveCourses from "@/components/blocks/ActiveCourses";
import Deadlines from "@/components/blocks/Deadlines";
import Feed from "@/components/blocks/Feed";
......@@ -62,23 +106,22 @@ export default {
data() {
return {
layout: [
{
height: 400,
blocks: [{type: "Calendar", width: 75}, {type: "ActiveCourses", width: 25}]
},
{
height: 250,
blocks: [{type: "Deadlines", width: 100}]
},
{
height: 300,
blocks: [{type: "Feed", width: 50}, {type: "Mail", width: 25}, {type: "Mail", width: 25}]
}
],
layout: [],
addBlockInfo: {
addBlocksActive: false,
chooseBlockActive: false,
changeAtIndex: {row: null, col: null},
},
mouseDragPos: {x: 0, y: 0},
verticalResizeObject: {index: 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"}
],
prevWinWidth: 1000,
draggedBlock: null,
activePreview: null,
......@@ -89,18 +132,49 @@ export default {
},
methods: {
addBlock() {
addBlock(cells) {
// Creates the new blocks data object
let blocks = [];
for (let i = 0; i < cells; i++) {
const element = { type: "Edit", width: 100 / cells };
blocks.push(element);
}
// Updates the layout
this.layout.push({
height: 300,
blocks: [{ type: "ActiveCourses", width: 30 },{ type: "Feed", width: 70 }]
blocks: blocks
});
// Shows the plus again
this.addBlockInfo.addBlocksActive = false;
},
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};
},
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;
this.saveLayout("isaac");
},
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");
}
},
......@@ -108,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");
}
}
},
......@@ -117,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");
}
}
},
......@@ -507,6 +582,7 @@ export default {
},
components: {
Edit,
ActiveCourses,
Deadlines,
Feed,
......@@ -526,14 +602,16 @@ export default {
.row {
display: flex;
padding-top: $gap / 2;
flex-direction: column;
position: relative;
min-height: 150px;
&.drag * {
pointer-events: none;
}
&:first-of-type {
padding-top: $gap / 2;
}
}
.col, .col-preview {
......@@ -546,10 +624,11 @@ export default {
.col {
position: relative;
margin-bottom: $gap / 2;
}
&:not(:last-of-type) {
margin-bottom: $gap / 2;
}
.Edit {
display: none;
}
.col-preview {
......@@ -567,6 +646,87 @@ export default {
margin-top: $gap;
svg {
width: 100%;
height: 100%;
fill: #777f80;
}
&:hover, &:focus {
cursor: pointer;
svg {
fill: $darker-theme-color;
}
}
}
.add-block-div {
display: inline-block;
span {
color: #777f80;
}
&:hover, &:focus {
span {
color: $darker-theme-color;
}
}
&:not(:last-child) {
margin-right: 10px;
}
&:not(:first-child) {
margin-left: 10px;
}
&:last-child {
margin-left: 30px;
}
}
.modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 101;
width: 100%;
max-width: 300px;
border-radius: 10px;
padding: 20px;
background-color: $light-green-theme-color;
border: 2px solid $theme-color;