diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc index 8309afa9d..8c983341d 100644 --- a/common/src/app/common/types/shape/layout.cljc +++ b/common/src/app/common/types/shape/layout.cljc @@ -9,10 +9,13 @@ [app.common.spec :as us] [clojure.spec.alpha :as s])) -(s/def ::layout boolean?) -(s/def ::layout-dir #{:right :left :top :bottom}) +(s/def ::layout #{:flex :grid}) +(s/def ::layout-flex-dir #{:row :reverse-row :column :reverse-column}) +(s/def ::layout-gap-type #{:simple :multiple}) (s/def ::layout-gap ::us/safe-number) -(s/def ::layout-type #{:packed :space-between :space-around}) +(s/def ::layout-align-items #{:start :end :center :strech}) +(s/def ::layout-align-content #{:start :end :center :space-between :space-around :strech}) +(s/def ::layout-justify-content #{:start :center :end :space-between :space-around}) (s/def ::layout-wrap-type #{:wrap :no-wrap}) (s/def ::layout-padding-type #{:simple :multiple}) @@ -25,19 +28,24 @@ (s/keys :req-un [::p1] :opt-un [::p2 ::p3 ::p4])) -(s/def ::layout-h-orientation #{:left :center :right}) -(s/def ::layout-v-orientation #{:top :center :bottom}) +(s/def ::row-gap ::us/safe-number) +(s/def ::column-gap ::us/safe-number) + +(s/def ::layout-gap + (s/keys :req-un [::row-gap ::column-gap])) (s/def ::layout-container-props (s/keys :opt-un [::layout - ::layout-dir + ::layout-flex-dir ::layout-gap + ::layout-gap-type ::layout-type ::layout-wrap-type ::layout-padding-type ::layout-padding - ::layout-h-orientation - ::layout-v-orientation])) + ::layout-justify-content + ::layout-align-items + ::layout-align-content])) (s/def ::m1 ::us/safe-number) (s/def ::m2 ::us/safe-number) @@ -50,6 +58,7 @@ (s/def ::layout-margin-type #{:simple :multiple}) (s/def ::layout-h-behavior #{:fill :fix :auto}) (s/def ::layout-v-behavior #{:fill :fix :auto}) +(s/def ::layout-align-self #{:start :end :center :strech :baseline}) (s/def ::layout-max-h ::us/safe-number) (s/def ::layout-min-h ::us/safe-number) (s/def ::layout-max-w ::us/safe-number) @@ -63,4 +72,5 @@ ::layout-max-h ::layout-min-h ::layout-max-w - ::layout-min-w])) + ::layout-min-w + ::layout-align-self])) diff --git a/frontend/resources/images/icons/align-content-column-around.svg b/frontend/resources/images/icons/align-content-column-around.svg new file mode 100644 index 000000000..d7f54514a --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-around.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-column-between.svg b/frontend/resources/images/icons/align-content-column-between.svg new file mode 100644 index 000000000..f07dbe1db --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-between.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-column-center.svg b/frontend/resources/images/icons/align-content-column-center.svg new file mode 100644 index 000000000..56317ce06 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-column-end.svg b/frontend/resources/images/icons/align-content-column-end.svg new file mode 100644 index 000000000..eab99cd62 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-column-start.svg b/frontend/resources/images/icons/align-content-column-start.svg new file mode 100644 index 000000000..d3490501f --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-around.svg b/frontend/resources/images/icons/align-content-row-around.svg new file mode 100644 index 000000000..f49bb584f --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-around.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-between.svg b/frontend/resources/images/icons/align-content-row-between.svg new file mode 100644 index 000000000..6723db3d9 --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-between.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-center.svg b/frontend/resources/images/icons/align-content-row-center.svg new file mode 100644 index 000000000..b318cd9d2 --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-end.svg b/frontend/resources/images/icons/align-content-row-end.svg new file mode 100644 index 000000000..56aecaae9 --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-content-row-start.svg b/frontend/resources/images/icons/align-content-row-start.svg new file mode 100644 index 000000000..d666646cf --- /dev/null +++ b/frontend/resources/images/icons/align-content-row-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-column-baseline.svg b/frontend/resources/images/icons/align-items-column-baseline.svg new file mode 100644 index 000000000..862f7afd1 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-baseline.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-column-center.svg b/frontend/resources/images/icons/align-items-column-center.svg new file mode 100644 index 000000000..e35973436 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-column-end.svg b/frontend/resources/images/icons/align-items-column-end.svg new file mode 100644 index 000000000..7bdb1d632 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-column-start.svg b/frontend/resources/images/icons/align-items-column-start.svg new file mode 100644 index 000000000..5c231d486 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-column-strech.svg b/frontend/resources/images/icons/align-items-column-strech.svg new file mode 100644 index 000000000..dd441d93f --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-strech.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-row-baseline.svg b/frontend/resources/images/icons/align-items-row-baseline.svg new file mode 100644 index 000000000..b8b397e0a --- /dev/null +++ b/frontend/resources/images/icons/align-items-row-baseline.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-row-center.svg b/frontend/resources/images/icons/align-items-row-center.svg new file mode 100644 index 000000000..a07e43a47 --- /dev/null +++ b/frontend/resources/images/icons/align-items-row-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-row-end.svg b/frontend/resources/images/icons/align-items-row-end.svg new file mode 100644 index 000000000..ddeb660a1 --- /dev/null +++ b/frontend/resources/images/icons/align-items-row-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-row-start.svg b/frontend/resources/images/icons/align-items-row-start.svg new file mode 100644 index 000000000..69516fc68 --- /dev/null +++ b/frontend/resources/images/icons/align-items-row-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-items-row-strech.svg b/frontend/resources/images/icons/align-items-row-strech.svg new file mode 100644 index 000000000..22b308e14 --- /dev/null +++ b/frontend/resources/images/icons/align-items-row-strech.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-column-baseline.svg b/frontend/resources/images/icons/align-self-column-baseline.svg new file mode 100644 index 000000000..4ed4d6357 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-baseline.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-column-bottom.svg b/frontend/resources/images/icons/align-self-column-bottom.svg new file mode 100644 index 000000000..6ef7f1e75 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-column-center.svg b/frontend/resources/images/icons/align-self-column-center.svg new file mode 100644 index 000000000..c45bfb53f --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-column-strech.svg b/frontend/resources/images/icons/align-self-column-strech.svg new file mode 100644 index 000000000..5803cb447 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-strech.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-column-top.svg b/frontend/resources/images/icons/align-self-column-top.svg new file mode 100644 index 000000000..67adbc722 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-baseline.svg b/frontend/resources/images/icons/align-self-row-baseline.svg new file mode 100644 index 000000000..db2660684 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-baseline.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-center.svg b/frontend/resources/images/icons/align-self-row-center.svg new file mode 100644 index 000000000..df911a89c --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-left.svg b/frontend/resources/images/icons/align-self-row-left.svg new file mode 100644 index 000000000..7ff6caee1 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-right.svg b/frontend/resources/images/icons/align-self-row-right.svg new file mode 100644 index 000000000..665e7b562 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-strech.svg b/frontend/resources/images/icons/align-self-row-strech.svg new file mode 100644 index 000000000..426db52b5 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-strech.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-direction.svg b/frontend/resources/images/icons/auto-direction.svg index d002174b6..3429588fe 100644 --- a/frontend/resources/images/icons/auto-direction.svg +++ b/frontend/resources/images/icons/auto-direction.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/resources/images/icons/auto-fix.svg b/frontend/resources/images/icons/auto-fix.svg index 38c4d54e8..f2be41986 100644 --- a/frontend/resources/images/icons/auto-fix.svg +++ b/frontend/resources/images/icons/auto-fix.svg @@ -1,3 +1,3 @@ - - + + diff --git a/frontend/resources/images/icons/auto-flex.svg b/frontend/resources/images/icons/auto-flex.svg new file mode 100644 index 000000000..9023c8fcf --- /dev/null +++ b/frontend/resources/images/icons/auto-flex.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-gap.svg b/frontend/resources/images/icons/auto-gap.svg index 307740492..25593da80 100644 --- a/frontend/resources/images/icons/auto-gap.svg +++ b/frontend/resources/images/icons/auto-gap.svg @@ -1,3 +1,3 @@ - + diff --git a/frontend/resources/images/icons/auto-grid.svg b/frontend/resources/images/icons/auto-grid.svg new file mode 100644 index 000000000..c2acf2476 --- /dev/null +++ b/frontend/resources/images/icons/auto-grid.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/auto-wrap.svg b/frontend/resources/images/icons/auto-wrap.svg new file mode 100644 index 000000000..08a7a19a0 --- /dev/null +++ b/frontend/resources/images/icons/auto-wrap.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-around.svg b/frontend/resources/images/icons/justify-content-column-around.svg new file mode 100644 index 000000000..19fbfcc57 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-around.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-between.svg b/frontend/resources/images/icons/justify-content-column-between.svg new file mode 100644 index 000000000..6e1bb1297 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-between.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-center.svg b/frontend/resources/images/icons/justify-content-column-center.svg new file mode 100644 index 000000000..f4c774653 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-end.svg b/frontend/resources/images/icons/justify-content-column-end.svg new file mode 100644 index 000000000..9ac317727 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-start.svg b/frontend/resources/images/icons/justify-content-column-start.svg new file mode 100644 index 000000000..f73b2c754 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-around.svg b/frontend/resources/images/icons/justify-content-row-around.svg new file mode 100644 index 000000000..ff52e7857 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-around.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-between.svg b/frontend/resources/images/icons/justify-content-row-between.svg new file mode 100644 index 000000000..57cba5490 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-between.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-center.svg b/frontend/resources/images/icons/justify-content-row-center.svg new file mode 100644 index 000000000..2a7e32c75 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-end.svg b/frontend/resources/images/icons/justify-content-row-end.svg new file mode 100644 index 000000000..1b3a33d48 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-end.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-row-start.svg b/frontend/resources/images/icons/justify-content-row-start.svg new file mode 100644 index 000000000..7ba66c756 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-row-start.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index 6d14fe79b..3c785391e 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -59,6 +59,7 @@ padding: $size-2 $size-1; .element-set-title { + height: 35px; color: $color-gray-20; display: flex; font-size: $fs14; @@ -1165,12 +1166,6 @@ fill: $color-primary; } } - - svg { - } - - .multiple-typography-button:hover svg { - } } .font-selector { @@ -1588,58 +1583,133 @@ } } -.layout-menu { +.layout-menu, +.layout-item-menu { + font-family: "worksans", sans-serif; svg { height: 16px; width: 16px; fill: $color-gray-30; } - .direction-gap { - display: flex; - justify-content: space-between; - .direction { + .layout-row { + display: grid; + grid-template-columns: 60px 1fr; + margin-bottom: 5px; + .row-title { + font-size: $fs12; display: flex; - .dir { - margin-right: 4px; + justify-content: start; + align-items: center; + margin-right: 5px; + font-family: "worksans", sans-serif; + } + .btn-wrapper { + display: flex; + width: 100%; + .direction, + .wrap-type, + .align-items-style, + .align-self-style, + .justify-content-style, + .align-content-style, + .layout-behavior { 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 { + border-radius: 4px; + border: 1px solid $color-gray-60; + height: 26px; + margin-right: 5px; + flex-grow: 1; + &.horizontal { + button svg { transform: rotate(90deg); } } - &.active, - &:hover { - svg { - fill: $color-primary; + button { + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; + background: none; + border: none; + cursor: pointer; + border-right: 1px solid $color-gray-60; + &.active, + &:hover { + svg { + fill: $color-primary; + } } } + .dir { + display: flex; + justify-content: center; + align-items: center; + background: none; + border: none; + cursor: pointer; + border-right: 1px solid $color-gray-60; + padding: 4px; + &.reverse-row { + svg { + transform: rotate(180deg); + } + } + + &.reverse-column { + svg { + transform: rotate(-90deg); + } + } + &.column { + svg { + transform: rotate(90deg); + } + } + &.active, + &:hover { + svg { + fill: $color-primary; + } + } + } + :last-child { + border-right: none; + } } } - .gap { + } + .no-wrap { + display: flex; + align-items: center; + justify-content: center; + height: 21px; + width: 21px; + svg { + height: 0.7rem; + width: 0.7rem; + } + } + + .gap-group { + display: flex; + margin-top: 3px; + margin-bottom: 8px; + height: 26px; + .gap-row, + .gap-column { display: flex; justify-content: center; align-items: center; + flex-grow: 1; .icon { display: flex; justify-content: center; align-items: center; margin-right: 7px; + svg { + height: 14px; + width: 14px; + } &.rotated { transform: rotate(90deg); } @@ -1653,11 +1723,79 @@ font-size: 0.75rem; min-width: 0; padding: 0.25rem; - width: 50px; + width: 70px; height: 20px; margin: 0; } } + button { + display: flex; + justify-content: center; + align-items: center; + background: none; + border: none; + cursor: pointer; + border-radius: $br-small; + &.active { + svg { + fill: $color-primary; + } + } + &:hover { + background-color: $color-primary; + svg { + fill: $color-gray-60; + } + } + } + } + + .padding-row, + .margin-row { + display: grid; + grid-template-columns: 65px auto; + height: 26px; + .padding-icons, + .margin-icons { + display: flex; + padding: 0; + border: 1px solid $color-gray-60; + border-radius: 3px; + + .padding-icon, + .margin-icon { + display: flex; + justify-content: center; + align-items: center; + padding: 6px; + flex-grow: 1; + border-right: 1px solid $color-gray-60; + cursor: pointer; + + &:hover, + &.selected { + svg { + fill: $color-primary; + } + } + svg { + height: 14px; + width: 14px; + fill: $color-gray-30; + } + } + :last-child { + border: none; + } + } + .wrapper { + display: flex; + height: 26px; + .input-element { + margin: 0; + height: 26px; + } + } } .layout-container { @@ -1783,69 +1921,40 @@ } } -.layout-item-menu { - .layout-behavior { +.advanced-ops { + margin: 10px 0; + display: flex; + align-items: center; + cursor: pointer; + font-size: $fs12; + color: $color-gray-30; + border: none; + background-color: transparent; + padding: 0; + .icon { display: flex; + justify-content: start; 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); - } - } + margin-right: 10px; + svg { + fill: $color-gray-20; } } - .advanced-ops { - display: flex; - align-items: center; - cursor: pointer; - font-size: $fs12; - color: $color-gray-30; - &:hover { - svg { - fill: $color-primary; - } + + &:hover { + svg { + fill: $color-primary; } } - .advanced-ops-body { +} +.advanced-ops-body { + .input-wrapper { display: grid; grid-template-columns: 1fr 1fr; .input-element { width: 100%; &::after { + content: attr(alt); width: 100px; } } diff --git a/frontend/resources/styles/main/partials/sidebar-sitemap.scss b/frontend/resources/styles/main/partials/sidebar-sitemap.scss index 3568ce360..44706d500 100644 --- a/frontend/resources/styles/main/partials/sidebar-sitemap.scss +++ b/frontend/resources/styles/main/partials/sidebar-sitemap.scss @@ -156,6 +156,53 @@ } } +.title-actions { + align-items: center; + display: flex; + justify-content: center; + margin-left: auto; + .layout-btns { + display: flex; + align-items: center; + justify-content: end; + } + .remove-layout { + display: flex; + align-items: center; + justify-content: center; + height: 21px; + width: 21px; + padding: 4px; + svg { + height: 0.7rem; + width: 0.7rem; + } + } + button { + background-color: transparent; + border-radius: $br-small; + border: 1px solid transparent; + cursor: pointer; + color: $color-gray-20; + svg { + fill: $color-gray-20; + height: 0.7rem; + width: 0.7rem; + } + &.active { + color: $color-primary; + } + + &:hover { + background-color: $color-primary; + color: $color-gray-60; + svg { + fill: $color-gray-60 !important; + } + } + } +} + .element-set-title-actions { display: flex; flex-direction: row; diff --git a/frontend/src/app/main/data/workspace/shape_layout.cljs b/frontend/src/app/main/data/workspace/shape_layout.cljs index 98003f819..0b96b54b5 100644 --- a/frontend/src/app/main/data/workspace/shape_layout.cljs +++ b/frontend/src/app/main/data/workspace/shape_layout.cljs @@ -23,18 +23,30 @@ :layout-padding-type :layout-padding :layout-h-orientation - :layout-v-orientation]) + :layout-v-orientation -(def initial-layout - {:layout true - :layout-dir :left - :layout-gap 0 - :layout-type :packed - :layout-wrap-type :wrap + :layout-align-content + :layout-flex-dir + :layout-align-items + :layout-justify-content + :layout-gap-type + ]) + + +(def initial-flex-layout + {:layout :flex + :layout-flex-dir :row + :layout-gap-type :simple + :layout-gap {:row-gap 0 :column-gap 0} + :layout-align-items :start + :layout-justify-content :start + :layout-align-content :strech + :layout-wrap-type :no-wrap :layout-padding-type :simple - :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0} - :layout-h-orientation :left - :layout-v-orientation :top}) + :layout-padding {:p1 0 :p2 0 :p3 0 :p4 0}}) + +(def initial-grid-layout ;; TODO + {:layout :grid}) (defn update-layout-positions [ids] @@ -50,12 +62,16 @@ ;; TODO: Remove constraints from children (defn create-layout - [ids] + [ids type] (ptk/reify ::create-layout ptk/WatchEvent (watch [_ _ _] - (rx/of (dwc/update-shapes ids #(merge % initial-layout)) - (update-layout-positions ids))))) + (if (= type :flex) + (rx/of (dwc/update-shapes ids #(merge % initial-flex-layout)) + (update-layout-positions ids)) + (rx/of (dwc/update-shapes ids #(merge % initial-grid-layout)) + (update-layout-positions ids)))))) + (defn remove-layout [ids] diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 2500a60d3..69dd22c14 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -14,6 +14,36 @@ (def action (icon-xref :action)) (def actions (icon-xref :actions)) (def align-bottom (icon-xref :align-bottom)) +(def align-content-column-around (icon-xref :align-content-column-around)) +(def align-content-column-between (icon-xref :align-content-column-between)) +(def align-content-column-center (icon-xref :align-content-column-center)) +(def align-content-column-end (icon-xref :align-content-column-end)) +(def align-content-column-start (icon-xref :align-content-column-start)) +(def align-content-row-around (icon-xref :align-content-row-around)) +(def align-content-row-between (icon-xref :align-content-row-between)) +(def align-content-row-center (icon-xref :align-content-row-center)) +(def align-content-row-end (icon-xref :align-content-row-end)) +(def align-content-row-start (icon-xref :align-content-row-start)) +(def align-items-column-baseline (icon-xref :align-items-column-baseline)) +(def align-items-column-center (icon-xref :align-items-column-center)) +(def align-items-column-end (icon-xref :align-items-column-end)) +(def align-items-column-start (icon-xref :align-items-column-start)) +(def align-items-column-strech (icon-xref :align-items-column-strech)) +(def align-items-row-baseline (icon-xref :align-items-row-baseline)) +(def align-items-row-center (icon-xref :align-items-row-center)) +(def align-items-row-end (icon-xref :align-items-row-end)) +(def align-items-row-start (icon-xref :align-items-row-start)) +(def align-items-row-strech (icon-xref :align-items-row-strech)) +(def align-self-column-baseline (icon-xref :align-self-column-baseline)) +(def align-self-column-center (icon-xref :align-self-column-center)) +(def align-self-column-top (icon-xref :align-self-column-top)) +(def align-self-column-bottom (icon-xref :align-self-column-bottom)) +(def align-self-column-strech (icon-xref :align-self-column-strech)) +(def align-self-row-baseline (icon-xref :align-self-row-baseline)) +(def align-self-row-center (icon-xref :align-self-row-center)) +(def align-self-row-left (icon-xref :align-self-row-left)) +(def align-self-row-right (icon-xref :align-self-row-right)) +(def align-self-row-strech (icon-xref :align-self-row-strech)) (def align-middle (icon-xref :align-middle)) (def align-top (icon-xref :align-top)) (def alignment (icon-xref :alignment)) @@ -39,6 +69,7 @@ (def auto-padding (icon-xref :auto-padding)) (def auto-padding-side (icon-xref :auto-padding-side)) (def auto-width (icon-xref :auto-width)) +(def auto-wrap (icon-xref :auto-wrap)) (def bool-difference (icon-xref :boolean-difference)) (def bool-exclude (icon-xref :boolean-exclude)) (def bool-flatten (icon-xref :boolean-flatten)) @@ -91,6 +122,16 @@ (def import (icon-xref :import)) (def infocard (icon-xref :infocard)) (def interaction (icon-xref :interaction)) +(def justify-content-column-around (icon-xref :justify-content-column-around)) +(def justify-content-column-between (icon-xref :justify-content-column-between)) +(def justify-content-column-center (icon-xref :justify-content-column-center)) +(def justify-content-column-end (icon-xref :justify-content-column-end)) +(def justify-content-column-start (icon-xref :justify-content-column-start)) +(def justify-content-row-around (icon-xref :justify-content-row-around)) +(def justify-content-row-between (icon-xref :justify-content-row-between)) +(def justify-content-row-center (icon-xref :justify-content-row-center)) +(def justify-content-row-end (icon-xref :justify-content-row-end)) +(def justify-content-row-start (icon-xref :justify-content-row-start)) (def layers (icon-xref :layers)) (def letter-spacing (icon-xref :letter-spacing)) (def libraries (icon-xref :libraries)) diff --git a/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs b/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs index 5f178da03..7f9e70aad 100644 --- a/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/attributes/layout.cljs @@ -86,7 +86,7 @@ [{:keys [shapes]}] [:div.attributes-block [:div.attributes-block-title - [:div.attributes-block-title-text (tr "handoff.attributes.layout")] + [:div.attributes-block-title-text (tr "handoff.attributes.size")] (when (= (count shapes) 1) [:& copy-button {:data (copy-data (first shapes))}])] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs index 2ed93ed90..1d1191a74 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs @@ -5,63 +5,92 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.layout-container - (:require - [app.common.data :as d] - [app.common.data.macros :as dm] - [app.main.data.workspace.shape-layout :as dwsl] - [app.main.store :as st] - [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.v2 :as mf])) + (:require [app.common.data :as d] + [app.common.data.macros :as dm] + [app.main.data.workspace.shape-layout :as dwsl] + [app.main.store :as st] + [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.v2 :as mf])) -(def layout-container-attrs - [:layout ;; true if active, false if not - :layout-dir ;; :right, :left, :top, :bottom - :layout-gap ;; number could be negative - :layout-type ;; :packed, :space-between, :space-around +(def layout-container-flex-attrs + [:layout ;; :flex, :grid in the future + :layout-flex-dir ;; :row, :reverse-row, :column, :reverse-column + :layout-gap-type ;; :simple, :multiple + :layout-gap ;; {:row-gap number , :column-gap number} + :layout-align-items ;; :start :end :center :strech + :layout-justify-content ;; :start :center :end :space-between :space-around + :layout-align-content ;; :start :center :end :space-between :space-around :strech (by default) :layout-wrap-type ;; :wrap, :no-wrap :layout-padding-type ;; :simple, :multiple :layout-padding ;; {:p1 num :p2 num :p3 num :p4 num} number could be negative - :layout-h-orientation ;; :left, :center, :right - :layout-v-orientation]) ;; :top, :center, :bottom + ]) -(def grid-pos [[:top :left] - [:top :center] - [:top :right] - [:center :left] - [:center :center] - [:center :right] - [:bottom :left] - [:bottom :center] - [:bottom :right]]) +(defn get-layout-flex-icon + [type val is-col?] + (case type + :align-items (if is-col? + (case val + :start i/align-items-column-start + :end i/align-items-column-end + :center i/align-items-column-center + :strech i/align-items-column-strech + :baseline i/align-items-column-baseline) + (case val + :start i/align-items-row-start + :end i/align-items-row-end + :center i/align-items-row-center + :strech i/align-items-row-strech + :baseline i/align-items-row-baseline)) + :justify-content (if is-col? + (case val + :start i/justify-content-column-start + :end i/justify-content-column-end + :center i/justify-content-column-center + :space-around i/justify-content-column-around + :space-between i/justify-content-column-between) + (case val + :start i/justify-content-row-start + :end i/justify-content-row-end + :center i/justify-content-row-center + :space-around i/justify-content-row-around + :space-between i/justify-content-row-between)) -(def grid-rows [:top :center :bottom]) -(def grid-cols [:left :center :right]) + :align-content (if is-col? + (case val + :start i/align-content-column-start + :end i/align-content-column-end + :center i/align-content-column-center + :space-around i/align-content-column-around + :space-between i/align-content-column-between + :strech nil) + + (case val + :start i/align-content-row-start + :end i/align-content-row-end + :center i/align-content-row-center + :space-around i/align-content-row-around + :space-between i/align-content-row-between + :strech nil)) -(defn- get-layout-icon - [dir layout-type v h] - (let [row? (or (= dir :right) (= dir :left)) - manage-text-icon - (if row? - (case v - :top i/text-align-left - :center i/text-align-center - :bottom i/text-align-right - i/text-align-center) - (case h - :left i/text-align-left - :center i/text-align-center - :right 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))) + :align-self (if is-col? + (case val + :start i/align-self-column-top + :end i/align-self-column-bottom + :center i/align-self-column-center + :strech i/align-self-column-strech + :baseline i/align-self-column-baseline) + (case val + :start i/align-self-row-left + :end i/align-self-row-right + :center i/align-self-row-center + :strech i/align-self-row-strech + :baseline i/align-self-row-baseline)))) -(mf/defc direction-row +(mf/defc direction-btn [{:keys [dir saved-dir set-direction] :as props}] (let [handle-on-click (mf/use-callback @@ -71,283 +100,331 @@ (set-direction dir))))] [:button.dir.tooltip.tooltip-bottom - {:class (dom/classnames :active (= saved-dir dir) - :left (= :left dir) - :right (= :right dir) - :top (= :top dir) - :bottom (= :bottom dir)) + {:class (dom/classnames :active (= saved-dir dir) + :row (= :row dir) + :reverse-row (= :reverse-row dir) + :reverse-column (= :reverse-column dir) + :column (= :column dir)) :key (dm/str "direction-" dir) - ;; Execution time translation strings: - ;; workspace.options.layout.direction.bottom - ;; workspace.options.layout.direction.left - ;; workspace.options.layout.direction.right - ;; workspace.options.layout.direction.top - :alt (tr (dm/str "workspace.options.layout.direction." (d/name dir))) + :alt (str/replace (str/capital (d/name dir)) "-" " ") :on-click handle-on-click} i/auto-direction])) -(mf/defc orientation-grid - [{:keys [on-change-orientation values] :as props}] - (let [dir (:layout-dir values) - type (:layout-type values) - is-col? (or (= dir :top) - (= dir :bottom)) - saved-pos [(:layout-v-orientation values) - (:layout-h-orientation values)]] +(mf/defc wrap-row + [{:keys [wrap-type set-wrap] :as props}] + [:* + [:button.tooltip.tooltip-bottom + {:class (dom/classnames :active (= wrap-type :no-wrap)) + :alt "No-wrap" + :on-click #(set-wrap :no-wrap) + :style {:padding 0}} + [:span.no-wrap i/minus]] + [:button.wrap.tooltip.tooltip-bottom + {:class (dom/classnames :active (= wrap-type :wrap)) + :alt "wrap" + :on-click #(set-wrap :wrap)} + i/auto-wrap]]) - (if (= type :packed) - [:div.orientation-grid - [:div.button-wrapper - (for [[pv ph] grid-pos] - [:button.orientation - {:on-click (partial on-change-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 (not is-col?))} - (get-layout-icon dir type pv ph)]])]] - (if (not is-col?) - [:div.orientation-grid.row - [:div.button-wrapper - (for [row grid-rows] - [:button.orientation - {:on-click (partial on-change-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-layout-icon dir type nil row)] - [:span.icon - {:class (dom/classnames :rotated is-col?)} - (get-layout-icon dir type nil row)] - [:span.icon - {:class (dom/classnames :rotated is-col?)} - (get-layout-icon dir type nil row)]])]] +(mf/defc align-row + [{:keys [is-col? align-items set-align] :as props}] + + [:div.align-items-style + (for [align [:start :center :end :strech]] + [:button.align-start.tooltip + {:class (dom/classnames :active (= align-items align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (dm/str "Align items " (d/name align)) + :on-click #(set-align align) + :key (dm/str "align-items" (d/name align))} + (get-layout-flex-icon :align-items align is-col?)])]) + +(mf/defc align-content-row + [{:keys [is-col? align-content set-align-content] :as props}] + [:div.align-content-style + (for [align [:start :center :end :space-around :space-between]] + [:button.align-content.tooltip + {:class (dom/classnames :active (= align-content align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (dm/str "Align content " (d/name align)) + :on-click #(set-align-content align) + :key (dm/str "align-content" (d/name align))} + (get-layout-flex-icon :align-content align is-col?)])]) + +(mf/defc justify-content-row + [{:keys [is-col? justify-content set-justify] :as props}] + [:div.justify-content-style + (for [justify [:start :center :end :space-around :space-between]] + [:button.justify.tooltip + {:class (dom/classnames :active (= justify-content justify) + :tooltip-bottom-left (not= justify :start) + :tooltip-bottom (= justify :start)) + :alt (dm/str "Justify content " (d/name justify)) + :on-click #(set-justify justify) + :key (dm/str "justify-content" (d/name justify))} + (get-layout-flex-icon :justify-content justify is-col?)])]) - [:div.orientation-grid.col - [:div.button-wrapper - (for [[idx col] (d/enumerate grid-cols)] - [:button.orientation - {:key (dm/str idx col) - :on-click (partial on-change-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-layout-icon dir type col nil)] - [:span.icon - {:class (dom/classnames :rotated is-col?)} - (get-layout-icon dir type col nil)] - [:span.icon - {:class (dom/classnames :rotated is-col?)} - (get-layout-icon dir type col nil)]])]])))) (mf/defc padding-section [{:keys [values on-change-style on-change] :as props}] - (let [padding-type (:layout-padding-type values)] + (let [padding-type (:layout-padding-type values) + rx (if (apply = (vals (:layout-padding values))) + (:p1 (:layout-padding values)) + "--")] - [:div.row-flex - [:div.padding-options + [:div.padding-row + [:div.padding-icons [:div.padding-icon.tooltip.tooltip-bottom {:class (dom/classnames :selected (= padding-type :simple)) - :alt (tr "workspace.options.layout.padding-simple") + :alt "Padding" :on-click #(on-change-style :simple)} i/auto-padding] [:div.padding-icon.tooltip.tooltip-bottom {:class (dom/classnames :selected (= padding-type :multiple)) - :alt (tr "workspace.options.layout.padding") + :alt "Padding - sides" :on-click #(on-change-style :multiple)} i/auto-padding-side]] + [:div.wrapper + (cond + (= padding-type :simple) + [:div.tooltip.tooltip-bottom + {:alt (tr "workspace.options.layout.padding-all")} + [:div.input-element.mini - (cond - (= padding-type :simple) - [:div.tooltip.tooltip-bottom - {:alt (tr "workspace.options.layout.padding-all")} - [:div.input-element.mini + [:> numeric-input + {:placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-change :simple) + :value rx}]]] - [:> numeric-input - {:placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-change :simple) - :value (:p1 (:layout-padding 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 "Top" + :p2 "Right" + :p3 "Bottom" + :p4 "Left")} + [:div.input-element.mini + [:> numeric-input + {:placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-change num) + :value (num (:layout-padding 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 #(dom/select-target %) - :on-change (partial on-change num) - :value (num (:layout-padding values))}]]]))])) +(mf/defc gap-section + [{:keys [gap-selected? set-gap gap-value toggle-gap-type gap-type]}] + (let [gap-locked? (= gap-type :simple) + some-gap-selected (not= @gap-selected? :none) + is-row-activated? (or (and (not gap-locked?) (= @gap-selected? :row-gap)) (and gap-locked? some-gap-selected)) + is-column-activated? (or (and (not gap-locked?) (= @gap-selected? :column-gap)) (and gap-locked? some-gap-selected))] + + [:div.gap-group + [:div.gap-row.tooltip.tooltip-bottom-left + {:alt "Row gap"} + [:span.icon + {:class (dom/classnames :activated is-row-activated?)} + i/auto-gap] + [:> numeric-input {:no-validate true + :placeholder "--" + :on-click (fn [event] + (reset! gap-selected? :row-gap) + (dom/select-target event)) + :on-change (partial set-gap gap-locked? :row-gap) + :on-blur #(reset! gap-selected? :none) + :value (:row-gap gap-value)}]] + + [:div.gap-column.tooltip.tooltip-bottom-left + {:alt "Column gap"} + [:span.icon.rotated + {:class (dom/classnames + :activated is-column-activated?)} + i/auto-gap] + [:> numeric-input {:no-validate true + :placeholder "--" + :on-click (fn [event] + (reset! gap-selected? :column-gap) + (dom/select-target event)) + :on-change (partial set-gap gap-locked? :column-gap) + :on-blur #(reset! gap-selected? :none) + :value (:column-gap gap-value)}]] + [:button.lock {:on-click toggle-gap-type + :class (dom/classnames :active gap-locked?)} + (if gap-locked? + i/lock + i/unlock)]])) (mf/defc layout-container-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} [{:keys [ids _type values] :as props}] - (let [open? (mf/use-state false) - gap-selected? (mf/use-state false) - toggle-open (fn [] (swap! open? not)) + (let [open? (mf/use-state false) + + ;; Display + layout-type (:layout values) on-add-layout - (fn [_] - (st/emit! (dwsl/create-layout ids))) + (fn [type] + (st/emit! (dwsl/create-layout ids type))) on-remove-layout (fn [_] (st/emit! (dwsl/remove-layout ids)) (reset! open? false)) + set-flex (fn [] + (st/emit! (dwsl/remove-layout ids)) + (on-add-layout :flex)) + + set-grid (fn [] + (st/emit! (dwsl/remove-layout ids)) + (on-add-layout :grid)) + + ;; Flex-direction + + saved-dir (:layout-flex-dir values) + is-col? (or (= :column saved-dir) (= :reverse-column saved-dir)) set-direction (fn [dir] - (st/emit! (dwsl/update-layout ids {:layout-dir dir}))) + (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir}))) - set-gap - (fn [gap] - (st/emit! (dwsl/update-layout ids {:layout-gap gap}))) + ;; Wrap type - change-padding-style + wrap-type (:layout-wrap-type values) + set-wrap (fn [type] + (st/emit! (dwsl/update-layout ids {:layout-wrap-type type}))) + ;; Align items + + align-items (:layout-align-items values) + set-align-items (fn [value] + (st/emit! (dwsl/update-layout ids {:layout-align-items value}))) + + ;; Justify content + + justify-content (:layout-justify-content values) + set-justify-content (fn [value] + (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))) + + ;; Align content + + align-content (:layout-align-content values) + set-align-content (fn [value] + (if (= align-content value) + (st/emit! (dwsl/update-layout ids {:layout-align-content :strech})) + (st/emit! (dwsl/update-layout ids {:layout-align-content value})))) + + ;; Gap + + change-gap-type (fn [type] - (st/emit! (dwsl/update-layout ids {:layout-padding-type type}))) + (st/emit! (dwsl/update-layout ids {:layout-gap-type type}))) + + gap-type (:layout-gap-type values) + + gap-selected? (mf/use-state :none) + gap-locked? (= gap-type :simple) + toggle-gap-type (fn [] + (let [layout-gap (:layout-gap values) + row-gap (:row-gap layout-gap) + column-gap (:column-gap layout-gap) + max (max row-gap column-gap) + new-type (if (= gap-type :simple) + :multiple + :simple)] + (when (and (not= row-gap column-gap) (= gap-type :multiple)) + (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap max :column-gap max}}))) + (change-gap-type new-type))) + set-gap + (fn [gap-locked? type val] + (if gap-locked? + (st/emit! (dwsl/update-layout ids {:layout-gap {:row-gap val :column-gap val}})) + (st/emit! (dwsl/update-layout ids {:layout-gap {type val}})))) select-all-gap (fn [event] - (reset! gap-selected? true) - (dom/select-target event)) + (when gap-locked? + (dom/select-target event))) + + ;; Padding + + change-padding-type + (fn [type] + (st/emit! (dwsl/update-layout ids {:layout-padding-type type}))) on-padding-change (fn [type val] (if (= type :simple) (st/emit! (dwsl/update-layout ids {:layout-padding {:p1 val :p2 val :p3 val :p4 val}})) - (st/emit! (dwsl/update-layout ids {:layout-padding {type val}})))) - - handle-change-type - (fn [event] - (let [target (dom/get-target event) - value (dom/get-value target) - value (keyword value)] - (st/emit! (dwsl/update-layout ids {: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)] - (st/emit! (dwsl/update-layout ids {:layout-wrap-type value}))))) - - handle-change-orientation - (fn [v-orientation h-orientation] - (st/emit! (dwsl/update-layout ids {:layout-h-orientation h-orientation :layout-v-orientation v-orientation}))) - - layout-info - (fn [] - (let [type (:layout-type values) - dir (:layout-dir values) - is-col? (or (= dir :top) (= dir :bottom)) - h (:layout-h-orientation values) - v (:layout-v-orientation values) - - wrap (:layout-wrap-type values) - - orientation - (if (= type :packed) - ;; Execution time translation strings: - ;; workspace.options.layout.h.center - ;; workspace.options.layout.h.left - ;; workspace.options.layout.h.right - ;; workspace.options.layout.v.bottom - ;; workspace.options.layout.v.center - ;; workspace.options.layout.v.top - (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))) "-" " "))))] + (st/emit! (dwsl/update-layout ids {:layout-padding {type val}}))))] [:div.element-set [:div.element-set-title [:* - [:span (tr "workspace.options.layout.title")] + [:span "Layout"] (if (:layout values) - [:div.add-page {:on-click on-remove-layout} i/minus] - [:div.add-page {:on-click on-add-layout} i/close])]] + [:div.title-actions + [:div.layout-btns + [:button {:on-click set-flex + :class (dom/classnames + :active (= :flex layout-type))} "Flex"] + [:button {:on-click set-grid + :class (dom/classnames + :active (= :grid layout-type))} "Grid"]] + [:button.remove-layout {:on-click on-remove-layout} i/minus]] + + [:button.add-page {:on-click #(on-add-layout :flex)} i/close])]] (when (:layout values) - [:div.element-set-content.layout-menu - ;; DIRECTION-GAP - [:div.direction-gap - [:div.direction - [:* - (for [dir [:left :right :bottom :top]] - [:& direction-row {:key (d/name dir) - :dir dir - :saved-dir (:layout-dir 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 values) :top) - (= (:layout-dir 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 (:layout-gap values)}]]] + (if (= :flex layout-type) + [:div.element-set-content.layout-menu + [:div.layout-row + [:div.direction-wrap.row-title "Direction"] + [:div.btn-wrapper + [:div.direction + [:* + (for [dir [:row :reverse-row :column :reverse-column]] + [:& direction-btn {:key (d/name dir) + :dir dir + :saved-dir saved-dir + :set-direction set-direction}])]] - ;; 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)]] + [:div.wrap-type + [:& wrap-row {:wrap-type wrap-type + :set-wrap set-wrap}]]]] - (when @open? - [:div.layout-body - [:& orientation-grid {:on-change-orientation handle-change-orientation :values values}] + (when (= :wrap wrap-type) + [:div.layout-row + [:div.align-content.row-title "Content"] + [:div.btn-wrapper + [:& align-content-row {:is-col? is-col? + :align-content align-content + :set-align-content set-align-content}]]]) - [:div.selects-wrapper - [:select.input-select {:value (d/name (:layout-type 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")}]] + [:div.layout-row + [:div.align-items.row-title "Align"] + [:div.btn-wrapper + [:& align-row {:is-col? is-col? + :align-items align-items + :set-align set-align-items}]]] - [:select.input-select {:value (d/name (:layout-wrap-type 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")}]]]])] + [:div.layout-row + [:div.justify-content.row-title "Justify"] + [:div.btn-wrapper + [:& justify-content-row {:is-col? is-col? + :justify-content justify-content + :set-justify set-justify-content}]]] + [:& gap-section {:gap-selected? gap-selected? + :select-all-gap select-all-gap + :set-gap set-gap + :gap-value (:layout-gap values) + :toggle-gap-type toggle-gap-type + :gap-type gap-type}] - [:& padding-section {:values values - :on-change-style change-padding-style - :on-change on-padding-change}]])])) + + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]] + + [:div "GRID TO COME"]))])) 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 index 738ddb1dc..7d1653690 100644 --- 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 @@ -12,6 +12,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input]] [app.main.ui.icons :as i] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -31,8 +32,8 @@ (let [margin-type (or (:layout-margin-type values) :simple)] - [:div.row-flex - [:div.margin-options + [:div.margin-row + [:div.margin-icons [:div.margin-icon.tooltip.tooltip-bottom {:class (dom/classnames :selected (= margin-type :simple)) :alt (tr "workspace.options.layout.margin-simple") @@ -43,80 +44,93 @@ :alt (tr "workspace.options.layout.margin") :on-click #(change-margin-style :multiple)} i/auto-margin-side]] + [:div.wrapper + (cond + (= margin-type :simple) + [:div.tooltip.tooltip-bottom + {:alt (tr "workspace.options.layout.margin-all")} + [:div.input-element.mini - (cond - (= margin-type :simple) - [:div.tooltip.tooltip-bottom - {:alt (tr "workspace.options.layout.margin-all")} - [:div.input-element.mini + [:> numeric-input + {:placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-margin-change :simple) + :value (or (-> values :layout-margin :m1) 0)}]]] - [:> numeric-input - {:placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-margin-change :simple) - :value (or (-> values :layout-margin :m1) 0)}]]] - - (= margin-type :multiple) - [:* + (= 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)) + {: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"))} + :m1 "Top" + :m2 "Right" + :m3 "Bottom" + :m4 "Left")} [:div.input-element.mini [:> numeric-input {:placeholder "--" :on-click #(dom/select-target %) :on-change (partial on-margin-change num) - :value (or (-> values :layout-margin num) 0)}]]])])])) + :value (or (-> values :layout-margin num) 0)}]]]))]])) (mf/defc element-behavior [{:keys [is-layout-container? is-layout-child? layout-h-behavior layout-v-behavior on-change-behavior] :as props}] (let [fill? is-layout-child? auto? is-layout-container?] - [:div.layout-behavior - [:div.button-wrapper.horizontal + [:div.btn-wrapper + [:div.layout-behavior.horizontal [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "horizontal fix" + {:alt "Fix width" :class (dom/classnames :activated (= layout-h-behavior :fix)) :on-click #(on-change-behavior :h :fix)} - [:span.icon i/auto-fix-layout]] + i/auto-fix-layout] (when fill? [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "horizontal fill" + {:alt "Width 100%" :class (dom/classnames :activated (= layout-h-behavior :fill)) :on-click #(on-change-behavior :h :fill)} - [:span.icon i/auto-fill]]) + i/auto-fill]) (when auto? [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "horizontal auto" + {:alt "Fit content" :class (dom/classnames :activated (= layout-v-behavior :auto)) :on-click #(on-change-behavior :h :auto)} - [:span.icon i/auto-hug]])] + i/auto-hug])] - [:div.button-wrapper + [:div.layout-behavior [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "vertical fix" + {:alt "Fix height" :class (dom/classnames :activated (= layout-v-behavior :fix)) :on-click #(on-change-behavior :v :fix)} - [:span.icon i/auto-fix-layout]] + i/auto-fix-layout] (when fill? [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "vertical fill" + {:alt "Height 100%" :class (dom/classnames :activated (= layout-v-behavior :fill)) :on-click #(on-change-behavior :v :fill)} - [:span.icon i/auto-fill]]) + i/auto-fill]) (when auto? - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "vertical auto" + [:button.behavior-btn.tooltip.tooltip-bottom-left + {:alt "Fit content" :class (dom/classnames :activated (= layout-v-behavior :auto)) :on-click #(on-change-behavior :v :auto)} - [:span.icon i/auto-hug]])]])) + i/auto-hug])]])) + + +(mf/defc align-self-row + [{:keys [is-col? align-self set-align-self] :as props}] + (let [dir-v [:start :center :end :strech :baseline]] + [:div.align-self-style + (for [align dir-v] + [:button.align-self.tooltip.tooltip-bottom + {:class (dom/classnames :active (= align-self align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (dm/str "Align self " (d/name align)) ;; TODO añadir lineas de texto a tradus + :on-click #(set-align-self align) + :key (str "align-self" align)} + (get-layout-flex-icon :align-self align is-col?)])])) (mf/defc layout-item-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "type"]))]} @@ -128,6 +142,13 @@ (fn [type] (st/emit! (dwsl/update-layout-child ids {:layout-margin-type type}))) + align-self (:layout-align-self values) + set-align-self (fn [value] + (st/emit! (dwsl/update-layout-child ids {:layout-align-self value}))) + + saved-dir (:layout-flex-dir values) + is-col? (or (= :column saved-dir) (= :reverse-column saved-dir)) + on-margin-change (fn [type val] (if (= type :simple) @@ -146,51 +167,54 @@ [:div.element-set [:div.element-set-title - [:span (tr "workspace.options.layout-item.title")]] + [:span "Flex elements"]] [:div.element-set-content.layout-item-menu - [:& element-behavior {:is-layout-child? is-layout-child? - :is-layout-container? is-layout-container? - :layout-v-behavior (or (:layout-v-behavior values) :fix) - :layout-h-behavior (or (:layout-h-behavior values) :fix) - :on-change-behavior on-change-behavior}] + [:div.layout-row + [:div.row-title "Sizing"] + [:& element-behavior {:is-layout-child? is-layout-child? + :is-layout-container? is-layout-container? + :layout-v-behavior (or (:layout-v-behavior values) :fix) + :layout-h-behavior (or (:layout-h-behavior values) :fix) + :on-change-behavior on-change-behavior}]] + - [:div.margin [:& margin-section {:values values - :change-margin-style change-margin-style - :on-margin-change on-margin-change}]] + [:& margin-section {:values values + :change-margin-style change-margin-style + :on-margin-change on-margin-change}] [:div.advanced-ops-container - [:div.advanced-ops.toltip.tooltip-bottom + [:button.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.icon i/actions] [:span (tr "workspace.options.layout-item.advanced-ops")]]] (when @open? [:div.advanced-ops-body - (for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]] - [:div.input-element - {:key (d/name item) - ;; Execution time translation strings: - ;; workspace.options.layout-item.layout-max-h - ;; workspace.options.layout-item.layout-max-w - ;; workspace.options.layout-item.layout-min-h - ;; workspace.options.layout-item.layout-min-w - ;; workspace.options.layout-item.title.layout-max-h - ;; workspace.options.layout-item.title.layout-max-w - ;; workspace.options.layout-item.title.layout-min-h - ;; workspace.options.layout-item.title.layout-min-w - :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 :layout-max-h) - "minH" (= item :layout-min-h) - "maxW" (= item :layout-max-w) - "minW" (= item :layout-min-w))} - - [:> numeric-input - {:no-validate true - :min 0 - :data-wrap true - :placeholder "--" - :on-click #(dom/select-target %) - :on-change (partial on-size-change item) - :value (get values item)}]])])]])) + [:div.layout-row + [:div.direction-wrap.row-title "Align"] ;; TODO tradus + [:div.btn-wrapper + [:& align-self-row {:is-col? is-col? + :align-self align-self + :set-align-self set-align-self}]]] + [:div.input-wrapper + (for [item [:layout-max-h :layout-min-h :layout-max-w :layout-min-w]] + [:div.tooltip.tooltip-bottom + {:key (d/name item) + :alt (tr (dm/str "workspace.options.layout-item.title." (d/name item))) + :class (dom/classnames "maxH" (= item :layout-max-h) + "minH" (= item :layout-min-h) + "maxW" (= item :layout-max-w) + "minW" (= item :layout-min-w))} + [:div.input-element + {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} + [:> numeric-input + {:no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-click #(dom/select-target %) + :on-change (partial on-size-change item) + ;; :value (get values item) + :value 100}]]])]])]] + )) 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 2a255c4c5..bd9df2411 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 @@ -13,7 +13,7 @@ [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-container :refer [layout-container-attrs layout-container-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-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 [select-measure-keys measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] @@ -31,7 +31,7 @@ layer-values (select-keys shape layer-attrs) measure-values (select-measure-keys shape) constraint-values (select-keys shape constraint-attrs) - layout-container-values (select-keys shape layout-container-attrs) + layout-container-values (select-keys shape layout-container-flex-attrs) layout-item-values (select-keys shape layout-item-attrs) is-layout-child-ref (mf/use-memo (mf/deps ids) #(refs/is-layout-child? ids)) 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 1ccb7ad7f..09a34eb25 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 @@ -19,7 +19,7 @@ [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-container :refer [layout-container-attrs layout-container-menu]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [layout-container-flex-attrs layout-container-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 [select-measure-keys measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-attrs shadow-menu]] @@ -142,7 +142,7 @@ :stroke stroke-attrs :text ot/attrs :exports exports-attrs - :layout layout-container-attrs + :layout layout-container-flex-attrs :layout-item layout-item-attrs}) (def shadow-keys [:style :color :offset-x :offset-y :blur :spread]) diff --git a/frontend/translations/ca.po b/frontend/translations/ca.po index 373c8b833..883b7104c 100644 --- a/frontend/translations/ca.po +++ b/frontend/translations/ca.po @@ -3641,10 +3641,6 @@ msgstr "Alçada mín." msgid "workspace.options.layout-item.min-w" msgstr "Amplada mín." -#: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs -msgid "workspace.options.layout-item.title" -msgstr "Redimensió de l'element" - #: src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs msgid "workspace.options.layout-item.title.max-h" msgstr "Alçada màxima" @@ -3666,19 +3662,19 @@ msgid "workspace.options.layout.bottom" msgstr "Baix" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Columna" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Fila" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Fila invertida" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Columna invertida" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3713,10 +3709,6 @@ msgstr "Tots els costats" msgid "workspace.options.layout.margin-simple" msgstr "Marge senzill" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.no-wrap" -msgstr "no agrupis" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.packed" msgstr "ajuntat" @@ -3737,10 +3729,6 @@ msgstr "separat" msgid "workspace.options.layout.space-between" msgstr "espaiat" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.title" -msgstr "Disposició" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.top" msgstr "Dalt" diff --git a/frontend/translations/de.po b/frontend/translations/de.po index 4019da1d8..b862ff1a5 100644 --- a/frontend/translations/de.po +++ b/frontend/translations/de.po @@ -3986,19 +3986,19 @@ msgid "workspace.options.layout.bottom" msgstr "Unten" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Spalte" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Reihe" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Reihe-umgekehrt" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Spalte-umgekehrt" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -4085,10 +4085,6 @@ msgstr "Mitte" msgid "workspace.options.layout.v.top" msgstr "oben" -#: 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/color_selection.cljs msgid "workspace.options.more-colors" msgstr "Weitere Farben" diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 965c62d85..a27e89972 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -899,6 +899,10 @@ msgstr "Width" msgid "handoff.attributes.layout" msgstr "Layout" +#: src/app/main/ui/handoff/attributes/layout.cljs +msgid "handoff.attributes.size" +msgstr "Size and position" + #: src/app/main/ui/handoff/attributes/layout.cljs msgid "handoff.attributes.layout.height" msgstr "Height" @@ -3436,10 +3440,6 @@ msgstr "Min.Height" msgid "workspace.options.layout-item.layout-min-w" msgstr "Min.Width" -#: 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-item.title.layout-max-h" msgstr "Maximum height" @@ -3461,19 +3461,19 @@ msgid "workspace.options.layout.bottom" msgstr "Bottom" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Column" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Row" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Reverse row" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Reverse column" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3508,10 +3508,6 @@ msgstr "All sides" msgid "workspace.options.layout.margin-simple" msgstr "Simple margin" -#: 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.packed" msgstr "packed" @@ -3540,10 +3536,6 @@ msgstr "space around" msgid "workspace.options.layout.space-between" msgstr "space between" -#: 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.top" msgstr "Top" @@ -3560,10 +3552,6 @@ msgstr "center" msgid "workspace.options.layout.v.top" msgstr "top" -#: 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/color_selection.cljs msgid "workspace.options.more-colors" msgstr "More colors" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 9081e2c18..5d9b78177 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -1015,6 +1015,10 @@ msgstr "Ancho" msgid "handoff.attributes.layout" msgstr "Estructura" +#: src/app/main/ui/handoff/attributes/layout.cljs +msgid "handoff.attributes.size" +msgstr "Tamaño y posición" + #: src/app/main/ui/handoff/attributes/layout.cljs msgid "handoff.attributes.layout.height" msgstr "Altura" @@ -3900,10 +3904,6 @@ msgstr "Altura.Min" msgid "workspace.options.layout-item.layout-min-w" msgstr "Ancho.Min" -#: 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-item.title.layout-max-h" msgstr "Altura máxima" @@ -3925,19 +3925,19 @@ msgid "workspace.options.layout.bottom" msgstr "Abajo" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Columna" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Fila" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Fila invertida" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Columna invertida" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3972,10 +3972,6 @@ msgstr "Todos" msgid "workspace.options.layout.margin-simple" msgstr "Margen sencillo" -#: 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.packed" msgstr "juntar" @@ -4004,10 +4000,6 @@ msgstr "separar" msgid "workspace.options.layout.space-between" msgstr "espaciar" -#: 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.top" msgstr "Arriba" @@ -4024,10 +4016,6 @@ msgstr "centro" msgid "workspace.options.layout.v.top" msgstr "arriba" -#: 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/color_selection.cljs msgid "workspace.options.more-colors" msgstr "Más colores" diff --git a/frontend/translations/eu.po b/frontend/translations/eu.po index ea37c4401..432660efc 100644 --- a/frontend/translations/eu.po +++ b/frontend/translations/eu.po @@ -3812,19 +3812,19 @@ msgid "workspace.options.layout.bottom" msgstr "Behean" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Zutabea" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Lerroa" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Alderantzikatu lerroa" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Alderantzikatu zutabea" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3859,10 +3859,6 @@ msgstr "Alde guztiak" msgid "workspace.options.layout.margin-simple" msgstr "Margin arrunta" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.no-wrap" -msgstr "Ez batu" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.packed" msgstr "Trinkotuta" @@ -3891,10 +3887,6 @@ msgstr "tarteko espazioa" msgid "workspace.options.layout.space-between" msgstr "Tarteko espazioa" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.title" -msgstr "Itxura" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.top" msgstr "Goian" @@ -3911,10 +3903,6 @@ msgstr "erdian" msgid "workspace.options.layout.v.top" msgstr "goian" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.wrap" -msgstr "Batu" - #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs msgid "workspace.options.more-colors" msgstr "Kolore gehiago" diff --git a/frontend/translations/he.po b/frontend/translations/he.po index 2c2cafb5b..fb0f8756d 100644 --- a/frontend/translations/he.po +++ b/frontend/translations/he.po @@ -3894,19 +3894,19 @@ msgid "workspace.options.layout.bottom" msgstr "תחתית" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "עמודה" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "שורה" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "היפוך שורה" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "היפוך עמודה" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3941,10 +3941,6 @@ msgstr "כל הצדדים" msgid "workspace.options.layout.margin-simple" msgstr "שול פשוט" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.no-wrap" -msgstr "ללא גלישה" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.packed" msgstr "אסוף" @@ -3973,14 +3969,6 @@ msgstr "רווח מסביב" msgid "workspace.options.layout.space-between" msgstr "רווח בין לבין" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.title" -msgstr "פריסה" - -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.top" -msgstr "עליון" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.v.bottom" msgstr "תחתית" @@ -3993,10 +3981,6 @@ msgstr "מרכז" msgid "workspace.options.layout.v.top" msgstr "עליון" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.wrap" -msgstr "גלישה" - #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs msgid "workspace.options.more-colors" msgstr "צבעים נוספים" diff --git a/frontend/translations/tr.po b/frontend/translations/tr.po index 3a2b2f79a..586247842 100644 --- a/frontend/translations/tr.po +++ b/frontend/translations/tr.po @@ -3941,19 +3941,19 @@ msgid "workspace.options.layout.bottom" msgstr "Alt" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.bottom" +msgid "workspace.options.layout.direction.column" msgstr "Sütun" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.left" +msgid "workspace.options.layout.direction.row" msgstr "Satır" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.right" +msgid "workspace.options.layout.direction.reverse-row" msgstr "Ters satır" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.direction.top" +msgid "workspace.options.layout.direction.reverse-column" msgstr "Ters sütun" #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs @@ -3988,10 +3988,6 @@ msgstr "Tüm kenarlar" msgid "workspace.options.layout.margin-simple" msgstr "Basit kenar boşluğu" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.no-wrap" -msgstr "sarma yok" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.packed" msgstr "paketlenmiş" @@ -4020,14 +4016,6 @@ msgstr "etrafında boşluk" msgid "workspace.options.layout.space-between" msgstr "arasında boşluk" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.title" -msgstr "Yerleşim düzeni" - -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.top" -msgstr "Üst" - #: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs msgid "workspace.options.layout.v.bottom" msgstr "alt" @@ -4040,10 +4028,6 @@ msgstr "orta" msgid "workspace.options.layout.v.top" msgstr "üst" -#: src/app/main/ui/workspace/sidebar/options/menus/layout.cljs -msgid "workspace.options.layout.wrap" -msgstr "sar" - #: src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs msgid "workspace.options.more-colors" msgstr "Daha fazla renk"