diff --git a/project.clj b/project.clj index f8574d2a..352ca354 100644 --- a/project.clj +++ b/project.clj @@ -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"]] diff --git a/src/re_demo/alert_list.cljs b/src/re_demo/alert_list.cljs index 5cb9f1e5..e3e1df28 100644 --- a/src/re_demo/alert_list.cljs +++ b/src/re_demo/alert_list.cljs @@ -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 diff --git a/src/re_demo/gap.cljs b/src/re_demo/gap.cljs index f11d9f60..01128639 100644 --- a/src/re_demo/gap.cljs +++ b/src/re_demo/gap.cljs @@ -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"] @@ -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"]]]) diff --git a/src/re_demo/h_box.cljs b/src/re_demo/h_box.cljs index 20ed19d2..cf0ec07a 100644 --- a/src/re_demo/h_box.cljs +++ b/src/re_demo/h_box.cljs @@ -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)) @@ -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 diff --git a/src/re_demo/info_button.cljs b/src/re_demo/info_button.cljs index 872496c0..3637fb14 100644 --- a/src/re_demo/info_button.cljs +++ b/src/re_demo/info_button.cljs @@ -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" diff --git a/src/re_demo/introduction.cljs b/src/re_demo/introduction.cljs index aa04d87d..98fb8b2d 100644 --- a/src/re_demo/introduction.cljs +++ b/src/re_demo/introduction.cljs @@ -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"}}) @@ -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 @@ -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 @@ -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 [] @@ -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 @@ -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 diff --git a/src/re_demo/layout.cljs b/src/re_demo/layout.cljs index 64b6c182..94c3b505 100644 --- a/src/re_demo/layout.cljs +++ b/src/re_demo/layout.cljs @@ -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"} @@ -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, @@ -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"]]]) diff --git a/src/re_demo/popovers.cljs b/src/re_demo/popovers.cljs index cf46c2d2..fe29e0dc 100644 --- a/src/re_demo/popovers.cljs +++ b/src/re_demo/popovers.cljs @@ -117,21 +117,21 @@ [p "Popovers appear above other components, and point to an anchor."] [p "In the simplest case, we're talking tooltips. In more complex cases, detailed dialog boxes."] [p "Even when the absolute position of the anchor changes, the popover stays pointing at it."] - [p "To create a popover, wrap the anchor with " [:code "popover-anchor-wrapper"] ". The arguments are:" - [:ul - [:li [:code ":showing?"] " - An atom. When true, the popover shows."] - [:li [:code ":position"] " - A keyword specifying the popover's position relative to the anchor. See the demo to the right for the values."] - [:li [:code ":anchor"] " - The anchor component to wrap."] - [:li [:code ":popover"] " - The popover body component (what gets shown in the popover)."]]] - [p "You should use the " [:code "popover-content-wrapper"] " component to wrap the body content. The main arguments are:" - [:ul - [:li [:code ":title"] " - Title of the popover. Can be ommitted."] - [:li [:code ":close-button?"] " - Add close button in the top right. Default is true."] - [:li [:code ":body"] " - Body component of the popover."] - [:li [:code ":on-cancel"] " - A function taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)."] - [:li [:code ":no-clip?"] " - When an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. + [p "To create a popover, wrap the anchor with " [:code "popover-anchor-wrapper"] ". The arguments are:"] + [:ul + [:li [:code ":showing?"] " - An atom. When true, the popover shows."] + [:li [:code ":position"] " - A keyword specifying the popover's position relative to the anchor. See the demo to the right for the values."] + [:li [:code ":anchor"] " - The anchor component to wrap."] + [:li [:code ":popover"] " - The popover body component (what gets shown in the popover)."]] + [p "You should use the " [:code "popover-content-wrapper"] " component to wrap the body content. The main arguments are:"] + [:ul + [:li [:code ":title"] " - Title of the popover. Can be ommitted."] + [:li [:code ":close-button?"] " - Add close button in the top right. Default is true."] + [:li [:code ":body"] " - Body component of the popover."] + [:li [:code ":on-cancel"] " - A function taking no parameters, invoked when the popover is cancelled (e.g. user clicks away)."] + [:li [:code ":no-clip?"] " - 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."]]]]] + This method is slightly inferior because the popover can't track the anchor if it is repositioned."]]]] [v-box :gap "30px" :margin "20px 0px 0px 0px" diff --git a/src/re_demo/scroller.cljs b/src/re_demo/scroller.cljs index c54d1d27..f5f1e252 100644 --- a/src/re_demo/scroller.cljs +++ b/src/re_demo/scroller.cljs @@ -33,8 +33,7 @@ :v-scroll :auto :height \"300px\" :child [some-component]]"] - [p "Notes:" - [:ul - [:li "In this example, if the height of [some-component] is greater than 300px, a vertical scroll bar will be added."] - ]]]]]] + [p "Notes:"] + [:ul + [:li [:span "In this example, if the height of [some-component] is greater than 300px, a vertical scroll bar will be added."]]]]]]] [gap :size "30px"]]]) diff --git a/src/re_demo/tour.cljs b/src/re_demo/tour.cljs index 1db0429b..364a8357 100644 --- a/src/re_demo/tour.cljs +++ b/src/re_demo/tour.cljs @@ -99,13 +99,13 @@ :children [[title2 "Notes"] [status-text "Alpha" {:color "#EA6B00"}] - [p "To create a tour:" - [:ul - [:li.spacer "Make a tour object, something like: " [:br] - [:code "(let [demo-tour (make-tour [:step1 :step2 :step3])])"] "."] - [:li.spacer "Then, wrap each anchor components in your tour with a popover component."] - [:li.spacer "Each each such popover the " [:code ":showing?"] " parameter should look like this: " - [:br] [:code ":showing? (:step1 demo-tour)"] "."]]] + [p "To create a tour:"] + [:ul + [:li.spacer "Make a tour object, something like: " [:br] + [:code "(let [demo-tour (make-tour [:step1 :step2 :step3])])"] "."] + [:li.spacer "Then, wrap each anchor components in your tour with a popover component."] + [:li.spacer "Each each such popover the " [:code ":showing?"] " parameter should look like this: " + [:br] [:code ":showing? (:step1 demo-tour)"] "."]] [p "To add navigation buttons to a popover, add the following component to the end of your popover's " [:code ":body"] " markup: " [:br] [:code "[make-tour-nav demo-tour]"] "."]