Timeline: Add some theming

While we're at it, also remove all the weird borders and use standard
icons. The timeline doesn't have a "baroque" theme, it's all flat for
now. If the need arises we can add some gradients here and there.

Change-Id: Ia9ce22d7f412c4999feca2284959be4d734267ac
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>
This commit is contained in:
Ulf Hermann
2016-07-28 12:30:32 +02:00
parent 15fbfaf2e9
commit 94ca84c1e4
34 changed files with 185 additions and 193 deletions

View File

@@ -31,13 +31,9 @@ Item {
property double windowStart
property double rangeDuration
property int topBorderHeight: 2
property int bottomBorderHeight: 1
property int textMargin: 5
property int labelsHeight: 24
property int fontSize: 8
property color color1: "#E6E6E6"
property color color2: "white"
property int initialBlockLength: 120
property double spacing: width / rangeDuration
@@ -77,6 +73,14 @@ Item {
return m + "m" + s + "s";
}
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
height: timeDisplay.labelsHeight
color: creatorTheme.PanelStatusBarBackgroundColor
}
Item {
x: Math.floor(firstBlock * timeDisplay.pixelsPerBlock - timeDisplay.offsetX)
y: 0
@@ -108,7 +112,7 @@ Item {
property double blockStartTime: block * timeDisplay.timePerBlock +
timeDisplay.alignedWindowStart
Rectangle {
TimelineText {
id: timeLabel
anchors.top: parent.top
@@ -116,19 +120,12 @@ Item {
anchors.right: parent.right
height: timeDisplay.labelsHeight
color: (Math.round(column.block + timeDisplay.alignedWindowStart /
timeDisplay.timePerBlock) % 2) ? color1 : color2;
TimelineText {
id: labelText
font.pixelSize: timeDisplay.fontSize
anchors.fill: parent
anchors.leftMargin: timeDisplay.textMargin
anchors.bottomMargin: timeDisplay.textMargin
verticalAlignment: Text.AlignBottom
text: prettyPrintTime(column.blockStartTime, timeDisplay.rangeDuration)
visible: width > 0
}
font.pixelSize: timeDisplay.fontSize
anchors.leftMargin: timeDisplay.textMargin
verticalAlignment: Text.AlignVCenter
text: prettyPrintTime(column.blockStartTime, timeDisplay.rangeDuration)
visible: width > 0
color: creatorTheme.PanelTextColorLight
}
Row {
@@ -146,7 +143,7 @@ Item {
Rectangle {
visible: column.stableIndex !== 0 || (-row.x < parent.x + x)
color: "#CCCCCC"
color: creatorTheme.Timeline_DividerColor
width: 1
anchors.top: parent.top
anchors.bottom: parent.bottom
@@ -157,7 +154,7 @@ Item {
}
Rectangle {
color: "#B0B0B0"
color: creatorTheme.Timeline_DividerColor
width: 1
anchors.top: parent.top
anchors.bottom: parent.bottom
@@ -166,20 +163,4 @@ Item {
}
}
}
Rectangle {
height: topBorderHeight
anchors.left: parent.left
anchors.right: parent.right
y: labelsHeight - topBorderHeight
color: "#B0B0B0"
}
Rectangle {
height: bottomBorderHeight
anchors.left: parent.left
anchors.right: parent.right
anchors.top: row.bottom
color: "#B0B0B0"
}
}