Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-24 07:29:08 -05:00
Code Issues Activity

♻️ Refactor libraries css

Browse source
This commit is contained in:
Eva Marco 2024-03-13 13:07:39 +01:00
parent e2412b3d43
commit b41b3de46d
2 changed files with 347 additions and 351 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -34,6 +34,9 @@
[okulary.core :as l] [okulary.core :as l]
[rumext.v2 :as mf])) [rumext.v2 :as mf]))
(def ^:private close-icon
(i/icon-xref :close (stl/css :close-icon)))
(def ref:workspace-file (def ref:workspace-file
(l/derived :workspace-file st/state)) (l/derived :workspace-file st/state))
@ -185,7 +188,7 @@
:on-cancel on-delete-cancel :on-cancel on-delete-cancel
:count-libraries 1}))))] :count-libraries 1}))))]
[:* [:div {:class (stl/css :libraries-content)}
[:div {:class (stl/css :section)} [:div {:class (stl/css :section)}
[:& title-bar {:collapsable false [:& title-bar {:collapsable false
:title (tr "workspace.libraries.in-this-file") :title (tr "workspace.libraries.in-this-file")
@ -200,16 +203,15 @@
:graphics-count (count media) :graphics-count (count media)
:colors-count (count colors) :colors-count (count colors)
:typography-count (count typographies)}]]] :typography-count (count typographies)}]]]
[:div (if ^boolean shared?
(if ^boolean shared? [:input {:class (stl/css :item-unpublish)
[:input {:class (stl/css :item-unpublish) :type "button"
:type "button" :value (tr "common.unpublish")
:value (tr "common.unpublish") :on-click unpublish}]
:on-click unpublish}] [:input {:class (stl/css :item-publish)
[:input {:class (stl/css :item-publish) :type "button"
:type "button" :value (tr "common.publish")
:value (tr "common.publish") :on-click publish}])]
:on-click publish}])]]
(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)
@ -348,106 +350,107 @@
(dwl/set-updating-library true) (dwl/set-updating-library true)
(dwl/sync-file file-id library-id))))))] (dwl/sync-file file-id library-id))))))]
[:div {:class (stl/css :section)} [:div {:class (stl/css :updates-content)}
(if (empty? libs-assets) [:div {:class (stl/css :section)}
[:div {:class (stl/css :section-list-empty)} (if (empty? libs-assets)
(tr "workspace.libraries.no-libraries-need-sync")] [:div {:class (stl/css :section-list-empty)}
[:* (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")]
[:div {:class (stl/css :section-list)} [:div {:class (stl/css :section-list)}
(for [[{:keys [id name] :as library} (for [[{:keys [id name] :as library}
exceeded exceeded
{: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
[: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)
0 0
(count colors) (count colors)
(count typographies))]] (count typographies))]]
[:button {:type "button" [:button {:type "button"
:class (stl/css :item-update) :class (stl/css :item-update)
:disabled updating? :disabled updating?
:data-library-id (dm/str id) :data-library-id (dm/str id)
:on-click update} :on-click update}
(tr "workspace.libraries.update")] (tr "workspace.libraries.update")]
[:div {:class (stl/css :libraries-updates)} [:div {:class (stl/css :libraries-updates)}
(when-not (empty? components) (when-not (empty? components)
[:div {:class (stl/css :libraries-updates-column)} [:div {:class (stl/css :libraries-updates-column)}
(for [component components] (for [component components]
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id component))} :key (dm/str (:id component))}
(let [component (ctf/load-component-objects (:data library) component) (let [component (ctf/load-component-objects (:data library) component)
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
: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)
:title (:name component)} :title (:name component)}
(:name component)]]])]) (:name component)]]])])
(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)
[:div {:class (stl/css :libraries-updates-column) [:div {:class (stl/css :libraries-updates-column)
:style #js {"--bullet-size" "24px"}} :style #js {"--bullet-size" "24px"}}
(for [color colors] (for [color colors]
(let [default-name (cond (let [default-name (cond
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type])) (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
(:color color) (:color color) (:color color) (:color color)
:else (:value color))] :else (:value color))]
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id color))} :key (dm/str (:id color))}
[:* [:*
[:& cb/color-bullet {:color {:color (:color color) [:& cb/color-bullet {:color {:color (:color color)
:id (:id color) :id (:id color)
:opacity (:opacity color)}}] :opacity (:opacity color)}}]
[:div {:class (stl/css :name-block)} [:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name) [:span {:class (stl/css :item-name)
:title (:name color)} :title (:name color)}
(:name color)] (:name color)]
(when-not (= (:name color) default-name) (when-not (= (:name color) default-name)
[:span.color-value (:color color)])]]])) [:span.color-value (:color color)])]]]))
(when (:colors exceeded) (when (:colors 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? typographies) (when-not (empty? typographies)
[:div {:class (stl/css :libraries-updates-column)} [:div {:class (stl/css :libraries-updates-column)}
(for [typography typographies] (for [typography typographies]
[:div {:class (stl/css :libraries-updates-item) [:div {:class (stl/css :libraries-updates-item)
:key (dm/str (:id typography))} :key (dm/str (:id typography))}
[:* [:*
[:div {:style {:font-family (:font-family typography) [:div {:style {:font-family (:font-family typography)
:font-weight (:font-weight typography) :font-weight (:font-weight typography)
:font-style (:font-style typography)}} :font-style (:font-style typography)}}
(tr "workspace.assets.typography.sample")] (tr "workspace.assets.typography.sample")]
[:div {:class (stl/css :name-block)} [:div {:class (stl/css :name-block)}
[:span {:class (stl/css :item-name) [:span {:class (stl/css :item-name)
:title (:name typography)} :title (:name typography)}
(:name typography)]]]]) (:name typography)]]]])
(when (:typographies exceeded) (when (:typographies 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 (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)} [:div {:class (stl/css :libraries-updates-see-all)}
[:& lb/link-button {:on-click see-all-assets [:& lb/link-button {:on-click see-all-assets
: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
@ -491,28 +494,24 @@
[:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside} [:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside}
[:div {:class (stl/css :modal-dialog)} [:div {:class (stl/css :modal-dialog)}
[:button {:class (stl/css :close) [:button {:class (stl/css :close-btn)
:on-click close-dialog} :on-click close-dialog}
i/close] close-icon]
[:div {:class (stl/css :modal-title)} [:div {:class (stl/css :modal-title)}
"Libraries"] (tr "workspace.libraries.libraries")]
[:div {:class (stl/css :modal-content)} [:& tab-container
[:div {:class (stl/css :libraries-header)} {:on-change-tab on-tab-change
[:& tab-container :selected selected-tab
{:on-change-tab on-tab-change :collapsable false}
:selected selected-tab [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
:collapsable false} [:& libraries-tab {:file-id file-id
[:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")} :shared? shared?
[:div {:class (stl/css :libraries-content)} :linked-libraries libraries
[:& libraries-tab {:file-id file-id :shared-libraries shared-libraries}]]
:shared? shared? [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
:linked-libraries libraries [:& updates-tab {:file-id file-id
:shared-libraries shared-libraries}]]] :file-data file-data
[:& tab-element {:id :updates :title (tr "workspace.libraries.updates")} :libraries libraries}]]]]]))
[:div {:class (stl/css :updates-content)}
[:& updates-tab {:file-id file-id
:file-data file-data
:libraries libraries}]]]]]]]]))
(mf/defc v2-info-dialog (mf/defc v2-info-dialog
{::mf/register modal/components {::mf/register modal/components

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

@ -6,175 +6,169 @@
@import "refactor/common-refactor.scss"; @import "refactor/common-refactor.scss";
// Library
.modal-overlay { .modal-overlay {
@include flexCenter; @extend .modal-overlay-base;
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: $z-index-modal;
background-color: var(--overlay-color);
} }
.modal-dialog { .modal-dialog {
position: relative; @extend .modal-container-base;
height: $s-520; height: $s-520;
max-height: 100%; max-height: $s-520;
width: $s-712; width: $s-712;
padding: $s-32; max-width: $s-712;
border-radius: $br-10; }
background-color: var(--modal-background-color);
.close {
@extend .button-tertiary;
position: absolute;
top: $s-8;
right: $s-8;
width: $s-28;
height: $s-32;
border-radius: $br-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.modal-title { .close-btn {
@include headlineMediumTypography; @extend .modal-close-btn-base;
margin-bottom: $s-16; }
color: var(--modal-title-foreground-color);
.close-icon {
@extend .button-icon;
stroke: var(--icon-foreground);
}
.modal-title {
@include headlineMediumTypography;
margin-bottom: $s-16;
color: var(--modal-title-foreground-color);
}
// Tabs content
.libraries-content,
.updates-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-32;
padding-top: $s-24;
height: 100%;
max-height: $s-400;
}
.section {
display: flex;
flex-direction: column;
height: calc(100% - $s-12);
}
.title-spacing-lib {
margin: 0 0 0 calc(-1 * $s-8);
}
.section-list,
.section-list-shared {
height: 100%;
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
}
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: $s-12;
margin-bottom: $s-24;
&:last-child {
margin-bottom: $s-8;
} }
} }
.modal-content { .item-name {
height: 100%; @include bodyLargeTypography;
.libraries-header { color: var(--library-name-foreground-color);
height: 100%; }
.item-publish,
.item-unpublish {
@extend .button-primary;
@include uppercaseTitleTipography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
border-radius: $br-8;
}
.item-unpublish {
@extend .button-secondary;
}
.item-button,
.item-button-shared {
@extend .button-secondary;
padding: $s-8 $s-24;
height: $s-32;
border-radius: $br-8;
margin-right: $s-2;
padding: $s-8;
width: $s-32;
margin-left: $s-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
} }
.libraries-content, }
.updates-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: $s-32;
padding-top: $s-24;
height: 100%;
max-height: $s-400;
.section {
display: flex;
flex-direction: column;
height: calc(100% - $s-12);
.title-spacing-lib {
margin: 0 0 0 calc(-1 * $s-8);
}
.section-list,
.section-list-shared {
height: 100%;
max-height: $s-320;
margin-top: $s-12;
overflow: auto;
.section-list-item {
display: grid;
grid-template-columns: 1fr auto;
column-gap: $s-12;
margin-bottom: $s-24;
&:last-child {
margin-bottom: $s-8;
}
.item-name {
@include bodyLargeTypography;
color: var(--library-name-foreground-color);
}
.item-publish,
.item-unpublish {
@extend .button-primary;
@include uppercaseTitleTipography;
height: $s-32;
min-width: $s-92;
padding: $s-8 $s-24;
border-radius: $br-8;
}
.item-unpublish { .item-button-icon {
@extend .button-secondary; width: $s-28;
} height: $s-28;
.item-button, svg {
.item-button-shared { @extend .button-icon;
@extend .button-secondary; stroke: var(--icon-foreground);
padding: $s-8 $s-24;
height: $s-32;
border-radius: $br-8;
margin-right: $s-2;
padding: $s-8;
width: $s-32;
margin-left: $s-8;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
.item-button-icon {
width: $s-28;
height: $s-28;
svg {
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
}
}
.section-list-shared {
max-height: $s-272;
}
.section-title {
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
margin-bottom: $s-12;
}
.libraries-search {
margin: $s-12 0;
.search-icon {
@include flexCenter;
padding: 0 0 0 $s-8;
width: $s-20;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
}
}
}
.section-list-empty {
@include bodyLargeTypography;
@include flexCenter;
color: var(--empty-message-foreground-color);
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
width: $s-16;
height: $s-16;
}
}
}
.libraries-updates-see-all {
direction: rtl;
grid-column: span 3;
margin-top: $s-8;
margin-right: $s-8;
& input {
@extend .link;
margin: 0;
}
}
} }
.updates-content { }
grid-template-columns: 1fr;
.section-list-shared {
max-height: $s-272;
}
.section-title {
@include bodyLargeTypography;
color: var(--modal-title-foreground-color);
margin-bottom: $s-12;
}
.libraries-search {
margin: $s-12 0;
}
.search-icon {
@include flexCenter;
padding: 0 0 0 $s-8;
width: $s-20;
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
} }
} }
.section-list-empty {
@include bodyLargeTypography;
@include flexCenter;
color: var(--empty-message-foreground-color);
svg {
@extend .button-icon-small;
stroke: var(--icon-foreground);
width: $s-16;
height: $s-16;
}
}
.libraries-updates-see-all {
direction: rtl;
grid-column: span 3;
margin-top: $s-8;
margin-right: $s-8;
& input {
@extend .link;
margin: 0;
}
}
.updates-content {
grid-template-columns: 1fr;
}
.libraries-updates { .libraries-updates {
display: grid; display: grid;
grid-column: span 3; grid-column: span 3;
@ -182,43 +176,43 @@
grid-gap: $s-24; grid-gap: $s-24;
font-size: $fs-12; font-size: $fs-12;
margin-top: $s-16; margin-top: $s-16;
}
.libraries-updates-item { .libraries-updates-item {
display: flex; display: flex;
align-items: center; align-items: center;
color: var(--library-content-foreground-color); color: var(--library-content-foreground-color);
&:not(:first-child) { &:not(:first-child) {
margin-top: $s-8; 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});
} }
}
& svg { & .item-name {
background-color: var(--color-canvas); display: block;
border-radius: $br-4; margin: 0;
border: $s-2 solid transparent; text-overflow: ellipsis;
height: $s-24; overflow: hidden;
width: $s-24; white-space: nowrap;
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;
}
} }
} }
@ -264,55 +258,58 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: $s-24; gap: $s-24;
}
.info-block { .info-block {
display: grid; display: grid;
grid-template-columns: auto 1fr; grid-template-columns: auto 1fr;
column-gap: $s-20; column-gap: $s-20;
grid-template: grid-template:
"icon title" "icon title"
"icon content"; "icon content";
} }
.info-icon { .info-icon {
grid-area: icon; grid-area: icon;
width: $s-52; width: $s-52;
height: $s-52; height: $s-52;
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;
svg { svg {
width: $s-32; width: $s-32;
height: $s-32; height: $s-32;
fill: $da-primary; fill: $da-primary;
}
}
.info-block-title {
grid-area: title;
font-size: $fs-16;
color: $df-primary;
}
.info-block-content {
grid-area: content;
font-size: $fs-14;
color: $df-secondary;
line-height: 1.2;
} }
} }
.info-block-title {
grid-area: title;
font-size: $fs-16;
color: $df-primary;
}
.info-block-content {
grid-area: content;
font-size: $fs-14;
color: $df-secondary;
line-height: 1.2;
}
.info-bottom { .info-bottom {
margin-top: $s-24; margin-top: $s-24;
margin-right: $s-8; margin-right: $s-8;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.primary-button { }
@extend .button-primary;
@include uppercaseTitleTipography; .primary-button {
padding: $s-0 $s-16; @extend .button-primary;
} @include uppercaseTitleTipography;
padding: $s-0 $s-16;
} }