mirror of
https://github.com/penpot/penpot.git
synced 2025-03-12 07:41:43 -05:00
Remove all usage of mx/component and replace that with rumext.
This commit is contained in:
parent
491d91b1ee
commit
671c2d912c
78 changed files with 328 additions and 503 deletions
|
@ -18,11 +18,12 @@
|
|||
|
||||
;; Runtime
|
||||
[com.cognitect/transit-cljs "0.8.239"]
|
||||
|
||||
[funcool/rumext "1.0.0"]
|
||||
[rum "0.10.8" :exclusions [cljsjs/react cljsjs/react-dom]]
|
||||
;; [cljsjs/react-with-addons "15.4.2-2"]
|
||||
[cljsjs/react "15.4.2-2"]
|
||||
[cljsjs/react-dom "15.4.2-2"]
|
||||
[cljsjs/react-dom-server "15.4.2-2"]
|
||||
[cljsjs/react "15.5.0-0"]
|
||||
[cljsjs/react-dom "15.5.0-0"]
|
||||
[cljsjs/react-dom-server "15.5.0-0"]
|
||||
|
||||
[funcool/beicon "3.2.0"]
|
||||
[funcool/bide "1.4.0"]
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.streams :as streams]
|
||||
[uxbox.main.user-events :as uev]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
[potok.core :as ptk]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.streams :as streams]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.ui.shapes.path :refer [path-shape]]
|
||||
[uxbox.main.ui.shapes.circle :refer [circle-shape]]
|
||||
[uxbox.main.ui.shapes.image :refer [image-shape]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(def ^:dynamic *state* st/state)
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.data :refer [parse-int uuid-str?]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Constants
|
||||
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
(def form-data (fm/focus-data :login st/state))
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
(def form-data (fm/focus-data :recovery st/state))
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
(def form-data (fm/focus-data :recovery-request st/state))
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.router :as rt]))
|
||||
|
||||
(def form-data (fm/focus-data :register st/state))
|
||||
|
|
|
@ -5,12 +5,10 @@
|
|||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.main.ui.colorpicker
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
(:require [lentes.core :as l]
|
||||
[goog.events :as events]
|
||||
[uxbox.util.forms :as sc]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.data :as data]
|
||||
[uxbox.util.dom :as dom]
|
||||
|
@ -19,53 +17,45 @@
|
|||
|
||||
;; --- Picker Box
|
||||
|
||||
(defn- picker-box-render
|
||||
[own]
|
||||
(html
|
||||
[:svg {:width "100%" :height "100%" :version "1.1"}
|
||||
[:defs
|
||||
[:linearGradient {:id "gradient-black"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "0%" :y2 "0%"}
|
||||
[:stop {:offset "0%" :stopColor "#000000" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#CC9A81" :stopOpacity "0"}]]
|
||||
[:linearGradient {:id "gradient-white"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "100%" :y2 "100%"}
|
||||
[:stop {:offset "0%" :stopColor "#FFFFFF" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#CC9A81" :stopOpacity "0"}]]]
|
||||
[:rect {:x "0" :y "0" :width "100%" :height "100%"
|
||||
:fill "url(#gradient-white)"}]
|
||||
[:rect {:x "0" :y "0" :width "100%" :height "100%"
|
||||
:fill "url(#gradient-black)"}]]))
|
||||
|
||||
(def picker-box
|
||||
(mx/component
|
||||
{:render picker-box-render
|
||||
:name "picker-box"
|
||||
:mixins []}))
|
||||
(mx/defc picker-box
|
||||
[]
|
||||
[:svg {:width "100%" :height "100%" :version "1.1"}
|
||||
[:defs
|
||||
[:linearGradient {:id "gradient-black"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "0%" :y2 "0%"}
|
||||
[:stop {:offset "0%" :stopColor "#000000" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#CC9A81" :stopOpacity "0"}]]
|
||||
[:linearGradient {:id "gradient-white"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "100%" :y2 "100%"}
|
||||
[:stop {:offset "0%" :stopColor "#FFFFFF" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#CC9A81" :stopOpacity "0"}]]]
|
||||
[:rect {:x "0" :y "0" :width "100%" :height "100%"
|
||||
:fill "url(#gradient-white)"}]
|
||||
[:rect {:x "0" :y "0" :width "100%" :height "100%"
|
||||
:fill "url(#gradient-black)"}]])
|
||||
|
||||
;; --- Slider Box
|
||||
|
||||
(defn slider-box-render
|
||||
[own]
|
||||
(html
|
||||
[:svg {:width "100%" :height "100%" :version "1.1"}
|
||||
[:defs
|
||||
[:linearGradient {:id "gradient-hsv"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "0%" :y2 "0%"}
|
||||
[:stop {:offset "0%" :stopColor "#FF0000" :stopOpacity "1"}]
|
||||
[:stop {:offset "13%" :stopColor "#FF00FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "25%" :stopColor "#8000FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "38%" :stopColor "#0040FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "50%" :stopColor "#00FFFF" :stopOpacity "1"}]
|
||||
[:stop {:offset "63%" :stopColor "#00FF40" :stopOpacity "1"}]
|
||||
[:stop {:offset "75%" :stopColor "#0BED00" :stopOpacity "1"}]
|
||||
[:stop {:offset "88%" :stopColor "#FFFF00" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#FF0000" :stopOpacity "1"}]]]
|
||||
[:rect {:x 0 :y 0 :width "100%" :height "100%"
|
||||
:fill "url(#gradient-hsv)"}]]))
|
||||
(mx/defc slider-box
|
||||
[]
|
||||
[:svg {:width "100%" :height "100%" :version "1.1"}
|
||||
[:defs
|
||||
[:linearGradient {:id "gradient-hsv"
|
||||
:x1 "0%" :y1 "100%"
|
||||
:x2 "0%" :y2 "0%"}
|
||||
[:stop {:offset "0%" :stopColor "#FF0000" :stopOpacity "1"}]
|
||||
[:stop {:offset "13%" :stopColor "#FF00FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "25%" :stopColor "#8000FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "38%" :stopColor "#0040FF" :stopOpacity "1"}]
|
||||
[:stop {:offset "50%" :stopColor "#00FFFF" :stopOpacity "1"}]
|
||||
[:stop {:offset "63%" :stopColor "#00FF40" :stopOpacity "1"}]
|
||||
[:stop {:offset "75%" :stopColor "#0BED00" :stopOpacity "1"}]
|
||||
[:stop {:offset "88%" :stopColor "#FFFF00" :stopOpacity "1"}]
|
||||
[:stop {:offset "100%" :stopColor "#FF0000" :stopOpacity "1"}]]]
|
||||
[:rect {:x 0 :y 0 :width "100%" :height "100%"
|
||||
:fill "url(#gradient-hsv)"}]])
|
||||
|
||||
(def default-dimensions
|
||||
{:pi-height 5
|
||||
|
@ -83,12 +73,6 @@
|
|||
:p-width 170
|
||||
:s-height 170})
|
||||
|
||||
(def slider-box
|
||||
(mx/component
|
||||
{:render slider-box-render
|
||||
:name "slider-box"
|
||||
:mixins []}))
|
||||
|
||||
;; --- Color Picker
|
||||
|
||||
(defn- on-picker-click
|
||||
|
@ -116,11 +100,11 @@
|
|||
(swap! local assoc :color hsv)
|
||||
(on-change hex)))
|
||||
|
||||
(defn- colorpicker-render
|
||||
[own & {:keys [value on-change theme]
|
||||
:or {value "#d4edfb" theme :default}}]
|
||||
(let [local (:rum/local own)
|
||||
value-rgb (color/hex->rgb value)
|
||||
(mx/defcs colorpicker
|
||||
{:mixins [mx/static (mx/local)]}
|
||||
[{:keys [rum/local] :as own} & {:keys [value on-change theme]
|
||||
:or {value "#d4edfb" theme :default}}]
|
||||
(let [value-rgb (color/hex->rgb value)
|
||||
classes (case theme
|
||||
:default "theme-default"
|
||||
:small "theme-small")
|
||||
|
@ -161,68 +145,59 @@
|
|||
hex (color/rgb->hex rgb)]
|
||||
(when (color/hex? hex)
|
||||
(on-change hex))))]
|
||||
(html
|
||||
[:div.color-picker {:class classes}
|
||||
[:div.picker-area
|
||||
#_[:div.tester {:style {:width "100px" :height "100px"
|
||||
:border "1px solid black"
|
||||
:position "fixed" :top "50px" :left "50px"
|
||||
:backgroundColor (color/hsv->hex color)}}]
|
||||
[:div.picker-wrapper
|
||||
[:div.picker
|
||||
{:ref "picker"
|
||||
:on-click (partial on-picker-click local dimensions on-change color)
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-picker
|
||||
:style {:backgroundColor bg}}
|
||||
(picker-box)]
|
||||
(when-not (:mousedown @local)
|
||||
[:div.color-picker {:class classes}
|
||||
[:div.picker-area
|
||||
#_[:div.tester {:style {:width "100px" :height "100px"
|
||||
:border "1px solid black"
|
||||
:position "fixed" :top "50px" :left "50px"
|
||||
:backgroundColor (color/hsv->hex color)}}]
|
||||
[:div.picker-wrapper
|
||||
[:div.picker
|
||||
{:ref "picker"
|
||||
:on-click (partial on-picker-click local dimensions on-change color)
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-picker
|
||||
:style {:backgroundColor bg}}
|
||||
(picker-box)]
|
||||
(when-not (:mousedown @local)
|
||||
[:div.picker-indicator
|
||||
{:ref "picker-indicator"
|
||||
:style {:top (str pil "px")
|
||||
:left (str pit "px")
|
||||
:pointerEvents "none"}}])]
|
||||
[:div.slide-wrapper
|
||||
[:div.slide
|
||||
{:ref "slide"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-slide
|
||||
:on-click (partial on-slide-click local dimensions on-change color)}
|
||||
(slider-box)]
|
||||
[:div.slide-indicator
|
||||
{:ref "slide-indicator"
|
||||
:style {:top (str sit "px")
|
||||
:pointerEvents "none"}}]]]
|
||||
[:div.slide-wrapper
|
||||
[:div.slide
|
||||
{:ref "slide"
|
||||
:on-mouse-down on-mouse-down
|
||||
:on-mouse-up on-mouse-up
|
||||
:on-mouse-move on-mouse-move-slide
|
||||
:on-click (partial on-slide-click local dimensions on-change color)}
|
||||
(slider-box)]
|
||||
[:div.slide-indicator
|
||||
{:ref "slide-indicator"
|
||||
:style {:top (str sit "px")
|
||||
:pointerEvents "none"}}]]]
|
||||
|
||||
[:div.inputs-area
|
||||
[:div.inputs-area
|
||||
[:input.input-text
|
||||
{:placeholder "#"
|
||||
:type "text"
|
||||
:value value
|
||||
:on-change on-hex-changed}]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "#"
|
||||
:type "text"
|
||||
:value value
|
||||
:on-change on-hex-changed}]
|
||||
[:div.row-flex
|
||||
[:input.input-text
|
||||
{:placeholder "R"
|
||||
:on-change (partial on-rgb-change value-rgb 0)
|
||||
:value (nth value-rgb 0)
|
||||
:type "number"}]
|
||||
[:input.input-text
|
||||
{:placeholder "G"
|
||||
:on-change (partial on-rgb-change value-rgb 1)
|
||||
:value (nth value-rgb 1)
|
||||
:type "number"}]
|
||||
[:input.input-text
|
||||
{:placeholder "B"
|
||||
:on-change (partial on-rgb-change value-rgb 2)
|
||||
:value (nth value-rgb 2)
|
||||
:type "number"}]]]]))))
|
||||
|
||||
|
||||
|
||||
(def colorpicker
|
||||
(mx/component
|
||||
{:render colorpicker-render
|
||||
:name "colorpicker"
|
||||
:mixins [mx/static (mx/local)]}))
|
||||
{:placeholder "R"
|
||||
:on-change (partial on-rgb-change value-rgb 0)
|
||||
:value (nth value-rgb 0)
|
||||
:type "number"}]
|
||||
[:input.input-text
|
||||
{:placeholder "G"
|
||||
:on-change (partial on-rgb-change value-rgb 1)
|
||||
:value (nth value-rgb 1)
|
||||
:type "number"}]
|
||||
[:input.input-text
|
||||
{:placeholder "B"
|
||||
:on-change (partial on-rgb-change value-rgb 2)
|
||||
:value (nth value-rgb 2)
|
||||
:type "number"}]]]])))
|
||||
|
|
|
@ -6,15 +6,14 @@
|
|||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.confirm
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
(:require [uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.lightbox :as lbx]))
|
||||
|
||||
(defn- confirm-dialog-render
|
||||
[own {:keys [on-accept on-cancel hint] :as ctx}]
|
||||
(mx/defc confirm-dialog
|
||||
[{:keys [on-accept on-cancel hint] :as ctx}]
|
||||
(letfn [(accept [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!)
|
||||
|
@ -24,29 +23,22 @@
|
|||
(udl/close!)
|
||||
(when on-cancel
|
||||
(on-cancel (dissoc ctx :on-accept :on-cancel))))]
|
||||
(html
|
||||
[:div.lightbox-body.confirm-dialog
|
||||
[:h3 "Are you sure?"]
|
||||
(if hint
|
||||
[:span hint])
|
||||
[:div.row-flex
|
||||
[:input.btn-success.btn-small
|
||||
{:type "button"
|
||||
:value "Ok"
|
||||
:on-click accept}]
|
||||
[:input.btn-delete.btn-small
|
||||
{:type "button"
|
||||
:value "Cancel"
|
||||
:on-click cancel}]]
|
||||
[:a.close {:href "#"
|
||||
[:div.lightbox-body.confirm-dialog
|
||||
[:h3 "Are you sure?"]
|
||||
(if hint
|
||||
[:span hint])
|
||||
[:div.row-flex
|
||||
[:input.btn-success.btn-small
|
||||
{:type "button"
|
||||
:value "Ok"
|
||||
:on-click accept}]
|
||||
[:input.btn-delete.btn-small
|
||||
{:type "button"
|
||||
:value "Cancel"
|
||||
:on-click cancel}]]
|
||||
[:a.close {:href "#"
|
||||
:on-click #(do (dom/prevent-default %)
|
||||
(udl/close!))} i/close]])))
|
||||
|
||||
(def confirm-dialog
|
||||
(mx/component
|
||||
{:render confirm-dialog-render
|
||||
:name "confirm-dialog"
|
||||
:mixins []}))
|
||||
(udl/close!))} i/close]]))
|
||||
|
||||
(defmethod lbx/render-lightbox :confirm
|
||||
[context]
|
||||
|
|
|
@ -23,7 +23,7 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :as t :refer (tr)]
|
||||
[uxbox.util.lens :as ul]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.main.data.dashboard :as dd]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.main.ui.dashboard.header :refer (header)]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.ui.users :as ui.u]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[potok.core :as ptk]))
|
||||
|
||||
(def header-ref
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.util.i18n :as t :refer (tr)]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.time :as dt]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.util.forms :as sc]
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.images :as di]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.main.ui.dashboard.header :refer [header]]
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.blob :as blob]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
;; --- Helpers & Constants
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.i18n :as t :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
(def form-data (fm/focus-data :create-project st/state))
|
||||
|
|
|
@ -1,13 +1,11 @@
|
|||
(ns uxbox.main.ui.lightbox
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
(:require [lentes.core :as l]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.ui.keyboard :as k]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (classnames)]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[goog.events :as events])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
|
@ -47,23 +45,17 @@
|
|||
(events/unlistenByKey (::key own))
|
||||
(dissoc own ::key))
|
||||
|
||||
(defn- lightbox-render
|
||||
(mx/defcs lightbox
|
||||
{:mixins [mx/reactive]
|
||||
:will-mount lightbox-will-mount
|
||||
:will-unmount lightbox-will-umount}
|
||||
[own]
|
||||
(let [data (mx/react lightbox-ref)
|
||||
classes (classnames
|
||||
:hide (nil? data)
|
||||
:transparent (:transparent? data))]
|
||||
(html
|
||||
[:div.lightbox
|
||||
{:class classes
|
||||
:ref "parent"
|
||||
:on-click (partial on-out-clicked own)}
|
||||
(render-lightbox data)])))
|
||||
|
||||
(def lightbox
|
||||
(mx/component
|
||||
{:name "lightbox"
|
||||
:render lightbox-render
|
||||
:will-mount lightbox-will-mount
|
||||
:will-unmount lightbox-will-umount
|
||||
:mixins [mx/reactive]}))
|
||||
[:div.lightbox
|
||||
{:class classes
|
||||
:ref "parent"
|
||||
:on-click (partial on-out-clicked own)}
|
||||
(render-lightbox data)]))
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
(ns uxbox.main.ui.loader
|
||||
(:require [uxbox.main.store :as st]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Component
|
||||
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
(:require [lentes.core :as l]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.util.messages :as uum]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(def ^:private message-ref
|
||||
(-> (l/key :message)
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.util.router :as r]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.settings.profile :as profile]
|
||||
[uxbox.main.ui.settings.password :as password]
|
||||
|
|
|
@ -2,55 +2,46 @@
|
|||
;; 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) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2015-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.settings.header
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
(:require [potok.core :as ptk]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.projects :as dp]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.users :refer (user)]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[uxbox.main.ui.users :refer [user]]
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(def ^:private section-ref
|
||||
(-> (l/in [:route :id])
|
||||
(l/derive st/state)))
|
||||
|
||||
(defn- header-link
|
||||
(mx/defc header-link
|
||||
[section content]
|
||||
(let [link (r/route-for section)]
|
||||
(html
|
||||
[:a {:href (str "/#" link)} content])))
|
||||
[:a {:href (str "/#" link)} content]))
|
||||
|
||||
(defn header-render
|
||||
[own]
|
||||
(mx/defc header
|
||||
{:mixins [mx/static mx/reactive]}
|
||||
[]
|
||||
(let [section (mx/react section-ref)
|
||||
profile? (= section :settings/profile)
|
||||
password? (= section :settings/password)
|
||||
notifications? (= section :settings/notifications)]
|
||||
(html
|
||||
[:header#main-bar.main-bar
|
||||
[:div.main-logo
|
||||
(header-link :dashboard/projects i/logo)]
|
||||
[:ul.main-nav
|
||||
[:li {:class (when profile? "current")}
|
||||
(header-link :settings/profile (tr "settings.profile"))]
|
||||
[:li {:class (when password? "current")}
|
||||
(header-link :settings/password (tr "settings.password"))]
|
||||
[:li {:class (when notifications? "current")}
|
||||
(header-link :settings/notifications (tr "settings.notifications"))]]
|
||||
(user)])))
|
||||
[:header#main-bar.main-bar
|
||||
[:div.main-logo
|
||||
(header-link :dashboard/projects i/logo)]
|
||||
[:ul.main-nav
|
||||
[:li {:class (when profile? "current")}
|
||||
(header-link :settings/profile (tr "settings.profile"))]
|
||||
[:li {:class (when password? "current")}
|
||||
(header-link :settings/password (tr "settings.password"))]
|
||||
[:li {:class (when notifications? "current")}
|
||||
(header-link :settings/notifications (tr "settings.notifications"))]]
|
||||
(user)]))
|
||||
|
||||
(def header
|
||||
(mx/component
|
||||
{:render header-render
|
||||
:name "header"
|
||||
:mixins [rum/static
|
||||
mx/reactive]}))
|
||||
|
|
|
@ -12,31 +12,36 @@
|
|||
[uxbox.util.router :as r]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.main.ui.settings.header :refer (header)]))
|
||||
|
||||
(defn notifications-page-render
|
||||
(mx/defc notifications-page
|
||||
{:mixins [mx/static]}
|
||||
[own]
|
||||
(html
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content.user-settings
|
||||
[:section.user-settings-content
|
||||
[:span.user-settings-label "Prototype notifications"]
|
||||
[:p "Get a roll up of prototype changes in your inbox."]
|
||||
[:main.dashboard-main
|
||||
(header)
|
||||
[:section.dashboard-content.user-settings
|
||||
[:section.user-settings-content
|
||||
[:span.user-settings-label "Prototype notifications"]
|
||||
[:p "Get a roll up of prototype changes in your inbox."]
|
||||
[:div.input-radio.radio-primary
|
||||
[:input {:type "radio" :id "notification-1" :name "notification-1" :value "none"}]
|
||||
[:label {:for "notification-1" :value "None"} "None"]
|
||||
[:input {:type "radio" :id "notification-2" :name "notification-2" :value "every-hour"}]
|
||||
[:label {:for "notification-2" :value "Every hour"} "Every hour"]
|
||||
[:input {:type "radio" :id "notification-3" :name "notification-3" :value "every-day"}]
|
||||
[:input {:type "radio"
|
||||
:id "notification-1"
|
||||
:name "notification-1"
|
||||
:value "none"}]
|
||||
[:label {:for "notification-1"
|
||||
:value "None"} "None"]
|
||||
[:input {:type "radio"
|
||||
:id "notification-2"
|
||||
:name "notification-2"
|
||||
:value "every-hour"}]
|
||||
[:label {:for "notification-2"
|
||||
:value "Every hour"} "Every hour"]
|
||||
[:input {:type "radio"
|
||||
:id "notification-3"
|
||||
:name "notification-3"
|
||||
:value "every-day"}]
|
||||
[:label {:for "notification-3" :value "Every day"} "Every day"]]
|
||||
[:input.btn-primary {:type "submit" :value "Update settings"}]
|
||||
]]]))
|
||||
|
||||
(def notifications-page
|
||||
(mx/component
|
||||
{:render notifications-page-render
|
||||
:name "notifications-page"
|
||||
:mixins [mx/static]}))
|
||||
]]])
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.messages :as um]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(def form-data (fm/focus-data :profile-password st/state))
|
||||
(def form-errors (fm/focus-errors :profile-password st/state))
|
||||
|
|
|
@ -17,7 +17,7 @@
|
|||
[uxbox.main.data.users :as udu]
|
||||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.interop :refer [iterable->seq]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Circle Component
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.ui.shapes.image :as image]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
|
||||
;; --- Icon Component
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.data.images :as udi]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Refs
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
;; --- Path Component
|
||||
|
||||
(declare path-shape)
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
[uxbox.main.ui.shapes.attrs :as attrs]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.ui.shapes.common :as scommon]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.matrix :as gmt]
|
||||
[uxbox.util.mixins :as mx :include-macros true])
|
||||
[rumext.core :as mx :include-macros true])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Events
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.navigation :as nav]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- User Menu
|
||||
|
||||
|
|
|
@ -33,7 +33,7 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Workspace
|
||||
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.mixins :as mx :include-macros true])
|
||||
[rumext.core :as mx :include-macros true])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
;; --- Background
|
||||
|
|
|
@ -7,13 +7,14 @@
|
|||
|
||||
(ns uxbox.main.ui.workspace.clipboard
|
||||
(:require [lentes.core :as l]
|
||||
[sablono.core :refer-macros [html]]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
|
@ -30,15 +31,13 @@
|
|||
(on-close [event]
|
||||
(dom/prevent-default event)
|
||||
(udl/close!))]
|
||||
[:div.lightbox-body.clipboard
|
||||
[:div.clipboard-list
|
||||
(for [item (mx/react clipboard-ref)]
|
||||
[:div.clipboard-item
|
||||
{:key (str (:id item))
|
||||
:on-click (partial on-paste item)}
|
||||
[:span.clipboard-icon i/box]
|
||||
[:span (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
|
||||
[:a.close {:href "#" :on-click on-close} i/close]]))
|
||||
[:div.lightbox-body.clipboard {}
|
||||
[:div.clipboard-list {}
|
||||
(mx/doseq [item (mx/react clipboard-ref)]
|
||||
[:div.clipboard-item {:key (str (:id item))}
|
||||
[:span.clipboard-icon {} ^:inline i/box]
|
||||
[:span {} ^String (str "Copied (" (dt/timeago (:created-at item)) ")")]])]
|
||||
[:a.close {:href "#"} ^:inline i/close]]))
|
||||
|
||||
(defmethod lbx/render-lightbox :clipboard
|
||||
[_]
|
||||
|
|
|
@ -21,7 +21,7 @@
|
|||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.util.color :refer (hex->rgb)]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(defn- get-selected-collection
|
||||
[local collections]
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.ui.colorpicker :as cp]
|
||||
[uxbox.main.ui.workspace.recent-colors :refer [recent-colors]]
|
||||
[uxbox.util.router :as rt]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer [parse-int parse-float read-string]]))
|
||||
|
||||
|
|
|
@ -20,7 +20,7 @@
|
|||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.util.time :as dt]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.zip :as zip]))
|
||||
|
||||
;; --- Refs
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
(:require [beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.refs :as refs]
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
(:require [cuerdas.core :as str]
|
||||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Grid (Component)
|
||||
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
[uxbox.util.data :refer [index-of]]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Zoom Widget
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
[uxbox.main.ui.lightbox :as lbx]
|
||||
[uxbox.util.data :refer [read-string jscoll->vec]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.uuid :as uuid]))
|
||||
|
||||
;; --- Refs
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[uxbox.main.refs :as refs]
|
||||
[uxbox.main.data.workspace :as dw]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer (tr)]))
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.store :as st]
|
||||
[uxbox.main.user-events :as uev]
|
||||
[uxbox.util.math :as mth]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
[uxbox.main.constants :as c]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Constants & Helpers
|
||||
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
(:require [beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.main.refs :as refs]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]))
|
||||
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
[uxbox.main.ui.workspace.sidebar.history :refer [history-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.icons :refer [icons-toolbox]]
|
||||
[uxbox.main.ui.workspace.sidebar.drawtools :refer [draw-toolbox]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Left Sidebar (Component)
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.data :refer (read-string)]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
;; --- Refs
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.time :as dt]))
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.ui.shapes.icon :as icon]
|
||||
[uxbox.main.ui.dashboard.icons :as icons]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (read-string)]))
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.ui.keyboard :as kbd]
|
||||
[uxbox.util.data :refer (read-string classnames)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom.dnd :as dnd]
|
||||
[uxbox.util.dom :as dom])
|
||||
(:import goog.events.EventType))
|
||||
|
|
|
@ -28,7 +28,7 @@
|
|||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :as data]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Constants
|
||||
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]
|
||||
[uxbox.util.spec :refer (color?)]))
|
||||
|
|
|
@ -6,25 +6,24 @@
|
|||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.main.ui.workspace.sidebar.options.icon-measures
|
||||
(:require [sablono.core :as html :refer-macros [html]]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
(:require [lentes.core :as l]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.main.store :as st]
|
||||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[uxbox.main.geom :as geom]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]
|
||||
[uxbox.util.math :refer (precision-or-0)]))
|
||||
[uxbox.util.data :refer [parse-int parse-float read-string]]
|
||||
[uxbox.util.math :refer [precision-or-0]]))
|
||||
|
||||
(defn- icon-measures-menu-render
|
||||
[own menu shape]
|
||||
(mx/defc icon-measures-menu
|
||||
{:mixins [mx/static]}
|
||||
[menu shape]
|
||||
(letfn [(on-size-change [attr event]
|
||||
(let [value (dom/event->value event)
|
||||
value (parse-int value 0)
|
||||
|
@ -47,72 +46,65 @@
|
|||
(st/emit! (uds/unlock-proportions (:id shape)))
|
||||
(st/emit! (uds/lock-proportions (:id shape)))))]
|
||||
(let [size (geom/size shape)]
|
||||
(html
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
;; SLIDEBAR FOR ROTATION AND OPACITY
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Width"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:width size) 2)
|
||||
:on-change (partial on-size-change :width)}]]
|
||||
[:div.lock-size
|
||||
{:class (when (:proportion-lock shape) "selected")
|
||||
:on-click on-proportion-lock-change}
|
||||
(if (:proportion-lock shape) i/lock i/unlock)]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Height"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:height size) 2)
|
||||
:on-change (partial on-size-change :height)}]]]
|
||||
[:div.element-set {:key (str (:id menu))}
|
||||
[:div.element-set-title (:name menu)]
|
||||
[:div.element-set-content
|
||||
;; SLIDEBAR FOR ROTATION AND OPACITY
|
||||
[:span "Size"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Width"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:width size) 2)
|
||||
:on-change (partial on-size-change :width)}]]
|
||||
[:div.lock-size
|
||||
{:class (when (:proportion-lock shape) "selected")
|
||||
:on-click on-proportion-lock-change}
|
||||
(if (:proportion-lock shape) i/lock i/unlock)]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Height"
|
||||
:type "number"
|
||||
:min "0"
|
||||
:value (precision-or-0 (:height size) 2)
|
||||
:on-change (partial on-size-change :height)}]]]
|
||||
|
||||
[:span "Position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:x1 shape 0) 2)
|
||||
:on-change (partial on-pos-change :x)}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:y1 shape 0) 2)
|
||||
:on-change (partial on-pos-change :y)}]]]
|
||||
[:span "Position"]
|
||||
[:div.row-flex
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "X"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:x1 shape 0) 2)
|
||||
:on-change (partial on-pos-change :x)}]]
|
||||
[:div.input-element.pixels
|
||||
[:input.input-text
|
||||
{:placeholder "Y"
|
||||
:type "number"
|
||||
:value (precision-or-0 (:y1 shape 0) 2)
|
||||
:on-change (partial on-pos-change :y)}]]]
|
||||
|
||||
[:span "Rotation"]
|
||||
[:div.row-flex
|
||||
[:input.slidebar
|
||||
{:type "range"
|
||||
[:span "Rotation"]
|
||||
[:div.row-flex
|
||||
[:input.slidebar
|
||||
{:type "range"
|
||||
:min 0
|
||||
:max 360
|
||||
:value (:rotation shape 0)
|
||||
:on-change on-rotation-change}]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder ""
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 360
|
||||
:value (:rotation shape 0)
|
||||
:on-change on-rotation-change}]]
|
||||
|
||||
[:div.row-flex
|
||||
[:div.input-element.degrees
|
||||
[:input.input-text
|
||||
{:placeholder ""
|
||||
:type "number"
|
||||
:min 0
|
||||
:max 360
|
||||
:value (precision-or-0 (:rotation shape 0) 2)
|
||||
:on-change on-rotation-change
|
||||
:value (precision-or-0 (:rotation shape 0) 2)
|
||||
:on-change on-rotation-change
|
||||
}]]
|
||||
[:input.input-text
|
||||
{:style {:visibility "hidden"}}]
|
||||
]]]))))
|
||||
|
||||
(def icon-measures-menu
|
||||
(mx/component
|
||||
{:render icon-measures-menu-render
|
||||
:name "icon-measures-menu"
|
||||
:mixins [mx/static]}))
|
||||
[:input.input-text
|
||||
{:style {:visibility "hidden"}}]
|
||||
]]])))
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.geom.point :as gpt]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]
|
||||
[uxbox.util.math :refer (precision-or-0)]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(mx/defc image-measures-menu
|
||||
{:mixins [mx/static]}
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer [read-string]]
|
||||
[uxbox.util.spec :refer [color?]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Helpers
|
||||
|
||||
|
@ -442,9 +442,8 @@
|
|||
(when (or (not= (:animation form :none) :none)
|
||||
(and (only-easing? (:action form))
|
||||
(:element form)))
|
||||
(mx/concat
|
||||
(easing-input form-ref)
|
||||
(duration-input form-ref)))
|
||||
(list (easing-input form-ref)
|
||||
(duration-input form-ref)))
|
||||
]))
|
||||
|
||||
;; --- Form
|
||||
|
|
|
@ -18,7 +18,7 @@
|
|||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.main.ui.workspace.colorpicker]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.spec :refer [color?]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.data.workspace :as udw]
|
||||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.main.geom :as geom]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.geom.point :as gpt]
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
[uxbox.main.data.shapes :as uds]
|
||||
[uxbox.main.data.lightbox :as udl]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.data :refer (parse-int parse-float read-string)]
|
||||
[uxbox.util.math :refer (precision-or-0)]
|
||||
|
|
|
@ -15,7 +15,7 @@
|
|||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer (tr)]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.math :refer (precision-or-0)]
|
||||
[uxbox.util.data :refer (parse-int
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom.dnd :as dnd]
|
||||
[uxbox.util.dom :as dom]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
(mx/defcs page-item
|
||||
{:mixins [(mx/local) mx/static mx/reactive]}
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.util.forms :as fm]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.router :as r]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
|
||||
(def form-data (fm/focus-data :workspace-page-form st/state))
|
||||
|
|
|
@ -10,7 +10,7 @@
|
|||
[lentes.core :as l]
|
||||
[beicon.core :as rx]
|
||||
[potok.core :as ptk]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.i18n :refer [tr]]))
|
||||
|
||||
;; --- Form Validation Api
|
||||
|
|
|
@ -12,7 +12,7 @@
|
|||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.timers :as ts]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [classnames]]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
|
|
|
@ -1,53 +0,0 @@
|
|||
;; 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) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.util.mixins
|
||||
(:require [rum.core :as rum]
|
||||
[sablono.compiler :as s]))
|
||||
|
||||
(defn- parse-defc
|
||||
[args]
|
||||
(loop [r {}
|
||||
s 0
|
||||
v (first args)
|
||||
n (rest args)]
|
||||
(case s
|
||||
0 (if (symbol? v)
|
||||
(recur (assoc r :name v) (inc s) (first n) (rest n))
|
||||
(throw (ex-info "Invalid" {})))
|
||||
1 (if (string? v)
|
||||
(recur (assoc r :doc v) (inc s) (first n) (rest n))
|
||||
(recur r (inc s) v n))
|
||||
2 (if (map? v)
|
||||
(if-let [mixins (:mixins v)]
|
||||
(let [spec (dissoc v :mixins)
|
||||
mixins (if (empty? spec)
|
||||
mixins
|
||||
(conj mixins spec))]
|
||||
(recur (assoc r :mixins mixins) (inc s) (first n) (rest n)))
|
||||
(recur (assoc r :mixins [v]) (inc s) (first n) (rest n)))
|
||||
(recur r (inc s) v n))
|
||||
3 (if (vector? v)
|
||||
(recur (assoc r :args v) (inc s) (first n) (rest n))
|
||||
(throw (ex-info "Invalid" {})))
|
||||
4 (let [sym (:name r)
|
||||
args (:args r)
|
||||
func (if (map? v)
|
||||
`(fn ~args ~v ~(s/compile-html `(do ~@n)))
|
||||
`(fn ~args ~(s/compile-html `(do ~@(cons v n)))))]
|
||||
[func (:doc r) (:mixins r) sym]))))
|
||||
|
||||
(defmacro defc
|
||||
[& args]
|
||||
(let [[render doc mixins cname] (parse-defc args)]
|
||||
`(def ~cname ~doc (uxbox.util.mixins/lazy-component rum/build-defc ~render ~mixins ~(str cname)))))
|
||||
|
||||
(defmacro defcs
|
||||
[& args]
|
||||
(let [[render doc mixins cname] (parse-defc args)]
|
||||
`(def ~cname ~doc (uxbox.util.mixins/lazy-component rum/build-defcs ~render ~mixins ~(str cname)))))
|
||||
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
|
||||
(ns uxbox.util.mixins
|
||||
(:refer-clojure :exclude [concat])
|
||||
(:require [sablono.core :refer-macros [html]]
|
||||
[sablono.server :as server]
|
||||
[rum.core :as rum]
|
||||
[lentes.core :as l]
|
||||
[goog.dom.forms :as gforms]))
|
||||
|
||||
(extend-type cljs.core.UUID
|
||||
INamed
|
||||
(-name [this] (str this))
|
||||
(-namespace [_] ""))
|
||||
|
||||
(defn component
|
||||
[{:keys [render] :as spec}]
|
||||
{:pre [(ifn? render)]}
|
||||
(let [name (or (:name spec) (str (gensym "rum-")))
|
||||
mixins (or (:mixins spec) [])
|
||||
spec (dissoc spec :name :mixins :render)
|
||||
render' (fn [state]
|
||||
[(apply render state (:rum/args state)) state])
|
||||
mixins (conj mixins spec)]
|
||||
(rum/build-ctor render' mixins name)))
|
||||
|
||||
(defn concat
|
||||
[& elements]
|
||||
(html
|
||||
(for [[i element] (map-indexed vector elements)]
|
||||
(rum/with-key element (str i)))))
|
||||
|
||||
(defn local
|
||||
([]
|
||||
(rum/local {} :rum/local))
|
||||
([initial]
|
||||
(rum/local initial :rum/local))
|
||||
([initial key]
|
||||
(rum/local initial key)))
|
||||
|
||||
(defn lazy-component
|
||||
[builder render mixins display-name]
|
||||
(let [ctor (delay (builder render mixins display-name))]
|
||||
(fn [& args]
|
||||
(apply @ctor args))))
|
||||
|
||||
(def mount rum/mount)
|
||||
(def static rum/static)
|
||||
(def ref-node rum/ref-node)
|
||||
(def dom-node rum/dom-node)
|
||||
(def react rum/react)
|
||||
(def reactive rum/reactive)
|
||||
(def with-key rum/with-key)
|
||||
(def render-html server/render)
|
||||
(def render-static-html server/render-static)
|
|
@ -16,7 +16,7 @@
|
|||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.util.messages :as uum]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.dom :as dom]))
|
||||
|
||||
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
(ns uxbox.view.ui.loader
|
||||
(:require [uxbox.builtins.icons :as i]
|
||||
[uxbox.view.store :as st]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
[rumext.core :as mx :include-macros true]))
|
||||
|
||||
;; --- Component
|
||||
|
||||
|
|
|
@ -2,22 +2,13 @@
|
|||
;; 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) 2016 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
||||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.view.ui.notfound
|
||||
(:require [sablono.core :refer-macros [html]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]))
|
||||
|
||||
(defn notfound-page-render
|
||||
[own]
|
||||
(html
|
||||
[:div
|
||||
[:strong "Not Found"]]))
|
||||
|
||||
(def notfound-page
|
||||
(mx/component
|
||||
{:render notfound-page-render
|
||||
:name "notfound-page"
|
||||
:mixins [mx/static]}))
|
||||
(:require [rumext.core :as mx :include-macros true]))
|
||||
|
||||
(mx/defc notfound-page
|
||||
[]
|
||||
[:div
|
||||
[:strong "Not Found"]])
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
(:require [lentes.core :as l]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.view.store :as st]
|
||||
[uxbox.view.data.viewer :as dv]
|
||||
[uxbox.view.ui.viewer.nav :refer [nav]]
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
||||
|
||||
(ns uxbox.view.ui.viewer.canvas
|
||||
(:require [uxbox.util.mixins :as mx :include-macros true]
|
||||
(:require [rumext.core :as mx :include-macros true]
|
||||
[uxbox.view.ui.viewer.shapes :as shapes]))
|
||||
|
||||
;; --- Background (Component)
|
||||
|
|
|
@ -8,7 +8,7 @@
|
|||
(ns uxbox.view.ui.viewer.nav
|
||||
(:require [potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.view.store :as st]
|
||||
[uxbox.view.data.viewer :as dv]))
|
||||
|
||||
|
|
|
@ -19,7 +19,7 @@
|
|||
[uxbox.main.ui.shapes.path :refer [path-shape]]
|
||||
[uxbox.main.ui.shapes.circle :refer [circle-shape]]
|
||||
[uxbox.main.ui.shapes.image :refer [image-shape]]
|
||||
[uxbox.util.mixins :as mx :include-macros true])
|
||||
[rumext.core :as mx :include-macros true])
|
||||
(:import goog.events.EventType))
|
||||
|
||||
(def itx-flag-ref
|
||||
|
|
|
@ -11,7 +11,7 @@
|
|||
[potok.core :as ptk]
|
||||
[uxbox.builtins.icons :as i]
|
||||
[uxbox.util.i18n :refer [tr]]
|
||||
[uxbox.util.mixins :as mx :include-macros true]
|
||||
[rumext.core :as mx :include-macros true]
|
||||
[uxbox.util.data :refer [parse-int]]
|
||||
[uxbox.view.data.viewer :as dv]
|
||||
[uxbox.view.store :as st]))
|
||||
|
|
Loading…
Add table
Reference in a new issue