Commit 4c61cba7 authored by Aditya Mehra's avatar Aditya Mehra
Browse files

Fix scaling and layouts for lower resolution displays

parent 8fa363c7
Pipeline #109852 passed with stage
in 59 seconds
......@@ -98,95 +98,106 @@ FocusScope {
id: paSinkModel
}
ColumnLayout {
id: contentLayout
width: parent.width - settingsView.width
property Item currentSection
y: currentSection ? -currentSection.y : 0
Item {
anchors.top: headerAreaTop.bottom
anchors.topMargin: Kirigami.Units.largeSpacing * 2
anchors.left: parent.left
anchors.leftMargin: Kirigami.Units.largeSpacing
Behavior on y {
NumberAnimation {
duration: Kirigami.Units.longDuration * 2
easing.type: Easing.InOutQuad
}
}
height: parent.height
width: parent.width - settingsView.width
anchors.bottom: footerMain.top
clip: true
ColumnLayout {
id: contentLayout
width: parent.width
property Item currentSection
y: currentSection ? (currentSection.y > parent.height / 2 ? -currentSection.y + Kirigami.Units.gridUnit * 3 : 0) : 0
anchors.left: parent.left
anchors.leftMargin: Kirigami.Units.largeSpacing
BigScreen.TileView {
id: sinkView
model: paSinkModel
focus: true
Layout.alignment: Qt.AlignTop
title: i18n("Playback Devices")
currentIndex: 0
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = sinkView
settingsViewDetails.model = sinkView.model
settingsViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
settingsViewDetails.checkPlayBack = true
settingsViewDetails.typeDevice = "sink"
Behavior on y {
NumberAnimation {
duration: Kirigami.Units.longDuration * 2
easing.type: Easing.InOutQuad
}
}
delegate: Delegates.AudioDelegate {
isPlayback: true
type: "sink"
BigScreen.TileView {
id: sinkView
model: paSinkModel
focus: true
Layout.alignment: Qt.AlignTop
title: i18n("Playback Devices")
currentIndex: 0
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = sinkView
settingsViewDetails.model = sinkView.model
settingsViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
settingsViewDetails.checkPlayBack = true
settingsViewDetails.typeDevice = "sink"
}
}
delegate: Delegates.AudioDelegate {
isPlayback: true
type: "sink"
}
navigationDown: sourceView.visible ? sourceView : kcmcloseButton
onCurrentItemChanged: {
settingsViewDetails.currentIndex = sinkView.currentIndex
settingsViewDetails.positionViewAtIndex(sinkView.currentIndex, ListView.Center);
}
}
navigationDown: sourceView.visible ? sourceView : kcmcloseButton
onCurrentItemChanged: {
settingsViewDetails.currentIndex = sinkView.currentIndex
settingsViewDetails.positionViewAtIndex(sinkView.currentIndex, ListView.Center);
Item {
id: extraSpacing
Layout.preferredHeight: Kirigami.Units.largeSpacing
Layout.fillWidth: true
}
}
BigScreen.TileView {
id: sourceView
model: paSourceModel
title: i18n("Recording Devices")
currentIndex: 0
focus: false
Layout.alignment: Qt.AlignTop
visible: sourceView.view.count > 0 ? 1 : 0
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = sourceView
settingsViewDetails.model = sourceView.model
BigScreen.TileView {
id: sourceView
model: paSourceModel
title: i18n("Recording Devices")
currentIndex: 0
focus: false
Layout.alignment: Qt.AlignTop
visible: sourceView.view.count > 0 ? 1 : 0
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = sourceView
settingsViewDetails.model = sourceView.model
settingsViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
settingsViewDetails.checkPlayBack = false
settingsViewDetails.typeDevice = "source"
}
}
delegate: Delegates.AudioDelegate {
isPlayback: false
type: "source"
}
navigationUp: sinkView
navigationDown: kcmcloseButton
onCurrentItemChanged: {
settingsViewDetails.currentIndex = sourceView.currentIndex
settingsViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
settingsViewDetails.checkPlayBack = false
settingsViewDetails.typeDevice = "source"
}
}
delegate: Delegates.AudioDelegate {
isPlayback: false
type: "source"
}
navigationUp: sinkView
navigationDown: kcmcloseButton
onCurrentItemChanged: {
settingsViewDetails.currentIndex = sourceView.currentIndex
settingsViewDetails.positionViewAtIndex(currentIndex, ListView.Center);
}
}
Component.onCompleted: {
sinkView.forceActiveFocus();
}
Connections {
target: root
onActivateDeviceView: {
Component.onCompleted: {
sinkView.forceActiveFocus();
}
}
Item {
Layout.preferredHeight: Kirigami.Units.gridUnit * 5
Connections {
target: root
onActivateDeviceView: {
sinkView.forceActiveFocus();
}
}
Item {
Layout.preferredHeight: Kirigami.Units.gridUnit * 5
}
}
}
......@@ -204,7 +215,7 @@ FocusScope {
anchors.right: parent.right
anchors.rightMargin: -Kirigami.Units.smallSpacing
height: parent.height
width: parent.width / 3.5
width: Kirigami.Units.gridUnit * 15
color: Kirigami.Theme.backgroundColor
ListView {
......
......@@ -42,8 +42,9 @@ Item {
backBtnSettingsItem.clicked()
}
ColumnLayout {
Item {
id: colLayoutSettingsItem
clip: true
anchors {
top: parent.top
left: parent.left
......@@ -51,23 +52,18 @@ Item {
bottom: footerAreaSettingsSept.top
margins: Kirigami.Units.largeSpacing * 2
}
Item {
Layout.preferredHeight: Math.round(parent.height * 0.15)
Layout.fillWidth: true
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: parent.height / 3
Layout.alignment: Qt.AlignTop
anchors.centerIn: parent
width: parent.width
height: dIcon.height + label1.paintedHeight + label2.paintedHeight + lblSept.height + lblSept2.height + setDefBtn.height + (volObj.height * 2)
Kirigami.Icon {
id: dIcon
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: width / 3
height: width / 4
source: Icon.name(Volume, Muted, isPlayback ? "audio-volume" : "microphone-sensitivity")
}
......@@ -187,11 +183,6 @@ Item {
}
}
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: parent.height / 3
}
}
Kirigami.Separator {
......
......@@ -85,7 +85,7 @@ BigScreen.AbstractDelegate {
maximumLineCount: 2
textFormat: Text.PlainText
color: Kirigami.Theme.textColor
font.pixelSize: textMetrics.font.pixelSize * 1.1
font.pixelSize: textMetrics.font.pixelSize * 1
text: currentPort.description
}
......@@ -99,7 +99,7 @@ BigScreen.AbstractDelegate {
maximumLineCount: 2
textFormat: Text.PlainText
color: Kirigami.Theme.textColor
font.pixelSize: textMetrics.font.pixelSize * 0.9
font.pixelSize: textMetrics.font.pixelSize * 0.8
text: Description
}
}
......
/*
SPDX-FileCopyrightText: 2020 Aditya Mehra <aix.m@outlook.com>
SPDX-License-Identifier: LGPL-2.1-only OR LGPL-3.0-only OR LicenseRef-KDE-Accepted-LGPL
*/
import QtQuick.Layouts 1.14
import QtQuick 2.14
import QtQuick.Window 2.14
......@@ -62,40 +69,61 @@ Rectangle {
}
}
ColumnLayout {
id: colLayoutSettingsItem
Item {
id: emptyArea
height: Kirigami.Units.gridUnit * 2
width: parent.width
anchors.top: parent.top
}
Flickable {
id: flickContentLayout
clip: true
anchors {
top: parent.top
top: emptyArea.bottom
left: parent.left
right: parent.right
bottom: footerAreaSettingsSept.top
margins: Kirigami.Units.largeSpacing * 2
}
contentWidth: width
contentHeight: colLayoutSettingsItem.implicitHeight
function makeVisible(item) {
var startArea = item.mapToItem(contentItem, 0, 0).y
var endArea = item.height + startArea
if ( startArea < contentY || startArea > contentY + height || endArea < contentY || endArea > contentY + height) {
contentY = Math.max(0, Math.min(startArea - height + item.height, contentHeight - height))
}
}
Item {
Layout.preferredHeight: Math.round(parent.height * 0.05)
Layout.fillWidth: true
Behavior on contentY {
NumberAnimation {
duration: Kirigami.Units.longDuration * 2
easing.type: Easing.InOutQuad
}
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: parent.height / 3
Layout.alignment: Qt.AlignTop
ColumnLayout {
id: colLayoutSettingsItem
width: parent.width
anchors.top: parent.top
Kirigami.Icon {
id: dIcon
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: width / 3
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.preferredWidth: parent.width
Layout.preferredHeight: width / 3
source: "preferences-system-time"
}
Kirigami.Heading {
id: label1
width: parent.width
anchors.top: dIcon.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.topMargin: Kirigami.Units.largeSpacing
horizontalAlignment: Text.AlignHCenter
wrapMode: Text.WordWrap
level: 2
......@@ -107,23 +135,23 @@ Rectangle {
Kirigami.Separator {
id: lblSept
anchors.top: label1.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
height: 1
width: parent.width
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
Layout.topMargin: Kirigami.Units.largeSpacing
Layout.preferredHeight: 1
Layout.fillWidth: true
}
Kirigami.ListSectionHeader {
id: timeDisplaySectionHeader
anchors.top: lblSept.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignTop
Layout.topMargin: Kirigami.Units.largeSpacing
label: i18n("Time Display")
}
Kirigami.BasicListItem {
id: timeDisplayItemTwo
anchors.top: timeDisplaySectionHeader.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignTop
Layout.topMargin: Kirigami.Units.largeSpacing
label: i18n("Timezone:")
onClicked: timeZonePickerSheet.open()
Label {
......@@ -133,16 +161,26 @@ Rectangle {
KeyNavigation.up: backBtnSettingsItem
KeyNavigation.down: timeDisplayItemThree
Keys.onReturnPressed: clicked()
onActiveFocusChanged: {
if(activeFocus){
flickContentLayout.makeVisible(timeDisplayItemTwo)
}
}
}
Kirigami.BasicListItem {
id: timeDisplayItemThree
anchors.top: timeDisplayItemTwo.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignTop
Layout.topMargin: Kirigami.Units.largeSpacing
label: i18n("Set time automatically:")
KeyNavigation.up: timeDisplayItemTwo
KeyNavigation.down: timeDisplayItemFour
Keys.onReturnPressed: clicked()
onActiveFocusChanged: {
if(activeFocus){
flickContentLayout.makeVisible(timeDisplayItemThree)
}
}
onClicked: {
ntpCheckBox.checked = !ntpCheckBox.checked
......@@ -166,8 +204,8 @@ Rectangle {
Kirigami.BasicListItem {
id: timeDisplayItemFour
anchors.top: timeDisplayItemThree.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignTop
Layout.topMargin: Kirigami.Units.largeSpacing
label: i18n("Time")
icon: "clock"
enabled: !ntpCheckBox.checked
......@@ -175,6 +213,11 @@ Rectangle {
KeyNavigation.up: timeDisplayItemThree
KeyNavigation.down: timeDisplayItemFive
Keys.onReturnPressed: clicked()
onActiveFocusChanged: {
if(activeFocus){
flickContentLayout.makeVisible(timeDisplayItemFour)
}
}
Label {
text: {
......@@ -193,8 +236,8 @@ Rectangle {
Kirigami.BasicListItem {
id: timeDisplayItemFive
anchors.top: timeDisplayItemFour.bottom
anchors.topMargin: Kirigami.Units.largeSpacing
Layout.alignment: Qt.AlignTop
Layout.topMargin: Kirigami.Units.largeSpacing
label: i18n("Date")
icon: "view-calendar"
enabled: !ntpCheckBox.checked
......@@ -202,6 +245,11 @@ Rectangle {
KeyNavigation.up: timeDisplayItemFour
KeyNavigation.down: backBtnSettingsItem
Keys.onReturnPressed: clicked()
onActiveFocusChanged: {
if(activeFocus){
flickContentLayout.makeVisible(timeDisplayItemFive)
}
}
Label {
text: {
......
......@@ -115,92 +115,138 @@ KCM.SimpleKCM {
}
}
ColumnLayout {
Item {
anchors.left: parent.left
anchors.leftMargin: Kirigami.Units.largeSpacing
anchors.top: headerAreaTop.bottom
anchors.topMargin: Kirigami.Units.largeSpacing * 2
anchors.bottom: footerMain.top
width: deviceTimeSettingsArea.opened ? parent.width - deviceTimeSettingsArea.width : parent.width
clip: true
Kirigami.Heading {
id: launcherLookHeader
text: "Launcher Appearance"
layer.enabled: true
color: "white"
}
ColumnLayout {
id: contentLayout
width: parent.width
property Item currentSection
y: currentSection ? (currentSection.y > parent.height / 2 ? -currentSection.y + Kirigami.Units.gridUnit * 3 : 0) : 0
anchors.left: parent.left
anchors.leftMargin: Kirigami.Units.largeSpacing
RowLayout {
Delegates.LocalSettingDelegate {
id: mycroftIntegrationDelegate
implicitWidth: desktopThemeView.view.cellWidth * 2
implicitHeight: desktopThemeView.view.cellHeight
isChecked: kcm.mycroftIntegrationActive() ? 1 : 0
name: "Mycroft Integration"
customType: "mycroftIntegration"
KeyNavigation.up: kcmcloseButton
KeyNavigation.right: coloredTileDelegate
KeyNavigation.down: desktopThemeView
Behavior on y {
NumberAnimation {
duration: Kirigami.Units.longDuration * 2
easing.type: Easing.InOutQuad
}
}
Delegates.LocalSettingDelegate {
id: coloredTileDelegate
implicitWidth: desktopThemeView.view.cellWidth * 2
implicitHeight: desktopThemeView.view.cellHeight
isChecked: kcm.useColoredTiles() ? 1 : 0
name: "Colored Tiles"
customType: "coloredTile"
KeyNavigation.up: kcmcloseButton
KeyNavigation.left: mycroftIntegrationDelegate
KeyNavigation.right: expandableTileDelegate
KeyNavigation.down: desktopThemeView
Kirigami.Heading {
id: launcherLookHeader
text: "Launcher Appearance"
layer.enabled: true
color: "white"
}
Delegates.LocalSettingDelegate {
id: expandableTileDelegate
implicitWidth: desktopThemeView.cellWidth * 2
implicitHeight: desktopThemeView.cellHeight
isChecked: kcm.useExpandingTiles() ? 1 : 0
name: "Expanding Tiles"
customType: "exapandableTile"
KeyNavigation.up: kcmcloseButton
KeyNavigation.left: coloredTileDelegate
KeyNavigation.right: timeDateSettingsDelegate
KeyNavigation.down: desktopThemeView
RowLayout {
id: topContentArea
Delegates.LocalSettingDelegate {
id: mycroftIntegrationDelegate
implicitWidth: desktopThemeView.view.cellWidth * 2
implicitHeight: desktopThemeView.view.cellHeight
isChecked: kcm.mycroftIntegrationActive() ? 1 : 0
name: "Mycroft Integration"
customType: "mycroftIntegration"
KeyNavigation.up: kcmcloseButton
KeyNavigation.right: coloredTileDelegate
KeyNavigation.down: desktopThemeView
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = topContentArea
}
}
}
Delegates.LocalSettingDelegate {
id: coloredTileDelegate
implicitWidth: desktopThemeView.view.cellWidth * 2
implicitHeight: desktopThemeView.view.cellHeight
isChecked: kcm.useColoredTiles() ? 1 : 0
name: "Colored Tiles"
customType: "coloredTile"
KeyNavigation.up: kcmcloseButton
KeyNavigation.left: mycroftIntegrationDelegate
KeyNavigation.right: expandableTileDelegate
KeyNavigation.down: desktopThemeView
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = topContentArea
}
}
}
Delegates.LocalSettingDelegate {
id: expandableTileDelegate
implicitWidth: desktopThemeView.cellWidth * 2
implicitHeight: desktopThemeView.cellHeight
isChecked: kcm.useExpandingTiles() ? 1 : 0
name: "Expanding Tiles"
customType: "exapandableTile"
KeyNavigation.up: kcmcloseButton
KeyNavigation.left: coloredTileDelegate
KeyNavigation.right: timeDateSettingsDelegate
KeyNavigation.down: desktopThemeView
onActiveFocusChanged: {
if(activeFocus){
contentLayout.currentSection = topContentArea
}
}