From 50053b0fc433d2daa79b0c7254fbd5cf38ebef88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 19 Jan 2024 16:55:04 +0100 Subject: [PATCH 1/2] :tada: Implement full-size font selector --- frontend/src/app/main/ui/context.cljs | 1 + .../src/app/main/ui/workspace/sidebar.cljs | 73 ++++----- .../sidebar/options/menus/typography.cljs | 24 +-- .../sidebar/options/menus/typography.scss | 138 +++++++++++------- 4 files changed, 137 insertions(+), 99 deletions(-) diff --git a/frontend/src/app/main/ui/context.cljs b/frontend/src/app/main/ui/context.cljs index 0694361ba..bfe0fa6ee 100644 --- a/frontend/src/app/main/ui/context.cljs +++ b/frontend/src/app/main/ui/context.cljs @@ -29,3 +29,4 @@ (def workspace-read-only? (mf/create-context nil)) (def is-component? (mf/create-context false)) +(def sidebar (mf/create-context nil)) diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index db497e7bd..0cf25ceee 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -12,6 +12,7 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.tab-container :refer [tab-container tab-element]] + [app.main.ui.context :as muc] [app.main.ui.hooks.resize :refer [use-resize-hook]] [app.main.ui.workspace.comments :refer [comments-sidebar]] [app.main.ui.workspace.left-header :refer [left-header]] @@ -58,23 +59,23 @@ on-tab-change (mf/use-fn #(st/emit! (dw/go-to-layout %)))] - [:aside {:ref parent-ref - :id "left-sidebar-aside" - :data-size (str size) - :class (stl/css-case :left-settings-bar true - :global/two-row (<= size 300) - :global/three-row (and (> size 300) (<= size 400)) - :global/four-row (> size 400)) - :style #js {"--width" (dm/str size "px")}} + [:& (mf/provider muc/sidebar) {:value :left} + [:aside {:ref parent-ref + :id "left-sidebar-aside" + :data-size (str size) + :class (stl/css-case :left-settings-bar true + :global/two-row (<= size 300) + :global/three-row (and (> size 300) (<= size 400)) + :global/four-row (> size 400)) + :style #js {"--width" (dm/str size "px")}} - [:& left-header {:file file :layout layout :project project :page-id page-id - :class (stl/css :left-header)}] + [:& left-header {:file file :layout layout :project project :page-id page-id + :class (stl/css :left-header)}] - [:div {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move - :class (stl/css :resize-area)}] - [:* + [:div {:on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move + :class (stl/css :resize-area)}] (cond (true? shortcuts?) [:& shortcuts-container {:class (stl/css :settings-bar-content)}] @@ -110,7 +111,6 @@ [:& layers-toolbox {:size-parent size :size size-pages}]]] - (when-not ^boolean mode-inspect? [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")} @@ -159,27 +159,28 @@ (obj/set! "on-change-section" handle-change-section) (obj/set! "on-expand" handle-expand))] - [:aside {:class (stl/css-case :right-settings-bar true - :not-expand (not can-be-expanded?) - :expanded (> size 276)) + [:& (mf/provider muc/sidebar) {:value :right} + [:aside {:class (stl/css-case :right-settings-bar true + :not-expand (not can-be-expanded?) + :expanded (> size 276)) - :id "right-sidebar-aside" - :data-size (str size) - :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}} - (when can-be-expanded? - [:div {:class (stl/css :resize-area) - :on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}]) - [:& right-header {:file file :layout layout :page-id page-id}] + :id "right-sidebar-aside" + :data-size (str size) + :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}} + (when can-be-expanded? + [:div {:class (stl/css :resize-area) + :on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move}]) + [:& right-header {:file file :layout layout :page-id page-id}] - [:div {:class (stl/css :settings-bar-inside)} - (cond - (true? is-comments?) - [:& comments-sidebar] + [:div {:class (stl/css :settings-bar-inside)} + (cond + (true? is-comments?) + [:& comments-sidebar] - (true? is-history?) - [:& history-toolbox] + (true? is-history?) + [:& history-toolbox] - :else - [:> options-toolbox props])]])) + :else + [:> options-toolbox props])]]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index c54d3a13d..1f9d39d1b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -93,7 +93,7 @@ (into [] xform fonts))) (mf/defc font-selector - [{:keys [on-select on-close current-font show-recent] :as props}] + [{:keys [on-select on-close current-font show-recent full-size] :as props}] (let [selected (mf/use-state current-font) state (mf/use-state {:term "" :backends #{}}) @@ -103,6 +103,8 @@ fonts (mf/use-memo (mf/deps @state) #(filter-fonts @state @fonts/fonts)) recent-fonts (mf/deref refs/workspace-recent-fonts) + full-size? (boolean (and full-size recent-fonts show-recent)) + select-next (mf/use-fn (mf/deps fonts) @@ -170,13 +172,13 @@ (.scrollToPosition ^js inst offset))))) [:div {:class (stl/css :font-selector)} - [:div {:class (stl/css :font-selector-dropdown)} + [:div {:class (stl/css-case :font-selector-dropdown true :font-selector-dropdown-full-size full-size?)} [:div {:class (stl/css :header)} [:& search-bar {:on-change on-filter-change :value (:term @state) :placeholder (tr "workspace.options.search-font")}] (when (and recent-fonts show-recent) - [* + [:section {:class (stl/css :show-recent)} [:p {:class (stl/css :title)} (tr "workspace.options.recent-fonts")] (for [[idx font] (d/enumerate recent-fonts)] [:& font-item {:key (dm/str "font-" idx) @@ -185,7 +187,8 @@ :on-click on-select-and-close :current? (= (:id font) (:id @selected))}])])] - [:div {:class (stl/css :fonts-list)} + [:div {:class (stl/css-case :fonts-list true + :fonts-list-full-size full-size?)} [:> rvt/AutoSizer {} (fn [props] (let [width (unchecked-get props "width") @@ -214,7 +217,7 @@ (mf/defc font-options {::mf/wrap-props false} - [{:keys [values on-change on-blur show-recent]}] + [{:keys [values on-change on-blur show-recent full-size-selector]}] (let [{:keys [font-id font-size font-variant-id]} values font-id (or font-id (:font-id txt/default-text-attrs)) @@ -285,6 +288,7 @@ {:current-font font :on-close on-font-selector-close :on-select on-font-select + :full-size full-size-selector :show-recent show-recent}]) [:div {:class (stl/css :font-option) @@ -416,14 +420,16 @@ (mf/defc text-options {::mf/wrap-props false} [{:keys [ids editor values on-change on-blur show-recent]}] - (let [opts #js {:editor editor + (let [full-size-selector? (and show-recent (= (mf/use-ctx ctx/sidebar) :right)) + opts #js {:editor editor :ids ids :values values :on-change on-change :on-blur on-blur - :show-recent show-recent}] - - [:div {:class (stl/css :text-options)} + :show-recent show-recent + :full-size-selector full-size-selector?}] + [:div {:class (stl/css-case :text-options true + :text-options-full-size full-size-selector?)} [:> font-options opts] [:div {:class (stl/css :typography-variations)} [:> spacing-options opts] 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 1040e5675..85a8222c4 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 @@ -247,8 +247,10 @@ .text-options { @include flexColumn; - position: relative; margin-bottom: $s-8; + &:not(.text-options-full-size) { + position: relative; + } .font-option { @include titleTipography; @extend .asset-element; @@ -342,71 +344,99 @@ position: absolute; top: 0; left: 0; + right: 0; height: 100%; width: 100%; z-index: $z-index-3; +} - .font-selector-dropdown { +.show-recent { + border-radius: $br-8 $br-8 0 0; + background: var(--dropdown-background-color); + border: $s-1 solid var(--color-background-quaternary); + border-block-end: none; +} + +.font-selector-dropdown { + width: 100%; + &:not(.font-selector-dropdown-full-size) { display: flex; flex-direction: column; flex-grow: 1; height: 100%; - .header { - display: flex; - flex-direction: column; - position: relative; - margin-bottom: $s-2; - background-color: var(--dropdown-background-color); - .title { - @include tabTitleTipography; - margin: 9px 17px; - color: var(--title-foreground-color); - } + } + .header { + display: grid; + row-gap: $s-2; + .title { + @include tabTitleTipography; + color: var(--title-foreground-color); + margin: 0; + padding: $s-12; } - .fonts-list { - @include menuShadow; - position: relative; - display: flex; - flex-direction: column; - flex: 1 1 auto; - min-height: 100%; - width: 100%; - height: 100%; - padding: $s-2; - border-radius: $br-8; - background-color: var(--dropdown-background-color); - } - .font-wrapper { - padding-bottom: $s-4; - cursor: pointer; - .font-item { - @extend .asset-element; - margin-bottom: $s-4; - border-radius: $br-8; - display: flex; - .icon { - @include flexCenter; - height: $s-28; - width: $s-28; - svg { - @extend .button-icon-small; - stroke: var(--icon-foreground); - } - } - &.selected { - color: var(--assets-item-name-foreground-color-hover); - .icon { - svg { - stroke: var(--assets-item-name-foreground-color-hover); - } - } - } + } - .label { - @include titleTipography; - flex-grow: 1; + .font-wrapper { + padding-bottom: $s-4; + cursor: pointer; + .font-item { + @extend .asset-element; + margin-bottom: $s-4; + border-radius: $br-8; + display: flex; + .icon { + @include flexCenter; + height: $s-28; + width: $s-28; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); } } + &.selected { + color: var(--assets-item-name-foreground-color-hover); + .icon { + svg { + stroke: var(--assets-item-name-foreground-color-hover); + } + } + } + + .label { + @include titleTipography; + flex-grow: 1; + } } } } + +.font-selector-dropdown-full-size { + height: calc(100vh - 48px); // TODO: ugly hack :( Find a workaround for this. + display: grid; + grid-template-rows: auto 1fr; + padding: $s-2 $s-12 $s-12 $s-12; +} + +.fonts-list { + @include menuShadow; + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 auto; + min-height: 100%; + width: 100%; + height: 100%; + padding: $s-2; + border-radius: $br-8; + background-color: var(--dropdown-background-color); + overflow: hidden; + &:not(.fonts-list-full-size) { + margin-block-start: $s-2; + } +} + +.fonts-list-full-size { + border-start-start-radius: 0; + border-start-end-radius: 0; + border: $s-1 solid var(--color-background-quaternary); +} From 20ce4929091b96da418969d7fe2f65d222267485 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 23 Jan 2024 16:47:09 +0100 Subject: [PATCH 2/2] :bug: Fix assets bar not being tall enough (and thus typography dropdown clipped) in some occassions --- .../src/app/main/ui/workspace/sidebar/assets/file_library.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index a131dd26b..313f225b2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -14,6 +14,7 @@ &:last-child { margin-block-end: $s-24; } + height: 100%; } .file-name {