mirror of
https://github.com/penpot/penpot.git
synced 2025-04-05 11:31:35 -05:00
Alejandro
GitHub
commit
7436918edb
16 changed files with 435 additions and 509 deletions
|
|
@ -32,6 +32,12 @@
|
|||
background: var(--text-editor-selection-background-color);
|
||||
color: var(--text-editor-selection-foreground-color);
|
||||
}
|
||||
|
||||
::placeholder,
|
||||
::-webkit-input-placeholder {
|
||||
@include bodySmallTypography;
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
}
|
||||
|
||||
// BUTTONS
|
||||
|
|
@ -39,7 +45,7 @@
|
|||
@include buttonStyle;
|
||||
@include flexCenter;
|
||||
@include focusPrimary;
|
||||
@include uppercaseTitleTipography;
|
||||
@include headlineSmallTypography;
|
||||
background-color: var(--button-primary-background-color-rest);
|
||||
border: $s-1 solid var(--button-primary-border-color-rest);
|
||||
color: var(--button-primary-foreground-color-rest);
|
||||
|
|
@ -303,7 +309,7 @@
|
|||
}
|
||||
|
||||
.input-label {
|
||||
@include uppercaseTitleTipography;
|
||||
@include headlineSmallTypography;
|
||||
@include flexCenter;
|
||||
width: $s-20;
|
||||
padding-left: $s-8;
|
||||
|
|
@ -401,6 +407,7 @@
|
|||
background-color: var(--input-background-color);
|
||||
}
|
||||
::placeholder {
|
||||
@include bodySmallTypography;
|
||||
color: var(--input-placeholder-color);
|
||||
}
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -116,11 +116,11 @@
|
|||
}
|
||||
|
||||
@mixin textEllipsis {
|
||||
display: block;
|
||||
max-width: 99%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@mixin twoLineTextEllipsis {
|
||||
|
|
|
|||
|
|
@ -68,90 +68,6 @@ $height-palette-max: 80px;
|
|||
}
|
||||
}
|
||||
|
||||
.workspace-context-menu {
|
||||
background-color: $color-white;
|
||||
border-radius: $br3;
|
||||
box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
|
||||
left: 740px;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: 240px;
|
||||
z-index: 12;
|
||||
|
||||
li {
|
||||
align-items: center;
|
||||
font-size: $fs14;
|
||||
padding: $size-1 $size-4;
|
||||
cursor: pointer;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&.separator {
|
||||
border-top: 1px solid $color-gray-10;
|
||||
padding: 0px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
span {
|
||||
color: $color-gray-60;
|
||||
}
|
||||
|
||||
span.shortcut {
|
||||
color: $color-gray-20;
|
||||
font-size: $fs12;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
.submenu-icon {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon-menu-item {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-primary-lighter;
|
||||
}
|
||||
|
||||
span.title {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.selected-icon {
|
||||
svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.shape-icon {
|
||||
margin-left: 3px;
|
||||
svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.workspace-content {
|
||||
background-color: $color-canvas;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
width: 100%;
|
||||
.tab-container-tab-title {
|
||||
@include flexCenter;
|
||||
@include uppercaseTitleTipography;
|
||||
@include headlineSmallTypography;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 $s-8;
|
||||
|
|
|
|||
|
|
@ -19,10 +19,11 @@
|
|||
.title,
|
||||
.title-only,
|
||||
.inspect-title {
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
@include headlineSmallTypography;
|
||||
display: grid;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-start;
|
||||
grid-auto-flow: column;
|
||||
height: 100%;
|
||||
min-height: $s-32;
|
||||
color: var(--title-foreground-color);
|
||||
|
|
@ -30,7 +31,8 @@
|
|||
}
|
||||
|
||||
.title-only {
|
||||
margin-left: $s-8;
|
||||
--title-bar-title-margin: #{$s-8};
|
||||
margin-inline-start: var(--title-bar-title-margin);
|
||||
}
|
||||
|
||||
.inspect-title {
|
||||
|
|
@ -66,23 +68,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.title,
|
||||
.title-only {
|
||||
@include uppercaseTitleTipography;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
height: 100%;
|
||||
min-height: $s-32;
|
||||
color: var(--title-foreground-color);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.title-only {
|
||||
--title-bar-title-margin: #{$s-8};
|
||||
margin-inline-start: var(--title-bar-title-margin);
|
||||
}
|
||||
|
||||
.title-only-icon-gap {
|
||||
--title-bar-title-margin: #{$s-12};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ $thumbnail-default-height: $s-168; // Default width
|
|||
|
||||
.grid-row {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: calc($s-12 + var(--th-width, #{$thumbnail-default-width}));
|
||||
width: 100%;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -652,11 +652,10 @@
|
|||
|
||||
[:& dropdown {:show (boolean mdata)
|
||||
:on-close #(st/emit! dw/hide-context-menu)}
|
||||
[:ul
|
||||
{:class (stl/css :workspace-context-menu)
|
||||
:ref dropdown-ref
|
||||
:style {:top top :left left}
|
||||
:on-context-menu prevent-default}
|
||||
[:ul {:class (stl/css :workspace-context-menu)
|
||||
:ref dropdown-ref
|
||||
:style {:top top :left left}
|
||||
:on-context-menu prevent-default}
|
||||
|
||||
(case (:kind mdata)
|
||||
:shape [:& shape-context-menu {:mdata mdata}]
|
||||
|
|
|
|||
|
|
@ -20,6 +20,8 @@
|
|||
border: $s-2 solid var(--panel-border-color);
|
||||
background-color: var(--menu-background-color);
|
||||
z-index: $z-index-4;
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.separator {
|
||||
|
|
|
|||
|
|
@ -34,6 +34,18 @@
|
|||
[okulary.core :as l]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(def ^:private 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
|
||||
(l/derived :workspace-file st/state))
|
||||
|
||||
|
|
@ -185,36 +197,35 @@
|
|||
:on-cancel on-delete-cancel
|
||||
:count-libraries 1}))))]
|
||||
|
||||
[:*
|
||||
[:div {:class (stl/css :section)}
|
||||
[:div {:class (stl/css :libraries-content)}
|
||||
[:div {:class (stl/css :lib-section)}
|
||||
[:& title-bar {:collapsable false
|
||||
:title (tr "workspace.libraries.in-this-file")
|
||||
:class (stl/css :title-spacing-lib)}]
|
||||
[:div {:class (stl/css :section-list)}
|
||||
|
||||
[: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")]
|
||||
[:ul {:class (stl/css :item-contents)}
|
||||
[:& describe-library-blocks {:components-count (count components)
|
||||
:graphics-count (count media)
|
||||
:colors-count (count colors)
|
||||
:typography-count (count typographies)}]]]
|
||||
[:div
|
||||
(if ^boolean shared?
|
||||
[:input {:class (stl/css :item-unpublish)
|
||||
:type "button"
|
||||
:value (tr "common.unpublish")
|
||||
:on-click unpublish}]
|
||||
[:input {:class (stl/css :item-publish)
|
||||
:type "button"
|
||||
:value (tr "common.publish")
|
||||
:on-click publish}])]]
|
||||
(if ^boolean shared?
|
||||
[:input {:class (stl/css :item-unpublish)
|
||||
:type "button"
|
||||
:value (tr "common.unpublish")
|
||||
:on-click unpublish}]
|
||||
[:input {:class (stl/css :item-publish)
|
||||
:type "button"
|
||||
:value (tr "common.publish")
|
||||
:on-click publish}])]
|
||||
|
||||
(for [{:keys [id name] :as library} linked-libraries]
|
||||
[:div {:class (stl/css :section-list-item)
|
||||
:key (dm/str id)}
|
||||
[:div
|
||||
[:div {:class (stl/css :item-content)}
|
||||
[:div {:class (stl/css :item-name)} name]
|
||||
[:ul {:class (stl/css :item-contents)}
|
||||
(let [components-count (count (or (ctkl/components-seq (:data library)) []))
|
||||
|
|
@ -230,24 +241,23 @@
|
|||
:type "button"
|
||||
:data-library-id (dm/str id)
|
||||
:on-click unlink-library}
|
||||
i/detach]])]]
|
||||
detach-icon]])]]
|
||||
|
||||
[:div {:class (stl/css :section)}
|
||||
[:div {:class (stl/css :shared-section)}
|
||||
[:& title-bar {:collapsable false
|
||||
:title (tr "workspace.libraries.shared-libraries")
|
||||
:class (stl/css :title-spacing-lib)}]
|
||||
[:div {:class (stl/css :libraries-search)}
|
||||
[:& search-bar {:on-change change-search-term
|
||||
:value search-term
|
||||
:placeholder (tr "workspace.libraries.search-shared-libraries")
|
||||
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
|
||||
[:& search-bar {:on-change change-search-term
|
||||
:value search-term
|
||||
:placeholder (tr "workspace.libraries.search-shared-libraries")
|
||||
:icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]
|
||||
|
||||
(if (seq shared-libraries)
|
||||
[:div {:class (stl/css :section-list-shared)}
|
||||
(for [{:keys [id name] :as library} shared-libraries]
|
||||
[:div {:class (stl/css :section-list-item)
|
||||
:key (dm/str id)}
|
||||
[:div
|
||||
[:div {:class (stl/css :item-content)}
|
||||
[:div {:class (stl/css :item-name)} name]
|
||||
[:ul {:class (stl/css :item-contents)}
|
||||
(let [components-count (dm/get-in library [:library-summary :components :count] 0)
|
||||
|
|
@ -261,7 +271,7 @@
|
|||
[:button {:class (stl/css :item-button-shared)
|
||||
:data-library-id (dm/str id)
|
||||
:on-click link-library}
|
||||
i/add]])]
|
||||
add-icon]])]
|
||||
|
||||
(when (empty? shared-libraries)
|
||||
[:div {:class (stl/css :section-list-empty)}
|
||||
|
|
@ -270,7 +280,10 @@
|
|||
(tr "workspace.libraries.loading")
|
||||
|
||||
(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
|
||||
(tr "workspace.libraries.no-matches-for" search-term))]))]]))
|
||||
|
|
@ -348,107 +361,110 @@
|
|||
(dwl/set-updating-library true)
|
||||
(dwl/sync-file file-id library-id))))))]
|
||||
|
||||
[:div {:class (stl/css :section)}
|
||||
(if (empty? libs-assets)
|
||||
[: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 :updates-content)}
|
||||
[:div {:class (stl/css :update-section)}
|
||||
(if (empty? libs-assets)
|
||||
[:div {:class (stl/css :section-list-empty)}
|
||||
[:span {:class (stl/css :empty-state-icon)}
|
||||
library-icon]
|
||||
(tr "workspace.libraries.no-libraries-need-sync")]
|
||||
[:*
|
||||
[:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
|
||||
|
||||
[:div {:class (stl/css :section-list)}
|
||||
(for [[{:keys [id name] :as library}
|
||||
exceeded
|
||||
{:keys [components colors typographies]}] libs-assets]
|
||||
[:div {:class (stl/css :section-list-item)
|
||||
:key (dm/str id)}
|
||||
[:div
|
||||
[:div {:class (stl/css :item-name)} name]
|
||||
[:ul {:class (stl/css :item-contents)} (describe-library
|
||||
(count components)
|
||||
0
|
||||
(count colors)
|
||||
(count typographies))]]
|
||||
[:button {:type "button"
|
||||
:class (stl/css :item-update)
|
||||
:disabled updating?
|
||||
:data-library-id (dm/str id)
|
||||
:on-click update}
|
||||
(tr "workspace.libraries.update")]
|
||||
[:div {:class (stl/css :section-list)}
|
||||
(for [[{:keys [id name] :as library}
|
||||
exceeded
|
||||
{:keys [components colors typographies]}] libs-assets]
|
||||
[:div {:class (stl/css :section-list-item)
|
||||
:key (dm/str id)}
|
||||
[:div {:class (stl/css :item-content)}
|
||||
[:div {:class (stl/css :item-name)} name]
|
||||
[:ul {:class (stl/css :item-contents)} (describe-library
|
||||
(count components)
|
||||
0
|
||||
(count colors)
|
||||
(count typographies))]]
|
||||
[:button {:type "button"
|
||||
:class (stl/css :item-update)
|
||||
:disabled updating?
|
||||
:data-library-id (dm/str id)
|
||||
:on-click update}
|
||||
(tr "workspace.libraries.update")]
|
||||
|
||||
[:div {:class (stl/css :libraries-updates)}
|
||||
(when-not (empty? components)
|
||||
[:div {:class (stl/css :libraries-updates-column)}
|
||||
(for [component components]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id component))}
|
||||
(let [component (ctf/load-component-objects (:data library) component)
|
||||
root-shape (ctf/get-component-root (:data library) component)]
|
||||
[:*
|
||||
[:& component-svg {:root-shape root-shape
|
||||
:objects (:objects component)}]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name component)}
|
||||
(:name component)]]])])
|
||||
(when (:components exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block.ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])
|
||||
[:div {:class (stl/css :libraries-updates)}
|
||||
(when-not (empty? components)
|
||||
[:div {:class (stl/css :libraries-updates-column)}
|
||||
(for [component components]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id component))}
|
||||
(let [component (ctf/load-component-objects (:data library) component)
|
||||
root-shape (ctf/get-component-root (:data library) component)]
|
||||
[:*
|
||||
[:& component-svg {:root-shape root-shape
|
||||
:class (stl/css :component-svg)
|
||||
:objects (:objects component)}]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name component)}
|
||||
(:name component)]]])])
|
||||
(when (:components exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block :ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])
|
||||
|
||||
(when-not (empty? colors)
|
||||
[:div {:class (stl/css :libraries-updates-column)
|
||||
:style #js {"--bullet-size" "24px"}}
|
||||
(for [color colors]
|
||||
(let [default-name (cond
|
||||
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:color color) (:color color)
|
||||
:else (:value color))]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id color))}
|
||||
[:*
|
||||
[:& cb/color-bullet {:color {:color (:color color)
|
||||
:id (:id color)
|
||||
:opacity (:opacity color)}}]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name color)}
|
||||
(:name color)]
|
||||
(when-not (= (:name color) default-name)
|
||||
[:span.color-value (:color color)])]]]))
|
||||
(when (:colors exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block.ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])
|
||||
(when-not (empty? colors)
|
||||
[:div {:class (stl/css :libraries-updates-column)
|
||||
:style #js {"--bullet-size" "24px"}}
|
||||
(for [color colors]
|
||||
(let [default-name (cond
|
||||
(:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
|
||||
(:color color) (:color color)
|
||||
:else (:value color))]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id color))}
|
||||
[:*
|
||||
[:& cb/color-bullet {:color {:color (:color color)
|
||||
:id (:id color)
|
||||
:opacity (:opacity color)}}]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name color)}
|
||||
(:name color)]
|
||||
(when-not (= (:name color) default-name)
|
||||
[:span.color-value (:color color)])]]]))
|
||||
(when (:colors exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block.ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])
|
||||
|
||||
(when-not (empty? typographies)
|
||||
[:div {:class (stl/css :libraries-updates-column)}
|
||||
(for [typography typographies]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id typography))}
|
||||
[:*
|
||||
[:div {:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(tr "workspace.assets.typography.sample")]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name typography)}
|
||||
(:name typography)]]]])
|
||||
(when (:typographies exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block.ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])]
|
||||
(when-not (empty? typographies)
|
||||
[:div {:class (stl/css :libraries-updates-column)}
|
||||
(for [typography typographies]
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (dm/str (:id typography))}
|
||||
[:*
|
||||
[:div {:style {:font-family (:font-family typography)
|
||||
:font-weight (:font-weight typography)
|
||||
:font-style (:font-style typography)}}
|
||||
(tr "workspace.assets.typography.sample")]
|
||||
[:div {:class (stl/css :name-block)}
|
||||
[:span {:class (stl/css :item-name)
|
||||
:title (:name typography)}
|
||||
(:name typography)]]]])
|
||||
(when (:typographies exceeded)
|
||||
[:div {:class (stl/css :libraries-updates-item)
|
||||
:key (uuid/next)}
|
||||
[:div {:class (stl/css :name-block.ellipsis)}
|
||||
[:span {:class (stl/css :item-name)} "(...)"]]])])]
|
||||
|
||||
(when (or (pos? (:components exceeded))
|
||||
(pos? (:colors exceeded))
|
||||
(pos? (:typographies exceeded)))
|
||||
[:div {:class (stl/css :libraries-updates-see-all)}
|
||||
(when (or (pos? (:components exceeded))
|
||||
(pos? (:colors exceeded))
|
||||
(pos? (:typographies exceeded)))
|
||||
[:& lb/link-button {:on-click see-all-assets
|
||||
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))
|
||||
|
||||
:class (stl/css :libraries-updates-see-all)
|
||||
:value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}])])]])]]))
|
||||
(mf/defc libraries-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :libraries-dialog}
|
||||
|
|
@ -491,28 +507,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)}
|
||||
[:& 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}]]]
|
||||
[:& 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}]]]]]]]]))
|
||||
(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")}
|
||||
[:& libraries-tab {:file-id file-id
|
||||
:shared? shared?
|
||||
:linked-libraries libraries
|
||||
:shared-libraries shared-libraries}]]
|
||||
[:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
|
||||
[:& updates-tab {:file-id file-id
|
||||
:file-data file-data
|
||||
:libraries libraries}]]]]]))
|
||||
|
||||
(mf/defc v2-info-dialog
|
||||
{::mf/register modal/components
|
||||
|
|
@ -526,7 +538,8 @@
|
|||
|
||||
[:div {:class (stl/css :modal-overlay)}
|
||||
[: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 :info-content)}
|
||||
[:div {:class (stl/css :info-block)}
|
||||
|
|
|
|||
|
|
@ -6,248 +6,239 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
// Library modal
|
||||
.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;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
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 {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
max-width: $s-712;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-bottom: $s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
.close-btn {
|
||||
@extend .modal-close-btn-base;
|
||||
}
|
||||
|
||||
.close-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-block-end: $s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
// Tabs content
|
||||
.libraries-content,
|
||||
.updates-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: $s-32;
|
||||
max-height: $s-400;
|
||||
padding-block-start: $s-16;
|
||||
}
|
||||
|
||||
.lib-section,
|
||||
.update-section,
|
||||
.shared-section {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.shared-section {
|
||||
grid-template-rows: auto auto 1fr;
|
||||
}
|
||||
|
||||
.title-spacing-lib {
|
||||
margin: 0 0 0 calc(-1 * $s-8);
|
||||
}
|
||||
|
||||
.section-list,
|
||||
.section-list-shared {
|
||||
display: grid;
|
||||
grid-auto-rows: min-content;
|
||||
gap: $s-8;
|
||||
max-height: $s-320;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.section-list-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: $s-8;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.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;
|
||||
margin: 0;
|
||||
border-radius: $br-8;
|
||||
}
|
||||
|
||||
.item-unpublish {
|
||||
@extend .button-secondary;
|
||||
}
|
||||
|
||||
.item-button,
|
||||
.item-button-shared {
|
||||
@extend .button-secondary;
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
margin-inline-start: $s-2;
|
||||
margin-inline-end: $s-8;
|
||||
padding: $s-8;
|
||||
}
|
||||
|
||||
.detach-icon,
|
||||
.add-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
|
||||
.section-list-shared {
|
||||
max-height: $s-272;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@include headlineSmallTypography;
|
||||
margin-block-end: $s-12;
|
||||
color: var(--title-foreground-color);
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
@include flexCenter;
|
||||
width: $s-20;
|
||||
padding: 0 0 0 $s-8;
|
||||
svg {
|
||||
@extend .button-icon-small;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
height: 100%;
|
||||
.libraries-header {
|
||||
height: 100%;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
// empty state
|
||||
.section-list-empty {
|
||||
@include bodyMediumTypography;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
justify-items: center;
|
||||
gap: $s-8;
|
||||
text-align: center;
|
||||
height: fit-content;
|
||||
margin-block: $s-16;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
.empty-state-icon {
|
||||
@include flexCenter;
|
||||
width: $s-48;
|
||||
height: $s-48;
|
||||
border-radius: $br-circle;
|
||||
background-color: var(--pill-background-color);
|
||||
}
|
||||
|
||||
.item-button-icon {
|
||||
width: $s-28;
|
||||
height: $s-28;
|
||||
svg {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.section-list-shared {
|
||||
max-height: $s-272;
|
||||
}
|
||||
.library-icon {
|
||||
@extend .button-icon;
|
||||
stroke: var(--icon-foreground);
|
||||
height: $s-32;
|
||||
width: $s-32;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
@include bodyLargeTypography;
|
||||
color: var(--modal-title-foreground-color);
|
||||
margin-bottom: $s-12;
|
||||
}
|
||||
// Update library tab
|
||||
.libraries-updates-see-all {
|
||||
@extend .link;
|
||||
direction: rtl;
|
||||
grid-column: span 3;
|
||||
margin-block-start: $s-8;
|
||||
margin-inline-start: $s-8;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.updates-content {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.libraries-updates {
|
||||
display: grid;
|
||||
grid-column: span 3;
|
||||
grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
|
||||
grid-gap: $s-24;
|
||||
font-size: $fs-12;
|
||||
margin-top: $s-16;
|
||||
|
||||
.libraries-updates-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
}
|
||||
}
|
||||
gap: $s-24;
|
||||
margin-block-start: $s-16;
|
||||
}
|
||||
|
||||
.modal-v2-info {
|
||||
width: $s-664;
|
||||
height: fit-content;
|
||||
.modal-title {
|
||||
font-size: $fs-18;
|
||||
}
|
||||
.libraries-updates-item {
|
||||
@include bodyLargeTypography;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: start;
|
||||
gap: $s-8;
|
||||
color: var(--library-content-foreground-color);
|
||||
}
|
||||
|
||||
.component-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(--library-content-foreground-color);
|
||||
width: $s-168;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
padding-inline-start: calc($s-24 + #{$s-8});
|
||||
}
|
||||
|
||||
.item-name {
|
||||
@include textEllipsis;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.item-update {
|
||||
@extend .button-primary;
|
||||
@include uppercaseTitleTipography;
|
||||
@include headlineSmallTypography;
|
||||
height: $s-32;
|
||||
min-width: $s-92;
|
||||
padding: $s-8 $s-24;
|
||||
margin-inline-end: $s-2;
|
||||
border-radius: $br-8;
|
||||
margin-right: $s-2;
|
||||
&:disabled {
|
||||
@extend .button-disabled;
|
||||
}
|
||||
}
|
||||
|
||||
.item-contents {
|
||||
@include bodyLargeTypography;
|
||||
@include bodyMediumTypography;
|
||||
color: var(--library-content-foreground-color);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.element-count {
|
||||
|
|
@ -259,60 +250,72 @@
|
|||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(4, 1fr);
|
||||
margin-top: $s-32;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: $s-24;
|
||||
}
|
||||
|
||||
.info-block {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: $s-20;
|
||||
grid-template:
|
||||
"icon title"
|
||||
"icon content";
|
||||
}
|
||||
.info-block {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
column-gap: $s-20;
|
||||
grid-template:
|
||||
"icon title"
|
||||
"icon content";
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
grid-area: icon;
|
||||
width: $s-52;
|
||||
height: $s-52;
|
||||
margin-top: $s-8;
|
||||
border-radius: $br-circle;
|
||||
background: $db-quaternary;
|
||||
.info-icon {
|
||||
grid-area: icon;
|
||||
width: $s-52;
|
||||
height: $s-52;
|
||||
margin-top: $s-8;
|
||||
border-radius: $br-circle;
|
||||
background: $db-quaternary;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
svg {
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
fill: var(--icon-foreground-active);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
width: $s-32;
|
||||
height: $s-32;
|
||||
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 {
|
||||
@include bodyLargeTypography;
|
||||
grid-area: title;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
.info-block-content {
|
||||
@include bodyMediumTypography;
|
||||
grid-area: content;
|
||||
color: var(--library-content-foreground-color);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
margin-block-start: $s-24;
|
||||
margin-inline-end: $s-8;
|
||||
}
|
||||
|
||||
.primary-button {
|
||||
@extend .button-primary;
|
||||
@include headlineSmallTypography;
|
||||
padding: $s-0 $s-16;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
|
||||
.path {
|
||||
@include textEllipsis;
|
||||
max-width: 90%;
|
||||
margin-left: $s-2;
|
||||
text-transform: initial;
|
||||
color: var(--title-foreground-color-hover);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
shared-libs (mf/deref refs/workspace-libraries)]
|
||||
[:& dropdown {:show show-menu?
|
||||
:on-close close-menu}
|
||||
[:ul {:class (stl/css :workspace-context-menu)}
|
||||
[:ul {:class (stl/css :text-context-menu)}
|
||||
(for [[idx cur-library] (map-indexed vector (vals shared-libs))]
|
||||
(let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
|
||||
[:li
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
@import "refactor/common-refactor.scss";
|
||||
|
||||
.workspace-context-menu {
|
||||
.text-context-menu {
|
||||
position: absolute;
|
||||
left: auto;
|
||||
bottom: var(--height);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
[:div {:class (stl/css :viewport-actions-container)}
|
||||
[:div {:class (stl/css :viewport-actions-title)}
|
||||
[:& i18n/tr-html {:tag-name "span"
|
||||
:label "workspace.top-bar.read-only"}]]
|
||||
:label "workspace.top-bar.view-only"}]]
|
||||
[:button {:class (stl/css :done-btn)
|
||||
:on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]))
|
||||
|
||||
|
|
|
|||
|
|
@ -5063,8 +5063,8 @@ msgid "workspace.viewport.click-to-close-path"
|
|||
msgstr "Click to close the path"
|
||||
|
||||
#, markdown
|
||||
msgid "workspace.top-bar.read-only"
|
||||
msgstr "**Inspect mode** (View Only)"
|
||||
msgid "workspace.top-bar.view-only"
|
||||
msgstr "**Inspecting mode** (View Only)"
|
||||
|
||||
msgid "workspace.top-bar.read-only.done"
|
||||
msgstr "Done"
|
||||
|
|
|
|||
|
|
@ -3633,7 +3633,7 @@ msgstr "%s componentes"
|
|||
|
||||
#: src/app/main/ui/workspace/libraries.cljs
|
||||
msgid "workspace.libraries.file-library"
|
||||
msgstr "Biblioteca de este archivo"
|
||||
msgstr "Biblioteca del archivo"
|
||||
|
||||
#: src/app/main/ui/workspace/libraries.cljs
|
||||
msgid "workspace.libraries.graphics"
|
||||
|
|
@ -5148,7 +5148,7 @@ msgid "workspace.viewport.click-to-close-path"
|
|||
msgstr "Pulsar para cerrar la ruta"
|
||||
|
||||
#, markdown
|
||||
msgid "workspace.top-bar.read-only"
|
||||
msgid "workspace.top-bar.view-only"
|
||||
msgstr "**Modo inspección** (View only)"
|
||||
|
||||
msgid "workspace.top-bar.read-only.done"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue