src/plugins/qmldesigner/components/itemlibrary/qml/SectionView.qml

   1 /**************************************************************************
   2 **
   3 ** This file is part of Qt Creator
   4 **
   5 ** Copyright (c) 2011 Nokia Corporation and/or its subsidiary(-ies).
   6 **
   7 ** Contact: Nokia Corporation (info@qt.nokia.com)
   8 **
   9 **
  10 ** GNU Lesser General Public License Usage
  11 **
  12 ** This file may be used under the terms of the GNU Lesser General Public
  13 ** License version 2.1 as published by the Free Software Foundation and
  14 ** appearing in the file LICENSE.LGPL included in the packaging of this file.
  15 ** Please review the following information to ensure the GNU Lesser General
  16 ** Public License version 2.1 requirements will be met:
  17 ** http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html.
  18 **
  19 ** In addition, as a special exception, Nokia gives you certain additional
  20 ** rights. These rights are described in the Nokia Qt LGPL Exception
  21 ** version 1.1, included in the file LGPL_EXCEPTION.txt in this package.
  22 **
  23 ** Other Usage
  24 **
  25 ** Alternatively, this file may be used in accordance with the terms and
  26 ** conditions contained in a signed written agreement between you and Nokia.
  27 **
  28 ** If you have questions regarding the use of this file, please contact
  29 ** Nokia at qt-info@nokia.com.
  30 **
  31 **************************************************************************/
  32
  33 import Qt 4.7
  34
  35 // view displaying one item library section including its grid
  36
  37 Column {
  38     id: sectionView
  39
  40     // public
  41
  42     property variant itemHighlight
  43
  44     property int entriesPerRow
  45     property int cellWidth
  46     property int cellHeight
  47
  48     property variant currentItem: gridView.currentItem
  49
  50     function expand() {
  51         gridFrame.state = ""
  52     }
  53
  54     signal itemSelected(int itemLibId)
  55     signal itemDragged(int itemLibId)
  56
  57     function setSelection(itemSectionIndex)
  58     {
  59         gridView.currentIndex = itemSectionIndex
  60     }
  61
  62     function unsetSelection()
  63     {
  64         gridView.currentIndex = -1
  65     }
  66
  67     function focusSelection(flickable) {
  68         var pos = -1;
  69
  70         if (!gridView.currentItem)
  71             return;
  72
  73         var currentItemX = sectionView.x + gridFrame.x + gridView.x + gridView.currentItem.x;
  74         var currentItemY = sectionView.y + gridFrame.y + gridView.y + gridView.currentItem.y
  75         - gridView.contentY;  // workaround: GridView reports wrong contentY
  76
  77         if (currentItemY < flickable.contentY)
  78             pos = Math.max(0, currentItemY)
  79
  80             else if ((currentItemY + gridView.currentItem.height) >
  81                      (flickable.contentY + flickable.height - 1))
  82                 pos = Math.min(Math.max(0, flickable.contentHeight - flickable.height),
  83         currentItemY + gridView.currentItem.height - flickable.height + 1)
  84
  85                 if (pos >= 0)
  86                     flickable.contentY = pos
  87     }
  88
  89     // internal
  90
  91     ItemsViewStyle { id: style }
  92
  93     Component {
  94         id: itemDelegate
  95
  96         ItemView {
  97             id: item
  98
  99             width: cellWidth
 100             height: cellHeight
 101
 102             onItemPressed: sectionView.itemSelected(itemLibId)
 103             onItemDragged: sectionView.itemDragged(itemLibId)
 104         }
 105     }
 106
 107     // clickable header bar
 108     Rectangle {
 109         width: parent.width
 110         height: style.sectionTitleHeight
 111
 112         color: style.sectionTitleBackgroundColor
 113
 114         Item {
 115             id: arrow
 116
 117             Rectangle { y: 0; x: 0; height: 1; width: 11; color: style.sectionArrowColor }
 118             Rectangle { y: 1; x: 1; height: 1; width: 9;  color: style.sectionArrowColor }
 119             Rectangle { y: 2; x: 2; height: 1; width: 7;  color: style.sectionArrowColor }
 120             Rectangle { y: 3; x: 3; height: 1; width: 5;  color: style.sectionArrowColor }
 121             Rectangle { y: 4; x: 4; height: 1; width: 3;  color: style.sectionArrowColor }
 122             Rectangle { y: 5; x: 5; height: 1; width: 1;  color: style.sectionArrowColor }
 123
 124             anchors.left: parent.left
 125             anchors.leftMargin: 10
 126             anchors.verticalCenter: parent.verticalCenter
 127             width: 11
 128             height: 6
 129
 130             transformOrigin: Item.Center
 131         }
 132         Text {
 133             id: text
 134
 135             anchors.verticalCenter: parent.verticalCenter
 136             anchors.left: arrow.right
 137             anchors.leftMargin: 12
 138
 139             text: sectionName  // to be set by model
 140             color: style.sectionTitleTextColor
 141             elide: Text.ElideMiddle
 142             font.bold: true
 143         }
 144         MouseArea {
 145             anchors.fill: parent
 146             onClicked: gridFrame.toggleExpanded()
 147         }
 148     }
 149
 150     Item { height: 2; width: 1 }
 151
 152     Item {
 153         id: gridFrame
 154
 155         function toggleExpanded() {
 156             state = ((state == "")? "shrunk":"")
 157         }
 158
 159         clip: true
 160         width: entriesPerRow * cellWidth + 1
 161         height: Math.ceil(sectionEntries.count / entriesPerRow) * cellHeight + 1
 162         anchors.horizontalCenter: parent.horizontalCenter
 163
 164         GridView {
 165             id: gridView
 166
 167             Connections {
 168                 target: itemLibraryModel  // to be set in Qml context
 169                 onSectionVisibilityChanged: {
 170                     /* workaround: reset model in order to get the grid view
 171 updated properly under all conditions */
 172                     if (changedSectionLibId == sectionLibId)
 173                         gridView.model = sectionEntries
 174                 }
 175             }
 176
 177             anchors.fill: parent
 178             anchors.rightMargin: 1
 179             anchors.bottomMargin: 1
 180
 181             cellWidth: sectionView.cellWidth
 182             cellHeight: sectionView.cellHeight
 183             model: sectionEntries  // to be set by model
 184             delegate: itemDelegate
 185             highlight: itemHighlight
 186             interactive: false
 187             highlightFollowsCurrentItem: false
 188         }
 189
 190         states: [
 191         State {
 192             name: "shrunk"
 193             PropertyChanges {
 194                 target: gridFrame
 195                 height: 0
 196                 opacity: 0
 197             }
 198             PropertyChanges {
 199                 target: arrow
 200                 rotation: -90
 201             }
 202         }
 203         ]
 204     }
 205
 206     Item { height: 4; width: 1 }
 207 }