Vue offline

contentcuration/contentcuration/frontend/channelEdit/components/AddRelatedResourcesModal.vue

@@ -1,39 +1,23 @@
 <template>
 
-  <VDialog
-    :value="true"
-    fullscreen
-    app
-    hide-overlay
-    transition="dialog-bottom-transition"
-    lazy
-    scrollable
-  >
-    <VCard :style="{'height': '100%'}">
-      <VToolbar
+  <FullscreenModal :value="true" :header="toolbarTitle">
+    <template #close>
+      <span></span>
+    </template>
+    <template #action>
+      <VBtn
         dark
-        app
-        color="primary"
-        clipped-right
+        flat
+        @click="onCancelClick"
       >
-        <VToolbarTitle>{{ toolbarTitle }}</VToolbarTitle>
-        <VSpacer />
-        <VToolbarItems>
-          <VBtn
-            dark
-            flat
-            @click="onCancelClick"
-          >
-            {{ $tr('cancelBtnLabel') }}
-          </VBtn>
-        </VToolbarItems>
-      </VToolbar>
-
+        {{ $tr('cancelBtnLabel') }}
+      </VBtn>
+    </template>
+    <VContent class="px-4">
       <p class="mt-4 ml-2">
         {{ $tr('resourcesDisplayedText') }}
         <span class="font-weight-bold notranslate">&apos;{{ targetNodeTitle }}&apos;</span>
       </p>
-
       <NodeTreeNavigation
         v-if="selectedNodeId"
         v-model="selectedNodeId"
@@ -97,10 +81,11 @@
           </template>
         </VListTile>
       </NodeTreeNavigation>
-    </VCard>
+    </VContent>
     <ResourceDrawer
       :nodeId="previewNodeId"
       :channelId="currentChannelId"
+      style="margin-top: 64px; max-height: calc(100vh-64px);"
       app
       @close="previewNodeId = null"
     >
@@ -115,7 +100,7 @@
         </VBtn>
       </template>
     </ResourceDrawer>
-  </VDialog>
+  </FullscreenModal>
 
 </template>
 
@@ -126,13 +111,15 @@
   import NodeTreeNavigation from './NodeTreeNavigation';
   import ResourceDrawer from './ResourceDrawer';
   import ContentNodeIcon from 'shared/views/ContentNodeIcon';
+  import FullscreenModal from 'shared/views/FullscreenModal';
 
   export default {
     name: 'AddRelatedResourcesModal',
     components: {
       ContentNodeIcon,
       NodeTreeNavigation,
       ResourceDrawer,
+      FullscreenModal,
     },
     props: {
       targetNodeId: {

contentcuration/contentcuration/frontend/channelEdit/components/edit/EditModal.vue

@@ -20,14 +20,12 @@
           app
         >
           <VBtn data-test="close" icon dark @click="handleClose">
-            <Icon>close</Icon>
+            <Icon>arrow_back</Icon>
           </VBtn>
           <VToolbarTitle>{{ modalTitle }}</VToolbarTitle>
           <VSpacer />
-          <VBtn v-if="canEdit" data-test="save" dark flat @click="handleClose">
-            {{ $tr('saveButtonText') }}
-          </VBtn>
-          <VBtn v-else data-test="copy" dark flat @click="copyContent">
+          <OfflineText indicator />
+          <VBtn v-if="!canEdit" data-test="copy" dark flat @click="copyContent">
             {{ $tr('copyButtonText', {
               count: nodes.length, size: formatFileSize(totalFileSize)}) }}
           </VBtn>
@@ -182,6 +180,7 @@
   import Uploader from 'shared/views/files/Uploader';
   import LoadingText from 'shared/views/LoadingText';
   import FormatPresets from 'shared/leUtils/FormatPresets';
+  import OfflineText from 'shared/views/OfflineText';
 
   export default {
     name: 'EditModal',
@@ -195,6 +194,7 @@
       FileUploadDefault,
       LoadingText,
       MessageDialog,
+      OfflineText,
     },
     mixins: [fileSizeMixin],
     props: {
@@ -283,7 +283,7 @@
             vm.loadContentNodes({ id__in: ids }),
             vm.loadFiles({ contentnode__in: ids }),
             ...ids.map(nodeId => vm.loadRelatedResources(nodeId)),
-            ...ids.map(nodeId => vm.loadNodeAssessmentItems(nodeId)),
+            vm.loadAssessmentItems({ contentnode__in: ids }),
           ])
             .then(() => {
               vm.loading = false;
@@ -313,7 +313,7 @@
         'createContentNode',
       ]),
       ...mapActions('file', ['loadFiles', 'createFile']),
-      ...mapActions('assessmentItem', ['loadNodeAssessmentItems']),
+      ...mapActions('assessmentItem', ['loadAssessmentItems']),
       ...mapActions('clipboard', ['copyAll']),
       ...mapMutations('contentNode', { enableValidation: 'ENABLE_VALIDATION_ON_NODES' }),
       closeModal() {
@@ -412,7 +412,6 @@
     $trs: {
       editingDetailsHeader: 'Editing Content Details',
       viewingDetailsHeader: 'Viewing Content Details',
-      saveButtonText: 'Finish',
       copyButtonText:
         '{count, plural,\n =1 {Copy to clipboard}\n other {Copy # items to clipboard}} ({size})',
       invalidNodesFound: '{count, plural,\n =1 {# error found}\n other {# errors found}}',