From 9645ffba40dd4772c1eebf3308fae639f48733aa Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 29 Feb 2024 16:12:47 +0100 Subject: [PATCH 1/4] :bug: Fix upload image alert message --- frontend/src/app/main/data/media.cljs | 1 + frontend/src/app/main/data/workspace/media.cljs | 2 ++ frontend/src/app/main/errors.cljs | 5 +++++ frontend/src/app/main/ui/messages.cljs | 5 ++++- .../src/app/main/ui/notifications/toast_notification.scss | 8 ++++---- frontend/src/app/main/ui/viewer/share_link.cljs | 1 + 6 files changed, 17 insertions(+), 5 deletions(-) diff --git a/frontend/src/app/main/data/media.cljs b/frontend/src/app/main/data/media.cljs index bb1a82e39e..e78892bb1b 100644 --- a/frontend/src/app/main/data/media.cljs +++ b/frontend/src/app/main/data/media.cljs @@ -47,6 +47,7 @@ (defn notify-start-loading [] (st/emit! (msg/show {:content (tr "media.loading") + :notification-type :toast :type :info :timeout nil}))) diff --git a/frontend/src/app/main/data/workspace/media.cljs b/frontend/src/app/main/data/workspace/media.cljs index 3dc6c8d7a1..693207d87e 100644 --- a/frontend/src/app/main/data/workspace/media.cljs +++ b/frontend/src/app/main/data/workspace/media.cljs @@ -211,6 +211,7 @@ (watch [_ _ _] (rx/concat (rx/of (msg/show {:content (tr "media.loading") + :notification-type :toast :type :info :timeout nil :tag :media-loading})) @@ -440,6 +441,7 @@ (rx/concat (rx/of (msg/show {:content (tr "media.loading") + :notification-type :toast :type :info :timeout nil :tag :media-loading})) diff --git a/frontend/src/app/main/errors.cljs b/frontend/src/app/main/errors.cljs index a16bd93f0f..542b41bce7 100644 --- a/frontend/src/app/main/errors.cljs +++ b/frontend/src/app/main/errors.cljs @@ -124,6 +124,7 @@ (let [message (tr "errors.paste-data-validation")] (st/async-emit! (msg/show {:content message + :notification-type :toast :type :error :timeout 3000}))) @@ -138,6 +139,7 @@ [error] (ts/schedule #(st/emit! (msg/show {:content "Internal Assertion Error" + :notification-type :toast :type :error :timeout 3000}))) @@ -153,6 +155,7 @@ (ts/schedule #(st/emit! (msg/show {:content "Something wrong has happened (on worker)." + :notification-type :toast :type :error :timeout 3000}))) @@ -166,6 +169,7 @@ [_] (ts/schedule #(st/emit! (msg/show {:content "SVG is invalid or malformed" + :notification-type :toast :type :error :timeout 3000})))) @@ -174,6 +178,7 @@ [_] (ts/schedule #(st/emit! (msg/show {:content "There was an error with the comment" + :notification-type :toast :type :error :timeout 3000})))) diff --git a/frontend/src/app/main/ui/messages.cljs b/frontend/src/app/main/ui/messages.cljs index 56c481fb28..00df9c3f3d 100644 --- a/frontend/src/app/main/ui/messages.cljs +++ b/frontend/src/app/main/ui/messages.cljs @@ -33,6 +33,7 @@ :links (:links message) :content (:content message)} + is-context-msg (and (nil? (:timeout message)) (nil? (:actions message))) is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message))) is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))] @@ -42,5 +43,7 @@ [:& toast-notification toast-message] is-inline-msg [:& inline-notification inline-message] + is-context-msg + [:& context-notification context-message] :else - [:& context-notification context-message])))) + [:& toast-notification toast-message])))) diff --git a/frontend/src/app/main/ui/notifications/toast_notification.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss index dfa67bc1e1..6626fc1190 100644 --- a/frontend/src/app/main/ui/notifications/toast_notification.scss +++ b/frontend/src/app/main/ui/notifications/toast_notification.scss @@ -44,10 +44,10 @@ } .info { - --bg-color: var(--alert-background-color-info); - --fg-color: var(--alert-text-foreground-color-info); - --icon-color: var(--alert-icon-foreground-color-info); - --border-color: var(--alert-border-color-info); + --toast-notification-bg-color: var(--alert-background-color-info); + --toast-notification-fg-color: var(--alert-text-foreground-color-info); + --toast-notification-icon-color: var(--alert-icon-foreground-color-info); + --toast-notification-border-color: var(--alert-border-color-info); } .default { diff --git a/frontend/src/app/main/ui/viewer/share_link.cljs b/frontend/src/app/main/ui/viewer/share_link.cljs index 8a7961a8b6..a937eada3d 100644 --- a/frontend/src/app/main/ui/viewer/share_link.cljs +++ b/frontend/src/app/main/ui/viewer/share_link.cljs @@ -135,6 +135,7 @@ (fn [_] (wapi/write-to-clipboard current-link) (st/emit! (msg/show {:type :info + :notification-type :toast :content (tr "common.share-link.link-copied-success") :timeout 1000}))) From add0bed3ca5f4cff027410beac6851261b25c9f6 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 29 Feb 2024 16:46:10 +0100 Subject: [PATCH 2/4] :bug: Fix ellipsis in library color names --- .../ui/workspace/sidebar/assets/colors.cljs | 6 +-- .../ui/workspace/sidebar/assets/colors.scss | 37 +++++++++++-------- 2 files changed, 24 insertions(+), 19 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs index 333e4e2fab..5dc91dba6f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -224,10 +224,10 @@ :on-double-click rename-color-clicked} (if (= (:name color) default-name) - [:span {:class (stl/css :default-name-only)} default-name] + [:span {:class (stl/css :default-name)} default-name] [:* - [:span {:class (stl/css :name)} (:name color)] - [:span {:class (stl/css :default-name)} default-name]])]) + (:name color) + [:span {:class (stl/css :default-name :default-name-with-color)} default-name]])]) (when local? [:& cmm/assets-context-menu diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index daca6b7787..73df84f7f5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -6,10 +6,15 @@ @import "refactor/common-refactor.scss"; +// TODO: we should be using subgrid in the common "assets component" to avoid +// using this SCSS variable here (we cannot use a CSS var in this CSS module because +// the elements are not part of the same cascade). +$assets-button-width: $s-28; + .assets-btn { @extend .button-tertiary; height: $s-32; - width: $s-28; + width: $assets-button-width; padding: 0; border-radius: $br-8; svg { @@ -28,10 +33,12 @@ .asset-list-item { position: relative; - display: flex; + display: grid; + grid-template-columns: auto 1fr #{$assets-button-width}; align-items: center; height: $s-32; padding: $s-8; + padding-inline-end: 0; margin-bottom: $s-4; border-radius: $br-8; background-color: var(--assets-item-background-color); @@ -63,25 +70,23 @@ @include flexCenter; height: 100%; justify-content: flex-start; - margin-right: $s-4; + margin-inline-end: $s-4; } .name-block { @include bodySmallTypography; - display: grid; - grid-template-columns: auto 1fr; + @include textEllipsis; margin: 0; - overflow: hidden; - .default-name-only, - .name { - color: var(--assets-item-name-foreground-color); - margin-right: $s-6; - @include textEllipsis; - } - .default-name { - min-width: 0; - color: var(--assets-item-name-foreground-color-rest); - } + color: var(--assets-item-name-foreground-color); +} + +.default-name { + margin-inline-start: $s-4; + color: var(--assets-item-name-foreground-color-rest); +} + +.default-name-with-color { + margin-left: $s-6; } .element-name { From 6e4075a2e7e2ab838275180ac6ec257a2fc901d6 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Thu, 29 Feb 2024 17:00:40 +0100 Subject: [PATCH 3/4] :bug: Fix create team name modal width --- frontend/src/app/main/ui/dashboard/team_form.cljs | 4 +++- frontend/src/app/main/ui/dashboard/team_form.scss | 5 ++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/team_form.cljs b/frontend/src/app/main/ui/dashboard/team_form.cljs index ff500666d3..e93244e538 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.cljs +++ b/frontend/src/app/main/ui/dashboard/team_form.cljs @@ -89,7 +89,9 @@ [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-container)} - [:& fm/form {:form form :on-submit on-submit} + [:& fm/form {:form form + :on-submit on-submit + :class (stl/css :team-form)} [:div {:class (stl/css :modal-header)} (if team diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index dfca8099ef..2545950f8e 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/frontend/src/app/main/ui/dashboard/team_form.scss @@ -31,6 +31,10 @@ margin-bottom: $s-24; } +.team-form { + min-width: $s-400; +} + .group-name-input { @extend .input-element-label; label { @@ -44,7 +48,6 @@ input { @include bodySmallTypography; - margin-top: $s-8; } } } From 7833a06a86c117d669608314724b0391cef18c79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Mon, 4 Mar 2024 10:49:19 +0100 Subject: [PATCH 4/4] :bug: Fix color rename input height --- frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index 73df84f7f5..ae7193502a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -55,7 +55,6 @@ $assets-button-width: $s-28; @include bodySmallTypography; @include removeInputStyle; flex-grow: 1; - height: $s-28; max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size))); margin: 0; color: var(--layer-row-foreground-color);