[Koha-patches] [[PATCH][sysprefs_editor]] Reformat system pref sections as collapsible blocks
Owen Leonard
oleonard at myacpl.org
Thu Sep 10 16:39:23 CEST 2009
This patch breaks the single large tables with multiple header rows into multipl
e tables with separate headings for each. Clicking the heading collapses that section. The goal is to improve clarity when scanning through a large number of prefs.
---
.../intranet-tmpl/prog/en/css/preferences.css | 26 +++++++
.../prog/en/modules/admin/preferences.tmpl | 76 ++++++++++++-------
2 files changed, 74 insertions(+), 28 deletions(-)
diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/preferences.css b/koha-tmpl/intranet-tmpl/prog/en/css/preferences.css
index 54ff036..7d1ff87 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/css/preferences.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/preferences.css
@@ -23,3 +23,29 @@ textarea.preference-code, .preference-file {
a.expand-textarea {
display: block;
}
+
+table {
+ width : 100%;
+}
+
+caption {
+ color : #003399;
+}
+
+h3 {
+ color : #003366;
+ margin : .4em 0;
+ width : 25%;
+}
+
+h3.expanded {
+ background : transparent url("../../img/collapse.gif") 0 6px no-repeat;
+ cursor : pointer;
+ padding-left : 12px;
+}
+
+h3.collapsed {
+ background : transparent url("../../img/expand.gif") 0 6px no-repeat;
+ cursor : pointer;
+ padding-left : 12px;
+}
\ No newline at end of file
diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tmpl b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tmpl
index ecaf758..5bfeabf 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tmpl
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/admin/preferences.tmpl
@@ -1,14 +1,30 @@
<!-- TMPL_INCLUDE NAME="doc-head-open.inc" -->
<title>Koha › Administration › System Preferences</title>
<!-- TMPL_INCLUDE NAME="doc-head-close.inc" -->
-<link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang"-->/css/preferences.css">
-<link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang"-->/css/humanmsg.css">
+<link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang"-->/css/preferences.css" />
+<link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang"-->/css/humanmsg.css" />
<script src="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/humanmsg.js" type="text/javascript"></script>
<script src="<!-- TMPL_VAR NAME="themelang" -->/js/ajax.js" type="text/javascript"></script>
<script src="<!-- TMPL_VAR NAME="themelang" -->/js/pages/preferences.js" type="text/javascript"></script>
<script src="<!-- TMPL_VAR NAME="themelang" -->/lib/jquery/plugins/jquery.highlight-3.js" type="text/javascript"></script>
<script type="text/javascript">
- <!--
+//<![CDATA[
+ $(document).ready(function(){
+ $("h3").attr("class","expanded").attr("title",_("Click to expand this section"));
+ var collapsible = $(".collapsed,.expanded");
+
+ $(collapsible).toggle(function () {
+ $(this).addClass("collapsed").removeClass("expanded").attr("title",_("Click to expand this section"));
+ $(this).next("table").hide();
+ },
+ function () {
+ $(this).addClass("expanded").removeClass("collapsed").attr("title",_("Click to collapse this section"));
+ $(this).next("table").show();
+ }
+ );
+
+
+ });
<!-- TMPL_IF NAME="searchfield" -->
var to_highlight = "<!-- TMPL_VAR NAME="searchfield" ESCAPE="JS"-->";
@@ -21,7 +37,7 @@
} );
}
<!-- /TMPL_IF -->
- // -->
+//]]>
</script>
</head>
<body>
@@ -36,7 +52,7 @@
<div id="yui-main">
<div class="yui-b">
<div id="toolbar">
- <form action="/cgi-bin/koha/admin/preferences.pl" method="GET">
+ <form action="/cgi-bin/koha/admin/preferences.pl" method="get">
<input type="hidden" name="op" value="jump" />
<input type="hidden" name="tab" value="<!-- TMPL_VAR NAME="tab" -->" />
<label for="jumpfield">Jump to named preference:</label>
@@ -45,8 +61,8 @@
</form>
</div>
- <h1>System preferences</h1>
<!-- TMPL_IF NAME="jump_not_found" -->
+ <h2>System preferences</h2>
<div class="dialog error">
Could not find a system preference named <code><!-- TMPL_VAR NAME="jumpfield" --></code>.
</div>
@@ -59,33 +75,34 @@
<!-- TMPL_LOOP NAME="TABS" -->
<div class="prefs-tab">
<h2><!-- TMPL_VAR NAME="tab_title" --> preferences</h2>
- <form action="/cgi-bin/koha/admin/preferences.pl" method="POST">
+ <form action="/cgi-bin/koha/admin/preferences.pl" method="post">
<input type="hidden" name="op" value="save" />
<input type="hidden" name="tab" value="<!-- TMPL_VAR NAME="tab" -->" />
- <table>
- <thead><tr><th>Preference</th><th>Value</th></tr></thead>
<!-- TMPL_LOOP NAME="LINES" -->
<!-- TMPL_IF NAME="is_group_title" -->
- <!-- TMPL_UNLESS NAME="__first__" --></tbody><!-- /TMPL_UNLESS -->
- <thead>
- <!-- TMPL_IF NAME="highlighted" -->
- <tr><th colspan="2"><span class="term"><!-- TMPL_VAR NAME="title" --></span></th></tr>
+ <!-- TMPL_IF NAME="__first__" -->
+ <h3><!-- TMPL_IF NAME="highlighted" -->
+ <span class="term"><!-- TMPL_VAR NAME="title" --></span>
<!-- TMPL_ELSE -->
- <tr><th colspan="2"><!-- TMPL_VAR NAME="title" --></th></tr>
- <!-- /TMPL_IF -->
- </thead>
+ <!-- TMPL_VAR NAME="title" -->
+ <!-- /TMPL_IF --></h3><table><!-- TMPL_ELSE --></tbody></table>
+ <h3><!-- TMPL_IF NAME="highlighted" -->
+ <span class="term"><!-- TMPL_VAR NAME="title" --></span>
+ <!-- TMPL_ELSE -->
+ <!-- TMPL_VAR NAME="title" -->
+ <!-- /TMPL_IF --></h3><table><!-- /TMPL_IF -->
+ <thead><tr><th>Preference</th><th>Value</th></tr></thead>
<!-- TMPL_UNLESS NAME="__last__" --><tbody><!-- /TMPL_UNLESS -->
<!-- TMPL_ELSE -->
- <!-- TMPL_IF NAME="__first__" --><tbody><!-- /TMPL_IF -->
+ <!-- TMPL_IF NAME="__first__" --><table><thead><tr><th>Preference</th><th>Value</th></tr></thead><tbody><!-- /TMPL_IF -->
<tr>
<td class="name-cell">
<code>
<!-- TMPL_LOOP NAME="NAMES" -->
<label for="pref_<!-- TMPL_VAR NAME="name" -->">
<!-- TMPL_IF NAME="highlighted" -->
- <a name="highlighted"></a>
- <span class="term"><!-- TMPL_VAR NAME="name" --></span>
+ <span class="term" id="highlighted"><!-- TMPL_VAR NAME="name" --></span>
<!-- TMPL_ELSE -->
<!-- TMPL_VAR NAME="name" -->
<!-- /TMPL_IF -->
@@ -120,39 +137,42 @@
<a class="expand-textarea" style="display: none" href="#">Click to Edit</a>
<textarea name="pref_<!-- TMPL_VAR NAME="name" -->" id="pref_<!-- TMPL_VAR NAME="name" -->" class="preference preference-<!-- TMPL_VAR NAME="class" DEFAULT="short" -->"><!-- TMPL_VAR NAME="value" --></textarea>
<!-- TMPL_ELSIF NAME="type_languages" -->
- <table>
+ <dl>
<!-- TMPL_LOOP NAME="languages" -->
- <tr><td>
+ <dt>
<!-- TMPL_IF NAME="plural" -->
- <!-- TMPL_IF NAME="native_description" --><!-- TMPL_VAR NAME="native_description" --><!-- TMPL_ELSE --><!-- TMPL_VAR NAME="rfc4646_subtag" --><!-- /TMPL_IF -->
- <!-- TMPL_LOOP NAME="sublanguages_loop" --><table><tr><td>
+ <dt>
+<!-- TMPL_IF NAME="native_description" --><!-- TMPL_VAR NAME="native_description" --><!-- TMPL_ELSE --><!-- TMPL_VAR NAME="rfc4646_subtag" --><!-- /TMPL_IF -->
+</dt>
+ <!-- TMPL_LOOP NAME="sublanguages_loop" --><dd>
<label for="<!-- TMPL_VAR NAME="rfc4646_subtag" -->"><!-- TMPL_VAR NAME="native_description" --> <!-- TMPL_VAR NAME="script_description" --> <!-- TMPL_VAR NAME="region_description" --> <!-- TMPL_VAR NAME="variant_description" -->(<!-- TMPL_VAR NAME="rfc4646_subtag" -->)</label>
<!-- TMPL_IF NAME="enabled" -->
<input value="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" name="pref_<!-- TMPL_VAR NAME="name" -->" id="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" type="checkbox" checked="checked" />
<!-- TMPL_ELSE -->
<input value="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" name="pref_<!-- TMPL_VAR NAME="name" -->" id="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" type="checkbox" />
<!-- /TMPL_IF -->
+ </dd>
<!-- /TMPL_LOOP -->
<!-- TMPL_ELSE -->
+ <dt>
<label for="<!-- TMPL_VAR NAME="rfc4646_subtag" -->"><!-- TMPL_VAR NAME="native_description" -->(<!-- TMPL_VAR NAME="rfc4646_subtag" -->)</label>
<!-- TMPL_IF NAME="group_enabled" -->
<input value="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" name="pref_<!-- TMPL_VAR NAME="name" -->" id="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" type="checkbox" checked="checked" />
<!-- TMPL_ELSE -->
<input value="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" name="pref_<!-- TMPL_VAR NAME="name" -->" id="<!-- TMPL_VAR NAME="rfc4646_subtag" -->" type="checkbox" />
<!-- /TMPL_IF -->
+ </dt>
<!-- /TMPL_IF -->
- </td></tr>
<!-- /TMPL_LOOP -->
- </table>
+ </dl>
<!-- /TMPL_IF -->
<!-- /TMPL_LOOP -->
</td>
</tr>
- <!-- TMPL_IF NAME="__last__" --></tbody><!-- /TMPL_IF -->
+ <!-- TMPL_IF NAME="__last__" --></tbody></table><!-- /TMPL_IF -->
<!-- /TMPL_IF -->
<!-- /TMPL_LOOP -->
- </table>
- <button class="save-all submit" type="submit">Save All</button>
+ <fieldset class="action"><button class="save-all submit" type="submit">Save all <!-- TMPL_VAR NAME="tab_title" --> preferences</button> <a href="/cgi-bin/koha/admin/preferences.pl?tab=<!-- TMPL_VAR NAME="tab" -->" class="cancel">Cancel</a></fieldset>
</form>
</div>
<!-- /TMPL_LOOP -->
--
1.5.6.5
More information about the Koha-patches
mailing list