Commit 7fb96144 authored by Timothée Giet's avatar Timothée Giet
Browse files

chess, layout refactoring

improve and simplify the layout
make sure that the buttons are always visible,
and that nothing is overlapping.

There is still a not-optimal corner-case if the screen is horizontal but almost square
AND the bar is hidden, but in that case user should just not hide the bar...
I believe it works good for all practical use-cases like this.
parent 03149e50
......@@ -5,6 +5,7 @@
* Authors:
* Bruno Coudoin <bruno.coudoin@gcompris.net> (GTK+ version)
* Bruno Coudoin <bruno.coudoin@gcompris.net> (Qt Quick port)
* Timothée Giet <animtim@gmail.com> (big layout refactoring)
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
......@@ -69,12 +70,9 @@ ActivityBase {
property alias background: background
property alias bar: bar
property alias bonus: bonus
property int barHeightAddon: ApplicationSettings.isBarHidden ? 1 : 3
property var barHeightAddon: ApplicationSettings.isBarHidden ? textMessage.height : bar.height
property bool isPortrait: (background.height >= background.width)
property int cellSize: items.isPortrait ?
Math.min((background.width - numbers.childrenRect.width) / (8 + 2),
(background.height - controls.height - letters.childrenRect.height) / (8 + barHeightAddon)) :
Math.min((background.width - numbers.childrenRect.width) / (8 + 2), (background.height - letters.childrenRect.height) / (8.5 + barHeightAddon))
property int cellSize: boardBg.width * 0.1
property var fen: activity.fen
property bool twoPlayer: activity.twoPlayers
property bool difficultyByLevel: activity.difficultyByLevel
......@@ -99,39 +97,13 @@ ActivityBase {
onStart: { Activity.start(items) }
onStop: { Activity.stop() }
Grid {
anchors {
top: parent.top
topMargin: items.isPortrait ? 0 : items.cellSize
leftMargin: 10 * ApplicationInfo.ratio
rightMargin: 10 * ApplicationInfo.ratio
}
columns: (items.isPortrait==true)?1:3
rows: (items.isPortrait==true)?2:1
width: (items.isPortrait==true)?undefined:background.width
anchors.horizontalCenter: parent.horizontalCenter
spacing: 10
horizontalItemAlignment: Grid.AlignHCenter
verticalItemAlignment: Grid.AlignVCenter
Column {
id: controls
anchors {
leftMargin: 10
rightMargin: 10
}
z: 20
width: items.isPortrait ?
parent.width :
Math.max(undo.width * 1.2,
Math.min(
(background.width * 0.9 - undo.width - chessboard.width),
(background.width - chessboard.width) / 2))
GCText {
id: textMessage
z: 20
color: items.isWarningMessage ? "red" : "white"
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
anchors.top: parent.top
width: layoutArea.width
fontSize: smallSize
text: items.message
horizontalAlignment: Text.AlignHCenter
......@@ -139,11 +111,13 @@ ActivityBase {
}
Grid {
spacing: 60 * ApplicationInfo.ratio
id: controls
z: 20
spacing: (boardBg.width - buttonSize * 4) * 0.25
columns: items.isPortrait ? 4 : 1
anchors.horizontalCenter: parent.horizontalCenter
horizontalItemAlignment: Grid.AlignHCenter
verticalItemAlignment: Grid.AlignVCenter
property int buttonSize: undo.width
Button {
id: undo
......@@ -260,12 +234,73 @@ ActivityBase {
onClicked: chessboard.swap()
}
}
Rectangle {
id: layoutArea
width: background.width
height: background.height - textMessage.height - items.barHeightAddon * 1.1
opacity: 0
anchors.horizontalCenter: background.horizontalCenter
}
states: [
State {
name: "portaitLayout"; when: items.isPortrait
PropertyChanges {
target: layoutArea
width: background.width * 0.86
height: background.height - textMessage.height - bar.height * 1.1 - controls.height
}
PropertyChanges {
target: controls
width:layoutArea.width
height: controls.buttonSize * 1.2
anchors.leftMargin: controls.spacing * 0.5
anchors.topMargin: 0
}
AnchorChanges {
target: layoutArea
anchors.top: controls.bottom
}
AnchorChanges {
target: controls
anchors.top: textMessage.bottom
anchors.left: boardBg.left
anchors.right: undefined
}
},
State {
name: "horizontalLayout"; when: !items.isPortrait
PropertyChanges {
target: layoutArea
width: background.width
height: background.height - textMessage.height - items.barHeightAddon * 1.1
}
PropertyChanges {
target: controls
width: controls.buttonSize * 1.2
height: layoutArea.height
anchors.leftMargin: 0
anchors.topMargin: controls.spacing * 0.5
}
AnchorChanges {
target: layoutArea
anchors.top: textMessage.bottom
}
AnchorChanges {
target: controls
anchors.top: boardBg.top
anchors.left: undefined
anchors.right: boardBg.left
}
}
]
Rectangle {
id: boardBg
width: items.cellSize * 8.2
width: Math.min(layoutArea.width, layoutArea.height)
height: boardBg.width
anchors.centerIn: layoutArea
z: 08
color: "#452501"
......@@ -316,7 +351,7 @@ ActivityBase {
onTriggered: coordsOpacity = 1
}
Grid {
Item {
id: letters
anchors.left: chessboard.left
anchors.top: chessboard.bottom
......@@ -330,10 +365,12 @@ ActivityBase {
y: items.cellSize * Math.floor(index / 8)
text: modelData
color: "#CBAE7B"
font.pointSize: NaN
font.pixelSize: items.cellSize * 0.5
}
}
}
Grid {
Item {
id: numbers
anchors.left: chessboard.right
anchors.top: chessboard.top
......@@ -346,6 +383,8 @@ ActivityBase {
y: items.cellSize * (index % 8) + (items.cellSize/2-height/2)
text: modelData
color: "#CBAE7B"
font.pointSize: NaN
font.pixelSize: items.cellSize * 0.5
}
}
}
......@@ -361,7 +400,6 @@ ActivityBase {
border.width: items.cellSize * 0.1
}
}
}
Repeater {
id: squares
......
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