3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-22 19:06:11 +02:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
* 🐛 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
Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/text-Autoheight-refactor.svg
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>
Side by side

Before

Width:  |  Height:  |  Size: 161 B

2
frontend/resources/images/icons/text-auto-height-refactor.svg
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"> <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> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 172 B

After

Width:  |  Height:  |  Size: 209 B

Before After
Before After

2
frontend/resources/images/icons/text-auto-width-refactor.svg
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"> <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> </svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 271 B

Before After
Before After

3
frontend/resources/images/icons/text-autoheight-refactor.svg
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>
Side by side

Before

Width:  |  Height:  |  Size: 161 B

3
frontend/resources/images/icons/text-autowidth-refactor.svg
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>
Side by side

Before

Width:  |  Height:  |  Size: 161 B

20
frontend/resources/styles/common/refactor/basic-rules.scss
View file

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

1
frontend/resources/styles/common/refactor/design-tokens.scss
View file

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

1
frontend/resources/styles/common/refactor/spacing.scss
View file

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

189
frontend/resources/styles/main/layouts/main-layout.scss
View file

@ -353,7 +353,10 @@
color: $df-secondary; color: $df-secondary;
} }
.form-container { .form-container {
width: 800px;
margin: 80px auto auto 120px;
form { form {
width: 468px;
.fields-row { .fields-row {
.custom-input, .custom-input,
.custom-select { .custom-select {
@ -364,6 +367,7 @@
color: $df-primary; color: $df-primary;
font-size: 11px; font-size: 11px;
margin-bottom: 12px; margin-bottom: 12px;
margin-left: -4px;
} }
input, input,
select { select {
@ -411,8 +415,43 @@
border: 1px solid $da-primary; 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 { .links {
margin-top: 12px; 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 // Members section
.dashboard-table { .dashboard-table {
.table-header { .table-header {

2
frontend/resources/styles/main/partials/colorpicker.scss
View file

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

2
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

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

3
frontend/shadow-cljs.edn
View file

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

2
frontend/src/app/main/data/workspace/common.cljs
View file

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

6
frontend/src/app/main/ui/components/color_bullet_new.scss
View file

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

16
frontend/src/app/main/ui/components/color_input.cljs
View file

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

2
frontend/src/app/main/ui/components/editable_select.scss
View file

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

54
frontend/src/app/main/ui/components/radio_buttons.cljs
View file

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

14
frontend/src/app/main/ui/components/radio_buttons.scss
View file

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

2
frontend/src/app/main/ui/components/search_bar.cljs
View file

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

4
frontend/src/app/main/ui/components/select.cljs
View file

@ -23,7 +23,7 @@
[item item item])) [item item item]))
(mf/defc select (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) (let [new-css-system (mf/use-ctx ctx/new-css-system)
label-index (mf/with-memo [options] label-index (mf/with-memo [options]
(into {} (map as-key-value) options)) (into {} (map as-key-value) options))
@ -95,7 +95,7 @@
[:span {:class (stl/css :current-label)} current-label] [:span {:class (stl/css :current-label)} current-label]
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor] [:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
[:& dropdown {:show is-open? :on-close close-dropdown} [:& 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)] (for [[index item] (d/enumerate options)]
(if (= :separator item) (if (= :separator item)
[:li {:class (dom/classnames (stl/css :separator) true) [:li {:class (dom/classnames (stl/css :separator) true)

2
frontend/src/app/main/ui/components/select.scss
View file

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

25
frontend/src/app/main/ui/components/title_bar.cljs
View file

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

44
frontend/src/app/main/ui/components/title_bar.scss
View file

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

2
frontend/src/app/main/ui/dashboard/team.cljs
View file

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

16
frontend/src/app/main/ui/settings/feedback.cljs
View file

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

4
frontend/src/app/main/ui/workspace/libraries.cljs
View file

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

2
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

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

12
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/assets/colors.cljs
View file

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

2
frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
View file

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

1
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
View file

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

1
frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
View file

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

21
frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
View file

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

41
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.cljs
View file

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

2
frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss
View file

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

2
frontend/src/app/main/ui/workspace/sidebar/layers.cljs
View file

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

33
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
View file

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

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
View file

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

8
frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs
View file

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

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.scss
View file

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

34
frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
View file

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

28
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
View file

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

14
frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.scss
View file

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

37
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.scss
View file

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

15
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
View file

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

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.scss
View file

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

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss
View file

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

13
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

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

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss
View file

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

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
View file

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

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
View file

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

7
frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
View file

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

6
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

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

10
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.scss
View file

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

36
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
View file

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

3
frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.scss
View file

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

20
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
View file

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

4
frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
View file

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

71
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
View file

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

9
frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
View file

@ -22,14 +22,7 @@
flex-direction: column; flex-direction: column;
gap: $s-4; gap: $s-4;
.multiple-typography { .multiple-typography {
display: flex; @extend .mixed-bar;
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;
.multiple-text { .multiple-text {
@include titleTipography; @include titleTipography;
flex-grow: 1; flex-grow: 1;

146
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View file

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

147
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View file

@ -13,6 +13,13 @@
height: $s-32; height: $s-32;
width: 100%; width: 100%;
border-radius: $br-8; 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 { .typography-selection-wrapper {
display: grid; display: grid;
@ -29,6 +36,7 @@
.typography-sample { .typography-sample {
@include flexCenter; @include flexCenter;
min-width: $s-24; min-width: $s-24;
height: $s-32;
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
} }
.typography-name, .typography-name,
@ -54,8 +62,27 @@
border: $s-1 solid var(--assets-item-border-color); 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 { &:hover {
background-color: var(--assets-item-background-color-hover); background-color: var(--assets-item-background-color-hover);
.element-set-actions {
visibility: visible;
}
} }
} }
@ -77,11 +104,14 @@
width: $s-24; width: $s-24;
height: 100%; height: 100%;
font-size: $fs-16; font-size: $fs-16;
color: var(--assets-item-name-foreground-color-hover);
} }
.adv-typography-name { .adv-typography-name {
@include removeInputStyle; @include removeInputStyle;
color: var(--input-foreground-color); font-size: $fs-12;
color: var(--input-foreground-color-active);
flex-grow: 1; flex-grow: 1;
padding-left: $s-6;
margin: 0; margin: 0;
} }
.action-btn { .action-btn {
@ -93,6 +123,9 @@
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
&:active {
background-color: transparent;
}
} }
&:focus-within { &:focus-within {
border: $s-1 solid var(--input-border-color-active); border: $s-1 solid var(--input-border-color-active);
@ -109,9 +142,111 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: var(--assets-title-background-color); 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; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -129,7 +264,7 @@
height: $s-28; height: $s-28;
width: $s-28; width: $s-28;
svg { svg {
@extend .button-icon; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -151,13 +286,11 @@
height: $s-32; height: $s-32;
.numeric-input { .numeric-input {
@extend .input-base; @extend .input-base;
margin: 0;
padding: 0;
} }
span { span {
@include flexCenter; @include flexCenter;
svg { svg {
@extend .button-icon; @extend .button-icon-small;
} }
} }
} }
@ -166,7 +299,7 @@
height: $s-28; height: $s-28;
min-width: $s-28; min-width: $s-28;
svg { svg {
@extend .button-icon; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
transform: rotate(90deg); transform: rotate(90deg);
} }

32
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.cljs
View file

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

70
frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
View file

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

1
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
View file

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

14
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View file

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

1
frontend/src/app/main/ui/workspace/text_palette.cljs
View file

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

5
frontend/src/app/main/ui/workspace/viewport/pixel_overlay.cljs
View file

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