status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(StatusQ): Making UI components resizable 

Needed for: https://github.com/status-im/status-desktop/issues/6071
This commit is contained in:
Alexandra Betouni 2022-06-24 19:24:39 +03:00
parent 84c529d58d
commit d9ced073ea
155 changed files with 1367 additions and 1322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
sandbox/DemoApp.qml
View File

@ -14,9 +14,9 @@ import "demoapp/data" 1.0
Rectangle { Rectangle {
id: demoApp id: demoApp
height: 602 height: Theme.dp(602)
width: 1002 width: Theme.dp(1002)
border.width: 1 border.width: Theme.dp(1)
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
property string titleStyle: "osx" property string titleStyle: "osx"
@ -50,7 +50,7 @@ Rectangle {
StatusMacTrafficLights { StatusMacTrafficLights {
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 13 anchors.margins: Theme.dp(13)
z: statusAppLayout.z + 1 z: statusAppLayout.z + 1
visible: titleStyle === "osx" visible: titleStyle === "osx"
} }
@ -112,7 +112,7 @@ Rectangle {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
onClicked: { onClicked: {
if(model.sectionType === appSectionType.chat) if(model.sectionType === appSectionType.chat)
{ {
@ -143,7 +143,7 @@ Rectangle {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
onClicked: { onClicked: {
if(model.sectionType === appSectionType.community) if(model.sectionType === appSectionType.community)
{ {
@ -175,7 +175,7 @@ Rectangle {
StatusMenuItem { StatusMenuItem {
text: qsTr("Leave Community") text: qsTr("Leave Community")
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: 180
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }

9
sandbox/ThemeSwitch.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 import QtQuick.Controls 2.14
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: themeSwitchWrapper id: themeSwitchWrapper
@ -19,11 +20,11 @@ Item {
Row { Row {
id: themeSwitch id: themeSwitch
spacing: 2 spacing: Theme.dp(2)
Text { Text {
text: "🌤" text: "🌤"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@ -35,13 +36,13 @@ Item {
text: "Toggle Theme" text: "Toggle Theme"
visible: sensor.containsMouse visible: sensor.containsMouse
orientation: StatusToolTip.Orientation.Bottom orientation: StatusToolTip.Orientation.Bottom
y: themeSwitchWrapper.y + 16 y: themeSwitchWrapper.y + Theme.dp(16)
} }
} }
Text { Text {
text: "🌙" text: "🌙"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
} }

32
sandbox/controls/Buttons.qml
View File

@ -8,12 +8,12 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
Column { Column {
spacing: 10 spacing: Theme.dp(10)
Grid { Grid {
id: buttonGridWidth id: buttonGridWidth
columns: 3 columns: Theme.dp(3)
columnSpacing: 38 columnSpacing: Theme.dp(38)
rowSpacing: 10 rowSpacing: Theme.dp(10)
horizontalItemAlignment: Grid.AlignHCenter horizontalItemAlignment: Grid.AlignHCenter
@ -196,22 +196,22 @@ Column {
// Rounded blue // Rounded blue
StatusFlatRoundButton { StatusFlatRoundButton {
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
} }
StatusFlatRoundButton { StatusFlatRoundButton {
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
enabled: false enabled: false
} }
StatusFlatRoundButton { StatusFlatRoundButton {
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
loading: true loading: true
} }
@ -220,24 +220,24 @@ Column {
StatusFlatRoundButton { StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
} }
StatusFlatRoundButton { StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
enabled: false enabled: false
} }
StatusFlatRoundButton { StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 44 width: Theme.dp(44)
height: 44 height: Theme.dp(44)
icon.name: "info" icon.name: "info"
loading: true loading: true
} }

44
sandbox/controls/Controls.qml
View File

@ -9,22 +9,22 @@ import Sandbox 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusSelectableText { StatusSelectableText {
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again." text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
width: 300 width: Theme.dp(300)
multiline: true multiline: true
} }
StatusSelectableText { StatusSelectableText {
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>" text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
width: 200 width: Theme.dp(200)
} }
StatusIconTabButton { StatusIconTabButton {
@ -57,21 +57,21 @@ GridLayout {
visible: parent.hovered visible: parent.hovered
text: "Right" text: "Right"
orientation: StatusToolTip.Orientation.Right orientation: StatusToolTip.Orientation.Right
x: parent.width + 16 x: parent.width + Theme.dp(16)
y: parent.height / 2 - height / 2 + 4 y: parent.height / 2 - height / 2 + 4
} }
StatusToolTip { StatusToolTip {
visible: parent.hovered visible: parent.hovered
text: "Bottom" text: "Bottom"
orientation: StatusToolTip.Orientation.Bottom orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12 y: parent.height + Theme.dp(12)
} }
StatusToolTip { StatusToolTip {
visible: parent.hovered visible: parent.hovered
text: "Left" text: "Left"
orientation: StatusToolTip.Orientation.Left orientation: StatusToolTip.Orientation.Left
x: -parent.width /2 -8 x: -parent.width /2 - Theme.dp(8)
y: parent.height / 2 - height / 2 + 4 y: parent.height / 2 - height / 2 + Theme.dp(4)
} }
} }
@ -95,7 +95,7 @@ GridLayout {
tooltip.text: "Profile" tooltip.text: "Profile"
badge.value: 0 badge.value: 0
badge.visible: true badge.visible: true
badge.anchors.leftMargin:-16 badge.anchors.leftMargin:-Theme.dp(16)
} }
StatusNavBarTabButton { StatusNavBarTabButton {
@ -131,8 +131,8 @@ GridLayout {
} }
Item { Item {
implicitWidth: 100 implicitWidth: Theme.dp(100)
implicitHeight: 48 implicitHeight: Theme.dp(48)
StatusChatInfoButton { StatusChatInfoButton {
title: "Iuri Matias elided" title: "Iuri Matias elided"
subTitle: "Contact" subTitle: "Contact"
@ -141,13 +141,13 @@ GridLayout {
type: StatusChatInfoButton.Type.OneToOneChat type: StatusChatInfoButton.Type.OneToOneChat
muted: true muted: true
pinnedMessagesCount: 1 pinnedMessagesCount: 1
width: 100 width: Theme.dp(100)
} }
} }
Item { Item {
implicitWidth: 100 implicitWidth: Theme.dp(100)
implicitHeight: 48 implicitHeight: Theme.dp(48)
StatusChatInfoButton { StatusChatInfoButton {
title: "Iuri Matias big not elided" title: "Iuri Matias big not elided"
subTitle: "Contact" subTitle: "Contact"
@ -156,7 +156,7 @@ GridLayout {
type: StatusChatInfoButton.Type.OneToOneChat type: StatusChatInfoButton.Type.OneToOneChat
muted: true muted: true
pinnedMessagesCount: 1 pinnedMessagesCount: 1
width: 400 width: Theme.dp(400)
} }
} }
@ -183,26 +183,26 @@ GridLayout {
} }
StatusSlider { StatusSlider {
width: 360 width: Theme.dp(360)
from: 0 from: 0
to: 100 to: 100
value: 40 value: 40
} }
StatusLabeledSlider { StatusLabeledSlider {
width: 360 width: Theme.dp(360)
model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")] model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
} }
StatusLabeledSlider { StatusLabeledSlider {
width: 360 width: Theme.dp(360)
model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")] model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
} }
StatusBanner { StatusBanner {
id: banner id: banner
width: 360 width: Theme.dp(360)
topPadding: 20 topPadding: Theme.dp(20)
type: StatusBanner.Type.Danger type: StatusBanner.Type.Danger
statusText: "Banner" statusText: "Banner"
} }

5
sandbox/controls/Icons.qml
View File

@ -1,11 +1,12 @@
import QtQuick 2.14 import QtQuick 2.14
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
GridLayout { GridLayout {
columns: 6 columns: 6
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
property color iconColor property color iconColor
Repeater { Repeater {

46
sandbox/controls/Layout.qml
View File

@ -10,11 +10,11 @@ import StatusQ.Layout 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
Column { Column {
spacing: 10 spacing: Theme.dp(10)
StatusChatToolBar { StatusChatToolBar {
toolbarComponent: chatInfoButton1 toolbarComponent: chatInfoButton1
width: 518 width: Theme.dp(518)
Component { Component {
id: chatInfoButton1 id: chatInfoButton1
@ -31,7 +31,7 @@ Column {
StatusChatToolBar { StatusChatToolBar {
toolbarComponent: chatInfoButton2 toolbarComponent: chatInfoButton2
width: 518 width: Theme.dp(518)
Component { Component {
id: chatInfoButton2 id: chatInfoButton2
@ -51,7 +51,7 @@ Column {
StatusChatToolBar { StatusChatToolBar {
notificationCount: 1 notificationCount: 1
toolbarComponent: chatInfoButton3 toolbarComponent: chatInfoButton3
width: 518 width: Theme.dp(518)
Component { Component {
id: chatInfoButton3 id: chatInfoButton3
@ -70,7 +70,7 @@ Column {
StatusChatToolBar { StatusChatToolBar {
notificationCount: 1 notificationCount: 1
toolbarComponent: tagSelector toolbarComponent: tagSelector
width: 518 width: Theme.dp(518)
Component { Component {
id: tagSelector id: tagSelector
@ -107,6 +107,8 @@ Column {
Button { Button {
id: btn id: btn
text: "Append" text: "Append"
width: Theme.dp(100)
height: Theme.dp(40)
onClicked: { onClicked: {
buttons.append({ buttons.append({
name: "Test community", name: "Test community",
@ -142,7 +144,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
} }
} }
@ -185,7 +187,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
} }
communityNavBarButton: StatusNavBarTabButton { communityNavBarButton: StatusNavBarTabButton {
@ -199,7 +201,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu { popupMenu: StatusPopupMenu {
@ -224,7 +226,7 @@ Column {
StatusMenuItem { StatusMenuItem {
text: qsTr("Leave Community") text: qsTr("Leave Community")
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: 180
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }
@ -270,7 +272,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
} }
communityNavBarButton: StatusNavBarTabButton { communityNavBarButton: StatusNavBarTabButton {
@ -284,7 +286,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu { popupMenu: StatusPopupMenu {
@ -309,8 +311,8 @@ Column {
StatusMenuItem { StatusMenuItem {
text: qsTr("Leave Community") text: qsTr("Leave Community")
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }
} }
@ -360,7 +362,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
} }
communityNavBarButton: StatusNavBarTabButton { communityNavBarButton: StatusNavBarTabButton {
@ -374,7 +376,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu { popupMenu: StatusPopupMenu {
@ -399,8 +401,8 @@ Column {
StatusMenuItem { StatusMenuItem {
text: qsTr("Leave Community") text: qsTr("Leave Community")
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }
} }
@ -455,7 +457,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
} }
communityNavBarButton: StatusNavBarTabButton { communityNavBarButton: StatusNavBarTabButton {
@ -469,7 +471,7 @@ Column {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
popupMenu: StatusPopupMenu { popupMenu: StatusPopupMenu {
@ -494,15 +496,13 @@ Column {
StatusMenuItem { StatusMenuItem {
text: qsTr("Leave Community") text: qsTr("Leave Community")
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: Theme.dp(180)
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }
} }
} }
} }
} }
} }

16
sandbox/controls/ListItems.qml
View File

@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusNavigationListItem { StatusNavigationListItem {
title: "Menu Item" title: "Menu Item"
@ -156,7 +156,7 @@ GridLayout {
subTitle: "Subtitle" subTitle: "Subtitle"
tertiaryTitle: "Tertiary title" tertiaryTitle: "Tertiary title"
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
statusListItemTitle.font.weight: Font.Bold statusListItemTitle.font.weight: Font.Bold
} }
@ -166,7 +166,7 @@ GridLayout {
tertiaryTitle: "Tertiary title" tertiaryTitle: "Tertiary title"
icon.name: "info" icon.name: "info"
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
statusListItemTitle.font.weight: Font.Bold statusListItemTitle.font.weight: Font.Bold
} }
@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
tagsModel : 2 tagsModel : 2
tagsDelegate: StatusListItemTag { tagsDelegate: StatusListItemTag {
color: "blue" color: "blue"
height: 24 height: Theme.dp(24)
radius: 6 radius: Theme.dp(6)
closeButtonVisible: false closeButtonVisible: false
icon.emoji: "😁" icon.emoji: "😁"
icon.emojiSize: Emoji.size.verySmall icon.emojiSize: Emoji.size.verySmall
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
title: "helloworld.eth" title: "helloworld.eth"
titleText.font.pixelSize: 12 titleText.font.pixelSize: Theme.dp(12)
titleText.color: Theme.palette.indirectColor1 titleText.color: Theme.palette.indirectColor1
} }
} }
@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
subTitle: "Emoji" subTitle: "Emoji"
icon.emoji: "😁" icon.emoji: "😁"
icon.color: "yellow" icon.color: "yellow"
icon.letterSize: 14 icon.letterSize: Theme.dp(14)
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
} }

6
sandbox/controls/Others.qml
View File

@ -10,8 +10,8 @@ ColumnLayout {
Layout.fillHeight: true Layout.fillHeight: true
columns: 6 columns: 6
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusLoadingIndicator { StatusLoadingIndicator {
color: Theme.palette.directColor4 color: Theme.palette.directColor4
@ -53,7 +53,7 @@ ColumnLayout {
StatusLetterIdenticon { StatusLetterIdenticon {
name: "A" name: "A"
color: Theme.palette.userCustomizationColors[index] color: Theme.palette.userCustomizationColors[index]
letterSize: 16 letterSize: Theme.dp(16)
} }
} }
} }

56
sandbox/controls/Popups.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
import StatusQ.Core.Utils 0.1 import StatusQ.Core.Utils 0.1
Column { Column {
spacing: 20 spacing: Theme.dp(20)
StatusButton { StatusButton {
text: "Simple modal" text: "Simple modal"
@ -144,11 +144,11 @@ Column {
headerActionButton: StatusFlatRoundButton { headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.width: 20 icon.width: Theme.dp(20)
icon.height: 20 icon.height: Theme.dp(20)
icon.name: "info" icon.name: "info"
} }
@ -193,17 +193,17 @@ Column {
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
headerActionButton: StatusFlatRoundButton { headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.width: 20 icon.width: Theme.dp(20)
icon.height: 20 icon.height: Theme.dp(20)
icon.name: "info" icon.name: "info"
} }
} }
@ -218,7 +218,7 @@ Column {
id: text id: text
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -243,7 +243,7 @@ Column {
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -269,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -296,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -323,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Some text content" text: "Some text content"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -374,29 +374,29 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
showFooter: false showFooter: false
showAdvancedHeader: true showAdvancedHeader: true
showAdvancedFooter: true showAdvancedFooter: true
height: 200 height: Theme.dp(200)
advancedHeaderComponent: Rectangle { advancedHeaderComponent: Rectangle {
width: parent.width width: parent.width
height: 50 height: Theme.dp(50)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
border.width: 1 border.width: Theme.dp(1)
StatusBaseText { StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Add any header here" text: "Add any header here"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
} }
advancedFooterComponent: Rectangle { advancedFooterComponent: Rectangle {
width: parent.width width: parent.width
height: 50 height: Theme.dp(50)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
border.width: 1 border.width: Theme.dp(1)
StatusBaseText { StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Add any footer here" text: "Add any footer here"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -406,7 +406,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
StatusModal { StatusModal {
id: floatingHeaderModal id: floatingHeaderModal
anchors.centerIn: parent anchors.centerIn: parent
height: 200 height: Theme.dp(200)
showHeader: false showHeader: false
showFooter: false showFooter: false
showAdvancedHeader: true showAdvancedHeader: true
@ -417,14 +417,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
delegate: Rectangle { delegate: Rectangle {
width: button.width width: button.width
height: button.height height: button.height
radius: 8 radius: Theme.dp(8)
visible: visibleIndices.includes(index) visible: visibleIndices.includes(index)
StatusButton { StatusButton {
id: button id: button
topPadding: 8 topPadding: Theme.dp(8)
bottomPadding: 0 bottomPadding: 0
implicitHeight: 32 implicitHeight: Theme.dp(32)
defaultLeftPadding: 4 defaultLeftPadding: Theme.dp(4)
text: name text: name
icon.emoji: !!emoji ? emoji: "" icon.emoji: !!emoji ? emoji: ""
icon.emojiSize: Emoji.size.middle icon.emojiSize: Emoji.size.middle
@ -437,7 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
} }
} }
popupMenuDelegate: StatusListItem { popupMenuDelegate: StatusListItem {
implicitWidth: 272 implicitWidth: Theme.dp(272)
title: name title: name
onClicked: floatingHeader.itemSelected(index) onClicked: floatingHeader.itemSelected(index)
visible: !visibleIndices.includes(index) visible: !visibleIndices.includes(index)

26
sandbox/demoapp/ChatChannelView.qml
View File

@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1
ListView { ListView {
id: messageList id: messageList
anchors.fill: parent anchors.fill: parent
anchors.margins: 15 anchors.margins: Theme.dp(15)
clip: true clip: true
delegate: StatusMessage { delegate: StatusMessage {
id: delegate id: delegate
@ -34,8 +34,8 @@ ListView {
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: "" secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
chatID: model.chatKey chatID: model.chatKey
profileImage: StatusImageSettings { profileImage: StatusImageSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
source: model.profileImage source: model.profileImage
isIdenticon: model.isIdenticon isIdenticon: model.isIdenticon
} }
@ -55,8 +55,8 @@ ListView {
amISender: model.isReply ? model.replyAmISender : "" amISender: model.isReply ? model.replyAmISender : ""
displayName: model.isReply ? model.replySenderName: "" displayName: model.isReply ? model.replySenderName: ""
profileImage: StatusImageSettings { profileImage: StatusImageSettings {
width: 20 width: Theme.dp(20)
height: 20 height: Theme.dp(20)
source: model.isReply ? model.replyProfileImage: "" source: model.isReply ? model.replyProfileImage: ""
isIdenticon: model.isReply ? model.replyIsIdenticon: "" isIdenticon: model.isReply ? model.replyIsIdenticon: ""
} }
@ -67,23 +67,23 @@ ListView {
quickActions: [ quickActions: [
StatusFlatRoundButton { StatusFlatRoundButton {
id: emojiBtn id: emojiBtn
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "reaction-b" icon.name: "reaction-b"
type: StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Add reaction" tooltip.text: "Add reaction"
}, },
StatusFlatRoundButton { StatusFlatRoundButton {
id: replyBtn id: replyBtn
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "reply" icon.name: "reply"
type: StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Reply" tooltip.text: "Reply"
}, },
StatusFlatRoundButton { StatusFlatRoundButton {
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "tiny/edit" icon.name: "tiny/edit"
type: StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Edit" tooltip.text: "Edit"
@ -93,8 +93,8 @@ ListView {
}, },
StatusFlatRoundButton { StatusFlatRoundButton {
id: otherBtn id: otherBtn
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "more" icon.name: "more"
type: StatusFlatRoundButton.Type.Tertiary type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "More" tooltip.text: "More"

12
sandbox/demoapp/CreateChatView.qml
View File

@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1
Page { Page {
id: root id: root
anchors.fill: parent anchors.fill: parent
anchors.margins: 16 anchors.margins: Theme.dp(16)
property ListModel contactsModel: null property ListModel contactsModel: null
background: null background: null
@ -19,13 +19,13 @@ Page {
width: parent.width width: parent.width
height: tagSelector.height height: tagSelector.height
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 8 anchors.rightMargin: Theme.dp(8)
StatusTagSelector { StatusTagSelector {
id: tagSelector id: tagSelector
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.leftMargin: 17 Layout.leftMargin: Theme.dp(17)
maxHeight: root.height maxHeight: root.height
toLabelText: qsTr("To: ") toLabelText: qsTr("To: ")
warningText: qsTr("USER LIMIT REACHED") warningText: qsTr("USER LIMIT REACHED")
@ -73,7 +73,7 @@ Page {
} }
StatusButton { StatusButton {
implicitHeight: 44 implicitHeight: Theme.dp(44)
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
enabled: (tagSelector.namesModel.count > 0) enabled: (tagSelector.namesModel.count > 0)
text: "Confirm" text: "Confirm"
@ -82,14 +82,14 @@ Page {
contentItem: Item { contentItem: Item {
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 68 anchors.topMargin: Theme.dp(68)
StatusBaseText { StatusBaseText {
visible: (contactsModel.count === 0) visible: (contactsModel.count === 0)
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: qsTr("You can only send direct messages to your Contacts. \n\n text: qsTr("You can only send direct messages to your Contacts. \n\n
Send a contact request to the person you would like to chat with, you will be\n able to Send a contact request to the person you would like to chat with, you will be\n able to

30
sandbox/demoapp/DemoCommunityDetailModal.qml
View File

@ -19,24 +19,24 @@ StatusModal {
width: root.width width: root.width
StatusModalDivider { StatusModalDivider {
bottomPadding: 8 bottomPadding: Theme.dp(8)
} }
StatusBaseText { StatusBaseText {
text: "A community of cat lovers, meow!" text: "A community of cat lovers, meow!"
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
height: 46 height: Theme.dp(46)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
} }
StatusModalDivider { StatusModalDivider {
topPadding: 8 topPadding: Theme.dp(8)
bottomPadding: 8 bottomPadding: Theme.dp(8)
} }
StatusDescriptionListItem { StatusDescriptionListItem {
@ -49,13 +49,13 @@ StatusModal {
} }
StatusModalDivider { StatusModalDivider {
topPadding: 8 topPadding: Theme.dp(8)
bottomPadding: 8 bottomPadding: Theme.dp(8)
} }
StatusListItem { StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Members" title: "Members"
icon.name: "group-chat" icon.name: "group-chat"
label: "184" label: "184"
@ -79,13 +79,13 @@ StatusModal {
} }
StatusModalDivider { StatusModalDivider {
topPadding: 8 topPadding: Theme.dp(8)
bottomPadding: 8 bottomPadding: Theme.dp(8)
} }
StatusListItem { StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Edit community" title: "Edit community"
icon.name: "edit" icon.name: "edit"
type: StatusListItem.Type.Secondary type: StatusListItem.Type.Secondary
@ -93,7 +93,7 @@ StatusModal {
StatusListItem { StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Transfer ownership" title: "Transfer ownership"
icon.name: "exchange" icon.name: "exchange"
type: StatusListItem.Type.Secondary type: StatusListItem.Type.Secondary
@ -101,7 +101,7 @@ StatusModal {
StatusListItem { StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17 statusListItemTitle.font.pixelSize: Theme.dp(17)
title: "Leave community" title: "Leave community"
icon.name: "arrow-right" icon.name: "arrow-right"
icon.rotation: 180 icon.rotation: 180

10
sandbox/demoapp/DemoContactRequestsModal.qml
View File

@ -11,18 +11,18 @@ StatusModal {
header.title: "Contact Requests" header.title: "Contact Requests"
headerActionButton: StatusFlatRoundButton { headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.width: 20 icon.width: Theme.dp(20)
icon.height: 20 icon.height: Theme.dp(20)
icon.name: "notification" icon.name: "notification"
} }
contentItem: StatusBaseText { contentItem: StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: "Contact request will be shown here" text: "Contact request will be shown here"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }

18
sandbox/demoapp/StatusAppChatView.qml
View File

@ -20,26 +20,26 @@ StatusAppThreePanelLayout {
StatusNavigationPanelHeadline { StatusNavigationPanelHeadline {
id: headline id: headline
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: "Chat" text: "Chat"
} }
RowLayout { RowLayout {
id: searchInputWrapper id: searchInputWrapper
width: 288 width: Theme.dp(288)
height: searchInput.height height: searchInput.height
anchors.top: headline.bottom anchors.top: headline.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
StatusBaseInput { StatusBaseInput {
id: searchInput id: searchInput
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
implicitHeight: 36 implicitHeight: Theme.dp(36)
topPadding: 8 topPadding: Theme.dp(8)
bottomPadding: 8 bottomPadding: Theme.dp(8)
placeholderText: "Search" placeholderText: "Search"
icon.name: "search" icon.name: "search"
} }
@ -58,9 +58,9 @@ StatusAppThreePanelLayout {
Column { Column {
anchors.top: searchInputWrapper.bottom anchors.top: searchInputWrapper.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: 8 spacing: Theme.dp(8)
StatusContactRequestsIndicatorListItem { StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
@ -174,7 +174,7 @@ StatusAppThreePanelLayout {
StatusMenuItem { StatusMenuItem {
text: "Leave Chat" text: "Leave Chat"
icon.name: "arrow-right" icon.name: "arrow-right"
icon.width: 14 icon.width: Theme.dp(14)
iconRotation: 180 iconRotation: 180
type: StatusMenuItem.Type.Danger type: StatusMenuItem.Type.Danger
} }

28
sandbox/demoapp/StatusAppCommunitiesPortalView.qml
View File

@ -21,11 +21,11 @@ ScrollView {
property ListModel tagsModel: Models.tagsModel property ListModel tagsModel: Models.tagsModel
property string searchText: "" property string searchText: ""
property int layoutVMargin: 70 property int layoutVMargin: Theme.dp(70)
property int layoutHMargin: 64 property int layoutHMargin: Theme.dp(64)
property int titlePixelSize: 28 property int titlePixelSize: Theme.dp(28)
property int subtitlePixelSize: 17 property int subtitlePixelSize: Theme.dp(17)
property int stylePadding: 16 property int stylePadding: Theme.dp(16)
function navigateToCommunity(communityId) { function navigateToCommunity(communityId) {
console.info("Clicked community ID: " + communityId) console.info("Clicked community ID: " + communityId)
@ -38,7 +38,7 @@ ScrollView {
ColumnLayout { ColumnLayout {
id: column id: column
spacing: 18 spacing: Theme.dp(18)
StatusBaseText { StatusBaseText {
Layout.topMargin: d.layoutVMargin Layout.topMargin: d.layoutVMargin
@ -55,7 +55,7 @@ ScrollView {
visible: d.tagsModel.count > 0 visible: d.tagsModel.count > 0
Layout.leftMargin: d.layoutHMargin Layout.leftMargin: d.layoutHMargin
Layout.rightMargin: d.layoutHMargin Layout.rightMargin: d.layoutHMargin
width: 1234 // by design width: Theme.dp(1234) // by design
spacing: d.stylePadding/2 spacing: d.stylePadding/2
Repeater { Repeater {
@ -63,16 +63,16 @@ ScrollView {
delegate: StatusListItemTag { delegate: StatusListItemTag {
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
color: "transparent" color: "transparent"
height: 32 height: Theme.dp(32)
radius: 36 radius: Theme.dp(36)
closeButtonVisible: false closeButtonVisible: false
icon.emoji: model.emoji icon.emoji: model.emoji
icon.height: 32 icon.height: Theme.dp(32)
icon.width: icon.height icon.width: icon.heights
icon.color: "transparent" icon.color: "transparent"
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
title: model.name title: model.name
titleText.font.pixelSize: 15 titleText.font.pixelSize: Theme.dp(15)
titleText.color: Theme.palette.primaryColor1 titleText.color: Theme.palette.primaryColor1
} }
} }
@ -80,7 +80,7 @@ ScrollView {
StatusBaseText { StatusBaseText {
Layout.leftMargin: d.layoutHMargin Layout.leftMargin: d.layoutHMargin
Layout.topMargin: 20 Layout.topMargin: Theme.dp(20)
text: qsTr("Featured") text: qsTr("Featured")
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize font.pixelSize: d.subtitlePixelSize
@ -119,7 +119,7 @@ ScrollView {
StatusBaseText { StatusBaseText {
Layout.leftMargin: d.layoutHMargin Layout.leftMargin: d.layoutHMargin
Layout.topMargin: 20 Layout.topMargin: Theme.dp(20)
text: qsTr("Popular") text: qsTr("Popular")
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: d.subtitlePixelSize font.pixelSize: d.subtitlePixelSize

16
sandbox/demoapp/StatusAppCommunityView.qml
View File

@ -63,7 +63,7 @@ StatusAppThreePanelLayout {
id: scrollView id: scrollView
anchors.top: statusChatInfoToolBar.bottom anchors.top: statusChatInfoToolBar.bottom
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: leftPanel.width width: leftPanel.width
@ -73,7 +73,7 @@ StatusAppThreePanelLayout {
StatusChatListAndCategories { StatusChatListAndCategories {
id: communityCategories id: communityCategories
width: leftPanel.width width: leftPanel.width
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64 height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(64)
draggableItems: true draggableItems: true
draggableCategories: false draggableCategories: false
@ -248,21 +248,21 @@ StatusAppThreePanelLayout {
anchors.topMargin:16 anchors.topMargin:16
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: 16
opacity: (rightPanel.width > 50) ? 1.0 : 0.0 opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
visible: (opacity > 0.1) visible: (opacity > 0.1)
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
text: qsTr("Members") text: qsTr("Members")
} }
ListView { ListView {
anchors.top: titleText.bottom anchors.top: titleText.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 8 anchors.rightMargin: Theme.dp(8)
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 16 anchors.bottomMargin: Theme.dp(16)
boundsBehavior: Flickable.StopAtBounds boundsBehavior: Flickable.StopAtBounds
model: Models.membersListModel model: Models.membersListModel
delegate: StatusMemberListItem { delegate: StatusMemberListItem {

8
sandbox/demoapp/StatusAppProfileSettingsView.qml
View File

@ -16,14 +16,14 @@ StatusAppTwoPanelLayout {
StatusNavigationPanelHeadline { StatusNavigationPanelHeadline {
id: profileHeadline id: profileHeadline
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
text: "Profile" text: "Profile"
} }
ScrollView { ScrollView {
anchors.top: profileHeadline.bottom anchors.top: profileHeadline.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
width: parent.width width: parent.width
@ -34,7 +34,7 @@ StatusAppTwoPanelLayout {
Column { Column {
id: profileMenuItems id: profileMenuItems
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: 4 spacing: Theme.dp(4)
Repeater { Repeater {
model: Models.demoProfileGeneralMenuItems model: Models.demoProfileGeneralMenuItems
@ -56,7 +56,7 @@ StatusAppTwoPanelLayout {
Item { Item {
id: invisibleSeparator id: invisibleSeparator
height: 16 height: Theme.dp(16)
width: parent.width width: parent.width
} }

40
sandbox/main.qml
View File

@ -13,15 +13,14 @@ import StatusQ.Controls 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Layout 0.1 import StatusQ.Layout 0.1
import StatusQ.Platform 0.1 import StatusQ.Platform 0.1
import StatusQ.Core.Utils 0.1
import "demoapp/data" 1.0 import "demoapp/data" 1.0
StatusWindow { StatusWindow {
id: rootWindow id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width width: Theme.screenWidth
: 1224 height: Theme.screenHeight
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
:840
visible: true visible: true
title: qsTr("StatusQ Documentation App") title: qsTr("StatusQ Documentation App")
@ -59,6 +58,11 @@ StatusWindow {
} }
} }
readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
onScaleRatioChanged: {
Theme.scaleFactor = scaleRatio;
}
StatusAppLayout { StatusAppLayout {
id: appLayout id: appLayout
anchors.fill: parent anchors.fill: parent
@ -81,7 +85,7 @@ StatusWindow {
badge.value: model.notificationsCount badge.value: model.notificationsCount
badge.visible: model.hasNotification badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2 badge.border.width: Theme.dp(2)
onClicked: { onClicked: {
stackView.clear() stackView.clear()
if(model.sectionType === appSectionType.apiDocumentation) if(model.sectionType === appSectionType.apiDocumentation)
@ -106,9 +110,9 @@ StatusWindow {
ThemeSwitch { ThemeSwitch {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 32 anchors.topMargin: Theme.dp(32)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 32 anchors.rightMargin: Theme.dp(32)
lightThemeEnabled: storeSettings.lightTheme lightThemeEnabled: storeSettings.lightTheme
onLightThemeEnabledChanged: { onLightThemeEnabledChanged: {
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
@ -138,13 +142,13 @@ StatusWindow {
anchors.top: parent.top anchors.top: parent.top
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
contentHeight: navigation.height + 56 contentHeight: navigation.height + Theme.dp(56)
contentWidth: navigation.width contentWidth: navigation.width
clip: true clip: true
Column { Column {
id: navigation id: navigation
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 48 anchors.topMargin: Theme.dp(48)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: 0 spacing: 0
@ -338,7 +342,7 @@ StatusWindow {
ScrollView { ScrollView {
visible: !storeSettings.fillPage visible: !storeSettings.fillPage
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 64 anchors.topMargin: Theme.dp(64)
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
contentWidth: (pageWrapper.width * rootWindow.factor) contentWidth: (pageWrapper.width * rootWindow.factor)
clip: true clip: true
@ -367,7 +371,7 @@ StatusWindow {
Loader { Loader {
active: storeSettings.fillPage active: storeSettings.fillPage
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 64 anchors.topMargin: Theme.dp(64)
visible: storeSettings.fillPage visible: storeSettings.fillPage
clip: true clip: true
@ -411,12 +415,12 @@ StatusWindow {
id: platformSwitch id: platformSwitch
anchors.left: demoApp.left anchors.left: demoApp.left
anchors.bottom: demoApp.top anchors.bottom: demoApp.top
anchors.bottomMargin: 20 anchors.bottomMargin: Theme.dp(20)
spacing: 2 spacing: Theme.dp(2)
Text { Text {
text: "OSX" text: "OSX"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
@ -432,7 +436,7 @@ StatusWindow {
Text { Text {
text: "Win" text: "Win"
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }
} }
@ -444,8 +448,8 @@ StatusWindow {
anchors.fill: demoApp anchors.fill: demoApp
source: demoApp source: demoApp
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 5 verticalOffset: Theme.dp(5)
radius: 20 radius: Theme.dp(20)
samples: 20 samples: 20
color: "#22000000" color: "#22000000"
} }
@ -455,7 +459,7 @@ StatusWindow {
StatusMacTrafficLights { StatusMacTrafficLights {
anchors.left: parent.left anchors.left: parent.left
anchors.top: parent.top anchors.top: parent.top
anchors.margins: 13 anchors.margins: Theme.dp(13)
visible: Qt.platform.os == "osx" visible: Qt.platform.os == "osx"

4
sandbox/pages/StatusAccountSelectorPage.qml
View File

@ -7,10 +7,10 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
import StatusQ.Core.Utils 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusAccountSelector { StatusAccountSelector {
id: accountSelector id: accountSelector

3
sandbox/pages/StatusAddressPage.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Controls 2.14 import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import Sandbox 0.1 import Sandbox 0.1
@ -14,7 +15,7 @@ Column {
} }
Item { Item {
width: 200 width: Theme.dp(200)
height: childrenRect.height height: childrenRect.height
StatusAddress { StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9" text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"

4
sandbox/pages/StatusChatInfoToolBarPage.qml
View File

@ -8,8 +8,8 @@ import StatusQ.Popups 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusChatInfoToolBar { StatusChatInfoToolBar {
chatInfoButton.title: "Cryptokitties" chatInfoButton.title: "Cryptokitties"

12
sandbox/pages/StatusColorSelectorGridPage.qml
View File

@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
width: 800 width: Theme.dp(800)
height: 100 height: Theme.dp(100)
Row { Row {
id: selectedColor id: selectedColor
anchors.top: parent.top anchors.top: parent.top
anchors.left: colorSelectionGrid.left anchors.left: colorSelectionGrid.left
spacing: 10 spacing: Theme.dp(10)
StatusBaseText { StatusBaseText {
text: "SelectedColor is" text: "SelectedColor is"
} }
Rectangle { Rectangle {
width: 100 width: Theme.dp(100)
height: 20 height: Theme.dp(20)
radius: width/2 radius: width/2
color: colorSelectionGrid.selectedColor color: colorSelectionGrid.selectedColor
} }
@ -28,7 +28,7 @@ Item {
StatusColorSelectorGrid { StatusColorSelectorGrid {
id: colorSelectionGrid id: colorSelectionGrid
anchors.top: selectedColor.bottom anchors.top: selectedColor.bottom
anchors.topMargin: 10 anchors.topMargin: Theme.dp(10)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
titleText: "COLOR" titleText: "COLOR"
selectedColorIndex: 2 selectedColorIndex: 2

2
sandbox/pages/StatusColorSelectorPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusColorSelector { StatusColorSelector {
model: ["red", "blue", "green"] model: ["red", "blue", "green"]

6
sandbox/pages/StatusColorSpacePage.qml
View File

@ -90,14 +90,14 @@ Item {
Rectangle { Rectangle {
color: colorSpace.color color: colorSpace.color
implicitHeight: 48 implicitHeight: Theme.dp(48)
radius: 10 radius: Theme.dp(10)
Layout.fillWidth: true Layout.fillWidth: true
StatusBaseText { StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
color: Theme.palette.white color: Theme.palette.white
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
text: "Quick brown fox jumps over the lazy dog" text: "Quick brown fox jumps over the lazy dog"
} }
} }

5
sandbox/pages/StatusCommunityCardPage.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.0
import QtQuick.Layouts 1.13 import QtQuick.Layouts 1.13
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
import "../demoapp/data" 1.0 import "../demoapp/data" 1.0
@ -17,8 +18,8 @@ GridLayout {
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
columns: 2 columns: 2
columnSpacing: 28 columnSpacing: Theme.dp(28)
rowSpacing: 28 rowSpacing: Theme.dp(28)
Repeater { Repeater {
model: Models.curatedCommunitiesModel model: Models.curatedCommunitiesModel

12
sandbox/pages/StatusCommunityTagsPage.qml
View File

@ -27,9 +27,9 @@ Item {
ColumnLayout { ColumnLayout {
id: column id: column
anchors.centerIn: parent anchors.centerIn: parent
width: 600 width: Theme.dp(600)
height: 500 height: Theme.dp(500)
spacing: 20 spacing: Theme.dp(20)
StatusInput { StatusInput {
id: tagsFilter id: tagsFilter
@ -55,14 +55,14 @@ Item {
RowLayout { RowLayout {
StatusBaseText { StatusBaseText {
text: qsTr("Selected tags") text: qsTr("Selected tags")
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
Layout.fillWidth: true Layout.fillWidth: true
} }
StatusBaseText { StatusBaseText {
text: cntSelectedTags + "/" + maxSelectedTags text: cntSelectedTags + "/" + maxSelectedTags
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
} }
} }
@ -80,4 +80,4 @@ Item {
Layout.fillHeight: true Layout.fillHeight: true
} }
} }
} }

20
sandbox/pages/StatusExpandableSettingsItemPage.qml
View File

@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
Column { Column {
spacing: 12 spacing: Theme.dp(12)
width: 800 width: Theme.dp(800)
anchors.top:parent.top anchors.top:parent.top
leftPadding: 20 leftPadding: Theme.dp(20)
rightPadding: 20 rightPadding: Theme.dp(20)
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 30 height: Theme.dp(30)
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
StatusBaseText { StatusBaseText {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -60,7 +60,7 @@ Column {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 30 height: Theme.dp(30)
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
StatusBaseText { StatusBaseText {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -103,7 +103,7 @@ Column {
Rectangle { Rectangle {
width: parent.width width: parent.width
height: 30 height: Theme.dp(30)
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
StatusBaseText { StatusBaseText {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
@ -134,15 +134,15 @@ Column {
id: notImplemented id: notImplemented
Rectangle { Rectangle {
anchors.centerIn: parent anchors.centerIn: parent
width: 654 width: Theme.dp(654)
height: infoText.implicitHeight height: infoText.implicitHeight
color: Theme.palette.baseColor5 color: Theme.palette.baseColor5
StatusBaseText { StatusBaseText {
id: infoText id: infoText
anchors.centerIn: parent anchors.centerIn: parent
color: Theme.palette.directColor4 color: Theme.palette.directColor4
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
lineHeight: 22 lineHeight: Theme.dp(22)
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
font.weight: Font.Medium font.weight: Font.Medium
text: qsTr("Not Implemented") text: qsTr("Not Implemented")

27
sandbox/pages/StatusInputPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusInput { StatusInput {
input.placeholderText: "Placeholder" input.placeholderText: "Placeholder"
@ -58,17 +58,17 @@ Column {
} }
Item { Item {
implicitWidth: 480 implicitWidth: Theme.dp(480)
implicitHeight: 82 implicitHeight: Theme.dp(82)
z: 100000 z: 100000
StatusSeedPhraseInput { StatusSeedPhraseInput {
id: statusSeedInput id: statusSeedInput
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: parent.height height: parent.height
textEdit.input.anchors.leftMargin: 16 textEdit.input.anchors.leftMargin: Theme.dp(16)
textEdit.input.anchors.rightMargin: 16 textEdit.input.anchors.rightMargin: Theme.dp(16)
textEdit.input.anchors.topMargin: 11 textEdit.input.anchors.topMargin: Theme.dp(11)
textEdit.label: "Input with drop down selection list" textEdit.label: "Input with drop down selection list"
leftComponentText: "1" leftComponentText: "1"
inputList: ListModel { inputList: ListModel {
@ -97,8 +97,8 @@ Column {
StatusInput { StatusInput {
label: "StatusInput" label: "StatusInput"
secondaryLabel: "with right icon" secondaryLabel: "with right icon"
input.icon.width: 15 input.icon.width: Theme.dp(15)
input.icon.height: 11 input.icon.height: Theme.dp(11)
input.icon.name: text !== "" ? "checkmark" : "" input.icon.name: text !== "" ? "checkmark" : ""
input.leftIcon: false input.leftIcon: false
} }
@ -107,7 +107,7 @@ Column {
label: "Label" label: "Label"
secondaryLabel: "secondary label" secondaryLabel: "secondary label"
input.placeholderText: "Placeholder" input.placeholderText: "Placeholder"
input.implicitHeight: 56 input.implicitHeight: Theme.dp(56)
} }
StatusInput { StatusInput {
@ -148,7 +148,7 @@ Column {
input.placeholderText: "Input width component (right side)" input.placeholderText: "Input width component (right side)"
input.rightComponent: StatusIcon { input.rightComponent: StatusIcon {
icon: "cancel" icon: "cancel"
height: 16 height: Theme.dp(16)
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
} }
} }
@ -162,14 +162,14 @@ Column {
StatusInput { StatusInput {
input.multiline: true input.multiline: true
input.placeholderText: "Multiline with static height" input.placeholderText: "Multiline with static height"
input.implicitHeight: 100 input.implicitHeight: Theme.dp(100)
} }
StatusInput { StatusInput {
input.multiline: true input.multiline: true
input.placeholderText: "Multiline with max/min" input.placeholderText: "Multiline with max/min"
input.minimumHeight: 80 input.minimumHeight: Theme.dp(80)
input.maximumHeight: 200 input.maximumHeight: Theme.dp(200)
} }
StatusInput { StatusInput {
@ -200,6 +200,7 @@ Column {
StatusInput { StatusInput {
label: "Input with inline token selector" label: "Input with inline token selector"
input.leftComponent: StatusTokenInlineSelector { input.leftComponent: StatusTokenInlineSelector {
anchors.verticalCenter: parent.verticalCenter
tokens: [{amount: 0.1, token: "ETH"}, tokens: [{amount: 0.1, token: "ETH"},
{amount: 10, token: "SNT"}, {amount: 10, token: "SNT"},
{amount: 15, token: "MANA"}] {amount: 15, token: "MANA"}]

12
sandbox/pages/StatusListPickerPage.qml
View File

@ -11,14 +11,14 @@ import "../demoapp/data" 1.0
GridLayout { GridLayout {
id: root id: root
columns: 1 columns: 1
rowSpacing: 150 rowSpacing: Theme.dp(150)
GridLayout { GridLayout {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
rows: 4 rows: 4
columns: 2 columns: 2
rowSpacing: 170 rowSpacing: Theme.dp(170)
columnSpacing: 150 columnSpacing: Theme.dp(150)
z: 100 z: 100
StatusListPicker { StatusListPicker {
id: languagePicker id: languagePicker
@ -56,15 +56,15 @@ GridLayout {
StatusBaseText { StatusBaseText {
id: pageDesc id: pageDesc
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
height: 100 height: Theme.dp(100)
width: 500 width: Theme.dp(500)
text: "4 different configurations for the `StatusListPicker` component:\n text: "4 different configurations for the `StatusListPicker` component:\n
* Single selection. \n * Single selection. \n
* Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
* Multiple selection.\n * Multiple selection.\n
* Multiple selection and displayed name is the symbol + shortName\n" * Multiple selection and displayed name is the symbol + shortName\n"
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
} }
// Outsite area // Outsite area

3
sandbox/pages/StatusMacNotificationPage.qml
View File

@ -3,11 +3,12 @@ import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Platform 0.1 import StatusQ.Platform 0.1
import StatusQ.Core.Theme 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusMacNotification { StatusMacNotification {
name: "Some name" name: "Some name"

5
sandbox/pages/StatusPasswordStrengthIndicatorPage.qml
View File

@ -1,10 +1,11 @@
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusPasswordStrengthIndicator { StatusPasswordStrengthIndicator {
id: veryweakPw id: veryweakPw

20
sandbox/pages/StatusPinInputPage.qml
View File

@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1
Column { Column {
id: root id: root
spacing: 25 spacing: Theme.dp(25)
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
// PIN input that accepts only numbers // PIN input that accepts only numbers
@ -16,7 +16,7 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: "Enter Keycard PIN" text: "Enter Keycard PIN"
font.pixelSize: 30 font.pixelSize: Theme.dp(30)
font.bold: true font.bold: true
} }
@ -30,23 +30,23 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
text: "Only numbers allowed" text: "Only numbers allowed"
font.pixelSize: 16 font.pixelSize: Theme.dp(16)
} }
StatusBaseText { StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: "Introduced PIN: " + numbersPinInput.pinInput text: "Introduced PIN: " + numbersPinInput.pinInput
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
} }
// PIN input that accepts input depending on the regular expression definition // PIN input that accepts input depending on the regular expression definition
StatusBaseText { StatusBaseText {
topPadding: 100 topPadding: Theme.dp(100)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: "Enter another Keycard PIN" text: "Enter another Keycard PIN"
font.pixelSize: 30 font.pixelSize: Theme.dp(30)
font.bold: true font.bold: true
} }
@ -54,8 +54,8 @@ Column {
id: regexPinInput id: regexPinInput
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ } validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
circleDiameter: 22 circleDiameter: Theme.dp(22)
circleSpacing: 22 circleSpacing: Theme.dp(22)
pinLen: 7 pinLen: 7
} }
@ -63,13 +63,13 @@ Column {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
text: "Only alphanumeric characters and '@' allowed" text: "Only alphanumeric characters and '@' allowed"
font.pixelSize: 16 font.pixelSize: Theme.dp(16)
} }
StatusBaseText { StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: "Introduced PIN: " + regexPinInput.pinInput text: "Introduced PIN: " + regexPinInput.pinInput
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
} }
} }

4
sandbox/pages/StatusPopupMenuPage.qml
View File

@ -9,8 +9,8 @@ import StatusQ.Popups 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusButton { StatusButton {
text: "Simple" text: "Simple"

2
sandbox/pages/StatusSelectPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusSelect { StatusSelect {
id: select id: select

2
sandbox/pages/StatusTabBarButtonPage.qml
View File

@ -7,7 +7,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusTabBar { StatusTabBar {
StatusTabButton { StatusTabButton {

2
sandbox/pages/StatusTabBarIconButtonPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
Row { Row {
StatusTabBarIconButton { StatusTabBarIconButton {

5
sandbox/pages/StatusTabSwitchPage.qml
View File

@ -3,11 +3,12 @@ import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
GridLayout { GridLayout {
columns: 1 columns: 1
columnSpacing: 5 columnSpacing: Theme.dp(5)
rowSpacing: 5 rowSpacing: Theme.dp(5)
StatusSwitchTabBar { StatusSwitchTabBar {
StatusSwitchTabButton { StatusSwitchTabButton {

5
sandbox/pages/StatusTagSelectorPage.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.14 import QtQuick 2.14
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
@ -56,8 +57,8 @@ Item {
StatusTagSelector { StatusTagSelector {
id: tagSelector id: tagSelector
width: 650 width: Theme.dp(650)
height: 44 height: Theme.dp(44)
anchors.centerIn: parent anchors.centerIn: parent
namesModel: root.asortedContacts namesModel: root.asortedContacts
toLabelText: qsTr("To: ") toLabelText: qsTr("To: ")

3
sandbox/pages/StatusToastMessagePage.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.14 import QtQuick 2.14
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
@ -9,7 +10,7 @@ Item {
Column { Column {
id: toastArea id: toastArea
anchors.centerIn: parent anchors.centerIn: parent
spacing: 8 spacing: Theme.dp(8)
Repeater { Repeater {
id: toastRepeater id: toastRepeater
width: parent.width width: parent.width

2
sandbox/pages/StatusWalletColorButtonPage.qml
View File

@ -11,7 +11,7 @@ Column {
spacing: 8 spacing: 8
Row { Row {
spacing: 4 spacing: Theme.dp(4)
StatusWalletColorButton { StatusWalletColorButton {
icon.color: Theme.palette.miscColor1 icon.color: Theme.palette.miscColor1
selected: true selected: true

2
sandbox/pages/StatusWalletColorSelectPage.qml
View File

@ -9,7 +9,7 @@ import StatusQ.Controls 0.1
import Sandbox 0.1 import Sandbox 0.1
Column { Column {
spacing: 8 spacing: Theme.dp(8)
StatusWalletColorSelect { StatusWalletColorSelect {
model: Theme.palette.userCustomizationColors model: Theme.palette.userCustomizationColors

10
sandbox/pages/StatusWizardStepperPage.qml
View File

@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
width: 800 width: Theme.dp(800)
height: 100 height: Theme.dp(100)
//Simulate animation between steps //Simulate animation between steps
property bool stepsCompleted: false property bool stepsCompleted: false
@ -44,7 +44,7 @@ Item {
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
text: "Press Ctrl+R to run the animation" text: "Press Ctrl+R to run the animation"
font.pixelSize: 17 font.pixelSize: Theme.dp(17)
} }
SequentialAnimation { SequentialAnimation {
@ -91,9 +91,9 @@ Item {
StatusWizardStepper { StatusWizardStepper {
id: wizardStepper id: wizardStepper
width: (parent.width - 50) width: (parent.width - Theme.dp(50))
anchors.top: indicLabel.bottom anchors.top: indicLabel.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
stepsModel: stepsListModel stepsModel: stepsListModel
} }

2
src/StatusQ/Components/StatusAddress.qml
View File

@ -13,7 +13,7 @@ StatusBaseText {
property real maxWidth: width property real maxWidth: width
font.family: Theme.palette.monoFont.name font.family: Theme.palette.monoFont.name
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
elide: Text.ElideMiddle elide: Text.ElideMiddle
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1

16
src/StatusQ/Components/StatusBadge.qml
View File

@ -7,18 +7,18 @@ Rectangle {
property int value property int value
implicitHeight: statusBadge.value > 0 ? 18 + statusBadge.border.width : 10 + statusBadge.border.width implicitHeight: statusBadge.value > 0 ? Theme.dp(18) + statusBadge.border.width : Theme.dp(10) + statusBadge.border.width
implicitWidth: { implicitWidth: {
if (statusBadge.value > 99) { if (statusBadge.value > Theme.dp(99)) {
return 28 + statusBadge.border.width return Theme.dp(28) + statusBadge.border.width
} }
if (statusBadge.value > 9) { if (statusBadge.value > Theme.dp(9)) {
return 26 + statusBadge.border.width return Theme.dp(26) + statusBadge.border.width
} }
if (statusBadge.value > 0) { if (statusBadge.value > 0) {
return 18 + statusBadge.border.width return Theme.dp(18) + statusBadge.border.width
} }
return 10 + statusBadge.border.width return Theme.dp(10) + statusBadge.border.width
} }
radius: height / 2 radius: height / 2
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
@ -26,7 +26,7 @@ Rectangle {
StatusBaseText { StatusBaseText {
id: value id: value
visible: statusBadge.value > 0 visible: statusBadge.value > 0
font.pixelSize: statusBadge.value > 99 ? 10 : 12 font.pixelSize: statusBadge.value > Theme.dp(99) ? Theme.dp(10) : Theme.dp(12)
font.weight: Font.Medium font.weight: Font.Medium
color: Theme.palette.statusBadge.foregroundColor color: Theme.palette.statusBadge.foregroundColor
anchors.centerIn: parent anchors.centerIn: parent

13
src/StatusQ/Components/StatusChatInfoToolBar.qml
View File

@ -3,12 +3,13 @@ import QtGraphicalEffects 1.13
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: statusChatInfoToolBar id: statusChatInfoToolBar
implicitWidth: 288 implicitWidth: Theme.dp(288)
implicitHeight: 56 implicitHeight: Theme.dp(56)
property alias chatInfoButton: statusChatInfoButton property alias chatInfoButton: statusChatInfoButton
property alias menuButton: statusMenuButton property alias menuButton: statusMenuButton
@ -27,7 +28,7 @@ Item {
id: statusChatInfoButton id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left anchors.left: parent.left
anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined anchors.right: (implicitWidth > parent.width - Theme.dp(50)) ? statusMenuButton.left : undefined
anchors.rightMargin: 5 anchors.rightMargin: 5
type: StatusChatInfoButton.Type.OneToOneChat type: StatusChatInfoButton.Type.OneToOneChat
onClicked: statusChatInfoToolBar.chatInfoButtonClicked() onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
@ -39,8 +40,8 @@ Item {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: popupMenuSlot.active visible: popupMenuSlot.active
width: visible ? 32 : 0 width: visible ? Theme.dp(32) : 0
height: 32 height: Theme.dp(32)
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
icon.name: "add" icon.name: "add"
@ -89,7 +90,7 @@ Item {
onClicked: { onClicked: {
statusChatInfoToolBar.addButtonClicked(mouse) statusChatInfoToolBar.addButtonClicked(mouse)
statusMenuButton.state = "pressed" statusMenuButton.state = "pressed"
popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4) popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + Theme.dp(4))
} }
Loader { Loader {

4
src/StatusQ/Components/StatusChatList.qml
View File

@ -11,8 +11,8 @@ import StatusQ.Controls 0.1
Column { Column {
id: statusChatList id: statusChatList
spacing: 4 spacing: Theme.dp(4)
width: 288 width: Theme.dp(288)
property string categoryId: "" property string categoryId: ""
property var model: null property var model: null

3
src/StatusQ/Components/StatusChatListAndCategories.qml
View File

@ -6,6 +6,7 @@ import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1 import StatusQ.Components 0.1
import StatusQ.Popups 0.1 import StatusQ.Popups 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: statusChatListAndCategories id: statusChatListAndCategories
@ -64,7 +65,7 @@ Item {
anchors.top: parent.top anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
spacing: 4 spacing: Theme.dp(4)
StatusChatList { StatusChatList {
id: statusChatList id: statusChatList

16
src/StatusQ/Components/StatusChatListCategoryItem.qml
View File

@ -8,11 +8,11 @@ import StatusQ.Components 0.1
StatusListItem { StatusListItem {
id: statusChatListCategoryItem id: statusChatListCategoryItem
implicitWidth: 288 implicitWidth: Theme.dp(288)
implicitHeight: 28 implicitHeight: Theme.dp(28)
leftPadding: 8 leftPadding: Theme.dp(8)
rightPadding: 8 rightPadding: Theme.dp(8)
property bool opened: true property bool opened: true
property bool highlighted: false property bool highlighted: false
@ -32,13 +32,13 @@ StatusListItem {
statusListItemTitle.color: Theme.palette.directColor4 statusListItemTitle.color: Theme.palette.directColor4
statusListItemTitle.font.weight: Font.Medium statusListItemTitle.font.weight: Font.Medium
statusListItemComponentsSlot.spacing: 1 statusListItemComponentsSlot.spacing: Theme.dp(1)
components: [ components: [
StatusChatListCategoryItemButton { StatusChatListCategoryItemButton {
id: addButton id: addButton
icon.name: "add" icon.name: "add"
icon.width: 20 icon.width: Theme.dp(20)
visible: statusChatListCategoryItem.showAddButton && visible: statusChatListCategoryItem.showAddButton &&
(statusChatListCategoryItem.highlighted || (statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse) statusChatListCategoryItem.sensor.containsMouse)
@ -48,7 +48,7 @@ StatusListItem {
StatusChatListCategoryItemButton { StatusChatListCategoryItemButton {
id: menuButton id: menuButton
icon.name: "more" icon.name: "more"
icon.width: 21 icon.width: Theme.dp(21)
visible: statusChatListCategoryItem.showMenuButton && visible: statusChatListCategoryItem.showMenuButton &&
(statusChatListCategoryItem.highlighted || (statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse) statusChatListCategoryItem.sensor.containsMouse)
@ -58,7 +58,7 @@ StatusListItem {
StatusChatListCategoryItemButton { StatusChatListCategoryItemButton {
id: toggleButton id: toggleButton
icon.name: "chevron-down" icon.name: "chevron-down"
icon.width: 18 icon.width: Theme.dp(18)
icon.rotation: statusChatListCategoryItem.opened ? 0 : 270 icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
onPressed: { onPressed: {
sensor.enabled = false; sensor.enabled = false;

28
src/StatusQ/Components/StatusChatListItem.qml
View File

@ -22,12 +22,12 @@ Rectangle {
property int notificationsCount: 0 property int notificationsCount: 0
property bool muted: false property bool muted: false
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
} }
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
color: Theme.palette.miscColor5 color: Theme.palette.miscColor5
emoji: "" emoji: ""
charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1 charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
@ -53,10 +53,10 @@ Rectangle {
CommunityChat // 6 CommunityChat // 6
} }
implicitWidth: 288 implicitWidth: Theme.dp(288)
implicitHeight: 40 implicitHeight: Theme.dp(40)
radius: 8 radius: Theme.dp(8)
color: { color: {
if (selected) { if (selected) {
@ -93,10 +93,10 @@ Rectangle {
StatusIcon { StatusIcon {
id: statusIcon id: statusIcon
anchors.left: identicon.right anchors.left: identicon.right
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 14 width: Theme.dp(14)
visible: root.type !== StatusChatListItem.Type.OneToOneChat visible: root.type !== StatusChatListItem.Type.OneToOneChat
opacity: { opacity: {
if (root.muted && !hoverHander.hovered && !root.highlighted) { if (root.muted && !hoverHander.hovered && !root.highlighted) {
@ -133,7 +133,7 @@ Rectangle {
anchors.leftMargin: statusIcon.visible ? 1 : 8 anchors.leftMargin: statusIcon.visible ? 1 : 8
anchors.right: mutedIcon.visible ? mutedIcon.left : anchors.right: mutedIcon.visible ? mutedIcon.left :
statusBadge.visible ? statusBadge.left : parent.right statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 6 anchors.rightMargin: Theme.dp(6)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: (root.type === StatusChatListItem.Type.PublicChat && text: (root.type === StatusChatListItem.Type.PublicChat &&
@ -158,7 +158,7 @@ Rectangle {
root.notificationsCount > 0 || root.notificationsCount > 0 ||
root.highlightWhenCreated || root.highlightWhenCreated ||
statusBadge.visible) ? Font.Bold : Font.Medium statusBadge.visible) ? Font.Bold : Font.Medium
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
} }
StatusIcon { StatusIcon {
@ -166,7 +166,7 @@ Rectangle {
anchors.right: statusBadge.visible ? statusBadge.left : parent.right anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 8 anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 14 width: Theme.dp(14)
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2 opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white" icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
visible: root.muted visible: root.muted
@ -190,10 +190,10 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 8 anchors.rightMargin: Theme.dp(8)
color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1 color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4 border.width: Theme.dp(4)
border.color: color border.color: color
value: root.notificationsCount value: root.notificationsCount
visible: root.notificationsCount > 0 visible: root.notificationsCount > 0

26
src/StatusQ/Components/StatusChatToolBar.qml
View File

@ -13,7 +13,7 @@ Item {
property alias membersButton: membersButton property alias membersButton: membersButton
property alias searchButton: searchButton property alias searchButton: searchButton
property int padding: 8 property int padding: Theme.dp(8)
property int notificationCount: 0 property int notificationCount: 0
property Component popupMenu property Component popupMenu
property var toolbarComponent property var toolbarComponent
@ -24,8 +24,8 @@ Item {
signal membersButtonClicked() signal membersButtonClicked()
signal searchButtonClicked() signal searchButtonClicked()
implicitWidth: 518 implicitWidth: Theme.dp(518)
implicitHeight: 60 implicitHeight: Theme.dp(60)
onPopupMenuChanged: { onPopupMenuChanged: {
if (!!popupMenu) { if (!!popupMenu) {
@ -55,8 +55,8 @@ Item {
StatusFlatRoundButton { StatusFlatRoundButton {
id: searchButton id: searchButton
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "search" icon.name: "search"
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.searchButtonClicked() onClicked: statusChatToolBar.searchButtonClicked()
@ -64,13 +64,13 @@ Item {
// initializing the tooltip // initializing the tooltip
tooltip.text: qsTr("Search") tooltip.text: qsTr("Search")
tooltip.orientation: StatusToolTip.Orientation.Bottom tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12 tooltip.y: parent.height + Theme.dp(12)
} }
StatusFlatRoundButton { StatusFlatRoundButton {
id: membersButton id: membersButton
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "group-chat" icon.name: "group-chat"
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.membersButtonClicked() onClicked: statusChatToolBar.membersButtonClicked()
@ -83,8 +83,8 @@ Item {
StatusFlatRoundButton { StatusFlatRoundButton {
id: menuButton id: menuButton
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: "more" icon.name: "more"
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
visible: !!statusChatToolBar.popupMenu visible: !!statusChatToolBar.popupMenu
@ -93,7 +93,7 @@ Item {
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
tooltip.text: qsTr("More") tooltip.text: qsTr("More")
tooltip.orientation: StatusToolTip.Orientation.Bottom tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12 tooltip.y: parent.height + Theme.dp(12)
property bool showMoreMenu: false property bool showMoreMenu: false
onClicked: { onClicked: {
@ -127,8 +127,8 @@ Item {
} }
Rectangle { Rectangle {
height: 24 height: Theme.dp(24)
width: 1 width: Theme.dp(1)
color: Theme.palette.directColor7 color: Theme.palette.directColor7
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: notificationButton.visible && visible: notificationButton.visible &&

4
src/StatusQ/Components/StatusColorSpace.qml
View File

@ -54,8 +54,8 @@ Item {
rootColor = Qt.hsva(color.hsvHue, 1, 1, 1) rootColor = Qt.hsva(color.hsvHue, 1, 1, 1)
} }
implicitWidth: 340 implicitWidth: Theme.dp(340)
implicitHeight: 340 implicitHeight: Theme.dp(340)
QtObject { QtObject {
id: d id: d

136
src/StatusQ/Components/StatusCommunityCard.qml
View File

@ -130,13 +130,13 @@ Rectangle {
QtObject { QtObject {
id: d id: d
property int cardWidth: 335 property int cardWidth: Theme.dp(335)
property int bannerHeigth: 64 property int bannerHeigth: Theme.dp(64)
property int cardHeigth: 190 property int cardHeigth: Theme.dp(190)
property int totalHeigth: 230 property int totalHeigth: Theme.dp(230)
property int margins: 12 property int margins: Theme.dp(12)
property int bannerRadius: 20 property int bannerRadius: Theme.dp(20)
property int cardRadius: 16 property int cardRadius: Theme.dp(16)
property color cardColor: Theme.palette.indirectColor1 property color cardColor: Theme.palette.indirectColor1
property color fontColor: Theme.palette.directColor1 property color fontColor: Theme.palette.directColor1
property color loadingColor1: Theme.palette.baseColor5 property color loadingColor1: Theme.palette.baseColor5
@ -168,8 +168,8 @@ Rectangle {
layer.effect: DropShadow { layer.effect: DropShadow {
source: root source: root
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 2 verticalOffset: Theme.dp(2)
radius: sensor.containsMouse ? 30 : d.bannerRadius radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius
samples: 25 samples: 25
spread: 0 spread: 0
color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow
@ -207,10 +207,10 @@ Rectangle {
Rectangle { Rectangle {
z: content.z + 1 z: content.z + 1
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 12 anchors.leftMargin: Theme.dp(12)
width: 48 width: Theme.dp(48)
height: width height: width
radius: width / 2 radius: width / 2
color: root.loaded ? d.cardColor : d.loadingColor1 color: root.loaded ? d.cardColor : d.loadingColor1
@ -218,7 +218,7 @@ Rectangle {
StatusRoundedImage { StatusRoundedImage {
visible: root.loaded visible: root.loaded
anchors.centerIn: parent anchors.centerIn: parent
width: parent.width - 4 width: parent.width - Theme.dp(4)
height: width height: width
image.source: root.logo image.source: root.logo
color: "transparent" color: "transparent"
@ -231,7 +231,7 @@ Rectangle {
z: banner.z + 1 z: banner.z + 1
visible: root.loaded visible: root.loaded
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 40 anchors.topMargin: Theme.dp(40)
width: d.cardWidth width: d.cardWidth
height: d.cardHeigth height: d.cardHeigth
color: d.cardColor color: d.cardColor
@ -241,27 +241,27 @@ Rectangle {
Rectangle { Rectangle {
visible: root.isPrivate visible: root.isPrivate
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: anchors.topMargin anchors.rightMargin: anchors.topMargin
width: 48 width: Theme.dp(48)
height: 24 height: Theme.dp(24)
color: d.loadingColor2 color: d.loadingColor2
radius: 200 radius: Theme.dp(200)
StatusIcon { StatusIcon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.leftMargin: 6 anchors.leftMargin: 6
anchors.left: parent.left anchors.left: parent.left
icon: "tiny/unlocked" icon: "tiny/unlocked"
width: 16 width: Theme.dp(16)
height: 16 height: Theme.dp(16)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
StatusRoundedImage { StatusRoundedImage {
anchors.rightMargin: 2 anchors.rightMargin: Theme.dp(2)
anchors.right: parent.right anchors.right: parent.right
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 20 width: Theme.dp(20)
height: width height: width
image.source: root.tokenLogo image.source: root.tokenLogo
color: "transparent" color: "transparent"
@ -270,24 +270,24 @@ Rectangle {
// Community info // Community info
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 32 anchors.topMargin: Theme.dp(32)
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins anchors.bottomMargin: d.margins
clip: true clip: true
spacing: 6 spacing: Theme.dp(6)
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
text: root.name text: root.name
font.weight: Font.Bold font.weight: Font.Bold
font.pixelSize: 19 font.pixelSize: Theme.dp(19)
color: d.fontColor color: d.fontColor
} }
StatusBaseText { StatusBaseText {
Layout.fillWidth: true Layout.fillWidth: true
Layout.fillHeight: true Layout.fillHeight: true
text: root.description text: root.description
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
lineHeight: 1.2 lineHeight: 1.2
color: d.fontColor color: d.fontColor
maximumLineCount: 2 maximumLineCount: 2
@ -298,48 +298,48 @@ Rectangle {
} }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 116 anchors.topMargin: Theme.dp(116)
anchors.leftMargin: d.margins anchors.leftMargin: d.margins
anchors.rightMargin: d.margins anchors.rightMargin: d.margins
anchors.bottomMargin: d.margins anchors.bottomMargin: d.margins
clip: true clip: true
spacing: 18 spacing: Theme.dp(18)
Row { Row {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
spacing: 20 spacing: Theme.dp(20)
// Members // Members
Row { Row {
height: membersTxt.height height: membersTxt.height
spacing: 4 spacing: Theme.dp(4)
StatusIcon { StatusIcon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon: "tiny/members" icon: "tiny/members"
width: 16 width: Theme.dp(16)
height: 16 height: Theme.dp(16)
} }
StatusBaseText { StatusBaseText {
id: membersTxt id: membersTxt
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.members) text: d.numberFormat(root.members)
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: d.fontColor color: d.fontColor
} }
} }
// Active users: // Active users:
Row { Row {
height: activeUsersTxt.height height: activeUsersTxt.height
spacing: 4 spacing: Theme.dp(4)
StatusIcon { StatusIcon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
icon: "tiny/flash" icon: "tiny/flash"
width: 14 width: Theme.dp(14)
height: 14 height: Theme.dp(14)
} }
StatusBaseText { StatusBaseText {
id: activeUsersTxt id: activeUsersTxt
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
text: d.numberFormat(root.activeUsers) text: d.numberFormat(root.activeUsers)
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: d.fontColor color: d.fontColor
} }
} }
@ -349,7 +349,7 @@ Rectangle {
visible: root.categories.count > 0 visible: root.categories.count > 0
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.fillWidth: true Layout.fillWidth: true
spacing: 8 spacing: Theme.dp(8)
clip: true clip: true
Repeater { Repeater {
@ -357,16 +357,16 @@ Rectangle {
delegate: StatusListItemTag { delegate: StatusListItemTag {
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
color: "transparent" color: "transparent"
height: 24 height: Theme.dp(24)
radius: 20 radius: Theme.dp(20)
closeButtonVisible: false closeButtonVisible: false
icon.emoji: model.emoji icon.emoji: model.emoji
icon.height: 24 icon.height: Theme.dp(24)
icon.width: icon.height icon.width: icon.height
icon.color: "transparent" icon.color: "transparent"
icon.isLetterIdenticon: true icon.isLetterIdenticon: true
title: model.name title: model.name
titleText.font.pixelSize: 13 titleText.font.pixelSize: Theme.dp(13)
titleText.color: d.fontColor titleText.color: d.fontColor
} }
} }
@ -378,7 +378,7 @@ Rectangle {
Rectangle { Rectangle {
visible: !root.loaded visible: !root.loaded
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 40 anchors.topMargin: Theme.dp(40)
width: d.cardWidth width: d.cardWidth
height: d.cardHeigth height: d.cardHeigth
color: d.cardColor color: d.cardColor
@ -386,48 +386,48 @@ Rectangle {
clip: true clip: true
Rectangle { Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: anchors.topMargin anchors.rightMargin: anchors.topMargin
width: 48 width: Theme.dp(48)
height: 24 height: Theme.dp(24)
color: d.loadingColor2 color: d.loadingColor2
radius: 200 radius: Theme.dp(200)
} }
ColumnLayout { ColumnLayout {
anchors.fill: parent anchors.fill: parent
anchors.topMargin: 32 anchors.topMargin: Theme.dp(32)
anchors.margins: d.margins anchors.margins: d.margins
clip: true clip: true
spacing: 9 spacing: Theme.dp(9)
Rectangle { Rectangle {
width: 84 width: Theme.dp(84)
height: 16 height: Theme.dp(16)
color: d.loadingColor1 color: d.loadingColor1
radius: 5 radius: Theme.dp(5)
} }
Rectangle { Rectangle {
width: 311 width: Theme.dp(311)
height: 16 height: Theme.dp(16)
color: d.loadingColor1 color: d.loadingColor1
radius: 5 radius: Theme.dp(5)
} }
Rectangle { Rectangle {
width: 271 width: Theme.dp(271)
height: 16 height: Theme.dp(16)
color: d.loadingColor1 color: d.loadingColor1
radius: 5 radius: Theme.dp(5)
} }
Row { Row {
Layout.topMargin: 22 - 9 Layout.topMargin: Theme.dp(13)
spacing: 16 spacing: Theme.dp(16)
Repeater { Repeater {
model: 2 model: 2
delegate: Row { delegate: Row {
spacing: 4 spacing: Theme.dp(4)
Rectangle { Rectangle {
width: 14 width: Theme.dp(14)
height: 14 height: Theme.dp(14)
color: d.loadingColor1 color: d.loadingColor1
radius: width / 2 radius: width / 2
} }
@ -441,16 +441,16 @@ Rectangle {
} }
} }
Row { Row {
Layout.topMargin: 21 - 9 Layout.topMargin: Theme.dp(12)
spacing: 8 spacing: Theme.dp(8)
Repeater { Repeater {
model: 3 model: 3
delegate: delegate:
Rectangle { Rectangle {
width: 76 width: Theme.dp(76)
height: 24 height: Theme.dp(24)
color: d.loadingColor2 color: d.loadingColor2
radius: 20 radius: Theme.dp(20)
} }
} }
} }

7
src/StatusQ/Components/StatusCommunityTags.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
@ -28,7 +29,7 @@ Item {
} }
return Math.min(parent.width, itemsWidth); return Math.min(parent.width, itemsWidth);
} }
spacing: 10 spacing: Theme.dp(10)
Repeater { Repeater {
id: repeater id: repeater
@ -38,11 +39,11 @@ Item {
name: model.name name: model.name
visible: (root.showOnlySelected ? model.selected : !model.selected) && visible: (root.showOnlySelected ? model.selected : !model.selected) &&
(filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1) (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1)
width: visible ? implicitWidth : -10 width: visible ? implicitWidth : -Theme.dp(10)
height: visible ? implicitHeight : 0 height: visible ? implicitHeight : 0
removable: root.showOnlySelected && root.active removable: root.showOnlySelected && root.active
onClicked: root.clicked(model) onClicked: root.clicked(model)
} }
} }
} }
} }

6
src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml
View File

@ -5,8 +5,8 @@ import StatusQ.Components 0.1
StatusListItem { StatusListItem {
id: statusContactRequestsListItem id: statusContactRequestsListItem
implicitHeight: 64 implicitHeight: Theme.dp(64)
implicitWidth: 288 implicitWidth: Theme.dp(288)
color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
@ -17,7 +17,7 @@ StatusListItem {
visible: statusContactRequestsListItem.requestsCount > 0 visible: statusContactRequestsListItem.requestsCount > 0
value: statusContactRequestsListItem.requestsCount value: statusContactRequestsListItem.requestsCount
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
border.width: 4 border.width: Theme.dp(4)
border.color: color border.color: color
}, },
StatusIcon { StatusIcon {

10
src/StatusQ/Components/StatusContactVerificationIcons.qml
View File

@ -15,8 +15,8 @@ Row {
width: dummyImage.width width: dummyImage.width
height: dummyImage.height height: dummyImage.height
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 10 width: Theme.dp(10)
height: 10 height: Theme.dp(10)
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
} }
// Only used to get implicit width and height from the actual image // Only used to get implicit width and height from the actual image
@ -33,8 +33,8 @@ Row {
width: dummyImage.width width: dummyImage.width
height: dummyImage.height height: dummyImage.height
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 10 width: Theme.dp(10)
height: 10 height: Theme.dp(10)
color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1 color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
} }
// Only used to get implicit width and height from the actual image // Only used to get implicit width and height from the actual image
@ -50,7 +50,7 @@ Row {
Untrustworthy //2 Untrustworthy //2
} }
spacing: 4 spacing: Theme.dp(4)
visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None) visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
StatusRoundIcon { StatusRoundIcon {

34
src/StatusQ/Components/StatusDescriptionListItem.qml
View File

@ -11,16 +11,16 @@ Rectangle {
property alias subTitleComponent: statusDescriptionListItemSubTitle property alias subTitleComponent: statusDescriptionListItemSubTitle
property string value: "" property string value: ""
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 23 width: Theme.dp(23)
height: 23 height: Theme.dp(23)
} }
property alias tooltip: statusToolTip property alias tooltip: statusToolTip
property alias iconButton: statusFlatRoundButton property alias iconButton: statusFlatRoundButton
property alias sensor: sensor property alias sensor: sensor
implicitWidth: 448 implicitWidth: Theme.dp(448)
implicitHeight: 56 implicitHeight: Theme.dp(56)
radius: 8 radius: Theme.dp(8)
color: Theme.palette.statusListItem.backgroundColor color: Theme.palette.statusListItem.backgroundColor
@ -35,12 +35,12 @@ Rectangle {
id: statusDescriptionListItemTitle id: statusDescriptionListItemTitle
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.topMargin: 5 anchors.topMargin: Theme.dp(5)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: statusDescriptionListItem.title text: statusDescriptionListItem.title
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
font.weight: Font.Medium font.weight: Font.Medium
} }
@ -48,12 +48,12 @@ Rectangle {
id: statusDescriptionListItemSubTitle id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.topMargin: 4 anchors.topMargin: Theme.dp(4)
text: statusDescriptionListItem.subTitle text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
font.weight: Font.Normal font.weight: Font.Normal
} }
@ -62,10 +62,10 @@ Rectangle {
visible: !!statusDescriptionListItem.icon.name visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
icon.name: statusDescriptionListItem.icon.name icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width icon.width: statusDescriptionListItem.icon.width
@ -78,15 +78,15 @@ Rectangle {
Row { Row {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: !!statusDescriptionListItem.value visible: !!statusDescriptionListItem.value
spacing: 8 spacing: Theme.dp(8)
StatusBaseText { StatusBaseText {
text: statusDescriptionListItem.value text: statusDescriptionListItem.value
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
} }

8
src/StatusQ/Components/StatusEmoji.qml
View File

@ -1,14 +1,16 @@
import QtQuick 2.13 import QtQuick 2.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Image { Image {
id: root id: root
property string emojiId: "" property string emojiId: ""
width: 14 width: Theme.dp(14)
height: 14 height: Theme.dp(14)
sourceSize.width: width sourceSize.width: width
sourceSize.height: height sourceSize.height: height
@ -16,4 +18,4 @@ Image {
mipmap: true mipmap: true
antialiasing: true antialiasing: true
source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : "" source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
} }

74
src/StatusQ/Components/StatusExpandableItem.qml
View File

@ -19,18 +19,18 @@ Rectangle {
property bool expanded: false property bool expanded: false
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40 width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40 height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
color: Theme.palette.primaryColor2 color: Theme.palette.primaryColor2
} }
} }
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
} }
enum Type { enum Type {
@ -39,7 +39,7 @@ Rectangle {
Tertiary // 2 Tertiary // 2
} }
implicitWidth: 718 implicitWidth: Theme.dp(718)
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0 radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
color: "transparent" color: "transparent"
@ -52,7 +52,7 @@ Rectangle {
anchors.top: parent.top anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
width: parent.width width: parent.width
height: 1 height: Theme.dp(1)
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
@ -63,16 +63,16 @@ Rectangle {
id: header id: header
anchors.top: parent.top anchors.top: parent.top
width: parent.width width: parent.width
height: 64 height: Theme.dp(64)
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0 radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0
color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
StatusSmartIdenticon { StatusSmartIdenticon {
id: identicon id: identicon
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25 anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11 anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11)
image: statusExpandableItem.image image: statusExpandableItem.image
icon: statusExpandableItem.icon icon: statusExpandableItem.icon
name: primaryText.text name: primaryText.text
@ -83,20 +83,20 @@ Rectangle {
id: primaryText id: primaryText
anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) || anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ||
(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17 anchors.topMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17)
anchors.left: identicon.active ? identicon.right : parent.left anchors.left: identicon.active ? identicon.right : parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16 anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16)
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 : width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) :
parent.width - icon.background.width - additionalText.contentWidth - 110) : parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) :
(button.visible ? parent.width - icon.background.width - button.width - 70 : (button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) :
parent.width - icon.background.width - 70) parent.width - icon.background.width - Theme.dp(70))
font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17 font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17)
lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24 lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24)
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
elide: Text.ElideRight elide: Text.ElideRight
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1 color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
@ -105,12 +105,12 @@ Rectangle {
StatusBaseText { StatusBaseText {
id: secondaryText id: secondaryText
anchors.top: primaryText.bottom anchors.top: primaryText.bottom
anchors.topMargin: 4 anchors.topMargin: Theme.dp(4)
anchors.left: primaryText.left anchors.left: primaryText.left
anchors.right: primaryText.right anchors.right: primaryText.right
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
lineHeight: 22 lineHeight: Theme.dp(22)
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
elide: Text.ElideRight elide: Text.ElideRight
color: Theme.palette.directColor3 color: Theme.palette.directColor3
@ -119,12 +119,12 @@ Rectangle {
StatusBaseText { StatusBaseText {
id: additionalText id: additionalText
anchors.verticalCenter: primaryText.verticalCenter anchors.verticalCenter: primaryText.verticalCenter
anchors.verticalCenterOffset: 2 anchors.verticalCenterOffset: Theme.dp(2)
anchors.right: expandImage.left anchors.right: expandImage.left
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
lineHeight: 24 lineHeight: Theme.dp(24)
lineHeightMode: Text.FixedHeight lineHeightMode: Text.FixedHeight
elide: Text.ElideRight elide: Text.ElideRight
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
@ -133,9 +133,9 @@ Rectangle {
StatusButton { StatusButton {
id: button id: button
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 19 anchors.topMargin: Theme.dp(19)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
visible: !!text visible: !!text
} }
@ -148,13 +148,13 @@ Rectangle {
anchors.rightMargin: { anchors.rightMargin: {
switch (statusExpandableItem.type) { switch (statusExpandableItem.type) {
case StatusExpandableItem.Type.Primary: case StatusExpandableItem.Type.Primary:
return 23 return Theme.dp(23)
break; break;
case StatusExpandableItem.Type.Secondary: case StatusExpandableItem.Type.Secondary:
return 16 return Theme.dp(16)
break; break;
default: default:
return 6 return Theme.dp(6)
} }
} }
@ -181,11 +181,11 @@ Rectangle {
Loader { Loader {
id: expandableRegion id: expandableRegion
anchors.top: header.bottom anchors.top: header.bottom
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0 anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(48) : 0
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0 anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0
visible: false visible: false
} }
@ -202,13 +202,13 @@ Rectangle {
State { State {
name: "EXPANDED" name: "EXPANDED"
PropertyChanges {target: expandImage; icon: "chevron-up"} PropertyChanges {target: expandImage; icon: "chevron-up"}
PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22} PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + Theme.dp(22)}
PropertyChanges {target: expandableRegion; visible: true} PropertyChanges {target: expandableRegion; visible: true}
}, },
State { State {
name: "COLLAPSED" name: "COLLAPSED"
PropertyChanges {target: expandImage; icon: "chevron-down"} PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: statusExpandableItem; height: 82} PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)}
PropertyChanges {target: expandableRegion; visible: false} PropertyChanges {target: expandableRegion; visible: false}
} }
] ]

17
src/StatusQ/Components/StatusImageCropPanel.qml
View File

@ -2,6 +2,7 @@ import QtQuick 2.14
import QtQuick.Layouts 1.14 import QtQuick.Layouts 1.14
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
/*! /*!
@ -50,7 +51,7 @@ Item {
\qmlproperty bool StatusImageCrop::margins \qmlproperty bool StatusImageCrop::margins
Space to keep around the control borders and crop area Space to keep around the control borders and crop area
*/ */
property int margins: 10 property int margins: Theme.dp(10)
/*! /*!
\qmlproperty url StatusImageCropPanel::source \qmlproperty url StatusImageCropPanel::source
@ -215,7 +216,7 @@ Item {
onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y)) onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
onWheel: { onWheel: {
const delta = wheel.angleDelta.y / 120 const delta = wheel.angleDelta.y / Theme.dp(120)
cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor)) cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
} }
@ -242,13 +243,13 @@ Item {
StatusIcon { StatusIcon {
icon: "remove-circle" icon: "remove-circle"
Layout.preferredWidth: 20 Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: 20 Layout.preferredHeight: Theme.dp(20)
} }
StatusSlider { StatusSlider {
Layout.fillWidth: true Layout.fillWidth: true
Layout.topMargin: 20 Layout.topMargin: Theme.dp(20)
Layout.bottomMargin: 25 Layout.bottomMargin: Theme.dp(25)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
enabled: root.interactive enabled: root.interactive
@ -262,8 +263,8 @@ Item {
StatusIcon { StatusIcon {
icon: "add-circle" icon: "add-circle"
Layout.preferredWidth: 20 Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: 20 Layout.preferredHeight: Theme.dp(20)
} }
} }
} }

6
src/StatusQ/Components/StatusLetterIdenticon.qml
View File

@ -10,12 +10,12 @@ Rectangle {
property string name property string name
property string emoji property string emoji
property string emojiSize: Emoji.size.small property string emojiSize: Emoji.size.small
property int letterSize: 21 property int letterSize: Theme.dp(21)
property int charactersLen: 1 property int charactersLen: 1
color: Theme.palette.miscColor5 color: Theme.palette.miscColor5
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
radius: width / 2 radius: width / 2
StatusEmoji { StatusEmoji {

56
src/StatusQ/Components/StatusListItem.qml
View File

@ -20,8 +20,8 @@ Rectangle {
property string subTitle: "" property string subTitle: ""
property string tertiaryTitle: "" property string tertiaryTitle: ""
property string label: "" property string label: ""
property real leftPadding: 16 property real leftPadding: Theme.dp(16)
property real rightPadding: 16 property real rightPadding: Theme.dp(16)
property bool enabled: true property bool enabled: true
property bool highlighted: false property bool highlighted: false
property bool propagateTitleClicks: true property bool propagateTitleClicks: true
@ -35,17 +35,17 @@ Rectangle {
property bool loadingFailed: false property bool loadingFailed: false
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20 height: Theme.dp(isLetterIdenticon ? 40 : 20)
width: isLetterIdenticon ? 40 : 20 width: Theme.dp(isLetterIdenticon ? 40 : 20)
rotation: 0 rotation: 0
isLetterIdenticon: false isLetterIdenticon: false
letterSize: 21 letterSize: Theme.dp(21)
charactersLen: 1 charactersLen: 1
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ? color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1 Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
color: { color: {
if (sensor.containsMouse) { if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary || return type === StatusListItem.Type.Secondary ||
@ -58,8 +58,8 @@ Rectangle {
} }
} }
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
isIdenticon: false isIdenticon: false
} }
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
@ -90,12 +90,12 @@ Rectangle {
Danger Danger
} }
implicitWidth: 448 implicitWidth: Theme.dp(448)
implicitHeight: { implicitHeight: {
if (bottomModel.length === 0) { if (bottomModel.length === 0) {
return Math.max(64, statusListItemTitleArea.height + 16) return Math.max(64, statusListItemTitleArea.height + Theme.dp(16))
} }
return Math.max(64, statusListItemTitleArea.height + 90) return Math.max(Theme.dp(64), statusListItemTitleArea.height + Theme.dp(90))
} }
color: { color: {
if (sensor.containsMouse || statusListItem.highlighted) { if (sensor.containsMouse || statusListItem.highlighted) {
@ -179,7 +179,7 @@ Rectangle {
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding anchors.leftMargin: iconOrImage.active ? Theme.dp(16) : statusListItem.leftPadding
anchors.rightMargin: statusListItem.rightPadding anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
@ -209,7 +209,7 @@ Rectangle {
id: statusListItemTitle id: statusListItemTitle
opacity: titleLoadingOverlay.visible ? 0 : 1 opacity: titleLoadingOverlay.visible ? 0 : 1
text: statusListItem.title text: statusListItem.title
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
height: visible ? contentHeight : 0 height: visible ? contentHeight : 0
elide: Text.ElideRight elide: Text.ElideRight
anchors.left: parent.left anchors.left: parent.left
@ -254,12 +254,12 @@ Rectangle {
StatusBaseText { StatusBaseText {
id: statusListItemTitleAsideText id: statusListItemTitleAsideText
anchors.left: statusListItemTitle.right anchors.left: statusListItemTitle.right
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: statusListItemTitle.verticalCenter anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.top: bottomModel.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 20 anchors.topMargin: bottomModel.length === 0 ? undefined : 20
text: statusListItem.titleAsideText text: statusListItem.titleAsideText
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
visible: !!statusListItem.titleAsideText visible: !!statusListItem.titleAsideText
} }
@ -268,7 +268,7 @@ Rectangle {
id: titleIconsRow id: titleIconsRow
anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
anchors.verticalCenter: statusListItemTitle.verticalCenter anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
} }
StatusBaseText { StatusBaseText {
@ -293,7 +293,7 @@ Rectangle {
height: visible ? contentHeight : 0 height: visible ? contentHeight : 0
text: statusListItem.tertiaryTitle text: statusListItem.tertiaryTitle
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
visible: !!statusListItem.tertiaryTitle visible: !!statusListItem.tertiaryTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere wrapMode: Text.WrapAtWordBoundaryOrAnywhere
} }
@ -302,14 +302,14 @@ Rectangle {
id: statusListItemBadge id: statusListItemBadge
anchors.top: statusListItemTertiaryTitle.bottom anchors.top: statusListItemTertiaryTitle.bottom
width: contentItem.width width: contentItem.width
implicitHeight: visible ? 22 : 0 implicitHeight: visible ? Theme.dp(22) : 0
} }
Row { Row {
id: statusListItemTagsSlotInline id: statusListItemTagsSlotInline
anchors.top: statusListItemTertiaryTitle.bottom anchors.top: statusListItemTertiaryTitle.bottom
width: parent.width width: parent.width
spacing: 10 spacing: Theme.dp(10)
clip: true clip: true
Repeater { Repeater {
@ -321,12 +321,12 @@ Rectangle {
Row { Row {
id: statusListItemTagsSlot id: statusListItemTagsSlot
anchors.topMargin: 16 anchors.topMargin: Theme.dp(16)
anchors.top: iconOrImage.bottom anchors.top: iconOrImage.bottom
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
width: statusListItemBadge.width width: statusListItemBadge.width
spacing: 10 spacing: Theme.dp(10)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
Repeater { Repeater {
@ -339,12 +339,12 @@ Rectangle {
id: statusListItemLabel id: statusListItemLabel
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: bottomModel.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 16 anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(16)
anchors.right: statusListItemComponentsSlot.left anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0 anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0
text: statusListItem.label text: statusListItem.label
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
visible: !!statusListItem.label visible: !!statusListItem.label
} }
@ -355,8 +355,8 @@ Rectangle {
anchors.rightMargin: statusListItem.rightPadding anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
anchors.top: bottomModel.length === 0 ? undefined: parent.top anchors.top: bottomModel.length === 0 ? undefined: parent.top
anchors.topMargin: bottomModel.length === 0 ? undefined : 12 anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12)
spacing: 10 spacing: Theme.dp(10)
} }
} }
} }

18
src/StatusQ/Components/StatusListItemBadge.qml
View File

@ -14,13 +14,13 @@ Control {
property string secondaryText: "" property string secondaryText: ""
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
height: 16 height: Theme.dp(16)
width: 16 width: Theme.dp(16)
isIdenticon: false isIdenticon: false
} }
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: 16 height: Theme.dp(16)
width: 16 width: Theme.dp(16)
isLetterIdenticon: false isLetterIdenticon: false
background: StatusIconBackgroundSettings {} background: StatusIconBackgroundSettings {}
color: "transparent" color: "transparent"
@ -29,31 +29,31 @@ Control {
background: Rectangle { background: Rectangle {
anchors.fill: parent anchors.fill: parent
color: "transparent" color: "transparent"
radius: 11 radius: Theme.dp(11)
border.color: Theme.palette.directColor7 border.color: Theme.palette.directColor7
} }
contentItem: Item { contentItem: Item {
id: contentItem id: contentItem
width: (contentItemRow.width + 10) width: (contentItemRow.width + Theme.dp(10))
height: parent.height height: parent.height
RowLayout { RowLayout {
id: contentItemRow id: contentItemRow
anchors.centerIn: parent anchors.centerIn: parent
anchors.horizontalCenterOffset: -spacing anchors.horizontalCenterOffset: -spacing
spacing: 2 spacing: Theme.dp(2)
StatusRoundedImage { StatusRoundedImage {
implicitWidth: root.image.width implicitWidth: root.image.width
implicitHeight: root.image.height implicitHeight: root.image.height
visible: !root.icon.isLetterIdenticon visible: !root.icon.isLetterIdenticon
image.source: root.image.source image.source: root.image.source
border.color: Theme.palette.baseColor1 border.color: Theme.palette.baseColor1
border.width: root.image.isIdenticon ? 1 : 0 border.width: root.image.isIdenticon ? Theme.dp(1) : 0
} }
StatusLetterIdenticon { StatusLetterIdenticon {
implicitWidth: root.icon.width implicitWidth: root.icon.width
implicitHeight: root.icon.width implicitHeight: root.icon.width
letterSize: 11 letterSize: Theme.dp(11)
visible: root.icon.isLetterIdenticon visible: root.icon.isLetterIdenticon
color: root.icon.color color: root.icon.color
name: root.primaryText name: root.primaryText

24
src/StatusQ/Components/StatusListItemTag.qml
View File

@ -7,9 +7,9 @@ import StatusQ.Core.Theme 0.1
Rectangle { Rectangle {
id: root id: root
width: layout.width + layout.anchors.margins width: layout.width + layout.anchors.margins
height: 30 height: Theme.dp(30)
color: Theme.palette.primaryColor3 color: Theme.palette.primaryColor3
radius: 15 radius: Theme.dp(15)
property alias titleText: titleText property alias titleText: titleText
@ -18,21 +18,21 @@ Rectangle {
signal clicked() signal clicked()
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 20 width: Theme.dp(20)
height: 20 height: Theme.dp(20)
isIdenticon: false isIdenticon: false
} }
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
height: 20 height: Theme.dp(20)
width: 20 width: Theme.dp(20)
rotation: 0 rotation: 0
isLetterIdenticon: false isLetterIdenticon: false
letterSize: 10 letterSize: Theme.dp(10)
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 15 width: Theme.dp(15)
height: 15 height: Theme.dp(15)
color: Theme.palette.primaryColor3 color: Theme.palette.primaryColor3
} }
} }
@ -40,11 +40,11 @@ Rectangle {
RowLayout { RowLayout {
id: layout id: layout
height: parent.height height: parent.height
anchors.margins: 6 anchors.margins: Theme.dp(6)
StatusSmartIdenticon { StatusSmartIdenticon {
id: iconOrImage id: iconOrImage
Layout.leftMargin: 4 Layout.leftMargin: Theme.dp(4)
image: root.image image: root.image
icon: root.icon icon: root.icon
name: root.title name: root.title
@ -57,7 +57,7 @@ Rectangle {
id: titleText id: titleText
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
text: root.title text: root.title
Layout.rightMargin: closeButtonVisible ? 0 : 5 Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5)
} }
StatusIcon { StatusIcon {

30
src/StatusQ/Components/StatusListPicker.qml
View File

@ -227,8 +227,8 @@ Item {
} }
} }
width: 110 width: Theme.dp(110)
height: 38 height: Theme.dp(38)
Component.onCompleted: d.initialize() Component.onCompleted: d.initialize()
@ -238,7 +238,7 @@ Item {
bgColor: Theme.palette.primaryColor3 bgColor: Theme.palette.primaryColor3
contentColor: Theme.palette.primaryColor1 contentColor: Theme.palette.primaryColor1
text: picker.selectedItemsText text: picker.selectedItemsText
textPixelSize: 13 textPixelSize: Theme.dp(13)
type: StatusPickerButton.Type.Down type: StatusPickerButton.Type.Down
onClicked: { onClicked: {
@ -261,7 +261,7 @@ Item {
anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
anchors.top: btn.bottom anchors.top: btn.bottom
anchors.topMargin: 4 anchors.topMargin: Theme.dp(4)
visible: false visible: false
color: Theme.palette.statusPopupMenu.backgroundColor color: Theme.palette.statusPopupMenu.backgroundColor
radius: 8 radius: 8
@ -269,8 +269,8 @@ Item {
layer.effect: DropShadow { layer.effect: DropShadow {
source: picker source: picker
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 4 verticalOffset: Theme.dp(4)
radius: 12 radius: Theme.dp(12)
samples: 25 samples: 25
spread: 0.2 spread: 0.2
color: Theme.palette.dropShadow color: Theme.palette.dropShadow
@ -279,29 +279,29 @@ Item {
ListView { ListView {
id: content id: content
property int itemHeight: 40 property int itemHeight: Theme.dp(40)
property int itemWidth: 360 property int itemWidth: Theme.dp(360)
model: d.filteredModel model: d.filteredModel
width: itemWidth width: itemWidth
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 8 anchors.bottomMargin: Theme.dp(8)
currentIndex: -1 currentIndex: -1
clip: true clip: true
headerPositioning: ListView.OverlayHeader headerPositioning: ListView.OverlayHeader
header: Rectangle { header: Rectangle {
id: header id: header
width: content.itemWidth width: content.itemWidth
height: searchInput.height + 24 height: searchInput.height + Theme.dp(24)
color: Theme.palette.statusPopupMenu.backgroundColor color: Theme.palette.statusPopupMenu.backgroundColor
z: 3 // Above delegate (z=1) and above section.delegate (z = 2) z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
StatusBaseInput { StatusBaseInput {
id: searchInput id: searchInput
implicitHeight: 36 implicitHeight: Theme.dp(36)
width: content.itemWidth - 2 * 18 width: content.itemWidth - Theme.dp(2) * 18
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
topPadding: 0 topPadding: 0
@ -371,12 +371,12 @@ Item {
height: content.itemHeight height: content.itemHeight
StatusBaseText { StatusBaseText {
anchors.leftMargin: 18 anchors.leftMargin: Theme.dp(18)
anchors.left: parent.left anchors.left: parent.left
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
text: section text: section
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
elide: Text.ElideRight elide: Text.ElideRight
} }
}// End of Category item }// End of Category item

10
src/StatusQ/Components/StatusListSectionHeadline.qml
View File

@ -4,18 +4,18 @@ import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1 import StatusQ.Core.Theme 0.1
Item { Item {
implicitHeight: 34 implicitHeight: Theme.dp(34)
implicitWidth: 176 implicitWidth: Theme.dp(176)
property alias text: label.text property alias text: label.text
StatusBaseText { StatusBaseText {
anchors.left: parent.left anchors.left: parent.left
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 4 anchors.bottomMargin: Theme.dp(4)
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
id: label id: label
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
} }

5
src/StatusQ/Components/StatusLoadingIndicator.qml
View File

@ -1,11 +1,12 @@
import QtQuick 2.13 import QtQuick 2.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusIcon { StatusIcon {
id: statusIcon id: statusIcon
icon: "loading" icon: "loading"
height: 17 height: Theme.dp(17)
width: 17 width: Theme.dp(17)
RotationAnimation { RotationAnimation {
target: statusIcon; target: statusIcon;
from: 0; from: 0;

24
src/StatusQ/Components/StatusMemberListItem.qml
View File

@ -104,7 +104,7 @@ StatusListItem {
// Short keychat composition: // Short keychat composition:
function composeShortKeyChat(pubKey) { function composeShortKeyChat(pubKey) {
return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - 3) return pubKey.substring(0, 5) + "..." + pubKey.substring(pubKey.length - Theme.dp(3))
} }
} }
@ -119,25 +119,25 @@ StatusListItem {
} }
} }
subTitle: d.composeSubtitile() subTitle: d.composeSubtitile()
statusListItemSubTitle.font.pixelSize: 10 statusListItemSubTitle.font.pixelSize: Theme.dp(10)
icon.isLetterIdenticon: !root.image.source.toString() icon.isLetterIdenticon: !root.image.source.toString()
statusListItemIcon.badge.visible: true statusListItemIcon.badge.visible: true
statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4 color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
// Default sizes / positions by design // Default sizes / positions by design
implicitWidth: 256 implicitWidth: Theme.dp(256)
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding) implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding)
leftPadding: 8 leftPadding: Theme.dp(8)
image.width: 32 image.width: Theme.dp(32)
image.height: 32 image.height: Theme.dp(32)
icon.width: 32 icon.width: Theme.dp(32)
icon.height: 32 icon.height: Theme.dp(32)
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
statusListItemIcon.anchors.top: undefined statusListItemIcon.anchors.top: undefined
statusListItemIcon.badge.border.width: 2 statusListItemIcon.badge.border.width: Theme.dp(2)
statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders
statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders
components: [ components: [
StatusIcon { StatusIcon {
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter

12
src/StatusQ/Components/StatusMessage.qml
View File

@ -68,13 +68,13 @@ Rectangle {
audioMessageInfoText: statusMessage.audioMessageInfoText audioMessageInfoText: statusMessage.audioMessageInfoText
} }
RowLayout { RowLayout {
spacing: 8 spacing: Theme.dp(8)
Layout.fillWidth: true Layout.fillWidth: true
StatusSmartIdenticon { StatusSmartIdenticon {
id: profileImage id: profileImage
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.topMargin: 10 Layout.topMargin: Theme.dp(10)
Layout.leftMargin: 16 Layout.leftMargin: Theme.dp(16)
image: messageDetails.profileImage image: messageDetails.profileImage
name: messageHeader.displayName name: messageHeader.displayName
MouseArea { MouseArea {
@ -87,7 +87,7 @@ Rectangle {
Column { Column {
spacing: 4 spacing: 4
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.topMargin: 10 Layout.topMargin: Theme.dp(10)
Layout.fillWidth: true Layout.fillWidth: true
StatusPinMessageDetails { StatusPinMessageDetails {
visible: messageDetails.isPinned && !editMode visible: messageDetails.isPinned && !editMode
@ -192,9 +192,9 @@ Rectangle {
StatusMessageQuickActions { StatusMessageQuickActions {
id: quickActionsPanel id: quickActionsPanel
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 20 anchors.rightMargin: Theme.dp(20)
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: -8 anchors.topMargin: -Theme.dp(8)
visible: hoverHandler.hovered && !editMode visible: hoverHandler.hovered && !editMode
} }
} }

5
src/StatusQ/Components/StatusMessageDetails.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.13 import QtQuick 2.13
import StatusQ.Core 0.1 import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
QtObject { QtObject {
id: msgDetails id: msgDetails
@ -10,8 +11,8 @@ QtObject {
property string secondaryName: "" property string secondaryName: ""
property string chatID: "" property string chatID: ""
property StatusImageSettings profileImage: StatusImageSettings { property StatusImageSettings profileImage: StatusImageSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
} }
property bool isEdited: false property bool isEdited: false
property string messageText: "" property string messageText: ""

10
src/StatusQ/Components/StatusNavigationListItem.qml
View File

@ -9,14 +9,14 @@ StatusListItem {
property bool selected: false property bool selected: false
property alias badge: statusBadge property alias badge: statusBadge
implicitWidth: 286 implicitWidth: Theme.dp(286)
implicitHeight: 48 implicitHeight: Theme.dp(48)
icon.background.width: 20 icon.background.width: Theme.dp(20)
icon.background.height: 20 icon.background.height: Theme.dp(20)
icon.background.color: "transparent" icon.background.color: "transparent"
statusListItemIcon.anchors.topMargin: 14 statusListItemIcon.anchors.topMargin: Theme.dp(14)
color: { color: {
if (selected) { if (selected) {

2
src/StatusQ/Components/StatusNavigationPanelHeadline.qml
View File

@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1 import StatusQ.Core 0.1
StatusBaseText { StatusBaseText {
font.pixelSize: 17 font.pixelSize: Theme.dp(17)
font.weight: Font.Bold font.weight: Font.Bold
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }

8
src/StatusQ/Components/StatusRoundIcon.qml
View File

@ -6,13 +6,13 @@ Rectangle {
id: statusRoundedIcon id: statusRoundedIcon
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
rotation: 0 rotation: 0
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
color: Theme.palette.primaryColor3 color: Theme.palette.primaryColor3
} }
} }

4
src/StatusQ/Components/StatusRoundedImage.qml
View File

@ -10,8 +10,8 @@ Rectangle {
property alias image: image property alias image: image
implicitWidth: 40 implicitWidth: Theme.dp(40)
implicitHeight: 40 implicitHeight: Theme.dp(40)
color: "transparent" color: "transparent"
radius: width / 2 radius: width / 2
layer.enabled: true layer.enabled: true

16
src/StatusQ/Components/StatusSmartIdenticon.qml
View File

@ -13,18 +13,18 @@ Loader {
property alias badge: statusBadge property alias badge: statusBadge
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
} }
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 40 width: Theme.dp(40)
height: 40 height: Theme.dp(40)
} }
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
initalAngleRad: 0 initalAngleRad: 0
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0) ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / Theme.dp(24.0))
distinctiveColors: Theme.palette.identiconRingColors distinctiveColors: Theme.palette.identiconRingColors
} }
@ -103,9 +103,9 @@ Loader {
visible: false visible: false
anchors.bottom: statusSmartIdenticon.bottom anchors.bottom: statusSmartIdenticon.bottom
anchors.right: statusSmartIdenticon.right anchors.right: statusSmartIdenticon.right
border.width: 3 border.width: Theme.dp(3)
implicitHeight: 15 implicitHeight: Theme.dp(15)
implicitWidth: 15 implicitWidth: Theme.dp(15)
z: statusSmartIdenticon.dZ z: statusSmartIdenticon.dZ
} }
} }

73
src/StatusQ/Components/StatusTagSelector.qml
View File

@ -61,7 +61,7 @@ Item {
\qmlproperty real StatusTagSelector::maxHeight \qmlproperty real StatusTagSelector::maxHeight
This property holds the maximum height of the component. This property holds the maximum height of the component.
*/ */
property real maxHeight: (488 + contactsLabel.height + contactsLabel.anchors.topMargin) //default min property real maxHeight: (Theme.dp(488) + contactsLabel.height + contactsLabel.anchors.topMargin) //default min
/*! /*!
\qmlproperty alias StatusTagSelector::textEdit \qmlproperty alias StatusTagSelector::textEdit
This property holds a reference to the TextEdit component. This property holds a reference to the TextEdit component.
@ -210,7 +210,7 @@ Item {
suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin + suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin +
2 * bgRect.anchors.margins + 2 * bgRect.anchors.margins +
userListView.anchors.topMargin + userListView.anchors.bottomMargin + userListView.anchors.topMargin + userListView.anchors.bottomMargin +
(userListView.model.count * 64): 0 (userListView.count * 64): 0
function orderNamesModel() { function orderNamesModel() {
if(root.orderByReadonly) { if(root.orderByReadonly) {
@ -224,7 +224,7 @@ Item {
} }
} }
implicitWidth: 448 implicitWidth: Theme.dp(448)
implicitHeight: (tagSelectorRect.height + d.suggestionContainerHeight) > root.maxHeight ? root.maxHeight : (tagSelectorRect.height + d.suggestionContainerHeight) implicitHeight: (tagSelectorRect.height + d.suggestionContainerHeight) > root.maxHeight ? root.maxHeight : (tagSelectorRect.height + d.suggestionContainerHeight)
onOrderByReadonlyChanged: { d.orderNamesModel() } onOrderByReadonlyChanged: { d.orderNamesModel() }
@ -236,26 +236,27 @@ Item {
Rectangle { Rectangle {
id: tagSelectorRect id: tagSelectorRect
width: parent.width width: parent.width
height: 44 height: Theme.dp(44)
radius: 8 radius: Theme.dp(8)
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
spacing: 8 spacing: Theme.dp(8)
StatusBaseText { StatusBaseText {
Layout.preferredWidth: 22 Layout.preferredWidth: Theme.dp(22)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
font.pixelSize: Theme.dp(15)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: root.toLabelText text: root.toLabelText
visible: (parent.width>22) visible: (parent.width>Theme.dp(22))
} }
ScrollView { ScrollView {
Layout.preferredWidth: (parent.width - 177) > 0 ? ((namesList.contentWidth > (parent.width - 177)) ? Layout.preferredWidth: (parent.width - Theme.dp(177)) > 0 ? ((namesList.contentWidth > (parent.width - Theme.dp(177))) ?
(parent.width - 177) : namesList.contentWidth) : 0 (parent.width - Theme.dp(177)) : namesList.contentWidth) : 0
implicitHeight: 30 implicitHeight: Theme.dp(30)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
visible: (namesList.count > 0) visible: (namesList.count > 0)
contentWidth: namesList.contentWidth contentWidth: namesList.contentWidth
@ -267,7 +268,7 @@ Item {
anchors.fill: parent anchors.fill: parent
model: namesModel model: namesModel
orientation: ListView.Horizontal orientation: ListView.Horizontal
spacing: 8 spacing: Theme.dp(8)
function scrollToEnd() { function scrollToEnd() {
if (contentWidth > width) { if (contentWidth > width) {
contentX = contentWidth; contentX = contentWidth;
@ -294,12 +295,12 @@ Item {
focus: true focus: true
color: Theme.palette.directColor1 color: Theme.palette.directColor1
clip: true clip: true
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
wrapMode: TextEdit.NoWrap wrapMode: TextEdit.NoWrap
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 44 Layout.preferredHeight: Theme.dp(44)
visible: (parent.width>22) visible: (parent.width>Theme.dp(22))
Keys.onPressed: { Keys.onPressed: {
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape) if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
&& getText(cursorPosition, (cursorPosition-1)) === "" && getText(cursorPosition, (cursorPosition-1)) === ""
@ -321,9 +322,9 @@ Item {
StatusBaseText { StatusBaseText {
id: warningTextLabel id: warningTextLabel
visible: (namesModel.count === root.nameCountLimit) visible: (namesModel.count === root.nameCountLimit)
Layout.preferredWidth: visible ? 120 : 0 Layout.preferredWidth: visible ? Theme.dp(120) : 0
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
color: Theme.palette.dangerColor1 color: Theme.palette.dangerColor1
text: root.nameCountLimit + " " + root.warningText text: root.nameCountLimit + " " + root.warningText
} }
@ -332,11 +333,11 @@ Item {
StatusBaseText { StatusBaseText {
id: contactsLabel id: contactsLabel
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
anchors.top: tagSelectorRect.bottom anchors.top: tagSelectorRect.bottom
anchors.topMargin: visible ? 32 : 0 anchors.topMargin: visible ? Theme.dp(32) : 0
height: visible ? contentHeight : 0 height: visible ? contentHeight : 0
visible: (root.sortedList.count === 0) visible: (root.sortedList.count === 0)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
@ -345,31 +346,31 @@ Item {
Control { Control {
id: suggestionsContainer id: suggestionsContainer
width: 360 width: Theme.dp(360)
anchors { anchors {
top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom
topMargin: 8//Style.current.halfPadding topMargin: Theme.dp(8)//Style.current.halfPadding
bottom: parent.bottom bottom: parent.bottom
bottomMargin: 16//Style.current.padding bottomMargin: Theme.dp(16)//Style.current.padding
} }
clip: true clip: true
visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) || visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) ||
((edit.text !== "") && (root.sortedList.count > 0)) ((edit.text !== "") && (root.sortedList.count > 0))
x: ((root.namesModel.count > 0) && (root.sortedList.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width))) x: ((root.namesModel.count > 0) && (root.sortedList.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width)))
? (edit.x + 8) : 0 ? (edit.x + Theme.dp(8)) : 0
background: Rectangle { background: Rectangle {
id: bgRect id: bgRect
anchors.fill: parent anchors.fill: parent
anchors.margins: 8 anchors.margins: Theme.dp(8)
visible: (root.sortedList.count > 0) visible: (root.sortedList.count > 0)
color: Theme.palette.statusPopupMenu.backgroundColor color: Theme.palette.statusPopupMenu.backgroundColor
radius: 8 radius: Theme.dp(8)
layer.enabled: true layer.enabled: true
layer.effect: DropShadow { layer.effect: DropShadow {
source: bgRect source: bgRect
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 4 verticalOffset: Theme.dp(4)
radius: 12 radius: Theme.dp(12)
samples: 25 samples: 25
spread: 0.2 spread: 0.2
color: Theme.palette.dropShadow color: Theme.palette.dropShadow
@ -379,9 +380,9 @@ Item {
id: userListView id: userListView
anchors { anchors {
fill: parent fill: parent
topMargin: 16 topMargin: Theme.dp(16)
leftMargin: 8 leftMargin: Theme.dp(8)
rightMargin: 8 rightMargin: Theme.dp(8)
} }
ScrollBar.vertical: ScrollBar { ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded policy: ScrollBar.AsNeeded
@ -392,10 +393,10 @@ Item {
} }
delegate: StatusMemberListItem { delegate: StatusMemberListItem {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: bgRect.visible ? 8 : 0 anchors.leftMargin: bgRect.visible ? Theme.dp(8) : 0
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: bgRect.visible ? 8 : 0 anchors.rightMargin: bgRect.visible ? Theme.dp(8) : 0
height: visible ? 64 : 0 height: visible ? Theme.dp(64) : 0
visible: { visible: {
for (let i = 0; i < namesModel.count; i++) { for (let i = 0; i < namesModel.count; i++) {
if (namesModel.get(i).pubKey === model.pubKey) { if (namesModel.get(i).pubKey === model.pubKey) {

34
src/StatusQ/Components/StatusToastMessage.qml
View File

@ -37,8 +37,8 @@ import StatusQ.Core.Theme 0.1
Control { Control {
id: root id: root
width: 343 width: Theme.dp(343)
height: !!secondaryText ? 68 : 48 height: Theme.dp(!!secondaryText ? 68 : 48)
anchors.right: parent.right anchors.right: parent.right
/*! /*!
@ -79,8 +79,8 @@ Control {
This property holds a set of settings for the icon of the ToastMessage. This property holds a set of settings for the icon of the ToastMessage.
*/ */
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 23 width: Theme.dp(23)
height: 23 height: Theme.dp(23)
} }
/*! /*!
@ -195,12 +195,12 @@ Control {
id: background id: background
anchors.fill: parent anchors.fill: parent
color: Theme.palette.statusToastMessage.backgroundColor color: Theme.palette.statusToastMessage.backgroundColor
radius: 8 radius: Theme.dp(8)
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
layer.enabled: true layer.enabled: true
layer.effect: DropShadow { layer.effect: DropShadow {
verticalOffset: 3 verticalOffset: Theme.dp(3)
radius: 8 radius: Theme.dp(8)
samples: 15 samples: 15
fast: true fast: true
cached: true cached: true
@ -210,9 +210,9 @@ Control {
contentItem: Item { contentItem: Item {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 4 anchors.rightMargin: Theme.dp(4)
height: parent.height height: parent.height
MouseArea { MouseArea {
anchors.fill: parent anchors.fill: parent
@ -225,10 +225,10 @@ Control {
} }
RowLayout { RowLayout {
anchors.fill: parent anchors.fill: parent
spacing: 16 spacing: Theme.dp(16)
Rectangle { Rectangle {
implicitWidth: 32 implicitWidth: Theme.dp(32)
implicitHeight: 32 implicitHeight: Theme.dp(32)
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
radius: (root.width/2) radius: (root.width/2)
color: (root.type === StatusToastMessage.Type.Success) ? color: (root.type === StatusToastMessage.Type.Success) ?
@ -266,7 +266,7 @@ Control {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
StatusBaseText { StatusBaseText {
width: parent.width width: parent.width
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
elide: Text.ElideRight elide: Text.ElideRight
text: root.primaryText text: root.primaryText
@ -275,7 +275,7 @@ Control {
width: parent.width width: parent.width
visible: (!root.linkUrl && !!root.secondaryText) visible: (!root.linkUrl && !!root.secondaryText)
height: visible ? contentHeight : 0 height: visible ? contentHeight : 0
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: root.secondaryText text: root.secondaryText
elide: Text.ElideRight elide: Text.ElideRight
@ -283,7 +283,7 @@ Control {
StatusSelectableText { StatusSelectableText {
visible: (!!root.linkUrl) visible: (!!root.linkUrl)
height: visible ? implicitHeight : 0 height: visible ? implicitHeight : 0
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
hoveredLinkColor: Theme.palette.primaryColor1 hoveredLinkColor: Theme.palette.primaryColor1
text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>" text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
onLinkActivated: { onLinkActivated: {
@ -295,8 +295,8 @@ Control {
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
icon.name: "close" icon.name: "close"
icon.color: Theme.palette.directColor1 icon.color: Theme.palette.directColor1
implicitWidth: 30 implicitWidth: Theme.dp(30)
implicitHeight: 30 implicitHeight: Theme.dp(30)
onClicked: { onClicked: {
root.open = false; root.open = false;
} }

26
src/StatusQ/Components/StatusWizardStepper.qml
View File

@ -37,7 +37,7 @@ Item {
id: wizardWrapper id: wizardWrapper
width: parent.width width: parent.width
height: 56 height: Theme.dp(56)
/*! /*!
\qmlproperty ListModel StatusWizardStepper::stepsModel \qmlproperty ListModel StatusWizardStepper::stepsModel
This property represents all steps and their descriptions as provided by the user. This property represents all steps and their descriptions as provided by the user.
@ -54,18 +54,18 @@ Item {
delegate: Item { delegate: Item {
id: wrapperItem id: wrapperItem
width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count) width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
height: 56 height: Theme.dp(56)
onXChanged: { onXChanged: {
//as x changes while delegates are created, direct assignment doesn't work //as x changes while delegates are created, direct assignment doesn't work
x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8 x = (index === (repeat.count-1)) ? (width+Theme.dp(32)) : (label.width/2) + Theme.dp(8)
} }
StatusProgressBar { StatusProgressBar {
id: barBorder id: barBorder
width: visible ? (parent.width - (label.width/2 + 24)) : 0 width: visible ? (parent.width - (label.width/2 + Theme.dp(24))) : 0
height: visible ? 8 : 0 height: visible ? Theme.dp(8) : 0
visible: (index > 0) visible: (index > 0)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -12 anchors.verticalCenterOffset: -Theme.dp(12)
from: 0 from: 0
to: wizardWrapper.maxDuration to: wizardWrapper.maxDuration
value: loadingTime value: loadingTime
@ -76,22 +76,22 @@ Item {
Item { Item {
id: label id: label
width: descriptionLabel.contentWidth width: descriptionLabel.contentWidth
height: 56 height: Theme.dp(56)
anchors.left: (index > 0) ? barBorder.right : parent.left anchors.left: (index > 0) ? barBorder.right : parent.left
anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0 anchors.leftMargin: (index > 0) ? -((width/2) - Theme.dp(24)) : 0
Rectangle { Rectangle {
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
radius: width/2 radius: width/2
color: stepCompleted ? Theme.palette.primaryColor1 : "transparent" color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true)) border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? "transparent" : Theme.palette.primaryColor1 ? "transparent" : Theme.palette.primaryColor1
border.width: 2 border.width: Theme.dp(2)
StatusBaseText { StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
text: index+1 text: index+1
font.pixelSize: 17 font.pixelSize: Theme.dp(17)
color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true)) color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? Theme.palette.indirectColor1 : Theme.palette.primaryColor1 ? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
} }
@ -101,7 +101,7 @@ Item {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
text: description text: description
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
} }
} }
} }

32
src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml
View File

@ -15,9 +15,9 @@ Rectangle {
property bool hovered: false property bool hovered: false
property string audioSource: "" property string audioSource: ""
width: 320 width: Theme.dp(320)
height: 32 height: Theme.dp(32)
radius: 20 radius: Theme.dp(20)
color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2 color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
@ -30,13 +30,13 @@ Rectangle {
RowLayout { RowLayout {
id: preview id: preview
visible: isPreview visible: isPreview
spacing: 5 spacing: Theme.dp(5)
anchors.centerIn: parent anchors.centerIn: parent
StatusIcon { StatusIcon {
id: icon id: icon
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 14 Layout.preferredWidth: Theme.dp(14)
Layout.preferredHeight: 14 Layout.preferredHeight: Theme.dp(14)
icon: "audio" icon: "audio"
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
@ -44,16 +44,16 @@ Rectangle {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: audioMessageInfoText text: audioMessageInfoText
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
} }
} }
StatusFlatRoundButton { StatusFlatRoundButton {
id: playButton id: playButton
width: 15 width: Theme.dp(15)
height: 15 height: Theme.dp(15)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
visible: !isPreview visible: !isPreview
@ -73,12 +73,12 @@ Rectangle {
} }
Rectangle { Rectangle {
height: 2 height: Theme.dp(2)
width: 240 width: Theme.dp(240)
color: Theme.palette.directColor5 color: Theme.palette.directColor5
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
anchors.left: playButton.right anchors.left: playButton.right
anchors.leftMargin: 10 anchors.leftMargin: Theme.dp(10)
visible: !isPreview visible: !isPreview
Rectangle { Rectangle {
id: progress id: progress
@ -94,10 +94,10 @@ Rectangle {
Rectangle { Rectangle {
id: handle id: handle
width: 10 width: Theme.dp(10)
height: 10 height: Theme.dp(10)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
radius: 10 radius: Theme.dp(10)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
x: progress.width x: progress.width
state: "default" state: "default"

4
src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml
View File

@ -20,7 +20,7 @@ Item {
height: childrenRect.height height: childrenRect.height
ColumnLayout { ColumnLayout {
spacing: 4 spacing: Theme.dp(4)
Loader { Loader {
id: chatInputLoader id: chatInputLoader
// To-Do: Move to StatusChatInput once its moved to StatusQ // To-Do: Move to StatusChatInput once its moved to StatusQ
@ -28,7 +28,7 @@ Item {
width: editText.width width: editText.width
input.placeholderText: "" input.placeholderText: ""
input.text: msgText input.text: msgText
input.implicitHeight: 40 input.implicitHeight: Theme.dp(40)
} }
} }
RowLayout { RowLayout {

22
src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml
View File

@ -19,7 +19,7 @@ Item {
property url source: "" property url source: ""
property bool allCornersRounded: false property bool allCornersRounded: false
property bool isLeftCorner: true property bool isLeftCorner: true
property int imageWidth: 350 property int imageWidth: Theme.dp(350)
property int shapeType: -1 property int shapeType: -1
property string loadingImageText: "" property string loadingImageText: ""
@ -55,22 +55,22 @@ Item {
anchors.left: parent.left anchors.left: parent.left
width: imageMessage.width width: imageMessage.width
height: imageMessage.height height: imageMessage.height
radius: 16 radius: Theme.dp(16)
} }
Rectangle { Rectangle {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.left: parent.left anchors.left: parent.left
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
radius: 4 radius: Theme.dp(4)
visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
} }
Rectangle { Rectangle {
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.right: parent.right anchors.right: parent.right
width: 32 width: Theme.dp(32)
height: 32 height: Theme.dp(32)
radius: 4 radius: Theme.dp(4)
visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded
} }
} }
@ -98,9 +98,9 @@ Item {
|| imageMessage.status === Image.Error || imageMessage.status === Image.Error
width: parent.width width: parent.width
height: width height: width
border.width: 1 border.width: Theme.dp(1)
border.color: Theme.palette.baseColor2 border.color: Theme.palette.baseColor2
radius: 8 radius: Theme.dp(8)
StatusBaseText { StatusBaseText {
anchors.centerIn: parent anchors.centerIn: parent
@ -108,7 +108,7 @@ Item {
color: imageMessage.status === Image.Error? color: imageMessage.status === Image.Error?
Theme.palette.dangerColor1 : Theme.palette.dangerColor1 :
Theme.palette.directColor1 Theme.palette.directColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
} }
} }
} }

12
src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml
View File

@ -35,7 +35,7 @@ Item {
id: primaryDisplayName id: primaryDisplayName
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
font.weight: Font.Medium font.weight: Font.Medium
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
font.underline: mouseArea.containsMouse font.underline: mouseArea.containsMouse
readOnly: true readOnly: true
wrapMode: Text.WordWrap wrapMode: Text.WordWrap
@ -62,14 +62,14 @@ Item {
id: secondaryDisplayName id: secondaryDisplayName
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
text: secondaryName text: secondaryName
visible: !!text visible: !!text
} }
StatusBaseText { StatusBaseText {
id: dotSeparator1 id: dotSeparator1
Layout.fillHeight: true Layout.fillHeight: true
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "." text: "."
visible: secondaryDisplayName.visible visible: secondaryDisplayName.visible
@ -77,8 +77,8 @@ Item {
StatusBaseText { StatusBaseText {
id: tertiaryDetailText id: tertiaryDetailText
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.maximumWidth: 58 Layout.maximumWidth: Theme.dp(58)
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
elide: Text.ElideMiddle elide: Text.ElideMiddle
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: tertiaryDetail text: tertiaryDetail
@ -86,7 +86,7 @@ Item {
StatusBaseText { StatusBaseText {
id: dotSeparator2 id: dotSeparator2
Layout.fillHeight: true Layout.fillHeight: true
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: "." text: "."
visible: tertiaryDetailText.visible visible: tertiaryDetailText.visible

10
src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml
View File

@ -16,8 +16,8 @@ Rectangle {
} }
width: buttonRow.width + _internal.containerMargin * 2 width: buttonRow.width + _internal.containerMargin * 2
height: 36 height: Theme.dp(36)
radius: 8 radius: Theme.dp(8)
color: Theme.palette.statusSelect.menuItemBackgroundColor color: Theme.palette.statusSelect.menuItemBackgroundColor
layer.enabled: true layer.enabled: true
@ -25,11 +25,11 @@ Rectangle {
width: buttonsContainer.width width: buttonsContainer.width
height: buttonsContainer.height height: buttonsContainer.height
x: buttonsContainer.x x: buttonsContainer.x
y: buttonsContainer.y + 10 y: buttonsContainer.y + Theme.dp(10)
horizontalOffset: 0 horizontalOffset: 0
verticalOffset: 2 verticalOffset: Theme.dp(2)
source: buttonsContainer source: buttonsContainer
radius: 10 radius: Theme.dp(10)
samples: 15 samples: 15
color: Theme.palette.dropShadow color: Theme.palette.dropShadow
} }

38
src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml
View File

@ -19,13 +19,13 @@ Loader {
sourceComponent: RowLayout { sourceComponent: RowLayout {
id: replyLayout id: replyLayout
spacing: 8 spacing: Theme.dp(8)
Shape { Shape {
id: replyCorner id: replyCorner
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.leftMargin: 35 Layout.leftMargin: Theme.dp(35)
Layout.topMargin: profileImage.height/2 Layout.topMargin: profileImage.height/2
Layout.preferredWidth: 20 Layout.preferredWidth: Theme.dp(20)
Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
asynchronous: true asynchronous: true
antialiasing: true antialiasing: true
@ -35,13 +35,13 @@ Loader {
fillColor: "transparent" fillColor: "transparent"
capStyle: ShapePath.RoundCap capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin joinStyle: ShapePath.RoundJoin
startX: 20 startX: Theme.dp(20)
startY: 0 startY: 0
PathLine { x: 10; y: 0 } PathLine { x: Theme.dp(10); y: 0 }
PathArc { PathArc {
x: 0; y: 10 x: 0; y: Theme.dp(10)
radiusX: 13 radiusX: Theme.dp(13)
radiusY: 13 radiusY: Theme.dp(13)
direction: PathArc.Counterclockwise direction: PathArc.Counterclockwise
} }
PathLine { x: 0; y: messageLayout.height} PathLine { x: 0; y: messageLayout.height}
@ -51,7 +51,7 @@ Loader {
id: messageLayout id: messageLayout
Layout.fillWidth: true Layout.fillWidth: true
Layout.alignment: Qt.AlignTop Layout.alignment: Qt.AlignTop
Layout.topMargin: 4 Layout.topMargin: Theme.dp(4)
RowLayout { RowLayout {
StatusSmartIdenticon { StatusSmartIdenticon {
id: profileImage id: profileImage
@ -70,7 +70,7 @@ Loader {
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
selectionColor: Theme.palette.primaryColor3 selectionColor: Theme.palette.primaryColor3
selectedTextColor: Theme.palette.directColor1 selectedTextColor: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
font.weight: Font.Medium font.weight: Font.Medium
selectByMouse: true selectByMouse: true
readOnly: true readOnly: true
@ -80,40 +80,40 @@ Loader {
StatusTextMessage { StatusTextMessage {
Layout.fillWidth: true Layout.fillWidth: true
textField.text: replyDetails.messageText textField.text: replyDetails.messageText
textField.font.pixelSize: 13 textField.font.pixelSize: Theme.dp(13)
textField.color: Theme.palette.baseColor1 textField.color: Theme.palette.baseColor1
textField.height: 18 textField.height: Theme.dp(18)
clip: true clip: true
visible: !!replyDetails.messageText visible: !!replyDetails.messageText
} }
StatusImageMessage { StatusImageMessage {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: imageAlias.paintedHeight Layout.preferredHeight: imageAlias.paintedHeight
imageWidth: 56 imageWidth: Theme.dp(56)
source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : "" source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
visible: replyDetails.contentType === StatusMessage.ContentType.Image visible: replyDetails.contentType === StatusMessage.ContentType.Image
shapeType: StatusImageMessage.ShapeType.ROUNDED shapeType: StatusImageMessage.ShapeType.ROUNDED
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 48 Layout.preferredHeight: Theme.dp(48)
Layout.alignment: Qt.AlignLeft Layout.alignment: Qt.AlignLeft
visible: replyDetails.contentType === StatusMessage.ContentType.Sticker visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
StatusSticker { StatusSticker {
image.width: 48 image.width: Theme.dp(48)
image.height: 48 image.height: Theme.dp(48)
image.source: replyDetails.messageContent image.source: replyDetails.messageContent
} }
} }
Item { Item {
Layout.fillWidth: true Layout.fillWidth: true
Layout.preferredHeight: 22 Layout.preferredHeight: Theme.dp(22)
visible: replyDetails.contentType === StatusMessage.ContentType.Audio visible: replyDetails.contentType === StatusMessage.ContentType.Audio
StatusAudioMessage { StatusAudioMessage {
id: audioMessage id: audioMessage
anchors.left: parent.left anchors.left: parent.left
width: 125 width: Theme.dp(125)
height: 22 height: Theme.dp(22)
isPreview: true isPreview: true
audioSource: replyDetails.messageContent audioSource: replyDetails.messageContent
audioMessageInfoText: chatReply.audioMessageInfoText audioMessageInfoText: chatReply.audioMessageInfoText

18
src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml
View File

@ -12,32 +12,32 @@ Loader {
active: visible active: visible
sourceComponent: Rectangle { sourceComponent: Rectangle {
height: 24 height: Theme.dp(24)
width: layout.width + 16 width: layout.width + Theme.dp(16)
color: Theme.palette.pinColor2 color: Theme.palette.pinColor2
radius: 12 radius: Theme.dp(12)
RowLayout { RowLayout {
id: layout id: layout
anchors.centerIn: parent anchors.centerIn: parent
StatusIcon { StatusIcon {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 16 Layout.preferredWidth: Theme.dp(16)
Layout.preferredHeight: 16 Layout.preferredHeight: Theme.dp(16)
color: Theme.palette.pinColor1 color: Theme.palette.pinColor1
icon: "tiny/pin" icon: "tiny/pin"
} }
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4 Layout.leftMargin: -Theme.dp(4)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
text: pinnedMsgInfoText text: pinnedMsgInfoText
} }
StatusBaseText { StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4 Layout.leftMargin: -Theme.dp(4)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
font.weight: Font.Medium font.weight: Font.Medium
text: pinnedBy text: pinnedBy
} }

10
src/StatusQ/Components/private/statusMessage/StatusSticker.qml
View File

@ -11,8 +11,8 @@ Loader {
property bool noHover: false property bool noHover: false
property bool noMouseArea: false property bool noMouseArea: false
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 140 width: Theme.dp(140)
height: 140 height: Theme.dp(140)
} }
signal loaded() signal loaded()
@ -24,7 +24,7 @@ Loader {
id: root id: root
color: Theme.palette.baseColor2 color: Theme.palette.baseColor2
radius: 16 radius: Theme.dp(16)
width: image.width width: image.width
height: image.height height: image.height
@ -71,8 +71,8 @@ Loader {
Component { Component {
id: loadingIndicator id: loadingIndicator
StatusLoadingIndicator { StatusLoadingIndicator {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
} }

8
src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml
View File

@ -28,7 +28,7 @@ Item {
selectionColor: Theme.palette.primaryColor3 selectionColor: Theme.palette.primaryColor3
color: Theme.palette.directColor1 color: Theme.palette.directColor1
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
textFormat: Text.RichText textFormat: Text.RichText
wrapMode: Text.Wrap wrapMode: Text.Wrap
readOnly: true readOnly: true
@ -72,11 +72,11 @@ Item {
id: showMoreLoader id: showMoreLoader
active: _internal.veryLongChatText active: _internal.veryLongChatText
anchors.top: chatText.bottom anchors.top: chatText.bottom
anchors.topMargin: -10 anchors.topMargin: -Theme.dp(10)
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: StatusRoundButton { sourceComponent: StatusRoundButton {
implicitWidth: 24 implicitWidth: Theme.dp(24)
implicitHeight: 24 implicitHeight: Theme.dp(24)
type: StatusRoundButton.Type.Secondary type: StatusRoundButton.Type.Secondary
icon.name: _internal.readMore ? "chevron-up": "chevron-down" icon.name: _internal.readMore ? "chevron-up": "chevron-down"
onClicked: { onClicked: {

4
src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml
View File

@ -11,12 +11,12 @@ StatusBaseText {
Layout.alignment: Qt.AlignVCenter Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 10 font.pixelSize: Theme.dp(10)
visible: !!text visible: !!text
StatusToolTip { StatusToolTip {
id: tooltip id: tooltip
visible: hhandler.hovered && !!text visible: hhandler.hovered && !!text
maxWidth: 350 maxWidth: Theme.dp(350)
} }
HoverHandler { HoverHandler {
id: hhandler id: hhandler

66
src/StatusQ/Controls/StatusAccountSelector.qml
View File

@ -16,7 +16,7 @@ Item {
property var selectedAccount property var selectedAccount
property string currency: "usd" property string currency: "usd"
property alias selectField: select property alias selectField: select
implicitWidth: 448 implicitWidth: Theme.dp(448)
height: select.height + height: select.height +
(selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0) (selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0)
// set to asset symbol to display asset's balance top right // set to asset symbol to display asset's balance top right
@ -91,16 +91,16 @@ Item {
id: txtAssetBalance id: txtAssetBalance
visible: root.assetFound !== undefined visible: root.assetFound !== undefined
anchors.bottom: select.top anchors.bottom: select.top
anchors.bottomMargin: -18 anchors.bottomMargin: -Theme.dp(18)
anchors.right: txtAssetSymbol.left anchors.right: txtAssetSymbol.left
anchors.left: select.left anchors.left: select.left
anchors.leftMargin: select.width / 2.5 anchors.leftMargin: select.width / 2.5
color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1 color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
elide: Text.ElideRight elide: Text.ElideRight
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
horizontalAlignment: Text.AlignRight horizontalAlignment: Text.AlignRight
height: 18 height: Theme.dp(18)
StatusToolTip { StatusToolTip {
enabled: txtAssetBalance.truncated enabled: txtAssetBalance.truncated
@ -123,7 +123,7 @@ Item {
anchors.right: parent.right anchors.right: parent.right
color: txtAssetBalance.color color: txtAssetBalance.color
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
height: txtAssetBalance.height height: txtAssetBalance.height
} }
StatusSelect { StatusSelect {
@ -140,10 +140,10 @@ Item {
StatusIcon { StatusIcon {
id: selectedIconImg id: selectedIconImg
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 20 width: Theme.dp(20)
height: 20 height: Theme.dp(20)
icon: "filled-account" icon: "filled-account"
} }
@ -151,13 +151,13 @@ Item {
id: selectedTextField id: selectedTextField
elide: Text.ElideRight elide: Text.ElideRight
anchors.left: selectedIconImg.right anchors.left: selectedIconImg.right
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: select.selectedItemRightMargin anchors.rightMargin: select.selectedItemRightMargin
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
height: 22 height: Theme.dp(22)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
} }
@ -167,20 +167,20 @@ Item {
id: selectedAccountDetails id: selectedAccountDetails
visible: root.showAccountDetails visible: root.showAccountDetails
anchors.top: select.bottom anchors.top: select.bottom
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 2 anchors.leftMargin: Theme.dp(2)
StatusBaseText { StatusBaseText {
id: textSelectedAddress id: textSelectedAddress
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
elide: Text.ElideMiddle elide: Text.ElideMiddle
width: 90 width: Theme.dp(90)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
StatusBaseText { StatusBaseText {
id: textSelectedAddressFiatBalance id: textSelectedAddressFiatBalance
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
} }
@ -199,15 +199,15 @@ Item {
} }
} }
height: walletType === root.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14) height: walletType === root.watchWalletType ? 0 : (accountName.height + Theme.dp(14) + accountAddress.height + Theme.dp(14))
StatusIcon { StatusIcon {
id: iconImg id: iconImg
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
width: 20 width: Theme.dp(20)
height: 20 height: Theme.dp(20)
icon: "filled-account" icon: "filled-account"
color: Utils.getThemeAccountColor(model.color, Theme.palette.userCustomizationColors) || Theme.palette.userCustomizationColors[0] color: Utils.getThemeAccountColor(model.color, Theme.palette.userCustomizationColors) || Theme.palette.userCustomizationColors[0]
} }
@ -215,19 +215,19 @@ Item {
Column { Column {
id: column id: column
anchors.left: iconImg.right anchors.left: iconImg.right
anchors.leftMargin: 14 anchors.leftMargin: Theme.dp(14)
anchors.right: txtFiatBalance.left anchors.right: txtFiatBalance.left
anchors.rightMargin: 8 anchors.rightMargin: Theme.dp(8)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
StatusBaseText { StatusBaseText {
id: accountName id: accountName
text: model.name text: model.name
elide: Text.ElideRight elide: Text.ElideRight
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.left: parent.left anchors.left: parent.left
anchors.right: parent.right anchors.right: parent.right
height: 22 height: Theme.dp(22)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -235,29 +235,29 @@ Item {
id: accountAddress id: accountAddress
text: address text: address
elide: Text.ElideMiddle elide: Text.ElideMiddle
width: 80 width: Theme.dp(80)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
height: 16 height: Theme.dp(16)
} }
} }
StatusBaseText { StatusBaseText {
id: txtFiatBalance id: txtFiatBalance
anchors.right: fiatCurrencySymbol.left anchors.right: fiatCurrencySymbol.left
anchors.rightMargin: 4 anchors.rightMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
height: 22 height: Theme.dp(22)
text: currencyBalance text: currencyBalance
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
StatusBaseText { StatusBaseText {
id: fiatCurrencySymbol id: fiatCurrencySymbol
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
height: 22 height: Theme.dp(22)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
text: root.currency.toUpperCase() text: root.currency.toUpperCase()
} }

18
src/StatusQ/Controls/StatusActivityCenterButton.qml
View File

@ -32,13 +32,13 @@ StatusFlatRoundButton {
property alias unreadNotificationsCount: statusBadge.value property alias unreadNotificationsCount: statusBadge.value
icon.name: "notification" icon.name: "notification"
icon.height: 21 icon.height: Theme.dp(21)
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
// initializing the tooltip // initializing the tooltip
tooltip.text: qsTr("Activity") tooltip.text: qsTr("Activity")
tooltip.orientation: StatusToolTip.Orientation.Bottom tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12 tooltip.y: parent.height + Theme.dp(12)
StatusBadge { StatusBadge {
id: statusBadge id: statusBadge
@ -46,17 +46,17 @@ StatusFlatRoundButton {
visible: value > 0 visible: value > 0
anchors.top: parent.top anchors.top: parent.top
anchors.left: parent.right anchors.left: parent.right
anchors.topMargin: -3 anchors.topMargin: -Theme.dp(3)
anchors.leftMargin: { anchors.leftMargin: {
if (statusBadge.value > 99) { if (statusBadge.value > Theme.dp(99)) {
return -22 return -Theme.dp(22)
} }
if (statusBadge.value > 9) { if (statusBadge.value > Theme.dp(9)) {
return -21 return -Theme.dp(21)
} }
return -18 return -Theme.dp(18)
} }
border.width: 2 border.width: Theme.dp(2)
border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor border.color: parent.hovered ? Theme.palette.baseColor2 : Theme.palette.statusAppLayout.backgroundColor
} }
} }

36
src/StatusQ/Controls/StatusAssetSelector.qml
View File

@ -18,8 +18,8 @@ Item {
} }
// Define this in the usage to get balance in currency selected by user // Define this in the usage to get balance in currency selected by user
property var getCurrencyBalanceString: function (currencyBalance) { return "" } property var getCurrencyBalanceString: function (currencyBalance) { return "" }
implicitWidth: 86 implicitWidth: Theme.dp(86)
implicitHeight: 32 implicitHeight: Theme.dp(32)
function resetInternal() { function resetInternal() {
assets = null assets = null
@ -40,17 +40,17 @@ Item {
bgColorHover: Theme.palette.directColor8 bgColorHover: Theme.palette.directColor8
model: root.assets model: root.assets
caretRightMargin: 0 caretRightMargin: 0
select.radius: 6 select.radius: Theme.dp(6)
select.height: root.height select.height: root.height
selectMenu.width: 342 selectMenu.width: Theme.dp(342)
selectedItemComponent: Item { selectedItemComponent: Item {
anchors.fill: parent anchors.fill: parent
StatusRoundedImage { StatusRoundedImage {
id: iconImg id: iconImg
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
image.onStatusChanged: { image.onStatusChanged: {
if (iconImg.image.status === Image.Error) { if (iconImg.image.status === Image.Error) {
@ -61,10 +61,10 @@ Item {
StatusBaseText { StatusBaseText {
id: selectedTextField id: selectedTextField
anchors.left: iconImg.right anchors.left: iconImg.right
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
height: 22 height: Theme.dp(22)
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
@ -80,11 +80,11 @@ Item {
property bool isLastItem: index === assets.rowCount() - 1 property bool isLastItem: index === assets.rowCount() - 1
width: parent.width width: parent.width
height: 72 height: Theme.dp(72)
StatusRoundedImage { StatusRoundedImage {
id: iconImg id: iconImg
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 16 anchors.leftMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
image.source: root.tokenAssetSourceFn(symbol.toUpperCase()) image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: { image.onStatusChanged: {
@ -95,31 +95,31 @@ Item {
} }
Column { Column {
anchors.left: iconImg.right anchors.left: iconImg.right
anchors.leftMargin: 12 anchors.leftMargin: Theme.dp(12)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
StatusBaseText { StatusBaseText {
text: symbol.toUpperCase() text: symbol.toUpperCase()
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
color: Theme.palette.directColor1 color: Theme.palette.directColor1
} }
StatusBaseText { StatusBaseText {
text: name text: name
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
} }
} }
Column { Column {
anchors.right: parent.right anchors.right: parent.right
anchors.rightMargin: 16 anchors.rightMargin: Theme.dp(16)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
StatusBaseText { StatusBaseText {
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
text: parseFloat(totalBalance).toFixed(4) + " " + symbol text: parseFloat(totalBalance).toFixed(4) + " " + symbol
} }
StatusBaseText { StatusBaseText {
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
anchors.right: parent.right anchors.right: parent.right
text: getCurrencyBalanceString(totalCurrencyBalance) text: getCurrencyBalanceString(totalCurrencyBalance)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1

8
src/StatusQ/Controls/StatusBanner.qml
View File

@ -53,12 +53,12 @@ Column {
\qmlproperty string StatusBanner::textPixels \qmlproperty string StatusBanner::textPixels
This property holds the pixels size of the text inside the banner. This property holds the pixels size of the text inside the banner.
*/ */
property int textPixels: 15 property int textPixels: Theme.dp(15)
/*! /*!
\qmlproperty string StatusBanner::statusBannerHeight \qmlproperty string StatusBanner::statusBannerHeight
This property holds the height of the banner rectangle. This property holds the height of the banner rectangle.
*/ */
property int statusBannerHeight: 38 property int statusBannerHeight: Theme.dp(38)
// "private" properties // "private" properties
QtObject { QtObject {
@ -81,7 +81,7 @@ Column {
Rectangle { Rectangle {
id: topDiv id: topDiv
color: d.bordersColor color: d.bordersColor
height: 1 height: Theme.dp(1)
width: parent.width width: parent.width
} }
@ -105,7 +105,7 @@ Column {
Rectangle { Rectangle {
id: bottomDiv id: bottomDiv
color: d.bordersColor color: d.bordersColor
height: 1 height: Theme.dp(1)
width: parent.width width: parent.width
} }

26
src/StatusQ/Controls/StatusBaseButton.qml
View File

@ -19,8 +19,8 @@ Rectangle {
} }
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
} }
property bool loading: false property bool loading: false
@ -33,28 +33,28 @@ Rectangle {
property alias text: label.text property alias text: label.text
property alias font: label.font property alias font: label.font
property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12 property real defaultLeftPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12 property real defaultRightPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12)
property real defaultTopPadding: { property real defaultTopPadding: {
switch (size) { switch (size) {
case StatusBaseButton.Size.Tiny: case StatusBaseButton.Size.Tiny:
return 5 return Theme.dp(5)
case StatusBaseButton.Size.Small: case StatusBaseButton.Size.Small:
return 10 return Theme.dp(10)
case StatusBaseButton.Size.Large: case StatusBaseButton.Size.Large:
default: default:
return 11 return Theme.dp(11)
} }
} }
property real defaultBottomPadding: { property real defaultBottomPadding: {
switch (size) { switch (size) {
case StatusBaseButton.Size.Tiny: case StatusBaseButton.Size.Tiny:
return 5 return Theme.dp(5)
case StatusBaseButton.Size.Small: case StatusBaseButton.Size.Small:
return 10 return Theme.dp(10)
case StatusBaseButton.Size.Large: case StatusBaseButton.Size.Large:
default: default:
return 11 return Theme.dp(11)
} }
} }
@ -84,7 +84,7 @@ Rectangle {
implicitWidth: sensor.width implicitWidth: sensor.width
implicitHeight: sensor.height implicitHeight: sensor.height
radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6 radius: Theme.dp(size !== StatusBaseButton.Size.Tiny ? 8 : 6)
color: { color: {
if (statusBaseButton.enabled) if (statusBaseButton.enabled)
@ -123,7 +123,7 @@ Rectangle {
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: statusBaseButton.leftPadding anchors.leftMargin: statusBaseButton.leftPadding
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
spacing: 4 spacing: Theme.dp(4)
StatusIcon { StatusIcon {
id: statusIcon id: statusIcon
width: statusBaseButton.icon.width width: statusBaseButton.icon.width
@ -146,7 +146,7 @@ Rectangle {
id: label id: label
opacity: !loading opacity: !loading
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design font.pixelSize: Theme.dp(size === StatusBaseButton.Size.Large ? 15 : 13) // by design
color: d.textColor color: d.textColor
} // Text } // Text

50
src/StatusQ/Controls/StatusBaseInput.qml
View File

@ -153,22 +153,22 @@ Item {
\qmlproperty real StatusBaseInput::leftPadding \qmlproperty real StatusBaseInput::leftPadding
This property sets the leftComponentLoader's left padding. This property sets the leftComponentLoader's left padding.
*/ */
property real leftPadding: leftComponentLoader.item ? 8 : 16 property real leftPadding: Theme.dp(leftComponentLoader.item ? 8 : 16)
/*! /*!
\qmlproperty real StatusBaseInput::rightPadding \qmlproperty real StatusBaseInput::rightPadding
This property sets the right padding. This property sets the right padding.
*/ */
property real rightPadding: 16 property real rightPadding: Theme.dp(16)
/*! /*!
\qmlproperty real StatusBaseInput::topPadding \qmlproperty real StatusBaseInput::topPadding
This property sets the top padding. This property sets the top padding.
*/ */
property real topPadding: 12 property real topPadding: Theme.dp(12)
/*! /*!
\qmlproperty alias StatusBaseInput::bottomPadding \qmlproperty alias StatusBaseInput::bottomPadding
This property sets the bottom padding. This property sets the bottom padding.
*/ */
property real bottomPadding: 12 property real bottomPadding: Theme.dp(12)
/*! /*!
\qmlproperty var StatusBaseInput::tabNavItem \qmlproperty var StatusBaseInput::tabNavItem
This property sets the tab key navigation item. This property sets the tab key navigation item.
@ -232,15 +232,15 @@ Item {
This property holds a set of settings for the icon of the StatusBaseInput. This property holds a set of settings for the icon of the StatusBaseInput.
*/ */
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
name: "" name: ""
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
emoji: "" emoji: ""
letterSize: emoji ? 11 : 14 letterSize: Theme.dp(emoji ? 11 : 14)
background: StatusIconBackgroundSettings { background: StatusIconBackgroundSettings {
width: 30 width: Theme.dp(30)
height: 30 height: Theme.dp(30)
color: Theme.palette.indirectColor1 color: Theme.palette.indirectColor1
} }
} }
@ -277,10 +277,10 @@ Item {
*/ */
signal editClicked() signal editClicked()
implicitWidth: 448 implicitWidth: Theme.dp(448)
implicitHeight: multiline ? Math.min(Math.max( implicitHeight: multiline ? Math.min(Math.max(
(edit.implicitHeight + topPadding + bottomPadding), (edit.implicitHeight + topPadding + bottomPadding),
44, root.minimumHeight), root.maximumHeight) : 44 Theme.dp(44), root.minimumHeight), root.maximumHeight) : Theme.dp(44)
Rectangle { Rectangle {
id: background id: background
@ -293,7 +293,7 @@ Item {
maximumHeight) : parent.height maximumHeight) : parent.height
color: root.showBackground ? Theme.palette.baseColor2 color: root.showBackground ? Theme.palette.baseColor2
: "transparent" : "transparent"
radius: 8 radius: Theme.dp(8)
clip: true clip: true
@ -324,7 +324,7 @@ Item {
root.editClicked() root.editClicked()
} }
RowLayout { RowLayout {
spacing: 10 spacing: Theme.dp(10)
anchors { anchors {
fill: parent fill: parent
leftMargin: root.leftPadding leftMargin: root.leftPadding
@ -335,6 +335,8 @@ Item {
Loader { Loader {
id: leftComponentLoader id: leftComponentLoader
width: item ? item.width : 0
height: item ? item.height : 0
sourceComponent: { sourceComponent: {
if (root.leftComponent) return root.leftComponent if (root.leftComponent) return root.leftComponent
if (!root.leftIcon) return undefined if (!root.leftIcon) return undefined
@ -385,7 +387,7 @@ Item {
selectionColor: Theme.palette.primaryColor2 selectionColor: Theme.palette.primaryColor2
selectedTextColor: color selectedTextColor: color
focus: true focus: true
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1 color: Theme.palette.directColor1
wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
@ -424,9 +426,9 @@ Item {
cursorDelegate: Rectangle { cursorDelegate: Rectangle {
color: Theme.palette.primaryColor1 color: Theme.palette.primaryColor1
implicitWidth: 2 implicitWidth: Theme.dp(2)
implicitHeight: 22 implicitHeight: Theme.dp(22)
radius: 1 radius: Theme.dp(1)
visible: edit.cursorVisible visible: edit.cursorVisible
SequentialAnimation on visible { SequentialAnimation on visible {
@ -442,7 +444,7 @@ Item {
visible: (edit.text.length === 0) visible: (edit.text.length === 0)
anchors.fill: parent anchors.fill: parent
verticalAlignment: parent.verticalAlignment verticalAlignment: parent.verticalAlignment
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
elide: StatusBaseText.ElideRight elide: StatusBaseText.ElideRight
font.family: Theme.palette.baseFont.name font.family: Theme.palette.baseFont.name
color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6 color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
@ -472,11 +474,11 @@ Item {
visible: edit.text.length != 0 && root.clearable && !root.multiline visible: edit.text.length != 0 && root.clearable && !root.multiline
&& edit.activeFocus && edit.activeFocus
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
icon.name: "clear" icon.name: "clear"
icon.width: 16 icon.width: Theme.dp(16)
icon.height: 16 icon.height: Theme.dp(16)
icon.color: Theme.palette.baseColor1 icon.color: Theme.palette.baseColor1
onClicked: { onClicked: {
edit.clear() edit.clear()
@ -490,8 +492,8 @@ Item {
StatusSmartIdenticon { StatusSmartIdenticon {
id: identicon id: identicon
icon.width: 24 icon.width: Theme.dp(24)
icon.height: 24 icon.height: Theme.dp(24)
icon.background: root.icon.background icon.background: root.icon.background
icon.color: root.icon.color icon.color: root.icon.color
icon.letterSize: root.icon.letterSize icon.letterSize: root.icon.letterSize

24
src/StatusQ/Controls/StatusChatCommandButton.qml
View File

@ -7,8 +7,8 @@ import StatusQ.Components 0.1
Rectangle { Rectangle {
id: root id: root
implicitWidth: 168 implicitWidth: Theme.dp(168)
implicitHeight: 95 implicitHeight: Theme.dp(95)
property string text: "" property string text: ""
property bool highlighted: false property bool highlighted: false
@ -17,8 +17,8 @@ Rectangle {
signal clicked(var mouse) signal clicked(var mouse)
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 24 width: Theme.dp(24)
height: 24 height: Theme.dp(24)
background: StatusIconBackgroundSettings {} background: StatusIconBackgroundSettings {}
} }
@ -28,7 +28,7 @@ Rectangle {
return actualColor return actualColor
} }
radius: 16 radius: Theme.dp(16)
MouseArea { MouseArea {
id: sensor id: sensor
@ -46,22 +46,22 @@ Rectangle {
icon.height: root.icon.height icon.height: root.icon.height
icon.rotation: root.icon.rotation icon.rotation: root.icon.rotation
icon.color: Theme.palette.white icon.color: Theme.palette.white
icon.background.width: 40 icon.background.width: Theme.dp(40)
icon.background.height: 40 icon.background.height: Theme.dp(40)
icon.background.color: root.icon.color icon.background.color: root.icon.color
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: 8 anchors.topMargin: Theme.dp(8)
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
} }
StatusBaseText { StatusBaseText {
text: root.text text: root.text
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
anchors.bottom: parent.bottom anchors.bottom: parent.bottom
anchors.bottomMargin: 8 anchors.bottomMargin: Theme.dp(8)
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
font.weight: Font.Medium font.weight: Font.Medium
color: Theme.palette.white color: Theme.palette.white
} }

58
src/StatusQ/Controls/StatusChatInfoButton.qml
View File

@ -11,20 +11,20 @@ Rectangle {
Math.max( Math.max(
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth, statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
) + 8 ) + Theme.dp(8)
implicitHeight: 48 implicitHeight: Theme.dp(48)
property string title: "" property string title: ""
property string subTitle: "" property string subTitle: ""
property bool muted: false property bool muted: false
property int pinnedMessagesCount: 0 property int pinnedMessagesCount: 0
property StatusImageSettings image: StatusImageSettings { property StatusImageSettings image: StatusImageSettings {
width: 36 width: Theme.dp(36)
height: 36 height: Theme.dp(36)
} }
property StatusIconSettings icon: StatusIconSettings { property StatusIconSettings icon: StatusIconSettings {
width: 36 width: Theme.dp(36)
height: 36 height: Theme.dp(36)
charactersLen: 2 charactersLen: 2
} }
property alias ringSettings: identicon.ringSettings property alias ringSettings: identicon.ringSettings
@ -48,7 +48,7 @@ Rectangle {
CommunityChat // 6 CommunityChat // 6
} }
radius: 8 radius: Theme.dp(8)
color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
MouseArea { MouseArea {
@ -62,7 +62,7 @@ Rectangle {
StatusSmartIdenticon { StatusSmartIdenticon {
id: identicon id: identicon
anchors.left: parent.left anchors.left: parent.left
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
image: statusChatInfoButton.image image: statusChatInfoButton.image
icon: statusChatInfoButton.icon icon: statusChatInfoButton.icon
@ -72,9 +72,9 @@ Rectangle {
Item { Item {
id: statusChatInfoButtonTitle id: statusChatInfoButtonTitle
anchors.top: identicon.top anchors.top: identicon.top
anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8 anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : Theme.dp(8)
anchors.left: identicon.right anchors.left: identicon.right
anchors.leftMargin: 8 anchors.leftMargin: Theme.dp(8)
width: Math.min(parent.width - anchors.leftMargin width: Math.min(parent.width - anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin, - identicon.width - identicon.anchors.leftMargin,
@ -84,16 +84,16 @@ Rectangle {
implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
+ mutedDelta + mutedDelta
property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0 property real mutedDelta: mutedIcon.visible ? mutedIcon.width + Theme.dp(8) : 0
StatusIcon { StatusIcon {
id: statusIcon id: statusIcon
anchors.top: parent.top anchors.top: parent.top
anchors.topMargin: -2 anchors.topMargin: -Theme.dp(2)
anchors.left: parent.left anchors.left: parent.left
visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat visible: statusChatInfoButton.type !== StatusChatInfoButton.Type.OneToOneChat
width: visible ? 14 : 0 width: visible ? Theme.dp(14) : 0
color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1 color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
icon: { icon: {
switch (statusChatInfoButton.type) { switch (statusChatInfoButton.type) {
@ -129,7 +129,7 @@ Rectangle {
"#" + statusChatInfoButton.title : "#" + statusChatInfoButton.title :
statusChatInfoButton.title statusChatInfoButton.title
color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1 color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
font.pixelSize: 15 font.pixelSize: Theme.dp(15)
font.weight: Font.Medium font.weight: Font.Medium
} }
@ -137,10 +137,10 @@ Rectangle {
objectName: "mutedIcon" objectName: "mutedIcon"
id: mutedIcon id: mutedIcon
anchors.left: chatName.right anchors.left: chatName.right
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
anchors.top: chatName.top anchors.top: chatName.top
anchors.topMargin: -2 anchors.topMargin: -Theme.dp(2)
width: 13 width: Theme.dp(13)
icon: "tiny/muted" icon: "tiny/muted"
color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1
visible: statusChatInfoButton.muted visible: statusChatInfoButton.muted
@ -158,7 +158,7 @@ Rectangle {
text: "Unmute" text: "Unmute"
visible: mutedIconSensor.containsMouse visible: mutedIconSensor.containsMouse
orientation: StatusToolTip.Orientation.Bottom orientation: StatusToolTip.Orientation.Bottom
y: parent.height + 12 y: parent.height + Theme.dp(12)
} }
} }
} }
@ -170,10 +170,10 @@ Rectangle {
visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0 visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
height: visible ? chatType.height : 0 height: visible ? chatType.height : 0
width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
- identicon.width - identicon.anchors.leftMargin - 8, - identicon.width - identicon.anchors.leftMargin - Theme.dp(8),
implicitWidth) implicitWidth)
implicitWidth: chatType.implicitWidth + pinIconDelta + 8 implicitWidth: chatType.implicitWidth + pinIconDelta + Theme.dp(8)
property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
@ -184,7 +184,7 @@ Rectangle {
id: chatType id: chatType
text: statusChatInfoButton.subTitle text: statusChatInfoButton.subTitle
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0), width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
implicitWidth) implicitWidth)
onLinkActivated: statusChatInfoButton.linkActivated(link) onLinkActivated: statusChatInfoButton.linkActivated(link)
@ -192,11 +192,11 @@ Rectangle {
Rectangle { Rectangle {
id: divider id: divider
height: 12 height: Theme.dp(12)
width: 1 width: Theme.dp(1)
color: Theme.palette.directColor7 color: Theme.palette.directColor7
anchors.left: chatType.right anchors.left: chatType.right
anchors.leftMargin: 4 anchors.leftMargin: Theme.dp(4)
anchors.verticalCenter: chatType.verticalCenter anchors.verticalCenter: chatType.verticalCenter
visible: !!chatType.text && pinIcon.visible visible: !!chatType.text && pinIcon.visible
} }
@ -205,9 +205,9 @@ Rectangle {
id: pinIcon id: pinIcon
anchors.left: divider.visible ? divider.right : parent.left anchors.left: divider.visible ? divider.right : parent.left
anchors.leftMargin: -2 anchors.leftMargin: -Theme.dp(2)
anchors.verticalCenter: chatType.verticalCenter anchors.verticalCenter: chatType.verticalCenter
height: 14 height: Theme.dp(14)
visible: statusChatInfoButton.pinnedMessagesCount > 0 visible: statusChatInfoButton.pinnedMessagesCount > 0
icon: "pin" icon: "pin"
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
@ -215,12 +215,12 @@ Rectangle {
StatusBaseText { StatusBaseText {
anchors.left: pinIcon.right anchors.left: pinIcon.right
anchors.leftMargin: -6 anchors.leftMargin: -Theme.dp(6)
anchors.verticalCenter: pinIcon.verticalCenter anchors.verticalCenter: pinIcon.verticalCenter
width: 14 width: Theme.dp(14)
text: statusChatInfoButton.pinnedMessagesCount text: statusChatInfoButton.pinnedMessagesCount
font.pixelSize: 12 font.pixelSize: Theme.dp(12)
font.underline: pinCountSensor.containsMouse font.underline: pinCountSensor.containsMouse
visible: pinIcon.visible visible: pinIcon.visible
color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1

8
src/StatusQ/Controls/StatusChatListCategoryItemButton.qml
View File

@ -5,15 +5,15 @@ import StatusQ.Core 0.1
StatusFlatRoundButton { StatusFlatRoundButton {
id: statusChatListCategoryItemButton id: statusChatListCategoryItemButton
height: 22 height: Theme.dp(22)
width: 22 width: Theme.dp(22)
radius: 4 radius: Theme.dp(4)
property bool highlighted: false property bool highlighted: false
property StatusTooltipSettings tooltip: StatusTooltipSettings {} property StatusTooltipSettings tooltip: StatusTooltipSettings {}
type: StatusFlatRoundButton.Type.Secondary type: StatusFlatRoundButton.Type.Secondary
icon.width: 20 icon.width: Theme.dp(20)
icon.color: Theme.palette.directColor4 icon.color: Theme.palette.directColor4
color: hovered || highlighted ? color: hovered || highlighted ?

10
src/StatusQ/Controls/StatusCheckBox.qml
View File

@ -11,18 +11,18 @@ CheckBox {
id: statusCheckBox id: statusCheckBox
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 18 implicitWidth: Theme.dp(18)
implicitHeight: 18 implicitHeight: Theme.dp(18)
x: statusCheckBox.leftPadding x: statusCheckBox.leftPadding
y: parent.height / 2 - height / 2 y: parent.height / 2 - height / 2
radius: 2 radius: Theme.dp(2)
color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1 color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
: Theme.palette.directColor8 : Theme.palette.directColor8
StatusIcon { StatusIcon {
icon: "checkbox" icon: "checkbox"
width: 11 width: Theme.dp(11)
height: 8 height: Theme.dp(8)
anchors.centerIn: parent anchors.centerIn: parent
anchors.horizontalCenterOffset: 1 anchors.horizontalCenterOffset: 1
color: Theme.palette.white color: Theme.palette.white

12
src/StatusQ/Controls/StatusColorRadioButton.qml
View File

@ -9,18 +9,18 @@ RadioButton {
property string radioButtonColor: "" property string radioButtonColor: ""
property string selectionColor: StatusColors.colors['white'] property string selectionColor: StatusColors.colors['white']
implicitWidth: 48 implicitWidth: Theme.dp(48)
implicitHeight: 48 implicitHeight: Theme.dp(48)
indicator: Rectangle { indicator: Rectangle {
implicitWidth: 48 implicitWidth: Theme.dp(48)
implicitHeight: 48 implicitHeight: Theme.dp(48)
radius: width/2 radius: width/2
color: radioButtonColor color: radioButtonColor
Rectangle { Rectangle {
width: 20 width: Theme.dp(20)
height: 20 height: Theme.dp(20)
radius: width/2 radius: width/2
color: selectionColor color: selectionColor
border.color: StatusColors.colors['grey3'] border.color: StatusColors.colors['grey3']

7
src/StatusQ/Controls/StatusColorSelector.qml
View File

@ -1,6 +1,7 @@
import QtQuick 2.13 import QtQuick 2.13
import QtQuick.Controls 2.13 import QtQuick.Controls 2.13
import StatusQ.Controls 0.1 import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item { Item {
id: root id: root
@ -8,7 +9,7 @@ Item {
property string label: "Color" property string label: "Color"
property var model property var model
height: accountColorInput.height height: accountColorInput.height
implicitWidth: 448 implicitWidth: Theme.dp(448)
StatusSelect { StatusSelect {
id: accountColorInput id: accountColorInput
@ -20,9 +21,9 @@ Item {
MenuItem { MenuItem {
property bool isFirstItem: index === 0 property bool isFirstItem: index === 0
property bool isLastItem: index === root.model.length - 1 property bool isLastItem: index === root.model.length - 1
height: 52 height: Theme.dp(52)
width: parent.width width: parent.width
padding: 10 padding: Theme.dp(10)
onTriggered: function () { onTriggered: function () {
const selectedColor = root.model[index] const selectedColor = root.model[index]
root.selectedColor = selectedColor root.selectedColor = selectedColor

8
src/StatusQ/Controls/StatusColorSelectorGrid.qml
View File

@ -29,20 +29,20 @@ Column {
signal colorSelected(color color) signal colorSelected(color color)
spacing: 16 spacing: Theme.dp(16)
StatusBaseText { StatusBaseText {
id: title id: title
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
font.pixelSize: 13 font.pixelSize: Theme.dp(13)
color: Theme.palette.baseColor1 color: Theme.palette.baseColor1
} }
Grid { Grid {
id: grid id: grid
columns: 6 columns: 6
rowSpacing: 16 rowSpacing: Theme.dp(16)
columnSpacing: 32 columnSpacing: Theme.dp(32)
Repeater { Repeater {
model: root.model model: root.model
delegate: StatusColorRadioButton { delegate: StatusColorRadioButton {

Some files were not shown because too many files have changed in this diff Show More