From 5c638cd6b859cef03c954e41c8e15bf5174930e5 Mon Sep 17 00:00:00 2001 From: Calin Crisan Date: Thu, 15 Aug 2013 12:43:22 +0300 Subject: [PATCH] ui improvements --- static/css/base-site.css | 47 ++++++++-- static/css/ui.css | 9 +- static/js/base.js | 26 +++--- static/js/ui.js | 13 ++- templates/base-site.html | 195 ++++++++++++++++++--------------------- 5 files changed, 155 insertions(+), 135 deletions(-) diff --git a/static/css/base-site.css b/static/css/base-site.css index 7208c22..9979e06 100644 --- a/static/css/base-site.css +++ b/static/css/base-site.css @@ -48,7 +48,6 @@ div.header { background-color: rgba(64, 64, 64, 0.5); height: 50px; position: relative; - z-index: 10; } div.header-container { @@ -93,7 +92,7 @@ div.settings.open { } div.settings-container { - padding-top: 60px; + padding-top: 10px; display: none; white-space: nowrap; } @@ -102,6 +101,11 @@ div.settings.open div.settings-container { display: block; } +div.settings-top-bar { + height: 50px; + background-color: #414141; +} + div.settings-section-title { position: relative; text-align: right; @@ -130,14 +134,40 @@ span.settings-item-label { font-size: 0.9em; } -input.settings-item-value { - +select.video-device { + padding: 4px 1.5em 4px 4px; + vertical-align: middle; + font-size: 20px; } -select.video-device { - position: absolute; - left: 2px; - top: 2px; +div.check-box.section { + margin: 0px; + float: left; +} + +div.check-box.top-bar { + margin: 10px; + float: right; + width: 90px; + height: 30px; +} + +div.check-box.top-bar div.check-box-button { + line-height: 30px; +} + +div.check-box.top-bar div.check-box-button span.check-box-text { + font-size: 20px; +} + +div.check-box.section div.check-box-button, +div.check-box.top-bar div.check-box-button { + background-color: #515151; +} + +div.check-box.on.section div.check-box-button, +div.check-box.on.top-bar div.check-box-button { + background-color: #3498db; } @@ -193,6 +223,7 @@ a { img.settings-button { margin: 2px; cursor: pointer; + vertical-align: middle; } div.logo { diff --git a/static/css/ui.css b/static/css/ui.css index 3db6f4f..faeb43e 100644 --- a/static/css/ui.css +++ b/static/css/ui.css @@ -43,8 +43,8 @@ div.check-box:HOVER { } div.check-box-button { - width: 1.25em; - height: 1em; + width: 50%; + height: 100%; left: 0px; background-color: #414141; color: #aaaaaa; @@ -55,14 +55,13 @@ div.check-box-button { } span.check-box-text { - line-height: 1em; font-size: 0.5em; font-weight: bold; - vertical-align: middle; + vertical-align: top; } div.check-box.on div.check-box-button { - left: 1.25em; + left: 50%; background-color: #3498db; color: white; } diff --git a/static/js/base.js b/static/js/base.js index af99f91..6795993 100644 --- a/static/js/base.js +++ b/static/js/base.js @@ -4,15 +4,11 @@ function initUI() { makeCheckBox($(this)); }); -// $('select.styled').each(function () { -// makeComboBox($(this)); -// }); - - makeSlider($('#device-brightness'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#device-contrast'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#device-saturation'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#device-hue'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#device-framerate'), 1, 30, 0, [ + makeSlider($('#brightnessSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#contrastSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#saturationSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#hueSlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#framerateSlider'), 1, 30, 0, [ {value: 1, label: '1'}, {value: 5, label: '5'}, {value: 10, label: '10'}, @@ -21,7 +17,7 @@ function initUI() { {value: 25, label: '25'}, {value: 30, label: '30'} ], null, 0); - makeSlider($('#streaming-framerate'), 1, 30, 0, [ + makeSlider($('#streamingFramerateSlider'), 1, 30, 0, [ {value: 1, label: '1'}, {value: 5, label: '5'}, {value: 10, label: '10'}, @@ -30,11 +26,11 @@ function initUI() { {value: 25, label: '25'}, {value: 30, label: '30'} ], null, 0); - makeSlider($('#streaming-quality'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#image-quality'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#movie-quality'), 0, 100, 0, null, 5, 0, '%'); - makeSlider($('#motion-frame-change-threshold'), 0, 10000, 0, null, 3, 0, 'px'); - makeSlider($('#motion-noise-level'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#streamingQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#imageQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#movieQualitySlider'), 0, 100, 0, null, 5, 0, '%'); + makeSlider($('#frameChangeThresholdSlider'), 0, 10000, 0, null, 3, 0, 'px'); + makeSlider($('#noiseLevelSlider'), 0, 100, 0, null, 5, 0, '%'); } function handleDocumentReady() { diff --git a/static/js/ui.js b/static/js/ui.js index 7c9f0da..7e075cb 100644 --- a/static/js/ui.js +++ b/static/js/ui.js @@ -17,7 +17,13 @@ function makeCheckBox($input) { buttonDiv.append(text); mainDiv.append(buttonDiv); - $input.parent().append(mainDiv); + /* transfer the CSS classes */ + mainDiv[0].className += ' ' + $input[0].className; + + /* add the element */ + $input.after(mainDiv); + + /* add event handers */ $input.change(function () { if (this.checked) { setOn(); @@ -187,11 +193,14 @@ function makeSlider($input, minVal, maxVal, snapMode, ticks, ticksNumber, decima slider.attr('title', '' + $input.val() + unit); } + /* transfer the CSS classes */ + slider[0].className += ' ' + $input[0].className; + /* handle input events */ $input.change(input2slider).change(); /* add the slider to the parent of the input */ - $input.parent().append(slider); + $input.after(slider); /* make the slider focusable */ slider[0].tabIndex = 0; diff --git a/templates/base-site.html b/templates/base-site.html index c1fce0a..616d3c9 100644 --- a/templates/base-site.html +++ b/templates/base-site.html @@ -2,8 +2,8 @@ {% block style %} {{super()}} - + {% endblock %} {% block script %} @@ -25,73 +25,70 @@
+
+ + + +
General Settings
- - + + - +
Enable motionEyeShow Advanced Settings ?
Target Directory ?
-
- - Video Device -
+
Video Device
- - - - - - + - + - + - + - + - + - + - +
Enable Video Device?
Camera Name ?
Light Switch Detection ?
Automatic Brightness ?
Brightness ?
Contrast ?
Saturation ?
Hue ?
Video Resolution - @@ -101,7 +98,7 @@
Video Rotation - @@ -112,56 +109,82 @@
Frame Rate ?
-
Video Streaming
+
Text Overlay
- - + + + + + + + + + + + + + + + + + +
Enable Video StreamingLeft Text + + ?
?
Right Text + + ?
?
+ +
Video Streaming
+ - + - + - +
Streaming Frame Rate ?
Streaming Quality ?
Motion Optimization ?
-
Still Images
+
Still Images
- - - - - - + - + - +
Enable Still Images?
Image File Name ?
Image Quality ?
Capture Mode - @@ -171,26 +194,34 @@
Snapshot Interval ?
-
Motion Movies
+
Motion Movies
- - + + - - + + - - + +
Enable Motion MoviesMovie File Name ?
Movie File NameMovie Quality ?
Movie QualityPreserve Movies + + ?
@@ -199,97 +230,51 @@ - + - + - + - + - + - + - +
Show Frame Changes ?
Frame Change Threshold ?
Automatic Noise Detection ?
Noise Level ?
Motion Gap ?
Frames Captured Before ?
Frames Captured After ?
-
Motion Notifications
+
Motion Notifications
- - - - - - - - - - - + - - - -
Enable Email Notifications?
Email Address?
Enable SMS Notifications ?
Phone Number?
- -
Text Overlay
- - - - - - - - - - - - - - - - - - - +
Left Text - - ?
?
Right Text - - ?
?
-- 2.39.5