Tracing: port to QtQuickControls2

Controls1 is deprecated. Also, we can easily show tooltips for all
buttons this way.

Change-Id: I08c3e49139aa31f83e6c7585d8e33ee0140ce5b0
Reviewed-by: Milian Wolff <milian.wolff@kdab.com>
This commit is contained in:
Ulf Hermann
2019-06-28 11:33:06 +02:00
parent 163d5c5ce8
commit bcc62b6f72
9 changed files with 190 additions and 207 deletions

View File

@@ -24,9 +24,8 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.3
import TimelineTheme 1.0
@@ -55,18 +54,11 @@ ToolBar {
return rangeButton.checked
}
style: ToolBarStyle {
padding {
left: 0
right: 0
top: 0
bottom: 0
}
background: Rectangle {
anchors.fill: parent
color: Theme.color(Theme.PanelStatusBarBackgroundColor)
}
}
RowLayout {
spacing: 0
@@ -77,7 +69,7 @@ ToolBar {
Layout.fillHeight: true
imageSource: "image://icons/prev"
tooltip: qsTr("Jump to previous event.")
ToolTip.text: qsTr("Jump to previous event.")
onClicked: buttons.jumpToPrev()
}
@@ -86,7 +78,7 @@ ToolBar {
Layout.fillHeight: true
imageSource: "image://icons/next"
tooltip: qsTr("Jump to next event.")
ToolTip.text: qsTr("Jump to next event.")
onClicked: buttons.jumpToNext()
}
@@ -95,7 +87,7 @@ ToolBar {
Layout.fillHeight: true
imageSource: "image://icons/zoom"
tooltip: qsTr("Show zoom slider.")
ToolTip.text: qsTr("Show zoom slider.")
checkable: true
checked: false
onCheckedChanged: buttons.zoomControlChanged()
@@ -106,7 +98,7 @@ ToolBar {
Layout.fillHeight: true
imageSource: "image://icons/" + (checked ? "rangeselected" : "rangeselection");
tooltip: qsTr("Select range.")
ToolTip.text: qsTr("Select range.")
checkable: true
checked: false
onCheckedChanged: buttons.rangeSelectChanged()
@@ -117,7 +109,7 @@ ToolBar {
Layout.fillHeight: true
imageSource: "image://icons/selectionmode"
tooltip: qsTr("View event information on mouseover.")
ToolTip.text: qsTr("View event information on mouseover.")
checkable: true
checked: false
onCheckedChanged: buttons.lockChanged()

View File

@@ -24,8 +24,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.2
import TimelineTheme 1.0
@@ -57,11 +56,11 @@ Item {
Button {
// dummy button to display a tooltip
anchors.fill: txt
tooltip: labelContainer.text
style: ButtonStyle {
ToolTip.text: labelContainer.text
ToolTip.visible: enabled && hovered
ToolTip.delay: 1000
background: Item {}
}
}
MouseArea {
id: dragArea
@@ -170,7 +169,7 @@ Item {
visible: eventIds.length > 0
imageSource: "image://icons/note"
tooltip: texts.join("\n");
ToolTip.text: texts.join("\n");
onClicked: {
if (++currentNote >= eventIds.length)
currentNote = 0;
@@ -185,7 +184,7 @@ Item {
implicitHeight: txt.height - 1
enabled: expanded || (model && !model.empty)
imageSource: expanded ? "image://icons/close_split" : "image://icons/split"
tooltip: expanded ? qsTr("Collapse category") : qsTr("Expand category")
ToolTip.text: expanded ? qsTr("Collapse category") : qsTr("Expand category")
onClicked: model.expanded = !expanded
}

View File

@@ -28,7 +28,7 @@ import TimelineTheme 1.0
import QtQml 2.2
import QtQuick 2.9
import QtQuick.Controls 1.3
import QtQuick.Controls 2.3
ScrollView {
id: root
@@ -322,9 +322,11 @@ ScrollView {
width: implicitWidth + 20
text: qsTr("Visualize %1").arg(trRoleNames[root.sizeRole])
onClicked: modesMenu.open()
menu: Menu {
Menu {
id: modesMenu
y: parent.height
Instantiator {
model: root.modes
MenuItem {

View File

@@ -24,8 +24,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.0
import TimelineTheme 1.0
@@ -34,6 +33,9 @@ ToolButton {
property string imageSource
ToolTip.visible: enabled && hovered
ToolTip.delay: 1000
Image {
source: parent.enabled ? parent.imageSource : parent.imageSource + "/disabled"
width: 16
@@ -42,13 +44,11 @@ ToolButton {
smooth: false
}
style: ButtonStyle {
background: Rectangle {
color: (control.checked || control.pressed)
color: (parent.checked || parent.pressed)
? Theme.color(Theme.FancyToolButtonSelectedColor)
: control.hovered
: parent.hovered
? Theme.color(Theme.FancyToolButtonHoverColor)
: "#00000000"
}
}
}

View File

@@ -24,8 +24,7 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.0
import QtQuick.Controls 2.0
import TimelineTheme 1.0
@@ -73,7 +72,7 @@ Rectangle {
rangeDetails.hide();
selectionRangeMode = false;
zoomSlider.externalUpdate = true;
zoomSlider.value = zoomSlider.minimumValue;
zoomSlider.value = zoomSlider.from;
}
// This is called from outside to synchronize the timeline to other views
@@ -192,6 +191,7 @@ Rectangle {
TimelineContent {
id: content
anchors.left: buttonsBar.right
anchors.top: buttonsBar.bottom
anchors.bottom: overview.top
@@ -255,13 +255,13 @@ Rectangle {
onReleased: {
if (selectionRange.creationState === selectionRange.creationSecondLimit) {
content.stayInteractive = true;
content.interactive = true;
selectionRange.creationState = selectionRange.creationFinished;
}
}
onPressed: {
if (selectionRange.creationState === selectionRange.creationFirstLimit) {
content.stayInteractive = false;
content.interactive = false;
selectionRange.setPos(selectionRangeControl.mouseX + content.contentX);
selectionRange.creationState = selectionRange.creationSecondLimit;
}
@@ -281,12 +281,12 @@ Rectangle {
flickableDirection: Flickable.HorizontalFlick
clip: true
interactive: false
x: content.x + content.flickableItem.x
y: content.y + content.flickableItem.y
x: content.x
y: content.y
height: (selectionRangeMode &&
selectionRange.creationState !== selectionRange.creationInactive) ?
content.flickableItem.height : 0
width: content.flickableItem.width
content.height : 0
width: content.width
contentX: content.contentX
contentWidth: content.contentWidth
@@ -320,11 +320,11 @@ Rectangle {
}
TimelineRulers {
contentX: buttonsBar.width - content.x - content.flickableItem.x + content.contentX
contentX: buttonsBar.width + content.contentX
anchors.left: buttonsBar.right
anchors.right: parent.right
anchors.top: parent.top
height: content.flickableItem.height + buttonsBar.height
height: content.height + buttonsBar.height
windowStart: zoomControl.windowStart
viewTimePerPixel: selectionRange.viewTimePerPixel
scaleHeight: buttonsBar.height
@@ -458,8 +458,8 @@ Rectangle {
Slider {
id: zoomSlider
anchors.fill: parent
minimumValue: 1
maximumValue: 10000
from: 1
to: 10000
stepSize: 100
property int exponent: 3
@@ -478,7 +478,7 @@ Rectangle {
}
var windowLength = Math.max(
Math.pow(value / maximumValue, exponent) * zoomControl.windowDuration,
Math.pow(value / to, exponent) * zoomControl.windowDuration,
minWindowLength);
var startTime = Math.max(zoomControl.windowStart, fixedPoint - windowLength / 2)

View File

@@ -24,6 +24,8 @@
****************************************************************************/
import QtQuick 2.9
import QtQuick.Controls 2.0
import TimelineTheme 1.0
Item {
@@ -108,6 +110,7 @@ Item {
implicitHeight: typeTitle.height
visible: !rangeDetails.noteReadonly
onClicked: noteEdit.focus = true
ToolTip.text: qsTr("Edit note")
}
ImageToolButton {
@@ -117,6 +120,7 @@ Item {
anchors.right: closeIcon.left
implicitHeight: typeTitle.height
onClicked: locked = !locked
ToolTip.text: qsTr("View event information on mouseover.")
}
ImageToolButton {
@@ -126,6 +130,7 @@ Item {
implicitHeight: typeTitle.height
imageSource: "image://icons/close_window"
onClicked: rangeDetails.clearSelection()
ToolTip.text: qsTr("Close")
}
}

View File

@@ -24,8 +24,7 @@
****************************************************************************/
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.2
import TimelineTheme 1.0
Button {
@@ -38,25 +37,26 @@ Button {
signal setRowHeight(int newHeight)
property string labelText: label.description ? label.description : qsTr("[unknown]")
action: Action {
onTriggered: button.selectBySelectionId();
tooltip: button.labelText + (label.displayName ? (" (" + label.displayName + ")") : "")
}
style: ButtonStyle {
onPressed: selectBySelectionId();
ToolTip.text: labelText + (label.displayName ? (" (" + label.displayName + ")") : "")
ToolTip.visible: hovered
ToolTip.delay: 1000
background: Rectangle {
border.width: 1
border.color: Theme.color(Theme.Timeline_DividerColor)
color: Theme.color(Theme.PanelStatusBarBackgroundColor)
}
label: TimelineText {
contentItem: TimelineText {
text: button.labelText
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignLeft
elide: Text.ElideRight
color: Theme.color(Theme.PanelTextColorLight)
}
}
MouseArea {
hoverEnabled: true
property bool resizing: false

View File

@@ -24,6 +24,8 @@
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 2.0
import TimelineTheme 1.0
import TimelineTimeFormatter 1.0
@@ -133,5 +135,6 @@ Item {
anchors.top: selectionRangeDetails.top
implicitHeight: typeTitle.height
onClicked: selectionRangeDetails.close()
ToolTip.text: qsTr("Close")
}
}

View File

@@ -24,20 +24,26 @@
****************************************************************************/
import QtQuick 2.0
import QtQuick.Controls 1.2
import QtQuick.Controls 2.2
import TimelineRenderer 1.0
import QtQml.Models 2.1
ScrollView {
id: scroller
Flickable {
id: flick
clip: true
contentHeight: timelineView.height + height
flickableDirection: Flickable.HorizontalAndVerticalFlick
boundsBehavior: Flickable.StopAtBounds
pixelAligned: true
ScrollBar.horizontal: ScrollBar {}
ScrollBar.vertical: ScrollBar {}
property bool recursionGuard: false
property QtObject zoomer
property QtObject modelProxy
property int contentX: flick.contentX
property int contentY: flick.contentY
property int contentWidth: flick.contentWidth
property int contentHeight: flick.contentHeight
property bool selectionLocked
property int typeId
@@ -58,27 +64,6 @@ ScrollView {
timelineModel.items.move(sourceIndex, targetIndex)
}
function scroll()
{
flick.scroll();
}
// ScrollView will try to deinteractivate it. We don't want that
// as the horizontal flickable is interactive, too. We do occasionally
// switch to non-interactive ourselves, though.
property bool stayInteractive: true
onStayInteractiveChanged: flick.interactive = stayInteractive
Flickable {
id: flick
contentHeight: timelineView.height + height
flickableDirection: Flickable.HorizontalAndVerticalFlick
boundsBehavior: Flickable.StopAtBounds
pixelAligned: true
onInteractiveChanged: interactive = stayInteractive
property bool recursionGuard: false
function guarded(operation) {
if (recursionGuard)
@@ -88,10 +73,10 @@ ScrollView {
recursionGuard = false;
}
// Logically we should bind to scroller.width above as we use scroller.width in scroll().
// However, this width changes before scroller.width when the window is resized and if we
// Logically we should bind to flick.width above as we use flick.width in scroll().
// However, this width changes before flick.width when the window is resized and if we
// don't explicitly set contentX here, for some reason an automatic change in contentX is
// triggered after this width has changed, but before scroller.width changes. This would be
// triggered after this width has changed, but before flick.width changes. This would be
// indistinguishabe from a manual flick by the user and thus changes the range position. We
// don't want to change the range position on resizing the window. Therefore we bind to this
// width.
@@ -99,11 +84,9 @@ ScrollView {
// Update the zoom control on scrolling.
onContentXChanged: guarded(function() {
var newStartTime = contentX * zoomer.rangeDuration / scroller.width
+ zoomer.windowStart;
var newStartTime = contentX * zoomer.rangeDuration / width + zoomer.windowStart;
if (isFinite(newStartTime) && Math.abs(newStartTime - zoomer.rangeStart) >= 1) {
var newEndTime = (contentX + scroller.width) * zoomer.rangeDuration / scroller.width
+ zoomer.windowStart;
var newEndTime = (contentX + width) * zoomer.rangeDuration / width + zoomer.windowStart;
if (isFinite(newEndTime))
zoomer.setRange(newStartTime, newEndTime);
}
@@ -116,10 +99,10 @@ ScrollView {
contentWidth = 0;
contentX = 0;
} else {
var newWidth = zoomer.windowDuration * scroller.width / zoomer.rangeDuration;
var newWidth = zoomer.windowDuration * width / zoomer.rangeDuration;
if (isFinite(newWidth) && Math.abs(newWidth - contentWidth) >= 1)
contentWidth = newWidth;
var newStartX = (zoomer.rangeStart - zoomer.windowStart) * scroller.width /
var newStartX = (zoomer.rangeStart - zoomer.windowStart) * width /
zoomer.rangeDuration;
if (isFinite(newStartX) && Math.abs(newStartX - contentX) >= 1)
contentX = newStartX;
@@ -140,8 +123,8 @@ ScrollView {
id: renderer
model: modelData
notes: modelProxy.notes
zoomer: scroller.zoomer
selectionLocked: scroller.selectionLocked
zoomer: flick.zoomer
selectionLocked: flick.selectionLocked
x: 0
height: modelData.height
property int visualIndex: DelegateModel.itemsIndex
@@ -176,18 +159,18 @@ ScrollView {
var row = modelData.row(selectedItem);
var rowStart = modelData.rowOffset(row) + y;
var rowEnd = rowStart + modelData.rowHeight(row);
if (rowStart < flick.contentY || rowEnd - scroller.height > flick.contentY)
flick.contentY = (rowStart + rowEnd - scroller.height) / 2;
if (rowStart < flick.contentY || rowEnd - flick.height > flick.contentY)
flick.contentY = (rowStart + rowEnd - flick.height) / 2;
}
onSelectedItemChanged: scroller.propagateSelection(index, selectedItem);
onSelectedItemChanged: flick.propagateSelection(index, selectedItem);
Connections {
target: model
onDetailsChanged: {
if (selectedItem != -1) {
scroller.propagateSelection(-1, -1);
scroller.propagateSelection(index, selectedItem);
flick.propagateSelection(-1, -1);
flick.propagateSelection(index, selectedItem);
}
}
}
@@ -199,5 +182,4 @@ ScrollView {
model: timelineModel
}
}
}
}