3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-31 14:36:13 +02:00
Code Issues Projects Releases Packages Wiki Activity

🐛 Fix update modal spacing

Browse source
This commit is contained in:
Eva Marco 2024-03-13 16:41:53 +01:00
parent 18fc08d418
commit 04a69c2a2c
4 changed files with 151 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

2
frontend/resources/styles/common/refactor/mixins.scss
View file

@ -116,11 +116,11 @@
} }
@mixin textEllipsis { @mixin textEllipsis {
display: block;
max-width: 99%; max-width: 99%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
display: block;
} }
@mixin twoLineTextEllipsis { @mixin twoLineTextEllipsis {

56
frontend/src/app/main/ui/workspace/libraries.cljs
View file

@ -37,6 +37,15 @@
(def ^:private close-icon (def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon))) (i/icon-xref :close (stl/css :close-icon)))
(def ^:private add-icon
(i/icon-xref :add (stl/css :add-icon)))
(def ^:private detach-icon
(i/icon-xref :detach (stl/css :detach-icon)))
(def ^:private library-icon
(i/icon-xref :library (stl/css :library-icon)))
(def ref:workspace-file (def ref:workspace-file
(l/derived :workspace-file st/state)) (l/derived :workspace-file st/state))
@ -189,14 +198,14 @@
:count-libraries 1}))))] :count-libraries 1}))))]
[:div {:class (stl/css :libraries-content)} [:div {:class (stl/css :libraries-content)}
[:div {:class (stl/css :section)} [:div {:class (stl/css :lib-section)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable false
:title (tr "workspace.libraries.in-this-file") :title (tr "workspace.libraries.in-this-file")
:class (stl/css :title-spacing-lib)}] :class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :section-list)} [:div {:class (stl/css :section-list)}
[:div {:class (stl/css :section-list-item)} [:div {:class (stl/css :section-list-item)}
[:div [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")] [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
[:ul {:class (stl/css :item-contents)} [:ul {:class (stl/css :item-contents)}
[:& describe-library-blocks {:components-count (count components) [:& describe-library-blocks {:components-count (count components)
@ -216,7 +225,7 @@
(for [{:keys [id name] :as library} linked-libraries] (for [{:keys [id name] :as library} linked-libraries]
[:div {:class (stl/css :section-list-item) [:div {:class (stl/css :section-list-item)
:key (dm/str id)} :key (dm/str id)}
[:div [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-name)} name]
[:ul {:class (stl/css :item-contents)} [:ul {:class (stl/css :item-contents)}
(let [components-count (count (or (ctkl/components-seq (:data library)) [])) (let [components-count (count (or (ctkl/components-seq (:data library)) []))
@ -232,24 +241,23 @@
:type "button" :type "button"
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click unlink-library} :on-click unlink-library}
i/detach]])]] detach-icon]])]]
[:div {:class (stl/css :section)} [:div {:class (stl/css :shared-section)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable false
:title (tr "workspace.libraries.shared-libraries") :title (tr "workspace.libraries.shared-libraries")
:class (stl/css :title-spacing-lib)}] :class (stl/css :title-spacing-lib)}]
[:div {:class (stl/css :libraries-search)} [:& search-bar {:on-change change-search-term
[:& search-bar {:on-change change-search-term :value search-term
:value search-term :placeholder (tr "workspace.libraries.search-shared-libraries")
:placeholder (tr "workspace.libraries.search-shared-libraries") :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
(if (seq shared-libraries) (if (seq shared-libraries)
[:div {:class (stl/css :section-list-shared)} [:div {:class (stl/css :section-list-shared)}
(for [{:keys [id name] :as library} shared-libraries] (for [{:keys [id name] :as library} shared-libraries]
[:div {:class (stl/css :section-list-item) [:div {:class (stl/css :section-list-item)
:key (dm/str id)} :key (dm/str id)}
[:div [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-name)} name]
[:ul {:class (stl/css :item-contents)} [:ul {:class (stl/css :item-contents)}
(let [components-count (dm/get-in library [:library-summary :components :count] 0) (let [components-count (dm/get-in library [:library-summary :components :count] 0)
@ -263,7 +271,7 @@
[:button {:class (stl/css :item-button-shared) [:button {:class (stl/css :item-button-shared)
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click link-library} :on-click link-library}
i/add]])] add-icon]])]
(when (empty? shared-libraries) (when (empty? shared-libraries)
[:div {:class (stl/css :section-list-empty)} [:div {:class (stl/css :section-list-empty)}
@ -272,7 +280,10 @@
(tr "workspace.libraries.loading") (tr "workspace.libraries.loading")
(str/empty? search-term) (str/empty? search-term)
(tr "workspace.libraries.no-shared-libraries-available") [:*
[:span {:class (stl/css :empty-state-icon)}
library-icon]
(tr "workspace.libraries.no-shared-libraries-available")]
:else :else
(tr "workspace.libraries.no-matches-for" search-term))]))]])) (tr "workspace.libraries.no-matches-for" search-term))]))]]))
@ -351,9 +362,11 @@
(dwl/sync-file file-id library-id))))))] (dwl/sync-file file-id library-id))))))]
[:div {:class (stl/css :updates-content)} [:div {:class (stl/css :updates-content)}
[:div {:class (stl/css :section)} [:div {:class (stl/css :update-section)}
(if (empty? libs-assets) (if (empty? libs-assets)
[:div {:class (stl/css :section-list-empty)} [:div {:class (stl/css :section-list-empty)}
[:span {:class (stl/css :empty-state-icon)}
library-icon]
(tr "workspace.libraries.no-libraries-need-sync")] (tr "workspace.libraries.no-libraries-need-sync")]
[:* [:*
[:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")] [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
@ -364,7 +377,7 @@
{:keys [components colors typographies]}] libs-assets] {:keys [components colors typographies]}] libs-assets]
[:div {:class (stl/css :section-list-item) [:div {:class (stl/css :section-list-item)
:key (dm/str id)} :key (dm/str id)}
[:div [:div {:class (stl/css :item-content)}
[:div {:class (stl/css :item-name)} name] [:div {:class (stl/css :item-name)} name]
[:ul {:class (stl/css :item-contents)} (describe-library [:ul {:class (stl/css :item-contents)} (describe-library
(count components) (count components)
@ -388,6 +401,7 @@
root-shape (ctf/get-component-root (:data library) component)] root-shape (ctf/get-component-root (:data library) component)]
[:* [:*
[:& component-svg {:root-shape root-shape [:& component-svg {:root-shape root-shape
:class (stl/css :component-svg)
:objects (:objects component)}] :objects (:objects component)}]
[:div {:class (stl/css :name-block)} [:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name) [:span {:class (stl/css :item-name)
@ -396,7 +410,7 @@
(when (:components exceeded) (when (:components exceeded)
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (uuid/next)} :key (uuid/next)}
[:div {:class (stl/css :name-block.ellipsis)} [:div {:class (stl/css :name-block :ellipsis)}
[:span {:class (stl/css :item-name)} "(...)"]]])]) [:span {:class (stl/css :item-name)} "(...)"]]])])
(when-not (empty? colors) (when-not (empty? colors)
@ -448,10 +462,9 @@
(when (or (pos? (:components exceeded)) (when (or (pos? (:components exceeded))
(pos? (:colors exceeded)) (pos? (:colors exceeded))
(pos? (:typographies exceeded))) (pos? (:typographies exceeded)))
[:div {:class (stl/css :libraries-updates-see-all)} [:& lb/link-button {:on-click see-all-assets
[:& lb/link-button {:on-click see-all-assets :class (stl/css :libraries-updates-see-all)
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]])) :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}])])]])]]))
(mf/defc libraries-dialog (mf/defc libraries-dialog
{::mf/register modal/components {::mf/register modal/components
::mf/register-as :libraries-dialog} ::mf/register-as :libraries-dialog}
@ -525,7 +538,8 @@
[:div {:class (stl/css :modal-overlay)} [:div {:class (stl/css :modal-overlay)}
[:div {:class (stl/css :modal-dialog :modal-v2-info)} [:div {:class (stl/css :modal-dialog :modal-v2-info)}
[:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"] [:div {:class (stl/css :modal-v2-title)}
"IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
[:div {:class (stl/css :modal-content)} [:div {:class (stl/css :modal-content)}
[:div {:class (stl/css :info-content)} [:div {:class (stl/css :info-content)}
[:div {:class (stl/css :info-block)} [:div {:class (stl/css :info-block)}

222
frontend/src/app/main/ui/workspace/libraries.scss
View file

@ -13,6 +13,8 @@
.modal-dialog { .modal-dialog {
@extend .modal-container-base; @extend .modal-container-base;
display: grid;
grid-template-rows: auto 1fr;
height: $s-520; height: $s-520;
max-height: $s-520; max-height: $s-520;
width: $s-712; width: $s-712;
@ -30,7 +32,7 @@
.modal-title { .modal-title {
@include headlineMediumTypography; @include headlineMediumTypography;
margin-bottom: $s-16; margin-block-end: $s-16;
color: var(--modal-title-foreground-color); color: var(--modal-title-foreground-color);
} }
@ -40,15 +42,20 @@
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: $s-32; gap: $s-32;
padding-top: $s-24;
height: 100%;
max-height: $s-400; max-height: $s-400;
padding-block-start: $s-16;
} }
.section { .lib-section,
display: flex; .update-section,
flex-direction: column; .shared-section {
height: calc(100% - $s-12); display: grid;
grid-template-rows: auto 1fr;
gap: $s-8;
}
.shared-section {
grid-template-rows: auto auto 1fr;
} }
.title-spacing-lib { .title-spacing-lib {
@ -57,20 +64,21 @@
.section-list, .section-list,
.section-list-shared { .section-list-shared {
height: 100%; display: grid;
grid-auto-rows: min-content;
gap: $s-8;
max-height: $s-320; max-height: $s-320;
margin-top: $s-12; overflow-y: auto;
overflow: auto;
} }
.section-list-item { .section-list-item {
display: grid; display: grid;
grid-template-columns: 1fr auto; grid-template-columns: 1fr auto;
column-gap: $s-12; gap: $s-8;
margin-bottom: $s-24; }
&:last-child {
margin-bottom: $s-8; .item-content {
} height: fit-content;
} }
.item-name { .item-name {
@ -85,6 +93,7 @@
height: $s-32; height: $s-32;
min-width: $s-92; min-width: $s-92;
padding: $s-8 $s-24; padding: $s-8 $s-24;
margin: 0;
border-radius: $br-8; border-radius: $br-8;
} }
@ -95,26 +104,17 @@
.item-button, .item-button,
.item-button-shared { .item-button-shared {
@extend .button-secondary; @extend .button-secondary;
padding: $s-8 $s-24;
height: $s-32; height: $s-32;
border-radius: $br-8;
margin-right: $s-2;
padding: $s-8;
width: $s-32; width: $s-32;
margin-left: $s-8; margin-inline-start: $s-2;
svg { margin-inline-end: $s-8;
@extend .button-icon; padding: $s-8;
stroke: var(--icon-foreground);
}
} }
.item-button-icon { .detach-icon,
width: $s-28; .add-icon {
height: $s-28; @extend .button-icon;
svg { stroke: var(--icon-foreground);
@extend .button-icon;
stroke: var(--icon-foreground);
}
} }
.section-list-shared { .section-list-shared {
@ -123,46 +123,56 @@
.section-title { .section-title {
@include headlineSmallTypography; @include headlineSmallTypography;
margin-block-end: $s-12;
color: var(--title-foreground-color); color: var(--title-foreground-color);
margin-bottom: $s-12;
}
.libraries-search {
margin: $s-12 0;
} }
.search-icon { .search-icon {
@include flexCenter; @include flexCenter;
padding: 0 0 0 $s-8;
width: $s-20; width: $s-20;
padding: 0 0 0 $s-8;
svg { svg {
@extend .button-icon-small; @extend .button-icon-small;
stroke: var(--icon-foreground); stroke: var(--icon-foreground);
} }
} }
// empty state
.section-list-empty { .section-list-empty {
@include bodyLargeTypography; @include bodyMediumTypography;
@include flexCenter; display: grid;
color: var(--empty-message-foreground-color); grid-template-rows: auto 1fr;
justify-items: center;
svg { gap: $s-8;
@extend .button-icon-small; text-align: center;
stroke: var(--icon-foreground); height: fit-content;
width: $s-16; margin-block: $s-16;
height: $s-16; color: var(--modal-title-foreground-color);
}
} }
.empty-state-icon {
@include flexCenter;
width: $s-48;
height: $s-48;
border-radius: $br-circle;
background-color: var(--pill-background-color);
}
.library-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
height: $s-32;
width: $s-32;
}
// Update library tab
.libraries-updates-see-all { .libraries-updates-see-all {
@extend .link;
direction: rtl; direction: rtl;
grid-column: span 3; grid-column: span 3;
margin-top: $s-8; margin-block-start: $s-8;
margin-right: $s-8; margin-inline-start: $s-8;
& input { margin: 0;
@extend .link;
margin: 0;
}
} }
.updates-content { .updates-content {
@ -173,55 +183,41 @@
display: grid; display: grid;
grid-column: span 3; grid-column: span 3;
grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr)); grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
grid-gap: $s-24; gap: $s-24;
font-size: $fs-12; margin-block-start: $s-16;
margin-top: $s-16;
} }
.libraries-updates-item { .libraries-updates-item {
display: flex; @include bodyLargeTypography;
align-items: center; display: grid;
grid-template-columns: auto 1fr;
align-items: start;
gap: $s-8;
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
&:not(:first-child) {
margin-top: $s-8;
}
& svg {
background-color: var(--color-canvas);
border-radius: $br-4;
border: $s-2 solid transparent;
height: $s-24;
width: $s-24;
min-height: $s-24;
min-width: $s-24;
}
& .name-block {
color: var(--gray-20-color);
margin-left: $s-8;
width: $s-168;
&.ellipsis {
padding-left: calc($s-24 + #{$s-8});
}
}
& .item-name {
display: block;
margin: 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
} }
.modal-v2-info { .component-svg {
width: $s-664; background-color: var(--color-canvas);
height: fit-content; border-radius: $br-4;
.modal-title { border: $s-2 solid transparent;
font-size: $fs-18; height: $s-24;
} width: $s-24;
min-height: $s-24;
min-width: $s-24;
}
.name-block {
color: var(--library-content-foreground-color);
width: $s-168;
}
.ellipsis {
padding-inline-start: calc($s-24 + #{$s-8});
}
.item-name {
@include textEllipsis;
margin: 0;
} }
.item-update { .item-update {
@ -230,8 +226,8 @@
height: $s-32; height: $s-32;
min-width: $s-92; min-width: $s-92;
padding: $s-8 $s-24; padding: $s-8 $s-24;
margin-inline-end: $s-2;
border-radius: $br-8; border-radius: $br-8;
margin-right: $s-2;
&:disabled { &:disabled {
@extend .button-disabled; @extend .button-disabled;
} }
@ -242,6 +238,7 @@
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0;
} }
.element-count { .element-count {
@ -253,10 +250,21 @@
} }
} }
// Modal Component v2 update
.modal-v2-info {
width: $s-664;
height: fit-content;
}
.modal-v2-title {
@include headlineMediumTypography;
color: var(--modal-title-foreground-color);
}
.info-content { .info-content {
display: grid;
grid-template-rows: repeat(4, 1fr);
margin-top: $s-32; margin-top: $s-32;
display: flex;
flex-direction: column;
gap: $s-24; gap: $s-24;
} }
@ -276,7 +284,6 @@
margin-top: $s-8; margin-top: $s-8;
border-radius: $br-circle; border-radius: $br-circle;
background: $db-quaternary; background: $db-quaternary;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -284,28 +291,27 @@
svg { svg {
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
fill: $da-primary; fill: var(--icon-foreground-active);
} }
} }
.info-block-title { .info-block-title {
@include bodyLargeTypography;
grid-area: title; grid-area: title;
font-size: $fs-16; color: var(--modal-title-foreground-color);
color: $df-primary;
} }
.info-block-content { .info-block-content {
@include bodyMediumTypography;
grid-area: content; grid-area: content;
font-size: $fs-14; color: var(--library-content-foreground-color);
color: $df-secondary;
line-height: 1.2;
} }
.info-bottom { .info-bottom {
margin-top: $s-24;
margin-right: $s-8;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
margin-block-start: $s-24;
margin-inline-end: $s-8;
} }
.primary-button { .primary-button {

2
frontend/translations/es.po
View file

@ -3633,7 +3633,7 @@ msgstr "%s componentes"
#: src/app/main/ui/workspace/libraries.cljs #: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.file-library" msgid "workspace.libraries.file-library"
msgstr "Biblioteca de este archivo" msgstr "Biblioteca del archivo"
#: src/app/main/ui/workspace/libraries.cljs #: src/app/main/ui/workspace/libraries.cljs
msgid "workspace.libraries.graphics" msgid "workspace.libraries.graphics"