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

…ties - MEED-7094 - Meeds-io/MIPs#144 (#531) This change will apply **application-body** 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 · Jul 4, 2024 · cb0805b · cb0805b
1 parent d011fd0
commit cb0805b
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 36 deletions.
diff --git a/wallet-webapps/src/main/webapp/WEB-INF/jsp/wallet.jsp b/wallet-webapps/src/main/webapp/WEB-INF/jsp/wallet.jsp
@@ -1,19 +1,3 @@
-<!--
-This file is part of the Meeds project (https://meeds.io/).
-Copyright (C) 2020 Meeds Association
-contact@meeds.io
-This program is free software; you can redistribute it and/or
-modify it under the terms of the GNU Lesser General Public
-License as published by the Free Software Foundation; either
-version 3 of the License, or (at your option) any later version.
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
-Lesser General Public License for more details.
-You should have received a copy of the GNU Lesser General Public License
-along with this program; if not, write to the Free Software Foundation,
-Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
--->
 <%@ page import="jakarta.servlet.http.HttpServletRequest" %>
 <%@ page import="jakarta.servlet.http.HttpSession" %>
 <%@ page import="org.exoplatform.webui.application.WebuiRequestContext" %>

diff --git a/wallet-webapps/src/main/webapp/vue-app/connectorEventExtensions/components/WalletEvent.vue b/wallet-webapps/src/main/webapp/vue-app/connectorEventExtensions/components/WalletEvent.vue
@@ -17,7 +17,7 @@
  Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 -->
 <template>
-  <v-app v-if="!isEditing">
+  <div v-if="!isEditing">
     <div class="subtitle-1 font-weight-bold mb-2">
       {{ $t('gamification.event.display.goThere') }}
     </div>
@@ -29,7 +29,7 @@
         {{ $t('gamification.event.display.yourWallet') }}
       </v-btn>
     </div>
-  </v-app>
+  </div>
 </template>
 <script>
 export default {

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-admin/components/WalletAdminApp.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-admin/components/WalletAdminApp.vue
@@ -21,7 +21,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     class="VuetifyApp"
     flat>
     <v-main>
-      <v-flex class="text-center application-border-radius app-background-color pa-5" flat>
+      <v-flex class="text-center application-body pa-5" flat>
         <div v-if="error && !loading" class="alert alert-error v-content">
           <i class="uiIconError"></i>{{ error }}
         </div>

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-app/components/WalletApp.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-app/components/WalletApp.vue
@@ -20,17 +20,19 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     color="transaprent"
     class="VuetifyApp"
     flat>
-    <main v-if="isWalletEnabled" id="walletEnabledContent">
+    <main
+      v-if="isWalletEnabled"
+      id="walletEnabledContent"
+      class="application-body">
       <v-layout>
         <v-flex>
-          <v-app class="application-toolbar">
+          <div class="application-toolbar">
             <v-tabs
               v-model="tab"
-              slider-size="4"
-              class="card-border-radius overflow-hidden">
+              slider-size="4">
               <v-tab>{{ tabName }}</v-tab>
             </v-tabs>
-            <v-tabs-items v-model="tab" class="tabs-content card-border-radius overflow-hidden">
+            <v-tabs-items v-model="tab" class="tabs-content">
               <v-tab-item eager>
                 <v-flex>
                   <v-layout
@@ -85,7 +87,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
                 </v-flex>
               </v-tab-item>
             </v-tabs-items>
-          </v-app>
+          </div>
         </v-flex>
       </v-layout>
       <!-- The selected account detail -->

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-common/components/WalletPasswordManagement.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-common/components/WalletPasswordManagement.vue
@@ -18,7 +18,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
   <v-app>
     <template v-if="displayed">
       <v-card
-        class="walletManagePassword app-background-color"
+        class="walletManagePassword application-body"
         flat>
         <v-card-title class="px-0">
           <div class="d-flex flex-row border-box-sizing">

diff --git a/...bapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverview.vue b/...bapps/src/main/webapp/vue-app/wallet-common/wallet-overview/components/WalletOverview.vue
@@ -20,7 +20,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       v-if="!isOverviewDisplay"
       height="48"
       flat
-      class="border-box-sizing app-background-color py-3">
+      class="border-box-sizing application-body py-3">
       <div class="text-header-title text-sub-title text-no-wrap">
         {{ title || '' }}
       </div>
@@ -36,7 +36,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     </v-toolbar>
     <div
       :class="clickable && 'clickable' || ''"
-      class="walletOverviewCard app-background-color"
+      class="walletOverviewCard application-body"
       flat
       @click="clickable && openDrawer()">
       <div

diff --git a/...bapps/src/main/webapp/vue-app/wallet-common/wallet-settings/components/WalletSettings.vue b/...bapps/src/main/webapp/vue-app/wallet-common/wallet-settings/components/WalletSettings.vue
@@ -1,16 +1,17 @@
 <template>
-  <v-app class="card-border-radius app-background-color overflow-hidden">
+  <v-app>
     <wallet-settings-details
       v-if="displayDetails"
       :wallet-settings="walletSettings"
       :is-space="isSpace"
       :title="detailsTitle"
       :description="detailsDescription"
       :message-digital-key="detailsmessageDigitalKey"
+      class="application-body"
       @back="closeDetail" />
     <v-card
       v-else-if="displayed"
-      class="card-border-radius app-background-color"
+      class="application-body"
       flat>
       <v-list>
         <v-list-item>

diff --git a/...rc/main/webapp/vue-app/wallet-common/wallet-settings/components/WalletSettingsDetails.vue b/...rc/main/webapp/vue-app/wallet-common/wallet-settings/components/WalletSettingsDetails.vue
@@ -1,7 +1,7 @@
 <template>
   <v-card
     v-if="displayed"
-    class="walletSetting card-border-radius"
+    class="walletSetting"
     flat>
     <template v-if="!hideContent">
       <v-card-title class="px-0 pt-2">

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/RewardApp.vue
@@ -20,9 +20,9 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
     color="transaprent"
     class="VuetifyApp"
     flat>
-    <main>
+    <main class="application-body">
       <v-layout column>
-        <v-layout column class="application-toolbar app-background-color">
+        <v-layout column class="application-toolbar">
           <v-flex v-if="error && !loading" class="text-center">
             <div class="alert alert-error text-start">
               <i class="uiIconError"></i>{{ error }}
@@ -72,7 +72,6 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
 
           <v-tabs
             v-model="selectedTab"
-            class="card-border-radius overflow-hidden"
             slider-size="4">
             <v-tab key="SendRewards" href="#SendRewards">
               {{ $t('exoplatform.wallet.title.sendRewardsTab') }}
@@ -85,7 +84,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
             </v-tab>
           </v-tabs>
 
-          <v-tabs-items v-model="selectedTab" class="tabs-content card-border-radius app-background-color overflow-hidden">
+          <v-tabs-items v-model="selectedTab" class="tabs-content">
             <v-tab-item
               id="SendRewards"
               value="SendRewards"

diff --git a/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/SendRewardsTab.vue b/wallet-webapps/src/main/webapp/vue-app/wallet-reward/components/reward/SendRewardsTab.vue
@@ -123,7 +123,7 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
       :items-per-page="1000"
       :loading="loading"
       item-key="identityId"
-      class="elevation-1 me-3 mb-2"
+      class="elevation-1 mb-2 content-box-sizing"
       hide-default-footer
       sortable>
       <template slot="item" slot-scope="props">