Merge pull request #4 from Exc404/main

qml/components/Button.qml

@@ -2,28 +2,37 @@ import QtQuick
 import QtQuick.Controls as C
 
 C.Button {
-    // control.down
-    // control.activeFocus
-
     id: control
     text: qsTr("Button")
+    font.bold: true
+    //font.letterSpacing:  font.pixelSize / 100 * 30
+
+    // font.pointSize:  Math.max(parent.width / 100,10)
+    // contentItem: Text {
+    //     text: control.text
+    //     font: control.font
+    //     //fontSizeMode: Text.Fit; minimumPixelSize: 10;
+    //     opacity: enabled ? 1.0 : 0.3
+    //     color: control.down ? "Black" : (control.activeFocus ? "#333333" : "#ffffff")
+    //     horizontalAlignment: Text.AlignHCenter
+    //     verticalAlignment: Text.AlignVCenter
+    //     elide: Text.ElideRight
+    //     leftPadding: font.pointSize / 100 * 20
+    //     rightPadding: font.pointSize / 100 * 20
+    //     topPadding: font.pointSize / 100 * 0
+    //     bottomPadding: font.pointSize / 100 * 0
+
+    // }
+
+    // background: Rectangle {
+    //     //implicitWidth: 100
+    //     //implicitHeight: 40
+    //     opacity: enabled ? 1 : 0.3
+    //     color: control.down ? "#000000" : (control.activeFocus ? "#ffffff" : "#00000000")
+    //     border.width: 0
+    //     radius: 16
+
+    // }
 
-    contentItem: Text {
-        text: control.text
-        font: control.font
-        opacity: enabled ? 1.0 : 0.3
-        color: control.down ? "#000000" : (control.activeFocus ? "#ff0000" : "#555555")
-        horizontalAlignment: Text.AlignHCenter
-        verticalAlignment: Text.AlignVCenter
-        elide: Text.ElideRight
-    }
 
-    background: Rectangle {
-        implicitWidth: 100
-        implicitHeight: 40
-        opacity: enabled ? 1 : 0.3
-        border.color: control.down ? "#000000" : (control.activeFocus ? "#ff0000" : "#555555")
-        border.width: 1
-        radius: 8
-    }
 }

qml/components/Tabs.qml

 import QtQuick
-import QtQuick.Controls as C
+import QtQuick.Controls
 import QtQuick.Layouts
 import "../delegates"
 import "../constants/tabs.js" as TabConstants
+import "../constants/style.js" as Style
+import "../components" as TopMenuBut
+
 
 
 Rectangle {
     // PROPERTIES
-    property string currentTab: TabConstants.systemManagementTab
+    property string currentTab: TabConstants.gamesTab
 
     // FIELDS
     id: tabs
@@ -15,12 +18,57 @@ Rectangle {
     y: 0
     width: 640
     height: 480
-    color: "#ffffff"
+    color: Style.backgroundColor
 
     // onWidthChanged: { console.log("Window Width changed: " + width) }
     // onHeightChanged: { console.log("Window Height changed: " + height)}
 
     // COMPONENTS
+    RowLayout {
+        id: row
+        spacing: 5
+        //width: parent.width
+        anchors.leftMargin: parent.width / 10
+        anchors.rightMargin: parent.width / 10
+        anchors.bottomMargin: buttonSystemManagement.height / 6
+        anchors.topMargin: buttonSystemManagement.height / 6
+        Layout.alignment: Qt.AlignHCenter
+
+        height: buttonSystemManagement.height + anchors.bottomMargin + anchors.topMargin
+
+
+        //padding: 0
+
+
+
+        TopMenuBut.Button {
+
+            id: buttonSystemManagement
+            text: TabConstants.systemManagementTab
+            //Layout.preferredHeight: 30
+            onClicked: function(){
+                tabs.currentTab = TabConstants.systemManagementTab;
+                // tabs.changeTab();
+                // console.log(tabs.currentTab);
+            }
+        }
+
+        TopMenuBut.Button {
+            //anchors.horizontalCenter: parent.horizontalCenter
+            id: buttonGames
+            text: TabConstants.gamesTab
+            //Layout.preferredHeight: 30
+            onClicked: function(){
+                tabs.currentTab = TabConstants.gamesTab;
+                //if(core_app === undefined) return;
+                //console.log("core_app found");
+
+                //app.get_games();
+                // tabs.changeTab();
+                // console.log(tabs.currentTab);
+            }
+        }
+    }
 
     Grid {
         id: systemManagementGrid
@@ -33,10 +81,10 @@ Rectangle {
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.bottom: parent.bottom
-        anchors.topMargin: 60
+        Layout.topMargin: 190
         anchors.rightMargin: 0
         anchors.leftMargin: 0
-        anchors.bottomMargin: 0
+        anchors.bottomMargin: 90
 
         Rectangle { color: "red"; width: 50; height: 50 }
         Rectangle { color: "green"; width: 20; height: 50 }
@@ -46,106 +94,64 @@ Rectangle {
     }
 
 
-    C.ScrollView {
+    ScrollView {
         visible: tabs.currentTab == TabConstants.gamesTab
         id: gamesScroller
         anchors.fill: parent
-        anchors.topMargin: 60
-        clip : true
+        anchors.topMargin: row.height
+        ScrollBar.vertical: ScrollBar {
+            id: scrolV;
+            height: parent.height
+            opacity:0
+
+            property double fromAnim: 0.0
+            property double toAnim: 0.0
+        }
+
+        function scrollToY(y,HItem) {
+            scrolV.fromAnim = scrolV.position
+            scrolV.position = (1.0 - scrolV.size) * y/gamesScroller.height
+            scrolV.toAnim = (1.0 - scrolV.size) * y/gamesScroller.height
+            if(scrolV.toAnim != scrolV.fromAnim)scrollAnimation.start()
+        }
+        PropertyAnimation {to:scrolV.toAnim;from:scrolV.fromAnim;target:scrolV;id:scrollAnimation; property: "position" ;duration: 200 }
+
 
         GridLayout {
             id: gamesGrid
-            readonly property int elementWidth: 256 + gamesGrid.rowSpacing*2
             anchors.left: parent.left
             anchors.right: parent.right
             anchors.top: parent.top
             anchors.bottom: parent.bottom
-
-            // columns: Math.max(Math.floor(parent.width / elementWidth), 1)
-            // rows: Math.max(Math.ceil(children.length / columns), 1)
-
-            columns: Math.max(Math.floor(gamesScroller.width / elementWidth), 1)
+            columns: 6
             rows: Math.max(Math.ceil(children.length / columns), 1)
 
-            anchors.rightMargin: 8
-            anchors.leftMargin: 8
-            anchors.bottomMargin: 8
-            anchors.topMargin: 8
-            rowSpacing: 8
+            anchors.rightMargin: rowSpacing
+            anchors.leftMargin: rowSpacing
+            anchors.bottomMargin : 90
+            anchors.topMargin: Math.floor( gamesScroller.width / 100 * 1.5)
+            rowSpacing:Math.floor( gamesScroller.width / 100 * 1.5)
             columnSpacing: rowSpacing
 
             Repeater {
-                // Layout.fillHeight: true
-                // Layout.fillWidth: true
                 model: core_app.games
-
                 Game {
+
                     gameTitle: model.name
                     gameExec: model.exec
                     gameIcon: model.icon
-
-                    width: 256
-                    height: 256
-                    // icon: core_app.games.icon
-                    // exec: core_app.games.exec
+                    Layout.bottomMargin : (index - index % gamesGrid.columns)/ gamesGrid.columns === gamesGrid.rows-1 ? gamesGrid.rowSpacing*2 : 0
+                    onFocusChanged: if(focus) { gamesScroller.scrollToY(y); }
+                    Layout.preferredWidth: (gamesScroller.width - (gamesGrid.columns +1)* gamesGrid.rowSpacing) / gamesGrid.columns
+                    Layout.preferredHeight: Layout.preferredWidth / 2 * 3
                 }
             }
         }
     }
 
-    Rectangle {
-        id: tabsBar
-        height: 60
-        color: "#4a4a4a"
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.topMargin: 0
-        anchors.leftMargin: 0
-        anchors.rightMargin: 0
 
-        Row {
-            id: row
-            height: 60
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            spacing: 5
-            padding: 0
-            rightPadding: 5
-            leftPadding: 5
-            bottomPadding: 5
-            topPadding: 5
-
-            Button {
-                id: buttonSystemManagement
-                text: "System management"
-                width: 150
-                height: 50
-                onClicked: function(){
-                    tabs.currentTab = TabConstants.systemManagementTab;
-                    // tabs.changeTab();
-                    // console.log(tabs.currentTab);
-                }
-            }
 
-            Button {
-                id: buttonGames
-                text: "Games"
-                width: 150
-                height: 50
-                onClicked: function(){
-                    tabs.currentTab = TabConstants.gamesTab;
-                    //if(core_app === undefined) return;
-                    //console.log("core_app found");
-
-                    //app.get_games();
-                    // tabs.changeTab();
-                    // console.log(tabs.currentTab);
-                }
-            }
-        }
-    }
+
 
 
 }

qml/constants/style.js

-var backColor = "red";
\ No newline at end of file
+var backColor = "red";
+var backgroundColor = "#1b262c";

qml/constants/tabs.js

-var systemManagementTab = "systemManagement";
-var gamesTab = "games";
\ No newline at end of file
+var systemManagementTab = "System";
+var gamesTab = "Games";

qml/delegates/Game.qml

 import QtQuick
 import "../constants/scene.js" as SceneConstants
-import "../components/" as C
+//import "../components/" as C
+
+import QtQuick.Controls as C
+// Подключить для работы с типом объекта LinearGradient
+
 
 C.Button {
     property string gameTitle: "Generic title"
@@ -8,24 +12,99 @@ C.Button {
     property string gameExec: ""
 
     id: game
-    width: 256
-    height: 256
-    implicitWidth: 256
-    implicitHeight: 256
     text: ""
-    // color: "#efefef"
-    //radius: 5
-    // border.width: 1
+    MouseArea {
+        id: hoverArea
+        anchors.fill: parent
+        hoverEnabled: true
+        onClicked: function(){
+            // console.log(game.title);
+            gameInfoScene.title = game.gameTitle;
+            gameInfoScene.icon = game.gameIcon;
+            gameInfoScene.exec = game.gameExec;
+            window.scene = SceneConstants.gameInfoScene;
+        }
+    }
+
 
-    onClicked: function(){
-        // console.log(game.title);
-        gameInfoScene.title = game.gameTitle;
-        gameInfoScene.icon = game.gameIcon;
-        gameInfoScene.exec = game.gameExec;
 
-        window.scene = SceneConstants.gameInfoScene;
+
+
+    background: Rectangle {
+        id: rect
+        width:game.width + border.width *2
+        height:game.height + border.width*2
+
+        opacity: 1.0
+        color: "#000000"
+        anchors.centerIn: parent
+        border.width: 0
+        border.color: "#ffffff"
+        radius: 1
     }
 
+    states: [
+        State {
+            name: "focus"; when: game.activeFocus
+            PropertyChanges { target: rect; border.width: Math.max(game.width / 100 * 2 ,2);}
+            PropertyChanges { target: game; scale:1.05 }
+            PropertyChanges { target: bgNameGrad; opacity:1 }
+        },
+        State {
+            name: "hover"; when: hoverArea.containsMouse
+            PropertyChanges { target: game; scale:1.05 }
+            PropertyChanges { target: bgNameGrad; opacity:1 }
+
+        }
+    ]
+
+    transitions: [
+        Transition  {
+            from: ""; to: "focus"
+            reversible: false
+            SequentialAnimation  {
+
+                NumberAnimation{
+                        target: rect; property: "border.width"
+                        duration: 100
+                        to: Math.max(game.width / 100 * 4,4)        // пока x не будет равно 250
+                        easing.type: Easing.InOutQuad
+                    }
+                NumberAnimation {target: rect; property: "border.width"; duration: 100 }
+
+
+            }
+        },
+
+        Transition {
+            from: ""; to: "hover"
+            reversible: true
+            NumberAnimation {target: game ; property: "scale"; duration: 100 }
+        }
+    ]
+
+    // вообще должно быть в Transition focus но оно там не рнаботает :(
+    SequentialAnimation{
+        id:anim
+        running: game.activeFocus ? true: false
+        loops: Animation.Infinite
+
+        OpacityAnimator {
+            target:rect ;
+            from: 1;
+            to: 0.4;
+            duration: 1000
+        }
+        OpacityAnimator {
+            target: rect;
+            from: 0.4;
+            to: 1;
+            duration: 1000
+
+        }
+    }
+
+
     Image {
         id: image
         anchors.left: parent.left
@@ -33,27 +112,44 @@ C.Button {
         anchors.top: parent.top
         anchors.bottom: parent.bottom
         source: game.gameIcon
-        anchors.rightMargin: 8
-        anchors.bottomMargin: 47
-        anchors.leftMargin: 8
-        anchors.topMargin: 8
         fillMode: Image.PreserveAspectFit
-    }
 
-    Text {
-        id: title
-        y: 439
-        height: 33
-        text: game.gameTitle
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.bottom: parent.bottom
-        font.pixelSize: 22
-        horizontalAlignment: Text.AlignHCenter
-        anchors.rightMargin: 8
-        anchors.leftMargin: 8
-        anchors.bottomMargin: 8
+        Rectangle {
+            id:bgNameGrad
+            opacity: 0
+            anchors.fill: parent
+            gradient:Gradient {
+                        GradientStop { position: 0.6; color: "#00000000" }
+                        //GradientStop { position: 0.33; color: "yellow" }
+                        GradientStop { position: 1.0; color: "#a0000000" }
+                    }
+            Behavior on opacity{
+
+                NumberAnimation {target: bgNameGrad; property: "opacity"; duration: 200 }
+            }
+
+            Text {
+                id: title
+                y: 439
+                height: 33
+                color: "#ffffff"
+                text: game.gameTitle
+                anchors.left: parent.left
+                anchors.right: parent.right
+                anchors.bottom: parent.bottom
+                font.pixelSize: Math.max(game.width / 100 * 8,10)
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignBottom
+                // anchors.rightMargin: 8
+                // anchors.leftMargin: 8
+                anchors.bottomMargin: Math.max(game.width / 100 * 8,10)
+            }
+        }
+
     }
 
+
+
+
     
 }

qml/scenes/HomeScene.qml

@@ -12,8 +12,8 @@ Rectangle {
 
     Rectangle {
         id: rectangle
-        height: 64
-        color: "#2b2b2b"
+        height: parent.height/100 * 5
+        color: "black"
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.top: parent.top
@@ -28,7 +28,7 @@ Rectangle {
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.bottom: parent.bottom
-        anchors.topMargin: 64
+        anchors.topMargin: rectangle.height
         anchors.bottomMargin: 0
         anchors.leftMargin: 0
         anchors.rightMargin: 0

requirements.txt

+
 PySide6==6.6.3
 PySide6-Essentials==6.6.3
 PySide6-Addons==6.6.3

src/models/App.py

@@ -66,6 +66,8 @@ class App(QtCore.QObject):
                 icon = (os.path.isfile(icon) and icon
                         or os.path.realpath(f"{Path(__file__).resolve().parent}../../../qml/images/game_icon.png"))
 
+                # Тест карточек
+                icon = os.path.realpath(f"{Path(__file__).resolve().parent}../../../qml/images/PUBG.png")
                 self.games_model.add_game(Game(name=name, icon=icon, exec=exec))
 
         except FileNotFoundError: