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

…ties - MEED-7094 - Meeds-io/MIPs#144 (#3916) 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 · 0e30492 · 0e30492
1 parent 82c0988
commit 0e30492
Show file tree

Hide file tree

Showing 52 changed files with 179 additions and 100 deletions.
diff --git a/webapp/portlet/src/main/webapp/WEB-INF/jsp/portlet/gettingStarted.jsp b/webapp/portlet/src/main/webapp/WEB-INF/jsp/portlet/gettingStarted.jsp
@@ -31,7 +31,7 @@
     <div data-app="true"
       class="v-application v-application--is-ltr theme--light" id="app">
       <div class="v-application--wrap">
-        <div class="flex hiddenable-widget d-flex xs12 sm12">
+        <div class="flex hiddenable-widget application-body d-flex xs12 sm12">
           <div class="layout row wrap mx-0">
             <div class="flex d-flex xs12">
               <div class="flex v-card v-card--flat v-sheet card-border-radius pa-5 theme--light">

diff --git a/webapp/portlet/src/main/webapp/WEB-INF/portlet.xml b/webapp/portlet/src/main/webapp/WEB-INF/portlet.xml
@@ -221,6 +221,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/spaceMenu.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>
@@ -270,6 +274,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/activityStream.jsp</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-background-color no-layout-border-radius no-layout-border</value>
+    </init-param>
     <supports>
       <mime-type>text/html</mime-type>
       <portlet-mode>view</portlet-mode>
@@ -292,6 +300,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/activityStream.jsp</value>
     </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-background-color no-layout-border-radius no-layout-border</value>
+    </init-param>
     <supports>
       <mime-type>text/html</mime-type>
       <portlet-mode>view</portlet-mode>
@@ -363,6 +375,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/hamburgerMenu.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>
@@ -428,6 +444,10 @@
       <name>preload.resource.rest</name>
       <value><![CDATA[/portal/rest/v1/social/identities/{userId}?expand=]]></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>
@@ -443,6 +463,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/topbarPreview.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>
@@ -460,6 +484,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/topbarLogin.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>
@@ -475,6 +503,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/topBarPublishSite.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>
@@ -558,6 +590,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/topbarNotification.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>
@@ -573,6 +609,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/topbarFavorites.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>
@@ -743,6 +783,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/search.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>
@@ -786,6 +830,10 @@
       <name>js-manager-jsModule</name>
       <value>SHARED/popover</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>
@@ -806,6 +854,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/topBarMenu.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>
@@ -879,6 +931,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/drawersOverlay.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>
@@ -916,6 +972,10 @@
       <name>portlet-view-dispatched-file-path</name>
       <value>/html/verticalMenu.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>
@@ -951,7 +1011,11 @@
     <init-param>
       <name>portlet-view-dispatched-file-path</name>
       <value>/WEB-INF/jsp/portlet/platformSettings.jsp</value>
-    </init-param>    
+    </init-param>
+    <init-param>
+      <name>layout-css-class</name>
+      <value>no-layout-style</value>
+    </init-param>
     <supports>
       <mime-type>text/html</mime-type>
     </supports>

diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceHeader/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceHeader/Style.less
@@ -46,4 +46,8 @@
     padding-bottom: 0 !important;
     margin-bottom: 0 !important;
   }
-}
+}
+
+#SpacePage #MenuChildren {
+  display: none;
+}
diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceSettings/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceSettings/Style.less
@@ -28,8 +28,6 @@
 }
 
 #SpaceSettings {
-  margin-bottom: 58px;
-
   .v-alert.error {
     position: absolute;
     top: 80px;

diff --git a/...p/portlet/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactionsApp.vue b/...p/portlet/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactionsApp.vue
@@ -1,11 +1,11 @@
 <template>
-  <v-app>
+  <div>
     <activity-reactions
       :activity-id="activityId"
       :likers="likers"
       :likers-number="likersNumber"
       :comment-number="commentNumber" />
-  </v-app>
+  </div>
 </template>
 <script>
 export default {

diff --git a/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/ActivityStream.vue b/webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/ActivityStream.vue
@@ -1,20 +1,22 @@
 <template>
-  <v-app v-if="loaded" role="main">
-    <activity-stream-toolbar
-      v-if="canPostInitialized"
-      :can-post="canPost"
-      :can-filter="canFilter"
-      :filter="filter"
-      :has-activities="hasActivities" />
-    <activity-stream-list
-      :activity-id="activityId"
-      :activity-types="activityTypes"
-      :activity-actions="activityActions"
-      :comment-types="commentTypes"
-      :comment-actions="commentActions"
-      @has-activities="hasActivities = $event"
-      @activity-select="displayActivityDetail"
-      @can-post-loaded="canPostLoaded($event)" />
+  <v-app v-if="loaded">
+    <v-main class="application-body">
+      <activity-stream-toolbar
+        v-if="canPostInitialized"
+        :can-post="canPost"
+        :can-filter="canFilter"
+        :filter="filter"
+        :has-activities="hasActivities" />
+      <activity-stream-list
+        :activity-id="activityId"
+        :activity-types="activityTypes"
+        :activity-actions="activityActions"
+        :comment-types="commentTypes"
+        :comment-actions="commentActions"
+        @has-activities="hasActivities = $event"
+        @activity-select="displayActivityDetail"
+        @can-post-loaded="canPostLoaded($event)" />
+    </v-main>
     <extension-registry-components
       :params="drawerParams"
       name="ActivityStream"

diff --git a/...t/src/main/webapp/vue-apps/activity-stream/components/activity/ActivityStreamActivity.vue b/...t/src/main/webapp/vue-apps/activity-stream/components/activity/ActivityStreamActivity.vue
@@ -3,7 +3,7 @@
     :id="id"
     :unread-metadata="unreadMetadata"
     :space-id="spaceId"
-    class="white card-border-radius activity-detail flex flex-column"
+    class="application-background-color application-border application-border-radius activity-detail flex flex-column"
     @read="markAsRead">
     <div v-if="displayLoading" class="d-flex">
       <v-progress-circular

diff --git a/...let/src/main/webapp/vue-apps/activity-stream/components/activity/ActivityStreamLoader.vue b/...let/src/main/webapp/vue-apps/activity-stream/components/activity/ActivityStreamLoader.vue
@@ -2,7 +2,7 @@
   <div
     v-if="activityLoading"
     :key="activity.id"
-    class="white border-radius activity-detail flex d-flex flex-column mb-5 contentBox">
+    class="application-background-color application-border application-border-radius activity-detail flex d-flex flex-column mb-5 contentBox">
     <v-progress-circular
       color="primary"
       size="32"

diff --git a/...main/webapp/vue-apps/activity-stream/components/activity/content/ActivityEmbeddedHTML.vue b/...main/webapp/vue-apps/activity-stream/components/activity/content/ActivityEmbeddedHTML.vue
@@ -2,7 +2,7 @@
   <div
     v-if="embeddedHTML"
     :style="parentStyle"
-    class="d-flex flex-column flex activity-embedded-box mt-3 mx-auto card-border-radius overflow-hidden light-grey-background-color hover-elevation mb-4">
+    class="d-flex flex-column flex activity-embedded-box mt-3 mx-auto border-radius overflow-hidden light-grey-background-color hover-elevation mb-4">
     <div
       v-if="elementReady"
       v-html="embeddedHTML"

diff --git a/...let/src/main/webapp/vue-apps/activity-stream/components/activity/content/ActivityLink.vue b/...let/src/main/webapp/vue-apps/activity-stream/components/activity/content/ActivityLink.vue
@@ -29,7 +29,7 @@
             class="my-auto"
             loading="lazy"
             width="auto"
-            height="auto" >
+            height="auto">
           <v-icon
             v-else
             :size="defaultIconSize"
@@ -305,7 +305,7 @@ export default {
       return !!this.activityTypeExtension?.addMargin;
     },
     mainClass() {
-      return `${!this.useEmbeddedLinkView && 'd-flex flex-no-wrap' || 'activity-thumbnail-box light-grey-background-color overflow-hidden hover-elevation card-border-radius border-color mb-4 d-block d-sm-flex flex-sm-nowrap'} ${this.addMargin && 'my-4' || ''}`;
+      return `${!this.useEmbeddedLinkView && 'd-flex flex-no-wrap' || 'activity-thumbnail-box light-grey-background-color overflow-hidden hover-elevation border-radius border-color mb-4 d-block d-sm-flex flex-sm-nowrap'} ${this.addMargin && 'my-4' || ''}`;
     },
     imageMobileStyle() {
       return {

diff --git a/.../src/main/webapp/vue-apps/activity-stream/components/activity/list/ActivityStreamList.vue b/.../src/main/webapp/vue-apps/activity-stream/components/activity/list/ActivityStreamList.vue
@@ -26,7 +26,7 @@
     </template>
     <div
       v-else-if="loading"
-      class="white border-radius activity-detail flex d-flex flex-column mb-5 contentBox">
+      class="application-background-color application-border application-border-radius activity-detail flex d-flex flex-column mb-5 contentBox">
       <v-progress-circular
         color="primary"
         size="32"
@@ -46,7 +46,7 @@
       :loading="loading"
       :disabled="loading"
       block
-      class="btn pa-0"
+      class="btn pa-0 application-background-color application-border application-border-radius"
       @click="loadMore">
       {{ $t('Search.button.loadMore') }}
     </v-btn>

diff --git a/...app/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageFilter.vue b/...app/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageFilter.vue
@@ -15,7 +15,7 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div class="d-flex flex-column white card-border-radius">
+  <div class="d-flex flex-column application-background-color application-border application-border-radius">
     <v-flex class="d-flex my-auto border-box-sizing">
       <div class="d-flex flex-column ma-auto py-10 text-center text-sub-title">
         <v-icon

diff --git a/...bapp/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageSpace.vue b/...bapp/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageSpace.vue
@@ -15,7 +15,7 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div class="d-flex flex-column white card-border-radius">
+  <div class="d-flex flex-column application-background-color application-border application-border-radius">
     <img
       :height="height"
       :style="{maxHeight: height}"

diff --git a/...ebapp/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageUser.vue b/...ebapp/vue-apps/activity-stream/components/empty-stream/ActivityStreamEmptyMessageUser.vue
@@ -15,7 +15,7 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div class="d-flex flex-column white card-border-radius">
+  <div class="d-flex flex-column application-background-color application-border application-border-radius">
     <div class="mx-4 my-4">
       <p v-sanitized-html="welcomeTitle"></p>
       <v-card

diff --git a/...bapp/vue-apps/activity-stream/components/pinned-activity/ActivityStreamPinnedActivity.vue b/...bapp/vue-apps/activity-stream/components/pinned-activity/ActivityStreamPinnedActivity.vue
@@ -15,7 +15,7 @@
   Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <div class="pinnedActivity card-border-radius">
+  <div class="pinnedActivity application-background-color application-border application-border-radius">
     <div
       class="my-auto flex-grow-1 py-2 ps-4 pe-1">
       <v-icon

diff --git a/...let/src/main/webapp/vue-apps/activity-stream/components/toolbar/ActivityStreamToolbar.vue b/...let/src/main/webapp/vue-apps/activity-stream/components/toolbar/ActivityStreamToolbar.vue
@@ -19,8 +19,7 @@
     <v-toolbar
       v-if="displayToolbar"
       id="activityComposer"
-      class="activityComposer activityComposerApp pa-0 card-border-radius"
-      color="white mb-5"
+      class="activityComposer activityComposerApp pa-0 application-background-color application-border application-border-radius mb-5"
       height="auto"
       flat
       dense>

diff --git a/...pp/portlet/src/main/webapp/vue-apps/application-toolbar/components/ApplicationToolbar.vue b/...pp/portlet/src/main/webapp/vue-apps/application-toolbar/components/ApplicationToolbar.vue
@@ -20,7 +20,7 @@
 
 -->
 <template>
-  <v-toolbar class="z-index-one app-background-color" flat>
+  <v-toolbar class="z-index-one" flat>
     <div id="applicationToolbar" class="d-flex flex-grow-1 align-center content-box-sizing position-relative">
       <!-- Left Content -->
       <div

diff --git a/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue b/webapp/portlet/src/main/webapp/vue-apps/breadcrumb/components/Breadcrumb.vue
@@ -3,7 +3,7 @@
     <div
       v-if="breadcrumbToDisplay.length"
       id="breadcrumbParent"
-      class="white px-2 py-2 card-border-radius d-flex">
+      class="px-2 py-2 application-body d-flex">
       <div
         v-for="(breadcrumb, index) in breadcrumbToDisplay"
         :key="index"

diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/components/Widget.vue b/webapp/portlet/src/main/webapp/vue-apps/common/components/Widget.vue
@@ -19,7 +19,7 @@
     :class="extraClass"
     :height="height"
     :min-width="minWidth"
-    class="d-flex flex-column card-border-radius app-background-color"
+    class="d-flex flex-column"
     flat>
     <div class="d-flex flex-column flex-grow-1 pa-5">
       <div