mirror of
https://github.com/fhem/fhem-mirror.git
synced 2025-01-31 06:39:11 +00:00
f18.js: add "Fixed input" switch (Forum #82351)
git-svn-id: https://svn.fhem.de/fhem/trunk@16929 2b470e98-0d58-463d-a4d8-8e2adae1ed80
This commit is contained in:
rudolfkoenig
parent
332012e1da
commit
d5bbb1acd2
@ -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("<table id='f18tr' class='block wide'></table>");
|
||||
appendTo = "table#f18tr";
|
||||
|
||||
addRow("room", "Target", '<select><option>all</option></select>');
|
||||
addRow("room", "Target <select><option>all</option></select>");
|
||||
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", "<a href='#'>Background image: <span>"+
|
||||
addRow("bgImg", "<a href='#'>Background: <span>"+
|
||||
(bgImg ? bgImg : "none")+"</span></a>");
|
||||
$(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";
|
||||
|
||||
@ -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; }
|
||||
|
||||
Loading…
Reference in New Issue
Block a user