From 4ff2a5ea3e521687ed03dbef5aa02c11a6bb4ad5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Gr=C3=A4=C3=9Flin?= Date: Tue, 10 Dec 2013 07:24:34 +0100 Subject: [PATCH] [kwin/tabbox] Informative qml uses new Switcher item and PlasmaCore.Dialog Reference implementation for the adjustments to use a PlasmaCore.Dialog and the new required switcher item. --- .../clients/informative/contents/ui/main.qml | 340 +++++++++--------- 1 file changed, 166 insertions(+), 174 deletions(-) diff --git a/tabbox/qml/clients/informative/contents/ui/main.qml b/tabbox/qml/clients/informative/contents/ui/main.qml index da3193c7d7..df00f4c935 100644 --- a/tabbox/qml/clients/informative/contents/ui/main.qml +++ b/tabbox/qml/clients/informative/contents/ui/main.qml @@ -20,196 +20,188 @@ along with this program. If not, see . import QtQuick 2.0 import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.qtextracomponents 2.0 +import org.kde.kwin 2.0 as KWin -Item { - id: informativeTabBox - property int screenWidth : 0 - property int screenHeight : 0 - property bool allDesktops: true - property string longestCaption: "" - property int optimalWidth: listView.maxRowWidth - property int optimalHeight: listView.rowHeight * listView.count + background.topMargin + background.bottomMargin - property bool canStretchX: true - property bool canStretchY: false - property string maskImagePath: background.maskImagePath - property double maskWidth: background.centerWidth - property double maskHeight: background.centerHeight - property int maskTopMargin: background.centerTopMargin - property int maskLeftMargin: background.centerLeftMargin - width: Math.min(Math.max(screenWidth * 0.2, optimalWidth), screenWidth * 0.8) - height: Math.min(Math.max(screenHeight * 0.2, optimalHeight), screenHeight * 0.8) - focus: true +KWin.Switcher { + id: tabBox + currentIndex: listView.currentIndex - property int textMargin: 2 + PlasmaCore.Dialog { + id: informativeTabBox + property bool canStretchX: true + property bool canStretchY: false - onLongestCaptionChanged: { - listView.maxRowWidth = listView.calculateMaxRowWidth(); - } + property int textMargin: 2 - function setModel(model) { - listView.model = model; - listView.maxRowWidth = listView.calculateMaxRowWidth(); - } - - /** - * Returns the caption with adjustments for minimized items. - * @param caption the original caption - * @param mimized whether the item is minimized - * @return Caption adjusted for minimized state - **/ - function itemCaption(caption, minimized) { - var text = caption; - if (minimized) { - text = "(" + text + ")"; + location: PlasmaCore.Types.Floating + visible: tabBox.visible + windowFlags: Qt.X11BypassWindowManagerHint + onVisibleChanged: { + if (visible) { + informativeTabBox.x = tabBox.screenGeometry.x + tabBox.screenGeometry.width * 0.5 - dialogMainItem.width * 0.5; + informativeTabBox.y = tabBox.screenGeometry.y + tabBox.screenGeometry.height * 0.5 - dialogMainItem.height * 0.5; + } } - return text; - } - // just to get the margin sizes - PlasmaCore.FrameSvgItem { - id: hoverItem - imagePath: "widgets/viewitem" - prefix: "hover" - visible: false - } + mainItem: Item { + id: dialogMainItem + property int optimalWidth: listView.maxRowWidth + property int optimalHeight: listView.rowHeight * listView.count + width: Math.min(Math.max(tabBox.screenGeometry.width * 0.2, optimalWidth), tabBox.screenGeometry.width * 0.8) + height: Math.min(Math.max(tabBox.screenGeometry.height * 0.2, optimalHeight), tabBox.screenGeometry.height * 0.8) + focus: true - ShadowedSvgItem { - id: background - anchors.fill: parent - } + // just to get the margin sizes + PlasmaCore.FrameSvgItem { + id: hoverItem + imagePath: "widgets/viewitem" + prefix: "hover" + visible: false + } - // delegate - Component { - id: listDelegate - Item { - id: delegateItem - width: listView.width - height: listView.rowHeight - QIconItem { - id: iconItem - icon: model.icon - width: 32 - height: 32 - state: index == listView.currentIndex ? QIconItem.ActiveState : QIconItem.DisabledState - anchors { - verticalCenter: parent.verticalCenter - left: parent.left - leftMargin: hoverItem.margins.left + // delegate + Component { + id: listDelegate + Item { + id: delegateItem + width: listView.width + height: listView.rowHeight + QIconItem { + id: iconItem + icon: model.icon + width: 32 + height: 32 + state: index == listView.currentIndex ? QIconItem.ActiveState : QIconItem.DisabledState + anchors { + verticalCenter: parent.verticalCenter + left: parent.left + leftMargin: hoverItem.margins.left + } + } + Text { + id: captionItem + horizontalAlignment: Text.AlignHCenter + text: listView.itemCaption(caption, minimized) + font.bold: true + font.italic: minimized + color: theme.textColor + elide: Text.ElideMiddle + anchors { + left: iconItem.right + right: parent.right + top: parent.top + topMargin: informativeTabBox.textMargin + hoverItem.margins.top + rightMargin: hoverItem.margins.right + } + } + Text { + id: desktopNameItem + horizontalAlignment: Text.AlignHCenter + text: desktopName + font.bold: false + font.italic: true + color: theme.textColor + elide: Text.ElideMiddle + visible: tabBox.allDesktops + anchors { + left: iconItem.right + right: parent.right + top: captionItem.bottom + topMargin: informativeTabBox.textMargin + bottom: parent.bottom + bottomMargin: informativeTabBox.textMargin + hoverItem.margins.bottom + rightMargin: hoverItem.margins.right + } + } + MouseArea { + anchors.fill: parent + onClicked: { + listView.currentIndex = index; + } + } } } - Text { - id: captionItem - horizontalAlignment: Text.AlignHCenter - text: itemCaption(caption, minimized) - font.bold: true - font.italic: minimized - color: theme.textColor - elide: Text.ElideMiddle - anchors { - left: iconItem.right - right: parent.right - top: parent.top - topMargin: informativeTabBox.textMargin + hoverItem.margins.top - rightMargin: hoverItem.margins.right + ListView { + /** + * Returns the caption with adjustments for minimized items. + * @param caption the original caption + * @param mimized whether the item is minimized + * @return Caption adjusted for minimized state + **/ + function itemCaption(caption, minimized) { + var text = caption; + if (minimized) { + text = "(" + text + ")"; + } + return text; } - } - Text { - id: desktopNameItem - horizontalAlignment: Text.AlignHCenter - text: desktopName - font.bold: false - font.italic: true - color: theme.textColor - elide: Text.ElideMiddle - visible: informativeTabBox.allDesktops - anchors { - left: iconItem.right - right: parent.right - top: captionItem.bottom - topMargin: informativeTabBox.textMargin - bottom: parent.bottom - bottomMargin: informativeTabBox.textMargin + hoverItem.margins.bottom - rightMargin: hoverItem.margins.right + function calculateMaxRowWidth() { + var width = 0; + var textElement = Qt.createQmlObject( + 'import QtQuick 2.0;' + + 'Text {\n' + + ' text: "' + listView.itemCaption(tabBox.model.longestCaption(), true) + '"\n' + + ' font.bold: true\n' + + ' visible: false\n' + + '}', + listView, "calculateMaxRowWidth"); + width = Math.max(textElement.width, width); + textElement.destroy(); + return width + 32 + hoverItem.margins.right + hoverItem.margins.left; } - } - MouseArea { - anchors.fill: parent - onClicked: { - listView.currentIndex = index; - listView.currentIndexChanged(listView.currentIndex); + /** + * Calculates the height of one row based on the text height and icon size. + * @return Row height + **/ + function calcRowHeight() { + var textElement = Qt.createQmlObject( + 'import QtQuick 2.0;' + + 'Text {\n' + + ' text: "Some Text"\n' + + ' font.bold: true\n' + + ' visible: false\n' + + '}', + listView, "calcRowHeight"); + var height = textElement.height; + textElement.destroy(); + // icon size or two text elements and margins and hoverItem margins + return Math.max(32, height*2 + informativeTabBox.textMargin * 3 + hoverItem.margins.top + hoverItem.margins.bottom); + } + id: listView + model: tabBox.model + // the maximum text width + icon item width (32 + 4 margin) + margins for hover item + margins for background + property int maxRowWidth: calculateMaxRowWidth() + property int rowHeight: calcRowHeight() + anchors { + fill: parent + } + clip: true + delegate: listDelegate + highlight: PlasmaCore.FrameSvgItem { + id: highlightItem + imagePath: "widgets/viewitem" + prefix: "hover" + width: listView.width + } + highlightMoveDuration: 250 + boundsBehavior: Flickable.StopAtBounds + Connections { + target: tabBox + onCurrentIndexChanged: {listView.currentIndex = tabBox.currentIndex;} } } } - } - ListView { - function calculateMaxRowWidth() { - var width = 0; - var textElement = Qt.createQmlObject( - 'import QtQuick 2.0;' - + 'Text {\n' - + ' text: "' + itemCaption(informativeTabBox.longestCaption, true) + '"\n' - + ' font.bold: true\n' - + ' visible: false\n' - + '}', - listView, "calculateMaxRowWidth"); - width = Math.max(textElement.width, width); - textElement.destroy(); - return width + 32 + hoverItem.margins.right + hoverItem.margins.left + background.leftMargin + background.rightMargin; - } - /** - * Calculates the height of one row based on the text height and icon size. - * @return Row height + /* + * Key navigation on outer item for two reasons: + * @li we have to emit the change signal + * @li on multiple invocation it does not work on the list view. Focus seems to be lost. **/ - function calcRowHeight() { - var textElement = Qt.createQmlObject( - 'import QtQuick 2.0;' - + 'Text {\n' - + ' text: "Some Text"\n' - + ' font.bold: true\n' - + ' visible: false\n' - + '}', - listView, "calcRowHeight"); - var height = textElement.height; - textElement.destroy(); - // icon size or two text elements and margins and hoverItem margins - return Math.max(32, height*2 + informativeTabBox.textMargin * 3 + hoverItem.margins.top + hoverItem.margins.bottom); - } - signal currentIndexChanged(int index) - id: listView - objectName: "listView" - // the maximum text width + icon item width (32 + 4 margin) + margins for hover item + margins for background - property int maxRowWidth: calculateMaxRowWidth() - property int rowHeight: calcRowHeight() - anchors { - fill: parent - topMargin: background.topMargin - leftMargin: background.leftMargin - rightMargin: background.rightMargin - bottomMargin: background.bottomMargin - } - clip: true - delegate: listDelegate - highlight: PlasmaCore.FrameSvgItem { - id: highlightItem - imagePath: "widgets/viewitem" - prefix: "hover" - width: listView.width - } - highlightMoveDuration: 250 - boundsBehavior: Flickable.StopAtBounds - } - /* - * Key navigation on outer item for two reasons: - * @li we have to emit the change signal - * @li on multiple invocation it does not work on the list view. Focus seems to be lost. - **/ - Keys.onPressed: { - if (event.key == Qt.Key_Up) { - listView.decrementCurrentIndex(); - listView.currentIndexChanged(listView.currentIndex); - } else if (event.key == Qt.Key_Down) { - listView.incrementCurrentIndex(); - listView.currentIndexChanged(listView.currentIndex); + Keys.onPressed: { + if (event.key == Qt.Key_Up) { + listView.decrementCurrentIndex(); + } else if (event.key == Qt.Key_Down) { + listView.incrementCurrentIndex(); + } } } }