added controls box

ondrajz · Aug 26, 2013 · 8e5d112 · 8e5d112
1 parent 30982bd
commit 8e5d112
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 25 deletions.
diff --git a/plug_essential.css b/plug_essential.css
@@ -10,6 +10,7 @@
 
 .pe_control-panel-btn-close {
     background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAPCAAAAADIGBDzAAAACXBIWXMAAAsTAAALEwEAmpwYAAADGGlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjaY2BgnuDo4uTKJMDAUFBUUuQe5BgZERmlwH6egY2BmYGBgYGBITG5uMAxIMCHgYGBIS8/L5UBFTAyMHy7xsDIwMDAcFnX0cXJlYE0wJpcUFTCwMBwgIGBwSgltTiZgYHhCwMDQ3p5SUEJAwNjDAMDg0hSdkEJAwNjAQMDg0h2SJAzAwNjCwMDE09JakUJAwMDg3N+QWVRZnpGiYKhpaWlgmNKflKqQnBlcUlqbrGCZ15yflFBflFiSWoKAwMD1A4GBgYGXpf8EgX3xMw8BSMDVQYqg4jIKAUICxE+CDEESC4tKoMHJQODAIMCgwGDA0MAQyJDPcMChqMMbxjFGV0YSxlXMN5jEmMKYprAdIFZmDmSeSHzGxZLlg6WW6x6rK2s99gs2aaxfWMPZ9/NocTRxfGFM5HzApcj1xZuTe4FPFI8U3mFeCfxCfNN45fhXyygI7BD0FXwilCq0A/hXhEVkb2i4aJfxCaJG4lfkaiQlJM8JpUvLS19QqZMVl32llyfvIv8H4WtioVKekpvldeqFKiaqP5UO6jepRGqqaT5QeuA9iSdVF0rPUG9V/pHDBYY1hrFGNuayJsym740u2C+02KJ5QSrOutcmzjbQDtXe2sHY0cdJzVnJRcFV3k3BXdlD3VPXS8Tbxsfd99gvwT//ID6wIlBS4N3hVwMfRnOFCEXaRUVEV0RMzN2T9yDBLZE3aSw5IaUNak30zkyLDIzs+ZmX8xlz7PPryjYVPiuWLskq3RV2ZsK/cqSql01jLVedVPrHzbqNdU0n22VaytsP9op3VXUfbpXta+x/+5Em0mzJ/+dGj/t8AyNmf2zvs9JmHt6vvmCpYtEFrcu+bYsc/m9lSGrTq9xWbtvveWGbZtMNm/ZarJt+w6rnft3u+45uy9s/4ODOYd+Hmk/Jn58xUnrU+fOJJ/9dX7SRe1LR68kXv13fc5Nm1t379TfU75/4mHeY7En+59lvhB5efB1/lv5dxc+NH0y/fzq64Lv4T8Ffp360/rP8f9/AA0ADzT6lvFdAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAACtSURBVHjaVM8/C0FhGIbx63mfl6NzTopCx6CMNiWbUr6LxWeTsDAZjEYr8i+TSIoBp2NwFPf4m+5LKu6Dn3mSzf8BxgdAT0cVAM98eFdrrkUADIBZlbv9+lIkBnOoTjI6bm2/cK6MAkgPG8cYHKczg0375cbgL3oXuA/mfgxhMhNAMZcKAQugzvQa7VUBpOQ+QG4hxo8AzwIQJRSJPp/VCwG1VgF42oKb+Kt9DwD3zCjDkCsleQAAAABJRU5ErkJggg==);
+    opacity: .3;
 }
 
 .pe_control-panel-btn-open {
@@ -26,15 +27,6 @@
     height: 292px;
 }
 
-#pe_version-box {
-    position: absolute; 
-    padding: 0;
-    display: block;
-    left: 40px;
-    top: 8px;
-    vertical-align: middle;
-}
-
 #pe_userlist-box {
     position: absolute; 
     width: 230px; 
@@ -75,22 +67,22 @@
 
 .pe_control-btn {
     position: absolute; 
-    width: 90px; 
+    width: 75px;
     height: 25px; 
     padding: 0;
     display: block;
-    left: 20px;
+    left: 15px;
     text-align: center;
     border: 1px solid #AAA;
     cursor: pointer;
 }
 
 #pe_autowoot-btn {
-    top: 65px;
+    top: 15px;
 }
 
 #pe_autojoin-btn {
-    top: 100px;
+    top: 50px;
 }
 
 .pe_user-row {
@@ -198,4 +190,28 @@
     left: 10px;
     top: 10px;
     border: 1px solid #333;
-}
+}
+
+#pe_controls-box {
+    left: 20px;
+    top: 10px;
+    height: 80px;
+    width: 280px;
+    padding: 0;
+    position: absolute;
+}
+
+#pe_controls-header {
+    top: 0;
+    left: 0;
+    width: 216px;
+}
+
+#pe_controls-body {
+    width: 100%;
+    border: 1px solid #333;
+    top: 25px;
+    height: 125px;
+    position: absolute;
+    background-color: rgba(30, 30, 30, .3);
+}
diff --git a/plug_essential.js b/plug_essential.js
@@ -186,21 +186,10 @@ define('plugEssential/Model', ['app/base/Class', 'plugEssential/Config'], functi
             this.controlPanelBtn.addClass("pe_control-panel-btn-close");
             this.controlPanel = $("<div id=\"pe_control-panel\"><div class=\"frame-background\"></div></div>").appendTo(Config.plug.roomView);
             this.controlPanelBtn.click(this.proxy.togglePanel);
-            this.versionBox = $("<div id=\"pe_version-box\"><span style=\"font-size: 10px;color: #858585;\">Plug Essential v"+this.version.getString()+"</span></div>").appendTo(this.controlPanel);
             this.userlistBox = $("<div id=\"pe_userlist-box\"></div>").appendTo(this.controlPanel);
             this.userlistHeader = $("<div id=\"pe_userlist-header\" class=\"meta-header\"><span id=\"room-score-perc\" class=\"hnb\" style=\"left:0;\">USERLIST</span><span id=\"pe_userlist-count\">? users</span></div>").appendTo(this.userlistBox);
             this.userlistBody = $("<div id=\"pe_userlist-body\"></div>").appendTo(this.userlistBox);
             this.userlistTable = $("<table id=\"pe_userlist-table\"><tbody></tbody></table>").appendTo(this.userlistBody);
-            this.autowootBtn = $("<div id=\"pe_autowoot-btn\" class=\"pe_control-btn\">\
-                <div class=\"frame-background\" style=\"background-color: #73A024;\"></div>\
-                <div style=\"top: 4px;display: block;height: 100%;position: absolute;text-align: center;width: 100%;\">\
-                <span style=\"color: #FFF;text-shadow: 1px 1px #303030;\">Autowoot</span></div></div>").appendTo(this.controlPanel);
-            this.autowootBtn.click(this.proxy.ctrlAutowoot);
-            this.autojoinBtn = $("<div id=\"pe_autojoin-btn\" class=\"pe_control-btn\">\
-                <div class=\"frame-background\" style=\"background-color: #73A024;\"></div>\
-                <div style=\"top: 4px;display: block;height: 100%;position: absolute;text-align: center;width: 100%;\">\
-                <span style=\"color: #FFF;text-shadow: 1px 1px #303030;\">Autojoin</span></div></div>").appendTo(this.controlPanel);
-            this.autojoinBtn.click(this.proxy.ctrlAutojoin);
             this.userdetailBox = $("<div id=\"pe_user-detail-box\"></div>").appendTo(this.controlPanel);
             this.userdetailHeader = $("<div class=\"meta-header\" id=\"pe_user-detail-header\"><span id=\"room-score-perc\" class=\"hnb\" style=\"left:0;\">USER DETAIL</span></div>").appendTo(this.userdetailBox);
             this.userdetailBody = $("<div id=\"pe_user-detail-body\"></div>").appendTo(this.userdetailBox);
@@ -229,6 +218,19 @@ define('plugEssential/Model', ['app/base/Class', 'plugEssential/Config'], functi
             this.topAuthor = $("<div class=\"meta-value hnb\" style=\"width: 180px;top: 10px; left: 100px;\"><span style=\"font-size: 15px;\"></span></div>").appendTo(this.topHistoryBody);
             this.topTitle = $("<div class=\"meta-value hnb\" style=\"width: 180px;top: 33px; left: 100px;color: #CCC;\"><span style=\"font-size: 12px;\"></span></div>").appendTo(this.topHistoryBody);
             this.topPlayedBy = $("<div class=\"meta-value hnb\" style=\"width: 180px;top: 55px; left: 100px;color: #CCC;\"><span style=\"font-size: 9px;\"></span></div>").appendTo(this.topHistoryBody);
+            this.controlsBox = $("<div id=\"pe_controls-box\"></div>").appendTo(this.controlPanel);
+            this.controlsHeader = $("<div class=\"meta-header\" id=\"pe_controls-header\"><span id=\"room-score-perc\" class=\"hnb\" style=\"left:0;\">PLUG ESSENTIAL v"+this.version.getString()+"</span></div>").appendTo(this.controlsBox);
+            this.controlsBody = $("<div id=\"pe_controls-body\"></div>").appendTo(this.controlsBox);
+            this.autowootBtn = $("<div id=\"pe_autowoot-btn\" class=\"pe_control-btn\">\
+                <div class=\"frame-background\" style=\"background-color: #73A024;\"></div>\
+                <div style=\"top: 4px;display: block;height: 100%;position: absolute;text-align: center;width: 100%;\">\
+                <span style=\"color: #FFF;text-shadow: 1px 1px #303030;\">Autowoot</span></div></div>").appendTo(this.controlsBody);
+            this.autowootBtn.click(this.proxy.ctrlAutowoot);
+            this.autojoinBtn = $("<div id=\"pe_autojoin-btn\" class=\"pe_control-btn\">\
+                <div class=\"frame-background\" style=\"background-color: #73A024;\"></div>\
+                <div style=\"top: 4px;display: block;height: 100%;position: absolute;text-align: center;width: 100%;\">\
+                <span style=\"color: #FFF;text-shadow: 1px 1px #303030;\">Autojoin</span></div></div>").appendTo(this.controlsBody);
+            this.autojoinBtn.click(this.proxy.ctrlAutojoin);
         },
         togglePanel: function () {
             if (this.controlPanel.is(":visible")) {