diff options
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 369de2ae63..62c68c87f7 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 87c6080f96..22f1f32f0a 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 6782f9dd51..9758bd6710 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 333f1a3871..41906b1bd1 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 e35d715558..05bb2c9a84 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 012d8ca4c8..a98121f972 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) } } } - } - |