status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add chat box, fonts and padding size

This commit is contained in:
Jonathan Rainville 2020-05-12 15:17:56 -04:00 committed by Iuri Matias
parent 01182c8aee
commit 14bcf05ef5
42 changed files with 105 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Inter-Black.otf Normal file
View File

Binary file not shown.

BIN
Inter-BlackItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Bold.otf Normal file
View File

Binary file not shown.

BIN
Inter-BoldItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-ExtraBold.otf Normal file
View File

Binary file not shown.

BIN
Inter-ExtraBoldItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-ExtraLight.otf Normal file
View File

Binary file not shown.

BIN
Inter-ExtraLightItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Italic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Light.otf Normal file
View File

Binary file not shown.

BIN
Inter-LightItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Medium.otf Normal file
View File

Binary file not shown.

BIN
Inter-MediumItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Regular.otf Normal file
View File

Binary file not shown.

BIN
Inter-SemiBold.otf Normal file
View File

Binary file not shown.

BIN
Inter-SemiBoldItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-Thin.otf Normal file
View File

Binary file not shown.

BIN
Inter-ThinItalic.otf Normal file
View File

Binary file not shown.

BIN
Inter-V.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Black.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-BlackItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Bold.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-BoldItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-ExtraBold.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-ExtraBoldItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-ExtraLight.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-ExtraLightItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Italic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Light.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-LightItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Medium.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-MediumItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Regular.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-SemiBold.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-SemiBoldItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-Thin.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-ThinItalic.otf Normal file
View File

Binary file not shown.

BIN
fonts/Inter/Inter-V.otf Normal file
View File

Binary file not shown.

BIN
img/placeholder-profile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1010 B

3
imports/Theme.qml
View File

@ -8,4 +8,7 @@ QtObject {
readonly property color blue: "#4360DF" readonly property color blue: "#4360DF"
readonly property color transparent: "#ffffff" readonly property color transparent: "#ffffff"
readonly property color darkGrey: "#939BA1" readonly property color darkGrey: "#939BA1"
readonly property int padding: 16
readonly property int smallPadding: 16
} }

98
main.qml
View File

@ -11,6 +11,7 @@ ApplicationWindow {
height: 768 height: 768
title: "Nim Status Client" title: "Nim Status Client"
visible: true visible: true
font.family: "Inter"
SystemTrayIcon { SystemTrayIcon {
visible: true visible: true
@ -203,7 +204,7 @@ ApplicationWindow {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 65 anchors.rightMargin: 65
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.padding
TextField { TextField {
id: searchText id: searchText
@ -219,7 +220,7 @@ ApplicationWindow {
Image { Image {
id: image4 id: image4
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 10 anchors.leftMargin: Theme.smallPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: "img/search.svg" source: "img/search.svg"
@ -241,7 +242,7 @@ ApplicationWindow {
color: Theme.blue color: Theme.blue
radius: 50 radius: 50
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 59 anchors.topMargin: 59
@ -273,11 +274,11 @@ ApplicationWindow {
height: 64 height: 64
color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent color: ListView.isCurrentItem ? Theme.lightBlue : Theme.transparent
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.padding
anchors.top: applicationWindow.top anchors.top: applicationWindow.top
anchors.topMargin: 0 anchors.topMargin: 0
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.padding
radius: 8 radius: 8
MouseArea { MouseArea {
@ -290,7 +291,7 @@ ApplicationWindow {
width: 40 width: 40
color: Theme.darkGrey color: Theme.darkGrey
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 12 anchors.topMargin: 12
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
@ -304,28 +305,28 @@ ApplicationWindow {
font.weight: Font.Medium font.weight: Font.Medium
font.pixelSize: 15 font.pixelSize: 15
anchors.left: contactImage.right anchors.left: contactImage.right
anchors.leftMargin: 16 anchors.leftMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: Theme.smallPadding
color: "black" color: "black"
} }
Text { Text {
id: lastChatMessage id: lastChatMessage
text: "Chatting blah blah..." text: "Chatting blah blah..."
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 10 anchors.bottomMargin: Theme.smallPadding
font.pixelSize: 15 font.pixelSize: 15
anchors.left: contactImage.right anchors.left: contactImage.right
anchors.leftMargin: 16 anchors.leftMargin: Theme.padding
color: Theme.darkGrey color: Theme.darkGrey
} }
Text { Text {
id: contactTime id: contactTime
text: "12:22 AM" text: "12:22 AM"
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.padding
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 10 anchors.topMargin: Theme.smallPadding
font.pixelSize: 11 font.pixelSize: 11
color: Theme.darkGrey color: Theme.darkGrey
} }
@ -335,9 +336,9 @@ ApplicationWindow {
height: 22 height: 22
radius: 50 radius: 50
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 10 anchors.bottomMargin: Theme.smallPadding
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.padding
color: Theme.blue color: Theme.blue
Text { Text {
id: contactNumberChats id: contactNumberChats
@ -369,6 +370,72 @@ ApplicationWindow {
anchors.rightMargin: 0 anchors.rightMargin: 0
anchors.fill: parent anchors.fill: parent
RowLayout {
id: chatContainer
width: 100
height: 100
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Rectangle {
id: chatBox
width: 200
height: 158
color: "#00000000"
Layout.alignment: Qt.AlignLeft | Qt.AlignTop
Layout.fillWidth: true
border.color: "#00000000"
Image {
id: chatImage
width: 30
height: 30
anchors.left: parent.left
anchors.leftMargin: 16
anchors.top: parent.top
anchors.topMargin: 16
fillMode: Image.PreserveAspectFit
source: "img/placeholder-profile.png"
}
Text {
id: chatName
text: qsTr("Slushy Welltodo Woodborer")
anchors.top: parent.top
anchors.topMargin: 22
anchors.left: chatImage.right
anchors.leftMargin: 16
font.bold: true
font.pixelSize: 14
}
Text {
id: chatText
text: qsTr("I’m generally against putting too many rules on social interaction because it makes interaction anything but social, but technical specifics on how to get on board or participate in a team are I think generally useful, especially if they prevent maintainers from pasting the same response to every PR / issue.")
font.family: "Inter"
wrapMode: Text.WordWrap
anchors.right: parent.right
anchors.rightMargin: 60
anchors.left: chatName.left
anchors.leftMargin: 0
anchors.top: chatName.bottom
anchors.topMargin: 16
font.pixelSize: 14
}
Text {
id: chatTime
color: Theme.darkGrey
font.family: "Inter"
text: qsTr("7:30 AM")
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
anchors.right: parent.right
anchors.rightMargin: 16
font.pixelSize: 10
}
}
}
RowLayout { RowLayout {
Layout.fillHeight: true Layout.fillHeight: true
TextArea { id: callResult; Layout.fillWidth: true; text: logic.callResult; readOnly: true } TextArea { id: callResult; Layout.fillWidth: true; text: logic.callResult; readOnly: true }
@ -386,6 +453,7 @@ ApplicationWindow {
enabled: txtData.text !== "" enabled: txtData.text !== ""
} }
} }
} }
} }
@ -414,6 +482,6 @@ ApplicationWindow {
/*##^## /*##^##
Designer { Designer {
D{i:9;anchors_height:40;anchors_width:40} D{i:0;formeditorZoom:0.8999999761581421}
} }
##^##*/ ##^##*/

19
nim-status-client.pro
View File

@ -29,5 +29,24 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
!isEmpty(target.path): INSTALLS += target !isEmpty(target.path): INSTALLS += target
DISTFILES += \ DISTFILES += \
Inter-Black.otf \
Inter-BlackItalic.otf \
Inter-Bold.otf \
Inter-BoldItalic.otf \
Inter-ExtraBold.otf \
Inter-ExtraBoldItalic.otf \
Inter-ExtraLight.otf \
Inter-ExtraLightItalic.otf \
Inter-Italic.otf \
Inter-Light.otf \
Inter-LightItalic.otf \
Inter-Medium.otf \
Inter-MediumItalic.otf \
Inter-Regular.otf \
Inter-SemiBold.otf \
Inter-SemiBoldItalic.otf \
Inter-Thin.otf \
Inter-ThinItalic.otf \
Inter-V.otf \
Theme.qml \ Theme.qml \
imports/qmldir imports/qmldir