Add a button to switch entry status quickly to entry editor.

- Includes new iconfont build with two new icons for entry state.
- JS to toggle entry status based on quick switch button.
- JS to toggle quick switch status based on entry status.
- JS to emit a notification that entry status has been updated.

References #222

templates/2k11/admin/entries.tpl

@@ -75,6 +75,7 @@
     {if $has_freetag}
         <a id="select_tags" class="button_link icon_link" href="#edit_entry_freetags" title="{$CONST.PLUGIN_EVENT_FREETAG_MANAGETAGS}"><span class="icon-tag"></span><span class="visuallyhidden">{$CONST.PLUGIN_EVENT_FREETAG_MANAGETAGS}</span></a>
     {/if}
+        <button id="switch_entry_status" class="button_link" type="button" href="#edit_entry_status" title="{if $entry_vars.draft_mode == 'publish'}{$CONST.PUBLISH}{else}{$CONST.DRAFT}{/if}" data-title-alt="{if $entry_vars.draft_mode == 'publish'}{$CONST.DRAFT}{else}{$CONST.PUBLISH}{/if}">{if $entry_vars.draft_mode == 'publish'}<span class="icon-toggle-on"></span><span class="visuallyhidden"> {$CONST.PUBLISH}</span>{else}<span class="icon-toggle-off"></span><span class="visuallyhidden"> {$CONST.DRAFT}</span>{/if}</button>
         <input class="entry_preview" type="submit" value="{$CONST.PREVIEW}">
         <input type="submit" value="{$CONST.SAVE}">
     </div>

templates/2k11/admin/font/fontello.svg

@@ -26,6 +26,8 @@
 <glyph glyph-name="cancel" unicode="&#xe811;" d="m724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
 <glyph glyph-name="rss" unicode="&#xe812;" d="m214 100q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m286-69q1-15-9-26-11-12-27-12h-75q-14 0-24 9t-11 23q-12 128-103 219t-219 103q-14 1-23 11t-9 24v75q0 16 12 26 9 10 24 10h3q89-7 170-45t145-101q63-63 101-145t45-171z m286-1q1-15-10-26-10-11-26-11h-80q-14 0-25 10t-11 23q-6 120-56 228t-129 188-188 129-227 57q-14 0-24 11t-10 24v80q0 15 11 26 10 10 25 10h1q147-8 280-67t238-164q104-104 164-238t67-280z" horiz-adv-x="785.7" />
 <glyph glyph-name="attention-circled" unicode="&#xe813;" d="m429 779q116 0 215-58t156-156 57-215-57-215-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58z m71-696v106q0 8-5 13t-12 5h-107q-8 0-13-5t-6-13v-106q0-8 6-13t13-6h107q7 0 12 6t5 13z m-1 192l10 346q0 7-6 10-5 5-13 5h-123q-8 0-13-5-6-3-6-10l10-346q0-6 5-10t14-4h103q8 0 13 4t6 10z" horiz-adv-x="857.1" />
+<glyph glyph-name="toggle-off" unicode="&#xe814;" d="m643 350q0 58-23 111t-61 91-91 61-111 23-111-23-91-61-61-91-23-111 23-111 61-91 91-61 111-23 111 23 91 61 61 91 23 111z m428 0q0 58-22 111t-61 91-92 61-110 23h-216q67-51 106-125t38-161-38-161-106-125h216q58 0 110 23t92 61 61 91 22 111z m72 0q0-73-29-139t-76-113-114-77-138-28h-429q-72 0-138 28t-114 77-76 113-29 139 29 139 76 114 114 76 138 28h429q72 0 138-28t114-76 76-114 29-139z" horiz-adv-x="1142.9" />
+<glyph glyph-name="toggle-on" unicode="&#xe815;" d="m0 350q0 73 29 139t76 114 114 76 138 28h429q72 0 138-28t114-76 76-114 29-139-29-139-76-113-114-77-138-28h-429q-72 0-138 28t-114 77-76 113-29 139z m786-286q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23-111-23-91-61-61-91-23-111 23-111 61-91 91-61 111-23z" horiz-adv-x="1142.9" />
 <glyph glyph-name="filter" unicode="&#xe817;" d="m783 685q9-23-8-39l-275-275v-414q0-23-22-33-7-3-14-3-15 0-25 11l-143 143q-10 10-10 25v271l-275 275q-18 16-8 39 9 22 33 22h714q23 0 33-22z" horiz-adv-x="785.7" />
 <glyph glyph-name="resize-full" unicode="&#xe818;" d="m421 261q0-8-5-13l-185-185 80-81q10-10 10-25t-10-25-25-11h-250q-15 0-25 11t-11 25v250q0 15 11 25t25 11 25-11l80-80 185 185q6 6 13 6t13-6l64-63q5-6 5-13z m436 482v-250q0-15-10-25t-26-11-25 11l-80 80-185-185q-6-6-13-6t-13 6l-64 63q-5 6-5 13t5 13l186 185-81 81q-10 10-10 25t10 25 25 11h250q15 0 26-11t10-25z" horiz-adv-x="857.1" />
 <glyph glyph-name="menu" unicode="&#xe819;" d="m857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />

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

@@ -853,6 +853,54 @@ $(function() {
         }, 5000);
     });
 
+    // Switch entry status
+    $('#switch_entry_status').click(function(e) {
+        var $el = $(this);
+        var oldState = $el.attr('title');
+        var newState = $el.attr('data-title-alt');
+        var entryState = $('#entry_status option');
+        var stateIcon = $el.find("[class^='icon']");
+
+        $(entryState).filter(function() {
+            return $(this).html() == oldState;
+        }).prop('selected', false);
+
+        $(entryState).filter(function() {
+            return $(this).html() == newState;
+        }).prop('selected', true);
+
+        $el.attr({
+            'title': newState,
+            'data-title-alt': oldState
+        }).find('> .visuallyhidden').text(newState);
+
+        if(stateIcon.hasClass('icon-toggle-on')) {
+            stateIcon.removeClass('icon-toggle-on').addClass('icon-toggle-off');
+        } else {
+            stateIcon.removeClass('icon-toggle-off').addClass('icon-toggle-on');
+        }
+
+        // Inline notification, we might want to make this reuseable
+        $('<span id="msg_entrystatus" class="msg_notice"><span class="icon-info-circled"></span>{$CONST.ENTRY_STATUS}: ' + newState + ' <a class="remove_msg" href="#msg_entrystatus"><span class="icon-cancel"></span><span class="visuallyhidden">{$CONST.HIDE}</span></a></span>').insertBefore('#edit_entry_title');
+        // Remove entrystatus msg
+        $('.remove_msg').click(function(e) {
+            e.preventDefault();
+            var $target = $(this).parent();
+            $target.fadeOut(250, function() { $target.remove(); });
+        });
+        // Automagic removal after 5 secs
+        setTimeout(function() {
+            $('#msg_entrystatus').fadeOut(250).remove();
+        }, 5000);
+
+        e.preventDefault();
+    });
+
+    // Matching change event
+    $('#entry_status').change(function() {
+        $('#switch_entry_status').trigger('click');
+    });
+
     // Editor tools
     $('.wrap_selection').click(function() {
         var $el = $(this);

templates/2k11/admin/style.css

@@ -354,11 +354,11 @@ nav ol {
 /* ICON FONT: http://fortawesome.github.com/Font-Awesome/ */
 @font-face {
     font-family: 'fontello';
-    src: url('{TEMPLATE_PATH}font/fontello.eot?42047096');
-    src: url('{TEMPLATE_PATH}font/fontello.eot?42047096#iefix') format('embedded-opentype'),
-         url('{TEMPLATE_PATH}font/fontello.woff?42047096') format('woff'),
-         url('{TEMPLATE_PATH}font/fontello.ttf?42047096') format('truetype'),
-         url('{TEMPLATE_PATH}font/fontello.svg?42047096#fontello') format('svg');
+    src: url('{TEMPLATE_PATH}font/fontello.eot?75326932');
+    src: url('{TEMPLATE_PATH}font/fontello.eot?75326932#iefix') format('embedded-opentype'),
+         url('{TEMPLATE_PATH}font/fontello.woff?75326932') format('woff'),
+         url('{TEMPLATE_PATH}font/fontello.ttf?75326932') format('truetype'),
+         url('{TEMPLATE_PATH}font/fontello.svg?75326932#fontello') format('svg');
     font-weight: normal;
     font-style: normal;
 }
@@ -400,6 +400,8 @@ nav ol {
 .icon-cancel:before { content: '\e811'; }
 .icon-rss:before { content: '\e812'; }
 .icon-attention-circled:before { content: '\e813'; }
+.icon-toggle-off:before { content: '\e814'; }
+.icon-toggle-on:before { content: '\e815'; }
 .icon-filter:before { content: '\e817'; }
 .icon-resize-full:before { content: '\e818'; }
 .icon-menu:before { content: '\e819'; }