Skip to content

Commit

Permalink
Changes:
Browse files Browse the repository at this point in the history 
 - Didn't update version as last version was so recent, but remember that the layout components are BREAKING.
 - Renamed parameters to :panel-1 and :panel-2 for both layouts.
 - Rewrote the way the drag handle in the splitter works (SVG -> DIV) so it works on all browsers now.
 - Started working on a demo for the box components.
  • Loading branch information
@Gregg8
Gregg8 committed Mar 27, 2015
1 parent 2058c1d commit 293e2a7
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 49 deletions.
49 changes: 24 additions & 25 deletions src/re_com/layout.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,31 +13,30 @@
(let [vertical? (= orientation :vertical)
length "20px"
width "8px"
pos1 "2px"
pos2 "5px"
pos1 "3px"
pos2 "3px"
color (if over? "#999" "#ccc")
l-width "1"]
[:svg {:style {:width (if vertical? width length)
:height (if vertical? length width)
:margin "auto"
:stroke color
:stroke-width l-width
:shape-rendering "crispEdges"}}
[:line (if vertical?
{:x1 pos1 :y1 "0" :x2 pos1 :y2 length}
{:x1 "0" :y1 pos1 :x2 length :y2 pos1})]
[:line (if vertical?
{:x1 pos2 :y1 "0" :x2 pos2 :y2 length}
{:x1 "0" :y1 pos2 :x2 length :y2 pos2})]]))
border (str "solid 1px " color)]
[:div {:style {:display "flex"
:flex-flow (str (if vertical? "row" "column") " nowrap")
:width (if vertical? width length)
:height (if vertical? length width)
:margin "auto"}}
[:div {:style (if vertical?
{:width pos1 :height length :border-right border}
{:width length :height pos1 :border-bottom border})}]
[:div {:style (if vertical?
{:width pos2 :height length :border-right border}
{:width length :height pos2 :border-bottom border})}]]))


;; ------------------------------------------------------------------------------------
;; Component: h-layout
;; ------------------------------------------------------------------------------------

(def h-layout-args-desc
[{:name :left-panel :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the left panel"}
{:name :right-panel :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the right panel"}
[{:name :panel-1 :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the left panel"}
{:name :panel-2 :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the right panel"}
{:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description "initial split percentage of the left panel. Can be double value or string (with/without percentage sign)"}
{:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"}
{:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"}])
Expand All @@ -46,7 +45,7 @@

(defn h-layout
"Returns markup for a horizontal layout component"
[& {:keys [left-panel right-panel initial-split splitter-size margin]
[& {:keys [panel-1 panel-2 initial-split splitter-size margin]
:or {initial-split 50 splitter-size "8px" margin "8px"}
:as args}]
{:pre [(validate-args-macro h-layout-args-desc args "h-layout")]}
Expand Down Expand Up @@ -114,20 +113,20 @@
(fn []
[:div (make-container-style "rc-h-layout" @dragging?)
[:div (make-panel-style "rc-h-layout-top" @dragging? @split-perc)
left-panel]
panel-1]
[:div (make-splitter-style "rc-h-layout-splitter")
[drag-handle :vertical @over?]]
[:div (make-panel-style "rc-h-layout-bottom" @dragging? (- 100 @split-perc))
right-panel]])))
panel-2]])))


;; ------------------------------------------------------------------------------------
;; Component: v-layout
;; ------------------------------------------------------------------------------------

(def v-layout-args-desc
[{:name :top-panel :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the top panel"}
{:name :bottom-panel :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the bottom panel"}
[{:name :panel-1 :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the top panel"}
{:name :panel-2 :required true :type "component" :validate-fn string-or-hiccup? :description "markup to go in the bottom panel"}
{:name :initial-split :required false :default 50 :type "double | string" :validate-fn number-or-string? :description "initial split percentage of the top panel. Can be double value or string (with/without percentage sign)"}
{:name :splitter-size :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the splitter"}
{:name :margin :required false :default "8px" :type "string" :validate-fn string? :description "thickness of the margin around the panels"}])
Expand All @@ -136,7 +135,7 @@

(defn v-layout
"Returns markup for a vertical layout component"
[& {:keys [top-panel bottom-panel initial-split splitter-size margin]
[& {:keys [panel-1 panel-2 initial-split splitter-size margin]
:or {initial-split 50 splitter-size "8px" margin "8px"}
:as args}]
{:pre [(validate-args-macro v-layout-args-desc args "v-layout")]}
Expand Down Expand Up @@ -204,8 +203,8 @@
(fn []
[:div (make-container-style "re-v-layout" @dragging?)
[:div (make-panel-style "re-v-layout-top" @dragging? @split-perc)
top-panel]
panel-1]
[:div (make-splitter-style "re-v-layout-splitter")
[drag-handle :horizontal @over?]]
[:div (make-panel-style "re-v-layout-bottom" @dragging? (- 100 @split-perc))
bottom-panel]])))
panel-2]])))
2 changes: 1 addition & 1 deletion src/re_demo/alert_box.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@
:id 1
:alert-type :info
:heading "This Is An Alert Heading"
:body [:p "This is an alert body. This alert has an :alert-type of :info which makes it blue, and it includes a :heading, a :body and a close button. Click the x to close it."]
:body [:p "This is an alert body. This alert has an :alert-type of :info which makes it green, and it includes a :heading, a :body and a close button. Click the x to close it."]
:closeable? true
:on-close #(reset! show-alert false)]
[:p {:style {:text-align "center" :margin "30px"}} "[You closed me]"])
Expand Down
66 changes: 53 additions & 13 deletions src/re_demo/h_box.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
[re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]]))


(def rounded-panel {:background-color "#fff4f4"
:border "1px solid lightgray"
:border-radius "4px"
:margin "4px"
:padding "8px"
:flex "1"})

(defn panel
[]
[v-box
Expand All @@ -16,34 +23,67 @@

[h-box
:gap "100px"
:children [[v-box
:children [[v-box
:gap "10px"
:width "450px"
:children [[component-title "Notes"]
[status-text "Stable"]
[paragraphs
[:p "TBA..."]]
[:p "h-box is a container which lays out its " [:code ":children"] " in a single horizontal row."]
[:p
"To understand it fully and use it powerfully, you must have a good understanding of the "
[hyperlink-href
:label "CSS Flexbox"
:href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
:target "_blank"]
" layout system."]
[:p "The actual layout is a function of the " [:code ":size"] " of the container and the " [:code ":size"] " provided for each of the children."]
[:p "Todo: Nestability with v-box"]
]
[args-table h-box-args-desc]]]
[v-box
:gap "10px"
:children [[component-title "Demo"]
[:span.all-small-caps "TBA..."]]]]]
[paragraphs
[:p "The h-box, which is normally invisible, has been styled with a dashed red border to make it visible."]
[:p "Each child box component (which includes an 4px magin) describes it's own settings and allows you to modify them."]]
[h-box
:width "800px"
:height "200px"
:style {:border "dashed 1px red"}
:children [[box
:size "60%"
:child [:div {:style rounded-panel} "Box 1" [:br] ":size 60%"]]
[box
:size "100px"
:child [:div {:style rounded-panel} "Box 2" [:br] ":size 100px"]]
[box
:size "40%"
:child [:div {:style rounded-panel} "Box 3" [:br] ":size 40%"]]
]]
[paragraphs
[:br]
[:p "Now here is the a v-box with exactly the same children (although the height has been halved."]]
[v-box
:width "200px"
:height "400px"
:style {:border "dashed 1px red"}
:children [[box
:size "60%"
:child [:div {:style rounded-panel} "Box 1" [:br] ":size 60%"]]
[box
:size "100px"
:child [:div {:style rounded-panel} "Box 2" [:br] ":size 100px"]]
[box
:size "40%"
:child [:div {:style rounded-panel} "Box 3" [:br] ":size 40%"]]
]]]]]]
[gap :size "30px"]]])


;;====================================================================================


(def rounded-panel {:background-color "#fff4f4"
:border "1px solid lightgray"
:border-radius "8px"
:margin "8px"
:padding "8px"
:flex "1"
;:overflow-x "hidden"
;:overflow-y "auto"
})

(def side-bar {:background-color "#f0f0ff"
:width "100%"
;:overflow "auto"
Expand Down
20 changes: 10 additions & 10 deletions src/re_demo/layouts.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

(def rounded-panel {:background-color "#fff4f4"
:border "1px solid lightgray"
:border-radius "8px"
:border-radius "4px"
:padding "0px 20px 0px 20px"
:flex "1"})

Expand All @@ -15,38 +15,38 @@
[title
:label text
:level :level3
:style {:margin-top "15px"}])
:style {:margin-top "20px"}])

(defn left-panel
[]
[box
:size "auto"
:child [:div {:style rounded-panel}
[layout-panel-title "Left panel"]]])
[layout-panel-title [:code ":panel-1"]]]])


(defn right-panel
[]
[box
:size "auto"
:child [:div {:style rounded-panel}
[layout-panel-title "Right panel"]]])
[layout-panel-title [:code ":panel-2"]]]])


(defn top-panel
[]
[box
:size "auto"
:child [:div {:style rounded-panel}
[layout-panel-title "Top panel"]]])
[layout-panel-title [:code ":panel-1"]]]])


(defn bottom-panel
[]
[box
:size "auto"
:child [:div {:style rounded-panel}
[layout-panel-title "Bottom panel"]]])
[layout-panel-title [:code ":panel-2"]]]])


(defn panel
Expand Down Expand Up @@ -75,8 +75,8 @@
:gap "10px"
:children [[component-title "Demo"]
[h-layout
:left-panel [left-panel]
:right-panel [right-panel]]]]]]
:panel-1 [left-panel]
:panel-2 [right-panel]]]]]]
[line :style {:margin-top "20px"}]
[h-box
:gap "100px"
Expand All @@ -92,7 +92,7 @@
:gap "10px"
:children [[component-title "Demo"]
[v-layout
:top-panel [top-panel]
:bottom-panel [bottom-panel]
:panel-1 [top-panel]
:panel-2 [bottom-panel]
:initial-split "25%"]]]]]
[gap :size "30px"]]])

0 comments on commit 293e2a7

Please sign in to comment.