From 007ed915cc7c1a0ae88aaafd87f023c24b1f4a23 Mon Sep 17 00:00:00 2001 From: Alex Jbanca Date: Tue, 6 Dec 2022 09:55:50 +0200 Subject: [PATCH] Adding StatusChatInput to storybook --- storybook/PagesModel.qml | 4 + storybook/pages/MembersSelectorPage.qml | 25 +--- storybook/pages/StatusChatInputPage.qml | 111 ++++++++++++++++++ storybook/pages/UserListPanelPage.qml | 61 +--------- ...orModelEditor.qml => UsersModelEditor.qml} | 19 +++ storybook/src/Models/UsersModel.qml | 63 ++++++++++ storybook/src/Models/qmldir | 1 + storybook/stubs/shared/stores/RootStore.qml | 5 + 8 files changed, 210 insertions(+), 79 deletions(-) create mode 100644 storybook/pages/StatusChatInputPage.qml rename storybook/pages/{MembersSelectorModelEditor.qml => UsersModelEditor.qml} (84%) create mode 100644 storybook/src/Models/UsersModel.qml diff --git a/storybook/PagesModel.qml b/storybook/PagesModel.qml index dc8070d44c..96df38eae5 100644 --- a/storybook/PagesModel.qml +++ b/storybook/PagesModel.qml @@ -57,6 +57,10 @@ ListModel { title: "ContactsListAndSearch" section: "Components" } + ListElement { + title: "StatusChatInput" + section: "Components" + } ListElement { title: "BrowserSettings" section: "Settings" diff --git a/storybook/pages/MembersSelectorPage.qml b/storybook/pages/MembersSelectorPage.qml index 422fb3602b..5bf98b0ab7 100644 --- a/storybook/pages/MembersSelectorPage.qml +++ b/storybook/pages/MembersSelectorPage.qml @@ -71,7 +71,7 @@ SplitView { Component.onCompleted: { for(let i=0; i < 20; i++) { - append(d.createUserDict(i)) + append(usersModelEditor.getNewUser(i)) } } } @@ -152,24 +152,8 @@ SplitView { QtObject { id: d - function createUserDict(seed: int) { - const pubKey = "0x%1".arg(seed) - return { - pubKey: pubKey, - displayName: seed%8 ? "user%1".arg(seed) : "", - localNickname: seed%3 ? "" : "nickname%1".arg(seed), - alias: "three word name(%1)".arg(pubKey), - isVerified: seed%3 ? false : true, - isUntrustworthy: seed%5 ? false : true, - isContact: true, - icon: "", - color: seed%2 ? "white" : "red", - onlineStatus: seed%2, - } - } - function createMemberDict(seed: int) { - var member = createUserDict(seed) + var member = usersModelEditor.getNewUser(seed) member["isAdmin"] = seed === 0 return member } @@ -254,13 +238,14 @@ SplitView { SplitView.minimumWidth: 300 SplitView.preferredWidth: 300 - MembersSelectorModelEditor { + UsersModelEditor { + id: usersModelEditor anchors.fill: parent model: contactsModel onRemoveClicked: contactsModel.remove(index, 1) onRemoveAllClicked: contactsModel.clear() - onAddClicked: contactsModel.append(d.createUserDict(contactsModel.count)) + onAddClicked: contactsModel.append(usersModelEditor.getNewUser(contactsModel.count)) } } } diff --git a/storybook/pages/StatusChatInputPage.qml b/storybook/pages/StatusChatInputPage.qml new file mode 100644 index 0000000000..6c52af1c7c --- /dev/null +++ b/storybook/pages/StatusChatInputPage.qml @@ -0,0 +1,111 @@ +import QtQuick 2.14 +import QtQuick.Controls 2.14 +import QtQuick.Layouts 1.14 + +import Storybook 1.0 +import Models 1.0 + +import utils 1.0 +import shared.status 1.0 +import shared.stores 1.0 + +SplitView { + id: root + + QtObject { + id: globalUtilsMock + + property bool ready: false + property var globalUtils: QtObject { + function plainText(htmlText) { + return htmlText.replace(/(?:[^]+?<\/style>|[\n]|[^]+?<\/script>|<(?:!|\/?[a-zA-Z]+).*?\/?>)/g,'') + } + function isCompressedPubKey(publicKey) { + return false + } + } + Component.onCompleted: { + Utils.globalUtilsInst = globalUtilsMock.globalUtils + Global.dragArea = null + globalUtilsMock.ready = true + } + } + + QtObject { + id: rootStoreMock + + property bool ready: false + + readonly property ListModel gifColumnA: ListModel {} + + readonly property var formationChars: (["*", "`", "~"]) + + function getSelectedTextWithFormationChars(messageInputField) { + let i = 1 + let text = "" + while (true) { + if (messageInputField.selectionStart - i < 0 && messageInputField.selectionEnd + i > messageInputField.length) { + break + } + + text = messageInputField.getText(messageInputField.selectionStart - i, messageInputField.selectionEnd + i) + + if (!formationChars.includes(text.charAt(0)) || + !formationChars.includes(text.charAt(text.length - 1))) { + break + } + i++ + } + return text + } + + Component.onCompleted: { + RootStore.isGifWidgetEnabled = true + RootStore.isWalletEnabled = true + RootStore.isTenorWarningAccepted = true + RootStore.getSelectedTextWithFormationChars = rootStoreMock.getSelectedTextWithFormationChars + RootStore.gifColumnA = rootStoreMock.gifColumnA + rootStoreMock.ready = true + } + } + + UsersModel { + id: fakeUsersModel + } + + SplitView { + orientation: Qt.Vertical + SplitView.fillWidth: true + //dummy item to position chatInput at the bottom + Item { + SplitView.fillHeight: true + SplitView.fillWidth: true + } + + Loader { + active: rootStoreMock.ready && globalUtilsMock.ready + sourceComponent: StatusChatInput { + id: chatInput + property var globalUtils: globalUtilsMock.globalUtils + usersStore: QtObject { + readonly property var usersModel: fakeUsersModel + } + } + } + } + + Pane { + SplitView.minimumWidth: 300 + SplitView.preferredWidth: 300 + + UsersModelEditor { + id: modelEditor + anchors.fill: parent + model: fakeUsersModel + + onRemoveClicked: fakeUsersModel.remove(index, 1) + onRemoveAllClicked: fakeUsersModel.clear() + onAddClicked: fakeUsersModel.append(modelEditor.getNewUser(fakeUsersModel.count)) + } + } +} diff --git a/storybook/pages/UserListPanelPage.qml b/storybook/pages/UserListPanelPage.qml index 6381589833..d19a369978 100644 --- a/storybook/pages/UserListPanelPage.qml +++ b/storybook/pages/UserListPanelPage.qml @@ -5,6 +5,7 @@ import AppLayouts.Chat.panels 1.0 import utils 1.0 import Storybook 1.0 +import Models 1.0 SplitView { id: root @@ -16,66 +17,8 @@ SplitView { property bool globalUtilsReady: false property bool mainModuleReady: false - ListModel { + UsersModel { id: model - - ListElement { - pubKey: "0x043a7ed0e8d1012cf04" - onlineStatus: 1 - isContact: true - isVerified: true - isAdmin: false - isUntrustworthy: false - displayName: "Mike" - alias: "" - localNickname: "" - ensName: "" - icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ - nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" - colorId: 7 - } - ListElement { - pubKey: "0x04df12f12f12f12f1234" - onlineStatus: 0 - isContact: true - isVerified: true - isAdmin: false - isUntrustworthy: false - displayName: "Jane" - alias: "" - localNickname: "" - ensName: "" - icon: "" - colorId: 7 - } - ListElement { - pubKey: "0x04d1b7cc0ef3f470f1238" - onlineStatus: 0 - isContact: true - isVerified: false - isAdmin: false - isUntrustworthy: true - displayName: "John" - alias: "" - localNickname: "Johny Johny" - ensName: "" - icon: "" - colorId: 7 - } - ListElement { - pubKey: "0x04d1bed192343f470f1255" - onlineStatus: 1 - isContact: true - isVerified: true - isAdmin: false - isUntrustworthy: true - displayName: "" - alias: "meth" - localNickname: "" - ensName: "maria.eth" - icon: "" - colorId: 7 - } } // globalUtilsInst mock diff --git a/storybook/pages/MembersSelectorModelEditor.qml b/storybook/pages/UsersModelEditor.qml similarity index 84% rename from storybook/pages/MembersSelectorModelEditor.qml rename to storybook/pages/UsersModelEditor.qml index 62dea1bdb3..7d4da33634 100644 --- a/storybook/pages/MembersSelectorModelEditor.qml +++ b/storybook/pages/UsersModelEditor.qml @@ -14,6 +14,25 @@ Item { signal removeAllClicked signal addClicked + function getNewUser(seed: int) { + const pubKey = "0x%1".arg(seed) + return { + pubKey: pubKey, + displayName: seed%8 ? "user%1".arg(seed) : "", + localNickname: seed%3 ? "" : "nickname%1".arg(seed), + alias: "three word name(%1)".arg(pubKey), + isVerified: seed%3 ? false : true, + isUntrustworthy: seed%5 ? false : true, + isContact: true, + icon: "", + color: seed%2 ? "white" : "red", + onlineStatus: seed%2, + isAdmin: seed%2 ? true : false, + ensName: "", + colorId: 7 + } + } + ColumnLayout { id: layout diff --git a/storybook/src/Models/UsersModel.qml b/storybook/src/Models/UsersModel.qml new file mode 100644 index 0000000000..a952c26ca4 --- /dev/null +++ b/storybook/src/Models/UsersModel.qml @@ -0,0 +1,63 @@ +import QtQuick 2.14 + +ListModel { + id: root + + ListElement { + pubKey: "0x043a7ed0e8d1012cf04" + onlineStatus: 1 + isContact: true + isVerified: true + isAdmin: false + isUntrustworthy: false + displayName: "Mike" + alias: "" + localNickname: "" + ensName: "" + icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/ + nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC" + colorId: 7 + } + ListElement { + pubKey: "0x04df12f12f12f12f1234" + onlineStatus: 0 + isContact: true + isVerified: true + isAdmin: false + isUntrustworthy: false + displayName: "Jane" + alias: "" + localNickname: "" + ensName: "" + icon: "" + colorId: 7 + } + ListElement { + pubKey: "0x04d1b7cc0ef3f470f1238" + onlineStatus: 0 + isContact: true + isVerified: false + isAdmin: false + isUntrustworthy: true + displayName: "John" + alias: "" + localNickname: "Johny Johny" + ensName: "" + icon: "" + colorId: 7 + } + ListElement { + pubKey: "0x04d1bed192343f470f1255" + onlineStatus: 1 + isContact: true + isVerified: true + isAdmin: false + isUntrustworthy: true + displayName: "" + alias: "meth" + localNickname: "" + ensName: "maria.eth" + icon: "" + colorId: 7 + } +} diff --git a/storybook/src/Models/qmldir b/storybook/src/Models/qmldir index 5bc7cdfe2f..c866e7812c 100644 --- a/storybook/src/Models/qmldir +++ b/storybook/src/Models/qmldir @@ -1,3 +1,4 @@ singleton ModelsData 1.0 ModelsData.qml IconModel 1.0 IconModel.qml BannerModel 1.0 BannerModel.qml +UsersModel 1.0 UsersModel.qml diff --git a/storybook/stubs/shared/stores/RootStore.qml b/storybook/stubs/shared/stores/RootStore.qml index acef85e473..8e42dcf54c 100644 --- a/storybook/stubs/shared/stores/RootStore.qml +++ b/storybook/stubs/shared/stores/RootStore.qml @@ -4,4 +4,9 @@ import QtQuick 2.14 QtObject { property var userProfileInst + property bool isWalletEnabled + property bool isTenorWarningAccepted + property var getSelectedTextWithFormationChars + property var isGifWidgetEnabled + property var gifColumnA }