converted controls into an overlay

This commit is contained in:
Manuel Friedli 2014-08-10 23:14:29 +02:00
parent 27435ed9a8
commit 6deb0d50fe
4 changed files with 45 additions and 7 deletions

View File

@ -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;

View File

@ -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();
}

BIN
resources/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 407 B

BIN
resources/settings.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 435 B