Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-12 18:18:24 -05:00
Code Issues Activity

🐛 Replace overlay icons with new ones

Browse source
This commit is contained in:
Belén Albeza 2024-02-09 17:13:55 +01:00 • committed by Andrey Antukh
parent 2633e56a76
commit c824711893
11 changed files with 132 additions and 104 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
frontend/resources/images/icons/corner-bottom-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M15.333 14H.667"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 145 B

3
frontend/resources/images/icons/corner-bottomleft-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 14H9.5A7.5 7.5 0 012 6.5V2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 160 B

3
frontend/resources/images/icons/corner-bottomright-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 14h4.5A7.5 7.5 0 0014 6.5V2"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 160 B

3
frontend/resources/images/icons/corner-center-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M.667 8h14.666"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 144 B

3
frontend/resources/images/icons/corner-top-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M15.333 2H.667"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 144 B

3
frontend/resources/images/icons/corner-topleft-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H9.5A7.499 7.499 0 002 9.5V14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 164 B

3
frontend/resources/images/icons/corner-topright-refactor.svg Normal file
View file

@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" stroke-linecap="round" stroke-linejoin="round">
<path d="M2 2h4.5A7.499 7.499 0 0114 9.5V14"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 164 B

2
frontend/resources/styles/common/refactor/basic-rules.scss
View file

@ -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;

7
frontend/src/app/main/ui/icons.cljs
View file

@ -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))

95
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
View file

@ -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)
[:*

111
frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
View file

@ -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;
}