From 6deb0d50fe4db80ab57beba2a05ed6102c29ff23 Mon Sep 17 00:00:00 2001
From: Manuel Friedli <manuel@fritteli.ch>
Date: Sun, 10 Aug 2014 23:14:29 +0200
Subject: [PATCH] converted controls into an overlay

---
 css/uhr.css            |  38 +++++++++++++++++++++++++++++++++++++-
 js/uhr.js              |  14 ++++++++------
 resources/close.png    | Bin 0 -> 407 bytes
 resources/settings.png | Bin 0 -> 435 bytes
 4 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 resources/close.png
 create mode 100644 resources/settings.png

diff --git a/css/uhr.css b/css/uhr.css
index 7c90817..50afbcd 100644
--- a/css/uhr.css
+++ b/css/uhr.css
@@ -164,7 +164,43 @@ body {
 }
 
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-	right: 0px; 
+	right: 0;
+}
+
+a.uhr-configlink {
+    cursor: pointer;
+    background: url("../resources/settings.png") no-repeat;
+    width: 24px;
+    height: 24px;
+    display: inline-block;
+    margin: 2px;
+}
+.uhr-controlpanel {
+    background-color: rgba(0,0,0,0.5);
+    position: fixed;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+}
+.uhr-controlpanel .content {
+    background-color: #fff;
+    margin-left: auto;
+    margin-right: auto;
+    width: 10em;
+    padding: 2em;
+    border-radius: 0.5em;
+    position: relative;
+}
+a.uhr-closecontrolpanel {
+    cursor: pointer;
+    display: inline-block;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+    width: 24px;
+    height: 24px;
+    background: url("../resources/close.png") no-repeat;
 }
 #disclaimer {
 	font-size: 0.5em;
diff --git a/js/uhr.js b/js/uhr.js
index ffdf019..6152d05 100644
--- a/js/uhr.js
+++ b/js/uhr.js
@@ -147,12 +147,14 @@
         e.css('font-size', (realWidth / 40) + 'px');
 
         if (this.options.controls) {
-            var configlink = $('<a id="uhr-configlink' + this.id + '">Configure</a>');
+            var configlink = $('<a class="uhr-configlink" id="uhr-configlink' + this.id + '"></a>');
             configlink.on('click', function () {
                 showConfigScreen.bind(this)();
             }.bind(this));
             e.after(configlink);
             var controlpanel = $('<div class="uhr-controlpanel" id="uhr-controlpanel' + this.id + '"></div>');
+            var content = $('<div class="content"></div>');
+            controlpanel.append(content);
             // on/off switch
             var toggleSwitch = $('<div class="onoffswitch" id="uhr-onoffswitch' + this.id + '"></div>');
             toggleSwitch.append('<input type="checkbox" class="onoffswitch-checkbox" id="uhr-onoffswitch-checkbox' + this.id + '" checked="checked" />');
@@ -160,7 +162,7 @@
                 + '<div class="onoffswitch-inner"></div>'
                 + '<div class="onoffswitch-switch"></div>'
                 + '</label>');
-            controlpanel.append(toggleSwitch);
+            content.append(toggleSwitch);
 
             // language chooser
             if (uhrGlobals.languages.length > 1) {
@@ -168,7 +170,7 @@
                 uhrGlobals.languages.forEach(function (item) {
                     languageChooser.append('<option value="' + item.code + '">' + item.language + '</option>');
                 });
-                controlpanel.append(languageChooser);
+                content.append(languageChooser);
             }
 
             // theme chooser
@@ -177,13 +179,13 @@
                 uhrGlobals.themes.forEach(function (item) {
                     themeChooser.append('<option value="' + item.styleClass + '">' + item.name + '</option>');
                 });
-                controlpanel.append(themeChooser);
+                content.append(themeChooser);
             }
-            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '">close</a>');
+            var closebutton = $('<a class="uhr-closecontrolpanel" id="uhr-closecontrolpanel' + this.id + '"></a>');
             closebutton.on('click', function () {
                 $('#uhr-controlpanel' + this.id).hide();
             }.bind(this));
-            controlpanel.append(closebutton);
+            content.append(closebutton);
             e.after(controlpanel);
             controlpanel.hide();
         }
diff --git a/resources/close.png b/resources/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b0301d641c650b83928250dbe452ee7f6d13d0f
GIT binary patch
literal 407
zcmV;I0cie-P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004ANkl<ZNQt$T
zJx&5a7>1u6tt_mpIfIoo7TmyC5u(8me@;O6c3i+1Lt-F?SQzdgH5FHonwrLBv6#Uu
zD>H*5`*yqg&GXF8H@lMoNIC+#Koh6|hP33s92fyTNz2T^KY+7Ds4r9C++b(EZ#a(G
zHP~gTDoul3^Quxaq&IYzm>7HkJYjc7IXUp`YW#)>ydmiUXqO~8(3W%uG(wV)U@U0{
zAZb{Ttl>lVYzDli2s)Bl>x+Wq2k!2-fLk9Vle7v*a^PCh>$ZmuJ_t=T)?@<=if{54
z_%4D_-A-d;MH>w*rquW(!7sR^mZ$MvNl4Hy!LP7uKG-7ZrwA@2ofhCPu70EOuI9oA
ziEYybFa|nXCbRxkTmmOPz+nK68|eFp3~(PAk0G)P{+Zlh&(NweH`oKZs*DWK!yeH4
z&J^e!OeT}BdcFPztgy%DF_0xfbKnzr1a2fPzX9T`e{?#Bb4CCF002ovPDHLkV1kNt
BtaJbX

literal 0
HcmV?d00001

diff --git a/resources/settings.png b/resources/settings.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6c8a5f959378ef03630b17437db88f3a61e67e4
GIT binary patch
literal 435
zcmV;k0ZjghP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0004cNkl<ZNQvFm
zv1?R86vg3h!xEMdL@Yw8U||s~#44bmm7O+P#o9WAAQmElBPmowh@gl?uoNr=(V&P{
zA{Iup)juJHm81%b#T#++Hi^40M9|aC%zftv_uQGsKC4yVNHUE%jN@^VS9<}B)Xb0I
z9lqluR+7x_1<*<|gT(?njMqsP3h*3Ou-3r4i={RuajXEwvC&hsfdl2d31D(d21$<N
zEv{l6H*i16y#@gEXYd8*aTfEqgU06nhx+cpFiLV#b!SHLD9MX@%}C!@gPYIbIX++&
z50hM|*R_(I#!>^=6dokGS%9;+i*Mz;i^VoNIMe_zw$0vX@%jbmG|r&3=q0Y>hpG#6
zNuKuB?R&`ozIJU<d7G|b0?)9Vq&o~?$H_@DrF!_@;}$Nef*eY%Bxi7Y8`wd-Nph(G
zkK&WxbN(lFaixt-)w^E@bZnjVv7XvN0h>E!kYoa%@dRISS@myN9uR=tGg!xovOJ{<
ddnoh2qMx|PYy99H%6|X=002ovPDHLkV1fWl$VvbJ

literal 0
HcmV?d00001