diff --git a/common/src/app/common/geom/shapes/bounds.cljc b/common/src/app/common/geom/shapes/bounds.cljc index b6769d7639..bb14ea3458 100644 --- a/common/src/app/common/geom/shapes/bounds.cljc +++ b/common/src/app/common/geom/shapes/bounds.cljc @@ -140,40 +140,41 @@ (update :width + (* 2 h-padding)) (update :height + (* 2 v-padding))))) +(defn calculate-base-bounds + [shape] + (-> (get-shape-filter-bounds shape) + (add-padding (calculate-padding shape true)))) + (defn get-object-bounds [objects shape] - (let [calculate-base-bounds - (fn [shape] - (-> (get-shape-filter-bounds shape) - (add-padding (calculate-padding shape true)))) - + (let [base-bounds (calculate-base-bounds shape) bounds (cond - (empty? (:shapes shape)) - [(calculate-base-bounds shape)] - - (or (:masked-group shape) (= :bool (:type shape))) - [(calculate-base-bounds shape)] - - (and (cfh/frame-shape? shape) (not (:show-content shape))) - [(calculate-base-bounds shape)] + (or (empty? (:shapes shape)) + (or (:masked-group shape) (= :bool (:type shape))) + (and (cfh/frame-shape? shape) (not (:show-content shape)))) + [base-bounds] :else (cfh/reduce-objects objects (fn [shape] - (and (d/not-empty? (:shapes shape)) + (and (not (:hidden shape)) + (d/not-empty? (:shapes shape)) (or (not (cfh/frame-shape? shape)) (:show-content shape)) (or (not (cfh/group-shape? shape)) (not (:masked-group shape))))) (:id shape) - (fn [result child] - (conj result (calculate-base-bounds child))) - [(calculate-base-bounds shape)])) + (fn [result child] + (cond-> result + (not (:hidden child)) + (conj (calculate-base-bounds child)))) + + [base-bounds])) children-bounds (cond->> (grc/join-rects bounds) diff --git a/frontend/resources/images/icons/component-refactor.svg b/frontend/resources/images/icons/component-refactor.svg index 0cb789e576..289bba9b7b 100644 --- a/frontend/resources/images/icons/component-refactor.svg +++ b/frontend/resources/images/icons/component-refactor.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/frontend/resources/images/icons/copy-refactor.svg b/frontend/resources/images/icons/copy-refactor.svg index d6b3b53f58..7870241772 100644 --- a/frontend/resources/images/icons/copy-refactor.svg +++ b/frontend/resources/images/icons/copy-refactor.svg @@ -1,3 +1,3 @@ - - \ No newline at end of file + + diff --git a/frontend/resources/styles/common/dependencies/colors.scss b/frontend/resources/styles/common/dependencies/colors.scss index 1181b5004e..859c6af4a9 100644 --- a/frontend/resources/styles/common/dependencies/colors.scss +++ b/frontend/resources/styles/common/dependencies/colors.scss @@ -35,10 +35,6 @@ $color-complete: #a599c6; $color-warning: #fc8802; $color-danger: #e65244; $color-info: #59b9e2; -$color-ocean: #4285f4; -$color-component: #76b0b8; -$color-component-highlight: #1890ff; -$color-pink: #feecfc; // Gray scale $color-gray-10: #e3e3e3; @@ -48,40 +44,21 @@ $color-gray-40: #64666a; $color-gray-50: #303236; $color-gray-60: #1f1f1f; -// UI colors -$color-select: #1fdea7; -$color-distance: #ff6fe0; -$color-snap: #d383da; - // Mixing Color variable for creating both light and dark colors $mix-percentage-dark: 81%; $mix-percentage-darker: 60%; -$mix-percentage-light: 80%; $mix-percentage-lighter: 20%; -$mix-percentage-lightest: 10%; // Lighter colors -$color-success-light: mix($color-success, $color-white, $mix-percentage-light); //#79cf7d + $color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter); //#def3de -$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light); //#b7add1 -$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter); //#edebf4 - -$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light); //#5af2c6 $color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter); //#d6fcf1 -$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light); //#fda035 -$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter); //#fee7cc; - -$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light); //#eb7569 $color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter); //#fadcda -$color-info-light: mix($color-info, $color-white, $mix-percentage-light); //#7ac7e8 -$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter); //#def1f9; - // Darker colors $color-success-dark: mix($color-success, $color-black, $mix-percentage-dark); //#479e4b; -$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker); // #357537; $color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark); //#867ca0 $color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker); //#635c77 @@ -90,92 +67,23 @@ $color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark); // $color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker); // #1d8f6e $color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark); // #cc6e02; -$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker); //#975201 $color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark); //#ba4237 -$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker); // #8a3129; -$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark); // #4896b7 $color-info-darker: mix($color-info, $color-black, $mix-percentage-darker); // #356f88; // bg transparent $color-dark-bg: rgba(0, 0, 0, 0.4); -$color-light-bg: rgba(255, 255, 255, 0.6); // Transform scss variables into css variables to use them onto cljs files :root { - // Colors - --color-white: #{$color-white}; - --color-black: #{$color-black}; - --color-canvas: #{$color-canvas}; - --color-dashboard: #{$color-dashboard}; - - // Main color; - --color-primary: #{$color-primary}; - // Secondary colors; - --color-success: #{$color-success}; - --color-complete: #{$color-complete}; - --color-warning: #{$color-warning}; - --color-danger: #{$color-danger}; + --color-info: #{$color-info}; - --color-ocean: #{$color-ocean}; - --color-component: #{$color-component}; - --color-component-highlight: #{$color-component-highlight}; - --color-pink: #{$color-pink}; + --color-canvas: #e8e9ea; // Gray scale; - --color-gray-10: #{$color-gray-10}; + --color-gray-20: #{$color-gray-20}; - --color-gray-30: #{$color-gray-30}; - --color-gray-40: #{$color-gray-40}; - --color-gray-50: #{$color-gray-50}; --color-gray-60: #{$color-gray-60}; - - // UI colors - --color-distance: #{$color-distance}; - --color-select: #{$color-select}; - --color-snap: #{$color-snap}; - - // Lighter colors - --color-success-light: #{$color-success-light}; - --color-success-lighter: #{$color-success-lighter}; - - --color-complete-light: #{$color-complete-light}; - --color-complete-lighter: #{$color-complete-lighter}; - - --color-primary-light: #{$color-primary-light}; - --color-primary-lighter: #{$color-primary-lighter}; - - --color-warning-light: #{$color-warning-light}; - --color-warning-lighter: #{$color-warning-lighter}; - - --color-danger-light: #{$color-danger-light}; - --color-danger-lighter: #{$color-danger-lighter}; - - --color-info-light: #{$color-info-light}; - --color-info-lighter: #{$color-info-lighter}; - - // Darker colors - --color-success-dark: #{$color-success-dark}; - --color-success-darker: #{$color-success-darker}; - - --color-complete-dark: #{$color-complete-dark}; - --color-complete-darker: #{$color-complete-darker}; - - --color-primary-dark: #{$color-primary-dark}; - --color-primary-darker: #{$color-primary-darker}; - - --color-warning-dark: #{$color-warning-dark}; - --color-warning-darker: #{$color-warning-darker}; - - --color-danger-dark: #{$color-danger-dark}; - --color-danger-darker: #{$color-danger-darker}; - - --color-info-dark: #{$color-info-dark}; - --color-info-darker: #{$color-info-darker}; - - // bg transparent - --color-dark-bg: #{$color-dark-bg}; - --color-light-bg: #{$color-light-bg}; } diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index f6b1b390ae..5a22085ee8 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -81,136 +81,6 @@ } } -.btn-text-basic { - @extend %btn; - background: transparent; - color: $color-primary-dark; - flex-shrink: 0; - &:hover { - background: rgba(49, 239, 184, 0.12); - } -} - -.btn-icon-dark { - @extend %btn; - background: $color-gray-60; - color: $color-gray-20; - padding: $size-1; - svg { - fill: $color-gray-20; - } - &:hover { - background: $color-primary; - color: $color-gray-60; - svg { - fill: $color-gray-60; - } - } -} - -.btn-icon-light { - @extend %btn; - background: $color-white; - border: 1px solid $color-gray-20; - color: $color-black; - padding: $size-1; - svg { - fill: $color-black; - } - &:hover { - background: $color-primary; - border-color: $color-primary; - svg { - fill: $color-black; - } - } -} - -.btn-icon-basic { - @extend %btn; - background: transparent; - color: $color-gray-20; - padding: $size-1; - svg { - fill: $color-gray-20; - - &.icon-close { - transform: rotate(45deg); - } - } - &:hover { - background: transparent; - svg { - fill: $color-primary; - } - } -} - -.btn-text-dark { - @extend %btn; - background: $color-gray-60; - color: $color-gray-20; - - svg { - fill: $color-gray-20; - } - &:hover { - background: $color-primary; - color: $color-gray-60; - svg { - fill: $color-gray-60; - } - } -} - -.btn-gray { - @extend %btn; - background: $color-gray-30; - color: $color-white; - &:hover { - background: $color-gray-40; - } -} - -.btn-ocean { - @extend %btn; - background: $color-ocean; - color: $color-white; - &:hover { - background: darken($color-ocean, 16%); - color: $color-white; - } -} - -.btn-option { - display: flex; - a { - margin-right: 0.5rem; - &:last-child { - margin-right: 0; - } - } - &.column { - flex-direction: column; - a { - margin-bottom: 0.5rem; - &:last-child { - margin-bottom: 0; - } - } - } - &.mr-small { - margin: 1rem 0; - } - &.btn-option-400 { - margin: 0 auto; - max-width: 400px; - } - &.mb { - margin-bottom: 0.5rem; - } -} - input[type="button"][disabled], .btn-disabled { background-color: $color-gray-10; @@ -218,36 +88,6 @@ input[type="button"][disabled], pointer-events: none; } -// Text color - -.text-error { - background-color: $color-danger; - border-radius: $br3; - color: $color-danger-lighter; - padding: 3px 6px; -} - -.text-success { - background-color: $color-success; - border-radius: $br3; - color: $color-white; - padding: 3px 6px; -} - -.text-warning { - background-color: $color-warning; - border-radius: $br3; - color: $color-white; - padding: 3px 6px; -} - -.text-info { - background-color: $color-complete; - border-radius: $br3; - color: $color-white; - padding: 3px 6px; -} - // Slider dots ul.slider-dots { diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 177be4e5c4..272577023d 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -316,7 +316,7 @@ height: $s-32; border-radius: $br-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color); span, label { @@ -336,14 +336,45 @@ } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); + background-color: var(--input-background-color-hover); span { - color: var(--input-foreground-color); + color: var(--input-foreground-color-hover); + } + input { + color: var(--input-foreground-color-hover); + } + } + &:active { + border: $s-1 solid var(--input-border-color-active); + background-color: var(--input-background-color-active); + span { + color: var(--input-foreground-color-active); } input { color: var(--input-foreground-color-active); } - background-color: var(--input-background-color-hover); + } + &:focus, + &:focus-within { + border: $s-1 solid var(--input-border-color-focus); + background-color: var(--input-background-color-focus); + span { + color: var(--input-foreground-color-focus); + } + input { + color: var(--input-foreground-color-focus); + } + &:hover { + border: $s-1 solid var(--input-border-color-focus); + background-color: var(--input-background-color-focus); + span { + color: var(--input-foreground-color-focus); + } + input { + color: var(--input-foreground-color-focus); + } + } } } @@ -362,7 +393,7 @@ width: 100%; margin: 0; border-radius: $br-8; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); } @@ -500,7 +531,7 @@ min-height: $s-32; margin-top: $s-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); &:focus-within, &:active { diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 567709e0c4..7f7538b91a 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -10,8 +10,8 @@ // DARK --dark-gray-1: #1d1f20; --dark-gray-2: #000000; - --dark-gray-2-30: rgba(0, 0, 0, 0.3); - --dark-gray-2-80: rgba(0, 0, 0, 0.8); + --dark-gray-2-30: #{color.change(#000000, $alpha: 0.3)}; + --dark-gray-2-80: #{color.change(#000000, $alpha: 0.8)}; --dark-gray-3: #292c2d; --dark-gray-4: #34393b; --white: #fff; @@ -22,6 +22,7 @@ --lilac: #bb97d8; --pink: #ff6fe0; --strong-green: #00d1b8; + --strong-green-10: #{color.change(#00d1b8, $alpha: 0.1)}; // NOTIFICATION --dark-ok-color: var(--strong-green); @@ -33,8 +34,8 @@ // LIGHT --light-gray-1: #fff; --light-gray-2: #e8eaee; - --light-gray-2-30: rgba(232, 234, 238, 0.3); - --light-gray-2-80: rgba(232, 234, 238, 0.8); + --light-gray-2-30: #{color.change(#e8eaee, $alpha: 0.3)}; + --light-gray-2-80: #{color.change(#e8eaee, $alpha: 0.8)}; --light-gray-3: #f3f4f6; --light-gray-4: #eef0f2; --black: #000; @@ -44,6 +45,7 @@ --purple-30: rgba(105, 17, 212, 0.2); --blue: #1345aa; --strong-purple: #8c33eb; + --strong-purple-10: #{color.change(#8c33eb, $alpha: 0.1)}; // NOTIFICATION WILL CHANGE --light-ok-color: var(--strong-green); diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index ded979f2fc..184d86ba7a 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -112,7 +112,7 @@ --layer-row-foreground-color: var(--color-foreground-secondary); --layer-row-foreground-color-hover: var(--color-accent-primary); --layer-row-foreground-color-selected: var(--color-accent-primary); - --layer-row-foreground-color-drag: var(--color-select); + --layer-row-foreground-color-drag: var(--color-accent-tertiary); --layer-row-foreground-color-focus: var(--color-foreground-primary); --layer-row-border-color-focus: var(--color-accent-primary); --layer-child-row-background-color: var(--color-background-tertiary); @@ -143,11 +143,19 @@ --icon-foreground-discard: var(--error-color); // INPUTS, SELECTS, DROPDOWNS - --input-background-color: var(--color-background-tertiary); - --input-foreground-color: var(--color-foreground-secondary); + --input-placeholder-color: var(--color-foreground-secondary); + --input-background-color: var(--color-background-tertiary); // empty state + --input-foreground-color: var(--color-foreground-secondary); // empty state + --input-border-color: var(--color-background-tertiary); // empty state + --input-background-color-rest: var(--color-background-tertiary); + --input-foreground-color-rest: var(--color-foreground-primary); + --input-border-color-rest: var(--color-background-tertiary); --input-background-color-hover: var(--color-background-quaternary); + --input-foreground-color-hover: var(--color-foreground-primary); + --input-border-color-hover: var(--color-background-quaternary); --input-background-color-focus: var(--color-background-tertiary); + --input-foreground-color-focus: var(--color-foreground-primary); --input-border-color-focus: var(--color-accent-primary); --input-background-color-active: var(--color-background-primary); --input-foreground-color-active: var(--color-foreground-primary); @@ -210,13 +218,13 @@ --assets-item-name-foreground-color-disabled: var(--color-foreground-disabled); --assets-item-border-color: var(--color-accent-primary); --assets-item-background-color-drag: var(--color-accent-primary-muted); - --assets-item-border-color-drag: var(--color-select); + --assets-item-border-color-drag: var(--color-accent-tertiary); --assets-component-background-color: var(--white); // We don't want this color to change with palette --assets-component-background-color-disabled: var( --off-white ); // We don't want this color to change with palette --assets-component-border-color: var(--color-background-tertiary); - --assets-component-border-selected: var(--color-select); + --assets-component-border-selected: var(--color-accent-tertiary); --radio-btns-background-color: var(--color-background-tertiary); --radio-btn-background-color-selected: var(--color-background-quaternary); @@ -285,11 +293,11 @@ // ALERTS & STATUS --alert-background-color-ok: var(--ok-color); - --alert-foreground-color-ok: var(--color-background-secondary); + --alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme --alert-background-color-warning: var(--warning-color); - --alert-foreground-color-warning: var(--color-foreground-primary); + --alert-foreground-color-warning: var(--white); // We don't want this color to change with theme --alert-background-color-error: var(--error-color); - --alert-foreground-color-error: var(--color-foreground-primary); + --alert-foreground-color-error: var(--white); // We don't want this color to change with theme --alert-background-color-neutral: var(--color-background-quaternary); --alert-foreground-color-neutral: var(--color-foreground-secondary); --alert-foreground-color-neutral-active: var(--color-foreground-primary); @@ -317,8 +325,8 @@ --flow-tag-background-color: var(--color-background-tertiary); --flow-tag-foreground-color: var(--color-foreground-secondary); - --flow-tag-background-color-hover: var(--color-accent-primary); - --flow-tag-foreground-color-hover: var(--color-background-primary); + --flow-tag-background-color-hover: var(--color-background-quaternary); + --flow-tag-foreground-color-hover: var(--color-accent-primary); // VIEWER --viewer-background-color: var(--color-background-secondary); diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index 8629969103..fd5ebd4f3a 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -21,6 +21,8 @@ --color-accent-primary-muted: var(--green-30); --color-accent-secondary: var(--lilac); --color-accent-tertiary: var(--strong-green); + --color-accent-tertiary-muted: var(--strong-green-10); + --color-component-highlight: var(--lilac); --overlay-color: rgba(0, 0, 0, 0.4); --ok-color: var(--dark-ok-color); diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index 4c8a927fb8..9cee8c4270 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -21,6 +21,8 @@ --color-accent-primary-muted: var(--purple-30); --color-accent-secondary: var(--blue); --color-accent-tertiary: var(--strong-purple); + --color-accent-tertiary-muted: var(--strong-purple-10); + --color-component-highlight: var(--blue); --overlay-color: rgba(255, 255, 255, 0.4); --ok-color: var(--light-ok-color); diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss index ce901a6a4d..241682f4cd 100644 --- a/frontend/resources/styles/main/partials/sidebar.scss +++ b/frontend/resources/styles/main/partials/sidebar.scss @@ -565,10 +565,10 @@ button.collapse-sidebar { &:hover { svg { - stroke: var(--color-primary); + stroke: $color-primary; } label { - color: var(--color-primary); + color: $color-primary; } } } diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss index e79aa9a38e..5288b7475f 100644 --- a/frontend/resources/styles/main/partials/workspace.scss +++ b/frontend/resources/styles/main/partials/workspace.scss @@ -323,12 +323,7 @@ $height-palette-max: 80px; } } -.workspace-frame-icon { - fill: $color-gray-40; -} - .workspace-frame-label { - fill: $color-gray-40; font-size: $fs12; } diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs index acae0096ea..75fb6b8c81 100644 --- a/frontend/src/app/main/constants.cljs +++ b/frontend/src/app/main/constants.cljs @@ -19,9 +19,9 @@ "Default data for page metadata." {:grid-x-axis grid-x-axis :grid-y-axis grid-y-axis - :grid-color "var(--color-gray-20)" + :grid-color "var(--off-white)" :grid-alignment true - :background "var(--color-white)"}) + :background "var(--white)"}) (def size-presets [{:name "APPLE"} diff --git a/frontend/src/app/main/data/workspace/notifications.cljs b/frontend/src/app/main/data/workspace/notifications.cljs index 4b4920687c..0f5616fd2e 100644 --- a/frontend/src/app/main/data/workspace/notifications.cljs +++ b/frontend/src/app/main/data/workspace/notifications.cljs @@ -145,7 +145,7 @@ (remove nil?)) used (into #{} xfm presence) avail (set/difference presence-palette used)] - (or (first avail) "var(--color-black)"))) + (or (first avail) "var(--black)"))) (update-color [color presence] (if (some? color) diff --git a/frontend/src/app/main/ui/auth/register.cljs b/frontend/src/app/main/ui/auth/register.cljs index c200b4a4dd..121d2523df 100644 --- a/frontend/src/app/main/ui/auth/register.cljs +++ b/frontend/src/app/main/ui/auth/register.cljs @@ -253,6 +253,7 @@ [:& fm/input {:name :accept-terms-and-privacy :class "check-primary" :type "checkbox" + :default-checked false :label terms-label}]])) [:> fm/submit-button* diff --git a/frontend/src/app/main/ui/components/editable_select.scss b/frontend/src/app/main/ui/components/editable_select.scss index e3d038456f..6edb393932 100644 --- a/frontend/src/app/main/ui/components/editable_select.scss +++ b/frontend/src/app/main/ui/components/editable_select.scss @@ -10,7 +10,7 @@ @extend .asset-element; margin: 0; padding: 0; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); position: relative; display: flex; height: $s-32; diff --git a/frontend/src/app/main/ui/components/forms.cljs b/frontend/src/app/main/ui/components/forms.cljs index 3cf025ea03..b238419938 100644 --- a/frontend/src/app/main/ui/components/forms.cljs +++ b/frontend/src/app/main/ui/components/forms.cljs @@ -31,7 +31,6 @@ input-name (get props :name) more-classes (get props :class) auto-focus? (get props :auto-focus? false) - placeholder (or placeholder label) form (or form (mf/use-ctx form-ctx)) @@ -43,6 +42,7 @@ is-text? (or (= @type' "password") (= @type' "text") (= @type' "email")) + placeholder (when is-text? (or placeholder label)) touched? (get-in @form [:touched input-name]) error (get-in @form [:errors input-name]) @@ -87,7 +87,7 @@ (swap! form assoc-in [:touched input-name] true))) props (-> props - (dissoc :help-icon :form :trim :children :show-success? :auto-focus?) + (dissoc :help-icon :form :trim :children :show-success? :auto-focus? :label) (assoc :id (name input-name) :value value :auto-focus auto-focus? @@ -103,6 +103,7 @@ "aria-describedby" (dm/str "error-" input-name))) (obj/clj->props)) + checked? (and is-checkbox? (= value true)) show-valid? (and show-success? touched? (not error)) show-invalid? (and touched? error)] @@ -124,7 +125,7 @@ :for (name input-name)} label (when is-checkbox? - [:span {:class (stl/css-case :global/checked value)} i/status-tick-refactor]) + [:span {:class (stl/css-case :global/checked checked?)} (when checked? i/status-tick-refactor)]) (if is-checkbox? [:> :input props] diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss index 2ee39783a4..512ba312ee 100644 --- a/frontend/src/app/main/ui/components/forms.scss +++ b/frontend/src/app/main/ui/components/forms.scss @@ -46,7 +46,7 @@ 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-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); @@ -180,7 +180,7 @@ height: $s-32; width: 100%; border-radius: $br-8; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color-active); background-color: var(--input-background-color); .main-content { @@ -282,8 +282,7 @@ margin: 0; border-radius: $br-8; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); - color: var(--input-foreground-color-active); + border: $s-1 solid var(--input-border-color-active); &:focus { outline: none; border: $s-1 solid var(--input-border-color-focus); diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 850b8af221..ae5cbe1e1c 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -35,7 +35,7 @@ } } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); input { background-color: var(--input-background-color-hover); diff --git a/frontend/src/app/main/ui/components/shape_icon.cljs b/frontend/src/app/main/ui/components/shape_icon.cljs deleted file mode 100644 index af02b820f0..0000000000 --- a/frontend/src/app/main/ui/components/shape_icon.cljs +++ /dev/null @@ -1,50 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.components.shape-icon - (:require - [app.common.types.component :as ctk] - [app.common.types.shape :as cts] - [app.common.types.shape.layout :as ctl] - [app.main.ui.icons :as i] - [rumext.v2 :as mf])) - - -(mf/defc element-icon - [{:keys [shape main-instance?] :as props}] - (if (ctk/instance-head? shape) - (if main-instance? - i/component - i/component-copy) - (case (:type shape) - :frame (cond - (and (ctl/flex-layout? shape) (ctl/col? shape)) - i/layout-columns - - (and (ctl/flex-layout? shape) (ctl/row? shape)) - i/layout-rows - - (ctl/grid-layout? shape) - i/grid-layout-mode - - :else - i/artboard) - :image i/image - :line (if (cts/has-images? shape) i/image i/line) - :circle (if (cts/has-images? shape) i/image i/circle) - :path (if (cts/has-images? shape) i/image i/curve) - :rect (if (cts/has-images? shape) i/image i/box) - :text i/text - :group (if (:masked-group shape) - i/mask - i/folder) - :bool (case (:bool-type shape) - :difference i/bool-difference - :exclude i/bool-exclude - :intersection i/bool-intersection - #_:default i/bool-union) - :svg-raw i/file-svg - nil))) diff --git a/frontend/src/app/main/ui/dashboard.cljs b/frontend/src/app/main/ui/dashboard.cljs index a568735159..29c41f8e92 100644 --- a/frontend/src/app/main/ui/dashboard.cljs +++ b/frontend/src/app/main/ui/dashboard.cljs @@ -15,7 +15,6 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.context :as ctx] - [app.main.ui.dashboard.export] [app.main.ui.dashboard.files :refer [files-section]] [app.main.ui.dashboard.fonts :refer [fonts-page font-providers-page]] [app.main.ui.dashboard.import] diff --git a/frontend/src/app/main/ui/dashboard/export.cljs b/frontend/src/app/main/ui/dashboard/export.cljs deleted file mode 100644 index 3adee05946..0000000000 --- a/frontend/src/app/main/ui/dashboard/export.cljs +++ /dev/null @@ -1,190 +0,0 @@ -;; This Source Code Form is subject to the terms of the Mozilla Public -;; License, v. 2.0. If a copy of the MPL was not distributed with this -;; file, You can obtain one at http://mozilla.org/MPL/2.0/. -;; -;; Copyright (c) KALEIDOS INC - -(ns app.main.ui.dashboard.export - (:require-macros [app.main.style :as stl]) - (:require - [app.common.data :as d] - [app.common.data.macros :as dm] - [app.main.data.modal :as modal] - [app.main.store :as st] - [app.main.ui.icons :as i] - [app.main.worker :as uw] - [app.util.dom :as dom] - [app.util.i18n :as i18n :refer [tr]] - [beicon.v2.core :as rx] - [rumext.v2 :as mf])) - -(def ^:const options [:all :merge :detach]) - -(mf/defc export-entry - {::mf/wrap-props false} - [{:keys [file]}] - [:div {:class (stl/css-case :file-entry true - :loading (:loading? file) - :success (:export-success? file) - :error (:export-error? file))} - - [:div {:class (stl/css :file-name)} - [:span {:class (stl/css :file-icon)} - (cond (:export-success? file) i/tick-refactor - (:export-error? file) i/close-refactor - (:loading? file) i/loader-pencil)] - - [:div {:class (stl/css :file-name-label)} - (:name file)]]]) - -(defn- mark-file-error - [files file-id] - (mapv #(cond-> % - (= file-id (:id %)) - (assoc :export-error? true - :loading? false)) - files)) - -(defn- mark-file-success - [files file-id] - (mapv #(cond-> % - (= file-id (:id %)) - (assoc :export-success? true - :loading? false)) - files)) - -(def export-types - [:all :merge :detach]) - -(mf/defc export-dialog - {::mf/register modal/components - ::mf/register-as :export - ::mf/wrap-props false} - [{:keys [team-id files has-libraries? binary? features]}] - (let [state* (mf/use-state - #(let [files (mapv (fn [file] (assoc file :loading? true)) files)] - {:status :prepare - :selected :all - :files files})) - - state (deref state*) - selected (:selected state) - status (:status state) - - start-export - (mf/use-fn - (mf/deps team-id selected files features) - (fn [] - (swap! state* assoc :status :exporting) - (->> (uw/ask-many! - {:cmd (if binary? :export-binary-file :export-standard-file) - :team-id team-id - :features features - :export-type selected - :files files}) - (rx/mapcat #(->> (rx/of %) - (rx/delay 1000))) - (rx/subs! - (fn [msg] - (cond - (= :error (:type msg)) - (swap! state* update :files mark-file-error (:file-id msg)) - - (= :finish (:type msg)) - (do - (swap! state* update :files mark-file-success (:file-id msg)) - (dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))))) - - on-cancel - (mf/use-fn - (fn [event] - (dom/prevent-default event) - (st/emit! (modal/hide)))) - - on-accept - (mf/use-fn - (mf/deps start-export) - (fn [event] - (dom/prevent-default event) - (start-export))) - - on-change - (mf/use-fn - (fn [event] - (let [type (-> (dom/get-target event) - (dom/get-data "type") - (keyword))] - (swap! state* assoc :selected type))))] - - (mf/with-effect [has-libraries?] - ;; Start download automatically when no libraries - (when-not has-libraries? - (start-export))) - - [:div {:class (stl/css :modal-overlay)} - [:div {:class (stl/css :modal-container)} - [:div {:class (stl/css :modal-header)} - [:h2 {:class (stl/css :modal-title)} - (tr "dashboard.export.title")] - [:button {:class (stl/css :modal-close-btn) - :on-click on-cancel} i/close-refactor]] - - (cond - (= status :prepare) - [:* - [:div {:class (stl/css :modal-content)} - [:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")] - [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")] - - (for [type export-types] - [:div {:class (stl/css :export-option true) - :key (name type)} - [:label {:for (str "export-" type) - :class (stl/css-case :global/checked (= selected type))} - ;; Execution time translation strings: - ;; dashboard.export.options.all.message - ;; dashboard.export.options.all.title - ;; dashboard.export.options.detach.message - ;; dashboard.export.options.detach.title - ;; dashboard.export.options.merge.message - ;; dashboard.export.options.merge.title - [:span {:class (stl/css-case :global/checked (= selected type))} - (when (= selected type) - i/status-tick-refactor)] - [:div {:class (stl/css :option-content)} - [:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))] - [:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]] - - [:input {:type "radio" - :class (stl/css :option-input) - :id (str "export-" type) - :checked (= selected type) - :name "export-option" - :data-type (name type) - :on-change on-change}]]])] - - [:div {:class (stl/css :modal-footer)} - [:div {:class (stl/css :action-buttons)} - [:input {:class (stl/css :cancel-button) - :type "button" - :value (tr "labels.cancel") - :on-click on-cancel}] - - [:input {:class (stl/css :accept-btn) - :type "button" - :value (tr "labels.continue") - :on-click on-accept}]]]] - - (= status :exporting) - [:* - [:div {:class (stl/css :modal-content)} - (for [file (:files state)] - [:& export-entry {:file file :key (dm/str (:id file))}])] - - [:div {:class (stl/css :modal-footer)} - [:div {:class (stl/css :action-buttons)} - [:input {:class (stl/css :accept-btn) - :type "button" - :value (tr "labels.close") - :disabled (->> state :files (some :loading?)) - :on-click on-cancel}]]]])]])) diff --git a/frontend/src/app/main/ui/dashboard/export.scss b/frontend/src/app/main/ui/dashboard/export.scss deleted file mode 100644 index 98c9fd2516..0000000000 --- a/frontend/src/app/main/ui/dashboard/export.scss +++ /dev/null @@ -1,123 +0,0 @@ -// This Source Code Form is subject to the terms of the Mozilla Public -// License, v. 2.0. If a copy of the MPL was not distributed with this -// file, You can obtain one at http://mozilla.org/MPL/2.0/. -// -// Copyright (c) KALEIDOS INC - -@import "refactor/common-refactor.scss"; - -.modal-overlay { - @extend .modal-overlay-base; -} - -.modal-container { - @extend .modal-container-base; -} - -.modal-header { - margin-bottom: $s-24; -} - -.modal-title { - @include tabTitleTipography; - color: var(--modal-title-foreground-color); -} - -.modal-close-btn { - @extend .modal-close-btn-base; -} - -.modal-content { - @include titleTipography; - margin-bottom: $s-24; -} - -.export-option { - @extend .input-checkbox; - width: 100%; - align-items: flex-start; - label { - align-items: flex-start; - .modal-subtitle { - @include tabTitleTipography; - color: var(--modal-title-foreground-color); - } - } - span { - margin-top: $s-8; - } -} - -.option-content { - @include flexColumn; - @include titleTipography; -} - -.action-buttons { - @extend .modal-action-btns; -} - -.cancel-button { - @extend .modal-cancel-btn; -} - -.accept-btn { - @extend .modal-accept-btn; - &.danger { - @extend .modal-danger-btn; - } -} - -.modal-scd-msg, -.modal-subtitle, -.modal-msg { - @include titleTipography; - color: var(--modal-text-foreground-color); - line-height: 1.5; -} - -.file-entry { - .file-name { - @include flexRow; - .file-icon { - @include flexCenter; - height: $s-16; - width: $s-16; - - svg { - @extend .button-icon-small; - stroke: var(--input-foreground); - } - } - .file-name-label { - @include titleTipography; - } - } - &.loading { - .file-name { - color: var(--pending-color); - .file-icon svg:global(#loader-pencil) { - color: var(--pending-color); - stroke: var(--pending-color); - fill: var(--pending-color); - } - } - } - &.error { - .file-name { - color: var(--error-color); - .file-icon svg { - stroke: var(--error-color); - } - } - } - - &.success { - .file-name { - color: var(--ok-color); - .file-icon svg { - stroke: var(--ok-color); - } - } - } -} diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss index d53e3b5ec1..6c8817fda5 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.scss +++ b/frontend/src/app/main/ui/dashboard/fonts.scss @@ -143,7 +143,7 @@ margin-left: $s-6; align-items: center; svg { - fill: transparent; + fill: none; width: $s-12; height: $s-12; transform: rotate(45deg); @@ -186,17 +186,19 @@ margin-left: $s-12; justify-content: center; align-items: center; + svg { + width: $s-16; + height: $s-16; + stroke: $df-secondary; + fill: none; + } + &.failure { margin-right: $s-12; svg { stroke: var(--warning-color); } } - svg { - width: $s-16; - height: $s-16; - stroke: $df-secondary; - } &.close { background: none; @@ -275,6 +277,7 @@ svg { stroke: $df-secondary; + fill: none; height: $s-20; width: $s-20; } @@ -312,6 +315,7 @@ .icon svg { stroke: $df-secondary; + fill: none; width: $s-32; height: $s-32; } diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index dffbf86c13..d46cdcd3ac 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -46,7 +46,7 @@ height: $s-48; display: flex; width: 100%; - border: $s-1 solid transparent; + border: $s-1 solid $db-tertiary; align-items: center; svg { @@ -76,7 +76,6 @@ padding: 0 $s-12; background-color: transparent; border: none; - border-right: $s-1 solid $db-primary; } .team-name { @@ -114,16 +113,13 @@ } .switch-options { - display: flex; + @include buttonStyle; + @include flexCenter; max-width: $s-24; min-width: $s-28; - border-left: $s-1 solid $df-primary; - justify-content: center; - align-items: center; - cursor: pointer; - background-color: transparent; - border: none; height: 100%; + border-left: $s-1 solid $db-primary; + background-color: transparent; svg { fill: $df-secondary; diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs index c9dafa6e4a..5b71879134 100644 --- a/frontend/src/app/main/ui/debug/components_preview.cljs +++ b/frontend/src/app/main/ui/debug/components_preview.cljs @@ -39,16 +39,16 @@ (let [theme (dom/event->value event) data (assoc initial :theme theme)] (st/emit! (du/update-profile data)))) - colors [:bg-primary - :bg-secondary - :bg-tertiary - :bg-cuaternary - :fg-primary - :fg-secondary - :acc - :acc-muted - :acc-secondary - :acc-tertiary] + colors ["var(--color-background-primary)" + "var(--color-background-secondary)" + "var(--color-background-tertiary)" + "var(--color-background-cuaternary)" + "var(--color-foreground-primary)" + "var(--color-foreground-secondary)" + "var(--color-accent-primary)" + "var(--color-accent-primary-muted)" + "var(--color-accent-secondary)" + "var(--color-accent-tertiary)"] ;; COMPONENTS FNs state* (mf/use-state {:collapsed? true @@ -88,12 +88,12 @@ [:option {:label "Penpot Dark (default)" :value "default"}] [:option {:label "Penpot Light" :value "light"}]] [:div {:class (stl/css :wrapper)} - (let [css (stl/styles)] - (for [color colors] - [:div {:key color - :class (dom/classnames (get css color) true - (get css :rect) true)} - (d/name color)]))]] + (for [color colors] + [:div {:class (stl/css :color-wrapper)} + [:span (d/name color)] + [:div {:key color + :style {:background color} + :class (stl/css :rect)}]])]] [:div {:class (stl/css :components-row)} [:h2 {:class (stl/css :title)} "Components"] diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss index dfe86ab613..8b28f3e0f8 100644 --- a/frontend/src/app/main/ui/debug/components_preview.scss +++ b/frontend/src/app/main/ui/debug/components_preview.scss @@ -12,64 +12,27 @@ color: var(--color-foreground-primary); background: var(--color-background-secondary); .wrapper { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: $s-40; background-color: var(--color-background-primary); width: 100%; padding: $s-20; - display: flex; - justify-content: center; - gap: $s-20; - flex-wrap: wrap; .rect { display: flex; justify-content: center; align-items: center; - border: 1px solid var(--color-foreground-primary); + border: $s-1 solid var(--color-foreground-primary); padding: $s-20; height: $s-96; min-width: $s-152; } - .bg-primary { - background: var(--color-background-primary); - color: var(--color-foreground-primary); - } - .bg-secondary { - background: var(--color-background-secondary); - color: var(--color-foreground-primary); - } - .bg-tertiary { - background: var(--color-background-tertiary); - color: var(--color-foreground-primary); - } - .bg-cuaternary { - background: var(--color-background-quaternary); - color: var(--color-foreground-primary); - } - .fg-primary { - background: var(--color-foreground-primary); - color: var(--color-background-primary); - } - .fg-secondary { - background: var(--color-foreground-secondary); - color: var(--color-background-primary); - } - .acc { - background: var(--color-accent-primary); - color: var(--color-background-primary); - } - .acc-muted { - background: var(--color-accent-primary-muted); - color: var(--color-foreground-primary); - } - .acc-secondary { - background: var(--color-accent-secondary); - color: var(--color-background-primary); - } - .acc-tertiary { - background: var(--color-accent-tertiary); - color: var(--color-background-primary); - } } } +.color-wrapper { + display: grid; + grid-template-rows: auto $s-96; +} .components-row { color: var(--color-foreground-primary); diff --git a/frontend/src/app/main/ui/export.cljs b/frontend/src/app/main/ui/export.cljs index 1f6de24f9c..7fa938cbc4 100644 --- a/frontend/src/app/main/ui/export.cljs +++ b/frontend/src/app/main/ui/export.cljs @@ -17,9 +17,11 @@ [app.main.store :as st] [app.main.ui.icons :as i] [app.main.ui.workspace.shapes :refer [shape-wrapper]] + [app.main.worker :as uw] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr c]] [app.util.strings :as ust] + [beicon.v2.core :as rx] [cuerdas.core :as str] [rumext.v2 :as mf])) @@ -283,3 +285,176 @@ :stroke-dashoffset (- 280 pwidth) :style {:transition "stroke-dashoffset 1s ease-in-out"}}]]]]])])) +(def ^:const options [:all :merge :detach]) + +(mf/defc export-entry + {::mf/wrap-props false} + [{:keys [file]}] + [:div {:class (stl/css-case :file-entry true + :loading (:loading? file) + :success (:export-success? file) + :error (:export-error? file))} + + [:div {:class (stl/css :file-name)} + [:span {:class (stl/css :file-icon)} + (cond (:export-success? file) i/tick-refactor + (:export-error? file) i/close-refactor + (:loading? file) i/loader-pencil)] + + [:div {:class (stl/css :file-name-label)} + (:name file)]]]) + +(defn- mark-file-error + [files file-id] + (mapv #(cond-> % + (= file-id (:id %)) + (assoc :export-error? true + :loading? false)) + files)) + +(defn- mark-file-success + [files file-id] + (mapv #(cond-> % + (= file-id (:id %)) + (assoc :export-success? true + :loading? false)) + files)) + +(def export-types + [:all :merge :detach]) + +(mf/defc export-dialog + {::mf/register modal/components + ::mf/register-as :export + ::mf/wrap-props false} + [{:keys [team-id files has-libraries? binary? features]}] + (let [_ (println "-a-a-a-a") + state* (mf/use-state + #(let [files (mapv (fn [file] (assoc file :loading? true)) files)] + {:status :prepare + :selected :all + :files files})) + + state (deref state*) + selected (:selected state) + status (:status state) + + + + start-export + (mf/use-fn + (mf/deps team-id selected files features) + (fn [] + (swap! state* assoc :status :exporting) + (->> (uw/ask-many! + {:cmd (if binary? :export-binary-file :export-standard-file) + :team-id team-id + :features features + :export-type selected + :files files}) + (rx/mapcat #(->> (rx/of %) + (rx/delay 1000))) + (rx/subs! + (fn [msg] + (cond + (= :error (:type msg)) + (swap! state* update :files mark-file-error (:file-id msg)) + + (= :finish (:type msg)) + (do + (swap! state* update :files mark-file-success (:file-id msg)) + (dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg))))))))) + + on-cancel + (mf/use-fn + (fn [event] + (dom/prevent-default event) + (st/emit! (modal/hide)))) + + on-accept + (mf/use-fn + (mf/deps start-export) + (fn [event] + (dom/prevent-default event) + (start-export))) + + on-change + (mf/use-fn + (fn [event] + (let [type (-> (dom/get-target event) + (dom/get-data "type") + (keyword))] + (swap! state* assoc :selected type))))] + + (mf/with-effect [has-libraries?] + ;; Start download automatically when no libraries + (when-not has-libraries? + (start-export))) + + [:div {:class (stl/css :modal-overlay)} + [:div {:class (stl/css :modal-container)} + [:div {:class (stl/css :modal-header)} + [:h2 {:class (stl/css :modal-title)} + (tr "dashboard.export.title")] + [:button {:class (stl/css :modal-close-btn) + :on-click on-cancel} i/close-refactor]] + + (cond + (= status :prepare) + [:* + [:div {:class (stl/css :modal-content)} + [:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")] + [:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")] + + (for [type export-types] + [:div {:class (stl/css :export-option true) + :key (name type)} + [:label {:for (str "export-" type) + :class (stl/css-case :global/checked (= selected type))} + ;; Execution time translation strings: + ;; dashboard.export.options.all.message + ;; dashboard.export.options.all.title + ;; dashboard.export.options.detach.message + ;; dashboard.export.options.detach.title + ;; dashboard.export.options.merge.message + ;; dashboard.export.options.merge.title + [:span {:class (stl/css-case :global/checked (= selected type))} + (when (= selected type) + i/status-tick-refactor)] + [:div {:class (stl/css :option-content)} + [:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))] + [:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]] + + [:input {:type "radio" + :class (stl/css :option-input) + :id (str "export-" type) + :checked (= selected type) + :name "export-option" + :data-type (name type) + :on-change on-change}]]])] + + [:div {:class (stl/css :modal-footer)} + [:div {:class (stl/css :action-buttons)} + [:input {:class (stl/css :cancel-button) + :type "button" + :value (tr "labels.cancel") + :on-click on-cancel}] + + [:input {:class (stl/css :accept-btn) + :type "button" + :value (tr "labels.continue") + :on-click on-accept}]]]] + + (= status :exporting) + [:* + [:div {:class (stl/css :modal-content)} + (for [file (:files state)] + [:& export-entry {:file file :key (dm/str (:id file))}])] + + [:div {:class (stl/css :modal-footer)} + [:div {:class (stl/css :action-buttons)} + [:input {:class (stl/css :accept-btn) + :type "button" + :value (tr "labels.close") + :disabled (->> state :files (some :loading?)) + :on-click on-cancel}]]]])]])) diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index b8fa5c55e0..847cf306f8 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -235,3 +235,70 @@ color: var(--modal-text-foreground-color); line-height: 1.5; } + +.export-option { + @extend .input-checkbox; + width: 100%; + align-items: flex-start; + label { + align-items: flex-start; + .modal-subtitle { + @include tabTitleTipography; + color: var(--modal-title-foreground-color); + } + } + span { + margin-top: $s-8; + } +} + +.option-content { + @include flexColumn; + @include titleTipography; +} + +.file-entry { + .file-name { + @include flexRow; + .file-icon { + @include flexCenter; + height: $s-16; + width: $s-16; + + svg { + @extend .button-icon-small; + stroke: var(--input-foreground); + } + } + .file-name-label { + @include titleTipography; + } + } + &.loading { + .file-name { + color: var(--pending-color); + .file-icon svg:global(#loader-pencil) { + color: var(--pending-color); + stroke: var(--pending-color); + fill: var(--pending-color); + } + } + } + &.error { + .file-name { + color: var(--error-color); + .file-icon svg { + stroke: var(--error-color); + } + } + } + + &.success { + .file-name { + color: var(--ok-color); + .file-icon svg { + stroke: var(--ok-color); + } + } + } +} diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 9c4f9719c9..2719b97391 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -23,28 +23,26 @@ (def font-size 11) (def selection-rect-width 1) -(def select-color "var(--color-select)") +(def select-color "var(--color-accent-tertiary)") (def select-guide-width 1) (def select-guide-dasharray 5) -(def hover-color "var(--color-distance)") -(def hover-color-text "var(--color-white)") -(def hover-guide-width 1) +(def hover-color "var(--color-foreground-tertiary)") -(def size-display-color "var(--color-white)") +(def size-display-color "var(--white)") (def size-display-opacity 0.7) -(def size-display-text-color "var(--color-black)") +(def size-display-text-color "var(--black)") (def size-display-width-min 50) (def size-display-width-max 75) (def size-display-height 16) -(def distance-color "var(--color-distance)") -(def distance-text-color "var(--color-white)") +(def distance-color "var(--color-foreground-tertiary)") +(def distance-text-color "var(--white)") (def distance-border-radius 2) (def distance-pill-width 50) (def distance-pill-height 16) (def distance-line-stroke 1) -(def warning-color "var(--color-warning)") + ;; ------------------------------------------------ ;; HELPERS diff --git a/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs b/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs index 6138d81ac9..b0f2b3482e 100644 --- a/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs +++ b/frontend/src/app/main/ui/shapes/grid_layout_viewer.cljs @@ -38,11 +38,11 @@ :y area-y :width area-width :height area-height - :style {:fill "var(--color-distance)" + :style {:fill "var(--color-foreground-tertiary)" :fill-opacity 0.3}}] [:text {:x area-text-x :y area-text-y - :style {:fill "var(--color-distance)" + :style {:fill "var(--color-foreground-tertiary)" :font-family "worksans" :font-weight 600 :font-size 14 @@ -71,7 +71,7 @@ :y (:y cell-origin) :width cell-width :height cell-height - :style {:stroke "var(--color-distance)" + :style {:stroke "var(--color-foreground-tertiary)" :stroke-width 1.5 :fill "none"}}] diff --git a/frontend/src/app/main/ui/shapes/shape.cljs b/frontend/src/app/main/ui/shapes/shape.cljs index 62ad553f41..39e13482df 100644 --- a/frontend/src/app/main/ui/shapes/shape.cljs +++ b/frontend/src/app/main/ui/shapes/shape.cljs @@ -24,22 +24,23 @@ ;; FIXME: revisit this: (defn propagate-wrapper-styles-child [child wrapper-props] - (let [child-props-childs - (-> (obj/get child "props") - (obj/clone) - (-> (obj/get "childs"))) + (when (some? child) + (let [child-props-childs + (-> (obj/get child "props") + (obj/clone) + (-> (obj/get "childs"))) - child-props-childs - (->> child-props-childs - (map #(assoc % :wrapper-styles (obj/get wrapper-props "style")))) + child-props-childs + (->> child-props-childs + (map #(assoc % :wrapper-styles (obj/get wrapper-props "style")))) - child-props - (-> (obj/get child "props") - (obj/clone) - (obj/set! "childs" child-props-childs))] + child-props + (-> (obj/get child "props") + (obj/clone) + (obj/set! "childs" child-props-childs))] - (-> (obj/clone child) - (obj/set! "props" child-props)))) + (-> (obj/clone child) + (obj/set! "props" child-props))))) (defn propagate-wrapper-styles ([children wrapper-props] diff --git a/frontend/src/app/main/ui/viewer/inspect/exports.cljs b/frontend/src/app/main/ui/viewer/inspect/exports.cljs index a300bcc859..141eea215e 100644 --- a/frontend/src/app/main/ui/viewer/inspect/exports.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/exports.cljs @@ -123,7 +123,7 @@ {:value "6" :label "6x"}] format-options [{:value "png" :label "PNG"} - {:value "jpeg" :label "JPEG"} + {:value "jpeg" :label "JPG"} {:value "svg" :label "SVG"} {:value "pdf" :label "PDF"}]] diff --git a/frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs b/frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs index b53aba3ca1..eceaad61ac 100644 --- a/frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/selection_feedback.cljs @@ -15,7 +15,7 @@ ;; CONSTANTS ;; ------------------------------------------------ -(def select-color "var(--color-select)") +(def select-color "var(--color-accent-tertiary)") (def selection-rect-width 1) (def select-guide-width 1) (def select-guide-dasharray 5) diff --git a/frontend/src/app/main/ui/viewer/shapes.cljs b/frontend/src/app/main/ui/viewer/shapes.cljs index 8074ca7bcb..d976fbc744 100644 --- a/frontend/src/app/main/ui/viewer/shapes.cljs +++ b/frontend/src/app/main/ui/viewer/shapes.cljs @@ -264,8 +264,8 @@ :y (- y 1) :width (+ width 2) :height (+ height 2) - :fill "var(--color-primary)" - :stroke "var(--color-primary)" + :fill "var(--color-accent-tertiary)" + :stroke "var(--color-accent-tertiary)" :stroke-width (if interactions-show? 1 0) :fill-opacity (if interactions-show? 0.2 0) :style {:pointer-events (when frame? "none")} diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss index b742ea5890..71c824b6af 100644 --- a/frontend/src/app/main/ui/workspace/comments.scss +++ b/frontend/src/app/main/ui/workspace/comments.scss @@ -9,132 +9,148 @@ .comments-section { position: relative; background-color: var(--panel-background-color); - .comments-section-title { - @include flexCenter; - @include tabTitleTipography; - display: flex; - justify-content: space-between; - align-items: center; - height: $s-32; - min-height: $s-32; - margin: $s-8 $s-8 0 $s-8; - border-radius: $br-8; - background-color: var(--panel-title-background-color); - span { - @include flexCenter; - flex-grow: 1; - color: var(--title-foreground-color-hover); - } + display: grid; + grid-template-rows: $s-40 $s-48 1fr; +} - .close-button { - @extend .button-tertiary; - height: $s-28; - width: $s-28; - border-radius: $br-6; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } +.comments-section-title { + @include flexCenter; + @include tabTitleTipography; + display: flex; + justify-content: space-between; + align-items: center; + height: $s-32; + min-height: $s-32; + margin: $s-8 $s-8 0 $s-8; + border-radius: $br-8; + background-color: var(--panel-title-background-color); + span { + @include flexCenter; + flex-grow: 1; + color: var(--title-foreground-color-hover); + } +} + +.close-button { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + border-radius: $br-6; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } +} + +.mode-dropdown-wrapper { + @include buttonStyle; + @extend .asset-element; + background-color: var(--color-background-tertiary); + display: flex; + width: $s-256; + height: $s-32; + padding: $s-8; + border-radius: $br-8; + margin: $s-16 auto 0 auto; + cursor: pointer; + position: relative; +} + +.mode-label { + padding-right: 8px; + flex-grow: 1; + display: flex; + justify-content: flex-start; +} + +.icon { + @include flexCenter; + padding-right: 8px; + height: $s-24; + width: $s-24; + svg { + @extend .button-icon-small; + transform: rotate(90deg); + stroke: var(--icon-foreground); + } +} + +.comment-mode-dropdown { + @extend .dropdown-wrapper; + top: $s-80; + left: $s-12; + width: $s-256; +} + +.dropdown-item { + @extend .dropdown-element-base; + justify-content: space-between; + .icon { + @include flexCenter; + height: $s-24; + width: $s-24; + svg { + @extend .button-icon-small; + stroke: transparent; } } - .mode-dropdown-wrapper { - @include buttonStyle; - @extend .asset-element; - background-color: var(--color-background-tertiary); - display: flex; - width: $s-256; - height: $s-32; - padding: $s-8; - border-radius: $br-8; - margin: $s-16 auto 0 auto; - cursor: pointer; - position: relative; - .mode-label { - padding-right: 8px; - flex-grow: 1; - display: flex; - justify-content: flex-start; - } - .icon { - @include flexCenter; - padding-right: 8px; - height: $s-24; - width: $s-24; - svg { - @extend .button-icon-small; - transform: rotate(90deg); - stroke: var(--icon-foreground); - } + .label { + @include titleTipography; + } + &:hover { + .icon svg { + stroke: transparent; } } - .comment-mode-dropdown { - @extend .dropdown-wrapper; - top: $s-80; - left: $s-12; - width: $s-256; - .dropdown-item { - @extend .dropdown-element-base; - justify-content: space-between; - .icon { - @include flexCenter; - height: $s-24; - width: $s-24; - svg { - @extend .button-icon-small; - stroke: transparent; - } - } - .label { - @include titleTipography; - } - &:hover { - .icon svg { - stroke: transparent; - } - } - &.selected { - .label { - color: var(--menu-foreground-color); - } - .icon svg { - stroke: var(--icon-foreground-hover); - } - } + &.selected { + .label { + color: var(--menu-foreground-color); } - .separator { - height: $s-12; - } - } - .comments-section-content { - .thread-groups { - display: flex; - flex-direction: column; - gap: $s-24; - } - .thread-group-placeholder { - @include flexColumn; - align-items: center; - justify-content: flex-start; - margin-top: $s-36; - .placeholder-icon { - @include flexCenter; - height: $s-48; - width: $s-48; - border-radius: $br-circle; - background-color: var(--empty-message-background-color); - svg { - @extend .button-icon; - height: $s-28; - width: $s-28; - stroke: var(--empty-message-foreground-color); - } - } - .placeholder-label { - @include titleTipography; - text-align: center; - width: $s-184; - color: var(--empty-message-foreground-color); - } + .icon svg { + stroke: var(--icon-foreground-hover); } } } + +.separator { + height: $s-12; +} + +.comments-section-content { + height: 100%; + overflow-y: auto; +} + +.thread-groups { + display: flex; + flex-direction: column; + gap: $s-24; +} + +.thread-group-placeholder { + @include flexColumn; + align-items: center; + justify-content: flex-start; + margin-top: $s-36; +} + +.placeholder-icon { + @include flexCenter; + height: $s-48; + width: $s-48; + border-radius: $br-circle; + background-color: var(--empty-message-background-color); + svg { + @extend .button-icon; + height: $s-28; + width: $s-28; + stroke: var(--empty-message-foreground-color); + } +} + +.placeholder-label { + @include titleTipography; + text-align: center; + width: $s-184; + color: var(--empty-message-foreground-color); +} diff --git a/frontend/src/app/main/ui/workspace/shapes/debug.cljs b/frontend/src/app/main/ui/workspace/shapes/debug.cljs index 71cec7d268..e1353644b1 100644 --- a/frontend/src/app/main/ui/workspace/shapes/debug.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/debug.cljs @@ -91,7 +91,7 @@ [{:keys [shape]}] [:* (when ^boolean (dbg/enabled? :bounding-boxes) - [:& debug-bounding-boxes]) + [:& debug-bounding-boxes {:shape shape}]) (when (and ^boolean (cfh/text-shape? shape) ^boolean (dbg/enabled? :text-outline) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index 9ecddd1e20..d7a3d0e23b 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -24,7 +24,9 @@ [app.main.ui.workspace.shapes.frame.dynamic-modifiers :as fdm] [app.util.debug :as dbg] [app.util.dom :as dom] + [app.util.thumbnails :as th] [app.util.timers :as tm] + [promesa.core :as p] [rumext.v2 :as mf])) (defn frame-shape-factory @@ -44,7 +46,9 @@ childs (mf/deref childs-ref)] [:& shape-container {:shape shape :ref ref :disable-shadows? (cfh/is-direct-child-of-root? shape)} - [:& frame-shape {:shape shape :childs childs}]])))) + [:& frame-shape {:shape shape :childs childs}] + (when *assert* + [:& wsd/shape-debug {:shape shape}])])))) (defn check-props [new-props old-props] @@ -79,6 +83,34 @@ (fdm/use-dynamic-modifiers objects (mf/ref-val node-ref) modifiers) [:& frame-shape {:shape shape :ref node-ref}])))) +(defn image-size + [href] + (p/create + (fn [resolve _] + (let [img (js/Image.) + load-fn + (fn [] + (let [width (.-naturalWidth img) + height (.-naturalHeight img)] + (resolve {:width width :height height})))] + (set! (.-onload img) load-fn) + (set! (.-src img) href))))) + +(defn check-thumbnail-size + [image-node bounds file-id page-id frame-id] + (let [href (dom/get-attribute image-node "href") + width (dm/get-prop bounds :width) + height (dm/get-prop bounds :height) + [fixed-width fixed-height] (th/get-relative-size width height)] + ;; Even if looks like we're doing a new request the browser caches the image + ;; so really we don't. We need a different API to check the sizes + (-> (image-size href) + (p/then + (fn [{:keys [width height]}] + (when (or (not (mth/close? width fixed-width 2)) + (not (mth/close? height fixed-height 2))) + (st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame")))))))) + (defn root-frame-wrapper-factory [shape-wrapper] (let [frame-shape (frame-shape-factory shape-wrapper)] @@ -123,6 +155,7 @@ task-ref (mf/use-ref nil) on-load (mf/use-fn (fn [] + (check-thumbnail-size (mf/ref-val imposter-ref) bounds file-id page-id frame-id) (mf/set-ref-val! tries-ref 0) (reset! imposter-loaded true))) on-error (mf/use-fn diff --git a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs index 0322e65717..8c13c32450 100644 --- a/frontend/src/app/main/ui/workspace/shapes/path/common.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/path/common.cljs @@ -13,11 +13,11 @@ [okulary.core :as l] [rumext.v2 :as mf])) -(def primary-color "var(--color-select)") -(def secondary-color "var(--color-distance)") -(def black-color "var(--color-black)") -(def white-color "var(--color-white)") -(def gray-color "var(--color-gray-20)") +(def primary-color "var(--color-accent-tertiary)") +(def secondary-color "var(--color-foreground-tertiary)") +(def black-color "var(--black)") +(def white-color "var(--white)") +(def gray-color "var(--off-white)") (def current-edit-path-ref (l/derived diff --git a/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs b/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs index d7766d5174..8a0082f1ee 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text/text_edition_outline.cljs @@ -37,6 +37,6 @@ :width width :height height :transform transform - :style {:stroke "var(--color-select)" + :style {:stroke "var(--color-accent-tertiary)" :stroke-width (/ 1 zoom) :fill "none"}}])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index 0c73974ca1..27f8ca2180 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -56,30 +56,39 @@ height: $s-32; width: $s-32; margin: 0; - border: 1px solid var(--color-background-tertiary); + border: $s-1 solid var(--input-border-color-rest); border-radius: $br-8 $br-2 $br-2 $br-8; - background-color: var(--color-background-tertiary); + background-color: var(--input-background-color-rest); svg { height: $s-16; width: $s-16; stroke: var(--icon-foreground); } &:focus { - border: 1px solid var(--input-border-color-focus); + border: $s-1 solid var(--input-border-color-focus); outline: 0; - background-color: var(--input-background-color-active); - color: var(--input-foreground-color-active); + background-color: var(--input-background-color-focus); + color: var(--input-foreground-color-focus); svg { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); } } &:hover { - border: 1px solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); stroke: var(--button-foreground-hover); } + &:focus { + border: $s-1 solid var(--input-border-color-focus); + outline: 0; + background-color: var(--input-background-color-focus); + color: var(--input-foreground-color-focus); + svg { + background-color: var(--input-background-color-focus); + } + } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs index bbc02f72ac..2431c88b7f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs @@ -101,15 +101,15 @@ ::mf/register-as :name-group-dialog} [{:keys [path last-path accept] :as ctx :or {path "" last-path ""}}] - (let [initial (mf/use-memo - (mf/deps last-path) - (constantly {:asset-name last-path})) - form (fm/use-form :spec ::name-group-form - :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"))] - :initial initial) + (let [initial (mf/use-memo + (mf/deps last-path) + (constantly {:asset-name last-path})) + form (fm/use-form :spec ::name-group-form + :validators [(fm/validate-not-empty :asset-name (tr "auth.name.not-all-space")) + (fm/validate-length :asset-name fm/max-length-allowed (tr "auth.name.too-long"))] + :initial initial) - create? (empty? path) + create? (empty? path) on-close (mf/use-fn #(modal/hide!)) @@ -122,6 +122,7 @@ (accept asset-name) (accept path asset-name)) (modal/hide!))))] + [:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-container)} [:div {:class (stl/css :modal-header)} diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index e46c73d23c..55811f1102 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -42,7 +42,7 @@ } } &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); background-color: var(--input-background-color-hover); svg { background-color: var(--input-background-color-hover); diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss index 7b67bcf8c6..3fc519cef3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -17,7 +17,6 @@ .tab-spacing { margin-right: $s-12; - margin-bottom: $s-8; } .content-class { @@ -33,4 +32,5 @@ display: flex; flex-direction: column; gap: $s-8; + padding-top: $s-8; } 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 6bed44856a..a7f64e93ba 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 @@ -67,7 +67,7 @@ background-color: var(--input-background-color); color: var(--menu-foreground-color); box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); } } .actions { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs index 9a02869c3a..da7b371a58 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs @@ -165,7 +165,7 @@ {:value "6" :label "6x"}] format-options [{:value "png" :label "PNG"} - {:value "jpeg" :label "JPEG"} + {:value "jpeg" :label "JPG"} {:value "svg" :label "SVG"} {:value "pdf" :label "PDF"}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 0e8d126b09..3859a60bd3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -55,6 +55,9 @@ toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not)) + close-more-options + (mf/use-fn #(swap! state* assoc :show-more-options false)) + handle-toggle-visibility (mf/use-fn (mf/deps grid) @@ -125,10 +128,15 @@ (assoc-in [:color :color] color) (update :color dissoc :value))] (when on-change - (on-change (assoc grid :params params)))))) + (on-change (assoc grid :params params))) + (close-more-options)))) handle-set-as-default - (mf/use-fn (mf/deps grid) #(on-save-default grid)) + (mf/use-fn + (mf/deps grid) + (fn [] + (on-save-default grid) + (close-more-options))) is-default (= (->> grid :params) (->> grid :type default-grid-params))] @@ -180,7 +188,7 @@ [:& advanced-options {:class (stl/css :grid-advanced-options) :visible? open? :on-close toggle-advanced-options} - ;; square + ;; square (when (= :square type) [:div {:class (stl/css :square-row)} [:div {:class (stl/css :advanced-row)} @@ -269,15 +277,14 @@ [:button {:class (stl/css-case :show-more-options true :selected show-more-options?) - :on-click toggle-more-options} + :on-click toggle-more-options + :disabled is-default} i/menu-refactor] (when show-more-options? [:div {:class (stl/css :more-options)} - [:button {:disabled is-default - :class (stl/css :option-btn) + [:button {:class (stl/css :option-btn) :on-click handle-use-default} (tr "workspace.options.grid.params.use-default")] - [:button {:disabled is-default - :class (stl/css :option-btn) + [:button {:class (stl/css :option-btn) :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])])) (mf/defc frame-grid diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss index 4a23132e71..d1bb3aa4cb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss @@ -45,7 +45,7 @@ width: $s-28; border-radius: $br-8 0 0 $br-8; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); svg { @extend .button-icon; } @@ -62,9 +62,9 @@ border-radius: 0; height: 100%; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); &:hover { - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); } } } @@ -90,7 +90,7 @@ height: $s-32; border-radius: 0 $br-8 $br-8 0; box-sizing: border-box; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); .numeric-input { @extend .input-base; margin: 0; 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 f3ca1d9775..e2f48a6e30 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 @@ -275,7 +275,7 @@ padding: 0; margin-right: 0; background-color: var(--input-background-color); - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); color: var(--input-foreground-color); .start-flow-btn { @include buttonStyle; @@ -315,22 +315,27 @@ &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); &:active { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-hover); .flow-input-wrapper { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-hover); } } } &:focus, &:focus-within { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + &:hover { + border: $s-1 solid var(--input-border-color-focus); + } } &.editing { background-color: var(--input-background-color-active); + border: $s-1 solid var(--input-border-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 e8a81f607f..1040e56752 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 @@ -278,7 +278,7 @@ width: $s-60; margin: 0; padding: 0; - border: $s-1 solid var(--input-background-color); + border: $s-1 solid var(--input-border-color); position: relative; .font-size-select { @include removeInputStyle; 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 bfa232fdad..ed7f7bc3ae 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 @@ -85,7 +85,7 @@ } &:hover { background-color: var(--input-background-color-hover); - border: $s-1 solid var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-hover); .color-bullet-wrapper, .color-name, .detach-btn, @@ -107,14 +107,28 @@ background-color: var(--input-background-color-active); } } + &:focus, + &:focus-within { + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + } } + &:focus, &:focus-within { - background-color: var(--input-background-color-active); + background-color: var(--input-background-color-focus); + border: $s-1 solid var(--input-border-color-focus); + &:hover { + background-color: var(--input-background-color-hover); + border: $s-1 solid var(--input-border-color-focus); + } } &.editing { background-color: var(--input-background-color-active); + &:hover { + border: $s-1 solid var(--input-border-color-active); + } } } .gradient-name-wrapper { diff --git a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs index 356af918e1..153e59d52c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/drawarea.cljs @@ -38,7 +38,7 @@ [:rect.main {:x x :y y :width width :height height - :style {:stroke "var(--color-select)" + :style {:stroke "var(--color-accent-tertiary)" :fill "none" :stroke-width (/ 1 zoom)}}]))) diff --git a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs index 3e076fbb8f..5840009800 100644 --- a/frontend/src/app/main/ui/workspace/viewport/gradients.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/gradients.cljs @@ -22,14 +22,14 @@ [rumext.v2 :as mf])) (def gradient-line-stroke-width 2) -(def gradient-line-stroke-color "var(--color-white)") +(def gradient-line-stroke-color "var(--white)") (def gradient-square-width 15) (def gradient-square-radius 2) (def gradient-square-stroke-width 2) (def gradient-width-handler-radius 5) -(def gradient-width-handler-color "var(--color-white)") -(def gradient-square-stroke-color "var(--color-white)") -(def gradient-square-stroke-color-selected "var(--color-select)") +(def gradient-width-handler-color "var(--white)") +(def gradient-square-stroke-color "var(--white)") +(def gradient-square-stroke-color-selected "var(--color-accent-tertiary)") (mf/defc shadow [{:keys [id x y width height offset]}] [:filter {:id id @@ -109,7 +109,7 @@ :rx (/ gradient-square-radius zoom) :width (/ gradient-square-width zoom) :height (/ gradient-square-width zoom) - :stroke (if selected "var(--color-primary)" "var(--color-white)") + :stroke (if selected "var(--color-accent-tertiary)" "var(--white)") :stroke-width (/ gradient-square-stroke-width zoom) :fill (:value color) :fill-opacity (:opacity color) diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs index 583eeddda5..f7a21f6dfd 100644 --- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs @@ -131,7 +131,7 @@ (when icon-pdata [:path {:fill stroke :stroke-width 2 - :stroke "var(--color-white)" + :stroke "var(--white)" :d icon-pdata :transform (str "scale(" inv-zoom ", " inv-zoom ") " @@ -164,7 +164,7 @@ (if-not selected? [:g {:on-pointer-down #(on-pointer-down % index orig-shape)} - [:path {:stroke "var(--color-gray-20)" + [:path {:stroke "var(--off-white)" :fill "none" :pointer-events "visible" :stroke-width (/ 2 zoom) @@ -173,13 +173,13 @@ [:& interaction-marker {:index index :x dest-x :y dest-y - :stroke "var(--color-gray-20)" + :stroke "var(--off-white)" :action-type action-type :arrow-dir arrow-dir :zoom zoom}])] [:g {:on-pointer-down #(on-pointer-down % index orig-shape)} - [:path {:stroke "var(--color-primary)" + [:path {:stroke "var(--color-accent-tertiary)" :fill "none" :pointer-events "visible" :stroke-width (/ 2 zoom) @@ -188,17 +188,17 @@ (when dest-shape [:& outline {:zoom zoom :shape dest-shape - :color "var(--color-primary)"}]) + :color "var(--color-accent-tertiary)"}]) [:& interaction-marker {:index index :x orig-x :y orig-y - :stroke "var(--color-primary)" + :stroke "var(--color-accent-tertiary)" :zoom zoom}] [:& interaction-marker {:index index :x dest-x :y dest-y - :stroke "var(--color-primary)" + :stroke "var(--color-accent-tertiary)" :action-type action-type :arrow-dir arrow-dir :zoom zoom}]]))) @@ -212,7 +212,7 @@ [:g {:on-pointer-down #(on-pointer-down % index shape)} [:& interaction-marker {:x handle-x :y handle-y - :stroke "var(--color-primary)" + :stroke "var(--color-accent-tertiary)" :action-type :navigate :arrow-dir :right :zoom zoom}]])) @@ -256,8 +256,8 @@ [:& (mf/provider muc/render-thumbnails) {:value true} [:& (mf/provider embed/context) {:value false} [:& shape-wrapper {:shape dest-shape}]]]] - [:path {:stroke "var(--color-primary)" - :fill "var(--color-black)" + [:path {:stroke "var(--color-accent-tertiary)" + :fill "var(--black)" :fill-opacity 0.5 :stroke-width 1 :d (dm/str "M" marker-x " " marker-y " " @@ -271,7 +271,7 @@ [:circle {:cx (+ marker-x (/ width 2)) :cy (+ marker-y (/ height 2)) :r 8 - :fill "var(--color-primary)"}]])))) + :fill "var(--color-accent-tertiary)"}]])))) (mf/defc interactions [{:keys [current-transform objects zoom selected hover-disabled? page-id] :as props}] diff --git a/frontend/src/app/main/ui/workspace/viewport/outline.cljs b/frontend/src/app/main/ui/workspace/viewport/outline.cljs index 70c84b7bb6..176128102c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/outline.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/outline.cljs @@ -34,7 +34,7 @@ objects (deref refs/workspace-page-objects) color (if (ctn/in-any-component? objects shape) "var(--color-component-highlight)" - "var(--color-primary)") + "var(--color-accent-tertiary)") x (dm/get-prop shape :x) y (dm/get-prop shape :y) @@ -65,7 +65,7 @@ (obj/merge! #js {:fill "none" :stroke color - :strokeWidth (/ 2 zoom) + :strokeWidth (/ 1 zoom) :pointerEvents "none" :transform transform} diff --git a/frontend/src/app/main/ui/workspace/viewport/presence.cljs b/frontend/src/app/main/ui/workspace/viewport/presence.cljs index bf4af1a0a5..0b4c7a091d 100644 --- a/frontend/src/app/main/ui/workspace/viewport/presence.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/presence.cljs @@ -25,8 +25,8 @@ [{:keys [session profile] :as props}] (let [zoom (mf/deref refs/selected-zoom) point (:point session) - background-color (:color session "var(--color-black)") - text-color (:text-color session "var(--color-white)") + background-color (:color session "var(--black)") + text-color (:text-color session "var(--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) "...") diff --git a/frontend/src/app/main/ui/workspace/viewport/rules.cljs b/frontend/src/app/main/ui/workspace/viewport/rules.cljs index 21db6a320a..0b2833e297 100644 --- a/frontend/src/app/main/ui/workspace/viewport/rules.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/rules.cljs @@ -21,7 +21,7 @@ (def rule-area-size 22) (def rule-area-half-size (/ rule-area-size 2)) (def rules-background "var(--panel-background-color)") -(def selection-area-color "var(--color-primary)") +(def selection-area-color "var(--color-accent-tertiary)") (def selection-area-opacity 0.3) (def over-number-size 100) (def over-number-opacity 0.8) diff --git a/frontend/src/app/main/ui/workspace/viewport/selection.cljs b/frontend/src/app/main/ui/workspace/viewport/selection.cljs index 2d1381b66c..a8202db7f0 100644 --- a/frontend/src/app/main/ui/workspace/viewport/selection.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/selection.cljs @@ -31,7 +31,7 @@ (def resize-point-circle-radius 10) (def resize-point-rect-size 8) (def resize-side-height 8) -(def selection-rect-color-normal "var(--color-select)") +(def selection-rect-color-normal "var(--color-accent-tertiary)") (def selection-rect-color-component "var(--color-component-highlight)") (def selection-rect-width 1) (def min-selrect-side 10) @@ -213,7 +213,7 @@ :style {:fillOpacity "1" :strokeWidth "1px" :vectorEffect "non-scaling-stroke"} - :fill "var(--color-white)" + :fill "var(--white)" :stroke color :cx cx' :cy cy'}] @@ -279,7 +279,7 @@ :style {:fillOpacity 1 :stroke color :strokeWidth "1px" - :fill "var(--color-white)" + :fill "var(--white)" :vectorEffect "non-scaling-stroke"} :data-position (name position) :cx (+ x (/ length 2)) diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs index 4d8941fc66..273813a93c 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_distances.cljs @@ -21,7 +21,7 @@ [cuerdas.core :as str] [rumext.v2 :as mf])) -(def ^:private line-color "var(--color-snap)") +(def ^:private line-color "var(--color-foreground-tertiary)") (def ^:private segment-gap 2) (def ^:private segment-gap-side 5) @@ -85,7 +85,7 @@ [:text {:x (if (= coord :x) x (+ x (/ width 2))) :y (- (+ y (/ (/ pill-text-height zoom) 2) (- (/ 6 zoom))) (if (= coord :x) (/ 2 zoom) 0)) :font-size (/ pill-text-font-size zoom) - :fill "var(--color-white)" + :fill "var(--white)" :text-anchor "middle"} (fmt/format-number distance)]]) diff --git a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs index a65ab03668..3e5a0c190b 100644 --- a/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/snap_points.cljs @@ -16,7 +16,7 @@ [beicon.v2.core :as rx] [rumext.v2 :as mf])) -(def ^:private line-color "var(--color-snap)") +(def ^:private line-color "var(--color-foreground-tertiary)") (def ^:private line-opacity 0.6) (def ^:private line-width 1) diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs index ccd92afc36..b1288fc498 100644 --- a/frontend/src/app/main/ui/workspace/viewport/widgets.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/widgets.cljs @@ -70,10 +70,8 @@ :width (:width data) :height (:height data) :style {;; Primary with 0.1 opacity - :fill "rgb(49, 239, 184, 0.1)" - - ;; Primary color - :stroke "rgb(49, 239, 184)" + :fill "var(--color-accent-tertiary-muted)" + :stroke "var(--color-accent-tertiary)" :stroke-width (/ 1 zoom)}}])) @@ -86,10 +84,11 @@ ;; Note that we don't use mf/deref to avoid a repaint dependency here objects (deref refs/workspace-page-objects) - color (when selected? + color (if selected? (if (ctn/in-any-component? objects frame) "var(--color-component-highlight)" - "var(--color-primary-dark)")) + "var(--color-accent-tertiary)") + "#8f9da3") ;; TODO: Set this color on the DS on-pointer-down (mf/use-callback @@ -145,17 +144,18 @@ :width 12 :height 12 :class "workspace-frame-icon" - :style {:fill color} + :style {:stroke color + :fill "none"} :visibility (if show-artboard-names? "visible" "hidden")} (cond (:use-for-thumbnail frame) - [:use {:href "#icon-set-thumbnail"}] + [:use {:href "#icon-boards-thumbnail-refactor"}] grid-edition? - [:use {:href "#icon-grid-layout-mode"}] + [:use {:href "#icon-grid-refactor"}] main-instance? - [:use {:href "#icon-component"}])]) + [:use {:href "#icon-component-refactor"}])]) [:text {:x text-pos-x :y 0