From 2dc7beaa8ed0bfd4becf3fdfbafee200e34d18aa Mon Sep 17 00:00:00 2001 From: Gregg8 <gregg.ramsey@day8.com.au> Date: Thu, 13 Aug 2015 13:14:09 +1000 Subject: [PATCH 1/3] Re-addresses #34 --- src/re_com/dropdown.cljs | 2 +- src/re_com/modal_panel.cljs | 55 ++++++++++++++++++------------------- src/re_demo/alert_box.cljs | 2 +- 3 files changed, 29 insertions(+), 30 deletions(-) diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 8769ee1f..717c40e7 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, privided by " [:code ":id-fn"] ", " [:code ":label-fn"] " & " [:code ":group-fn"]]} + [{: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 :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/modal_panel.cljs b/src/re_com/modal_panel.cljs index 1bb6648a..8f31491e 100644 --- a/src/re_com/modal_panel.cljs +++ b/src/re_com/modal_panel.cljs @@ -25,31 +25,30 @@ :or {wrap-nicely? true backdrop-color "black" backdrop-opacity 0.6} :as args}] {:pre [(validate-args-macro modal-panel-args-desc args "modal-panel")]} - (fn [] - [:div ;; Containing div - (merge {:class (str "rc-modal-panel display-flex " class) - :style (merge {:position "fixed" - :left "0px" - :top "0px" - :width "100%" - :height "100%" - :z-index 1020} - style)} - attr) - [:div ;; Backdrop - {:style {:position "fixed" - :width "100%" - :height "100%" - :background-color backdrop-color - :opacity backdrop-opacity - :z-index 1} - :on-click (handler-fn (when backdrop-on-click (backdrop-on-click)) - (.preventDefault event) - (.stopPropagation event))}] - [:div ;; Child container - {:style (merge {:margin "auto" - :z-index 2} - (when wrap-nicely? {:background-color "white" - :padding "16px" - :border-radius "6px"}))} - child]])) + [:div ;; Containing div + (merge {:class (str "rc-modal-panel display-flex " class) + :style (merge {:position "fixed" + :left "0px" + :top "0px" + :width "100%" + :height "100%" + :z-index 1020} + style)} + attr) + [:div ;; Backdrop + {:style {:position "fixed" + :width "100%" + :height "100%" + :background-color backdrop-color + :opacity backdrop-opacity + :z-index 1} + :on-click (handler-fn (when backdrop-on-click (backdrop-on-click)) + (.preventDefault event) + (.stopPropagation event))}] + [:div ;; Child container + {:style (merge {:margin "auto" + :z-index 2} + (when wrap-nicely? {:background-color "white" + :padding "16px" + :border-radius "6px"}))} + child]]) diff --git a/src/re_demo/alert_box.cljs b/src/re_demo/alert_box.cljs index 9bd663cd..dcaab5be 100644 --- a/src/re_demo/alert_box.cljs +++ b/src/re_demo/alert_box.cljs @@ -101,7 +101,7 @@ :body "Alert with :body but no :heading (:padding set to 6px)." :padding "6px" :closeable? true - :on-close #(reset! show-alert5 false)]]) + :on-close #(reset! show-alert6 false)]]) [alert-box :alert-type :none :class "alert-danger-modern" From 718a242232e27791f9b8563b320442a2d7a790b2 Mon Sep 17 00:00:00 2001 From: Gregg8 <gregg.ramsey@day8.com.au> Date: Fri, 14 Aug 2015 08:03:12 +1000 Subject: [PATCH 2/3] Updated README. --- README.md | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 90363d5b..a4421cce 100644 --- a/README.md +++ b/README.md @@ -47,11 +47,11 @@ that they could be ignored. Probably. Maybe. If so, a modern flexbox implementation will be available on all the browsers you then care about. **So that's surprisingly soon, but not now!** -But, even when it comes to modern browsers, there will be teething issues. Based on 5 minutes of +Even when it comes to modern browsers, there will be teething issues. Based on 5 minutes of testing once a month, re-com appears to work reasonably on IE11 and Safari. On the other hand, Firefox (pre version 38) has all the speed of a snail on performance reducing drugs. Version 38 and beyond have a [fix](https://bugzilla.mozilla.org/show_bug.cgi?id=1149339) for the performance problems caused by nested flexboxes, -however we are informed by [@frozenlock](https://github.com/frozenlock) that it is still not as fast as Chrome if you are using **deeply** nested flexbox layouts +however as per issue #49 it is still not as fast as Chrome if you are using **deeply** nested flexbox layouts (much more nested than our demo app). We can also confirm that none of the components have been designed with mobile in mind, and @@ -179,10 +179,10 @@ https://github.com/Day8/re-com/tree/master/run/resources/public In particular, you'll need bootstrap (assumedly via a CDN): ```html -<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.css"> +<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css"> ``` -And a reference to these two CSS files: +And a reference to these two CSS files (make sure `re-com.css` appears after `bootstrap.css`): ```html <link rel="stylesheet" href="assets/css/material-design-iconic-font.min.css"> @@ -210,7 +210,7 @@ Although both `re-frame` and `re-com` can be used independently of each other, t ## Lein Template -See @gadfly361's [reagent-seed](https://github.com/gadfly361/reagent-seed) +See [re-frame-template](https://github.com/Day8/re-frame-template). ## The Missing Components @@ -232,13 +232,16 @@ Can we use [Fixed Data Tables for React](http://facebook.github.io/fixed-data-ta 1. Where the docs are wrong or fall short, write up something better. Because our docs take the form of an app written in ClojureScrip using re-com, you're actually exercising your knowledge of re-com as you do this. -1. See the list of missing components above. You'll have to produce the +2. See the list of missing components above. You'll have to produce the component itself, including a params spec, plus the extra page in the demo app. -1. Test re-com on new browsers and iron out any quirks. Our focus is strictly Chrome. +3. Test re-com on new browsers and iron out any quirks. Our focus is strictly Chrome. When creating new components, we have found it useful to use the CSS from existing -javascript projects (assuming their licence is compatible with MIT) and then -replace the javascript with ClojureScript. Reagent really is is very nice. +JavaScript projects (assuming their licence is compatible with MIT) and then +replace the JavaScript with ClojureScript. Reagent really is is very nice. + +Also, please refer to [CONTRIBUTING.md](https://github.com/Day8/re-com/blob/master/CONTRIBUTING.md) for further +details on creating issues and pull requests. ### License From 354badcc8c20fd5dd0608d4f76206a0a52781fc8 Mon Sep 17 00:00:00 2001 From: Gregg8 <gregg.ramsey@day8.com.au> Date: Fri, 14 Aug 2015 08:14:37 +1000 Subject: [PATCH 3/3] Bumped version to 0.6.1 --- project.clj | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/project.clj b/project.clj index 0909a050..38a95462 100644 --- a/project.clj +++ b/project.clj @@ -4,7 +4,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.6.0" +(defproject re-com "0.6.1" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"}