Differential D26681 Diff 73590 windowswitchers/thumbnail_grid/contents/ui/main.qml

Changeset View

Standalone View

View Options

windowswitchers/thumbnail_grid/contents/ui/main.qml

  • This file was added.
PropertyOld ValueNew Value
File Modenull100755
1​/********************************************************************
zzagUnsubmitted
Not Done

Bad file permissions. Needs to be 644.

zzag: Bad file permissions. Needs to be 644.
2​ KWin - the KDE window manager
3​ This file is part of the KDE project.
4​
5​Copyright (C) 2020 Chris Holland <zrenfire@gmail.com>
6​
7​This program is free software; you can redistribute it and/or modify
8​it under the terms of the GNU General Public License as published by
9​the Free Software Foundation; either version 2 of the License, or
10​(at your option) any later version.
11​
12​This program is distributed in the hope that it will be useful,
13​but WITHOUT ANY WARRANTY; without even the implied warranty of
14​MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15​GNU General Public License for more details.
16​
17​You should have received a copy of the GNU General Public License
18​along with this program. If not, see <http://www.gnu.org/licenses/>.
19​*********************************************************************/
20​
21​import QtQuick 2.0
22​import QtQuick.Layouts 1.1
23​import org.kde.plasma.core 2.0 as PlasmaCore
24​import org.kde.plasma.components 2.0 as PlasmaComponents
25​import org.kde.kquickcontrolsaddons 2.0
26​import org.kde.kwin 2.0 as KWin
27​
28​// https://techbase.kde.org/Development/Tutorials/KWin/WindowSwitcher
29​// https://github.com/KDE/kwin/blob/master/tabbox/switcheritem.h
30​KWin.Switcher {
31​ id: tabBox
32​ currentIndex: thumbnailGridView.currentIndex
33​
34​ PlasmaCore.Dialog {
35​ id: dialog
36​ location: PlasmaCore.Types.Floating
37​ visible: tabBox.visible
38​ flags: Qt.X11BypassWindowManagerHint
39​ x: tabBox.screenGeometry.x + tabBox.screenGeometry.width * 0.5 - dialogMainItem.width * 0.5
40​ y: tabBox.screenGeometry.y + tabBox.screenGeometry.height * 0.5 - dialogMainItem.height * 0.5
41​
42​ onVisibleChanged: {
43​ if (visible) {
44​ dialogMainItem.calculateColumnCount();
45​ } else {
46​ thumbnailGridView.highCount = 0;
47​ }
48​ }
49​
50​ mainItem: Item {
51​ id: dialogMainItem
52​
53​ focus: true
54​
55​ property int maxWidth: tabBox.screenGeometry.width * 0.9
56​ property int maxHeight: tabBox.screenGeometry.height * 0.7
57​ property real screenFactor: tabBox.screenGeometry.width / tabBox.screenGeometry.height
58​ property int maxGridColumnsByWidth: Math.floor(maxWidth / thumbnailGridView.cellWidth)
59​
60​ property int gridColumns: maxGridColumnsByWidth
61​ property int gridRows: Math.ceil(thumbnailGridView.count / gridColumns)
62​ property int optimalWidth: thumbnailGridView.cellWidth * gridColumns
63​ property int optimalHeight: thumbnailGridView.cellHeight * gridRows
64​ property bool canStretchX: false
65​ property bool canStretchY: false
66​ width: Math.min(Math.max(thumbnailGridView.cellWidth, optimalWidth), maxWidth)
67​ height: Math.min(Math.max(thumbnailGridView.cellHeight, optimalHeight), maxHeight)
68​
69​ clip: true
70​
71​ // Simple greedy algorithm
72​ function calculateColumnCount() {
73​ // respect screenGeometry
74​ var c = Math.min(thumbnailGridView.count, maxGridColumnsByWidth);
75​
76​ var residue = thumbnailGridView.count % c;
zzagUnsubmitted
Not Done

You could use const here

const c = ...

const residue = ...
zzag: You could use `const` here ```lang=js const c = ... const residue = ... ```
77​ if (residue == 0) {
78​ gridColumns = c;
79​ return;
80​ }
81​
82​ // start greedy recursion
83​ gridColumns = columnCountRecursion(c, c, c - residue);
84​ }
85​
86​ // Step for greedy algorithm
87​ function columnCountRecursion(prevC, prevBestC, prevDiff) {
88​ var c = prevC - 1;
89​
90​ // don't increase vertical extent more than horizontal
91​ // and don't exceed maxHeight
92​ if (prevC * prevC <= thumbnailGridView.count + prevDiff ||
93​ maxHeight < Math.ceil(thumbnailGridView.count / c) * thumbnailGridView.cellHeight) {
94​ return prevBestC;
95​ }
96​ var residue = thumbnailGridView.count % c;
97​ // halts algorithm at some point
98​ if (residue == 0) {
99​ return c;
100​ }
101​ // empty slots
102​ var diff = c - residue;
103​
104​ // compare it to previous count of empty slots
105​ if (diff < prevDiff) {
106​ return columnCountRecursion(c, c, diff);
107​ } else if (diff == prevDiff) {
108​ // when it's the same try again, we'll stop early enough thanks to the landscape mode condition
109​ return columnCountRecursion(c, prevBestC, diff);
110​ }
111​ // when we've found a local minimum choose this one (greedy)
112​ return columnCountRecursion(c, prevBestC, diff);
113​ }
114​
115​ // Just to get the margin sizes
116​ PlasmaCore.FrameSvgItem {
117​ id: hoverItem
118​ imagePath: "widgets/viewitem"
119​ prefix: "hover"
120​ visible: false
121​ }
122​
123​ GridView {
124​ id: thumbnailGridView
125​ anchors.fill: parent
126​
127​ model: tabBox.model
128​
129​ property int captionRowHeight: 22 * units.devicePixelRatio
130​ property int thumbnailWidth: 300 * units.devicePixelRatio
131​ property int thumbnailHeight: thumbnailWidth * (1.0/dialogMainItem.screenFactor)
132​ cellWidth: hoverItem.margins.left + thumbnailWidth + hoverItem.margins.right
133​ cellHeight: hoverItem.margins.top + captionRowHeight + thumbnailHeight + hoverItem.margins.bottom
134​ height: cellHeight
135​
136​ keyNavigationWraps: true
137​ highlightMoveDuration: 0
138​
139​ // Allow expansion on increasing count
140​ property int highCount: 0
141​ onCountChanged: {
142​ if (highCount < count) {
143​ dialogMainItem.calculateColumnCount();
144​ highCount = count;
145​ }
146​ }
147​
148​ delegate: Item {
149​ id: thumbnailGridItem
150​ width: thumbnailGridView.cellWidth
151​ height: thumbnailGridView.cellHeight
152​
153​ MouseArea {
154​ anchors.fill: parent
155​ onClicked: {
156​ thumbnailGridItem.select();
157​ }
158​ }
159​ function select() {
160​ thumbnailGridView.currentIndex = index;
161​ thumbnailGridView.currentIndexChanged(thumbnailGridView.currentIndex);
162​ }
163​
164​ Item {
165​ z: 0
166​ anchors.fill: parent
167​ anchors.leftMargin: hoverItem.margins.left
168​ anchors.topMargin: hoverItem.margins.top
169​ anchors.rightMargin: hoverItem.margins.right
170​ anchors.bottomMargin: hoverItem.margins.bottom
171​
172​ RowLayout {
173​ id: captionRow
174​ anchors.left: parent.left
175​ anchors.top: parent.top
176​ anchors.right: parent.right
177​ height: thumbnailGridView.captionRowHeight
178​ spacing: 4
179​
180​ QIconItem {
181​ id: iconItem
182​ Layout.fillHeight: true
romanggUnsubmitted
Not Done

It works for me if you keep it height: parent.height.

romangg: It works for me if you keep it `height: parent.height`.
183​ implicitWidth: parent.height
romanggUnsubmitted
Not Done

This must be width: parent.height. implicitWidth is a read-only property. WIthout this change the qml file won't load.

romangg: This must be `width: parent.height`. implicitWidth is a read-only property. WIthout this change…
davidedmundsonUnsubmitted
Not Done

you can use Layout.preferredWidth

One shouldn't specifiy a width/height from an item inside a layout

davidedmundson: you can use Layout.preferredWidth One shouldn't specifiy a width/height from an item inside a…
ZrenAuthorUnsubmitted
Not Done

Uhg, I was using width: parent.height and height: parent.height but changed it when cleaning it up. I must've not staged all the changes before diffing. This has made me notice another bug though.

By using height: parent.height, I was basically setting it at height: 22, which is smaller than the "close button" which is 30x30.

width: parent.height
height: parent.height

Layout.fillHeight: true
Layout.minimumWidth: height
Layout.maximumWidth: Layout.minimumWidth

This makes the icon slightly larger than I'm used to.

I've also noticed why I added clip: true to the KWin.ThumbnailItem, apparently the close button is 30x30, which is taller than the captionRow.height: 22. Here's a look at the overflow after removing clip: true and clipTo: parent:
Outlines with: Rectangle { anchors.fill: parent; border.color: "#f00"; border.width: 1; color: "transparent" }

I've fixed it all in the latest diff:


Zren: Uhg, I was using `width: parent.height` and `height: parent.height` but changed it when…
romanggUnsubmitted
Not Done

Yea, just tested it again and looks good!

romangg: Yea, just tested it again and looks good!
184​ icon: model.icon
185​ state: index == thumbnailGridView.currentIndex ? QIconItem.ActiveState : QIconItem.DefaultState
186​ }
187​
188​ PlasmaComponents.Label {
189​ id: label
190​ Layout.fillWidth: true
191​ Layout.fillHeight: true
192​ text: model.caption
193​ elide: Text.ElideRight
194​ }
195​
196​ PlasmaComponents.ToolButton {
197​ visible: model.closeable && typeof tabBox.model.close !== 'undefined' || false
198​ iconSource: 'window-close-symbolic'
199​ onClicked: {
200​ tabBox.model.close(index);
201​ }
202​ }
203​ }
204​
205​ // Cannot draw anything (like an icon) on top of thumbnail
206​ KWin.ThumbnailItem {
207​ anchors.fill: parent
208​ anchors.topMargin: captionRow.height
209​ wId: windowId
210​ clip: true
211​ clipTo: parent
212​ }
213​ }
214​ } // GridView.delegate
215​
216​ highlight: PlasmaCore.FrameSvgItem {
217​ id: highlightItem
218​ imagePath: "widgets/viewitem"
219​ prefix: "hover"
220​ }
221​
222​ Connections {
223​ target: tabBox
224​ onCurrentIndexChanged: {
225​ thumbnailGridView.currentIndex = tabBox.currentIndex;
226​ }
227​ }
228​ } // GridView
229​
230​
romanggUnsubmitted
Not Done

trailing white space

romangg: trailing white space
231​ // This doesn't work, nor does keyboard input work on any other tabbox skin (KDE 5.7.4)
davidedmundsonUnsubmitted
Not Done

GridView has it's own input handling you shouldn't need this anyway.

If keyboard doesn't work, chances are your activeFocus is incorrect.

I can only see focus: true on

id: dialogMainItem

it should be on the gridview instead

davidedmundson: GridView has it's own input handling you shouldn't need this anyway. If keyboard doesn't work…
ZrenAuthorUnsubmitted
Not Done

Arrow keys work. Sorry, forgot to this comment.

Zren: Arrow keys work. Sorry, forgot to this comment.
232​ // It does work in the preview however.
233​ Keys.onPressed: {
234​ // console.log('keyPressed', event.key)
235​ if (event.key == Qt.Key_Left) {
236​ thumbnailGridView.moveCurrentIndexLeft();
237​ } else if (event.key == Qt.Key_Right) {
238​ thumbnailGridView.moveCurrentIndexRight();
239​ } else if (event.key == Qt.Key_Up) {
240​ thumbnailGridView.moveCurrentIndexUp();
241​ } else if (event.key == Qt.Key_Down) {
242​ thumbnailGridView.moveCurrentIndexDown();
243​ } else {
244​ return;
245​ }
246​
247​ thumbnailGridView.currentIndexChanged(thumbnailGridView.currentIndex);
248​ }
249​ } // Dialog.mainItem
250​ } // Dialog
251​}