Add headings to panels

diff --git a/app/styles/base.css b/app/styles/base.css
index bc5fc280d43c8a03ebcc146509e8af93ca2d73b9..89b8eeaf7b7212644df567993cc7075d247600e2 100644 (file)
--- a/app/styles/base.css
+++ b/app/styles/base.css
@@ -292,6 +292,21 @@ input[type=button]:active, select:active {
   display: block;
 }
 
+.noVNC_panel .noVNC_heading {
+  background-color: rgb(110, 132, 163);
+  border-radius: 5px;
+  padding: 5px;
+  /* Compensate for padding in image */
+  padding-right: 8px;
+  color: white;
+  font-size: 20px;
+  margin-bottom: 10px;
+  white-space: nowrap;
+}
+.noVNC_panel .noVNC_heading img {
+  vertical-align: bottom;
+}
+
 .noVNC_submit {
   float: right;
 }

diff --git a/app/styles/black.css b/app/styles/black.css
index d982a813cbdcfa190e75f89cd314cb0bf9727713..178fa100d28c67560d281c598c277ff829e358f5 100644 (file)
--- a/app/styles/black.css
+++ b/app/styles/black.css
@@ -12,7 +12,7 @@
   color:#fff;
 }
 
-#noVNC_control_bar, #noVNC_control_bar_handle {
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
   background: #4c4c4c;
 }
 

diff --git a/app/styles/blue.css b/app/styles/blue.css
index e36e6d1d247472cf4e2e8f26c7988ceb02c4cde0..a38ede15f7ed72755e0218fe4c366338eda866ae 100644 (file)
--- a/app/styles/blue.css
+++ b/app/styles/blue.css
@@ -12,6 +12,6 @@
   color:#fff;
 }
 
-#noVNC_control_bar, #noVNC_control_bar_handle {
+#noVNC_control_bar, #noVNC_control_bar_handle, .noVNC_panel .noVNC_heading {
   background: #080F80;
 }

diff --git a/vnc.html b/vnc.html
index 0d97734b76f5dd3bb4952941d2118b4e3c831545..50cd77958a6741b7ee6ae034ead18a2b1a7f9602 100644 (file)
--- a/vnc.html
+++ b/vnc.html
@@ -115,6 +115,9 @@
                 title="Shutdown/Reboot..." />
             <div class="noVNC_vcenter">
             <div id="noVNC_xvp" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/power.svg"> Power
+                </div>
                 <input type="button" id="noVNC_xvp_shutdown_button" value="Shutdown" />
                 <input type="button" id="noVNC_xvp_reboot_button" value="Reboot" />
                 <input type="button" id="noVNC_xvp_reset_button" value="Reset" />
@@ -127,6 +130,9 @@
                 title="Clipboard" />
             <div class="noVNC_vcenter">
             <div id="noVNC_clipboard" class="noVNC_panel">
+                <div class="noVNC_heading">
+                    <img src="app/images/clipboard.svg"> Clipboard
+                </div>
                 <textarea id="noVNC_clipboard_text" rows=5>
                 </textarea>
                 <br />
@@ -147,6 +153,9 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_settings" class="noVNC_panel">
                 <ul>
+                    <li class="noVNC_heading">
+                        <img src="app/images/settings.svg"> Settings
+                    </li>
                     <li>
                         <label><input id="noVNC_setting_encrypt" type="checkbox" /> Encrypt</label>
                     </li>
@@ -217,6 +226,9 @@
             <div class="noVNC_vcenter">
             <div id="noVNC_connect_controls" class="noVNC_panel">
                 <ul>
+                    <li class="noVNC_heading">
+                        <img src="app/images/connect.svg"> Connection
+                    </li>
                     <li>
                         <label for="noVNC_setting_host">Host:</label>
                         <input id="noVNC_setting_host" />