From 20e1e1af8632dc5ab045679d42a3053b95d0c5ca Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Mon, 30 Mar 2015 19:10:01 +1100 Subject: [PATCH] Version 0.3.0 - BREAKING CHANGE: CSS changes - BREAKING CHANGE: To be compatible with Safari (and potentially others later), we should replace {:display "flex"}, {:flex "none"} etc. with new API calls. - Added cross-browser Flexbox support. Initially for Safari through the -webkit- browser prefix. Previously it rendered all boxes down the page (abysmally). - Exposed new box API functions: flex-child-style, justify-style, align-style, scroll-style - Added a new API call to complete the set: flex-flow-style - Refactored all re-com components to use the new box functions. - Refactored the demo to use the new box functions. - Further progress on the box demo. --- project.clj | 4 +- run/resources/public/assets/css/re-com.css | 21 +- src/re_com/alert.cljs | 6 +- src/re_com/box.cljs | 80 ++++---- src/re_com/buttons.cljs | 12 +- src/re_com/core.cljs | 6 + src/re_com/datepicker.cljs | 9 +- src/re_com/dropdown.cljs | 9 +- src/re_com/layout.cljs | 68 ++++--- src/re_com/misc.cljs | 57 +++--- src/re_com/modal_panel.cljs | 5 +- src/re_com/popover.cljs | 39 ++-- src/re_com/tabs.cljs | 7 +- src/re_com/text.cljs | 11 +- src/re_com/tour.cljs | 4 +- src/re_com/validate.cljs | 6 +- src/re_demo/checkbox.cljs | 4 +- src/re_demo/h_box.cljs | 213 ++++++++++++++------- src/re_demo/layouts.cljs | 12 +- src/re_demo/popovers.cljs | 12 +- src/re_demo/slider.cljs | 2 +- src/re_demo/title.cljs | 2 +- src/re_demo/tour.cljs | 58 +++--- src/re_demo/utils.cljs | 13 +- 24 files changed, 381 insertions(+), 279 deletions(-) diff --git a/project.clj b/project.clj index 8beac965..da6cf942 100644 --- a/project.clj +++ b/project.clj @@ -32,7 +32,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.2.9" +(defproject re-com "0.3.0" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" @@ -142,6 +142,8 @@ ["run-prod"] ["cljsbuild" "auto" "prod"]] + "deploy" ["s3-static-deploy"] + ;; *** TEST *** "run-test" ["with-profile" "+dev-test" "do" diff --git a/run/resources/public/assets/css/re-com.css b/run/resources/public/assets/css/re-com.css index 4f5ff66b..c3bc5fe6 100644 --- a/run/resources/public/assets/css/re-com.css +++ b/run/resources/public/assets/css/re-com.css @@ -1250,8 +1250,21 @@ code { } .noselect { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} +/*---------------------------------------------------------------------------------------- + Flexbox "display" styles + Requires 2 display values which we can't represent in a Clojure map +----------------------------------------------------------------------------------------*/ + +.display-flex { + display: -webkit-flex; + display: flex; +} +.display-inline-flex { + display: -webkit-inline-flex; + display: inline-flex; } \ No newline at end of file diff --git a/src/re_com/alert.cljs b/src/re_com/alert.cljs index 6f2067c6..5bd4978a 100644 --- a/src/re_com/alert.cljs +++ b/src/re_com/alert.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value]] [re-com.buttons :refer [button]] - [re-com.box :refer [h-box v-box box scroller border]] + [re-com.box :refer [h-box v-box box scroller border flex-child-style]] [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? alert-types-list vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]])) @@ -39,8 +39,8 @@ (name alert-type))] [:div (merge {:class (str "rc-alert alert fade in alert-" alert-type " " class) - :style (merge {:flex "none" - :padding (when padding padding)} + :style (merge (flex-child-style "none") + {:padding (when padding padding)} style)} attr) (when heading diff --git a/src/re_com/box.cljs b/src/re_com/box.cljs index bdf522c8..5aebbfbe 100644 --- a/src/re_com/box.cljs +++ b/src/re_com/box.cljs @@ -10,7 +10,7 @@ ;; Private Helper functions ;; ------------------------------------------------------------------------------------ -(defn- flex-child-style +(defn flex-child-style "Determines the value for the 'flex' attribute (which has grow, shrink and basis), based on the size parameter. IMPORTANT: The term 'size' means width of the item in the case of flex-direction 'row' OR height of the item in the case of flex-direction 'column'. Flex property explanation: @@ -52,38 +52,50 @@ flex (if (and size-only (not pass-through?)) (str grow " " shrink " " basis) size)] - {:flex flex})) + {:-webkit-flex flex + :flex flex})) -(defn- justify-style +(defn flex-flow-style + "A cross-browser helper function to output flex-flow with all it's potential browser prefixes" + [flex-flow] + {:-webkit-flex-flow flex-flow + :flex-flow flex-flow}) + +(defn justify-style "Determines the value for the flex 'justify-content' attribute. This parameter determines how children are aligned along the main axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#justify-content-property" [justify] - {:justify-content (case justify - :start "flex-start" - :end "flex-end" - :center "center" - :between "space-between" - :around "space-around")}) + (let [js (case justify + :start "flex-start" + :end "flex-end" + :center "center" + :between "space-between" + :around "space-around")] + {:-webkit-justify-content js + :justify-content js})) -(defn- align-style +(defn align-style "Determines the value for the flex align type attributes. This parameter determines how children are aligned on the cross axis. The justify parameter is a keyword. Reference: http://www.w3.org/TR/css3-flexbox/#align-items-property" [attribute align] - {attribute (case align - :start "flex-start" - :end "flex-end" - :center "center" - :baseline "baseline" - :stretch "stretch")}) - - -(defn- scroll-style + (let [attribute-wk (->> attribute name (str "-webkit-") keyword) + as (case align + :start "flex-start" + :end "flex-end" + :center "center" + :baseline "baseline" + :stretch "stretch")] + {attribute-wk as + attribute as})) + + +(defn scroll-style "Determines the value for the 'overflow' attribute. The scroll parameter is a keyword. Because we're translating scroll into overflow, the keyword doesn't appear to match the attribute value" @@ -102,11 +114,10 @@ (defn- box-base "This should generally NOT be used as it is the basis for the box, scroller and border components" [& {:keys [size scroll h-scroll v-scroll width height min-width min-height justify align align-self - margin padding border l-border r-border t-border b-border radius bk-color child class style attr]}] + margin padding border l-border r-border t-border b-border radius bk-color child class-name class style attr]}] (let [s (merge - {:display "flex" :flex-flow "inherit"} + (flex-flow-style "inherit") (flex-child-style size) - (when scroll (scroll-style :overflow scroll)) (when h-scroll (scroll-style :overflow-x h-scroll)) (when v-scroll (scroll-style :overflow-y v-scroll)) @@ -114,12 +125,10 @@ (when height {:height height}) (when min-width {:min-width min-width}) (when min-height {:min-height min-height}) - ;(when (and f-container justify) (justify-style justify)) ;(when (and f-container align) (align-style :align-items align)) (when justify (justify-style justify)) (when align (align-style :align-items align)) - (when align-self (align-style :align-self align-self)) (when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left" (when padding {:padding padding}) @@ -135,7 +144,7 @@ style)] [:div (merge - {:class class :style s} + {:class (str class-name "display-flex " class) :style s} attr) child])) @@ -186,13 +195,13 @@ (defn line "Returns a component which produces a line between children in a v-box/h-box along the main axis. - Specify size in pixels and a stancard CSS colour. Defaults to a 1px red line" + Specify size in pixels and a stancard CSS colour. Defaults to a 1px lightgray line" [& {:keys [size color class style attr] :or {size "1px" color "lightgray"} :as args}] {:pre [(validate-args-macro line-args-desc args "line")]} (let [s (merge - {:flex (str "0 0 " size)} + (flex-child-style (str "0 0 " size)) {:background-color color} style)] [:div @@ -232,7 +241,7 @@ :as args}] {:pre [(validate-args-macro h-box-args-desc args "h-box")]} (let [s (merge - {:display "flex" :flex-flow "row nowrap"} + (flex-flow-style "row nowrap") (flex-child-style size) (if width {:width width}) (when height {:height height}) @@ -250,7 +259,7 @@ children)] (into [:div (merge - {:class (str "rc-h-box " class) :style s} + {:class (str "rc-h-box display-flex " class) :style s} attr)] children))) @@ -286,7 +295,7 @@ :as args}] {:pre [(validate-args-macro v-box-args-desc args "v-box")]} (let [s (merge - {:display "flex" :flex-flow "column nowrap"} + (flex-flow-style "column nowrap") (flex-child-style size) (when width {:width width}) (when height {:height height}) @@ -304,7 +313,7 @@ children)] (into [:div (merge - {:class (str "rc-v-box " class) :style s} + {:class (str "rc-v-box display-flex " class) :style s} attr)] children))) @@ -349,7 +358,8 @@ :margin margin :padding padding :child child - :class (str "rc-box " class) + :class-name "rc-box " + :class class :style style :attr attr)) @@ -417,7 +427,8 @@ :margin margin :padding padding :child child - :class (str "rc-scroller " class) + :class-name "rc-scroller " + :class class :style style :attr attr))) @@ -474,6 +485,7 @@ :b-border b-border :radius radius :child child - :class (str "rc-border " class) + :class-name "rc-border " + :class class :style style :attr attr))) \ No newline at end of file diff --git a/src/re_com/buttons.cljs b/src/re_com/buttons.cljs index ad09a812..b9358bb6 100644 --- a/src/re_com/buttons.cljs +++ b/src/re_com/buttons.cljs @@ -4,7 +4,7 @@ [re-com.validate :refer [extract-arg-data position? position-options-list button-size? button-sizes-list string-or-hiccup? css-style? html-attr? string-or-atom?] :refer-macros [validate-args-macro]] [re-com.popover :refer [popover-tooltip]] - [re-com.box :refer [h-box v-box box gap line]] + [re-com.box :refer [h-box v-box box gap line flex-child-style]] [reagent.core :as reagent])) ;; ------------------------------------------------------------------------------------ @@ -37,7 +37,7 @@ (merge {:class (str "rc-button btn " class) :style (merge - {:flex "none"} + (flex-child-style "none") style) :disabled disabled? :on-click (handler-fn @@ -49,7 +49,7 @@ attr) label]] [box - :style {:display "inline-flex"} + :class "display-inline-flex" :align :start :child (if tooltip [popover-tooltip @@ -308,8 +308,8 @@ (merge {:class (str "rc-hyperlink noselect " class) :style (merge - {:flex "none" - :cursor (if disabled? "not-allowed" "pointer") + (flex-child-style "none") + {:cursor (if disabled? "not-allowed" "pointer") :color (when disabled? "grey")} style) :on-click (handler-fn @@ -359,7 +359,7 @@ target (deref-or-value target) the-button [:a (merge {:class (str "rc-hyperlink-href noselect " class) - :style (merge {:flex "none"} + :style (merge (flex-child-style "none") style) :href href :target target} diff --git a/src/re_com/core.cljs b/src/re_com/core.cljs index e365f460..850d0568 100644 --- a/src/re_com/core.cljs +++ b/src/re_com/core.cljs @@ -21,6 +21,12 @@ (def alert-box alert/alert-box) (def alert-list alert/alert-list) +(def flex-child-style box/flex-child-style) +(def flex-flow-style box/flex-flow-style) +(def justify-style box/justify-style) +(def align-style box/align-style) +(def scroll-style box/scroll-style) + (def h-box box/h-box) (def v-box box/v-box) (def box box/box) diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index 7e549b42..05b6512a 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -6,7 +6,7 @@ [re-com.validate :refer [extract-arg-data goog-date? css-style? html-attr?] :refer-macros [validate-args-macro]] [cljs-time.predicates :refer [sunday?]] [cljs-time.format :refer [parse unparse formatters formatter]] - [re-com.box :refer [border h-box]] + [re-com.box :refer [border h-box flex-child-style]] [re-com.util :refer [deref-or-value]] [re-com.popover :refer [popover-content-wrapper popover-anchor-wrapper backdrop popover-border]])) @@ -242,9 +242,8 @@ (defn- anchor-button "Provide clickable field with current date label and dropdown button e.g. [ 2014 Sep 17 | # ]" [shown? model format] - [:div {:class "input-group noselect" - :style {:display "flex" - :flex "none"} + [:div {:class "input-group display-flex noselect" + :style (flex-child-style "none") :on-click (handler-fn (swap! shown? not))} [h-box :align :center @@ -283,7 +282,7 @@ :showing? shown? :position position :anchor [anchor-button shown? model format] - :popover [:div {:style {:flex "inherit"}} + :popover [:div {:style (flex-child-style "inherit")} (when shown? [backdrop :on-click cancel-popover]) [popover-border :position position diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index dcafffdd..df41d8c0 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -1,8 +1,9 @@ (ns re-com.dropdown (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value position-for-id item-for-id]] - [clojure.string :as string] + [re-com.box :refer [align-style flex-child-style]] [re-com.validate :refer [extract-arg-data vector-of-maps? css-style? html-attr? number-or-string?] :refer-macros [validate-args-macro]] + [clojure.string :as string] [reagent.core :as reagent])) ;; Inspiration: http://alxlit.name/bootstrap-chosen @@ -270,9 +271,9 @@ [:div (merge {:class (str "rc-dropdown chosen-container chosen-container-single noselect " (when @drop-showing? "chosen-container-active chosen-with-drop ") class) - :style (merge {:flex (if width "0 0 auto" "auto") - :align-self "flex-start" - :width (when width width)} + :style (merge (flex-child-style (if width "0 0 auto" "auto")) + (align-style :align-self :start) + {:width (when width width)} style)} attr) ;; Prevent user text selection [dropdown-top internal-model choices tab-index placeholder dropdown-click key-handler filter-box? drop-showing?] diff --git a/src/re_com/layout.cljs b/src/re_com/layout.cljs index 6a212c32..b577ebf8 100644 --- a/src/re_com/layout.cljs +++ b/src/re_com/layout.cljs @@ -1,6 +1,7 @@ (ns re-com.layout (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id sum-scroll-offsets]] + [re-com.box :refer [flex-child-style flex-flow-style]] [re-com.validate :refer [extract-arg-data string-or-hiccup? number-or-string?] :refer-macros [validate-args-macro]] [reagent.core :as reagent])) @@ -16,12 +17,13 @@ pos1 "3px" pos2 "3px" color (if over? "#999" "#ccc") - 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"}} + border (str "solid 1px " color) + flex-flow (str (if vertical? "row" "column") " nowrap")] + [:div {:class "display-flex" + :style (merge (flex-flow-style flex-flow) + {: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})}] @@ -81,34 +83,31 @@ mouseout-split #(reset! over? false) make-container-style (fn [class in-drag?] - (merge {:class class - :id container-id - :style {:display "flex" - :flex-flow "row nowrap" - :flex "auto" - :margin margin}} + (merge {:class (str "display-flex " class) + :id container-id + :style (merge (flex-child-style "auto") + (flex-flow-style "row nowrap") + {: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)) :on-mouse-out (handler-fn (mouseout event))}))) make-panel-style (fn [class in-drag? percentage] - {:class class - :style (merge {:display "flex" - :flex (str percentage " 1 0px") - :overflow "hidden" ;; TODO: Shouldn't have this...test removing it + {:class (str "display-flex " class) + :style (merge (flex-child-style (str percentage " 1 0px")) + {:overflow "hidden" ;; TODO: Shouldn't have this...test removing it } (when in-drag? {:pointer-events "none"}))}) make-splitter-style (fn [class] - {:class class + {:class (str "display-flex " class) :on-mouse-down (handler-fn (mousedown event)) :on-mouse-over (handler-fn (mouseover-split)) :on-mouse-out (handler-fn (mouseout-split)) - :style (merge {:display "flex" - :flex (str "0 0 " splitter-size) - :cursor "col-resize"} - (when @over? {:background-color "#f8f8f8"}))})] + :style (merge (flex-child-style (str "0 0 " splitter-size)) + {:cursor "col-resize"} + (when @over? {:background-color "#f8f8f8"}))})] (fn [] [:div (make-container-style "rc-h-layout" @dragging?) @@ -171,34 +170,31 @@ mouseout-split #(reset! over? false) make-container-style (fn [class in-drag?] - (merge {:class class - :id container-id - :style {:display "flex" - :flex-flow "column nowrap" - :flex "auto" - :margin margin}} + (merge {:class (str "display-flex " class) + :id container-id + :style (merge (flex-child-style "auto") + (flex-flow-style "column nowrap") + {: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)) :on-mouse-out (handler-fn (mouseout event))}))) make-panel-style (fn [class in-drag? percentage] - {:class class - :style (merge {:display "flex" - :flex (str percentage " 1 0px") - :overflow "hidden" ;; TODO: Shouldn't have this...test removing it + {:class (str "display-flex " class) + :style (merge (flex-child-style (str percentage " 1 0px")) + {:overflow "hidden" ;; TODO: Shouldn't have this...test removing it } (when in-drag? {:pointer-events "none"}))}) make-splitter-style (fn [class] - {:class class + {:class (str "display-flex " class) :on-mouse-down (handler-fn (mousedown event)) :on-mouse-over (handler-fn (mouseover-split)) :on-mouse-out (handler-fn (mouseout-split)) - :style (merge {:display "flex" - :flex (str "0 0 " splitter-size) - :cursor "row-resize"} - (when @over? {:background-color "#f8f8f8"}))})] + :style (merge (flex-child-style (str "0 0 " splitter-size)) + {:cursor "row-resize"} + (when @over? {:background-color "#f8f8f8"}))})] (fn [] [:div (make-container-style "re-v-layout" @dragging?) diff --git a/src/re_com/misc.cljs b/src/re_com/misc.cljs index 7cb97025..70d4fda2 100644 --- a/src/re_com/misc.cljs +++ b/src/re_com/misc.cljs @@ -2,7 +2,7 @@ (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value px]] [re-com.popover :refer [popover-tooltip]] - [re-com.box :refer [h-box v-box box gap line]] + [re-com.box :refer [h-box v-box box gap line flex-child-style align-style]] [re-com.validate :refer [extract-arg-data input-status-type? input-status-types-list regex? string-or-hiccup? css-style? html-attr? number-or-string? string-or-atom? throbber-size? throbber-sizes-list] :refer-macros [validate-args-macro]] @@ -70,15 +70,15 @@ "") (when (and status status-icon?) "has-feedback") ) - :style {:flex "auto"}} + :style (flex-child-style "auto")} [input-type (merge {:class (str "form-control noselect " class) :type (when (= input-type :text) "text") :rows (when (= input-type :textarea) (if rows rows 3)) :style (merge - {:flex "none" - :height height + (flex-child-style "none") + {:height height :padding-right "12px"} ;; override for when icon exists style) :placeholder placeholder @@ -125,19 +125,19 @@ } :on-mouse-over (handler-fn (when (and status-icon? status) (reset! showing? true))) :on-mouse-out (handler-fn (reset! showing? false))}] - :style {:flex "none" - :align-self :center - :font-size "130%" - :margin-left "4px"}] + :style (merge (flex-child-style "none") + (align-style :align-self :center) + {:font-size "130%" + :margin-left "4px"})] [:i {:class (str (if (= status :warning) "md-warning" "md-error") " form-control-feedback") - :style {:flex "none" - :align-self :center - :position "static" - :font-size "130%" - :margin-left "4px" - :opacity (if (and status-icon? status) "1" "0") - :width "auto" - :height "auto"} + :style (merge (flex-child-style "none") + (align-style :align-self :center) + {:position "static" + :font-size "130%" + :margin-left "4px" + :opacity (if (and status-icon? status) "1" "0") + :width "auto" + :height "auto"}) :title status-tooltip}]))]])))) @@ -183,8 +183,8 @@ :children [[:input {:class "rc-checkbox" :type "checkbox" - :style (merge {:flex "none" - :cursor cursor} + :style (merge (flex-child-style "none") + {:cursor cursor} style) :disabled disabled? :checked model @@ -193,8 +193,8 @@ [:span {:on-click (handler-fn (callback-fn)) :class label-class - :style (merge {:padding-left "8px" - :flex "none" + :style (merge (flex-child-style "none") + {:padding-left "8px" :cursor cursor} label-style)} label])]])) @@ -233,8 +233,8 @@ {:class "rc-radio-button" :type "radio" :style (merge - {:flex "none" - :cursor cursor} + (flex-child-style "none") + {:cursor cursor} style) :disabled disabled? :checked (= model value) @@ -243,8 +243,8 @@ [:span {:on-click (handler-fn (callback-fn)) :class label-class - :style (merge {:padding-left "8px" - :flex "none" + :style (merge (flex-child-style "none") + {:padding-left "8px" :cursor cursor} label-style)} label])]])) @@ -287,8 +287,11 @@ (merge {:class (str "rc-slider " class) :type "range" + ;:orient "vertical" ;; Make Firefox slider vertical (doesn't work because React ignores it, I think) :style (merge - {:flex "none" + (flex-child-style "none") + {;:-webkit-appearance "slider-vertical" ;; TODO: Make a :orientation (:horizontal/:vertical) option + ;:writing-mode "bt-lr" ;; Make IE slider vertical :width (if width width "400px") :cursor (if disabled? "not-allowed" "default")} style) @@ -327,8 +330,8 @@ :child [:div (merge {:class (str "rc-progress-bar progress " class) - :style (merge {:flex "none" - :width width} + :style (merge (flex-child-style "none") + {:width width} style)} attr) [:div diff --git a/src/re_com/modal_panel.cljs b/src/re_com/modal_panel.cljs index 93f15b91..7c3e81ef 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -27,9 +27,8 @@ {:pre [(validate-args-macro modal-panel-args-desc args "modal-panel")]} (fn [] [:div - (merge {:class (str "rc-modal-panel " class) ;; Containing div - :style (merge {:display "flex" - :position "fixed" + (merge {:class (str "rc-modal-panel display-flex " class) ;; Containing div + :style (merge {:position "fixed" :left "0px" :top "0px" :width "100%" diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index f0d25e3f..c1dec6b5 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -1,6 +1,7 @@ (ns re-com.popover (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [get-element-by-id px deref-or-value sum-scroll-offsets]] + [re-com.box :refer [h-box flex-child-style flex-flow-style align-style]] [re-com.validate :refer [extract-arg-data position? position-options-list popover-status-type? popover-status-types-list number-or-string? string-or-hiccup? string-or-atom? vector-of-maps? css-style? html-attr?] :refer-macros [validate-args-macro]] [clojure.string :as string] @@ -243,14 +244,13 @@ {:pre [(validate-args-macro popover-title-args-desc args "popover-title")]} (assert (or ((complement nil?) showing?) ((complement nil?) close-callback)) "Must specify either showing? OR close-callback") (let [close-button? (if (nil? close-button?) true close-button?)] - [:h3.popover-title {:style {:font-size "18px" - :flex "inherit"}} - [:div {:style {:display "flex" - :flex-flow "row nowrap" - :justify-content "space-between" - :align-items "center"}} - title - (when close-button? [close-button showing? close-callback])]])) + [:h3.popover-title {:style (merge (flex-child-style "inherit") + {:font-size "18px"})} + [h-box + :justify :between + :align :center + :children [title + (when close-button? [close-button showing? close-callback])]]])) ;;-------------------------------------------------------------------------------------------------- @@ -306,7 +306,7 @@ {:pre [(validate-args-macro popover-content-wrapper-args-desc args "popover-content-wrapper")]} [:div {:class "popover-content-wrapper" - :style (merge {:flex "inherit"} + :style (merge (flex-child-style "inherit") (when no-clip? {:position "fixed" :left (px @left-offset) :top (px @top-offset)}) @@ -352,23 +352,20 @@ (let [[orientation arrow-pos] (split-keyword position "-") ;; only need orientation here place-anchor-before? (case orientation (:left :above) false true) flex-flow (case orientation (:left :right) "row" "column")] - [:div {:class "rc-popover-anchor-wrapper" - :style (merge {:display "inline-flex" - :flex "inherit"} + [:div {:class "rc-popover-anchor-wrapper display-inline-flex" + :style (merge (flex-child-style "inherit") style)} [:div ;; Wrapper around the anchor and the "point" - {:class "rc-point-wrapper" - :style {:display "inline-flex" - :flex-flow flex-flow - :align-items "center"}} + {:class "rc-point-wrapper display-inline-flex" + :style (merge (flex-flow-style flex-flow) + (align-style :align-items :center))} (when place-anchor-before? anchor) (when @showing? [:div ;; The "point" that connects the anchor to the popover - {:class "rc-popover-point" - :style {:position "relative" - :z-index "4" - :display "inline-flex" - :flex "auto"}} + {:class "rc-popover-point display-inline-flex" + :style (merge (flex-child-style "auto") + {:position "relative" + :z-index "4"})} popover]) (when-not place-anchor-before? anchor)]])) diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index 99017a69..1bd1cacf 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -1,6 +1,7 @@ (ns re-com.tabs (:require-macros [re-com.core :refer [handler-fn]]) (:require [re-com.util :refer [deref-or-value]] + [re-com.box :refer [flex-child-style]] [re-com.validate :refer [extract-arg-data vector-of-maps?] :refer-macros [validate-args-macro]])) @@ -25,7 +26,7 @@ _ (assert (not-empty (filter #(= current (:id %)) tabs)) "model not found in tabs vector")] [:ul {:class "rc-tabs nav nav-tabs noselect" - :style {:flex "none"}} + :style (flex-child-style "none")} (for [t tabs] (let [id (:id t) label (:label t) @@ -51,7 +52,7 @@ _ (assert (not-empty (filter #(= current (:id %)) tabs)) "model not found in tabs vector")] [:div {:class (str "rc-tabs noselect btn-group" (if vertical? "-vertical")) - :style {:flex "none"}} + :style (flex-child-style "none")} (for [t tabs] (let [id (:id t) label (:label t) @@ -95,7 +96,7 @@ _ (assert (not-empty (filter #(= current (:id %)) tabs)) "model not found in tabs vector")] [:ul {:class (str "rc-tabs noselect nav nav-pills" (when vertical? " nav-stacked")) - :style {:flex "none"} + :style (flex-child-style "none") :role "tabslist"} (for [t tabs] (let [id (:id t) diff --git a/src/re_com/text.cljs b/src/re_com/text.cljs index 098874d6..cc8e8e08 100644 --- a/src/re_com/text.cljs +++ b/src/re_com/text.cljs @@ -1,6 +1,6 @@ (ns re-com.text (:require-macros [re-com.core :refer [handler-fn]]) - (:require [re-com.box :refer [v-box box line]] + (:require [re-com.box :refer [v-box box line flex-child-style]] [re-com.validate :refer [extract-arg-data title-levels-list title-level-type? css-style? html-attr? string-or-hiccup?] :refer-macros [validate-args-macro]])) @@ -27,11 +27,12 @@ [box :width width :align :start - :style {:display "inline-flex"} + :class "display-inline-flex" :child [:span (merge {:class (str "rc-label " class) - :style (merge {:flex "none"} style)} + :style (merge (flex-child-style "none") + style)} (when on-click {:on-click (handler-fn (on-click))}) attr) @@ -58,8 +59,8 @@ {:pre [(validate-args-macro title-args-desc args "title")]} (let [preset-class (if (nil? level) "" (name level))] [v-box - :children [[:span (merge {:class (str "rc-title " preset-class " " class) - :style (merge {:display "flex" :flex "none"} + :children [[:span (merge {:class (str "rc-title display-flex " preset-class " " class) + :style (merge (flex-child-style "none") style)} attr) label] diff --git a/src/re_com/tour.cljs b/src/re_com/tour.cljs index 8176cb31..2da8b9e7 100644 --- a/src/re_com/tour.cljs +++ b/src/re_com/tour.cljs @@ -1,6 +1,7 @@ (ns re-com.tour (:require-macros [re-com.core :refer [handler-fn]]) (:require [reagent.core :as reagent] + [re-com.box :refer [flex-child-style]] [re-com.buttons :refer [button]])) @@ -78,7 +79,8 @@ (let [on-first-button (= @(:current-step tour) 0) on-last-button (= @(:current-step tour) (dec (count (:steps tour))))] [:div - [:hr {:style {:margin "10px 0 10px" :flex "none"}}] + [:hr {:style (merge (flex-child-style "none") + {:margin "10px 0 10px"})}] (when-not on-first-button [button :label "Previous" diff --git a/src/re_com/validate.cljs b/src/re_com/validate.cljs index 621527cd..820a6fbe 100644 --- a/src/re_com/validate.cljs +++ b/src/re_com/validate.cljs @@ -226,8 +226,10 @@ :transform :transform-origin :transform-style :transition :transition-delay :transition-duration :transition-property :transition-timing-function :turn :unicode-bidi :unicode-range :unset :vertical-align :vh :visibility :vmax :vmin :vw :white-space :widows :width :will-change :word-break :word-spacing :word-wrap :writing-mode :z-index - ; ----- Webkit specific styles - :-webkit-user-select}) ;; https://developer.mozilla.org/en-US/docs/Web/CSS/user-select + ; ----- Browser specific styles + ::-webkit-user-select :-moz-user-select :-ms-user-select :user-select + :-webkit-flex-flow :-webkit-flex-direction :-webkit-flex-wrap :-webkit-justify-content :-webkit-align-items :-webkit-align-content + :-webkit-flex :-webkit-flex-grow :-webkit-flex-shrink :-webkit-flex-basis :-webkit-order :-webkit-align-self}) (defn string-or-hiccup? "Returns true if the passed argument is either valid hiccup or a string, otherwise false/error" diff --git a/src/re_demo/checkbox.cljs b/src/re_demo/checkbox.cljs index c6b8fe59..95009cca 100644 --- a/src/re_demo/checkbox.cljs +++ b/src/re_demo/checkbox.cljs @@ -8,7 +8,7 @@ (defn right-arrow [] [:svg - {:height 20 :width 25 :style {:display "flex" :align-self "center"} } + {:height 20 :width 25} [:line {:x1 "0" :y1 "10" :x2 "20" :y2 "10" :style {:stroke "#888"}}] [:polygon {:points "20,6 20,14 25,10" :style {:stroke "#888" :fill "#888"}}]]) @@ -17,7 +17,7 @@ (defn left-arrow [] [:svg - {:height 20 :width 25 :style {:display "flex" :align-self "center"} } + {:height 20 :width 25} [:line {:x1 "5" :y1 "10" :x2 "20" :y2 "10" :style {:stroke "#888"}}] [:polygon {:points "5,6 5,14 0,10" :style {:stroke "#888" :fill "#888"}}]]) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 8c9fa0ff..c6858549 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -1,84 +1,151 @@ (ns re-demo.h-box - (:require [re-com.core :refer [h-box v-box box gap line scroller border button hyperlink-href]] - [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc]] + (:require [re-com.core :refer [h-box v-box box gap line scroller border label title button hyperlink-href slider]] + [re-com.box :refer [h-box-args-desc v-box-args-desc box-args-desc gap-args-desc line-args-desc scroller-args-desc border-args-desc flex-child-style]] + [re-com.util :refer [px]] [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text paragraphs]] - [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]])) + [re-com.validate :refer [extract-arg-data string-or-hiccup? alert-type? vector-of-maps?]] + [reagent.core :as reagent])) -(def rounded-panel {:background-color "#fff4f4" - :border "1px solid lightgray" - :border-radius "4px" - :margin "4px" - :padding "8px" - :flex "1"}) +(def rounded-panel (merge (flex-child-style "1") + {:background-color "#fff4f4" + :border "1px solid lightgray" + :border-radius "4px" + :margin "4px" + :padding "8px"})) + +(def h-box-style {:border-right "dashed 1px blue" :overflow "hidden"}) +(def v-box-style {:border-bottom "dashed 1px blue" :overflow "hidden"}) (defn panel [] - [v-box - :size "auto" - :gap "10px" - :children [[panel-title [:span "[h-box ... ]" - [github-hyperlink "Component Source" "src/re_com/box.cljs"] - [github-hyperlink "Page Source" "src/re_demo/h_box.cljs"]]] + (let [container-size (reagent/atom 500) + gap-size (reagent/atom 0) + box1-size (reagent/atom 60) + box2-size (reagent/atom 100)] + (fn + [] + [v-box + :size "auto" + :gap "10px" + :children [[panel-title [:span "[h-box ... ]" + [github-hyperlink "Component Source" "src/re_com/box.cljs"] + [github-hyperlink "Page Source" "src/re_demo/h_box.cljs"]]] - [h-box - :gap "100px" - :children [[v-box - :gap "10px" - :width "450px" - :children [[component-title "Notes"] - [status-text "Stable"] - [paragraphs - [: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"] - [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"]]]) + [h-box + :gap "100px" + :children [[v-box + :gap "10px" + :width "450px" + :children [[component-title "Notes"] + [status-text "Stable"] + [paragraphs + [: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"] + [paragraphs + [:p "Descriptions removed for now."] + ;[: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."] + #_[:p "Dashed red lines have been added between the boxes."]] + [title :level :level3 :label "Container (h-box/v-box) - red border"] + [h-box + :gap "10px" + :children [[box :align :start :width "100px" :child [:span "h/v-box " [:code ":size"]]] + [slider + :model container-size + :min 0 + :max 800 + :width "200px" + :on-change #(reset! container-size %)] + [:span @container-size "px"]]] + [h-box + :gap "10px" + :children [[box :align :start :width "100px" :child [:span "gap " [:code ":size"]]] + [slider + :model gap-size + :min 0 + :max 50 + :width "200px" + :on-change #(reset! gap-size %)] + [:span @gap-size "px"]]] + [gap :size "10px"] + [title :level :level3 :label "Children (box) - blue border at end of box"] + [h-box + :gap "10px" + :children [[box :align :start :width "100px" :child [:span "Box1 " [:code ":size"]]] + [slider + :model box1-size + :min 0 + :max 100 + :width "200px" + :on-change #(reset! box1-size %)] + [:span @box1-size "%" [:span {:style {:font-size "10px"}} " -- Note: This also sets Box3 to (100 - Box1)"]]]] + [h-box + :gap "10px" + :children [[box :align :start :width "100px" :child [:span "Box2 " [:code ":size"]]] + [slider + :model box2-size + :min 0 + :max 500 + :width "200px" + :on-change #(reset! box2-size %)] + [:span @box2-size "px"]]] + [gap :size "10px"] + [h-box + :width (px @container-size) + :height "100px" + :gap (px @gap-size) + :style {:border "dashed 1px red"} + :children [[box + :size (str @box1-size "%") + :style h-box-style + :child [:div {:style rounded-panel} "Box 1" [:br] ":size " (str @box1-size "%")]] + ;[line :size "0px" :color "initial" :style {:border-left "dashed 1px red"}] + [box + :size (px @box2-size) + :style h-box-style + :child [:div {:style rounded-panel} "Box 2" [:br] ":size " (px @box2-size)]] + ;[line :size "0px" :color "initial" :style {:border-left "dashed 1px red"}] + [box + :size (str (- 100 @box1-size) "%") + :style h-box-style + :child [:div {:style rounded-panel} "Box 3" [:br] ":size " (str (- 100 @box1-size) "%")]]]] + [paragraphs + [:br] + [:p "Now here is a v-box with exactly the same children."]] + [v-box + :width "100px" + :height (px @container-size) + :gap (px @gap-size) + :style {:border "dashed 1px red"} + :children [[box + :size (str @box1-size "%") + :style v-box-style + :child [:div {:style rounded-panel} "Box 1" [:br] ":size " (str @box1-size "%")]] + ;[line :size "0px" :color "initial" :style {:border-top "dashed 1px red"}] + [box + :size (px @box2-size) + :style v-box-style + :child [:div {:style rounded-panel} "Box 2" [:br] ":size " (px @box2-size)]] + ;[line :size "0px" :color "initial" :style {:border-top "dashed 1px red"}] + [box + :size (str (- 100 @box1-size) "%") + :style v-box-style + :child [:div {:style rounded-panel} "Box 3" [:br] ":size " (str (- 100 @box1-size) "%")]]]]]]]] + [gap :size "30px"]]]))) ;;==================================================================================== diff --git a/src/re_demo/layouts.cljs b/src/re_demo/layouts.cljs index a85d117a..db26cbf6 100644 --- a/src/re_demo/layouts.cljs +++ b/src/re_demo/layouts.cljs @@ -1,14 +1,14 @@ (ns re-demo.layouts - (:require [re-com.core :refer [h-box v-box box gap line scroller border h-layout v-layout title]] + (:require [re-com.core :refer [h-box v-box box gap line scroller border h-layout v-layout title flex-child-style]] [re-com.layout :refer [h-layout-args-desc v-layout-args-desc]] [re-demo.utils :refer [panel-title component-title args-table github-hyperlink status-text paragraphs]])) -(def rounded-panel {:background-color "#fff4f4" - :border "1px solid lightgray" - :border-radius "4px" - :padding "0px 20px 0px 20px" - :flex "1"}) +(def rounded-panel (merge (flex-child-style "1") + {:background-color "#fff4f4" + :border "1px solid lightgray" + :border-radius "4px" + :padding "0px 20px 0px 20px"})) (defn layout-panel-title [text] diff --git a/src/re_demo/popovers.cljs b/src/re_demo/popovers.cljs index 780d3144..e3bd4217 100644 --- a/src/re_demo/popovers.cljs +++ b/src/re_demo/popovers.cljs @@ -1,6 +1,6 @@ (ns re-demo.popovers (:require [re-com.core :refer [h-box v-box box gap line scroller border label title input-text checkbox radio-button button hyperlink - single-dropdown popover-content-wrapper popover-anchor-wrapper popover-border popover-tooltip] + single-dropdown popover-content-wrapper popover-anchor-wrapper popover-border popover-tooltip flex-child-style] :refer-macros [handler-fn]] [re-com.popover :refer [popover-content-wrapper-args-desc popover-anchor-wrapper-args-desc popover-border-args-desc popover-tooltip-args-desc]] @@ -147,7 +147,10 @@ :align :center :style {:border "1px solid lightgrey" ;; turn a v-box into a border-scroller - this is a special case :overflow (when @add-scroller? "overlay")} ;; Use overlay instead of scroll, otherwise things jump around - :children [[:span {:style {:flex "inherit" :color "lightgrey"}} (clojure.string/join (repeat 42 "text "))] + :children [[:span + {:style (merge (flex-child-style "inherit") + {:color "lightgrey"})} + (clojure.string/join (repeat 42 "text "))] [popover-anchor-wrapper :showing? showing? :position @curr-position @@ -168,7 +171,10 @@ (if @no-clip? [:span {:style {:color "brown"}} [:strong "NOTE: "] (str no-clip-text (when @long-paragraph? extra-text))] [:span (str standard-text (when @long-paragraph? extra-text))]))]] - [:span {:style {:flex "inherit" :color "lightgrey"}} (clojure.string/join (repeat (if @add-scroller? 98 49) "text "))]]] + [:span + {:style (merge (flex-child-style "inherit") + {:color "lightgrey"})} + (clojure.string/join (repeat (if @add-scroller? 98 49) "text "))]]] [v-box :gap "15px" :align :start diff --git a/src/re_demo/slider.cljs b/src/re_demo/slider.cljs index b214b09a..c3b8a3b8 100644 --- a/src/re_demo/slider.cljs +++ b/src/re_demo/slider.cljs @@ -41,7 +41,7 @@ :min slider-min :max slider-max :step slider-step - :width "200px" + :width "300px" :on-change #(reset! slider-val (str %)) :disabled? disabled?] [gap :size "0px"] diff --git a/src/re_demo/title.cljs b/src/re_demo/title.cljs index 14454f55..0f87ce89 100644 --- a/src/re_demo/title.cljs +++ b/src/re_demo/title.cljs @@ -56,7 +56,7 @@ :model underline? :on-change #(reset! underline? %)] [gap :size "40px"] - [title :level :level1 :underline? @underline? :attr {:blah true} :label ":level1 - Light 42px"] ;; TODO: Remove blah code + [title :level :level1 :underline? @underline? :label ":level1 - Light 42px"] [title :level :level2 :underline? @underline? :label ":level2 - Light 26px"] [title :level :level3 :underline? @underline? :label ":level3 - Semibold 15px"] [title :level :level4 :underline? @underline? :label ":level4 - Semibold 15px"]]]]]]]]])))) diff --git a/src/re_demo/tour.cljs b/src/re_demo/tour.cljs index cf1416bf..7771d0f1 100644 --- a/src/re_demo/tour.cljs +++ b/src/re_demo/tour.cljs @@ -1,5 +1,5 @@ (ns re-demo.tour - (:require [re-com.core :refer [h-box v-box box gap make-tour start-tour make-tour-nav button popover-content-wrapper popover-anchor-wrapper]] + (:require [re-com.core :refer [h-box v-box box gap align-style make-tour start-tour make-tour-nav button popover-content-wrapper popover-anchor-wrapper]] [re-demo.utils :refer [panel-title component-title github-hyperlink status-text paragraphs]])) @@ -23,34 +23,32 @@ :showing? (:step1 demo-tour) :position :above-center :anchor [button - :label "Start Tour!" + :label "Start Tour!" :on-click #(start-tour demo-tour) - :style {:font-weight "bold" :color "yellow"} - :class "btn-info"] + :style {:font-weight "bold" :color "yellow"} + :class "btn-info"] :popover [popover-content-wrapper - :showing? (:step1 demo-tour) - :position :above-center - :width "250px" - :title [:strong "Tour 1 of 4"] - :body [:div "So, you clicked the button below and the tour started. - Click the 'Next' button to proceed to the next step." - [make-tour-nav demo-tour]]] - :style {:align-self "center"}] + :showing? (:step1 demo-tour) + :position :above-center + :width "250px" + :title [:strong "Tour 1 of 4"] + :body [:div "So, you clicked the button below and the tour started. Click the 'Next' button to proceed to the next step." + [make-tour-nav demo-tour]]] + :style (align-style :align-self :center)] [popover-anchor-wrapper :showing? (:step2 demo-tour) :position :below-center :anchor [button - :label "another element in the tour" + :label "another element in the tour" :class "btn-info"] :popover [popover-content-wrapper - :showing? (:step2 demo-tour) - :position :below-center - :width "250px" - :title [:strong "Tour 2 of 4"] - :body [:div "Here's the second tour popover. Now you can advance to the next one, or go back - to the first, or finish the tour by clicking the close 'X' button above." - [make-tour-nav demo-tour]]] - :style {:align-self "flex-end"}] + :showing? (:step2 demo-tour) + :position :below-center + :width "250px" + :title [:strong "Tour 2 of 4"] + :body [:div "Here's the second tour popover. Now you can advance to the next one, or go back to the first, or finish the tour by clicking the close 'X' button above." + [make-tour-nav demo-tour]]] + :style (align-style :align-self :end)] [popover-anchor-wrapper :showing? (:step3 demo-tour) :position :right-below @@ -65,10 +63,9 @@ :on-cancel #(reset! (:step3 demo-tour) false) :backdrop-opacity 0.5 :title [:strong "Tour 3 of 4"] - :body [:div "This is the penultimate tour popover. Using the backdrop feature, - you can focus attention on the item you are explaining." + :body [:div "This is the penultimate tour popover. Using the backdrop feature, you can focus attention on the item you are explaining." [make-tour-nav demo-tour]]] - :style {:align-self "center"}] + :style (align-style :align-self :center)] [popover-anchor-wrapper :showing? (:step4 demo-tour) :position :above-center @@ -76,13 +73,12 @@ :label "last one" :class "btn-info"] :popover [popover-content-wrapper - :showing? (:step4 demo-tour) - :position :above-center - :width "420px" - :title [:strong "Tour 4 of 4"] - :body [:div "Lucky last tour popover. The tour component renders a 'Finish' button instead - of a 'Next button for the last popover." - [make-tour-nav demo-tour]]]]]]]]))) + :showing? (:step4 demo-tour) + :position :above-center + :width "420px" + :title [:strong "Tour 4 of 4"] + :body [:div "Lucky last tour popover. The tour component renders a 'Finish' button instead of a 'Next button for the last popover." + [make-tour-nav demo-tour]]]]]]]]))) (defn panel2 diff --git a/src/re_demo/utils.cljs b/src/re_demo/utils.cljs index 0e003ab2..1ba1732c 100644 --- a/src/re_demo/utils.cljs +++ b/src/re_demo/utils.cljs @@ -1,5 +1,5 @@ (ns re-demo.utils - (:require [re-com.core :refer [h-box v-box box gap line title label hyperlink-href]])) + (:require [re-com.core :refer [h-box v-box box gap line title label hyperlink-href align-style]])) (defn panel-title @@ -58,12 +58,11 @@ [[:span.semibold.all-small-caps "default:"] [:span.semibold (str default)]]) [[:span.semibold.all-small-caps "required"]])] [h-box - :style { :background (if odd-row? "#F4F4F4" "#FCFCFC" )} - :children [[:span {:class "semibold" - :style {:width name-width - :padding-left "15px" - :align-self :center - }} + :style {:background (if odd-row? "#F4F4F4" "#FCFCFC")} + :children [[:span {:class "semibold" + :style (merge (align-style :align-self :center) + {:width name-width + :padding-left "15px"})} (str (:name arg))] [line :size "1px" :color "white"] [v-box