feat: Apply Generic UI to existing portlet (Social) - MEED-2573-Meeds…

…-io/MIPs#81 (#3022) This PR allows to add new reusable component to define a unique ui/ux for all the widget the platform
Meeds-io · Oct 11, 2023 · 9d0b156 · 9d0b156
1 parent 67eada1
commit 9d0b156
Show file tree

Hide file tree

Showing 29 changed files with 258 additions and 245 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
@@ -32,25 +32,25 @@
         <div class="flex hiddenable-widget 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 theme--light">
+              <div class="flex v-card v-card--flat v-sheet pa-5 theme--light">
                 <div
-                  class="v-card__title getting-started-title subtitle-1 text-uppercase pb-0">
-                  <span class="title">
+                  class="pb-5">
+                  <span class="widget-text-header">
                     <%=title%>
                     <% if (canClose) { %>
                       <a title="Close" href="#" rel="tooltip" data-placement="bottom" class="btClose">x</a>
                     <% } %>
                   </span>
                 </div>
                 <div role="list"
-                  class="v-list getting-started-list v-sheet theme--light v-list--dense">
+                  class="v-list getting-started-list py-0 v-sheet theme--light v-list--dense">
                   <% 
                   for (int i = 0; i < steps.size(); i++) {
                     GettingStartedStep step = steps.get(i);
                     String stepTitle = bundle.getString("locale.portlet.gettingStarted.step." + step.getName());
                     if (step.getStatus() != null && step.getStatus().booleanValue()) { %>
                     <div tabindex="-1" role="listitem"
-                      class="getting-started-list-item v-list-item theme--light">
+                      class="getting-started-list-item v-list-item theme--light px-0">
                       <div class="v-list-item__icon me-3 steps-icon">
                         <i class="UICheckIcon white--text"></i>
                       </div>
@@ -62,7 +62,7 @@
                     </div>
                   <% } else { %>
                     <div tabindex="-1" role="listitem"
-                      class="getting-started-list-item v-list-item theme--light">
+                      class="getting-started-list-item v-list-item theme--light px-0">
                       <div class="v-list-item__icon me-3 steps-icon">
                         <span
                           class="step-number font-weight-bold text-center white--text"><span><%=i + 1%></span></span>
@@ -84,4 +84,4 @@
     </div>
   </div>
 </div>
-<% } %>
+<% } %>
diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/GettingStarted/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/GettingStarted/Style.less
@@ -69,8 +69,8 @@
                     width: 1px;
                     height: 20px;
                     background:  @greyColorLighten1;
-                    left: 25px ~'; /** orientation=lt */ ';
-                    right: 25px ~'; /** orientation=rt */ ';
+                    left: 10px ~'; /** orientation=lt */ ';
+                    right: 10px ~'; /** orientation=rt */ ';
                     top: 28px;
                 }
             }

diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceInfos/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/SpaceInfos/Style.less
@@ -22,12 +22,7 @@
 @import "../../mixins.less";
 
 #spaceInfosApp {
-  padding: 8px 15px 8px 11px;
-  background-color: white!important;
-  border-color: white;
-
   #spaceDescription {
-    padding-left: 0;
     overflow-wrap: break-word;
   }
   h5 {

diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/SuggestionsPeopleAndSpace/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/SuggestionsPeopleAndSpace/Style.less
@@ -25,8 +25,6 @@
     margin-bottom: 0px !important;
 
     .suggestions-wrapper {
-        border-radius: 0px !important;
-
         .suggestions-title {
                 color: @greyColorLighten1;
             }
@@ -59,9 +57,5 @@
              opacity: 0;
            }
         }
-        .people-list {
-            border-bottom: 1px solid @greyColorLighten1Opacity1;
-            border-radius: 0;
-        }
     }
 }
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
@@ -0,0 +1,87 @@
+<!--
+  This file is part of the Meeds project (https://meeds.io/).
+  Copyright (C) 2023 Meeds Association [email protected]
+  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.
+-->
+<template>
+  <v-card
+    :class="extraClass"
+    class="white d-flex flex-column pa-5"
+    flat>
+    <div 
+      v-if="hasHeader"
+      :class="headerPadding" 
+      class="d-flex align-center">
+      <slot v-if="$slots.title" name="title"></slot>
+      <div v-else-if="title" class="widget-text-header text-truncate">{{ title }}</div> 
+      <v-spacer />
+      <slot v-if="$slots.action" name="action"></slot>
+      <v-btn 
+        v-else-if="actionUrl" 
+        class="flex-shrink-0" 
+        :href="actionUrl"
+        :target="externalLink && '_blank' || '_self'"> 
+        {{ $t('overview.myContributions.seeAll') }}
+      </v-btn>
+    </div>
+    <div v-if="$slots.subtitle" class="pb-4">
+      <slot name="subtitle"></slot>
+    </div>
+    <div v-else-if="subtitle" class="pb-4">{{ subtitle }}</div>
+    <div class="d-flex flex-column flex-grow-1">
+      <slot v-if="$slots.default"></slot>
+    </div>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: () => '',
+    },
+    subtitle: {
+      type: String,
+      default: () => '',
+    },
+    actionUrl: {
+      type: String,
+      default: () => '',
+    },
+    extraClass: {
+      type: String,
+      default: () => '',
+    },
+    externalLink: {
+      type: Boolean,
+      default: () => false
+    }
+  },
+  computed: {
+    hasHeader() {
+      return this.$slots.title || this.title || this.$slots.actions || this.actionUrl;
+    },
+    headerPadding() {
+      if (!this.$slots.default) {
+        if (this.subtitle || this.$slots.subtitle) {
+          return 'mb-4';
+        } else {
+          return '';
+        }
+      } else {
+        return 'mb-5';
+      }
+    }
+  }
+};
+</script>
diff --git a/webapp/portlet/src/main/webapp/vue-apps/common/initComponents.js b/webapp/portlet/src/main/webapp/vue-apps/common/initComponents.js
@@ -25,6 +25,7 @@ import UnreadBadge from './components/UnreadBadge.vue';
 import Notifications from './components/Notifications.vue';
 import RippleHoverButton from './components/RippleHoverButton.vue';
 import AttachmentsDraggableZone from './components/AttachmentsDraggableZone.vue';
+import WidgetWrapper from './components/Widget.vue';
 
 const components = {
   'card-carousel': CardCarousel,
@@ -60,6 +61,7 @@ const components = {
   'alert-notifications': Notifications,
   'ripple-hover-button': RippleHoverButton,
   'attachments-draggable-zone': AttachmentsDraggableZone,
+  'widget-wrapper': WidgetWrapper,
 };
 
 for (const key in components) {

diff --git a/...pp/portlet/src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpaceItem.vue b/...pp/portlet/src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpaceItem.vue
@@ -2,7 +2,7 @@
   <v-list-item :href="url" class="pa-1 pb-1">
     <v-list-item-avatar
       :href="url"
-      class="my-0 ps-4"
+      class="my-0"
       tile>
       <v-avatar :size="avatarSize" tile>
         <v-img

diff --git a/...p/portlet/src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpacesList.vue b/...p/portlet/src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpacesList.vue
@@ -1,40 +1,17 @@
 <template>
-  <div>
-    <v-app v-if="isShown">
-      <v-flex
-        d-flex
-        xs12
-        sm12>
-        <v-layout
-          row
-          wrap
-          mx-0>
-          <v-flex
-            d-flex
-            xs12>
-            <v-card
-              flat
-              class="flex">
-              <v-card-title class="external-spaces-list-title subtitle-1 text-uppercase pb-2">
-                <span class="body-1 text-sub-title">
-                  {{ $t('externalSpacesList.title.yourSpaces') }}
-                </span>
-              </v-card-title>
-              <v-list dense>
-                <template>
-                  <external-space-item
-                    v-for="space in spacesList"
-                    :key="space.id"
-                    :space="space" />
-                  <external-spaces-requests-items @invitationReplied="refreshSpaces" />
-                </template>
-              </v-list>
-            </v-card>
-          </v-flex>
-        </v-layout>
-      </v-flex>
-    </v-app>
-  </div>
+  <v-app v-if="isShown">
+    <widget-wrapper :title="$t('externalSpacesList.title.yourSpaces')">
+      <v-list dense class="py-0">
+        <template>
+          <external-space-item
+            v-for="space in spacesList"
+            :key="space.id"
+            :space="space" />
+          <external-spaces-requests-items @invitationReplied="refreshSpaces" />
+        </template>
+      </v-list>
+    </widget-wrapper>
+  </v-app>
 </template>
 <script>
 import * as externalSpacesListService from '../externalSpacesListService.js';

diff --git a/.../src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpacesRequestsItems.vue b/.../src/main/webapp/vue-apps/external-spaces-list/components/ExternalSpacesRequestsItems.vue
@@ -7,7 +7,7 @@
     mx-0>
     <v-flex
       xs12>
-      <v-list>
+      <v-list v-if="spacesRequests?.length">
         <template v-for="item in spacesRequests">
           <v-list-item
             :key="item.id"

diff --git a/...c/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue b/...c/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue
@@ -6,7 +6,7 @@
       @back="closeDetail" />
     <v-card
       v-else
-      class="my-3 border-radius"
+      class="my-3"
       flat>
       <v-list @click="openNotificationSettingDetail">
         <v-list-item>

diff --git a/webapp/portlet/src/main/webapp/vue-apps/people-list/components/PeopleList.vue b/webapp/portlet/src/main/webapp/vue-apps/people-list/components/PeopleList.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app 
-    class="transparent peopleList"
+    class="transparent peopleList card-border-radius overflow-hidden"
     flat>
     <people-toolbar
       :filter="filter"

diff --git a/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverview.vue b/webapp/portlet/src/main/webapp/vue-apps/people-overview/components/PeopleOverview.vue
@@ -1,6 +1,6 @@
 <template>
   <v-app>
-    <v-card class="pa-4 text-center" flat>
+    <widget-wrapper>
       <v-card class="border-box-sizing d-flex flex-row justify-center ma-0" flat>
         <people-overview-card
           id="peopleInvitationsOverview"
@@ -16,7 +16,7 @@
           :class="pending === '-' && 'text-sub-title'"
           @click="$refs.peopleDrawer.open('pending', $t('peopleOverview.label.pending'))" />
       </v-card>
-    </v-card>
+    </widget-wrapper>
     <people-overview-drawer ref="peopleDrawer" @refresh="refresh()" />
   </v-app>    
 </template>

diff --git a/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue b/webapp/portlet/src/main/webapp/vue-apps/profile-about-me/components/ProfileAboutMe.vue
@@ -3,39 +3,29 @@
     v-if="displayApp"
     :class="owner && 'profileAboutMe' || 'profileAboutMeOther'"
     class="white">
-    <v-toolbar
-      color="white"
-      flat
-      class="border-box-sizing">
-      <div
-        class="text-header-title text-sub-title">
-        {{ title }}
-      </div>
-      <v-spacer />
-      <v-btn
-        v-if="owner"
-        id="aboutMeEditButton"
-        icon
-        outlined
-        small
-        @click="editAboutMe">
-        <v-icon size="18">fas fa-edit</v-icon>
-      </v-btn>
-    </v-toolbar>
-    <v-card
-      class="border-box-sizing"
-      flat>
+    <widget-wrapper :title="title">
+      <template #action>
+        <v-btn
+          v-if="owner"
+          id="aboutMeEditButton"
+          icon
+          outlined
+          small
+          @click="editAboutMe">
+          <v-icon size="18">fas fa-edit</v-icon>
+        </v-btn>
+      </template>
       <p
         v-autolinker="aboutMe"
         v-if="aboutMe || !owner"
         id="aboutMeParagraph"
-        class="paragraph text-color pt-0 pb-6 px-4"></p>
+        class="paragraph text-color"></p>
       <p
         v-else
         id="aboutMeParagraph"
-        class="paragraph text-color pt-0 pb-6 px-4"
+        class="paragraph text-color"
         v-text="$t('profileAboutMe.emptyOwner')"></p>
-    </v-card>
+    </widget-wrapper> 
     <exo-drawer
       v-if="owner"
       ref="aboutMeDrawer"