mirror of
https://github.com/penpot/penpot.git
synced 2025-02-14 19:19:09 -05:00
🐛 Replace overlay icons with new ones
This commit is contained in:
Belén Albeza
Andrey Antukh
parent
2633e56a76
commit
c824711893
11 changed files with 132 additions and 104 deletions
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 145 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 160 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 160 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 144 B |
3
frontend/resources/images/icons/corner-top-refactor.svg
Normal file
3
frontend/resources/images/icons/corner-top-refactor.svg
Normal 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>
|
||||
|
After Width: | Height: | Size: 144 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 164 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 164 B |
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
@ -520,57 +535,45 @@
|
|||
: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
|
||||
|
||||
|
|
|
|||
|
|
@ -145,6 +145,26 @@
|
|||
@extend .input-element;
|
||||
grid-area: content;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.position-btns-wrapper {
|
||||
grid-area: content;
|
||||
|
|
@ -159,27 +179,6 @@
|
|||
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;
|
||||
}
|
||||
|
|
@ -202,26 +201,17 @@
|
|||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue