mirror of
https://github.com/penpot/penpot.git
synced 2025-01-24 23:49:45 -05:00
Fix rules with new layout.
This commit is contained in:
parent
b15dfe953d
commit
e6e7115e14
2 changed files with 59 additions and 31 deletions
|
@ -6,12 +6,12 @@
|
|||
[uxbox.rstore :as rs]
|
||||
[uxbox.state :as st]
|
||||
[uxbox.data.workspace :as dw]
|
||||
[uxbox.util.data :refer (classnames)]
|
||||
[uxbox.ui.icons :as i]
|
||||
[uxbox.ui.mixins :as mx]
|
||||
[uxbox.ui.workspace.base :as wb]
|
||||
[uxbox.ui.workspace.options :refer (element-opts)]
|
||||
[uxbox.ui.workspace.shortcuts :as wshortcuts]
|
||||
[uxbox.ui.workspace.lateralmenu :refer (lateralmenu)]
|
||||
[uxbox.ui.workspace.pagesmngr :refer (pagesmngr)]
|
||||
[uxbox.ui.workspace.header :refer (header)]
|
||||
[uxbox.ui.workspace.rules :refer (h-rule v-rule)]
|
||||
|
@ -52,28 +52,32 @@
|
|||
|
||||
(defn- workspace-render
|
||||
[own projectid]
|
||||
(let [workspace (rum/react wb/workspace-l)
|
||||
no-toolbars? (empty? (:toolboxes workspace))]
|
||||
(let [{:keys [flags] :as workspace} (rum/react wb/workspace-l)
|
||||
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
|
||||
[:div
|
||||
(header)
|
||||
[:main.main-content
|
||||
(when-not no-toolbars?
|
||||
(when left-sidebar?
|
||||
(left-sidebar))
|
||||
|
||||
[:section.workspace-content
|
||||
;; Lateral Menu (left side)
|
||||
#_(lateralmenu)
|
||||
;; Pages management lightbox
|
||||
;; (pagesmngr)
|
||||
|
||||
;; Rules
|
||||
(h-rule)
|
||||
(v-rule)
|
||||
|
||||
(h-rule left-sidebar?)
|
||||
(v-rule left-sidebar?)
|
||||
|
||||
;; Canvas
|
||||
[:section.workspace-canvas {:class (when no-toolbars? "no-tool-bar")
|
||||
:on-scroll on-scroll}
|
||||
[:section.workspace-canvas {:class classes :on-scroll on-scroll}
|
||||
(when (and (:selected workspace)
|
||||
(= (count (:selected workspace)) 1))
|
||||
(let [shape-id (first (:selected workspace))
|
||||
|
@ -85,7 +89,7 @@
|
|||
(colorpalette)
|
||||
|
||||
;; Aside
|
||||
(when-not no-toolbars?
|
||||
(when right-sidebar?
|
||||
(right-sidebar))
|
||||
]])))
|
||||
|
||||
|
|
|
@ -9,7 +9,7 @@
|
|||
[uxbox.ui.mixins :as mx]))
|
||||
|
||||
(def ^:static zoom 1)
|
||||
(def ^:static padding 20)
|
||||
(def ^:static step-padding 20)
|
||||
(def ^:static step-size 10)
|
||||
(def ^:static start-width wb/document-start-x)
|
||||
(def ^:static start-height wb/document-start-y)
|
||||
|
@ -18,22 +18,42 @@
|
|||
(def ^:static scroll-left 0)
|
||||
(def ^:static scroll-top 0)
|
||||
|
||||
;; TODO: refactor
|
||||
|
||||
(defn h-line
|
||||
[position value]
|
||||
(cond
|
||||
(< (mod value big-ticks-mod) step-size)
|
||||
(html
|
||||
[:g {:key position}
|
||||
[:line {:x1 position :x2 position :y1 5 :y2 padding :stroke "#7f7f7f"}]
|
||||
[:text {:x (+ position 2) :y 13 :fill "#7f7f7f" :style {:font-size "12px"}} value]])
|
||||
[:line {:x1 position
|
||||
: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)
|
||||
(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
|
||||
(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
|
||||
[position value]
|
||||
|
@ -44,7 +64,7 @@
|
|||
[:line {:y1 position
|
||||
:y2 position
|
||||
:x1 5
|
||||
:x2 padding
|
||||
:x2 step-padding
|
||||
:stroke "#7f7f7f"}]
|
||||
[:text {:y position
|
||||
:x 5
|
||||
|
@ -59,7 +79,7 @@
|
|||
:y1 position
|
||||
:y2 position
|
||||
:x1 10
|
||||
:x2 padding
|
||||
:x2 step-padding
|
||||
:stroke "#7f7f7f"}])
|
||||
|
||||
:else
|
||||
|
@ -68,22 +88,23 @@
|
|||
:y1 position
|
||||
:y2 position
|
||||
:x1 15
|
||||
:x2 padding
|
||||
:x2 step-padding
|
||||
:stroke "#7f7f7f"}])))
|
||||
|
||||
(defn h-rule-render
|
||||
[own]
|
||||
[own sidebar?]
|
||||
(let [width wb/viewport-width
|
||||
ticks (concat (range (- padding start-width) 0 step-size)
|
||||
(range 0 (- width start-width padding) step-size))]
|
||||
ticks (concat (range (- step-padding start-width) 0 step-size)
|
||||
(range 0 (- width start-width step-padding) step-size))
|
||||
padding (if sidebar? 250 0)]
|
||||
(html
|
||||
[:svg.horizontal-rule
|
||||
{:width 3000
|
||||
:height 3000
|
||||
:style {:left (str (- (- scroll-left wb/document-start-x)) "px")}}
|
||||
:style {:left (str padding "px")}}
|
||||
[:g
|
||||
[:rect {:x padding :y 0 :width width :height padding :fill "#bab7b7"}]
|
||||
[:rect {:x 0 :y 0 :width padding :height padding :fill "#bab7b7"}]]
|
||||
[:rect {:x step-padding :y 0 :width width :height step-padding :fill "#bab7b7"}]
|
||||
[:rect {:x 0 :y 0 :width step-padding :height step-padding :fill "#bab7b7"}]]
|
||||
[:g
|
||||
(for [tick ticks
|
||||
:let [pos (* (+ tick start-width) zoom)]]
|
||||
|
@ -96,17 +117,20 @@
|
|||
:mixins [mx/static rum/reactive]}))
|
||||
|
||||
(defn v-rule-render
|
||||
[own]
|
||||
[own sidebar?]
|
||||
(let [height wb/viewport-height
|
||||
ticks (concat (range (- padding start-height) 0 step-size)
|
||||
(range 0 (- height start-height padding) step-size))]
|
||||
ticks (concat (range (- step-padding start-height) 0 step-size)
|
||||
(range 0 (- height start-height step-padding) step-size))
|
||||
padding (if sidebar?
|
||||
250
|
||||
0)]
|
||||
(html
|
||||
[:svg.vertical-rule
|
||||
{:width 3000
|
||||
:height 3000
|
||||
:style {:top (str (- 0 scroll-top) "px")}}
|
||||
:style {:left (str padding "px")}}
|
||||
[: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
|
||||
:let [pos (* (+ tick start-height) zoom)]]
|
||||
(v-line pos tick))]])))
|
||||
|
|
Loading…
Add table
Reference in a new issue