From 13d6df24fbd4e307678edd01752e86ba775716f4 Mon Sep 17 00:00:00 2001
From: ryan <ryanrain@gmail.com>
Date: Thu, 13 Dec 2018 09:11:42 -0600
Subject: [PATCH] smartblock ui: add collapsed "advanced options" section

---
 .../scripts/form/smart-block-criteria.phtml   | 165 +++++++++---------
 .../views/scripts/playlist/smart-block.phtml  |  21 ++-
 airtime_mvc/public/css/dashboard.css          |  14 --
 airtime_mvc/public/css/playlist_builder.css   |  37 ++++
 .../js/airtime/playlist/smart_blockbuilder.js |   5 +
 5 files changed, 141 insertions(+), 101 deletions(-)

diff --git a/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml b/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
index 7dccbb7d6..2d61c7d96 100644
--- a/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
+++ b/airtime_mvc/application/views/scripts/form/smart-block-criteria.phtml
@@ -1,87 +1,8 @@
 <form class="smart-block-form" method="post" action="">
     <dl class='zend_form search-criteria'>
         <div id='sp-success' class='success' style='display:none'></div>
-        <dt>
-            <label class='sp-label'>
-                <?php echo $this->element->getElement('sp_type')->getLabel() ?>
-            </label>
-        </dt>
-        <dd id='sp_type-element'>
-            <?php $i=0;
-                  $value = $this->element->getElement('sp_type')->getValue();
-                  foreach ($this->element->getElement('sp_type')->getMultiOptions() as $radio) : ?>
-                  
-                  <label class='sp-label' for='sp_type-<?php echo $i?>'>
-                      <input type="radio" value="<?php echo $i ?>" id="sp_type-<?php echo $i ?>" name="sp_type" <?php if($i == $value){echo 'checked="checked"';}?> ><?php echo $radio ?>
-                  </label>
-            <?php $i = $i + 1; ?>
-            <?php endforeach; ?>
-            <span class='playlist_type_help_icon'></span>
-        </dd>
-
-        <dt>
-            <label class='sp_text_font'><?php echo $this->element->getElement('sp_repeat_tracks')->getLabel() ?></label>
-        </dt>
-        <dd id='sp_repeat_tracks-element'>
-            <?php echo $this->element->getElement('sp_repeat_tracks')?>
-            <?php if($this->element->getElement("sp_repeat_tracks")->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_repeat_tracks")->getMessages() as $error): ?>
-                    <span class='errors sp-errors'>
-                   <?php echo $error; ?>
-                </span>
-                <?php endforeach; ?>
-            <?php endif; ?>
-            <span class='repeat_tracks_help_icon'></span>
-        </dd>
-        <dt>
-            <label class='sp_text_font'><?php echo $this->element->getElement('sp_overflow_tracks')->getLabel() ?></label>
-        </dt>
-        <dd id='sp_overflow_tracks-element'>
-            <?php echo $this->element->getElement('sp_overflow_tracks')?>
-            <?php if($this->element->getElement("sp_overflow_tracks")->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_overflow_tracks")->getMessages() as $error): ?>
-                    <span class='errors sp-errors'>
-                   <?php echo $error; ?>
-                </span>
-                <?php endforeach; ?>
-            <?php endif; ?>
-            <span class='overflow_tracks_help_icon'></span>
-        </dd>
-
-
-        <dt>
-            <label class='sp_text_font'><?php echo $this->element->getElement('sp_sort_options')->getLabel();?></label>
-        </dt>
-        <dd id='sp_sort-element'>
-            <?php echo $this->element->getElement('sp_sort_options') ?>
-            <?php if($this->element->getElement("sp_sort_options")->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_sort_options")->getMessages() as $error): ?>
-                    <span class='errors sp-errors'>
-                   <?php echo $error; ?>
-                </span>
-                <?php endforeach; ?>
-            <?php endif; ?>
-        </dd>
-
-        <dt>
-            <label class='sp_text_font'><?php echo $this->element->getElement('sp_limit_value')->getLabel() ?></label>
-        </dt>
-        <dd id='sp_limit-element'>
-            <?php echo $this->element->getElement('sp_limit_value')?>
-            <?php echo $this->element->getElement('sp_limit_options') ?>
-            <?php if($this->element->getElement("sp_limit_value")->hasErrors()) : ?>
-                <?php foreach($this->element->getElement("sp_limit_value")->getMessages() as $error): ?>
-                    <span class='errors sp-errors'>
-                   <?php echo $error; ?>
-                </span>
-                <?php endforeach; ?>
-            <?php endif; ?>
-        </dd>
-
         <dt><label><?php echo(_("Search Criteria:"));?></label></dt>
         <dd id='sp_criteria-element' class='criteria-element'>
-            <a class='btn btn-small btn-new' id='criteria_add'><i class='icon-white icon-plus'></i><?php echo(_("New Criteria")); ?></a>
-
         <?php for ($i = 0; $i < $this->criteriasLength; $i++) {
         // modRowMap holds the number of modifier rows for each criteria element
         // i.e. if we have 'Album contains 1' and 'Album contains 2' the modRowMap
@@ -138,7 +59,93 @@
             <?php } ?>
             
         <?php } ?>
+        <a class='btn btn-small btn-new' id='criteria_add'><i class='icon-white icon-plus'></i><?php echo(_("New Criteria")); ?></a>
+        </dd>
+    </dl>
+    <dl>
+        <dt>
+            <label class='sp_text_font'><?php echo $this->element->getElement('sp_limit_value')->getLabel() ?></label>
+        </dt>
+        <dd id='sp_limit-element'>
+            <?php echo $this->element->getElement('sp_limit_value')?>
+            <?php echo $this->element->getElement('sp_limit_options') ?>
+            <?php if($this->element->getElement("sp_limit_value")->hasErrors()) : ?>
+                <?php foreach($this->element->getElement("sp_limit_value")->getMessages() as $error): ?>
+                    <span class='errors sp-errors'>
+                   <?php echo $error; ?>
+                </span>
+                <?php endforeach; ?>
+            <?php endif; ?>
         </dd>
     </dl>
 
+    <div class="collapsible-header"><span class="arrow-icon"></span>Advanced options</div>
+    <div class="smart-block-advanced">
+        <dl>
+            <dt>
+                <label class='sp-label'>
+                    <?php echo $this->element->getElement('sp_type')->getLabel() ?>
+                </label>
+            </dt>
+            <dd id='sp_type-element'>
+                <?php $i=0;
+                    $value = $this->element->getElement('sp_type')->getValue();
+                    foreach ($this->element->getElement('sp_type')->getMultiOptions() as $radio) : ?>
+                    
+                    <label class='sp-label' for='sp_type-<?php echo $i?>'>
+                        <input type="radio" value="<?php echo $i ?>" id="sp_type-<?php echo $i ?>" name="sp_type" <?php if($i == $value){echo 'checked="checked"';}?> ><?php echo $radio ?>
+                    </label>
+                <?php $i = $i + 1; ?>
+                <?php endforeach; ?>
+                <span class='playlist_type_help_icon'></span>
+            </dd>
+        </dl>
+        <dl>
+            <dt>
+                <label class='sp_text_font'><?php echo $this->element->getElement('sp_repeat_tracks')->getLabel() ?></label>
+            </dt>
+            <dd id='sp_repeat_tracks-element'>
+                <?php echo $this->element->getElement('sp_repeat_tracks')?>
+                <?php if($this->element->getElement("sp_repeat_tracks")->hasErrors()) : ?>
+                    <?php foreach($this->element->getElement("sp_repeat_tracks")->getMessages() as $error): ?>
+                        <span class='errors sp-errors'>
+                    <?php echo $error; ?>
+                    </span>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+                <span class='repeat_tracks_help_icon'></span>
+            </dd>
+        </dl>
+        <dl>
+            <dt>
+                <label class='sp_text_font'><?php echo $this->element->getElement('sp_overflow_tracks')->getLabel() ?></label>
+            </dt>
+            <dd id='sp_overflow_tracks-element'>
+                <?php echo $this->element->getElement('sp_overflow_tracks')?>
+                <?php if($this->element->getElement("sp_overflow_tracks")->hasErrors()) : ?>
+                    <?php foreach($this->element->getElement("sp_overflow_tracks")->getMessages() as $error): ?>
+                        <span class='errors sp-errors'>
+                    <?php echo $error; ?>
+                    </span>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+                <span class='overflow_tracks_help_icon'></span>
+            </dd>
+        </dl>
+        <dl>
+            <dt>
+                <label class='sp_text_font'><?php echo $this->element->getElement('sp_sort_options')->getLabel();?></label>
+            </dt>
+            <dd id='sp_sort-element'>
+                <?php echo $this->element->getElement('sp_sort_options') ?>
+                <?php if($this->element->getElement("sp_sort_options")->hasErrors()) : ?>
+                    <?php foreach($this->element->getElement("sp_sort_options")->getMessages() as $error): ?>
+                        <span class='errors sp-errors'>
+                    <?php echo $error; ?>
+                    </span>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </dd>
+        </dl>
+    </div>
 </form>
diff --git a/airtime_mvc/application/views/scripts/playlist/smart-block.phtml b/airtime_mvc/application/views/scripts/playlist/smart-block.phtml
index eb80e402c..47ce144bc 100644
--- a/airtime_mvc/application/views/scripts/playlist/smart-block.phtml
+++ b/airtime_mvc/application/views/scripts/playlist/smart-block.phtml
@@ -10,7 +10,7 @@ if (isset($this->obj)) {
         <H2><?php echo(_("Editing "));?>"<span class="title_obj_name"><?php if (isset($this->unsavedName)) echo $this->unsavedName;
                 else echo $this->escape($this->obj->getName());?></span>"</H2>
     </div>
-    <div class="inner_editor_wrapper">
+    <div class="inner_editor_wrapper smart-block-form">
         <input class="obj_id" type="hidden" value="<?php echo $this->obj->getId(); ?>"/>
         <input class="obj_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"/>
         <input class='obj_type' type='hidden' value='block'/>
@@ -25,17 +25,22 @@ if (isset($this->obj)) {
                 else echo $this->escape($this->obj->getName());
                 ?>">
             </dd>
-            <dt id="description-label"><label for="description"><?php echo _("Description:") ?></label></dt>
-            <dd id="description-element">
-                <textarea cols="24" rows="3" id="description" name="description"><?php
-                    if (isset($this->unsavedDesc)) echo $this->unsavedDesc;
-                    else echo $this->obj->getDescription();
-                    ?></textarea>
-            </dd>
         </dl>
 
         <?php echo $this->form; ?>
 
+        <div class="smart-block-advanced">
+            <dl>
+                <dt id="description-label"><label for="description"><?php echo _("Description:") ?></label></dt>
+                <dd id="description-element">
+                    <textarea cols="24" rows="3" id="description" name="description"><?php
+                        if (isset($this->unsavedDesc)) echo $this->unsavedDesc;
+                        else echo $this->obj->getDescription();
+                        ?></textarea>
+                </dd>
+            </dl>
+        </div>
+
     </div>
 
     <div class="ui-widget-header fg-toolbar btn-toolbar clearfix">
diff --git a/airtime_mvc/public/css/dashboard.css b/airtime_mvc/public/css/dashboard.css
index d94b0f941..8df5161b0 100644
--- a/airtime_mvc/public/css/dashboard.css
+++ b/airtime_mvc/public/css/dashboard.css
@@ -684,20 +684,6 @@ li.ui-state-default {
     height: 26px;
 }
 
-.smart-block-form input[type='radio'] {
-    vertical-align: bottom;
-    margin: 0 5px -2px;
-}
-
-.smart-block-form input[type='checkbox'] {
-    vertical-align: bottom;
-    margin: 0 4px;
-}
-
-.smart-block-form ~ .btn-toolbar {
-    padding-top: 4px;
-}
-
 /* Schedule tab DataTable */
 
 #show_builder_table_wrapper .fg-toolbar.ui-corner-tl.ui-corner-tr {
diff --git a/airtime_mvc/public/css/playlist_builder.css b/airtime_mvc/public/css/playlist_builder.css
index 73a855634..0e344047a 100644
--- a/airtime_mvc/public/css/playlist_builder.css
+++ b/airtime_mvc/public/css/playlist_builder.css
@@ -634,4 +634,41 @@ li.spl_empty {
 
 #criteria_add {
     margin-bottom: 5px;
+}
+
+.smart-block-form dt, .smart-block-form dd {
+    float: none;
+}
+.smart-block-form dl:not(.search-criteria) {
+    display: flex;
+    width: 100%;
+}
+.smart-block-form dt {
+    flex: 1 0 20%;
+    margin: 0;
+}
+.smart-block-form dd {
+    flex: 0 0 80%;
+    margin: 0;
+}
+.collapsible-header .arrow-icon {
+    transition: 0.3s;
+}
+.collapsible-header.visible .arrow-icon {
+    transform: rotate(90deg);
+}
+.smart-block-advanced {
+    display: none;
+}
+.smart-block-form .smart-block-advanced dt {
+    flex: 0 0 40%;
+    margin: 0;
+}
+.smart-block-form .smart-block-advanced dd {
+    flex: 0 0 60%;
+    margin: 0;
+}
+.smart-block-form input[type='radio'], .smart-block-form input[type='checkbox'] {
+    vertical-align: middle;
+    margin: 0 5px;
 }
\ No newline at end of file
diff --git a/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js b/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js
index 6794e8855..e4e170978 100644
--- a/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js
+++ b/airtime_mvc/public/js/airtime/playlist/smart_blockbuilder.js
@@ -566,6 +566,11 @@ function setupUI() {
             at: "right center"
         }
     });
+
+    activeTab.find('.smart-block-form .collapsible-header').click(function(){
+        $(this).toggleClass('visible');
+        $('.smart-block-advanced').toggle();
+    })
 }
 
 /* Utilizing jQuery this function finds the #datetime_select element on the given row