From a2df74be389e07995ade9a8fc6582ec3d1de2a0c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 28 May 2024 12:06:47 +0200 Subject: [PATCH] :sparkles: Improved styles for plugins dialog --- .../resources/images/icons/external-link.svg | 1 + frontend/resources/images/icons/rocket.svg | 1 + frontend/src/app/main/ui/icons.cljs | 17 ++++--- .../src/app/main/ui/workspace/plugins.cljs | 27 +++++----- .../src/app/main/ui/workspace/plugins.scss | 50 +++++++++++++------ frontend/translations/en.po | 3 ++ frontend/translations/es.po | 2 + 7 files changed, 67 insertions(+), 34 deletions(-) create mode 100644 frontend/resources/images/icons/external-link.svg create mode 100644 frontend/resources/images/icons/rocket.svg diff --git a/frontend/resources/images/icons/external-link.svg b/frontend/resources/images/icons/external-link.svg new file mode 100644 index 000000000..cb66edb02 --- /dev/null +++ b/frontend/resources/images/icons/external-link.svg @@ -0,0 +1 @@ + diff --git a/frontend/resources/images/icons/rocket.svg b/frontend/resources/images/icons/rocket.svg new file mode 100644 index 000000000..4bc138edd --- /dev/null +++ b/frontend/resources/images/icons/rocket.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/app/main/ui/icons.cljs b/frontend/src/app/main/ui/icons.cljs index 002ef71a8..319119424 100644 --- a/frontend/src/app/main/ui/icons.cljs +++ b/frontend/src/app/main/ui/icons.cljs @@ -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 diff --git a/frontend/src/app/main/ui/workspace/plugins.cljs b/frontend/src/app/main/ui/workspace/plugins.cljs index 38a65abea..5eb634502 100644 --- a/frontend/src/app/main/ui/workspace/plugins.cljs +++ b/frontend/src/app/main/ui/workspace/plugins.cljs @@ -185,19 +185,22 @@ [: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]] - [:div {:class (stl/css :plugins-list)} + [:* + [:& title-bar {:collapsable false + :title (tr "workspace.plugins.installed-plugins")}] - (for [[idx manifest] (d/enumerate plugins-state)] - [:& plugin-entry {:key (dm/str "plugin-" idx) - :index idx - :manifest manifest - :on-open-plugin handle-open-plugin - :on-remove-plugin handle-remove-plugin}])])]]])) + [:div {:class (stl/css :plugins-list)} + + (for [[idx manifest] (d/enumerate plugins-state)] + [:& plugin-entry {:key (dm/str "plugin-" idx) + :index idx + :manifest manifest + :on-open-plugin handle-open-plugin + :on-remove-plugin handle-remove-plugin}])]])]]])) diff --git a/frontend/src/app/main/ui/workspace/plugins.scss b/frontend/src/app/main/ui/workspace/plugins.scss index 9fa07107c..1d2cb29de 100644 --- a/frontend/src/app/main/ui/workspace/plugins.scss +++ b/frontend/src/app/main/ui/workspace/plugins.scss @@ -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; + } +} diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 58ea94696..b5a1c5357 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -5205,3 +5205,6 @@ msgstr "Plugins" msgid "workspace.plugins.menu.plugins-manager" msgstr "Plugins manager" + +msgid "workspace.plugins.plugin-list-link" +msgstr "Plugins List" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 5fc709ae2..3285d91d9 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"