@@ -19,6 +19,7 @@ import Ubuntu.Components 0.1
1919import "../Components"
2020import "../Components/ListItems" as ListItems
2121import "../Components/IconUtil.js" as IconUtil
22+import "Generic"
2223
2324ScopeView {
2425 id: scopeView
@@ -75,7 +76,32 @@ ScopeView {
7576 text: title
7677 imageWidth: units.gu(11)
7778 imageHeight: units.gu(16)
79+
7880 source: IconUtil.from_gicon(icon)
81+
82+ MouseArea {
83+ anchors {
84+ fill: parent
85+ }
86+ onClicked: {
87+ mouse.accepted = true
88+ effect.positionPx = mapToItem(categoryView, 0, 0).y
89+ scopeView.scope.activate(column_0, column_1,
90+ column_2, column_3,
91+ column_4, column_5,
92+ column_6, column_7,
93+ column_8)
94+ }
95+ onPressAndHold: {
96+ mouse.accepted = true
97+ effect.positionPx = mapToItem(categoryView, 0, 0).y
98+ scopeView.scope.preview(column_0, column_1,
99+ column_2, column_3,
100+ column_4, column_5,
101+ column_6, column_7,
102+ column_8)
103+ }
104+ }
79105 }
80106 }
81107 }
@@ -93,4 +119,83 @@ ScopeView {
93119 searchEntryEnabled: true
94120 }
95121 }
122+
123+ OpenEffect {
124+ id: effect
125+ anchors {
126+ fill: parent
127+ bottomMargin: -bottomOverflow
128+ }
129+ sourceItem: categoryView
130+
131+ enabled: gap > 0.0
132+
133+ topGapPx: (1 - gap) * positionPx
134+ topOpacity: (1 - gap * 1.2)
135+ bottomGapPx: positionPx + gap * (targetBottomGapPx - positionPx)
136+ bottomOverflow: units.gu(20)
137+ bottomOpacity: 1 - (gap * 0.8)
138+
139+ property int targetBottomGapPx: height - units.gu(8) - bottomOverflow
140+ property real gap: previewLoader.open ? 1.0 : 0.0
141+
142+ Behavior on gap {
143+ NumberAnimation {
144+ duration: 200
145+ easing.type: Easing.InOutQuad
146+ onRunningChanged: {
147+ if (!previewLoader.open && !running) {
148+ previewLoader.onScreen = false
149+ }
150+ }
151+ }
152+ }
153+ }
154+
155+ Connections {
156+ target: scopeView.scope
157+ onPreviewReady: {
158+ previewLoader.previewData = preview
159+ previewLoader.open = true
160+ }
161+ }
162+
163+ PreviewDelegateMapper {
164+ id: previewDelegateMapper
165+ }
166+
167+ Connections {
168+ ignoreUnknownSignals: true
169+ target: previewLoader.valid ? previewLoader.item : null
170+ onClose: {
171+ previewLoader.open = false
172+ }
173+ }
174+
175+ Loader {
176+ id: previewLoader
177+ property var previewData
178+ height: effect.bottomGapPx - effect.topGapPx
179+ anchors {
180+ top: parent.top
181+ topMargin: effect.topGapPx
182+ left: parent.left
183+ right: parent.right
184+ }
185+ source: onScreen ? previewDelegateMapper.map(previewLoader.previewData.rendererName) : ""
186+
187+ property bool open: false
188+ property bool onScreen: false
189+ property bool valid: item !== null
190+
191+ onOpenChanged: {
192+ if (open) {
193+ onScreen = true
194+ }
195+ }
196+
197+ onLoaded: {
198+ item.previewData = previewLoader.previewData
199+ }
200+ }
96201}