Changeset View
Standalone View
src/qml/main.qml
1 | /* | 1 | /* | ||
---|---|---|---|---|---|
2 | Copyright 2013 by Reza Fatahilah Shah <rshah0385@kireihana.com> | 2 | Copyright 2013 by Reza Fatahilah Shah <rshah0385@kireihana.com> | ||
3 | 3 | | |||
4 | This program is free software: you can redistribute it and/or modify | 4 | This program is free software: you can redistribute it and/or modify | ||
5 | it under the terms of the GNU General Public License as published by | 5 | it under the terms of the GNU General Public License as published by | ||
6 | the Free Software Foundation, either version 2 of the License, or | 6 | the Free Software Foundation, either version 2 of the License, or | ||
7 | (at your option) any later version. | 7 | (at your option) any later version. | ||
8 | 8 | | |||
9 | This program is distributed in the hope that it will be useful, | 9 | This program is distributed in the hope that it will be useful, | ||
10 | but WITHOUT ANY WARRANTY; without even the implied warranty of | 10 | but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
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 | import QtQuick 2.1 | 17 | import QtQuick 2.4 | ||
18 | import QtQuick.Layouts 1.1 | 18 | import QtQuick.Layouts 1.4 | ||
ngraham: Version does not exist, use version 1.12 instead | |||||
19 | import QtQuick.Controls 2.4 | ||||
20 | import org.kde.kirigami 2.4 as Kirigami | ||||
21 | import QtGraphicalEffects 1.4 | ||||
Use version 1.0 instead or else it will cause a crash: file:///usr/share/sddm-kcm/main.qml:21:1: module "QtGraphicalEffects" version 1.4 is not installed import QtGraphicalEffects 1.4 ^ KCrash: crashing... crashRecursionCounter = 2 KCrash: Application Name = systemsettings5 path = /usr/bin pid = 4958 KCrash: Arguments: /usr/bin/systemsettings5 KCrash: Attempting to start /usr/lib/x86_64-linux-gnu/libexec/drkonqi from kdeinit sock_file=/run/user/1000/kdeinit5__0 ngraham: Use version 1.0 instead or else it will cause a crash:
```
file:///usr/share/sddm-kcm/main.qml… | |||||
19 | 22 | | |||
20 | Rectangle { | 23 | Rectangle { | ||
21 | id: root | 24 | id: root | ||
22 | SystemPalette { id: palette; colorGroup: SystemPalette.Active } | 25 | color: Kirigami.Theme.backgroundColor | ||
Need to use this because otherwise there is an ugly white rectangle below that QQC2.ScrollView and Kirigami.ScrollablePage can't hide filipf: Need to use this because otherwise there is an ugly white rectangle below that QQC2.ScrollView… | |||||
23 | color: palette.base | 26 | height: childrenRect.height | ||
childrenRect.height can be used here, but the problem is that is that it doesn't fully cover the area of the underlying QuickWidgets white-colored element, which means this solution looks very bad with dark themes filipf: childrenRect.height can be used here, but the problem is that is that it doesn't fully cover… | |||||
Is this actually going to work with all color schemes? Why are the colors not identical in the first place? ngraham: Is this actually going to work with all color schemes? Why are the colors not identical in the… | |||||
I tested it with multiple color schemes and it worked with all of them. As for the reason why it doesn't just have the same color as the background naturally, I'm really not sure. I believe something is messed up in the non-QML code. filipf: I tested it with multiple color schemes and it worked with all of them. As for the reason why… | |||||
24 | width: 360 | | |||
25 | height:320 | | |||
26 | 27 | | |||
27 | property string themeName: "" | 28 | property string themeName: "" | ||
28 | property string previewPath: "" | 29 | property string previewPath: "" | ||
29 | property string authorName: "" | 30 | property string authorName: "" | ||
30 | property string description: "" | 31 | property string description: "" | ||
31 | property string license: "" | 32 | property string license: "" | ||
32 | property string email: "" | 33 | property string email: "" | ||
33 | property string website: "" | 34 | property string website: "" | ||
34 | property string copyright: "" | 35 | property string copyright: "" | ||
35 | property string version: "" | 36 | property string version: "" | ||
36 | 37 | | |||
38 | //HACK:Fills the QuickWidget area root wouldn't normally cover | ||||
davidedmundson: can you explain this?
It's the size of root and the same colour | |||||
i removed this extra rectangle and added large.Spacing to the height at line 24 and everything works fine both on my arch rig and on neon? rooty: i removed this extra rectangle and added large.Spacing to the height at line 24 and everything… | |||||
39 | Rectangle { | ||||
40 | id: heightHack | ||||
41 | color: Kirigami.Theme.backgroundColor | ||||
42 | anchors.fill: root | ||||
43 | } | ||||
44 | | ||||
37 | Image { | 45 | Image { | ||
38 | id: previewImage | 46 | id: previewImage | ||
39 | width: root.paintedWidth | | |||
40 | height: 210 | | |||
41 | source: previewPath | 47 | source: previewPath | ||
42 | anchors { | 48 | anchors { | ||
43 | top: parent.top | 49 | top: root.top | ||
44 | topMargin: 25 | 50 | left: root.left | ||
45 | horizontalCenter: parent.horizontalCenter | 51 | right: root.right | ||
52 | margins: units.largeSpacing | ||||
46 | } | 53 | } | ||
47 | | ||||
48 | fillMode: Image.PreserveAspectFit | 54 | fillMode: Image.PreserveAspectFit | ||
49 | } | 55 | } | ||
50 | 56 | | |||
While we're at it, let's port this to use a Kirigami Heading item instead of a raw Text with hardcoded font sizes. That's gross. ngraham: While we're at it, let's port this to use a Kirigami Heading item instead of a raw Text with… | |||||
ngraham: This should should be a QQC2 Label, and not use hardcoded font sizes. | |||||
ngraham: Ditto | |||||
ngraham: Ditto | |||||
ngraham: Ditto | |||||
ngraham: ditto | |||||
51 | Rectangle { // rounded corners for img | 57 | DropShadow { | ||
TODO: how to make the column layout as wide as root, but minus the scrollbars? filipf: TODO: how to make the column layout as wide as root, but minus the scrollbars? | |||||
I want to add an "version" here as well so that it looks like: themeName (version) filipf: I want to add an "version" here as well so that it looks like: themeName (version) | |||||
52 | id: border | 58 | source: previewImage | ||
53 | width: previewImage.paintedWidth + 2 | 59 | anchors.fill: previewImage | ||
54 | height: previewImage.paintedHeight + 2 | 60 | verticalOffset: 2 | ||
55 | color: "transparent" | 61 | radius: 7 | ||
I want the image to use all of the ColumnLayout's width and then just choose whichever height it can based on its aspect. Can't get that to work. filipf: I want the image to use all of the ColumnLayout's width and then just choose whichever height… | |||||
56 | border.color: "#bb000000" // color of background | 62 | samples: 15 | ||
filipf: Needs to be bumped to 16 because it renders badly with 15. | |||||
57 | border.width: 2 | 63 | color: "black" | ||
58 | radius: 2 | | |||
59 | anchors.centerIn: previewImage | | |||
60 | } | 64 | } | ||
61 | 65 | | |||
62 | GridLayout { | 66 | ColumnLayout { | ||
63 | id: texttable | 67 | id: column | ||
64 | width: previewImage.paintedWidth | 68 | width: previewImage.paintedWidth | ||
65 | anchors { | 69 | anchors { | ||
66 | top: previewImage.bottom | 70 | top: previewImage.bottom | ||
67 | left: previewImage.left | 71 | left: previewImage.left | ||
68 | right: previewImage.right | 72 | right: previewImage.right | ||
73 | topMargin: units.smallSpacing | ||||
69 | } | 74 | } | ||
70 | columns: 2 | | |||
71 | 75 | | |||
72 | Text { | 76 | Kirigami.Heading { | ||
This is a word puzzle and will lead to bad translations because translators won't be able to figure out what ", by " refers to. The string should be like this instead: i18n("%1, by %2 (%3)", description, authorName, license) Of course if there's a chance any of those strings might be unset or empty, you'll need to handle that in the code or else the empty string will mess up the i18n() call. ngraham: This is a word puzzle and will lead to bad translations because translators won't be able to… | |||||
How to do this? Sometimes some information really is missing so it could be an issue. filipf: > you'll need to handle that in the code
How to do this? Sometimes some information really is… | |||||
Then you'll need to have separate strings based on what could be missing. For example if only the authorName could be missing, you do this: text: if (authorname.length() === 0) { return i18n("%1 (%3)", description, license) } else { return i18n("%1, by %2 (%3)", description, authorName, license) } If both authorName and license could be missing you'd need to add more conditions. ngraham: Then you'll need to have separate strings based on what could be missing. For example if only… | |||||
73 | color: palette.text | 77 | text: themeName + " (" + version + ")" | ||
74 | text: description | | |||
75 | font.bold: true | 78 | font.bold: true | ||
76 | font.pointSize: 13 | 79 | font.weight: Font.Bold | ||
80 | Layout.maximumWidth: column.width | ||||
Instead, use Layout.fillWidth: true for all of these since there's nothing to the right of them ngraham: Instead, use `Layout.fillWidth: true` for all of these since there's nothing to the right of… | |||||
81 | elide: Text.ElideRight | ||||
82 | maximumLineCount: 2 | ||||
83 | wrapMode: Text.Wrap | ||||
77 | } | 84 | } | ||
78 | Text { | 85 | | ||
79 | color: palette.text | 86 | Label { | ||
80 | text: version | 87 | text: description | ||
81 | font.bold: true | 88 | font.italic: true | ||
82 | font.pointSize: 10 | 89 | Layout.maximumWidth: column.width | ||
83 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | 90 | elide: Text.ElideRight | ||
91 | maximumLineCount: 2 | ||||
92 | wrapMode: Text.Wrap | ||||
84 | } | 93 | } | ||
85 | Text { | 94 | | ||
86 | color: palette.text | 95 | Label { | ||
87 | text: authorName | 96 | text: authorName | ||
88 | font.pointSize: 10 | 97 | Layout.maximumWidth: column.width | ||
98 | elide: Text.ElideRight | ||||
99 | maximumLineCount: 2 | ||||
100 | wrapMode: Text.Wrap | ||||
89 | } | 101 | } | ||
90 | Text { | 102 | | ||
91 | color: palette.text | 103 | Label { | ||
92 | text: license | 104 | text: license | ||
93 | font.pointSize: 7 | 105 | font.pointSize: theme.smallestFont.pointSize | ||
94 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | 106 | Layout.maximumWidth: column.width | ||
107 | elide: Text.ElideRight | ||||
108 | maximumLineCount: 2 | ||||
109 | wrapMode: Text.Wrap | ||||
This could use a visible: website !== "" so it doesn't appear and look weird when that piece of metadata isn't available. ngraham: This could use a `visible: website !== ""` so it doesn't appear and look weird when that piece… | |||||
110 | } | ||||
111 | | ||||
112 | Label { | ||||
ngraham: ^^ Ditto | |||||
113 | id: url | ||||
114 | text:("<a href='"+website+"'>"+website+"</a>") | ||||
115 | onLinkActivated: Qt.openUrlExternally(link) | ||||
116 | font.pointSize: theme.smallestFont.pointSize | ||||
117 | Layout.maximumWidth: column.width | ||||
118 | elide: Text.ElideRight | ||||
119 | maximumLineCount: 2 | ||||
120 | wrapMode: Text.Wrap | ||||
121 | | ||||
122 | MouseArea { | ||||
This hack will not be needed if and when D19179 lands, BTW. ngraham: This hack will not be needed if and when D19179 lands, BTW. | |||||
filipf: Keeping a track of that diff, will remove the hacks once it lands. | |||||
123 | anchors.fill: url | ||||
124 | acceptedButtons: Qt.NoButton | ||||
125 | cursorShape: Qt.PointingHandCursor | ||||
126 | } | ||||
127 | } | ||||
128 | | ||||
129 | Label { | ||||
130 | id: mail | ||||
131 | text: ("<a href='"+email+"'>"+email+"</a>") | ||||
132 | onLinkActivated: Qt.openUrlExternally("mailto:"+email+"") | ||||
133 | font.pointSize: theme.smallestFont.pointSize | ||||
134 | Layout.maximumWidth: column.width | ||||
135 | elide: Text.ElideRight | ||||
136 | maximumLineCount: 2 | ||||
137 | wrapMode: Text.Wrap | ||||
138 | | ||||
139 | MouseArea { | ||||
140 | anchors.fill: mail | ||||
141 | acceptedButtons: Qt.NoButton | ||||
142 | cursorShape: Qt.PointingHandCursor | ||||
95 | } | 143 | } | ||
96 | Text { | | |||
97 | color: palette.text | | |||
98 | text: website | | |||
99 | font.pointSize: 7 | | |||
100 | } | | |||
101 | Text { | | |||
102 | color: palette.text | | |||
103 | text: email | | |||
104 | font.pointSize: 7 | | |||
105 | Layout.alignment: Qt.AlignVCenter | Qt.AlignRight | | |||
106 | } | 144 | } | ||
107 | } | 145 | } | ||
108 | } | 146 | } |
Version does not exist, use version 1.12 instead