Changeset View
Standalone View
applets/weather/package/contents/ui/config/ConfigWeatherStation.qml
Show All 10 Lines | |||||
11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | 11 | * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the | ||
12 | * GNU General Public License for more details. | 12 | * GNU General Public License for more details. | ||
13 | * | 13 | * | ||
14 | * You should have received a copy of the GNU General Public License | 14 | * You should have received a copy of the GNU General Public License | ||
15 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | 15 | * along with this program. If not, see <http://www.gnu.org/licenses/>. | ||
16 | */ | 16 | */ | ||
17 | 17 | | |||
18 | import QtQuick 2.9 | 18 | import QtQuick 2.9 | ||
19 | 19 | import QtQuick.Controls 2.5 as QtControls | |||
20 | import QtQuick.Controls 1.4 as QtControls | | |||
21 | import QtQuick.Layouts 1.3 | 20 | import QtQuick.Layouts 1.3 | ||
22 | 21 | | |||
23 | import org.kde.plasma.components 2.0 as PlasmaComponents | 22 | import org.kde.kirigami 2.5 as Kirigami | ||
24 | | ||||
25 | import org.kde.plasma.private.weather 1.0 | 23 | import org.kde.plasma.private.weather 1.0 | ||
26 | 24 | | |||
27 | 25 | | |||
28 | ColumnLayout { | 26 | Kirigami.FormLayout { | ||
29 | id: weatherStationConfigPage | 27 | id: weatherStationConfigPage | ||
30 | 28 | | |||
31 | property string source | 29 | property string source | ||
32 | 30 | | |||
33 | signal configurationChanged | 31 | signal configurationChanged | ||
34 | 32 | | |||
35 | function saveConfig() { | 33 | function saveConfig() { | ||
36 | var config = { | 34 | var config = { | ||
Show All 21 Lines | 55 | WeatherStationPickerDialog { | |||
58 | id: stationPicker | 56 | id: stationPicker | ||
59 | 57 | | |||
60 | onAccepted: { | 58 | onAccepted: { | ||
61 | weatherStationConfigPage.source = source; | 59 | weatherStationConfigPage.source = source; | ||
62 | weatherStationConfigPage.configurationChanged(); | 60 | weatherStationConfigPage.configurationChanged(); | ||
63 | } | 61 | } | ||
64 | } | 62 | } | ||
65 | 63 | | |||
66 | GridLayout { | | |||
67 | columns: 2 | | |||
68 | | ||||
69 | QtControls.Label { | | |||
70 | Layout.row: 0 | | |||
71 | Layout.column: 0 | | |||
72 | Layout.alignment: Qt.AlignRight | | |||
73 | text: i18nc("@label", "Location:") | | |||
74 | } | | |||
75 | 64 | | |||
76 | RowLayout { | 65 | RowLayout { | ||
77 | Layout.row: 0 | 66 | Kirigami.FormData.label: i18nc("@label", "Location:") | ||
78 | Layout.column: 1 | | |||
79 | Layout.fillWidth: true | 67 | Layout.fillWidth: true | ||
80 | 68 | | |||
81 | QtControls.Label { | 69 | QtControls.Label { | ||
82 | id: locationDisplay | 70 | id: locationDisplay | ||
filipf: {F6800225}
selectButton is not horizontally aligned with the combobox below it. To fix it I… | |||||
83 | Layout.fillWidth: true | 71 | Layout.fillWidth: true | ||
84 | elide: Text.ElideRight | 72 | elide: Text.ElideRight | ||
73 | visible: text != "" | ||||
85 | 74 | | |||
86 | text: { | 75 | text: { | ||
87 | var sourceDetails = source.split('|'); | 76 | var sourceDetails = source.split('|'); | ||
88 | if (sourceDetails.length > 2) { | 77 | if (sourceDetails.length > 2) { | ||
89 | return i18nc("A weather station location and the weather service it comes from", | 78 | return i18nc("A weather station location and the weather service it comes from", | ||
90 | "%1 (%2)", sourceDetails[2], sourceDetails[0]); | 79 | "%1 (%2)", sourceDetails[2], sourceDetails[0]); | ||
91 | } | 80 | } | ||
92 | return i18nc("no weather station", "-"); | 81 | return "" | ||
93 | } | 82 | } | ||
94 | } | 83 | } | ||
95 | 84 | | |||
96 | QtControls.Button { | 85 | QtControls.Button { | ||
97 | id: selectButton | 86 | id: selectButton | ||
filipf: add `Layout.fillWidth: true` here | |||||
98 | iconName: "edit-find" | 87 | Layout.fillWidth: true | ||
While I see this: what are all those "-symbolic" variants and when would one use it? Is that documented anywhere? I expeted something on hig.kde.org, but found nothing. kossebau: While I see this: what are all those "-symbolic" variants and when would one use it? Is that… | |||||
The -symbolic suffix means "this icon is always supposed to be monochrome". However in this case I used the -symbolic version simply because there was no non-symbolic version in Breeze icons. However it's not semantically incorrect to use that here anyway since buttons are generally only supposed to have monochrome icons in the first place. ngraham: The `-symbolic` suffix means "this icon is always supposed to be monochrome". However in this… | |||||
Where is that documented? Asking because as developer writing new code one day I am now very confused what to use. So if possible, I would prefer that on changing this icon this is backed by something proper documented (and fixed where needed, e.g. ensuring there is an action icon with a normal name if needed) :) kossebau: Where is that documented? Asking because as developer writing new code one day I am now very… | |||||
You're not the only one confused. :) It's a bit of a mess at the moment, TBH. See T10413 For now I've added a normally-named icon without the -symbolic suffix to breeze icons (in Frameworks 5.58, so we can use it), and we'll use that here. ngraham: You're not the only one confused. :) It's a bit of a mess at the moment, TBH. See T10413
For… | |||||
99 | text: i18nc("@action:button", "Select") | 88 | icon.name: "find-location" | ||
89 | text: i18nc("@action:button", "Choose...") | ||||
100 | onClicked: stationPicker.visible = true; | 90 | onClicked: stationPicker.visible = true; | ||
101 | } | 91 | } | ||
102 | } | 92 | } | ||
103 | 93 | | |||
104 | | ||||
105 | QtControls.Label { | | |||
106 | Layout.row: 1 | | |||
107 | Layout.column: 0 | | |||
108 | Layout.alignment: Qt.AlignRight | | |||
109 | text: i18nc("@label:spinbox", "Update every:") | | |||
110 | } | | |||
111 | QtControls.SpinBox { | 94 | QtControls.SpinBox { | ||
112 | id: updateIntervalSpin | 95 | id: updateIntervalSpin | ||
113 | Layout.row: 1 | 96 | | ||
114 | Layout.column: 1 | 97 | Kirigami.FormData.label: i18nc("@label:spinbox", "Update every:") | ||
115 | Layout.minimumWidth: units.gridUnit * 8 | 98 | | ||
116 | suffix: i18nc("@item:valuesuffix spacing to number + unit (minutes)", " min") | 99 | textFromValue: function(value) { | ||
117 | stepSize: 5 | 100 | return (i18np("%1 minute", "%1 minutes", value)); | ||
118 | minimumValue: 30 | | |||
119 | maximumValue: 3600 | | |||
120 | onValueChanged: weatherStationConfigPage.configurationChanged(); | | |||
121 | } | | |||
122 | } | 101 | } | ||
123 | 102 | | |||
124 | Item { // tighten layout | 103 | stepSize: 5 | ||
125 | Layout.fillHeight: true | 104 | from: 30 | ||
105 | to: 3600 | ||||
106 | | ||||
107 | onValueChanged: weatherStationConfigPage.configurationChanged(); | ||||
126 | } | 108 | } | ||
127 | } | 109 | } |
selectButton is not horizontally aligned with the combobox below it. To fix it I think you can do something like visible: source.length > 0 for this label.
However the button is still not as wide as the combobox, so for that you'd want to (see next inline comment):