diff --git a/tabbox/qml/clients/thumbnails/contents/ui/main.qml b/tabbox/qml/clients/thumbnails/contents/ui/main.qml index 33988b952a..1ed17355e2 100644 --- a/tabbox/qml/clients/thumbnails/contents/ui/main.qml +++ b/tabbox/qml/clients/thumbnails/contents/ui/main.qml @@ -20,171 +20,165 @@ 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 0.1 as KWin +import org.kde.kwin 2.0 as KWin -Item { - id: thumbnailTabBox - property int screenWidth : 1 - property int screenHeight : 1 - property real screenFactor: screenWidth/screenHeight - property int optimalWidth: (thumbnailListView.thumbnailWidth + hoverItem.margins.left + hoverItem.margins.right) * thumbnailListView.count + background.leftMargin + background.bottomMargin - property int optimalHeight: thumbnailListView.thumbnailWidth*(1.0/screenFactor) + hoverItem.margins.top + hoverItem.margins.bottom + background.topMargin + background.bottomMargin + 40 - property bool canStretchX: false - 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.3, optimalWidth), screenWidth * 0.9) - height: Math.min(Math.max(screenHeight * 0.15, optimalHeight), screenHeight * 0.7) - clip: true - focus: true +KWin.Switcher { + id: tabBox + currentIndex: thumbnailListView.currentIndex - - function setModel(model) { - thumbnailListView.model = model; - } - - ShadowedSvgItem { - id: background - anchors.fill: parent - } - // just to get the margin sizes - PlasmaCore.FrameSvgItem { - id: hoverItem - imagePath: "widgets/viewitem" - prefix: "hover" - visible: false - } - - ListView { - signal currentIndexChanged(int index) - id: thumbnailListView - objectName: "listView" - orientation: ListView.Horizontal - property int thumbnailWidth: 300 - height: thumbnailWidth * (1.0/screenFactor) + hoverItem.margins.bottom + hoverItem.margins.top - spacing: 5 - highlightMoveDuration: 250 - width: Math.min(parent.width - (anchors.leftMargin + anchors.rightMargin) - (hoverItem.margins.left + hoverItem.margins.right), thumbnailWidth * count + 5 * (count - 1)) - anchors { - top: parent.top - topMargin: background.topMargin - leftMargin: background.leftMargin - rightMargin: background.rightMargin - bottomMargin: background.bottomMargin - horizontalCenter: parent.horizontalCenter + PlasmaCore.Dialog { + id: dialog + location: PlasmaCore.Types.Floating + visible: tabBox.visible + windowFlags: Qt.X11BypassWindowManagerHint + onVisibleChanged: { + if (visible) { + dialog.x = tabBox.screenGeometry.x + tabBox.screenGeometry.width * 0.5 - dialogMainItem.width * 0.5; + dialog.y = tabBox.screenGeometry.y + tabBox.screenGeometry.height * 0.5 - dialogMainItem.height * 0.5; + } } - clip: true - delegate: Item { - property alias data: thumbnailItem.data - id: delegateItem - width: thumbnailListView.thumbnailWidth - height: thumbnailListView.thumbnailWidth*(1.0/screenFactor) - KWin.ThumbnailItem { - property variant data: model - id: thumbnailItem - wId: windowId - clip: true - clipTo: thumbnailListView + mainItem: Item { + id: dialogMainItem + property real screenFactor: tabBox.screenGeometry.width/tabBox.screenGeometry.height + property int optimalWidth: (thumbnailListView.thumbnailWidth + hoverItem.margins.left + hoverItem.margins.right) * thumbnailListView.count + property int optimalHeight: thumbnailListView.thumbnailWidth*(1.0/screenFactor) + hoverItem.margins.top + hoverItem.margins.bottom + 40 + 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.15, optimalHeight), tabBox.screenGeometry.height * 0.7) + clip: true + focus: true + + // just to get the margin sizes + PlasmaCore.FrameSvgItem { + id: hoverItem + imagePath: "widgets/viewitem" + prefix: "hover" + visible: false + } + + ListView { + id: thumbnailListView + model: tabBox.model + orientation: ListView.Horizontal + property int thumbnailWidth: 300 + height: thumbnailWidth * (1.0/dialogMainItem.screenFactor) + hoverItem.margins.bottom + hoverItem.margins.top + spacing: 5 + highlightMoveDuration: 250 + width: Math.min(parent.width - (anchors.leftMargin + anchors.rightMargin) - (hoverItem.margins.left + hoverItem.margins.right), thumbnailWidth * count + 5 * (count - 1)) anchors { - fill: parent - leftMargin: hoverItem.margins.left - rightMargin: hoverItem.margins.right - topMargin: hoverItem.margins.top - bottomMargin: hoverItem.margins.bottom + top: parent.top + horizontalCenter: parent.horizontalCenter + } + clip: true + delegate: Item { + property alias data: thumbnailItem.data + id: delegateItem + width: thumbnailListView.thumbnailWidth + height: thumbnailListView.thumbnailWidth*(1.0/dialogMainItem.screenFactor) + KWin.ThumbnailItem { + property variant data: model + id: thumbnailItem + wId: windowId + clip: true + clipTo: thumbnailListView + anchors { + fill: parent + leftMargin: hoverItem.margins.left + rightMargin: hoverItem.margins.right + topMargin: hoverItem.margins.top + bottomMargin: hoverItem.margins.bottom + } + } + MouseArea { + anchors.fill: parent + onClicked: { + thumbnailListView.currentIndex = index; + } + } + } + highlight: PlasmaCore.FrameSvgItem { + id: highlightItem + imagePath: "widgets/viewitem" + prefix: "hover" + width: thumbnailListView.thumbnailWidth + height: thumbnailListView.thumbnailWidth*(1.0/dialogMainItem.screenFactor) + } + boundsBehavior: Flickable.StopAtBounds + Connections { + target: tabBox + onCurrentIndexChanged: {thumbnailListView.currentIndex = tabBox.currentIndex;} } } - MouseArea { - anchors.fill: parent - onClicked: { - thumbnailListView.currentIndex = index; - thumbnailListView.currentIndexChanged(thumbnailListView.currentIndex); + Item { + height: 40 + id: captionFrame + anchors { + top: thumbnailListView.bottom + left: parent.left + right: parent.right + bottom: parent.bottom + topMargin: hoverItem.margins.bottom + } + QIconItem { + id: iconItem + icon: thumbnailListView.currentItem ? thumbnailListView.currentItem.data.icon : "" + width: 32 + height: 32 + anchors { + verticalCenter: parent.verticalCenter + right: textItem.left + rightMargin: 4 + } + } + Text { + 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 - iconItem.width * 2 - captionFrame.anchors.rightMargin; + } + id: textItem + property int maxWidth: 0 + text: thumbnailListView.currentItem ? thumbnailListView.currentItem.data.caption : "" + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + color: theme.textColor + elide: Text.ElideMiddle + font { + bold: true + } + anchors { + verticalCenter: parent.verticalCenter + horizontalCenter: parent.horizontalCenter + } + onTextChanged: textItem.constrainWidth() + Component.onCompleted: textItem.calculateMaxWidth() + Connections { + target: dialogMainItem + onWidthChanged: { + textItem.calculateMaxWidth(); + textItem.constrainWidth(); + } + } } } - } - highlight: PlasmaCore.FrameSvgItem { - id: highlightItem - imagePath: "widgets/viewitem" - prefix: "hover" - width: thumbnailListView.thumbnailWidth - height: thumbnailListView.thumbnailWidth*(1.0/screenFactor) - } - boundsBehavior: Flickable.StopAtBounds - } - Item { - height: 40 - id: captionFrame - anchors { - top: thumbnailListView.bottom - left: parent.left - right: parent.right - bottom: parent.bottom - topMargin: hoverItem.margins.bottom - leftMargin: background.leftMargin - rightMargin: background.rightMargin - bottomMargin: background.bottomMargin - } - QIconItem { - id: iconItem - icon: thumbnailListView.currentItem ? thumbnailListView.currentItem.data.icon : "" - width: 32 - height: 32 - anchors { - verticalCenter: parent.verticalCenter - right: textItem.left - rightMargin: 4 - } - } - Text { - function constrainWidth() { - if (textItem.width > textItem.maxWidth && textItem.width > 0 && textItem.maxWidth > 0) { - textItem.width = textItem.maxWidth; - } else { - textItem.width = undefined; + /* + * 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_Left) { + thumbnailListView.decrementCurrentIndex(); + } else if (event.key == Qt.Key_Right) { + thumbnailListView.incrementCurrentIndex(); } } - function calculateMaxWidth() { - textItem.maxWidth = thumbnailTabBox.width - captionFrame.anchors.leftMargin - captionFrame.anchors.rightMargin - iconItem.width * 2 - captionFrame.anchors.rightMargin; - } - id: textItem - property int maxWidth: 0 - text: thumbnailListView.currentItem ? thumbnailListView.currentItem.data.caption : "" - horizontalAlignment: Text.AlignHCenter - verticalAlignment: Text.AlignVCenter - color: theme.textColor - elide: Text.ElideMiddle - font { - bold: true - } - anchors { - verticalCenter: parent.verticalCenter - horizontalCenter: parent.horizontalCenter - } - onTextChanged: textItem.constrainWidth() - Component.onCompleted: textItem.calculateMaxWidth() - Connections { - target: thumbnailTabBox - onWidthChanged: { - textItem.calculateMaxWidth(); - textItem.constrainWidth(); - } - } - } - } - /* - * 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_Left) { - thumbnailListView.decrementCurrentIndex(); - thumbnailListView.currentIndexChanged(thumbnailListView.currentIndex); - } else if (event.key == Qt.Key_Right) { - thumbnailListView.incrementCurrentIndex(); - thumbnailListView.currentIndexChanged(thumbnailListView.currentIndex); } } }