status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding StatusChatInput to storybook

This commit is contained in:
Alex Jbanca 2022-12-06 09:55:50 +02:00 committed by Alex Jbanca
parent 0526dca298
commit 007ed915cc
8 changed files with 210 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/PagesModel.qml
View File

@ -57,6 +57,10 @@ ListModel {
title: "ContactsListAndSearch"
section: "Components"
}
ListElement {
title: "StatusChatInput"
section: "Components"
}
ListElement {
title: "BrowserSettings"
section: "Settings"

25
storybook/pages/MembersSelectorPage.qml
View File

@ -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))
}
}
}

111
storybook/pages/StatusChatInputPage.qml Normal file
View File

@ -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[^]+?>[^]+?<\/style>|[\n]|<script[^]+?>[^]+?<\/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))
}
}
}

61
storybook/pages/UserListPanelPage.qml
View File

@ -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

19
storybook/pages/MembersSelectorModelEditor.qml → storybook/pages/UsersModelEditor.qml
View File

@ -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

63
storybook/src/Models/UsersModel.qml Normal file
View File

@ -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
}
}

1
storybook/src/Models/qmldir
View File

@ -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

5
storybook/stubs/shared/stores/RootStore.qml
View File

@ -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
}