3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-08 21:52:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix swap panel thumbnail gallery appearance

Browse source
This commit is contained in:
Belén Albeza 2024-01-04 17:59:42 +01:00
parent 1576e33564
commit e7d4fc3c4f
3 changed files with 124 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/refactor/design-tokens.scss
View file

@ -207,6 +207,8 @@
--assets-component-background-color-disabled: var( --assets-component-background-color-disabled: var(
--off-white --off-white
); // We don't want this color to change with palette ); // We don't want this color to change with palette
--assets-component-border-color: var(--color-background-tertiary);
--assets-component-border-selected: var(--color-select);
--radio-btns-background-color: var(--color-background-tertiary); --radio-btns-background-color: var(--color-background-tertiary);
--radio-btn-background-color-selected: var(--color-background-quaternary); --radio-btn-background-color-selected: var(--color-background-quaternary);

5
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
View file

@ -343,9 +343,11 @@
:on-change toggle-list-style :on-change toggle-list-style
:name "swap-listing-style"} :name "swap-listing-style"}
[:& radio-button {:icon i/view-as-list-refactor [:& radio-button {:icon i/view-as-list-refactor
:icon-class (stl/css :radio-button)
:value "list" :value "list"
:id "swap-opt-list"}] :id "swap-opt-list"}]
[:& radio-button {:icon i/flex-grid-refactor [:& radio-button {:icon i/flex-grid-refactor
:icon-class (stl/css :radio-button)
:value "grid" :value "grid"
:id "swap-opt-grid"}]]] :id "swap-opt-grid"}]]]
@ -376,7 +378,8 @@
root-shape (ctf/get-component-root data item) root-shape (ctf/get-component-root data item)
loop? (or (contains? parent-components (:main-instance-id item)) loop? (or (contains? parent-components (:main-instance-id item))
(contains? parent-components (:id item)))] (contains? parent-components (:id item)))]
[:& component-swap-item {:item item [:& component-swap-item {:key (:id item)
:item item
:loop loop? :loop loop?
:shapes shapes :shapes shapes
:file-id current-library-id :file-id current-library-id

55
frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
View file

@ -96,16 +96,6 @@
} }
.component-swap { .component-swap {
svg {
stroke: var(--icon-foreground);
fill: var(--icon-foreground);
height: $s-12;
width: $s-12;
cursor: pointer;
}
.search-field { .search-field {
display: flex; display: flex;
align-items: center; align-items: center;
@ -175,8 +165,6 @@
padding-left: $s-20; padding-left: $s-20;
} }
.listing-options-wrapper { .listing-options-wrapper {
width: 100%; width: 100%;
} }
@ -262,8 +250,11 @@
} }
} }
} }
}
}
}
.component-group { .component-group {
@include titleTipography; @include titleTipography;
text-align: left; text-align: left;
display: flex; display: flex;
@ -276,7 +267,6 @@
height: $s-8; height: $s-8;
width: $s-8; width: $s-8;
} }
div { div {
display: flex; display: flex;
width: 90%; width: 90%;
@ -296,24 +286,26 @@
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
} }
} }
} }
}
}
.component-grid { .component-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, $s-124);
grid-auto-rows: calc(10vh + $s-16); grid-auto-rows: $s-124;
gap: $s-4; gap: $s-4;
margin: 0 $s-4 0 $s-8; }
.grid-cell {
.grid-cell {
@include flexCenter; @include flexCenter;
place-items: center;
flex-wrap: wrap; flex-wrap: wrap;
position: relative; position: relative;
padding: $s-8; padding: $s-8;
border-radius: $br-8; border-radius: $br-8;
background-color: var(--assets-component-background-color); background-color: var(--assets-component-background-color);
overflow: hidden; overflow: hidden;
--assets-component-current-border-color: var(--assets-component-border-color);
border: $s-4 solid var(--assets-component-current-border-color);
cursor: pointer; cursor: pointer;
img { img {
height: auto; height: auto;
@ -324,9 +316,10 @@
border: 0; border: 0;
} }
svg { svg {
height: 10vh; height: 100%;
width: 10vh; width: 100%;
stroke: none; stroke: none;
object-fit: contain;
} }
.component-name { .component-name {
@include titleTipography; @include titleTipography;
@ -351,7 +344,7 @@
} }
&.selected { &.selected {
border: $s-1 solid var(--assets-item-border-color); --assets-component-current-border-color: var(--assets-item-border-color);
.component-name { .component-name {
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
} }
@ -372,8 +365,6 @@
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
} }
} }
}
}
} }
.library-name { .library-name {
@ -389,3 +380,13 @@
margin: $s-16 $s-4 0 $s-12; margin: $s-16 $s-4 0 $s-12;
color: var(--title-foreground-color); color: var(--title-foreground-color);
} }
.radio-button {
svg {
stroke: var(--icon-foreground);
fill: var(--icon-foreground);
height: $s-12;
width: $s-12;
cursor: pointer;
}
}