mirror of
https://github.com/penpot/penpot.git
synced 2025-01-25 07:58:49 -05:00
Merge pull request #4040 from penpot/ladybenko-6685-font-selector
🎉 Implement full-size font selector
This commit is contained in:
Eva Marco
GitHub
commit
508af62dc0
5 changed files with 138 additions and 99 deletions
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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])]]]))
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
&:last-child {
|
||||
margin-block-end: $s-24;
|
||||
}
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.file-name {
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue