Фон+Анимация кнопок

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,135 @@ import "../components" as TopMenuBut
 
 
 Rectangle {
-    // PROPERTIES
     property string currentTab: TabConstants.gamesTab
+    property var activeButtonTab: buttonGames
+
 
-    // FIELDS
     id: tabs
     x: 0
     y: 0
     width: 640
     height: 480
     color: Style.backgroundColor
+    Component.onCompleted:{tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;}
+    onWidthChanged: function(){tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;}
+    onHeightChanged: function(){tabButtons.changeButtonActiveTab(tabs.activeButtonTab);tabButtons.x = tabButtons.tempX;}
+
+    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: 0
+            property bool toggle: false
+            height: 400
+            //anchors.leftMargin: parent.width / 10
+            //anchors.rightMargin: parent.width / 10
+            Layout.bottomMargin: buttonSystemManagement.height
+            Layout.topMargin: buttonSystemManagement.height
+
+            //x: topNavigation.width / 2 //- tabButtons.children[1].width / 2 - (spacing + tabButtons.children[0].width )
+            // Состояния
+            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 = ButtonId
+            }
 
-    // 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.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);
+                }
+                onReleased: tabButtons.toggle = false
 
-        TopMenuBut.Button {
+            }
+            TopMenuBut.TextButton {
+                id: testbut1
+                text: "Test"
+                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: "Test2"
+                //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 +161,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 +183,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 +195,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/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,6 +12,7 @@ C.Button {
 
     id: game
     text: ""
+    // Область для считывания нажатий
     MouseArea {
         id: hoverArea
         anchors.fill: parent
@@ -25,11 +25,7 @@ C.Button {
             window.scene = SceneConstants.gameInfoScene;
         }
     }
-
-
-
-
-
+    //
     background: Rectangle {
         id: rect
         width:game.width + border.width *2
@@ -43,13 +39,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 +57,12 @@ C.Button {
         }
     ]
 
+    // Анимации при изменениях состояний
     transitions: [
         Transition  {
             from: ""; to: "focus"
             reversible: false
             SequentialAnimation  {
-
                 NumberAnimation{
                         target: rect; property: "border.width"
                         duration: 100
@@ -71,24 +70,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 +94,10 @@ C.Button {
             from: 0.4;
             to: 1;
             duration: 1000
-
         }
     }
 
-
+    // Картинка на карточке
     Image {
         id: image
         anchors.left: parent.left
@@ -114,20 +107,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 +132,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/scenes/HomeScene.qml

@@ -10,17 +10,17 @@ 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
-    }
+    // 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 +28,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