From 60a20b6984a44957e793d65b0a84d09bfe14e23f Mon Sep 17 00:00:00 2001 From: elhombretecla Date: Tue, 11 Mar 2025 15:19:31 +0100 Subject: [PATCH] :sparkles: Add new toggle and translations --- .../src/app/main/ui/dashboard/templates.cljs | 22 ++++++--- .../src/app/main/ui/dashboard/templates.scss | 22 ++++++--- frontend/translations/en.po | 16 +++++++ frontend/translations/es.po | 45 +++++++++++++++++++ 4 files changed, 93 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/main/ui/dashboard/templates.cljs b/frontend/src/app/main/ui/dashboard/templates.cljs index 7362183eb..8d617506d 100644 --- a/frontend/src/app/main/ui/dashboard/templates.cljs +++ b/frontend/src/app/main/ui/dashboard/templates.cljs @@ -81,16 +81,21 @@ [:span {:class (stl/css :title-text)} (tr "dashboard.libraries-and-templates")] (if ^boolean is-collapsed - [:span {:class (stl/css :title-icon :title-icon-collapsed)} - arrow-icon] - [:span {:class (stl/css :title-icon)} - arrow-icon])]])) + [:span {:class (stl/css :title-icon-container)} + [:span {:class (stl/css :title-icon-text)} (tr "labels.show")] + [:span {:class (stl/css :title-icon :title-icon-collapsed)} + arrow-icon]] + [:span {:class (stl/css :title-icon-container)} + [:span {:class (stl/css :title-icon-text)} (tr "labels.hide")] + [:span {:class (stl/css :title-icon)} + arrow-icon]])]])) (mf/defc card-item {::mf/wrap-props false} [{:keys [item index is-visible collapsed on-import]}] (let [id (dm/str "card-container-" index) thb (assoc cf/public-uri :path (dm/str "/images/thumbnails/template-" (:id item) ".jpg")) + hover? (mf/use-state false) on-click (mf/use-fn @@ -112,6 +117,8 @@ :data-index index :on-click on-click :on-mouse-down dom/prevent-default + :on-mouse-enter #(reset! hover? true) + :on-mouse-leave #(reset! hover? false) :on-key-down on-key-down} [:div {:class (stl/css :template-card)} [:div {:class (stl/css :img-container)} @@ -120,7 +127,10 @@ :loading "lazy" :decoding "async"}]] [:div {:class (stl/css :card-name)} - [:span {:class (stl/css :card-text)} (:name item)] + [:span {:class (stl/css :card-text)} + (if @hover? + (tr "dashboard.template.add-to-project") + (:name item))] download-icon]]])) (mf/defc card-item-link @@ -243,7 +253,7 @@ :is-collapsed collapsed}] [:p {:class (stl/css :content-description)} - "Here you have some Libraries and templates you can add to your project"] + (tr "dashboard.libraries-and-templates.description")] [:div {:class (stl/css :content) :on-scroll on-scroll diff --git a/frontend/src/app/main/ui/dashboard/templates.scss b/frontend/src/app/main/ui/dashboard/templates.scss index c823c8653..d1a995726 100644 --- a/frontend/src/app/main/ui/dashboard/templates.scss +++ b/frontend/src/app/main/ui/dashboard/templates.scss @@ -71,24 +71,33 @@ font-weight: $fw400; } +.title-icon-container { + display: inline-block; + vertical-align: middle; + margin-left: auto; + margin-right: $s-8; + color: var(--color-foreground-primary); +} + .title-icon { display: inline-block; vertical-align: middle; - margin-left: $s-16; + margin-left: auto; margin-right: $s-8; - color: var(--color-foreground-primary); - margin-left: $s-16; - margin-right: $s-16; transform: rotate(90deg); } +.title-icon-text { + margin-right: $s-8; +} + .title-icon-collapsed { transform: rotate(-90deg); } .arrow-icon { @extend .button-icon; - stroke: var(--color-foreground-primary); + stroke: var(--color-foreground-secondary); } .move-button { @@ -129,7 +138,8 @@ .content-description { font-size: $fs-14; color: var(--color-foreground-primary); - margin-bottom: -12px; + margin-bottom: -8px; + margin-top: -4px; margin-left: $s-16; visibility: visible; } diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 51fc9a687..089b29197 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -1713,6 +1713,22 @@ msgstr "Access tokens" msgid "labels.active" msgstr "Active" +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.show" +msgstr "Show" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.hide" +msgstr "Hide" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "dashboard.libraries-and-templates.description" +msgstr "Here you have some Libraries and templates you can add to your project" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "dashboard.template.add-to-project" +msgstr "Add to your project" + #: src/app/main/ui/workspace/libraries.cljs:173 msgid "labels.add" msgstr "Add" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index c2d337615..fa4069833 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -3197,6 +3197,51 @@ msgstr "Estoy echando un vistazo" #: src/app/main/ui/onboarding/questions.cljs:91 msgid "onboarding.questions.reasons.fit" +msgstr "Estoy buscando una herramienta que se ajuste a mis necesidades" + +#: src/app/main/ui/onboarding/questions.cljs:113 +msgid "onboarding.questions.lets-get-started" +msgstr "¡Empecemos!" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.show" +msgstr "Mostrar" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.hide" +msgstr "Ocultar" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "dashboard.libraries-and-templates.description" +msgstr "Aquí tienes algunas Bibliotecas y plantillas que puedes añadir a tu proyecto" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "dashboard.template.add-to-project" +msgstr "Añadir a tu proyecto" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.add" +msgstr "Añadir" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.add-to-your-project" +msgstr "Añadir a tu proyecto" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.show-hide" +msgstr "Mostrar/Ocultar" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.show" +msgstr "Mostrar" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "labels.hide" +msgstr "Ocultar" + +#: src/app/main/ui/dashboard/templates.cljs +msgid "dashboard.libraries-and-templates.description" +msgstr "Aquí tienes algunas Bibliotecas y plantillas que puedes añadir a tu proyecto" msgstr "Averiguar si Penpot es una buena opción para mi equipo" #: src/app/main/ui/onboarding/questions.cljs:97