From 06e473457bd2bcec847c1db26ae77789a89fd5f2 Mon Sep 17 00:00:00 2001 From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com> Date: Tue, 14 Nov 2023 15:00:54 +0100 Subject: [PATCH 1/5] feat: Margins cleanup - Remove extra-margins - MEED-2895-Meeds-io/MIPs#103 (#3180) All Vue applications parents no longer have margins due to these changes. The margin will be added as a CSS variable inside the less variables, so we can change this variable using the branding UI. (cherry picked from commit e140c795347bbe5d8c2c32cfbc53de032f5db848) --- .../webapp/skin/less/portlet/ActivityStream/Style.less | 9 --------- .../components/UserSettingNotifications.vue | 2 +- .../vue-apps/space-header/components/SpaceHeader.vue | 2 +- .../components/UserSettingSecurity.vue | 2 +- 4 files changed, 3 insertions(+), 12 deletions(-) diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less index 34d9c4cf18a..397c5254f0f 100644 --- a/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less +++ b/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less @@ -237,15 +237,6 @@ padding-left: 10px ~'; /** orientation=lt */ '; padding-right: 10px ~'; /** orientation=rt */ '; - .v-application { - &:not(.hiddenable-widget) { - margin-bottom: 20px; - } - &.hiddenable-widget > .v-application--wrap > div { - margin-bottom: 20px; - } - } - /* Added for sticky container */ .UIContainer, .NormalContainerBlock, .VIEW-CONTAINER, .UIIntermediateContainer, .UIRowContainer { display: inline; diff --git a/webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue b/webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue index 50ddfd8f818..7ef215a43e8 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue +++ b/webapp/portlet/src/main/webapp/vue-apps/notification-user-settings/components/UserSettingNotifications.vue @@ -6,7 +6,7 @@ @back="closeDetail" /> diff --git a/webapp/portlet/src/main/webapp/vue-apps/space-header/components/SpaceHeader.vue b/webapp/portlet/src/main/webapp/vue-apps/space-header/components/SpaceHeader.vue index 0b0d61664c8..300ca65a4a1 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/space-header/components/SpaceHeader.vue +++ b/webapp/portlet/src/main/webapp/vue-apps/space-header/components/SpaceHeader.vue @@ -2,7 +2,7 @@ From 5946dbf8dd8ecb67b9568491b9203d9815be8a6d Mon Sep 17 00:00:00 2001 From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com> Date: Thu, 16 Nov 2023 15:02:16 +0100 Subject: [PATCH 2/5] feat: Container margins managements - MEED-2867-Meeds-io/Mips#103 (#3189) Add padding bottom to stickyBlockDesktop in the right sidebar. (cherry picked from commit 7834dc383d70a8a7dae319a8a2ad78527aaf42a3) --- .../src/main/webapp/skin/less/portlet/ActivityStream/Style.less | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less b/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less index 397c5254f0f..a339c061be6 100644 --- a/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less +++ b/webapp/portlet/src/main/webapp/skin/less/portlet/ActivityStream/Style.less @@ -272,6 +272,7 @@ top: 13px; height: auto; display: block; + padding-bottom: @applicationSpaceBottom !important; z-index: @zindexStickyContainer; } } From e46801fac7feb011e1bc6b24adeb6314f0b32904 Mon Sep 17 00:00:00 2001 From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com> Date: Fri, 17 Nov 2023 16:14:13 +0100 Subject: [PATCH 3/5] feat: No addictional space bottom when hidden app - MEED-2924-Meeds-io/MIPs#103 (#3191) Prior to this change when application is hidden, an extra padding bottom is visible This change allows to hide the app portlet parent when it is hidden. (cherry picked from commit 5e680771586a508e029cc87d0b4d223a2eef41cc) --- .../src/main/webapp/vue-apps/getting-started/main.js | 10 +++++++++- .../components/ExoSuggestionsPeopleAndSpace.vue | 12 ++++++++++++ .../who-is-online-app/components/ExoWhoIsOnline.vue | 9 +++++++++ .../main/webapp/vue-apps/who-is-online-app/main.js | 3 +++ 4 files changed, 33 insertions(+), 1 deletion(-) diff --git a/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js b/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js index 0c637470ce8..35f9625b4d4 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js +++ b/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js @@ -12,6 +12,14 @@ export function hideGettingStarted() { const parentAppElement = document.querySelector('#GettingStartedPortlet .btClose'); if (parentAppElement) { parentAppElement.onclick = () => { - hideGettingStarted().then(() => document.querySelector('#GettingStartedPortlet').parentElement.remove()); + hideGettingStarted().then(() => { + const parentElementToHide = parentAppElement.closest('.PORTLET-FRAGMENT'); + hideGettingStarted().then(() => parentElementToHide.classList.add('hidden')); + }); }; +} else { + const parentElementToHide = document.querySelector('#GettingStartedPortlet'); + if (parentElementToHide) { + parentElementToHide.closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } } diff --git a/webapp/portlet/src/main/webapp/vue-apps/suggestions-people-space/components/ExoSuggestionsPeopleAndSpace.vue b/webapp/portlet/src/main/webapp/vue-apps/suggestions-people-space/components/ExoSuggestionsPeopleAndSpace.vue index 374c6a9fc64..5d689d080ab 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/suggestions-people-space/components/ExoSuggestionsPeopleAndSpace.vue +++ b/webapp/portlet/src/main/webapp/vue-apps/suggestions-people-space/components/ExoSuggestionsPeopleAndSpace.vue @@ -68,6 +68,13 @@ export default { this.$nextTick().then(() => this.$root.$applicationLoaded()); } }, + isVisible() { + if (this.isVisible) { + this.$el.closest('.PORTLET-FRAGMENT').classList.remove('hidden'); + } else { + this.$el.closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } + } }, created() { if (this.displayPeopleSuggestions) { @@ -81,6 +88,11 @@ export default { this.loading--; } }, + mounted() { + if (!this.isVisible) { + this.$el.closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } + }, methods: { initPeopleSuggestionsList() { return this.$userService.getUserSuggestions() diff --git a/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/components/ExoWhoIsOnline.vue b/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/components/ExoWhoIsOnline.vue index ed5f0ab36fe..8105efe07b1 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/components/ExoWhoIsOnline.vue +++ b/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/components/ExoWhoIsOnline.vue @@ -36,6 +36,15 @@ export default { return this.users && this.users.length; }, }, + watch: { + display() { + if (this.display) { + this.$el.closest('.PORTLET-FRAGMENT').classList.remove('hidden'); + } else { + this.$el.closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } + } + }, mounted() { this.$root.$applicationLoaded(); }, diff --git a/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/main.js b/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/main.js index 7e5254ef6f1..40ef1647b1e 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/main.js +++ b/webapp/portlet/src/main/webapp/vue-apps/who-is-online-app/main.js @@ -28,6 +28,9 @@ export function init() { exoi18n.loadLanguageAsync(lang, url) .then(() => { const onlineUsers = JSON.parse(document.getElementById('whoIsOnlineDefaultValue').value); + if (!onlineUsers.length) { + document.querySelector('#OnlinePortlet').closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } if (onlineUsers && onlineUsers.length) { const avatars = JSON.parse(document.getElementById('whoIsOnlineAvatarsDefaultValue').value); onlineUsers.forEach(user => { From cc6d46b3727d6a3c65e2e58301e92199b3962e56 Mon Sep 17 00:00:00 2001 From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com> Date: Mon, 20 Nov 2023 11:47:45 +0100 Subject: [PATCH 4/5] feat: No additional margin when hidden app - MEED-2924-Meeds-io/MIPs#103 (#3195) This change allow to add a new data attribute to check if all steps in the gattingStarted portlet are done so we add hidden class to the app parent. (cherry picked from commit e24b613bbdbf4d810e39c17ecafa62c2b05eda0b) --- .../main/webapp/WEB-INF/jsp/portlet/gettingStarted.jsp | 2 +- .../src/main/webapp/vue-apps/getting-started/main.js | 9 ++++----- 2 files changed, 5 insertions(+), 6 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 index 9e593180e28..08afb05266f 100644 --- a/webapp/portlet/src/main/webapp/WEB-INF/jsp/portlet/gettingStarted.jsp +++ b/webapp/portlet/src/main/webapp/WEB-INF/jsp/portlet/gettingStarted.jsp @@ -25,7 +25,7 @@ } %>
-
+
diff --git a/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js b/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js index 35f9625b4d4..645bc9e5b6c 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js +++ b/webapp/portlet/src/main/webapp/vue-apps/getting-started/main.js @@ -17,9 +17,8 @@ if (parentAppElement) { hideGettingStarted().then(() => parentElementToHide.classList.add('hidden')); }); }; -} else { - const parentElementToHide = document.querySelector('#GettingStartedPortlet'); - if (parentElementToHide) { - parentElementToHide.closest('.PORTLET-FRAGMENT').classList.add('hidden'); - } +} +const parentElementToHide = document.querySelector('#GettingStartedPortlet'); +if (parentElementToHide && parentElementToHide.dataset.canClose === 'true') { + parentElementToHide.closest('.PORTLET-FRAGMENT').classList.add('hidden'); } From 105a729be85ac498f0509ea81232a6608702a2c5 Mon Sep 17 00:00:00 2001 From: Sara Boutej <40363501+SaraBoutej@users.noreply.github.com> Date: Tue, 21 Nov 2023 11:36:45 +0100 Subject: [PATCH 5/5] feat: Extra margin to remove when CMS portlets are not displayed - MEED-2953-Meeds-io/MIPs#103 (#3205) Prior to this change, When we toggle between show/hide of the preview mode in the public page, an extra margin in displayed when the app is hidden. This change allows to remove extra margin when app is hidden. --- .../main/webapp/vue-apps/links/components/LinksApp.vue | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue b/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue index 314031e9a57..fdc1976e86f 100644 --- a/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue +++ b/webapp/portlet/src/main/webapp/vue-apps/links/components/LinksApp.vue @@ -68,6 +68,15 @@ export default { return !this.previewMode && this.$root.canEdit; }, }, + watch: { + canView() { + if (this.canView) { + this.$el.parentElement.closest('.PORTLET-FRAGMENT').classList.remove('hidden'); + } else { + this.$el.parentElement.closest('.PORTLET-FRAGMENT').classList.add('hidden'); + } + } + }, created() { document.addEventListener('cms-preview-mode', this.switchToPreview); document.addEventListener('cms-edit-mode', this.switchToEdit);