GitHub Issue #76 - create proper version tooltip

oakmac · Jan 29, 2015 · 99738ce · 99738ce
1 parent 9101bc0
commit 99738ce
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 23 deletions.
diff --git a/less/main.less b/less/main.less
@@ -80,6 +80,8 @@
 @inactiveGrey: #666;
 @warningOrange: #c47f00;
 @primaryGreen: #309630;
+@tooltipBackgroundColor: #333;
+@tooltipZ: 10;
 
 @modalZ: 1000;
 
@@ -172,6 +174,7 @@ body {
   border-bottom: 1px solid @borderGrey;
   margin-bottom: 25px;
   padding-bottom: 20px;
+  position: relative;
 }
 
 .btn-da85d {
@@ -731,3 +734,49 @@ body {
   display: inline-block;
   margin-left: 10px;
 }
+
+.tooltip-aca75 {
+  background: @tooltipBackgroundColor;
+  border-radius: 4px;
+  color: #fff;
+  left: 135px;
+  padding: 10px;
+  position: absolute;
+  top: 44px;
+  z-index: @tooltipZ;
+
+  td {
+    height: 20px;
+  }
+}
+
+.tooltip-aca75:after {
+  bottom: 100%;
+  left: 17px;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+  border-color: rgba(51, 51, 51, 0);
+  border-bottom-color: #333;
+  border-width: 5px;
+  margin-left: -5px;
+}
+
+.label-be32b {
+  color: #999;
+  .font-bold(11px);
+  text-transform: uppercase;
+}
+
+.value-aee48 {
+  padding-left: 6px;
+  font-size: 14px;
+}
+
+.mono-cd368 {
+  font-family: "Droid Sans Mono";
+  font-size: 14px;
+}
diff --git a/src-cljs/cuttle/main_page.cljs b/src-cljs/cuttle/main_page.cljs
@@ -48,6 +48,7 @@
   :new-version-num nil
   :projects {:order []}
   :settings-modal-showing? false
+  :version-tooltip-showing? false
   })
 
 (def state (atom initial-app-state))
@@ -91,7 +92,6 @@
       (.on js-res "end" (fn []
         (when-let [result (try (.parse js/JSON @data)
                                (catch js/Error _error nil))]
-          (js-log result)
           (check-version2 (aget result "version")))))))))
 
 ;;------------------------------------------------------------------------------
@@ -693,6 +693,12 @@
   (swap! state update-in [:desktop-notification-on-warnings?] not)
   (save-settings!))
 
+(defn- on-mouse-enter-tooltip []
+  (swap! state assoc :version-tooltip-showing? true))
+
+(defn- on-mouse-leave-tooltip []
+  (swap! state assoc :version-tooltip-showing? false))
+
 ;;------------------------------------------------------------------------------
 ;; Sablono Templates
 ;;------------------------------------------------------------------------------
@@ -846,27 +852,6 @@
         [:span.link-e7e58 {:on-click show-new-project-modal}
           "add one"] "?"]]])
 
-(defn- version-tooltip []
-  (str
-    "Version: " current-version "\n"
-    "Released: " build-date "\n"
-    "Commit: " (subs build-commit 0 10)))
-
-(sablono/defhtml header []
-  [:div.header-a4c14
-    [:img.logo-0a166 {:src "img/cuttle-logo.svg"}]
-    [:div.title-8749a
-      "Cuttle"
-      [:span.version-8838a {:title (version-tooltip)} (str "v" current-version)]]
-    [:div.title-links-42b06
-      [:span.link-3d3ad
-        {:on-click click-settings-link}
-        [:i.fa.fa-cog] "Settings"]
-      [:span.link-3d3ad
-        {:on-click show-new-project-modal}
-        [:i.fa.fa-plus] "Add project"]]
-    [:div.clr-737fa]])
-
 (sablono/defhtml modal-overlay [click-fn]
   [:div.modal-overlay-120d3 {:on-click click-fn}])
 
@@ -1046,6 +1031,37 @@
           [:i.fa.fa-square-o])
         "Desktop notifications on warnings."]]))
 
+(quiescent/defcomponent Header [version-tooltip-showing?]
+  (sablono/html
+    [:div.header-a4c14
+      [:img.logo-0a166 {:src "img/cuttle-logo.svg"}]
+      [:div.title-8749a
+        "Cuttle"
+        [:span.version-8838a
+          {:on-mouse-enter on-mouse-enter-tooltip
+           :on-mouse-leave on-mouse-leave-tooltip}
+          (str "v" current-version)]]
+      (when version-tooltip-showing?
+        [:div.tooltip-aca75
+          [:table
+            [:tr
+              [:td.label-be32b "Version"]
+              [:td.value-aee48 current-version]]
+            [:tr
+              [:td.label-be32b "Released"]
+              [:td.value-aee48 build-date]]
+            [:tr
+              [:td.label-be32b "Commit"]
+              [:td.value-aee48.mono-cd368 (subs build-commit 0 10)]]]])
+      [:div.title-links-42b06
+        [:span.link-3d3ad
+          {:on-click click-settings-link}
+          [:i.fa.fa-cog] "Settings"]
+        [:span.link-3d3ad
+          {:on-click show-new-project-modal}
+          [:i.fa.fa-plus] "Add project"]]
+      [:div.clr-737fa]]))
+
 (def add-project-modal-keys
   "These are all the keys we need in order to build the Add Project modal."
   #{:new-project-dir
@@ -1072,7 +1088,7 @@
       (when (:new-version-bar-showing? app-state)
         (new-version-bar (:new-version-num app-state)))
       [:div.app-ca3cd {:on-click click-root}
-        (header)
+        (Header (:version-tooltip-showing? app-state))
         (let [projects (-> app-state :projects get-ordered-projects)]
           (if (zero? (count projects))
             (no-projects)