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

Feature/add block

See merge request !26

website/studerende-dk/src/assets/add-double.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 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>

website/studerende-dk/src/assets/add-single.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>

website/studerende-dk/src/assets/add-triple.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>

website/studerende-dk/src/assets/collapse-plus.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>

website/studerende-dk/src/assets/pencil-sharp.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>

website/studerende-dk/src/components/blocks/Edit.vue

+<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

website/studerende-dk/src/views/Home.vue

 <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;