From 885150daac490784ebb1356ffa3942efe226bab1 Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Tue, 4 Jun 2013 12:16:26 +0200
Subject: [PATCH 1/4] fix category icon selector window.open with &amp; lead to
 filename_only being lost, so additional options were shown

---
 templates/2k11/admin/serendipity_editor.js.tpl | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl
index 49b5e4d4..05352fc0 100644
--- a/templates/2k11/admin/serendipity_editor.js.tpl
+++ b/templates/2k11/admin/serendipity_editor.js.tpl
@@ -691,7 +691,7 @@ function highlightComment(id, checkvalue) {
     }
 
     $('#insert_image').click(function(e) {
-        window.open('serendipity_admin_image_selector.php?serendipity[htmltarget]=category_icon&amp;serendipity[filename_only]=true', 
+        window.open('serendipity_admin_image_selector.php?serendipity[htmltarget]=category_icon&serendipity[filename_only]=true', 
                     'ImageSel', 
                     'width=800,height=600,toolbar=no,scrollbars=1,scrollbars,resize=1,resizable=1');
     });

From bc6f48e1b681808fb6f6b9819b034773649d886d Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Tue, 4 Jun 2013 15:53:00 +0200
Subject: [PATCH 2/4] instant reaction from media filter buttons

---
 templates/2k11/admin/serendipity_editor.js.tpl | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/templates/2k11/admin/serendipity_editor.js.tpl b/templates/2k11/admin/serendipity_editor.js.tpl
index 05352fc0..719fe601 100644
--- a/templates/2k11/admin/serendipity_editor.js.tpl
+++ b/templates/2k11/admin/serendipity_editor.js.tpl
@@ -752,4 +752,10 @@ function highlightComment(id, checkvalue) {
             });
         }
     });
+
+    // MediaDB-Filter-Buttons should react instantly
+    $('input[name="serendipity[filter][fileCategory]"]').on('change', function() {
+        $('#media_library_control').submit();
+    });
+    
 })(jQuery);

From e3a126af542e62e2516c2770a51bf61be47b9028 Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Tue, 4 Jun 2013 16:45:05 +0200
Subject: [PATCH 3/4] media_pane: Move filters from sort-order to filters

---
 templates/2k11/admin/media_pane.tpl | 107 ++++++++++++++--------------
 1 file changed, 53 insertions(+), 54 deletions(-)

diff --git a/templates/2k11/admin/media_pane.tpl b/templates/2k11/admin/media_pane.tpl
index 75bba529..608df76b 100644
--- a/templates/2k11/admin/media_pane.tpl
+++ b/templates/2k11/admin/media_pane.tpl
@@ -3,7 +3,7 @@
 <div class="has_toolbar">
     <h2>{$CONST.FIND_MEDIA}</h2>
 
-    <form method="get" action="?">
+    <form id="media_library_control" method="get" action="?">
         {$media.token}
         {$media.form_hidden}
         <ul class="filters_toolbar plainList">
@@ -25,6 +25,58 @@
             <legend class="visuallyhidden">{$CONST.FILTERS}</legend>
 
             <div id="media_filter" class="clearfix">
+                {foreach from=$media.sort_order item="so_val" key="so_key"}
+                    <div class="{cycle values="left,center,right"}">
+                    {if $so_val.type == 'date' || $so_val.type == 'intrange'}
+                        <fieldset>
+                            <legend><span>{$CONST.SORT_BY} ({$so_key})</span></legend>
+                    {else}
+                        <div class="form_{if $so_val.type == 'authors'}select{else}field{/if}">
+                            <label for="serendipity_filter_{$so_key}">{$so_val.desc}</label>
+                    {/if}
+                    {if $so_val.type == 'date'}
+                        {if $media.filter[$so_key].from != '' OR $media.filter[$so_key].to != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
+                            <div class="form_field">
+                                {* Core might need to be adapted to input[type=date] *}
+                                {* date is not ideal, should be datetime – but datetime isn't properly supported *}
+                                {* by browsers yet, so we probably need a JS widget (jQuery UI?) for this …      *}
+                                <label for="serendipity_filter_{$so_key}_from" class="visuallyhidden">From</label> {* i18n *}
+                                <input id="serendipity_filter_{$so_key}_from" name="serendipity[filter][{$so_key}][from]" type="date" value="{$media.filter[$so_key].from|@escape}">
+                                 - 
+                                <label for="serendipity_filter_{$so_key}_to" class="visuallyhidden">To</label> {* i18n *}
+                                <input id="serendipity_filter_{$so_key}_to" name="serendipity[filter][{$so_key}][to]" type="date" value="{$media.filter[$so_key].to|@escape}">
+                                {* <span class="input_hint">(DD.MM.YYYY | YYYY-MM-DD | MM/DD/YYYY)</span> *}
+                            </div>
+                    {elseif $so_val.type == 'intrange'}
+                        {if $media.filter[$so_key].from != '' OR $media.filter[$so_key].to != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
+                            <div class="form_field">
+                                {* Could also use input[type=range]; unsure if that's actually useful (yet) *}
+                                <label for="serendipity_filter_{$so_key}_from" class="visuallyhidden">From</label> {* i18n *}
+                                <input id="serendipity_filter_{$so_key}_from" name="serendipity[filter][{$so_key}][from]" type="text" value="{$media.filter[$so_key].from|@escape}">
+                                 - 
+                                <label for="serendipity_filter_{$so_key}_to" class="visuallyhidden">To</label> {* i18n *}
+                                <input id="serendipity_filter_{$so_key}_to" name="serendipity[filter][{$so_key}][to]" type="text" value="{$media.filter[$so_key].to|@escape}">
+                            </div>
+                    {elseif $so_val.type == 'authors'}
+                        {if $media.filter[$so_key] != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
+                            <select id="serendipity_filter_{$so_key}" name="serendipity[filter][{$so_key}]">
+                                <option value="">{$CONST.ALL_AUTHORS}</option>
+                            {foreach from=$media.authors item="media_author"}
+                                <option value="{$media_author.authorid}"{if $media.filter[$so_key] == $media_author.authorid} selected{/if}>{$media_author.realname|@escape}</option>
+                            {/foreach}
+                            </select>
+                    {else}
+                        {if $media.filter[$so_key] != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
+                            {* TODO: needs a label … but what IS this? *}
+                            <input id="serendipity_filter_{$so_key}" name="serendipity[filter][{$so_key}]" type="text" value="{$media.filter[$so_key]|@escape}">
+                    {/if}
+                    {if $so_val.type == 'date' || $so_val.type == 'intrange'}
+                        </fieldset>
+                    {else}
+                        </div>
+                    {/if}
+                    </div>
+                {/foreach}
                 <div id="media_filter_path" class="form_select">
                     <label for="serendipity_only_path">{$CONST.FILTER_DIRECTORY}</label>
                     <select id="serendipity_only_path" name="serendipity[only_path]">
@@ -55,59 +107,6 @@
 {* {if $media.keywords_selected != ''}<script>showFilters();</script>{/if} *}
         <fieldset id="media_pane_sort" class="additional_info">
             <legend class="visuallyhidden">{$CONST.SORT_ORDER}</legend>
-
-        {foreach from=$media.sort_order item="so_val" key="so_key"}
-            <div class="{cycle values="left,center,right"}">
-            {if $so_val.type == 'date' || $so_val.type == 'intrange'}
-                <fieldset>
-                    <legend><span>{$CONST.SORT_BY} ({$so_key})</span></legend>
-            {else}
-                <div class="form_{if $so_val.type == 'authors'}select{else}field{/if}">
-                    <label for="serendipity_filter_{$so_key}">{$so_val.desc}</label>
-            {/if}
-            {if $so_val.type == 'date'}
-                {if $media.filter[$so_key].from != '' OR $media.filter[$so_key].to != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
-                    <div class="form_field">
-                        {* Core might need to be adapted to input[type=date] *}
-                        {* date is not ideal, should be datetime – but datetime isn't properly supported *}
-                        {* by browsers yet, so we probably need a JS widget (jQuery UI?) for this …      *}
-                        <label for="serendipity_filter_{$so_key}_from" class="visuallyhidden">From</label> {* i18n *}
-                        <input id="serendipity_filter_{$so_key}_from" name="serendipity[filter][{$so_key}][from]" type="date" value="{$media.filter[$so_key].from|@escape}">
-                         - 
-                        <label for="serendipity_filter_{$so_key}_to" class="visuallyhidden">To</label> {* i18n *}
-                        <input id="serendipity_filter_{$so_key}_to" name="serendipity[filter][{$so_key}][to]" type="date" value="{$media.filter[$so_key].to|@escape}">
-                        {* <span class="input_hint">(DD.MM.YYYY | YYYY-MM-DD | MM/DD/YYYY)</span> *}
-                    </div>
-            {elseif $so_val.type == 'intrange'}
-                {if $media.filter[$so_key].from != '' OR $media.filter[$so_key].to != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
-                    <div class="form_field">
-                        {* Could also use input[type=range]; unsure if that's actually useful (yet) *}
-                        <label for="serendipity_filter_{$so_key}_from" class="visuallyhidden">From</label> {* i18n *}
-                        <input id="serendipity_filter_{$so_key}_from" name="serendipity[filter][{$so_key}][from]" type="text" value="{$media.filter[$so_key].from|@escape}">
-                         - 
-                        <label for="serendipity_filter_{$so_key}_to" class="visuallyhidden">To</label> {* i18n *}
-                        <input id="serendipity_filter_{$so_key}_to" name="serendipity[filter][{$so_key}][to]" type="text" value="{$media.filter[$so_key].to|@escape}">
-                    </div>
-            {elseif $so_val.type == 'authors'}
-                {if $media.filter[$so_key] != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
-                    <select id="serendipity_filter_{$so_key}" name="serendipity[filter][{$so_key}]">
-                        <option value="">{$CONST.ALL_AUTHORS}</option>
-                    {foreach from=$media.authors item="media_author"}
-                        <option value="{$media_author.authorid}"{if $media.filter[$so_key] == $media_author.authorid} selected{/if}>{$media_author.realname|@escape}</option>
-                    {/foreach}
-                    </select>
-            {else}
-                {if $media.filter[$so_key] != ''}{assign var="show_filter" value=$media.filter[$so_key]}{/if}
-                    {* TODO: needs a label … but what IS this? *}
-                    <input id="serendipity_filter_{$so_key}" name="serendipity[filter][{$so_key}]" type="text" value="{$media.filter[$so_key]|@escape}">
-            {/if}
-            {if $so_val.type == 'date' || $so_val.type == 'intrange'}
-                </fieldset>
-            {else}
-                </div>
-            {/if}
-            </div>
-        {/foreach}
             <div class="clearfix">
                 <div class="form_select">
                     <label for="serendipity_sortorder_order">{$CONST.SORT_BY}</label>

From 566359a20f755b9588d0fba5239e971ee40bedce Mon Sep 17 00:00:00 2001
From: onli <onli89@googlemail.com>
Date: Tue, 4 Jun 2013 17:31:39 +0200
Subject: [PATCH 4/4] test: filecategory-buttons as header bar

---
 templates/2k11/admin/media_pane.tpl | 15 ++++++++-------
 templates/2k11/admin/style.css      | 10 ++++++++++
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/templates/2k11/admin/media_pane.tpl b/templates/2k11/admin/media_pane.tpl
index 608df76b..04c31209 100644
--- a/templates/2k11/admin/media_pane.tpl
+++ b/templates/2k11/admin/media_pane.tpl
@@ -12,13 +12,6 @@
         {if $media.show_upload}
             <li><input type="button" value="{$CONST.ADD_MEDIA|@escape}" onclick="location.href='{$media.url}&amp;serendipity[adminAction]=addSelect&amp;serendipity[only_path]={$media.only_path|escape:url}'; return false"></li>
         {/if}
-            <li><input type="radio" id="serendipity[filter][fileCategory][All]" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == ""}checked{/if} value=""></input>
-                <label for="serendipity[filter][fileCategory][All]" class="media_selector button_link">All</label>
-                <input id="serendipity[filter][fileCategory][Image]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "image"}checked{/if} value="image"></input>
-                <label for="serendipity[filter][fileCategory][Image]" class="media_selector button_link">{$CONST.IMAGE}</label>
-                <input id="serendipity[filter][fileCategory][Video]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "video"}checked{/if} value="video"></input>
-                <label for="serendipity[filter][fileCategory][Video]" class="media_selector button_link">{$CONST.VIDEO}</label>
-            </li>
         </ul>
 
         <fieldset id="media_pane_filter" class="additional_info">
@@ -142,6 +135,14 @@
                 <input name="go" type="submit" value="{$CONST.GO}">
             </div>
         </fieldset>
+        <fieldset id="media_selector_bar">
+            <input type="radio" id="serendipity[filter][fileCategory][All]" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == ""}checked{/if} value=""></input>
+            <label for="serendipity[filter][fileCategory][All]" class="media_selector">All</label>
+            <input id="serendipity[filter][fileCategory][Image]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "image"}checked{/if} value="image"></input>
+            <label for="serendipity[filter][fileCategory][Image]" class="media_selector">{$CONST.IMAGE}</label>
+            <input id="serendipity[filter][fileCategory][Video]" type="radio" name="serendipity[filter][fileCategory]" {if $media.filter.fileCategory == "video"}checked{/if} value="video"></input>
+            <label for="serendipity[filter][fileCategory][Video]" class="media_selector">{$CONST.VIDEO}</label>
+        </fieldset>
     </form>
 </div>
 {if $media.nr_files < 1}
diff --git a/templates/2k11/admin/style.css b/templates/2k11/admin/style.css
index 838ebc00..7edbd798 100644
--- a/templates/2k11/admin/style.css
+++ b/templates/2k11/admin/style.css
@@ -1466,6 +1466,9 @@ input[name="serendipity[filter][fileCategory]"] {
 
 .media_selector {
     cursor: pointer;
+    display: inline-block;
+    padding: 0.6em;
+    border: 1px solid #aaa;
 }
 
 input:checked + .media_selector {
@@ -1480,6 +1483,13 @@ input:checked + .media_selector {
     border-color: #999 #bbb #ddd;
 }
 
+#media_selector_bar {
+    background: #eee;
+    padding: 0.3em;
+    margin: 0.5em 2% 0.2em 0;
+    border: 1px solid #aaa;
+}
+
 
 /* SMALL SCREEN (e.g. smartphones)
    ----------------------------------------------------------------- */