Differential D24305 Diff 67124 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​ Item {
66​ id: wrapper
ngrahamUnsubmitted
Done

indentation

ngraham: indentation
67​ Layout.preferredWidth: 128
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​ Layout.preferredHeight: 128
69​ Kirigami.Icon {
70​ property bool hasIcon : modelData.iconPath
ngrahamUnsubmitted
Done

height: width

ngraham: `height: width`
71​ anchors.centerIn: parent
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​ width: comparisonSize
73​ height: width
74​ source: hasIcon ? modelData.iconPath : "paint-none"
75​ color: hasIcon ? "" : Kirigami.Theme.disabledTextColor
76​ isMask: !hasIcon
77​ }
78​ }
79​ QQC2.Label {
80​ id: themeName
81​ text: modelData.themeName
82​ horizontalAlignment: Text.AlignHCenter
83​ Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
84​ }
85​ }
86​ }
87​ }
88​}