Differential D24305 Diff 67118 cuttlefish/package/contents/ui/Comparison.qml

Changeset View

Standalone View

View Options

cuttlefish/package/contents/ui/Comparison.qml

  • This file was added.
1​import QtQuick 2.4
2​import QtQuick.Controls 2.5 as QQC2
ngrahamUnsubmitted
Done

2.4

ngraham: 2.4
3​import QtQuick.Layouts 1.3
4​
ngrahamUnsubmitted
Done

1.3

ngraham: 1.3
5​import org.kde.kirigami 2.8 as Kirigami
6​
7​Kirigami.OverlaySheet {
8​ property int comparisonSize
9​ background: Rectangle {
10​ id:background
11​ color: cuttlefish.viewbgcolor
12​ anchors.fill: parent
13​ }
14​
15​ onSheetOpenChanged: {
16​ if (sheetOpen) {
17​ comparisonSize = iconSize;
18​ comparisonSlider.value = [8, 16, 22, 32, 48, 64, 128].indexOf(comparisonSize);
19​ }
20​ }
21​
22​ ColumnLayout {
23​ Kirigami.Theme.textColor: cuttlefish.textcolor
24​ Kirigami.Theme.highlightColor: cuttlefish.highlightcolor
25​ Kirigami.Theme.highlightedTextColor: cuttlefish.highlightedtextcolor
26​ Kirigami.Theme.positiveTextColor: cuttlefish.positivetextcolor
27​ Kirigami.Theme.neutralTextColor: cuttlefish.neutraltextcolor
28​ Kirigami.Theme.negativeTextColor: cuttlefish.negativetextcolor
29​ RowLayout {
30​ Layout.alignment: Qt.AlignHCenter
31​ QQC2.Slider {
32​ Layout.preferredWidth: comparisonGrid.width * 0.75
33​ id: comparisonSlider
34​ to: 6.0
35​ stepSize: 1.0
36​ snapMode: QQC2.Slider.SnapAlways
37​ onValueChanged: {
38​ comparisonTimer.restart()
39​ }
40​
41​ Timer {
42​ id: comparisonTimer
43​ running: false
44​ repeat: false
45​ interval: 200
46​ onTriggered: comparisonSize = indexToSize(comparisonSlider.value)
47​ }
48​ }
49​ QQC2.Label {
50​ text: indexToSize(comparisonSlider.value)
51​ }
52​ }
53​ GridView {
54​ Layout.fillWidth: true
55​ Layout.preferredHeight: contentHeight
56​ id: comparisonGrid
57​ cellWidth: 128
58​ cellHeight: 128 + 2 * Kirigami.Units.gridUnit + Kirigami.Units.largeSpacing
59​ model: sheetOpen ? iconModel.inOtherThemes(preview.iconName, comparisonSize) : []
60​ delegate: ColumnLayout {
61​ id: iconColumn
62​ width: comparisonGrid.cellWidth
63​ height: comparisonGrid.cellHeight
64​ spacing: Kirigami.Units.largeSpacing
65​ Component {
66​ id: iconView
ngrahamUnsubmitted
Done

indentation

ngraham: indentation
67​ Kirigami.Icon {
ngrahamUnsubmitted
Not Done

Now you don't need this wrapper anymore; just use Kirigami.Icon directly and set Layout.preferredWidth and Layout.preferredHeight on it.

ngraham: Now you don't need this wrapper anymore; just use `Kirigami.Icon` directly and set `Layout.
davidreAuthorUnsubmitted
Not Done

I use it for centering the icon in the middle of the 128x128 free space for the icon. Qt.AlignCenter is not enough for that. In the first version of the diff I tried make up for that with setting of top and bottom margins depending on the text height and icon size but that was to complicated and also didn't produce the correct result I think.

davidre: I use it for centering the icon in the middle of the 128x128 free space for the icon. `Qt.
ngrahamUnsubmitted
Not Done

There is no Qt.AlignCenter (though there should be IMO); I think you need to do Qt.AlignHCenter | Qt.AligtVCenter

ngraham: There is no `Qt.AlignCenter` (though there should be IMO); I think you need to do `Qt.
davidreAuthorUnsubmitted
Not Done

https://doc.qt.io/qt-5/qt.html#AlignmentFlag-enum

davidre: https://doc.qt.io/qt-5/qt.html#AlignmentFlag-enum
68​ width: comparisonSize
69​ height: width
70​ source: modelData.iconPath
ngrahamUnsubmitted
Done

height: width

ngraham: `height: width`
71​ }
ngrahamUnsubmitted
Done

Rather than creating a complicated additional item for the "no icon" case, I would just do source: modelData.iconPath ? modelData.iconPath : "paint-none". If you don't like the paint-none icon, we can adjust it.

ngraham: Rather than creating a complicated additional item for the "no icon" case, I would just do…
davidreAuthorUnsubmitted
Done

That's what I did first acutally but I didn't like that for two reasons. First it would scale with the other icons and when you are looking at paint-none you couldn't distinguish it anymore.

davidre: That's what I did first acutally but I didn't like that for two reasons. First it would scale…
ngrahamUnsubmitted
Done

In that case what about just setting color: Kirigami.Theme.disabledTextColor when there's no icon? That should serve to distinguish the actual paint-none icon from the use of that icon to denote "no icon available"

I don't think having it scale is a huge deal.

ngraham: In that case what about just setting ` color: Kirigami.Theme.disabledTextColor` when there's no…
72​ }
73​ Component {
74​ id: noIcon
75​ Rectangle {
76​ id: noIcon
77​ color: background.color
78​ width: 80
79​ height: 80
80​ radius: 10
81​ border.width: 3
82​ border.color: Kirigami.Theme.disabledTextColor
83​ Kirigami.Icon {
84​ source: "paint-none"
85​ isMask: true
86​ color: Kirigami.Theme.disabledTextColor
87​ width: 64
88​ height: 64
89​ anchors.centerIn: parent
90​ }
91​ }
92​ }
93​ Item {
94​ id: wrapper
95​ Layout.preferredWidth: 128
96​ Layout.preferredHeight: 128
97​ Loader {
98​ anchors.centerIn: parent
99​ sourceComponent: modelData.iconPath ? iconView : noIcon
100​ }
101​ }
102​ QQC2.Label {
103​ id: themeName
104​ text: modelData.themeName
105​ horizontalAlignment: Text.AlignHCenter
106​ Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
107​ }
108​ }
109​ }
110​ }
111​}