From 019f5a41dedcec55fabc61cb866b837dc310422b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rg=20Schummer?= <ext-jorg.2.schummer@nokia.com>
Date: Thu, 25 Feb 2010 09:45:00 +0200
Subject: [PATCH] QmlDesigner.ItemLibrary: Qml code cleanup
---
.../components/itemlibrary/qml/ItemView.qml | 17 ++-
.../components/itemlibrary/qml/ItemsView.qml | 62 ++-------
.../itemlibrary/qml/ItemsViewStyle.qml | 20 +--
.../components/itemlibrary/qml/Scrollbar.qml | 38 ++----
.../itemlibrary/qml/SectionView.qml | 52 ++++----
.../components/itemlibrary/qml/Selector.qml | 125 ++++--------------
6 files changed, 92 insertions(+), 222 deletions(-)
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemView.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemView.qml
index 369de2ae630..62c68c87f7d 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemView.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemView.qml
@@ -32,14 +32,15 @@ import Qt 4.6
Item {
id: itemView
- property var style
-
- width: GridView.view.cellWidth
- height: style.cellHeight
-
+ // public
+
signal itemPressed()
signal itemDragged()
+ // internal
+
+ ItemsViewStyle { id: style }
+
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
@@ -87,7 +88,7 @@ Item {
id: itemIcon
anchors.top: parent.top
- anchors.topMargin: style.cellMargin
+ anchors.topMargin: style.cellVerticalMargin
anchors.horizontalCenter: parent.horizontalCenter
width: itemLibraryIconWidth
@@ -99,7 +100,7 @@ Item {
id: text
anchors.top: itemIcon.bottom
- anchors.topMargin: itemView.style.cellSpacing
+ anchors.topMargin: style.cellVerticalSpacing
anchors.horizontalCenter: parent.horizontalCenter
width: style.textWidth
height: style.textHeight
@@ -107,9 +108,7 @@ Item {
verticalAlignment: "AlignVCenter"
horizontalAlignment: "AlignHCenter"
text: itemName
- // workaround: text color not updated when 'style' var finally assigned
color: style.itemNameTextColor
- Component.onCompleted: text.color = style.itemNameTextColor
}
MouseRegion {
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
index 87c6080f962..22f1f32f0a0 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsView.qml
@@ -29,62 +29,36 @@
import Qt 4.6
-/*
- ListModel {
- id: libraryModel
- ListElement {
- sectionTitle: "Section 1"
- sectionEntries: [
- ListElement { itemLibId: 0; itemName: "Comp"; itemIconPath: "../images/default-icon.png" },
- ...
- ]
- }
- ...
- }
-*/
-
-/* workaround: ListView reports bogus viewportHeight
-
-ListView {
- id: itemsView
-
- property string name: "itemsFlickable"
- anchors.fill: parent
-
- interactive: false
-
- model: itemsView.model
- delegate: sectionDelegate
-}
-*/
-
-
Rectangle {
id: itemsView
- signal itemSelected(int itemLibId)
- signal itemDragged(int itemLibId)
-
+ // public
+
function expandAll() {
expandAllEntries();
scrollbar.moveHandle(0, true)
}
- signal expandAllEntries()
+ signal itemSelected(int itemLibId)
+ signal itemDragged(int itemLibId)
+
+ signal stopDragAndDrop
+
+ // internal
+
+ signal expandAllEntries
+
+ ItemsViewStyle { id: style }
property int entriesPerRow: Math.max(1, Math.floor((itemsFlickable.width - 2) / style.cellWidth))
property int cellWidth: Math.floor((itemsFlickable.width - 2) / entriesPerRow)
property int cellHeight: style.cellHeight
- property var style
- style: ItemsViewStyle {}
-
color: style.backgroundColor
/* workaround: without this, a completed drag and drop operation would
result in the drag being continued when QmlView re-gains
focus */
- signal stopDragAndDrop
MouseRegion {
anchors.fill: parent
hoverEnabled: true
@@ -96,7 +70,6 @@ Rectangle {
SectionView {
id: section
- style: itemsView.style
entriesPerRow: itemsView.entriesPerRow
cellWidth: itemsView.cellWidth
@@ -108,10 +81,6 @@ Rectangle {
onItemSelected: itemsView.itemSelected(itemLibId)
onItemDragged: itemsView.itemDragged(itemLibId)
- function focusSelection() {
- itemSelection.focusSelection()
- }
-
Connection {
sender: itemsView
signal: "expandAllEntries()"
@@ -145,11 +114,9 @@ Rectangle {
Selector {
id: selector
+
z: -1
- style: itemsView.style
- scrollFlickable: itemsFlickable
-
- onMoveScrollbarHandle: scrollbar.moveHandle(viewportPos, true)
+ flickable: itemsFlickable
width: itemsView.cellWidth
height: itemsView.cellHeight
@@ -168,7 +135,6 @@ Rectangle {
anchors.right: parent.right
flickable: itemsFlickable
- style: itemsView.style
}
}
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsViewStyle.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsViewStyle.qml
index 6782f9dd514..9758bd67105 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsViewStyle.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/ItemsViewStyle.qml
@@ -40,27 +40,31 @@ Item {
property string itemNameTextColor: "#FFFFFF"
- property string sectionTitleTextColor: "#f0f0f0"
- property string sectionTitleBackgroundColor: "#909090"
-
property string gridLineLighter: "#808080"
property string gridLineDarker: "#606060"
+ property string sectionArrowColor: "#aeaeae"
+ property string sectionTitleTextColor: "#f0f0f0"
+ property string sectionTitleBackgroundColor: "#909090"
+
property int sectionTitleHeight: 20
property int sectionTitleSpacing: 2
+ // the selector's offset from the start of the section
property int selectionSectionOffset: sectionTitleHeight + sectionTitleSpacing
property int iconWidth: 32
property int iconHeight: 32
- property int textWidth: 80
+ property int textWidth: 90
property int textHeight: 15
- property int cellSpacing: 7
- property int cellMargin: 10
+ property int cellVerticalSpacing: 7
+ property int cellVerticalMargin: 10
- property int cellWidth: textWidth + 2*cellMargin
- property int cellHeight: itemLibraryIconHeight + textHeight + 2*cellMargin + cellSpacing
+ // the following depend on the actual shape of the item delegate
+ property int cellWidth: textWidth
+ property int cellHeight: itemLibraryIconHeight + textHeight +
+ 2 * cellVerticalMargin + cellVerticalSpacing
}
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
index 333f1a3871e..41906b1bd12 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/Scrollbar.qml
@@ -32,9 +32,14 @@ import Qt 4.6
Item {
id: bar
+ // public
+
property var flickable
- property var style
+ // internal
+
+ ItemsViewStyle { id: style }
+
property int scrollHeight: height - handle.height
Rectangle {
@@ -62,17 +67,6 @@ Item {
function updateHandle() {
moveHandle(flickable.viewportY, false);
}
-
-/*
- NumberAnimation {
- id: handleResetAnimation
- target: handle
- property: "y"
- from: handle.y
- to: 0
- duration: 500
- }
-*/
onFlickableChanged: moveHandle(0, true)
@@ -101,11 +95,7 @@ Item {
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: handle.top
- onClicked: {
-// handleMoveAnimation.to = Math.max(0, handle.y - 40)
-// handleMoveAnimation.start();
- handle.y = Math.max(0, handle.y - style.scrollbarClickScrollAmount)
- }
+ onClicked: handle.y = Math.max(0, handle.y - style.scrollbarClickScrollAmount)
}
Item {
@@ -152,18 +142,6 @@ Item {
anchors.right: parent.right
anchors.top: handle.bottom
anchors.bottom: parent.bottom
- onClicked: {
-// handleMoveAnimation.to = Math.min(scrollHeight, handle.y + 40)
-// handleMoveAnimation.start();
- handle.y = Math.min(scrollHeight, handle.y + style.scrollbarClickScrollAmount)
- }
- }
-/*
- NumberAnimation {
- id: handleMoveAnimation
- target: handle
- property: "y"
- duration: 200
+ onClicked: handle.y = Math.min(scrollHeight, handle.y + style.scrollbarClickScrollAmount)
}
-*/
}
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/SectionView.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/SectionView.qml
index e35d7155583..05bb2c9a84b 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/SectionView.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/SectionView.qml
@@ -32,26 +32,33 @@ import Qt 4.6
Column {
id: sectionView
- property var style
+ // public
+
property var itemHighlight
property int entriesPerRow
property int cellWidth
property int cellHeight
- signal itemSelected(int itemLibId)
- signal itemDragged(int itemLibId)
-
function expand() {
gridFrame.state = "";
}
+ signal itemSelected(int itemLibId)
+ signal itemDragged(int itemLibId)
+
+ // internal
+
+ ItemsViewStyle { id: style }
+
Component {
id: itemDelegate
ItemView {
id: item
- style: sectionView.style
+
+ width: cellWidth
+ height: cellHeight
function selectItem() {
itemHighlight.select(sectionView, item, gridFrame.x, -gridView.viewportY);
@@ -76,11 +83,11 @@ Column {
Item {
id: arrow
- Rectangle { y: 0; x: 0; height: 1; width: 9; color: "#aeaeae" }
- Rectangle { y: 1; x: 1; height: 1; width: 7; color: "#aeaeae" }
- Rectangle { y: 2; x: 2; height: 1; width: 5; color: "#aeaeae" }
- Rectangle { y: 3; x: 3; height: 1; width: 3; color: "#aeaeae" }
- Rectangle { y: 4; x: 4; height: 1; width: 1; color: "#aeaeae" }
+ Rectangle { y: 0; x: 0; height: 1; width: 9; color: style.sectionArrowColor }
+ Rectangle { y: 1; x: 1; height: 1; width: 7; color: style.sectionArrowColor }
+ Rectangle { y: 2; x: 2; height: 1; width: 5; color: style.sectionArrowColor }
+ Rectangle { y: 3; x: 3; height: 1; width: 3; color: style.sectionArrowColor }
+ Rectangle { y: 4; x: 4; height: 1; width: 1; color: style.sectionArrowColor }
anchors.left: parent.left
anchors.leftMargin: 5
@@ -99,7 +106,6 @@ Column {
text: sectionName
color: style.sectionTitleTextColor
- Component.onCompleted: text.color = style.sectionTitleTextColor
}
MouseRegion {
anchors.fill: parent
@@ -109,7 +115,7 @@ Column {
itemHighlight.unselect();
sectionView.itemSelected(-1);
}
- gridFrame.toggleVisibility()
+ gridFrame.toggleExpanded()
}
}
}
@@ -119,18 +125,19 @@ Column {
Item {
id: gridFrame
- function toggleVisibility() {
- state = ((state == "hidden")? "":"hidden")
+ function toggleExpanded() {
+ state = ((state == "")? "shrunk":"")
}
clip: true
- width: sectionView.entriesPerRow * sectionView.cellWidth + 1
- height: Math.ceil(sectionEntries.count / sectionView.entriesPerRow) * sectionView.cellHeight + 1
+ width: entriesPerRow * cellWidth + 1
+ height: Math.ceil(sectionEntries.count / entriesPerRow) * cellHeight + 1
anchors.horizontalCenter: parent.horizontalCenter
GridView {
id: gridView
+ // workaround
Connection {
sender: itemLibraryModel
signal: "visibilityUpdated()"
@@ -151,7 +158,7 @@ Column {
states: [
State {
- name: "hidden"
+ name: "shrunk"
PropertyChanges {
target: gridFrame
height: 0
@@ -163,18 +170,7 @@ Column {
}
}
]
-/*
- transitions: [
- Transition {
- NumberAnimation {
- matchProperties: "x,y,width,height,opacity,rotation"
- duration: 200
- }
- }
- ]
-*/
}
Item { height: 4; width: 1 }
}
-
diff --git a/src/plugins/qmldesigner/components/itemlibrary/qml/Selector.qml b/src/plugins/qmldesigner/components/itemlibrary/qml/Selector.qml
index 012d8ca4c8a..a98121f9720 100644
--- a/src/plugins/qmldesigner/components/itemlibrary/qml/Selector.qml
+++ b/src/plugins/qmldesigner/components/itemlibrary/qml/Selector.qml
@@ -32,11 +32,14 @@ import Qt 4.6
Item {
id: selector
- property var style
- property var scrollFlickable
+ // public
+
+ property var flickable
- signal moveScrollbarHandle(int viewportPos)
+ // internal
+ ItemsViewStyle { id: style }
+
visible: false
property var section: null
@@ -44,123 +47,49 @@ Item {
property int sectionXOffset: 0
property int sectionYOffset: 0
- property real staticX: (section && item)? (section.x + item.x + sectionXOffset):0;
- property real staticY: (section && item)? (section.y + style.selectionSectionOffset + item.y + sectionYOffset):0;
-
- property bool animateMove: true
+ x: (section && item)? (section.x + item.x + sectionXOffset):0;
+ y: (section && item)? (section.y + style.selectionSectionOffset + item.y + sectionYOffset):0;
Connection {
sender: itemLibraryModel
signal: "visibilityUpdated()"
- script: selector.unselectNow()
+ script: unselect()
}
function select(section, item, sectionXOffset, sectionYOffset) {
- if (!selector.visible) {
- selector.animateMove = false
- }
-
selector.item = item
selector.section = section
selector.sectionXOffset = sectionXOffset
selector.sectionYOffset = sectionYOffset
- if (!selector.visible) {
-// print("no prev selection");
-
-// selector.opacity = 0
- selector.visible = true
-// selectAnimation.start();
- }
-
+ visible = true
focusSelection();
}
- function focusSelection() {
- var pos = -1;
-
- if (selector.staticY < scrollFlickable.viewportY)
- pos = selector.staticY
- else if ((selector.staticY + selector.height) >
- (scrollFlickable.viewportY + scrollFlickable.height - 1))
- pos = selector.staticY + selector.height - scrollFlickable.height + 1
-
- if (pos >= 0) {
-/*
- followSelectionAnimation.to = pos
- followSelectionAnimation.start()
-*/
- scrollFlickable.viewportY = pos;
- selector.moveScrollbarHandle(pos)
- }
- }
-
function unselect() {
-// unselectAnimation.start();
- unselectNow();
- }
-
- function unselectNow() {
- selector.section = null
- selector.item = null
- selector.sectionXOffset = 0
- selector.sectionYOffset = 0
- selector.visible = false
- selector.opacity = 1
- }
-/*
- NumberAnimation {
- id: selectAnimation
- target: selector
- property: "opacity"
- from: 0
- to: 1
- duration: 200
- onRunningChanged: {
- if (!running)
- selector.animateMove = true
- }
+ section = null
+ item = null
+ sectionXOffset = 0
+ sectionYOffset = 0
+ visible = false
}
- NumberAnimation {
- id: unselectAnimation
- target: selector
- property: "opacity"
- from: 1
- to: 0
- duration: 150
- onRunningChanged: {
- if (!running)
- selector.unselectNow();
- }
- }
+ function focusSelection() {
+ var pos = -1;
- NumberAnimation {
- id: followSelectionAnimation
- target: scrollFlickable
- property: "viewportY"
- duration: 200
- }
+ if (y < flickable.viewportY)
+ pos = Math.max(0, y)
- x: SpringFollow {
- source: selector.staticX;
- spring: selector.animateMove? 3.0:0.0;
- damping: 0.35
- epsilon: 0.25
- }
+ else if ((y + height) >
+ (flickable.viewportY + flickable.height - 1))
+ pos = Math.min(Math.max(0, flickable.viewportHeight - flickable.height),
+ y + height - flickable.height + 1)
- y: SpringFollow {
- source: selector.staticY;
- spring: selector.animateMove? 3.0:0.0;
- damping: 0.35
- epsilon: 0.25
+ if (pos >= 0)
+ flickable.viewportY = pos;
}
-*/
-
- x: selector.staticX
- y: selector.staticY
-
+
SystemPalette { id:systemPalette }
Rectangle {
@@ -233,6 +162,4 @@ Item {
GradientStop { position: 1.0; color: Qt.darker(systemPalette.highlight) }
}
}
-
}
-
--
GitLab