Skip to content

Q
qtquickcontrols-nemo
Commit af91a9bd authored by Chupligin Sergey's avatar Chupligin Sergey
Browse files
Options

[Theming] update some components size and color values

parent 006b3dc7
Hide whitespace changes
Inline Side-by-side
Showing with 75 additions and 63 deletions
src/controls/ButtonRow.qml
View file @ af91a9bd
......@@ -36,8 +36,8 @@ import QtQuick.Controls.Styles.Nemo 1.0
Rectangle {
id: main
width: childrenRect.width
color: "#313131"
height: size.dp(40)
color: Theme.fillDarkColor
height: Theme.itemHeightSmall
property ListModel model: ListModel {}
property bool enabled: true
property int currentIndex: -1
......@@ -55,8 +55,8 @@ Rectangle {
y: size.dp(-5)
width: rowElement.children[main.currentIndex].width || 0
height: size.dp(50)
color: "#0091e5"
height: Theme.itemHeightSmall
color: Theme.accentColor
visible: main.currentIndex > -1
......
src/controls/Header.qml
View file @ af91a9bd
......@@ -62,7 +62,7 @@ Item {
PropertyChanges {
target: toolBarRect
width: parent.width
height: size.dp(75)
height: Theme.itemHeightExtraLarge
}
},
State {
......@@ -91,7 +91,7 @@ Item {
}
PropertyChanges {
target: toolBarRect
width: size.dp(75)
width: Theme.itemHeightExtraLarge
height: parent.height
}
}
......
src/controls/HeaderToolsLayout.qml
View file @ af91a9bd
......@@ -26,7 +26,7 @@ Item {
Rectangle {
id: backButton
width: opacity ? size.dp(60) : 0
anchors.leftMargin: size.dp(20)
anchors.leftMargin: Theme.itemSpacingLarge
//check if Stack.view has already been initialized as well
anchors.verticalCenter: parent.verticalCenter
antialiasing: true
......@@ -46,22 +46,24 @@ Item {
MouseArea {
id: backmouse
anchors.fill: parent
anchors.margins: size.dp(-10)
anchors.margins: -Theme.itemSpacingSmall
onClicked: header && header.stackView && header.stackView.pop()
}
}
Label {
id: titleTxt
anchors.right: toolButtonsContainer.left
anchors.left: backButton.visible ? backButton.right : parent.left
anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: size.dp(20)
anchors.rightMargin: size.dp(20)
anchors{
right: toolButtonsContainer.left
left: backButton.visible ? backButton.right : parent.left
verticalCenter: parent.verticalCenter
leftMargin: Theme.itemSpacingLarge
rightMargin: Theme.itemSpacingLarge
}
clip: true
font.family: Theme.fontFamily
color: Theme.textColor
font.pointSize: size.dp(24)
font.pointSize: Theme.fontSizeLarge
font.weight: Font.Bold
LinearGradient {
anchors.right: parent.right
......@@ -106,9 +108,11 @@ Item {
Image {
id: dots
anchors.right: parent.right
anchors.rightMargin: size.dp(20)
anchors.verticalCenter: parent.verticalCenter
anchors{
right: parent.right
rightMargin: Theme.itemSpacingLarge
verticalCenter: parent.verticalCenter
}
visible: drawerLevels && drawerLevels.length > 1
source: "../Styles/Nemo/images/dots-vertical.png"
rotation: isUiPortrait ? 0 : 90
......
src/controls/Label.qml
View file @ af91a9bd
......@@ -35,5 +35,5 @@ Text {
renderType: Text.NativeRendering
font.family: Theme.fontFamily
color: Theme.textColor
font.pointSize: size.dp(Theme.fontSizeLarge)
font.pointSize: Theme.fontSizeLarge
}
src/controls/ListView.qml
View file @ af91a9bd
......@@ -16,17 +16,17 @@ ListView {
Rectangle {
width: listView.width
height: size.dp(44)
color: "black"
color: Theme.backgroundColor
Text {
id: sectionText
text: section
font.capitalization: Font.AllUppercase
font.pixelSize: size.dp(20)
color: "white"
font.pixelSize: Theme.fontSizeMedium
color: Theme.textColor
anchors{
left: parent.left
leftMargin: size.dp(10)
leftMargin: Theme.itemSpacingSmall
verticalCenter: parent.verticalCenter
}
}
......@@ -34,11 +34,11 @@ ListView {
Rectangle{
id: line
height: 1
color: "white"
color: Theme.textColor
width: listView.width-sectionText.width-size.dp(30)
anchors{
left: sectionText.right
leftMargin: size.dp(10)
leftMargin: Theme.itemSpacingSmall
verticalCenter: sectionText.verticalCenter
}
}
......@@ -59,7 +59,7 @@ ListView {
end: Qt.point(0, size.dp(30))
gradient: Gradient {
GradientStop { position: 0.0; color: "transparent" }
GradientStop { position: 1.0; color: "black" }
GradientStop { position: 1.0; color: Theme.backgroundColor }
}
}
......@@ -68,7 +68,7 @@ ListView {
Rectangle{
id: scrollerDecorator
visible: (listView.showDecorator && listView.contentHeight > listView.height)
color: "#0091e5"
color: Theme.accentColor
width: size.dp(5)
height: listView.height*listView.height/listView.contentHeight
......
src/controls/ListViewItemWithActions.qml
View file @ af91a9bd
......@@ -6,7 +6,7 @@ import QtGraphicalEffects 1.0
Item {
id: root
width: parent.width
height: 60
height: size.dp(60)
property string label: ""
......@@ -36,7 +36,7 @@ Item {
Rectangle{
id: actionsArea
color: "#474747"
color: Theme.fillColor
anchors.right: listArea.left
......@@ -70,7 +70,7 @@ Item {
width: height
anchors{
left: parent.left
leftMargin: size.dp(20)
leftMargin: Theme.itemSpacingLarge
top: parent.top
topMargin: size.dp(5)
}
......@@ -90,14 +90,14 @@ Item {
anchors{
left:itemIcon.right
leftMargin: size.dp(20)
leftMargin: Theme.itemSpacingLarge
verticalCenter: itemIcon.verticalCenter
}
color: "transparent"
Text {
id: labelItem
color: "#ffffff"
color: Theme.textColor
text: label
anchors{
left: parent.left
......@@ -109,28 +109,28 @@ Item {
Text{
id: descriptionItem
color: "#ffffff"
color: Theme.textColor
text: description
anchors{
left: parent.left
right: parent.right
top: labelItem.bottom
}
font.pixelSize: size.dp(18)
font.pixelSize: Theme.fontSizeSmall
clip: true
visible: description != ""
}
Text{
id: subDescriptionItem
color: "#ffffff"
color: Theme.textColor
text: subdescription
anchors{
left: parent.left
right: parent.right
top: descriptionItem.bottom
}
font.pixelSize: size.dp(18)
font.pixelSize: Theme.fontSizeSmall
clip: true
visible: subdescription != ""
}
......@@ -162,7 +162,7 @@ Item {
anchors{
right: parent.right
rightMargin: size.dp(20)
rightMargin: Theme.itemSpacingLarge
verticalCenter: parent.verticalCenter
}
......
src/controls/QueryDialog.qml
View file @ af91a9bd
......@@ -4,7 +4,7 @@ Rectangle {
id: shell
anchors.fill: parent
opacity: 0.7
color: "black"
color: Theme.backgroundColor
signal accepted()
signal canceled()
property alias cancelText: cancel.text
......
src/controls/theme.cpp
View file @ af91a9bd
......@@ -9,6 +9,7 @@ Theme::Theme(QObject *parent) : QObject(parent)
m_itemWidthLarge = 320*m_dp;
m_itemWidthMedium = 240*m_dp;
m_itemWidthSmall = 120*m_dp;
m_itemWidthExtraSmall = 72*m_dp;
m_itemHeightHuge = 80*m_dp;
m_itemHeightExtraLarge = 75*m_dp;
......@@ -21,7 +22,7 @@ Theme::Theme(QObject *parent) : QObject(parent)
m_itemSpacingLarge = 20*m_dp;
m_itemSpacingMedium = 15*m_dp;
m_itemSpacingSmall = 10*m_dp;
m_itemExtraSmall = 8*m_dp;
m_itemSpacingExtraSmall = 8*m_dp;
m_fontSizeExtraLarge = 30*m_dp;
m_fontSizeLarge = 24*m_dp;
......
src/controls/theme.h
View file @ af91a9bd
......@@ -10,6 +10,7 @@ class Theme : public QObject
Q_PROPERTY(qreal itemWidthLarge READ itemWidthLarge NOTIFY itemWidthLargeChanged)
Q_PROPERTY(qreal itemWidthMedium READ itemWidthMedium NOTIFY itemWidthMediumChanged)
Q_PROPERTY(qreal itemWidthSmall READ itemWidthSmall NOTIFY itemWidthSmallChanged)
Q_PROPERTY(qreal itemWidthExtraSmall READ itemWidthExtraSmall NOTIFY itemWidthExtraSmallChanged)
Q_PROPERTY(qreal itemHeightHuge READ itemHeightHuge NOTIFY itemHeightHugeChanged)
Q_PROPERTY(qreal itemHeightExtraLarge READ itemHeightExtraLarge NOTIFY itemHeightExtraLargeChanged)
......@@ -22,7 +23,7 @@ class Theme : public QObject
Q_PROPERTY(qreal itemSpacingLarge READ itemSpacingLarge NOTIFY itemSpacingLargeChanged)
Q_PROPERTY(qreal itemSpacingMedium READ itemSpacingMedium NOTIFY itemSpacingMediumChanged)
Q_PROPERTY(qreal itemSpacingSmall READ itemSpacingSmall NOTIFY itemSpacingSmallChanged)
Q_PROPERTY(qreal itemExtraSmall READ itemExtraSmall NOTIFY itemExtraSmallChanged)
Q_PROPERTY(qreal itemSpacingExtraSmall READ itemSpacingExtraSmall NOTIFY itemSpacingExtraSmallChanged)
Q_PROPERTY(int fontSizeExtraLarge READ fontSizeExtraLarge NOTIFY fontSizeExtraLargeChanged)
Q_PROPERTY(int fontSizeLarge READ fontSizeLarge NOTIFY fontSizeLargeChanged)
......@@ -48,6 +49,7 @@ public:
qreal itemWidthLarge(){return m_itemWidthLarge;}
qreal itemWidthMedium(){return m_itemWidthMedium;}
qreal itemWidthSmall(){return m_itemWidthSmall;}
qreal itemWidthExtraSmall(){return m_itemWidthExtraSmall;}
qreal itemHeightHuge(){return m_itemHeightHuge;}
qreal itemHeightExtraLarge(){return m_itemHeightExtraLarge;}
......@@ -60,7 +62,7 @@ public:
qreal itemSpacingLarge(){return m_itemSpacingLarge;}
qreal itemSpacingMedium(){return m_itemSpacingMedium;}
qreal itemSpacingSmall(){return m_itemSpacingSmall;}
qreal itemExtraSmall(){return m_itemExtraSmall;}
qreal itemSpacingExtraSmall(){return m_itemExtraSmall;}
int fontSizeExtraLarge(){return m_fontSizeExtraLarge;}
int fontSizeLarge(){return m_fontSizeLarge;}
......@@ -85,6 +87,7 @@ signals:
void itemWidthLargeChanged();
void itemWidthMediumChanged();
void itemWidthSmallChanged();
void itemWidthExtraSmallChanged();
void itemHeightHugeChanged();
void itemHeightExtraLargeChanged();
......@@ -97,7 +100,7 @@ signals:
void itemSpacingLargeChanged();
void itemSpacingMediumChanged();
void itemSpacingSmallChanged();
void itemExtraSmallChanged();
void itemSpacingExtraSmallChanged();
void fontSizeExtraLargeChanged();
void fontSizeLargeChanged();
......@@ -121,6 +124,7 @@ private:
qreal m_itemWidthLarge; //320
qreal m_itemWidthMedium; //240
qreal m_itemWidthSmall; //120
qreal m_itemWidthExtraSmall; //72
qreal m_itemHeightHuge; //80
qreal m_itemHeightExtraLarge; //75
......@@ -133,7 +137,7 @@ private:
qreal m_itemSpacingLarge; //20
qreal m_itemSpacingMedium; //15
qreal m_itemSpacingSmall; //10
qreal m_itemExtraSmall; //8
qreal m_itemSpacingExtraSmall; //8
int m_fontSizeExtraLarge; //30
int m_fontSizeLarge; //24
......
src/styles/CheckBoxStyle.qml
View file @ af91a9bd
......@@ -37,12 +37,12 @@ CheckBoxStyle {
indicator: Rectangle {
id: background
color: "transparent"
implicitWidth: size.dp(72)
implicitHeight: size.dp(32)
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: Theme.itemHeightExtraSmall
Rectangle {
id: back1
implicitWidth: size.dp(72)
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: size.dp(28)
color: Theme.accentColor
anchors.centerIn: parent
......@@ -50,7 +50,7 @@ CheckBoxStyle {
Rectangle {
id: back2
implicitWidth: size.dp(72)
implicitWidth: Theme.itemWidthExtraSmall
implicitHeight: size.dp(28)
color: Theme.fillDarkColor
anchors.centerIn: parent
......@@ -60,7 +60,7 @@ CheckBoxStyle {
Image {
id: ball
width: size.dp(40)
height: size.dp(32)
height: Theme.itemHeightExtraSmall
source: "images/switch-ball.png"
anchors.verticalCenter: parent.verticalCenter
}
......@@ -79,7 +79,7 @@ CheckBoxStyle {
Component.onCompleted: {
back1.opacity = control.checked ? 1 : 0
back2.opacity = control.checked ? 0 : 1
ball.x = control.checked ? size.dp(32) : 0
ball.x = control.checked ? Theme.itemHeightExtraSmall : 0
}
SequentialAnimation {
......@@ -88,7 +88,7 @@ CheckBoxStyle {
NumberAnimation {
target: ball
property: "x"
to: size.dp(32)
to: Theme.itemHeightExtraSmall
duration: 120
}
NumberAnimation {
......
src/styles/SliderStyle.qml
View file @ af91a9bd
......@@ -26,8 +26,8 @@ SliderStyle{
handle: Rectangle {
id: handle
anchors.centerIn: parent
color: "black"
border.color: "#0091e5"
color: Theme.backgroundColor
border.color: Theme.accentColor
border.width: 2
implicitWidth: size.dp(34)
implicitHeight: size.dp(34)
......@@ -39,7 +39,7 @@ SliderStyle{
anchors.centerIn: parent
text: parseInt(control.value*100)
visible: control.showValue
color: "white"
color: Theme.textColor
}
}
......@@ -48,13 +48,13 @@ SliderStyle{
implicitHeight: size.dp(16)
implicitWidth: size.dp(440)
color: "#313131"
color: Theme.fillDarkColor
z: 1
Rectangle{
id: dataLine
height: parent.height
width: styleData.handlePosition
color: "#0091e5"
color: Theme.accentColor
}
Image {
......
src/styles/TextFieldStyle.qml
View file @ af91a9bd
......@@ -25,14 +25,17 @@ TextFieldStyle {
selectedTextColor: Theme.textColor
selectionColor: Theme.accentColor
textColor: Theme.textColor
font.pointSize: size.dp(14)
font.pointSize: Theme.fontSizeTiny
font.family: Theme.fontFamily
background: Item {
anchors.leftMargin: size.dp(16)
anchors.rightMargin: size.dp(16)
implicitHeight: size.dp(50)
implicitWidth: size.dp(320)
anchors{
leftMargin: Theme.itemSpacingMedium
rightMargin: Theme.itemSpacingMedium
}
implicitHeight: Theme.itemHeightMedium
implicitWidth: Theme.itemWidthLarge
opacity: control.enabled ? 1 : 0.6
Image {
anchors.fill: parent
......
src/styles/ToolBarStyle.qml
View file @ af91a9bd
......@@ -28,7 +28,7 @@ Style {
padding.bottom: 3
property Component panel: Item {
implicitHeight: size.dp(75)
implicitHeight:Theme.itemHeightExtraLarge
implicitWidth: size.dp(40)
Rectangle {
anchors.fill: parent
......
src/styles/ToolButtonStyle.qml
View file @ af91a9bd
......@@ -31,8 +31,8 @@ Style {
id: styleitem
//TODO: Maybe we want to add a descriptive text at the bottom of the icon?
implicitWidth: size.dp(50)
implicitHeight: size.dp(50)
implicitWidth: Theme.itemHeightMedium
implicitHeight: implicitWidth
opacity: control.pressed ? 0.5 : 1
......@@ -47,7 +47,7 @@ Style {
id: icon
anchors.fill: parent
fillMode: Image.PreserveAspectFit
anchors.margins: size.dp(8)
anchors.margins: Theme.itemSpacingExtraSmall
source: control.iconSource
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment