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

media: fix/add media select button and preview image in plugin configuration

Browse Source
This commit is contained in:
Stephan Brunker 2020-06-05 23:25:18 +02:00
parent 6036d62d82
commit b6f582774a
4 changed files with 35 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
templates/2k11/admin/guess_input.tpl
View File

@ -26,6 +26,15 @@
</select>
{elseif $type == 'file'}
<input id="{$name}" type="file" name="{$name}">
{elseif $type == 'media'}
<div class='form_group'>
<input id="{$name}" name="{$name}" class="form_media change_preview" data-configitem="{$name}" type="text" value="{$value|escape}">
<button class="choose_media" type="button" name="insImage" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture" aria-hidden="true"></span><span class="visuallyhidden"> {$CONST.MEDIA_LIBRARY}</span></button>
<figure id="{$name}_preview" {if $value == ''} style='display:none;'{/if}>
<figcaption>{$CONST.PREVIEW}</figcaption>
<img src="{$value}" alt="">
</figure>
</div>
{elseif $type == 'textarea'}
<textarea id="{$name}" rows="5" name="{$name}">{$value|escape}</textarea>
{else}

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

@ -70,21 +70,19 @@
</div>
{elseif $ctype == 'media'}
<div class="clearfix form_field media_choose{if $cdesc != ''} has_info{/if}">
<div class="clearfix form_field {if $cdesc != ''} has_info{/if}">
<label for="serendipity[{$postKey}][{$config_item}]">{$cname}{if $cdesc != ''} <button class="toggle_info button_link" type="button" data-href="#{$postKey}_{$config_item}_info"><span class="icon-info-circled" aria-hidden="true"></span><span class="visuallyhidden"> {$CONST.MORE}</span></button>{/if}</label>
<div class="media_chooser clearfix">
<input id="serendipity[{$postKey}][{$config_item}]" class="change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">
<button class="choose_media" type="button" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture" aria-hidden="true"></span><span class="visuallyhidden">{$CONST.MEDIA_LIBRARY}</span></button>
</div>
{if $cdesc != ''}<span id="{$postKey}_{$config_item}_info" class="field_info additional_info">{$cdesc}</span>{/if}
<figure id="{$config_item}_preview">
<div class="form_group">
<input id="serendipity[{$postKey}][{$config_item}]" class="form_media change_preview" name="serendipity[{$postKey}][{$config_item}]" type="text" data-configitem="{$config_item}" value="{$value}">
<button class="choose_media" type="button" title="{$CONST.MEDIA_LIBRARY}"><span class="icon-picture" aria-hidden="true"></span><span class="visuallyhidden">{$CONST.MEDIA_LIBRARY}</span></button>
<figure id="{$config_item}_preview" {if $value == ''} style='display:none;'{/if}>
<figcaption>{$CONST.PREVIEW}</figcaption>
<img src="{$value}" alt="">
</figure>
</div>
</div>
{elseif $ctype == 'sequence'}

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

@ -164,6 +164,8 @@
var filename = document.getElementById(input).value;
var $target = $('#' + output + '_preview > img');
$target.attr('src', filename);
var $container = document.getElementById( output + '_preview');
$container.style.display = "block";
}
// Opens media db image selection in new window

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

@ -537,6 +537,7 @@ label > span,
.configuration_group .form_multiselect label,
.configuration_group .form_field label,
.configuration_group .form_area label,
.configuration_group .form_group,
#captchabox .captcha,
#dashboard_entries li > a,
#mediaPropertyForm .media_file_props label,
@ -1067,8 +1068,6 @@ input[type=checkbox],
.importer_data dd,
.form_buttons > input,
.js .media_choose label,
.js .media_choose input,
.quick_list ol > li,
.filter_pane .form_field > label,
.filter_pane .form_select > label,
@ -1084,7 +1083,6 @@ input[type=checkbox],
.serendipity_commentDirection,
.entry_info,
.pagination,
.media_choose figure,
.media_file_metadata h4,
.media_file_metadata h5,
.media_file_metadata dt,
@ -1359,7 +1357,6 @@ summary {
#filter_comments select,
#serendipity_comment .form_field input,
#serendipity_comment select,
.js .configuration_group .media_choose input,
.js #serendipity_category .form_field #category_icon,
#dashboard_header h2 {
width: 85%;
@ -1373,6 +1370,7 @@ summary {
.configuration_group .form_multiselect select,
.configuration_group .form_field input,
.configuration_group .form_area textarea,
.configuration_group .form_group,
#serendipity_category .form_field input,
#serendipity_category .form_select select,
#serendipity_category .form_multiselect select,
@ -1391,6 +1389,15 @@ summary {
width: 100%;
}
.configuration_group input.form_media {
width: calc(100% - 55px) !important;
max-width: calc(100% - 55px) !important;
float: none !important;
}
.configuration_group button.choose_media { float: right; }
.configuration_group .form_group figure { margin-top: 0.75em; }
#media_pane_filter input.reset_media_filters[type="reset"],
#media_pane_filter input[type="submit"] {
width: auto;
@ -2514,7 +2521,6 @@ label .perm_name,
.no-js .toggle_comment_full,
.no-js #add_upload,
.no-js .choose_media,
.no-js .media_choose figure,
.no-js #category_preview figure,
.no-js .media_show_info,
.no-js .media_rename,
@ -3116,6 +3122,7 @@ img.mfp-img {
.configuration_group .form_select select,
.configuration_group .form_multiselect select,
.configuration_group .form_field input,
.configuration_group .form_group,
.configuration_group .form_area textarea {
max-width: 320px;
}
@ -3230,8 +3237,7 @@ img.mfp-img {
#serendipity_category > div > div,
#serendipity_category #preview,
#serendipity_category > div > fieldset,
#directory_permissions .form_multiselect,
.media_chooser {
#directory_permissions .form_multiselect {
float: left;
margin: 0 2% 1em 0;
width: 48%;
@ -3297,12 +3303,7 @@ img.mfp-img {
margin: 0 0 1em;
}
.media_chooser {
margin-bottom: 0;
}
#maintenance > span,
.media_chooser + .field_info {
#maintenance > span {
margin-top: 0;
}
@ -3353,6 +3354,7 @@ img.mfp-img {
.configuration_group .form_select select,
.configuration_group .form_multiselect select,
.configuration_group .form_field input,
.configuration_group .form_group,
.configuration_group .form_area textarea,
.configuration_group fieldset > fieldset legend,
.configuration_group div > fieldset legend,
@ -3402,17 +3404,13 @@ img.mfp-img {
.configuration_group .form_select select,
.configuration_group .form_multiselect select,
.configuration_group .form_field input,
.configuration_group .form_group,
.configuration_group .form_area textarea,
#uploadform .form_select select,
#uploadform .form_field input {
max-width: 48%;
}
.js .configuration_group .media_choose input {
margin-right: 1%;
max-width: none;
}
.info_expanded select,
.info_expanded > input,
.info_expanded textarea,
@ -3422,11 +3420,6 @@ img.mfp-img {
top: -1.5em;
}
.media_choose .button_link {
position: relative;
top: 2px;
}
.configuration_group .form_select,
.configuration_group .form_multiselect,
.configuration_group .form_field,
@ -3735,9 +3728,7 @@ img.mfp-img {
/* LARGER SCREENS */
@media only screen and (min-width: 1280px) {
.js .configuration_group .media_choose input {
max-width: 42.5%;
}
.manage h3 {
width: 18em;
}