0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-13 16:21:57 -05:00

🐛 Fix several fronted errors related with new UI (#3691)

* 🐛 Fix title toggle arrow without content
* 🐛 Fix export dropdowns
* 🐛 Fix colorpicker eyedrop
* 🐛 Fix hover state on color row
* 🐛 Fix color bullet on color row
* 🐛 Fix some css errors in new UI
* 🐛 Fix text and typography component
* 🐛 Fix some icons
* 💄 Update ui in feedback page, webhooks page and access token page
This commit is contained in:
Eva Marco 2023-10-16 15:07:36 +02:00 committed by GitHub
parent 25c60f3e0f
commit c9ba4aea46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
75 changed files with 896 additions and 454 deletions

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
</svg>

Before

Width:  |  Height:  |  Size: 161 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="m11.333 12h-9.333m12-8h-12m6.667 4h-6.667"/>
<path d="M13.334 12H6m9.334-8H6m4.667 4H6m-4 6V2m0 12h1.334M2 14H.667M2 2h1.334M2 2H.667"/>
</svg>

Before

Width:  |  Height:  |  Size: 172 B

After

Width:  |  Height:  |  Size: 209 B

View file

@ -1,3 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="m5.333 8 .863-1.918 1.537-3.415 1.537 3.415m-3.074 0h3.074l.863 1.918m-7.466 6-1.334-1.333s1.334-1.334 1.334-1.334m10.666 2.667 1.334-1.333-1.334-1.334m1.334 1.334h-13.334"/>
<path d="M5.334 8l.863-1.918m0 0l1.537-3.415L9.27 6.082m-3.074 0H9.27m0 0L10.133 8m3.533 4.666h-12m12 0v-1.333m0 1.333V14m-12-1.334v-1.333m0 1.333V14"/>
</svg>

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 271 B

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
</svg>

Before

Width:  |  Height:  |  Size: 161 B

View file

@ -1,3 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
</svg>

Before

Width:  |  Height:  |  Size: 161 B

View file

@ -168,14 +168,13 @@
@include flexCenter;
border-radius: $br-8;
color: var(--button-radio-foreground-color-rest);
background-color: var(--button-radio-background-color-rest);
border: $s-1 solid var(--button-radio-background-color-rest);
svg,
span svg {
stroke: var(--button-radio-foreground-color-rest);
}
&:hover {
background-color: transparent;
background-color: var(--button-radio-background-color-rest);
color: var(--button-radio-foreground-color-hover);
border: $s-1 solid transparent;
svg,
@ -288,8 +287,10 @@
@include textEllipsis;
height: $s-28;
width: 100%;
flex-grow: 1;
margin: $s-2 0;
padding: 0 0 0 $s-4;
padding: 0 0 0 $s-6;
border-radius: $br-8;
color: var(--input-foreground-color-active);
&:focus-within,
&:active {
@ -302,18 +303,17 @@
@include flexCenter;
min-width: $s-12;
height: $s-32;
margin-right: $s-4;
svg {
@extend .button-icon;
@extend .button-icon-small;
}
}
.input-label {
@include tabTitleTipography;
@include flexCenter;
min-width: $s-12;
width: $s-20;
padding-left: $s-8;
height: $s-32;
margin-right: $s-4;
color: var(--input-foreground-color);
}
@ -322,15 +322,15 @@
display: flex;
align-items: center;
height: $s-32;
padding: 0 $s-4;
border-radius: $br-8;
background-color: var(--input-background-color);
border: $s-1 solid var(--input-background-color);
color: var(--input-foreground-color);
span {
span,
label {
@extend .input-label;
svg {
@extend .button-icon;
@extend .button-icon-small;
stroke: var(--input-foreground-color);
}
}

View file

@ -176,6 +176,7 @@
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
--color-bullet-border-color: var(--color-background-quaternary);
--color-bullet-border-color-selected: var(--color-accent-primary);
--palette-handler-background-color: var(--color-background-quaternary);
--assets-title-background-color: var(--color-background-primary);

View file

@ -9,6 +9,7 @@
$s-0: 0px;
$s-1: 1px;
$s-2: math.div(0.25rem, 2);
$s-3: calc($s-1 + $s-2);
$s-4: var(--s-4);
$s-6: calc($s-2 + $s-4);
$s-8: calc(var(--s-4) * 2);

View file

@ -353,7 +353,10 @@
color: $df-secondary;
}
.form-container {
width: 800px;
margin: 80px auto auto 120px;
form {
width: 468px;
.fields-row {
.custom-input,
.custom-select {
@ -364,6 +367,7 @@
color: $df-primary;
font-size: 11px;
margin-bottom: 12px;
margin-left: -4px;
}
input,
select {
@ -411,8 +415,43 @@
border: 1px solid $da-primary;
}
}
textarea {
border-radius: 8px;
padding: 12px 14px;
background-color: $db-tertiary;
color: $df-primary;
border: none;
&:focus {
outline: 1px solid $da-primary;
}
}
}
}
.field-title {
color: $df-primary;
}
.field-title:not(:first-child) {
margin-top: 64px;
}
.field-text {
color: $df-secondary;
}
button,
.btn-secondary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
hr {
display: none;
}
}
.links {
margin-top: 12px;
@ -420,6 +459,156 @@
}
}
//Access tokens
.dashboard-access-tokens {
width: 800px;
margin-left: 120px;
margin-top: 80px;
.access-tokens-hero-container {
background-color: transparent;
.access-tokens-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
button {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.access-tokens-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Team webhooks
&.dashboard-team-webhooks {
width: 800px;
margin-left: 120px;
margin-top: 80px;
border: none;
align-items: flex-start;
.webhooks-hero-container {
width: 468px;
background-color: transparent;
.webhooks-hero {
width: 468px;
flex-direction: column;
gap: 32px;
background-color: transparent;
margin: 0;
padding: 0;
.desc {
background-color: transparent;
width: 100%;
h2 {
color: $df-primary;
font-size: 24px;
font-weight: regular;
margin-bottom: 32px;
}
p {
color: $df-secondary;
margin-bottom: 0;
font-size: 14px;
}
}
.btn-primary {
width: 100%;
font-size: 11px;
text-transform: uppercase;
background-color: $db-tertiary;
color: $df-primary;
&:hover {
color: $da-primary;
background-color: $db-cuaternary;
}
}
}
}
.dashboard-table {
width: 800px;
.table-rows {
padding-top: 0;
.table-row {
font-size: 14px;
min-height: 40px;
height: fit-content;
.name {
color: $df-primary;
max-width: 480px;
}
.expiration-date {
color: $df-secondary;
}
}
}
}
.webhooks-empty {
width: 468px;
border: 1px solid $db-cuaternary;
border-radius: 8px;
margin-top: 32px;
font-size: 14px;
background-color: transparent;
color: $df-secondary;
}
}
// Members section
.dashboard-table {
.table-header {

View file

@ -273,7 +273,7 @@
.slider-selector.hue {
grid-area: "hue";
align-self: end;
align-self: flex-end;
}
.slider-selector.opacity {

View file

@ -1924,7 +1924,7 @@
&.single-button {
display: flex;
justify-content: end;
justify-content: flex-end;
height: 1.5rem;
.btn-wrapper {

View file

@ -10,7 +10,8 @@
:output-dir "resources/public/js/"
:asset-path "/js"
:devtools {:browser-inject :main
:watch-dir "resources/public"}
:watch-dir "resources/public"
:reload-strategy :full}
:build-options {:manifest-name "manifest.json"}
:modules

View file

@ -169,7 +169,6 @@
(ptk/reify ::hide-toolbar
ptk/UpdateEvent
(update [_ state]
(let [_ (prn "hide toolbar")])
(assoc-in state [:workspace-local :hide-toolbar] true))))
(defn show-toolbar
@ -177,5 +176,4 @@
(ptk/reify ::show-toolbar
ptk/UpdateEvent
(update [_ state]
(let [_ (prn "show toolbar")])
(assoc-in state [:workspace-local :hide-toolbar] false))))

View file

@ -22,6 +22,8 @@
&.mini {
width: var(--bullet-size, $s-16);
height: var(--bullet-size, $s-16);
min-width: var(--bullet-size, $s-16);
min-height: var(--bullet-size, $s-16);
margin-top: 0;
border: 1px solid var(--color-bullet-border-color);
}
@ -29,7 +31,6 @@
&.is-not-library-color {
overflow: hidden;
border-radius: $br-8;
& .color-bullet-wrapper {
clip-path: none;
}
@ -60,6 +61,9 @@
height: 100%;
background-color: var(--color-bullet-background-color);
}
&:hover {
border: $s-2 solid var(--color-bullet-border-color-selected);
}
}
.color-text {

View file

@ -45,7 +45,7 @@
dirty-ref (mf/use-ref false)
parse-value
(mf/use-callback
(mf/use-fn
(mf/deps ref)
(fn []
(let [input-node (mf/ref-val ref)]
@ -58,14 +58,14 @@
nil)))))
update-input
(mf/use-callback
(mf/use-fn
(mf/deps ref)
(fn [new-value]
(let [input-node (mf/ref-val ref)]
(dom/set-value! input-node (uc/remove-hash new-value)))))
apply-value
(mf/use-callback
(mf/use-fn
(mf/deps on-change update-input)
(fn [new-value]
(mf/set-ref-val! dirty-ref false)
@ -75,7 +75,7 @@
(update-input new-value))))
handle-key-down
(mf/use-callback
(mf/use-fn
(mf/deps apply-value update-input)
(fn [event]
(mf/set-ref-val! dirty-ref true)
@ -93,7 +93,7 @@
(dom/blur! input-node)))))
handle-blur
(mf/use-callback
(mf/use-fn
(mf/deps parse-value apply-value update-input)
(fn [_]
(let [new-value (parse-value)]
@ -104,7 +104,7 @@
(update-input value)))))
on-click
(mf/use-callback
(mf/use-fn
(fn [event]
(let [target (dom/get-target event)]
(when (some? ref)
@ -113,12 +113,12 @@
(dom/blur! current)))))))
on-mouse-up
(mf/use-callback
(mf/use-fn
(fn [event]
(dom/prevent-default event)))
handle-focus
(mf/use-callback
(mf/use-fn
(fn [event]
(let [target (dom/get-target event)]
(when on-focus

View file

@ -21,7 +21,7 @@
.dropdown-button {
@include flexCenter;
svg {
@extend .button-icon;
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}

View file

@ -20,7 +20,6 @@
{::mf/wrap-props false}
[props]
(let [context (mf/use-ctx context)
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
@ -28,18 +27,18 @@
title (unchecked-get props "title")
unique-key (unchecked-get props "unique-key")
icon-class (unchecked-get props "icon-class")
type (or (unchecked-get props "type") "radio")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
encode-fn (unchecked-get context "encode-fn")
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
[:label {:for id
:title title
:key unique-key
:tabIndex "0"
:class (stl/css-case
:radio-icon true
:checked checked?
@ -53,48 +52,7 @@
[:input {:id id
:on-change on-change
:type "radio"
:name name
:disabled disabled
:value (encode-fn value)
:checked checked?}]]))
(mf/defc nilable-option
{::mf/wrap-props false}
[props]
(let [context (mf/use-ctx context)
icon (unchecked-get props "icon")
id (unchecked-get props "id")
value (unchecked-get props "value")
title (unchecked-get props "title")
disabled (unchecked-get props "disabled")
unique-key (unchecked-get props "unique-key")
icon-class (unchecked-get props "icon-class")
on-change (unchecked-get context "on-change")
selected (unchecked-get context "selected")
name (unchecked-get context "name")
encode-fn (unchecked-get context "encode-fn")
checked? (= selected value)]
[:label {:for id
:key unique-key
:title title
:class (stl/css-case
:radio-icon true
:disabled disabled
:checked checked?)}
(if (some? icon)
[:span {:class (when icon-class icon-class)}
icon]
[:span {:class (stl/css :title-name)}
(encode-fn value)])
[:input {:id id
:on-change on-change
:type "checkbox"
:type type
:name name
:disabled disabled
:value (encode-fn value)
@ -128,9 +86,11 @@
(mf/use-fn
(mf/deps on-change)
(fn [event]
(let [value (dom/get-target-val event)]
(let [input-node (dom/get-target event)
value (dom/get-target-val event)]
(when (fn? on-change)
(on-change (decode-fn value) event)))))
(do (on-change (decode-fn value) event)
(dom/blur! input-node))))))
context-value
(mf/with-memo [selected on-change' name encode-fn decode-fn]

View file

@ -14,11 +14,11 @@
}
.radio-icon {
@extend .button-radio;
height: $s-28;
height: $s-32;
flex-grow: 1;
border-radius: $s-6;
border: solid $s-1 transparent;
border-radius: $s-8;
box-sizing: content-box;
border: none;
input {
display: none;
}
@ -30,8 +30,15 @@
@include tabTitleTipography;
color: var(--radio-btn-foreground-color);
}
&:hover {
border: none;
svg {
color: var(--radio-btn-foreground-color-selected);
}
}
&.checked {
border: none;
background-color: var(--radio-btn-background-color-selected);
svg {
stroke: var(--radio-btn-foreground-color-selected);
@ -43,6 +50,7 @@
&.disabled {
cursor: default;
background-color: transparent;
svg {
stroke: var(--button-foreground-color-disabled);
}

View file

@ -42,7 +42,7 @@
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
node (dom/event->target event)]
node (dom/get-target event)]
(when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))]
[:span {:class (dom/classnames (css :search-box) true

View file

@ -23,7 +23,7 @@
[item item item]))
(mf/defc select
[{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
label-index (mf/with-memo [options]
(into {} (map as-key-value) options))
@ -95,7 +95,7 @@
[:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown}
[:ul {:class (stl/css :custom-select-dropdown)}
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
(for [[index item] (d/enumerate options)]
(if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true)

View file

@ -37,7 +37,7 @@
.dropdown-button {
@include flexCenter;
svg {
@extend .button-icon;
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}

View file

@ -13,16 +13,27 @@
(mf/defc title-bar
{::mf/wrap-props false}
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}]
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class clickable-all?]}]
(let [klass (dm/str (stl/css :title-bar) " " class)]
[:div {:class klass}
(if collapsable?
[:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
[:span {:class (stl/css-case
:collased-icon true
:rotated collapsed?)}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]]
[:div {:class (stl/css :title-wrapper)}
(if clickable-all?
[:button {:class (stl/css :toggle-btn)
:on-click on-collapsed}
[:span {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed?)}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]]
[:*
[:button {:class (stl/css-case
:collapsabled-icon true
:rotated collapsed?)
:on-click on-collapsed}
i/arrow-refactor]
[:div {:class (stl/css :title)} title]])]
[:div {:class (stl/css :title-only)} title])
children
(when (some? on-btn-click)

View file

@ -23,26 +23,57 @@
flex-grow: 1;
height: 100%;
min-height: $s-32;
margin-left: $s-8;
color: var(--title-foreground-color);
}
.title-only {
margin-left: $s-8;
}
.toggle-btn {
@include buttonStyle;
.title-wrapper {
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
.collased-icon {
.toggle-btn {
@include buttonStyle;
display: flex;
align-items: center;
flex-grow: 1;
padding: 0;
color: var(--title-foreground-color);
stroke: var(--title-foreground-color);
.collapsabled-icon {
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
&.rotated svg {
transform: rotate(0deg);
}
}
&:hover {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover);
}
}
}
.collapsabled-icon {
@include buttonStyle;
@include flexCenter;
height: $s-24;
border-radius: $br-8;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
@ -56,10 +87,9 @@
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
.title {
color: var(--title-foreground-color-hover);
stroke: var(--title-foreground-color-hover);
}
.collased-icon svg {
.collapsabled-icon svg {
stroke: var(--title-foreground-color-hover);
}
}

View file

@ -950,7 +950,7 @@
[:*
[:& header {:team team :section :dashboard-team-webhooks}]
[:section.dashboard-container.dashboard-team-webhooks
[:div
[:*
[:& webhooks-hero]
(if (empty? webhooks)
[:div.webhooks-empty

View file

@ -64,8 +64,8 @@
:form form}
;; --- Feedback section
[:h2 (tr "feedback.title")]
[:p (tr "feedback.subtitle")]
[:h2.field-title (tr "feedback.title")]
[:p.field-text (tr "feedback.subtitle")]
[:div.fields-row
[:& fm/input {:label (tr "feedback.subject")
@ -82,22 +82,20 @@
[:hr]
[:h2 (tr "feedback.discourse-title")]
[:p (tr "feedback.discourse-subtitle1")]
[:h2.field-title (tr "feedback.discourse-title")]
[:p.field-text (tr "feedback.discourse-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://community.penpot.app" :target "_blank"}
(tr "feedback.discourse-go-to")]
[:hr]
[:h2 (tr "feedback.twitter-title")]
[:p (tr "feedback.twitter-subtitle1")]
[:h2.field-title (tr "feedback.twitter-title")]
[:p.field-text (tr "feedback.twitter-subtitle1")]
[:a.btn-secondary.btn-large
{:href "https://twitter.com/penpotapp" :target "_blank"}
(tr "feedback.twitter-go-to")]
]))
(tr "feedback.twitter-go-to")]]))
(mf/defc feedback-page
[]

View file

@ -206,7 +206,7 @@
(mf/use-fn
(mf/deps file-id)
(fn [event]
(let [input-node (dom/event->target event)
(let [input-node (dom/get-target event)
publish-library #(st/emit! (dwl/set-file-shared file-id true))
cancel-publish #(st/emit! (modal/show :libraries-dialog {}))]
(if empty-library?
@ -237,7 +237,7 @@
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
input-node (dom/event->target event)]
input-node (dom/get-target event)]
(when ^boolean enter?
(dom/blur! input-node))
(when ^boolean esc?

View file

@ -130,7 +130,7 @@
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
node (dom/event->target event)]
node (dom/get-target event)]
(when ^boolean enter? (dom/blur! node))
(when ^boolean esc? (dom/blur! node)))))

View file

@ -105,18 +105,16 @@
}
}
.libraries-wrapper {
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
padding-left: $s-8;
height: calc(100% - $s-80);
overflow-y: auto;
overflow-x: hidden;
scrollbar-gutter: stable;
overflow-y: overlay;
height: calc(100vh - $s-180);
}
.assets-header {
padding: $s-8 $s-12 $s-12 $s-12;
padding: $s-8 0 $s-12 $s-12;
.search-wrapper {
display: flex;
gap: $s-4;

View file

@ -113,8 +113,7 @@
(mf/use-fn
(mf/deps rename-color)
(fn [event]
(let [target (dom/event->target event)
name (dom/get-value target)]
(let [name (dom/get-target-val event)]
(rename-color name)
(st/emit! dwl/clear-color-for-rename)
(reset! editing* false))))

View file

@ -21,7 +21,7 @@
.colors-group {
margin-top: $s-4;
.asset-list {
padding: 0 0 0 $s-12;
padding: 0 0 0 $s-4;
.asset-list-item {
position: relative;
display: flex;

View file

@ -146,6 +146,7 @@
[:div {:class (dom/classnames (css :asset-section) true)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
:class (css :title-spacing)
:title (mf/html [:span {:class (dom/classnames (css :title-name) true)}

View file

@ -600,10 +600,10 @@
:name "listing-style"}
[:& radio-button {:icon i/view-as-list-refactor
:value "list"
:id :list}]
:id "opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor
:value "grid"
:id :grid}]]])
:id "opt-grid"}]]])
(when (and components-v2 (not read-only?) local?)
[:div {:on-click add-component

View file

@ -205,14 +205,14 @@
.listing-option-btn {
@include flexCenter;
cursor: pointer;
background-color: var(--button-radio-background-color-rest);
&.first {
margin-left: auto;
}
svg {
height: 16px;
width: 16px;
@extend .button-icon;
}
}
}

View file

@ -56,6 +56,7 @@
[:div {:class (dom/classnames (css :library-title) true)}
[:& title-bar {:collapsable? true
:collapsed? (not open?)
:clickable-all? true
:on-collapsed toggle-open
:title (if local?
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])

View file

@ -49,16 +49,17 @@
(if new-css-system
[:div {:class (dom/classnames (css :group-title) true)
:on-context-menu on-context-menu}
[:& title-bar {:collapsable? true
:collapsed? (not group-open?)
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
[:span {:class (dom/classnames (css :pre-path) true)
:title (when truncated path)}
other-path "\u00A0\u2022\u00A0"])
[:span {:class (dom/classnames (css :path) true)
:title (when truncated path)}
last-path]])}]
[:& title-bar {:collapsable? true
:collapsed? (not group-open?)
:clickable-all? true
:on-collapsed on-fold-group
:title (mf/html [:* (when-not (empty? other-path)
[:span {:class (dom/classnames (css :pre-path) true)
:title (when truncated path)}
other-path "\u00A0\u2022\u00A0"])
[:span {:class (dom/classnames (css :path) true)
:title (when truncated path)}
last-path]])}]
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state

View file

@ -7,12 +7,14 @@
@import "refactor/common-refactor.scss";
.group-title {
padding-left: $s-16;
padding-left: $s-4;
.pre-path {
margin-left: $s-2;
text-transform: initial;
color: var(--title-foreground-color);
}
.path {
margin-left: $s-2;
text-transform: initial;
color: var(--title-foreground-color-hover);
}

View file

@ -5,7 +5,7 @@
;; Copyright (c) KALEIDOS INC
(ns app.main.ui.workspace.sidebar.assets.typographies
(:require-macros [app.main.style :refer [css]])
(:require-macros [app.main.style :as stl])
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
@ -101,7 +101,7 @@
(partial on-asset-click typography-id apply-typography))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :typography-item) true)
[:div {:class (stl/css :typography-item)
:ref item-ref
:draggable (and (not read-only?) (not open?))
:on-drag-start on-typography-drag-start
@ -109,6 +109,7 @@
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
[:& typography-entry
{:typography typography
:local? local?
@ -121,9 +122,8 @@
:focus-name? rename?
:external-open* open*
:file-id file-id}]
(when ^boolean dragging?
[:div {:class (dom/classnames (css :dragging) true)}])]
[:div {:class (stl/css :dragging)}])]
[:div.typography-container {:ref item-ref
:draggable (and (not read-only?) (not open?))
@ -184,7 +184,7 @@
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))]
(if ^boolean new-css-system
[:div {:class (dom/classnames (css :typographies-group) true)
[:div {:class (stl/css :typographies-group)
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
@ -199,19 +199,19 @@
(when group-open?
[:*
(let [typographies (get groups "" [])]
[:div {:class (dom/classnames (css :assets-list) true)
[:div {:class (stl/css :assets-list)
:on-drag-enter on-drag-enter
:on-drag-leave on-drag-leave
:on-drag-over dom/prevent-default
:on-drop on-drop}
(when ^boolean dragging?
[:div {:class (css :grid-placeholder)} "\u00A0"])
[:div {:class (stl/css :grid-placeholder)} "\u00A0"])
(when (and
(empty? typographies)
(some? groups))
[:div {:class (css :drop-space)}])
[:div {:class (stl/css :drop-space)}])
(for [{:keys [id] :as typography} typographies]
[:& typography-item {:typography typography
:key (dm/str "typography-" id)
@ -411,6 +411,7 @@
(modal/show! :name-group-dialog {:path path
:last-path last-path
:accept rename-group})))
on-ungroup
(mf/use-fn
(mf/deps typographies)
@ -433,7 +434,7 @@
(fn [id event]
(dom/prevent-default event)
(let [pos (dom/get-client-position event)]
(when (and local? (not read-only?))
(when (not read-only?)
(when-not (contains? selected id)
(on-clear-selection))
(swap! state assoc :id id)
@ -467,7 +468,7 @@
editing-id (if new-css-system
(:edit-typography local-data)
(or (:rename-typography local-data)
(:edit-typography local-data)))
(:edit-typography local-data)))
renaming-id (:rename-typography local-data)
@ -484,7 +485,8 @@
(when (:edit-typography local-data)
(st/emit! #(update % :workspace-global dissoc :edit-typography)))))
[:& cmm/asset-section {:file-id file-id
[:*
[:& cmm/asset-section {:file-id file-id
:title (tr "workspace.assets.typography")
:section :typographies
:assets-count (count typographies)
@ -493,8 +495,8 @@
(when local?
[:& cmm/asset-section-block {:role :title-button}
(when-not read-only?
[:button {:class (dom/classnames (css :assets-btn) true)
:on-click add-typography}
[:button {:class (stl/css :assets-btn)
:on-click add-typography}
i/add-refactor])])
(when local?
@ -524,7 +526,7 @@
:on-context-menu on-context-menu
:selected-full selected-full}]
(when local?
(if local?
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
@ -548,11 +550,18 @@
:id "assets-group-typography"
:option-handler on-group})]
[(when-not (or multi-typographies? multi-assets?)
[(tr "workspace.assets.rename") handle-rename-typography-clicked])
(when-not (or multi-typographies? multi-assets?)
[(tr "workspace.assets.edit") handle-edit-typography-clicked])
[(tr "workspace.assets.delete") handle-delete-typography]
(when-not multi-assets?
[(tr "workspace.assets.group") on-group])])}])]]))
[(tr "workspace.assets.group") on-group])])}]
(when new-css-system
[:& cmm/assets-context-menu
{:on-close on-close-menu
:state @menu-state
:options [{:option-name "show info"
:id "assets-rename-typography"
:option-handler handle-edit-typography-clicked}]}]))]]]))

View file

@ -19,7 +19,7 @@
}
.typographies-group {
.assets-list {
padding: 0 0 0 $s-12;
padding: 0 0 0 $s-4;
.drop-space {
height: $s-12;
border-radius: $br-8;

View file

@ -241,7 +241,7 @@
handle-key-down
(mf/use-fn
(fn [event]
(when-let [node (dom/event->target event)]
(when-let [node (dom/get-target event)]
(when (kbd/enter? event)
(dom/blur! node))
(when (kbd/esc? event)

View file

@ -35,40 +35,34 @@
state* (mf/use-state {:show-content true
:show-more-options false})
state (deref state*)
open? (:show-content state)
more-options? (:show-more-options state)
toggle-content (mf/use-fn #(swap! state* update :show-content not))
toggle-content
(mf/use-fn #(swap! state* update :show-content not))
toggle-more-options
(mf/use-fn #(swap! state* update :show-more-options not))
toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not))
change!
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [update-fn]
(st/emit! (dch/update-shapes ids update-fn))))
handle-add
(mf/use-callback
(mf/use-fn
(mf/deps change!)
(fn []
(change! #(assoc % :blur (create-blur)))))
handle-delete
(mf/use-callback
(mf/use-fn
(mf/deps change!)
(fn []
(change! #(dissoc % :blur))))
handle-change
(mf/use-callback
(mf/use-fn
(mf/deps change!)
(fn [value]
(change! #(cond-> %
@ -79,7 +73,7 @@
(assoc-in [:blur :value] value)))))
handle-toggle-visibility
(mf/use-callback
(mf/use-fn
(mf/deps change!)
(fn []
(change! #(update-in % [:blur :hidden] not))))]
@ -87,19 +81,17 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-value?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.blur-options.title.multiple")
:group (tr "workspace.options.blur-options.title.group")
(tr "workspace.options.blur-options.title"))
:class (stl/css :title-spacing-blur)}
:class (stl/css-case :title-spacing-blur (not has-value?))}
(when-not has-value?
[:button {:class (stl/css :add-blur)
:on-click handle-add} i/add-refactor])]]
(when (and open? has-value?)
[:div {:class (stl/css :element-set-content)}
[:div {:class (stl/css :first-row)}
@ -120,11 +112,13 @@
:on-click handle-delete} i/remove-refactor]]]
(when more-options?
[:div {:class (stl/css :second-row)}
[:span {:class (stl/css :label)}
[:label {:class (stl/css :label)
:for "blur-input-sidebar"}
(tr "inspect.attributes.blur.value")]
[:> numeric-input*
{:className (stl/css :numeric-input)
:placeholder "--"
:id "blur-input-sidebar"
:min "0"
:on-change handle-change
:value (:value blur)}]])])]
@ -140,7 +134,8 @@
[:div.element-set-title-actions
(when (and has-value? (not multiple?))
[:div.add-page {:on-click handle-toggle-visibility} (if (:hidden blur) i/eye-closed i/eye)])
[:div.add-page {:on-click handle-toggle-visibility}
(if (:hidden blur) i/eye-closed i/eye)])
(if has-value?
[:div.add-page {:on-click handle-delete} i/minus]

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-blur {
padding-left: $s-12;
}
.add-blur {
@extend .button-tertiary;
height: $s-32;
@ -43,10 +46,10 @@
@extend .button-icon;
}
&.selected {
background-color: var(--button-secondary-background-color-active);
color: var(--button-secondary-foreground-color-active);
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-secondary-foreground-color-active);
stroke: var(--button-tertiary-foreground-color-active);
}
}
}
@ -77,9 +80,11 @@
}
.second-row {
@extend .input-element;
gap: $s-4;
width: $s-92;
padding-left: $s-8;
.label {
padding-left: $s-8;
width: $s-60;
}
}
}
}

View file

@ -101,22 +101,22 @@
:value "union"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
:id :union}]
:id "bool-opt-union"}]
[:& radio-button {:icon i/boolean-difference-refactor
:value "difference"
:disabled disabled-bool-btns
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
:id :difference}]
:id "bool-opt-differente"}]
[:& radio-button {:icon i/boolean-intersection-refactor
:value "intersection"
:disabled disabled-bool-btns
:title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")")
:id :intersection}]
:id "bool-opt-intersection"}]
[:& radio-button {:icon i/boolean-exclude-refactor
:value "exclude"
:disabled disabled-bool-btns
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
:id :exclude}]]]
:id "bool-opt-exclude"}]]]
[:div {:class (stl/css :bool-group)}
[:button

View file

@ -161,6 +161,8 @@
state* (mf/use-state true)
open? (deref state*)
has-colors? (or (some? (seq colors)) (some? (seq library-colors)))
toggle-content (mf/use-fn #(swap! state* not))
expand-lib-color (mf/use-state false)
@ -215,11 +217,11 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-colors?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (tr "workspace.options.selection-color")
:class (stl/css :title-spacing-selected-colors)}]]
:class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
(when open?
[:div {:class (stl/css :element-content)}

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-selected-colors {
padding-left: $s-12;
}
.add-fill {
@extend .button-tertiary;
height: $s-32;

View file

@ -13,14 +13,14 @@
.constraints-widget {
background-color: var(--constraint-widget-background-color);
display: grid;
grid-template-columns: $s-24 $s-72 $s-24;
grid-template-rows: $s-24 $s-72 $s-24;
grid-template-columns: $s-24 $s-60 $s-24;
grid-template-rows: $s-24 $s-60 $s-24;
grid-template-areas:
"top top top"
"left center right"
"bottom bottom bottom";
height: $s-120;
width: $s-120;
height: $s-108;
width: $s-108;
border-radius: $br-8;
.constraints-top,
.constraints-left,
@ -37,8 +37,8 @@
width: 100%;
height: 100%;
.resalted-area {
width: $s-40;
height: $s-4;
width: $s-32;
height: $s-3;
border-radius: $br-8;
background-color: var(--button-constraint-background-color-rest);
padding: 0;
@ -58,11 +58,11 @@
.constraints-left {
grid-area: left;
.constraint-btn-rotated {
height: $s-72;
height: $s-60;
width: $s-24;
.resalted-area {
height: $s-40;
width: $s-4;
height: $s-32;
width: $s-3;
}
}
}
@ -72,20 +72,20 @@
background-color: var(--constraint-center-area-background-color);
border-radius: $br-8;
.constraint-btn {
width: $s-72;
width: $s-60;
height: $s-24;
.resalted-area {
width: $s-40;
height: $s-4;
width: $s-32;
height: $s-3;
}
}
.constraint-btn-special {
position: absolute;
height: $s-72;
height: $s-60;
width: $s-24;
.resalted-area {
height: $s-40;
width: $s-4;
height: $s-32;
width: $s-3;
}
}
}
@ -95,8 +95,8 @@
height: $s-72;
width: $s-24;
.resalted-area {
height: $s-40;
width: $s-4;
height: $s-32;
width: $s-3;
}
}
}

View file

@ -32,6 +32,7 @@
[{:keys [ids type values page-id file-id] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
exports (:exports values [])
has-exports? (or (= :multiple exports) (some? (seq exports)))
comp-state* (mf/use-state true)
open? (deref comp-state*)
@ -52,7 +53,7 @@
(str suffix))))
scale-enabled?
(mf/use-callback
(mf/use-fn
(fn [export]
(#{:png :jpeg} (:type export))))
@ -94,7 +95,7 @@
;; TODO: maybe move to specific events for avoid to have this logic here?
add-export
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn []
(let [xspec {:type :png :suffix "" :scale 1}]
@ -103,7 +104,7 @@
(assoc shape :exports (into [xspec] (:exports shape)))))))))
delete-export
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [position]
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
@ -114,7 +115,7 @@
(st/emit! (dch/update-shapes ids remove)))))
on-scale-change
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index event]
(let [scale (if new-css-system
@ -127,7 +128,7 @@
(assoc-in shape [:exports index :scale] scale)))))))
on-suffix-change
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [event]
(let [value (dom/get-target-val event)
@ -139,7 +140,7 @@
(assoc-in shape [:exports index :suffix] value)))))))
on-type-change
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index event]
(let [type (if new-css-system
@ -152,14 +153,14 @@
(assoc-in shape [:exports index :type] type)))))))
on-remove-all
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn []
(st/emit! (dch/update-shapes ids
(fn [shape]
(assoc shape :exports []))))))
manage-key-down
(mf/use-callback
(mf/use-fn
(fn [event]
(let [esc? (kbd/esc? event)]
(when esc?
@ -181,11 +182,11 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-exports?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
:class (stl/css :title-spacing-export)}
:class (stl/css-case :title-spacing-export (not has-exports?))}
[:button {:class (stl/css :add-export)
:on-click add-export} i/add-refactor]]]
(when open?
@ -210,15 +211,20 @@
[:& select
{:default-value (d/name (:type export))
:options format-options
:dropdown-class (stl/css :dropdown-upwards)
:on-change (partial on-type-change index)}]]
(when (scale-enabled? export)
[:div {:class (stl/css :size-select)}
[:& select
{:default-value (str (:scale export))
:options size-options
:dropdown-class (stl/css :dropdown-upwards)
:on-change (partial on-scale-change index)}]])
[:div {:class (stl/css :suffix-input)}
[:label {:class (stl/css :suffix-input)
:for "suffix-export-input"}
[:input {:class (stl/css :type-input)
:id "suffix-export-input"
:type "text"
:value (:suffix export)
:placeholder (tr "workspace.options.export.suffix")
:data-value index

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-export {
padding-left: $s-12;
}
.add-export {
@extend .button-tertiary;
height: $s-32;
@ -54,15 +57,24 @@
.format-select {
width: $s-60;
padding: 0;
.dropdown-upwards {
bottom: $s-36;
width: $s-80;
top: unset;
}
}
.size-select {
width: $s-60;
padding: 0;
.dropdown-upwards {
bottom: $s-36;
top: unset;
width: $s-80;
}
}
.suffix-input {
@extend .input-element;
min-width: $s-92;
padding: 0 $s-8;
flex-grow: 1;
}
}

View file

@ -50,34 +50,39 @@
:group (tr "workspace.options.group-fill")
(tr "workspace.options.fill"))
state* (mf/use-state true)
;; Excluding nil values
values (d/without-nils values)
fills (:fills values)
has-fills? (or (= :multiple fills) (some? (seq fills)))
state* (mf/use-state has-fills?)
open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not))
;; Excluding nil values
values (d/without-nils values)
hide-fill-on-export? (:hide-fill-on-export values false)
checkbox-ref (mf/use-ref)
on-add
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [_]
(st/emit! (dc/add-fill ids {:color default-color
:opacity 1}))))
on-change
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(fn [color]
(st/emit! (dc/change-fill ids color index)))))
on-reorder
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [new-index]
(fn [index]
@ -94,7 +99,7 @@
:opacity 1})))
on-detach
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(fn [color]
@ -103,7 +108,7 @@
(st/emit! (dc/change-fill ids color index))))))
on-change-show-fill-on-export
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [event]
(let [value (-> event dom/get-target dom/checked?)]
@ -130,20 +135,20 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-fills?
:collapsed? (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css :title-spacing-fill)}
:class (stl/css-case :title-spacing-fill (not has-fills?))}
(when (and (not disable-remove?) (not (= :multiple (:fills values))))
(when (and (not disable-remove?) (not (= :multiple fills)))
[:button {:class (stl/css :add-fill)
:on-click on-add} i/add-refactor])]]
(when open?
[:div {:class (stl/css :element-content)}
(cond
(= :multiple (:fills values))
(= :multiple fills)
[:div {:class (stl/css :element-set-options-group)}
[:div {:class (stl/css :group-label)}
(tr "settings.multiple")]
@ -151,7 +156,7 @@
:class (stl/css :remove-btn)}
i/remove-refactor]]
(seq (:fills values))
(seq fills)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:fills values []))]
[:& color-row {:color {:color (:fill-color value)
@ -190,20 +195,20 @@
[:div.element-set
[:div.element-set-title
[:span label]
(when (and (not disable-remove?) (not (= :multiple (:fills values))))
(when (and (not disable-remove?) (not (= :multiple fills)))
[:div.add-page {:on-click on-add} i/close])]
[:div.element-set-content
(cond
(= :multiple (:fills values))
(= :multiple fills)
[:div.element-set-options-group
[:div.element-set-label (tr "settings.multiple")]
[:div.element-set-actions
[:div.element-set-actions-button {:on-click on-remove-all}
i/minus]]]
(seq (:fills values))
(seq fills)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:fills values []))]
[:& color-row {:color {:color (:fill-color value)

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-fill {
padding-left: $s-12;
}
.add-fill {
@extend .button-tertiary;
height: $s-32;

View file

@ -397,27 +397,30 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state* (mf/use-state true)
open? (deref state*)
frame-grids (:grids shape)
has-frame-grids? (or (= :multiple frame-grids) (some? (seq frame-grids)))
toggle-content (mf/use-fn #(swap! state* not))
id (:id shape)
id (:id shape)
saved-grids (mf/deref workspace-saved-grids)
default-grid-params (mf/use-memo (mf/deps saved-grids) #(merge dw/default-grid-params saved-grids))
handle-create-grid (mf/use-fn (mf/deps id) #(st/emit! (dw/add-frame-grid id)))]
(if new-css-system
[:div {:class (stl/css :element-set)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-frame-grids?
:collapsed? (not open?)
:on-collapsed toggle-content
:class (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
:title (tr "workspace.options.grid.grid-title")}
[:button {:on-click handle-create-grid
:class (stl/css :add-grid)}
i/add-refactor]]
(when (and open? (seq (:grids shape)))
(when (and open? (seq frame-grids))
[:div {:class (stl/css :element-set-content)}
(for [[index grid] (map-indexed vector (:grids shape))]
(for [[index grid] (map-indexed vector frame-grids)]
[:& grid-options {:key (str id "-" index)
:shape-id id
:grid grid
@ -432,9 +435,9 @@
[:span (tr "workspace.options.grid.grid-title")]
[:div.add-page {:on-click handle-create-grid} i/close]]
(when (seq (:grids shape))
(when (seq frame-grids)
[:div.element-set-content
(for [[index grid] (map-indexed vector (:grids shape))]
(for [[index grid] (map-indexed vector frame-grids)]
[:& grid-options {:key (str id "-" index)
:shape-id id
:grid grid

View file

@ -7,6 +7,9 @@
@import "refactor/common-refactor.scss";
.element-set {
.title-spacing-board-grid {
padding-left: $s-12;
}
.add-grid {
@extend .button-tertiary;
height: $s-32;
@ -174,7 +177,6 @@
.height {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
.icon-text {
padding-top: $s-1;
}
@ -183,7 +185,6 @@
.margin {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
.icon {
&.rotated svg {
transform: rotate(90deg);

View file

@ -159,6 +159,8 @@
:options options
:on-change handle-change-blend-mode
:is-open? option-highlighted?
:class (stl/css-case :hidden-select (or hidden?
blocked?))
:on-pointer-enter-option handle-blend-mode-enter
:on-pointer-leave-option handle-blend-mode-leave}]]
[:div {:class (stl/css :input)

View file

@ -18,7 +18,6 @@
.input {
@extend .input-element;
width: $s-60;
padding-left: $s-8;
}
.actions {
display: flex;
@ -37,7 +36,7 @@
}
&.hidden {
.select {
.hidden-select {
background-color: transparent;
border: $s-1 solid var(--input-border-color-disabled);
color: var(--input-foreground-color-disabled);

View file

@ -901,19 +901,19 @@
(mf/defc grid-track-info
[{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track]}]
(let [drop-track
(mf/use-callback
(mf/use-fn
(mf/deps type reorder-track index)
(fn [drop-position data]
(reorder-track type (:index data) (if (= :top drop-position) (dec index) index))))
pointer-enter
(mf/use-callback
(mf/use-fn
(mf/deps type hover-track index)
(fn []
(hover-track type index true)))
pointer-leave
(mf/use-callback
(mf/use-fn
(mf/deps type hover-track index)
(fn []
(hover-track type index false)))
@ -1004,6 +1004,7 @@
;; Display
layout-type (:layout values)
has-layout? (some? layout-type)
state* (mf/use-state (if layout-type
true
@ -1217,11 +1218,11 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-layout?
:collapsed? (not open?)
:on-collapsed toggle-content
:title "Layout"
:class (stl/css :title-spacing-layout)}
:class (stl/css-case :title-spacing-layout (not has-layout?))}
(if (and (not multiple) (:layout values))
[:div {:class (stl/css :title-actions)}
(when (features/active-feature? :grid-layout)
@ -1243,7 +1244,7 @@
:on-click on-set-layout}
i/add-refactor]])]]
(when (and open? (:layout values))
(when (and open? has-layout?)
(when (not= :multiple layout-type)
(case layout-type
:flex

View file

@ -9,7 +9,7 @@
.element-set {
.element-title {
.title-spacing-layout {
margin: 0;
padding-left: $s-12;
}
.title-actions {
@ -50,8 +50,7 @@
stroke: var(--icon-foreground);
}
&.selected {
background-color: var(--button-tertiary-background-color-active);
color: var(--button-tertiary-foreground-color-active);
background-color: var(--button-tertiary-background-color-hover);
svg {
stroke: var(--button-tertiary-foreground-color-active);
}
@ -72,7 +71,6 @@
.column-gap {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
&.disabled {
@extend .disabled-input;
}
@ -80,7 +78,6 @@
.row-gap {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
&.disabled {
@extend .disabled-input;
}
@ -98,7 +95,6 @@
.padding-simple {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
}
}
.paddings-multiple {
@ -108,7 +104,6 @@
.padding-multiple {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
}
}
}

View file

@ -387,6 +387,7 @@
state* (mf/use-state true)
open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not))
has-content? (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?)
;; Align self
@ -486,7 +487,7 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-content?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (cond
@ -501,7 +502,8 @@
:else
"Layout element")
:class (stl/css :title-spacing-layout-element)}
:class (stl/css-case :title-spacing-layout-element true
:title-spacing-empty (not has-content?))}
(when is-flex-parent?
[:div {:class (stl/css :position-options)}

View file

@ -14,6 +14,9 @@
width: $s-140;
}
}
.title-spacing-empty {
padding-left: $s-12;
}
}
.flex-element-menu {
display: flex;
@ -54,7 +57,6 @@
.z-index-wrapper {
@extend .input-element;
width: $s-124;
padding-left: $s-8;
}
}
.second-row {
@ -90,7 +92,6 @@
.horizontal-margin {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
}
}
.margin-multiple {
@ -103,7 +104,6 @@
.right-margin {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
}
}
}
@ -124,7 +124,6 @@
.layout-item-max-h {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
.icon-text {
justify-content: flex-start;
width: $s-80;

View file

@ -386,10 +386,10 @@
:name "frame-otientation"}
[:& radio-button {:icon i/size-vertical-refactor
:value "vert"
:id :vert}]
:id "size-vertical"}]
[:& radio-button {:icon i/size-horizontal-refactor
:value "horiz"
:id :horiz}]]])
:id "size-horizontal"}]]])
(when (options :size)
[:div {:class (stl/css :size)}
[:div {:class (stl/css-case :width true

View file

@ -101,8 +101,7 @@
.width {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
y .icon-text {
.icon-text {
padding-top: $s-1;
}
&.disabled {
@ -128,7 +127,6 @@
.y-position {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
.icon-text {
padding-top: $s-1;
}
@ -145,7 +143,6 @@
.rotation {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
.icon-text {
padding-top: $s-1;
}
@ -160,7 +157,6 @@
.radius-1 {
@extend .input-element;
width: $s-108;
padding-left: $s-8;
}
.radius-4 {
display: grid;
@ -169,7 +165,6 @@
.small-input {
@extend .input-element;
width: $s-52;
padding-left: $s-8;
}
}
}

View file

@ -350,7 +350,7 @@
shadows (:shadow values [])
open-state-ref (mf/with-memo [] (l/atom {}))
has-shadows? (or (= :multiple shadows) (some? (seq shadows)))
state* (mf/use-state {:show-content true
:disable-drag false})
@ -386,14 +386,14 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-shadows?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (case type
:multiple (tr "workspace.options.shadow-options.title.multiple")
:group (tr "workspace.options.shadow-options.title.group")
(tr "workspace.options.shadow-options.title"))
:class (stl/css :title-spacing-shadow)}
:class (stl/css-case :title-spacing-shadow (not has-shadows?))}
(when-not (= :multiple shadows)
[:button {:class (stl/css :add-shadow)

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-shadow {
padding-left: $s-12;
}
.add-shadow {
@extend .button-tertiary;
height: $s-32;
@ -64,10 +67,10 @@
@extend .button-icon;
}
&.selected {
background-color: var(--button-secondary-background-color-active);
color: var(--button-secondary-foreground-color-active);
background-color: var(--button-tertiary-background-color-hover);
color: var(--button-tertiary-foreground-color-active);
svg {
stroke: var(--button-secondary-foreground-color-active);
stroke: var(--button-tertiary-foreground-color-active);
}
}
}
@ -111,7 +114,6 @@
@extend .input-element;
width: $s-60;
min-width: $s-60;
padding: 0 0 0 $s-8;
input {
width: $s-32;
}

View file

@ -48,38 +48,42 @@
open? (deref state*)
toggle-content (mf/use-fn #(swap! state* not))
strokes (:strokes values)
has-strokes? (or (= :multiple strokes) (some? (seq strokes)))
handle-change-stroke-color
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(fn [color]
(st/emit! (dc/change-stroke ids color index)))))
on-color-change-refactor
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index color]
(st/emit! (dc/change-stroke ids color index))))
handle-remove
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(fn []
(st/emit! (dc/remove-stroke ids index)))))
on-remove-refactor
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(st/emit! (dc/remove-stroke ids index))))
handle-remove-all
(fn [_]
(st/emit! (dc/remove-all-strokes ids)))
(mf/use-fn
(mf/deps ids)
(fn [_]
(st/emit! (dc/remove-all-strokes ids))))
handle-detach
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index]
(fn [color]
@ -88,7 +92,7 @@
(st/emit! (dc/change-stroke ids color index))))))
on-color-detach-refactor
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index color]
(let [color (-> color
@ -96,7 +100,7 @@
(st/emit! (dc/change-stroke ids color index)))))
handle-reorder
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [new-index]
(fn [index]
@ -111,7 +115,7 @@
(st/emit! (dc/change-stroke ids {:stroke-style value} index)))))
on-stroke-style-change-refactor
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [index value]
(st/emit! (dc/change-stroke ids {:stroke-style value} index))))
@ -202,25 +206,25 @@
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-strokes?
:collapsed? (not open?)
:on-collapsed toggle-content
:title label
:class (stl/css :title-spacing-fill)}
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
[:button {:class (stl/css :add-stroke)
:on-click on-add-stroke} i/add-refactor]]]
(when open?
[:div {:class (stl/css :element-content)}
(cond
(= :multiple (:strokes values))
(= :multiple strokes)
[:div {:class (stl/css :element-set-options-group)}
[:div {:class (stl/css :group-label)}
(tr "settings.multiple")]
[:button {:on-click handle-remove-all
:class (stl/css :remove-btn)}
i/remove-refactor]]
(seq (:strokes values))
(seq strokes)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:strokes values []))]
[:& stroke-row {:key (dm/str "stroke-" index)
@ -254,7 +258,7 @@
[:div.element-set-content
(cond
(= :multiple (:strokes values))
(= :multiple strokes)
[:div.element-set-options-group
[:div.element-set-label (tr "settings.multiple")]
[:div.element-set-actions
@ -262,7 +266,7 @@
i/minus]]]
(seq (:strokes values))
(seq strokes)
[:& h/sortable-container {}
(for [[index value] (d/enumerate (:strokes values []))]
[:& stroke-row {:key (dm/str "stroke-" index)

View file

@ -8,6 +8,9 @@
.element-set {
.element-title {
.title-spacing-stroke {
padding-left: $s-12;
}
.add-stroke {
@extend .button-tertiary;
height: $s-32;

View file

@ -21,13 +21,13 @@
(mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
handle-change
(mf/use-callback
(mf/use-fn
(mf/deps attr on-change)
(fn [event]
(on-change attr (dom/get-target-val event))))
handle-delete
(mf/use-callback
(mf/use-fn
(mf/deps attr on-delete)
(fn []
(on-delete attr)))
@ -86,10 +86,12 @@
(let [new-css-system (mf/use-ctx ctx/new-css-system)
state* (mf/use-state true)
open? (deref state*)
attrs (:svg-attrs values)
has-attributes? (or (= :multiple attrs) (some? (seq attrs)))
toggle-content (mf/use-fn #(swap! state* not))
handle-change
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [attr value]
(let [update-fn
@ -97,7 +99,7 @@
(st/emit! (dch/update-shapes ids update-fn)))))
handle-delete
(mf/use-callback
(mf/use-fn
(mf/deps ids)
(fn [attr]
(let [update-fn
@ -111,17 +113,17 @@
shape))]
(st/emit! (dch/update-shapes ids update-fn)))))]
(when-not (empty? (:svg-attrs values))
(when-not (empty? attrs)
(if new-css-system
[:div {:class (stl/css :element-set)}
[:div {:class (stl/css :element-set-title)}
[:& title-bar {:collapsable? true
[:& title-bar {:collapsable? has-attributes?
:collapsed? (not open?)
:on-collapsed toggle-content
:title (tr "workspace.sidebar.options.svg-attrs.title")
:class (stl/css :title-spacing-svg-attrs)}]]
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
[:div {:class (stl/css :element-set-content)}
(for [[attr-key attr-value] (:svg-attrs values)]
(for [[attr-key attr-value] attrs]
[:& attribute-value {:key attr-key
:attr [attr-key]
:value attr-value
@ -132,7 +134,7 @@
[:div.element-set-title
[:span (tr "workspace.sidebar.options.svg-attrs.title")]]
(for [[attr-key attr-value] (:svg-attrs values)]
(for [[attr-key attr-value] attrs]
[:& attribute-value {:key attr-key
:attr [attr-key]
:value attr-value

View file

@ -7,6 +7,9 @@
@import "refactor/common-refactor.scss";
.element-set {
.title-spacing-svg-attrs {
padding-left: $s-12;
}
.element-set-content {
display: flex;
flex-direction: column;
@ -33,7 +36,6 @@
.attr-input {
@extend .input-element;
width: $s-124;
padding-left: $s-8;
}
.attr-actions {
display: flex;

View file

@ -17,11 +17,11 @@
[app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.store :as st]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons nilable-option]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry typography-options]]
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[app.util.timers :as ts]
@ -113,14 +113,16 @@
[:& radio-buttons {:selected direction
:on-change handle-change
:name "text-direction-options"}
[:& nilable-option {:value "ltr"
[:& radio-button {:value "ltr"
:type "checkbox"
:id "ltr-text-direction"
:title (tr "workspace.options.text-options.direction-ltr")
:icon i/text-ltr-refactor}]
[:& nilable-option {:value "rtl"
:id "rtl-text-direction"
:title (tr "workspace.options.text-options.direction-rtl")
:icon i/text-rtl-refactor}]]]
[:& radio-button {:value "rtl"
:type "checkbox"
:id "rtl-text-direction"
:title (tr "workspace.options.text-options.direction-rtl")
:icon i/text-rtl-refactor}]]]
;; --- Align
[:div.align-icons
[:span.tooltip.tooltip-bottom-left
@ -195,21 +197,20 @@
handle-change-grow
(mf/use-fn
(mf/deps ids)
(mf/deps ids new-css-system)
(fn [value]
(let [uid (js/Symbol)
grow-type (if new-css-system
(keyword value)
(-> (dom/get-current-target value)
(dom/get-data "value")
(keyword)))]
(st/emit!
(dwu/start-undo-transaction uid)
(dch/update-shapes ids #(assoc % :grow-type grow-type)))
(let [uid (js/Symbol)
grow-type (if new-css-system
(keyword value)
(-> (dom/get-current-target value)
(dom/get-data "value")
(keyword)))]
(st/emit!
(dwu/start-undo-transaction uid)
(dch/update-shapes ids #(assoc % :grow-type grow-type)))
;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
(ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
(when (some? on-blur) (on-blur))))]
(ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
(when (some? on-blur) (on-blur))))]
(if new-css-system
[:div {:class (stl/css :grow-options)}
@ -271,14 +272,16 @@
[:& radio-buttons {:selected text-decoration
:on-change handle-change
:name "text-decoration-options"}
[:& nilable-option {:value "underline"
:id "underline-text-decoration"
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
:icon i/text-underlined-refactor}]
[:& nilable-option {:value "line-through"
:id "line-through-text-decoration"
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
:icon i/text-stroked-refactor}]]]
[:& radio-button {:value "underline"
:type "checkbox"
:id "underline-text-decoration"
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
:icon i/text-underlined-refactor}]
[:& radio-button {:value "line-through"
:type "checkbox"
:id "line-through-text-decoration"
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
:icon i/text-stroked-refactor}]]]
[:div.align-icons
[:span.tooltip.tooltip-bottom
@ -335,7 +338,7 @@
typography-file (:typography-ref-file values)
emit-update!
(mf/use-callback
(mf/use-fn
(mf/deps values)
(fn [ids attrs]
(st/emit! (dwt/save-font (-> (merge txt/default-text-attrs values attrs)
@ -343,7 +346,7 @@
(dwt/update-all-attrs ids attrs))))
on-change
(mf/use-callback
(mf/use-fn
(mf/deps ids emit-update!)
(fn [attrs]
(emit-update! ids attrs)))
@ -381,14 +384,14 @@
:typography-ref-file file-id})))
handle-detach-typography
(mf/use-callback
(mf/use-fn
(mf/deps on-change)
(fn []
(on-change {:typography-ref-file nil
:typography-ref-id nil})))
handle-change-typography
(mf/use-callback
(mf/use-fn
(mf/deps typography file-id)
(fn [changes]
(st/emit! (dwl/update-typography (merge typography changes) file-id))))
@ -440,7 +443,7 @@
i/detach-refactor]]
:else
[:> typography-options opts])
[:> text-options opts])
[:div {:class (stl/css :text-align-options)}
[:> text-align-options opts]
@ -477,7 +480,7 @@
:title (tr "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
:else
[:> typography-options opts])
[:> text-options opts])
[:div.element-set-content

View file

@ -22,14 +22,7 @@
flex-direction: column;
gap: $s-4;
.multiple-typography {
display: flex;
align-items: center;
padding: 0 $s-8;
gap: $s-4;
border-radius: $s-8;
background-color: var(--input-background-color);
height: $s-32;
flex-grow: 1;
@extend .mixed-bar;
.multiple-text {
@include titleTipography;
flex-grow: 1;

View file

@ -20,7 +20,7 @@
[app.main.store :as st]
[app.main.ui.components.editable-select :refer [editable-select]]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
[app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
[app.main.ui.components.search-bar :refer [search-bar]]
[app.main.ui.components.select :refer [select]]
[app.main.ui.context :as ctx]
@ -184,6 +184,7 @@
#(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
(.scrollToPosition ^js inst offset)))))
(if new-css-system
[:div {:class (stl/css :font-selector)}
[:div {:class (stl/css :font-selector-dropdown)}
@ -249,6 +250,7 @@
:rowCount (count fonts)
:rowHeight 32
:rowRenderer render}])))]]]])))
(defn row-renderer
[fonts selected on-select props]
(let [index (unchecked-get props "index")
@ -303,7 +305,9 @@
(mf/use-fn
(mf/deps font on-change)
(fn [event]
(let [new-variant-id (dom/get-target-val event)
(let [new-variant-id (if new-css-system
event
(dom/get-target-val event))
variant (d/seek #(= new-variant-id (:id %)) (:variants font))]
(on-change {:font-id (:id font)
:font-family (:family font)
@ -330,6 +334,7 @@
(on-blur))
(when (mf/ref-val last-font)
(st/emit! (fts/add-recent-font (mf/ref-val last-font))))))]
(if new-css-system
[:*
(when @open-selector?
@ -339,9 +344,8 @@
:on-select on-font-select
:show-recent show-recent}])
[:div
{:class (stl/css :font-option)
:on-click #(reset! open-selector? true)}
[:div {:class (stl/css :font-option)
:on-click #(reset! open-selector? true)}
(cond
(= :multiple font-id)
"--"
@ -355,6 +359,7 @@
:else
(tr "dashboard.fonts.deleted-placeholder"))]
[:div {:class (stl/css :font-modifiers)}
[:div {:class (stl/css :font-size-options)}
(let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
@ -406,7 +411,6 @@
:else
(tr "dashboard.fonts.deleted-placeholder"))]]
[:div.row-flex
(let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
@ -481,6 +485,7 @@
:on-change #(handle-change % :letter-spacing)
:on-blur on-blur}]]]
[:div.spacing-options
[:div.input-icon
[:span.icon-before.tooltip.tooltip-bottom
@ -526,15 +531,18 @@
[:& radio-buttons {:selected text-transform
:on-change handle-change
:name "text-transform"}
[:& nilable-option {:icon i/text-uppercase-refactor
[:& radio-button {:icon i/text-uppercase-refactor
:type "checkbox"
:value "uppercase"
:id :uppercase}]
[:& nilable-option {:icon i/text-lowercase-refactor
:id "text-transform-uppercase"}]
[:& radio-button {:icon i/text-lowercase-refactor
:type "checkbox"
:value "lowercase"
:id :lowercase}]
[:& nilable-option {:icon i/text-mixed-refactor
:id "text-transform-lowercase"}]
[:& radio-button {:icon i/text-mixed-refactor
:type "checkbox"
:value "capitalize"
:id :capitalize}]]]
:id "text-transform-capitalize"}]]]
[:div.align-icons
[:span.tooltip.tooltip-bottom
@ -559,7 +567,7 @@
:on-click #(handle-change "capitalize")}
i/titlecase]])))
(mf/defc typography-options
(mf/defc text-options
{::mf/wrap-props false}
[{:keys [ids editor values on-change on-blur show-recent]}]
(let [new-css-system (mf/use-ctx ctx/new-css-system)
@ -571,7 +579,7 @@
:show-recent show-recent}]
(if new-css-system
[:div {:class (stl/css :typography-options)}
[:div {:class (stl/css :text-options)}
[:> font-options opts]
[:div {:class (stl/css :typography-variations)}
[:> spacing-options opts]
@ -588,7 +596,9 @@
(mf/defc typography-advanced-options
{::mf/wrap [mf/memo]}
[{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library on-key-down]}]
(let [ref (mf/use-ref nil)]
(let [ref (mf/use-ref nil)
font-data (fonts/get-font-data (:font-id typography))]
(mf/use-effect
(mf/deps visible?)
(fn []
@ -599,14 +609,14 @@
(when visible?
[:div {:ref ref
:class (stl/css :advanced-options-wrapper)}
(if ^boolean editable?
[:*
[:div {:class (stl/css :font-name-wrapper)}
[:div
{:class (stl/css :typography-sample-input)
:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
[:div {:class (stl/css :typography-sample-input)
:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:input
@ -621,47 +631,52 @@
:on-click on-close}
i/tick-refactor]]
[:& typography-options {:values typography
:on-change on-change
:show-recent false}]]
[:& text-options {:values typography
:on-change on-change
:show-recent false}]]
[:div.element-set-content.typography-read-only-data
[:div.row-flex.typography-name
[:span {:title (:name typography)} (:name typography)]]
[:div {:class (stl/css :typography-info-wrapper)}
[:div {:class (stl/css :typography-name-wrapper)}
[:div {:class (stl/css :typography-sample)
[:div.row-flex
[:span.label (tr "workspace.assets.typography.font-id")]
[:span (:font-id typography)]]
:style {:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")]
[:div.element-set-actions-button.actions-inside
{:on-click on-close}
i/actions]
[:div {:class (stl/css :typography-name)
:title (:name typography)}
(:name typography)]
[:span {:class (stl/css :typography-font)}
(:name font-data)]
[:div {:class (stl/css :action-btn)
:on-click on-close}
i/menu-refactor]]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.font-variant-id")]
[:span (:font-variant-id typography)]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")]
[:span {:class (stl/css :info-content)} (:font-variant-id typography)]]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.font-size")]
[:span (:font-size typography)]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-size")]
[:span {:class (stl/css :info-content)} (:font-size typography)]]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.line-height")]
[:span (:line-height typography)]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.line-height")]
[:span {:class (stl/css :info-content)} (:line-height typography)]]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.letter-spacing")]
[:span (:letter-spacing typography)]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.letter-spacing")]
[:span {:class (stl/css :info-content)} (:letter-spacing typography)]]
[:div.row-flex
[:span.label (tr "workspace.assets.typography.text-transform")]
[:span (:text-transform typography)]]
[:div {:class (stl/css :info-row)}
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.text-transform")]
[:span {:class (stl/css :info-content)} (:text-transform typography)]]
(when-not local?
[:div.row-flex
[:a.go-to-lib-button
{:on-click navigate-to-library}
(tr "workspace.assets.typography.go-to-edit")]])])])))
[:a {:class (stl/css :link-btn)
:on-click navigate-to-library}
(tr "workspace.assets.typography.go-to-edit")])])])))
(mf/defc typography-entry
@ -713,7 +728,7 @@
(fn [event]
(let [enter? (kbd/enter? event)
esc? (kbd/esc? event)
input-node (dom/event->target event)]
input-node (dom/get-target event)]
(when ^boolean enter?
(dom/blur! input-node))
(when ^boolean esc?
@ -733,6 +748,7 @@
#(when-let [node (mf/ref-val name-input-ref)]
(dom/focus! node)
(dom/select-text! node)))))
(if new-css-system
[:*
[:div {:class (stl/css-case :typography-entry true
@ -773,18 +789,18 @@
[:div {:class (stl/css :typography-font)
:title (:name font-data)}
(:name font-data)])])
(when ^boolean on-detach
[:div {:class (stl/css :element-set-actions)}
[:div
{:class (stl/css :element-set-actions-button)
:on-pointer-enter on-pointer-enter
:on-pointer-leave on-pointer-leave
:on-click on-detach}
(if ^boolean hover-detach? i/detach-refactor i/chain)]])]
[:div {:class (stl/css :element-set-actions)}
(when ^boolean on-detach
[:button {:class (stl/css :element-set-actions-button)
:on-click on-detach}
i/detach-refactor])
[:button {:class (stl/css :menu-btn)
:on-click on-open}
i/menu-refactor]]]
[:& typography-advanced-options
{:visible? open? :on-close on-close
{:visible? open?
:on-close on-close
:typography typography
:editable? editable?
:name-input-ref name-input-ref
@ -836,9 +852,9 @@
{:on-click on-close}
i/actions]]]
[:& typography-options {:values typography
:on-change on-change
:show-recent false}]]
[:& text-options {:values typography
:on-change on-change
:show-recent false}]]
[:div.element-set-content.typography-read-only-data
[:div.row-flex.typography-name

View file

@ -13,6 +13,13 @@
height: $s-32;
width: 100%;
border-radius: $br-8;
background-color: var(--assets-item-background-color);
color: var(--assets-item-name-foreground-color-hover);
&:hover,
&:focus-within {
background-color: var(--assets-item-background-color-hover);
color: var(--assets-item-name-foreground-color-hover);
}
.typography-selection-wrapper {
display: grid;
@ -29,6 +36,7 @@
.typography-sample {
@include flexCenter;
min-width: $s-24;
height: $s-32;
color: var(--assets-item-name-foreground-color-hover);
}
.typography-name,
@ -54,8 +62,27 @@
border: $s-1 solid var(--assets-item-border-color);
}
.element-set-actions {
display: flex;
visibility: hidden;
.element-set-actions-button,
.menu-btn {
@extend .button-tertiary;
height: $s-32;
width: $s-28;
svg {
@extend .button-icon;
}
&:active {
background-color: transparent;
}
}
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.element-set-actions {
visibility: visible;
}
}
}
@ -77,11 +104,14 @@
width: $s-24;
height: 100%;
font-size: $fs-16;
color: var(--assets-item-name-foreground-color-hover);
}
.adv-typography-name {
@include removeInputStyle;
color: var(--input-foreground-color);
font-size: $fs-12;
color: var(--input-foreground-color-active);
flex-grow: 1;
padding-left: $s-6;
margin: 0;
}
.action-btn {
@ -93,6 +123,9 @@
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
&:active {
background-color: transparent;
}
}
&:focus-within {
border: $s-1 solid var(--input-border-color-active);
@ -109,9 +142,111 @@
height: 100%;
width: 100%;
background-color: var(--assets-title-background-color);
.typography-info-wrapper {
display: flex;
flex-direction: column;
gap: $s-4;
margin-bottom: $s-12;
.typography-name-wrapper {
@extend .asset-element;
display: grid;
grid-template-columns: $s-24 auto 1fr $s-28;
flex: 1;
height: $s-32;
width: 100%;
padding: 0 0 0 $s-12;
background-color: var(--assets-item-background-color-hover);
margin-bottom: $s-4;
.typography-sample {
@include flexCenter;
min-width: $s-24;
font-size: $fs-16;
height: $s-32;
padding: 0;
color: var(--assets-item-name-foreground-color-hover);
}
.typography-name {
@include titleTipography;
@include textEllipsis;
display: flex;
align-items: center;
justify-content: flex-start;
margin-left: $s-6;
color: var(--assets-item-name-foreground-color-hover);
}
.typography-font {
@include titleTipography;
@include textEllipsis;
margin-left: $s-6;
display: flex;
align-items: center;
justify-content: flex-start;
min-width: 0;
color: var(--assets-item-name-foreground-color);
}
.action-btn {
@extend .button-tertiary;
width: $s-28;
height: $s-32;
svg {
@extend .button-icon;
}
&:active {
background-color: transparent;
}
}
}
.info-row {
display: grid;
grid-template-columns: 50% 50%;
height: $s-32;
--calcualted-width: calc(var(--width) - $s-48);
padding-left: $s-2;
.info-label {
@include titleTipography;
@include textEllipsis;
width: calc(var(--calcualted-width) / 2);
padding-top: $s-8;
color: var(--assets-item-name-foreground-color);
}
.info-content {
@include titleTipography;
@include textEllipsis;
padding-top: $s-8;
width: calc(var(--calcualted-width) / 2);
color: var(--assets-item-name-foreground-color-hover);
}
}
.link-btn {
@include tabTitleTipography;
@extend .button-secondary;
width: 100%;
height: $s-32;
border-radius: $br-8;
&:hover {
background-color: var(--button-secondary-background-color-hover);
color: var(--button-secondary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
text-decoration: none;
svg {
stroke: var(--button-secondary-foreground-color-hover);
}
}
&:focus {
background-color: var(--button-secondary-background-color-focus);
color: var(--button-secondary-foreground-color-focus);
border: $s-1 solid var(--button-secondary-border-color-focus);
svg {
stroke: var(--button-secondary-foreground-color-focus);
}
}
}
}
}
.typography-options {
.text-options {
position: relative;
display: flex;
flex-direction: column;
@ -129,7 +264,7 @@
height: $s-28;
width: $s-28;
svg {
@extend .button-icon;
@extend .button-icon-small;
stroke: var(--icon-foreground);
transform: rotate(90deg);
}
@ -151,13 +286,11 @@
height: $s-32;
.numeric-input {
@extend .input-base;
margin: 0;
padding: 0;
}
span {
@include flexCenter;
svg {
@extend .button-icon;
@extend .button-icon-small;
}
}
}
@ -166,7 +299,7 @@
height: $s-28;
min-width: $s-28;
svg {
@extend .button-icon;
@extend .button-icon-small;
stroke: var(--icon-foreground);
transform: rotate(90deg);
}

View file

@ -61,6 +61,25 @@
gradient-color? (and (not multiple-colors?)
(:gradient color)
(get-in color [:gradient :type]))
editing-text* (mf/use-state false)
editing-text? (deref editing-text*)
on-focus
(mf/use-fn
(mf/deps on-focus)
(fn [event]
(reset! editing-text* true)
(when on-focus
(on-focus event))))
on-blur
(mf/use-fn
(mf/deps on-blur)
(fn [event]
(reset! editing-text* false)
(when on-blur
(on-blur event))))
parse-color
(mf/use-fn
(fn [color]
@ -157,7 +176,6 @@
(when (not= prev-color color)
(modal/update-props! :colorpicker {:data (parse-color color)})))
(if new-css-system
[:div {:class (stl/css-case
:color-data true
@ -166,13 +184,16 @@
:ref dref}
[:span {:class (stl/css :color-info)}
[:span {:class (stl/css-case :color-name-wrapper true
:library-name-wrapper library-color?
:editing editing-text?
:gradient-name-wrapper gradient-color?)}
[:span {:class (stl/css :color-bullet-wrapper)}
[:& cbn/color-bullet {:color (cond-> color
(nil? color-name) (assoc
:id nil
:file-id nil))
:on-click handle-click-color}]]
(nil? color-name) (assoc
:id nil
:file-id nil))
:mini? true
:on-click handle-click-color}]]
(cond
;; Rendering a color with ID
library-color?
@ -212,7 +233,6 @@
(not multiple-colors?)
(not library-color?))
[:div {:class (stl/css :opacity-element-wrapper)}
[:span {:class (stl/css :icon-text)}
"%"]

View file

@ -13,24 +13,24 @@
.color-info {
display: flex;
align-items: center;
gap: $s-1;
gap: $s-2;
border-radius: $s-8;
background-color: var(--input-details-color);
height: $s-32;
width: 100%;
flex-grow: 1;
.color-name-wrapper {
display: flex;
align-items: center;
border-radius: $br-8;
background-color: var(--input-background-color);
@extend .input-element;
flex-grow: 1;
width: 100%;
border-radius: $br-8 0 0 $br-8;
padding: 0;
margin-right: 0;
.color-bullet-wrapper {
@extend .input-element;
background-color: transparent;
height: $s-28;
padding: 0 $s-2 0 $s-8;
border-radius: $br-8 0 0 $br-8;
padding: 0 $s-4 0 $s-8;
background-color: transparent;
&:hover {
background-color: transparent;
}
@ -39,35 +39,67 @@
@include titleTipography;
display: flex;
align-items: center;
height: $s-32;
height: $s-28;
padding-left: $s-6;
border-radius: $br-8;
width: 100%;
flex-grow: 1;
color: var(--input-foreground-color-active);
}
.detach-btn {
@extend .button-tertiary;
height: $s-32;
height: $s-28;
width: $s-28;
border-radius: 0 $br-8 $br-8 0;
display: none;
svg {
@extend .button-icon;
}
}
.color-input-wrapper {
@extend .input-element;
@include titleTipography;
display: flex;
align-items: center;
height: $s-28;
padding: 0 $s-0;
width: 100%;
margin: 0;
flex-grow: 1;
background-color: var(--input-background-color);
color: var(--input-foreground-color);
border-radius: $br-0;
}
&:hover,
&:focus,
&:focus-within {
&:hover {
background-color: var(--input-background-color-hover);
.color-bullet-wrapper,
.color-name,
.detach-btn,
.color-input-wrapper {
background-color: var(--input-background-color-hover);
}
.detach-btn svg {
stroke: var(--input-foreground-color-active);
.detach-btn {
display: flex;
svg {
stroke: var(--input-foreground-color-active);
}
}
&.editing {
background-color: var(--input-background-color-active);
.color-bullet-wrapper,
.color-name,
.detach-btn,
.color-input-wrapper {
background-color: var(--input-background-color-active);
}
}
}
&:focus,
&:focus-within {
background-color: var(--input-background-color-active);
}
&.editing {
background-color: var(--input-background-color-active);
}
}
.gradient-name-wrapper {
@ -75,11 +107,13 @@
border-radius: 0 $br-8 $br-8 0;
}
}
.library-name-wrapper {
border-radius: $br-8;
}
.opacity-element-wrapper {
@extend .input-element;
width: $s-60;
border-radius: 0 $br-8 $br-8 0;
padding-left: $s-8;
.opacity-input {
border-radius: 0 $br-8 $br-8 0;
min-width: $s-28;

View file

@ -18,7 +18,6 @@
@extend .input-element;
width: $s-60;
border-radius: $br-8;
padding: $s-8;
.icon {
@include flexCenter;
height: $s-32;

View file

@ -56,8 +56,7 @@
on-blur
(mf/use-callback
(fn [event]
(let [target (dom/event->target event)
name (str/trim (dom/get-value target))]
(let [name (str/trim (dom/get-target-val event))]
(when-not (str/empty? name)
(st/emit! (dw/rename-page id name)))
(st/emit! (dw/stop-rename-page-item)))))
@ -238,11 +237,12 @@
[:div {:class (dom/classnames (css :sitemap) true)
:style #js {"--height" (str size "px")}}
[:& title-bar {:collapsable? true
:collapsed? (not show-pages?)
:on-collapsed toggle-pages
:title (tr "workspace.sidebar.sitemap")
:class (css :title-spacing-sitemap)}
[:& title-bar {:collapsable? true
:collapsed? (not show-pages?)
:on-collapsed toggle-pages
:clickable-all? true
:title (tr "workspace.sidebar.sitemap")
:class (css :title-spacing-sitemap)}
(if workspace-read-only?
[:div

View file

@ -134,7 +134,6 @@
[:div {:class (dom/classnames (css :text-palette) true)
:style #js {"--height" (str size "px")}}
(when show-arrows?
[:button {:class (dom/classnames (css :left-arrow) true)
:disabled (= offset 0)

View file

@ -6,6 +6,7 @@
(ns app.main.ui.workspace.viewport.pixel-overlay
(:require
[app.common.math :as mth]
[app.main.data.modal :as modal]
[app.main.data.workspace.colors :as dwc]
[app.main.data.workspace.undo :as dwu]
@ -58,8 +59,8 @@
canvas-height (if new-css-system 140 160)
{brx :left bry :top} (dom/get-bounding-rect viewport-node)
x (- (.-clientX event) brx)
y (- (.-clientY event) bry)
x (mth/floor (- (.-clientX event) brx))
y (mth/floor (- (.-clientY event) bry))
zoom-context (mf/ref-val zoom-view-context)