mirror of
https://github.com/penpot/penpot.git
synced 2025-01-21 22:22:43 -05:00
Merge pull request #5418 from penpot/palba-abtest-add-sugested-libraries
✨ Add test AB for adding a few "Suggested" libraries
This commit is contained in:
commit
fe8d9cf159
4 changed files with 170 additions and 16 deletions
|
@ -15,7 +15,9 @@
|
||||||
[app.common.types.typographies-list :as ctyl]
|
[app.common.types.typographies-list :as ctyl]
|
||||||
[app.common.uuid :as uuid]
|
[app.common.uuid :as uuid]
|
||||||
[app.config :as cf]
|
[app.config :as cf]
|
||||||
|
[app.main.data.dashboard :as dd]
|
||||||
[app.main.data.modal :as modal]
|
[app.main.data.modal :as modal]
|
||||||
|
[app.main.data.notifications :as ntf]
|
||||||
[app.main.data.users :as du]
|
[app.main.data.users :as du]
|
||||||
[app.main.data.workspace.colors :as mdc]
|
[app.main.data.workspace.colors :as mdc]
|
||||||
[app.main.data.workspace.libraries :as dwl]
|
[app.main.data.workspace.libraries :as dwl]
|
||||||
|
@ -33,6 +35,7 @@
|
||||||
[app.util.dom :as dom]
|
[app.util.dom :as dom]
|
||||||
[app.util.i18n :as i18n :refer [tr]]
|
[app.util.i18n :as i18n :refer [tr]]
|
||||||
[app.util.strings :refer [matches-search]]
|
[app.util.strings :refer [matches-search]]
|
||||||
|
[beicon.v2.core :as rx]
|
||||||
[cuerdas.core :as str]
|
[cuerdas.core :as str]
|
||||||
[okulary.core :as l]
|
[okulary.core :as l]
|
||||||
[rumext.v2 :as mf]))
|
[rumext.v2 :as mf]))
|
||||||
|
@ -84,8 +87,10 @@
|
||||||
(conj (tr "workspace.libraries.typography" typography-count))))
|
(conj (tr "workspace.libraries.typography" typography-count))))
|
||||||
"\u00A0")))
|
"\u00A0")))
|
||||||
|
|
||||||
(mf/defc describe-library-blocks
|
(mf/defc describe-library-blocks*
|
||||||
[{:keys [components-count graphics-count colors-count typography-count] :as props}]
|
{::mf/props :obj
|
||||||
|
::mf/private true}
|
||||||
|
[{:keys [components-count graphics-count colors-count typography-count]}]
|
||||||
[:*
|
[:*
|
||||||
(when (pos? components-count)
|
(when (pos? components-count)
|
||||||
[:li {:class (stl/css :element-count)}
|
[:li {:class (stl/css :element-count)}
|
||||||
|
@ -104,9 +109,49 @@
|
||||||
(tr "workspace.libraries.typography" typography-count)])])
|
(tr "workspace.libraries.typography" typography-count)])])
|
||||||
|
|
||||||
|
|
||||||
|
(mf/defc sample-library-entry*
|
||||||
|
{::mf/props :obj
|
||||||
|
::mf/private true}
|
||||||
|
[{:keys [library project-id team-id importing]}]
|
||||||
|
(let [id (:id library)
|
||||||
|
importing? (deref importing)
|
||||||
|
|
||||||
|
on-error
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [_]
|
||||||
|
(reset! importing nil)
|
||||||
|
(rx/of (ntf/error (tr "dashboard.libraries-and-templates.import-error")))))
|
||||||
|
|
||||||
|
on-success
|
||||||
|
(mf/use-fn
|
||||||
|
(mf/deps team-id)
|
||||||
|
(fn [_]
|
||||||
|
(st/emit! (dwl/fetch-shared-files {:team-id team-id}))))
|
||||||
|
|
||||||
|
import-library
|
||||||
|
(mf/use-fn
|
||||||
|
(fn [_]
|
||||||
|
(reset! importing id)
|
||||||
|
(st/emit! (dd/clone-template
|
||||||
|
(with-meta {:project-id project-id
|
||||||
|
:template-id id}
|
||||||
|
{:on-success on-success
|
||||||
|
:on-error on-error})))))]
|
||||||
|
|
||||||
|
[:div {:class (stl/css :sample-library-item)
|
||||||
|
:key (dm/str id)}
|
||||||
|
[:div {:class (stl/css :sample-library-item-name)} (:name library)]
|
||||||
|
[:input {:class (stl/css-case :sample-library-button true
|
||||||
|
:sample-library-add (nil? importing?)
|
||||||
|
:sample-library-adding (some? importing?))
|
||||||
|
:type "button"
|
||||||
|
:value (if (= importing? id) (tr "labels.adding") (tr "labels.add"))
|
||||||
|
:on-click import-library}]]))
|
||||||
|
|
||||||
|
|
||||||
(mf/defc libraries-tab
|
(mf/defc libraries-tab
|
||||||
{::mf/wrap-props false}
|
{::mf/wrap-props false}
|
||||||
[{:keys [file-id shared? linked-libraries shared-libraries]}]
|
[{:keys [file-id shared? linked-libraries shared-libraries team-id]}]
|
||||||
(let [search-term* (mf/use-state "")
|
(let [search-term* (mf/use-state "")
|
||||||
search-term (deref search-term*)
|
search-term (deref search-term*)
|
||||||
library-ref (mf/with-memo [file-id]
|
library-ref (mf/with-memo [file-id]
|
||||||
|
@ -138,6 +183,12 @@
|
||||||
(->> (vals linked-libraries)
|
(->> (vals linked-libraries)
|
||||||
(sort-by (comp str/lower :name))))
|
(sort-by (comp str/lower :name))))
|
||||||
|
|
||||||
|
importing* (mf/use-state nil)
|
||||||
|
project-id (mf/deref refs/current-project-id)
|
||||||
|
sample-libraries [{:id "penpot-design-system", :name "Design system example"}
|
||||||
|
{:id "wireframing-kit", :name "Wireframe library"}
|
||||||
|
{:id "whiteboarding-kit", :name "Whiteboarding Kit"}]
|
||||||
|
|
||||||
change-search-term
|
change-search-term
|
||||||
(mf/use-fn
|
(mf/use-fn
|
||||||
(fn [event]
|
(fn [event]
|
||||||
|
@ -215,10 +266,10 @@
|
||||||
[:div {:class (stl/css :item-content)}
|
[:div {:class (stl/css :item-content)}
|
||||||
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
|
[:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
|
||||||
[:ul {:class (stl/css :item-contents)}
|
[:ul {:class (stl/css :item-contents)}
|
||||||
[:& describe-library-blocks {:components-count (count components)
|
[:> describe-library-blocks* {:components-count (count components)
|
||||||
:graphics-count (count media)
|
:graphics-count (count media)
|
||||||
:colors-count (count colors)
|
:colors-count (count colors)
|
||||||
:typography-count (count typographies)}]]]
|
:typography-count (count typographies)}]]]
|
||||||
(if ^boolean shared?
|
(if ^boolean shared?
|
||||||
[:input {:class (stl/css :item-unpublish)
|
[:input {:class (stl/css :item-unpublish)
|
||||||
:type "button"
|
:type "button"
|
||||||
|
@ -240,10 +291,10 @@
|
||||||
graphics-count (count (dm/get-in library [:data :media] []))
|
graphics-count (count (dm/get-in library [:data :media] []))
|
||||||
colors-count (count (dm/get-in library [:data :colors] []))
|
colors-count (count (dm/get-in library [:data :colors] []))
|
||||||
typography-count (count (dm/get-in library [:data :typographies] []))]
|
typography-count (count (dm/get-in library [:data :typographies] []))]
|
||||||
[:& describe-library-blocks {:components-count components-count
|
[:> describe-library-blocks* {:components-count components-count
|
||||||
:graphics-count graphics-count
|
:graphics-count graphics-count
|
||||||
:colors-count colors-count
|
:colors-count colors-count
|
||||||
:typography-count typography-count}])]]
|
:typography-count typography-count}])]]
|
||||||
|
|
||||||
[:button {:class (stl/css :item-button)
|
[:button {:class (stl/css :item-button)
|
||||||
:type "button"
|
:type "button"
|
||||||
|
@ -274,10 +325,10 @@
|
||||||
graphics-count (dm/get-in library [:library-summary :media :count] 0)
|
graphics-count (dm/get-in library [:library-summary :media :count] 0)
|
||||||
colors-count (dm/get-in library [:library-summary :colors :count] 0)
|
colors-count (dm/get-in library [:library-summary :colors :count] 0)
|
||||||
typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
|
typography-count (dm/get-in library [:library-summary :typographies :count] 0)]
|
||||||
[:& describe-library-blocks {:components-count components-count
|
[:> describe-library-blocks* {:components-count components-count
|
||||||
:graphics-count graphics-count
|
:graphics-count graphics-count
|
||||||
:colors-count colors-count
|
:colors-count colors-count
|
||||||
:typography-count typography-count}])]]
|
:typography-count typography-count}])]]
|
||||||
[:button {:class (stl/css :item-button-shared)
|
[:button {:class (stl/css :item-button-shared)
|
||||||
:data-library-id (dm/str id)
|
:data-library-id (dm/str id)
|
||||||
:title (tr "workspace.libraries.shared-library-btn")
|
:title (tr "workspace.libraries.shared-library-btn")
|
||||||
|
@ -290,6 +341,23 @@
|
||||||
(nil? shared-libraries)
|
(nil? shared-libraries)
|
||||||
(tr "workspace.libraries.loading")
|
(tr "workspace.libraries.loading")
|
||||||
|
|
||||||
|
(and (str/empty? search-term) (cf/external-feature-flag "templates-03" "test"))
|
||||||
|
[:*
|
||||||
|
[:div {:class (stl/css :sample-libraries-info)}
|
||||||
|
(tr "workspace.libraries.empty.no-libraries")
|
||||||
|
[:a {:target "_blank"
|
||||||
|
:class (stl/css :sample-libraries-link)
|
||||||
|
:href "https://penpot.app/libraries-templates"}
|
||||||
|
(tr "workspace.libraries.empty.some-templates")]]
|
||||||
|
[:div {:class (stl/css :sample-libraries-container)}
|
||||||
|
(tr "workspace.libraries.empty.add-some")
|
||||||
|
(for [library sample-libraries]
|
||||||
|
[:> sample-library-entry*
|
||||||
|
{:library library
|
||||||
|
:project-id project-id
|
||||||
|
:team-id team-id
|
||||||
|
:importing importing*}])]]
|
||||||
|
|
||||||
(str/empty? search-term)
|
(str/empty? search-term)
|
||||||
[:*
|
[:*
|
||||||
[:span {:class (stl/css :empty-state-icon)}
|
[:span {:class (stl/css :empty-state-icon)}
|
||||||
|
@ -519,7 +587,8 @@
|
||||||
:content (mf/html [:& libraries-tab {:file-id file-id
|
:content (mf/html [:& libraries-tab {:file-id file-id
|
||||||
:shared? shared?
|
:shared? shared?
|
||||||
:linked-libraries libraries
|
:linked-libraries libraries
|
||||||
:shared-libraries shared-libraries}])}
|
:shared-libraries shared-libraries
|
||||||
|
:team-id team-id}])}
|
||||||
|
|
||||||
#js {:label (tr "workspace.libraries.updates")
|
#js {:label (tr "workspace.libraries.updates")
|
||||||
:id "updates"
|
:id "updates"
|
||||||
|
|
|
@ -126,6 +126,7 @@
|
||||||
@include flexCenter;
|
@include flexCenter;
|
||||||
width: $s-20;
|
width: $s-20;
|
||||||
padding: 0 0 0 $s-8;
|
padding: 0 0 0 $s-8;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
@extend .button-icon-small;
|
@extend .button-icon-small;
|
||||||
stroke: var(--icon-foreground);
|
stroke: var(--icon-foreground);
|
||||||
|
@ -231,6 +232,7 @@
|
||||||
padding: $s-8 $s-24;
|
padding: $s-8 $s-24;
|
||||||
margin-inline-end: $s-2;
|
margin-inline-end: $s-2;
|
||||||
border-radius: $br-8;
|
border-radius: $br-8;
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@extend .button-disabled;
|
@extend .button-disabled;
|
||||||
}
|
}
|
||||||
|
@ -333,3 +335,62 @@
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
font-weight: $fw400;
|
font-weight: $fw400;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sample-libraries-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: $fs-12;
|
||||||
|
margin: $s-32;
|
||||||
|
color: var(--color-foreground-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-libraries-link {
|
||||||
|
color: var(--color-accent-primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
font-weight: $fw400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-libraries-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-size: $fs-12;
|
||||||
|
width: 100%;
|
||||||
|
align-items: start;
|
||||||
|
color: var(--color-foreground-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-library-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
margin-top: $s-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-library-item-name {
|
||||||
|
font-size: $fs-14;
|
||||||
|
color: var(--color-foreground-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
max-width: $s-232;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-library-add {
|
||||||
|
@extend .button-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-library-adding {
|
||||||
|
@extend .button-disabled;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sample-library-button {
|
||||||
|
@include uppercaseTitleTipography;
|
||||||
|
height: $s-32;
|
||||||
|
width: $s-80;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: $br-8;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
|
@ -1565,6 +1565,9 @@ msgstr "Active"
|
||||||
msgid "labels.add"
|
msgid "labels.add"
|
||||||
msgstr "Add"
|
msgstr "Add"
|
||||||
|
|
||||||
|
msgid "labels.adding"
|
||||||
|
msgstr "Adding..."
|
||||||
|
|
||||||
#: src/app/main/ui/dashboard/fonts.cljs:176
|
#: src/app/main/ui/dashboard/fonts.cljs:176
|
||||||
msgid "labels.add-custom-font"
|
msgid "labels.add-custom-font"
|
||||||
msgstr "Add custom font"
|
msgstr "Add custom font"
|
||||||
|
@ -4595,6 +4598,15 @@ msgstr "see all changes"
|
||||||
msgid "workspace.libraries.updates"
|
msgid "workspace.libraries.updates"
|
||||||
msgstr "UPDATES"
|
msgstr "UPDATES"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.no-libraries"
|
||||||
|
msgstr "There are no Shared Libraries at you team, you can look for"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.some-templates"
|
||||||
|
msgstr "some templates in here"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.add-some"
|
||||||
|
msgstr "Or add some of these to try:"
|
||||||
|
|
||||||
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
|
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
|
||||||
msgid "workspace.options.add-interaction"
|
msgid "workspace.options.add-interaction"
|
||||||
msgstr "Click the + button to add interactions."
|
msgstr "Click the + button to add interactions."
|
||||||
|
|
|
@ -1571,6 +1571,9 @@ msgstr "Activo"
|
||||||
msgid "labels.add"
|
msgid "labels.add"
|
||||||
msgstr "Añadir"
|
msgstr "Añadir"
|
||||||
|
|
||||||
|
msgid "labels.adding"
|
||||||
|
msgstr "Añadiendo..."
|
||||||
|
|
||||||
#: src/app/main/ui/dashboard/fonts.cljs:176
|
#: src/app/main/ui/dashboard/fonts.cljs:176
|
||||||
msgid "labels.add-custom-font"
|
msgid "labels.add-custom-font"
|
||||||
msgstr "Añadir fuente personalizada"
|
msgstr "Añadir fuente personalizada"
|
||||||
|
@ -4595,6 +4598,15 @@ msgstr "ver todos los cambios"
|
||||||
msgid "workspace.libraries.updates"
|
msgid "workspace.libraries.updates"
|
||||||
msgstr "ACTUALIZACIONES"
|
msgstr "ACTUALIZACIONES"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.no-libraries"
|
||||||
|
msgstr "No hay Biblioteacas Compartidas en tu equipo, puedes buscar"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.some-templates"
|
||||||
|
msgstr "algunas plantillas aquí"
|
||||||
|
|
||||||
|
msgid "workspace.libraries.empty.add-some"
|
||||||
|
msgstr "O añadir algunas de éstas para probar:"
|
||||||
|
|
||||||
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
|
#: src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs:745
|
||||||
msgid "workspace.options.add-interaction"
|
msgid "workspace.options.add-interaction"
|
||||||
msgstr "Pulsa el botón + para añadir interacciones."
|
msgstr "Pulsa el botón + para añadir interacciones."
|
||||||
|
|
Loading…
Add table
Reference in a new issue