smartblock ui: add collapsed "advanced options" section

This commit is contained in:
ryan 2018-12-13 09:11:42 -06:00
parent 4752c728b9
commit 13d6df24fb
5 changed files with 141 additions and 101 deletions

View File

@ -1,87 +1,8 @@
<form class="smart-block-form" method="post" action=""> <form class="smart-block-form" method="post" action="">
<dl class='zend_form search-criteria'> <dl class='zend_form search-criteria'>
<div id='sp-success' class='success' style='display:none'></div> <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> <dt><label><?php echo(_("Search Criteria:"));?></label></dt>
<dd id='sp_criteria-element' class='criteria-element'> <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++) { <?php for ($i = 0; $i < $this->criteriasLength; $i++) {
// modRowMap holds the number of modifier rows for each criteria element // 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 // i.e. if we have 'Album contains 1' and 'Album contains 2' the modRowMap
@ -138,7 +59,93 @@
<?php } ?> <?php } ?>
<?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> </dd>
</dl> </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> </form>

View File

@ -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; <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> else echo $this->escape($this->obj->getName());?></span>"</H2>
</div> </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_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_lastMod" type="hidden" value="<?php echo $this->obj->getLastModified('U'); ?>"/>
<input class='obj_type' type='hidden' value='block'/> <input class='obj_type' type='hidden' value='block'/>
@ -25,6 +25,12 @@ if (isset($this->obj)) {
else echo $this->escape($this->obj->getName()); else echo $this->escape($this->obj->getName());
?>"> ?>">
</dd> </dd>
</dl>
<?php echo $this->form; ?>
<div class="smart-block-advanced">
<dl>
<dt id="description-label"><label for="description"><?php echo _("Description:") ?></label></dt> <dt id="description-label"><label for="description"><?php echo _("Description:") ?></label></dt>
<dd id="description-element"> <dd id="description-element">
<textarea cols="24" rows="3" id="description" name="description"><?php <textarea cols="24" rows="3" id="description" name="description"><?php
@ -33,8 +39,7 @@ if (isset($this->obj)) {
?></textarea> ?></textarea>
</dd> </dd>
</dl> </dl>
</div>
<?php echo $this->form; ?>
</div> </div>

View File

@ -684,20 +684,6 @@ li.ui-state-default {
height: 26px; 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 */ /* Schedule tab DataTable */
#show_builder_table_wrapper .fg-toolbar.ui-corner-tl.ui-corner-tr { #show_builder_table_wrapper .fg-toolbar.ui-corner-tl.ui-corner-tr {

View File

@ -635,3 +635,40 @@ li.spl_empty {
#criteria_add { #criteria_add {
margin-bottom: 5px; 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;
}

View File

@ -566,6 +566,11 @@ function setupUI() {
at: "right center" 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 /* Utilizing jQuery this function finds the #datetime_select element on the given row