Skip to content

Commit

Permalink
Merge branch 'release/0.8.2'
Browse files Browse the repository at this point in the history
  • Loading branch information
Gregg8 committed May 2, 2016
2 parents 3839a37 + 3637eb6 commit 40d5be9
Show file tree
Hide file tree
Showing 10 changed files with 103 additions and 111 deletions.
4 changes: 2 additions & 2 deletions project.clj
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@

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

(defproject re-com "0.8.1"
(defproject re-com "0.8.2"
:description "Reusable UI components for Reagent"
:url "https://github.com/Day8/re-com.git"
:license {:name "MIT"}

:dependencies [[org.clojure/clojure "1.7.0"]
[org.clojure/clojurescript "1.7.145"]
[reagent "0.5.1"]
[reagent "0.6.0-SNAPSHOT"]
[com.andrewmcveigh/cljs-time "0.4.0"]]

;:plugins [[lein-unpack-resources "0.1.1"]]
Expand Down
15 changes: 9 additions & 6 deletions src/re_demo/alert_list.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,15 @@
:width "600px"
:gap "10px"
:children [[title2 "Demo"]
[p "To insert alerts at the top of the list, click "
[button
:label "Add alert"
:style {:width "100px"}
:on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]]
[p "Also, try clicking the \"x\" on alerts."]
[h-box
:gap "10px"
:align :center
:children [[label :label "To insert alerts at the top of the list, click "]
[button
:label "Add alert"
:style {:width "100px"}
:on-click #(add-alert alerts (gensym) :info {:heading "New alert" :body "This alert was added by the \"Add alert\" button."})]]]
[p "Also, try clicking the \"x\" on alerts."]
[p [:code ":max-height"] " is set to 300px. A scroll bar will appear as necessary."]
[p "For demonstration purposes, a 'dotted' " [:code ":border-style"] " is set."]
[alert-list
Expand Down
24 changes: 11 additions & 13 deletions src/re_demo/gap.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -60,14 +60,13 @@
:padding "20px"}
:child "Box 3"]]]
[gap :size "10px"]
[p "Notes:"
[:ul
[:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a
[p "Notes:"]
[:ul
[:li "h-box and v-box have a " [:code ":gap"] " parameter which inserts a
given amount of white space between each child."]
[:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."]
[:li "In this example, the gap between components 2 and 3 will be 25px
because the [gap] is a child of the h-box and will have 10px left and right of it."]]]

[:li "For more ad hoc gaps, use the " [:span.bold "[gap ...]"] " component itself."]
[:li "In this example, the gap between components 2 and 3 will be 25px
because the [gap] is a child of the h-box and will have 10px left and right of it."]]
[gap :size "10px"]
[line]
[title2 "Demo #2"]
Expand Down Expand Up @@ -101,10 +100,9 @@
:padding "20px"}
:child "Box 3"]]]
[gap :size "10px"]
[p "Notes:"
[:ul
[:li "This example has a gap with a " [:span.bold "proportional size"] " of \"1\", not an absolute size. Synonymous to 100%."]
[:li "Because it \"grows\" to fill all available space, it \"pushes\" box2 and box3 as far apart as possible."]
[:li "Imagine the boxes as buttons, to see how this might be useful."]]]
]]]]
[p "Notes:"]
[:ul
[:li "This example has a gap with a " [:span.bold "proportional size"] " of \"1\", not an absolute size. Synonymous to 100%."]
[:li "Because it \"grows\" to fill all available space, it \"pushes\" box2 and box3 as far apart as possible."]
[:li "Imagine the boxes as buttons, to see how this might be useful."]]]]]]
[gap :size "30px"]]])
6 changes: 4 additions & 2 deletions src/re_demo/h_box.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -367,7 +367,8 @@
[:li "Turn off the h-box " [:code ":height"] " parameter to see how it automatically expands to show the rest of the content in Box2."]
[:li "Edit the box " [:code ":child"] " parameters to change the content to see how the current layout handles more or less content."]]]]}])

(def box-state (reaction (get demos @current-demo)))
(def box-state (reagent/atom (get demos @current-demo)))
(def reset-box-state (reaction (reset! box-state (get demos @current-demo))))

(def show-desc? (reagent/atom true))

Expand Down Expand Up @@ -804,4 +805,5 @@
[gap :size "0px"]
[demo]
[gap :size "0px"]
[choose-a-demo]]]]]]]))
[choose-a-demo]
(when (nil? @reset-box-state) "")]]]]]])) ;; For reset-box-state to fire, we must dereference it in a component
14 changes: 7 additions & 7 deletions src/re_demo/info_button.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,13 @@
:width "450px"
:children [[title2 "Notes"]
[status-text "Stable"]
[p "A tiny information button, which is light grey and unobrusive. When clicked, displays a popup containing helpful information. "]
[p "Designed to be used with input fields, to explain the purpose of the field."]
[p "The popup has a dark theme, and uses white text. CSS classes for the text are available as follows:to format the text in the popover"
[:ul
[:li [:span.semibold "info-heading"] " - heading/title style"]
[:li [:span.semibold"info-subheading"] " - subheading style"]
[:li [:span.semibold "info-bold"] " - bold style"]]]
[p "A tiny information button, which is light grey and unobrusive. When clicked, displays a popup containing helpful information. "]
[p "Designed to be used with input fields, to explain the purpose of the field."]
[p "The popup has a dark theme, and uses white text. CSS classes for the text are available as follows:to format the text in the popover"]
[:ul
[:li [:span.semibold "info-heading"] " - heading/title style"]
[:li [:span.semibold"info-subheading"] " - subheading style"]
[:li [:span.semibold "info-bold"] " - bold style"]]
[args-table info-button-args-desc]]]
[v-box
:gap "10px"
Expand Down
49 changes: 19 additions & 30 deletions src/re_demo/introduction.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

; narrow, light grey column of text, on the RHS
(def RHS-column-style
{:style {:width "250px"
{:style {:width "450px"
:font-size "13px"
:color "#aaa"}})

Expand Down Expand Up @@ -44,12 +44,12 @@
[h-box
:gap center-gap-px
:children [[v-box
:children [[p "The demo app is an SPA, built using re-com. It serves as:"
[:ul
[:li "a visual showcase of the components"]
[:li "documentation for the components (parameters etc.)"]
[:li "shows, via its own code, how to use the components"]
[:li "a test harness"]]]]]
:children [[p "The demo app is an SPA, built using re-com. It serves as:"]
[:ul
[:li "a visual showcase of the components"]
[:li "documentation for the components (parameters etc.)"]
[:li "shows, via its own code, how to use the components"]
[:li "a test harness"]]]]
[v-box
:children [[p RHS-column-style [:br] [:br] [:br]
"Most pages of this app have hyperlinks which take you
Expand All @@ -65,8 +65,6 @@

[p "Now, our sausage fingers sometimes type onmouseover instead of on-mouse-over,
or centre rather than center, and sometimes we pass in a string where there should be keyword."]


[h-box
:gap center-gap-px
:children [[v-box
Expand All @@ -77,10 +75,7 @@
{:style {:width "450px"}}
":closure-defines {:goog.DEBUG false}"]]]
[v-box
:children [[p RHS-column-style "Parameter validation errors are written to the console."
]
]]
]]]])
:children [[p RHS-column-style "Parameter validation errors are written to the console."]]]]]]])

(defn named-params
[]
Expand Down Expand Up @@ -108,18 +103,16 @@
:style {:background-color \"blue\"}]"]
[p "Each parameter involves a leading keyword name, followed by a value. Always pairs. "]]]
[v-box
:children [[p RHS-column-style "We use named parameters because:"
[:ol
[:li "the code seems more easily read and understood (although longer)"]
[:li "optionality - not all parameters need be supplied and defaults can be introduced"]
[:li "API flexibility - easy to add new parameters"]]]
[p RHS-column-style "Read further analysis "
:children [[p RHS-column-style "We use named parameters because:"]
[:ol RHS-column-style
[:li "the code seems more easily read and understood (although longer)"]
[:li "optionality - not all parameters need be supplied and defaults can be introduced"]
[:li "API flexibility - easy to add new parameters"]]
[p RHS-column-style "Read further analysis "
[hyperlink-href
:label "here"
:href "https://clojurefun.wordpress.com/2012/08/13/keyword-arguments-in-clojure/"
:target "_blank"] "."]]]
]]
]])
:target "_blank"] "."]]]]]]])


(defn layouts-section
Expand Down Expand Up @@ -154,19 +147,15 @@
[hyperlink-href
:label "flexbox"
:href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
:target "_blank"]]
]]]]]])
:target "_blank"]]]]]]]])


(defn example-layout
[]
[v-box
:children [
[h-box
:children [
[v-box
:children [
[p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."]
:children [[h-box
:children [[v-box
:children [[p "And this example code, showing an " [:span.bold "h-box"] " as a child of a " [:span.bold "v-box"] " ..."]
[:pre
{:style {:width "460px"}}
"[v-box
Expand Down
53 changes: 27 additions & 26 deletions src/re_demo/layout.cljs
Original file line number Diff line number Diff line change
Expand Up @@ -64,18 +64,18 @@
[p "Re-com's layout model is a thin layer over " [:span.bold "CSS Flexbox"] "."]
[p "To fully understand Re-com's layout components and use them
powerfully, you " [:span.bold "will"] " need to have a strong understanding of
Flexbox. You should do these tutorials very soon:"
[:ul
[:li
[hyperlink-href
:label "CSS-Tricks guide to flexbox"
:href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
:target "_blank"]]
[:li
[hyperlink-href
:label "The Ultimate Flexbox Cheat Sheet"
:href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
:target "_blank"]]]]]]
Flexbox. You should do these tutorials very soon:"]
[:ul
[:li
[hyperlink-href
:label "CSS-Tricks guide to flexbox"
:href "https://css-tricks.com/snippets/css/a-guide-to-flexbox"
:target "_blank"]]
[:li
[hyperlink-href
:label "The Ultimate Flexbox Cheat Sheet"
:href "http://www.sketchingwithcss.com/samplechapter/cheatsheet.html"
:target "_blank"]]]]]

[v-box
:style {:font-size "13px" :color "#aaa"}
Expand Down Expand Up @@ -107,6 +107,7 @@
(defn key-style-section
[]
[v-box
:width "450px"
:children [[title :level :level2 :label "The Key Style"]
[p "Flexbox is about styles on " [:span.bold "containers"] " and their child " [:span.bold "items"] "."]
[p "While tutorials will walk you through the menagerie of flexbox related styles,
Expand All @@ -115,22 +116,22 @@
" [:span.bold "flex"] " styles on the items within that layout."]
[title :level :level2 :label "flex=GSB"]
[p "Tutorials will tell you that the " [:span.bold "flex"] " style can be single value like " [:span.bold "none"] " or " [:span.bold "auto"]
". But those are shortcuts. Every flex style resolves to a triple of sub-values:"
[:ul
[:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (in proportion to its siblings) if there is
". But those are shortcuts. Every flex style resolves to a triple of sub-values:"]
[:ul
[:li [:span [:span.bold "grow"] " - Integer which determines how an item grows in size (in proportion to its siblings) if there is
extra container space to distribute. 0 for no growing."]]
[:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container
[:li [:span [:span.bold "shrink"] " - Integer which determines how an item shrinks in size (in proportion to its siblings) if container
space is reduced. 0 for no shrinking."]]
[:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or shrinking. Can be:"
[:ul
[:li "absolute length values like \"100px\" or \"40em\""]
[:li [:span.bold "auto"] " which means use the natural size of the item"]
[:li "proporational values like \"60\""]]]]]]

[p "Shortcut values are always transformed into a triple. For example:"
[:ul
[:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""]]
[:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""]]]]
[:li [:span [:span.bold "basis"] " - The default size of an item before any necessary growing or shrinking. Can be:"
[:ul
[:li "absolute length values like \"100px\" or \"40em\""]
[:li [:span.bold "auto"] " which means use the natural size of the item"]
[:li "proporational values like \"60\""]]]]]

[p "Shortcut values are always transformed into a triple. For example:"]
[:ul
[:li [:span.bold "flex=\"none\""] " is eqivalent to " [:span.bold "flex=\"0 0 auto\""]]
[:li [:span.bold "flex=\"auto\""] " is eqivalent to " [:span.bold "flex=\"1 1 auto\""]]]
[p "Sure, use the shortcuts. But it is only by understanding triples that you become a power user of flexbox (or re-com layouts)."]
[gap :size "10px"]]])

Expand Down
Loading

0 comments on commit 40d5be9

Please sign in to comment.