Commit e6bb39b6 authored by Ismael Asensio's avatar Ismael Asensio
Browse files

switchers/icons: Modernize and simplify code

Take advantadge of more recent QML and Plasma items, such as
`Layouts`, `TapHandler`, `PlasmaCore.IconItem` to reduce the
complexity and lines of code on big and small icons switchers
parent 0852fff3
Pipeline #198432 passed with stage
in 4 minutes and 22 seconds
......@@ -6,86 +6,50 @@
SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.0
import QtQuick 2.15
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.kquickcontrolsaddons 2.0
Item {
id: iconsTabBox
function decrementCurrentIndex() {
iconsListView.decrementCurrentIndex();
}
function incrementCurrentIndex() {
iconsListView.incrementCurrentIndex();
}
ListView {
id: iconsListView
property int iconSize
property alias count: iconsListView.count
property alias margins: hoverItem.margins
property alias currentItem: iconsListView.currentItem
property alias model: iconsListView.model
property alias currentIndex: iconsListView.currentIndex
focus: true
clip: true
orientation: ListView.Horizontal
// just to get the margin sizes
PlasmaCore.FrameSvgItem {
id: hoverItem
imagePath: "widgets/viewitem"
prefix: "hover"
visible: false
}
implicitWidth: contentWidth
implicitHeight: iconSize + (highlightItem ? highlightItem.margins.top + highlightItem.margins.bottom : 0)
// delegate
Component {
id: listDelegate
Item {
property alias caption: iconItem.caption
id: delegateItem
width: iconSize + hoverItem.margins.left + hoverItem.margins.right
height: iconSize + hoverItem.margins.top + hoverItem.margins.bottom
QIconItem {
property variant caption: model.caption
id: iconItem
icon: model.icon
width: iconSize
height: iconSize
state: index == iconsListView.currentIndex ? QIconItem.ActiveState : QIconItem.DefaultState
anchors {
fill: parent
leftMargin: hoverItem.margins.left
rightMargin: hoverItem.margins.right
topMargin: hoverItem.margins.top
bottomMargin: hoverItem.margins.bottom
}
}
MouseArea {
anchors.fill: parent
onClicked: {
iconsListView.currentIndex = index;
delegate: PlasmaCore.IconItem {
property string caption: model.caption
width: iconSize + (highlightItem ? highlightItem.margins.left + highlightItem.margins.right : 0)
height: iconSize + (highlightItem ? highlightItem.margins.top + highlightItem.margins.bottom : 0)
source: model.icon
active: index == iconsListView.currentIndex
TapHandler {
onSingleTapped: {
if (index === ListView.view.currentIndex) {
ListView.view.model.activate(index);
return;
}
ListView.view.currentIndex = index;
}
onDoubleTapped: ListView.view.model.activate(index)
}
}
ListView {
id: iconsListView
orientation: ListView.Horizontal
width: Math.min(parent.width, (iconSize + margins.left + margins.right) * count)
highlight: PlasmaCore.FrameSvgItem {
id: highlightItem
imagePath: "widgets/viewitem"
prefix: "hover"
width: iconSize + margins.left + margins.right
height: iconSize + margins.top + margins.bottom
anchors {
top: parent.top
horizontalCenter: parent.horizontalCenter
}
clip: true
delegate: listDelegate
highlight: PlasmaCore.FrameSvgItem {
id: highlightItem
imagePath: "widgets/viewitem"
prefix: "hover"
width: iconSize + margins.left + margins.right
height: iconSize + margins.top + margins.bottom
}
highlightMoveDuration: 0
highlightResizeDuration: 0
boundsBehavior: Flickable.StopAtBounds
}
highlightMoveDuration: 0
highlightResizeDuration: 0
boundsBehavior: Flickable.StopAtBounds
}
......@@ -6,90 +6,56 @@
SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.kquickcontrolsaddons 2.0
import org.kde.kwin 2.0 as KWin
KWin.Switcher {
id: tabBox
currentIndex: icons.currentIndex
PlasmaCore.Dialog {
id: dialog
location: PlasmaCore.Types.Floating
visible: tabBox.visible
flags: Qt.X11BypassWindowManagerHint
x: tabBox.screenGeometry.x + tabBox.screenGeometry.width * 0.5 - dialogMainItem.width * 0.5
y: tabBox.screenGeometry.y + tabBox.screenGeometry.height * 0.5 - dialogMainItem.height * 0.5
mainItem: Item {
mainItem: ColumnLayout {
id: dialogMainItem
property int optimalWidth: (icons.iconSize + icons.margins.left + icons.margins.right) * icons.count
property int optimalHeight: icons.iconSize + icons.margins.top + icons.margins.bottom + PlasmaCore.Units.gridUnit * 2
spacing: PlasmaCore.Units.smallSpacing * 2
property bool canStretchX: false
property bool canStretchY: false
width: Math.min(Math.max(tabBox.screenGeometry.width * 0.3, optimalWidth), tabBox.screenGeometry.width * 0.9)
height: Math.min(Math.max(tabBox.screenGeometry.height * 0.05, optimalHeight), tabBox.screenGeometry.height * 0.5)
width: Math.min(Math.max(tabBox.screenGeometry.width * 0.3, icons.implicitWidth), tabBox.screenGeometry.width * 0.9)
IconTabBox {
id: icons
model: tabBox.model
iconSize: PlasmaCore.Units.iconSizes.enormous
height: iconSize + icons.margins.top + icons.margins.bottom
anchors {
top: parent.top
left: parent.left
right: parent.right
}
Connections {
target: tabBox
function onCurrentIndexChanged() {icons.currentIndex = tabBox.currentIndex;}
}
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: tabBox.screenGeometry.width * 0.9
}
Item {
id: captionFrame
anchors {
top: icons.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
PlasmaComponents3.Label {
function constrainWidth() {
if (textItem.width > textItem.maxWidth && textItem.width > 0 && textItem.maxWidth > 0) {
textItem.width = textItem.maxWidth;
} else {
textItem.width = undefined;
}
}
function calculateMaxWidth() {
textItem.maxWidth = dialogMainItem.width - captionFrame.anchors.leftMargin - captionFrame.anchors.rightMargin - captionFrame.anchors.rightMargin;
}
id: textItem
property int maxWidth: 0
text: icons.currentItem ? icons.currentItem.caption : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideMiddle
font.weight: Font.Bold
anchors {
verticalCenter: parent.verticalCenter
horizontalCenter: parent.horizontalCenter
}
onTextChanged: textItem.constrainWidth()
Component.onCompleted: textItem.calculateMaxWidth()
Connections {
target: dialogMainItem
function onWidthChanged() {
textItem.calculateMaxWidth();
textItem.constrainWidth();
}
}
PlasmaComponents3.Label {
text: icons.currentItem ? icons.currentItem.caption : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideMiddle
font.weight: Font.Bold
Layout.fillWidth: true
Layout.topMargin: PlasmaCore.Units.smallSpacing
Layout.bottomMargin: PlasmaCore.Units.smallSpacing
}
Connections {
target: tabBox
function onCurrentIndexChanged() {
icons.currentIndex = tabBox.currentIndex;
}
}
/*
* Key navigation on outer item for two reasons:
* @li we have to emit the change signal
......
......@@ -6,69 +6,54 @@
SPDX-License-Identifier: GPL-2.0-or-later
*/
import QtQuick 2.0
import QtQuick 2.15
import QtQuick.Layouts 1.15
import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 3.0 as PlasmaComponents3
import org.kde.kquickcontrolsaddons 2.0
import org.kde.kwin 2.0 as KWin
KWin.Switcher {
id: tabBox
currentIndex: icons.currentIndex
PlasmaCore.Dialog {
id: dialog
location: PlasmaCore.Types.Floating
visible: tabBox.visible
flags: Qt.X11BypassWindowManagerHint
x: tabBox.screenGeometry.x + tabBox.screenGeometry.width * 0.5 - dialogMainItem.width * 0.5
y: tabBox.screenGeometry.y + tabBox.screenGeometry.height * 0.5 - dialogMainItem.height * 0.5
mainItem: Item {
mainItem: ColumnLayout {
id: dialogMainItem
property int optimalWidth: (icons.iconSize + icons.margins.left + icons.margins.right) * icons.count
property int optimalHeight: icons.iconSize + icons.margins.top + icons.margins.bottom + PlasmaCore.Units.gridUnit * 2
property bool canStretchX: false
property bool canStretchY: false
width: Math.min(Math.max(tabBox.screenGeometry.width * 0.1, optimalWidth), tabBox.screenGeometry.width * 0.9)
height: Math.min(Math.max(tabBox.screenGeometry.height * 0.05, optimalHeight), tabBox.screenGeometry.height * 0.5)
spacing: PlasmaCore.Units.smallSpacing * 2
width: Math.min(Math.max(tabBox.screenGeometry.width * 0.1, icons.implicitWidth), tabBox.screenGeometry.width * 0.9)
IconTabBox {
id: icons
model: tabBox.model
iconSize: PlasmaCore.Units.iconSizes.small
height: iconSize + icons.margins.top + icons.margins.bottom
anchors {
top: parent.top
left: parent.left
right: parent.right
}
Connections {
target: tabBox
function onCurrentIndexChanged() {icons.currentIndex = tabBox.currentIndex;}
}
Layout.alignment: Qt.AlignHCenter
Layout.maximumWidth: tabBox.screenGeometry.width * 0.9
}
Item {
anchors {
top: icons.bottom
left: parent.left
right: parent.right
bottom: parent.bottom
}
PlasmaComponents3.Label {
id: textItem
text: icons.currentItem ? icons.currentItem.caption : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideMiddle
font.weight: Font.Bold
anchors {
right: parent.right
left: parent.left
verticalCenter: parent.verticalCenter
}
PlasmaComponents3.Label {
text: icons.currentItem ? icons.currentItem.caption : ""
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
elide: Text.ElideMiddle
font.weight: Font.Bold
Layout.fillWidth: true
}
Connections {
target: tabBox
function onCurrentIndexChanged() {
icons.currentIndex = tabBox.currentIndex;
}
}
/*
* Key navigation on outer item for two reasons:
* @li we have to emit the change signal
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment