Bug 9420 [Revised] Work on Bootstrap for Koha: Circ toolbar

This patch converts the toolbar include file used by Circ and
Patron pages to Bootstrap, replacing YUI button and menu code
with Bootstrap markup.

To test, view any page in circ/ or members/ which uses
members-toolbar.inc (circulation.pl, moremember.pl, etc).
Buttons and menus should look correct and work correctly.

This version adds icons to the toolbar from the icon sprite included
with Bootstrap and revises the sprite to include two new ones, for
"copy" and "place hold" (for use in later patch). This customized
version is left in intranet-tmpl/img in order to keep
koha-tmpl/lib/bootstrap free of customized files.

Also added in this patch, a CSS tweak to override a style in the default
Bootstrap CSS for a class "close" which is already in use by Koha. To
replicate the Boostrap "close" class use "closebtn"

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Comment: All buttons works, and they look good.
Tested with Chrome and Firefox. In Chrome I see the buttons with
drop-down a little (1px) below the others.
In Firefox the alignment is ok.
No errors.

Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>

diff --git a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
index 405dd0d..e95c60f 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
+++ b/koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css
@@ -2401,6 +2401,19 @@ video {
     border-color : #ADADAD #ADADAD #949494;
 
 }
+
+.btn-small .caret {
+    margin-top : .6em;
+}
+
+.icon-hold {
+    background-position:-24px -166px;
+}
+
+.icon-copy {
+    background-position:-3px -166px;
+}
+
 #toolbar .btn,
 #toolbar .dropdown-menu {
     font-size: 13px;
@@ -2412,7 +2425,7 @@ a.btn:visited{
 .dropdown-menu li {
     list-style: none outside none;
 }
-[class^="icon-"],[class*=" icon-"]{background-image:url("../../img/glyphicons-halflings.png");}
+[class^="icon-"],[class*=" icon-"]{background-image:url("../../img/glyphicons-halflings-koha.png");}
 .icon-white,.nav-tabs>.active>a>[class^="icon-"],.nav-tabs>.active>a>[class*=" icon-"],.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"]{background-image:url("../../img/glyphicons-halflings-white.png");}
 a.disabled {
     color : #999999;
@@ -2509,3 +2522,29 @@ a.disabled {
     font-size : 120%;
 }
 .separator { color : #666; padding : 0 .2em; }
+
+.close {
+    position: inherit;
+    top: auto;
+    right : auto;
+    line-height: inherit;
+    filter : none;
+    float : none;
+    font-size: inherit;
+    font-weight: normal;
+    opacity: inherit;
+    text-shadow: none;
+}
+
+.close:hover {
+    color: #538200;
+    filter: inherit;
+    opacity: inherit;
+}
+
+/* Redefine a new style for Bootstrap's class "close" since we use that already */
+/* Use <a class="closebtn" href="#">&times;</a> */
+.alert .closebtn{position:relative;top:-2px;right:-21px;line-height:20px;}
+.modal-header .closebtn{margin-top:2px;}
+.closebtn{float:right;font-size:20px;font-weight:bold;line-height:20px;color:#000000;text-shadow:0 1px 0 #ffffff;opacity:0.2;filter:alpha(opacity=20);}.closebtn:hover{color:#000000;text-decoration:none;cursor:pointer;opacity:0.4;filter:alpha(opacity=40);}
+button.closebtn{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none;}

diff --git a/koha-tmpl/intranet-tmpl/prog/en/includes/members-toolbar.inc b/koha-tmpl/intranet-tmpl/prog/en/includes/members-toolbar.inc
index bfa923d..3bdcec8 100644 (file)
--- a/koha-tmpl/intranet-tmpl/prog/en/includes/members-toolbar.inc
+++ b/koha-tmpl/intranet-tmpl/prog/en/includes/members-toolbar.inc
@@ -1,7 +1,48 @@
-<div id="toolbar">
-    <script type="text/javascript">
-    //<![CDATA[
-[% IF ( CAN_user_borrowers ) %]
+<script type="text/javascript">
+//<![CDATA[
+$(document).ready(function(){
+    [% IF ( CAN_user_borrowers ) %]
+        $("#deletepatron").click(function(){
+                confirm_deletion();
+                $(".btn-group").removeClass("open");
+                return false;
+            });
+        $("#renewpatron").click(function(){
+            confirm_reregistration();
+            $(".btn-group").removeClass("open");
+            return false;
+        });
+        [% IF ( is_child ) %]$("#updatechild").click(function(){
+            update_child();
+            $(".btn-group").removeClass("open");
+        });[% END %]
+    [% END %]
+
+    $("#exportcheckins").click(function(){
+        export_barcodes();
+        $(".btn-group").removeClass("open");
+        return false;
+    });
+    $("#printsummary").click(function(){
+        printx_window("page");
+        $(".btn-group").removeClass("open");
+        return false;
+    });
+    $("#printslip").click(function(){
+        printx_window("slip");
+        $(".btn-group").removeClass("open");
+        return false;
+    });
+    $("#printquickslip").click(function(){
+        printx_window("qslip");
+        $(".btn-group").removeClass("open");
+        return false;
+    });
+    $("#searchtohold").click(function(){
+        searchToHold();
+        return false;
+    })
+});
 function confirm_deletion() {
     var is_confirmed = window.confirm(_("Are you sure you want to delete this patron? This cannot be undone."));
     if (is_confirmed) {
@@ -17,120 +58,99 @@ function confirm_deletion() {
 }
 
 function update_child() {
-[% IF ( CATCODE_MULTI ) %]
- window.open('/cgi-bin/koha/members/update-child.pl?op=multi&borrowernumber=[% borrowernumber %]','UpdateChild','width=400,height=300,toolbar=no,scrollbars=yes,resizable=yes');
-[% ELSE %]
- confirm_updatechild();
+    [% IF ( CATCODE_MULTI ) %]
+        window.open('/cgi-bin/koha/members/update-child.pl?op=multi&borrowernumber=[% borrowernumber %]','UpdateChild','width=400,height=300,toolbar=no,scrollbars=yes,resizable=yes');
+    [% ELSE %]
+        confirm_updatechild();
+    [% END %]
+}
 [% END %]
-}[% ELSE %][% END %]
 
 function confirm_reregistration() {
     var is_confirmed = window.confirm(_("Are you sure you want to renew this patron's registration?"));
     if (is_confirmed) {
-       window.location = '/cgi-bin/koha/members/setstatus.pl?borrowernumber=[% borrowernumber %]&amp;cardnumber=[% cardnumber %]&amp;destination=[% destination %]&amp;reregistration=y';
+    window.location = '/cgi-bin/koha/members/setstatus.pl?borrowernumber=[% borrowernumber %]&amp;cardnumber=[% cardnumber %]&amp;desintation=[% destination %]&amp;reregistration=y';
     }
 }
 function export_barcodes() {
     window.open('/cgi-bin/koha/members/readingrec.pl?borrowernumber=[% borrowernumber %]&amp;op=export_barcodes');
 }
-[% END %]
-
-    // prepare DOM for YUI Toolbar
-
-     $(document).ready(function() {
-        $("#printslip,#patronflags,#deletepatron").parent().remove();
-        $("#moremenuc,#printmenuc,#searchtoholdc").empty();
-        yuiToolbar();
-     });
-
-    // YUI Toolbar Functions
-    var slip_re = /slip/;
-    function printx_window(print_type) {
-        var handler = print_type.match(slip_re) ? "printslip" : "moremember";
-        window.open("/cgi-bin/koha/members/" + handler + ".pl?borrowernumber=[% borrowernumber %]&amp;print=" + print_type, "printwindow");
-        return false;
-    }
-    function searchToHold(){
-        var date = new Date();
-        date.setTime(date.getTime() + (10 * 60 * 1000));
-        $.cookie("holdfor", "[% borrowernumber %]", { path: "/", expires: date });
-        location.href="/cgi-bin/koha/catalogue/search.pl";
-    }
-    function yuiToolbar() {
-        var printmenu = [
-            { text: _("Print summary"), onclick: {fn: function(){printx_window("page")}} },
-            { text: _("Print slip"), onclick: {fn: function(){printx_window("slip")}} },
-            { text: _("Print quick slip"), onclick: {fn: function(){printx_window("qslip")}} }
-        ];
-
-        var moremenu = [
-            { text: _("Renew patron"), [% UNLESS CAN_user_borrowers %]disabled: true, [% END %] onclick: { fn: confirm_reregistration } },
-            { text: _("Set permissions"), url: "/cgi-bin/koha/members/member-flags.pl?member=[% borrowernumber %]"[% UNLESS CAN_user_permissions %], disabled: true[% END %]},
-            { text: _("Delete"), [% UNLESS CAN_user_borrowers %]disabled: true, [% END %] onclick: { fn: confirm_deletion } },
-            { text: _("Update child to adult patron")[% IF is_child && CAN_user_borrowers %], onclick: { fn: update_child }[% ELSE %], disabled: true[% END %]},
-            { text: _("Export today's checked in barcodes"), [% UNLESS CAN_user_borrowers %]disabled: true, [% END %] onclick: { fn: export_barcodes }}
-        ];
-
-        new YAHOO.widget.Button({
-            type: "menu",
-            label: _("Print"),
-            name: "printmenubutton",
-            menu: printmenu,
-            container: "printmenuc"
-        });
-        new YAHOO.widget.Button({
-            id: "searchtohold",
-            type: "button",
-            label: _("Search to hold"),
-            container: "searchtoholdc",
-            onclick: {fn: searchToHold }
-        });
-        new YAHOO.widget.Button({
-            type: "menu",
-            label: _("More"),
-            name: "moremenubutton",
-            menu: moremenu,
-            container: "moremenuc"
-        });
-
-        [% IF ( CAN_user_borrowers ) %][% IF ( adultborrower ) %]new YAHOO.widget.Button("addchild");[% END %]
-        new YAHOO.widget.Button("editpatron");
-        new YAHOO.widget.Button("changepassword");
-        new YAHOO.widget.Button("duplicate");[% END %]
-        new YAHOO.widget.Button("printslip");
-        new YAHOO.widget.Button("printpage");
-    }
+var slip_re = /slip/;
+function printx_window(print_type) {
+    var handler = print_type.match(slip_re) ? "printslip" : "moremember";
+    window.open("/cgi-bin/koha/members/" + handler + ".pl?borrowernumber=[% borrowernumber %]&amp;print=" + print_type, "printwindow");
+    return false;
+}
+function searchToHold(){
+    var date = new Date();
+    date.setTime(date.getTime() + (10 * 60 * 1000));
+    $.cookie("holdfor", "[% borrowernumber %]", { path: "/", expires: date });
+    location.href="/cgi-bin/koha/catalogue/search.pl";
+}
+//]]>
+</script>
 
-    //]]>
-    </script>
-    <ul class="toolbar">
+<div id="toolbar" class="btn-toolbar">
     [% IF ( CAN_user_borrowers ) %]
         [% IF ( category_type ) %]
             [% IF ( guarantor ) %]
-                <li><a id="editpatron" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=[% destination %]&amp;borrowernumber=[% borrowernumber %]&amp;guarantorid=[% guarantorborrowernumber %]&amp;category_type=[% category_type %]">
+                <a id="editpatron" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=circ&amp;borrowernumber=[% borrowernumber %]&amp;guarantorid=[% guarantorborrowernumber %]&amp;category_type=[% category_type %]">
             [% ELSE %]
-            <li><a id="editpatron" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=[% destination %]&amp;borrowernumber=[% borrowernumber %]&amp;category_type=[% category_type %]">
-            [% END %]Edit</a></li>
+                <a id="editpatron" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=circ&amp;borrowernumber=[% borrowernumber %]&amp;category_type=[% category_type %]">
+            [% END %]
+                <i class="icon-pencil"></i> Edit</a>
         [% ELSE %] <!-- try with categorycode if no category_type -->
             [% IF ( categorycode ) %]
-            <li><a id="editpatron" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=[% destination %]&amp;borrowernumber=[% borrowernumber %]&amp;categorycode=[% categorycode %]">Edit</a></li>
+                <a id="editpatron" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=circ&amp;borrowernumber=[% borrowernumber %]&amp;categorycode=[% categorycode %]"><i class="icon-pencil"></i> Edit</a>
             [% ELSE %] <!-- if no categorycode, set category_type to A by default -->
-                <li><a id="editpatron" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=[% destination %]&amp;borrowernumber=[% borrowernumber %]&amp;category_type=A">Edit</a></li>
+                <a id="editpatron" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=modify&amp;destination=circ&amp;borrowernumber=[% borrowernumber %]&amp;category_type=A"><i class="icon-pencil"></i> Edit</a>
             [% END %]
         [% END %]
-        [% IF ( adultborrower AND activeBorrowerRelationship ) %]<li><a id="addchild" href="/cgi-bin/koha/members/memberentry.pl?op=add&amp;guarantorid=[% borrowernumber %]&amp;category_type=C">Add child</a></li>[% END %]
-        <li><a id="changepassword" href="/cgi-bin/koha/members/member-password.pl?member=[% borrowernumber %]">Change password</a></li>
-        <li><a id="duplicate" href="/cgi-bin/koha/members/memberentry.pl?op=duplicate&amp;borrowernumber=[% borrowernumber %]&amp;category_type=[% category_type %]">Duplicate</a></li>
     [% END %]
-    <li id="printmenuc"><a id="printpage" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% borrowernumber %]&amp;print=page">Print summary</a></li>
-    <li><a id="printslip" href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% borrowernumber %]&amp;print=slip">Print slip</a></li>
-    <li id="searchtoholdc"><a id="searchtohold" href="#">Search to hold</a></li>
-    [% IF ( CAN_user_borrowers ) %]<li id="moremenuc"><a id="renewpatron" href="/cgi-bin/koha/members/moremember.pl?reregistration=y&amp;borrowernumber=[% borrowernumber %]">Renew account</a></li>[% END %]
-    [% IF ( CAN_user_permissions ) %]
-        [% IF ( CAN_user_staffaccess ) %]
-            <li><a id="patronflags" href="/cgi-bin/koha/members/member-flags.pl?member=[% borrowernumber %]">Set permissions</a></li>
+
+    [% IF ( CAN_user_borrowers ) %]
+        [% IF ( adultborrower AND activeBorrowerRelationship ) %]
+            <a id="addchild" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=add&amp;guarantorid=[% borrowernumber %]&amp;category_type=C"><i class="icon-plus"></i> Add child</a>
+        [% END %]
+        [% IF ( CAN_user_borrowers ) %]
+            <a id="changepassword" class="btn btn-small" href="/cgi-bin/koha/members/member-password.pl?member=[% borrowernumber %]"><i class="icon-lock"></i> Change password</a>
         [% END %]
     [% END %]
-    [% IF ( CAN_user_staffaccess ) %]<li><a id="deletepatron" href="#" onclick="confirm_deletion();">Delete</a></li>[% END %]
 
-</ul></div>
+    <a id="duplicate" class="btn btn-small" href="/cgi-bin/koha/members/memberentry.pl?op=duplicate&amp;borrowernumber=[% borrowernumber %]&amp;category_type=[% category_type %]"><i class="icon-copy"></i>Duplicate</a>
+    <div class="btn-group">
+        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><i class="icon-print"></i> Print <span class="caret"></span></button>
+            <ul class="dropdown-menu">
+                [% IF ( CAN_user_borrowers ) %]<li><a id="printsummary" href="#">Print summary</a></li>[% END %]
+                <li><a id="printslip" href="#">Print slip</a></li>
+                <li><a id="printquickslip" href="#">Print quick slip</a></li>
+            </ul>
+    </div>
+    <a id="searchtohold" class="btn btn-small" href="#"><i class="icon-search"></i> Search to hold</a>
+    <div class="btn-group">
+        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">More <span class="caret"></span></button>
+            <ul class="dropdown-menu">
+                [% IF ( CAN_user_borrowers ) %]
+                    <li><a id="renewpatron" href="/cgi-bin/koha/members/moremember.pl?reregistration=y&amp;borrowernumber=[% borrowernumber %]">Renew patron</a></li>
+                [% ELSE %]
+                    <li class="disabled"><a id="renewpatron" href="#">Renew patron</a></li>
+                [% END %]
+                [% IF ( CAN_user_permissions ) %]
+                    <li><a id="patronflags" href="/cgi-bin/koha/members/member-flags.pl?member=[% borrowernumber %]">Set permissions</a></li>
+                [% ELSE %]
+                    <li class="disabled"><a id="patronflags" href="#">Set permissions</a></li>
+                [% END %]
+                [% IF ( CAN_user_borrowers ) %]
+                    <li><a id="deletepatron" href="#">Delete</a></li>
+                [% ELSE %]
+                    <li class="disabled"><a id="deletepatron" href="#">Delete</a></li>
+                [% END %]
+                [% IF ( is_child ) %]
+                    <li><a id="updatechild" href="#">Update child to adult patron</a></li>
+                [% ELSE %]
+                    <li class="disabled"><a id="updatechild" href="#">Update child to adult patron</a></li></li>
+                [% END %]
+                <li><a id="exportcheckins" href="#">Export today's checked in barcodes</a></li>
+            </ul>
+    </div>
+</div>

diff --git a/koha-tmpl/intranet-tmpl/prog/img/glyphicons-halflings-koha.png b/koha-tmpl/intranet-tmpl/prog/img/glyphicons-halflings-koha.png
new file mode 100644 (file)
index 0000000..6bc0fe8
Binary files /dev/null and b/koha-tmpl/intranet-tmpl/prog/img/glyphicons-halflings-koha.png differ