Merge branch 'Exc404-main'

qml/components/ButtonImage.qml

@@ -2,7 +2,7 @@ import QtQuick
 import QtQuick.Controls as C
 import "."
 
-Button {
+C.Button {
     property string imageUrl: "../images/generic.svg"
     id: button
 

qml/components/Tabs.qml

@@ -9,67 +9,145 @@ import "../components" as TopMenuBut
 
 
 Rectangle {
-    // PROPERTIES
     property string currentTab: TabConstants.gamesTab
+    property var activeButtonTab: buttonGames
+
+
 
-    // FIELDS
     id: tabs
-    x: 0
+    x: 100
     y: 0
     width: 640
     height: 480
     color: Style.backgroundColor
+    onVisibleChanged: {tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;console.log("tabButtons.x = " + tabButtons.x);}
 
-    // 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
-
+    Component.onCompleted:{tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;console.log("Tabs completed!");}
+    onWidthChanged: function(){tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;}
+    onHeightChanged: function(){tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;}
 
-        //padding: 0
+    Image {
+            id: bg
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectCrop
+            source: '../images/bg3.svg'
+        }
+    // Кнопки навигации
+    ColumnLayout{
+        id:topNavigation
+        width: parent.width
+        RowLayout {
+            id: tabButtons
+            property int tempX: 100
+            property bool toggle: false
+
+
+            //anchors.leftMargin: parent.width / 10
+            //anchors.rightMargin: parent.width / 10
+            Component.onCompleted:{tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;console.log("tabButtons completed!");}
+
+            Layout.bottomMargin: buttonSystemManagement.height / 2
+            Layout.topMargin: buttonSystemManagement.height / 3
+            x:100
+            // Состояния
+            states: [
+                State {name: "ClickTabButton";when:tabButtons.toggle;PropertyChanges {target: tabButtons;x:tempX}},
+                State {name: "";when:1 == 1}
+            ]
+            // Анимации при изменениях состояний
+            transitions:
+                Transition  {
+                    from: ""; to: "ClickTabButton"
+                    PropertyAnimation{
+                        id:clickTabButtonAnimation
+                        //from: tempX
+                        duration: 200
+                        property:"x"
+                        //анимациюю можно будет поменять в любое время
+                        easing.type: Easing.InOutCirc
+                    }
+                }
+            // Функция перемещения кнопок
+            function changeButtonActiveTab(ButtonId){
+                let index = 0
+                let left_distance = 0
+                for(var i = 0; i < tabButtons.children.length; ++i)
+                    if(children[i]===ButtonId){
+                       index = i
+                       break
+                    }
+                for(i = 0; i < index; ++i)
+                    left_distance += spacing + children[i].width
+                tempX = topNavigation.width / 2 - tabButtons.children[index].width / 2 - left_distance
+                tabs.activeButtonTab.isActive = false
+                tabs.activeButtonTab = ButtonId
+                tabs.activeButtonTab.isActive = true
 
+            }
 
+            TopMenuBut.TextButton {
+                id: buttonSystemManagement
+                text: TabConstants.systemManagementTab
+                width: 400
+                onClicked: function(){
+                    tabButtons.x = tabButtons.tempX
+                    tabButtons.changeButtonActiveTab(this)
+                    tabButtons.toggle = true
+                    tabs.currentTab = TabConstants.systemManagementTab;
+                    // tabs.changeTab();
+                    // console.log(tabs.urrentTab);
+                }
+                onReleased: tabButtons.toggle = false
+            }
+            TopMenuBut.TextButton {
+                id: buttonGames
+                text: TabConstants.gamesTab
+                onClicked: function(){
+                    tabButtons.x = tabButtons.tempX
+                    tabButtons.changeButtonActiveTab(this)
+                    tabButtons.toggle = true
+                    tabs.currentTab = TabConstants.gamesTab;
+                    //if(core_app === undefined) return;
+                    //console.log("core_app found");
+
+                    //app.get_games();
+                    // tabs.changeTab();
+                    // ;console.log(tabs.currentTab);
+
+                    // ;console.log("1");
+                }
+                onReleased: tabButtons.toggle = false
 
-        TopMenuBut.Button {
+            }
+            TopMenuBut.TextButton {
+                id: testbut1
+                text: "Mega"
+                onClicked: function(){
+                    tabButtons.x = tabButtons.tempX
+                    tabButtons.changeButtonActiveTab(this)
+                    tabButtons.toggle = true
+               }
+               onReleased: tabButtons.toggle = false
 
-            id: buttonSystemManagement
-            text: TabConstants.systemManagementTab
-            //Layout.preferredHeight: 30
-            onClicked: function(){
-                tabs.currentTab = TabConstants.systemManagementTab;
-                // tabs.changeTab();
-                // console.log(tabs.currentTab);
             }
-        }
+            TopMenuBut.TextButton {
+                id: testbut2
+                text: "Test"
+                //font.pixelSize: 60
+                //height:Math.ceil(tabs.height/100 * 10)
+
+                onClicked: function(){
+                    tabButtons.x = tabButtons.tempX
+                    tabButtons.changeButtonActiveTab(this)
+                    tabButtons.toggle = true
+               }
+                onReleased: tabButtons.toggle = false
 
-        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
         visible: tabs.currentTab == TabConstants.systemManagementTab
@@ -93,16 +171,17 @@ Rectangle {
         Rectangle { color: "magenta"; width: 10; height: 10 }
     }
 
-
+    // Сетка игр
     ScrollView {
         visible: tabs.currentTab == TabConstants.gamesTab
         id: gamesScroller
         anchors.fill: parent
-        anchors.topMargin: row.height
+        anchors.topMargin: topNavigation.height
         ScrollBar.vertical: ScrollBar {
             id: scrolV;
             height: parent.height
             opacity:0
+            position:0
 
             property double fromAnim: 0.0
             property double toAnim: 0.0
@@ -114,9 +193,9 @@ Rectangle {
             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
             anchors.left: parent.left
@@ -126,23 +205,24 @@ Rectangle {
             columns: 6
             rows: Math.max(Math.ceil(children.length / columns), 1)
 
-            anchors.rightMargin: rowSpacing
-            anchors.leftMargin: rowSpacing
+            anchors.rightMargin: rowSpacing * 2
+            anchors.leftMargin: rowSpacing * 2
             anchors.bottomMargin : 90
             anchors.topMargin: Math.floor( gamesScroller.width / 100 * 1.5)
             rowSpacing:Math.floor( gamesScroller.width / 100 * 1.5)
             columnSpacing: rowSpacing
 
+            // Повторитель
             Repeater {
                 model: core_app.games
+                // Карточка игры
                 Game {
-
                     gameTitle: model.name
                     gameExec: model.exec
                     gameIcon: model.icon
                     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.preferredWidth: (gamesScroller.width - (gamesGrid.columns -1) * gamesGrid.rowSpacing - gamesGrid.anchors.rightMargin- gamesGrid.anchors.leftMargin) / gamesGrid.columns
                     Layout.preferredHeight: Layout.preferredWidth / 2 * 3
                 }
             }

qml/components/TextButton.qml

+import QtQuick
+import QtQuick.Controls as C
+
+
+
+C.Button {
+    id: root
+    property bool isActive: false
+    hoverEnabled: true
+
+    //width: parent.width / 100 * 1.5
+    //height: 200
+    //text: "Size me!"
+
+    contentItem: Text {
+        id: text
+        text: root.text
+        font.family: "Helvetica"
+        font.pointSize: 14
+        font.bold : true
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+
+        //fontSizeMode: Text.Fit
+        color: 'white'
+        opacity: 0.8
+    }
+    background.opacity: 0.0
+    background.anchors.margins: 0
+    Rectangle{
+        id: line
+        color: 'white'
+        height: 2
+        width: 0
+        anchors.horizontalCenter: root.horizontalCenter
+        anchors.top: root.top
+        //        anchors.bottom:root.bottom
+
+    }
+
+    // Состояния
+    states: [
+        // Карточка в фокуске
+        State {
+            name: "active"; when: isActive
+            PropertyChanges { target: line; width: parent.width;}
+            PropertyChanges { target: text; opacity:1 }
+        },
+        // На карточку навели курсор мыши
+        State {
+            name: "hover"; when: hovered && !isActive
+            //PropertyChanges { target: line; width: parent.width;}
+            PropertyChanges { target: text; opacity:1 }
+
+        }
+    ]
+
+    // Анимации при изменениях состояний
+    transitions: [
+        Transition  {
+            to: "active"
+            reversible: true
+            id:activeAnim
+            ParallelAnimation  {
+                NumberAnimation{
+                        target: line; property: "width"
+                        duration: 200
+                        easing.type: Easing.InOutQuad
+                    }
+                NumberAnimation {target: text; property: "opacity"; duration: 100 }
+            }
+        },
+
+        Transition {
+            from: ""; to: "hover"
+            reversible: true
+            ParallelAnimation  {
+                NumberAnimation{
+                        target: line; property: "width"
+                        duration: 200
+                        easing.type: Easing.InOutQuad
+                    }
+                NumberAnimation {target: text; property: "opacity"; duration: 100 }
+            }
+        }
+    ]
+
+
+}

qml/delegates/Game.qml

@@ -3,9 +3,8 @@ import "../constants/scene.js" as SceneConstants
 //import "../components/" as C
 
 import QtQuick.Controls as C
-// Подключить для работы с типом объекта LinearGradient
-
 
+// Карточка игры
 C.Button {
     property string gameTitle: "Generic title"
     property string gameIcon: ""
@@ -13,23 +12,24 @@ C.Button {
 
     id: game
     text: ""
+    // Область для считывания нажатий
     MouseArea {
         id: hoverArea
         anchors.fill: parent
         hoverEnabled: true
         onClicked: function(){
-            // console.log(game.title);
+            // console.log(game.title)
             gameInfoScene.title = game.gameTitle;
             gameInfoScene.icon = game.gameIcon;
             gameInfoScene.exec = game.gameExec;
-            window.scene = SceneConstants.gameInfoScene;
-        }
-    }
-
 
 
 
 
+           window.scene = SceneConstants.gameInfoScene;
+        }
+    }
+    //
     background: Rectangle {
         id: rect
         width:game.width + border.width *2
@@ -43,13 +43,16 @@ C.Button {
         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 }
@@ -58,12 +61,12 @@ C.Button {
         }
     ]
 
+    // Анимации при изменениях состояний
     transitions: [
         Transition  {
             from: ""; to: "focus"
             reversible: false
             SequentialAnimation  {
-
                 NumberAnimation{
                         target: rect; property: "border.width"
                         duration: 100
@@ -71,24 +74,19 @@ C.Button {
                         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;
@@ -100,11 +98,10 @@ C.Button {
             from: 0.4;
             to: 1;
             duration: 1000
-
         }
     }
 
-
+    // Картинка на карточке
     Image {
         id: image
         anchors.left: parent.left
@@ -114,20 +111,19 @@ C.Button {
         source: game.gameIcon
         fillMode: Image.PreserveAspectFit
 
+        // Градиент + название игры
         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
@@ -140,16 +136,9 @@ C.Button {
                 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/images/bg3.svg

+<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 1600 800'><rect fill='#63067A' width='1600' height='800'/><g fill-opacity='1'><path fill='#520874'  d='M486 705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5 692.1 49 703 0 719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8 707.1 489.4 706.5 486 705.8z'/><path fill='#42096e'  d='M1600 0H0v719.8c49-16.8 99.5-27.8 150.7-33.5c111.9-12.7 226-2.4 335.3 19.4c3.4 0.7 6.8 1.4 10.2 2c116.8 24 231.7 59 347.6 92.2H1600V0z'/><path fill='#310b69'  d='M478.4 581c3.2 0.8 6.4 1.7 9.5 2.5c196.2 52.5 388.7 133.5 593.5 176.6c174.2 36.6 349.5 29.2 518.6-10.2V0H0v574.9c52.3-17.6 106.5-27.7 161.1-30.9C268.4 537.4 375.7 554.2 478.4 581z'/><path fill='#210c63'  d='M0 0v429.4c55.6-18.4 113.5-27.3 171.4-27.7c102.8-0.8 203.2 22.7 299.3 54.5c3 1 5.9 2 8.9 3c183.6 62 365.7 146.1 562.4 192.1c186.7 43.7 376.3 34.4 557.9-12.6V0H0z'/><path fill='#100E5D'  d='M181.8 259.4c98.2 6 191.9 35.2 281.3 72.1c2.8 1.1 5.5 2.3 8.3 3.4c171 71.6 342.7 158.5 531.3 207.7c198.8 51.8 403.4 40.8 597.3-14.8V0H0v283.2C59 263.6 120.6 255.7 181.8 259.4z'/><path fill='#0d0b4a'  d='M1600 0H0v136.3c62.3-20.9 127.7-27.5 192.2-19.2c93.6 12.1 180.5 47.7 263.3 89.6c2.6 1.3 5.1 2.6 7.7 3.9c158.4 81.1 319.7 170.9 500.3 223.2c210.5 61 430.8 49 636.6-16.6V0z'/><path fill='#0a0838'  d='M454.9 86.3C600.7 177 751.6 269.3 924.1 325c208.6 67.4 431.3 60.8 637.9-5.3c12.8-4.1 25.4-8.4 38.1-12.9V0H288.1c56 21.3 108.7 50.6 159.7 82C450.2 83.4 452.5 84.9 454.9 86.3z'/><path fill='#060625'  d='M1600 0H498c118.1 85.8 243.5 164.5 386.8 216.2c191.8 69.2 400 74.7 595 21.1c40.8-11.2 81.1-25.2 120.3-41.7V0z'/><path fill='#030313'  d='M1397.5 154.8c47.2-10.6 93.6-25.3 138.6-43.8c21.7-8.9 43-18.8 63.9-29.5V0H643.4c62.9 41.7 129.7 78.2 202.1 107.4C1020.4 178.1 1214.2 196.1 1397.5 154.8z'/><path fill='#000000'  d='M1315.3 72.4c75.3-12.6 148.9-37.1 216.8-72.4h-723C966.8 71 1144.7 101 1315.3 72.4z'/></g></svg>
\ No newline at end of file

qml/qml.qml

@@ -8,6 +8,11 @@ import "constants/scene.js" as SceneConstants
 Window {
     property string scene: SceneConstants.homeScene
 
+    Loader{
+         id : ld
+         anchors.fill: parent;
+    }
+
     Connections {
         target: core_app
         function onGameStarted(done) {
@@ -45,20 +50,31 @@ Window {
     visible: true
     title: qsTr("Launcher")
 
+
+    // Решение бага с изменением положений кнопок вкладок через opacity и enabled - ЭТО КОСТЫЛЬ!!!
     HomeScene {
-        visible: scene == SceneConstants.homeScene
+        //visible: scene == SceneConstants.homeScene
+        opacity: scene == SceneConstants.homeScene
+        enabled: scene == SceneConstants.homeScene
+
         id: homeScene
         anchors.fill: parent
     }
 
     GameInfoScene {
-        visible: scene == SceneConstants.gameInfoScene
+        //visible: scene == SceneConstants.gameInfoScene
+        opacity: scene == SceneConstants.gameInfoScene
+        enabled: scene == SceneConstants.gameInfoScene
+
         id: gameInfoScene
         anchors.fill: parent
     }
 
     RunningScene {
-        visible: scene == SceneConstants.runningScene
+        //visible: scene == SceneConstants.runningScene
+        opacity: scene == SceneConstants.runningScene
+        enabled: scene == SceneConstants.runningScene
+
         id: runningScene
         anchors.fill: parent
     }

qml/scenes/GameInfoScene.qml

@@ -9,7 +9,6 @@ Rectangle {
     property string icon: ""
     property string exec: ""
 
-
     id: container
     x: 0
     y: 0
@@ -35,7 +34,6 @@ Rectangle {
         width: 64
         height: 64
         imageUrl: "../images/back.svg"
-
         onClicked: function(){
             window.scene = S.homeScene;
         }

qml/scenes/HomeScene.qml

@@ -10,17 +10,19 @@ Rectangle {
     width: 640
     height: 480
 
-    Rectangle {
-        id: rectangle
-        height: parent.height/100 * 5
-        color: "black"
-        anchors.left: parent.left
-        anchors.right: parent.right
-        anchors.top: parent.top
-        anchors.rightMargin: 0
-        anchors.leftMargin: 0
-        anchors.topMargin: 0
-    }
+    onVisibleChanged: {tabs.visible = container.visible}
+
+    // Rectangle {
+    //     id: rectangle
+    //     height: parent.height/100 * 5
+    //     color: "black"
+    //     anchors.left: parent.left
+    //     anchors.right: parent.right
+    //     anchors.top: parent.top
+    //     anchors.rightMargin: 0
+    //     anchors.leftMargin: 0
+    //     anchors.topMargin: 0
+    // }
 
     Tabs {
         id: tabs
@@ -28,7 +30,7 @@ Rectangle {
         anchors.right: parent.right
         anchors.top: parent.top
         anchors.bottom: parent.bottom
-        anchors.topMargin: rectangle.height
+        //anchors.topMargin: rectangle.height
         anchors.bottomMargin: 0
         anchors.leftMargin: 0
         anchors.rightMargin: 0