adds flash example

example/example.css

@@ -56,18 +56,82 @@ label {
     color: white;
 }
 
+/* --------------------------------------
+*    Flash Styles
+*  -------------------------------------- */
+
+.flash-container {
+    position: fixed;
+    top: 0;
+    margin: auto;
+    width: 100%;
+    text-align: center;
+}
+
+.flash-errors, .flash-notices, .flash-successes {
+    position: relative;
+    -moz-border-bottom-left-radius: 5px;
+    -webkit-border-bottom-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+    -moz-border-bottom-right-radius: 5px;
+    -webkit-border-bottom-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    border: 1px solid;
+    border-top: 0;
+    font-size: 1em;
+    font-weight: normal;
+    margin: auto auto 5px;
+    padding: 1em;
+    text-align: center;
+    max-width: 50%;
+}
+
+.flash-errors {
+    background: #ff6555;
+    color: #a64237;
+    border-color: #a64237;
+}
+
+.flash-notices {
+    background-color: #ce9853;
+    color: #9c5c2b;
+    border-color: #9c5c2b;
+}
+
+.flash-successes {
+    background-color: #67f091;
+    color: #49a966;
+    border-color: #49a966;
+}
+
+.flash-close {
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 5px;
+}
+
+a.flash-close:hover {
+    color: white;
+    cursor: pointer;
+}
+
+p.flash-error, p.flash-notice, p.flash-success {
+    margin: 0;
+}
+
 /* --------------------------------------
 *    Forms Styles
 *  -------------------------------------- */
 
 p.field-errors {
-  margin: 0;
-  padding: 0;
-  color: #E03725;
+    margin: 0;
+    padding: 0;
+    color: #E03725;
 }
 
 .field-error {
-  border: 1px solid #E03725;
+    border: 1px solid #E03725;
 }
 
 /* --------------------------------------
@@ -113,18 +177,18 @@ p.field-errors {
 }
 
 .modal-header button {
-  float: right;
-  font-size: 1.2em;
-  font-weight: 600;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  border: none;
-  cursor: pointer;
-  color: #333;
+    float: right;
+    font-size: 1.2em;
+    font-weight: 600;
+    background: transparent;
+    padding: 0;
+    margin: 0;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;
+    cursor: pointer;
+    color: #333;
 }
 
 .modal-header h3 {

example/project.clj

@@ -3,7 +3,7 @@
   :license {:name "Eclipse Public License"
             :url "http://www.eclipse.org/legal/epl-v10.html"}
 
-  :dependencies [[com.8thlight/filament "1.1.4"]
+  :dependencies [[com.8thlight/filament "1.2.0"]
                  [com.8thlight/hiccup "1.1.1"]
                  [org.clojure/clojure "1.5.1"]]
 

example/src/cljs/example/main.cljs

@@ -1,9 +1,11 @@
 (ns example.main
   (:require [example.autocomplete-demo :refer [demo-autocomplete]]
+            [example.flash-demo :refer [demo-flash]]
             [example.forms-demo :refer [demo-forms]]
             [example.modal-demo :refer [demo-modal]]))
 
 (defn ^:export init []
   (demo-autocomplete)
+  (demo-flash)
   (demo-forms)
   (demo-modal))

spec/cljs/com/eighthlight/filament/flash_spec.cljs

@@ -72,4 +72,11 @@
     (should= nil (dom/by-id "flash-errors"))
     (should= nil (dom/by-id "flash-notices"))
     (should= nil (dom/by-id "flash-successes")))
+
+
+  (it "css classes"
+    (should-contain "flash-container" (dom/classes (flash/flash-container-node)))
+    (should-contain "flash-errors" (dom/classes (flash/errors-node)))
+    (should-contain "flash-notices" (dom/classes (flash/notices-node)))
+    (should-contain "flash-successes" (dom/classes (flash/successes-node))))
   )

src/cljs/com/eighthlight/filament/flash.cljs

@@ -10,15 +10,15 @@
   []
   (or
     (dom/by-id "flash-container")
-    (let [container (dom/single-node (h/html [:div#flash-container]))]
+    (let [container (dom/single-node (h/html [:div#flash-container.flash-container]))]
       (dom/append! (.-body js/document) container)
       container)))
 
 (defn- flash-section [section]
   (let [name (str "flash-" section)]
     (or
       (dom/by-id name)
-      (let [section-node (dom/single-node (h/html [:div {:id name} [:a.flash-close "X"]]))]
+      (let [section-node (dom/single-node (h/html [:div {:id name :class name} [:a.flash-close "X"]]))]
         (util/override-click! (first (dom/children section-node)) #(dom/destroy! section-node))
         (dom/append! (flash-container-node) section-node)
         section-node))))
@@ -39,8 +39,8 @@
   "Adds an error flash to the DOM.
 
   CSS:
-    #flash-container - a div added to the body element so consider using absolute/fixed positioning
-    #flash-errors - a div inside the flash-container that will hold all the error flashes
+    .flash-container - a div added to the body element so consider using absolute/fixed positioning
+    .flash-errors - a div inside the flash-container that will hold all the error flashes
     a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
     p.flash-error - one is added to the flash-errors div for each message"
   [message]
@@ -50,8 +50,8 @@
   "Adds an notice flash to the DOM.
 
   CSS:
-    #flash-container - a div added to the body element so consider using absolute/fixed positioning
-    #flash-notices - a div inside the flash-container that will hold all the notice flashes
+    .flash-container - a div added to the body element so consider using absolute/fixed positioning
+    .flash-notices - a div inside the flash-container that will hold all the notice flashes
     a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
     p.flash-notice - one is added to the flash-notices div for each message"
   [message]
@@ -61,8 +61,8 @@
   "Adds an success flash to the DOM.
 
   CSS:
-    #flash-container - a div added to the body element so consider using absolute/fixed positioning
-    #flash-successes - a div inside the flash-container that will hold all the success flashes
+    .flash-container - a div added to the body element so consider using absolute/fixed positioning
+    .flash-successes - a div inside the flash-container that will hold all the success flashes
     a.flash-close - the first node in a flash section. Contains the text \"X\". Clicking it will close the section.
     p.flash-success - one is added to the flash-successes div for each message"
   [message]