From 6f474d9261184a6dcf2b7397113b42ce2ca84851 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Wed, 19 Jan 2022 11:31:17 +0100
Subject: [PATCH] Update styling for element chooser, add checkbox for nested
 list

---
 .../ContentBlockElementChooserWidget.vue      | 179 +++++++++++-------
 1 file changed, 115 insertions(+), 64 deletions(-)

diff --git a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
index b7d5f3ec..3bddd786 100644
--- a/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
+++ b/client/src/components/content-forms/ContentBlockElementChooserWidget.vue
@@ -1,54 +1,90 @@
 <template>
-  <div
-    :class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
-    class="content-block-element-chooser-widget">
+  <div class="content-block-element-chooser-widget__wrapper">
+    <template
+      v-if="includeListOption"
+    >
+      <h3 class="content-block-element-chooser-widget__heading">
+        Neuer Inhalt
+      </h3>
+      <checkbox
+        class="content-block-element-chooser-widget__list-toggle"
+        :checked="convertToList"
+        label="Neues Aufzählungszeichen hinzufügen"
+        @input="convertToList=$event"
+      />
+    </template>
+
     <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--link"
-      data-cy="choose-link-widget"
-      @click="changeType('link_block')">
-      <link-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Link</div>
-    </div>
-    <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--video"
-      data-cy="choose-video-widget"
-      @click="changeType('video_block')">
-      <video-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Video</div>
-    </div>
-    <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--image"
-      data-cy="choose-image-widget"
-      @click="changeType('image_url_block')">
-      <image-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Bild</div>
-    </div>
-    <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--text"
-      data-cy="choose-text-widget"
-      @click="changeType('text_block')">
-      <text-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Text</div>
-    </div>
-    <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--assignment"
-      data-cy="choose-assignment-widget"
-      v-if="!hideAssignment"
-      @click="changeType('assignment')">
-      <speech-bubble-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Aufgabe&nbsp;& Ergebnis</div>
-    </div>
-    <div
-      class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--document"
-      data-cy="choose-document-widget"
-      @click="changeType('document_block')">
-      <document-icon class="content-block-element-chooser-widget__link-icon"/>
-      <div class="content-block-element-chooser-widget__link-title">Dokument</div>
+      :class="{'content-block-element-chooser-widget--no-assignment': hideAssignment}"
+      class="content-block-element-chooser-widget"
+    >
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--link"
+        data-cy="choose-link-widget"
+        @click="changeType('link_block')"
+      >
+        <link-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Link
+        </div>
+      </div>
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--video"
+        data-cy="choose-video-widget"
+        @click="changeType('video_block')"
+      >
+        <video-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Video
+        </div>
+      </div>
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--image"
+        data-cy="choose-image-widget"
+        @click="changeType('image_url_block')"
+      >
+        <image-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Bild
+        </div>
+      </div>
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--text"
+        data-cy="choose-text-widget"
+        @click="changeType('text_block')"
+      >
+        <text-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Text
+        </div>
+      </div>
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--assignment"
+        data-cy="choose-assignment-widget"
+        v-if="!hideAssignment"
+        @click="changeType('assignment')"
+      >
+        <speech-bubble-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Aufgabe&nbsp;& Ergebnis
+        </div>
+      </div>
+      <div
+        class="content-block-element-chooser-widget__link content-block-element-chooser-widget__link--document"
+        data-cy="choose-document-widget"
+        @click="changeType('document_block')"
+      >
+        <document-icon class="content-block-element-chooser-widget__link-icon" />
+        <div class="content-block-element-chooser-widget__link-title">
+          Dokument
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+  import Checkbox from '@/components/ui/Checkbox';
   const LinkIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/LinkIcon');
   const VideoIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/VideoIcon');
   const ImageIcon = () => import(/* webpackChunkName: "icons" */'@/components/icons/ImageIcon');
@@ -63,10 +99,15 @@
       hideAssignment: {
         type: Boolean,
         default: false
+      },
+      includeListOption: {
+        type: Boolean,
+        default: false
       }
     },
 
     components: {
+      Checkbox,
       LinkIcon,
       VideoIcon,
       ImageIcon,
@@ -75,9 +116,16 @@
       DocumentIcon
     },
 
+    data: () => ({
+      convertToList: false
+    }),
+
     methods: {
       changeType(type) {
-        this.$emit('change-type', type);
+        this.$emit('change-type', {
+          type,
+          convertToList: this.convertToList
+        });
       }
     },
   };
@@ -88,6 +136,7 @@
 
   .content-block-element-chooser-widget {
     display: -ms-grid;
+
     @supports (display: grid) {
       display: grid;
     }
@@ -96,10 +145,8 @@
     grid-column-gap: 0px;
     font-family: $sans-serif-font-family;
     text-align: center;
-    border: 2px solid $color-silver-dark;
-    padding: 30px 5px;
-    border-radius: 12px;
-    margin-top: 20px;
+    //border: 2px solid $color-silver-dark;
+    //border-radius: 12px;
     position: relative;
     margin-bottom: 20px;
 
@@ -133,34 +180,38 @@
       -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
     }
 
-    &::before {
-      content: "";
-      position: absolute;
-      width: 20px;
-      height: 20px;
-      border: 2px solid $color-silver-dark;
-      border-bottom: 0;
-      border-right: 0;
-      background-color: white;
-      top: -12px;
-      left: 50%;
-      transform: translateX(-50%) rotate(45deg);
+    &__heading {
+      @include heading-4;
+      margin-bottom: $medium-spacing;
+    }
+
+    &__list-toggle {
+      margin-bottom: $medium-spacing;
     }
 
     &__link {
-      padding: 0 20px;
       cursor: pointer;
+      border: 1px solid $color-silver;
+      border-radius: 4px;
+      height: 105px;
+      width: 105px;
+      box-sizing: border-box;
+      display: grid;
+      grid-template-rows: 1fr 45px;
+      justify-content: center;
+      justify-items: center;
+      align-items: center;
     }
 
     &__link-icon {
       width: 40px;
       height: 40px;
-      margin-bottom: 15px;
+      align-self: end;
     }
 
     &__link-text {
       font-size: toRem(13px);
+      align-self: start;
     }
-
   }
 </style>