[vlc-commits] [Git][videolan/vlc][master] 2 commits: qml: improve spacing in top banner

[Steve Lhomme (@robUx4)]

Steve Lhomme pushed to branch master at VideoLAN / VLC


Commits:
e9c189c0 by Prince Gupta at 2023-11-27T11:49:37+00:00
qml: improve spacing in top banner

- - - - -
1fa7526b by Prince Gupta at 2023-11-27T11:49:37+00:00
qml: make search field width adaptable

- - - - -


2 changed files:

- modules/gui/qt/maininterface/qml/BannerSources.qml
- modules/gui/qt/widgets/qml/SearchBox.qml


Changes:

=====================================
modules/gui/qt/maininterface/qml/BannerSources.qml
=====================================
@@ -136,7 +136,7 @@ T.ToolBar {
                             anchors.verticalCenter: parent.verticalCenter
                             anchors.left: parent.left
                             anchors.leftMargin: VLCStyle.margin_xsmall
-                            spacing: VLCStyle.margin_xxxsmall
+                            spacing: VLCStyle.margin_normal
 
                             Widgets.IconToolButton {
                                  id: history_back
@@ -242,6 +242,8 @@ T.ToolBar {
                             left: parent.left
                             leftMargin: VLCStyle.applicationHorizontalMargin + VLCStyle.margin_xsmall
                         }
+
+                        spacing: VLCStyle.margin_normal
                         enabled: list_grid_btn.visible || sortControl.visible
 
                         onEnabledChanged: {
@@ -304,7 +306,9 @@ T.ToolBar {
                                                               - (VLCStyle.applicationHorizontalMargin * 2)
                                                               - (VLCStyle.margin_xsmall * 2)
                                                               - (VLCStyle.margin_xxsmall * 2)
-                        readonly property bool _alignHCenter: ((localToolbarContent.width - contentItem.contentWidth) / 2) + contentItem.contentWidth < playlistGroup.x
+
+                        readonly property bool _alignHCenter: ((localToolbarContent.width - contentItem.contentWidth) / 2) + contentItem.contentWidth
+                                                              < playlistGroup.x
 
                         width: Math.min(contentItem.contentWidth, _availableWidth)
                         height: VLCStyle.localToolbar_height
@@ -377,12 +381,21 @@ T.ToolBar {
                             right: parent.right
                             rightMargin: VLCStyle.applicationHorizontalMargin + VLCStyle.margin_xsmall
                         }
-                        spacing: VLCStyle.margin_xxxsmall
+                        spacing: VLCStyle.margin_normal
 
                         model: ObjectModel {
 
                             Widgets.SearchBox {
                                 id: searchBox
+
+                                // set max width so that search field not overflows with small screens
+                                // assumes all other sibling is a button of 'VLCStyle.bannerButton_width' width
+                                maxSearchFieldWidth: root.width
+                                                     - (VLCStyle.bannerButton_width * playlistGroup.count)
+                                                     - (playlistGroup.spacing * (playlistGroup.count - 1))
+                                                     - playlistGroup.anchors.rightMargin
+                                                     - VLCStyle.margin_small // padding to left
+
                                 visible: MainCtx.search.available
                                 height: VLCStyle.bannerButton_height
                                 buttonWidth: VLCStyle.bannerButton_width


=====================================
modules/gui/qt/widgets/qml/SearchBox.qml
=====================================
@@ -30,6 +30,7 @@ FocusScope {
     implicitWidth: content.implicitWidth
     implicitHeight: content.implicitHeight
 
+    property real maxSearchFieldWidth: Number.MAX_VALUE
     property alias buttonWidth: iconButton.implicitWidth
     property alias searchPattern: textField.text
 
@@ -62,7 +63,8 @@ FocusScope {
                 PropertyChanges {
                     target: textField
                     // Take care if SearchBox was set a specific width:
-                    width: (root._widthOverridden ? (content.width - iconButton.width) : textField.implicitWidth)
+                    width: Math.min(root.maxSearchFieldWidth,
+                                    (root._widthOverridden ? (content.width - iconButton.width) : textField.implicitWidth))
                 }
 
                 PropertyChanges {



View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/3aa2e0cd30bf3de408574f5feef0d006d2c24bcc...1fa7526be4e6b8d8e11a1be1a92a7573cbb45d22

-- 
View it on GitLab: https://code.videolan.org/videolan/vlc/-/compare/3aa2e0cd30bf3de408574f5feef0d006d2c24bcc...1fa7526be4e6b8d8e11a1be1a92a7573cbb45d22
You're receiving this email because of your account on code.videolan.org.


VideoLAN code repository instance