Improve admin activity section

frontend/src/components/activity/DraggableContentNodes.vue

@@ -40,7 +40,7 @@
     </draggable>
 
     <ButtonNestedContentNodeAdd
-      v-if="layoutMode"
+      v-if="layoutMode && !disabled"
       :class="{ 'flex-grow-0': draggableContentNodeIds.length !== 0 }"
       :layout-mode="layoutMode"
       :parent-content-node="parentContentNode"
@@ -208,7 +208,7 @@ export default {
 }
 
 .draggable-area--row ::v-deep .content-node {
-  flex: 1 0 320px;
+  flex: 1 0 320px !important;
 }
 
 .draggable-area--layout-mode {

frontend/src/components/activity/ScheduleEntry.vue

@@ -93,32 +93,7 @@ Displays a single scheduleEntry
         <template v-else>{{ $tc('global.button.back') }}</template>
       </v-btn>
 
-      <v-tooltip bottom>
-        <template #activator="{ on }">
-          <v-btn
-            text
-            icon
-            class="d-none d-md-block"
-            :aria-label="
-              isLocalPaperDisplaySize
-                ? $tc('components.activity.scheduleEntry.switchToFullSize')
-                : $tc('components.activity.scheduleEntry.switchToPaperSize')
-            "
-            @click="toggleDisplaySize"
-            v-on="on"
-          >
-            <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>
-        {{
-          isLocalPaperDisplaySize
-            ? $tc('components.activity.scheduleEntry.switchToFullSize')
-            : $tc('components.activity.scheduleEntry.switchToPaperSize')
-        }}
-      </v-tooltip>
+      <TogglePaperSize :value="isPaperDisplaySize" @input="toggleDisplaySize" />
       <!-- hamburger menu -->
       <v-menu v-if="!layoutMode" offset-y>
         <template #activator="{ on, attrs }">
@@ -280,10 +255,13 @@ import { errorToMultiLineToast } from '@/components/toast/toasts'
 import CategoryChip from '@/components/generic/CategoryChip.vue'
 import CopyActivityInfoDialog from '@/components/activity/CopyActivityInfoDialog.vue'
 import DialogEntityDelete from '@/components/dialog/DialogEntityDelete.vue'
+import TogglePaperSize from '@/components/activity/TogglePaperSize.vue'
+import { useDisplaySize } from '@/components/activity/useDisplaySize.js'
 
 export default {
   name: 'ScheduleEntry',
   components: {
+    TogglePaperSize,
     DialogEntityDelete,
     ContentCard,
     ApiTextField,
@@ -309,14 +287,15 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return useDisplaySize()
+  },
   data() {
     return {
       layoutMode: false,
       editActivityTitle: false,
       categoryChangeState: null,
       loading: true,
-      isPaperDisplaySize: true,
-      isLocalPaperDisplaySize: true,
     }
   },
   computed: {
@@ -372,9 +351,6 @@ export default {
 
   // reload data every time user navigates to Activity view
   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
@@ -432,13 +408,6 @@ export default {
       // redirect to Picasso
       this.$router.push(periodRoute(this.scheduleEntry().period()))
     },
-    toggleDisplaySize() {
-      this.isPaperDisplaySize = !this.isPaperDisplaySize
-      this.$nextTick(() => {
-        this.isLocalPaperDisplaySize = this.isPaperDisplaySize
-      })
-      localStorage.setItem('activityIsPaperDisplaySize', this.isPaperDisplaySize)
-    },
   },
 }
 </script>
@@ -457,9 +426,4 @@ export default {
 .ec-schedule-entry {
   transition: max-width 0.7s ease;
 }
-
-.resize-icon,
-.resize-icon :deep(svg) {
-  width: 28px !important;
-}
 </style>

frontend/src/components/activity/TogglePaperSize.vue

@@ -0,0 +1,44 @@
+<template>
+  <v-tooltip bottom>
+    <template #activator="{ on }">
+      <v-btn
+        text
+        icon
+        class="ec-paper-size-toggle d-none d-md-block"
+        :aria-label="
+          value
+            ? $tc('components.activity.togglePaperSize.switchToFullSize')
+            : $tc('components.activity.togglePaperSize.switchToPaperSize')
+        "
+        v-bind="buttonProps"
+        @click="$emit('input', !value)"
+        v-on="on"
+      >
+        <v-icon v-if="value" class="resize-icon">$vuetify.icons.bigScreen </v-icon>
+        <v-icon v-else class="resize-icon">$vuetify.icons.paperSize</v-icon>
+      </v-btn>
+    </template>
+    {{
+      value
+        ? $tc('components.activity.togglePaperSize.switchToFullSize')
+        : $tc('components.activity.togglePaperSize.switchToPaperSize')
+    }}
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  name: 'TogglePaperSize',
+  props: {
+    value: { type: Boolean, default: false },
+    buttonProps: { type: Object, default: () => ({}) },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.resize-icon,
+.resize-icon :deep(svg) {
+  width: 28px !important;
+}
+</style>

frontend/src/components/activity/content/layout/ContentNodeCard.vue

@@ -36,7 +36,7 @@
         />
 
         <v-btn
-          v-if="!editInstanceName && !layoutMode"
+          v-if="!editInstanceName && !layoutMode && !disabled"
           icon
           class="visible-on-hover"
           width="36"

frontend/src/components/activity/useDisplaySize.js

@@ -0,0 +1,29 @@
+import { ref, onMounted, nextTick } from 'vue'
+
+export function useDisplaySize() {
+  const isPaperDisplaySize = ref(
+    localStorage.getItem('activityIsPaperDisplaySize') !== 'false'
+  )
+
+  const isLocalPaperDisplaySize = ref(isPaperDisplaySize.value)
+
+  onMounted(() => {
+    isPaperDisplaySize.value =
+      localStorage.getItem('activityIsPaperDisplaySize') !== 'false'
+    isLocalPaperDisplaySize.value = isPaperDisplaySize.value
+  })
+
+  function toggleDisplaySize() {
+    isPaperDisplaySize.value = !isPaperDisplaySize.value
+    nextTick(() => {
+      isLocalPaperDisplaySize.value = isPaperDisplaySize.value
+    })
+    localStorage.setItem('activityIsPaperDisplaySize', `${isPaperDisplaySize.value}`)
+  }
+
+  return {
+    isPaperDisplaySize,
+    isLocalPaperDisplaySize,
+    toggleDisplaySize,
+  }
+}