mbirth/LuckyCoinkydink
Archived
1
0
Fork 0
Code Issues Pull Requests Activity

A better solution for show/hide additional form info text.

Browse Source 
This is based on the show/hide functionality already used in the
backend in various places with a nice no-js fallback.o
This commit is contained in:
Matthias Mees
2013-06-24 20:59:03 +02:00
parent 3c3369f64b
commit 49181fb06d
4 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
templates/2k11/admin/config_template.tpl
View File

@ -20,15 +20,21 @@
{if $item.guessedInput}
{if $item.type == 'bool'}
<fieldset class="clearfix {$zebra_class}">
<legend><span>{$item.title}{if $item.description != ''} <span>{$item.description}</span>{/if}</span></legend>
<legend><span>{$item.title}{if $item.description != ''} <a class="toggle_info" href="#{$item.var}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</span></legend>
<div class="clearfix grouped">
{$item.guessedInput}
</div>
{if $item.description != ''}
<span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>
{/if}
</fieldset>
{else}
<div class="clearfix {$zebra_class} form_{if $item.type == 'list'}select{elseif $item.type == 'multilist'}multiselect{elseif $item.type == 'textarea'}area{else}field{/if}">
<label for="{$item.var}">{$item.title}{if $item.description != ''} <span>{$item.description}</span>{/if}</label>
<label for="{$item.var}">{$item.title}{if $item.description != ''} <a class="toggle_info" href="#{$item.var}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>{* i18n *}
{$item.guessedInput}
{if $item.description != ''}
<span id="{$item.var}_info" class="field_info additional_info">{$item.description}</span>
{/if}
</div>
{/if}
{/if}

20
templates/2k11/admin/plugin_config_item.tpl
View File

@ -2,7 +2,7 @@
<hr>
{elseif $ctype == 'select'}
<div class="clearfix form_select">
<label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
<label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
{* Make sure id creation actually produces unique identifiers *}
<select id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]{($is_multi_select) ? '[]' : ''}" {($is_multi_select) ? 'multiple' : ''} {($is_multi_select && ($select_size > 0)) ? "size='{$select_size}'" : ''}>
{foreach $select AS $select_value => $select_desc}
@ -10,11 +10,12 @@
<!-- case select assign id={$id} -->
<option value="{$select_value}" {(in_array($select_value, $selected_options) || in_array($select_value, $pre_selected)) ? 'selected' : ''} title="{$select_desc|escape}">{$select_desc|escape}</option>
{/foreach}
</select>
</select>
{if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</div>
{elseif $ctype == 'radio'}
<fieldset>
<legend><span>{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</span></legend>
<legend><span>{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</span></legend>
<div class="clearfix grouped">
{foreach $radio_button AS $r}
<div class="form_radio">
@ -24,18 +25,21 @@
</div>
{/foreach}
</div>
{if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</fieldset>
{elseif $ctype == 'string'}
<div class="clearfix form_field">
<label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
<label for="serendipity_{$config_item}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
{* TODO: Make sure id creation actually produces unique identifiers *}
<input id="serendipity_{$config_item}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" type="{$input_type}" value="{$hvalue}">
{if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</div>
{elseif (($ctype == 'html') || ($ctype == 'text'))}
<div class="clearfix form_area">
<label for="nuggets{$elcount}">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
<label for="nuggets{$elcount}">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#nuggets{$elcount}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
<textarea id="nuggets{$elcount}" class="direction_{$lang_direction}" name="serendipity[{$postKey}][{$config_item}]" rows="{$text_rows}">{$hvalue}</textarea>
{if $cdesc != ''}<span id="nuggets{$elcount}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</div>
{elseif $ctype == 'content'}
<div class="clearfix">
@ -52,18 +56,19 @@
</div>
{elseif $ctype == 'media'}
<div class="clearfix form_field media_choose">
<label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</label>
<label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$postKey}_{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</label>
<input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" data-pmwidth="{$preview_width}" data-pmheight="{$preview_height}" value="{$value}">{* This should be input[type=file] … *}
<a class="button_link choose_media" href="#serendipity[{$postKey}][{$config_item}]" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></a>
{if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</div>
{elseif $ctype == 'sequence'}
{if !$sequencejs_output}
<script src="{serendipity_getFile file="admin/js/dragdrop.js"}"></script>
{/if}
<fieldset>
<legend><span>{$cname}{if $cdesc != ''} <span>{$cdesc}</span>{/if}</span></legend>
<legend><span>{$cname}{if $cdesc != ''} <a class="toggle_info" href="#{$config_item}_info"><span class="icon-info-circled"></span><span class="visuallyhidden"> More</span></a>{/if}</span></legend>
<input id="{$config_item}_value" name="serendipity[{$postKey}][{$config_item}]" type="hidden" value="{$value}">
<noscript>
@ -107,6 +112,7 @@
{if isset($no_sequence)}
{$no_sequence}
{/if}
{if $cdesc != ''}<span id="{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
</fieldset>
<script>
function sort_{$config_item}_Sequence() {

4
templates/2k11/admin/serendipity_editor.js.tpl
View File

@ -854,8 +854,8 @@ function highlightComment(id, checkvalue) {
$('.media_file_meta').css('maxWidth', thumbsWidth);
}
// Show media file info, template info or filters
$('.media_show_info, .template_show_info, .filters_toolbar li > a').click(function(e) {
// Show media file info, template info, label info or filters
$('.media_show_info, .template_show_info, .filters_toolbar li > a, .toggle_info').click(function(e) {
$($(this).attr('href')).toggleClass('additional_info');
e.preventDefault();
});

19
templates/2k11/admin/style.css
View File

@ -1477,12 +1477,22 @@ form > .button_link:first-of-type {
height: 24px;
}
.entry_status {
.entry_status,
.field_info {
background: #888;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #fff;
padding: 0 4px;
}
.field_info {
clear: both;
display: block;
margin: .75em 0 0;
}
#entries_list .entry_info .entry_status {
float: right;
margin: 0 .4em .75em 0;
@ -1852,12 +1862,17 @@ input[name="serendipity[filter][fileCategory]"] {
#uploadform .form_select select,
#uploadform .form_field input,
#serendipity_category fieldset legend,
#serendipity_category fieldset > .grouped {
#serendipity_category fieldset > .grouped,
.field_info {
float: left;
margin-right: 2%;
width: 48%;
}
.field_info {
margin: .85715em 2% 0 50%;
}
.configuration_group .form_select select,
.configuration_group .form_multiselect select,
.configuration_group .form_field input,