mirror of
https://github.com/penpot/penpot.git
synced 2025-06-02 04:51:37 +02:00
480 lines
18 KiB
Clojure
480 lines
18 KiB
Clojure
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
;;
|
|
;; Copyright (c) KALEIDOS INC
|
|
|
|
(ns app.main.ui.export
|
|
"Assets exportation common components."
|
|
(:require-macros [app.main.style :as stl])
|
|
(:require
|
|
[app.common.colors :as clr]
|
|
[app.common.data :as d]
|
|
[app.common.data.macros :as dm]
|
|
[app.main.data.exports :as de]
|
|
[app.main.data.modal :as modal]
|
|
[app.main.refs :as refs]
|
|
[app.main.store :as st]
|
|
[app.main.ui.icons :as i]
|
|
[app.main.ui.workspace.shapes :refer [shape-wrapper]]
|
|
[app.main.worker :as uw]
|
|
[app.util.dom :as dom]
|
|
[app.util.i18n :as i18n :refer [tr c]]
|
|
[app.util.strings :as ust]
|
|
[beicon.v2.core :as rx]
|
|
[cuerdas.core :as str]
|
|
[rumext.v2 :as mf]))
|
|
|
|
(def ^:private neutral-icon
|
|
(i/icon-xref :msg-neutral (stl/css :icon)))
|
|
|
|
(def ^:private error-icon
|
|
(i/icon-xref :delete-text (stl/css :icon)))
|
|
|
|
(def ^:private close-icon
|
|
(i/icon-xref :close (stl/css :close-icon)))
|
|
|
|
(mf/defc export-multiple-dialog
|
|
[{:keys [exports title cmd no-selection]}]
|
|
(let [lstate (mf/deref refs/export)
|
|
in-progress? (:in-progress lstate)
|
|
|
|
exports (mf/use-state exports)
|
|
|
|
all-exports (deref exports)
|
|
all-checked? (every? :enabled all-exports)
|
|
all-unchecked? (every? (complement :enabled) all-exports)
|
|
|
|
enabled-exports (into []
|
|
(comp (filter :enabled)
|
|
(map #(dissoc % :shape :enabled)))
|
|
all-exports)
|
|
|
|
cancel-fn
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(st/emit! (modal/hide)))
|
|
|
|
accept-fn
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(st/emit! (modal/hide)
|
|
(de/request-multiple-export
|
|
{:exports enabled-exports
|
|
:cmd cmd})))
|
|
|
|
on-toggle-enabled
|
|
(mf/use-fn
|
|
(mf/deps exports)
|
|
(fn [event]
|
|
(let [index (-> (dom/get-current-target event)
|
|
(dom/get-data "value")
|
|
(d/parse-integer))]
|
|
(when (some? index)
|
|
(swap! exports update-in [index :enabled] not)))))
|
|
|
|
change-all
|
|
(fn [_]
|
|
(swap! exports (fn [exports]
|
|
(mapv #(assoc % :enabled (not all-checked?)) exports))))]
|
|
|
|
[:div {:class (stl/css :modal-overlay)}
|
|
[:div {:class (stl/css-case :modal-container true
|
|
:empty (empty? all-exports))}
|
|
|
|
[:div {:class (stl/css :modal-header)}
|
|
[:h2 {:class (stl/css :modal-title)} title]
|
|
[:button {:class (stl/css :modal-close-btn)
|
|
:on-click cancel-fn}
|
|
i/close]]
|
|
|
|
[:*
|
|
[:div {:class (stl/css :modal-content)}
|
|
(if (> (count all-exports) 0)
|
|
[:*
|
|
[:div {:class (stl/css :selection-header)}
|
|
[:button {:class (stl/css :selection-btn)
|
|
:on-click change-all}
|
|
[:span {:class (stl/css :checkbox-wrapper)}
|
|
(cond
|
|
all-checked? [:span {:class (stl/css-case :checkobox-tick true
|
|
:global/checked true)}
|
|
i/tick]
|
|
all-unchecked? [:span {:class (stl/css-case :checkobox-tick true
|
|
:global/uncheked true)}]
|
|
:else [:span {:class (stl/css-case :checkobox-tick true
|
|
:global/intermediate true)}
|
|
i/remove-icon])]]
|
|
[:div {:class (stl/css :selection-title)}
|
|
(tr "dashboard.export-multiple.selected"
|
|
(c (count enabled-exports))
|
|
(c (count all-exports)))]]
|
|
[:div {:class (stl/css :selection-wrapper)}
|
|
[:div {:class (stl/css-case :selection-list true
|
|
:selection-shadow (> (count all-exports) 8))}
|
|
(for [[index {:keys [shape suffix] :as export}] (d/enumerate @exports)]
|
|
(let [{:keys [x y width height]} (:selrect shape)]
|
|
[:div {:class (stl/css :selection-row)
|
|
:key (:id shape)}
|
|
[:button {:class (stl/css :selection-btn)
|
|
:data-value (str index)
|
|
:on-click on-toggle-enabled}
|
|
[:span {:class (stl/css :checkbox-wrapper)}
|
|
(if (:enabled export)
|
|
[:span {:class (stl/css-case :checkobox-tick true
|
|
:global/checked true)}
|
|
i/tick]
|
|
[:span {:class (stl/css-case :checkobox-tick true
|
|
:global/uncheked true)}])]
|
|
|
|
[:div {:class (stl/css :image-wrapper)}
|
|
(if (some? (:thumbnail shape))
|
|
[:img {:src (:thumbnail shape)}]
|
|
[:svg {:view-box (dm/str x " " y " " width " " height)
|
|
:width 24
|
|
:height 20
|
|
:version "1.1"
|
|
:xmlns "http://www.w3.org/2000/svg"
|
|
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
|
;; Fix Chromium bug about color of html texts
|
|
;; https://bugs.chromium.org/p/chromium/issues/detail?id=1244560#c5
|
|
:style {:-webkit-print-color-adjust :exact}
|
|
:fill "none"}
|
|
|
|
[:& shape-wrapper {:shape shape}]])]
|
|
|
|
[:div {:class (stl/css :selection-name)}
|
|
(cond-> (:name shape) suffix (str suffix))]
|
|
(when (:scale export)
|
|
[:div {:class (stl/css :selection-scale)}
|
|
(dm/str (ust/format-precision (* width (:scale export)) 2) "x"
|
|
(ust/format-precision (* height (:scale export)) 2))])
|
|
|
|
(when (:type export)
|
|
[:div {:class (stl/css :selection-extension)}
|
|
(-> export :type d/name str/upper)])]]))]]]
|
|
|
|
[:& no-selection])]
|
|
|
|
(when (> (count all-exports) 0)
|
|
[:div {:class (stl/css :modal-footer)}
|
|
[:div {:class (stl/css :action-buttons)}
|
|
[:input {:class (stl/css :cancel-button)
|
|
:type "button"
|
|
:value (tr "labels.cancel")
|
|
:on-click cancel-fn}]
|
|
|
|
[:input {:class (stl/css-case :accept-btn true
|
|
:btn-disabled (or in-progress? all-unchecked?))
|
|
:disabled (or in-progress? all-unchecked?)
|
|
:type "button"
|
|
:value (if in-progress?
|
|
(tr "workspace.options.exporting-object")
|
|
(tr "labels.export"))
|
|
:on-click (when-not in-progress? accept-fn)}]]])]]]))
|
|
|
|
(mf/defc shapes-no-selection []
|
|
[:div {:class (stl/css :no-selection)}
|
|
[:p {:class (stl/css :modal-msg)}
|
|
(tr "dashboard.export-shapes.no-elements")]
|
|
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export-shapes.how-to")]
|
|
[:a {:target "_blank"
|
|
:class (stl/css :modal-link)
|
|
:href "https://help.penpot.app/user-guide/exporting/ "}
|
|
(tr "dashboard.export-shapes.how-to-link")]])
|
|
|
|
(mf/defc export-shapes-dialog
|
|
{::mf/register modal/components
|
|
::mf/register-as :export-shapes}
|
|
[{:keys [exports]}]
|
|
(let [title (tr "dashboard.export-shapes.title")]
|
|
[:& export-multiple-dialog
|
|
{:exports exports
|
|
:title title
|
|
:cmd :export-shapes
|
|
:no-selection shapes-no-selection}]))
|
|
|
|
(mf/defc export-frames
|
|
{::mf/register modal/components
|
|
::mf/register-as :export-frames}
|
|
[{:keys [exports]}]
|
|
(let [title (tr "dashboard.export-frames.title")]
|
|
[:& export-multiple-dialog
|
|
{:exports exports
|
|
:title title
|
|
:cmd :export-frames}]))
|
|
|
|
(mf/defc export-progress-widget
|
|
{::mf/wrap [mf/memo]}
|
|
[]
|
|
(let [state (mf/deref refs/export)
|
|
profile (mf/deref refs/profile)
|
|
theme (or (:theme profile) "default")
|
|
is-default-theme? (= "default" theme)
|
|
error? (:error state)
|
|
healthy? (:healthy? state)
|
|
detail-visible? (:detail-visible state)
|
|
widget-visible? (:widget-visible state)
|
|
progress (:progress state)
|
|
exports (:exports state)
|
|
total (count exports)
|
|
complete? (= progress total)
|
|
circ (* 2 Math/PI 12)
|
|
pct (- circ (* circ (/ progress total)))
|
|
|
|
pwidth (if error?
|
|
280
|
|
(/ (* progress 280) total))
|
|
color (cond
|
|
error? clr/new-danger
|
|
healthy? (if is-default-theme?
|
|
clr/new-primary
|
|
clr/new-primary-light)
|
|
(not healthy?) clr/new-warning)
|
|
|
|
background-clr (if is-default-theme?
|
|
clr/background-quaternary
|
|
clr/background-quaternary-light)
|
|
title (cond
|
|
error? (tr "workspace.options.exporting-object-error")
|
|
complete? (tr "workspace.options.exporting-complete")
|
|
healthy? (tr "workspace.options.exporting-object")
|
|
(not healthy?) (tr "workspace.options.exporting-object-slow"))
|
|
|
|
retry-last-export
|
|
(mf/use-fn #(st/emit! (de/retry-last-export)))
|
|
|
|
toggle-detail-visibility
|
|
(mf/use-fn #(st/emit! (de/toggle-detail-visibililty)))]
|
|
|
|
[:*
|
|
(when widget-visible?
|
|
[:div {:class (stl/css :export-progress-widget)
|
|
:on-click toggle-detail-visibility}
|
|
[:svg {:width "24" :height "24"}
|
|
[:circle {:r "10"
|
|
:cx "12"
|
|
:cy "12"
|
|
:fill "transparent"
|
|
:stroke background-clr
|
|
:stroke-width "4"}]
|
|
[:circle {:r "10"
|
|
:cx "12"
|
|
:cy "12"
|
|
:fill "transparent"
|
|
:stroke color
|
|
:stroke-width "4"
|
|
:stroke-dasharray (dm/str circ " " circ)
|
|
:stroke-dashoffset pct
|
|
:transform "rotate(-90 12,12)"
|
|
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])
|
|
|
|
(when detail-visible?
|
|
[:div {:class (stl/css-case :export-progress-modal true
|
|
:has-error error?)}
|
|
(if error?
|
|
error-icon
|
|
neutral-icon)
|
|
|
|
[:p {:class (stl/css :export-progress-title)}
|
|
title
|
|
(if error?
|
|
[:button {:class (stl/css :retry-btn)
|
|
:on-click retry-last-export}
|
|
(tr "workspace.options.retry")]
|
|
|
|
[:p {:class (stl/css :progress)}
|
|
(dm/str progress " / " total)])]
|
|
|
|
[:button {:class (stl/css :progress-close-button)
|
|
:on-click toggle-detail-visibility}
|
|
close-icon]
|
|
|
|
(when-not error?
|
|
[:svg {:class (stl/css :progress-bar)
|
|
:height 4
|
|
:width 280}
|
|
[:g
|
|
[:path {:d "M0 0 L280 0"
|
|
:stroke background-clr
|
|
:stroke-width 30}]
|
|
[:path {:d (dm/str "M0 0 L280 0")
|
|
:stroke color
|
|
:stroke-width 30
|
|
:fill "transparent"
|
|
:stroke-dasharray 280
|
|
:stroke-dashoffset (- 280 pwidth)
|
|
:style {:transition "stroke-dashoffset 1s ease-in-out"}}]]])])]))
|
|
|
|
(def ^:const options [:all :merge :detach])
|
|
|
|
(mf/defc export-entry
|
|
{::mf/wrap-props false}
|
|
[{:keys [file]}]
|
|
[:div {:class (stl/css-case :file-entry true
|
|
:loading (:loading? file)
|
|
:success (:export-success? file)
|
|
:error (:export-error? file))}
|
|
|
|
[:div {:class (stl/css :file-name)}
|
|
[:span {:class (stl/css :file-icon)}
|
|
(cond (:export-success? file) i/tick
|
|
(:export-error? file) i/close
|
|
(:loading? file) i/loader-pencil)]
|
|
|
|
[:div {:class (stl/css :file-name-label)}
|
|
(:name file)]]])
|
|
|
|
(defn- mark-file-error
|
|
[files file-id]
|
|
(mapv #(cond-> %
|
|
(= file-id (:id %))
|
|
(assoc :export-error? true
|
|
:loading? false))
|
|
files))
|
|
|
|
(defn- mark-file-success
|
|
[files file-id]
|
|
(mapv #(cond-> %
|
|
(= file-id (:id %))
|
|
(assoc :export-success? true
|
|
:loading? false))
|
|
files))
|
|
|
|
(def export-types
|
|
[:all :merge :detach])
|
|
|
|
(mf/defc export-dialog
|
|
{::mf/register modal/components
|
|
::mf/register-as :export
|
|
::mf/wrap-props false}
|
|
[{:keys [team-id files has-libraries? binary? features]}]
|
|
(let [state* (mf/use-state
|
|
#(let [files (mapv (fn [file] (assoc file :loading? true)) files)]
|
|
{:status :prepare
|
|
:selected :all
|
|
:files files}))
|
|
|
|
state (deref state*)
|
|
selected (:selected state)
|
|
status (:status state)
|
|
|
|
|
|
|
|
start-export
|
|
(mf/use-fn
|
|
(mf/deps team-id selected files features)
|
|
(fn []
|
|
(swap! state* assoc :status :exporting)
|
|
(->> (uw/ask-many!
|
|
{:cmd (if binary? :export-binary-file :export-standard-file)
|
|
:team-id team-id
|
|
:features features
|
|
:export-type selected
|
|
:files files})
|
|
(rx/mapcat #(->> (rx/of %)
|
|
(rx/delay 1000)))
|
|
(rx/subs!
|
|
(fn [msg]
|
|
(cond
|
|
(= :error (:type msg))
|
|
(swap! state* update :files mark-file-error (:file-id msg))
|
|
|
|
(= :finish (:type msg))
|
|
(do
|
|
(swap! state* update :files mark-file-success (:file-id msg))
|
|
(dom/trigger-download-uri (:filename msg) (:mtype msg) (:uri msg)))))))))
|
|
|
|
on-cancel
|
|
(mf/use-fn
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(st/emit! (modal/hide))))
|
|
|
|
on-accept
|
|
(mf/use-fn
|
|
(mf/deps start-export)
|
|
(fn [event]
|
|
(dom/prevent-default event)
|
|
(start-export)))
|
|
|
|
on-change
|
|
(mf/use-fn
|
|
(fn [event]
|
|
(let [type (-> (dom/get-target event)
|
|
(dom/get-data "type")
|
|
(keyword))]
|
|
(swap! state* assoc :selected type))))]
|
|
|
|
(mf/with-effect [has-libraries?]
|
|
;; Start download automatically when no libraries
|
|
(when-not has-libraries?
|
|
(start-export)))
|
|
|
|
[:div {:class (stl/css :modal-overlay)}
|
|
[:div {:class (stl/css :modal-container)}
|
|
[:div {:class (stl/css :modal-header)}
|
|
[:h2 {:class (stl/css :modal-title)}
|
|
(tr "dashboard.export.title")]
|
|
[:button {:class (stl/css :modal-close-btn)
|
|
:on-click on-cancel} i/close]]
|
|
|
|
(cond
|
|
(= status :prepare)
|
|
[:*
|
|
[:div {:class (stl/css :modal-content)}
|
|
[:p {:class (stl/css :modal-msg)} (tr "dashboard.export.explain")]
|
|
[:p {:class (stl/css :modal-scd-msg)} (tr "dashboard.export.detail")]
|
|
|
|
(for [type export-types]
|
|
[:div {:class (stl/css :export-option true)
|
|
:key (name type)}
|
|
[:label {:for (str "export-" type)
|
|
:class (stl/css-case :global/checked (= selected type))}
|
|
;; Execution time translation strings:
|
|
;; dashboard.export.options.all.message
|
|
;; dashboard.export.options.all.title
|
|
;; dashboard.export.options.detach.message
|
|
;; dashboard.export.options.detach.title
|
|
;; dashboard.export.options.merge.message
|
|
;; dashboard.export.options.merge.title
|
|
[:span {:class (stl/css-case :global/checked (= selected type))}
|
|
(when (= selected type)
|
|
i/status-tick)]
|
|
[:div {:class (stl/css :option-content)}
|
|
[:h3 {:class (stl/css :modal-subtitle)} (tr (dm/str "dashboard.export.options." (d/name type) ".title"))]
|
|
[:p {:class (stl/css :modal-msg)} (tr (dm/str "dashboard.export.options." (d/name type) ".message"))]]
|
|
|
|
[:input {:type "radio"
|
|
:class (stl/css :option-input)
|
|
:id (str "export-" type)
|
|
:checked (= selected type)
|
|
:name "export-option"
|
|
:data-type (name type)
|
|
:on-change on-change}]]])]
|
|
|
|
[:div {:class (stl/css :modal-footer)}
|
|
[:div {:class (stl/css :action-buttons)}
|
|
[:input {:class (stl/css :cancel-button)
|
|
:type "button"
|
|
:value (tr "labels.cancel")
|
|
:on-click on-cancel}]
|
|
|
|
[:input {:class (stl/css :accept-btn)
|
|
:type "button"
|
|
:value (tr "labels.continue")
|
|
:on-click on-accept}]]]]
|
|
|
|
(= status :exporting)
|
|
[:*
|
|
[:div {:class (stl/css :modal-content)}
|
|
(for [file (:files state)]
|
|
[:& export-entry {:file file :key (dm/str (:id file))}])]
|
|
|
|
[:div {:class (stl/css :modal-footer)}
|
|
[:div {:class (stl/css :action-buttons)}
|
|
[:input {:class (stl/css :accept-btn)
|
|
:type "button"
|
|
:value (tr "labels.close")
|
|
:disabled (->> state :files (some :loading?))
|
|
:on-click on-cancel}]]]])]]))
|