Commit 748c4ac5 authored by Alessandro Portale's avatar Alessandro Portale

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's avatarOrgad Shaneh <orgads@gmail.com>
Reviewed-by: default avatarAlessandro Portale <alessandro.portale@theqtcompany.com>
parent c6849c56
......@@ -135,25 +135,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
Debugger_Breakpoint_TextMarkColor=ffff4040
Welcome_BackgroundColorNormal=normalBackground
Welcome_Button_BorderColorNormal=0
Welcome_Button_BorderColorPressed=0
Welcome_Button_TextColorNormal=ffe7e7e7
Welcome_Button_TextColorPressed=ffffffff
Welcome_Caption_TextColorNormal=ff4acb47
Welcome_DividerColor=ff232323
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
Welcome_TextColor=text
Welcome_ForegroundPrimaryColor=ff999999
Welcome_ForegroundSecondaryColor=ff808080
Welcome_BackgroundColor=normalBackground
Welcome_DividerColor=ff555555
Welcome_HoverColor=ff444444
Welcome_LinkColor=ff5caa15
VcsBase_FileStatusUnknown_TextColor=text
VcsBase_FileAdded_TextColor=ff00ff00
......
......@@ -137,25 +137,13 @@ Debugger_WatchItem_ValueChanged=ffbf0303
Debugger_Breakpoint_TextMarkColor=ffff4040
Welcome_BackgroundColorNormal=normalBackground
Welcome_Button_BorderColorNormal=ff727476
Welcome_Button_BorderColorPressed=ff727476
Welcome_Button_TextColorNormal=text
Welcome_Button_TextColorPressed=text
Welcome_Caption_TextColorNormal=text
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=ff404244
Welcome_ForegroundSecondaryColor=ff727476
Welcome_BackgroundColor=ffffffff
Welcome_DividerColor=ffd6d6d6
Welcome_Link_BackgroundColor=normalBackground
Welcome_Link_TextColorActive=text
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
Welcome_HoverColor=fff6f6f6
Welcome_LinkColor=ff5caa15
VcsBase_FileStatusUnknown_TextColor=ff000000
VcsBase_FileAdded_TextColor=ff00aa00
......
......@@ -129,25 +129,13 @@ Debugger_WatchItem_ValueChanged=ffc80000
Debugger_Breakpoint_TextMarkColor=ffff4040
Welcome_BackgroundColorNormal=ffffffff
Welcome_Button_BorderColorNormal=ff737373
Welcome_Button_BorderColorPressed=ff333333
Welcome_Button_TextColorNormal=ff000000
Welcome_Button_TextColorPressed=ffc0c0c0
Welcome_Caption_TextColorNormal=ff328930
Welcome_DividerColor=ff737373
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
Welcome_TextColor=ff000000
Welcome_ForegroundPrimaryColor=ff404244
Welcome_ForegroundSecondaryColor=ff727476
Welcome_BackgroundColor=ffffffff
Welcome_DividerColor=ffd6d6d6
Welcome_HoverColor=fff6f6f6
Welcome_LinkColor=ff5caa15
VcsBase_FileStatusUnknown_TextColor=ff000000
VcsBase_FileAdded_TextColor=ff00aa00
......
......@@ -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
color: creatorTheme.Welcome_TextColorHeading
y: screenDependHeightDistance + titleY
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
}
}
}
......@@ -41,7 +41,6 @@ Item {
model: exampleSetModel
textRole: "text"
onCurrentIndexChanged: {
if (comboBox.model === undefined)
return;
......
......@@ -38,93 +38,47 @@ Button {
padding.right: 14
background: Item {
anchors.fill: parent
implicitWidth: 160
implicitHeight: 30
Image {
id: icon
x: 11
y: 8
z: 1
x: 4
y: -6
width: 32
height: 32
height: 16
width: 16
source: button.iconSource
visible: button.iconSource != ""
}
implicitWidth: 160
implicitHeight: 30
Rectangle {
id: rectangle
anchors.fill: parent
antialiasing: true
radius: (creatorTheme.WidgetStyle === 'StyleFlat') ? 0 : 3
visible: !(button.pressed || button.checked)
gradient: Gradient {
GradientStop {
position: 0
color: (creatorTheme.WidgetStyle === 'StyleFlat') ? "#232323" : "#f9f9f9"
}
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
color: (button.checked || button.pressed)
? creatorTheme.Welcome_ForegroundPrimaryColor
: (button.hovered
? creatorTheme.Welcome_HoverColor
: creatorTheme.Welcome_BackgroundColor)
border.width: 1
border.color: (button.checked || button.pressed)
? creatorTheme.Welcome_ForegroundPrimaryColor
: creatorTheme.Welcome_ForegroundSecondaryColor
}
}
label: Text {
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
text: button.text
color: button.pressed || button.checked
? creatorTheme.Welcome_Button_TextColorPressed
: creatorTheme.Welcome_Button_TextColorNormal
font.pixelSize: 15
font.bold: false
smooth: true
}
id: text
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
text: button.text
color: (button.checked || button.pressed)
? creatorTheme.Welcome_BackgroundColor
: creatorTheme.Welcome_TextColor
font.pixelSize: 15
font.bold: false
smooth: true
}
}
}
}
/****************************************************************************
**
** 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
}
}
}
}
......@@ -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"
}
}
}
......@@ -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 {
}
}
}
/****************************************************************************
**
** 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