mirror of
https://github.com/penpot/penpot.git
synced 2025-02-12 18:18:24 -05:00
✨ Improved styles for plugins dialog
This commit is contained in:
alonso.torres
Andrey Antukh
parent
032e551dc1
commit
a2df74be38
7 changed files with 67 additions and 34 deletions
1
frontend/resources/images/icons/external-link.svg
Normal file
1
frontend/resources/images/icons/external-link.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="42" xmlns="http://www.w3.org/2000/svg" height="42" stroke-width="3.5"><path d="M35 23.333v14A4.666 4.666 0 0 1 30.333 42H4.667A4.666 4.666 0 0 1 0 37.333V11.667A4.666 4.666 0 0 1 4.667 7h14"/><path d="M28 0h14v14"/><path d="M16.333 25.667 42 0"/></svg>
|
||||
|
After Width: | Height: | Size: 265 B |
1
frontend/resources/images/icons/rocket.svg
Normal file
1
frontend/resources/images/icons/rocket.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="m10.165 3.902.117 8.274c.018 1.266-1.134 2.005-2.182 2.02-1.102.015-2.218-.59-2.238-1.957l-.116-8.275L7.9.031s1.823 2.992 2.265 3.871Z"/><circle cx="8" cy="5.604" r=".753"/><path d="M6.109 8.064c-3.276 2.163-3.18 4.351-3.18 7.936l3.121-3.934"/><path d="M9.891 8.064c3.276 2.163 3.18 4.351 3.18 7.936L9.95 12.066"/></svg>
|
||||
|
After Width: | Height: | Size: 393 B |
|
|
@ -144,6 +144,7 @@
|
|||
(def ^:icon img (icon-xref :img))
|
||||
(def ^:icon interaction (icon-xref :interaction))
|
||||
(def ^:icon join-nodes (icon-xref :join-nodes))
|
||||
(def ^:icon external-link (icon-xref :external-link))
|
||||
(def ^:icon justify-content-column-around (icon-xref :justify-content-column-around))
|
||||
(def ^:icon justify-content-column-between (icon-xref :justify-content-column-between))
|
||||
(def ^:icon justify-content-column-center (icon-xref :justify-content-column-center))
|
||||
|
|
@ -160,13 +161,13 @@
|
|||
(def ^:icon library (icon-xref :library))
|
||||
(def ^:icon locate (icon-xref :locate))
|
||||
(def ^:icon lock (icon-xref :lock))
|
||||
(def ^:icon margin (icon-xref :margin))
|
||||
(def ^:icon margin-bottom (icon-xref :margin-bottom))
|
||||
(def ^:icon margin-left (icon-xref :margin-left))
|
||||
(def ^:icon margin-left-right (icon-xref :margin-left-right))
|
||||
(def ^:icon margin-right (icon-xref :margin-right))
|
||||
(def ^:icon margin-top-bottom (icon-xref :margin-top-bottom))
|
||||
(def ^:icon margin-top (icon-xref :margin-top))
|
||||
(def ^:icon margin (icon-xref :margin))
|
||||
(def ^:icon margin-top-bottom (icon-xref :margin-top-bottom))
|
||||
(def ^:icon mask (icon-xref :mask))
|
||||
(def ^:icon masked (icon-xref :masked))
|
||||
(def ^:icon menu (icon-xref :menu))
|
||||
|
|
@ -179,11 +180,11 @@
|
|||
(def ^:icon open-link (icon-xref :open-link))
|
||||
(def ^:icon padding-bottom (icon-xref :padding-bottom))
|
||||
(def ^:icon padding-extended (icon-xref :padding-extended))
|
||||
(def ^:icon padding-left-right (icon-xref :padding-left-right))
|
||||
(def ^:icon padding-left (icon-xref :padding-left))
|
||||
(def ^:icon padding-left-right (icon-xref :padding-left-right))
|
||||
(def ^:icon padding-right (icon-xref :padding-right))
|
||||
(def ^:icon padding-top-bottom (icon-xref :padding-top-bottom))
|
||||
(def ^:icon padding-top (icon-xref :padding-top))
|
||||
(def ^:icon padding-top-bottom (icon-xref :padding-top-bottom))
|
||||
(def ^:icon path (icon-xref :path))
|
||||
(def ^:icon pentool (icon-xref :pentool))
|
||||
(def ^:icon picker (icon-xref :picker))
|
||||
|
|
@ -192,11 +193,12 @@
|
|||
(def ^:icon rectangle (icon-xref :rectangle))
|
||||
(def ^:icon reload (icon-xref :reload))
|
||||
(def ^:icon remove-icon (icon-xref :remove))
|
||||
(def ^:icon rgba-complementary (icon-xref :rgba-complementary))
|
||||
(def ^:icon rgba (icon-xref :rgba))
|
||||
(def ^:icon rgba-complementary (icon-xref :rgba-complementary))
|
||||
(def ^:icon rocket (icon-xref :rocket))
|
||||
(def ^:icon rotation (icon-xref :rotation))
|
||||
(def ^:icon row-reverse (icon-xref :row-reverse))
|
||||
(def ^:icon row (icon-xref :row))
|
||||
(def ^:icon row-reverse (icon-xref :row-reverse))
|
||||
(def ^:icon search (icon-xref :search))
|
||||
(def ^:icon separate-nodes (icon-xref :separate-nodes))
|
||||
(def ^:icon shown (icon-xref :shown))
|
||||
|
|
@ -218,6 +220,7 @@
|
|||
(def ^:icon svg (icon-xref :svg))
|
||||
(def ^:icon swatches (icon-xref :swatches))
|
||||
(def ^:icon switch (icon-xref :switch))
|
||||
(def ^:icon text (icon-xref :text))
|
||||
(def ^:icon text-align-center (icon-xref :text-align-center))
|
||||
(def ^:icon text-align-left (icon-xref :text-align-left))
|
||||
(def ^:icon text-align-right (icon-xref :text-align-right))
|
||||
|
|
@ -239,7 +242,6 @@
|
|||
(def ^:icon text-top (icon-xref :text-top))
|
||||
(def ^:icon text-underlined (icon-xref :text-underlined))
|
||||
(def ^:icon text-uppercase (icon-xref :text-uppercase))
|
||||
(def ^:icon text (icon-xref :text))
|
||||
(def ^:icon thumbnail (icon-xref :thumbnail))
|
||||
(def ^:icon tick (icon-xref :tick))
|
||||
(def ^:icon to-corner (icon-xref :to-corner))
|
||||
|
|
@ -258,7 +260,6 @@
|
|||
(def ^:icon view-as-list (icon-xref :view-as-list))
|
||||
(def ^:icon wrap (icon-xref :wrap))
|
||||
|
||||
|
||||
(def ^:icon loader-pencil
|
||||
(mf/html
|
||||
[:svg
|
||||
|
|
|
|||
|
|
@ -185,13 +185,16 @@
|
|||
|
||||
[:hr]
|
||||
|
||||
[:& title-bar {:collapsable false
|
||||
:title (tr "workspace.plugins.installed-plugins")}]
|
||||
|
||||
(if (empty? plugins-state)
|
||||
[:div {:class (stl/css :plugins-empty)}
|
||||
[:div {:class (stl/css :plugins-empty-logo)} i/logo-icon]
|
||||
[:div {:class (stl/css :plugins-empty-text)} (tr "workspace.plugins.empty-plugins")]]
|
||||
[:div {:class (stl/css :plugins-empty-logo)} i/rocket]
|
||||
[:div {:class (stl/css :plugins-empty-text)} (tr "workspace.plugins.empty-plugins")]
|
||||
[:a {:class (stl/css :plugins-link) :href "#"}
|
||||
(tr "workspace.plugins.plugin-list-link") i/external-link]]
|
||||
|
||||
[:*
|
||||
[:& title-bar {:collapsable false
|
||||
:title (tr "workspace.plugins.installed-plugins")}]
|
||||
|
||||
[:div {:class (stl/css :plugins-list)}
|
||||
|
||||
|
|
@ -200,4 +203,4 @@
|
|||
:index idx
|
||||
:manifest manifest
|
||||
:on-open-plugin handle-open-plugin
|
||||
:on-remove-plugin handle-remove-plugin}])])]]]))
|
||||
:on-remove-plugin handle-remove-plugin}])]])]]]))
|
||||
|
|
|
|||
|
|
@ -18,6 +18,10 @@
|
|||
max-height: $s-472;
|
||||
width: $s-472;
|
||||
max-width: $s-472;
|
||||
|
||||
hr {
|
||||
border-color: $db-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
|
|
@ -31,7 +35,7 @@
|
|||
|
||||
.modal-title {
|
||||
@include headlineMediumTypography;
|
||||
margin-block-end: $s-16;
|
||||
margin-block-end: $s-32;
|
||||
color: var(--modal-title-foreground-color);
|
||||
}
|
||||
|
||||
|
|
@ -88,7 +92,7 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
gap: $s-12;
|
||||
}
|
||||
|
||||
.plugins-list-element {
|
||||
|
|
@ -115,45 +119,47 @@
|
|||
|
||||
.plugin-title {
|
||||
@include bodyMediumTypography;
|
||||
color: #ffffff;
|
||||
color: $df-primary;
|
||||
}
|
||||
|
||||
.plugin-summary {
|
||||
@include bodySmallTypography;
|
||||
color: #8f9da3;
|
||||
color: $df-secondary;
|
||||
}
|
||||
|
||||
.plugins-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
margin-top: 3rem;
|
||||
gap: $s-20;
|
||||
margin-top: $s-16;
|
||||
}
|
||||
|
||||
.plugins-empty-logo {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
width: $s-44;
|
||||
height: $s-44;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: #212426;
|
||||
background: $db-tertiary;
|
||||
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #8f9da3;
|
||||
width: $s-16;
|
||||
height: $s-16;
|
||||
fill: none;
|
||||
stroke: $df-secondary;
|
||||
stroke-width: 0.8px;
|
||||
}
|
||||
}
|
||||
|
||||
.plugins-empty-text {
|
||||
@include bodySmallTypography;
|
||||
color: white;
|
||||
color: $df-primary;
|
||||
}
|
||||
|
||||
div.input-error {
|
||||
border: 1px solid var(--input-border-color-error);
|
||||
border: $s-1 solid var(--input-border-color-error);
|
||||
}
|
||||
|
||||
.info {
|
||||
|
|
@ -168,3 +174,19 @@ div.input-error {
|
|||
color: var(--input-border-color-success);
|
||||
}
|
||||
}
|
||||
|
||||
.plugins-link {
|
||||
color: $da-primary;
|
||||
font-size: $fs-12;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: $s-4;
|
||||
|
||||
svg {
|
||||
margin-top: calc(-1 * var($s-2));
|
||||
width: $s-12;
|
||||
height: $s-12;
|
||||
stroke: $da-primary;
|
||||
fill: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5205,3 +5205,6 @@ msgstr "Plugins"
|
|||
|
||||
msgid "workspace.plugins.menu.plugins-manager"
|
||||
msgstr "Plugins manager"
|
||||
|
||||
msgid "workspace.plugins.plugin-list-link"
|
||||
msgstr "Plugins List"
|
||||
|
|
|
|||
|
|
@ -5332,3 +5332,5 @@ msgstr "Extensiones"
|
|||
msgid "workspace.plugins.menu.plugins-manager"
|
||||
msgstr "Gestor de extensiones"
|
||||
|
||||
msgid "workspace.plugins.plugin-list-link"
|
||||
msgstr "Lista de extensiones"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue