From f46a4ba14deb934416340f9cb5193abc71af5caa Mon Sep 17 00:00:00 2001 From: rudolfkoenig <> Date: Sat, 3 May 2014 11:57:12 +0000 Subject: [PATCH] fhemweb_multiple.js rewrite as jQuery-ui-dialog + default .css reorg git-svn-id: https://svn.fhem.de/fhem/trunk@5731 2b470e98-0d58-463d-a4d8-8e2adae1ed80 --- fhem/www/pgm2/darkCommon.css | 6 +++ fhem/www/pgm2/darksmallscreenstyle.css | 4 +- fhem/www/pgm2/darkstyle.css | 2 +- fhem/www/pgm2/darktouchpadstyle.css | 2 - fhem/www/pgm2/defaultCommon.css | 68 ++++++++++++++++++++++++ fhem/www/pgm2/fhemweb_multiple.js | 71 +++++++++++++++++++------ fhem/www/pgm2/ios7Common.css | 6 +++ fhem/www/pgm2/ios7smallscreenstyle.css | 2 +- fhem/www/pgm2/ios7style.css | 2 +- fhem/www/pgm2/ios7touchpadstyle.css | 3 +- fhem/www/pgm2/jquery-ui.min.css | 5 ++ fhem/www/pgm2/smallscreenstyle.css | 45 +++------------- fhem/www/pgm2/style.css | 73 ++------------------------ fhem/www/pgm2/touchpadstyle.css | 68 +++--------------------- 14 files changed, 163 insertions(+), 194 deletions(-) create mode 100644 fhem/www/pgm2/darkCommon.css create mode 100644 fhem/www/pgm2/defaultCommon.css create mode 100644 fhem/www/pgm2/ios7Common.css create mode 100644 fhem/www/pgm2/jquery-ui.min.css diff --git a/fhem/www/pgm2/darkCommon.css b/fhem/www/pgm2/darkCommon.css new file mode 100644 index 000000000..4ce09b41d --- /dev/null +++ b/fhem/www/pgm2/darkCommon.css @@ -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; } diff --git a/fhem/www/pgm2/darksmallscreenstyle.css b/fhem/www/pgm2/darksmallscreenstyle.css index 1ea14c58e..102cf608f 100644 --- a/fhem/www/pgm2/darksmallscreenstyle.css +++ b/fhem/www/pgm2/darksmallscreenstyle.css @@ -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; } - - diff --git a/fhem/www/pgm2/darkstyle.css b/fhem/www/pgm2/darkstyle.css index 371f786f7..776cf75fd 100644 --- a/fhem/www/pgm2/darkstyle.css +++ b/fhem/www/pgm2/darkstyle.css @@ -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;} diff --git a/fhem/www/pgm2/darktouchpadstyle.css b/fhem/www/pgm2/darktouchpadstyle.css index fbd9dbbc1..9e9ab75be 100644 --- a/fhem/www/pgm2/darktouchpadstyle.css +++ b/fhem/www/pgm2/darktouchpadstyle.css @@ -1,3 +1 @@ -@import url("dashboard_darkstyle.css"); - @import url("darkstyle.css"); diff --git a/fhem/www/pgm2/defaultCommon.css b/fhem/www/pgm2/defaultCommon.css new file mode 100644 index 000000000..cf513bd27 --- /dev/null +++ b/fhem/www/pgm2/defaultCommon.css @@ -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; } diff --git a/fhem/www/pgm2/fhemweb_multiple.js b/fhem/www/pgm2/fhemweb_multiple.js index d4f5d97bd..44091e68d 100644 --- a/fhem/www/pgm2/fhemweb_multiple.js +++ b/fhem/www/pgm2/fhemweb_multiple.js @@ -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'+ + ''; + } + + $('body').append( + ''); + + $('#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