forked from ghostfox/qyouradio
Implement smooth source select with Loaders, implement vertical tabbar for settings, add header
This commit is contained in:
172
ViewSettings.qml
172
ViewSettings.qml
@@ -8,50 +8,168 @@ RowLayout {
|
||||
// Layout.leftMargin: parent.width * 2
|
||||
// Layout.rightMargin: parent.width * 2
|
||||
|
||||
TabBar {
|
||||
Container {
|
||||
id: settingsCategory
|
||||
Layout.fillWidth: false
|
||||
Layout.fillHeight: true
|
||||
Layout.rightMargin: 15
|
||||
|
||||
spacing: 10
|
||||
implicitWidth: 240
|
||||
clip: true
|
||||
|
||||
contentItem: ListView {
|
||||
spacing: 7.5
|
||||
model: settingsCategory.contentModel
|
||||
currentIndex: settingsCategory.currentIndex
|
||||
|
||||
spacing: settingsCategory.spacing
|
||||
snapMode: ListView.SnapOneItem
|
||||
orientation: ListView.Vertical
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
flickableDirection: Flickable.AutoFlickIfNeeded
|
||||
snapMode: ListView.SnapToItem
|
||||
|
||||
highlightMoveDuration: 0
|
||||
highlightRangeMode: ListView.ApplyRange
|
||||
preferredHighlightBegin: 40
|
||||
preferredHighlightEnd: width - 40
|
||||
}
|
||||
|
||||
TabButton {
|
||||
|
||||
Button {
|
||||
text: qsTr("Appearance")
|
||||
width: 284
|
||||
width: 240
|
||||
outlined: true
|
||||
onClicked: settingsCategory.currentIndex = 0
|
||||
}
|
||||
|
||||
TabButton {
|
||||
Button {
|
||||
text: qsTr("Language")
|
||||
width: 240
|
||||
outlined: true
|
||||
onClicked: settingsCategory.currentIndex = 1
|
||||
}
|
||||
|
||||
Button {
|
||||
text: qsTr("Playback Settings")
|
||||
width: 240
|
||||
outlined: true
|
||||
onClicked: settingsCategory.currentIndex = 2
|
||||
}
|
||||
|
||||
Button {
|
||||
text: qsTr("About")
|
||||
width: 284
|
||||
width: 240
|
||||
outlined: true
|
||||
onClicked: settingsCategory.currentIndex = 3
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
Layout.fillHeight: true
|
||||
width: 5
|
||||
color: Colors.text
|
||||
radius: 5
|
||||
}
|
||||
|
||||
StackLayout {
|
||||
SwipeView {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
currentIndex: settingsCategory.currentIndex
|
||||
orientation: Qt.Vertical
|
||||
interactive: false
|
||||
currentIndex: tabbar.currentIndex
|
||||
|
||||
Loader {
|
||||
active: tabbar.currentIndex == 0
|
||||
asynchronous: true
|
||||
visible: status == Loader.Ready
|
||||
sourceComponent: ColumnLayout {
|
||||
Label {
|
||||
text: "Appearance"
|
||||
heading: "h1"
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
active: tabbar.currentIndex == 1
|
||||
asynchronous: true
|
||||
visible: status == Loader.Ready
|
||||
sourceComponent: ColumnLayout {
|
||||
Label {
|
||||
text: "Language"
|
||||
heading: "h1"
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
active: tabbar.currentIndex == 2
|
||||
asynchronous: true
|
||||
visible: status == Loader.Ready
|
||||
sourceComponent: ColumnLayout {
|
||||
Label {
|
||||
text: "Playback Settings"
|
||||
heading: "h1"
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
active: tabbar.currentIndex == 3
|
||||
asynchronous: true
|
||||
visible: status == Loader.Ready
|
||||
sourceComponent: ColumnLayout {
|
||||
Label {
|
||||
text: "About"
|
||||
heading: "h1"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "YouRadio"
|
||||
heading: "h2"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "by Youpiter"
|
||||
heading: "h3"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "Music source"
|
||||
heading: "base"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "QYouRadio"
|
||||
heading: "h3"
|
||||
font.bold: true
|
||||
}
|
||||
Label {
|
||||
text: "by Ghostfox"
|
||||
heading: "h3"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "Client development"
|
||||
heading: "base"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "Attribution"
|
||||
heading: "h1"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "Qt"
|
||||
heading: "h2"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "by Qt Group Inc."
|
||||
heading: "h3"
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
Label {
|
||||
text: "Open-Source library on which QYouRadio is built uppon, licensed under LGPL-3.0"
|
||||
heading: "base"
|
||||
font.bold: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user