From c4893e9d363f0c8821bafb66dbc9200ebbea299d Mon Sep 17 00:00:00 2001
From: mkonecny <martin.konecny@sourcefabric.org>
Date: Wed, 9 Feb 2011 15:23:32 -0500
Subject: [PATCH] -updated list-view UI

---
 .gitignore                                    |  1 +
 .../views/scripts/nowplaying/day-view.phtml   |  6 ++-
 .../views/scripts/nowplaying/index.phtml      |  4 ++
 public/css/styles.css                         | 53 +++++++++++++++++--
 public/js/playlist/nowplayingdatagrid.js      | 14 +++--
 5 files changed, 69 insertions(+), 9 deletions(-)

diff --git a/.gitignore b/.gitignore
index 83a739f21..47bb04716 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 *.pyc
 files/
 pypo/liquidsoap/liquidsoap
+build/build.properties
diff --git a/application/views/scripts/nowplaying/day-view.phtml b/application/views/scripts/nowplaying/day-view.phtml
index 3f23200ab..050fe1683 100644
--- a/application/views/scripts/nowplaying/day-view.phtml
+++ b/application/views/scripts/nowplaying/day-view.phtml
@@ -1,2 +1,6 @@
-<input type="text" id="datepicker" class="input_text">
+<div class="button-bar-top">
+    Date:<input type="text" id="datepicker" class="input_text">
+    <a href="javascript:void(0)" class="toggle-button" id="now_view">Now View</a>
+    <a href="javascript:void(0)" class="toggle-button-active end-button" id="day_view">Day View</a>
+</div>
 <div id='demo'></div>
diff --git a/application/views/scripts/nowplaying/index.phtml b/application/views/scripts/nowplaying/index.phtml
index 11d775d98..627c96a86 100644
--- a/application/views/scripts/nowplaying/index.phtml
+++ b/application/views/scripts/nowplaying/index.phtml
@@ -1 +1,5 @@
+<div class="button-bar-top">
+    <a href="javascript:void(0)" class="toggle-button-active end-button" id="now_view">Now View</a>
+    <a href="javascript:void(0)" class="toggle-button" id="day_view">Day View</a>
+</div>
 <div id='demo'></div>
diff --git a/public/css/styles.css b/public/css/styles.css
index 070512a5f..90144827b 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -867,7 +867,6 @@ div.ui-datepicker {
 	margin-right:22px;
 }
 
-
 #schedule_playlist_chosen li > div > div > span {
 	float: right;
 	margin-right:46px;
@@ -932,7 +931,7 @@ h2#scheduled_playlist_name span {
 }
 
 .time {
-	width: 100px;
+	width: 80px;
 	margin: 5px;
 	text-align: left;
 }
@@ -1083,15 +1082,21 @@ button, input {
 
 .user-management {
 	width:810px;
+	width:380px;
+}
+.user-management-expanded {
+	width:810px;
 }
 .user-data {
 	float:left;
 	width:420px;
+	margin-left:10px;
+	display:none;
 }
 .user-list-wrapper {
 	float:left;
 	width:380px;
-	margin-right:10px;
+	/*margin-right:10px;*/
 }
 
 .user-management div.user-list-wrapper .ui-widget-header:first-child {
@@ -1105,10 +1110,11 @@ button, input {
 }
 .user-management h2 {
     font-size: 1.7em;
-    padding-bottom: 16px;
+    padding-bottom: 12px;
 }
 .user-management .dataTables_filter input {
     width: 378px;
+	margin-bottom:8px;
 }
 .user-data.simple-formblock dd {
     width: 73%;
@@ -1122,8 +1128,9 @@ button, input {
 }
 
 .user-list-wrapper .button-holder {
-	padding:8px 0;
+	padding:0;
 	text-align:right;
+	height:37px;
 }
 .user-list-wrapper .button-holder .ui-button {
 	margin:0;
@@ -1141,3 +1148,39 @@ button, input {
 
 #ui-datepicker-div { z-index: 10 !important }
 
+.button-bar-top {
+	text-align:right;
+	height:30px;
+}
+
+.toggle-button, .toggle-button-active {
+	border: 1px solid #505050;
+	background-color: #5e5e5e;
+    background: -moz-linear-gradient(top, #757575 0, #5e5e5e 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #757575), color-stop(100%, #5e5e5e));
+	color: #ffffff;
+	margin:0;
+	font-size:12px;
+	padding:5px 12px;
+	text-decoration:none;
+	text-shadow: #343434 0px -1px;
+	border-width:1px 0 1px 1px;
+}
+.toggle-button:hover {
+	background-color: #292929;
+    background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929));
+	text-shadow: #000000 0px -1px;
+}
+
+.toggle-button-active {
+	background-color: #c6c6c6;
+    background: -moz-linear-gradient(top, #767676 0, #c6c6c6 20%, #c6c6c6 35%, #a0a0a0 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #767676), color-stop(20%, #c6c6c6), color-stop(35%, #c6c6c6), color-stop(100%, #a0a0a0));
+	color: #2e2e2e;
+	cursor:default;
+	text-shadow: #d8d8d8 0px 1px;
+}
+.end-button {
+	border-width:1px;
+}
\ No newline at end of file
diff --git a/public/js/playlist/nowplayingdatagrid.js b/public/js/playlist/nowplayingdatagrid.js
index ec003fbfc..749738bb0 100644
--- a/public/js/playlist/nowplayingdatagrid.js
+++ b/public/js/playlist/nowplayingdatagrid.js
@@ -123,12 +123,20 @@ function init2(){
 
 }
 
+function redirect(url){
+    document.location.href = url;
+}
+
 $(document).ready(function() {
     if (viewType == "day"){
+        $('#now_view').click(function(){redirect('/Nowplaying/index')});
+        
         $("#datepicker").datepicker({
-            onSelect: function(dateText, inst) { updateData();}});
-        var date = new Date();
-        $("#datepicker").datepicker("setDate", date);
+            onSelect: function(dateText, inst) 
+                { updateData();}});
+        $("#datepicker").datepicker("setDate", new Date());
+    } else {
+        $('#day_view').click(function(){redirect('/Nowplaying/day-view')});
     }
 
     init2();