CC-2411 : Interface for Music Folders Preferences

applying html/css changes to music folder preference page.

airtime_mvc/application/controllers/PreferenceController.php

@@ -123,7 +123,6 @@ class PreferenceController extends Zend_Controller_Action
         $this->view->headScript()->appendFile($baseUrl.'/js/airtime/preferences/musicdirs.js','text/javascript');
 
         $watched_dirs_pref = new Application_Form_WatchedDirPreferences();
-        $watched_dirs_pref->setWatchedDirs();
 
         $this->view->form = $watched_dirs_pref;
     }
@@ -180,8 +179,6 @@ class PreferenceController extends Zend_Controller_Action
             RabbitMq::SendMessageToMediaMonitor("change_stor", $data);
         }
 
-        $watched_dirs_form->setWatchedDirs();
-
         $this->view->subform = $watched_dirs_form->render();
     }
 
@@ -200,8 +197,6 @@ class PreferenceController extends Zend_Controller_Action
             RabbitMq::SendMessageToMediaMonitor("new_watch", $data);
         }
 
-        $watched_dirs_form->setWatchedDirs();
-
         $this->view->subform = $watched_dirs_form->render();
     }
 
@@ -215,6 +210,9 @@ class PreferenceController extends Zend_Controller_Action
         $data = array();
         $data["directory"] = $chosen;
         RabbitMq::SendMessageToMediaMonitor("remove_watch", $data);
+
+        $watched_dirs_form = new Application_Form_WatchedDirPreferences();
+        $this->view->subform = $watched_dirs_form->render();
     }
 }
 

airtime_mvc/application/forms/WatchedDirPreferences.php

@@ -47,23 +47,5 @@ class Application_Form_WatchedDirPreferences extends Zend_Form_SubForm
 
     }
 
-    public function setWatchedDirs() {
-
-        $watched_dirs = MusicDir::getWatchedDirs();
-        $i = 1;
-        foreach($watched_dirs as $dir) {
-
-            $text = new Zend_Form_Element_Text("watched_dir_$i");
-            $text->setAttrib('class', 'input_text');
-            $text->addFilter('StringTrim');
-            $text->setValue($dir->getDirectory());
-            $text->setDecorators(array('ViewHelper'));
-            $this->addElement($text);
-
-            $i = $i + 1;
-        }
-    }
-
-
 }
 

airtime_mvc/application/views/scripts/form/preferences_watched_dirs.phtml

@@ -1,9 +1,10 @@
+<fieldset class="padded" id="watched-folder-section">
     <dl class="zend_form">
 
         <dt id="storageFolder-label" class="block-display">
             <label class="required" for="storageFolder"><?php echo $this->element->getElement('storageFolder')->getLabel() ?></label>
         </dt>
-    <dd id="storageFolder-element">
+        <dd id="storageFolder-element" class="block-display">
             <?php echo $this->element->getElement('storageFolder') ?>
             <input id="storageFolder-selection" type="button" value="choose folder"></input>
             <input id="storageFolder-ok" type="button" value="OK"></input>
@@ -15,12 +16,12 @@
                 </ul>
             <?php endif; ?>
         </dd>
-    <div>Current Storage Folder: <?php $stor = MusicDir::getStorDir(); echo $stor->getDirectory(); ?></div>
+        <dd class="block-display selected-item"><strong>Current Storage Folder:</strong><?php $stor = MusicDir::getStorDir(); echo $stor->getDirectory(); ?></dd>
 
         <dt id="watchedFolder-label" class="block-display">
             <label class="required" for="watchedFolder"><?php echo $this->element->getElement('watchedFolder')->getLabel() ?></label>
         </dt>
-    <dd id="watchedFolder-element">
+        <dd id="watchedFolder-element" class="block-display">
             <?php echo $this->element->getElement('watchedFolder') ?>
             <input id="watchedFolder-selection" type="button" value="choose folder"></input>
             <input id="watchedFolder-ok" type="button" value="OK"></input>
@@ -32,16 +33,17 @@
                 </ul>
             <?php endif; ?>
         </dd>
-
+        <?php $watched_dirs = MusicDir::getWatchedDirs(); ?>
-    <div id="watchedFolder-table">
+        <dd id="watchedFolder-table" class="block-display selected-item">
-        <?php $i = 1; ?>
+        <?php if (count($watched_dirs) > 0): ?>
-        <?php $element = $this->element->getElement("watched_dir_$i"); ?>
+            <?php foreach($watched_dirs as $watched_dir): ?>
-        <?php while(isset($element)): ?>
+                 <span><?php echo $watched_dir->getDirectory(); ?></span><span class="ui-icon ui-icon-close"></span>
-             <div><span><?php echo $element->getValue(); ?></span><span class="ui-icon ui-icon-close"></span></div>
+            <?php endforeach; ?>
-             <?php $i = $i + 1; ?>
+        <?php else: ?>
-             <?php $element = $this->element->getElement("watched_dir_$i"); ?>
+            <span>You are not watching any music folders.</span>
-        <?php endwhile; ?>
+        <?php endif; ?>
-    </div>
+        </dd>
 
     </dl>
+</fieldset>
 

airtime_mvc/application/views/scripts/preference/directory-config.phtml

@@ -1,3 +1,4 @@
-<div id="watched-folder-section">
+<div id="watched-folder-section" class="ui-widget ui-widget-content block-shadow simple-formblock clearfix padded-strong manage-folders">
+<h2>Manage Music Folders</h2>
 <?php echo $this->form; ?>
 </div>

airtime_mvc/public/css/styles.css

@@ -357,6 +357,7 @@ input[type="text"]:focus, input[type="password"]:focus, textarea:focus, .input_t
 	border: 1px solid #5b5b5b;
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2) inset;
     font-size: 13px;
+    text-indent: 3px;
 	margin:0;
 }
 .input_select, select {
@@ -1386,14 +1387,12 @@ div.success{
 #show_content_dialog .datatable {
 	margin-top:8px;
 }
-
 .simple-formblock.metadata, #side_playlist .simple-formblock.metadata {
 	border:none;
 	width:auto;
 	display:block;
 	padding: 2px;
 }
-
 #side_playlist .simple-formblock.metadata .input_text, #side_playlist .simple-formblock.metadata .input_text_area {
 	width:95%;
 }
@@ -1594,7 +1593,7 @@ div.success{
 .medium-icon.finishedplaying {
 	background:url(images/icon_finishedplaying_m.png) no-repeat 0 0;
 }
-.preferences {
+.preferences, .manage-folders {
     width: 500px;
 }
 
@@ -1634,6 +1633,10 @@ dd.radio-inline-list, .preferences dd.radio-inline-list {
 .preferences.simple-formblock dd.block-display {
     width: 100%;
 }
+
+.preferences.simple-formblock dd.block-display select {
+    width: 100%;
+}
 .preferences dd.block-display .input_select {
     width: 100%;
 }
@@ -1745,16 +1748,93 @@ label span {
 .dialogPopup .display_field dt, .dialogPopup .display_field dd {
     color: #353535;
     float: left;
-    font-size: 13px;
+    font-size: 12px;
     margin: 0;
-    min-width: 90px;
+    padding: 4px 0;
-    padding: 6px 0;
     text-align: left;
-	width:60%;
+	width:auto;
 }
 
 .dialogPopup .display_field dt {
     clear: left;
 	font-weight:bold;
-	width:40%;
+	width:auto;
+	min-width:auto;
+	padding-right:8px;
+}
+#show_what_sending textarea {
+    background-color:transparent;
+	border:none;
+    box-shadow: none;
+    font-size: 12px;
+    text-indent: 0;
+	margin:0;
+	width:100%;
+	line-height:180%;
+}
+#show_what_sending textarea:focus {
+	border:none;
+}
+#show_what_sending dl {
+	height:180px;
+	overflow:scroll;
+	overflow-x: hidden;
+}
+
+#watched-folder-section dd.block-display input[type="text"] {
+    width: 65%;
+}
+
+#watched-folder-section dd.block-display input[type="button"] {
+	border: 1px solid #5b5b5b;
+	background-color: #6e6e6e;
+    background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
+	color: #ffffff;
+	font-family:Arial, Helvetica, sans-serif;
+	font-size:12px;
+	height:25px;
+	margin:0;
+	display:block;
+	margin-left:5px;
+	line-height:12px;
+	padding:0 10px 1px 10px;
+}
+#watched-folder-section dd.block-display input[type="button"]:hover {
+	border: 1px solid #242424;
+	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));
+	color: #ffffff;
+}
+
+#watched-folder-section dd.block-display {
+	clear:both;
+	min-height:25px;
+	
+}
+#watched-folder-section dd.block-display.selected-item {
+	clear:both;
+	background:#9a9a9a;
+	margin:2px 0 5px 0;
+	width:84%;
+	padding:4px 8px 0;
+	position:relative;
+	min-height:22px;
+	border-radius: 4px;
+	-webkit-border-radius: 4px;
+	-moz-border-radius: 4px;
+	font-size:13px;
+}
+#watched-folder-section dd.block-display.selected-item .ui-icon {
+	position:absolute;
+	top:4px;
+	right:5px;
+	cursor:pointer;
+}
+#watched-folder-section dd.block-display.selected-item .ui-icon:hover {
+	background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png)
+}
+#watched-folder-section dd.block-display input {
+	float:left;
 }

airtime_mvc/public/js/airtime/preferences/musicdirs.js

@@ -82,7 +82,9 @@ function setWatchedDirEvents() {
             {format: "json", dir: folder},
 
             function(json) {
-	           row.remove();
+	            $("#watched-folder-section").empty();
+                $("#watched-folder-section").append(json.subform);
+                setWatchedDirEvents();
             });
     });
 }