From 5454c3451124741a0244eed66c5fc8afb6306a53 Mon Sep 17 00:00:00 2001
From: Pierre Ossman <ossman@cendio.se>
Date: Tue, 30 Aug 2016 16:38:45 +0200
Subject: [PATCH] Add headings to panels

---
 app/styles/base.css  | 15 +++++++++++++++
 app/styles/black.css |  2 +-
 app/styles/blue.css  |  2 +-
 vnc.html             | 12 ++++++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/styles/base.css b/app/styles/base.css
index bc5fc280..89b8eeaf 100644
--- 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 d982a813..178fa100 100644
--- 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 e36e6d1d..a38ede15 100644
--- 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 0d97734b..50cd7795 100644
--- 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" />