Commit 5df7b127 authored by Alessandro Portale's avatar Alessandro Portale Committed by Alessandro Portale

Themed Profiler timeline: Tool bar

This change implements theming of the toolbars and adds new, High-DPI
capable toolbar icons.

Task-number: QTCREATORBUG-16466
Change-Id: Ibcc774962c740995d8b15fa6c74345d3a48694de
Reviewed-by: Ulf Hermann's avatarUlf Hermann <ulf.hermann@qt.io>
parent be72a944
......@@ -30,7 +30,6 @@ import QtQuick.Controls.Styles 1.2
ToolBar {
id: buttons
readonly property int buttonWidth: 30
signal jumpToPrev()
signal jumpToNext()
......@@ -63,7 +62,7 @@ ToolBar {
}
background: Rectangle {
anchors.fill: parent
color: "#9B9B9B"
color: creatorTheme.PanelStatusBarBackgroundColor
}
}
......@@ -71,62 +70,56 @@ ToolBar {
spacing: 0
anchors.fill: parent
ToolButton {
ImageToolButton {
id: jumpToPrevButton
anchors.top: parent.top
anchors.bottom: parent.bottom
implicitWidth: buttonWidth
iconSource: "qrc:/timeline/ico_prev.png"
imageSource: "image://icons/prev"
tooltip: qsTr("Jump to previous event.")
onClicked: buttons.jumpToPrev()
}
ToolButton {
ImageToolButton {
id: jumpToNextButton
anchors.top: parent.top
anchors.bottom: parent.bottom
implicitWidth: buttonWidth
iconSource: "qrc:/timeline/ico_next.png"
imageSource: "image://icons/next"
tooltip: qsTr("Jump to next event.")
onClicked: buttons.jumpToNext()
}
ToolButton {
ImageToolButton {
id: zoomControlButton
anchors.top: parent.top
anchors.bottom: parent.bottom
implicitWidth: buttonWidth
iconSource: "qrc:/timeline/ico_zoom.png"
imageSource: "image://icons/zoom"
tooltip: qsTr("Show zoom slider.")
checkable: true
checked: false
onCheckedChanged: buttons.zoomControlChanged()
}
ToolButton {
ImageToolButton {
id: rangeButton
anchors.top: parent.top
anchors.bottom: parent.bottom
implicitWidth: buttonWidth
iconSource: checked ? "qrc:/timeline/ico_rangeselected.png" :
"qrc:/timeline/ico_rangeselection.png"
imageSource: "image://icons/" + (checked ? "rangeselected" : "rangeselection");
tooltip: qsTr("Select range.")
checkable: true
checked: false
onCheckedChanged: buttons.rangeSelectChanged()
}
ToolButton {
ImageToolButton {
id: lockButton
anchors.top: parent.top
anchors.bottom: parent.bottom
implicitWidth: buttonWidth
iconSource: "qrc:/timeline/ico_selectionmode.png"
imageSource: "image://icons/selectionmode"
tooltip: qsTr("View event information on mouseover.")
checkable: true
checked: false
......
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Controls.Styles 1.2
ToolButton {
implicitWidth: 30
property string imageSource
Image {
source: parent.enabled ? parent.imageSource : parent.imageSource + "/disabled"
width: 16
height: 16
anchors.centerIn: parent
}
style: ButtonStyle {
background: Rectangle {
color: (control.checked || control.pressed)
? creatorTheme.FancyToolButtonSelectedColor
: control.hovered
? creatorTheme.FancyToolButtonHoverColor
: "#00000000"
}
}
}
src/libs/timeline/qml/ico_rangeselected.png

167 Bytes | W: | H:

src/libs/timeline/qml/ico_rangeselected.png

154 Bytes | W: | H:

src/libs/timeline/qml/ico_rangeselected.png
src/libs/timeline/qml/ico_rangeselected.png
src/libs/timeline/qml/ico_rangeselected.png
src/libs/timeline/qml/ico_rangeselected.png
  • 2-up
  • Swipe
  • Onion skin
src/libs/timeline/qml/ico_rangeselection.png

158 Bytes | W: | H:

src/libs/timeline/qml/ico_rangeselection.png

145 Bytes | W: | H:

src/libs/timeline/qml/ico_rangeselection.png
src/libs/timeline/qml/ico_rangeselection.png
src/libs/timeline/qml/ico_rangeselection.png
src/libs/timeline/qml/ico_rangeselection.png
  • 2-up
  • Swipe
  • Onion skin
src/libs/timeline/qml/ico_selectionmode.png

261 Bytes | W: | H:

src/libs/timeline/qml/ico_selectionmode.png

150 Bytes | W: | H:

src/libs/timeline/qml/ico_selectionmode.png
src/libs/timeline/qml/ico_selectionmode.png
src/libs/timeline/qml/ico_selectionmode.png
src/libs/timeline/qml/ico_selectionmode.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -17,11 +17,11 @@
<file>arrow_right.png</file>
<file>range_handle.png</file>
<file>ico_selectionmode.png</file>
<file>ico_zoom.png</file>
<file>ico_prev.png</file>
<file>ico_next.png</file>
<file>ico_selectionmode@2x.png</file>
<file>ico_rangeselection.png</file>
<file>ico_rangeselection@2x.png</file>
<file>ico_rangeselected.png</file>
<file>ico_rangeselected@2x.png</file>
<file>ico_note.png</file>
<file>ButtonsBar.qml</file>
<file>timelineitems.vert</file>
......@@ -33,5 +33,6 @@
<file>RowLabel.qml</file>
<file>SynchronousReloader.qml</file>
<file>TimelineText.qml</file>
<file>ImageToolButton.qml</file>
</qresource>
</RCC>
......@@ -15,7 +15,8 @@ SOURCES += \
$$PWD/timelinerenderstate.cpp \
$$PWD/timelinenotesmodel.cpp \
$$PWD/timelineabstractrenderer.cpp \
$$PWD/timelineoverviewrenderer.cpp
$$PWD/timelineoverviewrenderer.cpp \
$$PWD/timelinetheme.cpp
HEADERS += \
......@@ -37,7 +38,8 @@ HEADERS += \
$$PWD/timelineabstractrenderer.h \
$$PWD/timelineabstractrenderer_p.h \
$$PWD/timelineoverviewrenderer_p.h \
$$PWD/timelineoverviewrenderer.h
$$PWD/timelineoverviewrenderer.h \
$$PWD/timelinetheme.h
RESOURCES += \
$$PWD/qml/timeline.qrc
......
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
#include "timelinetheme.h"
#include <utils/icon.h>
#include <utils/qtcassert.h>
#include <utils/utilsicons.h>
#include <utils/theme/theme.h>
#include <QIcon>
#include <QQmlContext>
#include <QQmlEngine>
#include <QQmlPropertyMap>
#include <QQuickImageProvider>
namespace Timeline {
class TimelineImageIconProvider : public QQuickImageProvider
{
public:
TimelineImageIconProvider()
: QQuickImageProvider(Pixmap)
{
}
QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override
{
Q_UNUSED(requestedSize)
const QStringList idElements = id.split(QLatin1Char('/'));
QTC_ASSERT(!idElements.isEmpty(), return QPixmap());
const QString &iconName = idElements.first();
const QIcon::Mode iconMode = (idElements.count() > 1
&& idElements.at(1) == QLatin1String("disabled"))
? QIcon::Disabled : QIcon::Normal;
Utils::Icon icon;
if (iconName == QLatin1String("prev"))
icon = Utils::Icons::PREV_TOOLBAR;
else if (iconName == QLatin1String("next"))
icon = Utils::Icons::NEXT_TOOLBAR;
else if (iconName == QLatin1String("zoom"))
icon = Utils::Icons::ZOOM_TOOLBAR;
else if (iconName == QLatin1String("rangeselection"))
icon = Utils::Icon({{QLatin1String(":/timeline/ico_rangeselection.png"),
Utils::Theme::IconsBaseColor}});
else if (iconName == QLatin1String("rangeselected"))
icon = Utils::Icon({{QLatin1String(":/timeline/ico_rangeselected.png"),
Utils::Theme::IconsBaseColor}});
else if (iconName == QLatin1String("selectionmode"))
icon = Utils::Icon({{QLatin1String(":/timeline/ico_selectionmode.png"),
Utils::Theme::IconsBaseColor}});
const QSize iconSize(16, 16);
const QPixmap result = icon.icon().pixmap(iconSize, iconMode);
if (size)
*size = result.size();
return result;
}
};
void TimelineTheme::setupTheme(QQmlEngine *engine)
{
QQmlPropertyMap *themePropertyMap = new QQmlPropertyMap(engine);
const QVariantHash creatorTheme = Utils::creatorTheme()->values();
for (auto it = creatorTheme.constBegin(); it != creatorTheme.constEnd(); ++it)
themePropertyMap->insert(it.key(), it.value());
engine->rootContext()->setContextProperty(QLatin1String("creatorTheme"), themePropertyMap);
engine->addImageProvider(QLatin1String("icons"), new TimelineImageIconProvider);
}
} // namespace Timeline
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of Qt Creator.
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU General Public License Usage
** Alternatively, this file may be used under the terms of the GNU
** General Public License version 3 as published by the Free Software
** Foundation with exceptions as appearing in the file LICENSE.GPL3-EXCEPT
** included in the packaging of this file. Please review the following
** information to ensure the GNU General Public License requirements will
** be met: https://www.gnu.org/licenses/gpl-3.0.html.
**
****************************************************************************/
#pragma once
#include "timeline_global.h"
class QQmlEngine;
namespace Timeline {
class TIMELINE_EXPORT TimelineTheme {
public:
static void setupTheme(QQmlEngine* engine);
};
} // namespace Timeline
......@@ -46,6 +46,7 @@
#include "timeline/timelinemodelaggregator.h"
#include "timeline/timelinerenderer.h"
#include "timeline/timelineoverviewrenderer.h"
#include "timeline/timelinetheme.h"
#include <aggregation/aggregate.h>
// Needed for the load&save actions in the context menu
......@@ -143,6 +144,8 @@ QmlProfilerTraceView::QmlProfilerTraceView(QWidget *parent, QmlProfilerViewManag
// Minimum height: 5 rows of 20 pixels + scrollbar of 50 pixels + 20 pixels margin
setMinimumHeight(170);
Timeline::TimelineTheme::setupTheme(d->m_mainView->engine());
d->m_mainView->rootContext()->setContextProperty(QLatin1String("timelineModelAggregator"),
d->m_modelProxy);
d->m_mainView->rootContext()->setContextProperty(QLatin1String("zoomControl"),
......
......@@ -661,6 +661,17 @@
offset="1"
id="stop5101" />
</linearGradient>
<clipPath
clipPathUnits="userSpaceOnUse"
id="clipPath6127">
<rect
style="display:inline;fill:#999999;fill-opacity:1"
x="1097"
y="568"
width="16"
height="16"
id="rect6129" />
</clipPath>
</defs>
<sodipodi:namedview
id="base"
......@@ -3338,8 +3349,9 @@
x="1018.5"
y="570.5" />
<g
id="g5932"
transform="translate(4,0)">
id="selectArrow"
transform="translate(4,0)"
inkscape:label="#g5932">
<path
sodipodi:nodetypes="ccccc"
inkscape:connector-curvature="0"
......@@ -3400,6 +3412,120 @@
d="m 1070,583.5 3,-3 -3,-3 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
</g>
<g
transform="translate(32,0)"
style="display:inline"
id="src/libs/timeline/qml/ico_rangeselection">
<rect
id="rect6782-96-0-0-7"
height="16"
width="16"
y="568"
x="1064"
style="display:inline;fill:#ffffff;fill-opacity:1" />
<path
sodipodi:nodetypes="cc"
inkscape:connector-curvature="0"
id="path5087"
d="m 1068.5,576 7,0"
style="stroke:#000000;stroke-width:2" />
<g
id="g5092">
<path
d="m 1066,570 0,12"
id="path5068"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cc"
style="stroke:#000000;stroke-width:2" />
<path
style="fill:#000000"
d="m 1067,576 3,-3 0,6"
id="path5090"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccc" />
</g>
<use
height="100%"
width="100%"
transform="matrix(-1,0,0,1,2144,0)"
id="use5096"
xlink:href="#g5092"
y="0"
x="0" />
</g>
<g
transform="translate(32,0)"
style="display:inline"
id="src/libs/timeline/qml/ico_rangeselected">
<use
height="100%"
width="100%"
transform="translate(-16,0)"
id="use5136"
xlink:href="#src/libs/timeline/qml/ico_rangeselection"
y="0"
x="0" />
<rect
y="570.5"
x="1082.5"
height="11"
width="11"
id="rect5138"
style="fill:#000000;fill-opacity:0.15686275;stroke:#000000" />
</g>
<g
style="display:inline"
id="src/libs/timeline/qml/ico_selectionmode"
clip-path="url(#clipPath6127)"
transform="translate(31,0)">
<rect
style="display:inline;fill:#ffffff;fill-opacity:1"
x="1097"
y="568"
width="16"
height="16"
id="rect6782-96-0-0-7-8" />
<rect
y="570"
x="1099"
height="5"
width="3"
id="rect5184"
style="fill:#000000" />
<use
height="100%"
width="100%"
transform="translate(4,0)"
id="use5201"
xlink:href="#rect5184"
y="0"
x="0" />
<use
x="0"
y="0"
xlink:href="#rect5184"
id="use5071"
transform="translate(8,0)"
width="100%"
height="100%" />
<use
height="100%"
width="100%"
id="use5159"
xlink:href="#selectArrow"
y="0"
x="0"
style="display:inline"
transform="translate(80,2.0000004e-7)" />
<use
height="100%"
width="100%"
transform="translate(0,6)"
id="use5203"
xlink:href="#rect5184"
y="0"
x="0" />
</g>
</g>
<g
inkscape:groupmode="layer"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment