From 22156e90ac1d6247878b17e402d7c08ce956bd08 Mon Sep 17 00:00:00 2001
From: Andy Janata <ajanata@gmail.com>
Date: Mon, 15 Oct 2012 20:23:37 -0700
Subject: [PATCH] add tabs, move user preferences to a tab, and fix the chat ui
 to fit the tab. it gets very bad at small window sizes though

---
 WebContent/cah.css       | 49 ++++++++++++++++++----------------------
 WebContent/game.jsp      | 36 ++++++++++++++++-------------
 WebContent/js/cah.app.js | 18 +++++++++------
 3 files changed, 53 insertions(+), 50 deletions(-)

diff --git a/WebContent/cah.css b/WebContent/cah.css
index 2cb1904..ff91a9d 100644
--- a/WebContent/cah.css
+++ b/WebContent/cah.css
@@ -77,10 +77,6 @@ body {
   border: 1px solid black;
   display: inline;
   padding: 5px;
-  /*
-	text-align: center;
-	vertical-align: middle;
-	*/
 }
 
 #canvas {
@@ -88,9 +84,6 @@ body {
   overflow: none;
   position: relative;
   width: 100%;
-  /* * /
-  border: 1px solid red;
-  / * */
 }
 
 #main {
@@ -98,13 +91,11 @@ body {
   width: 100%;
   height: 506px;
   top: 26px;
-  /*bottom: 216px;*/
   border: 1px solid black;
 }
 
 #main_holder {
   width: 100%;
-  height: 100%;
 }
 
 #game_list {
@@ -169,7 +160,7 @@ body {
   border: 1px solid black;
 }
 
-#chat_area {
+#tabs {
   min-height: 100px;
   width: 50%;
   height: 100%;
@@ -179,21 +170,36 @@ body {
   right: 14px;
 }
 
+#tabs .ui-widget {
+  font-height: 16px !important;
+}
+
+.tab-button {
+  font-size: 14px !important;
+}
+
 #log {
   width: 100%;
   height: 198px;
-  border: 1px solid black;
+  border-style: none solid solid none;
+  border-color: black;
+  border-width: 1px;
   position: absolute;
   bottom: 18px;
   right: 0px;
   overflow-y: scroll;
-  min-height: 82px;
+  min-height: 43px;
+  font-size: 16px;
+  font-family: serif;
+}
+
+#tab-preferences input[type='button'] {
+  float: right;
 }
 
 #chat {
   border: 1px solid black;
-  left: -2px;
-  /*right: 46px;*/
+  left: -1px;
   bottom: 0px;
   height: 17px;
   position: absolute;
@@ -209,6 +215,7 @@ body {
   bottom: -1px;
   margin: 0px;
   padding: 0px;
+  font-size: 14px;
 }
 
 span.error {
@@ -277,10 +284,6 @@ span.debug, span.admin {
   right: 0px;
   height: 30%;
   border-top: 1px solid black;
-  /*
-  overflow-x: auto;
-  overflow-y: visible;
-  */
 }
 
 .game_hand_filter {
@@ -351,9 +354,6 @@ span.debug, span.admin {
   position: absolute;
   left: 246px;
   width: 700px;
-  /*
-  overflow-x: auto;
-  */
 }
 
 .game_right_side_box {
@@ -439,12 +439,6 @@ span.debug, span.admin {
   border: 1px solid #231f20;
 }
 
-/*
-.whitecard .logo_element {
-  border: 1px solid white;
-}
-*/
-
 .logo_1 {
   left: 2px;
 }
@@ -519,6 +513,7 @@ span.debug, span.admin {
   -o-border-radius: 10px;
   border-radius: 10px;
 }
+
 .blackcard .card_number {
   background: white;
   display: inline-block;
diff --git a/WebContent/game.jsp b/WebContent/game.jsp
index 37f356b..bf57813 100644
--- a/WebContent/game.jsp
+++ b/WebContent/game.jsp
@@ -132,7 +132,6 @@ HttpSession hSession = request.getSession(true);
     </div>
     <div id="menubar_right">
       Current timer duration: <span id="current_timer">0</span> seconds
-      <input type="button" id="preferences" value="User Preferences" />
       <input type="button" id="logout" value="Log out" />
     </div>
   </div>
@@ -146,10 +145,26 @@ HttpSession hSession = request.getSession(true);
 <div id="bottom" class="hide">
   <div id="info_area">
   </div>
-  <div id="chat_area">
-    <div id="log"></div>
-    <input type="text" id="chat" maxlength="200" />
-    <input type="button" id="chat_submit" value="Chat" />
+  <div id="tabs">
+    <ul>
+      <li><a href="#tab-preferences" class="tab-button">User Preferences</a></li>
+      <li><a href="#tab-global" class="tab-button" id="button-global">Global Chat</a></li>
+    </ul>
+    <div id="tab-preferences">
+      <input type="button" value="Save" onclick="save_preferences();" />
+      <input type="button" value="Revert" onclick="load_preferences();" />
+      <label for="hide_connect_quit">Hide connect/quit events: </label>
+      <input type="checkbox" id="hide_connect_quit" />
+      <br />
+      <label for="ignore_list">Ignore list, one name per line:</label>
+      <br/>
+      <textarea id="ignore_list" style="width: 200px; height: 150px"></textarea>
+    </div>
+    <div id="tab-global">
+      <div id="log"></div>
+      <input type="text" id="chat" maxlength="200" />
+      <input type="button" id="chat_submit" value="Chat" />
+    </div>
   </div>
 </div>
 
@@ -343,16 +358,5 @@ HttpSession hSession = request.getSession(true);
   </div>
 </div>
 
-<!-- Wrapper for user preferences dialog content. -->
-<div class="hide">
-  <div id="preferences_dialog" title="User Preferences">
-    <label for="hide_connect_quit">Hide connect/quit events: </label>
-    <input type="checkbox" id="hide_connect_quit" />
-    <br />
-    <label for="ignore_list">Ignore list, one name per line:</label>
-    <textarea id="ignore_list" style="width: 95%; height: 75px"></textarea>
-  </div>
-</div>
-
 </body>
 </html>
diff --git a/WebContent/js/cah.app.js b/WebContent/js/cah.app.js
index fc32234..7c455b1 100644
--- a/WebContent/js/cah.app.js
+++ b/WebContent/js/cah.app.js
@@ -47,9 +47,12 @@ $(document).ready(function() {
   // have not expressed an interest in being cleared out yet.
   // $(window).bind("beforeunload", window_beforeunload);
   $("#logout").click(logout_click);
-  $("#preferences").click(preferences_click);
+
   load_preferences();
 
+  $("#tabs").tabs();
+  $("#button-global").click();
+
   if ($.browser.mozilla) {
     // Firefox sucks.
     $("body").css("font-size", "12px");
@@ -207,14 +210,15 @@ function apply_preferences() {
  * This was tested extensively in Chrome. It may not be pixel-perfect in other browsers.
  */
 function app_resize() {
-  var chatWidth = $("#canvas").width() - 251;
-  $("#chat_area").width(chatWidth);
-  $("#chat").width(chatWidth - 48);
-  var bottomHeight = $(window).height() - $("#main").height() - $("#menubar").height() - 27;
+  var chatWidth = $("#canvas").width() - 257;
+  $("#tabs").width(chatWidth + 'px');
+  $("#log").width((chatWidth + 2) + 'px');
+  $("#chat").width((chatWidth - 42) + 'px');
+  var bottomHeight = $(window).height() - $("#main").height() - $("#menubar").height() - 29;
   $("#bottom").height(bottomHeight);
   $("#info_area").height(bottomHeight);
-  $("#chat_area").height(bottomHeight);
-  $("#log").height(bottomHeight - $("#chat").height() - 1);
+  $("#tabs").height(bottomHeight);
+  $("#log").height(bottomHeight - $("#chat").height() - 40);
   // this is ugly and terrible.
   if ($(window).height() < 650) {
     $("body").css("overflow-y", "auto");