Skip to content

Commit

Permalink
Version 0.3.0
Browse files Browse the repository at this point in the history 
 - 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.
  • Loading branch information
@Gregg8
Gregg8 committed Mar 30, 2015
1 parent 293e2a7 commit 20e1e1a
Show file tree
Hide file tree
Showing 24 changed files with 381 additions and 279 deletions.
4 changes: 3 additions & 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.9"
(defproject re-com "0.3.0"
:description "Reusable UI components for Reagent"
:url "https://github.com/Day8/re-com.git"

Expand Down Expand Up @@ -142,6 +142,8 @@
["run-prod"]
["cljsbuild" "auto" "prod"]]

"deploy" ["s3-static-deploy"]

;; *** TEST ***

"run-test" ["with-profile" "+dev-test" "do"
Expand Down
21 changes: 17 additions & 4 deletions run/resources/public/assets/css/re-com.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
6 changes: 3 additions & 3 deletions src/re_com/alert.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]]))

Expand Down Expand Up @@ -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
Expand Down
80 changes: 46 additions & 34 deletions src/re_com/box.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down Expand Up @@ -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"
Expand All @@ -102,24 +114,21 @@
(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))
(when width {:width width})
(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})
Expand All @@ -135,7 +144,7 @@
style)]
[:div
(merge
{:class class :style s}
{:class (str class-name "display-flex " class) :style s}
attr)
child]))

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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})
Expand All @@ -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)))

Expand Down Expand Up @@ -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})
Expand All @@ -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)))

Expand Down Expand Up @@ -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))

Expand Down Expand Up @@ -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)))

Expand Down Expand Up @@ -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)))
12 changes: 6 additions & 6 deletions src/re_com/buttons.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]))

;; ------------------------------------------------------------------------------------
Expand Down Expand Up @@ -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
Expand All @@ -49,7 +49,7 @@
attr)
label]]
[box
:style {:display "inline-flex"}
:class "display-inline-flex"
:align :start
:child (if tooltip
[popover-tooltip
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand Down
6 changes: 6 additions & 0 deletions src/re_com/core.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
9 changes: 4 additions & 5 deletions src/re_com/datepicker.cljs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]]))

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
9 changes: 5 additions & 4 deletions src/re_com/dropdown.cljs
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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?]
Expand Down
Loading

0 comments on commit 20e1e1a

Please sign in to comment.