Merge pull request #4303 from manuelmeister/feature/cleanup-layout-co…

…ntentnodes

Improve design of layout content nodes in layout mode

common/locales/de.json

@@ -10,7 +10,7 @@
     "columnLayout": {
       "entity": {
         "column": {
-          "name": "Spalte"
+          "name": "Spalte|Spalte {name}"
         }
       },
       "name": "Spaltenlayout"

common/locales/en.json

@@ -10,7 +10,7 @@
     "columnLayout": {
       "entity": {
         "column": {
-          "name": "Column"
+          "name": "Column|Column {name}"
         }
       },
       "icon": "mdi-view-column",

common/locales/fr.json

@@ -10,7 +10,7 @@
     "columnLayout": {
       "entity": {
         "column": {
-          "name": "Colonne"
+          "name": "Colonne|Colonne {name}"
         }
       },
       "name": "Disposition des colonnes"

common/locales/it.json

@@ -10,7 +10,7 @@
     "columnLayout": {
       "entity": {
         "column": {
-          "name": "Colonna"
+          "name": "Colonna|Colonna {name}"
         }
       },
       "name": "Layout delle colonne"

frontend/src/components/activity/ButtonNestedContentNodeAdd.vue

@@ -1,8 +1,24 @@
 <template>
-  <v-row v-if="layoutMode" no-gutters justify="center" class="mb-3">
+  <v-row
+    v-if="layoutMode"
+    no-gutters
+    justify="center"
+    class="mb-3 ec-button-contentnode-add-wrapper"
+    :class="{
+      'ec-button-contentnode-add-wrapper--center': root || single,
+      'ec-button-contentnode-add-wrapper--single': single,
+    }"
+  >
     <v-menu bottom left offset-y>
       <template #activator="{ on, attrs }">
-        <v-btn color="primary" outlined :loading="isAdding" v-bind="attrs" v-on="on">
+        <v-btn
+          class="ec-button-contentnode-add"
+          color="primary--text"
+          block
+          :loading="isAdding"
+          v-bind="attrs"
+          v-on="on"
+        >
           <v-icon left>mdi-plus-circle-outline</v-icon>
           {{ $tc('global.button.add') }}
         </v-btn>
@@ -52,6 +68,8 @@ export default {
     layoutMode: { type: Boolean, default: false },
     parentContentNode: { type: Object, required: true },
     slotName: { type: String, required: true },
+    root: { type: Boolean, default: false },
+    single: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -126,3 +144,32 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.ec-button-contentnode-add {
+  transition: all 0.2s linear;
+  transition-property: box-shadow, background-color;
+  box-shadow: inset 0 0 115px #f8fcff;
+  border: 2px dotted rgb(13, 71, 161, 0.36);
+  background-color: transparent !important;
+  justify-content: start;
+  &:hover {
+    outline: none;
+    border: 1px solid rgb(13, 71, 161, 0.6);
+    box-shadow: inset 0 0 115px #eef2fa;
+    padding: 1px 17px;
+  }
+}
+
+.dragging-content-node .ec-button-contentnode-add-wrapper--single {
+  position: absolute;
+  inset: 0;
+  margin-bottom: 6px !important;
+}
+
+.ec-button-contentnode-add-wrapper--center .ec-button-contentnode-add {
+  justify-content: center;
+  min-height: 36px;
+  height: 100% !important;
+}
+</style>

frontend/src/components/activity/ContentNode.vue

@@ -46,16 +46,9 @@ export default {
 </script>
 
 <style lang="scss">
-.content-node:not(.draggable) + .content-node:not(.draggable) {
-  border-radius: 0 !important;
-}
-
 .draggable {
   cursor: move;
-
-  &:hover {
-    background: map-get($blue-grey, 'lighten-5');
-  }
+  transition: background-color 0.3s 25ms ease;
 
   .theme--light.v-toolbar.v-sheet {
     background: none;

frontend/src/components/activity/DraggableContentNodes.vue

@@ -1,17 +1,18 @@
 <template>
-  <div class="d-flex flex-column flex-grow-1">
+  <div class="ec-draggable-content-nodes d-flex flex-column flex-grow-1 relative">
     <draggable
       v-if="contentNodeIds"
       v-model="localContentNodeIds"
       :disabled="!draggingEnabled"
       :group="{ name: 'contentNodes', put: responsiveLayoutsOnlyInRoot }"
       class="draggable-area flex-grow-1"
       :class="{
-        'min-height draggable-area--layout-mode pb-2': layoutMode,
+        'min-height draggable-area--layout-mode': layoutMode,
         'draggable-area--read-mode': !layoutMode,
         'draggable-area--root': isRoot,
         'draggable-area--column d-flex flex-column': direction === 'column',
         'draggable-area--row d-flex flex-row flex-wrap': direction === 'row',
+        'absolute inset-0': layoutMode && draggableContentNodeIds.length === 0,
       }"
       :swap-threshold="0.65"
       :inverted-swap-threshold="0.65"
@@ -38,12 +39,14 @@
       ></v-sheet>
     </draggable>
 
-    <button-nested-content-node-add
+    <ButtonNestedContentNodeAdd
       v-if="layoutMode"
-      class="flex-grow-0"
+      :class="{ 'flex-grow-0': draggableContentNodeIds.length !== 0 }"
       :layout-mode="layoutMode"
       :parent-content-node="parentContentNode"
       :slot-name="slotName"
+      :root="isRoot"
+      :single="!compact && draggableContentNodeIds.length === 0"
     />
   </div>
 </template>
@@ -69,6 +72,7 @@ export default {
     disabled: { type: Boolean, default: false },
     direction: { type: String, default: 'column' },
     isRoot: { type: Boolean, default: false },
+    compact: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -170,6 +174,37 @@ export default {
 .draggable-area ::v-deep .content-node {
   margin: 0 !important;
   flex-grow: 1;
+  transition: all 0.4s 25ms ease;
+  transition-property: background-color, border-color, box-shadow;
+}
+
+.draggable-area--layout-mode :deep(.content-node) {
+  border: 1px solid rgb(0 0 0 / 28%);
+}
+
+.draggable-area--layout-mode :deep(.content-node.draggable.sortable-chosen) {
+  background-color: white;
+}
+
+@supports selector(:has(+ *)) {
+  .draggable-area--layout-mode :deep(.content-node:has(.content-node:hover)) {
+    background: white;
+  }
+}
+
+@supports selector(:has(+ *)) {
+  .draggable-area--layout-mode
+    ::v-deep
+    .content-node:hover:is(
+      :not(:has(.content-node:hover)):not(:has(.ec-button-contentnode-add:hover)):not(
+          :has(.resize-btn:hover)
+        )
+    ) {
+    box-shadow:
+      0 4px 6px -3px rgba(0, 0, 0, 0.2),
+      0 8px 14px 1px rgba(0, 0, 0, 0.14),
+      0 2px 18px 3px rgba(0, 0, 0, 0.12) !important;
+  }
 }
 
 .draggable-area--row ::v-deep .content-node {
@@ -178,7 +213,8 @@ export default {
 
 .draggable-area--layout-mode {
   display: flex !important;
-  gap: 4px;
+  gap: 6px 4px;
+  margin-bottom: 6px;
 }
 
 .draggable-area--read-mode {
@@ -194,13 +230,13 @@ export default {
       pointer-events: none;
       display: block;
       position: absolute;
-      top: 4px;
-      bottom: 4px;
-      left: 4px;
-      right: 4px;
-      border-radius: 5px;
-      border: 2px dotted map-get($blue-grey, 'base');
-      background: map-get($blue-grey, 'lighten-4');
+      top: -4px;
+      bottom: -4px;
+      left: -4px;
+      right: -4px;
+      opacity: 40%;
+      border-radius: 8px;
+      border: 2px dotted map-get($blue, 'darken-2');
       opacity: 40%;
       content: '';
     }

frontend/src/components/activity/MenuCardlessContentNode.vue

@@ -1,7 +1,7 @@
 <template>
   <v-menu bottom left offset-y>
     <template #activator="{ on, attrs }">
-      <v-btn icon v-bind="attrs" v-on="on">
+      <v-btn icon class="mr-n1" small v-bind="attrs" v-on="on">
         <v-icon>mdi-dots-vertical</v-icon>
       </v-btn>
     </template>

frontend/src/components/activity/ScheduleEntry.vue

@@ -8,7 +8,7 @@ Displays a single scheduleEntry
     toolbar
     back
     :loaded="!scheduleEntry()._meta.loading && !activity.camp()._meta.loading"
-    :max-width="isPaperDisplaySize ? '944px' : ''"
+    :max-width="isLocalPaperDisplaySize ? '944px' : ''"
   >
     <template #title>
       <v-toolbar-title class="font-weight-bold">
@@ -100,21 +100,21 @@ Displays a single scheduleEntry
             icon
             class="d-none d-md-block"
             :aria-label="
-              isPaperDisplaySize
+              isLocalPaperDisplaySize
                 ? $tc('components.activity.scheduleEntry.switchToFullSize')
                 : $tc('components.activity.scheduleEntry.switchToPaperSize')
             "
             @click="toggleDisplaySize"
             v-on="on"
           >
-            <v-icon v-if="isPaperDisplaySize" class="resize-icon"
+            <v-icon v-if="isLocalPaperDisplaySize" class="resize-icon"
               >$vuetify.icons.bigScreen</v-icon
             >
             <v-icon v-else class="resize-icon">$vuetify.icons.paperSize</v-icon>
           </v-btn>
         </template>
         {{
-          isPaperDisplaySize
+          isLocalPaperDisplaySize
             ? $tc('components.activity.scheduleEntry.switchToFullSize')
             : $tc('components.activity.scheduleEntry.switchToPaperSize')
         }}
@@ -264,6 +264,7 @@ Displays a single scheduleEntry
 </template>
 
 <script>
+import { computed } from 'vue'
 import { sortBy } from 'lodash'
 import ContentCard from '@/components/layout/ContentCard.vue'
 import ApiTextField from '@/components/form/api/ApiTextField.vue'
@@ -299,6 +300,7 @@ export default {
       preferredContentTypes: () => this.preferredContentTypes,
       allContentNodes: () => this.contentNodes,
       camp: () => this.camp,
+      isPaperDisplaySize: computed(() => this.isPaperDisplaySize),
     }
   },
   props: {
@@ -314,6 +316,7 @@ export default {
       categoryChangeState: null,
       loading: true,
       isPaperDisplaySize: true,
+      isLocalPaperDisplaySize: true,
     }
   },
   computed: {
@@ -371,6 +374,7 @@ export default {
   async mounted() {
     this.isPaperDisplaySize =
       localStorage.getItem('activityIsPaperDisplaySize') !== 'false'
+    this.isLocalPaperDisplaySize = this.isPaperDisplaySize
     this.loading = true
     await this.scheduleEntry().activity()._meta.load // wait if activity is being loaded as part of a collection
     this.loading = false
@@ -430,6 +434,9 @@ export default {
     },
     toggleDisplaySize() {
       this.isPaperDisplaySize = !this.isPaperDisplaySize
+      this.$nextTick(() => {
+        this.isLocalPaperDisplaySize = this.isPaperDisplaySize
+      })
       localStorage.setItem('activityIsPaperDisplaySize', this.isPaperDisplaySize)
     },
   },