Merge pull request #16 from status-im/feat/style-sheet

add Theme file and QT project file
This commit is contained in:
Iuri Matias 2020-05-11 16:34:34 -04:00 committed by GitHub
commit 5c3b240cef
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 60 additions and 19 deletions

1
.gitignore vendored
View File

@ -5,3 +5,4 @@ nim_libstatus
data/ data/
noBackup/ noBackup/
.idea .idea
*.pro.user

11
imports/Theme.qml Normal file
View File

@ -0,0 +1,11 @@
pragma Singleton
import QtQuick 2.8
QtObject {
readonly property color grey: "#EEF2F5"
readonly property color lightBlue: "#ECEFFC"
readonly property color blue: "#4360DF"
readonly property color transparent: "#ffffff"
readonly property color darkGrey: "#939BA1"
}

2
imports/qmldir Normal file
View File

@ -0,0 +1,2 @@
module Theme
singleton Theme 1.0 ./Theme.qml

View File

@ -2,15 +2,9 @@ import QtQuick 2.3
import QtQuick.Controls 1.3 import QtQuick.Controls 1.3
import QtQuick.Controls 2.3 import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3 import QtQuick.Layouts 1.3
import "./imports"
ApplicationWindow { ApplicationWindow {
property var greyColor: "#EEF2F5"
property var lightBlueColor: "#ECEFFC"
property var blueColor: "#4360DF"
property var transparentColor: "#ffffff"
property var darkGreyColor: "#939BA1"
id: applicationWindow id: applicationWindow
width: 1024 width: 1024
height: 768 height: 768
@ -46,7 +40,7 @@ ApplicationWindow {
Layout.minimumHeight: 0 Layout.minimumHeight: 0
background: Rectangle { background: Rectangle {
color: "#00000000" color: "#00000000"
border.color: greyColor border.color: Theme.grey
} }
TabButton { TabButton {
@ -59,7 +53,7 @@ ApplicationWindow {
transformOrigin: Item.Center transformOrigin: Item.Center
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
background: Rectangle { background: Rectangle {
color: lightBlueColor color: Theme.lightBlue
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
radius: 50 radius: 50
} }
@ -82,7 +76,7 @@ ApplicationWindow {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: chatBtn.top anchors.top: chatBtn.top
background: Rectangle { background: Rectangle {
color: lightBlueColor color: Theme.lightBlue
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
radius: 50 radius: 50
} }
@ -105,7 +99,7 @@ ApplicationWindow {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: walletBtn.top anchors.top: walletBtn.top
background: Rectangle { background: Rectangle {
color: lightBlueColor color: Theme.lightBlue
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
radius: 50 radius: 50
} }
@ -128,7 +122,7 @@ ApplicationWindow {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.top: browserBtn.top anchors.top: browserBtn.top
background: Rectangle { background: Rectangle {
color: lightBlueColor color: Theme.lightBlue
opacity: parent.checked ? 1 : 0 opacity: parent.checked ? 1 : 0
radius: 50 radius: 50
} }
@ -190,7 +184,7 @@ ApplicationWindow {
Rectangle { Rectangle {
id: searchBox id: searchBox
height: 36 height: 36
color: greyColor color: Theme.grey
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 59 anchors.topMargin: 59
radius: 8 radius: 8
@ -232,7 +226,7 @@ ApplicationWindow {
id: addChat id: addChat
width: 36 width: 36
height: 36 height: 36
color: blueColor color: Theme.blue
radius: 50 radius: 50
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: 16
@ -265,7 +259,7 @@ ApplicationWindow {
Rectangle { Rectangle {
id: wrapper id: wrapper
height: 64 height: 64
color: ListView.isCurrentItem ? lightBlueColor : transparentColor color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: 16
anchors.top: applicationWindow.top anchors.top: applicationWindow.top
@ -282,7 +276,7 @@ ApplicationWindow {
Rectangle { Rectangle {
id: contactImage id: contactImage
width: 40 width: 40
color: darkGreyColor color: Theme.darkGrey
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: 16
anchors.top: parent.top anchors.top: parent.top
@ -311,7 +305,7 @@ ApplicationWindow {
font.pixelSize: 15 font.pixelSize: 15
anchors.left: contactImage.right anchors.left: contactImage.right
anchors.leftMargin: 16 anchors.leftMargin: 16
color: darkGreyColor color: Theme.darkGrey
} }
Text { Text {
id: contactTime id: contactTime
@ -321,7 +315,7 @@ ApplicationWindow {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: 10
font.pixelSize: 11 font.pixelSize: 11
color: darkGreyColor color: Theme.darkGrey
} }
Rectangle { Rectangle {
id: contactNumberChatsCircle id: contactNumberChatsCircle
@ -332,7 +326,7 @@ ApplicationWindow {
anchors.bottomMargin: 10 anchors.bottomMargin: 10
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: 16
color: blueColor color: Theme.blue
Text { Text {
id: contactNumberChats id: contactNumberChats
text: qsTr("1") text: qsTr("1")

33
nim-status-client.pro Normal file
View File

@ -0,0 +1,33 @@
QT += quick
# The following define makes your compiler emit warnings if you use
# any Qt feature that has been marked deprecated (the exact warnings
# depend on your compiler). Refer to the documentation for the
# deprecated API to know how to port your code away from it.
DEFINES += QT_DEPRECATED_WARNINGS
# You can also make your code fail to compile if it uses deprecated APIs.
# In order to do so, uncomment the following line.
# You can also select to disable deprecated APIs only up to a certain version of Qt.
#DEFINES += QT_DISABLE_DEPRECATED_BEFORE=0x060000 # disables all the APIs deprecated before Qt 6.0.0
SOURCES +=
RESOURCES += \
imports/Theme.qml \
main.qml
# Additional import path used to resolve QML modules in Qt Creator's code model
QML_IMPORT_PATH = $$PWD/imports
# Additional import path used to resolve QML modules just for Qt Quick Designer
QML_DESIGNER_IMPORT_PATH = $$PWD/imports
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target
DISTFILES += \
Theme.qml \
imports/qmldir