NavigationActionBar.qml 7.54 KB
Newer Older
1
/*
Matthieu Gallien's avatar
Matthieu Gallien committed
2 3 4
   SPDX-FileCopyrightText: 2016 (c) Matthieu Gallien <matthieu_gallien@yahoo.fr>

   SPDX-License-Identifier: LGPL-3.0-or-later
5 6
 */

7
import QtQml 2.2
Alexander Stippich's avatar
Alexander Stippich committed
8
import QtQuick 2.7
9
import QtQuick.Layouts 1.3
10
import QtQuick.Controls 2.3
Carl Schwan's avatar
Carl Schwan committed
11
import org.kde.kirigami 2.8 as Kirigami
12

13
ColumnLayout {
14
    id: navigationBar
15

16 17
    spacing: 0

18 19 20 21
    property string mainTitle
    property string secondaryTitle
    property url image
    property bool allowArtistNavigation: false
Jerome Guidon's avatar
Jerome Guidon committed
22 23
    property bool showEnqueueButton: true
    property bool showCreateRadioButton
24

25 26 27 28 29
    property string labelText
    property bool showRating: true
    property alias filterText: filterTextInput.text
    property alias filterRating: ratingFilter.starRating
    property bool enableGoBack: true
30
    property bool expandedFilterView
31 32
    property bool enableSorting: true
    property bool sortOrder
33

34

35
    signal enqueue();
36
    signal replaceAndPlay();
Jerome Guidon's avatar
Jerome Guidon committed
37
    signal createRadio();
38 39
    signal goBack();
    signal showArtist();
40
    signal sort(var order);
41

42
    HeaderFooterToolbar {
43 44
        toolbarType: filterRow.visible ? HeaderFooterToolbar.ToolbarType.Other
                                       : HeaderFooterToolbar.ToolbarType.Header
45
        Layout.fillWidth: true
46 47
        contentItems: [

48
            FlatButtonWithToolTip {
49 50 51
                id: goPreviousButton
                objectName: 'goPreviousButton'
                visible: enableGoBack
52 53 54
                text: i18nc("navigate back in the views stack", "Back")
                icon.name: (Qt.application.layoutDirection == Qt.RightToLeft) ? "go-next" : "go-previous"
                onClicked: goBack()
55 56 57
            },
            Item {
                id: spacer
58
                Layout.preferredWidth: Kirigami.Units.largeSpacing
59 60 61 62 63
                visible: goPreviousButton.visible
            },
            Image {
                id: mainIcon
                source: image
64

65 66
                Layout.preferredHeight: authorAndAlbumLayout.height
                Layout.preferredWidth: height
67 68 69 70 71 72 73 74
                sourceSize.height: height
                sourceSize.width: width
                fillMode: Image.PreserveAspectFit
                asynchronous: true

                Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
            },
            Item {
75
                Layout.preferredWidth: Kirigami.Units.largeSpacing
76 77 78
                visible: mainIcon.visible
            },
            ColumnLayout {
79 80 81
                Layout.fillWidth: true
                Layout.fillHeight: true

82 83 84 85 86 87
                id: authorAndAlbumLayout

                LabelWithToolTip {
                    id: albumLabel
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    Layout.fillWidth: true
88

89
                    text: mainTitle
90
                    level: authorLabel.visible ? 4 : 1
91 92
                    font.weight: authorLabel.visible ? Font.Bold : Font.Normal
                    elide: Text.ElideRight
93
                }
94 95
                LabelWithToolTip {
                    id: authorLabel
Diego Gangl's avatar
Diego Gangl committed
96

97 98
                    Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                    Layout.fillWidth: true
99

100 101
                    text: secondaryTitle
                    elide: Text.ElideRight
102

103
                    visible: secondaryTitle !== ""
104
                }
105
            },
Jerome Guidon's avatar
Jerome Guidon committed
106 107 108
            FlatButtonWithToolTip {
                objectName: 'createRadioButton'
                visible: showCreateRadioButton
109
                text: i18nc("Create a new radio", "Create a radio")
Alexander Stippich's avatar
Alexander Stippich committed
110
                icon.name: "list-add"
111
                onClicked: createRadio()
Jerome Guidon's avatar
Jerome Guidon committed
112
            },
113
            FlatButtonWithToolTip {
114
                objectName: 'enqueueButton'
Jerome Guidon's avatar
Jerome Guidon committed
115
                visible: !showCreateRadioButton
116 117 118
                text: i18nc("Add current list to playlist", "Enqueue")
                icon.name: "list-add"
                onClicked: enqueue()
119
            },
120
            FlatButtonWithToolTip {
121
                objectName: 'replaceAndPlayButton'
Jerome Guidon's avatar
Jerome Guidon committed
122
                visible: !showCreateRadioButton
123 124 125
                text: i18n("Play now, replacing contents of Playlist")
                icon.name: "media-playback-start"
                onClicked: replaceAndPlay()
126
            },
127
            FlatButtonWithToolTip {
128
                objectName: 'showArtistButton'
Jerome Guidon's avatar
Jerome Guidon committed
129
                visible: allowArtistNavigation && !showCreateRadioButton
130 131 132
                text: i18nc("Button to navigate to the artist of the album", "Display Artist")
                icon.name: "view-media-artist"
                onClicked: showArtist()
133
            },
134
            FlatButtonWithToolTip {
135
                objectName: 'sortAscendingButton'
Jerome Guidon's avatar
Jerome Guidon committed
136
                visible: enableSorting && !showCreateRadioButton
137 138 139
                text: i18nc("Toggle between ascending and descending order", "Toggle sort order")
                icon.name: sortOrder ? "view-sort-ascending" : "view-sort-descending"
                onClicked: sortOrder ? sort(Qt.DescendingOrder) : sort(Qt.AscendingOrder)
140
            },
141
            FlatButtonWithToolTip {
142
                objectName: 'showFilterButton'
Jerome Guidon's avatar
Jerome Guidon committed
143
                visible: !showCreateRadioButton
144 145 146 147 148
                text: !navigationBar.expandedFilterView ? i18nc("Show filters in the navigation bar", "Show Search Options") : i18nc("Hide filters in the navigation bar", "Hide Search Options")
                icon.name: 'search'
                checkable: true
                checked: expandedFilterView
                onClicked: persistentSettings.expandedFilterView = !persistentSettings.expandedFilterView
149
            }
150
        ]
151
    }
152

153
    HeaderFooterToolbar {
154
        id: filterRow
155
        toolbarType: HeaderFooterToolbar.ToolbarType.Header
156
        Layout.fillWidth: true
157

158
        visible: opacity > 0.0
159

160
        opacity: 0
161

162
        contentItems: [
Carl Schwan's avatar
Carl Schwan committed
163
            Kirigami.SearchField {
164 165
                id: filterTextInput
                objectName: 'filterTextInput'
166

167
                Layout.fillWidth: true
168
                focusSequence: ""
169

170 171
                selectByMouse: true

172 173 174
                Accessible.role: Accessible.EditableText

                placeholderText: i18n("Search for album name, artist, etc.")
175 176

                Keys.onEscapePressed: persistentSettings.expandedFilterView = false;
177 178
            },
            Item {
179
                width: Kirigami.Units.largeSpacing
180 181 182
            },
            LabelWithToolTip {
                text: i18n("Filter by rating: ")
183

184 185 186 187 188
                visible: showRating
            },
            RatingStar {
                id: ratingFilter
                objectName: 'ratingFilter'
189

190 191
                visible: showRating
                hoverWidgetOpacity: 1
192

193
                readOnly: false
194

195 196
            }
        ]
197 198 199 200
    }

    states: [
        State {
201 202
            name: 'collapsed'
            when: !expandedFilterView
203 204 205 206
            PropertyChanges {
                target: filterRow
                opacity: 0.0
            }
207 208 209 210 211
            StateChangeScript {
                // Focus main content view since that's probably what the user
                // wants to interact with next
                script: contentDirectoryView.forceActiveFocus();
            }
212 213 214
        },
        State {
            name: 'expanded'
215
            when: expandedFilterView
216 217 218 219
            PropertyChanges {
                target: filterRow
                opacity: 1.0
            }
220 221 222
            StateChangeScript {
                script: filterTextInput.forceActiveFocus()
            }
223 224 225
        }
    ]
    transitions: Transition {
226
        from: "expanded,collapsed"
227 228 229
        PropertyAnimation {
            properties: "opacity"
            easing.type: Easing.Linear
230
            duration: Kirigami.Units.longDuration
231
        }
232
    }
233
}