Skip to content

Commit

Permalink
Version 0.2.9:
Browse files Browse the repository at this point in the history 
 - BREAKING CHANGE: [layout] now expects standard reagent components rather than component functions. i.e  [comp] rather than comp.
 - Other [layout] changes:
    - Added visual drag handle in middle of splitter.
    - Now using alternative mouse cursors.
    - Very light mouse over color (and handle colour darkens too).
 - Added a couple of helper functions to popover to neaten the code up.
 - In LHS menu, renamed "Basic" to "Basic Button"
  • Loading branch information
@Gregg8
Gregg8 committed Mar 27, 2015
1 parent 75e470c commit 2058c1d
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 52 deletions.
2 changes: 1 addition & 1 deletion project.clj
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@

;; ---------------------------------------------------------------------------------------

(defproject re-com "0.2.8"
(defproject re-com "0.2.9"
:description "Reusable UI components for Reagent"
:url "https://github.com/Day8/re-com.git"

Expand Down
67 changes: 49 additions & 18 deletions src/re_com/layout.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,33 @@
[re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string?] :refer-macros [validate-args-macro]]
[reagent.core :as reagent]))


(defn drag-handle
"Return a drag handle to go into a vertical or horizontal splitter bar:
orientation: Can be :horizonal or :vertical
over?: When true, the mouse is assumed to be over the splitter so show a bolder color"
[orientation over?]
(let [vertical? (= orientation :vertical)
length "20px"
width "8px"
pos1 "2px"
pos2 "5px"
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})]]))


;; ------------------------------------------------------------------------------------
;; Component: h-layout
;; ------------------------------------------------------------------------------------
Expand Down Expand Up @@ -57,10 +84,10 @@
make-container-style (fn [class in-drag?]
(merge {:class class
:id container-id
:style {:display "flex"
:style {:display "flex"
:flex-flow "row nowrap"
:flex "auto"
:margin margin}}
:flex "auto"
:margin margin}}
(when in-drag? ;; only listen when we are dragging
{:on-mouse-up (handler-fn (stop-drag))
:on-mouse-move (handler-fn (mousemove event))
Expand All @@ -79,17 +106,19 @@
:on-mouse-down (handler-fn (mousedown event))
:on-mouse-over (handler-fn (mouseover-split))
:on-mouse-out (handler-fn (mouseout-split))
:style (merge {:flex (str "0 0 " splitter-size)
:cursor "ew-resize"}
(when @over? {:background-color "#eeeeee"}))})]
:style (merge {:display "flex"
:flex (str "0 0 " splitter-size)
:cursor "col-resize"}
(when @over? {:background-color "#f8f8f8"}))})]

(fn []
[:div (make-container-style "rc-h-layout" @dragging?)
[:div (make-panel-style "rc-h-layout-top" @dragging? @split-perc)
[left-panel]]
[:div (make-splitter-style "rc-h-layout-splitter")]
left-panel]
[: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]]])))
right-panel]])))


;; ------------------------------------------------------------------------------------
Expand Down Expand Up @@ -145,10 +174,10 @@
make-container-style (fn [class in-drag?]
(merge {:class class
:id container-id
:style {:display "flex"
:style {:display "flex"
:flex-flow "column nowrap"
:flex "auto"
:margin margin}}
:flex "auto"
:margin margin}}
(when in-drag? ;; only listen when we are dragging
{:on-mouse-up (handler-fn (stop-drag))
:on-mouse-move (handler-fn (mousemove event))
Expand All @@ -167,14 +196,16 @@
:on-mouse-down (handler-fn (mousedown event))
:on-mouse-over (handler-fn (mouseover-split))
:on-mouse-out (handler-fn (mouseout-split))
:style (merge {:flex (str "0 0 " splitter-size)
:cursor "ns-resize"}
(when @over? {:background-color "#eeeeee"}))})]
:style (merge {:display "flex"
:flex (str "0 0 " splitter-size)
:cursor "row-resize"}
(when @over? {:background-color "#f8f8f8"}))})]

(fn []
[:div (make-container-style "re-v-layout" @dragging?)
[:div (make-panel-style "re-v-layout-top" @dragging? @split-perc)
[top-panel]]
[:div (make-splitter-style "re-v-layout-splitter")]
top-panel]
[: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]]])))
bottom-panel]])))
35 changes: 19 additions & 16 deletions src/re_com/popover.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,19 @@
;; Component: popover-border
;;--------------------------------------------------------------------------------------------------

(defn next-even-integer
[num]
(-> num inc (/ 2) int (* 2)))

(defn calc-pop-offset
[arrow-pos p-width p-height]
(case arrow-pos
:center nil
:right 20
:below 20
:left (if p-width (- p-width 25) p-width)
:above (if p-height (- p-height 25) p-height)))

(def popover-border-args-desc
[{:name :children :required true :type "vector" :validate-fn sequential? :description "a vector of component markups"}
{:name :position :required false :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]}
Expand Down Expand Up @@ -162,14 +175,9 @@
:component-did-update
(fn []
(let [popover-elem (get-element-by-id pop-id)]
(reset! p-width (if popover-elem (-> (.-clientWidth popover-elem) inc (/ 2) int (* 2)) 0)) ;; Convert to next highest even integer to avoid wiggling popovers
(reset! p-height (if popover-elem (-> (.-clientHeight popover-elem) inc (/ 2) int (* 2)) 0))
(reset! pop-offset (case arrow-pos
:center nil
:right 20
:below 20
:left (if @p-width (- @p-width 25) @p-width)
:above (if @p-height (- @p-height 25) @p-height)))))
(reset! p-width (if popover-elem (next-even-integer (.-clientWidth popover-elem)) 0)) ;; next-even-integer required to avoid wiggling popovers (width/height appears to prefer being even and toggles without this call)
(reset! p-height (if popover-elem (next-even-integer (.-clientHeight popover-elem)) 0))
(reset! pop-offset (calc-pop-offset arrow-pos @p-width @p-height))))

:component-function
(fn
Expand All @@ -178,14 +186,9 @@
:as args}]
{:pre [(validate-args-macro popover-border-args-desc args "popover-border")]}
(let [popover-elem (get-element-by-id pop-id)]
(reset! p-width (if popover-elem (-> (.-clientWidth popover-elem) inc (/ 2) int (* 2)) 0)) ;; TODO: Duplicate from above but needs to be calculated here to prevent an annoying flicker (so make it a fn)
(reset! p-height (if popover-elem (-> (.-clientHeight popover-elem) inc (/ 2) int (* 2)) 0))
(reset! pop-offset (case arrow-pos
:center nil
:right 20
:below 20
:left (if @p-width (- @p-width 25) @p-width)
:above (if @p-height (- @p-height 25) @p-height)))
(reset! p-width (if popover-elem (next-even-integer (.-clientWidth popover-elem)) 0)) ;; TODO: Duplicate from above but needs to be calculated here to prevent an annoying flicker (so make it a fn)
(reset! p-height (if popover-elem (next-even-integer (.-clientHeight popover-elem)) 0))
(reset! pop-offset (calc-pop-offset arrow-pos @p-width @p-height))
[:div.popover.fade.in
{:id pop-id
:class (case orientation :left "left" :right "right" :above "top" :below "bottom")
Expand Down
8 changes: 4 additions & 4 deletions src/re_demo/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
[{:id :welcome :level :major :label "Welcome" :panel welcome/panel}

{:id :buttons :level :major :label "Buttons"}
{:id :button :level :minor :label "Basic" :panel button/panel}
{:id :button :level :minor :label "Basic Button" :panel button/panel}
{:id :row-button :level :minor :label "Row Button" :panel row-button/panel}
{:id :md-circle-icon-button :level :minor :label "Circle Icon Button" :panel md-circle-icon-button/panel}
{:id :md-icon-button :level :minor :label "Icon Button" :panel md-icon-button/panel}
Expand Down Expand Up @@ -104,7 +104,7 @@
[]
(let [mouse-over? (reagent/atom false)]
(fn [tab selected-tab-id on-select-tab]
(let [selected (= @selected-tab-id (:id tab))
(let [selected? (= @selected-tab-id (:id tab))
is-major? (= (:level tab) :major)
has-panel? (some? (:panel tab))]
[:div
Expand All @@ -114,8 +114,8 @@
:padding-top (when is-major? "6px")
:font-size (when is-major? "15px")
:font-weight (when is-major? "bold")
:color (if selected "#111")
:border-right (if selected "4px #d0d0d0 solid")
:color (when selected? "#111")
:border-right (when selected? "4px #d0d0d0 solid")
:background-color (if (or
(= @selected-tab-id (:id tab))
@mouse-over?) "#eaeaea")}
Expand Down
17 changes: 4 additions & 13 deletions src/re_demo/layouts.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,15 +49,6 @@
[layout-panel-title "Bottom panel"]]])


#_(defn right-panel
[]
[v-layout
:top-panel top-panel
:bottom-panel bottom-panel
:margin "0px"
:initial-split "25%"])


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

0 comments on commit 2058c1d

Please sign in to comment.