From 5df7b1272d490d8f0cd3ff19f2fc1b6929f22514 Mon Sep 17 00:00:00 2001 From: Alessandro Portale Date: Fri, 17 Jun 2016 16:21:04 +0200 Subject: [PATCH] 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 --- src/libs/timeline/qml/ButtonsBar.qml | 29 ++-- src/libs/timeline/qml/ImageToolButton.qml | 51 +++++++ src/libs/timeline/qml/ico_next.png | Bin 619 -> 0 bytes src/libs/timeline/qml/ico_prev.png | Bin 647 -> 0 bytes src/libs/timeline/qml/ico_rangeselected.png | Bin 167 -> 154 bytes .../timeline/qml/ico_rangeselected@2x.png | Bin 0 -> 191 bytes src/libs/timeline/qml/ico_rangeselection.png | Bin 158 -> 145 bytes .../timeline/qml/ico_rangeselection@2x.png | Bin 0 -> 183 bytes src/libs/timeline/qml/ico_selectionmode.png | Bin 261 -> 150 bytes .../timeline/qml/ico_selectionmode@2x.png | Bin 0 -> 236 bytes src/libs/timeline/qml/ico_zoom.png | Bin 518 -> 0 bytes src/libs/timeline/qml/timeline.qrc | 7 +- src/libs/timeline/timeline.pro | 6 +- src/libs/timeline/timelinetheme.cpp | 99 +++++++++++++ src/libs/timeline/timelinetheme.h | 39 ++++++ .../qmlprofiler/qmlprofilertraceview.cpp | 3 + src/tools/icons/qtcreatoricons.svg | 130 +++++++++++++++++- 17 files changed, 339 insertions(+), 25 deletions(-) create mode 100644 src/libs/timeline/qml/ImageToolButton.qml delete mode 100644 src/libs/timeline/qml/ico_next.png delete mode 100644 src/libs/timeline/qml/ico_prev.png create mode 100644 src/libs/timeline/qml/ico_rangeselected@2x.png create mode 100644 src/libs/timeline/qml/ico_rangeselection@2x.png create mode 100644 src/libs/timeline/qml/ico_selectionmode@2x.png delete mode 100644 src/libs/timeline/qml/ico_zoom.png create mode 100644 src/libs/timeline/timelinetheme.cpp create mode 100644 src/libs/timeline/timelinetheme.h diff --git a/src/libs/timeline/qml/ButtonsBar.qml b/src/libs/timeline/qml/ButtonsBar.qml index 2da1f4e2b85..f1512e06a1d 100644 --- a/src/libs/timeline/qml/ButtonsBar.qml +++ b/src/libs/timeline/qml/ButtonsBar.qml @@ -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 diff --git a/src/libs/timeline/qml/ImageToolButton.qml b/src/libs/timeline/qml/ImageToolButton.qml new file mode 100644 index 00000000000..8c0163785ca --- /dev/null +++ b/src/libs/timeline/qml/ImageToolButton.qml @@ -0,0 +1,51 @@ +/**************************************************************************** +** +** 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" + } + } +} diff --git a/src/libs/timeline/qml/ico_next.png b/src/libs/timeline/qml/ico_next.png deleted file mode 100644 index c8a3374fd73d48ac035d94e75c6a541fa7164269..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 619 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4mJh`2Kmqb6B!toj67W&Lo7}wCoB+M@j2l^ zZ0OR0eX3o1uQ;_jHa0d+hK?VtVlf4`93;2-}nz5nOe@%#>xI-9tmnRP+-b%*m~vk z|MyY<|L+(4_W%Fd6aW9`JAJU%_*bv|=>LD~!2j#td;OdIPPJh6%+7@pc@E_)%*P*b z{bZM)r}OXsr>dL(r-ujq-@i-b)A!R~U+n)czx3bF{}K|?{g?OMzcKlT`epw=>kP~f z=PWR@-@&LW=yRs`AkWLG?|43Y#Yl=Ve0&qb-WI+4`Obeo{;zv*`~P;;`}*&E_RN*m zDUWaIPUH*l77*xu?90x&j;FhSo!^h&|KBhAf4zU%|C78E_v#^=u|9qy7K(a7B*()c;`ijt{8u| zwf}Q_(cl07#d_`ApR?4i`;>NLR>IK>S00?6aP`&k35JG!2PF>+aI&$To0V}gGJSeQ z{r}zPKb`--_t^h`?~Q-{F5CRHzxwrEd;1%5zyIFryE4DOuk>GRpk}e#jP`?EM;kr~ zG`gmTx77Zxzw`9}|Hpj)|2uyCpWOHV|NL(ZN%;!je*OO+c>4d=tw#JiZ%CYaIE(r0 zOujcWv%Y@)fAzrs|N1}v{4YQF{r-RMegFT@Z%-1C*7)~-kNSlMrv;3U_$_Wqyn4vC z!N`as{TGMqj%~^>@Bgw?B+_s8N3N|9|<~|JSd1+q)Pt$gr*9 z5vn{G)a3B{h#l>?|*&xhurTr*X1L(@$@VCNSr$|%Xp5@h6Iag zDd#VoJalFP({+s_%?2)AjgD(gy#Ae;>YVxi|Nq!8|6ja1vj5~Z9_xmng$_B4N0vF{ zupQZ?v5i|va?!Dq3#LeGRQ-Ck^4k98W=rezz9(q3W~CjRE#;^;a}rD9>dyuo=|4Gh zqpz;o>=ia);dBk=fW3#0aQNsPtNPTVu)mGj&|tfPfl+`o14C&H@A8YA+S?fz7#KWV L{an^LB{Ts5@Y6;t diff --git a/src/libs/timeline/qml/ico_rangeselected.png b/src/libs/timeline/qml/ico_rangeselected.png index b1a9031843eb5d4f967741c32a14e5f453ac881c..1d4e0284f9a1b5b072eea31bf38e0125a055d2db 100644 GIT binary patch delta 125 zcmZ3^IE!(DN||VYPlzi614BwmN_KX3PEJm7aq;!**Z=?jzkv1HG6n_)2TvEr5RT|% zk7gz|3*|;eo*NQE5zdVY46TA9Qd(ST8ZB)`O%gr|TbUf#xH}RVCKYk;rnYH@@gB(H fJHy3un=!#gcH@V*i?0|M7#KWV{an^LB{Ts5X7MR2 delta 139 zcmbQmxSVly95Ca1PgQu&X3(GpEgeCwI?J+q3 diff --git a/src/libs/timeline/qml/ico_rangeselected@2x.png b/src/libs/timeline/qml/ico_rangeselected@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..d108be37e0a2b4dfeebfc48844bdaba6d6fc848f GIT binary patch literal 191 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I7G?$phQ^Te;|vT8q5(c3t_%zeDJd!0+1WWc zImN}r*RNmy|Ns92)@#cc7#LDLT^vI+CMJ70GxI#*Fj&CwhG}7eL#Km4hkBRF0tTT3 z7Y>%jQp1iztRf0bJqC>mGgiASWa2VlbX(ED?9(8rCBP(X&?@=PJ_cU=zE{A@RiVPU{>n>@xT4&}xtpDvYTU|?YIboFyt=akR{02kmoK>z>% literal 0 HcmV?d00001 diff --git a/src/libs/timeline/qml/ico_rangeselection.png b/src/libs/timeline/qml/ico_rangeselection.png index dbe47a9472095f1eca5e556065a0b29d33b54f30..546bf8beccd676f4d6a064d23022d0ddf0c410c8 100644 GIT binary patch delta 116 zcmbQoIFWIJO0H0VPlzi614DUvd3}9-LqkJHN5}vF|KEETuV-Lju<~?q4B?1Q=4fSN zvrujjbz$9*l*-cD*3~4*wQymN0-G?i00)DljzSxw$0;APlzi61A|w}j-vKsJC43Nf9*~F55IE^3=E7VL4Lsu4$p3+F)%RL zdb&7BxGhfXPTgQiA0GPa>n6vw-u(h=27#J8lUHx3vIVCg!08=q4`Tzg` diff --git a/src/libs/timeline/qml/ico_rangeselection@2x.png b/src/libs/timeline/qml/ico_rangeselection@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..9f200fe43a82dadbd0f624c24a768894685950cb GIT binary patch literal 183 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I7G?$phQ^Te;|vT8LIFM@t_%ze<>lq|_4N%6 z4ILdF|NsAg?_Io}fq@~x)5S4FBY5lije-Xhc$@RFNA80+&1x zn!0{M>PA=f1xJ_IFJxN6YUD5@fOUb1LOBOt=(LmxvQ3VK9c*VGe!FzZ`|*xTR(Fac m7(0G{dHr_h`NY$VHm>(7PT$zb*~7rVz~JfX=d#Wzp$P!2_eN>} literal 0 HcmV?d00001 diff --git a/src/libs/timeline/qml/ico_selectionmode.png b/src/libs/timeline/qml/ico_selectionmode.png index 41493905c28da56d1f32bf758fef79ae292e6a35..fcf28531d0c6d13eccd2055ccd9583ca2a8e0ef9 100644 GIT binary patch delta 132 zcmZo=n#MRmvX+5?fx&9Vg1rn346&Xrjv*3LlYjKHNo?RSFfce^=yZTF_CdGptONh2 zzhK%H|0agTe~DWM4fwU;wg~H_;>%Rw$Qgm1_lPkk|4ie28U-i(ij*Rl001;LnOj$&)&`Db1)ELez0st zV%_m`bH3LHh#R%J=46^m zb2j=O64<#uaMo@im!_6~_ZF^NwJT@FxzfWwYEH#%l1bagTzs{_-H(BRfx*+&&t;uc GLK6Ugv46V& diff --git a/src/libs/timeline/qml/ico_selectionmode@2x.png b/src/libs/timeline/qml/ico_selectionmode@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..b34991e0790afa38a49c2cce7f4ae1be6968d53b GIT binary patch literal 236 zcmeAS@N?(olHy`uVBq!ia0y~yU{C;I4h9AWhA=@@4F(2=&7LlfAr`0iUN+=o3=}x_ zvA%%mh_hI$^NOibYh4~Yak&==w7R$}9(l)gO{{O>j}WdWdj(rF)4Jk~jekxE{KLs` zApJk91-FbeTR@a~!?#f8jPwQ8aM53kH nxW!jsjpn&S7iZ7gclH@`%A;dde=KGggS_GC>gTe~DWM4f$E{i; literal 0 HcmV?d00001 diff --git a/src/libs/timeline/qml/ico_zoom.png b/src/libs/timeline/qml/ico_zoom.png deleted file mode 100644 index d33b5ea0f9d3555f37fbe229210771f14f88bb21..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 518 zcmeAS@N?(olHy`uVBq!ia0y~yU=RRd4rT@h1`S>QU)~Lr|-VefIb4^S@`G|2zBQ@7Wjs&b|11;nly3AoTzIjW?hW zQ78%W3ucg&lTRusZE9(ovFzc)hmT&qeD~$Y&!2z({Qdh61PoH05zZH{Sc!nUqV3F{lu+TNaFVdQ&MBb@0AU~d0ssI2 diff --git a/src/libs/timeline/qml/timeline.qrc b/src/libs/timeline/qml/timeline.qrc index 92b6eaf10df..5bd2e1b20f6 100644 --- a/src/libs/timeline/qml/timeline.qrc +++ b/src/libs/timeline/qml/timeline.qrc @@ -17,11 +17,11 @@ arrow_right.png range_handle.png ico_selectionmode.png - ico_zoom.png - ico_prev.png - ico_next.png + ico_selectionmode@2x.png ico_rangeselection.png + ico_rangeselection@2x.png ico_rangeselected.png + ico_rangeselected@2x.png ico_note.png ButtonsBar.qml timelineitems.vert @@ -33,5 +33,6 @@ RowLabel.qml SynchronousReloader.qml TimelineText.qml + ImageToolButton.qml diff --git a/src/libs/timeline/timeline.pro b/src/libs/timeline/timeline.pro index 4b556057588..39fa4f3124d 100644 --- a/src/libs/timeline/timeline.pro +++ b/src/libs/timeline/timeline.pro @@ -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 diff --git a/src/libs/timeline/timelinetheme.cpp b/src/libs/timeline/timelinetheme.cpp new file mode 100644 index 00000000000..8731f2b5acc --- /dev/null +++ b/src/libs/timeline/timelinetheme.cpp @@ -0,0 +1,99 @@ +/**************************************************************************** +** +** 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 +#include +#include +#include + +#include +#include +#include +#include +#include + +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 diff --git a/src/libs/timeline/timelinetheme.h b/src/libs/timeline/timelinetheme.h new file mode 100644 index 00000000000..eb292ffc2f7 --- /dev/null +++ b/src/libs/timeline/timelinetheme.h @@ -0,0 +1,39 @@ +/**************************************************************************** +** +** 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 diff --git a/src/plugins/qmlprofiler/qmlprofilertraceview.cpp b/src/plugins/qmlprofiler/qmlprofilertraceview.cpp index 7a90886cc56..e50c4d82947 100644 --- a/src/plugins/qmlprofiler/qmlprofilertraceview.cpp +++ b/src/plugins/qmlprofiler/qmlprofilertraceview.cpp @@ -46,6 +46,7 @@ #include "timeline/timelinemodelaggregator.h" #include "timeline/timelinerenderer.h" #include "timeline/timelineoverviewrenderer.h" +#include "timeline/timelinetheme.h" #include // 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"), diff --git a/src/tools/icons/qtcreatoricons.svg b/src/tools/icons/qtcreatoricons.svg index 91940b62aad..c8d9ee940d0 100644 --- a/src/tools/icons/qtcreatoricons.svg +++ b/src/tools/icons/qtcreatoricons.svg @@ -661,6 +661,17 @@ offset="1" id="stop5101" /> + + + + id="selectArrow" + transform="translate(4,0)" + inkscape:label="#g5932"> + + + + + + + + + + + + + + + + + + + + +