mirror of
https://github.com/penpot/penpot.git
synced 2025-07-28 19:47:21 +02:00
Merge remote-tracking branch 'origin/staging' into develop
This commit is contained in:
Andrey Antukh
commit
f5c913d26e
14 changed files with 349 additions and 210 deletions
|
|
@ -63,17 +63,11 @@
|
|||
:browser
|
||||
:webworker))
|
||||
|
||||
(def default-flags
|
||||
[:enable-onboarding
|
||||
:enable-dashboard-templates-section
|
||||
:enable-google-fonts-provider
|
||||
:enable-component-thumbnails])
|
||||
|
||||
(defn- parse-flags
|
||||
[global]
|
||||
(let [flags (obj/get global "penpotFlags" "")
|
||||
flags (sequence (map keyword) (str/words flags))]
|
||||
(flags/parse flags/default default-flags flags)))
|
||||
(flags/parse flags/default flags)))
|
||||
|
||||
(defn- parse-version
|
||||
[global]
|
||||
|
|
|
|||
|
|
@ -469,10 +469,11 @@
|
|||
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(-> state
|
||||
(assoc-in [:files id] file)
|
||||
(assoc-in [:recent-files id] file)
|
||||
(update-in [:projects project-id :count] inc)))))
|
||||
(let [file (dissoc file :data)]
|
||||
(-> state
|
||||
(assoc-in [:files id] file)
|
||||
(assoc-in [:recent-files id] file)
|
||||
(update-in [:projects project-id :count] inc))))))
|
||||
|
||||
(defn create-file
|
||||
[{:keys [project-id name] :as params}]
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@
|
|||
[app.common.types.components-list :as ctkl]
|
||||
[app.common.types.container :as ctn]
|
||||
[app.common.types.file :as ctf]
|
||||
[app.common.types.page :as ctp]
|
||||
[app.common.types.shape :as cts]
|
||||
[app.common.types.shape-tree :as ctst]
|
||||
[app.common.types.shape.layout :as ctl]
|
||||
|
|
@ -108,9 +109,6 @@
|
|||
(declare ^:private workspace-initialized)
|
||||
(declare ^:private fetch-libraries)
|
||||
(declare ^:private libraries-fetched)
|
||||
(declare ^:private preload-data-uris)
|
||||
|
||||
;; (declare go-to-layout)
|
||||
|
||||
;; --- Initialize Workspace
|
||||
|
||||
|
|
@ -273,6 +271,15 @@
|
|||
(rx/of (dws/select-shapes frames-id)
|
||||
dwz/zoom-to-selected-shape)))))
|
||||
|
||||
(defn- select-frame-tool
|
||||
[file-id page-id]
|
||||
(ptk/reify ::select-frame-tool
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(let [page (dsh/lookup-page state file-id page-id)]
|
||||
(when (ctp/is-empty? page)
|
||||
(rx/of (dwd/select-for-drawing :frame)))))))
|
||||
|
||||
(defn- fetch-bundle
|
||||
"Multi-stage file bundle fetch coordinator"
|
||||
[file-id]
|
||||
|
|
@ -314,13 +321,10 @@
|
|||
(defn initialize-workspace
|
||||
[file-id]
|
||||
(assert (uuid? file-id) "expected valud uuid for `file-id`")
|
||||
|
||||
(ptk/reify ::initialize-workspace
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(-> state
|
||||
(dissoc :files)
|
||||
(dissoc :workspace-ready)
|
||||
(assoc :recent-colors (:recent-colors storage/user))
|
||||
(assoc :recent-fonts (:recent-fonts storage/user))
|
||||
(assoc :current-file-id file-id)
|
||||
|
|
@ -395,11 +399,9 @@
|
|||
(dissoc
|
||||
:current-file-id
|
||||
:workspace-editor-state
|
||||
:files
|
||||
:workspace-media-objects
|
||||
:workspace-persistence
|
||||
:workspace-presence
|
||||
:workspace-ready
|
||||
:workspace-undo)
|
||||
(update :workspace-global dissoc :read-only?)
|
||||
(assoc-in [:workspace-global :options-mode] :design)))
|
||||
|
|
@ -426,48 +428,69 @@
|
|||
;; Make this event callable through dynamic resolution
|
||||
(defmethod ptk/resolve ::reload-current-file [_ _] (reload-current-file))
|
||||
|
||||
(defn initialize-page
|
||||
[page-id]
|
||||
(assert (uuid? page-id) "expected valid uuid for `page-id`")
|
||||
|
||||
(ptk/reify ::initialize-page
|
||||
|
||||
(def ^:private xf:collect-file-media
|
||||
"Resolve and collect all file media on page objects"
|
||||
(comp (map second)
|
||||
(keep (fn [{:keys [metadata fill-image]}]
|
||||
(cond
|
||||
(some? metadata) (cf/resolve-file-media metadata)
|
||||
(some? fill-image) (cf/resolve-file-media fill-image))))))
|
||||
|
||||
|
||||
(defn- initialize-page*
|
||||
"Second phase of page initialization, once we know the page is
|
||||
available on the sate"
|
||||
[file-id page-id page]
|
||||
(ptk/reify ::initialize-page*
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(if-let [{:keys [id] :as page} (dsh/lookup-page state page-id)]
|
||||
;; we maintain a cache of page state for user convenience with the exception of the
|
||||
;; selection; when user abandon the current page, the selection is lost
|
||||
(let [local (dm/get-in state [:workspace-cache id] default-workspace-local)]
|
||||
(-> state
|
||||
(assoc :current-page-id id)
|
||||
(assoc :workspace-local (assoc local :selected (d/ordered-set)))
|
||||
(assoc :workspace-trimmed-page (dm/select-keys page [:id :name]))
|
||||
;; selection; when user abandon the current page, the selection is lost
|
||||
(let [local (dm/get-in state [:workspace-cache [file-id page-id]] default-workspace-local)]
|
||||
(-> state
|
||||
(assoc :current-page-id page-id)
|
||||
(assoc :workspace-local (assoc local :selected (d/ordered-set)))
|
||||
(assoc :workspace-trimmed-page (dm/select-keys page [:id :name]))
|
||||
|
||||
;; FIXME: this should be done on `initialize-layout` (?)
|
||||
(update :workspace-layout layout/load-layout-flags)
|
||||
(update :workspace-global layout/load-layout-state)))
|
||||
;; FIXME: this should be done on `initialize-layout` (?)
|
||||
(update :workspace-layout layout/load-layout-flags)
|
||||
(update :workspace-global layout/load-layout-state))))
|
||||
|
||||
state))
|
||||
ptk/EffectEvent
|
||||
(effect [_ _ _]
|
||||
(let [uris (into #{} xf:collect-file-media (:objects page))]
|
||||
(->> (rx/from uris)
|
||||
(rx/subs! #(http/fetch-data-uri % false)))))))
|
||||
|
||||
(defn initialize-page
|
||||
[file-id page-id]
|
||||
(assert (uuid? file-id) "expected valid uuid for `file-id`")
|
||||
|
||||
(ptk/reify ::initialize-page
|
||||
ptk/WatchEvent
|
||||
(watch [_ state _]
|
||||
(if (dsh/lookup-page state page-id)
|
||||
(let [file-id (:current-file-id state)]
|
||||
(rx/of (preload-data-uris page-id)
|
||||
(dwth/watch-state-changes file-id page-id)
|
||||
(dwl/watch-component-changes)))
|
||||
(rx/of (dcm/go-to-workspace))))))
|
||||
(if-let [page (dsh/lookup-page state file-id page-id)]
|
||||
(rx/of (initialize-page* file-id page-id page)
|
||||
(dwth/watch-state-changes file-id page-id)
|
||||
(dwl/watch-component-changes)
|
||||
(when (cf/external-feature-flag "boards-02" "test")
|
||||
(select-frame-tool file-id page-id)))
|
||||
(rx/of (dcm/go-to-workspace :file-id file-id ::rt/replace true))))))
|
||||
|
||||
(defn finalize-page
|
||||
[page-id]
|
||||
[file-id page-id]
|
||||
(assert (uuid? file-id) "expected valid uuid for `file-id`")
|
||||
(assert (uuid? page-id) "expected valid uuid for `page-id`")
|
||||
|
||||
(ptk/reify ::finalize-page
|
||||
ptk/UpdateEvent
|
||||
(update [_ state]
|
||||
(let [local (-> (:workspace-local state)
|
||||
(dissoc :edition :edit-path :selected))
|
||||
exit? (not= :workspace (dm/get-in state [:route :data :name]))
|
||||
exit? (not= :workspace (rt/lookup-name state))
|
||||
state (-> state
|
||||
(update :workspace-cache assoc page-id local)
|
||||
(update :workspace-cache assoc [file-id page-id] local)
|
||||
(dissoc :current-page-id
|
||||
:workspace-local
|
||||
:workspace-trimmed-page
|
||||
|
|
@ -476,22 +499,6 @@
|
|||
(cond-> state
|
||||
exit? (dissoc :workspace-drawing))))))
|
||||
|
||||
(defn- preload-data-uris
|
||||
"Preloads the image data so it's ready when necessary"
|
||||
[page-id]
|
||||
(ptk/reify ::preload-data-uris
|
||||
ptk/EffectEvent
|
||||
(effect [_ state _]
|
||||
(let [xform (comp (map second)
|
||||
(keep (fn [{:keys [metadata fill-image]}]
|
||||
(cond
|
||||
(some? metadata) (cf/resolve-file-media metadata)
|
||||
(some? fill-image) (cf/resolve-file-media fill-image)))))
|
||||
uris (into #{} xform (dsh/lookup-page-objects state page-id))]
|
||||
|
||||
(->> (rx/from uris)
|
||||
(rx/subs! #(http/fetch-data-uri % false)))))))
|
||||
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
;; Workspace Page CRUD
|
||||
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
||||
|
|
|
|||
|
|
@ -120,6 +120,11 @@
|
|||
([id params & {:as options}]
|
||||
(navigate id params options)))
|
||||
|
||||
(defn lookup-name
|
||||
[state]
|
||||
(dm/get-in state [:route :data :name]))
|
||||
|
||||
;; FIXME: rename to lookup-params
|
||||
(defn get-params
|
||||
[state]
|
||||
(dm/get-in state [:route :params :query]))
|
||||
|
|
|
|||
|
|
@ -127,7 +127,6 @@
|
|||
{::mf/props :obj
|
||||
::mf/private true}
|
||||
[{:keys [team-id children]}]
|
||||
|
||||
(mf/with-effect [team-id]
|
||||
(st/emit! (dtm/initialize-team team-id))
|
||||
(fn []
|
||||
|
|
|
|||
|
|
@ -621,9 +621,10 @@
|
|||
[:> comment-content* {:content (:content item)}]]
|
||||
|
||||
[:div {:class (stl/css :replies)}
|
||||
(let [total-comments (:count-comments item 1)
|
||||
total-replies (dec total-comments)
|
||||
unread-replies (:count-unread-comments item 0)]
|
||||
(let [total-comments (:count-comments item)
|
||||
unread-comments (:count-unread-comments item)
|
||||
total-replies (dec total-comments)
|
||||
unread-replies (if (= unread-comments total-comments) (dec unread-comments) unread-comments)]
|
||||
[:*
|
||||
(when (> total-replies 0)
|
||||
(if (= total-replies 1)
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
(:require
|
||||
[app.common.data.macros :as dm]
|
||||
[app.main.data.common :as dcm]
|
||||
[app.main.data.helpers :as dsh]
|
||||
[app.main.data.persistence :as dps]
|
||||
[app.main.data.plugins :as dpl]
|
||||
[app.main.data.workspace :as dw]
|
||||
|
|
@ -43,13 +42,6 @@
|
|||
[okulary.core :as l]
|
||||
[rumext.v2 :as mf]))
|
||||
|
||||
(defn- make-workspace-ready-ref
|
||||
[file-id]
|
||||
(l/derived (fn [state]
|
||||
(and (= file-id (:workspace-ready state))
|
||||
(some? (dsh/lookup-file-data state file-id))))
|
||||
st/state))
|
||||
|
||||
(mf/defc workspace-content*
|
||||
{::mf/private true}
|
||||
[{:keys [file layout page wglobal]}]
|
||||
|
|
@ -129,35 +121,32 @@
|
|||
|
||||
(mf/defc workspace-page*
|
||||
{::mf/private true}
|
||||
[{:keys [page-id file layout wglobal]}]
|
||||
(let [page-id (hooks/use-equal-memo page-id)
|
||||
page (mf/deref refs/workspace-page)]
|
||||
[{:keys [page-id file-id file layout wglobal]}]
|
||||
(let [page (mf/deref refs/workspace-page)]
|
||||
|
||||
(mf/with-effect []
|
||||
(let [focus-out #(st/emit! (dw/workspace-focus-lost))
|
||||
key (events/listen globals/window "blur" focus-out)]
|
||||
(partial events/unlistenByKey key)))
|
||||
|
||||
(mf/with-effect [page-id]
|
||||
(if (some? page-id)
|
||||
(st/emit! (dw/initialize-page page-id))
|
||||
(st/emit! (dcm/go-to-workspace ::rt/replace true)))
|
||||
|
||||
(mf/with-effect [file-id page-id]
|
||||
(st/emit! (dw/initialize-page file-id page-id))
|
||||
(fn []
|
||||
(when (some? page-id)
|
||||
(st/emit! (dw/finalize-page page-id)))))
|
||||
(when page-id
|
||||
(st/emit! (dw/finalize-page file-id page-id)))))
|
||||
|
||||
(if (some? page)
|
||||
[:> workspace-content* {:file file
|
||||
:page page
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:& workspace-loader*])))
|
||||
|
||||
[:> workspace-loader*])))
|
||||
|
||||
(def ^:private ref:file-without-data
|
||||
(l/derived (fn [file]
|
||||
(dissoc file :data))
|
||||
(-> file
|
||||
(dissoc :data)
|
||||
(assoc ::has-data (contains? file :data))))
|
||||
refs/file
|
||||
=))
|
||||
|
||||
|
|
@ -181,10 +170,6 @@
|
|||
read-only? (mf/deref refs/workspace-read-only?)
|
||||
read-only? (or read-only? (not (:can-edit permissions)))
|
||||
|
||||
ready* (mf/with-memo [file-id]
|
||||
(make-workspace-ready-ref file-id))
|
||||
ready? (mf/deref ready*)
|
||||
|
||||
design-tokens? (features/use-feature "design-tokens/v1")
|
||||
|
||||
background-color (:background-color wglobal)]
|
||||
|
|
@ -207,6 +192,10 @@
|
|||
(st/emit! ::dps/force-persist
|
||||
(dw/finalize-workspace file-id))))
|
||||
|
||||
(mf/with-effect [file page-id]
|
||||
(when-not page-id
|
||||
(st/emit! (dcm/go-to-workspace :file-id file-id ::rt/replace true))))
|
||||
|
||||
[:> (mf/provider ctx/current-project-id) {:value project-id}
|
||||
[:> (mf/provider ctx/current-file-id) {:value file-id}
|
||||
[:> (mf/provider ctx/current-page-id) {:value page-id}
|
||||
|
|
@ -219,9 +208,11 @@
|
|||
:touch-action "none"}}
|
||||
[:> context-menu*]
|
||||
|
||||
(if ^boolean ready?
|
||||
[:> workspace-page* {:page-id page-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
(if (::has-data file)
|
||||
[:> workspace-page*
|
||||
{:page-id page-id
|
||||
:file-id file-id
|
||||
:file file
|
||||
:wglobal wglobal
|
||||
:layout layout}]
|
||||
[:> workspace-loader*])]]]]]]]))
|
||||
|
|
|
|||
|
|
@ -403,104 +403,104 @@
|
|||
:h h :s s :v v
|
||||
:alpha (/ alpha 255)}))))
|
||||
|
||||
[:div {:class (stl/css :colorpicker)
|
||||
:ref node-ref
|
||||
:style {:touch-action "none"}}
|
||||
[:div {:class (stl/css :top-actions)}
|
||||
[:div {:class (stl/css :top-actions-right)}
|
||||
(when (= :gradient selected-mode)
|
||||
[:div {:class (stl/css :opacity-input-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)} "%"]
|
||||
[:> numeric-input*
|
||||
{:value (-> data :opacity opacity->string)
|
||||
:on-change handle-change-gradient-opacity
|
||||
:default 100
|
||||
:min 0
|
||||
:max 100}]])
|
||||
[:*
|
||||
[:div {:class (stl/css :colorpicker)
|
||||
:ref node-ref
|
||||
:style {:touch-action "none"}}
|
||||
[:div {:class (stl/css :top-actions)}
|
||||
[:div {:class (stl/css :top-actions-right)}
|
||||
(when (= :gradient selected-mode)
|
||||
[:div {:class (stl/css :opacity-input-wrapper)}
|
||||
[:span {:class (stl/css :icon-text)} "%"]
|
||||
[:> numeric-input*
|
||||
{:value (-> data :opacity opacity->string)
|
||||
:on-change handle-change-gradient-opacity
|
||||
:default 100
|
||||
:min 0
|
||||
:max 100}]])
|
||||
|
||||
(when (or (not disable-gradient) (not disable-image))
|
||||
[:div {:class (stl/css :select)}
|
||||
[:& select
|
||||
{:default-value selected-mode
|
||||
:options options
|
||||
:on-change handle-change-mode}]])]
|
||||
(when (or (not disable-gradient) (not disable-image))
|
||||
[:div {:class (stl/css :select)}
|
||||
[:& select
|
||||
{:default-value selected-mode
|
||||
:options options
|
||||
:on-change handle-change-mode}]])]
|
||||
|
||||
(when (not= selected-mode :image)
|
||||
[:button {:class (stl/css-case :picker-btn true
|
||||
:selected picking-color?)
|
||||
:on-click handle-click-picker}
|
||||
i/picker])]
|
||||
(when (not= selected-mode :image)
|
||||
[:button {:class (stl/css-case :picker-btn true
|
||||
:selected picking-color?)
|
||||
:on-click handle-click-picker}
|
||||
i/picker])]
|
||||
|
||||
(when (= selected-mode :gradient)
|
||||
[:> gradients*
|
||||
{:type (:type state)
|
||||
:stops (:stops state)
|
||||
:editing-stop (:editing-stop state)
|
||||
:on-stop-edit-start handle-stop-edit-start
|
||||
:on-stop-edit-finish handle-stop-edit-finish
|
||||
:on-select-stop handle-change-gradient-selected-stop
|
||||
:on-change-type handle-change-gradient-type
|
||||
:on-change-stop handle-gradient-change-stop
|
||||
:on-add-stop-auto handle-gradient-add-stop-auto
|
||||
:on-add-stop-preview handle-gradient-add-stop-preview
|
||||
:on-remove-stop handle-gradient-remove-stop
|
||||
:on-rotate-stops handle-rotate-stops
|
||||
:on-reverse-stops handle-reverse-stops
|
||||
:on-reorder-stops handle-reorder-stops}])
|
||||
(when (= selected-mode :gradient)
|
||||
[:> gradients*
|
||||
{:type (:type state)
|
||||
:stops (:stops state)
|
||||
:editing-stop (:editing-stop state)
|
||||
:on-stop-edit-start handle-stop-edit-start
|
||||
:on-stop-edit-finish handle-stop-edit-finish
|
||||
:on-select-stop handle-change-gradient-selected-stop
|
||||
:on-change-type handle-change-gradient-type
|
||||
:on-change-stop handle-gradient-change-stop
|
||||
:on-add-stop-auto handle-gradient-add-stop-auto
|
||||
:on-add-stop-preview handle-gradient-add-stop-preview
|
||||
:on-remove-stop handle-gradient-remove-stop
|
||||
:on-rotate-stops handle-rotate-stops
|
||||
:on-reverse-stops handle-reverse-stops
|
||||
:on-reorder-stops handle-reorder-stops}])
|
||||
|
||||
(if (= selected-mode :image)
|
||||
(let [uri (cfg/resolve-file-media (:image current-color))
|
||||
keep-aspect-ratio? (-> current-color :image :keep-aspect-ratio)]
|
||||
[:div {:class (stl/css :select-image)}
|
||||
[:div {:class (stl/css :content)}
|
||||
(when (:image current-color)
|
||||
[:img {:src uri}])]
|
||||
(if (= selected-mode :image)
|
||||
(let [uri (cfg/resolve-file-media (:image current-color))
|
||||
keep-aspect-ratio? (-> current-color :image :keep-aspect-ratio)]
|
||||
[:div {:class (stl/css :select-image)}
|
||||
[:div {:class (stl/css :content)}
|
||||
(when (:image current-color)
|
||||
[:img {:src uri}])]
|
||||
|
||||
(when (some? (:image current-color))
|
||||
[:div {:class (stl/css :checkbox-option)}
|
||||
[:label {:for "keep-aspect-ratio"
|
||||
:class (stl/css-case :global/checked keep-aspect-ratio?)}
|
||||
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
|
||||
(when keep-aspect-ratio?
|
||||
i/status-tick)]
|
||||
(tr "media.keep-aspect-ratio")
|
||||
[:input {:type "checkbox"
|
||||
:id "keep-aspect-ratio"
|
||||
:checked keep-aspect-ratio?
|
||||
:on-change handle-change-keep-aspect-ratio}]]])
|
||||
[:button
|
||||
{:class (stl/css :choose-image)
|
||||
:title (tr "media.choose-image")
|
||||
:aria-label (tr "media.choose-image")
|
||||
:on-click on-fill-image-click}
|
||||
(tr "media.choose-image")
|
||||
[:& file-uploader
|
||||
{:input-id "fill-image-upload"
|
||||
:accept "image/jpeg,image/png"
|
||||
:multi false
|
||||
:ref fill-image-ref
|
||||
:on-selected on-fill-image-selected}]]])
|
||||
[:*
|
||||
[:div {:class (stl/css :colorpicker-tabs)}
|
||||
[:> tab-switcher* {:tabs tabs
|
||||
:default-selected "ramp"
|
||||
:on-change-tab on-change-tab}]]
|
||||
(when (some? (:image current-color))
|
||||
[:div {:class (stl/css :checkbox-option)}
|
||||
[:label {:for "keep-aspect-ratio"
|
||||
:class (stl/css-case :global/checked keep-aspect-ratio?)}
|
||||
[:span {:class (stl/css-case :global/checked keep-aspect-ratio?)}
|
||||
(when keep-aspect-ratio?
|
||||
i/status-tick)]
|
||||
(tr "media.keep-aspect-ratio")
|
||||
[:input {:type "checkbox"
|
||||
:id "keep-aspect-ratio"
|
||||
:checked keep-aspect-ratio?
|
||||
:on-change handle-change-keep-aspect-ratio}]]])
|
||||
[:button
|
||||
{:class (stl/css :choose-image)
|
||||
:title (tr "media.choose-image")
|
||||
:aria-label (tr "media.choose-image")
|
||||
:on-click on-fill-image-click}
|
||||
(tr "media.choose-image")
|
||||
[:& file-uploader
|
||||
{:input-id "fill-image-upload"
|
||||
:accept "image/jpeg,image/png"
|
||||
:multi false
|
||||
:ref fill-image-ref
|
||||
:on-selected on-fill-image-selected}]]])
|
||||
[:*
|
||||
[:div {:class (stl/css :colorpicker-tabs)}
|
||||
[:> tab-switcher* {:tabs tabs
|
||||
:default-selected "ramp"
|
||||
:on-change-tab on-change-tab}]]
|
||||
|
||||
[:& color-inputs
|
||||
{:type type
|
||||
:disable-opacity disable-opacity
|
||||
:color current-color
|
||||
:on-change handle-change-color}]
|
||||
|
||||
[:& libraries
|
||||
{:state state
|
||||
:current-color current-color
|
||||
:disable-gradient disable-gradient
|
||||
:disable-opacity disable-opacity
|
||||
:disable-image disable-image
|
||||
:on-select-color on-select-library-color
|
||||
:on-add-library-color on-add-library-color}]])
|
||||
[:& color-inputs
|
||||
{:type type
|
||||
:disable-opacity disable-opacity
|
||||
:color current-color
|
||||
:on-change handle-change-color}]
|
||||
|
||||
[:& libraries
|
||||
{:state state
|
||||
:current-color current-color
|
||||
:disable-gradient disable-gradient
|
||||
:disable-opacity disable-opacity
|
||||
:disable-image disable-image
|
||||
:on-select-color on-select-library-color
|
||||
:on-add-library-color on-add-library-color}]])]
|
||||
(when (fn? on-accept)
|
||||
[:div {:class (stl/css :actions)}
|
||||
[:button {:class (stl/css-case
|
||||
|
|
@ -520,32 +520,41 @@
|
|||
max-y (- vh h)
|
||||
rulers? (mf/deref refs/rulers?)
|
||||
left-offset (if rulers? 40 18)
|
||||
right-offset (+ w 40)]
|
||||
|
||||
right-offset (+ w 40)
|
||||
top-offset (dm/str (- y 70) "px")
|
||||
bottom-offset "1rem"
|
||||
max-height-top (str "calc(100vh - " top-offset)
|
||||
max-height-bottom (str "calc(100vh -" bottom-offset)]
|
||||
(cond
|
||||
(or (nil? x) (nil? y))
|
||||
#js {:left "auto" :right "16rem" :top "4rem"}
|
||||
#js {:left "auto" :right "16rem" :top "4rem" :maxHeight "calc(100vh - 4rem)"}
|
||||
|
||||
(= position :left)
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (- x right-offset) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (- x right-offset) "px")
|
||||
:top (dm/str (- y 70) "px")})
|
||||
:top top-offset
|
||||
:maxHeight max-height-top})
|
||||
|
||||
(= position :right)
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (+ x 80) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (+ x 80) "px")
|
||||
:top (dm/str (- y 70) "px")})
|
||||
:top top-offset
|
||||
:maxHeight max-height-top})
|
||||
|
||||
:else
|
||||
(if (> y max-y)
|
||||
#js {:left (dm/str (+ x left-offset) "px")
|
||||
:bottom "1rem"}
|
||||
:bottom bottom-offset
|
||||
:maxHeight max-height-bottom}
|
||||
#js {:left (dm/str (+ x left-offset) "px")
|
||||
:top (dm/str (- y 70) "px")}))))
|
||||
:top top-offset
|
||||
:maxHeight max-height-top}))))
|
||||
|
||||
(mf/defc colorpicker-modal
|
||||
{::mf/register modal/components
|
||||
|
|
|
|||
|
|
@ -13,10 +13,14 @@
|
|||
width: auto;
|
||||
padding: var(--sp-m);
|
||||
width: $sz-284;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.colorpicker {
|
||||
border-radius: $br-8;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.colorpicker-tabs {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue