Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-15 03:28:25 -05:00
Code Issues Activity

Merge pull request #4282 from penpot/eva-bugfixing-6

Browse source 
🐛 Fix some UI errors
This commit is contained in:
Alejandro 2024-03-18 09:44:45 +01:00 • committed by GitHub
commit db59de8494
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 180 additions and 141 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/app/main/ui/workspace/context_menu.cljs
View file

@ -652,16 +652,15 @@
[:& dropdown {:show (boolean mdata) [:& dropdown {:show (boolean mdata)
:on-close #(st/emit! dw/hide-context-menu)} :on-close #(st/emit! dw/hide-context-menu)}
[:ul {:class (stl/css :workspace-context-menu) [:div {:class (stl/css :workspace-context-menu)
:ref dropdown-ref :ref dropdown-ref
:style {:top top :left left} :style {:top top :left left}
:on-context-menu prevent-default} :on-context-menu prevent-default}
(case (:kind mdata)
:shape [:& shape-context-menu {:mdata mdata}]
:page [:& page-item-context-menu {:mdata mdata}]
:grid-track [:& grid-track-context-menu {:mdata mdata}]
:grid-cells [:& grid-cells-context-menu {:mdata mdata}]
[:& viewport-context-menu {:mdata mdata}])]]))
[:ul {:class (stl/css :context-list)}
(case (:kind mdata)
:shape [:& shape-context-menu {:mdata mdata}]
:page [:& page-item-context-menu {:mdata mdata}]
:grid-track [:& grid-track-context-menu {:mdata mdata}]
:grid-cells [:& grid-cells-context-menu {:mdata mdata}]
[:& viewport-context-menu {:mdata mdata}])]]]))

18
frontend/src/app/main/ui/workspace/context_menu.scss
View file

@ -6,24 +6,30 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.workspace-context-menu, .workspace-context-menu {
.workspace-context-submenu {
@include menuShadow;
position: absolute; position: absolute;
top: $s-40; top: $s-40;
left: $s-736; left: $s-736;
display: flex; z-index: $z-index-4;
flex-direction: column; }
.context-list,
.workspace-context-submenu {
@include menuShadow;
display: grid;
width: $s-240; width: $s-240;
padding: $s-4; padding: $s-4;
border-radius: $br-8; border-radius: $br-8;
border: $s-2 solid var(--panel-border-color); border: $s-2 solid var(--panel-border-color);
background-color: var(--menu-background-color); background-color: var(--menu-background-color);
z-index: $z-index-4;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
} }
.workspace-context-submenu {
position: absolute;
}
.separator { .separator {
height: $s-12; height: $s-12;
} }

154
frontend/src/app/main/ui/workspace/viewport/path_actions.cljs
View file

@ -16,6 +16,38 @@
[app.util.path.tools :as upt] [app.util.path.tools :as upt]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private pentool-icon
(i/icon-xref :pentool (stl/css :pentool-icon :pathbar-icon)))
(def ^:private move-icon
(i/icon-xref :move (stl/css :move-icon :pathbar-icon)))
(def ^:private add-icon
(i/icon-xref :add (stl/css :add-icon :pathbar-icon)))
(def ^:private remove-icon
(i/icon-xref :remove-icon (stl/css :remove-icon :pathbar-icon)))
(def ^:private merge-nodes-icon
(i/icon-xref :merge-nodes (stl/css :merge-nodes-icon :pathbar-icon)))
(def ^:private join-nodes-icon
(i/icon-xref :join-nodes (stl/css :join-nodes-icon :pathbar-icon)))
(def ^:private separate-nodes-icon
(i/icon-xref :separate-nodes (stl/css :separate-nodes-icon :pathbar-icon)))
(def ^:private to-corner-icon
(i/icon-xref :to-corner (stl/css :to-corner-icon :pathbar-icon)))
(def ^:private to-curve-icon
(i/icon-xref :to-curve (stl/css :to-curve-icon :pathbar-icon)))
(def ^:private snap-nodes-icon
(i/icon-xref :snap-nodes (stl/css :snap-nodes-icon :pathbar-icon)))
(defn check-enabled [content selected-points] (defn check-enabled [content selected-points]
(let [segments (upt/get-segments content selected-points) (let [segments (upt/get-segments content selected-points)
num-segments (count segments) num-segments (count segments)
@ -36,6 +68,7 @@
:join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments)) :join-nodes (and points-selected? (>= num-points 2) (< num-segments max-segments))
:separate-nodes segments-selected?})) :separate-nodes segments-selected?}))
(mf/defc path-actions [{:keys [shape]}] (mf/defc path-actions [{:keys [shape]}]
(let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref) (let [{:keys [edit-mode selected-points snap-toggled] :as all} (mf/deref pc/current-edit-path-ref)
content (:content shape) content (:content shape)
@ -112,77 +145,76 @@
[:div {:class (stl/css :sub-actions)} [:div {:class (stl/css :sub-actions)}
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Draw Mode ;; Draw Mode
[:button [:button {:class (stl/css-case :is-toggled (= edit-mode :draw)
{:class (stl/css-case :is-toggled (= edit-mode :draw)) :topbar-btn true)
:title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes)) :title (tr "workspace.path.actions.draw-nodes" (sc/get-tooltip :draw-nodes))
:on-click on-select-draw-mode} :on-click on-select-draw-mode}
i/pentool] pentool-icon]
;; Edit mode ;; Edit mode
[:button [:button {:class (stl/css-case :is-toggled (= edit-mode :move)
{:class (stl/css-case :is-toggled (= edit-mode :move)) :topbar-btn true)
:title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes)) :title (tr "workspace.path.actions.move-nodes" (sc/get-tooltip :move-nodes))
:on-click on-select-edit-mode} :on-click on-select-edit-mode}
i/move]] move-icon]]
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Add Node ;; Add Node
[:button [:button {:disabled (not (:add-node enabled-buttons))
{:disabled (not (:add-node enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node)) :title (tr "workspace.path.actions.add-node" (sc/get-tooltip :add-node))
:on-click on-add-node} :on-click on-add-node}
i/add] add-icon]
;; Remove node ;; Remove node
[:button [:button {:disabled (not (:remove-node enabled-buttons))
{:disabled (not (:remove-node enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node)) :title (tr "workspace.path.actions.delete-node" (sc/get-tooltip :delete-node))
:on-click on-remove-node} :on-click on-remove-node}
i/remove-icon]] remove-icon]]
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
;; Merge Nodes ;; Merge Nodes
[:button [:button {:disabled (not (:merge-nodes enabled-buttons))
{:disabled (not (:merge-nodes enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes)) :title (tr "workspace.path.actions.merge-nodes" (sc/get-tooltip :merge-nodes))
:on-click on-merge-nodes} :on-click on-merge-nodes}
i/merge-nodes] merge-nodes-icon]
;; Join Nodes ;; Join Nodes
[:button [:button {:disabled (not (:join-nodes enabled-buttons))
{:disabled (not (:join-nodes enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes)) :title (tr "workspace.path.actions.join-nodes" (sc/get-tooltip :join-nodes))
:on-click on-join-nodes} :on-click on-join-nodes}
i/join-nodes] join-nodes-icon]
;; Separate Nodes ;; Separate Nodes
[:button [:button {:disabled (not (:separate-nodes enabled-buttons))
{:disabled (not (:separate-nodes enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes)) :title (tr "workspace.path.actions.separate-nodes" (sc/get-tooltip :separate-nodes))
:on-click on-separate-nodes} :on-click on-separate-nodes}
i/separate-nodes]] separate-nodes-icon]]
;; Make Corner
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
[:button ; Make Corner
{:disabled (not (:make-corner enabled-buttons)) [:button {:disabled (not (:make-corner enabled-buttons))
:title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner)) :class (stl/css :topbar-btn)
:on-click on-make-corner} :title (tr "workspace.path.actions.make-corner" (sc/get-tooltip :make-corner))
i/to-corner] :on-click on-make-corner}
to-corner-icon]
;; Make Curve ;; Make Curve
[:button [:button {:disabled (not (:make-curve enabled-buttons))
{:disabled (not (:make-curve enabled-buttons)) :class (stl/css :topbar-btn)
:title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve)) :title (tr "workspace.path.actions.make-curve" (sc/get-tooltip :make-curve))
:on-click on-make-curve} :on-click on-make-curve}
i/to-curve]] to-curve-icon]]
;; Toggle snap
[:div {:class (stl/css :sub-actions-group)} [:div {:class (stl/css :sub-actions-group)}
[:button ;; Toggle snap
{:class (stl/css-case :is-toggled snap-toggled) [:button {:class (stl/css-case :is-toggled snap-toggled
:title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes)) :topbar-btn true)
:on-click on-toggle-snap} :title (tr "workspace.path.actions.snap-nodes" (sc/get-tooltip :snap-nodes))
i/snap-nodes]]])) :on-click on-toggle-snap}
snap-nodes-icon]]]))

57
frontend/src/app/main/ui/workspace/viewport/path_actions.scss
View file

@ -19,41 +19,42 @@
padding: $s-8 $s-16; padding: $s-8 $s-16;
border-radius: $s-8; border-radius: $s-8;
gap: $s-16; gap: $s-16;
z-index: $z-index-10; border: $s-2 solid var(--panel-border-color);
z-index: $z-index-3;
background-color: var(--color-background-primary); background-color: var(--color-background-primary);
transition: transition:
top 0.3s, top 0.3s,
height 0.3s, height 0.3s,
opacity 0.3s; opacity 0.3s;
}
.sub-actions-group { .sub-actions-group {
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0; margin: 0;
opacity: $op-10; opacity: $op-10;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
}
button { .topbar-btn {
@extend .button-tertiary; --pathbar-icon-color: var(--color-foreground-secondary);
height: $s-36; @extend .button-tertiary;
width: $s-36; height: $s-36;
flex-shrink: 0; width: $s-36;
background-color: transparent; flex-shrink: 0;
border-radius: $s-8; background-color: transparent;
border: none; border-radius: $s-8;
margin: 0 $s-2; border: none;
&.is-toggled { margin: 0 $s-2;
background-color: var(--button-radio-background-color-active);
svg {
stroke: var(--button-radio-foreground-color-active);
}
}
svg { &.is-toggled {
@extend .button-icon; --pathbar-icon-color: var(--button-radio-foreground-color-active);
stroke: var(--color-foreground-secondary); background-color: var(--button-radio-background-color-active);
} }
}
.pathbar-icon {
@extend .button-icon;
stroke: var(--pathbar-icon-color);
} }
} }

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

@ -33,7 +33,8 @@
[:& i18n/tr-html {:tag-name "span" [:& i18n/tr-html {:tag-name "span"
:label "workspace.top-bar.view-only"}]] :label "workspace.top-bar.view-only"}]]
[:button {:class (stl/css :done-btn) [:button {:class (stl/css :done-btn)
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]])) :on-click handle-close-view-mode}
(tr "workspace.top-bar.read-only.done")]]]))
(mf/defc top-bar (mf/defc top-bar
{::mf/wrap [mf/memo]} {::mf/wrap [mf/memo]}
@ -70,7 +71,7 @@
[:& view-only-actions] [:& view-only-actions]
path-edition? path-edition?
[:div {:class (stl/css-case :viewport-actions true :viewport-actions-no-rulers (not rulers?))} [:div {:class (stl/css-case :viewport-actions-path true :viewport-actions-no-rulers (not rulers?))}
[:& path-actions {:shape shape}]] [:& path-actions {:shape shape}]]
grid-edition? grid-edition?

64
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
View file

@ -6,7 +6,8 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
.viewport-actions { .viewport-actions,
.viewport-actions-path {
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
--actions-toolbar-position-y: #{$s-28}; --actions-toolbar-position-y: #{$s-28};
@ -15,40 +16,39 @@
top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y)); top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
left: 50%; left: 50%;
z-index: $z-index-20; z-index: $z-index-20;
}
.viewport-actions-container { .viewport-actions-path {
@include flexRow; z-index: $z-index-3;
background: var(--panel-background-color); }
border-radius: $br-12;
box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
gap: $s-8;
height: $s-48;
margin-left: -50%;
padding: $s-8;
cursor: initial;
pointer-events: initial;
width: $s-400;
}
.viewport-actions-title { .viewport-actions-container {
flex: 1; @include flexRow;
font-size: $fs-12; background: var(--panel-background-color);
color: var(--color-foreground-secondary); border-radius: $br-12;
padding-left: $s-8; box-shadow: 0 0 $s-12 0 var(--menu-shadow-color);
} gap: $s-8;
height: $s-48;
margin-left: -50%;
padding: $s-8;
cursor: initial;
pointer-events: initial;
width: $s-400;
border: $s-2 solid var(--panel-border-color);
}
.done-btn { .viewport-actions-title {
@extend .button-primary; flex: 1;
text-transform: uppercase; font-size: $fs-12;
padding: $s-8 $s-20; color: var(--color-foreground-secondary);
font-size: $fs-11; padding-left: $s-8;
} }
.close-btn {
@extend .button-tertiary; .done-btn {
svg { @extend .button-primary;
@extend .button-icon; text-transform: uppercase;
} padding: $s-8 $s-20;
} font-size: $fs-11;
} }
.viewport-actions-no-rulers { .viewport-actions-no-rulers {