diff --git a/src/re_com/layout.cljs b/src/re_com/layout.cljs index ae420395..6a212c32 100644 --- a/src/re_com/layout.cljs +++ b/src/re_com/layout.cljs @@ -13,22 +13,21 @@ (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})}]])) ;; ------------------------------------------------------------------------------------ @@ -36,8 +35,8 @@ ;; ------------------------------------------------------------------------------------ (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"}]) @@ -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")]} @@ -114,11 +113,11 @@ (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]]))) ;; ------------------------------------------------------------------------------------ @@ -126,8 +125,8 @@ ;; ------------------------------------------------------------------------------------ (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"}]) @@ -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")]} @@ -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]]))) diff --git a/src/re_demo/alert_box.cljs b/src/re_demo/alert_box.cljs index 91f6a0c4..7284c4e2 100644 --- a/src/re_demo/alert_box.cljs +++ b/src/re_demo/alert_box.cljs @@ -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]"]) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 32e48183..8c9fa0ff 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -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 @@ -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" diff --git a/src/re_demo/layouts.cljs b/src/re_demo/layouts.cljs index 247cc602..a85d117a 100644 --- a/src/re_demo/layouts.cljs +++ b/src/re_demo/layouts.cljs @@ -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"}) @@ -15,14 +15,14 @@ [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 @@ -30,7 +30,7 @@ [box :size "auto" :child [:div {:style rounded-panel} - [layout-panel-title "Right panel"]]]) + [layout-panel-title [:code ":panel-2"]]]]) (defn top-panel @@ -38,7 +38,7 @@ [box :size "auto" :child [:div {:style rounded-panel} - [layout-panel-title "Top panel"]]]) + [layout-panel-title [:code ":panel-1"]]]]) (defn bottom-panel @@ -46,7 +46,7 @@ [box :size "auto" :child [:div {:style rounded-panel} - [layout-panel-title "Bottom panel"]]]) + [layout-panel-title [:code ":panel-2"]]]]) (defn panel @@ -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" @@ -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"]]])