feat: Add Expand view of Applications Drawer - MEED-6995 - Meeds-io/M…

…IPs#139 (#103)

layout-webapp/src/main/resources/locale/portlet/LayoutEditor_en.properties

@@ -188,7 +188,6 @@ portlets.label.delete=Delete
 portlets.label.edit=Edit
 portlets.label.system.noDelete=Product Instances cannot be deleted
 portlets.label.category.system.noDelete=Product categories cannot be deleted
-portlets.label.preview=Preview of {0}
 portlets.label.openIllustrationPreview=Open illustration Preview
 
 layout.add=Add
@@ -298,5 +297,6 @@ portlets.administratorsMandatorySelectionTooltip=Admin has to access this app
 portlets.administrators=Administrators
 portlets.contentManagers=Content Managers
 portlets.spaceHost=Space Host
+portletInstance.label.preview=Preview of {0}
 
 layout.editPortletInstance=Edit portlet instance {0}

layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue

@@ -136,7 +136,7 @@ export default {
     this.$root.$on('layout-add-application', this.handleAddApplication);
     this.$root.$on('layout-edit-application', this.handleEditApplication);
     this.$root.$on('layout-delete-application', this.handleDeleteApplication);
-    this.$root.$on('layout-application-drawer-closed', this.resetCellsSelection);
+    this.$root.$on('layout-application-category-drawer-closed', this.resetCellsSelection);
     this.$root.$on('layout-section-history-add', this.addSectionVersion);
     this.$root.$on('layout-page-saved', this.handlePageSaved);
     this.$root.$on('layout-apply-grid-style', this.handleApplyGridStyle);

layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/ApplicationCard.vue

@@ -25,6 +25,10 @@
       :title="$t('layout.preview')"
       :elevation="hover && 2 || 0"
       :aria-label="$t('layout.preview')"
+      :height="height"
+      :max-height="height"
+      :width="width"
+      :max-width="width"
       class="border-color card-border-radius overflow-hidden position-relative"
       v-on="illustrationId && {
         click: () => preview()
@@ -39,22 +43,27 @@
         @click.stop="$emit('add')">
         <v-icon size="24" color="primary">fa-plus</v-icon>
       </v-btn>
-      <div class="d-flex flex-column full-width pa-5">
-        <div class="subtitle-1 text-truncate-2 text-color ApplicationCardTitle">
+      <div class="d-flex flex-column border-box-sizing full-height full-width pa-5">
+        <div
+          :title="name"
+          class="flex-grow-0 flex-shrink-0 subtitle-1 text-truncate-2 text-color ApplicationCardTitle">
           {{ name }}
         </div>
         <div
           v-if="description"
           v-sanitized-html="description"
-          class="subtitle-2 pt-0 pb-2 text-sub-title ApplicationCardDescription"></div>
-        <layout-image-illustration
-          ref="illustration"
-          :value="application"
-          :preview-action="illustrationAction"
-          object-type="portletInstance"
-          max-height="110"
-          max-width="100%"
-          no-hover />
+          :title="$utils.htmlToText(description)"
+          class="flex-grow-0 flex-shrink-0 subtitle-2 text-truncate-2 pt-0 text-sub-title ApplicationCardDescription"></div>
+        <div class="d-flex flex-grow-1 flex-shrink-1 justify-center mt-2 overflow-hidden">
+          <layout-image-illustration
+            ref="illustration"
+            :value="application"
+            :preview-action="illustrationAction"
+            :max-height="maxImageHeight"
+            :max-width="maxImageWidth"
+            object-type="portletInstance"
+            no-hover />
+        </div>
       </div>
     </v-card>
   </v-hover>
@@ -66,6 +75,22 @@ export default {
       type: Object,
       default: null,
     },
+    height: {
+      type: String,
+      default: () => 'auto',
+    },
+    maxImageHeight: {
+      type: String,
+      default: () => '100%',
+    },
+    width: {
+      type: String,
+      default: () => '100%',
+    },
+    maxImageWidth: {
+      type: String,
+      default: () => '100%',
+    },
   },
   data: () => ({
     defaultImageSrc: '/sites/images/application/DefaultPortlet.png',

layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/AddApplicationDrawer.vue

@@ -23,21 +23,29 @@
     ref="drawer"
     id="addApplicationDrawer"
     v-model="drawer"
+    allow-expand
     go-back-button
     right
+    @expand-updated="expanded = $event"
     @closed="$root.$emit('layout-application-drawer-closed')">
     <template slot="title">
-      {{ $t('layout.addApplicationFromCategoryTitle', {0: categoryName}) }}
+      <span class="text-truncate">{{ $t('layout.addApplicationFromCategoryTitle', {0: categoryName}) }}</span>
     </template>
     <template v-if="drawer" #content>
       <v-card
+        :class="expanded && 'flex-wrap' || 'flex-column'"
         max-width="100%"
-        class="d-flex flex-wrap ma-4 overflow-hidden"
+        class="d-flex justify-center ma-4 overflow-hidden"
         flat>
         <layout-editor-application-card
           v-for="application in sortedPortletInstances"
           :key="application.id"
           :application="application"
+          :width="expanded && '388px' || '100%'"
+          :height="expanded && '210px' || 'auto'"
+          :max-image-height="expanded && '100%' || '110px'"
+          max-image-width="100%"
+          :class="expanded && 'mx-2 content-box-sizing'"
           class="flex-grow-1 mb-4"
           @add="addApplication(application)" />
       </v-card>
@@ -48,6 +56,7 @@
 export default {
   data: () => ({
     drawer: false,
+    expanded: false,
     portletInstances: [],
     category: null,
   }),

layout-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/SelectApplicationCategoryDrawer.vue

@@ -25,7 +25,8 @@
     v-model="drawer"
     :loading="$root.loadingPortletInstances"
     allow-expand
-    right>
+    right
+    @closed="$root.$emit('layout-application-category-drawer-closed')">
     <template #title>
       {{ $t('layout.selectApplicationCategoryTitle') }}
     </template>