Created attachment 14691 [details] [review] First Commit Patch As stated in my git commit message, I have started work on Koha which involves using Bootstrap. The first implemented change is the top navi bar, which had no sense of design and had users using Screen Readers having a hard time (trying to access the thing). I have been informed that Owen has started to experiment with Bootstrap for Koha as well, people are welcome to contribute to this new Project to, overall, improve the appearance of the Staff Client in Koha. This project was made during the Catalyst IT Open Source Academy (2013) by student - Corey Fuimaono (MrAgent075).
I pushed a version of this to my Gitorious repo at http://gitorious.org/koha-dev/koha-dev in a branch called ip-bug-9420-bootstrap-header-2012-01-25. The differences are mostly cosmetic, with the main menu changes from the branch I was working on before along with the user menu changes introduced by Corey's patch. TODO: Incorporate usage of Bootstrap's Tooltip feature to implement the Cart popup which is shown during Cart operations.
Created attachment 14905 [details] [review] Bug 9420 - Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup.
Created attachment 14906 [details] [review] Bug 9420 - Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Signed-off-by: Liz Rea <liz@catalyst.net.nz> I am not sure I like the vertical bar between the username and the branch (it's weird to a screen reader), but I do definitely like a lot about this, and it can be refined.
Corey - Get in touch with me for how to get this patch and apply it to your development environment, once you get that set up. - Liz
Created attachment 14910 [details] [review] [Passed QA] Bug 9420 - Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Signed-off-by: Liz Rea <liz@catalyst.net.nz> I am not sure I like the vertical bar between the username and the branch (it's weird to a screen reader), but I do definitely like a lot about this, and it can be refined. Signed-off-by: Elliott Davis <elliott@bywatersolions.com> Looks good to me. Seems to introduce no new bugs. Maintains styling consistency for the most part. Removes Crusty YUI code
Bootstrap is so cool that I am taking a break from my vacation to look at it! I have only one objection: Bootstrap is under the themelanguage directory. I think we are trying to move this sort of library outside of theme and language directories. (unfortunately this will require a revised patch instead of a follow-up) Otherwise, looks great! (there is space missing between the menu bar and the breadcrumbs on the advanced search page, but that could be dealt with later)
Created attachment 14916 [details] [review] Bug 9420 [Revised] Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Revision moves the Bootstrap assets out of the prog template into koha-tmpl/intranet-tmpl/lib.
Created attachment 14927 [details] [review] [SIGNED-OFF] Bug 9420 [Revised] Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Revision moves the Bootstrap assets out of the prog template into koha-tmpl/intranet-tmpl/lib. Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com> Works great. No errors.
Created attachment 14928 [details] [review] Bug 9420 - 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 patch is preliminary. This patch does not include final styling of the buttons, which lack icons to match the YUI version. Some icons have been chosen from the default Bootstrap set to demonstrate the functionality. Comments welcome.
I prefer the bootstrap icons. I would sign off on that - I think the styling is fine. :LR
Created attachment 14982 [details] [review] 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"
Created attachment 14987 [details] [review] [SIGNED-OFF] 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.
Created attachment 15192 [details] [review] Bug 9420 [Revised] Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Revision moves the Bootstrap assets out of the prog template into koha-tmpl/intranet-tmpl/lib. Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com> Works great. No errors.
Created attachment 15194 [details] [review] 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.
New patches are rebased against current master, fixing minor conflicts.
QA comment: I am a little bit embarrassed, I did not find anything to say about this big patch :) It is a great patch ! According to the many modifications a side effect is possible, but I think it is in the interest of everyone to have this patch in master asap. In this way there will be many testers and side effects will be easier to catch. Marked as Passed QA.
Created attachment 15323 [details] [review] Bug 9420 [Revised] Work on Bootstrap for Koha YUI JS is deprecated as far as Koha is concerned, and jQueryUI menus don't seem to be as robust as they should be. This makes Twitter Bootstrap very attrative for its menus features as well as other aspects. This patch revises the staff client header menu to include features from Bootstrap, including replacement of the YUI-driven "More..." menu with a Bootstrap version, and a new user menu taken from Corey Fuimaono's similar patch. To test, be sure to clear your cache after applying the patch. Load any page in the staff client and confirm that the menu at the top of the screen looks correct and works as normal, including functionality of the "more" menu. Confirm that the username/logged-in branch triggers a menu with "set library" and "log out" options. Confirm that Cart operations trigger the correct confirmation popup. Revision moves the Bootstrap assets out of the prog template into koha-tmpl/intranet-tmpl/lib. Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com> Works great. No errors. Signed-off-by: Jonathan Druart <jonathan.druart@biblibre.com>
Created attachment 15324 [details] [review] 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>
This patch has been pushed to master.
Bug 9653 seems to be related with this one pushed to master.