[Bug 43576] New: Add icon-only collapsed mode to staff interface sidebar menus
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Bug ID: 43576 Summary: Add icon-only collapsed mode to staff interface sidebar menus Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Target Milestone: --- This patch enhances the sidebar collapse feature added in bug 42322. Currently, collapsing the sidebar hides all menu links, leaving only the toggle button. This wastes the remaining horizontal space and removes quick access to the menu's options entirely. This patch: - Moves the collapse toggle button inside the grey sidebar background, so it visually reads as part of the menu it controls, rather than a separate floating button. - Introduces an opt-in icon-collapse mode: once a sidebar menu is enhanced with icons, collapsing it shows a narrow icon-only rail (with hover tooltips and the current page still highlighted) instead of hiding everything. - Persists the collapsed/expanded state across page loads using localStorage. - Converts the following sidebar menus to icon-collapse mode: Circulation (patron-context menu and module nav), Cataloguing, Tools, System preferences, Reports, Bibliographic record view, Serials, Labels, Point of sale, Guided reports view, and the Vue-driven Vendor, Acquisitions and Administration menus. Menus not yet converted (facets/tags/search-filter sidebars, and the ERM/ILL/Preservation/SIP2 Vue module navigation) keep today's collapse-to-blank behaviour and can be converted in follow-up patches using the same pattern. Test plan: 1. Apply the patch and rebuild the staff interface assets (yarn build). 2. Log in to the staff interface and go to a patron's detail page (Patrons > search a patron > Details). 3. Confirm the toggle button now sits flush inside the grey sidebar background rather than floating as a separate bordered button. 4. Click the toggle to collapse the sidebar. Confirm the circulation patron menu collapses to a narrow icon-only rail, each icon shows a tooltip on hover, and the current page's icon is still highlighted. 5. Reload the page. Confirm the sidebar remains collapsed (state is remembered across page loads). 6. Expand the sidebar again and visit a page using a menu that has NOT been converted yet (e.g. a facets/filter sidebar). Collapse it and confirm it still collapses to a blank rail as before (no regression). 7. Repeat steps 2-5 for a sample of the converted menus: Cataloguing (e.g. Inventory), Tools, Administration > System preferences, Reports, a bibliographic record's Detail page, Serials, Label creator, Point of sale, Guided reports. 8. Repeat for the Vue-driven menus: Acquisitions home, a vendor's detail page, and Administration (e.g. Authorized values). Confirm icons show, collapse works, and the active page is still highlighted when collapsed. 9. Run the Sidebar_spec.ts Cypress test and confirm it still passes. 10. Sign off. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #1 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206363 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206363&action=edit Bug 43576: Sidebar: seat the collapse toggle inside the grey menu band, add icon-collapse support and persist state The sidebar collapse toggle (Bug 42322) currently floats as a bordered/shadowed button pinned to the edge of the aside, visually disconnected from the grey .sidebar_menu box it controls. This styles the toggle to sit flush inside that same grey band instead. It also introduces an opt-in `.sidebar_menu.icon-collapse` modifier: when present, collapsing the sidebar keeps each link's icon visible and hides only its text label, instead of blanking the whole menu. Menus that haven't been converted yet keep today's blanket-hide behaviour, so this is safe to land ahead of converting every module menu. Finally, the collapsed/expanded state is now remembered in localStorage across page loads, since previously it silently reset to expanded on every navigation. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206364 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206364&action=edit Bug 43576: Sidebar: convert circulation menu to icon-collapse mode Prototype the new icon-collapse convention on the circulation/patron sidebar menu: each link gets a FontAwesome icon plus its label wrapped in a .menu-label span, and the menu opts into .icon-collapse so collapsing the sidebar leaves the icons (and active-page highlight) visible instead of hiding the whole menu. Other module menus keep today's collapse-to-blank behaviour until they get the same treatment in follow-up patches. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #3 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206365 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206365&action=edit Bug 43576: Sidebar: convert circulation module nav to icon-collapse mode Apply the icon-collapse pattern to circ-nav.inc, the general Circulation-module sidebar (Check out, Check in, Holds, Transfers, Overdues, etc. shown on module-level pages like the Check-in screen). This is distinct from circ-menu.inc, the patron-context sidebar already converted, which only appears on pages tied to one patron. Same icon reused across analogous actions in different groups (e.g. "queue"/"to pull"/"awaiting pickup" share an icon between Holds and Recalls) to keep the icon-only collapsed view legible. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #4 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206366 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206366&action=edit Bug 43576: Sidebar: scope icon-collapse CSS to actual nav lists, hide known sub-lists The icon-collapse rules used bare li/a selectors, which also matched list items inside unrelated <ol> filter forms embedded in some sidebar menus (e.g. serials-menu.inc's date-range filter), unhiding them when collapsed. Scope the rules to ul li / ul li > a instead, since none of the sidebar's filter forms use <ul>. Also explicitly hide two known nested sub-lists that don't carry their own icons and aren't meant to survive collapse: prefs-menu.inc's per-tab jump-link subtabs (.pref-subtabs) and biblio-view-menu.inc's item barcode list (#items_submenu). -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #5 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206367 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206367&action=edit Bug 43576: Sidebar: convert cataloguing menu to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #6 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206368 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206368&action=edit Bug 43576: Sidebar: convert tools menu to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #7 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206369 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206369&action=edit Bug 43576: Sidebar: convert system preferences menu to icon-collapse mode Each of the 21 preference tabs gets an icon; the per-tab jump-link subtabs shown under the active tab are wrapped in a .pref-subtabs class so they're hidden (not icon-collapsed) when the sidebar is collapsed, since they have no natural icon representation. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #8 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206370 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206370&action=edit Bug 43576: Sidebar: convert reports menu to icon-collapse mode -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #9 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206371 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206371&action=edit Bug 43576: Sidebar: convert bibliographic record view menu to icon-collapse mode -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #10 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206372 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206372&action=edit Bug 43576: Sidebar: convert serials menu to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #11 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206373 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206373&action=edit Bug 43576: Sidebar: convert labels menu to icon-collapse mode -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #12 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206374 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206374&action=edit Bug 43576: Sidebar: convert point of sale menu to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #14 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206376 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206376&action=edit Bug 43576: Sidebar: extend icon-collapse support to the Vue NavigationItem tree NavigationItem.vue (used by ERM, ILL, Preservation, SIP2 and other Vue-driven module sidebars via LeftMenu.vue) already rendered a per-item icon when the route declared one, but wrapped the link text in a bare <span> with no way for the collapse CSS to hide just the label. Add the menu-label class to that span, opt LeftMenu.vue's generic sidebar_menu into icon-collapse, and relax the CSS from a direct-child to a descendant combinator to reach the <a> through NavigationItem's extra wrapping <span>. Also add an icon-collapse active-state highlight for Vue Router's router-link-active class, mirroring the border/background TT menus already get from .active, since collapsed icons would otherwise have no way to show which page is current. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #15 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206377 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206377&action=edit Bug 43576: Sidebar: convert vendor menu (Vue) to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #16 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206378 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206378&action=edit Bug 43576: Sidebar: convert acquisitions menu (Vue) to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #17 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206379 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206379&action=edit Bug 43576: Sidebar: convert administration menu (Vue) to icon-collapse mode -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |oleonard@myacpl.org Assignee|koha-bugs@lists.koha-commun |martin.renvoize@openfifth.c |ity.org |o.uk -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Depends on| |42322 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42322 [Bug 42322] Collapse sidebar -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #18 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206380 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206380&action=edit Bug 43576: Sidebar: flatten nested sub-tree indentation in icon-collapse mode The Vue NavigationItem tree (ERM, SIP2, etc, rendered via LeftMenu.vue) supports real multi-level nesting (e.g. eHoldings > Local > Packages/ Titles in ERM), and LeftMenu.vue's own scoped style indents each nested <ul> by 2em for the expanded view. That indentation was still being applied when collapsed, so deeper icons drifted right with each level and fell outside the narrow 3rem icon rail entirely. Reset the nested-ul indentation (and its alternating background) to flush/transparent specifically in icon-collapse mode, so every level of a sub-tree renders as a plain icon in the same column. Hierarchy can't be conveyed through indentation once labels are hidden anyway. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #19 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206381 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206381&action=edit Bug 43576: Sidebar: extend grey background to full column height The sidebar's grey background only covered its own content (the aside and .sidebar_menu boxes are only as tall as their menu items), so on pages where the main content is taller than the sidebar the grey stopped abruptly below the last link, leaving a visible gap of plain background down to wherever the main content ends. Bootstrap's .row is a flex container, so #sidebar-container already stretches to match the taller sibling column's height; the aside itself just wasn't using that space. Give it the grey background and min-height: 100% so it fills the full column height when the main content is taller, while still shrinking to its own content when the sidebar is the taller side (no page-length changes, since this is a sibling-height match, not a viewport-height one). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #20 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206383 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206383&action=edit Bug 43576: (follow-up) Stretch the sidebar to the actual viewport bottom The previous patch only made the sidebar match its sibling column's height, which does nothing on the very common case where neither column has enough content to reach the bottom of the browser window -- the whole .row simply shrink-wraps to whatever short content exists. Make body a min-height:100vh flex column (Bootstrap's own documented sticky-footer/full-height pattern: display:flex, flex-direction:column, min-height:100vh, with the main content area set to flex:1 0 auto), with .main.container-fluid and its .row set to flex: 1 0 auto so they grow to fill the remaining space below the header/nav and above the existing body padding-bottom that already clears the fixed #changelanguage bar. Vue SPA modules (ERM, ILL, Preservation, SIP2, Acquisitions/vendors) render their own main-container-equivalent markup nested inside a per-app root div (#erm, #sip2, etc.) rather than main-container.inc being a direct child of body, with an extra unstyled wrapper div (the Vue root template's own top-level element) in between. Both of those need the same flex treatment to pass the stretch all the way down to .main.container-fluid. Verified across short and long pages, with and without a sidebar, for both classic TT pages and all Vue SPA modules, at various viewport heights. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |jake.deery@openfifth.co.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |andrew@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |lisette@bywatersolutions.co | |m -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Patch complexity|--- |Small patch Sponsorship status|--- |Unsponsored -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #206363|0 |1 is obsolete| | Attachment #206364|0 |1 is obsolete| | Attachment #206365|0 |1 is obsolete| | Attachment #206366|0 |1 is obsolete| | Attachment #206367|0 |1 is obsolete| | Attachment #206368|0 |1 is obsolete| | Attachment #206369|0 |1 is obsolete| | Attachment #206370|0 |1 is obsolete| | Attachment #206371|0 |1 is obsolete| | Attachment #206372|0 |1 is obsolete| | Attachment #206373|0 |1 is obsolete| | Attachment #206374|0 |1 is obsolete| | Attachment #206375|0 |1 is obsolete| | Attachment #206376|0 |1 is obsolete| | Attachment #206377|0 |1 is obsolete| | Attachment #206378|0 |1 is obsolete| | Attachment #206379|0 |1 is obsolete| | Attachment #206380|0 |1 is obsolete| | Attachment #206381|0 |1 is obsolete| | Attachment #206383|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #21 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206386 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206386&action=edit Bug 43576: Seat the collapse toggle inside the grey menu band, add icon-collapse support and persist state The sidebar collapse toggle (Bug 42322) currently floats as a bordered/shadowed button pinned to the edge of the aside, visually disconnected from the grey .sidebar_menu box it controls. This styles the toggle to sit flush inside that same grey band instead. It also introduces an opt-in `.sidebar_menu.icon-collapse` modifier: when present, collapsing the sidebar keeps each link's icon visible and hides only its text label, instead of blanking the whole menu. Menus that haven't been converted yet keep today's blanket-hide behaviour, so this is safe to land ahead of converting every module menu. Finally, the collapsed/expanded state is now remembered in localStorage across page loads, since previously it silently reset to expanded on every navigation. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #22 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206387 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206387&action=edit Bug 43576: Scope icon-collapse CSS to actual nav lists, hide known sub-lists The icon-collapse rules used bare li/a selectors, which also matched list items inside unrelated <ol> filter forms embedded in some sidebar menus (e.g. serials-menu.inc's date-range filter), unhiding them when collapsed. Scope the rules to ul li / ul li > a instead, since none of the sidebar's filter forms use <ul>. Also explicitly hide two known nested sub-lists that don't carry their own icons and aren't meant to survive collapse: prefs-menu.inc's per-tab jump-link subtabs (.pref-subtabs) and biblio-view-menu.inc's item barcode list (#items_submenu). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #23 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206388 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206388&action=edit Bug 43576: Extend grey background to full column height The sidebar's grey background only covered its own content (the aside and .sidebar_menu boxes are only as tall as their menu items), so on pages where the main content is taller than the sidebar the grey stopped abruptly below the last link, leaving a visible gap of plain background down to wherever the main content ends. Bootstrap's .row is a flex container, so #sidebar-container already stretches to match the taller sibling column's height; the aside itself just wasn't using that space. Give it the grey background and min-height: 100% so it fills the full column height when the main content is taller, while still shrinking to its own content when the sidebar is the taller side (no page-length changes, since this is a sibling-height match, not a viewport-height one). -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #24 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206389 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206389&action=edit Bug 43576: Stretch the sidebar to the actual viewport bottom The previous patch only made the sidebar match its sibling column's height, which does nothing on the very common case where neither column has enough content to reach the bottom of the browser window -- the whole .row simply shrink-wraps to whatever short content exists. Make body a min-height:100vh flex column (Bootstrap's own documented sticky-footer/full-height pattern: display:flex, flex-direction:column, min-height:100vh, with the main content area set to flex:1 0 auto), with .main.container-fluid and its .row set to flex: 1 0 auto so they grow to fill the remaining space below the header/nav and above the existing body padding-bottom that already clears the fixed Vue SPA modules (ERM, ILL, Preservation, SIP2, Acquisitions/vendors) render their own main-container-equivalent markup nested inside a per-app root div (#erm, #sip2, etc.) rather than main-container.inc being a direct child of body, with an extra unstyled wrapper div (the Vue root template's own top-level element) in between. Both of those need the same flex treatment to pass the stretch all the way down to .main.container-fluid. Verified across short and long pages, with and without a sidebar, for both classic TT pages and all Vue SPA modules, at various viewport heights. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #25 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206390 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206390&action=edit Bug 43576: Convert circulation menu to icon-collapse mode Prototype the new icon-collapse convention on the circulation/patron sidebar menu: each link gets a FontAwesome icon plus its label wrapped in a .menu-label span, and the menu opts into .icon-collapse so collapsing the sidebar leaves the icons (and active-page highlight) visible instead of hiding the whole menu. Other module menus keep today's collapse-to-blank behaviour until they get the same treatment in follow-up patches. Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "Patrons", search for and open any patron's record. 3. On the patron's "Details" page, confirm the left sidebar (Check out, Details, Accounting, etc.) now shows an icon next to each link. 4. Click the toggle at the top of the sidebar to collapse it; confirm it shrinks to an icon-only rail, each icon shows its label as a tooltip on hover, and the current page's icon stays highlighted. 5. Click the toggle again to expand; confirm the labels return. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #26 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206391 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206391&action=edit Bug 43576: Convert circulation module nav to icon-collapse mode Apply the icon-collapse pattern to circ-nav.inc, the general Circulation-module sidebar (Check out, Check in, Holds, Transfers, Overdues, etc. shown on module-level pages like the Check-in screen). This is distinct from circ-menu.inc, the patron-context sidebar already converted, which only appears on pages tied to one patron. Same icon reused across analogous actions in different groups (e.g. "queue"/"to pull"/"awaiting pickup" share an icon between Holds and Recalls) to keep the icon-only collapsed view legible. Test plan: 1. No system preference changes required for the core menu (a few optional links -- Routing lists, On-site checkouts, Curbside pickups, Recalls -- only appear when their respective preferences are enabled). 2. Log in to the staff interface, click "Circulation" in the top navigation, then "Check-in" (or any other Circulation page). 3. Confirm the left sidebar (Check out, Check in, Holds, Transfers, Overdues, etc.) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #27 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206392 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206392&action=edit Bug 43576: Convert cataloguing menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Cataloging". 3. Click any link in the left sidebar (e.g. "Inventory" under Reports); confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #28 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206393 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206393&action=edit Bug 43576: Convert tools menu to icon-collapse mode Test plan: 1. No system preference changes required for the core menu (some optional links -- e.g. Rotating collections, Upload patron images, OPAC problem reports -- only appear when their respective preferences/permissions are enabled). 2. Log in to the staff interface, click "More" in the top navigation, then "Tools". 3. Click any tool (e.g. "Notices and slips"); confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #29 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206394 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206394&action=edit Bug 43576: Convert system preferences menu to icon-collapse mode Each of the 21 preference tabs gets an icon; the per-tab jump-link subtabs shown under the active tab are wrapped in a .pref-subtabs class so they're hidden (not icon-collapsed) when the sidebar is collapsed, since they have no natural icon representation. Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Administration", then "System preferences". 3. Confirm each of the 21 preference tabs (Accounting, Acquisitions, Administration, ...) now shows an icon, and that the active tab's sub-section jump links still appear below it when expanded. 4. Collapse the sidebar; confirm it shrinks to a flat icon-only rail (the active tab's sub-links are hidden while collapsed, since they have no natural icon), with the active tab's icon still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #30 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206395 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206395&action=edit Bug 43576: Convert reports menu to icon-collapse mode Test plan: 1. No system preference changes required (the "Report plugins" section only appears when plugins are enabled). 2. Log in to the staff interface, click "More" in the top navigation, then "Reports". 3. Confirm each sidebar link (Guided reports, Build new, statistics wizards, top lists, etc.) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #31 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206396 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206396&action=edit Bug 43576: Convert bibliographic record view menu to icon-collapse mode Test plan: 1. No system preference changes are required for the core tabs (Normal, Items, Checkout history). To see the full set of optional tabs, also enable: viewMARC, viewLabeledMARC, viewISBD, EasyAnalyticalRecords, ArticleRequests, and UseRecalls. 2. Log in to the staff interface, search the catalog for any record, and open its detail page. 3. Confirm each sidebar link (Normal, MARC, Items, Holds, Checkout history, etc.) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted; if the record has items, confirm the item barcode sub-list stays hidden while collapsed. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #32 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206397 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206397&action=edit Bug 43576: Convert serials menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Serials", then open any subscription (or "Claims"). 3. Confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #33 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206398 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206398&action=edit Bug 43576: Convert labels menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Tools", then "Label creator". 3. Confirm each sidebar link (Label batches, Label layouts, Label templates, Printer profiles, Print barcode range) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
Cash registers) for the logged-in library.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #34 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206399 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206399&action=edit Bug 43576: Convert point of sale menu to icon-collapse mode Test plan: 1. Enable the EnablePointOfSale and UseCashRegisters system preferences, and set up at least one cash register (Administration 2. Log in to the staff interface, click "More" in the top navigation, then "Point of sale". 3. Confirm the sidebar (Point of sale, Transaction history, Cash summary, and, with the right permissions, Configure cash registers / Configure items for purchase) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #35 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206400 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206400&action=edit Bug 43576: Convert guided reports view menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Reports", then "Guided reports". 3. Confirm the sidebar (Saved reports, View dictionary, Koha report library, Koha database schema) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #36 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206401 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206401&action=edit Bug 43576: Extend icon-collapse support to the Vue NavigationItem tree NavigationItem.vue (used by ERM, ILL, Preservation, SIP2 and other Vue-driven module sidebars via LeftMenu.vue) already rendered a per-item icon when the route declared one, but wrapped the link text in a bare <span> with no way for the collapse CSS to hide just the label. Add the menu-label class to that span, opt LeftMenu.vue's generic sidebar_menu into icon-collapse, and relax the CSS from a direct-child to a descendant combinator to reach the <a> through NavigationItem's extra wrapping <span>. Also add an icon-collapse active-state highlight for Vue Router's router-link-active class, mirroring the border/background TT menus already get from .active, since collapsed icons would otherwise have no way to show which page is current. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #37 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206402 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206402&action=edit Bug 43576: Flatten nested sub-tree indentation in icon-collapse mode The Vue NavigationItem tree (ERM, SIP2, etc, rendered via LeftMenu.vue) supports real multi-level nesting (e.g. eHoldings > Local > Packages/ Titles in ERM), and LeftMenu.vue's own scoped style indents each nested <ul> by 2em for the expanded view. That indentation was still being applied when collapsed, so deeper icons drifted right with each level and fell outside the narrow 3rem icon rail entirely. Reset the nested-ul indentation (and its alternating background) to flush/transparent specifically in icon-collapse mode, so every level of a sub-tree renders as a plain icon in the same column. Hierarchy can't be conveyed through indentation once labels are hidden anyway. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #38 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206403 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206403&action=edit Bug 43576: Convert vendor menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required. Requires at least one vendor to exist (Acquisitions > Vendor search > New vendor, if needed). 2. Log in to the staff interface, click "More" in the top navigation, then "Acquisitions", then search for and open any vendor. 3. Confirm the sidebar (Baskets, Basket groups, Contracts, Vendor issues, Invoices, Uncertain prices, and, if the ERM module is enabled, ERM agreements/ERM licenses) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #39 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206404 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206404&action=edit Bug 43576: Convert acquisitions menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Acquisitions". 3. Confirm the sidebar (Acquisitions home, Advanced search, Late orders, Suggestions, Invoices, Reports, Administration, etc.) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #40 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206405 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206405&action=edit Bug 43576: Convert administration menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required for the core sections; a few optional links (e.g. Self-service circulation (SIP2), Desks, EDI accounts) only appear when their respective preferences/permissions are enabled. 2. Log in to the staff interface, click "More" in the top navigation, then "Administration", then any non-System-preferences page (e.g. "Authorized values"). 3. Confirm the sidebar (System preferences, Basic parameters, Patrons and circulation, Accounting, Plugins, Jobs, Catalog, Acquisition parameters, Additional parameters) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #41 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206407 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206407&action=edit Bug 43576: Add a divider between icon-collapse groups Several menus group their links under <h5> headings (Cataloging, Tools, Reports, Serials, Point of sale, Guided reports view, Circulation module nav, and the Vue Administration/Acquisitions menus). Those headings are hidden in icon-collapse mode, which left no visual cue separating one group's icons from the next. Add a thin border-top on the first icon of each group (skipping the menu's very first group, which needs no separator) as a lightweight substitute for the hidden heading -- the same "divider between icon clusters" pattern used by VS Code's activity bar, Slack, and similar icon rails. Menus with a single flat list (e.g. circ-menu, prefs-menu, biblio-view-menu, vendor-menu) are unaffected, since they have no <h5> groups to begin with. Test plan: 1. Log in to the staff interface and open a page using a grouped menu, e.g. More > Cataloging, or Administration > Authorized values. 2. Expand the sidebar; confirm the group headings (Import, Export, Reports, ... or System preferences, Basic parameters, ...) still render normally. 3. Collapse the sidebar; confirm a thin divider line now appears between each group's icons, with no divider above the very first group. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Initiative type|--- |Feature Target Milestone|--- |26.11 -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Biblibre Sandboxes <sandboxes@biblibre.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #206386|0 |1 is obsolete| | Attachment #206387|0 |1 is obsolete| | Attachment #206388|0 |1 is obsolete| | Attachment #206389|0 |1 is obsolete| | Attachment #206390|0 |1 is obsolete| | Attachment #206391|0 |1 is obsolete| | Attachment #206392|0 |1 is obsolete| | Attachment #206393|0 |1 is obsolete| | Attachment #206394|0 |1 is obsolete| | Attachment #206395|0 |1 is obsolete| | Attachment #206396|0 |1 is obsolete| | Attachment #206397|0 |1 is obsolete| | Attachment #206398|0 |1 is obsolete| | Attachment #206399|0 |1 is obsolete| | Attachment #206400|0 |1 is obsolete| | Attachment #206401|0 |1 is obsolete| | Attachment #206402|0 |1 is obsolete| | Attachment #206403|0 |1 is obsolete| | Attachment #206404|0 |1 is obsolete| | Attachment #206405|0 |1 is obsolete| | Attachment #206407|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #42 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206410 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206410&action=edit Bug 43576: Seat the collapse toggle inside the grey menu band, add icon-collapse support and persist state The sidebar collapse toggle (Bug 42322) currently floats as a bordered/shadowed button pinned to the edge of the aside, visually disconnected from the grey .sidebar_menu box it controls. This styles the toggle to sit flush inside that same grey band instead. It also introduces an opt-in `.sidebar_menu.icon-collapse` modifier: when present, collapsing the sidebar keeps each link's icon visible and hides only its text label, instead of blanking the whole menu. Menus that haven't been converted yet keep today's blanket-hide behaviour, so this is safe to land ahead of converting every module menu. Finally, the collapsed/expanded state is now remembered in localStorage across page loads, since previously it silently reset to expanded on every navigation. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #43 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206411 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206411&action=edit Bug 43576: Scope icon-collapse CSS to actual nav lists, hide known sub-lists The icon-collapse rules used bare li/a selectors, which also matched list items inside unrelated <ol> filter forms embedded in some sidebar menus (e.g. serials-menu.inc's date-range filter), unhiding them when collapsed. Scope the rules to ul li / ul li > a instead, since none of the sidebar's filter forms use <ul>. Also explicitly hide two known nested sub-lists that don't carry their own icons and aren't meant to survive collapse: prefs-menu.inc's per-tab jump-link subtabs (.pref-subtabs) and biblio-view-menu.inc's item barcode list (#items_submenu). Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #44 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206412 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206412&action=edit Bug 43576: Extend grey background to full column height The sidebar's grey background only covered its own content (the aside and .sidebar_menu boxes are only as tall as their menu items), so on pages where the main content is taller than the sidebar the grey stopped abruptly below the last link, leaving a visible gap of plain background down to wherever the main content ends. Bootstrap's .row is a flex container, so #sidebar-container already stretches to match the taller sibling column's height; the aside itself just wasn't using that space. Give it the grey background and min-height: 100% so it fills the full column height when the main content is taller, while still shrinking to its own content when the sidebar is the taller side (no page-length changes, since this is a sibling-height match, not a viewport-height one). Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #45 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206413 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206413&action=edit Bug 43576: Stretch the sidebar to the actual viewport bottom The previous patch only made the sidebar match its sibling column's height, which does nothing on the very common case where neither column has enough content to reach the bottom of the browser window -- the whole .row simply shrink-wraps to whatever short content exists. Make body a min-height:100vh flex column (Bootstrap's own documented sticky-footer/full-height pattern: display:flex, flex-direction:column, min-height:100vh, with the main content area set to flex:1 0 auto), with .main.container-fluid and its .row set to flex: 1 0 auto so they grow to fill the remaining space below the header/nav and above the existing body padding-bottom that already clears the fixed Vue SPA modules (ERM, ILL, Preservation, SIP2, Acquisitions/vendors) render their own main-container-equivalent markup nested inside a per-app root div (#erm, #sip2, etc.) rather than main-container.inc being a direct child of body, with an extra unstyled wrapper div (the Vue root template's own top-level element) in between. Both of those need the same flex treatment to pass the stretch all the way down to .main.container-fluid. Verified across short and long pages, with and without a sidebar, for both classic TT pages and all Vue SPA modules, at various viewport heights. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #46 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206414 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206414&action=edit Bug 43576: Convert circulation menu to icon-collapse mode Prototype the new icon-collapse convention on the circulation/patron sidebar menu: each link gets a FontAwesome icon plus its label wrapped in a .menu-label span, and the menu opts into .icon-collapse so collapsing the sidebar leaves the icons (and active-page highlight) visible instead of hiding the whole menu. Other module menus keep today's collapse-to-blank behaviour until they get the same treatment in follow-up patches. Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "Patrons", search for and open any patron's record. 3. On the patron's "Details" page, confirm the left sidebar (Check out, Details, Accounting, etc.) now shows an icon next to each link. 4. Click the toggle at the top of the sidebar to collapse it; confirm it shrinks to an icon-only rail, each icon shows its label as a tooltip on hover, and the current page's icon stays highlighted. 5. Click the toggle again to expand; confirm the labels return. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #47 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206415 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206415&action=edit Bug 43576: Convert circulation module nav to icon-collapse mode Apply the icon-collapse pattern to circ-nav.inc, the general Circulation-module sidebar (Check out, Check in, Holds, Transfers, Overdues, etc. shown on module-level pages like the Check-in screen). This is distinct from circ-menu.inc, the patron-context sidebar already converted, which only appears on pages tied to one patron. Same icon reused across analogous actions in different groups (e.g. "queue"/"to pull"/"awaiting pickup" share an icon between Holds and Recalls) to keep the icon-only collapsed view legible. Test plan: 1. No system preference changes required for the core menu (a few optional links -- Routing lists, On-site checkouts, Curbside pickups, Recalls -- only appear when their respective preferences are enabled). 2. Log in to the staff interface, click "Circulation" in the top navigation, then "Check-in" (or any other Circulation page). 3. Confirm the left sidebar (Check out, Check in, Holds, Transfers, Overdues, etc.) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #48 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206416 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206416&action=edit Bug 43576: Convert cataloguing menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Cataloging". 3. Click any link in the left sidebar (e.g. "Inventory" under Reports); confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #49 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206417 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206417&action=edit Bug 43576: Convert tools menu to icon-collapse mode Test plan: 1. No system preference changes required for the core menu (some optional links -- e.g. Rotating collections, Upload patron images, OPAC problem reports -- only appear when their respective preferences/permissions are enabled). 2. Log in to the staff interface, click "More" in the top navigation, then "Tools". 3. Click any tool (e.g. "Notices and slips"); confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #50 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206418 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206418&action=edit Bug 43576: Convert system preferences menu to icon-collapse mode Each of the 21 preference tabs gets an icon; the per-tab jump-link subtabs shown under the active tab are wrapped in a .pref-subtabs class so they're hidden (not icon-collapsed) when the sidebar is collapsed, since they have no natural icon representation. Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Administration", then "System preferences". 3. Confirm each of the 21 preference tabs (Accounting, Acquisitions, Administration, ...) now shows an icon, and that the active tab's sub-section jump links still appear below it when expanded. 4. Collapse the sidebar; confirm it shrinks to a flat icon-only rail (the active tab's sub-links are hidden while collapsed, since they have no natural icon), with the active tab's icon still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #51 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206419 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206419&action=edit Bug 43576: Convert reports menu to icon-collapse mode Test plan: 1. No system preference changes required (the "Report plugins" section only appears when plugins are enabled). 2. Log in to the staff interface, click "More" in the top navigation, then "Reports". 3. Confirm each sidebar link (Guided reports, Build new, statistics wizards, top lists, etc.) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #52 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206420 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206420&action=edit Bug 43576: Convert bibliographic record view menu to icon-collapse mode Test plan: 1. No system preference changes are required for the core tabs (Normal, Items, Checkout history). To see the full set of optional tabs, also enable: viewMARC, viewLabeledMARC, viewISBD, EasyAnalyticalRecords, ArticleRequests, and UseRecalls. 2. Log in to the staff interface, search the catalog for any record, and open its detail page. 3. Confirm each sidebar link (Normal, MARC, Items, Holds, Checkout history, etc.) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted; if the record has items, confirm the item barcode sub-list stays hidden while collapsed. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #53 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206421 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206421&action=edit Bug 43576: Convert serials menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Serials", then open any subscription (or "Claims"). 3. Confirm each sidebar link now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #54 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206422 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206422&action=edit Bug 43576: Convert labels menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Tools", then "Label creator". 3. Confirm each sidebar link (Label batches, Label layouts, Label templates, Printer profiles, Print barcode range) now shows an icon. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
Cash registers) for the logged-in library.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #55 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206423 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206423&action=edit Bug 43576: Convert point of sale menu to icon-collapse mode Test plan: 1. Enable the EnablePointOfSale and UseCashRegisters system preferences, and set up at least one cash register (Administration 2. Log in to the staff interface, click "More" in the top navigation, then "Point of sale". 3. Confirm the sidebar (Point of sale, Transaction history, Cash summary, and, with the right permissions, Configure cash registers / Configure items for purchase) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #56 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206424 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206424&action=edit Bug 43576: Convert guided reports view menu to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Reports", then "Guided reports". 3. Confirm the sidebar (Saved reports, View dictionary, Koha report library, Koha database schema) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #57 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206425 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206425&action=edit Bug 43576: Extend icon-collapse support to the Vue NavigationItem tree NavigationItem.vue (used by ERM, ILL, Preservation, SIP2 and other Vue-driven module sidebars via LeftMenu.vue) already rendered a per-item icon when the route declared one, but wrapped the link text in a bare <span> with no way for the collapse CSS to hide just the label. Add the menu-label class to that span, opt LeftMenu.vue's generic sidebar_menu into icon-collapse, and relax the CSS from a direct-child to a descendant combinator to reach the <a> through NavigationItem's extra wrapping <span>. Also add an icon-collapse active-state highlight for Vue Router's router-link-active class, mirroring the border/background TT menus already get from .active, since collapsed icons would otherwise have no way to show which page is current. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #58 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206426 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206426&action=edit Bug 43576: Flatten nested sub-tree indentation in icon-collapse mode The Vue NavigationItem tree (ERM, SIP2, etc, rendered via LeftMenu.vue) supports real multi-level nesting (e.g. eHoldings > Local > Packages/ Titles in ERM), and LeftMenu.vue's own scoped style indents each nested <ul> by 2em for the expanded view. That indentation was still being applied when collapsed, so deeper icons drifted right with each level and fell outside the narrow 3rem icon rail entirely. Reset the nested-ul indentation (and its alternating background) to flush/transparent specifically in icon-collapse mode, so every level of a sub-tree renders as a plain icon in the same column. Hierarchy can't be conveyed through indentation once labels are hidden anyway. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #59 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206427 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206427&action=edit Bug 43576: Convert vendor menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required. Requires at least one vendor to exist (Acquisitions > Vendor search > New vendor, if needed). 2. Log in to the staff interface, click "More" in the top navigation, then "Acquisitions", then search for and open any vendor. 3. Confirm the sidebar (Baskets, Basket groups, Contracts, Vendor issues, Invoices, Uncertain prices, and, if the ERM module is enabled, ERM agreements/ERM licenses) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #60 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206428 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206428&action=edit Bug 43576: Convert acquisitions menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required. 2. Log in to the staff interface, click "More" in the top navigation, then "Acquisitions". 3. Confirm the sidebar (Acquisitions home, Advanced search, Late orders, Suggestions, Invoices, Reports, Administration, etc.) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #61 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206429 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206429&action=edit Bug 43576: Convert administration menu (Vue) to icon-collapse mode Test plan: 1. No system preference changes required for the core sections; a few optional links (e.g. Self-service circulation (SIP2), Desks, EDI accounts) only appear when their respective preferences/permissions are enabled. 2. Log in to the staff interface, click "More" in the top navigation, then "Administration", then any non-System-preferences page (e.g. "Authorized values"). 3. Confirm the sidebar (System preferences, Basic parameters, Patrons and circulation, Accounting, Plugins, Jobs, Catalog, Acquisition parameters, Additional parameters) now shows an icon next to each link. 4. Collapse the sidebar and confirm it shrinks to an icon-only rail with tooltips on hover and the current page still highlighted. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #62 from Biblibre Sandboxes <sandboxes@biblibre.com> --- Created attachment 206430 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206430&action=edit Bug 43576: Add a divider between icon-collapse groups Several menus group their links under <h5> headings (Cataloging, Tools, Reports, Serials, Point of sale, Guided reports view, Circulation module nav, and the Vue Administration/Acquisitions menus). Those headings are hidden in icon-collapse mode, which left no visual cue separating one group's icons from the next. Add a thin border-top on the first icon of each group (skipping the menu's very first group, which needs no separator) as a lightweight substitute for the hidden heading -- the same "divider between icon clusters" pattern used by VS Code's activity bar, Slack, and similar icon rails. Menus with a single flat list (e.g. circ-menu, prefs-menu, biblio-view-menu, vendor-menu) are unaffected, since they have no <h5> groups to begin with. Test plan: 1. Log in to the staff interface and open a page using a grouped menu, e.g. More > Cataloging, or Administration > Authorized values. 2. Expand the sidebar; confirm the group headings (Import, Export, Reports, ... or System preferences, Basic parameters, ...) still render normally. 3. Collapse the sidebar; confirm a thin divider line now appears between each group's icons, with no divider above the very first group. Signed-off-by: Michaela Sieber <michaela.sieber@kit.edu> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Michaela Sieber <michaela.sieber@kit.edu> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |michaela.sieber@kit.edu Status|Needs Signoff |Signed Off --- Comment #63 from Michaela Sieber <michaela.sieber@kit.edu> --- works as advertised -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Michelle Spinney <mspinney@clamsnet.org> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |mspinney@clamsnet.org -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #64 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206881 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206881&action=edit Bug 43576: (follow-up) Seat the collapse toggle without an extra whitespace band QA feedback: the toggle's own .sidebar-toggle row sat above the grey .sidebar_menu box, adding its own top padding on top of that box's, which left a mostly-empty grey strip at the top of the bar whenever it was expanded. Drop that separate row. The button is now absolutely positioned in the grey box's own top-right corner (aside is already position:relative), and .sidebar_menu reserves just enough top padding to clear it, so there's a single continuous grey box with the toggle seated in its corner instead of a seam between two boxes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #65 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206882 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206882&action=edit Bug 43576: (follow-up) De-emphasise menu icons alongside labels QA feedback: several staff found the expanded (non-collapsed) sidebar menus more cluttered now that every link shows both an icon and a label; before this branch these menus were text-only, so the icons are new visual weight nobody opted into. Icons only need to carry the full meaning on their own once they're collapsed down to icon-only mode. While the label is still there alongside them, mute the icon to a lighter grey and a touch smaller than the label, so the label reads as the primary content and the icon recedes to a secondary affordance. Restore full icon strength (colour inherited from the link, so active/hover states still tint it) once collapsed mode makes the icon the only thing left to read. Give the icon an explicit margin-right for consistent spacing too, rather than relying on incidental markup whitespace between <i> and the label: the plain .inc templates have a literal space character there, but in the Vue components that whitespace spans a newline and gets stripped entirely by Vue's template compiler, so the two templating systems rendered inconsistent gaps otherwise. Drop the now- redundant literal space from the .inc templates so the gap comes from the same CSS margin everywhere. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #66 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 206883 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=206883&action=edit Bug 43576: (follow-up) Disambiguate icons reused across menu groups QA feedback: collapsing a menu down to icon-only sometimes stacks the same icon in two different groups with nothing to tell them apart, e.g. circulation's Holds and Recalls groups both used fa-list-check, fa-hand, and fa-box-open for their equivalent queue/pull/awaiting-pickup actions, and acquisitions' three "Manage ... fields" screens all used fa-list-check. Give the concrete clashes found so far more distinct icons: - circ-nav.inc: Recalls queue/to pull/awaiting pickup get their own icons instead of borrowing the Holds group's. - AcquisitionsMenu.vue: the invoice/basket/order-line "Manage fields" entries each get their own icon. Also thicken and darken the divider that marks a group boundary when collapsed (a hidden heading no longer visually separates the groups on its own), and tighten the gap above it: the previous group's <ul> was still carrying its normal-mode margin-bottom, stacking with the divider's own margin-top to read as more empty space than the divider needed. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 --- Comment #67 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Added a few additional tweaks based on feedback from the chat. -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 David Cook <dcook@prosentient.com.au> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |dcook@prosentient.com.au -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |lucas@bywatersolutions.com |y.org | CC| |lucas@bywatersolutions.com -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Lucas Gass (lukeg) <lucas@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- Keywords| |release-notes-needed -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43576 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Text to go in the| |Enhance the collapsible release notes| |side menu to make it | |navigable whilst collapsed. | | | |Add icons to all side menus | |in the staff client and | |then retain them after | |collapse and use hover to | |display menu 8tme text, | |click to navigate. -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org