mirror of
https://github.com/penpot/penpot.git
synced 2025-04-06 12:01:19 -05:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Andrey Antukh
commit
0606ef1c84
29 changed files with 854 additions and 774 deletions
|
|
@ -1076,14 +1076,13 @@
|
|||
(->> (cells-seq parent :sort? true)
|
||||
(reduce
|
||||
(fn [[parent auto?] cell]
|
||||
|
||||
(let [[cell auto?]
|
||||
(cond
|
||||
(and (empty? (:shapes cell))
|
||||
(= :manual (:position cell))
|
||||
(= (:row-span cell) 1)
|
||||
(= (:column-span cell) 1))
|
||||
[(assoc cell :position :auto) false]
|
||||
[cell false]
|
||||
|
||||
(and (or (not= (:row-span cell) 1)
|
||||
(not= (:column-span cell) 1))
|
||||
|
|
|
|||
3
frontend/resources/images/icons/exit-refactor.svg
Normal file
3
frontend/resources/images/icons/exit-refactor.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M6 14H3.33333C2.97971 14 2.64057 13.8595 2.39052 13.6095C2.14048 13.3594 2 13.0203 2 12.6667V3.33333C2 2.97971 2.14048 2.64057 2.39052 2.39052C2.64057 2.14048 2.97971 2 3.33333 2H6M10.6667 11.3333L14 8M14 8L10.6667 4.66667M14 8H6"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
|
|
@ -848,6 +848,7 @@
|
|||
color: var(--title-foreground-color-hover);
|
||||
background-color: var(--menu-background-color);
|
||||
border: $s-2 solid var(--panel-border-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.menu-item-base {
|
||||
|
|
|
|||
|
|
@ -155,6 +155,7 @@
|
|||
--icon-foreground-hover: var(--color-foreground-primary);
|
||||
--icon-foreground-accept: var(--status-color-success-500);
|
||||
--icon-foreground-discard: var(--status-color-error-500);
|
||||
--icon-foreground-active: var(--color-accent-primary);
|
||||
|
||||
// INPUTS, SELECTS, DROPDOWNS
|
||||
|
||||
|
|
@ -201,6 +202,7 @@
|
|||
|
||||
--menu-background-color: var(--color-background-tertiary);
|
||||
--menu-foreground-color: var(--color-foreground-primary);
|
||||
--menu-icon-foreground-color: var(--color-foreground-secondary);
|
||||
--menu-background-color-selected: var(--color-background-tertiary);
|
||||
--menu-background-color-hover: var(--color-background-quaternary);
|
||||
--menu-foreground-color-hover: var(--color-foreground-primary);
|
||||
|
|
@ -358,6 +360,11 @@
|
|||
--search-bar-background-color: var(--color-background-primary);
|
||||
--search-bar-input-background-color: var(--color-background-tertiary);
|
||||
--search-bar-input-border-color: var(--color-background-tertiary);
|
||||
--search-bar-input-border-color-focus: var(--color-accent-primary);
|
||||
--search-bar-placeholder-foreground-color: var(--color-foreground-secondary);
|
||||
--search-bar-foreground-color: var(--color-foreground-primary);
|
||||
--search-bar-icon-foreground-color: var(--color-foreground-secondary);
|
||||
--search-bar-icon-foreground-color-hover: var(--color-accent-primary);
|
||||
|
||||
--pill-background-color: var(--color-background-tertiary);
|
||||
--pill-foreground-color: var(--color-foreground-primary);
|
||||
|
|
@ -369,6 +376,8 @@
|
|||
--resize-area-background-color: var(--color-background-primary);
|
||||
--resize-area-border-color: var(--color-background-quaternary);
|
||||
|
||||
--profile-section-background-color: var(--color-background-tertiary);
|
||||
|
||||
--flow-tag-background-color: var(--color-background-tertiary);
|
||||
--flow-tag-foreground-color: var(--color-foreground-secondary);
|
||||
--flow-tag-background-color-hover: var(--color-background-quaternary);
|
||||
|
|
@ -393,6 +402,14 @@
|
|||
// NEW TEAM BUTTON
|
||||
// TODO: we should not put these functional tokens here, but rather in the components they belong to
|
||||
--new-team-button-background-color: var(--color-background-primary);
|
||||
|
||||
//DASHBOARD
|
||||
--sidebar-element-foreground-color: var(--color-foreground-secondary);
|
||||
--sidebar-element-background-color-hover: var(--color-background-secondary);
|
||||
--sidebar-element-foreground-color-hover: var(--color-accent-primary);
|
||||
--sidebar-element-background-color-selected: var(--color-background-quaternary);
|
||||
--sidebar-element-foreground-color-selected: var(--color-accent-primary);
|
||||
--profile-foreground-color: var(--color-foreground-primary);
|
||||
}
|
||||
|
||||
#app {
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@
|
|||
(defn notify-start-loading
|
||||
[]
|
||||
(st/emit! (msg/show {:content (tr "media.loading")
|
||||
:notification-type :toast
|
||||
:type :info
|
||||
:timeout nil})))
|
||||
|
||||
|
|
|
|||
|
|
@ -808,7 +808,7 @@
|
|||
component (ctkl/get-component data component-id)
|
||||
page-id (:main-instance-page component)
|
||||
root-id (:main-instance-id component)]
|
||||
(dwt/request-thumbnail file-id page-id root-id tag)))
|
||||
(dwt/request-thumbnail file-id page-id root-id tag "update-component-thumbnail-sync")))
|
||||
|
||||
(defn update-component-sync
|
||||
([shape-id file-id] (update-component-sync shape-id file-id nil))
|
||||
|
|
|
|||
|
|
@ -211,6 +211,7 @@
|
|||
(watch [_ _ _]
|
||||
(rx/concat
|
||||
(rx/of (msg/show {:content (tr "media.loading")
|
||||
:notification-type :toast
|
||||
:type :info
|
||||
:timeout nil
|
||||
:tag :media-loading}))
|
||||
|
|
@ -440,6 +441,7 @@
|
|||
|
||||
(rx/concat
|
||||
(rx/of (msg/show {:content (tr "media.loading")
|
||||
:notification-type :toast
|
||||
:type :info
|
||||
:timeout nil
|
||||
:tag :media-loading}))
|
||||
|
|
|
|||
|
|
@ -573,6 +573,7 @@
|
|||
(> (:row-span cell) 1)
|
||||
(> (:column-span cell) 1))
|
||||
(-> (d/update-in-when [:layout-grid-cells cell-id] assoc :shapes [] :position :auto)
|
||||
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
|
||||
(ctl/resize-cell-area (:row cell) (:column cell) (:row cell) (:column cell) 1 1)
|
||||
(ctl/assign-cells objects)))))
|
||||
shape))
|
||||
|
|
@ -585,6 +586,7 @@
|
|||
(cond-> shape
|
||||
(contains? #{:area :auto} (:position cell))
|
||||
(-> (d/assoc-in-when [:layout-grid-cells cell-id :position] :manual)
|
||||
(d/update-in-when [:layout-grid-cells cell-id] dissoc :area-name)
|
||||
(ctl/assign-cells objects)))))
|
||||
shape))
|
||||
|
||||
|
|
|
|||
|
|
@ -58,15 +58,17 @@
|
|||
|
||||
(defn request-thumbnail
|
||||
"Enqueues a request to generate a thumbnail for the given ids."
|
||||
[file-id page-id shape-id tag]
|
||||
(ptk/reify ::request-thumbnail
|
||||
ptk/EffectEvent
|
||||
(effect [_ _ _]
|
||||
(l/dbg :hint "request thumbnail" :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
|
||||
(q/enqueue-unique
|
||||
queue
|
||||
(create-request file-id page-id shape-id tag)
|
||||
(partial find-request file-id page-id shape-id tag)))))
|
||||
([file-id page-id shape-id tag]
|
||||
(request-thumbnail file-id page-id shape-id tag "unknown"))
|
||||
([file-id page-id shape-id tag requester]
|
||||
(ptk/reify ::request-thumbnail
|
||||
ptk/EffectEvent
|
||||
(effect [_ _ _]
|
||||
(l/dbg :hint "request thumbnail" :requester requester :file-id file-id :page-id page-id :shape-id shape-id :tag tag)
|
||||
(q/enqueue-unique
|
||||
queue
|
||||
(create-request file-id page-id shape-id tag)
|
||||
(partial find-request file-id page-id shape-id tag))))))
|
||||
|
||||
;; This function first renders the HTML calling `render/render-frame` that
|
||||
;; returns HTML as a string, then we send that data to the iframe rasterizer
|
||||
|
|
@ -291,6 +293,6 @@
|
|||
(->> all-changes-s
|
||||
(rx/buffer-until notifier-s)
|
||||
(rx/mapcat #(into #{} %))
|
||||
(rx/map #(request-thumbnail file-id page-id % "frame"))))
|
||||
(rx/map #(request-thumbnail file-id page-id % "frame" "watch-state-changes"))))
|
||||
|
||||
(rx/take-until stopper-s))))))
|
||||
|
|
|
|||
|
|
@ -124,6 +124,7 @@
|
|||
(let [message (tr "errors.paste-data-validation")]
|
||||
(st/async-emit!
|
||||
(msg/show {:content message
|
||||
:notification-type :toast
|
||||
:type :error
|
||||
:timeout 3000})))
|
||||
|
||||
|
|
@ -138,6 +139,7 @@
|
|||
[error]
|
||||
(ts/schedule
|
||||
#(st/emit! (msg/show {:content "Internal Assertion Error"
|
||||
:notification-type :toast
|
||||
:type :error
|
||||
:timeout 3000})))
|
||||
|
||||
|
|
@ -153,6 +155,7 @@
|
|||
(ts/schedule
|
||||
#(st/emit!
|
||||
(msg/show {:content "Something wrong has happened (on worker)."
|
||||
:notification-type :toast
|
||||
:type :error
|
||||
:timeout 3000})))
|
||||
|
||||
|
|
@ -166,6 +169,7 @@
|
|||
[_]
|
||||
(ts/schedule
|
||||
#(st/emit! (msg/show {:content "SVG is invalid or malformed"
|
||||
:notification-type :toast
|
||||
:type :error
|
||||
:timeout 3000}))))
|
||||
|
||||
|
|
@ -174,6 +178,7 @@
|
|||
[_]
|
||||
(ts/schedule
|
||||
#(st/emit! (msg/show {:content "There was an error with the comment"
|
||||
:notification-type :toast
|
||||
:type :error
|
||||
:timeout 3000}))))
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
[app.util.http :as http]
|
||||
[app.util.object :as obj]
|
||||
[beicon.v2.core :as rx]
|
||||
[clojure.set :as set]
|
||||
[cuerdas.core :as str]
|
||||
[lambdaisland.uri :as u]
|
||||
[okulary.core :as l]
|
||||
|
|
@ -273,13 +272,17 @@
|
|||
|
||||
(defn get-content-fonts
|
||||
"Extracts the fonts used by the content of a text shape"
|
||||
[{font-id :font-id children :children :as content}]
|
||||
(let [current-font
|
||||
(if (some? font-id)
|
||||
#{(select-keys content [:font-id :font-variant-id])}
|
||||
#{(select-keys txt/default-text-attrs [:font-id :font-variant-id])})
|
||||
children-font (->> children (mapv get-content-fonts))]
|
||||
(reduce set/union (conj children-font current-font))))
|
||||
[content]
|
||||
(->> (txt/node-seq content)
|
||||
(filter txt/is-text-node?)
|
||||
(reduce
|
||||
(fn [result {:keys [font-id] :as node}]
|
||||
(let [current-font
|
||||
(if (some? font-id)
|
||||
(select-keys node [:font-id :font-variant-id])
|
||||
(select-keys txt/default-text-attrs [:font-id :font-variant-id]))]
|
||||
(conj result current-font)))
|
||||
#{})))
|
||||
|
||||
(defn fetch-font-css
|
||||
"Given a font and the variant-id, retrieves the fontface CSS"
|
||||
|
|
|
|||
|
|
@ -12,10 +12,10 @@
|
|||
|
||||
(mf/defc link
|
||||
{::mf/wrap-props false}
|
||||
[{:keys [action klass data-test keyboard-action children]}]
|
||||
[{:keys [action class data-test keyboard-action children]}]
|
||||
(let [keyboard-action (d/nilv keyboard-action action)]
|
||||
[:a {:on-click action
|
||||
:class klass
|
||||
:class class
|
||||
:on-key-down (fn [event]
|
||||
(when ^boolean (kbd/enter? event)
|
||||
(keyboard-action event)))
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,498 +7,375 @@
|
|||
@use "common/refactor/common-refactor.scss" as *;
|
||||
@use "common/refactor/common-dashboard";
|
||||
|
||||
// SIDEBAR COMPONENT
|
||||
.dashboard-sidebar {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: 1 / span 2;
|
||||
|
||||
background-color: var(--panel-background-color);
|
||||
border-right: $s-1 solid $db-quaternary;
|
||||
margin: 0 $s-16 0 0;
|
||||
display: grid;
|
||||
grid-template-rows: 1fr auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: $s-16 0 0 0;
|
||||
|
||||
margin: 0 $s-16 0 0;
|
||||
border-right: $s-1 solid var(--panel-border-color);
|
||||
background-color: var(--panel-background-color);
|
||||
z-index: $z-index-1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
//SIDEBAR CONTENT COMPONENT
|
||||
.sidebar-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
display: grid;
|
||||
grid-template-rows: auto auto auto auto 1fr;
|
||||
gap: $s-24;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
|
||||
hr {
|
||||
border-color: transparent;
|
||||
margin: $s-12 $s-16;
|
||||
}
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
// SIDEBAR TEAM SWITCH
|
||||
.sidebar-team-switch {
|
||||
position: relative;
|
||||
display: flex;
|
||||
margin: $s-4 $s-16;
|
||||
|
||||
.switch-content {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
height: $s-48;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border: $s-1 solid $db-tertiary;
|
||||
align-items: center;
|
||||
|
||||
svg {
|
||||
fill: #8f9da3;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.current-team {
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
font-size: $fs-14;
|
||||
padding: 0 $s-12;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.team-name {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
height: $s-40;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.team-text {
|
||||
color: $df-primary;
|
||||
width: $s-144;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.team-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-right: $s-12;
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
}
|
||||
}
|
||||
|
||||
.switch-options {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
max-width: $s-24;
|
||||
min-width: $s-28;
|
||||
height: 100%;
|
||||
border-left: $s-1 solid $db-primary;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
width: $s-16;
|
||||
height: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
right: $s-2;
|
||||
top: $s-52;
|
||||
max-height: $s-480;
|
||||
&:not(.teams-dropdown) {
|
||||
min-width: $s-160;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
@include menuShadow;
|
||||
position: absolute;
|
||||
z-index: $z-index-4;
|
||||
background-color: $db-tertiary;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
.switch-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
height: $s-48;
|
||||
width: 100%;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid var(--menu-background-color);
|
||||
background-color: var(--menu-background-color);
|
||||
}
|
||||
|
||||
.separator {
|
||||
border-color: transparent;
|
||||
margin-top: $s-12;
|
||||
}
|
||||
.current-team {
|
||||
@include buttonStyle;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: $s-8;
|
||||
height: 100%;
|
||||
padding: 0 $s-12;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: $br-8;
|
||||
height: $s-40;
|
||||
margin: $s-6;
|
||||
.team-name {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-12;
|
||||
height: $s-40;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: $fs-14;
|
||||
padding: $s-6 $s-16;
|
||||
.team-text {
|
||||
@include textEllipsis;
|
||||
@include smallTitleTipography;
|
||||
width: $s-144;
|
||||
text-align: left;
|
||||
color: var(--menu-foreground-color-hover);
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-quaternary;
|
||||
}
|
||||
svg {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border-color: transparent;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.options-dropdown {
|
||||
li {
|
||||
color: $df-primary;
|
||||
&.warning {
|
||||
color: var(--element-foreground-warning);
|
||||
}
|
||||
}
|
||||
// This icon still use the old svg
|
||||
.penpot-icon {
|
||||
@include flexCenter;
|
||||
svg {
|
||||
fill: var(--icon-foreground);
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
}
|
||||
}
|
||||
|
||||
.team-picture {
|
||||
@include flexCenter;
|
||||
border-radius: 50%;
|
||||
height: $s-24;
|
||||
width: $s-24;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
@extend .button-icon;
|
||||
transform: rotate(90deg);
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.switch-options {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
max-width: $s-24;
|
||||
min-width: $s-28;
|
||||
height: 100%;
|
||||
border-left: $s-1 solid var(--panel-background-color);
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
// DROPDOWNS
|
||||
|
||||
.teams-dropdown {
|
||||
background-color: $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
border: $s-1 solid $db-quaternary;
|
||||
min-width: $s-248;
|
||||
|
||||
@extend .menu-dropdown;
|
||||
left: 0;
|
||||
top: $s-52;
|
||||
|
||||
height: fit-content;
|
||||
max-height: $s-480;
|
||||
min-width: $s-248;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
li {
|
||||
border-radius: $br-8;
|
||||
height: $s-40;
|
||||
padding: 0 $s-6;
|
||||
margin: $s-6;
|
||||
.team-dropdown-item {
|
||||
@extend .menu-item-base;
|
||||
display: grid;
|
||||
grid-template-columns: $s-24 1fr auto;
|
||||
gap: $s-8;
|
||||
height: $s-40;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
.action {
|
||||
--sidebar-action-icon-color: var(--icon-foreground);
|
||||
--sidebar-icon-backgroun-color: var(--color-background-secondary);
|
||||
&:hover {
|
||||
--sidebar-action-icon-color: var(--color-background-secondary);
|
||||
--sidebar-icon-backgroun-color: var(--color-accent-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
@include flexCenter;
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
margin-right: $s-12;
|
||||
border-radius: 50%;
|
||||
background-color: var(--sidebar-icon-backgroun-color);
|
||||
}
|
||||
|
||||
.add-icon {
|
||||
@extend .button-icon;
|
||||
width: $s-24;
|
||||
height: $s-24;
|
||||
stroke: var(--sidebar-action-icon-color);
|
||||
}
|
||||
|
||||
.team-separator {
|
||||
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tick-icon {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.options-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
right: $s-2;
|
||||
top: $s-52;
|
||||
max-height: $s-480;
|
||||
&:not(.teams-dropdown) {
|
||||
min-width: $s-160;
|
||||
}
|
||||
}
|
||||
|
||||
.team-options-item {
|
||||
@extend .menu-item-base;
|
||||
height: $s-40;
|
||||
}
|
||||
|
||||
.team-option-separator {
|
||||
height: $s-1;
|
||||
margin: 0;
|
||||
border-top: $s-1 solid var(--dropdown-separator-color);
|
||||
}
|
||||
|
||||
// Sections
|
||||
.sidebar-nav {
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
overflow: none;
|
||||
}
|
||||
|
||||
.pinned-projects {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.sidebar-nav-item {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: var(--sidebar-element-background-color-hover);
|
||||
span {
|
||||
color: var(--sidebar-element-foreground-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-quaternary;
|
||||
.team-icon {
|
||||
&.new-team {
|
||||
background-color: $da-primary;
|
||||
color: $db-primary;
|
||||
svg {
|
||||
fill: $db-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.team-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.team-text {
|
||||
color: $df-primary;
|
||||
width: $s-168;
|
||||
}
|
||||
|
||||
&.action {
|
||||
.team-icon {
|
||||
background-color: #2e3434;
|
||||
background-color: var(--new-team-button-background-color);
|
||||
border-radius: 50%;
|
||||
height: $s-24;
|
||||
margin-right: $s-12;
|
||||
padding: $s-6;
|
||||
width: $s-24;
|
||||
|
||||
svg {
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
&.current {
|
||||
background-color: var(--sidebar-element-background-color-selected);
|
||||
.element-title {
|
||||
color: var(--sidebar-element-foreground-color-selected);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.recent-projects svg {
|
||||
stroke: var(--main-icon-foreground);
|
||||
}
|
||||
|
||||
.sidebar-link {
|
||||
display: block;
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
font-weight: $fw400;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.project-element {
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
@include textEllipsis;
|
||||
color: var(--sidebar-element-foreground-color);
|
||||
font-size: $fs-14;
|
||||
}
|
||||
|
||||
// Pinned projects
|
||||
|
||||
.sidebar-empty-placeholder {
|
||||
padding: $s-12;
|
||||
color: $df-secondary;
|
||||
color: var(--empty-message-foreground-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
padding: 0 $s-12;
|
||||
svg {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
}
|
||||
}
|
||||
.text {
|
||||
font-size: $fs-12;
|
||||
}
|
||||
}
|
||||
|
||||
.pin-icon {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
margin: 0 $s-12;
|
||||
}
|
||||
|
||||
.empty-text {
|
||||
font-size: $fs-12;
|
||||
}
|
||||
|
||||
// Search
|
||||
|
||||
.sidebar-search {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
align-items: center;
|
||||
border: $s-1 solid transparent;
|
||||
display: flex;
|
||||
margin: $s-6 $s-16;
|
||||
|
||||
background-color: $db-tertiary;
|
||||
margin: 0 $s-16;
|
||||
border-radius: $br-8;
|
||||
margin-bottom: $s-32;
|
||||
margin-top: 0;
|
||||
position: relative;
|
||||
background-color: var(--search-bar-input-background-color);
|
||||
}
|
||||
|
||||
.input-text {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: $fs-14;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
height: $s-40;
|
||||
.input-text {
|
||||
@include smallTitleTipography;
|
||||
height: $s-40;
|
||||
width: 100%;
|
||||
padding: $s-6 $s-12;
|
||||
margin: 0;
|
||||
border: transparent;
|
||||
border-radius: $br-8;
|
||||
background: transparent;
|
||||
color: var(--search-bar-foreground-color);
|
||||
|
||||
border-radius: $br-8;
|
||||
color: $df-primary;
|
||||
max-width: 100%;
|
||||
padding: $s-6 $s-12;
|
||||
|
||||
&:focus,
|
||||
&:focus-within {
|
||||
border: $s-1 solid $da-primary;
|
||||
}
|
||||
&:focus,
|
||||
&:focus-within,
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
border: $s-1 solid var(--search-bar-input-border-color-focus);
|
||||
}
|
||||
::placeholder {
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
||||
.search,
|
||||
.clear-search {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
height: $s-24;
|
||||
margin-left: auto;
|
||||
padding: 0 $s-8;
|
||||
width: $s-32;
|
||||
|
||||
position: absolute;
|
||||
top: calc(50% - $s-12);
|
||||
right: $s-2;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
height: $s-16;
|
||||
width: $s-16;
|
||||
}
|
||||
}
|
||||
|
||||
.clear-search svg {
|
||||
transform: rotate(45deg);
|
||||
|
||||
&:hover {
|
||||
fill: $da-primary;
|
||||
}
|
||||
color: var(--search-bar-placeholder-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
user-select: none;
|
||||
|
||||
&.no-overflow {
|
||||
overflow: unset;
|
||||
}
|
||||
|
||||
& > li {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
|
||||
&.project-element {
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: $s-8 $s-8 $s-8 $s-24;
|
||||
font-weight: $fw400;
|
||||
width: 100%;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: $db-secondary;
|
||||
margin-right: $s-8;
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
|
||||
.element-title {
|
||||
color: $df-secondary;
|
||||
font-size: $fs-14;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
&.recent-projects {
|
||||
svg {
|
||||
fill: $df-primary;
|
||||
}
|
||||
}
|
||||
|
||||
input.element-title {
|
||||
border: 0;
|
||||
height: $s-32;
|
||||
padding: $s-6;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
background-color: $df-primary;
|
||||
}
|
||||
|
||||
.close {
|
||||
background-color: $df-primary;
|
||||
cursor: pointer;
|
||||
padding-left: $s-6;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
height: $s-16;
|
||||
transform: rotate(45deg) translateY(7px);
|
||||
width: $s-16;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.element-subtitle {
|
||||
color: $df-secondary;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $db-secondary;
|
||||
span {
|
||||
color: $da-primary;
|
||||
}
|
||||
}
|
||||
|
||||
&.current {
|
||||
background-color: $db-quaternary;
|
||||
.element-title {
|
||||
color: $da-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-btn {
|
||||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
height: $s-24;
|
||||
width: $s-32;
|
||||
padding: 0 $s-8;
|
||||
}
|
||||
|
||||
.search-icon,
|
||||
.clear-search-btn {
|
||||
@extend .button-icon;
|
||||
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color);
|
||||
stroke: var(--sidebar-search-foreground-color);
|
||||
}
|
||||
|
||||
.clear-search-btn:hover {
|
||||
--sidebar-search-foreground-color: var(--search-bar-icon-foreground-color-hover);
|
||||
}
|
||||
|
||||
// Profile
|
||||
.profile-section {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: $s-12 $s-16;
|
||||
position: relative;
|
||||
|
||||
background-color: $db-tertiary;
|
||||
border-top: $s-1 solid $db-quaternary;
|
||||
|
||||
.profile {
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
|
||||
span {
|
||||
@include text-ellipsis;
|
||||
color: $df-primary;
|
||||
margin: $s-12;
|
||||
font-size: $fs-14;
|
||||
max-width: $s-160;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
height: $s-40;
|
||||
width: $s-40;
|
||||
}
|
||||
svg {
|
||||
height: $s-12;
|
||||
margin-left: auto;
|
||||
margin-right: $s-8;
|
||||
width: $s-12;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
left: $s-16;
|
||||
bottom: $s-44;
|
||||
background-color: var(--profile-drowpdown-background-color);
|
||||
border: $s-1 solid $db-tertiary;
|
||||
border-radius: $br-8;
|
||||
min-width: $s-252;
|
||||
|
||||
@include animation(0, 0.2s, fadeInUp);
|
||||
|
||||
li {
|
||||
font-size: $fs-14;
|
||||
padding: $s-8 $s-16;
|
||||
|
||||
svg {
|
||||
fill: $df-secondary;
|
||||
margin-right: $s-8;
|
||||
|
||||
height: $s-12;
|
||||
width: $s-12;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: $df-primary;
|
||||
}
|
||||
|
||||
&.separator {
|
||||
border-top: $s-1 solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
padding: $s-12 $s-16;
|
||||
border-top: $s-1 solid var(--panel-border-color);
|
||||
background-color: var(--profile-section-background-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profile-fullname {
|
||||
@include smallTitleTipography;
|
||||
@include text-ellipsis;
|
||||
align-self: center;
|
||||
max-width: $s-160;
|
||||
color: var(--profile-foreground-color);
|
||||
}
|
||||
|
||||
.profile-img {
|
||||
height: $s-40;
|
||||
width: $s-40;
|
||||
border-radius: $br-circle;
|
||||
}
|
||||
|
||||
.profile-dropdown {
|
||||
@extend .menu-dropdown;
|
||||
left: $s-16;
|
||||
bottom: $s-72;
|
||||
min-width: $s-252;
|
||||
// TODO ADD animation fadeInUp
|
||||
}
|
||||
|
||||
.profile-dropdown-item {
|
||||
@extend .menu-item-base;
|
||||
@include smallTitleTipography;
|
||||
height: $s-40;
|
||||
padding: $s-8 $s-16;
|
||||
}
|
||||
|
||||
.profile-separator {
|
||||
height: $s-6;
|
||||
}
|
||||
|
||||
.item-with-icon {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.exit-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,9 @@
|
|||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[:div {:class (stl/css :modal-container)}
|
||||
[:& fm/form {:form form :on-submit on-submit}
|
||||
[:& fm/form {:form form
|
||||
:on-submit on-submit
|
||||
:class (stl/css :team-form)}
|
||||
|
||||
[:div {:class (stl/css :modal-header)}
|
||||
(if team
|
||||
|
|
|
|||
|
|
@ -31,6 +31,10 @@
|
|||
margin-bottom: $s-24;
|
||||
}
|
||||
|
||||
.team-form {
|
||||
min-width: $s-400;
|
||||
}
|
||||
|
||||
.group-name-input {
|
||||
@extend .input-element-label;
|
||||
label {
|
||||
|
|
@ -44,7 +48,6 @@
|
|||
|
||||
input {
|
||||
@include bodySmallTypography;
|
||||
margin-top: $s-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -348,6 +348,7 @@
|
|||
(def ^:icon easing-ease-in-out-refactor (icon-xref :easing-ease-in-out-refactor))
|
||||
(def ^:icon effects-refactor (icon-xref :effects-refactor))
|
||||
(def ^:icon elipse-refactor (icon-xref :elipse-refactor))
|
||||
(def ^:icon exit-refactor (icon-xref :exit-refactor))
|
||||
(def ^:icon expand-refactor (icon-xref :expand-refactor))
|
||||
(def ^:icon feedback-refactor (icon-xref :feedback-refactor))
|
||||
(def ^:icon fill-content-refactor (icon-xref :fill-content-refactor))
|
||||
|
|
@ -394,6 +395,7 @@
|
|||
(def ^:icon layers-refactor (icon-xref :layers-refactor))
|
||||
(def ^:icon locate-refactor (icon-xref :locate-refactor))
|
||||
(def ^:icon lock-refactor (icon-xref :lock-refactor))
|
||||
(def ^:icon logo-refactor (icon-xref :penpot-logo-icon)) ;; This icon will not change
|
||||
(def ^:icon library-refactor (icon-xref :library-refactor))
|
||||
(def ^:icon margin-bottom-refactor (icon-xref :margin-bottom-refactor))
|
||||
(def ^:icon margin-left-refactor (icon-xref :margin-left-refactor))
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@
|
|||
:links (:links message)
|
||||
:content (:content message)}
|
||||
|
||||
is-context-msg (and (nil? (:timeout message)) (nil? (:actions message)))
|
||||
is-toast-msg (or (= :toast (:notification-type message)) (some? (:timeout message)))
|
||||
is-inline-msg (or (= :inline (:notification-type message)) (and (some? (:position message)) (= :floating (:position message))))]
|
||||
|
||||
|
|
@ -42,5 +43,7 @@
|
|||
[:& toast-notification toast-message]
|
||||
is-inline-msg
|
||||
[:& inline-notification inline-message]
|
||||
is-context-msg
|
||||
[:& context-notification context-message]
|
||||
:else
|
||||
[:& context-notification context-message]))))
|
||||
[:& toast-notification toast-message]))))
|
||||
|
|
|
|||
|
|
@ -44,10 +44,10 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
--bg-color: var(--alert-background-color-info);
|
||||
--fg-color: var(--alert-text-foreground-color-info);
|
||||
--icon-color: var(--alert-icon-foreground-color-info);
|
||||
--border-color: var(--alert-border-color-info);
|
||||
--toast-notification-bg-color: var(--alert-background-color-info);
|
||||
--toast-notification-fg-color: var(--alert-text-foreground-color-info);
|
||||
--toast-notification-icon-color: var(--alert-icon-foreground-color-info);
|
||||
--toast-notification-border-color: var(--alert-border-color-info);
|
||||
}
|
||||
|
||||
.default {
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@
|
|||
(let [valign (:vertical-align node "top")
|
||||
base #js {:height (fmt/format-pixels height)
|
||||
:width (fmt/format-pixels width)
|
||||
:fontFamily "sourcesanspro"
|
||||
:display "flex"
|
||||
:whiteSpace "break-spaces"}]
|
||||
(cond-> base
|
||||
|
|
|
|||
|
|
@ -135,6 +135,7 @@
|
|||
(fn [_]
|
||||
(wapi/write-to-clipboard current-link)
|
||||
(st/emit! (msg/show {:type :info
|
||||
:notification-type :toast
|
||||
:content (tr "common.share-link.link-copied-success")
|
||||
:timeout 1000})))
|
||||
|
||||
|
|
|
|||
|
|
@ -107,9 +107,9 @@
|
|||
(-> (image-size href)
|
||||
(p/then
|
||||
(fn [{:keys [width height]}]
|
||||
(when (or (not (mth/close? width fixed-width 2))
|
||||
(not (mth/close? height fixed-height 2)))
|
||||
(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))))))
|
||||
(when (or (not (mth/close? width fixed-width 5))
|
||||
(not (mth/close? height fixed-height 5)))
|
||||
(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "check-thumbnail-size"))))))))
|
||||
|
||||
(defn root-frame-wrapper-factory
|
||||
[shape-wrapper]
|
||||
|
|
@ -175,7 +175,7 @@
|
|||
(mf/with-effect []
|
||||
(when-not (some? thumbnail-uri)
|
||||
(tm/schedule-on-idle
|
||||
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame"))))
|
||||
#(st/emit! (dwt/request-thumbnail file-id page-id frame-id "frame" "root-frame"))))
|
||||
#(when-let [task (mf/ref-val task-ref)]
|
||||
(d/close! task)))
|
||||
|
||||
|
|
|
|||
|
|
@ -224,10 +224,10 @@
|
|||
:on-double-click rename-color-clicked}
|
||||
|
||||
(if (= (:name color) default-name)
|
||||
[:span {:class (stl/css :default-name-only)} default-name]
|
||||
[:span {:class (stl/css :default-name)} default-name]
|
||||
[:*
|
||||
[:span {:class (stl/css :name)} (:name color)]
|
||||
[:span {:class (stl/css :default-name)} default-name]])])
|
||||
(:name color)
|
||||
[:span {:class (stl/css :default-name :default-name-with-color)} default-name]])])
|
||||
|
||||
(when local?
|
||||
[:& cmm/assets-context-menu
|
||||
|
|
|
|||
|
|
@ -6,10 +6,15 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// TODO: we should be using subgrid in the common "assets component" to avoid
|
||||
// using this SCSS variable here (we cannot use a CSS var in this CSS module because
|
||||
// the elements are not part of the same cascade).
|
||||
$assets-button-width: $s-28;
|
||||
|
||||
.assets-btn {
|
||||
@extend .button-tertiary;
|
||||
height: $s-32;
|
||||
width: $s-28;
|
||||
width: $assets-button-width;
|
||||
padding: 0;
|
||||
border-radius: $br-8;
|
||||
svg {
|
||||
|
|
@ -28,10 +33,12 @@
|
|||
|
||||
.asset-list-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr #{$assets-button-width};
|
||||
align-items: center;
|
||||
height: $s-32;
|
||||
padding: $s-8;
|
||||
padding-inline-end: 0;
|
||||
margin-bottom: $s-4;
|
||||
border-radius: $br-8;
|
||||
background-color: var(--assets-item-background-color);
|
||||
|
|
@ -48,7 +55,6 @@
|
|||
@include bodySmallTypography;
|
||||
@include removeInputStyle;
|
||||
flex-grow: 1;
|
||||
height: $s-28;
|
||||
max-width: calc(var(--parent-size) - (var(--depth) * var(--layer-indentation-size)));
|
||||
margin: 0;
|
||||
color: var(--layer-row-foreground-color);
|
||||
|
|
@ -63,25 +69,23 @@
|
|||
@include flexCenter;
|
||||
height: 100%;
|
||||
justify-content: flex-start;
|
||||
margin-right: $s-4;
|
||||
margin-inline-end: $s-4;
|
||||
}
|
||||
|
||||
.name-block {
|
||||
@include bodySmallTypography;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
@include textEllipsis;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
.default-name-only,
|
||||
.name {
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
margin-right: $s-6;
|
||||
@include textEllipsis;
|
||||
}
|
||||
.default-name {
|
||||
min-width: 0;
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
}
|
||||
color: var(--assets-item-name-foreground-color);
|
||||
}
|
||||
|
||||
.default-name {
|
||||
margin-inline-start: $s-4;
|
||||
color: var(--assets-item-name-foreground-color-rest);
|
||||
}
|
||||
|
||||
.default-name-with-color {
|
||||
margin-left: $s-6;
|
||||
}
|
||||
|
||||
.element-name {
|
||||
|
|
|
|||
|
|
@ -380,7 +380,8 @@
|
|||
{:value "" :label (tr "workspace.options.interaction-none")})]
|
||||
destination-options
|
||||
(mf/with-memo [frames-opts default-opts]
|
||||
(d/concat-vec default-opts frames-opts))
|
||||
(let [sorted-frames-opts (sort-by :label frames-opts)]
|
||||
(d/concat-vec default-opts sorted-frames-opts)))
|
||||
|
||||
shape-parents-opts (get-shared-frames-options shape-parents)
|
||||
|
||||
|
|
|
|||
|
|
@ -918,8 +918,11 @@
|
|||
on-gap-change
|
||||
(fn [multiple? type val]
|
||||
(let [val (mth/finite val 0)]
|
||||
(if ^boolean multiple?
|
||||
(cond
|
||||
^boolean multiple?
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
|
||||
|
||||
(some? type)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
|
||||
|
||||
;; Padding
|
||||
|
|
@ -941,7 +944,7 @@
|
|||
(and (= type :simple) (= prop :p2))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||
|
||||
:else
|
||||
(some? prop)
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))))
|
||||
|
||||
;; Grid-direction
|
||||
|
|
@ -1126,16 +1129,16 @@
|
|||
:on-change on-column-justify-change}]
|
||||
[:& justify-grid-row {:is-column false
|
||||
:value grid-justify-content-row
|
||||
:on-change on-row-justify-change}]]]
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& gap-section {:on-change on-gap-change
|
||||
:value (:layout-gap values)}]]
|
||||
:on-change on-row-justify-change}]]
|
||||
|
||||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-change-style on-padding-type-change
|
||||
:on-change on-padding-change}]]
|
||||
[:div {:class (stl/css :row)}
|
||||
[:& gap-section {:on-change on-gap-change
|
||||
:value (:layout-gap values)}]]
|
||||
[:div {:class (stl/css :row :padding-section)}
|
||||
[:& padding-section {:value (:layout-padding values)
|
||||
:type (:layout-padding-type values)
|
||||
:on-change-style on-padding-type-change
|
||||
:on-change on-padding-change}]]]
|
||||
|
||||
nil))]))
|
||||
|
||||
|
|
@ -1156,9 +1159,10 @@
|
|||
(mf/use-fn
|
||||
(mf/deps ids)
|
||||
(fn [multiple? type val]
|
||||
(if multiple?
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))))
|
||||
(let [val (mth/finite val 0)]
|
||||
(if multiple?
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}}))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-gap {type val}}))))))
|
||||
|
||||
;; Padding
|
||||
on-padding-type-change
|
||||
|
|
@ -1169,15 +1173,16 @@
|
|||
|
||||
on-padding-change
|
||||
(fn [type prop val]
|
||||
(cond
|
||||
(and (= type :simple) (= prop :p1))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
|
||||
(let [val (mth/finite val 0)]
|
||||
(cond
|
||||
(and (= type :simple) (= prop :p1))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p3 val}}))
|
||||
|
||||
(and (= type :simple) (= prop :p2))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||
(and (= type :simple) (= prop :p2))
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}}))
|
||||
|
||||
:else
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))
|
||||
:else
|
||||
(st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))
|
||||
|
||||
;; Align grid
|
||||
align-items-row (:layout-align-items values)
|
||||
|
|
@ -1308,7 +1313,8 @@
|
|||
:on-change on-row-justify-change}]
|
||||
|
||||
[:button {:on-click handle-locate-grid
|
||||
:class (stl/css :locate-button)}
|
||||
:class (stl/css :locate-button)
|
||||
:title (tr "workspace.layout_grid.editor.top-bar.locate.tooltip")}
|
||||
i/locate-refactor]]
|
||||
|
||||
[:div {:class (stl/css :row)}
|
||||
|
|
|
|||
|
|
@ -736,20 +736,23 @@
|
|||
[track-type value]
|
||||
(cond
|
||||
(str/ends-with? value "%")
|
||||
[:percent value-int]
|
||||
[:percent (d/nilv value-int 50)]
|
||||
|
||||
(str/ends-with? value "FR")
|
||||
[:flex value-int]
|
||||
[:flex (d/nilv value-int 1)]
|
||||
|
||||
(some? value-int)
|
||||
[:fixed value-int]
|
||||
[:fixed (d/nilv value-int 100)]
|
||||
|
||||
(or (= value "AUTO") (= "" value))
|
||||
[:auto nil])]
|
||||
:else
|
||||
[:auto nil])
|
||||
|
||||
track-data (when (some? track-type) {:type track-type :value value})]
|
||||
|
||||
(dom/set-value! (mf/ref-val track-input-ref) (format-size track-data))
|
||||
(if (some? track-type)
|
||||
(do (st/emit! (dwsl/change-layout-track [(:id shape)] type index {:type track-type :value value}))
|
||||
(dom/set-data! target "default-value" (format-size {:type track-type :value value})))
|
||||
(do (st/emit! (dwsl/change-layout-track [(:id shape)] type index track-data))
|
||||
(dom/set-data! target "default-value" (format-size track-data)))
|
||||
(obj/set! target "value" (dom/get-attribute target "data-default-value"))))))
|
||||
|
||||
handle-keydown-track-input
|
||||
|
|
|
|||
|
|
@ -3508,6 +3508,9 @@ msgstr "Editing grid"
|
|||
msgid "workspace.layout_grid.editor.top-bar.locate"
|
||||
msgstr "Locate"
|
||||
|
||||
msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
|
||||
msgstr "Locate grid layout"
|
||||
|
||||
msgid "workspace.layout_grid.editor.top-bar.done"
|
||||
msgstr "Done"
|
||||
|
||||
|
|
|
|||
|
|
@ -3570,6 +3570,9 @@ msgstr "Editando rejilla"
|
|||
msgid "workspace.layout_grid.editor.top-bar.locate"
|
||||
msgstr "Mostrar"
|
||||
|
||||
msgid "workspace.layout_grid.editor.top-bar.locate.tooltip"
|
||||
msgstr "Mostrar grid layout"
|
||||
|
||||
msgid "workspace.layout_grid.editor.top-bar.done"
|
||||
msgstr "Hecho"
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue