Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-13 10:38:13 -05:00
Code Issues Activity

Merge pull request #4034 from penpot/eva-bugfixing-ui-9

Browse source 
🐛 Fix some frontend errors
This commit is contained in:
Aitor Moreno 2024-01-23 12:50:39 +01:00 • committed by GitHub
commit 78443353df
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 170 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -293,11 +293,11 @@
// ALERTS & STATUS
--alert-background-color-ok: var(--ok-color);
--alert-foreground-color-ok: var(--color-background-secondary);
--alert-foreground-color-ok: var(--dark-gray-2); // We don't want this color to change with theme
--alert-background-color-warning: var(--warning-color);
--alert-foreground-color-warning: var(--color-foreground-primary);
--alert-foreground-color-warning: var(--white); // We don't want this color to change with theme
--alert-background-color-error: var(--error-color);
--alert-foreground-color-error: var(--color-foreground-primary);
--alert-foreground-color-error: var(--white); // We don't want this color to change with theme
--alert-background-color-neutral: var(--color-background-quaternary);
--alert-foreground-color-neutral: var(--color-foreground-secondary);
--alert-foreground-color-neutral-active: var(--color-foreground-primary);

14
frontend/src/app/main/ui/dashboard/sidebar.scss
View file

@ -46,7 +46,7 @@
height: $s-48;
display: flex;
width: 100%;
border: $s-1 solid transparent;
border: $s-1 solid $db-tertiary;
align-items: center;
svg {
@ -76,7 +76,6 @@
padding: 0 $s-12;
background-color: transparent;
border: none;
border-right: $s-1 solid $db-primary;
}
.team-name {
@ -114,16 +113,13 @@
}
.switch-options {
display: flex;
@include buttonStyle;
@include flexCenter;
max-width: $s-24;
min-width: $s-28;
border-left: $s-1 solid $df-primary;
justify-content: center;
align-items: center;
cursor: pointer;
background-color: transparent;
border: none;
height: 100%;
border-left: $s-1 solid $db-primary;
background-color: transparent;
svg {
fill: $df-secondary;

256
frontend/src/app/main/ui/workspace/comments.scss
View file

@ -9,132 +9,148 @@
.comments-section {
position: relative;
background-color: var(--panel-background-color);
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
display: flex;
justify-content: space-between;
align-items: center;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
border-radius: $br-8;
background-color: var(--panel-title-background-color);
span {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
display: grid;
grid-template-rows: $s-40 $s-48 1fr;
}
.close-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
border-radius: $br-6;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
.comments-section-title {
@include flexCenter;
@include tabTitleTipography;
display: flex;
justify-content: space-between;
align-items: center;
height: $s-32;
min-height: $s-32;
margin: $s-8 $s-8 0 $s-8;
border-radius: $br-8;
background-color: var(--panel-title-background-color);
span {
@include flexCenter;
flex-grow: 1;
color: var(--title-foreground-color-hover);
}
}
.close-button {
@extend .button-tertiary;
height: $s-28;
width: $s-28;
border-radius: $br-6;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.mode-dropdown-wrapper {
@include buttonStyle;
@extend .asset-element;
background-color: var(--color-background-tertiary);
display: flex;
width: $s-256;
height: $s-32;
padding: $s-8;
border-radius: $br-8;
margin: $s-16 auto 0 auto;
cursor: pointer;
position: relative;
}
.mode-label {
padding-right: 8px;
flex-grow: 1;
display: flex;
justify-content: flex-start;
}
.icon {
@include flexCenter;
padding-right: 8px;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
}
.comment-mode-dropdown {
@extend .dropdown-wrapper;
top: $s-80;
left: $s-12;
width: $s-256;
}
.dropdown-item {
@extend .dropdown-element-base;
justify-content: space-between;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
stroke: transparent;
}
}
.mode-dropdown-wrapper {
@include buttonStyle;
@extend .asset-element;
background-color: var(--color-background-tertiary);
display: flex;
width: $s-256;
height: $s-32;
padding: $s-8;
border-radius: $br-8;
margin: $s-16 auto 0 auto;
cursor: pointer;
position: relative;
.mode-label {
padding-right: 8px;
flex-grow: 1;
display: flex;
justify-content: flex-start;
}
.icon {
@include flexCenter;
padding-right: 8px;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
transform: rotate(90deg);
stroke: var(--icon-foreground);
}
.label {
@include titleTipography;
}
&:hover {
.icon svg {
stroke: transparent;
}
}
.comment-mode-dropdown {
@extend .dropdown-wrapper;
top: $s-80;
left: $s-12;
width: $s-256;
.dropdown-item {
@extend .dropdown-element-base;
justify-content: space-between;
.icon {
@include flexCenter;
height: $s-24;
width: $s-24;
svg {
@extend .button-icon-small;
stroke: transparent;
}
}
.label {
@include titleTipography;
}
&:hover {
.icon svg {
stroke: transparent;
}
}
&.selected {
.label {
color: var(--menu-foreground-color);
}
.icon svg {
stroke: var(--icon-foreground-hover);
}
}
&.selected {
.label {
color: var(--menu-foreground-color);
}
.separator {
height: $s-12;
}
}
.comments-section-content {
.thread-groups {
display: flex;
flex-direction: column;
gap: $s-24;
}
.thread-group-placeholder {
@include flexColumn;
align-items: center;
justify-content: flex-start;
margin-top: $s-36;
.placeholder-icon {
@include flexCenter;
height: $s-48;
width: $s-48;
border-radius: $br-circle;
background-color: var(--empty-message-background-color);
svg {
@extend .button-icon;
height: $s-28;
width: $s-28;
stroke: var(--empty-message-foreground-color);
}
}
.placeholder-label {
@include titleTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);
}
.icon svg {
stroke: var(--icon-foreground-hover);
}
}
}
.separator {
height: $s-12;
}
.comments-section-content {
height: 100%;
overflow-y: auto;
}
.thread-groups {
display: flex;
flex-direction: column;
gap: $s-24;
}
.thread-group-placeholder {
@include flexColumn;
align-items: center;
justify-content: flex-start;
margin-top: $s-36;
}
.placeholder-icon {
@include flexCenter;
height: $s-48;
width: $s-48;
border-radius: $br-circle;
background-color: var(--empty-message-background-color);
svg {
@extend .button-icon;
height: $s-28;
width: $s-28;
stroke: var(--empty-message-foreground-color);
}
}
.placeholder-label {
@include titleTipography;
text-align: center;
width: $s-184;
color: var(--empty-message-foreground-color);
}

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

@ -101,15 +101,15 @@
::mf/register-as :name-group-dialog}
[{:keys [path last-path accept] :as ctx
:or {path "" last-path ""}}]
(let [initial (mf/use-memo
(mf/deps last-path)
(constantly {:asset-name last-path}))
form (fm/use-form :spec ::name-group-form
:validators [(fm/validate-not-empty :name (tr "auth.name.not-all-space"))
(fm/validate-length :name fm/max-length-allowed (tr "auth.name.too-long"))]
:initial initial)
(let [initial (mf/use-memo
(mf/deps last-path)
(constantly {:asset-name last-path}))
form (fm/use-form :spec ::name-group-form
:validators [(fm/validate-not-empty :asset-name (tr "auth.name.not-all-space"))
(fm/validate-length :asset-name fm/max-length-allowed (tr "auth.name.too-long"))]
:initial initial)
create? (empty? path)
create? (empty? path)
on-close (mf/use-fn #(modal/hide!))
@ -122,6 +122,7 @@
(accept asset-name)
(accept path asset-name))
(modal/hide!))))]
[:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-container)}
[:div {:class (stl/css :modal-header)}

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

@ -17,7 +17,6 @@
.tab-spacing {
margin-right: $s-12;
margin-bottom: $s-8;
}
.content-class {
@ -33,4 +32,5 @@
display: flex;
flex-direction: column;
gap: $s-8;
padding-top: $s-8;
}

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

@ -55,6 +55,9 @@
toggle-more-options
(mf/use-fn #(swap! state* update :show-more-options not))
close-more-options
(mf/use-fn #(swap! state* assoc :show-more-options false))
handle-toggle-visibility
(mf/use-fn
(mf/deps grid)
@ -125,10 +128,15 @@
(assoc-in [:color :color] color)
(update :color dissoc :value))]
(when on-change
(on-change (assoc grid :params params))))))
(on-change (assoc grid :params params)))
(close-more-options))))
handle-set-as-default
(mf/use-fn (mf/deps grid) #(on-save-default grid))
(mf/use-fn
(mf/deps grid)
(fn []
(on-save-default grid)
(close-more-options)))
is-default (= (->> grid :params)
(->> grid :type default-grid-params))]
@ -180,7 +188,7 @@
[:& advanced-options {:class (stl/css :grid-advanced-options)
:visible? open?
:on-close toggle-advanced-options}
;; square
;; square
(when (= :square type)
[:div {:class (stl/css :square-row)}
[:div {:class (stl/css :advanced-row)}
@ -269,15 +277,14 @@
[:button {:class (stl/css-case :show-more-options true
:selected show-more-options?)
:on-click toggle-more-options}
:on-click toggle-more-options
:disabled is-default}
i/menu-refactor]
(when show-more-options?
[:div {:class (stl/css :more-options)}
[:button {:disabled is-default
:class (stl/css :option-btn)
[:button {:class (stl/css :option-btn)
:on-click handle-use-default} (tr "workspace.options.grid.params.use-default")]
[:button {:disabled is-default
:class (stl/css :option-btn)
[:button {:class (stl/css :option-btn)
:on-click handle-set-as-default} (tr "workspace.options.grid.params.set-default")]])]])])]))
(mf/defc frame-grid

3
frontend/src/app/main/ui/workspace/viewport/widgets.cljs
View file

@ -144,8 +144,7 @@
:width 12
:height 12
:class "workspace-frame-icon"
:style {:stroke-width (/ 1 zoom)
:stroke color
:style {:stroke color
:fill "none"}
:visibility (if show-artboard-names? "visible" "hidden")}
(cond