diff --git a/frontend/resources/images/icons/corner-bottom-refactor.svg b/frontend/resources/images/icons/corner-bottom-refactor.svg new file mode 100644 index 000000000..ca2c80ea5 --- /dev/null +++ b/frontend/resources/images/icons/corner-bottom-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-bottomleft-refactor.svg b/frontend/resources/images/icons/corner-bottomleft-refactor.svg new file mode 100644 index 000000000..ed9972420 --- /dev/null +++ b/frontend/resources/images/icons/corner-bottomleft-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-bottomright-refactor.svg b/frontend/resources/images/icons/corner-bottomright-refactor.svg new file mode 100644 index 000000000..8292d9bbc --- /dev/null +++ b/frontend/resources/images/icons/corner-bottomright-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-center-refactor.svg b/frontend/resources/images/icons/corner-center-refactor.svg new file mode 100644 index 000000000..72b387bc0 --- /dev/null +++ b/frontend/resources/images/icons/corner-center-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-top-refactor.svg b/frontend/resources/images/icons/corner-top-refactor.svg new file mode 100644 index 000000000..542f48376 --- /dev/null +++ b/frontend/resources/images/icons/corner-top-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-topleft-refactor.svg b/frontend/resources/images/icons/corner-topleft-refactor.svg new file mode 100644 index 000000000..eeabf0c23 --- /dev/null +++ b/frontend/resources/images/icons/corner-topleft-refactor.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/resources/images/icons/corner-topright-refactor.svg b/frontend/resources/images/icons/corner-topright-refactor.svg new file mode 100644 index 000000000..27454f142 --- /dev/null +++ b/frontend/resources/images/icons/corner-topright-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 83f2c904c..4dd70f856 100644 --- a/frontend/resources/styles/common/refactor/basic-rules.scss +++ b/frontend/resources/styles/common/refactor/basic-rules.scss @@ -125,7 +125,7 @@ @include buttonStyle; @include flexCenter; @include focusTertiary; - --button-tertiary-border-width: $s-2; + --button-tertiary-border-width: #{$s-2}; border-radius: $br-8; color: var(--button-tertiary-foreground-color-rest); background-color: transparent; diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index f65ff1676..edcb1016b 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -322,6 +322,13 @@ (def ^:icon column-reverse-refactor (icon-xref :column-reverse-refactor)) (def ^:icon constraint-horizontal-refactor (icon-xref :constraint-horizontal-refactor)) (def ^:icon constraint-vertical-refactor (icon-xref :constraint-vertical-refactor)) +(def ^:icon corner-bottom-refactor (icon-xref :corner-bottom-refactor)) +(def ^:icon corner-bottomleft-refactor (icon-xref :corner-bottomleft-refactor)) +(def ^:icon corner-bottomright-refactor (icon-xref :corner-bottom-refactor)) +(def ^:icon corner-center-refactor (icon-xref :corner-center-refactor)) +(def ^:icon corner-top-refactor (icon-xref :corner-top-refactor)) +(def ^:icon corner-topleft-refactor (icon-xref :corner-topleft-refactor)) +(def ^:icon corner-topright-refactor (icon-xref :corner-topright-refactor)) (def ^:icon corner-radius-refactor (icon-xref :corner-radius-refactor)) (def ^:icon curve-refactor (icon-xref :curve-refactor)) (def ^:icon distribute-vertical-spacing-refactor (icon-xref :distribute-vertical-spacing-refactor)) 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 14b091461..766a6b3c0 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 @@ -182,6 +182,21 @@ (when flow [:& flow-item {:flow flow :key (str (:id flow))}])]))) +(def ^:private corner-center-icon + (i/icon-xref :corner-center-refactor (stl/css :corner-icon))) +(def ^:private corner-bottom-icon + (i/icon-xref :corner-bottom-refactor (stl/css :corner-icon))) +(def ^:private corner-bottomleft-icon + (i/icon-xref :corner-bottomleft-refactor (stl/css :corner-icon))) +(def ^:private corner-bottomright-icon + (i/icon-xref :corner-bottomright-refactor (stl/css :corner-icon))) +(def ^:private corner-top-icon + (i/icon-xref :corner-top-refactor (stl/css :corner-icon))) +(def ^:private corner-topleft-icon + (i/icon-xref :corner-topleft-refactor (stl/css :corner-icon))) +(def ^:private corner-topright-icon + (i/icon-xref :corner-topright-refactor (stl/css :corner-icon))) + (mf/defc interaction-entry [{:keys [index shape interaction update-interaction remove-interaction]}] (let [objects (deref refs/workspace-page-objects) @@ -407,8 +422,8 @@ ; Summary [:div {:class (stl/css :interactions-summary)} [:button {:class (stl/css-case :extend-btn true - :extended extended-open?) - :on-click toggle-extended} + :extended extended-open?) + :on-click toggle-extended} i/menu-refactor] [:div {:class (stl/css :interactions-info) @@ -520,87 +535,75 @@ :active (= overlay-pos-type :center)) :data-value "center" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-center-icon] [:button {:class (stl/css-case :direction-btn true :top-left-btn true :active (= overlay-pos-type :top-left)) :data-value "top-left" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-topleft-icon] [:button {:class (stl/css-case :direction-btn true :top-right-btn true :active (= overlay-pos-type :top-right)) :data-value "top-right" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-topright-icon] [:button {:class (stl/css-case :direction-btn true :top-center-btn true :active (= overlay-pos-type :top-center)) :data-value "top-center" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-left-btn true - :active (= overlay-pos-type :bottom-left)) - :data-value "bottom-left" - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] - [:button {:class (stl/css-case :direction-btn true - :bottom-left-btn true - :active (= overlay-pos-type :bottom-left)) - :data-value "bottom-left" - :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-top-icon] [:button {:class (stl/css-case :direction-btn true :bottom-left-btn true :active (= overlay-pos-type :bottom-left)) :data-value "bottom-left" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-bottomleft-icon] [:button {:class (stl/css-case :direction-btn true :bottom-right-btn true :active (= overlay-pos-type :bottom-right)) :data-value "bottom-right" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]] + corner-bottomright-icon] [:button {:class (stl/css-case :direction-btn true :bottom-center-btn true :active (= overlay-pos-type :bottom-center)) :data-value "bottom-center" :on-click toggle-overlay-pos-type} - [:span {:class (stl/css :rectangle)}]]]] + corner-bottom-icon]]] ;; Overlay click outside - [:ul {:class (stl/css :property-list)} - [:li {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "close-" index) - :class (stl/css-case :global/checked close-click-outside?)} - [:span {:class (stl/css-case :global/checked close-click-outside?)} - (when close-click-outside? - i/status-tick-refactor)] - (tr "workspace.options.interaction-close-outside") - [:input {:type "checkbox" - :id (str "close-" index) - :checked close-click-outside? - :on-change change-close-click-outside}]]]] + [:ul {:class (stl/css :property-list)} + [:li {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "close-" index) + :class (stl/css-case :global/checked close-click-outside?)} + [:span {:class (stl/css-case :global/checked close-click-outside?)} + (when close-click-outside? + i/status-tick-refactor)] + (tr "workspace.options.interaction-close-outside") + [:input {:type "checkbox" + :id (str "close-" index) + :checked close-click-outside? + :on-change change-close-click-outside}]]]] ;; Overlay background - [:li {:class (stl/css :property-row)} - [:div {:class (stl/css :checkbox-option)} - [:label {:for (str "background-" index) - :class (stl/css-case :global/checked background-overlay?)} - [:span {:class (stl/css-case :global/checked background-overlay?)} - (when background-overlay? - i/status-tick-refactor)] - (tr "workspace.options.interaction-background") - [:input {:type "checkbox" - :id (str "background-" index) - :checked background-overlay? - :on-change change-background-overlay}]]]]]]) + [:li {:class (stl/css :property-row)} + [:div {:class (stl/css :checkbox-option)} + [:label {:for (str "background-" index) + :class (stl/css-case :global/checked background-overlay?)} + [:span {:class (stl/css-case :global/checked background-overlay?)} + (when background-overlay? + i/status-tick-refactor)] + (tr "workspace.options.interaction-background") + [:input {:type "checkbox" + :id (str "background-" index) + :checked background-overlay? + :on-change change-background-overlay}]]]]]]) (when (ctsi/has-animation? interaction) [:* 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 aa3989fe9..f9eb79f54 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 @@ -145,63 +145,6 @@ @extend .input-element; 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 { @@ -222,6 +165,53 @@ } } } + +.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); + .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; + } +} + +.direction-btn { + @extend .button-tertiary; + height: $s-28; + width: $s-28; + + &.active { + @extend .button-icon-selected; + } +} + .checkbox-option { @extend .input-checkbox; grid-area: content; @@ -274,6 +264,13 @@ } } +.corner-icon { + fill: none; + stroke: currentColor; + width: $s-12; + height: $s-12; +} + .flow-element { @include flexRow; }