[vlc-devel] [PATCH 20/33] QML: rework the topbar layout
Adrien Maglo
magsoft at videolan.org
Wed Jun 12 14:01:27 CEST 2019
---
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 +++++++++++++++---
.../gui/qt/qml/mediacenter/MCMainDisplay.qml | 42 +++-
.../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(-)
create mode 100644 modules/gui/qt/pixmaps/topbar/next.svg
create mode 100644 modules/gui/qt/pixmaps/topbar/previous.svg
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 c20da679f6de38e5a546c33d1410e8234909d996..5aaf1b5c9074f07f1f03f856bfa859e17e86c3df 100644
GIT binary patch
delta 536
zcmbQRo^inj#(D-u1_lORh6V;^h5$FW5Z|sv%l0uaM6duwW&DHnjZABNk{B2mBY^yb
z<lMx9PYNGTGcYji0Ah>evJwRbMW#vy29^&%d6x9V;)4JGfhIA8{{iwj(sL@)ZeL?H
zXJB9j%6mP at NKH%;jPu_Dl)D4OW*Hf&^@+?Zf0}?6hyVptGIC2Q&h0;W5Xc8wz{rr3
zpPZPg666Ck`wLM1S8ifO0mDlsHlUmZkgt%Jn45a=`0q^&3;|bw4$>&dFD~KxD(1$(
z5Cn7p%YU%vfF5+wyWJblZ}XLboB0J$AHz)rHem?O#3nL{(U!4hvK?bAW7Xz4j1r6n
z|EvC20cC;S0Am at jDGZE8KprTtWEfZ&#eg&m5CZuRsy07hVrFEnVyIsHh?$8+HB7Z=
z^CQ-BuX?8cl?>Y$+L at dfSQ)q(7=+c?<r&SH&DHrC#Vhzf at WT+3p2#K<kxl<LfGMEC
zX!@AV#rYZ4h1JdF8QJmbV_ at K8SO;+|&=lp(83C3|K%XrN`oh9k%~-Q}TJU9NAyA|g
VWEdJ5!Wc%Av%{siVBx_g0syXfgiinf
delta 375
zcmZ3mfpNlm#(D-u1_lORh6V;^h5$FW5Z|sv3nwx#gqHwCW&DHnjZABN5*Qd5BY^yb
z<lMx9k4rzgGcYi10b-NnvJwRbMW#vy29_5<d6x9V;)4JGfhIA8=K%Q}={c2YJJ#*F
z&%nU?gn_}UBqKF3MKI2*9VmAPh|MxGQtK0$S^hKuEf4_;sAS}pRGfD?1+;*12ax|K
zCqFsSev{5OpxJML{BOC56$K2>nb?5x7C^p2USe+Q!Q;O-F)#!G9mu3nkY8MKL~&L;
z14B>)P|r)S=YSr}`f<!Op5Nvx12;3sp$s<_m}?<46Lak(Mq9?J$##sfj1`;bFiJ4$
z0A+w)0Am at j2@H&SKprTdWEfZ&g at 7~*5CZuRDmFi1VrJa at n)yHD=69^+UYoB5crXD?
ZlMDW`SuEr-GZO>D<lo`aTrlgHYXR+VUmySg
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
}
}
--
2.20.1
More information about the vlc-devel
mailing list