From d316e6ed30e1bf5fae9afdadb51020a476c62238 Mon Sep 17 00:00:00 2001
From: Calin Crisan <ccrisan@gmail.com>
Date: Sun, 22 Feb 2015 20:44:23 +0200
Subject: [PATCH] added tooltips for sections

---
 static/css/main.css |  2 +-
 static/css/ui.css   | 15 ++++++++++++---
 templates/main.html | 41 ++++++++++++++++++++++++++---------------
 3 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/static/css/main.css b/static/css/main.css
index 946e5ec..9b3d87d 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -280,7 +280,7 @@ div.settings-section-title {
     position: relative;
     text-align: right;
     background-color: rgba(100, 100, 100, 0.3);
-    padding: 5px;
+    padding: 5px 0.5em 5px 5px;
 }
 
 table.settings {
diff --git a/static/css/ui.css b/static/css/ui.css
index 8663315..bb155a8 100644
--- a/static/css/ui.css
+++ b/static/css/ui.css
@@ -442,12 +442,21 @@ span.help-mark {
     background-color: #414141;
     color: #3498db;
     font-size: 0.75em;
-    width: 1.1em;
-    height: 1.1em;
-    border-radius: 0.5em;
+    font-family: monospace;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 100em;
     cursor: pointer;
+    vertical-align: middle;
+    position: relative;
+    top: -0.1em;
+}
+
+div.settings-section-title > span.help-mark {
+    background-color: #515151;
 }
 
+div.settings-section-title:HOVER > span.help-mark,
 tr:HOVER span.help-mark {
     visibility: visible;
 }
diff --git a/templates/main.html b/templates/main.html
index 0913623..314347d 100644
--- a/templates/main.html
+++ b/templates/main.html
@@ -90,7 +90,8 @@
     <div class="page">
         <div class="settings closed">
             <div class="settings-container">
-                <div class="settings-section-title"><input type="checkbox" class="styled section general main-config" id="motionEyeSwitch">General Settings</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section general main-config" id="motionEyeSwitch">General Settings
+                        <span class="help-mark" title="general settings, not related to any camera">?</span></div>
                 <table class="settings">
                     <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Show Advanced Settings</span></td>
@@ -148,8 +149,9 @@
                 
                 {% for section in main_sections.values() %}
                 {% if section.get('label') and section.get('configs') %}
-                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}" title="{{section.get('description') or ''}}">{% if section.get('onoff') %}
-                        <input type="checkbox" class="styled section additional-section {{section['name']}} main-config" id="{{section['name']}}Switch">{% endif %}{{section['label']}}</div>
+                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}">{% if section.get('onoff') %}
+                        <input type="checkbox" class="styled section additional-section {{section['name']}} main-config" id="{{section['name']}}Switch">{% endif %}{{section['label']}}
+                        {% if section.get('description') %}<span class="help-mark" title="{{section['description']}}">?</span>{% endif %}</div>
                 <table class="settings">
                     {% for config in section['configs'] %}
                         {{config_item(config)}}
@@ -158,7 +160,8 @@
                 {% endif %}                    
                 {% endfor %}
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section device camera-config" id="videoDeviceSwitch">Video Device</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section device camera-config" id="videoDeviceSwitch">Video Device
+                        <span class="help-mark" title="enable this if you want to use this camera device">?</span></div>
                 <table class="settings">
                     <tr class="settings-item" required="true" strip="true">
                         <td class="settings-item-label"><span class="settings-item-label">Camera Name</span></td>
@@ -235,7 +238,8 @@
                     {% endfor %}
                 </table>
                 
-                <div class="settings-section-title advanced-setting">File Storage</div>
+                <div class="settings-section-title advanced-setting">File Storage
+                        <span class="help-mark" title="choose where and how your media files are saved">?</span></div>
                 <table class="settings advanced-setting">
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Storage Device</span></td>
@@ -285,7 +289,8 @@
                     {% endfor %}
                 </table>
                 
-                <div class="settings-section-title advanced-setting"><input type="checkbox" class="styled section text-overlay camera-config" id="textOverlaySwitch">Text Overlay</div>
+                <div class="settings-section-title advanced-setting"><input type="checkbox" class="styled section text-overlay camera-config" id="textOverlaySwitch">Text Overlay
+                        <span class="help-mark" title="choose what information is displayed on the captured frames">?</span></div>
                 <table class="settings advanced-setting">
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Left Text</span></td>
@@ -326,7 +331,8 @@
                     {% endfor %}
                 </table>
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section streaming camera-config" id="videoStreamingSwitch">Video Streaming</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section streaming camera-config" id="videoStreamingSwitch">Video Streaming
+                        <span class="help-mark" title="enable this if you want video streaming for this camera">?</span></div>
                 <table class="settings">
                     <tr class="settings-item advanced-setting local-streaming" min="1" max="30" snap="0" ticks="1|5|10|15|20|25|30" decimals="0">
                         <td class="settings-item-label"><span class="settings-item-label">Streaming Frame Rate</span></td>
@@ -378,7 +384,8 @@
                     {% endfor %}
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section still-images camera-config" id="stillImagesSwitch">Still Images</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section still-images camera-config" id="stillImagesSwitch">Still Images
+                        <span class="help-mark" title="enable this if you want to capture still images (pictures)">?</span></div>
                 <table class="settings">
                     <tr class="settings-item advanced-setting" required="true" strip="true">
                         <td class="settings-item-label"><span class="settings-item-label">Image File Name</span></td>
@@ -430,7 +437,8 @@
                     {% endfor %}
                 </table>
                 
-                <div class="settings-section-title advanced-setting"><input type="checkbox" class="styled section motion-detection camera-config" id="motionDetectionSwitch">Motion Detection</div>
+                <div class="settings-section-title advanced-setting"><input type="checkbox" class="styled section motion-detection camera-config" id="motionDetectionSwitch">Motion Detection
+                        <span class="help-mark" title="enable this to use and configure the motion detection mechanism">?</span></div>
                 <table class="settings advanced-setting">
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Show Frame Changes</span></td>
@@ -480,7 +488,8 @@
                     {% endfor %}
                 </table>
                 
-                <div class="settings-section-title"><input type="checkbox" class="styled section motion-movies camera-config" id="motionMoviesSwitch">Motion Movies</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section motion-movies camera-config" id="motionMoviesSwitch">Motion Movies
+                        <span class="help-mark" title="enable this if you want to record motion movies">?</span></div>
                 <table class="settings">
                     <tr class="settings-item advanced-setting" required="true" strip="true">
                         <td class="settings-item-label"><span class="settings-item-label">Movie File Name</span></td>
@@ -515,8 +524,8 @@
                         {{config_item(config)}}
                     {% endfor %}
                 </table>
-                
-                <div class="settings-section-title advanced-setting">Motion Notifications</div>
+                <div class="settings-section-title advanced-setting">Motion Notifications
+                        <span class="help-mark" title="enable this if you want to be notified when motion is detected">?</span></div>
                 <table class="settings">
                     <tr class="settings-item advanced-setting">
                         <td class="settings-item-label"><span class="settings-item-label">Email Notifications</span></td>
@@ -599,7 +608,8 @@
                     {% endfor %}
                 </table>
 
-                <div class="settings-section-title"><input type="checkbox" class="styled section working-schedule camera-config" id="workingScheduleSwitch">Working Schedule</div>
+                <div class="settings-section-title"><input type="checkbox" class="styled section working-schedule camera-config" id="workingScheduleSwitch">Working Schedule
+                        <span class="help-mark" title="enable this if you want to define a weekly working schedule for motion detection">?</span></div>
                 <table class="settings">
                     <tr class="settings-item">
                         <td class="settings-item-label"><span class="settings-item-label">Monday</span></td>
@@ -681,8 +691,9 @@
 
                 {% for section in camera_sections.values() %}
                 {% if section.get('label') and section.get('configs') %}
-                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}" title="{{section.get('description') or ''}}">{% if section.get('onoff') %}
-                        <input type="checkbox" class="styled section additional-section {{section['name']}} camera-config" id="{{section['name']}}Switch">{% endif %}{{section['label']}}</div>
+                <div class="settings-section-title {% if section['advanced'] %}advanced-setting{% endif %}">{% if section.get('onoff') %}
+                        <input type="checkbox" class="styled section additional-section {{section['name']}} camera-config" id="{{section['name']}}Switch">{% endif %}{{section['label']}}
+                        {% if section.get('description') %}<span class="help-mark" title="{{section['description']}}">?</span>{% endif %}</div>
                 <table class="settings">
                     {% for config in section['configs'] %}
                         {{config_item(config)}}
-- 
2.39.5