Commit 5df23899 authored by Tim Jenssen's avatar Tim Jenssen
Browse files

QmlDesigner: rewrite itemlibrary



Change-Id: I31344f7cfa56ae5dd6662bef4e449007b7ec3ec4
Reviewed-by: default avatarMarco Bubke <marco.bubke@digia.com>
parent 2e06f98a
......@@ -28,69 +28,21 @@
****************************************************************************/
import QtQuick 2.1
// view displaying an item library grid item
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
Item {
id: itemView
Rectangle {
color: styleConstants.lighterBackgroundColor
// public
border.color: styleConstants.backgroundColor
border.width: 1
signal itemPressed()
signal itemDragged()
// internal
ItemsViewStyle { id: style }
// frame
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: style.gridLineLighter
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
height: 1
color: style.gridLineDarker
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 1
color: style.gridLineLighter
}
Rectangle {
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 1
color: style.gridLineDarker
}
Rectangle {
anchors.top:parent.top
anchors.right:parent.right
width:1
height:1
color: style.backgroundColor
}
Rectangle {
anchors.bottom:parent.bottom
anchors.left:parent.left
width:1
height:1
color: style.backgroundColor
}
Image {
id: itemIcon
id: itemIcon // to be set by model
anchors.top: parent.top
anchors.topMargin: style.cellVerticalMargin
anchors.topMargin: styleConstants.cellVerticalMargin
anchors.horizontalCenter: parent.horizontalCenter
width: itemLibraryIconWidth // to be set in Qml context
......@@ -101,19 +53,18 @@ Item {
Text {
id: text
elide: Text.ElideMiddle
wrapMode: Text.WordWrap
anchors.top: itemIcon.bottom
anchors.topMargin: style.cellVerticalSpacing
anchors.topMargin: styleConstants.cellVerticalSpacing
anchors.left: parent.left
anchors.leftMargin: style.cellHorizontalMargin
anchors.leftMargin: styleConstants.cellHorizontalMargin
anchors.right: parent.right
anchors.rightMargin: style.cellHorizontalMargin
width: style.textWidth
height: style.textHeight
anchors.rightMargin: styleConstants.cellHorizontalMargin
verticalAlignment: "AlignVCenter"
horizontalAlignment: "AlignHCenter"
text: itemName // to be set by model
color: style.itemNameTextColor
color: "#FFFFFF"
renderType: Text.NativeRendering
}
......@@ -126,20 +77,7 @@ Item {
property int pressedY
onPressed: {
reallyPressed = true
pressedX = mouse.x
pressedY = mouse.y
itemPressed()
rootView.startDragAndDropDelayed(itemLibraryEntry)
}
onPositionChanged: {
if (reallyPressed &&
(Math.abs(mouse.x - pressedX) +
Math.abs(mouse.y - pressedY)) > 3) {
itemDragged()
reallyPressed = false
}
}
onReleased: reallyPressed = false
}
}
......@@ -29,7 +29,12 @@
import QtQuick 2.1
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.0
import QtQuick.Controls.Styles 1.0
import "../common"
import QtQuick.Layouts 1.0
import "../propertyEditorQmlSources/HelperWidgets"
/* The view displaying the item grid.
......@@ -57,188 +62,70 @@ pixmap itemPixmap
}
*/
Rectangle {
id: itemsView
signal itemSelected(int itemLibId)
signal itemDragged(int itemLibId)
signal stopDragAndDrop
signal expandAllEntries
ItemsViewStyle { id: style }
color: style.backgroundColor
/* workaround: without this, a completed drag and drop operation would
result in the drag being continued when QmlView re-gains
focus */
MouseArea {
anchors.fill: parent
hoverEnabled: true
onEntered: {
if (!pressed)
stopDragAndDrop()
}
}
ScrollView {
id: itemsView
signal selectionUpdated(int itemSectionIndex)
Item {
id: styleConstants
property color backgroundColor: "#4f4f4f"
property color lighterBackgroundColor: "#5f5f5f"
property int selectedItemLibId: -1
property int selectionSectionLibId: -1
property int textWidth: 95
property int textHeight: 15
function setSelection(itemLibId) {
selectedItemLibId = itemLibId
selectionSectionLibId = itemLibraryModel.getSectionLibId(itemLibId)
selectionUpdated(itemLibraryModel.getItemSectionIndex(itemLibId))
}
property int cellHorizontalMargin: 0
property int cellVerticalSpacing: 3
property int cellVerticalMargin: 3
function unsetSelection() {
selectedItemLibId = -1
selectionSectionLibId = -1
selectionUpdated(-1)
// the following depend on the actual shape of the item delegate
property int cellWidth: textWidth + 2 * cellHorizontalMargin
property int cellHeight: itemLibraryIconHeight + textHeight +
2 * cellVerticalMargin + cellVerticalSpacing
}
Connections {
target: itemLibraryModel
onVisibilityChanged: {
if (itemLibraryModel.isItemVisible(selectedItemLibId))
setSelection(selectedItemLibId)
else
unsetSelection()
}
Rectangle {
id: background
anchors.fill: parent
color: styleConstants.backgroundColor
}
/* the following 3 properties are calculated here for performance
reasons and then passed to the section views */
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
Component {
id: sectionDelegate
SectionView {
id: section
entriesPerRow: itemsView.entriesPerRow
cellWidth: itemsView.cellWidth
cellHeight: itemsView.cellHeight
width: itemsFlickable.width
itemHighlight: selector
property bool containsSelection: (selectionSectionLibId == sectionLibId)
onItemSelected: {
itemsView.setSelection(itemLibId)
itemsView.itemSelected(itemLibId)
}
onItemDragged: {
section.itemSelected(itemLibId)
itemsView.itemDragged(itemLibId)
}
Connections {
target: itemsView
onExpandAllEntries: section.expand()
onSelectionUpdated: {
if (containsSelection) {
section.setSelection(itemSectionIndex)
section.focusSelection(itemsFlickable)
} else
section.unsetSelection()
}
}
Component {
id: selector
style: DesignerScrollViewStyle {
Selector {
x: containsSelection? section.currentItem.x:0
y: containsSelection? section.currentItem.y:0
width: itemsView.cellWidth
height: itemsView.cellHeight
visible: containsSelection
}
}
}
}
ScrollView {
anchors.top: parent.top
anchors.topMargin: 3
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
style: ScrollViewStyle {
scrollBarBackground: Rectangle {
width: 10
color: style.scrollbarColor
border.width: 1
border.color: style.scrollbarBorderColor
}
handle: Item {
implicitWidth: 10
implicitHeight: 8
Rectangle {
border.color: style.scrollbarBorderColor
border.width: 1
anchors.fill: parent
color: style.sectionTitleBackgroundColor
Flickable {
contentHeight: column.height
Column {
id: column
Repeater {
model: itemLibraryModel // to be set in Qml context
delegate: Section {
width: itemsView.viewport.width
caption: sectionName // to be set by model
Grid {
id: itemGrid
columns: parent.width / styleConstants.cellWidth
property int flexibleWidth: (parent.width - styleConstants.cellWidth * columns) / columns
Repeater {
model: sectionEntries
delegate: ItemDelegate {
width: styleConstants.cellWidth + itemGrid.flexibleWidth
height: styleConstants.cellHeight
}
}
move: Transition {
NumberAnimation {
properties: "x, y";
easing.type: Easing.OutQuart
duration: 80
}
}
}
}
}
decrementControl: Item {}
incrementControl: Item {}
}
Flickable {
id: itemsFlickable
boundsBehavior: Flickable.DragOverBounds
//interactive: false
contentHeight: col.height
/* Limit the content position. Without this, resizing would get the
content position out of scope regarding the scrollbar. */
function limitContentPos() {
if (contentY < 0) {
contentY = 0;
} else {
var maxContentY = Math.max(0, contentHeight - height)
if (contentY > maxContentY)
contentY = maxContentY;
}
}
onHeightChanged: limitContentPos()
onContentHeightChanged: limitContentPos()
Column {
id: col
Repeater {
model: itemLibraryModel // to be set in Qml context
delegate: sectionDelegate
}
}
}
}
Item {
id: scrollbarFrame
anchors.top: parent.top
anchors.topMargin: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 1
anchors.right: parent.right
anchors.rightMargin: 2
width: (itemsFlickable.contentHeight > itemsFlickable.height)? 11:0
}
}
/****************************************************************************
**
** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Digia gives you certain additional
** rights. These rights are described in the Digia Qt LGPL Exception
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
**
****************************************************************************/
import QtQuick 2.1
// the style used the items view
Item {
property string backgroundColor: "#4f4f4f"
property string raisedBackgroundColor: "#e0e0e0"
property string scrollbarColor: "#444444"
property string scrollbarBorderColor: "#333333"
property string scrollbarGradientStartColor: "#393939"
property string scrollbarGradientMiddleColor: "#656565"
property string scrollbarGradientEndColor: "#888888"
property int scrollbarClickScrollAmount: 40
property int scrollbarWheelDeltaFactor: 4
property string itemNameTextColor: "#FFFFFF"
property string gridLineLighter: "#5f5f5f"
property string gridLineDarker: "#3f3f3f"
property string sectionArrowColor: "#ffffff"
property string sectionTitleTextColor: "#ffffff"
property string sectionTitleBackgroundColor: "#656565"
property int sectionTitleHeight: 18
property int sectionTitleSpacing: 2
property int iconWidth: 32
property int iconHeight: 32
property int textWidth: 95
property int textHeight: 15
property int cellHorizontalMargin: 4
property int cellVerticalSpacing: 7
property int cellVerticalMargin: 10
// the following depend on the actual shape of the item delegate
property int cellWidth: textWidth + 2 * cellHorizontalMargin
property int cellHeight: itemLibraryIconHeight + textHeight +
2 * cellVerticalMargin + cellVerticalSpacing
}
/****************************************************************************
**
** Copyright (C) 2014 Digia Plc and/or its subsidiary(-ies).
** Contact: http://www.qt-project.org/legal
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia. For licensing terms and
** conditions see http://qt.digia.com/licensing. For further information
** use the contact form at http://qt.digia.com/contact-us.
**
** GNU Lesser General Public License Usage
** Alternatively, this file may be used under the terms of the GNU Lesser
** General Public License version 2.1 as published by the Free Software
** Foundation and appearing in the file LICENSE.LGPL included in the
** packaging of this file. Please review the following information to
** ensure the GNU Lesser General Public License version 2.1 requirements
** will be met: http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
**
** In addition, as a special exception, Digia gives you certain additional
** rights. These rights are described in the Digia Qt LGPL Exception
** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0 as Controls
// view displaying one item library section including its grid
Column {
id: sectionView
// public
property variant itemHighlight
property int entriesPerRow
property int cellWidth
property int cellHeight
property variant currentItem: gridView.currentItem
function expand() {
gridFrame.state = ""
}
Component.onCompleted: {
if (mouseArea.expandedFlag) {
gridFrame.state = ""
} else {
gridFrame.state = "shrunk"
}
}
signal itemSelected(int itemLibId)
signal itemDragged(int itemLibId)
function setSelection(itemSectionIndex)
{
gridView.currentIndex = itemSectionIndex
}
function unsetSelection()
{
gridView.currentIndex = -1
}
function focusSelection(flickable) {
var pos = -1;
if (!gridView.currentItem)
return;
var currentItemX = sectionView.x + gridFrame.x + gridView.x + gridView.currentItem.x;
var currentItemY = sectionView.y + gridFrame.y + gridView.y + gridView.currentItem.y
- gridView.contentY; // workaround: GridView reports wrong contentY
if (currentItemY < flickable.contentY)
pos = Math.max(0, currentItemY)
else if ((currentItemY + gridView.currentItem.height) >
(flickable.contentY + flickable.height - 1))
pos = Math.min(Math.max(0, flickable.contentHeight - flickable.height),
currentItemY + gridView.currentItem.height - flickable.height + 1)
if (pos >= 0)
flickable.contentY = pos
}
// internal
ItemsViewStyle { id: style }
Component {
id: itemDelegate
SingleItemView {
id: item
width: cellWidth
height: cellHeight
onItemPressed: sectionView.itemSelected(itemLibId)
onItemDragged: sectionView.itemDragged(itemLibId)
}
}
// clickable header bar
Rectangle {
width: parent.width
height: style.sectionTitleHeight
gradient: Gradient {
GradientStop {color: '#555' ; position: 0}
GradientStop {color: '#444' ; position: 1}
}
Rectangle {
color:"#333"
width: parent.width
height: 1
}
Rectangle {
color: "#333"
anchors.bottom: parent.bottom
width: parent.width
height: 1
}
Item {
id: arrow
Rectangle { y: 1; x: 1; height: 1; width: 9; color: style.sectionArrowColor }