Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-08 08:09:14 -05:00
Code Issues Activity

✨ Add viewer role to token list

Browse source
This commit is contained in:
Eva Marco 2025-01-16 14:19:34 +01:00
parent 3e2a6d7e0b
commit ec49ff2878
2 changed files with 60 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
View file

@ -112,18 +112,20 @@
(wtch/toggle-token {:token token (wtch/toggle-token {:token token
:shapes selected-shapes :shapes selected-shapes
:token-type-props token-type-props}))))) :token-type-props token-type-props})))))
tokens-count (count tokens)] tokens-count (count tokens)
can-edit? (:can-edit (deref refs/permissions))]
[:div {:on-click on-toggle-open-click} [:div {:on-click on-toggle-open-click}
[:& cmm/asset-section {:icon (token-section-icon type) [:& cmm/asset-section {:icon (token-section-icon type)
:title title :title title
:assets-count tokens-count :assets-count tokens-count
:open? open?} :open? open?}
[:& cmm/asset-section-block {:role :title-button} [:& cmm/asset-section-block {:role :title-button}
[:> icon-button* {:on-click on-popover-open-click (when can-edit?
:variant "ghost" [:> icon-button* {:on-click on-popover-open-click
:icon "add" :variant "ghost"
;; TODO: This needs translation :icon "add"
:aria-label (str "Add token: " title)}]] ;; TODO: This needs translation
:aria-label (str "Add token: " title)}])]
(when open? (when open?
[:& cmm/asset-section-block {:role :content} [:& cmm/asset-section-block {:role :content}
[:div {:class (stl/css :token-pills-wrapper)} [:div {:class (stl/css :token-pills-wrapper)}
@ -137,7 +139,9 @@
on-context-menu (fn [e] (on-context-menu e token))] on-context-menu (fn [e] (on-context-menu e token))]
[:& token-pill [:& token-pill
{:key (:name token) {:key (:name token)
:token-type-props token-type-props
:token token :token token
:selected-shapes selected-shapes
:theme-token theme-token :theme-token theme-token
:half-applied (or (and applied multiple-selection) :half-applied (or (and applied multiple-selection)
(and applied (not full-applied))) (and applied (not full-applied)))
@ -165,6 +169,7 @@
(mf/defc themes-header (mf/defc themes-header
[_props] [_props]
(let [ordered-themes (mf/deref refs/workspace-token-themes-no-hidden) (let [ordered-themes (mf/deref refs/workspace-token-themes-no-hidden)
can-edit? (:can-edit (deref refs/permissions))
open-modal open-modal
(mf/use-fn (mf/use-fn
(fn [e] (fn [e]
@ -176,34 +181,45 @@
[:div {:class (stl/css :empty-theme-wrapper)} [:div {:class (stl/css :empty-theme-wrapper)}
[:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)} [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
(tr "workspace.token.no-themes")] (tr "workspace.token.no-themes")]
[:button {:on-click open-modal (when can-edit?
:class (stl/css :create-theme-button)} [:button {:on-click open-modal
(tr "workspace.token.create-one")]] :class (stl/css :create-theme-button)}
[:div {:class (stl/css :theme-select-wrapper)} (tr "workspace.token.create-one")])]
[:& theme-select] (if can-edit?
[:> button* {:variant "secondary" [:div {:class (stl/css :theme-select-wrapper)}
:class (stl/css :edit-theme-button) [:& theme-select]
:on-click open-modal} [:> button* {:variant "secondary"
(tr "labels.edit")]])])) :class (stl/css :edit-theme-button)
:on-click open-modal}
(tr "labels.edit")]]
[:div {:title (when-not can-edit?
(tr "workspace.token.no-permission-themes"))}
[:& theme-select]]))]))
(mf/defc add-set-button (mf/defc add-set-button
[{:keys [on-open style]}] [{:keys [on-open style]}]
(let [{:keys [on-create new?]} (sets-context/use-context) (let [{:keys [on-create new?]} (sets-context/use-context)
on-click #(do on-click #(do
(on-open) (on-open)
(on-create))] (on-create))
can-edit? (:can-edit (deref refs/permissions))]
(if (= style "inline") (if (= style "inline")
(when-not new? (when-not new?
[:div {:class (stl/css :empty-sets-wrapper)} (if can-edit?
[:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)} [:div {:class (stl/css :empty-sets-wrapper)}
(tr "workspace.token.no-sets-yet")] [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
[:button {:on-click on-click (tr "workspace.token.no-sets-yet")]
:class (stl/css :create-theme-button)} [:button {:on-click on-click
(tr "workspace.token.create-one")]]) :class (stl/css :create-theme-button)}
[:> icon-button* {:variant "ghost" (tr "workspace.token.create-one")]]
:icon "add" [:div {:class (stl/css :empty-sets-wrapper)}
:on-click on-click [:> text* {:as "span" :typography "body-small" :class (stl/css :empty-state-message)}
:aria-label (tr "workspace.token.add set")}]))) (tr "workspace.token.no-sets-yet")]]))
(when can-edit?
[:> icon-button* {:variant "ghost"
:icon "add"
:on-click on-click
:aria-label (tr "workspace.token.add set")}]))))
(mf/defc theme-sets-list (mf/defc theme-sets-list
[{:keys [on-open]}] [{:keys [on-open]}]
@ -219,7 +235,8 @@
(mf/defc themes-sets-tab (mf/defc themes-sets-tab
[{:keys [resize-height]}] [{:keys [resize-height]}]
(let [open? (mf/use-state true) (let [open? (mf/use-state true)
on-open (mf/use-fn #(reset! open? true))] on-open (mf/use-fn #(reset! open? true))
can-edit? (:can-edit (deref refs/permissions))]
[:& sets-context/provider {} [:& sets-context/provider {}
[:& sets-context-menu] [:& sets-context-menu]
[:article {:data-testid "token-themes-sets-sidebar" [:article {:data-testid "token-themes-sets-sidebar"
@ -229,8 +246,9 @@
[:& themes-header] [:& themes-header]
[:div {:class (stl/css :sidebar-header)} [:div {:class (stl/css :sidebar-header)}
[:& title-bar {:title (tr "labels.sets")} [:& title-bar {:title (tr "labels.sets")}
[:& add-set-button {:on-open on-open (when can-edit?
:style "header"}]]] [:& add-set-button {:on-open on-open
:style "header"}])]]
[:& theme-sets-list {:on-open on-open}]]]])) [:& theme-sets-list {:on-open on-open}]]]]))
(mf/defc tokens-tab (mf/defc tokens-tab
@ -270,6 +288,7 @@
[{:keys []}] [{:keys []}]
(let [show-menu* (mf/use-state false) (let [show-menu* (mf/use-state false)
show-menu? (deref show-menu*) show-menu? (deref show-menu*)
can-edit? (:can-edit (deref refs/permissions))
open-menu open-menu
(mf/use-fn (mf/use-fn
@ -311,12 +330,13 @@
(dom/trigger-download "tokens.json"))))] (dom/trigger-download "tokens.json"))))]
[:div {:class (stl/css :import-export-button-wrapper)} [:div {:class (stl/css :import-export-button-wrapper)}
[:input {:type "file" (when can-edit?
:ref input-ref [:input {:type "file"
:style {:display "none"} :ref input-ref
:id "file-input" :style {:display "none"}
:accept ".json" :id "file-input"
:on-change on-import}] :accept ".json"
:on-change on-import}])
[:> button* {:on-click open-menu [:> button* {:on-click open-menu
:icon "import-export" :icon "import-export"
:variant "secondary"} :variant "secondary"}
@ -324,9 +344,10 @@
[:& dropdown-menu {:show show-menu? [:& dropdown-menu {:show show-menu?
:on-close close-menu :on-close close-menu
:list-class (stl/css :import-export-menu)} :list-class (stl/css :import-export-menu)}
[:> dropdown-menu-item* {:class (stl/css :import-export-menu-item) (when can-edit?
:on-click on-option-click} [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
(tr "labels.import")] :on-click on-option-click}
(tr "labels.import")])
[:> dropdown-menu-item* {:class (stl/css :import-export-menu-item) [:> dropdown-menu-item* {:class (stl/css :import-export-menu-item)
:on-click on-export} :on-click on-export}

2
frontend/src/app/main/ui/workspace/tokens/sidebar.scss
View file

@ -65,7 +65,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-left: $s-8; margin-left: $s-12;
padding-top: $s-12; padding-top: $s-12;
color: var(--layer-row-foreground-color); color: var(--layer-row-foreground-color);
} }