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

…-io/MIPs#81

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 {

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;
-        }
     }
 }

webapp/portlet/src/main/webapp/vue-apps/activity-reactions/components/ActivityReactions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="activityReactionsContainer activityLikersAndKudos text-font-size d-flex flex-nowrap py-2">
+  <div class="activityReactionsContainer activityLikersAndKudos text-font-size d-flex flex-nowrap pt-2">
     <div class="reactionsUsersAvatar position-relative d-none d-lg-inline">
       <div class="d-flex flex-nowrap">
         <exo-user-avatar

webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/ActivityStreamActivity.vue

@@ -1,83 +1,87 @@
 <template>
-  <unread-badge
-    :id="id"
-    :unread-metadata="unreadMetadata"
-    :space-id="spaceId"
-    class="white border-radius activity-detail flex flex-column"
-    @read="markAsRead">
-    <div v-if="displayLoading" class="d-flex">
-      <v-progress-circular
-        color="primary"
-        size="32"
-        indeterminate
-        class="mx-auto my-10" />
-    </div>
-    <template v-else-if="!noExtension && extendedComponent">
-      <activity-head
-        v-if="!extendedComponent.overrideHeader"
-        :activity="activity"
-        :activity-actions="activityActions"
-        :is-activity-detail="isActivityDetail"
-        :activity-type-extension="activityTypeExtension"
-        :hide-menu="hideMenu"
-        :class="isActivityShared && 'py-4 px-0' || 'py-2 ps-4 pe-1'" />
-      <template v-if="!loading">
-        <extension-registry-component
-          :component="extendedComponentOptions"
-          :element="extendedComponent.element"
-          :element-class="extendedComponent.class"
-          :params="extendedComponentParams"
-          class="d-flex flex-column" />
-      </template>
-      <template v-if="!hideFooter">
-        <activity-footer
-          v-if="!extendedComponent.overrideFooter"
-          :activity="activity"
-          :is-activity-detail="isActivityDetail"
-          :activity-types="activityTypes"
-          :activity-type-extension="activityTypeExtension" />
-        <activity-comments-preview
-          v-if="!extendedComponent.overrideComments"
-          :activity="activity"
-          :comment-types="commentTypes"
-          :comment-actions="commentActions"
-          class="px-4" />
-      </template>
+  <widget-wrapper :has-title="false">
+    <template #content>
+      <unread-badge
+        :id="id"
+        :unread-metadata="unreadMetadata"
+        :space-id="spaceId"
+        class="activity-detail"
+        @read="markAsRead">
+        <div v-if="displayLoading" class="d-flex">
+          <v-progress-circular
+            color="primary"
+            size="32"
+            indeterminate
+            class="mx-auto my-10" />
+        </div>
+        <template v-else-if="!noExtension && extendedComponent">
+          <activity-head
+            v-if="!extendedComponent.overrideHeader"
+            :activity="activity"
+            :activity-actions="activityActions"
+            :is-activity-detail="isActivityDetail"
+            :activity-type-extension="activityTypeExtension"
+            :hide-menu="hideMenu"
+            :class="isActivityShared && 'py-4 px-0' || 'pb-2 ps-0 pe-0'" />
+          <template v-if="!loading">
+            <extension-registry-component
+              :component="extendedComponentOptions"
+              :element="extendedComponent.element"
+              :element-class="extendedComponent.class"
+              :params="extendedComponentParams"
+              class="d-flex flex-column" />
+          </template>
+          <template v-if="!hideFooter">
+            <activity-footer
+              v-if="!extendedComponent.overrideFooter"
+              :activity="activity"
+              :is-activity-detail="isActivityDetail"
+              :activity-types="activityTypes"
+              :activity-type-extension="activityTypeExtension" />
+            <activity-comments-preview
+              v-if="!extendedComponent.overrideComments"
+              :activity="activity"
+              :comment-types="commentTypes"
+              :comment-actions="commentActions"
+              class="px-4" />
+          </template>
+        </template>
+        <template v-else>
+          <activity-head
+            :activity="activity"
+            :activity-actions="activityActions"
+            :is-activity-detail="isActivityDetail"
+            :activity-type-extension="activityTypeExtension"
+            :is-activity-shared="isActivityShared"
+            :hide-menu="hideMenu"
+            :class="isActivityShared && 'py-4 px-0' || 'pb-2 ps-0 pe-0'" />
+          <v-card v-if="!loading" flat>
+            <extension-registry-components
+              v-if="initialized"
+              :params="extendedComponentParams"
+              :class="!isActivityShared && ''"
+              name="ActivityContent"
+              type="activity-content-extensions"
+              parent-element="div"
+              element="div"
+              class="d-flex flex-column" />
+          </v-card>
+          <template v-if="!hideFooter">
+            <activity-footer
+              :activity="activity"
+              :is-activity-detail="isActivityDetail"
+              :activity-types="activityTypes"
+              :activity-type-extension="activityTypeExtension" />
+            <activity-comments-preview
+              :activity="activity"
+              :comment-types="commentTypes"
+              :comment-actions="commentActions"
+              class="px-4" />
+          </template>
+        </template>
+        </unread-badge>
     </template>
-    <template v-else>
-      <activity-head
-        :activity="activity"
-        :activity-actions="activityActions"
-        :is-activity-detail="isActivityDetail"
-        :activity-type-extension="activityTypeExtension"
-        :is-activity-shared="isActivityShared"
-        :hide-menu="hideMenu"
-        :class="isActivityShared && 'py-4 px-0' || 'py-2 ps-4 pe-1'" />
-      <v-card v-if="!loading" flat>
-        <extension-registry-components
-          v-if="initialized"
-          :params="extendedComponentParams"
-          :class="!isActivityShared && 'px-4'"
-          name="ActivityContent"
-          type="activity-content-extensions"
-          parent-element="div"
-          element="div"
-          class="d-flex flex-column" />
-      </v-card>
-      <template v-if="!hideFooter">
-        <activity-footer
-          :activity="activity"
-          :is-activity-detail="isActivityDetail"
-          :activity-types="activityTypes"
-          :activity-type-extension="activityTypeExtension" />
-        <activity-comments-preview
-          :activity="activity"
-          :comment-types="commentTypes"
-          :comment-actions="commentActions"
-          class="px-4" />
-      </template>
-    </template>
-  </unread-badge>
+    </widget-wrapper>
 </template>
 
 <script>

webapp/portlet/src/main/webapp/vue-apps/activity-stream/components/activity/footer/ActivityActions.vue

@@ -2,7 +2,7 @@
   <extension-registry-components
     :params="params"
     :class="actionBarBorderClass"
-    class="d-flex flex-no-wrap ms-lg-auto py-2 activity-footer-actions"
+    class="d-flex flex-no-wrap ms-lg-auto pt-2 activity-footer-actions"
     name="ActivityFooter"
     type="activity-footer-action"
     parent-element="div"

webapp/portlet/src/main/webapp/vue-apps/common/components/Widget.vue

@@ -0,0 +1,61 @@
+<!--
+  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, expanded && 'pa-5' || 'pa-0']"
+    class="white d-flex flex-column border-radius"
+    flat>
+    <v-card-title v-if="hasTitle" class="text-header text-sub-title justify-space-between flex-nowrap px-0 pt-0 pb-4">
+      <slot name="title"></slot>
+      <div>
+        <slot name="action"></slot>
+        <a 
+          v-if="seeAllUrl" 
+          class="flex-shrink-0" 
+          :href="seeAllUrl"> <h5 class="subtitle-1 primary--text my-0"> {{ $t('overview.myContributions.seeAll') }} </h5> </a>
+      </div>
+    </v-card-title>
+    <v-card-subtitle class="text-color pa-0">
+      <slot name="subtitle"></slot>
+    </v-card-subtitle>
+
+    <v-card-text class="d-flex flex-column flex-grow-1 pa-0">
+      <slot name="content"></slot>
+    </v-card-text>
+  </v-card>
+</template>
+<script>
+export default {
+  props: {
+    seeAllUrl: {
+      type: String,
+      default: () => '',
+    },
+    extraClass: {
+      type: String,
+      default: () => '',
+    },
+    hasTitle: {
+      type: Boolean,
+      default: () => true,
+    },
+    expanded: {
+      type: Boolean,
+      default: () => true
+    }
+  },
+};
+</script>

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) {

webapp/portlet/src/main/webapp/vue-apps/general-settings/components/GeneralSettings.vue

@@ -23,7 +23,7 @@
     <v-main>
       <v-card
         min-height="calc(100vh - 160px)"
-        class="px-6"
+        class="px-6 border-radius"
         flat>
         <v-list-item dense class="px-0 mb-4">
           <v-list-item-action v-if="$root.selectedTab" class="my-auto me-0 ms-n2">

webapp/portlet/src/main/webapp/vue-apps/notification-administration/components/NotificationAdministration.vue

@@ -1,18 +1,18 @@
 <template>
   <v-app>
-    <v-main v-if="notificationSettings">
-      <v-card class="pa-5" flat>
-        <h4 class="font-weight-bold my-0">
-          {{ $t('NotificationAdmin.title') }}
-        </h4>
+    <widget-wrapper v-if="notificationSettings">
+      <template #title>
+        {{ $t('NotificationAdmin.title') }}
+      </template>
+      <template #content>
         <notification-administration-contact
           :settings="notificationSettings" />
         <notification-administration-channels
           :settings="notificationSettings" />
         <notification-administration-plugins
           :settings="notificationSettings" />
-      </v-card>
-    </v-main>
+      </template>
+    </widget-wrapper>
   </v-app>
 </template>
 

webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotificationChannel.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <v-list-item two-line>
+    <v-list-item class="px-0" two-line>
       <v-list-item-content>
         <v-list-item-title class="text-color">
           {{ label }}
@@ -16,7 +16,7 @@
           @change="save" />
       </v-list-item-action>
     </v-list-item>
-    <v-divider class="mx-4" />
+    <v-divider />
   </div>
 </template>
 

webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotificationGroup.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="manageNotification && isEnabledNotificationGroup" class="border-radius border-color ma-4">
+  <div v-if="manageNotification && isEnabledNotificationGroup" class="border-radius border-color my-4">
     <v-list-item dense>
       <v-list-item-content>
         <v-list-item-title class="text-color font-weight-bold subtitle-1">