diff --git a/storybook/main.qml b/storybook/main.qml index 0c136e9ecc..3e1c2286ce 100644 --- a/storybook/main.qml +++ b/storybook/main.qml @@ -158,7 +158,7 @@ ApplicationWindow { Layout.fillWidth: true text: "Dark mode" - onCheckedChanged: Style.changeTheme(checked ? Universal.Dark : Universal.Light, !checked) + onCheckedChanged: Theme.changeTheme(checked ? Universal.Dark : Universal.Light, !checked) } HotReloaderControls { diff --git a/storybook/pages/ActivityNotificationCommunityMembershipRequestPage.qml b/storybook/pages/ActivityNotificationCommunityMembershipRequestPage.qml index 45062bed24..4a621571a1 100644 --- a/storybook/pages/ActivityNotificationCommunityMembershipRequestPage.qml +++ b/storybook/pages/ActivityNotificationCommunityMembershipRequestPage.qml @@ -4,6 +4,8 @@ import QtQuick.Layouts 1.15 import Qt.labs.settings 1.0 +import StatusQ.Core.Theme 0.1 + import mainui.activitycenter.views 1.0 import mainui.activitycenter.stores 1.0 @@ -74,7 +76,7 @@ SplitView { function getContactDetailsAsJson(arg1, arg2) { return JSON.stringify({ displayName: "Mock user", - displayIcon: Style.png("tokens/AST"), + displayIcon: Theme.png("tokens/AST"), publicKey: 123456789, name: "", ensVerified: false, @@ -130,7 +132,7 @@ SplitView { function getCommunityDetailsAsJson(community) { return { name : "Mock Community", - image : Style.png("tokens/UNI"), + image : Theme.png("tokens/UNI"), color : "orchid" } } diff --git a/storybook/pages/AirdropTokensSelectorPage.qml b/storybook/pages/AirdropTokensSelectorPage.qml index 984be3065f..e130764982 100644 --- a/storybook/pages/AirdropTokensSelectorPage.qml +++ b/storybook/pages/AirdropTokensSelectorPage.qml @@ -2,6 +2,8 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.controls 1.0 import utils 1.0 @@ -11,22 +13,22 @@ ColumnLayout { { tokenText: "2 MCT", networkText: "Ethereum", - tokenImage: Style.png("tokens/SNT"), - networkImage: Style.svg("network/Network=Ethereum"), + tokenImage: Theme.png("tokens/SNT"), + networkImage: Theme.svg("network/Network=Ethereum"), valid: true }, { tokenText: "64 DAI", networkText: "Optimism", - tokenImage: Style.png("tokens/DAI"), - networkImage: Style.svg("network/Network=Optimism"), + tokenImage: Theme.png("tokens/DAI"), + networkImage: Theme.svg("network/Network=Optimism"), valid: false }, { tokenText: "0.125 ETH", networkText: "Arbitrum", - tokenImage: Style.png("tokens/ETH"), - networkImage: Style.svg("network/Network=Arbitrum"), + tokenImage: Theme.png("tokens/ETH"), + networkImage: Theme.svg("network/Network=Arbitrum"), valid: true } ] diff --git a/storybook/pages/CollectibleDetailViewPage.qml b/storybook/pages/CollectibleDetailViewPage.qml index 6c1da6443a..9bd6d9bdee 100644 --- a/storybook/pages/CollectibleDetailViewPage.qml +++ b/storybook/pages/CollectibleDetailViewPage.qml @@ -10,6 +10,7 @@ import AppLayouts.Wallet.stores 1.0 as WalletStores import AppLayouts.Wallet.views.collectibles 1.0 import StatusQ.Core.Utils 0.1 +import StatusQ.Core.Theme 0.1 import shared.controls 1.0 import shared.stores 1.0 as SharedStores @@ -106,7 +107,7 @@ SplitView { } return { name : "Mock Community", - image : Style.png("tokens/UNI"), + image : Theme.png("tokens/UNI"), color : "orchid" } } diff --git a/storybook/pages/ColumnHeaderPanelPage.qml b/storybook/pages/ColumnHeaderPanelPage.qml index 19685cf388..cf0d1f2859 100644 --- a/storybook/pages/ColumnHeaderPanelPage.qml +++ b/storybook/pages/ColumnHeaderPanelPage.qml @@ -18,7 +18,7 @@ SplitView { property int membersCount: 184 property bool amISectionAdmin: false property color color: "orchid" - property url image: Style.png("tokens/UNI") + property url image: Theme.png("tokens/UNI") property bool openCreateChat: false } diff --git a/storybook/pages/CommunityInfoEditor.qml b/storybook/pages/CommunityInfoEditor.qml index c3fd897eb5..bcd84db2c7 100644 --- a/storybook/pages/CommunityInfoEditor.qml +++ b/storybook/pages/CommunityInfoEditor.qml @@ -1,6 +1,8 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 + +import StatusQ.Core.Theme 0.1 import utils 1.0 @@ -14,9 +16,9 @@ ColumnLayout { property bool amISectionAdmin: true property bool isCommunityEditable: true property color color: "orchid" - property url image: Style.png("tokens/UNI") + property url image: Theme.png("tokens/UNI") property bool colorVisible: false - property url banner: ctrlCommunityBanner.checked ? Style.png("settings/communities@2x") : "" + property url banner: ctrlCommunityBanner.checked ? Theme.png("settings/communities@2x") : "" readonly property bool shardingEnabled: ctrlShardingEnabled.checked property alias shardIndex: ctrlShardIndex.value property bool adminControlsEnabled: true @@ -94,15 +96,15 @@ ColumnLayout { RadioButton { checked: true text: qsTr("UNI") - onCheckedChanged: if(checked) root.image = Style.png("tokens/UNI") + onCheckedChanged: if(checked) root.image = Theme.png("tokens/UNI") } RadioButton { text: qsTr("SOCKS") - onCheckedChanged: if(checked) root.image = Style.png("tokens/SOCKS") + onCheckedChanged: if(checked) root.image = Theme.png("tokens/SOCKS") } RadioButton { text: qsTr("Status") - onCheckedChanged: if(checked) root.image = Style.png("tokens/SNT") + onCheckedChanged: if(checked) root.image = Theme.png("tokens/SNT") } } diff --git a/storybook/pages/CommunityMembershipSetupDialogPage.qml b/storybook/pages/CommunityMembershipSetupDialogPage.qml index 17449c5e8e..097718e646 100644 --- a/storybook/pages/CommunityMembershipSetupDialogPage.qml +++ b/storybook/pages/CommunityMembershipSetupDialogPage.qml @@ -37,6 +37,7 @@ SplitView { modal: false visible: true closePolicy: Popup.NoAutoClose + destroyOnClose: true isEditMode: ctrlIsEditMode.checked communityId: "ddls" @@ -61,7 +62,7 @@ SplitView { walletAccountsModel: WalletAccountsModel {} walletAssetsModel: root.walletAssetStore.groupedAccountAssetsModel - walletCollectiblesModel: ListModel {} + walletCollectiblesModel: ManageCollectiblesModel {} permissionsModel: ctrlPermissionsModel.currentValue assetsModel: AssetsModel {} collectiblesModel: CollectiblesModel {} diff --git a/storybook/pages/DerivationPathInputPage.qml b/storybook/pages/DerivationPathInputPage.qml index 81a73260f3..69c5261ceb 100644 --- a/storybook/pages/DerivationPathInputPage.qml +++ b/storybook/pages/DerivationPathInputPage.qml @@ -36,7 +36,7 @@ SplitView { hoverEnabled: true cursorShape: Qt.PointingHandCursor onClicked: { - derivationPathSelection.popup(0, testControl.height + Style.current.halfPadding) + derivationPathSelection.popup(0, testControl.height + Theme.halfPadding) } } } diff --git a/storybook/pages/ExportControlNodePopupPage.qml b/storybook/pages/ExportControlNodePopupPage.qml index 79691d8fba..0d717d45cc 100644 --- a/storybook/pages/ExportControlNodePopupPage.qml +++ b/storybook/pages/ExportControlNodePopupPage.qml @@ -1,6 +1,8 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.popups 1.0 import AppLayouts.Profile.stores 1.0 as ProfileStores @@ -89,7 +91,7 @@ SplitView { property string id: "1" property string name: "Socks" property var members: { "count": 5 } - property string image: Style.png("tokens/UNI") + property string image: Theme.png("tokens/UNI") property string color: "orchid" } devicesStore: ProfileStores.DevicesStore { diff --git a/storybook/pages/ImportCommunityPopupPage.qml b/storybook/pages/ImportCommunityPopupPage.qml index 070c170a76..a0f94295a8 100644 --- a/storybook/pages/ImportCommunityPopupPage.qml +++ b/storybook/pages/ImportCommunityPopupPage.qml @@ -6,6 +6,8 @@ import QtQml 2.15 import Storybook 1.0 import Models 1.0 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.popups 1.0 import utils 1.0 @@ -135,7 +137,7 @@ SplitView { function getContactDetailsAsJson(arg1, arg2) { return JSON.stringify({ displayName: "Mock user", - displayIcon: Style.png("tokens/AST"), + displayIcon: Theme.png("tokens/AST"), publicKey: 123456789, name: "", ensVerified: false, diff --git a/storybook/pages/ImportControlNodePopupPage.qml b/storybook/pages/ImportControlNodePopupPage.qml index 5df51e6d2d..e10d1c4e81 100644 --- a/storybook/pages/ImportControlNodePopupPage.qml +++ b/storybook/pages/ImportControlNodePopupPage.qml @@ -3,6 +3,8 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQml 2.15 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.popups 1.0 import utils 1.0 @@ -49,7 +51,7 @@ SplitView { property string id: "1" property string name: "Socks" property var members: { "count": 5 } - property string image: Style.png("tokens/UNI") + property string image: Theme.png("tokens/UNI") property string color: "orchid" } } diff --git a/storybook/pages/InlineNetworksComboBoxPage.qml b/storybook/pages/InlineNetworksComboBoxPage.qml index 1c31fdef41..403945eea5 100644 --- a/storybook/pages/InlineNetworksComboBoxPage.qml +++ b/storybook/pages/InlineNetworksComboBoxPage.qml @@ -4,6 +4,9 @@ import QtQuick.Layouts 1.15 import Models 1.0 import utils 1.0 + +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.controls 1.0 Item { @@ -12,28 +15,28 @@ Item { readonly property var modelData: [ { name: "Optimism", - icon: Style.svg(ModelsData.networks.optimism), + icon: Theme.svg(ModelsData.networks.optimism), amount: "300", multiplierIndex: 0, infiniteAmount: false }, { name: "Arbitrum", - icon: Style.svg(ModelsData.networks.arbitrum), + icon: Theme.svg(ModelsData.networks.arbitrum), amount: "400000", multiplierIndex: 3, infiniteAmount: false }, { name: "Hermez", - icon: Style.svg(ModelsData.networks.hermez), + icon: Theme.svg(ModelsData.networks.hermez), amount: "0", multiplierIndex: 0, infiniteAmount: true }, { name: "Ethereum", - icon: Style.svg(ModelsData.networks.ethereum), + icon: Theme.svg(ModelsData.networks.ethereum), amount: "12" + "0".repeat(18), multiplierIndex: 18, infiniteAmount: false diff --git a/storybook/pages/IntroPanelPage.qml b/storybook/pages/IntroPanelPage.qml index d4be28d6c7..7936271e48 100644 --- a/storybook/pages/IntroPanelPage.qml +++ b/storybook/pages/IntroPanelPage.qml @@ -6,6 +6,8 @@ import Models 1.0 import Storybook 1.0 import utils 1.0 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Communities.panels 1.0 SplitView { @@ -32,7 +34,7 @@ SplitView { width: 600 anchors.centerIn: parent - image: Style.png("community/airdrops8_1") + image: Theme.png("community/airdrops8_1") title: radioButtonsGroup.text subtitle: radioButtonsGroup.text diff --git a/storybook/pages/JoinCommunityViewPage.qml b/storybook/pages/JoinCommunityViewPage.qml index 531f965fa0..395761623f 100644 --- a/storybook/pages/JoinCommunityViewPage.qml +++ b/storybook/pages/JoinCommunityViewPage.qml @@ -54,7 +54,7 @@ Nemo enim 😋 ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, // Blur background: property int membersCount: 184 property bool amISectionAdmin: false - property url image: Style.png("tokens/UNI") + property url image: Theme.png("tokens/UNI") property var communityItemsModel: model1 property string chatDateTimeText: "Dec 31, 2020" property string listUsersText: "simon, Mark Cuban " diff --git a/storybook/pages/LinkPreviewCardPage.qml b/storybook/pages/LinkPreviewCardPage.qml index 3bb6f88975..53875e2478 100644 --- a/storybook/pages/LinkPreviewCardPage.qml +++ b/storybook/pages/LinkPreviewCardPage.qml @@ -14,7 +14,7 @@ SplitView { id: root property string ytBannerQuality: "hqdefault" - property string image: Style.png("tokens/SOCKS") + property string image: Theme.png("tokens/SOCKS") property string banner: rawImageCheck.checked ? rawImageCheck.rawImageData : "https://img.youtube.com/vi/yHN1M7vcPKU/%1.jpg".arg(root.ytBannerQuality) property bool globalUtilsReady: false @@ -284,8 +284,8 @@ SplitView { RadioButton { text: qsTr("QRC asset: SOCKS") - checked: root.image === Style.png("tokens/SOCKS") - onToggled: root.image = Style.png("tokens/SOCKS") + checked: root.image === Theme.png("tokens/SOCKS") + onToggled: root.image = Theme.png("tokens/SOCKS") } ColumnLayout { diff --git a/storybook/pages/NetworkSelectItemDelegatePage.qml b/storybook/pages/NetworkSelectItemDelegatePage.qml index 8a10b1d0b9..2a2d0df91f 100644 --- a/storybook/pages/NetworkSelectItemDelegatePage.qml +++ b/storybook/pages/NetworkSelectItemDelegatePage.qml @@ -26,7 +26,7 @@ SplitView { NetworkSelectItemDelegate { id: delegate title: "Ethereum" - iconUrl: Style.svg("network/Network=Ethereum") + iconUrl: Theme.svg("network/Network=Ethereum") showIndicator: true multiSelection: true checkState: checkStateSelector.checkState diff --git a/storybook/pages/ProfileDialogViewPage.qml b/storybook/pages/ProfileDialogViewPage.qml index 7638b6b3cb..b9483adc6c 100644 --- a/storybook/pages/ProfileDialogViewPage.qml +++ b/storybook/pages/ProfileDialogViewPage.qml @@ -8,6 +8,7 @@ import shared.stores 1.0 as SharedStores import mainui 1.0 import StatusQ 0.1 +import StatusQ.Core.Theme 0.1 import StatusQ.Core.Utils 0.1 as StatusQUtils import AppLayouts.stores 1.0 as AppLayoutStores @@ -78,7 +79,7 @@ SplitView { lastUpdatedLocally: Date.now(), localNickname: localNickname.text, thumbnailImage: "", - largeImage: userImage.checked ? Style.png("status-logo") : "", + largeImage: userImage.checked ? Theme.png("status-logo") : "", isContact: ctrlIsContact.checked, isBlocked: ctrlIsBlocked.checked, isSyncing: false, @@ -277,7 +278,7 @@ SplitView { challenge: "The real Alex would know this 100%! What’s my favourite colour?", response: ctrlIncomingVerificationStatus.currentValue === Constants.verificationStatus.verified ? "Yellow!" : "", displayName: ProfileUtils.displayName(localNickname.text, name.text, displayName.text), - icon: Style.png("status-logo"), + icon: Theme.png("status-logo"), requestedAt: Date.now() - 86400000, repliedAt: Date.now() } @@ -296,11 +297,6 @@ SplitView { communityTokensStore: SharedStores.CommunityTokensStore {} } - WalletAssetsStore { - id: assetsStore - assetsWithFilteredBalances: groupedAccountsAssetsModel - } - SplitView { orientation: Qt.Vertical SplitView.fillWidth: true diff --git a/storybook/pages/StatusChartPanelPage.qml b/storybook/pages/StatusChartPanelPage.qml index ee6e863b3d..31d074983b 100644 --- a/storybook/pages/StatusChartPanelPage.qml +++ b/storybook/pages/StatusChartPanelPage.qml @@ -392,7 +392,7 @@ SplitView { StatusMenu { id: toolTip width: 243 //By design - topPadding: Style.current.padding + topPadding: Theme.padding bottomPadding: topPadding leftPadding: topPadding rightPadding: topPadding diff --git a/storybook/pages/StatusFlowSelectorPage.qml b/storybook/pages/StatusFlowSelectorPage.qml index 9b0190783d..5cde3776d4 100644 --- a/storybook/pages/StatusFlowSelectorPage.qml +++ b/storybook/pages/StatusFlowSelectorPage.qml @@ -3,8 +3,9 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ.Components 0.1 -import utils 1.0 +import StatusQ.Core.Theme 0.1 +import utils 1.0 ColumnLayout { Item { @@ -14,7 +15,7 @@ ColumnLayout { StatusFlowSelector { anchors.centerIn: parent - icon: Style.png("tokens/SNT") + icon: Theme.png("tokens/SNT") title: "Item Selector Title" placeholderText: "Example: Empty items" diff --git a/storybook/pages/StatusGroupBoxPage.qml b/storybook/pages/StatusGroupBoxPage.qml index 0895153f18..437194dccf 100644 --- a/storybook/pages/StatusGroupBoxPage.qml +++ b/storybook/pages/StatusGroupBoxPage.qml @@ -3,6 +3,8 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ.Components 0.1 +import StatusQ.Core.Theme 0.1 + import utils 1.0 @@ -41,7 +43,7 @@ SplitView { anchors.centerIn: parent title: titleTextEdit.text - icon: Style.png("tokens/SNT") + icon: Theme.png("tokens/SNT") iconSize: iconSizeSlider.value label.enabled: labelEnabledCheckBox.checked diff --git a/storybook/pages/StatusItemSelectorPage.qml b/storybook/pages/StatusItemSelectorPage.qml index 92e31bc3d0..457a17382f 100644 --- a/storybook/pages/StatusItemSelectorPage.qml +++ b/storybook/pages/StatusItemSelectorPage.qml @@ -4,6 +4,7 @@ import QtQuick.Layouts 1.15 import StatusQ.Components 0.1 import StatusQ.Controls 0.1 import StatusQ.Core.Utils 0.1 +import StatusQ.Core.Theme 0.1 import utils 1.0 @@ -13,7 +14,7 @@ ColumnLayout { StatusItemSelector { id: selector - icon: Style.png("tokens/SNT") + icon: Theme.png("tokens/SNT") title: "Item Selector Title" placeholderText: "Example: Empty items" @@ -43,7 +44,7 @@ ColumnLayout { onClicked: { model.append({ text: input.text, - imageSource: Style.png("tokens/SNT"), + imageSource: Theme.png("tokens/SNT"), isIcon: false, operator: model.count > 0 ? OperatorsUtils.Operators.Or : OperatorsUtils.Operators.None diff --git a/storybook/pages/SwapApproveCapModalPage.qml b/storybook/pages/SwapApproveCapModalPage.qml index 7bb824b365..9fed1f50f6 100644 --- a/storybook/pages/SwapApproveCapModalPage.qml +++ b/storybook/pages/SwapApproveCapModalPage.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ 0.1 +import StatusQ.Core.Theme 0.1 import Storybook 1.0 import Models 1.0 @@ -90,7 +91,7 @@ SplitView { networkShortName: priv.selectedNetwork.shortName networkName: priv.selectedNetwork.chainName - networkIconPath: Style.svg(priv.selectedNetwork.iconUrl) + networkIconPath: Theme.svg(priv.selectedNetwork.iconUrl) networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerURL fiatFees: formatBigNumber("1.542567673454567457567678678678989234") diff --git a/storybook/pages/SwapSignModalPage.qml b/storybook/pages/SwapSignModalPage.qml index 4d5e36c7a3..96f0002d3c 100644 --- a/storybook/pages/SwapSignModalPage.qml +++ b/storybook/pages/SwapSignModalPage.qml @@ -3,6 +3,7 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ 0.1 +import StatusQ.Core.Theme 0.1 import Storybook 1.0 import Models 1.0 @@ -91,7 +92,7 @@ SplitView { networkShortName: priv.selectedNetwork.shortName networkName: priv.selectedNetwork.chainName - networkIconPath: Style.svg(priv.selectedNetwork.iconUrl) + networkIconPath: Theme.svg(priv.selectedNetwork.iconUrl) networkBlockExplorerUrl: priv.selectedNetwork.blockExplorerURL serviceProviderName: Constants.swap.paraswapName diff --git a/storybook/pages/TokenPanelPage.qml b/storybook/pages/TokenPanelPage.qml index 8106173e41..ee7784c1c9 100644 --- a/storybook/pages/TokenPanelPage.qml +++ b/storybook/pages/TokenPanelPage.qml @@ -4,6 +4,8 @@ import QtQuick.Layouts 1.15 import Qt.labs.settings 1.0 +import StatusQ.Core.Theme 0.1 + import Models 1.0 import Storybook 1.0 import utils 1.0 @@ -21,7 +23,7 @@ SplitView { readonly property var modelData: [ { name: "Optimism", - icon: Style.svg(ModelsData.networks.optimism), + icon: Theme.svg(ModelsData.networks.optimism), amount: "300", multiplierIndex: 0, infiniteAmount: false, @@ -29,7 +31,7 @@ SplitView { }, { name: "Arbitrum", - icon: Style.svg(ModelsData.networks.arbitrum), + icon: Theme.svg(ModelsData.networks.arbitrum), amount: "400000", multiplierIndex: 3, infiniteAmount: false, @@ -37,7 +39,7 @@ SplitView { }, { name: "Hermez", - icon: Style.svg(ModelsData.networks.hermez), + icon: Theme.svg(ModelsData.networks.hermez), amount: "0", multiplierIndex: 0, infiniteAmount: true, @@ -45,7 +47,7 @@ SplitView { }, { name: "Ethereum", - icon: Style.svg(ModelsData.networks.ethereum), + icon: Theme.svg(ModelsData.networks.ethereum), amount: "12" + "0".repeat(18), multiplierIndex: 18, infiniteAmount: false, diff --git a/storybook/pages/TransactionAddressPage.qml b/storybook/pages/TransactionAddressPage.qml index e47dd0bec6..20ce548fc8 100644 --- a/storybook/pages/TransactionAddressPage.qml +++ b/storybook/pages/TransactionAddressPage.qml @@ -4,8 +4,9 @@ import QtQuick.Layouts 1.15 import Storybook 1.0 -import shared.controls 1.0 +import StatusQ.Core.Theme 0.1 +import shared.controls 1.0 import utils 1.0 SplitView { @@ -114,7 +115,7 @@ SplitView { return d.isSavedAccount ? d.addressName : "" } function getEmojiForWalletAddress(address) { - return '??' + return '??' } function getColorForWalletAddress(address) { return "blue" diff --git a/storybook/pages/TransactionAddressTilePage.qml b/storybook/pages/TransactionAddressTilePage.qml index 416efd9e3f..a4178ac5d3 100644 --- a/storybook/pages/TransactionAddressTilePage.qml +++ b/storybook/pages/TransactionAddressTilePage.qml @@ -4,10 +4,13 @@ import QtQuick.Layouts 1.15 import Storybook 1.0 -import shared.controls 1.0 +import StatusQ.Core.Theme 0.1 +import shared.controls 1.0 import utils 1.0 +import AppLayouts.Profile.stores 1.0 + SplitView { id: root @@ -69,7 +72,7 @@ SplitView { } } - QtObject { + ContactsStore { id: contactsStoreMockup readonly property var myContactsModel: QtObject { signal itemChanged(address: string) @@ -97,7 +100,7 @@ SplitView { return getNameForAddress(address) } function getEmojiForWalletAddress(address) { - return '??' + return '??' } function getColorForWalletAddress(address) { return "blue" diff --git a/storybook/pages/TransactionDelegatePage.qml b/storybook/pages/TransactionDelegatePage.qml index a66ce93445..9b390dfc40 100644 --- a/storybook/pages/TransactionDelegatePage.qml +++ b/storybook/pages/TransactionDelegatePage.qml @@ -3,21 +3,23 @@ import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 -import Storybook 1.0 -import utils 1.0 +import StatusQ.Core.Theme 0.1 +import utils 1.0 import shared.controls 1.0 import shared.stores 1.0 as SharedStores import AppLayouts.Wallet.stores 1.0 as WalletStores import Models 1.0 +import Storybook 1.0 SplitView { id: root // mirrors ActivityEntry defined in src/app/modules/main/wallet_section/activity/entry.nim readonly property QtObject mockupModelData: QtObject { + readonly property string id: "0xdeadbeef" readonly property int timestamp: Date.now() / 1000 readonly property int status: ctrlStatus.currentValue readonly property double amount: 123.45 @@ -34,16 +36,16 @@ SplitView { readonly property bool isNFT: ctrlIsNft.checked readonly property bool isCommunityAssetViaAirdrop: isCommunityAssetViaAirdrop.checked readonly property string communityName: "Doodles" - readonly property string communityImageUrl: Style.png("collectibles/HappyMeow") + readonly property string communityImageUrl: Theme.png("collectibles/HappyMeow") readonly property string tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337" readonly property string tokenAddress: "0xdeadbeef" - readonly property string tokenInAddress: "0xdeadbeef-00" - readonly property string tokenOutAddress: "0xdeadbeef-00" + readonly property string tokenInAddress: "0xdeadbeef-in" + readonly property string tokenOutAddress: "0xdeadbeef-out" readonly property string nftName: "Happy Meow NFT" - readonly property string nftImageUrl: Style.png("collectibles/HappyMeow") - readonly property string chainId: "NETWORKID" - readonly property string chainIdIn: "NETWORKID-IN" - readonly property string chainIdOut: "NETWORKID-OUT" + readonly property string nftImageUrl: Theme.png("collectibles/HappyMeow") + readonly property int chainId: 1 + readonly property int chainIdIn: 1 + readonly property int chainIdOut: 2 readonly property bool highlight: _highlight function doneHighlighting() { diff --git a/storybook/pages/TransactionDetailViewPage.qml b/storybook/pages/TransactionDetailViewPage.qml index 01d31a5112..e8ae8a9838 100644 --- a/storybook/pages/TransactionDetailViewPage.qml +++ b/storybook/pages/TransactionDetailViewPage.qml @@ -4,6 +4,8 @@ import QtQuick.Layouts 1.15 import Storybook 1.0 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Wallet 1.0 import AppLayouts.Wallet.stores 1.0 as WalletStores @@ -141,7 +143,7 @@ SplitView { property bool isNFT: false property string tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337" property string nftName: "Happy Meow" - property string nftImageUrl: Style.png("collectibles/HappyMeow") + property string nftImageUrl: Theme.png("collectibles/HappyMeow") property string symbol: "ETH" property int txType: Constants.TransactionType.Send diff --git a/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml b/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml index f6e8523c60..af50c2533d 100644 --- a/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml +++ b/storybook/qmlTests/tests/tst_NetworkSelectItemDelegate.qml @@ -1,6 +1,8 @@ import QtQuick 2.15 import QtTest 1.15 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Wallet.controls 1.0 import utils 1.0 @@ -16,7 +18,7 @@ Item { NetworkSelectItemDelegate { anchors.centerIn: parent title: "Ethereum" - iconUrl: Style.svg("network/Network=Ethereum") + iconUrl: Theme.svg("network/Network=Ethereum") onToggled: root.onToggledHandler() } } @@ -66,11 +68,11 @@ Item { function test_icon() { verify(!!controlUnderTest) - compare(controlUnderTest.iconUrl, Style.svg("network/Network=Ethereum")) - compare(findChild(controlUnderTest, "statusRoundImage").image.source, Style.svg("network/Network=Ethereum")) - controlUnderTest.iconUrl = Style.svg("network/Network=Polygon") - compare(controlUnderTest.iconUrl, Style.svg("network/Network=Polygon")) - compare(findChild(controlUnderTest, "statusRoundImage").image.source, Style.svg("network/Network=Polygon")) + compare(controlUnderTest.iconUrl, Theme.svg("network/Network=Ethereum")) + compare(findChild(controlUnderTest, "statusRoundImage").image.source, Theme.svg("network/Network=Ethereum")) + controlUnderTest.iconUrl = Theme.svg("network/Network=Polygon") + compare(controlUnderTest.iconUrl, Theme.svg("network/Network=Polygon")) + compare(findChild(controlUnderTest, "statusRoundImage").image.source, Theme.svg("network/Network=Polygon")) } function test_indicatorConfig() { @@ -257,4 +259,4 @@ Item { compare(controlUnderTest.checkState, Qt.Unchecked) } } -} \ No newline at end of file +} diff --git a/storybook/qmlTests/tests/tst_NetworkSelectorView.qml b/storybook/qmlTests/tests/tst_NetworkSelectorView.qml index 3ecda1ffef..eef5d89d6d 100644 --- a/storybook/qmlTests/tests/tst_NetworkSelectorView.qml +++ b/storybook/qmlTests/tests/tst_NetworkSelectorView.qml @@ -1,6 +1,8 @@ import QtQuick 2.15 import QtTest 1.15 +import StatusQ.Core.Theme 0.1 + import AppLayouts.Wallet.views 1.0 import utils 1.0 @@ -81,7 +83,7 @@ Item { verify(!!delegate) compare(delegate.title, model.chainName) - compare(delegate.iconUrl, (model.isTest ? Style.svg(model.iconUrl + "-test") : Style.svg(model.iconUrl))) + compare(delegate.iconUrl, (model.isTest ? Theme.svg(model.iconUrl + "-test") : Theme.svg(model.iconUrl))) compare(delegate.showIndicator, controlUnderTest.showIndicator) compare(delegate.multiSelection, controlUnderTest.multiSelection) compare(delegate.checkState, controlUnderTest.selection.includes(model.chainId) ? Qt.Checked : Qt.Unchecked) @@ -340,4 +342,4 @@ Item { } } } -} \ No newline at end of file +} diff --git a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml index 767cba04db..d2982c2708 100644 --- a/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml +++ b/storybook/qmlTests/tests/tst_SwapApproveCapModal.qml @@ -6,6 +6,7 @@ import QtQml 2.15 import Models 1.0 import StatusQ.Core.Utils 0.1 as SQUtils +import StatusQ.Core.Theme 0.1 import AppLayouts.Wallet 1.0 import AppLayouts.Wallet.popups.swap 1.0 @@ -35,7 +36,7 @@ Item { networkShortName: Constants.networkShortChainNames.mainnet networkName: "Mainnet" - networkIconPath: Style.svg("network/Network=Ethereum") + networkIconPath: Theme.svg("network/Network=Ethereum") networkBlockExplorerUrl: "https://etherscan.io/" fiatFees: "1.54 USD" @@ -159,7 +160,7 @@ Item { compare(smartContractBox.caption, qsTr("Via smart contract")) compare(smartContractBox.primaryText, controlUnderTest.serviceProviderName) compare(smartContractBox.secondaryText, SQUtils.Utils.elideAndFormatWalletAddress(controlUnderTest.serviceProviderContractAddress)) - compare(smartContractBox.icon, Style.png("swap/paraswap")) + compare(smartContractBox.icon, Theme.png("swap/paraswap")) } function test_networkInfo() { diff --git a/storybook/qmlTests/tests/tst_SwapModal.qml b/storybook/qmlTests/tests/tst_SwapModal.qml index 83885b85e7..497de5411b 100644 --- a/storybook/qmlTests/tests/tst_SwapModal.qml +++ b/storybook/qmlTests/tests/tst_SwapModal.qml @@ -311,7 +311,7 @@ Item { const balance = delegateUnderTest.model.accountBalance.balance - compare(inlineTagDelegate_0.asset.name, Style.svg("tiny/%1".arg(delegateUnderTest.model.accountBalance.iconUrl))) + compare(inlineTagDelegate_0.asset.name, Theme.svg("tiny/%1".arg(delegateUnderTest.model.accountBalance.iconUrl))) compare(inlineTagDelegate_0.asset.color.toString().toUpperCase(), delegateUnderTest.model.accountBalance.chainColor.toString().toUpperCase()) compare(inlineTagDelegate_0.titleText.color, balance === "0" ? Theme.palette.baseColor1 : Theme.palette.directColor1) @@ -464,7 +464,7 @@ Item { const inlineTagDelegate_0 = findChild(accountDelegateUnderTest, "inlineTagDelegate_0") verify(!!inlineTagDelegate_0) - compare(inlineTagDelegate_0.asset.name, Style.svg("tiny/%1".arg(networkModelItem.iconUrl))) + compare(inlineTagDelegate_0.asset.name, Theme.svg("tiny/%1".arg(networkModelItem.iconUrl))) compare(inlineTagDelegate_0.asset.color.toString().toUpperCase(), networkModelItem.chainColor.toString().toUpperCase()) let balancesModel = SQUtils.ModelUtils.getByKey(root.swapAdaptor.walletAssetsStore.baseGroupedAccountAssetModel, "tokensKey", root.swapFormData.fromTokensKey).balances diff --git a/storybook/qmlTests/tests/tst_SwapSignModal.qml b/storybook/qmlTests/tests/tst_SwapSignModal.qml index 9a4cb74f3c..538cf420f6 100644 --- a/storybook/qmlTests/tests/tst_SwapSignModal.qml +++ b/storybook/qmlTests/tests/tst_SwapSignModal.qml @@ -6,6 +6,7 @@ import QtQml 2.15 import Models 1.0 import StatusQ.Core.Utils 0.1 as SQUtils +import StatusQ.Core.Theme 0.1 import AppLayouts.Wallet.popups.swap 1.0 @@ -38,7 +39,7 @@ Item { networkShortName: Constants.networkShortChainNames.mainnet networkName: "Mainnet" - networkIconPath: Style.svg("network/Network=Ethereum") + networkIconPath: Theme.svg("network/Network=Ethereum") networkBlockExplorerUrl: "https://etherscan.io/" serviceProviderName: Constants.swap.paraswapName diff --git a/storybook/src/Models/ModelsData.qml b/storybook/src/Models/ModelsData.qml index 6f3f2e6c64..bb661f1077 100644 --- a/storybook/src/Models/ModelsData.qml +++ b/storybook/src/Models/ModelsData.qml @@ -1,6 +1,9 @@ pragma Singleton import QtQuick 2.14 + +import StatusQ.Core.Theme 0.1 + import utils 1.0 QtObject { @@ -34,36 +37,36 @@ QtObject { readonly property QtObject assets: QtObject { - readonly property string socks: Style.png("tokens/SOCKS") - readonly property string zrx: Style.png("tokens/ZRX") - readonly property string inch: Style.png("tokens/CUSTOM-TOKEN") - readonly property string aave: Style.png("tokens/CUSTOM-TOKEN") - readonly property string amp: Style.png("tokens/CUSTOM-TOKEN") - readonly property string uni: Style.png("tokens/UNI") - readonly property string eth: Style.png("tokens/ETH") - readonly property string dai: Style.png("tokens/DAI") - readonly property string snt: Style.png("tokens/SNT") - readonly property string mana: Style.png("tokens/aMANA") + readonly property string socks: Theme.png("tokens/SOCKS") + readonly property string zrx: Theme.png("tokens/ZRX") + readonly property string inch: Theme.png("tokens/CUSTOM-TOKEN") + readonly property string aave: Theme.png("tokens/CUSTOM-TOKEN") + readonly property string amp: Theme.png("tokens/CUSTOM-TOKEN") + readonly property string uni: Theme.png("tokens/UNI") + readonly property string eth: Theme.png("tokens/ETH") + readonly property string dai: Theme.png("tokens/DAI") + readonly property string snt: Theme.png("tokens/SNT") + readonly property string mana: Theme.png("tokens/aMANA") } readonly property QtObject collectibles: QtObject { - readonly property string anniversary: Style.png("collectibles/Anniversary") - readonly property string cryptoKitties: Style.png("collectibles/CryptoKitties") - readonly property string kitty1: Style.png("collectibles/Furbeard") - readonly property string kitty1Big: Style.png("collectibles/FurbeardBig") - readonly property string kitty2: Style.png("collectibles/Magicat") - readonly property string kitty2Big: Style.png("collectibles/MagicatBig") - readonly property string kitty3: Style.png("collectibles/HappyMeow") - readonly property string kitty3Big: Style.png("collectibles/HappyMeowBig") - readonly property string kitty4: Style.png("collectibles/Furbeard") - readonly property string kitty4Big: Style.png("collectibles/FurbeardBig") - readonly property string kitty5: Style.png("collectibles/Magicat") - readonly property string kitty5Big: Style.png("collectibles/MagicatBig") - readonly property string superRare: Style.png("collectibles/SuperRare") - readonly property string custom: Style.png("collectibles/SNT") - readonly property string doodles: Style.png("collectibles/Doodles") - readonly property string mana: Style.png("collectibles/MANA-token-icon") - readonly property string cryptoPunks: Style.png("collectibles/CryptoPunks") + readonly property string anniversary: Theme.png("collectibles/Anniversary") + readonly property string cryptoKitties: Theme.png("collectibles/CryptoKitties") + readonly property string kitty1: Theme.png("collectibles/Furbeard") + readonly property string kitty1Big: Theme.png("collectibles/FurbeardBig") + readonly property string kitty2: Theme.png("collectibles/Magicat") + readonly property string kitty2Big: Theme.png("collectibles/MagicatBig") + readonly property string kitty3: Theme.png("collectibles/HappyMeow") + readonly property string kitty3Big: Theme.png("collectibles/HappyMeowBig") + readonly property string kitty4: Theme.png("collectibles/Furbeard") + readonly property string kitty4Big: Theme.png("collectibles/FurbeardBig") + readonly property string kitty5: Theme.png("collectibles/Magicat") + readonly property string kitty5Big: Theme.png("collectibles/MagicatBig") + readonly property string superRare: Theme.png("collectibles/SuperRare") + readonly property string custom: Theme.png("collectibles/SNT") + readonly property string doodles: Theme.png("collectibles/Doodles") + readonly property string mana: Theme.png("collectibles/MANA-token-icon") + readonly property string cryptoPunks: Theme.png("collectibles/CryptoPunks") } readonly property QtObject networks: QtObject { @@ -84,9 +87,9 @@ QtObject { } readonly property QtObject onRampProviderImages: QtObject { - readonly property string latamex: Style.png("onRampProviders/latamex") - readonly property string moonPay: Style.png("onRampProviders/moonPay") - readonly property string ramp: Style.png("onRampProviders/ramp") - readonly property string mercuryo: Style.png("onRampProviders/mercuryo") + readonly property string latamex: Theme.png("onRampProviders/latamex") + readonly property string moonPay: Theme.png("onRampProviders/moonPay") + readonly property string ramp: Theme.png("onRampProviders/ramp") + readonly property string mercuryo: Theme.png("onRampProviders/mercuryo") } } diff --git a/storybook/src/Models/WalletTransactionsModel.qml b/storybook/src/Models/WalletTransactionsModel.qml index d09b19f1e7..f61c8cf95e 100644 --- a/storybook/src/Models/WalletTransactionsModel.qml +++ b/storybook/src/Models/WalletTransactionsModel.qml @@ -2,6 +2,7 @@ import QtQuick 2.15 import StatusQ 0.1 import StatusQ.Core 0.1 +import StatusQ.Core.Theme 0.1 import utils 1.0 @@ -24,13 +25,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" @@ -53,13 +54,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" @@ -82,13 +83,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" @@ -111,13 +112,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" @@ -140,13 +141,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" @@ -169,13 +170,13 @@ ListModel { isNFT: false, isCommunityAssetViaAirdrop: false, communityName: "Doodles", - communityImageUrl: Style.png("collectibles/HappyMeow"), + communityImageUrl: Theme.png("collectibles/HappyMeow"), tokenID: "4981676894159712808201908443964193325271219637660871887967796332739046670337", tokenAddress: "0xdeadbeef", tokenInAddress: "0xdeadbeef-00", tokenOutAddress: "0xdeadbeef-00", nftName: "Happy Meow NFT", - nftImageUrl: Style.png("collectibles/HappyMeow"), + nftImageUrl: Theme.png("collectibles/HappyMeow"), chainId: "NETWORKID", chainIdIn: "NETWORKID-IN", chainIdOut: "NETWORKID-OUT" diff --git a/ui/StatusQ/sandbox/pages/StatusCardPage.qml b/ui/StatusQ/sandbox/pages/StatusCardPage.qml index 5e657b11a3..ef3b83338d 100644 --- a/ui/StatusQ/sandbox/pages/StatusCardPage.qml +++ b/ui/StatusQ/sandbox/pages/StatusCardPage.qml @@ -58,7 +58,7 @@ Item { StatusCheckBox { Layout.alignment: Qt.AlignVCenter text: "advancedMode" - font.family: Theme.palette.monoFont.name + font.family: Theme.monoFont.name onClicked: { card.advancedMode = checked } @@ -68,7 +68,7 @@ Item { StatusCheckBox { Layout.alignment: Qt.AlignVCenter text: "loading" - font.family: Theme.palette.monoFont.name + font.family: Theme.monoFont.name onClicked: { card.loading = checked } diff --git a/ui/StatusQ/src/StatusQ/Components/StatusAddress.qml b/ui/StatusQ/src/StatusQ/Components/StatusAddress.qml index ee3fe56c6d..0043afafa4 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusAddress.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusAddress.qml @@ -1,4 +1,4 @@ -import QtQuick 2.14 +import QtQuick 2.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -13,7 +13,7 @@ StatusBaseText { readonly property real actualWidth: implicitWidth property real maxWidth: width - font.family: Theme.palette.monoFont.name + font.family: Theme.monoFont.name font.pixelSize: 13 elide: Text.ElideMiddle color: Theme.palette.baseColor1 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusAddressPanel.qml b/ui/StatusQ/src/StatusQ/Components/StatusAddressPanel.qml index f240a9cb61..ee65866730 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusAddressPanel.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusAddressPanel.qml @@ -1,6 +1,6 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -14,7 +14,7 @@ import StatusQ.Controls 0.1 \brief Show an address/ens as defined in design https://www.figma.com/file/FkFClTCYKf83RJWoifWgoX/Wallet-v2?node-id=4222%3A178403 and https://www.figma.com/file/h2Ab3k4wy1Y7SFHEvbcZZx/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop-(Copy)?node-id=1009%3A106451 Panel's components: - - Address: displays the rquired \c address property + - Address: displays the required \c address property - Frame: a rounded frame and the \c 0x icon prefix - Copy action: clickable copy icon. Activable using \c showCopy @@ -113,7 +113,7 @@ Item { Layout.preferredWidth: root.expanded || root.ens ? implicitWidth : (implicitWidth * 0.25).toFixed() Layout.alignment: Qt.AlignVCenter - font.family: Theme.palette.monoFont.name + font.family: Theme.monoFont.name font.pixelSize: 15 font.weight: Font.Medium elide: Text.ElideMiddle diff --git a/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml index 14a153b21d..5e125cd479 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusFlowSelector.qml @@ -19,7 +19,7 @@ import StatusQ.Controls 0.1 Example of how to use it: \qml StatusFlowSelector { - icon: Style.svg("contact_verified") + icon: Theme.svg("contact_verified") title: qsTr("Who holds") placeholderItem.visible: listModel.count === 0 diff --git a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml index 3c8cfa9652..08fca4dd6b 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusItemSelector.qml @@ -1,5 +1,5 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -23,7 +23,7 @@ import StatusQ.Core.Utils 0.1 Example of how to use it: \qml StatusItemSelector { - icon: Style.svg("contact_verified") + icon: Theme.svg("contact_verified") title: qsTr("Who holds") defaultItemText: qsTr("Example: 10 SNT") andOperatorText: qsTr("and") diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml index d52db524eb..22171ed42f 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMemberListItem.qml @@ -164,7 +164,7 @@ ItemDelegate { icon.width: 32 icon.height: 32 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize background: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml index 4848525af1..77d9650bc1 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusMessage.qml @@ -287,7 +287,7 @@ Control { messageDetails: root.messageDetails isEdited: root.isEdited allowShowMore: !root.isInPinnedPopup - textField.anchors.rightMargin: root.isInPinnedPopup ? /*Style.current.xlPadding*/ 32 : 0 // margin for the "Unpin" floating button + textField.anchors.rightMargin: root.isInPinnedPopup ? Theme.xlPadding : 0 // margin for the "Unpin" floating button highlightedLink: root.highlightedLink linkAddressAndEnsName: root.linkAddressAndEnsName onLinkActivated: { @@ -315,7 +315,7 @@ Control { messageDetails: root.messageDetails isEdited: root.isEdited allowShowMore: !root.isInPinnedPopup - textField.anchors.rightMargin: root.isInPinnedPopup ? /*Style.current.xlPadding*/ 32 : 0 // margin for the "Unpin" floating button + textField.anchors.rightMargin: root.isInPinnedPopup ? Theme.xlPadding : 0 // margin for the "Unpin" floating button highlightedLink: root.highlightedLink onLinkActivated: { root.linkActivated(link); diff --git a/ui/StatusQ/src/StatusQ/Components/StatusRoundedImage.qml b/ui/StatusQ/src/StatusQ/Components/StatusRoundedImage.qml index 8a20b3e5ff..8b56c94135 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusRoundedImage.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusRoundedImage.qml @@ -1,4 +1,4 @@ -import QtQuick 2.13 +import QtQuick 2.15 /*! \qmltype StatusRoundedImage diff --git a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml index f7a63c8c25..fc73dc341d 100644 --- a/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml +++ b/ui/StatusQ/src/StatusQ/Components/StatusTagSelector.qml @@ -297,7 +297,7 @@ Item { clip: true font.pixelSize: 15 wrapMode: TextEdit.NoWrap - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name Layout.fillWidth: true Layout.preferredHeight: 44 visible: (parent.width>22) @@ -352,9 +352,9 @@ Item { width: 360 anchors { top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom - topMargin: 8//Style.current.halfPadding + topMargin: Theme.halfPadding bottom: parent.bottom - bottomMargin: 16//Style.current.padding + bottomMargin: Theme.padding } clip: true visible: (!root.showSortedListOnlyWhenText && ((root.sortedList.count > 0) || (edit.text === ""))) || diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml index 05a870607d..5d2af4a982 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusMessageEmojiReactions.qml @@ -1,7 +1,5 @@ -import QtQuick 2.3 -import QtQuick.Controls 2.13 -import QtQuick.Layouts 1.14 -import QtGraphicalEffects 1.13 +import QtQuick 2.15 +import QtQuick.Controls 2.15 import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 diff --git a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml index 5f5e6610ce..68f9d447fa 100644 --- a/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml +++ b/ui/StatusQ/src/StatusQ/Components/private/statusMessage/StatusTextMessage.qml @@ -97,7 +97,7 @@ Item { selectedTextColor: Theme.palette.directColor1 selectionColor: Theme.palette.primaryColor3 color: d.isQuote ? Theme.palette.baseColor1 : Theme.palette.directColor1 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize textFormat: Text.RichText wrapMode: root.convertToSingleLine ? Text.NoWrap : Text.Wrap diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml index 55ec6b14e7..72cfa92e2d 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseButton.qml @@ -83,7 +83,7 @@ Button { } } - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.weight: Font.Medium font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml index 51841be81d..9a246820ab 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusBaseInput.qml @@ -375,7 +375,7 @@ Item { selectedTextColor: color focus: true font.pixelSize: 15 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name color: root.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1 wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml index 05d16c1b0e..6cb41126f3 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusCheckBox.qml @@ -39,7 +39,7 @@ CheckBox { readonly property int indicatorIconHeightSmall: 5 } - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: size === StatusCheckBox.Size.Regular ? 15 : 13 indicator: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml index 0bf9b8a869..61cd931546 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusComboBox.qml @@ -102,7 +102,7 @@ Item { enabled: root.enabled - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: root.size === StatusComboBox.Size.Large ? Theme.secondaryTextFontSize : 13 padding: 16 diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml index 90c104032f..50bf3f2402 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusItemDelegate.qml @@ -18,7 +18,7 @@ ItemDelegate { icon.width: 16 icon.height: 16 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: 15 contentItem: RowLayout { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml index 961560ece3..79ad84e91e 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusLinkText.qml @@ -1,8 +1,8 @@ +import QtQuick 2.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 -import QtQuick 2.14 - /*! \qmltype StatusLinkText \inherits StatusBaseText diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml index 74ce744e37..0e075f4e0c 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusRadioButton.qml @@ -22,7 +22,7 @@ RadioButton { } opacity: enabled ? 1.0 : 0.3 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize indicator: Rectangle { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml index 16f80a1fc7..e13802246a 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSelectableText.qml @@ -1,6 +1,6 @@ -import QtQuick 2.14 +import QtQuick 2.15 -import QtQuick.Controls 2.14 as QC +import QtQuick.Controls 2.15 as QC import StatusQ.Controls 0.1 import StatusQ.Core 0.1 @@ -70,7 +70,7 @@ Item { selectedTextColor: color focus: true font.pixelSize: 15 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name color: Theme.palette.directColor1 textFormat: Text.RichText onCursorRectangleChanged: Utils.ensureVisible(flick, cursorRectangle) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml index baf5b7fc9a..c616c8d61d 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusSwitch.qml @@ -1,6 +1,7 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 -import QtGraphicalEffects 1.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtGraphicalEffects 1.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 @@ -10,7 +11,7 @@ Switch { property color textColor: Theme.palette.directColor1 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize background: MouseArea { diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml index 307447292b..ff82d09971 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTagItem.qml @@ -1,6 +1,7 @@ -import QtQuick 2.14 +import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 + import StatusQ.Core 0.1 import StatusQ.Core.Theme 0.1 @@ -67,7 +68,7 @@ Control { implicitHeight: 30 horizontalPadding: d.tagMargins font.pixelSize: 15 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name background: Rectangle { color: d.getTagColor(root.isReadonly) diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml index 47ae7ee76d..5f52830767 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextArea.qml @@ -1,5 +1,5 @@ -import QtQuick 2.14 -import QtQuick.Controls 2.14 +import QtQuick 2.15 +import QtQuick.Controls 2.15 import StatusQ.Core.Theme 0.1 import StatusQ.Components 0.1 @@ -66,7 +66,7 @@ TextArea { placeholderTextColor: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor9 font { - family: Theme.palette.baseFont.name + family: Theme.baseFont.name pixelSize: 15 } diff --git a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml index bdf710f59d..7968c52b85 100644 --- a/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml +++ b/ui/StatusQ/src/StatusQ/Controls/StatusTextField.qml @@ -7,7 +7,7 @@ import StatusQ.Core.Theme 0.1 TextField { id: root - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize color: readOnly ? Theme.palette.baseColor1 : Theme.palette.directColor1 selectByMouse: true diff --git a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml index dd81195309..e669951192 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusBaseText.qml @@ -1,4 +1,4 @@ -import QtQuick 2.13 +import QtQuick 2.15 import StatusQ.Core.Theme 0.1 /*! @@ -26,7 +26,7 @@ import StatusQ.Core.Theme 0.1 */ Text { - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize color: Theme.palette.directColor1 linkColor: hoveredLink ? Qt.lighter(Theme.palette.primaryColor1) diff --git a/ui/StatusQ/src/StatusQ/Core/StatusFontSettings.qml b/ui/StatusQ/src/StatusQ/Core/StatusFontSettings.qml index 1d05394d5a..3ccd0ffb1c 100644 --- a/ui/StatusQ/src/StatusQ/Core/StatusFontSettings.qml +++ b/ui/StatusQ/src/StatusQ/Core/StatusFontSettings.qml @@ -1,10 +1,7 @@ -import QtQuick 2.13 +import QtQuick 2.15 QtObject { - id: statusFontSettings - property bool bold: false property bool italic: false property int pixelSize: 13 } - diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml index 468b822efd..abb02f68d9 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusColors.qml @@ -1,6 +1,6 @@ pragma Singleton -import QtQml 2.14 +import QtQml 2.15 QtObject { diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml index fdb119515f..19ee49c058 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusDarkTheme.qml @@ -1,11 +1,10 @@ -import QtQuick 2.13 +import QtQuick 2.15 ThemePalette { + id: root name: "dark" - dropShadow: getColor('black', 0.08) - baseColor1: getColor('graphite5') baseColor2: getColor('graphite4') baseColor3: getColor('graphite3') @@ -65,6 +64,7 @@ ThemePalette { miscColor11: getColor('yellow2') miscColor12: getColor('green6') + dropShadow: getColor('black', 0.08) dropShadow2: getColor('blue8', 0.02) statusFloatingButtonHighlight: getColor('blue4', 0.3) @@ -100,6 +100,12 @@ ThemePalette { blockProgressBarColor: directColor7 + // Style compat + background: baseColor3 + separator: directColor7 + darkGrey: baseColor2 + secondaryMenuBackground: getColor("graphite2") + statusAppLayout: QtObject { property color backgroundColor: baseColor3 property color rightPanelBackgroundColor: baseColor3 @@ -146,7 +152,7 @@ ThemePalette { statusMenu: QtObject { property color backgroundColor: baseColor3 property color hoverBackgroundColor: directColor7 - property color separatorColor: directColor7 + property color separatorColor: root.separator } statusModal: QtObject { diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml index caa2c6c213..9067439989 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/StatusLightTheme.qml @@ -1,6 +1,7 @@ -import QtQuick 2.13 +import QtQuick 2.15 ThemePalette { + id: root name: "light" @@ -98,6 +99,12 @@ ThemePalette { blockProgressBarColor: baseColor3 + // Style compat + background: white + separator: baseColor2 + darkGrey: baseColor1 + secondaryMenuBackground: baseColor4 + statusAppLayout: QtObject { property color backgroundColor: white property color rightPanelBackgroundColor: white @@ -144,7 +151,7 @@ ThemePalette { statusMenu: QtObject { property color backgroundColor: white property color hoverBackgroundColor: baseColor2 - property color separatorColor: baseColor2 + property color separatorColor: root.separator } statusModal: QtObject { diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml index ddff0de891..ba77edfe12 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/Theme.qml @@ -1,10 +1,9 @@ pragma Singleton -import QtQuick 2.13 +import QtQuick 2.15 +import QtQuick.Controls.Universal 2.15 QtObject { - id: appTheme - enum FontSize { FontSizeXS, FontSizeS, @@ -16,58 +15,210 @@ QtObject { property ThemePalette palette: StatusLightTheme {} + readonly property ThemePalette statusQLightTheme: StatusLightTheme {} + readonly property ThemePalette statusQDarkTheme: StatusDarkTheme {} + + readonly property string sqAssetPath: Qt.resolvedUrl("../../../assets/") + + function changeTheme(theme:int, isCurrentSystemThemeDark:bool) { + switch (theme) { + case Universal.Light: + Theme.palette = statusQLightTheme + break + case Universal.Dark: + Theme.palette = statusQDarkTheme + break + case Universal.System: + Theme.palette = isCurrentSystemThemeDark ? statusQDarkTheme : statusQLightTheme + break + default: + console.warn('Unknown theme. Valid themes are "light" and "dark"') + } + } + + function changeFontSize(fontSize:int) { + updateFontSize(fontSize) + } + + readonly property var baseFont: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Regular.otf" + } + + readonly property var monoFont: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Regular.otf" + } + + readonly property var codeFont: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-Regular.ttf" + } + + readonly property var _d: QtObject { + // specific font variants should not be accessed directly + + // Inter font variants + property var baseFontThin: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Thin.otf" + } + + property var baseFontExtraLight: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-ExtraLight.otf" + } + + property var baseFontLight: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Light.otf" + } + + property var baseFontMedium: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Medium.otf" + } + + property var baseFontBold: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Bold.otf" + } + + property var baseFontExtraBold: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-ExtraBold.otf" + } + + property var baseFontBlack: FontLoader { + source: sqAssetPath + "fonts/Inter/Inter-Black.otf" + } + + // Inter Status font variants + property var monoFontThin: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Thin.otf" + } + + property var monoFontExtraLight: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-ExtraLight.otf" + } + + property var monoFontLight: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Light.otf" + } + + property var monoFontMedium: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Medium.otf" + } + + property var monoFontBold: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Bold.otf" + } + + property var monoFontExtraBold: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-ExtraBold.otf" + } + + property var monoFontBlack: FontLoader { + source: sqAssetPath + "fonts/InterStatus/InterStatus-Black.otf" + } + + // Roboto font variants + property var codeFontThin: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-Thin.ttf" + } + + property var codeFontExtraLight: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-ExtraLight.ttf" + } + + property var codeFontLight: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-Light.ttf" + } + + property var codeFontMedium: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-Medium.ttf" + } + + property var codeFontBold: FontLoader { + source: sqAssetPath + "fonts/RobotoMono/RobotoMono-Bold.ttf" + } + } + + property int secondaryAdditionalTextSize: 17 property int primaryTextFontSize: 15 property int secondaryTextFontSize: 14 + property int additionalTextSize: 13 property int tertiaryTextFontSize: 12 property int asideTextFontSize: 10 - function setTheme(theme) { - palette = theme - } + property int xlPadding: 32 + property int bigPadding: 24 + property int padding: 16 + property int halfPadding: 8 + property int smallPadding: 10 + property int radius: 8 - function updateFontSize(fontSize) { + function updateFontSize(fontSize:int) { switch (fontSize) { case Theme.FontSizeXS: + secondaryAdditionalTextSize = 15 primaryTextFontSize = 13 secondaryTextFontSize = 12 + additionalTextSize = 11 tertiaryTextFontSize = 10 asideTextFontSize = 8 break; case Theme.FontSizeS: + secondaryAdditionalTextSize = 16 primaryTextFontSize = 14 secondaryTextFontSize = 13 + additionalTextSize = 12 tertiaryTextFontSize = 11 asideTextFontSize = 9 break; case Theme.FontSizeM: + secondaryAdditionalTextSize = 17 primaryTextFontSize = 15 secondaryTextFontSize = 14 + additionalTextSize = 13 tertiaryTextFontSize = 12 asideTextFontSize = 10 break; case Theme.FontSizeL: + secondaryAdditionalTextSize = 18 primaryTextFontSize = 16 secondaryTextFontSize = 15 + additionalTextSize = 14 tertiaryTextFontSize = 13 asideTextFontSize = 11 break; case Theme.FontSizeXL: + secondaryAdditionalTextSize = 19 primaryTextFontSize = 17 secondaryTextFontSize = 16 + additionalTextSize = 15 tertiaryTextFontSize = 14 asideTextFontSize = 12 break; case Theme.FontSizeXXL: + secondaryAdditionalTextSize = 20 primaryTextFontSize = 18 secondaryTextFontSize = 17 + additionalTextSize = 16 tertiaryTextFontSize = 15 asideTextFontSize = 13 break; } } + + // Style compat + readonly property string assetPath: Qt.resolvedUrl("../../../../../imports/assets/") + function png(name) { + return assetPath + "png/" + name + ".png" + } + function svg(name) { + return assetPath + "icons/" + name + ".svg" + } + function emoji(name) { + return "qrc:/StatusQ/src/assets/twemoji/svg/" + name + ".svg" + } + function gif(name) { + return assetPath + "gif/" + name + ".gif" + } } diff --git a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml index 18b95d729c..434ecea5f7 100644 --- a/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml +++ b/ui/StatusQ/src/StatusQ/Core/Theme/ThemePalette.qml @@ -5,101 +5,6 @@ QtObject { property string name - property var baseFont: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Regular.otf" - } - - property var monoFont: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Regular.otf" - } - - property var codeFont: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf" - } - - readonly property QtObject _d: QtObject { - // specific font variants should not be accessed directly - - // Inter font variants - property var baseFontThin: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Thin.otf" - } - - property var baseFontExtraLight: FontLoader { - source: "../../../assets/fonts/Inter/Inter-ExtraLight.otf" - } - - property var baseFontLight: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Light.otf" - } - - property var baseFontMedium: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Medium.otf" - } - - property var baseFontBold: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Bold.otf" - } - - property var baseFontExtraBold: FontLoader { - source: "../../../assets/fonts/Inter/Inter-ExtraBold.otf" - } - - property var baseFontBlack: FontLoader { - source: "../../../assets/fonts/Inter/Inter-Black.otf" - } - - // Inter Status font variants - property var monoFontThin: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Thin.otf" - } - - property var monoFontExtraLight: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-ExtraLight.otf" - } - - property var monoFontLight: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Light.otf" - } - - property var monoFontMedium: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Medium.otf" - } - - property var monoFontBold: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Bold.otf" - } - - property var monoFontExtraBold: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-ExtraBold.otf" - } - - property var monoFontBlack: FontLoader { - source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf" - } - - // Roboto font variants - property var codeFontThin: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf" - } - - property var codeFontExtraLight: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf" - } - - property var codeFontLight: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf" - } - - property var codeFontMedium: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf" - } - - property var codeFontBold: FontLoader { - source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf" - } - } - property color black: Qt.rgba(0, 0, 0) property color white: Qt.rgba(1, 1, 1) property color transparent: "#00000000" @@ -113,10 +18,6 @@ QtObject { property color dropShadow2 property color backdropColor: getColor('black', 0.4) - function hoverColor(normalColor) { - return theme.name === "light" ? Qt.darker(normalColor, 1.2) : Qt.lighter(normalColor, 1.2) - } - property color baseColor1 property color baseColor2 property color baseColor3 @@ -191,6 +92,17 @@ QtObject { property color blockProgressBarColor + // Style compat + property color background + property color backgroundHover: baseColor2 + property color border: baseColor2 + property color textColor: directColor1 + property color secondaryText: baseColor1 + property color separator + property color darkGrey + property color secondaryBackground: primaryColor2 + property color secondaryMenuBackground + property QtObject statusAppLayout: QtObject { property color backgroundColor property color rightPanelBackgroundColor @@ -319,6 +231,10 @@ QtObject { return actualColor } + function hoverColor(normalColor) { + return theme.name === "light" ? Qt.darker(normalColor, 1.2) : Qt.lighter(normalColor, 1.2) + } + function getColor(name, alpha) { if(StatusColors.colors[name]) // It means name is just the key to find inside the specific `StatusColors` object diff --git a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml index 3f24484f2b..0ecce225bb 100644 --- a/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml +++ b/ui/StatusQ/src/StatusQ/Core/Utils/Utils.qml @@ -1,6 +1,6 @@ pragma Singleton -import QtQuick 2.13 +import QtQuick 2.15 import StatusQ.Core.Theme 0.1 import "./xss.js" as XSS @@ -189,7 +189,7 @@ QtObject { return ``+ @@ -474,12 +474,12 @@ Loader { ``; } font.pixelSize: 14 - color: Style.current.secondaryText + color: Theme.palette.secondaryText width: parent.width - 120 horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter textFormat: Text.RichText - topPadding: root.prevMessageIndex === 1 ? Style.current.bigPadding : 0 + topPadding: root.prevMessageIndex === 1 ? Theme.bigPadding : 0 } } @@ -507,12 +507,12 @@ Loader { } } font.pixelSize: 14 - color: Style.current.secondaryText + color: Theme.palette.secondaryText width: parent.width - 120 horizontalAlignment: Text.AlignHCenter anchors.horizontalCenter: parent.horizontalCenter textFormat: Text.RichText - topPadding: root.prevMessageIndex === 1 ? Style.current.bigPadding : 0 + topPadding: root.prevMessageIndex === 1 ? Theme.bigPadding : 0 } } @@ -524,11 +524,11 @@ Loader { horizontalAlignment: Text.AlignHCenter text: qsTr("%1 pinned a message").arg(senderDisplayName) color: Theme.palette.directColor3 - font.family: Theme.palette.baseFont.name + font.family: Theme.baseFont.name font.pixelSize: Theme.primaryTextFontSize textFormat: Text.RichText wrapMode: Text.Wrap - topPadding: root.prevMessageIndex === 1 ? Style.current.bigPadding : 0 + topPadding: root.prevMessageIndex === 1 ? Theme.bigPadding : 0 } } @@ -678,12 +678,12 @@ Loader { pinnedMsgInfoText: root.isDiscordMessage ? qsTr("Pinned") : qsTr("Pinned by") reactionIcons: [ - Style.svg("emojiReactions/heart"), - Style.svg("emojiReactions/thumbsUp"), - Style.svg("emojiReactions/thumbsDown"), - Style.svg("emojiReactions/laughing"), - Style.svg("emojiReactions/sad"), - Style.svg("emojiReactions/angry"), + Theme.svg("emojiReactions/heart"), + Theme.svg("emojiReactions/thumbsUp"), + Theme.svg("emojiReactions/thumbsDown"), + Theme.svg("emojiReactions/laughing"), + Theme.svg("emojiReactions/sad"), + Theme.svg("emojiReactions/angry"), ] timestamp: root.messageTimestamp @@ -716,8 +716,8 @@ Loader { root.prevMessageContentType === Constants.messageContentType.bridgeMessageType || root.senderId !== root.prevMessageSenderId || root.prevMessageDeleted isActiveMessage: d.isMessageActive - topPadding: showHeader ? Style.current.halfPadding : 0 - bottomPadding: showHeader && d.nextMessageHasHeader ? Style.current.halfPadding : 2 + topPadding: showHeader ? Theme.halfPadding : 0 + bottomPadding: showHeader && d.nextMessageHasHeader ? Theme.halfPadding : 2 disableHover: root.disableHover || (delegate.hideQuickActions && !d.addReactionAllowed) || (root.chatLogView && root.chatLogView.moving) || @@ -860,7 +860,7 @@ Loader { colorHash: root.senderColorHash showRing: !root.isDiscordMessage && !root.senderIsEnsVerified && !root.isBridgeMessage } - sender.badgeImage: Style.svg("discord-bridge") + sender.badgeImage: Theme.svg("discord-bridge") } replyDetails: StatusMessageDetails { @@ -957,7 +957,7 @@ Loader { linkPreviewModel: root.linkPreviewModel gifLinks: root.gifLinks - playAnimations: Window.window.active && root.messageStore.isChatActive + playAnimations: root.Window.window.active && root.messageStore.isChatActive isOnline: root.rootStore.mainModuleInst.isOnline highlightLink: delegate.hoveredLink onImageClicked: (image, mouse, imageSource, url) => { diff --git a/ui/imports/shared/views/chat/SimplifiedMessageView.qml b/ui/imports/shared/views/chat/SimplifiedMessageView.qml index ea7bcf7b29..336917d78a 100644 --- a/ui/imports/shared/views/chat/SimplifiedMessageView.qml +++ b/ui/imports/shared/views/chat/SimplifiedMessageView.qml @@ -1,5 +1,5 @@ -import QtQuick 2.14 -import QtQuick.Layouts 1.14 +import QtQuick 2.15 +import QtQuick.Layouts 1.15 import StatusQ.Core 0.1 import StatusQ.Core.Utils 0.1 as CoreUtils @@ -29,7 +29,7 @@ RowLayout { Layout.preferredWidth: root.messageDetails.sender.profileImage.assetSettings.width Layout.preferredHeight: profileImage.height Layout.alignment: Qt.AlignTop - Layout.leftMargin: Style.current.padding + Layout.leftMargin: Theme.padding Layout.topMargin: 2 StatusSmartIdenticon { diff --git a/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml index 5a5d762145..e5b7cddf98 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseAccountsView.qml @@ -39,19 +39,19 @@ Item { id: accountsView anchors.fill: parent - topMargin: Style.current.bigPadding - bottomMargin: Style.current.bigPadding - leftMargin: Style.current.bigPadding + topMargin: Theme.bigPadding + bottomMargin: Theme.bigPadding + leftMargin: Theme.bigPadding visible: count ScrollBar.vertical: StatusScrollBar { anchors.right: parent.right; anchors.rightMargin: width / 2 } model: root.accountsModel delegate: InfoCard { id: accountInfoDelegate - implicitWidth: GridView.view.cellWidth - Style.current.padding - implicitHeight: GridView.view.cellHeight - Style.current.padding + implicitWidth: GridView.view.cellWidth - Theme.padding + implicitHeight: GridView.view.cellHeight - Theme.padding title: model.name - subTitle: StatusQUtils.Utils.elideText(model.address, 6, 4).replace("0x", "0×") + subTitle: StatusQUtils.Utils.elideAndFormatWalletAddress(model.address) asset.color: Utils.getColorForId(model.colorId) asset.emoji: model.emoji ?? "" asset.name: asset.emoji || "filled-account" @@ -96,7 +96,7 @@ Item { } onClicked: { if (mouse.button === Qt.RightButton) { - Global.openMenu(delegatesActionsMenu, this, { + Global.openMenu(delegatesActionsMenu, this, { accountAddress: model.address, accountName: model.name, accountColorId: model.colorId diff --git a/ui/imports/shared/views/profile/ProfileShowcaseAssetsView.qml b/ui/imports/shared/views/profile/ProfileShowcaseAssetsView.qml index 6e9410c441..97506e59a4 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseAssetsView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseAssetsView.qml @@ -19,8 +19,8 @@ Item { required property var assetsModel required property bool sendToAccountEnabled - property alias cellWidth: accountsView.cellWidth - property alias cellHeight: accountsView.cellHeight + property alias cellWidth: assetsView.cellWidth + property alias cellHeight: assetsView.cellHeight signal closeRequested() signal visitCommunity(var model) @@ -37,9 +37,9 @@ Item { id: assetsView anchors.fill: parent - topMargin: Style.current.bigPadding - bottomMargin: Style.current.bigPadding - leftMargin: Style.current.bigPadding + topMargin: Theme.bigPadding + bottomMargin: Theme.bigPadding + leftMargin: Theme.bigPadding visible: count @@ -47,8 +47,8 @@ Item { ScrollBar.vertical: StatusScrollBar { anchors.right: parent.right; anchors.rightMargin: width / 2 } delegate: InfoCard { id: assetsInfoDelegate - width: GridView.view.cellWidth - Style.current.padding - height: GridView.view.cellHeight - Style.current.padding + width: GridView.view.cellWidth - Theme.padding + height: GridView.view.cellHeight - Theme.padding title: model.name //TODO show balance & symbol subTitle: model.decimals + " " + model.symbol @@ -128,4 +128,4 @@ Item { } } } -} \ No newline at end of file +} diff --git a/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml b/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml index c5622fe52c..56697a8e41 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseCollectiblesView.qml @@ -41,9 +41,9 @@ Item { id: collectiblesView anchors.fill: parent - topMargin: Style.current.bigPadding - bottomMargin: Style.current.bigPadding - leftMargin: Style.current.bigPadding + topMargin: Theme.bigPadding + bottomMargin: Theme.bigPadding + leftMargin: Theme.bigPadding visible: count @@ -66,8 +66,8 @@ Item { Global.openLinkWithConfirmation(link, StatusQUtils.StringUtils.extractDomainFromLink(link)); } - width: GridView.view.cellWidth - Style.current.padding - height: GridView.view.cellHeight - Style.current.padding + width: GridView.view.cellWidth - Theme.padding + height: GridView.view.cellHeight - Theme.padding HoverHandler { id: hoverHandler @@ -77,7 +77,7 @@ Item { id: collectibleImage anchors.fill: parent color: !!model.backgroundColor ? model.backgroundColor : "transparent" - radius: Style.current.radius + radius: Theme.radius showLoadingIndicator: true isLoading: image.isLoading || !model.imageUrl image.fillMode: Image.PreserveAspectCrop @@ -102,14 +102,14 @@ Item { id: gradient anchors.fill: collectibleImage visible: hoverHandler.hovered - source: Style.png("profile/gradient") + source: Theme.png("profile/gradient") } //TODO Add drop shadow Control { id: amountControl - width: (amountText.contentWidth + Style.current.padding) + width: (amountText.contentWidth + Theme.padding) height: 24 anchors.left: parent.left anchors.leftMargin: 12 @@ -127,7 +127,7 @@ Item { id: amountText horizontalAlignment: Text.AlignHCenter verticalAlignment: Text.AlignVCenter - font.pixelSize: Style.current.asideTextFontSize + font.pixelSize: Theme.asideTextFontSize text: "x"+model.userHas } } @@ -166,7 +166,7 @@ Item { tagImage: isCommunity ? (model.communityImage ?? "") : (hovered ? "external" : "gallery") isIcon: !isCommunity - backgroundColor: hovered ? Style.current.background : Theme.palette.indirectColor2 + backgroundColor: hovered ? Theme.palette.background : Theme.palette.indirectColor2 expanded: hoverHandler.hovered || hovered onTagClicked: { if (isCommunity) { diff --git a/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml b/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml index 56f20fd5e5..a799e70023 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseCommunitiesView.qml @@ -39,9 +39,9 @@ Item { id: communitiesView anchors.fill: parent - topMargin: Style.current.bigPadding - bottomMargin: Style.current.bigPadding - leftMargin: Style.current.bigPadding + topMargin: Theme.bigPadding + bottomMargin: Theme.bigPadding + leftMargin: Theme.bigPadding visible: count model: root.communitiesProxyModel @@ -52,8 +52,8 @@ Item { readonly property bool isTokenGatedCommunity: PermissionsHelpers.isTokenGatedCommunity(permissionsList) cardSize: StatusCommunityCard.Size.Small - implicitWidth: GridView.view.cellWidth - Style.current.padding - implicitHeight: GridView.view.cellHeight - Style.current.padding + implicitWidth: GridView.view.cellWidth - Theme.padding + implicitHeight: GridView.view.cellHeight - Theme.padding titleFontSize: 15 communityId: model.id ?? "" loaded: !!model.id && !model.isShowcaseLoading diff --git a/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml b/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml index be761e315e..d6400e2318 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseSocialLinksView.qml @@ -34,9 +34,9 @@ Item { id: webView anchors.fill: parent - topMargin: Style.current.bigPadding - bottomMargin: Style.current.bigPadding - leftMargin: Style.current.bigPadding + topMargin: Theme.bigPadding + bottomMargin: Theme.bigPadding + leftMargin: Theme.bigPadding visible: count @@ -45,8 +45,8 @@ Item { delegate: InfoCard { id: socialLinksInfoDelegate readonly property int linkType: ProfileUtils.linkTextToType(model.text) - width: GridView.view.cellWidth - Style.current.padding - height: GridView.view.cellHeight - Style.current.padding + width: GridView.view.cellWidth - Theme.padding + height: GridView.view.cellHeight - Theme.padding title: !!ProfileUtils.linkTypeToText(linkType) ? ProfileUtils.linkTypeToText(linkType) : model.text asset.bgColor: ProfileUtils.linkTypeBgColor(linkType) asset.name: ProfileUtils.linkTypeToIcon(linkType) @@ -93,7 +93,7 @@ Item { visible: (webView.count > 0) Rectangle { anchors.fill: parent - color: Style.current.background + color: Theme.palette.background radius: 30 border.color: Theme.palette.baseColor2 } diff --git a/ui/imports/shared/views/profile/ProfileShowcaseView.qml b/ui/imports/shared/views/profile/ProfileShowcaseView.qml index 5b6beee535..71c21c2ac9 100644 --- a/ui/imports/shared/views/profile/ProfileShowcaseView.qml +++ b/ui/imports/shared/views/profile/ProfileShowcaseView.qml @@ -43,7 +43,7 @@ Control { signal copyToClipboard(string text) horizontalPadding: readOnly ? 20 : 40 // smaller in settings/preview - topPadding: Style.current.bigPadding + topPadding: Theme.bigPadding StatusQUtils.QObject { id: d @@ -215,26 +215,27 @@ Control { StatusDialog { id: visitComunityPopup // Community related props: - property string communityId - property string communityName - property string communityLogo + property string communityId + property string communityName + property string communityLogo // Token related props: - property string tokenName - property string tokenImage - property bool isAssetType: false + property string tokenName + property string tokenImage + property bool isAssetType: false width: 521 // by design padding: 0 + destroyOnClose: true contentItem: StatusScrollView { id: scrollView - padding: Style.current.padding + padding: Theme.padding contentWidth: availableWidth ColumnLayout { width: scrollView.availableWidth - spacing: Style.current.padding + spacing: Theme.padding StatusBaseText { Layout.fillWidth: true @@ -249,7 +250,7 @@ Control { // Navigate to community button StatusListItem { Layout.fillWidth: true - Layout.bottomMargin: Style.current.halfPadding + Layout.bottomMargin: Theme.halfPadding title: visitComunityPopup.communityName border.color: Theme.palette.baseColor2 @@ -266,10 +267,10 @@ Control { StatusBaseText { Layout.alignment: Qt.AlignVCenter - Layout.rightMargin: Style.current.padding + Layout.rightMargin: Theme.padding text: visitComunityPopup.tokenName - font.pixelSize: Style.current.additionalTextSize + font.pixelSize: Theme.additionalTextSize color: Theme.palette.primaryColor1 } } @@ -287,7 +288,7 @@ Control { header: StatusDialogHeader { leftComponent: StatusRoundedImage { Layout.alignment: Qt.AlignHCenter - Layout.margins: Style.current.padding + Layout.margins: Theme.padding Layout.preferredWidth: 68 Layout.preferredHeight: Layout.preferredWidth radius: visitComunityPopup.isAssetType ? width / 2 : 8 @@ -301,7 +302,7 @@ Control { } footer: StatusDialogFooter { - spacing: Style.current.padding + spacing: Theme.padding rightButtons: ObjectModel { StatusFlatButton { text: qsTr("Cancel") diff --git a/ui/imports/shared/views/profile/ShareProfileDialog.qml b/ui/imports/shared/views/profile/ShareProfileDialog.qml index 327c35a3ae..5733af0189 100644 --- a/ui/imports/shared/views/profile/ShareProfileDialog.qml +++ b/ui/imports/shared/views/profile/ShareProfileDialog.qml @@ -26,8 +26,8 @@ StatusDialog { width: 500 - topPadding: Style.current.padding - bottomPadding: Style.current.xlPadding + topPadding: Theme.padding + bottomPadding: Theme.xlPadding horizontalPadding: 0 StatusScrollView { @@ -39,7 +39,7 @@ StatusDialog { anchors.leftMargin: 40 anchors.right: parent.right anchors.rightMargin: 40 - spacing: Style.current.halfPadding + spacing: Theme.halfPadding Rectangle { Layout.fillWidth: true @@ -84,7 +84,7 @@ StatusDialog { } StatusBaseText { - Layout.topMargin: Style.current.smallPadding + Layout.topMargin: Theme.smallPadding Layout.fillWidth: true text: qsTr("Profile link") } @@ -93,11 +93,11 @@ StatusDialog { objectName: "profileLinkInput" Layout.fillWidth: true Layout.preferredHeight: 44 - leftPadding: Style.current.padding - rightPadding: Style.current.halfPadding + leftPadding: Theme.padding + rightPadding: Theme.halfPadding topPadding: 0 bottomPadding: 0 - placeholder.rightPadding: Style.current.halfPadding + placeholder.rightPadding: Theme.halfPadding placeholder.elide: Text.ElideMiddle placeholderText: root.linkToProfile placeholderTextColor: Theme.palette.directColor1 @@ -114,7 +114,7 @@ StatusDialog { } StatusBaseText { - Layout.topMargin: Style.current.halfPadding + Layout.topMargin: Theme.halfPadding Layout.fillWidth: true text: qsTr("Emoji hash") } @@ -123,8 +123,8 @@ StatusDialog { objectName: "emojiHashInput" Layout.fillWidth: true Layout.preferredHeight: 44 - leftPadding: Style.current.padding - rightPadding: Style.current.halfPadding + leftPadding: Theme.padding + rightPadding: Theme.halfPadding topPadding: 0 bottomPadding: 0 edit.readOnly: true diff --git a/ui/imports/utils/Constants.qml b/ui/imports/utils/Constants.qml index 54a1646ff9..7925b47c7a 100644 --- a/ui/imports/utils/Constants.qml +++ b/ui/imports/utils/Constants.qml @@ -2,6 +2,7 @@ pragma Singleton import QtQml 2.15 +import StatusQ.Core.Theme 0.1 import StatusQ.Controls.Validators 0.1 QtObject { @@ -972,7 +973,7 @@ QtObject { readonly property string dataImagePrefix: "data:image" readonly property var acceptedDragNDropImageExtensions: [".png", ".jpg", ".jpeg"] - readonly property string mentionSpanTag: `` + readonly property string mentionSpanTag: `` readonly property string ens_taken: "taken" readonly property string ens_taken_custom: "taken-custom" @@ -1257,10 +1258,10 @@ QtObject { function tokenIcon(symbol, useDefault=true) { if (!!symbol && knownTokenPNGs.indexOf(symbol) !== -1) - return Style.png("tokens/" + symbol) + return Theme.png("tokens/" + symbol) if (useDefault) - return Style.png("tokens/DEFAULT-TOKEN") + return Theme.png("tokens/DEFAULT-TOKEN") return "" } @@ -1270,13 +1271,13 @@ QtObject { function getSupportedTokenSourceImage(name, useDefault=true) { if (name === supportedTokenSources.uniswap) - return Style.png("tokens/UNI") + return Theme.png("tokens/UNI") if (name === supportedTokenSources.status) - return Style.png("tokens/SNT") + return Theme.png("tokens/SNT") if (useDefault) - return Style.png("tokens/DEFAULT-TOKEN") + return Theme.png("tokens/DEFAULT-TOKEN") return "" } diff --git a/ui/imports/utils/Style.qml b/ui/imports/utils/Style.qml deleted file mode 100644 index 32e0770417..0000000000 --- a/ui/imports/utils/Style.qml +++ /dev/null @@ -1,58 +0,0 @@ -pragma Singleton - -import QtQuick 2.13 -import QtQuick.Controls.Universal 2.12 -import "../Themes" as Legacy - -import StatusQ.Core.Theme 0.1 - -QtObject { - property Legacy.Theme current: lightTheme - property Legacy.Theme lightTheme: Legacy.LightTheme {} - property Legacy.Theme darkTheme: Legacy.DarkTheme {} - - - property ThemePalette statusQLightTheme: StatusLightTheme {} - property ThemePalette statusQDarkTheme: StatusDarkTheme {} - - property var changeTheme: function (theme, isCurrentSystemThemeDark) { - - switch (theme) { - case Universal.Light: - current = lightTheme; - Theme.palette = statusQLightTheme - break; - case Universal.Dark: - current = darkTheme; - Theme.palette = statusQDarkTheme - break; - case Universal.System: - current = isCurrentSystemThemeDark? darkTheme : lightTheme; - Theme.palette = isCurrentSystemThemeDark? statusQDarkTheme : statusQLightTheme - break; - default: - console.log('Unknown theme. Valid themes are "light" and "dark"') - } - } - - property var changeFontSize: function (fontSize) { - current.updateFontSize(fontSize) - } - - property string assetPath: Qt.resolvedUrl("./../assets/") - function png(name) { - return assetPath + "png/" + name + ".png"; - } - function svg(name) { - return assetPath + "icons/" + name + ".svg"; - } - function emoji(name) { - return "qrc:/StatusQ/src/assets/twemoji/svg/" + name + ".svg"; - } - function lottie(name) { - return assetPath + "lottie/" + name + ".json"; - } - function gif(name) { - return assetPath + "gif/" + name + ".gif"; - } -} diff --git a/ui/imports/utils/Utils.qml b/ui/imports/utils/Utils.qml index 60b723039b..5152f976be 100644 --- a/ui/imports/utils/Utils.qml +++ b/ui/imports/utils/Utils.qml @@ -62,25 +62,6 @@ QtObject { (!startsWith0x(value) && value.length === 64)) } - function getCurrentThemeAccountColor(color) { - const upperCaseColor = color.toUpperCase() - if (Style.current.accountColors.indexOf(upperCaseColor) > -1) { - return upperCaseColor - } - - let colorIndex - if (Style.current.name === Constants.lightThemeName) { - colorIndex = Style.darkTheme.accountColors.indexOf(upperCaseColor) - } else { - colorIndex = Style.lightTheme.accountColors.indexOf(upperCaseColor) - } - if (colorIndex === -1) { - // Unknown color - return false - } - return Style.current.accountColors[colorIndex] - } - function validLink(link) { if (link.length === 0) { return false @@ -499,34 +480,33 @@ QtObject { } function getHoveredColor(colorId) { - let isLightTheme = Theme.palette.name === Constants.lightThemeName switch(colorId.toString().toUpperCase()) { case Constants.walletAccountColors.primary.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.blue: Style.statusQLightTheme.customisationColors.blue + return Theme.palette.customisationColors.blue case Constants.walletAccountColors.purple.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.purple: Style.statusQLightTheme.customisationColors.purple + return Theme.palette.customisationColors.purple case Constants.walletAccountColors.orange.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.orange: Style.statusQLightTheme.customisationColors.orange + return Theme.palette.customisationColors.orange case Constants.walletAccountColors.army.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.army: Style.statusQLightTheme.customisationColors.army + return Theme.palette.customisationColors.army case Constants.walletAccountColors.turquoise.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.turquoise: Style.statusQLightTheme.customisationColors.turquoise + return Theme.palette.customisationColors.turquoise case Constants.walletAccountColors.sky.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.sky: Style.statusQLightTheme.customisationColors.sky + return Theme.palette.customisationColors.sky case Constants.walletAccountColors.yellow.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.yellow: Style.statusQLightTheme.customisationColors.yellow + return Theme.palette.customisationColors.yellow case Constants.walletAccountColors.pink.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.pink: Style.statusQLightTheme.customisationColors.pink + return Theme.palette.customisationColors.pink case Constants.walletAccountColors.copper.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.copper: Style.statusQLightTheme.customisationColors.copper + return Theme.palette.customisationColors.copper case Constants.walletAccountColors.camel.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.camel: Style.statusQLightTheme.customisationColors.camel + return Theme.palette.customisationColors.camel case Constants.walletAccountColors.magenta.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.customisationColors.magenta: Style.statusQLightTheme.customisationColors.magenta + return Theme.palette.customisationColors.magenta case Constants.walletAccountColors.yinYang.toUpperCase(): - return isLightTheme ? Theme.palette.getColor('blackHovered'): Theme.palette.getColor('grey4') + return Theme.palette.name === Constants.lightThemeName ? Theme.palette.getColor('blackHovered'): Theme.palette.getColor('grey4') // FIXME introduce symbolic color names case Constants.walletAccountColors.undefinedAccount.toUpperCase(): - return isLightTheme ? Style.statusQDarkTheme.baseColor1: Style.statusQLightTheme.baseColor1 + return Theme.palette.baseColor1 default: return getColorForId(colorId) } diff --git a/ui/imports/utils/qmldir b/ui/imports/utils/qmldir index 796fd94ac4..9cec2d09e2 100644 --- a/ui/imports/utils/qmldir +++ b/ui/imports/utils/qmldir @@ -3,5 +3,4 @@ Tracer 1.0 Tracer.qml singleton Constants 1.0 Constants.qml singleton Global 1.0 Global.qml singleton ProfileUtils 1.0 ProfileUtils.qml -singleton Style 1.0 Style.qml singleton Utils 1.0 Utils.qml diff --git a/ui/main.qml b/ui/main.qml index 391901489d..99515358ac 100644 --- a/ui/main.qml +++ b/ui/main.qml @@ -31,7 +31,7 @@ StatusWindow { objectName: "mainWindow" minimumWidth: 1200 minimumHeight: 680 - color: Style.current.background + color: Theme.palette.background title: { // Set application settings Qt.application.name = "Status Desktop" @@ -206,9 +206,8 @@ StatusWindow { startupOnboarding.unload() startupOnboarding.visible = false - Style.changeTheme(localAppSettings.theme, systemPalette.isCurrentSystemThemeDark()) - Style.changeFontSize(localAccountSensitiveSettings.fontSize) - Theme.updateFontSize(localAccountSensitiveSettings.fontSize) + Theme.changeTheme(localAppSettings.theme, systemPalette.isCurrentSystemThemeDark()) + Theme.changeFontSize(localAccountSensitiveSettings.fontSize) d.runMockedKeycardControllerWindow() } else if(state === Constants.appState.appEncryptionProcess) { @@ -277,12 +276,12 @@ StatusWindow { } function changeThemeFromOutside() { - Style.changeTheme(startupOnboarding.visible ? Universal.System : localAppSettings.theme, + Theme.changeTheme(startupOnboarding.visible ? Universal.System : localAppSettings.theme, systemPalette.isCurrentSystemThemeDark()) } Component.onCompleted: { - Style.changeTheme(Universal.System, systemPalette.isCurrentSystemThemeDark()); + Theme.changeTheme(Universal.System, systemPalette.isCurrentSystemThemeDark()); restoreAppState();