Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-16 17:01:33 -05:00
Code Issues Activity

Merge remote-tracking branch 'origin/staging' into develop

Browse source
This commit is contained in:
Andrey Antukh 2024-04-02 11:35:30 +02:00
commit d20a92ce50
13 changed files with 114 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -229,7 +229,7 @@
--assets-title-background-color: var(--color-background-primary);
--assets-item-background-color: var(--color-background-tertiary);
--assets-item-background-color-hover: var(--color-background-quaternary);
--assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
--assets-item-name-background-color: var(--color-background-primary);
--assets-item-name-foreground-color-rest: var(--color-foreground-secondary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
--assets-item-name-foreground-color-hover: var(--color-foreground-primary);
@ -241,6 +241,7 @@
--assets-component-background-color-disabled: var(--df-secondary;);
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-accent-tertiary);
--assets-component-second-border-selected: var(--color-background-primary);
--radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-quaternary);
@ -434,7 +435,6 @@
--button-icon-background-color-selected: var(--color-background-primary);
--button-icon-border-color-selected: var(--color-background-secondary);
--assets-item-name-background-color: var(--color-background-primary);
--assets-item-name-foreground-color: var(--color-foreground-primary);
--text-editor-selection-background-color: var(--la-tertiary-70);

9
frontend/src/app/main/ui/auth.cljs
View file

@ -27,13 +27,16 @@
(when show-all?
[:div {:class (stl/css :terms-login)}
(when show-terms?
[:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
[:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)}
(tr "auth.terms-of-service")])
(when show-all?
[:span (dm/str " " (tr "labels.and") " ")])
[:span {:class (stl/css :and-text)}
(dm/str " " (tr "labels.and") " ")])
(when show-privacy?
[:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
[:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)}
(tr "auth.privacy-policy")])])))
(mf/defc auth
{::mf/props :obj}

31
frontend/src/app/main/ui/auth.scss
View file

@ -49,7 +49,7 @@
gap: $s-24;
height: fit-content;
max-width: $s-412;
padding-bottom: $s-8;
padding-block-end: $s-8;
position: relative;
width: 100%;
}
@ -60,33 +60,32 @@
left: $s-20;
display: flex;
justify-content: flex-start;
margin-bottom: $s-52;
width: $s-120;
margin-block-end: $s-52;
svg {
width: $s-120;
height: $s-40;
fill: $df-primary;
stroke: $df-primary;
fill: var(--main-icon-foreground);
}
}
.terms-login {
font-size: $fs-11;
width: 100%;
@include bodySmallTypography;
display: flex;
gap: $s-4;
justify-content: center;
width: 100%;
}
a {
font-weight: $fw700;
color: $da-primary;
&:hover {
text-decoration: underline;
}
}
span {
border-bottom: $s-1 solid transparent;
color: $df-secondary;
.and-text {
border-bottom: $s-1 solid transparent;
color: var(--title-foreground-color);
}
.auth-link {
color: var(--link-foreground-color);
&:hover {
text-decoration: underline;
}
}

5
frontend/src/app/main/ui/hooks.cljs
View file

@ -177,8 +177,9 @@
on-mount
(fn []
(let [dom (mf/ref-val ref)]
(.setAttribute dom "draggable" true) ;; In firefox it needs to be draggable for problems with event handling.
;; It will stop the drag operation in on-drag-start
;; In firefox it needs to be draggable for problems with event handling.
;; It will stop the drag operation in on-drag-start
(.setAttribute dom "draggable" (and draggable? (not disabled)))
;; Register all events in the (default) bubble mode, so that they
;; are captured by the most leaf item. The handler will stop

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

@ -72,7 +72,9 @@
(mf/deps project)
(fn []
(close-modals)
(st/emit! (dw/go-to-dashboard project))))
(st/emit! (dw/set-options-mode :design)
(dw/set-workspace-read-only false)
(dw/go-to-dashboard project))))
nav-to-project
(mf/use-fn

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

@ -28,7 +28,7 @@
[app.util.array :as array]
[app.util.dom :as dom]
[app.util.dom.dnd :as dnd]
[app.util.i18n :as i18n :refer [tr]]
[app.util.i18n :as i18n :refer [tr c]]
[app.util.strings :refer [matches-search]]
[app.util.timers :as ts]
[cljs.spec.alpha :as s]
@ -216,8 +216,8 @@
(defn create-counter-element
[asset-count]
(let [counter-el (dom/create-element "div")]
(dom/set-property! counter-el "class" "drag-counter")
(dom/set-text! counter-el (str asset-count))
(dom/set-property! counter-el "class" (stl/css :drag-counter))
(dom/set-text! counter-el (tr "workspace.assets.sidebar.components" (c asset-count)))
counter-el))
(defn set-drag-image

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

@ -45,3 +45,21 @@
.asset-section.opened {
margin-bottom: $s-12;
}
.drag-counter {
@include bodySmallTypography;
@include textEllipsis;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc($s-24 - $s-2);
background-color: var(--assets-item-name-background-color);
color: var(--assets-item-name-foreground-color);
display: flex;
justify-content: flex-start;
align-items: center;
margin: $s-4;
padding-inline: $s-4;
z-index: 2;
}

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

@ -141,14 +141,16 @@
on-context-menu
(mf/use-fn
(mf/deps on-context-menu component-id)
(partial on-context-menu component-id))]
(partial on-context-menu component-id))
renaming? (= renaming (:id component))]
[:div {:ref item-ref
:class (stl/css-case :selected (contains? selected (:id component))
:grid-cell listing-thumbs?
:enum-item (not listing-thumbs?))
:id (dm/str "component-shape-id-" (:id component))
:draggable (not read-only?)
:draggable (and (not read-only?) (not renaming?))
:on-click on-component-click
:on-double-click on-component-double-click
:on-context-menu on-context-menu
@ -160,22 +162,21 @@
(when (and (some? root-shape)
(some? container))
[:*
(let [renaming? (= renaming (:id component))]
[:*
[:& editable-label
{:class (stl/css-case :cell-name listing-thumbs?
:item-name (not listing-thumbs?)
:editing renaming?)
:value (cfh/merge-path-item (:path component) (:name component))
:tooltip (cfh/merge-path-item (:path component) (:name component))
:display-value (:name component)
:editing renaming?
:disable-dbl-click true
:on-change do-rename
:on-cancel cancel-rename}]
[:*
[:& editable-label
{:class (stl/css-case :cell-name listing-thumbs?
:item-name (not listing-thumbs?)
:editing renaming?)
:value (cfh/merge-path-item (:path component) (:name component))
:tooltip (cfh/merge-path-item (:path component) (:name component))
:display-value (:name component)
:editing renaming?
:disable-dbl-click true
:on-change do-rename
:on-cancel cancel-rename}]
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])])
(when ^boolean dragging?
[:div {:class (stl/css :dragging)}])]
(when visible?
[:& cmm/component-item-thumbnail {:file-id file-id

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

@ -35,12 +35,13 @@
position: absolute;
left: $s-4;
bottom: $s-4;
height: $s-20;
height: calc($s-24 - $s-2);
width: calc(100% - 2 * $s-4);
padding: $s-2;
padding: $s-2 $s-6;
column-gap: $s-4;
border-radius: $br-2;
border-radius: $br-4;
background-color: var(--assets-item-name-background-color);
border: $s-1 solid transparent;
color: var(--assets-item-name-foreground-color);
input {
@include textEllipsis;
@ -55,7 +56,7 @@
height: 100%;
}
&.editing {
border: $s-1 solid var(--input-border-color-focus);
border-color: var(--input-border-color-focus);
border-radius: $br-4;
display: flex;
align-items: center;
@ -65,12 +66,24 @@
&:hover {
.cell-name {
display: block;
display: grid;
grid-template-columns: 1fr auto;
}
}
&.selected {
border: $s-1 solid var(--assets-item-border-color);
border: $s-2 solid var(--assets-item-border-color);
&::before {
content: " ";
position: absolute;
z-index: $z-index-2;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: $s-4 solid var(--assets-component-second-border-selected);
border-radius: $br-8;
}
}
}

2
frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
View file

@ -196,6 +196,7 @@
[:div {:class (stl/css :cap-select)}
[:& select
{:default-value (:stroke-cap-start stroke)
:dropdown-class (stl/css :stroke-cap-dropdown-start)
:options stroke-caps-options
:on-change on-caps-start-change}]]
@ -206,5 +207,6 @@
[:div {:class (stl/css :cap-select)}
[:& select
{:default-value (:stroke-cap-end stroke)
:dropdown-class (stl/css :stroke-cap-dropdown)
:options stroke-caps-options
:on-change on-caps-end-change}]]])]))

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

@ -23,6 +23,19 @@
.cap-select {
width: $s-124;
}
.stroke-cap-dropdown,
.stroke-cap-dropdown-start {
min-width: $s-124;
width: fit-content;
max-width: $s-252;
right: 0;
left: unset;
}
.stroke-cap-dropdown-start {
left: 0;
right: unset;
}
.swap-caps-btn {
@extend .button-secondary;
height: $s-32;

6
frontend/translations/en.po
View file

@ -3711,6 +3711,12 @@ msgstr "Swap component"
msgid "workspace.options.component.swap.empty"
msgstr "There are no assets in this library yet"
#: src/app/main/ui/workspace/sidebar/assets/common.cljs
msgid "workspace.assets.sidebar.components"
msgid_plural "workspace.assets.sidebar.components"
msgstr[0] "1 component"
msgstr[1] "%s components"
#: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
msgid "workspace.options.constraints"
msgstr "Constraints"

6
frontend/translations/es.po
View file

@ -3711,6 +3711,12 @@ msgstr "Desvincular todas las tipografías"
msgid "workspace.libraries.typography"
msgstr "%s tipografías"
#: src/app/main/ui/workspace/sidebar/assets/common.cljs
msgid "workspace.assets.sidebar.components"
msgid_plural "workspace.assets.sidebar.components"
msgstr[0] "1 componente"
msgstr[1] "%s componentes"
#: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.update"
msgstr "Actualizar"