[vlc-commits] qml: rework the topbar layout

Adrien Maglo git at videolan.org
Thu Jun 13 13:11:01 CEST 2019


vlc | branch: master | Adrien Maglo <magsoft at videolan.org> | Fri Jun  7 14:16:33 2019 +0200| [3ca533b0f49cc9c3b022c44eaa152d8498a8fd1c] | committer: Thomas Guillem

qml: rework the topbar layout

Signed-off-by: Thomas Guillem <thomas at gllm.fr>

> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=3ca533b0f49cc9c3b022c44eaa152d8498a8fd1c
---

 modules/gui/qt/pixmaps/VLCIcons.json              |   4 +-
 modules/gui/qt/pixmaps/VLCIcons.ttf               | Bin 22416 -> 22560 bytes
 modules/gui/qt/pixmaps/topbar/next.svg            |  81 ++++++++
 modules/gui/qt/pixmaps/topbar/previous.svg        |  81 ++++++++
 modules/gui/qt/qml/BannerSources.qml              | 220 +++++++++++++++++++---
 modules/gui/qt/qml/mediacenter/MCMainDisplay.qml  |  42 +++--
 modules/gui/qt/qml/mediacenter/MCMusicDisplay.qml | 164 ++--------------
 modules/gui/qt/qml/style/VLCIcons.qml             |   2 +
 modules/gui/qt/qml/style/VLCStyle.qml             |   1 +
 modules/gui/qt/qml/utils/IconToolButton.qml       |  41 ++--
 10 files changed, 427 insertions(+), 209 deletions(-)

diff --git a/modules/gui/qt/pixmaps/VLCIcons.json b/modules/gui/qt/pixmaps/VLCIcons.json
index b1fbd221e3..7e0d98880f 100644
--- a/modules/gui/qt/pixmaps/VLCIcons.json
+++ b/modules/gui/qt/pixmaps/VLCIcons.json
@@ -124,6 +124,8 @@
 		{"key":"menu", "path": "./menu.svg"},
 		{"key":"topbar_video", "path": "./topbar/video.svg"},
 		{"key":"topbar_music", "path": "./topbar/music.svg"},
-		{"key":"topbar_network", "path": "./topbar/network.svg"}
+ 		{"key":"topbar_network", "path": "./topbar/network.svg"},
+		{"key":"topbar_previous", "path": "./topbar/previous.svg"},
+		{"key":"topbar_next", "path": "./topbar/next.svg"}
 	]
 }
diff --git a/modules/gui/qt/pixmaps/VLCIcons.ttf b/modules/gui/qt/pixmaps/VLCIcons.ttf
index c20da679f6..5aaf1b5c90 100644
Binary files a/modules/gui/qt/pixmaps/VLCIcons.ttf and b/modules/gui/qt/pixmaps/VLCIcons.ttf differ
diff --git a/modules/gui/qt/pixmaps/topbar/next.svg b/modules/gui/qt/pixmaps/topbar/next.svg
new file mode 100644
index 0000000000..e15727baa2
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/next.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg5502"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="next.svg">
+  <defs
+     id="defs5496" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="-6.1364722"
+     inkscape:cy="24.372331"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6077" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5499">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96.459526,-120.56071)">
+    <g
+       id="g828"
+       transform="matrix(-0.71135087,0,0,0.71135087,204.37014,42.438674)"
+       style="stroke-width:5.62310411;stroke-miterlimit:4;stroke-dasharray:none">
+      <path
+         inkscape:connector-curvature="0"
+         id="path822"
+         d="m 131.45953,123.56071 c -27,20 -27,20 -27,20"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.62310411;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.62310411;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 131.45953,163.56071 c -27,-20 -27,-20 -27,-20"
+         id="path824"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/modules/gui/qt/pixmaps/topbar/previous.svg b/modules/gui/qt/pixmaps/topbar/previous.svg
new file mode 100644
index 0000000000..6ff6899437
--- /dev/null
+++ b/modules/gui/qt/pixmaps/topbar/previous.svg
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="48"
+   height="48"
+   viewBox="0 0 48 48"
+   version="1.1"
+   id="svg5502"
+   inkscape:version="0.92.3 (2405546, 2018-03-11)"
+   sodipodi:docname="previous.svg">
+  <defs
+     id="defs5496" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="14.481547"
+     inkscape:cx="14.993867"
+     inkscape:cy="24.924759"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0"
+     inkscape:window-width="1920"
+     inkscape:window-height="1031"
+     inkscape:window-x="1920"
+     inkscape:window-y="25"
+     inkscape:window-maximized="1"
+     units="px">
+    <inkscape:grid
+       type="xygrid"
+       id="grid6077" />
+  </sodipodi:namedview>
+  <metadata
+     id="metadata5499">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-96.459526,-120.56071)">
+    <g
+       id="g828"
+       transform="matrix(0.71135087,0,0,0.71135087,36.548912,42.438674)"
+       style="stroke-width:5.62310411;stroke-miterlimit:4;stroke-dasharray:none">
+      <path
+         inkscape:connector-curvature="0"
+         id="path822"
+         d="m 131.45953,123.56071 c -27,20 -27,20 -27,20"
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.62310411;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+      <path
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:5.62310411;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 131.45953,163.56071 c -27,-20 -27,-20 -27,-20"
+         id="path824"
+         inkscape:connector-curvature="0" />
+    </g>
+  </g>
+</svg>
diff --git a/modules/gui/qt/qml/BannerSources.qml b/modules/gui/qt/qml/BannerSources.qml
index cf437cc22e..a438039653 100644
--- a/modules/gui/qt/qml/BannerSources.qml
+++ b/modules/gui/qt/qml/BannerSources.qml
@@ -33,7 +33,16 @@ Utils.NavigableFocusScope {
     height: pLBannerSources.height
 
     property int selectedIndex: 0
+    property int subSelectedIndex: 0
+
+    signal itemClicked(int index)
+    signal subItemClicked(int index)
+
+    property alias sortModel: combo.model
+    property var contentModel
+
     property alias model: pLBannerSources.model
+    property alias subTabModel: model_music_id.model
     signal toogleMenu()
 
     // Triggered when the toogleView button is selected
@@ -61,6 +70,8 @@ Utils.NavigableFocusScope {
                 right: parent.right
             }
 
+            spacing: VLCStyle.margin_xxsmall
+
             /* Button for the sources */
             TabBar {
                 id: buttonView
@@ -69,14 +80,43 @@ Utils.NavigableFocusScope {
                     horizontalCenter: parent.horizontalCenter
                 }
 
-                focusPolicy: Qt.StrongFocus
-
                 Layout.preferredHeight: VLCStyle.icon_normal
                 Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
 
                 spacing: VLCStyle.margin_small
 
-                KeyNavigation.left: history_back
+                focus: true
+
+                // KeyNavigation states
+                states: [
+                    State {
+                        name: "no_history"
+                        when: history.nextEmpty && history.previousEmpty
+                        PropertyChanges {
+                            target: buttonView
+                            KeyNavigation.left: searchBox
+                            KeyNavigation.down: searchBox
+                        }
+                    },
+                    State {
+                        name: "has_previous_history"
+                        when: !history.previousEmpty
+                        PropertyChanges {
+                            target: buttonView
+                            KeyNavigation.left: history_back
+                            KeyNavigation.down: history_back
+                        }
+                    },
+                    State {
+                        name: "has_only_next_history"
+                        when: !history.nextEmpty && history.previousEmpty
+                        PropertyChanges {
+                            target: buttonView
+                            KeyNavigation.left: history_next
+                            KeyNavigation.down: history_next
+                        }
+                    }
+                ]
 
                 Component.onCompleted: {
                     buttonView.contentItem.focus = true
@@ -90,28 +130,16 @@ Utils.NavigableFocusScope {
                 /* Repeater to display each button */
                 Repeater {
                     id: sourcesButtons
-                    focus: true
 
                     TabButton {
                         id: control
                         text: model.displayText
 
-                        //initial focus
-                        focusPolicy: Qt.StrongFocus
-                        //focus: index === 1
-                        focus: model.selected
-
-                        Component.onCompleted: {
-                            if (model.selected) {
-                                buttonView.currentIndex = index
-                            }
-                        }
-
                         padding: 0
                         width: contentItem.implicitWidth
 
                         onClicked: {
-                            root.selectedIndex = model.index
+                            root.itemClicked(model.index)
                         }
 
                         font.pixelSize: VLCStyle.fontSize_normal
@@ -126,6 +154,13 @@ Utils.NavigableFocusScope {
                         contentItem: Item {
                             implicitWidth: tabRow.width
                             implicitHeight: tabRow.height
+
+                            Rectangle {
+                                anchors.fill: tabRow
+                                visible: control.activeFocus || control.hovered
+                                color: VLCStyle.colors.accent
+                            }
+
                             Row {
                                 id: tabRow
                                 padding: VLCStyle.margin_xxsmall
@@ -166,7 +201,7 @@ Utils.NavigableFocusScope {
                                     bottom: tabRow.bottom
                                 }
                                 height: 2
-                                visible: root.selectedIndex === model.index || control.activeFocus || control.hovered
+                                visible: root.selectedIndex === model.index
                                 color: "transparent"
                                 border.color: VLCStyle.colors.accent
                             }
@@ -177,21 +212,153 @@ Utils.NavigableFocusScope {
 
             RowLayout {
                 width: parent.width
+                spacing: 0
 
                 Utils.IconToolButton {
                     id: history_back
                     size: VLCStyle.icon_normal
-                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                    text: VLCIcons.dvd_prev
-                    focus: true
-                    KeyNavigation.right: buttonView
+                    Layout.minimumWidth: width
+                    text: VLCIcons.topbar_previous
+                    KeyNavigation.right: history_next
                     onClicked: history.pop(History.Go)
                 }
 
+                Utils.IconToolButton {
+                    id: history_next
+                    size: VLCStyle.icon_normal
+                    Layout.minimumWidth: width
+                    text: VLCIcons.topbar_next
+                    KeyNavigation.right: bar
+                    KeyNavigation.up: buttonView
+                }
+
+                TabBar {
+                    id: bar
+
+                    visible: model_music_id.model !== undefined
+                    enabled: model_music_id.model !== undefined
+
+                    Component.onCompleted: {
+                        bar.contentItem.focus= true
+                    }
+
+                    /* List of sub-sources for Music */
+                    Repeater {
+                        id: model_music_id
+
+                        //Column {
+                        TabButton {
+                            id: control
+                            text: model.displayText
+                            font.pixelSize: VLCStyle.fontSize_normal
+                            background: Rectangle {
+                                color: VLCStyle.colors.banner
+                            }
+                            contentItem: Item {
+                                implicitWidth: subSectionName.width
+                                implicitHeight: subSectionName.height
+
+                                Rectangle {
+                                    anchors.fill: subSectionName
+                                    visible: control.activeFocus || control.hovered
+                                    color: VLCStyle.colors.accent
+                                }
+
+                                Label {
+                                    id: subSectionName
+                                    padding: VLCStyle.margin_xxsmall
+                                    text: control.text
+                                    font: control.font
+                                    color: VLCStyle.colors.text
+                                }
+
+                                Rectangle {
+                                    anchors {
+                                        left: subSectionName.left
+                                        right: subSectionName.right
+                                        bottom: subSectionName.bottom
+                                    }
+                                    height: 2
+                                    visible: root.subSelectedIndex === model.index
+
+                                    color: VLCStyle.colors.accent
+                                }
+                            }
+                            onClicked: {
+                                root.subItemClicked(model.index)
+                            }
+                            activeFocusOnTab: true
+                        }
+                    }
+
+                    KeyNavigation.right: searchBox
+                    KeyNavigation.up: buttonView
+                }
+
+                /* Spacer */
+                Item {
+                    Layout.fillWidth: true
+                }
+
+                TextField {
+                    Layout.preferredWidth: VLCStyle.widthSearchInput
+                    Layout.preferredHeight: VLCStyle.heightInput
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+
+                    id: searchBox
+                    font.pixelSize: VLCStyle.fontSize_normal
+
+                    color: VLCStyle.colors.buttonText
+                    placeholderText: qsTr("filter")
+                    hoverEnabled: true
+
+                    background: Rectangle {
+                        color: VLCStyle.colors.button
+                        border.color: {
+                            if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
+                                return VLCStyle.colors.alert
+                            else if ( searchBox.hovered || searchBox.activeFocus )
+                                return VLCStyle.colors.accent
+                            else
+                                return VLCStyle.colors.buttonBorder
+                       }
+                    }
+
+                    onTextChanged: {
+                        if (contentModel !== undefined)
+                            contentModel.searchPattern = text;
+                    }
+
+                    KeyNavigation.right: combo
+                    KeyNavigation.up: buttonView
+                }
+
+                /* Selector to choose a specific sorting operation */
+                Utils.ComboBoxExt {
+                    id: combo
+
+                    //Layout.fillHeight: true
+                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    Layout.preferredWidth: VLCStyle.widthSortBox
+                    Layout.preferredHeight: VLCStyle.heightInput
+                    textRole: "text"
+                    onCurrentIndexChanged: {
+                        if (model !== undefined && contentModel !== undefined) {
+                            var sorting = model.get(currentIndex);
+                            contentModel.sortCriteria = sorting.criteria
+                        }
+                    }
+
+                    KeyNavigation.right: playlist_btn
+                    KeyNavigation.up: buttonView
+                }
+
                 ToolBar {
+                    id: tools
+                    Layout.minimumWidth: width
                     Layout.preferredHeight: VLCStyle.icon_normal
                     //Layout.preferredWidth: VLCStyle.icon_normal * 3
-                    Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
+                    Layout.alignment: Qt.AlignRight
                     background: Item{
                         width: parent.implicitWidth
                         height: parent.implicitHeight
@@ -204,9 +371,10 @@ Utils.NavigableFocusScope {
                             size: VLCStyle.icon_normal
                             text: VLCIcons.playlist
 
-                            KeyNavigation.left: buttonView
-
                             onClicked: root.toogleMenu()
+
+                            KeyNavigation.right: menu_selector
+                            KeyNavigation.up: buttonView
                         }
 
                         Utils.IconToolButton {
@@ -215,14 +383,14 @@ Utils.NavigableFocusScope {
                             size: VLCStyle.icon_normal
                             text: VLCIcons.menu
 
-                            KeyNavigation.left: playlist_btn
-
                             onClicked: mainMenu.openBelow(this)
 
                             Menus.MainDropdownMenu {
                                 id: mainMenu
                                 onClosed: menu_selector.forceActiveFocus()
                             }
+
+                            KeyNavigation.up: buttonView
                         }
                     }
                 }
diff --git a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
index 086f9ac2c4..a7cfaa2252 100644
--- a/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMainDisplay.qml
@@ -84,7 +84,6 @@ Utils.NavigableFocusScope {
         color: VLCStyle.colors.bg
         anchors.fill: parent
 
-
         Utils.NavigableFocusScope {
             focus: true
             id: medialibId
@@ -107,16 +106,28 @@ Utils.NavigableFocusScope {
                     Layout.maximumHeight: height
                     Layout.fillWidth: true
 
+                    focus: true
                     model: root.tabModel
-                    selectedIndex: pageModel.findIndex(function (e) {
-                        return e.name === root.view
-                    })
 
-                    onSelectedIndexChanged: {
-                        var name = root.tabModel.get(selectedIndex).name
-                        stackView.replace(root.pageModel[selectedIndex].component)
+                    onItemClicked: {
+                        sourcesBanner.subTabModel = undefined
+
+                        var name = root.tabModel.get(index).name
+                        stackView.replace(root.pageModel[index].component)
                         history.push(["mc", name], History.Stay)
-                        stackView.focus = true
+
+                        subTabModel = stackView.currentItem.tabModel
+                        sortModel = stackView.currentItem.sortModel
+                        contentModel = stackView.currentItem.contentModel
+
+                        selectedIndex = index
+                    }
+
+                    onSubItemClicked: {
+                        subSelectedIndex = index
+                        stackView.currentItem.loadIndex(index)
+                        sortModel = stackView.currentItem.sortModel
+                        contentModel = stackView.currentItem.contentModel
                     }
 
                     onActionDown: stackView.focus = true
@@ -128,14 +139,23 @@ Utils.NavigableFocusScope {
                     onToogleMenu: playlist.toggleState()
                 }
 
-
                 Utils.StackViewExt {
                     id: stackView
                     Layout.fillWidth: true
                     Layout.fillHeight: true
-                    focus: true
                     Component.onCompleted: {
                         var found = stackView.loadView(root.pageModel, root.view, root.viewProperties)
+                        sourcesBanner.subTabModel = stackView.currentItem.tabModel
+                        sourcesBanner.sortModel = stackView.currentItem.sortModel
+                        sourcesBanner.contentModel = stackView.currentItem.contentModel
+                        // Restore sourcesBanner state
+                        sourcesBanner.selectedIndex = pageModel.findIndex(function (e) {
+                            return e.name === root.view
+                        })
+                        if (stackView.currentItem.pageModel !== undefined)
+                            sourcesBanner.subSelectedIndex = stackView.currentItem.pageModel.findIndex(function (e) {
+                                return e.name === stackView.currentItem.view
+                            })
                     }
 
                     Utils.Drawer {
@@ -197,7 +217,7 @@ Utils.NavigableFocusScope {
                 target: stackView.currentItem
                 ignoreUnknownSignals: true
 
-                onActionUp:     sourcesBanner.focus = true
+                onActionUp: sourcesBanner.focus = true
                 onActionCancel: sourcesBanner.focus = true
 
                 onActionLeft:   medialibId.actionLeft(index)
diff --git a/modules/gui/qt/qml/mediacenter/MCMusicDisplay.qml b/modules/gui/qt/qml/mediacenter/MCMusicDisplay.qml
index 90eecf47a1..49fa5ced8e 100644
--- a/modules/gui/qt/qml/mediacenter/MCMusicDisplay.qml
+++ b/modules/gui/qt/qml/mediacenter/MCMusicDisplay.qml
@@ -34,6 +34,17 @@ Utils.NavigableFocusScope {
     property string view: "albums"
     property var viewProperties: ({})
 
+    property var sortModel
+    property var contentModel
+
+    function loadIndex(index) {
+        stackView.replace(root.pageModel[index].component)
+        history.push(["mc", "music", root.pageModel[index].name], History.Stay)
+        stackView.focus = true
+        sortModel = stackView.currentItem.sortModel
+        contentModel = stackView.currentItem.model
+    }
+
     Component { id: albumComp; MusicAlbumsDisplay{ } }
     Component { id: artistComp; MusicArtistsDisplay{ } }
     Component { id: genresComp; MusicGenresDisplay{ } }
@@ -64,7 +75,6 @@ Utils.NavigableFocusScope {
                 append({
                     displayText: e.displayText,
                     name: e.name,
-                    selected: (e.name === root.view)
                 })
             })
         }
@@ -74,160 +84,18 @@ Utils.NavigableFocusScope {
         anchors.fill : parent
         spacing: 0
 
-        Utils.NavigableFocusScope {
-            id: toobar
-
-            Layout.fillWidth: true
-            Layout.preferredHeight: VLCStyle.icon_normal + VLCStyle.margin_small
-
-            Rectangle {
-                anchors.fill: parent
-                color: VLCStyle.colors.banner
-
-                RowLayout {
-                    anchors.fill: parent
-
-                    TabBar {
-                        id: bar
-
-                        focus: true
-
-                        Layout.preferredHeight: parent.height - VLCStyle.margin_small
-                        Layout.alignment: Qt.AlignVCenter
-
-                        background: Rectangle {
-                            color: VLCStyle.colors.banner
-                        }
-                        Component.onCompleted: {
-                            bar.contentItem.focus= true
-                        }
-
-                        /* List of sub-sources for Music */
-                        Repeater {
-                            id: model_music_id
-
-                            model: tabModel
-
-                            //Column {
-                            TabButton {
-                                id: control
-                                text: model.displayText
-                                font.pixelSize: VLCStyle.fontSize_normal
-                                background: Rectangle {
-                                    color: control.hovered ? VLCStyle.colors.bannerHover : VLCStyle.colors.banner
-                                }
-                                contentItem: Label {
-                                    text: control.text
-                                    font: control.font
-                                    color:  control.hovered ?  VLCStyle.colors.textActiveSource : VLCStyle.colors.text
-                                    verticalAlignment: Text.AlignVCenter
-                                    horizontalAlignment: Text.AlignHCenter
-
-                                    Rectangle {
-                                        anchors {
-                                            left: parent.left
-                                            right: parent.right
-                                            bottom: parent.bottom
-                                        }
-                                        height: 2
-                                        visible: control.activeFocus || control.checked
-                                        color: control.activeFocus ? VLCStyle.colors.accent  : VLCStyle.colors.bgHover
-                                    }
-                                }
-                                onClicked: {
-                                    stackView.replace(pageModel[index].component)
-                                    history.push(["mc", "music", model.name ], History.Stay)
-                                    stackView.focus = true
-                                }
-                                checked: (model.name === root.view)
-                                activeFocusOnTab: true
-                                Component.onCompleted: {
-                                    if (model.selected)
-                                        bar.currentIndex = index
-                                }
-                            }
-                        }
-
-                        KeyNavigation.right: searchBox
-                    }
-
-                    /* Spacer */
-                    Item {
-                        Layout.fillWidth: true
-                    }
-
-                    TextField {
-                        Layout.preferredWidth: VLCStyle.widthSearchInput
-                        Layout.preferredHeight: parent.height - VLCStyle.margin_small
-                        Layout.alignment: Qt.AlignVCenter  | Qt.AlignRight
-
-                        id: searchBox
-                        font.pixelSize: VLCStyle.fontSize_normal
-
-                        color: VLCStyle.colors.buttonText
-                        placeholderText: qsTr("filter")
-                        hoverEnabled: true
-
-                        background: Rectangle {
-                            radius: 5 //fixme
-                            color: VLCStyle.colors.button
-                            border.color: {
-                                if ( searchBox.text.length < 3 && searchBox.text.length !== 0 )
-                                    return VLCStyle.colors.alert
-                                else if ( searchBox.hovered || searchBox.activeFocus )
-                                    return VLCStyle.colors.accent
-                                else
-                                    return VLCStyle.colors.buttonBorder
-                           }
-                        }
-
-                        onTextChanged: {
-                            stackView.currentItem.model.searchPattern = text;
-                        }
-
-                        KeyNavigation.right: combo
-                    }
-
-                    /* Selector to choose a specific sorting operation */
-                    Utils.ComboBoxExt {
-                        id: combo
-
-                        //Layout.fillHeight: true
-                        Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
-                        Layout.preferredWidth: VLCStyle.widthSortBox
-                        Layout.preferredHeight: parent.height - VLCStyle.margin_small
-                        textRole: "text"
-                        model: stackView.currentItem.sortModel
-                        onCurrentIndexChanged: {
-                            var sorting = model.get(currentIndex);
-                            stackView.currentItem.model.sortCriteria = sorting.criteria
-                        }
-                    }
-                }
-            }
-
-            onActionLeft:   root.actionLeft(index)
-            onActionRight:  root.actionRight(index)
-            onActionDown:   stackView.focus = true
-            onActionUp:     root.actionUp( index )
-            onActionCancel: root.actionCancel( index )
-
-            Keys.priority: Keys.AfterItem
-            Keys.onPressed: {
-                if (!event.accepted)
-                    defaultKeyAction(event, 0)
-            }
-        }
-
         /* The data elements */
         Utils.StackViewExt  {
             id: stackView
             Layout.fillWidth: true
             Layout.fillHeight: true
+            Layout.margins: VLCStyle.margin_normal
             focus: true
 
             Component.onCompleted: {
                 var found = stackView.loadView(root.pageModel, view, viewProperties)
+                sortModel = stackView.currentItem.sortModel
+                contentModel = stackView.currentItem.model
                 if (!found)
                     replace(pageModel[0].component)
             }
@@ -239,8 +107,8 @@ Utils.NavigableFocusScope {
             onActionLeft:   root.actionLeft(index)
             onActionRight:  root.actionRight(index)
             onActionDown:   root.actionDown(index)
-            onActionUp:     toobar.focus = true
-            onActionCancel: toobar.focus = true
+            onActionUp:     root.actionUp(index)
+            onActionCancel: root.actionCancel(index)
         }
     }
 }
diff --git a/modules/gui/qt/qml/style/VLCIcons.qml b/modules/gui/qt/qml/style/VLCIcons.qml
index 8dea22e5d4..769e5d4f2e 100644
--- a/modules/gui/qt/qml/style/VLCIcons.qml
+++ b/modules/gui/qt/qml/style/VLCIcons.qml
@@ -151,4 +151,6 @@ Item {
     property string topbar_video: "\ue076"
     property string topbar_music: "\ue077"
     property string topbar_network: "\ue078"
+    property string topbar_previous: "\ue079"
+    property string topbar_next: "\ue07a"
 }
diff --git a/modules/gui/qt/qml/style/VLCStyle.qml b/modules/gui/qt/qml/style/VLCStyle.qml
index e418f8ba23..8156dd73f0 100644
--- a/modules/gui/qt/qml/style/VLCStyle.qml
+++ b/modules/gui/qt/qml/style/VLCStyle.qml
@@ -95,6 +95,7 @@ Item {
 
     property int widthSearchInput: 200 * scale;
     property int widthSortBox: 150 * scale;
+    property int heightInput: 22 * scale;
 
 
     //timings
diff --git a/modules/gui/qt/qml/utils/IconToolButton.qml b/modules/gui/qt/qml/utils/IconToolButton.qml
index 7eed79de94..fabb7c6344 100644
--- a/modules/gui/qt/qml/utils/IconToolButton.qml
+++ b/modules/gui/qt/qml/utils/IconToolButton.qml
@@ -27,34 +27,29 @@ ToolButton {
                         : VLCStyle.colors.buttonText
     property int size: VLCStyle.icon_normal
 
-    property color highlightColor: control.activeFocus ? VLCStyle.colors.accent : VLCStyle.colors.bgHover
+    property color highlightColor: VLCStyle.colors.accent
 
-    contentItem: Label {
-        text: control.text
-        color: control.color
+    padding: 0
 
-        font.pixelSize: control.size
-        font.family: VLCIcons.fontFamily
+    contentItem: Item {
 
-        verticalAlignment: Text.AlignVCenter
-        horizontalAlignment: Text.AlignHCenter
-
-        anchors {
-            centerIn: parent
-            //verticalCenter: parent.verticalCenter
-            //rightMargin: VLCStyle.margin_xsmall
-            //leftMargin: VLCStyle.margin_small
+        Rectangle {
+            anchors.fill: parent
+            visible: control.activeFocus || control.hovered || control.highlighted
+            color: highlightColor
         }
 
-        Rectangle {
-            anchors {
-                left: parent.left
-                right: parent.right
-                bottom: parent.bottom
-            }
-            height: 2
-            visible: control.activeFocus || control.checked
-            color: control.highlightColor
+        Label {
+            text: control.text
+            color: control.color
+
+            anchors.centerIn: parent
+
+            font.pixelSize: control.size
+            font.family: VLCIcons.fontFamily
+
+            verticalAlignment: Text.AlignVCenter
+            horizontalAlignment: Text.AlignHCenter
         }
     }
 



More information about the vlc-commits mailing list