mirror of
https://github.com/penpot/penpot.git
synced 2025-04-02 18:11:20 -05:00
✨ New layout and layout item menur
This commit is contained in:
Eva
Alonso Torres
parent
65b6d1e07b
commit
8f7fd21454
44 changed files with 1337 additions and 99 deletions
3
frontend/resources/images/icons/auto-direction.svg
Normal file
3
frontend/resources/images/icons/auto-direction.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zM72.28 25.457l-7.77 7.274L91.517 60.33l-69.134.12v11.181l69.134.12L64.51 99.346l7.48 7.49 39.507-40.791L72.28 25.457z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
3
frontend/resources/images/icons/auto-fill.svg
Normal file
3
frontend/resources/images/icons/auto-fill.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="m96.735 101.457-8.552-8.551c-5.24 5.134-10.41 10.34-15.736 15.387-.54-15.335.043-20.12-.51-35.444-1.4-1.532-3.683-.577-5.5-.915-1.992-.04-4.015-.094-5.972.343-1.09 2.361-.172 5.018-.565 7.508-.162 13.03.11 15.482-.319 28.509-5.323-5.048-10.495-10.254-15.735-15.388l-8.551 8.55 30.72 30.72zM71.827 60.015c1.09-2.361.172-5.018.565-7.508.162-13.03-.11-15.482.319-28.509 5.323 5.048 10.495 10.254 15.735 15.388l8.551-8.55L66.277.115l-30.72 30.719 8.552 8.551c5.24-5.134 10.41-10.34 15.736-15.387.54 15.335-.043 20.12.51 35.444 1.4 1.532 3.683.577 5.5.915 1.992.04 4.015.094 5.972-.343z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 699 B |
3
frontend/resources/images/icons/auto-fix-layout.svg
Normal file
3
frontend/resources/images/icons/auto-fix-layout.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M38.399 0v11.232h22.136v109.827H38.4v11.233h55.494v-11.233H71.757V11.232h22.136V0Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 200 B |
3
frontend/resources/images/icons/auto-gap.svg
Normal file
3
frontend/resources/images/icons/auto-gap.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 0v31.832h12.82v-20.6h.005V0H0zm26.458 0v132.292h79.376V0H26.458zm93.177 0v31.832h12.657V0h-12.657zM37.69 11.232h56.912v109.827H37.69V11.232zM0 47.543V84.75h12.82V47.543H0zm119.635 0V84.75h12.657V47.543h-12.657zM0 100.461v31.831h12.825v-11.233h-.006v-20.598H0zm119.635 0v31.831h12.657v-31.831h-12.657z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 421 B |
3
frontend/resources/images/icons/auto-hug.svg
Normal file
3
frontend/resources/images/icons/auto-hug.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path fill-rule="evenodd" d="M76.729 13.23H55.563c-14.613 0-26.459 11.845-26.459 26.458v52.916c0 14.613 11.846 26.459 26.459 26.459h21.166c14.613 0 26.459-11.846 26.459-26.459V39.688c0-14.613-11.846-26.459-26.46-26.459zM55.563 0c-21.92 0-39.688 17.769-39.688 39.688v52.916c0 21.92 17.769 39.688 39.688 39.688h21.166c21.919 0 39.688-17.768 39.688-39.688V39.688C116.417 17.768 98.647 0 76.729 0Z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 522 B |
3
frontend/resources/images/icons/auto-margin-side.svg
Normal file
3
frontend/resources/images/icons/auto-margin-side.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M22.399 0v11.232h12.914V0H22.399zm25.44 0v11.232h12.32V0H47.84zm24.847 0v11.232h12.32V0h-12.32zm24.846 0v11.232h12.677V0H97.532zM0 22.608V34.94h11.232V22.608H0zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17H22.399zm98.661 0V34.94h11.232V22.608H121.06zM0 47.466v12.32h11.232v-12.32H0zm121.06 0v12.32h11.232v-12.32H121.06zM0 72.313v12.32h11.232v-12.32H0zm121.06 0v12.32h11.232v-12.32H121.06zM0 97.16v12.608h11.232V97.16H0zm121.06 0v12.608h11.232V97.16H121.06zM22.4 121.06v11.232h12.914v-11.233H22.399zm25.44 0v11.232h12.32v-11.233H47.84zm24.847 0v11.232h12.32v-11.233h-12.32zm24.846 0v11.232h12.677v-11.233H97.532z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 738 B |
3
frontend/resources/images/icons/auto-margin.svg
Normal file
3
frontend/resources/images/icons/auto-margin.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 0v22.517h11.232V11.232h11.657V0H0zm35.415 0v11.232h12.32V0h-12.32zm24.847 0v11.232h12.32V0h-12.32zM85.11 0v11.232h12.32V0H85.11zm24.847 0v11.232h11.104v11.285h11.232V0h-22.336zM22.399 22.608V60.45h-.016v11.181h.016v38.147h87.557v-87.17H22.399zM0 35.043v12.32h11.232v-12.32H0zm121.06 0v12.32h11.232v-12.32H121.06zM0 59.89v12.32h11.232V59.89H0zm121.06 0v12.32h11.232V59.89H121.06zM0 84.736v12.32h11.232v-12.32H0zm121.06 0v12.32h11.232v-12.32H121.06zM0 109.583v22.709h22.89v-11.233H11.231v-11.476H0zm121.06 0v11.476h-11.104v11.233h22.336v-22.709H121.06zM35.415 121.06v11.233h12.32v-11.233h-12.32zm24.847 0v11.233h12.32v-11.233h-12.32zm24.847 0v11.233h12.32v-11.233H85.11z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 789 B |
3
frontend/resources/images/icons/auto-padding-side.svg
Normal file
3
frontend/resources/images/icons/auto-padding-side.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M22.399 0v11.232h87.523V0H22.4zM0 22.608v87.272h11.232V22.608H0zm22.399 0V60.45h-.016v11.181h.016v38.147h87.557v-87.17H22.399zm98.661 0v87.272h11.232V22.608H121.06zM22.4 121.06v11.233h87.523v-11.233H22.4z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 322 B |
3
frontend/resources/images/icons/auto-padding.svg
Normal file
3
frontend/resources/images/icons/auto-padding.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm11.167 11.376V60.45h-.016v11.181h.016v38.147h87.557v-87.17H22.399z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 254 B |
3
frontend/resources/images/icons/auto-row-column.svg
Normal file
3
frontend/resources/images/icons/auto-row-column.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 132.292 132.292">
|
||||
<path d="M0 0v132.292h132.292V0H0zm11.232 11.232H121.06v109.827H11.232V11.232zm17.876 18.346v73.136h29.726V29.578H29.108zm44.45 0v73.136h29.726V29.578H73.558z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 267 B |
3
frontend/resources/images/icons/space-around.svg
Normal file
3
frontend/resources/images/icons/space-around.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933">
|
||||
<circle cx="7" cy="288.533" r="7" paint-order="fill markers stroke" transform="translate(0 -280.067)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 182 B |
3
frontend/resources/images/icons/space-between.svg
Normal file
3
frontend/resources/images/icons/space-between.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.933 16.933">
|
||||
<rect height="16.933" width="3.175" x="286.946" paint-order="fill markers stroke" rx="0" ry="0" transform="translate(-280.067 0)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 210 B |
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,3 +23,5 @@
|
|||
:grid-alignment true
|
||||
:background "var(--color-white)"})
|
||||
|
||||
(def has-layout-item false)
|
||||
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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}]])]))
|
||||
|
|
@ -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)}]])])]]))
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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)}])
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
||||
|
|
|
|||
|
|
@ -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}]
|
||||
|
|
|
|||
|
|
@ -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])}]]))
|
||||
|
|
|
|||
|
|
@ -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)."
|
||||
|
|
|
|||
|
|
@ -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 "ملء المجموعة"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "Συμπλήρωση ομάδας"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "מילוי קבוצה"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "Заливка для группы"
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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 "编组填充"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue