From 32125d0eb1c4617b03d511d5cd57b4bc63a434db Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Wed, 9 Sep 2015 17:24:47 +1000 Subject: [PATCH 1/4] id-fn and label-fn fixes and improvements: - In tabs: - Fixed validate-fn (fn? => ifn?) for :id-fn and :label-fn to allow keywords - Improved types and descriptions - In selection-list - Fixed default for :label-fn from 'str to :label - Improved types and descriptions - In dropdown: - Fixed validate-fn (vector? => vector-of-maps?) for :choices --- src/re_com/dropdown.cljs | 2 +- src/re_com/selection_list.cljs | 30 +++++++++++++++--------------- src/re_com/tabs.cljs | 6 +++--- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 717c40e7..f7860b29 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -190,7 +190,7 @@ ;;-------------------------------------------------------------------------------------------------- (def single-dropdown-args-desc - [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector? :description [:span "Each is expected to have an id, label and, optionally, a group, provided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} + [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector-of-maps? :description [:span "Each is expected to have an id, label and, optionally, a group, provided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} {:name :id-fn :required false :default :id :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its unique identifier (aka id)"]} {:name :label-fn :required false :default :label :type "choice -> string | hiccup" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its displayable label"]} {:name :group-fn :required false :default :group :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its group identifier"]} diff --git a/src/re_com/selection_list.cljs b/src/re_com/selection_list.cljs index f17d39dd..b48fb138 100644 --- a/src/re_com/selection_list.cljs +++ b/src/re_com/selection_list.cljs @@ -93,20 +93,20 @@ (def selection-list-args-desc - [{:name :choices :required true :type "vector of maps | atom" :validate-fn vector-of-maps? :description [:span "the selectable items. Elements can be strings or more interesting data items like {:label \"some name\" :sort 5}. Also see " [:code ":label-fn"] " below (list of maps also allowed)"]} - {:name :model :required true :type "set of :ids within :choices | atom" :validate-fn set-or-atom? :description "the currently selected items. Note: items are considered distinct"} - {:name :on-change :required true :type "set of :ids -> nil | atom" :validate-fn fn? :description [:span "a callback which will be passed set of the ids (as defined by " [:code ":id-fn"] ") of the selected items"]} - {:name :id-fn :required false :default :id :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its unique identifier (aka id)"]} - {:name :multi-select? :required false :default true :type "boolean | atom" :description "when true, use check boxes, otherwise radio buttons"} - {:name :as-exclusions? :required false :default false :type "boolean | atom" :description "when true, selected items are shown with struck-out labels"} - {:name :required? :required false :default false :type "boolean | atom" :description "when true, at least one item must be selected. Note: being able to un-select a radio button is not a common use case, so this should probably be set to true when in single select mode"} - {:name :width :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"250px\". When specified, item labels may be clipped. Otherwise based on widest label"} - {:name :height :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"150px\". Size beyond which items will scroll"} - {:name :max-height :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"150px\". If there are less items then this height, box will shrink. If there are more, items will scroll"} - {:name :disabled? :required false :default false :type "boolean | atom" :description "when true, the time input will be disabled. Can be atom or value"} - {:name :hide-border? :required false :default false :type "boolean | atom" :description "when true, the list will be displayed without a border"} - {:name :item-renderer :required false :type "-> nil | atom" :validate-fn fn? :description "a function which takes no params and returns nothing. Called for each element during setup, the returned component renders the element, responds to clicks etc."} - {:name :label-fn :required false :default 'str :type "-> nil | atom" :validate-fn ifn? :description "a function which takes no params and returns nothing. Called for each element to get label string"}]) + [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector-of-maps? :description [:span "the selectable items. Elements can be strings or more interesting data items like {:label \"some name\" :sort 5}. Also see " [:code ":label-fn"] " below (list of maps also allowed)"]} + {:name :model :required true :type "set of :ids within :choices | atom" :validate-fn set-or-atom? :description "the currently selected items. Note: items are considered distinct"} + {:name :on-change :required true :type "set of :ids -> nil | atom" :validate-fn fn? :description [:span "a callback which will be passed set of the ids (as defined by " [:code ":id-fn"] ") of the selected items"]} + {:name :id-fn :required false :default :id :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its unique identifier (aka id)"]} + {:name :label-fn :required false :default :label :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its displayable label"]} + {:name :multi-select? :required false :default true :type "boolean | atom" :description "when true, use check boxes, otherwise radio buttons"} + {:name :as-exclusions? :required false :default false :type "boolean | atom" :description "when true, selected items are shown with struck-out labels"} + {:name :required? :required false :default false :type "boolean | atom" :description "when true, at least one item must be selected. Note: being able to un-select a radio button is not a common use case, so this should probably be set to true when in single select mode"} + {:name :width :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"250px\". When specified, item labels may be clipped. Otherwise based on widest label"} + {:name :height :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"150px\". Size beyond which items will scroll"} + {:name :max-height :required false :type "string | atom" :validate-fn string-or-atom? :description "a CSS style e.g. \"150px\". If there are less items then this height, box will shrink. If there are more, items will scroll"} + {:name :disabled? :required false :default false :type "boolean | atom" :description "when true, the time input will be disabled. Can be atom or value"} + {:name :hide-border? :required false :default false :type "boolean | atom" :description "when true, the list will be displayed without a border"} + {:name :item-renderer :required false :type "-> nil | atom" :validate-fn fn? :description "a function which takes no params and returns nothing. Called for each element during setup, the returned component renders the element, responds to clicks etc."}]) ;;TODO hide hover highlights for links when disabled (defn- list-container @@ -140,7 +140,7 @@ :disabled? false :hide-border? false :id-fn :id - :label-fn str} + :label-fn :label} (fmap deref-or-value attributes))) (defn selection-list diff --git a/src/re_com/tabs.cljs b/src/re_com/tabs.cljs index ba3eed8b..81dfc73a 100644 --- a/src/re_com/tabs.cljs +++ b/src/re_com/tabs.cljs @@ -10,11 +10,11 @@ ;;-------------------------------------------------------------------------------------------------- (def tabs-args-desc - [{:name :tabs :required true :type "vector | atom" :validate-fn vector-of-maps? :description "one element in the vector for each tab. Typically, each element is a map with :id and :label keys"} + [{:name :tabs :required true :type "vector of tabs | atom" :validate-fn vector-of-maps? :description "one element in the vector for each tab. Typically, each element is a map with :id and :label keys"} {:name :model :required true :type "unique-id | atom" :description "the unique identifier of the currently selected tab"} {:name :on-change :required true :type "unique-id -> nil" :validate-fn fn? :description "called when user alters the selection. Passed the unique identifier of the selection"} - {:name :id-fn :required false :default :id :type "map -> anything" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns the unique identifier for this tab"]} - {:name :label-fn :required false :default :label :type "map -> string | hiccup" :validate-fn fn? :description [:span "given an element of " [:code ":tabs"] ", returns what should be displayed in the tab"]} + {:name :id-fn :required false :default :id :type "tab -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":tabs"] ", returns its unique identifier (aka id)"]} + {:name :label-fn :required false :default :label :type "tab -> string | hiccup" :validate-fn ifn? :description [:span "given an element of " [:code ":tabs"] ", returns its displayable label"]} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "CSS styles to add or override (for each individual tab rather than the container)"}]) (defn horizontal-tabs From bf51d2d43c0f1a9362bd2fa30606aaec1a8f06fb Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Wed, 9 Sep 2015 17:30:42 +1000 Subject: [PATCH 2/4] Changed arg order of dropdown --- src/re_com/dropdown.cljs | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index f7860b29..1e0dd353 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -191,11 +191,11 @@ (def single-dropdown-args-desc [{:name :choices :required true :type "vector of choices | atom" :validate-fn vector-of-maps? :description [:span "Each is expected to have an id, label and, optionally, a group, provided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} + {:name :model :required true :type "the id of a choice | atom" :description [:span "the id of the selected choice. If nil, " [:code ":placeholder"] " text is shown"]} + {:name :on-change :required true :type "id -> nil" :validate-fn fn? :description [:span "called when a new choice is selected. Passed the id of new choice"] } {:name :id-fn :required false :default :id :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its unique identifier (aka id)"]} {:name :label-fn :required false :default :label :type "choice -> string | hiccup" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its displayable label"]} {:name :group-fn :required false :default :group :type "choice -> anything" :validate-fn ifn? :description [:span "given an element of " [:code ":choices"] ", returns its group identifier"]} - {:name :model :required true :type "the id of a choice | atom" :description [:span "the id of the selected choice. If nil, " [:code ":placeholder"] " text is shown"]} - {:name :on-change :required true :type "id -> nil" :validate-fn fn? :description [:span "called when a new choice is selected. Passed the id of new choice"] } {:name :disabled? :required false :default false :type "boolean | atom" :description "if true, no user selection is allowed"} {:name :filter-box? :required false :default false :type "boolean" :description "if true, a filter text field is placed at the top of the dropdown"} {:name :regex-filter? :required false :default false :type "boolean | atom" :description "if true, the filter text field will support JavaScript regular expressions. If false, just plain text"} From 32f11128f1a5f463d717124c08177aa648d887db Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Thu, 15 Oct 2015 15:40:18 +1100 Subject: [PATCH 3/4] Popover fixes and changes: - Added two new `popover-content-wrapper` arguments: - `:position-offset` - px offset of the arrow from its default `:position` along the popover border. Is ignored when `:position` is one of the `:xxx-center` variants. Positive numbers slide the popover toward its center. - `:arrow-gap` - px gap between the anchor and the arrow tip. Positive numbers push the popover away from the anchor. - Modified `datepicker-dropdown` to make use of these new args in place of hacking into `popover-border` and `backdrop`. - In `popover-content-wrapper`, the `:arrow-length` argument never worked. Although it drew an arrow of the correct size, it positioned the arrow 11px away from the popover no matter what number was specified. --- src/re_com/datepicker.cljs | 24 ++++---- src/re_com/popover.cljs | 119 ++++++++++++++++++++----------------- 2 files changed, 75 insertions(+), 68 deletions(-) diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index 87376d9c..2ae778d6 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -8,7 +8,7 @@ [cljs-time.format :refer [parse unparse formatters formatter]] [re-com.box :refer [border h-box flex-child-style]] [re-com.util :refer [deref-or-value now->utc]] - [re-com.popover :refer [popover-anchor-wrapper backdrop popover-border]])) + [re-com.popover :refer [popover-anchor-wrapper popover-content-wrapper]])) ;; Loosely based on ideas: https://github.com/dangrossman/bootstrap-daterangepicker @@ -248,7 +248,7 @@ {:pre [(validate-args-macro datepicker-dropdown-args-desc args "datepicker-dropdown")]} (let [shown? (reagent/atom false) cancel-popover #(reset! shown? false) - position :below-center] + position :below-left] (fn [& {:keys [model show-weeks? on-change format] :as passthrough-args}] (let [collapse-on-select (fn [new-model] @@ -263,13 +263,13 @@ :showing? shown? :position position :anchor [anchor-button shown? model format] - :popover [:div {:style (flex-child-style "inherit")} - (when shown? [backdrop :on-click cancel-popover]) - [popover-border - :position position - :arrow-length 0 - :arrow-width 0 - :margin-left (if show-weeks? "-50px" "-36px") ; Align right edge to activation button. - :margin-top "3px" - :padding "0px" - :children [(into [datepicker] passthrough-args)]]]])))) + :popover [popover-content-wrapper + :showing? shown? + :position position + :position-offset (if show-weeks? 43 44) + :arrow-length 0 + :arrow-width 0 + :arrow-gap 3 + :padding "0px" + :on-cancel cancel-popover + :body (into [datepicker] passthrough-args)]])))) diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index f11cac91..f6b1317a 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -43,25 +43,26 @@ (defn- calc-popover-pos - [pop-orient p-width p-height pop-offset] - (let [popover-left (case pop-orient + [pop-orient p-width p-height pop-offset arrow-length arrow-gap] + (let [total-offset (+ arrow-length arrow-gap) + popover-left (case pop-orient :left "initial" ;; TODO: Ultimately remove this (must have NO :left which is in Bootstrap .popover class) - :right "100%" + :right (px total-offset) (:above :below) (px (if pop-offset pop-offset (/ p-width 2)) :negative)) popover-top (case pop-orient (:left :right) (px (if pop-offset pop-offset (/ p-height 2)) :negative) :above "initial" - :below "100%") + :below (px total-offset)) popover-right (case pop-orient - :left (px 10) ;; "100%" TODO: Work out why we need 10px instead of 100% - :right nil - :above nil - :below nil) + :left (px total-offset) + :right nil + :above nil + :below nil) popover-bottom (case pop-orient - :left nil - :right nil - :above (px 10) ;; "100%" TODO: Work out why we need 10px instead of 100% - :below nil)] + :left nil + :right nil + :above (px total-offset) + :below nil)] {:left popover-left :top popover-top :right popover-right :bottom popover-bottom})) @@ -134,32 +135,34 @@ (-> num inc (/ 2) int (* 2))) (defn calc-pop-offset - [arrow-pos p-width p-height] + [arrow-pos position-offset 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))) + :right (+ 20 position-offset) + :below (+ 20 position-offset) + :left (if p-width (- (- p-width 25) position-offset) p-width) + :above (if p-height (- (- p-height 25) position-offset) 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]} - {:name :width :required false :type "string" :validate-fn string? :description "a CSS style describing the popover width"} - {:name :height :required false :default "auto" :type "string" :validate-fn string? :description "a CSS style describing the popover height"} - {:name :popover-color :required false :default "white" :type "string" :validate-fn string? :description "fill color of the popover"} - {:name :arrow-length :required false :default 11 :type "integer | string" :validate-fn number-or-string? :description "the length in pixels of the arrow (from pointy part to middle of arrow base)"} - {:name :arrow-width :required false :default 22 :type "integer | string" :validate-fn number-or-string? :description "the width in pixels of arrow base"} - {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} - {:name :margin-left :required false :type "string" :validate-fn string? :description "a CSS style describing the horiztonal offset from anchor after position"} - {:name :margin-top :required false :type "string" :validate-fn string? :description "a CSS style describing the vertical offset from anchor after position"} - {:name :tooltip-style? :required false :default false :type "boolean" :description "setup popover styles for a tooltip"} - {:name :title :required false :type "string | markup" :description "describes a title"}]) + [{: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]} + {:name :position-offset :required false :type "integer" :validate-fn number? :description [:span "px offset of the arrow from its default " [:code ":position"] " along the popover border. Is ignored when " [:code ":position"] " is one of the " [:code ":xxx-center"] " variants. Positive numbers slide the popover toward its center"]} + {:name :width :required false :type "string" :validate-fn string? :description "a CSS style describing the popover width"} + {:name :height :required false :default "auto" :type "string" :validate-fn string? :description "a CSS style describing the popover height"} + {:name :popover-color :required false :default "white" :type "string" :validate-fn string? :description "fill color of the popover"} + {:name :arrow-length :required false :default 11 :type "integer | string" :validate-fn number-or-string? :description "the length in pixels of the arrow (from pointy part to middle of arrow base)"} + {:name :arrow-width :required false :default 22 :type "integer | string" :validate-fn number-or-string? :description "the width in pixels of arrow base"} + {:name :arrow-gap :required false :default -1 :type "integer" :validate-fn number? :description "px gap between the anchor and the arrow tip. Positive numbers push the popover away from the anchor"} + {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} + {:name :margin-left :required false :type "string" :validate-fn string? :description "a CSS style describing the horiztonal offset from anchor after position"} + {:name :margin-top :required false :type "string" :validate-fn string? :description "a CSS style describing the vertical offset from anchor after position"} + {:name :tooltip-style? :required false :default false :type "boolean" :description "setup popover styles for a tooltip"} + {:name :title :required false :type "string | markup" :description "describes a title"}]) (defn popover-border "Renders an element or control along with a Bootstrap popover" - [& {:keys [children position width height popover-color arrow-length arrow-width padding margin-left margin-top tooltip-style? title] - :or {arrow-length 11 arrow-width 22} + [& {:keys [children position position-offset width height popover-color arrow-length arrow-width arrow-gap padding margin-left margin-top tooltip-style? title] + :or {arrow-length 11 arrow-width 22 arrow-gap -1} :as args}] {:pre [(validate-args-macro popover-border-args-desc args "popover-border")]} (let [rendered-once (reagent/atom false) @@ -179,23 +182,22 @@ (let [popover-elem (get-element-by-id pop-id)] (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)))) + (reset! pop-offset (calc-pop-offset arrow-pos position-offset @p-width @p-height)))) :component-function (fn - [& {:keys [children position width height popover-color arrow-length arrow-width padding margin-left margin-top tooltip-style? title] - :or {arrow-length 11 arrow-width 22} + [& {:keys [children position position-offset width height popover-color arrow-length arrow-width arrow-gap padding margin-left margin-top tooltip-style? title] + :or {arrow-length 11 arrow-width 22 arrow-gap -1} :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 (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)) + (reset! pop-offset (calc-pop-offset arrow-pos position-offset @p-width @p-height)) [:div.popover.fade.in {:id pop-id - :class (case orientation :left "left" :right "right" :above "top" :below "bottom") :style (merge (if @rendered-once - (when pop-id (calc-popover-pos orientation @p-width @p-height @pop-offset)) + (when pop-id (calc-popover-pos orientation @p-width @p-height @pop-offset arrow-length arrow-gap)) {:top "-10000px" :left "-10000px"}) (if width {:width width}) (if height {:height height}) @@ -257,8 +259,9 @@ ;;-------------------------------------------------------------------------------------------------- (def popover-content-wrapper-args-desc - [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows."} + [{:name :showing? :required true :default false :type "boolean atom" :description "an atom. When the value is true, the popover shows"} {:name :position :required true :default :right-below :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} + {:name :position-offset :required false :type "integer" :validate-fn number? :description [:span "px offset of the arrow from its default " [:code ":position"] " along the popover border. Is ignored when " [:code ":position"] " is one of the " [:code ":xxx-center"] " variants. Positive numbers slide the popover toward its center"]} {:name :no-clip? :required false :default false :type "boolean" :description "when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. By passing true for this parameter, re-com will use a different CSS method to show the popover. This method is slightly inferior because the popover can't track the anchor if it is repositioned"} {:name :width :required false :type "string" :validate-fn string? :description "a CSS style representing the popover width"} {:name :height :required false :type "string" :validate-fn string? :description "a CSS style representing the popover height"} @@ -271,13 +274,14 @@ {:name :popover-color :required false :default "white" :type "string" :validate-fn string? :description "fill color of the popover"} {:name :arrow-length :required false :default 11 :type "integer | string" :validate-fn number-or-string? :description "the length in pixels of the arrow (from pointy part to middle of arrow base)"} {:name :arrow-width :required false :default 22 :type "integer | string" :validate-fn number-or-string? :description "the width in pixels of arrow base"} + {:name :arrow-gap :required false :default -1 :type "integer" :validate-fn number? :description "px gap between the anchor and the arrow tip. Positive numbers push the popover away from the anchor"} {:name :padding :required false :type "string" :validate-fn string? :description "a CSS style which overrides the inner padding of the popover"} {:name :style :required false :type "CSS style map" :validate-fn css-style? :description "override component style(s) with a style map, only use in case of emergency"}]) (defn popover-content-wrapper "Abstracts several components to handle the 90% of cases for general popovers and dialog boxes" - [& {:keys [showing? position no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width padding style] - :or {arrow-length 11 arrow-width 22} + [& {:keys [showing? position position-offset no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width arrow-gap padding style] + :or {arrow-length 11 arrow-width 22 arrow-gap -1} :as args}] {:pre [(validate-args-macro popover-content-wrapper-args-desc args "popover-content-wrapper")]} (assert ((complement nil?) showing?) "Must specify a showing? atom") @@ -297,8 +301,8 @@ :component-function (fn - [& {:keys [showing? position no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width padding style] - :or {arrow-length 11 arrow-width 22} + [& {:keys [showing? position position-offset no-clip? width height backdrop-opacity on-cancel title close-button? body tooltip-style? popover-color arrow-length arrow-width arrow-gap padding style] + :or {arrow-length 11 arrow-width 22 arrow-gap -1} :as args}] {:pre [(validate-args-macro popover-content-wrapper-args-desc args "popover-content-wrapper")]} [:div @@ -313,20 +317,22 @@ :opacity backdrop-opacity :on-click on-cancel]) [popover-border - :position (if position position :right-below) - :width width - :height height - :tooltip-style? tooltip-style? - :popover-color popover-color - :arrow-length arrow-length - :arrow-width arrow-width - :padding padding - :title (when title [popover-title - :title title - :showing? showing? - :close-button? close-button? - :close-callback on-cancel]) - :children [body]]])})) + :position (if position position :right-below) + :position-offset position-offset + :width width + :height height + :tooltip-style? tooltip-style? + :popover-color popover-color + :arrow-length arrow-length + :arrow-width arrow-width + :arrow-gap arrow-gap + :padding padding + :title (when title [popover-title + :title title + :showing? showing? + :close-button? close-button? + :close-callback on-cancel]) + :children [body]]])})) ) ;;-------------------------------------------------------------------------------------------------- @@ -406,6 +412,7 @@ :padding "3px 8px" :arrow-length 6 :arrow-width 12 + :arrow-gap 4 :body [v-box :style (if (= status :info) {:color "white" From 4e1eafe22fe2346c48a387ac0b461fb824ae57b3 Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Thu, 15 Oct 2015 16:06:49 +1100 Subject: [PATCH 4/4] Bump version to 0.7.0-alpha1 --- project.clj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/project.clj b/project.clj index 4e2b50a6..2ff54ec0 100644 --- a/project.clj +++ b/project.clj @@ -4,7 +4,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.6.2" +(defproject re-com "0.7.0-alpha1" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"}