Add working images

assets/images/Window.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 186 121" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><path d="M185.562,119.752c0,0.596 -0.483,1.079 -1.079,1.079l-183.404,0c-0.596,0 -1.079,-0.483 -1.079,-1.079l0,-118.673c0,-0.596 0.483,-1.079 1.079,-1.079l183.404,0c0.596,0 1.079,0.483 1.079,1.079l0,118.673Z" style="fill:#fff;fill-rule:nonzero;"/></svg>

main.cpp

@@ -38,6 +38,5 @@ int main(int argc, char* argv[])
     int status = app.exec();
 
     //Shutdown
-
     return  status;
 }

qml.qrc

@@ -22,5 +22,6 @@
         <file>assets/icons/icon_workshop.svg</file>
         <file>qml/Components/ScreenPlayItem.qml</file>
         <file>qml/Components/Sidebar.qml</file>
+        <file>assets/images/Window.svg</file>
     </qresource>
 </RCC>

qml/Components/Installed.qml

@@ -5,36 +5,49 @@ import QtQml.Models 2.2
 
 Page {
     id:pageInstalled
-    pageName: "Installed"
+    pageName: ""
 
-    signal toggleSidebar(var screenName)
+    signal setSidebaractiveItem(var screenId)
 
 
     GridView {
         id: gridView
+        boundsBehavior: Flickable.DragOverBounds
+        cacheBuffer: 1000
+        maximumFlickVelocity: 7000
         anchors.fill: parent
         cellWidth: 320
         cellHeight: 200
         anchors.margins: 30
-
-
-
-
-
+        model: installedListModel
         delegate: ScreenPlayItem {
             id:delegate
             focus: true
             customTitle: title
+            screenId: screenFolderId
             Connections {
                 target: delegate
                 onItemClicked: {
-                    toggleSidebar(screenName)
+                    setSidebaractiveItem(screenId)
                 }
             }
         }
 
+        Component.onCompleted: {
+
+        }
+
+        add: Transition {
+                NumberAnimation { property: "opacity"; from: 0; to: 1.0; duration: 400; }
+                NumberAnimation { property: "scale"; from: 0; to: 1.0; duration: 400 }
+            }
+
+        displaced: Transition {
+            NumberAnimation { properties: "x,y"; duration: 400; easing.type: Easing.OutBounce }
+        }
+
+
 
-        model: installedListModel
     }
 
 

qml/Components/ScreenPlayItem.qml

@@ -1,4 +1,6 @@
 import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
 
 Item {
     id:screenPlayItem
@@ -6,34 +8,70 @@ Item {
     height: 180
 
     property string customTitle: "name here"
-    signal itemClicked(var screenName)
+    property string screenId: ""
+    signal itemClicked(var screenId)
+
+    OpacityMask {
+        anchors.fill: itemWrapper
+        source: itemWrapper
+        maskSource: mask
+        invert: true
+    }
+
+    Image {
+        id: mask
+        source: "qrc:/assets/images/Window.svg"
+        sourceSize: Qt.size(itemWrapper.width, itemWrapper.height)
+        smooth: true
+        visible: false
+    }
 
     Rectangle
     {
-        id: rectangle
+        id: itemWrapper
         color: "white"
         radius: 23
+
+
         anchors {
             fill: parent
             margins:5
         }
 
-        Text {
-            id: text1
-            text: customTitle
-            renderType: Text.QtRendering
-            wrapMode: Text.WrapAnywhere
-            anchors.fill: parent
-            font.pixelSize: 18
-            anchors.margins: 10
-
+        Rectangle {
+            id: rectangle1
+            height: 103
+            color: "#8b8b8b"
+            anchors.right: parent.right
+            anchors.rightMargin: 0
+            anchors.left: parent.left
+            anchors.leftMargin: 0
+            anchors.top: parent.top
+            anchors.topMargin: 0
 
+            Image {
+                id: image
+                asynchronous: true
+                fillMode: Image.PreserveAspectCrop
+                anchors.fill: parent
+                source: Qt.resolvedUrl("file:///" + installedListModel._screensPath + screenFolderId + "/" + screenPreview)
+            }
         }
 
+        Text {
+            id: text1
+            text: screenTitle
+            anchors.topMargin: 117
+            wrapMode: Text.WrapAnywhere
+            anchors.fill: parent
+            font.pixelSize: 12
+            anchors.margins: 10
+
+        }
         MouseArea {
             anchors.fill: parent
             onClicked: {
-                itemClicked(customTitle)
+                itemClicked(screenId)
             }
         }
     }

qml/Components/Sidebar.qml

@@ -9,6 +9,14 @@ Item {
     state: "inactive"
     focus: true
 
+    property string activeScreen: ""
+
+    onActiveScreenChanged:{
+        print(activeScreen)
+
+    }
+
+
     Item {
         id: sidebarWrapper
 
@@ -53,6 +61,19 @@ Item {
                 }
             }
 
+            Button {
+                id: button1
+                y: 710
+                text: qsTr("Set wallpaper")
+                anchors.left: parent.left
+                anchors.leftMargin: 148
+                anchors.bottom: parent.bottom
+                anchors.bottomMargin: 18
+                onClicked: {
+
+                }
+            }
+
         }
 
         Rectangle {

qml/main.qml

@@ -7,14 +7,11 @@ import QtQuick.Layouts 1.3
 import "Components"
 
 Window {
-    id: rectangle
+    id: window
     color: "#eeeeee"
     visible: true
     width: 1366
     height: 768
-    Component.onCompleted: installedListModel.loadDrives()
-
-
 
     Loader {
         id: pageLoader
@@ -25,14 +22,22 @@ Window {
             left: parent.left
         }
         source: "qrc:/qml/Components/Installed.qml"
+//        onSourceChanged: pageLoaderAnim.running = true
+
+//        SequentialAnimation {
+//            id:pageLoaderAnim
+//            running: true
+//            NumberAnimation { target: pageLoader.item; property: "opacity"; from:0; to: 1; duration: 500 }
+//            NumberAnimation { target: pageLoader.item; property: "y"; from: -100; to: 0; duration: 300 }
+//        }
 
         Connections{
             target: pageLoader.item
             ignoreUnknownSignals: true
-            onToggleSidebar: {
-                sidebar.state = sidebar.state === "active" ? "inactive" : "active"
+            onSetSidebaractiveItem: {
+                sidebar.activeScreen = screenId
+                sidebar.state =  "active"
             }
-
         }
     }
 

src/installedlistmodel.cpp

@@ -3,6 +3,19 @@
 InstalledListModel::InstalledListModel(QObject* parent)
     : QAbstractListModel(parent)
 {
+
+    QString writablePath = QStandardPaths::writableLocation(QStandardPaths::StandardLocation::DataLocation);
+
+    if (!QDir(writablePath).exists()) {
+        if (!QDir().mkdir(writablePath)) {
+            qWarning("ERROR: Cloud not create install dir");
+            return;
+        }
+    } else {
+        _screensPath = writablePath  + "/Installed/";
+    }
+
+    loadScreens();
 }
 
 int InstalledListModel::rowCount(const QModelIndex& parent) const
@@ -23,8 +36,10 @@ QVariant InstalledListModel::data(const QModelIndex& index, int role) const
         switch (role) {
         case TitleRole:
             return _screenPlayFiles.at(index.row())._title;
-        case ImageRole:
-            return _screenPlayFiles.at(index.row())._description;
+        case PreviewRole:
+            return _screenPlayFiles.at(index.row())._preview;
+        case FolderIdRole:
+            return _screenPlayFiles.at(index.row())._folderId;
         default:
             return QVariant();
         }
@@ -34,44 +49,35 @@ QVariant InstalledListModel::data(const QModelIndex& index, int role) const
 QHash<int, QByteArray> InstalledListModel::roleNames() const
 {
     static const QHash<int, QByteArray> roles{
-        { TitleRole, "title" },
-        { ImageRole, "image" },
+        { TitleRole, "screenTitle" },
+        { PreviewRole, "screenPreview" },
+        { FolderIdRole, "screenFolderId" },
     };
     return roles;
 }
 
-void InstalledListModel::append(const QJsonObject obj)
+void InstalledListModel::append(const QJsonObject obj, const QString folderName)
 {
     int row = 0;
 
     beginInsertRows(QModelIndex(), row, row);
 
-    ScreenPlayFile tmpFile(obj);
+    ScreenPlayFile tmpFile(obj, folderName);
     _screenPlayFiles.append(tmpFile);
 
     endInsertRows();
 }
 
-void InstalledListModel::loadDrives()
+void InstalledListModel::loadScreens()
 {
-    QString writablePath = QStandardPaths::writableLocation(QStandardPaths::StandardLocation::DataLocation);
-
-    if (!QDir(writablePath).exists()) {
-        if (!QDir().mkdir(writablePath)) {
-            qWarning("ERROR: Cloud not create install dir");
-            return;
-        }
-    }
-
-    QString tmp(writablePath + "/Installed/");
     QJsonDocument jsonProject;
     QJsonParseError parseError;
 
-    QFileInfoList list = QDir(tmp).entryInfoList(QDir::NoDotAndDotDot | QDir::AllDirs);
+    QFileInfoList list = QDir(_screensPath).entryInfoList(QDir::NoDotAndDotDot | QDir::AllDirs);
     QString tmpPath;
 
     for (auto&& item : list) {
-        tmpPath = tmp + item.baseName() + "/project.json";
+        tmpPath = _screensPath + item.baseName() + "/project.json";
 
         if (!QFile(tmpPath).exists())
             continue;
@@ -85,6 +91,6 @@ void InstalledListModel::loadDrives()
         if (!(parseError.error == QJsonParseError::NoError))
             continue;
 
-        append(jsonProject.object());
+        append(jsonProject.object(),item.baseName());
     }
 }

src/installedlistmodel.h

@@ -28,27 +28,35 @@ public:
     int rowCount(const QModelIndex& parent = QModelIndex()) const override;
     QVariant data(const QModelIndex& index,
         int role = Qt::DisplayRole) const override;
-    void append(const QJsonObject);
+    void append(const QJsonObject, const QString);
     QHash<int, QByteArray> roleNames() const;
 
-    Q_INVOKABLE void loadDrives();
+    Q_INVOKABLE void loadScreens();
+    Q_PROPERTY(QString _screensPath READ name CONSTANT)
 
     enum InstalledRole {
         TitleRole,
-        ImageRole,
-
+        PreviewRole,
+        FolderIdRole,
     };
     Q_ENUM(InstalledRole)
 
+    QString name() const
+    {
+        return _screensPath;
+    }
+
 private:
     QList<ScreenPlayFile> _screenPlayFiles;
+    QString _screensPath;
+
 };
 
 class ScreenPlayFile {
 
 public:
     ScreenPlayFile();
-    ScreenPlayFile(QJsonObject obj)
+    ScreenPlayFile(QJsonObject obj, QString folderName)
     {
         if (obj.contains("description"))
             _description = obj.value("description");
@@ -61,12 +69,15 @@ public:
 
         if (obj.contains("title"))
             _title = obj.value("title");
+
+        _folderId = folderName;
     }
 
-    QVariant _description = "as";
+    QVariant _description;
     QVariant _file;
     QVariant _preview;
-    QVariant _title= "aass";
+    QVariant _title;
+    QString _folderId;
     QUrl _absolutePath;
 
     QVariantList _tags; //TODO: Implement me!