Ubuntu Music App

Merge lp:~ahayzen/music-app/remix-small-toolbar-always-show into lp:music-app/remix

  1. remix-small-toolbar-always-show
  2. Merge into remix
Proposed by Andrew Hayzen
Status: Merged
Approved by: Victor Thompson
Approved revision: 644
Merged at revision: 646
Proposed branch: lp:~ahayzen/music-app/remix-small-toolbar-always-show
Merge into: lp:music-app/remix
Prerequisite: lp:~ahayzen/music-app/remix-small-toolbar-design
Diff against target: 485 lines (+60/-164)
11 files modified
MusicArtists.qml (+3/-2)
MusicNowPlaying.qml (+3/-10)
MusicPlaylists.qml (+3/-2)
MusicSettings.qml (+0/-11)
MusicToolbar.qml (+43/-114)
MusicTracks.qml (+3/-2)
MusicaddtoPlaylist.qml (+0/-1)
common/AlbumsPage.qml (+0/-2)
common/MusicPage.qml (+4/-0)
common/SongsPage.qml (+0/-2)
music-app.qml (+1/-18)
To merge this branch: bzr merge lp:~ahayzen/music-app/remix-small-toolbar-always-show
Reviewer Review Type Date Requested Status
Victor Thompson Approve
Ubuntu Phone Apps Jenkins Bot continuous-integration Approve
Review via email: mp+236544@code.launchpad.net

Commit message

* Fix the toolbar so it is always shown
* Move progress bar to the bottom of the toolbar

Description of the change

* Fix the toolbar so it is always shown
* Move progress bar to the bottom of the toolbar

This fixes the toolbar so that it is always shown and sets the bottom margin of MusicPage to the height of the toolbar (so you can scroll to the bottom).

Note that this makes the "larger" toolbar always visible in the now playing page and this will be changed when we start work on the new now playing design.

To post a comment you must log in.
Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

FAILED: Continuous integration, rev:642
No commit message was specified in the merge proposal. Click on the following link and set the commit message (if you want a jenkins rebuild you need to trigger it yourself):
https://code.launchpad.net/~andrew-hayzen/music-app/remix-small-toolbar-always-show/+merge/236544/+edit-commit-message

http://91.189.93.70:8080/job/music-app-remix-ci/2/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/614
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/614/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/2

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/2/rebuild

review: Needs Fixing (continuous-integration)
lp:~ahayzen/music-app/remix-small-toolbar-always-show updated
643. By Andrew Hayzen

* Merge from lp:~andrew-hayzen/music-app/remix-small-toolbar-design

644. By Andrew Hayzen

* Switch progress bar position

Revision history for this message
Ubuntu Phone Apps Jenkins Bot (ubuntu-phone-apps-jenkins-bot) wrote :

PASSED: Continuous integration, rev:644
http://91.189.93.70:8080/job/music-app-remix-ci/7/
Executed test runs:
    SUCCESS: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/646
        deb: http://91.189.93.70:8080/job/generic-mediumtests-utopic-python3/646/artifact/work/output/*zip*/output.zip
    SUCCESS: http://91.189.93.70:8080/job/music-app-remix-utopic-amd64-ci/7

Click here to trigger a rebuild:
http://91.189.93.70:8080/job/music-app-remix-ci/7/rebuild

review: Approve (continuous-integration)
Revision history for this message
Victor Thompson (vthompson) wrote :

1) It seems like attempting to swipe or drag the toolbar causes it to think it was clicked or tapped. Could we make it ignore drags/swipes?
2. I think the progress bar would look nicer if it started at the right of the image and was maybe 2 or 2.5 times as thick. Need to check with design.

Otherwise this looks great!

review: Needs Fixing
Revision history for this message
Victor Thompson (vthompson) wrote :

In lieu of not having design feedback yet on the changes I've proposed, I'm apt to approve this so that we can get it into the app.

There are so obvious testing clean up for showing the toolbar that should be done, but we can make sure we audit that at a later time.

review: Approve

Preview Diff

[H/L] Next/Prev Comment, [J/K] Next/Prev File, [N/P] Next/Prev Hunk
=== modified file 'MusicArtists.qml'
--- MusicArtists.qml 2014-09-20 15:41:33 +0000
+++ MusicArtists.qml 2014-10-01 21:09:08 +0000
@@ -38,8 +38,9 @@
3838
39 ListView {39 ListView {
40 id: artistlist40 id: artistlist
41 anchors.fill: parent41 anchors {
42 anchors.bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight42 fill: parent
43 }
43 model: ArtistsModel {44 model: ArtistsModel {
44 id: artistsModel45 id: artistsModel
45 albumArtists: true46 albumArtists: true
4647
=== modified file 'MusicNowPlaying.qml'
--- MusicNowPlaying.qml 2014-10-01 21:09:08 +0000
+++ MusicNowPlaying.qml 2014-10-01 21:09:08 +0000
@@ -44,10 +44,6 @@
44 }44 }
45 }45 }
4646
47 Component.onCompleted: {
48 onToolbarShownChanged.connect(jumpToCurrent)
49 }
50
51 Connections {47 Connections {
52 target: player48 target: player
53 onCurrentIndexChanged: {49 onCurrentIndexChanged: {
@@ -83,8 +79,9 @@
83 ListView {79 ListView {
84 id: queuelist80 id: queuelist
85 objectName: "nowPlayingQueueList"81 objectName: "nowPlayingQueueList"
86 anchors.fill: parent82 anchors {
87 anchors.bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight83 fill: parent
84 }
88 delegate: queueDelegate85 delegate: queueDelegate
89 model: trackQueue.model86 model: trackQueue.model
90 highlightFollowsCurrentItem: false87 highlightFollowsCurrentItem: false
@@ -117,10 +114,6 @@
117 customdebug("Queue: Now has: " + queuelist.count + " tracks")114 customdebug("Queue: Now has: " + queuelist.count + " tracks")
118 }115 }
119116
120 onMovementStarted: {
121 musicToolbar.hideToolbar();
122 }
123
124 Component {117 Component {
125 id: queueDelegate118 id: queueDelegate
126 ListItemWithActions {119 ListItemWithActions {
127120
=== modified file 'MusicPlaylists.qml'
--- MusicPlaylists.qml 2014-09-20 10:50:45 +0000
+++ MusicPlaylists.qml 2014-10-01 21:09:08 +0000
@@ -116,8 +116,9 @@
116 ListView {116 ListView {
117 id: playlistslist117 id: playlistslist
118 objectName: "playlistsListView"118 objectName: "playlistsListView"
119 anchors.fill: parent119 anchors {
120 anchors.bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight120 fill: parent
121 }
121 model: playlistModel.model122 model: playlistModel.model
122 delegate: playlistDelegate123 delegate: playlistDelegate
123 onCountChanged: {124 onCountChanged: {
124125
=== modified file 'MusicSettings.qml'
--- MusicSettings.qml 2014-09-20 10:50:45 +0000
+++ MusicSettings.qml 2014-10-01 21:09:08 +0000
@@ -30,17 +30,6 @@
30 title: i18n.tr("Settings")30 title: i18n.tr("Settings")
31 contentsHeight: parent.height;31 contentsHeight: parent.height;
3232
33 onVisibleChanged: {
34 if (visible === true)
35 {
36 musicToolbar.disableToolbar()
37 }
38 else
39 {
40 musicToolbar.enableToolbar()
41 }
42 }
43
44 onCancelClicked: PopupUtils.close(musicSettings)33 onCancelClicked: PopupUtils.close(musicSettings)
45 onConfirmClicked: {34 onConfirmClicked: {
46 PopupUtils.close(musicSettings)35 PopupUtils.close(musicSettings)
4736
=== modified file 'MusicToolbar.qml'
--- MusicToolbar.qml 2014-10-01 21:09:08 +0000
+++ MusicToolbar.qml 2014-10-01 21:09:08 +0000
@@ -43,7 +43,6 @@
43 property int transitionDuration: 10043 property int transitionDuration: 100
4444
45 property alias currentHeight: musicToolbarPanel.height45 property alias currentHeight: musicToolbarPanel.height
46 property alias minimizedHeight: musicToolbarPanel.minimizedHeight
47 property alias expandedHeight: musicToolbarPanel.expandedHeight46 property alias expandedHeight: musicToolbarPanel.expandedHeight
48 property alias fullHeight: musicToolbarPanel.fullHeight47 property alias fullHeight: musicToolbarPanel.fullHeight
49 property alias mouseAreaOffset: musicToolbarPanel.hintSize48 property alias mouseAreaOffset: musicToolbarPanel.hintSize
@@ -72,22 +71,6 @@
7271
73 /* Helper functions */72 /* Helper functions */
7473
75 // Disable the toolbar for this page/view (eg a dialog)
76 function disableToolbar()
77 {
78 cachedStates.push(state);
79 musicToolbarPanel.state = "hidden";
80 }
81
82 // Enable the toolbar (run when closing a page that disabled it)
83 function enableToolbar()
84 {
85 if (cachedStates.length > 0)
86 {
87 musicToolbarPanel.state = cachedStates.pop();
88 }
89 }
90
91 // Back button has been pressed, jump up pageStack or back to parent page74 // Back button has been pressed, jump up pageStack or back to parent page
92 function goBack()75 function goBack()
93 {76 {
@@ -98,18 +81,6 @@
98 else if (mainPageStack !== null && mainPageStack.depth > 1) {81 else if (mainPageStack !== null && mainPageStack.depth > 1) {
99 mainPageStack.pop(currentPage)82 mainPageStack.pop(currentPage)
100 }83 }
101
102 startAutohideTimer()
103 }
104
105 // Hide the toolbar
106 function hideToolbar()
107 {
108 if (!wideAspect) {
109 musicToolbarPanel.close();
110 }
111
112 toolbarAutoHideTimer.stop(); // cancel any autohide
113 }84 }
11485
115 // Remove sheet as it has been closed86 // Remove sheet as it has been closed
@@ -135,32 +106,6 @@
135 currentSheet.push(sheet)106 currentSheet.push(sheet)
136 }107 }
137108
138 // Show the toolbar
139 function showToolbar()
140 {
141 startAutohideTimer(); // always attempt to autohide toolbar
142
143 if (!musicToolbarPanel.opened) {
144 musicToolbarPanel.open();
145 }
146 }
147
148 // Start the autohidetimer
149 function startAutohideTimer()
150 {
151 toolbarAutoHideTimer.restart();
152 }
153
154 Connections {
155 target: mainView
156 onWideAspectChanged: {
157 // Force toolbar to show if in wideAspect
158 if (wideAspect && !opened) {
159 showToolbar();
160 }
161 }
162 }
163
164 Panel {109 Panel {
165 id: musicToolbarPanel110 id: musicToolbarPanel
166 anchors {111 anchors {
@@ -169,31 +114,21 @@
169 bottom: parent.bottom114 bottom: parent.bottom
170 }115 }
171 height: currentMode === "full" ? fullHeight : expandedHeight116 height: currentMode === "full" ? fullHeight : expandedHeight
172 locked: wideAspect117 locked: true
173118 opened: true
174 __closeOnContentsClicks: false // TODO: fix bug 1295720
175119
176 // The current mode of the controls120 // The current mode of the controls
177 property string currentMode: wideAspect || (currentPage === nowPlaying)121 property string currentMode: wideAspect || (currentPage === nowPlaying)
178 ? "full" : "expanded"122 ? "full" : "expanded"
179123
180 // Properties for the different heights124 // Properties for the different heights
181 property int minimizedHeight: units.gu(0.25)125 property int expandedHeight: units.gu(7.25)
182 property int expandedHeight: units.gu(7)
183 property int fullHeight: units.gu(11)126 property int fullHeight: units.gu(11)
184127
185 onCurrentModeChanged: {128 onCurrentModeChanged: {
186 musicToolbarFullProgressMouseArea.enabled = currentMode === "full"129 musicToolbarFullProgressMouseArea.enabled = currentMode === "full"
187 }130 }
188131
189 onOpenedChanged: {
190 onToolbarShownChanged(opened, currentPage, currentTab);
191
192 if (opened) {
193 startAutohideTimer();
194 }
195 }
196
197 /* Full toolbar */132 /* Full toolbar */
198 Rectangle {133 Rectangle {
199 id: musicToolbarFullContainer134 id: musicToolbarFullContainer
@@ -747,10 +682,14 @@
747 }682 }
748 ]683 ]
749684
685 /* Disabled (empty state) controls */
750 Rectangle {686 Rectangle {
751 id: disabledPlayerControlsGroup687 id: disabledPlayerControlsGroup
752 anchors {688 anchors {
753 fill: parent689 bottom: playerControlsProgressBar.top
690 left: parent.left
691 right: parent.right
692 top: parent.top
754 }693 }
755 color: "transparent"694 color: "transparent"
756695
@@ -806,10 +745,14 @@
806 }745 }
807 }746 }
808747
748 /* Enabled (queue > 0) controls */
809 Rectangle {749 Rectangle {
810 id: enabledPlayerControlsGroup750 id: enabledPlayerControlsGroup
811 anchors {751 anchors {
812 fill: parent752 bottom: playerControlsProgressBar.top
753 left: parent.left
754 right: parent.right
755 top: parent.top
813 }756 }
814 color: "transparent"757 color: "transparent"
815758
@@ -931,38 +874,37 @@
931 }874 }
932 }875 }
933 }876 }
934 }877
935 }878 /* Object which provides the progress bar when toolbar is minimized */
936879 Rectangle {
937 /* Object which provides the progress bar when toolbar is minimized */880 id: playerControlsProgressBar
938 Rectangle {881 anchors {
939 id: musicToolbarSmallProgressBackground882 bottom: parent.bottom
940 anchors {883 left: parent.left
941 bottom: parent.top884 right: parent.right
942 left: parent.left
943 right: parent.right
944 }
945 color: styleMusic.common.black
946 height: musicToolbarPanel.minimizedHeight
947 visible: (!musicToolbarPanel.animating &&
948 !musicToolbarPanel.opened)
949 || musicToolbarPanel.currentMode == "expanded"
950
951 Rectangle {
952 id: musicToolbarSmallProgressHint
953 anchors.left: parent.left
954 anchors.top: parent.top
955 color: UbuntuColors.blue
956 height: parent.height
957 width: 0
958
959 Connections {
960 target: player
961 onPositionChanged: {
962 musicToolbarSmallProgressHint.width = (player.position / player.duration) * musicToolbarSmallProgressBackground.width
963 }885 }
964 onStopped: {886 color: styleMusic.common.black
965 musicToolbarSmallProgressHint.width = 0;887 height: units.gu(0.25)
888
889 Rectangle {
890 id: playerControlsProgressBarHint
891 anchors {
892 left: parent.left
893 top: parent.top
894 }
895 color: UbuntuColors.blue
896 height: parent.height
897 width: 0
898
899 Connections {
900 target: player
901 onPositionChanged: {
902 playerControlsProgressBarHint.width = (player.position / player.duration) * playerControlsProgressBar.width
903 }
904 onStopped: {
905 playerControlsProgressBarHint.width = 0;
906 }
907 }
966 }908 }
967 }909 }
968 }910 }
@@ -1000,19 +942,6 @@
1000 musicToolbarFullProgressBarContainer.seeking = false;942 musicToolbarFullProgressBarContainer.seeking = false;
1001 }943 }
1002 }944 }
1003
1004 // Timer for autohide
1005 Timer {
1006 id: toolbarAutoHideTimer
1007 interval: 5000
1008 repeat: false
1009 running: false
1010 onTriggered: {
1011 if (currentPage !== nowPlaying) { // don't autohide on now playing
1012 hideToolbar();
1013 }
1014 }
1015 }
1016 }945 }
1017}946}
1018947
1019948
=== modified file 'MusicTracks.qml'
--- MusicTracks.qml 2014-09-20 15:41:33 +0000
+++ MusicTracks.qml 2014-10-01 21:09:08 +0000
@@ -36,8 +36,9 @@
3636
37 ListView {37 ListView {
38 id: tracklist38 id: tracklist
39 anchors.fill: parent39 anchors {
40 anchors.bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight40 fill: parent
41 }
41 highlightFollowsCurrentItem: false42 highlightFollowsCurrentItem: false
42 objectName: "trackstab-listview"43 objectName: "trackstab-listview"
43 model: SortFilterModel {44 model: SortFilterModel {
4445
=== modified file 'MusicaddtoPlaylist.qml'
--- MusicaddtoPlaylist.qml 2014-09-20 10:50:45 +0000
+++ MusicaddtoPlaylist.qml 2014-10-01 21:09:08 +0000
@@ -65,7 +65,6 @@
65 ListView {65 ListView {
66 id: addtoPlaylistView66 id: addtoPlaylistView
67 anchors {67 anchors {
68 bottomMargin: musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight
69 fill: parent68 fill: parent
70 }69 }
71 clip: true70 clip: true
7271
=== modified file 'common/AlbumsPage.qml'
--- common/AlbumsPage.qml 2014-09-20 15:41:33 +0000
+++ common/AlbumsPage.qml 2014-10-01 21:09:08 +0000
@@ -28,7 +28,6 @@
2828
29MusicPage {29MusicPage {
30 id: albumStackPage30 id: albumStackPage
31 anchors.bottomMargin: units.gu(.5)
32 objectName: "albumsArtistPage"31 objectName: "albumsArtistPage"
33 visible: false32 visible: false
3433
@@ -38,7 +37,6 @@
38 ListView {37 ListView {
39 id: albumtrackslist38 id: albumtrackslist
40 anchors {39 anchors {
41 bottomMargin: wideAspect ? musicToolbar.fullHeight : musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight
42 fill: parent40 fill: parent
43 }41 }
44 delegate: albumTracksDelegate42 delegate: albumTracksDelegate
4543
=== modified file 'common/MusicPage.qml'
--- common/MusicPage.qml 2014-08-20 17:35:52 +0000
+++ common/MusicPage.qml 2014-10-01 21:09:08 +0000
@@ -23,6 +23,10 @@
23// generic page for music, could be useful for bottomedge implementation23// generic page for music, could be useful for bottomedge implementation
24Page {24Page {
25 id: thisPage25 id: thisPage
26 anchors {
27 bottomMargin: musicToolbar.currentHeight
28 fill: parent
29 }
2630
27 onVisibleChanged: {31 onVisibleChanged: {
28 if (visible) {32 if (visible) {
2933
=== modified file 'common/SongsPage.qml'
--- common/SongsPage.qml 2014-09-20 15:41:33 +0000
+++ common/SongsPage.qml 2014-10-01 21:09:08 +0000
@@ -29,7 +29,6 @@
2929
30MusicPage {30MusicPage {
31 id: songStackPage31 id: songStackPage
32 anchors.bottomMargin: units.gu(.5)
33 objectName: "songsPage"32 objectName: "songsPage"
34 visible: false33 visible: false
3534
@@ -52,7 +51,6 @@
52 ListView {51 ListView {
53 id: albumtrackslist52 id: albumtrackslist
54 anchors {53 anchors {
55 bottomMargin: wideAspect ? musicToolbar.fullHeight : musicToolbar.mouseAreaOffset + musicToolbar.minimizedHeight
56 fill: parent54 fill: parent
57 }55 }
58 delegate: albumTracksDelegate56 delegate: albumTracksDelegate
5957
=== modified file 'music-app.qml'
--- music-app.qml 2014-09-30 01:04:02 +0000
+++ music-app.qml 2014-10-01 21:09:08 +0000
@@ -46,11 +46,7 @@
46 // Global keyboard shortcuts46 // Global keyboard shortcuts
47 focus: true47 focus: true
48 Keys.onPressed: {48 Keys.onPressed: {
49 if (event.key === Qt.Key_Alt) {49 if(event.key === Qt.Key_Escape) {
50 // On alt key press show toolbar and start autohide timer
51 musicToolbar.showToolbar();
52 }
53 else if(event.key === Qt.Key_Escape) {
54 musicToolbar.goBack(); // Esc Go back50 musicToolbar.goBack(); // Esc Go back
55 }51 }
56 else if(event.modifiers === Qt.AltModifier) {52 else if(event.modifiers === Qt.AltModifier) {
@@ -95,11 +91,9 @@
95 case Qt.Key_J: // Ctrl+J Jump to playing song91 case Qt.Key_J: // Ctrl+J Jump to playing song
96 nowPlaying.visible = true;92 nowPlaying.visible = true;
97 nowPlaying.positionAt(player.currentIndex);93 nowPlaying.positionAt(player.currentIndex);
98 musicToolbar.showToolbar();
99 break;94 break;
100 case Qt.Key_N: // Ctrl+N Show now playing95 case Qt.Key_N: // Ctrl+N Show now playing
101 nowPlaying.visible = true;96 nowPlaying.visible = true;
102 musicToolbar.showToolbar();
103 break;97 break;
104 case Qt.Key_P: // Ctrl+P Toggle playing state98 case Qt.Key_P: // Ctrl+P Toggle playing state
105 player.toggle();99 player.toggle();
@@ -576,12 +570,6 @@
576 if (args.values.url) {570 if (args.values.url) {
577 uriHandler.process(args.values.url, true);571 uriHandler.process(args.values.url, true);
578 }572 }
579
580 // Show toolbar and start timer if there is music
581 if (!emptyPage.noMusic) {
582 musicToolbar.showToolbar();
583 musicToolbar.startAutohideTimer();
584 }
585 }573 }
586574
587 // VARIABLES575 // VARIABLES
@@ -597,7 +585,6 @@
597 property bool selectedAlbum: false585 property bool selectedAlbum: false
598586
599 signal listItemSwiping(int i)587 signal listItemSwiping(int i)
600 signal onToolbarShownChanged(bool shown, var currentPage, var currentTab)
601588
602 property bool wideAspect: width >= units.gu(70) && loadedUI589 property bool wideAspect: width >= units.gu(70) && loadedUI
603 property bool loadedUI: false // property to detect if the UI has finished590 property bool loadedUI: false // property to detect if the UI has finished
@@ -679,8 +666,6 @@
679 // Show the Now Playing page and make sure the track is visible666 // Show the Now Playing page and make sure the track is visible
680 tabs.pushNowPlaying();667 tabs.pushNowPlaying();
681 nowPlaying.ensureVisibleIndex = index;668 nowPlaying.ensureVisibleIndex = index;
682
683 musicToolbar.showToolbar();
684 }669 }
685 else {670 else {
686 player.source = file;671 player.source = file;
@@ -698,8 +683,6 @@
698 // Show the Now Playing page and make sure the track is visible683 // Show the Now Playing page and make sure the track is visible
699 tabs.pushNowPlaying();684 tabs.pushNowPlaying();
700 nowPlaying.ensureVisibleIndex = index;685 nowPlaying.ensureVisibleIndex = index;
701
702 musicToolbar.showToolbar();
703 }686 }
704687
705 function playRandomSong(shuffle)688 function playRandomSong(shuffle)

Subscribers

People subscribed via source and target branches