3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-06-11 08:21:40 +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

235
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,116 +250,119 @@
} }
} }
} }
}
}
}
.component-group { .component-group {
@include titleTipography; @include titleTipography;
text-align: left; text-align: left;
display: flex; display: flex;
align-items: center; align-items: center;
margin: 0 $s-16 $s-8 $s-8; margin: 0 $s-16 $s-8 $s-8;
justify-content: space-between; justify-content: space-between;
cursor: pointer; cursor: pointer;
height: $s-24; height: $s-24;
svg { svg {
height: $s-8; height: $s-8;
width: $s-8; width: $s-8;
} }
div {
display: flex;
width: 90%;
}
span {
@include textEllipsis;
}
.component-group-path {
direction: rtl;
}
.component-group-name {
color: var(--assets-item-name-foreground-color);
}
&:hover {
color: var(--assets-item-name-foreground-color-hover);
.component-group-name {
color: var(--assets-item-name-foreground-color-hover);
}
}
}
div { .component-grid {
display: flex; display: grid;
width: 90%; grid-template-columns: repeat(2, $s-124);
} grid-auto-rows: $s-124;
span { gap: $s-4;
@include textEllipsis; }
}
.component-group-path { .grid-cell {
direction: rtl; @include flexCenter;
} place-items: center;
.component-group-name { flex-wrap: wrap;
color: var(--assets-item-name-foreground-color); position: relative;
} padding: $s-8;
&:hover { border-radius: $br-8;
color: var(--assets-item-name-foreground-color-hover); background-color: var(--assets-component-background-color);
.component-group-name { overflow: hidden;
color: var(--assets-item-name-foreground-color-hover); --assets-component-current-border-color: var(--assets-component-border-color);
} border: $s-4 solid var(--assets-component-current-border-color);
} cursor: pointer;
} img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
pointer-events: none;
border: 0;
}
svg {
height: 100%;
width: 100%;
stroke: none;
object-fit: contain;
}
.component-name {
@include titleTipography;
@include textEllipsis;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: $s-2;
text-align: center;
direction: rtl;
}
&:hover {
background-color: var(--assets-item-background-color-hover);
.component-name {
display: block;
color: var(--assets-item-name-foreground-color-hover);
background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%);
} }
} }
.component-grid { &.selected {
display: grid; --assets-component-current-border-color: var(--assets-item-border-color);
grid-template-columns: repeat(2, 1fr); .component-name {
grid-auto-rows: calc(10vh + $s-16); color: var(--assets-item-name-foreground-color-hover);
gap: $s-4; }
margin: 0 $s-4 0 $s-8; }
.grid-cell {
@include flexCenter;
flex-wrap: wrap;
position: relative;
padding: $s-8;
border-radius: $br-8;
background-color: var(--assets-component-background-color);
overflow: hidden;
cursor: pointer;
img {
height: auto;
width: auto;
max-height: 100%;
max-width: 100%;
pointer-events: none;
border: 0;
}
svg {
height: 10vh;
width: 10vh;
stroke: none;
}
.component-name {
@include titleTipography;
@include textEllipsis;
display: none;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
padding: $s-2;
text-align: center;
direction: rtl;
}
&:hover { &.disabled {
background-color: var(--assets-item-background-color-hover); background: var(--assets-component-background-color-disabled);
.component-name { cursor: auto;
display: block; svg {
color: var(--assets-item-name-foreground-color-hover); cursor: auto;
background: linear-gradient(to top, var(--assets-item-background-color-hover) 0%, transparent 100%); }
} .component-name {
} background: linear-gradient(
to top,
&.selected { var(--assets-component-background-color-disabled) 0%,
border: $s-1 solid var(--assets-item-border-color); transparent 100%
.component-name { );
color: var(--assets-item-name-foreground-color-hover); color: var(--assets-item-name-foreground-color-hover);
}
}
&.disabled {
background: var(--assets-component-background-color-disabled);
cursor: auto;
svg {
cursor: auto;
}
.component-name {
background: linear-gradient(
to top,
var(--assets-component-background-color-disabled) 0%,
transparent 100%
);
color: var(--assets-item-name-foreground-color-hover);
}
}
} }
} }
} }
@ -388,4 +379,14 @@
text-transform: uppercase; text-transform: uppercase;
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;
}
}