Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-04-10 14:01:29 -05:00
Code Issues Activity

🐛 Fix some limit situations on shadow reorder

Browse source
This commit is contained in:
Alejandro Alonso 2023-05-24 07:08:52 +02:00
parent a09dd953ff
commit 1dab570907
3 changed files with 58 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGES.md
View file

@ -24,6 +24,7 @@
- Removed sizing variables from radius (by @ondrejkonec) [Github #3184](https://github.com/penpot/penpot/pull/3184)
- Dashboard search, set focus after shortcut (by @akshay-gupta7) [Github #3196](https://github.com/penpot/penpot/pull/3196)
- Library name dropdown arrow is overlapped by library name (by @ondrejkonec) [Taiga #5200](https://tree.taiga.io/project/penpot/issue/5200)
- Reorder shadows (by @akshay-gupta7) [Github #3236](https://github.com/penpot/penpot/pull/3236)
## 1.18.3

21
frontend/resources/styles/main/partials/sidebar-element-options.scss
View file

@ -786,7 +786,8 @@
}
}
.grid-option {
.grid-option,
.shadow-option {
margin-bottom: 0.5rem;
.advanced-options {
.row-flex {
@ -797,6 +798,15 @@
position: absolute;
top: 12px;
}
.element-set-actions-button {
min-width: auto;
min-height: auto;
padding-right: 10px;
svg {
width: 12px;
height: 12px;
}
}
}
}
@ -807,7 +817,8 @@
margin-left: 0.25rem;
}
.element-set-content .grid-option-main {
.element-set-content .grid-option-main,
.element-set-content .shadow-option-main {
align-items: center;
display: flex;
padding: 0.3rem 0;
@ -857,11 +868,13 @@
}
}
.grid-option-main-actions {
.grid-option-main-actions,
.shadow-option-main-actions {
display: flex;
visibility: hidden;
.grid-option:hover & {
.grid-option:hover &,
.shadow-option:hover & {
visibility: visible;
}
}

65
frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
View file

@ -22,6 +22,7 @@
[app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row]]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[okulary.core :as l]
[rumext.v2 :as mf]))
(def shadow-attrs [:shadow])
@ -45,10 +46,8 @@
(mapv second)))
(mf/defc shadow-entry
[{:keys [ids index value on-reorder disable-drag? on-blur]}]
(let [open-shadow (mf/use-state false)
basic-offset-x-ref (mf/use-ref nil)
[{:keys [ids index value on-reorder disable-drag? on-blur open-state-ref]}]
(let [basic-offset-x-ref (mf/use-ref nil)
basic-offset-y-ref (mf/use-ref nil)
basic-blur-ref (mf/use-ref nil)
@ -58,6 +57,12 @@
adv-spread-ref (mf/use-ref nil)
shadow-style (dm/str (:style value))
shadow-id (:id value)
open-status-ref (mf/with-memo [open-state-ref shadow-id]
(-> (l/key shadow-id)
(l/derived open-state-ref)))
open-shadow (mf/deref open-status-ref)
on-remove-shadow
(mf/use-fn
@ -125,15 +130,19 @@
toggle-visibility
(fn [index]
(fn []
(st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))]
(st/emit! (dch/update-shapes ids #(update-in % [:shadow index :hidden] not)))))
on-toggle-open-shadow
(fn []
(swap! open-state-ref update shadow-id not))]
[:*
[:div.border-data {:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:div.element-set-options-group {:style {:display (when @open-shadow "none")}}
[:div.shadow-option {:class (dom/classnames
:dnd-over-top (= (:over dprops) :top)
:dnd-over-bot (= (:over dprops) :bot))
:ref dref}
[:div.shadow-option-main {:style {:display (when open-shadow "none")}}
[:div.element-set-actions-button
{:on-click #(reset! open-shadow true)}
{:on-click on-toggle-open-shadow}
i/actions]
[:select.input-select
@ -148,7 +157,7 @@
:selected (when (= shadow-style ":inner-shadow") "selected")}
(tr "workspace.options.shadow-options.inner-shadow")]]
[:div.element-set-actions
[:div.shadow-option-main-actions
[:div.element-set-actions-button {:on-click (toggle-visibility index)}
(if (:hidden value) i/eye-closed i/eye)]
[:div.element-set-actions-button
@ -156,19 +165,23 @@
:on-click on-remove-shadow}
i/minus]]]
[:& advanced-options {:visible? @open-shadow
:on-close #(reset! open-shadow false)}
[:& advanced-options {:visible? open-shadow
:on-close on-toggle-open-shadow}
[:div.color-data
[:div.element-set-actions-button
{:on-click #(reset! open-shadow false)}
{:on-click on-toggle-open-shadow}
i/actions]
[:select.input-select
{:default-value (str (:style value))
{:default-value shadow-style
:on-change (fn [event]
(let [value (-> event dom/get-target dom/get-value d/read-string)]
(st/emit! (dch/update-shapes ids #(assoc-in % [:shadow index :style] value)))))}
[:option {:value ":drop-shadow"} (tr "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"} (tr "workspace.options.shadow-options.inner-shadow")]]]
[:option {:value ":drop-shadow"
:selected (when (= shadow-style ":drop-shadow") "selected")}
(tr "workspace.options.shadow-options.drop-shadow")]
[:option {:value ":inner-shadow"
:selected (when (= shadow-style ":inner-shadow") "selected")}
(tr "workspace.options.shadow-options.inner-shadow")]]]
[:div.row-grid-2
[:div.input-element {:title (tr "workspace.options.shadow-options.offsetx")}
@ -227,14 +240,15 @@
(mf/defc shadow-menu
{::mf/wrap-props false}
[props]
(let [ids (unchecked-get props "ids")
type (unchecked-get props "type")
values (unchecked-get props "values")
(let [ids (unchecked-get props "ids")
type (unchecked-get props "type")
values (unchecked-get props "values")
shadows (:shadow values [])
shadows (:shadow values [])
open-state-ref (mf/with-memo [] (l/atom {}))
disable-drag* (mf/use-state false)
disable-drag? (deref disable-drag*)
disable-drag* (mf/use-state false)
disable-drag? (deref disable-drag*)
on-remove-all
(mf/use-fn
@ -288,4 +302,5 @@
:on-reorder handle-reorder
:disable-drag? disable-drag?
:on-blur on-blur
:index index}])]])]))
:index index
:open-state-ref open-state-ref}])]])]))