From c774592b9ea2c5a8363d7b9d55f1b1aef46d262e Mon Sep 17 00:00:00 2001 From: Pablo Alba Date: Wed, 5 Feb 2025 19:11:44 +0100 Subject: [PATCH] :bug: Fix several bugs for the combination of status and share on workspace (#5773) * :sparkles: Add status notification bubble * :sparkles: Add file persistance functionality * :sparkles: Add new colors * :sparkles: Add status tooltips * :sparkles: Fix z-index share modal * :bug: Fix share modal doesn't register on workspace * :lipstick: Fix files formatting * :sparkles: Add revision fixes * :sparkles: Add revision fixes CI * :fire: Remove unused require --------- Co-authored-by: Elhombretecla --- .../styles/common/refactor/color-defs.scss | 2 +- frontend/src/app/main/ui/dashboard/team.scss | 1 + .../app/main/ui/workspace/left_header.cljs | 24 +++++++++++ .../app/main/ui/workspace/left_header.scss | 41 +++++++++++++++++++ .../app/main/ui/workspace/right_header.cljs | 36 +--------------- 5 files changed, 68 insertions(+), 36 deletions(-) diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 46e6ba113..f3f1df5e2 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -35,7 +35,7 @@ --status-color-success-200: #a7e8d9; // Used on Register confirmation text --status-color-success-500: #2d9f8f; // Used on accept icon, and status widget - --status-color-warning-500: #fe4811; // Used on status widget, some buttons and warnings icons and elements + --status-color-warning-500: #f5a91b; // Used on status widget, some buttons and warnings icons and elements --status-color-error-500: #ff3277; // Used on discard icon, some borders and svg, and on status widget diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 977e97b92..d6436705f 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -455,6 +455,7 @@ .modal-team-container-workspace { top: $s-40; + z-index: $z-index-modal; } .modal-title { diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs index 82b819efd..757012b97 100644 --- a/frontend/src/app/main/ui/workspace/left_header.cljs +++ b/frontend/src/app/main/ui/workspace/left_header.cljs @@ -35,6 +35,11 @@ project-id (:id project) team-id (:team-id project) shared? (:is-shared file) + persistence + (mf/deref refs/persistence) + + persistence-status + (get persistence :status) read-only? (mf/use-ctx ctx/workspace-read-only?) @@ -108,6 +113,25 @@ {:class (stl/css :file-name) :title file-name :on-double-click start-editing-name} + ;;-- Persistende state widget + [:div {:class (case persistence-status + :pending (stl/css :status-notification :pending-status) + :saving (stl/css :status-notification :saving-status) + :saved (stl/css :status-notification :saved-status) + :error (stl/css :status-notification :error-status) + (stl/css :status-notification)) + :title (case persistence-status + :pending (tr "workspace.header.saving") + :saving (tr "workspace.header.saving") + :saved (tr "workspace.header.saved") + :error (tr "workspace.header.save-error") + nil)} + (case persistence-status + :pending i/status-alert + :saving i/status-alert + :saved i/status-tick + :error i/status-wrong + nil)] file-name])] (when ^boolean shared? [:span {:class (stl/css :shared-badge)} i/library]) diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index 207101743..df9ea3583 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -49,6 +49,9 @@ @include smallTitleTipography; text-transform: none; color: var(--title-foreground-color-hover); + align-items: center; + display: flex; + flex-direction: row; } .file-name-input { @@ -80,3 +83,41 @@ width: $s-16; } } + +.status-notification { + width: $s-6; + height: $s-6; + border-radius: 50%; + margin-right: $s-4; + flex-shrink: 0; + background-color: var(--status-widget-background-color-pending); + + &.pending-status { + background-color: var(--status-widget-background-color-warning); + } + + &.saving-status { + background-color: var(--status-widget-background-color-pending); + } + + &.saved-status { + background-color: var(--status-widget-background-color-success); + animation: jump 0.3s ease-out; + } + + &.error-status { + background-color: var(--status-widget-background-color-error); + } +} + +@keyframes jump { + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-4px); + } + 100% { + transform: translateY(0); + } +} diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 63af366b8..96a9883c3 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -19,6 +19,7 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.context :as ctx] + [app.main.ui.dashboard.team] [app.main.ui.ds.buttons.icon-button :refer [icon-button*]] [app.main.ui.exports.assets :refer [export-progress-widget]] [app.main.ui.formats :as fmt] @@ -32,39 +33,6 @@ (def ref:persistence-status (l/derived :status refs/persistence)) -;; --- Persistence state Widget - -(mf/defc persistence-state-widget - {::mf/wrap [mf/memo] - ::mf/wrap-props false} - [] - (let [status (mf/deref ref:persistence-status) - workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)] - (when-not workspace-read-only? - [:div {:class (stl/css :persistence-status-widget)} - (case status - :pending - [:div {:class (stl/css :status-icon :pending-status) - :title (tr "workspace.header.unsaved")} - i/status-alert] - - :saving - [:div {:class (stl/css :status-icon :pending-status) - :title (tr "workspace.header.unsaved")} - i/status-alert] - - :saved - [:div {:class (stl/css :status-icon :saved-status) - :title (tr "workspace.header.saved")} - i/status-tick] - - :error - [:div {:class (stl/css :status-icon :error-status) - :title "There was an error saving the data. Please refresh if this persists."} - i/status-wrong] - - nil)]))) - ;; --- Zoom Widget (mf/defc zoom-widget-workspace @@ -216,8 +184,6 @@ [:div {:class (stl/css :users-section)} [:& active-sessions]] - [:& persistence-state-widget] - [:& export-progress-widget] [:div {:class (stl/css :separator)}]