feat(storybook): add browser settings in the storybook

2022-10-25 09:57:04 -04:00 · 2022-10-25 09:57:04 -04:00 · cea4945cba
parent 2e05a9784e
commit cea4945cba
17 changed files with 238 additions and 45 deletions
--- a/storybook/CMakeLists.txt
+++ b/storybook/CMakeLists.txt
@ -17,7 +17,7 @@ endif()

 find_package(
  Qt5
-  COMPONENTS Core Quick QuickControls2
+  COMPONENTS Core Quick QuickControls2 WebEngine
  REQUIRED)

 file(GLOB_RECURSE QML_FILES "stubs/*.qml" "mocks/*.qml" "pages/*.qml" "src/*.qml" "src/qmldir" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
@ -35,7 +35,7 @@ add_executable(
 target_compile_definitions(${PROJECT_NAME}
                           PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
 target_link_libraries(
-  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
+  ${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2 Qt5::WebEngine
                          SortFilterProxyModel)

 set(QML_IMPORT_PATH "${CMAKE_SOURCE_DIR}/src" CACHE STRING "" FORCE)
--- a/storybook/main.cpp
+++ b/storybook/main.cpp
@ -1,5 +1,6 @@
 #include <QGuiApplication>
 #include <QQmlApplicationEngine>
+#include <QtWebEngine>

 #include <cachecleaner.h>
 #include <directorieswatcher.h>
@ -9,6 +10,9 @@ int main(int argc, char *argv[])
 #if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
 #endif
+    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
+    QCoreApplication::setAttribute(Qt::AA_ShareOpenGLContexts);
+    QtWebEngine::initialize();
    QGuiApplication app(argc, argv);
    QGuiApplication::setOrganizationName(QStringLiteral("Status"));
    QGuiApplication::setOrganizationDomain(QStringLiteral("status.im"));
--- a/storybook/main.qml
+++ b/storybook/main.qml
@ -56,6 +56,9 @@ ApplicationWindow {
        ListElement {
            title: "InviteFriendsToCommunityPopup"
        }
+        ListElement {
+             title: "BrowserSettings"
+        }
    }

    SplitView {
--- a/storybook/pages/BrowserSettingsPage.qml
+++ b/storybook/pages/BrowserSettingsPage.qml
@ -0,0 +1,154 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+
+import AppLayouts.Profile.views 1.0
+import AppLayouts.Profile.stores 1.0
+
+import Storybook 1.0
+
+import utils 1.0
+
+SplitView {
+    Logs { id: logs }
+
+    ListModel {
+        id: dappsModel
+
+        ListElement {
+            name: "http://simpledapp.eth"
+            accounts: [
+                ListElement {
+                    name: "Main Account"
+                    address: "0x2B748A02e06B159C7C3E98F5064577B96E55A7b4"
+                    color: "#4360DF"
+                    emoji: "😎"
+                },
+                ListElement {
+                    name: "Account 2"
+                    address: "0x5aD88F52b5cb0E4120c0Dd32CFeE782436F492E5"
+                    color: "#887AF9"
+                    emoji: "😋"
+                }
+            ]
+        }
+    }
+
+    property QtObject mockData: QtObject {
+        property QtObject accountSettings: QtObject {
+            property string browserHomepage: "https://status.im/"
+            property int shouldShowBrowserSearchEngine: 3
+            property bool shouldShowFavoritesBar: true
+            property int useBrowserEthereumExplorer: 1
+        }
+    }
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        BrowserView {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            contentWidth: parent.width
+            sectionTitle: "Browser section"
+            
+            accountSettings: mockData.accountSettings
+
+            store: ProfileSectionStore {
+                property WalletStore walletStore: WalletStore {
+                    accountSensitiveSettings: mockData.accountSettings
+                    dappList: dappsModel
+
+                    function disconnect(dappName) {
+                        for (let i = 0; i < dappsModel.count; i++) {
+                            if (dappsModel.get(i).name === dappName) {
+                                dappsModel.remove(i)
+                                return
+                            }
+                        }
+                    }
+                    function disconnectAddress(dappName, address) {
+                        for (let i = 0; i < dappsModel.count; i++) {
+                            const dapp = dappsModel.get(i)
+                            if (dapp.name === dappName) {
+                                for (let i = 0; i < dapp.accounts.count; i++) {
+                                    if (dapp.accounts.get(i).address === address) {
+                                        dapp.accounts.remove(i)
+                                        return
+                                    }
+                                }
+                                return
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
+        }
+    }
+
+    Pane {
+        SplitView.minimumWidth: 300
+        SplitView.preferredWidth: 300
+
+        font.pixelSize: 13
+
+        ColumnLayout {
+            spacing: 6
+            
+            Label {
+                text: "Browser Homepage"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.browserHomepage
+                onTextChanged: mockData.accountSettings.browserHomepage = text
+            }
+
+            Label {
+                text: "Browser Search Engine ID"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.shouldShowBrowserSearchEngine
+                onTextChanged: {
+                    if (text !== "") {
+                        mockData.accountSettings.shouldShowBrowserSearchEngine = parseInt(text)
+                    }
+                }
+            }
+
+            Label {
+                text: "Browser Ethereum Explorer ID"
+            }
+
+            TextField {
+                Layout.fillWidth: true
+                text: mockData.accountSettings.useBrowserEthereumExplorer
+                onTextChanged: {
+                    if (text !== "") {
+                        mockData.accountSettings.useBrowserEthereumExplorer = parseInt(text)
+                    }
+                }
+            }
+
+            CheckBox {
+                text: "Should show Favorites bar"
+                checked: mockData.accountSettings.shouldShowFavoritesBar
+                onToggled: mockData.accountSettings.shouldShowFavoritesBar = !mockData.accountSettings.shouldShowFavoritesBar
+            }
+        }
+    }
+}
+
+
--- a/storybook/stubs/AppLayouts/Profile/stores/LanguageStore.qml
+++ b/storybook/stubs/AppLayouts/Profile/stores/LanguageStore.qml
@ -0,0 +1,3 @@
+import QtQuick 2.14
+
+QtObject {}
--- a/storybook/stubs/AppLayouts/Profile/stores/ProfileSectionStore.qml
+++ b/storybook/stubs/AppLayouts/Profile/stores/ProfileSectionStore.qml
@ -0,0 +1,3 @@
+import QtQuick 2.14
+
+QtObject {}
--- a/storybook/stubs/AppLayouts/Profile/stores/WalletStore.qml
+++ b/storybook/stubs/AppLayouts/Profile/stores/WalletStore.qml
@ -0,0 +1,6 @@
+import QtQuick 2.14
+
+QtObject {
+    property var accountSensitiveSettings: {}
+    property var dappList: []
+}
--- a/storybook/stubs/AppLayouts/Profile/stores/qmldir
+++ b/storybook/stubs/AppLayouts/Profile/stores/qmldir
@ -0,0 +1,3 @@
+LanguageStore 1.0 LanguageStore.qml
+ProfileSectionStore 1.0 ProfileSectionStore.qml
+WalletStore 1.0 WalletStore.qml
--- a/ui/app/AppLayouts/Profile/ProfileLayout.qml
+++ b/ui/app/AppLayouts/Profile/ProfileLayout.qml
@ -196,6 +196,7 @@ StatusSectionLayout {
                implicitHeight: parent.height

                store: root.store
+                accountSettings: localAccountSensitiveSettings
                sectionTitle: root.store.getNameForSubsection(Constants.settingsSubsection.browserSettings)
                contentWidth: d.contentWidth
            }
--- a/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/SearchEngineModal.qml
@ -9,6 +9,8 @@ import shared.controls 1.0
 ModalPopup {
    id: popup

+    property var accountSettings
+
    title: qsTr("Search engine")

    onClosed: {
@ -30,10 +32,10 @@ ModalPopup {
        RadioButtonSelector {
            title: qsTr("None")
            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineNone
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineNone
            onCheckedChanged: {
                if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineNone
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineNone
                }
            }
        }
@ -41,10 +43,10 @@ ModalPopup {
        RadioButtonSelector {
            title: "Google"
            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineGoogle
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineGoogle
            onCheckedChanged: {
                if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineGoogle
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineGoogle
                }
            }
        }
@ -52,10 +54,10 @@ ModalPopup {
        RadioButtonSelector {
            title: "Yahoo!"
            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineYahoo
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineYahoo
            onCheckedChanged: {
                if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineYahoo
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineYahoo
                }
            }
        }
@ -63,10 +65,10 @@ ModalPopup {
        RadioButtonSelector {
            title: "DuckDuckGo"
            buttonGroup: searchEnginGroup
-            checked: localAccountSensitiveSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineDuckDuckGo
+            checked: accountSettings.shouldShowBrowserSearchEngine === Constants.browserSearchEngineDuckDuckGo
            onCheckedChanged: {
                if (checked) {
-                    localAccountSensitiveSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineDuckDuckGo
+                    accountSettings.shouldShowBrowserSearchEngine = Constants.browserSearchEngineDuckDuckGo
                }
            }
        }
--- a/ui/app/AppLayouts/Profile/stores/qmldir
+++ b/ui/app/AppLayouts/Profile/stores/qmldir
@ -1 +1,7 @@
 LanguageStore 1.0 LanguageStore.qml
+AppearanceStore 1.0 AppearanceStore.qml
+ProfileStore 1.0 ProfileStore.qml
+NotificationsStore 1.0 NotificationsStore.qml
+DevicesStore 1.0 DevicesStore.qml
+ProfileSectionStore 1.0 ProfileSectionStore.qml
+WalletStore 1.0 WalletStore.qml
--- a/ui/app/AppLayouts/Profile/views/BrowserView.qml
+++ b/ui/app/AppLayouts/Profile/views/BrowserView.qml
@ -12,8 +12,9 @@ import shared 1.0
 import shared.panels 1.0
 import shared.status 1.0

+import AppLayouts.Profile.stores 1.0
+
 import "../popups"
-import "../stores"
 import "browser"
 import "wallet"

@ -21,8 +22,11 @@ SettingsContentBase {
    id: root

    property ProfileSectionStore store
+    property var accountSettings

-    property Component searchEngineModal: SearchEngineModal {}
+    property Component searchEngineModal: SearchEngineModal {
+        accountSettings: root.accountSettings
+    }

    Item {
        id: rootItem
@ -38,7 +42,7 @@ SettingsContentBase {

            HomePageView {
                id: homePageView
-                homepage: localAccountSensitiveSettings.browserHomepage
+                accountSettings: root.accountSettings
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: Style.current.padding
@ -51,7 +55,7 @@ SettingsContentBase {
                anchors.rightMargin: 0
                text: qsTr("Search engine used in the address bar")
                currentValue: {
-                    switch (localAccountSensitiveSettings.shouldShowBrowserSearchEngine) {
+                    switch (accountSettings.shouldShowBrowserSearchEngine) {
                    case Constants.browserSearchEngineGoogle: return "Google"
                    case Constants.browserSearchEngineYahoo: return "Yahoo!"
                    case Constants.browserSearchEngineDuckDuckGo: return "DuckDuckGo"
@ -64,6 +68,7 @@ SettingsContentBase {

            DefaultDAppExplorerView {
                id: dAppExplorerView
+                accountSettings: root.accountSettings
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: Style.current.padding
@ -76,12 +81,8 @@ SettingsContentBase {
                title: qsTr("Show Favorites Bar")
                components: [
                    StatusSwitch {
-                        checked: localAccountSensitiveSettings.shouldShowFavoritesBar
-                        onCheckedChanged: {
-                            if (localAccountSensitiveSettings.shouldShowFavoritesBar !== checked) {
-                                localAccountSensitiveSettings.shouldShowFavoritesBar = checked
-                            }
-                        }
+                        checked: accountSettings.shouldShowFavoritesBar
+                        onToggled: { accountSettings.shouldShowFavoritesBar = checked }
                    }
                ]
            }
--- a/ui/app/AppLayouts/Profile/views/LanguageView.qml
+++ b/ui/app/AppLayouts/Profile/views/LanguageView.qml
@ -12,8 +12,9 @@ import StatusQ.Core.Utils 0.1 as StatusQUtils
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1

+import AppLayouts.Profile.stores 1.0
+
 import "../popups"
-import "../stores"

 import SortFilterProxyModel 0.2

--- a/ui/app/AppLayouts/Profile/views/browser/DefaultDAppExplorerView.qml
+++ b/ui/app/AppLayouts/Profile/views/browser/DefaultDAppExplorerView.qml
@ -12,6 +12,8 @@ import StatusQ.Core.Theme 0.1
 ColumnLayout {
    id: root

+    property var accountSettings
+
    StatusBaseText {
        text: qsTr("Default DApp explorer")
        font.pixelSize: 15
@ -33,11 +35,11 @@ ColumnLayout {
        id: noneRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
-        text: qsTr("none")
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerNone
+        text: qsTr("None")
        onCheckedChanged: {
            if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerNone
            }
        }
    }
@ -46,11 +48,11 @@ ColumnLayout {
        id: etherscanRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEtherscan
        text: "etherscan.io"
        onCheckedChanged: {
-            if (checked && localAccountSensitiveSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerEtherscan) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
+            if (checked && accountSettings.useBrowserEthereumExplorer !== Constants.browserEthereumExplorerEtherscan) {
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEtherscan
            }
        }
    }
@ -59,11 +61,11 @@ ColumnLayout {
        id: ethplorerRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerEthplorer
        text: "ethplorer.io"
        onCheckedChanged: {
            if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerEthplorer
            }
        }
    }
@ -72,11 +74,11 @@ ColumnLayout {
        id: blockchairRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: localAccountSensitiveSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
+        checked: accountSettings.useBrowserEthereumExplorer === Constants.browserEthereumExplorerBlockchair
        text: "blockchair.com"
        onCheckedChanged: {
            if (checked) {
-                localAccountSensitiveSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
+                accountSettings.useBrowserEthereumExplorer = Constants.browserEthereumExplorerBlockchair
            }
        }
    }
--- a/ui/app/AppLayouts/Profile/views/browser/HomePageView.qml
+++ b/ui/app/AppLayouts/Profile/views/browser/HomePageView.qml
@ -10,12 +10,12 @@ import StatusQ.Core.Theme 0.1
 ColumnLayout {
    id: root

-    property string homepage: ""
+    property var accountSettings

    spacing: 0

    StatusBaseText {
-        text: qsTr("homepage")
+        text: qsTr("Homepage")
        font.pixelSize: 15
        color: Theme.palette.directColor1
    }
@ -30,7 +30,7 @@ ColumnLayout {
        id: defaultRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: root.homepage == ""
+        checked: root.accountSettings.browserHomepage === ""
        text: qsTr("System default")
    }

@ -38,7 +38,7 @@ ColumnLayout {
        id: customRadioButton
        Layout.alignment: Qt.AlignTop
        Layout.topMargin: 10
-        checked: root.homepage !== ""
+        checked: root.accountSettings.browserHomepage !== ""
        text: qsTr("Other")
    }

@ -48,9 +48,9 @@ ColumnLayout {
        Layout.topMargin: 10
        visible: customRadioButton.checked
        placeholderText: qsTr("Example: duckduckgo.com")
-        text: root.homepage
+        text: root.accountSettings.browserHomepage
        onTextChanged: {
-            root.homepage = text
+            root.accountSettings.browserHomepage = text
        }
    }

--- a/ui/app/AppLayouts/Profile/views/qmldir
+++ b/ui/app/AppLayouts/Profile/views/qmldir
@ -1,2 +1,6 @@
 AboutView 1.0 AboutView.qml
 LanguageView 1.0 LanguageView.qml
+AppearanceView 1.0 AppearanceView.qml
+NotificationsView 1.0 NotificationsView.qml
+CommunitiesView 1.0 CommunitiesView.qml
+BrowserView 1.0 BrowserView.qml
--- a/ui/app/AppLayouts/Profile/views/wallet/PermissionsListView.qml
+++ b/ui/app/AppLayouts/Profile/views/wallet/PermissionsListView.qml
@ -7,7 +7,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import utils 1.0

-import "../../stores"
+import AppLayouts.Profile.stores 1.0

 Column {
    id: root
@ -18,18 +18,19 @@ Column {
        id: permissionsList
        model: walletStore.dappList
        delegate: Item {
+            property string dappName: model.name
            width: parent.width
            height: listItem.height + spacer.height
            WebEngineView {
                id: webView
-                url: model.name.startsWith("http")? model.name : "http://%1".arg(model.name)
+                url: dappName.startsWith("http") ? dappName : `http://${dappName}`
                visible: false
            }
            StatusListItem {
                id: listItem
-                title: webView.title !== ""? webView.title : model.name
-                subTitle: model.name
-                asset.name: webView.icon != ""? webView.icon : Style.svg("compassActive")
+                title: webView.title !== "" ? webView.title : dappName
+                subTitle: dappName
+                asset.name: webView.icon != "" ? webView.icon : Style.svg("compassActive")
                asset.isImage: true
                width: parent.width
                highlighted: true
@ -40,13 +41,13 @@ Column {
                        size: StatusBaseButton.Size.Small
                        type: StatusBaseButton.Type.Danger
                        onClicked: {
-                            walletStore.disconnect(model.name)
+                            walletStore.disconnect(dappName)
                        }
                    }
                ]
                bottomModel: model.accounts
                bottomDelegate: StatusListItemTag {
-                    property int outerIndex: listItem.index
+                    property int outerIndex: listItem.index || 0

                    title: model.name

@ -57,7 +58,6 @@ Column {
                    asset.isLetterIdenticon: !!model.emoji
                    asset.bgColor: Theme.palette.indirectColor1
                    onClicked: {
-                        const dappName = walletStore.dappList.rowData(outerIndex, 'name')
                        walletStore.disconnectAddress(dappName, model.address)
                    }
                }