Skip to content

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

Changing the margins

parent 9500e2d5
Show whitespace changes
Inline Side-by-side
Showing with 234 additions and 131 deletions
qml/components/Button.qml
View file @ 84a4f398
......@@ -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
View file @ 84a4f398
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 {
......@@ -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,114 +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: 228 + 15// + gamesGrid.rowSpacing*2
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
//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
columns: 6
rows: Math.max(Math.ceil(children.length / columns), 1)
anchors.rightMargin: 8
anchors.leftMargin: 8
anchors.bottomMargin: 8
anchors.topMargin: 8
rowSpacing: 15
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
// Layout.fillWidth: true
// Layout.preferredWidth: 1000
//width: parent.width / 4
Layout.preferredWidth: (gamesScroller.width) / gamesGrid.columns - gamesGrid.rowSpacing
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
// 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 backgroundColor = "#1b262c";
qml/constants/tabs.js
View file @ 84a4f398
var systemManagementTab = "systemManagement";
var gamesTab = "games";
\ No newline at end of file
var systemManagementTab = "System";
var gamesTab = "Games";
qml/delegates/Game.qml
View file @ 84a4f398
......@@ -3,6 +3,7 @@ import "../constants/scene.js" as SceneConstants
//import "../components/" as C
import QtQuick.Controls as C
// Подключить для работы с типом объекта LinearGradient
C.Button {
......@@ -12,19 +13,97 @@ C.Button {
id: game
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;
}
}
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
......@@ -33,28 +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
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: "#e23f3f"
// text: game.gameTitle
// anchors.left: parent.left
// anchors.right: parent.right
// anchors.bottom: parent.bottom
// font.pixelSize: 22
// horizontalAlignment: Text.AlignHCenter
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: 8
// }
anchors.bottomMargin: Math.max(game.width / 100 * 8,10)
}
}
}
}
qml/scenes/HomeScene.qml
View file @ 84a4f398
......@@ -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
......
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