mirror of
https://github.com/penpot/penpot.git
synced 2025-07-08 01:57:15 +02:00
💄 Improve shared link modal
This commit is contained in:
Eva
Pablo Alba
parent
f132651175
commit
0f04398e61
23 changed files with 453 additions and 521 deletions
|
|
@ -84,5 +84,6 @@
|
|||
[]
|
||||
(let [modal (mf/deref modal-ref)]
|
||||
(when modal
|
||||
(.log js/console "modal"(clj->js modal))
|
||||
[:& modal-wrapper {:data modal
|
||||
:key (:id modal)}])))
|
||||
|
|
|
|||
|
|
@ -24,53 +24,68 @@
|
|||
(log/set-level! :warn)
|
||||
|
||||
(defn prepare-params
|
||||
[{:keys [sections pages pages-mode]}]
|
||||
{:pages pages
|
||||
:flags (-> #{}
|
||||
(into (map #(str "section-" %)) sections)
|
||||
(into (map #(str "pages-" %)) [pages-mode]))})
|
||||
[{:keys [pages who-comment who-inspect]}]
|
||||
|
||||
{:pages pages
|
||||
:who-comment who-comment
|
||||
:who-inspect who-inspect})
|
||||
|
||||
|
||||
|
||||
(mf/defc share-link-dialog
|
||||
{::mf/register modal/components
|
||||
::mf/register-as :share-link}
|
||||
[{:keys [file page]}]
|
||||
(let [slinks (mf/deref refs/share-links)
|
||||
router (mf/deref refs/router)
|
||||
route (mf/deref refs/route)
|
||||
(let [current-page page
|
||||
slinks (mf/deref refs/share-links)
|
||||
router (mf/deref refs/router)
|
||||
route (mf/deref refs/route)
|
||||
|
||||
link (mf/use-state nil)
|
||||
confirm (mf/use-state false)
|
||||
link (mf/use-state nil)
|
||||
confirm (mf/use-state false)
|
||||
open-ops (mf/use-state false)
|
||||
|
||||
opts (mf/use-state
|
||||
{:pages-mode "current"
|
||||
:all-pages false
|
||||
:pages #{(:id page)}
|
||||
:who-comment "team"
|
||||
:who-inspect "team"})
|
||||
|
||||
opts (mf/use-state
|
||||
{:sections #{"viewer"}
|
||||
:pages-mode "current"
|
||||
:pages #{(:id page)}})
|
||||
|
||||
close
|
||||
(fn [event]
|
||||
(dom/prevent-default event)
|
||||
(st/emit! (modal/hide)))
|
||||
(st/emit! (modal/hide))
|
||||
(modal/disallow-click-outside!))
|
||||
|
||||
select-pages-mode
|
||||
(fn [mode]
|
||||
toggle-all
|
||||
(fn []
|
||||
(reset! confirm false)
|
||||
(swap! opts
|
||||
(fn [state]
|
||||
(-> state
|
||||
(assoc :pages-mode mode)
|
||||
(cond-> (= mode "current") (assoc :pages #{(:id page)}))
|
||||
(cond-> (= mode "all") (assoc :pages (into #{} (get-in file [:data :pages]))))))))
|
||||
(if (= true (:all-pages state))
|
||||
(-> state
|
||||
(assoc :all-pages false)
|
||||
(assoc :pages #{(:id page)}))
|
||||
(-> state
|
||||
(assoc :all-pages true)
|
||||
(assoc :pages (into #{} (get-in file [:data :pages]))))))))
|
||||
|
||||
mark-checked-page
|
||||
(fn [event id]
|
||||
(let [target (dom/get-target event)
|
||||
checked? (.-checked ^js target)]
|
||||
(reset! confirm false)
|
||||
(swap! opts update :pages
|
||||
(fn [pages]
|
||||
(if checked?
|
||||
(conj pages id)
|
||||
(disj pages id))))))
|
||||
checked? (.-checked ^js target)
|
||||
dif-pages? (not= id (first (:pages @opts)))
|
||||
no-one-page (< 1 (count (:pages @opts)))
|
||||
should-change (or no-one-page dif-pages?)]
|
||||
(when should-change
|
||||
(reset! confirm false)
|
||||
(swap! opts update :pages
|
||||
(fn [pages]
|
||||
(if checked?
|
||||
(conj pages id)
|
||||
(disj pages id)))))))
|
||||
|
||||
create-link
|
||||
(fn [_]
|
||||
|
|
@ -83,7 +98,7 @@
|
|||
(wapi/write-to-clipboard @link)
|
||||
(st/emit! (dm/show {:type :info
|
||||
:content (tr "common.share-link.link-copied-success")
|
||||
:timeout 3000})))
|
||||
:timeout 1000})))
|
||||
|
||||
try-delete-link
|
||||
(fn [_]
|
||||
|
|
@ -94,17 +109,27 @@
|
|||
(let [params (prepare-params @opts)
|
||||
slink (d/seek #(= (:flags %) (:flags params)) slinks)]
|
||||
(reset! confirm false)
|
||||
(st/emit! (dc/delete-share-link slink)
|
||||
(dm/show {:type :info
|
||||
:content (tr "common.share-link.link-deleted-success")
|
||||
:timeout 3000}))))
|
||||
]
|
||||
(st/emit! (dc/delete-share-link slink))))
|
||||
|
||||
manage-open-ops
|
||||
(fn [_]
|
||||
(swap! open-ops not))
|
||||
|
||||
on-who-change
|
||||
(fn [type event]
|
||||
(let [target (dom/get-target event)
|
||||
value (dom/get-value target)
|
||||
value (keyword value)]
|
||||
(reset! confirm false)
|
||||
(if (= type :comment)
|
||||
(swap! opts assoc :who-comment (d/name value))
|
||||
(swap! opts assoc :who-inspect (d/name value)))))]
|
||||
|
||||
(mf/use-effect
|
||||
(mf/deps file slinks @opts)
|
||||
(fn []
|
||||
(let [{:keys [flags pages] :as params} (prepare-params @opts)
|
||||
slink (d/seek #(and (= (:flags %) flags) (= (:pages %) pages)) slinks)
|
||||
(let [{:keys [pages who-comment who-inspect] :as params} (prepare-params @opts)
|
||||
slink (d/seek #(and (= (:who-inspect %) who-inspect) (= (:who-comment %) who-comment) (= (:pages %) pages)) slinks)
|
||||
href (when slink
|
||||
(let [pparams (:path-params route)
|
||||
qparams (-> (:query-params route)
|
||||
|
|
@ -114,123 +139,123 @@
|
|||
(assoc cf/public-uri :fragment href)))]
|
||||
(reset! link (some-> href str)))))
|
||||
|
||||
[:div.modal-overlay
|
||||
[:div.modal-overlay.share-modal
|
||||
[:div.modal-container.share-link-dialog
|
||||
[:div.modal-content
|
||||
[:div.modal-content.initial
|
||||
[:div.title
|
||||
[:h2 (tr "common.share-link.title")]
|
||||
[:div.modal-close-button
|
||||
{:on-click close
|
||||
:title (tr "labels.close")}
|
||||
i/close]]
|
||||
|
||||
[:div.share-link-section
|
||||
[:label (tr "labels.link")]
|
||||
[:div.custom-input.with-icon
|
||||
[:input {:type "text"
|
||||
:value (or @link "")
|
||||
:placeholder (tr "common.share-link.placeholder")
|
||||
:read-only true}]
|
||||
(when (some? @link)
|
||||
[:div.help-icon {:title (tr "labels.copy")
|
||||
:on-click copy-link}
|
||||
i/copy])]
|
||||
|
||||
[:div.hint (tr "common.share-link.permissions-hint")]]]
|
||||
|
||||
i/close]]]
|
||||
[:div.modal-content
|
||||
(let [sections (:sections @opts)]
|
||||
[:div.access-mode
|
||||
[:div.title (tr "common.share-link.permissions-can-access")]
|
||||
[:div.items
|
||||
[:div.input-checkbox.check-primary.disabled
|
||||
[:input.check-primary.input-checkbox {:type "checkbox" :disabled true}]
|
||||
[:label (tr "labels.workspace")]]
|
||||
[:div.share-link-section
|
||||
(when (and (not @confirm) (some? @link))
|
||||
[:div.custom-input.with-icon
|
||||
[:input {:type "text"
|
||||
:value (or @link "")
|
||||
:placeholder (tr "common.share-link.placeholder")
|
||||
:read-only true}]
|
||||
[:div.help-icon {:title (tr "viewer.header.share.copy-link")
|
||||
:on-click copy-link}
|
||||
i/copy]])
|
||||
[:div.hint-wrapper
|
||||
(when (not @confirm) [:div.hint (tr "common.share-link.permissions-hint")])
|
||||
(cond
|
||||
(true? @confirm)
|
||||
[:div.confirm-dialog
|
||||
[:div.description (tr "common.share-link.confirm-deletion-link-description")]
|
||||
[:div.actions
|
||||
[:input.btn-secondary
|
||||
{:type "button"
|
||||
:on-click #(reset! confirm false)
|
||||
:value (tr "labels.cancel")}]
|
||||
[:input.btn-warning
|
||||
{:type "button"
|
||||
:on-click delete-link
|
||||
:value (tr "common.share-link.destroy-link")}]]]
|
||||
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox"
|
||||
:default-checked (contains? sections "viewer")}]
|
||||
[:label (tr "labels.viewer")
|
||||
[:span.hint "(" (tr "labels.default") ")"]]]
|
||||
|
||||
;; [:div.input-checkbox.check-primary
|
||||
;; [:input.check-primary.input-checkbox {:type "checkbox"}]
|
||||
;; [:label "Handoff" ]]
|
||||
]])
|
||||
|
||||
(let [mode (:pages-mode @opts)]
|
||||
[:*
|
||||
[:div.view-mode
|
||||
[:div.title (tr "common.share-link.permissions-can-view")]
|
||||
[:div.items
|
||||
[:div.input-radio.radio-primary
|
||||
[:input {:type "radio"
|
||||
:id "view-all"
|
||||
:checked (= "all" mode)
|
||||
:name "pages-mode"
|
||||
:on-change #(select-pages-mode "all")}]
|
||||
[:label {:for "view-all"} (tr "common.share-link.view-all-pages")]]
|
||||
|
||||
[:div.input-radio.radio-primary
|
||||
[:input {:type "radio"
|
||||
:id "view-current"
|
||||
:name "pages-mode"
|
||||
:checked (= "current" mode)
|
||||
:on-change #(select-pages-mode "current")}]
|
||||
[:label {:for "view-current"} (tr "common.share-link.view-current-page")]]
|
||||
|
||||
[:div.input-radio.radio-primary
|
||||
[:input {:type "radio"
|
||||
:id "view-selected"
|
||||
:name "pages-mode"
|
||||
:checked (= "selected" mode)
|
||||
:on-change #(select-pages-mode "selected")}]
|
||||
[:label {:for "view-selected"} (tr "common.share-link.view-selected-pages")]]]]
|
||||
|
||||
(when (= "selected" mode)
|
||||
(let [pages (->> (get-in file [:data :pages])
|
||||
(map #(get-in file [:data :pages-index %])))
|
||||
selected (:pages @opts)]
|
||||
[:ul.pages-selection
|
||||
(for [page pages]
|
||||
[:li.input-checkbox.check-primary {:key (str (:id page))}
|
||||
[:input {:type "checkbox"
|
||||
:id (str "page-" (:id page))
|
||||
:on-change #(mark-checked-page % (:id page))
|
||||
:checked (contains? selected (:id page))}]
|
||||
[:label {:for (str "page-" (:id page))} (:name page)]])]))])]
|
||||
|
||||
[:div.modal-footer
|
||||
(cond
|
||||
(true? @confirm)
|
||||
[:div.confirm-dialog
|
||||
[:div.description (tr "common.share-link.confirm-deletion-link-description")]
|
||||
[:div.actions
|
||||
(some? @link)
|
||||
[:input.btn-secondary
|
||||
{:type "button"
|
||||
:on-click #(reset! confirm false)
|
||||
:value (tr "labels.cancel")}]
|
||||
[:input.btn-warning
|
||||
:class "primary"
|
||||
:on-click try-delete-link
|
||||
:value (tr "common.share-link.destroy-link")}]
|
||||
|
||||
:else
|
||||
[:input.btn-primary
|
||||
{:type "button"
|
||||
:on-click delete-link
|
||||
:value (tr "common.share-link.remove-link")
|
||||
}]]]
|
||||
:class "primary"
|
||||
:on-click create-link
|
||||
:value (tr "common.share-link.get-link")}])]]]
|
||||
[:div.modal-content.ops-section
|
||||
[:div.manage-permissions
|
||||
{:on-click manage-open-ops}
|
||||
[:span.icon i/picker-hsv]
|
||||
[:div.title (tr "common.share-link.manage-ops")]]
|
||||
(when @open-ops
|
||||
[:*
|
||||
(let [all-selected? (:all-pages @opts)
|
||||
pages (->> (get-in file [:data :pages])
|
||||
(map #(get-in file [:data :pages-index %])))
|
||||
selected (:pages @opts)]
|
||||
|
||||
(some? @link)
|
||||
[:input.btn-secondary
|
||||
{:type "button"
|
||||
:class "primary"
|
||||
:on-click try-delete-link
|
||||
:value (tr "common.share-link.remove-link")}]
|
||||
[:*
|
||||
[:div.view-mode
|
||||
[:div.subtitle
|
||||
[:span.icon i/play]
|
||||
(tr "common.share-link.permissions-pages")]
|
||||
[:div.items
|
||||
(if (= 1 (count pages))
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox"
|
||||
:id (str "page-" (:id current-page))
|
||||
:on-change #(mark-checked-page % (:id current-page))
|
||||
:checked true}]
|
||||
[:label {:for (str "page-" (:id current-page))} (:name current-page)]
|
||||
[:span (str " " (tr "common.share-link.current-tag"))]]
|
||||
|
||||
:else
|
||||
[:input.btn-primary
|
||||
{:type "button"
|
||||
:class "primary"
|
||||
:on-click create-link
|
||||
:value (tr "common.share-link.get-link")}])]
|
||||
[:*
|
||||
[:div.row
|
||||
[:div.input-checkbox.check-primary
|
||||
[:input {:type "checkbox"
|
||||
:id "view-all"
|
||||
:checked all-selected?
|
||||
:name "pages-mode"
|
||||
:on-change toggle-all}]
|
||||
[:label {:for "view-all"} (tr "common.share-link.view-all")]]
|
||||
[:span.count-pages (tr "common.share-link.page-shared" (i18n/c (count selected)))]]
|
||||
|
||||
]]))
|
||||
[:ul.pages-selection
|
||||
(for [page pages]
|
||||
[:li.input-checkbox.check-primary {:key (str (:id page))}
|
||||
[:input {:type "checkbox"
|
||||
:id (str "page-" (:id page))
|
||||
:on-change #(mark-checked-page % (:id page))
|
||||
:checked (contains? selected (:id page))}]
|
||||
(if (= (:id current-page) (:id page))
|
||||
[:*
|
||||
[:label {:for (str "page-" (:id page))} (:name page)]
|
||||
[:span.current-tag (str " " (tr "common.share-link.current-tag"))]]
|
||||
[:label {:for (str "page-" (:id page))} (:name page)])])]])]]])
|
||||
[:div.access-mode
|
||||
[:div.subtitle
|
||||
[:span.icon i/chat]
|
||||
(tr "common.share-link.permissions-can-comment")]
|
||||
[:div.items
|
||||
[:select.input-select {:on-change (partial on-who-change :comment)
|
||||
:value (:who-comment @opts)}
|
||||
[:option {:value "team"} (tr "common.share-link.team-members")]
|
||||
[:option {:value "all"} (tr "common.share-link.all-users")]]]]
|
||||
[:div.inspect-mode
|
||||
[:div.subtitle
|
||||
[:span.icon i/code]
|
||||
(tr "common.share-link.permissions-can-inspect")]
|
||||
[:div.items
|
||||
[:select.input-select {:on-change (partial on-who-change :inspect)
|
||||
:value (:who-inspect @opts)}
|
||||
[:option {:value "team"} (tr "common.share-link.team-members")]
|
||||
[:option {:value "all"} (tr "common.share-link.all-users")]]]]])]]]))
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -77,7 +77,8 @@
|
|||
(mf/use-callback
|
||||
(mf/deps page)
|
||||
(fn []
|
||||
(modal/show! :share-link {:page page :file file})))]
|
||||
(modal/show! :share-link {:page page :file file})
|
||||
(modal/allow-click-outside!)))]
|
||||
|
||||
[:div.options-zone
|
||||
(case section
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue