3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-08-07 14:38:33 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Reorder grid tracks

Browse source
This commit is contained in:
alonso.torres 2023-09-11 09:51:39 +02:00
parent de4ef1b19d
commit 495ba6e4a4
7 changed files with 220 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

19
common/src/app/common/types/shape/layout.cljc
View file

@ -695,6 +695,25 @@
(update :layout-grid-cells update-cells)
(assign-cells))))
(defn- reorder-grid-track
[prop parent from-index to-index]
(-> parent
(update prop
(fn [tracks]
(let [tr (nth tracks from-index)]
(-> tracks
(assoc from-index nil)
(d/insert-at-index (inc to-index) [tr])
(d/vec-without-nils)))))))
(defn reorder-grid-column
[parent from-index to-index]
(reorder-grid-track :layout-grid-columns parent from-index to-index))
(defn reorder-grid-row
[parent from-index to-index]
(reorder-grid-track :layout-grid-rows parent from-index to-index))
(defn get-cells
([parent]
(get-cells parent nil))

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

@ -1880,6 +1880,16 @@
}
}
}
&.single-button {
display: flex;
justify-content: end;
height: 1.5rem;
.btn-wrapper {
width: initial;
}
}
}
.no-wrap {
display: flex;
@ -2262,6 +2272,13 @@
grid-template-columns: 35px 1fr 1fr auto;
background-color: $color-gray-60;
padding: 3px;
border-radius: 3px;
border: 1px solid transparent;
&:hover {
border: 1px solid $color-primary;
}
&:not(:first-child) {
margin-top: 3px;
}

7
frontend/src/app/main/data/workspace/grid_layout/editor.cljs
View file

@ -38,6 +38,13 @@
(update [_ state]
(update-in state [:workspace-grid-edition grid-id] dissoc :selected))))
(defn clear-selection
[grid-id]
(ptk/reify ::clear-selection
ptk/UpdateEvent
(update [_ state]
(update-in state [:workspace-grid-edition grid-id] dissoc :selected))))
(defn stop-grid-layout-editing
[grid-id]
(ptk/reify ::stop-grid-layout-editing

32
frontend/src/app/main/data/workspace/shape_layout.cljs
View file

@ -407,6 +407,38 @@
(ptk/data-event :layout/update ids)
(dwu/commit-undo-transaction undo-id))))))
(defn reorder-layout-track
[ids type from-index to-index]
(assert (#{:row :column} type))
(ptk/reify ::reorder-layout-track
ptk/WatchEvent
(watch [_ _ _]
(let [undo-id (js/Symbol)]
(rx/of (dwu/start-undo-transaction undo-id)
(dwc/update-shapes
ids
(fn [shape]
(case type
:row (ctl/reorder-grid-row shape from-index to-index)
:column (ctl/reorder-grid-column shape from-index to-index))))
(ptk/data-event :layout/update ids)
(dwu/commit-undo-transaction undo-id))))))
(defn hover-layout-track
[ids type index hover?]
(assert (#{:row :column} type))
(ptk/reify ::hover-layout-track
ptk/UpdateEvent
(update [_ state]
(cond-> state
hover?
(update-in [:workspace-grid-edition (first ids) :hover-track] (fnil conj #{}) [type index])
(not hover?)
(update-in [:workspace-grid-edition (first ids) :hover-track] (fnil disj #{}) [type index])))))
(defn change-layout-track
[ids type index props]
(assert (#{:row :column} type))

21
frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
View file

@ -8,6 +8,7 @@
(:require
[app.common.data :as d]
[app.common.data.macros :as dm]
[app.main.data.workspace.grid-layout.editor :as dwge]
[app.main.data.workspace.shape-layout :as dwsl]
[app.main.store :as st]
[app.main.ui.components.numeric-input :refer [numeric-input*]]
@ -99,7 +100,13 @@
(let [props (cond-> {:mode mode}
(not= mode :area)
(assoc :area-name nil))]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) props)))))]
(st/emit! (dwsl/update-grid-cell (:id shape) (:id cell) props)))))
toggle-edit-mode
(mf/use-fn
(mf/deps (:id shape))
(fn []
(st/emit! (dwge/remove-selection (:id shape)))))]
[:div.element-set
[:div.element-set-title
@ -191,4 +198,14 @@
[:div.btn-wrapper
[:& set-self-alignment {:is-col? true
:alignment justify-self
:set-alignment set-justify-self}]]]]]))
:set-alignment set-justify-self}]]]
[:div.layout-row.single-button
[:div.btn-wrapper
[:div.edit-mode
[:button.tooltip.tooltip-bottom-left
{:alt "Grid edit mode"
:on-click toggle-edit-mode
:style {:padding 0}}
"Edit grid"
i/grid-layout-mode]]]]]]))

116
frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
View file

@ -21,6 +21,7 @@
[app.main.ui.components.select :refer [select]]
[app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx]
[app.main.ui.hooks :as h]
[app.main.ui.icons :as i]
[app.util.dom :as dom]
[cuerdas.core :as str]
@ -871,32 +872,42 @@
:fixed (dm/str value "px")
value))
(mf/defc grid-columns-row
[{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type remove-element] :as props}]
(let [column-num (count column-values)
direction (if (> column-num 1)
(if is-col? "Columns " "Rows ")
(if is-col? "Column " "Row "))
(mf/defc grid-track-info
[{:keys [is-col? type index column set-column-value set-column-type remove-element reorder-track hover-track]}]
(let [drop-track
(mf/use-callback
(mf/deps type reorder-track index)
(fn [drop-position data]
(reorder-track type (:index data) (if (= :top drop-position) (dec index) index))))
column-vals (str/join ", " (map manage-values column-values))
generated-name (dm/str direction (if (= column-num 0) " - empty" (dm/str column-num " (" column-vals ")")))
type (if is-col? :column :row)]
pointer-enter
(mf/use-callback
(mf/deps type hover-track index)
(fn []
(hover-track type index true)))
[:div.grid-columns
[:div.grid-columns-header
[:button.expand-icon
{:on-click toggle} i/actions]
pointer-leave
(mf/use-callback
(mf/deps type hover-track index)
(fn []
(hover-track type index false)))
[:div.columns-info {:title generated-name
:on-click toggle} generated-name]
[:button.add-column {:on-click #(do
(when-not expanded? (toggle))
(add-new-element type ctl/default-track-value))} i/plus]]
(when expanded?
[:div.columns-info-wrapper
(for [[index column] (d/enumerate column-values)]
[:div.column-info {:key (dm/str index "-" (name type) "-" column)}
[dprops dref]
(h/use-sortable
:data-type "penpot/layer"
:on-drop drop-track
:data {:is-col? is-col?
:index index
:column column}
:draggable? true)]
[:div.column-info
{:ref dref
:class (dom/classnames
:dnd-over-top (or (= (:over dprops) :top)
(= (:over dprops) :center))
:dnd-over-bot (= (:over dprops) :bot))
:on-pointer-enter pointer-enter
:on-pointer-leave pointer-leave}
[:div.direction-grid-icon
(if is-col?
i/layout-rows
@ -919,7 +930,44 @@
:on-change #(set-column-type type index %)}]]
[:button.remove-grid-column
{:on-click #(remove-element type index)}
i/minus]])])]))
i/minus]]))
(mf/defc grid-columns-row
[{:keys [is-col? expanded? column-values toggle add-new-element set-column-value set-column-type remove-element reorder-track hover-track] :as props}]
(let [column-num (count column-values)
direction (if (> column-num 1)
(if is-col? "Columns " "Rows ")
(if is-col? "Column " "Row "))
column-vals (str/join ", " (map manage-values column-values))
generated-name (dm/str direction (if (= column-num 0) " - empty" (dm/str column-num " (" column-vals ")")))
type (if is-col? :column :row)]
[:div.grid-columns
[:div.grid-columns-header
[:button.expand-icon
{:on-click toggle} i/actions]
[:div.columns-info {:title generated-name
:on-click toggle} generated-name]
[:button.add-column {:on-click #(do
(when-not expanded? (toggle))
(add-new-element type ctl/default-track-value))} i/plus]]
(when expanded?
[:& h/sortable-container {}
[:div.columns-info-wrapper
(for [[index column] (d/enumerate column-values)]
[:& grid-track-info {:key (dm/str index "-" (name type) "-" column)
:type type
:is-col? is-col?
:index index
:column column
:set-column-value set-column-value
:set-column-type set-column-type
:remove-element remove-element
:reorder-track reorder-track
:hover-track hover-track}])]])]))
;; LAYOUT COMPONENT
@ -1431,6 +1479,18 @@
(fn [type index]
(st/emit! (dwsl/remove-layout-track ids type index))))
reorder-track
(mf/use-fn
(mf/deps ids)
(fn [type from-index to-index]
(st/emit! (dwsl/reorder-layout-track ids type from-index to-index))))
hover-track
(mf/use-fn
(mf/deps ids)
(fn [type index hover?]
(st/emit! (dwsl/hover-layout-track ids type index hover?))))
set-column-value
(mf/use-fn
(mf/deps ids)
@ -1496,7 +1556,9 @@
:add-new-element add-new-element
:set-column-value set-column-value
:set-column-type set-column-type
:remove-element remove-element}]
:remove-element remove-element
:reorder-track reorder-track
:hover-track hover-track}]
[:& grid-columns-row {:is-col? false
:expanded? @grid-rows-open?
@ -1505,7 +1567,9 @@
:add-new-element add-new-element
:set-column-value set-column-value
:set-column-type set-column-type
:remove-element remove-element}]
:remove-element remove-element
:reorder-track reorder-track
:hover-track hover-track}]
[:& gap-section {:gap-selected? gap-selected?
:on-change set-gap

31
frontend/src/app/main/ui/workspace/viewport/grid_layout_editor.cljs
View file

@ -531,7 +531,7 @@
(dm/str value)]]))
(mf/defc track
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "zoom" "index" "type" "track-data" "layout-data"]))]
{::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "zoom" "index" "type" "track-data" "layout-data" "hovering?"]))]
::mf/wrap-props false}
[props]
(let [shape (unchecked-get props "shape")
@ -541,6 +541,7 @@
snap-pixel? (unchecked-get props "snap-pixel?")
track-data (unchecked-get props "track-data")
layout-data (unchecked-get props "layout-data")
hovering? (unchecked-get props "hovering?")
track-input-ref (mf/use-ref)
[layout-gap-row layout-gap-col] (ctl/gaps shape)
@ -621,6 +622,15 @@
[:g {:transform (if (= type :column)
(dm/str (gmt/transform-in text-p (:transform shape)))
(dm/str (gmt/transform-in text-p (gmt/rotate (:transform shape) -90))))}
(when hovering?
[:rect {:x (+ text-x (/ 5 zoom))
:y text-y
:width (- text-width (/ 10 zoom))
:height (- text-height (/ 5 zoom))
:rx (/ 3 zoom)
:fill "#DB00FF"
:opacity 0.2}])
[:foreignObject {:x text-x :y text-y :width text-width :height text-height}
[:input
{:ref track-input-ref
@ -684,6 +694,18 @@
hover-cells (:hover grid-edition)
selected-cells (:selected grid-edition)
hover-columns
(->> (:hover-track grid-edition)
(filter (fn [[t _]] (= t :column)))
(map (fn [[_ idx]] idx))
(into #{}))
hover-rows
(->> (:hover-track grid-edition)
(filter (fn [[t _]] (= t :row)))
(map (fn [[_ idx]] idx))
(into #{}))
children
(mf/use-memo
(mf/deps shape modifiers)
@ -759,7 +781,8 @@
:index idx
:layout-data layout-data
:snap-pixel? snap-pixel?
:track-data column-data}])
:track-data column-data
:hovering? (contains? hover-columns idx)}])
;; Last track resize handler
(when-not (empty? column-tracks)
@ -796,8 +819,8 @@
:snap-pixel? snap-pixel?
:track-data row-data
:type :row
:zoom zoom}])
:zoom zoom
:hovering? (contains? hover-rows idx)}])
(when-not (empty? row-tracks)
(let [last-track (last row-tracks)
start-p (:start-p last-track)