From c1b0bddd106fe319ba338922927cd57317b0f109 Mon Sep 17 00:00:00 2001 From: Chris Josten Date: Tue, 16 Feb 2021 17:25:11 +0100 Subject: [PATCH] Minor UI cleanup --- sailfish/qml/components/PlaybackBar.qml | 28 ++++-- sailfish/qml/harbour-sailfin.qml | 50 ++++------- sailfish/qml/pages/AboutPage.qml | 2 - sailfish/qml/pages/MainPage.qml | 111 +++++++++++++++++------- sailfish/qml/pages/SettingsPage.qml | 1 + 5 files changed, 121 insertions(+), 71 deletions(-) diff --git a/sailfish/qml/components/PlaybackBar.qml b/sailfish/qml/components/PlaybackBar.qml index 6e4a29c..e9a3d35 100644 --- a/sailfish/qml/components/PlaybackBar.qml +++ b/sailfish/qml/components/PlaybackBar.qml @@ -39,7 +39,7 @@ PanelBackground { id: playbackBar height: Theme.itemSizeLarge width: parent.width - y: parent.height + y: parent.height - height property PlaybackManager manager property bool open property real visibleSize: height @@ -55,6 +55,7 @@ PanelBackground { height: parent.height onClicked: playbackBar.state = (playbackBar.state == "large" ? "open" : "large") + RemoteImage { id: albumArt anchors { @@ -217,7 +218,7 @@ PanelBackground { name: "large" PropertyChanges { target: playbackBar - height: Screen.height + height: pageStack.currentOrientation & Orientation.LandscapeMask ? Screen.width : Screen.height } PropertyChanges { target: albumArt @@ -332,7 +333,8 @@ PanelBackground { when: (appWindow.mediaPlayer.playbackState === MediaPlayer.StoppedState || "__hidePlaybackBar" in pageStack.currentPage) && state != "page" PropertyChanges { target: playbackBarTranslate - y: playbackBar.height + // + small padding since the ProgressBar otherwise would stick out + y: playbackBar.height + Theme.paddingSmall } PropertyChanges { target: playbackBar @@ -354,10 +356,24 @@ PanelBackground { Page { property bool __hidePlaybackBar: true showNavigationIndicator: true - Loader { - Component.onCompleted: setSource(Qt.resolvedUrl("PlaybackBar.qml"), - {"state": "page", "manager": manager, "y": 0}) + allowedOrientations: appWindow.allowedOrientations + SilicaFlickable { anchors.fill: parent + PullDownMenu { + MenuItem { + //: Pulley menu item to view detailed media information of a song + text: qsTr("Info") + } + MenuItem { + //: Pulley menu item: add music to a playlist + text: qsTr("Add to playlist") + } + } + Loader { + Component.onCompleted: setSource(Qt.resolvedUrl("PlaybackBar.qml"), + {"state": "page", "manager": manager, "y": 0}) + anchors.fill: parent + } } } } diff --git a/sailfish/qml/harbour-sailfin.qml b/sailfish/qml/harbour-sailfin.qml index f1c630d..2522a45 100644 --- a/sailfish/qml/harbour-sailfin.qml +++ b/sailfish/qml/harbour-sailfin.qml @@ -45,36 +45,9 @@ ApplicationWindow { property bool _hidePlaybackBar: false - Connections { - target: pageStack - onCurrentPageChanged: { - /*_hidePlaybackBar = "__hidePlaybackBar" in pageStack.currentPage - if (_hidePlaybackBar) { - playbackBar.state = "hidden" - } else { - //playbackBar.state = "" - //appWindow.bottomMargin = playbackBar.height - }*/ - console.log("Current page changed: " + _hidePlaybackBar) - } - } - bottomMargin: playbackBar.visibleSize - //FIXME: proper error handling - Connections { - target: ApiClient - onNetworkError: errorNotification.show("Network error: " + error) - onConnectionFailed: errorNotification.show("Connect error: " + error) - //onConnectionSuccess: errorNotification.show("Success: " + loginMessage) - onSetupRequired: { - var isInSetup = pageStack.find(function (page) { return typeof page._isSetupPage !== "undefined" }) !== null - console.log("Is in setup: " + isInSetup) - if (!isInSetup) { - pageStack.replace(Qt.resolvedUrl("pages/setup/AddServerPage.qml"), {"backNavigation": false}); - } - } - } + initialPage: Component { MainPage { @@ -102,7 +75,6 @@ ApplicationWindow { return Qt.resolvedUrl("cover/VideoCover.qml") } } - allowedOrientations: Orientation.All Notification { id: errorNotification @@ -139,8 +111,24 @@ ApplicationWindow { PlaybackBar { id: playbackBar - //open: !_hidePlaybackBar//_mediaPlayer.playbackState != MediaPlayer.StoppedState manager: _playbackManager - //state: "hidden" + state: "hidden" + // CTMBWSIU: Code That Might Break When Silica Is Updated + Component.onCompleted: playbackBar.parent = __silica_applicationwindow_instance._rotatingItem + } + + //FIXME: proper error handling + Connections { + target: ApiClient + onNetworkError: errorNotification.show("Network error: " + error) + onConnectionFailed: errorNotification.show("Connect error: " + error) + //onConnectionSuccess: errorNotification.show("Success: " + loginMessage) + onSetupRequired: { + var isInSetup = pageStack.find(function (page) { return typeof page._isSetupPage !== "undefined" }) !== null + console.log("Is in setup: " + isInSetup) + if (!isInSetup) { + pageStack.replace(Qt.resolvedUrl("pages/setup/AddServerPage.qml"), {"backNavigation": false}); + } + } } } diff --git a/sailfish/qml/pages/AboutPage.qml b/sailfish/qml/pages/AboutPage.qml index 0daae02..b5fc19d 100644 --- a/sailfish/qml/pages/AboutPage.qml +++ b/sailfish/qml/pages/AboutPage.qml @@ -25,8 +25,6 @@ import "../components" Page { id: page - - // The effective value will be restricted by ApplicationWindow.allowedOrientations allowedOrientations: Orientation.All SilicaFlickable { diff --git a/sailfish/qml/pages/MainPage.qml b/sailfish/qml/pages/MainPage.qml index 4877256..c164b06 100644 --- a/sailfish/qml/pages/MainPage.qml +++ b/sailfish/qml/pages/MainPage.qml @@ -35,39 +35,47 @@ Page { id: page allowedOrientations: Orientation.All - SilicaFlickable { - anchors.fill: parent - - // PullDownMenu and PushUpMenu must be declared in SilicaFlickable, SilicaListView or SilicaGridView + // This component is reused both in the normal state and error state + Component { + id: commonPullDownMenu PullDownMenu { MenuItem { + //: Pulley menu item: navigate to application settings page text: qsTr("Settings") onClicked: pageStack.push(Qt.resolvedUrl("SettingsPage.qml")) } MenuItem { - text: qsTr("Refresh") + //: Pulley menu item: reload items on page + text: qsTr("Reload") onClicked: loadModels(true) } busy: mediaLibraryModel.status == ApiModel.Loading } + } + + SilicaFlickable { + id: flickable + anchors.fill: parent + + // PullDownMenu and PushUpMenu must be declared in SilicaFlickable, SilicaListView or SilicaGridView + Loader { sourceComponent: commonPullDownMenu; } // Tell SilicaFlickable the height of its content. - contentHeight: column.visible ? column.height : errorColumn.height + contentHeight: column.height + Theme.paddingMedium // Place our content in a Column. The PageHeader is always placed at the top // of the page, followed by our content. Column { id: column - visible: mediaLibraryModel.status != ApiModel.Error - width: page.width - //spacing: Theme.paddingLarge + UserViewModel { id: mediaLibraryModel2 apiClient: ApiClient } MoreSection { + //- Section header for films and TV shows that an user hasn't completed yet. text: qsTr("Resume watching") clickable: false busy: userResumeModel.status == ApiModel.Loading @@ -86,6 +94,7 @@ Page { } } MoreSection { + //- Section header for next episodes in a TV show that an user was watching. text: qsTr("Next up") clickable: false busy: showNextUpModel.status == ApiModel.Loading @@ -139,30 +148,23 @@ Page { } } } + } + SilicaFlickable { + id: errorFlickable + anchors.fill: parent + visible: false + opacity: 0 + contentHeight: errorColumn.height - Column { - id: errorColumn - width: parent.width - visible: mediaLibraryModel.status == ApiModel.Error - PageHeader { - title: qsTr("Network error") - } + Loader { sourceComponent: commonPullDownMenu; } - Item { - width: 1 - height: page.height / 3 - } - - PlainLabel { - text: qsTr("An error has occurred. Please try again.") - } - Item { width: 1; height: Theme.paddingLarge } - Button { - text: qsTr("Retry") - anchors.horizontalCenter: parent.horizontalCenter - onClicked: loadModels(true) - } - Item { width: 1; height: Theme.paddingLarge } + ViewPlaceholder { + enabled: true + //- ViewPlaceholder text for when a network error has occurred and no contents could be loaded + text: qsTr("Network error") + //- ViewPlaceholder hint text for when a network error has occurred and no contents could be loaded. + //- The user can reload the page by using the pulley, which this text should hint at. + hintText: qsTr("Pull down to retry again") } } @@ -209,7 +211,7 @@ Page { } } Behavior on height { - NumberAnimation { duration: 300 } + NumberAnimation { easing.type: Easing.OutQuad; duration: 300 } } model: itemModel width: parent.width @@ -231,4 +233,49 @@ Page { } } } + + state: "default" + states: [ + State { + name: "default" + when: mediaLibraryModel2.status !== ApiModel.Error + }, + State { + name: "error" + when: mediaLibraryModel2.status === ApiModel.Error + + PropertyChanges { + target: errorFlickable + visible: true + opacity: 1 + } + + PropertyChanges { + target: flickable + opacity: 0 + visible: false + } + } + ] + + transitions: [ + Transition { + from: "default" + to: "error" + SequentialAnimation { + PropertyAction { target: errorFlickable; property: "visible"; value: true } + FadeAnimation {} + PropertyAction { target: flickable; property: "visible"; value: false } + } + }, + Transition { + from: "error" + to: "default" + SequentialAnimation { + PropertyAction { target: flickable; property: "visible"; value: true } + FadeAnimation {} + PropertyAction { target: errorFlickable; property: "visible"; value: false } + } + } + ] } diff --git a/sailfish/qml/pages/SettingsPage.qml b/sailfish/qml/pages/SettingsPage.qml index 2c65732..4710325 100644 --- a/sailfish/qml/pages/SettingsPage.qml +++ b/sailfish/qml/pages/SettingsPage.qml @@ -25,6 +25,7 @@ import "../components" Page { id: settingsPage + allowedOrientations: Orientation.All SilicaFlickable { anchors.fill: parent