yukijoou/kwin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[tabbox/sidebar] Mass improve layouting in sidebar

Browse source 
* Apply anchoring fixes to the Thumbnail
* Use RowLayout for the caption
* elide the text of the caption
* fix binding loops

Reviewed-By: Marco Martin
This commit is contained in:
Martin Gräßlin 2014-05-16 11:48:24 +02:00
parent 203d043a09
commit 83c76f21a4
1 changed files with 78 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
tabbox/qml/clients/sidebar/contents/ui/main.qml
View file

@ -19,6 +19,7 @@ You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>. along with this program. If not, see <http://www.gnu.org/licenses/>.
*********************************************************************/ *********************************************************************/
import QtQuick 2.0 import QtQuick 2.0
import QtQuick.Layouts 1.1
import org.kde.plasma.core 2.0 as PlasmaCore import org.kde.plasma.core 2.0 as PlasmaCore
import org.kde.plasma.components 2.0 as PlasmaComponents import org.kde.plasma.components 2.0 as PlasmaComponents
import org.kde.plasma.extras 2.0 as PlasmaExtras import org.kde.plasma.extras 2.0 as PlasmaExtras
@ -29,6 +30,14 @@ KWin.Switcher {
id: tabBox id: tabBox
property real screenFactor: screenGeometry.width/screenGeometry.height property real screenFactor: screenGeometry.width/screenGeometry.height
// just to get the margin sizes
PlasmaCore.FrameSvgItem {
id: hoverItem
imagePath: "widgets/viewitem"
prefix: "hover"
visible: false
}
PlasmaCore.Dialog { PlasmaCore.Dialog {
id: dialog id: dialog
location: PlasmaCore.Types.Floating location: PlasmaCore.Types.Floating
@ -37,93 +46,92 @@ KWin.Switcher {
x: screenGeometry.x x: screenGeometry.x
y: screenGeometry.y y: screenGeometry.y
mainItem: Item { mainItem: PlasmaExtras.ScrollArea {
id: dialogMainItem id: dialogMainItem
property int optimalWidth: (thumbnailListView.thumbnailWidth + hoverItem.margins.left + hoverItem.margins.right)
property bool canStretchX: false property bool canStretchX: false
property bool canStretchY: false property bool canStretchY: false
width: Math.min(Math.max(tabBox.screenGeometry.width * 0.15, optimalWidth), tabBox.screenGeometry.width * 0.3) width: tabBox.screenGeometry.width * 0.15
height: tabBox.screenGeometry.height height: tabBox.screenGeometry.height
clip: true clip: true
focus: true focus: true
// just to get the margin sizes ListView {
PlasmaCore.FrameSvgItem { id: thumbnailListView
id: hoverItem orientation: ListView.Vertical
imagePath: "widgets/viewitem" model: tabBox.model
prefix: "hover" anchors.fill: parent
visible: false property int delegateWidth: thumbnailListView.width
} spacing: 5
highlightMoveDuration: 250
PlasmaExtras.ScrollArea { clip: true
anchors { delegate: Item {
fill: parent id: delegateItem
} width: thumbnailListView.delegateWidth
ListView { height: thumbnailItem.height + label.height + 30
id: thumbnailListView Item {
orientation: ListView.Vertical id: thumbnailItem
model: tabBox.model width: parent.width - hoverItem.margins.left - hoverItem.margins.right
property int thumbnailWidth: width height: thumbnailListView.delegateWidth*(1.0/screenFactor) - hoverItem.margins.top
height: thumbnailWidth * (1.0/screenFactor) + hoverItem.margins.bottom + hoverItem.margins.top anchors {
spacing: 5 top: parent.top
highlightMoveDuration: 250 left: parent.left
width: Math.min(parent.width - (anchors.leftMargin + anchors.rightMargin) - (hoverItem.margins.left + hoverItem.margins.right), thumbnailWidth * count + 5 * (count - 1)) leftMargin: hoverItem.margins.left
rightMargin: hoverItem.margins.right
clip: true topMargin: hoverItem.margins.top
delegate: Item { }
id: delegateItem
width: thumbnailListView.thumbnailWidth
height: thumbnailListView.thumbnailWidth*(1.0/screenFactor) + label.height + 30
KWin.ThumbnailItem { KWin.ThumbnailItem {
id: thumbnailItem
wId: windowId wId: windowId
anchors {
centerIn: parent
}
width: thumbnailListView.thumbnailWidth
height: thumbnailListView.thumbnailWidth*(1.0/screenFactor)
}
MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: {
thumbnailListView.currentIndex = index;
}
}
Row {
id: label
spacing: 4
anchors {
left: parent.left
bottom: parent.bottom
leftMargin: 8
bottomMargin: 8
}
QIconItem {
id: iconItem
icon: model.icon
width: 32
height: 32
}
PlasmaComponents.Label {
text: model.caption
anchors.verticalCenter: parent.verticalCenter
}
} }
} }
highlight: PlasmaCore.FrameSvgItem { RowLayout {
id: highlightItem id: label
imagePath: "widgets/viewitem" spacing: 4
prefix: "hover" property int maximumWidth: thumbnailListView.delegateWidth
width: thumbnailListView.thumbnailWidth Layout.maximumWidth: maximumWidth
height: thumbnailListView.thumbnailWidth*(1.0/screenFactor) anchors {
left: parent.left
bottom: parent.bottom
leftMargin: hoverItem.margins.left
bottomMargin: hoverItem.margins.bottom
}
QIconItem {
id: iconItem
icon: model.icon
property int iconSize: 32
width: iconSize
height: iconSize
Layout.preferredHeight: iconSize
Layout.preferredWidth: iconSize
}
PlasmaComponents.Label {
text: model.caption
elide: Text.ElideMiddle
Layout.fillWidth: true
Layout.maximumWidth: label.maximumWidth - iconItem.iconSize - label.spacing * 2
}
} }
boundsBehavior: Flickable.StopAtBounds MouseArea {
Connections { anchors.fill: parent
target: tabBox onClicked: {
onCurrentIndexChanged: {thumbnailListView.currentIndex = tabBox.currentIndex;} thumbnailListView.currentIndex = index;
}
} }
} }
highlight: PlasmaCore.FrameSvgItem {
id: highlightItem
imagePath: "widgets/viewitem"
prefix: "hover"
width: thumbnailListView.currentItem.width
height: thumbnailListView.currentItem.height
}
boundsBehavior: Flickable.StopAtBounds
Connections {
target: tabBox
onCurrentIndexChanged: {thumbnailListView.currentIndex = tabBox.currentIndex;}
}
} }
/* /*