From af7142e97b76ea46b08200df35d1beeef784c201 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 12 Feb 2024 11:49:34 +0100 Subject: [PATCH] :sparkles: New overlay for v2 information --- backend/src/app/rpc/commands/auth.clj | 3 +- frontend/resources/images/icons/v2-icon-1.svg | 1 + frontend/resources/images/icons/v2-icon-2.svg | 1 + frontend/resources/images/icons/v2-icon-3.svg | 1 + frontend/resources/images/icons/v2-icon-4.svg | 1 + .../styles/common/refactor/fonts.scss | 1 + frontend/src/app/main/data/workspace.cljs | 13 ++-- .../app/main/ui/dashboard/change_owner.scss | 4 ++ frontend/src/app/main/ui/icons.cljs | 5 ++ .../src/app/main/ui/workspace/libraries.cljs | 56 ++++++++++++++++ .../src/app/main/ui/workspace/libraries.scss | 67 +++++++++++++++++++ 11 files changed, 148 insertions(+), 5 deletions(-) create mode 100644 frontend/resources/images/icons/v2-icon-1.svg create mode 100644 frontend/resources/images/icons/v2-icon-2.svg create mode 100644 frontend/resources/images/icons/v2-icon-3.svg create mode 100644 frontend/resources/images/icons/v2-icon-4.svg diff --git a/backend/src/app/rpc/commands/auth.clj b/backend/src/app/rpc/commands/auth.clj index 66bec377d..8e9671e59 100644 --- a/backend/src/app/rpc/commands/auth.clj +++ b/backend/src/app/rpc/commands/auth.clj @@ -262,7 +262,8 @@ (merge (:props params)) (merge {:viewed-tutorial? false :viewed-walkthrough? false - :nudge {:big 10 :small 1}}) + :nudge {:big 10 :small 1} + :v2-info-shown true}) (db/tjson)) password (or (:password params) "!") diff --git a/frontend/resources/images/icons/v2-icon-1.svg b/frontend/resources/images/icons/v2-icon-1.svg new file mode 100644 index 000000000..b39647eb1 --- /dev/null +++ b/frontend/resources/images/icons/v2-icon-1.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/icons/v2-icon-2.svg b/frontend/resources/images/icons/v2-icon-2.svg new file mode 100644 index 000000000..d384ee2ed --- /dev/null +++ b/frontend/resources/images/icons/v2-icon-2.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/icons/v2-icon-3.svg b/frontend/resources/images/icons/v2-icon-3.svg new file mode 100644 index 000000000..bfc88da6d --- /dev/null +++ b/frontend/resources/images/icons/v2-icon-3.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/icons/v2-icon-4.svg b/frontend/resources/images/icons/v2-icon-4.svg new file mode 100644 index 000000000..dc2443432 --- /dev/null +++ b/frontend/resources/images/icons/v2-icon-4.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss index 40d1dcb87..c4bc4cb3f 100644 --- a/frontend/resources/styles/common/refactor/fonts.scss +++ b/frontend/resources/styles/common/refactor/fonts.scss @@ -15,6 +15,7 @@ $fs-11: 0.688rem; $fs-12: math.div(12, $fs-base) + rem; $fs-14: math.div(14, $fs-base) + rem; $fs-16: math.div(16, $fs-base) + rem; +$fs-18: math.div(18, $fs-base) + rem; $fs-24: math.div(24, $fs-base) + rem; $fs-36: math.div(36, $fs-base) + rem; diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 46d847794..0249bf2ca 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -35,6 +35,7 @@ [app.main.data.events :as ev] [app.main.data.fonts :as df] [app.main.data.messages :as msg] + [app.main.data.modal :as modal] [app.main.data.users :as du] [app.main.data.workspace.bool :as dwb] [app.main.data.workspace.changes :as dch] @@ -119,10 +120,14 @@ (assoc :workspace-ready? true))) ptk/WatchEvent - (watch [_ _ _] - (rx/of (fbc/fix-bool-contents) - (fdf/fix-deleted-fonts) - (fbs/fix-broken-shapes))))) + (watch [_ state _] + (rx/of + (when (and (not (boolean (-> state :profile :props :v2-info-shown))) + (features/active-feature? state "components/v2")) + (modal/show :v2-info {})) + (fbc/fix-bool-contents) + (fdf/fix-deleted-fonts) + (fbs/fix-broken-shapes))))) (defn- workspace-data-loaded [data] diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss index 2da4ec233..c1f6bf7d9 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.scss +++ b/frontend/src/app/main/ui/dashboard/change_owner.scss @@ -50,3 +50,7 @@ @extend .modal-danger-btn; } } + +.modal-msg { + color: var(--modal-text-foreground-color); +} diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index e90cc022e..f65ff1676 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -479,6 +479,11 @@ (def ^:icon cap-round (icon-xref :cap-round)) (def ^:icon cap-square (icon-xref :cap-square)) +(def ^:icon v2-icon-1 (icon-xref :v2-icon-1)) +(def ^:icon v2-icon-2 (icon-xref :v2-icon-2)) +(def ^:icon v2-icon-3 (icon-xref :v2-icon-3)) +(def ^:icon v2-icon-4 (icon-xref :v2-icon-4)) + (def ^:icon loader-pencil (mf/html diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 3262f202b..871c53799 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -15,6 +15,7 @@ [app.common.types.typographies-list :as ctyl] [app.common.uuid :as uuid] [app.main.data.modal :as modal] + [app.main.data.users :as du] [app.main.data.workspace.libraries :as dwl] [app.main.refs :as refs] [app.main.render :refer [component-svg]] @@ -511,3 +512,58 @@ [:& updates-tab {:file-id file-id :file-data file-data :libraries libraries}]]]]]]]])) + +(mf/defc v2-info-dialog + {::mf/register modal/components + ::mf/register-as :v2-info} + [] + (let [handle-gotit-click + (mf/use-fn + (fn [] + (modal/hide!) + (st/emit! (du/update-profile-props {:v2-info-shown true}))))] + + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-dialog :modal-v2-info)} + [:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"] + [:div {:class (stl/css :modal-content)} + [:div {:class (stl/css :info-content)} + [:div {:class (stl/css :info-block)} + [:div {:class (stl/css :info-icon)} i/v2-icon-1] + [:div {:class (stl/css :info-block-title)} + "One physical source of truth"] + [:div {:class (stl/css :info-block-content)} + "Main components are now found at the design space. They act as a single source " + "of truth and can be worked on with their copies. This ensures consistency and " + "allows better control and synchronization."]] + + [:div {:class (stl/css :info-block)} + [:div {:class (stl/css :info-icon)} i/v2-icon-2] + [:div {:class (stl/css :info-block-title)} + "Swap components"] + [:div {:class (stl/css :info-block-content)} + "Now, you can replace one component copy with another within your libraries. " + "The swap components functionality streamlines making changes, testing " + "variations, or updating elements without extensive manual adjustments."]] + + [:div {:class (stl/css :info-block)} + [:div {:class (stl/css :info-icon)} i/v2-icon-3] + [:div {:class (stl/css :info-block-title)} + "Graphic assets no longer exist"] + [:div {:class (stl/css :info-block-content)} + "Graphic assets now disappear, so that all graphic assets become components. " + "This way, swapping between them is possible, and we avoid confusion about " + "what should go in each typology."]] + + [:div {:class (stl/css :info-block)} + [:div {:class (stl/css :info-icon)} i/v2-icon-4] + [:div {:class (stl/css :info-block-title)} + "Main components page"] + [:div {:class (stl/css :info-block-content)} + "You might find that a new page called 'Main components' has appeared in " + "your file. On that page, you'll find all the main components that were " + "created in your files previously to this new version."]]] + + [:div {:class (stl/css :info-bottom)} + [:button {:class (stl/css :primary-button) + :on-click handle-gotit-click} "I GOT IT"]]]]])) diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 2664f3209..3fa999a1e 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -228,6 +228,15 @@ } } } + + .modal-v2-info { + width: $s-664; + height: fit-content; + + .modal-title { + font-size: $fs-18; + } + } } .item-contents { @@ -245,3 +254,61 @@ margin-inline: $s-4; } } + +.info-content { + margin-top: $s-32; + display: flex; + flex-direction: column; + gap: $s-24; + + .info-block { + display: grid; + grid-template-columns: auto 1fr; + column-gap: $s-20; + grid-template: + "icon title" + "icon content"; + } + + .info-icon { + grid-area: icon; + width: $s-52; + height: $s-52; + margin-top: $s-8; + border-radius: $br-circle; + background: $db-quaternary; + + display: flex; + justify-content: center; + align-items: center; + + svg { + width: $s-32; + height: $s-32; + fill: $da-primary; + } + } + .info-block-title { + grid-area: title; + font-size: $fs-16; + color: $df-primary; + } + .info-block-content { + grid-area: content; + font-size: $fs-14; + color: $df-secondary; + line-height: 1.2; + } +} + +.info-bottom { + margin-top: $s-24; + margin-right: $s-8; + display: flex; + justify-content: flex-end; + .primary-button { + @extend .button-primary; + @include tabTitleTipography; + padding: $s-0 $s-16; + } +}