From 8f7fd21454d5fdc88633b9157502355d7cf22536 Mon Sep 17 00:00:00 2001 From: Eva Date: Thu, 9 Jun 2022 13:43:52 +0200 Subject: [PATCH] :sparkles: New layout and layout item menur --- .../resources/images/icons/auto-direction.svg | 3 + frontend/resources/images/icons/auto-fill.svg | 3 + .../images/icons/auto-fix-layout.svg | 3 + frontend/resources/images/icons/auto-gap.svg | 3 + frontend/resources/images/icons/auto-hug.svg | 3 + .../images/icons/auto-margin-side.svg | 3 + .../resources/images/icons/auto-margin.svg | 3 + .../images/icons/auto-padding-side.svg | 3 + .../resources/images/icons/auto-padding.svg | 3 + .../images/icons/auto-row-column.svg | 3 + .../resources/images/icons/space-around.svg | 3 + .../resources/images/icons/space-between.svg | 3 + .../resources/styles/common/framework.scss | 24 ++ .../partials/sidebar-element-options.scss | 272 +++++++++++++- frontend/src/app/main/constants.cljs | 2 + frontend/src/app/main/ui/icons.cljs | 11 + .../sidebar/options/menus/frame_grid.cljs | 2 +- .../sidebar/options/menus/layout.cljs | 353 ++++++++++++++++++ .../sidebar/options/menus/layout_item.cljs | 190 ++++++++++ .../sidebar/options/shapes/bool.cljs | 10 +- .../sidebar/options/shapes/circle.cljs | 10 +- .../sidebar/options/shapes/frame.cljs | 15 +- .../sidebar/options/shapes/group.cljs | 30 +- .../sidebar/options/shapes/image.cljs | 10 +- .../sidebar/options/shapes/multiple.cljs | 57 ++- .../sidebar/options/shapes/path.cljs | 10 +- .../sidebar/options/shapes/rect.cljs | 11 +- .../sidebar/options/shapes/svg_raw.cljs | 10 +- .../sidebar/options/shapes/text.cljs | 17 +- frontend/src/app/util/dom.cljs | 14 + frontend/translations/ar.po | 4 - frontend/translations/ca.po | 4 - frontend/translations/de.po | 4 - frontend/translations/el.po | 4 - frontend/translations/en.po | 152 +++++++- frontend/translations/es.po | 152 +++++++- frontend/translations/fr.po | 4 - frontend/translations/he.po | 4 - frontend/translations/pl.po | 4 - frontend/translations/pt_BR.po | 4 - frontend/translations/ro.po | 4 - frontend/translations/ru.po | 4 - frontend/translations/tr.po | 4 - frontend/translations/zh_CN.po | 4 - 44 files changed, 1337 insertions(+), 99 deletions(-) create mode 100644 frontend/resources/images/icons/auto-direction.svg create mode 100644 frontend/resources/images/icons/auto-fill.svg create mode 100644 frontend/resources/images/icons/auto-fix-layout.svg create mode 100644 frontend/resources/images/icons/auto-gap.svg create mode 100644 frontend/resources/images/icons/auto-hug.svg create mode 100644 frontend/resources/images/icons/auto-margin-side.svg create mode 100644 frontend/resources/images/icons/auto-margin.svg create mode 100644 frontend/resources/images/icons/auto-padding-side.svg create mode 100644 frontend/resources/images/icons/auto-padding.svg create mode 100644 frontend/resources/images/icons/auto-row-column.svg create mode 100644 frontend/resources/images/icons/space-around.svg create mode 100644 frontend/resources/images/icons/space-between.svg create mode 100644 frontend/src/app/main/ui/workspace/sidebar/options/menus/layout.cljs create mode 100644 frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs diff --git a/frontend/resources/images/icons/auto-direction.svg b/frontend/resources/images/icons/auto-direction.svg new file mode 100644 index 000000000..d002174b6 --- /dev/null +++ b/frontend/resources/images/icons/auto-direction.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-fill.svg b/frontend/resources/images/icons/auto-fill.svg new file mode 100644 index 000000000..344e188d7 --- /dev/null +++ b/frontend/resources/images/icons/auto-fill.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-fix-layout.svg b/frontend/resources/images/icons/auto-fix-layout.svg new file mode 100644 index 000000000..f2be41986 --- /dev/null +++ b/frontend/resources/images/icons/auto-fix-layout.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-gap.svg b/frontend/resources/images/icons/auto-gap.svg new file mode 100644 index 000000000..307740492 --- /dev/null +++ b/frontend/resources/images/icons/auto-gap.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-hug.svg b/frontend/resources/images/icons/auto-hug.svg new file mode 100644 index 000000000..f72fbd3c8 --- /dev/null +++ b/frontend/resources/images/icons/auto-hug.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-margin-side.svg b/frontend/resources/images/icons/auto-margin-side.svg new file mode 100644 index 000000000..087ae8250 --- /dev/null +++ b/frontend/resources/images/icons/auto-margin-side.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-margin.svg b/frontend/resources/images/icons/auto-margin.svg new file mode 100644 index 000000000..4777ce3b1 --- /dev/null +++ b/frontend/resources/images/icons/auto-margin.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-padding-side.svg b/frontend/resources/images/icons/auto-padding-side.svg new file mode 100644 index 000000000..d4c56746b --- /dev/null +++ b/frontend/resources/images/icons/auto-padding-side.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-padding.svg b/frontend/resources/images/icons/auto-padding.svg new file mode 100644 index 000000000..e546d0631 --- /dev/null +++ b/frontend/resources/images/icons/auto-padding.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-row-column.svg b/frontend/resources/images/icons/auto-row-column.svg new file mode 100644 index 000000000..9023c8fcf --- /dev/null +++ b/frontend/resources/images/icons/auto-row-column.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/space-around.svg b/frontend/resources/images/icons/space-around.svg new file mode 100644 index 000000000..94e6e8de4 --- /dev/null +++ b/frontend/resources/images/icons/space-around.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/space-between.svg b/frontend/resources/images/icons/space-between.svg new file mode 100644 index 000000000..639040b0b --- /dev/null +++ b/frontend/resources/images/icons/space-between.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/framework.scss b/frontend/resources/styles/common/framework.scss index 37e5c275e..888b2d101 100644 --- a/frontend/resources/styles/common/framework.scss +++ b/frontend/resources/styles/common/framework.scss @@ -450,6 +450,30 @@ ul.slider-dots { } } + &.maxW { + &::after { + content: attr(alt); + } + } + + &.minW { + &::after { + content: attr(alt); + } + } + + &.maxH { + &::after { + content: attr(alt); + } + } + + &.minH { + &::after { + content: attr(alt); + } + } + &.large { min-width: 7rem; } diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index f678044e1..ba53f4518 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -625,7 +625,9 @@ } } -.radius-options { +.radius-options, +.padding-options, +.margin-options { align-items: center; border: 1px solid $color-gray-60; border-radius: 4px; @@ -634,7 +636,9 @@ padding: 8px; width: 64px; - .radius-icon { + .radius-icon, + .padding-icon, + .margin-icon { display: flex; align-items: center; @@ -1583,3 +1587,267 @@ } } } + +.layout-menu { + svg { + height: 16px; + width: 16px; + fill: $color-gray-30; + } + .direction-gap { + display: flex; + justify-content: space-between; + .direction { + display: flex; + .dir { + margin-right: 4px; + display: flex; + justify-content: center; + align-items: center; + background: none; + border: none; + cursor: pointer; + + &.right { + svg { + transform: rotate(180deg); + } + } + &.top { + svg { + transform: rotate(-90deg); + } + } + &.bottom { + svg { + transform: rotate(90deg); + } + } + &.active, + &:hover { + svg { + fill: $color-primary; + } + } + } + } + .gap { + display: flex; + justify-content: center; + align-items: center; + .icon { + display: flex; + justify-content: center; + align-items: center; + margin-right: 7px; + &.rotated { + transform: rotate(90deg); + } + &.activated { + svg { + fill: $color-primary; + } + } + } + input { + font-size: 0.75rem; + min-width: 0; + padding: 0.25rem; + width: 50px; + height: 20px; + margin: 0; + } + } + } + + .layout-container { + border: 1px solid $color-gray-60; + border-radius: 3px; + margin: 5px 0; + .layout-entry { + display: flex; + align-items: center; + color: $color-gray-20; + height: 38px; + cursor: pointer; + &:hover { + svg { + fill: $color-primary; + } + } + } + + .layout-info { + font-size: $fs12; + width: 100%; + overflow-x: hidden; + text-overflow: ellipsis; + white-space: nowrap; + &::first-letter { + text-transform: capitalize; + } + } + + .layout-body { + display: flex; + align-items: center; + margin: 7px; + .selects-wrapper { + width: 100%; + margin-left: 12px; + select { + text-transform: capitalize; + } + option { + text-transform: capitalize; + } + } + + .orientation-grid { + background-color: $color-gray-60; + .button-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr 1fr 1fr; + width: 47px; + height: 47px; + border: 1px solid $color-gray-30; + margin: 12px; + .orientation { + background: none; + border: none; + height: 14px; + width: 14px; + display: flex; + justify-content: center; + align-items: center; + padding: 2px; + cursor: pointer; + + .icon { + display: flex; + justify-content: center; + align-items: center; + svg { + fill: none; + height: 10px; + width: 10px; + } + &.rotated { + transform: rotate(90deg); + } + } + + &.active { + .icon { + svg { + fill: $color-primary; + } + } + } + &:hover { + .icon { + svg { + fill: $color-gray-20; + } + } + } + } + } + &.col { + .button-wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 1fr; + .orientation { + height: 100%; + justify-content: space-between; + flex-direction: column; + } + } + } + &.row { + .button-wrapper { + display: grid; + grid-template-rows: 1fr 1fr 1fr; + grid-template-columns: 1fr; + .orientation { + width: 100%; + justify-content: space-between; + padding: 2px; + } + } + } + } + } + } +} + +.layout-item-menu { + .layout-behavior { + display: flex; + align-items: center; + margin: 9px 0; + .button-wrapper { + border: 1px solid $color-gray-60; + border-radius: 4px; + display: flex; + align-items: center; + .behavior-btn { + background: none; + border: none; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + padding: 0; + .icon { + display: flex; + justify-content: center; + align-items: center; + height: 26px; + width: 26px; + svg { + height: 16px; + width: 16px; + fill: $color-gray-30; + } + } + &:hover, + &.activated { + svg { + fill: $color-primary; + } + } + } + &.horizontal { + margin-right: 8px; + svg { + transform: rotate(90deg); + } + } + } + } + .advanced-ops { + display: flex; + align-items: center; + cursor: pointer; + font-size: $fs12; + color: $color-gray-30; + &:hover { + svg { + fill: $color-primary; + } + } + } + .advanced-ops-body { + display: grid; + grid-template-columns: 1fr 1fr; + .input-element { + width: 100%; + &::after { + width: 100px; + } + } + } +} diff --git a/frontend/src/app/main/constants.cljs b/frontend/src/app/main/constants.cljs index 8247b9296..84087c5e0 100644 --- a/frontend/src/app/main/constants.cljs +++ b/frontend/src/app/main/constants.cljs @@ -23,3 +23,5 @@ :grid-alignment true :background "var(--color-white)"}) +(def has-layout-item false) + diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 078d767bd..14d531418 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -26,8 +26,17 @@ (def arrow-slide (icon-xref :arrow-slide)) (def artboard (icon-xref :artboard)) (def at (icon-xref :at)) +(def auto-direction (icon-xref :auto-direction)) +(def auto-fill (icon-xref :auto-fill)) (def auto-fix (icon-xref :auto-fix)) +(def auto-fix-layout (icon-xref :auto-fix-layout)) +(def auto-gap (icon-xref :auto-gap)) (def auto-height (icon-xref :auto-height)) +(def auto-hug (icon-xref :auto-hug)) +(def auto-margin-side (icon-xref :auto-margin-side)) +(def auto-margin (icon-xref :auto-margin)) +(def auto-padding (icon-xref :auto-padding)) +(def auto-padding-side (icon-xref :auto-padding-side)) (def auto-width (icon-xref :auto-width)) (def bool-difference (icon-xref :boolean-difference)) (def bool-exclude (icon-xref :boolean-exclude)) @@ -152,6 +161,8 @@ (def size-vert (icon-xref :size-vert)) (def sort-ascending (icon-xref :sort-ascending)) (def sort-descending (icon-xref :sort-descending)) +(def space-around (icon-xref :space-around)) +(def space-between (icon-xref :space-between)) (def strikethrough (icon-xref :strikethrough)) (def stroke (icon-xref :stroke)) (def switch (icon-xref :switch)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs index 0f9937835..6569802d9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs @@ -245,7 +245,7 @@ handle-create-grid (mf/use-fn (mf/deps id) #(st/emit! (dw/add-frame-grid id)))] [:div.element-set [:div.element-set-title - [:span (tr "workspace.options.grid.title")] + [:span (tr "workspace.options.grid.grid-title")] [:div.add-page {:on-click handle-create-grid} i/close]] (when (seq (:grids shape)) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout.cljs new file mode 100644 index 000000000..54745a0ed --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -0,0 +1,353 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.workspace.sidebar.options.menus.layout + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.ui.components.numeric-input :refer [numeric-input]] + [app.main.ui.icons :as i] + [app.util.dom :as dom] + [app.util.i18n :as i18n :refer [tr]] + [cuerdas.core :as str] + [rumext.alpha :as mf])) + +(def layout-attrs + [:layout ;; true if active, false if not + :layout-dir ;; :right, :left, :top, :bottom + :gap ;; number could be negative + :layout-type ;; :packed, :space-between, :space-around + :wrap-type ;; :wrap, :no-wrap + :padding-type ;; :simple, :multiple + :padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative + :h-orientation ;; :top, :center, :bottom + :v-orientation]) ;; :left, :center, :right + +(def grid-pos [[:top :left] + [:top :center] + [:top :right] + [:center :left] + [:center :center] + [:center :right] + [:bottom :left] + [:bottom :center] + [:bottom :right]]) +(def grid-rows [:top :center :bottom]) +(def grid-cols [:left :center :right]) + +(mf/defc direction-row + [{:keys [dir saved-dir set-direction] :as props}] + [:button.dir.tooltip.tooltip-bottom + {:class (dom/classnames :active (= saved-dir dir) + :left (= :left dir) + :right (= :right dir) + :top (= :top dir) + :bottom (= :bottom dir)) + :key (dm/str "direction-" dir) + :alt (tr (dm/str "workspace.options.layout.direction." (d/name dir))) + :on-click #(set-direction dir)} + i/auto-direction]) + +(mf/defc orientation-grid + [{:keys [manage-orientation test-values get-icon] :as props}] + (let [dir (:layout-dir @test-values) + type (:layout-type @test-values) + is-col? (or (= dir :top) + (= dir :bottom)) + saved-pos [(:h-orientation @test-values) (:v-orientation @test-values)]] + (if (= type :packed) + [:div.orientation-grid + [:div.button-wrapper + (for [[pv ph] grid-pos] + [:button.orientation + {:on-click (partial manage-orientation pv ph type) + :class (dom/classnames + :active (= [pv ph] saved-pos) + :top (= :top pv) + :center (= :center pv) + :bottom (= :bottom pv) + :left (= :left ph) + :center (= :center ph) + :right (= :right ph)) + :key (dm/str pv ph)} + [:span.icon + {:class (dom/classnames + :rotated is-col?)} + (get-icon dir type pv ph)]])]] + + (if is-col? + [:div.orientation-grid.col + [:div.button-wrapper + (for [col grid-cols] + [:button.orientation + {:on-click (partial manage-orientation :top col type) + :class (dom/classnames + :active (= col (second saved-pos)) + :top (= :left col) + :centered (= :center col) + :bottom (= :right col))} + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type nil col)] + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type nil col)] + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type nil col)]])]] + + [:div.orientation-grid.row + [:div.button-wrapper + (for [row grid-rows] + [:button.orientation + {:on-click (partial manage-orientation row :left type) + :class (dom/classnames + :active (= row (first saved-pos)) + :top (= :top row) + :centered (= :center row) + :bottom (= :bottom row))} + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type row nil)] + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type row nil)] + [:span.icon + {:class (dom/classnames :rotated is-col?)} + (get-icon dir type row nil)]])]])))) + +(mf/defc padding-section + [{:keys [test-values change-padding-style select-all on-padding-change] :as props}] + + (let [padding-type (:padding-type @test-values)] + + [:div.row-flex + [:div.padding-options + [:div.padding-icon.tooltip.tooltip-bottom + {:class (dom/classnames :selected (= padding-type :simple)) + :alt (tr "workspace.options.layout.padding-simple") + :on-click #(change-padding-style :simple)} + i/auto-padding] + [:div.padding-icon.tooltip.tooltip-bottom + {:class (dom/classnames :selected (= padding-type :multiple)) + :alt (tr "workspace.options.layout.padding") + :on-click #(change-padding-style :multiple)} + i/auto-padding-side]] + + (cond + (= padding-type :simple) + [:div.tooltip.tooltip-bottom + {:alt (tr "workspace.options.layout.padding-all")} + [:div.input-element.mini + + [:> numeric-input + {:placeholder "--" + :on-click select-all + :on-change (partial on-padding-change :simple) + :value (:p1 (:padding @test-values))}]]] + + (= padding-type :multiple) + (for [num [:p1 :p2 :p3 :p4]] + [:div.tooltip.tooltip-bottom + {:key (dm/str "padding-" (d/name num)) + :alt (case num + :p1 (tr "workspace.options.layout.top") + :p2 (tr "workspace.options.layout.right") + :p3 (tr "workspace.options.layout.bottom") + :p4 (tr "workspace.options.layout.left"))} + [:div.input-element.mini + [:> numeric-input + {:placeholder "--" + :on-click select-all + :on-change (partial on-padding-change num) + :value (num (:padding @test-values))}]]]))])) + + + +(mf/defc layout-menu + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} + [{:keys [_ids _type _values] :as props}] + (let [test-values (mf/use-state {:layout false + :layout-dir nil + :gap 0 + :layout-type nil + :wrap-type nil + :padding-type nil + :padding {:p1 0 :p2 0 :p3 0 :p4 0} + :h-orientation nil + :v-orientation nil}) + + open? (mf/use-state false) + gap-selected? (mf/use-state false) + toggle-open (fn [] (swap! open? not)) + + on-add-layout + (fn [_] + (reset! test-values {:layout true + :layout-dir :left + :gap 0 + :layout-type :packed + :wrap-type :wrap + :padding-type :simple + :padding {:p1 0 :p2 0 :p3 0 :p4 0} + :h-orientation :top + :v-orientation :left})) + on-remove-layout + (fn [_] + (reset! test-values {:layout false + :layout-dir nil + :gap 0 + :layout-type nil + :wrap-type nil + :padding-type nil + :padding {:p1 0 :p2 0 :p3 0 :p4 0} + :h-orientation nil + :v-orientation nil}) + (reset! open? false)) + + set-direction + (fn [dir] + (swap! test-values assoc :layout-dir dir)) + + set-gap + (fn [event] + (swap! test-values assoc :gap event)) + + change-padding-style + (fn [type] + (swap! test-values assoc :padding-type type)) + + select-all #(dom/select-target %) + + select-all-gap #(do (reset! gap-selected? true) + (dom/select-target %)) + + on-padding-change + (fn [type val] + (if (= type :simple) + (swap! test-values assoc :padding {:p1 val :p2 val :p3 val :p4 val}) + (swap! test-values assoc-in [:padding type] val))) + + handle-change-type + (fn [event] + (let [target (dom/get-target event) + value (dom/get-value target) + value (keyword value)] + (swap! test-values assoc :layout-type value))) + + handle-wrap-type + (mf/use-callback + (fn [event] + (let [target (dom/get-target event) + value (dom/get-value target) + value (keyword value)] + (swap! test-values assoc :wrap-type value)))) + + manage-orientation + (fn [h v] + (swap! test-values assoc :h-orientation h :v-orientation v)) + + get-icon + (fn [dir layout-type v h] + (let [col? (= dir (or :left :right)) + manage-text-icon + (if col? + (case h + :left i/text-align-left + :center i/text-align-center + :right i/text-align-right + i/text-align-center) + + (case v + :top i/text-align-left + :center i/text-align-center + :bottom i/text-align-right + i/text-align-center))] + (case layout-type + :packed manage-text-icon + :space-around i/space-around + :space-between i/space-between))) + + layout-info + (fn [] + (let [type (:layout-type @test-values) + dir (:layout-dir @test-values) + is-col? (or (= dir :top) + (= dir :bottom)) + h (:v-orientation @test-values) + v (:h-orientation @test-values) + wrap (:wrap-type @test-values) + orientation (if (= type :packed) + (dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", " (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ") + (if is-col? + (dm/str (tr (dm/str "workspace.options.layout.h." (d/name h))) ", ") + (dm/str (tr (dm/str "workspace.options.layout.v." (d/name v))) ", ")))] + + (dm/str orientation + (str/replace (tr (dm/str "workspace.options.layout." (d/name type))) "-" " ") ", " + (str/replace (tr (dm/str "workspace.options.layout." (d/name wrap))) "-" " "))))] + + [:div.element-set + [:div.element-set-title + [:* + [:span (tr "workspace.options.layout.title")] + (if (= true (:layout @test-values)) + [:div.add-page {:on-click on-remove-layout} i/minus] + [:div.add-page {:on-click on-add-layout} i/close])]] + + (when (= true (:layout @test-values)) + [:div.element-set-content.layout-menu + ;; DIRECTION-GAP + [:div.direction-gap + [:div.direction + [:* + (for [dir [:left :right :bottom :top]] + [:& direction-row {:dir dir + :saved-dir (:layout-dir @test-values) + :set-direction set-direction}])]] + [:div.gap.tooltip.tooltip-bottom-left + {:alt (tr "workspace.options.layout.gap")} + [:span.icon + {:class (dom/classnames + :rotated (or (= (:layout-dir @test-values) :top) + (= (:layout-dir @test-values) :bottom)) + :activated (= @gap-selected? true))} + i/auto-gap] + [:> numeric-input {:no-validate true + :placeholder "--" + :on-click select-all-gap + :on-change set-gap + :on-blur #(reset! gap-selected? false) + :value (:gap @test-values)}]]] + + ;; LAYOUT FLEX + [:div.layout-container + [:div.layout-entry.tooltip.tooltip-bottom + {:on-click toggle-open + :alt (layout-info)} + [:div.element-set-actions-button i/actions] + [:div.layout-info + (layout-info)]] + (when (= true @open?) + [:div.layout-body + [:& orientation-grid {:manage-orientation manage-orientation :test-values test-values :get-icon get-icon}] + + [:div.selects-wrapper + [:select.input-select {:value (d/name (:layout-type @test-values)) + :on-change handle-change-type} + [:option {:value "packed" :label (tr "workspace.options.layout.packed")}] + [:option {:value "space-between" :label (tr "workspace.options.layout.space-between")}] + [:option {:value "space-around" :label (tr "workspace.options.layout.space-around")}]] + + [:select.input-select {:value (d/name (:wrap-type @test-values)) + :on-change handle-wrap-type} + [:option {:value "wrap" :label (tr "workspace.options.layout.wrap")}] + [:option {:value "no-wrap" :label (tr "workspace.options.layout.no-wrap")}]]]])] + + [:& padding-section {:test-values test-values + :change-padding-style change-padding-style + :select-all select-all + :on-padding-change on-padding-change}]])])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs new file mode 100644 index 000000000..448211b1f --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs @@ -0,0 +1,190 @@ +;; This Source Code Form is subject to the terms of the Mozilla Public +;; License, v. 2.0. If a copy of the MPL was not distributed with this +;; file, You can obtain one at http://mozilla.org/MPL/2.0/. +;; +;; Copyright (c) UXBOX Labs SL + +(ns app.main.ui.workspace.sidebar.options.menus.layout-item + (:require + [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.ui.components.numeric-input :refer [numeric-input]] + [app.main.ui.icons :as i] + [app.util.dom :as dom] + [app.util.i18n :as i18n :refer [tr]] + [rumext.alpha :as mf])) + +(def layout-item-attrs + [:margin ;; {:m1 0 :m2 0 :m3 0 :m4 0} + :margin-type ;; :simple :multiple + :h-behavior ;; :fill :fix :auto + :v-behavior ;; :fill :fix :auto + :max-h ;; num + :min-h ;; num + :max-w ;; num + :min-w ]) ;; num +(mf/defc margin-section + [{:keys [test-values change-margin-style select-all on-margin-change] :as props}] + + (let [margin-type (:margin-type @test-values)] + + [:div.row-flex + [:div.margin-options + [:div.margin-icon.tooltip.tooltip-bottom + {:class (dom/classnames :selected (= margin-type :simple)) + :alt (tr "workspace.options.layout.margin-simple") + :on-click #(change-margin-style :simple)} + i/auto-margin] + [:div.margin-icon.tooltip.tooltip-bottom + {:class (dom/classnames :selected (= margin-type :multiple)) + :alt (tr "workspace.options.layout.margin") + :on-click #(change-margin-style :multiple)} + i/auto-margin-side]] + + (cond + (= margin-type :simple) + [:div.tooltip.tooltip-bottom + {:alt (tr "workspace.options.layout.margin-all")} + [:div.input-element.mini + + [:> numeric-input + {:placeholder "--" + :on-click select-all + :on-change (partial on-margin-change :simple) + :value (:m1 (:margin @test-values))}]]] + + (= margin-type :multiple) + [:* + (for [num [:m1 :m2 :m3 :m4]] + [:div.tooltip.tooltip-bottom + {:class (dm/str "margin-" (d/name num)) + :key (dm/str "margin-" (d/name num)) + :alt (case num + :m1 (tr "workspace.options.layout.top") + :m2 (tr "workspace.options.layout.right") + :m3 (tr "workspace.options.layout.bottom") + :m4 (tr "workspace.options.layout.left"))} + [:div.input-element.mini + [:> numeric-input + {:placeholder "--" + :on-click select-all + :on-change (partial on-margin-change num) + :value (num (:margin @test-values))}]]])])])) + +(mf/defc element-behavior + [{:keys [is-layout-container? is-layout-item? h-behavior v-behavior on-change-behavior] :as props}] + (let [auto? is-layout-container? + fill? (and (= true is-layout-item?) (not= true is-layout-container?))] + + [:div.layout-behavior + [:div.button-wrapper.horizontal + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "horizontal fix" + :class (dom/classnames :activated (= h-behavior :fix)) + :on-click #(on-change-behavior :h :fix)} + [:span.icon i/auto-fix-layout]] + (when fill? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "horizontal fill" + :class (dom/classnames :activated (= h-behavior :fill)) + :on-click #(on-change-behavior :h :fill)} + [:span.icon i/auto-fill]]) + (when auto? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "horizontal auto" + :class (dom/classnames :activated (= h-behavior :auto)) + :on-click #(on-change-behavior :h :auto)} + [:span.icon i/auto-hug]])] + [:div.button-wrapper + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "vertical fix" + :class (dom/classnames :activated (= v-behavior :fix)) + :on-click #(on-change-behavior :v :fix)} + [:span.icon i/auto-fix-layout]] + (when fill? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "vertical fill" + :class (dom/classnames :activated (= v-behavior :fill)) + :on-click #(on-change-behavior :v :fill)} + [:span.icon i/auto-fill]]) + (when auto? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "vertical auto" + :class (dom/classnames :activated (= v-behavior :auto)) + :on-click #(on-change-behavior :v :auto)} + [:span.icon i/auto-hug]])]])) + +(mf/defc layout-item-menu + {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} + [{:keys [_ids _type _values] :as props}] + (let [test-values (mf/use-state {:margin {:m1 0 :m2 0 :m3 0 :m4 0} + :margin-type :simple + :h-behavior :fill + :v-behavior :fill + :max-h 100 + :min-h 100 + :max-w 100 + :min-w 100}) + open? (mf/use-state false) + toggle-open (fn [] (swap! open? not)) + is-layout-container? true + is-layout-item? true + change-margin-style + (fn [type] + (swap! test-values assoc :margin-type type)) + + select-all #(dom/select-target %) + + on-margin-change + (fn [type val] + (if (= type :simple) + (swap! test-values assoc :margin {:m1 val :m2 val :m3 val :m4 val}) + (swap! test-values assoc-in [:margin type] val))) + + on-change-behavior + (fn [dir value] + (if (= dir :h) + (swap! test-values assoc :h-behavior value) + (swap! test-values assoc :v-behavior value))) + + on-size-change + (fn [measure value] + (swap! test-values assoc measure value))] + [:div.element-set + [:div.element-set-title + [:span (tr "workspace.options.layout-item.title")]] + [:div.element-set-content.layout-item-menu + [:& element-behavior {:is-layout-container? is-layout-container? + :is-layout-item? is-layout-item? + :v-behavior (:v-behavior @test-values) + :h-behavior (:h-behavior @test-values) + :on-change-behavior on-change-behavior}] + [:div.margin [:& margin-section {:test-values test-values + :change-margin-style change-margin-style + :select-all select-all + :on-margin-change on-margin-change}]] + [:div.advanced-ops-container + [:div.advanced-ops.toltip.tooltip-bottom + {:on-click toggle-open + :alt (tr "workspace.options.layout-item.advanced-ops")} + [:div.element-set-actions-button i/actions] + [:span (tr "workspace.options.layout-item.advanced-ops")]]] + (when (= true @open?) + [:div.advanced-ops-body + (for [item [:max-h :min-h :max-w :min-w]] + [:div.input-element + {:alt (tr (dm/str "workspace.options.layout-item." (d/name item))) + :title (tr (dm/str "workspace.options.layout-item." (d/name item))) + :class (dom/classnames "maxH" (= item :max-h) + "minH" (= item :min-h) + "maxW" (= item :max-w) + "minW" (= item :min-w)) + :key item} + [:> numeric-input + {:no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-click select-all + :on-change (partial on-size-change item) + :value (item @test-values)}]])])]])) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 23367cdda..69517bad6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -6,10 +6,12 @@ (ns app.main.ui.workspace.sidebar.options.shapes.bool (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -22,12 +24,18 @@ measure-values (select-keys shape measure-attrs) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) - constraint-values (select-keys shape constraint-attrs)] + constraint-values (select-keys shape constraint-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] [:& layer-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index 5dbeada46..845db6961 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -6,10 +6,12 @@ (ns app.main.ui.workspace.sidebar.options.shapes.circle (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -23,12 +25,18 @@ measure-values (select-keys shape measure-attrs) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) - constraint-values (select-keys shape constraint-attrs)] + constraint-values (select-keys shape constraint-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] [:& layer-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs index 18ef3950d..79e1bb268 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/frame.cljs @@ -6,10 +6,13 @@ (ns app.main.ui.workspace.sidebar.options.shapes.frame (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs-shape fill-menu]] [app.main.ui.workspace.sidebar.options.menus.frame-grid :refer [frame-grid]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout :refer [layout-attrs layout-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -21,12 +24,22 @@ type (:type shape) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) - measure-values (select-keys shape measure-attrs)] + measure-values (select-keys shape measure-attrs) + layout-values (select-keys shape layout-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids [(:id shape)] :values measure-values :type type :shape shape}] + (when has-layout-item + [:& layout-menu {:type type :ids [(:id shape)] :values layout-values}]) + + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& layer-menu {:ids ids :type type :values layer-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index f74b44493..3f27507e2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -7,12 +7,15 @@ (ns app.main.ui.workspace.sidebar.options.shapes.group (:require [app.common.data :as d] + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] [app.main.ui.workspace.sidebar.options.menus.component :refer [component-attrs component-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout :refer [layout-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-menu]] @@ -30,20 +33,27 @@ objects (->> shape-with-children (group-by :id) (d/mapm (fn [_ v] (first v)))) type :group - [measure-ids measure-values] (get-attrs [shape] objects :measure) - [layer-ids layer-values] (get-attrs [shape] objects :layer) - [constraint-ids constraint-values] (get-attrs [shape] objects :constraint) - [fill-ids fill-values] (get-attrs [shape] objects :fill) - [shadow-ids shadow-values] (get-attrs [shape] objects :shadow) - [blur-ids blur-values] (get-attrs [shape] objects :blur) - [stroke-ids stroke-values] (get-attrs [shape] objects :stroke) - [text-ids text-values] (get-attrs [shape] objects :text) - [svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])] - [comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)]] + [measure-ids measure-values] (get-attrs [shape] objects :measure) + [layer-ids layer-values] (get-attrs [shape] objects :layer) + [constraint-ids constraint-values] (get-attrs [shape] objects :constraint) + [fill-ids fill-values] (get-attrs [shape] objects :fill) + [shadow-ids shadow-values] (get-attrs [shape] objects :shadow) + [blur-ids blur-values] (get-attrs [shape] objects :blur) + [stroke-ids stroke-values] (get-attrs [shape] objects :stroke) + [text-ids text-values] (get-attrs [shape] objects :text) + [svg-ids svg-values] [[(:id shape)] (select-keys shape [:svg-attrs])] + [comp-ids comp-values] [[(:id shape)] (select-keys shape component-attrs)] + [layout-ids layout-values] (get-attrs [shape] objects :layout) + [layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item) + ] [:div.options [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& component-menu {:ids comp-ids :values comp-values}] + (when-not (empty? layout-ids) + [:& layout-menu {:type type :ids layout-ids :values layout-values}]) + (when has-layout-item + [:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}]) [:& constraints-menu {:ids constraint-ids :values constraint-values}] [:& layer-menu {:type type :ids layer-ids :values layer-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index 077ecda69..b6d37e3a5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -6,10 +6,12 @@ (ns app.main.ui.workspace.sidebar.options.shapes.image (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -23,12 +25,18 @@ layer-values (select-keys shape layer-attrs) constraint-values (select-keys shape constraint-attrs) fill-values (select-keys shape fill-attrs) - stroke-values (select-keys shape stroke-attrs)] + stroke-values (select-keys shape stroke-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs index b7273638d..97e30ca30 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/multiple.cljs @@ -11,6 +11,7 @@ [app.common.geom.shapes :as gsh] [app.common.pages.common :as cpc] [app.common.text :as txt] + [app.main.constants :refer [has-layout-item]] [app.main.ui.hooks :as hooks] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-attrs blur-menu]] [app.main.ui.workspace.sidebar.options.menus.color-selection :refer [color-selection-menu]] @@ -18,6 +19,8 @@ [app.main.ui.workspace.sidebar.options.menus.exports :refer [exports-attrs exports-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout :refer [layout-attrs layout-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -130,15 +133,17 @@ :exports :shape}}) (def group->attrs - {:measure measure-attrs - :layer layer-attrs - :constraint constraint-attrs - :fill fill-attrs - :shadow shadow-attrs - :blur blur-attrs - :stroke stroke-attrs - :text ot/attrs - :exports exports-attrs}) + {:measure measure-attrs + :layer layer-attrs + :constraint constraint-attrs + :fill fill-attrs + :shadow shadow-attrs + :blur blur-attrs + :stroke stroke-attrs + :text ot/attrs + :exports exports-attrs + :layout layout-attrs + :layout-item layout-item-attrs}) (def shadow-keys [:style :color :offset-x :offset-y :blur :spread]) @@ -242,17 +247,20 @@ all-types (into #{} (map :type shapes)) has-text? (contains? all-types :text) - + [measure-ids measure-values] (get-attrs shapes objects :measure) - [layer-ids layer-values - constraint-ids constraint-values - fill-ids fill-values - shadow-ids shadow-values - blur-ids blur-values - stroke-ids stroke-values - text-ids text-values - exports-ids exports-values] + + [layer-ids layer-values + constraint-ids constraint-values + fill-ids fill-values + shadow-ids shadow-values + blur-ids blur-values + stroke-ids stroke-values + text-ids text-values + exports-ids exports-values + layout-ids layout-values + layout-item-ids layout-item-values] (mf/use-memo (mf/deps objects-no-measures) (fn [] @@ -266,12 +274,21 @@ (get-attrs shapes objects-no-measures :blur) (get-attrs shapes objects-no-measures :stroke) (get-attrs shapes objects-no-measures :text) - (get-attrs shapes objects-no-measures :exports)])))] + (get-attrs shapes objects-no-measures :exports) + (get-attrs shapes objects-no-measures :layout) + (get-attrs shapes objects-no-measures :layout-item) + ])))] [:div.options (when-not (empty? measure-ids) [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) + (when-not (empty? layout-ids) + [:& layout-menu {:type type :ids layout-ids :values layout-values}]) + + (when has-layout-item + [:& layout-item-menu {:type type :ids layout-item-ids :values layout-item-values}]) + (when-not (empty? constraint-ids) [:& constraints-menu {:ids constraint-ids :values constraint-values}]) @@ -284,7 +301,7 @@ (when-not (empty? stroke-ids) [:& stroke-menu {:type type :ids stroke-ids :show-caps show-caps :values stroke-values :disable-stroke-style has-text?}]) - + (when-not (empty? shapes) [:& color-selection-menu {:type type :shapes (vals objects-no-measures)}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index be8bb8e1e..b7f4265fa 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -6,10 +6,12 @@ (ns app.main.ui.workspace.sidebar.options.shapes.path (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -23,12 +25,18 @@ measure-values (select-keys shape measure-attrs) stroke-values (select-keys shape stroke-attrs) layer-values (select-keys shape layer-attrs) - constraint-values (select-keys shape constraint-attrs)] + constraint-values (select-keys shape constraint-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] [:& layer-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index 825e8e3eb..49773a069 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -6,10 +6,12 @@ (ns app.main.ui.workspace.sidebar.options.shapes.rect (:require + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -25,13 +27,18 @@ layer-values (select-keys shape layer-attrs) constraint-values (select-keys shape constraint-attrs) fill-values (select-keys shape fill-attrs) - stroke-values (select-keys shape stroke-attrs)] + stroke-values (select-keys shape stroke-attrs) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu {:ids ids :type type :values measure-values :shape shape}] - + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs index c21726de8..331cc6d55 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/svg_raw.cljs @@ -8,9 +8,11 @@ (:require [app.common.colors :as clr] [app.common.data :as d] + [app.main.constants :refer [has-layout-item]] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -97,7 +99,8 @@ measure-values (select-keys shape measure-attrs) constraint-values (select-keys shape constraint-attrs) fill-values (get-fill-values shape) - stroke-values (get-stroke-values shape)] + stroke-values (get-stroke-values shape) + layout-item-values (select-keys shape layout-item-attrs)] (when (contains? svg-elements tag) [:* @@ -105,6 +108,11 @@ :type type :values measure-values :shape shape}] + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values constraint-values}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index f90ff6b32..54b803245 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -7,6 +7,7 @@ (ns app.main.ui.workspace.sidebar.options.shapes.text (:require [app.common.data :as d] + [app.main.constants :refer [has-layout-item]] [app.main.data.workspace.texts :as dwt] [app.main.refs :as refs] [app.main.ui.workspace.sidebar.options.menus.blur :refer [blur-menu]] @@ -14,6 +15,7 @@ [app.main.ui.workspace.sidebar.options.menus.constraints :refer [constraint-attrs constraints-menu]] [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-menu fill-attrs]] [app.main.ui.workspace.sidebar.options.menus.layer :refer [layer-attrs layer-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-item :refer [layout-item-attrs layout-item-menu]] [app.main.ui.workspace.sidebar.options.menus.measures :refer [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] [app.main.ui.workspace.sidebar.options.menus.stroke :refer [stroke-attrs stroke-menu]] @@ -56,7 +58,8 @@ (dwt/current-text-values {:editor-state editor-state :shape shape - :attrs text-attrs}))] + :attrs text-attrs})) + layout-item-values (select-keys shape layout-item-attrs)] [:* [:& measures-menu @@ -64,7 +67,11 @@ :type type :values (select-keys shape measure-attrs) :shape shape}] - + (when has-layout-item + [:& layout-item-menu {:ids ids + :type type + :values layout-item-values + :shape shape}]) [:& constraints-menu {:ids ids :values (select-keys shape constraint-attrs)}] @@ -72,7 +79,7 @@ [:& layer-menu {:ids ids :type type :values layer-values}] - + [:& text-menu {:ids ids :type type @@ -97,6 +104,4 @@ [:& blur-menu {:ids ids - :values (select-keys shape [:blur])}] - - ])) + :values (select-keys shape [:blur])}]])) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index dfa9572fd..dd0253059 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -102,6 +102,20 @@ (when (some? event) (.-target event))) +(defn select-target + "Extract the target from event instance and select it" + [^js event] + (when (some? event) + (-> event + (.-target) + (.-select)))) + +(defn select-node + "Select element by node" + [^js node] + (when (some? node) + (.-select node))) + (defn get-current-target "Extract the current target from event instance (different from target when event triggered in a child of the subscribing element)." diff --git a/frontend/translations/ar.po b/frontend/translations/ar.po index 06a8a2868..9b64bb5ad 100644 --- a/frontend/translations/ar.po +++ b/frontend/translations/ar.po @@ -2034,10 +2034,6 @@ msgstr "الصفوف" msgid "workspace.options.grid.square" msgstr "مربع" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "الشبكة والتخطيطات" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "ملء المجموعة" diff --git a/frontend/translations/ca.po b/frontend/translations/ca.po index 66f55e803..2d0eff142 100644 --- a/frontend/translations/ca.po +++ b/frontend/translations/ca.po @@ -2527,10 +2527,6 @@ msgstr "Files" msgid "workspace.options.grid.square" msgstr "Quadrat" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Quadrícula i disposicions" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Emplenament del grup" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index 3f7645b39..b6486cbd6 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -2813,10 +2813,6 @@ msgstr "Zeile" msgid "workspace.options.grid.square" msgstr "Quadrat" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Raster & Layouts" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Gruppe füllen" diff --git a/frontend/translations/el.po b/frontend/translations/el.po index 7db6d07fd..389f8cb21 100644 --- a/frontend/translations/el.po +++ b/frontend/translations/el.po @@ -1706,10 +1706,6 @@ msgstr "Σειρές" msgid "workspace.options.grid.square" msgstr "τετράγωνο" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Πλέγμα & Διατάξεις" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Συμπλήρωση ομάδας" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 628e35997..5e36646de 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -3134,8 +3134,8 @@ msgid "workspace.options.grid.square" msgstr "Square" #: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Grid & Layouts" +msgid "workspace.options.grid.grid-title" +msgstr "Grid" #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" @@ -3432,6 +3432,154 @@ msgstr "Group layers" msgid "workspace.options.layer-options.title.multiple" msgstr "Selected layers" +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.title" +msgstr "Layout" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.left" +msgstr "Row" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.right" +msgstr "Reverse row" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.top" +msgstr "Reverse column" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.bottom" +msgstr "Column" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.gap" +msgstr "Gap" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.left" +msgstr "left" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.right" +msgstr "right" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.center" +msgstr "center" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.top" +msgstr "top" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.bottom" +msgstr "bottom" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.center" +msgstr "center" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.packed" +msgstr "packed" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.space-between" +msgstr "space between" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.space-around" +msgstr "space around" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.wrap" +msgstr "wrap" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.no-wrap" +msgstr "no wrap" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding-simple" +msgstr "Simple padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding" +msgstr "Padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding-all" +msgstr "All sides" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.top" +msgstr "Top" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.right" +msgstr "Right" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.bottom" +msgstr "Bottom" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.left" +msgstr "Left" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title" +msgstr "Element resizing" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin-simple" +msgstr "Simple margin" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin" +msgstr "Margin" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin-all" +msgstr "All sides" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.advanced-ops" +msgstr "Advanced options" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.max-h" +msgstr "Max.Height" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.max-w" +msgstr "Max.Width" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.min-h" +msgstr "Min.Height" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.min-w" +msgstr "Min.Width" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.max-h" +msgstr "Maximum height" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.max-w" +msgstr "Maximum width" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.min-h" +msgstr "Minimum height" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.min-w" +msgstr "Minimum width" + #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs msgid "workspace.options.more-colors" msgstr "More colors" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 17a5d933d..64520a989 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -3296,8 +3296,8 @@ msgid "workspace.options.grid.square" msgstr "Cuadros" #: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Rejilla & Estructuras" +msgid "workspace.options.grid.grid-title" +msgstr "Rejilla" #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" @@ -3594,6 +3594,154 @@ msgstr "Capas de grupo" msgid "workspace.options.layer-options.title.multiple" msgstr "Capas seleccionadas" +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.title" +msgstr "Layout" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.left" +msgstr "Fila" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.right" +msgstr "Fila invertida" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.top" +msgstr "Columna invertida" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.direction.bottom" +msgstr "Columna" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.gap" +msgstr "Espacio" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.left" +msgstr "izquierda" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.right" +msgstr "derecha" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.h.center" +msgstr "centro" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.top" +msgstr "arriba" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.bottom" +msgstr "abajo" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.v.center" +msgstr "centro" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.packed" +msgstr "juntar" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.space-between" +msgstr "espaciar" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.space-around" +msgstr "separar" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.wrap" +msgstr "agrupar" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.no-wrap" +msgstr "no agrupar" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding-simple" +msgstr "Padding sencillo" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding" +msgstr "Padding" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.padding-all" +msgstr "Todos" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.top" +msgstr "Arriba" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.right" +msgstr "Derecha" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.bottom" +msgstr "Abajo" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs +msgid "workspace.options.layout.left" +msgstr "Izquierda" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title" +msgstr "Redimensionado de elemento" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin-simple" +msgstr "Margen sencillo" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin" +msgstr "Margen" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout.margin-all" +msgstr "Todos" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.advanced-ops" +msgstr "Opciones avanzadas" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.max-h" +msgstr "AlturaMax." + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.max-w" +msgstr "AnchoMax." + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.min-h" +msgstr "AlturaMin." + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.min-w" +msgstr "AnchoMin." + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.max-h" +msgstr "Altura máxima" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.max-w" +msgstr "Ancho máximo" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.min-h" +msgstr "Altura mínima" + +#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs +msgid "workspace.options.layout-item.title.min-w" +msgstr "Ancho mínimo" + #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs msgid "workspace.options.more-colors" msgstr "Más colores" diff --git a/frontend/translations/fr.po b/frontend/translations/fr.po index 75778b523..72a3fc1bc 100644 --- a/frontend/translations/fr.po +++ b/frontend/translations/fr.po @@ -2186,10 +2186,6 @@ msgstr "Lignes" msgid "workspace.options.grid.square" msgstr "Carré" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Grille & Calques" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Remplissage de groupe" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index ca7d6b7a3..7129f0cd2 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -2754,10 +2754,6 @@ msgstr "שורות" msgid "workspace.options.grid.square" msgstr "ריבוע" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "רשת ופריסות" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "מילוי קבוצה" diff --git a/frontend/translations/pl.po b/frontend/translations/pl.po index d3f5e10a8..70a4ed379 100644 --- a/frontend/translations/pl.po +++ b/frontend/translations/pl.po @@ -2740,10 +2740,6 @@ msgstr "Rzędy" msgid "workspace.options.grid.square" msgstr "Kwadrat" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Siatka i układy" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Wypełnienie grupy" diff --git a/frontend/translations/pt_BR.po b/frontend/translations/pt_BR.po index ce1c152f2..af91a4185 100644 --- a/frontend/translations/pt_BR.po +++ b/frontend/translations/pt_BR.po @@ -1627,10 +1627,6 @@ msgstr "Linhas" msgid "workspace.options.grid.square" msgstr "Quadrado" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Grades & Layouts" - #: src/app/main/ui/workspace/sidebar/options/menus/layer.cljs msgid "workspace.options.layer-options.blend-mode.color" msgstr "Cor" diff --git a/frontend/translations/ro.po b/frontend/translations/ro.po index f0447a8d4..ab6d47f7a 100644 --- a/frontend/translations/ro.po +++ b/frontend/translations/ro.po @@ -1919,10 +1919,6 @@ msgstr "Rânduri" msgid "workspace.options.grid.square" msgstr "Pătrat" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Grilă & Layout" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Group fill" diff --git a/frontend/translations/ru.po b/frontend/translations/ru.po index 605a3c69a..50cd08e0a 100644 --- a/frontend/translations/ru.po +++ b/frontend/translations/ru.po @@ -2034,10 +2034,6 @@ msgstr "Строки" msgid "workspace.options.grid.square" msgstr "Квадрат" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Сетка и Макеты" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Заливка для группы" diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index e777f23dd..130cf57b6 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -2813,10 +2813,6 @@ msgstr "Satırlar" msgid "workspace.options.grid.square" msgstr "Kare" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "Izgara ve Yerleşim Düzenleri" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "Grubu doldur" diff --git a/frontend/translations/zh_CN.po b/frontend/translations/zh_CN.po index 219906d33..d6b44316a 100644 --- a/frontend/translations/zh_CN.po +++ b/frontend/translations/zh_CN.po @@ -2497,10 +2497,6 @@ msgstr "行" msgid "workspace.options.grid.square" msgstr "正方形" -#: src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs -msgid "workspace.options.grid.title" -msgstr "网格与布局" - #: src/app/main/ui/workspace/sidebar/options/menus/fill.cljs msgid "workspace.options.group-fill" msgstr "编组填充"