Welcome: Implement part of Diana's design

Removing font variations, colors, roundings and gaps.
And it is now better themable.

The examlpes and tutorial selection still needs to be done.

Change-Id: I520814ba9e8ce4fa1d1ca7ec14329955e8a0609a
Reviewed-by: Orgad Shaneh <orgads@gmail.com>
Reviewed-by: Alessandro Portale <alessandro.portale@theqtcompany.com>

share/qtcreator/themes/dark.creatortheme

@@ -135,25 +135,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
 
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
-Welcome_BackgroundColorNormal=normalBackground
+Welcome_TextColor=text
-Welcome_Button_BorderColorNormal=0
+Welcome_ForegroundPrimaryColor=ff999999
-Welcome_Button_BorderColorPressed=0
+Welcome_ForegroundSecondaryColor=ff808080
-Welcome_Button_TextColorNormal=ffe7e7e7
+Welcome_BackgroundColor=normalBackground
-Welcome_Button_TextColorPressed=ffffffff
+Welcome_DividerColor=ff555555
-Welcome_Caption_TextColorNormal=ff4acb47
+Welcome_HoverColor=ff444444
-Welcome_DividerColor=ff232323
+Welcome_LinkColor=ff5caa15
-Welcome_Link_BackgroundColor=ff333333
-Welcome_Link_TextColorActive=fff0f0f0
-Welcome_Link_TextColorNormal=text
-Welcome_ProjectItem_BackgroundColorHover=0
-Welcome_ProjectItem_TextColorFilepath=textDisabled
-Welcome_SessionItemExpanded_BackgroundColorHover=hoverBackground
-Welcome_SessionItemExpanded_BackgroundColorNormal=selectedBackground
-Welcome_SessionItem_BackgroundColorHover=hoverBackground
-Welcome_SessionItem_BackgroundColorNormal=0
-Welcome_SideBar_BackgroundColor=ff434343
-Welcome_TextColorHeading=text
-Welcome_TextColorNormal=text
 
 VcsBase_FileStatusUnknown_TextColor=text
 VcsBase_FileAdded_TextColor=ff00ff00

share/qtcreator/themes/darkframe.creatortheme

@@ -137,25 +137,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
 
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
-Welcome_BackgroundColorNormal=normalBackground
+Welcome_TextColor=ff000000
-Welcome_Button_BorderColorNormal=ff727476
+Welcome_ForegroundPrimaryColor=ff404244
-Welcome_Button_BorderColorPressed=ff727476
+Welcome_ForegroundSecondaryColor=ff727476
-Welcome_Button_TextColorNormal=text
+Welcome_BackgroundColor=ffffffff
-Welcome_Button_TextColorPressed=text
-Welcome_Caption_TextColorNormal=text
 Welcome_DividerColor=ffd6d6d6
-Welcome_Link_BackgroundColor=normalBackground
+Welcome_HoverColor=fff6f6f6
-Welcome_Link_TextColorActive=text
+Welcome_LinkColor=ff5caa15
-Welcome_Link_TextColorNormal=text
-Welcome_ProjectItem_BackgroundColorHover=ffd2d4d6
-Welcome_ProjectItem_TextColorFilepath=textDisabled
-Welcome_SessionItemExpanded_BackgroundColorHover=hoverBackground
-Welcome_SessionItemExpanded_BackgroundColorNormal=selectedBackground
-Welcome_SessionItem_BackgroundColorHover=hoverBackground
-Welcome_SessionItem_BackgroundColorNormal=normalBackground
-Welcome_SideBar_BackgroundColor=normalBackground
-Welcome_TextColorHeading=text
-Welcome_TextColorNormal=text
 
 VcsBase_FileStatusUnknown_TextColor=ff000000
 VcsBase_FileAdded_TextColor=ff00aa00

share/qtcreator/themes/default.creatortheme

@@ -129,25 +129,13 @@ Debugger_WatchItem_ValueChanged=ffc80000
 
 Debugger_Breakpoint_TextMarkColor=ffff4040
 
-Welcome_BackgroundColorNormal=ffffffff
+Welcome_TextColor=ff000000
-Welcome_Button_BorderColorNormal=ff737373
+Welcome_ForegroundPrimaryColor=ff404244
-Welcome_Button_BorderColorPressed=ff333333
+Welcome_ForegroundSecondaryColor=ff727476
-Welcome_Button_TextColorNormal=ff000000
+Welcome_BackgroundColor=ffffffff
-Welcome_Button_TextColorPressed=ffc0c0c0
+Welcome_DividerColor=ffd6d6d6
-Welcome_Caption_TextColorNormal=ff328930
+Welcome_HoverColor=fff6f6f6
-Welcome_DividerColor=ff737373
+Welcome_LinkColor=ff5caa15
-Welcome_Link_BackgroundColor=ff909090
-Welcome_Link_TextColorActive=fff0f0f0
-Welcome_Link_TextColorNormal=ff328930
-Welcome_ProjectItem_BackgroundColorHover=fff9f9f9
-Welcome_ProjectItem_TextColorFilepath=ff6b6b6b
-Welcome_SessionItemExpanded_BackgroundColorHover=ffe9e9e9
-Welcome_SessionItemExpanded_BackgroundColorNormal=fff1f1f1
-Welcome_SessionItem_BackgroundColorHover=fff9f9f9
-Welcome_SessionItem_BackgroundColorNormal=19f9f9f9
-Welcome_SideBar_BackgroundColor=ffebebeb
-Welcome_TextColorHeading=ff535353
-Welcome_TextColorNormal=ff000000
 
 VcsBase_FileStatusUnknown_TextColor=ff000000
 VcsBase_FileAdded_TextColor=ff00aa00

share/qtcreator/welcomescreen/develop.qml

@@ -25,12 +25,14 @@
 
 import QtQuick 2.1
 import widgets 1.0
-import QtQuick.Controls 1.2 as Controls
+import QtQuick.Controls 1.0 as Controls
 
 
 Controls.ScrollView {
     id: rectangle1
 
+    readonly property int buttonWidth: 190
+    readonly property int titleY: 50
 
     Item {
         id: canvas
@@ -40,90 +42,68 @@ Controls.ScrollView {
 
         Button {
             y: screenDependHeightDistance
+            width: buttonWidth
             text: qsTr("New Project")
             anchors.left: sessionsTitle.left
             onClicked: projectWelcomePage.newProject();
-            iconSource: "widgets/images/new.png"
+            iconSource: "image://icons/new/"
-
+                        + ((checked || pressed)
+                           ? "Welcome_DividerColor"
+                           : "Welcome_ForegroundSecondaryColor")
         }
 
         Button {
             y: screenDependHeightDistance
+            width: buttonWidth
             text: qsTr("Open Project")
             anchors.left: recentProjectsTitle.left
             onClicked: projectWelcomePage.openProject();
-            iconSource: "widgets/images/open.png"
+            iconSource: "image://icons/open/" +
+                        ((checked || pressed)
+                         ? "Welcome_DividerColor"
+                         : "Welcome_ForegroundSecondaryColor")
         }
 
         NativeText {
             id: sessionsTitle
 
             x: 32
-            y: screenDependHeightDistance + 77
+            y: screenDependHeightDistance + titleY
 
-            color: creatorTheme.Welcome_TextColorHeading
+            color: creatorTheme.Welcome_TextColor
             text: qsTr("Sessions")
             font.pixelSize: 16
             font.family: "Helvetica"
-            font.bold: true
         }
 
         NativeText {
             id: recentProjectsTitle
             x: 406
 
-            y: screenDependHeightDistance + 77
+            y: screenDependHeightDistance + titleY
-            color: creatorTheme.Welcome_TextColorHeading
+            color: creatorTheme.Welcome_TextColor
             text: qsTr("Recent Projects")
             anchors.left: sessionsTitle.right
             anchors.leftMargin: 280
-            font.bold: true
             font.family: "Helvetica"
             font.pixelSize: 16
         }
 
-        RecentProjects {
-            x: screenDependLeftMargin
-
-            id: recentProjects
-
-            anchors.leftMargin: 12
-            anchors.left: recentProjectsTitle.left
-
-            anchors.top: recentProjectsTitle.bottom
-            anchors.topMargin: 20
-
-            model: projectList
-        }
-
-        Item {
-            id: actions
-            x: pageCaption.x + pageCaption.textOffset
-
-            y: screenDependHeightDistance + 244
-            width: 140
-            height: 70
-
-            anchors.topMargin: 42
-            anchors.top: sessions.bottom
-        }
-
-
         Sessions {
-            id: sessions
-
-            x: 96
-            y: 144
-            width: 274
-
-            anchors.leftMargin: 12
             anchors.left: sessionsTitle.left
             anchors.right: recentProjectsTitle.left
-            anchors.rightMargin: 40
             anchors.top: sessionsTitle.bottom
             anchors.topMargin: 20
 
             model: sessionList
         }
+
+        RecentProjects {
+            anchors.left: recentProjectsTitle.left
+            anchors.top: recentProjectsTitle.bottom
+            anchors.topMargin: 20
+
+            model: projectList
+        }
     }
 }

share/qtcreator/welcomescreen/examples.qml

@@ -41,7 +41,6 @@ Item {
         model: exampleSetModel
         textRole: "text"
 
-
         onCurrentIndexChanged: {
             if (comboBox.model === undefined)
                 return;

share/qtcreator/welcomescreen/widgets/Button.qml

@@ -38,89 +38,43 @@ Button {
             padding.right: 14
             background: Item {
                 anchors.fill: parent
+                implicitWidth: 160
+                implicitHeight: 30
 
                 Image {
                     id: icon
+                    x: 11
+                    y: 8
                     z: 1
-                    x: 4
+                    height: 16
-                    y: -6
+                    width: 16
-                    width: 32
-                    height: 32
                     source: button.iconSource
                     visible: button.iconSource != ""
                 }
 
-                implicitWidth: 160
-                implicitHeight: 30
-
                 Rectangle {
+                    id: rectangle
                     anchors.fill: parent
-                    antialiasing: true
+                    color: (button.checked || button.pressed)
-                    radius: (creatorTheme.WidgetStyle === 'StyleFlat') ? 0 : 3
+                           ? creatorTheme.Welcome_ForegroundPrimaryColor
-
+                           : (button.hovered
-                    visible: !(button.pressed || button.checked)
+                              ? creatorTheme.Welcome_HoverColor
-
+                              : creatorTheme.Welcome_BackgroundColor)
-                    gradient: Gradient {
+                    border.width: 1
-                        GradientStop {
+                    border.color: (button.checked || button.pressed)
-                            position: 0
+                                  ? creatorTheme.Welcome_ForegroundPrimaryColor
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#232323" : "#f9f9f9"
+                                  : creatorTheme.Welcome_ForegroundSecondaryColor
-                        }
-
-                        GradientStop {
-                            position: 0.49
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#232323" : "#f9f9f9"
-                        }
-
-                        GradientStop {
-                            position: 0.5
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#232323" : "#eeeeee"
-                        }
-
-                        GradientStop {
-                            position: 1
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#232323" : "#eeeeee"
-                        }
-                    }
-                    border.color: creatorTheme.Welcome_Button_BorderColorNormal
-                }
-
-                Rectangle {
-                    anchors.fill: parent
-                    antialiasing: true
-                    radius: (creatorTheme.WidgetStyle === 'StyleFlat') ? 0 : 3
-
-                    visible: button.pressed || button.checked
-
-                    gradient: Gradient {
-                        GradientStop {
-                            position: 0.00;
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#151515" : "#4c4c4c"
-                        }
-                        GradientStop {
-                            position: 0.49;
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#151515" : "#4c4c4c"
-                        }
-                        GradientStop {
-                            position: 0.50;
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#151515" : "#424242"
-                        }
-                        GradientStop {
-                            position: 1.00;
-                            color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#151515" : "#424242"
-                        }
-                    }
-                    border.color: creatorTheme.Welcome_Button_BorderColorPressed
-
                 }
             }
 
             label: Text {
+                id: text
                 renderType: Text.NativeRendering
                 verticalAlignment: Text.AlignVCenter
                 text: button.text
-                    color: button.pressed || button.checked
+                color: (button.checked || button.pressed)
-                             ? creatorTheme.Welcome_Button_TextColorPressed
+                       ? creatorTheme.Welcome_BackgroundColor
-                             : creatorTheme.Welcome_Button_TextColorNormal
+                       : creatorTheme.Welcome_TextColor
                 font.pixelSize: 15
                 font.bold: false
                 smooth: true

share/qtcreator/welcomescreen/widgets/CustomTab.qml

@@ -1,51 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-Row {
-    id: customTab
-    property alias model: repeater.model
-    spacing: 24
-
-    signal itemChanged
-    property int currentIndex: 0
-
-    onCurrentIndexChanged: welcomeMode.activePlugin = currentIndex
-    Component.onCompleted: currentIndex = welcomeMode.activePlugin
-
-    Repeater {
-        id: repeater
-
-        LinkedText {
-            text: title
-            active: customTab.currentIndex === index
-
-            onClicked: {
-                customTab.currentIndex = index
-            }
-        }
-    }
-}

share/qtcreator/welcomescreen/widgets/Delegate.qml

@@ -29,7 +29,7 @@ Rectangle {
     id: delegate
     height: 240
     width: 216
-    color: creatorTheme.Welcome_BackgroundColorNormal
+    color: creatorTheme.Welcome_BackgroundColor
 
     property alias caption: captionItem.text
     property alias imageSource: imageItem.source
@@ -102,7 +102,7 @@ Rectangle {
         y: 161
         width: 200
         height: 69
-        color: creatorTheme.Welcome_BackgroundColorNormal
+        color: creatorTheme.Welcome_BackgroundColor
         anchors.bottom: parent.bottom
         anchors.right: parent.right
         anchors.left: parent.left
@@ -112,7 +112,7 @@ Rectangle {
         id: captionItem
         x: 16
         y: 170
-        color: creatorTheme.Welcome_Caption_TextColorNormal
+        color: creatorTheme.Welcome_TextColor
         text: qsTr("2D PAINTING EXAMPLE long description")
         elide: Text.ElideRight
         anchors.right: parent.right
@@ -127,7 +127,7 @@ Rectangle {
     NativeText {
         id: descriptionItem
         height: 43
-        color: "#7e7e7e"
+        color: creatorTheme.Welcome_ForegroundPrimaryColor
         text: qsTr("The 2D Painting example shows how QPainter and QGLWidget work together.")
         anchors.top: captionItem.bottom
         anchors.topMargin: 10
@@ -159,7 +159,7 @@ Rectangle {
         x: 16
         y: 198
         text: qsTr("Tags:")
-        color: creatorTheme.Welcome_TextColorNormal
+        color: creatorTheme.Welcome_ForegroundSecondaryColor
         smooth: true
         font.italic: false
         font.pixelSize: 11
@@ -187,7 +187,7 @@ Rectangle {
     Rectangle {
         id: border
         color: "#00000000"
-        radius: 6
+        radius: creatorTheme.WidgetStyle === 'StyleFlat' ? 0 : 6
         anchors.rightMargin: 4
         anchors.leftMargin: 4
         anchors.bottomMargin: 4
@@ -268,11 +268,6 @@ Rectangle {
                 target: border
                 visible: true
             }
-
-            PropertyChanges {
-                target: highlight
-                opacity: 0
-            }
         }
     ]
 
@@ -339,25 +334,26 @@ Rectangle {
         Repeater {
             id: repeater
             model: mockupTags
-            LinkedText {
+            NativeText {
                 id: text4
-                color: "#777777"
                 text: modelData
                 smooth: true
                 font.pixelSize: 11
                 height: 12
                 font.family: "Helvetica" //setting the pixelSize will set the family back to the default
+                font.underline: tagMouseArea.containsMouse
+                color: creatorTheme.Welcome_LinkColor
                 wrapMode: Text.WordWrap
-                onEntered: {
-                    delegate.state="hover"
-                }
-                onExited: {
-                    delegate.state=""
-                }
-                onClicked: appendTag(modelData)
                 property bool hugeTag: (text.length > 12) && index > 1
                 property bool isExampleTag: text === "example"
                 visible: !hugeTag && !isExampleTag && index < 8 && y < 32
+                MouseArea {
+                    id: tagMouseArea
+                    anchors.fill: parent
+                    onClicked: appendTag(modelData)
+                    // hoverEnabled: true
+                    cursorShape: Qt.PointingHandCursor
+                }
             }
         }
     }
@@ -372,6 +368,5 @@ Rectangle {
         ListElement {
             modelData: "OpenGl"
         }
-
     }
 }

share/qtcreator/welcomescreen/widgets/IconAndLink.qml

@@ -25,21 +25,39 @@
 
 import QtQuick 2.1
 
-Row {
+Rectangle {
     property string iconSource
     property string title: "title"
     property string openUrl
     property string openHelpUrl
-    spacing: 7
+    height: 30
+    width: 231
+
+    color: mouseArea.containsMouse
+           ? creatorTheme.Welcome_HoverColor
+           : creatorTheme.Welcome_BackgroundColor
+
     Image {
+        id: image
         width: 16
         height: 16
+        x: 34
         source: iconSource
+        anchors.verticalCenter: parent.verticalCenter
     }
-    LinkedText {
+    NativeText {
         text: title
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: image.right
+        anchors.leftMargin: 8
+        color: creatorTheme.Welcome_TextColor
         font.pixelSize: 11
-        color: creatorTheme.Welcome_TextColorNormal // 'Qt Account' .. 'User Guide' on lower left
+        font.underline: mouseArea.containsMouse
+    }
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
         onClicked: {
             if (openUrl)
                 gettingStarted.openUrl(openUrl);
@@ -48,3 +66,4 @@ Row {
         }
     }
 }
+

share/qtcreator/welcomescreen/widgets/LeftSideBar.qml

@@ -1,51 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-Row {
-    id: customTab
-    property alias model: repeater.model
-    spacing: 24
-
-    signal itemChanged
-    property int currentIndex: 0
-
-    onCurrentIndexChanged: welcomeMode.activePlugin = currentIndex
-    Component.onCompleted: currentIndex = welcomeMode.activePlugin
-
-    Repeater {
-        id: repeater
-
-        LinkedText {
-            text: title
-            active: customTab.currentIndex === index
-
-            onClicked: {
-                customTab.currentIndex = index
-            }
-        }
-    }
-}

share/qtcreator/welcomescreen/widgets/LinkedText.qml

@@ -1,106 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-NativeText {
-    id: root
-    height: 16
-    color: active ? creatorTheme.Welcome_Link_TextColorActive
-                  : creatorTheme.Welcome_Link_TextColorNormal
-    verticalAlignment: Text.AlignVCenter
-
-    font: fonts.linkFont
-
-    signal clicked
-    signal entered
-    signal exited
-
-    property bool active: false
-
-    property bool hovered: mouseArea.state === "hovered"
-    onActiveChanged: {
-        if (active)
-            mouseArea.state = ""
-    }
-
-    property bool enlargeMouseArea: true
-
-    Rectangle {
-        color: "#909090" // FIXME: theming: Where is this ever visible?
-        radius: 6
-        opacity: root.active
-        z: -1
-        anchors.rightMargin: -6
-        anchors.leftMargin: -6
-        anchors.bottomMargin: -4
-        anchors.topMargin: -4
-        anchors.fill: parent
-    }
-
-    Rectangle {
-        color: "#909090" // FIXME: theming: Where is this ever visible?
-        opacity: root.active
-        z: -1
-        anchors.rightMargin: -6
-        anchors.leftMargin: -6
-        anchors.bottomMargin: -4
-        anchors.topMargin: 10
-        anchors.fill: parent
-    }
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-        anchors.margins: enlargeMouseArea ? -8 : 0
-        hoverEnabled: true
-
-        cursorShape: Qt.PointingHandCursor
-        onEntered: {
-            if (!root.active)
-                mouseArea.state = "hovered"
-            root.entered();
-        }
-        onExited: {
-            mouseArea.state = ""
-            root.exited();
-        }
-        onClicked: {
-            root.focus = true;
-            root.clicked();
-        }
-
-        states: [
-            State {
-                name: "hovered"
-                PropertyChanges {
-                    target: root
-                    font.underline: true
-                }
-            }
-        ]
-    }
-    Accessible.role: Accessible.Link
-}

share/qtcreator/welcomescreen/widgets/LinksBar.qml

@@ -1,146 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-Item {
-    id: tabBar
-
-    height: 60
-    width: parent.width
-
-    property alias model: tabs.model
-
-    Rectangle {
-        id: row
-        width: 100
-        height: 26
-        anchors.top: parent.top
-        anchors.left: parent.left
-        gradient: Gradient {
-            GradientStop { position: 0; color: "#f7f7f7" }
-            GradientStop { position: 1; color: "#e4e4e4" }
-        }
-        NativeText {
-            id: text
-            horizontalAlignment: Qt.AlignHCenter; verticalAlignment: Qt.AlignVCenter
-            anchors.fill: parent
-            text: qsTr("Qt Creator")
-        }
-    }
-
-    Item {
-        anchors.top: parent.top
-        anchors.left: row.right
-        anchors.right: parent.right
-        anchors.bottom: row.bottom
-
-        Rectangle {
-            id: left1
-            anchors.top: parent.top
-            anchors.left: parent.left
-            anchors.bottom: parent.bottom
-            width: 1
-            gradient: Gradient {
-                GradientStop { position: 0; color: "#fcfcfc" }
-                GradientStop { position: 1; color: "#f7f7f7" }
-            }
-        }
-
-        Rectangle {
-            id: left2
-            anchors.top: parent.top
-            anchors.left: left1.right
-            anchors.bottom: parent.bottom
-            width: 1
-            color: "#313131"
-        }
-
-        Rectangle {
-            id: bottom1
-            height: 1
-            anchors.left: left1.right
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            color: "#fbfbfb"
-        }
-
-        Rectangle {
-            id: bottom2
-            height: 1
-            anchors.left: left2.right
-            anchors.right: parent.right
-            anchors.bottom: bottom1.top
-            width: 1
-            color: "#313131"
-        }
-
-        Rectangle {
-            anchors.top: parent.top
-            anchors.left: left2.right
-            anchors.right: parent.right
-            anchors.bottom: bottom2.top
-            gradient: Gradient {
-                GradientStop { position: 0.00; color: "#8e8e8e" }
-                GradientStop { position: 0.07; color: "#8e8e8e" }
-                GradientStop { position: 0.08; color: "#757575" }
-                GradientStop { position: 0.40; color: "#666666" }
-                GradientStop { position: 0.41; color: "#585858" }
-                GradientStop { position: 1.00; color: "#404040" }
-             }
-        }
-    }
-
-    Rectangle {
-        id: background
-        anchors.bottom: parent.bottom
-        width: parent.width
-        anchors.top: row.bottom
-        gradient: Gradient {
-            GradientStop { position: 0; color: "#e4e4e4" }
-            GradientStop { position: 1; color: "#cecece" }
-        }
-        Rectangle {
-            color: "black"
-            height: 1
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-        }
-    }
-
-    Row {
-        height: background.height
-        anchors.top: row.bottom
-        anchors.topMargin: 6
-        width: parent.width
-        Repeater {
-            id: tabs
-            height: parent.height
-            model: tabBar.model
-            delegate: SingleTab { }
-        }
-    }
-}

share/qtcreator/welcomescreen/widgets/PageCaption.qml

@@ -1,54 +0,0 @@
-/****************************************************************************
-**
-** 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
-
-Item {
-    id: pageCaption
-    width: 960
-    height: 40
-
-    property int textOffset: captionText.x + captionText.width
-    property alias caption: captionText.text
-
-    NativeText {
-        id: captionText
-        y: 9
-        color: "#515153"
-        anchors.left: parent.left
-        anchors.leftMargin: 8
-        font.pixelSize: 18
-        font.bold: false
-        font.family: "Helvetica"
-    }
-    Rectangle {
-        height: 1
-        color: "#a0a0a0"
-        anchors.bottomMargin: 8
-        anchors.bottom: parent.bottom
-        anchors.left: parent.left
-        anchors.right: parent.right
-    }
-}

share/qtcreator/welcomescreen/widgets/PageLoader.qml

@@ -31,7 +31,6 @@ Rectangle {
     property alias model: repeater.model
     property int currentIndex: 0
 
-
     Repeater {
         id: repeater
         anchors.fill: parent

share/qtcreator/welcomescreen/widgets/ProjectItem.qml

@@ -25,54 +25,48 @@
 
 import QtQuick 2.1
 
-Item {
+Rectangle {
     id: projectItem
-    width: row.width + 8
+    width: Math.max(projectNameText.width, pathText.width) + projectNameText.x + 11
-    height: text.height
+    height: 48
 
-    Rectangle { // background shown on hover over project item
+    color: mouseArea.containsMouse
-        anchors.fill: parent
+           ? creatorTheme.Welcome_HoverColor
-        color: creatorTheme.Welcome_ProjectItem_BackgroundColorHover
+           : creatorTheme.Welcome_BackgroundColor
-        visible: mouseArea.containsMouse
-    }
 
     property alias projectName: projectNameText.text
     property alias projectPath: pathText.text
 
-    Row {
-        id: row
-        spacing: 5
-
     Image {
-            y: 3
+        id: icon
-            source: "images/project.png"
+        x: 11
+        y: 6
+        source: "image://icons/project/Welcome_ForegroundSecondaryColor"
     }
 
-        Column {
+    NativeText {
-            id: text
+        x: 38
-
-            LinkedText {
         id: projectNameText
-                height: 20
-                font.underline: mouseArea.containsMouse
         font.pixelSize: fonts.linkFont.pixelSize
         font.family: fonts.linkFont.family
-                enlargeMouseArea: false
+        font.underline: mouseArea.containsMouse
+        color: creatorTheme.Welcome_LinkColor
+        anchors.verticalCenter: icon.verticalCenter
     }
+
     NativeText {
         id: pathText
-                height: 20
+        anchors.left: projectNameText.left
-                color: creatorTheme.Welcome_ProjectItem_TextColorFilepath
+        anchors.bottom: projectItem.bottom
+        anchors.bottomMargin: 6
+        color: creatorTheme.Welcome_ForegroundPrimaryColor
         font: fonts.smallPath
     }
-        }
-    }
 
     MouseArea {
         id: mouseArea
         anchors.fill: parent
         hoverEnabled: true
-        cursorShape: Qt.PointingHandCursor
         onClicked: projectWelcomePage.requestProject(filePath);
     }
 }

share/qtcreator/welcomescreen/widgets/RecentProjects.qml

@@ -30,16 +30,9 @@ Rectangle {
     id: projectList
     height: column.height + 200
     width: column.width
-    color: creatorTheme.Welcome_BackgroundColorNormal
+    color: creatorTheme.Welcome_BackgroundColor
 
     property alias model: repeater.model
-//    Behavior on verticalScrollBar.opacity  {
-//        PropertyAnimation {
-
-//        }
-//    }
-
-//    frameVisible: false
 
     Column {
         id: column

share/qtcreator/welcomescreen/widgets/SearchBar.qml

@@ -31,10 +31,9 @@ Rectangle {
     id: searchBar
 
     width: 930
-    height: 27
+    height: 30
-    color: creatorTheme.Welcome_BackgroundColorNormal
+    color: creatorTheme.Welcome_BackgroundColor
-    radius: 6
+    border.color: creatorTheme.Welcome_ForegroundSecondaryColor
-    border.color: "#cccccc" // FIXME: make themable
 
     property alias placeholderText: lineEdit.placeholderText
     property alias text: lineEdit.text
@@ -51,8 +50,8 @@ Rectangle {
         font.pixelSize: 14
         placeholderText:  qsTr("Search...")
         style: TextFieldStyle {
-            placeholderTextColor: creatorTheme.Welcome_TextColorNormal
+            placeholderTextColor: creatorTheme.Welcome_ForegroundSecondaryColor
-            textColor: creatorTheme.Welcome_TextColorNormal
+            textColor: creatorTheme.Welcome_TextColor
             background: Item {
             }
         }

share/qtcreator/welcomescreen/widgets/SessionActionLabel.qml

@@ -25,19 +25,18 @@
 
 import QtQuick 2.1
 
-Image {
+NativeText {
-    id: logo
+    id: root
-    source: "images/qtcreator.png"
+    signal clicked()
-    NativeText {
+    text: qsTr("Clone")
-        y: 21
+    font.pixelSize: 13
-        color: "#424242"
+    font.underline: area.containsMouse
-        text: "Qt Creator"
+    color: creatorTheme.Welcome_LinkColor
-        font.bold: true
+    MouseArea {
-        anchors.left: parent.left
+        id: area
-        anchors.leftMargin: 52
+        anchors.fill: parent
-        anchors.bottom: parent.bottom
+        hoverEnabled: true
-        anchors.bottomMargin: 6
+        onClicked: root.clicked()
-        font.pixelSize: 16
+        anchors.margins: -6
-        font.family: "Helvetica"
     }
 }

share/qtcreator/welcomescreen/widgets/SessionItem.qml

@@ -26,49 +26,49 @@
 import QtQuick 2.1
 
 Item {
-    x: 5
     id: delegate
     property bool expanded: false
     height: columns.height
     width: columns.width
-    property alias name: text.text
+    property alias name: titleText.text
 
     Column {
         id: columns
 
-        Row {
+        Rectangle {
-            id: row1
+            id: rectangle
-            height: text.height
+            height: 30
+            width: 260
 
-            spacing: 7
+            color: (titleArea.containsMouse || collapseArea.containsMouse || delegate.expanded)
+                   ? creatorTheme.Welcome_HoverColor
+                   : creatorTheme.Welcome_BackgroundColor
 
             Image {
-                source: "images/sessions.png"
+                id: sessionIcon
-                anchors.verticalCenter: text.verticalCenter
+                source: "image://icons/session/Welcome_ForegroundSecondaryColor"
-                width: 16
+                x: 11
-                height: 16
+                anchors.verticalCenter: parent.verticalCenter
             }
 
-            LinkedText {
+            NativeText {
-                id: text
+                id: titleText
-
-                onClicked: projectWelcomePage.requestSession(sessionName);
-
-                width: delegate.ListView.view.width - 80
-                height: 28
-                elide: Text.ElideRight
-
-                enlargeMouseArea: false
-
-                Rectangle {
-                    z: -4
-                    // background of session item
-                    color: creatorTheme.Welcome_SessionItem_BackgroundColorHover
                 anchors.fill: parent
-                    visible: iArea.containsMouse || text.hovered
+                anchors.leftMargin: 38
-                    anchors.topMargin: 1
+                elide: Text.ElideRight
-                    anchors.bottomMargin: 1
+                color: creatorTheme.Welcome_LinkColor
-                    anchors.leftMargin: -row1.spacing / 2
+                verticalAlignment: Text.AlignVCenter
+                font.pixelSize: fonts.linkFont.pixelSize
+                font.family: fonts.linkFont.family
+                font.underline: titleArea.containsMouse
+            }
+
+            MouseArea {
+                id: titleArea
+                hoverEnabled: true
+                anchors.fill: parent
+                onClicked: {
+                    projectWelcomePage.requestSession(sessionName);
                 }
             }
         }
@@ -76,10 +76,9 @@ Item {
             z: -1
             property int margin: 6
             id: details
-            height: expanded ? innerColumn.height + margin * 2 : 0
+            height: expanded ? innerColumn.height + margin + 16 : 0
-            width: delegate.ListView.view.width - 8 - margin * 2
+            width: titleArea.width + collapseArea.width
-            color: "#f1f1f1"
+            color: creatorTheme.Welcome_HoverColor
-            radius: 4
             clip: true
             visible: false
 
@@ -89,7 +88,7 @@ Item {
                         script: if (expanded) details.visible = true;
                     }
                     NumberAnimation {
-                        duration: 200
+                        duration: 180
                         easing.type: Easing.InOutQuad
                     }
                     ScriptAction {
@@ -99,45 +98,27 @@ Item {
             }
 
             Column {
-                x: parent.margin + 8
+                x: titleText.x
                 y: parent.margin
                 id: innerColumn
                 spacing: 12
-                width: parent.width - 16
 
                 Repeater {
                     model: projectsPath
                     delegate: Column {
+                        spacing: 4
                         NativeText {
                             text: projectsName[index]
-                            font: fonts.boldDescription
+                            font: fonts.smallPath
-                            color: creatorTheme.Welcome_TextColorNormal
+                            color: creatorTheme.Welcome_TextColor
+                            width: titleText.width
                         }
                         NativeText {
-                            x: 4
+                            text: modelData
-                            function multiLinePath(path) {
-                                if (path.length < 42)
-                                    return path;
-                                var index = 0;
-                                var oldIndex = 0;
-                                while (index != -1 && index < 40) {
-                                    oldIndex = index;
-                                    index = path.indexOf("/", oldIndex + 1);
-                                    if (index == -1)
-                                        index = path.indexOf("\\", oldIndex + 1);
-                                }
-                                var newPath = path.substr(0, oldIndex + 1) + "\n"
-                                        + path.substr(oldIndex + 1, path.length - oldIndex - 1);
-                                return newPath;
-                            }
-                            text: multiLinePath(modelData)
                             font: fonts.smallPath
-                            wrapMode: Text.WrapAnywhere
-                            maximumLineCount: 2
                             elide: Text.ElideRight
-                            height: lineCount == 2 ? font.pixelSize * 2 + 4 : font.pixelSize + 2
+                            color: creatorTheme.Welcome_ForegroundPrimaryColor
-                            color: creatorTheme.Welcome_ProjectItem_TextColorFilepath
+                            width: titleText.width
-                            width: delegate.ListView.view.width - 48
                             MouseArea {
                                 anchors.fill: parent
                                 hoverEnabled: true
@@ -147,7 +128,6 @@ Item {
                                 onExited: {
                                     toolTip.hide()
                                 }
-
                             }
                             ToolTip {
                                 x: 10
@@ -160,51 +140,39 @@ Item {
                 }
 
                 Flow {
-                    x: parent.margin
                     width: parent.width - 2 * parent.margin
                     height: 18
-                    spacing: 4
+                    spacing: 6
 
-                    Image { source: "images/icons/clone.png" }
+                    SessionActionLabel {
-                    LinkedText {
                         text: qsTr("Clone")
-                        onClicked: {
+                        onClicked: root.model.cloneSession(sessionName)
-                            root.model.cloneSession(sessionName);
-                        }
                     }
 
-                    Item {
+                    Rectangle {
                         visible: !defaultSession
-                        width: 16;
+                        width: 1;
-                        height: 10;
+                        height: 13;
+                        color: creatorTheme.Welcome_ForegroundSecondaryColor
                     }
-                    Image {
+
-                        visible: !defaultSession
+                    SessionActionLabel {
-                        source: "images/icons/rename.png"
-                    }
-                    LinkedText {
                         visible: !defaultSession
                         text: qsTr("Rename")
-                        onClicked: {
+                        onClicked: root.model.renameSession(sessionName)
-                            root.model.renameSession(sessionName);
-                        }
                     }
 
-                    Item {
+                    Rectangle {
                         visible: y === 0 && !defaultSession
-                        width: 16;
+                        width: 1;
-                        height: 10;
+                        height: 13;
+                        color: creatorTheme.Welcome_ForegroundSecondaryColor
                     }
-                    Image {
+
-                        visible: !defaultSession
+                    SessionActionLabel {
-                        source: "images/icons/delete.png"
-                    }
-                    LinkedText {
                         visible: !defaultSession
                         text: qsTr("Delete")
-                        onClicked: {
+                        onClicked: root.model.deleteSession(sessionName)
-                            root.model.deleteSession(sessionName);
-                        }
                     }
                 }
             }
@@ -212,47 +180,27 @@ Item {
     }
 
     Item {
-        x: delegate.ListView.view.width - 65
+        x: rectangle.width
-        width: 38
+        width: 28
-        height: text.height
+        height: titleArea.height
-        Item {
+        Rectangle {
             id: collapseButton
-            visible: text.hovered || iArea.containsMouse || delegate.expanded
-
-            property color color: iArea.containsMouse ? creatorTheme.Welcome_SessionItemExpanded_BackgroundColorHover
-                                                      : creatorTheme.Welcome_SessionItemExpanded_BackgroundColorNormal
-
             anchors.fill: parent
+            color: (collapseArea.containsMouse || delegate.expanded)
+                   ? creatorTheme.Welcome_HoverColor
+                   : creatorTheme.Welcome_BackgroundColor
+
             Image {
-                x: 4
+                x: 6
                 y: 7
-                source: "images/info.png"
+                visible: (collapseArea.containsMouse || delegate.expanded || titleArea.containsMouse)
-            }
+                source: "image://icons/expandarrow/Welcome_ForegroundSecondaryColor"
-            Image {
+                rotation: delegate.expanded ? 180 : 0
-                x: 20
-                y: 7
-                source: delegate.expanded ? "images/arrow_up.png" : "images/arrow_down.png"
-            }
-            Rectangle {
-                color: collapseButton.color
-                z: -1
-                radius: creatorTheme.WidgetStyle === 'StyleFlat' ? 0 : 6
-                anchors.fill: parent
-                anchors.topMargin: 1
-                anchors.bottomMargin: 1
-            }
-
-            Rectangle {
-                color: collapseButton.color
-                z: -1
-                anchors.fill: parent
-                anchors.topMargin: 6
-                visible: details.visible
             }
         }
 
         MouseArea {
-            id: iArea
+            id: collapseArea
             anchors.fill: parent
             hoverEnabled: true
             onClicked: {

share/qtcreator/welcomescreen/widgets/Sessions.qml

@@ -26,18 +26,17 @@
 import QtQuick 2.1
 import widgets 1.0
 
-Item {
+Rectangle {
     id: root
     property var model
-    property int topMargin: 6
     height: content.contentHeight + 200
+    color: creatorTheme.Welcome_BackgroundColor
 
     ListView {
         id: content
         model: root.model
 
         anchors.fill: parent
-        anchors.topMargin: topMargin
         snapMode: ListView.SnapToItem
         clip: true
         interactive: false

share/qtcreator/welcomescreen/widgets/SideBar.qml

@@ -35,115 +35,70 @@ ColumnLayout {
     property alias currentIndex: tabs.currentIndex
     property alias model: tabs.model
 
+    readonly property int lrPadding: 34
+
     Item {
         id: modeArea
 
         z: 1
         Layout.fillWidth: true
-        Layout.preferredWidth: tabs.width + 16 * 2
+        Layout.preferredWidth: tabs.width + lrPadding * 2
         Layout.preferredHeight: tabs.height + screenDependHeightDistance * 2
 
-        Component {
-            id: imageBackground
-            Image {
-                fillMode: Image.Tile
-                source: "images/background.png"
-                anchors.fill: parent
-            }
-        }
-        Component {
-            id: flatBackground
         Rectangle {
-                color: creatorTheme.Welcome_SideBar_BackgroundColor
+            color: creatorTheme.Welcome_BackgroundColor
-            }
-        }
-        Loader {
-            id: topLeftLoader
             anchors.fill: parent
-            sourceComponent: creatorTheme.WidgetStyle === 'StyleFlat' ? flatBackground : imageBackground;
         }
 
         Tabs {
             anchors.verticalCenter: parent.verticalCenter
-            x: 16
+            x: lrPadding
-            width: Math.max(modeArea.width - 16 * 2, implicitWidth)
+            width: Math.max(modeArea.width - lrPadding * 2, implicitWidth)
 
             id: tabs
             spacing: Math.round((screenDependHeightDistance / count) + 10)
         }
-
-        Rectangle {
-            color: creatorTheme.WidgetStyle === 'StyleFlat' ?
-                       creatorTheme.Welcome_SideBar_BackgroundColor : creatorTheme.Welcome_DividerColor
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: 0
-            height: 1
     }
 
     Rectangle {
-            color: creatorTheme.WidgetStyle === 'StyleFlat' ?
+        color: creatorTheme.Welcome_BackgroundColor
-                       creatorTheme.Welcome_SideBar_BackgroundColor : creatorTheme.Welcome_DividerColor
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: -1
-            height: 1
-            opacity: 0.6
-        }
-
-        Rectangle {
-            color: creatorTheme.WidgetStyle === 'StyleFlat' ?
-                       creatorTheme.Welcome_SideBar_BackgroundColor : creatorTheme.Welcome_DividerColor
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.bottom: parent.bottom
-            anchors.bottomMargin: -2
-            height: 1
-            opacity: 0.2
-        }
-    }
-
-    Rectangle {
-        color: creatorTheme.Welcome_SideBar_BackgroundColor
 
         Layout.fillWidth: true
-        Layout.preferredWidth: innerColumn.width + 20
+        Layout.preferredWidth: upperColumn.width + 20
         Layout.fillHeight: true
 
         ColumnLayout {
-            id: innerColumn
+            id: upperColumn
 
-            x: 12
+            x: lrPadding
 
-            spacing: 4
+            spacing: 8
 
-            property int spacerHeight: screenDependHeightDistance - 14
+            property int spacerHeight: screenDependHeightDistance
 
             Item {
-                Layout.preferredHeight: innerColumn.spacerHeight
+                Layout.preferredHeight: upperColumn.spacerHeight
             }
 
             NativeText {
                 text: qsTr("New to Qt?")
-                color: creatorTheme.Welcome_TextColorNormal
+                color: creatorTheme.Welcome_TextColor
                 font.pixelSize: 18
             }
 
             NativeText {
                 id: gettingStartedText
 
-                Layout.preferredWidth: innerColumn.width
+                Layout.preferredWidth: upperColumn.width
 
                 text: qsTr("Learn how to develop your own applications and explore Qt Creator.")
-                color: creatorTheme.Welcome_TextColorNormal
+                color: creatorTheme.Welcome_ForegroundPrimaryColor
                 font.pixelSize: 12
                 wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
 
             Item {
-                Layout.preferredHeight: innerColumn.spacerHeight
+                Layout.preferredHeight: 4
             }
 
             Button {
@@ -156,38 +111,34 @@ ColumnLayout {
             }
 
             Item {
-                Layout.preferredHeight: innerColumn.spacerHeight
+                Layout.preferredHeight: upperColumn.spacerHeight * 2
+            }
         }
 
         ColumnLayout {
-                spacing: 16
+            anchors.top: upperColumn.bottom
+            anchors.topMargin: 8
 
             IconAndLink {
-                    iconSource: "images/icons/qt_account.png"
+                iconSource: "image://icons/qtaccount"
                 title: qsTr("Qt Account")
                 openUrl: "https://account.qt.io"
             }
             IconAndLink {
-                    iconSource: "images/icons/qt_cloud.png"
+                iconSource: "image://icons/community"
-                    title: qsTr("Qt Cloud Services")
-                    openUrl: "https://developer.qtcloudservices.com"
-                }
-                IconAndLink {
-                    iconSource: "images/icons/onlineCommunity.png"
                 title: qsTr("Online Community")
                 openUrl: "http://forum.qt.io"
             }
             IconAndLink {
-                    iconSource: "images/icons/blogs.png"
+                iconSource: "image://icons/blogs"
                 title: qsTr("Blogs")
                 openUrl: "http://planet.qt.io"
             }
             IconAndLink {
-                    iconSource: "images/icons/userGuide.png"
+                iconSource: "image://icons/userguide"
                 title: qsTr("User Guide")
                 openHelpUrl: "qthelp://org.qt-project.qtcreator/doc/index.html"
             }
         }
     }
-    }
 }

share/qtcreator/welcomescreen/widgets/ToolTip.qml

@@ -78,25 +78,15 @@ Item {
 
     Rectangle {
         anchors.fill: parent
-
+        color: creatorTheme.Welcome_BackgroundColor
         border.width: 1
-        smooth: true
+        border.color: creatorTheme.Welcome_ForegroundSecondaryColor
-        radius: 2
-        gradient: Gradient {
-            GradientStop {
-                position: 0.00;
-                color: "#ffffff";
-            }
-            GradientStop {
-                position: 1.00;
-                color: "#e4e5f0";
-            }
-        }
     }
 
     NativeText {
         x: toolTip.margin
         y: toolTip.margin
         id: text
+        color: creatorTheme.Welcome_TextColor
     }
 }

src/libs/utils/theme/theme.h

@@ -183,27 +183,13 @@ public:
 
         /* Welcome Plugin */
 
-        Welcome_TextColorNormal,
+        Welcome_TextColor,
-        Welcome_TextColorHeading,  // #535353 // Sessions, Recent Projects
+        Welcome_ForegroundPrimaryColor,
-        Welcome_BackgroundColorNormal,   // #ffffff
+        Welcome_ForegroundSecondaryColor,
-        Welcome_DividerColor,      // #737373
+        Welcome_BackgroundColor,
-        Welcome_Button_BorderColorNormal,
+        Welcome_DividerColor,
-        Welcome_Button_BorderColorPressed,
+        Welcome_LinkColor,
-        Welcome_Button_TextColorNormal,
+        Welcome_HoverColor,
-        Welcome_Button_TextColorPressed,
-        Welcome_Link_TextColorNormal,
-        Welcome_Link_TextColorActive,
-        Welcome_Link_BackgroundColor,
-        Welcome_Caption_TextColorNormal,
-        Welcome_SideBar_BackgroundColor,
-
-        Welcome_ProjectItem_TextColorFilepath,
-        Welcome_ProjectItem_BackgroundColorHover,
-
-        Welcome_SessionItem_BackgroundColorNormal,
-        Welcome_SessionItem_BackgroundColorHover,
-        Welcome_SessionItemExpanded_BackgroundColorNormal,
-        Welcome_SessionItemExpanded_BackgroundColorHover,
 
         /* VcsBase Plugin */
         VcsBase_FileStatusUnknown_TextColor,

src/plugins/welcome/welcome.qrc

@@ -4,5 +4,24 @@
         <file>images/mode_welcome@2x.png</file>
         <file>images/mode_welcome_mask.png</file>
         <file>images/mode_welcome_mask@2x.png</file>
+        <file>images/blogs.png</file>
+        <file>images/blogs@2x.png</file>
+        <file>images/community.png</file>
+        <file>images/community@2x.png</file>
+        <file>images/mode_edit_mask.png</file>
+        <file>images/open.png</file>
+        <file>images/open@2x.png</file>
+        <file>images/project.png</file>
+        <file>images/project@2x.png</file>
+        <file>images/qtaccount.png</file>
+        <file>images/qtaccount@2x.png</file>
+        <file>images/session.png</file>
+        <file>images/session@2x.png</file>
+        <file>images/userguide.png</file>
+        <file>images/userguide@2x.png</file>
+        <file>images/new.png</file>
+        <file>images/new@2x.png</file>
+        <file>images/expandarrow.png</file>
+        <file>images/expandarrow@2x.png</file>
     </qresource>
 </RCC>

src/plugins/welcome/welcomeplugin.cpp

@@ -48,6 +48,7 @@
 
 #include <QDir>
 #include <QQmlPropertyMap>
+#include <QQuickImageProvider>
 
 #ifdef USE_QUICK_WIDGET
     #include <QtQuickWidgets/QQuickWidget>
@@ -82,6 +83,44 @@ static QString resourcePath()
     return FileUtils::normalizePathName(ICore::resourcePath());
 }
 
+class WelcomeImageIconProvider : public QQuickImageProvider
+{
+public:
+    WelcomeImageIconProvider()
+        : QQuickImageProvider(Pixmap)
+    {
+    }
+
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize) override
+    {
+        Q_UNUSED(requestedSize)
+
+        QString maskFile;
+        Theme::Color themeColor = Theme::Welcome_ForegroundPrimaryColor;
+
+        const QStringList elements = id.split(QLatin1Char('/'));
+
+        if (!elements.empty())
+            maskFile = elements.first();
+
+        if (elements.count() >= 2) {
+            const static QMetaObject &m = Theme::staticMetaObject;
+            const static QMetaEnum e = m.enumerator(m.indexOfEnumerator("Color"));
+            bool success = false;
+            int value = e.keyToValue(elements.at(1).toLatin1(), &success);
+            if (success)
+                themeColor = Theme::Color(value);
+        }
+
+        const QString fileName = QString::fromLatin1(":/welcome/images/%1.png").arg(maskFile);
+        const Icon icon({{fileName, themeColor}}, Icon::Tint);
+        const QPixmap result = icon.pixmap();
+        if (size)
+            *size = result.size();
+        return result;
+    }
+};
+
 class WelcomeMode : public IMode
 {
     Q_OBJECT
@@ -202,6 +241,7 @@ void WelcomeMode::facilitateQml(QQmlEngine *engine)
     QStringList importPathList = engine->importPathList();
     importPathList << resourcePath() + QLatin1String("/welcomescreen");
     engine->setImportPathList(importPathList);
+    engine->addImageProvider(QLatin1String("icons"), new WelcomeImageIconProvider);
     if (!debug)
         engine->setOutputWarningsToStandardError(false);
 

src/tools/icons/qtcreatoricons.svg

@@ -855,7 +855,8 @@
      id="layer1"
      style="display:inline">
     <g
-       id="src/plugins/coreplugin/images/dir">
+       id="src/plugins/coreplugin/images/dir"
+       transform="translate(102,0)">
       <path
          sodipodi:nodetypes="ccccccccc"
          inkscape:connector-curvature="0"
@@ -883,7 +884,8 @@
          y="584" />
     </g>
     <g
-       id="src/plugins/coreplugin/images/progressbar">
+       id="src/plugins/coreplugin/images/progressbar"
+       transform="translate(96,0)">
       <rect
          ry="1"
          y="588.5"
@@ -936,118 +938,6 @@
          y="584"
          style="fill:none" />
     </g>
-    <g
-       id="share/qtcreator/welcomescreen/widgets/images/info">
-      <circle
-         r="7"
-         cy="592"
-         cx="193"
-         id="path4146"
-         style="opacity:1;fill:#4a64b8;fill-opacity:1;stroke:none;stroke-width:14.46399975;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <path
-         sodipodi:nodetypes="ccccccccccccccc"
-         inkscape:connector-curvature="0"
-         d="m 191,591 3,0 0,4 0.5,0 0,1 -3,0 0,-1 0.5,0 0,-3 -1,0 m 1,-4 2,0 0,2 -2,0 z"
-         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none"
-         id="path4177" />
-      <rect
-         id="rect5013"
-         width="16"
-         height="16"
-         x="185"
-         y="584"
-         style="fill:none" />
-    </g>
-    <g
-       id="share/qtcreator/welcomescreen/widgets/images/icons/rename">
-      <circle
-         style="opacity:1;fill:#e0a714;fill-opacity:1;stroke:none;stroke-width:14.46399975;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         id="circle4169"
-         cx="209"
-         cy="592"
-         r="7" />
-      <path
-         d="m 209.5,587 0,7.5 2.5,0 c 0.98613,-0.46967 1.03033,-3.46404 0,-4 l -2,0 m -3,2 -2,0 c -0.5,0.5 -0.5,1.5 0,2 l 2.5,0 0,-3 c -0.0352,-0.46696 -0.43419,-0.98656 -1,-1 l -2,0"
-         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="path4991"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccccccccccc" />
-      <rect
-         style="fill:none"
-         y="584"
-         x="201"
-         height="16"
-         width="16"
-         id="rect5018" />
-    </g>
-    <g
-       id="share/qtcreator/welcomescreen/widgets/images/icons/delete">
-      <circle
-         r="7"
-         cy="592"
-         cx="225"
-         id="circle4171"
-         style="opacity:1;fill:#ed471a;fill-opacity:1;stroke:none;stroke-width:14.46399975;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <path
-         d="m 222,589 1.5,0 1,-1 1,0 1,1 1.5,0 0,1 -6,0 z m 0.5,2 5,0 -0.5,5 -4,0 -0.5,-5"
-         style="fill:#ffffff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="path4983"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccccccccccccc" />
-      <rect
-         id="rect5020"
-         width="16"
-         height="16"
-         x="217"
-         y="584"
-         style="fill:none" />
-    </g>
-    <g
-       id="share/qtcreator/welcomescreen/widgets/images/icons/clone">
-      <circle
-         style="opacity:1;fill:#329ace;fill-opacity:1;stroke:none;stroke-width:14.46399975;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-         id="circle4173"
-         cx="241"
-         cy="592"
-         r="7" />
-      <path
-         d="m 243.5,591 0,5 m -2.5,-2.5 5,0 m -10,-3 5,0 m -2.5,-2.5 0,5"
-         style="fill:none;fill-rule:evenodd;stroke:#ffffff;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
-         id="path5000"
-         inkscape:connector-curvature="0"
-         sodipodi:nodetypes="cccccccc" />
-      <rect
-         style="fill:none"
-         y="584"
-         x="233"
-         height="16"
-         width="16"
-         id="rect5022" />
-    </g>
-    <g
-       id="share/qtcreator/welcomescreen/widgets/images/arrow_down">
-      <path
-         sodipodi:nodetypes="ccc"
-         inkscape:connector-curvature="0"
-         id="path5074"
-         d="m 251.75,589.75 5.25,5.25 5.25,-5.25"
-         style="fill:none;fill-rule:evenodd;stroke:#666666;stroke-width:1.40999997;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
-      <rect
-         style="fill:none"
-         y="584"
-         x="249"
-         height="16"
-         width="16"
-         id="rect5076" />
-    </g>
-    <use
-       x="0"
-       y="0"
-       xlink:href="#share/qtcreator/welcomescreen/widgets/images/arrow_down"
-       id="share/qtcreator/welcomescreen/widgets/images/arrow_up"
-       transform="matrix(1,0,0,-1,16,1184)"
-       width="100%"
-       height="100%" />
     <g
        id="src/libs/utils/images/progressindicator_small"
        clip-path="url(#clipPath4556)"
@@ -3268,6 +3158,173 @@
          d="m 52,564 c 8,-8 8,-8 8,-8"
          style="fill:none;stroke:#000000;stroke-width:1.42;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1.0;stroke-dasharray:none" />
     </g>
+    <g
+       transform="translate(-34,374)"
+       id="src/plugins/welcome/images/new">
+      <rect
+         id="rect4886-1-4"
+         height="16"
+         width="16"
+         y="209.99899"
+         x="50"
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      <rect
+         id="rect4922-3"
+         height="16"
+         width="2"
+         y="210"
+         x="57"
+         style="fill:#000000;fill-opacity:1" />
+      <rect
+         id="rect4924-6"
+         height="2"
+         width="16"
+         y="217"
+         x="50"
+         style="fill:#000000;fill-opacity:1" />
+    </g>
+    <g
+       transform="translate(-68,374)"
+       id="src/plugins/welcome/images/open">
+      <rect
+         id="rect4886-1-5"
+         height="16"
+         width="16"
+         y="210"
+         x="100"
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      <polygon
+         id="polygon4927-6"
+         points="102,220 102,215 114.637,215 115,213 108,213 106,211 100,211 100,220 100,224 101,224 102,224 104,224 113,224 116,217 104,217 102.715,220 "
+         style="fill:#000000;fill-opacity:1" />
+    </g>
+    <g
+       transform="translate(-202,374)"
+       id="src/plugins/welcome/images/session">
+      <rect
+         id="rect4886-1-1"
+         height="16"
+         width="16"
+         y="210"
+         x="250"
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      <path
+         id="path4942-1"
+         d="m 252,212 0,12 12,0 0,-12 -12,0 z m 4,10 0,-8 5,3.999 -5,4.001 z"
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1" />
+    </g>
+    <g
+       transform="translate(-86,374)"
+       id="src/plugins/welcome/images/expandarrow">
+      <rect
+         id="rect4961-9"
+         height="16"
+         width="16"
+         y="210"
+         x="150"
+         style="fill:#ffffff;fill-opacity:1" />
+      <polygon
+         id="polygon4959-0"
+         points="162,215 158,220 154,215 "
+         style="fill:#000000;fill-opacity:1"
+         transform="translate(0,1)" />
+    </g>
+    <g
+       transform="translate(-220,374)"
+       id="src/plugins/welcome/images/project">
+      <rect
+         id="rect4950-8"
+         height="16"
+         width="16"
+         y="210"
+         x="300"
+         style="fill:#ffffff;fill-opacity:1" />
+      <polygon
+         id="polygon4948-6"
+         points="308,215 314,215 314,223 302,223 302,213 306,213 "
+         style="fill:#000000;fill-opacity:1" />
+    </g>
+    <g
+       transform="translate(46,324)"
+       id="src/plugins/welcome/images/qtaccount">
+      <rect
+         id="rect4886-1"
+         height="16"
+         width="16"
+         y="260"
+         x="50"
+         style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-opacity:1" />
+      <path
+         sodipodi:nodetypes="csscsccscccsc"
+         style="fill:#000000;fill-opacity:1"
+         inkscape:connector-curvature="0"
+         d="m 60.447,269.795 c -0.207,-0.04 -0.431,-0.726 0,-1.363 0.521,-0.77 1.225,-2.879 1.225,-4.146 0,-2.366 -1.645,-4.284 -3.672,-4.285 -2.027,0.001 -3.672,1.919 -3.672,4.285 0,1.268 0.701,3.377 1.225,4.146 0.43,0.638 0.206,1.323 0,1.363 -3.284,0.648 -5.053,1.389 -5.053,3.408 l 0,1.798 7.5,0 7.5,0 0,-1.798 c 0,-2.019 -1.77,-2.76 -5.053,-3.408 z"
+         id="path4884-6" />
+    </g>
+    <g
+       transform="translate(-38,324)"
+       id="src/plugins/welcome/images/blogs">
+      <rect
+         id="rect4904-3"
+         height="16"
+         width="16"
+         y="260"
+         x="150"
+         style="fill:#ffffff;fill-opacity:1" />
+      <ellipse
+         style="fill:#000000;fill-opacity:1"
+         cx="151.74353"
+         cy="274.25867"
+         id="circle4896-4"
+         rx="1.7435256"
+         ry="1.7418367" />
+      <path
+         id="path4900-5"
+         d="m 150.00001,260.001 0,3.65466 c 7.11422,0.007 12.3428,5.23401 12.3428,12.34434 l 3.6572,10e-4 c 0,-8.83117 -7.16227,-15.993 -16,-16 z"
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1"
+         sodipodi:nodetypes="ccccc" />
+      <path
+         id="path4902-7"
+         d="m 150.5665,266.32241 c -0.18916,0 -0.37933,0.008 -0.56649,0.02 l 0,3.38368 c 0.18616,-0.017 0.37532,-0.027 0.56649,-0.027 3.3119,0 5.72701,2.41277 5.72701,5.72146 0,0.19599 -0.011,0.38897 -0.028,0.57995 l 3.38696,0 c 0.012,-0.19198 0.02,-0.38496 0.02,-0.57995 0,-5.02452 -4.07657,-9.09814 -9.10597,-9.09814 z"
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1" />
+    </g>
+    <g
+       transform="translate(-72,324)"
+       id="src/plugins/welcome/images/community">
+      <rect
+         id="rect4909-9"
+         height="16"
+         width="16"
+         y="260"
+         x="200"
+         style="fill:#ffffff;fill-opacity:1" />
+      <path
+         id="path4907-4"
+         d="m 211.523,260 -11.523,0 0,13 6,0 0,3 4.537,-3 5.463,0 0,-7.331 C 216,262.563 214.5,260 211.523,260 Z"
+         inkscape:connector-curvature="0"
+         style="fill:#000000;fill-opacity:1"
+         sodipodi:nodetypes="sccccccss" />
+    </g>
+    <g
+       id="src/plugins/welcome/images/userguide"
+       transform="translate(16,0)">
+      <rect
+         style="fill:#ffffff;fill-opacity:1"
+         x="128"
+         y="584"
+         width="16"
+         height="16"
+         id="rect4909-9-8" />
+      <path
+         sodipodi:nodetypes="ssssscssccscsssccscccccsccssscccscsccccscsscccc"
+         inkscape:connector-curvature="0"
+         d="m 136,584 c -4.4176,0 -8,3.5824 -8,8 0,4.4176 3.5824,8 8,8 4.4176,0 8,-3.5824 8,-8 0,-4.4176 -3.5824,-8 -8,-8 z m 0.76817,12.9456 c -0.2192,0.2152 -0.4832,0.3216 -0.7912,0.3216 -0.1496,0 -0.2912,-0.028 -0.4264,-0.084 -0.1352,-0.056 -0.2544,-0.1304 -0.3568,-0.224 -0.1032,-0.0936 -0.184,-0.2056 -0.2456,-0.336 -0.0608,-0.1304 -0.0904,-0.2704 -0.0904,-0.42 0,-0.2984 0.1096,-0.5552 0.3288,-0.7696 0.2184,-0.2144 0.4824,-0.3216 0.7904,-0.3216 0.2992,0 0.56,0.1024 0.784,0.308 0.224,0.2056 0.336,0.4576 0.336,0.756 0,0.2976 -0.1104,0.5544 -0.3288,0.7696 z m 2.1904,-6.384 c -0.0832,0.2336 -0.196,0.448 -0.336,0.644 -0.14,0.196 -0.3008,0.3832 -0.4832,0.56 -0.1824,0.1776 -0.376,0.364 -0.5816,0.56 -0.1304,0.1208 -0.2424,0.2288 -0.336,0.3216 -0.0928,0.0936 -0.1704,0.1888 -0.2304,0.2872 -0.0608,0.0976 -0.1056,0.2096 -0.1336,0.336 -0.0272,0.1256 -0.0416,0.2776 -0.0416,0.4552 l 0,0.27418 -1.6808,0 0,-0.51178 c 0,-0.2048 0.012,-0.38 0.0352,-0.5248 0.0232,-0.1448 0.0648,-0.2752 0.1256,-0.392 0.0608,-0.1168 0.14,-0.2288 0.2384,-0.336 0.0976,-0.1072 0.2168,-0.236 0.3568,-0.3848 l 1.0784,-1.092 c 0.2328,-0.2336 0.3504,-0.536 0.3504,-0.9096 0,-0.364 -0.1192,-0.66 -0.3568,-0.8888 -0.2384,-0.2288 -0.5392,-0.3432 -0.9032,-0.3432 -0.392,0 -0.7144,0.1328 -0.9664,0.3992 -0.2512,0.2664 -0.396,0.5904 -0.4336,0.9728 l -1.792,-0.14 c 0.056,-0.448 0.1728,-0.8472 0.3504,-1.1968 0.1776,-0.3504 0.4088,-0.6464 0.6928,-0.8888 0.284,-0.2424 0.6144,-0.4272 0.9872,-0.5528 0.3728,-0.1264 0.7832,-0.1888 1.232,-0.1888 0.4192,0 0.8096,0.0608 1.1688,0.1824 0.3592,0.1216 0.672,0.2968 0.9376,0.5248 0.2664,0.2288 0.4744,0.5136 0.6232,0.8536 0.1488,0.3408 0.224,0.7304 0.224,1.1688 8e-4,0.3056 -0.0416,0.5768 -0.1256,0.8104 z"
+         id="path5457-0-5"
+         style="display:inline" />
+    </g>
   </g>
   <g
      inkscape:groupmode="layer"