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

chore(Storybook): LogsView added 

Closes: #7818
This commit is contained in:
Michał Cieślak 2022-10-11 11:26:24 +02:00 committed by Michał
parent 347c9b2fc3
commit cb7e67ce8c
11 changed files with 199 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/CMakeLists.txt
View File

@ -15,7 +15,7 @@ find_package(
COMPONENTS Core Quick QuickControls2
REQUIRED)
file(GLOB_RECURSE QML_FILES "stubs/*.qml" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
file(GLOB_RECURSE QML_FILES "stubs/*.qml" "Storybook/*.qml" "../ui/StatusQ/*.qml" "../ui/app/*.qml")
file(GLOB_RECURSE JS_FILES "../ui/StatusQ/*.js" "../ui/app/*.js")
file(GLOB_RECURSE HEADERS *.h)
if(APPLE)
@ -39,6 +39,8 @@ target_link_libraries(
${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
SortFilterProxyModel)
set(QML_IMPORT_PATH ${CMAKE_SOURCE_DIR} CACHE STRING "" FORCE)
if (APPLE)
find_library(AppKit AppKit)
find_library(Foundation Foundation)

0
storybook/pages/ImageSelectPopup.qml → storybook/Storybook/ImageSelectPopup.qml
View File

35
storybook/Storybook/Logs.qml Normal file
View File

@ -0,0 +1,35 @@
import QtQuick 2.14
QtObject {
readonly property alias logText: d.logText
function logEvent(name, argumentNames, args) {
d.logText += d.createLog(name, argumentNames, args) + "\n"
}
readonly property QtObject _d: QtObject {
id: d
property string logText: ""
function createLog(name, argumentNames, args) {
let log = (new Date()).toLocaleTimeString(Qt.locale(), "h:mm:ss") + ": " + name
if (args.length === 0)
return log
log += ": ["
for (let i = 0; i < args.length; i++) {
log += argumentNames[i] + ": " + JSON.stringify(args[i])
if (i !== args.length - 1)
log += ", "
}
log += "]"
return log
}
}
}

43
storybook/Storybook/LogsAndControlsPanel.qml Normal file
View File

@ -0,0 +1,43 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
ColumnLayout {
readonly property alias logsView: logsView
default property alias controls: controlsPane.contentData
spacing: 0
TabBar {
id: tabs
Layout.fillWidth: true
contentHeight: 30
TabButton {
text: "Events"
width: implicitWidth
}
TabButton {
text: "Controls"
width: implicitWidth
}
}
StackLayout {
currentIndex: tabs.currentIndex
Layout.fillWidth: true
Layout.fillHeight: true
LogsView {
id: logsView
clip: true
}
Pane {
id: controlsPane
}
}
}

25
storybook/Storybook/LogsView.qml Normal file
View File

@ -0,0 +1,25 @@
import QtQuick 2.14
import StatusQ.Core.Theme 0.1
Flickable {
id: root
contentWidth: logTextEdit.implicitWidth
contentHeight: logTextEdit.implicitHeight
property alias logText: logTextEdit.text
onLogTextChanged: {
if(logTextEdit.implicitHeight > root.height)
root.contentY = logTextEdit.implicitHeight - root.height
}
TextEdit {
id: logTextEdit
font.family: Theme.palette.monoFont.name
font.letterSpacing: 1.2
readOnly: true
selectByMouse: true
}
}

21
storybook/Storybook/StorybookUtils.qml Normal file
View File

@ -0,0 +1,21 @@
pragma Singleton
import QtQml 2.14
QtObject {
function singleShotConnection(prop, handler) {
const internalHandler = (...args) => {
handler(...args)
prop.disconnect(internalHandler)
}
prop.connect(internalHandler)
}
function getUniqueValuesFromModel(model, prop) {
const values = []
for (let i = 0; i < model.count; i++)
values.push(model.get(i)[prop])
const onlyUnique = (value, index, self) => self.indexOf(value) === index
return values.filter(onlyUnique)
}
}

5
storybook/Storybook/qmldir Normal file
View File

@ -0,0 +1,5 @@
ImageSelectPopup 1.0 ImageSelectPopup.qml
Logs 1.0 Logs.qml
LogsAndControlsPanel 1.0 LogsAndControlsPanel.qml
LogsView 1.0 LogsView.qml
singleton StorybookUtils 1.0 StorybookUtils.qml

1
storybook/main.qml
View File

@ -19,7 +19,6 @@ ApplicationWindow {
id: mainPageView
anchors.fill: parent
showHeader: false
function page(name, fillPage) {

41
storybook/pages/CommunitiesPortalLayoutPage.qml
View File

@ -1,5 +1,4 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
@ -10,11 +9,20 @@ import AppLayouts.CommunitiesPortal.stores 1.0
import SortFilterProxyModel 0.2
import Storybook 1.0
import utils 1.0
SplitView {
anchors.fill: parent
Logs { id: logs }
SplitView {
orientation: Qt.Vertical
SplitView.fillWidth: true
ColumnLayout {
SplitView.fillWidth: true
SplitView.fillHeight: true
CommunitiesPortalLayout {
Layout.fillWidth: true
@ -34,14 +42,37 @@ SplitView {
minimumIndex: Math.floor(slider.value)
}
}
function setActiveCommunity() {
logs.logEvent("CommunitiesStore::setActiveCommunity", ["communityId"], arguments)
}
}
StatusDialogDivider {
Layout.fillWidth: true
// TODO: onCompleted handler and localAccountSensitiveSettings are here to allow opening
// "Import Community" and "Create New Community" popups. However those popups shouldn't
// be tightly coupled with `CommunitiesPortalLayout` so it should be refactored in the next step.
// Pressing buttons "Import using key" and "Create new community" should only request for opening
// dialogs, and in Storybook it should be logged in the same way as calls to stores.
// Mentioned popups should have their own pages in the Storybook.
Component.onCompleted: {
Global.appMain = this
}
Pane {
QtObject {
id: localAccountSensitiveSettings
readonly property bool isDiscordImportToolEnabled: false
}
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
Row {
Text {
anchors.verticalCenter: parent.verticalCenter

38
storybook/pages/CommunitiesPortalModelEditor.qml
View File

@ -2,20 +2,14 @@ import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import Storybook 1.0
ListView {
id: root
spacing: 25
ScrollBar.vertical: ScrollBar { }
function singleShotConnection(prop, handler) {
const internalHandler = (...args) => {
handler(...args)
prop.disconnect(internalHandler)
}
prop.connect(internalHandler)
}
ImageSelectPopup {
id: iconSelector
@ -29,14 +23,7 @@ ListView {
}
Component.onCompleted: {
const model = root.model
const icons = []
for (let i = 0; i < model.count; i++) {
icons.push(model.get(i).icon)
}
const onlyUnique = (value, index, self) => self.indexOf(value) === index
const uniqueIcons = icons.filter(onlyUnique)
const uniqueIcons = StorybookUtils.getUniqueValuesFromModel(root.model, "icon")
uniqueIcons.map(image => iconsModel.append( { image }))
}
}
@ -54,14 +41,7 @@ ListView {
}
Component.onCompleted: {
const model = root.model
const banners = []
for (let i = 0; i < model.count; i++) {
banners.push(model.get(i).banner)
}
const onlyUnique = (value, index, self) => self.indexOf(value) === index
const uniqueBanners = banners.filter(onlyUnique)
const uniqueBanners = StorybookUtils.getUniqueValuesFromModel(root.model, "banner")
uniqueBanners.map(image => bannersModel.append( { image }))
}
}
@ -99,17 +79,17 @@ ListView {
CheckBox {
text: "featured"
checked: model.featured
onCheckedChanged: model.featured = checked
onToggled: model.featured = checked
}
CheckBox {
text: "available"
checked: model.available
onCheckedChanged: model.available = checked
onToggled: model.available = checked
}
CheckBox {
text: "loaded"
checked: model.loaded
onCheckedChanged: model.loaded = checked
onToggled: model.loaded = checked
}
}
@ -133,7 +113,7 @@ ListView {
anchors.fill: parent
onClicked: {
iconSelector.open()
singleShotConnection(iconSelector.selected, icon => {
StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
model.icon = icon
iconSelector.close()
})
@ -157,7 +137,7 @@ ListView {
anchors.fill: parent
onClicked: {
bannerSelector.open()
singleShotConnection(bannerSelector.selected, banner => {
StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
model.banner = banner
bannerSelector.close()
})

7
storybook/qml.qrc
View File

@ -4,6 +4,11 @@
<file>pages/CommunitiesPortalLayoutPage.qml</file>
<file>pages/CommunitiesPortalDummyModel.qml</file>
<file>pages/CommunitiesPortalModelEditor.qml</file>
<file>pages/ImageSelectPopup.qml</file>
<file>Storybook/LogsView.qml</file>
<file>Storybook/qmldir</file>
<file>Storybook/LogsAndControlsPanel.qml</file>
<file>Storybook/ImageSelectPopup.qml</file>
<file>Storybook/StorybookUtils.qml</file>
<file>Storybook/Logs.qml</file>
</qresource>
</RCC>