From d9ced073ea8421f17ef4bbbc88f6a3d3eca2fe11 Mon Sep 17 00:00:00 2001 From: Alexandra Betouni <31625338+alexandraB99@users.noreply.github.com> Date: Fri, 24 Jun 2022 19:24:39 +0300 Subject: [PATCH] feat(StatusQ): Making UI components resizable Needed for: https://github.com/status-im/status-desktop/issues/6071 --- sandbox/DemoApp.qml | 14 +- sandbox/ThemeSwitch.qml | 9 +- sandbox/controls/Buttons.qml | 32 ++--- sandbox/controls/Controls.qml | 44 +++--- sandbox/controls/Icons.qml | 5 +- sandbox/controls/Layout.qml | 46 +++--- sandbox/controls/ListItems.qml | 16 +-- sandbox/controls/Others.qml | 6 +- sandbox/controls/Popups.qml | 56 ++++---- sandbox/demoapp/ChatChannelView.qml | 26 ++-- sandbox/demoapp/CreateChatView.qml | 12 +- sandbox/demoapp/DemoCommunityDetailModal.qml | 30 ++-- sandbox/demoapp/DemoContactRequestsModal.qml | 10 +- sandbox/demoapp/StatusAppChatView.qml | 18 +-- .../StatusAppCommunitiesPortalView.qml | 28 ++-- sandbox/demoapp/StatusAppCommunityView.qml | 16 +-- .../demoapp/StatusAppProfileSettingsView.qml | 8 +- sandbox/main.qml | 40 +++--- sandbox/pages/StatusAccountSelectorPage.qml | 4 +- sandbox/pages/StatusAddressPage.qml | 3 +- sandbox/pages/StatusChatInfoToolBarPage.qml | 4 +- sandbox/pages/StatusColorSelectorGridPage.qml | 12 +- sandbox/pages/StatusColorSelectorPage.qml | 2 +- sandbox/pages/StatusColorSpacePage.qml | 6 +- sandbox/pages/StatusCommunityCardPage.qml | 5 +- sandbox/pages/StatusCommunityTagsPage.qml | 12 +- .../StatusExpandableSettingsItemPage.qml | 20 +-- sandbox/pages/StatusInputPage.qml | 27 ++-- sandbox/pages/StatusListPickerPage.qml | 12 +- sandbox/pages/StatusMacNotificationPage.qml | 3 +- .../StatusPasswordStrengthIndicatorPage.qml | 5 +- sandbox/pages/StatusPinInputPage.qml | 20 +-- sandbox/pages/StatusPopupMenuPage.qml | 4 +- sandbox/pages/StatusSelectPage.qml | 2 +- sandbox/pages/StatusTabBarButtonPage.qml | 2 +- sandbox/pages/StatusTabBarIconButtonPage.qml | 2 +- sandbox/pages/StatusTabSwitchPage.qml | 5 +- sandbox/pages/StatusTagSelectorPage.qml | 5 +- sandbox/pages/StatusToastMessagePage.qml | 3 +- sandbox/pages/StatusWalletColorButtonPage.qml | 2 +- sandbox/pages/StatusWalletColorSelectPage.qml | 2 +- sandbox/pages/StatusWizardStepperPage.qml | 10 +- src/StatusQ/Components/StatusAddress.qml | 2 +- src/StatusQ/Components/StatusBadge.qml | 16 +-- .../Components/StatusChatInfoToolBar.qml | 13 +- src/StatusQ/Components/StatusChatList.qml | 4 +- .../StatusChatListAndCategories.qml | 3 +- .../Components/StatusChatListCategoryItem.qml | 16 +-- src/StatusQ/Components/StatusChatListItem.qml | 28 ++-- src/StatusQ/Components/StatusChatToolBar.qml | 26 ++-- src/StatusQ/Components/StatusColorSpace.qml | 4 +- .../Components/StatusCommunityCard.qml | 136 +++++++++--------- .../Components/StatusCommunityTags.qml | 7 +- ...StatusContactRequestsIndicatorListItem.qml | 6 +- .../StatusContactVerificationIcons.qml | 10 +- .../Components/StatusDescriptionListItem.qml | 34 ++--- src/StatusQ/Components/StatusEmoji.qml | 8 +- .../Components/StatusExpandableItem.qml | 74 +++++----- .../Components/StatusImageCropPanel.qml | 17 +-- .../Components/StatusLetterIdenticon.qml | 6 +- src/StatusQ/Components/StatusListItem.qml | 56 ++++---- .../Components/StatusListItemBadge.qml | 18 +-- src/StatusQ/Components/StatusListItemTag.qml | 24 ++-- src/StatusQ/Components/StatusListPicker.qml | 30 ++-- .../Components/StatusListSectionHeadline.qml | 10 +- .../Components/StatusLoadingIndicator.qml | 5 +- .../Components/StatusMemberListItem.qml | 24 ++-- src/StatusQ/Components/StatusMessage.qml | 12 +- .../Components/StatusMessageDetails.qml | 5 +- .../Components/StatusNavigationListItem.qml | 10 +- .../StatusNavigationPanelHeadline.qml | 2 +- src/StatusQ/Components/StatusRoundIcon.qml | 8 +- src/StatusQ/Components/StatusRoundedImage.qml | 4 +- .../Components/StatusSmartIdenticon.qml | 16 +-- src/StatusQ/Components/StatusTagSelector.qml | 73 +++++----- src/StatusQ/Components/StatusToastMessage.qml | 34 ++--- .../Components/StatusWizardStepper.qml | 26 ++-- .../statusMessage/StatusAudioMessage.qml | 32 ++--- .../statusMessage/StatusEditMessage.qml | 4 +- .../statusMessage/StatusImageMessage.qml | 22 +-- .../statusMessage/StatusMessageHeader.qml | 12 +- .../StatusMessageQuickActions.qml | 10 +- .../statusMessage/StatusMessageReply.qml | 38 ++--- .../statusMessage/StatusPinMessageDetails.qml | 18 +-- .../private/statusMessage/StatusSticker.qml | 10 +- .../statusMessage/StatusTextMessage.qml | 8 +- .../statusMessage/StatusTimeStampLabel.qml | 4 +- .../Controls/StatusAccountSelector.qml | 66 ++++----- .../Controls/StatusActivityCenterButton.qml | 18 +-- src/StatusQ/Controls/StatusAssetSelector.qml | 36 ++--- src/StatusQ/Controls/StatusBanner.qml | 8 +- src/StatusQ/Controls/StatusBaseButton.qml | 26 ++-- src/StatusQ/Controls/StatusBaseInput.qml | 50 +++---- .../Controls/StatusChatCommandButton.qml | 24 ++-- src/StatusQ/Controls/StatusChatInfoButton.qml | 58 ++++---- .../StatusChatListCategoryItemButton.qml | 8 +- src/StatusQ/Controls/StatusCheckBox.qml | 10 +- .../Controls/StatusColorRadioButton.qml | 12 +- src/StatusQ/Controls/StatusColorSelector.qml | 7 +- .../Controls/StatusColorSelectorGrid.qml | 8 +- src/StatusQ/Controls/StatusCommunityTag.qml | 10 +- src/StatusQ/Controls/StatusFlatButton.qml | 4 +- .../Controls/StatusFlatRoundButton.qml | 10 +- .../StatusFloatingButtonsSelector.qml | 16 +-- src/StatusQ/Controls/StatusIconTabButton.qml | 14 +- src/StatusQ/Controls/StatusIdenticonRing.qml | 3 +- src/StatusQ/Controls/StatusImageCrop.qml | 6 +- src/StatusQ/Controls/StatusInput.qml | 12 +- src/StatusQ/Controls/StatusItemPicker.qml | 16 +-- src/StatusQ/Controls/StatusLabeledSlider.qml | 8 +- .../Controls/StatusNavBarTabButton.qml | 17 +-- src/StatusQ/Controls/StatusPickerButton.qml | 10 +- src/StatusQ/Controls/StatusPinInput.qml | 4 +- src/StatusQ/Controls/StatusProgressBar.qml | 10 +- src/StatusQ/Controls/StatusRadioButton.qml | 12 +- src/StatusQ/Controls/StatusRoundButton.qml | 8 +- .../Controls/StatusSeedPhraseInput.qml | 32 ++--- src/StatusQ/Controls/StatusSelect.qml | 28 ++-- src/StatusQ/Controls/StatusSelectableText.qml | 2 +- src/StatusQ/Controls/StatusSlider.qml | 14 +- src/StatusQ/Controls/StatusSwitch.qml | 14 +- src/StatusQ/Controls/StatusSwitchTabBar.qml | 6 +- .../Controls/StatusSwitchTabButton.qml | 12 +- .../Controls/StatusTabBarIconButton.qml | 8 +- src/StatusQ/Controls/StatusTabButton.qml | 14 +- src/StatusQ/Controls/StatusTagItem.qml | 12 +- .../Controls/StatusTokenInlineSelector.qml | 18 +-- src/StatusQ/Controls/StatusToolTip.qml | 32 ++--- .../Controls/StatusWalletColorButton.qml | 16 +-- .../Controls/StatusWalletColorSelect.qml | 8 +- src/StatusQ/Core/StatusIcon.qml | 1 + src/StatusQ/Core/StatusIconSettings.qml | 9 +- .../Core/StatusModalHeaderSettings.qml | 10 +- src/StatusQ/Core/Theme/Theme.qml | 14 ++ src/StatusQ/Core/Utils/Utils.qml | 4 - src/StatusQ/Layout/StatusAppLayout.qml | 6 +- src/StatusQ/Layout/StatusAppNavBar.qml | 18 +-- .../Layout/StatusAppThreePanelLayout.qml | 16 +-- .../Layout/StatusAppTwoPanelLayout.qml | 6 +- .../Platform/StatusMacNotification.qml | 48 +++---- .../Platform/StatusMacTrafficLights.qml | 20 +-- .../Platform/StatusWindowsTitleBar.qml | 28 ++-- src/StatusQ/Popups/StatusColorDialog.qml | 30 ++-- src/StatusQ/Popups/StatusMenuHeadline.qml | 8 +- src/StatusQ/Popups/StatusMenuItem.qml | 5 +- src/StatusQ/Popups/StatusMenuItemDelegate.qml | 32 ++--- src/StatusQ/Popups/StatusMenuSeparator.qml | 4 +- src/StatusQ/Popups/StatusModal.qml | 8 +- src/StatusQ/Popups/StatusPopupMenu.qml | 12 +- src/StatusQ/Popups/StatusSearchPopup.qml | 80 +++++------ .../Popups/StatusSearchPopupMenuItem.qml | 14 +- .../Popups/StatusSpellcheckingMenuItems.qml | 24 ++-- .../statusModal/StatusImageWithTitle.qml | 36 ++--- .../Popups/statusModal/StatusModalFooter.qml | 14 +- .../Popups/statusModal/StatusModalHeader.qml | 22 +-- 155 files changed, 1367 insertions(+), 1322 deletions(-) diff --git a/sandbox/DemoApp.qml b/sandbox/DemoApp.qml index af4a7c16..59edb6b1 100644 --- a/sandbox/DemoApp.qml +++ b/sandbox/DemoApp.qml @@ -14,9 +14,9 @@ import "demoapp/data" 1.0 Rectangle { id: demoApp - height: 602 - width: 1002 - border.width: 1 + height: Theme.dp(602) + width: Theme.dp(1002) + border.width: Theme.dp(1) border.color: Theme.palette.baseColor2 property string titleStyle: "osx" @@ -50,7 +50,7 @@ Rectangle { StatusMacTrafficLights { anchors.left: parent.left anchors.top: parent.top - anchors.margins: 13 + anchors.margins: Theme.dp(13) z: statusAppLayout.z + 1 visible: titleStyle === "osx" } @@ -112,7 +112,7 @@ Rectangle { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) onClicked: { if(model.sectionType === appSectionType.chat) { @@ -143,7 +143,7 @@ Rectangle { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) onClicked: { if(model.sectionType === appSectionType.community) { @@ -175,7 +175,7 @@ Rectangle { StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" - icon.width: 14 + icon.width: Theme.dp(14) iconRotation: 180 type: StatusMenuItem.Type.Danger } diff --git a/sandbox/ThemeSwitch.qml b/sandbox/ThemeSwitch.qml index 51b8f1f1..172541d2 100644 --- a/sandbox/ThemeSwitch.qml +++ b/sandbox/ThemeSwitch.qml @@ -2,6 +2,7 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 Item { id: themeSwitchWrapper @@ -19,11 +20,11 @@ Item { Row { id: themeSwitch - spacing: 2 + spacing: Theme.dp(2) Text { text: "🌤" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.verticalCenter: parent.verticalCenter } @@ -35,13 +36,13 @@ Item { text: "Toggle Theme" visible: sensor.containsMouse orientation: StatusToolTip.Orientation.Bottom - y: themeSwitchWrapper.y + 16 + y: themeSwitchWrapper.y + Theme.dp(16) } } Text { text: "🌙" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.verticalCenter: parent.verticalCenter } } diff --git a/sandbox/controls/Buttons.qml b/sandbox/controls/Buttons.qml index 34e040ff..62eceed4 100644 --- a/sandbox/controls/Buttons.qml +++ b/sandbox/controls/Buttons.qml @@ -8,12 +8,12 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 Column { - spacing: 10 + spacing: Theme.dp(10) Grid { id: buttonGridWidth - columns: 3 - columnSpacing: 38 - rowSpacing: 10 + columns: Theme.dp(3) + columnSpacing: Theme.dp(38) + rowSpacing: Theme.dp(10) horizontalItemAlignment: Grid.AlignHCenter @@ -196,22 +196,22 @@ Column { // Rounded blue StatusFlatRoundButton { - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" } StatusFlatRoundButton { - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" enabled: false } StatusFlatRoundButton { - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" loading: true } @@ -220,24 +220,24 @@ Column { StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" } StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" enabled: false } StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 44 - height: 44 + width: Theme.dp(44) + height: Theme.dp(44) icon.name: "info" loading: true } diff --git a/sandbox/controls/Controls.qml b/sandbox/controls/Controls.qml index 01d0b0da..cba8cb04 100644 --- a/sandbox/controls/Controls.qml +++ b/sandbox/controls/Controls.qml @@ -9,22 +9,22 @@ import Sandbox 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusSelectableText { 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." - font.pixelSize: 15 - width: 300 + font.pixelSize: Theme.dp(15) + width: Theme.dp(300) multiline: true } StatusSelectableText { color: Theme.palette.baseColor1 text: "

This is a selectable link in rich text format to test www.google.com

" - font.pixelSize: 15 - width: 200 + font.pixelSize: Theme.dp(15) + width: Theme.dp(200) } StatusIconTabButton { @@ -57,21 +57,21 @@ GridLayout { visible: parent.hovered text: "Right" orientation: StatusToolTip.Orientation.Right - x: parent.width + 16 + x: parent.width + Theme.dp(16) y: parent.height / 2 - height / 2 + 4 } StatusToolTip { visible: parent.hovered text: "Bottom" orientation: StatusToolTip.Orientation.Bottom - y: parent.height + 12 + y: parent.height + Theme.dp(12) } StatusToolTip { visible: parent.hovered text: "Left" orientation: StatusToolTip.Orientation.Left - x: -parent.width /2 -8 - y: parent.height / 2 - height / 2 + 4 + x: -parent.width /2 - Theme.dp(8) + y: parent.height / 2 - height / 2 + Theme.dp(4) } } @@ -95,7 +95,7 @@ GridLayout { tooltip.text: "Profile" badge.value: 0 badge.visible: true - badge.anchors.leftMargin:-16 + badge.anchors.leftMargin:-Theme.dp(16) } StatusNavBarTabButton { @@ -131,8 +131,8 @@ GridLayout { } Item { - implicitWidth: 100 - implicitHeight: 48 + implicitWidth: Theme.dp(100) + implicitHeight: Theme.dp(48) StatusChatInfoButton { title: "Iuri Matias elided" subTitle: "Contact" @@ -141,13 +141,13 @@ GridLayout { type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 1 - width: 100 + width: Theme.dp(100) } } Item { - implicitWidth: 100 - implicitHeight: 48 + implicitWidth: Theme.dp(100) + implicitHeight: Theme.dp(48) StatusChatInfoButton { title: "Iuri Matias big not elided" subTitle: "Contact" @@ -156,7 +156,7 @@ GridLayout { type: StatusChatInfoButton.Type.OneToOneChat muted: true pinnedMessagesCount: 1 - width: 400 + width: Theme.dp(400) } } @@ -183,26 +183,26 @@ GridLayout { } StatusSlider { - width: 360 + width: Theme.dp(360) from: 0 to: 100 value: 40 } StatusLabeledSlider { - width: 360 + width: Theme.dp(360) model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")] } StatusLabeledSlider { - width: 360 + width: Theme.dp(360) model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")] } StatusBanner { id: banner - width: 360 - topPadding: 20 + width: Theme.dp(360) + topPadding: Theme.dp(20) type: StatusBanner.Type.Danger statusText: "Banner" } diff --git a/sandbox/controls/Icons.qml b/sandbox/controls/Icons.qml index 51658a0f..f22ae34e 100644 --- a/sandbox/controls/Icons.qml +++ b/sandbox/controls/Icons.qml @@ -1,11 +1,12 @@ import QtQuick 2.14 import QtQuick.Layouts 1.14 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 GridLayout { columns: 6 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) property color iconColor Repeater { diff --git a/sandbox/controls/Layout.qml b/sandbox/controls/Layout.qml index 6b5c2859..8bb8045b 100644 --- a/sandbox/controls/Layout.qml +++ b/sandbox/controls/Layout.qml @@ -10,11 +10,11 @@ import StatusQ.Layout 0.1 import StatusQ.Popups 0.1 Column { - spacing: 10 + spacing: Theme.dp(10) StatusChatToolBar { toolbarComponent: chatInfoButton1 - width: 518 + width: Theme.dp(518) Component { id: chatInfoButton1 @@ -31,7 +31,7 @@ Column { StatusChatToolBar { toolbarComponent: chatInfoButton2 - width: 518 + width: Theme.dp(518) Component { id: chatInfoButton2 @@ -51,7 +51,7 @@ Column { StatusChatToolBar { notificationCount: 1 toolbarComponent: chatInfoButton3 - width: 518 + width: Theme.dp(518) Component { id: chatInfoButton3 @@ -70,7 +70,7 @@ Column { StatusChatToolBar { notificationCount: 1 toolbarComponent: tagSelector - width: 518 + width: Theme.dp(518) Component { id: tagSelector @@ -107,6 +107,8 @@ Column { Button { id: btn text: "Append" + width: Theme.dp(100) + height: Theme.dp(40) onClicked: { buttons.append({ name: "Test community", @@ -142,7 +144,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification 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.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) } communityNavBarButton: StatusNavBarTabButton { @@ -199,7 +201,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) popupMenu: StatusPopupMenu { @@ -224,7 +226,7 @@ Column { StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" - icon.width: 14 + icon.width: Theme.dp(14) iconRotation: 180 type: StatusMenuItem.Type.Danger } @@ -270,7 +272,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) } communityNavBarButton: StatusNavBarTabButton { @@ -284,7 +286,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) popupMenu: StatusPopupMenu { @@ -309,8 +311,8 @@ Column { StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" - icon.width: 14 - iconRotation: 180 + icon.width: Theme.dp(14) + iconRotation: Theme.dp(180) type: StatusMenuItem.Type.Danger } } @@ -360,7 +362,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) } communityNavBarButton: StatusNavBarTabButton { @@ -374,7 +376,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) popupMenu: StatusPopupMenu { @@ -399,8 +401,8 @@ Column { StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" - icon.width: 14 - iconRotation: 180 + icon.width: Theme.dp(14) + iconRotation: Theme.dp(180) type: StatusMenuItem.Type.Danger } } @@ -455,7 +457,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) } communityNavBarButton: StatusNavBarTabButton { @@ -469,7 +471,7 @@ Column { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) popupMenu: StatusPopupMenu { @@ -494,15 +496,13 @@ Column { StatusMenuItem { text: qsTr("Leave Community") icon.name: "arrow-right" - icon.width: 14 - iconRotation: 180 + icon.width: Theme.dp(14) + iconRotation: Theme.dp(180) type: StatusMenuItem.Type.Danger } } } } - - } } diff --git a/sandbox/controls/ListItems.qml b/sandbox/controls/ListItems.qml index 215ef0dd..74f7d768 100644 --- a/sandbox/controls/ListItems.qml +++ b/sandbox/controls/ListItems.qml @@ -8,8 +8,8 @@ import StatusQ.Core.Utils 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusNavigationListItem { title: "Menu Item" @@ -156,7 +156,7 @@ GridLayout { subTitle: "Subtitle" tertiaryTitle: "Tertiary title" - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) statusListItemTitle.font.weight: Font.Bold } @@ -166,7 +166,7 @@ GridLayout { tertiaryTitle: "Tertiary title" icon.name: "info" - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) statusListItemTitle.font.weight: Font.Bold } @@ -345,14 +345,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I tagsModel : 2 tagsDelegate: StatusListItemTag { color: "blue" - height: 24 - radius: 6 + height: Theme.dp(24) + radius: Theme.dp(6) closeButtonVisible: false icon.emoji: "😁" icon.emojiSize: Emoji.size.verySmall icon.isLetterIdenticon: true title: "helloworld.eth" - titleText.font.pixelSize: 12 + titleText.font.pixelSize: Theme.dp(12) titleText.color: Theme.palette.indirectColor1 } } @@ -362,7 +362,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I subTitle: "Emoji" icon.emoji: "😁" icon.color: "yellow" - icon.letterSize: 14 + icon.letterSize: Theme.dp(14) icon.isLetterIdenticon: true } diff --git a/sandbox/controls/Others.qml b/sandbox/controls/Others.qml index 9075ca76..7475b335 100644 --- a/sandbox/controls/Others.qml +++ b/sandbox/controls/Others.qml @@ -10,8 +10,8 @@ ColumnLayout { Layout.fillHeight: true columns: 6 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusLoadingIndicator { color: Theme.palette.directColor4 @@ -53,7 +53,7 @@ ColumnLayout { StatusLetterIdenticon { name: "A" color: Theme.palette.userCustomizationColors[index] - letterSize: 16 + letterSize: Theme.dp(16) } } } diff --git a/sandbox/controls/Popups.qml b/sandbox/controls/Popups.qml index 1903e479..1b3ca078 100644 --- a/sandbox/controls/Popups.qml +++ b/sandbox/controls/Popups.qml @@ -9,7 +9,7 @@ import StatusQ.Popups 0.1 import StatusQ.Core.Utils 0.1 Column { - spacing: 20 + spacing: Theme.dp(20) StatusButton { text: "Simple modal" @@ -144,11 +144,11 @@ Column { headerActionButton: StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) - icon.width: 20 - icon.height: 20 + icon.width: Theme.dp(20) + icon.height: Theme.dp(20) icon.name: "info" } @@ -193,17 +193,17 @@ Column { contentItem: StatusBaseText { anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } headerActionButton: StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) - icon.width: 20 - icon.height: 20 + icon.width: Theme.dp(20) + icon.height: Theme.dp(20) icon.name: "info" } } @@ -218,7 +218,7 @@ Column { id: text anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -243,7 +243,7 @@ Column { contentItem: StatusBaseText { anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -269,7 +269,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I contentItem: StatusBaseText { anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -296,7 +296,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I contentItem: StatusBaseText { anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -323,7 +323,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I contentItem: StatusBaseText { anchors.centerIn: parent text: "Some text content" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -374,29 +374,29 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I showFooter: false showAdvancedHeader: true showAdvancedFooter: true - height: 200 + height: Theme.dp(200) advancedHeaderComponent: Rectangle { width: parent.width - height: 50 + height: Theme.dp(50) color: Theme.palette.baseColor1 - border.width: 1 + border.width: Theme.dp(1) StatusBaseText { anchors.centerIn: parent text: "Add any header here" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } } advancedFooterComponent: Rectangle { width: parent.width - height: 50 + height: Theme.dp(50) color: Theme.palette.baseColor1 - border.width: 1 + border.width: Theme.dp(1) StatusBaseText { anchors.centerIn: parent text: "Add any footer here" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } @@ -406,7 +406,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I StatusModal { id: floatingHeaderModal anchors.centerIn: parent - height: 200 + height: Theme.dp(200) showHeader: false showFooter: false showAdvancedHeader: true @@ -417,14 +417,14 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I delegate: Rectangle { width: button.width height: button.height - radius: 8 + radius: Theme.dp(8) visible: visibleIndices.includes(index) StatusButton { id: button - topPadding: 8 + topPadding: Theme.dp(8) bottomPadding: 0 - implicitHeight: 32 - defaultLeftPadding: 4 + implicitHeight: Theme.dp(32) + defaultLeftPadding: Theme.dp(4) text: name icon.emoji: !!emoji ? emoji: "" icon.emojiSize: Emoji.size.middle @@ -437,7 +437,7 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I } } popupMenuDelegate: StatusListItem { - implicitWidth: 272 + implicitWidth: Theme.dp(272) title: name onClicked: floatingHeader.itemSelected(index) visible: !visibleIndices.includes(index) diff --git a/sandbox/demoapp/ChatChannelView.qml b/sandbox/demoapp/ChatChannelView.qml index 1ac163a0..d90555e1 100644 --- a/sandbox/demoapp/ChatChannelView.qml +++ b/sandbox/demoapp/ChatChannelView.qml @@ -12,7 +12,7 @@ import StatusQ.Core.Theme 0.1 ListView { id: messageList anchors.fill: parent - anchors.margins: 15 + anchors.margins: Theme.dp(15) clip: true delegate: StatusMessage { id: delegate @@ -34,8 +34,8 @@ ListView { secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: "" chatID: model.chatKey profileImage: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) source: model.profileImage isIdenticon: model.isIdenticon } @@ -55,8 +55,8 @@ ListView { amISender: model.isReply ? model.replyAmISender : "" displayName: model.isReply ? model.replySenderName: "" profileImage: StatusImageSettings { - width: 20 - height: 20 + width: Theme.dp(20) + height: Theme.dp(20) source: model.isReply ? model.replyProfileImage: "" isIdenticon: model.isReply ? model.replyIsIdenticon: "" } @@ -67,23 +67,23 @@ ListView { quickActions: [ StatusFlatRoundButton { id: emojiBtn - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "reaction-b" type: StatusFlatRoundButton.Type.Tertiary tooltip.text: "Add reaction" }, StatusFlatRoundButton { id: replyBtn - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "reply" type: StatusFlatRoundButton.Type.Tertiary tooltip.text: "Reply" }, StatusFlatRoundButton { - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "tiny/edit" type: StatusFlatRoundButton.Type.Tertiary tooltip.text: "Edit" @@ -93,8 +93,8 @@ ListView { }, StatusFlatRoundButton { id: otherBtn - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "more" type: StatusFlatRoundButton.Type.Tertiary tooltip.text: "More" diff --git a/sandbox/demoapp/CreateChatView.qml b/sandbox/demoapp/CreateChatView.qml index b37bf63d..08ad4658 100644 --- a/sandbox/demoapp/CreateChatView.qml +++ b/sandbox/demoapp/CreateChatView.qml @@ -10,7 +10,7 @@ import StatusQ.Core.Theme 0.1 Page { id: root anchors.fill: parent - anchors.margins: 16 + anchors.margins: Theme.dp(16) property ListModel contactsModel: null background: null @@ -19,13 +19,13 @@ Page { width: parent.width height: tagSelector.height anchors.right: parent.right - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) StatusTagSelector { id: tagSelector Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft - Layout.leftMargin: 17 + Layout.leftMargin: Theme.dp(17) maxHeight: root.height toLabelText: qsTr("To: ") warningText: qsTr("USER LIMIT REACHED") @@ -73,7 +73,7 @@ Page { } StatusButton { - implicitHeight: 44 + implicitHeight: Theme.dp(44) Layout.alignment: Qt.AlignTop enabled: (tagSelector.namesModel.count > 0) text: "Confirm" @@ -82,14 +82,14 @@ Page { contentItem: Item { anchors.fill: parent - anchors.topMargin: 68 + anchors.topMargin: Theme.dp(68) StatusBaseText { visible: (contactsModel.count === 0) anchors.centerIn: parent horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 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 diff --git a/sandbox/demoapp/DemoCommunityDetailModal.qml b/sandbox/demoapp/DemoCommunityDetailModal.qml index 3eff516e..59bf9276 100644 --- a/sandbox/demoapp/DemoCommunityDetailModal.qml +++ b/sandbox/demoapp/DemoCommunityDetailModal.qml @@ -19,24 +19,24 @@ StatusModal { width: root.width StatusModalDivider { - bottomPadding: 8 + bottomPadding: Theme.dp(8) } StatusBaseText { text: "A community of cat lovers, meow!" verticalAlignment: Text.AlignVCenter - font.pixelSize: 15 - height: 46 + font.pixelSize: Theme.dp(15) + height: Theme.dp(46) color: Theme.palette.directColor1 anchors.left: parent.left anchors.right: parent.right - anchors.leftMargin: 16 - anchors.rightMargin: 16 + anchors.leftMargin: Theme.dp(16) + anchors.rightMargin: Theme.dp(16) } StatusModalDivider { - topPadding: 8 - bottomPadding: 8 + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) } StatusDescriptionListItem { @@ -49,13 +49,13 @@ StatusModal { } StatusModalDivider { - topPadding: 8 - bottomPadding: 8 + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) title: "Members" icon.name: "group-chat" label: "184" @@ -79,13 +79,13 @@ StatusModal { } StatusModalDivider { - topPadding: 8 - bottomPadding: 8 + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) } StatusListItem { anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) title: "Edit community" icon.name: "edit" type: StatusListItem.Type.Secondary @@ -93,7 +93,7 @@ StatusModal { StatusListItem { anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) title: "Transfer ownership" icon.name: "exchange" type: StatusListItem.Type.Secondary @@ -101,7 +101,7 @@ StatusModal { StatusListItem { anchors.horizontalCenter: parent.horizontalCenter - statusListItemTitle.font.pixelSize: 17 + statusListItemTitle.font.pixelSize: Theme.dp(17) title: "Leave community" icon.name: "arrow-right" icon.rotation: 180 diff --git a/sandbox/demoapp/DemoContactRequestsModal.qml b/sandbox/demoapp/DemoContactRequestsModal.qml index ca8eec84..aa07c889 100644 --- a/sandbox/demoapp/DemoContactRequestsModal.qml +++ b/sandbox/demoapp/DemoContactRequestsModal.qml @@ -11,18 +11,18 @@ StatusModal { header.title: "Contact Requests" headerActionButton: StatusFlatRoundButton { type: StatusFlatRoundButton.Type.Secondary - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) - icon.width: 20 - icon.height: 20 + icon.width: Theme.dp(20) + icon.height: Theme.dp(20) icon.name: "notification" } contentItem: StatusBaseText { anchors.centerIn: parent text: "Contact request will be shown here" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } diff --git a/sandbox/demoapp/StatusAppChatView.qml b/sandbox/demoapp/StatusAppChatView.qml index 58b6fd8b..1188bfa1 100644 --- a/sandbox/demoapp/StatusAppChatView.qml +++ b/sandbox/demoapp/StatusAppChatView.qml @@ -20,26 +20,26 @@ StatusAppThreePanelLayout { StatusNavigationPanelHeadline { id: headline anchors.top: parent.top - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.horizontalCenter: parent.horizontalCenter text: "Chat" } RowLayout { id: searchInputWrapper - width: 288 + width: Theme.dp(288) height: searchInput.height anchors.top: headline.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.horizontalCenter: parent.horizontalCenter StatusBaseInput { id: searchInput Layout.fillWidth: true Layout.alignment: Qt.AlignVCenter - implicitHeight: 36 - topPadding: 8 - bottomPadding: 8 + implicitHeight: Theme.dp(36) + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) placeholderText: "Search" icon.name: "search" } @@ -58,9 +58,9 @@ StatusAppThreePanelLayout { Column { anchors.top: searchInputWrapper.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.horizontalCenter: parent.horizontalCenter - spacing: 8 + spacing: Theme.dp(8) StatusContactRequestsIndicatorListItem { anchors.horizontalCenter: parent.horizontalCenter @@ -174,7 +174,7 @@ StatusAppThreePanelLayout { StatusMenuItem { text: "Leave Chat" icon.name: "arrow-right" - icon.width: 14 + icon.width: Theme.dp(14) iconRotation: 180 type: StatusMenuItem.Type.Danger } diff --git a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml index a9f4e23d..40abfaa7 100644 --- a/sandbox/demoapp/StatusAppCommunitiesPortalView.qml +++ b/sandbox/demoapp/StatusAppCommunitiesPortalView.qml @@ -21,11 +21,11 @@ ScrollView { property ListModel tagsModel: Models.tagsModel property string searchText: "" - property int layoutVMargin: 70 - property int layoutHMargin: 64 - property int titlePixelSize: 28 - property int subtitlePixelSize: 17 - property int stylePadding: 16 + property int layoutVMargin: Theme.dp(70) + property int layoutHMargin: Theme.dp(64) + property int titlePixelSize: Theme.dp(28) + property int subtitlePixelSize: Theme.dp(17) + property int stylePadding: Theme.dp(16) function navigateToCommunity(communityId) { console.info("Clicked community ID: " + communityId) @@ -38,7 +38,7 @@ ScrollView { ColumnLayout { id: column - spacing: 18 + spacing: Theme.dp(18) StatusBaseText { Layout.topMargin: d.layoutVMargin @@ -55,7 +55,7 @@ ScrollView { visible: d.tagsModel.count > 0 Layout.leftMargin: d.layoutHMargin Layout.rightMargin: d.layoutHMargin - width: 1234 // by design + width: Theme.dp(1234) // by design spacing: d.stylePadding/2 Repeater { @@ -63,16 +63,16 @@ ScrollView { delegate: StatusListItemTag { border.color: Theme.palette.baseColor2 color: "transparent" - height: 32 - radius: 36 + height: Theme.dp(32) + radius: Theme.dp(36) closeButtonVisible: false icon.emoji: model.emoji - icon.height: 32 - icon.width: icon.height + icon.height: Theme.dp(32) + icon.width: icon.heights icon.color: "transparent" icon.isLetterIdenticon: true title: model.name - titleText.font.pixelSize: 15 + titleText.font.pixelSize: Theme.dp(15) titleText.color: Theme.palette.primaryColor1 } } @@ -80,7 +80,7 @@ ScrollView { StatusBaseText { Layout.leftMargin: d.layoutHMargin - Layout.topMargin: 20 + Layout.topMargin: Theme.dp(20) text: qsTr("Featured") font.weight: Font.Bold font.pixelSize: d.subtitlePixelSize @@ -119,7 +119,7 @@ ScrollView { StatusBaseText { Layout.leftMargin: d.layoutHMargin - Layout.topMargin: 20 + Layout.topMargin: Theme.dp(20) text: qsTr("Popular") font.weight: Font.Bold font.pixelSize: d.subtitlePixelSize diff --git a/sandbox/demoapp/StatusAppCommunityView.qml b/sandbox/demoapp/StatusAppCommunityView.qml index d39f1287..4117d5d2 100644 --- a/sandbox/demoapp/StatusAppCommunityView.qml +++ b/sandbox/demoapp/StatusAppCommunityView.qml @@ -63,7 +63,7 @@ StatusAppThreePanelLayout { id: scrollView anchors.top: statusChatInfoToolBar.bottom - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.bottom: parent.bottom width: leftPanel.width @@ -73,7 +73,7 @@ StatusAppThreePanelLayout { StatusChatListAndCategories { id: communityCategories 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 draggableCategories: false @@ -248,21 +248,21 @@ StatusAppThreePanelLayout { anchors.topMargin:16 anchors.left: parent.left 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) - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) text: qsTr("Members") } ListView { anchors.top: titleText.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.right: parent.right - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) anchors.bottom: parent.bottom - anchors.bottomMargin: 16 + anchors.bottomMargin: Theme.dp(16) boundsBehavior: Flickable.StopAtBounds model: Models.membersListModel delegate: StatusMemberListItem { diff --git a/sandbox/demoapp/StatusAppProfileSettingsView.qml b/sandbox/demoapp/StatusAppProfileSettingsView.qml index 7303136c..00624a24 100644 --- a/sandbox/demoapp/StatusAppProfileSettingsView.qml +++ b/sandbox/demoapp/StatusAppProfileSettingsView.qml @@ -16,14 +16,14 @@ StatusAppTwoPanelLayout { StatusNavigationPanelHeadline { id: profileHeadline anchors.top: parent.top - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.horizontalCenter: parent.horizontalCenter text: "Profile" } ScrollView { anchors.top: profileHeadline.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.bottom: parent.bottom width: parent.width @@ -34,7 +34,7 @@ StatusAppTwoPanelLayout { Column { id: profileMenuItems anchors.horizontalCenter: parent.horizontalCenter - spacing: 4 + spacing: Theme.dp(4) Repeater { model: Models.demoProfileGeneralMenuItems @@ -56,7 +56,7 @@ StatusAppTwoPanelLayout { Item { id: invisibleSeparator - height: 16 + height: Theme.dp(16) width: parent.width } diff --git a/sandbox/main.qml b/sandbox/main.qml index f80da55a..ae4bf93c 100644 --- a/sandbox/main.qml +++ b/sandbox/main.qml @@ -13,15 +13,14 @@ import StatusQ.Controls 0.1 import StatusQ.Components 0.1 import StatusQ.Layout 0.1 import StatusQ.Platform 0.1 +import StatusQ.Core.Utils 0.1 import "demoapp/data" 1.0 StatusWindow { id: rootWindow - width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width - : 1224 - height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height - :840 + width: Theme.screenWidth + height: Theme.screenHeight visible: true 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 { id: appLayout anchors.fill: parent @@ -81,7 +85,7 @@ StatusWindow { badge.value: model.notificationsCount badge.visible: model.hasNotification badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor - badge.border.width: 2 + badge.border.width: Theme.dp(2) onClicked: { stackView.clear() if(model.sectionType === appSectionType.apiDocumentation) @@ -106,9 +110,9 @@ StatusWindow { ThemeSwitch { anchors.top: parent.top - anchors.topMargin: 32 + anchors.topMargin: Theme.dp(32) anchors.right: parent.right - anchors.rightMargin: 32 + anchors.rightMargin: Theme.dp(32) lightThemeEnabled: storeSettings.lightTheme onLightThemeEnabledChanged: { Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme @@ -138,13 +142,13 @@ StatusWindow { anchors.top: parent.top anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter - contentHeight: navigation.height + 56 + contentHeight: navigation.height + Theme.dp(56) contentWidth: navigation.width clip: true Column { id: navigation anchors.top: parent.top - anchors.topMargin: 48 + anchors.topMargin: Theme.dp(48) anchors.horizontalCenter: parent.horizontalCenter spacing: 0 @@ -338,7 +342,7 @@ StatusWindow { ScrollView { visible: !storeSettings.fillPage anchors.fill: parent - anchors.topMargin: 64 + anchors.topMargin: Theme.dp(64) contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor contentWidth: (pageWrapper.width * rootWindow.factor) clip: true @@ -367,7 +371,7 @@ StatusWindow { Loader { active: storeSettings.fillPage anchors.fill: parent - anchors.topMargin: 64 + anchors.topMargin: Theme.dp(64) visible: storeSettings.fillPage clip: true @@ -411,12 +415,12 @@ StatusWindow { id: platformSwitch anchors.left: demoApp.left anchors.bottom: demoApp.top - anchors.bottomMargin: 20 - spacing: 2 + anchors.bottomMargin: Theme.dp(20) + spacing: Theme.dp(2) Text { text: "OSX" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.verticalCenter: parent.verticalCenter } @@ -432,7 +436,7 @@ StatusWindow { Text { text: "Win" - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.verticalCenter: parent.verticalCenter } } @@ -444,8 +448,8 @@ StatusWindow { anchors.fill: demoApp source: demoApp horizontalOffset: 0 - verticalOffset: 5 - radius: 20 + verticalOffset: Theme.dp(5) + radius: Theme.dp(20) samples: 20 color: "#22000000" } @@ -455,7 +459,7 @@ StatusWindow { StatusMacTrafficLights { anchors.left: parent.left anchors.top: parent.top - anchors.margins: 13 + anchors.margins: Theme.dp(13) visible: Qt.platform.os == "osx" diff --git a/sandbox/pages/StatusAccountSelectorPage.qml b/sandbox/pages/StatusAccountSelectorPage.qml index ab1bce46..c0e14546 100644 --- a/sandbox/pages/StatusAccountSelectorPage.qml +++ b/sandbox/pages/StatusAccountSelectorPage.qml @@ -7,10 +7,10 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 - +import StatusQ.Core.Utils 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusAccountSelector { id: accountSelector diff --git a/sandbox/pages/StatusAddressPage.qml b/sandbox/pages/StatusAddressPage.qml index 544e2985..5ea015cc 100644 --- a/sandbox/pages/StatusAddressPage.qml +++ b/sandbox/pages/StatusAddressPage.qml @@ -2,6 +2,7 @@ import QtQuick 2.14 import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 +import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 import Sandbox 0.1 @@ -14,7 +15,7 @@ Column { } Item { - width: 200 + width: Theme.dp(200) height: childrenRect.height StatusAddress { text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9" diff --git a/sandbox/pages/StatusChatInfoToolBarPage.qml b/sandbox/pages/StatusChatInfoToolBarPage.qml index f22e3c44..4915fa6d 100644 --- a/sandbox/pages/StatusChatInfoToolBarPage.qml +++ b/sandbox/pages/StatusChatInfoToolBarPage.qml @@ -8,8 +8,8 @@ import StatusQ.Popups 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" diff --git a/sandbox/pages/StatusColorSelectorGridPage.qml b/sandbox/pages/StatusColorSelectorGridPage.qml index e1d73255..0540ebac 100644 --- a/sandbox/pages/StatusColorSelectorGridPage.qml +++ b/sandbox/pages/StatusColorSelectorGridPage.qml @@ -6,20 +6,20 @@ import StatusQ.Core.Theme 0.1 Item { id: root - width: 800 - height: 100 + width: Theme.dp(800) + height: Theme.dp(100) Row { id: selectedColor anchors.top: parent.top anchors.left: colorSelectionGrid.left - spacing: 10 + spacing: Theme.dp(10) StatusBaseText { text: "SelectedColor is" } Rectangle { - width: 100 - height: 20 + width: Theme.dp(100) + height: Theme.dp(20) radius: width/2 color: colorSelectionGrid.selectedColor } @@ -28,7 +28,7 @@ Item { StatusColorSelectorGrid { id: colorSelectionGrid anchors.top: selectedColor.bottom - anchors.topMargin: 10 + anchors.topMargin: Theme.dp(10) anchors.horizontalCenter: parent.horizontalCenter titleText: "COLOR" selectedColorIndex: 2 diff --git a/sandbox/pages/StatusColorSelectorPage.qml b/sandbox/pages/StatusColorSelectorPage.qml index 01f56c2a..0989a256 100644 --- a/sandbox/pages/StatusColorSelectorPage.qml +++ b/sandbox/pages/StatusColorSelectorPage.qml @@ -9,7 +9,7 @@ import StatusQ.Controls 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusColorSelector { model: ["red", "blue", "green"] diff --git a/sandbox/pages/StatusColorSpacePage.qml b/sandbox/pages/StatusColorSpacePage.qml index af543486..b207baf5 100644 --- a/sandbox/pages/StatusColorSpacePage.qml +++ b/sandbox/pages/StatusColorSpacePage.qml @@ -90,14 +90,14 @@ Item { Rectangle { color: colorSpace.color - implicitHeight: 48 - radius: 10 + implicitHeight: Theme.dp(48) + radius: Theme.dp(10) Layout.fillWidth: true StatusBaseText { anchors.centerIn: parent color: Theme.palette.white - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) text: "Quick brown fox jumps over the lazy dog" } } diff --git a/sandbox/pages/StatusCommunityCardPage.qml b/sandbox/pages/StatusCommunityCardPage.qml index 74b2268e..b6346c17 100644 --- a/sandbox/pages/StatusCommunityCardPage.qml +++ b/sandbox/pages/StatusCommunityCardPage.qml @@ -2,6 +2,7 @@ import QtQuick 2.0 import QtQuick.Layouts 1.13 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 import "../demoapp/data" 1.0 @@ -17,8 +18,8 @@ GridLayout { Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter columns: 2 - columnSpacing: 28 - rowSpacing: 28 + columnSpacing: Theme.dp(28) + rowSpacing: Theme.dp(28) Repeater { model: Models.curatedCommunitiesModel diff --git a/sandbox/pages/StatusCommunityTagsPage.qml b/sandbox/pages/StatusCommunityTagsPage.qml index b38614c2..212e759e 100644 --- a/sandbox/pages/StatusCommunityTagsPage.qml +++ b/sandbox/pages/StatusCommunityTagsPage.qml @@ -27,9 +27,9 @@ Item { ColumnLayout { id: column anchors.centerIn: parent - width: 600 - height: 500 - spacing: 20 + width: Theme.dp(600) + height: Theme.dp(500) + spacing: Theme.dp(20) StatusInput { id: tagsFilter @@ -55,14 +55,14 @@ Item { RowLayout { StatusBaseText { text: qsTr("Selected tags") - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) Layout.fillWidth: true } StatusBaseText { text: cntSelectedTags + "/" + maxSelectedTags color: Theme.palette.baseColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) } } @@ -80,4 +80,4 @@ Item { Layout.fillHeight: true } } -} \ No newline at end of file +} diff --git a/sandbox/pages/StatusExpandableSettingsItemPage.qml b/sandbox/pages/StatusExpandableSettingsItemPage.qml index 9af00c48..591b29cf 100644 --- a/sandbox/pages/StatusExpandableSettingsItemPage.qml +++ b/sandbox/pages/StatusExpandableSettingsItemPage.qml @@ -5,15 +5,15 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 Column { - spacing: 12 - width: 800 + spacing: Theme.dp(12) + width: Theme.dp(800) anchors.top:parent.top - leftPadding: 20 - rightPadding: 20 + leftPadding: Theme.dp(20) + rightPadding: Theme.dp(20) Rectangle { width: parent.width - height: 30 + height: Theme.dp(30) color: Theme.palette.baseColor2 StatusBaseText { anchors.verticalCenter: parent.verticalCenter @@ -60,7 +60,7 @@ Column { Rectangle { width: parent.width - height: 30 + height: Theme.dp(30) color: Theme.palette.baseColor2 StatusBaseText { anchors.verticalCenter: parent.verticalCenter @@ -103,7 +103,7 @@ Column { Rectangle { width: parent.width - height: 30 + height: Theme.dp(30) color: Theme.palette.baseColor2 StatusBaseText { anchors.verticalCenter: parent.verticalCenter @@ -134,15 +134,15 @@ Column { id: notImplemented Rectangle { anchors.centerIn: parent - width: 654 + width: Theme.dp(654) height: infoText.implicitHeight color: Theme.palette.baseColor5 StatusBaseText { id: infoText anchors.centerIn: parent color: Theme.palette.directColor4 - font.pixelSize: 15 - lineHeight: 22 + font.pixelSize: Theme.dp(15) + lineHeight: Theme.dp(22) lineHeightMode: Text.FixedHeight font.weight: Font.Medium text: qsTr("Not Implemented") diff --git a/sandbox/pages/StatusInputPage.qml b/sandbox/pages/StatusInputPage.qml index a5a12f51..c44300b6 100644 --- a/sandbox/pages/StatusInputPage.qml +++ b/sandbox/pages/StatusInputPage.qml @@ -9,7 +9,7 @@ import StatusQ.Controls.Validators 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusInput { input.placeholderText: "Placeholder" @@ -58,17 +58,17 @@ Column { } Item { - implicitWidth: 480 - implicitHeight: 82 + implicitWidth: Theme.dp(480) + implicitHeight: Theme.dp(82) z: 100000 StatusSeedPhraseInput { id: statusSeedInput anchors.left: parent.left anchors.right: parent.right height: parent.height - textEdit.input.anchors.leftMargin: 16 - textEdit.input.anchors.rightMargin: 16 - textEdit.input.anchors.topMargin: 11 + textEdit.input.anchors.leftMargin: Theme.dp(16) + textEdit.input.anchors.rightMargin: Theme.dp(16) + textEdit.input.anchors.topMargin: Theme.dp(11) textEdit.label: "Input with drop down selection list" leftComponentText: "1" inputList: ListModel { @@ -97,8 +97,8 @@ Column { StatusInput { label: "StatusInput" secondaryLabel: "with right icon" - input.icon.width: 15 - input.icon.height: 11 + input.icon.width: Theme.dp(15) + input.icon.height: Theme.dp(11) input.icon.name: text !== "" ? "checkmark" : "" input.leftIcon: false } @@ -107,7 +107,7 @@ Column { label: "Label" secondaryLabel: "secondary label" input.placeholderText: "Placeholder" - input.implicitHeight: 56 + input.implicitHeight: Theme.dp(56) } StatusInput { @@ -148,7 +148,7 @@ Column { input.placeholderText: "Input width component (right side)" input.rightComponent: StatusIcon { icon: "cancel" - height: 16 + height: Theme.dp(16) color: Theme.palette.dangerColor1 } } @@ -162,14 +162,14 @@ Column { StatusInput { input.multiline: true input.placeholderText: "Multiline with static height" - input.implicitHeight: 100 + input.implicitHeight: Theme.dp(100) } StatusInput { input.multiline: true input.placeholderText: "Multiline with max/min" - input.minimumHeight: 80 - input.maximumHeight: 200 + input.minimumHeight: Theme.dp(80) + input.maximumHeight: Theme.dp(200) } StatusInput { @@ -200,6 +200,7 @@ Column { StatusInput { label: "Input with inline token selector" input.leftComponent: StatusTokenInlineSelector { + anchors.verticalCenter: parent.verticalCenter tokens: [{amount: 0.1, token: "ETH"}, {amount: 10, token: "SNT"}, {amount: 15, token: "MANA"}] diff --git a/sandbox/pages/StatusListPickerPage.qml b/sandbox/pages/StatusListPickerPage.qml index e0de9256..7c9d03f0 100644 --- a/sandbox/pages/StatusListPickerPage.qml +++ b/sandbox/pages/StatusListPickerPage.qml @@ -11,14 +11,14 @@ import "../demoapp/data" 1.0 GridLayout { id: root columns: 1 - rowSpacing: 150 + rowSpacing: Theme.dp(150) GridLayout { Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter rows: 4 columns: 2 - rowSpacing: 170 - columnSpacing: 150 + rowSpacing: Theme.dp(170) + columnSpacing: Theme.dp(150) z: 100 StatusListPicker { id: languagePicker @@ -56,15 +56,15 @@ GridLayout { StatusBaseText { id: pageDesc Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter - height: 100 - width: 500 + height: Theme.dp(100) + width: Theme.dp(500) text: "4 different configurations for the `StatusListPicker` component:\n * Single selection. \n * Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n * Multiple selection.\n * Multiple selection and displayed name is the symbol + shortName\n" color: Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } // Outsite area diff --git a/sandbox/pages/StatusMacNotificationPage.qml b/sandbox/pages/StatusMacNotificationPage.qml index 7c6614f1..3f3eda26 100644 --- a/sandbox/pages/StatusMacNotificationPage.qml +++ b/sandbox/pages/StatusMacNotificationPage.qml @@ -3,11 +3,12 @@ import QtQuick.Controls 2.14 import QtQuick.Layouts 1.14 import StatusQ.Platform 0.1 +import StatusQ.Core.Theme 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusMacNotification { name: "Some name" diff --git a/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml b/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml index 40acd14c..fe866b15 100644 --- a/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml +++ b/sandbox/pages/StatusPasswordStrengthIndicatorPage.qml @@ -1,10 +1,11 @@ import QtQuick.Layouts 1.14 import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusPasswordStrengthIndicator { id: veryweakPw diff --git a/sandbox/pages/StatusPinInputPage.qml b/sandbox/pages/StatusPinInputPage.qml index c4143889..56aaa26d 100644 --- a/sandbox/pages/StatusPinInputPage.qml +++ b/sandbox/pages/StatusPinInputPage.qml @@ -8,7 +8,7 @@ import StatusQ.Controls.Validators 0.1 Column { id: root - spacing: 25 + spacing: Theme.dp(25) Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter // PIN input that accepts only numbers @@ -16,7 +16,7 @@ Column { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.directColor1 text: "Enter Keycard PIN" - font.pixelSize: 30 + font.pixelSize: Theme.dp(30) font.bold: true } @@ -30,23 +30,23 @@ Column { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.dangerColor1 text: "Only numbers allowed" - font.pixelSize: 16 + font.pixelSize: Theme.dp(16) } StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.directColor1 text: "Introduced PIN: " + numbersPinInput.pinInput - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) } // PIN input that accepts input depending on the regular expression definition StatusBaseText { - topPadding: 100 + topPadding: Theme.dp(100) anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.directColor1 text: "Enter another Keycard PIN" - font.pixelSize: 30 + font.pixelSize: Theme.dp(30) font.bold: true } @@ -54,8 +54,8 @@ Column { id: regexPinInput anchors.horizontalCenter: parent.horizontalCenter validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ } - circleDiameter: 22 - circleSpacing: 22 + circleDiameter: Theme.dp(22) + circleSpacing: Theme.dp(22) pinLen: 7 } @@ -63,13 +63,13 @@ Column { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.dangerColor1 text: "Only alphanumeric characters and '@' allowed" - font.pixelSize: 16 + font.pixelSize: Theme.dp(16) } StatusBaseText { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.directColor1 text: "Introduced PIN: " + regexPinInput.pinInput - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) } } diff --git a/sandbox/pages/StatusPopupMenuPage.qml b/sandbox/pages/StatusPopupMenuPage.qml index dda229fa..9cb98079 100644 --- a/sandbox/pages/StatusPopupMenuPage.qml +++ b/sandbox/pages/StatusPopupMenuPage.qml @@ -9,8 +9,8 @@ import StatusQ.Popups 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusButton { text: "Simple" diff --git a/sandbox/pages/StatusSelectPage.qml b/sandbox/pages/StatusSelectPage.qml index f9a38e7c..92e8c8ec 100644 --- a/sandbox/pages/StatusSelectPage.qml +++ b/sandbox/pages/StatusSelectPage.qml @@ -9,7 +9,7 @@ import StatusQ.Popups 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusSelect { id: select diff --git a/sandbox/pages/StatusTabBarButtonPage.qml b/sandbox/pages/StatusTabBarButtonPage.qml index 08b72729..0426536e 100644 --- a/sandbox/pages/StatusTabBarButtonPage.qml +++ b/sandbox/pages/StatusTabBarButtonPage.qml @@ -7,7 +7,7 @@ import StatusQ.Controls 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusTabBar { StatusTabButton { diff --git a/sandbox/pages/StatusTabBarIconButtonPage.qml b/sandbox/pages/StatusTabBarIconButtonPage.qml index 89bd043f..81103b21 100644 --- a/sandbox/pages/StatusTabBarIconButtonPage.qml +++ b/sandbox/pages/StatusTabBarIconButtonPage.qml @@ -9,7 +9,7 @@ import StatusQ.Controls 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) Row { StatusTabBarIconButton { diff --git a/sandbox/pages/StatusTabSwitchPage.qml b/sandbox/pages/StatusTabSwitchPage.qml index 22c96f24..169593a8 100644 --- a/sandbox/pages/StatusTabSwitchPage.qml +++ b/sandbox/pages/StatusTabSwitchPage.qml @@ -3,11 +3,12 @@ import QtQuick.Layouts 1.14 import QtQuick.Controls 2.13 import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 GridLayout { columns: 1 - columnSpacing: 5 - rowSpacing: 5 + columnSpacing: Theme.dp(5) + rowSpacing: Theme.dp(5) StatusSwitchTabBar { StatusSwitchTabButton { diff --git a/sandbox/pages/StatusTagSelectorPage.qml b/sandbox/pages/StatusTagSelectorPage.qml index 3b778d2c..98a40722 100644 --- a/sandbox/pages/StatusTagSelectorPage.qml +++ b/sandbox/pages/StatusTagSelectorPage.qml @@ -1,6 +1,7 @@ import QtQuick 2.14 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 Item { id: root @@ -56,8 +57,8 @@ Item { StatusTagSelector { id: tagSelector - width: 650 - height: 44 + width: Theme.dp(650) + height: Theme.dp(44) anchors.centerIn: parent namesModel: root.asortedContacts toLabelText: qsTr("To: ") diff --git a/sandbox/pages/StatusToastMessagePage.qml b/sandbox/pages/StatusToastMessagePage.qml index f24aeb9f..decb4276 100644 --- a/sandbox/pages/StatusToastMessagePage.qml +++ b/sandbox/pages/StatusToastMessagePage.qml @@ -1,6 +1,7 @@ import QtQuick 2.14 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 Item { id: root @@ -9,7 +10,7 @@ Item { Column { id: toastArea anchors.centerIn: parent - spacing: 8 + spacing: Theme.dp(8) Repeater { id: toastRepeater width: parent.width diff --git a/sandbox/pages/StatusWalletColorButtonPage.qml b/sandbox/pages/StatusWalletColorButtonPage.qml index 41f8b7be..eb7d6c6f 100644 --- a/sandbox/pages/StatusWalletColorButtonPage.qml +++ b/sandbox/pages/StatusWalletColorButtonPage.qml @@ -11,7 +11,7 @@ Column { spacing: 8 Row { - spacing: 4 + spacing: Theme.dp(4) StatusWalletColorButton { icon.color: Theme.palette.miscColor1 selected: true diff --git a/sandbox/pages/StatusWalletColorSelectPage.qml b/sandbox/pages/StatusWalletColorSelectPage.qml index af2d5f4b..eb93a49d 100644 --- a/sandbox/pages/StatusWalletColorSelectPage.qml +++ b/sandbox/pages/StatusWalletColorSelectPage.qml @@ -9,7 +9,7 @@ import StatusQ.Controls 0.1 import Sandbox 0.1 Column { - spacing: 8 + spacing: Theme.dp(8) StatusWalletColorSelect { model: Theme.palette.userCustomizationColors diff --git a/sandbox/pages/StatusWizardStepperPage.qml b/sandbox/pages/StatusWizardStepperPage.qml index 14cba9de..b7bfeeaa 100644 --- a/sandbox/pages/StatusWizardStepperPage.qml +++ b/sandbox/pages/StatusWizardStepperPage.qml @@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1 Item { id: root - width: 800 - height: 100 + width: Theme.dp(800) + height: Theme.dp(100) //Simulate animation between steps property bool stepsCompleted: false @@ -44,7 +44,7 @@ Item { anchors.horizontalCenter: parent.horizontalCenter color: Theme.palette.directColor1 text: "Press Ctrl+R to run the animation" - font.pixelSize: 17 + font.pixelSize: Theme.dp(17) } SequentialAnimation { @@ -91,9 +91,9 @@ Item { StatusWizardStepper { id: wizardStepper - width: (parent.width - 50) + width: (parent.width - Theme.dp(50)) anchors.top: indicLabel.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.horizontalCenter: parent.horizontalCenter stepsModel: stepsListModel } diff --git a/src/StatusQ/Components/StatusAddress.qml b/src/StatusQ/Components/StatusAddress.qml index 4918859e..7eb8d83b 100644 --- a/src/StatusQ/Components/StatusAddress.qml +++ b/src/StatusQ/Components/StatusAddress.qml @@ -13,7 +13,7 @@ StatusBaseText { property real maxWidth: width font.family: Theme.palette.monoFont.name - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) elide: Text.ElideMiddle color: Theme.palette.baseColor1 diff --git a/src/StatusQ/Components/StatusBadge.qml b/src/StatusQ/Components/StatusBadge.qml index bee30d40..97568c55 100644 --- a/src/StatusQ/Components/StatusBadge.qml +++ b/src/StatusQ/Components/StatusBadge.qml @@ -7,18 +7,18 @@ Rectangle { 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: { - if (statusBadge.value > 99) { - return 28 + statusBadge.border.width + if (statusBadge.value > Theme.dp(99)) { + return Theme.dp(28) + statusBadge.border.width } - if (statusBadge.value > 9) { - return 26 + statusBadge.border.width + if (statusBadge.value > Theme.dp(9)) { + return Theme.dp(26) + statusBadge.border.width } 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 color: Theme.palette.primaryColor1 @@ -26,7 +26,7 @@ Rectangle { StatusBaseText { id: value 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 color: Theme.palette.statusBadge.foregroundColor anchors.centerIn: parent diff --git a/src/StatusQ/Components/StatusChatInfoToolBar.qml b/src/StatusQ/Components/StatusChatInfoToolBar.qml index df293bde..26fdfb9f 100644 --- a/src/StatusQ/Components/StatusChatInfoToolBar.qml +++ b/src/StatusQ/Components/StatusChatInfoToolBar.qml @@ -3,12 +3,13 @@ import QtGraphicalEffects 1.13 import StatusQ.Components 0.1 import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 +import StatusQ.Core.Theme 0.1 Item { id: statusChatInfoToolBar - implicitWidth: 288 - implicitHeight: 56 + implicitWidth: Theme.dp(288) + implicitHeight: Theme.dp(56) property alias chatInfoButton: statusChatInfoButton property alias menuButton: statusMenuButton @@ -27,7 +28,7 @@ Item { id: statusChatInfoButton anchors.verticalCenter: parent.verticalCenter 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 type: StatusChatInfoButton.Type.OneToOneChat onClicked: statusChatInfoToolBar.chatInfoButtonClicked() @@ -39,8 +40,8 @@ Item { anchors.verticalCenter: parent.verticalCenter visible: popupMenuSlot.active - width: visible ? 32 : 0 - height: 32 + width: visible ? Theme.dp(32) : 0 + height: Theme.dp(32) type: StatusRoundButton.Type.Secondary icon.name: "add" @@ -89,7 +90,7 @@ Item { onClicked: { statusChatInfoToolBar.addButtonClicked(mouse) 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 { diff --git a/src/StatusQ/Components/StatusChatList.qml b/src/StatusQ/Components/StatusChatList.qml index 8c4061e5..2b94a9f8 100644 --- a/src/StatusQ/Components/StatusChatList.qml +++ b/src/StatusQ/Components/StatusChatList.qml @@ -11,8 +11,8 @@ import StatusQ.Controls 0.1 Column { id: statusChatList - spacing: 4 - width: 288 + spacing: Theme.dp(4) + width: Theme.dp(288) property string categoryId: "" property var model: null diff --git a/src/StatusQ/Components/StatusChatListAndCategories.qml b/src/StatusQ/Components/StatusChatListAndCategories.qml index fb602ecc..54f88f47 100644 --- a/src/StatusQ/Components/StatusChatListAndCategories.qml +++ b/src/StatusQ/Components/StatusChatListAndCategories.qml @@ -6,6 +6,7 @@ import StatusQ.Core.Utils 0.1 import StatusQ.Components 0.1 import StatusQ.Popups 0.1 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 Item { id: statusChatListAndCategories @@ -64,7 +65,7 @@ Item { anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter - spacing: 4 + spacing: Theme.dp(4) StatusChatList { id: statusChatList diff --git a/src/StatusQ/Components/StatusChatListCategoryItem.qml b/src/StatusQ/Components/StatusChatListCategoryItem.qml index 55a75d11..f556a922 100644 --- a/src/StatusQ/Components/StatusChatListCategoryItem.qml +++ b/src/StatusQ/Components/StatusChatListCategoryItem.qml @@ -8,11 +8,11 @@ import StatusQ.Components 0.1 StatusListItem { id: statusChatListCategoryItem - implicitWidth: 288 - implicitHeight: 28 + implicitWidth: Theme.dp(288) + implicitHeight: Theme.dp(28) - leftPadding: 8 - rightPadding: 8 + leftPadding: Theme.dp(8) + rightPadding: Theme.dp(8) property bool opened: true property bool highlighted: false @@ -32,13 +32,13 @@ StatusListItem { statusListItemTitle.color: Theme.palette.directColor4 statusListItemTitle.font.weight: Font.Medium - statusListItemComponentsSlot.spacing: 1 + statusListItemComponentsSlot.spacing: Theme.dp(1) components: [ StatusChatListCategoryItemButton { id: addButton icon.name: "add" - icon.width: 20 + icon.width: Theme.dp(20) visible: statusChatListCategoryItem.showAddButton && (statusChatListCategoryItem.highlighted || statusChatListCategoryItem.sensor.containsMouse) @@ -48,7 +48,7 @@ StatusListItem { StatusChatListCategoryItemButton { id: menuButton icon.name: "more" - icon.width: 21 + icon.width: Theme.dp(21) visible: statusChatListCategoryItem.showMenuButton && (statusChatListCategoryItem.highlighted || statusChatListCategoryItem.sensor.containsMouse) @@ -58,7 +58,7 @@ StatusListItem { StatusChatListCategoryItemButton { id: toggleButton icon.name: "chevron-down" - icon.width: 18 + icon.width: Theme.dp(18) icon.rotation: statusChatListCategoryItem.opened ? 0 : 270 onPressed: { sensor.enabled = false; diff --git a/src/StatusQ/Components/StatusChatListItem.qml b/src/StatusQ/Components/StatusChatListItem.qml index ccf17d5e..0febb393 100644 --- a/src/StatusQ/Components/StatusChatListItem.qml +++ b/src/StatusQ/Components/StatusChatListItem.qml @@ -22,12 +22,12 @@ Rectangle { property int notificationsCount: 0 property bool muted: false property StatusImageSettings image: StatusImageSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) } property StatusIconSettings icon: StatusIconSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) color: Theme.palette.miscColor5 emoji: "" charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1 @@ -53,10 +53,10 @@ Rectangle { CommunityChat // 6 } - implicitWidth: 288 - implicitHeight: 40 + implicitWidth: Theme.dp(288) + implicitHeight: Theme.dp(40) - radius: 8 + radius: Theme.dp(8) color: { if (selected) { @@ -93,10 +93,10 @@ Rectangle { StatusIcon { id: statusIcon anchors.left: identicon.right - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.verticalCenter: parent.verticalCenter - width: 14 + width: Theme.dp(14) visible: root.type !== StatusChatListItem.Type.OneToOneChat opacity: { if (root.muted && !hoverHander.hovered && !root.highlighted) { @@ -133,7 +133,7 @@ Rectangle { anchors.leftMargin: statusIcon.visible ? 1 : 8 anchors.right: mutedIcon.visible ? mutedIcon.left : statusBadge.visible ? statusBadge.left : parent.right - anchors.rightMargin: 6 + anchors.rightMargin: Theme.dp(6) anchors.verticalCenter: parent.verticalCenter text: (root.type === StatusChatListItem.Type.PublicChat && @@ -158,7 +158,7 @@ Rectangle { root.notificationsCount > 0 || root.highlightWhenCreated || statusBadge.visible) ? Font.Bold : Font.Medium - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } StatusIcon { @@ -166,7 +166,7 @@ Rectangle { anchors.right: statusBadge.visible ? statusBadge.left : parent.right anchors.rightMargin: 8 anchors.verticalCenter: parent.verticalCenter - width: 14 + width: Theme.dp(14) opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2 icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white" visible: root.muted @@ -190,10 +190,10 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1 - border.width: 4 + border.width: Theme.dp(4) border.color: color value: root.notificationsCount visible: root.notificationsCount > 0 diff --git a/src/StatusQ/Components/StatusChatToolBar.qml b/src/StatusQ/Components/StatusChatToolBar.qml index 7e7c74c8..cf74726a 100644 --- a/src/StatusQ/Components/StatusChatToolBar.qml +++ b/src/StatusQ/Components/StatusChatToolBar.qml @@ -13,7 +13,7 @@ Item { property alias membersButton: membersButton property alias searchButton: searchButton - property int padding: 8 + property int padding: Theme.dp(8) property int notificationCount: 0 property Component popupMenu property var toolbarComponent @@ -24,8 +24,8 @@ Item { signal membersButtonClicked() signal searchButtonClicked() - implicitWidth: 518 - implicitHeight: 60 + implicitWidth: Theme.dp(518) + implicitHeight: Theme.dp(60) onPopupMenuChanged: { if (!!popupMenu) { @@ -55,8 +55,8 @@ Item { StatusFlatRoundButton { id: searchButton - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "search" type: StatusFlatRoundButton.Type.Secondary onClicked: statusChatToolBar.searchButtonClicked() @@ -64,13 +64,13 @@ Item { // initializing the tooltip tooltip.text: qsTr("Search") tooltip.orientation: StatusToolTip.Orientation.Bottom - tooltip.y: parent.height + 12 + tooltip.y: parent.height + Theme.dp(12) } StatusFlatRoundButton { id: membersButton - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "group-chat" type: StatusFlatRoundButton.Type.Secondary onClicked: statusChatToolBar.membersButtonClicked() @@ -83,8 +83,8 @@ Item { StatusFlatRoundButton { id: menuButton - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: "more" type: StatusFlatRoundButton.Type.Secondary visible: !!statusChatToolBar.popupMenu @@ -93,7 +93,7 @@ Item { tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened tooltip.text: qsTr("More") tooltip.orientation: StatusToolTip.Orientation.Bottom - tooltip.y: parent.height + 12 + tooltip.y: parent.height + Theme.dp(12) property bool showMoreMenu: false onClicked: { @@ -127,8 +127,8 @@ Item { } Rectangle { - height: 24 - width: 1 + height: Theme.dp(24) + width: Theme.dp(1) color: Theme.palette.directColor7 Layout.alignment: Qt.AlignVCenter visible: notificationButton.visible && diff --git a/src/StatusQ/Components/StatusColorSpace.qml b/src/StatusQ/Components/StatusColorSpace.qml index fc2df525..7fb3c964 100644 --- a/src/StatusQ/Components/StatusColorSpace.qml +++ b/src/StatusQ/Components/StatusColorSpace.qml @@ -54,8 +54,8 @@ Item { rootColor = Qt.hsva(color.hsvHue, 1, 1, 1) } - implicitWidth: 340 - implicitHeight: 340 + implicitWidth: Theme.dp(340) + implicitHeight: Theme.dp(340) QtObject { id: d diff --git a/src/StatusQ/Components/StatusCommunityCard.qml b/src/StatusQ/Components/StatusCommunityCard.qml index e0996c58..b4dc8f1b 100644 --- a/src/StatusQ/Components/StatusCommunityCard.qml +++ b/src/StatusQ/Components/StatusCommunityCard.qml @@ -130,13 +130,13 @@ Rectangle { QtObject { id: d - property int cardWidth: 335 - property int bannerHeigth: 64 - property int cardHeigth: 190 - property int totalHeigth: 230 - property int margins: 12 - property int bannerRadius: 20 - property int cardRadius: 16 + property int cardWidth: Theme.dp(335) + property int bannerHeigth: Theme.dp(64) + property int cardHeigth: Theme.dp(190) + property int totalHeigth: Theme.dp(230) + property int margins: Theme.dp(12) + property int bannerRadius: Theme.dp(20) + property int cardRadius: Theme.dp(16) property color cardColor: Theme.palette.indirectColor1 property color fontColor: Theme.palette.directColor1 property color loadingColor1: Theme.palette.baseColor5 @@ -168,8 +168,8 @@ Rectangle { layer.effect: DropShadow { source: root horizontalOffset: 0 - verticalOffset: 2 - radius: sensor.containsMouse ? 30 : d.bannerRadius + verticalOffset: Theme.dp(2) + radius: sensor.containsMouse ? Theme.dp(30) : d.bannerRadius samples: 25 spread: 0 color: sensor.containsMouse ? Theme.palette.backdropColor : Theme.palette.dropShadow @@ -207,10 +207,10 @@ Rectangle { Rectangle { z: content.z + 1 anchors.top: parent.top - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.left: parent.left - anchors.leftMargin: 12 - width: 48 + anchors.leftMargin: Theme.dp(12) + width: Theme.dp(48) height: width radius: width / 2 color: root.loaded ? d.cardColor : d.loadingColor1 @@ -218,7 +218,7 @@ Rectangle { StatusRoundedImage { visible: root.loaded anchors.centerIn: parent - width: parent.width - 4 + width: parent.width - Theme.dp(4) height: width image.source: root.logo color: "transparent" @@ -231,7 +231,7 @@ Rectangle { z: banner.z + 1 visible: root.loaded anchors.top: parent.top - anchors.topMargin: 40 + anchors.topMargin: Theme.dp(40) width: d.cardWidth height: d.cardHeigth color: d.cardColor @@ -241,27 +241,27 @@ Rectangle { Rectangle { visible: root.isPrivate anchors.top: parent.top - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.right: parent.right anchors.rightMargin: anchors.topMargin - width: 48 - height: 24 + width: Theme.dp(48) + height: Theme.dp(24) color: d.loadingColor2 - radius: 200 + radius: Theme.dp(200) StatusIcon { anchors.verticalCenter: parent.verticalCenter anchors.leftMargin: 6 anchors.left: parent.left icon: "tiny/unlocked" - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) color: Theme.palette.baseColor1 } StatusRoundedImage { - anchors.rightMargin: 2 + anchors.rightMargin: Theme.dp(2) anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - width: 20 + width: Theme.dp(20) height: width image.source: root.tokenLogo color: "transparent" @@ -270,24 +270,24 @@ Rectangle { // Community info ColumnLayout { anchors.fill: parent - anchors.topMargin: 32 + anchors.topMargin: Theme.dp(32) anchors.leftMargin: d.margins anchors.rightMargin: d.margins anchors.bottomMargin: d.margins clip: true - spacing: 6 + spacing: Theme.dp(6) StatusBaseText { Layout.alignment: Qt.AlignVCenter text: root.name font.weight: Font.Bold - font.pixelSize: 19 + font.pixelSize: Theme.dp(19) color: d.fontColor } StatusBaseText { Layout.fillWidth: true Layout.fillHeight: true text: root.description - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) lineHeight: 1.2 color: d.fontColor maximumLineCount: 2 @@ -298,48 +298,48 @@ Rectangle { } ColumnLayout { anchors.fill: parent - anchors.topMargin: 116 + anchors.topMargin: Theme.dp(116) anchors.leftMargin: d.margins anchors.rightMargin: d.margins anchors.bottomMargin: d.margins clip: true - spacing: 18 + spacing: Theme.dp(18) Row { Layout.alignment: Qt.AlignVCenter - spacing: 20 + spacing: Theme.dp(20) // Members Row { height: membersTxt.height - spacing: 4 + spacing: Theme.dp(4) StatusIcon { anchors.verticalCenter: parent.verticalCenter icon: "tiny/members" - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) } StatusBaseText { id: membersTxt Layout.alignment: Qt.AlignVCenter text: d.numberFormat(root.members) - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: d.fontColor } } // Active users: Row { height: activeUsersTxt.height - spacing: 4 + spacing: Theme.dp(4) StatusIcon { anchors.verticalCenter: parent.verticalCenter icon: "tiny/flash" - width: 14 - height: 14 + width: Theme.dp(14) + height: Theme.dp(14) } StatusBaseText { id: activeUsersTxt Layout.alignment: Qt.AlignVCenter text: d.numberFormat(root.activeUsers) - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: d.fontColor } } @@ -349,7 +349,7 @@ Rectangle { visible: root.categories.count > 0 Layout.alignment: Qt.AlignVCenter Layout.fillWidth: true - spacing: 8 + spacing: Theme.dp(8) clip: true Repeater { @@ -357,16 +357,16 @@ Rectangle { delegate: StatusListItemTag { border.color: Theme.palette.baseColor2 color: "transparent" - height: 24 - radius: 20 + height: Theme.dp(24) + radius: Theme.dp(20) closeButtonVisible: false icon.emoji: model.emoji - icon.height: 24 + icon.height: Theme.dp(24) icon.width: icon.height icon.color: "transparent" icon.isLetterIdenticon: true title: model.name - titleText.font.pixelSize: 13 + titleText.font.pixelSize: Theme.dp(13) titleText.color: d.fontColor } } @@ -378,7 +378,7 @@ Rectangle { Rectangle { visible: !root.loaded anchors.top: parent.top - anchors.topMargin: 40 + anchors.topMargin: Theme.dp(40) width: d.cardWidth height: d.cardHeigth color: d.cardColor @@ -386,48 +386,48 @@ Rectangle { clip: true Rectangle { anchors.top: parent.top - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.right: parent.right anchors.rightMargin: anchors.topMargin - width: 48 - height: 24 + width: Theme.dp(48) + height: Theme.dp(24) color: d.loadingColor2 - radius: 200 + radius: Theme.dp(200) } ColumnLayout { anchors.fill: parent - anchors.topMargin: 32 + anchors.topMargin: Theme.dp(32) anchors.margins: d.margins clip: true - spacing: 9 + spacing: Theme.dp(9) Rectangle { - width: 84 - height: 16 + width: Theme.dp(84) + height: Theme.dp(16) color: d.loadingColor1 - radius: 5 + radius: Theme.dp(5) } Rectangle { - width: 311 - height: 16 + width: Theme.dp(311) + height: Theme.dp(16) color: d.loadingColor1 - radius: 5 + radius: Theme.dp(5) } Rectangle { - width: 271 - height: 16 + width: Theme.dp(271) + height: Theme.dp(16) color: d.loadingColor1 - radius: 5 + radius: Theme.dp(5) } Row { - Layout.topMargin: 22 - 9 - spacing: 16 + Layout.topMargin: Theme.dp(13) + spacing: Theme.dp(16) Repeater { model: 2 delegate: Row { - spacing: 4 + spacing: Theme.dp(4) Rectangle { - width: 14 - height: 14 + width: Theme.dp(14) + height: Theme.dp(14) color: d.loadingColor1 radius: width / 2 } @@ -441,16 +441,16 @@ Rectangle { } } Row { - Layout.topMargin: 21 - 9 - spacing: 8 + Layout.topMargin: Theme.dp(12) + spacing: Theme.dp(8) Repeater { model: 3 delegate: Rectangle { - width: 76 - height: 24 + width: Theme.dp(76) + height: Theme.dp(24) color: d.loadingColor2 - radius: 20 + radius: Theme.dp(20) } } } diff --git a/src/StatusQ/Components/StatusCommunityTags.qml b/src/StatusQ/Components/StatusCommunityTags.qml index ecde5406..a819f1fb 100644 --- a/src/StatusQ/Components/StatusCommunityTags.qml +++ b/src/StatusQ/Components/StatusCommunityTags.qml @@ -2,6 +2,7 @@ import QtQuick 2.14 import StatusQ.Core 0.1 import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 Item { id: root @@ -28,7 +29,7 @@ Item { } return Math.min(parent.width, itemsWidth); } - spacing: 10 + spacing: Theme.dp(10) Repeater { id: repeater @@ -38,11 +39,11 @@ Item { name: model.name visible: (root.showOnlySelected ? model.selected : !model.selected) && (filterString == 0 || name.toUpperCase().indexOf(filterString.toUpperCase()) !== -1) - width: visible ? implicitWidth : -10 + width: visible ? implicitWidth : -Theme.dp(10) height: visible ? implicitHeight : 0 removable: root.showOnlySelected && root.active onClicked: root.clicked(model) } } } -} \ No newline at end of file +} diff --git a/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml index fea1c02e..4edb5c88 100644 --- a/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml +++ b/src/StatusQ/Components/StatusContactRequestsIndicatorListItem.qml @@ -5,8 +5,8 @@ import StatusQ.Components 0.1 StatusListItem { id: statusContactRequestsListItem - implicitHeight: 64 - implicitWidth: 288 + implicitHeight: Theme.dp(64) + implicitWidth: Theme.dp(288) color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" @@ -17,7 +17,7 @@ StatusListItem { visible: statusContactRequestsListItem.requestsCount > 0 value: statusContactRequestsListItem.requestsCount anchors.verticalCenter: parent.verticalCenter - border.width: 4 + border.width: Theme.dp(4) border.color: color }, StatusIcon { diff --git a/src/StatusQ/Components/StatusContactVerificationIcons.qml b/src/StatusQ/Components/StatusContactVerificationIcons.qml index 25418531..3aa0eec6 100644 --- a/src/StatusQ/Components/StatusContactVerificationIcons.qml +++ b/src/StatusQ/Components/StatusContactVerificationIcons.qml @@ -15,8 +15,8 @@ Row { width: dummyImage.width height: dummyImage.height background: StatusIconBackgroundSettings { - width: 10 - height: 10 + width: Theme.dp(10) + height: Theme.dp(10) color: Theme.palette.primaryColor1 } // Only used to get implicit width and height from the actual image @@ -33,8 +33,8 @@ Row { width: dummyImage.width height: dummyImage.height background: StatusIconBackgroundSettings { - width: 10 - height: 10 + width: Theme.dp(10) + height: Theme.dp(10) color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1 } // Only used to get implicit width and height from the actual image @@ -50,7 +50,7 @@ Row { Untrustworthy //2 } - spacing: 4 + spacing: Theme.dp(4) visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None) StatusRoundIcon { diff --git a/src/StatusQ/Components/StatusDescriptionListItem.qml b/src/StatusQ/Components/StatusDescriptionListItem.qml index a970b6e6..dca3513a 100644 --- a/src/StatusQ/Components/StatusDescriptionListItem.qml +++ b/src/StatusQ/Components/StatusDescriptionListItem.qml @@ -11,16 +11,16 @@ Rectangle { property alias subTitleComponent: statusDescriptionListItemSubTitle property string value: "" property StatusIconSettings icon: StatusIconSettings { - width: 23 - height: 23 + width: Theme.dp(23) + height: Theme.dp(23) } property alias tooltip: statusToolTip property alias iconButton: statusFlatRoundButton property alias sensor: sensor - implicitWidth: 448 - implicitHeight: 56 - radius: 8 + implicitWidth: Theme.dp(448) + implicitHeight: Theme.dp(56) + radius: Theme.dp(8) color: Theme.palette.statusListItem.backgroundColor @@ -35,12 +35,12 @@ Rectangle { id: statusDescriptionListItemTitle anchors.top: parent.top anchors.left: parent.left - anchors.leftMargin: 16 - anchors.topMargin: 5 + anchors.leftMargin: Theme.dp(16) + anchors.topMargin: Theme.dp(5) color: Theme.palette.baseColor1 text: statusDescriptionListItem.title - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) font.weight: Font.Medium } @@ -48,12 +48,12 @@ Rectangle { id: statusDescriptionListItemSubTitle anchors.top: statusDescriptionListItemTitle.bottom anchors.left: parent.left - anchors.leftMargin: 16 - anchors.topMargin: 4 + anchors.leftMargin: Theme.dp(16) + anchors.topMargin: Theme.dp(4) text: statusDescriptionListItem.subTitle color: Theme.palette.directColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) font.weight: Font.Normal } @@ -62,10 +62,10 @@ Rectangle { visible: !!statusDescriptionListItem.icon.name anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter anchors.left: statusDescriptionListItemSubTitle.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) icon.name: statusDescriptionListItem.icon.name icon.width: statusDescriptionListItem.icon.width @@ -78,15 +78,15 @@ Rectangle { Row { anchors.right: parent.right - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter visible: !!statusDescriptionListItem.value - spacing: 8 + spacing: Theme.dp(8) StatusBaseText { text: statusDescriptionListItem.value color: Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.verticalCenter: parent.verticalCenter } diff --git a/src/StatusQ/Components/StatusEmoji.qml b/src/StatusQ/Components/StatusEmoji.qml index 53454d0b..bd636625 100644 --- a/src/StatusQ/Components/StatusEmoji.qml +++ b/src/StatusQ/Components/StatusEmoji.qml @@ -1,14 +1,16 @@ import QtQuick 2.13 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 Image { id: root property string emojiId: "" - width: 14 - height: 14 + width: Theme.dp(14) + height: Theme.dp(14) + sourceSize.width: width sourceSize.height: height @@ -16,4 +18,4 @@ Image { mipmap: true antialiasing: true source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : "" -} \ No newline at end of file +} diff --git a/src/StatusQ/Components/StatusExpandableItem.qml b/src/StatusQ/Components/StatusExpandableItem.qml index 53847760..26098339 100644 --- a/src/StatusQ/Components/StatusExpandableItem.qml +++ b/src/StatusQ/Components/StatusExpandableItem.qml @@ -19,18 +19,18 @@ Rectangle { property bool expanded: false property StatusIconSettings icon: StatusIconSettings { - width: !!statusExpandableItem.icon.name.toString() ? 24 : 40 - height: !!statusExpandableItem.icon.name.toString() ? 24 : 40 + width: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40) + height: Theme.dp(!!statusExpandableItem.icon.name.toString() ? 24 : 40) color: Theme.palette.directColor1 background: StatusIconBackgroundSettings { - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) color: Theme.palette.primaryColor2 } } property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) } enum Type { @@ -39,7 +39,7 @@ Rectangle { Tertiary // 2 } - implicitWidth: 718 + implicitWidth: Theme.dp(718) radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0 color: "transparent" @@ -52,7 +52,7 @@ Rectangle { anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter width: parent.width - height: 1 + height: Theme.dp(1) color: Theme.palette.baseColor2 visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) @@ -63,16 +63,16 @@ Rectangle { id: header anchors.top: parent.top width: parent.width - height: 64 - radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0 + height: Theme.dp(64) + radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? Theme.dp(8) : 0 color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" StatusSmartIdenticon { id: identicon 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.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11 + anchors.leftMargin: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11) image: statusExpandableItem.image icon: statusExpandableItem.icon name: primaryText.text @@ -83,20 +83,20 @@ Rectangle { id: primaryText anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) || (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.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 - width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 : - parent.width - icon.background.width - additionalText.contentWidth - 110) : - (button.visible ? parent.width - icon.background.width - button.width - 70 : - parent.width - icon.background.width - 70) + width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - Theme.dp(110) : + parent.width - icon.background.width - additionalText.contentWidth - Theme.dp(110)) : + (button.visible ? parent.width - icon.background.width - button.width - Theme.dp(70) : + parent.width - icon.background.width - Theme.dp(70)) font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal - font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17 - lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24 + font.pixelSize: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17) + lineHeight: Theme.dp((statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24) lineHeightMode: Text.FixedHeight elide: Text.ElideRight color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1 @@ -105,12 +105,12 @@ Rectangle { StatusBaseText { id: secondaryText anchors.top: primaryText.bottom - anchors.topMargin: 4 + anchors.topMargin: Theme.dp(4) anchors.left: primaryText.left anchors.right: primaryText.right - font.pixelSize: 15 - lineHeight: 22 + font.pixelSize: Theme.dp(15) + lineHeight: Theme.dp(22) lineHeightMode: Text.FixedHeight elide: Text.ElideRight color: Theme.palette.directColor3 @@ -119,12 +119,12 @@ Rectangle { StatusBaseText { id: additionalText anchors.verticalCenter: primaryText.verticalCenter - anchors.verticalCenterOffset: 2 + anchors.verticalCenterOffset: Theme.dp(2) anchors.right: expandImage.left - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) - font.pixelSize: 15 - lineHeight: 24 + font.pixelSize: Theme.dp(15) + lineHeight: Theme.dp(24) lineHeightMode: Text.FixedHeight elide: Text.ElideRight color: Theme.palette.baseColor1 @@ -133,9 +133,9 @@ Rectangle { StatusButton { id: button anchors.top: parent.top - anchors.topMargin: 19 + anchors.topMargin: Theme.dp(19) anchors.right: parent.right - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) visible: !!text } @@ -148,13 +148,13 @@ Rectangle { anchors.rightMargin: { switch (statusExpandableItem.type) { case StatusExpandableItem.Type.Primary: - return 23 + return Theme.dp(23) break; case StatusExpandableItem.Type.Secondary: - return 16 + return Theme.dp(16) break; default: - return 6 + return Theme.dp(6) } } @@ -181,11 +181,11 @@ Rectangle { Loader { id: expandableRegion anchors.top: header.bottom - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) 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.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0 + anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.dp(16) : 0 visible: false } @@ -202,13 +202,13 @@ Rectangle { State { name: "EXPANDED" 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} }, State { name: "COLLAPSED" PropertyChanges {target: expandImage; icon: "chevron-down"} - PropertyChanges {target: statusExpandableItem; height: 82} + PropertyChanges {target: statusExpandableItem; height: Theme.dp(82)} PropertyChanges {target: expandableRegion; visible: false} } ] diff --git a/src/StatusQ/Components/StatusImageCropPanel.qml b/src/StatusQ/Components/StatusImageCropPanel.qml index ab8734e1..f324b685 100644 --- a/src/StatusQ/Components/StatusImageCropPanel.qml +++ b/src/StatusQ/Components/StatusImageCropPanel.qml @@ -2,6 +2,7 @@ import QtQuick 2.14 import QtQuick.Layouts 1.14 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls 0.1 /*! @@ -50,7 +51,7 @@ Item { \qmlproperty bool StatusImageCrop::margins Space to keep around the control borders and crop area */ - property int margins: 10 + property int margins: Theme.dp(10) /*! \qmlproperty url StatusImageCropPanel::source @@ -215,7 +216,7 @@ Item { onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y)) onWheel: { - const delta = wheel.angleDelta.y / 120 + const delta = wheel.angleDelta.y / Theme.dp(120) cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor)) } @@ -242,13 +243,13 @@ Item { StatusIcon { icon: "remove-circle" - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 + Layout.preferredWidth: Theme.dp(20) + Layout.preferredHeight: Theme.dp(20) } StatusSlider { Layout.fillWidth: true - Layout.topMargin: 20 - Layout.bottomMargin: 25 + Layout.topMargin: Theme.dp(20) + Layout.bottomMargin: Theme.dp(25) Layout.alignment: Qt.AlignVCenter enabled: root.interactive @@ -262,8 +263,8 @@ Item { StatusIcon { icon: "add-circle" - Layout.preferredWidth: 20 - Layout.preferredHeight: 20 + Layout.preferredWidth: Theme.dp(20) + Layout.preferredHeight: Theme.dp(20) } } } diff --git a/src/StatusQ/Components/StatusLetterIdenticon.qml b/src/StatusQ/Components/StatusLetterIdenticon.qml index 30947eb2..61c6dcc9 100644 --- a/src/StatusQ/Components/StatusLetterIdenticon.qml +++ b/src/StatusQ/Components/StatusLetterIdenticon.qml @@ -10,12 +10,12 @@ Rectangle { property string name property string emoji property string emojiSize: Emoji.size.small - property int letterSize: 21 + property int letterSize: Theme.dp(21) property int charactersLen: 1 color: Theme.palette.miscColor5 - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) radius: width / 2 StatusEmoji { diff --git a/src/StatusQ/Components/StatusListItem.qml b/src/StatusQ/Components/StatusListItem.qml index 99e2ddd0..1c4d4914 100644 --- a/src/StatusQ/Components/StatusListItem.qml +++ b/src/StatusQ/Components/StatusListItem.qml @@ -20,8 +20,8 @@ Rectangle { property string subTitle: "" property string tertiaryTitle: "" property string label: "" - property real leftPadding: 16 - property real rightPadding: 16 + property real leftPadding: Theme.dp(16) + property real rightPadding: Theme.dp(16) property bool enabled: true property bool highlighted: false property bool propagateTitleClicks: true @@ -35,17 +35,17 @@ Rectangle { property bool loadingFailed: false property StatusIconSettings icon: StatusIconSettings { - height: isLetterIdenticon ? 40 : 20 - width: isLetterIdenticon ? 40 : 20 + height: Theme.dp(isLetterIdenticon ? 40 : 20) + width: Theme.dp(isLetterIdenticon ? 40 : 20) rotation: 0 isLetterIdenticon: false - letterSize: 21 + letterSize: Theme.dp(21) charactersLen: 1 color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ? Theme.palette.dangerColor1 : Theme.palette.primaryColor1 background: StatusIconBackgroundSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) color: { if (sensor.containsMouse) { return type === StatusListItem.Type.Secondary || @@ -58,8 +58,8 @@ Rectangle { } } property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) isIdenticon: false } property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { @@ -90,12 +90,12 @@ Rectangle { Danger } - implicitWidth: 448 + implicitWidth: Theme.dp(448) implicitHeight: { 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: { if (sensor.containsMouse || statusListItem.highlighted) { @@ -179,7 +179,7 @@ Rectangle { anchors.left: iconOrImage.active ? iconOrImage.right : parent.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.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined @@ -209,7 +209,7 @@ Rectangle { id: statusListItemTitle opacity: titleLoadingOverlay.visible ? 0 : 1 text: statusListItem.title - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) height: visible ? contentHeight : 0 elide: Text.ElideRight anchors.left: parent.left @@ -254,12 +254,12 @@ Rectangle { StatusBaseText { id: statusListItemTitleAsideText anchors.left: statusListItemTitle.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.verticalCenter: statusListItemTitle.verticalCenter anchors.top: bottomModel.length === 0 ? undefined: parent.top anchors.topMargin: bottomModel.length === 0 ? undefined : 20 text: statusListItem.titleAsideText - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) color: Theme.palette.baseColor1 visible: !!statusListItem.titleAsideText } @@ -268,7 +268,7 @@ Rectangle { id: titleIconsRow anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right anchors.verticalCenter: statusListItemTitle.verticalCenter - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) } StatusBaseText { @@ -293,7 +293,7 @@ Rectangle { height: visible ? contentHeight : 0 text: statusListItem.tertiaryTitle color: Theme.palette.baseColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) visible: !!statusListItem.tertiaryTitle wrapMode: Text.WrapAtWordBoundaryOrAnywhere } @@ -302,14 +302,14 @@ Rectangle { id: statusListItemBadge anchors.top: statusListItemTertiaryTitle.bottom width: contentItem.width - implicitHeight: visible ? 22 : 0 + implicitHeight: visible ? Theme.dp(22) : 0 } Row { id: statusListItemTagsSlotInline anchors.top: statusListItemTertiaryTitle.bottom width: parent.width - spacing: 10 + spacing: Theme.dp(10) clip: true Repeater { @@ -321,12 +321,12 @@ Rectangle { Row { id: statusListItemTagsSlot - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) anchors.top: iconOrImage.bottom anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) width: statusListItemBadge.width - spacing: 10 + spacing: Theme.dp(10) anchors.verticalCenter: parent.verticalCenter Repeater { @@ -339,12 +339,12 @@ Rectangle { id: statusListItemLabel anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined 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.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0 + anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? Theme.dp(10) : 0 text: statusListItem.label - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 visible: !!statusListItem.label } @@ -355,8 +355,8 @@ Rectangle { anchors.rightMargin: statusListItem.rightPadding anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined anchors.top: bottomModel.length === 0 ? undefined: parent.top - anchors.topMargin: bottomModel.length === 0 ? undefined : 12 - spacing: 10 + anchors.topMargin: bottomModel.length === 0 ? undefined : Theme.dp(12) + spacing: Theme.dp(10) } } } diff --git a/src/StatusQ/Components/StatusListItemBadge.qml b/src/StatusQ/Components/StatusListItemBadge.qml index ba6a7f13..04960f51 100644 --- a/src/StatusQ/Components/StatusListItemBadge.qml +++ b/src/StatusQ/Components/StatusListItemBadge.qml @@ -14,13 +14,13 @@ Control { property string secondaryText: "" property StatusImageSettings image: StatusImageSettings { - height: 16 - width: 16 + height: Theme.dp(16) + width: Theme.dp(16) isIdenticon: false } property StatusIconSettings icon: StatusIconSettings { - height: 16 - width: 16 + height: Theme.dp(16) + width: Theme.dp(16) isLetterIdenticon: false background: StatusIconBackgroundSettings {} color: "transparent" @@ -29,31 +29,31 @@ Control { background: Rectangle { anchors.fill: parent color: "transparent" - radius: 11 + radius: Theme.dp(11) border.color: Theme.palette.directColor7 } contentItem: Item { id: contentItem - width: (contentItemRow.width + 10) + width: (contentItemRow.width + Theme.dp(10)) height: parent.height RowLayout { id: contentItemRow anchors.centerIn: parent anchors.horizontalCenterOffset: -spacing - spacing: 2 + spacing: Theme.dp(2) StatusRoundedImage { implicitWidth: root.image.width implicitHeight: root.image.height visible: !root.icon.isLetterIdenticon image.source: root.image.source border.color: Theme.palette.baseColor1 - border.width: root.image.isIdenticon ? 1 : 0 + border.width: root.image.isIdenticon ? Theme.dp(1) : 0 } StatusLetterIdenticon { implicitWidth: root.icon.width implicitHeight: root.icon.width - letterSize: 11 + letterSize: Theme.dp(11) visible: root.icon.isLetterIdenticon color: root.icon.color name: root.primaryText diff --git a/src/StatusQ/Components/StatusListItemTag.qml b/src/StatusQ/Components/StatusListItemTag.qml index f6cfbbff..eb89cd9c 100644 --- a/src/StatusQ/Components/StatusListItemTag.qml +++ b/src/StatusQ/Components/StatusListItemTag.qml @@ -7,9 +7,9 @@ import StatusQ.Core.Theme 0.1 Rectangle { id: root width: layout.width + layout.anchors.margins - height: 30 + height: Theme.dp(30) color: Theme.palette.primaryColor3 - radius: 15 + radius: Theme.dp(15) property alias titleText: titleText @@ -18,21 +18,21 @@ Rectangle { signal clicked() property StatusImageSettings image: StatusImageSettings { - width: 20 - height: 20 + width: Theme.dp(20) + height: Theme.dp(20) isIdenticon: false } property StatusIconSettings icon: StatusIconSettings { - height: 20 - width: 20 + height: Theme.dp(20) + width: Theme.dp(20) rotation: 0 isLetterIdenticon: false - letterSize: 10 + letterSize: Theme.dp(10) color: Theme.palette.primaryColor1 background: StatusIconBackgroundSettings { - width: 15 - height: 15 + width: Theme.dp(15) + height: Theme.dp(15) color: Theme.palette.primaryColor3 } } @@ -40,11 +40,11 @@ Rectangle { RowLayout { id: layout height: parent.height - anchors.margins: 6 + anchors.margins: Theme.dp(6) StatusSmartIdenticon { id: iconOrImage - Layout.leftMargin: 4 + Layout.leftMargin: Theme.dp(4) image: root.image icon: root.icon name: root.title @@ -57,7 +57,7 @@ Rectangle { id: titleText color: Theme.palette.primaryColor1 text: root.title - Layout.rightMargin: closeButtonVisible ? 0 : 5 + Layout.rightMargin: closeButtonVisible ? 0 : Theme.dp(5) } StatusIcon { diff --git a/src/StatusQ/Components/StatusListPicker.qml b/src/StatusQ/Components/StatusListPicker.qml index 30d406c1..ab1e9869 100644 --- a/src/StatusQ/Components/StatusListPicker.qml +++ b/src/StatusQ/Components/StatusListPicker.qml @@ -227,8 +227,8 @@ Item { } } - width: 110 - height: 38 + width: Theme.dp(110) + height: Theme.dp(38) Component.onCompleted: d.initialize() @@ -238,7 +238,7 @@ Item { bgColor: Theme.palette.primaryColor3 contentColor: Theme.palette.primaryColor1 text: picker.selectedItemsText - textPixelSize: 13 + textPixelSize: Theme.dp(13) type: StatusPickerButton.Type.Down onClicked: { @@ -261,7 +261,7 @@ Item { anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined anchors.top: btn.bottom - anchors.topMargin: 4 + anchors.topMargin: Theme.dp(4) visible: false color: Theme.palette.statusPopupMenu.backgroundColor radius: 8 @@ -269,8 +269,8 @@ Item { layer.effect: DropShadow { source: picker horizontalOffset: 0 - verticalOffset: 4 - radius: 12 + verticalOffset: Theme.dp(4) + radius: Theme.dp(12) samples: 25 spread: 0.2 color: Theme.palette.dropShadow @@ -279,29 +279,29 @@ Item { ListView { id: content - property int itemHeight: 40 - property int itemWidth: 360 + property int itemHeight: Theme.dp(40) + property int itemWidth: Theme.dp(360) model: d.filteredModel width: itemWidth anchors.top: parent.top - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.bottom: parent.bottom - anchors.bottomMargin: 8 + anchors.bottomMargin: Theme.dp(8) currentIndex: -1 clip: true headerPositioning: ListView.OverlayHeader header: Rectangle { id: header width: content.itemWidth - height: searchInput.height + 24 + height: searchInput.height + Theme.dp(24) color: Theme.palette.statusPopupMenu.backgroundColor z: 3 // Above delegate (z=1) and above section.delegate (z = 2) StatusBaseInput { id: searchInput - implicitHeight: 36 - width: content.itemWidth - 2 * 18 + implicitHeight: Theme.dp(36) + width: content.itemWidth - Theme.dp(2) * 18 anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter topPadding: 0 @@ -371,12 +371,12 @@ Item { height: content.itemHeight StatusBaseText { - anchors.leftMargin: 18 + anchors.leftMargin: Theme.dp(18) anchors.left: parent.left anchors.verticalCenter: parent.verticalCenter text: section color: Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) elide: Text.ElideRight } }// End of Category item diff --git a/src/StatusQ/Components/StatusListSectionHeadline.qml b/src/StatusQ/Components/StatusListSectionHeadline.qml index 6965c29e..7ede49de 100644 --- a/src/StatusQ/Components/StatusListSectionHeadline.qml +++ b/src/StatusQ/Components/StatusListSectionHeadline.qml @@ -4,18 +4,18 @@ import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 Item { - implicitHeight: 34 - implicitWidth: 176 + implicitHeight: Theme.dp(34) + implicitWidth: Theme.dp(176) property alias text: label.text StatusBaseText { anchors.left: parent.left anchors.bottom: parent.bottom - anchors.bottomMargin: 4 - anchors.leftMargin: 16 + anchors.bottomMargin: Theme.dp(4) + anchors.leftMargin: Theme.dp(16) id: label - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 } } diff --git a/src/StatusQ/Components/StatusLoadingIndicator.qml b/src/StatusQ/Components/StatusLoadingIndicator.qml index a0e54fd4..e5fd6174 100644 --- a/src/StatusQ/Components/StatusLoadingIndicator.qml +++ b/src/StatusQ/Components/StatusLoadingIndicator.qml @@ -1,11 +1,12 @@ import QtQuick 2.13 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 StatusIcon { id: statusIcon icon: "loading" - height: 17 - width: 17 + height: Theme.dp(17) + width: Theme.dp(17) RotationAnimation { target: statusIcon; from: 0; diff --git a/src/StatusQ/Components/StatusMemberListItem.qml b/src/StatusQ/Components/StatusMemberListItem.qml index 9553816c..40b158d5 100644 --- a/src/StatusQ/Components/StatusMemberListItem.qml +++ b/src/StatusQ/Components/StatusMemberListItem.qml @@ -104,7 +104,7 @@ StatusListItem { // Short keychat composition: 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() - statusListItemSubTitle.font.pixelSize: 10 + statusListItemSubTitle.font.pixelSize: Theme.dp(10) icon.isLetterIdenticon: !root.image.source.toString() statusListItemIcon.badge.visible: true statusListItemIcon.badge.color: root.status === 1 ? Theme.palette.successColor1 : Theme.palette.baseColor1 // FIXME color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4 // Default sizes / positions by design - implicitWidth: 256 - implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding) - leftPadding: 8 - image.width: 32 - image.height: 32 - icon.width: 32 - icon.height: 32 + implicitWidth: Theme.dp(256) + implicitHeight: Math.max(Theme.dp(56), statusListItemTitleArea.height + leftPadding) + leftPadding: Theme.dp(8) + image.width: Theme.dp(32) + image.height: Theme.dp(32) + icon.width: Theme.dp(32) + icon.height: Theme.dp(32) statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter statusListItemIcon.anchors.top: undefined - statusListItemIcon.badge.border.width: 2 - statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders - statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders + statusListItemIcon.badge.border.width: Theme.dp(2) + statusListItemIcon.badge.implicitHeight: Theme.dp(12) // 8 px + 2 px * 2 borders + statusListItemIcon.badge.implicitWidth: Theme.dp(12) // 8 px + 2 px * 2 borders components: [ StatusIcon { anchors.verticalCenter: parent.verticalCenter diff --git a/src/StatusQ/Components/StatusMessage.qml b/src/StatusQ/Components/StatusMessage.qml index c9ba3769..e2cc26cc 100644 --- a/src/StatusQ/Components/StatusMessage.qml +++ b/src/StatusQ/Components/StatusMessage.qml @@ -68,13 +68,13 @@ Rectangle { audioMessageInfoText: statusMessage.audioMessageInfoText } RowLayout { - spacing: 8 + spacing: Theme.dp(8) Layout.fillWidth: true StatusSmartIdenticon { id: profileImage Layout.alignment: Qt.AlignTop - Layout.topMargin: 10 - Layout.leftMargin: 16 + Layout.topMargin: Theme.dp(10) + Layout.leftMargin: Theme.dp(16) image: messageDetails.profileImage name: messageHeader.displayName MouseArea { @@ -87,7 +87,7 @@ Rectangle { Column { spacing: 4 Layout.alignment: Qt.AlignTop - Layout.topMargin: 10 + Layout.topMargin: Theme.dp(10) Layout.fillWidth: true StatusPinMessageDetails { visible: messageDetails.isPinned && !editMode @@ -192,9 +192,9 @@ Rectangle { StatusMessageQuickActions { id: quickActionsPanel anchors.right: parent.right - anchors.rightMargin: 20 + anchors.rightMargin: Theme.dp(20) anchors.top: parent.top - anchors.topMargin: -8 + anchors.topMargin: -Theme.dp(8) visible: hoverHandler.hovered && !editMode } } diff --git a/src/StatusQ/Components/StatusMessageDetails.qml b/src/StatusQ/Components/StatusMessageDetails.qml index 0dca0d2b..fdca64b0 100644 --- a/src/StatusQ/Components/StatusMessageDetails.qml +++ b/src/StatusQ/Components/StatusMessageDetails.qml @@ -1,6 +1,7 @@ import QtQuick 2.13 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 QtObject { id: msgDetails @@ -10,8 +11,8 @@ QtObject { property string secondaryName: "" property string chatID: "" property StatusImageSettings profileImage: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) } property bool isEdited: false property string messageText: "" diff --git a/src/StatusQ/Components/StatusNavigationListItem.qml b/src/StatusQ/Components/StatusNavigationListItem.qml index f05653d5..1ff5f314 100644 --- a/src/StatusQ/Components/StatusNavigationListItem.qml +++ b/src/StatusQ/Components/StatusNavigationListItem.qml @@ -9,14 +9,14 @@ StatusListItem { property bool selected: false property alias badge: statusBadge - implicitWidth: 286 - implicitHeight: 48 + implicitWidth: Theme.dp(286) + implicitHeight: Theme.dp(48) - icon.background.width: 20 - icon.background.height: 20 + icon.background.width: Theme.dp(20) + icon.background.height: Theme.dp(20) icon.background.color: "transparent" - statusListItemIcon.anchors.topMargin: 14 + statusListItemIcon.anchors.topMargin: Theme.dp(14) color: { if (selected) { diff --git a/src/StatusQ/Components/StatusNavigationPanelHeadline.qml b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml index f680dc6f..68178381 100644 --- a/src/StatusQ/Components/StatusNavigationPanelHeadline.qml +++ b/src/StatusQ/Components/StatusNavigationPanelHeadline.qml @@ -4,7 +4,7 @@ import StatusQ.Core.Theme 0.1 import StatusQ.Core 0.1 StatusBaseText { - font.pixelSize: 17 + font.pixelSize: Theme.dp(17) font.weight: Font.Bold color: Theme.palette.directColor1 } diff --git a/src/StatusQ/Components/StatusRoundIcon.qml b/src/StatusQ/Components/StatusRoundIcon.qml index e1fbb7e8..e248f825 100644 --- a/src/StatusQ/Components/StatusRoundIcon.qml +++ b/src/StatusQ/Components/StatusRoundIcon.qml @@ -6,13 +6,13 @@ Rectangle { id: statusRoundedIcon property StatusIconSettings icon: StatusIconSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) rotation: 0 color: Theme.palette.primaryColor1 background: StatusIconBackgroundSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) color: Theme.palette.primaryColor3 } } diff --git a/src/StatusQ/Components/StatusRoundedImage.qml b/src/StatusQ/Components/StatusRoundedImage.qml index b83e7192..d4499acd 100644 --- a/src/StatusQ/Components/StatusRoundedImage.qml +++ b/src/StatusQ/Components/StatusRoundedImage.qml @@ -10,8 +10,8 @@ Rectangle { property alias image: image - implicitWidth: 40 - implicitHeight: 40 + implicitWidth: Theme.dp(40) + implicitHeight: Theme.dp(40) color: "transparent" radius: width / 2 layer.enabled: true diff --git a/src/StatusQ/Components/StatusSmartIdenticon.qml b/src/StatusQ/Components/StatusSmartIdenticon.qml index 74d9a4cd..d563f215 100644 --- a/src/StatusQ/Components/StatusSmartIdenticon.qml +++ b/src/StatusQ/Components/StatusSmartIdenticon.qml @@ -13,18 +13,18 @@ Loader { property alias badge: statusBadge property StatusIconSettings icon: StatusIconSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) } property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) } property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings { 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 } @@ -103,9 +103,9 @@ Loader { visible: false anchors.bottom: statusSmartIdenticon.bottom anchors.right: statusSmartIdenticon.right - border.width: 3 - implicitHeight: 15 - implicitWidth: 15 + border.width: Theme.dp(3) + implicitHeight: Theme.dp(15) + implicitWidth: Theme.dp(15) z: statusSmartIdenticon.dZ } } diff --git a/src/StatusQ/Components/StatusTagSelector.qml b/src/StatusQ/Components/StatusTagSelector.qml index 8180b9e7..6d9248e8 100644 --- a/src/StatusQ/Components/StatusTagSelector.qml +++ b/src/StatusQ/Components/StatusTagSelector.qml @@ -61,7 +61,7 @@ Item { \qmlproperty real StatusTagSelector::maxHeight 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 This property holds a reference to the TextEdit component. @@ -210,7 +210,7 @@ Item { suggestionsContainer.anchors.topMargin + suggestionsContainer.anchors.bottomMargin + 2 * bgRect.anchors.margins + userListView.anchors.topMargin + userListView.anchors.bottomMargin + - (userListView.model.count * 64): 0 + (userListView.count * 64): 0 function orderNamesModel() { 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) onOrderByReadonlyChanged: { d.orderNamesModel() } @@ -236,26 +236,27 @@ Item { Rectangle { id: tagSelectorRect width: parent.width - height: 44 - radius: 8 + height: Theme.dp(44) + radius: Theme.dp(8) color: Theme.palette.baseColor2 RowLayout { anchors.fill: parent - anchors.leftMargin: 16 - anchors.rightMargin: 16 - spacing: 8 + anchors.leftMargin: Theme.dp(16) + anchors.rightMargin: Theme.dp(16) + spacing: Theme.dp(8) StatusBaseText { - Layout.preferredWidth: 22 + Layout.preferredWidth: Theme.dp(22) Layout.alignment: Qt.AlignVCenter + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 text: root.toLabelText - visible: (parent.width>22) + visible: (parent.width>Theme.dp(22)) } ScrollView { - Layout.preferredWidth: (parent.width - 177) > 0 ? ((namesList.contentWidth > (parent.width - 177)) ? - (parent.width - 177) : namesList.contentWidth) : 0 - implicitHeight: 30 + Layout.preferredWidth: (parent.width - Theme.dp(177)) > 0 ? ((namesList.contentWidth > (parent.width - Theme.dp(177))) ? + (parent.width - Theme.dp(177)) : namesList.contentWidth) : 0 + implicitHeight: Theme.dp(30) Layout.alignment: Qt.AlignVCenter visible: (namesList.count > 0) contentWidth: namesList.contentWidth @@ -267,7 +268,7 @@ Item { anchors.fill: parent model: namesModel orientation: ListView.Horizontal - spacing: 8 + spacing: Theme.dp(8) function scrollToEnd() { if (contentWidth > width) { contentX = contentWidth; @@ -294,12 +295,12 @@ Item { focus: true color: Theme.palette.directColor1 clip: true - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) wrapMode: TextEdit.NoWrap font.family: Theme.palette.baseFont.name Layout.fillWidth: true - Layout.preferredHeight: 44 - visible: (parent.width>22) + Layout.preferredHeight: Theme.dp(44) + visible: (parent.width>Theme.dp(22)) Keys.onPressed: { if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape) && getText(cursorPosition, (cursorPosition-1)) === "" @@ -321,9 +322,9 @@ Item { StatusBaseText { id: warningTextLabel visible: (namesModel.count === root.nameCountLimit) - Layout.preferredWidth: visible ? 120 : 0 + Layout.preferredWidth: visible ? Theme.dp(120) : 0 Layout.alignment: Qt.AlignVCenter | Qt.AlignRight - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) color: Theme.palette.dangerColor1 text: root.nameCountLimit + " " + root.warningText } @@ -332,11 +333,11 @@ Item { StatusBaseText { id: contactsLabel - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.top: tagSelectorRect.bottom - anchors.topMargin: visible ? 32 : 0 + anchors.topMargin: visible ? Theme.dp(32) : 0 height: visible ? contentHeight : 0 visible: (root.sortedList.count === 0) color: Theme.palette.baseColor1 @@ -345,31 +346,31 @@ Item { Control { id: suggestionsContainer - width: 360 + width: Theme.dp(360) anchors { top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom - topMargin: 8//Style.current.halfPadding + topMargin: Theme.dp(8)//Style.current.halfPadding bottom: parent.bottom - bottomMargin: 16//Style.current.padding + bottomMargin: Theme.dp(16)//Style.current.padding } clip: true visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) || ((edit.text !== "") && (root.sortedList.count > 0)) 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 { id: bgRect anchors.fill: parent - anchors.margins: 8 + anchors.margins: Theme.dp(8) visible: (root.sortedList.count > 0) color: Theme.palette.statusPopupMenu.backgroundColor - radius: 8 + radius: Theme.dp(8) layer.enabled: true layer.effect: DropShadow { source: bgRect horizontalOffset: 0 - verticalOffset: 4 - radius: 12 + verticalOffset: Theme.dp(4) + radius: Theme.dp(12) samples: 25 spread: 0.2 color: Theme.palette.dropShadow @@ -379,9 +380,9 @@ Item { id: userListView anchors { fill: parent - topMargin: 16 - leftMargin: 8 - rightMargin: 8 + topMargin: Theme.dp(16) + leftMargin: Theme.dp(8) + rightMargin: Theme.dp(8) } ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded @@ -392,10 +393,10 @@ Item { } delegate: StatusMemberListItem { anchors.left: parent.left - anchors.leftMargin: bgRect.visible ? 8 : 0 + anchors.leftMargin: bgRect.visible ? Theme.dp(8) : 0 anchors.right: parent.right - anchors.rightMargin: bgRect.visible ? 8 : 0 - height: visible ? 64 : 0 + anchors.rightMargin: bgRect.visible ? Theme.dp(8) : 0 + height: visible ? Theme.dp(64) : 0 visible: { for (let i = 0; i < namesModel.count; i++) { if (namesModel.get(i).pubKey === model.pubKey) { diff --git a/src/StatusQ/Components/StatusToastMessage.qml b/src/StatusQ/Components/StatusToastMessage.qml index e43c7ace..1b191a27 100644 --- a/src/StatusQ/Components/StatusToastMessage.qml +++ b/src/StatusQ/Components/StatusToastMessage.qml @@ -37,8 +37,8 @@ import StatusQ.Core.Theme 0.1 Control { id: root - width: 343 - height: !!secondaryText ? 68 : 48 + width: Theme.dp(343) + height: Theme.dp(!!secondaryText ? 68 : 48) anchors.right: parent.right /*! @@ -79,8 +79,8 @@ Control { This property holds a set of settings for the icon of the ToastMessage. */ property StatusIconSettings icon: StatusIconSettings { - width: 23 - height: 23 + width: Theme.dp(23) + height: Theme.dp(23) } /*! @@ -195,12 +195,12 @@ Control { id: background anchors.fill: parent color: Theme.palette.statusToastMessage.backgroundColor - radius: 8 + radius: Theme.dp(8) border.color: Theme.palette.baseColor2 layer.enabled: true layer.effect: DropShadow { - verticalOffset: 3 - radius: 8 + verticalOffset: Theme.dp(3) + radius: Theme.dp(8) samples: 15 fast: true cached: true @@ -210,9 +210,9 @@ Control { contentItem: Item { anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.right: parent.right - anchors.rightMargin: 4 + anchors.rightMargin: Theme.dp(4) height: parent.height MouseArea { anchors.fill: parent @@ -225,10 +225,10 @@ Control { } RowLayout { anchors.fill: parent - spacing: 16 + spacing: Theme.dp(16) Rectangle { - implicitWidth: 32 - implicitHeight: 32 + implicitWidth: Theme.dp(32) + implicitHeight: Theme.dp(32) Layout.alignment: Qt.AlignVCenter radius: (root.width/2) color: (root.type === StatusToastMessage.Type.Success) ? @@ -266,7 +266,7 @@ Control { Layout.alignment: Qt.AlignVCenter StatusBaseText { width: parent.width - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) color: Theme.palette.directColor1 elide: Text.ElideRight text: root.primaryText @@ -275,7 +275,7 @@ Control { width: parent.width visible: (!root.linkUrl && !!root.secondaryText) height: visible ? contentHeight : 0 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) color: Theme.palette.baseColor1 text: root.secondaryText elide: Text.ElideRight @@ -283,7 +283,7 @@ Control { StatusSelectableText { visible: (!!root.linkUrl) height: visible ? implicitHeight : 0 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) hoveredLinkColor: Theme.palette.primaryColor1 text: "

" + root.secondaryText + "

" onLinkActivated: { @@ -295,8 +295,8 @@ Control { type: StatusFlatRoundButton.Type.Secondary icon.name: "close" icon.color: Theme.palette.directColor1 - implicitWidth: 30 - implicitHeight: 30 + implicitWidth: Theme.dp(30) + implicitHeight: Theme.dp(30) onClicked: { root.open = false; } diff --git a/src/StatusQ/Components/StatusWizardStepper.qml b/src/StatusQ/Components/StatusWizardStepper.qml index 6b9c099c..bca71915 100644 --- a/src/StatusQ/Components/StatusWizardStepper.qml +++ b/src/StatusQ/Components/StatusWizardStepper.qml @@ -37,7 +37,7 @@ Item { id: wizardWrapper width: parent.width - height: 56 + height: Theme.dp(56) /*! \qmlproperty ListModel StatusWizardStepper::stepsModel This property represents all steps and their descriptions as provided by the user. @@ -54,18 +54,18 @@ Item { delegate: Item { id: wrapperItem width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count) - height: 56 + height: Theme.dp(56) onXChanged: { //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 { id: barBorder - width: visible ? (parent.width - (label.width/2 + 24)) : 0 - height: visible ? 8 : 0 + width: visible ? (parent.width - (label.width/2 + Theme.dp(24))) : 0 + height: visible ? Theme.dp(8) : 0 visible: (index > 0) anchors.verticalCenter: parent.verticalCenter - anchors.verticalCenterOffset: -12 + anchors.verticalCenterOffset: -Theme.dp(12) from: 0 to: wizardWrapper.maxDuration value: loadingTime @@ -76,22 +76,22 @@ Item { Item { id: label width: descriptionLabel.contentWidth - height: 56 + height: Theme.dp(56) 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 { - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) anchors.horizontalCenter: parent.horizontalCenter radius: width/2 color: stepCompleted ? Theme.palette.primaryColor1 : "transparent" border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true)) ? "transparent" : Theme.palette.primaryColor1 - border.width: 2 + border.width: Theme.dp(2) StatusBaseText { anchors.centerIn: parent text: index+1 - font.pixelSize: 17 + font.pixelSize: Theme.dp(17) color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true)) ? Theme.palette.indirectColor1 : Theme.palette.primaryColor1 } @@ -101,7 +101,7 @@ Item { anchors.bottom: parent.bottom text: description color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) } } } diff --git a/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml index a2299c3a..e797aed4 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusAudioMessage.qml @@ -15,9 +15,9 @@ Rectangle { property bool hovered: false property string audioSource: "" - width: 320 - height: 32 - radius: 20 + width: Theme.dp(320) + height: Theme.dp(32) + radius: Theme.dp(20) color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2 @@ -30,13 +30,13 @@ Rectangle { RowLayout { id: preview visible: isPreview - spacing: 5 + spacing: Theme.dp(5) anchors.centerIn: parent StatusIcon { id: icon Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 14 - Layout.preferredHeight: 14 + Layout.preferredWidth: Theme.dp(14) + Layout.preferredHeight: Theme.dp(14) icon: "audio" color: Theme.palette.baseColor1 } @@ -44,16 +44,16 @@ Rectangle { Layout.alignment: Qt.AlignVCenter color: Theme.palette.baseColor1 text: audioMessageInfoText - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) } } StatusFlatRoundButton { id: playButton - width: 15 - height: 15 + width: Theme.dp(15) + height: Theme.dp(15) anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter visible: !isPreview @@ -73,12 +73,12 @@ Rectangle { } Rectangle { - height: 2 - width: 240 + height: Theme.dp(2) + width: Theme.dp(240) color: Theme.palette.directColor5 anchors.verticalCenter: parent.verticalCenter anchors.left: playButton.right - anchors.leftMargin: 10 + anchors.leftMargin: Theme.dp(10) visible: !isPreview Rectangle { id: progress @@ -94,10 +94,10 @@ Rectangle { Rectangle { id: handle - width: 10 - height: 10 + width: Theme.dp(10) + height: Theme.dp(10) color: Theme.palette.directColor1 - radius: 10 + radius: Theme.dp(10) anchors.verticalCenter: parent.verticalCenter x: progress.width state: "default" diff --git a/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml index c7a2c0c6..701afd28 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusEditMessage.qml @@ -20,7 +20,7 @@ Item { height: childrenRect.height ColumnLayout { - spacing: 4 + spacing: Theme.dp(4) Loader { id: chatInputLoader // To-Do: Move to StatusChatInput once its moved to StatusQ @@ -28,7 +28,7 @@ Item { width: editText.width input.placeholderText: "" input.text: msgText - input.implicitHeight: 40 + input.implicitHeight: Theme.dp(40) } } RowLayout { diff --git a/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml index 9e28a6bf..b7d991ab 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusImageMessage.qml @@ -19,7 +19,7 @@ Item { property url source: "" property bool allCornersRounded: false property bool isLeftCorner: true - property int imageWidth: 350 + property int imageWidth: Theme.dp(350) property int shapeType: -1 property string loadingImageText: "" @@ -55,22 +55,22 @@ Item { anchors.left: parent.left width: imageMessage.width height: imageMessage.height - radius: 16 + radius: Theme.dp(16) } Rectangle { anchors.bottom: parent.bottom anchors.left: parent.left - width: 32 - height: 32 - radius: 4 + width: Theme.dp(32) + height: Theme.dp(32) + radius: Theme.dp(4) visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded } Rectangle { anchors.bottom: parent.bottom anchors.right: parent.right - width: 32 - height: 32 - radius: 4 + width: Theme.dp(32) + height: Theme.dp(32) + radius: Theme.dp(4) visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded } } @@ -98,9 +98,9 @@ Item { || imageMessage.status === Image.Error width: parent.width height: width - border.width: 1 + border.width: Theme.dp(1) border.color: Theme.palette.baseColor2 - radius: 8 + radius: Theme.dp(8) StatusBaseText { anchors.centerIn: parent @@ -108,7 +108,7 @@ Item { color: imageMessage.status === Image.Error? Theme.palette.dangerColor1 : Theme.palette.directColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } } } diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml index 76c573f2..625b52ab 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusMessageHeader.qml @@ -35,7 +35,7 @@ Item { id: primaryDisplayName font.family: Theme.palette.baseFont.name font.weight: Font.Medium - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) font.underline: mouseArea.containsMouse readOnly: true wrapMode: Text.WordWrap @@ -62,14 +62,14 @@ Item { id: secondaryDisplayName Layout.alignment: Qt.AlignVCenter color: Theme.palette.baseColor1 - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) text: secondaryName visible: !!text } StatusBaseText { id: dotSeparator1 Layout.fillHeight: true - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) color: Theme.palette.baseColor1 text: "." visible: secondaryDisplayName.visible @@ -77,8 +77,8 @@ Item { StatusBaseText { id: tertiaryDetailText Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: 58 - font.pixelSize: 10 + Layout.maximumWidth: Theme.dp(58) + font.pixelSize: Theme.dp(10) elide: Text.ElideMiddle color: Theme.palette.baseColor1 text: tertiaryDetail @@ -86,7 +86,7 @@ Item { StatusBaseText { id: dotSeparator2 Layout.fillHeight: true - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) color: Theme.palette.baseColor1 text: "." visible: tertiaryDetailText.visible diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml index ee2bd6e3..a809724f 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusMessageQuickActions.qml @@ -16,8 +16,8 @@ Rectangle { } width: buttonRow.width + _internal.containerMargin * 2 - height: 36 - radius: 8 + height: Theme.dp(36) + radius: Theme.dp(8) color: Theme.palette.statusSelect.menuItemBackgroundColor layer.enabled: true @@ -25,11 +25,11 @@ Rectangle { width: buttonsContainer.width height: buttonsContainer.height x: buttonsContainer.x - y: buttonsContainer.y + 10 + y: buttonsContainer.y + Theme.dp(10) horizontalOffset: 0 - verticalOffset: 2 + verticalOffset: Theme.dp(2) source: buttonsContainer - radius: 10 + radius: Theme.dp(10) samples: 15 color: Theme.palette.dropShadow } diff --git a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml index ef250133..8592a1bf 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusMessageReply.qml @@ -19,13 +19,13 @@ Loader { sourceComponent: RowLayout { id: replyLayout - spacing: 8 + spacing: Theme.dp(8) Shape { id: replyCorner Layout.alignment: Qt.AlignTop - Layout.leftMargin: 35 + Layout.leftMargin: Theme.dp(35) Layout.topMargin: profileImage.height/2 - Layout.preferredWidth: 20 + Layout.preferredWidth: Theme.dp(20) Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin asynchronous: true antialiasing: true @@ -35,13 +35,13 @@ Loader { fillColor: "transparent" capStyle: ShapePath.RoundCap joinStyle: ShapePath.RoundJoin - startX: 20 + startX: Theme.dp(20) startY: 0 - PathLine { x: 10; y: 0 } + PathLine { x: Theme.dp(10); y: 0 } PathArc { - x: 0; y: 10 - radiusX: 13 - radiusY: 13 + x: 0; y: Theme.dp(10) + radiusX: Theme.dp(13) + radiusY: Theme.dp(13) direction: PathArc.Counterclockwise } PathLine { x: 0; y: messageLayout.height} @@ -51,7 +51,7 @@ Loader { id: messageLayout Layout.fillWidth: true Layout.alignment: Qt.AlignTop - Layout.topMargin: 4 + Layout.topMargin: Theme.dp(4) RowLayout { StatusSmartIdenticon { id: profileImage @@ -70,7 +70,7 @@ Loader { color: Theme.palette.baseColor1 selectionColor: Theme.palette.primaryColor3 selectedTextColor: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) font.weight: Font.Medium selectByMouse: true readOnly: true @@ -80,40 +80,40 @@ Loader { StatusTextMessage { Layout.fillWidth: true textField.text: replyDetails.messageText - textField.font.pixelSize: 13 + textField.font.pixelSize: Theme.dp(13) textField.color: Theme.palette.baseColor1 - textField.height: 18 + textField.height: Theme.dp(18) clip: true visible: !!replyDetails.messageText } StatusImageMessage { Layout.fillWidth: true Layout.preferredHeight: imageAlias.paintedHeight - imageWidth: 56 + imageWidth: Theme.dp(56) source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : "" visible: replyDetails.contentType === StatusMessage.ContentType.Image shapeType: StatusImageMessage.ShapeType.ROUNDED } Item { Layout.fillWidth: true - Layout.preferredHeight: 48 + Layout.preferredHeight: Theme.dp(48) Layout.alignment: Qt.AlignLeft visible: replyDetails.contentType === StatusMessage.ContentType.Sticker StatusSticker { - image.width: 48 - image.height: 48 + image.width: Theme.dp(48) + image.height: Theme.dp(48) image.source: replyDetails.messageContent } } Item { Layout.fillWidth: true - Layout.preferredHeight: 22 + Layout.preferredHeight: Theme.dp(22) visible: replyDetails.contentType === StatusMessage.ContentType.Audio StatusAudioMessage { id: audioMessage anchors.left: parent.left - width: 125 - height: 22 + width: Theme.dp(125) + height: Theme.dp(22) isPreview: true audioSource: replyDetails.messageContent audioMessageInfoText: chatReply.audioMessageInfoText diff --git a/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml b/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml index 93b89762..de4e4edf 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusPinMessageDetails.qml @@ -12,32 +12,32 @@ Loader { active: visible sourceComponent: Rectangle { - height: 24 - width: layout.width + 16 + height: Theme.dp(24) + width: layout.width + Theme.dp(16) color: Theme.palette.pinColor2 - radius: 12 + radius: Theme.dp(12) RowLayout { id: layout anchors.centerIn: parent StatusIcon { Layout.alignment: Qt.AlignVCenter - Layout.preferredWidth: 16 - Layout.preferredHeight: 16 + Layout.preferredWidth: Theme.dp(16) + Layout.preferredHeight: Theme.dp(16) color: Theme.palette.pinColor1 icon: "tiny/pin" } StatusBaseText { Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: -4 + Layout.leftMargin: -Theme.dp(4) color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) text: pinnedMsgInfoText } StatusBaseText { Layout.alignment: Qt.AlignVCenter - Layout.leftMargin: -4 + Layout.leftMargin: -Theme.dp(4) color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) font.weight: Font.Medium text: pinnedBy } diff --git a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml index 8909008f..19cd9d06 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusSticker.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusSticker.qml @@ -11,8 +11,8 @@ Loader { property bool noHover: false property bool noMouseArea: false property StatusImageSettings image: StatusImageSettings { - width: 140 - height: 140 + width: Theme.dp(140) + height: Theme.dp(140) } signal loaded() @@ -24,7 +24,7 @@ Loader { id: root color: Theme.palette.baseColor2 - radius: 16 + radius: Theme.dp(16) width: image.width height: image.height @@ -71,8 +71,8 @@ Loader { Component { id: loadingIndicator StatusLoadingIndicator { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) color: Theme.palette.baseColor1 } } diff --git a/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml index b9ed294f..054ccfa3 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml @@ -28,7 +28,7 @@ Item { selectionColor: Theme.palette.primaryColor3 color: Theme.palette.directColor1 font.family: Theme.palette.baseFont.name - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) textFormat: Text.RichText wrapMode: Text.Wrap readOnly: true @@ -72,11 +72,11 @@ Item { id: showMoreLoader active: _internal.veryLongChatText anchors.top: chatText.bottom - anchors.topMargin: -10 + anchors.topMargin: -Theme.dp(10) anchors.horizontalCenter: parent.horizontalCenter sourceComponent: StatusRoundButton { - implicitWidth: 24 - implicitHeight: 24 + implicitWidth: Theme.dp(24) + implicitHeight: Theme.dp(24) type: StatusRoundButton.Type.Secondary icon.name: _internal.readMore ? "chevron-up": "chevron-down" onClicked: { diff --git a/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml b/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml index a68001be..de42c496 100644 --- a/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml +++ b/src/StatusQ/Components/private/statusMessage/StatusTimeStampLabel.qml @@ -11,12 +11,12 @@ StatusBaseText { Layout.alignment: Qt.AlignVCenter color: Theme.palette.baseColor1 - font.pixelSize: 10 + font.pixelSize: Theme.dp(10) visible: !!text StatusToolTip { id: tooltip visible: hhandler.hovered && !!text - maxWidth: 350 + maxWidth: Theme.dp(350) } HoverHandler { id: hhandler diff --git a/src/StatusQ/Controls/StatusAccountSelector.qml b/src/StatusQ/Controls/StatusAccountSelector.qml index 60967fd3..962ceb5e 100644 --- a/src/StatusQ/Controls/StatusAccountSelector.qml +++ b/src/StatusQ/Controls/StatusAccountSelector.qml @@ -16,7 +16,7 @@ Item { property var selectedAccount property string currency: "usd" property alias selectField: select - implicitWidth: 448 + implicitWidth: Theme.dp(448) height: select.height + (selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0) // set to asset symbol to display asset's balance top right @@ -91,16 +91,16 @@ Item { id: txtAssetBalance visible: root.assetFound !== undefined anchors.bottom: select.top - anchors.bottomMargin: -18 + anchors.bottomMargin: -Theme.dp(18) anchors.right: txtAssetSymbol.left anchors.left: select.left anchors.leftMargin: select.width / 2.5 color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1 elide: Text.ElideRight - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) horizontalAlignment: Text.AlignRight - height: 18 + height: Theme.dp(18) StatusToolTip { enabled: txtAssetBalance.truncated @@ -123,7 +123,7 @@ Item { anchors.right: parent.right color: txtAssetBalance.color - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) height: txtAssetBalance.height } StatusSelect { @@ -140,10 +140,10 @@ Item { StatusIcon { id: selectedIconImg anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter - width: 20 - height: 20 + width: Theme.dp(20) + height: Theme.dp(20) icon: "filled-account" } @@ -151,13 +151,13 @@ Item { id: selectedTextField elide: Text.ElideRight anchors.left: selectedIconImg.right - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.right: parent.right anchors.rightMargin: select.selectedItemRightMargin anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) verticalAlignment: Text.AlignVCenter - height: 22 + height: Theme.dp(22) color: Theme.palette.directColor1 } } @@ -167,20 +167,20 @@ Item { id: selectedAccountDetails visible: root.showAccountDetails anchors.top: select.bottom - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.left: parent.left - anchors.leftMargin: 2 + anchors.leftMargin: Theme.dp(2) StatusBaseText { id: textSelectedAddress - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) elide: Text.ElideMiddle - width: 90 + width: Theme.dp(90) color: Theme.palette.baseColor1 } StatusBaseText { id: textSelectedAddressFiatBalance - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) 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 { id: iconImg anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter - width: 20 - height: 20 + width: Theme.dp(20) + height: Theme.dp(20) icon: "filled-account" color: Utils.getThemeAccountColor(model.color, Theme.palette.userCustomizationColors) || Theme.palette.userCustomizationColors[0] } @@ -215,19 +215,19 @@ Item { Column { id: column anchors.left: iconImg.right - anchors.leftMargin: 14 + anchors.leftMargin: Theme.dp(14) anchors.right: txtFiatBalance.left - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) anchors.verticalCenter: parent.verticalCenter StatusBaseText { id: accountName text: model.name elide: Text.ElideRight - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.left: parent.left anchors.right: parent.right - height: 22 + height: Theme.dp(22) color: Theme.palette.directColor1 } @@ -235,29 +235,29 @@ Item { id: accountAddress text: address elide: Text.ElideMiddle - width: 80 + width: Theme.dp(80) color: Theme.palette.baseColor1 - font.pixelSize: 12 - height: 16 + font.pixelSize: Theme.dp(12) + height: Theme.dp(16) } } StatusBaseText { id: txtFiatBalance anchors.right: fiatCurrencySymbol.left - anchors.rightMargin: 4 + anchors.rightMargin: Theme.dp(4) anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 - height: 22 + font.pixelSize: Theme.dp(15) + height: Theme.dp(22) text: currencyBalance color: Theme.palette.directColor1 } StatusBaseText { id: fiatCurrencySymbol anchors.right: parent.right - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 - height: 22 + font.pixelSize: Theme.dp(15) + height: Theme.dp(22) color: Theme.palette.baseColor1 text: root.currency.toUpperCase() } diff --git a/src/StatusQ/Controls/StatusActivityCenterButton.qml b/src/StatusQ/Controls/StatusActivityCenterButton.qml index 9b46dd55..b210b1fc 100644 --- a/src/StatusQ/Controls/StatusActivityCenterButton.qml +++ b/src/StatusQ/Controls/StatusActivityCenterButton.qml @@ -32,13 +32,13 @@ StatusFlatRoundButton { property alias unreadNotificationsCount: statusBadge.value icon.name: "notification" - icon.height: 21 + icon.height: Theme.dp(21) type: StatusFlatRoundButton.Type.Secondary // initializing the tooltip tooltip.text: qsTr("Activity") tooltip.orientation: StatusToolTip.Orientation.Bottom - tooltip.y: parent.height + 12 + tooltip.y: parent.height + Theme.dp(12) StatusBadge { id: statusBadge @@ -46,17 +46,17 @@ StatusFlatRoundButton { visible: value > 0 anchors.top: parent.top anchors.left: parent.right - anchors.topMargin: -3 + anchors.topMargin: -Theme.dp(3) anchors.leftMargin: { - if (statusBadge.value > 99) { - return -22 + if (statusBadge.value > Theme.dp(99)) { + return -Theme.dp(22) } - if (statusBadge.value > 9) { - return -21 + if (statusBadge.value > Theme.dp(9)) { + 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 } } diff --git a/src/StatusQ/Controls/StatusAssetSelector.qml b/src/StatusQ/Controls/StatusAssetSelector.qml index 695662cd..f229ff14 100644 --- a/src/StatusQ/Controls/StatusAssetSelector.qml +++ b/src/StatusQ/Controls/StatusAssetSelector.qml @@ -18,8 +18,8 @@ Item { } // Define this in the usage to get balance in currency selected by user property var getCurrencyBalanceString: function (currencyBalance) { return "" } - implicitWidth: 86 - implicitHeight: 32 + implicitWidth: Theme.dp(86) + implicitHeight: Theme.dp(32) function resetInternal() { assets = null @@ -40,17 +40,17 @@ Item { bgColorHover: Theme.palette.directColor8 model: root.assets caretRightMargin: 0 - select.radius: 6 + select.radius: Theme.dp(6) select.height: root.height - selectMenu.width: 342 + selectMenu.width: Theme.dp(342) selectedItemComponent: Item { anchors.fill: parent StatusRoundedImage { id: iconImg anchors.left: parent.left - anchors.leftMargin: 4 - width: 24 - height: 24 + anchors.leftMargin: Theme.dp(4) + width: Theme.dp(24) + height: Theme.dp(24) anchors.verticalCenter: parent.verticalCenter image.onStatusChanged: { if (iconImg.image.status === Image.Error) { @@ -61,10 +61,10 @@ Item { StatusBaseText { id: selectedTextField anchors.left: iconImg.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 15 - height: 22 + font.pixelSize: Theme.dp(15) + height: Theme.dp(22) verticalAlignment: Text.AlignVCenter color: Theme.palette.directColor1 } @@ -80,11 +80,11 @@ Item { property bool isLastItem: index === assets.rowCount() - 1 width: parent.width - height: 72 + height: Theme.dp(72) StatusRoundedImage { id: iconImg anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter image.source: root.tokenAssetSourceFn(symbol.toUpperCase()) image.onStatusChanged: { @@ -95,31 +95,31 @@ Item { } Column { anchors.left: iconImg.right - anchors.leftMargin: 12 + anchors.leftMargin: Theme.dp(12) anchors.verticalCenter: parent.verticalCenter StatusBaseText { text: symbol.toUpperCase() - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.directColor1 } StatusBaseText { text: name color: Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } } Column { anchors.right: parent.right - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter StatusBaseText { - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) text: parseFloat(totalBalance).toFixed(4) + " " + symbol } StatusBaseText { - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) anchors.right: parent.right text: getCurrencyBalanceString(totalCurrencyBalance) color: Theme.palette.baseColor1 diff --git a/src/StatusQ/Controls/StatusBanner.qml b/src/StatusQ/Controls/StatusBanner.qml index 169e927d..c19920df 100644 --- a/src/StatusQ/Controls/StatusBanner.qml +++ b/src/StatusQ/Controls/StatusBanner.qml @@ -53,12 +53,12 @@ Column { \qmlproperty string StatusBanner::textPixels 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 This property holds the height of the banner rectangle. */ - property int statusBannerHeight: 38 + property int statusBannerHeight: Theme.dp(38) // "private" properties QtObject { @@ -81,7 +81,7 @@ Column { Rectangle { id: topDiv color: d.bordersColor - height: 1 + height: Theme.dp(1) width: parent.width } @@ -105,7 +105,7 @@ Column { Rectangle { id: bottomDiv color: d.bordersColor - height: 1 + height: Theme.dp(1) width: parent.width } diff --git a/src/StatusQ/Controls/StatusBaseButton.qml b/src/StatusQ/Controls/StatusBaseButton.qml index 666f9431..fe7f3a4c 100644 --- a/src/StatusQ/Controls/StatusBaseButton.qml +++ b/src/StatusQ/Controls/StatusBaseButton.qml @@ -19,8 +19,8 @@ Rectangle { } property StatusIconSettings icon: StatusIconSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) } property bool loading: false @@ -33,28 +33,28 @@ Rectangle { property alias text: label.text property alias font: label.font - property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12 - property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12 + property real defaultLeftPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12) + property real defaultRightPadding: Theme.dp(size === StatusBaseButton.Size.Large ? 24 : 12) property real defaultTopPadding: { switch (size) { case StatusBaseButton.Size.Tiny: - return 5 + return Theme.dp(5) case StatusBaseButton.Size.Small: - return 10 + return Theme.dp(10) case StatusBaseButton.Size.Large: default: - return 11 + return Theme.dp(11) } } property real defaultBottomPadding: { switch (size) { case StatusBaseButton.Size.Tiny: - return 5 + return Theme.dp(5) case StatusBaseButton.Size.Small: - return 10 + return Theme.dp(10) case StatusBaseButton.Size.Large: default: - return 11 + return Theme.dp(11) } } @@ -84,7 +84,7 @@ Rectangle { implicitWidth: sensor.width implicitHeight: sensor.height - radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6 + radius: Theme.dp(size !== StatusBaseButton.Size.Tiny ? 8 : 6) color: { if (statusBaseButton.enabled) @@ -123,7 +123,7 @@ Rectangle { anchors.left: parent.left anchors.leftMargin: statusBaseButton.leftPadding anchors.verticalCenter: parent.verticalCenter - spacing: 4 + spacing: Theme.dp(4) StatusIcon { id: statusIcon width: statusBaseButton.icon.width @@ -146,7 +146,7 @@ Rectangle { id: label opacity: !loading 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 } // Text diff --git a/src/StatusQ/Controls/StatusBaseInput.qml b/src/StatusQ/Controls/StatusBaseInput.qml index 0f8dd179..ccdb393b 100644 --- a/src/StatusQ/Controls/StatusBaseInput.qml +++ b/src/StatusQ/Controls/StatusBaseInput.qml @@ -153,22 +153,22 @@ Item { \qmlproperty real StatusBaseInput::leftPadding 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 This property sets the right padding. */ - property real rightPadding: 16 + property real rightPadding: Theme.dp(16) /*! \qmlproperty real StatusBaseInput::topPadding This property sets the top padding. */ - property real topPadding: 12 + property real topPadding: Theme.dp(12) /*! \qmlproperty alias StatusBaseInput::bottomPadding This property sets the bottom padding. */ - property real bottomPadding: 12 + property real bottomPadding: Theme.dp(12) /*! \qmlproperty var StatusBaseInput::tabNavItem 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. */ property StatusIconSettings icon: StatusIconSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) name: "" color: Theme.palette.baseColor1 emoji: "" - letterSize: emoji ? 11 : 14 + letterSize: Theme.dp(emoji ? 11 : 14) background: StatusIconBackgroundSettings { - width: 30 - height: 30 + width: Theme.dp(30) + height: Theme.dp(30) color: Theme.palette.indirectColor1 } } @@ -277,10 +277,10 @@ Item { */ signal editClicked() - implicitWidth: 448 + implicitWidth: Theme.dp(448) implicitHeight: multiline ? Math.min(Math.max( (edit.implicitHeight + topPadding + bottomPadding), - 44, root.minimumHeight), root.maximumHeight) : 44 + Theme.dp(44), root.minimumHeight), root.maximumHeight) : Theme.dp(44) Rectangle { id: background @@ -293,7 +293,7 @@ Item { maximumHeight) : parent.height color: root.showBackground ? Theme.palette.baseColor2 : "transparent" - radius: 8 + radius: Theme.dp(8) clip: true @@ -324,7 +324,7 @@ Item { root.editClicked() } RowLayout { - spacing: 10 + spacing: Theme.dp(10) anchors { fill: parent leftMargin: root.leftPadding @@ -335,6 +335,8 @@ Item { Loader { id: leftComponentLoader + width: item ? item.width : 0 + height: item ? item.height : 0 sourceComponent: { if (root.leftComponent) return root.leftComponent if (!root.leftIcon) return undefined @@ -385,7 +387,7 @@ Item { selectionColor: Theme.palette.primaryColor2 selectedTextColor: color focus: true - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) font.family: Theme.palette.baseFont.name color: Theme.palette.directColor1 wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap @@ -424,9 +426,9 @@ Item { cursorDelegate: Rectangle { color: Theme.palette.primaryColor1 - implicitWidth: 2 - implicitHeight: 22 - radius: 1 + implicitWidth: Theme.dp(2) + implicitHeight: Theme.dp(22) + radius: Theme.dp(1) visible: edit.cursorVisible SequentialAnimation on visible { @@ -442,7 +444,7 @@ Item { visible: (edit.text.length === 0) anchors.fill: parent verticalAlignment: parent.verticalAlignment - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) elide: StatusBaseText.ElideRight font.family: Theme.palette.baseFont.name color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6 @@ -472,11 +474,11 @@ Item { visible: edit.text.length != 0 && root.clearable && !root.multiline && edit.activeFocus type: StatusFlatRoundButton.Type.Secondary - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) icon.name: "clear" - icon.width: 16 - icon.height: 16 + icon.width: Theme.dp(16) + icon.height: Theme.dp(16) icon.color: Theme.palette.baseColor1 onClicked: { edit.clear() @@ -490,8 +492,8 @@ Item { StatusSmartIdenticon { id: identicon - icon.width: 24 - icon.height: 24 + icon.width: Theme.dp(24) + icon.height: Theme.dp(24) icon.background: root.icon.background icon.color: root.icon.color icon.letterSize: root.icon.letterSize diff --git a/src/StatusQ/Controls/StatusChatCommandButton.qml b/src/StatusQ/Controls/StatusChatCommandButton.qml index 493957c2..91308d45 100644 --- a/src/StatusQ/Controls/StatusChatCommandButton.qml +++ b/src/StatusQ/Controls/StatusChatCommandButton.qml @@ -7,8 +7,8 @@ import StatusQ.Components 0.1 Rectangle { id: root - implicitWidth: 168 - implicitHeight: 95 + implicitWidth: Theme.dp(168) + implicitHeight: Theme.dp(95) property string text: "" property bool highlighted: false @@ -17,8 +17,8 @@ Rectangle { signal clicked(var mouse) property StatusIconSettings icon: StatusIconSettings { - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) background: StatusIconBackgroundSettings {} } @@ -28,7 +28,7 @@ Rectangle { return actualColor } - radius: 16 + radius: Theme.dp(16) MouseArea { id: sensor @@ -46,22 +46,22 @@ Rectangle { icon.height: root.icon.height icon.rotation: root.icon.rotation icon.color: Theme.palette.white - icon.background.width: 40 - icon.background.height: 40 + icon.background.width: Theme.dp(40) + icon.background.height: Theme.dp(40) icon.background.color: root.icon.color anchors.top: parent.top - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) } StatusBaseText { text: root.text anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.bottom: parent.bottom - anchors.bottomMargin: 8 - font.pixelSize: 13 + anchors.bottomMargin: Theme.dp(8) + font.pixelSize: Theme.dp(13) font.weight: Font.Medium color: Theme.palette.white } diff --git a/src/StatusQ/Controls/StatusChatInfoButton.qml b/src/StatusQ/Controls/StatusChatInfoButton.qml index 50d0785f..ea59c2a0 100644 --- a/src/StatusQ/Controls/StatusChatInfoButton.qml +++ b/src/StatusQ/Controls/StatusChatInfoButton.qml @@ -11,20 +11,20 @@ Rectangle { Math.max( statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth, statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth - ) + 8 - implicitHeight: 48 + ) + Theme.dp(8) + implicitHeight: Theme.dp(48) property string title: "" property string subTitle: "" property bool muted: false property int pinnedMessagesCount: 0 property StatusImageSettings image: StatusImageSettings { - width: 36 - height: 36 + width: Theme.dp(36) + height: Theme.dp(36) } property StatusIconSettings icon: StatusIconSettings { - width: 36 - height: 36 + width: Theme.dp(36) + height: Theme.dp(36) charactersLen: 2 } property alias ringSettings: identicon.ringSettings @@ -48,7 +48,7 @@ Rectangle { CommunityChat // 6 } - radius: 8 + radius: Theme.dp(8) color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent" MouseArea { @@ -62,7 +62,7 @@ Rectangle { StatusSmartIdenticon { id: identicon anchors.left: parent.left - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.verticalCenter: parent.verticalCenter image: statusChatInfoButton.image icon: statusChatInfoButton.icon @@ -72,9 +72,9 @@ Rectangle { Item { id: statusChatInfoButtonTitle anchors.top: identicon.top - anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8 + anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : Theme.dp(8) anchors.left: identicon.right - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) width: Math.min(parent.width - anchors.leftMargin - identicon.width - identicon.anchors.leftMargin, @@ -84,16 +84,16 @@ Rectangle { implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth + mutedDelta - property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0 + property real mutedDelta: mutedIcon.visible ? mutedIcon.width + Theme.dp(8) : 0 StatusIcon { id: statusIcon anchors.top: parent.top - anchors.topMargin: -2 + anchors.topMargin: -Theme.dp(2) anchors.left: parent.left 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 icon: { switch (statusChatInfoButton.type) { @@ -129,7 +129,7 @@ Rectangle { "#" + statusChatInfoButton.title : statusChatInfoButton.title color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) font.weight: Font.Medium } @@ -137,10 +137,10 @@ Rectangle { objectName: "mutedIcon" id: mutedIcon anchors.left: chatName.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.top: chatName.top - anchors.topMargin: -2 - width: 13 + anchors.topMargin: -Theme.dp(2) + width: Theme.dp(13) icon: "tiny/muted" color: mutedIconSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 visible: statusChatInfoButton.muted @@ -158,7 +158,7 @@ Rectangle { text: "Unmute" visible: mutedIconSensor.containsMouse 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 height: visible ? chatType.height : 0 width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin - - identicon.width - identicon.anchors.leftMargin - 8, + - identicon.width - identicon.anchors.leftMargin - Theme.dp(8), implicitWidth) - implicitWidth: chatType.implicitWidth + pinIconDelta + 8 + implicitWidth: chatType.implicitWidth + pinIconDelta + Theme.dp(8) property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin @@ -184,7 +184,7 @@ Rectangle { id: chatType text: statusChatInfoButton.subTitle 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), implicitWidth) onLinkActivated: statusChatInfoButton.linkActivated(link) @@ -192,11 +192,11 @@ Rectangle { Rectangle { id: divider - height: 12 - width: 1 + height: Theme.dp(12) + width: Theme.dp(1) color: Theme.palette.directColor7 anchors.left: chatType.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.verticalCenter: chatType.verticalCenter visible: !!chatType.text && pinIcon.visible } @@ -205,9 +205,9 @@ Rectangle { id: pinIcon anchors.left: divider.visible ? divider.right : parent.left - anchors.leftMargin: -2 + anchors.leftMargin: -Theme.dp(2) anchors.verticalCenter: chatType.verticalCenter - height: 14 + height: Theme.dp(14) visible: statusChatInfoButton.pinnedMessagesCount > 0 icon: "pin" color: Theme.palette.baseColor1 @@ -215,12 +215,12 @@ Rectangle { StatusBaseText { anchors.left: pinIcon.right - anchors.leftMargin: -6 + anchors.leftMargin: -Theme.dp(6) anchors.verticalCenter: pinIcon.verticalCenter - width: 14 + width: Theme.dp(14) text: statusChatInfoButton.pinnedMessagesCount - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) font.underline: pinCountSensor.containsMouse visible: pinIcon.visible color: pinCountSensor.containsMouse ? Theme.palette.directColor1 : Theme.palette.baseColor1 diff --git a/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml index 78472cb1..be5928fe 100644 --- a/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml +++ b/src/StatusQ/Controls/StatusChatListCategoryItemButton.qml @@ -5,15 +5,15 @@ import StatusQ.Core 0.1 StatusFlatRoundButton { id: statusChatListCategoryItemButton - height: 22 - width: 22 - radius: 4 + height: Theme.dp(22) + width: Theme.dp(22) + radius: Theme.dp(4) property bool highlighted: false property StatusTooltipSettings tooltip: StatusTooltipSettings {} type: StatusFlatRoundButton.Type.Secondary - icon.width: 20 + icon.width: Theme.dp(20) icon.color: Theme.palette.directColor4 color: hovered || highlighted ? diff --git a/src/StatusQ/Controls/StatusCheckBox.qml b/src/StatusQ/Controls/StatusCheckBox.qml index 2aec1900..d13fadc5 100644 --- a/src/StatusQ/Controls/StatusCheckBox.qml +++ b/src/StatusQ/Controls/StatusCheckBox.qml @@ -11,18 +11,18 @@ CheckBox { id: statusCheckBox indicator: Rectangle { - implicitWidth: 18 - implicitHeight: 18 + implicitWidth: Theme.dp(18) + implicitHeight: Theme.dp(18) x: statusCheckBox.leftPadding y: parent.height / 2 - height / 2 - radius: 2 + radius: Theme.dp(2) color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1 : Theme.palette.directColor8 StatusIcon { icon: "checkbox" - width: 11 - height: 8 + width: Theme.dp(11) + height: Theme.dp(8) anchors.centerIn: parent anchors.horizontalCenterOffset: 1 color: Theme.palette.white diff --git a/src/StatusQ/Controls/StatusColorRadioButton.qml b/src/StatusQ/Controls/StatusColorRadioButton.qml index 489b8b12..b5ba5f9f 100644 --- a/src/StatusQ/Controls/StatusColorRadioButton.qml +++ b/src/StatusQ/Controls/StatusColorRadioButton.qml @@ -9,18 +9,18 @@ RadioButton { property string radioButtonColor: "" property string selectionColor: StatusColors.colors['white'] - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: Theme.dp(48) + implicitHeight: Theme.dp(48) indicator: Rectangle { - implicitWidth: 48 - implicitHeight: 48 + implicitWidth: Theme.dp(48) + implicitHeight: Theme.dp(48) radius: width/2 color: radioButtonColor Rectangle { - width: 20 - height: 20 + width: Theme.dp(20) + height: Theme.dp(20) radius: width/2 color: selectionColor border.color: StatusColors.colors['grey3'] diff --git a/src/StatusQ/Controls/StatusColorSelector.qml b/src/StatusQ/Controls/StatusColorSelector.qml index 847ab60b..be9a10cf 100644 --- a/src/StatusQ/Controls/StatusColorSelector.qml +++ b/src/StatusQ/Controls/StatusColorSelector.qml @@ -1,6 +1,7 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import StatusQ.Controls 0.1 +import StatusQ.Core.Theme 0.1 Item { id: root @@ -8,7 +9,7 @@ Item { property string label: "Color" property var model height: accountColorInput.height - implicitWidth: 448 + implicitWidth: Theme.dp(448) StatusSelect { id: accountColorInput @@ -20,9 +21,9 @@ Item { MenuItem { property bool isFirstItem: index === 0 property bool isLastItem: index === root.model.length - 1 - height: 52 + height: Theme.dp(52) width: parent.width - padding: 10 + padding: Theme.dp(10) onTriggered: function () { const selectedColor = root.model[index] root.selectedColor = selectedColor diff --git a/src/StatusQ/Controls/StatusColorSelectorGrid.qml b/src/StatusQ/Controls/StatusColorSelectorGrid.qml index ebc6e676..e342d82c 100644 --- a/src/StatusQ/Controls/StatusColorSelectorGrid.qml +++ b/src/StatusQ/Controls/StatusColorSelectorGrid.qml @@ -29,20 +29,20 @@ Column { signal colorSelected(color color) - spacing: 16 + spacing: Theme.dp(16) StatusBaseText { id: title verticalAlignment: Text.AlignVCenter - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) color: Theme.palette.baseColor1 } Grid { id: grid columns: 6 - rowSpacing: 16 - columnSpacing: 32 + rowSpacing: Theme.dp(16) + columnSpacing: Theme.dp(32) Repeater { model: root.model delegate: StatusColorRadioButton { diff --git a/src/StatusQ/Controls/StatusCommunityTag.qml b/src/StatusQ/Controls/StatusCommunityTag.qml index f5ebe71c..e7baad9f 100644 --- a/src/StatusQ/Controls/StatusCommunityTag.qml +++ b/src/StatusQ/Controls/StatusCommunityTag.qml @@ -13,11 +13,11 @@ Rectangle { signal clicked() - implicitHeight: 32 - implicitWidth: row.width + 20 + implicitHeight: Theme.dp(32) + implicitWidth: row.width + Theme.dp(20) radius: height / 2 border.color: Theme.palette.baseColor2 - border.width: 1 + border.width: Theme.dp(1) color: mouseArea.containsMouse ? Theme.palette.primaryColor2 : "transparent" MouseArea { @@ -38,13 +38,13 @@ Rectangle { } Item { - width: 5 + width: Theme.dp(5) height: width } StatusBaseText { anchors.verticalCenter: parent.verticalCenter - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) color: root.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1 text: root.name } diff --git a/src/StatusQ/Controls/StatusFlatButton.qml b/src/StatusQ/Controls/StatusFlatButton.qml index 4a64713a..fd5bb121 100644 --- a/src/StatusQ/Controls/StatusFlatButton.qml +++ b/src/StatusQ/Controls/StatusFlatButton.qml @@ -16,6 +16,6 @@ StatusBaseButton { border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent" : Theme.palette.baseColor2 - rightPadding: icon.name !== "" ? 18 : defaultRightPadding - leftPadding: icon.name !== "" ? 14 : defaultLeftPadding + rightPadding: icon.name !== "" ? Theme.dp(18) : defaultRightPadding + leftPadding: icon.name !== "" ? Theme.dp(14) : defaultLeftPadding } diff --git a/src/StatusQ/Controls/StatusFlatRoundButton.qml b/src/StatusQ/Controls/StatusFlatRoundButton.qml index f3f12de4..1a8307d1 100644 --- a/src/StatusQ/Controls/StatusFlatRoundButton.qml +++ b/src/StatusQ/Controls/StatusFlatRoundButton.qml @@ -8,8 +8,8 @@ Rectangle { id: statusFlatRoundButton property StatusIconSettings icon: StatusIconSettings { - width: 23 - height: 23 + width: Theme.dp(23) + height: Theme.dp(23) rotation: 0 color: { @@ -106,9 +106,9 @@ Rectangle { } } - implicitWidth: 44 - implicitHeight: 44 - radius: 8 + implicitWidth: Theme.dp(44) + implicitHeight: Theme.dp(44) + radius: Theme.dp(8) color: { if (statusFlatRoundButton.enabled) { diff --git a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml index b4a62f2a..724a4a3c 100644 --- a/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml +++ b/src/StatusQ/Controls/StatusFloatingButtonsSelector.qml @@ -85,8 +85,8 @@ Row { popupMenu.close() } - height: 32 - spacing: 12 + height: Theme.dp(32) + spacing: Theme.dp(12) clip: true Repeater { @@ -97,19 +97,19 @@ Row { Rectangle { width: button.width height: button.height - radius: 8 + radius: Theme.dp(8) visible: floatingButtons.model.count > 3 StatusButton { id: button - implicitHeight: 32 - topPadding: 8 + implicitHeight: Theme.dp(32) + topPadding: Theme.dp(8) bottomPadding: 0 - defaultLeftPadding: 4 - defaultRightPadding: 4 + defaultLeftPadding: Theme.dp(4) + defaultRightPadding: Theme.dp(4) normalColor: "transparent" icon.name: "more" icon.background.color: "transparent" - onClicked: popupMenu.popup(parent.x, y + height + 8) + onClicked: popupMenu.popup(parent.x, y + height + Theme.dp(8)) } } diff --git a/src/StatusQ/Controls/StatusIconTabButton.qml b/src/StatusQ/Controls/StatusIconTabButton.qml index c4879c68..d738f6bc 100644 --- a/src/StatusQ/Controls/StatusIconTabButton.qml +++ b/src/StatusQ/Controls/StatusIconTabButton.qml @@ -13,11 +13,11 @@ TabButton { property alias identicon: identicon - implicitWidth: 40 - implicitHeight: 40 + implicitWidth: Theme.dp(40) + implicitHeight: Theme.dp(40) - icon.height: 24 - icon.width: 24 + icon.height: Theme.dp(24) + icon.width: Theme.dp(24) icon.color: Theme.palette.baseColor1 contentItem: Item { @@ -27,8 +27,8 @@ TabButton { anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter image.source: statusIconTabButton.icon.source - image.width: 28 - image.height: 28 + image.width: Theme.dp(28) + image.height: Theme.dp(28) icon.height: statusIconTabButton.icon.height icon.width: statusIconTabButton.icon.width icon.name: statusIconTabButton.icon.name @@ -41,7 +41,7 @@ TabButton { background: Rectangle { color: hovered || highlighted || ((!!icon.source.toString() || !!name) && checked) ? Theme.palette.primaryColor3 : "transparent" border.color: Theme.palette.primaryColor1 - border.width: (!!icon.source.toString() || !!name) && checked ? 1 : 0 + border.width: (!!icon.source.toString() || !!name) && checked ? Theme.dp(1) : 0 radius: statusIconTabButton.width / 2 } diff --git a/src/StatusQ/Controls/StatusIdenticonRing.qml b/src/StatusQ/Controls/StatusIdenticonRing.qml index a00106ec..f431364c 100644 --- a/src/StatusQ/Controls/StatusIdenticonRing.qml +++ b/src/StatusQ/Controls/StatusIdenticonRing.qml @@ -2,6 +2,7 @@ import QtQuick 2.0 import QtQuick.Layouts 1.0 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 /*! \qmltype StatusIdenticonRing \inherits Item @@ -59,7 +60,7 @@ Item { */ property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings { initalAngleRad: 0 - ringPxSize: 1.5 + ringPxSize: Theme.dp(1.5) } visible: settings.ringSpecModel !== undefined diff --git a/src/StatusQ/Controls/StatusImageCrop.qml b/src/StatusQ/Controls/StatusImageCrop.qml index 62227151..a8ea4e49 100644 --- a/src/StatusQ/Controls/StatusImageCrop.qml +++ b/src/StatusQ/Controls/StatusImageCrop.qml @@ -57,8 +57,8 @@ import StatusQ.Core.Theme 0.1 Item { id: root - implicitWidth: 400 - implicitHeight: 400 / aspectRatio + implicitWidth: Theme.dp(400) + implicitHeight: Theme.dp(400) / aspectRatio /*! \qmlproperty url StatusImageCrop::source @@ -81,7 +81,7 @@ Item { \qmlproperty int StatusImageCrop::radius Valid only when windowStyle is Rounded */ - property int radius: 8 + property int radius: Theme.dp(8) /*! \qmlproperty color StatusImageCrop::wallColor Color used outside the crop-rect. Tells user which part won't be available after cropping diff --git a/src/StatusQ/Controls/StatusInput.qml b/src/StatusQ/Controls/StatusInput.qml index 7d4ac87b..944409f9 100644 --- a/src/StatusQ/Controls/StatusInput.qml +++ b/src/StatusQ/Controls/StatusInput.qml @@ -99,12 +99,12 @@ Item { \qmlproperty real StatusBaseInput::leftPadding This property sets the leftComponentLoader's left padding. */ - property real leftPadding: 16 + property real leftPadding: Theme.dp(16) /*! \qmlproperty real StatusBaseInput::rightPadding This property sets the right padding. */ - property real rightPadding: 16 + property real rightPadding: Theme.dp(16) /*! \qmlproperty list StatusBaseInput::validators This property sets the list of validators to be considered. @@ -325,7 +325,7 @@ Item { visible: !!root.label elide: Text.ElideRight text: root.label - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 } @@ -334,7 +334,7 @@ Item { visible: !!root.secondaryLabel elide: Text.ElideRight text: root.secondaryLabel - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 } @@ -348,7 +348,7 @@ Item { visible: root.charLimit > 0 text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit) - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6 } } @@ -377,7 +377,7 @@ Item { visible: !!text && !statusBaseInput.valid - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) color: Theme.palette.dangerColor1 horizontalAlignment: Text.AlignRight diff --git a/src/StatusQ/Controls/StatusItemPicker.qml b/src/StatusQ/Controls/StatusItemPicker.qml index 4267401c..8e8a1624 100644 --- a/src/StatusQ/Controls/StatusItemPicker.qml +++ b/src/StatusQ/Controls/StatusItemPicker.qml @@ -95,7 +95,7 @@ Rectangle { QtObject { id: d - property int minShortNameWidth: 50 + property int minShortNameWidth: Theme.dp(50) function availableTextWidth() { return root.width - imageItem.width - row.spacing - shortNameItem.anchors.rightMargin - selector.width - selector.anchors.rightMargin - 24/*Margin between both texts*/ @@ -105,9 +105,9 @@ Rectangle { Row { id: row anchors.left: parent.left - anchors.leftMargin: 18 + anchors.leftMargin: Theme.dp(18) anchors.verticalCenter: parent.verticalCenter - spacing: 8 + spacing: Theme.dp(8) StatusIcon { id: imageItem @@ -126,7 +126,7 @@ Rectangle { dummyNameItem.width text: root.name color: Theme.palette.directColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) clip: true elide: Text.ElideRight } @@ -135,7 +135,7 @@ Rectangle { id: dummyNameItem visible: false text: root.name - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } } @@ -145,11 +145,11 @@ Rectangle { d.minShortNameWidth : d.availableTextWidth() - nameItem.width anchors.right: selector.left - anchors.rightMargin: 10 + anchors.rightMargin: Theme.dp(10) anchors.verticalCenter: parent.verticalCenter text: root.shortName color: Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) clip: true elide: Text.ElideRight horizontalAlignment: Text.AlignRight @@ -160,7 +160,7 @@ Rectangle { id: selector anchors.right: parent.right anchors.verticalCenter: parent.verticalCenter - anchors.rightMargin: 18 + anchors.rightMargin: Theme.dp(18) sourceComponent: root.selectorType === StatusItemPicker.SelectorType.RadioButton ? radioBtn : checkbox } diff --git a/src/StatusQ/Controls/StatusLabeledSlider.qml b/src/StatusQ/Controls/StatusLabeledSlider.qml index 9a93e232..1d492b52 100644 --- a/src/StatusQ/Controls/StatusLabeledSlider.qml +++ b/src/StatusQ/Controls/StatusLabeledSlider.qml @@ -10,12 +10,12 @@ StatusSlider { id: root property var model: [] - property int fontSize: 12 - property int labelMargin: 2 + property int fontSize: Theme.dp(12) + property int labelMargin: Theme.dp(2) fillColor: bgColor handleColor: Theme.palette.primaryColor1 - handleSize: 14 + handleSize: Theme.dp(14) from: 0 to: model.length - 1 stepSize: 1 @@ -36,7 +36,7 @@ StatusSlider { radius: root.handleSize / 2 color: root.bgColor border.color: Theme.palette.statusAppLayout.backgroundColor - border.width: 2 + border.width: Theme.dp(2) StatusBaseText { anchors.top: parent.bottom diff --git a/src/StatusQ/Controls/StatusNavBarTabButton.qml b/src/StatusQ/Controls/StatusNavBarTabButton.qml index 3d8d91c0..493e2376 100644 --- a/src/StatusQ/Controls/StatusNavBarTabButton.qml +++ b/src/StatusQ/Controls/StatusNavBarTabButton.qml @@ -2,6 +2,7 @@ import QtQuick 2.13 import StatusQ.Components 0.1 import StatusQ.Controls 0.1 import StatusQ.Popups 0.1 +import StatusQ.Core.Theme 0.1 StatusIconTabButton { id: statusNavBarTabButton @@ -22,8 +23,8 @@ StatusIconTabButton { visible: statusNavBarTabButton.hovered && !!statusTooltip.text delay: 50 orientation: StatusToolTip.Orientation.Right - x: statusNavBarTabButton.width + 16 - y: statusNavBarTabButton.height / 2 - height / 2 + 4 + x: statusNavBarTabButton.width + Theme.dp(16) + y: statusNavBarTabButton.height / 2 - height / 2 + Theme.dp(4) } StatusBadge { @@ -32,15 +33,15 @@ StatusIconTabButton { anchors.top: parent.top anchors.left: parent.right anchors.leftMargin: { - if (statusBadge.value > 99) { - return -22 + if (statusBadge.value > Theme.dp(99)) { + return -Theme.dp(22) } - if (statusBadge.value > 9) { - return -21 + if (statusBadge.value > Theme.dp(9)) { + return -Theme.dp(21) } - return -18 + return -Theme.dp(18) } - anchors.topMargin: 4 + anchors.topMargin: Theme.dp(4) } MouseArea { diff --git a/src/StatusQ/Controls/StatusPickerButton.qml b/src/StatusQ/Controls/StatusPickerButton.qml index c8f4691f..c17f737e 100644 --- a/src/StatusQ/Controls/StatusPickerButton.qml +++ b/src/StatusQ/Controls/StatusPickerButton.qml @@ -6,14 +6,14 @@ import StatusQ.Core.Theme 0.1 Button { id: root - implicitWidth: 446 - implicitHeight: 44 + implicitWidth: Theme.dp(446) + implicitHeight: Theme.dp(44) property color bgColor: Theme.palette.baseColor2 property color contentColor: Theme.palette.baseColor1 property var type: StatusPickerButton.Type.Next - property int lateralMargins: 16 - property int textPixelSize: 15 + property int lateralMargins: Theme.dp(16) + property int textPixelSize: Theme.dp(15) enum Type { Next, @@ -25,7 +25,7 @@ Button { Rectangle { id: background anchors.fill: parent - radius: 8 + radius: Theme.dp(8) color: root.bgColor } } diff --git a/src/StatusQ/Controls/StatusPinInput.qml b/src/StatusQ/Controls/StatusPinInput.qml index bd6185e2..dd0d0074 100644 --- a/src/StatusQ/Controls/StatusPinInput.qml +++ b/src/StatusQ/Controls/StatusPinInput.qml @@ -69,13 +69,13 @@ Item { \qmlproperty int StatusPinInput::circleSpacing This property allows you to customize spacing between pin circles. The default value is 16 pixels. */ - property int circleSpacing: 16 + property int circleSpacing: Theme.dp(16) /*! \qmlproperty int StatusPinInput::circleDiameter This property allows you to customize pin circle diameter. The default value is 16 pixels. */ - property int circleDiameter: 16 + property int circleDiameter: Theme.dp(16) QtObject { id: d diff --git a/src/StatusQ/Controls/StatusProgressBar.qml b/src/StatusQ/Controls/StatusProgressBar.qml index 93ed55aa..6f16b541 100644 --- a/src/StatusQ/Controls/StatusProgressBar.qml +++ b/src/StatusQ/Controls/StatusProgressBar.qml @@ -12,8 +12,8 @@ ProgressBar { property color backgroundColor: Theme.palette.directColor8 property color backgroundBorderColor: "transparent" - width: 416 - height: 16 + width: Theme.dp(416) + height: Theme.dp(16) clip: true background: Rectangle { @@ -21,7 +21,7 @@ ProgressBar { implicitHeight: parent.height color: control.backgroundColor border.color: control.backgroundBorderColor - radius: 5 + radius: Theme.dp(5) } contentItem: Item { implicitHeight: parent.height @@ -31,14 +31,14 @@ ProgressBar { width: control.visualPosition * parent.width height: parent.height color: control.fillColor - radius: 5 + radius: Theme.dp(5) StatusBaseText { id: textItem anchors.centerIn: parent property bool _fittedInBar: width < bar.width ? true : false text: control.text - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) color: Theme.palette.indirectColor1 Component.onCompleted: opacity = width < bar.width ? 1 : 0 on_FittedInBarChanged: { diff --git a/src/StatusQ/Controls/StatusRadioButton.qml b/src/StatusQ/Controls/StatusRadioButton.qml index 95a3b5cd..dcc4b11b 100644 --- a/src/StatusQ/Controls/StatusRadioButton.qml +++ b/src/StatusQ/Controls/StatusRadioButton.qml @@ -13,18 +13,18 @@ RadioButton { width: indicator.implicitWidth indicator: Rectangle { - implicitWidth: 20 - implicitHeight: 20 + implicitWidth: Theme.dp(20) + implicitHeight: Theme.dp(20) x: 0 y: 6 - radius: 10 + radius: Theme.dp(10) color: statusRadioButton.checked ? Theme.palette.primaryColor1 : Theme.palette.directColor8 Rectangle { - width: 12 - height: 12 - radius: 6 + width: Theme.dp(12) + height: Theme.dp(12) + radius: Theme.dp(6) anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter color: statusRadioButton.checked ? Theme.palette.white : "transparent" diff --git a/src/StatusQ/Controls/StatusRoundButton.qml b/src/StatusQ/Controls/StatusRoundButton.qml index 51dca636..9e033aab 100644 --- a/src/StatusQ/Controls/StatusRoundButton.qml +++ b/src/StatusQ/Controls/StatusRoundButton.qml @@ -8,8 +8,8 @@ Rectangle { id: statusRoundButton property StatusIconSettings icon: StatusIconSettings { - width: 23 - height: 23 + width: Theme.dp(23) + height: Theme.dp(23) rotation: 0 property color hoverColor: { @@ -110,8 +110,8 @@ Rectangle { statusRoundButton.icon.color } - implicitWidth: 44 - implicitHeight: 44 + implicitWidth: Theme.dp(44) + implicitHeight: Theme.dp(44) radius: width / 2; color: { diff --git a/src/StatusQ/Controls/StatusSeedPhraseInput.qml b/src/StatusQ/Controls/StatusSeedPhraseInput.qml index a41cef02..1bc53a46 100644 --- a/src/StatusQ/Controls/StatusSeedPhraseInput.qml +++ b/src/StatusQ/Controls/StatusSeedPhraseInput.qml @@ -47,8 +47,8 @@ import StatusQ.Core.Theme 0.1 Item { id: root - width: 162 - height: 44 + width: Theme.dp(162) + height: Theme.dp(44) /*! \qmlproperty alias StatusSeedPhraseInput::textEdit This property is an alias to the StatusInput's textEdit property. @@ -118,7 +118,7 @@ Item { text: root.leftComponentText color: seedWordInput.input.edit.activeFocus ? Theme.palette.primaryColor1 : Theme.palette.baseColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } input.acceptReturn: true onTextChanged: { @@ -170,24 +170,24 @@ Item { Item { id: suggListContainer width: seedSuggestionsList.width - height: (((seedSuggestionsList.count <= 5) ? seedSuggestionsList.count : 5) *34) + 16 + height: Theme.dp((((seedSuggestionsList.count <= 5) ? seedSuggestionsList.count : 5) *34) + 16) anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.top: seedWordInput.bottom - anchors.topMargin: 4 + anchors.topMargin: Theme.dp(4) visible: ((seedSuggestionsList.count > 0) && seedWordInput.input.edit.activeFocus) Rectangle { id: statusPopupMenuBackgroundContent anchors.fill: parent color: Theme.palette.statusPopupMenu.backgroundColor - radius: 8 + radius: Theme.dp(8) layer.enabled: true layer.effect: DropShadow { anchors.fill: parent source: statusPopupMenuBackgroundContent horizontalOffset: 0 - verticalOffset: 4 - radius: 12 + verticalOffset: Theme.dp(4) + radius: Theme.dp(12) samples: 25 spread: 0.2 color: Theme.palette.dropShadow @@ -195,12 +195,12 @@ Item { } ListView { id: seedSuggestionsList - width: ((seedSuggestionsList.contentItem.childrenRect.width + 24) > root.width) ? root.width - : (seedSuggestionsList.contentItem.childrenRect.width + 24) + width: ((seedSuggestionsList.contentItem.childrenRect.width + Theme.dp(24)) > root.width) ? root.width + : (seedSuggestionsList.contentItem.childrenRect.width + Theme.dp(24)) anchors.top: parent.top - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.bottom: parent.bottom - anchors.bottomMargin: 8 + anchors.bottomMargin: Theme.dp(8) onCountChanged: { seedSuggestionsList.currentIndex = 0 @@ -219,7 +219,7 @@ Item { delegate: Item { id: txtDelegate width: suggWord.contentWidth - height: 34 + height: Theme.dp(34) Rectangle { width: seedSuggestionsList.width height: parent.height @@ -229,11 +229,11 @@ Item { StatusBaseText { id: suggWord anchors.left: parent.left - anchors.leftMargin: 14 + anchors.leftMargin: Theme.dp(14) anchors.verticalCenter: parent.verticalCenter text: seedWord color: mouseArea.containsMouse || index === seedSuggestionsList.currentIndex ? Theme.palette.indirectColor1 : Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) elide: Text.ElideRight } MouseArea { diff --git a/src/StatusQ/Controls/StatusSelect.qml b/src/StatusQ/Controls/StatusSelect.qml index 61b298da..08f3409d 100644 --- a/src/StatusQ/Controls/StatusSelect.qml +++ b/src/StatusQ/Controls/StatusSelect.qml @@ -16,19 +16,19 @@ Item { property string label: "" readonly property bool hasLabel: label !== "" property color bgColor: Theme.palette.baseColor2 - readonly property int labelMargin: 7 + readonly property int labelMargin: Theme.dp(7) property var model property alias selectMenu: selectMenu property color bgColorHover: bgColor property alias selectedItemComponent: selectedItemContainer.children - property int caretRightMargin: 16 + property int caretRightMargin: Theme.dp(16) property alias select: inputRectangle property int menuAlignment: StatusSelect.MenuAlignment.Right property Item zeroItemsView: Item {} property string validationError: "" property alias validationErrorAlignment: validationErrorText.horizontalAlignment - property int validationErrorTopMargin: 11 - implicitWidth: 448 + property int validationErrorTopMargin: Theme.dp(11) + implicitWidth: Theme.dp(448) id: root height: inputRectangle.height + (hasLabel ? inputLabel.height + labelMargin : 0) + (!!validationError ? (validationErrorText.height + validationErrorTopMargin) : 0) @@ -41,21 +41,21 @@ Item { anchors.leftMargin: 0 anchors.top: parent.top anchors.topMargin: 0 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 } Rectangle { property bool hovered: false id: inputRectangle - height: 56 + height: Theme.dp(56) color: hovered ? bgColorHover : bgColor - radius: 8 + radius: Theme.dp(8) anchors.top: root.hasLabel ? inputLabel.bottom : parent.top anchors.topMargin: root.hasLabel ? root.labelMargin : 0 anchors.right: parent.right anchors.left: parent.left - border.width: !!validationError ? 1 : 0 + border.width: !!validationError ? Theme.dp(1) : 0 border.color: Theme.palette.dangerColor1 Item { @@ -68,8 +68,8 @@ Item { anchors.right: parent.right anchors.rightMargin: caretRightMargin anchors.verticalCenter: parent.verticalCenter - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) icon: "chevron-down" color: Theme.palette.baseColor1 } @@ -82,12 +82,12 @@ Item { y: selectMenu.y visible: selectMenu.opened color: Theme.palette.statusSelect.menuItemBackgroundColor - radius: 8 + radius: Theme.dp(8) border.color: Theme.palette.baseColor2 layer.enabled: true layer.effect: DropShadow { - verticalOffset: 3 - radius: 8 + verticalOffset: Theme.dp(3) + radius: Theme.dp(8) samples: 15 fast: true cached: true @@ -133,7 +133,7 @@ Item { anchors.topMargin: validationErrorTopMargin anchors.right: parent.right anchors.left: parent.left - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) height: visible ? implicitHeight : 0 color: Theme.palette.dangerColor1 horizontalAlignment: TextEdit.AlignRight diff --git a/src/StatusQ/Controls/StatusSelectableText.qml b/src/StatusQ/Controls/StatusSelectableText.qml index d5a65765..ae0404e7 100644 --- a/src/StatusQ/Controls/StatusSelectableText.qml +++ b/src/StatusQ/Controls/StatusSelectableText.qml @@ -79,7 +79,7 @@ Item { selectionColor: Theme.palette.primaryColor2 selectedTextColor: color focus: true - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) font.family: Theme.palette.baseFont.name color: Theme.palette.directColor1 textFormat: Text.RichText diff --git a/src/StatusQ/Controls/StatusSlider.qml b/src/StatusQ/Controls/StatusSlider.qml index e5811317..621d2730 100644 --- a/src/StatusQ/Controls/StatusSlider.qml +++ b/src/StatusQ/Controls/StatusSlider.qml @@ -13,15 +13,15 @@ import StatusQ.Controls 0.1 Slider { id: root - property int handleSize: 28 - property int bgHeight: 4 + property int handleSize: Theme.dp(28) + property int bgHeight: Theme.dp(4) property color handleColor: Theme.palette.white property color bgColor: Theme.palette.baseColor2 property color fillColor: Theme.palette.primaryColor1 property alias decoration: decorationContainer.sourceComponent - implicitWidth: 360 + implicitWidth: Theme.dp(360) implicitHeight: Math.max(handle.implicitHeight, background.implicitHeight + decorationContainer.height) @@ -32,12 +32,12 @@ Slider { x: root.leftPadding y: root.topPadding - implicitWidth: 100 + implicitWidth: Theme.dp(100) implicitHeight: bgHeight width: root.availableWidth height: implicitHeight color: root.bgColor - radius: 2 + radius: Theme.dp(2) Loader { id: decorationContainer @@ -49,7 +49,7 @@ Slider { width: root.visualPosition * parent.width height: parent.height color: root.fillColor - radius: 2 + radius: Theme.dp(2) } } // background @@ -65,7 +65,7 @@ Slider { width: parent.width height: parent.height visible: true - verticalOffset: 2 + verticalOffset: Theme.dp(2) samples: 15 fast: true cached: true diff --git a/src/StatusQ/Controls/StatusSwitch.qml b/src/StatusQ/Controls/StatusSwitch.qml index 370b8d87..cd80134d 100644 --- a/src/StatusQ/Controls/StatusSwitch.qml +++ b/src/StatusQ/Controls/StatusSwitch.qml @@ -10,8 +10,8 @@ Switch { indicator: Rectangle { id: oval - implicitWidth: 52 - implicitHeight: 28 + implicitWidth: Theme.dp(52) + implicitHeight: Theme.dp(28) x: statusSwitch.leftPadding y: parent.height / 2 - height / 2 radius: 14 @@ -21,17 +21,17 @@ Switch { Rectangle { id: circle - y: 4 - width: 20 - height: 20 - radius: 10 + y: Theme.dp(4) + width: Theme.dp(20) + height: Theme.dp(20) + radius: Theme.dp(10) color: Theme.palette.white layer.enabled: true layer.effect: DropShadow { width: parent.width height: parent.height visible: true - verticalOffset: 1 + verticalOffset: Theme.dp(1) fast: true cached: true color: Theme.palette.dropShadow diff --git a/src/StatusQ/Controls/StatusSwitchTabBar.qml b/src/StatusQ/Controls/StatusSwitchTabBar.qml index f58b01fa..b66ddf09 100644 --- a/src/StatusQ/Controls/StatusSwitchTabBar.qml +++ b/src/StatusQ/Controls/StatusSwitchTabBar.qml @@ -4,11 +4,11 @@ import StatusQ.Core.Theme 0.1 TabBar { id: statusSwitchTabBar - padding: 1 + padding: Theme.dp(1) background: Rectangle { - implicitHeight: 36 + implicitHeight: Theme.dp(36) color: Theme.palette.statusSwitchTab.barBackgroundColor - radius: 8 + radius: Theme.dp(8) } } diff --git a/src/StatusQ/Controls/StatusSwitchTabButton.qml b/src/StatusQ/Controls/StatusSwitchTabButton.qml index dfc215a6..3b8ca96c 100644 --- a/src/StatusQ/Controls/StatusSwitchTabButton.qml +++ b/src/StatusQ/Controls/StatusSwitchTabButton.qml @@ -9,7 +9,7 @@ TabButton { id: statusSwitchTabButton contentItem: Item { - height: 36 + height: Theme.dp(36) MouseArea { id: sensor hoverEnabled: true @@ -26,7 +26,7 @@ TabButton { Theme.palette.statusSwitchTab.selectedTextColor : Theme.palette.statusSwitchTab.textColor font.weight: Font.Medium - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) horizontalAlignment: Text.AlignHCenter anchors.centerIn: parent } @@ -35,17 +35,17 @@ TabButton { background: Rectangle { id: controlBackground - implicitHeight: 36 - implicitWidth: 148 + implicitHeight: Theme.dp(36) + implicitWidth: Theme.dp(148) color: statusSwitchTabButton.checked ? Theme.palette.statusSwitchTab.buttonBackgroundColor : "transparent" - radius: 8 + radius: Theme.dp(8) layer.enabled: true layer.effect: DropShadow { horizontalOffset: 0 verticalOffset: 0 - radius: 10 + radius: Theme.dp(10) samples: 25 spread: 0 color: Theme.palette.dropShadow diff --git a/src/StatusQ/Controls/StatusTabBarIconButton.qml b/src/StatusQ/Controls/StatusTabBarIconButton.qml index a2012784..05e717b7 100644 --- a/src/StatusQ/Controls/StatusTabBarIconButton.qml +++ b/src/StatusQ/Controls/StatusTabBarIconButton.qml @@ -17,8 +17,8 @@ Item { signal clicked(var mouse) - implicitWidth: 40 - implicitHeight: 40 + implicitWidth: Theme.dp(40) + implicitHeight: Theme.dp(40) MouseArea { id: sensor @@ -43,8 +43,8 @@ Item { visible: root.highlighted || sensor.containsMouse width: statusIcon.width anchors.horizontalCenter: parent.horizontalCenter - height: 2 - radius: 1 + height: Theme.dp(2) + radius: Theme.dp(1) color: Theme.palette.primaryColor1 anchors.bottom: parent.bottom } diff --git a/src/StatusQ/Controls/StatusTabButton.qml b/src/StatusQ/Controls/StatusTabButton.qml index 6bdc1848..991e49cc 100644 --- a/src/StatusQ/Controls/StatusTabButton.qml +++ b/src/StatusQ/Controls/StatusTabButton.qml @@ -27,8 +27,8 @@ TabButton { property alias badge: statusBadge - leftPadding: 12 - rightPadding: 12 + leftPadding: Theme.dp(12) + rightPadding: Theme.dp(12) background: Item { } @@ -51,14 +51,14 @@ TabButton { Layout.fillWidth: true elide: Qt.ElideRight font.weight: Font.Medium - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: root.checked || root.hovered ? Theme.palette.directColor1 : Theme.palette.baseColor1 text: root.text } StatusBadge { id: statusBadge - Layout.leftMargin: 10 + Layout.leftMargin: Theme.dp(10) visible: value > 0 } } @@ -67,9 +67,9 @@ TabButton { anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter visible: root.enabled && (root.checked || root.hovered) - implicitWidth: 24 - implicitHeight: 2 - radius: 4 + implicitWidth: Theme.dp(24) + implicitHeight: Theme.dp(2) + radius: Theme.dp(4) color: root.checked ? Theme.palette.primaryColor1 : Theme.palette.primaryColor2 } } diff --git a/src/StatusQ/Controls/StatusTagItem.qml b/src/StatusQ/Controls/StatusTagItem.qml index ff6c7658..2e9b9059 100644 --- a/src/StatusQ/Controls/StatusTagItem.qml +++ b/src/StatusQ/Controls/StatusTagItem.qml @@ -53,8 +53,8 @@ Rectangle { QtObject { id: d - property int tagMargins: 8 - property int tagIconsSize: 20 + property int tagMargins: Theme.dp(8) + property int tagIconsSize: Theme.dp(20) function getTagColor(isReadonly) { if(isReadonly) { @@ -67,16 +67,16 @@ Rectangle { } width: tagRow.implicitWidth + 2 * d.tagMargins - height: 30 + height: Theme.dp(30) color: d.getTagColor(root.isReadonly) - radius: 8 + radius: Theme.dp(8) Row { id: tagRow height: parent.height anchors.left: parent.left anchors.leftMargin: d.tagMargins anchors.rightMargin: d.tagMargins - spacing: 2 + spacing: Theme.dp(2) StatusIcon { visible: root.icon @@ -90,7 +90,7 @@ Rectangle { id: nameText anchors.verticalCenter: parent.verticalCenter color: Theme.palette.indirectColor1 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) text: root.text } StatusIcon { diff --git a/src/StatusQ/Controls/StatusTokenInlineSelector.qml b/src/StatusQ/Controls/StatusTokenInlineSelector.qml index 650066bd..0fbe624a 100644 --- a/src/StatusQ/Controls/StatusTokenInlineSelector.qml +++ b/src/StatusQ/Controls/StatusTokenInlineSelector.qml @@ -44,7 +44,7 @@ RowLayout { StatusBaseText { text: qsTr("Hold") color: Theme.palette.directColor6 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } Repeater { @@ -58,7 +58,7 @@ RowLayout { StatusBaseText { text: qsTr("or") color: Theme.palette.directColor6 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } Loader { @@ -73,7 +73,7 @@ RowLayout { StatusBaseText { text: qsTr("to post") color: Theme.palette.directColor6 - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } QtObject { @@ -99,8 +99,8 @@ RowLayout { property color hoverColor property color textColor - width: content.width + 4 - height: content.height + 4 + width: content.width + Theme.dp(4) + height: content.height + Theme.dp(4) radius: height/2 @@ -118,8 +118,8 @@ RowLayout { StatusRoundedImage { id: roundedImage - Layout.maximumHeight: text.height + 2 - Layout.maximumWidth: text.height + 2 + Layout.maximumHeight: text.height + Theme.dp(2) + Layout.maximumWidth: text.height + Theme.dp(2) image.source: tokenImageSource } @@ -127,11 +127,11 @@ RowLayout { id: text text: amount + " " + token color: textColor - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } Item { - implicitWidth: 2 + implicitWidth: Theme.dp(2) } } diff --git a/src/StatusQ/Controls/StatusToolTip.qml b/src/StatusQ/Controls/StatusToolTip.qml index 3c40779d..6401b126 100644 --- a/src/StatusQ/Controls/StatusToolTip.qml +++ b/src/StatusQ/Controls/StatusToolTip.qml @@ -13,50 +13,50 @@ ToolTip { Right } - property int maxWidth: 800 + property int maxWidth: Theme.dp(800) property int orientation: StatusToolTip.Orientation.Top property int offset: 0 property alias arrow: arrow implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16) - leftPadding: 8 - rightPadding: 8 - topPadding: 8 - bottomPadding: 8 + leftPadding: Theme.dp(8) + rightPadding: Theme.dp(8) + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) delay: 200 background: Item { id: statusToolTipBackground Rectangle { id: statusToolTipContentBackground color: Theme.palette.black - radius: 8 + radius: Theme.dp(8) anchors.fill: parent - anchors.bottomMargin: 8 + anchors.bottomMargin: Theme.dp(8) } Rectangle { id: arrow color: statusToolTipContentBackground.color - height: 20 - width: 20 + height: Theme.dp(20) + width: Theme.dp(20) rotation: 45 - radius: 1 + radius: Theme.dp(1) x: { if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) { return statusToolTipBackground.width / 2 - width / 2 + offset } if (orientation === StatusToolTip.Orientation.Left) { - return statusToolTipContentBackground.width - (width / 2) - 8 + offset + return statusToolTipContentBackground.width - (width / 2) - Theme.dp(8) + offset } if (orientation === StatusToolTip.Orientation.Right) { - return -width/2 + 8 + offset + return -width/2 + Theme.dp(8) + offset } } y: { if (orientation === StatusToolTip.Orientation.Bottom) { - return -height / 2 + 5 + return -height / 2 + Theme.dp(5) } if (orientation === StatusToolTip.Orientation.Top) { - return statusToolTipBackground.height - height - 5 + return statusToolTipBackground.height - height - Theme.dp(5) } if (orientation === StatusToolTip.Orientation.Left || orientation === StatusToolTip.Orientation.Right) { return statusToolTipContentBackground.height / 2 - (height / 2) @@ -69,10 +69,10 @@ ToolTip { text: statusToolTip.text color: Theme.palette.white wrapMode: Text.WordWrap - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) font.weight: Font.Medium horizontalAlignment: Text.AlignHCenter - bottomPadding: 8 + bottomPadding: Theme.dp(8) } } diff --git a/src/StatusQ/Controls/StatusWalletColorButton.qml b/src/StatusQ/Controls/StatusWalletColorButton.qml index a65266ad..330d5682 100644 --- a/src/StatusQ/Controls/StatusWalletColorButton.qml +++ b/src/StatusQ/Controls/StatusWalletColorButton.qml @@ -9,28 +9,28 @@ StatusFlatRoundButton { id: control property bool selected: false icon.name: "filled-account" - icon.width: 36 - icon.height: 36 + icon.width: Theme.dp(36) + icon.height: Theme.dp(36) Rectangle { anchors.fill: parent color: control.hovered ? control.icon.color : "transparent" opacity: 0.1 - radius: 8 + radius: Theme.dp(8) } Rectangle { - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) anchors.top: parent.top - anchors.topMargin: 2 + anchors.topMargin: Theme.dp(2) anchors.right: parent.right - anchors.rightMargin: 2 + anchors.rightMargin: Theme.dp(2) visible: control.selected radius: width / 2 color: Theme.palette.successColor1 StatusIcon { icon: "tiny/checkmark" - height: 12 + height: Theme.dp(12) color: Theme.palette.white anchors.horizontalCenter: parent.horizontalCenter anchors.verticalCenter: parent.verticalCenter diff --git a/src/StatusQ/Controls/StatusWalletColorSelect.qml b/src/StatusQ/Controls/StatusWalletColorSelect.qml index 9003e2a0..69dc40e0 100644 --- a/src/StatusQ/Controls/StatusWalletColorSelect.qml +++ b/src/StatusQ/Controls/StatusWalletColorSelect.qml @@ -15,22 +15,22 @@ Item { property bool enabled: true height: childrenRect.height - implicitWidth: 480 + implicitWidth: Theme.dp(480) StatusBaseText { id: label text: control.label anchors.left: parent.left anchors.top: parent.top - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: control.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 } RowLayout { id: colors - spacing: 6 + spacing: Theme.dp(6) anchors.top: label.bottom - anchors.topMargin: 8 + anchors.topMargin: Theme.dp(8) anchors.left: parent.left anchors.right: parent.right Repeater { diff --git a/src/StatusQ/Core/StatusIcon.qml b/src/StatusQ/Core/StatusIcon.qml index bee2eb50..4ca0debc 100644 --- a/src/StatusQ/Core/StatusIcon.qml +++ b/src/StatusQ/Core/StatusIcon.qml @@ -1,5 +1,6 @@ import QtQuick 2.13 import QtGraphicalEffects 1.13 +import StatusQ.Core.Theme 0.1 Image { property string icon: "" diff --git a/src/StatusQ/Core/StatusIconSettings.qml b/src/StatusQ/Core/StatusIconSettings.qml index ac12ce55..ac108c56 100644 --- a/src/StatusQ/Core/StatusIconSettings.qml +++ b/src/StatusQ/Core/StatusIconSettings.qml @@ -1,5 +1,6 @@ import QtQuick 2.13 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 QtObject { id: root @@ -12,14 +13,14 @@ QtObject { property url source property int rotation property bool isLetterIdenticon - property int letterSize: emoji ? 11 : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize) + property int letterSize: emoji ? Theme.dp(11) : (charactersLen == 1 ? _oneLetterSize : _twoLettersSize) property int charactersLen: 1 property string emoji property string emojiSize: _emojiSize property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {} // can't have QtObject { id: d } inside QtObject, using '_' to indicate private - readonly property int _oneLetterSize: Math.max(15, root.width / 2.0) - readonly property int _twoLettersSize: Math.max(12, root.width / 2.2) - readonly property string _emojiSize: "%1x%1".arg(Math.max(16, root.width * 0.6)) + readonly property int _oneLetterSize: Math.max(Theme.dp(15), root.width / 2.0) + readonly property int _twoLettersSize: Math.max(Theme.dp(12), root.width / 2.2) + readonly property string _emojiSize: "%1x%1".arg(Math.max(Theme.dp(16), root.width * 0.6)) } diff --git a/src/StatusQ/Core/StatusModalHeaderSettings.qml b/src/StatusQ/Core/StatusModalHeaderSettings.qml index 3e72278d..86d18882 100644 --- a/src/StatusQ/Core/StatusModalHeaderSettings.qml +++ b/src/StatusQ/Core/StatusModalHeaderSettings.qml @@ -1,5 +1,7 @@ import QtQuick 2.14 +import StatusQ.Core.Theme 0.1 + QtObject { property string title property string subTitle @@ -9,14 +11,14 @@ QtObject { property bool editable: false property Component popupMenu property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) isIdenticon: false } property StatusIconSettings icon: StatusIconSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) isLetterIdenticon: false } } diff --git a/src/StatusQ/Core/Theme/Theme.qml b/src/StatusQ/Core/Theme/Theme.qml index ce0ec346..7e7830cd 100644 --- a/src/StatusQ/Core/Theme/Theme.qml +++ b/src/StatusQ/Core/Theme/Theme.qml @@ -1,4 +1,5 @@ pragma Singleton +import QtQuick.Window 2.14 import QtQuick 2.13 @@ -6,9 +7,22 @@ QtObject { id: appTheme property QtObject palette: StatusLightTheme {} + readonly property int screenWidth: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width + : 1224 + readonly property int screenHeight: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height + :840 function setTheme(theme) { palette = theme } + + function isHtml(text) { + return (/<\/?[a-z][\s\S]*>/i.test(text)) + } + + property real scaleFactor: 1.0 + function dp(value) { + return (value * scaleFactor); + } } diff --git a/src/StatusQ/Core/Utils/Utils.qml b/src/StatusQ/Core/Utils/Utils.qml index 46afc422..1d681b50 100644 --- a/src/StatusQ/Core/Utils/Utils.qml +++ b/src/StatusQ/Core/Utils/Utils.qml @@ -71,10 +71,6 @@ QtObject { } return strNumber.replace(/(\.[0-9]*[1-9])0+$|\.0*$/,'$1') } - - function isHtml(text) { - return (/<\/?[a-z][\s\S]*>/i.test(text)) - } } diff --git a/src/StatusQ/Layout/StatusAppLayout.qml b/src/StatusQ/Layout/StatusAppLayout.qml index 0e996fcc..1411b642 100644 --- a/src/StatusQ/Layout/StatusAppLayout.qml +++ b/src/StatusQ/Layout/StatusAppLayout.qml @@ -8,8 +8,8 @@ import StatusQ.Core.Theme 0.1 Rectangle { id: statusAppLayout - implicitWidth: 900 - implicitHeight: 600 + implicitWidth: Theme.dp(900) + implicitHeight: Theme.dp(600) color: Theme.palette.statusAppLayout.backgroundColor @@ -37,7 +37,7 @@ Rectangle { Item { id: appNavBarSlot height: statusAppLayout.height - width: 78 + width: Theme.dp(78) } Item { diff --git a/src/StatusQ/Layout/StatusAppNavBar.qml b/src/StatusQ/Layout/StatusAppNavBar.qml index 95144c04..295b1efb 100644 --- a/src/StatusQ/Layout/StatusAppNavBar.qml +++ b/src/StatusQ/Layout/StatusAppNavBar.qml @@ -12,14 +12,14 @@ import StatusQ.Popups 0.1 Rectangle { id: statusAppNavBar - width: 78 - implicitHeight: 600 + width: Theme.dp(78) + implicitHeight: Theme.dp(600) color: Theme.palette.statusAppNavBar.backgroundColor property var sectionModel: [] property string communityTypeRole: "" property int communityTypeValue: -1 - property int navBarButtonSpacing: 12 + property int navBarButtonSpacing: Theme.dp(12) property StatusNavBarTabButton navBarProfileButton property Component regularNavBarButton @@ -70,7 +70,7 @@ Rectangle { height: (necessaryHightForCommunities > maxHightForCommunities)? maxHightForCommunities : necessaryHightForCommunities - property int communityNavBarButtonHeight: 40 + property int communityNavBarButtonHeight: Theme.dp(40) property int maxHightForCommunities: { let numOfOtherThanCommunityBtns = navBarListView.model.count - 1 @@ -110,8 +110,8 @@ Rectangle { visible: parent.necessaryHightForCommunities > parent.maxHightForCommunities Rectangle { - height: 1 - width: 30 + height: Theme.dp(1) + width: Theme.dp(30) color: Theme.palette.directColor7 anchors.top: parent.top anchors.horizontalCenter: parent.horizontalCenter @@ -139,7 +139,7 @@ Rectangle { Rectangle { height: 1 - width: 30 + width: Theme.dp(30) color: Theme.palette.directColor7 anchors.bottom: parent.bottom anchors.horizontalCenter: parent.horizontalCenter @@ -153,7 +153,7 @@ Rectangle { anchors.left: parent.left anchors.right: parent.right anchors.top: parent.top - anchors.topMargin: 48 + anchors.topMargin: Theme.dp(48) anchors.bottom: navBarProfileButtonSlot.top anchors.bottomMargin: navBarButtonSpacing @@ -169,6 +169,6 @@ Rectangle { width: visible? statusAppNavBar.navBarProfileButton.width : 0 visible: !!statusAppNavBar.navBarProfileButton anchors.bottom: parent.bottom - anchors.bottomMargin: visible ? 32 : 0 + anchors.bottomMargin: visible ? Theme.dp(32) : 0 } } diff --git a/src/StatusQ/Layout/StatusAppThreePanelLayout.qml b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml index 019549ea..f9a90b32 100644 --- a/src/StatusQ/Layout/StatusAppThreePanelLayout.qml +++ b/src/StatusQ/Layout/StatusAppThreePanelLayout.qml @@ -4,8 +4,8 @@ import StatusQ.Core.Theme 0.1 SplitView { id: root - implicitWidth: 822 - implicitHeight: 600 + implicitWidth: Theme.dp(822) + implicitHeight: Theme.dp(600) handle: Item { } @@ -15,8 +15,8 @@ SplitView { property bool showRightPanel Control { - SplitView.minimumWidth: 300 - SplitView.preferredWidth: 300 + SplitView.minimumWidth: Theme.dp(300) + SplitView.preferredWidth: Theme.dp(300) SplitView.fillHeight: true contentItem: (!!leftPanel) ? leftPanel : null background: Rectangle { @@ -26,10 +26,10 @@ SplitView { } Control { - SplitView.minimumWidth: 300 + SplitView.minimumWidth: Theme.dp(300) SplitView.fillWidth: true SplitView.fillHeight: true - leftPadding: -5 + leftPadding: -Theme.dp(5) contentItem: (!!centerPanel) ? centerPanel : null background: Rectangle { anchors.fill: parent @@ -38,8 +38,8 @@ SplitView { } Control { - SplitView.preferredWidth: root.showRightPanel ? 250 : 0 - SplitView.minimumWidth: root.showRightPanel ? 58 : 0 + SplitView.preferredWidth: root.showRightPanel ? Theme.dp(250) : 0 + SplitView.minimumWidth: root.showRightPanel ? Theme.dp(58) : 0 opacity: root.showRightPanel ? 1.0 : 0.0 visible: (opacity > 0.1) contentItem: Loader { diff --git a/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml b/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml index ab4a29f2..a42a840c 100644 --- a/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml +++ b/src/StatusQ/Layout/StatusAppTwoPanelLayout.qml @@ -8,8 +8,8 @@ import StatusQ.Core.Theme 0.1 Item { id: statusAppTwoPanelLayout - implicitWidth: 822 - implicitHeight: 600 + implicitWidth: Theme.dp(822) + implicitHeight: Theme.dp(600) property Item leftPanel property Item rightPanel @@ -32,7 +32,7 @@ Item { Rectangle { id: leftPanelSlot height: parent.height - width: 304 + width: Theme.dp(304) color: Theme.palette.baseColor4 } diff --git a/src/StatusQ/Platform/StatusMacNotification.qml b/src/StatusQ/Platform/StatusMacNotification.qml index 3b296437..0d657cbf 100644 --- a/src/StatusQ/Platform/StatusMacNotification.qml +++ b/src/StatusQ/Platform/StatusMacNotification.qml @@ -15,19 +15,19 @@ Rectangle { // TODO: what about dark theme? color: "#F7F7F7" - width: 366 - height: 75 + width: Theme.dp(366) + height: Theme.dp(75) - radius: 8 + radius: Theme.dp(8) Loader { id: identicon sourceComponent: root.identicon === "" ? statusIdenticon : userOrChannelIdenticon anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter - height: 40 - width: 40 + height: Theme.dp(40) + width: Theme.dp(40) } Component { @@ -35,18 +35,18 @@ Rectangle { StatusSmartIdenticon { id: contactImage anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.verticalCenter: parent.verticalCenter image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) source: root.identicon isIdenticon: true } icon: StatusIconSettings { - width: 40 - height: 40 - letterSize: 15 + width: Theme.dp(40) + height: Theme.dp(40) + letterSize: Theme.dp(15) color: Theme.palette.miscColor5 } name: root.name @@ -57,8 +57,8 @@ Rectangle { id: statusIdenticon Image { source: "../../assets/img/status-logo-icon.svg" - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) sourceSize.width: width * 2 sourceSize.height: height * 2 cache: true @@ -74,29 +74,29 @@ Rectangle { StatusBaseText { id: name anchors.bottom: messagePreview.top - anchors.bottomMargin: 2 + anchors.bottomMargin: Theme.dp(2) anchors.left: identicon.right - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.right: openButton.left anchors.rightMargin: 8 elide: Text.ElideRight text: root.name font.weight: Font.Medium - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: "#4b4b4b" } StatusBaseText { id: messagePreview anchors.bottom: identicon.bottom - anchors.bottomMargin: 2 + anchors.bottomMargin: Theme.dp(2) anchors.left: identicon.right - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) anchors.right: openButton.left - anchors.rightMargin: 16 + anchors.rightMargin: Theme.dp(16) elide: Text.ElideRight clip: true // This is needed because emojis don't ellide correctly - font.pixelSize: 14 + font.pixelSize: Theme.dp(14) color: "#4b4b4b" text: root.message } @@ -105,19 +105,19 @@ Rectangle { id: openButton anchors.right: parent.right height: parent.height - width: 85 + width: Theme.dp(85) color: "transparent" Rectangle { height: parent.height - width: 1.2 + width: Theme.dp(1.2) anchors.left: parent.left color: "#D9D9D9" } StatusBaseText { font.weight: Font.Medium - font.pixelSize: 14 + font.pixelSize: Theme.dp(14) anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter text: qsTr("Open") diff --git a/src/StatusQ/Platform/StatusMacTrafficLights.qml b/src/StatusQ/Platform/StatusMacTrafficLights.qml index 7db6c903..305e71e6 100644 --- a/src/StatusQ/Platform/StatusMacTrafficLights.qml +++ b/src/StatusQ/Platform/StatusMacTrafficLights.qml @@ -24,11 +24,11 @@ MouseArea { Row { id: layout - spacing: 8 + spacing: Theme.dp(8) Rectangle { - width: 12 - height: 12 + width: Theme.dp(12) + height: Theme.dp(12) radius: width / 2 antialiasing: true @@ -56,8 +56,8 @@ MouseArea { } Rectangle { - width: 12 - height: 12 + width: Theme.dp(12) + height: Theme.dp(12) radius: width / 2 antialiasing: true @@ -65,11 +65,11 @@ MouseArea { : inactive) border.color:miniSensor.pressed ? "#986E29" : (rootWindow.active ? "#D79F3D" : inactiveBorder) - border.width: Theme.palette.name === "light" ? 0.5 : 0 + border.width: Theme.palette.name === "light" ? Theme.dp(0.5) : 0 Image { anchors.centerIn: parent - anchors.verticalCenterOffset: -0.25 + anchors.verticalCenterOffset: -Theme.dp(0.25) visible: statusMacTrafficLights.containsMouse source: miniSensor.pressed ? "../../assets/img/icons/traffic_lights/minimise_pressed.png" : "../../assets/img/icons/traffic_lights/minimise.png" @@ -85,8 +85,8 @@ MouseArea { } Rectangle { - width: 12 - height: 12 + width: Theme.dp(12) + height: Theme.dp(12) radius: width / 2 antialiasing: true @@ -98,6 +98,8 @@ MouseArea { Image { anchors.centerIn: parent + width: Theme.dp(sourceSize.width) + height: Theme.dp(sourceSize.height) visible: statusMacTrafficLights.containsMouse source: maxiSensor.pressed ?"../../assets/img/icons/traffic_lights/maximize_pressed.png" :"../../assets/img/icons/traffic_lights/maximize.png" diff --git a/src/StatusQ/Platform/StatusWindowsTitleBar.qml b/src/StatusQ/Platform/StatusWindowsTitleBar.qml index f52455a5..ddd4abb2 100644 --- a/src/StatusQ/Platform/StatusWindowsTitleBar.qml +++ b/src/StatusQ/Platform/StatusWindowsTitleBar.qml @@ -13,21 +13,21 @@ Rectangle { signal minimised(); signal maximized(); - implicitHeight: 32 + implicitHeight: Theme.dp(32) color: Theme.palette.baseColor5 Row { id: titleLayout anchors.left: parent.left - anchors.leftMargin: 12 + anchors.leftMargin: Theme.dp(12) anchors.verticalCenter: parent.verticalCenter - spacing: 4 + spacing: Theme.dp(4) StatusIcon { anchors.verticalCenter: parent.verticalCenter - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) icon: "windows_titlebar/status" } @@ -47,7 +47,7 @@ Rectangle { height: parent.height Rectangle { - width: 48 + width: Theme.dp(48) height: parent.height color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8) @@ -55,8 +55,8 @@ Rectangle { StatusIcon { anchors.centerIn: parent - width: 10 - height: 1 + width: Theme.dp(10) + height: Theme.dp(1) icon: "windows_titlebar/minimise" color: Theme.palette.directColor1 } @@ -70,7 +70,7 @@ Rectangle { } Rectangle { - width: 48 + width: Theme.dp(48) height: parent.height color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8) @@ -78,8 +78,8 @@ Rectangle { StatusIcon { anchors.centerIn: parent - width: 10 - height: 10 + width: Theme.dp(10) + height: Theme.dp(10) icon: "windows_titlebar/maximize" color: Theme.palette.directColor1 } @@ -93,7 +93,7 @@ Rectangle { } Rectangle { - width: 48 + width: Theme.dp(48) height: parent.height color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245") @@ -101,8 +101,8 @@ Rectangle { StatusIcon { anchors.centerIn: parent - width: 10 - height: 10 + width: Theme.dp(10) + height: Theme.dp(10) icon: "windows_titlebar/close" color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1 } diff --git a/src/StatusQ/Popups/StatusColorDialog.qml b/src/StatusQ/Popups/StatusColorDialog.qml index ce614363..4c9afb05 100644 --- a/src/StatusQ/Popups/StatusColorDialog.qml +++ b/src/StatusQ/Popups/StatusColorDialog.qml @@ -30,16 +30,16 @@ StatusModal { hexInput.text = color.toString(); } - width: 680 - implicitHeight: 820 + width: Theme.dp(680) + implicitHeight: Theme.dp(820) contentItem: ScrollView { id: scroll width: parent.width - topPadding: 30 - leftPadding: 20 - rightPadding: 20 - bottomPadding: 20 + topPadding: Theme.dp(30) + leftPadding: Theme.dp(20) + rightPadding: Theme.dp(20) + bottomPadding: Theme.dp(20) contentHeight: column.height ScrollBar.vertical.policy: ScrollBar.AsNeeded @@ -50,7 +50,7 @@ StatusModal { ColumnLayout { id: column width: scroll.width - scroll.leftPadding - scroll.rightPadding - spacing: 12 + spacing: Theme.dp(12) StatusColorSpace { id: colorSpace @@ -73,7 +73,7 @@ StatusModal { // TODO: editingFinished() signal instead of this crutch property bool locked: false - implicitWidth: 256 + implicitWidth: Theme.dp(256) validators: [ StatusRegularExpressionValidator { regularExpression: /^#(?:[0-9a-fA-F]{3}){1,2}$/ @@ -95,28 +95,28 @@ StatusModal { StatusBaseText { text: qsTr("Preview") - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } Rectangle { - implicitHeight: 48 - radius: 10 + implicitHeight: Theme.dp(48) + radius: Theme.dp(10) color: root.color Layout.fillWidth: true StatusBaseText { id: preview - x: 16 - y: 16 + x: Theme.dp(16) + y: Theme.dp(16) text: root.color.toString() color: Theme.palette.white - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } } StatusBaseText { text: qsTr("Standart colours") - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) } StatusColorSelectorGrid { diff --git a/src/StatusQ/Popups/StatusMenuHeadline.qml b/src/StatusQ/Popups/StatusMenuHeadline.qml index 9da2b1b4..9f41d4b8 100644 --- a/src/StatusQ/Popups/StatusMenuHeadline.qml +++ b/src/StatusQ/Popups/StatusMenuHeadline.qml @@ -9,14 +9,14 @@ MenuSeparator { property string text height: visible && enabled ? implicitHeight : 0 contentItem: Item { - implicitWidth: 176 - implicitHeight: 16 + implicitWidth: Theme.dp(176) + implicitHeight: Theme.dp(16) StatusBaseText { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: 12 + anchors.leftMargin: Theme.dp(12) color: Theme.palette.baseColor1 - font.pixelSize: 12 + font.pixelSize: Theme.dp(12) text: root.text } } diff --git a/src/StatusQ/Popups/StatusMenuItem.qml b/src/StatusQ/Popups/StatusMenuItem.qml index 7e3b0c88..d18a1e40 100644 --- a/src/StatusQ/Popups/StatusMenuItem.qml +++ b/src/StatusQ/Popups/StatusMenuItem.qml @@ -1,6 +1,7 @@ import QtQuick 2.13 import QtQuick.Controls 2.13 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 Action { id: statusMenuItem @@ -13,8 +14,8 @@ Action { property int type: StatusMenuItem.Type.Normal property real iconRotation: 0 property StatusImageSettings image: StatusImageSettings { - height: 16 - width: 16 + height: Theme.dp(16) + width: Theme.dp(16) isIdenticon: false } property StatusIconSettings iconSettings: StatusIconSettings { diff --git a/src/StatusQ/Popups/StatusMenuItemDelegate.qml b/src/StatusQ/Popups/StatusMenuItemDelegate.qml index 9b6eecdd..fe760f20 100644 --- a/src/StatusQ/Popups/StatusMenuItemDelegate.qml +++ b/src/StatusQ/Popups/StatusMenuItemDelegate.qml @@ -9,7 +9,7 @@ import StatusQ.Popups 0.1 MenuItem { id: statusPopupMenuItem implicitWidth: parent ? parent.width : 0 - implicitHeight: action.enabled ? 38 : 0 + implicitHeight: action.enabled ? Theme.dp(38) : 0 property int subMenuIndex property var statusPopupMenu: null @@ -28,14 +28,14 @@ MenuItem { Component { id: indicatorComponent Item { - implicitWidth: 24 - implicitHeight: 24 + implicitWidth: Theme.dp(24) + implicitHeight: Theme.dp(24) StatusIcon { anchors.centerIn: parent width: { let width = statusPopupMenuItem.action && statusPopupMenuItem.action.icon.width || statusPopupMenuItem.action.iconSettings && statusPopupMenuItem.action.iconSettings.width - return !!width ? width : 18 + return !!width ? width : Theme.dp(18) } rotation: !!statusPopupMenuItem.action.iconRotation ? statusPopupMenuItem.action.iconRotation : 0 icon: { @@ -72,19 +72,19 @@ MenuItem { Component { id: statusLetterIdenticonCmp Item { - implicitWidth: 24 - implicitHeight: 24 + implicitWidth: Theme.dp(24) + implicitHeight: Theme.dp(24) StatusLetterIdenticon { anchors.centerIn: parent - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) color: { let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color } name: statusPopupMenuItem.text - letterSize: 11 + letterSize: Theme.dp(11) } } } @@ -93,8 +93,8 @@ MenuItem { id: statusRoundImageCmp Item { - implicitWidth: 24 - implicitHeight: 24 + implicitWidth: Theme.dp(24) + implicitHeight: Theme.dp(24) StatusRoundedImage { anchors.centerIn: parent width: statusPopupMenuItem.action.image.width @@ -124,7 +124,7 @@ MenuItem { } anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: 8 + anchors.leftMargin: Theme.dp(8) active: { if (enabled) { let hasIconSettings = !!statusPopupMenuItem.action.icon.name || @@ -142,8 +142,8 @@ MenuItem { contentItem: StatusBaseText { anchors.left: statusPopupMenuItem.indicator.right anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right - anchors.rightMargin: 8 - anchors.leftMargin: 4 + anchors.rightMargin: Theme.dp(8) + anchors.leftMargin: Theme.dp(4) horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter @@ -167,8 +167,8 @@ MenuItem { id: arrowIcon anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 8 - height: 16 + anchors.rightMargin: Theme.dp(8) + height: Theme.dp(16) visible: statusPopupMenuItem.subMenu icon: "next" color: Theme.palette.directColor1 diff --git a/src/StatusQ/Popups/StatusMenuSeparator.qml b/src/StatusQ/Popups/StatusMenuSeparator.qml index e3ebd38d..97c303f7 100644 --- a/src/StatusQ/Popups/StatusMenuSeparator.qml +++ b/src/StatusQ/Popups/StatusMenuSeparator.qml @@ -6,8 +6,8 @@ import StatusQ.Core.Theme 0.1 MenuSeparator { height: visible && enabled ? implicitHeight : 0 contentItem: Rectangle { - implicitWidth: 176 - implicitHeight: 1 + implicitWidth: Theme.dp(176) + implicitHeight: Theme.dp(1) color: Theme.palette.statusPopupMenu.separatorColor } } diff --git a/src/StatusQ/Popups/StatusModal.qml b/src/StatusQ/Popups/StatusModal.qml index 0cb83606..756b4c6b 100644 --- a/src/StatusQ/Popups/StatusModal.qml +++ b/src/StatusQ/Popups/StatusModal.qml @@ -198,7 +198,7 @@ QC.Popup { parent: QC.Overlay.overlay - width: 480 + width: Theme.dp(480) // implicitHeight: headerImpl.implicitHeight + contentItem.implicitHeight + footerImpl.implicitHeight padding: 0 @@ -207,7 +207,7 @@ QC.Popup { leftPadding: padding rightPadding: padding - margins: 64 + margins: Theme.dp(64) modal: true @@ -217,7 +217,7 @@ QC.Popup { background: Rectangle { color: Theme.palette.statusModal.backgroundColor - radius: 8 + radius: Theme.dp(8) Spares.StatusModalHeader { id: headerImpl @@ -243,7 +243,7 @@ QC.Popup { Loader { id: advancedHeader anchors.top: parent.top - anchors.topMargin: hasFloatingButtons ? -18 - height : 0 + anchors.topMargin: hasFloatingButtons ? -Theme.dp(18) - height : 0 width: visible ? parent.width : 0 active: statusModal.showAdvancedHeader } diff --git a/src/StatusQ/Popups/StatusPopupMenu.qml b/src/StatusQ/Popups/StatusPopupMenu.qml index c0613a78..1c34a9ec 100644 --- a/src/StatusQ/Popups/StatusPopupMenu.qml +++ b/src/StatusQ/Popups/StatusPopupMenu.qml @@ -11,8 +11,8 @@ import StatusQ.Popups 0.1 Menu { id: root closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape - topPadding: 8 - bottomPadding: 8 + topPadding: Theme.dp(8) + bottomPadding: Theme.dp(8) property int menuItemCount: 0 property var subMenuItemIcons: [] @@ -42,14 +42,14 @@ Menu { background: Item { id: statusPopupMenuBackground - implicitWidth: 176 + implicitWidth: Theme.dp(176) Rectangle { id: statusPopupMenuBackgroundContent implicitWidth: statusPopupMenuBackground.width implicitHeight: statusPopupMenuBackground.height color: Theme.palette.statusPopupMenu.backgroundColor - radius: 8 + radius: Theme.dp(8) layer.enabled: true layer.effect: DropShadow { width: statusPopupMenuBackgroundContent.width @@ -58,8 +58,8 @@ Menu { visible: statusPopupMenuBackgroundContent.visible source: statusPopupMenuBackgroundContent horizontalOffset: 0 - verticalOffset: 4 - radius: 12 + verticalOffset: Theme.dp(4) + radius: Theme.dp(12) samples: 25 spread: 0.2 color: Theme.palette.dropShadow diff --git a/src/StatusQ/Popups/StatusSearchPopup.qml b/src/StatusQ/Popups/StatusSearchPopup.qml index b619672c..65ef519a 100644 --- a/src/StatusQ/Popups/StatusSearchPopup.qml +++ b/src/StatusQ/Popups/StatusSearchPopup.qml @@ -11,7 +11,7 @@ import StatusQ.Popups 0.1 StatusModal { id: root - width: 700 + width: Theme.dp(700) height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970 anchors.centerIn: parent showHeader: false @@ -82,10 +82,10 @@ StatusModal { Layout.preferredHeight: 63 StatusIcon { id: statusIcon - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) anchors.left: parent.left - anchors.leftMargin: 12 + anchors.leftMargin: Theme.dp(12) anchors.verticalCenter: parent.verticalCenter icon: "search" color: Theme.palette.baseColor1 @@ -94,14 +94,14 @@ StatusModal { StatusBaseInput { id: inputText anchors.left: statusIcon.right - anchors.leftMargin: 15 + anchors.leftMargin: Theme.dp(15) anchors.right: parent.right - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) anchors.verticalCenter: parent.verticalCenter focus: true - font.pixelSize: 28 - topPadding: 5 //smaller padding to handle bigger font - bottomPadding: 5 + font.pixelSize: Theme.dp(28) + topPadding: Theme.dp(5) //smaller padding to handle bigger font + bottomPadding: Theme.dp(5) clearable: true showBackground: false font.family: Theme.palette.baseFont.name @@ -118,7 +118,7 @@ StatusModal { } Item { Layout.preferredWidth: parent.width - Layout.preferredHeight: 58 + Layout.preferredHeight: Theme.dp(58) Button { id: searchOptionsMenuButton @@ -130,16 +130,16 @@ StatusModal { property string primaryText: "" property string secondaryText: "" property StatusIconSettings iconSettings: StatusIconSettings { - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) name: "" isLetterIdenticon: false - letterSize: charactersLen > 1 ? 8 : 11 + letterSize: Theme.dp(charactersLen > 1 ? 8 : 11) } property StatusImageSettings image: StatusImageSettings { - width: 16 - height: 16 + width: Theme.dp(16) + height: Theme.dp(16) source: "" isIdenticon: false } @@ -147,16 +147,16 @@ StatusModal { property alias ringSettings: identicon.ringSettings anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.verticalCenter: parent.verticalCenter implicitWidth: (contentItemRowLayout.width + 24) - implicitHeight: 32 + implicitHeight: Theme.dp(32) background: Rectangle { anchors.fill: parent color: Theme.palette.baseColor2 - radius: 8 + radius: Theme.dp(8) } contentItem: Item { @@ -172,7 +172,7 @@ StatusModal { RowLayout { id: contentItemRowLayout anchors.centerIn: parent - spacing: 2 + spacing: Theme.dp(2) StatusBaseText { color: Theme.palette.directColor1 text: searchOptionsMenuButton.prefixText + ": " @@ -181,8 +181,8 @@ StatusModal { StatusSmartIdenticon { id: identicon - Layout.preferredWidth: active ? 16 : 0 - Layout.preferredHeight: 16 + Layout.preferredWidth: active ? Theme.dp(16) : 0 + Layout.preferredHeight: Theme.dp(16) image: searchOptionsMenuButton.image icon: searchOptionsMenuButton.iconSettings name: searchOptionsMenuButton.primaryText @@ -198,16 +198,16 @@ StatusModal { font.weight: Font.Medium } StatusIcon { - Layout.preferredWidth: 14.5 - Layout.preferredHeight: 17.5 + Layout.preferredWidth: Theme.dp(14) + Layout.preferredHeight: Theme.dp(18) Layout.alignment: Qt.AlignVCenter visible: !!searchOptionsMenuButton.secondaryText color: Theme.palette.baseColor1 icon: "next" } StatusIcon { - Layout.preferredWidth: 17.5 - Layout.preferredHeight: 17.5 + Layout.preferredWidth: Theme.dp(18) + Layout.preferredHeight: Theme.dp(18) Layout.alignment: Qt.AlignVCenter visible: !!searchOptionsMenuButton.secondaryText color: Theme.palette.directColor1 @@ -220,8 +220,8 @@ StatusModal { font.weight: Font.Medium } StatusIcon { - Layout.preferredWidth: 17.5 - Layout.preferredHeight: 14.5 + Layout.preferredWidth: Theme.dp(18) + Layout.preferredHeight: Theme.dp(14) Layout.alignment: Qt.AlignVCenter icon: "chevron-down" color: Theme.palette.directColor1 @@ -233,18 +233,18 @@ StatusModal { StatusFlatRoundButton { id: closeButton - width: 32 - height: 32 + width: Theme.dp(32) + height: Theme.dp(32) anchors.left: searchOptionsMenuButton.right - anchors.leftMargin: 4 + anchors.leftMargin: Theme.dp(4) anchors.verticalCenter: parent.verticalCenter opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0 visible: (opacity > 0.1) type: StatusFlatRoundButton.Type.Secondary icon.name: "close" icon.color: Theme.palette.directColor1 - icon.width: 20 - icon.height: 20 + icon.width: Theme.dp(20) + icon.height: Theme.dp(20) onClicked: { root.resetSearchSelection(); } } } @@ -260,7 +260,7 @@ StatusModal { anchors { leftMargin: 0 rightMargin: 0 - bottomMargin: 67 + bottomMargin: Theme.dp(67) } visible: (!root.loading && (count > 0)) model: root.searchResults @@ -302,16 +302,16 @@ StatusModal { section.property: "sectionName" section.criteria: ViewSection.FullString section.delegate: Item { - height: 34 + height: Theme.dp(34) width: view.width StatusBaseText { - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color: Theme.palette.baseColor1 text: section anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) anchors.bottom: parent.bottom - anchors.bottomMargin: 4 + anchors.bottomMargin: Theme.dp(4) } } } @@ -319,15 +319,15 @@ StatusModal { anchors.centerIn: parent visible: root.loading color: Theme.palette.primaryColor1 - width: 24 - height: 24 + width: Theme.dp(24) + height: Theme.dp(24) } StatusBaseText { anchors.centerIn: parent text: root.noResultsLabel color: Theme.palette.baseColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) visible: ((inputText.text !== "") && (view.count === 0) && !root.loading) } } diff --git a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml index 4b37f5b3..b47a7e3f 100644 --- a/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml +++ b/src/StatusQ/Popups/StatusSearchPopupMenuItem.qml @@ -7,24 +7,24 @@ import StatusQ.Core.Theme 0.1 MenuItem { id: root - implicitHeight: 38 + implicitHeight: Theme.dp(38) property string value: "" property StatusImageSettings image: StatusImageSettings { - height: 16 - width: 16 + height: Theme.dp(16) + width: Theme.dp(16) isIdenticon: false } property StatusIconSettings iconSettings: StatusIconSettings { - height: 16 - width: 16 + height: Theme.dp(16) + width: Theme.dp(16) isLetterIdenticon: (root.image.source.toString() === "" && root.iconSettings.name.toString() === "") background: StatusIconBackgroundSettings {} color: (name === "channel") ? Theme.palette.directColor1 : "transparent" - letterSize: charactersLen > 1 ? 8 : 11 + letterSize: Theme.dp(charactersLen > 1 ? 8 : 11) } property alias ringSettings: identicon.ringSettings @@ -35,7 +35,7 @@ MenuItem { contentItem: RowLayout { anchors.left: parent.left - anchors.leftMargin: 12 + anchors.leftMargin: Theme.dp(12) Item { Layout.preferredWidth: root.iconSettings.width Layout.preferredHeight: root.iconSettings.height diff --git a/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml b/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml index 97185468..89aca49c 100644 --- a/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml +++ b/src/StatusQ/Popups/StatusSpellcheckingMenuItems.qml @@ -21,17 +21,17 @@ StatusPopupMenu { delegate: MenuItem { id: variants implicitWidth: parent ? parent.width : 0 - implicitHeight: 38 + implicitHeight: Theme.dp(38) contentItem: StatusBaseText { - rightPadding: 8 - leftPadding: 4 + rightPadding: Theme.dp(8) + leftPadding: Theme.dp(4) horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter text: modelData color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) elide: Text.ElideRight } @@ -51,17 +51,17 @@ StatusPopupMenu { MenuItem { id: ignoreWord implicitWidth: parent ? parent.width : 0 - implicitHeight: 38 + implicitHeight: Theme.dp(38) contentItem: StatusBaseText { - rightPadding: 8 - leftPadding: 4 + rightPadding: Theme.dp(8) + leftPadding: Theme.dp(4) horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter text: qsTr("Add to dictionary") color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) elide: Text.ElideRight } @@ -78,17 +78,17 @@ StatusPopupMenu { MenuItem { id: disableSpellchecking implicitWidth: parent ? parent.width : 0 - implicitHeight: 38 + implicitHeight: Theme.dp(38) contentItem: StatusBaseText { - rightPadding: 8 - leftPadding: 4 + rightPadding: Theme.dp(8) + leftPadding: Theme.dp(4) horizontalAlignment: Text.AlignLeft verticalAlignment: Text.AlignVCenter text: qsTr("Disable Spellchecking") color: Theme.palette.directColor1 - font.pixelSize: 13 + font.pixelSize: Theme.dp(13) elide: Text.ElideRight } diff --git a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml index 8e3f8a8b..63bf2656 100644 --- a/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml +++ b/src/StatusQ/Popups/statusModal/StatusImageWithTitle.qml @@ -18,23 +18,23 @@ Row { signal headerImageClicked property StatusImageSettings image: StatusImageSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) isIdenticon: false } property StatusIconSettings icon: StatusIconSettings { - width: 40 - height: 40 + width: Theme.dp(40) + height: Theme.dp(40) isLetterIdenticon: false } - spacing: 8 + spacing: Theme.dp(8) Loader { id: iconOrImage anchors.verticalCenter: parent.verticalCenter - width: active ? 40 : 0 + width: active ? Theme.dp(40) : 0 sourceComponent: { if (statusImageWithTitle.icon.isLetterIdenticon) { return statusLetterIdenticon @@ -80,10 +80,10 @@ Row { objectName: "editAvatarImage" anchors.right: parent.right anchors.bottom: parent.bottom - anchors.bottomMargin: -3 - anchors.rightMargin: -2 - width: 18 - height: 18 + anchors.bottomMargin: -Theme.dp(3) + anchors.rightMargin: -Theme.dp(2) + width: Theme.dp(18) + height: Theme.dp(18) radius: width / 2 visible: statusImageWithTitle.headerImageEditable @@ -94,7 +94,7 @@ Row { StatusIcon { anchors.centerIn: parent - width: 11 + width: Theme.dp(11) color: Theme.palette.indirectColor1 icon: "tiny/edit" } @@ -126,12 +126,12 @@ Row { Row { id: headerTitleRow width: parent.width - spacing: 4 + spacing: Theme.dp(4) StatusBaseText { id: headerTitle objectName: "headerTitle" font.family: Theme.palette.baseFont.name - font.pixelSize: 17 + font.pixelSize: Theme.dp(17) font.bold: true elide: statusImageWithTitle.titleElide color: Theme.palette.directColor1 @@ -142,13 +142,13 @@ Row { objectName: "editAvatarbButton" visible: statusImageWithTitle.editable anchors.verticalCenter: headerTitle.verticalCenter - height: 24 - width: visible ? 24 : 0 + height: Theme.dp(24) + width: visible ? Theme.dp(24) : 0 type: StatusFlatRoundButton.Type.Secondary icon.name: "pencil" icon.color: Theme.palette.directColor1 - icon.width: 12.5 - icon.height: 12.5 + icon.width: Theme.dp(13) + icon.height: Theme.dp(13) onClicked: statusImageWithTitle.editButtonClicked() } @@ -158,7 +158,7 @@ Row { id: headerSubTitle objectName: "headerSubTitle" font.family: Theme.palette.baseFont.name - font.pixelSize: 15 + font.pixelSize: Theme.dp(15) color:Theme.palette.baseColor1 width: parent.width elide: statusImageWithTitle.subTitleElide diff --git a/src/StatusQ/Popups/statusModal/StatusModalFooter.qml b/src/StatusQ/Popups/statusModal/StatusModalFooter.qml index 42bc1803..ef64597e 100644 --- a/src/StatusQ/Popups/statusModal/StatusModalFooter.qml +++ b/src/StatusQ/Popups/statusModal/StatusModalFooter.qml @@ -15,7 +15,7 @@ Rectangle { property list rightButtons property bool showFooter: true - radius: 8 + radius: Theme.dp(8) color: Theme.palette.statusModal.backgroundColor @@ -31,27 +31,27 @@ Rectangle { } } - implicitHeight: rootLayout.implicitHeight + 30 + implicitHeight: rootLayout.implicitHeight + Theme.dp(30) RowLayout { id: rootLayout anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.right: parent.right - anchors.leftMargin: 16 - anchors.rightMargin: 18 + anchors.leftMargin: Theme.dp(16) + anchors.rightMargin: Theme.dp(18) Row { id: leftButtonsLayout Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft visible: statusModalFooter.showFooter - spacing: 16 + spacing: Theme.dp(16) } Item { Layout.fillWidth: true - implicitHeight: 1 + implicitHeight: Theme.dp(1) } Row { @@ -59,7 +59,7 @@ Rectangle { Layout.alignment: Qt.AlignVCenter | Qt.AlignRight visible: statusModalFooter.showFooter - spacing: 16 + spacing: Theme.dp(16) } } diff --git a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml index e4ba23c3..93dddffd 100644 --- a/src/StatusQ/Popups/statusModal/StatusModalHeader.qml +++ b/src/StatusQ/Popups/statusModal/StatusModalHeader.qml @@ -27,9 +27,9 @@ Rectangle { signal close implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0 - implicitWidth: 480 + implicitWidth: Theme.dp(480) - radius: 16 + radius: Theme.dp(16) color: Theme.palette.statusModal.backgroundColor @@ -56,7 +56,7 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left anchors.right: actionButtonLoader.left - anchors.leftMargin: 16 + anchors.leftMargin: Theme.dp(16) editable: statusModalHeader.editable titleElide: statusModalHeader.titleElide @@ -78,25 +78,25 @@ Rectangle { id: actionButtonLoader objectName: "actionButtonloader" anchors.right: closeButton.visible ? closeButton.left : parent.right - anchors.rightMargin: 8 + anchors.rightMargin: Theme.dp(8) anchors.top: parent.top - anchors.topMargin: 16 + anchors.topMargin: Theme.dp(16) } StatusFlatRoundButton { id: closeButton objectName: "headerClosebutton" anchors.right: parent.right - anchors.rightMargin: 20 + anchors.rightMargin: Theme.dp(20) anchors.top: parent.top - anchors.topMargin: 16 - width: 32 - height: 32 + anchors.topMargin: Theme.dp(16) + width: Theme.dp(32) + height: Theme.dp(32) type: StatusFlatRoundButton.Type.Secondary icon.name: "close" icon.color: Theme.palette.directColor1 - icon.width: 20 - icon.height: 20 + icon.width: Theme.dp(20) + icon.height: Theme.dp(20) visible: statusModalHeader.hasCloseButton onClicked: statusModalHeader.close()