Commit 983a1c7e authored by Friedrich W. H. Kossebau's avatar Friedrich W. H. Kossebau
Browse files

[weather] Rewrite UI with QtQuick.Layouts and org.kde.plasma.components 3.0

parent 686128dd
......@@ -15,9 +15,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import QtQuick 2.9
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.3
import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
......
/*
* Copyright 2012 Luís Gabriel Lima <lampih@gmail.com>
* Copyright 2018 Friedrich W. H. Kossebau <kossebau@kde.org>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
......@@ -15,43 +15,66 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import QtQuick 2.9
import QtQuick.Layouts 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.components 3.0 as PlasmaComponents
WeatherListView {
ColumnLayout {
id: root
delegate: Item {
anchors.fill: parent
Row {
anchors.centerIn: parent
height: parent.height
width: childrenRect.width
spacing: units.smallSpacing
PlasmaCore.SvgItem {
id: icon
svg: windSvg
elementId: rowData.icon
height: naturalSize.height
width: naturalSize.width
visible: !!rowData.icon
}
PlasmaComponents.Label {
anchors {
verticalCenter: parent.verticalCenter
}
text: rowData.text
}
}
}
property alias model: repeater.model
PlasmaCore.Svg {
id: windSvg
imagePath: "weather/wind-arrows"
}
ColumnLayout {
Layout.alignment: Qt.AlignTop | Qt.AlignHCenter
spacing: units.largeSpacing
Repeater {
id: repeater
delegate: Loader {
property int rowIndex: index
property var rowData: modelData
Layout.minimumWidth: item.Layout.minimumWidth
Layout.minimumHeight: item.Layout.minimumHeight
Layout.alignment: item.Layout.alignment
Layout.preferredWidth: item.Layout.preferredWidth
Layout.preferredHeight: item.Layout.preferredHeight
sourceComponent: RowLayout {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
PlasmaCore.SvgItem {
id: icon
Layout.preferredHeight: naturalSize.height
Layout.preferredWidth: naturalSize.width
svg: windSvg
elementId: rowData.icon
visible: !!rowData.icon
}
PlasmaComponents.Label {
id: text
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
text: rowData.text
}
}
}
}
}
}
/*
* Copyright 2012 Luís Gabriel Lima <lampih@gmail.com>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of
* the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
WeatherListView {
id: root
delegate: Row {
anchors.fill: parent
Repeater {
id: rowRepeater
model: rowData
Loader {
height: rowIndex === 1 ? parent.height + root.spacing : parent.height
width: parent.width / rowRepeater.count
sourceComponent: rowIndex === 1 ? iconDelegate : textDelegate
onLoaded: {
if (rowIndex === 1) {
var values = modelData.split("|");
item.source = values[0];
item.toolTip = values[1];
} else {
var txt = modelData;
if (txt.indexOf("nt") !== -1) {
txt = txt.replace(" nt", "");
}
item.text = txt;
}
if (rowIndex === 0) {
item.font.bold = true;
}
}
}
}
}
Component {
id: textDelegate
PlasmaComponents.Label {
function checkTitle(txt) {
return txt.indexOf("ight") !== -1 || txt.indexOf("nite") !== -1;
}
// resetting the default height set by PlasmaComponents.Label,
// which would result in first item in row with bad vertical position
height: undefined
width: parent.width
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
opacity: font.bold && checkTitle(text) ? 0.6 : 1
}
}
Component {
id: iconDelegate
PlasmaCore.IconItem {
property alias toolTip: iconToolTip.mainText
anchors.centerIn: parent
anchors.verticalCenterOffset: -root.spacing/2
PlasmaCore.ToolTipArea {
id: iconToolTip
anchors.fill: parent
}
}
}
}
/*
* Copyright 2018 Friedrich W. H. Kossebau <kossebau@kde.org>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of
* the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.9
import QtQuick.Layouts 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents
ColumnLayout {
id: root
property alias model: repeater.model
readonly property bool hasContent: model && model.length > 0
spacing: units.largeSpacing
Component {
id: timeDelegate
PlasmaComponents.Label {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
font.bold: true
// still needed? was in old code
opacity: (text.indexOf("ight") !== -1 || text.indexOf("nite") !== -1) ? 0.6 : 1
text: {
var time = cellData;
// still needed? was in old code
if (time.indexOf("nt") !== -1) {
time = time.replace(" nt", "");
}
return time;
}
}
}
Component {
id: temperatureDelegate
PlasmaComponents.Label {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
text: cellData
}
}
Component {
id: iconDelegate
PlasmaCore.IconItem {
Layout.fillWidth: true
Layout.minimumHeight: units.iconSizes.small
Layout.preferredHeight: units.iconSizes.medium
PlasmaCore.ToolTipArea {
id: iconToolTip
anchors.fill: parent
}
Component.onCompleted: {
var values = cellData.split("|");
source = values[0];
iconToolTip.mainText = values[1];
}
}
}
Repeater {
id: repeater
delegate: Loader {
property int rowIndex: index
property var rowData: modelData
Layout.fillWidth: item.Layout.fillWidth
Layout.fillHeight: item.Layout.fillHeight
Layout.minimumWidth: item.Layout.minimumWidth
Layout.minimumHeight: item.Layout.minimumHeight
Layout.preferredWidth: item.Layout.preferredWidth
Layout.preferredHeight: item.Layout.preferredHeight
sourceComponent: RowLayout {
id: row
property int maxItemImplicitWidth: {
var mw = 0;
for (var i = 0; i < children.length; i++) {
mw = Math.max(mw, children[i].implicitWidth);
}
return mw;
}
Layout.fillWidth: true
Layout.fillHeight: false
spacing: units.largeSpacing
Repeater {
id: rowRepeater
model: rowData
delegate: Loader {
property var cellData: modelData
sourceComponent:
(rowIndex === 0) ? timeDelegate :
(rowIndex === 1) ? iconDelegate :
/* else */ temperatureDelegate
Layout.fillWidth: item.Layout.fillWidth
Layout.minimumWidth: maxItemImplicitWidth
Layout.minimumHeight: item.Layout.minimumHeight
Layout.alignment: item.Layout.alignment
Layout.preferredWidth: maxItemImplicitWidth
}
}
}
}
}
}
/*
* Copyright 2012 Luís Gabriel Lima <lampih@gmail.com>
* Copyright 2018 Friedrich W. H. Kossebau <kossebau@kde.org>
*
* This program is free software; you can redistribute it and/or
......@@ -16,126 +15,38 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import QtQuick 2.9
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.3
import org.kde.plasma.plasmoid 2.0
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.components 3.0 as PlasmaComponents
Item {
ColumnLayout {
id: fullRoot
Layout.minimumWidth: units.gridUnit * 12
Layout.minimumHeight: units.gridUnit * 12
Layout.preferredWidth: Layout.minimumWidth * 1.5
Layout.preferredHeight: Layout.minimumHeight * 1.5
Layout.margins: units.smallSpacing
TopPanel {
id: panel
Layout.fillWidth: true
anchors {
top: parent.top
left: parent.left
right: parent.right
// matching round ends of bars behind data rows
margins: units.smallSpacing
}
height: parent.height * 0.21
model: plasmoid.nativeInterface.panelModel
}
PlasmaComponents.TabBar {
id: tabBar
anchors {
top: panel.bottom
topMargin: units.smallSpacing
horizontalCenter: parent.horizontalCenter
}
visible: detailsView.hasContent || noticesView.hasContent
function fallBackToFiveDaysIfInvisble(tabButton) {
// PlasmaComponents.TabBar does not handle this (yet), so let's do it ourselves
if (!tabButton.visible && (currentTab == tabButton)) {
currentTab = fiveDaysTabButton;
mainTabGroup.currentTab = fiveDaysTabButton.tab;
}
}
PlasmaComponents.TabButton {
id: fiveDaysTabButton
SwitchPanel {
Layout.fillWidth: true
text: plasmoid.nativeInterface.panelModel.totalDays
tab: fiveDaysView
}
PlasmaComponents.TabButton {
id: detailsTabButton
text: i18n("Details")
visible: detailsView.hasContent
tab: detailsView
onVisibleChanged: {
tabBar.fallBackToFiveDaysIfInvisble(detailsTabButton);
}
}
PlasmaComponents.TabButton {
id: noticesTabButton
text: i18n("Notices")
visible: noticesView.hasContent
tab: noticesView
onVisibleChanged: {
tabBar.fallBackToFiveDaysIfInvisble(noticesTabButton);
}
}
}
PlasmaComponents.TabGroup {
id: mainTabGroup
anchors {
top: tabBar.visible ? tabBar.bottom : tabBar.top
bottom: courtesyLabel.top
left: parent.left
right: parent.right
topMargin: units.smallSpacing
bottomMargin: units.smallSpacing
}
FiveDaysView {
id: fiveDaysView
anchors.fill: parent
model: plasmoid.nativeInterface.fiveDaysModel
}
DetailsView {
id: detailsView
anchors.fill: parent
model: plasmoid.nativeInterface.detailsModel
}
NoticesView {
id: noticesView
anchors.fill: parent
model: plasmoid.nativeInterface.noticesModel
}
forecastViewTitle: plasmoid.nativeInterface.panelModel.totalDays
forecastModel: plasmoid.nativeInterface.forecastModel
detailsModel: plasmoid.nativeInterface.detailsModel
noticesModel: plasmoid.nativeInterface.noticesModel
}
PlasmaComponents.Label {
id: courtesyLabel
property string creditUrl: plasmoid.nativeInterface.panelModel.creditUrl
anchors {
bottom: parent.bottom
right: parent.right
left: parent.left
// matching round ends of bars behind data rows
rightMargin: units.smallSpacing
}
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
wrapMode: Text.WordWrap
horizontalAlignment: Text.AlignRight
font {
......@@ -145,6 +56,7 @@ Item {
linkColor : color
opacity: 0.6
textFormat: Text.StyledText
text: {
var result = plasmoid.nativeInterface.panelModel.courtesy;
if (creditUrl) {
......
......@@ -15,12 +15,12 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import QtQuick 2.9
import QtQuick.Layouts 1.0
import QtQuick.Layouts 1.3
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.components 3.0 as PlasmaComponents
GridLayout {
id: iconAndTextRoot
......
/*
* Copyright 2012 Luís Gabriel Lima <lampih@gmail.com>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
* published by the Free Software Foundation; either version 2 of
* the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import org.kde.plasma.components 2.0 as PlasmaComponents
Column {
property alias model: repeater.model
property alias title: title.text
anchors.left: parent.left
anchors.right: parent.right
PlasmaComponents.Label {
id: title
font.bold: true
}
Repeater {
id: repeater
PlasmaComponents.Label {
font.underline: true
color: theme.linkColor
text: modelData.description
MouseArea {
anchors.fill: parent
onClicked: Qt.openUrlExternally(modelData.info);
}
}
}
}
/*
* Copyright 2012 Luís Gabriel Lima <lampih@gmail.com>
* Copyright 2018 Friedrich W. H. Kossebau <kossebau@kde.org>
*
* This program is free software; you can redistribute it and/or
* modify it under the terms of the GNU General Public License as
......@@ -15,23 +15,59 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import QtQuick 2.1
import QtQuick 2.9
Column {
import QtQuick.Layouts 1.3
import org.kde.plasma.components 3.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras
ColumnLayout {
id: root
property var model
property al