Skip to content

I
ingame
Commit 84a4f398 authored by Exc404's avatar Exc404
Browse files
Options

Changing the margins

parent 9500e2d5
Hide whitespace changes
Inline Side-by-side
Showing with 241 additions and 139 deletions
qml/components/Button.qml
View file @ 84a4f398
...@@ -2,28 +2,37 @@ import QtQuick ...@@ -2,28 +2,37 @@ import QtQuick
import QtQuick.Controls as C import QtQuick.Controls as C
C.Button { C.Button {
// control.down
// control.activeFocus
id: control id: control
text: qsTr("Button") 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
View file @ 84a4f398
import QtQuick import QtQuick
import QtQuick.Controls as C import QtQuick.Controls
import QtQuick.Layouts import QtQuick.Layouts
import "../delegates" import "../delegates"
import "../constants/tabs.js" as TabConstants import "../constants/tabs.js" as TabConstants
import "../constants/style.js" as Style
import "../components" as TopMenuBut
Rectangle { Rectangle {
...@@ -15,12 +18,57 @@ Rectangle { ...@@ -15,12 +18,57 @@ Rectangle {
y: 0 y: 0
width: 640 width: 640
height: 480 height: 480
color: "#ffffff" color: Style.backgroundColor
// onWidthChanged: { console.log("Window Width changed: " + width) } // onWidthChanged: { console.log("Window Width changed: " + width) }
// onHeightChanged: { console.log("Window Height changed: " + height)} // onHeightChanged: { console.log("Window Height changed: " + height)}
// COMPONENTS // 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 { Grid {
id: systemManagementGrid id: systemManagementGrid
...@@ -33,10 +81,10 @@ Rectangle { ...@@ -33,10 +81,10 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.topMargin: 60 Layout.topMargin: 190
anchors.rightMargin: 0 anchors.rightMargin: 0
anchors.leftMargin: 0 anchors.leftMargin: 0
anchors.bottomMargin: 0 anchors.bottomMargin: 90
Rectangle { color: "red"; width: 50; height: 50 } Rectangle { color: "red"; width: 50; height: 50 }
Rectangle { color: "green"; width: 20; height: 50 } Rectangle { color: "green"; width: 20; height: 50 }
...@@ -46,114 +94,64 @@ Rectangle { ...@@ -46,114 +94,64 @@ Rectangle {
} }
C.ScrollView { ScrollView {
visible: tabs.currentTab == TabConstants.gamesTab visible: tabs.currentTab == TabConstants.gamesTab
id: gamesScroller id: gamesScroller
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 60 anchors.topMargin: row.height
clip : true 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 { GridLayout {
id: gamesGrid id: gamesGrid
readonly property int elementWidth: 228 + 15// + gamesGrid.rowSpacing*2
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
columns: 6
//Layout.alignment: AlignCenter
// columns: Math.max(Math.floor(parent.width / elementWidth), 1)
// rows: Math.max(Math.ceil(children.length / columns), 1)
//columns: Math.max(Math.min(Math.floor(gamesScroller.width / elementWidth),6), 1)
columns: 5
rows: Math.max(Math.ceil(children.length / columns), 1) rows: Math.max(Math.ceil(children.length / columns), 1)
anchors.rightMargin: 8 anchors.rightMargin: rowSpacing
anchors.leftMargin: 8 anchors.leftMargin: rowSpacing
anchors.bottomMargin: 8 anchors.bottomMargin : 90
anchors.topMargin: 8 anchors.topMargin: Math.floor( gamesScroller.width / 100 * 1.5)
rowSpacing: 15 rowSpacing:Math.floor( gamesScroller.width / 100 * 1.5)
columnSpacing: rowSpacing columnSpacing: rowSpacing
Repeater { Repeater {
// Layout.fillHeight: true
// Layout.fillWidth: true
model: core_app.games model: core_app.games
Game { Game {
gameTitle: model.name gameTitle: model.name
gameExec: model.exec gameExec: model.exec
gameIcon: model.icon gameIcon: model.icon
Layout.bottomMargin : (index - index % gamesGrid.columns)/ gamesGrid.columns === gamesGrid.rows-1 ? gamesGrid.rowSpacing*2 : 0
// Layout.fillWidth: true onFocusChanged: if(focus) { gamesScroller.scrollToY(y); }
// Layout.preferredWidth: 1000 Layout.preferredWidth: (gamesScroller.width - (gamesGrid.columns +1)* gamesGrid.rowSpacing) / gamesGrid.columns
//width: parent.width / 4
Layout.preferredWidth: (gamesScroller.width) / gamesGrid.columns - gamesGrid.rowSpacing
Layout.preferredHeight: Layout.preferredWidth / 2 * 3 Layout.preferredHeight: Layout.preferredWidth / 2 * 3
// icon: core_app.games.icon
// exec: core_app.games.exec
} }
} }
} }
} }
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
View file @ 84a4f398
var backColor = "red"; var backColor = "red";
\ No newline at end of file var backgroundColor = "#1b262c";
qml/constants/tabs.js
View file @ 84a4f398
var systemManagementTab = "systemManagement"; var systemManagementTab = "System";
var gamesTab = "games"; var gamesTab = "Games";
\ No newline at end of file
qml/delegates/Game.qml
View file @ 84a4f398
...@@ -3,6 +3,7 @@ import "../constants/scene.js" as SceneConstants ...@@ -3,6 +3,7 @@ import "../constants/scene.js" as SceneConstants
//import "../components/" as C //import "../components/" as C
import QtQuick.Controls as C import QtQuick.Controls as C
// Подключить для работы с типом объекта LinearGradient
C.Button { C.Button {
...@@ -12,20 +13,98 @@ C.Button { ...@@ -12,20 +13,98 @@ C.Button {
id: game id: game
text: "" text: ""
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;
}
}
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 {
// color: "#efefef" NumberAnimation{
//radius: 5 target: rect; property: "border.width"
// border.width: 1 duration: 100
to: Math.max(game.width / 100 * 4,4) // пока x не будет равно 250
easing.type: Easing.InOutQuad
}
NumberAnimation {target: rect; property: "border.width"; duration: 100 }
onClicked: function(){
// console.log(game.title);
gameInfoScene.title = game.gameTitle;
gameInfoScene.icon = game.gameIcon;
gameInfoScene.exec = game.gameExec;
window.scene = SceneConstants.gameInfoScene; }
},
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 { Image {
id: image id: image
anchors.left: parent.left anchors.left: parent.left
...@@ -33,28 +112,44 @@ C.Button { ...@@ -33,28 +112,44 @@ C.Button {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
source: game.gameIcon source: game.gameIcon
// anchors.rightMargin: 8
// anchors.bottomMargin: 47
// anchors.leftMargin: 8
// anchors.topMargin: 8
fillMode: Image.PreserveAspectFit 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
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)
}
}
} }
// Text {
// id: title
// y: 439
// height: 33
// color: "#e23f3f"
// 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
// }
} }
qml/scenes/HomeScene.qml
View file @ 84a4f398
...@@ -12,8 +12,8 @@ Rectangle { ...@@ -12,8 +12,8 @@ Rectangle {
Rectangle { Rectangle {
id: rectangle id: rectangle
height: 64 height: parent.height/100 * 5
color: "#2b2b2b" color: "black"
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
...@@ -28,7 +28,7 @@ Rectangle { ...@@ -28,7 +28,7 @@ Rectangle {
anchors.right: parent.right anchors.right: parent.right
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.topMargin: 64 anchors.topMargin: rectangle.height
anchors.bottomMargin: 0 anchors.bottomMargin: 0
anchors.leftMargin: 0 anchors.leftMargin: 0
anchors.rightMargin: 0 anchors.rightMargin: 0
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment