diff --git a/backend/src/app/srepl/components_v2.clj b/backend/src/app/srepl/components_v2.clj index 1c14e15d5c..0922904938 100644 --- a/backend/src/app/srepl/components_v2.clj +++ b/backend/src/app/srepl/components_v2.clj @@ -143,10 +143,10 @@ (def ^:private sql:get-files-by-report "WITH files AS ( - SELECT t.id t.features, mr.name + SELECT f.id, f.features, mr.label FROM migration_file_report AS mr - JOIN file AS t ON (t.id = mr.file_id) - WHERE t.deleted_at IS NULL + JOIN file AS f ON (f.id = mr.file_id) + WHERE f.deleted_at IS NULL AND mr.error IS NOT NULL ORDER BY mr.created_at ) SELECT id, features FROM files %(pred)s") diff --git a/backend/src/app/srepl/fixes.clj b/backend/src/app/srepl/fixes.clj index c5ba162f00..955f08366f 100644 --- a/backend/src/app/srepl/fixes.clj +++ b/backend/src/app/srepl/fixes.clj @@ -117,3 +117,20 @@ (l/trc :hint "file repaired" :file-id (str (:id file)))) file')) + +(defn fix-touched-shapes-group + [file _] + ;; Remove :shapes-group from the touched elements + (letfn [(fix-fdata [data] + (-> data + (update :pages-index update-vals fix-container))) + + (fix-container [container] + (d/update-when container :objects update-vals fix-shape)) + + (fix-shape [shape] + (d/update-when shape :touched + (fn [touched] + (disj touched :shapes-group))))] + file (-> file + (update :data fix-fdata)))) \ No newline at end of file diff --git a/common/src/app/common/files/migrations.cljc b/common/src/app/common/files/migrations.cljc index 2823bf3e21..8ba0857802 100644 --- a/common/src/app/common/files/migrations.cljc +++ b/common/src/app/common/files/migrations.cljc @@ -492,9 +492,11 @@ [data] (some-> cfeat/*new* (swap! conj "fdata/shape-data-type")) (letfn [(update-object [object] - (-> object - (d/update-when :selrect grc/make-rect) - (cts/map->Shape))) + (if (cfh/root? object) + object + (-> object + (update :selrect grc/make-rect) + (cts/map->Shape)))) (update-container [container] (d/update-when container :objects update-vals update-object))] (-> data diff --git a/common/src/app/common/geom/proportions.cljc b/common/src/app/common/geom/proportions.cljc index 7afaeef4da..c884aa3693 100644 --- a/common/src/app/common/geom/proportions.cljc +++ b/common/src/app/common/geom/proportions.cljc @@ -4,7 +4,9 @@ ;; ;; Copyright (c) KALEIDOS INC -(ns app.common.geom.proportions) +(ns app.common.geom.proportions + (:require + [app.common.data :as d])) ;; --- Proportions @@ -36,7 +38,8 @@ (defn setup-proportions [{:keys [type] :as shape}] - (let [image-fill? (every? #(some? (:fill-image %)) (:fills shape))] + (let [image-fill? (and (d/not-empty? (:fills shape)) + (every? #(some? (:fill-image %)) (:fills shape)))] (cond (= type :svg-raw) (setup-proportions-size shape) (= type :image) (setup-proportions-image shape) diff --git a/common/src/app/common/geom/rect.cljc b/common/src/app/common/geom/rect.cljc index ce01fb0cb1..48d620adfc 100644 --- a/common/src/app/common/geom/rect.cljc +++ b/common/src/app/common/geom/rect.cljc @@ -63,10 +63,11 @@ (make-rect x1 y1 (- x2 x1) (- y2 y1)))) ([x y width height] - (when (d/num? x y width height) + (if (d/num? x y width height) (let [w (mth/max width 0.01) h (mth/max height 0.01)] - (pos->Rect x y w h x y (+ x w) (+ y h)))))) + (pos->Rect x y w h x y (+ x w) (+ y h))) + (make-rect)))) (def ^:private schema:rect-attrs [:map {:title "RectAttrs"} diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index 854d24440c..6935c0d971 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -17,7 +17,7 @@ (if (cfh/path-shape? shape) ;; TODO: Calculate with the stroke offset (not implemented yet) (+ stroke-width (mth/sqrt (* 2 stroke-width stroke-width))) - (- (mth/sqrt (* 2 stroke-width stroke-width)) stroke-width))) + (mth/sqrt (* 2 stroke-width stroke-width)))) (defn- apply-filters [attr type filters] diff --git a/common/src/app/common/geom/shapes/path.cljc b/common/src/app/common/geom/shapes/path.cljc index d3a00953d2..941b3ffc2f 100644 --- a/common/src/app/common/geom/shapes/path.cljc +++ b/common/src/app/common/geom/shapes/path.cljc @@ -7,6 +7,7 @@ (ns app.common.geom.shapes.path (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.common.geom.matrix :as gmt] [app.common.geom.point :as gpt] [app.common.geom.rect :as grc] @@ -975,7 +976,7 @@ flip-y (gmt/scale (gpt/point 1 -1)) :always (gmt/multiply (:transform-inverse shape (gmt/matrix)))) - center (or (gco/shape->center shape) + center (or (some-> (dm/get-prop shape :selrect) grc/rect->center) (content-center content)) base-content (transform-content diff --git a/common/src/app/common/types/component.cljc b/common/src/app/common/types/component.cljc index 42b48dd119..ec9a679a9f 100644 --- a/common/src/app/common/types/component.cljc +++ b/common/src/app/common/types/component.cljc @@ -94,7 +94,8 @@ :layout-item-max-w :layout-item-max-w :layout-item-min-w :layout-item-min-w :layout-item-absolute :layout-item-absolute - :layout-item-z-index :layout-item-z-index}) + :layout-item-z-index :layout-item-z-index + :layout-item-align-self :layout-item-align-self}) (def swap-keep-attrs #{:layout-item-margin @@ -106,7 +107,8 @@ :layout-item-max-w :layout-item-min-w :layout-item-absolute - :layout-item-z-index}) + :layout-item-z-index + :layout-item-align-self}) (defn instance-root? "Check if this shape is the head of a top instance." diff --git a/frontend/resources/images/beforeyoustartilustration.svg b/frontend/resources/images/beforeyoustartilustration.svg new file mode 100644 index 0000000000..970ed61066 --- /dev/null +++ b/frontend/resources/images/beforeyoustartilustration.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/resources/images/icons/detached-refactor.svg b/frontend/resources/images/icons/detached-refactor.svg new file mode 100644 index 0000000000..440090c09d --- /dev/null +++ b/frontend/resources/images/icons/detached-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/welcomeilustration.svg b/frontend/resources/images/welcomeilustration.svg new file mode 100644 index 0000000000..18ced86fa1 --- /dev/null +++ b/frontend/resources/images/welcomeilustration.svg @@ -0,0 +1,52 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 4dd70f8569..6434012ef2 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -39,7 +39,7 @@ @include buttonStyle; @include flexCenter; @include focusPrimary; - @include tabTitleTipography; + @include uppercaseTitleTipography; background-color: var(--button-primary-background-color-rest); border: $s-1 solid var(--button-primary-border-color-rest); color: var(--button-primary-foreground-color-rest); @@ -130,6 +130,8 @@ color: var(--button-tertiary-foreground-color-rest); background-color: transparent; border: var(--button-tertiary-border-width) solid transparent; + display: grid; + place-content: center; svg, span svg { stroke: var(--button-tertiary-foreground-color-rest); @@ -276,7 +278,7 @@ // INPUTS .input-base { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; // @include focusInput; height: $s-28; @@ -302,7 +304,7 @@ } .input-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; @include flexCenter; width: $s-20; padding-left: $s-8; @@ -311,7 +313,7 @@ } .input-element { - @include titleTipography; + @include bodyMedTipography; @include focusInput; display: flex; align-items: center; @@ -381,7 +383,7 @@ } .input-element-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: flex-start; padding: 0; @@ -486,7 +488,7 @@ display: flex; align-items: center; label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-6; @@ -517,7 +519,7 @@ display: flex; flex-direction: column; label { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; justify-content: flex-start; @@ -527,7 +529,7 @@ input { @extend .input-base; - @include titleTipography; + @include bodyMedTipography; border-radius: $br-8; height: $s-32; min-height: $s-32; @@ -604,7 +606,7 @@ } .modal-hint-base { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); border-top: $s-1 solid var(--modal-hint-border-color); border-bottom: $s-1 solid var(--modal-hint-border-color); @@ -618,7 +620,7 @@ .modal-cancel-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -627,7 +629,7 @@ .modal-accept-btn { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -636,7 +638,7 @@ .modal-danger-btn { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-24; border-radius: $br-8; height: $s-32; @@ -664,7 +666,7 @@ } // UI ELEMENTS .asset-element { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-32; @@ -685,7 +687,7 @@ } .shortcut-key-base { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-20; padding: $s-2 $s-6; @@ -695,7 +697,7 @@ .user-icon { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-24; width: $s-24; border-radius: $br-circle; @@ -707,7 +709,7 @@ } .mixed-bar { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; flex-grow: 1; @@ -783,7 +785,7 @@ gap: $s-4; height: $s-32; :global(.attr-label) { - @include titleTipography; + @include bodyMedTipography; @include twoLineTextEllipsis; width: $s-92; margin: auto 0; @@ -795,12 +797,12 @@ grid-area: content; display: flex; color: var(--entry-foreground-color-hover); - @include titleTipography; + @include bodyMedTipography; } } .copy-button-children { - @include titleTipography; + @include bodyMedTipography; color: var(--color-foreground-primary); text-align: left; margin: 0; @@ -814,7 +816,7 @@ } .comment-bubbles { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-32; width: $s-32; @@ -849,7 +851,7 @@ } .menu-item-base { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; @@ -864,7 +866,7 @@ } .dropdown-element-base { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-8; @@ -911,7 +913,7 @@ } .select-wrapper { - @include titleTipography; + @include bodyMedTipography; position: relative; display: flex; align-items: center; diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index b2e0cc7ab4..22fa83699f 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -10,6 +10,7 @@ // DARK // Dark background --db-primary: #18181a; + --db-primary-60: #{color.change(#18181a, $alpha: 0.6)}; --db-secondary: #000000; --db-secondary-30: #{color.change(#000000, $alpha: 0.3)}; --db-secondary-80: #{color.change(#000000, $alpha: 0.8)}; @@ -33,6 +34,7 @@ // LIGHT // Light background --lb-primary: #ffffff; + --lb-primary-60: #{color.change(#ffffff, $alpha: 0.6)}; --lb-secondary: #e8eaee; --lb-secondary-30: #{color.change(#e8eaee, $alpha: 0.3)}; --lb-secondary-80: #{color.change(#e8eaee, $alpha: 0.8)}; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index f9c6f84b6a..6c0cf1e854 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -308,6 +308,7 @@ --modal-button-foreground-color-error: var(--color-foreground-primary); --modal-link-foreground-color: var(--color-accent-primary); --modal-border-color: var(--color-background-quaternary); + --modal-separator-backogrund-color: var(--color-background-quaternary); // ALERTS NOTIFICATION TOAST & STATUS WIDGET --alert-background-color-success: var(--status-color-success-500); diff --git a/frontend/resources/styles/common/refactor/fonts.scss b/frontend/resources/styles/common/refactor/fonts.scss index c4bc4cb3fd..81a8b5f670 100644 --- a/frontend/resources/styles/common/refactor/fonts.scss +++ b/frontend/resources/styles/common/refactor/fonts.scss @@ -16,6 +16,7 @@ $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-20: math.div(20, $fs-base) + rem; $fs-24: math.div(24, $fs-base) + rem; $fs-36: math.div(36, $fs-base) + rem; diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 2b9a05efd5..25301cc903 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -34,7 +34,7 @@ outline: none; } -@mixin tabTitleTipography { +@mixin uppercaseTitleTipography { font-family: "worksans", sans-serif; font-size: $fs-11; font-weight: $fw500; @@ -42,20 +42,6 @@ text-transform: uppercase; } -@mixin titleTipography { - font-family: "worksans", sans-serif; - font-size: $fs-12; - font-weight: $fw400; - line-height: 1.2; -} - -@mixin medTitleTipography { - font-family: "worksans", sans-serif; - font-size: $fs-14; - font-weight: $fw400; - line-height: 1.2; -} - @mixin bigTitleTipography { font-family: "worksans", sans-serif; font-size: $fs-24; @@ -63,9 +49,16 @@ line-height: 1.2; } -@mixin codeTypography { - font-family: "robotomono", monospace; - font-size: $fs-12; +@mixin medTitleTipography { + font-family: "worksans", sans-serif; + font-size: $fs-20; + font-weight: $fw400; + line-height: 1.2; +} + +@mixin smallTitleTipography { + font-family: "worksans", sans-serif; + font-size: $fs-14; font-weight: $fw400; line-height: 1.2; } @@ -85,6 +78,20 @@ font-weight: normal; } +@mixin bodyMedTipography { + font-family: "worksans", sans-serif; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + +@mixin codeTypography { + font-family: "robotomono", monospace; + font-size: $fs-12; + font-weight: $fw400; + line-height: 1.2; +} + @mixin textEllipsis { max-width: 99%; overflow: hidden; @@ -103,7 +110,7 @@ } @mixin inspectValue { - @include titleTipography; + @include bodyMedTipography; display: inline-block; width: fit-content; padding: 0; diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index 807214c7f0..2a2eed4572 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -141,12 +141,21 @@ $s-496: #{0.25 * 124}rem; $s-500: #{0.25 * 125}rem; $s-512: #{0.25 * 128}rem; $s-520: #{0.25 * 130}rem; +$s-536: #{0.25 * 134}rem; +$s-540: #{0.25 * 135}rem; +$s-548: #{0.25 * 137}rem; $s-580: #{0.25 * 145}rem; $s-612: #{0.25 * 153}rem; +$s-632: #{0.25 * 158}rem; $s-640: #{0.25 * 160}rem; +$s-648: #{0.25 * 162}rem; $s-664: #{0.25 * 166}rem; $s-688: #{0.25 * 172}rem; $s-712: #{0.25 * 178}rem; $s-736: #{0.25 * 184}rem; +$s-744: #{0.25 * 186}rem; $s-800: #{0.25 * 200}rem; +$s-908: #{0.25 * 227}rem; +$s-960: #{0.25 * 240}rem; +$s-968: #{0.25 * 242}rem; $s-1000: #{0.25 * 250}rem; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 64dafa89b9..8f7dd01728 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -24,7 +24,7 @@ --color-accent-quaternary: var(--da-quaternary); --color-component-highlight: var(--da-secondary); - --overlay-color: rgba(0, 0, 0, 0.4); + --overlay-color: var(--db-primary-60); --shadow-color: var(--db-secondary-30); --radio-button-box-shadow: 0 0 0 1px var(--db-secondary-30) inset; diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index e2fe1b643e..86e3ae7c8b 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -24,7 +24,7 @@ --color-accent-quaternary: var(--la-quaternary); --color-component-highlight: var(--la-secondary); - --overlay-color: var(--lf-secondary-50); + --overlay-color: var(--lb-primary-60); --shadow-color: var(--lf-secondary-40); --radio-button-box-shadow: 0 0 0 1px var(--lb-secondary) inset; diff --git a/frontend/src/app/main/data/workspace.cljs b/frontend/src/app/main/data/workspace.cljs index 31c2f20bea..3b464cb825 100644 --- a/frontend/src/app/main/data/workspace.cljs +++ b/frontend/src/app/main/data/workspace.cljs @@ -593,20 +593,21 @@ (defn rename-file [id name] {:pre [(uuid? id) (string? name)]} - (ptk/reify ::rename-file - IDeref - (-deref [_] - {::ev/origin "workspace" :id id :name name}) + (let [name (str/prune name 200)] + (ptk/reify ::rename-file + IDeref + (-deref [_] + {::ev/origin "workspace" :id id :name name}) - ptk/UpdateEvent - (update [_ state] - (assoc-in state [:workspace-file :name] name)) + ptk/UpdateEvent + (update [_ state] + (assoc-in state [:workspace-file :name] name)) - ptk/WatchEvent - (watch [_ _ _] - (let [params {:id id :name name}] - (->> (rp/cmd! :rename-file params) - (rx/ignore)))))) + ptk/WatchEvent + (watch [_ _ _] + (let [params {:id id :name name}] + (->> (rp/cmd! :rename-file params) + (rx/ignore))))))) ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; Workspace State Manipulation diff --git a/frontend/src/app/main/data/workspace/interactions.cljs b/frontend/src/app/main/data/workspace/interactions.cljs index 2bdc9f2e18..9c85ffcd36 100644 --- a/frontend/src/app/main/data/workspace/interactions.cljs +++ b/frontend/src/app/main/data/workspace/interactions.cljs @@ -27,6 +27,11 @@ (defn add-flow [starting-frame] + + (dm/assert! + "expect uuid" + (uuid? starting-frame)) + (ptk/reify ::add-flow ptk/WatchEvent (watch [it state _] diff --git a/frontend/src/app/main/data/workspace/libraries_helpers.cljs b/frontend/src/app/main/data/workspace/libraries_helpers.cljs index ec6d8bf914..47b805b091 100644 --- a/frontend/src/app/main/data/workspace/libraries_helpers.cljs +++ b/frontend/src/app/main/data/workspace/libraries_helpers.cljs @@ -1445,19 +1445,18 @@ (defn- update-flex-child-copy-attrs "Synchronizes the attributes inside the flex-child items (main->copy)" [changes _shape-main shape-copy main-container main-component copy-container omit-touched?] - (let [do-changes - (fn [cc] - (-> cc - (pcb/with-container copy-container) - (pcb/with-objects (:objects copy-container)) - (pcb/update-shapes - (:shapes shape-copy) - (fn [child-copy] - (let [child-main (ctf/get-ref-shape main-container main-component child-copy)] - (-> child-copy - (propagate-attrs child-main ctk/swap-keep-attrs omit-touched?)))) - {:ignore-touched true})))] - (pcb/concat-changes changes (do-changes (pcb/empty-changes))))) + (let [new-changes + (-> (pcb/empty-changes) + (pcb/with-container copy-container) + (pcb/with-objects (:objects copy-container)) + (pcb/update-shapes + (:shapes shape-copy) + (fn [child-copy] + (let [child-main (ctf/get-ref-shape main-container main-component child-copy)] + (-> child-copy + (propagate-attrs child-main ctk/swap-keep-attrs omit-touched?)))) + {:ignore-touched true}))] + (pcb/concat-changes changes new-changes))) (defn- update-flex-child-main-attrs "Synchronizes the attributes inside the flex-child items (copy->main)" diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 54397b2f30..8df110920c 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -144,7 +144,8 @@ (remove nil?)) used (into #{} xfm presence) avail (set/difference presence-palette used)] - (or (first avail) "var(--app-black)"))) + ;; If all colores are used we select the default one + (or (first avail) "#dee563"))) (update-color [color presence] (if (some? color) @@ -158,7 +159,7 @@ (assoc :updated-at (dt/now)) (assoc :version version) (update :color update-color presence) - (assoc :text-color "#000"))) + (assoc :text-color "#000000"))) (update-presence [presence] (-> presence diff --git a/frontend/src/app/main/data/workspace/shortcuts.cljs b/frontend/src/app/main/data/workspace/shortcuts.cljs index ccbb35e7db..73d22afa0d 100644 --- a/frontend/src/app/main/data/workspace/shortcuts.cljs +++ b/frontend/src/app/main/data/workspace/shortcuts.cljs @@ -56,8 +56,8 @@ :subsections [:edit] :fn #(emit-when-no-readonly dwc/redo)} - :clear-undo {:tooltip (ds/alt "Z") - :command "alt+z" + :clear-undo {:tooltip (ds/alt "Q") + :command "alt+q" :subsections [:edit] :fn #(emit-when-no-readonly dwu/reinitialize-undo)} diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index be312cae21..60fc6f6be3 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -509,18 +509,19 @@ (mf/deps objects) (fn [] (frame-wrapper-factory objects)))] - [:> "symbol" #js {:id (str (:id component)) - :viewBox vbox - "penpot:path" path - "penpot:main-instance-id" main-instance-id - "penpot:main-instance-page" main-instance-page - "penpot:main-instance-x" main-instance-x - "penpot:main-instance-y" main-instance-y} - [:title name] - [:> shape-container {:shape root-shape} - (case (:type root-shape) - :group [:& group-wrapper {:shape root-shape :view-box vbox}] - :frame [:& frame-wrapper {:shape root-shape :view-box vbox}])]])) + (when root-shape + [:> "symbol" #js {:id (str (:id component)) + :viewBox vbox + "penpot:path" path + "penpot:main-instance-id" main-instance-id + "penpot:main-instance-page" main-instance-page + "penpot:main-instance-x" main-instance-x + "penpot:main-instance-y" main-instance-y} + [:title name] + [:> shape-container {:shape root-shape} + (case (:type root-shape) + :group [:& group-wrapper {:shape root-shape :view-box vbox}] + :frame [:& frame-wrapper {:shape root-shape :view-box vbox}])]]))) (mf/defc components-svg {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui.cljs b/frontend/src/app/main/ui.cljs index 8d6306075a..88f10e2935 100644 --- a/frontend/src/app/main/ui.cljs +++ b/frontend/src/app/main/ui.cljs @@ -16,7 +16,6 @@ [app.main.ui.icons :as i] [app.main.ui.messages :as msgs] [app.main.ui.onboarding :refer [onboarding-modal]] - [app.main.ui.onboarding.questions :refer [questions-modal]] [app.main.ui.releases :refer [release-notes-modal]] [app.main.ui.static :as static] [app.util.dom :as dom] @@ -98,11 +97,6 @@ #_[:& app.main.ui.onboarding.team-choice/onboarding-team-modal] (when-let [props (get profile :props)] (cond - (and (contains? cf/flags :onboarding-questions) - (not (:onboarding-questions-answered props false)) - (not (:onboarding-viewed props false))) - [:& questions-modal] - (and (not (:onboarding-viewed props)) (contains? cf/flags :onboarding)) [:& onboarding-modal {}] diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss index 2c5e2275f5..a8887da8a3 100644 --- a/frontend/src/app/main/ui/comments.scss +++ b/frontend/src/app/main/ui/comments.scss @@ -19,7 +19,7 @@ } .section-title { - @include titleTipography; + @include bodyMedTipography; height: $s-32; display: flex; align-items: center; @@ -55,7 +55,7 @@ // Comment-thread .comment { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; gap: $s-12; @@ -98,7 +98,7 @@ } .content { - @include titleTipography; + @include bodyMedTipography; color: var(--color-foreground-primary); } @@ -151,7 +151,7 @@ .comment-container { position: relative; .comment { - @include titleTipography; + @include bodyMedTipography; .author { display: flex; gap: $s-8; @@ -195,7 +195,7 @@ .content { position: relative; .text { - @include titleTipography; + @include bodyMedTipography; } } } diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss index 2dddb14b91..ba0cc18fc9 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -71,7 +71,7 @@ .color-text { @include twoLineTextEllipsis; - @include titleTipography; + @include bodyMedTipography; width: $s-80; text-align: center; margin-top: $s-2; diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss index 2aa9fcea96..f08b5c307a 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.scss +++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss @@ -46,7 +46,7 @@ .context-menu-item { display: flex; .context-menu-action { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss index 168d73ad14..8dab5e8aed 100644 --- a/frontend/src/app/main/ui/components/editable_label.scss +++ b/frontend/src/app/main/ui/components/editable_label.scss @@ -8,7 +8,7 @@ .editable-label-input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index bdebae9794..d1f09ca60b 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -214,7 +214,7 @@ [:span {:class (stl/css :hint)} hint])])) (mf/defc select - [{:keys [options disabled form default] :as props + [{:keys [options disabled form default dropdown-class] :as props :or {default ""}}] (let [input-name (get props :name) form (or form (mf/use-ctx form-ctx)) @@ -230,6 +230,7 @@ {:default-value value :disabled disabled :options options + :dropdown-class dropdown-class :on-change handle-change}]])) (mf/defc radio-buttons @@ -244,6 +245,7 @@ on-change (unchecked-get props "on-change") options (unchecked-get props "options") trim? (unchecked-get props "trim") + class (unchecked-get props "class") encode-fn (d/nilv (unchecked-get props "encode-fn") identity) decode-fn (d/nilv (unchecked-get props "decode-fn") identity) @@ -258,31 +260,39 @@ (when (fn? on-change) (on-change name value)))))] - [:div {:class (stl/css :custom-radio)} - (for [{:keys [image value label]} options] + [:div {:class (dm/str class " " (stl/css :custom-radio))} + (for [{:keys [image icon value label area]} options] (let [image? (some? image) + icon? (some? icon) value' (encode-fn value) checked? (= value current-value) key (str/ffmt "%-%" (d/name name) (d/name value'))] [:label {:for key :key key - :style {:background-image (when image? (str/ffmt "url(%)" image))} + :style {:grid-area area} :class (stl/css-case :radio-label true :global/checked checked? - :with-image image?)} + :with-image (or image? icon?))} + (cond + image? + [:span {:style {:background-image (str/ffmt "url(%)" image)} + :class (stl/css :image-inside)}] + icon? + [:span {:class (stl/css :icon-inside)} icon] + + :else + [:span {:class (stl/css-case :radio-icon true + :global/checked checked?)} + (when checked? [:span {:class (stl/css :radio-dot)}])]) + + label [:input {:on-change on-change' :type "radio" :class (stl/css :radio-input) :id key :name name :value value' - :checked checked?}] - (when (not image?) - [:span {:class (stl/css-case :radio-icon true - :global/checked checked?)} - (when checked? [:span {:class (stl/css :radio-dot)}])]) - - label]))])) + :checked checked?}]]))])) (mf/defc submit-button* {::mf/wrap-props false} diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index ccfc5cf0bc..433d61cdff 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -12,46 +12,6 @@ flex-direction: column; align-items: center; position: relative; - .input-with-label { - @include flexColumn; - gap: $s-8; - @include titleTipography; - justify-content: flex-start; - align-items: flex-start; - height: 100%; - width: 100%; - padding: 0; - cursor: pointer; - color: var(--modal-title-foreground-color); - text-transform: uppercase; - margin-bottom: $s-8; - input { - @extend .input-element; - color: var(--input-foreground-color-active); - margin-top: 0; - width: 100%; - height: 100%; - padding: 0 $s-16; - - &:focus { - outline: none; - border: $s-1 solid var(--input-border-color-focus); - border-radius: $br-8; - } - } - // Input autofill - input:-webkit-autofill, - input:-webkit-autofill:hover, - input:-webkit-autofill:focus, - input:-webkit-autofill:active { - -webkit-text-fill-color: var(--input-foreground-color-active); - -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); - border: $s-1 solid var(--input-border-color); - -webkit-background-clip: text; - transition: background-color 5000s ease-in-out 0s; - caret-color: var(--input-foreground-color-active); - } - } &.valid { input { border: $s-1 solid var(--input-border-color-success); @@ -78,11 +38,52 @@ } } +.input-with-label { + @include flexColumn; + gap: $s-8; + @include bodyMedTipography; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + width: 100%; + padding: 0; + cursor: pointer; + color: var(--modal-title-foreground-color); + text-transform: uppercase; + margin-bottom: $s-8; + input { + @extend .input-element; + color: var(--input-foreground-color-active); + margin-top: 0; + width: 100%; + height: 100%; + padding: 0 $s-8; + + &:focus { + outline: none; + border: $s-1 solid var(--input-border-color-focus); + border-radius: $br-8; + } + } + // Input autofill + input:-webkit-autofill, + input:-webkit-autofill:hover, + input:-webkit-autofill:focus, + input:-webkit-autofill:active { + -webkit-text-fill-color: var(--input-foreground-color-active); + -webkit-box-shadow: inset 0 0 20px 20px var(--input-background-color); + border: $s-1 solid var(--input-border-color); + -webkit-background-clip: text; + transition: background-color 5000s ease-in-out 0s; + caret-color: var(--input-foreground-color-active); + } +} + .input-and-icon { position: relative; width: var(--input-width, calc(100% - $s-1)); min-width: var(--input-min-width); - height: var(--input-height, $s-40); + height: var(--input-height, $s-32); } .help-icon { @@ -142,7 +143,7 @@ } .hint { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); width: 99%; } @@ -150,7 +151,7 @@ .checkbox { @extend .input-checkbox; .checkbox-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; flex-direction: row-reverse; @@ -185,7 +186,7 @@ background-color: var(--input-background-color); .main-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; position: relative; justify-content: center; flex-grow: 1; @@ -230,7 +231,7 @@ select { @extend .menu-dropdown; - @include titleTipography; + @include bodyMedTipography; box-sizing: border-box; position: absolute; top: 0; @@ -246,7 +247,7 @@ background-color: transparent; cursor: pointer; option { - @include titleTipography; + @include bodyMedTipography; color: var(--title-foreground-color-hover); background-color: var(--menu-background-color); appearance: none; @@ -271,7 +272,7 @@ overflow-y: hidden; .inside-input { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; width: 100%; max-width: calc(100% - $s-1); @@ -281,6 +282,7 @@ padding: $s-8; margin: 0; border-radius: $br-8; + color: var(--input-foreground-color-active); background-color: var(--input-background-color); border: $s-1 solid var(--input-border-color-active); &:focus { @@ -309,7 +311,7 @@ border: $s-1 solid var(--pill-background-color); box-sizing: border-box; .text { - @include titleTipography; + @include bodyMedTipography; padding-right: $s-8; color: var(--pill-foreground-color); } @@ -342,15 +344,20 @@ .custom-radio { display: grid; grid-template-columns: repeat(3, 1fr); + gap: $s-16; } .radio-label { - @include titleTipography; + @include bodyMedTipography; @include flexRow; + align-items: flex-start; + gap: $s-8; min-height: $s-32; + height: fit-content; border-radius: $br-8; - padding: $s-0 $s-2; + padding: $s-8; color: var(--input-foreground-color); + border: $s-1 solid transparent; &:focus, &:focus-within { outline: none; @@ -376,18 +383,16 @@ } .radio-label.with-image { - display: flex; - justify-content: center; - height: $s-120; - width: $s-140; - padding: $s-64 $s-4 0 $s-4; - margin-top: $s-16; - margin-right: 0; + @include smallTitleTipography; + display: grid; + grid-template-rows: auto auto 0px; + justify-items: center; + gap: 0; + height: $s-116; + width: $s-92; border-radius: $br-8; + margin: 0; border: 1px solid var(--color-background-tertiary); - background-size: 50px; - background-repeat: no-repeat; - background-position: center 0.75rem; cursor: pointer; &:global(.checked) { border: 1px solid var(--color-accent-primary); @@ -399,10 +404,28 @@ } } +.image-inside { + width: $s-60; + height: $s-48; + background-size: $s-48; + background-repeat: no-repeat; + background-position: center; +} + +.icon-inside { + width: $s-60; + height: $s-48; + svg { + width: $s-60; + height: $s-48; + stroke: var(--icon-foreground); + fill: none; + } +} //TEXTAREA .textarea-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); text-transform: uppercase; margin-bottom: $s-8; diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index ae7d9dbabd..6c7d3c73a2 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -59,7 +59,7 @@ (mf/defc radio-buttons {::mf/props :obj} - [{:keys [children on-change selected class wide encode-fn decode-fn] :as props}] + [{:keys [children on-change selected class wide encode-fn decode-fn allow-empty] :as props}] (let [encode-fn (d/nilv encode-fn identity) decode-fn (d/nilv decode-fn identity) nitems (if (array? children) @@ -75,14 +75,17 @@ on-change' (mf/use-fn - (mf/deps on-change) + (mf/deps selected on-change) (fn [event] (let [input (dom/get-target event) value (dom/get-target-val event) - value (when (not= value selected) value)] + + ;; Only allow null values when the "allow-empty" prop is true + value (when (or (not allow-empty) + (not= value selected)) value)] (when (fn? on-change) - (on-change (decode-fn value) event) - (dom/blur! input))))) + (on-change (decode-fn value) event)) + (dom/blur! input)))) context-value (mf/spread-obj props {:on-change on-change' diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 62e5c612f6..521a57885b 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -21,7 +21,6 @@ flex-grow: 1; border-radius: $s-8; box-sizing: border-box; - border: $s-2 solid var(--radio-btn-border-color); input { display: none; } @@ -30,7 +29,7 @@ stroke: var(--radio-btn-foreground-color); } .title-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--radio-btn-foreground-color); } &:hover { diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index ffacb70559..51c7874b4f 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -107,7 +107,7 @@ [:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:& dropdown {:show is-open? :on-close close-dropdown} [:ul {:ref dropdown-element* :data-direction @dropdown-direction* - :class (dm/str (stl/css :custom-select-dropdown) " " dropdown-class)} + :class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))} (for [[index item] (d/enumerate options)] (if (= :separator item) [:li {:class (dom/classnames (stl/css :separator) true) @@ -116,9 +116,10 @@ icon-ref (i/key->icon icon)] [:li {:key (dm/str current-id "-" index) - :class (dom/classnames - (stl/css :checked-element) true - (stl/css :is-selected) (= value current-value)) + :class (stl/css-case + :checked-element true + :disabled (:disabled item) + :is-selected (= value current-value)) :data-value (pr-str value) :on-pointer-enter highlight-item :on-pointer-leave unhighlight-item diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index e904c48ba6..31aba1991d 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -7,7 +7,12 @@ @import "refactor/common-refactor.scss"; .custom-select { - @include titleTipography; + --border-color: var(--menu-background-color); + --bg-color: var(--menu-background-color); + --icon-color: var(--icon-foreground); + --text-color: var(--menu-foreground-color); + @extend .new-scrollbar; + @include bodyMedTipography; position: relative; display: grid; grid-template-columns: 1fr auto; @@ -17,104 +22,105 @@ margin: 0; padding: $s-8; border-radius: $br-8; - background-color: var(--menu-background-color); - border: $s-1 solid var(--menu-background-color); - color: var(--menu-foreground-color); + background-color: var(--bg-color); + border: $s-1 solid var(--border-color); + color: var(--text-color); cursor: pointer; &.icon { grid-template-columns: auto 1fr auto; } - .current-icon { + &:hover { + --bg-color: var(--menu-background-color-hover); + --border-color: var(--menu-background-color); + --icon-color: var(--menu-foreground-color-hover); + } + + &:focus { + --bg-color: var(--menu-background-color-focus); + --border-color: var(--menu-background-focus); + } +} + +.disabled { + --bg-color: var(--menu-background-color-disabled); + --border-color: var(--menu-border-color-disabled); + --icon-color: var(--menu-foreground-color-disabled); + --text-color: var(--menu-foreground-color-disabled); + pointer-events: none; + cursor: default; +} + +.dropdown-button { + @include flexCenter; + svg { + @extend .button-icon-small; + transform: rotate(90deg); + stroke: var(--icon-color); + } +} + +.current-icon { + @include flexCenter; + width: $s-24; + padding-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } +} + +.custom-select-dropdown { + @extend .dropdown-wrapper; + .separator { + margin: 0; + height: $s-12; + border-block-start: $s-1 solid var(--dropdown-separator-color); + } +} + +.custom-select-dropdown[data-direction="up"] { + bottom: $s-32; + top: auto; +} + +.checked-element { + @extend .dropdown-element-base; + .icon { @include flexCenter; + height: $s-24; width: $s-24; padding-right: $s-4; svg { - @extend .button-icon-small; + @extend .button-icon; stroke: var(--icon-foreground); } } - .dropdown-button { + + .label { + flex-grow: 1; + width: 100%; + } + + .check-icon { @include flexCenter; svg { @extend .button-icon-small; - transform: rotate(90deg); + visibility: hidden; stroke: var(--icon-foreground); } } - .custom-select-dropdown { - @extend .dropdown-wrapper; - .separator { - margin: 0; - height: $s-12; - border-top: $s-1 solid var(--dropdown-separator-color); - } - } - .custom-select-dropdown[data-direction="up"] { - bottom: $s-32; - top: auto; - } - - .checked-element { - @extend .dropdown-element-base; - .icon { - @include flexCenter; - height: $s-24; - width: $s-24; - padding-right: $s-4; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } + &.is-selected { + color: var(--menu-foreground-color); + .check-icon svg { + stroke: var(--menu-foreground-color); + visibility: visible; } - - .label { - flex-grow: 1; - width: 100%; - } - - .check-icon { - @include flexCenter; - svg { - @extend .button-icon-small; - visibility: hidden; - stroke: var(--icon-foreground); - } - } - - &.is-selected { - color: var(--menu-foreground-color); - .check-icon svg { - stroke: var(--menu-foreground-color); - visibility: visible; - } - } - } - - &:hover { - background-color: var(--menu-background-color-hover); - border: $s-1 solid var(--menu-background-color-hover); - .dropdown-button { - svg { - stroke: var(--menu-foreground-color-hover); - } - } - } - &:focus { - background-color: var(--menu-background-color-focus); - border: $s-1 solid var(--menu-border-color-focus); } &.disabled { - background-color: var(--menu-background-color-disabled); - color: var(--menu-foreground-color-disabled); - border: $s-1 solid var(--menu-border-color-disabled); - pointer-events: none; - cursor: default; - .dropdown-button svg { - stroke: var(--menu-foreground-color-disabled); - } + display: none; } } diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index d859680cfc..86ac4c4f36 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -28,7 +28,7 @@ width: 100%; .tab-container-tab-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: 100%; width: 100%; padding: 0 $s-8; diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index dcce616781..7c7a50af35 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -11,10 +11,13 @@ [app.main.ui.icons :as i] [rumext.v2 :as mf])) +(def ^:private chevron-icon + (i/icon-xref :arrow-refactor (stl/css :chevron-icon))) + (mf/defc title-bar {::mf/wrap-props false} [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}] - (let [klass (dm/str (stl/css :title-bar) " " class)] + (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)] [:div {:class klass} (if ^boolean collapsable [:div {:class (stl/css :title-wrapper)} @@ -23,15 +26,15 @@ :on-click on-collapsed} [:span {:class (stl/css-case :collapsabled-icon true - :rotated collapsed)} - i/arrow-refactor] + :collapsed collapsed)} + chevron-icon] [:div {:class (stl/css :title)} title]] [:* [:button {:class (stl/css-case :collapsabled-icon true - :rotated collapsed) + :collapsed collapsed) :on-click on-collapsed} - i/arrow-refactor] + chevron-icon] [:div {:class (stl/css :title)} title]])] [:div {:class (stl/css-case :title-only true :title-only-icon-gap add-icon-gap diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index bfbd756fcd..2ff458ded1 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -19,7 +19,7 @@ .title, .title-only, .inspect-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; @@ -45,63 +45,12 @@ color: var(--title-foreground-color); stroke: var(--title-foreground-color); overflow: hidden; - .toggle-btn { - @include buttonStyle; - display: flex; - align-items: center; - flex-grow: 1; - padding: 0; - color: var(--title-foreground-color); - stroke: var(--title-foreground-color); - overflow: hidden; - .collapsabled-icon { - @include flexCenter; - height: $s-24; - border-radius: $br-8; - svg { - @extend .button-icon-small; - transform: rotate(90deg); - stroke: var(--icon-foreground); - } - &.rotated svg { - transform: rotate(0deg); - } - } - &:hover { - color: var(--title-foreground-color-hover); - stroke: var(--title-foreground-color-hover); - .title { - color: var(--title-foreground-color-hover); - stroke: var(--title-foreground-color-hover); - } - .collapsabled-icon svg { - stroke: var(--title-foreground-color-hover); - } - } - } - .collapsabled-icon { - @include buttonStyle; - @include flexCenter; - height: $s-24; - border-radius: $br-8; - svg { - @extend .button-icon-small; - transform: rotate(90deg); - stroke: var(--icon-foreground); - } - &.rotated svg { - transform: rotate(0deg); - } - } + &:hover { color: var(--title-foreground-color-hover); - stroke: var(--title-foreground-color-hover); .title { stroke: var(--title-foreground-color-hover); } - .collapsabled-icon svg { - stroke: var(--title-foreground-color-hover); - } } } @@ -119,7 +68,7 @@ .title, .title-only { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; @@ -137,3 +86,49 @@ .title-only-icon-gap { --title-bar-title-margin: #{$s-12}; } + +.toggle-btn { + @include buttonStyle; + display: flex; + align-items: center; + flex-grow: 1; + padding: 0; + color: var(--title-foreground-color); + stroke: var(--title-foreground-color); + overflow: hidden; + + --chevron-icon-color: var(--icon-foreground); + + &:hover { + --chevron-icon-color: var(--title-foreground-color-hover); + + color: var(--title-foreground-color-hover); + .title { + color: var(--title-foreground-color-hover); + stroke: var(--title-foreground-color-hover); + } + } +} + +.collapsabled-icon { + @include buttonStyle; + @include flexCenter; + height: $s-24; + border-radius: $br-8; + + --chevron-icon-rotation: 90deg; + + &.collapsed { + --chevron-icon-rotation: 0deg; + } + + &:hover { + --chevron-icon-color: var(--title-foreground-color-hover); + } +} + +.chevron-icon { + @extend .button-icon-small; + transform: rotate(var(--chevron-icon-rotation)); + stroke: var(--chevron-icon-color); +} diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss index c1f6bf7d9d..d8bdd10d5d 100644 --- a/frontend/src/app/main/ui/dashboard/change_owner.scss +++ b/frontend/src/app/main/ui/dashboard/change_owner.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,7 +28,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss index 4b76f7d6d2..3b50b0e33f 100644 --- a/frontend/src/app/main/ui/dashboard/import.scss +++ b/frontend/src/app/main/ui/dashboard/import.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -28,7 +28,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -51,7 +51,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; } &.warning { background-color: var(--alert-background-color-warning); @@ -79,7 +79,7 @@ .modal-scd-msg, .modal-subtitle, .modal-msg { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); line-height: 1.5; } @@ -105,7 +105,7 @@ flex-grow: 1; } .file-name-label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-12; diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss index 51cd9ac4f0..c5f2661318 100644 --- a/frontend/src/app/main/ui/dashboard/team.scss +++ b/frontend/src/app/main/ui/dashboard/team.scss @@ -612,7 +612,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; color: var(--alert-foreground-color-error); } } @@ -636,7 +636,7 @@ } } .message { - @include titleTipography; + @include bodyMedTipography; color: var(--alert-foreground-color-warning); } } @@ -683,7 +683,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -694,7 +694,7 @@ .modal-content { @include flexColumn; gap: $s-24; - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -703,7 +703,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss index 8f401e2273..573c53304c 100644 --- a/frontend/src/app/main/ui/dashboard/team_form.scss +++ b/frontend/src/app/main/ui/dashboard/team_form.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -35,7 +35,7 @@ @extend .input-element-label; label { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; align-items: flex-start; width: 100%; border: none; @@ -43,7 +43,7 @@ height: 100%; input { - @include titleTipography; + @include bodyMedTipography; margin-top: $s-8; } } diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss index 8b28f3e0f8..2e254fc79d 100644 --- a/frontend/src/app/main/ui/debug/components_preview.scss +++ b/frontend/src/app/main/ui/debug/components_preview.scss @@ -53,7 +53,7 @@ flex-direction: column; border-radius: $s-8; h3 { - @include titleTipography; + @include bodyMedTipography; font-size: $fs-24; width: 100%; } @@ -65,7 +65,7 @@ max-height: $s-80; margin-bottom: $s-16; .component-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; font-weight: bold; } } diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss index bcd69bfba2..0da1500c9a 100644 --- a/frontend/src/app/main/ui/delete_shared.scss +++ b/frontend/src/app/main/ui/delete_shared.scss @@ -31,7 +31,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index f528d2eebb..9918499e9c 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -55,7 +55,7 @@ } .retry-btn { @extend .button-tertiary; - @include titleTipography; + @include bodyMedTipography; } .modal-close-button { @@ -96,10 +96,10 @@ .modal-content, .no-selection { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; .modal-hint { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); } .modal-link { @@ -243,7 +243,6 @@ label { align-items: flex-start; .modal-subtitle { - // @include tabTitleTipography; @include bodyLargeTypography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index edcb1016b3..ee4e65c97e 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -337,6 +337,7 @@ (def ^:icon delete-text-refactor (icon-xref :delete-text-refactor)) (def ^:icon desc-sort-refactor (icon-xref :desc-sort-refactor)) (def ^:icon detach-refactor (icon-xref :detach-refactor)) +(def ^:icon detached-refactor (icon-xref :detached-refactor)) (def ^:icon document-refactor (icon-xref :document-refactor)) (def ^:icon download-refactor (icon-xref :download-refactor)) (def ^:icon drop-refactor (icon-xref :drop-refactor)) diff --git a/frontend/src/app/main/ui/messages.scss b/frontend/src/app/main/ui/messages.scss index 67e68c875b..da126d3c9d 100644 --- a/frontend/src/app/main/ui/messages.scss +++ b/frontend/src/app/main/ui/messages.scss @@ -102,12 +102,12 @@ } .text { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } .link { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-link-foreground-color); margin: 0; } @@ -119,7 +119,7 @@ .action-btn { @extend .button-tertiary; - @include tabTitleTipography; + @include uppercaseTitleTipography; min-height: $s-32; min-width: $s-32; svg { diff --git a/frontend/src/app/main/ui/onboarding.cljs b/frontend/src/app/main/ui/onboarding.cljs index 00a19a11a0..3788ac3f54 100644 --- a/frontend/src/app/main/ui/onboarding.cljs +++ b/frontend/src/app/main/ui/onboarding.cljs @@ -38,48 +38,39 @@ (next))] [:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-left)} - [:img {:src "images/onboarding-welcome.png" + [:img {:src "images/welcomeilustration.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :release)} "Version " (:main cf/version)] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h2 {:class (stl/css :modal-title) - :data-test "onboarding-welcome"} - (tr "onboarding-v2.welcome.title")]] + [:h1 {:class (stl/css :modal-title) + :data-test "onboarding-welcome"} + (tr "onboarding-v2.welcome.title")] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.welcome.desc1")] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.welcome.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/community.svg" - :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:href "https://community.penpot.app/" - :target "_blank" - :on-click #(send-event "onboarding-community-link")} - (tr "onboarding-v2.welcome.desc2.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.welcome.desc2")]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:href "https://community.penpot.app/" + :target "_blank" + :on-click #(send-event "onboarding-community-link")} + (tr "onboarding-v2.welcome.desc2.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.welcome.desc2")]] - [:div {:class (stl/css :property-block)} - [:img {:src "images/contributing.svg" - :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:href "https://help.penpot.app/contributing-guide/" - :target "_blank" :on-click #(send-event "onboarding-contributing-link")} - (tr "onboarding-v2.welcome.desc3.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.welcome.desc3")]]]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:href "https://help.penpot.app/contributing-guide/" + :target "_blank" :on-click #(send-event "onboarding-contributing-link")} + (tr "onboarding-v2.welcome.desc3.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.welcome.desc3")]] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click go-next - :data-test "onboarding-next-btn"} - (tr "labels.continue")]]]])) + [:button {:on-click go-next + :class (stl/css :accept-btn) + :data-test "onboarding-next-btn"} + (tr "labels.continue")]]])) (mf/defc onboarding-before-start [{:keys [next] :as props}] @@ -89,49 +80,44 @@ (next))] [:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-left)} - [:img {:src "images/onboarding-people.png" + [:img {:src "images/beforeyoustartilustration.svg" :border "0" :alt (tr "onboarding.welcome.alt")}]] [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :release)} "Version " (:main cf/version)] - [:div {:class (stl/css :modal-content)} - [:div {:class (stl/css :modal-header)} - [:h2 {:class (stl/css :modal-title) - :data-test "onboarding-welcome"} - (tr "onboarding-v2.before-start.title")]] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.before-start.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/user-guide.svg" :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:class (stl/css :modal-link) - :href "https://help.penpot.app/user-guide/" - :target "_blank" - :on-click #(send-event "onboarding-user-guide-link")} - (tr "onboarding-v2.before-start.desc2.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.before-start.desc2")]]] + [:h1 {:class (stl/css :modal-title) + :data-test "onboarding-welcome"} + (tr "onboarding-v2.before-start.title")] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.before-start.desc1")] - [:div {:class (stl/css :property-block)} - [:img {:src "images/video-tutorials.svg" :border "0"}] - [:div {:class (stl/css :text-wrapper)} - [:div {:class (stl/css :property-title)} - [:a {:class (stl/css :modal-link) - :href "https://www.youtube.com/c/Penpot" - :target "_blank" - :on-click #(send-event "onboarding-video-tutorials-link")} - (tr "onboarding-v2.before-start.desc3.title")]] - [:div {:class (stl/css :property-description)} - (tr "onboarding-v2.before-start.desc3")]]]]] + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:class (stl/css :modal-link) + :href "https://help.penpot.app/user-guide/" + :target "_blank" + :on-click #(send-event "onboarding-user-guide-link")} + (tr "onboarding-v2.before-start.desc2.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.before-start.desc2")]] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click go-next - :data-test "onboarding-next-btn"} - (tr "labels.continue")]]]])) + [:div {:class (stl/css :text-wrapper)} + [:div {:class (stl/css :property-title)} + [:a {:class (stl/css :modal-link) + :href "https://www.youtube.com/c/Penpot" + :target "_blank" + :on-click #(send-event "onboarding-video-tutorials-link")} + (tr "onboarding-v2.before-start.desc3.title")]] + [:div {:class (stl/css :property-description)} + (tr "onboarding-v2.before-start.desc3")]] + + + [:button {:on-click go-next + :class (stl/css :accept-btn) + :data-test "onboarding-next-btn"} + (tr "labels.continue")]]])) (mf/defc onboarding-modal {::mf/register modal/components @@ -149,8 +135,11 @@ (st/emit! (modal/hide) (du/mark-onboarding-as-viewed)) (cond + (contains? cf/flags :onboarding-questions) + (modal/show! {:type :onboarding-questions}) + (contains? cf/flags :onboarding-newsletter) - (modal/show! {:type :onboarding-newsletter-modal}) + (modal/show! {:type :onboarding-newsletter}) (contains? cf/flags :onboarding-team) (modal/show! {:type :onboarding-team}))))] diff --git a/frontend/src/app/main/ui/onboarding.scss b/frontend/src/app/main/ui/onboarding.scss index 66ecddbe38..d0710fc42b 100644 --- a/frontend/src/app/main/ui/onboarding.scss +++ b/frontend/src/app/main/ui/onboarding.scss @@ -13,70 +13,58 @@ .modal-container { @extend .modal-container-base; position: relative; - display: flex; - padding: 0; + display: grid; + grid-template-columns: auto auto; + gap: $s-32; + padding-inline: $s-100; + padding-block-start: $s-100; + padding-block-end: $s-72; margin: 0; - min-width: $s-712; + width: $s-960; + height: $s-632; + max-width: $s-960; + max-height: $s-632; } .modal-left { - width: $s-284; + width: $s-240; + margin-block-end: $s-64; img { - width: $s-284; + width: $s-240; height: 100%; border-radius: $br-8 0 0 $br-8; } } .modal-right { - @include flexColumn; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-40 auto auto auto $s-32; + gap: $s-24; position: relative; - flex-grow: 1; - padding: $s-32; } .release { - @include titleTipography; + @include bodyMedTipography; position: absolute; - top: 0; + top: calc(-1 * $s-28); right: 0; padding: $s-8; color: var(--modal-text-foreground-color); } -.modal-content { - @include flexColumn; - @include titleTipography; - gap: $s-24; - flex-grow: 1; - margin-bottom: $s-24; -} - .modal-title { @include bigTitleTipography; color: var(--modal-title-foreground-color); } -.modal-info { - @include flexColumn; -} - -.modal-text { - @include titleTipography; +.modal-text, +.property-description { + @include bodyLargeTypography; + margin: 0; color: var(--modal-text-foreground-color); } -.property-block { - @include flexRow; - gap: $s-16; - margin-bottom: $s-24; - img { - @include flexCenter; - height: $s-40; - width: $s-40; - } -} - .modal-link { @include bodyLargeTypography; color: var(--modal-link-foreground-color); @@ -88,19 +76,11 @@ } .property-title a { - @include titleTipography; + @include medTitleTipography; color: var(--modal-title-foreground-color); } -.property-description { - @include titleTipography; - color: var(--modal-text-foreground-color); -} - -.modal-footer { - display: flex; - justify-content: flex-end; - button { - @extend .modal-accept-btn; - } +.accept-btn { + @extend .modal-accept-btn; + justify-self: flex-end; } diff --git a/frontend/src/app/main/ui/onboarding/newsletter.cljs b/frontend/src/app/main/ui/onboarding/newsletter.cljs index e252452857..00cbef5e8d 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.cljs +++ b/frontend/src/app/main/ui/onboarding/newsletter.cljs @@ -15,9 +15,9 @@ [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) -(mf/defc onboarding-newsletter-modal +(mf/defc onboarding-newsletter {::mf/register modal/components - ::mf/register-as :onboarding-newsletter-modal} + ::mf/register-as :onboarding-newsletter} [] (let [message (tr "onboarding.newsletter.acceptance-message") newsletter-updates (mf/use-state false) @@ -39,13 +39,18 @@ [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeInDown {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-header)} + [:div {:class (stl/css :modal-left)} + [:img {:src "images/deco-newsletter.png" + :border "0"}]] + + [:div {:class (stl/css :modal-right)} [:h2 {:class (stl/css :modal-title) :data-test "onboarding-newsletter-title"} (tr "onboarding.newsletter.title")] [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.desc")]] - [:div {:class (stl/css :modal-content)} + (tr "onboarding-v2.newsletter.desc")] + + [:div {:class (stl/css :newsletter-options)} [:div {:class (stl/css :input-wrapper)} [:label {:for "newsletter-updates"} @@ -67,19 +72,14 @@ :id "newsletter-news" :on-change #(toggle newsletter-news)}]]]] - [:div {:class (stl/css :modal-info)} - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.privacy1") - [:a {:class (stl/css :modal-link) - :target "_blank" - :href "https://penpot.app/privacy"} - (tr "onboarding.newsletter.policy")]] - [:p {:class (stl/css :modal-text)} - (tr "onboarding-v2.newsletter.privacy2")]]] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.newsletter.privacy1") + [:a {:class (stl/css :modal-link) + :target "_blank" + :href "https://penpot.app/privacy"} + (tr "onboarding.newsletter.policy")]] + [:p {:class (stl/css :modal-text)} + (tr "onboarding-v2.newsletter.privacy2")] - [:div {:class (stl/css :modal-footer)} - [:button {:on-click accept} (tr "labels.continue")]] - - [:img {:class (stl/css-case :deco true - :top true) - :src "images/deco-newsletter.png" :border "0"}]]])) + [:button {:on-click accept + :class (stl/css :accept-btn)} (tr "labels.continue")]]]])) diff --git a/frontend/src/app/main/ui/onboarding/newsletter.scss b/frontend/src/app/main/ui/onboarding/newsletter.scss index 86f854597c..20b4230df3 100644 --- a/frontend/src/app/main/ui/onboarding/newsletter.scss +++ b/frontend/src/app/main/ui/onboarding/newsletter.scss @@ -13,69 +13,64 @@ .modal-container { @extend .modal-container-base; position: relative; - min-width: $s-712; + display: grid; + grid-template-columns: auto auto; + gap: $s-32; + padding-inline: $s-100; + padding-block-start: $s-100; + padding-block-end: $s-72; + margin: 0; + width: $s-960; + height: $s-632; + max-width: $s-960; + max-height: $s-632; } -.modal-header { - display: flex; - flex-direction: column; - justify-content: center; - margin-top: $s-80; - margin-bottom: $s-32; +.modal-left { + width: $s-172; + margin-block-end: $s-64; + img { + width: $s-172; + border-radius: $br-8 0 0 $br-8; + } +} + +.modal-right { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-40 auto auto auto auto $s-32; + gap: $s-24; + position: relative; } .modal-title { @include bigTitleTipography; - text-align: center; color: var(--modal-title-foreground-color); - margin-bottom: $s-16; } .modal-text { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-content { - @include flexColumn; - @include titleTipography; - gap: $s-32; - margin-bottom: $s-24; -} - .newsletter-options { - @include flexColumn; + display: grid; gap: $s-16; + margin-inline-start: $s-16; } .input-wrapper { @extend .input-checkbox; } -.modal-info { - @include flexColumn; - gap: $s-16; - margin-bottom: $s-32; -} - .modal-link { @include bodyLargeTypography; color: var(--modal-link-foreground-color); margin: 0; } -.modal-footer { - display: flex; - justify-content: flex-end; - button { - @extend .modal-accept-btn; - } -} - -.deco { - position: absolute; - width: 183px; - top: -106px; - left: 261px; +.accept-btn { + @extend .modal-accept-btn; + justify-self: flex-end; } diff --git a/frontend/src/app/main/ui/onboarding/questions.cljs b/frontend/src/app/main/ui/onboarding/questions.cljs index 3d72a10112..c509ca987a 100644 --- a/frontend/src/app/main/ui/onboarding/questions.cljs +++ b/frontend/src/app/main/ui/onboarding/questions.cljs @@ -10,18 +10,21 @@ (:require [app.common.data :as d] [app.common.data.macros :as dm] + [app.config :as cf] + [app.main.data.modal :as modal] [app.main.data.users :as du] [app.main.store :as st] [app.main.ui.components.forms :as fm] + [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [tr]] [cljs.spec.alpha :as s] [cuerdas.core :as str] [rumext.v2 :as mf])) (mf/defc step-container - [{:keys [form step on-next on-prev children] :as props}] + [{:keys [form step on-next on-prev children class] :as props}] - [:& fm/form {:form form :on-submit on-next} + [:& fm/form {:form form :on-submit on-next :class (dm/str class " " (stl/css :form-wrapper))} [:div {:class (stl/css :paginator)} (str/ffmt "%/4" step)] children @@ -41,39 +44,42 @@ (mf/defc step-1 [{:keys [on-next form] :as props}] - [:& step-container {:form form :step 1 :on-next on-next} + [:& step-container {:form form :step 1 :on-next on-next :class (stl/css :step-1)} [:img {:class (stl/css :header-image) :src "images/form/use-for-1.png" :alt (tr "questions.lets-get-started")}] [:h1 {:class (stl/css :modal-title)} (tr "questions.lets-get-started")] [:p {:class (stl/css :modal-text)} (tr "questions.your-feedback-will-help-us")] - [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")] - [:& fm/select - {:options [{:label (tr "questions.select-option") - :value "" :key "questions-how-are-you-planning-to-use-penpot" - :disabled true} - {:label (tr "questions.discover-more-about-penpot") - :value "discover-more-about-penpot" - :key "discover-more-about-penpot"} - {:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") - :value "test-penpot-to-see-if-its-a-fit-for-team" - :key "test-penpot-to-see-if-its-a-fit-for-team"} - {:label (tr "questions.start-to-work-on-my-project") - :value "start-to-work-on-my-project" - :key "start-to-work-on-my-project"} - {:label (tr "questions.get-the-code-from-my-team-project") - :value "get-the-code-from-my-team-project" - :key "get-the-code-from-my-team-project"} - {:label (tr "questions.leave-feedback-for-my-team-project") - :value "leave-feedback-for-my-team-project" - :key "leave-feedback-for-my-team-project"} - {:label (tr "questions.work-in-concept-ideas") - :value "work-in-concept-ideas" - :key "work-in-concept-ideas"} - {:label (tr "questions.try-out-before-using-penpot-on-premise") - :value "try-out-before-using-penpot-on-premise" - :key "try-out-before-using-penpot-on-premise"}] - :default "" - :name :planning}]]) + + [:div {:class (stl/css :modal-question)} + [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.questions-how-are-you-planning-to-use-penpot")] + [:& fm/select + {:options [{:label (tr "questions.select-option") + :value "" :key "questions-how-are-you-planning-to-use-penpot" + :disabled true} + {:label (tr "questions.discover-more-about-penpot") + :value "discover-more-about-penpot" + :key "discover-more-about-penpot"} + {:label (tr "questions.test-penpot-to-see-if-its-a-fit-for-team") + :value "test-penpot-to-see-if-its-a-fit-for-team" + :key "test-penpot-to-see-if-its-a-fit-for-team"} + {:label (tr "questions.start-to-work-on-my-project") + :value "start-to-work-on-my-project" + :key "start-to-work-on-my-project"} + {:label (tr "questions.get-the-code-from-my-team-project") + :value "get-the-code-from-my-team-project" + :key "get-the-code-from-my-team-project"} + {:label (tr "questions.leave-feedback-for-my-team-project") + :value "leave-feedback-for-my-team-project" + :key "leave-feedback-for-my-team-project"} + {:label (tr "questions.work-in-concept-ideas") + :value "work-in-concept-ideas" + :key "work-in-concept-ideas"} + {:label (tr "questions.try-out-before-using-penpot-on-premise") + :value "try-out-before-using-penpot-on-premise" + :key "try-out-before-using-penpot-on-premise"}] + :default "" + :name :planning + :dropdown-class (stl/css :question-dropdown)}]]]) (s/def ::questions-form-step-2 (s/keys :req-un [::experience-branding-illustrations-marketing-pieces @@ -82,33 +88,42 @@ (mf/defc step-2 [{:keys [on-next on-prev form] :as props}] - [:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} + [:& step-container {:form form :step 2 :on-next on-next :on-prev on-prev :class (stl/css :step-2)} + [:h1 {:class (stl/css :modal-title)} (tr "questions.describe-your-experience-working-on")] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "branding-illustrations-marketing-pieces")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-branding-illustrations-marketing-pieces}]] + :name :experience-branding-illustrations-marketing-pieces + :class (stl/css :radio-btns)}]] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "questions.interface-design-visual-assets-design-systems")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-interface-design-visual-assets-design-systems}]] + :name :experience-interface-design-visual-assets-design-systems + :class (stl/css :radio-btns)}]] - [:div {:class (stl/css :modal-question)} - [:div {:class (stl/css :modal-text)} + [:div {:class (stl/css-case :modal-question true + :question-centered true)} + [:div {:class (stl/css-case :modal-subtitle true + :centered true)} (tr "questions.wireframes-user-journeys-flows-navigation-trees")] [:& fm/radio-buttons {:options [{:label (tr "questions.none") :value "none"} {:label (tr "questions.some") :value "some"} {:label (tr "questions.a-lot") :value "a-lot"}] - :name :experience-interface-wireframes-user-journeys-flows-navigation-trees}]]]) + :name :experience-interface-wireframes-user-journeys-flows-navigation-trees + :class (stl/css :radio-btns)}]]]) (s/def ::questions-form-step-3 (s/keys :req-un [::experience-design-tool] @@ -140,23 +155,26 @@ (swap! form d/dissoc-in [:data :experience-design-tool-other]) (swap! form d/dissoc-in [:errors :experience-design-tool-other])))))] - [:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} + [:& step-container {:form form :step 3 :on-next on-next :on-prev on-prev :class (stl/css :step-3)} + [:h1 {:class (stl/css :modal-title)} (tr "question.design-tool-more-experienced-with")] - [:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png"} - {:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png"} - {:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png"} - {:label (tr "questions.canva") :value "canva" :image "images/form/canva.png"} - {:label (tr "questions.invision") :value "invision" :image "images/form/invision.png"} - {:label (tr "questions.never-used-a-tool") :value "never-used-a-tool" :image "images/form/never-used.png"} - {:label (tr "questions.other") :value "other"}] - :name :experience-design-tool - :on-change on-design-tool-change}] + [:div {:class (stl/css :radio-wrapper)} + [:& fm/radio-buttons {:options [{:label (tr "questions.figma") :value "figma" :image "images/form/figma.png" :area "image1"} + {:label (tr "questions.sketch") :value "sketch" :image "images/form/sketch.png" :area "image2"} + {:label (tr "questions.adobe-xd") :value "adobe-xd" :image "images/form/adobe-xd.png" :area "image3"} + {:label (tr "questions.canva") :value "canva" :image "images/form/canva.png" :area "image4"} + {:label (tr "questions.invision") :value "invision" :image "images/form/invision.png" :area "image5"} + {:label (tr "questions.never-used-one") :area "image6" :value "never-used-a-tool" :icon i/curve-refactor} + {:label (tr "questions.other") :value "other" :area "other"}] + :name :experience-design-tool + :class (stl/css :image-radio) + :on-change on-design-tool-change}] - [:& fm/input {:name :experience-design-tool-other - :placeholder (tr "questions.other") - :label "" - :disabled (not= experience-design-tool "other")}]])) + [:& fm/input {:name :experience-design-tool-other + :class (stl/css :input-spacing) + :placeholder (tr "questions.other") + :label "" + :disabled (not= experience-design-tool "other")}]]])) (s/def ::questions-form-step-4 (s/keys :req-un [::team-size ::role] @@ -181,18 +199,23 @@ (swap! form d/dissoc-in [:data :role-other]) (swap! form d/dissoc-in [:errors :role-other])))))] - [:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev} - [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.role")] - [:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"} - {:label (tr "questions.developer") :value "developer"} - {:label (tr "questions.manager") :value "manager"} - {:label (tr "questions.founder") :value "founder"} - {:label (tr "questions.marketing") :value "marketing"} - {:label (tr "questions.student-teacher") :value "student-teacher"} - {:label (tr "questions.other") :value "other"}] - :name :role - :on-change on-role-change}] - [:& fm/input {:name :role-other :label "" :placeholder (tr "questions.other") :disabled (not= role "other")}] + [:& step-container {:form form :step 4 :on-next on-next :on-prev on-prev :class (stl/css :step-4)} + [:h1 {:class (stl/css :modal-title)} (tr "questions.role")] + [:div {:class (stl/css :radio-wrapper)} + [:& fm/radio-buttons {:options [{:label (tr "questions.designer") :value "designer"} + {:label (tr "questions.developer") :value "developer"} + {:label (tr "questions.manager") :value "manager"} + {:label (tr "questions.founder") :value "founder"} + {:label (tr "questions.marketing") :value "marketing"} + {:label (tr "questions.student-teacher") :value "student-teacher"} + {:label (tr "questions.other") :value "other"}] + :name :role + :on-change on-role-change}] + [:& fm/input {:name :role-other + :class (stl/css :input-spacing) + :label "" + :placeholder (tr "questions.other") + :disabled (not= role "other")}]] [:div {:class (stl/css :modal-question)} [:h3 {:class (stl/css :modal-subtitle)} (tr "questions.team-size")] @@ -210,6 +233,8 @@ ;; this modal directly on the ui namespace. (mf/defc questions-modal + {::mf/register modal/components + ::mf/register-as :onboarding-questions} [] (let [container (mf/use-ref) step (mf/use-state 1) @@ -251,7 +276,17 @@ (fn [form] (let [questionnaire (merge @clean-data (:clean-data @form))] (reset! clean-data questionnaire) - (st/emit! (du/mark-questions-as-answered questionnaire)))))] + (st/emit! (du/mark-questions-as-answered questionnaire)) + + (cond + (contains? cf/flags :onboarding-newsletter) + (modal/show! {:type :onboarding-newsletter}) + + (contains? cf/flags :onboarding-team) + (modal/show! {:type :onboarding-team}) + + :else + (modal/hide!)))))] [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-container) diff --git a/frontend/src/app/main/ui/onboarding/questions.scss b/frontend/src/app/main/ui/onboarding/questions.scss index 999f41d12e..c225e3ae65 100644 --- a/frontend/src/app/main/ui/onboarding/questions.scss +++ b/frontend/src/app/main/ui/onboarding/questions.scss @@ -11,25 +11,33 @@ } .modal-container { - @extend .modal-container-base; - min-width: $s-512; - position: relative; + max-width: $s-744; + max-height: fit-content; + width: $s-744; + padding-inline: $s-100; + padding-block-start: $s-40; + padding-block-end: $s-72; + border-radius: $br-8; + border: $s-2 solid var(--modal-border-color); + background-color: var(--modal-background-color); +} + +.form-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: $s-24; } // STEP CONTAINER .paginator { - @include titleTipography; - position: absolute; - top: $s-8; - right: $s-8; - padding: $s-4; - border-radius: $br-6; - color: var(--color-foreground-secondary); + @include smallTitleTipography; + height: $s-20; + text-align: right; + color: var(--modal-text-foreground-color); } .action-buttons { @extend .modal-action-btns; - margin-top: $s-32; } .next-button { @extend .modal-accept-btn; @@ -41,31 +49,89 @@ // STEP 1 +// .step-1 { +// max-height: $s-468; +// height: $s-468; +// } + .header-image { - height: auto; - width: $s-200; + height: $s-112; + width: auto; + margin-inline-start: auto; } .modal-title { @include bigTitleTipography; color: var(--modal-title-foreground-color); - margin: $s-32 0 $s-8 0; + min-height: $s-32; + margin-block: auto; } .modal-subtitle { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-title-foreground-color); + margin: 0; + padding: 0; } -// STEP-2 - .modal-text { - @include titleTipography; + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-question { - @include flexColumn; - margin-top: $s-32; +// STEP-2 + +.step-2 { + grid-template-rows: $s-20 auto auto auto auto $s-32; +} + +.modal-question { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-16 $s-32; + gap: $s-16; + height: fit-content; +} + +.question-centered { + width: $s-424; + grid-template-rows: auto $s-32; + margin: 0 auto; +} + +.radio-wrapper { + display: grid; + grid-template-columns: 1fr; + gap: $s-8; +} + +// STEP-3 +.step-3 { + grid-template-rows: $s-20 auto auto $s-32; +} + +.image-radio { + display: grid; + grid-template-rows: 1fr 1fr $s-32; + grid-template-columns: $s-88 $s-92 $s-92 $s-92 $s-88; + grid-template-areas: + ". image1 image2 image3 ." + ". image4 image5 image6 ." + "other other other other other"; + row-gap: $s-16; + column-gap: $s-24; +} + +.input-spacing { + height: $s-32; + width: calc(100% - $s-24); + margin-inline-start: $s-24; +} + +// STEP-4 + +.step-4 { + grid-template-rows: $s-20 auto auto auto $s-32; + row-gap: $s-16; } diff --git a/frontend/src/app/main/ui/onboarding/team_choice.cljs b/frontend/src/app/main/ui/onboarding/team_choice.cljs index 9cee007d99..4d30aaadb1 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.cljs +++ b/frontend/src/app/main/ui/onboarding/team_choice.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.onboarding.team-choice (:require-macros [app.main.style :as stl]) (:require + [app.common.data.macros :as dmc] [app.common.spec :as us] [app.main.data.dashboard :as dd] [app.main.data.events :as ev] @@ -27,33 +28,36 @@ (s/def ::team-form (s/keys :req-un [::name])) -(mf/defc team-modal-right +(mf/defc team-modal-left [] - [:div {:class (stl/css :modal-right)} + [:div {:class (stl/css :modal-left)} + [:h1 {:class (stl/css :modal-title)} + (tr "onboarding-v2.welcome.title")] + [:h2 {:class (stl/css :modal-subtitle)} - (tr "onboarding.team-modal.create-team")] + (tr "onboarding.team-modal.team-definition")] [:p {:class (stl/css :modal-text)} (tr "onboarding.team-modal.create-team-desc")] [:ul {:class (stl/css :team-features)} [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/document-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-1")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/move-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-2")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/tree-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-3")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/user-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-4")]] [:li {:class (stl/css :feature)} [:span {:class (stl/css :icon)} i/tick-refactor] - [:p {:class (stl/css :modal-text)} + [:p {:class (stl/css :modal-desc)} (tr "onboarding.team-modal.create-team-feature-5")]]]]) (mf/defc onboarding-team-modal @@ -65,7 +69,7 @@ :validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space")) (fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))]) on-submit - (mf/use-callback + (mf/use-fn (fn [form _] (let [tname (get-in @form [:clean-data :name])] (st/emit! (modal/show {:type :onboarding-team-invitations :name tname}) @@ -82,12 +86,18 @@ teams (mf/deref refs/teams)] - (if (< (count teams) 2) + (mf/with-effect [teams] + (when (> (count teams) 1) + (st/emit! (modal/hide)))) + + (when (< (count teams) 2) [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeIn {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-left)} + [:& team-modal-left] + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :modal-right)} [:div {:class (stl/css :first-block)} - [:h2 {:class (stl/css :modal-title)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.team-modal.create-team")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.create-team-desc")] @@ -106,7 +116,7 @@ {:class (stl/css :accept-button) :label (tr "onboarding.choice.team-up.continue-creating-team")}]]]] [:div {:class (stl/css :second-block)} - [:h2 {:class (stl/css :modal-title)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.start-without-a-team")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.start-without-a-team-description")] @@ -115,10 +125,8 @@ [:button {:class (stl/css :accept-button) :on-click on-skip} (tr "onboarding.choice.team-up.continue-without-a-team")]]]] - [:& team-modal-right] - [:div {:class (stl/css :paginator)} "1/2"]]] - (st/emit! (modal/hide))))) + [:div {:class (stl/css :paginator)} "1/2"]]]))) (defn get-available-roles [] @@ -135,8 +143,9 @@ (mf/defc onboarding-team-invitations-modal {::mf/register modal/components - ::mf/register-as :onboarding-team-invitations} - [{:keys [name] :as props}] + ::mf/register-as :onboarding-team-invitations + ::mf/props :obj} + [{:keys [name]}] (let [initial (mf/use-memo (constantly {:role "editor" :name name})) @@ -148,7 +157,7 @@ roles (mf/use-memo #(get-available-roles)) on-success - (mf/use-callback + (mf/use-fn (fn [_form response] (let [team-id (:id response)] (st/emit! @@ -158,13 +167,13 @@ (modal/hide)))))) on-error - (mf/use-callback + (mf/use-fn (fn [_form _response] (st/emit! (dm/error "Error on creating team.")))) ;; The SKIP branch only creates the team, without invitations on-invite-later - (mf/use-callback + (mf/use-fn (fn [_] (let [mdata {:on-success (partial on-success form) :on-error (partial on-error form)} @@ -177,8 +186,8 @@ ;; The SUBMIT branch creates the team with the invitations on-invite-now - (mf/use-callback - (fn [_] + (mf/use-fn + (fn [form] (let [mdata {:on-success (partial on-success form) :on-error (partial on-error form)} params (:clean-data @form) @@ -196,36 +205,39 @@ :step 2}))))) on-submit - (mf/use-callback - (fn [_] + (mf/use-fn + (fn [form] (let [params (:clean-data @form) emails (:emails params)] (if (> (count emails) 0) (on-invite-now form) - (on-invite-later form)))))] + (on-invite-later form)) + (modal/hide!))))] [:div {:class (stl/css :modal-overlay)} [:div.animated.fadeIn {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-left)} - [:h2 {:class (stl/css :modal-title)} (tr "onboarding.choice.team-up.invite-members")] + [:& team-modal-left] + + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :modal-right-invitations)} + [:h2 {:class (stl/css :modal-subtitle)} (tr "onboarding.choice.team-up.invite-members")] [:p {:class (stl/css :modal-text)} (tr "onboarding.choice.team-up.invite-members-info")] + [:& fm/form {:form form + :class (stl/css :modal-form-invitations) + :on-submit on-submit} + [:div {:class (stl/css :role-select)} + [:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")] + [:& fm/select {:name :role :options roles}]] - [:div {:class (stl/css :modal-form)} - [:& fm/form {:form form - :on-submit on-submit} - [:div {:class (stl/css :role-select)} - [:p {:class (stl/css :role-title)} (tr "onboarding.choice.team-up.roles")] - [:& fm/select {:name :role :options roles}]] - - [:div {:class (stl/css :invitation-row)} - [:& fm/multi-input {:type "email" - :name :emails - :auto-focus? true - :trim true - :valid-item-fn us/parse-email - :caution-item-fn #{} - :label (tr "modals.invite-member.emails") - :on-submit on-submit}]]] + [:div {:class (stl/css :invitation-row)} + [:& fm/multi-input {:type "email" + :name :emails + :auto-focus? true + :trim true + :valid-item-fn us/parse-email + :caution-item-fn #{} + :label (tr "modals.invite-member.emails") + :on-submit on-submit}]] [:div {:class (stl/css :action-buttons)} [:button {:class (stl/css :back-button) @@ -242,9 +254,9 @@ (tr "onboarding.choice.team-up.create-team-and-invite") (tr "onboarding.choice.team-up.create-team-without-invite"))}]] [:div {:class (stl/css :modal-hint)} - (tr "onboarding.choice.team-up.create-team-and-send-invites-description")]]] + (dmc/str "(" (tr "onboarding.choice.team-up.create-team-and-send-invites-description") ")")]]] + - [:& team-modal-right] [:div {:class (stl/css :paginator)} "2/2"]]])) diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss index 42aaaef3d2..9562122410 100644 --- a/frontend/src/app/main/ui/onboarding/team_choice.scss +++ b/frontend/src/app/main/ui/onboarding/team_choice.scss @@ -11,32 +11,38 @@ } .modal-container { - @extend .modal-container-base; - padding: 0; - display: flex; position: relative; - min-width: $s-712; + display: grid; + grid-template-columns: 1fr $s-32 1fr; + gap: $s-24; + width: $s-908; + height: $s-632; + padding-inline: $s-100; + padding-block-start: $s-40; + padding-block-end: $s-72; + border-radius: $br-8; + background-color: var(--modal-background-color); + border: $s-2 solid var(--modal-border-color); } +.paginator { + @include bodyMedTipography; + position: absolute; + top: $s-40; + right: $s-100; + padding: $s-4; + border-radius: $br-6; + color: var(--color-foreground-secondary); +} + +// MODAL LEFT .modal-left { - width: $s-356; - padding: $s-48 $s-28 $s-48 $s-48; -} - -.first-block, -.second-block { - @include flexColumn; - width: 100%; -} - -.first-block { - margin-bottom: $s-72; -} - -.modal-right { - width: $s-356; - padding: $s-48; - background-color: var(--color-background-tertiary); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: $s-32 auto auto 1fr; + gap: $s-16; + max-height: $s-512; + padding-block-start: $s-44; } .modal-title { @@ -46,70 +52,48 @@ } .modal-subtitle { - @include tabTitleTipography; + @include medTitleTipography; color: var(--modal-title-foreground-color); - margin-bottom: $s-8; } -.modal-text, -.modal-hint { - @include titleTipography; +.modal-text { + @include bodyLargeTypography; color: var(--modal-text-foreground-color); margin: 0; } -.modal-hint { - margin-top: $s-24; -} -.modal-form { - margin: $s-24 0; + +.modal-desc { + @include smallTitleTipography; + margin: 0; + color: var(--modal-title-foreground-color); } -.team-name-input { - @extend .input-element-label; - label { - @include flexColumn; - @include titleTipography; - align-items: flex-start; - width: 100%; - border: none; - background-color: transparent; - height: 100%; - - input { - @include titleTipography; - margin-top: $s-8; - } - } -} - -.role-select { +.team-features { @include flexColumn; - .role-title { - @include titleTipography; - margin: 0; - color: var(--modal-title-foreground-color); + gap: $s-16; + margin: 0; +} + +.feature { + @include flexRow; + gap: $s-16; +} + +.icon { + @include flexCenter; + height: $s-32; + width: $s-32; + border-radius: $br-circle; + border: $s-1 solid var(--color-accent-primary); + svg { + @extend .button-icon; + stroke: var(--color-accent-primary); } } -.invitation-row { - margin-top: $s-8; - margin-bottom: $s-24; -} - -.paginator { - @include titleTipography; - position: absolute; - top: $s-8; - right: $s-8; - padding: $s-4; - border-radius: $br-6; - color: var(--color-foreground-secondary); -} - .action-buttons { @extend .modal-action-btns; - justify-content: flex-start; - margin-top: $s-24; + justify-content: flex-end; } .accept-button { @@ -120,25 +104,88 @@ @extend .modal-cancel-btn; } -.team-features { - @include flexColumn; - gap: $s-24; - margin-top: $s-24; +// SEPARATOR +.separator { + width: $s-8; + height: $s-420; + border-radius: $br-8; + margin-block-start: $s-92; + opacity: 42%; + background-color: var(--modal-separator-backogrund-color); } -.feature { - @include flexRow; +// MODAL RIGHT TEAM +.modal-right { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr auto; + gap: $s-24; + max-height: $s-512; + margin-block-start: $s-92; +} + +.first-block, +.second-block { + @include flexColumn; + gap: $s-16; +} + +.modal-form { + display: grid; + grid-template-columns: 1fr; + gap: $s-16; +} + +.team-name-input { + @extend .input-element-label; + label { + @include flexColumn; + @include bodyMedTipography; + align-items: flex-start; + width: 100%; + border: none; + background-color: transparent; + height: 100%; + + input { + @include bodyMedTipography; + margin-top: $s-8; + } + } +} + +// MODAL RIGHT INVITATIONS + +.modal-right-invitations { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto 1fr; + gap: $s-16; + max-height: $s-512; + margin-block-start: $s-92; +} + +.modal-form-invitations { + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto auto; + margin-block-end: $s-72; gap: $s-8; } -.icon { - @include flexCenter; - height: $s-32; - width: $s-32; - border-radius: $br-circle; - background-color: var(--color-accent-primary); - svg { - @extend .button-icon; - stroke: var(--color-background-tertiary); - } +.role-title { + @include uppercaseTitleTipography; + margin-block-end: $s-8; + color: var(--modal-title-foreground-color); +} + +.invitation-row { + margin: 0; + color: var(--modal-title-foreground-color); +} + +.modal-hint { + @include bodyMedTipography; + color: var(--modal-text-foreground-color); + text-align: right; } diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss index e843c83f0d..4a9b2e340b 100644 --- a/frontend/src/app/main/ui/settings/access_tokens.scss +++ b/frontend/src/app/main/ui/settings/access_tokens.scss @@ -180,7 +180,7 @@ .modal-header { margin-bottom: $s-24; .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -191,7 +191,7 @@ .modal-content { @include flexColumn; gap: $s-24; - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } @@ -200,7 +200,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } @@ -223,7 +223,7 @@ .token-value { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss index e6f1500764..5980e211d3 100644 --- a/frontend/src/app/main/ui/settings/change_email.scss +++ b/frontend/src/app/main/ui/settings/change_email.scss @@ -20,7 +20,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -30,7 +30,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; margin-bottom: $s-24; } @@ -40,7 +40,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss index 148781eba1..b60a2d0120 100644 --- a/frontend/src/app/main/ui/settings/delete_account.scss +++ b/frontend/src/app/main/ui/settings/delete_account.scss @@ -20,7 +20,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -30,7 +30,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; margin-bottom: $s-24; } @@ -40,7 +40,7 @@ } .select-title { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-title-foreground-color); } diff --git a/frontend/src/app/main/ui/shapes/export.cljs b/frontend/src/app/main/ui/shapes/export.cljs index 5c03bf78f8..d10378e190 100644 --- a/frontend/src/app/main/ui/shapes/export.cljs +++ b/frontend/src/app/main/ui/shapes/export.cljs @@ -104,6 +104,9 @@ (-> (add! :show-content) (add! :hide-in-viewer))) + (cond-> (and frame? (:use-for-thumbnail shape)) + (add! :use-for-thumbnail)) + (cond-> (and (or rect? image? frame?) (some? (:r1 shape))) (-> (add! :r1) (add! :r2) diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss index 3a4e36d3f7..8bdd338af0 100644 --- a/frontend/src/app/main/ui/viewer.scss +++ b/frontend/src/app/main/ui/viewer.scss @@ -24,7 +24,7 @@ } .empty-state { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); display: grid; place-items: center; @@ -133,7 +133,7 @@ .counter { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; border-radius: $br-8; width: $s-64; height: $s-32; diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss index 7dbbfcc831..c7f5f95db8 100644 --- a/frontend/src/app/main/ui/viewer/comments.scss +++ b/frontend/src/app/main/ui/viewer/comments.scss @@ -8,7 +8,7 @@ // COMMENT DROPDOWN ON HEADER .view-options { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; position: relative; @@ -29,7 +29,7 @@ } .dropdown-title { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss index da758dffe7..ef5666cf83 100644 --- a/frontend/src/app/main/ui/viewer/header.scss +++ b/frontend/src/app/main/ui/viewer/header.scss @@ -53,7 +53,7 @@ } .project-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--title-foreground-color); } @@ -62,7 +62,7 @@ } .breadcrumb { - @include titleTipography; + @include bodyMedTipography; @include flexRow; color: var(--title-foreground-color); cursor: pointer; @@ -114,7 +114,7 @@ } .current-frame { - @include titleTipography; + @include bodyMedTipography; @include flexRow; flex-grow: 1; color: var(--title-foreground-color-hover); @@ -198,7 +198,7 @@ .go-log-btn { @extend .button-tertiary; - @include titleTipography; + @include bodyMedTipography; height: $s-32; padding: 0 $s-8; border-radius: $br-8; @@ -213,7 +213,7 @@ min-width: $s-64; border-radius: $br-8; .label { - @include titleTipography; + @include bodyMedTipography; color: var(--button-tertiary-foreground-color-rest); } diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.scss b/frontend/src/app/main/ui/viewer/inspect/annotation.scss index ddceb455d8..94910fce2d 100644 --- a/frontend/src/app/main/ui/viewer/inspect/annotation.scss +++ b/frontend/src/app/main/ui/viewer/inspect/annotation.scss @@ -15,6 +15,6 @@ } .annotation-content { - @include titleTipography; + @include bodyMedTipography; color: var(--entry-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss index 7f30931c39..8187879034 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss @@ -27,7 +27,7 @@ } .image-format { - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; padding: $s-8 0; color: var(--menu-foreground-color-rest); @@ -42,7 +42,7 @@ } .format-info { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; width: 100%; @@ -78,7 +78,7 @@ grid-template-rows: 1fr 1fr; } .color-name-wrapper { - @include titleTipography; + @include bodyMedTipography; @include flexColumn; padding: $s-8 $s-4 $s-8 $s-8; height: $s-32; @@ -89,21 +89,21 @@ max-width: $s-124; } .color-name-library { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; text-align: left; height: $s-16; color: var(--menu-foreground-color-rest); } .color-value-wrapper { - @include titleTipography; + @include bodyMedTipography; height: $s-16; color: var(--menu-foreground-color); } } .opacity-info { - @include titleTipography; + @include bodyMedTipography; color: var(--menu-foreground-color); padding: $s-8 0; } @@ -160,7 +160,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: 100%; margin-top: $s-4; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss index 80f753a2cc..f9e128e307 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/image.scss @@ -39,7 +39,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; margin-top: $s-4; } diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss index 38248e1fc5..1ad6d6a8fc 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/svg.scss @@ -23,7 +23,7 @@ } .attributes-subtitle { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; justify-content: space-between; height: $s-32; diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss index d32a5a5161..f9f49e032b 100644 --- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss +++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss @@ -36,7 +36,7 @@ border: $s-1 solid var(--menu-border-color-disabled); margin-top: $s-4; .content { - @include titleTipography; + @include bodyMedTipography; width: 100%; padding: $s-4 0; color: var(--color-foreground-secondary); diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index a383684c7e..1b7b3f9ca9 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -16,7 +16,7 @@ .download-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: 100%; margin: $s-8 0; @@ -55,7 +55,7 @@ } .code-lang { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; } @@ -82,14 +82,14 @@ max-width: $s-108; } .code-lang-select { - @include tabTitleTipography; + @include uppercaseTitleTipography; width: $s-72; border: $s-1 solid transparent; background-color: transparent; color: var(--menu-foreground-color-disabled); } .code-lang-option { - @include tabTitleTipography; + @include uppercaseTitleTipography; width: $s-72; height: $s-32; padding: $s-8; diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.scss b/frontend/src/app/main/ui/viewer/inspect/exports.scss index 28ad83a354..600262c4e4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.scss +++ b/frontend/src/app/main/ui/viewer/inspect/exports.scss @@ -94,7 +94,7 @@ .export-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: $s-252; } diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss index 2610509b91..00ea349ec4 100644 --- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss +++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss @@ -46,7 +46,7 @@ } .layer-title { - @include titleTipography; + @include bodyMedTipography; @include text-ellipsis; height: $s-32; padding: $s-8 0; @@ -75,7 +75,7 @@ } .placeholder-label { - @include titleTipography; + @include bodyMedTipography; text-align: center; width: $s-200; color: var(--empty-message-foreground-color); @@ -83,7 +83,7 @@ .more-info-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; padding: $s-8 $s-24; } diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss index 656bc7c937..3383ef35f1 100644 --- a/frontend/src/app/main/ui/viewer/interactions.scss +++ b/frontend/src/app/main/ui/viewer/interactions.scss @@ -7,7 +7,7 @@ @use "common/refactor/common-refactor.scss" as *; .view-options { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; position: relative; @@ -19,7 +19,7 @@ cursor: pointer; } .dropdown-title { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss index 6e39b53f67..40afaf4c93 100644 --- a/frontend/src/app/main/ui/viewer/login.scss +++ b/frontend/src/app/main/ui/viewer/login.scss @@ -19,7 +19,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -29,7 +29,7 @@ .modal-content { @include flexColumn; - @include titleTipography; + @include bodyMedTipography; gap: $s-24; max-height: $s-400; width: $s-368; diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss index 7219154c81..afc2dbb172 100644 --- a/frontend/src/app/main/ui/viewer/share_link.scss +++ b/frontend/src/app/main/ui/viewer/share_link.scss @@ -25,7 +25,7 @@ } .share-link-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } @@ -34,7 +34,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; @include flexColumn; gap: $s-24; } @@ -86,7 +86,7 @@ } .description { - @include titleTipography; + @include bodyMedTipography; color: var(--modal-text-foreground-color); margin-bottom: $s-24; } @@ -115,7 +115,7 @@ .manage-permissions { @include buttonStyle; - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--menu-foreground-color-rest); height: $s-32; display: flex; @@ -181,7 +181,7 @@ } .count-pages, .current-tag { - @include titleTipography; + @include bodyMedTipography; color: var(--input-foreground-color); } diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss index 982a9b4687..85225ba683 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.scss +++ b/frontend/src/app/main/ui/viewer/thumbnails.scss @@ -33,7 +33,7 @@ } .counter { - @include titleTipography; + @include bodyMedTipography; color: var(--viewer-thumbnails-control-foreground-color); } @@ -142,7 +142,7 @@ } .thumbnail-info { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; text-align: center; color: var(--viewer-thumbnails-control-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index 0a186880d7..05323527ba 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -97,6 +97,6 @@ } .color-palette-empty { - @include titleTipography; + @include bodyMedTipography; color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 4aa4b27167..665d406cd7 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -33,7 +33,7 @@ .option-wrapper { width: 100%; .library-name { - @include titleTipography; + @include bodyMedTipography; color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr $s-24; diff --git a/frontend/src/app/main/ui/workspace/colorpicker.cljs b/frontend/src/app/main/ui/workspace/colorpicker.cljs index dbd0da26a9..3c1cd04de4 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.cljs +++ b/frontend/src/app/main/ui/workspace/colorpicker.cljs @@ -9,6 +9,7 @@ (:require [app.common.colors :as cc] [app.common.data :as d] + [app.common.data.macros :as dm] [app.config :as cfg] [app.main.data.modal :as modal] [app.main.data.workspace.colors :as dc] @@ -50,6 +51,7 @@ ;; --- Color Picker Modal (mf/defc colorpicker + {::mf/props :obj} [{:keys [data disable-gradient disable-opacity disable-image on-change on-accept]}] (let [state (mf/deref refs/colorpicker) node-ref (mf/use-ref) @@ -90,7 +92,7 @@ (not @drag?))))) on-fill-image-click - (mf/use-callback #(dom/click (mf/ref-val fill-image-ref))) + (mf/use-fn #(dom/click (mf/ref-val fill-image-ref))) on-fill-image-selected (mf/use-fn @@ -107,7 +109,7 @@ (assoc :keep-aspect-ratio keep-aspect-ratio?))} true))))) - set-tab! + on-change-tab (mf/use-fn (fn [event] (let [tab (-> (dom/get-current-target event) @@ -157,9 +159,13 @@ on-select-library-color (mf/use-fn + (mf/deps data handle-change-color) (fn [_ color] - (st/emit! (dc/apply-color-from-colorpicker color)) - (on-change color))) + (if (and (some? (:color color)) (some? (:gradient data))) + (handle-change-color {:hex (:color color) :alpha (:opacity color)}) + (do + (st/emit! (dc/apply-color-from-colorpicker color)) + (on-change color))))) on-add-library-color (mf/use-fn @@ -226,7 +232,7 @@ (dom/set-css-property! node "--saturation-grad-from" (format-hsl hsl-from)) (dom/set-css-property! node "--saturation-grad-to" (format-hsl hsl-to)))) - ;; Updates color when used el pixel picker + ;; Updates color when pixel picker is used (mf/with-effect [picking-color? picked-color picked-color-select] (when (and picking-color? picked-color picked-color-select) (let [[r g b alpha] picked-color @@ -294,7 +300,7 @@ [:* [:div {:class (stl/css :colorpicker-tabs)} [:& tab-container - {:on-change-tab set-tab! + {:on-change-tab on-change-tab :selected @active-color-tab :collapsable false} @@ -349,7 +355,7 @@ :on-select-color on-select-library-color :on-add-library-color on-add-library-color}]]) - (when on-accept + (when (fn? on-accept) [:div {:class (stl/css :actions)} [:button {:class (stl/css-case :accept-color true @@ -372,59 +378,69 @@ x-pos 400] (cond - (or (nil? x) (nil? y)) #js {:left "auto" :right "16rem" :top "4rem"} + (or (nil? x) (nil? y)) + #js {:left "auto" :right "16rem" :top "4rem"} + (= position :left) (if (> y max-y) - #js {:left (str (- x x-pos) "px") + #js {:left (dm/str (- x x-pos) "px") :bottom "1rem"} - #js {:left (str (- x x-pos) "px") - :top (str (- y 70) "px")}) + #js {:left (dm/str (- x x-pos) "px") + :top (dm/str (- y 70) "px")}) + (= position :right) (if (> y max-y) - #js {:left (str (+ x 80) "px") + #js {:left (dm/str (+ x 80) "px") :bottom "1rem"} - #js {:left (str (+ x 80) "px") - :top (str (- y 70) "px")}) - :else (if (> y max-y) - #js {:left (str (+ x left-offset) "px") - :bottom "1rem"} - #js {:left (str (+ x left-offset) "px") - :top (str (- y 70) "px")})))) + #js {:left (dm/str (+ x 80) "px") + :top (dm/str (- y 70) "px")}) + + :else + (if (> y max-y) + #js {:left (dm/str (+ x left-offset) "px") + :bottom "1rem"} + #js {:left (dm/str (+ x left-offset) "px") + :top (dm/str (- y 70) "px")})))) (mf/defc colorpicker-modal {::mf/register modal/components - ::mf/register-as :colorpicker} + ::mf/register-as :colorpicker + ::mf/props :obj} [{:keys [x y data position disable-gradient disable-opacity disable-image on-change on-close - on-accept] :as props}] - (let [vport (mf/deref viewport) - dirty? (mf/use-var false) + on-accept]}] + (let [vport (mf/deref viewport) + dirty? (mf/use-var false) last-change (mf/use-var nil) - position (or position :left) - style (calculate-position vport position x y) + position (d/nilv position :left) + style (calculate-position vport position x y) - handle-change - (fn [new-data] - (reset! dirty? (not= data new-data)) - (reset! last-change new-data) - (when on-change - (on-change new-data)))] + on-change' + (mf/use-fn + (mf/deps on-change) + (fn [new-data] + (reset! dirty? (not= data new-data)) + (reset! last-change new-data) - (mf/use-effect - (fn [] - #(when (and @dirty? @last-change on-close) - (on-close @last-change)))) + (if (fn? on-change) + (on-change new-data) + (st/emit! (dc/update-colorpicker new-data)))))] + + (mf/with-effect [] + #(when (and @dirty? @last-change on-close) + (on-close @last-change))) [:div {:class (stl/css :colorpicker-tooltip) :style style} + [:& colorpicker {:data data :disable-gradient disable-gradient :disable-opacity disable-opacity :disable-image disable-image - :on-change handle-change + :on-change on-change' :on-accept on-accept}]])) diff --git a/frontend/src/app/main/ui/workspace/colorpicker.scss b/frontend/src/app/main/ui/workspace/colorpicker.scss index 62a7e55271..7865e349f2 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker.scss @@ -108,7 +108,7 @@ } .accept-color { - @include tabTitleTipography; + @include uppercaseTitleTipography; @extend .button-secondary; width: 100%; height: $s-32; @@ -161,7 +161,7 @@ .choose-image { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; margin-top: $s-12; height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss index be13a492b5..4b02ceec61 100644 --- a/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss +++ b/frontend/src/app/main/ui/workspace/colorpicker/hsva.scss @@ -19,7 +19,7 @@ } .hsva-selector-label { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; justify-content: flex-start; diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index b62b640f81..7e64da75d0 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -15,7 +15,7 @@ .comments-section-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; @@ -96,7 +96,7 @@ } } .label { - @include titleTipography; + @include bodyMedTipography; } &:hover { .icon svg { @@ -150,7 +150,7 @@ } .placeholder-label { - @include titleTipography; + @include bodyMedTipography; text-align: center; width: $s-184; color: var(--empty-message-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss index b83f67bb45..a1758561b9 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.scss +++ b/frontend/src/app/main/ui/workspace/context_menu.scss @@ -37,7 +37,7 @@ cursor: pointer; .title { - @include titleTipography; + @include bodyMedTipography; color: var(--menu-foreground-color); } .shortcut { @@ -45,7 +45,7 @@ gap: $s-2; color: var(--menu-shortcut-foreground-color); .shortcut-key { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; height: $s-20; padding: $s-2 $s-6; diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index 394ab58906..c6ebf454ae 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -36,7 +36,7 @@ .project-name, .file-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; @include textEllipsis; height: $s-16; width: 100%; @@ -47,7 +47,7 @@ } .file-name { - @include medTitleTipography; + @include smallTitleTipography; text-transform: none; color: var(--title-foreground-color-hover); } diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 871c537997..cd9032a851 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -368,12 +368,12 @@ 0 (count colors) (count typographies))]] - [:input {:type "button" - :class (stl/css-case :item-update true - :disabled updating?) - :value (tr "workspace.libraries.update") - :data-library-id (dm/str id) - :on-click update}] + [:button {:type "button" + :class (stl/css :item-update) + :disabled updating? + :data-library-id (dm/str id) + :on-click update} + (tr "workspace.libraries.update")] [:div {:class (stl/css :libraries-updates)} (when-not (empty? components) diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 3fa999a1e1..ec759217e3 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -15,227 +15,231 @@ width: 100%; z-index: $z-index-modal; background-color: var(--overlay-color); +} - .modal-dialog { - position: relative; - height: $s-520; - max-height: 100%; - width: $s-712; - padding: $s-32; - border-radius: $br-10; - background-color: var(--modal-background-color); - .close { - @extend .button-tertiary; - position: absolute; - top: $s-8; - right: $s-8; - width: $s-28; - height: $s-32; - border-radius: $br-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - - .modal-title { - @include headlineMediumTypography; - margin-bottom: $s-16; - color: var(--modal-title-foreground-color); - } - - .modal-content { - height: 100%; - .libraries-header { - height: 100%; - } - .libraries-content, - .updates-content { - display: grid; - grid-template-columns: 1fr 1fr; - gap: $s-32; - padding-top: $s-24; - height: 100%; - max-height: $s-400; - .section { - display: flex; - flex-direction: column; - height: calc(100% - $s-12); - .title-spacing-lib { - margin: 0 0 0 calc(-1 * $s-8); - } - .section-list, - .section-list-shared { - height: 100%; - max-height: $s-320; - margin-top: $s-12; - overflow: auto; - .section-list-item { - display: grid; - grid-template-columns: 1fr auto; - column-gap: $s-12; - margin-bottom: $s-24; - &:last-child { - margin-bottom: $s-8; - } - .item-name { - @include bodyLargeTypography; - color: var(--library-name-foreground-color); - } - .item-publish, - .item-unpublish { - @extend .button-primary; - @include tabTitleTipography; - height: $s-32; - min-width: $s-92; - padding: $s-8 $s-24; - border-radius: $br-8; - } - .item-update { - @extend .button-warning; - @include headlineMediumTypography; - height: $s-32; - min-width: $s-92; - padding: $s-8 $s-24; - border-radius: $br-8; - margin-right: $s-2; - &.disabled { - @extend .button-disabled; - } - } - .item-unpublish { - @extend .button-secondary; - } - .item-button, - .item-button-shared { - @extend .button-secondary; - padding: $s-8 $s-24; - height: $s-32; - border-radius: $br-8; - margin-right: $s-2; - padding: $s-8; - width: $s-32; - margin-left: $s-8; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - - .item-button-icon { - width: $s-28; - height: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - } - } - .section-list-shared { - max-height: $s-272; - } - - .section-title { - @include bodyLargeTypography; - color: var(--modal-title-foreground-color); - margin-bottom: $s-12; - } - - .libraries-search { - margin: $s-12 0; - .search-icon { - @include flexCenter; - padding: 0 0 0 $s-8; - width: $s-20; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } - } - } - .section-list-empty { - @include bodyLargeTypography; - @include flexCenter; - color: var(--empty-message-foreground-color); - - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - width: $s-16; - height: $s-16; - } - } - } - .libraries-updates { - display: grid; - grid-column: span 3; - grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr)); - grid-gap: $s-24; - font-size: $fs-12; - margin-top: $s-16; - - .libraries-updates-item { - display: flex; - align-items: center; - - &:not(:first-child) { - margin-top: $s-8; - } - - & svg { - background-color: var(--color-canvas); - border-radius: $br-4; - border: $s-2 solid transparent; - height: $s-24; - width: $s-24; - min-height: $s-24; - min-width: $s-24; - } - - & .name-block { - color: var(--gray-20-color); - margin-left: $s-8; - width: $s-168; - - &.ellipsis { - padding-left: calc($s-24 + #{$s-8}); - } - } - - & .item-name { - display: block; - margin: 0; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - } - } - } - .libraries-updates-see-all { - direction: rtl; - grid-column: span 3; - margin-top: $s-8; - margin-right: $s-8; - & input { - @extend .link; - margin: 0; - } - } - } - .updates-content { - grid-template-columns: 1fr; - } +.modal-dialog { + position: relative; + height: $s-520; + max-height: 100%; + width: $s-712; + padding: $s-32; + border-radius: $br-10; + background-color: var(--modal-background-color); + .close { + @extend .button-tertiary; + position: absolute; + top: $s-8; + right: $s-8; + width: $s-28; + height: $s-32; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); } } - .modal-v2-info { - width: $s-664; - height: fit-content; + .modal-title { + @include headlineMediumTypography; + margin-bottom: $s-16; + color: var(--modal-title-foreground-color); + } +} - .modal-title { - font-size: $fs-18; +.modal-content { + height: 100%; + .libraries-header { + height: 100%; + } + .libraries-content, + .updates-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-32; + padding-top: $s-24; + height: 100%; + max-height: $s-400; + .section { + display: flex; + flex-direction: column; + height: calc(100% - $s-12); + .title-spacing-lib { + margin: 0 0 0 calc(-1 * $s-8); + } + .section-list, + .section-list-shared { + height: 100%; + max-height: $s-320; + margin-top: $s-12; + overflow: auto; + .section-list-item { + display: grid; + grid-template-columns: 1fr auto; + column-gap: $s-12; + margin-bottom: $s-24; + &:last-child { + margin-bottom: $s-8; + } + .item-name { + @include bodyLargeTypography; + color: var(--library-name-foreground-color); + } + .item-publish, + .item-unpublish { + @extend .button-primary; + @include uppercaseTitleTipography; + height: $s-32; + min-width: $s-92; + padding: $s-8 $s-24; + border-radius: $br-8; + } + + .item-unpublish { + @extend .button-secondary; + } + .item-button, + .item-button-shared { + @extend .button-secondary; + padding: $s-8 $s-24; + height: $s-32; + border-radius: $br-8; + margin-right: $s-2; + padding: $s-8; + width: $s-32; + margin-left: $s-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + + .item-button-icon { + width: $s-28; + height: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + } + .section-list-shared { + max-height: $s-272; + } + + .section-title { + @include bodyLargeTypography; + color: var(--modal-title-foreground-color); + margin-bottom: $s-12; + } + + .libraries-search { + margin: $s-12 0; + .search-icon { + @include flexCenter; + padding: 0 0 0 $s-8; + width: $s-20; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + } + .section-list-empty { + @include bodyLargeTypography; + @include flexCenter; + color: var(--empty-message-foreground-color); + + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + width: $s-16; + height: $s-16; + } + } } + + .libraries-updates-see-all { + direction: rtl; + grid-column: span 3; + margin-top: $s-8; + margin-right: $s-8; + & input { + @extend .link; + margin: 0; + } + } + } + .updates-content { + grid-template-columns: 1fr; + } +} + +.libraries-updates { + display: grid; + grid-column: span 3; + grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr)); + grid-gap: $s-24; + font-size: $fs-12; + margin-top: $s-16; + + .libraries-updates-item { + display: flex; + align-items: center; + color: var(--library-content-foreground-color); + + &:not(:first-child) { + margin-top: $s-8; + } + + & svg { + background-color: var(--color-canvas); + border-radius: $br-4; + border: $s-2 solid transparent; + height: $s-24; + width: $s-24; + min-height: $s-24; + min-width: $s-24; + } + + & .name-block { + color: var(--gray-20-color); + margin-left: $s-8; + width: $s-168; + + &.ellipsis { + padding-left: calc($s-24 + #{$s-8}); + } + } + + & .item-name { + display: block; + margin: 0; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } +} + +.modal-v2-info { + width: $s-664; + height: fit-content; + .modal-title { + font-size: $fs-18; + } +} + +.item-update { + @extend .button-primary; + @include uppercaseTitleTipography; + height: $s-32; + min-width: $s-92; + padding: $s-8 $s-24; + border-radius: $br-8; + margin-right: $s-2; + &:disabled { + @extend .button-disabled; } } @@ -308,7 +312,7 @@ justify-content: flex-end; .primary-button { @extend .button-primary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-0 $s-16; } } diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs index f1afac29d8..cdf6c6e238 100644 --- a/frontend/src/app/main/ui/workspace/presence.cljs +++ b/frontend/src/app/main/ui/workspace/presence.cljs @@ -15,61 +15,64 @@ [app.util.timers :as tm] [rumext.v2 :as mf])) -;; --- SESSION WIDGET - (mf/defc session-widget - [{:keys [session profile index] :as props}] - (let [profile (assoc profile :color (:color session))] + {::mf/props :obj + ::mf/memo true} + [{:keys [color profile index]}] + (let [profile (assoc profile :color color) + full-name (:fullname profile)] [:li {:class (stl/css :session-icon) - :style {:z-index (str (or (+ 1 (* -1 index)) 0)) - :background-color (:color session)} - :title (:fullname profile)} - [:img {:alt (:fullname profile) - :style {:background-color (:color session)} + :style {:z-index (dm/str (+ 1 (* -1 index))) + :background-color color} + :title full-name} + [:img {:alt full-name + :style {:background-color color} :src (cfg/resolve-profile-photo-url profile)}]])) (mf/defc active-sessions - {::mf/wrap [mf/memo]} + {::mf/memo true} [] (let [users (mf/deref refs/users) presence (mf/deref refs/workspace-presence) - user-ids (vals presence) - num-users (count user-ids) - first-users (take 2 user-ids) + + sessions (vals presence) + num-sessions (count sessions) + open* (mf/use-state false) - open? (deref open*) - open-users-widget + open? (and ^boolean (deref open*) (> num-sessions 2)) + on-open (mf/use-fn (fn [] (reset! open* true) (tm/schedule-on-idle #(dom/focus! (dom/get-element "users-close"))))) - close-users-widget (mf/use-fn #(reset! open* false))] + + on-close + (mf/use-fn #(reset! open* false))] [:* - (when (and (> num-users 2) open?) + (when ^boolean open? [:button {:id "users-close" :class (stl/css :active-users-opened) - :on-click close-users-widget - :on-blur close-users-widget} + :on-click on-close + :on-blur on-close} [:ul {:class (stl/css :active-users-list)} - (for [session user-ids] + (for [session sessions] [:& session-widget - {:session session + {:color (:color session) :index 0 :profile (get users (:profile-id session)) - :key (:id session)}])]]) + :key (dm/str (:id session))}])]]) [:button {:class (stl/css-case :active-users true) - :on-click open-users-widget} - + :on-click on-open} [:ul {:class (stl/css :active-users-list)} - (when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))]) - (for [[index session] (d/enumerate first-users)] + (when (> num-sessions 2) + [:span {:class (stl/css :users-num)} (dm/str "+" (- num-sessions 2))]) + + (for [[index session] (d/enumerate (take 2 sessions))] [:& session-widget - {:session session + {:color (:color session) :index index :profile (get users (:profile-id session)) - :key (:id session)}])]]])) - - + :key (dm/str (:id session))}])]]])) diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index c7a45ab87b..f860b12401 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -36,7 +36,7 @@ width: $s-48; border-radius: $br-8; .label { - @include titleTipography; + @include bodyMedTipography; color: var(--button-tertiary-foreground-color-rest); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index b5b44d3dbc..99d79ed62e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -19,7 +19,7 @@ .libraries-button { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; gap: $s-2; height: $s-32; width: 100%; @@ -113,7 +113,7 @@ } .section-item { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; 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 50e2ed9404..333e4e2fab 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs @@ -377,6 +377,7 @@ (grp/group-assets colors reverse-sort?)) read-only? (mf/use-ctx ctx/workspace-read-only?) + add-color (mf/use-fn (fn [value _] @@ -386,23 +387,22 @@ (mf/use-fn (mf/deps file-id) (fn [event] - (let [bounding-rect (-> event - (dom/get-current-target) - (dom/get-bounding-rect)) - x-position (:right bounding-rect) - y-position (:top bounding-rect)] + (let [bounds (-> event + (dom/get-current-target) + (dom/get-bounding-rect)) + x-position (:right bounds) + y-position (:top bounds)] (st/emit! (dw/set-assets-section-open file-id :colors true) (ptk/event ::ev/event {::ev/name "add-asset-to-library" - :asset-type "color"})) - ;; FIXME: replace interop with dom helpers - (modal/show! :colorpicker - {:x x-position - :y y-position - :on-accept add-color - :data {:color "#406280" - :opacity 1} - :position :right})))) + :asset-type "color"}) + (modal/show :colorpicker + {:x x-position + :y y-position + :on-accept add-color + :data {:color "#406280" + :opacity 1} + :position :right}))))) create-group (mf/use-fn 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 c2ad1f9708..1cf4a6088e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -45,7 +45,7 @@ border: $s-1 solid var(--input-border-color-focus); input.element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; @@ -67,7 +67,7 @@ } .name-block { - @include titleTipography; + @include bodyMedTipography; display: grid; grid-template-columns: auto 1fr; margin: 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 063cfa831c..1b33dcf6a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -7,7 +7,7 @@ @import "refactor/common-refactor.scss"; .title-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; flex-grow: 1; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index d5189b67e7..149f4a398f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -29,7 +29,7 @@ cursor: pointer; .cell-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -44,7 +44,7 @@ color: var(--assets-item-name-foreground-color); input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; height: auto; padding: 0; @@ -132,13 +132,13 @@ } .item-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; order: 2; color: var(--assets-item-name-foreground-color); input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; height: $s-32; padding: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index 73068d6857..32673ec812 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -14,7 +14,7 @@ } .file-name { - @include titleTipography; + @include bodyMedTipography; display: flex; justify-content: flex-start; align-items: center; @@ -71,6 +71,6 @@ } .no-found-text { - @include titleTipography; + @include bodyMedTipography; color: var(--not-found-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss index d875778a68..834dbb5446 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -36,7 +36,7 @@ height: 10vh; } .cell-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -110,7 +110,7 @@ } .item-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-left: $s-8; color: var(--assets-item-name-foreground-color); diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss index 209c441e35..0bbca2d4e2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss @@ -37,7 +37,7 @@ } .modal-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--modal-title-foreground-color); } .modal-close-btn { @@ -45,7 +45,7 @@ } .modal-content { - @include titleTipography; + @include bodyMedTipography; margin-bottom: $s-24; } .input-wrapper { diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.scss b/frontend/src/app/main/ui/workspace/sidebar/debug.scss index 96364d88ee..6cb0c14056 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug.scss @@ -14,7 +14,7 @@ .panel-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss index 3b231ce612..516a1f7058 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/debug_shape_info.scss @@ -17,7 +17,7 @@ .shape-info-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 312967c78a..221547c73c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -14,7 +14,7 @@ .history-toolbox-title { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; min-height: $s-32; @@ -59,7 +59,7 @@ } .history-entry-empty-msg { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss index 46ee413658..45dac47713 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss @@ -8,7 +8,7 @@ .element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--context-hover-color, var(--layer-row-foreground-color)); &.selected { @@ -27,7 +27,7 @@ } .element-name-input { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index 25cf2cc4a9..c84e3449bd 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -69,7 +69,7 @@ } .page-name { - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: 0 $s-12; color: var(--title-foreground-color); } @@ -108,7 +108,7 @@ } .focus-name { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: 100%; @@ -124,7 +124,7 @@ .focus-mode-tag { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-20; padding: $s-4 $s-6; border: $s-1 solid var(--tag-background-color); @@ -160,7 +160,7 @@ .layer-filter-name { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; color: var(--pill-foreground-color); } @@ -170,7 +170,7 @@ left: $s-12; width: $s-192; .filter-menu-item { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; justify-content: space-between; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss index a7f64e93ba..442db729d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss @@ -57,7 +57,7 @@ } } .label { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; display: flex; align-items: center; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index c2baaf769a..882cd276d1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -85,13 +85,11 @@ :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") :id "bool-opt-exclude"}]]] - [:div {:class (stl/css :bool-group)} - [:button - {:title (tr "workspace.shape.menu.flatten") - :class (stl/css-case - :flatten-button true - :disabled disabled-flatten) - :disabled disabled-flatten - :on-click flatten-objects} - flatten-icon]]]))) - + [:button + {:title (tr "workspace.shape.menu.flatten") + :class (stl/css-case + :flatten-button true + :disabled disabled-flatten) + :disabled disabled-flatten + :on-click flatten-objects} + flatten-icon]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss index bc26d5b8be..a325143a92 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -7,15 +7,16 @@ @import "refactor/common-refactor.scss"; .boolean-options { - display: flex; - gap: $s-4; + display: grid; + grid-template-columns: repeat(8, $s-28); + column-gap: $s-4; height: $s-32; - margin: 0 calc(-1 * $s-2); } .bool-group { - display: flex; - align-items: center; + display: grid; + grid-template-columns: subgrid; + grid-column: 1 / span 4; } .flatten-button { @@ -23,6 +24,7 @@ height: $s-32; width: $s-32; border-radius: $br-8; + grid-column: 5 / span 1; --flatten-icon-foreground-color: var(--icon-foreground); &.disabled { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss index 56e096768f..0ded56cb7a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss @@ -35,6 +35,6 @@ .more-colors-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss index 028e98536e..16145e4135 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss @@ -15,7 +15,7 @@ } .title-back { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; gap: $s-4; @@ -87,7 +87,7 @@ } .component-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; text-align: left; @@ -95,7 +95,7 @@ } .component-parent-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; text-align: left; @@ -134,7 +134,7 @@ } .copy-text { - @include titleTipography; + @include bodyMedTipography; height: 100%; display: flex; align-items: center; @@ -235,7 +235,7 @@ } .path-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; direction: rtl; height: $s-32; @@ -243,7 +243,7 @@ } .path-name-last { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; height: $s-32; padding: $s-8 0 $s-8 $s-2; @@ -251,7 +251,7 @@ } .component-list-empty { - @include titleTipography; + @include bodyMedTipography; margin: 0 $s-4 0 $s-8; color: $df-secondary; } @@ -337,7 +337,7 @@ object-fit: contain; } .component-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: none; position: absolute; @@ -383,7 +383,7 @@ } .element-set-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; height: $s-32; @@ -422,7 +422,7 @@ } .library-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; color: var(--title-foreground-color); padding: $s-8 0 $s-8 $s-2; @@ -443,7 +443,7 @@ } .component-group { - @include titleTipography; + @include bodyMedTipography; display: grid; grid-template-columns: 1fr $s-12; height: $s-32; @@ -486,7 +486,7 @@ // Component annotation .component-annotation { - @include titleTipography; + @include bodyMedTipography; color: var(--entry-foreground-color); border-radius: $br-8; @@ -604,7 +604,7 @@ } .counter { - @include titleTipography; + @include bodyMedTipography; text-align: right; color: var(--entry-foreground-color); margin: 0 $s-8 $s-8 0; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss index c3d33b3f19..2114b7cd05 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss @@ -134,7 +134,7 @@ } label { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; gap: $s-2; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss index 6bbb39afd9..49dd4fe1c5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss @@ -96,7 +96,7 @@ .export-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; height: $s-32; width: $s-252; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs index e7c5560f71..c818dc8264 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs @@ -48,6 +48,7 @@ [:div {:class (stl/css :self-align-menu)} [:& radio-buttons {:selected (d/name alignment) :on-change handle-set-alignment + :allow-empty true :name (dm/str "flex-align-items-" type)} [:& radio-button {:value "start" :icon (if is-col? i/align-self-row-left-refactor i/align-self-column-top-refactor) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss index 602a132934..60e990dfa3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.scss @@ -26,7 +26,7 @@ .edit-grid-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; padding: $s-8; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index f9eb79f54f..fe0d2b1b0c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -55,12 +55,12 @@ } .after { - @include titleTipography; + @include bodyMedTipography; margin-top: $s-1; } .interactions-help { - @include titleTipography; + @include bodyMedTipography; text-align: center; color: var(--title-foreground-color); } @@ -120,7 +120,7 @@ } .interaction-name { @include twoLineTextEllipsis; - @include titleTipography; + @include bodyMedTipography; padding-left: $s-4; width: $s-92; margin: auto 0; @@ -287,7 +287,7 @@ } .flow-name-wrapper { - @include titleTipography; + @include bodyMedTipography; @include focusInput; display: flex; align-items: center; @@ -324,7 +324,7 @@ } .flow-input-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index fd5e423246..ce4ecc472c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -61,7 +61,7 @@ :layout-grid-rows]) (defn get-layout-flex-icon - [type val is-col?] + [type val ^boolean is-col?] (case type :align-items (if is-col? @@ -115,7 +115,6 @@ :space-between i/align-content-row-between-refactor :stretch nil)) - :align-self (if is-col? (case val @@ -134,7 +133,7 @@ :baseline i/align-self-column-baseline)))) (defn get-layout-grid-icon-refactor - [type val is-col?] + [type val ^boolean is-col?] (case type :align-items (if is-col? @@ -171,7 +170,8 @@ :stretch i/align-content-row-stretch-refactor)))) (mf/defc direction-row-flex - [{:keys [saved-dir on-change] :as props}] + {::mf/props :obj} + [{:keys [saved-dir on-change]}] [:& radio-buttons {:selected (d/name saved-dir) :on-change on-change :name "flex-direction"} @@ -193,7 +193,8 @@ :icon (dir-icons-refactor :column-reverse)}]]) (mf/defc wrap-row - [{:keys [wrap-type on-click] :as props}] + {::mf/props :obj} + [{:keys [wrap-type on-click]}] [:button {:class (stl/css-case :wrap-button true :selected (= wrap-type :wrap)) :title (if (= :wrap wrap-type) @@ -203,7 +204,8 @@ i/wrap-refactor]) (mf/defc align-row - [{:keys [is-col? align-items on-change] :as props}] + {::mf/props :obj} + [{:keys [is-col? align-items on-change]}] [:& radio-buttons {:selected (d/name align-items) :on-change on-change :name "flex-align-items"} @@ -221,7 +223,8 @@ :id "align-items-end"}]]) (mf/defc align-content-row - [{:keys [is-col? align-content on-change] :as props}] + {::mf/props :obj} + [{:keys [is-col? align-content on-change]}] [:& radio-buttons {:selected (d/name align-content) :on-change on-change :name "flex-align-content"} @@ -251,7 +254,8 @@ :id "align-content-space-evenly"}]]) (mf/defc justify-content-row - [{:keys [is-col? justify-content on-change] :as props}] + {::mf/props :obj} + [{:keys [is-col? justify-content on-change]}] [:& radio-buttons {:selected (d/name justify-content) :on-change on-change :name "flex-justify"} @@ -281,8 +285,8 @@ :id "justify-content-space-evenly"}]]) (mf/defc padding-section - [{:keys [values on-change-style on-change] :as props}] - + {::mf/props :obj} + [{:keys [values on-change-style on-change]}] (let [padding-type (:layout-padding-type values) toggle-padding-mode @@ -418,6 +422,7 @@ i/padding-extended-refactor]])) (mf/defc gap-section + {::mf/props :obj} [{:keys [is-col? wrap-type gap-selected? on-change gap-value]}] (let [select-gap (fn [gap] @@ -474,7 +479,7 @@ ;; GRID COMPONENTS (defn get-layout-grid-icon - [type val is-col?] + [type val ^boolean is-col?] (case type :justify-items (if is-col? @@ -497,6 +502,7 @@ :space-evenly i/grid-justify-content-row-between)))) (mf/defc direction-row-grid + {::mf/props :obj} [{:keys [saved-dir on-change] :as props}] [:& radio-buttons {:selected (d/name saved-dir) :on-change on-change @@ -511,7 +517,8 @@ :icon (dir-icons-refactor :column)}]]) (mf/defc grid-edit-mode - [{:keys [id] :as props}] + {::mf/props :obj} + [{:keys [id]}] (let [edition (mf/deref refs/selected-edition) active? (= id edition) @@ -529,7 +536,8 @@ (tr "workspace.layout_grid.editor.options.edit-grid")])) (mf/defc align-grid-row - [{:keys [is-col? align-items set-align] :as props}] + {::mf/props :obj} + [{:keys [is-col? align-items set-align]}] (let [type (if is-col? :column :row)] [:& radio-buttons {:selected (d/name align-items) :on-change #(set-align % type) @@ -548,7 +556,8 @@ :id (dm/str "align-items-end-" (d/name type))}]])) (mf/defc justify-grid-row - [{:keys [is-col? justify-items set-justify] :as props}] + {::mf/props :obj} + [{:keys [is-col? justify-items set-justify]}] (let [type (if is-col? :column :row)] [:& radio-buttons {:selected (d/name justify-items) @@ -561,7 +570,8 @@ :title (dm/str "Justify items " (d/name justify)) :id (dm/str "justify-items-" (d/name justify) "-" (d/name type))}])])) -(defn manage-values [{:keys [value type]}] +(defn- manage-values + [{:keys [type value]}] (case type :auto "auto" :percent (fmt/format-percent value) @@ -570,6 +580,7 @@ value)) (mf/defc grid-track-info + {::mf/props :obj} [{:keys [is-col? type index @@ -650,12 +661,13 @@ i/remove-refactor]])) (mf/defc grid-columns-row + {::mf/props :obj} [{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type - remove-element reorder-track hover-track on-select-track] :as props}] + remove-element reorder-track hover-track on-select-track]}] (let [column-num (count column-values) direction (if (> column-num 1) - (if is-col? "Columns " "Rows ") - (if is-col? "Column " "Row ")) + (if ^boolean is-col? "Columns " "Rows ") + (if ^boolean is-col? "Column " "Row ")) track-name (dm/str direction (if (= column-num 0) " - empty" column-num)) track-detail (str/join ", " (map manage-values column-values)) @@ -694,8 +706,9 @@ ;; LAYOUT COMPONENT (mf/defc layout-container-menu - {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "multiple"]))]} - [{:keys [ids values multiple] :as props}] + {::mf/memo #{:ids :values :multiple} + ::mf/props :obj} + [{:keys [ids values multiple]}] (let [;; Display layout-type (:layout values) has-layout? (some? layout-type) @@ -711,7 +724,7 @@ toggle-content (mf/use-fn #(swap! state* not)) on-add-layout - (mf/use-callback + (mf/use-fn (fn [type] (st/emit! (dwsl/create-layout type)) (reset! state* true))) @@ -730,13 +743,13 @@ (reset! state* false)) set-flex - (mf/use-callback + (mf/use-fn (mf/deps on-add-layout) (fn [] (on-add-layout :flex))) set-grid - (mf/use-callback + (mf/use-fn (mf/deps on-add-layout) (fn [] (on-add-layout :grid))) @@ -875,22 +888,22 @@ (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) handle-show-layout-dropdown - (mf/use-callback + (mf/use-fn (fn [] (swap! show-layout-dropdown* not))) handle-close-layout-options - (mf/use-callback + (mf/use-fn (fn [] (reset! show-layout-dropdown* false))) handle-open-flex-help - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dom/open-new-window cf/flex-help-uri)))) handle-open-grid-help - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dom/open-new-window cf/grid-help-uri))))] @@ -1007,12 +1020,22 @@ :set-justify set-justify-grid}] [:& justify-grid-row {:is-col? false :justify-items grid-justify-content-row - :set-justify set-justify-grid}]]] + :set-justify set-justify-grid}]] + [:div {:class (stl/css :row)} + [:& gap-section {:gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}]] + + [:div {:class (stl/css :row :padding-section)} + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]]] nil)))])) (mf/defc grid-layout-edition - {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]} - [{:keys [ids values] :as props}] + {::mf/memo #{:ids :values} + ::mf/props :obj} + [{:keys [ids values]}] (let [;; Gap gap-selected? (mf/use-state :none) saved-grid-dir (:layout-grid-dir values) @@ -1135,12 +1158,12 @@ (st/emit! (dwsl/change-layout-track ids type index {:value value :type track-type}))))) handle-open-grid-help - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dom/open-new-window cf/grid-help-uri)))) handle-locate-grid - (mf/use-callback + (mf/use-fn (fn [] (st/emit! (dwge/locate-board (first ids)))))] @@ -1178,6 +1201,17 @@ [:button {:on-click handle-locate-grid :class (stl/css :locate-button)} i/locate-refactor]] + + [:div {:class (stl/css :row)} + [:& gap-section {:gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}]] + + [:div {:class (stl/css :row :padding-section)} + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]] + [:div {:class (stl/css :row :grid-tracks-row)} [:& grid-columns-row {:is-col? true :expanded? @grid-columns-open? @@ -1201,13 +1235,4 @@ :remove-element remove-element :reorder-track reorder-track :hover-track hover-track - :on-select-track handle-select-track}]] - [:div {:class (stl/css :row)} - [:& gap-section {:gap-selected? gap-selected? - :on-change set-gap - :gap-value (:layout-gap values)}]] - - [:div {:class (stl/css :row :padding-section)} - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]]])) + :on-select-track handle-select-track}]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss index 93490738fd..62ce26e4f3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -176,14 +176,14 @@ .edit-mode-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; width: 100%; padding: $s-8; } .exit-btn { @extend .button-secondary; - @include tabTitleTipography; + @include uppercaseTitleTipography; padding: $s-8 $s-20; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss index e876cbfafb..26a6d6d993 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -21,6 +21,7 @@ .flex-element-menu { @include flexColumn; gap: $s-12; + margin-block-end: $s-8; } .behaviour-menu { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 1eeba68c8b..a3aaf2422a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -52,6 +52,11 @@ :svg-raw #{:size :position :rotation} :text #{:size :position :rotation}}) +(def ^:private clip-content-icon (i/icon-xref :clip-content-refactor (stl/css :checkbox-button))) +(def ^:private play-icon (i/icon-xref :play-refactor (stl/css :checkbox-button))) +(def ^:private locked-icon (i/icon-xref :detach-refactor (stl/css :lock-ratio-icon))) +(def ^:private unlocked-icon (i/icon-xref :detached-refactor (stl/css :lock-ratio-icon))) + (defn select-measure-keys "Consider some shapes can be drawn from bottom to top or from left to right" [shape] @@ -413,8 +418,8 @@ :disabled (= proportion-lock :multiple)) :on-click on-proportion-lock-change} (if proportion-lock - i/lock-refactor - i/unlock-refactor)]]) + locked-icon + unlocked-icon)]]) (when (options :position) [:div {:class (stl/css :position)} [:div {:class (stl/css-case :x-position true @@ -447,7 +452,7 @@ [:span {:class (stl/css :icon)} i/rotation-refactor] [:> numeric-input* {:no-validate true - :min 0 + :min -359 :max 359 :data-wrap true :placeholder (if (= :multiple (:rotation values)) (tr "settings.multiple") "--") @@ -543,8 +548,7 @@ :title (tr "workspace.options.clip-content") :class (stl/css-case :clip-content-label true :selected (not (:show-content values)))} - [:span {:class (stl/css :icon)} - i/clip-content-refactor]]]) + clip-content-icon]]) (when (options :show-in-viewer) [:div {:class (stl/css :show-in-viewer)} [:input {:type "checkbox" @@ -559,4 +563,4 @@ :class (stl/css-case :clip-content-label true :selected (not (:hide-in-viewer values)))} [:span {:class (stl/css :icon)} - i/play-refactor]]])])])) + play-icon]]])])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss index c7e4e533bb..3584a403ae 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -44,7 +44,7 @@ } .select-name { - @include titleTipography; + @include bodyMedTipography; display: flex; justify-content: flex-start; align-items: center; @@ -128,15 +128,16 @@ border-radius: $br-8; height: $s-32; width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } &.selected { @extend .button-icon-selected; } } +.lock-ratio-icon { + @extend .button-icon; + stroke: var(--icon-foreground); +} + .position { @include flexRow; } @@ -219,20 +220,19 @@ .clip-content-input { display: none; } - .clip-content-label { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - border-radius: $br-8; - .icon { - @include flexCenter; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - &.selected { - @extend .button-icon-selected; - } - } +} + +.clip-content-label { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; +} + +.selected { + @extend .button-icon-selected; +} + +.checkbox-button { + @extend .button-icon; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss index 036c14ca10..4e8a976981 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss @@ -26,7 +26,7 @@ } .attr-name { - @include titleTipography; + @include bodyMedTipography; @include twoLineTextEllipsis; width: $s-88; margin: auto $s-4; @@ -60,7 +60,7 @@ } .attr-title { - @include titleTipography; + @include bodyMedTipography; font-size: $fs-10; text-transform: uppercase; margin-inline-start: $s-4; diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss index 2e0c982989..e5daf0a5c1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss @@ -33,7 +33,7 @@ } .multiple-text { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; color: var(--input-foreground-color-active); } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index bec81db5be..9864dc2849 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -72,7 +72,7 @@ .typography-name, .typography-font { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: flex; align-items: center; @@ -90,7 +90,7 @@ } .font-name-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-32; @@ -169,7 +169,7 @@ color: var(--assets-item-name-foreground-color-hover); } .typography-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; display: flex; align-items: center; @@ -178,7 +178,7 @@ color: var(--assets-item-name-foreground-color-hover); } .typography-font { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; margin-left: $s-6; display: flex; @@ -207,14 +207,14 @@ --calcualted-width: calc(var(--width) - $s-48); padding-left: $s-2; .info-label { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; width: calc(var(--calcualted-width) / 2); padding-top: $s-8; color: var(--assets-item-name-foreground-color); } .info-content { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-top: $s-8; width: calc(var(--calcualted-width) / 2); @@ -223,7 +223,7 @@ } .link-btn { - @include tabTitleTipography; + @include uppercaseTitleTipography; @extend .button-secondary; width: 100%; height: $s-32; @@ -254,7 +254,7 @@ position: relative; } .font-option { - @include titleTipography; + @include bodyMedTipography; @extend .asset-element; padding: $s-8 0 $s-8 $s-8; cursor: pointer; @@ -277,7 +277,7 @@ gap: $s-4; .font-size-options { @extend .asset-element; - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; width: $s-60; margin: 0; @@ -331,7 +331,7 @@ .font-size-select { @include removeInputStyle; - @include titleTipography; + @include bodyMedTipography; height: $s-32; height: 100%; width: 100%; @@ -373,7 +373,7 @@ display: grid; row-gap: $s-2; .title { - @include tabTitleTipography; + @include uppercaseTitleTipography; color: var(--title-foreground-color); margin: 0; padding: $s-12; @@ -410,7 +410,7 @@ } .label { - @include titleTipography; + @include bodyMedTipography; flex-grow: 1; } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss index 0eb672b73a..d2b1fa0815 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss @@ -21,6 +21,7 @@ --detach-icon-foreground-color: none; display: grid; + flex: 1; grid-template-columns: 1fr auto; align-items: center; gap: $s-2; @@ -42,10 +43,15 @@ @extend .input-element; flex-grow: 1; width: 100%; + min-width: 0; border-radius: $br-8 0 0 $br-8; padding: 0; margin-inline-end: 0; gap: $s-4; + + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; input { padding: 0; } @@ -61,7 +67,7 @@ } } .color-name { - @include titleTipography; + @include bodyMedTipography; @include textEllipsis; padding-inline: $s-6; border-radius: $br-8; @@ -80,7 +86,7 @@ stroke: var(--detach-icon-foreground-color); } .color-input-wrapper { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index 530de55774..507e5d677a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -77,7 +77,7 @@ .shortcuts-header { @include flexCenter; - @include tabTitleTipography; + @include uppercaseTitleTipography; position: relative; height: $s-32; padding: $s-2 $s-2 $s-2 0; @@ -112,7 +112,7 @@ } .not-found { - @include titleTipography; + @include bodyMedTipography; color: var(--empty-message-foreground-color); margin: $s-12; } @@ -128,7 +128,7 @@ .section-title, .subsection-title { - @include tabTitleTipography; + @include uppercaseTitleTipography; display: flex; align-items: center; margin: 0; @@ -181,7 +181,7 @@ background-color: var(--pill-background-color); .command-name { - @include titleTipography; + @include bodyMedTipography; margin-left: $s-2; color: var(--pill-foreground-color); } @@ -191,7 +191,7 @@ color: var(--pill-foreground-color); .key { - @include titleTipography; + @include bodyMedTipography; @include flexCenter; text-transform: capitalize; height: $s-20; diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index fef43646a2..5c34dd6711 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -35,7 +35,7 @@ .view-only-mode { @include flexCenter; - @include titleTipography; + @include bodyMedTipography; height: $s-20; padding: $s-4 $s-6; margin-right: $s-12; @@ -75,7 +75,7 @@ } .page-element { - @include titleTipography; + @include bodyMedTipography; min-height: $s-32; width: 100%; cursor: pointer; @@ -139,7 +139,7 @@ } input.element-name { @include textEllipsis; - @include titleTipography; + @include bodyMedTipography; @include removeInputStyle; flex-grow: 1; height: $s-28; diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss index 43bbe062ba..44f9575736 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.scss +++ b/frontend/src/app/main/ui/workspace/text_palette.scss @@ -80,7 +80,7 @@ } .typography-item { - @include titleTipography; + @include bodyMedTipography; display: flex; flex-direction: column; justify-content: center; @@ -135,6 +135,6 @@ } .text-palette-empty { - @include titleTipography; + @include bodyMedTipography; color: var(--palette-text-color); } diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index d624d565a6..921371e05e 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -32,7 +32,7 @@ margin-bottom: 0; } .library-name { - @include titleTipography; + @include bodyMedTipography; color: var(--context-menu-foreground-color); display: grid; grid-template-columns: 1fr $s-24; diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs index ffd4a59bfd..e5d019464f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs @@ -6,6 +6,7 @@ (ns app.main.ui.workspace.viewport.presence (:require + [app.common.data.macros :as dm] [app.main.refs :as refs] [app.util.time :as dt] [app.util.timers :as ts] @@ -13,56 +14,66 @@ [cuerdas.core :as str] [rumext.v2 :as mf])) -(def pointer-icon-path - (str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46," - "15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58," - "-0.47ZL11.58,-0.47ZM11.58,1.3C12.31,2.05,13.02," - "2.742,13.76,3.47L4.0053,13.23C3.27,12.50,2.55," - "11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90," - "13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z")) +(def pointer-path + (dm/str "M11.58,-0.47L11.47,-0.35L0.34,10.77L0.30,10.96L-0.46," + "15.52L4.29,14.72L15.53,3.47L11.58,-0.47ZL11.58," + "-0.47ZL11.58,-0.47ZM11.58,1.3C12.31,2.05,13.02," + "2.742,13.76,3.47L4.0053,13.23C3.27,12.50,2.55," + "11.78,1.82,11.05L11.58,1.30ZL11.58,1.30ZM1.37,12.15L2.90," + "13.68L1.67,13.89L1.165,13.39L1.37,12.15ZL1.37,12.15Z")) (mf/defc session-cursor - [{:keys [session profile] :as props}] - (let [zoom (mf/deref refs/selected-zoom) - point (:point session) - background-color (:color session "var(--app-black)") - text-color (:text-color session "var(--app-white)") - transform (str/fmt "translate(%s, %s) scale(%s)" (:x point) (:y point) (/ 1 zoom)) - shown-name (if (> (count (:fullname profile)) 16) - (str (str/slice (:fullname profile) 0 12) "...") - (:fullname profile))] + {::mf/props :obj + ::mf/memo true} + [{:keys [session profile zoom]}] + (let [point (:point session) + bg-color (:color session) + fg-color "var(--app-white)" + transform (str/ffmt "translate(%, %) scale(%)" + (dm/get-prop point :x) + (dm/get-prop point :y) + (/ 1 zoom)) + + + fullname (:fullname profile) + fullname (if (> (count fullname) 16) + (dm/str (str/slice fullname 0 12) "...") + fullname)] + [:g.multiuser-cursor {:transform transform} - [:path {:fill background-color - :d pointer-icon-path}] + [:path {:fill bg-color :d pointer-path}] [:g {:transform "translate(17 -10)"} [:foreignObject {:x -0.3 :y -12.5 :width 300 :height 120} - [:div.profile-name {:style {:background-color background-color - :color text-color}} - shown-name]]]])) + [:div.profile-name {:style {:background-color bg-color + :color fg-color}} + fullname]]]])) (mf/defc active-cursors - {::mf/wrap [mf/memo]} - [{:keys [page-id] :as props}] + {::mf/props :obj} + [{:keys [page-id]}] (let [counter (mf/use-state 0) users (mf/deref refs/users) sessions (mf/deref refs/workspace-presence) + zoom (mf/deref refs/selected-zoom) + sessions (->> (vals sessions) + (filter :point) (filter #(= page-id (:page-id %))) - (filter #(>= 5000 (- (inst-ms (dt/now)) (inst-ms (:updated-at %))))))] - (mf/use-effect - nil - (fn [] - (let [sem (ts/schedule 1000 #(swap! counter inc))] - (fn [] (rx/dispose! sem))))) + (filter #(>= 5000 (- (inst-ms (dt/now)) + (inst-ms (:updated-at %))))))] + (mf/with-effect nil + (let [sem (ts/schedule 1000 #(swap! counter inc))] + (fn [] (rx/dispose! sem)))) (for [session sessions] - (when (:point session) - [:& session-cursor {:session session - :profile (get users (:profile-id session)) - :key (:id session)}])))) + [:& session-cursor + {:session session + :zoom zoom + :profile (get users (:profile-id session)) + :key (dm/str (:id session))}]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss index 19d5e467f7..be0c4d249c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss @@ -26,7 +26,7 @@ cursor: pointer; display: flex; .content { - @include titleTipography; + @include bodyMedTipography; display: flex; align-items: center; height: $s-24; diff --git a/frontend/src/app/worker/import/parser.cljs b/frontend/src/app/worker/import/parser.cljs index 017a87710a..a0da1e60d0 100644 --- a/frontend/src/app/worker/import/parser.cljs +++ b/frontend/src/app/worker/import/parser.cljs @@ -820,10 +820,13 @@ (defn add-frame-data [props node] (let [grids (parse-grids node) show-content (get-meta node :show-content str->bool) - hide-in-viewer (get-meta node :hide-in-viewer str->bool)] + hide-in-viewer (get-meta node :hide-in-viewer str->bool) + use-for-thumbnail (get-meta node :use-for-thumbnail str->bool)] (-> props (assoc :show-content show-content) (assoc :hide-in-viewer hide-in-viewer) + (cond-> use-for-thumbnail + (assoc :use-for-thumbnail use-for-thumbnail)) (cond-> (d/not-empty? grids) (assoc :grids grids))))) diff --git a/frontend/translations/cs.po b/frontend/translations/cs.po index e184dd3ff0..8109be00dc 100644 --- a/frontend/translations/cs.po +++ b/frontend/translations/cs.po @@ -4768,10 +4768,6 @@ msgstr "InVision" msgid "questions.leave-feedback-for-my-team-project" msgstr "Zanechte zpětnou vazbu pro můj týmový projekt" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nikdy jsem nepoužil žádný designový nástroj" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Další" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index 05363079ae..8d63988098 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -4990,10 +4990,6 @@ msgstr[1] "Sie sind in keiner Datei aktiviert." msgid "questions.other" msgstr "Sonstiges (bitte angeben)" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Ich habe noch nie ein Design-Tool verwendet" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.test-penpot-to-see-if-its-a-fit-for-team" msgstr "Testen Sie Penpot, um zu sehen, ob es für das Team geeignet ist " diff --git a/frontend/translations/en.po b/frontend/translations/en.po index be4499c877..a9080cf393 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -2306,6 +2306,9 @@ msgstr "Want to receive Penpot news?" msgid "onboarding.team-modal.create-team" msgstr "Create a team" +msgid "onboarding.team-modal.team-definition" +msgstr "What's a team?" + msgid "onboarding.team-modal.create-team-desc" msgstr "" "A team allows you to collaborate with other Penpot users working in the " @@ -2428,8 +2431,8 @@ msgid "questions.more-than-50" msgstr "More than 50" #: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "I've never used a design tool before" +msgid "questions.never-used-one" +msgstr "None" #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c121150b3d..059f3c1573 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -2346,6 +2346,9 @@ msgstr "¿Quieres recibir noticias sobre Penpot?" msgid "onboarding.team-modal.create-team" msgstr "Crea un equipo" +msgid "onboarding.team-modal.team-definition" +msgstr "¿Qué es un equipo?" + msgid "onboarding.team-modal.create-team-desc" msgstr "" "Un equipo permite colaborar en Penpot trabajando en los mismos archivos y " @@ -2468,8 +2471,8 @@ msgid "questions.more-than-50" msgstr "Más de 50" #: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nunca antes he usado una herramienta de diseño" +msgid "questions.never-used-one" +msgstr "Ninguna" #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 6c1ec65db5..fa4652678a 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -4909,10 +4909,6 @@ msgstr "Sortie de la souris" msgid "workspace.assets.typography.text-styles" msgstr "Styles de texte" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Je n'ai jamais utilisé d'outil de design avant" - #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs msgid "workspace.options.stroke-cap.circle-marker" msgstr "Marqueur cercle" diff --git a/frontend/translations/ha.po b/frontend/translations/ha.po index a0743aaf48..8824297ece 100644 --- a/frontend/translations/ha.po +++ b/frontend/translations/ha.po @@ -3367,10 +3367,6 @@ msgstr "idan akwai qari (bayyana)" msgid "workspace.assets.typography.text-styles" msgstr "salon rubutu" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "ban tava aiki da kayan zane ba" - #: src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs msgid "workspace.options.stroke-cap.circle-marker" msgstr "da'irar kasuwa" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index bcddbf5a55..8c69757fc9 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -2315,10 +2315,6 @@ msgstr "שיווק" msgid "questions.more-than-50" msgstr "גדול מ־50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "מעולם לא השתמשתי בכלי עיצוב בעבר" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "הבאה" diff --git a/frontend/translations/id.po b/frontend/translations/id.po index 136a735732..8ace83fdbe 100644 --- a/frontend/translations/id.po +++ b/frontend/translations/id.po @@ -2407,10 +2407,6 @@ msgstr "Pemasaran" msgid "questions.more-than-50" msgstr "Lebih dari 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Saya belum pernah menggunakan alat desain" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Berikutnya" diff --git a/frontend/translations/lv.po b/frontend/translations/lv.po index 1db73b1cef..12fdf513f0 100644 --- a/frontend/translations/lv.po +++ b/frontend/translations/lv.po @@ -2406,10 +2406,6 @@ msgstr "Ķeramies pie darba!" msgid "questions.more-than-50" msgstr "Vairāk nekā 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Iepriekš neesmu izmantojis modelēšanas rīku" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Nākamais" diff --git a/frontend/translations/nl.po b/frontend/translations/nl.po index cd98311a2d..edd30e96ce 100644 --- a/frontend/translations/nl.po +++ b/frontend/translations/nl.po @@ -2458,10 +2458,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Meer dan 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Ik heb nog nooit een ontwerptool gebruikt" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Volgende" diff --git a/frontend/translations/pt_PT.po b/frontend/translations/pt_PT.po index 7a717474ee..86bd411605 100644 --- a/frontend/translations/pt_PT.po +++ b/frontend/translations/pt_PT.po @@ -2401,10 +2401,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Mais de 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nunca usei uma ferramenta de design no passado" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Seguinte" diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index 90c69efe17..571f341280 100644 --- a/frontend/translations/ro.po +++ b/frontend/translations/ro.po @@ -2441,10 +2441,6 @@ msgstr "Marketing" msgid "questions.more-than-50" msgstr "Mai mult de 50" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Nu am folosit o unealtă de design până acum" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.next" msgstr "Următor" diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index 5ce0c7757d..099467000b 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -4876,10 +4876,6 @@ msgstr "Satır yüksekliğini artır" msgid "questions.other" msgstr "Diğer (lütfen belirtiniz)" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "Daha önce hiç tasarım aracı kullanmadım" - msgid "labels.discard" msgstr "At" diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 3f58a13519..e471f03a12 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -4786,10 +4786,6 @@ msgstr "你最熟悉哪个设计工具？" msgid "questions.invision" msgstr "InVision" -#: src/app/main/ui/onboarding/questions.cljs -msgid "questions.never-used-a-tool" -msgstr "我之前从未用过设计工具" - #: src/app/main/ui/onboarding/questions.cljs msgid "questions.31-50" msgstr "31-50"