diff --git a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml b/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml index fc9b34f2..578cf38d 100644 --- a/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml +++ b/components/mobileshell/qml/actiondrawer/LandscapeContentContainer.qml @@ -28,6 +28,7 @@ PlasmaCore.ColorScope { readonly property real minimizedQuickSettingsOffset: height readonly property real maximizedQuickSettingsOffset: height + readonly property bool isOnLargeScreen: width > quickSettings.width * 2.5 colorGroup: PlasmaCore.Theme.ViewColorGroup @@ -62,11 +63,12 @@ PlasmaCore.ColorScope { // left side ColumnLayout { + id: columnLayout + opacity: applyMinMax(root.actionDrawer.offset / root.maximizedQuickSettingsOffset) spacing: 0 anchors { - top: parent.top - topMargin: Math.min(root.width, root.height) * 0.06 + top: mediaWidget.bottom bottom: parent.bottom bottomMargin: Math.min(root.width, root.height) * 0.06 right: quickSettings.left @@ -75,28 +77,7 @@ PlasmaCore.ColorScope { leftMargin: Math.min(root.width, root.height) * 0.06 } - PlasmaComponents.Label { - id: clock - text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap") - verticalAlignment: Qt.AlignTop - Layout.fillWidth: true - - font.pixelSize: Math.min(40, Math.min(root.width, root.height) * 0.1) - font.weight: Font.ExtraLight - elide: Text.ElideRight - } - PlasmaComponents.Label { - id: date - text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d") - verticalAlignment: Qt.AlignTop - color: PlasmaCore.ColorScope.disabledTextColor - Layout.fillWidth: true - Layout.topMargin: PlasmaCore.Units.smallSpacing - - font.pixelSize: Math.min(20, Math.min(root.width, root.height) * 0.05) - font.weight: Font.Light - } MobileShell.NotificationsWidget { id: notificationWidget @@ -124,6 +105,59 @@ PlasmaCore.ColorScope { } } + PlasmaComponents.Label { + id: clock + text: Qt.formatTime(timeSource.data.Local.DateTime, MobileShell.ShellUtil.isSystem24HourFormat ? "h:mm" : "h:mm ap") + verticalAlignment: Qt.AlignVCenter + opacity: columnLayout.opacity + + anchors { + left: parent.left + top: parent.top + topMargin: columnLayout.anchors.topMargin / 2 + leftMargin: columnLayout.anchors.leftMargin + } + + font.pixelSize: Math.min(40, Math.min(root.width, root.height) * 0.1) + font.weight: Font.ExtraLight + elide: Text.ElideRight + } + + PlasmaComponents.Label { + id: date + text: Qt.formatDate(timeSource.data.Local.DateTime, "ddd MMMM d") + verticalAlignment: Qt.AlignTop + color: PlasmaCore.ColorScope.disabledTextColor + opacity: columnLayout.opacity + + anchors { + left: parent.left + top: clock.bottom + bottom: isOnLargeScreen ? columnLayout.top : mediaWidget.top + topMargin: PlasmaCore.Units.smallSpacing + leftMargin: columnLayout.anchors.leftMargin + } + + font.pixelSize: Math.min(20, Math.min(root.width, root.height) * 0.05) + font.weight: Font.Light + } + + MobileShell.MediaControlsWidget { + id: mediaWidget + property real fullHeight: visible ? height + PlasmaCore.Units.smallSpacing * 6 : 0 + + y: isOnLargeScreen ? date.y - height + date.implicitHeight : date.y + date.implicitHeight + columnLayout.anchors.topMargin / 2 + + opacity: columnLayout.opacity + + anchors { + right: quickSettings.left + left: isOnLargeScreen ? date.right : parent.left + leftMargin: columnLayout.anchors.leftMargin + rightMargin: columnLayout.anchors.rightMargin - quickSettings.leftPadding + } + } + // right sidebar QuickSettingsPanel { id: quickSettings diff --git a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml index 93f6d948..6d3755ae 100644 --- a/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml +++ b/components/mobileshell/qml/actiondrawer/quicksettings/QuickSettingsPanel.qml @@ -89,7 +89,7 @@ Components.BaseItem { Layout.alignment: Qt.AlignTop Layout.fillWidth: true - Layout.maximumHeight: root.fullHeight - root.topPadding - root.bottomPadding - statusBar.height - mediaWidget.fullHeight - PlasmaCore.Units.smallSpacing + Layout.maximumHeight: root.fullHeight - root.topPadding - root.bottomPadding - statusBar.height - PlasmaCore.Units.smallSpacing Layout.maximumWidth: column.width actionDrawer: root.actionDrawer @@ -100,15 +100,6 @@ Components.BaseItem { Item { Layout.fillHeight: true } } - MobileShell.MediaControlsWidget { - id: mediaWidget - property real fullHeight: visible ? height + PlasmaCore.Units.smallSpacing * 6 : 0 - anchors.left: parent.left - anchors.right: parent.right - anchors.bottom: column.bottom - anchors.bottomMargin: root.bottomPadding * 2 + PlasmaCore.Units.smallSpacing * 2 // HACK: can't figure out a cleaner way to position - } - Handle { id: handle anchors.horizontalCenter: parent.horizontalCenter diff --git a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml index 63bec1fa..8f46eb5c 100644 --- a/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml +++ b/components/mobileshell/qml/widgets/notifications/NotificationsWidget.qml @@ -106,7 +106,7 @@ Item { id: list model: historyModel currentIndex: -1 - + clip: true property var pendingNotificationWithAction boundsBehavior: Flickable.StopAtBounds