Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-04 13:50:12 -05:00
Code Issues Activity

✨ Add test AB renaming "Libraries" to "Add library"

Browse source
This commit is contained in:
Pablo Alba 2024-12-03 15:40:27 +01:00
parent 08516ac7ca
commit 664cacbe9d
4 changed files with 71 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
frontend/src/app/main/ui/workspace/sidebar/assets.cljs
View file

@ -8,6 +8,7 @@
(:require-macros [app.main.style :as stl])
(:require
[app.common.data.macros :as dm]
[app.config :as cf]
[app.main.data.modal :as modal]
[app.main.data.workspace :as dw]
[app.main.data.workspace.assets :as dwa]
@ -86,6 +87,10 @@
section (:section filters)
ordering (:ordering filters)
reverse-sort? (= :desc ordering)
num-libs (count (mf/deref refs/workspace-libraries))
show-templates-02-test?
(and (cf/external-feature-flag "templates-02" "test") (zero? num-libs))
toggle-ordering
(mf/use-fn
@ -155,38 +160,44 @@
[:article {:class (stl/css :assets-bar)}
[:div {:class (stl/css :assets-header)}
(when-not ^boolean read-only?
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog
:data-testid "libraries"}
[:span {:class (stl/css :libraries-icon)}
i/library]
(tr "workspace.assets.libraries")])
(if show-templates-02-test?
[:button {:class (stl/css :add-library-button)
:on-click show-libraries-dialog
:data-testid "libraries"}
(tr "workspace.assets.add-library")]
[:button {:class (stl/css :libraries-button)
:on-click show-libraries-dialog
:data-testid "libraries"}
[:span {:class (stl/css :libraries-icon)}
i/library]
(tr "workspace.assets.libraries")]))
[:div {:class (stl/css :search-wrapper)}
[:& search-bar {:on-change on-search-term-change
:value term
:placeholder (tr "workspace.assets.search")}
[:button
{:on-click on-open-menu
:title (tr "workspace.assets.filter")
:class (stl/css-case :section-button true
:opened menu-open?)}
i/filter-icon]]
[:> context-menu*
{:on-close on-menu-close
:selectable true
:selected section
:show menu-open?
:fixed true
:min-width true
:width size
:top 158
:left 18
:options options}]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.sort")
:on-click toggle-ordering
:icon (if reverse-sort? "asc-sort" "desc-sort")}]]]
(when-not show-templates-02-test?
[:div {:class (stl/css :search-wrapper)}
[:& search-bar {:on-change on-search-term-change
:value term
:placeholder (tr "workspace.assets.search")}
[:button
{:on-click on-open-menu
:title (tr "workspace.assets.filter")
:class (stl/css-case :section-button true
:opened menu-open?)}
i/filter-icon]]
[:> context-menu*
{:on-close on-menu-close
:selectable true
:selected section
:show menu-open?
:fixed true
:min-width true
:width size
:top 158
:left 18
:options options}]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.assets.sort")
:on-click toggle-ordering
:icon (if reverse-sort? "asc-sort" "desc-sort")}]])]
[:& (mf/provider cmm/assets-filters) {:value filters}
[:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}

23
frontend/src/app/main/ui/workspace/sidebar/assets.scss
View file

@ -25,34 +25,50 @@
width: 100%;
margin-bottom: $s-4;
border-radius: $s-8;
.libraries-icon {
@include flexCenter;
width: $s-24;
height: 100%;
svg {
@include flexCenter;
@extend .button-icon;
stroke: var(--icon-foreground);
}
}
&:hover {
background-color: var(--button-secondary-background-color-hover);
color: var(--button-secondary-foreground-color-hover);
border: $s-1 solid var(--button-secondary-border-color-hover);
svg {
stroke: var(--button-secondary-foreground-color-hover);
}
}
&:focus {
background-color: var(--button-secondary-background-color-focus);
color: var(--button-secondary-foreground-color-focus);
border: $s-1 solid var(--button-secondary-border-color-focus);
svg {
stroke: var(--button-secondary-foreground-color-focus);
}
}
}
.add-library-button {
@extend .button-primary;
text-transform: uppercase;
gap: $s-2;
height: $s-32;
width: 100%;
margin-bottom: $s-4;
border-radius: $s-8;
}
.section-button {
@include flexCenter;
@include buttonStyle;
@ -62,32 +78,39 @@
border: $s-1 solid var(--input-border-color-rest);
border-radius: $br-8 $br-2 $br-2 $br-8;
background-color: var(--input-background-color-rest);
svg {
height: $s-16;
width: $s-16;
stroke: var(--icon-foreground);
}
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-focus);
}
}
&:hover {
border: $s-1 solid var(--input-border-color-hover);
background-color: var(--input-background-color-hover);
svg {
background-color: var(--input-background-color-hover);
stroke: var(--button-foreground-hover);
}
&:focus {
border: $s-1 solid var(--input-border-color-focus);
outline: 0;
background-color: var(--input-background-color-focus);
color: var(--input-foreground-color-focus);
svg {
background-color: var(--input-background-color-focus);
}

3
frontend/translations/en.po
View file

@ -4064,6 +4064,9 @@ msgstr "Group name"
msgid "workspace.assets.libraries"
msgstr "Libraries"
msgid "workspace.assets.add-library"
msgstr "Add library"
#: src/app/main/ui/workspace/sidebar/assets/components.cljs:523
msgid "workspace.assets.list-view"
msgstr "List view"

3
frontend/translations/es.po
View file

@ -4064,6 +4064,9 @@ msgstr "Nombre del grupo"
msgid "workspace.assets.libraries"
msgstr "Bibliotecas"
msgid "workspace.assets.add-library"
msgstr "Añadir biblioteca"
#: src/app/main/ui/workspace/sidebar/assets/components.cljs:523
msgid "workspace.assets.list-view"
msgstr "Ver como lista"