3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-09 20:51:39 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Changes to edit UI

Browse source
This commit is contained in:
alonso.torres 2023-06-14 13:00:50 +02:00
parent e01af790f3
commit c3a8c3826d
2 changed files with 45 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1781,20 +1781,31 @@
} }
.edit-mode { .edit-mode {
display: flex;
justify-content: center;
align-items: center; align-items: center;
border-radius: 4px;
border: 1px solid $color-gray-60;
display: flex;
flex-direction: row;
gap: 10px;
justify-content: center;
margin-left: 5px; margin-left: 5px;
padding: 0 8px;
text-align: left;
width: 120px;
button { button {
color: $color-gray-30;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
gap: 16px;
&.active, &.active,
&:hover { &:hover {
color: $color-primary;
svg { svg {
fill: $color-primary; fill: $color-primary;
} }
@ -1802,7 +1813,17 @@
} }
} }
&.align-grid { &.align-grid-items {
flex-direction: row;
gap: 0px;
margin: 7px 0;
.align-items-style {
margin-right: 2px;
}
}
&.align-grid-content {
flex-direction: column; flex-direction: column;
gap: 7px; gap: 7px;
margin: 7px 0; margin: 7px 0;

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

@ -125,7 +125,7 @@
:justify-items :justify-items
(if is-col? (if is-col?
(case val (case val
:stretch i/grid-justify-content-column-around :stretch i/align-items-row-strech
:start i/grid-justify-content-column-start :start i/grid-justify-content-column-start
:end i/grid-justify-content-column-end :end i/grid-justify-content-column-end
:center i/grid-justify-content-column-center :center i/grid-justify-content-column-center
@ -134,7 +134,7 @@
:space-evenly i/grid-justify-content-column-between) :space-evenly i/grid-justify-content-column-between)
(case val (case val
:stretch i/grid-justify-content-column-around :stretch i/align-items-column-strech
:start i/grid-justify-content-row-start :start i/grid-justify-content-row-start
:end i/grid-justify-content-row-end :end i/grid-justify-content-row-end
:center i/grid-justify-content-row-center :center i/grid-justify-content-row-center
@ -389,6 +389,7 @@
:alt "Grid edit mode" :alt "Grid edit mode"
:on-click #(toggle-edit-mode) :on-click #(toggle-edit-mode)
:style {:padding 0}} :style {:padding 0}}
"Edit grid"
i/grid-layout-mode])) i/grid-layout-mode]))
(mf/defc align-grid-row (mf/defc align-grid-row
@ -400,7 +401,9 @@
{:class (dom/classnames :active (= align-items align) {:class (dom/classnames :active (= align-items align)
:tooltip-bottom-left (not= align :start) :tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start)) :tooltip-bottom (= align :start))
:alt (dm/str "Align items " (d/name align)) :alt (if is-col?
(dm/str "justify-items: " (d/name align))
(dm/str "align-items: " (d/name align)))
:on-click #(set-align align type) :on-click #(set-align align type)
:key (dm/str "align-items" (d/name align))} :key (dm/str "align-items" (d/name align))}
(get-layout-flex-icon :align-items align is-col?)])])) (get-layout-flex-icon :align-items align is-col?)])]))
@ -409,12 +412,14 @@
[{:keys [is-col? justify-items set-justify] :as props}] [{:keys [is-col? justify-items set-justify] :as props}]
(let [type (if is-col? :column :row)] (let [type (if is-col? :column :row)]
[:div.justify-content-style [:div.justify-content-style
(for [align [:stretch :start :center :end :space-around :space-between]] (for [align [:start :center :end :space-around :space-between :stretch]]
[:button.align-start.tooltip [:button.align-start.tooltip
{:class (dom/classnames :active (= justify-items align) {:class (dom/classnames :active (= justify-items align)
:tooltip-bottom-left (not= align :start) :tooltip-bottom-left (not= align :start)
:tooltip-bottom (= align :start)) :tooltip-bottom (= align :start))
:alt (dm/str "Justify content " (d/name align)) :alt (if is-col?
(dm/str "justify-content: " (d/name align))
(dm/str "align-content: " (d/name align)))
:on-click #(set-justify align type) :on-click #(set-justify align type)
:key (dm/str "justify-content" (d/name align))} :key (dm/str "justify-content" (d/name align))}
(get-layout-grid-icon :justify-items align is-col?)])])) (get-layout-grid-icon :justify-items align is-col?)])]))
@ -682,15 +687,15 @@
:dir dir :dir dir
:saved-dir saved-grid-dir :saved-dir saved-grid-dir
:set-direction #(set-direction dir :grid) :set-direction #(set-direction dir :grid)
:icon? false}])]] :icon? true}])]]
(when (= 1 (count ids)) (when (= 1 (count ids))
[:div.edit-mode [:div.edit-mode
[:& grid-edit-mode {:id (first ids)}]])]] [:& grid-edit-mode {:id (first ids)}]])]]
[:div.layout-row [:div.layout-row
[:div.align-items-grid.row-title "Align"] [:div.align-items-grid.row-title "Items"]
[:div.btn-wrapper.align-grid [:div.btn-wrapper.align-grid-items
[:& align-grid-row {:is-col? false [:& align-grid-row {:is-col? false
:align-items align-items-row :align-items align-items-row
:set-align set-align-grid}] :set-align set-align-grid}]
@ -700,8 +705,8 @@
:set-align set-align-grid}]]] :set-align set-align-grid}]]]
[:div.layout-row [:div.layout-row
[:div.jusfiy-content-grid.row-title "Justify"] [:div.jusfiy-content-grid.row-title "Content"]
[:div.btn-wrapper.align-grid [:div.btn-wrapper.align-grid-content
[:& justify-grid-row {:is-col? true [:& justify-grid-row {:is-col? true
:justify-items grid-justify-content-column :justify-items grid-justify-content-column
:set-justify set-justify-grid}] :set-justify set-justify-grid}]
@ -822,13 +827,12 @@
[:div.direction-wrap.row-title "Direction"] [:div.direction-wrap.row-title "Direction"]
[:div.btn-wrapper [:div.btn-wrapper
[:div.direction [:div.direction
[:*
(for [dir [:row :column]] (for [dir [:row :column]]
[:& direction-btn {:key (d/name dir) [:& direction-btn {:key (d/name dir)
:dir dir :dir dir
:saved-dir saved-grid-dir :saved-dir saved-grid-dir
:set-direction #(set-direction dir) :set-direction #(set-direction dir)
:icon? false}])]] :icon? true}])]
(when (= 1 (count ids)) (when (= 1 (count ids))
[:div.edit-mode [:div.edit-mode