mirror of
https://github.com/penpot/penpot.git
synced 2025-01-09 08:20:45 -05:00
♻️ Refactor libraries css
This commit is contained in:
Eva Marco
parent
e2412b3d43
commit
b41b3de46d
2 changed files with 347 additions and 351 deletions
|
|
@ -34,6 +34,9 @@
|
|||
[okulary.core :as l]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private close-icon
|
||||
(i/icon-xref :close (stl/css :close-icon)))
|
||||
|
||||
(def ref:workspace-file
|
||||
(l/derived :workspace-file st/state))
|
||||
|
||||
|
|
@ -185,7 +188,7 @@
|
|||
:on-cancel on-delete-cancel
|
||||
:count-libraries 1}))))]
|
||||
|
||||
[:*
|
||||
[:div {:class (stl/css :libraries-content)}
|
||||
[:div {:class (stl/css :section)}
|
||||
[:& title-bar {:collapsable false
|
||||
:title (tr "workspace.libraries.in-this-file")
|
||||
|
|
@ -200,7 +203,6 @@
|
|||
:graphics-count (count media)
|
||||
:colors-count (count colors)
|
||||
:typography-count (count typographies)}]]]
|
||||
[:div
|
||||
(if ^boolean shared?
|
||||
[:input {:class (stl/css :item-unpublish)
|
||||
:type "button"
|
||||
|
|
@ -209,7 +211,7 @@
|
|||
[:input {:class (stl/css :item-publish)
|
||||
:type "button"
|
||||
:value (tr "common.publish")
|
||||
:on-click publish}])]]
|
||||
:on-click publish}])]
|
||||
|
||||
(for [{:keys [id name] :as library} linked-libraries]
|
||||
[:div {:class (stl/css :section-list-item)
|
||||
|
|
@ -348,6 +350,7 @@
|
|||
(dwl/set-updating-library true)
|
||||
(dwl/sync-file file-id library-id))))))]
|
||||
|
||||
[:div {:class (stl/css :updates-content)}
|
||||
[:div {:class (stl/css :section)}
|
||||
(if (empty? libs-assets)
|
||||
[:div {:class (stl/css :section-list-empty)}
|
||||
|
|
@ -447,7 +450,7 @@
|
|||
(pos? (:typographies exceeded)))
|
||||
[:div {:class (stl/css :libraries-updates-see-all)}
|
||||
[:& 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/register modal/components
|
||||
|
|
@ -491,28 +494,24 @@
|
|||
|
||||
[:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside}
|
||||
[:div {:class (stl/css :modal-dialog)}
|
||||
[:button {:class (stl/css :close)
|
||||
[:button {:class (stl/css :close-btn)
|
||||
:on-click close-dialog}
|
||||
i/close]
|
||||
close-icon]
|
||||
[:div {:class (stl/css :modal-title)}
|
||||
"Libraries"]
|
||||
[:div {:class (stl/css :modal-content)}
|
||||
[:div {:class (stl/css :libraries-header)}
|
||||
(tr "workspace.libraries.libraries")]
|
||||
[:& tab-container
|
||||
{:on-change-tab on-tab-change
|
||||
:selected selected-tab
|
||||
:collapsable false}
|
||||
[:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
|
||||
[:div {:class (stl/css :libraries-content)}
|
||||
[:& libraries-tab {:file-id file-id
|
||||
:shared? shared?
|
||||
:linked-libraries libraries
|
||||
:shared-libraries shared-libraries}]]]
|
||||
:shared-libraries shared-libraries}]]
|
||||
[:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
|
||||
[:div {:class (stl/css :updates-content)}
|
||||
[:& updates-tab {:file-id file-id
|
||||
:file-data file-data
|
||||
:libraries libraries}]]]]]]]]))
|
||||
:libraries libraries}]]]]]))
|
||||
|
||||
(mf/defc v2-info-dialog
|
||||
{::mf/register modal/components
|
||||
|
|
|
|||
|
|
@ -6,51 +6,35 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// Library
|
||||
.modal-overlay {
|
||||
@include flexCenter;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: $z-index-modal;
|
||||
background-color: var(--overlay-color);
|
||||
@extend .modal-overlay-base;
|
||||
}
|
||||
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
@extend .modal-container-base;
|
||||
height: $s-520;
|
||||
max-height: 100%;
|
||||
max-height: $s-520;
|
||||
width: $s-712;
|
||||
padding: $s-32;
|
||||
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 {
|
||||
max-width: $s-712;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-bottom: $s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
.libraries-header {
|
||||
height: 100%;
|
||||
}
|
||||
// Tabs content
|
||||
.libraries-content,
|
||||
.updates-content {
|
||||
display: grid;
|
||||
|
|
@ -59,19 +43,26 @@
|
|||
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;
|
||||
|
|
@ -80,10 +71,13 @@
|
|||
&:last-child {
|
||||
margin-bottom: $s-8;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@include bodyLargeTypography;
|
||||
color: var(--library-name-foreground-color);
|
||||
}
|
||||
|
||||
.item-publish,
|
||||
.item-unpublish {
|
||||
@extend .button-primary;
|
||||
|
|
@ -97,6 +91,7 @@
|
|||
.item-unpublish {
|
||||
@extend .button-secondary;
|
||||
}
|
||||
|
||||
.item-button,
|
||||
.item-button-shared {
|
||||
@extend .button-secondary;
|
||||
|
|
@ -121,8 +116,7 @@
|
|||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-list-shared {
|
||||
max-height: $s-272;
|
||||
}
|
||||
|
|
@ -135,6 +129,8 @@
|
|||
|
||||
.libraries-search {
|
||||
margin: $s-12 0;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@include flexCenter;
|
||||
padding: 0 0 0 $s-8;
|
||||
|
|
@ -144,7 +140,7 @@
|
|||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-list-empty {
|
||||
@include bodyLargeTypography;
|
||||
@include flexCenter;
|
||||
|
|
@ -157,7 +153,6 @@
|
|||
height: $s-16;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.libraries-updates-see-all {
|
||||
direction: rtl;
|
||||
|
|
@ -169,11 +164,10 @@
|
|||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.libraries-updates {
|
||||
display: grid;
|
||||
|
|
@ -182,6 +176,7 @@
|
|||
grid-gap: $s-24;
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-16;
|
||||
}
|
||||
|
||||
.libraries-updates-item {
|
||||
display: flex;
|
||||
|
|
@ -220,7 +215,6 @@
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-v2-info {
|
||||
width: $s-664;
|
||||
|
|
@ -264,6 +258,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
display: grid;
|
||||
|
|
@ -292,27 +287,29 @@
|
|||
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-bottom {
|
||||
margin-top: $s-24;
|
||||
margin-right: $s-8;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
padding: $s-0 $s-16;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue