1
0
mirror of https://bitbucket.org/librepilot/librepilot.git synced 2025-02-20 10:54:14 +01:00

Welcome page UI tweaks

To make it closer to proposed design.

* Aligned the background OP logo to the bottom-right corner
* Don't upscale the OP logo
* Fixed width of community panel
* Changed the vertical layout of icons and community panel
* Fixed color of community panel titles
* Use styled text for next containing &,
   this fixes rendering but "..." are not displayed
This commit is contained in:
Dmytro Poplavskiy 2012-02-25 17:22:08 +10:00 committed by David Ankers
parent a16c392bc6
commit 3d05256a36
4 changed files with 29 additions and 13 deletions

View File

@ -2,7 +2,7 @@
import QtQuick 1.1
Item {
width: 600
width: background.sourceSize.width
height: 300
BorderImage {
@ -32,7 +32,7 @@ Item {
anchors.verticalCenter: parent.verticalCenter
anchors.left: newsPanel.right
anchors.margins: 16
color: "#A0A0B0"
color: "#A0A0A0"
}
SitesPanel {

View File

@ -12,7 +12,7 @@ Item {
id: header
text: "Project News"
width: parent.width
color: "#303060"
color: "#44515c"
font {
pointSize: 14
weight: Font.Bold
@ -50,16 +50,18 @@ Item {
Text {
text: title
width: view.width
textFormat: text.indexOf("&") > 0 ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
font.bold: true
color: mouseArea.containsMouse ? "darkblue" : "black"
color: mouseArea.containsMouse ? "#224d81" : "black"
}
Text {
text: description
width: view.width
textFormat: text.indexOf("&") > 0 ? Text.StyledText : Text.PlainText
elide: Text.ElideRight
color: mouseArea.containsMouse ? "darkblue" : "black"
color: mouseArea.containsMouse ? "#224d81" : "black"
}
}

View File

@ -12,7 +12,7 @@ Item {
id: header
text: "OpenPilot Websites"
width: parent.width
color: "#303060"
color: "#44515c"
font {
pointSize: 14
weight: Font.Bold
@ -47,7 +47,7 @@ Item {
weight: Font.Bold
}
color: mouseArea.containsMouse ? "darkblue" : "black"
color: mouseArea.containsMouse ? "#224d81" : "black"
MouseArea {
id: mouseArea

View File

@ -1,6 +1,7 @@
import QtQuick 1.1
Rectangle {
id: container
width: 1024
height: 768
@ -9,30 +10,43 @@ Rectangle {
Image {
id: bg
source: "images/welcome-op-bg.png"
anchors.fill: parent
fillMode: Image.PreserveAspectFit
anchors.bottom: parent.bottom
anchors.right: parent.right
// The background OP logo is downscalled to fit the page
// but not upscalled if page is larger
property real scale: Math.min(parent.width/sourceSize.width,
parent.height/sourceSize.height,
1.0)
width: scale*sourceSize.width
height: scale*sourceSize.height
smooth: true
}
Column {
anchors.centerIn: parent
anchors.horizontalCenter: parent.horizontalCenter
// distribute a vertical space between the icons blocks an community widget as:
// top - 48% - Icons - 27% - CommunityWidget - 25% - bottom
y: (parent.height - buttons.height - communityPanel.height) * 0.48
width: parent.width
spacing: 32
spacing: (parent.height - buttons.height - communityPanel.height) * 0.27
Row {
//anchors.bottom: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
spacing: 16
Image {
source: "images/welcome-op-logo.png"
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -2 //it looks better aligned to icons grid
}
Grid {
id: buttons
columns: 3
spacing: 4
anchors.verticalCenter: parent.verticalCenter
WelcomePageButton {
baseIconName: "flightdata"
@ -73,8 +87,8 @@ Rectangle {
} // images row
CommunityPanel {
id: communityPanel
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width*0.8
}
}
}