FHEM/fhem-mirror
2
0
Fork 0
mirror of https://github.com/fhem/fhem-mirror.git synced 2025-04-15 03:59:11 +00:00
Code Issues Releases Wiki Activity

fhemweb_multiple.js rewrite as jQuery-ui-dialog + default .css reorg

Browse Source 
git-svn-id: https://svn.fhem.de/fhem/trunk@5731 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig 2014-05-03 11:57:12 +00:00
parent a97b9a69a8
commit f46a4ba14d
14 changed files with 163 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
fhem/www/pgm2/darkCommon.css Normal file
View File

@ -0,0 +1,6 @@
@import url("dashboard_darkstyle.css");
/* jQuery-UI mods */
div.ui-dialog { border:3px solid white; padding: 0.2em; }
div.ui-dialog div.ui-dialog-titlebar { display:none; }
div.ui-widget-content { background:#444444; color:#CCCCCC; }

4
fhem/www/pgm2/darksmallscreenstyle.css
View File

@ -1,4 +1,4 @@
@import url("dashboard_darkstyle.css");
@import url("darkCommon.css");
/* Author: Bernd auf Basis der Vorlage von Till*/
body { background-color: #444444; background-image:url(../images/default/fhemicon_darksmall.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}
@ -97,5 +97,3 @@ div.dname, div.dval {
font-size:16px;
}
div.tiny { font-size:10px; }

2
fhem/www/pgm2/darkstyle.css
View File

@ -1,4 +1,4 @@
@import url("dashboard_darkstyle.css");
@import url("darkCommon.css");
/* Author: Till */
body { background-color: #444444; background-image:url(../images/default/fhemicon_dark.png); background-repeat:no-repeat; color: #CCCCCC; font-family:Arial, Helvetica, sans-serif; font-size:13px;}

2
fhem/www/pgm2/darktouchpadstyle.css
View File

@ -1,3 +1 @@
@import url("dashboard_darkstyle.css");
@import url("darkstyle.css");

68
fhem/www/pgm2/defaultCommon.css Normal file
View File

@ -0,0 +1,68 @@
@import url("dashboard_style.css");
body { font-family:Arial, sans-serif; background-color: #FFFFE7; }
textarea { font-family:Arial, sans-serif; font-size:16px;}
input { font-family:Arial, sans-serif; font-size:16px;}
select { font-family:Arial, sans-serif; font-size:16px;}
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#errmsg { background-color: #000000; color: #FFFFFF;
position:absolute; top:0px; left:40px; z-index: 10; }
.devType { padding-top:20px; }
a { color:#278727; }
img { border-style:none; }
.wide { width:100%; }
table.block { border:1px solid gray; background: #F8F8E0; }
table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; }
table { border-radius:8px; }
table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table.room tr.sel { background: #A0FFFF; }
tr.column td { padding:0; vertical-align:top;}
/* Documentation */
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
.changed { color:red; }
.col2 { text-align:center; }
/* Widgets */
.makeTable { display:inline; float:left; clear:left; /*detail-selector,slider*/
margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; }
select { margin-left:5px; margin-right:5px; }
.slider { float:left; width:250px; height:26px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
.makeSelect .slider {background:#F0F0D8; border-radius:8px;} /* detail only */
.set .set { margin-bottom:2px; margin-top:3px; } /* timepicker */
pre { white-space: pre-wrap; }
svg { height:32px; width:32px;
fill:#278727; vertical-align:middle; margin:2px 0; }
svg.on,svg.FS20_on { fill:orange; }
/* next lines are for remotecontrol */
.rc_body { border-style:solid; border-color:gray;
border-width:2px; padding:5px;
background:#C8C8B0; font-size:6px;}
.rc_button { padding: 5px 7px;}
.rc_button img { border-style:solid; border-width:1px;
border-color:transparent; }
.rc_button img:active { border-color: gray; }
/* jQuery-UI mods */
div.ui-dialog { border:3px solid #278727; padding: 0.2em; }
div.ui-dialog div.ui-dialog-titlebar { display:none; }
div.ui-widget-content { background:#FFFFE7; }

71
fhem/www/pgm2/fhemweb_multiple.js
View File

@ -3,35 +3,74 @@ FW_multipleSelChange(name, devName, vArr)
{
if(vArr.length < 2 || vArr[0] != "multiple")
return undefined;
var o = new Object();
o.newEl = document.createElement('select');
o.newEl.setAttribute('multiple', true);
for(var j=1; j < vArr.length; j++) {
var s = vArr[j].replace(/#/g," ");
o.newEl.options[j-1] = new Option(s, s);
}
o.newEl = document.createElement('input');
o.newEl.type='text';
o.newEl.size=30;
o.qFn = 'FW_multipleSetSelected(qArg, "%")';
o.qArg = o.newEl;
o.newEl.setAttribute('onFocus', 'FW_multipleSelect(this)');
o.newEl.setAttribute('allVals', vArr);
o.newEl.setAttribute('readonly', 'readonly');
return o;
}
function
FW_multipleSelect(el)
{
loadLink("pgm2/jquery-ui.min.css");
loadScript("pgm2/jquery.min.js", function(){
loadScript("pgm2/jquery-ui.min.js", function() {
var sel = $(el).val().split(","), selObj={};
for(var i1=0; i1<sel.length; i1++)
selObj[sel[i1]] = 1;
var vArr = $(el).attr("allVals").split(",");
var table = "";
for(var i1=1; i1<vArr.length; i1++) {
var v = vArr[i1];
table += '<tr>'+
'<td><input name="'+v+'" type="checkbox"'+
(selObj[v] ? " checked" : "")+'/></td>'+
'<td><label for="' +v+'">'+v+'</label></td></tr>';
}
$('body').append(
'<div id="multidlg" style="display:none">'+
'<table>'+table+'</table><input id="md_freeText"></input>'+
'</div>');
$('#multidlg').dialog(
{ modal:true, closeOnEscape:false, maxHeight:$(window).height()*3/4,
buttons:[
{ text:"Cancel", click:function(){ $('#multidlg').remove(); }},
{ text:"OK", click:function(){
var res=[];
if($("#md_freeText").val())
res.push($("#md_freeText").val());
$("#multidlg table input").each(function(){
if($(this).prop("checked"))
res.push($(this).attr("name"));
});
$(el).val(res.join(","));
$('#multidlg').remove();
}}]});
});
});
return false;
}
function
FW_multipleSetSelected(el, val)
{
if(typeof el == 'string')
el = document.getElementById(el);
var l = val.split(",");
for(var j=0;j<el.options.length;j++)
for(var i=0;i<l.length;i++)
if(el.options[j].value == l[i])
el.options[j].selected = true;
if(el.onchange)
el.onchange();
el.value=val;
}
FW_widgets['multiple'] = {
selChange:FW_multipleSelChange
};

6
fhem/www/pgm2/ios7Common.css Normal file
View File

@ -0,0 +1,6 @@
@import url("dashboard_ios7.css");
/* jQuery-UI mods */
div.ui-dialog { border:3px solid #e5e5e5; padding: 0.2em; }
div.ui-dialog div.ui-dialog-titlebar { display:none; }
div.ui-widget-content { font-family:Helvetica; background:white; color:#151515;}

2
fhem/www/pgm2/ios7smallscreenstyle.css
View File

@ -1,4 +1,4 @@
@import url("dashboard_ios7.css");
@import url("ios7Common.css");
/*
Edit: fhainz

2
fhem/www/pgm2/ios7style.css
View File

@ -1,4 +1,4 @@
@import url("dashboard_ios7.css");
@import url("ios7Common.css");
/*
Edit: fhainz

3
fhem/www/pgm2/ios7touchpadstyle.css
View File

@ -1,4 +1,3 @@
@import url("dashboard_ios7.css");
@import url("ios7style.css");
body { width: 1024px; }
@ -10,4 +9,4 @@ table.block, table.FileList { width:760px; }
.maininput{
width: 70%;
}
/*hdr alternate end */
/*hdr alternate end */

5
fhem/www/pgm2/jquery-ui.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

45
fhem/www/pgm2/smallscreenstyle.css
View File

@ -1,24 +1,15 @@
@import url("dashboard_style.css");
@import url("defaultCommon.css");
body { background-color: #FFFFE7;
font-family:Arial, sans-serif; }
textarea { font-family:Arial, sans-serif; font-size:16px;}
input { font-family:Arial, sans-serif; font-size:16px;}
select { font-family:Arial, sans-serif; font-size:16px;}
#back { position:absolute; top: 2px; left:18px; }
#logo { position:absolute; top: 2px; left: 2px;
width:64px; height:67px; background-image:url(../images/default/fhemicon_smallscreen.png); }
width:64px; height:67px;
background-image:url(../images/default/fhemicon_smallscreen.png); }
#menu { position:absolute; top: 2px; left:65px; }
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#hdr { position:absolute; top:40px; left:65px; }
#content { position:absolute; top:85px; left: 0px; right: 0px;}
#errmsg { background-color: #000000; color: #FFFFFF; position:absolute; top:0px; left:0px; z-index: 10; }
#errmsg { left:0px; }
.devType { padding-top:10px; font-size:12px;}
a { color: #278727; }
img { border-style: none; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}
.devType { font-size:12px;}
div.col1 { width: 188px; height: 30px; white-space: nowrap; }
div.col2 { width: 108px; height: 30px;
@ -47,36 +38,14 @@ div.dname, div.dval {
}
div.tiny { font-size:10px; }
table.block { width: 320px; background: #F8F8E0; border-spacing:0px; }
table.block { width: 320px; border-spacing:0px; border:0; }
table.block tr { border:1px solid gray; border-spacing:0px; }
table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; }
table.block td { width: 150px; };
table { -moz-border-radius:8px; border-radius:8px; }
#menu #block { visibility: hidden; }
#right { position:absolute; top:85px; left: 0px; right: 0px;
font-family:Arial, sans-serif; font-size:16px; }
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; }
button.dist { margin:5px; background:transparent; border:0px; cursor:pointer; }
button.dist { margin:5px; }
.makeTable { display:inline; float:left; clear:left;
margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; }
.set,.get,.attr { margin-bottom:5px; float:left;}
.slider { float:right; width:320px; height:26px; }
.set .slider,.get slider,.attr .slider { background:#F0F0D8; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
svg.on,svg.FS20_on { fill:orange; }
.changed { color:red; }
#cloudfree { display:none; }

73
fhem/www/pgm2/style.css
View File

@ -1,78 +1,13 @@
@import url("dashboard_style.css");
body { background-color: #FFFFE7;
font-family:Arial, sans-serif; font-size:16px;}
input { font-family:Arial, sans-serif; font-size:16px; }
select { font-family:Arial, sans-serif; font-size:16px; }
@import url("defaultCommon.css");
body { font-size:16px;}
#logo { margin-top:10px; margin-left:20px; width:120px; height:132px;
background-image:url(../images/default/fhemicon.png); }
#menu { margin-top:10px; margin-left:20px; width:140px; }
#hdr { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
#menuScrollArea { width: 175px; left:0px; top:0px; height:100%;
position:fixed; overflow-x:hidden; overflow-y:auto; }
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#hdr { position:absolute; top:10px; left:180px; }
#content { position:absolute; top:50px; left:180px; bottom:20px; right:10px; }
#errmsg { background-color: #000000; color: #FFFFFF;
position:absolute; top:0px; left:40px; z-index: 10; }
.devType { padding-top:20px; }
a { color: #278727; }
img { border-style: none; }
.wide { width:100%; }
table.block { border:1px solid gray; background: #F8F8E0; }
table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; }
table { border-radius:8px; }
table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table.room tr.sel { background: #A0FFFF; }
#right { position:absolute; top:20px; left:180px; }
h2,h3,h4 { color:#52865D; line-height:1.3;
margin-top:1.5em; font-family:Arial,Sans-serif; }
div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
a img { border-style:none; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}
/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; }
select { margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:250px; height:26px; }
/* detail only */
.makeSelect .slider {background:#F0F0D8; border-radius:8px;}
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
pre { white-space: pre-wrap; }
svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
svg.on,svg.FS20_on { fill:orange; }
/* next lines are for remotecontrol */
.rc_body { border-style: solid; border-color: gray; border-width: 2px; padding: 5px;
background: #C8C8B0; font-size:6px;}
.rc_button { padding: 5px 7px;}
.rc_button img { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }
.changed { color:red; }

68
fhem/www/pgm2/touchpadstyle.css
View File

@ -1,69 +1,15 @@
@import url("dashboard_style.css");
@import url("defaultCommon.css");
body { background-color: #FFFFE7;
font-family:Arial, sans-serif; font-size:18px; }
textarea { font-family:Arial, sans-serif; font-size:18px}
input { font-family:Arial, sans-serif; font-size:18px}
select { font-family:Arial, sans-serif; font-size:18px}
body { font-size:18px; }
textarea { font-size:18px; }
input { font-size:18px; }
select { font-size:18px; }
#logo { position:absolute; top:10px; left:10px;
width:120px; height:132px;
background-image:url(../images/default/fhemicon.png); }
width:120px; height:132px;
background-image:url(../images/default/fhemicon.png); }
#menu { position:absolute; top:152px;left:10px; width:140px; }
#hdr { position:absolute; top:10px; left:160px; }
#console { width:100%; height:100%; position:absolute; overflow-y:auto;}
#content { position:absolute; top:50px; left:160px; bottom:20px; right:10px; }
#errmsg { background-color:#000000; color:#FFFFFF;
position:absolute; top:0px; left:40px; z-index: 10; }
.devType { padding-top:20px; }
a { color: #278727; }
.col2 { text-align:center; }
tr.column td { padding:0; vertical-align:top;}
.wide { width:100%; }
table.block { border:1px solid gray; width: 100%; background: #F8F8E0; }
table.block tr.odd { background: #F0F0D8; }
table.block tr.sel { background: #F0F0D8; }
table { -moz-border-radius:8px; border-radius:8px; }
.col1, .col2, .col3 { padding: 8px; }
.dname, .dval { padding: 8px; }
table.room { border:1px solid gray; width: 100%; background: #D7FFFF; }
table.room tr.sel { background: #A0FFFF; }
div.block { border:1px solid gray; background: #F8F8E0; padding:0.7em; }
div.dist { padding-top:0.3em; }
button.dist { margin:10px; background:transparent; border:0px; cursor:pointer; }
/* detail-selector & slider */
.makeTable { display:inline; float:left; clear:left;
margin-top:10px; margin-bottom:20px;}
.makeSelect { display:inline; float:left; clear:left; }
select { margin-left:5px; margin-right:5px; }
.get,.set,.attr { margin-bottom:5px; float:left; }
.slider { float:left; width:250px; height:26px; }
/* detail only */
.makeSelect .slider {background:#F0F0D8; border-radius:8px;}
/* timepicker */
.set .set { margin-bottom:2px; margin-top:3px; }
.handle { position:relative; cursor:pointer; width:50px;
height:20px; line-height:20px;
-webkit-user-select:none; -moz-user-select:none; -user-select:none;
border:3px solid; color:#278727; text-align:center; }
.downText { margin-top:2px; }
svg { height:32px; width:32px; fill:#278727; vertical-align:middle; margin:2px 0; }
g.on { fill:red; }
/* next lines are for remotecontrol */
.rc_body { border-style: solid; border-color: gray; border-width: 2px; padding: 5px;
background: #C8C8B0; font-size:6px;}
.rc_button { padding: 5px 7px;}
.rc_button img { border-style: solid; border-width: 1px; border-color: transparent; }
.rc_button img:active { border-color: gray; }
.changed { color:red; }