diff --git a/project.clj b/project.clj index 7ff91bf9..71f0efbb 100644 --- a/project.clj +++ b/project.clj @@ -4,7 +4,7 @@ ;; --------------------------------------------------------------------------------------- -(defproject re-com "0.7.0" +(defproject re-com "0.8.0" :description "Reusable UI components for Reagent" :url "https://github.com/Day8/re-com.git" :license {:name "MIT"} @@ -34,7 +34,7 @@ [secretary "1.2.3"]] :plugins [[lein-cljsbuild "1.1.1-SNAPSHOT"] [lein-figwheel "0.4.1"] - [lein-shell "0.4.1"] + [lein-shell "0.5.0"] [com.cemerick/clojurescript.test "0.3.3"] [lein-s3-static-deploy "0.1.1-SNAPSHOT"] [lein-ancient "0.6.2"]]} @@ -45,6 +45,9 @@ :test-paths ["test"] :resource-paths ["run/resources"] + :deploy-repositories [["releases" :clojars] + ["snapshots" :clojars]] + ;; Exclude the demo and compiled files from the output of either 'lein jar' or 'lein install' :jar-exclusions [#"(?:^|\/)re_demo\/" #"(?:^|\/)demo\/" #"(?:^|\/)compiled.*\/" #"html$"] @@ -78,11 +81,29 @@ :server-port ~fig-port :repl true} - :aws {:access-key ~(System/getenv "AWS_ACCESS_KEY_ID") - :secret-key ~(System/getenv "AWS_SECRET_ACCESS_KEY") + :aws {:access-key ~(System/getenv "DAY8_AWS_ACCESS_KEY_ID") + :secret-key ~(System/getenv "DAY8_AWS_SECRET_ACCESS_KEY") :s3-static-deploy {:bucket "re-demo" :local-root "run/resources/public"}} + :release-tasks [["shell" "git" "checkout" "master"] + ["shell" "git" "pull" "--ff-only"] + ["shell" "git" "checkout" "develop"] + ["shell" "git" "flow" "release" "start" "lein-release${:version}"] + ["vcs" "assert-committed"] + ["change" "version" + "leiningen.release/bump-version" "release"] + ["vcs" "commit"] + ["vcs" "tag" "--no-sign"] + ["deploy"] + ["shell" "git" "flow" "release" "finish" "--notag" "--nopush"] + ["change" "version" "leiningen.release/bump-version"] + ["vcs" "commit"] + ["vcs" "push"] + ["shell" "git" "checkout" "master"] + ["shell" "git" "push"] + ["shell" "git" "checkout" "develop"]] + :shell {:commands {"open" {:windows ["cmd" "/c" "start"] :macosx "open" :linux "xdg-open"}}} diff --git a/run/resources/public/assets/css/re-com.css b/run/resources/public/assets/css/re-com.css index b10b7b51..aa75d7ff 100644 --- a/run/resources/public/assets/css/re-com.css +++ b/run/resources/public/assets/css/re-com.css @@ -1236,7 +1236,7 @@ code { } .level1 { - font-family: Segoe UI Semilight, Roboto, sans-serif; + font-family: Roboto, sans-serif; font-weight: 200; font-size: 40px; color: rgba(68, 68, 68, 1.0); @@ -1244,28 +1244,28 @@ code { /*-ms-font-feature-settings: 'ss20' 1;*/ } .level2 { - font-family: Segoe UI Semilight, Roboto, sans-serif; + font-family: Roboto, sans-serif; font-weight: 200; font-size: 26px; color: rgba(0, 0, 0, 1.0); letter-spacing: 0.001em; } .level3 { - font-family: Segoe UI Semilight, Roboto, sans-serif; + font-family: Roboto, sans-serif; font-weight: 500; font-size: 15px; color: rgba(68, 68, 68, 1.0); letter-spacing: 0.002em; } .level4 { - font-family: Segoe UI Semilight, Roboto, sans-serif; + font-family: Roboto, sans-serif; font-weight: 500; font-size: 15px; color: rgba(68, 68, 68, 0.6); letter-spacing: 0.002em; } .field-label { - font-family: Segoe UI Semilight, Roboto, sans-serif; + font-family: Roboto, sans-serif; font-weight: 400; font-size: 14px; color: rgba(68, 68, 68, 0.6); diff --git a/src/re_com/buttons.cljs b/src/re_com/buttons.cljs index d0a0a6c0..bdc4d501 100644 --- a/src/re_com/buttons.cljs +++ b/src/re_com/buttons.cljs @@ -30,6 +30,7 @@ :or {class "btn-default"} :as args}] {:pre [(validate-args-macro button-args-desc args "button")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [disabled? (deref-or-value disabled?) the-button [:button (merge @@ -40,12 +41,14 @@ :disabled disabled? :on-click (handler-fn (when (and on-click (not disabled?)) - (on-click)))} + (on-click event)))} (when tooltip {:on-mouse-over (handler-fn (reset! showing? true)) :on-mouse-out (handler-fn (reset! showing? false))}) attr) label]] + (when disabled? + (reset! showing? false)) [box :class "display-inline-flex" :align :start @@ -83,6 +86,7 @@ :or {md-icon-name "zmdi-plus"} :as args}] {:pre [(validate-args-macro md-circle-icon-button-args-desc args "md-circle-icon-button")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [the-button [:div (merge {:class (str @@ -99,7 +103,7 @@ style) :on-click (handler-fn (when (and on-click (not disabled?)) - (on-click)))} + (on-click event)))} (when tooltip {:on-mouse-over (handler-fn (reset! showing? true)) :on-mouse-out (handler-fn (reset! showing? false))}) @@ -139,6 +143,7 @@ :or {md-icon-name "zmdi-plus"} :as args}] {:pre [(validate-args-macro md-icon-button-args-desc args "md-icon-button")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [the-button [:div (merge {:class (str @@ -155,7 +160,7 @@ style) :on-click (handler-fn (when (and on-click (not disabled?)) - (on-click)))} + (on-click event)))} (when tooltip {:on-mouse-over (handler-fn (reset! showing? true)) :on-mouse-out (handler-fn (reset! showing? false))}) @@ -235,6 +240,7 @@ :or {md-icon-name "zmdi-plus"} :as args}] {:pre [(validate-args-macro row-button-args-desc args "row-button")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [the-button [:div (merge {:class (str @@ -245,7 +251,7 @@ :style style :on-click (handler-fn (when (and on-click (not disabled?)) - (on-click)))} + (on-click event)))} (when tooltip {:on-mouse-over (handler-fn (reset! showing? true)) :on-mouse-out (handler-fn (reset! showing? false))}) ;; Need to return true to ALLOW default events to be performed @@ -283,6 +289,7 @@ (fn [& {:keys [label on-click tooltip tooltip-position disabled? class style attr] :as args}] {:pre [(validate-args-macro hyperlink-args-desc args "hyperlink")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [label (deref-or-value label) disabled? (deref-or-value disabled?) the-button [box @@ -297,7 +304,7 @@ style) :on-click (handler-fn (when (and on-click (not disabled?)) - (on-click)))} + (on-click event)))} (when tooltip {:on-mouse-over (handler-fn (reset! showing? true)) :on-mouse-out (handler-fn (reset! showing? false))}) @@ -335,6 +342,7 @@ (fn [& {:keys [label href target tooltip tooltip-position class style attr] :as args}] {:pre [(validate-args-macro hyperlink-href-args-desc args "hyperlink-href")]} + (when-not tooltip (reset! showing? false)) ;; To prevent tooltip from still showing after button drag/drop (let [label (deref-or-value label) href (deref-or-value href) target (deref-or-value target) @@ -390,7 +398,7 @@ :on-mouse-over #(do (reset! mouse-over? true) nil) :on-mouse-out #(do (reset! mouse-over? false) nil) :on-click #(when (and on-click (not disabled?)) - (on-click) + (on-click %) nil)} attr) [:i {:class md-icon-name}]]))) diff --git a/src/re_com/core.clj b/src/re_com/core.clj index 06e6f6d0..c5c0cc6d 100644 --- a/src/re_com/core.clj +++ b/src/re_com/core.clj @@ -27,16 +27,6 @@ ;; (reset! over-atom false) ;; notice: no need for a 'do' ;; (now do something else) ;; (.preventDefault event)) ;; notice access to the 'event' -;; -;; Testing -;; -;; On first glance, this code might look like it should return true: -;; -;; (nil? (handler-fn (reset! atm false))) -;; -;; But it doesn't because the test code is returning a fn, so you need to call it with an 'event' arg (doesn't matter what arg is) -;; -;; (nil? ((handler-fn (reset! over-atom false)) {}) (defmacro handler-fn ([& body] diff --git a/src/re_com/datepicker.cljs b/src/re_com/datepicker.cljs index d8f2e96e..7825ae92 100644 --- a/src/re_com/datepicker.cljs +++ b/src/re_com/datepicker.cljs @@ -95,16 +95,16 @@ [:thead (conj template-row [:th {:class (str "prev " (if prev-enabled? "available selectable" "disabled")) - :style {:padding "0px"}} + :style {:padding "0px"} + :on-click (handler-fn (when prev-enabled? (reset! current prev-date)))} [:i.zmdi.zmdi-chevron-left - {:style {:font-size "24px"} - :on-click (handler-fn (when prev-enabled? (reset! current prev-date)))}]] + {:style {:font-size "24px"}}]] [:th {:class "month" :col-span "5"} (month-label @current)] [:th {:class (str "next " (if next-enabled? "available selectable" "disabled")) - :style {:padding "0px"}} + :style {:padding "0px"} + :on-click (handler-fn (when next-enabled? (reset! current next-date)))} [:i.zmdi.zmdi-chevron-right - {:style {:font-size "24px"} - :on-click (handler-fn (when next-enabled? (reset! current next-date)))}]]) + {:style {:font-size "24px"}}]]) (conj template-row [:th {:class "day-enabled"} "SUN"] [:th {:class "day-enabled"} "MON"] @@ -241,7 +241,8 @@ (def datepicker-dropdown-args-desc (conj datepicker-args-desc - {:name :format :required false :default "yyyy MMM dd" :type "string" :description "a represenatation of a date format. See cljs_time.format"})) + {:name :format :required false :default "yyyy MMM dd" :type "string" :description "[datepicker-dropdown only] a represenatation of a date format. See cljs_time.format"} + {:name :no-clip? :required false :default true :type "boolean" :description "[datepicker-dropdown only] when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. When this parameter is true (which is the default), 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"})) (defn datepicker-dropdown [& {:as args}] @@ -250,7 +251,9 @@ cancel-popover #(reset! shown? false) position :below-left] (fn - [& {:keys [model show-weeks? on-change format] :as passthrough-args}] + [& {:keys [model show-weeks? on-change format no-clip?] + :or {no-clip? true} + :as passthrough-args}] (let [collapse-on-select (fn [new-model] (reset! shown? false) (when on-change (on-change new-model))) ;; wrap callback to collapse popover @@ -267,6 +270,7 @@ :showing? shown? :position position :position-offset (if show-weeks? 43 44) + :no-clip? no-clip? :arrow-length 0 :arrow-width 0 :arrow-gap 3 diff --git a/src/re_com/dropdown.cljs b/src/re_com/dropdown.cljs index 1e0dd353..064c033c 100644 --- a/src/re_com/dropdown.cljs +++ b/src/re_com/dropdown.cljs @@ -233,7 +233,8 @@ changeable? (and on-change (not disabled?)) callback #(do (reset! internal-model %) - (when changeable? (on-change @internal-model)) + (when (and changeable? (not= @internal-model @latest-ext-model)) + (on-change @internal-model)) (swap! drop-showing? not) ;; toggle to allow opening dropdown on Enter key (reset! filter-text "")) cancel #(do diff --git a/src/re_com/popover.cljs b/src/re_com/popover.cljs index 05eed5d8..4f843cca 100644 --- a/src/re_com/popover.cljs +++ b/src/re_com/popover.cljs @@ -291,12 +291,11 @@ {:component-did-mount (fn [this] (when no-clip? - (let [node (reagent/dom-node this) - total-scroll-offset (sum-scroll-offsets node) - popover-point-node (.-parentNode node) ;; Get reference to rc-popover-point node - bounding-rect (.getBoundingClientRect popover-point-node)] ;; The modern magical way of getting offsetLeft and offsetTop - (reset! left-offset (- (.-left bounding-rect) (:left total-scroll-offset))) - (reset! top-offset (- (.-top bounding-rect) (:top total-scroll-offset)))))) + (let [node (reagent/dom-node this) + popover-point-node (.-parentNode node) ;; Get reference to rc-popover-point node + bounding-rect (.getBoundingClientRect popover-point-node)] ;; The modern magical way of getting offsetLeft and offsetTop + (reset! left-offset (.-left bounding-rect)) + (reset! top-offset (.-top bounding-rect))))) :component-function (fn @@ -383,12 +382,15 @@ {:name :status :required false :type "keyword" :validate-fn popover-status-type? :description [:span "controls background color of the tooltip. " [:code "nil/omitted"] " for black or one of " popover-status-types-list]} {:name :anchor :required true :type "hiccup" :validate-fn string-or-hiccup? :description "the component the tooltip is attached to"} {:name :position :required false :default :below-center :type "keyword" :validate-fn position? :description [:span "relative to this anchor. One of " position-options-list]} + {:name :no-clip? :required false :default true :type "boolean" :description "when an anchor is in a scrolling region (e.g. scroller component), the popover can sometimes be clipped. When this parameter is true (which is the default), 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 "specifies width of the tooltip"} {: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-tooltip "Renders text as a tooltip in Bootstrap popover style" - [& {:keys [label showing? on-cancel close-button? status anchor position width style] :as args}] + [& {:keys [label showing? on-cancel close-button? status anchor position no-clip? width style] + :or {no-clip? true} + :as args}] {:pre [(validate-args-macro popover-tooltip-args-desc args "popover-tooltip")]} (let [label (deref-or-value label) popover-color (case status @@ -404,6 +406,7 @@ :popover [popover-content-wrapper :showing? showing? :position (if position position :below-center) + :no-clip? no-clip? :on-cancel on-cancel :width width :tooltip-style? true diff --git a/src/re_com/validate.cljs b/src/re_com/validate.cljs index ffb5a1fb..5b68355f 100644 --- a/src/re_com/validate.cljs +++ b/src/re_com/validate.cljs @@ -196,7 +196,13 @@ :on-blur :on-change :on-click :on-copy :on-cut :on-double-click :on-drag :on-drag-end :on-drag-enter :on-drag-exit :on-drag-leave :on-drag-over :on-drag-start :on-drop :on-focus :on-input :on-key-down :on-key-press :on-key-up :on-mouse-down :on-mouse-enter :on-mouse-leave :on-mouse-move :on-mouse-out :on-mouse-over :on-mouse-up :on-paste :on-scroll :on-submit :on-touch-cancel - :on-touch-end :on-touch-move :on-touch-start :on-wheel}) + :on-touch-end :on-touch-move :on-touch-start :on-wheel + :on-blur-capture :on-change-capture :on-click-capture :on-copy-capture :on-cut-capture :on-double-click-capture :on-drag-capture + :on-drag-end-capture :on-drag-enter-capture :on-drag-exit-capture :on-drag-leave-capture :on-drag-over-capture :on-drag-start-capture + :on-drop-capture :on-focus-capture :on-input-capture :on-key-down-capture :on-key-press-capture :on-key-up-capture :on-mouse-down-capture + :on-mouse-enter-capture :on-mouse-leave-capture :on-mouse-move-capture :on-mouse-out-capture :on-mouse-over-capture :on-mouse-up-capture + :on-paste-capture :on-scroll-capture :on-submit-capture :on-touch-cancel-capture :on-touch-end-capture :on-touch-move-capture + :on-touch-start-capture :on-wheel-capture}) ;; Reference: http://facebook.github.io/react/docs/tags-and-attributes.html#supported-attributes diff --git a/src/re_demo/datepicker.cljs b/src/re_demo/datepicker.cljs index 88752c92..d9271df6 100644 --- a/src/re_demo/datepicker.cljs +++ b/src/re_demo/datepicker.cljs @@ -6,7 +6,7 @@ [cljs-time.core :refer [now days minus day-of-week]] [cljs-time.format :refer [formatter unparse]] [re-com.core :refer [h-box v-box box gap single-dropdown datepicker datepicker-dropdown checkbox label title p]] - [re-com.datepicker :refer [iso8601->date datepicker-args-desc]] + [re-com.datepicker :refer [iso8601->date datepicker-dropdown-args-desc]] [re-demo.utils :refer [panel-title title2 args-table github-hyperlink status-text]])) @@ -175,7 +175,7 @@ :children [[title2 "[datepicker ... ] & [datepicker-dropdown ... ]" {:font-size "24px"}] [status-text "Stable"] [p "An inline or popover date picker component."] - [args-table datepicker-args-desc]]] + [args-table datepicker-dropdown-args-desc]]] [v-box :gap "10px" :size "auto"