278 lines
11 KiB
QML
278 lines
11 KiB
QML
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
*
|
|
* Copyright 2013 - 2020, nymea GmbH
|
|
* Contact: contact@nymea.io
|
|
*
|
|
* This file is part of nymea.
|
|
* This project including source code and documentation is protected by
|
|
* copyright law, and remains the property of nymea GmbH. All rights, including
|
|
* reproduction, publication, editing and translation, are reserved. The use of
|
|
* this project is subject to the terms of a license agreement to be concluded
|
|
* with nymea GmbH in accordance with the terms of use of nymea GmbH, available
|
|
* under https://nymea.io/license
|
|
*
|
|
* GNU General Public License Usage
|
|
* Alternatively, this project may be redistributed and/or modified under the
|
|
* terms of the GNU General Public License as published by the Free Software
|
|
* Foundation, GNU version 3. This project is distributed in the hope that it
|
|
* will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty
|
|
* of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General
|
|
* Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU General Public License along with
|
|
* this project. If not, see <https://www.gnu.org/licenses/>.
|
|
*
|
|
* For any further details and any questions please contact us under
|
|
* contact@nymea.io or see our FAQ/Licensing Information on
|
|
* https://nymea.io/license/faq
|
|
*
|
|
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
|
|
|
|
import QtQuick 2.9
|
|
import QtQuick.Controls 2.2
|
|
import QtQuick.Layouts 1.3
|
|
import QtQuick.Controls.Material 2.2
|
|
import Nymea 1.0
|
|
import "../components"
|
|
import "../delegates"
|
|
|
|
MainViewBase {
|
|
id: root
|
|
contentY: gridView.contentY - gridView.originY + topMargin
|
|
|
|
property bool editMode: false
|
|
|
|
TagsProxyModel {
|
|
id: tagsProxy
|
|
tags: engine.tagsManager.tags
|
|
filterTagId: "favorites"
|
|
}
|
|
|
|
GridView {
|
|
id: gridView
|
|
anchors.fill: parent
|
|
anchors.margins: app.margins / 2
|
|
topMargin: root.topMargin
|
|
readonly property int minTileWidth: 172
|
|
readonly property int tilesPerRow: root.width / minTileWidth
|
|
|
|
cellWidth: gridView.width / tilesPerRow
|
|
cellHeight: cellWidth
|
|
|
|
moveDisplaced: Transition { NumberAnimation { properties: "x,y"; duration: 150; easing.type: Easing.InOutQuad } }
|
|
|
|
model: tagsProxy
|
|
delegate: Item {
|
|
id: delegateRoot
|
|
width: gridView.cellWidth
|
|
height: gridView.cellHeight
|
|
|
|
property Thing thing: engine.thingManager.things.getThing(thingId)
|
|
|
|
property alias tile: thingTile
|
|
|
|
ThingTile {
|
|
id: thingTile
|
|
anchors.fill: parent
|
|
thing: delegateRoot.thing
|
|
enabled: !root.editMode
|
|
onClicked: pageStack.push(Qt.resolvedUrl("../devicepages/" + NymeaUtils.interfaceListToDevicePage(thing.thingClass.interfaces)), {thing: thing})
|
|
onPressAndHold: root.editMode = true
|
|
opacity: dragArea.fakeDragItem !== null && delegateRoot.thing === dragArea.fakeDragItem.thing ? .3 : 1
|
|
}
|
|
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
anchors.margins: Style.smallMargins
|
|
color: "transparent"
|
|
border.color: Style.accentColor
|
|
border.width: 4
|
|
radius: Style.cornerRadius
|
|
visible: dragArea.fakeDragItem !== null && delegateRoot.thing === dragArea.fakeDragItem.thing
|
|
}
|
|
|
|
Rectangle {
|
|
z: 2
|
|
anchors.fill: parent
|
|
anchors.margins: Style.smallMargins
|
|
visible: opacity > 0
|
|
radius: Style.cornerRadius
|
|
color: Qt.rgba(Style.backgroundColor.r, Style.backgroundColor.g, Style.backgroundColor.b, .5)
|
|
opacity: root.editMode ? 1 : 0
|
|
Behavior on opacity { NumberAnimation { duration: 200 } }
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
onClicked: root.editMode = false
|
|
}
|
|
|
|
Rectangle {
|
|
anchors {
|
|
left: parent.left; top: parent.top;
|
|
margins: Style.smallMargins
|
|
}
|
|
height: Style.largeIconSize
|
|
width: Style.largeIconSize
|
|
color: Style.red
|
|
radius: Style.cornerRadius
|
|
opacity: dragArea.fakeDragItem == null
|
|
Rectangle {
|
|
anchors.fill: parent
|
|
radius: Style.cornerRadius
|
|
color: Style.foregroundColor
|
|
opacity: deleteMouseArea.pressed || deleteMouseArea.containsMouse ? .08 : 0
|
|
Behavior on opacity {
|
|
NumberAnimation { duration: 200 }
|
|
}
|
|
}
|
|
ColorIcon {
|
|
name: "/ui/images/delete.svg"
|
|
size: Style.iconSize
|
|
anchors.centerIn: parent
|
|
color: Style.white
|
|
}
|
|
MouseArea {
|
|
id: deleteMouseArea
|
|
anchors.fill: parent
|
|
hoverEnabled: true
|
|
onClicked: {
|
|
print("delete clicked")
|
|
engine.tagsManager.untagThing(model.thingId, "favorites")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
MouseArea {
|
|
id: dragArea
|
|
anchors.fill: parent
|
|
enabled: root.editMode
|
|
propagateComposedEvents: true
|
|
property var dragOffset: ({})
|
|
property var draggedItem: null
|
|
property var fakeDragItem: null
|
|
|
|
onPressAndHold: {
|
|
var gridViewCoords = mapToItem(gridView.contentItem, mouseX, mouseY)
|
|
var item = gridView.itemAt(gridViewCoords.x, gridViewCoords.y);
|
|
draggedItem = item;
|
|
dragOffset = mapToItem(item, mouseX, mouseY)
|
|
|
|
dragArea.fakeDragItem = dragItemComponent.createObject(dragArea, {
|
|
x: mouseX - dragOffset.x,
|
|
y: mouseY - dragOffset.y,
|
|
thing: draggedItem.thing
|
|
})
|
|
|
|
drag.target = fakeDragItem
|
|
}
|
|
onReleased: {
|
|
if (drag.target) {
|
|
drag.target = null
|
|
dragArea.fakeDragItem.destroy()
|
|
dragArea.fakeDragItem = null
|
|
dragArea.draggedItem = null
|
|
}
|
|
}
|
|
|
|
onClicked: {
|
|
var gridViewCoords = mapToItem(gridView.contentItem, mouseX, mouseY)
|
|
var itemUnderMouse = gridView.itemAt(gridViewCoords.x, gridViewCoords.y);
|
|
if (itemUnderMouse !== null) {
|
|
mouse.accepted = false
|
|
} else {
|
|
root.editMode = false
|
|
}
|
|
}
|
|
}
|
|
|
|
Component {
|
|
id: dragItemComponent
|
|
|
|
ThingTile {
|
|
id: fakeDragItem
|
|
width: gridView.cellWidth
|
|
height: gridView.cellHeight
|
|
Drag.active: dragArea.drag.active
|
|
}
|
|
}
|
|
|
|
|
|
DropArea {
|
|
id: dropArea
|
|
anchors.fill: gridView
|
|
|
|
property int from: -1
|
|
property int to: -1
|
|
|
|
property int pendingCommand: -1
|
|
Connections {
|
|
target: engine.tagsManager
|
|
onAddTagReply: {
|
|
if (commandId == dropArea.pendingCommand) {
|
|
dropArea.pendingCommand = -1
|
|
}
|
|
}
|
|
}
|
|
|
|
onEntered: {
|
|
var gridViewCoords = mapToItem(gridView.contentItem, drag.x, drag.y)
|
|
var index = gridView.indexAt(gridViewCoords.x + dragArea.dragOffset.x, gridViewCoords.y + dragArea.dragOffset.y);
|
|
from = index;
|
|
to = index;
|
|
}
|
|
|
|
onPositionChanged: {
|
|
if (dropArea.pendingCommand != -1) {
|
|
// busy
|
|
return
|
|
}
|
|
|
|
var gridViewCoords = mapToItem(gridView.contentItem, drag.x, drag.y)
|
|
var index = gridView.indexAt(gridViewCoords.x + dragArea.dragOffset.x, gridViewCoords.y + dragArea.dragOffset.y);
|
|
if (to !== index && from !== index && index >= 0 && index <= tagsProxy.count) {
|
|
to = index;
|
|
print("should move", from, "to", to)
|
|
for (var i = 0; i < tagsProxy.count; i++) {
|
|
if (i < Math.min(from, to) || i > Math.max(from, to)) {
|
|
// outside the range... don't touch
|
|
continue;
|
|
}
|
|
var newIdx;
|
|
if (i == from) {
|
|
newIdx = to;
|
|
} else {
|
|
if (from < to) {
|
|
// item is moved down the list
|
|
newIdx = i - 1;
|
|
} else {
|
|
newIdx = i + 1;
|
|
}
|
|
}
|
|
|
|
var tag = tagsProxy.get(i);
|
|
dropArea.pendingCommand = engine.tagsManager.tagThing(tag.thingId, tag.tagId, newIdx);
|
|
}
|
|
from = index;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
EmptyViewPlaceholder {
|
|
anchors { left: parent.left; right: parent.right; margins: Style.margins }
|
|
anchors.verticalCenter: parent.verticalCenter
|
|
visible: gridView.count === 0 && !engine.thingManager.fetchingData
|
|
title: qsTr("There are no favorite things yet.")
|
|
text: engine.thingManager.things.count === 0 ?
|
|
qsTr("It appears there are no things set up either yet. In order to use favorites you need to add some things first.") :
|
|
qsTr("Favorites allow you to keep track of your most important things when you have lots of them. Watch out for the star when interacting with things and use it to mark them as your favorites.")
|
|
imageSource: "../images/starred.svg"
|
|
buttonVisible: engine.thingManager.things.count === 0
|
|
buttonText: qsTr("Add things")
|
|
onButtonClicked: pageStack.push(Qt.resolvedUrl("../thingconfiguration/NewThingPage.qml"))
|
|
}
|
|
|
|
}
|