Merge pull request #16 from status-im/feat/style-sheet
add Theme file and QT project file
This commit is contained in:
commit
5c3b240cef
|
@ -5,3 +5,4 @@ nim_libstatus
|
||||||
data/
|
data/
|
||||||
noBackup/
|
noBackup/
|
||||||
.idea
|
.idea
|
||||||
|
*.pro.user
|
||||||
|
|
|
@ -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"
|
||||||
|
}
|
|
@ -0,0 +1,2 @@
|
||||||
|
module Theme
|
||||||
|
singleton Theme 1.0 ./Theme.qml
|
32
main.qml
32
main.qml
|
@ -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")
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue