Commit 94ca84c1 authored by Ulf Hermann's avatar Ulf Hermann
Browse files

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's avatarAlessandro Portale <alessandro.portale@qt.io>
parent 15fbfaf2
......@@ -162,6 +162,16 @@ Welcome_DividerColor=ff555555
Welcome_HoverColor=ff444444
Welcome_LinkColor=ff5caa15
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=ff444444
Timeline_DividerColor=ff555555
Timeline_HighlightColor=ff3099dc
Timeline_PanelBackgroundColor=ff808080
Timeline_PanelHeaderColor=alternateBackground
Timeline_HandleColor=alternateBackground
Timeline_RangeColor=selectedBackground
VcsBase_FileStatusUnknown_TextColor=text
VcsBase_FileAdded_TextColor=ff00ff00
VcsBase_FileModified_TextColor=ff8ee0ff
......
......@@ -153,6 +153,16 @@ Welcome_DividerColor=ffd6d6d6
Welcome_HoverColor=ffe8e8e8
Welcome_LinkColor=ff5caa15
Timeline_TextColor=darkText
Timeline_BackgroundColor1=ffffffff
Timeline_BackgroundColor2=fff6f6f6
Timeline_DividerColor=ffd6d6d6
Timeline_HighlightColor=ff71b2db
Timeline_PanelBackgroundColor=ffd6d6d6
Timeline_PanelHeaderColor=ff3d3d3d
Timeline_HandleColor=ff3d3d3d
Timeline_RangeColor=66000000
VcsBase_FileStatusUnknown_TextColor=ff000000
VcsBase_FileAdded_TextColor=ff00aa00
VcsBase_FileModified_TextColor=ff0000ee
......
......@@ -167,6 +167,16 @@ Welcome_DividerColor=ff555555
Welcome_HoverColor=ff444444
Welcome_LinkColor=ff5caa15
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=ff444444
Timeline_DividerColor=ff555555
Timeline_HighlightColor=ff3099dc
Timeline_PanelBackgroundColor=ff808080
Timeline_PanelHeaderColor=alternateBackground
Timeline_HandleColor=alternateBackground
Timeline_RangeColor=selectedBackground
VcsBase_FileStatusUnknown_TextColor=text
VcsBase_FileAdded_TextColor=ff00ff00
VcsBase_FileModified_TextColor=ff8ee0ff
......
......@@ -164,6 +164,16 @@ Welcome_DividerColor=ffd6d6d6
Welcome_HoverColor=fff6f6f6
Welcome_LinkColor=ff5caa15
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=fff6f6f6
Timeline_DividerColor=ffd6d6d6
Timeline_HighlightColor=ff3099dc
Timeline_PanelBackgroundColor=ffd6d6d6
Timeline_PanelHeaderColor=ff888888
Timeline_HandleColor=ff888888
Timeline_RangeColor=selectedBackground
VcsBase_FileStatusUnknown_TextColor=ff000000
VcsBase_FileAdded_TextColor=ff00aa00
VcsBase_FileModified_TextColor=ff0000ee
......
......@@ -163,6 +163,16 @@ Welcome_DividerColor=ffd6d6d6
Welcome_HoverColor=fff6f6f6
Welcome_LinkColor=ff5caa15
Timeline_TextColor=text
Timeline_BackgroundColor1=normalBackground
Timeline_BackgroundColor2=fff6f6f6
Timeline_DividerColor=ffd6d6d6
Timeline_HighlightColor=ff71b2db
Timeline_PanelBackgroundColor=ffd6d6d6
Timeline_PanelHeaderColor=alternateBackground
Timeline_HandleColor=alternateBackground
Timeline_RangeColor=selectedBackground
VcsBase_FileStatusUnknown_TextColor=ff000000
VcsBase_FileAdded_TextColor=ff00aa00
VcsBase_FileModified_TextColor=ff0000ee
......
......@@ -81,11 +81,13 @@ Item {
TimelineText {
id: txt
x: 5
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: notesButton.visible ? notesButton.left : notesButton.right
text: labelContainer.text
color: "#232323"
color: creatorTheme.PanelTextColorLight
height: model ? model.defaultRowHeight : 0
width: 140
verticalAlignment: Text.AlignVCenter
elide: Text.ElideRight
}
......@@ -124,11 +126,10 @@ Item {
}
}
ToolButton {
ImageToolButton {
id: notesButton
anchors.verticalCenter: txt.verticalCenter
anchors.right: expandButton.left
implicitWidth: 17
implicitHeight: txt.height - 1
property var eventIds: []
property var texts: []
......@@ -154,7 +155,7 @@ Item {
}
visible: eventIds.length > 0
iconSource: "ico_note.png"
imageSource: "image://icons/note"
tooltip: texts.join("\n");
onClicked: {
if (++currentNote >= eventIds.length)
......@@ -163,14 +164,13 @@ Item {
}
}
ToolButton {
ImageToolButton {
id: expandButton
anchors.verticalCenter: txt.verticalCenter
anchors.right: parent.right
implicitWidth: 17
implicitHeight: txt.height - 1
enabled: expanded || (model && !model.empty)
iconSource: expanded ? "arrow_down.png" : "arrow_right.png"
imageSource: expanded ? "image://icons/close_split" : "image://icons/split"
tooltip: expanded ? qsTr("Collapse category") : qsTr("Expand category")
onClicked: model.expanded = !expanded
}
......@@ -180,7 +180,7 @@ Item {
property int visualIndex: labelContainer.visualIndex
width: labelContainer.width
height: 0
color: "black"
color: creatorTheme.PanelStatusBarBackgroundColor
opacity: 0.5
anchors.left: parent.left
......@@ -219,7 +219,7 @@ Item {
id: draggerText
visible: parent.Drag.active
x: txt.x
color: "white"
color: creatorTheme.PanelTextColorLight
width: txt.width
height: txt.height
verticalAlignment: txt.verticalAlignment
......
......@@ -49,7 +49,7 @@ Rectangle {
content.scroll();
}
color: "#dcdcdc"
color: creatorTheme.Timeline_BackgroundColor1
// ***** connections with external objects
Connections {
......@@ -161,7 +161,7 @@ Rectangle {
contentY: content.contentY
selectedModel: root.selectedModel
selectedItem: root.selectedItem
color: root.color
color: creatorTheme.PanelStatusBarBackgroundColor
modelProxy: timelineModelAggregator
zoomer: zoomControl
reverseSelect: shiftPressed
......@@ -368,18 +368,10 @@ Rectangle {
}
}
Rectangle {
anchors.left: buttonsBar.right
anchors.bottom: overview.top
anchors.top: parent.top
width: 1
color: "#B0B0B0"
}
Rectangle {
id: zoomSliderToolBar
objectName: "zoomSliderToolBar"
color: "#9b9b9b"
color: creatorTheme.Timeline_PanelBackgroundColor
enabled: buttonsBar.enabled
visible: false
width: buttonsBar.width
......
......@@ -29,7 +29,7 @@ import TimelineOverviewRenderer 1.0
Rectangle {
id: overview
objectName: "Overview"
color: parent.color
color: creatorTheme.Timeline_BackgroundColor2
property QtObject modelProxy
property QtObject zoomer
......@@ -78,13 +78,9 @@ Rectangle {
anchors.left: parent.left
anchors.right: parent.right
textMargin: 2
bottomBorderHeight: 0
topBorderHeight: 1
height: 10
fontSize: 6
labelsHeight: 10
color1: "#cccccc"
color2: "#cccccc"
windowStart: zoomer.traceStart
alignedWindowStart: zoomer.traceStart
rangeDuration: zoomer.traceDuration
......@@ -92,7 +88,6 @@ Rectangle {
offsetX: 0
}
Column {
anchors.top: timebar.bottom
anchors.bottom: parent.bottom
......@@ -121,7 +116,7 @@ Rectangle {
}, {});
property int vertSpace: column.height / 7
property color noteColor: "orange"
property color noteColor: creatorTheme.Timeline_HighlightColor
readonly property double spacing: parent.width / zoomer.traceDuration
model: modelProxy.notes ? modelProxy.notes.count : 0
......@@ -187,10 +182,4 @@ Rectangle {
onRangeLeftChanged: overview.updateZoomer()
onRangeRightChanged: overview.updateZoomer()
}
Rectangle {
height: 1
width: parent.width
color: "#858585"
}
}
......@@ -131,9 +131,7 @@ Item {
id: titleBar
width: parent.width
height: 20
color: "#55a3b8"
border.width: 1
border.color: "#a0a0a0"
color: creatorTheme.Timeline_PanelHeaderColor
}
Item {
width: parent.width+1
......@@ -144,9 +142,7 @@ Item {
width: parent.width-1
height: 15
y: -5
color: "#55a3b8"
border.width: 1
border.color: "#a0a0a0"
color: creatorTheme.Timeline_PanelHeaderColor
}
}
......@@ -155,24 +151,21 @@ Item {
id: typeTitle
text: " "+rangeDetails.dialogTitle
font.bold: true
height: 18
y: 2
height: 20
verticalAlignment: Text.AlignVCenter
anchors.left: parent.left
anchors.right: editIcon.left
color: "white"
elide: Text.ElideRight
color: creatorTheme.PanelTextColorLight
}
// Details area
Rectangle {
id: contentArea
color: "white"
color: creatorTheme.Timeline_PanelBackgroundColor
width: parent.width
height: 10 + col.height + (noteEdit.visible ? (noteEdit.height + 5) : 0)
y: 20
border.width: 1
border.color: "#a0a0a0"
//details
Grid {
......@@ -214,7 +207,7 @@ Item {
visible: notes && (text.length > 0 || focus)
width: col.width
wrapMode: Text.Wrap
color: "orange"
color: creatorTheme.Timeline_HighlightColor
font.italic: true
font.pixelSize: typeTitle.font.pixelSize
font.family: typeTitle.font.family
......@@ -250,46 +243,32 @@ Item {
onClicked: rangeDetails.recenterOnItem()
}
Image {
ImageToolButton {
id: editIcon
source: "ico_edit.png"
imageSource: "image://icons/edit"
anchors.top: closeIcon.top
anchors.right: lockIcon.left
anchors.rightMargin: 4
implicitHeight: typeTitle.height
visible: notes
width: 8
height: 12
MouseArea {
anchors.fill: parent
onClicked: noteEdit.focus = true
}
onClicked: noteEdit.focus = true
}
Image {
ImageToolButton {
id: lockIcon
source: locked?"lock_closed.png" : "lock_open.png"
imageSource: "image://icons/lock_" + (locked ? "closed" : "open")
anchors.top: closeIcon.top
anchors.right: closeIcon.left
anchors.rightMargin: 4
width: 8
height: 12
MouseArea {
anchors.fill: parent
onClicked: rangeDetails.toggleSelectionLocked()
}
implicitHeight: typeTitle.height
onClicked: rangeDetails.toggleSelectionLocked()
}
TimelineText {
ImageToolButton {
id: closeIcon
x: col.width + 10
y: 4
text:"X"
color: "white"
MouseArea {
anchors.fill: parent
onClicked: rangeDetails.clearSelection()
}
anchors.right: parent.right
anchors.top: parent.top
implicitHeight: typeTitle.height
imageSource: "image://icons/close_window"
onClicked: rangeDetails.clearSelection()
}
Item {
......@@ -307,7 +286,7 @@ Item {
cursorShape: Qt.SizeHorCursor
}
Rectangle {
color: "#55a3b8"
color: creatorTheme.Timeline_PanelHeaderColor
rotation: 45
width: parent.width * Math.SQRT2
height: parent.height * Math.SQRT2
......
......@@ -30,12 +30,11 @@ Item {
anchors.fill: parent
signal rangeDoubleClicked()
property color handleColor: "#fe869cd1"
property color rangeColor:"#444a64b8"
property color dragColor:"#664a64b8"
property color borderColor:"#cc4a64b8"
property color dragMarkerColor: "#fe4a64b8"
property color singleLineColor: "#fe4a64b8"
property color handleColor: creatorTheme.Timeline_HandleColor
property color rangeColor: creatorTheme.Timeline_RangeColor
property color dragColor: creatorTheme.Timeline_RangeColor
property color borderColor: creatorTheme.Timeline_RangeColor
property color singleLineColor: creatorTheme.Timeline_RangeColor
property alias rangeLeft: leftRange.x
property alias rangeRight: rightRange.x
......@@ -51,7 +50,7 @@ Item {
color: width > 1 ? (dragArea.pressed ? dragColor : rangeColor) : singleLineColor
}
Rectangle {
Item {
id: leftRange
onXChanged: {
......@@ -61,8 +60,6 @@ Item {
x: 0
height: parent.height
width: 1
color: borderColor
Rectangle {
id: leftBorderHandle
......@@ -72,12 +69,11 @@ Item {
color: handleColor
visible: false
Image {
source: "range_handle.png"
x: 2
width: 4
height: 9
fillMode: Image.Tile
y: parent.height / 2 - 4
source: "image://icons/range_handle"
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 1
y: (parent.height - height) / 2
}
}
......@@ -112,13 +108,11 @@ Item {
}
}
Rectangle {
Item {
id: rightRange
x: 1
height: parent.height
width: 1
color: borderColor
Rectangle {
id: rightBorderHandle
......@@ -128,12 +122,11 @@ Item {
color: handleColor
visible: false
Image {
source: "range_handle.png"
x: 2
width: 4
height: 9
fillMode: Image.Tile
y: parent.height / 2 - 4
source: "image://icons/range_handle"
anchors.left: parent.left
anchors.right: parent.right
anchors.margins: 1
y: (parent.height - height) / 2
}
}
......
......@@ -45,14 +45,15 @@ Button {
style: ButtonStyle {
background: Rectangle {
border.width: 1
border.color: "#c8c8c8"
color: "#eaeaea"
border.color: creatorTheme.Timeline_DividerColor
color: creatorTheme.PanelStatusBarBackgroundColor
}
label: TimelineText {
text: button.labelText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight
color: creatorTheme.PanelTextColorLight
}
}
MouseArea {
......
......@@ -76,23 +76,7 @@ Item {
Rectangle {
width: parent.width
height: 20
color: "#4a64b8"
border.width: 1
border.color: "#a0a0a0"
}
Item {
width: parent.width+1
height: 11
y: 10
clip: true
Rectangle {
width: parent.width-1
height: 15
y: -5
color: "#4a64b8"
border.width: 1
border.color: "#a0a0a0"
}
color: creatorTheme.Timeline_PanelHeaderColor
}
//title
......@@ -100,21 +84,18 @@ Item {
id: typeTitle
text: " "+qsTr("Selection")
font.bold: true
height: 18
y: 2
height: 20
verticalAlignment: Text.AlignVCenter
width: parent.width
color: "white"
color: creatorTheme.PanelTextColorLight
}
// Details area
Rectangle {
color: "white"
color: creatorTheme.Timeline_PanelBackgroundColor
width: parent.width
height: col.height + 10
y: 20
border.width: 1
border.color: "#a0a0a0"
Grid {
id: col
x: 10
......@@ -152,16 +133,12 @@ Item {
onClicked: selectionRangeDetails.recenter()
}
TimelineText {
ImageToolButton {
id: closeIcon
x: selectionRangeDetails.width - 14
y: 4
text:"X"
color: "white"
MouseArea {
anchors.fill: parent
anchors.leftMargin: -8
onClicked: selectionRangeDetails.close()
}
imageSource: "image://icons/close_window"
anchors.right: selectionRangeDetails.right
anchors.top: selectionRangeDetails.top
implicitHeight: typeTitle.height
onClicked: selectionRangeDetails.close()
}
}
......@@ -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