0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 16:48:16 -05:00

🐛 Fix importzip file modal

This commit is contained in:
Eva 2024-01-25 10:22:43 +01:00 committed by Andrey Antukh
parent e92932b4f9
commit a3a7c597b5
2 changed files with 39 additions and 20 deletions

View file

@ -216,7 +216,9 @@
[:div {:class (stl/css :file-name-label)}
(:name file)
(when is-shared? i/library-refactor)])
(when is-shared?
[:span {:class (stl/css :icon)}
i/library-refactor])])
[:div {:class (stl/css :edit-entry-buttons)}
(when (= "application/zip" (:type file))
@ -242,9 +244,10 @@
(let [library-data (->> @state :files (d/seek #(= library-id (:file-id %))))
error? (or (:deleted? library-data) (:import-error library-data))]
(when (some? library-data)
[:div {:class (stl/css-case :linked-library-tag true
:error error?)}
i/detach-refactor (:name library-data)])))]]))
[:div {:class (stl/css :linked-library)}
(:name library-data)
[:span {:class (stl/css-case :linked-library-tag true
:error error?)} i/detach-refactor]])))]]))
(mf/defc import-dialog
{::mf/register modal/components

View file

@ -107,7 +107,19 @@
}
.file-name-label {
@include titleTipography;
display: flex;
align-items: center;
gap: $s-12;
flex-grow: 1;
.icon {
@include flexCenter;
height: $s-16;
width: $s-16;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
.edit-entry-buttons {
@include flexRow;
@ -128,18 +140,22 @@
color: var(--modal-text-foreground-color);
}
.linked-libraries {
.linked-library {
display: flex;
align-items: center;
gap: $s-12;
color: var(--modal-text-foreground-color);
.linked-library-tag {
@include flexCenter;
height: $s-24;
width: $s-16;
width: $s-24;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
&.error {
svg {
stroke: var(--error-color);
stroke: var(--status-error-color);
}
}
}
@ -147,46 +163,46 @@
&.loading {
.file-name {
color: var(--pending-color);
color: var(--status-pending-color);
.file-icon {
:global(#loader-pencil) {
color: var(--pending-color);
stroke: var(--pending-color);
fill: var(--pending-color);
color: var(--status-pending-color);
stroke: var(--status-pending-color);
fill: var(--status-pending-color);
}
}
}
}
&.warning {
.file-name {
color: var(--warning-color);
color: var(--status-warning-color);
.file-icon svg {
stroke: var(--warning-color);
stroke: var(--status-warning-color);
}
.file-icon.icon-fill svg {
fill: var(--warning-color);
fill: var(--status-warning-color);
}
}
}
&.success {
.file-name {
color: var(--ok-color);
color: var(--status-success-color);
.file-icon svg {
stroke: var(--ok-color);
stroke: var(--status-success-color);
}
.file-icon.icon-fill svg {
fill: var(--ok-color);
fill: var(--status-success-color);
}
}
}
&.error {
.file-name {
color: var(--error-color);
color: var(--status-error-color);
.file-icon svg {
stroke: var(--error-color);
stroke: var(--status-error-color);
}
.file-icon.icon-fill svg {
fill: var(--error-color);
fill: var(--status-error-color);
}
}
}