Completely revamped layout for entry editor.
Please note: This is still preliminary. It needs testing (no-js fallback, IE8) and it still needs a better solution for selecting (especially multiple) catgeories.
This commit is contained in:
Matthias Mees
parent
fa5af4a1ec
commit
f932be684f
@ -1,4 +1,4 @@
|
||||
<h2>{if $entry_vars.entry.title}{$entry_vars.entry.title|@escape|string_format:"{$CONST.EDIT_THIS_CAT}"}{else}{$CONST.NEW_ENTRY}{/if}</h2>
|
||||
<h2>{if $entry_vars.entry.title}{$CONST.EDIT_ENTRY}{else}{$CONST.NEW_ENTRY}{/if}</h2>
|
||||
{if $entry_vars.errMsg}
|
||||
<span class="msg_error"><span class="icon-attention-circled"></span> {$entry_vars.errMsg}</span>
|
||||
{/if}
|
||||
@ -15,28 +15,6 @@
|
||||
<input id="entryTitle" name="serendipity[title]" type="text" value="{$entry_vars.entry.title|@escape}">
|
||||
</div>
|
||||
|
||||
<div id="edit_entry_metadata" class="clearfix">
|
||||
{if $entry_vars.allowDateManipulation}
|
||||
<div id="edit_entry_timestamp" class="form_field">
|
||||
<input name="serendipity[chk_timestamp]" type="hidden" value="{$entry_vars.timestamp}">
|
||||
|
||||
<label for="serendipityNewTimestamp">{$CONST.DATE}</label>
|
||||
<input id="serendipityNewTimestamp" name="serendipity[new_timestamp]" type="datetime-local" value="{$entry_vars.timestamp|@formatTime:'o-m-d\TH:i':true:false:true}">
|
||||
|
||||
<button id="reset_timestamp" class="button_link" type="button" href="#serendipityNewTimestamp" data-currtime="{$entry_vars.reset_timestamp|@formatTime:'o-m-d\TH:i':true:false:true}" title="{$CONST.RESET_DATE_DESC}"><span class="icon-clock"></span><span class="visuallyhidden"> {$CONST.RESET_DATE}</span></button>
|
||||
</div>
|
||||
{/if}
|
||||
<div id="edit_entry_category" class="form_select">
|
||||
<label for="categoryselector">{$CONST.CATEGORY}</label>
|
||||
<select id="categoryselector" name="serendipity[categories][]" multiple>
|
||||
<option value="0">{$CONST.NO_CATEGORY}</option>
|
||||
{foreach from=$entry_vars.category_options item="entry_cat"}
|
||||
<option value="{$entry_cat.categoryid}"{if $entry_cat.is_selected} selected{/if}>{$entry_cat.depth_pad}{$entry_cat.category_name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form_area">
|
||||
<label for="serendipity[body]">{$CONST.ENTRY_BODY}</label>
|
||||
{if NOT $entry_vars.wysiwyg}
|
||||
@ -56,6 +34,13 @@
|
||||
<textarea id="serendipity[body]" name="serendipity[body]" rows="15">{$entry_vars.entry.body|@escape}</textarea>
|
||||
</div>
|
||||
|
||||
<div id="edit_entry_submit">
|
||||
<button id="reset_timestamp" class="button_link" type="button" href="#serendipityNewTimestamp" data-currtime="{$entry_vars.reset_timestamp|@formatTime:'o-m-d\TH:i':true:false:true}" title="{$CONST.RESET_DATE_DESC}"><span class="icon-clock"></span><span class="visuallyhidden"> {$CONST.RESET_DATE}</span></button>
|
||||
<a id="select_category" class="button_link icon_link" href="#edit_entry_category" title="Select category"><span class="icon-folder-open"></span><span class="visuallyhidden">Select category</span></a> {* i18n *}
|
||||
<input class="entry_preview" type="submit" value="{$CONST.PREVIEW}">
|
||||
<input type="submit" value="{$CONST.SAVE}">
|
||||
</div>
|
||||
|
||||
<div class="form_area">
|
||||
<label for="serendipity[extended]">{$CONST.EXTENDED_BODY}</label>
|
||||
{if NOT $entry_vars.wysiwyg}
|
||||
@ -75,36 +60,53 @@
|
||||
<textarea id="serendipity[extended]" name="serendipity[extended]" rows="15">{$entry_vars.entry.extended|@escape}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="clearfix">
|
||||
<div id="edit_entry_status_comments" class="clearfix">
|
||||
<div class="form_check">
|
||||
<input id="checkbox_allow_comments" name="serendipity[allow_comments]" type="checkbox" value="true"{if $entry_vars.allow_comments} checked="checked"{/if}><label for="checkbox_allow_comments">{$CONST.COMMENTS_ENABLE}</label>
|
||||
<fieldset id="edit_entry_metadata" class="clearfix">
|
||||
<legend><button id="toggle_metadata" class="button_link" type="button"><span class="icon-plus"></span><span class="visuallyhidden"> {$CONST.TOGGLE_ALL}</span></button><span>Entry metadata</span></legend> {* i18n *}
|
||||
|
||||
<div id="meta_data" class="additional_info">
|
||||
{if $entry_vars.allowDateManipulation}
|
||||
<div id="edit_entry_timestamp" class="form_field">
|
||||
<input name="serendipity[chk_timestamp]" type="hidden" value="{$entry_vars.timestamp}">
|
||||
|
||||
<label for="serendipityNewTimestamp">{$CONST.DATE}</label>
|
||||
<input id="serendipityNewTimestamp" name="serendipity[new_timestamp]" type="datetime-local" value="{$entry_vars.timestamp|@formatTime:'o-m-d\TH:i':true:false:true}">
|
||||
</div>
|
||||
{/if}
|
||||
<div id="edit_entry_status" class="form_select">
|
||||
<label for="entry_status">Entry status</label> {* i18n *}
|
||||
<select id="entry_status" name="serendipity[isdraft]">
|
||||
{if $entry_vars.serendipityRightPublish}
|
||||
<option value="false"{if $entry_vars.draft_mode == 'publish'} selected{/if}>{$CONST.PUBLISH}</option>
|
||||
{/if}
|
||||
<option value="true"{if $entry_vars.draft_mode == 'draft'} selected{/if}>{$CONST.DRAFT}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form_check">
|
||||
<input id="checkbox_moderate_comments" name="serendipity[moderate_comments]" type="checkbox" value="true"{if $entry_vars.moderate_comments} checked="checked"{/if}><label for="checkbox_moderate_comments">{$CONST.COMMENTS_MODERATE}</label>
|
||||
<div id="edit_entry_status_comments">
|
||||
<fieldset>
|
||||
<legend><span>{$CONST.COMMENTS}</span></legend>
|
||||
|
||||
<div class="form_check">
|
||||
<input id="checkbox_allow_comments" name="serendipity[allow_comments]" type="checkbox" value="true"{if $entry_vars.allow_comments} checked="checked"{/if}><label for="checkbox_allow_comments">{$CONST.COMMENTS_ENABLE}</label>
|
||||
</div>
|
||||
|
||||
<div class="form_check">
|
||||
<input id="checkbox_moderate_comments" name="serendipity[moderate_comments]" type="checkbox" value="true"{if $entry_vars.moderate_comments} checked="checked"{/if}><label for="checkbox_moderate_comments">{$CONST.COMMENTS_MODERATE}</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div id="edit_entry_category" class="form_select">
|
||||
<label for="categoryselector">{$CONST.CATEGORY}</label>
|
||||
<select id="categoryselector" name="serendipity[categories][]" multiple>
|
||||
<option value="0">{$CONST.NO_CATEGORY}</option>
|
||||
{foreach from=$entry_vars.category_options item="entry_cat"}
|
||||
<option value="{$entry_cat.categoryid}"{if $entry_cat.is_selected} selected{/if}>{$entry_cat.depth_pad}{$entry_cat.category_name}</option>
|
||||
{/foreach}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="edit_entry_submit" class="clearfix">
|
||||
<div>
|
||||
<div id="edit_entry_status" class="form_select">
|
||||
<label for="entry_status">Entry status</label> {* i18n *}
|
||||
<select id="entry_status" name="serendipity[isdraft]">
|
||||
{if $entry_vars.serendipityRightPublish}
|
||||
<option value="false"{if $entry_vars.draft_mode == 'publish'} selected{/if}>{$CONST.PUBLISH}</option>
|
||||
{/if}
|
||||
<option value="true"{if $entry_vars.draft_mode == 'draft'} selected{/if}>{$CONST.DRAFT}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form_buttons">
|
||||
<input class="entry_preview" type="submit" value="{$CONST.PREVIEW}">
|
||||
<input type="submit" value="{$CONST.SAVE}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
{capture name='advanced_options'}{$entry_vars.entry|@serendipity_refhookPlugin:'backend_display'}{/capture}
|
||||
{if ! empty($smarty.capture.advanced_options) }
|
||||
|
||||
@ -802,6 +802,36 @@ var AccessifyHTML5 = function (defaults, more_fixes) {
|
||||
serendipity.openPopup('serendipity_admin.php?serendipity[adminModule]=media&serendipity[noBanner]=true&serendipity[noSidebar]=true&serendipity[noFooter]=true&serendipity[showMediaToolbar]=false&serendipity[showUpload]=true&serendipity[textarea]=' + $(this).attr('data-tarea'));
|
||||
});
|
||||
|
||||
// Entry metadata
|
||||
// NOTE: This probably should be rewritten as a general function which
|
||||
// also works for advanced options (see below); also not sure if
|
||||
// the localStorage stuff works here
|
||||
if($('body').has('#edit_entry_metadata').size() > 0) {
|
||||
$('#edit_entry_metadata > legend > button').click(function() {
|
||||
var $el = $(this);
|
||||
var $toggleIcon = $el.find('> span');
|
||||
var $toggleState = $toggleIcon.attr('class');
|
||||
if($toggleState == 'icon-minus') {
|
||||
$toggleIcon.removeClass('icon-minus').addClass('icon-plus');
|
||||
localStorage.show_advanced_options = "false";
|
||||
} else {
|
||||
$toggleIcon.removeClass('icon-plus').addClass('icon-minus');
|
||||
localStorage.show_advanced_options = "true";
|
||||
}
|
||||
$('#meta_data').toggleClass('additional_info');
|
||||
});
|
||||
if (localStorage.show_advanced_options == "true") {
|
||||
$('#edit_entry_metadata > legend > button').click();
|
||||
}
|
||||
}
|
||||
|
||||
// TEMP: expand entry metadata if #select_category is clicked
|
||||
// (will be replaced by a better solution soonish)
|
||||
$('#select_category').click(function(e) {
|
||||
e.preventDefault();
|
||||
$('#edit_entry_metadata > legend > button').click();
|
||||
});
|
||||
|
||||
// Advanced options
|
||||
if($('body').has('#advanced_options').size() > 0) {
|
||||
$('#advanced_options > legend > button').click(function() {
|
||||
|
||||
@ -416,9 +416,6 @@ form > button,
|
||||
.edit_actions li,
|
||||
.actions li,
|
||||
#login .form_field label,
|
||||
#edit_entry_title label,
|
||||
#edit_entry_metadata label,
|
||||
#edit_entry_status label,
|
||||
#filter_comments label,
|
||||
#serendipity_comment label,
|
||||
#sort_entries .form_select label,
|
||||
@ -452,6 +449,9 @@ legend > span > span,
|
||||
.msg_success,
|
||||
.msg_notice,
|
||||
.msg_hint,
|
||||
#edit_entry_title label,
|
||||
#edit_entry_metadata .form_field label,
|
||||
#edit_entry_metadata .form_select label,
|
||||
#serendipity_category label,
|
||||
#image_directory_edit_form .form_select label,
|
||||
#uploadform label,
|
||||
@ -861,6 +861,9 @@ input[type=radio] + label,
|
||||
}
|
||||
|
||||
input[type=checkbox],
|
||||
#toggle_extended,
|
||||
#toggle_metadata,
|
||||
#toggle_advanced,
|
||||
#category_icon {
|
||||
margin-right: .4em;
|
||||
}
|
||||
@ -885,6 +888,8 @@ input[type=checkbox],
|
||||
.form_radio,
|
||||
.form_select,
|
||||
.form_multiselect,
|
||||
#edit_entry_metadata,
|
||||
#advanced_options,
|
||||
#entry_skip,
|
||||
#filter_entries,
|
||||
#sort_entries,
|
||||
@ -1131,8 +1136,6 @@ summary {
|
||||
margin: 1.25em 2% .75em 0
|
||||
}
|
||||
|
||||
#edit_entry_title label,
|
||||
#edit_entry_metadata label,
|
||||
#filter_comments label,
|
||||
#serendipity_comment label {
|
||||
width: 15%;
|
||||
@ -1160,9 +1163,6 @@ summary {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#edit_entry_title input,
|
||||
#edit_entry_metadata input,
|
||||
#edit_entry_metadata select,
|
||||
#filter_comments .form_field > input,
|
||||
#filter_comments select,
|
||||
#serendipity_comment .form_field input,
|
||||
@ -1173,6 +1173,10 @@ summary {
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
#edit_entry_title input,
|
||||
#edit_entry_metadata .form_field input,
|
||||
#edit_entry_metadata select,
|
||||
#categoryselector,
|
||||
.configuration_group .form_select select,
|
||||
.configuration_group .form_multiselect select,
|
||||
.configuration_group .form_field input,
|
||||
@ -1229,6 +1233,16 @@ summary {
|
||||
max-width: 40em;
|
||||
}
|
||||
|
||||
#serendipityEntry {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#edit_entry_submit {
|
||||
position: absolute;
|
||||
top: -3.25em;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
||||
/* HEADER
|
||||
----------------------------------------------------------------- */
|
||||
@ -1327,13 +1341,6 @@ summary {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#reset_timestamp,
|
||||
#toggle_categoryselector {
|
||||
position: absolute;
|
||||
top: 1.55em;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#media_pane_filter #toggle_filters {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@ -1347,10 +1354,6 @@ summary {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#reset_timestamp {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#edit_entry_category label {
|
||||
vertical-align: top;
|
||||
}
|
||||
@ -1395,8 +1398,7 @@ fieldset p,
|
||||
#login .form_buttons,
|
||||
.media_file .actions,
|
||||
#entries_list .actions,
|
||||
.msg_hint > p:last-of-type,
|
||||
#edit_entry_submit .form_buttons {
|
||||
.msg_hint > p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@ -1411,11 +1413,6 @@ fieldset p,
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#advanced_options > legend > span {
|
||||
display: inline-block;
|
||||
margin: 1.16667em 0 1.16667em .2em;
|
||||
}
|
||||
|
||||
.category_data {
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
@ -2589,10 +2586,6 @@ img.mfp-img {
|
||||
margin: 1.71429em 0;
|
||||
}
|
||||
|
||||
#edit_entry_submit .form_buttons {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#main_menu li > ul > li {
|
||||
width: 33%;
|
||||
}
|
||||
@ -2635,6 +2628,7 @@ img.mfp-img {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#meta_data > div,
|
||||
#template_options fieldset legend,
|
||||
#template_options fieldset > .grouped,
|
||||
.configure_plugin fieldset legend,
|
||||
@ -2670,12 +2664,6 @@ img.mfp-img {
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
#edit_entry_submit {
|
||||
float: right;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
#edit_entry_submit label,
|
||||
#maintenance_import label {
|
||||
display: block;
|
||||
}
|
||||
@ -2773,30 +2761,6 @@ img.mfp-img {
|
||||
/* LARGE SCREEN (e.g. netbooks)
|
||||
----------------------------------------------------------------- */
|
||||
@media only screen and (min-width: 900px) {
|
||||
#edit_entry_timestamp,
|
||||
#reset_timestamp {
|
||||
max-height: auto;
|
||||
position: static;
|
||||
}
|
||||
|
||||
#toggle_categoryselector {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
.js #categoryselector {
|
||||
margin-left: 2.5em;
|
||||
}
|
||||
|
||||
.js #edit_entry_metadata select {
|
||||
width: 89%;
|
||||
}
|
||||
|
||||
#edit_entry_title input,
|
||||
.no-js #edit_entry_metadata select {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#edit_entry_status_comments .form_check {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
@ -2808,8 +2772,6 @@ img.mfp-img {
|
||||
margin-bottom: .75em;
|
||||
}
|
||||
|
||||
#edit_entry_metadata label,
|
||||
#edit_entry_status label,
|
||||
#sort_entries .form_select label,
|
||||
#filter_entries .form_select label,
|
||||
#filter_entries .form_field label,
|
||||
@ -2852,7 +2814,6 @@ img.mfp-img {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
#edit_entry_metadata > div,
|
||||
#karmafilters .form_field,
|
||||
#karmafilters .form_select {
|
||||
float: left;
|
||||
@ -2992,10 +2953,6 @@ img.mfp-img {
|
||||
.js .configuration_group .media_choose input {
|
||||
max-width: 42.5%;
|
||||
}
|
||||
|
||||
.js #edit_entry_metadata select {
|
||||
width: 91%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user