diff --git a/src/qml/ElisaMainWindow.qml b/src/qml/ElisaMainWindow.qml --- a/src/qml/ElisaMainWindow.qml +++ b/src/qml/ElisaMainWindow.qml @@ -31,7 +31,7 @@ visible: true minimumWidth: contentView.showPlaylist ? 1100 : 700 - minimumHeight: 600 + minimumHeight: headerBar.isMaximized ? 600 * 0.2 + elisaTheme.mediaPlayerControlHeight : 600 LayoutMirroring.enabled: Qt.application.layoutDirection == Qt.RightToLeft LayoutMirroring.childrenInherit: true @@ -91,6 +91,12 @@ property int width : 1100 property int height : 600 + // When the botton part is hidden and we are not in party mode + // this two properties are used to remember for resetting the + // width and height when needed + property int oldWidth: 1100 + property int oldHeight: 600 + property var playListState property var audioPlayerState @@ -104,6 +110,8 @@ property bool expandedFilterView: false property bool showPlaylist: true + + property bool headerBarIsMaximized: false } Connections { @@ -124,6 +132,8 @@ persistentSettings.playControlItemRepeat = headerBar.playerControl.repeat persistentSettings.playControlItemShuffle = headerBar.playerControl.shuffle persistentSettings.showPlaylist = contentView.showPlaylist + + persistentSettings.headerBarIsMaximized = headerBar.isMaximized } } @@ -175,9 +185,9 @@ spacing: 0 Item { - Layout.preferredHeight: mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight - Layout.minimumHeight: mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight - Layout.maximumHeight: mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight + Layout.preferredHeight: headerBar.isMaximized ? mainWindow.height : mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight + Layout.minimumHeight: headerBar.isMaximized ? mainWindow.height : mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight + Layout.maximumHeight: headerBar.isMaximized ? mainWindow.height : mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight Layout.fillWidth: true HeaderBar { @@ -216,6 +226,19 @@ playerControl.onPlayPrevious: elisa.mediaPlayList.skipPreviousTrack() playerControl.onPlayNext: elisa.mediaPlayList.skipNextTrack() + playerControl.onMaximize: + { + persistentSettings.oldHeight = mainWindow.height + mainWindow.height = mainWindow.height * 0.2 + elisaTheme.mediaPlayerControlHeight; + } + + playerControl.onMinimize: + { + mainWindow.height = persistentSettings.oldHeight + } + + playerControl.isMaximized: persistentSettings.headerBarIsMaximized + TrackImportNotification { id: importedTracksCountNotification @@ -262,6 +285,7 @@ Layout.fillHeight: true Layout.fillWidth: true showPlaylist: persistentSettings.showPlaylist + visible: !headerBar.playerControl.maximized } } } diff --git a/src/qml/HeaderBar.qml b/src/qml/HeaderBar.qml --- a/src/qml/HeaderBar.qml +++ b/src/qml/HeaderBar.qml @@ -36,6 +36,7 @@ property int trackRating property bool ratingVisible property alias playerControl: playControlItem + property alias isMaximized: playControlItem.isMaximized onImageChanged: { @@ -57,8 +58,9 @@ source: (oldImage ? oldImage : Qt.resolvedUrl(elisaTheme.defaultBackgroundImage)) asynchronous: true - anchors.fill: parent + + Layout.maximumHeight: elisaTheme.navigationBarHeight fillMode: Image.PreserveAspectCrop sourceSize.width: parent.width diff --git a/src/qml/MediaPlayerControl.qml b/src/qml/MediaPlayerControl.qml --- a/src/qml/MediaPlayerControl.qml +++ b/src/qml/MediaPlayerControl.qml @@ -35,6 +35,7 @@ property bool playEnabled property bool skipForwardEnabled property bool skipBackwardEnabled + property bool isMaximized property bool shuffle property bool repeat @@ -45,6 +46,9 @@ signal playNext() signal seek(int position) + signal maximize() + signal minimize() + id: musicWidget SystemPalette { @@ -67,6 +71,41 @@ anchors.fill: parent spacing: 5 + Button { + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize + Layout.alignment: Qt.AlignVCenter + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize + Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : 0 + Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : 0 + + contentItem: Image { + anchors.fill: parent + source: Qt.resolvedUrl(musicWidget.isMaximized ? elisaTheme.minimizeIcon : elisaTheme.maximizeIcon) + + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize + + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize + + fillMode: Image.PreserveAspectFit + opacity: 1.0 + } + + background: Rectangle { + border.width: 0 + opacity: 0.0 + } + + onClicked: { + musicWidget.isMaximized = !musicWidget.isMaximized + } + } + RoundButton { focus: skipBackwardEnabled @@ -568,5 +607,14 @@ { console.log('volume of player controls changed: ' + volume) } + + onIsMaximizedChanged: + { + if (musicWidget.isMaximized) { + musicWidget.maximize() + } else { + musicWidget.minimize() + } + } } diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml --- a/src/qml/Theme.qml +++ b/src/qml/Theme.qml @@ -51,6 +51,8 @@ property string noRepeatIcon: 'image://icon/media-repeat-none' property string noShuffleIcon: 'image://icon/media-playlist-normal' property string folderIcon: 'image://icon/document-open-folder' + property string maximizeIcon: 'image://icon/draw-arrow-down' + property string minimizeIcon: 'image://icon/draw-arrow-up' property int layoutHorizontalMargin: dp(8) property int layoutVerticalMargin: dp(6)