3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-21 09:46:12 +02:00
Code Issues Projects Releases Packages Wiki Activity

Properly reinitialize alignment index when page metadata is updated.

Browse source
This commit is contained in:
Andrey Antukh 2016-12-01 19:14:50 +01:00
parent 0c3d1a5ded
commit a3a43d4b8a
No known key found for this signature in database
GPG key ID: 4DFEBCB8316A8B95
2 changed files with 57 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

16
frontend/src/uxbox/main/data/workspace.cljs
View file

@ -37,7 +37,7 @@
;; --- Initialize Workspace ;; --- Initialize Workspace
(declare initialize-alignment-index) (declare initialize-alignment)
(defrecord InitializeWorkspace [project page] (defrecord InitializeWorkspace [project page]
ptk/UpdateEvent ptk/UpdateEvent
@ -64,15 +64,17 @@
;; Activate loaded if page is not fetched. ;; Activate loaded if page is not fetched.
(when-not page (reset! st/loader true)) (when-not page (reset! st/loader true))
(println "initialize")
(rx/merge (rx/merge
(if page (if page
(rx/of (initialize-alignment-index page-id)) (rx/of (initialize-alignment page-id))
(rx/merge (rx/merge
(rx/of (udp/fetch-pages project)) (rx/of (udp/fetch-pages project))
(->> (rx/filter udp/pages-fetched? s) (->> (rx/filter udp/pages-fetched? s)
(rx/take 1) (rx/take 1)
(rx/do #(reset! st/loader false)) (rx/do #(reset! st/loader false))
(rx/map #(initialize-alignment-index page-id))))) (rx/map #(initialize-alignment page-id)))))
;; Initial history loading ;; Initial history loading
(rx/of (rx/of
@ -206,7 +208,7 @@
;; --- Initialize Alignment Index ;; --- Initialize Alignment Index
(defrecord InitializeAlignmentIndex [id] (defrecord InitializeAlignment [id]
ptk/WatchEvent ptk/WatchEvent
(watch [_ state s] (watch [_ state s]
(let [page (get-in state [:pages id]) (let [page (get-in state [:pages id])
@ -222,9 +224,9 @@
(when (:grid-alignment opts) (when (:grid-alignment opts)
(rx/of (activate-flag :grid-alignment))))))) (rx/of (activate-flag :grid-alignment)))))))
(defn initialize-alignment-index (defn initialize-alignment
[id] [id]
(InitializeAlignmentIndex. id)) (InitializeAlignment. id))
;; --- Update Metadata ;; --- Update Metadata
@ -234,7 +236,7 @@
ptk/WatchEvent ptk/WatchEvent
(watch [_ state s] (watch [_ state s]
(rx/of (udp/update-metadata id metadata) (rx/of (udp/update-metadata id metadata)
(initialize-alignment-index id)))) (initialize-alignment id))))
(defn update-metadata (defn update-metadata
[id metadata] [id metadata]

96
frontend/src/uxbox/main/ui/workspace/sidebar/options/page.cljs
View file

@ -11,6 +11,7 @@
[potok.core :as ptk] [potok.core :as ptk]
[uxbox.store :as st] [uxbox.store :as st]
[uxbox.main.data.pages :as udp] [uxbox.main.data.pages :as udp]
[uxbox.main.data.workspace :as udw]
[uxbox.main.data.lightbox :as udl] [uxbox.main.data.lightbox :as udl]
[uxbox.main.ui.icons :as i] [uxbox.main.ui.icons :as i]
[uxbox.main.ui.workspace.base :refer [page-ref]] [uxbox.main.ui.workspace.base :refer [page-ref]]
@ -93,52 +94,51 @@
(udp/update-metadata id) (udp/update-metadata id)
(st/emit!)))) (st/emit!))))
(on-magnet-change [] (on-magnet-change []
(let [checked? (dom/checked? (mx/ref-node own "magnet"))] (let [checked? (dom/checked? (mx/ref-node own "magnet"))
(->> (assoc metadata :grid-alignment checked?) metadata (assoc metadata :grid-alignment checked?)]
(udp/update-metadata id) (st/emit! (udw/update-metadata id metadata))))
(st/emit!)))) (show-color-picker [event]
(show-color-picker [event] (let [x (.-clientX event)
(let [x (.-clientX event) y (.-clientY event)
y (.-clientY event) opts {:x x :y y
opts {:x x :y y :transparent? true
:transparent? true :default "#cccccc"
:default "#cccccc" :attr :grid-color}]
:attr :grid-color}] (udl/open! :workspace/page-colorpicker opts)))]
(udl/open! :workspace/page-colorpicker opts)))] [:div.element-set
[:div.element-set [:div.element-set-title (:name menu)]
[:div.element-set-title (:name menu)] [:div.element-set-content
[:div.element-set-content [:span "Size"]
[:span "Size"] [:div.row-flex
[:div.row-flex [:div.input-element.pixels
[:div.input-element.pixels [:input.input-text
[:input.input-text {:type "number"
{:type "number" :ref "x-axis"
:ref "x-axis" :value (:grid-x-axis metadata 10)
:value (:grid-x-axis metadata 10) :on-change on-x-change
:on-change on-x-change :placeholder "x"}]]
:placeholder "x"}]] [:div.input-element.pixels
[:div.input-element.pixels [:input.input-text
[:input.input-text {:type "number"
{:type "number" :ref "y-axis"
:ref "y-axis" :value (:grid-y-axis metadata 10)
:value (:grid-y-axis metadata 10) :on-change on-y-change
:on-change on-y-change :placeholder "y"}]]]
:placeholder "y"}]]] [:span "Color"]
[:span "Color"] [:div.row-flex.color-dat
[:div.row-flex.color-dat [:span.color-th
[:span.color-th {:style {:background-color (:grid-color metadata "#cccccc")}
{:style {:background-color (:grid-color metadata "#cccccc")} :on-click show-color-picker}]
:on-click show-color-picker}] [:div.color-info
[:div.color-info [:span (:grid-color metadata "#cccccc")]]]
[:span (:grid-color metadata "#cccccc")]]]
[:span "Magnet option"] [:span "Magnet option"]
[:div.row-flex [:div.row-flex
[:div.input-checkbox.check-primary [:div.input-checkbox.check-primary
[:input [:input
{:type "checkbox" {:type "checkbox"
:ref "magnet" :ref "magnet"
:id "magnet" :id "magnet"
:on-change on-magnet-change :on-change on-magnet-change
:checked (when (:grid-alignment metadata) "checked")}] :checked (when (:grid-alignment metadata) "checked")}]
[:label {:for "magnet"} "Activate magnet"]]]]]))) [:label {:for "magnet"} "Activate magnet"]]]]])))