Show all status messages in a popup top bar
This commit is contained in:
samhed
Pierre Ossman
parent
ed8cbe4e7b
commit
ca5c74ad5a
|
|
@ -0,0 +1,81 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="25"
|
||||||
|
height="25"
|
||||||
|
viewBox="0 0 25 25"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="error.svg"
|
||||||
|
inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
|
||||||
|
inkscape:export-xdpi="90"
|
||||||
|
inkscape:export-ydpi="90">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#959595"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="22.627417"
|
||||||
|
inkscape:cx="13.274366"
|
||||||
|
inkscape:cy="14.078582"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="true"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:bbox-paths="true"
|
||||||
|
inkscape:bbox-nodes="true"
|
||||||
|
inkscape:snap-bbox-edge-midpoints="true"
|
||||||
|
inkscape:object-paths="true"
|
||||||
|
showguides="true"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1136"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-smooth-nodes="true"
|
||||||
|
inkscape:object-nodes="true"
|
||||||
|
inkscape:snap-intersection-paths="true"
|
||||||
|
inkscape:snap-nodes="true"
|
||||||
|
inkscape:snap-global="true">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4136" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-1027.3622)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="M 6.8222656 4.8027344 A 2.0002 2.0002 0 0 0 5.4296875 8.2363281 L 9.671875 12.480469 L 5.4296875 16.722656 A 2.0002 2.0002 0 1 0 8.2578125 19.550781 L 12.5 15.308594 L 16.742188 19.550781 A 2.0002 2.0002 0 1 0 19.570312 16.722656 L 15.328125 12.480469 L 19.570312 8.2363281 A 2.0002 2.0002 0 0 0 18.117188 4.8027344 A 2.0002 2.0002 0 0 0 16.742188 5.4082031 L 12.5 9.6503906 L 8.2578125 5.4082031 A 2.0002 2.0002 0 0 0 6.8222656 4.8027344 z "
|
||||||
|
transform="translate(0,1027.3622)"
|
||||||
|
id="path4155" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -0,0 +1,87 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="25"
|
||||||
|
height="25"
|
||||||
|
viewBox="0 0 25 25"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="info.svg"
|
||||||
|
inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
|
||||||
|
inkscape:export-xdpi="90"
|
||||||
|
inkscape:export-ydpi="90">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#959595"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1"
|
||||||
|
inkscape:cx="13.516502"
|
||||||
|
inkscape:cy="12.319239"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:bbox-paths="true"
|
||||||
|
inkscape:bbox-nodes="true"
|
||||||
|
inkscape:snap-bbox-edge-midpoints="true"
|
||||||
|
inkscape:object-paths="true"
|
||||||
|
showguides="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1136"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-smooth-nodes="true"
|
||||||
|
inkscape:object-nodes="true"
|
||||||
|
inkscape:snap-intersection-paths="true"
|
||||||
|
inkscape:snap-nodes="true"
|
||||||
|
inkscape:snap-global="true">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4136" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-1027.3622)">
|
||||||
|
<circle
|
||||||
|
style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||||
|
id="path4164"
|
||||||
|
cx="12"
|
||||||
|
cy="1032.3622"
|
||||||
|
r="2" />
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 12,1038.3622 0,9 2,0"
|
||||||
|
id="path4187"
|
||||||
|
inkscape:connector-curvature="0" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -0,0 +1,81 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
width="25"
|
||||||
|
height="25"
|
||||||
|
viewBox="0 0 25 25"
|
||||||
|
id="svg2"
|
||||||
|
version="1.1"
|
||||||
|
inkscape:version="0.91 r13725"
|
||||||
|
sodipodi:docname="warning.svg"
|
||||||
|
inkscape:export-filename="/home/ossman/devel/noVNC/images/drag.png"
|
||||||
|
inkscape:export-xdpi="90"
|
||||||
|
inkscape:export-ydpi="90">
|
||||||
|
<defs
|
||||||
|
id="defs4" />
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="base"
|
||||||
|
pagecolor="#959595"
|
||||||
|
bordercolor="#666666"
|
||||||
|
borderopacity="1.0"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:zoom="1"
|
||||||
|
inkscape:cx="16.457343"
|
||||||
|
inkscape:cy="12.179552"
|
||||||
|
inkscape:document-units="px"
|
||||||
|
inkscape:current-layer="layer1"
|
||||||
|
showgrid="false"
|
||||||
|
units="px"
|
||||||
|
inkscape:snap-bbox="true"
|
||||||
|
inkscape:bbox-paths="true"
|
||||||
|
inkscape:bbox-nodes="true"
|
||||||
|
inkscape:snap-bbox-edge-midpoints="true"
|
||||||
|
inkscape:object-paths="true"
|
||||||
|
showguides="false"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1136"
|
||||||
|
inkscape:window-x="1920"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:snap-smooth-nodes="true"
|
||||||
|
inkscape:object-nodes="true"
|
||||||
|
inkscape:snap-intersection-paths="true"
|
||||||
|
inkscape:snap-nodes="true"
|
||||||
|
inkscape:snap-global="true">
|
||||||
|
<inkscape:grid
|
||||||
|
type="xygrid"
|
||||||
|
id="grid4136" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<metadata
|
||||||
|
id="metadata7">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title></dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(0,-1027.3622)">
|
||||||
|
<path
|
||||||
|
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:4;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||||
|
d="M 12.513672 3.0019531 C 11.751609 2.9919531 11.052563 3.4242687 10.710938 4.1054688 L 3.2109375 19.105469 C 2.5461937 20.435369 3.5132277 21.9999 5 22 L 20 22 C 21.486772 21.9999 22.453806 20.435369 21.789062 19.105469 L 14.289062 4.1054688 C 13.951849 3.4330688 13.265888 3.0066531 12.513672 3.0019531 z M 12.478516 6.9804688 A 1.50015 1.50015 0 0 1 14 8.5 L 14 14.5 A 1.50015 1.50015 0 1 1 11 14.5 L 11 8.5 A 1.50015 1.50015 0 0 1 12.478516 6.9804688 z M 12.5 17 A 1.5 1.5 0 0 1 14 18.5 A 1.5 1.5 0 0 1 12.5 20 A 1.5 1.5 0 0 1 11 18.5 A 1.5 1.5 0 0 1 12.5 17 z "
|
||||||
|
transform="translate(0,1027.3622)"
|
||||||
|
id="path4208" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.8 KiB |
|
|
@ -39,6 +39,14 @@ html {
|
||||||
top: 0;
|
top: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
z-index: 200;
|
z-index: 200;
|
||||||
|
|
||||||
|
background: #b2bdcd; /* Old browsers */
|
||||||
|
background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
||||||
|
background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
||||||
|
background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
||||||
|
background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
||||||
|
background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
||||||
}
|
}
|
||||||
|
|
||||||
/* General button style */
|
/* General button style */
|
||||||
|
|
@ -167,47 +175,6 @@ html {
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Center status display */
|
|
||||||
#noVNC_status {
|
|
||||||
font-size: 12px;
|
|
||||||
padding-top: 4px;
|
|
||||||
height:32px;
|
|
||||||
text-align: center;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
z-index: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
margin-left: 0px;
|
|
||||||
}
|
|
||||||
.noVNC_status_normal {
|
|
||||||
background: #b2bdcd; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #b2bdcd 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2bdcd), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #b2bdcd 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
|
||||||
}
|
|
||||||
.noVNC_status_error {
|
|
||||||
background: #f04040; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #f04040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #f04040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
|
||||||
}
|
|
||||||
.noVNC_status_warn {
|
|
||||||
background: #f0f040; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #f0f040 0%, #899cb3 49%, #7e93af 51%, #6e84a3 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(49%,#899cb3), color-stop(51%,#7e93af), color-stop(100%,#6e84a3)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #f0f040 0%,#899cb3 49%,#7e93af 51%,#6e84a3 100%); /* W3C */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right side buttons */
|
/* Right side buttons */
|
||||||
.noVNC_buttons_right {
|
.noVNC_buttons_right {
|
||||||
float: right;
|
float: right;
|
||||||
|
|
@ -295,28 +262,60 @@ html {
|
||||||
float: right;
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Popup Status */
|
/* ----------------------------------------
|
||||||
#noVNC_popup_status {
|
* Status Dialog
|
||||||
|
* ----------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
#noVNC_status {
|
||||||
|
display: none;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: 1;
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 3;
|
||||||
|
|
||||||
margin: 15px;
|
padding: 5px;
|
||||||
top: 60px;
|
|
||||||
padding: 15px;
|
|
||||||
width: auto;
|
|
||||||
|
|
||||||
text-align: center;
|
flex-direction: row;
|
||||||
font-weight: bold;
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
|
||||||
|
line-height: 25px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: rgba(0,0,0,0.65);
|
|
||||||
|
|
||||||
-webkit-border-radius: 10px;
|
border-bottom: 1px solid rgba(0, 0, 0, 0.9);
|
||||||
-moz-border-radius: 10px;
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
#noVNC_popup_status.noVNC_hidden {
|
#noVNC_status.noVNC_open {
|
||||||
display: none;
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#noVNC_status::before {
|
||||||
|
content: "";
|
||||||
|
display: inline-block;
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#noVNC_status.noVNC_status_normal {
|
||||||
|
background: rgba(128,128,128,0.9);
|
||||||
|
}
|
||||||
|
#noVNC_status.noVNC_status_normal::before {
|
||||||
|
content: url("../images/info.svg") " ";
|
||||||
|
}
|
||||||
|
#noVNC_status.noVNC_status_error {
|
||||||
|
background: rgba(200,55,55,0.9);
|
||||||
|
}
|
||||||
|
#noVNC_status.noVNC_status_error::before {
|
||||||
|
content: url("../images/error.svg") " ";
|
||||||
|
}
|
||||||
|
#noVNC_status.noVNC_status_warn {
|
||||||
|
background: rgba(180,180,30,0.9);
|
||||||
|
}
|
||||||
|
#noVNC_status.noVNC_status_warn::before {
|
||||||
|
content: url("../images/warning.svg") " ";
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ----------------------------------------
|
/* ----------------------------------------
|
||||||
|
|
@ -398,17 +397,6 @@ html {
|
||||||
* ----------------------------------------
|
* ----------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/* left-align the status text on lower resolutions */
|
|
||||||
@media screen and (max-width: 800px){
|
|
||||||
#noVNC_status {
|
|
||||||
z-index: 1;
|
|
||||||
position: relative;
|
|
||||||
width: auto;
|
|
||||||
float: left;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 640px){
|
@media screen and (max-width: 640px){
|
||||||
#noVNC_clipboard_text {
|
#noVNC_clipboard_text {
|
||||||
width: 410px;
|
width: 410px;
|
||||||
|
|
|
||||||
|
|
@ -6,38 +6,6 @@
|
||||||
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
||||||
*/
|
*/
|
||||||
|
|
||||||
#noVNC_keyboardinput {
|
|
||||||
background-color:#000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noVNC_status_normal {
|
|
||||||
background: #4c4c4c; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #4c4c4c 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #4c4c4c 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
|
|
||||||
}
|
|
||||||
.noVNC_status_error {
|
|
||||||
background: #f04040; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #f04040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f04040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #f04040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
|
|
||||||
}
|
|
||||||
.noVNC_status_warn {
|
|
||||||
background: #f0f040; /* Old browsers */
|
|
||||||
background: -moz-linear-gradient(top, #f0f040 0%, #2c2c2c 50%, #000000 51%, #131313 100%); /* FF3.6+ */
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f040), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(100%,#131313)); /* Chrome,Safari4+ */
|
|
||||||
background: -webkit-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Chrome10+,Safari5.1+ */
|
|
||||||
background: -o-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* Opera11.10+ */
|
|
||||||
background: -ms-linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* IE10+ */
|
|
||||||
background: linear-gradient(top, #f0f040 0%,#2c2c2c 50%,#000000 51%,#131313 100%); /* W3C */
|
|
||||||
}
|
|
||||||
|
|
||||||
.noVNC_panel {
|
.noVNC_panel {
|
||||||
border:2px solid #fff;
|
border:2px solid #fff;
|
||||||
background:#000;
|
background:#000;
|
||||||
|
|
|
||||||
|
|
@ -6,59 +6,8 @@
|
||||||
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
* This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
|
||||||
*/
|
*/
|
||||||
|
|
||||||
.noVNC_status_normal {
|
|
||||||
background-color:#04073d;
|
|
||||||
background-image: -webkit-gradient(
|
|
||||||
linear,
|
|
||||||
left bottom,
|
|
||||||
left top,
|
|
||||||
color-stop(0.54, rgb(10,15,79)),
|
|
||||||
color-stop(0.5, rgb(4,7,61))
|
|
||||||
);
|
|
||||||
background-image: -moz-linear-gradient(
|
|
||||||
center bottom,
|
|
||||||
rgb(10,15,79) 54%,
|
|
||||||
rgb(4,7,61) 50%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.noVNC_status_error {
|
|
||||||
background-color:#f04040;
|
|
||||||
background-image: -webkit-gradient(
|
|
||||||
linear,
|
|
||||||
left bottom,
|
|
||||||
left top,
|
|
||||||
color-stop(0.54, rgb(240,64,64)),
|
|
||||||
color-stop(0.5, rgb(4,7,61))
|
|
||||||
);
|
|
||||||
background-image: -moz-linear-gradient(
|
|
||||||
center bottom,
|
|
||||||
rgb(4,7,61) 54%,
|
|
||||||
rgb(249,64,64) 50%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
.noVNC_status_warn {
|
|
||||||
background-color:#f0f040;
|
|
||||||
background-image: -webkit-gradient(
|
|
||||||
linear,
|
|
||||||
left bottom,
|
|
||||||
left top,
|
|
||||||
color-stop(0.54, rgb(240,240,64)),
|
|
||||||
color-stop(0.5, rgb(4,7,61))
|
|
||||||
);
|
|
||||||
background-image: -moz-linear-gradient(
|
|
||||||
center bottom,
|
|
||||||
rgb(4,7,61) 54%,
|
|
||||||
rgb(240,240,64) 50%
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
.noVNC_panel {
|
.noVNC_panel {
|
||||||
border:2px solid #fff;
|
border:2px solid #fff;
|
||||||
background:#04073d;
|
background:#04073d;
|
||||||
color:#fff;
|
color:#fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#noVNC_keyboardinput {
|
|
||||||
background-color:#04073d;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
|
||||||
52
app/ui.js
52
app/ui.js
|
|
@ -39,7 +39,7 @@ var UI;
|
||||||
rfb_state: 'loaded',
|
rfb_state: 'loaded',
|
||||||
|
|
||||||
resizeTimeout: null,
|
resizeTimeout: null,
|
||||||
popupStatusTimeout: null,
|
statusTimeout: null,
|
||||||
hideKeyboardTimeout: null,
|
hideKeyboardTimeout: null,
|
||||||
|
|
||||||
keyboardVisible: false,
|
keyboardVisible: false,
|
||||||
|
|
@ -175,6 +175,9 @@ var UI;
|
||||||
UI.updateViewDrag();
|
UI.updateViewDrag();
|
||||||
UI.setBarPosition();
|
UI.setBarPosition();
|
||||||
} );
|
} );
|
||||||
|
|
||||||
|
document.getElementById("noVNC_status")
|
||||||
|
.addEventListener('click', UI.hideStatus);
|
||||||
},
|
},
|
||||||
|
|
||||||
setupFullscreen: function() {
|
setupFullscreen: function() {
|
||||||
|
|
@ -196,10 +199,6 @@ var UI;
|
||||||
.addEventListener('click', UI.toggleViewDrag);
|
.addEventListener('click', UI.toggleViewDrag);
|
||||||
document.getElementById("noVNC_send_ctrl_alt_del_button")
|
document.getElementById("noVNC_send_ctrl_alt_del_button")
|
||||||
.addEventListener('click', UI.sendCtrlAltDel);
|
.addEventListener('click', UI.sendCtrlAltDel);
|
||||||
document.getElementById("noVNC_status")
|
|
||||||
.addEventListener('click', UI.popupStatus);
|
|
||||||
document.getElementById("noVNC_popup_status")
|
|
||||||
.addEventListener('click', UI.closePopup);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
addTouchSpecificHandlers: function() {
|
addTouchSpecificHandlers: function() {
|
||||||
|
|
@ -313,10 +312,12 @@ var UI;
|
||||||
updateState: function(rfb, state, oldstate, msg) {
|
updateState: function(rfb, state, oldstate, msg) {
|
||||||
UI.rfb_state = state;
|
UI.rfb_state = state;
|
||||||
var klass;
|
var klass;
|
||||||
|
var timeout;
|
||||||
switch (state) {
|
switch (state) {
|
||||||
case 'failed':
|
case 'failed':
|
||||||
case 'fatal':
|
case 'fatal':
|
||||||
klass = "noVNC_status_error";
|
klass = "noVNC_status_error";
|
||||||
|
timeout = 0; // zero means no timeout
|
||||||
break;
|
break;
|
||||||
case 'normal':
|
case 'normal':
|
||||||
klass = "noVNC_status_normal";
|
klass = "noVNC_status_normal";
|
||||||
|
|
@ -341,8 +342,12 @@ var UI;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof(msg) !== 'undefined') {
|
if (typeof(msg) !== 'undefined') {
|
||||||
document.getElementById('noVNC_control_bar').setAttribute("class", klass);
|
document.getElementById('noVNC_status')
|
||||||
document.getElementById('noVNC_status').innerHTML = msg;
|
.classList.remove("noVNC_status_normal",
|
||||||
|
"noVNC_status_warn",
|
||||||
|
"noVNC_status_error");
|
||||||
|
document.getElementById('noVNC_status').classList.add(klass);
|
||||||
|
UI.showStatus(msg, timeout);
|
||||||
}
|
}
|
||||||
|
|
||||||
UI.updateVisualState();
|
UI.updateVisualState();
|
||||||
|
|
@ -432,27 +437,28 @@ var UI;
|
||||||
//Util.Debug("<< updateVisualState");
|
//Util.Debug("<< updateVisualState");
|
||||||
},
|
},
|
||||||
|
|
||||||
popupStatus: function(text) {
|
showStatus: function(text, time) {
|
||||||
var psp = document.getElementById('noVNC_popup_status');
|
var statusElem = document.getElementById('noVNC_status');
|
||||||
|
|
||||||
clearTimeout(UI.popupStatusTimeout);
|
clearTimeout(UI.statusTimeout);
|
||||||
|
|
||||||
if (typeof text === 'string') {
|
statusElem.innerHTML = text;
|
||||||
psp.innerHTML = text;
|
statusElem.classList.add("noVNC_open");
|
||||||
} else {
|
|
||||||
psp.innerHTML = document.getElementById('noVNC_status').innerHTML;
|
// If no time was specified, show the status for 1.5 seconds
|
||||||
|
if (typeof time === 'undefined') {
|
||||||
|
time = 1500;
|
||||||
}
|
}
|
||||||
psp.classList.remove("noVNC_hidden");
|
|
||||||
psp.style.left = window.innerWidth/2 -
|
|
||||||
parseInt(window.getComputedStyle(psp).width)/2 -30 + "px";
|
|
||||||
|
|
||||||
// Show the popup for a maximum of 1.5 seconds
|
// A specified time of zero means no timeout
|
||||||
UI.popupStatusTimeout = setTimeout(UI.closePopup, 1500);
|
if (time != 0) {
|
||||||
|
UI.statusTimeout = window.setTimeout(UI.hideStatus, time);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
closePopup: function() {
|
hideStatus: function() {
|
||||||
clearTimeout(UI.popupStatusTimeout);
|
clearTimeout(UI.statusTimeout);
|
||||||
document.getElementById('noVNC_popup_status').classList.add("noVNC_hidden");
|
document.getElementById('noVNC_status').classList.remove("noVNC_open");
|
||||||
},
|
},
|
||||||
|
|
||||||
/* ------^-------
|
/* ------^-------
|
||||||
|
|
@ -1022,7 +1028,7 @@ var UI;
|
||||||
// The browser is IE and we are in fullscreen mode.
|
// The browser is IE and we are in fullscreen mode.
|
||||||
// - We need to force clipping while in fullscreen since
|
// - We need to force clipping while in fullscreen since
|
||||||
// scrollbars doesn't work.
|
// scrollbars doesn't work.
|
||||||
UI.popupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
|
UI.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
|
||||||
UI.rememberedClipSetting = UI.getSetting('clip');
|
UI.rememberedClipSetting = UI.getSetting('clip');
|
||||||
UI.setViewClip(true);
|
UI.setViewClip(true);
|
||||||
document.getElementById('noVNC_setting_clip').disabled = true;
|
document.getElementById('noVNC_setting_clip').disabled = true;
|
||||||
|
|
|
||||||
7
vnc.html
7
vnc.html
|
|
@ -96,8 +96,6 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="noVNC_status"></div>
|
|
||||||
|
|
||||||
<div class="noVNC_buttons_right">
|
<div class="noVNC_buttons_right">
|
||||||
<!-- Send Ctrl+Alt+Delete -->
|
<!-- Send Ctrl+Alt+Delete -->
|
||||||
<input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
|
<input type="image" alt="Ctrl+Alt+Del" src="app/images/ctrlaltdel.png"
|
||||||
|
|
@ -189,9 +187,8 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Popup Status -->
|
<!-- Status Dialog -->
|
||||||
<div id="noVNC_popup_status" class="noVNC_hidden">
|
<div id="noVNC_status"></div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div> <!-- End of noVNC_control_bar -->
|
</div> <!-- End of noVNC_control_bar -->
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue