diff --git a/backend/src/app/rpc/commands/search.clj b/backend/src/app/rpc/commands/search.clj index 1c4026d6d..571015645 100644 --- a/backend/src/app/rpc/commands/search.clj +++ b/backend/src/app/rpc/commands/search.clj @@ -9,6 +9,7 @@ [app.common.spec :as us] [app.db :as db] [app.rpc :as-alias rpc] + [app.rpc.commands.files :refer [resolve-public-uri]] [app.rpc.doc :as-alias doc] [app.util.services :as sv] [clojure.spec.alpha :as s])) @@ -37,12 +38,15 @@ ) select distinct f.id, + f.revn, f.project_id, f.created_at, f.modified_at, f.name, - f.is_shared + f.is_shared, + ft.media_id from file as f + left join file_thumbnail as ft on (ft.file_id = f.id and ft.revn = f.revn) inner join projects as pr on (f.project_id = pr.id) where f.name ilike ('%' || ? || '%') and (f.deleted_at is null or f.deleted_at > now()) @@ -50,10 +54,16 @@ (defn search-files [conn profile-id team-id search-term] - (db/exec! conn [sql:search-files - profile-id team-id - profile-id team-id - search-term])) + (->> (db/exec! conn [sql:search-files + profile-id team-id + profile-id team-id + search-term]) + (mapv (fn [row] + (if-let [media-id (:media-id row)] + (-> row + (dissoc :media-id) + (assoc :thumbnail-uri (resolve-public-uri media-id))) + (dissoc row :media-id)))))) (s/def ::team-id ::us/uuid) (s/def ::search-files ::us/string) diff --git a/common/src/app/common/geom/rect.cljc b/common/src/app/common/geom/rect.cljc index 62222b707..5fa77b8d3 100644 --- a/common/src/app/common/geom/rect.cljc +++ b/common/src/app/common/geom/rect.cljc @@ -353,3 +353,19 @@ (mth/max by1 y1) (mth/min bx2 x2) (mth/min by2 y2))))) +(defn fix-aspect-ratio + [bounds aspect-ratio] + (if aspect-ratio + (let [width (dm/get-prop bounds :width) + height (dm/get-prop bounds :height) + target-height (* width aspect-ratio) + target-width (* height (/ 1 aspect-ratio))] + (cond-> bounds + (> target-height height) + (-> (assoc :height target-height) + (update :y - (/ (- target-height height ) 2))) + + (< target-height height) + (-> (assoc :width target-width) + (update :x - (/ (- target-width width ) 2))))) + bounds)) diff --git a/frontend/resources/fonts/RobotoMono-Regular.ttf b/frontend/resources/fonts/RobotoMono-Regular.ttf new file mode 100644 index 000000000..6df2b2536 Binary files /dev/null and b/frontend/resources/fonts/RobotoMono-Regular.ttf differ diff --git a/frontend/resources/fonts/SpaceMono-Bold.ttf b/frontend/resources/fonts/SpaceMono-Bold.ttf deleted file mode 100644 index 20e344951..000000000 Binary files a/frontend/resources/fonts/SpaceMono-Bold.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-BoldItalic.ttf b/frontend/resources/fonts/SpaceMono-BoldItalic.ttf deleted file mode 100644 index ff2ea5a5c..000000000 Binary files a/frontend/resources/fonts/SpaceMono-BoldItalic.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-Italic.ttf b/frontend/resources/fonts/SpaceMono-Italic.ttf deleted file mode 100644 index f36282f26..000000000 Binary files a/frontend/resources/fonts/SpaceMono-Italic.ttf and /dev/null differ diff --git a/frontend/resources/fonts/SpaceMono-Regular.ttf b/frontend/resources/fonts/SpaceMono-Regular.ttf deleted file mode 100644 index 04e56b923..000000000 Binary files a/frontend/resources/fonts/SpaceMono-Regular.ttf and /dev/null differ diff --git a/frontend/resources/images/icons/login-illustration.svg b/frontend/resources/images/icons/login-illustration.svg index a10e27fd9..6e6b7394a 100644 --- a/frontend/resources/images/icons/login-illustration.svg +++ b/frontend/resources/images/icons/login-illustration.svg @@ -1,666 +1,686 @@ - - - + + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + - - + + + - - - + + + + + + + + + + + + + - - - - - - - - - - - - - + + - - + + + + - - - - + + + - - - + - + + - - - - - + + - - + + - - - + + + - - - + + + - - + + - - + + - - - - - - - - - - + + + + + + + + + + - - - - - + + + + + - - - + + + - - - - - - - - - - + + + + + + + + + + - - - - - - + + + - - - + + + + + - - + + + - - + + - - - - + + + + + + + + + + + + + + - + - + - - - - - - - - - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - + + - + - + - + - + - + - + - + - - + + - + - + - + - + - + - - + + - + - - + + - + - + - + - - + + - + - - + + - + - + - - + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - - - - - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - - - - - - - - - - - - - + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - - - - + + + + + diff --git a/frontend/resources/styles/common/refactor/color-defs.scss b/frontend/resources/styles/common/refactor/color-defs.scss index 17da351a1..b7438f76d 100644 --- a/frontend/resources/styles/common/refactor/color-defs.scss +++ b/frontend/resources/styles/common/refactor/color-defs.scss @@ -4,7 +4,7 @@ // // Copyright (c) KALEIDOS INC -@use "sass:color" as color; +@use "sass:color"; :root { // DARK @@ -31,10 +31,12 @@ --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-3: #f3f4f6; --light-gray-4: #eef0f2; --black: #000; --off-black: #495e74; + --off-black-30: #{color.change(#495e74, $alpha: 0.3)}; --purple: #6911d4; --purple-30: rgba(105, 17, 212, 0.2); --blue: #1345aa; diff --git a/frontend/resources/styles/common/refactor/common-dashboard.scss b/frontend/resources/styles/common/refactor/common-dashboard.scss index dc0a728e0..f2de6c4ec 100644 --- a/frontend/resources/styles/common/refactor/common-dashboard.scss +++ b/frontend/resources/styles/common/refactor/common-dashboard.scss @@ -157,6 +157,8 @@ .btn-primary { @extend .button-primary; text-transform: uppercase; + font-size: $fs-14; + font-weight: $fw400; } .btn-secondary { diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index c68d1d650..c1d86f5ea 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -179,7 +179,7 @@ --menu-shortcut-foreground-color: var(--color-foreground-secondary); --menu-shortcut-foreground-color-selected: var(--color-foreground-primary); --menu-shortcut-foreground-color-hover: var(--color-foreground-primary); - --menu-shadow-color: var(--color-background-subtle); + --menu-shadow-color: var(--shadow-color); --menu-background-color-disabled: var(--color-background-primary); --menu-foreground-color-disabled: var(--color-foreground-secondary); --menu-border-color-disabled: var(--color-background-quaternary); diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss index 583ee3a73..c2f2ce756 100644 --- a/frontend/resources/styles/common/refactor/mixins.scss +++ b/frontend/resources/styles/common/refactor/mixins.scss @@ -63,6 +63,13 @@ 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; diff --git a/frontend/resources/styles/common/refactor/themes/default-theme.scss b/frontend/resources/styles/common/refactor/themes/default-theme.scss index f5d10bad9..20b8067dd 100644 --- a/frontend/resources/styles/common/refactor/themes/default-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/default-theme.scss @@ -21,6 +21,7 @@ --color-accent-primary-muted: var(--green-30); --color-accent-secondary: var(--lilac); --color-accent-tertiary: var(--strong-green); + --overlay-color: rgba(0, 0, 0, 0.4); --ok-color: var(--dark-ok-color); --warning-color: var(--dark-warning-color); @@ -28,5 +29,8 @@ --error-color: var(--dark-error-color); --canvas-color: var(--color-canvas); + --shadow-color: var(--dark-gray-2-30); + --radio-button-box-shadow: 0 0 0 1px var(--dark-gray-2-30) inset; + @include meta.load-css("hljs-dark-theme"); } diff --git a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss index 5ae417d47..ddfa3a09e 100644 --- a/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/hljs-dark-theme.scss @@ -1,98 +1,124 @@ -/** - * Panda Syntax Theme for Highlight.js - * Based on: https://github.com/tinkertrain/panda-syntax-vscode - * Author: Annmarie Switzer - */ +/*! + Theme: GitHub Dark Dimmed + Description: Dark dimmed theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Colors taken from GitHub's CSS +*/ .hljs { - color: #e6e6e6; - background: #2a2c2d; + color: #adbac7; + background: #22272e; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + /* prettylights-syntax-keyword */ + color: #f47067; +} + +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + /* prettylights-syntax-entity */ + color: #dcbdfb; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + /* prettylights-syntax-constant */ + color: #6cb6ff; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + /* prettylights-syntax-string */ + color: #96d0ff; +} + +.hljs-built_in, +.hljs-symbol { + /* prettylights-syntax-variable */ + color: #f69d50; +} + +.hljs-comment, +.hljs-code, +.hljs-formula { + /* prettylights-syntax-comment */ + color: #768390; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #8ddb8c; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #adbac7; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #316dca; + font-weight: bold; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #eac55f; } .hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #adbac7; font-style: italic; } .hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #adbac7; font-weight: bold; } -.hljs-link { - text-decoration: underline; +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #b4f1b4; + background-color: #1b4721; } -.hljs-comment, -.hljs-quote { - color: #bbbbbb; - font-style: italic; -} - -.hljs-params { - color: #bbbbbb; -} - -.hljs-punctuation, -.hljs-attr { - color: #e6e6e6; -} - -.hljs-selector-tag, -.hljs-name, -.hljs-meta { - color: #ff4b82; -} - -.hljs-operator, -.hljs-char.escape_ { - color: #b084eb; -} - -.hljs-keyword, .hljs-deletion { - color: #ff75b5; + /* prettylights-syntax-markup-deleted */ + color: #ffd8d3; + background-color: #78191b; } -.hljs-regexp, -.hljs-selector-pseudo, -.hljs-selector-attr, -.hljs-variable.language_ { - color: #ff9ac1; -} - -.hljs-subst, -.hljs-property, -.hljs-code, -.hljs-formula, -.hljs-section, -.hljs-title.function_ { - color: #45a9f9; -} - -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition, -.hljs-selector-class, -.hljs-title.class_, -.hljs-title.class_.inherited__, -.hljs-meta .hljs-string { - color: #19f9d8; -} - -.hljs-variable, -.hljs-template-variable, -.hljs-number, -.hljs-literal, -.hljs-type, +.hljs-char.escape_, .hljs-link, -.hljs-built_in, -.hljs-title, -.hljs-selector-id, -.hljs-tag, -.hljs-doctag, -.hljs-attribute, -.hljs-template-tag, -.hljs-meta .hljs-keyword, -.hljs-punctuation { - color: #ffb86c; +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ } diff --git a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss index 615abdd13..ea2d601f7 100644 --- a/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/hljs-light-theme.scss @@ -1,94 +1,126 @@ -/** - * Panda Syntax Theme for Highlight.js - * Based on: https://github.com/tinkertrain/panda-syntax-vscode - * Author: Annmarie Switzer - */ +/*! + Theme: GitHub + Description: Light theme as seen on github.com + Author: github.com + Maintainer: @Hirse + Updated: 2021-05-15 + + Outdated base version: https://github.com/primer/github-syntax-light + Current colors taken from GitHub's CSS +*/ .hljs { - color: #2a2c2d; - background: #e6e6e6; + color: #24292e; + background: #ffffff; +} + +.hljs-doctag, +.hljs-keyword, +.hljs-meta .hljs-keyword, +.hljs-template-tag, +.hljs-template-variable, +.hljs-type, +.hljs-variable.language_ { + /* prettylights-syntax-keyword */ + color: #d73a49; +} + +.hljs-title, +.hljs-title.class_, +.hljs-title.class_.inherited__, +.hljs-title.function_ { + /* prettylights-syntax-entity */ + color: #6f42c1; +} + +.hljs-attr, +.hljs-attribute, +.hljs-literal, +.hljs-meta, +.hljs-number, +.hljs-operator, +.hljs-variable, +.hljs-selector-attr, +.hljs-selector-class, +.hljs-selector-id { + /* prettylights-syntax-constant */ + color: #005cc5; +} + +.hljs-regexp, +.hljs-string, +.hljs-meta .hljs-string { + /* prettylights-syntax-string */ + color: #032f62; +} + +.hljs-built_in, +.hljs-symbol { + /* prettylights-syntax-variable */ + color: #e36209; +} + +.hljs-comment, +.hljs-code, +.hljs-formula { + /* prettylights-syntax-comment */ + color: #6a737d; +} + +.hljs-name, +.hljs-quote, +.hljs-selector-tag, +.hljs-selector-pseudo { + /* prettylights-syntax-entity-tag */ + color: #22863a; +} + +.hljs-subst { + /* prettylights-syntax-storage-modifier-import */ + color: #24292e; +} + +.hljs-section { + /* prettylights-syntax-markup-heading */ + color: #005cc5; + font-weight: bold; +} + +.hljs-bullet { + /* prettylights-syntax-markup-list */ + color: #735c0f; } .hljs-emphasis { + /* prettylights-syntax-markup-italic */ + color: #24292e; font-style: italic; } .hljs-strong { + /* prettylights-syntax-markup-bold */ + color: #24292e; font-weight: bold; } -.hljs-link { - text-decoration: underline; +.hljs-addition { + /* prettylights-syntax-markup-inserted */ + color: #22863a; + background-color: #f0fff4; } -.hljs-comment, -.hljs-quote { - color: #676b79; - font-style: italic; -} - -.hljs-params { - color: #676b79; -} - -.hljs-punctuation, -.hljs-attr { - color: #2a2c2d; -} - -.hljs-selector-tag, -.hljs-name, -.hljs-meta, -.hljs-operator, -.hljs-char.escape_ { - color: #c56200; -} - -.hljs-keyword, .hljs-deletion { - color: #d92792; + /* prettylights-syntax-markup-deleted */ + color: #b31d28; + background-color: #ffeef0; } -.hljs-regexp, -.hljs-selector-pseudo, -.hljs-selector-attr, -.hljs-variable.language_ { - color: #cc5e91; -} - -.hljs-subst, -.hljs-property, -.hljs-code, -.hljs-formula, -.hljs-section, -.hljs-title.function_ { - color: #3787c7; -} - -.hljs-string, -.hljs-symbol, -.hljs-bullet, -.hljs-addition, -.hljs-selector-class, -.hljs-title.class_, -.hljs-title.class_.inherited__, -.hljs-meta .hljs-string { - color: #0d7d6c; -} - -.hljs-variable, -.hljs-template-variable, -.hljs-number, -.hljs-literal, -.hljs-type, +.hljs-char.escape_, .hljs-link, -.hljs-built_in, -.hljs-title, -.hljs-selector-id, -.hljs-tag, -.hljs-doctag, -.hljs-attribute, -.hljs-template-tag, -.hljs-meta .hljs-keyword { - color: #7641bb; +.hljs-params, +.hljs-property, +.hljs-punctuation, +.hljs-tag { + /* purposely ignored */ + color: #6a737d; } diff --git a/frontend/resources/styles/common/refactor/themes/light-theme.scss b/frontend/resources/styles/common/refactor/themes/light-theme.scss index 60c904f10..bbfc3337d 100644 --- a/frontend/resources/styles/common/refactor/themes/light-theme.scss +++ b/frontend/resources/styles/common/refactor/themes/light-theme.scss @@ -21,11 +21,16 @@ --color-accent-primary-muted: var(--purple-30); --color-accent-secondary: var(--blue); --color-accent-tertiary: var(--strong-purple); + + --overlay-color: rgba(255, 255, 255, 0.4); --ok-color: var(--light-ok-color); --warning-color: var(--light-warning-color); --pending-color: var(--light-pending-color); --error-color: var(--light-error-color); --canvas-color: var(--color-canvas); + --shadow-color: var(--off-black-30); + --radio-button-box-shadow: 0 0 0 1px var(--light-gray-2) inset; + @include meta.load-css("hljs-light-theme"); } diff --git a/frontend/src/app/main/data/dashboard.cljs b/frontend/src/app/main/data/dashboard.cljs index 9e723ca20..b9dec712e 100644 --- a/frontend/src/app/main/data/dashboard.cljs +++ b/frontend/src/app/main/data/dashboard.cljs @@ -831,9 +831,15 @@ (ptk/reify ::set-file-thumbnail ptk/UpdateEvent (update [_ state] - (-> state - (d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri) - (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri))))) + (letfn [(update-search-files [files] + (->> files + (mapv #(cond-> % + (= file-id (:id %)) + (assoc :thumbnail-uri thumbnail-uri)))))] + (-> state + (d/update-in-when [:dashboard-files file-id] assoc :thumbnail-uri thumbnail-uri) + (d/update-in-when [:dashboard-recent-files file-id] assoc :thumbnail-uri thumbnail-uri) + (d/update-when :dashboard-search-result update-search-files)))))) ;; --- EVENT: create-file diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index 3ea0e1d34..2066ad30c 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -66,16 +66,18 @@ :fill color}]) (defn- calculate-dimensions - [objects] - (let [bounds (->> (ctst/get-root-objects objects) - (map (partial gsb/get-object-bounds objects)) - (grc/join-rects))] + [objects aspect-ratio] + (let [bounds + (->> (ctst/get-root-objects objects) + (map (partial gsb/get-object-bounds objects)) + (grc/join-rects))] (-> bounds (update :x mth/finite 0) (update :y mth/finite 0) (update :width mth/finite 100000) (update :height mth/finite 100000) - (grc/update-rect :position)))) + (grc/update-rect :position) + (grc/fix-aspect-ratio aspect-ratio)))) (declare shape-wrapper-factory) @@ -194,11 +196,11 @@ (mf/defc page-svg {::mf/wrap [mf/memo]} - [{:keys [data use-thumbnails embed include-metadata] :as props + [{:keys [data use-thumbnails embed include-metadata aspect-ratio] :as props :or {embed false include-metadata false}}] (let [objects (:objects data) shapes (cfh/get-immediate-children objects) - dim (calculate-dimensions objects) + dim (calculate-dimensions objects aspect-ratio) vbox (format-viewbox dim) bgcolor (dm/get-in data [:options :background] default-color) @@ -253,11 +255,14 @@ ;; the viewer and inspector (mf/defc frame-svg {::mf/wrap [mf/memo]} - [{:keys [objects frame zoom use-thumbnails] :or {zoom 1} :as props}] + [{:keys [objects frame zoom use-thumbnails aspect-ratio background-color] :or {zoom 1} :as props}] (let [frame-id (:id frame) + + bgcolor (d/nilv background-color default-color) include-metadata (mf/use-ctx export/include-metadata-ctx) - bounds (gsb/get-object-bounds objects frame) + bounds (-> (gsb/get-object-bounds objects frame) + (grc/fix-aspect-ratio aspect-ratio)) ;; Bounds without shadows/blur will be the bounds of the thumbnail bounds2 (gsb/get-object-bounds objects (dissoc frame :shadow :blur)) @@ -305,6 +310,7 @@ :xmlns "http://www.w3.org/2000/svg" :xmlnsXlink "http://www.w3.org/1999/xlink" :xmlns:penpot (when include-metadata "https://penpot.app/xmlns") + :style {:background bgcolor} :fill "none"} [:& shape-wrapper {:shape frame}]]])) diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss index 7a9b9aa19..ae955b062 100644 --- a/frontend/src/app/main/ui/auth.scss +++ b/frontend/src/app/main/ui/auth.scss @@ -15,6 +15,7 @@ height: 100%; padding: $s-32; width: 100%; + overflow: auto; &.no-illustration { display: flex; diff --git a/frontend/src/app/main/ui/components/color_bullet_new.cljs b/frontend/src/app/main/ui/components/color_bullet_new.cljs index 4281edf62..6af3f502b 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.cljs +++ b/frontend/src/app/main/ui/components/color_bullet_new.cljs @@ -17,11 +17,13 @@ {::mf/wrap [mf/memo] ::mf/wrap-props false} [{:keys [color on-click mini? area]}] - (let [on-click (mf/use-fn - (mf/deps color on-click) - (fn [event] - (when (fn? on-click) - (^function on-click color event))))] + (let [read-only? (nil? on-click) + on-click + (mf/use-fn + (mf/deps color on-click) + (fn [event] + (when (fn? on-click) + (^function on-click color event))))] (if (uc/multiple? color) [:div {:on-click on-click :class (stl/css :color-bullet :multiple)}] @@ -39,7 +41,9 @@ :is-not-library-color (nil? id) :is-gradient (some? gradient) :is-transparent (and opacity (> 1 opacity)) - :grid-area area) + :grid-area area + :read-only read-only?) + :data-readonly (str read-only?) :on-click on-click} (cond 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 7703ebf41..9da025115 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.scss +++ b/frontend/src/app/main/ui/components/color_bullet_new.scss @@ -64,7 +64,7 @@ height: 100%; background-color: var(--color-bullet-background-color); } - &:hover { + &:hover:not(.read-only) { border: $s-2 solid var(--color-bullet-border-color-selected); } } @@ -87,6 +87,7 @@ @include inspectValue; color: var(--palette-text-color); height: $s-16; + text-align: center; } .no-text { diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 4076cb9d0..51b81415e 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -40,6 +40,7 @@ &.checked { border: none; background-color: var(--radio-btn-background-color-selected); + box-shadow: var(--radio-button-box-shadow); svg { stroke: var(--radio-btn-foreground-color-selected); } diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index d69d8affa..acea5d58f 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -24,6 +24,7 @@ height: 100%; min-height: $s-32; color: var(--title-foreground-color); + overflow: hidden; } .title-only { margin-left: $s-8; @@ -36,6 +37,7 @@ padding: 0; color: var(--title-foreground-color); stroke: var(--title-foreground-color); + overflow: hidden; .toggle-btn { @include buttonStyle; display: flex; @@ -44,6 +46,7 @@ padding: 0; color: var(--title-foreground-color); stroke: var(--title-foreground-color); + overflow: hidden; .collapsabled-icon { @include flexCenter; height: $s-24; diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index 66a3f9860..663e26710 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -61,7 +61,7 @@ (rx/map (fn [styles] (assoc result :styles styles - :width 250)))))) + :width 252)))))) (rx/mapcat thr/render) (rx/mapcat (partial persist-thumbnail file-id revn)))) diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss index 55d63faee..818b7fdce 100644 --- a/frontend/src/app/main/ui/dashboard/grid.scss +++ b/frontend/src/app/main/ui/dashboard/grid.scss @@ -7,7 +7,7 @@ @import "refactor/common-refactor.scss"; $thumbnail-default-width: $s-252; // Default width -$thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 +$thumbnail-default-height: $s-168; // Default width .dashboard-grid { font-size: $fs-14; @@ -44,10 +44,12 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 } .grid-item-th { - border-radius: $br-4; + border-radius: $br-8; text-align: initial; width: var(--th-width, #{$thumbnail-default-width}); - height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration}); + height: var(--th-height, #{$thumbnail-default-height}); + background-size: cover; + overflow: hidden; img { object-fit: contain; @@ -59,7 +61,7 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 outline: $br-4 solid $da-primary; text-align: initial; width: calc(var(--th-width) + $s-12); - height: calc(var(--th-width, #{$thumbnail-default-width}) * #{$thumbnail-aspect-ration}); + height: var(--th-height, #{$thumbnail-default-height}); } &.overlay { @@ -131,10 +133,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 .item-badge { background-color: $da-primary; border: none; - border-radius: $br-4; + border-radius: $br-6; position: absolute; - top: $s-8; - right: $s-8; + top: $s-12; + right: $s-12; height: $s-32; width: $s-32; display: flex; @@ -258,17 +260,10 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 .grid-item-th { border-radius: $br-4; cursor: pointer; - - background-position: center; - background-size: auto 80%; - background-repeat: no-repeat; - height: 100%; overflow: hidden; position: relative; width: 100%; - - background-color: var(--canvas-color); display: flex; justify-content: center; flex-direction: row; @@ -283,8 +278,9 @@ $thumbnail-aspect-ration: #{2 / 3}; // Ratio 2:3 width: 100%; } - svg#loader-pencil { - fill: $db-cuaternary; + :global(svg#loader-pencil) { + stroke: $db-cuaternary; + width: calc(var(--th-width, #{$thumbnail-default-width}) * 0.25); } } diff --git a/frontend/src/app/main/ui/dashboard/placeholder.scss b/frontend/src/app/main/ui/dashboard/placeholder.scss index 9b10a5a09..829ad1d53 100644 --- a/frontend/src/app/main/ui/dashboard/placeholder.scss +++ b/frontend/src/app/main/ui/dashboard/placeholder.scss @@ -65,7 +65,7 @@ text-transform: uppercase; border: $s-2 solid transparent; width: var(--th-width, #{g.$thumbnail-default-width}); - height: calc(var(--th-width, #{g.$thumbnail-default-width}) * #{g.$thumbnail-aspect-ration}); + height: var(--th-height, #{g.$thumbnail-default-height}); svg { width: $s-32; diff --git a/frontend/src/app/main/ui/dashboard/projects.scss b/frontend/src/app/main/ui/dashboard/projects.scss index da1e4d4ff..8dcf8e940 100644 --- a/frontend/src/app/main/ui/dashboard/projects.scss +++ b/frontend/src/app/main/ui/dashboard/projects.scss @@ -33,7 +33,6 @@ .project { align-items: center; - background: $df-primary; border-radius: $br-4; display: flex; flex-direction: row; @@ -87,8 +86,8 @@ cursor: pointer; font-size: $fs-16; line-height: 0.8; - font-weight: $fw700; - color: $db-secondary; + font-weight: $fw400; + color: $df-primary; margin-right: $s-4; margin-right: $s-12; } @@ -98,7 +97,7 @@ font-size: $fs-14; line-height: 1.15; font-weight: $fw400; - color: $db-primary; + color: $df-secondary; @media (max-width: 760px) { display: none; } @@ -109,6 +108,9 @@ opacity: 1; margin-left: $s-32; + svg { + fill: $df-primary; + } .btn-small { height: $s-32; margin: 0 $s-8; @@ -139,7 +141,7 @@ &.active { svg { - fill: $db-tertiary; + fill: $da-primary; } } } @@ -188,28 +190,6 @@ } } -.dashboard-project-row .project { - background-color: transparent; - - h2 { - color: $df-primary; - font-weight: 400; - } - span, - .info, - .recent-files-row-title-info { - color: $df-secondary; - } - .project-actions { - svg { - fill: $df-primary; - } - .pin-icon svg { - fill: $df-secondary; - } - } -} - .team-hero { background-color: $db-tertiary; border-radius: $br-8; diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index 8d357be39..ba97239ea 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -335,7 +335,7 @@ transform: rotate(45deg); &:hover { - fill: var(--warning-color); + fill: $da-primary; } } } @@ -420,7 +420,10 @@ } &:hover { - background-color: $db-cuaternary; + background-color: $db-secondary; + span { + color: $da-primary; + } } &.current { diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs index d15a87185..ec41de80f 100644 --- a/frontend/src/app/main/ui/hooks.cljs +++ b/frontend/src/app/main/ui/hooks.cljs @@ -367,13 +367,17 @@ limit (mth/max 1 limit) th-size (when width - (- (/ (- width 32 (* (dec limit) 24)) limit) 12))] + (mth/floor (- (/ (- width 32 (* (dec limit) 24)) limit) 12))) + + ;; Need an even value + th-size (if (odd? (int th-size)) (- th-size 1) th-size)] (mf/with-effect [th-size] (when th-size (let [node (mf/ref-val rowref)] - (.setProperty (.-style node) "--th-width" (str th-size "px"))))) + (.setProperty (.-style node) "--th-width" (str th-size "px")) + (.setProperty (.-style node) "--th-height" (str (mth/ceil (* th-size (/ 2 3))) "px"))))) (mf/with-effect [] (let [node (mf/ref-val rowref) diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs index a5ad1f9be..148cdf773 100644 --- a/frontend/src/app/main/ui/hooks/resize.cljs +++ b/frontend/src/app/main/ui/hooks/resize.cljs @@ -24,62 +24,72 @@ (set! last-resize-type type)) (defn use-resize-hook - [key initial min-val max-val axis negate? resize-type] + ([key initial min-val max-val axis negate? resize-type] + (use-resize-hook key initial min-val max-val axis negate? resize-type nil)) - (let [current-file-id (mf/use-ctx ctx/current-file-id) - size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial)) - parent-ref (mf/use-ref nil) + ([key initial min-val max-val axis negate? resize-type on-change-size] + (let [current-file-id (mf/use-ctx ctx/current-file-id) + size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial)) + parent-ref (mf/use-ref nil) - dragging-ref (mf/use-ref false) - start-size-ref (mf/use-ref nil) - start-ref (mf/use-ref nil) + dragging-ref (mf/use-ref false) + start-size-ref (mf/use-ref nil) + start-ref (mf/use-ref nil) - on-pointer-down - (mf/use-callback - (mf/deps @size-state) - (fn [event] - (dom/capture-pointer event) - (mf/set-ref-val! start-size-ref @size-state) - (mf/set-ref-val! dragging-ref true) - (mf/set-ref-val! start-ref (dom/get-client-position event)) - (set! last-resize-type resize-type))) + on-pointer-down + (mf/use-callback + (mf/deps @size-state) + (fn [event] + (dom/capture-pointer event) + (mf/set-ref-val! start-size-ref @size-state) + (mf/set-ref-val! dragging-ref true) + (mf/set-ref-val! start-ref (dom/get-client-position event)) + (set! last-resize-type resize-type))) - on-lost-pointer-capture - (mf/use-callback - (fn [event] - (dom/release-pointer event) - (mf/set-ref-val! start-size-ref nil) - (mf/set-ref-val! dragging-ref false) - (mf/set-ref-val! start-ref nil) - (set! last-resize-type nil))) + on-lost-pointer-capture + (mf/use-callback + (fn [event] + (dom/release-pointer event) + (mf/set-ref-val! start-size-ref nil) + (mf/set-ref-val! dragging-ref false) + (mf/set-ref-val! start-ref nil) + (set! last-resize-type nil))) - on-pointer-move - (mf/use-callback - (mf/deps min-val max-val negate?) - (fn [event] - (when (mf/ref-val dragging-ref) - (let [start (mf/ref-val start-ref) - pos (dom/get-client-position event) - delta (-> (gpt/to-vec start pos) - (cond-> negate? gpt/negate) - (get axis)) - start-size (mf/ref-val start-size-ref) - new-size (-> (+ start-size delta) (max min-val) (min max-val))] - (reset! size-state new-size) - (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))) + on-pointer-move + (mf/use-callback + (mf/deps min-val max-val negate?) + (fn [event] + (when (mf/ref-val dragging-ref) + (let [start (mf/ref-val start-ref) + pos (dom/get-client-position event) + delta (-> (gpt/to-vec start pos) + (cond-> negate? gpt/negate) + (get axis)) + start-size (mf/ref-val start-size-ref) + new-size (-> (+ start-size delta) (max min-val) (min max-val))] + (reset! size-state new-size) + (swap! storage assoc-in [::saved-resize current-file-id key] new-size) + (when on-change-size (on-change-size new-size)))))) - set-size - (mf/use-callback - (fn [new-size] - (let [new-size (mth/clamp new-size min-val max-val)] - (reset! size-state new-size) - (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))] - {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move - :parent-ref parent-ref - :set-size set-size - :size @size-state})) + set-size + (mf/use-callback + (mf/deps on-change-size) + (fn [new-size] + (let [new-size (mth/clamp new-size min-val max-val)] + (reset! size-state new-size) + (swap! storage assoc-in [::saved-resize current-file-id key] new-size) + (when on-change-size (on-change-size new-size)))))] + + (mf/use-effect + (fn [] + (when on-change-size (on-change-size @size-state)))) + + {:on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move + :parent-ref parent-ref + :set-size set-size + :size @size-state}))) (defn use-resize-observer [callback] diff --git a/frontend/src/app/main/ui/viewer/inspect/code.cljs b/frontend/src/app/main/ui/viewer/inspect/code.cljs index ca54120fd..698d84613 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.cljs +++ b/frontend/src/app/main/ui/viewer/inspect/code.cljs @@ -261,7 +261,10 @@ :collapsabled-icon true :rotated collapsed-css?)} i/arrow-refactor]] - [:span {:class (stl/css :code-lang)} "CSS"] + + [:& select {:default-value style-type + :class (stl/css :code-lang-select) + :options [{:label "CSS" :value "css"}]}] [:div {:class (stl/css :action-btns)} [:button {:class (stl/css :expand-button) diff --git a/frontend/src/app/main/ui/viewer/inspect/code.scss b/frontend/src/app/main/ui/viewer/inspect/code.scss index 1eb6f5db3..3524f40a0 100644 --- a/frontend/src/app/main/ui/viewer/inspect/code.scss +++ b/frontend/src/app/main/ui/viewer/inspect/code.scss @@ -7,6 +7,12 @@ @import "refactor/common-refactor.scss"; .element-options { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + padding-bottom: $s-16; + .attributes-block { .download-button { @extend .button-secondary; @@ -17,46 +23,67 @@ } } .code-block { + @include codeTypography; + display: flex; + flex-direction: column; + flex: 1; + height: 100%; + min-height: 0; + overflow: hidden; padding: 0 $s-4 $s-8 0; - .code-row-lang { - display: flex; - justify-content: space-between; - gap: $s-4; - width: 100%; - .code-lang { - @include tabTitleTipography; - display: flex; - align-items: center; - } - .action-btns { - display: flex; - gap: $s-4; - flex: 1; - justify-content: end; - .expand-button { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon; - stroke: var(--icon-foreground); - } - } - } - .code-lang-select { - @include tabTitleTipography; - width: $s-92; - border: $s-1 solid transparent; - background-color: transparent; - color: var(--menu-foreground-color-disabled); - } + pre { + border-radius: $br-8; + padding: $s-16; + max-height: var(--code-height); + overflow: auto; + height: 100%; } - .code-row-display { - margin-bottom: $s-8; + // Overrides background setted in the theme + :global(.hljs) { + background: $db-tertiary; } } + .code-row-lang { + display: flex; + justify-content: space-between; + gap: $s-4; + width: 100%; + } + .code-lang { + @include tabTitleTipography; + display: flex; + align-items: center; + } + .action-btns { + display: flex; + gap: $s-4; + flex: 1; + justify-content: end; + .expand-button { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + .code-lang-select { + @include tabTitleTipography; + width: $s-72; + border: $s-1 solid transparent; + background-color: transparent; + color: var(--menu-foreground-color-disabled); + } + .code-row-display { + flex: 1; + min-height: 0; + overflow: hidden; + padding-bottom: $s-8; + } } .toggle-btn { diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs index 4f015168b..592d614a9 100644 --- a/frontend/src/app/main/ui/workspace.cljs +++ b/frontend/src/app/main/ui/workspace.cljs @@ -61,7 +61,8 @@ (mf/defc workspace-content {::mf/wrap-props false} [{:keys [file layout page-id wglobal]}] - (let [selected (mf/deref refs/selected-shapes) + (let [palete-size (mf/use-state nil) + selected (mf/deref refs/selected-shapes) {:keys [vport] :as wlocal} (mf/deref refs/workspace-local) {:keys [options-mode]} wglobal @@ -78,11 +79,17 @@ (when (and vport (not= size vport)) (st/emit! (dw/update-viewport-size resize-type size))))) + on-resize-palette + (mf/use-fn + (fn [size] + (reset! palete-size size))) + node-ref (use-resize-observer on-resize)] [:* (if new-css-system (when (not hide-ui?) - [:& palette {:layout layout}]) + [:& palette {:layout layout + :on-change-palette-size on-resize-palette}]) [:* (when (and colorpalette? (not hide-ui?)) [:& colorpalette]) @@ -107,7 +114,10 @@ :wlocal wlocal :wglobal wglobal :selected selected - :layout layout}]]] + :layout layout + :palete-size + (when (and (or colorpalette? textpalette?) (not hide-ui?)) + @palete-size)}]]] (when-not hide-ui? [:* diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss index ab26cbdbb..1665f7dc3 100644 --- a/frontend/src/app/main/ui/workspace.scss +++ b/frontend/src/app/main/ui/workspace.scss @@ -12,7 +12,7 @@ @include font-face("worksans", "WorkSans-Bold", bold); // Space mono -@include font-face("spacemono", "SpaceMono-Regular", normal); +@include font-face("robotomono", "RobotoMono-Regular", normal); :global(:root) { --s-4: 0.25rem; diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index b89a2c0e2..0e90f6ca4 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -93,7 +93,9 @@ cursor: pointer; } .separator { - height: $s-12; + margin-top: $s-8; + height: $s-4; + border-top: 1px solid $db-secondary; } .shortcut { @extend .shortcut; diff --git a/frontend/src/app/main/ui/workspace/palette.cljs b/frontend/src/app/main/ui/workspace/palette.cljs index 14d8f8d49..431443cfe 100644 --- a/frontend/src/app/main/ui/workspace/palette.cljs +++ b/frontend/src/app/main/ui/workspace/palette.cljs @@ -46,7 +46,7 @@ "paddingRight" "calc(var(--s-4) * 70)"})) (mf/defc palette - [{:keys [layout]}] + [{:keys [layout on-change-palette-size]}] (let [color-palette? (:colorpalette layout) text-palette? (:textpalette layout) workspace-read-only? (mf/use-ctx ctx/workspace-read-only?) @@ -57,10 +57,11 @@ on-select (mf/use-fn #(reset! selected %)) rulers? (mf/deref refs/rules?) {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]} - (r/use-resize-hook :palette 72 54 80 :y true :bottom) + (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size) vport (mf/deref viewport) vport-width (:width vport) + on-resize (mf/use-callback (fn [_] @@ -98,10 +99,11 @@ any-palette? (or color-palette? text-palette?) - size-classname (cond - (<= size 64) (css :small-palette) - (<= size 72) (css :mid-palette) - (<= size 80) (css :big-palette))] + size-classname + (cond + (<= size 64) (css :small-palette) + (<= size 72) (css :mid-palette) + (<= size 80) (css :big-palette))] (mf/with-effect [] (let [key1 (events/listen js/window "resize" on-resize)] diff --git a/frontend/src/app/main/ui/workspace/presence.cljs b/frontend/src/app/main/ui/workspace/presence.cljs index 393e4fa82..cf2af95cf 100644 --- a/frontend/src/app/main/ui/workspace/presence.cljs +++ b/frontend/src/app/main/ui/workspace/presence.cljs @@ -8,6 +8,7 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] + [app.common.data.macros :as dm] [app.config :as cfg] [app.main.refs :as refs] [app.main.ui.context :as ctx] @@ -49,15 +50,13 @@ (if new-css-system [:* - (when (and (< 2 num-users) open?) + (when (and (> num-users 2) open?) [:button {:id "users-close" :class (stl/css :active-users-opened) :on-click close-users-widget :on-blur close-users-widget} [:ul {:class (stl/css :active-users-list)} - (when (< 2 num-users) - [:li [:span {:class (stl/css :users-num)} num-users]]) (for [session user-ids] [:& session-widget {:session session @@ -69,7 +68,7 @@ :on-click open-users-widget} [:ul {:class (stl/css :active-users-list)} - (when (< 2 num-users) [:span {:class (stl/css :users-num)} num-users]) + (when (> num-users 2) [:span {:class (stl/css :users-num)} (dm/str "+" (- num-users 2))]) (for [[index session] (d/enumerate first-users)] [:& session-widget {:session session diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs index 78b410c61..2359cf725 100644 --- a/frontend/src/app/main/ui/workspace/right_header.cljs +++ b/frontend/src/app/main/ui/workspace/right_header.cljs @@ -203,6 +203,8 @@ [:& persistence-state-widget] + [:div {:class (stl/css :separator)}] + [:div {:class (stl/css :zoom-section)} [:& zoom-widget-workspace diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index d5f2d457f..6b54cb390 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -11,7 +11,7 @@ align-items: center; min-width: $s-256; padding: $s-8; - gap: $s-2; + gap: $s-8; background-color: var(--panel-background-color); .users-section { position: relative; @@ -19,6 +19,9 @@ max-width: $s-72; padding: $s-4 $s-6; } + .separator { + flex: 1; + } .zoom-section { .zoom-widget { @include buttonStyle; @@ -27,6 +30,7 @@ justify-content: center; height: $s-28; max-width: $s-48; + width: $s-48; border-radius: $br-8; .label { @include titleTipography; 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 022a05ab5..aed7ab119 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -88,8 +88,6 @@ } .drop-space { height: $s-12; - border-radius: $br-8; - background-color: var(--assets-item-background-color); } .dragging { position: absolute; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index e9b1c7f77..9905ba70a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -95,7 +95,7 @@ on-component-click (mf/use-fn - (mf/deps component-id) + (mf/deps component-id on-asset-click) (fn [event] (dom/stop-propagation event) (on-asset-click component-id unselect-all event))) @@ -141,7 +141,7 @@ on-context-menu (mf/use-fn - (mf/deps component-id) + (mf/deps on-context-menu component-id) (partial on-context-menu component-id))] (if ^boolean new-css-system @@ -449,6 +449,7 @@ toggle-list-style (mf/use-ctx cmm/assets-toggle-list-style) selected (:components selected) + selected-full (into #{} (filter #(contains? selected (:id %))) components) multi-components? (> (count selected) 1) multi-assets? (or (seq (:graphics selected)) @@ -519,6 +520,7 @@ (mf/use-fn (mf/deps selected on-clear-selection read-only?) (fn [component-id event] + (dom/stop-propagation event) (dom/prevent-default event) (let [pos (dom/get-client-position event)] 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 7415ecf14..50753ed7b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -9,8 +9,6 @@ .component-group { .drop-space { height: $s-12; - border-radius: $br-8; - background-color: var(--color-foreground-secondary); } .asset-grid { display: grid; @@ -22,7 +20,7 @@ @include flexCenter; position: relative; padding: $s-8; - border: $s-2 solid transparent; + border: $s-4 solid transparent; border-radius: $br-8; background-color: var(--color-foreground-secondary); overflow: hidden; @@ -100,7 +98,7 @@ } &.selected { - border: $s-1 solid var(--assets-item-border-color); + border: $s-4 solid var(--assets-item-border-color); } } .grid-placeholder { 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 9a0cc186f..48b103eb4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -9,8 +9,6 @@ .graphics-group { .drop-space { height: $s-12; - border-radius: $br-8; - background-color: var(--color-foreground-secondary); } .asset-grid { display: grid; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss index 5c5e199ed..01a0bb172 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss @@ -22,8 +22,6 @@ padding: 0 0 0 $s-4; .drop-space { height: $s-12; - border-radius: $br-8; - background-color: var(--assets-item-background-color); } .grid-placeholder { height: $s-2; 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 f8a77d6b2..2f326dddf 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 @@ -180,108 +180,109 @@ :on-click on-remove} i/remove-refactor]]] - [:& advanced-options {:class (stl/css :grid-advanced-options) - :visible? open? - :on-close toggle-advanced-options} - ;; square - (when (= :square type) - [:div {:class (stl/css :square-row)} - [:div {:class (stl/css :advanced-row)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}] - [:button {:class (stl/css-case :show-more-options true - :selected show-more-options?) - :on-click toggle-more-options} - i/menu-refactor]] - (when show-more-options? - [:div {:class (stl/css :second-row)} - [:button {:class (stl/css-case :btn-options true - :disabled is-default) - :disabled is-default - :on-click handle-use-default} - [:span (tr "workspace.options.grid.params.use-default")]] - [:button {:class (stl/css-case :btn-options true - :disabled is-default) - :disabled is-default - :on-click handle-set-as-default} - [:span (tr "workspace.options.grid.params.set-default")]]])]) + (when (:display grid) + [:& advanced-options {:class (stl/css :grid-advanced-options) + :visible? open? + :on-close toggle-advanced-options} + ;; square + (when (= :square type) + [:div {:class (stl/css :square-row)} + [:div {:class (stl/css :advanced-row)} + [:& color-row {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}] + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) + :on-click toggle-more-options} + i/menu-refactor]] + (when show-more-options? + [:div {:class (stl/css :second-row)} + [:button {:class (stl/css-case :btn-options true + :disabled is-default) + :disabled is-default + :on-click handle-use-default} + [:span (tr "workspace.options.grid.params.use-default")]] + [:button {:class (stl/css-case :btn-options true + :disabled is-default) + :disabled is-default + :on-click handle-set-as-default} + [:span (tr "workspace.options.grid.params.set-default")]]])]) - (when (or (= :column type) (= :row type)) - [:div {:class (stl/css :column-row)} - [:div {:class (stl/css :advanced-row)} - [:div {:class (stl/css :orientation-select-wrapper)} - [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element - :default-value (:type params) - :class (stl/css :orientation-select) - :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")} - {:value :left :label (if (= type :row) - (tr "workspace.options.grid.params.type.top") - (tr "workspace.options.grid.params.type.left"))} - {:value :center :label (tr "workspace.options.grid.params.type.center")} - {:value :right :label (if (= type :row) - (tr "workspace.options.grid.params.type.bottom") - (tr "workspace.options.grid.params.type.right"))}] - :on-change (handle-change :params :type)}]] + (when (or (= :column type) (= :row type)) + [:div {:class (stl/css :column-row)} + [:div {:class (stl/css :advanced-row)} + [:div {:class (stl/css :orientation-select-wrapper)} + [:& select {:data-mousetrap-dont-stop true ;; makes mousetrap to not stop at this element + :default-value (:type params) + :class (stl/css :orientation-select) + :options [{:value :stretch :label (tr "workspace.options.grid.params.type.stretch")} + {:value :left :label (if (= type :row) + (tr "workspace.options.grid.params.type.top") + (tr "workspace.options.grid.params.type.left"))} + {:value :center :label (tr "workspace.options.grid.params.type.center")} + {:value :right :label (if (= type :row) + (tr "workspace.options.grid.params.type.bottom") + (tr "workspace.options.grid.params.type.right"))}] + :on-change (handle-change :params :type)}]] - [:div {:class (stl/css :color-wrapper)} - [:& color-row {:color (:color params) - :title (tr "workspace.options.grid.params.color") - :disable-gradient true - :disable-image true - :on-change handle-change-color - :on-detach handle-detach-color}]]] + [:div {:class (stl/css :color-wrapper)} + [:& color-row {:color (:color params) + :title (tr "workspace.options.grid.params.color") + :disable-gradient true + :disable-image true + :on-change handle-change-color + :on-detach handle-detach-color}]]] - [:div {:class (stl/css :advanced-row)} - [:div {:class (stl/css :height) - :title (if (= :row type) - (tr "workspace.options.grid.params.height") - (tr "workspace.options.grid.params.width"))} - [:span {:class (stl/css :icon-text)} - (if (= :row type) - "H" - "W")] - [:> numeric-input* {:placeholder "Auto" - :on-change handle-change-item-length - :nillable true - :className (stl/css :numeric-input) - :value (or (:item-length params) "")}]] + [:div {:class (stl/css :advanced-row)} + [:div {:class (stl/css :height) + :title (if (= :row type) + (tr "workspace.options.grid.params.height") + (tr "workspace.options.grid.params.width"))} + [:span {:class (stl/css :icon-text)} + (if (= :row type) + "H" + "W")] + [:> numeric-input* {:placeholder "Auto" + :on-change handle-change-item-length + :nillable true + :className (stl/css :numeric-input) + :value (or (:item-length params) "")}]] - [:div {:class (stl/css :gutter) - :title (tr "workspace.options.grid.params.gutter")} - [:span {:class (stl/css-case :icon true - :rotated (= type :row))} i/gap-horizontal-refactor] - [:> numeric-input* {:placeholder "0" - :on-change (handle-change :params :gutter) - :nillable true - :className (stl/css :numeric-input) - :value (or (:gutter params) 0)}]] + [:div {:class (stl/css :gutter) + :title (tr "workspace.options.grid.params.gutter")} + [:span {:class (stl/css-case :icon true + :rotated (= type :row))} i/gap-horizontal-refactor] + [:> numeric-input* {:placeholder "0" + :on-change (handle-change :params :gutter) + :nillable true + :className (stl/css :numeric-input) + :value (or (:gutter params) 0)}]] - [:div {:class (stl/css :margin) - :title (tr "workspace.options.grid.params.margin")} - [:span {:class (stl/css-case :icon true - :rotated (= type :column))} i/grid-margin-refactor] - [:> numeric-input* {:placeholder "0" - :on-change (handle-change :params :margin) - :nillable true - :className (stl/css :numeric-input) - :value (or (:margin params) 0)}]] + [:div {:class (stl/css :margin) + :title (tr "workspace.options.grid.params.margin")} + [:span {:class (stl/css-case :icon true + :rotated (= type :column))} i/grid-margin-refactor] + [:> numeric-input* {:placeholder "0" + :on-change (handle-change :params :margin) + :nillable true + :className (stl/css :numeric-input) + :value (or (:margin params) 0)}]] - [:button {:class (stl/css-case :show-more-options true - :selected show-more-options?) - :on-click toggle-more-options} - i/menu-refactor] - (when show-more-options? - [:div {:class (stl/css :more-options)} - [:button {:disabled is-default - :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) - :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])]] + [:button {:class (stl/css-case :show-more-options true + :selected show-more-options?) + :on-click toggle-more-options} + i/menu-refactor] + (when show-more-options? + [:div {:class (stl/css :more-options)} + [:button {:disabled is-default + :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) + :on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])] [:div.grid-option [:div.grid-option-main {:style {:display (when open? "none")}} 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 78b905d5e..4e7d12708 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 @@ -25,6 +25,7 @@ } .help-content { + padding: $s-20; .help-group { margin-bottom: $s-40; .interactions-help-icon { 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 07d5f2c2f..8138f0a3e 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 @@ -1389,10 +1389,6 @@ :class (stl/css-case :title-spacing-layout (not has-layout?))} (if (and (not multiple) (:layout values)) [:div {:class (stl/css :title-actions)} - [:button {:class (stl/css :remove-layout) - :on-click on-remove-layout} - i/remove-refactor] - (when ^boolean grid-enabled? [:* [:button {:class (stl/css :add-layout) @@ -1402,7 +1398,11 @@ [:& dropdown {:show show-layout-dropdown? :on-close handle-close-layout-options} [:div {:class (stl/css :layout-options)} [:button {:class (stl/css :layout-option) :on-click set-flex} "Flex layout"] - [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]])] + [:button {:class (stl/css :layout-option) :on-click set-grid} "Grid layout"]]]]) + + [:button {:class (stl/css :remove-layout) + :on-click on-remove-layout} + i/remove-refactor]] [:div {:class (stl/css :title-actions)} (if ^boolean grid-enabled? diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 40337bdc5..4b5e52846 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -50,11 +50,21 @@ [:& layer-menu {:ids ids :type type :values layer-values}] + [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options @@ -71,10 +81,6 @@ :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index bf2128d87..d37d6a4de 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -52,11 +52,21 @@ [:& layer-menu {:ids ids :type type :values layer-values}] + [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options @@ -72,9 +82,6 @@ :is-flex-parent? is-flex-parent? :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) [:& fill-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 6a3110123..e792751a2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -62,11 +62,18 @@ :values measure-values :type type :shape shape}] + [:& component-menu {:shapes [shape]}] - (when (or (not is-layout-child?) is-layout-child-absolute?) + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index 2a65a3e69..2b661b109 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -74,7 +74,15 @@ [:& layer-menu {:type type :ids layer-ids :values layer-values}] [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& component-menu {:shapes [shape]}] ;;remove this in components-v2 - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids constraint-ids :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options @@ -91,9 +99,6 @@ :is-grid-parent? is-grid-parent? :values layout-item-values}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - (when-not (empty? fill-ids) [:& fill-menu {:type type :ids fill-ids :values fill-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 0e08630bc..6ae27dc02 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -52,11 +52,21 @@ [:& layer-menu {:ids ids :type type :values layer-values}] + [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options @@ -73,12 +83,6 @@ :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - - - [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index 174e6f6c6..8309844a7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -359,8 +359,14 @@ (when-not (empty? components) [:& component-menu {:shapes components}]) - [:& layout-container-menu {:type type :ids layout-container-ids :values layout-container-values :multiple true}] + (when-not (or (empty? constraint-ids) ^boolean is-layout-child?) + [:& constraints-menu {:ids constraint-ids :values constraint-values}]) + [:& layout-container-menu + {:type type + :ids layout-container-ids + :values layout-container-values + :multiple true}] (when (or is-layout-child? has-flex-layout-container?) [:& layout-item-menu @@ -372,9 +378,6 @@ :is-grid-parent? is-grid-parent? :values layout-item-values}]) - (when-not (or (empty? constraint-ids) is-layout-child?) - [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - (when-not (empty? text-ids) [:& ot/text-menu {:type type :ids text-ids :values text-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 776e7f327..b803916be 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -56,7 +56,16 @@ :type type :values measure-values :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options @@ -72,9 +81,6 @@ :is-flex-parent? is-flex-parent? :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) [:& fill-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 33fbc2862..aed851d0f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -59,6 +59,11 @@ :type type :values measure-values :shape shape}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + [:& layout-container-menu {:type type :ids ids @@ -80,13 +85,6 @@ :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not ^boolean is-layout-child?) - ^boolean is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - - - [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index 66ff3f574..87a2620e2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -128,12 +128,21 @@ :type type :values measure-values :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu {:ids ids + :values constraint-values}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) - [:& grid-cell/options - {:shape (first parents) - :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + [:& grid-cell/options + {:shape (first parents) + :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) (when is-layout-child? [:& layout-item-menu @@ -145,10 +154,6 @@ :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu {:ids ids - :values constraint-values}]) - [:& fill-menu {:ids ids :type type :values fill-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index 4fa04b35f..990c8bfe7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -91,12 +91,23 @@ :type type :values (select-keys shape measure-attrs) :shape shape}] - [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] + + (when (or (not ^boolean is-layout-child?) ^boolean is-layout-child-absolute?) + [:& constraints-menu + {:ids ids + :values (select-keys shape constraint-attrs)}]) + + [:& layout-container-menu + {:type type + :ids [(:id shape)] + :values layout-container-values + :multiple false}] (when (and (= (count ids) 1) is-layout-child? is-grid-parent?) [:& grid-cell/options {:shape (first parents) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) + (when is-layout-child? [:& layout-item-menu {:ids ids @@ -107,13 +118,6 @@ :is-grid-parent? is-grid-parent? :shape shape}]) - (when (or (not is-layout-child?) is-layout-child-absolute?) - [:& constraints-menu - {:ids ids - :values (select-keys shape constraint-attrs)}]) - - - [:& text-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs index 5d679fe36..12608e85e 100644 --- a/frontend/src/app/main/ui/workspace/viewport.cljs +++ b/frontend/src/app/main/ui/workspace/viewport.cljs @@ -69,7 +69,7 @@ selected)) (mf/defc viewport - [{:keys [selected wglobal wlocal layout file] :as props}] + [{:keys [selected wglobal wlocal layout file palete-size] :as props}] (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check ;; that the new parameter is sent {:keys [edit-path @@ -535,7 +535,8 @@ [:& scroll-bars/viewport-scrollbars {:objects base-objects :zoom zoom - :vbox vbox}] + :vbox vbox + :bottom-padding (when palete-size (+ palete-size 8))}] (when-not hide-ui? [:& rules/rules diff --git a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs index 6ba171943..1dd7a6f79 100644 --- a/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/scroll_bars.cljs @@ -28,7 +28,7 @@ (mf/defc viewport-scrollbars {::mf/wrap [mf/memo]} - [{:keys [objects zoom vbox]}] + [{:keys [objects zoom vbox bottom-padding]}] (let [v-scrolling? (mf/use-state false) h-scrolling? (mf/use-state false) @@ -56,6 +56,11 @@ (cfh/get-immediate-children) (gsh/shapes->rect))) + ;; Padding for bottom palette + vbox (cond-> vbox + (some? bottom-padding) + (update :height - (/ bottom-padding zoom))) + inv-zoom (/ 1 zoom) vbox-height (- (:height vbox) (* inv-zoom scroll-height)) vbox-width (- (:width vbox) (* inv-zoom scroll-width)) @@ -65,6 +70,7 @@ (max 0) (* vbox-height) (/ (:height base-objects-rect))) + ;; left space hidden because of the scroll left-offset (-> (- vbox-x (:x base-objects-rect)) (max 0) diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs index cba3e74a2..c3efb3278 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs @@ -35,9 +35,7 @@ [:& i18n/tr-html {:tag-name "span" :label "workspace.top-bar.read-only"}]] [:button {:class (stl/css :done-btn) - :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")] - [:button {:class (stl/css :close-btn) - :on-click handle-close-view-mode} i/close-refactor]]] + :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]] ;; OLD [:div.viewport-actions diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss index 67114b50e..4b615961a 100644 --- a/frontend/src/app/main/ui/workspace/viewport/top_bar.scss +++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.scss @@ -22,7 +22,7 @@ margin-left: -50%; padding: $s-8; pointer-events: initial; - width: $s-512; + width: $s-400; } .viewport-actions-title { diff --git a/frontend/src/app/worker/thumbnails.cljs b/frontend/src/app/worker/thumbnails.cljs index 3e3cbbfef..93f968852 100644 --- a/frontend/src/app/worker/thumbnails.cljs +++ b/frontend/src/app/worker/thumbnails.cljs @@ -7,6 +7,7 @@ (ns app.worker.thumbnails (:require ["react-dom/server" :as rds] + [app.common.data.macros :as dm] [app.common.logging :as log] [app.common.uri :as u] [app.config :as cf] @@ -62,16 +63,27 @@ (binding [fonts/loaded-hints (l/atom #{})] (let [objects (:objects page) frame (some->> page :thumbnail-frame-id (get objects)) + background-color (dm/get-in page [:options :background]) element (if frame - (mf/element render/frame-svg #js {:objects objects :frame frame :use-thumbnails true}) - (mf/element render/page-svg #js {:data page :use-thumbnails true :embed true})) + (mf/element render/frame-svg #js + {:objects objects + :frame frame + :use-thumbnails true + :background-color background-color + :aspect-ratio (/ 2 3)}) + + (mf/element render/page-svg #js + {:data page + :use-thumbnails true + :embed true + :aspect-ratio (/ 2 3)})) data (rds/renderToStaticMarkup element)] {:data data :fonts @fonts/loaded-hints :file-id file-id :revn revn})) (catch :default cause - (js/console.error "unexpected erorr on rendering thumbnail" cause) + (js/console.error "unexpected error on rendering thumbnail" cause) nil))) (defmethod impl/handler :thumbnails/generate-for-file