mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Properly refresh pages list on interactions sidebar menus.
And convert the interaction related components to use the defc/defcs macros.
This commit is contained in:
Andrey Antukh
parent
027b4a5d57
commit
7c4717fcfa
3 changed files with 303 additions and 420 deletions
|
|
@ -24,6 +24,14 @@
|
|||
(let [id (l/focus ul/selected-page state)]
|
||||
(get-in state [:pages id])))
|
||||
|
||||
(defn- resolve-project-pages
|
||||
[state]
|
||||
(let [project (get-in state [:workspace :project])
|
||||
get-order #(get-in % [:metadata :order])]
|
||||
(->> (vals (:pages state))
|
||||
(filter #(= project (:project %)))
|
||||
(sort-by get-order))))
|
||||
|
||||
(def workspace
|
||||
(l/derive ul/workspace st/state))
|
||||
|
||||
|
|
@ -32,6 +40,10 @@
|
|||
(-> (l/lens resolve-project)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def selected-project-pages
|
||||
(-> (l/lens resolve-project-pages)
|
||||
(l/derive st/state)))
|
||||
|
||||
(def selected-page
|
||||
"Ref to the current selected page."
|
||||
(-> (l/lens resolve-page)
|
||||
|
|
|
|||
|
|
@ -6,23 +6,20 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.interactions
|
||||
(:require [sablono.core :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.ui.workspace.sidebar.sitemap :refer (pages-ref)]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.main.ui.colorpicker :as cp]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]
|
||||
[uxbox.util.spec :refer (color?)]))
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.spec :refer [color?]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
|
@ -55,8 +52,8 @@
|
|||
;; :holdrelease "Hold release"
|
||||
(pr-str trigger)))
|
||||
|
||||
(defn- interactions-list-render
|
||||
[own shape form-ref]
|
||||
(mx/defc interactions-list
|
||||
[shape form-ref]
|
||||
(letfn [(on-edit [item event]
|
||||
(dom/prevent-default event)
|
||||
(reset! form-ref item))
|
||||
|
|
@ -68,75 +65,55 @@
|
|||
(dom/prevent-default event)
|
||||
(let [delete (partial delete item)]
|
||||
(udl/open! :confirm {:on-accept delete})))]
|
||||
(html
|
||||
[:ul.element-list
|
||||
(for [item (vals (:interactions shape))
|
||||
:let [key (pr-str (:id item))]]
|
||||
[:li {:key key}
|
||||
[:div.list-icon i/action]
|
||||
[:span (translate-trigger-name (:trigger item))]
|
||||
[:div.list-actions
|
||||
[:a {:on-click (partial on-edit item)} i/pencil]
|
||||
[:a {:on-click (partial on-delete item)} i/trash]]])])))
|
||||
|
||||
(def interactions-list
|
||||
(mx/component
|
||||
{:render interactions-list-render
|
||||
:name "interactions-list"
|
||||
:mixins [mx/static]}))
|
||||
[:ul.element-list
|
||||
(for [item (vals (:interactions shape))
|
||||
:let [key (pr-str (:id item))]]
|
||||
[:li {:key key}
|
||||
[:div.list-icon i/action]
|
||||
[:span (translate-trigger-name (:trigger item))]
|
||||
[:div.list-actions
|
||||
[:a {:on-click (partial on-edit item)} i/pencil]
|
||||
[:a {:on-click (partial on-delete item)} i/trash]]])]))
|
||||
|
||||
;; --- Trigger Input
|
||||
|
||||
(defn- trigger-input-render
|
||||
[own form-ref]
|
||||
(mx/defc trigger-input
|
||||
[form-ref]
|
||||
(when-not (:trigger @form-ref)
|
||||
(swap! form-ref assoc :trigger :click))
|
||||
(html
|
||||
[:div
|
||||
[:span "Trigger"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:placeholder "Choose a trigger"
|
||||
:on-change (partial on-change form-ref :trigger)
|
||||
:value (pr-str (:trigger @form-ref))}
|
||||
[:option {:value ":click"} "Click"]
|
||||
[:option {:value ":doubleclick"} "Double-click"]
|
||||
[:option {:value ":rightclick"} "Right-click"]
|
||||
[:option {:value ":hover"} "Hover"]
|
||||
[:option {:value ":mousein"} "Mouse in"]
|
||||
[:option {:value ":mouseout"} "Mouse out"]
|
||||
#_[:option {:value ":swiperight"} "Swipe right"]
|
||||
#_[:option {:value ":swipeleft"} "Swipe left"]
|
||||
#_[:option {:value ":swipedown"} "Swipe dpwn"]
|
||||
#_[:option {:value ":touchandhold"} "Touch and hold"]
|
||||
#_[:option {:value ":holdrelease"} "Hold release"]
|
||||
#_[:option {:value ":keypress"} "Key press"]
|
||||
#_[:option {:value ":pageisloaded"} "Page is loaded"]
|
||||
#_[:option {:value ":windowscroll"} "Window is scrolled to"]]]]))
|
||||
|
||||
(def trigger-input
|
||||
(mx/component
|
||||
{:render trigger-input-render
|
||||
:name "trigger-input"
|
||||
:mixins [mx/static]}))
|
||||
[:div
|
||||
[:span "Trigger"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:placeholder "Choose a trigger"
|
||||
:on-change (partial on-change form-ref :trigger)
|
||||
:value (pr-str (:trigger @form-ref))}
|
||||
[:option {:value ":click"} "Click"]
|
||||
[:option {:value ":doubleclick"} "Double-click"]
|
||||
[:option {:value ":rightclick"} "Right-click"]
|
||||
[:option {:value ":hover"} "Hover"]
|
||||
[:option {:value ":mousein"} "Mouse in"]
|
||||
[:option {:value ":mouseout"} "Mouse out"]
|
||||
#_[:option {:value ":swiperight"} "Swipe right"]
|
||||
#_[:option {:value ":swipeleft"} "Swipe left"]
|
||||
#_[:option {:value ":swipedown"} "Swipe dpwn"]
|
||||
#_[:option {:value ":touchandhold"} "Touch and hold"]
|
||||
#_[:option {:value ":holdrelease"} "Hold release"]
|
||||
#_[:option {:value ":keypress"} "Key press"]
|
||||
#_[:option {:value ":pageisloaded"} "Page is loaded"]
|
||||
#_[:option {:value ":windowscroll"} "Window is scrolled to"]]]])
|
||||
|
||||
;; --- URL Input
|
||||
|
||||
(defn- url-input-render
|
||||
[own form-ref]
|
||||
(html
|
||||
[:div
|
||||
[:span "Url"]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "http://"
|
||||
:on-change (partial on-change form-ref :url)
|
||||
:value (:url @form-ref "")
|
||||
:type "url"}]]]))
|
||||
|
||||
(def url-input
|
||||
(mx/component
|
||||
{:render url-input-render
|
||||
:name "url-input"}))
|
||||
(mx/defc url-input
|
||||
[form-ref]
|
||||
[:div
|
||||
[:span "Url"]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "http://"
|
||||
:on-change (partial on-change form-ref :url)
|
||||
:value (:url @form-ref "")
|
||||
:type "url"}]]])
|
||||
|
||||
;; --- Elements Input
|
||||
|
||||
|
|
@ -151,232 +128,179 @@
|
|||
(conj acc shape))))]
|
||||
(reduce resolve-shape [] shapes))))
|
||||
|
||||
(defn- elements-input-render
|
||||
[own page form-ref]
|
||||
(mx/defc elements-input
|
||||
[page form-ref]
|
||||
(let [shapes (collect-shapes @st/state page)]
|
||||
(html
|
||||
[:div
|
||||
[:span "Element"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Choose an element"
|
||||
:on-change (partial on-change form-ref :element)
|
||||
:value (pr-str (:element @form-ref))}
|
||||
[:option {:value "nil"} "---"]
|
||||
(for [shape shapes
|
||||
:let [key (pr-str (:id shape))]]
|
||||
[:option {:key key :value key} (:name shape)])]]])))
|
||||
|
||||
(def elements-input
|
||||
(mx/component
|
||||
{:render elements-input-render
|
||||
:name "elements-input"}))
|
||||
[:div
|
||||
[:span "Element"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Choose an element"
|
||||
:on-change (partial on-change form-ref :element)
|
||||
:value (pr-str (:element @form-ref))}
|
||||
[:option {:value "nil"} "---"]
|
||||
(for [shape shapes
|
||||
:let [key (pr-str (:id shape))]]
|
||||
[:option {:key key :value key} (:name shape)])]]]))
|
||||
|
||||
;; --- Page Input
|
||||
|
||||
(defn- pages-input-render
|
||||
[own form-ref path]
|
||||
(let [pages @pages-ref]
|
||||
(mx/defc pages-input
|
||||
{:mixins [mx/reactive]}
|
||||
[form-ref path]
|
||||
;; FIXME: react on ref
|
||||
(let [pages (mx/react refs/selected-project-pages)]
|
||||
(when (and (not (:page @form-ref))
|
||||
(pos? (count pages)))
|
||||
(swap! form-ref assoc :page (:id (first pages))))
|
||||
(html
|
||||
[:div
|
||||
[:span "Page"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:placeholder "Choose a page"
|
||||
:on-change (partial on-change form-ref :page)
|
||||
:value (pr-str (:page @form-ref))}
|
||||
(for [page pages
|
||||
:let [key (:index page)]]
|
||||
[:option {:key key :value key} (:name page)])]]])))
|
||||
|
||||
(def pages-input
|
||||
(mx/component
|
||||
{:render pages-input-render
|
||||
:name "pages-input"}))
|
||||
[:div
|
||||
[:span "Page"]
|
||||
[:div.row-flex
|
||||
[:select.input-select {:placeholder "Choose a page"
|
||||
:on-change (partial on-change form-ref :page)
|
||||
:value (pr-str (:page @form-ref))}
|
||||
(for [page pages
|
||||
:let [key (pr-str (:id page))]]
|
||||
[:option {:key key :value key} (:name page)])]]]))
|
||||
|
||||
;; --- Animation
|
||||
|
||||
(defn- animation-input-render
|
||||
[own form-ref]
|
||||
(mx/defc animation-input
|
||||
[form-ref]
|
||||
(when-not (:action @form-ref)
|
||||
(swap! form-ref assoc :animation :none))
|
||||
(html
|
||||
[:div
|
||||
[:span "Animation"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Animation"
|
||||
:on-change (partial on-change form-ref :animation)
|
||||
:value (pr-str (:animation @form-ref))}
|
||||
[:option {:value ":none"} "None"]
|
||||
[:option {:value ":fade"} "Fade"]
|
||||
[:option {:value ":slide"} "Slide"]]]]))
|
||||
|
||||
(def animation-input
|
||||
(mx/component
|
||||
{:render animation-input-render
|
||||
:name "animation-input"}))
|
||||
[:div
|
||||
[:span "Animation"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Animation"
|
||||
:on-change (partial on-change form-ref :animation)
|
||||
:value (pr-str (:animation @form-ref))}
|
||||
[:option {:value ":none"} "None"]
|
||||
[:option {:value ":fade"} "Fade"]
|
||||
[:option {:value ":slide"} "Slide"]]]])
|
||||
|
||||
;; --- MoveTo Input
|
||||
|
||||
(defn- moveto-input-render
|
||||
[own form-ref]
|
||||
(mx/defc moveto-input
|
||||
[form-ref]
|
||||
(when-not (:moveto-x @form-ref)
|
||||
(swap! form-ref assoc :moveto-x 0))
|
||||
(when-not (:moveto-y @form-ref)
|
||||
(swap! form-ref assoc :moveto-y 0))
|
||||
(html
|
||||
[:div
|
||||
[:span "Move to position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:on-change (partial on-change form-ref :moveto-x)
|
||||
:type "number"
|
||||
:value (:moveto-x @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:on-change (partial on-change form-ref :moveto-y)
|
||||
:type "number"
|
||||
:value (:moveto-y @form-ref "")}]]]]))
|
||||
|
||||
(def moveto-input
|
||||
(mx/component
|
||||
{:render moveto-input-render
|
||||
:name "moveto-input"}))
|
||||
[:div
|
||||
[:span "Move to position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:on-change (partial on-change form-ref :moveto-x)
|
||||
:type "number"
|
||||
:value (:moveto-x @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:on-change (partial on-change form-ref :moveto-y)
|
||||
:type "number"
|
||||
:value (:moveto-y @form-ref "")}]]]])
|
||||
|
||||
;; --- MoveBy Input
|
||||
|
||||
(defn- moveby-input-render
|
||||
[own form-ref]
|
||||
(mx/defc moveby-input
|
||||
[form-ref]
|
||||
(when-not (:moveby-x @form-ref)
|
||||
(swap! form-ref assoc :moveby-x 0))
|
||||
(when-not (:moveby-y @form-ref)
|
||||
(swap! form-ref assoc :moveby-y 0))
|
||||
(html
|
||||
[:div
|
||||
[:span "Move to position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:on-change (partial on-change form-ref :moveby-x)
|
||||
:type "number"
|
||||
:value (:moveby-x @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:on-change (partial on-change form-ref :moveby-y)
|
||||
:type "number"
|
||||
:value (:moveby-y @form-ref "")}]]]]))
|
||||
|
||||
(def moveby-input
|
||||
(mx/component
|
||||
{:render moveby-input-render
|
||||
:name "moveby-input"}))
|
||||
[:div
|
||||
[:span "Move to position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:on-change (partial on-change form-ref :moveby-x)
|
||||
:type "number"
|
||||
:value (:moveby-x @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:on-change (partial on-change form-ref :moveby-y)
|
||||
:type "number"
|
||||
:value (:moveby-y @form-ref "")}]]]])
|
||||
|
||||
;; --- Opacity Input
|
||||
|
||||
(defn- opacity-input-render
|
||||
[own form-ref]
|
||||
(mx/defc opacity-input
|
||||
[form-ref]
|
||||
(when-not (:opacity @form-ref)
|
||||
(swap! form-ref assoc :opacity 100))
|
||||
(html
|
||||
[:div
|
||||
[:span "Opacity"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text
|
||||
{:placeholder "%"
|
||||
:on-change (partial on-change form-ref :opacity)
|
||||
:min "0"
|
||||
:max "100"
|
||||
:type "number"
|
||||
:value (:opacity @form-ref "")}]]]]))
|
||||
|
||||
(def opacity-input
|
||||
(mx/component
|
||||
{:render opacity-input-render
|
||||
:name "opacity-input"}))
|
||||
[:div
|
||||
[:span "Opacity"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.percentail
|
||||
[:input.input-text
|
||||
{:placeholder "%"
|
||||
:on-change (partial on-change form-ref :opacity)
|
||||
:min "0"
|
||||
:max "100"
|
||||
:type "number"
|
||||
:value (:opacity @form-ref "")}]]]])
|
||||
|
||||
;; --- Rotate Input
|
||||
|
||||
(defn rotate-input-render
|
||||
[own form-ref]
|
||||
(html
|
||||
[:div
|
||||
[:span "Rotate (dg)"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder "dg"
|
||||
:on-change (partial on-change form-ref :rotation)
|
||||
:type "number"
|
||||
:value (:rotation @form-ref "")}]]]]))
|
||||
|
||||
(def rotate-input
|
||||
(mx/component
|
||||
{:render rotate-input-render
|
||||
:name "rotate-input"}))
|
||||
(mx/defc rotate-input
|
||||
[form-ref]
|
||||
[:div
|
||||
[:span "Rotate (dg)"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder "dg"
|
||||
:on-change (partial on-change form-ref :rotation)
|
||||
:type "number"
|
||||
:value (:rotation @form-ref "")}]]]])
|
||||
|
||||
;; --- Resize Input
|
||||
|
||||
(defn- resize-input-render
|
||||
[own form-ref]
|
||||
(html
|
||||
[:div
|
||||
[:span "Resize"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Width"
|
||||
:on-change (partial on-change form-ref :resize-width)
|
||||
:type "number"
|
||||
:value (:resize-width @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Height"
|
||||
:on-change (partial on-change form-ref :resize-height)
|
||||
:type "number"
|
||||
:value (:resize-height @form-ref "")}]]]]))
|
||||
|
||||
(def resize-input
|
||||
(mx/component
|
||||
{:render resize-input-render
|
||||
:name "resize-input"}))
|
||||
(mx/defc resize-input
|
||||
[form-ref]
|
||||
[:div
|
||||
[:span "Resize"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Width"
|
||||
:on-change (partial on-change form-ref :resize-width)
|
||||
:type "number"
|
||||
:value (:resize-width @form-ref "")}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Height"
|
||||
:on-change (partial on-change form-ref :resize-height)
|
||||
:type "number"
|
||||
:value (:resize-height @form-ref "")}]]]])
|
||||
|
||||
;; --- Color Input
|
||||
|
||||
(defn- colorpicker-render
|
||||
[own {:keys [x y on-change value]}]
|
||||
(mx/defc colorpicker
|
||||
[{:keys [x y on-change value]}]
|
||||
(let [left (- x 260)
|
||||
top (- y 50)]
|
||||
(html
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str left "px")
|
||||
:top (str top "px")}}
|
||||
[:div.colorpicker-tooltip
|
||||
{:style {:left (str left "px")
|
||||
:top (str top "px")}}
|
||||
|
||||
(cp/colorpicker
|
||||
:theme :small
|
||||
:value value
|
||||
:on-change on-change)])))
|
||||
|
||||
(def ^:private colorpicker
|
||||
(mx/component
|
||||
{:render colorpicker-render
|
||||
:name "colorpicker"
|
||||
:mixins [mx/reactive mx/static]}))
|
||||
(cp/colorpicker
|
||||
:theme :small
|
||||
:value value
|
||||
:on-change on-change)]))
|
||||
|
||||
(defmethod lbx/render-lightbox :interactions/colorpicker
|
||||
[params]
|
||||
(colorpicker params))
|
||||
|
||||
(defn- color-input-render
|
||||
[own form-ref]
|
||||
(mx/defc color-input
|
||||
[form-ref]
|
||||
(when-not (:fill-color @form-ref)
|
||||
(swap! form-ref assoc :fill-color "#000000"))
|
||||
(when-not (:stroke-color @form-ref)
|
||||
|
|
@ -401,157 +325,132 @@
|
|||
(udl/open! :interactions/colorpicker opts)))]
|
||||
(let [stroke-color (:stroke-color @form-ref)
|
||||
fill-color (:fill-color @form-ref)]
|
||||
(html
|
||||
[:div
|
||||
[:div.row-flex
|
||||
[:div.column-half
|
||||
[:span "Fill"]
|
||||
[:div.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color fill-color}
|
||||
:on-click (partial show-picker :fill-color)}]
|
||||
[:div.color-info
|
||||
[:input
|
||||
{:on-change on-change-fill-color
|
||||
:value fill-color}]]]]
|
||||
[:div.column-half
|
||||
[:span "Stroke"]
|
||||
[:div.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color stroke-color}
|
||||
:on-click (partial show-picker :stroke-color)}]
|
||||
[:div.color-info
|
||||
[:input
|
||||
{:on-change on-change-stroke-color
|
||||
:value stroke-color}]]]]]]))))
|
||||
|
||||
(def color-input
|
||||
(mx/component
|
||||
{:render color-input-render
|
||||
:name "color-input"}))
|
||||
[:div
|
||||
[:div.row-flex
|
||||
[:div.column-half
|
||||
[:span "Fill"]
|
||||
[:div.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color fill-color}
|
||||
:on-click (partial show-picker :fill-color)}]
|
||||
[:div.color-info
|
||||
[:input
|
||||
{:on-change on-change-fill-color
|
||||
:value fill-color}]]]]
|
||||
[:div.column-half
|
||||
[:span "Stroke"]
|
||||
[:div.color-data
|
||||
[:span.color-th
|
||||
{:style {:background-color stroke-color}
|
||||
:on-click (partial show-picker :stroke-color)}]
|
||||
[:div.color-info
|
||||
[:input
|
||||
{:on-change on-change-stroke-color
|
||||
:value stroke-color}]]]]]])))
|
||||
|
||||
;; --- Easing Input
|
||||
|
||||
(defn- easing-input-render
|
||||
[own form-ref]
|
||||
(mx/defc easing-input
|
||||
[form-ref]
|
||||
(when-not (:easing @form-ref)
|
||||
(swap! form-ref assoc :easing :linear))
|
||||
(html
|
||||
[:div
|
||||
[:span "Easing"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Easing"
|
||||
:on-change (partial on-change form-ref :easing)
|
||||
:value (pr-str (:easing @form-ref))}
|
||||
[:option {:value ":linear"} "Linear"]
|
||||
[:option {:value ":easein"} "Ease in"]
|
||||
[:option {:value ":easeout"} "Ease out"]
|
||||
[:option {:value ":easeinout"} "Ease in out"]]]]))
|
||||
|
||||
(def easing-input
|
||||
(mx/component
|
||||
{:render easing-input-render
|
||||
:name "easing-input"}))
|
||||
[:div
|
||||
[:span "Easing"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Easing"
|
||||
:on-change (partial on-change form-ref :easing)
|
||||
:value (pr-str (:easing @form-ref))}
|
||||
[:option {:value ":linear"} "Linear"]
|
||||
[:option {:value ":easein"} "Ease in"]
|
||||
[:option {:value ":easeout"} "Ease out"]
|
||||
[:option {:value ":easeinout"} "Ease in out"]]]])
|
||||
|
||||
;; --- Duration Input
|
||||
|
||||
(defn- duration-input-render
|
||||
[own form-ref]
|
||||
(mx/defc duration-input
|
||||
[form-ref]
|
||||
(when-not (:duration @form-ref)
|
||||
(swap! form-ref assoc :duration 300))
|
||||
(when-not (:delay @form-ref)
|
||||
(swap! form-ref assoc :delay 0))
|
||||
(html
|
||||
[:div
|
||||
[:span "Duration | Delay"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.miliseconds
|
||||
[:input.input-text
|
||||
{:placeholder "Duration"
|
||||
:type "number"
|
||||
:on-change (partial on-change form-ref :duration)
|
||||
:value (pr-str (:duration @form-ref))}]]
|
||||
[:div.input-element.miliseconds
|
||||
[:input.input-text {:placeholder "Delay"
|
||||
[:div
|
||||
[:span "Duration | Delay"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.miliseconds
|
||||
[:input.input-text
|
||||
{:placeholder "Duration"
|
||||
:type "number"
|
||||
:on-change (partial on-change form-ref :duration)
|
||||
:value (pr-str (:duration @form-ref))}]]
|
||||
[:div.input-element.miliseconds
|
||||
[:input.input-text {:placeholder "Delay"
|
||||
:type "number"
|
||||
:on-change (partial on-change form-ref :delay)
|
||||
:value (pr-str (:delay @form-ref))}]]]]))
|
||||
|
||||
(def duration-input
|
||||
(mx/component
|
||||
{:render duration-input-render
|
||||
:name "duration-input"}))
|
||||
:value (pr-str (:delay @form-ref))}]]]])
|
||||
|
||||
;; --- Action Input
|
||||
|
||||
(defn- action-input-render
|
||||
[own page form-ref]
|
||||
(mx/defc action-input
|
||||
[page form-ref]
|
||||
(when-not (:action @form-ref)
|
||||
(swap! form-ref assoc :action :show))
|
||||
|
||||
(let [form @form-ref
|
||||
simple? #{:gotourl :gotopage}
|
||||
elements? (complement simple?)
|
||||
animation? #{:show :hide :toggle}
|
||||
only-easing? (complement animation?)]
|
||||
(html
|
||||
[:div
|
||||
[:span "Action"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Choose an action"
|
||||
:on-change (partial on-change form-ref :action [:trigger])
|
||||
:value (pr-str (:action form))}
|
||||
[:option {:value ":show"} "Show"]
|
||||
[:option {:value ":hide"} "Hide"]
|
||||
[:option {:value ":toggle"} "Toggle"]
|
||||
;; [:option {:value ":moveto"} "Move to"]
|
||||
[:option {:value ":moveby"} "Move by"]
|
||||
[:option {:value ":opacity"} "Opacity"]
|
||||
[:option {:value ":size"} "Size"]
|
||||
[:option {:value ":color"} "Color"]
|
||||
;; [:option {:value ":rotate"} "Rotate"]
|
||||
[:option {:value ":gotopage"} "Go to page"]
|
||||
[:option {:value ":gotourl"} "Go to URL"]
|
||||
#_[:option {:value ":goback"} "Go back"]
|
||||
[:option {:value ":scrolltoelement"} "Scroll to element"]]]
|
||||
[:div
|
||||
[:span "Action"]
|
||||
[:div.row-flex
|
||||
[:select.input-select
|
||||
{:placeholder "Choose an action"
|
||||
:on-change (partial on-change form-ref :action [:trigger])
|
||||
:value (pr-str (:action form))}
|
||||
[:option {:value ":show"} "Show"]
|
||||
[:option {:value ":hide"} "Hide"]
|
||||
[:option {:value ":toggle"} "Toggle"]
|
||||
;; [:option {:value ":moveto"} "Move to"]
|
||||
[:option {:value ":moveby"} "Move by"]
|
||||
[:option {:value ":opacity"} "Opacity"]
|
||||
[:option {:value ":size"} "Size"]
|
||||
[:option {:value ":color"} "Color"]
|
||||
;; [:option {:value ":rotate"} "Rotate"]
|
||||
[:option {:value ":gotopage"} "Go to page"]
|
||||
[:option {:value ":gotourl"} "Go to URL"]
|
||||
#_[:option {:value ":goback"} "Go back"]
|
||||
[:option {:value ":scrolltoelement"} "Scroll to element"]]]
|
||||
|
||||
(case (:action form)
|
||||
:gotourl (url-input form-ref)
|
||||
:gotopage (pages-input form-ref)
|
||||
:color (color-input form-ref)
|
||||
;; :rotate (rotate-input form-ref)
|
||||
:size (resize-input form-ref)
|
||||
:moveto (moveto-input form-ref)
|
||||
:moveby (moveby-input form-ref)
|
||||
:opacity (opacity-input form-ref)
|
||||
nil)
|
||||
(case (:action form)
|
||||
:gotourl (url-input form-ref)
|
||||
:gotopage (pages-input form-ref)
|
||||
:color (color-input form-ref)
|
||||
;; :rotate (rotate-input form-ref)
|
||||
:size (resize-input form-ref)
|
||||
:moveto (moveto-input form-ref)
|
||||
:moveby (moveby-input form-ref)
|
||||
:opacity (opacity-input form-ref)
|
||||
nil)
|
||||
|
||||
(when (elements? (:action form))
|
||||
(elements-input page form-ref))
|
||||
(when (elements? (:action form))
|
||||
(elements-input page form-ref))
|
||||
|
||||
(when (and (animation? (:action form))
|
||||
(:element @form-ref))
|
||||
(animation-input form-ref))
|
||||
(when (and (animation? (:action form))
|
||||
(:element @form-ref))
|
||||
(animation-input form-ref))
|
||||
|
||||
(when (or (not= (:animation form :none) :none)
|
||||
(and (only-easing? (:action form))
|
||||
(:element form)))
|
||||
(mx/concat
|
||||
(easing-input form-ref)
|
||||
(duration-input form-ref)))
|
||||
])))
|
||||
|
||||
(def action-input
|
||||
(mx/component
|
||||
{:render action-input-render
|
||||
:name "action-input"}))
|
||||
(when (or (not= (:animation form :none) :none)
|
||||
(and (only-easing? (:action form))
|
||||
(:element form)))
|
||||
(mx/concat
|
||||
(easing-input form-ref)
|
||||
(duration-input form-ref)))
|
||||
]))
|
||||
|
||||
;; --- Form
|
||||
|
||||
(defn- interactions-form-render
|
||||
[own shape form-ref]
|
||||
(mx/defc interactions-form
|
||||
[shape form-ref]
|
||||
(letfn [(on-submit [event]
|
||||
(dom/prevent-default event)
|
||||
(let [shape-id (:id shape)
|
||||
|
|
@ -561,48 +460,35 @@
|
|||
(on-cancel [event]
|
||||
(dom/prevent-default event)
|
||||
(reset! form-ref nil))]
|
||||
(html
|
||||
[:form {:on-submit on-submit}
|
||||
(trigger-input form-ref)
|
||||
(action-input (:page shape) form-ref)
|
||||
[:div.row-flex
|
||||
[:input.btn-primary.btn-small.save-btn
|
||||
[:form {:on-submit on-submit}
|
||||
(trigger-input form-ref)
|
||||
(action-input (:page shape) form-ref)
|
||||
[:div.row-flex
|
||||
[:input.btn-primary.btn-small.save-btn
|
||||
{:value "Save" :type "submit"}]
|
||||
[:a.cancel-btn {:on-click on-cancel}
|
||||
"Cancel"]]])))
|
||||
|
||||
(def interactions-form
|
||||
(mx/component
|
||||
{:render interactions-form-render
|
||||
:name "interactions-form"}))
|
||||
[:a.cancel-btn {:on-click on-cancel}
|
||||
"Cancel"]]]))
|
||||
|
||||
;; --- Interactions Menu
|
||||
|
||||
(defn- interactions-menu-render
|
||||
(mx/defcs interactions-menu
|
||||
{:mixins [mx/static (mx/local)]}
|
||||
[own menu shape]
|
||||
(let [local (:rum/local own)
|
||||
form-ref (l/derive (l/key :form) local)
|
||||
interactions (:interactions shape)
|
||||
create-interaction #(reset! form-ref {})]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
(if @form-ref
|
||||
(interactions-form shape form-ref)
|
||||
[:div
|
||||
(interactions-list shape form-ref)
|
||||
[:input.btn-primary.btn-small
|
||||
{:value "New interaction"
|
||||
:on-click create-interaction
|
||||
:type "button"}]])]])))
|
||||
|
||||
(def interactions-menu
|
||||
(mx/component
|
||||
{:render interactions-menu-render
|
||||
:name "interactions-menu"
|
||||
:mixins [mx/static (mx/local)]}))
|
||||
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
(if @form-ref
|
||||
(interactions-form shape form-ref)
|
||||
[:div
|
||||
(interactions-list shape form-ref)
|
||||
[:input.btn-primary.btn-small
|
||||
{:value "New interaction"
|
||||
:on-click create-interaction
|
||||
:type "button"}]])]]))
|
||||
|
||||
;; --- Not implemented stuff
|
||||
|
||||
|
|
|
|||
|
|
@ -24,21 +24,6 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
(defn- resolve-pages
|
||||
[state]
|
||||
(let [project (get-in state [:workspace :project])]
|
||||
(->> (vals (:pages state))
|
||||
(filter #(= project (:project %)))
|
||||
(sort-by #(get-in % [:metadata :order])))))
|
||||
|
||||
(def pages-ref
|
||||
(-> (l/lens resolve-pages)
|
||||
(l/derive st/state)))
|
||||
|
||||
;; --- Component
|
||||
|
||||
(mx/defcs page-item
|
||||
{:mixins [(mx/local) mx/static mx/reactive]}
|
||||
[{:keys [rum/local] :as own} page total active?]
|
||||
|
|
@ -120,7 +105,7 @@
|
|||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(let [project (mx/react refs/selected-project)
|
||||
pages (mx/react pages-ref)
|
||||
pages (mx/react refs/selected-project-pages)
|
||||
current (mx/react refs/selected-page)
|
||||
create #(udl/open! :page-form {:page {:project (:id project)}})
|
||||
close #(st/emit! (dw/toggle-flag :sitemap))]
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue