Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

🎉 Add ability to change shadows' order and place new shadows at first #3236

Merged
merged 5 commits into from
May 24, 2023
Merged

🎉 Add ability to change shadows' order and place new shadows at first #3236

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1eb6e30
:tada: Add ability to change shadows order and place new shadows at t…
akshay-gupta7 May 17, 2023
98a6c63
:lipstick: Add cosmetic changes to shadow-add and reorder-shadow fns
niwinz May 22, 2023
73ed37f
:lipstick: Add cosmetic changes to stoke related functions frontend
niwinz May 22, 2023
a09dd95
:zap: Add incomplete performance enhancements to shadow menu
niwinz May 22, 2023
1dab570
:bug: Fix some limit situations on shadow reorder
superalex May 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
21 changes: 17 additions & 4 deletions frontend/resources/styles/main/partials/sidebar-element-options.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -786,7 +786,8 @@
}
}

.grid-option {
.grid-option,
.shadow-option {
margin-bottom: 0.5rem;
.advanced-options {
.row-flex {
Expand All @@ -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;
}
}
}
}

Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
}
Expand Down
99 changes: 61 additions & 38 deletions frontend/src/app/main/data/workspace/colors.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.common.pages.helpers :as cph]
[app.common.schema :as sm]
[app.main.broadcast :as mbc]
[app.main.data.modal :as md]
[app.main.data.workspace.changes :as dch]
Expand Down Expand Up @@ -200,7 +201,6 @@
(if (= (:type shape) :frame)
(d/merge shape attrs)
shape))))))))

(defn change-stroke
[ids attrs index]
(ptk/reify ::change-stroke
Expand All @@ -224,70 +224,93 @@

attrs (merge attrs color-attrs)]

(rx/of (dch/update-shapes ids (fn [shape]
(let [new-attrs (merge (get-in shape [:strokes index]) attrs)
new-attrs (cond-> new-attrs
(not (contains? new-attrs :stroke-width))
(assoc :stroke-width 1)
(rx/of (dch/update-shapes
ids
(fn [shape]
(let [new-attrs (merge (get-in shape [:strokes index]) attrs)
new-attrs (cond-> new-attrs
(not (contains? new-attrs :stroke-width))
(assoc :stroke-width 1)

(not (contains? new-attrs :stroke-style))
(assoc :stroke-style :solid)
(not (contains? new-attrs :stroke-style))
(assoc :stroke-style :solid)

(not (contains? new-attrs :stroke-alignment))
(assoc :stroke-alignment :center)
(not (contains? new-attrs :stroke-alignment))
(assoc :stroke-alignment :center)

:always
(d/without-nils))]
(-> shape
(cond-> (not (contains? shape :strokes))
(assoc :strokes []))
(assoc-in [:strokes index] new-attrs))))))))))
:always
(d/without-nils))]
(cond-> shape
(not (contains? shape :strokes))
(assoc :strokes [])

:always
(assoc-in [:strokes index] new-attrs))))))))))

(defn change-shadow
[ids attrs index]
(ptk/reify ::change-shadow
ptk/WatchEvent
(watch [_ _ _]
(rx/of (dch/update-shapes ids (fn [shape]
(let [;; If we try to set a gradient to a shadow (for example using the color selection from multiple shapes) let's use the first stop color
attrs (cond-> attrs
(:gradient attrs) (get-in [:gradient :stops 0]))
new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
(assoc-in shape [:shadow index :color] new-attrs))))))))
(rx/of (dch/update-shapes
ids
(fn [shape]
(let [;; If we try to set a gradient to a shadow (for
;; example using the color selection from
;; multiple shapes) let's use the first stop
;; color
attrs (cond-> attrs
(:gradient attrs) (get-in [:gradient :stops 0]))
new-attrs (merge (get-in shape [:shadow index :color]) attrs)]
(assoc-in shape [:shadow index :color] new-attrs))))))))

(defn add-shadow
[ids shadow]
(dm/assert! (sm/coll-of-uuid? ids))
(ptk/reify ::add-shadow
ptk/WatchEvent
(watch [_ _ _]
(let [add-shadow (fn [shape]
(update shape :shadow #(into [shadow] %)))]
(rx/of (dch/update-shapes ids add-shadow))))))

(defn add-stroke
[ids stroke]
(ptk/reify ::add-stroke
ptk/WatchEvent
(watch [_ _ _]
(let [add (fn [shape attrs] (assoc shape :strokes (into [attrs] (:strokes shape))))]
(rx/of (dch/update-shapes
ids
#(add % stroke)))))))
(let [add-stroke (fn [shape] (update shape :strokes #(into [stroke] %)))]
(rx/of (dch/update-shapes ids add-stroke))))))

(defn remove-stroke
[ids position]
(ptk/reify ::remove-stroke
ptk/WatchEvent
(watch [_ _ _]
(let [remove-fill-by-index (fn [values index] (->> (d/enumerate values)
(filterv (fn [[idx _]] (not= idx index)))
(mapv second)))

remove (fn [shape] (update shape :strokes remove-fill-by-index position))]
(rx/of (dch/update-shapes
ids
#(remove %)))))))
(letfn [(remove-fill-by-index [values index]
(->> (d/enumerate values)
(filterv (fn [[idx _]] (not= idx index)))
(mapv second)))
(remove-stroke [shape]
(update shape :strokes remove-fill-by-index position))]
(rx/of (dch/update-shapes ids remove-stroke))))))

(defn remove-all-strokes
[ids]
(ptk/reify ::remove-all-strokes
ptk/WatchEvent
(watch [_ _ _]
(let [remove-all (fn [shape] (assoc shape :strokes []))]
(rx/of (dch/update-shapes
ids
#(remove-all %)))))))
(let [remove-all #(assoc % :strokes [])]
(rx/of (dch/update-shapes ids remove-all))))))

(defn reorder-shadows
[ids index new-index]
(ptk/reify ::reorder-shadow
ptk/WatchEvent
(watch [_ _ _]
(rx/of (dch/update-shapes
ids
#(swap-attrs % :shadow index new-index))))))

(defn reorder-strokes
[ids index new-index]
Expand Down
19 changes: 10 additions & 9 deletions frontend/src/app/main/ui/components/numeric_input.cljs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@

;; We need to store the handle-blur ref so we can call it on unmount
handle-blur-ref (mf/use-ref nil)
dirty-ref (mf/use-ref false)
dirty-ref (mf/use-ref false)

;; This `value` represents the previous value and is used as
;; initil value for the simple math expression evaluation.
Expand Down Expand Up @@ -106,10 +106,11 @@
apply-value
(mf/use-callback
(mf/deps on-change update-input value)
(fn [new-value]
(fn [new-value event]
(mf/set-ref-val! dirty-ref false)
(when (and (not= new-value value) (some? on-change))
(on-change new-value))
(when (and (not= new-value value)
(fn? on-change))
(on-change new-value event))
(update-input new-value)))

set-delta
Expand Down Expand Up @@ -146,7 +147,7 @@

:else new-value)]

(apply-value new-value))))))
(apply-value new-value event))))))

handle-key-down
(mf/use-callback
Expand Down Expand Up @@ -180,12 +181,12 @@
handle-blur
(mf/use-callback
(mf/deps parse-value apply-value update-input on-blur)
(fn [_]
(fn [event]
(let [new-value (or (parse-value) default-val)]
(if (or nillable new-value)
(apply-value new-value)
(apply-value new-value event)
(update-input new-value)))
(when on-blur (on-blur))))
(when on-blur (on-blur event))))

on-click
(mf/use-callback
Expand Down Expand Up @@ -236,7 +237,7 @@
(events/listen globals/window EventType.CLICK on-click)]]
#(doseq [key keys]
(events/unlistenByKey key)))))

(mf/use-layout-effect
(mf/deps handle-mouse-wheel)
(fn []
Expand Down
Loading