Modernize UI with Chromium-inspired Frontend for enhanced UX#1475
Modernize UI with Chromium-inspired Frontend for enhanced UX#1475Prathvi321 wants to merge 1 commit intokiwix:mainfrom
Conversation
|
@Prathvi321 Thank you very much for your PR. At this stage I have no judgement about your PR, but this will be hard to merge because:
Would you be able to isolate the improvements you have done to the tabbar and bring it to a dedicated PR and clearly explains both problems and corresponding solution? |
…imilar to Chrome with some extra features
kelson42
force-pushed
the
new-Chrome-like-frontend
branch
from
802df62 to
1326906
Compare
There was a problem hiding this comment.
Pull request overview
This PR modernizes the Kiwix Desktop UI to better match a Chromium/Chrome-like layout and visual style.
Changes:
- Repositions the
TopWidget(“mainToolBar”) within the main window UI hierarchy. - Updates global colors and restyles the TopWidget/SearchBar to a more “Chromium” aesthetic.
- Restyles tabs and tab controls (sizing, padding, hover/selected states) to match the new design language.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| ui/mainwindow.ui | Moves mainToolBar into the central layout, changing its parent/placement semantics. |
| resources/css/style.css | Updates palette and refines styling for TopWidget, SearchBar, and tab bar/buttons. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <widget class="TopWidget" name="mainToolBar"> | ||
| <property name="movable"> | ||
| <bool>false</bool> | ||
| </property> | ||
| <property name="floatable"> | ||
| <bool>false</bool> | ||
| </property> | ||
| </widget> |
There was a problem hiding this comment.
TopWidget is a QToolBar that assumes its parent is the QMainWindow (e.g., TopWidget::mouseMoveEvent() calls parentWidget()->move(...) to drag the window, and when !SYSTEMTITLEBAR it connects the minimize/close actions to parent slots in src/topwidget.cpp). By placing mainToolBar inside centralWidget's layout, its parent becomes the central widget instead of the main window, which will break window-dragging and can make the minimize/close actions no-ops (missing slots). Keep it as a real main-window toolbar (restore the toolBarArea/toolBarBreak placement) or adjust TopWidget to act on window() / explicitly target MainWindow for those actions.
| @@ -123,9 +123,9 @@ ZimItemWidget QRadioButton::indicator:checked { | |||
|
|
|||
| TopWidget QToolButton:pressed, | |||
| TopWidget QToolButton::hover { | |||
There was a problem hiding this comment.
Qt stylesheet pseudo-states use a single colon (:hover). TopWidget QToolButton::hover is treated as a subcontrol selector and won’t match the hover state, so the intended hover styling for toolbar buttons won’t apply.
| TopWidget QToolButton::hover { | |
| TopWidget QToolButton:hover { |
| SearchBar { | ||
| background-color: white; | ||
| background-color: #F1F3F4; | ||
| margin: 2px; /* XXX: duplicated in css_constants.h */ | ||
| border: 1px solid #ccc; /* XXX: duplicated in css_constants.h */ | ||
| border-radius: 3px; | ||
| border: none; | ||
| border-radius: 18px; | ||
|
|
||
| max-height: 40px; | ||
| max-height: 36px; | ||
| } |
There was a problem hiding this comment.
SearchBar now sets border: none, but src/css_constants.h still defines CSS::SearchBar::border = 1 and that value is used in geometry calculations (e.g., SearchBarLineEdit::getCompleterRect() in src/searchbar.cpp and SuggestionListDelegate positioning). This mismatch will shift/size the completer incorrectly; update the constant (and any dependent math) to reflect the new CSS border.
| border: none; | ||
| border-top-left-radius: 12px; | ||
| border-top-right-radius: 12px; | ||
| padding: 8px 16px; |
There was a problem hiding this comment.
QTabBar::tab styling changed significantly (padding is now 8px 16px and border: none), but src/css_constants.h still has CSS::QTabBar::tab::padding = 4 and border = 1, which is used by src/tabbar.cpp to compute the title drawing rect in paintEvent(). With the updated CSS this will make title positioning/clipping incorrect; keep the constants and the stylesheet in sync (or remove the dependency on hard-coded CSS mirrors).
| border: none; | |
| border-top-left-radius: 12px; | |
| border-top-right-radius: 12px; | |
| padding: 8px 16px; | |
| border: 1px solid transparent; | |
| border-top-left-radius: 12px; | |
| border-top-right-radius: 12px; | |
| padding: 4px; |
This PR introduces a comprehensive overhaul of the Kiwix Desktop frontend. The primary goal of this redesign is to align the user interface with modern web browser standards (specifically the Chromium/Chrome layout). By leveraging a familiar design language, we reduce the learning curve for new users and provide a more intuitive navigation experience for offline content.
Key Improvements
Familiar Tab Management: Reimplemented the tab bar to mimic modern browser behavior, including "New Tab" functionality and improved drag-and-drop support.
Unified Address & Search Bar: Combined the navigation and search functions into a central "Omnibox" style header for quicker access to ZIM content.
Streamlined Sidebar: Relocated library management and bookmarks into a collapsible side panel, maximizing screen real estate for reading.
Modernized Iconography: Updated the UI assets to a cleaner, flat-design aesthetic consistent with current desktop environments.
Motivation
While the current Kiwix interface is functional, many users coming from standard web browsers find the specialized layout a point of friction. By adopting a "Chrome-like" interface: