From 94ca84c1e4dee197dd3ce42eef88338859abfbd7 Mon Sep 17 00:00:00 2001 From: Ulf Hermann Date: Thu, 28 Jul 2016 12:30:32 +0200 Subject: [PATCH] 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 --- share/qtcreator/themes/dark.creatortheme | 10 +++ share/qtcreator/themes/default.creatortheme | 10 +++ share/qtcreator/themes/flat-dark.creatortheme | 10 +++ .../qtcreator/themes/flat-light.creatortheme | 10 +++ share/qtcreator/themes/flat.creatortheme | 10 +++ src/libs/timeline/qml/CategoryLabel.qml | 22 +++--- src/libs/timeline/qml/MainView.qml | 14 +--- src/libs/timeline/qml/Overview.qml | 15 +---- src/libs/timeline/qml/RangeDetails.qml | 63 ++++++------------ src/libs/timeline/qml/RangeMover.qml | 41 +++++------- src/libs/timeline/qml/RowLabel.qml | 5 +- .../timeline/qml/SelectionRangeDetails.qml | 43 +++--------- src/libs/timeline/qml/TimeDisplay.qml | 53 +++++---------- src/libs/timeline/qml/TimeMarks.qml | 10 ++- src/libs/timeline/qml/TimelineLabels.qml | 10 +-- src/libs/timeline/qml/TimelineText.qml | 1 + src/libs/timeline/qml/arrow_down.png | Bin 140 -> 0 bytes src/libs/timeline/qml/arrow_right.png | Bin 144 -> 0 bytes src/libs/timeline/qml/ico_edit.png | Bin 164 -> 160 bytes src/libs/timeline/qml/ico_edit@2x.png | Bin 0 -> 217 bytes src/libs/timeline/qml/ico_note.png | Bin 117 -> 0 bytes src/libs/timeline/qml/lock_closed.png | Bin 177 -> 147 bytes src/libs/timeline/qml/lock_closed@2x.png | Bin 0 -> 190 bytes src/libs/timeline/qml/lock_open.png | Bin 182 -> 139 bytes src/libs/timeline/qml/lock_open@2x.png | Bin 0 -> 177 bytes src/libs/timeline/qml/notes.frag | 4 +- src/libs/timeline/qml/notes.vert | 4 ++ src/libs/timeline/qml/range_handle.png | Bin 107 -> 117 bytes src/libs/timeline/qml/range_handle@2.png | Bin 0 -> 81 bytes src/libs/timeline/qml/timeline.qrc | 3 - src/libs/timeline/timeline_dependencies.pri | 1 - src/libs/timeline/timelinenotesrenderpass.cpp | 7 ++ src/libs/timeline/timelinetheme.cpp | 21 ++++++ src/libs/utils/theme/theme.h | 11 +++ 34 files changed, 185 insertions(+), 193 deletions(-) delete mode 100644 src/libs/timeline/qml/arrow_down.png delete mode 100644 src/libs/timeline/qml/arrow_right.png create mode 100644 src/libs/timeline/qml/ico_edit@2x.png delete mode 100644 src/libs/timeline/qml/ico_note.png create mode 100644 src/libs/timeline/qml/lock_closed@2x.png create mode 100644 src/libs/timeline/qml/lock_open@2x.png create mode 100644 src/libs/timeline/qml/range_handle@2.png diff --git a/share/qtcreator/themes/dark.creatortheme b/share/qtcreator/themes/dark.creatortheme index a85f026e24e..17db5c9316f 100644 --- a/share/qtcreator/themes/dark.creatortheme +++ b/share/qtcreator/themes/dark.creatortheme @@ -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 diff --git a/share/qtcreator/themes/default.creatortheme b/share/qtcreator/themes/default.creatortheme index 191a2c14e28..d27a55c2348 100644 --- a/share/qtcreator/themes/default.creatortheme +++ b/share/qtcreator/themes/default.creatortheme @@ -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 diff --git a/share/qtcreator/themes/flat-dark.creatortheme b/share/qtcreator/themes/flat-dark.creatortheme index 87a9a21a250..3e26f95dc83 100644 --- a/share/qtcreator/themes/flat-dark.creatortheme +++ b/share/qtcreator/themes/flat-dark.creatortheme @@ -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 diff --git a/share/qtcreator/themes/flat-light.creatortheme b/share/qtcreator/themes/flat-light.creatortheme index 1749565821c..6e7994a73f6 100644 --- a/share/qtcreator/themes/flat-light.creatortheme +++ b/share/qtcreator/themes/flat-light.creatortheme @@ -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 diff --git a/share/qtcreator/themes/flat.creatortheme b/share/qtcreator/themes/flat.creatortheme index 47c93b4ad40..e8dd1b3048f 100644 --- a/share/qtcreator/themes/flat.creatortheme +++ b/share/qtcreator/themes/flat.creatortheme @@ -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 diff --git a/src/libs/timeline/qml/CategoryLabel.qml b/src/libs/timeline/qml/CategoryLabel.qml index dab224082a5..b5a3790529a 100644 --- a/src/libs/timeline/qml/CategoryLabel.qml +++ b/src/libs/timeline/qml/CategoryLabel.qml @@ -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 diff --git a/src/libs/timeline/qml/MainView.qml b/src/libs/timeline/qml/MainView.qml index 1986f7a7223..43c818adc1c 100644 --- a/src/libs/timeline/qml/MainView.qml +++ b/src/libs/timeline/qml/MainView.qml @@ -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 diff --git a/src/libs/timeline/qml/Overview.qml b/src/libs/timeline/qml/Overview.qml index 9db4bdf8bf1..d3f0ca7469e 100644 --- a/src/libs/timeline/qml/Overview.qml +++ b/src/libs/timeline/qml/Overview.qml @@ -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" - } } diff --git a/src/libs/timeline/qml/RangeDetails.qml b/src/libs/timeline/qml/RangeDetails.qml index 6fb2793a98a..3f7a7d405a2 100644 --- a/src/libs/timeline/qml/RangeDetails.qml +++ b/src/libs/timeline/qml/RangeDetails.qml @@ -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 diff --git a/src/libs/timeline/qml/RangeMover.qml b/src/libs/timeline/qml/RangeMover.qml index 8594865bc5b..b7e08526645 100644 --- a/src/libs/timeline/qml/RangeMover.qml +++ b/src/libs/timeline/qml/RangeMover.qml @@ -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 } } diff --git a/src/libs/timeline/qml/RowLabel.qml b/src/libs/timeline/qml/RowLabel.qml index 8e1fbff87b9..b1d03a1e6a7 100644 --- a/src/libs/timeline/qml/RowLabel.qml +++ b/src/libs/timeline/qml/RowLabel.qml @@ -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 { diff --git a/src/libs/timeline/qml/SelectionRangeDetails.qml b/src/libs/timeline/qml/SelectionRangeDetails.qml index 0f8edb3697f..a0180dec656 100644 --- a/src/libs/timeline/qml/SelectionRangeDetails.qml +++ b/src/libs/timeline/qml/SelectionRangeDetails.qml @@ -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() } } diff --git a/src/libs/timeline/qml/TimeDisplay.qml b/src/libs/timeline/qml/TimeDisplay.qml index 13f8aef8237..e85f905bb12 100644 --- a/src/libs/timeline/qml/TimeDisplay.qml +++ b/src/libs/timeline/qml/TimeDisplay.qml @@ -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" - } } diff --git a/src/libs/timeline/qml/TimeMarks.qml b/src/libs/timeline/qml/TimeMarks.qml index d623757b5c2..b5f8dfa5352 100644 --- a/src/libs/timeline/qml/TimeMarks.qml +++ b/src/libs/timeline/qml/TimeMarks.qml @@ -73,7 +73,8 @@ Item { model: timeMarks.rowCount Rectangle { id: row - color: ((index + (startOdd ? 1 : 0)) % 2) ? "#f0f0f0" : "white" + color: ((index + (startOdd ? 1 : 0)) % 2) ? creatorTheme.Timeline_BackgroundColor1 + : creatorTheme.Timeline_BackgroundColor2 anchors.left: rows.left anchors.right: rows.right height: timeMarks.model ? timeMarks.model.rowHeight(index) : 0 @@ -97,7 +98,6 @@ Item { TimelineText { id: scaleTopLabel visible: parent.scaleVisible - color: "#B0B0B0" font.pixelSize: 8 anchors.top: parent.top anchors.leftMargin: 2 @@ -115,9 +115,7 @@ Item { height: row.stepVal * row.height / row.valDiff y: row.height - (index + 1) * height visible: y > scaleTopLabel.height - Text { - renderType: Text.NativeRendering - color: "#B0B0B0" + TimelineText { font.pixelSize: 8 anchors.bottom: parent.bottom anchors.bottomMargin: 2 @@ -131,7 +129,7 @@ Item { anchors.left: parent.left anchors.right: parent.right anchors.bottom: parent.bottom - color: "#B0B0B0" + color: creatorTheme.Timeline_DividerColor } } } diff --git a/src/libs/timeline/qml/TimelineLabels.qml b/src/libs/timeline/qml/TimelineLabels.qml index a11014a8a85..90a2e091a6e 100644 --- a/src/libs/timeline/qml/TimelineLabels.qml +++ b/src/libs/timeline/qml/TimelineLabels.qml @@ -144,7 +144,7 @@ Flickable { Rectangle { opacity: loader.y === 0 ? 0 : 1 - color: "#B0B0B0" + color: creatorTheme.Timeline_DividerColor height: 1 anchors.left: parent.left anchors.right: parent.right @@ -158,12 +158,4 @@ Flickable { model: labelsModel } } - - Rectangle { - anchors.left: parent.left - anchors.right: parent.right - anchors.top: categoryContent.bottom - height: 1 - color: "#B0B0B0" - } } diff --git a/src/libs/timeline/qml/TimelineText.qml b/src/libs/timeline/qml/TimelineText.qml index a989b393556..0a250737f7a 100644 --- a/src/libs/timeline/qml/TimelineText.qml +++ b/src/libs/timeline/qml/TimelineText.qml @@ -30,5 +30,6 @@ Text { font.family: "sans-serif" textFormat: Text.PlainText renderType: Text.NativeRendering + color: creatorTheme.Timeline_TextColor } diff --git a/src/libs/timeline/qml/arrow_down.png b/src/libs/timeline/qml/arrow_down.png deleted file mode 100644 index bbc8ec3c1798b89223f3a4f860c88fb4fc6116a6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 140 zcmeAS@N?(olHy`uVBq!ia0y~yVBiK}MrH;EhRI1!QyCZ-*aCb)Tp1V`8X6iVW$sjA zU|?V>3Gxg6&+v4+ffoY<180FpWHAE+w=f7ZGR&GI!N9;E=jq}Y!f`!0At50nAi-k7 pfe#ND43Gxg6&+v4+ffoY<180FpWHAE+w=f7ZGR&GI!N9mdKI;Vst0NmFkK>z>% diff --git a/src/libs/timeline/qml/ico_edit.png b/src/libs/timeline/qml/ico_edit.png index f235e86c83922ca4211b7edcce3589929da214e0..6d80502020139a25e6aa4220ab80293f202c78b0 100644 GIT binary patch literal 160 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4kiW$h6xih%orFLn2Vh}LpV4%Za?&Yz`(!| z;pyTSqH%ufq=Q@x3LMU}fBfH{GhJY1n&gwM=IOyRB3Dn@k~EiN>nq^-mcX P7#KWV{an^LB{Ts5NBcP@ literal 164 zcmeAS@N?(olHy`uVBq!ia0y~yVBle3U=ZM7V_;xVN}R{ez`($k|H*Y zfq@~?)5S4FT#J{y(i!a&*^H`IfR|HiveD%3m9;CXSLj>zn50q7v VajBY3gMop8!PC{xWt~$(696!{RH6U? literal 0 HcmV?d00001 diff --git a/src/libs/timeline/qml/ico_note.png b/src/libs/timeline/qml/ico_note.png deleted file mode 100644 index fa5c2b5bc957294d486a757e3bb677908b1a8920..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 117 zcmeAS@N?(olHy`uVBq!ia0y~yVBiK}4mJh`hLvl|)fgBU*pj^6T^Rm@;DWu&Co?cG zXnDFghDcma{`3F8Ju_Ftu?~TbU*|h?jvjGflK9poY1qWapKwq>azX(c!(L$?L8ljo S${83K7(8A5T-G@yGywn<9V0&g diff --git a/src/libs/timeline/qml/lock_closed.png b/src/libs/timeline/qml/lock_closed.png index 45b46933569e474a6449286b223a50b7b77cbf7b..aeeee2cbb37deaee2c3e37af4dd182151f0a3e74 100644 GIT binary patch literal 147 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4kiW$h6xih%orFLn2Vh}LpV4%Za?&Yz`(%Z z?djqeqH+H0Bx^1P0}kijivQZnXHSV>X}@Ikvsx%{!j{gRytzCszKkCGxxOvi-NuzN zGv%DvvHrV{-t>40T`X;XQC?Bl{+r=n^*+{Dlcg1s3wb^=FfcH9y85}Sb4q9e00Z_i AegFUf literal 177 zcmeAS@N?(olHy`uVBq!ia0y~yVBle3U=ZM7VPIhB$O!9UU|^{5ba4!kxV-n=Zq614 z5tobC8&xxu#S&5kk0nW`g(*qgoWMFmg0sr3;QHSMFYjf{IDNpyX5y-=mwvdVvaWu$ z`CRUcuQ#6L8!qbYxR6wHb>>~A&W;HYZ#FqkkvR9Y;Zq0iuHcdkC8xx1r`K>y)?QX{ jxcdi@n diff --git a/src/libs/timeline/qml/lock_closed@2x.png b/src/libs/timeline/qml/lock_closed@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..99bb0fc85da3b38d90afe658fb0cae0e282a633b GIT binary patch literal 190 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4kiW$hCdQ-7c($0Fc&*{hH!9j+2t3#ww6?7+qR?!}^m_a=D0(^LEM=G_I}Z-hNYh_MWSAmMSYr u-<^2ZmB--eS7k6adYR^ z+0z&A-59rGlk>|(M-Crb!F28!TidpEll*v(ey>^;@4r{J#MziN%rfFp%EgwM%kRHS on()NS(ffbnwe?ADlYTIYREk7qsH>h~U|?YIboFyt=akR{0InNIs{jB1 diff --git a/src/libs/timeline/qml/lock_open@2x.png b/src/libs/timeline/qml/lock_open@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b84580cb24404b464ca5a1976562a94bc8f3c272 GIT binary patch literal 177 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4kiW$hCdQ-7c($0Fc&*{hH!9j+N<#N&AKpa1{unROY3nR^eeU}a(CUM8TdtUPg6r>BBX%51-W1*K!AIw>s-p8Hai zlxrRa9XZ0tUD@bd^DljoN{wc3%BmZN7c6HM`SZ90IxbYdAao<6&^GJf3f991nT}mt e_V~kg1_pj>X_qbzlcNj_3=E#GelF{r5}E+qmO7~b literal 0 HcmV?d00001 diff --git a/src/libs/timeline/qml/notes.frag b/src/libs/timeline/qml/notes.frag index adca087e26b..0f174ca28de 100644 --- a/src/libs/timeline/qml/notes.frag +++ b/src/libs/timeline/qml/notes.frag @@ -23,10 +23,10 @@ ** ****************************************************************************/ -lowp vec4 orange = vec4(1.0, 165.0 / 255.0, 0.0, 1.0); +varying lowp vec4 color; varying lowp float d; void main() { - gl_FragColor = orange * float(d < (2.0 / 3.0) || d > (5.0 / 6.0)); + gl_FragColor = color * float(d < (2.0 / 3.0) || d > (5.0 / 6.0)); } diff --git a/src/libs/timeline/qml/notes.vert b/src/libs/timeline/qml/notes.vert index 5f4bfbd36ca..be3c8700b8c 100644 --- a/src/libs/timeline/qml/notes.vert +++ b/src/libs/timeline/qml/notes.vert @@ -27,6 +27,9 @@ attribute vec4 vertexCoord; attribute float distanceFromTop; uniform mat4 matrix; +uniform vec4 notesColor; + +varying vec4 color; varying float d; void main() @@ -34,5 +37,6 @@ void main() gl_Position = matrix * vertexCoord; gl_Position.z -= 0.1; gl_Position.w = 1.0; + color = notesColor; d = distanceFromTop; } diff --git a/src/libs/timeline/qml/range_handle.png b/src/libs/timeline/qml/range_handle.png index d3cb7952f664fed75b49ca8e6619680702b925cd..9430330342260dcc4182b889ace6cdd150a9d22a 100644 GIT binary patch literal 117 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4kiW$h6xih%orFLn2Vh}LpV4%Za?&Yz`($u z>*?YcqH#X?&;S4S%$g0IjV=zG*u*TlCr%XXx7u;qb6exYXY=H~9)9qF`J@y>e5k1S UCn2LS1_lNOPgg&ebxsLQ0NZIJ$^ZZW literal 107 zcmeAS@N?(olHy`uVBq!ia0y~yU|?ZjVBln7W?*1=?l@sG0|SFlfKP~PVcqEal|5uKcnlq4XQ#=)6*Ac28FdID3qzHmLrI0jEw KKbLh*2~7YUXCIXS diff --git a/src/libs/timeline/qml/range_handle@2.png b/src/libs/timeline/qml/range_handle@2.png new file mode 100644 index 0000000000000000000000000000000000000000..3c954051c618e4b73647bea2e2dc8e2b137d09c0 GIT binary patch literal 81 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;IMg|53hG<6jNCpN52~QWt5RU7~KloXAEIRFZ gc)q=0vAuGTlVS4RxKa)wzYvgGPgg&ebxsLQ0A=Overview.qml SelectionRange.qml SelectionRangeDetails.qml - arrow_down.png - arrow_right.png range_handle.png ico_selectionmode.png ico_selectionmode@2x.png @@ -22,7 +20,6 @@ ico_rangeselection@2x.png ico_rangeselected.png ico_rangeselected@2x.png - ico_note.png ButtonsBar.qml timelineitems.vert timelineitems.frag diff --git a/src/libs/timeline/timeline_dependencies.pri b/src/libs/timeline/timeline_dependencies.pri index 2a17a9cb38e..9985a4e1e74 100644 --- a/src/libs/timeline/timeline_dependencies.pri +++ b/src/libs/timeline/timeline_dependencies.pri @@ -1,4 +1,3 @@ QTC_LIB_NAME = Timeline QTC_LIB_DEPENDS = utils - diff --git a/src/libs/timeline/timelinenotesrenderpass.cpp b/src/libs/timeline/timelinenotesrenderpass.cpp index c5688457a74..79484943070 100644 --- a/src/libs/timeline/timelinenotesrenderpass.cpp +++ b/src/libs/timeline/timelinenotesrenderpass.cpp @@ -27,6 +27,8 @@ #include "timelinerenderstate.h" #include "timelinenotesmodel.h" +#include + namespace Timeline { struct Point2DWithDistanceFromTop { @@ -226,6 +228,7 @@ private: int m_matrix_id; int m_z_range_id; + int m_color_id; }; NotesMaterialShader::NotesMaterialShader() @@ -240,6 +243,9 @@ void NotesMaterialShader::updateState(const RenderState &state, QSGMaterial *, Q if (state.isMatrixDirty()) { program()->setUniformValue(m_matrix_id, state.combinedMatrix()); program()->setUniformValue(m_z_range_id, GLfloat(1.0)); + program()->setUniformValue( + m_color_id, + Utils::creatorTheme()->color(Utils::Theme::Timeline_HighlightColor)); } } @@ -253,6 +259,7 @@ void NotesMaterialShader::initialize() { m_matrix_id = program()->uniformLocation("matrix"); m_z_range_id = program()->uniformLocation("_qt_zRange"); + m_color_id = program()->uniformLocation("notesColor"); } QSGMaterialType *NotesMaterial::type() const diff --git a/src/libs/timeline/timelinetheme.cpp b/src/libs/timeline/timelinetheme.cpp index 8731f2b5acc..3802431a6a8 100644 --- a/src/libs/timeline/timelinetheme.cpp +++ b/src/libs/timeline/timelinetheme.cpp @@ -25,6 +25,7 @@ #include "timelinetheme.h" +#include #include #include #include @@ -74,6 +75,26 @@ public: else if (iconName == QLatin1String("selectionmode")) icon = Utils::Icon({{QLatin1String(":/timeline/ico_selectionmode.png"), Utils::Theme::IconsBaseColor}}); + else if (iconName == QLatin1String("edit")) + icon = Utils::Icon({{QLatin1String(":/timeline/ico_edit.png"), + Utils::Theme::IconsBaseColor}}); + else if (iconName == QLatin1String("lock_open")) + icon = Utils::Icon({{QLatin1String(":/timeline/lock_open.png"), + Utils::Theme::IconsBaseColor}}); + else if (iconName == QLatin1String("lock_closed")) + icon = Utils::Icon({{QLatin1String(":/timeline/lock_closed.png"), + Utils::Theme::IconsBaseColor}}); + else if (iconName == QLatin1String("range_handle")) + icon = Utils::Icon({{QLatin1String(":/timeline/range_handle.png"), + Utils::Theme::IconsBaseColor}}); + else if (iconName == QLatin1String("note")) + icon = Utils::Icons::INFO_TOOLBAR; + else if (iconName == QLatin1String("split")) + icon = Utils::Icons::SPLIT_HORIZONTAL_TOOLBAR; + else if (iconName == QLatin1String("close_split")) + icon = Utils::Icons::CLOSE_SPLIT_TOP; + else if (iconName == QLatin1String("close_window")) + icon = Utils::Icons::CLOSE_TOOLBAR; const QSize iconSize(16, 16); const QPixmap result = icon.icon().pixmap(iconSize, iconMode); diff --git a/src/libs/utils/theme/theme.h b/src/libs/utils/theme/theme.h index 188ed0cc9ee..5980bf16718 100644 --- a/src/libs/utils/theme/theme.h +++ b/src/libs/utils/theme/theme.h @@ -255,6 +255,17 @@ public: Welcome_LinkColor, Welcome_HoverColor, + /* Timeline Library */ + Timeline_TextColor, + Timeline_BackgroundColor1, + Timeline_BackgroundColor2, + Timeline_DividerColor, + Timeline_HighlightColor, + Timeline_PanelBackgroundColor, + Timeline_PanelHeaderColor, + Timeline_HandleColor, + Timeline_RangeColor, + /* VcsBase Plugin */ VcsBase_FileStatusUnknown_TextColor, VcsBase_FileAdded_TextColor,