diff --git a/frontend/resources/images/icons/align-content-column-around-refactor.svg b/frontend/resources/images/icons/align-content-column-around-refactor.svg new file mode 100644 index 000000000..a10b0133f --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-around-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-column-between-refactor.svg b/frontend/resources/images/icons/align-content-column-between-refactor.svg new file mode 100644 index 000000000..f3a70b757 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-between-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-column-center-refactor.svg b/frontend/resources/images/icons/align-content-column-center-refactor.svg new file mode 100644 index 000000000..04737fd9d --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-center-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-column-end-refactor.svg b/frontend/resources/images/icons/align-content-column-end-refactor.svg new file mode 100644 index 000000000..bec340dc7 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-end-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-column-evenly-refactor.svg b/frontend/resources/images/icons/align-content-column-evenly-refactor.svg new file mode 100644 index 000000000..f9f0cdd13 --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-evenly-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-column-start-refactor.svg b/frontend/resources/images/icons/align-content-column-start-refactor.svg new file mode 100644 index 000000000..c85b3f48f --- /dev/null +++ b/frontend/resources/images/icons/align-content-column-start-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-content-space-around-refactor.svg b/frontend/resources/images/icons/align-content-row-around-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-space-around-refactor.svg rename to frontend/resources/images/icons/align-content-row-around-refactor.svg diff --git a/frontend/resources/images/icons/align-content-space-between-refactor.svg b/frontend/resources/images/icons/align-content-row-between-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-space-between-refactor.svg rename to frontend/resources/images/icons/align-content-row-between-refactor.svg diff --git a/frontend/resources/images/icons/align-content-center-refactor.svg b/frontend/resources/images/icons/align-content-row-center-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-center-refactor.svg rename to frontend/resources/images/icons/align-content-row-center-refactor.svg diff --git a/frontend/resources/images/icons/align-content-end-refactor.svg b/frontend/resources/images/icons/align-content-row-end-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-end-refactor.svg rename to frontend/resources/images/icons/align-content-row-end-refactor.svg diff --git a/frontend/resources/images/icons/align-content-space-evenly-refactor.svg b/frontend/resources/images/icons/align-content-row-evenly-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-space-evenly-refactor.svg rename to frontend/resources/images/icons/align-content-row-evenly-refactor.svg diff --git a/frontend/resources/images/icons/align-content-start-refactor.svg b/frontend/resources/images/icons/align-content-row-start-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-content-start-refactor.svg rename to frontend/resources/images/icons/align-content-row-start-refactor.svg diff --git a/frontend/resources/images/icons/align-items-column-center-refactor.svg b/frontend/resources/images/icons/align-items-column-center-refactor.svg new file mode 100644 index 000000000..6685e5b1d --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-center-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-items-column-end-refactor.svg b/frontend/resources/images/icons/align-items-column-end-refactor.svg new file mode 100644 index 000000000..40c753395 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-end-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-items-column-start-refactor.svg b/frontend/resources/images/icons/align-items-column-start-refactor.svg new file mode 100644 index 000000000..6e71ebd87 --- /dev/null +++ b/frontend/resources/images/icons/align-items-column-start-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-items-center-refactor.svg b/frontend/resources/images/icons/align-items-row-center-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-items-center-refactor.svg rename to frontend/resources/images/icons/align-items-row-center-refactor.svg diff --git a/frontend/resources/images/icons/align-items-end-refactor.svg b/frontend/resources/images/icons/align-items-row-end-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-items-end-refactor.svg rename to frontend/resources/images/icons/align-items-row-end-refactor.svg diff --git a/frontend/resources/images/icons/align-items-start-refactor.svg b/frontend/resources/images/icons/align-items-row-start-refactor.svg similarity index 100% rename from frontend/resources/images/icons/align-items-start-refactor.svg rename to frontend/resources/images/icons/align-items-row-start-refactor.svg diff --git a/frontend/resources/images/icons/align-items-start.svg b/frontend/resources/images/icons/align-items-start.svg deleted file mode 100644 index f7c71a69e..000000000 --- a/frontend/resources/images/icons/align-items-start.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/frontend/resources/images/icons/align-self-column-bottom-refactor.svg b/frontend/resources/images/icons/align-self-column-bottom-refactor.svg new file mode 100644 index 000000000..369adddc4 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-bottom-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-self-column-center-refactor.svg b/frontend/resources/images/icons/align-self-column-center-refactor.svg new file mode 100644 index 000000000..cc1fcae0c --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-center-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-self-column-top-refactor.svg b/frontend/resources/images/icons/align-self-column-top-refactor.svg new file mode 100644 index 000000000..71bb8e702 --- /dev/null +++ b/frontend/resources/images/icons/align-self-column-top-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/align-self-row-center-refactor.svg b/frontend/resources/images/icons/align-self-row-center-refactor.svg new file mode 100644 index 000000000..56976d204 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-center-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-left-refactor.svg b/frontend/resources/images/icons/align-self-row-left-refactor.svg new file mode 100644 index 000000000..335307663 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-left-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/align-self-row-right-refactor.svg b/frontend/resources/images/icons/align-self-row-right-refactor.svg new file mode 100644 index 000000000..ea257cea1 --- /dev/null +++ b/frontend/resources/images/icons/align-self-row-right-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/clip-content-refactor.svg b/frontend/resources/images/icons/clip-content-refactor.svg new file mode 100644 index 000000000..38bf4b4ac --- /dev/null +++ b/frontend/resources/images/icons/clip-content-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/column-refactor.svg b/frontend/resources/images/icons/column-refactor.svg index ca681dd0d..0d8fb1875 100644 --- a/frontend/resources/images/icons/column-refactor.svg +++ b/frontend/resources/images/icons/column-refactor.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/fill-content-refactor.svg b/frontend/resources/images/icons/fill-content-refactor.svg new file mode 100644 index 000000000..14b811862 --- /dev/null +++ b/frontend/resources/images/icons/fill-content-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/fixed-width-refactor.svg b/frontend/resources/images/icons/fixed-width-refactor.svg new file mode 100644 index 000000000..1c9a02a12 --- /dev/null +++ b/frontend/resources/images/icons/fixed-width-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/gap-horizontal-refactor.svg b/frontend/resources/images/icons/gap-horizontal-refactor.svg new file mode 100644 index 000000000..10cd32404 --- /dev/null +++ b/frontend/resources/images/icons/gap-horizontal-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/gap-vertical-refactor.svg b/frontend/resources/images/icons/gap-vertical-refactor.svg new file mode 100644 index 000000000..b4e14a345 --- /dev/null +++ b/frontend/resources/images/icons/gap-vertical-refactor.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/frontend/resources/images/icons/hug-content-refactor.svg b/frontend/resources/images/icons/hug-content-refactor.svg new file mode 100644 index 000000000..0cbd0e741 --- /dev/null +++ b/frontend/resources/images/icons/hug-content-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-around-refactor.svg b/frontend/resources/images/icons/justify-content-column-around-refactor.svg new file mode 100644 index 000000000..bb1510773 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-around-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-between-refactor.svg b/frontend/resources/images/icons/justify-content-column-between-refactor.svg new file mode 100644 index 000000000..c7720e25f --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-between-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-center-refactor.svg b/frontend/resources/images/icons/justify-content-column-center-refactor.svg new file mode 100644 index 000000000..3d2a12a74 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-center-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-end-refactor.svg b/frontend/resources/images/icons/justify-content-column-end-refactor.svg new file mode 100644 index 000000000..52f757702 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-end-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg b/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg new file mode 100644 index 000000000..927629f76 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-evenly-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-column-start-refactor.svg b/frontend/resources/images/icons/justify-content-column-start-refactor.svg new file mode 100644 index 000000000..564d39850 --- /dev/null +++ b/frontend/resources/images/icons/justify-content-column-start-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/justify-content-space-around-refactor.svg b/frontend/resources/images/icons/justify-content-row-around-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-space-around-refactor.svg rename to frontend/resources/images/icons/justify-content-row-around-refactor.svg diff --git a/frontend/resources/images/icons/justify-content-space-between-refactor.svg b/frontend/resources/images/icons/justify-content-row-between-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-space-between-refactor.svg rename to frontend/resources/images/icons/justify-content-row-between-refactor.svg diff --git a/frontend/resources/images/icons/justify-content-center-refactor.svg b/frontend/resources/images/icons/justify-content-row-center-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-center-refactor.svg rename to frontend/resources/images/icons/justify-content-row-center-refactor.svg diff --git a/frontend/resources/images/icons/justify-content-end-refactor.svg b/frontend/resources/images/icons/justify-content-row-end-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-end-refactor.svg rename to frontend/resources/images/icons/justify-content-row-end-refactor.svg diff --git a/frontend/resources/images/icons/justify-content-space-evenly-refactor.svg b/frontend/resources/images/icons/justify-content-row-evenly-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-space-evenly-refactor.svg rename to frontend/resources/images/icons/justify-content-row-evenly-refactor.svg diff --git a/frontend/resources/images/icons/justify-content-start-refactor.svg b/frontend/resources/images/icons/justify-content-row-start-refactor.svg similarity index 100% rename from frontend/resources/images/icons/justify-content-start-refactor.svg rename to frontend/resources/images/icons/justify-content-row-start-refactor.svg diff --git a/frontend/resources/images/icons/margin-refactor.svg b/frontend/resources/images/icons/margin-refactor.svg new file mode 100644 index 000000000..b7067d6f9 --- /dev/null +++ b/frontend/resources/images/icons/margin-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 8c4310098..44f6adbfa 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -10,39 +10,54 @@ background-color: var(--button-primary-background-color-rest); border: $s-1 solid var(--button-primary-border-color-rest); color: var(--button-primary-foreground-color-rest); + border-radius: $br-8; + svg, + span svg { + stroke: var(--button-primary-foreground-color-rest); + } &:hover { background-color: var(--button-primary-background-color-hover); border: $s-1 solid var(--button-primary-border-color-hover); color: var(--button-primary-foreground-color-hover); - svg { + svg, + span svg { stroke: var(--button-primary-foreground-color-hover); } } - &:focus { + &:focus, + &:focus-visible { outline: none; background-color: var(--button-primary-background-color-focus); - border: $s-1 solid var(--button-primary-boder-color-focus); + border: $s-1 solid var(--button-primary-border-color-focus); color: var(--button-primary-foreground-color-focus); - svg { + svg, + span svg { stroke: var(--button-primary-foreground-color-focus); } } &:active { - border: 1px solid var(--button-border-focus); - outline: none; - } - &:focus-visible { - border: none; + background-color: var(--button-primary-background-color-active); + border: $s-1 solid var(--button-primary-border-color-active); + color: var(--button-primary-foreground-color-active); outline: none; + svg, + span svg { + stroke: var(--button-primary-foreground-color-active); + } } } .button-secondary { @include buttonStyle; @include flexCenter; + border-radius: $br-8; background-color: var(--button-secondary-background-color-rest); border: $s-1 solid var(--button-secondary-border-color-rest); color: var(--button-secondary-foreground-color-rest); + svg, + span svg { + stroke: var(--button-secondary-foreground-color-rest); + } &:hover { background-color: var(--button-secondary-background-color-hover); border: $s-1 solid var(--button-secondary-border-color-hover); @@ -52,55 +67,112 @@ stroke: var(--button-secondary-foreground-color-hover); } } - &:focus { + &:focus, + &:focus-visible { outline: none; background-color: var(--button-secondary-background-color-focus); - border: $s-1 solid var(--button-secondary-boder-color-focus); + border: $s-1 solid var(--button-secondary-border-color-focus); color: var(--button-secondary-foreground-color-focus); - svg { + svg, + span svg { stroke: var(--button-secondary-foreground-color-focus); } } &:active { - border: none; - background-color: transparent; - } - &:focus-visible { - border: none; outline: none; + background-color: var(--button-secondary-background-color-active); + border: $s-1 solid var(--button-secondary-border-color-active); + color: var(--button-secondary-foreground-color-active); + svg, + span svg { + stroke: var(--button-secondary-foreground-color-active); + } } } .button-tertiary { @include buttonStyle; @include flexCenter; + border-radius: $br-8; color: var(--button-tertiary-foreground-color-rest); - svg { + background-color: transparent; + border: $s-1 solid transparent; + svg, + span svg { stroke: var(--button-tertiary-foreground-color-rest); } &:hover { background-color: var(--button-tertiary-background-color-hover); color: var(--button-tertiary-foreground-color-hover); - svg { + border: $s-1 solid var(--button-secondary-border-color-hover); + svg, + span svg { stroke: var(--button-tertiary-foreground-color-hover); } } - &:focus { + &:focus, + &:focus-visible { outline: none; border: $s-1 solid var(--button-tertiary-border-color-focus); background-color: var(--button-tertiary-background-color-focus); color: var(--button-tertiary-foreground-color-focus); - svg { + svg, + span svg { stroke: var(--button-tertiary-foreground-color-focus); } } &:active { - border: $s-1 solid var(--button-tertiary-border-color-focus); outline: none; + border: $s-1 solid transparent; + background-color: var(--button-tertiary-background-color-active); + color: var(--button-tertiary-foreground-color-active); + svg, + span svg { + stroke: var(--button-tertiary-foreground-color-active); + } } +} + +.button-radio { + @include buttonStyle; + @include flexCenter; + border-radius: $br-8; + color: var(--button-radio-foreground-color-rest); + background-color: var(--button-radio-background-color-rest); + border: $s-1 solid var(--button-radio-background-color-rest); + svg, + span svg { + stroke: var(--button-radio-foreground-color-rest); + } + &:hover { + background-color: transparent; + color: var(--button-radio-foreground-color-hover); + border: $s-1 solid transparent; + svg, + span svg { + stroke: var(--button-radio-foreground-color-hover); + } + } + &:focus, &:focus-visible { - border: none; outline: none; + border: $s-1 solid var(--button-radio-border-color-focus); + background-color: var(--button-radio-background-color-focus); + color: var(--button-radio-foreground-color-focus); + svg, + span svg { + stroke: var(--button-radio-foreground-color-focus); + } + } + &:active { + outline: none; + border: $s-1 solid transparent; + background-color: var(--button-radio-background-color-active); + color: var(--button-radio-foreground-color-active); + svg, + span svg { + stroke: var(--button-radio-foreground-color-active); + } } } @@ -153,7 +225,6 @@ width: $s-16; color: transparent; fill: none; - stroke: var(--icon-foreground); stroke-width: 1px; } @@ -178,10 +249,9 @@ align-items: center; height: $s-32; border-radius: $br-8; - margin-bottom: $s-4; padding: $s-8 $s-12; background-color: var(--assets-item-background-color); - color: var(--assets-item-name-foreground-color); + color: var(--assets-item-name-foreground-color-hover); &:hover, &:focus-within { background-color: var(--assets-item-background-color-hover); @@ -189,6 +259,37 @@ } } +.input-element { + @include titleTipography; + display: flex; + align-items: center; + height: $s-32; + border-radius: $br-8; + background-color: var(--input-background-color); + color: var(--input-foreground-color); + span { + color: var(--input-foreground-color); + } + input { + @include removeInputStyle; + @include titleTipography; + color: var(--input-foreground-color); + height: $s-32; + } + ::placeholder { + color: var(--input-placeholder-color); + } + &:hover, + &:focus-within { + span { + color: var(--input-foreground-color); + } + input { + color: var(--input-foreground-color-active); + } + background-color: var(--input-background-color-hover); + } +} .new-scrollbar { ::-webkit-scrollbar { background-color: transparent; diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 67f8b88ed..5de28c2db 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -14,13 +14,10 @@ --panel-background-color: var(--color-background-primary); --panel-title-background-color: var(--color-background-secondary); - --button-background-hover: var(--color-background-quaternary); --button-foreground-hover: var(--color-accent-primary); - --button-foreground-active: var(--color-foreground-primary); --button-background-focus: var(--color-background-secondary); --button-foreground-focus: var(--color-foreground-primary); --button-border-focus: var(--color-accent-primary); - --button-border: var(--color-background-tertiary); --button-foreground-color-disabled: var(--color-background-quaternary); --button-primary-background-color-rest: var(--color-accent-primary); @@ -29,22 +26,22 @@ --button-primary-background-color-hover: var(--color-accent-tertiary); --button-primary-border-color-hover: var(--color-accent-tertiary); --button-primary-foreground-color-hover: var(--color-background-secondary); - --button-primary-background-color-selected: var(--color-background-secondary); - --button-primary-border-color-selected: var(--color-background-secondary); - --button-primary-foreground-color-selected: var(--color-accent-primary); + --button-primary-background-color-active: var(--color-background-secondary); + --button-primary-border-color-active: var(--color-background-secondary); + --button-primary-foreground-color-active: var(--color-accent-primary); --button-primary-background-color-focus: var(--color-background-tertiary); --button-primary-border-color-focus: var(--color-accent-primary); --button-primary-foreground-color-focus: var(--color-foreground-secondary); --button-secondary-background-color-rest: var(--color-background-tertiary); - --button-secondary-border-color-rest: var(--color-background-quaternary); + --button-secondary-border-color-rest: var(--color-background-tertiary); --button-secondary-foreground-color-rest: var(--color-foreground-secondary); --button-secondary-background-color-hover: var(--color-background-quaternary); --button-secondary-border-color-hover: var(--color-background-quaternary); --button-secondary-foreground-color-hover: var(--color-accent-primary); - --button-secondary-background-color-selected: var(--color-background-secondary); - --button-secondary-border-color-selected: var(--color-background-quaternary); - --button-secondary-foreground-color-selected: var(--color-accent-primary); + --button-secondary-background-color-active: var(--color-background-secondary); + --button-secondary-border-color-active: var(--color-background-quaternary); + --button-secondary-foreground-color-active: var(--color-accent-primary); --button-secondary-background-color-focus: var(--color-background-tertiary); --button-secondary-border-color-focus: var(--color-accent-primary); --button-secondary-foreground-color-focus: var(--color-foreground-secondary); @@ -53,13 +50,25 @@ --button-tertiary-background-color-hover: var(--color-background-quaternary); --button-tertiary-border-color-hover: var(--color-background-quaternary); --button-tertiary-foreground-color-hover: var(--color-accent-primary); - --button-tertiary-background-color-selected: var(--color-background-secondary); - --button-tertiary-border-color-selected: var(--color-background-quaternary); - --button-tertiary-foreground-color-selected: var(--color-accent-primary); + --button-tertiary-background-color-active: var(--color-background-secondary); + --button-tertiary-border-color-active: var(--color-background-quaternary); + --button-tertiary-foreground-color-active: var(--color-accent-primary); --button-tertiary-background-color-focus: var(--color-background-tertiary); --button-tertiary-border-color-focus: var(--color-accent-primary); --button-tertiary-foreground-color-focus: var(--color-foreground-primary); + --button-radio-background-color-rest: var(--color-background-tertiary); + --button-radio-border-color-rest: var(--color-background-tertiary); + --button-radio-foreground-color-rest: var(--color-foreground-secondary); + --button-radio-border-color-hover: var(--color-background-quaternary); + --button-radio-foreground-color-hover: var(--color-accent-primary); + --button-radio-background-color-active: var(--color-background-quaternary); + --button-radio-border-color-active: var(--color-background-quaternary); + --button-radio-foreground-color-active: var(--color-accent-primary); + --button-radio-background-color-focus: var(--color-background-tertiary); + --button-radio-border-color-focus: var(--color-accent-primary); + --button-radio-foreground-color-focus: var(--color-foreground-secondary); + --button-warning-background-color-rest: var(--warning-color); --button-warning-border-color-rest: var(--warning-color); --button-warning-foreground-color-rest: var(--color-background-secondary); @@ -109,7 +118,9 @@ --input-placeholder-color: var(--color-foreground-secondary); --input-foreground-color: var(--color-foreground-secondary); --input-foreground-color-active: var(--color-foreground-primary); + --input-foreground-color-disabled: var(--color-foreground-secondary); --input-border-color-active: var(--color-accent-primary); + --input-border-color-disabled: var(--color-background-quaternary); --input-border-outline-color-active: var(--color-accent-primary-muted); --input-border-color-focus: var(--color-accent-primary); diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss index abff5efeb..f2e18cd90 100644 --- a/frontend/resources/styles/common/refactor/spacing.scss +++ b/frontend/resources/styles/common/refactor/spacing.scss @@ -33,22 +33,29 @@ $s-80: calc(var(--s-4) * 20); $s-84: calc(var(--s-4) * 21); $s-92: calc(var(--s-4) * 23); $s-96: calc(var(--s-4) * 24); -$s-104: calc(var(--s-4) * 25); +$s-104: calc(var(--s-4) * 26); +$s-108: calc(var(--s-4) * 27); $s-116: calc(var(--s-4) * 29); $s-120: calc(var(--s-4) * 30); +$s-124: calc(var(--s-4) * 31); $s-136: calc(var(--s-4) * 34); +$s-140: calc(var(--s-4) * 35); $s-148: calc(var(--s-4) * 37); +$s-156: calc(var(--s-4) * 39); $s-152: calc(var(--s-4) * 38); $s-160: calc(var(--s-4) * 40); $s-168: calc(var(--s-4) * 42); $s-180: calc(var(--s-4) * 45); $s-184: calc(var(--s-4) * 46); +$s-188: calc(var(--s-4) * 47); $s-192: calc(var(--s-4) * 48); $s-196: calc(var(--s-4) * 49); $s-200: calc(var(--s-4) * 50); $s-216: calc(var(--s-4) * 54); +$s-220: calc(var(--s-4) * 55); $s-240: calc(var(--s-4) * 60); $s-248: calc(var(--s-4) * 62); +$s-252: calc(var(--s-4) * 63); $s-256: calc(var(--s-4) * 64); $s-272: calc(var(--s-4) * 68); $s-276: calc(var(--s-4) * 69); diff --git a/frontend/src/app/main/style.clj b/frontend/src/app/main/style.clj index 2ffbcc604..bbb5a77bf 100644 --- a/frontend/src/app/main/style.clj +++ b/frontend/src/app/main/style.clj @@ -86,6 +86,33 @@ :else `(if ~v ~cls "")))))) (interpose " "))) +;; A macro that simplifies setting up classes using css-modules and enhaces the +;; migration process from the old approach. +;; +;; Using this as example: +;; +;; (stl/css-case new-css-system +;; :left-settings-bar true +;; :old-css/settings-bar true +;; :global/two-row (<= size 300)) +;; +;; The first argument to the `css-case` macro is optional an if you don't +;; provide it, it will behave in the same ways as if the `new-css-system` has +;; value of `true`. +;; +;; The non-namespaces keywords passed are treated conditionally on the +;; `new-css-system` value. If is `true`, it will perform a lookup on modules for +;; corresponding (hashed) class-name; if no class name is found, the keyword +;; will be stringigied and used as-is (with no changes). If the `new-css-system` +;; is false, it will perform the same operation as if no class is found on +;; modules (leaving it as string with no modification). +;; +;; Later, we have two modifiers (namespaces): `global` which specifies +;; explicitly that no modules lookup should be performed; and `old-css` which +;; only puts the class if `new-css-system` is `false`. +;; +;; NOTE: the same behavior applies to the `css` macro + (defmacro css-case [& params] (let [fname (-> *ns* meta :file) diff --git a/frontend/src/app/main/ui/components/color_bullet_new.css.json b/frontend/src/app/main/ui/components/color_bullet_new.css.json index e0da8a18c..e6bc731f5 100644 --- a/frontend/src/app/main/ui/components/color_bullet_new.css.json +++ b/frontend/src/app/main/ui/components/color_bullet_new.css.json @@ -1 +1 @@ -{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-warning":"components_color_bullet_new_button-warning_OxPWp","button-disabled":"components_color_bullet_new_button-disabled_Zx4Ur","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","link":"components_color_bullet_new_link_S2meo","asset-element":"components_color_bullet_new_asset-element_s3Yqx","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","menu-dropdown":"components_color_bullet_new_menu-dropdown_tyRPJ","menu-item":"components_color_bullet_new_menu-item_fPc3j","shortcut":"components_color_bullet_new_shortcut_qAY-Y","shortcut-key":"components_color_bullet_new_shortcut-key_sq-iu","user-icon":"components_color_bullet_new_user-icon_0LhmU","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf","spin-animation":"components_color_bullet_new_spin-animation_X38rj"} \ No newline at end of file +{"button-primary":"components_color_bullet_new_button-primary_pDkQg","button-secondary":"components_color_bullet_new_button-secondary_y3A8V","button-tertiary":"components_color_bullet_new_button-tertiary_zPQ8t","button-radio":"components_color_bullet_new_button-radio_gpyOW","button-warning":"components_color_bullet_new_button-warning_OxPWp","button-disabled":"components_color_bullet_new_button-disabled_Zx4Ur","button-tag":"components_color_bullet_new_button-tag_2Ur4i","button-icon":"components_color_bullet_new_button-icon_uAC1e","button-icon-small":"components_color_bullet_new_button-icon-small_rz5pc","link":"components_color_bullet_new_link_S2meo","asset-element":"components_color_bullet_new_asset-element_s3Yqx","input-element":"components_color_bullet_new_input-element_jCoxE","new-scrollbar":"components_color_bullet_new_new-scrollbar_7U23G","menu-dropdown":"components_color_bullet_new_menu-dropdown_tyRPJ","menu-item":"components_color_bullet_new_menu-item_fPc3j","shortcut":"components_color_bullet_new_shortcut_qAY-Y","shortcut-key":"components_color_bullet_new_shortcut-key_sq-iu","user-icon":"components_color_bullet_new_user-icon_0LhmU","color-bullet":"components_color_bullet_new_color-bullet_b1w8U","mini":"components_color_bullet_new_mini_B261Z","is-not-library-color":"components_color_bullet_new_is-not-library-color_PSveA","color-bullet-wrapper":"components_color_bullet_new_color-bullet-wrapper_clt4r","is-gradient":"components_color_bullet_new_is-gradient_6RdV2","is-transparent":"components_color_bullet_new_is-transparent_g0iwn","color-text":"components_color_bullet_new_color-text_HM6mp","small-text":"components_color_bullet_new_small-text_Y4OeK","no-text":"components_color_bullet_new_no-text_pbTQf","spin-animation":"components_color_bullet_new_spin-animation_X38rj"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.css.json b/frontend/src/app/main/ui/components/context_menu_a11y.css.json index 53ef52a33..d6ee660e2 100644 --- a/frontend/src/app/main/ui/components/context_menu_a11y.css.json +++ b/frontend/src/app/main/ui/components/context_menu_a11y.css.json @@ -1 +1 @@ -{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-warning":"components_context_menu_a11y_button-warning_7dlJY","button-disabled":"components_context_menu_a11y_button-disabled_WROtA","button-tag":"components_context_menu_a11y_button-tag_iLpM-","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","link":"components_context_menu_a11y_link_86RaE","asset-element":"components_context_menu_a11y_asset-element_r3q1-","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","menu-dropdown":"components_context_menu_a11y_menu-dropdown_-wxYa","menu-item":"components_context_menu_a11y_menu-item_J-5tZ","shortcut":"components_context_menu_a11y_shortcut_xHDI7","shortcut-key":"components_context_menu_a11y_shortcut-key_kpESe","user-icon":"components_context_menu_a11y_user-icon_Z4800","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb","spin-animation":"components_context_menu_a11y_spin-animation_QUc-i"} \ No newline at end of file +{"button-primary":"components_context_menu_a11y_button-primary_FTrG6","button-secondary":"components_context_menu_a11y_button-secondary_tIeiM","button-tertiary":"components_context_menu_a11y_button-tertiary_0A2mW","button-radio":"components_context_menu_a11y_button-radio_vymcq","button-warning":"components_context_menu_a11y_button-warning_7dlJY","button-disabled":"components_context_menu_a11y_button-disabled_WROtA","button-tag":"components_context_menu_a11y_button-tag_iLpM-","context-menu":"components_context_menu_a11y_context-menu_bS2vM","context-menu-items":"components_context_menu_a11y_context-menu-items_lQC7H","context-menu-item":"components_context_menu_a11y_context-menu-item_E2GpJ","selected":"components_context_menu_a11y_selected_on-en","selected-icon":"components_context_menu_a11y_selected-icon_H2S7W","button-icon":"components_context_menu_a11y_button-icon_eOLGl","button-icon-small":"components_context_menu_a11y_button-icon-small_bQvvB","context-menu-action":"components_context_menu_a11y_context-menu-action_E53yg","submenu-back":"components_context_menu_a11y_submenu-back_AboXg","submenu-icon-back":"components_context_menu_a11y_submenu-icon-back_gy-B6","submenu":"components_context_menu_a11y_submenu_MuyM8","submenu-icon":"components_context_menu_a11y_submenu-icon_tWTVU","link":"components_context_menu_a11y_link_86RaE","asset-element":"components_context_menu_a11y_asset-element_r3q1-","input-element":"components_context_menu_a11y_input-element_QQ1zU","new-scrollbar":"components_context_menu_a11y_new-scrollbar_tgX6p","menu-dropdown":"components_context_menu_a11y_menu-dropdown_-wxYa","menu-item":"components_context_menu_a11y_menu-item_J-5tZ","shortcut":"components_context_menu_a11y_shortcut_xHDI7","shortcut-key":"components_context_menu_a11y_shortcut-key_kpESe","user-icon":"components_context_menu_a11y_user-icon_Z4800","is-open":"components_context_menu_a11y_is-open_FbqIp","fixed":"components_context_menu_a11y_fixed_iJxPr","separator":"components_context_menu_a11y_separator_DrZoB","min-width":"components_context_menu_a11y_min-width_w-ron","is-selected":"components_context_menu_a11y_is-selected_UPMXx","is-selectable":"components_context_menu_a11y_is-selectable_n7sdb","spin-animation":"components_context_menu_a11y_spin-animation_QUc-i"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/editable_label.css.json b/frontend/src/app/main/ui/components/editable_label.css.json index f71e14a1c..146042fc6 100644 --- a/frontend/src/app/main/ui/components/editable_label.css.json +++ b/frontend/src/app/main/ui/components/editable_label.css.json @@ -1 +1 @@ -{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-warning":"components_editable_label_button-warning_4iYB7","button-disabled":"components_editable_label_button-disabled_oVR0N","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","link":"components_editable_label_link_pHsNR","asset-element":"components_editable_label_asset-element_Bs5bh","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","menu-dropdown":"components_editable_label_menu-dropdown_3EWKG","menu-item":"components_editable_label_menu-item_lLMBv","shortcut":"components_editable_label_shortcut_sumJi","shortcut-key":"components_editable_label_shortcut-key_ZxlB1","user-icon":"components_editable_label_user-icon_bNZJf","editable-label-input":"components_editable_label_editable-label-input_q2Puk","spin-animation":"components_editable_label_spin-animation_ziMDb"} \ No newline at end of file +{"button-primary":"components_editable_label_button-primary_fp-ma","button-secondary":"components_editable_label_button-secondary_QPaT-","button-tertiary":"components_editable_label_button-tertiary_wOORv","button-radio":"components_editable_label_button-radio_nKlBJ","button-warning":"components_editable_label_button-warning_4iYB7","button-disabled":"components_editable_label_button-disabled_oVR0N","button-tag":"components_editable_label_button-tag_pwEqY","button-icon":"components_editable_label_button-icon_acX7H","button-icon-small":"components_editable_label_button-icon-small_tSz5O","link":"components_editable_label_link_pHsNR","asset-element":"components_editable_label_asset-element_Bs5bh","input-element":"components_editable_label_input-element_VRvJr","new-scrollbar":"components_editable_label_new-scrollbar_wEEzl","menu-dropdown":"components_editable_label_menu-dropdown_3EWKG","menu-item":"components_editable_label_menu-item_lLMBv","shortcut":"components_editable_label_shortcut_sumJi","shortcut-key":"components_editable_label_shortcut-key_ZxlB1","user-icon":"components_editable_label_user-icon_bNZJf","editable-label-input":"components_editable_label_editable-label-input_q2Puk","spin-animation":"components_editable_label_spin-animation_ziMDb"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/radio_buttons.cljs b/frontend/src/app/main/ui/components/radio_buttons.cljs index 1f31379e9..06b416cb6 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.cljs +++ b/frontend/src/app/main/ui/components/radio_buttons.cljs @@ -8,7 +8,6 @@ (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] - [app.common.math :as math] [app.main.ui.formats :as fmt] [app.util.dom :as dom] [rumext.v2 :as mf])) @@ -21,55 +20,80 @@ [props] (let [context (mf/use-ctx context) - icon (unchecked-get props "icon") - id (unchecked-get props "id") - value (unchecked-get props "value") + icon (unchecked-get props "icon") + id (unchecked-get props "id") + value (unchecked-get props "value") + disabled (unchecked-get props "disabled") + title (unchecked-get props "title") + unique-key (unchecked-get props "unique-key") + icon-class (unchecked-get props "icon-class") - on-change (unchecked-get context "on-change") - selected (unchecked-get context "selected") - name (unchecked-get context "name") + on-change (unchecked-get context "on-change") + selected (unchecked-get context "selected") + name (unchecked-get context "name") + encode-fn (unchecked-get context "encode-fn") - encode-fn (unchecked-get context "encode-fn") - checked? (= selected value)] + checked? (= selected value)] [:label {:for id + :title title + :key unique-key + :tabIndex "0" :class (stl/css-case :radio-icon true - :checked checked?)} + :checked checked? + :disabled disabled)} - (when (some? icon) icon) + (if (some? icon) + [:span {:class (when icon-class icon-class)} + icon] + [:span {:class (stl/css :title-name)} + (encode-fn value)]) [:input {:id id :on-change on-change :type "radio" :name name + :disabled disabled :value (encode-fn value) :checked checked?}]])) (mf/defc nilable-option {::mf/wrap-props false} [props] - (let [context (mf/use-ctx context) - icon (unchecked-get props "icon") - id (unchecked-get props "id") - value (unchecked-get props "value") + (let [context (mf/use-ctx context) + icon (unchecked-get props "icon") + id (unchecked-get props "id") + value (unchecked-get props "value") + disabled (unchecked-get props "disabled") + unique-key (unchecked-get props "unique-key") + icon-class (unchecked-get props "icon-class") - on-change (unchecked-get context "on-change") - selected (unchecked-get context "selected") - name (unchecked-get context "name") + on-change (unchecked-get context "on-change") + selected (unchecked-get context "selected") + name (unchecked-get context "name") - encode-fn (unchecked-get context "encode-fn") - checked? (= selected value)] + encode-fn (unchecked-get context "encode-fn") + checked? (= selected value)] [:label {:for id + :key unique-key :class (stl/css-case :radio-icon true + :disabled disabled :checked checked?)} - icon + + (if (some? icon) + [:span {:class (when icon-class icon-class)} + icon] + [:span {:class (stl/css :title-name)} + (encode-fn value)]) + [:input {:id id :on-change on-change :type "checkbox" :name name + :disabled disabled :value (encode-fn value) :checked checked?}]])) @@ -80,6 +104,8 @@ on-change (unchecked-get props "on-change") selected (unchecked-get props "selected") name (unchecked-get props "name") + class (unchecked-get props "class") + wide (unchecked-get props "wide") encode-fn (d/nilv (unchecked-get props "encode-fn") identity) decode-fn (d/nilv (unchecked-get props "encode-fn") identity) @@ -89,9 +115,11 @@ 1) width (mf/with-memo [nitems] - (fmt/format-pixels - (+ (math/pow 2 nitems) - (* 28 nitems)))) + (if (= wide true) + "unset" + (fmt/format-pixels + (+ (* 4 (- nitems 1)) + (* 28 nitems))))) on-change' (mf/use-fn @@ -110,6 +138,7 @@ :decode-fn decode-fn})] [:& (mf/provider context) {:value context-value} - [:div {:class (stl/css :radio-btn-wrapper) - :style {:width width}} + [:div {:class (stl/css-case :radio-btn-wrapper true + class true) + :style {:width width}} children]])) diff --git a/frontend/src/app/main/ui/components/radio_buttons.css.json b/frontend/src/app/main/ui/components/radio_buttons.css.json index 1897a51ea..ab99d2095 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.css.json +++ b/frontend/src/app/main/ui/components/radio_buttons.css.json @@ -1 +1 @@ -{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-warning":"components_radio_buttons_button-warning_lkAzy","button-disabled":"components_radio_buttons_button-disabled_C-rUC","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","link":"components_radio_buttons_link_cdc3r","asset-element":"components_radio_buttons_asset-element_l2wMX","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","menu-dropdown":"components_radio_buttons_menu-dropdown_Qn0oF","menu-item":"components_radio_buttons_menu-item_SWV2N","shortcut":"components_radio_buttons_shortcut_25Uf9","shortcut-key":"components_radio_buttons_shortcut-key_S2Y64","user-icon":"components_radio_buttons_user-icon_Ab9su","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","checked":"components_radio_buttons_checked_sjVzy","spin-animation":"components_radio_buttons_spin-animation_iz1sC"} \ No newline at end of file +{"button-primary":"components_radio_buttons_button-primary_-XZNO","button-secondary":"components_radio_buttons_button-secondary_yj3Oe","button-tertiary":"components_radio_buttons_button-tertiary_s2RvI","button-radio":"components_radio_buttons_button-radio_AfWrP","radio-icon":"components_radio_buttons_radio-icon_1OnG1","button-warning":"components_radio_buttons_button-warning_lkAzy","button-disabled":"components_radio_buttons_button-disabled_C-rUC","button-tag":"components_radio_buttons_button-tag_4VTp-","button-icon":"components_radio_buttons_button-icon_jP0XC","button-icon-small":"components_radio_buttons_button-icon-small_3AO-R","link":"components_radio_buttons_link_cdc3r","asset-element":"components_radio_buttons_asset-element_l2wMX","input-element":"components_radio_buttons_input-element_iC9Tc","new-scrollbar":"components_radio_buttons_new-scrollbar_m-Mwb","menu-dropdown":"components_radio_buttons_menu-dropdown_Qn0oF","menu-item":"components_radio_buttons_menu-item_SWV2N","shortcut":"components_radio_buttons_shortcut_25Uf9","shortcut-key":"components_radio_buttons_shortcut-key_S2Y64","user-icon":"components_radio_buttons_user-icon_Ab9su","radio-btn-wrapper":"components_radio_buttons_radio-btn-wrapper_mH6QX","title-name":"components_radio_buttons_title-name_UZBUe","checked":"components_radio_buttons_checked_sjVzy","disabled":"components_radio_buttons_disabled_V4CO5","spin-animation":"components_radio_buttons_spin-animation_iz1sC"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/radio_buttons.scss b/frontend/src/app/main/ui/components/radio_buttons.scss index 6d37280b1..a76134641 100644 --- a/frontend/src/app/main/ui/components/radio_buttons.scss +++ b/frontend/src/app/main/ui/components/radio_buttons.scss @@ -10,12 +10,12 @@ @include flexCenter; border-radius: $br-8; height: $s-32; - background-color: var(--radio-btns-background-color); + background-color: var(--input-background-color); } .radio-icon { - @extend .button-tertiary; + @extend .button-radio; height: $s-28; - width: 100%; + flex-grow: 1; border-radius: $s-6; border: solid $s-2 transparent; box-sizing: content-box; @@ -26,17 +26,38 @@ @extend .button-icon; stroke: var(--radio-btn-foreground-color); } - &:hover { - border: solid $s-2 var(--radio-btns-background-color); + .title-name { + @include tabTitleTipography; + color: var(--radio-btn-foreground-color); } + &.checked { background-color: var(--radio-btn-background-color-selected); - border: $s-2 solid var(--radio-btn-border-color-selected); svg { stroke: var(--radio-btn-foreground-color-selected); } + .title-name { + color: var(--radio-btn-foreground-color-selected); + } + } + + &.disabled { + cursor: default; + svg { + stroke: var(--button-foreground-color-disabled); + } + .title-name { + color: var(--button-foreground-color-disabled); + } &:hover { - border: $s-2 solid var(--radio-btn-border-color-selected); + border: none; + background-color: transparent; + svg { + stroke: var(--button-foreground-color-disabled); + } + .title-name { + color: var(--button-foreground-color-disabled); + } } } } diff --git a/frontend/src/app/main/ui/components/search_bar.css.json b/frontend/src/app/main/ui/components/search_bar.css.json index cac053f69..dd3201b23 100644 --- a/frontend/src/app/main/ui/components/search_bar.css.json +++ b/frontend/src/app/main/ui/components/search_bar.css.json @@ -1 +1 @@ -{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-warning":"components_search_bar_button-warning_A-XnD","button-disabled":"components_search_bar_button-disabled_Y9B7M","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","link":"components_search_bar_link_VjGo-","asset-element":"components_search_bar_asset-element_rH-5k","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","menu-dropdown":"components_search_bar_menu-dropdown_BDHD4","menu-item":"components_search_bar_menu-item_7wbp0","shortcut":"components_search_bar_shortcut_sPxgB","shortcut-key":"components_search_bar_shortcut-key_fp81A","user-icon":"components_search_bar_user-icon_QZlpB","has-children":"components_search_bar_has-children_u-VSq","spin-animation":"components_search_bar_spin-animation_Uxq5m"} \ No newline at end of file +{"button-primary":"components_search_bar_button-primary_-9D1J","button-secondary":"components_search_bar_button-secondary_GbDgI","button-tertiary":"components_search_bar_button-tertiary_VTCfX","button-radio":"components_search_bar_button-radio_vMkry","button-warning":"components_search_bar_button-warning_A-XnD","button-disabled":"components_search_bar_button-disabled_Y9B7M","button-tag":"components_search_bar_button-tag_dKink","search-box":"components_search_bar_search-box_AFEzz","search-input-wrapper":"components_search_bar_search-input-wrapper_Djsml","clear":"components_search_bar_clear_B6lfz","button-icon":"components_search_bar_button-icon_CdwNa","button-icon-small":"components_search_bar_button-icon-small_gSOsT","link":"components_search_bar_link_VjGo-","asset-element":"components_search_bar_asset-element_rH-5k","input-element":"components_search_bar_input-element_9SCvY","new-scrollbar":"components_search_bar_new-scrollbar_rN-Bt","menu-dropdown":"components_search_bar_menu-dropdown_BDHD4","menu-item":"components_search_bar_menu-item_7wbp0","shortcut":"components_search_bar_shortcut_sPxgB","shortcut-key":"components_search_bar_shortcut-key_fp81A","user-icon":"components_search_bar_user-icon_QZlpB","has-children":"components_search_bar_has-children_u-VSq","spin-animation":"components_search_bar_spin-animation_Uxq5m"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/search_bar.scss b/frontend/src/app/main/ui/components/search_bar.scss index 671ec54b9..9f568ea28 100644 --- a/frontend/src/app/main/ui/components/search_bar.scss +++ b/frontend/src/app/main/ui/components/search_bar.scss @@ -56,6 +56,7 @@ svg { @extend .button-icon-small; color: transparent; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs index 067df24cd..93509d123 100644 --- a/frontend/src/app/main/ui/components/select.cljs +++ b/frontend/src/app/main/ui/components/select.cljs @@ -107,8 +107,6 @@ [:span {:class (css :label)} label] [:span {:class (css :check-icon)} i/tick-refactor]])))]]] - - [:div.custom-select {:on-click open-dropdown :class class} [:span current-label] [:span.dropdown-button i/arrow-down] diff --git a/frontend/src/app/main/ui/components/select.css.json b/frontend/src/app/main/ui/components/select.css.json index c9ab74128..3d1780221 100644 --- a/frontend/src/app/main/ui/components/select.css.json +++ b/frontend/src/app/main/ui/components/select.css.json @@ -1 +1 @@ -{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-warning":"components_select_button-warning_i4KNg","button-disabled":"components_select_button-disabled_1r9-1","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","link":"components_select_link_tQfh4","asset-element":"components_select_asset-element_5vxj7","new-scrollbar":"components_select_new-scrollbar_-E7lz","menu-dropdown":"components_select_menu-dropdown_kxQ7x","menu-item":"components_select_menu-item_ZCcV2","shortcut":"components_select_shortcut_RvVt6","shortcut-key":"components_select_shortcut-key_CLR8L","user-icon":"components_select_user-icon_tLWU4","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr","spin-animation":"components_select_spin-animation_YEDae"} \ No newline at end of file +{"button-primary":"components_select_button-primary_peYzv","button-secondary":"components_select_button-secondary_Kse6w","button-tertiary":"components_select_button-tertiary_srwoV","button-radio":"components_select_button-radio_xDb5D","button-warning":"components_select_button-warning_i4KNg","button-disabled":"components_select_button-disabled_1r9-1","button-tag":"components_select_button-tag_AJXtX","button-icon":"components_select_button-icon_86LWm","custom-select":"components_select_custom-select_OM8-6","dropdown-button":"components_select_dropdown-button_IcpuR","button-icon-small":"components_select_button-icon-small_H0Bue","checked-element":"components_select_checked-element_c5-i4","check-icon":"components_select_check-icon_9x082","link":"components_select_link_tQfh4","asset-element":"components_select_asset-element_5vxj7","input-element":"components_select_input-element_-7lw0","new-scrollbar":"components_select_new-scrollbar_-E7lz","menu-dropdown":"components_select_menu-dropdown_kxQ7x","menu-item":"components_select_menu-item_ZCcV2","shortcut":"components_select_shortcut_RvVt6","shortcut-key":"components_select_shortcut-key_CLR8L","user-icon":"components_select_user-icon_tLWU4","current-label":"components_select_current-label_CUaQs","custom-select-dropdown":"components_select_custom-select-dropdown_2yZj9","label":"components_select_label_kTY8t","is-selected":"components_select_is-selected_nTUGr","spin-animation":"components_select_spin-animation_YEDae"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss index 4e21782f1..495045627 100644 --- a/frontend/src/app/main/ui/components/select.scss +++ b/frontend/src/app/main/ui/components/select.scss @@ -22,6 +22,7 @@ svg { @extend .button-icon; transform: rotate(90deg); + stroke: var(--icon-foreground); } } .custom-select-dropdown { @@ -42,7 +43,7 @@ display: flex; align-items: center; height: $s-32; - padding: $s-8; + padding: 0 $s-8; border-radius: $br-6; color: var(--menu-foreground-color); .label { @@ -55,6 +56,7 @@ svg { @extend .button-icon-small; visibility: hidden; + stroke: var(--icon-foreground); } } diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index ea37a89f8..2b11ec5f1 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -36,6 +36,7 @@ collapsable? (unchecked-get props "collapsable?") handle-collapse (unchecked-get props "handle-collapse") klass (unchecked-get props "klass") + content-class (unchecked-get props "content-class") state (mf/use-state #(or selected (-> children first .-props .-id))) selected (or selected @state) @@ -69,5 +70,6 @@ :class (dom/classnames (css :tab-container-tab-title) true (css :current) (= selected id))} title]))]] - [:div {:class (dom/classnames (css :tab-container-content) true)} + [:div {:class (dom/classnames (css :tab-container-content) true + content-class (some? content-class))} (d/seek #(= selected (-> % .-props .-id)) children)]])) diff --git a/frontend/src/app/main/ui/components/tab_container.css.json b/frontend/src/app/main/ui/components/tab_container.css.json index e6e633e9f..4905fe2bc 100644 --- a/frontend/src/app/main/ui/components/tab_container.css.json +++ b/frontend/src/app/main/ui/components/tab_container.css.json @@ -1 +1 @@ -{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-warning":"components_tab_container_button-warning_SFGWo","button-disabled":"components_tab_container_button-disabled_FZXHD","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","link":"components_tab_container_link_KmrN7","asset-element":"components_tab_container_asset-element_1-YWa","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","menu-dropdown":"components_tab_container_menu-dropdown_hkr9S","menu-item":"components_tab_container_menu-item_jbhvD","shortcut":"components_tab_container_shortcut_PBP6z","shortcut-key":"components_tab_container_shortcut-key_eFC8J","user-icon":"components_tab_container_user-icon_pY-wv","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK","spin-animation":"components_tab_container_spin-animation_mPm0p"} \ No newline at end of file +{"button-primary":"components_tab_container_button-primary_ibiAz","button-secondary":"components_tab_container_button-secondary_wZR80","button-tertiary":"components_tab_container_button-tertiary_JHJAx","button-radio":"components_tab_container_button-radio_oNen8","button-warning":"components_tab_container_button-warning_SFGWo","button-disabled":"components_tab_container_button-disabled_FZXHD","button-tag":"components_tab_container_button-tag_NnL8y","button-icon":"components_tab_container_button-icon_2NhVr","button-icon-small":"components_tab_container_button-icon-small_yU7na","link":"components_tab_container_link_KmrN7","asset-element":"components_tab_container_asset-element_1-YWa","input-element":"components_tab_container_input-element_m8IEj","new-scrollbar":"components_tab_container_new-scrollbar_L-puJ","menu-dropdown":"components_tab_container_menu-dropdown_hkr9S","menu-item":"components_tab_container_menu-item_jbhvD","shortcut":"components_tab_container_shortcut_PBP6z","shortcut-key":"components_tab_container_shortcut-key_eFC8J","user-icon":"components_tab_container_user-icon_pY-wv","tab-container":"components_tab_container_tab-container_P6HRr","tab-container-content":"components_tab_container_tab-container-content_yfM9F","tab-element":"components_tab_container_tab-element_gBIwV","tab-container-tabs":"components_tab_container_tab-container-tabs_6gXOY","tab-container-tab-wrapper":"components_tab_container_tab-container-tab-wrapper_-ngrN","tab-container-tab-title":"components_tab_container_tab-container-tab-title_IN1Dx","current":"components_tab_container_current_jrovp","collapse-sidebar":"components_tab_container_collapse-sidebar_e5hFv","collapsed":"components_tab_container_collapsed_lfkjK","spin-animation":"components_tab_container_spin-animation_mPm0p"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss index 16ffc2408..911b0367f 100644 --- a/frontend/src/app/main/ui/components/tab_container.scss +++ b/frontend/src/app/main/ui/components/tab_container.scss @@ -17,7 +17,7 @@ } .tab-element { - height: 100%; + height: fit-content; } } .tab-container-tabs { diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs index f418bc7a7..8482f4fb1 100644 --- a/frontend/src/app/main/ui/components/title_bar.cljs +++ b/frontend/src/app/main/ui/components/title_bar.cljs @@ -13,14 +13,14 @@ (mf/defc title-bar {::mf/wrap-props false} - [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children klass]}] - (let [klass (dm/str (stl/css :title-bar) " " klass)] + [{:keys [collapsable? collapsed? on-collapsed title children on-btn-click btn-children class]}] + (let [klass (dm/str (stl/css :title-bar) " " class)] [:div {:class klass} (if collapsable? [:button {:class (stl/css :toggle-btn) :on-click on-collapsed} [:span {:class (stl/css-case :collased-icon true - :rotated collapsed?)} + :rotated collapsed?)} i/arrow-refactor] [:div {:class (stl/css :title)} title]] [:div {:class (stl/css :title-only)} title]) diff --git a/frontend/src/app/main/ui/components/title_bar.css.json b/frontend/src/app/main/ui/components/title_bar.css.json index cd6264eaa..552302dd7 100644 --- a/frontend/src/app/main/ui/components/title_bar.css.json +++ b/frontend/src/app/main/ui/components/title_bar.css.json @@ -1 +1 @@ -{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-warning":"components_title_bar_button-warning_XpojP","button-disabled":"components_title_bar_button-disabled_X72-5","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","link":"components_title_bar_link_m-lOt","asset-element":"components_title_bar_asset-element_64u6f","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","menu-dropdown":"components_title_bar_menu-dropdown_uk31D","menu-item":"components_title_bar_menu-item_cGiAC","shortcut":"components_title_bar_shortcut_M9Wv0","shortcut-key":"components_title_bar_shortcut-key_w8Q95","user-icon":"components_title_bar_user-icon_FMwxz","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn","spin-animation":"components_title_bar_spin-animation_7EFXa"} \ No newline at end of file +{"button-primary":"components_title_bar_button-primary_svLtU","button-secondary":"components_title_bar_button-secondary_JA5NP","button-tertiary":"components_title_bar_button-tertiary_yqQfO","title-bar":"components_title_bar_title-bar_oUkS0","title-button":"components_title_bar_title-button_xTE-7","button-radio":"components_title_bar_button-radio_vhlSa","button-warning":"components_title_bar_button-warning_XpojP","button-disabled":"components_title_bar_button-disabled_X72-5","button-tag":"components_title_bar_button-tag_o9yFT","button-icon":"components_title_bar_button-icon_ROHrz","button-icon-small":"components_title_bar_button-icon-small_WibJp","toggle-btn":"components_title_bar_toggle-btn_9ekUv","collased-icon":"components_title_bar_collased-icon_SJ1ls","link":"components_title_bar_link_m-lOt","asset-element":"components_title_bar_asset-element_64u6f","input-element":"components_title_bar_input-element_Q0DAR","new-scrollbar":"components_title_bar_new-scrollbar_dkyAb","menu-dropdown":"components_title_bar_menu-dropdown_uk31D","menu-item":"components_title_bar_menu-item_cGiAC","shortcut":"components_title_bar_shortcut_M9Wv0","shortcut-key":"components_title_bar_shortcut-key_w8Q95","user-icon":"components_title_bar_user-icon_FMwxz","title":"components_title_bar_title_qPuju","title-only":"components_title_bar_title-only_aSsdC","rotated":"components_title_bar_rotated_9z7Rn","spin-animation":"components_title_bar_spin-animation_7EFXa"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss index 029015e5c..98e4595fc 100644 --- a/frontend/src/app/main/ui/components/title_bar.scss +++ b/frontend/src/app/main/ui/components/title_bar.scss @@ -23,11 +23,11 @@ flex-grow: 1; height: 100%; min-height: $s-32; - margin-right: $s-8; + margin-left: $s-8; color: var(--title-foreground-color); } .title-only { - // margin-left: $s-8; + margin-left: $s-8; } .toggle-btn { @@ -42,10 +42,11 @@ @include flexCenter; height: $s-24; border-radius: $br-8; - padding-left: $s-8; + svg { @extend .button-icon-small; transform: rotate(90deg); + stroke: var(--icon-foreground); } &.rotated svg { transform: rotate(0deg); @@ -72,6 +73,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/debug/components_preview.cljs b/frontend/src/app/main/ui/debug/components_preview.cljs index 428273556..3ba458132 100644 --- a/frontend/src/app/main/ui/debug/components_preview.cljs +++ b/frontend/src/app/main/ui/debug/components_preview.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.debug.components-preview - (:require-macros [app.main.style :refer [css styles]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.main.data.users :as du] [app.main.refs :as refs] @@ -23,8 +23,8 @@ [props] (let [children (unchecked-get props "children") title (unchecked-get props "title")] - [:div {:class (dom/classnames (css :component) true)} - [:h4 {:class (dom/classnames (css :component-name) true)} title] + [:div {:class (stl/css :component)} + [:h4 {:class (stl/css :component-name)} title] children])) (mf/defc components-preview @@ -77,7 +77,7 @@ on-btn-click (mf/use-fn #(prn "eyy"))] [:section.debug-components-preview - [:div {:class (dom/classnames (css :themes-row) true)} + [:div {:class (stl/css :themes-row)} [:h2 "Themes"] [:select {:label "Select theme color" :name :theme @@ -86,17 +86,18 @@ :on-change on-change} [:option {:label "Penpot Dark (default)" :value "default"}] [:option {:label "Penpot Light" :value "light"}]] - [:div {:class (dom/classnames (css :wrapper) true)} - (let [css (styles)] + [:div {:class (stl/css :wrapper)} + (let [css (stl/styles)] (for [color colors] [:div {:key color :class (dom/classnames (get css color) true (get css :rect) true)} (d/name color)]))]] - [:div {:class (dom/classnames (css :components-row) true)} - [:h2 {:class (dom/classnames (css :title) true)} "Components"] - [:div {:class (dom/classnames (css :components-wrapper) true)} - [:div {:class (dom/classnames (css :component-group) true)} + + [:div {:class (stl/css :components-row)} + [:h2 {:class(stl/css :title)} "Components"] + [:div {:class (stl/css :components-wrapper)} + [:div {:class (stl/css :components-group)} [:h3 "Titles"] [:& component-wrapper {:title "Title"} @@ -129,7 +130,7 @@ [:& tab-element {:id :second :title "B tab"}]]]]] - [:div {:class (dom/classnames (css :component-group) true)} + [:div {:class (stl/css :components-group)} [:h3 "Tabs component"] [:& component-wrapper {:title "2 tab component"} @@ -154,7 +155,7 @@ :title "Third tab"} [:div "This is third tab content"]]]]] - [:div {:class (dom/classnames (css :component-group) true)} + [:div {:class (stl/css :components-group)} [:h3 "Search bar"] [:& component-wrapper {:title "Search bar only"} @@ -166,21 +167,21 @@ [:& search-bar {:on-change update-search :value input-value :placeholder "Test value"} - [:button {:class (dom/classnames (css :test-button) true) + [:button {:class (stl/css :test-button) :on-click on-btn-click} "X"]]]] - [:div {:class (dom/classnames (css :component-group) true)} + [:div {:class (stl/css :components-group)} [:h3 "Radio buttons"] [:& component-wrapper {:title "Two radio buttons (toggle)"} [:& radio-buttons {:selected radio-selected :on-change set-radio-selected :name "listing-style"} - [:& radio-button {:icon (mf/html i/view-as-list-refactor) + [:& radio-button {:icon i/view-as-list-refactor :value "first" :id :list}] - [:& radio-button {:icon (mf/html i/flex-grid-refactor) + [:& radio-button {:icon i/flex-grid-refactor :value "second" :id :grid}]]] [:& component-wrapper @@ -188,14 +189,14 @@ [:& radio-buttons {:selected radio-selected :on-change set-radio-selected :name "listing-style"} - [:& radio-button {:icon (mf/html i/view-as-list-refactor) + [:& radio-button {:icon i/view-as-list-refactor :value "first" :id :first}] - [:& radio-button {:icon (mf/html i/flex-grid-refactor) + [:& radio-button {:icon i/flex-grid-refactor :value "second" :id :second}] - [:& radio-button {:icon (mf/html i/add-refactor) + [:& radio-button {:icon i/add-refactor :value "third" :id :third}]]] @@ -204,17 +205,45 @@ [:& radio-buttons {:selected radio-selected :on-change set-radio-selected :name "listing-style"} - [:& radio-button {:icon (mf/html i/view-as-list-refactor) + [:& radio-button {:icon i/view-as-list-refactor :value "first" :id :first}] - [:& radio-button {:icon (mf/html i/flex-grid-refactor) + [:& radio-button {:icon i/flex-grid-refactor :value "second" :id :second}] - [:& radio-button {:icon (mf/html i/add-refactor) + [:& radio-button {:icon i/add-refactor :value "third" :id :third}] - [:& radio-button {:icon (mf/html i/board-refactor) + [:& radio-button {:icon i/board-refactor :value "forth" - :id :forth}]]]]]]])) + :id :forth}]]]] + [:div {:class (stl/css :components-group)} + [:h3 "Buttons"] + [:& component-wrapper + {:title "Button primary"} + [:button {:class (stl/css :button-primary)} + "Primary"]] + [:& component-wrapper + {:title "Button primary with icon"} + [:button {:class (stl/css :button-primary)} + i/add-refactor]] + + [:& component-wrapper + {:title "Button secondary"} + [:button {:class (stl/css :button-secondary)} + "secondary"]] + [:& component-wrapper + {:title "Button secondary with icon"} + [:button {:class (stl/css :button-secondary)} + i/add-refactor]] + + [:& component-wrapper + {:title "Button tertiary"} + [:button {:class (stl/css :button-tertiary)} + "tertiary"]] + [:& component-wrapper + {:title "Button tertiary with icon"} + [:button {:class (stl/css :button-tertiary)} + i/add-refactor]]]]]])) diff --git a/frontend/src/app/main/ui/debug/components_preview.css.json b/frontend/src/app/main/ui/debug/components_preview.css.json index b9b1c9031..ccaea6c2f 100644 --- a/frontend/src/app/main/ui/debug/components_preview.css.json +++ b/frontend/src/app/main/ui/debug/components_preview.css.json @@ -1 +1 @@ -{"button-primary":"debug_components_preview_button-primary_Q2m40","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-warning":"debug_components_preview_button-warning_Ux7Aq","button-disabled":"debug_components_preview_button-disabled_QAKPy","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","link":"debug_components_preview_link_uSQr6","asset-element":"debug_components_preview_asset-element_LhcNS","new-scrollbar":"debug_components_preview_new-scrollbar_KrmL7","menu-dropdown":"debug_components_preview_menu-dropdown_1-d0F","menu-item":"debug_components_preview_menu-item_xb46E","shortcut":"debug_components_preview_shortcut_RsfIk","shortcut-key":"debug_components_preview_shortcut-key_5y-OI","user-icon":"debug_components_preview_user-icon_JBBfp","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","components-row":"debug_components_preview_components-row_N3f-J","title":"debug_components_preview_title_TVtzz","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW","spin-animation":"debug_components_preview_spin-animation_WfTTo"} \ No newline at end of file +{"button-primary":"debug_components_preview_button-primary_Q2m40","components-row":"debug_components_preview_components-row_N3f-J","components-wrapper":"debug_components_preview_components-wrapper_A8IgV","button-secondary":"debug_components_preview_button-secondary_yPp3n","button-tertiary":"debug_components_preview_button-tertiary_FIKgJ","button-radio":"debug_components_preview_button-radio_vSuyW","button-warning":"debug_components_preview_button-warning_Ux7Aq","button-disabled":"debug_components_preview_button-disabled_QAKPy","button-tag":"debug_components_preview_button-tag_NNepE","button-icon":"debug_components_preview_button-icon_J36A6","button-icon-small":"debug_components_preview_button-icon-small_Pf3jb","link":"debug_components_preview_link_uSQr6","asset-element":"debug_components_preview_asset-element_LhcNS","input-element":"debug_components_preview_input-element_gKGKr","new-scrollbar":"debug_components_preview_new-scrollbar_KrmL7","menu-dropdown":"debug_components_preview_menu-dropdown_1-d0F","menu-item":"debug_components_preview_menu-item_xb46E","shortcut":"debug_components_preview_shortcut_RsfIk","shortcut-key":"debug_components_preview_shortcut-key_5y-OI","user-icon":"debug_components_preview_user-icon_JBBfp","themes-row":"debug_components_preview_themes-row_wEU8d","wrapper":"debug_components_preview_wrapper_535-4","rect":"debug_components_preview_rect_jomnq","bg-primary":"debug_components_preview_bg-primary_Rt4oW","bg-secondary":"debug_components_preview_bg-secondary_rcmll","bg-tertiary":"debug_components_preview_bg-tertiary_7rITE","bg-cuaternary":"debug_components_preview_bg-cuaternary_UEBPN","fg-primary":"debug_components_preview_fg-primary_naliT","fg-secondary":"debug_components_preview_fg-secondary_zT9IX","acc":"debug_components_preview_acc_h3Bia","acc-muted":"debug_components_preview_acc-muted_uingh","acc-secondary":"debug_components_preview_acc-secondary_oHH6y","acc-tertiary":"debug_components_preview_acc-tertiary_SwBjy","title":"debug_components_preview_title_TVtzz","component-group":"debug_components_preview_component-group_dI55k","component":"debug_components_preview_component_xBMSU","component-name":"debug_components_preview_component-name_3ZJMW","spin-animation":"debug_components_preview_spin-animation_WfTTo"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss index 3e29500ab..d780a4090 100644 --- a/frontend/src/app/main/ui/debug/components_preview.scss +++ b/frontend/src/app/main/ui/debug/components_preview.scss @@ -83,6 +83,7 @@ padding: $s-20; display: flex; flex-wrap: wrap; + gap: $s-20; .component-group { @include flexCenter; justify-content: flex-start; @@ -107,5 +108,26 @@ } } } + .button-primary { + @extend .button-primary; + height: $s-32; + svg { + @extend .button-icon; + } + } + .button-secondary { + @extend .button-secondary; + height: $s-32; + svg { + @extend .button-icon; + } + } + .button-tertiary { + @extend .button-tertiary; + height: $s-32; + svg { + @extend .button-icon; + } + } } } diff --git a/frontend/src/app/main/ui/export.css.json b/frontend/src/app/main/ui/export.css.json index 7bc27c07e..5e16431de 100644 --- a/frontend/src/app/main/ui/export.css.json +++ b/frontend/src/app/main/ui/export.css.json @@ -1 +1 @@ -{"button-primary":"ui_export_button-primary_dgIrA","button-secondary":"ui_export_button-secondary_5H2Cl","button-tertiary":"ui_export_button-tertiary_8kym9","export-progress-modal-overlay":"ui_export_export-progress-modal-overlay_AAFul","export-progress-modal-container":"ui_export_export-progress-modal-container_1pPaw","export-progress-modal-header":"ui_export_export-progress-modal-header_aulHx","modal-close-button":"ui_export_modal-close-button_zi01-","export-progress-modal-title":"ui_export_export-progress-modal-title_DJyJK","retry-btn":"ui_export_retry-btn_61ygN","button-warning":"ui_export_button-warning_WJIb-","button-disabled":"ui_export_button-disabled_DiGAO","button-tag":"ui_export_button-tag_AaPgd","button-icon":"ui_export_button-icon_xc1O3","button-icon-small":"ui_export_button-icon-small_7Gu5A","link":"ui_export_link_ViAcG","asset-element":"ui_export_asset-element_jhF3N","new-scrollbar":"ui_export_new-scrollbar_sAcwV","menu-dropdown":"ui_export_menu-dropdown_O3IGG","menu-item":"ui_export_menu-item_J9ztX","shortcut":"ui_export_shortcut_PS6FL","shortcut-key":"ui_export_shortcut-key_F--h2","user-icon":"ui_export_user-icon_3goUU","title-text":"ui_export_title-text_B1EGQ","progress":"ui_export_progress_toR5B","progress-bar":"ui_export_progress-bar_Avs-j","spin-animation":"ui_export_spin-animation_aAhh4"} \ No newline at end of file +{"button-primary":"ui_export_button-primary_dgIrA","button-secondary":"ui_export_button-secondary_5H2Cl","button-tertiary":"ui_export_button-tertiary_8kym9","export-progress-modal-overlay":"ui_export_export-progress-modal-overlay_AAFul","export-progress-modal-container":"ui_export_export-progress-modal-container_1pPaw","export-progress-modal-header":"ui_export_export-progress-modal-header_aulHx","modal-close-button":"ui_export_modal-close-button_zi01-","export-progress-modal-title":"ui_export_export-progress-modal-title_DJyJK","retry-btn":"ui_export_retry-btn_61ygN","button-radio":"ui_export_button-radio_EUUXg","button-warning":"ui_export_button-warning_WJIb-","button-disabled":"ui_export_button-disabled_DiGAO","button-tag":"ui_export_button-tag_AaPgd","button-icon":"ui_export_button-icon_xc1O3","button-icon-small":"ui_export_button-icon-small_7Gu5A","link":"ui_export_link_ViAcG","asset-element":"ui_export_asset-element_jhF3N","input-element":"ui_export_input-element_HijtH","new-scrollbar":"ui_export_new-scrollbar_sAcwV","menu-dropdown":"ui_export_menu-dropdown_O3IGG","menu-item":"ui_export_menu-item_J9ztX","shortcut":"ui_export_shortcut_PS6FL","shortcut-key":"ui_export_shortcut-key_F--h2","user-icon":"ui_export_user-icon_3goUU","title-text":"ui_export_title-text_B1EGQ","progress":"ui_export_progress_toR5B","progress-bar":"ui_export_progress-bar_Avs-j","spin-animation":"ui_export_spin-animation_aAhh4"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss index dc57d8081..e4aa1d2c8 100644 --- a/frontend/src/app/main/ui/export.scss +++ b/frontend/src/app/main/ui/export.scss @@ -57,6 +57,7 @@ @extend .button-tertiary; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 7a80eef68..35a7dfca2 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -264,20 +264,36 @@ (def asc-sort-refactor (icon-xref :asc-sort-refactor)) (def absolute-refactor (icon-xref :absolute-refactor)) (def align-bottom-refactor (icon-xref :align-bottom-refactor)) -(def align-content-center-refactor (icon-xref :align-content-center-refactor)) -(def align-content-end-refactor (icon-xref :align-content-end-refactor)) -(def align-content-space-around-refactor (icon-xref :align-content-space-around-refactor)) -(def align-content-space-between-refactor (icon-xref :align-content-space-between-refactor)) -(def align-content-space-evenly-refactor (icon-xref :align-content-space-evenly-refactor)) -(def align-content-start-refactor (icon-xref :align-content-start-refactor)) +(def align-content-row-center-refactor (icon-xref :align-content-row-center-refactor)) +(def align-content-column-around-refactor (icon-xref :align-content-column-around-refactor)) +(def align-content-column-between-refactor (icon-xref :align-content-column-between-refactor)) +(def align-content-column-center-refactor (icon-xref :align-content-column-center-refactor)) +(def align-content-column-evenly-refactor (icon-xref :align-content-column-evenly-refactor)) +(def align-content-column-start-refactor (icon-xref :align-content-column-start-refactor)) +(def align-content-column-end-refactor (icon-xref :align-content-column-end-refactor)) +(def align-content-row-end-refactor (icon-xref :align-content-row-end-refactor)) +(def align-content-row-around-refactor (icon-xref :align-content-row-around-refactor)) +(def align-content-row-between-refactor (icon-xref :align-content-row-between-refactor)) +(def align-content-row-evenly-refactor (icon-xref :align-content-row-evenly-refactor)) +(def align-content-row-start-refactor (icon-xref :align-content-row-start-refactor)) + (def align-horizontal-center-refactor (icon-xref :align-horizontal-center-refactor)) (def align-vertical-center-refactor (icon-xref :align-vertical-center-refactor)) -(def align-items-center-refactor (icon-xref :align-items-center-refactor)) -(def align-items-end-refactor (icon-xref :align-items-end-refactor)) -(def align-items-start-refactor (icon-xref :align-items-start-refactor)) +(def align-items-row-center-refactor (icon-xref :align-items-row-center-refactor)) +(def align-items-row-end-refactor (icon-xref :align-items-row-end-refactor)) +(def align-items-row-start-refactor (icon-xref :align-items-row-start-refactor)) +(def align-items-column-start-refactor (icon-xref :align-items-column-start-refactor)) +(def align-items-column-end-refactor (icon-xref :align-items-column-end-refactor)) +(def align-items-column-center-refactor (icon-xref :align-items-column-center-refactor)) (def align-left-refactor (icon-xref :align-left-refactor)) (def align-right-refactor (icon-xref :align-right-refactor)) (def align-top-refactor (icon-xref :align-top-refactor)) +(def align-self-column-bottom-refactor (icon-xref :align-self-column-bottom-refactor)) +(def align-self-column-center-refactor (icon-xref :align-self-column-center-refactor)) +(def align-self-column-top-refactor (icon-xref :align-self-column-top-refactor)) +(def align-self-row-center-refactor (icon-xref :align-self-row-center-refactor)) +(def align-self-row-left-refactor (icon-xref :align-self-row-left-refactor)) +(def align-self-row-right-refactor (icon-xref :align-self-row-right-refactor)) (def board-refactor (icon-xref :board-refactor)) (def boards-thumbnail-refactor (icon-xref :boards-thumbnail-refactor)) (def boolean-difference-refactor (icon-xref :boolean-difference-refactor)) @@ -285,6 +301,7 @@ (def boolean-flatten-refactor (icon-xref :boolean-flatten-refactor)) (def boolean-intersection-refactor (icon-xref :boolean-intersection-refactor)) (def boolean-union-refactor (icon-xref :boolean-union-refactor)) +(def clip-content-refactor (icon-xref :clip-content-refactor)) (def close-refactor (icon-xref :close-refactor)) (def close-small-refactor (icon-xref :close-small-refactor)) (def component-refactor (icon-xref :component-refactor)) @@ -296,7 +313,7 @@ (def constraint-vertical-refactor (icon-xref :constraint-vertical-refactor)) (def corner-radius-refactor (icon-xref :corner-radius-refactor)) (def curve-refactor (icon-xref :curve-refactor)) -(def distribute-vertical-sapcing-refactor (icon-xref :distribute-vertical-spacing-refactor)) +(def distribute-vertical-spacing-refactor (icon-xref :distribute-vertical-spacing-refactor)) (def distribute-horizontally-refactor (icon-xref :distribute-horizontally-refactor)) (def delete-refactor (icon-xref :delete-refactor)) (def delete-text-refactor (icon-xref :delete-text-refactor)) @@ -306,7 +323,9 @@ (def drop-refactor (icon-xref :drop-refactor)) (def effects-refactor (icon-xref :effects-refactor)) (def elipse-refactor (icon-xref :elipse-refactor)) +(def fill-content-refactor (icon-xref :fill-content-refactor)) (def filter-refactor (icon-xref :filter-refactor)) +(def fixed-width-refactor (icon-xref :fixed-width-refactor)) (def flex-refactor (icon-xref :flex-refactor)) (def flex-horizontal-refactor (icon-xref :flex-horizontal-refactor)) (def flex-grid-refactor (icon-xref :flex-grid-refactor)) @@ -322,23 +341,31 @@ (def grid-refactor (icon-xref :grid-refactor)) (def group-refactor (icon-xref :group-refactor)) (def graphics-refactor (icon-xref :graphics-refactor)) -(def gutter-horizontal-refactor (icon-xref :gutter-horizontal-refactor)) -(def gutter-vertical-refactor (icon-xref :gutter-vertical-refactor)) +(def gap-horizontal-refactor (icon-xref :gap-horizontal-refactor)) +(def gap-vertical-refactor (icon-xref :gap-vertical-refactor)) (def hide-refactor (icon-xref :hide-refactor)) (def history-refactor (icon-xref :history-refactor)) +(def hug-content-refactor (icon-xref :hug-content-refactor)) (def img-refactor (icon-xref :img-refactor)) (def icon-refactor (icon-xref :icon-refactor)) -(def justify-content-center-refactor (icon-xref :justify-content-center-refactor)) -(def justify-content-end-refactor (icon-xref :justify-content-end-refactor)) -(def justify-content-start-refactor (icon-xref :justify-content-start-refactor)) -(def justify-content-space-between-refactor (icon-xref :justify-content-space-between-refactor)) -(def justify-content-space-around-refactor (icon-xref :justify-content-space-around-refactor)) -(def justify-content-space-evenly-refactor (icon-xref :justify-content-space-evenly-refactor)) +(def justify-content-column-around-refactor (icon-xref :justify-content-column-around-refactor)) +(def justify-content-column-between-refactor (icon-xref :justify-content-column-between-refactor)) +(def justify-content-column-center-refactor (icon-xref :justify-content-column-center-refactor)) +(def justify-content-column-end-refactor (icon-xref :justify-content-column-end-refactor)) +(def justify-content-column-evenly-refactor (icon-xref :justify-content-column-evenly-refactor)) +(def justify-content-column-start-refactor (icon-xref :justify-content-column-start-refactor)) +(def justify-content-row-center-refactor (icon-xref :justify-content-row-center-refactor)) +(def justify-content-row-end-refactor (icon-xref :justify-content-row-end-refactor)) +(def justify-content-row-start-refactor (icon-xref :justify-content-row-start-refactor)) +(def justify-content-row-between-refactor (icon-xref :justify-content-row-between-refactor)) +(def justify-content-row-around-refactor (icon-xref :justify-content-row-around-refactor)) +(def justify-content-row-evenly-refactor (icon-xref :justify-content-row-evenly-refactor)) (def lock-refactor (icon-xref :lock-refactor)) (def library-refactor (icon-xref :library-refactor)) (def margin-bottom-refactor (icon-xref :margin-bottom-refactor)) (def margin-left-refactor (icon-xref :margin-left-refactor)) (def margin-left-right-refactor (icon-xref :margin-left-right-refactor)) +(def margin-refactor (icon-xref :margin-refactor)) (def margin-right-refactor (icon-xref :margin-right-refactor)) (def margin-top-refactor (icon-xref :margin-top-refactor)) (def margin-top-bottom-refactor (icon-xref :margin-top-bottom-refactor)) diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs index 424887094..a8f6b91c5 100644 --- a/frontend/src/app/main/ui/measurements.cljs +++ b/frontend/src/app/main/ui/measurements.cljs @@ -306,7 +306,7 @@ axis (:resize-axis rect-data) on-pointer-down - (mf/use-callback + (mf/use-fn (mf/deps frame-id rect-data padding-num) (fn [event] (dom/capture-pointer event) @@ -315,7 +315,7 @@ (reset! original-value (:initial-value rect-data)))) on-lost-pointer-capture - (mf/use-callback + (mf/use-fn (mf/deps frame-id padding-num padding) (fn [event] (dom/release-pointer event) @@ -325,7 +325,7 @@ (st/emit! (dwm/apply-modifiers)))) on-pointer-move - (mf/use-callback + (mf/use-fn (mf/deps frame-id padding-num padding hover-all? hover-v? hover-h?) (fn [event] (let [pos (dom/get-client-position event)] @@ -466,7 +466,7 @@ axis (:resize-axis rect-data) on-pointer-down - (mf/use-callback + (mf/use-fn (mf/deps shape-id margin-num margin) (fn [event] (dom/capture-pointer event) @@ -475,7 +475,7 @@ (reset! original-value (:initial-value rect-data)))) on-lost-pointer-capture - (mf/use-callback + (mf/use-fn (mf/deps shape-id margin-num margin) (fn [event] (dom/release-pointer event) @@ -485,7 +485,7 @@ (st/emit! (dwm/apply-modifiers)))) on-pointer-move - (mf/use-callback + (mf/use-fn (mf/deps shape-id margin-num margin hover-all? hover-v? hover-h?) (fn [event] (let [pos (dom/get-client-position event)] @@ -618,7 +618,7 @@ axis (:resize-axis rect-data) on-pointer-down - (mf/use-callback + (mf/use-fn (mf/deps frame-id gap-type gap) (fn [event] (dom/capture-pointer event) @@ -627,7 +627,7 @@ (reset! original-value (:initial-value rect-data)))) on-lost-pointer-capture - (mf/use-callback + (mf/use-fn (mf/deps frame-id gap-type gap) (fn [event] (dom/release-pointer event) @@ -637,7 +637,7 @@ (st/emit! (dwm/apply-modifiers)))) on-pointer-move - (mf/use-callback + (mf/use-fn (mf/deps frame-id gap-type gap) (fn [event] (let [pos (dom/get-client-position event)] diff --git a/frontend/src/app/main/ui/modal.css.json b/frontend/src/app/main/ui/modal.css.json index f20c6c84a..412bd3e46 100644 --- a/frontend/src/app/main/ui/modal.css.json +++ b/frontend/src/app/main/ui/modal.css.json @@ -1 +1 @@ -{"button-primary":"ui_modal_button-primary_f2CEg","button-secondary":"ui_modal_button-secondary_1wH6N","button-tertiary":"ui_modal_button-tertiary_vNip8","button-warning":"ui_modal_button-warning_1e-75","button-disabled":"ui_modal_button-disabled_n6i2O","button-tag":"ui_modal_button-tag_pLwhJ","button-icon":"ui_modal_button-icon_aRFFQ","button-icon-small":"ui_modal_button-icon-small_HY5lR","link":"ui_modal_link_Uw-ft","asset-element":"ui_modal_asset-element_43PW9","new-scrollbar":"ui_modal_new-scrollbar_zPDI7","modal-wrapper":"ui_modal_modal-wrapper_NLvfo","menu-dropdown":"ui_modal_menu-dropdown_G1sWX","menu-item":"ui_modal_menu-item_5LLIh","shortcut":"ui_modal_shortcut_6E-Cq","shortcut-key":"ui_modal_shortcut-key_GaCtX","user-icon":"ui_modal_user-icon_ZrqXs","spin-animation":"ui_modal_spin-animation_yREim"} \ No newline at end of file +{"button-primary":"ui_modal_button-primary_f2CEg","button-secondary":"ui_modal_button-secondary_1wH6N","button-tertiary":"ui_modal_button-tertiary_vNip8","button-radio":"ui_modal_button-radio_ezjbW","button-warning":"ui_modal_button-warning_1e-75","button-disabled":"ui_modal_button-disabled_n6i2O","button-tag":"ui_modal_button-tag_pLwhJ","button-icon":"ui_modal_button-icon_aRFFQ","button-icon-small":"ui_modal_button-icon-small_HY5lR","link":"ui_modal_link_Uw-ft","asset-element":"ui_modal_asset-element_43PW9","input-element":"ui_modal_input-element_y0flJ","new-scrollbar":"ui_modal_new-scrollbar_zPDI7","modal-wrapper":"ui_modal_modal-wrapper_NLvfo","menu-dropdown":"ui_modal_menu-dropdown_G1sWX","menu-item":"ui_modal_menu-item_5LLIh","shortcut":"ui_modal_shortcut_6E-Cq","shortcut-key":"ui_modal_shortcut-key_GaCtX","user-icon":"ui_modal_user-icon_ZrqXs","spin-animation":"ui_modal_spin-animation_yREim"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace.css.json b/frontend/src/app/main/ui/workspace.css.json index 5bb7ca717..7f5a968d7 100644 --- a/frontend/src/app/main/ui/workspace.css.json +++ b/frontend/src/app/main/ui/workspace.css.json @@ -1 +1 @@ -{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-warning":"ui_workspace_button-warning_4iQFw","button-disabled":"ui_workspace_button-disabled_--5pl","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","link":"ui_workspace_link_WhQFh","asset-element":"ui_workspace_asset-element_LTbhl","new-scrollbar":"ui_workspace_new-scrollbar_tkRN6","workspace":"ui_workspace_workspace_xutJr","menu-dropdown":"ui_workspace_menu-dropdown_C5UnV","menu-item":"ui_workspace_menu-item_JOhDR","shortcut":"ui_workspace_shortcut_ksV9H","shortcut-key":"ui_workspace_shortcut-key_Npd85","user-icon":"ui_workspace_user-icon_-DyAD","workspace-loader":"ui_workspace_workspace-loader_INSav","spin-animation":"ui_workspace_spin-animation_kD9o3"} \ No newline at end of file +{"button-primary":"ui_workspace_button-primary_FZJ-T","button-secondary":"ui_workspace_button-secondary_oDzCJ","button-tertiary":"ui_workspace_button-tertiary_LVpr3","button-radio":"ui_workspace_button-radio_PMFXa","button-warning":"ui_workspace_button-warning_4iQFw","button-disabled":"ui_workspace_button-disabled_--5pl","button-tag":"ui_workspace_button-tag_cU1Th","button-icon":"ui_workspace_button-icon_L5y8h","button-icon-small":"ui_workspace_button-icon-small_Ppp3W","link":"ui_workspace_link_WhQFh","asset-element":"ui_workspace_asset-element_LTbhl","input-element":"ui_workspace_input-element_Ohf9O","new-scrollbar":"ui_workspace_new-scrollbar_tkRN6","workspace":"ui_workspace_workspace_xutJr","menu-dropdown":"ui_workspace_menu-dropdown_C5UnV","menu-item":"ui_workspace_menu-item_JOhDR","shortcut":"ui_workspace_shortcut_ksV9H","shortcut-key":"ui_workspace_shortcut-key_Npd85","user-icon":"ui_workspace_user-icon_-DyAD","workspace-loader":"ui_workspace_workspace-loader_INSav","spin-animation":"ui_workspace_spin-animation_kD9o3"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette.css.json b/frontend/src/app/main/ui/workspace/color_palette.css.json index 4240c16ff..fe4d2ce56 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-warning":"workspace_color_palette_button-warning_IHf7v","button-disabled":"workspace_color_palette_button-disabled_k7M8X","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","link":"workspace_color_palette_link_EW9wm","asset-element":"workspace_color_palette_asset-element_3Q2Mp","new-scrollbar":"workspace_color_palette_new-scrollbar_ChE0u","menu-dropdown":"workspace_color_palette_menu-dropdown_VygMh","menu-item":"workspace_color_palette_menu-item_y2vU0","shortcut":"workspace_color_palette_shortcut_CFccJ","shortcut-key":"workspace_color_palette_shortcut-key_5etoa","user-icon":"workspace_color_palette_user-icon_eRKoT","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0","spin-animation":"workspace_color_palette_spin-animation_LKFRB"} \ No newline at end of file +{"button-primary":"workspace_color_palette_button-primary_0d2e2","button-secondary":"workspace_color_palette_button-secondary_C8qJL","button-tertiary":"workspace_color_palette_button-tertiary_X6-9C","button-radio":"workspace_color_palette_button-radio_6DOOO","button-warning":"workspace_color_palette_button-warning_IHf7v","button-disabled":"workspace_color_palette_button-disabled_k7M8X","button-tag":"workspace_color_palette_button-tag_GtZK2","button-icon":"workspace_color_palette_button-icon_-tBR6","color-palette":"workspace_color_palette_color-palette_hfJPA","left-arrow":"workspace_color_palette_left-arrow_PK7sj","right-arrow":"workspace_color_palette_right-arrow_swpS9","button-icon-small":"workspace_color_palette_button-icon-small_RrGTg","link":"workspace_color_palette_link_EW9wm","asset-element":"workspace_color_palette_asset-element_3Q2Mp","input-element":"workspace_color_palette_input-element_j0uTG","new-scrollbar":"workspace_color_palette_new-scrollbar_ChE0u","menu-dropdown":"workspace_color_palette_menu-dropdown_VygMh","menu-item":"workspace_color_palette_menu-item_y2vU0","shortcut":"workspace_color_palette_shortcut_CFccJ","shortcut-key":"workspace_color_palette_shortcut-key_5etoa","user-icon":"workspace_color_palette_user-icon_eRKoT","disabled":"workspace_color_palette_disabled_bz-he","color-palette-content":"workspace_color_palette_color-palette-content_okg18","color-palette-inside":"workspace_color_palette_color-palette-inside_dCIeR","color-cell":"workspace_color_palette_color-cell_ITDgl","is-not-library-color":"workspace_color_palette_is-not-library-color_EqCM6","no-text":"workspace_color_palette_no-text_QMPK0","spin-animation":"workspace_color_palette_spin-animation_LKFRB"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss index cb3a2b46a..3a273d6e6 100644 --- a/frontend/src/app/main/ui/workspace/color_palette.scss +++ b/frontend/src/app/main/ui/workspace/color_palette.scss @@ -21,6 +21,7 @@ z-index: $z-index-4; svg { @extend .button-icon; + stroke: var(--icon-foreground); } &::after { content: ""; diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json index b132caf23..960478602 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-warning":"workspace_color_palette_ctx_menu_button-warning_xgQCn","button-disabled":"workspace_color_palette_ctx_menu_button-disabled_PnBDO","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","link":"workspace_color_palette_ctx_menu_link_ugtX1","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","new-scrollbar":"workspace_color_palette_ctx_menu_new-scrollbar_0BINh","menu-dropdown":"workspace_color_palette_ctx_menu_menu-dropdown_3nduz","menu-item":"workspace_color_palette_ctx_menu_menu-item_hVz--","shortcut":"workspace_color_palette_ctx_menu_shortcut_jqDHK","shortcut-key":"workspace_color_palette_ctx_menu_shortcut-key_VPYPv","user-icon":"workspace_color_palette_ctx_menu_user-icon_wv-bR","lib-name-wrapper":"workspace_color_palette_ctx_menu_lib-name-wrapper_-F9D4","lib-name":"workspace_color_palette_ctx_menu_lib-name_VPSM1","lib-num":"workspace_color_palette_ctx_menu_lib-num_neRQe","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL","spin-animation":"workspace_color_palette_ctx_menu_spin-animation_WUYef"} \ No newline at end of file +{"button-primary":"workspace_color_palette_ctx_menu_button-primary_2ka4z","button-secondary":"workspace_color_palette_ctx_menu_button-secondary_jfajf","button-tertiary":"workspace_color_palette_ctx_menu_button-tertiary_NLctS","button-radio":"workspace_color_palette_ctx_menu_button-radio_PDiB3","button-warning":"workspace_color_palette_ctx_menu_button-warning_xgQCn","button-disabled":"workspace_color_palette_ctx_menu_button-disabled_PnBDO","button-tag":"workspace_color_palette_ctx_menu_button-tag_GN3ad","button-icon":"workspace_color_palette_ctx_menu_button-icon_cCaY2","button-icon-small":"workspace_color_palette_ctx_menu_button-icon-small_-knT4","palette-menu":"workspace_color_palette_ctx_menu_palette-menu_Vrjfy","palette-library":"workspace_color_palette_ctx_menu_palette-library_0LFV5","selected":"workspace_color_palette_ctx_menu_selected_lfchf","option-wrapper":"workspace_color_palette_ctx_menu_option-wrapper_st9Cq","library-name":"workspace_color_palette_ctx_menu_library-name_BL8b8","icon-wrapper":"workspace_color_palette_ctx_menu_icon-wrapper_v8-ys","recent-colors":"workspace_color_palette_ctx_menu_recent-colors_Q4fss","file-library":"workspace_color_palette_ctx_menu_file-library_8qsbr","link":"workspace_color_palette_ctx_menu_link_ugtX1","asset-element":"workspace_color_palette_ctx_menu_asset-element_pV16m","input-element":"workspace_color_palette_ctx_menu_input-element_Tv2e2","new-scrollbar":"workspace_color_palette_ctx_menu_new-scrollbar_0BINh","menu-dropdown":"workspace_color_palette_ctx_menu_menu-dropdown_3nduz","menu-item":"workspace_color_palette_ctx_menu_menu-item_hVz--","shortcut":"workspace_color_palette_ctx_menu_shortcut_jqDHK","shortcut-key":"workspace_color_palette_ctx_menu_shortcut-key_VPYPv","user-icon":"workspace_color_palette_ctx_menu_user-icon_wv-bR","lib-name-wrapper":"workspace_color_palette_ctx_menu_lib-name-wrapper_-F9D4","lib-name":"workspace_color_palette_ctx_menu_lib-name_VPSM1","lib-num":"workspace_color_palette_ctx_menu_lib-num_neRQe","color-sample":"workspace_color_palette_ctx_menu_color-sample_jQUGL","spin-animation":"workspace_color_palette_ctx_menu_spin-animation_WUYef"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss index 74c2f59f1..046b76b6c 100644 --- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss @@ -54,6 +54,7 @@ svg { @include flexCenter; @extend .button-icon-small; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/workspace/context_menu.css.json b/frontend/src/app/main/ui/workspace/context_menu.css.json index 203bdc2e1..ecd3e5e10 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.css.json +++ b/frontend/src/app/main/ui/workspace/context_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-warning":"workspace_context_menu_button-warning_JWgIG","button-disabled":"workspace_context_menu_button-disabled_qth6b","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","link":"workspace_context_menu_link_Z7rEE","asset-element":"workspace_context_menu_asset-element_jkrbj","new-scrollbar":"workspace_context_menu_new-scrollbar_xGQzu","menu-dropdown":"workspace_context_menu_menu-dropdown_UF-Oq","menu-item":"workspace_context_menu_menu-item_uHHBH","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","user-icon":"workspace_context_menu_user-icon_pLDVU","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2","spin-animation":"workspace_context_menu_spin-animation_Y8j2J"} \ No newline at end of file +{"button-primary":"workspace_context_menu_button-primary_d6q-P","button-secondary":"workspace_context_menu_button-secondary_bIdqe","button-tertiary":"workspace_context_menu_button-tertiary_vGSns","button-radio":"workspace_context_menu_button-radio_k295n","button-warning":"workspace_context_menu_button-warning_JWgIG","button-disabled":"workspace_context_menu_button-disabled_qth6b","button-tag":"workspace_context_menu_button-tag_rOUbd","button-icon":"workspace_context_menu_button-icon_tXvxe","button-icon-small":"workspace_context_menu_button-icon-small_c0rVU","workspace-context-menu":"workspace_context_menu_workspace-context-menu_2NyvR","icon-menu-item":"workspace_context_menu_icon-menu-item_P3-bA","shape-icon":"workspace_context_menu_shape-icon_xx1Ll","workspace-context-submenu":"workspace_context_menu_workspace-context-submenu_BUNLt","selected-icon":"workspace_context_menu_selected-icon_pZqBp","context-menu-item":"workspace_context_menu_context-menu-item_Tx-Ty","submenu-icon":"workspace_context_menu_submenu-icon_JwYm8","link":"workspace_context_menu_link_Z7rEE","asset-element":"workspace_context_menu_asset-element_jkrbj","input-element":"workspace_context_menu_input-element_Y-yxU","new-scrollbar":"workspace_context_menu_new-scrollbar_xGQzu","menu-dropdown":"workspace_context_menu_menu-dropdown_UF-Oq","menu-item":"workspace_context_menu_menu-item_uHHBH","shortcut":"workspace_context_menu_shortcut_rypUe","shortcut-key":"workspace_context_menu_shortcut-key_3rF3t","user-icon":"workspace_context_menu_user-icon_pLDVU","separator":"workspace_context_menu_separator_E9-aR","title":"workspace_context_menu_title_P8iFL","icon-wrapper":"workspace_context_menu_icon-wrapper_n7VO2","spin-animation":"workspace_context_menu_spin-animation_Y8j2J"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_header.css.json b/frontend/src/app/main/ui/workspace/left_header.css.json index 147eb759f..857998727 100644 --- a/frontend/src/app/main/ui/workspace/left_header.css.json +++ b/frontend/src/app/main/ui/workspace/left_header.css.json @@ -1 +1 @@ -{"button-primary":"workspace_left_header_button-primary_lyfQC","button-secondary":"workspace_left_header_button-secondary_MfwN-","button-tertiary":"workspace_left_header_button-tertiary_fJlY9","workspace-header-left":"workspace_left_header_workspace-header-left_HdnMy","menu-btn":"workspace_left_header_menu-btn_fdwlZ","button-warning":"workspace_left_header_button-warning_PoOGL","button-disabled":"workspace_left_header_button-disabled_k7pJP","button-tag":"workspace_left_header_button-tag_H77gD","button-icon":"workspace_left_header_button-icon_DD7ag","menu":"workspace_left_header_menu_yxGIs","menu-item":"workspace_left_header_menu-item_1wh4b","open-arrow":"workspace_left_header_open-arrow_bcWEe","sub-menu":"workspace_left_header_sub-menu_MMoV5","submenu-item":"workspace_left_header_submenu-item_ZKiY7","button-icon-small":"workspace_left_header_button-icon-small_gYHAj","link":"workspace_left_header_link_E6JUR","asset-element":"workspace_left_header_asset-element_iYXcu","new-scrollbar":"workspace_left_header_new-scrollbar_dOPeK","menu-dropdown":"workspace_left_header_menu-dropdown_3LtHG","shortcut":"workspace_left_header_shortcut_7lGBb","shortcut-key":"workspace_left_header_shortcut-key_31FAP","user-icon":"workspace_left_header_user-icon_ektpZ","main-icon":"workspace_left_header_main-icon_qnAm2","project-tree":"workspace_left_header_project-tree_WoAdo","project-name":"workspace_left_header_project-name_petDL","file-name":"workspace_left_header_file-name_QiMm1","file-name-input":"workspace_left_header_file-name-input_yjzqX","shared-badge":"workspace_left_header_shared-badge_N-vOg","separator":"workspace_left_header_separator_TyuDr","file":"workspace_left_header_file_2A0Xu","edit":"workspace_left_header_edit_XN7-M","view":"workspace_left_header_view_IsL62","preferences":"workspace_left_header_preferences_R20sp","help-info":"workspace_left_header_help-info_NVGJQ","spin-animation":"workspace_left_header_spin-animation_buAeE"} \ No newline at end of file +{"button-primary":"workspace_left_header_button-primary_lyfQC","button-secondary":"workspace_left_header_button-secondary_MfwN-","button-tertiary":"workspace_left_header_button-tertiary_fJlY9","workspace-header-left":"workspace_left_header_workspace-header-left_HdnMy","menu-btn":"workspace_left_header_menu-btn_fdwlZ","button-radio":"workspace_left_header_button-radio_3XqbR","button-warning":"workspace_left_header_button-warning_PoOGL","button-disabled":"workspace_left_header_button-disabled_k7pJP","button-tag":"workspace_left_header_button-tag_H77gD","button-icon":"workspace_left_header_button-icon_DD7ag","menu":"workspace_left_header_menu_yxGIs","menu-item":"workspace_left_header_menu-item_1wh4b","open-arrow":"workspace_left_header_open-arrow_bcWEe","sub-menu":"workspace_left_header_sub-menu_MMoV5","submenu-item":"workspace_left_header_submenu-item_ZKiY7","button-icon-small":"workspace_left_header_button-icon-small_gYHAj","link":"workspace_left_header_link_E6JUR","asset-element":"workspace_left_header_asset-element_iYXcu","input-element":"workspace_left_header_input-element_zkT-i","new-scrollbar":"workspace_left_header_new-scrollbar_dOPeK","menu-dropdown":"workspace_left_header_menu-dropdown_3LtHG","shortcut":"workspace_left_header_shortcut_7lGBb","shortcut-key":"workspace_left_header_shortcut-key_31FAP","user-icon":"workspace_left_header_user-icon_ektpZ","main-icon":"workspace_left_header_main-icon_qnAm2","project-tree":"workspace_left_header_project-tree_WoAdo","project-name":"workspace_left_header_project-name_petDL","file-name":"workspace_left_header_file-name_QiMm1","file-name-input":"workspace_left_header_file-name-input_yjzqX","shared-badge":"workspace_left_header_shared-badge_N-vOg","separator":"workspace_left_header_separator_TyuDr","file":"workspace_left_header_file_2A0Xu","edit":"workspace_left_header_edit_XN7-M","view":"workspace_left_header_view_IsL62","preferences":"workspace_left_header_preferences_R20sp","help-info":"workspace_left_header_help-info_NVGJQ","spin-animation":"workspace_left_header_spin-animation_buAeE"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss index d7318bbe1..1a9a5606e 100644 --- a/frontend/src/app/main/ui/workspace/left_header.scss +++ b/frontend/src/app/main/ui/workspace/left_header.scss @@ -78,6 +78,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } .menu { @@ -106,6 +107,7 @@ @include flexCenter; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } &:hover { diff --git a/frontend/src/app/main/ui/workspace/left_toolbar.css.json b/frontend/src/app/main/ui/workspace/left_toolbar.css.json index b9d59f975..062cde6f6 100644 --- a/frontend/src/app/main/ui/workspace/left_toolbar.css.json +++ b/frontend/src/app/main/ui/workspace/left_toolbar.css.json @@ -1 +1 @@ -{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-warning":"workspace_left_toolbar_button-warning_wM68W","button-disabled":"workspace_left_toolbar_button-disabled_-5ubI","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","link":"workspace_left_toolbar_link_dbtrr","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"} \ No newline at end of file +{"button-primary":"workspace_left_toolbar_button-primary_cOfI2","button-secondary":"workspace_left_toolbar_button-secondary_yztFQ","button-tertiary":"workspace_left_toolbar_button-tertiary_ATxjs","main-toolbar":"workspace_left_toolbar_main-toolbar_QN5ne","main-toolbar-options":"workspace_left_toolbar_main-toolbar-options_xqFsj","button-radio":"workspace_left_toolbar_button-radio_JIUuN","button-warning":"workspace_left_toolbar_button-warning_wM68W","button-disabled":"workspace_left_toolbar_button-disabled_-5ubI","button-tag":"workspace_left_toolbar_button-tag_uOY3P","button-icon":"workspace_left_toolbar_button-icon_QXZDp","button-icon-small":"workspace_left_toolbar_button-icon-small_p617J","link":"workspace_left_toolbar_link_dbtrr","asset-element":"workspace_left_toolbar_asset-element_vwVhJ","input-element":"workspace_left_toolbar_input-element_Lk8B-","new-scrollbar":"workspace_left_toolbar_new-scrollbar_CDU0n","menu-dropdown":"workspace_left_toolbar_menu-dropdown_ui5fQ","menu-item":"workspace_left_toolbar_menu-item_chrVQ","shortcut":"workspace_left_toolbar_shortcut_9jPGH","shortcut-key":"workspace_left_toolbar_shortcut-key_MUfgG","user-icon":"workspace_left_toolbar_user-icon_C8ZY7","toolbar-handler":"workspace_left_toolbar_toolbar-handler_VfijE","toolbar-handler-btn":"workspace_left_toolbar_toolbar-handler-btn_vV1IT","hidden-toolbar":"workspace_left_toolbar_hidden-toolbar_w7tu-","main-toolbar-panels":"workspace_left_toolbar_main-toolbar-panels_zT3qk","spin-animation":"workspace_left_toolbar_spin-animation_8Q3nv"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index 937088959..a7f2b83ef 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -248,7 +248,7 @@ [:div {:class (stl/css :section)} [:& title-bar {:collapsable? false :title (tr "workspace.libraries.in-this-file") - :klass :title-spacing-lib}] + :class (stl/css :title-spacing-lib)}] [:div {:class (stl/css :section-list)} [:div {:class (stl/css :section-list-item)} @@ -294,7 +294,7 @@ [:div {:class (stl/css :section)} [:& title-bar {:collapsable? false :title (tr "workspace.libraries.shared-libraries") - :klass :title-spacing-lib}] + :class (stl/css :title-spacing-lib)}] [:div {:class (stl/css :libraries-search)} [:& search-bar {:on-change change-search-term :value search-term diff --git a/frontend/src/app/main/ui/workspace/libraries.css.json b/frontend/src/app/main/ui/workspace/libraries.css.json index 766ab314c..4296ab6cd 100644 --- a/frontend/src/app/main/ui/workspace/libraries.css.json +++ b/frontend/src/app/main/ui/workspace/libraries.css.json @@ -1 +1 @@ -{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","section-list-shared":"workspace_libraries_section-list-shared_XZE10","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","item-button":"workspace_libraries_item-button_dKUeX","item-button-shared":"workspace_libraries_item-button-shared_hxOmT","button-tertiary":"workspace_libraries_button-tertiary_C54rH","close":"workspace_libraries_close_bED7B","button-warning":"workspace_libraries_button-warning_xKJqf","item-update":"workspace_libraries_item-update_GklIE","button-disabled":"workspace_libraries_button-disabled_R7I-V","disabled":"workspace_libraries_disabled_Y5O-4","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","link":"workspace_libraries_link_a3v8a","libraries-updates-see-all":"workspace_libraries_libraries-updates-see-all_-G5EO","asset-element":"workspace_libraries_asset-element_-FuJl","new-scrollbar":"workspace_libraries_new-scrollbar_9V-Nb","menu-dropdown":"workspace_libraries_menu-dropdown_frrTQ","menu-item":"workspace_libraries_menu-item_1PSqe","shortcut":"workspace_libraries_shortcut_ZBbd3","shortcut-key":"workspace_libraries_shortcut-key_qBs5D","user-icon":"workspace_libraries_user-icon_IjCsd","modal-title":"workspace_libraries_modal-title_Z1xKU","libraries-header":"workspace_libraries_libraries-header_-W6bJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","libraries-updates":"workspace_libraries_libraries-updates_RLtH8","libraries-updates-item":"workspace_libraries_libraries-updates-item_QwZMY","name-block":"workspace_libraries_name-block_RcVh4","ellipsis":"workspace_libraries_ellipsis_I5JtE","element-count":"workspace_libraries_element-count_07SV2","spin-animation":"workspace_libraries_spin-animation_mW-An"} \ No newline at end of file +{"button-primary":"workspace_libraries_button-primary_Hsioh","modal-overlay":"workspace_libraries_modal-overlay_qC-df","modal-dialog":"workspace_libraries_modal-dialog_Kj293","modal-content":"workspace_libraries_modal-content_4EVEQ","libraries-content":"workspace_libraries_libraries-content_ycQdm","section":"workspace_libraries_section_SUsgi","section-list":"workspace_libraries_section-list_lGSrM","section-list-item":"workspace_libraries_section-list-item_hwASN","item-publish":"workspace_libraries_item-publish_ZMopF","item-unpublish":"workspace_libraries_item-unpublish_1seca","section-list-shared":"workspace_libraries_section-list-shared_XZE10","updates-content":"workspace_libraries_updates-content_lqMoE","button-secondary":"workspace_libraries_button-secondary_l5M0x","item-button":"workspace_libraries_item-button_dKUeX","item-button-shared":"workspace_libraries_item-button-shared_hxOmT","button-tertiary":"workspace_libraries_button-tertiary_C54rH","close":"workspace_libraries_close_bED7B","button-radio":"workspace_libraries_button-radio_e8zGB","button-warning":"workspace_libraries_button-warning_xKJqf","item-update":"workspace_libraries_item-update_GklIE","button-disabled":"workspace_libraries_button-disabled_R7I-V","disabled":"workspace_libraries_disabled_Y5O-4","button-tag":"workspace_libraries_button-tag_wAh-s","button-icon":"workspace_libraries_button-icon_kxS7q","item-button-icon":"workspace_libraries_item-button-icon_CeJWg","button-icon-small":"workspace_libraries_button-icon-small_Q9eo3","section-list-empty":"workspace_libraries_section-list-empty_mOKkJ","libraries-search":"workspace_libraries_libraries-search_JS70w","search-icon":"workspace_libraries_search-icon_y7N9S","link":"workspace_libraries_link_a3v8a","libraries-updates-see-all":"workspace_libraries_libraries-updates-see-all_-G5EO","asset-element":"workspace_libraries_asset-element_-FuJl","input-element":"workspace_libraries_input-element_Otka8","new-scrollbar":"workspace_libraries_new-scrollbar_9V-Nb","menu-dropdown":"workspace_libraries_menu-dropdown_frrTQ","menu-item":"workspace_libraries_menu-item_1PSqe","shortcut":"workspace_libraries_shortcut_ZBbd3","shortcut-key":"workspace_libraries_shortcut-key_qBs5D","user-icon":"workspace_libraries_user-icon_IjCsd","modal-title":"workspace_libraries_modal-title_Z1xKU","libraries-header":"workspace_libraries_libraries-header_-W6bJ","title-spacing-lib":"workspace_libraries_title-spacing-lib_A-arJ","item-name":"workspace_libraries_item-name_Zjbsw","item-contents":"workspace_libraries_item-contents_EPTF6","section-title":"workspace_libraries_section-title_7rsm7","libraries-updates":"workspace_libraries_libraries-updates_RLtH8","libraries-updates-item":"workspace_libraries_libraries-updates-item_QwZMY","name-block":"workspace_libraries_name-block_RcVh4","ellipsis":"workspace_libraries_ellipsis_I5JtE","element-count":"workspace_libraries_element-count_07SV2","spin-animation":"workspace_libraries_spin-animation_mW-An"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss index 42f8a5310..cdee7b092 100644 --- a/frontend/src/app/main/ui/workspace/libraries.scss +++ b/frontend/src/app/main/ui/workspace/libraries.scss @@ -36,6 +36,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } .modal-title { @@ -60,7 +61,7 @@ display: flex; flex-direction: column; height: calc(100% - $s-12); - :global(.title-spacing-lib) { + .title-spacing-lib { margin: 0 0 $s-24 calc(-1 * $s-8); } .section-list, @@ -119,6 +120,7 @@ margin-right: $s-2; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } .item-button-shared { @@ -130,6 +132,7 @@ height: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } } @@ -150,6 +153,7 @@ width: $s-20; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } @@ -159,6 +163,7 @@ svg { @extend .button-icon-small; + stroke: var(--icon-foreground); width: $s-16; height: $s-16; } diff --git a/frontend/src/app/main/ui/workspace/palette.css.json b/frontend/src/app/main/ui/workspace/palette.css.json index 640b487be..5e5190413 100644 --- a/frontend/src/app/main/ui/workspace/palette.css.json +++ b/frontend/src/app/main/ui/workspace/palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-warning":"workspace_palette_button-warning_uC7fd","button-disabled":"workspace_palette_button-disabled_0dQDS","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","link":"workspace_palette_link_UPU5s","asset-element":"workspace_palette_asset-element_4bXi3","new-scrollbar":"workspace_palette_new-scrollbar_3WWqd","menu-dropdown":"workspace_palette_menu-dropdown_2S40O","menu-item":"workspace_palette_menu-item_qSC6U","shortcut":"workspace_palette_shortcut_mZ4Tp","shortcut-key":"workspace_palette_shortcut-key_EeW-I","user-icon":"workspace_palette_user-icon_8VKTf","palette-wrapper":"workspace_palette_palette-wrapper_ciUIx","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0","spin-animation":"workspace_palette_spin-animation_ezmwC"} \ No newline at end of file +{"button-primary":"workspace_palette_button-primary_zEUyD","button-secondary":"workspace_palette_button-secondary_ksr24","button-tertiary":"workspace_palette_button-tertiary_91YQK","palettes":"workspace_palette_palettes_JHGUw","palette-actions":"workspace_palette_palette-actions_2GwR6","palette-btn-list":"workspace_palette_palette-btn-list_x7gPS","palette-item":"workspace_palette_palette-item_50uj6","palette-btn":"workspace_palette_palette-btn_kP66y","button-radio":"workspace_palette_button-radio_zpcxS","button-warning":"workspace_palette_button-warning_uC7fd","button-disabled":"workspace_palette_button-disabled_0dQDS","button-tag":"workspace_palette_button-tag_S9v-Z","button-icon":"workspace_palette_button-icon_pmEDv","button-icon-small":"workspace_palette_button-icon-small_vbLDq","link":"workspace_palette_link_UPU5s","asset-element":"workspace_palette_asset-element_4bXi3","input-element":"workspace_palette_input-element_z1Q4v","new-scrollbar":"workspace_palette_new-scrollbar_3WWqd","menu-dropdown":"workspace_palette_menu-dropdown_2S40O","menu-item":"workspace_palette_menu-item_qSC6U","shortcut":"workspace_palette_shortcut_mZ4Tp","shortcut-key":"workspace_palette_shortcut-key_EeW-I","user-icon":"workspace_palette_user-icon_8VKTf","palette-wrapper":"workspace_palette_palette-wrapper_ciUIx","wide":"workspace_palette_wide_3G4e1","mid-palette":"workspace_palette_mid-palette_rGR5I","small-palette":"workspace_palette_small-palette_18Otk","resize-area":"workspace_palette_resize-area_0LwVu","selected":"workspace_palette_selected_Z6BFo","palette":"workspace_palette_palette_eqp3q","handler":"workspace_palette_handler_4JV0J","handler-btn":"workspace_palette_handler-btn_7lnlF","hidden-bts":"workspace_palette_hidden-bts_mhbc0","spin-animation":"workspace_palette_spin-animation_ezmwC"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/palette.scss b/frontend/src/app/main/ui/workspace/palette.scss index d2311c7d8..666a933ac 100644 --- a/frontend/src/app/main/ui/workspace/palette.scss +++ b/frontend/src/app/main/ui/workspace/palette.scss @@ -77,6 +77,7 @@ padding: 0; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } &.selected { border: $s-2 solid var(--palette-btn-border-color-selected); @@ -104,6 +105,7 @@ z-index: $z-index-2; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } .palette { diff --git a/frontend/src/app/main/ui/workspace/presence.css.json b/frontend/src/app/main/ui/workspace/presence.css.json index 9c83ec889..c1d582af1 100644 --- a/frontend/src/app/main/ui/workspace/presence.css.json +++ b/frontend/src/app/main/ui/workspace/presence.css.json @@ -1 +1 @@ -{"button-primary":"workspace_presence_button-primary_As6Ix","button-secondary":"workspace_presence_button-secondary_wChpa","button-tertiary":"workspace_presence_button-tertiary_XLZQY","button-warning":"workspace_presence_button-warning_D0Gxb","button-disabled":"workspace_presence_button-disabled_oxzIp","button-tag":"workspace_presence_button-tag_Hp7-u","button-icon":"workspace_presence_button-icon_wQdM5","button-icon-small":"workspace_presence_button-icon-small_cxrR5","link":"workspace_presence_link_vEQGI","asset-element":"workspace_presence_asset-element_ALwzT","new-scrollbar":"workspace_presence_new-scrollbar_u3DSM","menu-dropdown":"workspace_presence_menu-dropdown_pc2zP","menu-item":"workspace_presence_menu-item_QIKwl","shortcut":"workspace_presence_shortcut_nbmw6","shortcut-key":"workspace_presence_shortcut-key_w0Pys","user-icon":"workspace_presence_user-icon_hDghc","active-users":"workspace_presence_active-users_wkbu6","active-users-list":"workspace_presence_active-users-list_VzK-2","session-icon":"workspace_presence_session-icon_lzaZ6","active-users-opened":"workspace_presence_active-users-opened_EWyvR","users-num":"workspace_presence_users-num_2zRDj","spin-animation":"workspace_presence_spin-animation_g1IPu"} \ No newline at end of file +{"button-primary":"workspace_presence_button-primary_As6Ix","button-secondary":"workspace_presence_button-secondary_wChpa","button-tertiary":"workspace_presence_button-tertiary_XLZQY","button-radio":"workspace_presence_button-radio_2Zu0B","button-warning":"workspace_presence_button-warning_D0Gxb","button-disabled":"workspace_presence_button-disabled_oxzIp","button-tag":"workspace_presence_button-tag_Hp7-u","button-icon":"workspace_presence_button-icon_wQdM5","button-icon-small":"workspace_presence_button-icon-small_cxrR5","link":"workspace_presence_link_vEQGI","asset-element":"workspace_presence_asset-element_ALwzT","input-element":"workspace_presence_input-element_RNUbU","new-scrollbar":"workspace_presence_new-scrollbar_u3DSM","menu-dropdown":"workspace_presence_menu-dropdown_pc2zP","menu-item":"workspace_presence_menu-item_QIKwl","shortcut":"workspace_presence_shortcut_nbmw6","shortcut-key":"workspace_presence_shortcut-key_w0Pys","user-icon":"workspace_presence_user-icon_hDghc","active-users":"workspace_presence_active-users_wkbu6","active-users-list":"workspace_presence_active-users-list_VzK-2","session-icon":"workspace_presence_session-icon_lzaZ6","active-users-opened":"workspace_presence_active-users-opened_EWyvR","users-num":"workspace_presence_users-num_2zRDj","spin-animation":"workspace_presence_spin-animation_g1IPu"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/right_header.css.json b/frontend/src/app/main/ui/workspace/right_header.css.json index 0deb2e067..89ebf82d0 100644 --- a/frontend/src/app/main/ui/workspace/right_header.css.json +++ b/frontend/src/app/main/ui/workspace/right_header.css.json @@ -1 +1 @@ -{"button-primary":"workspace_right_header_button-primary_85-jx","button-secondary":"workspace_right_header_button-secondary_3-qmf","button-tertiary":"workspace_right_header_button-tertiary_fRTli","workspace-header-right":"workspace_right_header_workspace-header-right_aEp3-","viewer-btn":"workspace_right_header_viewer-btn_NXJbl","history-section":"workspace_right_header_history-section_-2kJh","history-button":"workspace_right_header_history-button_UqeiD","comments-section":"workspace_right_header_comments-section_jUB3P","comments-btn":"workspace_right_header_comments-btn_1Caqy","zoom-section":"workspace_right_header_zoom-section_8qteN","dropdown":"workspace_right_header_dropdown_5j2hb","basic-zoom-bar":"workspace_right_header_basic-zoom-bar_3NdtC","reset-btn":"workspace_right_header_reset-btn_mvSYS","zoom-btns":"workspace_right_header_zoom-btns_XP7R1","zoom-btn":"workspace_right_header_zoom-btn_RDxOf","button-warning":"workspace_right_header_button-warning_h6czX","button-disabled":"workspace_right_header_button-disabled_DaXuQ","button-tag":"workspace_right_header_button-tag_k9kn3","button-icon":"workspace_right_header_button-icon_ONOzL","persistence-status-widget":"workspace_right_header_persistence-status-widget_wcska","status-icon":"workspace_right_header_status-icon_D6pD5","zoom-icon":"workspace_right_header_zoom-icon_hzk3v","zoom-widget":"workspace_right_header_zoom-widget_zFiLv","icon":"workspace_right_header_icon_4xmYx","button-icon-small":"workspace_right_header_button-icon-small_9J3iP","link":"workspace_right_header_link_d9QnH","asset-element":"workspace_right_header_asset-element_i-xUp","new-scrollbar":"workspace_right_header_new-scrollbar_i-KWQ","menu-dropdown":"workspace_right_header_menu-dropdown_0AKsJ","menu-item":"workspace_right_header_menu-item_ZJVN4","zoom-option":"workspace_right_header_zoom-option_fpEoB","shortcut":"workspace_right_header_shortcut_y3tfM","shortcuts":"workspace_right_header_shortcuts_HBkyp","shortcut-key":"workspace_right_header_shortcut-key_fg92X","user-icon":"workspace_right_header_user-icon_kP9lj","users-section":"workspace_right_header_users-section_kq2VA","label":"workspace_right_header_label_gBAC0","selected":"workspace_right_header_selected_ChwQW","zoom-text":"workspace_right_header_zoom-text_-xaiw","pending-status":"workspace_right_header_pending-status_GAQfv","saving-status":"workspace_right_header_saving-status_pUkV7","spin-animation":"workspace_right_header_spin-animation_XH76b","saved-status":"workspace_right_header_saved-status_kWULe","error-status":"workspace_right_header_error-status_Gchf-"} \ No newline at end of file +{"button-primary":"workspace_right_header_button-primary_85-jx","button-secondary":"workspace_right_header_button-secondary_3-qmf","button-tertiary":"workspace_right_header_button-tertiary_fRTli","workspace-header-right":"workspace_right_header_workspace-header-right_aEp3-","viewer-btn":"workspace_right_header_viewer-btn_NXJbl","history-section":"workspace_right_header_history-section_-2kJh","history-button":"workspace_right_header_history-button_UqeiD","comments-section":"workspace_right_header_comments-section_jUB3P","comments-btn":"workspace_right_header_comments-btn_1Caqy","zoom-section":"workspace_right_header_zoom-section_8qteN","dropdown":"workspace_right_header_dropdown_5j2hb","basic-zoom-bar":"workspace_right_header_basic-zoom-bar_3NdtC","reset-btn":"workspace_right_header_reset-btn_mvSYS","zoom-btns":"workspace_right_header_zoom-btns_XP7R1","zoom-btn":"workspace_right_header_zoom-btn_RDxOf","button-radio":"workspace_right_header_button-radio_3F9rH","button-warning":"workspace_right_header_button-warning_h6czX","button-disabled":"workspace_right_header_button-disabled_DaXuQ","button-tag":"workspace_right_header_button-tag_k9kn3","button-icon":"workspace_right_header_button-icon_ONOzL","persistence-status-widget":"workspace_right_header_persistence-status-widget_wcska","status-icon":"workspace_right_header_status-icon_D6pD5","zoom-icon":"workspace_right_header_zoom-icon_hzk3v","zoom-widget":"workspace_right_header_zoom-widget_zFiLv","icon":"workspace_right_header_icon_4xmYx","button-icon-small":"workspace_right_header_button-icon-small_9J3iP","link":"workspace_right_header_link_d9QnH","asset-element":"workspace_right_header_asset-element_i-xUp","input-element":"workspace_right_header_input-element_93EMC","new-scrollbar":"workspace_right_header_new-scrollbar_i-KWQ","menu-dropdown":"workspace_right_header_menu-dropdown_0AKsJ","menu-item":"workspace_right_header_menu-item_ZJVN4","zoom-option":"workspace_right_header_zoom-option_fpEoB","shortcut":"workspace_right_header_shortcut_y3tfM","shortcuts":"workspace_right_header_shortcuts_HBkyp","shortcut-key":"workspace_right_header_shortcut-key_fg92X","user-icon":"workspace_right_header_user-icon_kP9lj","users-section":"workspace_right_header_users-section_kq2VA","label":"workspace_right_header_label_gBAC0","selected":"workspace_right_header_selected_ChwQW","zoom-text":"workspace_right_header_zoom-text_-xaiw","pending-status":"workspace_right_header_pending-status_GAQfv","saving-status":"workspace_right_header_saving-status_pUkV7","spin-animation":"workspace_right_header_spin-animation_XH76b","saved-status":"workspace_right_header_saved-status_kWULe","error-status":"workspace_right_header_error-status_Gchf-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss index ee3f2d01a..ccd1c804f 100644 --- a/frontend/src/app/main/ui/workspace/right_header.scss +++ b/frontend/src/app/main/ui/workspace/right_header.scss @@ -54,10 +54,10 @@ background-color: var(--button-tertiary-background-color-selected); border: $s-2 solid var(--button-tertiary-border-color-selected); .label { - color: var(--button-tertiary-foreground-color-selected); + color: var(--button-tertiary-foreground-color-active); } .icon svg { - stroke: var(--button-tertiary-foreground-color-selected); + stroke: var(--button-tertiary-foreground-color-active); } } } @@ -83,6 +83,7 @@ @include flexCenter; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } &:hover { @@ -134,6 +135,7 @@ width: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); height: $s-16; width: $s-16; } @@ -141,7 +143,7 @@ background-color: var(--button-tertiary-background-color-selected); border: $s-2 solid var(--button-tertiary-border-color-selected); svg { - stroke: var(--button-tertiary-foreground-color-selected); + stroke: var(--button-tertiary-foreground-color-active); } } } @@ -155,6 +157,7 @@ width: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); height: $s-16; width: $s-16; } @@ -162,7 +165,7 @@ background-color: var(--button-tertiary-background-color-selected); border: $s-2 solid var(--button-tertiary-border-color-selected); svg { - stroke: var(--button-tertiary-foreground-color-selected); + stroke: var(--button-tertiary-foreground-color-active); } } } @@ -209,6 +212,7 @@ height: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); height: $s-16; width: $s-16; } diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index 51ddc1482..653bb08e3 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -5,7 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar - (:require-macros [app.main.style :refer [css]]) + (:require-macros [app.main.style :as stl]) (:require [app.common.data.macros :as dm] [app.main.data.workspace :as dw] @@ -59,28 +59,24 @@ [:aside {:ref parent-ref :id "left-sidebar-aside" :data-size size - :class (if ^boolean new-css-system - (dom/classnames (css :left-settings-bar) true - :two-row (<= size 300) - :three-row (and (> size 300) (<= size 400)) - :four-row (> size 400)) - (dom/classnames :settings-bar true - :settings-bar-left true - :two-row (<= size 300) - :three-row (and (> size 300) (<= size 400)) - :four-row (> size 400))) + :class (stl/css-case new-css-system + :old-css/settings-bar true + :old-css/settings-bar-left true + :left-settings-bar true + :global/two-row (<= size 300) + :global/three-row (and (> size 300) (<= size 400)) + :global/four-row (> size 400)) :style #js {"--width" (dm/str size "px")}} (when new-css-system [:& left-header {:file file :layout layout :project project :page-id page-id}]) - [:div {:on-pointer-down on-pointer-down :on-lost-pointer-capture on-lost-pointer-capture :on-pointer-move on-pointer-move :class (if ^boolean new-css-system - (dom/classnames (css :resize-area) true) + (stl/css :resize-area) (dom/classnames :resize-area true))}] [:div {:class (if ^boolean new-css-system - (dom/classnames (css :settings-bar-inside) true) + (stl/css :settings-bar-inside) (dom/classnames :settings-bar-inside true))} (cond (true? shortcuts?) @@ -91,7 +87,7 @@ :else (if ^boolean new-css-system - [:div {:class (dom/classnames (css :tabs-wrapper) true)} + [:div {:class (stl/css :tabs-wrapper)} [:& tab-container {:on-change-tab on-tab-change :selected section @@ -100,7 +96,7 @@ :handle-collapse handle-collapse :klass :tab-spacing} [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")} - [:div {:class (dom/classnames (css :layers-tab) true)} + [:div {:class (stl/css :layers-tab)} [:& sitemap {:layout layout}] [:& layers-toolbox {:size-parent size}]]] @@ -122,7 +118,7 @@ :handle-collapse handle-collapse} [:& tabs-element {:id :layers :title (tr "workspace.sidebar.layers")} - [:div {:class (dom/classnames :layers-tab true)} + [:div {:class :layers-tab} [:& sitemap {:layout layout}] [:& layers-toolbox {:size-parent size}]]] @@ -174,26 +170,25 @@ (obj/set! "on-change-section" handle-change-section) (obj/set! "on-expand" handle-expand))] - [:aside {:class (if ^boolean new-css-system - (dom/classnames (css :settings-bar) true - (css :right-settings-bar) true - (css :not-expand) (not can-be-expanded?) - (css :expanded) (> size 276)) - (dom/classnames :settings-bar true - :settings-bar-right true - :not-expand (not can-be-expanded?))) + [:aside {:class (stl/css-case new-css-system + :old-css/settings-bar true + :old-css/settings-bar-right true + :right-settings-bar true + :not-expand (not can-be-expanded?) + :expanded (> size 276)) + :id "right-sidebar-aside" :data-size size :style #js {"--width" (when can-be-expanded? (dm/str size "px"))}} (when can-be-expanded? - [:div.resize-area - {:on-pointer-down on-pointer-down - :on-lost-pointer-capture on-lost-pointer-capture - :on-pointer-move on-pointer-move}]) + [:div {:class (stl/css new-css-system :resize-area) + :on-pointer-down on-pointer-down + :on-lost-pointer-capture on-lost-pointer-capture + :on-pointer-move on-pointer-move}]) (when new-css-system [:& right-header {:file file :layout layout :page-id page-id}]) - [:div.settings-bar-inside + [:div {:class (stl/css new-css-system :settings-bar-inside)} (cond (true? is-comments?) [:& comments-sidebar] diff --git a/frontend/src/app/main/ui/workspace/sidebar.css.json b/frontend/src/app/main/ui/workspace/sidebar.css.json index 8352f5d09..655504f11 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar.css.json @@ -1 +1 @@ -{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-warning":"workspace_sidebar_button-warning_7I8Ar","button-disabled":"workspace_sidebar_button-disabled_ao3sM","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","link":"workspace_sidebar_link_9CZLn","asset-element":"workspace_sidebar_asset-element_vzrfV","new-scrollbar":"workspace_sidebar_new-scrollbar_zGNNO","menu-dropdown":"workspace_sidebar_menu-dropdown_yPcl7","menu-item":"workspace_sidebar_menu-item_eS58p","shortcut":"workspace_sidebar_shortcut_FO4pn","shortcut-key":"workspace_sidebar_shortcut-key_fS0-y","user-icon":"workspace_sidebar_user-icon_SzjFB","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL","right-settings-bar":"workspace_sidebar_right-settings-bar_bGP1x","not-expand":"workspace_sidebar_not-expand_YltWC","expanded":"workspace_sidebar_expanded_SOYSs","spin-animation":"workspace_sidebar_spin-animation_CNSmq"} \ No newline at end of file +{"button-primary":"workspace_sidebar_button-primary_K7xW6","button-secondary":"workspace_sidebar_button-secondary_e2eQE","button-tertiary":"workspace_sidebar_button-tertiary_QKqHT","button-radio":"workspace_sidebar_button-radio_-xIrt","button-warning":"workspace_sidebar_button-warning_7I8Ar","button-disabled":"workspace_sidebar_button-disabled_ao3sM","button-tag":"workspace_sidebar_button-tag_Xc0Sm","button-icon":"workspace_sidebar_button-icon_OXdmL","button-icon-small":"workspace_sidebar_button-icon-small_EYb9x","link":"workspace_sidebar_link_9CZLn","asset-element":"workspace_sidebar_asset-element_vzrfV","input-element":"workspace_sidebar_input-element_I6EUI","new-scrollbar":"workspace_sidebar_new-scrollbar_zGNNO","menu-dropdown":"workspace_sidebar_menu-dropdown_yPcl7","menu-item":"workspace_sidebar_menu-item_eS58p","shortcut":"workspace_sidebar_shortcut_FO4pn","shortcut-key":"workspace_sidebar_shortcut-key_fS0-y","user-icon":"workspace_sidebar_user-icon_SzjFB","left-settings-bar":"workspace_sidebar_left-settings-bar_7co5t","resize-area":"workspace_sidebar_resize-area_ny1v0","settings-bar-inside":"workspace_sidebar_settings-bar-inside_YnFv8","tabs-wrapper":"workspace_sidebar_tabs-wrapper_YDo4o","layers-tab":"workspace_sidebar_layers-tab_soxRL","right-settings-bar":"workspace_sidebar_right-settings-bar_bGP1x","not-expand":"workspace_sidebar_not-expand_YltWC","expanded":"workspace_sidebar_expanded_SOYSs","spin-animation":"workspace_sidebar_spin-animation_CNSmq"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 49aade146..5f18a5496 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -48,11 +48,22 @@ $width-settings-bar-max: $s-500; .right-settings-bar { grid-area: right-sidebar; width: $width-settings-bar; - + background-color: var(--panel-background-color); + height: 100%; &.not-expand { max-width: $width-settings-bar; } &.expanded { width: var(--width, $width-settings-bar); } + .resize-area { + position: absolute; + height: 100%; + width: $s-8; + z-index: $z-index-3; + cursor: ew-resize; + } + .settings-bar-inside { + height: calc(100vh - $s-52); + } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json index 46bad3d4b..dbc880ed4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","assets-header":"sidebar_assets_assets-header_aFHCj","search-wrapper":"sidebar_assets_search-wrapper_n5kE7","sort-button":"sidebar_assets_sort-button_UvVYu","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-warning":"sidebar_assets_button-warning_AZ4xH","button-disabled":"sidebar_assets_button-disabled_NuzXS","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","link":"sidebar_assets_link_klBJ9","asset-element":"sidebar_assets_asset-element_xHJzG","new-scrollbar":"sidebar_assets_new-scrollbar_2SXio","menu-dropdown":"sidebar_assets_menu-dropdown_YLEyF","menu-item":"sidebar_assets_menu-item_NV7hO","shortcut":"sidebar_assets_shortcut_4ngAb","shortcut-key":"sidebar_assets_shortcut-key_H48e8","user-icon":"sidebar_assets_user-icon_p-VBP","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg","spin-animation":"sidebar_assets_spin-animation_ReXkJ"} \ No newline at end of file +{"button-primary":"sidebar_assets_button-primary_a9p4J","button-secondary":"sidebar_assets_button-secondary_hbgBA","assets-bar":"sidebar_assets_assets-bar_gzAPj","assets-header":"sidebar_assets_assets-header_aFHCj","search-wrapper":"sidebar_assets_search-wrapper_n5kE7","sort-button":"sidebar_assets_sort-button_UvVYu","libraries-button":"sidebar_assets_libraries-button_cKUY7","button-tertiary":"sidebar_assets_button-tertiary_KoPen","button-radio":"sidebar_assets_button-radio_d2iG-","button-warning":"sidebar_assets_button-warning_AZ4xH","button-disabled":"sidebar_assets_button-disabled_NuzXS","button-tag":"sidebar_assets_button-tag_yzpPm","button-icon":"sidebar_assets_button-icon_M5Yy6","libraries-icon":"sidebar_assets_libraries-icon_ikusB","button-icon-small":"sidebar_assets_button-icon-small_xZWe1","link":"sidebar_assets_link_klBJ9","asset-element":"sidebar_assets_asset-element_xHJzG","input-element":"sidebar_assets_input-element_IZ5nI","new-scrollbar":"sidebar_assets_new-scrollbar_2SXio","menu-dropdown":"sidebar_assets_menu-dropdown_YLEyF","menu-item":"sidebar_assets_menu-item_NV7hO","shortcut":"sidebar_assets_shortcut_4ngAb","shortcut-key":"sidebar_assets_shortcut-key_H48e8","user-icon":"sidebar_assets_user-icon_p-VBP","section-button":"sidebar_assets_section-button_RSjn8","sections-container":"sidebar_assets_sections-container_r2YTM","section-item":"sidebar_assets_section-item_u6EYM","section-btn":"sidebar_assets_section-btn_s4h2P","libraries-wrapper":"sidebar_assets_libraries-wrapper_agaHg","spin-animation":"sidebar_assets_spin-animation_ReXkJ"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss index e010929f1..df3c6ed70 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss @@ -26,6 +26,7 @@ svg { @include flexCenter; @extend .button-icon; + stroke: var(--icon-foreground); } } &:hover { @@ -107,6 +108,7 @@ overflow: auto; display: flex; flex-direction: column; + padding-left: $s-8; height: calc(100% - $s-80); overflow-y: auto; overflow-x: hidden; @@ -124,6 +126,7 @@ border-radius: $br-8; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json index 68b3353de..c9ac85b9f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.css.json @@ -1 +1 @@ -{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-warning":"assets_colors_button-warning_e-BA5","button-disabled":"assets_colors_button-disabled_yPxKS","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","link":"assets_colors_link_8J5CV","asset-element":"assets_colors_asset-element_XSxD1","new-scrollbar":"assets_colors_new-scrollbar_wIoIr","menu-dropdown":"assets_colors_menu-dropdown_WpZbI","menu-item":"assets_colors_menu-item_jPeYs","shortcut":"assets_colors_shortcut_4XD-P","shortcut-key":"assets_colors_shortcut-key_s2Qcm","user-icon":"assets_colors_user-icon_Pxni6","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk","spin-animation":"assets_colors_spin-animation_zeSlr"} \ No newline at end of file +{"button-primary":"assets_colors_button-primary_6ZMmx","button-secondary":"assets_colors_button-secondary_dNSLH","button-tertiary":"assets_colors_button-tertiary_h20-o","assets-btn":"assets_colors_assets-btn_t8DHG","button-radio":"assets_colors_button-radio_eRpxS","button-warning":"assets_colors_button-warning_e-BA5","button-disabled":"assets_colors_button-disabled_yPxKS","button-tag":"assets_colors_button-tag_ux-NH","button-icon":"assets_colors_button-icon_f-EVH","button-icon-small":"assets_colors_button-icon-small_zq8dv","link":"assets_colors_link_8J5CV","asset-element":"assets_colors_asset-element_XSxD1","input-element":"assets_colors_input-element_EDF5u","new-scrollbar":"assets_colors_new-scrollbar_wIoIr","menu-dropdown":"assets_colors_menu-dropdown_WpZbI","menu-item":"assets_colors_menu-item_jPeYs","shortcut":"assets_colors_shortcut_4XD-P","shortcut-key":"assets_colors_shortcut-key_s2Qcm","user-icon":"assets_colors_user-icon_Pxni6","colors-group":"assets_colors_colors-group_fUsuo","asset-list":"assets_colors_asset-list_wMm1l","asset-list-item":"assets_colors_asset-list-item_ZFtXC","bullet-block":"assets_colors_bullet-block_ZRR2Y","name-block":"assets_colors_name-block_Zvmy3","default-name-only":"assets_colors_default-name-only_JFCGo","name":"assets_colors_name_AjZzr","default-name":"assets_colors_default-name_8gEAb","element-name":"assets_colors_element-name_ADGM8","selected":"assets_colors_selected_ElMu0","editing":"assets_colors_editing_FWnHU","grid-placeholder":"assets_colors_grid-placeholder_7wTFd","drop-space":"assets_colors_drop-space_lbzeC","dragging":"assets_colors_dragging_EmBOk","spin-animation":"assets_colors_spin-animation_zeSlr"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss index 09b0ce80f..8125e8a89 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss @@ -14,6 +14,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index cf6448b53..c7cbce2c7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -144,7 +144,7 @@ [:& title-bar {:collapsable? true :collapsed? (not open?) :on-collapsed #(st/emit! (dw/set-assets-section-open file-id section (not open?))) - :klass :title-spacing + :class (css :title-spacing) :title (mf/html [:span {:class (dom/classnames (css :title-name) true)} [:span {:class (dom/classnames (css :section-icon) true)} [:& section-icon {:section section}]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json index 5161a03fc..8f683acfc 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.css.json @@ -1 +1 @@ -{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-warning":"assets_common_button-warning_j5om7","button-disabled":"assets_common_button-disabled_0zHM3","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","link":"assets_common_link_LM4Ue","asset-element":"assets_common_asset-element_frsFR","new-scrollbar":"assets_common_new-scrollbar_JN2v-","menu-dropdown":"assets_common_menu-dropdown_l6JLU","menu-item":"assets_common_menu-item_d2IzY","shortcut":"assets_common_shortcut_Uk4nm","shortcut-key":"assets_common_shortcut-key_F0DUJ","user-icon":"assets_common_user-icon_rLf8F","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz","spin-animation":"assets_common_spin-animation_7inPz"} \ No newline at end of file +{"button-primary":"assets_common_button-primary_-eBqD","button-secondary":"assets_common_button-secondary_qo2kg","button-tertiary":"assets_common_button-tertiary_ApdBb","button-radio":"assets_common_button-radio_L3d2d","button-warning":"assets_common_button-warning_j5om7","button-disabled":"assets_common_button-disabled_0zHM3","button-tag":"assets_common_button-tag_MHJlj","button-icon":"assets_common_button-icon_0R1zt","button-icon-small":"assets_common_button-icon-small_5kQfO","link":"assets_common_link_LM4Ue","asset-element":"assets_common_asset-element_frsFR","input-element":"assets_common_input-element_dsBzI","new-scrollbar":"assets_common_new-scrollbar_JN2v-","menu-dropdown":"assets_common_menu-dropdown_l6JLU","menu-item":"assets_common_menu-item_d2IzY","shortcut":"assets_common_shortcut_Uk4nm","shortcut-key":"assets_common_shortcut-key_F0DUJ","user-icon":"assets_common_user-icon_rLf8F","asset-section":"assets_common_asset-section_uKhc8","title-name":"assets_common_title-name_ZOz9E","section-icon":"assets_common_section-icon_Kitcf","section-name":"assets_common_section-name_RVo-u","num-assets":"assets_common_num-assets_Dguaz","title-spacing":"assets_common_title-spacing_N2qKx","spin-animation":"assets_common_spin-animation_7inPz"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss index 001117143..21da5c603 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss @@ -36,6 +36,6 @@ } } } -:global(.title-spacing) { +.title-spacing { margin-bottom: $s-4; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json index 8ff9597c4..d36546a0d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.css.json @@ -1 +1 @@ -{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-warning":"assets_components_button-warning_DCK-q","button-disabled":"assets_components_button-disabled_F7meP","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","link":"assets_components_link_PbKq4","asset-element":"assets_components_asset-element_UsbdX","new-scrollbar":"assets_components_new-scrollbar_IvvMB","menu-dropdown":"assets_components_menu-dropdown_PEOsj","menu-item":"assets_components_menu-item_BTWp5","shortcut":"assets_components_shortcut_R6d2o","shortcut-key":"assets_components_shortcut-key_cf4Uh","user-icon":"assets_components_user-icon_37v1Y","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC","spin-animation":"assets_components_spin-animation_WBo--"} \ No newline at end of file +{"button-primary":"assets_components_button-primary_lsoWq","button-secondary":"assets_components_button-secondary_P8v5X","button-tertiary":"assets_components_button-tertiary_7wMqf","add-component":"assets_components_add-component_X9o2C","button-radio":"assets_components_button-radio_4f7fY","button-warning":"assets_components_button-warning_DCK-q","button-disabled":"assets_components_button-disabled_F7meP","button-tag":"assets_components_button-tag_ibmtY","button-icon":"assets_components_button-icon_4Lapr","button-icon-small":"assets_components_button-icon-small_7WrRR","component-group":"assets_components_component-group_AYXVI","asset-enum":"assets_components_asset-enum_iLlfH","enum-item":"assets_components_enum-item_l4zuE","item-name":"assets_components_item-name_Hwadc","editing":"assets_components_editing_3RdZy","asset-grid":"assets_components_asset-grid_mK75F","grid-cell":"assets_components_grid-cell_ctU6T","cell-name":"assets_components_cell-name_DUUMt","link":"assets_components_link_PbKq4","asset-element":"assets_components_asset-element_UsbdX","input-element":"assets_components_input-element_fgeEQ","new-scrollbar":"assets_components_new-scrollbar_IvvMB","menu-dropdown":"assets_components_menu-dropdown_PEOsj","menu-item":"assets_components_menu-item_BTWp5","shortcut":"assets_components_shortcut_R6d2o","shortcut-key":"assets_components_shortcut-key_cf4Uh","user-icon":"assets_components_user-icon_37v1Y","drop-space":"assets_components_drop-space_QhD1-","selected":"assets_components_selected_QLPO7","grid-placeholder":"assets_components_grid-placeholder_a3PoY","listing-options":"assets_components_listing-options_-vPIQ","listing-option-btn":"assets_components_listing-option-btn_-d9cg","first":"assets_components_first_sri1T","dragging":"assets_components_dragging_bWqQC","spin-animation":"assets_components_spin-animation_WBo--"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss index c816f3471..f8e4d3fb7 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss @@ -224,6 +224,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } :global(.three-row) { diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json index ee2f2354f..87b48bdea 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.css.json @@ -1 +1 @@ -{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-warning":"assets_file_library_button-warning_lsk8X","button-disabled":"assets_file_library_button-disabled_0d6i8","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","link":"assets_file_library_link_YnWyT","asset-element":"assets_file_library_asset-element_6ian7","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"} \ No newline at end of file +{"button-primary":"assets_file_library_button-primary_o8czr","button-secondary":"assets_file_library_button-secondary_BCBmw","button-tertiary":"assets_file_library_button-tertiary_JiCQn","library-title":"assets_file_library_library-title_FvGs6","file-link":"assets_file_library_file-link_CtN0K","button-radio":"assets_file_library_button-radio_ih9fD","button-warning":"assets_file_library_button-warning_lsk8X","button-disabled":"assets_file_library_button-disabled_0d6i8","button-tag":"assets_file_library_button-tag_cyg7Q","button-icon":"assets_file_library_button-icon_R-4R0","asset-title":"assets_file_library_asset-title_ozD8M","no-found-icon":"assets_file_library_no-found-icon_yu1td","button-icon-small":"assets_file_library_button-icon-small_9UOdy","link":"assets_file_library_link_YnWyT","asset-element":"assets_file_library_asset-element_6ian7","input-element":"assets_file_library_input-element_tH3V-","new-scrollbar":"assets_file_library_new-scrollbar_3zGUU","menu-dropdown":"assets_file_library_menu-dropdown_KXeib","menu-item":"assets_file_library_menu-item_Uk5ZK","shortcut":"assets_file_library_shortcut_v-Rto","shortcut-key":"assets_file_library_shortcut-key_bqNTU","user-icon":"assets_file_library_user-icon_xeQ8S","tool-window":"assets_file_library_tool-window_fzArb","file-name":"assets_file_library_file-name_Pc8ng","special-title":"assets_file_library_special-title_-Pqzq","library-content":"assets_file_library_library-content_Yto-8","no-found-text":"assets_file_library_no-found-text_RDTeV","spin-animation":"assets_file_library_spin-animation_z-s4F"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss index f4e6377b7..68b50d27c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss @@ -32,6 +32,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); fill: var(--title-foreground-color-hover); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json index 571eba830..4de9bd5ec 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.css.json @@ -1 +1 @@ -{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-warning":"assets_graphics_button-warning_17KvG","button-disabled":"assets_graphics_button-disabled_C4k3Z","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","link":"assets_graphics_link_lAdfq","asset-element":"assets_graphics_asset-element_-VwmF","new-scrollbar":"assets_graphics_new-scrollbar_10lYW","menu-dropdown":"assets_graphics_menu-dropdown_r8D0N","menu-item":"assets_graphics_menu-item_cbQq8","shortcut":"assets_graphics_shortcut_vxxjT","shortcut-key":"assets_graphics_shortcut-key_G6mgB","user-icon":"assets_graphics_user-icon_2W6f-","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf","spin-animation":"assets_graphics_spin-animation_9EfUf"} \ No newline at end of file +{"button-primary":"assets_graphics_button-primary_6qIO6","button-secondary":"assets_graphics_button-secondary_0qkG4","button-tertiary":"assets_graphics_button-tertiary_bWZ1s","assets-btn":"assets_graphics_assets-btn_BIoeo","add-component":"assets_graphics_add-component_bgwrr","button-radio":"assets_graphics_button-radio_-7XU8","button-warning":"assets_graphics_button-warning_17KvG","button-disabled":"assets_graphics_button-disabled_C4k3Z","button-tag":"assets_graphics_button-tag_K3ckf","button-icon":"assets_graphics_button-icon_En5qq","button-icon-small":"assets_graphics_button-icon-small_xNHzC","link":"assets_graphics_link_lAdfq","asset-element":"assets_graphics_asset-element_-VwmF","input-element":"assets_graphics_input-element_pC-ak","new-scrollbar":"assets_graphics_new-scrollbar_10lYW","menu-dropdown":"assets_graphics_menu-dropdown_r8D0N","menu-item":"assets_graphics_menu-item_cbQq8","shortcut":"assets_graphics_shortcut_vxxjT","shortcut-key":"assets_graphics_shortcut-key_G6mgB","user-icon":"assets_graphics_user-icon_2W6f-","graphics-group":"assets_graphics_graphics-group_kibPf","drop-space":"assets_graphics_drop-space_2UAKf","asset-grid":"assets_graphics_asset-grid_6ET0K","grid-cell":"assets_graphics_grid-cell_EHW4x","cell-name":"assets_graphics_cell-name_JgbUS","editing":"assets_graphics_editing_O-Ozt","editable-label-input":"assets_graphics_editable-label-input_Yc2zA","editable-label-close":"assets_graphics_editable-label-close_16VT8","selected":"assets_graphics_selected_Q9YJC","dragging":"assets_graphics_dragging_oVA41","asset-enum":"assets_graphics_asset-enum_TS6Je","enum-item":"assets_graphics_enum-item_UFh4c","item-name":"assets_graphics_item-name_HGIQs","grid-placeholder":"assets_graphics_grid-placeholder_9brkO","listing-options":"assets_graphics_listing-options_Jw51P","listing-option-btn":"assets_graphics_listing-option-btn_3IkTO","first":"assets_graphics_first_kU3zf","spin-animation":"assets_graphics_spin-animation_9EfUf"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss index 4640ced8c..9a0cc186f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss @@ -174,6 +174,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } @@ -185,5 +186,6 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json index 4b9d14b0b..4d63dbfc0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.css.json @@ -1 +1 @@ -{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-warning":"assets_groups_button-warning_cYNaB","button-disabled":"assets_groups_button-disabled_VBKbX","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","link":"assets_groups_link_Dx2Eb","asset-element":"assets_groups_asset-element_RgKXH","new-scrollbar":"assets_groups_new-scrollbar_MiZuY","menu-dropdown":"assets_groups_menu-dropdown_TL814","menu-item":"assets_groups_menu-item_xbSue","shortcut":"assets_groups_shortcut_oaCl2","shortcut-key":"assets_groups_shortcut-key_zz6aG","user-icon":"assets_groups_user-icon_wj5J2","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc","spin-animation":"assets_groups_spin-animation_NvY-S"} \ No newline at end of file +{"button-primary":"assets_groups_button-primary_2o3Db","button-secondary":"assets_groups_button-secondary_-qdxB","button-tertiary":"assets_groups_button-tertiary_1f4Jy","button-radio":"assets_groups_button-radio_9DosD","button-warning":"assets_groups_button-warning_cYNaB","button-disabled":"assets_groups_button-disabled_VBKbX","button-tag":"assets_groups_button-tag_yIgd9","button-icon":"assets_groups_button-icon_MSptS","button-icon-small":"assets_groups_button-icon-small_73Ir0","link":"assets_groups_link_Dx2Eb","asset-element":"assets_groups_asset-element_RgKXH","input-element":"assets_groups_input-element_1MWYS","new-scrollbar":"assets_groups_new-scrollbar_MiZuY","menu-dropdown":"assets_groups_menu-dropdown_TL814","menu-item":"assets_groups_menu-item_xbSue","shortcut":"assets_groups_shortcut_oaCl2","shortcut-key":"assets_groups_shortcut-key_zz6aG","user-icon":"assets_groups_user-icon_wj5J2","group-title":"assets_groups_group-title_cV4AQ","pre-path":"assets_groups_pre-path_1rE71","path":"assets_groups_path_m0esc","spin-animation":"assets_groups_spin-animation_NvY-S"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json index 5c54146d2..41fb91a42 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.css.json @@ -1 +1 @@ -{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-warning":"assets_typographies_button-warning_n5n19","button-disabled":"assets_typographies_button-disabled_mvE-W","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","link":"assets_typographies_link_KdWLr","asset-element":"assets_typographies_asset-element_hvNzY","new-scrollbar":"assets_typographies_new-scrollbar_P2gpd","menu-dropdown":"assets_typographies_menu-dropdown_aHaua","menu-item":"assets_typographies_menu-item_WXEmJ","shortcut":"assets_typographies_shortcut_Sa3Di","shortcut-key":"assets_typographies_shortcut-key_dBq78","user-icon":"assets_typographies_user-icon_9eYTE","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7","spin-animation":"assets_typographies_spin-animation_lnxba"} \ No newline at end of file +{"button-primary":"assets_typographies_button-primary_njVYq","button-secondary":"assets_typographies_button-secondary_Wzmmw","button-tertiary":"assets_typographies_button-tertiary_k3V5a","assets-btn":"assets_typographies_assets-btn_wCF-m","button-radio":"assets_typographies_button-radio_vFNYs","button-warning":"assets_typographies_button-warning_n5n19","button-disabled":"assets_typographies_button-disabled_mvE-W","button-tag":"assets_typographies_button-tag_grTbB","button-icon":"assets_typographies_button-icon_7peoi","button-icon-small":"assets_typographies_button-icon-small_oHD9w","link":"assets_typographies_link_KdWLr","asset-element":"assets_typographies_asset-element_hvNzY","input-element":"assets_typographies_input-element_6esy2","new-scrollbar":"assets_typographies_new-scrollbar_P2gpd","menu-dropdown":"assets_typographies_menu-dropdown_aHaua","menu-item":"assets_typographies_menu-item_WXEmJ","shortcut":"assets_typographies_shortcut_Sa3Di","shortcut-key":"assets_typographies_shortcut-key_dBq78","user-icon":"assets_typographies_user-icon_9eYTE","typographies-group":"assets_typographies_typographies-group_iCR4V","assets-list":"assets_typographies_assets-list_wS3At","drop-space":"assets_typographies_drop-space_kGrjB","grid-placeholder":"assets_typographies_grid-placeholder_FvcCI","typography-item":"assets_typographies_typography-item_qkADe","dragging":"assets_typographies_dragging_Ns4o7","spin-animation":"assets_typographies_spin-animation_lnxba"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss index 6feea36ab..a83da56d4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/typographies.scss @@ -14,6 +14,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } .typographies-group { diff --git a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json index 274be40ec..64081532a 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/collapsable_button.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-warning":"sidebar_collapsable_button_button-warning_GQzbM","button-disabled":"sidebar_collapsable_button_button-disabled_A2SSW","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","link":"sidebar_collapsable_button_link_qpDv8","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","new-scrollbar":"sidebar_collapsable_button_new-scrollbar_cYoQj","menu-dropdown":"sidebar_collapsable_button_menu-dropdown_Dgfng","menu-item":"sidebar_collapsable_button_menu-item_w9GKP","shortcut":"sidebar_collapsable_button_shortcut_frmAH","shortcut-key":"sidebar_collapsable_button_shortcut-key_IULZO","user-icon":"sidebar_collapsable_button_user-icon_1axL9","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME","spin-animation":"sidebar_collapsable_button_spin-animation_bwtJ0"} \ No newline at end of file +{"button-primary":"sidebar_collapsable_button_button-primary_qaRce","button-secondary":"sidebar_collapsable_button_button-secondary_OqDpe","button-tertiary":"sidebar_collapsable_button_button-tertiary_NuJrA","button-radio":"sidebar_collapsable_button_button-radio_7H-g0","button-warning":"sidebar_collapsable_button_button-warning_GQzbM","button-disabled":"sidebar_collapsable_button_button-disabled_A2SSW","button-tag":"sidebar_collapsable_button_button-tag_unQKq","button-icon":"sidebar_collapsable_button_button-icon_P4-xy","button-icon-small":"sidebar_collapsable_button_button-icon-small_lQUE3","link":"sidebar_collapsable_button_link_qpDv8","asset-element":"sidebar_collapsable_button_asset-element_BboJ7","input-element":"sidebar_collapsable_button_input-element_QEGZD","new-scrollbar":"sidebar_collapsable_button_new-scrollbar_cYoQj","menu-dropdown":"sidebar_collapsable_button_menu-dropdown_Dgfng","menu-item":"sidebar_collapsable_button_menu-item_w9GKP","shortcut":"sidebar_collapsable_button_shortcut_frmAH","shortcut-key":"sidebar_collapsable_button_shortcut-key_IULZO","user-icon":"sidebar_collapsable_button_user-icon_1axL9","collapsed-sidebar":"sidebar_collapsable_button_collapsed-sidebar_uQnGJ","collapsed-title":"sidebar_collapsable_button_collapsed-title_Jb62g","collapsed-button":"sidebar_collapsable_button_collapsed-button_LT5ME","spin-animation":"sidebar_collapsable_button_spin-animation_bwtJ0"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.css.json b/frontend/src/app/main/ui/workspace/sidebar/history.css.json index 4db68f7b1..81a6ec637 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/history.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_history_button-primary_3QHPC","button-secondary":"sidebar_history_button-secondary_-f-3z","button-tertiary":"sidebar_history_button-tertiary_IzuLu","history-toolbox":"sidebar_history_history-toolbox_-jdvy","history-toolbox-title":"sidebar_history_history-toolbox-title_9pxvS","close-button":"sidebar_history_close-button_CmY2q","button-warning":"sidebar_history_button-warning_rYQHC","button-disabled":"sidebar_history_button-disabled_0BmPs","button-tag":"sidebar_history_button-tag_9aylo","button-icon":"sidebar_history_button-icon_UeFr2","history-entry-empty":"sidebar_history_history-entry-empty_SINxx","history-entry-empty-icon":"sidebar_history_history-entry-empty-icon_XJdB6","button-icon-small":"sidebar_history_button-icon-small_9M0oh","history-entries":"sidebar_history_history-entries_NgKRp","history-entry":"sidebar_history_history-entry_lGPio","history-entry-summary":"sidebar_history_history-entry-summary_S3Glf","history-entry-summary-button":"sidebar_history_history-entry-summary-button_AjNW8","history-entry-summary-icon":"sidebar_history_history-entry-summary-icon_F-iya","link":"sidebar_history_link_5k5Mf","asset-element":"sidebar_history_asset-element_Lm478","new-scrollbar":"sidebar_history_new-scrollbar_lmxNu","menu-dropdown":"sidebar_history_menu-dropdown_gDAqh","menu-item":"sidebar_history_menu-item_6Yf8k","shortcut":"sidebar_history_shortcut_OhzVN","shortcut-key":"sidebar_history_shortcut-key_-sdvq","user-icon":"sidebar_history_user-icon_GHiNr","history-entry-empty-msg":"sidebar_history_history-entry-empty-msg_S3wX7","disabled":"sidebar_history_disabled_u0U-e","hover":"sidebar_history_hover_RnLwu","button-opened":"sidebar_history_button-opened_PdprO","history-entry-summary-text":"sidebar_history_history-entry-summary-text_bBYso","history-entry-detail":"sidebar_history_history-entry-detail_-QXf6","history-entry-details-list":"sidebar_history_history-entry-details-list_shkso","spin-animation":"sidebar_history_spin-animation_-Oo4-"} \ No newline at end of file +{"button-primary":"sidebar_history_button-primary_3QHPC","button-secondary":"sidebar_history_button-secondary_-f-3z","button-tertiary":"sidebar_history_button-tertiary_IzuLu","history-toolbox":"sidebar_history_history-toolbox_-jdvy","history-toolbox-title":"sidebar_history_history-toolbox-title_9pxvS","close-button":"sidebar_history_close-button_CmY2q","button-radio":"sidebar_history_button-radio_Ky3X9","button-warning":"sidebar_history_button-warning_rYQHC","button-disabled":"sidebar_history_button-disabled_0BmPs","button-tag":"sidebar_history_button-tag_9aylo","button-icon":"sidebar_history_button-icon_UeFr2","history-entry-empty":"sidebar_history_history-entry-empty_SINxx","history-entry-empty-icon":"sidebar_history_history-entry-empty-icon_XJdB6","button-icon-small":"sidebar_history_button-icon-small_9M0oh","history-entries":"sidebar_history_history-entries_NgKRp","history-entry":"sidebar_history_history-entry_lGPio","history-entry-summary":"sidebar_history_history-entry-summary_S3Glf","history-entry-summary-button":"sidebar_history_history-entry-summary-button_AjNW8","history-entry-summary-icon":"sidebar_history_history-entry-summary-icon_F-iya","link":"sidebar_history_link_5k5Mf","asset-element":"sidebar_history_asset-element_Lm478","input-element":"sidebar_history_input-element_2cpp6","new-scrollbar":"sidebar_history_new-scrollbar_lmxNu","menu-dropdown":"sidebar_history_menu-dropdown_gDAqh","menu-item":"sidebar_history_menu-item_6Yf8k","shortcut":"sidebar_history_shortcut_OhzVN","shortcut-key":"sidebar_history_shortcut-key_-sdvq","user-icon":"sidebar_history_user-icon_GHiNr","history-entry-empty-msg":"sidebar_history_history-entry-empty-msg_S3wX7","disabled":"sidebar_history_disabled_u0U-e","hover":"sidebar_history_hover_RnLwu","button-opened":"sidebar_history_button-opened_PdprO","history-entry-summary-text":"sidebar_history_history-entry-summary-text_bBYso","history-entry-detail":"sidebar_history_history-entry-detail_-QXf6","history-entry-details-list":"sidebar_history_history-entry-details-list_shkso","spin-animation":"sidebar_history_spin-animation_-Oo4-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss index 87adac9c9..9dcb922b2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/history.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss @@ -37,6 +37,7 @@ border-radius: $br-6; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json index c848d2372..170c3d878 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-warning":"sidebar_layer_item_button-warning_ZFaBq","button-disabled":"sidebar_layer_item_button-disabled_tTKle","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","link":"sidebar_layer_item_link_M63jD","asset-element":"sidebar_layer_item_asset-element_AXTD0","new-scrollbar":"sidebar_layer_item_new-scrollbar_zvlI0","menu-dropdown":"sidebar_layer_item_menu-dropdown_Xviyp","menu-item":"sidebar_layer_item_menu-item_NwoKO","shortcut":"sidebar_layer_item_shortcut_38vBX","shortcut-key":"sidebar_layer_item_shortcut-key_OCkoW","user-icon":"sidebar_layer_item_user-icon_88ou5","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ","spin-animation":"sidebar_layer_item_spin-animation_1fYW9"} \ No newline at end of file +{"button-primary":"sidebar_layer_item_button-primary_74ST4","button-secondary":"sidebar_layer_item_button-secondary_e4u9V","button-tertiary":"sidebar_layer_item_button-tertiary_Mo--6","button-radio":"sidebar_layer_item_button-radio_7qqBr","button-warning":"sidebar_layer_item_button-warning_ZFaBq","button-disabled":"sidebar_layer_item_button-disabled_tTKle","button-tag":"sidebar_layer_item_button-tag_lFKoD","button-icon":"sidebar_layer_item_button-icon_-D7KH","button-icon-small":"sidebar_layer_item_button-icon-small_1RfDl","layer-row":"sidebar_layer_item_layer-row_KibLX","element-list-body":"sidebar_layer_item_element-list-body_832JO","element-actions":"sidebar_layer_item_element-actions_ACGJI","toggle-element":"sidebar_layer_item_toggle-element_4bhRW","block-element":"sidebar_layer_item_block-element_RhKz-","button-content":"sidebar_layer_item_button-content_bPwop","icon-shape":"sidebar_layer_item_icon-shape_g9Wxn","toggle-content":"sidebar_layer_item_toggle-content_MKhsv","link":"sidebar_layer_item_link_M63jD","asset-element":"sidebar_layer_item_asset-element_AXTD0","input-element":"sidebar_layer_item_input-element_-J8zJ","new-scrollbar":"sidebar_layer_item_new-scrollbar_zvlI0","menu-dropdown":"sidebar_layer_item_menu-dropdown_Xviyp","menu-item":"sidebar_layer_item_menu-item_NwoKO","shortcut":"sidebar_layer_item_shortcut_38vBX","shortcut-key":"sidebar_layer_item_shortcut-key_OCkoW","user-icon":"sidebar_layer_item_user-icon_88ou5","filtered":"sidebar_layer_item_filtered_V5CHf","inverse":"sidebar_layer_item_inverse_zzZ54","absolute":"sidebar_layer_item_absolute_mYIKg","selected":"sidebar_layer_item_selected_O7P-j","element-children":"sidebar_layer_item_element-children_3iA4Q","parent-selected":"sidebar_layer_item_parent-selected_uIIyQ","hidden":"sidebar_layer_item_hidden_JRbJO","type-comp":"sidebar_layer_item_type-comp_FBSRt","tab-indentation":"sidebar_layer_item_tab-indentation_e-2dQ","spin-animation":"sidebar_layer_item_spin-animation_1fYW9"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss index bc5194d68..3b7fcc7a8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss @@ -12,6 +12,7 @@ align-items: center; width: 100%; background-color: var(--layer-row-background-color); + padding-left: $s-8; .element-list-body { display: flex; @@ -37,6 +38,7 @@ padding: 0 4px 0 8px; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } &.inverse { svg { @@ -58,6 +60,7 @@ padding: 0 $s-8 0 $s-4; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } .absolute { @@ -83,6 +86,7 @@ display: none; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } &.selected { diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json index febd7e8a5..d34875314 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-warning":"sidebar_layer_name_button-warning_YIS-I","button-disabled":"sidebar_layer_name_button-disabled_15SW8","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","link":"sidebar_layer_name_link_QHb8i","asset-element":"sidebar_layer_name_asset-element_WVekz","new-scrollbar":"sidebar_layer_name_new-scrollbar_gOiJo","menu-dropdown":"sidebar_layer_name_menu-dropdown_st1b2","menu-item":"sidebar_layer_name_menu-item_ZR1Xe","shortcut":"sidebar_layer_name_shortcut_Nbhk9","shortcut-key":"sidebar_layer_name_shortcut-key_q4DMU","user-icon":"sidebar_layer_name_user-icon_SidW9","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf","spin-animation":"sidebar_layer_name_spin-animation_PtsAu"} \ No newline at end of file +{"button-primary":"sidebar_layer_name_button-primary_V-6Cp","button-secondary":"sidebar_layer_name_button-secondary_Q14Qj","button-tertiary":"sidebar_layer_name_button-tertiary_dA-v0","button-radio":"sidebar_layer_name_button-radio_EuXpj","button-warning":"sidebar_layer_name_button-warning_YIS-I","button-disabled":"sidebar_layer_name_button-disabled_15SW8","button-tag":"sidebar_layer_name_button-tag_fr2K0","button-icon":"sidebar_layer_name_button-icon_UQXjw","button-icon-small":"sidebar_layer_name_button-icon-small_At5P8","link":"sidebar_layer_name_link_QHb8i","asset-element":"sidebar_layer_name_asset-element_WVekz","input-element":"sidebar_layer_name_input-element_FR4Tw","new-scrollbar":"sidebar_layer_name_new-scrollbar_gOiJo","menu-dropdown":"sidebar_layer_name_menu-dropdown_st1b2","menu-item":"sidebar_layer_name_menu-item_ZR1Xe","shortcut":"sidebar_layer_name_shortcut_Nbhk9","shortcut-key":"sidebar_layer_name_shortcut-key_q4DMU","user-icon":"sidebar_layer_name_user-icon_SidW9","element-name":"sidebar_layer_name_element-name_hZ-lA","selected":"sidebar_layer_name_selected_MKxdm","type-comp":"sidebar_layer_name_type-comp_TNGM-","hidden":"sidebar_layer_name_hidden_e-K3G","element-name-input":"sidebar_layer_name_element-name-input_Wpnkf","spin-animation":"sidebar_layer_name_spin-animation_PtsAu"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json index 60422fb3b..7297f6bfb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-warning":"sidebar_layers_button-warning_lWBeg","button-disabled":"sidebar_layers_button-disabled_IHD-6","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","link":"sidebar_layers_link_xwoN2","asset-element":"sidebar_layers_asset-element_-dbA7","new-scrollbar":"sidebar_layers_new-scrollbar_62eFS","menu-dropdown":"sidebar_layers_menu-dropdown_ENGDz","menu-item":"sidebar_layers_menu-item_d4Oxp","shortcut":"sidebar_layers_shortcut_f-AXl","shortcut-key":"sidebar_layers_shortcut-key_i2kbB","user-icon":"sidebar_layers_user-icon_AoGvD","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB","spin-animation":"sidebar_layers_spin-animation_jMW0C"} \ No newline at end of file +{"button-primary":"sidebar_layers_button-primary_q9e2I","button-secondary":"sidebar_layers_button-secondary_H4lpi","button-tertiary":"sidebar_layers_button-tertiary_5mq-9","layers":"sidebar_layers_layers_87ZOo","tool-window-bar":"sidebar_layers_tool-window-bar_lg54C","search":"sidebar_layers_search_zjs2x","close-search":"sidebar_layers_close-search_baIhK","icon-search":"sidebar_layers_icon-search_6kWUn","button-radio":"sidebar_layers_button-radio_9YxY0","button-warning":"sidebar_layers_button-warning_lWBeg","button-disabled":"sidebar_layers_button-disabled_IHD-6","button-tag":"sidebar_layers_button-tag_FT7oa","active-filters":"sidebar_layers_active-filters_-JMMP","layer-filter":"sidebar_layers_layer-filter_rHZTz","button-icon":"sidebar_layers_button-icon_SD8PP","button-icon-small":"sidebar_layers_button-icon-small_v5L-u","filters-container":"sidebar_layers_filters-container_c1Ux9","filter-menu-item":"sidebar_layers_filter-menu-item_aZd0D","filter-menu-item-tick":"sidebar_layers_filter-menu-item-tick_JNdIK","filter-menu-item-name-wrapper":"sidebar_layers_filter-menu-item-name-wrapper_DtGkH","filter-menu-item-icon":"sidebar_layers_filter-menu-item-icon_Oi3Ix","layer-filter-icon":"sidebar_layers_layer-filter-icon_0yKrb","layer-filter-close":"sidebar_layers_layer-filter-close_3mV4i","focus-title":"sidebar_layers_focus-title_35PvQ","back-button-icon":"sidebar_layers_back-button-icon_mHv6g","link":"sidebar_layers_link_xwoN2","asset-element":"sidebar_layers_asset-element_-dbA7","input-element":"sidebar_layers_input-element_SadJI","new-scrollbar":"sidebar_layers_new-scrollbar_62eFS","menu-dropdown":"sidebar_layers_menu-dropdown_ENGDz","menu-item":"sidebar_layers_menu-item_d4Oxp","shortcut":"sidebar_layers_shortcut_f-AXl","shortcut-key":"sidebar_layers_shortcut-key_i2kbB","user-icon":"sidebar_layers_user-icon_AoGvD","page-name":"sidebar_layers_page-name_8ZDRR","filter-button":"sidebar_layers_filter-button_KXxHh","focus-name":"sidebar_layers_focus-name_Fderf","focus-mode-tag-wrapper":"sidebar_layers_focus-mode-tag-wrapper_OHXCG","focus-mode-tag":"sidebar_layers_focus-mode-tag_J5ItD","layer-filter-name":"sidebar_layers_layer-filter-name_Y4PuB","filter-menu-item-name":"sidebar_layers_filter-menu-item-name_rxeut","selected":"sidebar_layers_selected_V5Vv3","tool-window-content":"sidebar_layers_tool-window-content_YnpDB","element-list":"sidebar_layers_element-list_nAntB","spin-animation":"sidebar_layers_spin-animation_jMW0C"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss index d4f67b695..7bc6f141d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss @@ -36,6 +36,7 @@ padding: 0; svg { @extend .button-icon; + stroke: var(--icon-foreground); } } &.search { @@ -82,6 +83,7 @@ border-radius: $br-8; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } @@ -98,6 +100,7 @@ padding: 0 $s-4 0 $s-8; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); transform: rotate(180deg); } } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.cljs b/frontend/src/app/main/ui/workspace/sidebar/options.cljs index 37dc1c779..a7f41befb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -14,6 +15,7 @@ [app.main.data.workspace :as udw] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.tab-container :refer [tab-container tab-element]] [app.main.ui.components.tabs-container :refer [tabs-container tabs-element]] [app.main.ui.context :as ctx] [app.main.ui.viewer.inspect.right-sidebar :as hrs] @@ -68,7 +70,8 @@ (mf/defc options-content {::mf/wrap [mf/memo]} [{:keys [selected section shapes shapes-with-children page-id file-id on-change-section on-expand]}] - (let [drawing (mf/deref refs/workspace-drawing) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + drawing (mf/deref refs/workspace-drawing) objects (mf/deref refs/workspace-page-objects) shared-libs (mf/deref refs/workspace-libraries) edition (mf/deref refs/selected-edition) @@ -87,72 +90,137 @@ (if (= options-mode :inspect) (st/emit! :interrupt (udw/set-workspace-read-only true)) (st/emit! :interrupt (udw/set-workspace-read-only false))))] - - [:div.tool-window - [:div.tool-window-content - [:& tabs-container {:on-change-tab on-change-tab - :selected section} - [:& tabs-element {:id :design + (if ^boolean new-css-system + [:div {:class (stl/css :tool-window)} + [:& tab-container + {:on-change-tab on-change-tab + :selected section + :collapsable? false + :content-class (stl/css :content-class) + :klass (stl/css :tab-spacing)} + [:& tab-element {:id :design :title (tr "workspace.options.design")} - [:div.element-options - [:& align-options] - [:& bool-options] - (cond - (some? selected-cell) - [:& grid-cell/options - {:shape (get objects edition) - :cell (dm/get-in objects [edition :layout-grid-cells selected-cell])}] + [:div {:class (stl/css :element-options)} + [:& align-options] + [:& bool-options] - edit-grid? - [:& layout-container/grid-layout-edition - {:ids [edition] - :values (get objects edition)}] + (cond + (some? selected-cell) + [:& grid-cell/options + {:shape (get objects edition) + :cell (dm/get-in objects [edition :layout-grid-cells selected-cell])}] - (d/not-empty? drawing) - [:& shape-options - {:shape (:object drawing) - :page-id page-id - :file-id file-id - :shared-libs shared-libs}] + edit-grid? + [:& layout-container/grid-layout-edition + {:ids [edition] + :values (get objects edition)}] - (= 0 (count selected)) - [:& page/options] + (d/not-empty? drawing) + [:& shape-options + {:shape (:object drawing) + :page-id page-id + :file-id file-id + :shared-libs shared-libs}] - (= 1 (count selected)) - [:& shape-options - {:shape (first selected-shapes) - :page-id page-id - :file-id file-id - :shared-libs shared-libs - :shapes-with-children shapes-with-children}] + (= 0 (count selected)) + [:& page/options] - :else - [:& multiple/options - {:shapes-with-children shapes-with-children - :shapes selected-shapes - :page-id page-id - :file-id file-id - :shared-libs shared-libs}])]] + (= 1 (count selected)) + [:& shape-options + {:shape (first selected-shapes) + :page-id page-id + :file-id file-id + :shared-libs shared-libs + :shapes-with-children shapes-with-children}] - [:& tabs-element - {:id :prototype - :title (tr "workspace.options.prototype")} - - [:div.element-options - [:& interactions-menu {:shape (first shapes)}]]] - - [:& tabs-element {:id :inspect + :else + [:& multiple/options + {:shapes-with-children shapes-with-children + :shapes selected-shapes + :page-id page-id + :file-id file-id + :shared-libs shared-libs}])]] + [:& tab-element {:id :prototype + :title (tr "workspace.options.prototype")} + [:div {:class (stl/css :element-options)} + [:& interactions-menu {:shape (first shapes)}]]] + [:& tab-element {:id :inspect :title (tr "workspace.options.inspect")} + [:div {:class (stl/css :element-options)} + [:& hrs/right-sidebar {:page-id page-id + :objects objects + :file-id file-id + :frame shape-parent-frame + :shapes selected-shapes + :on-change-section on-change-section + :on-expand on-expand + :from :workspace}]]]]] - [:div.element-options.element-options-inspect - [:& hrs/right-sidebar {:page-id page-id - :objects objects - :file-id file-id - :frame shape-parent-frame - :shapes selected-shapes - :on-change-section on-change-section - :on-expand on-expand - :from :workspace}]]]]]])) + [:div.tool-window + [:div.tool-window-content + [:& tabs-container {:on-change-tab on-change-tab + :selected section} + [:& tabs-element {:id :design + :title (tr "workspace.options.design")} + [:div.element-options + [:& align-options] + [:& bool-options] + (cond + (some? selected-cell) + [:& grid-cell/options + {:shape (get objects edition) + :cell (dm/get-in objects [edition :layout-grid-cells selected-cell])}] + + edit-grid? + [:& layout-container/grid-layout-edition + {:ids [edition] + :values (get objects edition)}] + + (d/not-empty? drawing) + [:& shape-options + {:shape (:object drawing) + :page-id page-id + :file-id file-id + :shared-libs shared-libs}] + + (= 0 (count selected)) + [:& page/options] + + (= 1 (count selected)) + [:& shape-options + {:shape (first selected-shapes) + :page-id page-id + :file-id file-id + :shared-libs shared-libs + :shapes-with-children shapes-with-children}] + + :else + [:& multiple/options + {:shapes-with-children shapes-with-children + :shapes selected-shapes + :page-id page-id + :file-id file-id + :shared-libs shared-libs}])]] + + [:& tabs-element + {:id :prototype + :title (tr "workspace.options.prototype")} + + [:div.element-options + [:& interactions-menu {:shape (first shapes)}]]] + + [:& tabs-element {:id :inspect + :title (tr "workspace.options.inspect")} + + [:div.element-options.element-options-inspect + [:& hrs/right-sidebar {:page-id page-id + :objects objects + :file-id file-id + :frame shape-parent-frame + :shapes selected-shapes + :on-change-section on-change-section + :on-expand on-expand + :from :workspace}]]]]]]))) ;; TODO: this need optimizations, selected-objects and ;; selected-objects-with-children are derefed always but they only diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.css.json b/frontend/src/app/main/ui/workspace/sidebar/options.css.json new file mode 100644 index 000000000..cdcc0e3f4 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options.css.json @@ -0,0 +1 @@ +{"button-primary":"sidebar_options_button-primary_Ycnlr","button-secondary":"sidebar_options_button-secondary_S4ZcB","button-tertiary":"sidebar_options_button-tertiary_CB38E","button-radio":"sidebar_options_button-radio_QK8p8","button-warning":"sidebar_options_button-warning_vv-fk","button-disabled":"sidebar_options_button-disabled_ue85E","button-tag":"sidebar_options_button-tag_zm4LH","button-icon":"sidebar_options_button-icon_-R7Je","button-icon-small":"sidebar_options_button-icon-small_zhacE","link":"sidebar_options_link_iZ9av","asset-element":"sidebar_options_asset-element_KnWbl","input-element":"sidebar_options_input-element_KCtAD","new-scrollbar":"sidebar_options_new-scrollbar_qRJtb","menu-dropdown":"sidebar_options_menu-dropdown_eskoM","menu-item":"sidebar_options_menu-item_0aDxA","shortcut":"sidebar_options_shortcut_4JmTg","shortcut-key":"sidebar_options_shortcut-key_C5Uow","user-icon":"sidebar_options_user-icon_qaXts","tool-window":"sidebar_options_tool-window_LayWW","tab-spacing":"sidebar_options_tab-spacing_HSgti","content-class":"sidebar_options_content-class_IXvSf","element-options":"sidebar_options_element-options_6HY6o","spin-animation":"sidebar_options_spin-animation_Pq-La"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options.scss b/frontend/src/app/main/ui/workspace/sidebar/options.scss new file mode 100644 index 000000000..dbc9c7dce --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options.scss @@ -0,0 +1,32 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.tool-window { + position: relative; + display: flex; + flex-direction: column; + width: 100%; + padding-left: $s-12; + .tab-spacing { + margin-right: $s-12; + margin-bottom: $s-16; + } + + .content-class { + overflow-y: auto; + overflow-x: hidden; + height: calc(100vh - $s-96); + } + + .element-options { + width: 100%; + display: flex; + flex-direction: column; + gap: $s-16; + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs index 3ecf47267..d3a016128 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs @@ -5,74 +5,169 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.align + (:require-macros [app.main.style :as stl]) (:require [app.main.data.workspace :as dw] [app.main.data.workspace.shortcuts :as sc] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] + [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) (mf/defc align-options [] - (let [selected (mf/deref refs/selected-shapes) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + selected (mf/deref refs/selected-shapes) + ;; don't need to watch objects, only read the value + objects (deref refs/workspace-page-objects) - ;; don't need to watch objects, only read the value - objects (deref refs/workspace-page-objects) + disabled-align (not (dw/can-align? selected objects)) + disabled-distribute (not (dw/can-distribute? selected)) - disabled (not (dw/can-align? selected objects)) + align-objects + (mf/use-fn + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (st/emit! (dw/align-objects value))))) - disabled-distribute (not(dw/can-distribute? selected))] + distribute-objects + (mf/use-fn + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (st/emit! (dw/distribute-objects value)))))] - [:div.align-options - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :hleft))} - i/shape-halign-left] + (when (not (and disabled-align disabled-distribute)) + (if new-css-system + [:div {:class (stl/css :align-options)} + [:div {:class (stl/css :align-group)} + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) + :data-value :hleft + :on-click align-objects} + i/align-left-refactor] - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :hcenter))} - i/shape-halign-center] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) + :data-value :hcenter + :on-click align-objects} + i/align-horizontal-center-refactor] - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hright" (sc/get-tooltip :align-right)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :hright))} - i/shape-halign-right] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.hright" (sc/get-tooltip :align-right)) + :data-value :hright + :on-click align-objects} + i/align-right-refactor] - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) - :class (when disabled-distribute "disabled") - :on-click #(st/emit! (dw/distribute-objects :horizontal))} - i/shape-hdistribute]] + [:button {:class (stl/css-case :align-button true + :disabled disabled-distribute) + :disabled disabled-distribute + :title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) + :data-value :horizontal + :on-click distribute-objects} + i/distribute-horizontally-refactor]] - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :vtop))} - i/shape-valign-top] + [:div {:class (stl/css :align-group)} + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) + :data-value :vtop + :on-click align-objects} + i/align-top-refactor] - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :vcenter))} - i/shape-valign-center] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) + :data-value :vcenter + :on-click align-objects} + i/align-vertical-center-refactor] - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) - :class (when disabled "disabled") - :on-click #(st/emit! (dw/align-objects :vbottom))} - i/shape-valign-bottom] + [:button {:class (stl/css-case :align-button true + :disabled disabled-align) + :disabled disabled-align + :title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) + :data-value :vbottom + :on-click align-objects} + i/align-bottom-refactor] - [:div.align-button.tooltip.tooltip-bottom-left - {:alt (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) - :class (when disabled-distribute "disabled") - :on-click #(st/emit! (dw/distribute-objects :vertical))} - i/shape-vdistribute]]])) + [:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) + :class (stl/css-case :align-button true + :disabled disabled-distribute) + :disabled disabled-distribute + :data-value :vertical + :on-click distribute-objects} + i/distribute-vertical-spacing-refactor]]] + + [:div.align-options + [:div.align-group + [:div.align-button.tooltip.tooltip-bottom + {:alt (tr "workspace.align.hleft" (sc/get-tooltip :align-left)) + :class (when disabled-align "disabled") + :data-value :hleft + :on-click align-objects} + i/shape-halign-left] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter)) + :class (when disabled-align "disabled") + :data-value :hcenter + :on-click align-objects} + i/shape-halign-center] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (tr "workspace.align.hright" (sc/get-tooltip :align-right)) + :class (when disabled-align "disabled") + :data-value :hright + :on-click align-objects} + i/shape-halign-right] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute)) + :class (when disabled-distribute "disabled") + :data-value :horizontal + :on-click distribute-objects} + i/shape-hdistribute]] + + [:div.align-group + [:div.align-button.tooltip.tooltip-bottom-left + {:alt (tr "workspace.align.vtop" (sc/get-tooltip :align-top)) + :class (when disabled-align "disabled") + :data-value :vtop + :on-click align-objects} + i/shape-valign-top] + + [:div.align-button.tooltip.tooltip-bottom-left + {:alt (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter)) + :class (when disabled-align "disabled") + :data-value :vcenter + :on-click align-objects} + i/shape-valign-center] + + [:div.align-button.tooltip.tooltip-bottom-left + {:alt (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom)) + :class (when disabled-align "disabled") + :data-value :vbottom + :on-click align-objects} + i/shape-valign-bottom] + + [:div.align-button.tooltip.tooltip-bottom-left + {:alt (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute)) + :class (when disabled-distribute "disabled") + :data-value :horizontal + :on-click distribute-objects} + i/shape-vdistribute]]])))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.css.json new file mode 100644 index 000000000..daf4d6ec9 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_align_button-primary_CrolU","button-secondary":"menus_align_button-secondary_DsY9F","button-tertiary":"menus_align_button-tertiary_DdNNn","align-options":"menus_align_align-options_uj9dG","align-group":"menus_align_align-group_P-mQt","align-button":"menus_align_align-button_F53jk","button-radio":"menus_align_button-radio_vEMOv","button-warning":"menus_align_button-warning_xzQsb","button-disabled":"menus_align_button-disabled_-zHjz","button-tag":"menus_align_button-tag_ZGsBX","button-icon":"menus_align_button-icon_EpzxY","button-icon-small":"menus_align_button-icon-small_6p5xy","link":"menus_align_link_5SYCx","asset-element":"menus_align_asset-element_6L7XD","input-element":"menus_align_input-element_vH3Z-","new-scrollbar":"menus_align_new-scrollbar_USuNZ","menu-dropdown":"menus_align_menu-dropdown_l1YnD","menu-item":"menus_align_menu-item_mXp3n","shortcut":"menus_align_shortcut_IIlv6","shortcut-key":"menus_align_shortcut-key_Kru5Y","user-icon":"menus_align_user-icon_qLwE0","disabled":"menus_align_disabled_jol2S","spin-animation":"menus_align_spin-animation_OoI-H"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss new file mode 100644 index 000000000..07c0002f5 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss @@ -0,0 +1,42 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.align-options { + display: flex; + height: $s-32; + margin: 0 calc(-1 * $s-2); + gap: $s-4; + .align-group { + display: flex; + align-items: center; + gap: $s-4; + .align-button { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + padding: 0; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.disabled { + cursor: default; + svg { + stroke: var(--button-foreground-color-disabled); + } + &:hover { + background-color: var(--panel-background-color); + svg { + stroke: var(--button-foreground-color-disabled); + } + } + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs index 29f79ca7a..6c01408d2 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.cljs @@ -5,84 +5,166 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.bool + (:require-macros [app.main.style :as stl]) (:require + [app.common.data :as d] [app.main.data.workspace :as dw] [app.main.data.workspace.shortcuts :as sc] [app.main.refs :as refs] [app.main.store :as st] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) + + (mf/defc bool-options [] - (let [selected (mf/deref refs/selected-objects) - selected-with-children (mf/deref refs/selected-shapes-with-children) + (let [new-css-system (mf/use-ctx ctx/new-css-system) - has-invalid-shapes? (->> selected-with-children - (some (comp #{:frame :text} :type))) + selected (mf/deref refs/selected-objects) + head (first selected) + selected-with-children (mf/deref refs/selected-shapes-with-children) + has-invalid-shapes? (->> selected-with-children + (some (comp #{:frame :text} :type))) + is-group? (and (some? head) (= :group (:type head))) + is-bool? (and (some? head) (= :bool (:type head))) + head-bool-type (and (some? head) is-bool? (:bool-type head)) first-not-group-like? (and (= (count selected) 1) (not (contains? #{:group :bool} (:type (first selected))))) disabled-bool-btns (or (empty? selected) has-invalid-shapes? first-not-group-like?) - disabled-flatten (or (empty? selected) has-invalid-shapes?) - - head (first selected) - is-group? (and (some? head) (= :group (:type head))) - is-bool? (and (some? head) (= :bool (:type head))) - head-bool-type (and (some? head) is-bool? (:bool-type head)) + disabled-flatten (or (empty? selected) has-invalid-shapes?) set-bool - (fn [bool-type] - #(cond - (> (count selected) 1) - (st/emit! (dw/create-bool bool-type)) + (mf/use-fn + (mf/deps head head-bool-type selected) + (fn [event] + (let [bool-type (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (cond + (> (count selected) 1) + (st/emit! (dw/create-bool (if new-css-system + (keyword bool-type) + bool-type))) - (and (= (count selected) 1) is-group?) - (st/emit! (dw/group-to-bool (:id head) bool-type)) + (and (= (count selected) 1) is-group?) + (st/emit! (dw/group-to-bool (:id head) (if new-css-system + (keyword bool-type) + bool-type))) - (and (= (count selected) 1) is-bool?) - (if (= head-bool-type bool-type) - (st/emit! (dw/bool-to-group (:id head))) - (st/emit! (dw/change-bool-type (:id head) bool-type)))))] + (and (= (count selected) 1) is-bool?) + (if (= head-bool-type (if new-css-system + (keyword bool-type) + bool-type)) + (st/emit! (dw/bool-to-group (:id head))) + (st/emit! (dw/change-bool-type (:id head) (if new-css-system + (keyword bool-type) + bool-type)))))))) - [:div.align-options - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :union)) - :on-click (set-bool :union)} - i/bool-union] + set-bool-refactor + (mf/use-fn + (mf/deps selected is-group? is-bool?) + (fn [bool-type] + (let [bool-type (if new-css-system + (keyword bool-type) + bool-type)] + (cond + (> (count selected) 1) + (st/emit! (dw/create-bool bool-type)) - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :difference)) - :on-click (set-bool :difference)} - i/bool-difference] + (and (= (count selected) 1) is-group?) + (st/emit! (dw/group-to-bool (:id head) bool-type)) - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :intersection)) - :on-click (set-bool :intersection)} - i/bool-intersection] + (and (= (count selected) 1) is-bool?) + (if (= head-bool-type bool-type) + (st/emit! (dw/bool-to-group (:id head))) + (st/emit! (dw/change-bool-type (:id head) bool-type))))))) - [:div.align-button.tooltip.tooltip-bottom - {:alt (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")") - :class (dom/classnames :disabled disabled-bool-btns - :selected (= head-bool-type :exclude)) - :on-click (set-bool :exclude)} - i/bool-exclude]] + flatten-objects (mf/use-fn #(st/emit! (dw/convert-selected-to-path)))] - [:div.align-group - [:div.align-button.tooltip.tooltip-bottom - {:alt (tr "workspace.shape.menu.flatten") - :class (dom/classnames :disabled disabled-flatten) - :on-click #(st/emit! (dw/convert-selected-to-path))} - i/bool-flatten]]])) + (when (not (and disabled-bool-btns disabled-flatten)) + (if new-css-system + [:div {:class (stl/css :boolean-options)} + [:div {:class (stl/css :bool-group)} + [:& radio-buttons {:selected (d/name head-bool-type) + :on-change set-bool-refactor + :name "bool-options"} + [:& radio-button {:icon i/boolean-union-refactor + :value "union" + :disabled disabled-bool-btns + :title (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") + :id :union}] + [:& radio-button {:icon i/boolean-difference-refactor + :value "difference" + :disabled disabled-bool-btns + :title (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") + :id :difference}] + [:& radio-button {:icon i/boolean-intersection-refactor + :value "intersection" + :disabled disabled-bool-btns + :title (str (tr "intersection") " (" (sc/get-tooltip :bool-intersection) ")") + :id :intersection}] + [:& radio-button {:icon i/boolean-exclude-refactor + :value "exclude" + :disabled disabled-bool-btns + :title (str (tr "exclude") " (" (sc/get-tooltip :bool-exclude) ")") + :id :exclude}]]] + + [:div {:class (stl/css :bool-group)} + [:button + {:title (tr "workspace.shape.menu.flatten") + :class (stl/css-case + :flatten true + :disabled disabled-flatten) + :disabled disabled-flatten + :on-click flatten-objects} + i/boolean-flatten-refactor]]] + + [:div.align-options + [:div.align-group + [:div.align-button.tooltip.tooltip-bottom + {:alt (str (tr "workspace.shape.menu.union") " (" (sc/get-tooltip :bool-union) ")") + :class (dom/classnames :disabled disabled-bool-btns + :selected (= head-bool-type :union)) + :data-value :union + :on-click set-bool} + i/bool-union] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (str (tr "workspace.shape.menu.difference") " (" (sc/get-tooltip :bool-difference) ")") + :class (dom/classnames :disabled disabled-bool-btns + :selected (= head-bool-type :difference)) + :data-value :difference + :on-click set-bool} + i/bool-difference] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (str (tr "workspace.shape.menu.intersection") " (" (sc/get-tooltip :bool-intersection) ")") + :class (dom/classnames :disabled disabled-bool-btns + :selected (= head-bool-type :intersection)) + :data-value :intersection + :on-click set-bool} + i/bool-intersection] + + [:div.align-button.tooltip.tooltip-bottom + {:alt (str (tr "workspace.shape.menu.exclude") " (" (sc/get-tooltip :bool-exclude) ")") + :class (dom/classnames :disabled disabled-bool-btns + :selected (= head-bool-type :exclude)) + :data-value :exclude + :on-click (set-bool :intersection)} + i/bool-exclude]] + + [:div.align-group + [:div.align-button.tooltip.tooltip-bottom + {:alt (tr "workspace.shape.menu.flatten") + :class (dom/classnames :disabled disabled-flatten) + :on-click flatten-objects} + i/bool-flatten]]])))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.css.json new file mode 100644 index 000000000..abfb6ac3e --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_bool_button-primary_OZ9LY","button-secondary":"menus_bool_button-secondary_XAFBl","button-tertiary":"menus_bool_button-tertiary_YQhEH","boolean-options":"menus_bool_boolean-options_Yq7h2","bool-group":"menus_bool_bool-group_eJQaa","flatten":"menus_bool_flatten_Mx-oM","button-radio":"menus_bool_button-radio_WaRtW","button-warning":"menus_bool_button-warning_3dgn5","button-disabled":"menus_bool_button-disabled_uItqB","button-tag":"menus_bool_button-tag_FX2MF","button-icon":"menus_bool_button-icon_O1hdU","button-icon-small":"menus_bool_button-icon-small_NE9w7","link":"menus_bool_link_YleIO","asset-element":"menus_bool_asset-element_AOtGG","input-element":"menus_bool_input-element_r4K6y","new-scrollbar":"menus_bool_new-scrollbar_9D-29","menu-dropdown":"menus_bool_menu-dropdown_ghGsu","menu-item":"menus_bool_menu-item_PBOy4","shortcut":"menus_bool_shortcut_CzGpH","shortcut-key":"menus_bool_shortcut-key_6ESUj","user-icon":"menus_bool_user-icon_u8tS1","disabled":"menus_bool_disabled_Q2PTU","spin-animation":"menus_bool_spin-animation_uXbpx"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss new file mode 100644 index 000000000..c5a35400a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/bool.scss @@ -0,0 +1,40 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.boolean-options { + display: flex; + height: $s-32; + gap: $s-4; + margin: 0 calc(-1 * $s-2); + .bool-group { + display: flex; + align-items: center; + .flatten { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.disabled { + cursor: default; + svg { + stroke: var(--button-foreground-color-disabled); + } + &:hover { + background-color: var(--panel-background-color); + svg { + stroke: var(--button-foreground-color-disabled); + } + } + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs index 6ac870eca..c9f901b71 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.layer + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -13,6 +14,7 @@ [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] [app.main.ui.components.select :refer [select]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -31,10 +33,14 @@ (mf/defc layer-menu {::mf/wrap-props false} [props] - (let [ids (unchecked-get props "ids") + (let [new-css-system (mf/use-ctx ctx/new-css-system) + ids (unchecked-get props "ids") type (unchecked-get props "type") values (unchecked-get props "values") + hidden? (:hidden values) + blocked? (:blocked values) + current-blend-mode (or (:blend-mode values) :normal) current-opacity (:opacity values) @@ -59,9 +65,9 @@ (mf/deps on-change) (fn [value] (swap! state* assoc - :selected-blend-mode value - :option-highlighted? false - :preview-complete? true) + :selected-blend-mode value + :option-highlighted? false + :preview-complete? true) (st/emit! (dw/unset-preview-blend-mode ids)) (on-change :blend-mode value))) @@ -70,8 +76,8 @@ (mf/deps on-change current-blend-mode) (fn [value] (swap! state* assoc - :preview-complete? false - :option-highlighted? true) + :preview-complete? false + :option-highlighted? true) (st/emit! (dw/set-preview-blend-mode ids value)))) handle-blend-mode-leave @@ -142,45 +148,89 @@ preview-complete?)) (swap! state* assoc :selected-blend-mode current-blend-mode))) - [:div.element-set - [:div.element-set-title - [:span - (case type - :multiple (tr "workspace.options.layer-options.title.multiple") - :group (tr "workspace.options.layer-options.title.group") - (tr "workspace.options.layer-options.title"))]] + (if new-css-system + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css-case :element-set-content true + :hidden (or hidden? + blocked?))} + [:div {:class (stl/css :select)} + [:& select + {:default-value selected-blend-mode + :options options + :on-change handle-change-blend-mode + :is-open? option-highlighted? + :on-pointer-enter-option handle-blend-mode-enter + :on-pointer-leave-option handle-blend-mode-leave}]] + [:div {:class (stl/css :input) + :title (tr "workspace.options.opacity")} + [:span {:class (stl/css :icon)} "%"] + [:> numeric-input* + {:value (opacity->string current-opacity) + :placeholder (tr "settings.multiple") + :on-change handle-opacity-change + :min 0 + :max 100 + :className (stl/css :numeric-input)}]] - [:div.element-set-content - [:div.row-flex - [:& select - {:class "flex-grow no-check" - :default-value selected-blend-mode - :options options - :on-change handle-change-blend-mode - :is-open? option-highlighted? - :on-pointer-enter-option handle-blend-mode-enter - :on-pointer-leave-option handle-blend-mode-leave}] - [:div.input-element {:title (tr "workspace.options.opacity") - :class "percentail"} - [:> numeric-input* - {:value (opacity->string current-opacity) - :placeholder (tr "settings.multiple") - :on-change handle-opacity-change - :min 0 - :max 100}]] + [:div {:class (stl/css :actions)} + (cond + (or (= :multiple hidden?) (not hidden?)) + [:button {:on-click handle-set-hidden + :class (stl/css :hidden-btn)} i/shown-refactor] - [:div.element-set-actions.layer-actions - (cond - (or (= :multiple (:hidden values)) (not (:hidden values))) - [:div.element-set-actions-button {:on-click handle-set-hidden} i/eye] + :else + [:button {:on-click handle-set-visible + :class (stl/css :hidden-btn)} i/hide-refactor]) - :else - [:div.element-set-actions-button {:on-click handle-set-visible} i/eye-closed]) + (cond + (or (= :multiple blocked?) (not blocked?)) + [:button {:on-click handle-set-blocked + :class (stl/css :lock-btn)} i/unlock-refactor] - (cond - (or (= :multiple (:blocked values)) (not (:blocked values))) - [:div.element-set-actions-button {:on-click handle-set-blocked} i/unlock] + :else + [:button {:on-click handle-set-unblocked + :class (stl/css :lock-btn)} i/lock-refactor])]]] - :else - [:div.element-set-actions-button {:on-click handle-set-unblocked} i/lock])]]]])) + [:div.element-set + [:div.element-set-title + [:span + (case type + :multiple (tr "workspace.options.layer-options.title.multiple") + :group (tr "workspace.options.layer-options.title.group") + (tr "workspace.options.layer-options.title"))]] + + [:div.element-set-content + [:div.row-flex + [:& select + {:class "flex-grow no-check" + :default-value selected-blend-mode + :options options + :on-change handle-change-blend-mode + :is-open? option-highlighted? + :on-pointer-enter-option handle-blend-mode-enter + :on-pointer-leave-option handle-blend-mode-leave}] + + [:div.input-element {:title (tr "workspace.options.opacity") + :class "percentail"} + [:> numeric-input* + {:value (opacity->string current-opacity) + :placeholder (tr "settings.multiple") + :on-change handle-opacity-change + :min 0 + :max 100}]] + + [:div.element-set-actions.layer-actions + (cond + (or (= :multiple hidden?) (not hidden?)) + [:div.element-set-actions-button {:on-click handle-set-hidden} i/eye] + + :else + [:div.element-set-actions-button {:on-click handle-set-visible} i/eye-closed]) + + (cond + (or (= :multiple blocked?) (not blocked?)) + [:div.element-set-actions-button {:on-click handle-set-blocked} i/unlock] + + :else + [:div.element-set-actions-button {:on-click handle-set-unblocked} i/lock])]]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.css.json new file mode 100644 index 000000000..04452fdfd --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_layer_button-primary_RAH7Y","button-secondary":"menus_layer_button-secondary_XiI8s","button-tertiary":"menus_layer_button-tertiary_MOiV1","element-set":"menus_layer_element-set_V8O5E","element-set-content":"menus_layer_element-set-content_cX8Zl","actions":"menus_layer_actions_h7LSS","hidden-btn":"menus_layer_hidden-btn_DAFoH","lock-btn":"menus_layer_lock-btn_1Dj4o","button-radio":"menus_layer_button-radio_Qq8Oh","button-warning":"menus_layer_button-warning_vJhe5","button-disabled":"menus_layer_button-disabled_0b0gp","button-tag":"menus_layer_button-tag_0wtbe","button-icon":"menus_layer_button-icon_N7bym","button-icon-small":"menus_layer_button-icon-small_Tl6tC","link":"menus_layer_link_VoHCZ","asset-element":"menus_layer_asset-element_4gxSP","select":"menus_layer_select_Jyi8h","input-element":"menus_layer_input-element_66YCF","input":"menus_layer_input_-gKlR","new-scrollbar":"menus_layer_new-scrollbar_spAR-","menu-dropdown":"menus_layer_menu-dropdown_GTCqw","menu-item":"menus_layer_menu-item_huF55","shortcut":"menus_layer_shortcut_UIcAB","shortcut-key":"menus_layer_shortcut-key_rMJYu","user-icon":"menus_layer_user-icon_Mc6Mt","icon":"menus_layer_icon_j1zrB","numeric-input":"menus_layer_numeric-input_Bd9vS","hidden":"menus_layer_hidden_Q6WIJ","spin-animation":"menus_layer_spin-animation_dlhY4"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss new file mode 100644 index 000000000..62687e83a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layer.scss @@ -0,0 +1,83 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-set { + .element-set-content { + display: flex; + height: $s-32; + gap: $s-4; + .select { + @extend .asset-element; + width: $s-124; + margin: 0; + padding: 0; + border: 1px solid var(--input-background-color); + } + .input { + @extend .input-element; + width: $s-60; + padding-left: $s-8; + border: 1px solid var(--input-background-color); + .icon { + @include flexCenter; + margin-right: $s-4; + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + } + } + .actions { + display: flex; + gap: $s-4; + .hidden-btn, + .lock-btn { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + + &.hidden { + .select { + background-color: transparent; + border: 1px solid var(--input-border-color-disabled); + color: var(--input-foreground-color-disabled); + } + .input { + background-color: transparent; + border: 1px solid var(--input-border-color-disabled); + color: var(--input-foreground-color-disable); + + .icon { + stroke: var(--input-foreground-color-disabled); + } + .numeric-input { + color: var(--input-foreground-color-disabled); + } + } + .actions { + .hidden-btn, + .lock-btn { + background-color: transparent; + svg { + stroke: var(--input-foreground-color-disabled); + } + } + } + } + } +} 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 c47566371..7dbdc17da 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,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.layout-container + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -16,12 +17,48 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] [app.main.ui.components.select :refer [select]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] [app.util.dom :as dom] [cuerdas.core :as str] [rumext.v2 :as mf])) +(defn dir-icons-refactor + [val] + (case val + :row i/grid-row-refactor + :row-reverse i/row-reverse-refactor + :column i/column-refactor + :column-reverse i/column-reverse-refactor)) + +(mf/defc direction-btn + [{:keys [dir saved-dir on-click icon?] :as props}] + (let [handle-on-click + (mf/use-fn + (mf/deps on-click dir) + (fn [] + (when (some? on-click) + (on-click dir))))] + + [:button.dir.tooltip.tooltip-bottom + {:class (dom/classnames :active (= saved-dir dir) + :row (= :row dir) + :row-reverse (= :row-reverse dir) + :column-reverse (= :column-reverse dir) + :column (= :column dir)) + :key (dm/str "direction-" dir) + :alt (str/replace (str/capital (d/name dir)) "-" " ") + :on-click handle-on-click} + (if icon? + i/auto-direction + (str/replace (str/capital (d/name dir)) "-" " "))])) + + +;; FLEX COMPONENTS + (def layout-container-flex-attrs [:layout ;; :flex, :grid in the future :layout-flex-dir ;; :row, :row-reverse, :column, :column-reverse @@ -120,132 +157,332 @@ :stretch i/align-self-column-strech :baseline i/align-self-column-baseline)))) -(defn get-layout-grid-icon +(defn get-layout-flex-icon-refactor [type val is-col?] (case type - :justify-items + :align-items (if is-col? (case val - :stretch i/align-items-row-strech - :start i/grid-justify-content-column-start - :end i/grid-justify-content-column-end - :center i/grid-justify-content-column-center - :space-around i/grid-justify-content-column-around - :space-between i/grid-justify-content-column-between - :space-evenly i/grid-justify-content-column-between) + :start i/align-items-column-start-refactor + :end i/align-items-column-end-refactor + :center i/align-items-column-center-refactor + :stretch i/align-items-column-strech + :baseline i/align-items-column-baseline) + (case val ;; TODO Check strech and baseline icons + :start i/align-items-row-start-refactor + :end i/align-items-row-end-refactor + :center i/align-items-row-center-refactor + :stretch i/align-items-row-strech + :baseline i/align-items-row-baseline)) + + :justify-content + (if is-col? + (case val + :start i/justify-content-column-start-refactor + :end i/justify-content-column-end-refactor + :center i/justify-content-column-center-refactor + :space-around i/justify-content-column-around-refactor + :space-evenly i/justify-content-column-evenly-refactor + :space-between i/justify-content-column-between-refactor) + (case val + :start i/justify-content-row-start-refactor + :end i/justify-content-row-end-refactor + :center i/justify-content-row-center-refactor + :space-around i/justify-content-row-around-refactor + :space-evenly i/justify-content-row-evenly-refactor + :space-between i/justify-content-row-between-refactor)) + + :align-content + (if is-col? + (case val + :start i/align-content-column-start-refactor + :end i/align-content-column-end-refactor + :center i/align-content-column-center-refactor + :space-around i/align-content-column-around-refactor + :space-evenly i/align-content-column-evenly-refactor + :space-between i/align-content-column-between-refactor + :stretch nil) (case val - :stretch i/align-items-column-strech - :start i/grid-justify-content-row-start - :end i/grid-justify-content-row-end - :center i/grid-justify-content-row-center - :space-around i/grid-justify-content-row-around - :space-between i/grid-justify-content-row-between - :space-evenly i/grid-justify-content-row-between)))) + :start i/align-content-row-start-refactor + :end i/align-content-row-end-refactor + :center i/align-content-row-center-refactor + :space-around i/align-content-row-around-refactor + :space-evenly i/align-content-row-evenly-refactor + :space-between i/align-content-row-between-refactor + :stretch nil)) -(mf/defc direction-btn - [{:keys [dir saved-dir set-direction icon?] :as props}] - (let [handle-on-click - (mf/use-callback - (mf/deps set-direction dir) - (fn [] - (when (some? set-direction) - (set-direction dir))))] - [:button.dir.tooltip.tooltip-bottom - {:class (dom/classnames :active (= saved-dir dir) - :row (= :row dir) - :row-reverse (= :row-reverse dir) - :column-reverse (= :column-reverse dir) - :column (= :column dir)) - :key (dm/str "direction-" dir) - :alt (str/replace (str/capital (d/name dir)) "-" " ") - :on-click handle-on-click} - (if icon? - i/auto-direction - (str/replace (str/capital (d/name dir)) "-" " "))])) + :align-self + (if is-col? + (case val + :auto i/remove-refactor + :start i/align-self-row-left-refactor + :end i/align-self-row-right-refactor + :center i/align-self-row-center-refactor + :stretch i/align-self-row-strech + :baseline i/align-self-row-baseline) + (case val + :auto i/remove-refactor + :start i/align-self-column-top-refactor + :end i/align-self-column-bottom-refactor + :center i/align-self-column-center-refactor + :stretch i/align-self-column-strech + :baseline i/align-self-column-baseline)))) + +(mf/defc direction-row-flex + [{:keys [saved-dir on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:& radio-buttons {:selected (d/name saved-dir) + :on-change on-change + :name "flex-direction"} + [:& radio-button {:value "row" + :id "flex-direction-row" + :title "Row" + :icon (dir-icons-refactor :row)}] + [:& radio-button {:value "row-reverse" + :id "flex-direction-row-reverse" + :title "Row reverse" + :icon (dir-icons-refactor :row-reverse)}] + [:& radio-button {:value "column" + :id "flex-direction-column" + :title "Column" + :icon (dir-icons-refactor :column)}] + [:& radio-button {:value "column-reverse" + :id "flex-direction-column-reverse" + :title "Column reverse" + :icon (dir-icons-refactor :column-reverse)}]] + [:* + (for [dir [:row :row-reverse :column :column-reverse]] + [:& direction-btn {:key (d/name dir) + :dir dir + :saved-dir saved-dir + :on-click on-change + :icon? true}])]))) (mf/defc wrap-row - [{:keys [wrap-type set-wrap] :as props}] - [:* - [:button.tooltip.tooltip-bottom - {:class (dom/classnames :active (= wrap-type :nowrap)) - :alt "No wrap" - :on-click #(set-wrap :nowrap) - :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]]) + [{:keys [wrap-type on-click] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:button {:class (stl/css-case :wrap-button true + :selected (= wrap-type :wrap)) + :title (if (= :wrap wrap-type) + "No wrap" + "Wrap") + :on-click on-click} + i/wrap-refactor] + + [:* + [:button.tooltip.tooltip-bottom + {:class (dom/classnames :active (= wrap-type :nowrap)) + :alt "No wrap" + :data-value :nowrap + :on-click on-click + :style {:padding 0}} + [:span.no-wrap i/minus]] + [:button.wrap.tooltip.tooltip-bottom + {:class (dom/classnames :active (= wrap-type :wrap)) + :alt "Wrap" + :data-value :wrap + :on-click on-click} + i/auto-wrap]]))) (mf/defc align-row - [{:keys [is-col? align-items set-align] :as props}] + [{:keys [is-col? align-items on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:& radio-buttons {:selected (d/name align-items) + :on-change on-change + :name "flex-align-items"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon-refactor :align-items :start is-col?) + :title "Align items start" + :id "align-items-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon-refactor :align-items :center is-col?) + :title "Align items center" + :id "align-items-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon-refactor :align-items :end is-col?) + :title "Align items end" + :id "align-items-end"}]] - [:div.align-items-style - (for [align [:start :center :end #_:stretch #_:baseline]] - [: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?)])]) + [:div.align-items-style + [:button.align-start.tooltip.tooltip-bottom + {:class (dom/classnames :active (= align-items :start)) + :alt "Align items start" + :data-value :start + :on-click on-change} + (get-layout-flex-icon :align-items :start is-col?)] + [:button.align-start.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-items :center)) + :alt "Align items center" + :data-value :center + :on-click on-change} + (get-layout-flex-icon :align-items :center is-col?)] + [:button.align-start.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-items :end)) + :alt "Align items end" + :data-value :end + :on-click on-change} + (get-layout-flex-icon :align-items :end 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]] - [: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?)])] - [:div.align-content-style - (for [align [:space-between :space-around :space-evenly]] - [:button.align-content.tooltip - {:class (dom/classnames :active (= align-content align) - :tooltip-bottom-left (not= align :space-between) - :tooltip-bottom (= align :space-between)) - :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?)])]]) + [{:keys [is-col? align-content on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:& radio-buttons {:selected (d/name align-content) + :on-change on-change + :name "flex-align-content"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon-refactor :align-content :start is-col?) + :title "Align content start" + :id "align-content-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon-refactor :align-content :center is-col?) + :title "Align content center" + :id "align-content-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon-refactor :align-content :end is-col?) + :title "Align content end" + :id "align-content-end"}] + [:& radio-button {:value "space-between" + :icon (get-layout-flex-icon-refactor :align-content :space-between is-col?) + :title "Align content space-between" + :id "align-content-space-between"}] + [:& radio-button {:value "space-around" + :icon (get-layout-flex-icon-refactor :align-content :space-around is-col?) + :title "Align content space-around" + :id "align-content-space-around"}] + [:& radio-button {:value "space-evenly" + :icon (get-layout-flex-icon-refactor :align-content :space-evenly is-col?) + :title "Align content space-evenly" + :id "align-content-space-evenly"}]] + [:* + [:div.align-content-style + [:button.align-content.tooltip.tooltip-bottom + {:class (dom/classnames :active (= align-content :start)) + :alt "Align content start" + :data-value :start + :on-click on-change} + (get-layout-flex-icon :align-content :start is-col?)] + [:button.align-content.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-content :center)) + :alt "Align content center" + :data-value :center + :on-click on-change} + (get-layout-flex-icon :align-content :center is-col?)] + [:button.align-content.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-content :end)) + :alt "Align content end" + :data-value :end + :on-click on-change} + (get-layout-flex-icon :align-content :end is-col?)]] + [:div.align-content-style + [:button.align-content.tooltip.tooltip-bottom + {:class (dom/classnames :active (= align-content :space-between)) + :alt "Align content space-between" + :data-value :space-between + :on-click on-change} + (get-layout-flex-icon :align-content :space-between is-col?)] + [:button.align-content.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-content :space-around)) + :alt "Align content space-around" + :data-value :space-around + :on-click on-change} + (get-layout-flex-icon :align-content :space-around is-col?)] + [:button.align-content.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= align-content :space-evenly)) + :alt "Align content space-evenly" + :data-value :space-evenly + :on-click on-change} + (get-layout-flex-icon :align-content :space-evenly 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]] - [: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.justify-content-style - (for [justify [:space-between :space-around :space-evenly]] - [:button.justify.tooltip - {:class (dom/classnames :active (= justify-content justify) - :tooltip-bottom-left (not= justify :space-between) - :tooltip-bottom (= justify :space-between)) - :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?)])]]) + [{:keys [is-col? justify-content on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:& radio-buttons {:selected (d/name justify-content) + :on-change on-change + :name "flex-justify"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon-refactor :justify-content :start is-col?) + :title "Justify content start" + :id "justify-content-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon-refactor :justify-content :center is-col?) + :title "Justify content center" + :id "justify-content-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon-refactor :justify-content :end is-col?) + :title "Justify content end" + :id "justify-content-end"}] + [:& radio-button {:value "space-between" + :icon (get-layout-flex-icon-refactor :justify-content :space-between is-col?) + :title "Justify content space-between" + :id "justify-content-space-between"}] + [:& radio-button {:value "space-around" + :icon (get-layout-flex-icon-refactor :justify-content :space-around is-col?) + :title "Justify content space-around" + :id "justify-content-space-around"}] + [:& radio-button {:value "space-evenly" + :icon (get-layout-flex-icon-refactor :justify-content :space-evenly is-col?) + :title "Justify content space-evenly" + :id "justify-content-space-evenly"}]] + [:* + [:div.justify-content-style + [:button.justify.tooltip.tooltip-bottom + {:class (dom/classnames :active (= justify-content :start)) + :alt "Justify content start" + :data-value :start + :on-click on-change} + (get-layout-flex-icon :justify-content :start is-col?)] + [:button.justify.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= justify-content :center)) + :data-value :center + :alt "Justify content center" + :on-click on-change} + (get-layout-flex-icon :justify-content :center is-col?)] + [:button.justify.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= justify-content :end)) + :alt "Justify content end" + :data-value :end + :on-click on-change} + (get-layout-flex-icon :justify-content :end is-col?)]] + [:div.justify-content-style + [:button.justify.tooltip.tooltip-bottom + {:class (dom/classnames :active (= justify-content :space-between)) + :alt "Justify content space-between" + :data-value :space-between + :on-click on-change} + (get-layout-flex-icon :justify-content :space-between is-col?)] + [:button.justify.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= justify-content :space-around)) + :alt "Justify content space-around" + :data-value :space-around + :on-click on-change} + (get-layout-flex-icon :justify-content :space-around is-col?)] + [:button.justify.tooltip.tooltip-bottom-left + {:class (dom/classnames :active (= justify-content :space-evenly)) + :alt "Justify content space-evenly" + :data-value :space-evenly + :on-click on-change} + (get-layout-flex-icon :justify-content :space-evenly is-col?)]]]))) (mf/defc padding-section [{:keys [values on-change-style on-change] :as props}] - (let [padding-type (:layout-padding-type values) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + padding-type (:layout-padding-type values) + + toggle-padding-mode + (mf/use-fn + (mf/deps padding-type on-change-style) + (fn [] + (let [padding (if (= padding-type :multiple) :simple :multiple)] + (on-change-style padding)))) + p1 (if (and (not (= :multiple (:layout-padding values))) (= (dm/get-in values [:layout-padding :p1]) (dm/get-in values [:layout-padding :p3]))) @@ -270,62 +507,153 @@ ;;on destroy component (select-paddings false false false false)))) - [:div.padding-row - (cond - (= padding-type :simple) - - [:div.padding-group - [:div.padding-item.tooltip.tooltip-bottom-left - {:alt "Vertical padding"} - [:span.icon.rotated i/auto-padding-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :simple :p1) - :on-focus #(do - (dom/select-target %) - (select-paddings true false true false)) - :value p1}]] - - [:div.padding-item.tooltip.tooltip-bottom-left - {:alt "Horizontal padding"} - [:span.icon i/auto-padding-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :simple :p2) - :on-focus #(do (dom/select-target %) - (select-paddings false true false true)) - :on-blur #(select-paddings false false false false) - :value p2}]]] - - (= padding-type :multiple) - [:div.wrapper - (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.auto + (if new-css-system + [:div {:class (stl/css :padding-group)} + [:div {:class (stl/css :padding-inputs)} + (cond + (= padding-type :simple) + [:div {:class (stl/css :paddings-simple)} + [:div {:class (stl/css :padding-simple) + :title "Vertical padding"} + [:span {:class (stl/css :icon)} + i/padding-top-bottom-refactor] [:> numeric-input* - {:placeholder "--" - :on-change (partial on-change :multiple num) - :on-focus #(do (dom/select-target %) - (select-padding num)) - :on-blur #(select-paddings false false false false) - :value (num (:layout-padding values))}]]])]) + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :simple :p1) + :on-focus #(do + (dom/select-target %) + (select-paddings true false true false)) + :value p1}]] + [:div {:class (stl/css :padding-simple) + :title "Horizontal padding"} - [:div.padding-icons - [:div.padding-icon.tooltip.tooltip-bottom-left - {:class (dom/classnames :selected (= padding-type :multiple)) - :alt "Independent paddings" - :on-click #(on-change-style (if (= padding-type :multiple) :simple :multiple))} - i/auto-padding-side]]])) + [:span {:class (stl/css :icon)} + i/padding-left-right-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :simple :p2) + :on-focus #(do (dom/select-target %) + (select-paddings false true false true)) + :on-blur #(select-paddings false false false false) + :value p2}]]] + (= padding-type :multiple) + [:div {:class (stl/css :paddings-multiple)} + + [:div {:class (stl/css :padding-multiple) + :title "Top padding"} + [:span {:class (stl/css :icon)} + i/padding-top-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p1) + :on-focus #(do (dom/select-target %) + (select-padding :p1)) + :on-blur #(select-paddings false false false false) + :value (:p1 (:layout-padding values))}]] + + [:div {:class (stl/css :padding-multiple) + :title "Right padding"} + [:span {:class (stl/css :icon)} + i/padding-right-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p2) + :on-focus #(do (dom/select-target %) + (select-padding :p2)) + :on-blur #(select-paddings false false false false) + :value (:p2 (:layout-padding values))}]] + + [:div {:class (stl/css :padding-multiple) + :title "Bottom padding"} + [:span {:class (stl/css :icon)} + i/padding-bottom-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p3) + :on-focus #(do (dom/select-target %) + (select-padding :p3)) + :on-blur #(select-paddings false false false false) + :value (:p3 (:layout-padding values))}]] + + [:div {:class (stl/css :padding-multiple) + :title "Left padding"} + [:span {:class (stl/css :icon)} + i/padding-left-refactor] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-change (partial on-change :multiple :p4) + :on-focus #(do (dom/select-target %) + (select-padding :p4)) + :on-blur #(select-paddings false false false false) + :value (:p4 (:layout-padding values))}]]])] + [:button {:class (stl/css-case :padding-toggle true + :selected (= padding-type :multiple)) + :on-click toggle-padding-mode} + i/padding-extended-refactor]] + + [:div.padding-row + (cond + (= padding-type :simple) + + [:div.padding-group + [:div.padding-item.tooltip.tooltip-bottom-left + {:alt "Vertical padding"} + [:span.icon.rotated i/auto-padding-both-sides] + [:> numeric-input* + {:placeholder "--" + :on-change (partial on-change :simple :p1) + :on-focus #(do + (dom/select-target %) + (select-paddings true false true false)) + :value p1}]] + + [:div.padding-item.tooltip.tooltip-bottom-left + {:alt "Horizontal padding"} + [:span.icon i/auto-padding-both-sides] + [:> numeric-input* + {:placeholder "--" + :on-change (partial on-change :simple :p2) + :on-focus #(do (dom/select-target %) + (select-paddings false true false true)) + :on-blur #(select-paddings false false false false) + :value p2}]]] + + (= padding-type :multiple) + [:div.wrapper + (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.auto + [:> numeric-input* + {:placeholder "--" + :on-change (partial on-change :multiple num) + :on-focus #(do (dom/select-target %) + (select-padding num)) + :on-blur #(select-paddings false false false false) + :value (num (:layout-padding values))}]]])]) + + [:div.padding-icons + [:div.padding-icon.tooltip.tooltip-bottom-left + {:class (dom/classnames :selected (= padding-type :multiple)) + :alt "Independent paddings" + :on-click toggle-padding-mode} + i/auto-padding-side]]]))) (mf/defc gap-section - [{:keys [is-col? wrap-type gap-selected? set-gap gap-value]}] - (let [select-gap + [{:keys [is-col? wrap-type gap-selected? on-change gap-value]}] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + select-gap (fn [gap] (st/emit! (udw/set-gap-selected gap)))] @@ -335,79 +663,189 @@ ;;on destroy component (select-gap nil)))) - [:div.layout-row - [:div.gap.row-title "Gap"] - [:div.gap-group - [:div.gap-row.tooltip.tooltip-bottom-left - {:alt "Column gap"} - [:span.icon - i/auto-gap] - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :column-gap) - (reset! gap-selected? :column-gap) - (dom/select-target event)) - :on-change (partial set-gap (= :nowrap wrap-type) :column-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :value (:column-gap gap-value) - :disabled (and (= :nowrap wrap-type) is-col?)}]] + (if new-css-system + [:div {:class (stl/css :gap-group)} + [:div {:class (stl/css-case :row-gap true + :disabled (and (= :nowrap wrap-type) (not is-col?))) + :title "Row gap"} + [:span {:class (stl/css :icon)} + i/gap-vertical-refactor] + [:> numeric-input* {:className (stl/css :numeric-input true) + :no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :row-gap) + (reset! gap-selected? :row-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :row-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :value (:row-gap gap-value) + :disabled (and (= :nowrap wrap-type) (not is-col?))}]] + [:div {:class (stl/css-case :column-gap true + :disabled (and (= :nowrap wrap-type) is-col?)) + :title "Column gap"} + [:span {:class (stl/css :icon)} + i/gap-horizontal-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :column-gap) + (reset! gap-selected? :column-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :column-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :value (:column-gap gap-value) + :disabled (and (= :nowrap wrap-type) is-col?)}]]] - [:div.gap-row.tooltip.tooltip-bottom-left - {:alt "Row gap"} - [:span.icon.rotated - i/auto-gap] - [:> numeric-input* {:no-validate true - :placeholder "--" - :on-focus (fn [event] - (select-gap :row-gap) - (reset! gap-selected? :row-gap) - (dom/select-target event)) - :on-change (partial set-gap (= :nowrap wrap-type) :row-gap) - :on-blur (fn [_] - (select-gap nil) - (reset! gap-selected? :none)) - :value (:row-gap gap-value) - :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]])) + [:div.layout-row + [:div.gap.row-title "Gap"] + [:div.gap-group + [:div.gap-row.tooltip.tooltip-bottom-left + {:alt "Column gap"} + [:span.icon + i/auto-gap] + [:> numeric-input* {:no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :column-gap) + (reset! gap-selected? :column-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :column-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :value (:column-gap gap-value) + :disabled (and (= :nowrap wrap-type) is-col?)}]] + + [:div.gap-row.tooltip.tooltip-bottom-left + {:alt "Row gap"} + [:span.icon.rotated + i/auto-gap] + [:> numeric-input* {:no-validate true + :placeholder "--" + :on-focus (fn [event] + (select-gap :row-gap) + (reset! gap-selected? :row-gap) + (dom/select-target event)) + :on-change (partial on-change (= :nowrap wrap-type) :row-gap) + :on-blur (fn [_] + (select-gap nil) + (reset! gap-selected? :none)) + :value (:row-gap gap-value) + :disabled (and (= :nowrap wrap-type) (not is-col?))}]]]]))) + +;; GRID COMPONENTS + +(defn get-layout-grid-icon + [type val is-col?] + (case type + :justify-items + (if is-col? + (case val + :stretch i/align-items-row-strech + :start i/grid-justify-content-column-start + :end i/grid-justify-content-column-end + :center i/grid-justify-content-column-center + :space-around i/grid-justify-content-column-around + :space-between i/grid-justify-content-column-between + :space-evenly i/grid-justify-content-column-between) + + (case val + :stretch i/align-items-column-strech + :start i/grid-justify-content-row-start + :end i/grid-justify-content-row-end + :center i/grid-justify-content-row-center + :space-around i/grid-justify-content-row-around + :space-between i/grid-justify-content-row-between + :space-evenly i/grid-justify-content-row-between)))) + +(mf/defc direction-row-grid + [{:keys [saved-dir on-change-refactor on-click] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + (if new-css-system + [:& radio-buttons {:selected (d/name saved-dir) + :on-change on-change-refactor + :name "grid-direction"} + [:& radio-button {:value "row" + :id "grid-direction-row" + :title "Row" + :icon (dir-icons-refactor :row)}] + [:& radio-button {:value "column" + :id "grid-direction-column" + :title "Column" + :icon (dir-icons-refactor :column)}]] + [:* + [:& direction-btn {:key "grid-direction-row" + :dir :row + :saved-dir saved-dir + :on-click on-click + :icon? true}] + [:& direction-btn {:key "grid-direction-column" + :dir :column + :saved-dir saved-dir + :on-click on-click + :icon? true}]]))) (mf/defc grid-edit-mode [{:keys [id] :as props}] - (let [edition (mf/deref refs/selected-edition) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + edition (mf/deref refs/selected-edition) active? (= id edition) toggle-edit-mode - (mf/use-callback + (mf/use-fn (mf/deps id edition) (fn [] (if-not active? (st/emit! (udw/start-edition-mode id)) (st/emit! :interrupt))))] - - [:button.tooltip.tooltip-bottom-left - {:class (dom/classnames :active active?) - :alt "Grid edit mode" - :on-click #(toggle-edit-mode) - :style {:padding 0}} - "Edit grid" - i/grid-layout-mode])) + (if new-css-system + [:div "new-edit-mode"] + [:button.tooltip.tooltip-bottom-left + {:class (dom/classnames :active active?) + :alt "Grid edit mode" + :on-click #(toggle-edit-mode) + :style {:padding 0}} + "Edit grid" + i/grid-layout-mode]))) (mf/defc align-grid-row [{:keys [is-col? align-items set-align] :as props}] - (let [type (if is-col? :column :row)] - [:div.align-items-style - (for [align [:start :center :end]] - [:button.align-start.tooltip - {:class (dom/classnames :active (= align-items align) - :tooltip-bottom-left (not= align :start) - :tooltip-bottom (= align :start)) - :alt (if is-col? - (dm/str "justify-items: " (d/name align)) - (dm/str "align-items: " (d/name align))) - :on-click #(set-align align type) - :key (dm/str "align-items" (d/name align))} - (get-layout-flex-icon :align-items align is-col?)])])) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + type (if is-col? :column :row)] + (if new-css-system + [:& radio-buttons {:selected (d/name align-items) + :on-change set-align + :name "flex-align-items"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon-refactor :align-items :start is-col?) + :title "Align items start" + :id "align-items-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon-refactor :align-items :center is-col?) + :title "Align items center" + :id "align-items-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon-refactor :align-items :end is-col?) + :title "Align items end" + :id "align-items-end"}]] + [:div.align-items-style + (for [align [:start :center :end]] + [:button.align-start.tooltip + {:class (dom/classnames :active (= align-items align) + :tooltip-bottom-left (not= align :start) + :tooltip-bottom (= align :start)) + :alt (if is-col? + (dm/str "justify-items: " (d/name align)) + (dm/str "align-items: " (d/name align))) + :on-click #(set-align align type) + :key (dm/str "align-items" (d/name align))} + (get-layout-flex-icon :align-items align is-col?)])]))) (mf/defc justify-grid-row [{:keys [is-col? justify-items set-justify] :as props}] @@ -483,24 +921,40 @@ {:on-click #(remove-element type index)} i/minus]])])])) +;; LAYOUT COMPONENT + (mf/defc layout-container-menu {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values" "multiple"]))]} [{:keys [ids values multiple] :as props}] - (let [open? (mf/use-state false) + (let [new-css-system (mf/use-ctx ctx/new-css-system) ;; Display layout-type (:layout values) + state* (mf/use-state (if layout-type + true + false)) + + open? (deref state*) + toggle-content (mf/use-fn #(swap! state* not)) + on-add-layout (fn [type] (st/emit! (dwsl/create-layout type)) - (reset! open? true)) + (reset! state* true)) + on-set-layout + (mf/use-fn + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (on-add-layout value)))) on-remove-layout (fn [_] (st/emit! (dwsl/remove-layout ids)) - (reset! open? false)) + (reset! state* false)) set-flex (fn [] @@ -512,35 +966,112 @@ (st/emit! (dwsl/remove-layout ids)) (on-add-layout :grid)) + toggle-layout-style + (mf/use-fn + (fn [value] + (if (= "flex" value) + (set-flex) + (set-grid)))) + ;; Flex-direction saved-dir (:layout-flex-dir values) - is-col? (or (= :column saved-dir) (= :column-reverse saved-dir)) + + is-col? (or (= :column saved-dir) (= :column-reverse saved-dir)) + + set-direction-refactor + (mf/use-fn + (mf/deps [layout-type ids]) + (fn [dir] + (let [dir (if new-css-system (keyword dir) dir)] + (if (= :flex layout-type) + (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})) + (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))) ;; Wrap type - wrap-type (:layout-wrap-type values) - set-wrap (fn [type] - (st/emit! (dwsl/update-layout ids {:layout-wrap-type type}))) + wrap-type (:layout-wrap-type values) + + toggle-wrap-refactor + (mf/use-fn + (mf/deps [wrap-type ids]) + (fn [] + (let [type (if (= wrap-type :wrap) + :nowrap + :wrap)] + (st/emit! (dwsl/update-layout ids {:layout-wrap-type type}))))) + + set-wrap + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [type (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (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}))) + + set-align-items + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (st/emit! (dwsl/update-layout ids {:layout-align-items value}))))) + + set-align-items-refactor + (mf/use-fn + (mf/deps ids) + (fn [value] + (st/emit! (dwsl/update-layout ids {:layout-align-items (keyword value)})))) ;; Justify content justify-content (:layout-justify-content values) - set-justify-content (fn [value] - (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))) + + set-justify-content + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (st/emit! (dwsl/update-layout ids {:layout-justify-content value}))))) + + set-justify-content-refactor + (mf/use-fn + (mf/deps ids) + (fn [value] + (st/emit! (dwsl/update-layout ids {:layout-justify-content (keyword 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 :stretch})) - (st/emit! (dwsl/update-layout ids {:layout-align-content value})))) + + set-align-content + (mf/use-fn + (mf/deps ids align-content) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (if (= align-content value) + (st/emit! (dwsl/update-layout ids {:layout-align-content :stretch})) + (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))) + + set-align-content-refactor + (mf/use-fn + (mf/deps ids) + (fn [value align-content] + (if (= align-content value) + (st/emit! (dwsl/update-layout ids {:layout-align-content :stretch})) + (st/emit! (dwsl/update-layout ids {:layout-align-content (keyword value)}))))) + ;; Gap @@ -560,7 +1091,9 @@ (st/emit! (dwsl/update-layout ids {:layout-padding-type type}))) on-padding-change - (fn [type prop val] + (mf/use-fn + (mf/deps ids) + (fn [type prop val] (let [val (mth/finite val 0)] (cond (and (= type :simple) (= prop :p1)) @@ -570,17 +1103,20 @@ (st/emit! (dwsl/update-layout ids {:layout-padding {:p2 val :p4 val}})) :else - (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}}))))) + (st/emit! (dwsl/update-layout ids {:layout-padding {prop val}})))))) ;; Grid-direction saved-grid-dir (:layout-grid-dir values) set-direction - (fn [dir type] - (if (= :flex type) - (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})) - (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))) + (mf/use-fn + (mf/deps [layout-type ids new-css-system]) + (fn [dir] + (let [dir (if new-css-system (keyword dir) dir)] + (if (= :flex layout-type) + (st/emit! (dwsl/update-layout ids {:layout-flex-dir dir})) + (st/emit! (dwsl/update-layout ids {:layout-grid-dir dir})))))) ;; Align grid align-items-row (:layout-align-items values) @@ -597,126 +1133,220 @@ grid-justify-content-column (:layout-align-content values) set-justify-grid - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [value type] (if (= type :row) (st/emit! (dwsl/update-layout ids {:layout-justify-content value})) (st/emit! (dwsl/update-layout ids {:layout-align-content value})))))] - [:div.element-set - [:div.element-set-title - [:* - [:span "Layout"] - (if (and (not multiple) (:layout values)) - [:div.title-actions - (when (features/active-feature? :grid-layout) - [: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])]] + (if new-css-system + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? true + :collapsed? (not open?) + :on-collapsed toggle-content + :title "Layout" + :class (stl/css :title-spacing-layout)} + (if (and (not multiple) (:layout values)) + [:div {:class (stl/css :title-actions)} + (when (features/active-feature? :grid-layout) + [:div {:class (stl/css :layout-options)} + [:& radio-buttons {:selected (d/name layout-type) + :on-change toggle-layout-style + :name "layout-style" + :wide true} + [:& radio-button {:value "flex" + :id :flex}] + [:& radio-button {:value "grid" + :id :grid}]]]) + [:button {:class (stl/css :remove-layout) + :on-click on-remove-layout} + i/remove-refactor]] + [:div {:class (stl/css :title-actions)} + [:button {:class (stl/css :add-layout) + :data-value :flex + :on-click on-set-layout} + i/add-refactor]])]] - (when (:layout values) - (when (not= :multiple layout-type) - (case layout-type - :flex + (when (and open? (:layout values)) + (when (not= :multiple layout-type) + (case layout-type + :flex + [:div {:class (stl/css :flex-layout-menu)} + [:div {:class (stl/css :first-row)} + [:& align-row {:is-col? is-col? + :align-items align-items + :on-change set-align-items-refactor}] - [:div.element-set-content.layout-menu - [:div.layout-row - [:div.direction-wrap.row-title "Direction"] - [:div.btn-wrapper - [:div.direction - [:* - (for [dir [:row :row-reverse :column :column-reverse]] - [:& direction-btn {:key (d/name dir) - :dir dir - :saved-dir saved-dir - :set-direction #(set-direction dir :flex) - :icon? true}])]] + [:& direction-row-flex {:on-change set-direction-refactor + :saved-dir saved-dir}] - [:div.wrap-type [:& wrap-row {:wrap-type wrap-type - :set-wrap set-wrap}]]]] + :on-click toggle-wrap-refactor}]] - (when (= :wrap wrap-type) + [:div {:class (stl/css :second-row)} + [:& justify-content-row {:is-col? is-col? + :justify-content justify-content + :on-change set-justify-content-refactor}]] + (when (= :wrap wrap-type) + [:div {:class (stl/css :third-row)} + [:& align-content-row {:is-col? is-col? + :align-content align-content + :on-change set-align-content-refactor}]]) + [:div {:class (stl/css :forth-row)} + [:& gap-section {:is-col? is-col? + :wrap-type wrap-type + :gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}] + + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]]] + :grid ;; TODO Finish this with new UI + [:div {:class (stl/css :grid-layout-menu)} + [:div {:class (stl/css :first-row)} + [:div (stl/css :direction-edit) + [:div {:class (stl/css :direction)} + [:& direction-row-grid {:set-direction set-direction + :on-click saved-dir}] + (when (= 1 (count ids)) + [:div {:class (stl/css :edit)} + [:& grid-edit-mode {:id (first ids)}]])]] + + [:div.layout-row + [:div.align-items-grid.row-title "Items"] + [:div.btn-wrapper.align-grid-items + [:& align-grid-row {:is-col? false + :align-items align-items-row + :set-align set-align-grid}] + + [:& align-grid-row {:is-col? true + :align-items align-items-column + :set-align set-align-grid}]]] + + [:div.layout-row + [:div.jusfiy-content-grid.row-title "Content"] + [:div.btn-wrapper.align-grid-content + [:& justify-grid-row {:is-col? true + :justify-items grid-justify-content-column + :set-justify set-justify-grid}] + [:& justify-grid-row {:is-col? false + :justify-items grid-justify-content-row + :set-justify set-justify-grid}]]]]] + nil)))] + + [:div.element-set + [:div.element-set-title + [:* + [:span "Layout"] + (if (and (not multiple) (:layout values)) + [:div.title-actions + (when (features/active-feature? :grid-layout) + [: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 {:data-value :flex + :on-click on-set-layout} i/close])]] + + (when (:layout values) + (when (not= :multiple layout-type) + (case layout-type + :flex + + [:div.element-set-content.layout-menu [:div.layout-row - [:div.align-content.row-title "Content"] - [:div.btn-wrapper.align-content - [:& align-content-row {:is-col? is-col? - :align-content align-content - :set-align-content set-align-content}]]]) + [:div.direction-wrap.row-title "Direction"] + [:div.btn-wrapper + [:div.direction + [:& direction-row-flex {:on-change set-direction + :saved-dir saved-dir}]] - [: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}]]] + [:div.wrap-type + [:& wrap-row {:wrap-type wrap-type + :on-click set-wrap}]]]] - [:div.layout-row - [:div.justify-content.row-title "Justify"] - [:div.btn-wrapper.justify-content - [:& justify-content-row {:is-col? is-col? - :justify-content justify-content - :set-justify set-justify-content}]]] - [:& gap-section {:is-col? is-col? - :wrap-type wrap-type - :gap-selected? gap-selected? - :set-gap set-gap - :gap-value (:layout-gap values)}] + (when (= :wrap wrap-type) + [:div.layout-row + [:div.align-content.row-title "Content"] + [:div.btn-wrapper.align-content + [:& align-content-row {:is-col? is-col? + :align-content align-content + :on-change set-align-content}]]]) + [:div.layout-row + [:div.align-items.row-title "Align"] + [:div.btn-wrapper + [:& align-row {:is-col? is-col? + :align-items align-items + :on-change set-align-items}]]] - [:& padding-section {:values values - :on-change-style change-padding-type - :on-change on-padding-change}]] + [:div.layout-row + [:div.justify-content.row-title "Justify"] + [:div.btn-wrapper.justify-content + [:& justify-content-row {:is-col? is-col? + :justify-content justify-content + :on-change set-justify-content}]]] - :grid + [:& gap-section {:is-col? is-col? + :wrap-type wrap-type + :gap-selected? gap-selected? + :on-change set-gap + :gap-value (:layout-gap values)}] - [:div.element-set-content.layout-menu - [:div.layout-row - [:div.direction-wrap.row-title "Direction"] - [:div.btn-wrapper - [:div.direction - [:* - (for [dir [:row :column]] - [:& direction-btn {:key (d/name dir) - :dir dir - :saved-dir saved-grid-dir - :set-direction #(set-direction dir :grid) - :icon? true}])]] + [:& padding-section {:values values + :on-change-style change-padding-type + :on-change on-padding-change}]] - (when (= 1 (count ids)) - [:div.edit-mode - [:& grid-edit-mode {:id (first ids)}]])]] + :grid - [:div.layout-row - [:div.align-items-grid.row-title "Items"] - [:div.btn-wrapper.align-grid-items - [:& align-grid-row {:is-col? false - :align-items align-items-row - :set-align set-align-grid}] + [:div.element-set-content.layout-menu + [:div.layout-row + [:div.direction-wrap.row-title "Direction"] + [:div.btn-wrapper + [:div.direction + [:* + (for [dir [:row :column]] + [:& direction-btn {:key (d/name dir) + :dir dir + :saved-dir saved-grid-dir + :on-click set-direction + :icon? true}])]] - [:& align-grid-row {:is-col? true - :align-items align-items-column - :set-align set-align-grid}]]] + (when (= 1 (count ids)) + [:div.edit-mode + [:& grid-edit-mode {:id (first ids)}]])]] - [:div.layout-row - [:div.jusfiy-content-grid.row-title "Content"] - [:div.btn-wrapper.align-grid-content - [:& justify-grid-row {:is-col? true - :justify-items grid-justify-content-column - :set-justify set-justify-grid}] - [:& justify-grid-row {:is-col? false - :justify-items grid-justify-content-row - :set-justify set-justify-grid}]]]] + [:div.layout-row + [:div.align-items-grid.row-title "Items"] + [:div.btn-wrapper.align-grid-items + [:& align-grid-row {:is-col? false + :align-items align-items-row + :set-align set-align-grid}] - ;; Default if not grid or flex - nil)))])) + [:& align-grid-row {:is-col? true + :align-items align-items-column + :set-align set-align-grid}]]] + + [:div.layout-row + [:div.jusfiy-content-grid.row-title "Content"] + [:div.btn-wrapper.align-grid-content + [:& justify-grid-row {:is-col? true + :justify-items grid-justify-content-column + :set-justify set-justify-grid}] + [:& justify-grid-row {:is-col? false + :justify-items grid-justify-content-row + :set-justify set-justify-grid}]]]] + + ;; Default if not grid or flex + nil)))]))) (mf/defc grid-layout-edition {::mf/wrap [#(mf/memo' % (mf/check-props ["ids" "values"]))]} @@ -767,7 +1397,7 @@ grid-justify-content-column (:layout-justify-content values) set-content-grid - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [value type] (if (= type :row) @@ -777,7 +1407,7 @@ ;;Grid columns column-grid-values (:layout-grid-columns values) grid-columns-open? (mf/use-state false) - toggle-columns-info (mf/use-callback + toggle-columns-info (mf/use-fn (fn [_] (swap! grid-columns-open? not))) @@ -785,30 +1415,30 @@ rows-grid-values (:layout-grid-rows values) grid-rows-open? (mf/use-state false) toggle-rows-info - (mf/use-callback + (mf/use-fn (fn [_] (swap! grid-rows-open? not))) add-new-element - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [type value] (st/emit! (dwsl/add-layout-track ids type value)))) remove-element - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [type index] (st/emit! (dwsl/remove-layout-track ids type index)))) set-column-value - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [type index value] (st/emit! (dwsl/change-layout-track ids type index {:value value})))) set-column-type - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [type index track-type] (let [value (case track-type @@ -832,7 +1462,7 @@ [:& direction-btn {:key (d/name dir) :dir dir :saved-dir saved-grid-dir - :set-direction #(set-direction dir) + :on-click set-direction :icon? true}])] (when (= 1 (count ids)) @@ -878,7 +1508,7 @@ :remove-element remove-element}] [:& gap-section {:gap-selected? gap-selected? - :set-gap set-gap + :on-change set-gap :gap-value (:layout-gap values)}] [:& padding-section {:values values diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.css.json new file mode 100644 index 000000000..e34d1cf8d --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_layout_container_button-primary_Tj8CW","button-secondary":"menus_layout_container_button-secondary_-pFFr","button-tertiary":"menus_layout_container_button-tertiary_88wa0","element-set":"menus_layout_container_element-set_RVZGT","flex-layout-menu":"menus_layout_container_flex-layout-menu_RldvQ","forth-row":"menus_layout_container_forth-row_w-D2w","padding-group":"menus_layout_container_padding-group_nKb4x","padding-toggle":"menus_layout_container_padding-toggle_K4pZ0","first-row":"menus_layout_container_first-row_6Hb-j","wrap-button":"menus_layout_container_wrap-button_8a0Ua","element-title":"menus_layout_container_element-title_8zezG","title-actions":"menus_layout_container_title-actions_Wam2H","remove-layout":"menus_layout_container_remove-layout_cG7vO","add-layout":"menus_layout_container_add-layout_cqkPT","button-radio":"menus_layout_container_button-radio_75xs1","button-warning":"menus_layout_container_button-warning_YrujD","button-disabled":"menus_layout_container_button-disabled_5HIwQ","button-tag":"menus_layout_container_button-tag_Xwo2X","button-icon":"menus_layout_container_button-icon_U29NH","button-icon-small":"menus_layout_container_button-icon-small_-duO9","padding-inputs":"menus_layout_container_padding-inputs_AynKo","paddings-multiple":"menus_layout_container_paddings-multiple_9QKeS","padding-multiple":"menus_layout_container_padding-multiple_ZMI-n","icon":"menus_layout_container_icon_J2NEm","paddings-simple":"menus_layout_container_paddings-simple_8T2e4","padding-simple":"menus_layout_container_padding-simple_eRd9o","gap-group":"menus_layout_container_gap-group_qYjdG","row-gap":"menus_layout_container_row-gap_pJFR-","column-gap":"menus_layout_container_column-gap_w9iCj","link":"menus_layout_container_link_bMDCH","asset-element":"menus_layout_container_asset-element_Nw5YH","input-element":"menus_layout_container_input-element_lcwuS","new-scrollbar":"menus_layout_container_new-scrollbar_vNJp4","menu-dropdown":"menus_layout_container_menu-dropdown_otywf","menu-item":"menus_layout_container_menu-item_hawWO","shortcut":"menus_layout_container_shortcut_dFYeP","shortcut-key":"menus_layout_container_shortcut-key_NBwI-","user-icon":"menus_layout_container_user-icon_ODkl2","title-spacing-layout":"menus_layout_container_title-spacing-layout_rGDyw","layout-options":"menus_layout_container_layout-options_CYfz4","selected":"menus_layout_container_selected_2Ihb5","second-row":"menus_layout_container_second-row_-lWHO","third-row":"menus_layout_container_third-row_JynAl","numeric-input":"menus_layout_container_numeric-input_8Y1sd","disabled":"menus_layout_container_disabled_GUXOQ","grid-layout-menu":"menus_layout_container_grid-layout-menu_afkzo","spin-animation":"menus_layout_container_spin-animation_6gbcb"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss new file mode 100644 index 000000000..d7fa2fc8a --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.scss @@ -0,0 +1,236 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-set { + .element-title { + .title-spacing-layout { + margin: 0 0 $s-4 0; + } + + .title-actions { + display: flex; + gap: $s-4; + height: $s-32; + padding: 0; + margin: 0; + .layout-options { + width: $s-92; + } + .remove-layout, + .add-layout { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + } + .flex-layout-menu { + .first-row { + display: flex; + gap: $s-4; + margin-bottom: $s-12; + .wrap-button { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.selected { + background-color: var(--button-tertiary-background-color-active); + color: var(--button-tertiary-foreground-color-active); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + } + .second-row, + .third-row { + margin-bottom: $s-12; + } + .forth-row { + display: flex; + flex-direction: column; + gap: $s-4; + .gap-group { + display: flex; + gap: $s-4; + .column-gap { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + &.disabled { + background-color: var(--input-background-color-disabled); + border: 1px solid var(--input-border-color-disabled); + color: var(--input-foreground-color-disabled); + .numeric-input { + pointer-events: none; + cursor: default; + color: var(--input-foreground-color-disabled); + } + .icon { + svg { + stroke: var(--input-foreground-color-disabled); + } + } + } + } + .row-gap { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + &.disabled { + background-color: var(--input-background-color-disabled); + border: 1px solid var(--input-border-color-disabled); + color: var(--input-foreground-color-disabled); + .numeric-input { + pointer-events: none; + cursor: default; + color: var(--input-foreground-color-disabled); + } + .icon { + svg { + stroke: var(--input-foreground-color-disabled); + } + } + } + } + } + .padding-group { + display: flex; + gap: $s-4; + .padding-inputs { + display: flex; + gap: $s-4; + .paddings-simple { + display: flex; + gap: $s-4; + .padding-simple { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + } + } + .paddings-multiple { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-4; + .padding-multiple { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + } + } + } + .padding-toggle { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.selected { + background-color: var(--button-tertiary-background-color-hover); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + } + } + } + .grid-layout-menu { + background-color: antiquewhite; + .first-row { + .direction-edit { + .direction { + } + .edit { + } + } + } + } +} 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 332addd63..69e9bef46 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 @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.layout-item + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.data.macros :as dm] @@ -14,8 +15,11 @@ [app.main.refs :as refs] [app.main.store :as st] [app.main.ui.components.numeric-input :refer [numeric-input*]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] + [app.main.ui.components.title-bar :refer [title-bar]] + [app.main.ui.context :as ctx] [app.main.ui.icons :as i] - [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]] + [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon get-layout-flex-icon-refactor]] [app.util.dom :as dom] [app.util.i18n :as i18n :refer [tr]] [rumext.v2 :as mf])) @@ -36,18 +40,19 @@ (mf/defc margin-section [{:keys [values change-margin-style on-margin-change] :as props}] - (let [margin-type (or (:layout-item-margin-type values) :simple) - m1 (if (and (not (= :multiple (:layout-item-margin values))) - (= (dm/get-in values [:layout-item-margin :m1]) - (dm/get-in values [:layout-item-margin :m3]))) - (dm/get-in values [:layout-item-margin :m1]) - "--") + (let [new-css-system (mf/use-ctx ctx/new-css-system) + margin-type (or (:layout-item-margin-type values) :simple) + m1 (if (and (not (= :multiple (:layout-item-margin values))) + (= (dm/get-in values [:layout-item-margin :m1]) + (dm/get-in values [:layout-item-margin :m3]))) + (dm/get-in values [:layout-item-margin :m1]) + "--") - m2 (if (and (not (= :multiple (:layout-item-margin values))) - (= (dm/get-in values [:layout-item-margin :m2]) - (dm/get-in values [:layout-item-margin :m4]))) - (dm/get-in values [:layout-item-margin :m2]) - "--") + m2 (if (and (not (= :multiple (:layout-item-margin values))) + (= (dm/get-in values [:layout-item-margin :m2]) + (dm/get-in values [:layout-item-margin :m4]))) + (dm/get-in values [:layout-item-margin :m2]) + "--") select-margins (fn [m1? m2? m3? m4?] (st/emit! (udw/set-margins-selected {:m1 m1? :m2 m2? :m3 m3? :m4 m4?}))) @@ -60,147 +65,352 @@ ;;on destroy component (select-margins false false false false)))) - [:div.margin-row - (cond - (= margin-type :simple) + (if new-css-system + [:div {:class (stl/css :margin-row)} + [:div {:class (stl/css :inputs-wrapper)} + (cond + (= margin-type :simple) + [:div {:class (stl/css :margin-simple)} + [:div {:class (stl/css :vertical-margin) + :title "Vertical margin"} + [:span {:class (stl/css :icon)} + i/margin-top-bottom-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :value m1 + :on-focus (fn [event] + (select-margins true false true false) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m1) - [:div.margin-item-group - [:div.margin-item.tooltip.tooltip-bottom-left - {:alt "Vertical margin"} - [:span.icon i/auto-margin-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margins true false true false) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m1) - :on-blur #(select-margins false false false false) - :value m1}]] + :on-blur #(select-margins false false false false)}]] - [:div.margin-item.tooltip.tooltip-bottom-left - {:alt "Horizontal margin"} - [:span.icon.rotated i/auto-margin-both-sides] - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margins false true false true) - (dom/select-target event)) - :on-change (partial on-margin-change :simple :m2) - :on-blur #(select-margins false false false false) - :value m2}]]] + [:div {:class (stl/css :horizontal-margin) + :title "Horizontal margin"} + [:span {:class (stl/css :icon)} + i/margin-left-right-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margins false true false true) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m2) + :on-blur #(select-margins false false false false) + :value m2}]]] - (= margin-type :multiple) - [:div.wrapper - (for [num [:m1 :m2 :m3 :m4]] - [:div.tooltip.tooltip-bottom - {:key (dm/str "margin-" (d/name num)) - :alt (case num - :m1 "Top" - :m2 "Right" - :m3 "Bottom" - :m4 "Left")} - [:div.input-element.auto - [:> numeric-input* - {:placeholder "--" - :on-focus (fn [event] - (select-margin num) - (dom/select-target event)) - :on-change (partial on-margin-change :multiple num) - :on-blur #(select-margins false false false false) - :value (num (:layout-item-margin values))}]]])]) + (= margin-type :multiple) + [:div {:class (stl/css :margin-multiple)} + [:div {:class (stl/css :top-margin) + :title "Top margin"} + [:span {:class (stl/css :icon)} + i/margin-top-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m1) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m1) + :on-blur #(select-margins false false false false) + :value (:m1 (:layout-item-margin values))}]] + [:div {:class (stl/css :right-margin) + :title "Right margin"} + [:span {:class (stl/css :icon)} + i/margin-right-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m2) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m2) + :on-blur #(select-margins false false false false) + :value (:m2 (:layout-item-margin values))}]] - [:div.margin-item-icons - [:div.margin-item-icon.tooltip.tooltip-bottom-left - {:class (dom/classnames :selected (= margin-type :multiple)) - :alt "Margin - multiple" - :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} - i/auto-margin]]])) + [:div {:class (stl/css :bottom-margin) + :title "Bottom margin"} + [:span {:class (stl/css :icon)} + i/margin-bottom-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m3) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m3) + :on-blur #(select-margins false false false false) + :value (:m3 (:layout-item-margin values))}]] + [:div {:class (stl/css :left-margin) + :title "Left margin"} + [:span {:class (stl/css :icon)} + i/margin-left-refactor] + [:> numeric-input* {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus (fn [event] + (select-margin :m4) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple :m4) + :on-blur #(select-margins false false false false) + :value (:m4 (:layout-item-margin values))}]]])] + [:button {:class (stl/css-case :margin-mode true + :selected (= margin-type :multiple)) + :title "Margin - multiple" + :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} + i/margin-refactor]] + [:div.margin-row + (cond + (= margin-type :simple) -(mf/defc element-behavior - [{:keys [is-layout-container? is-layout-child? layout-item-h-sizing layout-item-v-sizing on-change-behavior] :as props}] - (let [fill? is-layout-child? - auto? is-layout-container?] + [:div.margin-item-group + [:div.margin-item.tooltip.tooltip-bottom-left + {:alt "Vertical margin"} + [:span.icon i/auto-margin-both-sides] + [:> numeric-input* + {:placeholder "--" + :on-focus (fn [event] + (select-margins true false true false) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m1) + :on-blur #(select-margins false false false false) + :value m1}]] - [:div.btn-wrapper - {:class (when (and fill? auto?) "wrap")} - [:div.layout-behavior.horizontal - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fix width" - :class (dom/classnames :active (= layout-item-h-sizing :fix)) - :on-click #(on-change-behavior :h :fix)} - i/auto-fix-layout] - (when fill? + [:div.margin-item.tooltip.tooltip-bottom-left + {:alt "Horizontal margin"} + [:span.icon.rotated i/auto-margin-both-sides] + [:> numeric-input* + {:placeholder "--" + :on-focus (fn [event] + (select-margins false true false true) + (dom/select-target event)) + :on-change (partial on-margin-change :simple :m2) + :on-blur #(select-margins false false false false) + :value m2}]]] + + (= margin-type :multiple) + [:div.wrapper + (for [num [:m1 :m2 :m3 :m4]] + [:div.tooltip.tooltip-bottom + {:key (dm/str "margin-" (d/name num)) + :alt (case num + :m1 "Top" + :m2 "Right" + :m3 "Bottom" + :m4 "Left")} + [:div.input-element.auto + [:> numeric-input* + {:placeholder "--" + :on-focus (fn [event] + (select-margin num) + (dom/select-target event)) + :on-change (partial on-margin-change :multiple num) + :on-blur #(select-margins false false false false) + :value (num (:layout-item-margin values))}]]])]) + + [:div.margin-item-icons + [:div.margin-item-icon.tooltip.tooltip-bottom-left + {:class (dom/classnames :selected (= margin-type :multiple)) + :alt "Margin - multiple" + :on-click #(change-margin-style (if (= margin-type :multiple) :simple :multiple))} + i/auto-margin]]]))) + +(mf/defc element-behaviour-horizontal + [{:keys [auto? fill? layout-item-sizing on-change] :as props}] + [:div {:class (stl/css-case :horizontal-behaviour true + :one-element (and (not fill?) (not auto?)) + :two-element (or fill? auto?) + :three-element (and fill? auto?))} + [:& radio-buttons {:selected (d/name layout-item-sizing) + :on-change on-change + :wide true + :name "flex-behaviour-h"} + [:& radio-button {:value "fix" + :icon i/fixed-width-refactor + :title "Fix width" + :id "behaviour-h-fix"}] + (when fill? + [:& radio-button {:value "fill" + :icon i/fill-content-refactor + :title "Width 100%" + :id "behaviour-h-fill"}]) + (when auto? + [:& radio-button {:value "auto" + :icon i/hug-content-refactor + :title "Fit content" + :id "behaviour-h-auto"}])]]) + +(mf/defc element-behaviour-vertical + [{:keys [auto? fill? layout-item-sizing on-change] :as props}] + [:div {:class (stl/css-case :vertical-behaviour true + :one-element (and (not fill?) (not auto?)) + :two-element (or fill? auto?) + :three-element (and fill? auto?))} + [:& radio-buttons {:selected (d/name layout-item-sizing) + :on-change on-change + :wide true + :name "flex-behaviour-v"} + [:& radio-button {:value "fix" + :icon i/fixed-width-refactor + :icon-class (stl/css :rotated) + :title "Fix height" + :id "behaviour-v-fix"}] + (when fill? + [:& radio-button {:value "fill" + :icon i/fill-content-refactor + :icon-class (stl/css :rotated) + :title "Height 100%" + :id "behaviour-v-fill"}]) + (when auto? + [:& radio-button {:value "auto" + :icon i/hug-content-refactor + :icon-class (stl/css :rotated) + :title "Fit content" + :id "behaviour-v-auto"}])]]) + +(mf/defc element-behaviour + [{:keys [auto? fill? layout-item-h-sizing layout-item-v-sizing on-change-behaviour-h-refactor on-change-behaviour-v-refactor on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system)] + + (if new-css-system + [:div {:class (stl/css-case :behaviour-menu true + :wrap (and fill? auto?))} + [:& element-behaviour-horizontal {:auto? auto? + :fill? fill? + :layout-item-sizing layout-item-h-sizing + :on-change on-change-behaviour-h-refactor}] + [:& element-behaviour-vertical {:auto? auto? + :fill? fill? + :layout-item-sizing layout-item-v-sizing + :on-change on-change-behaviour-v-refactor}]] + + [:div.btn-wrapper + {:class (when (and fill? auto?) "wrap")} + [:div.layout-behavior.horizontal [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Width 100%" - :class (dom/classnames :active (= layout-item-h-sizing :fill)) - :on-click #(on-change-behavior :h :fill)} - i/auto-fill]) - (when auto? + {:alt "Fix width" + :class (dom/classnames :active (= layout-item-h-sizing :fix)) + :data-direction :h + :data-value :fix + :on-click on-change} + i/auto-fix-layout] + (when fill? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Width 100%" + :class (dom/classnames :active (= layout-item-h-sizing :fill)) + :data-direction :h + :data-value :fill + :on-click on-change} + i/auto-fill]) + (when auto? + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Fit content" + :class (dom/classnames :active (= layout-item-h-sizing :auto)) + :data-direction :h + :data-value :auto + :on-click on-change} + i/auto-hug])] + + [:div.layout-behavior [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fit content" - :class (dom/classnames :active (= layout-item-h-sizing :auto)) - :on-click #(on-change-behavior :h :auto)} - i/auto-hug])] - - [:div.layout-behavior - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Fix height" - :class (dom/classnames :active (= layout-item-v-sizing :fix)) - :on-click #(on-change-behavior :v :fix)} - i/auto-fix-layout] - (when fill? - [:button.behavior-btn.tooltip.tooltip-bottom-left - {:alt "Height 100%" - :class (dom/classnames :active (= layout-item-v-sizing :fill)) - :on-click #(on-change-behavior :v :fill)} - i/auto-fill]) - (when auto? - [:button.behavior-btn.tooltip.tooltip-bottom-left - {:alt "Fit content" - :class (dom/classnames :active (= layout-item-v-sizing :auto)) - :on-click #(on-change-behavior :v :auto)} - i/auto-hug])]])) - + {:alt "Fix height" + :class (dom/classnames :active (= layout-item-v-sizing :fix)) + :data-direction :v + :data-value :fix + :on-click on-change} + i/auto-fix-layout] + (when fill? + [:button.behavior-btn.tooltip.tooltip-bottom-left + {:alt "Height 100%" + :class (dom/classnames :active (= layout-item-v-sizing :fill)) + :data-direction :v + :data-value :fill + :on-click on-change} + i/auto-fill]) + (when auto? + [:button.behavior-btn.tooltip.tooltip-bottom-left + {:alt "Fit content" + :class (dom/classnames :active (= layout-item-v-sizing :auto)) + :data-direction :v + :data-value :auto + :on-click on-change} + i/auto-hug])]]))) (mf/defc align-self-row - [{:keys [is-col? align-self set-align-self] :as props}] - (let [dir-v [:start :center :end #_:stretch #_: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)) - :on-click #(set-align-self align) - :key (str "align-self" align)} - (get-layout-flex-icon :align-self align is-col?)])])) + [{:keys [is-col? align-self on-change] :as props}] + (let [new-css-system (mf/use-ctx ctx/new-css-system) + dir-v [:start :center :end #_:stretch #_:baseline]] + (if new-css-system + [:& radio-buttons {:selected (d/name align-self) + :on-change on-change + :name "flex-align-self"} + [:& radio-button {:value "start" + :icon (get-layout-flex-icon-refactor :align-self :start is-col?) + :title "Align self start" + :id "align-self-start"}] + [:& radio-button {:value "center" + :icon (get-layout-flex-icon-refactor :align-self :center is-col?) + :title "Align self center" + :id "align-self-center"}] + [:& radio-button {:value "end" + :icon (get-layout-flex-icon-refactor :align-self :end is-col?) + :title "Align self end" + :id "align-self-end"}]] + + [: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)) + :data-value align + :on-click on-change + :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" "is-layout-child?" "is-grid-parent?" "is-flex-parent?"]))]} [{:keys [ids values is-layout-child? is-layout-container? is-grid-parent? is-flex-parent?] :as props}] - (let [selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + selection-parents-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) selection-parents (mf/deref selection-parents-ref) - change-margin-style - (fn [type] - (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))) - - align-self (:layout-item-align-self values) - - set-align-self - (mf/use-callback - (mf/deps ids align-self) - (fn [value] - (if (= align-self value) - (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil})) - (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value}))))) - is-absolute? (:layout-item-absolute values) is-col? (every? ctl/col? selection-parents) + is-layout-child? (and is-layout-child? (not is-absolute?)) + + state* (mf/use-state true) + open? (deref state*) + toggle-content (mf/use-fn #(swap! state* not)) + + ;; Align self + + align-self (:layout-item-align-self values) + + set-align-self + (mf/use-fn + (mf/deps ids align-self) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (d/read-string))] + (if (= align-self value) + (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil})) + (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self value})))))) + + set-align-self-refactor + (mf/use-fn + (mf/deps ids align-self) + (fn [value] + (if (= align-self value) + (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self nil})) + (st/emit! (dwsl/update-layout-child ids {:layout-item-align-self (keyword value)}))))) + + ;; Margin + + change-margin-style + (fn [type] + (st/emit! (dwsl/update-layout-child ids {:layout-item-margin-type type}))) + on-margin-change (fn [type prop val] (cond @@ -213,116 +423,291 @@ :else (st/emit! (dwsl/update-layout-child ids {:layout-item-margin {prop val}})))) - on-change-behavior - (fn [dir value] - (if (= dir :h) - (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})) - (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))) + ;; Behaviour + + on-change-behaviour + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [value (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword)) + dir (-> (dom/get-current-target event) + (dom/get-data "direction") + (keyword))] + (if (= dir :h) + (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value})) + (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value})))))) + + on-change-behaviour-h + (mf/use-fn + (mf/deps ids) + (fn [value] + (let [value (if new-css-system (keyword value) value)] + (st/emit! (dwsl/update-layout-child ids {:layout-item-h-sizing value}))))) + + + on-change-behaviour-v + (mf/use-fn + (mf/deps ids) + (fn [value] + (let [value (if new-css-system (keyword value) value)] + (st/emit! (dwsl/update-layout-child ids {:layout-item-v-sizing value}))))) + + ;; Size and position on-size-change (fn [measure value] (st/emit! (dwsl/update-layout-child ids {measure value}))) on-change-position - (fn [value] - (when (= value :static) - (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil}))) - (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))) + (mf/use-fn + (mf/deps ids) + (fn [value] + (let [value (if new-css-system (keyword value) value)] + (when (= value :static) + (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index nil}))) + (st/emit! (dwsl/update-layout-child ids {:layout-item-absolute (= value :absolute)}))))) + + ;; Z Index on-change-z-index - (fn [value] - (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value}))) + (mf/use-fn + (mf/deps ids) + (fn [value] + (st/emit! (dwsl/update-layout-child ids {:layout-item-z-index value}))))] - is-layout-child? (and is-layout-child? (not is-absolute?))] + (if new-css-system + [:div {:class (stl/css :element-set)} + [:div {:class (stl/css :element-title)} + [:& title-bar {:collapsable? true + :collapsed? (not open?) + :on-collapsed toggle-content + :title (cond + (and is-layout-container? (not is-layout-child?)) + "Flex board" - [:div.element-set - [:div.element-set-title - [:span (cond - (and is-layout-container? (not is-layout-child?)) - "Flex board" + is-flex-parent? + "Flex element" - is-flex-parent? - "Flex element" + is-grid-parent? + "Grid element" - is-grid-parent? - "Grid element" + :else + "Layout element") + :class (stl/css :title-spacing-layout-element)} - :else - "Layout element")]] + (when is-flex-parent? + [:div {:class (stl/css :position-options)} + [:& radio-buttons {:selected (if is-absolute? + "absolute" + "static") + :on-change on-change-position + :name "layout-style" + :wide true} + [:& radio-button {:value "static" + :id :static-position}] + [:& radio-button {:value "absolute" + :id :absolute-position}]]])]] + [:div {:class (stl/css :flex-element-menu)} + [:div {:class (stl/css :first-row)} + [:& element-behaviour {:fill? is-layout-child? + :auto? is-layout-container? + :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) + :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) + :on-change-behaviour-h-refactor on-change-behaviour-h + :on-change-behaviour-v-refactor on-change-behaviour-v + :on-change on-change-behaviour}] + (when is-absolute? + [:div {:class (stl/css-case :z-index-wrapper true + :disabled (not is-absolute?)) + :title "z-index"} - [:div.element-set-content.layout-item-menu - (when (or is-layout-child? is-absolute?) - [:div.layout-row - [:div.row-title.sizing "Position"] - [:div.btn-wrapper - [:div.absolute - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Static" - :class (dom/classnames :active (not (:layout-item-absolute values))) - :on-click #(on-change-position :static)} - "Static"] - [:button.behavior-btn.tooltip.tooltip-bottom - {:alt "Absolute" - :class (dom/classnames :active (and (:layout-item-absolute values) (not= :multiple (:layout-item-absolute values)))) - :on-click #(on-change-position :absolute)} - "Absolute"]] + [:span {:class (stl/css :icon-text)} + "Z"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change #(on-change-z-index %) + :nillable true + :disabled (not is-absolute?) + :value (:layout-item-z-index values)}]])] - [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"} - i/layers - [:> numeric-input* - {:placeholder "--" - :on-focus #(dom/select-target %) - :on-change #(on-change-z-index %) - :nillable true - :disabled (not is-absolute?) - :value (:layout-item-z-index values)}]]]]) - - [:* - [:div.layout-row - [:div.row-title.sizing "Sizing"] - [:& element-behavior {:is-layout-child? is-layout-child? - :is-layout-container? is-layout-container? - :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) - :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) - :on-change-behavior on-change-behavior}]] - - (when is-layout-child? - [:div.layout-row - [:div.row-title "Align"] - [:div.btn-wrapper + (when is-layout-child? + [:div {:class (stl/css :second-row)} [:& align-self-row {:is-col? is-col? :align-self align-self - :set-align-self set-align-self}]]]) + :on-changer set-align-self-refactor}]]) - (when is-layout-child? - [:& margin-section {:values values - :change-margin-style change-margin-style - :on-margin-change on-margin-change}]) + (when is-layout-child? + [:div {:class (stl/css :third-row)} + [:& margin-section {:values values + :change-margin-style change-margin-style + :on-margin-change on-margin-change}]]) - [:div.advanced-ops-body - [:div.input-wrapper - (for [item (cond-> [] - (= (:layout-item-h-sizing values) :fill) - (conj :layout-item-min-w :layout-item-max-w) + [:div {:class (stl/css :forth-row)} + [:div {:class (stl/css :advanced-options)} + (when (= (:layout-item-h-sizing values) :fill) + [:div {:class (stl/css :horizontal-fill)} + [:div {:class (stl/css :layout-item-min-w) + :title (tr "workspace.options.layout-item.layout-item-min-w")} - (= (:layout-item-v-sizing values) :fill) - (conj :layout-item-min-h :layout-item-max-h))] + [:span {:class (stl/css :icon-text)} + "MIN W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-w) + :value (get values :layout-item-min-w) + :nillable true}]] - [: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-item-max-h) - "minH" (= item :layout-item-min-h) - "maxW" (= item :layout-item-max-w) - "minW" (= item :layout-item-min-w))} - [:div.input-element - {:alt (tr (dm/str "workspace.options.layout-item." (d/name item)))} + [:div {:class (stl/css :layout-item-max-w) + :title (tr "workspace.options.layout-item.layout-item-max-w")} + [:span {:class (stl/css :icon-text)} + "MAX W"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-w) + :value (get values :layout-item-max-w) + :nillable true}]]]) + (when (= (:layout-item-v-sizing values) :fill) + [:div {:class (stl/css :vertical-fill)} + [:div {:class (stl/css :layout-item-min-h) + :title (tr "workspace.options.layout-item.layout-item-min-h")} + + [:span {:class (stl/css :icon-text)} + "MIN H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-min-h) + :value (get values :layout-item-min-h) + :nillable true}]] + + [:div {:class (stl/css :layout-item-max-h) + :title (tr "workspace.options.layout-item.layout-item-max-h")} + + [:span {:class (stl/css :icon-text)} + "MAX H"] + [:> numeric-input* + {:className (stl/css :numeric-input) + :no-validate true + :min 0 + :data-wrap true + :placeholder "--" + :on-focus #(dom/select-target %) + :on-change (partial on-size-change :layout-item-max-h) + :value (get values :layout-item-max-h) + :nillable true}]]])]]]] + + + [:div.element-set + [:div.element-set-title + [:span (cond + (and is-layout-container? (not is-layout-child?)) + "Flex board" + + is-flex-parent? + "Flex element" + + is-grid-parent? + "Grid element" + + :else + "Layout element")]] + + [:div.element-set-content.layout-item-menu + (when (or is-layout-child? is-absolute?) + [:div.layout-row + [:div.row-title.sizing "Position"] + [:div.btn-wrapper + [:div.absolute + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Static" + :class (dom/classnames :active (not (:layout-item-absolute values))) + :on-click #(on-change-position :static)} + "Static"] + [:button.behavior-btn.tooltip.tooltip-bottom + {:alt "Absolute" + :class (dom/classnames :active (and (:layout-item-absolute values) (not= :multiple (:layout-item-absolute values)))) + :on-click #(on-change-position :absolute)} + "Absolute"]] + + [:div.tooltip.tooltip-bottom-left.z-index {:alt "z-index"} + i/layers [:> numeric-input* - {:no-validate true - :min 0 - :data-wrap true - :placeholder "--" + {:placeholder "--" :on-focus #(dom/select-target %) - :on-change (partial on-size-change item) - :value (get values item) - :nillable true}]]])]]]]])) + :on-change #(on-change-z-index %) + :nillable true + :disabled (not is-absolute?) + :value (:layout-item-z-index values)}]]]]) + + [:* + [:div.layout-row + [:div.row-title.sizing "Sizing"] + [:& element-behaviour {:fill? is-layout-child? + :auto? is-layout-container? + :layout-item-v-sizing (or (:layout-item-v-sizing values) :fix) + :layout-item-h-sizing (or (:layout-item-h-sizing values) :fix) + :on-change-behaviour-h-refactor on-change-behaviour-h + :on-change-behaviour-v-refactor on-change-behaviour-v + :on-change on-change-behaviour}]] + + (when is-layout-child? + [:div.layout-row + [:div.row-title "Align"] + [:div.btn-wrapper + [:& align-self-row {:is-col? is-col? + :align-self align-self + :on-change set-align-self}]]]) + + (when is-layout-child? + [:& margin-section {:values values + :change-margin-style change-margin-style + :on-margin-change on-margin-change}]) + + [:div.advanced-ops-body + [:div.input-wrapper + (for [item (cond-> [] + (= (:layout-item-h-sizing values) :fill) + (conj :layout-item-min-w :layout-item-max-w) + + (= (:layout-item-v-sizing values) :fill) + (conj :layout-item-min-h :layout-item-max-h))] + + [: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-item-max-h) + "minH" (= item :layout-item-min-h) + "maxW" (= item :layout-item-max-w) + "minW" (= item :layout-item-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-focus #(dom/select-target %) + :on-change (partial on-size-change item) + :value (get values item) + :nillable true}]]])]]]]] + ) + + )) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.css.json new file mode 100644 index 000000000..92b48f6c1 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_layout_item_button-primary_R3HEE","button-secondary":"menus_layout_item_button-secondary_Og5Mh","button-tertiary":"menus_layout_item_button-tertiary_LW32D","element-set":"menus_layout_item_element-set_Sh4I1","flex-element-menu":"menus_layout_item_flex-element-menu_0w0BO","third-row":"menus_layout_item_third-row_jHUpG","margin-row":"menus_layout_item_margin-row_6FAUi","margin-mode":"menus_layout_item_margin-mode_LUT-a","button-radio":"menus_layout_item_button-radio_DiE0P","button-warning":"menus_layout_item_button-warning_9APs4","button-disabled":"menus_layout_item_button-disabled_Bwpn-","button-tag":"menus_layout_item_button-tag_TMNyk","button-icon":"menus_layout_item_button-icon_pN2Bx","button-icon-small":"menus_layout_item_button-icon-small_swawO","inputs-wrapper":"menus_layout_item_inputs-wrapper_VAJZV","margin-multiple":"menus_layout_item_margin-multiple_bDZ3b","top-margin":"menus_layout_item_top-margin_aZvRD","icon":"menus_layout_item_icon_C95Kq","bottom-margin":"menus_layout_item_bottom-margin_xL-UC","left-margin":"menus_layout_item_left-margin_pPaes","right-margin":"menus_layout_item_right-margin_LUX60","margin-simple":"menus_layout_item_margin-simple_CgWYe","vertical-margin":"menus_layout_item_vertical-margin_qtmT6","horizontal-margin":"menus_layout_item_horizontal-margin_9A28j","link":"menus_layout_item_link_basqK","asset-element":"menus_layout_item_asset-element_7JrqD","input-element":"menus_layout_item_input-element_CZYaZ","forth-row":"menus_layout_item_forth-row_-fX40","advanced-options":"menus_layout_item_advanced-options_nITU5","horizontal-fill":"menus_layout_item_horizontal-fill_4wEAb","layout-item-min-w":"menus_layout_item_layout-item-min-w_6P8Y-","layout-item-min-h":"menus_layout_item_layout-item-min-h_nrtET","layout-item-max-w":"menus_layout_item_layout-item-max-w_E2-r0","layout-item-max-h":"menus_layout_item_layout-item-max-h_Uqazl","vertical-fill":"menus_layout_item_vertical-fill_9FVj-","first-row":"menus_layout_item_first-row_R0-Ae","z-index-wrapper":"menus_layout_item_z-index-wrapper_3xj33","new-scrollbar":"menus_layout_item_new-scrollbar_Nwzfw","menu-dropdown":"menus_layout_item_menu-dropdown_zRl9Y","menu-item":"menus_layout_item_menu-item_F0OrX","shortcut":"menus_layout_item_shortcut_nyWlM","shortcut-key":"menus_layout_item_shortcut-key_2IsYn","user-icon":"menus_layout_item_user-icon_NWO9W","element-title":"menus_layout_item_element-title_4Yn1t","title-spacing-layout-element":"menus_layout_item_title-spacing-layout-element_ZlAUV","position-options":"menus_layout_item_position-options_ukwsy","behaviour-menu":"menus_layout_item_behaviour-menu_pHokd","horizontal-behaviour":"menus_layout_item_horizontal-behaviour_ga1rq","one-element":"menus_layout_item_one-element_oqBEv","two-element":"menus_layout_item_two-element_W3xwW","three-element":"menus_layout_item_three-element_zuZ-z","vertical-behaviour":"menus_layout_item_vertical-behaviour_rYqkL","rotated":"menus_layout_item_rotated_kpn2t","icon-text":"menus_layout_item_icon-text_zT9t8","numeric-input":"menus_layout_item_numeric-input_HSt6J","second-row":"menus_layout_item_second-row_enwDf","selected":"menus_layout_item_selected_K7XDi","spin-animation":"menus_layout_item_spin-animation_NfqiR"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss new file mode 100644 index 000000000..3c61bc7df --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.scss @@ -0,0 +1,198 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-set { + .element-title { + .title-spacing-layout-element { + margin: 0 0 $s-4 0; + .position-options { + width: $s-140; + } + } + } + .flex-element-menu { + display: flex; + flex-direction: column; + gap: $s-4; + .first-row { + display: flex; + gap: $s-4; + .behaviour-menu { + display: flex; + gap: $s-4; + .horizontal-behaviour { + &.one-element { + width: $s-28; + } + &.two-element { + width: $s-60; + } + &.three-element { + width: $s-92; + } + } + .vertical-behaviour { + .rotated { + transform: rotate(90deg); + } + &.one-element { + width: $s-28; + } + &.two-element { + width: $s-60; + } + &.three-element { + width: $s-92; + } + } + &.wrap { + } + } + .z-index-wrapper { + @extend .input-element; + width: $s-124; + padding-left: $s-8; + .icon-text { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + padding-top: $s-2; + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + .second-row { + display: flex; + gap: $s-4; + } + + .third-row { + .margin-row { + display: flex; + align-items: flex-start; + gap: $s-4; + .margin-mode { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + } + &.selected { + background-color: var(--button-tertiary-background-color-active); + color: var(--button-tertiary-foreground-color-active); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + .inputs-wrapper { + .margin-simple { + display: flex; + gap: $s-4; + .vertical-margin, + .horizontal-margin { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + .margin-multiple { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-4; + .top-margin, + .bottom-margin, + .left-margin, + .right-margin { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + } + } + } + + .forth-row .advanced-options { + display: flex; + flex-direction: column; + gap: $s-4; + .horizontal-fill, + .vertical-fill { + display: flex; + gap: $s-4; + .layout-item-min-w, + .layout-item-min-h, + .layout-item-max-w, + .layout-item-max-h { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon-text { + display: flex; + align-items: center; + height: $s-32; + width: $s-80; + margin-right: $s-4; + padding-top: $s-2; + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 9761d869a..e0735e8e9 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -5,6 +5,7 @@ ;; Copyright (c) KALEIDOS INC (ns app.main.ui.workspace.sidebar.options.menus.measures + (:require-macros [app.main.style :as stl]) (:require [app.common.data :as d] [app.common.geom.shapes :as gsh] @@ -19,6 +20,8 @@ [app.main.store :as st] [app.main.ui.components.dropdown :refer [dropdown]] [app.main.ui.components.numeric-input :refer [numeric-input*]] + [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]] + [app.main.ui.context :as ctx] [app.main.ui.hooks :as hooks] [app.main.ui.icons :as i] [app.util.dom :as dom] @@ -72,7 +75,8 @@ {::mf/wrap-props false ::mf/wrap [mf/memo]} [{:keys [ids ids-with-children values type all-types shape]}] - (let [options (if (= type :multiple) + (let [new-css-system (mf/use-ctx ctx/new-css-system) + options (if (= type :multiple) (reduce #(union %1 %2) (map #(get type->options %) all-types)) (get type->options type)) @@ -140,9 +144,9 @@ (cond-> values (not= (:rotation values) :multiple) (assoc :rotation rotation))) - proportion-lock (:proportion-lock values) + proportion-lock (:proportion-lock values) + - show-presets-dropdown? (mf/use-state false) radius-mode (ctsr/radius-mode values) all-equal? (ctsr/all-equal? values) @@ -152,49 +156,100 @@ clip-content-ref (mf/use-ref nil) show-in-viewer-ref (mf/use-ref nil) + ;; PRESETS + preset-state* (mf/use-state false) + show-presets-dropdown? (deref preset-state*) + + open-presets + (mf/use-fn + (mf/deps show-presets-dropdown?) + (fn [] + (reset! preset-state* true))) + + close-presets + (mf/use-fn + (mf/deps show-presets-dropdown?) + (fn [] + (reset! preset-state* false))) + on-preset-selected - (fn [width height] - (st/emit! (udw/update-dimensions ids :width width) - (udw/update-dimensions ids :height height))) + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [width (-> (dom/get-current-target event) + (dom/get-data "width") + (d/read-string)) + height (-> (dom/get-current-target event) + (dom/get-data "height") + (d/read-string))] + (st/emit! (udw/update-dimensions ids :width width) + (udw/update-dimensions ids :height height))))) + + ;; ORIENTATION + + orientation (when (= type :frame) + (cond (> (:width values) (:height values)) + :horiz + :else + :vert)) on-orientation-clicked - (fn [orientation] - (st/emit! (udw/change-orientation ids orientation))) + (mf/use-fn + (mf/deps ids) + (fn [event] + (let [orientation (-> (dom/get-current-target event) + (dom/get-data "value") + (keyword))] + (st/emit! (udw/change-orientation ids orientation))))) + + on-orientation-change-refactor + (mf/use-fn + (mf/deps ids) + (fn [orientation] + (st/emit! (udw/change-orientation ids (keyword orientation))))) + + ;; SIZE AND PROPORTION LOCK on-size-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [value attr] (st/emit! (udw/update-dimensions ids attr value)))) on-proportion-lock-change - (mf/use-callback + (mf/use-fn (mf/deps ids proportion-lock) (fn [_] (let [new-lock (if (= proportion-lock :multiple) true (not proportion-lock))] (run! #(st/emit! (udw/set-shape-proportion-lock % new-lock)) ids)))) + ;; POSITION + do-position-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [shape' frame' value attr] (let [to (+ value (attr frame'))] (st/emit! (udw/update-position (:id shape') {attr to}))))) on-position-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [value attr] (doall (map #(do-position-change %1 %2 value attr) shapes frames)))) + ;; ROTATION + on-rotation-change - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [value] (st/emit! (udw/increase-rotation ids value)))) + ;; RADIUS + change-radius - (mf/use-callback + (mf/use-fn (mf/deps ids-with-children) (fn [update-fn] (dch/update-shapes ids-with-children @@ -206,7 +261,7 @@ :attrs [:rx :ry :r1 :r2 :r3 :r4]}))) on-switch-to-radius-1 - (mf/use-callback + (mf/use-fn (mf/deps ids change-radius) (fn [_value] (if all-equal? @@ -214,20 +269,28 @@ (reset! radius-multi? true)))) on-switch-to-radius-4 - (mf/use-callback + (mf/use-fn (mf/deps ids change-radius) (fn [_value] (st/emit! (change-radius ctsr/switch-to-radius-4)) (reset! radius-multi? false))) + toggle-radius-mode + (mf/use-fn + (mf/deps radius-mode) + (fn [] + (if (= :radius-1 radius-mode) + (on-switch-to-radius-4) + (on-switch-to-radius-1)))) + on-radius-1-change - (mf/use-callback + (mf/use-fn (mf/deps ids change-radius) (fn [value] (st/emit! (change-radius #(ctsr/set-radius-1 % value))))) on-radius-multi-change - (mf/use-callback + (mf/use-fn (mf/deps ids change-radius) (fn [event] (let [value (-> event dom/get-target dom/get-value d/parse-integer)] @@ -237,7 +300,7 @@ (reset! radius-multi? false))))) on-radius-4-change - (mf/use-callback + (mf/use-fn (mf/deps ids change-radius) (fn [value attr] (st/emit! (change-radius #(ctsr/set-radius-4 % attr value))))) @@ -251,15 +314,16 @@ on-radius-r3-change #(on-radius-4-change % :r3) on-radius-r4-change #(on-radius-4-change % :r4) + ;; CLIP CONTENT AND SHOW IN VIEWER on-change-clip-content - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [event] (let [value (-> event dom/get-target dom/checked?)] (st/emit! (dch/update-shapes ids (fn [shape] (assoc shape :show-content (not value)))))))) on-change-show-in-viewer - (mf/use-callback + (mf/use-fn (mf/deps ids) (fn [event] (let [value (-> event dom/get-target dom/checked?) @@ -284,178 +348,395 @@ ;; restore focus to the newly created numeric-input (let [radius-input (mf/ref-val radius-input-ref)] (dom/focus! radius-input))))) - - [:* - [:div.element-set - [:div.element-set-content - - ;; FRAME PRESETS + (if new-css-system + [:div {:class (stl/css :element-set)} (when (and (options :presets) - (or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected - [:div.row-flex ;; some frames and some non frames - [:div.presets.custom-select.flex-grow {:class (when @show-presets-dropdown? "opened") - :on-click #(reset! show-presets-dropdown? true)} - [:span (tr "workspace.options.size-presets")] - [:span.dropdown-button i/arrow-down] - [:& dropdown {:show @show-presets-dropdown? - :on-close #(reset! show-presets-dropdown? false)} - [:ul.custom-select-dropdown + (or (nil? all-types) (= (count all-types) 1))) + [:div {:class (stl/css :presets)} + [:div {:class (stl/css-case :presets-wrapper true + :opened show-presets-dropdown?) + :on-click open-presets} + [:span {:class (stl/css :select-name)}(tr "workspace.options.size-presets")] + [:span {:class (stl/css :collapsed-icon)} i/arrow-refactor] + + [:& dropdown {:show show-presets-dropdown? + :on-close close-presets} + [:ul {:class (stl/css :custom-select-dropdown)} (for [size-preset size-presets] (if-not (:width size-preset) - [:li.dropdown-label {:key (:name size-preset)} - [:span (:name size-preset)]] [:li {:key (:name size-preset) - :on-click #(on-preset-selected (:width size-preset) (:height size-preset))} - (:name size-preset) - [:span (:width size-preset) " x " (:height size-preset)]]))]]] - [:span.orientation-icon {:on-click #(on-orientation-clicked :vert)} i/size-vert] - [:span.orientation-icon {:on-click #(on-orientation-clicked :horiz)} i/size-horiz]]) + :class (stl/css-case :dropdown-element true + :disabled true)} + [:span {:class (stl/css :preset-name)} (:name size-preset)]] + [:li {:key (:name size-preset) + :class (stl/css :dropdown-element) + :data-width (:width size-preset) + :data-height (:height size-preset) + :on-click on-preset-selected} + [:div {:class (stl/css :name-wrapper)} + [:span {:class (stl/css :preset-name)} (:name size-preset)] + [:span {:class (stl/css :preset-size)} (:width size-preset) " x " (:height size-preset)]] - ;; WIDTH & HEIGHT + (when (and (= (:width size-preset) (d/parse-integer (:width values) 0)) + (= (:height size-preset) (d/parse-integer (:height values) 0))) + [:span {:class (stl/css :check-icon)} i/tick-refactor])]))]]] + + [:& radio-buttons {:selected (name orientation) + :on-change on-orientation-change-refactor + :name "frame-otientation"} + [:& radio-button {:icon i/size-vertical-refactor + :value "vert" + :id :vert}] + [:& radio-button {:icon i/size-horizontal-refactor + :value "horiz" + :id :horiz}]]]) (when (options :size) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.size")] - [:div.input-element.width {:title (tr "workspace.options.width")} + [:div {:class (stl/css :size)} + [:div {:class (stl/css :height) + :title (tr "workspace.options.width")} + [:span {:class (stl/css :icon-text)} "W"] [:> numeric-input* {:min 0.01 :no-validate true :placeholder "--" :on-change on-width-change :disabled disabled-width-sizing? + :className (stl/css :numeric-input) :value (:width values)}]] - - [:div.input-element.height {:title (tr "workspace.options.height")} + [:div {:class (stl/css :height) + :title (tr "workspace.options.height")} + [:span {:class (stl/css :icon-text)} "H"] [:> numeric-input* {:min 0.01 :no-validate true :placeholder "--" :on-change on-height-change :disabled disabled-height-sizing? + :className (stl/css :numeric-input) :value (:height values)}]] - - [:div.lock-size {:class (dom/classnames - :selected (true? proportion-lock) - :disabled (= proportion-lock :multiple)) - :on-click on-proportion-lock-change} + [:button {:class (stl/css-case + :lock-size-btn true + :selected (true? proportion-lock) + :disabled (= proportion-lock :multiple)) + :on-click on-proportion-lock-change} (if proportion-lock - i/lock - i/unlock)]]) - - ;; POSITION + i/lock-refactor + i/unlock-refactor)]]) (when (options :position) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.position")] - [:div.input-element.Xaxis {:title (tr "workspace.options.x")} + [:div {:class (stl/css :position)} + [:div {:class (stl/css :x-position) + :title (tr "workspace.options.x")} + [:span {:class (stl/css :icon-text)} "X"] [:> numeric-input* {:no-validate true :placeholder "--" :on-change on-pos-x-change :disabled disabled-position-x? + :className (stl/css :numeric-input) :value (:x values)}]] - [:div.input-element.Yaxis {:title (tr "workspace.options.y")} + + [:div {:class (stl/css :y-position) + :title (tr "workspace.options.y")} + [:span {:class (stl/css :icon-text)} "Y"] [:> numeric-input* {:no-validate true :placeholder "--" :disabled disabled-position-y? :on-change on-pos-y-change + :className (stl/css :numeric-input) :value (:y values)}]]]) + (when (or (options :rotation) (options :radius)) + [:div {:class (stl/css :rotation-radius)} - ;; ROTATION - (when (options :rotation) - [:div.row-flex - [:span.element-set-subtitle (tr "workspace.options.rotation")] - [:div.input-element.degrees {:title (tr "workspace.options.rotation")} - [:> numeric-input* - {:no-validate true - :min 0 - :max 359 - :data-wrap true - :placeholder "--" - :on-change on-rotation-change - :value (:rotation values)}]]]) - - ;; RADIUS - (when (options :radius) - [:div.row-flex - [:div.radius-options - [:div.radius-icon.tooltip.tooltip-bottom - {:class (dom/classnames - :selected (or (= radius-mode :radius-1) @radius-multi?)) - :alt (tr "workspace.options.radius.all-corners") - :on-click on-switch-to-radius-1} - i/radius-1] - [:div.radius-icon.tooltip.tooltip-bottom - {:class (dom/classnames - :selected (and (= radius-mode :radius-4) (not @radius-multi?))) - :alt (tr "workspace.options.radius.single-corners") - :on-click on-switch-to-radius-4} - i/radius-4]] - - (cond - (= radius-mode :radius-1) - [:div.input-element.mini {:title (tr "workspace.options.radius")} + (when (options :rotation) + [:div {:class (stl/css :rotation) + :title (tr "workspace.options.rotation")} + [:span {:class (stl/css :icon)} i/rotation-refactor] [:> numeric-input* - {:placeholder "--" - :ref radius-input-ref + {:no-validate true :min 0 - :on-change on-radius-1-change - :value (:rx values)}]] - - @radius-multi? - [:div.input-element.mini {:title (tr "workspace.options.radius")} - [:input.input-text - {:type "number" + :max 359 + :data-wrap true :placeholder "--" + :on-change on-rotation-change + :className (stl/css :numeric-input) + :value (:rotation values)}]]) + + (when (options :radius) + [:div {:class (stl/css :radius)} + [:div {:class (stl/css :radius-inputs)} + (cond + (= radius-mode :radius-1) + [:div {:class (stl/css :radius-1) + :title (tr "workspace.options.radius")} + [:span {:class (stl/css :icon)} i/corner-radius-refactor] + [:> numeric-input* + {:placeholder "Mixed" + :ref radius-input-ref + :min 0 + :on-change on-radius-1-change + :className (stl/css :numeric-input) + :value (:rx values)}]] + + @radius-multi? + [:div {:class (stl/css :radius-1) + :title (tr "workspace.options.radius")} + [:span {:class (stl/css :icon)} i/corner-radius-refactor] + [:input.input-text + {:type "number" + :placeholder "Mixed" + :min 0 + :on-change on-radius-multi-change + :className (stl/css :numeric-input) + :value (if all-equal? (:rx values) nil)}]] + + + (= radius-mode :radius-4) + [:div {:class (stl/css :radius-4)} + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-top-left")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r1-change + :className (stl/css :numeric-input) + :value (:r1 values)}]] + + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-top-right")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r2-change + :className (stl/css :numeric-input) + :value (:r2 values)}]] + + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-bottom-left")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r4-change + :className (stl/css :numeric-input) + :value (:r4 values)}]] + + [:div {:class (stl/css :small-input) + :title (tr "workspace.options.radius-bottom-right")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r3-change + :className (stl/css :numeric-input) + :value (:r3 values)}]] + ])] + [:button {:class (stl/css-case :radius-mode true + :selected (= radius-mode :radius-4)) + :title (if(= radius-mode :radius-4) + (tr "workspace.options.radius.all-corners") + (tr "workspace.options.radius.single-corners")) + :on-click toggle-radius-mode} + i/corner-radius-refactor]])]) + (when (or (options :clip-content) (options :show-in-viewer)) + [:div {:class (stl/css :clip-show)} + (when (options :clip-content) + [:div {:class (stl/css :clip-content)} + [:input {:type "checkbox" + :id "clip-content" + :ref clip-content-ref + :class (stl/css :clip-content-input) + :checked (not (:show-content values)) + :on-change on-change-clip-content}] + + [:label {:for "clip-content" + :title (tr "workspace.options.clip-content") + :class (stl/css-case :clip-content-label true + :selected (not (:show-content values)))} + [:span {:class (stl/css :icon)} + i/clip-content-refactor] + ]]) + (when (options :show-in-viewer) + [:div {:class (stl/css :clip-content)} + [:input {:type "checkbox" + :id "show-in-viewer" + :ref show-in-viewer-ref + :class (stl/css :clip-content-input) + :checked (not (:hide-in-viewer values)) + :on-change on-change-show-in-viewer}] + + [:label {:for "show-in-viewer" + :title (tr "workspace.options.show-in-viewer") + :class (stl/css-case :clip-content-label true + :selected (not (:hide-in-viewer values)))} + [:span {:class (stl/css :icon)} + i/play-refactor]]])])] + + [:* + [:div.element-set + [:div.element-set-content + + ;; FRAME PRESETS + (when (and (options :presets) + (or (nil? all-types) (= (count all-types) 1))) ;; Don't show presets if multi selected + [:div.row-flex ;; some frames and some non frames + [:div.presets.custom-select.flex-grow {:class (when show-presets-dropdown? "opened") + :on-click open-presets} + [:span (tr "workspace.options.size-presets")] + [:span.dropdown-button i/arrow-down] + [:& dropdown {:show show-presets-dropdown? + :on-close close-presets} + [:ul.custom-select-dropdown + (for [size-preset size-presets] + (if-not (:width size-preset) + [:li.dropdown-label {:key (:name size-preset)} + [:span (:name size-preset)]] + [:li {:key (:name size-preset) + :data-width (:width size-preset) + :data-height (:height size-preset) + :on-click on-preset-selected} + (:name size-preset) + [:span (:width size-preset) " x " (:height size-preset)]]))]]] + [:span.orientation-icon {:data-value :vert + :on-click on-orientation-clicked} i/size-vert] + [:span.orientation-icon {:data-value :horiz + :on-click on-orientation-clicked} i/size-horiz]]) + + ;; WIDTH & HEIGHT + (when (options :size) + [:div.row-flex + [:span.element-set-subtitle (tr "workspace.options.size")] + [:div.input-element.width {:title (tr "workspace.options.width")} + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder "--" + :on-change on-width-change + :disabled disabled-width-sizing? + :value (:width values)}]] + + [:div.input-element.height {:title (tr "workspace.options.height")} + [:> numeric-input* {:min 0.01 + :no-validate true + :placeholder "--" + :on-change on-height-change + :disabled disabled-height-sizing? + :value (:height values)}]] + + [:div.lock-size {:class (dom/classnames + :selected (true? proportion-lock) + :disabled (= proportion-lock :multiple)) + :on-click on-proportion-lock-change} + (if proportion-lock + i/lock + i/unlock)]]) + + ;; POSITION + (when (options :position) + [:div.row-flex + [:span.element-set-subtitle (tr "workspace.options.position")] + [:div.input-element.Xaxis {:title (tr "workspace.options.x")} + [:> numeric-input* {:no-validate true + :placeholder "--" + :on-change on-pos-x-change + :disabled disabled-position-x? + :value (:x values)}]] + [:div.input-element.Yaxis {:title (tr "workspace.options.y")} + [:> numeric-input* {:no-validate true + :placeholder "--" + :disabled disabled-position-y? + :on-change on-pos-y-change + :value (:y values)}]]]) + + ;; ROTATION + (when (options :rotation) + [:div.row-flex + [:span.element-set-subtitle (tr "workspace.options.rotation")] + [:div.input-element.degrees {:title (tr "workspace.options.rotation")} + [:> numeric-input* + {:no-validate true :min 0 - :on-change on-radius-multi-change - :value ""}]] + :max 359 + :data-wrap true + :placeholder "--" + :on-change on-rotation-change + :value (:rotation values)}]]]) - (= radius-mode :radius-4) - [:* - [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r1-change - :value (:r1 values)}]] + ;; RADIUS + (when (options :radius) + [:div.row-flex + [:div.radius-options + [:div.radius-icon.tooltip.tooltip-bottom + {:class (dom/classnames + :selected (or (= radius-mode :radius-1) @radius-multi?)) + :alt (tr "workspace.options.radius.all-corners") + :on-click on-switch-to-radius-1} + i/radius-1] + [:div.radius-icon.tooltip.tooltip-bottom + {:class (dom/classnames + :selected (and (= radius-mode :radius-4) (not @radius-multi?))) + :alt (tr "workspace.options.radius.single-corners") + :on-click on-switch-to-radius-4} + i/radius-4]] - [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r2-change - :value (:r2 values)}]] + (cond + (= radius-mode :radius-1) + [:div.input-element.mini {:title (tr "workspace.options.radius")} + [:> numeric-input* + {:placeholder "--" + :ref radius-input-ref + :min 0 + :on-change on-radius-1-change + :value (:rx values)}]] - [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r3-change - :value (:r3 values)}]] + @radius-multi? + [:div.input-element.mini {:title (tr "workspace.options.radius")} + [:input.input-text + {:type "number" + :placeholder "--" + :min 0 + :on-change on-radius-multi-change + :value ""}]] - [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")} - [:> numeric-input* - {:placeholder "--" - :min 0 - :on-change on-radius-r4-change - :value (:r4 values)}]]])]) + (= radius-mode :radius-4) + [:* + [:div.input-element.mini {:title (tr "workspace.options.radius-top-left")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r1-change + :value (:r1 values)}]] - (when (options :clip-content) - [:div.input-checkbox - [:input {:type "checkbox" - :id "clip-content" - :ref clip-content-ref - :checked (not (:show-content values)) - :on-change on-change-clip-content}] + [:div.input-element.mini {:title (tr "workspace.options.radius-top-right")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r2-change + :value (:r2 values)}]] - [:label {:for "clip-content"} - (tr "workspace.options.clip-content")]]) + [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-right")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r3-change + :value (:r3 values)}]] - (when (options :show-in-viewer) - [:div.input-checkbox - [:input {:type "checkbox" - :id "show-in-viewer" - :ref show-in-viewer-ref - :checked (not (:hide-in-viewer values)) - :on-change on-change-show-in-viewer}] + [:div.input-element.mini {:title (tr "workspace.options.radius-bottom-left")} + [:> numeric-input* + {:placeholder "--" + :min 0 + :on-change on-radius-r4-change + :value (:r4 values)}]]])]) + (when (options :clip-content) + [:div.input-checkbox + [:input {:type "checkbox" + :id "clip-content" + :ref clip-content-ref + :checked (not (:show-content values)) + :on-change on-change-clip-content}] - [:label {:for "show-in-viewer"} - (tr "workspace.options.show-in-viewer")]]) + [:label {:for "clip-content"} + (tr "workspace.options.clip-content")]]) + (when (options :show-in-viewer) + [:div.input-checkbox + [:input {:type "checkbox" + :id "show-in-viewer" + :ref show-in-viewer-ref + :checked (not (:hide-in-viewer values)) + :on-change on-change-show-in-viewer}] - ]]])) + [:label {:for "show-in-viewer"} + (tr "workspace.options.show-in-viewer")]])]]]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.css.json new file mode 100644 index 000000000..c88e94f4c --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.css.json @@ -0,0 +1 @@ +{"button-primary":"menus_measures_button-primary_yRv5c","button-secondary":"menus_measures_button-secondary_wxH4e","button-tertiary":"menus_measures_button-tertiary_75HJz","element-set":"menus_measures_element-set_yFX0H","clip-show":"menus_measures_clip-show_xfMxc","clip-content":"menus_measures_clip-content_6jcK7","clip-content-label":"menus_measures_clip-content-label_tAmJR","show-in-viewer":"menus_measures_show-in-viewer_gS4zu","rotation-radius":"menus_measures_rotation-radius_gRhX3","radius":"menus_measures_radius_fwOcI","radius-mode":"menus_measures_radius-mode_-2OYa","size":"menus_measures_size_H-S1I","lock-size-btn":"menus_measures_lock-size-btn_LtIkx","button-radio":"menus_measures_button-radio_Sbi8s","button-warning":"menus_measures_button-warning_2OKjL","button-disabled":"menus_measures_button-disabled_YwjRu","button-tag":"menus_measures_button-tag_DQoCx","button-icon":"menus_measures_button-icon_-W4cp","icon":"menus_measures_icon_8KRGm","presets":"menus_measures_presets_1QW71","presets-wrapper":"menus_measures_presets-wrapper_wcdmw","collapsed-icon":"menus_measures_collapsed-icon_rn9vD","button-icon-small":"menus_measures_button-icon-small_6qaot","radius-inputs":"menus_measures_radius-inputs_aOGLK","radius-1":"menus_measures_radius-1_vCkFW","rotation":"menus_measures_rotation_xDl8P","custom-select-dropdown":"menus_measures_custom-select-dropdown_NVheb","dropdown-element":"menus_measures_dropdown-element_41zZT","check-icon":"menus_measures_check-icon_MQR8g","link":"menus_measures_link_Va-ax","asset-element":"menus_measures_asset-element_RgEhV","input-element":"menus_measures_input-element_Y2xMf","radius-4":"menus_measures_radius-4_8aSTX","small-input":"menus_measures_small-input_0CZGl","position":"menus_measures_position_UZzMu","x-position":"menus_measures_x-position_Pb7Ub","y-position":"menus_measures_y-position_jnHIu","height":"menus_measures_height_uI-RG","width":"menus_measures_width_aOY7n","new-scrollbar":"menus_measures_new-scrollbar_rHWmr","menu-dropdown":"menus_measures_menu-dropdown_FWl9I","menu-item":"menus_measures_menu-item_CqJOK","shortcut":"menus_measures_shortcut_aa6dR","shortcut-key":"menus_measures_shortcut-key_diL6y","user-icon":"menus_measures_user-icon_l34aZ","select-name":"menus_measures_select-name_HnONU","disabled":"menus_measures_disabled_Lt-4x","preset-name":"menus_measures_preset-name_bQ8E5","name-wrapper":"menus_measures_name-wrapper_4eJ3R","preset-size":"menus_measures_preset-size_BFWUR","icon-text":"menus_measures_icon-text_OQu-N","numeric-input":"menus_measures_numeric-input_DTSy8","selected":"menus_measures_selected_daMg1","clip-content-input":"menus_measures_clip-content-input_mNWNP","spin-animation":"menus_measures_spin-animation_rMlyE"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss new file mode 100644 index 000000000..955f16705 --- /dev/null +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss @@ -0,0 +1,317 @@ +// 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) KALEIDOS INC + +@import "refactor/common-refactor.scss"; + +.element-set { + display: flex; + flex-direction: column; + gap: $s-4; + .presets { + display: flex; + align-items: flex-start; + gap: $s-4; + .presets-wrapper { + @extend .asset-element; + position: relative; + display: flex; + height: $s-32; + width: $s-188; + padding: $s-8; + border-radius: $br-8; + .select-name { + @include titleTipography; + display: flex; + justify-content: flex-start; + align-items: center; + flex-grow: 1; + cursor: pointer; + } + .collapsed-icon { + @include flexCenter; + cursor: pointer; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + transform: rotate(90deg); + } + } + .custom-select-dropdown { + @include menuShadow; + position: absolute; + top: $s-32; + left: 0; + max-height: 300px; + width: $s-252; + padding: $s-2; + margin: 0; + margin-top: $s-4; + border-radius: $br-8; + z-index: $z-index-3; + overflow-y: auto; + background-color: var(--menu-background-color); + .dropdown-element { + @include titleTipography; + display: flex; + align-items: center; + gap: $s-8; + height: $s-32; + padding: 0 $s-8; + border-radius: $br-6; + cursor: pointer; + &.disabled { + pointer-events: none; + cursor: default; + .preset-name { + color: var(--menu-foreground-color); + } + + &:hover { + background-color: var(--menu-background-color); + .preset-name { + color: var(--menu-foreground-color); + } + } + } + .name-wrapper { + display: flex; + gap: $s-8; + flex-grow: 1; + .preset-name { + color: var(--menu-foreground-color-hover); + } + .preset-size { + color: var(--menu-foreground-color); + } + } + + .check-icon { + @include flexCenter; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + &:hover { + background-color: var(--menu-background-color-hover); + .check-icon svg { + stroke: var(--menu-foreground-color-hover); + } + } + } + } + &:hover { + .collapsed-icon svg { + stroke: var(--input-foreground-color-active); + } + } + } + } + .size { + display: flex; + align-items: center; + gap: $s-4; + .height, + .width { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon { + @include flexCenter; + width: $s-12; + height: $s-32; + margin-right: $s-4; + } + .icon-text { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + padding-top: $s-1; + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + .lock-size-btn { + @extend .button-tertiary; + border-radius: $br-8; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + } + .position { + display: flex; + align-items: center; + gap: $s-4; + .x-position, + .y-position { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon { + @include flexCenter; + height: $s-32; + width: $s-12; + margin-right: $s-4; + } + .icon-text { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + padding-top: $s-1; + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + .rotation-radius { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; + .rotation { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon-text { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + padding-top: $s-1; + } + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + .radius { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; + .radius-inputs { + display: flex; + .radius-1 { + @extend .input-element; + width: $s-108; + padding-left: $s-8; + .icon { + @include flexCenter; + height: $s-32; + margin-right: $s-4; + svg { + @extend .button-icon-small; + stroke: var(--icon-foreground); + } + } + + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + padding: $s-1 $s-2; + color: var(--input-foreground-color-active); + } + } + .radius-4 { + display: grid; + grid-template-columns: 1fr 1fr; + gap: $s-4; + .small-input { + @extend .input-element; + width: $s-52; + padding-left: $s-8; + .numeric-input { + @include removeInputStyle; + @include titleTipography; + height: $s-32; + width: 100%; + margin: 0; + color: var(--input-foreground-color-active); + } + } + } + } + .radius-mode { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + &.selected { + background-color: var(--button-tertiary-background-color-hover); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + } + } + .clip-show { + display: flex; + align-items: flex-start; + justify-content: flex-start; + gap: $s-4; + .clip-content, + .show-in-viewer { + .clip-content-input { + display: none; + } + .clip-content-label { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + border-radius: $br-8; + .icon { + @include flexCenter; + svg { + @extend .button-icon; + stroke: var(--icon-foreground); + } + } + &.selected { + background-color: var(--button-tertiary-background-color-hover); + svg { + stroke: var(--button-tertiary-foreground-color-active); + } + } + } + } + } +} diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs index 58c6d4d8c..b67905296 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs @@ -529,13 +529,13 @@ [:& radio-buttons {:selected text-transform :on-change handle-change :name "text-transform"} - [:& nilable-option {:icon (mf/html i/text-uppercase-refactor) + [:& nilable-option {:icon i/text-uppercase-refactor :value "uppercase" :id :uppercase}] - [:& nilable-option {:icon (mf/html i/text-lowercase-refactor) + [:& nilable-option {:icon i/text-lowercase-refactor :value "lowercase" :id :lowercase}] - [:& nilable-option {:icon "Aa" + [:& nilable-option {:icon i/text-mixed-refactor :value "capitalize" :id :capitalize}]]] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json index db8deee88..fbe31d610 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.css.json @@ -1 +1 @@ -{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-warning":"menus_typography_button-warning_nEKoP","button-disabled":"menus_typography_button-disabled_f8lDj","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","link":"menus_typography_link_3lL9u","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","new-scrollbar":"menus_typography_new-scrollbar_mfxWK","menu-dropdown":"menus_typography_menu-dropdown_2oGkX","menu-item":"menus_typography_menu-item_QSUt6","shortcut":"menus_typography_shortcut_5kPnH","shortcut-key":"menus_typography_shortcut-key_WhTgH","user-icon":"menus_typography_user-icon_CRNHv","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI","spin-animation":"menus_typography_spin-animation_8ALMW"} \ No newline at end of file +{"button-primary":"menus_typography_button-primary_s1c9M","button-secondary":"menus_typography_button-secondary_RjAsk","button-tertiary":"menus_typography_button-tertiary_Qt18f","font-name-wrapper":"menus_typography_font-name-wrapper_Njxb6","action-btn":"menus_typography_action-btn_hCakz","button-radio":"menus_typography_button-radio_YLx0v","button-warning":"menus_typography_button-warning_nEKoP","button-disabled":"menus_typography_button-disabled_f8lDj","button-tag":"menus_typography_button-tag_32-df","button-icon":"menus_typography_button-icon_jucwh","advanced-options-wrapper":"menus_typography_advanced-options-wrapper_k3FD6","typography-options":"menus_typography_typography-options_j1u8l","font-modifiers":"menus_typography_font-modifiers_P8cSa","font-variant-options":"menus_typography_font-variant-options_qlgLr","icon":"menus_typography_icon_eDU2Z","font-size-options":"menus_typography_font-size-options_sKQdL","font-option":"menus_typography_font-option_7mgxF","button-icon-small":"menus_typography_button-icon-small_g3fsU","font-selector":"menus_typography_font-selector_TzuGa","font-selector-dropdown":"menus_typography_font-selector-dropdown_4s6s8","font-wrapper":"menus_typography_font-wrapper_GPkHS","font-item":"menus_typography_font-item_YQffA","typography-variations":"menus_typography_typography-variations_wbNM3","spacing-options":"menus_typography_spacing-options_RUpAK","line-height":"menus_typography_line-height_S7zsF","letter-spacing":"menus_typography_letter-spacing_8R6p2","link":"menus_typography_link_3lL9u","asset-element":"menus_typography_asset-element_-LlIX","text-transform":"menus_typography_text-transform_U7Y3U","input-element":"menus_typography_input-element_-cnYQ","new-scrollbar":"menus_typography_new-scrollbar_mfxWK","menu-dropdown":"menus_typography_menu-dropdown_2oGkX","menu-item":"menus_typography_menu-item_QSUt6","shortcut":"menus_typography_shortcut_5kPnH","shortcut-key":"menus_typography_shortcut-key_WhTgH","user-icon":"menus_typography_user-icon_CRNHv","typography-entry":"menus_typography_typography-entry_Y6lvA","typography-selection-wrapper":"menus_typography_typography-selection-wrapper_W6ewx","is-selectable":"menus_typography_is-selectable_O6-D2","typography-sample":"menus_typography_typography-sample_6ruld","typography-name":"menus_typography_typography-name_b14xj","typography-font":"menus_typography_typography-font_hJIgO","selected":"menus_typography_selected_Ka-O9","typography-sample-input":"menus_typography_typography-sample-input_u2i8b","adv-typography-name":"menus_typography_adv-typography-name_PvB1X","name":"menus_typography_name_1SJal","font-size-select":"menus_typography_font-size-select_yexav","font-variant-select":"menus_typography_font-variant-select_-OQsO","line-height-input":"menus_typography_line-height-input_SG7be","letter-spacing-input":"menus_typography_letter-spacing-input_LShRc","header":"menus_typography_header_e-rUh","title":"menus_typography_title_uPejx","fonts-list":"menus_typography_fonts-list_ki8X-","label":"menus_typography_label_S-7jI","spin-animation":"menus_typography_spin-animation_8ALMW"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss index 0491e8e2f..8ffe111de 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss @@ -91,6 +91,7 @@ height: $s-28; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } &:focus-within { @@ -115,6 +116,7 @@ @include titleTipography; @extend .asset-element; padding-right: 0; + margin-bottom: $s-4; cursor: pointer; .name { flex-grow: 1; @@ -125,6 +127,7 @@ width: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); transform: rotate(90deg); } } @@ -136,6 +139,7 @@ @extend .asset-element; @include titleTipography; padding: 0; + margin-bottom: $s-4; flex-grow: 1; .icon { @include flexCenter; @@ -143,6 +147,7 @@ min-width: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); transform: rotate(90deg); } } @@ -159,6 +164,7 @@ @extend .asset-element; @include titleTipography; padding: 0; + margin-bottom: $s-4; flex-grow: 2; .icon { @include flexCenter; @@ -166,6 +172,7 @@ min-width: $s-28; svg { @extend .button-icon; + stroke: var(--icon-foreground); transform: rotate(90deg); } } @@ -199,11 +206,13 @@ .line-height, .letter-spacing { @extend .asset-element; + margin-bottom: $s-4; .icon { @include flexCenter; width: $s-28; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } .line-height-input, @@ -226,6 +235,11 @@ @extend .asset-element; width: fit-content; padding: 0; + margin-bottom: $s-4; + background-color: var(--radio-btns-background-color); + &:hover { + background-color: var(--radio-btns-background-color); + } } } } @@ -275,6 +289,7 @@ cursor: pointer; .font-item { @extend .asset-element; + margin-bottom: $s-4; border-radius: $br-8; display: flex; .icon { @@ -283,6 +298,7 @@ width: $s-28; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } &.selected { diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs index 7e122d1d6..1eb56073c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/bool.cljs @@ -14,7 +14,7 @@ [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [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-flex-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 [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] @@ -47,6 +47,9 @@ parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents (mf/deref parents-by-ids-ref)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type :values measure-values @@ -57,7 +60,7 @@ [:& grid-cell/options {:shape (first parents) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) - + (when is-layout-child? [:& layout-item-menu {:ids ids @@ -71,9 +74,7 @@ (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs index e985ee1e8..e28fd2ff4 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/circle.cljs @@ -14,7 +14,7 @@ [app.main.ui.workspace.sidebar.options.menus.fill :refer [fill-attrs fill-menu]] [app.main.ui.workspace.sidebar.options.menus.grid-cell :as grid-cell] [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-flex-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 [measure-attrs measures-menu]] [app.main.ui.workspace.sidebar.options.menus.shadow :refer [shadow-menu]] @@ -49,6 +49,9 @@ parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents (mf/deref parents-by-ids-ref)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type :values measure-values @@ -72,9 +75,7 @@ (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] 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 4f7a8d049..11e3fda65 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 @@ -56,6 +56,9 @@ parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents (mf/deref parents-by-ids-ref)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids [(:id shape)] :values measure-values :type type @@ -84,9 +87,7 @@ :is-layout-container? is-layout-container? :shape shape}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs-shape)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs index a9b05d50b..e61ccc51f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/group.cljs @@ -67,6 +67,7 @@ [layout-item-ids layout-item-values] (get-attrs [shape] objects :layout-item)] [:div.options + [:& layer-menu {:type type :ids layer-ids :values layer-values}] [:& measures-menu {:type type :ids measure-ids :values measure-values :shape shape}] [:& component-menu {:ids comp-ids :values comp-values :shape shape}] ;;remove this in components-v2 [:& layout-container-menu {:type type :ids [(:id shape)] :values layout-container-values :multiple false}] @@ -89,7 +90,7 @@ (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - [:& layer-menu {:type type :ids layer-ids :values layer-values}] + (when-not (empty? fill-ids) [:& fill-menu {:type type :ids fill-ids :values fill-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs index e88082198..881ce65e1 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/image.cljs @@ -49,6 +49,9 @@ parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents (mf/deref parents-by-ids-ref)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type :values measure-values @@ -59,7 +62,7 @@ [:& grid-cell/options {:shape (first parents) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) - + (when is-layout-child? [:& layout-item-menu {:ids ids @@ -74,9 +77,7 @@ [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type 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 f311ef283..e320d5f36 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 @@ -343,6 +343,9 @@ ])))] [:div.options + (when-not (empty? layer-ids) + [:& layer-menu {:type type :ids layer-ids :values layer-values}]) + (when-not (empty? measure-ids) [:& measures-menu {:type type :all-types all-types :ids measure-ids :values measure-values :shape shapes}]) @@ -361,8 +364,6 @@ (when-not (or (empty? constraint-ids) is-layout-child?) [:& constraints-menu {:ids constraint-ids :values constraint-values}]) - (when-not (empty? layer-ids) - [:& layer-menu {:type type :ids layer-ids :values layer-values}]) (when-not (empty? text-ids) [:& ot/text-menu {:type type :ids text-ids :values text-values}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs index 0c94e7b33..929cb4e68 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/path.cljs @@ -49,6 +49,9 @@ parents-by-ids-ref (mf/use-memo (mf/deps ids) #(refs/parents-by-ids ids)) parents (mf/deref parents-by-ids-ref)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type :values measure-values @@ -72,9 +75,7 @@ (when (or (not is-layout-child?) is-layout-child-absolute?) [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type :values (select-keys shape fill-attrs)}] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs index d2ddecc6d..7603870d6 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/rect.cljs @@ -52,6 +52,9 @@ parents (mf/deref parents-by-ids*)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type :values measure-values @@ -82,9 +85,7 @@ [:& constraints-menu {:ids ids :values constraint-values}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& fill-menu {:ids ids :type type diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs index aa40c8cde..94f339d86 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/shapes/text.cljs @@ -83,6 +83,9 @@ layout-item-values (select-keys shape layout-item-attrs)] [:* + [:& layer-menu {:ids ids + :type type + :values layer-values}] [:& measures-menu {:ids ids :type type @@ -94,7 +97,6 @@ [:& grid-cell/options {:shape (first parents) :cell (ctl/get-cell-by-shape-id (first parents) (first ids))}]) - (when is-layout-child? [:& layout-item-menu {:ids ids @@ -110,9 +112,7 @@ {:ids ids :values (select-keys shape constraint-attrs)}]) - [:& layer-menu {:ids ids - :type type - :values layer-values}] + [:& text-menu {:ids ids diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json index 1634b597c..3fe091ba8 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-warning":"sidebar_shortcuts_button-warning_smgx1","button-disabled":"sidebar_shortcuts_button-disabled_SrOif","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","link":"sidebar_shortcuts_link_GVvFO","asset-element":"sidebar_shortcuts_asset-element_-zk6N","new-scrollbar":"sidebar_shortcuts_new-scrollbar_bRqNw","menu-dropdown":"sidebar_shortcuts_menu-dropdown_JXnjP","menu-item":"sidebar_shortcuts_menu-item_jQMwx","shortcut":"sidebar_shortcuts_shortcut_QSmns","shortcut-key":"sidebar_shortcuts_shortcut-key_WMaSV","user-icon":"sidebar_shortcuts_user-icon_HElXz","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0","spin-animation":"sidebar_shortcuts_spin-animation_4xq0t"} \ No newline at end of file +{"button-primary":"sidebar_shortcuts_button-primary_aIZ1F","button-secondary":"sidebar_shortcuts_button-secondary_dtWEN","button-tertiary":"sidebar_shortcuts_button-tertiary_3VDIw","shortcuts":"sidebar_shortcuts_shortcuts_cOJNo","shortcuts-header":"sidebar_shortcuts_shortcuts-header_0SZ19","shortcuts-close-button":"sidebar_shortcuts_shortcuts-close-button_gT7kn","button-radio":"sidebar_shortcuts_button-radio_9PwtF","button-warning":"sidebar_shortcuts_button-warning_smgx1","button-disabled":"sidebar_shortcuts_button-disabled_SrOif","button-tag":"sidebar_shortcuts_button-tag_3LImZ","button-icon":"sidebar_shortcuts_button-icon_rCHmV","button-icon-small":"sidebar_shortcuts_button-icon-small_9BnNh","shortcuts-list":"sidebar_shortcuts_shortcuts-list_z7osI","section-title":"sidebar_shortcuts_section-title_Dv7S-","collapsed-shortcuts":"sidebar_shortcuts_collapsed-shortcuts_XrOj5","subsection-title":"sidebar_shortcuts_subsection-title_--5j4","search-field":"sidebar_shortcuts_search-field_cDecA","search-icon":"sidebar_shortcuts_search-icon_NSAwd","search-box":"sidebar_shortcuts_search-box_vmYAl","clear-btn":"sidebar_shortcuts_clear-btn_vRbGu","clear-icon":"sidebar_shortcuts_clear-icon_ZL4ae","icon-wrapper":"sidebar_shortcuts_icon-wrapper_XaR8m","link":"sidebar_shortcuts_link_GVvFO","asset-element":"sidebar_shortcuts_asset-element_-zk6N","input-element":"sidebar_shortcuts_input-element_dK-2c","new-scrollbar":"sidebar_shortcuts_new-scrollbar_bRqNw","menu-dropdown":"sidebar_shortcuts_menu-dropdown_JXnjP","menu-item":"sidebar_shortcuts_menu-item_jQMwx","shortcut":"sidebar_shortcuts_shortcut_QSmns","shortcut-key":"sidebar_shortcuts_shortcut-key_WMaSV","user-icon":"sidebar_shortcuts_user-icon_HElXz","shortcuts-title":"sidebar_shortcuts_shortcuts-title_P38o9","input-text":"sidebar_shortcuts_input-text_e9n1x","section":"sidebar_shortcuts_section_Jxkqa","open":"sidebar_shortcuts_open_SxghD","subsection-name":"sidebar_shortcuts_subsection-name_rWvFY","section-name":"sidebar_shortcuts_section-name_SyF9-","subsection-menu":"sidebar_shortcuts_subsection-menu_FdH9L","sub-menu":"sidebar_shortcuts_sub-menu_95jTY","shortcuts-name":"sidebar_shortcuts_shortcuts-name_hPkq6","command-name":"sidebar_shortcuts_command-name_Cujed","keys":"sidebar_shortcuts_keys_-pUnF","key":"sidebar_shortcuts_key_QyU8q","space":"sidebar_shortcuts_space_aODdu","not-found":"sidebar_shortcuts_not-found_bKEb0","spin-animation":"sidebar_shortcuts_spin-animation_4xq0t"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss index 71ffc5589..ad7b1c7c5 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss @@ -34,6 +34,7 @@ svg { @extend .button-icon; + stroke: var(--icon-foreground); } } } @@ -55,6 +56,7 @@ display: flex; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } @@ -83,6 +85,7 @@ @include flexCenter; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } @@ -92,6 +95,7 @@ width: $s-28; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } } } @@ -122,6 +126,7 @@ @include flexCenter; svg { @extend .button-icon-small; + stroke: var(--icon-foreground); } &.open { transform: rotate(90deg); diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 88a001c27..333782b2c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -245,7 +245,8 @@ :collapsed? (not @show-pages?) :on-collapsed toggle-pages :title (tr "workspace.sidebar.sitemap") - :klass :title-spacing-sitemap} + :class (css :title-spacing-sitemap)} + (if workspace-read-only? [:div diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json index 057504133..e30b84dce 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.css.json @@ -1 +1 @@ -{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-warning":"sidebar_sitemap_button-warning_qADPu","button-disabled":"sidebar_sitemap_button-disabled_IU-S6","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","link":"sidebar_sitemap_link_WvD4-","asset-element":"sidebar_sitemap_asset-element_I1-m4","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","title-bar":"sidebar_sitemap_title-bar_tIJtT","title":"sidebar_sitemap_title_HmFc4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"} \ No newline at end of file +{"button-primary":"sidebar_sitemap_button-primary_Z-bKW","button-secondary":"sidebar_sitemap_button-secondary_a56LZ","button-tertiary":"sidebar_sitemap_button-tertiary_E2hzd","sitemap":"sidebar_sitemap_sitemap_kvKKx","add-page":"sidebar_sitemap_add-page_r8Ibb","button-radio":"sidebar_sitemap_button-radio_BxzRJ","button-warning":"sidebar_sitemap_button-warning_qADPu","button-disabled":"sidebar_sitemap_button-disabled_IU-S6","button-tag":"sidebar_sitemap_button-tag_u1NAz","button-icon":"sidebar_sitemap_button-icon_MkibT","button-icon-small":"sidebar_sitemap_button-icon-small_Mhipv","tool-window-content":"sidebar_sitemap_tool-window-content_G-Nut","pages-list":"sidebar_sitemap_pages-list_cb1Mx","page-element":"sidebar_sitemap_page-element_iR9wf","element-list-body":"sidebar_sitemap_element-list-body_OIVac","page-actions":"sidebar_sitemap_page-actions_QTuKw","page-icon":"sidebar_sitemap_page-icon_ujSjM","link":"sidebar_sitemap_link_WvD4-","asset-element":"sidebar_sitemap_asset-element_I1-m4","input-element":"sidebar_sitemap_input-element_YAbpV","new-scrollbar":"sidebar_sitemap_new-scrollbar_Pb1-Y","menu-dropdown":"sidebar_sitemap_menu-dropdown_jAZ-g","menu-item":"sidebar_sitemap_menu-item_cQrV2","shortcut":"sidebar_sitemap_shortcut_Oywax","shortcut-key":"sidebar_sitemap_shortcut-key_IIYlf","user-icon":"sidebar_sitemap_user-icon_l-DH7","title-bar":"sidebar_sitemap_title-bar_tIJtT","title":"sidebar_sitemap_title_HmFc4","view-only-mode":"sidebar_sitemap_view-only-mode_JrsYg","resize-area":"sidebar_sitemap_resize-area_JgdjZ","dnd-over-top":"sidebar_sitemap_dnd-over-top_kGfcb","dnd-over-bot":"sidebar_sitemap_dnd-over-bot_352W2","dnd-over":"sidebar_sitemap_dnd-over_Sf5e2","page-name":"sidebar_sitemap_page-name_601Ii","element-name":"sidebar_sitemap_element-name_iMex0","on-drag":"sidebar_sitemap_on-drag_v3GM8","selected":"sidebar_sitemap_selected_mCOlT","hidden":"sidebar_sitemap_hidden_viFSn","title-spacing-sitemap":"sidebar_sitemap_title-spacing-sitemap_pDMgN","spin-animation":"sidebar_sitemap_spin-animation_SVOeo"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss index bd30a246e..e2595c96f 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss @@ -13,7 +13,7 @@ flex: 1; width: 100%; height: var(--height, 200px); - + padding-left: $s-8; .title-bar { .title { margin-left: $s-2; @@ -29,6 +29,7 @@ border-radius: $br-8; svg { @extend .button-icon; + stroke: var(--icon-foreground); transform: rotate(90deg); } } @@ -227,7 +228,7 @@ } } } - :global(.title-spacing-sitemap) { - padding-right: $s-8; + .title-spacing-sitemap { + padding-left: $s-8; } } diff --git a/frontend/src/app/main/ui/workspace/text_palette.css.json b/frontend/src/app/main/ui/workspace/text_palette.css.json index 8fcffa73d..f38d40b3a 100644 --- a/frontend/src/app/main/ui/workspace/text_palette.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette.css.json @@ -1 +1 @@ -{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-warning":"workspace_text_palette_button-warning_q4pBH","button-disabled":"workspace_text_palette_button-disabled_UR9B3","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","link":"workspace_text_palette_link_6paXO","asset-element":"workspace_text_palette_asset-element_edxQB","new-scrollbar":"workspace_text_palette_new-scrollbar_51-wH","menu-dropdown":"workspace_text_palette_menu-dropdown_IFwlC","menu-item":"workspace_text_palette_menu-item_kSAv3","shortcut":"workspace_text_palette_shortcut_L4FpC","shortcut-key":"workspace_text_palette_shortcut-key_zksbN","user-icon":"workspace_text_palette_user-icon_xRT71","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx","spin-animation":"workspace_text_palette_spin-animation_RlzM-"} \ No newline at end of file +{"button-primary":"workspace_text_palette_button-primary_1umSD","button-secondary":"workspace_text_palette_button-secondary_VOIWz","button-tertiary":"workspace_text_palette_button-tertiary_4AWFN","button-radio":"workspace_text_palette_button-radio_F-Ji2","button-warning":"workspace_text_palette_button-warning_q4pBH","button-disabled":"workspace_text_palette_button-disabled_UR9B3","button-tag":"workspace_text_palette_button-tag_TMcKw","button-icon":"workspace_text_palette_button-icon_bcydd","text-palette":"workspace_text_palette_text-palette_0yeGp","left-arrow":"workspace_text_palette_left-arrow_iSjPL","right-arrow":"workspace_text_palette_right-arrow_cWHr6","button-icon-small":"workspace_text_palette_button-icon-small_wGyH7","link":"workspace_text_palette_link_6paXO","asset-element":"workspace_text_palette_asset-element_edxQB","input-element":"workspace_text_palette_input-element_uE04D","new-scrollbar":"workspace_text_palette_new-scrollbar_51-wH","menu-dropdown":"workspace_text_palette_menu-dropdown_IFwlC","menu-item":"workspace_text_palette_menu-item_kSAv3","shortcut":"workspace_text_palette_shortcut_L4FpC","shortcut-key":"workspace_text_palette_shortcut-key_zksbN","user-icon":"workspace_text_palette_user-icon_xRT71","disabled":"workspace_text_palette_disabled_EF36J","text-palette-content":"workspace_text_palette_text-palette-content_anJb5","text-palette-inside":"workspace_text_palette_text-palette-inside_LgHnf","typography-item":"workspace_text_palette_typography-item_d0vFL","typography-name":"workspace_text_palette_typography-name_NVBRv","typography-font":"workspace_text_palette_typography-font_paqmC","typography-data":"workspace_text_palette_typography-data_eKyme","mid-item":"workspace_text_palette_mid-item_uTcD2","small-item":"workspace_text_palette_small-item_1Y6mx","spin-animation":"workspace_text_palette_spin-animation_RlzM-"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json index 3ed40feb6..d7df7a0c2 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.css.json @@ -1 +1 @@ -{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-warning":"workspace_text_palette_ctx_menu_button-warning_FmD1l","button-disabled":"workspace_text_palette_ctx_menu_button-disabled_7O1-b","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","link":"workspace_text_palette_ctx_menu_link_SJ1YB","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","new-scrollbar":"workspace_text_palette_ctx_menu_new-scrollbar_6G8rs","menu-dropdown":"workspace_text_palette_ctx_menu_menu-dropdown_2vkCl","menu-item":"workspace_text_palette_ctx_menu_menu-item_bDG-3","shortcut":"workspace_text_palette_ctx_menu_shortcut_szqU2","shortcut-key":"workspace_text_palette_ctx_menu_shortcut-key_CNAAP","user-icon":"workspace_text_palette_ctx_menu_user-icon_C9fc6","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z","lib-name":"workspace_text_palette_ctx_menu_lib-name_-5-Hj","lib-num":"workspace_text_palette_ctx_menu_lib-num_O7Nbx","spin-animation":"workspace_text_palette_ctx_menu_spin-animation_y-su6"} \ No newline at end of file +{"button-primary":"workspace_text_palette_ctx_menu_button-primary_bkGXB","button-secondary":"workspace_text_palette_ctx_menu_button-secondary_mbPs7","button-tertiary":"workspace_text_palette_ctx_menu_button-tertiary_Z74wM","button-radio":"workspace_text_palette_ctx_menu_button-radio_r2NrA","button-warning":"workspace_text_palette_ctx_menu_button-warning_FmD1l","button-disabled":"workspace_text_palette_ctx_menu_button-disabled_7O1-b","button-tag":"workspace_text_palette_ctx_menu_button-tag_OmlzA","button-icon":"workspace_text_palette_ctx_menu_button-icon_oklnh","button-icon-small":"workspace_text_palette_ctx_menu_button-icon-small_ebriD","workspace-context-menu":"workspace_text_palette_ctx_menu_workspace-context-menu_OShZn","palette-library":"workspace_text_palette_ctx_menu_palette-library_pDyi5","selected":"workspace_text_palette_ctx_menu_selected_k3kOd","icon-wrapper":"workspace_text_palette_ctx_menu_icon-wrapper_Xoj9o","file-library":"workspace_text_palette_ctx_menu_file-library_t-25M","link":"workspace_text_palette_ctx_menu_link_SJ1YB","asset-element":"workspace_text_palette_ctx_menu_asset-element_-ynNV","input-element":"workspace_text_palette_ctx_menu_input-element_djPBH","new-scrollbar":"workspace_text_palette_ctx_menu_new-scrollbar_6G8rs","menu-dropdown":"workspace_text_palette_ctx_menu_menu-dropdown_2vkCl","menu-item":"workspace_text_palette_ctx_menu_menu-item_bDG-3","shortcut":"workspace_text_palette_ctx_menu_shortcut_szqU2","shortcut-key":"workspace_text_palette_ctx_menu_shortcut-key_CNAAP","user-icon":"workspace_text_palette_ctx_menu_user-icon_C9fc6","library-name":"workspace_text_palette_ctx_menu_library-name_TGs9Z","lib-name":"workspace_text_palette_ctx_menu_lib-name_-5-Hj","lib-num":"workspace_text_palette_ctx_menu_lib-num_O7Nbx","spin-animation":"workspace_text_palette_ctx_menu_spin-animation_y-su6"} \ No newline at end of file diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss index 202cb2964..3b77f7f3d 100644 --- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss +++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss @@ -51,6 +51,7 @@ svg { @include flexCenter; @extend .button-icon-small; + stroke: var(--icon-foreground); } } &.selected,