mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 08:21:40 +02:00
🐛 Fix swap panel thumbnail gallery appearance
This commit is contained in:
parent
1576e33564
commit
e7d4fc3c4f
3 changed files with 124 additions and 118 deletions
|
@ -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);
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue