From d5bbb1acd2c8d5d51669e18c376bac0982474ea6 Mon Sep 17 00:00:00 2001
From: rudolfkoenig <>
Date: Sun, 1 Jul 2018 15:50:33 +0000
Subject: [PATCH] f18.js: add "Fixed input" switch (Forum #82351)
git-svn-id: https://svn.fhem.de/fhem/trunk@16929 2b470e98-0d58-463d-a4d8-8e2adae1ed80
---
fhem/www/pgm2/f18.js | 19 ++++-
fhem/www/pgm2/f18style.css | 169 ++++++++++++++++++++++++++++++++++---
2 files changed, 174 insertions(+), 14 deletions(-)
diff --git a/fhem/www/pgm2/f18.js b/fhem/www/pgm2/f18.js
index 279aba05f..aaf054dd5 100644
--- a/fhem/www/pgm2/f18.js
+++ b/fhem/www/pgm2/f18.js
@@ -1,7 +1,7 @@
"use strict";
FW_version["f18.js"] = "$Id$";
-// TODO: absPos,hierMenu+Pin,menuBorder,f18style.css,SVGcolors,floorplan
+// TODO: absPos,hierMenu+Pin,menuBorder,SVGcolors,floorplan
var f18_attr={}, f18_sd, f18_icon={}, f18_hasPos, f18_room;
var f18_small = (screen.width < 480 || screen.height < 480);
@@ -53,6 +53,7 @@ $(document).ready(function(){
f18_icon.pinOut = f18_icon.pinIn
.replace('/>',' transform="rotate(90,896,896)"/>');
+ f18_setFixedInput();
f18_menu();
f18_tables();
f18_svgSetCols();
@@ -267,7 +268,7 @@ f18_special()
$("tr#f18rr").append("");
appendTo = "table#f18tr";
- addRow("room", "Target", '');
+ addRow("room", "Target ");
FW_cmd(FW_root+"?cmd=jsonlist2 .* room&XHR=1", function(data) {
var d;
try { d=JSON.parse(data); } catch(e){ log(data); return FW_okDialog(e); }
@@ -321,7 +322,7 @@ f18_special()
$("table.f18colors input").attr("size", 8);
var bgImg = attr("bgImg", true);
- addRow("bgImg", "Background image: "+
+ addRow("bgImg", "Background: "+
(bgImg ? bgImg : "none")+"");
$(appendTo+" tr.ar_bgImg a").click(function(){
FW_cmd(FW_root+'?cmd='+
@@ -350,6 +351,7 @@ f18_special()
else
$("div.pinHeader div.pin").css("display", c ? "none":"block");
});
+ addHider("fixedInput", true, "Fixed input", f18_setFixedInput);
$("div.f18colors").css("margin-top", "20px");
$("tr.f18 div.fileList").each(function(e){f18_addPinToStyleDiv(this)});
@@ -357,6 +359,15 @@ f18_special()
loadScript("pgm2/fhemweb_colorpicker.js", f18_drawSpecial);
}
+function
+f18_setFixedInput()
+{
+ $("#menu,#menuBtn,#content,#hdr")
+ .css(f18_getAttr("fixedInput") ?
+ { position:"fixed", overflow:"auto" } :
+ { position:"absolute", overflow:"visible" });
+}
+
function
f18_addPinToStyleDiv(el)
{
@@ -535,7 +546,7 @@ f18_setCss(why)
function bg(c) { return "{ background:#"+c+"; fill:#"+c+"; }\n" }
function fg(c) { return "{ color:#"+c+"; }\n" }
style += ".col_fg, body, input, textarea "+fg(col("fg"));
- style += ".col_bg, #menu, textarea, input, option "+bg(col("bg"));
+ style += ".col_bg, textarea, input, option "+bg(col("bg"));
style += ".col_link,a:not(.changed),.handle,.fhemlog,input[type=submit],"+
"select,div.ui-widget-content a "+
"{color:#"+col("link")+"!important; stroke:#"+col("link")+";}\n";
diff --git a/fhem/www/pgm2/f18style.css b/fhem/www/pgm2/f18style.css
index f65a5a546..2e21c2a36 100644
--- a/fhem/www/pgm2/f18style.css
+++ b/fhem/www/pgm2/f18style.css
@@ -1,21 +1,171 @@
-@import url("defaultCommon.css");
+@import url("dashboard_style.css");
+
+body,input,select,textarea { font-family:Arial, sans-serif; font-size:16px;}
+textarea, .ui-dialog.ui-widget textarea { font-family:Courier; }
+input,textarea { border-style:ridge; }
#logo {
- position:absolute; top:10px; left:52px; width:32px; height:32px; z-index:10;
+ position:fixed; top:10px; left:52px; width:32px; height:32px; z-index:10;
background-image:url(../images/default/fhemicon.png);
background-size: contain; background-repeat: no-repeat;
}
-#menuBtn { position:absolute; top:10px; left:10px; width:32px; height:32px; }
-#hdr { position:absolute; top:10px; right:10px; }
-#content { position:absolute; top:50px; left:10px; bottom:10px; right:10px; }
+#menuBtn { top:10px; left:10px; width:32px; height:32px; }
+#hdr { top:10px; right:10px; }
+#content { top:50px; left:10px; bottom:10px; right:10px; }
#menu {
- position: absolute;
- top:50px; left:-120%;
+ top:50px; bottom:10px; left:-120%;
z-index:20;
display:inline-block;
padding:0 0.5em 0.5em 0;
}
#menu.visible { left:10px!important; }
+#console { width:100%; top:2em; bottom:0px; position:absolute; overflow-y:auto;}
+#errmsg { background-color: #000000; color: #FFFFFF;
+ position:fixed; top:0px; left:40px; z-index: 10; }
+
+.devType { padding-top:20px; }
+a { color:#278727; }
+img { border-style:none; }
+.wide { width:100%; }
+table.readings td:nth-child(2) { word-break: break-all; }
+
+table.block { border:1px solid gray; }
+table { border-radius:8px; }
+table.room { border:1px solid gray; width: 100%; }
+tr.column > td { padding:0; vertical-align:top;}
+.changed a, .changed { color:red; }
+.fhemlog { color:#278727; }
+.col2 { text-align:center; }
+
+/* Documentation */
+h2,h4 { color:#52865D; line-height:1.3;
+ margin-top:1.5em; font-family:Arial,Sans-serif; }
+h3 { margin-bottom:0; 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; }
+#right { position:absolute; top:10px; left:10px; bottom:5px; right: 5px; }
+
+.langLinks { font-size: 0.6em; }
+
+/* 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; }
+.colorpicker_ct .slider { background: url(../jscolor/ct_background.svg); }
+.colorpicker_ct_mired .slider { background: url(../jscolor/ct_mired_background.svg); }
+.colorpicker_hue .slider { background: url(../jscolor/hue_background.svg); }
+.get,.set,.attr { margin-bottom:5px; float:left; }
+select.svgSrc { width:100px; }
+select.svgColumn { width:50px; }
+select.svgRegexp { width:120px; }
+
+/* sortable Widget */
+ul.sortable-src, ul.sortable-dest {
+ min-width: 130px; min-height:1.8em;
+ list-style-type: none;border: 2px solid black;
+ vertical-align:middle; border-radius: 3px; margin: 3px;
+ background: #eee; padding: 2px;
+}
+ul.sortable-src li, ul.sortable-dest li {
+ color: black!important;font-size: 0.8em;
+ line-height: 1.6em; vertical-align:middle;
+ text-align:left; border-radius:3px;
+ margin: 3px; padding: 2px; padding-left:4px;
+ min-width: 120px;
+}
+ul.sortable-dest { background: #278727; }
+span.sort-item-delete-link {
+ float:right; margin:0px;
+ vertical-align:middle;
+ margin-left:3px; padding:0px;
+}
+.ui-state-highlight { height: 1.1em; line-height: 1.1em; }
+
+
+
+.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; }
+.set .set { margin-bottom:2px; margin-top:3px; } /* timepicker */
+
+pre { white-space: pre-wrap; }
+svg { height:32px; width:32px; vertical-align:middle; margin:2px 0;}
+svg:not([fill]):not(.jssvg) { fill:#278727; }
+
+svg.on,svg.FS20_on { fill:orange!important; }
+
+/* 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; }
+div.ui-dialog-titlebar { padding:0!important; border:none; background:#F0F0D8; }
+button.ui-dialog-titlebar-close { display:none; }
+
+div.ui-widget-content a {color:#278727!important;}
+.ui-widget { font-family:Arial,sans-serif!important; }
+.ui-button-text { font-weight:normal!important; color:#555!important; }
+
+/* UZSU */
+.ui-button-text-only.ui-state-active { background:#F0F0D8; }
+
+#fwmenu {
+ position: absolute; z-index:1005;
+ text-align:left; max-width:600px;
+ font-weight: normal; font-size: 100%;
+ border:1px solid #278727;
+}
+#fwmenu li a { color:#278727; }
+
+div#svgmarker {
+ position: absolute; z-index:1005; padding: 6px 10px;
+ text-align:left; max-width:600px;
+ color:#278727; background:#FFFFE7;
+ border:2px solid #278727; border-radius:4px;
+}
+
+div.detLink { display:inline-block; margin-right:0.5em; }
+
+select [value^=l0] { color: red; }
+select [value^=l1] { color: green; }
+select [value^=l2] { color: blue; }
+select [value^=l3] { color: pink; }
+select [value^=l4] { color: brown; }
+select [value^=l5] { color: black; }
+select [value^=l6] { color: olive; }
+select [value^=l7] { color: gray; }
+select [value^=l8] { color: yellow; }
+
+svg.zw_nr .zwBox { stroke-width:2px; }
+svg.zw_nr .zwDongle { stroke:red; stroke-width:2px; }
+svg.zw_nr .zwMargin { stroke-width:1px; fill:none; }
+svg.zw_nr .zwLine { stroke-width:1px; }
+svg.zw_nr .zwArrowHead { stroke-width:1px; }
+svg.zw_nr { height:auto; width:auto; margin:0; }
+
+.col_fg { color:#000000; }
+.col_link { color:#278727; stroke:#278727; }
+.col_bg { background: #FFFFE7; fill:#FFFFE7; }
+.col_evenrow { background: #F8F8E0; fill:#F8F8E0; }
+.col_oddrow { background: #F0F0D8; fill:#F0F0D8; }
+.col_header { background: #E0E0C8; fill:#E0E0C8; }
+.col_menu { background: #D7FFFF; fill:#D7FFFF; }
+.col_sel { background: #A0FFFF; fill:#A0FFFF; }
+
+/* end of defaultCommon.css */
+
table.room,table.block.wide,table.fileList {
border:0;
border-radius:0;
@@ -27,7 +177,6 @@ table.block.wide td > div { padding:0 4px; }
#menuScrollArea { display:none; } /* commandref */
body[fw_id] #menuScrollArea { display:block; } /* not commandref */
-#right { top:10px; left:10px; }
input[type=submit] { border:none; background:none; }
select { background:none; }
@@ -61,8 +210,8 @@ body.pinnedMenu #menuBtn { display:none; }
body.pinnedMenu #menu { left:10px; }
body.pinnedMenu #logo { left:10px; }
body.small.rightMenu #menuBtn { right:10px; left:auto; }
-body.small.rightMenu #logo { right:52px; left:auto; }
-body.small.rightMenu #hdr { left:10px; right:auto; }
+body.small.rightMenu #logo { right:52px; left:auto; }
+body.small.rightMenu #hdr { left:10px; right:auto; }
body { background-repeat: no-repeat; background-size:cover; }
div.SVGlabel { display:inline-block; }