From 6d43a995abbeee7c08678815a497f4370ebdabbe Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Sat, 8 Mar 2014 10:50:39 +0200
Subject: [PATCH] sliders now have a caption that's visible when clicked

---
 src/config.py     |  2 +-
 static/css/ui.css | 11 +++++++++++
 static/js/ui.js   | 10 ++++++++--
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/config.py b/src/config.py
index 9cd00e6..b3e565b 100644
--- a/src/config.py
+++ b/src/config.py
@@ -1035,7 +1035,7 @@ def _set_default_motion_camera(camera_id, data, old_motion):
         data.setdefault('stream_quality', 85)
         data.setdefault('stream_motion', False)
     data.setdefault('@webcam_resolution', 100)
-    data.setdefault('@webcam_server_resize', True)
+    data.setdefault('@webcam_server_resize', False)
     
     data.setdefault('text_left', data['@name'])
     data.setdefault('text_right', '%Y-%m-%d\\n%T')
diff --git a/static/css/ui.css b/static/css/ui.css
index ac5a54f..0f665c4 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -275,6 +275,17 @@ div.slider-cursor {
     cursor: pointer;
 }
 
+div.slider-cursor-label {
+    font-size: 0.6em;
+    margin-left: 1.5em;
+    margin-top: 0.15em;
+    background: rgba(30, 30, 30, 0.8);
+    vertical-align: top;
+    padding: 1px 2px;
+    border-radius: 3px;
+    display: none;
+}
+
 
     /* modal dialogs */
     
diff --git a/static/js/ui.js b/static/js/ui.js
index 0fa1e8c..a1e3ce0 100644
--- a/static/js/ui.js
+++ b/static/js/ui.js
@@ -79,6 +79,9 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
     var cursor = $('<div class="slider-cursor"></div>');
     bar.append(cursor);
     
+    var cursorLabel = $('<div class="slider-cursor-label"></div>');
+    cursor.append(cursorLabel);
+    
     function bestPos(pos) {
         if (pos < 0) {
             pos = 0;
@@ -122,7 +125,7 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
     
     function sliderChange(val) {
         $input.val(val.toFixed(decimals));
-        slider.attr('title', '' + val.toFixed(decimals) + unit);
+        cursorLabel.html('' + val.toFixed(decimals) + unit);
     }
     
     function bodyMouseMove(e) {
@@ -144,6 +147,8 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
         $('body').unbind('mousemove', bodyMouseMove);
         $('body').unbind('mouseup', bodyMouseUp);
         
+        cursorLabel.css('display', 'none');
+        
         $input.change();
     }
     
@@ -159,6 +164,7 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
         $('body').mouseup(bodyMouseUp);
         
         slider.focus();
+        cursorLabel.css('display', 'inline-block');
         
         return false;
     });
@@ -212,7 +218,7 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima
         var pos = valToPos(value);
         pos = bestPos(pos);
         cursor.css('left', pos + '%');
-        slider.attr('title', '' + $input.val() + unit);
+        cursorLabel.html($input.val() + unit);
     }
     
     /* transfer the CSS classes */
-- 
2.39.5