From 2d2a1816ff1c668d6a00fc792addb39848765753 Mon Sep 17 00:00:00 2001
From: RaNaN <Mast3rRaNaN@hotmail.de>
Date: Mon, 25 Mar 2013 21:32:11 +0100
Subject: tooltips for input elements

---
 module/web/static/css/default/settings.less   | 20 ++++++++++++------
 module/web/static/js/views/input/inputView.js | 30 +++++++++++++++++++++++++++
 module/web/static/js/views/input/textInput.js |  6 ++++--
 module/web/templates/default/settings.html    |  1 +
 4 files changed, 49 insertions(+), 8 deletions(-)

(limited to 'module')

diff --git a/module/web/static/css/default/settings.less b/module/web/static/css/default/settings.less
index 4b4efb423..d7012f17a 100644
--- a/module/web/static/css/default/settings.less
+++ b/module/web/static/css/default/settings.less
@@ -5,16 +5,14 @@
 */
 .settings-menu {
   background-color: #FFF;
-  box-shadow: 0 0 5px #000;
-//  border: 10px solid #EEE;
-
+  box-shadow: 0 0 5px #000; //  border: 10px solid #EEE;
 
   .nav-header {
     background: @blueDark;
     color: @light;
   }
 
-   li > a, .nav-header {
+  li > a, .nav-header {
     margin-left: -20px;
     margin-right: -20px;
     text-shadow: none;
@@ -35,8 +33,7 @@
 
 .setting-box {
   border: 10px solid @blueDark;
-  box-shadow: 0 0 5px @dark;
-//  .gradient(bottom, @yellowLightest, @light);
+  box-shadow: 0 0 5px @dark; //  .gradient(bottom, @yellowLightest, @light);
 
   .page-header {
     margin: 0;
@@ -48,4 +45,15 @@
 
   }
 
+// Bit wider control labels
+  .control-label {
+    width: 180px;
+  }
+  .controls {
+    margin-left: 200px;
+  }
+  .form-actions {
+    padding-left: 200px;
+  }
+
 }
\ No newline at end of file
diff --git a/module/web/static/js/views/input/inputView.js b/module/web/static/js/views/input/inputView.js
index 15dc71aad..56087c516 100644
--- a/module/web/static/js/views/input/inputView.js
+++ b/module/web/static/js/views/input/inputView.js
@@ -10,6 +10,9 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
         default_value: null,
         description: null,
 
+        // enables tooltips
+        tooltip: true,
+
         initialize: function(model, value, default_value, description) {
             this.model = model;
             this.value = value;
@@ -18,9 +21,36 @@ define(['jquery', 'backbone', 'underscore'], function($, Backbone, _) {
         },
 
         render: function() {
+            this.renderInput();
+
+            // data for tooltips
+            if (this.description && this.tooltip) {
+                this.$el.data('content', this.description);
+//                this.$el.data('title', "TODO: title");
+                this.$el.popover({
+                    placement: 'right',
+                    trigger: 'hover',
+                    delay: { show: 500, hide: 100 }
+                });
+            }
+
             return this;
         },
 
+        renderInput: function() {
+            // Overwrite this
+        },
+
+        showTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('show');
+        },
+
+        hideTooltip: function() {
+            if (this.description && this.tooltip)
+                this.$el.popover('hide');
+        },
+
         destroy: function() {
             this.undelegateEvents();
             this.unbind();
diff --git a/module/web/static/js/views/input/textInput.js b/module/web/static/js/views/input/textInput.js
index 7252ce289..36cdf9f06 100644
--- a/module/web/static/js/views/input/textInput.js
+++ b/module/web/static/js/views/input/textInput.js
@@ -5,10 +5,12 @@ define(['jquery', 'backbone', 'underscore', './inputView'], function($, Backbone
         // TODO
         tagName: 'input',
         events: {
-            'keypress': 'onChange'
+            'keypress': 'onChange',
+            'focus': 'showTooltip',
+            'focusout': 'hideTooltip'
         },
 
-        render: function() {
+        renderInput: function() {
             this.$el.attr('type', 'text');
             this.$el.attr('name', 'textInput');
 
diff --git a/module/web/templates/default/settings.html b/module/web/templates/default/settings.html
index 7f6bbeb8e..a32a6e0dd 100644
--- a/module/web/templates/default/settings.html
+++ b/module/web/templates/default/settings.html
@@ -46,6 +46,7 @@
         <div class="control-group">
             <label class="control-label"><% label %></label>
             <div class="controls">
+{#                <span class="help-inline"><% description %></span>#}
             </div>
         </div>
     </script>
-- 
cgit v1.2.3