From c89a1b3b27023195e1384b697c062cea53488c1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Fri, 9 Feb 2024 15:44:53 +0100 Subject: [PATCH] :bug: Fix extend button style in prototype tab --- .../styles/common/refactor/basic-rules.scss | 11 +- .../styles/common/refactor/design-tokens.scss | 4 + .../sidebar/options/menus/interactions.cljs | 4 +- .../sidebar/options/menus/interactions.scss | 288 +++++++++--------- 4 files changed, 164 insertions(+), 143 deletions(-) diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss index 29a9219f0b..83f2c904cb 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -125,10 +125,11 @@ @include buttonStyle; @include flexCenter; @include focusTertiary; + --button-tertiary-border-width: $s-2; border-radius: $br-8; color: var(--button-tertiary-foreground-color-rest); background-color: transparent; - border: $s-2 solid transparent; + border: var(--button-tertiary-border-width) solid transparent; svg, span svg { stroke: var(--button-tertiary-foreground-color-rest); @@ -136,7 +137,7 @@ &:hover { background-color: var(--button-tertiary-background-color-hover); color: var(--button-tertiary-foreground-color-hover); - border: $s-2 solid var(--button-secondary-border-color-hover); + border-color: var(--button-secondary-border-color-hover); svg, span svg { stroke: var(--button-tertiary-foreground-color-hover); @@ -144,7 +145,7 @@ } &:active { outline: none; - border: $s-2 solid transparent; + border-color: transparent; background-color: var(--button-tertiary-background-color-active); color: var(--button-tertiary-foreground-color-active); svg, @@ -169,7 +170,7 @@ .button-icon-selected { outline: none; - border: $s-2 solid var(--button-icon-border-color-selected); + border-color: var(--button-icon-border-color-selected); background-color: var(--button-icon-background-color-selected); color: var(--button-icon-foreground-color-selected); svg { @@ -183,7 +184,7 @@ @include focusRadio; border-radius: $br-8; color: var(--button-radio-foreground-color-rest); - border: $s-1 solid var(--button-radio-background-color-rest); + border-color: $s-1 solid var(--button-radio-background-color-rest); svg, span svg { stroke: var(--button-radio-foreground-color-rest); diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss index 67abb7774a..799195f848 100644 --- a/frontend/resources/styles/common/refactor/design-tokens.scss +++ b/frontend/resources/styles/common/refactor/design-tokens.scss @@ -65,6 +65,9 @@ --button-tertiary-border-color-focus: var(--color-accent-primary); --button-tertiary-foreground-color-focus: var(--color-foreground-primary); + --expand-button-icon-border-width: 0; + --expand-button-icon-border-width-selected: 0; + --button-icon-foreground-color: var(--color-foreground-secondary); --button-icon-foreground-color-hover: var(--color-foreground-secondary); --button-icon-background-color-selected: var(--color-background-quaternary); @@ -396,4 +399,5 @@ --assets-item-name-foreground-color: var(--color-foreground-primary); --text-editor-selection-background-color: var(--la-tertiary-70); + --expand-button-icon-border-width-selected: 2px; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs index c88dbc51b7..f5f04bb7ac 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs @@ -403,10 +403,10 @@ [:div {:class (stl/css-case :element-set-options-group true - :open extended-open?)} + :element-set-options-group-open extended-open?)} ; Summary [:div {:class (stl/css :interactions-summary)} - [:div {:class (stl/css-case :extend-btn true + [:button {:class (stl/css-case :extend-btn true :extended extended-open?) :on-click toggle-extended} i/menu-refactor] diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss index cc3679140f..09c1b42077 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss @@ -96,151 +96,167 @@ @include flexColumn($s-12); } -.element-set-options-group { - &.open { - @include flexColumn; - .extended-options { - @include flexColumn; - .property-row { - @extend .attr-row; - &.big-row { - height: 100%; - } - .interaction-name { - @include twoLineTextEllipsis; - @include titleTipography; - padding-left: $s-4; - width: $s-92; - margin: auto 0; - grid-area: name; - color: var(--title-foreground-color); - } - .select-wrapper { - display: flex; - align-items: center; - grid-area: content; - .easing-select { - width: $s-156; - padding: 0 $s-8; - .dropdown-upwards { - bottom: $s-36; - width: $s-156; - top: unset; - } - } - } - .input-element-wrapper { - @extend .input-element; - grid-area: content; - } - .checkbox-option { - @extend .input-checkbox; - grid-area: content; - } - .position-btns-wrapper { - grid-area: content; - display: grid; - grid-template-areas: - "topleft top topright" - "left center right" - "bottomleft bottom bottomright"; - grid-template-columns: repeat(3, 1fr); - grid-template-rows: repeat(3, 1fr); - width: $s-84; - height: $s-84; - border-radius: $br-8; - background-color: var(--color-background-tertiary); - .direction-btn { - @extend .button-tertiary; - height: $s-28; - width: $s-28; - .rectangle { - height: $s-8; - width: $s-8; - background-color: var(--color-background-quaternary); - } - &:hover { - .rectangle { - background-color: var(--color-accent-primary); - } - } - &.active { - background-color: var(--color-background-quaternary); - .rectangle { - background-color: var(--color-accent-primary); - } - } - } - .center-btn { - grid-area: center; - } - .top-left-btn { - grid-area: topleft; - } - .top-right-btn { - grid-area: topright; - } - .top-center-btn { - grid-area: top; - } - .bottom-left-btn { - grid-area: bottomleft; - } - .bottom-right-btn { - grid-area: bottomright; - } - .bottom-center-btn { - grid-area: bottom; - } - } - .buttons-wrapper { - grid-area: content; - .right svg { - transform: rotate(-90deg); - } - .left svg { - transform: rotate(90deg); - } - .up svg { - transform: rotate(180deg); - } - } - .inputs-wrapper { - grid-area: content; - @include flexRow; - .radio-btn { - @extend .input-checkbox; - } - } +.element-set-options-group-open { + @include flexColumn; +} + +.extended-options { + @include flexColumn; +} + +.property-row { + @extend .attr-row; + &.big-row { + height: 100%; + } + .interaction-name { + @include twoLineTextEllipsis; + @include titleTipography; + padding-left: $s-4; + width: $s-92; + margin: auto 0; + grid-area: name; + color: var(--title-foreground-color); + } + .select-wrapper { + display: flex; + align-items: center; + grid-area: content; + .easing-select { + width: $s-156; + padding: 0 $s-8; + .dropdown-upwards { + bottom: $s-36; + width: $s-156; + top: unset; } } } - - .interactions-summary { - @extend .asset-element; - height: $s-44; - padding: 0; - gap: $s-4; - .extend-btn { + .input-element-wrapper { + @extend .input-element; + grid-area: content; + } + .checkbox-option { + @extend .input-checkbox; + grid-area: content; + } + .position-btns-wrapper { + grid-area: content; + display: grid; + grid-template-areas: + "topleft top topright" + "left center right" + "bottomleft bottom bottomright"; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + width: $s-84; + height: $s-84; + border-radius: $br-8; + background-color: var(--color-background-tertiary); + .direction-btn { @extend .button-tertiary; - height: 100%; + height: $s-28; width: $s-28; - svg { - @extend .button-icon; + .rectangle { + height: $s-8; + width: $s-8; + background-color: var(--color-background-quaternary); } - &.extended { - @extend .button-icon-selected; + &:hover { + .rectangle { + background-color: var(--color-accent-primary); + } + } + &.active { + background-color: var(--color-background-quaternary); + .rectangle { + background-color: var(--color-accent-primary); + } } } - - .remove-btn { - @extend .button-tertiary; - height: $s-32; - width: $s-28; - svg { - @extend .button-icon-small; - } + .center-btn { + grid-area: center; } + .top-left-btn { + grid-area: topleft; + } + .top-right-btn { + grid-area: topright; + } + .top-center-btn { + grid-area: top; + } + .bottom-left-btn { + grid-area: bottomleft; + } + .bottom-right-btn { + grid-area: bottomright; + } + .bottom-center-btn { + grid-area: bottom; + } + } + .buttons-wrapper { + grid-area: content; + .right svg { + transform: rotate(-90deg); + } + .left svg { + transform: rotate(90deg); + } + .up svg { + transform: rotate(180deg); + } + } + .inputs-wrapper { + grid-area: content; + @include flexRow; + .radio-btn { + @extend .input-checkbox; + } + } +} + +.interactions-summary { + @extend .asset-element; + height: $s-44; + padding: 0; + gap: $s-8; + + .remove-btn { + @extend .button-tertiary; + height: $s-32; + width: $s-28; + svg { + @extend .button-icon-small; + } + } +} + +.extend-btn { + @extend .button-tertiary; + --button-tertiary-border-width: var(--expand-button-icon-border-width); + height: 100%; + width: $s-28; + border-end-end-radius: 0; + border-start-end-radius: 0; + padding: 0; + svg { + @extend .button-icon; + } + position: relative; + &:after { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-inline-end: $s-1 solid var(--panel-background-color); + } + &.extended { + @extend .button-icon-selected; + --button-tertiary-border-width: var(--expand-button-icon-border-width-selected); } }