feat: Redefine Parent applications Classes to fit layout style proper…

…ties - MEED-7094 - Meeds-io/MIPs#144 This change will apply **application-background** class to the main body of applications to make sure to apply layout specific CSS styles, such as disabling default Vuetify White Background applied on v-card. At the same time, for Top Toolbar applications, this will disable branding styling to avoid having border radius and other styles applied on small buttons added in Top bar as applications.
Meeds-io · Jun 20, 2024 · 514df33 · 514df33
1 parent d268951
commit 514df33
Show file tree

Hide file tree

Showing 15 changed files with 54 additions and 37 deletions.
diff --git a/layout-webapp/src/main/webapp/WEB-INF/portlet.xml b/layout-webapp/src/main/webapp/WEB-INF/portlet.xml
@@ -29,6 +29,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/siteNavigation.jsp</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-style</value>
+    </init-param>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>
@@ -67,6 +71,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/layoutEditor.jsp</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-style</value>
+    </init-param>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>
@@ -86,6 +94,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/portletEditor.html</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-style</value>
+    </init-param>
     <expiration-cache>-1</expiration-cache>
     <cache-scope>PUBLIC</cache-scope>
     <supports>
@@ -128,6 +140,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/portlets.html</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-style</value>
+    </init-param>
     <expiration-cache>-1</expiration-cache>
     <cache-scope>PUBLIC</cache-scope>
     <supports>

diff --git a/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js b/layout-webapp/src/main/webapp/vue-app/common/js/ApplicationUtils.js
@@ -30,13 +30,14 @@ export function getStyle(container, options) {
       style[options.isApplicationStyle && '--appHeight' || 'height'] = hasUnit(container.height) ? container.height : `${container.height}px`;
       if (options.isApplicationScroll) {
         style['--appHeightScroll'] = 'auto';
+        style['--appWidthScroll'] = 'hidden';
       }
     }
 
     if (container.width === 'fullWindow') {
       style['--allPagesSinglePageApplicationWidth'] = 'calc(100% - 40px)';
       style['--allPagesSinglePageApplicationPadding'] = '0';
-      style['--allPagesSinglePageApplicationMargin'] = '0 20px';
+      style['--allPagesSinglePageApplicationMargin'] = '20px';
     } else if (container.width) {
       style[options.isApplicationStyle && '--appWidth' || 'width'] = hasUnit(container.width) ? container.width : `${container.width}px`;
       if (options.isApplicationScroll) {

diff --git a/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue b/layout-webapp/src/main/webapp/vue-app/layout-editor/components/content/Content.vue
@@ -26,7 +26,7 @@
     flat>
     <layout-editor-container-extension
       :container="pageLayout"
-      class="layout-page-body" />
+      class="layout-page-body no-border-radius" />
     <layout-editor-section-add-drawer
       ref="sectionAddDrawer" />
     <layout-editor-section-edit-drawer

diff --git a/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionMenu.vue b/...ut-webapp/src/main/webapp/vue-app/layout-editor/components/content/common/SectionMenu.vue
@@ -33,11 +33,12 @@
                 v-bind="attrs">
                 <v-hover v-model="hoverButton">
                   <v-btn
+                    class="white text-color border-color"
                     height="32"
                     width="32"
                     icon
                     @click="$root.$emit('layout-add-section-drawer', index)">
-                    <v-icon size="24">fa-plus</v-icon>
+                    <v-icon size="20">fa-plus</v-icon>
                   </v-btn>
                 </v-hover>
               </div>
@@ -57,15 +58,15 @@
                   v-bind="attrs">
                   <v-hover v-model="hoverButton">
                     <v-btn
+                      class="white text-color border-color draggable"
                       height="32"
                       width="32"
-                      class="draggable"
                       icon
                       @mousedown="$emit('move-start')"
                       @mouseup="$emit('move-end')"
                       @mouseout="$emit('move-end')"
                       @focusout="$emit('move-end')">
-                      <v-icon size="24">fa-arrows-alt</v-icon>
+                      <v-icon size="20">fa-arrows-alt</v-icon>
                     </v-btn>
                   </v-hover>
                 </div>
@@ -83,11 +84,12 @@
                   v-bind="attrs">
                   <v-hover v-model="hoverButton">
                     <v-btn
+                      class="white text-color border-color"
                       height="32"
                       width="32"
                       icon
                       @click="$root.$emit('layout-edit-section-drawer', index, length)">
-                      <v-icon size="24">fa-edit</v-icon>
+                      <v-icon size="20">fa-edit</v-icon>
                     </v-btn>
                   </v-hover>
                 </div>
@@ -104,11 +106,12 @@
                 v-bind="attrs">
                 <v-hover v-model="hoverButton">
                   <v-btn
+                    class="white text-color border-color"
                     height="32"
                     width="32"
                     icon
                     @click="$root.$emit('layout-add-section-drawer', index + 1)">
-                    <v-icon size="24">fa-plus</v-icon>
+                    <v-icon size="20">fa-plus</v-icon>
                   </v-btn>
                 </v-hover>
               </div>

diff --git a/...-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditApplicationDrawer.vue b/...-webapp/src/main/webapp/vue-app/layout-editor/components/drawer/EditApplicationDrawer.vue
@@ -430,7 +430,7 @@ export default {
       } else {
         this.boxShadow = null;
         this.borderColor = null;
-        this.borderSize = 1;
+        this.borderSize = 0;
       }
     },
     enableBorderRadius(val) {

diff --git a/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/PageContainer.vue b/layout-webapp/src/main/webapp/vue-app/page-layout/components/container/PageContainer.vue
@@ -21,7 +21,7 @@
 <template>
   <page-layout-container-extension
     :container="container"
-    class="layout-page-body" />
+    class="layout-page-body no-border-radius" />
 </template>
 <script>
 export default {

diff --git a/layout-webapp/src/main/webapp/vue-app/page-template/components/PageTemplatesManagement.vue b/layout-webapp/src/main/webapp/vue-app/page-template/components/PageTemplatesManagement.vue
@@ -20,7 +20,7 @@
 -->
 <template>
   <v-app>
-    <v-card class="card-border-radius app-background-color overflow-hidden position-static pb-5" flat>
+    <v-card class="application-body position-static pb-5" flat>
       <h4 class="title font-weight-bold px-5 pt-5 ma-0">
         {{ $t('pageTemplates.title') }}
       </h4>

diff --git a/layout-webapp/src/main/webapp/vue-app/portlet-editor/components/content/Application.vue b/layout-webapp/src/main/webapp/vue-app/portlet-editor/components/content/Application.vue
@@ -23,7 +23,7 @@
     ref="content"
     :id="id"
     :style="cssStyle"
-    :class="$root.portletMode === 'view' && 'light-grey-background-color pa-5 ma-n5' || 'white pa-5 border-box-sizing card-border-radius'"
+    :class="$root.portletMode === 'view' && 'light-grey-background-color pa-5 ma-n5' || 'pa-5 border-box-sizing application-body'"
     class="layout-application no-applications-spacing full-width"></div>
 </template>
 <script>

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/PortletsManagement.vue
@@ -20,23 +20,23 @@
 -->
 <template>
   <v-app>
-    <v-card
-      :class="tabName === 'portlets' && 'card-border-radius app-background-color overflow-hidden' || 'transparent'"
-      class="position-static pb-5"
-      flat>
-      <portlets-toolbar
-        ref="toolbar"
-        :tab-name="tabName"
-        class="card-border-radius app-background-color overflow-hidden"
-        @portlet-instance-filter="keyword = $event"
-        @select-tab="selectTab" />
-      <portlets-instance-main
-        v-if="tabName === 'instances'"
-        :keyword="keyword" />
-      <portlets-list
-        v-else-if="tabName === 'portlets'"
-        :keyword="keyword" />
-    </v-card>
+    <main
+      class="application-body position-static">
+      <div :class="tabName !== 'instances' && 'application-layout-style'">
+        <portlets-toolbar
+          ref="toolbar"
+          :tab-name="tabName"
+          :class="tabName === 'instances' && 'application-layout-style'"
+          @portlet-instance-filter="keyword = $event"
+          @select-tab="selectTab" />
+        <portlets-instance-main
+          v-if="tabName === 'instances'"
+          :keyword="keyword" />
+        <portlets-list
+          v-else-if="tabName === 'portlets'"
+          :keyword="keyword" />
+      </div>
+    </main>
     <portlets-item-instances-drawer />
     <portlets-instance-category-drawer />
     <portlets-instance-drawer />

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/Categories.vue
@@ -22,7 +22,7 @@
   <v-list
     :loading="loading"
     :role="null"
-    class="app-background-color"
+    class="application-layout-style"
     min-width="225"
     nav
     dense>

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/instances/List.vue
@@ -19,7 +19,7 @@
 
 -->
 <template>
-  <div>
+  <div class="application-layout-style">
     <v-data-table
       :headers="headers"
       :items="filteredPortletInstances"
@@ -30,7 +30,7 @@
       must-sort
       disable-pagination
       hide-default-footer
-      class="card-border-radius app-background-color overflow-hidden portletInstancesTable px-5">
+      class="application-body portletInstancesTable px-5">
       <template slot="item" slot-scope="props">
         <portlets-instance-item
           :key="props.item.id"

diff --git a/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue b/layout-webapp/src/main/webapp/vue-app/portlets/components/portlets/List.vue
@@ -19,7 +19,7 @@
 
 -->
 <template>
-  <div>
+  <div class="application-layout-style">
     <v-data-table
       :headers="headers"
       :items="filteredPortlets"
@@ -30,7 +30,7 @@
       must-sort
       disable-pagination
       hide-default-footer
-      class="card-border-radius overflow-hidden portletsTable px-5">
+      class="application-body portletsTable px-5">
       <template slot="item" slot-scope="props">
         <portlets-item
           :key="props.item.id"

diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteCard.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteCard.vue
@@ -24,7 +24,6 @@
     hover
     @click="openSiteNavigationDrawer">
     <v-toolbar
-      color="white"
       flat
       dense
       class="mt-2">
@@ -38,7 +37,6 @@
     </div>
     <v-footer absolute class="px-0 py-0">
       <v-toolbar
-        color="white"
         flat
         dense>
         <v-icon

diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteManagement.vue
@@ -18,7 +18,7 @@
 -->
 <template>
   <v-app class="siteManagementApplication">
-    <v-main class="pa-5 card-border-radius app-background-color">
+    <v-main class="pa-5 application-body">
       <site-management-toolbar />
       <site-management-sites-list :sites="sites" />
     </v-main>

diff --git a/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteToolbar.vue b/layout-webapp/src/main/webapp/vue-app/site-management/components/SiteToolbar.vue
@@ -18,7 +18,6 @@
 -->
 <template>
   <v-toolbar
-    color="white"
     flat
     dense>
     <v-btn class="primary" @click="$root.$emit('open-site-properties-drawer')">