diff --git a/frontend/resources/images/icons/external-link.svg b/frontend/resources/images/icons/external-link.svg
new file mode 100644
index 0000000000..cb66edb02e
--- /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 0000000000..4bc138edd8
--- /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 002ef71a85..3191194248 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 38a65abeac..5eb634502a 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 9fa07107cb..1d2cb29de0 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 58ea94696f..b5a1c5357a 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 5fc709ae2d..3285d91d9f 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"