Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-26 08:29:42 -05:00
Code Issues Activity

Fix rules with new layout.

Browse source
This commit is contained in:
Andrey Antukh 2016-02-12 18:40:50 +02:00
parent b15dfe953d
commit e6e7115e14
2 changed files with 59 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/uxbox/ui/workspace.cljs
View file

@ -6,12 +6,12 @@
[uxbox.rstore :as rs] [uxbox.rstore :as rs]
[uxbox.state :as st] [uxbox.state :as st]
[uxbox.data.workspace :as dw] [uxbox.data.workspace :as dw]
[uxbox.util.data :refer (classnames)]
[uxbox.ui.icons :as i] [uxbox.ui.icons :as i]
[uxbox.ui.mixins :as mx] [uxbox.ui.mixins :as mx]
[uxbox.ui.workspace.base :as wb] [uxbox.ui.workspace.base :as wb]
[uxbox.ui.workspace.options :refer (element-opts)] [uxbox.ui.workspace.options :refer (element-opts)]
[uxbox.ui.workspace.shortcuts :as wshortcuts] [uxbox.ui.workspace.shortcuts :as wshortcuts]
[uxbox.ui.workspace.lateralmenu :refer (lateralmenu)]
[uxbox.ui.workspace.pagesmngr :refer (pagesmngr)] [uxbox.ui.workspace.pagesmngr :refer (pagesmngr)]
[uxbox.ui.workspace.header :refer (header)] [uxbox.ui.workspace.header :refer (header)]
[uxbox.ui.workspace.rules :refer (h-rule v-rule)] [uxbox.ui.workspace.rules :refer (h-rule v-rule)]
@ -52,28 +52,32 @@
(defn- workspace-render (defn- workspace-render
[own projectid] [own projectid]
(let [workspace (rum/react wb/workspace-l) (let [{:keys [flags] :as workspace} (rum/react wb/workspace-l)
no-toolbars? (empty? (:toolboxes workspace))] left-sidebar? (not (empty? (keep flags [:layers])))
right-sidebar? (not (empty? (keep flags [:icons :drawtools])))
classes (classnames
:no-tool-bar-right (not right-sidebar?)
:no-tool-bar-left (not left-sidebar?))]
(println left-sidebar? right-sidebar? classes)
(html (html
[:div [:div
(header) (header)
[:main.main-content [:main.main-content
(when-not no-toolbars? (when left-sidebar?
(left-sidebar)) (left-sidebar))
[:section.workspace-content [:section.workspace-content
;; Lateral Menu (left side)
#_(lateralmenu)
;; Pages management lightbox ;; Pages management lightbox
;; (pagesmngr) ;; (pagesmngr)
;; Rules ;; Rules
(h-rule) (h-rule left-sidebar?)
(v-rule) (v-rule left-sidebar?)
;; Canvas ;; Canvas
[:section.workspace-canvas {:class (when no-toolbars? "no-tool-bar") [:section.workspace-canvas {:class classes :on-scroll on-scroll}
:on-scroll on-scroll}
(when (and (:selected workspace) (when (and (:selected workspace)
(= (count (:selected workspace)) 1)) (= (count (:selected workspace)) 1))
(let [shape-id (first (:selected workspace)) (let [shape-id (first (:selected workspace))
@ -85,7 +89,7 @@
(colorpalette) (colorpalette)
;; Aside ;; Aside
(when-not no-toolbars? (when right-sidebar?
(right-sidebar)) (right-sidebar))
]]))) ]])))

62
src/uxbox/ui/workspace/rules.cljs
View file

@ -9,7 +9,7 @@
[uxbox.ui.mixins :as mx])) [uxbox.ui.mixins :as mx]))
(def ^:static zoom 1) (def ^:static zoom 1)
(def ^:static padding 20) (def ^:static step-padding 20)
(def ^:static step-size 10) (def ^:static step-size 10)
(def ^:static start-width wb/document-start-x) (def ^:static start-width wb/document-start-x)
(def ^:static start-height wb/document-start-y) (def ^:static start-height wb/document-start-y)
@ -18,22 +18,42 @@
(def ^:static scroll-left 0) (def ^:static scroll-left 0)
(def ^:static scroll-top 0) (def ^:static scroll-top 0)
;; TODO: refactor
(defn h-line (defn h-line
[position value] [position value]
(cond (cond
(< (mod value big-ticks-mod) step-size) (< (mod value big-ticks-mod) step-size)
(html (html
[:g {:key position} [:g {:key position}
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}] [:line {:x1 position
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]]) :x2 position
:y1 5
:y2 step-padding
:stroke "#7f7f7f"}]
[:text {:x (+ position 2)
:y 13
:fill "#7f7f7f"
:style {:font-size "12px"}}
value]])
(< (mod value mid-ticks-mod) step-size) (< (mod value mid-ticks-mod) step-size)
(html (html
[:line {:key position :x1 position :x2 position :y1 10 :y2 padding :stroke "#7f7f7f"}]) [:line {:key position
:x1 position
:x2 position
:y1 10
:y2 step-padding
:stroke "#7f7f7f"}])
:else :else
(html (html
[:line {:key position :x1 position :x2 position :y1 15 :y2 padding :stroke "#7f7f7f"}]))) [:line {:key position
:x1 position
:x2 position
:y1 15
:y2 step-padding
:stroke "#7f7f7f"}])))
(defn v-line (defn v-line
[position value] [position value]
@ -44,7 +64,7 @@
[:line {:y1 position [:line {:y1 position
:y2 position :y2 position
:x1 5 :x1 5
:x2 padding :x2 step-padding
:stroke "#7f7f7f"}] :stroke "#7f7f7f"}]
[:text {:y position [:text {:y position
:x 5 :x 5
@ -59,7 +79,7 @@
:y1 position :y1 position
:y2 position :y2 position
:x1 10 :x1 10
:x2 padding :x2 step-padding
:stroke "#7f7f7f"}]) :stroke "#7f7f7f"}])
:else :else
@ -68,22 +88,23 @@
:y1 position :y1 position
:y2 position :y2 position
:x1 15 :x1 15
:x2 padding :x2 step-padding
:stroke "#7f7f7f"}]))) :stroke "#7f7f7f"}])))
(defn h-rule-render (defn h-rule-render
[own] [own sidebar?]
(let [width wb/viewport-width (let [width wb/viewport-width
ticks (concat (range (- padding start-width) 0 step-size) ticks (concat (range (- step-padding start-width) 0 step-size)
(range 0 (- width start-width padding) step-size))] (range 0 (- width start-width step-padding) step-size))
padding (if sidebar? 250 0)]
(html (html
[:svg.horizontal-rule [:svg.horizontal-rule
{:width 3000 {:width 3000
:height 3000 :height 3000
:style {:left (str (- (- scroll-left wb/document-start-x)) "px")}} :style {:left (str padding "px")}}
[:g [:g
[:rect {:x padding :y 0 :width width :height padding :fill "#bab7b7"}] [:rect {:x step-padding :y 0 :width width :height step-padding :fill "#bab7b7"}]
[:rect {:x 0 :y 0 :width padding :height padding :fill "#bab7b7"}]] [:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "#bab7b7"}]]
[:g [:g
(for [tick ticks (for [tick ticks
:let [pos (* (+ tick start-width) zoom)]] :let [pos (* (+ tick start-width) zoom)]]
@ -96,17 +117,20 @@
:mixins [mx/static rum/reactive]})) :mixins [mx/static rum/reactive]}))
(defn v-rule-render (defn v-rule-render
[own] [own sidebar?]
(let [height wb/viewport-height (let [height wb/viewport-height
ticks (concat (range (- padding start-height) 0 step-size) ticks (concat (range (- step-padding start-height) 0 step-size)
(range 0 (- height start-height padding) step-size))] (range 0 (- height start-height step-padding) step-size))
padding (if sidebar?
250
0)]
(html (html
[:svg.vertical-rule [:svg.vertical-rule
{:width 3000 {:width 3000
:height 3000 :height 3000
:style {:top (str (- 0 scroll-top) "px")}} :style {:left (str padding "px")}}
[:g [:g
[:rect {:x 0 :y padding :height height :width padding :fill "#bab7b7"}] [:rect {:x 0 :y step-padding :height height :width step-padding :fill "#bab7b7"}]
(for [tick ticks (for [tick ticks
:let [pos (* (+ tick start-height) zoom)]] :let [pos (* (+ tick start-height) zoom)]]
(v-line pos tick))]]))) (v-line pos tick))]])))