mirror of
https://github.com/penpot/penpot.git
synced 2025-03-28 15:41:25 -05:00
🐛 Fix several fronted errors related with new UI (#3691)
* 🐛 Fix title toggle arrow without content * 🐛 Fix export dropdowns * 🐛 Fix colorpicker eyedrop * 🐛 Fix hover state on color row * 🐛 Fix color bullet on color row * 🐛 Fix some css errors in new UI * 🐛 Fix text and typography component * 🐛 Fix some icons * 💄 Update ui in feedback page, webhooks page and access token page
This commit is contained in:
Eva Marco
GitHub
parent
25c60f3e0f
commit
c9ba4aea46
75 changed files with 896 additions and 454 deletions
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 161 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m11.333 12h-9.333m12-8h-12m6.667 4h-6.667"/>
|
||||
<path d="M13.334 12H6m9.334-8H6m4.667 4H6m-4 6V2m0 12h1.334M2 14H.667M2 2h1.334M2 2H.667"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 172 B After Width: | Height: | Size: 209 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="m5.333 8 .863-1.918 1.537-3.415 1.537 3.415m-3.074 0h3.074l.863 1.918m-7.466 6-1.334-1.333s1.334-1.334 1.334-1.334m10.666 2.667 1.334-1.333-1.334-1.334m1.334 1.334h-13.334"/>
|
||||
<path d="M5.334 8l.863-1.918m0 0l1.537-3.415L9.27 6.082m-3.074 0H9.27m0 0L10.133 8m3.533 4.666h-12m12 0v-1.333m0 1.333V14m-12-1.334v-1.333m0 1.333V14"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 302 B After Width: | Height: | Size: 271 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 161 B |
|
|
@ -1,3 +0,0 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M11.333 12H2m12-8H2m6.667 4H2"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 161 B |
|
|
@ -168,14 +168,13 @@
|
|||
@include flexCenter;
|
||||
border-radius: $br-8;
|
||||
color: var(--button-radio-foreground-color-rest);
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
border: $s-1 solid var(--button-radio-background-color-rest);
|
||||
svg,
|
||||
span svg {
|
||||
stroke: var(--button-radio-foreground-color-rest);
|
||||
}
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
color: var(--button-radio-foreground-color-hover);
|
||||
border: $s-1 solid transparent;
|
||||
svg,
|
||||
|
|
@ -288,8 +287,10 @@
|
|||
@include textEllipsis;
|
||||
height: $s-28;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
margin: $s-2 0;
|
||||
padding: 0 0 0 $s-4;
|
||||
padding: 0 0 0 $s-6;
|
||||
border-radius: $br-8;
|
||||
color: var(--input-foreground-color-active);
|
||||
&:focus-within,
|
||||
&:active {
|
||||
|
|
@ -302,18 +303,17 @@
|
|||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
|
||||
.input-label {
|
||||
@include tabTitleTipography;
|
||||
@include flexCenter;
|
||||
min-width: $s-12;
|
||||
width: $s-20;
|
||||
padding-left: $s-8;
|
||||
height: $s-32;
|
||||
margin-right: $s-4;
|
||||
color: var(--input-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -322,15 +322,15 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
padding: 0 $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--input-background-color);
|
||||
border: $s-1 solid var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
span {
|
||||
span,
|
||||
label {
|
||||
@extend .input-label;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--input-foreground-color);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,6 +176,7 @@
|
|||
|
||||
--color-bullet-background-color: var(--white); // We don't want this color to change with palette
|
||||
--color-bullet-border-color: var(--color-background-quaternary);
|
||||
--color-bullet-border-color-selected: var(--color-accent-primary);
|
||||
--palette-handler-background-color: var(--color-background-quaternary);
|
||||
|
||||
--assets-title-background-color: var(--color-background-primary);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
$s-0: 0px;
|
||||
$s-1: 1px;
|
||||
$s-2: math.div(0.25rem, 2);
|
||||
$s-3: calc($s-1 + $s-2);
|
||||
$s-4: var(--s-4);
|
||||
$s-6: calc($s-2 + $s-4);
|
||||
$s-8: calc(var(--s-4) * 2);
|
||||
|
|
|
|||
|
|
@ -353,7 +353,10 @@
|
|||
color: $df-secondary;
|
||||
}
|
||||
.form-container {
|
||||
width: 800px;
|
||||
margin: 80px auto auto 120px;
|
||||
form {
|
||||
width: 468px;
|
||||
.fields-row {
|
||||
.custom-input,
|
||||
.custom-select {
|
||||
|
|
@ -364,6 +367,7 @@
|
|||
color: $df-primary;
|
||||
font-size: 11px;
|
||||
margin-bottom: 12px;
|
||||
margin-left: -4px;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
|
|
@ -411,8 +415,43 @@
|
|||
border: 1px solid $da-primary;
|
||||
}
|
||||
}
|
||||
textarea {
|
||||
border-radius: 8px;
|
||||
padding: 12px 14px;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: 1px solid $da-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.field-title {
|
||||
color: $df-primary;
|
||||
}
|
||||
.field-title:not(:first-child) {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
.field-text {
|
||||
color: $df-secondary;
|
||||
}
|
||||
button,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
hr {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.links {
|
||||
margin-top: 12px;
|
||||
|
|
@ -420,6 +459,156 @@
|
|||
}
|
||||
}
|
||||
|
||||
//Access tokens
|
||||
.dashboard-access-tokens {
|
||||
width: 800px;
|
||||
margin-left: 120px;
|
||||
margin-top: 80px;
|
||||
.access-tokens-hero-container {
|
||||
background-color: transparent;
|
||||
.access-tokens-hero {
|
||||
width: 468px;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.desc {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
h2 {
|
||||
color: $df-primary;
|
||||
font-size: 24px;
|
||||
font-weight: regular;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
color: $df-secondary;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-table {
|
||||
width: 800px;
|
||||
.table-rows {
|
||||
padding-top: 0;
|
||||
.table-row {
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
height: fit-content;
|
||||
.name {
|
||||
color: $df-primary;
|
||||
max-width: 480px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
.expiration-date {
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.access-tokens-empty {
|
||||
width: 468px;
|
||||
border: 1px solid $db-cuaternary;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Team webhooks
|
||||
&.dashboard-team-webhooks {
|
||||
width: 800px;
|
||||
margin-left: 120px;
|
||||
margin-top: 80px;
|
||||
border: none;
|
||||
align-items: flex-start;
|
||||
.webhooks-hero-container {
|
||||
width: 468px;
|
||||
background-color: transparent;
|
||||
.webhooks-hero {
|
||||
width: 468px;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
background-color: transparent;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
.desc {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
h2 {
|
||||
color: $df-primary;
|
||||
font-size: 24px;
|
||||
font-weight: regular;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
p {
|
||||
color: $df-secondary;
|
||||
margin-bottom: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
background-color: $db-tertiary;
|
||||
color: $df-primary;
|
||||
&:hover {
|
||||
color: $da-primary;
|
||||
background-color: $db-cuaternary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-table {
|
||||
width: 800px;
|
||||
.table-rows {
|
||||
padding-top: 0;
|
||||
.table-row {
|
||||
font-size: 14px;
|
||||
min-height: 40px;
|
||||
height: fit-content;
|
||||
.name {
|
||||
color: $df-primary;
|
||||
max-width: 480px;
|
||||
}
|
||||
.expiration-date {
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.webhooks-empty {
|
||||
width: 468px;
|
||||
border: 1px solid $db-cuaternary;
|
||||
border-radius: 8px;
|
||||
margin-top: 32px;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
color: $df-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Members section
|
||||
.dashboard-table {
|
||||
.table-header {
|
||||
|
|
|
|||
|
|
@ -273,7 +273,7 @@
|
|||
|
||||
.slider-selector.hue {
|
||||
grid-area: "hue";
|
||||
align-self: end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.slider-selector.opacity {
|
||||
|
|
|
|||
|
|
@ -1924,7 +1924,7 @@
|
|||
|
||||
&.single-button {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
justify-content: flex-end;
|
||||
height: 1.5rem;
|
||||
|
||||
.btn-wrapper {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,8 @@
|
|||
:output-dir "resources/public/js/"
|
||||
:asset-path "/js"
|
||||
:devtools {:browser-inject :main
|
||||
:watch-dir "resources/public"}
|
||||
:watch-dir "resources/public"
|
||||
:reload-strategy :full}
|
||||
:build-options {:manifest-name "manifest.json"}
|
||||
|
||||
:modules
|
||||
|
|
|
|||
|
|
@ -169,7 +169,6 @@
|
|||
(ptk/reify ::hide-toolbar
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [_ (prn "hide toolbar")])
|
||||
(assoc-in state [:workspace-local :hide-toolbar] true))))
|
||||
|
||||
(defn show-toolbar
|
||||
|
|
@ -177,5 +176,4 @@
|
|||
(ptk/reify ::show-toolbar
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [_ (prn "show toolbar")])
|
||||
(assoc-in state [:workspace-local :hide-toolbar] false))))
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@
|
|||
&.mini {
|
||||
width: var(--bullet-size, $s-16);
|
||||
height: var(--bullet-size, $s-16);
|
||||
min-width: var(--bullet-size, $s-16);
|
||||
min-height: var(--bullet-size, $s-16);
|
||||
margin-top: 0;
|
||||
border: 1px solid var(--color-bullet-border-color);
|
||||
}
|
||||
|
|
@ -29,7 +31,6 @@
|
|||
&.is-not-library-color {
|
||||
overflow: hidden;
|
||||
border-radius: $br-8;
|
||||
|
||||
& .color-bullet-wrapper {
|
||||
clip-path: none;
|
||||
}
|
||||
|
|
@ -60,6 +61,9 @@
|
|||
height: 100%;
|
||||
background-color: var(--color-bullet-background-color);
|
||||
}
|
||||
&:hover {
|
||||
border: $s-2 solid var(--color-bullet-border-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
.color-text {
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
dirty-ref (mf/use-ref false)
|
||||
|
||||
parse-value
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ref)
|
||||
(fn []
|
||||
(let [input-node (mf/ref-val ref)]
|
||||
|
|
@ -58,14 +58,14 @@
|
|||
nil)))))
|
||||
|
||||
update-input
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ref)
|
||||
(fn [new-value]
|
||||
(let [input-node (mf/ref-val ref)]
|
||||
(dom/set-value! input-node (uc/remove-hash new-value)))))
|
||||
|
||||
apply-value
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps on-change update-input)
|
||||
(fn [new-value]
|
||||
(mf/set-ref-val! dirty-ref false)
|
||||
|
|
@ -75,7 +75,7 @@
|
|||
(update-input new-value))))
|
||||
|
||||
handle-key-down
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps apply-value update-input)
|
||||
(fn [event]
|
||||
(mf/set-ref-val! dirty-ref true)
|
||||
|
|
@ -93,7 +93,7 @@
|
|||
(dom/blur! input-node)))))
|
||||
|
||||
handle-blur
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps parse-value apply-value update-input)
|
||||
(fn [_]
|
||||
(let [new-value (parse-value)]
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
(update-input value)))))
|
||||
|
||||
on-click
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)]
|
||||
(when (some? ref)
|
||||
|
|
@ -113,12 +113,12 @@
|
|||
(dom/blur! current)))))))
|
||||
|
||||
on-mouse-up
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(dom/prevent-default event)))
|
||||
|
||||
handle-focus
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [target (dom/get-target event)]
|
||||
(when on-focus
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [context (mf/use-ctx context)
|
||||
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
value (unchecked-get props "value")
|
||||
|
|
@ -28,18 +27,18 @@
|
|||
title (unchecked-get props "title")
|
||||
unique-key (unchecked-get props "unique-key")
|
||||
icon-class (unchecked-get props "icon-class")
|
||||
type (or (unchecked-get props "type") "radio")
|
||||
|
||||
on-change (unchecked-get context "on-change")
|
||||
selected (unchecked-get context "selected")
|
||||
name (unchecked-get context "name")
|
||||
encode-fn (unchecked-get context "encode-fn")
|
||||
|
||||
encode-fn (unchecked-get context "encode-fn")
|
||||
checked? (= selected value)]
|
||||
|
||||
[:label {:for id
|
||||
:title title
|
||||
:key unique-key
|
||||
:tabIndex "0"
|
||||
:class (stl/css-case
|
||||
:radio-icon true
|
||||
:checked checked?
|
||||
|
|
@ -53,48 +52,7 @@
|
|||
|
||||
[:input {:id id
|
||||
:on-change on-change
|
||||
:type "radio"
|
||||
:name name
|
||||
:disabled disabled
|
||||
:value (encode-fn value)
|
||||
:checked checked?}]]))
|
||||
|
||||
(mf/defc nilable-option
|
||||
{::mf/wrap-props false}
|
||||
[props]
|
||||
(let [context (mf/use-ctx context)
|
||||
icon (unchecked-get props "icon")
|
||||
id (unchecked-get props "id")
|
||||
value (unchecked-get props "value")
|
||||
title (unchecked-get props "title")
|
||||
disabled (unchecked-get props "disabled")
|
||||
unique-key (unchecked-get props "unique-key")
|
||||
icon-class (unchecked-get props "icon-class")
|
||||
|
||||
on-change (unchecked-get context "on-change")
|
||||
selected (unchecked-get context "selected")
|
||||
name (unchecked-get context "name")
|
||||
|
||||
encode-fn (unchecked-get context "encode-fn")
|
||||
checked? (= selected value)]
|
||||
|
||||
[:label {:for id
|
||||
:key unique-key
|
||||
:title title
|
||||
:class (stl/css-case
|
||||
:radio-icon true
|
||||
:disabled disabled
|
||||
:checked checked?)}
|
||||
|
||||
(if (some? icon)
|
||||
[:span {:class (when icon-class icon-class)}
|
||||
icon]
|
||||
[:span {:class (stl/css :title-name)}
|
||||
(encode-fn value)])
|
||||
|
||||
[:input {:id id
|
||||
:on-change on-change
|
||||
:type "checkbox"
|
||||
:type type
|
||||
:name name
|
||||
:disabled disabled
|
||||
:value (encode-fn value)
|
||||
|
|
@ -128,9 +86,11 @@
|
|||
(mf/use-fn
|
||||
(mf/deps on-change)
|
||||
(fn [event]
|
||||
(let [value (dom/get-target-val event)]
|
||||
(let [input-node (dom/get-target event)
|
||||
value (dom/get-target-val event)]
|
||||
(when (fn? on-change)
|
||||
(on-change (decode-fn value) event)))))
|
||||
(do (on-change (decode-fn value) event)
|
||||
(dom/blur! input-node))))))
|
||||
|
||||
context-value
|
||||
(mf/with-memo [selected on-change' name encode-fn decode-fn]
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@
|
|||
}
|
||||
.radio-icon {
|
||||
@extend .button-radio;
|
||||
height: $s-28;
|
||||
height: $s-32;
|
||||
flex-grow: 1;
|
||||
border-radius: $s-6;
|
||||
border: solid $s-1 transparent;
|
||||
border-radius: $s-8;
|
||||
box-sizing: content-box;
|
||||
border: none;
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -30,8 +30,15 @@
|
|||
@include tabTitleTipography;
|
||||
color: var(--radio-btn-foreground-color);
|
||||
}
|
||||
&:hover {
|
||||
border: none;
|
||||
svg {
|
||||
color: var(--radio-btn-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
|
||||
&.checked {
|
||||
border: none;
|
||||
background-color: var(--radio-btn-background-color-selected);
|
||||
svg {
|
||||
stroke: var(--radio-btn-foreground-color-selected);
|
||||
|
|
@ -43,6 +50,7 @@
|
|||
|
||||
&.disabled {
|
||||
cursor: default;
|
||||
background-color: transparent;
|
||||
svg {
|
||||
stroke: var(--button-foreground-color-disabled);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
(fn [event]
|
||||
(let [enter? (kbd/enter? event)
|
||||
esc? (kbd/esc? event)
|
||||
node (dom/event->target event)]
|
||||
node (dom/get-target event)]
|
||||
(when ^boolean enter? (dom/blur! node))
|
||||
(when ^boolean esc? (dom/blur! node)))))]
|
||||
[:span {:class (dom/classnames (css :search-box) true
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
[item item item]))
|
||||
|
||||
(mf/defc select
|
||||
[{:keys [default-value options class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
|
||||
[{:keys [default-value options class dropdown-class is-open? on-change on-pointer-enter-option on-pointer-leave-option disabled]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
label-index (mf/with-memo [options]
|
||||
(into {} (map as-key-value) options))
|
||||
|
|
@ -95,7 +95,7 @@
|
|||
[:span {:class (stl/css :current-label)} current-label]
|
||||
[:span {:class (stl/css :dropdown-button)} i/arrow-refactor]
|
||||
[:& dropdown {:show is-open? :on-close close-dropdown}
|
||||
[:ul {:class (stl/css :custom-select-dropdown)}
|
||||
[:ul {:class (dm/str dropdown-class " " (stl/css :custom-select-dropdown))}
|
||||
(for [[index item] (d/enumerate options)]
|
||||
(if (= :separator item)
|
||||
[:li {:class (dom/classnames (stl/css :separator) true)
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
.dropdown-button {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,16 +13,27 @@
|
|||
|
||||
(mf/defc title-bar
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}]
|
||||
[{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class clickable-all?]}]
|
||||
(let [klass (dm/str (stl/css :title-bar) " " class)]
|
||||
[:div {:class klass}
|
||||
(if collapsable?
|
||||
[:button {:class (stl/css :toggle-btn) :on-click on-collapsed}
|
||||
[:span {:class (stl/css-case
|
||||
:collased-icon true
|
||||
:rotated collapsed?)}
|
||||
i/arrow-refactor]
|
||||
[:div {:class (stl/css :title)} title]]
|
||||
[:div {:class (stl/css :title-wrapper)}
|
||||
(if clickable-all?
|
||||
[:button {:class (stl/css :toggle-btn)
|
||||
:on-click on-collapsed}
|
||||
[:span {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed?)}
|
||||
i/arrow-refactor]
|
||||
[:div {:class (stl/css :title)} title]]
|
||||
|
||||
[:*
|
||||
[:button {:class (stl/css-case
|
||||
:collapsabled-icon true
|
||||
:rotated collapsed?)
|
||||
:on-click on-collapsed}
|
||||
i/arrow-refactor]
|
||||
[:div {:class (stl/css :title)} title]])]
|
||||
[:div {:class (stl/css :title-only)} title])
|
||||
children
|
||||
(when (some? on-btn-click)
|
||||
|
|
|
|||
|
|
@ -23,26 +23,57 @@
|
|||
flex-grow: 1;
|
||||
height: 100%;
|
||||
min-height: $s-32;
|
||||
margin-left: $s-8;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
.title-only {
|
||||
margin-left: $s-8;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
@include buttonStyle;
|
||||
.title-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
color: var(--title-foreground-color);
|
||||
stroke: var(--title-foreground-color);
|
||||
.collased-icon {
|
||||
.toggle-btn {
|
||||
@include buttonStyle;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
padding: 0;
|
||||
color: var(--title-foreground-color);
|
||||
stroke: var(--title-foreground-color);
|
||||
.collapsabled-icon {
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
&.rotated svg {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
color: var(--title-foreground-color-hover);
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
.title {
|
||||
color: var(--title-foreground-color-hover);
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
.collapsabled-icon svg {
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
.collapsabled-icon {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
height: $s-24;
|
||||
border-radius: $br-8;
|
||||
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
transform: rotate(90deg);
|
||||
|
|
@ -56,10 +87,9 @@
|
|||
color: var(--title-foreground-color-hover);
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
.title {
|
||||
color: var(--title-foreground-color-hover);
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
.collased-icon svg {
|
||||
.collapsabled-icon svg {
|
||||
stroke: var(--title-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -950,7 +950,7 @@
|
|||
[:*
|
||||
[:& header {:team team :section :dashboard-team-webhooks}]
|
||||
[:section.dashboard-container.dashboard-team-webhooks
|
||||
[:div
|
||||
[:*
|
||||
[:& webhooks-hero]
|
||||
(if (empty? webhooks)
|
||||
[:div.webhooks-empty
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@
|
|||
:form form}
|
||||
|
||||
;; --- Feedback section
|
||||
[:h2 (tr "feedback.title")]
|
||||
[:p (tr "feedback.subtitle")]
|
||||
[:h2.field-title (tr "feedback.title")]
|
||||
[:p.field-text (tr "feedback.subtitle")]
|
||||
|
||||
[:div.fields-row
|
||||
[:& fm/input {:label (tr "feedback.subject")
|
||||
|
|
@ -82,22 +82,20 @@
|
|||
|
||||
[:hr]
|
||||
|
||||
[:h2 (tr "feedback.discourse-title")]
|
||||
[:p (tr "feedback.discourse-subtitle1")]
|
||||
[:h2.field-title (tr "feedback.discourse-title")]
|
||||
[:p.field-text (tr "feedback.discourse-subtitle1")]
|
||||
|
||||
[:a.btn-secondary.btn-large
|
||||
{:href "https://community.penpot.app" :target "_blank"}
|
||||
(tr "feedback.discourse-go-to")]
|
||||
[:hr]
|
||||
|
||||
[:h2 (tr "feedback.twitter-title")]
|
||||
[:p (tr "feedback.twitter-subtitle1")]
|
||||
[:h2.field-title (tr "feedback.twitter-title")]
|
||||
[:p.field-text (tr "feedback.twitter-subtitle1")]
|
||||
|
||||
[:a.btn-secondary.btn-large
|
||||
{:href "https://twitter.com/penpotapp" :target "_blank"}
|
||||
(tr "feedback.twitter-go-to")]
|
||||
|
||||
]))
|
||||
(tr "feedback.twitter-go-to")]]))
|
||||
|
||||
(mf/defc feedback-page
|
||||
[]
|
||||
|
|
|
|||
|
|
@ -206,7 +206,7 @@
|
|||
(mf/use-fn
|
||||
(mf/deps file-id)
|
||||
(fn [event]
|
||||
(let [input-node (dom/event->target event)
|
||||
(let [input-node (dom/get-target event)
|
||||
publish-library #(st/emit! (dwl/set-file-shared file-id true))
|
||||
cancel-publish #(st/emit! (modal/show :libraries-dialog {}))]
|
||||
(if empty-library?
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
(fn [event]
|
||||
(let [enter? (kbd/enter? event)
|
||||
esc? (kbd/esc? event)
|
||||
input-node (dom/event->target event)]
|
||||
input-node (dom/get-target event)]
|
||||
(when ^boolean enter?
|
||||
(dom/blur! input-node))
|
||||
(when ^boolean esc?
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@
|
|||
(fn [event]
|
||||
(let [enter? (kbd/enter? event)
|
||||
esc? (kbd/esc? event)
|
||||
node (dom/event->target event)]
|
||||
node (dom/get-target event)]
|
||||
|
||||
(when ^boolean enter? (dom/blur! node))
|
||||
(when ^boolean esc? (dom/blur! node)))))
|
||||
|
|
|
|||
|
|
@ -105,18 +105,16 @@
|
|||
}
|
||||
}
|
||||
.libraries-wrapper {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
scrollbar-gutter: stable;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: $s-8;
|
||||
height: calc(100% - $s-80);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
scrollbar-gutter: stable;
|
||||
overflow-y: overlay;
|
||||
height: calc(100vh - $s-180);
|
||||
}
|
||||
.assets-header {
|
||||
padding: $s-8 $s-12 $s-12 $s-12;
|
||||
padding: $s-8 0 $s-12 $s-12;
|
||||
.search-wrapper {
|
||||
display: flex;
|
||||
gap: $s-4;
|
||||
|
|
|
|||
|
|
@ -113,8 +113,7 @@
|
|||
(mf/use-fn
|
||||
(mf/deps rename-color)
|
||||
(fn [event]
|
||||
(let [target (dom/event->target event)
|
||||
name (dom/get-value target)]
|
||||
(let [name (dom/get-target-val event)]
|
||||
(rename-color name)
|
||||
(st/emit! dwl/clear-color-for-rename)
|
||||
(reset! editing* false))))
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
.colors-group {
|
||||
margin-top: $s-4;
|
||||
.asset-list {
|
||||
padding: 0 0 0 $s-12;
|
||||
padding: 0 0 0 $s-4;
|
||||
.asset-list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -146,6 +146,7 @@
|
|||
[:div {:class (dom/classnames (css :asset-section) true)}
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not open?)
|
||||
:clickable-all? true
|
||||
:on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?)))
|
||||
:class (css :title-spacing)
|
||||
:title (mf/html [:span {:class (dom/classnames (css :title-name) true)}
|
||||
|
|
|
|||
|
|
@ -600,10 +600,10 @@
|
|||
:name "listing-style"}
|
||||
[:& radio-button {:icon i/view-as-list-refactor
|
||||
:value "list"
|
||||
:id :list}]
|
||||
:id "opt-list"}]
|
||||
[:& radio-button {:icon i/flex-grid-refactor
|
||||
:value "grid"
|
||||
:id :grid}]]])
|
||||
:id "opt-grid"}]]])
|
||||
|
||||
(when (and components-v2 (not read-only?) local?)
|
||||
[:div {:on-click add-component
|
||||
|
|
|
|||
|
|
@ -205,14 +205,14 @@
|
|||
.listing-option-btn {
|
||||
@include flexCenter;
|
||||
cursor: pointer;
|
||||
background-color: var(--button-radio-background-color-rest);
|
||||
|
||||
&.first {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@
|
|||
[:div {:class (dom/classnames (css :library-title) true)}
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not open?)
|
||||
:clickable-all? true
|
||||
:on-collapsed toggle-open
|
||||
:title (if local?
|
||||
(mf/html [:div {:class (dom/classnames (css :special-title) true)} (tr "workspace.assets.local-library")])
|
||||
|
|
|
|||
|
|
@ -49,16 +49,17 @@
|
|||
(if new-css-system
|
||||
[:div {:class (dom/classnames (css :group-title) true)
|
||||
:on-context-menu on-context-menu}
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not group-open?)
|
||||
:on-collapsed on-fold-group
|
||||
:title (mf/html [:* (when-not (empty? other-path)
|
||||
[:span {:class (dom/classnames (css :pre-path) true)
|
||||
:title (when truncated path)}
|
||||
other-path "\u00A0\u2022\u00A0"])
|
||||
[:span {:class (dom/classnames (css :path) true)
|
||||
:title (when truncated path)}
|
||||
last-path]])}]
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not group-open?)
|
||||
:clickable-all? true
|
||||
:on-collapsed on-fold-group
|
||||
:title (mf/html [:* (when-not (empty? other-path)
|
||||
[:span {:class (dom/classnames (css :pre-path) true)
|
||||
:title (when truncated path)}
|
||||
other-path "\u00A0\u2022\u00A0"])
|
||||
[:span {:class (dom/classnames (css :path) true)
|
||||
:title (when truncated path)}
|
||||
last-path]])}]
|
||||
[:& cmm/assets-context-menu
|
||||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
|
|
|
|||
|
|
@ -7,12 +7,14 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.group-title {
|
||||
padding-left: $s-16;
|
||||
padding-left: $s-4;
|
||||
.pre-path {
|
||||
margin-left: $s-2;
|
||||
text-transform: initial;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
.path {
|
||||
margin-left: $s-2;
|
||||
text-transform: initial;
|
||||
color: var(--title-foreground-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
;; Copyright (c) KALEIDOS INC
|
||||
|
||||
(ns app.main.ui.workspace.sidebar.assets.typographies
|
||||
(:require-macros [app.main.style :refer [css]])
|
||||
(:require-macros [app.main.style :as stl])
|
||||
(:require
|
||||
[app.common.data :as d]
|
||||
[app.common.data.macros :as dm]
|
||||
|
|
@ -101,7 +101,7 @@
|
|||
(partial on-asset-click typography-id apply-typography))]
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (dom/classnames (css :typography-item) true)
|
||||
[:div {:class (stl/css :typography-item)
|
||||
:ref item-ref
|
||||
:draggable (and (not read-only?) (not open?))
|
||||
:on-drag-start on-typography-drag-start
|
||||
|
|
@ -109,6 +109,7 @@
|
|||
:on-drag-leave on-drag-leave
|
||||
:on-drag-over dom/prevent-default
|
||||
:on-drop on-drop}
|
||||
|
||||
[:& typography-entry
|
||||
{:typography typography
|
||||
:local? local?
|
||||
|
|
@ -121,9 +122,8 @@
|
|||
:focus-name? rename?
|
||||
:external-open* open*
|
||||
:file-id file-id}]
|
||||
|
||||
(when ^boolean dragging?
|
||||
[:div {:class (dom/classnames (css :dragging) true)}])]
|
||||
[:div {:class (stl/css :dragging)}])]
|
||||
|
||||
[:div.typography-container {:ref item-ref
|
||||
:draggable (and (not read-only?) (not open?))
|
||||
|
|
@ -184,7 +184,7 @@
|
|||
(cmm/on-drop-asset-group event dragging* prefix selected-paths selected-full move-typography)))]
|
||||
|
||||
(if ^boolean new-css-system
|
||||
[:div {:class (dom/classnames (css :typographies-group) true)
|
||||
[:div {:class (stl/css :typographies-group)
|
||||
:on-drag-enter on-drag-enter
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drag-over dom/prevent-default
|
||||
|
|
@ -199,19 +199,19 @@
|
|||
(when group-open?
|
||||
[:*
|
||||
(let [typographies (get groups "" [])]
|
||||
[:div {:class (dom/classnames (css :assets-list) true)
|
||||
[:div {:class (stl/css :assets-list)
|
||||
:on-drag-enter on-drag-enter
|
||||
:on-drag-leave on-drag-leave
|
||||
:on-drag-over dom/prevent-default
|
||||
:on-drop on-drop}
|
||||
|
||||
(when ^boolean dragging?
|
||||
[:div {:class (css :grid-placeholder)} "\u00A0"])
|
||||
[:div {:class (stl/css :grid-placeholder)} "\u00A0"])
|
||||
|
||||
(when (and
|
||||
(empty? typographies)
|
||||
(some? groups))
|
||||
[:div {:class (css :drop-space)}])
|
||||
[:div {:class (stl/css :drop-space)}])
|
||||
(for [{:keys [id] :as typography} typographies]
|
||||
[:& typography-item {:typography typography
|
||||
:key (dm/str "typography-" id)
|
||||
|
|
@ -411,6 +411,7 @@
|
|||
(modal/show! :name-group-dialog {:path path
|
||||
:last-path last-path
|
||||
:accept rename-group})))
|
||||
|
||||
on-ungroup
|
||||
(mf/use-fn
|
||||
(mf/deps typographies)
|
||||
|
|
@ -433,7 +434,7 @@
|
|||
(fn [id event]
|
||||
(dom/prevent-default event)
|
||||
(let [pos (dom/get-client-position event)]
|
||||
(when (and local? (not read-only?))
|
||||
(when (not read-only?)
|
||||
(when-not (contains? selected id)
|
||||
(on-clear-selection))
|
||||
(swap! state assoc :id id)
|
||||
|
|
@ -467,7 +468,7 @@
|
|||
editing-id (if new-css-system
|
||||
(:edit-typography local-data)
|
||||
(or (:rename-typography local-data)
|
||||
(:edit-typography local-data)))
|
||||
(:edit-typography local-data)))
|
||||
|
||||
renaming-id (:rename-typography local-data)
|
||||
|
||||
|
|
@ -484,7 +485,8 @@
|
|||
(when (:edit-typography local-data)
|
||||
(st/emit! #(update % :workspace-global dissoc :edit-typography)))))
|
||||
|
||||
[:& cmm/asset-section {:file-id file-id
|
||||
[:*
|
||||
[:& cmm/asset-section {:file-id file-id
|
||||
:title (tr "workspace.assets.typography")
|
||||
:section :typographies
|
||||
:assets-count (count typographies)
|
||||
|
|
@ -493,8 +495,8 @@
|
|||
(when local?
|
||||
[:& cmm/asset-section-block {:role :title-button}
|
||||
(when-not read-only?
|
||||
[:button {:class (dom/classnames (css :assets-btn) true)
|
||||
:on-click add-typography}
|
||||
[:button {:class (stl/css :assets-btn)
|
||||
:on-click add-typography}
|
||||
i/add-refactor])])
|
||||
|
||||
(when local?
|
||||
|
|
@ -524,7 +526,7 @@
|
|||
:on-context-menu on-context-menu
|
||||
:selected-full selected-full}]
|
||||
|
||||
(when local?
|
||||
(if local?
|
||||
[:& cmm/assets-context-menu
|
||||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
|
|
@ -548,11 +550,18 @@
|
|||
:id "assets-group-typography"
|
||||
:option-handler on-group})]
|
||||
|
||||
|
||||
[(when-not (or multi-typographies? multi-assets?)
|
||||
[(tr "workspace.assets.rename") handle-rename-typography-clicked])
|
||||
(when-not (or multi-typographies? multi-assets?)
|
||||
[(tr "workspace.assets.edit") handle-edit-typography-clicked])
|
||||
[(tr "workspace.assets.delete") handle-delete-typography]
|
||||
(when-not multi-assets?
|
||||
[(tr "workspace.assets.group") on-group])])}])]]))
|
||||
[(tr "workspace.assets.group") on-group])])}]
|
||||
|
||||
(when new-css-system
|
||||
[:& cmm/assets-context-menu
|
||||
{:on-close on-close-menu
|
||||
:state @menu-state
|
||||
:options [{:option-name "show info"
|
||||
:id "assets-rename-typography"
|
||||
:option-handler handle-edit-typography-clicked}]}]))]]]))
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
.typographies-group {
|
||||
.assets-list {
|
||||
padding: 0 0 0 $s-12;
|
||||
padding: 0 0 0 $s-4;
|
||||
.drop-space {
|
||||
height: $s-12;
|
||||
border-radius: $br-8;
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@
|
|||
handle-key-down
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(when-let [node (dom/event->target event)]
|
||||
(when-let [node (dom/get-target event)]
|
||||
(when (kbd/enter? event)
|
||||
(dom/blur! node))
|
||||
(when (kbd/esc? event)
|
||||
|
|
|
|||
|
|
@ -35,40 +35,34 @@
|
|||
|
||||
state* (mf/use-state {:show-content true
|
||||
:show-more-options false})
|
||||
|
||||
state (deref state*)
|
||||
|
||||
open? (:show-content state)
|
||||
more-options? (:show-more-options state)
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* update :show-content not))
|
||||
|
||||
toggle-content
|
||||
(mf/use-fn #(swap! state* update :show-content not))
|
||||
|
||||
toggle-more-options
|
||||
(mf/use-fn #(swap! state* update :show-more-options not))
|
||||
|
||||
toggle-more-options (mf/use-fn #(swap! state* update :show-more-options not))
|
||||
|
||||
change!
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [update-fn]
|
||||
(st/emit! (dch/update-shapes ids update-fn))))
|
||||
|
||||
handle-add
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps change!)
|
||||
(fn []
|
||||
(change! #(assoc % :blur (create-blur)))))
|
||||
|
||||
handle-delete
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps change!)
|
||||
(fn []
|
||||
(change! #(dissoc % :blur))))
|
||||
|
||||
handle-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps change!)
|
||||
(fn [value]
|
||||
(change! #(cond-> %
|
||||
|
|
@ -79,7 +73,7 @@
|
|||
(assoc-in [:blur :value] value)))))
|
||||
|
||||
handle-toggle-visibility
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps change!)
|
||||
(fn []
|
||||
(change! #(update-in % [:blur :hidden] not))))]
|
||||
|
|
@ -87,19 +81,17 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-value?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (case type
|
||||
:multiple (tr "workspace.options.blur-options.title.multiple")
|
||||
:group (tr "workspace.options.blur-options.title.group")
|
||||
(tr "workspace.options.blur-options.title"))
|
||||
:class (stl/css :title-spacing-blur)}
|
||||
|
||||
:class (stl/css-case :title-spacing-blur (not has-value?))}
|
||||
(when-not has-value?
|
||||
[:button {:class (stl/css :add-blur)
|
||||
:on-click handle-add} i/add-refactor])]]
|
||||
|
||||
(when (and open? has-value?)
|
||||
[:div {:class (stl/css :element-set-content)}
|
||||
[:div {:class (stl/css :first-row)}
|
||||
|
|
@ -120,11 +112,13 @@
|
|||
:on-click handle-delete} i/remove-refactor]]]
|
||||
(when more-options?
|
||||
[:div {:class (stl/css :second-row)}
|
||||
[:span {:class (stl/css :label)}
|
||||
[:label {:class (stl/css :label)
|
||||
:for "blur-input-sidebar"}
|
||||
(tr "inspect.attributes.blur.value")]
|
||||
[:> numeric-input*
|
||||
{:className (stl/css :numeric-input)
|
||||
:placeholder "--"
|
||||
:id "blur-input-sidebar"
|
||||
:min "0"
|
||||
:on-change handle-change
|
||||
:value (:value blur)}]])])]
|
||||
|
|
@ -140,7 +134,8 @@
|
|||
|
||||
[:div.element-set-title-actions
|
||||
(when (and has-value? (not multiple?))
|
||||
[:div.add-page {:on-click handle-toggle-visibility} (if (:hidden blur) i/eye-closed i/eye)])
|
||||
[:div.add-page {:on-click handle-toggle-visibility}
|
||||
(if (:hidden blur) i/eye-closed i/eye)])
|
||||
|
||||
(if has-value?
|
||||
[:div.add-page {:on-click handle-delete} i/minus]
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-blur {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-blur {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
@ -43,10 +46,10 @@
|
|||
@extend .button-icon;
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--button-secondary-background-color-active);
|
||||
color: var(--button-secondary-foreground-color-active);
|
||||
background-color: var(--button-tertiary-background-color-hover);
|
||||
color: var(--button-tertiary-foreground-color-active);
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-active);
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -77,9 +80,11 @@
|
|||
}
|
||||
.second-row {
|
||||
@extend .input-element;
|
||||
gap: $s-4;
|
||||
width: $s-92;
|
||||
padding-left: $s-8;
|
||||
.label {
|
||||
padding-left: $s-8;
|
||||
width: $s-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -101,22 +101,22 @@
|
|||
:value "union"
|
||||
:disabled disabled-bool-btns
|
||||
:title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")")
|
||||
:id :union}]
|
||||
:id "bool-opt-union"}]
|
||||
[:& radio-button {:icon i/boolean-difference-refactor
|
||||
:value "difference"
|
||||
:disabled disabled-bool-btns
|
||||
:title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")")
|
||||
:id :difference}]
|
||||
:id "bool-opt-differente"}]
|
||||
[:& radio-button {:icon i/boolean-intersection-refactor
|
||||
:value "intersection"
|
||||
:disabled disabled-bool-btns
|
||||
:title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")")
|
||||
:id :intersection}]
|
||||
:id "bool-opt-intersection"}]
|
||||
[:& radio-button {:icon i/boolean-exclude-refactor
|
||||
:value "exclude"
|
||||
:disabled disabled-bool-btns
|
||||
:title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")")
|
||||
:id :exclude}]]]
|
||||
:id "bool-opt-exclude"}]]]
|
||||
|
||||
[:div {:class (stl/css :bool-group)}
|
||||
[:button
|
||||
|
|
|
|||
|
|
@ -161,6 +161,8 @@
|
|||
state* (mf/use-state true)
|
||||
open? (deref state*)
|
||||
|
||||
has-colors? (or (some? (seq colors)) (some? (seq library-colors)))
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
|
||||
expand-lib-color (mf/use-state false)
|
||||
|
|
@ -215,11 +217,11 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-colors?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (tr "workspace.options.selection-color")
|
||||
:class (stl/css :title-spacing-selected-colors)}]]
|
||||
:class (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
|
||||
|
||||
(when open?
|
||||
[:div {:class (stl/css :element-content)}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-selected-colors {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-fill {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -13,14 +13,14 @@
|
|||
.constraints-widget {
|
||||
background-color: var(--constraint-widget-background-color);
|
||||
display: grid;
|
||||
grid-template-columns: $s-24 $s-72 $s-24;
|
||||
grid-template-rows: $s-24 $s-72 $s-24;
|
||||
grid-template-columns: $s-24 $s-60 $s-24;
|
||||
grid-template-rows: $s-24 $s-60 $s-24;
|
||||
grid-template-areas:
|
||||
"top top top"
|
||||
"left center right"
|
||||
"bottom bottom bottom";
|
||||
height: $s-120;
|
||||
width: $s-120;
|
||||
height: $s-108;
|
||||
width: $s-108;
|
||||
border-radius: $br-8;
|
||||
.constraints-top,
|
||||
.constraints-left,
|
||||
|
|
@ -37,8 +37,8 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
.resalted-area {
|
||||
width: $s-40;
|
||||
height: $s-4;
|
||||
width: $s-32;
|
||||
height: $s-3;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--button-constraint-background-color-rest);
|
||||
padding: 0;
|
||||
|
|
@ -58,11 +58,11 @@
|
|||
.constraints-left {
|
||||
grid-area: left;
|
||||
.constraint-btn-rotated {
|
||||
height: $s-72;
|
||||
height: $s-60;
|
||||
width: $s-24;
|
||||
.resalted-area {
|
||||
height: $s-40;
|
||||
width: $s-4;
|
||||
height: $s-32;
|
||||
width: $s-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -72,20 +72,20 @@
|
|||
background-color: var(--constraint-center-area-background-color);
|
||||
border-radius: $br-8;
|
||||
.constraint-btn {
|
||||
width: $s-72;
|
||||
width: $s-60;
|
||||
height: $s-24;
|
||||
.resalted-area {
|
||||
width: $s-40;
|
||||
height: $s-4;
|
||||
width: $s-32;
|
||||
height: $s-3;
|
||||
}
|
||||
}
|
||||
.constraint-btn-special {
|
||||
position: absolute;
|
||||
height: $s-72;
|
||||
height: $s-60;
|
||||
width: $s-24;
|
||||
.resalted-area {
|
||||
height: $s-40;
|
||||
width: $s-4;
|
||||
height: $s-32;
|
||||
width: $s-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -95,8 +95,8 @@
|
|||
height: $s-72;
|
||||
width: $s-24;
|
||||
.resalted-area {
|
||||
height: $s-40;
|
||||
width: $s-4;
|
||||
height: $s-32;
|
||||
width: $s-3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
[{:keys [ids type values page-id file-id] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
exports (:exports values [])
|
||||
has-exports? (or (= :multiple exports) (some? (seq exports)))
|
||||
|
||||
comp-state* (mf/use-state true)
|
||||
open? (deref comp-state*)
|
||||
|
|
@ -52,7 +53,7 @@
|
|||
(str suffix))))
|
||||
|
||||
scale-enabled?
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [export]
|
||||
(#{:png :jpeg} (:type export))))
|
||||
|
||||
|
|
@ -94,7 +95,7 @@
|
|||
|
||||
;; TODO: maybe move to specific events for avoid to have this logic here?
|
||||
add-export
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn []
|
||||
(let [xspec {:type :png :suffix "" :scale 1}]
|
||||
|
|
@ -103,7 +104,7 @@
|
|||
(assoc shape :exports (into [xspec] (:exports shape)))))))))
|
||||
|
||||
delete-export
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [position]
|
||||
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
|
||||
|
|
@ -114,7 +115,7 @@
|
|||
(st/emit! (dch/update-shapes ids remove)))))
|
||||
|
||||
on-scale-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index event]
|
||||
(let [scale (if new-css-system
|
||||
|
|
@ -127,7 +128,7 @@
|
|||
(assoc-in shape [:exports index :scale] scale)))))))
|
||||
|
||||
on-suffix-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [event]
|
||||
(let [value (dom/get-target-val event)
|
||||
|
|
@ -139,7 +140,7 @@
|
|||
(assoc-in shape [:exports index :suffix] value)))))))
|
||||
|
||||
on-type-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index event]
|
||||
(let [type (if new-css-system
|
||||
|
|
@ -152,14 +153,14 @@
|
|||
(assoc-in shape [:exports index :type] type)))))))
|
||||
|
||||
on-remove-all
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn []
|
||||
(st/emit! (dch/update-shapes ids
|
||||
(fn [shape]
|
||||
(assoc shape :exports []))))))
|
||||
manage-key-down
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(fn [event]
|
||||
(let [esc? (kbd/esc? event)]
|
||||
(when esc?
|
||||
|
|
@ -181,11 +182,11 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-exports?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
|
||||
:class (stl/css :title-spacing-export)}
|
||||
:class (stl/css-case :title-spacing-export (not has-exports?))}
|
||||
[:button {:class (stl/css :add-export)
|
||||
:on-click add-export} i/add-refactor]]]
|
||||
(when open?
|
||||
|
|
@ -210,15 +211,20 @@
|
|||
[:& select
|
||||
{:default-value (d/name (:type export))
|
||||
:options format-options
|
||||
:dropdown-class (stl/css :dropdown-upwards)
|
||||
:on-change (partial on-type-change index)}]]
|
||||
(when (scale-enabled? export)
|
||||
[:div {:class (stl/css :size-select)}
|
||||
[:& select
|
||||
{:default-value (str (:scale export))
|
||||
:options size-options
|
||||
:dropdown-class (stl/css :dropdown-upwards)
|
||||
:on-change (partial on-scale-change index)}]])
|
||||
[:div {:class (stl/css :suffix-input)}
|
||||
[:label {:class (stl/css :suffix-input)
|
||||
:for "suffix-export-input"}
|
||||
[:input {:class (stl/css :type-input)
|
||||
:id "suffix-export-input"
|
||||
:type "text"
|
||||
:value (:suffix export)
|
||||
:placeholder (tr "workspace.options.export.suffix")
|
||||
:data-value index
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-export {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-export {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
@ -54,15 +57,24 @@
|
|||
.format-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
width: $s-80;
|
||||
top: unset;
|
||||
}
|
||||
}
|
||||
.size-select {
|
||||
width: $s-60;
|
||||
padding: 0;
|
||||
.dropdown-upwards {
|
||||
bottom: $s-36;
|
||||
top: unset;
|
||||
width: $s-80;
|
||||
}
|
||||
}
|
||||
.suffix-input {
|
||||
@extend .input-element;
|
||||
min-width: $s-92;
|
||||
padding: 0 $s-8;
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,34 +50,39 @@
|
|||
:group (tr "workspace.options.group-fill")
|
||||
(tr "workspace.options.fill"))
|
||||
|
||||
state* (mf/use-state true)
|
||||
;; Excluding nil values
|
||||
values (d/without-nils values)
|
||||
fills (:fills values)
|
||||
has-fills? (or (= :multiple fills) (some? (seq fills)))
|
||||
|
||||
|
||||
state* (mf/use-state has-fills?)
|
||||
open? (deref state*)
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
|
||||
;; Excluding nil values
|
||||
values (d/without-nils values)
|
||||
|
||||
|
||||
hide-fill-on-export? (:hide-fill-on-export values false)
|
||||
|
||||
checkbox-ref (mf/use-ref)
|
||||
|
||||
on-add
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [_]
|
||||
(st/emit! (dc/add-fill ids {:color default-color
|
||||
:opacity 1}))))
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(fn [color]
|
||||
(st/emit! (dc/change-fill ids color index)))))
|
||||
|
||||
on-reorder
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [new-index]
|
||||
(fn [index]
|
||||
|
|
@ -94,7 +99,7 @@
|
|||
:opacity 1})))
|
||||
|
||||
on-detach
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(fn [color]
|
||||
|
|
@ -103,7 +108,7 @@
|
|||
(st/emit! (dc/change-fill ids color index))))))
|
||||
|
||||
on-change-show-fill-on-export
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [event]
|
||||
(let [value (-> event dom/get-target dom/checked?)]
|
||||
|
|
@ -130,20 +135,20 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-fills?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title label
|
||||
:class (stl/css :title-spacing-fill)}
|
||||
:class (stl/css-case :title-spacing-fill (not has-fills?))}
|
||||
|
||||
(when (and (not disable-remove?) (not (= :multiple (:fills values))))
|
||||
(when (and (not disable-remove?) (not (= :multiple fills)))
|
||||
[:button {:class (stl/css :add-fill)
|
||||
:on-click on-add} i/add-refactor])]]
|
||||
|
||||
(when open?
|
||||
[:div {:class (stl/css :element-content)}
|
||||
(cond
|
||||
(= :multiple (:fills values))
|
||||
(= :multiple fills)
|
||||
[:div {:class (stl/css :element-set-options-group)}
|
||||
[:div {:class (stl/css :group-label)}
|
||||
(tr "settings.multiple")]
|
||||
|
|
@ -151,7 +156,7 @@
|
|||
:class (stl/css :remove-btn)}
|
||||
i/remove-refactor]]
|
||||
|
||||
(seq (:fills values))
|
||||
(seq fills)
|
||||
[:& h/sortable-container {}
|
||||
(for [[index value] (d/enumerate (:fills values []))]
|
||||
[:& color-row {:color {:color (:fill-color value)
|
||||
|
|
@ -190,20 +195,20 @@
|
|||
[:div.element-set
|
||||
[:div.element-set-title
|
||||
[:span label]
|
||||
(when (and (not disable-remove?) (not (= :multiple (:fills values))))
|
||||
(when (and (not disable-remove?) (not (= :multiple fills)))
|
||||
[:div.add-page {:on-click on-add} i/close])]
|
||||
|
||||
[:div.element-set-content
|
||||
|
||||
(cond
|
||||
(= :multiple (:fills values))
|
||||
(= :multiple fills)
|
||||
[:div.element-set-options-group
|
||||
[:div.element-set-label (tr "settings.multiple")]
|
||||
[:div.element-set-actions
|
||||
[:div.element-set-actions-button {:on-click on-remove-all}
|
||||
i/minus]]]
|
||||
|
||||
(seq (:fills values))
|
||||
(seq fills)
|
||||
[:& h/sortable-container {}
|
||||
(for [[index value] (d/enumerate (:fills values []))]
|
||||
[:& color-row {:color {:color (:fill-color value)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-fill {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-fill {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -397,27 +397,30 @@
|
|||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
state* (mf/use-state true)
|
||||
open? (deref state*)
|
||||
frame-grids (:grids shape)
|
||||
has-frame-grids? (or (= :multiple frame-grids) (some? (seq frame-grids)))
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
id (:id shape)
|
||||
id (:id shape)
|
||||
saved-grids (mf/deref workspace-saved-grids)
|
||||
default-grid-params (mf/use-memo (mf/deps saved-grids) #(merge dw/default-grid-params saved-grids))
|
||||
handle-create-grid (mf/use-fn (mf/deps id) #(st/emit! (dw/add-frame-grid id)))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-frame-grids?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:class (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
|
||||
:title (tr "workspace.options.grid.grid-title")}
|
||||
|
||||
[:button {:on-click handle-create-grid
|
||||
:class (stl/css :add-grid)}
|
||||
i/add-refactor]]
|
||||
|
||||
(when (and open? (seq (:grids shape)))
|
||||
(when (and open? (seq frame-grids))
|
||||
[:div {:class (stl/css :element-set-content)}
|
||||
(for [[index grid] (map-indexed vector (:grids shape))]
|
||||
(for [[index grid] (map-indexed vector frame-grids)]
|
||||
[:& grid-options {:key (str id "-" index)
|
||||
:shape-id id
|
||||
:grid grid
|
||||
|
|
@ -432,9 +435,9 @@
|
|||
[:span (tr "workspace.options.grid.grid-title")]
|
||||
[:div.add-page {:on-click handle-create-grid} i/close]]
|
||||
|
||||
(when (seq (:grids shape))
|
||||
(when (seq frame-grids)
|
||||
[:div.element-set-content
|
||||
(for [[index grid] (map-indexed vector (:grids shape))]
|
||||
(for [[index grid] (map-indexed vector frame-grids)]
|
||||
[:& grid-options {:key (str id "-" index)
|
||||
:shape-id id
|
||||
:grid grid
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.element-set {
|
||||
.title-spacing-board-grid {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-grid {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
@ -174,7 +177,6 @@
|
|||
.height {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
.icon-text {
|
||||
padding-top: $s-1;
|
||||
}
|
||||
|
|
@ -183,7 +185,6 @@
|
|||
.margin {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
.icon {
|
||||
&.rotated svg {
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -159,6 +159,8 @@
|
|||
:options options
|
||||
:on-change handle-change-blend-mode
|
||||
:is-open? option-highlighted?
|
||||
:class (stl/css-case :hidden-select (or hidden?
|
||||
blocked?))
|
||||
:on-pointer-enter-option handle-blend-mode-enter
|
||||
:on-pointer-leave-option handle-blend-mode-leave}]]
|
||||
[:div {:class (stl/css :input)
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
.input {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
.actions {
|
||||
display: flex;
|
||||
|
|
@ -37,7 +36,7 @@
|
|||
}
|
||||
|
||||
&.hidden {
|
||||
.select {
|
||||
.hidden-select {
|
||||
background-color: transparent;
|
||||
border: $s-1 solid var(--input-border-color-disabled);
|
||||
color: var(--input-foreground-color-disabled);
|
||||
|
|
|
|||
|
|
@ -901,19 +901,19 @@
|
|||
(mf/defc grid-track-info
|
||||
[{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track]}]
|
||||
(let [drop-track
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps type reorder-track index)
|
||||
(fn [drop-position data]
|
||||
(reorder-track type (:index data) (if (= :top drop-position) (dec index) index))))
|
||||
|
||||
pointer-enter
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps type hover-track index)
|
||||
(fn []
|
||||
(hover-track type index true)))
|
||||
|
||||
pointer-leave
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps type hover-track index)
|
||||
(fn []
|
||||
(hover-track type index false)))
|
||||
|
|
@ -1004,6 +1004,7 @@
|
|||
|
||||
;; Display
|
||||
layout-type (:layout values)
|
||||
has-layout? (some? layout-type)
|
||||
|
||||
state* (mf/use-state (if layout-type
|
||||
true
|
||||
|
|
@ -1217,11 +1218,11 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-layout?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title "Layout"
|
||||
:class (stl/css :title-spacing-layout)}
|
||||
:class (stl/css-case :title-spacing-layout (not has-layout?))}
|
||||
(if (and (not multiple) (:layout values))
|
||||
[:div {:class (stl/css :title-actions)}
|
||||
(when (features/active-feature? :grid-layout)
|
||||
|
|
@ -1243,7 +1244,7 @@
|
|||
:on-click on-set-layout}
|
||||
i/add-refactor]])]]
|
||||
|
||||
(when (and open? (:layout values))
|
||||
(when (and open? has-layout?)
|
||||
(when (not= :multiple layout-type)
|
||||
(case layout-type
|
||||
:flex
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-layout {
|
||||
margin: 0;
|
||||
padding-left: $s-12;
|
||||
}
|
||||
|
||||
.title-actions {
|
||||
|
|
@ -50,8 +50,7 @@
|
|||
stroke: var(--icon-foreground);
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--button-tertiary-background-color-active);
|
||||
color: var(--button-tertiary-foreground-color-active);
|
||||
background-color: var(--button-tertiary-background-color-hover);
|
||||
svg {
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
|
|
@ -72,7 +71,6 @@
|
|||
.column-gap {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
&.disabled {
|
||||
@extend .disabled-input;
|
||||
}
|
||||
|
|
@ -80,7 +78,6 @@
|
|||
.row-gap {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
&.disabled {
|
||||
@extend .disabled-input;
|
||||
}
|
||||
|
|
@ -98,7 +95,6 @@
|
|||
.padding-simple {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
.paddings-multiple {
|
||||
|
|
@ -108,7 +104,6 @@
|
|||
.padding-multiple {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -387,6 +387,7 @@
|
|||
state* (mf/use-state true)
|
||||
open? (deref state*)
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
has-content? (or is-layout-child? is-flex-parent? is-grid-parent? is-layout-container?)
|
||||
|
||||
;; Align self
|
||||
|
||||
|
|
@ -486,7 +487,7 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-content?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (cond
|
||||
|
|
@ -501,7 +502,8 @@
|
|||
|
||||
:else
|
||||
"Layout element")
|
||||
:class (stl/css :title-spacing-layout-element)}
|
||||
:class (stl/css-case :title-spacing-layout-element true
|
||||
:title-spacing-empty (not has-content?))}
|
||||
|
||||
(when is-flex-parent?
|
||||
[:div {:class (stl/css :position-options)}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,9 @@
|
|||
width: $s-140;
|
||||
}
|
||||
}
|
||||
.title-spacing-empty {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
}
|
||||
.flex-element-menu {
|
||||
display: flex;
|
||||
|
|
@ -54,7 +57,6 @@
|
|||
.z-index-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-124;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
.second-row {
|
||||
|
|
@ -90,7 +92,6 @@
|
|||
.horizontal-margin {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
.margin-multiple {
|
||||
|
|
@ -103,7 +104,6 @@
|
|||
.right-margin {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -124,7 +124,6 @@
|
|||
.layout-item-max-h {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
.icon-text {
|
||||
justify-content: flex-start;
|
||||
width: $s-80;
|
||||
|
|
|
|||
|
|
@ -386,10 +386,10 @@
|
|||
:name "frame-otientation"}
|
||||
[:& radio-button {:icon i/size-vertical-refactor
|
||||
:value "vert"
|
||||
:id :vert}]
|
||||
:id "size-vertical"}]
|
||||
[:& radio-button {:icon i/size-horizontal-refactor
|
||||
:value "horiz"
|
||||
:id :horiz}]]])
|
||||
:id "size-horizontal"}]]])
|
||||
(when (options :size)
|
||||
[:div {:class (stl/css :size)}
|
||||
[:div {:class (stl/css-case :width true
|
||||
|
|
|
|||
|
|
@ -101,8 +101,7 @@
|
|||
.width {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
y .icon-text {
|
||||
.icon-text {
|
||||
padding-top: $s-1;
|
||||
}
|
||||
&.disabled {
|
||||
|
|
@ -128,7 +127,6 @@
|
|||
.y-position {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
.icon-text {
|
||||
padding-top: $s-1;
|
||||
}
|
||||
|
|
@ -145,7 +143,6 @@
|
|||
.rotation {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
.icon-text {
|
||||
padding-top: $s-1;
|
||||
}
|
||||
|
|
@ -160,7 +157,6 @@
|
|||
.radius-1 {
|
||||
@extend .input-element;
|
||||
width: $s-108;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
.radius-4 {
|
||||
display: grid;
|
||||
|
|
@ -169,7 +165,6 @@
|
|||
.small-input {
|
||||
@extend .input-element;
|
||||
width: $s-52;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -350,7 +350,7 @@
|
|||
|
||||
shadows (:shadow values [])
|
||||
open-state-ref (mf/with-memo [] (l/atom {}))
|
||||
|
||||
has-shadows? (or (= :multiple shadows) (some? (seq shadows)))
|
||||
|
||||
state* (mf/use-state {:show-content true
|
||||
:disable-drag false})
|
||||
|
|
@ -386,14 +386,14 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-shadows?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (case type
|
||||
:multiple (tr "workspace.options.shadow-options.title.multiple")
|
||||
:group (tr "workspace.options.shadow-options.title.group")
|
||||
(tr "workspace.options.shadow-options.title"))
|
||||
:class (stl/css :title-spacing-shadow)}
|
||||
:class (stl/css-case :title-spacing-shadow (not has-shadows?))}
|
||||
|
||||
(when-not (= :multiple shadows)
|
||||
[:button {:class (stl/css :add-shadow)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-shadow {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-shadow {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
@ -64,10 +67,10 @@
|
|||
@extend .button-icon;
|
||||
}
|
||||
&.selected {
|
||||
background-color: var(--button-secondary-background-color-active);
|
||||
color: var(--button-secondary-foreground-color-active);
|
||||
background-color: var(--button-tertiary-background-color-hover);
|
||||
color: var(--button-tertiary-foreground-color-active);
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-active);
|
||||
stroke: var(--button-tertiary-foreground-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -111,7 +114,6 @@
|
|||
@extend .input-element;
|
||||
width: $s-60;
|
||||
min-width: $s-60;
|
||||
padding: 0 0 0 $s-8;
|
||||
input {
|
||||
width: $s-32;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,38 +48,42 @@
|
|||
open? (deref state*)
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
strokes (:strokes values)
|
||||
has-strokes? (or (= :multiple strokes) (some? (seq strokes)))
|
||||
|
||||
handle-change-stroke-color
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(fn [color]
|
||||
(st/emit! (dc/change-stroke ids color index)))))
|
||||
|
||||
on-color-change-refactor
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index color]
|
||||
(st/emit! (dc/change-stroke ids color index))))
|
||||
|
||||
handle-remove
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(fn []
|
||||
(st/emit! (dc/remove-stroke ids index)))))
|
||||
on-remove-refactor
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(st/emit! (dc/remove-stroke ids index))))
|
||||
|
||||
handle-remove-all
|
||||
(fn [_]
|
||||
(st/emit! (dc/remove-all-strokes ids)))
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [_]
|
||||
(st/emit! (dc/remove-all-strokes ids))))
|
||||
|
||||
handle-detach
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index]
|
||||
(fn [color]
|
||||
|
|
@ -88,7 +92,7 @@
|
|||
(st/emit! (dc/change-stroke ids color index))))))
|
||||
|
||||
on-color-detach-refactor
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index color]
|
||||
(let [color (-> color
|
||||
|
|
@ -96,7 +100,7 @@
|
|||
(st/emit! (dc/change-stroke ids color index)))))
|
||||
|
||||
handle-reorder
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [new-index]
|
||||
(fn [index]
|
||||
|
|
@ -111,7 +115,7 @@
|
|||
(st/emit! (dc/change-stroke ids {:stroke-style value} index)))))
|
||||
|
||||
on-stroke-style-change-refactor
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [index value]
|
||||
(st/emit! (dc/change-stroke ids {:stroke-style value} index))))
|
||||
|
|
@ -202,25 +206,25 @@
|
|||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-strokes?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title label
|
||||
:class (stl/css :title-spacing-fill)}
|
||||
:class (stl/css-case :title-spacing-stroke (not has-strokes?))}
|
||||
|
||||
[:button {:class (stl/css :add-stroke)
|
||||
:on-click on-add-stroke} i/add-refactor]]]
|
||||
(when open?
|
||||
[:div {:class (stl/css :element-content)}
|
||||
(cond
|
||||
(= :multiple (:strokes values))
|
||||
(= :multiple strokes)
|
||||
[:div {:class (stl/css :element-set-options-group)}
|
||||
[:div {:class (stl/css :group-label)}
|
||||
(tr "settings.multiple")]
|
||||
[:button {:on-click handle-remove-all
|
||||
:class (stl/css :remove-btn)}
|
||||
i/remove-refactor]]
|
||||
(seq (:strokes values))
|
||||
(seq strokes)
|
||||
[:& h/sortable-container {}
|
||||
(for [[index value] (d/enumerate (:strokes values []))]
|
||||
[:& stroke-row {:key (dm/str "stroke-" index)
|
||||
|
|
@ -254,7 +258,7 @@
|
|||
|
||||
[:div.element-set-content
|
||||
(cond
|
||||
(= :multiple (:strokes values))
|
||||
(= :multiple strokes)
|
||||
[:div.element-set-options-group
|
||||
[:div.element-set-label (tr "settings.multiple")]
|
||||
[:div.element-set-actions
|
||||
|
|
@ -262,7 +266,7 @@
|
|||
i/minus]]]
|
||||
|
||||
|
||||
(seq (:strokes values))
|
||||
(seq strokes)
|
||||
[:& h/sortable-container {}
|
||||
(for [[index value] (d/enumerate (:strokes values []))]
|
||||
[:& stroke-row {:key (dm/str "stroke-" index)
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
|
||||
.element-set {
|
||||
.element-title {
|
||||
.title-spacing-stroke {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.add-stroke {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -21,13 +21,13 @@
|
|||
(mf/defc attribute-value [{:keys [attr value on-change on-delete] :as props}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
handle-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps attr on-change)
|
||||
(fn [event]
|
||||
(on-change attr (dom/get-target-val event))))
|
||||
|
||||
handle-delete
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps attr on-delete)
|
||||
(fn []
|
||||
(on-delete attr)))
|
||||
|
|
@ -86,10 +86,12 @@
|
|||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
state* (mf/use-state true)
|
||||
open? (deref state*)
|
||||
attrs (:svg-attrs values)
|
||||
has-attributes? (or (= :multiple attrs) (some? (seq attrs)))
|
||||
|
||||
toggle-content (mf/use-fn #(swap! state* not))
|
||||
handle-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [attr value]
|
||||
(let [update-fn
|
||||
|
|
@ -97,7 +99,7 @@
|
|||
(st/emit! (dch/update-shapes ids update-fn)))))
|
||||
|
||||
handle-delete
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [attr]
|
||||
(let [update-fn
|
||||
|
|
@ -111,17 +113,17 @@
|
|||
shape))]
|
||||
(st/emit! (dch/update-shapes ids update-fn)))))]
|
||||
|
||||
(when-not (empty? (:svg-attrs values))
|
||||
(when-not (empty? attrs)
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :element-set)}
|
||||
[:div {:class (stl/css :element-set-title)}
|
||||
[:& title-bar {:collapsable? true
|
||||
[:& title-bar {:collapsable? has-attributes?
|
||||
:collapsed? (not open?)
|
||||
:on-collapsed toggle-content
|
||||
:title (tr "workspace.sidebar.options.svg-attrs.title")
|
||||
:class (stl/css :title-spacing-svg-attrs)}]]
|
||||
:class (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
|
||||
[:div {:class (stl/css :element-set-content)}
|
||||
(for [[attr-key attr-value] (:svg-attrs values)]
|
||||
(for [[attr-key attr-value] attrs]
|
||||
[:& attribute-value {:key attr-key
|
||||
:attr [attr-key]
|
||||
:value attr-value
|
||||
|
|
@ -132,7 +134,7 @@
|
|||
[:div.element-set-title
|
||||
[:span (tr "workspace.sidebar.options.svg-attrs.title")]]
|
||||
|
||||
(for [[attr-key attr-value] (:svg-attrs values)]
|
||||
(for [[attr-key attr-value] attrs]
|
||||
[:& attribute-value {:key attr-key
|
||||
:attr [attr-key]
|
||||
:value attr-value
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.element-set {
|
||||
.title-spacing-svg-attrs {
|
||||
padding-left: $s-12;
|
||||
}
|
||||
.element-set-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -33,7 +36,6 @@
|
|||
.attr-input {
|
||||
@extend .input-element;
|
||||
width: $s-124;
|
||||
padding-left: $s-8;
|
||||
}
|
||||
.attr-actions {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -17,11 +17,11 @@
|
|||
[app.main.data.workspace.undo :as dwu]
|
||||
[app.main.refs :as refs]
|
||||
[app.main.store :as st]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons nilable-option]]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry typography-options]]
|
||||
[app.main.ui.workspace.sidebar.options.menus.typography :refer [typography-entry text-options]]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.timers :as ts]
|
||||
|
|
@ -113,14 +113,16 @@
|
|||
[:& radio-buttons {:selected direction
|
||||
:on-change handle-change
|
||||
:name "text-direction-options"}
|
||||
[:& nilable-option {:value "ltr"
|
||||
[:& radio-button {:value "ltr"
|
||||
:type "checkbox"
|
||||
:id "ltr-text-direction"
|
||||
:title (tr "workspace.options.text-options.direction-ltr")
|
||||
:icon i/text-ltr-refactor}]
|
||||
[:& nilable-option {:value "rtl"
|
||||
:id "rtl-text-direction"
|
||||
:title (tr "workspace.options.text-options.direction-rtl")
|
||||
:icon i/text-rtl-refactor}]]]
|
||||
[:& radio-button {:value "rtl"
|
||||
:type "checkbox"
|
||||
:id "rtl-text-direction"
|
||||
:title (tr "workspace.options.text-options.direction-rtl")
|
||||
:icon i/text-rtl-refactor}]]]
|
||||
;; --- Align
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom-left
|
||||
|
|
@ -195,21 +197,20 @@
|
|||
|
||||
handle-change-grow
|
||||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(mf/deps ids new-css-system)
|
||||
(fn [value]
|
||||
(let [uid (js/Symbol)
|
||||
|
||||
grow-type (if new-css-system
|
||||
(keyword value)
|
||||
(-> (dom/get-current-target value)
|
||||
(dom/get-data "value")
|
||||
(keyword)))]
|
||||
(st/emit!
|
||||
(dwu/start-undo-transaction uid)
|
||||
(dch/update-shapes ids #(assoc % :grow-type grow-type)))
|
||||
(let [uid (js/Symbol)
|
||||
grow-type (if new-css-system
|
||||
(keyword value)
|
||||
(-> (dom/get-current-target value)
|
||||
(dom/get-data "value")
|
||||
(keyword)))]
|
||||
(st/emit!
|
||||
(dwu/start-undo-transaction uid)
|
||||
(dch/update-shapes ids #(assoc % :grow-type grow-type)))
|
||||
;; We asynchronously commit so every sychronous event is resolved first and inside the transaction
|
||||
(ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
|
||||
(when (some? on-blur) (on-blur))))]
|
||||
(ts/schedule #(st/emit! (dwu/commit-undo-transaction uid))))
|
||||
(when (some? on-blur) (on-blur))))]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :grow-options)}
|
||||
|
|
@ -271,14 +272,16 @@
|
|||
[:& radio-buttons {:selected text-decoration
|
||||
:on-change handle-change
|
||||
:name "text-decoration-options"}
|
||||
[:& nilable-option {:value "underline"
|
||||
:id "underline-text-decoration"
|
||||
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
|
||||
:icon i/text-underlined-refactor}]
|
||||
[:& nilable-option {:value "line-through"
|
||||
:id "line-through-text-decoration"
|
||||
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
|
||||
:icon i/text-stroked-refactor}]]]
|
||||
[:& radio-button {:value "underline"
|
||||
:type "checkbox"
|
||||
:id "underline-text-decoration"
|
||||
:title (tr "workspace.options.text-options.underline" (sc/get-tooltip :underline))
|
||||
:icon i/text-underlined-refactor}]
|
||||
[:& radio-button {:value "line-through"
|
||||
:type "checkbox"
|
||||
:id "line-through-text-decoration"
|
||||
:title (tr "workspace.options.text-options.strikethrough" (sc/get-tooltip :line-through))
|
||||
:icon i/text-stroked-refactor}]]]
|
||||
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
|
|
@ -335,7 +338,7 @@
|
|||
typography-file (:typography-ref-file values)
|
||||
|
||||
emit-update!
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps values)
|
||||
(fn [ids attrs]
|
||||
(st/emit! (dwt/save-font (-> (merge txt/default-text-attrs values attrs)
|
||||
|
|
@ -343,7 +346,7 @@
|
|||
(dwt/update-all-attrs ids attrs))))
|
||||
|
||||
on-change
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps ids emit-update!)
|
||||
(fn [attrs]
|
||||
(emit-update! ids attrs)))
|
||||
|
|
@ -381,14 +384,14 @@
|
|||
:typography-ref-file file-id})))
|
||||
|
||||
handle-detach-typography
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps on-change)
|
||||
(fn []
|
||||
(on-change {:typography-ref-file nil
|
||||
:typography-ref-id nil})))
|
||||
|
||||
handle-change-typography
|
||||
(mf/use-callback
|
||||
(mf/use-fn
|
||||
(mf/deps typography file-id)
|
||||
(fn [changes]
|
||||
(st/emit! (dwl/update-typography (merge typography changes) file-id))))
|
||||
|
|
@ -440,7 +443,7 @@
|
|||
i/detach-refactor]]
|
||||
|
||||
:else
|
||||
[:> typography-options opts])
|
||||
[:> text-options opts])
|
||||
|
||||
[:div {:class (stl/css :text-align-options)}
|
||||
[:> text-align-options opts]
|
||||
|
|
@ -477,7 +480,7 @@
|
|||
:title (tr "workspace.libraries.text.multiple-typography-tooltip")} i/unchain]]
|
||||
|
||||
:else
|
||||
[:> typography-options opts])
|
||||
[:> text-options opts])
|
||||
|
||||
[:div.element-set-content
|
||||
|
||||
|
|
|
|||
|
|
@ -22,14 +22,7 @@
|
|||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
.multiple-typography {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 $s-8;
|
||||
gap: $s-4;
|
||||
border-radius: $s-8;
|
||||
background-color: var(--input-background-color);
|
||||
height: $s-32;
|
||||
flex-grow: 1;
|
||||
@extend .mixed-bar;
|
||||
.multiple-text {
|
||||
@include titleTipography;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
[app.main.store :as st]
|
||||
[app.main.ui.components.editable-select :refer [editable-select]]
|
||||
[app.main.ui.components.numeric-input :refer [numeric-input*]]
|
||||
[app.main.ui.components.radio-buttons :refer [nilable-option radio-buttons]]
|
||||
[app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
|
||||
[app.main.ui.components.search-bar :refer [search-bar]]
|
||||
[app.main.ui.components.select :refer [select]]
|
||||
[app.main.ui.context :as ctx]
|
||||
|
|
@ -184,6 +184,7 @@
|
|||
#(let [offset (.getOffsetForRow ^js inst #js {:alignment "center" :index index})]
|
||||
(.scrollToPosition ^js inst offset)))))
|
||||
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :font-selector)}
|
||||
[:div {:class (stl/css :font-selector-dropdown)}
|
||||
|
|
@ -249,6 +250,7 @@
|
|||
:rowCount (count fonts)
|
||||
:rowHeight 32
|
||||
:rowRenderer render}])))]]]])))
|
||||
|
||||
(defn row-renderer
|
||||
[fonts selected on-select props]
|
||||
(let [index (unchecked-get props "index")
|
||||
|
|
@ -303,7 +305,9 @@
|
|||
(mf/use-fn
|
||||
(mf/deps font on-change)
|
||||
(fn [event]
|
||||
(let [new-variant-id (dom/get-target-val event)
|
||||
(let [new-variant-id (if new-css-system
|
||||
event
|
||||
(dom/get-target-val event))
|
||||
variant (d/seek #(= new-variant-id (:id %)) (:variants font))]
|
||||
(on-change {:font-id (:id font)
|
||||
:font-family (:family font)
|
||||
|
|
@ -330,6 +334,7 @@
|
|||
(on-blur))
|
||||
(when (mf/ref-val last-font)
|
||||
(st/emit! (fts/add-recent-font (mf/ref-val last-font))))))]
|
||||
|
||||
(if new-css-system
|
||||
[:*
|
||||
(when @open-selector?
|
||||
|
|
@ -339,9 +344,8 @@
|
|||
:on-select on-font-select
|
||||
:show-recent show-recent}])
|
||||
|
||||
[:div
|
||||
{:class (stl/css :font-option)
|
||||
:on-click #(reset! open-selector? true)}
|
||||
[:div {:class (stl/css :font-option)
|
||||
:on-click #(reset! open-selector? true)}
|
||||
(cond
|
||||
(= :multiple font-id)
|
||||
"--"
|
||||
|
|
@ -355,6 +359,7 @@
|
|||
|
||||
:else
|
||||
(tr "dashboard.fonts.deleted-placeholder"))]
|
||||
|
||||
[:div {:class (stl/css :font-modifiers)}
|
||||
[:div {:class (stl/css :font-size-options)}
|
||||
(let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
|
||||
|
|
@ -406,7 +411,6 @@
|
|||
:else
|
||||
(tr "dashboard.fonts.deleted-placeholder"))]]
|
||||
|
||||
|
||||
[:div.row-flex
|
||||
(let [size-options [8 9 10 11 12 14 16 18 24 36 48 72]
|
||||
size-options (if (= font-size :multiple) (into [""] size-options) size-options)]
|
||||
|
|
@ -481,6 +485,7 @@
|
|||
:on-change #(handle-change % :letter-spacing)
|
||||
:on-blur on-blur}]]]
|
||||
|
||||
|
||||
[:div.spacing-options
|
||||
[:div.input-icon
|
||||
[:span.icon-before.tooltip.tooltip-bottom
|
||||
|
|
@ -526,15 +531,18 @@
|
|||
[:& radio-buttons {:selected text-transform
|
||||
:on-change handle-change
|
||||
:name "text-transform"}
|
||||
[:& nilable-option {:icon i/text-uppercase-refactor
|
||||
[:& radio-button {:icon i/text-uppercase-refactor
|
||||
:type "checkbox"
|
||||
:value "uppercase"
|
||||
:id :uppercase}]
|
||||
[:& nilable-option {:icon i/text-lowercase-refactor
|
||||
:id "text-transform-uppercase"}]
|
||||
[:& radio-button {:icon i/text-lowercase-refactor
|
||||
:type "checkbox"
|
||||
:value "lowercase"
|
||||
:id :lowercase}]
|
||||
[:& nilable-option {:icon i/text-mixed-refactor
|
||||
:id "text-transform-lowercase"}]
|
||||
[:& radio-button {:icon i/text-mixed-refactor
|
||||
:type "checkbox"
|
||||
:value "capitalize"
|
||||
:id :capitalize}]]]
|
||||
:id "text-transform-capitalize"}]]]
|
||||
|
||||
[:div.align-icons
|
||||
[:span.tooltip.tooltip-bottom
|
||||
|
|
@ -559,7 +567,7 @@
|
|||
:on-click #(handle-change "capitalize")}
|
||||
i/titlecase]])))
|
||||
|
||||
(mf/defc typography-options
|
||||
(mf/defc text-options
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [ids editor values on-change on-blur show-recent]}]
|
||||
(let [new-css-system (mf/use-ctx ctx/new-css-system)
|
||||
|
|
@ -571,7 +579,7 @@
|
|||
:show-recent show-recent}]
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css :typography-options)}
|
||||
[:div {:class (stl/css :text-options)}
|
||||
[:> font-options opts]
|
||||
[:div {:class (stl/css :typography-variations)}
|
||||
[:> spacing-options opts]
|
||||
|
|
@ -588,7 +596,9 @@
|
|||
(mf/defc typography-advanced-options
|
||||
{::mf/wrap [mf/memo]}
|
||||
[{:keys [visible? typography editable? name-input-ref on-close on-change on-name-blur local? navigate-to-library on-key-down]}]
|
||||
(let [ref (mf/use-ref nil)]
|
||||
(let [ref (mf/use-ref nil)
|
||||
font-data (fonts/get-font-data (:font-id typography))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps visible?)
|
||||
(fn []
|
||||
|
|
@ -599,14 +609,14 @@
|
|||
(when visible?
|
||||
[:div {:ref ref
|
||||
:class (stl/css :advanced-options-wrapper)}
|
||||
|
||||
(if ^boolean editable?
|
||||
[:*
|
||||
[:div {:class (stl/css :font-name-wrapper)}
|
||||
[:div
|
||||
{:class (stl/css :typography-sample-input)
|
||||
:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
[:div {:class (stl/css :typography-sample-input)
|
||||
:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(tr "workspace.assets.typography.sample")]
|
||||
|
||||
[:input
|
||||
|
|
@ -621,47 +631,52 @@
|
|||
:on-click on-close}
|
||||
i/tick-refactor]]
|
||||
|
||||
[:& typography-options {:values typography
|
||||
:on-change on-change
|
||||
:show-recent false}]]
|
||||
[:& text-options {:values typography
|
||||
:on-change on-change
|
||||
:show-recent false}]]
|
||||
|
||||
[:div.element-set-content.typography-read-only-data
|
||||
[:div.row-flex.typography-name
|
||||
[:span {:title (:name typography)} (:name typography)]]
|
||||
[:div {:class (stl/css :typography-info-wrapper)}
|
||||
[:div {:class (stl/css :typography-name-wrapper)}
|
||||
[:div {:class (stl/css :typography-sample)
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.font-id")]
|
||||
[:span (:font-id typography)]]
|
||||
:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(tr "workspace.assets.typography.sample")]
|
||||
|
||||
[:div.element-set-actions-button.actions-inside
|
||||
{:on-click on-close}
|
||||
i/actions]
|
||||
[:div {:class (stl/css :typography-name)
|
||||
:title (:name typography)}
|
||||
(:name typography)]
|
||||
[:span {:class (stl/css :typography-font)}
|
||||
(:name font-data)]
|
||||
[:div {:class (stl/css :action-btn)
|
||||
:on-click on-close}
|
||||
i/menu-refactor]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.font-variant-id")]
|
||||
[:span (:font-variant-id typography)]]
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-variant-id")]
|
||||
[:span {:class (stl/css :info-content)} (:font-variant-id typography)]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.font-size")]
|
||||
[:span (:font-size typography)]]
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.font-size")]
|
||||
[:span {:class (stl/css :info-content)} (:font-size typography)]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.line-height")]
|
||||
[:span (:line-height typography)]]
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.line-height")]
|
||||
[:span {:class (stl/css :info-content)} (:line-height typography)]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.letter-spacing")]
|
||||
[:span (:letter-spacing typography)]]
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.letter-spacing")]
|
||||
[:span {:class (stl/css :info-content)} (:letter-spacing typography)]]
|
||||
|
||||
[:div.row-flex
|
||||
[:span.label (tr "workspace.assets.typography.text-transform")]
|
||||
[:span (:text-transform typography)]]
|
||||
[:div {:class (stl/css :info-row)}
|
||||
[:span {:class (stl/css :info-label)} (tr "workspace.assets.typography.text-transform")]
|
||||
[:span {:class (stl/css :info-content)} (:text-transform typography)]]
|
||||
|
||||
(when-not local?
|
||||
[:div.row-flex
|
||||
[:a.go-to-lib-button
|
||||
{:on-click navigate-to-library}
|
||||
(tr "workspace.assets.typography.go-to-edit")]])])])))
|
||||
[:a {:class (stl/css :link-btn)
|
||||
:on-click navigate-to-library}
|
||||
(tr "workspace.assets.typography.go-to-edit")])])])))
|
||||
|
||||
|
||||
(mf/defc typography-entry
|
||||
|
|
@ -713,7 +728,7 @@
|
|||
(fn [event]
|
||||
(let [enter? (kbd/enter? event)
|
||||
esc? (kbd/esc? event)
|
||||
input-node (dom/event->target event)]
|
||||
input-node (dom/get-target event)]
|
||||
(when ^boolean enter?
|
||||
(dom/blur! input-node))
|
||||
(when ^boolean esc?
|
||||
|
|
@ -733,6 +748,7 @@
|
|||
#(when-let [node (mf/ref-val name-input-ref)]
|
||||
(dom/focus! node)
|
||||
(dom/select-text! node)))))
|
||||
|
||||
(if new-css-system
|
||||
[:*
|
||||
[:div {:class (stl/css-case :typography-entry true
|
||||
|
|
@ -773,18 +789,18 @@
|
|||
[:div {:class (stl/css :typography-font)
|
||||
:title (:name font-data)}
|
||||
(:name font-data)])])
|
||||
|
||||
(when ^boolean on-detach
|
||||
[:div {:class (stl/css :element-set-actions)}
|
||||
[:div
|
||||
{:class (stl/css :element-set-actions-button)
|
||||
:on-pointer-enter on-pointer-enter
|
||||
:on-pointer-leave on-pointer-leave
|
||||
:on-click on-detach}
|
||||
(if ^boolean hover-detach? i/detach-refactor i/chain)]])]
|
||||
[:div {:class (stl/css :element-set-actions)}
|
||||
(when ^boolean on-detach
|
||||
[:button {:class (stl/css :element-set-actions-button)
|
||||
:on-click on-detach}
|
||||
i/detach-refactor])
|
||||
[:button {:class (stl/css :menu-btn)
|
||||
:on-click on-open}
|
||||
i/menu-refactor]]]
|
||||
|
||||
[:& typography-advanced-options
|
||||
{:visible? open? :on-close on-close
|
||||
{:visible? open?
|
||||
:on-close on-close
|
||||
:typography typography
|
||||
:editable? editable?
|
||||
:name-input-ref name-input-ref
|
||||
|
|
@ -836,9 +852,9 @@
|
|||
{:on-click on-close}
|
||||
i/actions]]]
|
||||
|
||||
[:& typography-options {:values typography
|
||||
:on-change on-change
|
||||
:show-recent false}]]
|
||||
[:& text-options {:values typography
|
||||
:on-change on-change
|
||||
:show-recent false}]]
|
||||
|
||||
[:div.element-set-content.typography-read-only-data
|
||||
[:div.row-flex.typography-name
|
||||
|
|
|
|||
|
|
@ -13,6 +13,13 @@
|
|||
height: $s-32;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
&:hover,
|
||||
&:focus-within {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
|
||||
.typography-selection-wrapper {
|
||||
display: grid;
|
||||
|
|
@ -29,6 +36,7 @@
|
|||
.typography-sample {
|
||||
@include flexCenter;
|
||||
min-width: $s-24;
|
||||
height: $s-32;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.typography-name,
|
||||
|
|
@ -54,8 +62,27 @@
|
|||
border: $s-1 solid var(--assets-item-border-color);
|
||||
}
|
||||
|
||||
.element-set-actions {
|
||||
display: flex;
|
||||
visibility: hidden;
|
||||
.element-set-actions-button,
|
||||
.menu-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
.element-set-actions {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -77,11 +104,14 @@
|
|||
width: $s-24;
|
||||
height: 100%;
|
||||
font-size: $fs-16;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.adv-typography-name {
|
||||
@include removeInputStyle;
|
||||
color: var(--input-foreground-color);
|
||||
font-size: $fs-12;
|
||||
color: var(--input-foreground-color-active);
|
||||
flex-grow: 1;
|
||||
padding-left: $s-6;
|
||||
margin: 0;
|
||||
}
|
||||
.action-btn {
|
||||
|
|
@ -93,6 +123,9 @@
|
|||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
&:focus-within {
|
||||
border: $s-1 solid var(--input-border-color-active);
|
||||
|
|
@ -109,9 +142,111 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: var(--assets-title-background-color);
|
||||
.typography-info-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-4;
|
||||
margin-bottom: $s-12;
|
||||
.typography-name-wrapper {
|
||||
@extend .asset-element;
|
||||
display: grid;
|
||||
grid-template-columns: $s-24 auto 1fr $s-28;
|
||||
flex: 1;
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
padding: 0 0 0 $s-12;
|
||||
background-color: var(--assets-item-background-color-hover);
|
||||
margin-bottom: $s-4;
|
||||
.typography-sample {
|
||||
@include flexCenter;
|
||||
min-width: $s-24;
|
||||
font-size: $fs-16;
|
||||
height: $s-32;
|
||||
padding: 0;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.typography-name {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-left: $s-6;
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
.typography-font {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
margin-left: $s-6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
min-width: 0;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
.action-btn {
|
||||
@extend .button-tertiary;
|
||||
width: $s-28;
|
||||
height: $s-32;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
&:active {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
height: $s-32;
|
||||
--calcualted-width: calc(var(--width) - $s-48);
|
||||
padding-left: $s-2;
|
||||
.info-label {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
width: calc(var(--calcualted-width) / 2);
|
||||
padding-top: $s-8;
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
.info-content {
|
||||
@include titleTipography;
|
||||
@include textEllipsis;
|
||||
padding-top: $s-8;
|
||||
width: calc(var(--calcualted-width) / 2);
|
||||
color: var(--assets-item-name-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
@include tabTitleTipography;
|
||||
@extend .button-secondary;
|
||||
width: 100%;
|
||||
height: $s-32;
|
||||
border-radius: $br-8;
|
||||
&:hover {
|
||||
background-color: var(--button-secondary-background-color-hover);
|
||||
color: var(--button-secondary-foreground-color-hover);
|
||||
border: $s-1 solid var(--button-secondary-border-color-hover);
|
||||
text-decoration: none;
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--button-secondary-background-color-focus);
|
||||
color: var(--button-secondary-foreground-color-focus);
|
||||
border: $s-1 solid var(--button-secondary-border-color-focus);
|
||||
svg {
|
||||
stroke: var(--button-secondary-foreground-color-focus);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.typography-options {
|
||||
.text-options {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -129,7 +264,7 @@
|
|||
height: $s-28;
|
||||
width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -151,13 +286,11 @@
|
|||
height: $s-32;
|
||||
.numeric-input {
|
||||
@extend .input-base;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
span {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -166,7 +299,7 @@
|
|||
height: $s-28;
|
||||
min-width: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -61,6 +61,25 @@
|
|||
gradient-color? (and (not multiple-colors?)
|
||||
(:gradient color)
|
||||
(get-in color [:gradient :type]))
|
||||
|
||||
editing-text* (mf/use-state false)
|
||||
editing-text? (deref editing-text*)
|
||||
|
||||
on-focus
|
||||
(mf/use-fn
|
||||
(mf/deps on-focus)
|
||||
(fn [event]
|
||||
(reset! editing-text* true)
|
||||
(when on-focus
|
||||
(on-focus event))))
|
||||
|
||||
on-blur
|
||||
(mf/use-fn
|
||||
(mf/deps on-blur)
|
||||
(fn [event]
|
||||
(reset! editing-text* false)
|
||||
(when on-blur
|
||||
(on-blur event))))
|
||||
parse-color
|
||||
(mf/use-fn
|
||||
(fn [color]
|
||||
|
|
@ -157,7 +176,6 @@
|
|||
(when (not= prev-color color)
|
||||
(modal/update-props! :colorpicker {:data (parse-color color)})))
|
||||
|
||||
|
||||
(if new-css-system
|
||||
[:div {:class (stl/css-case
|
||||
:color-data true
|
||||
|
|
@ -166,13 +184,16 @@
|
|||
:ref dref}
|
||||
[:span {:class (stl/css :color-info)}
|
||||
[:span {:class (stl/css-case :color-name-wrapper true
|
||||
:library-name-wrapper library-color?
|
||||
:editing editing-text?
|
||||
:gradient-name-wrapper gradient-color?)}
|
||||
[:span {:class (stl/css :color-bullet-wrapper)}
|
||||
[:& cbn/color-bullet {:color (cond-> color
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
:file-id nil))
|
||||
:on-click handle-click-color}]]
|
||||
(nil? color-name) (assoc
|
||||
:id nil
|
||||
:file-id nil))
|
||||
:mini? true
|
||||
:on-click handle-click-color}]]
|
||||
(cond
|
||||
;; Rendering a color with ID
|
||||
library-color?
|
||||
|
|
@ -212,7 +233,6 @@
|
|||
(not multiple-colors?)
|
||||
(not library-color?))
|
||||
|
||||
|
||||
[:div {:class (stl/css :opacity-element-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)}
|
||||
"%"]
|
||||
|
|
|
|||
|
|
@ -13,24 +13,24 @@
|
|||
.color-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $s-1;
|
||||
gap: $s-2;
|
||||
border-radius: $s-8;
|
||||
background-color: var(--input-details-color);
|
||||
height: $s-32;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
.color-name-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--input-background-color);
|
||||
@extend .input-element;
|
||||
flex-grow: 1;
|
||||
|
||||
width: 100%;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0;
|
||||
margin-right: 0;
|
||||
.color-bullet-wrapper {
|
||||
@extend .input-element;
|
||||
background-color: transparent;
|
||||
height: $s-28;
|
||||
padding: 0 $s-2 0 $s-8;
|
||||
border-radius: $br-8 0 0 $br-8;
|
||||
padding: 0 $s-4 0 $s-8;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
|
@ -39,35 +39,67 @@
|
|||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
height: $s-28;
|
||||
padding-left: $s-6;
|
||||
border-radius: $br-8;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
color: var(--input-foreground-color-active);
|
||||
}
|
||||
.detach-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
height: $s-28;
|
||||
width: $s-28;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
display: none;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
}
|
||||
}
|
||||
.color-input-wrapper {
|
||||
@extend .input-element;
|
||||
@include titleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: $s-28;
|
||||
padding: 0 $s-0;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
flex-grow: 1;
|
||||
background-color: var(--input-background-color);
|
||||
color: var(--input-foreground-color);
|
||||
border-radius: $br-0;
|
||||
}
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
&:hover {
|
||||
background-color: var(--input-background-color-hover);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-hover);
|
||||
}
|
||||
.detach-btn svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
.detach-btn {
|
||||
display: flex;
|
||||
svg {
|
||||
stroke: var(--input-foreground-color-active);
|
||||
}
|
||||
}
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
.color-bullet-wrapper,
|
||||
.color-name,
|
||||
.detach-btn,
|
||||
.color-input-wrapper {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
|
||||
&.editing {
|
||||
background-color: var(--input-background-color-active);
|
||||
}
|
||||
}
|
||||
.gradient-name-wrapper {
|
||||
|
|
@ -75,11 +107,13 @@
|
|||
border-radius: 0 $br-8 $br-8 0;
|
||||
}
|
||||
}
|
||||
.library-name-wrapper {
|
||||
border-radius: $br-8;
|
||||
}
|
||||
.opacity-element-wrapper {
|
||||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
padding-left: $s-8;
|
||||
.opacity-input {
|
||||
border-radius: 0 $br-8 $br-8 0;
|
||||
min-width: $s-28;
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
@extend .input-element;
|
||||
width: $s-60;
|
||||
border-radius: $br-8;
|
||||
padding: $s-8;
|
||||
.icon {
|
||||
@include flexCenter;
|
||||
height: $s-32;
|
||||
|
|
|
|||
|
|
@ -56,8 +56,7 @@
|
|||
on-blur
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [target (dom/event->target event)
|
||||
name (str/trim (dom/get-value target))]
|
||||
(let [name (str/trim (dom/get-target-val event))]
|
||||
(when-not (str/empty? name)
|
||||
(st/emit! (dw/rename-page id name)))
|
||||
(st/emit! (dw/stop-rename-page-item)))))
|
||||
|
|
@ -238,11 +237,12 @@
|
|||
[:div {:class (dom/classnames (css :sitemap) true)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not show-pages?)
|
||||
:on-collapsed toggle-pages
|
||||
:title (tr "workspace.sidebar.sitemap")
|
||||
:class (css :title-spacing-sitemap)}
|
||||
[:& title-bar {:collapsable? true
|
||||
:collapsed? (not show-pages?)
|
||||
:on-collapsed toggle-pages
|
||||
:clickable-all? true
|
||||
:title (tr "workspace.sidebar.sitemap")
|
||||
:class (css :title-spacing-sitemap)}
|
||||
|
||||
(if workspace-read-only?
|
||||
[:div
|
||||
|
|
|
|||
|
|
@ -134,7 +134,6 @@
|
|||
|
||||
[:div {:class (dom/classnames (css :text-palette) true)
|
||||
:style #js {"--height" (str size "px")}}
|
||||
|
||||
(when show-arrows?
|
||||
[:button {:class (dom/classnames (css :left-arrow) true)
|
||||
:disabled (= offset 0)
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
(ns app.main.ui.workspace.viewport.pixel-overlay
|
||||
(:require
|
||||
[app.common.math :as mth]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace.colors :as dwc]
|
||||
[app.main.data.workspace.undo :as dwu]
|
||||
|
|
@ -58,8 +59,8 @@
|
|||
canvas-height (if new-css-system 140 160)
|
||||
{brx :left bry :top} (dom/get-bounding-rect viewport-node)
|
||||
|
||||
x (- (.-clientX event) brx)
|
||||
y (- (.-clientY event) bry)
|
||||
x (mth/floor (- (.-clientX event) brx))
|
||||
y (mth/floor (- (.-clientY event) bry))
|
||||
|
||||
zoom-context (mf/ref-val zoom-view-context)
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue