From 27e9a2a7f2a55a1f7ca84022b99e34f6c3173f76 Mon Sep 17 00:00:00 2001 From: Eva Marco Date: Mon, 26 Feb 2024 16:25:54 +0100 Subject: [PATCH] :sparkles: Add a way to add markdown to context notifications --- frontend/src/app/main/ui/dashboard/fonts.cljs | 17 +++---- frontend/src/app/main/ui/dashboard/fonts.scss | 44 ------------------- .../notifications/context_notification.cljs | 22 ++++++---- .../notifications/context_notification.scss | 9 +++- 4 files changed, 28 insertions(+), 64 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index 518599697..d0b3751c2 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -17,6 +17,7 @@ [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]] [app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.icons :as i] + [app.main.ui.notifications.context-notification :refer [context-notification]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [app.util.keyboard :as kbd] @@ -130,18 +131,14 @@ :ref input-ref :on-selected handle-selected}]] - [:div {:class (stl/css :banner)} - [:div {:class (stl/css :icon)} i/msg-neutral-refactor] - [:div {:class (stl/css :content)} - [:& i18n/tr-html {:tag-name "span" - :label "dashboard.fonts.hero-text2"}]]] + [:& context-notification {:content (tr "dashboard.fonts.hero-text2") + :type :default + :is-html true}] (when problematic-fonts? - [:div {:class (stl/css :banner :warning)} - [:div {:class (stl/css :icon)} i/msg-neutral-refactor] - [:div {:class (stl/css :content)} - [:& i18n/tr-html {:tag-name "span" - :label "dashboard.fonts.warning-text"}]]])]] + [:& context-notification {:content (tr "dashboard.fonts.warning-text") + :type :warning + :is-html true}])]] [:* (when (some? (vals fonts)) diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss index 3bc947787..e520e01a4 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.scss +++ b/frontend/src/app/main/ui/dashboard/fonts.scss @@ -255,50 +255,6 @@ } } - .banner { - @include bodyMedTipography; - --bg-color: var(--alert-background-color-default); - --fg-color: var(--alert-text-foreground-color-default); - --icon-color: var(--alert-icon-foreground-color-default); - --border-color: var(--alert-border-color-default); - overflow: hidden; - display: grid; - grid-template-columns: $s-16 1fr; - gap: $s-8; - padding: $s-8 $s-8 $s-8 $s-16; - border-radius: $br-12; - border: $s-1 solid var(--border-color); - border-radius: $br-12; - background-color: var(--bg-color); - color: var(--fg-color); - font-size: $fs-12; - - .icon { - display: flex; - align-items: flex-start; - justify-content: center; - - svg { - stroke: var(--icon-color); - fill: none; - height: $s-16; - width: $s-16; - } - } - .content a { - color: $da-primary; - } - &.warning { - --bg-color: var(--alert-background-color-warning); - --fg-color: var(--alert-text-foreground-color-warning); - --icon-color: var(--alert-icon-foreground-color-warning); - --border-color: var(--alert-border-color-warning); - .icon svg { - stroke: var(--element-foreground-warning); - } - } - } - .btn-primary { flex-shrink: 0; } diff --git a/frontend/src/app/main/ui/notifications/context_notification.cljs b/frontend/src/app/main/ui/notifications/context_notification.cljs index de9c4dbf6..d5d96e3d5 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.cljs +++ b/frontend/src/app/main/ui/notifications/context_notification.cljs @@ -39,23 +39,29 @@ They are contextual messages in specific areas off the app" {::mf/props :obj} - [{:keys [type content links] :as props}] + [{:keys [type content links is-html] :as props}] [:aside {:class (stl/css-case :context-notification true - :warning (= type :warning) - :error (= type :error) - :success (= type :success) - :info (= type :info))} + :contain-html is-html + :warning (= type :warning) + :error (= type :error) + :success (= type :success) + :info (= type :info))} (get-icon-by-type type) - [:div {:class (stl/css :context-text)} - content] + ;; The content can arrive in markdown format, in these cases + ;; we will use the prop is-html to true to indicate it and + ;; that the html injection is performed and the necessary css classes are applied. + [:div {:class (stl/css :context-text) + :dangerouslySetInnerHTML (when is-html #js {:__html content})} + (when-not is-html + content)] (when (some? links) [:nav {:class (stl/css :link-nav)} (for [[index link] (d/enumerate links)] - ;; TODO Review this component + ;; TODO Review this component [:& lb/link-button {:class (stl/css :link) :on-click (:callback link) :value (:label link) diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss index 99941f269..98e590494 100644 --- a/frontend/src/app/main/ui/notifications/context_notification.scss +++ b/frontend/src/app/main/ui/notifications/context_notification.scss @@ -59,7 +59,7 @@ .icon { @extend .button-icon; - height: 100%; + align-self: self-start; stroke: var(--icon-color); } @@ -76,7 +76,12 @@ margin: auto 0; } -.link { +// The second rule only applies when the element receives embedded +// links within the content by means of the dangerouslySetInnerHTML. +// Only in this case the contain-html class will be used. + +.link, +.contain-html .context-text a { @include bodyMedTipography; align-self: center; height: $s-16;