diff --git a/storybook/Storybook/PagesList.qml b/storybook/Storybook/PagesList.qml
new file mode 100644
index 0000000000..090fc5516c
--- /dev/null
+++ b/storybook/Storybook/PagesList.qml
@@ -0,0 +1,20 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+
+ListView {
+ id: root
+
+ spacing: 5
+ clip: true
+
+ property string currentPage
+ signal pageSelected(string page)
+
+ delegate: Button {
+ width: parent.width
+
+ text: model.title
+ checked: root.currentPage === model.title
+ onClicked: root.pageSelected(model.title)
+ }
+}
diff --git a/storybook/Storybook/qmldir b/storybook/Storybook/qmldir
index afef9d78ae..e4f6e61526 100644
--- a/storybook/Storybook/qmldir
+++ b/storybook/Storybook/qmldir
@@ -2,4 +2,5 @@ ImageSelectPopup 1.0 ImageSelectPopup.qml
Logs 1.0 Logs.qml
LogsAndControlsPanel 1.0 LogsAndControlsPanel.qml
LogsView 1.0 LogsView.qml
+PagesList 1.0 PagesList.qml
singleton StorybookUtils 1.0 StorybookUtils.qml
diff --git a/storybook/main.qml b/storybook/main.qml
index 2c900b6b4a..f783ef4c2a 100644
--- a/storybook/main.qml
+++ b/storybook/main.qml
@@ -1,63 +1,82 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Components 0.1
-import StatusQ.Layout 0.1
+import QtQuick.Layouts 1.14
import Qt.labs.settings 1.0
+import StatusQ.Core.Theme 0.1
+import Storybook 1.0
ApplicationWindow {
- id: rootWindow
+ id: root
width: 1450
height: 840
visible: true
- StatusSectionLayout {
- id: mainPageView
+ property string currentPage
- anchors.fill: parent
- showHeader: false
+ font.pixelSize: 13
- function page(name, fillPage) {
- viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
- storeSettings.selected = viewLoader.source
+ ListModel {
+ id: pagesModel
+
+ ListElement {
+ title: "CommunitiesPortalLayout"
}
+ ListElement {
+ title: "LoginView"
+ }
+ }
- leftPanel: StatusScrollView {
- anchors.fill: parent
- anchors.topMargin: 48
+ SplitView {
+ anchors.fill: parent
- Column {
- spacing: 0
+ ColumnLayout {
+ SplitView.preferredWidth: 240
- CheckBox {
- text: "Load asynchronously"
- checked: storeSettings.loadAsynchronously
+ CheckBox {
+ id: loadAsyncCheckBox
- onToggled: storeSettings.loadAsynchronously = checked
+ Layout.fillWidth: true
+
+ text: "Load asynchronously"
+ }
+
+ CheckBox {
+ id: darkModeCheckBox
+
+ Layout.fillWidth: true
+
+ text: "Dark mode"
+
+ StatusLightTheme { id: lightTheme }
+ StatusDarkTheme { id: darkTheme }
+
+ Binding {
+ target: Theme
+ property: "palette"
+ value: darkModeCheckBox.checked ? darkTheme : lightTheme
}
+ }
- Item { width: 1; height: 30 }
+ Pane {
+ Layout.fillWidth: true
+ Layout.fillHeight: true
- StatusNavigationListItem {
- title: "CommunitiesPortalLayout"
- selected: viewLoader.source.toString().includes(title)
- onClicked: mainPageView.page(title);
- }
+ PagesList {
+ anchors.fill: parent
- StatusNavigationListItem {
- title: "LoginView"
- selected: viewLoader.source.toString().includes(title)
- onClicked: mainPageView.page(title);
+ currentPage: root.currentPage
+ model: pagesModel
+
+ onPageSelected: root.currentPage = page
}
}
}
- centerPanel: Item {
- anchors.fill: parent
+ Item {
+ SplitView.fillWidth: true
Loader {
id: viewLoader
@@ -65,15 +84,14 @@ ApplicationWindow {
anchors.fill: parent
clip: true
- source: storeSettings.selected
- asynchronous: storeSettings.loadAsynchronously
+ source: Qt.resolvedUrl(`./pages/${root.currentPage}Page.qml`)
+ asynchronous: loadAsyncCheckBox.checked
visible: status === Loader.Ready
// force reload when `asynchronous` changes
onAsynchronousChanged: {
- const tmp = storeSettings.selected
- storeSettings.selected = ""
- storeSettings.selected = tmp
+ active = false
+ active = true
}
}
@@ -85,9 +103,8 @@ ApplicationWindow {
}
Settings {
- id: storeSettings
-
- property string selected: ""
- property bool loadAsynchronously: false
+ property alias currentPage: root.currentPage
+ property alias loadAsynchronously: loadAsyncCheckBox.checked
+ property alias darkMode: darkModeCheckBox.checked
}
}
diff --git a/storybook/pages/CommunitiesPortalLayoutPage.qml b/storybook/pages/CommunitiesPortalLayoutPage.qml
index b2548171af..d1556ec63c 100644
--- a/storybook/pages/CommunitiesPortalLayoutPage.qml
+++ b/storybook/pages/CommunitiesPortalLayoutPage.qml
@@ -1,8 +1,5 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Popups.Dialog 0.1
import AppLayouts.CommunitiesPortal 1.0
import AppLayouts.CommunitiesPortal.stores 1.0
@@ -69,7 +66,7 @@ SplitView {
logsView.logText: logs.logText
Row {
- Text {
+ Label {
anchors.verticalCenter: parent.verticalCenter
text: "number of communities:"
}
@@ -84,12 +81,10 @@ SplitView {
}
}
- Control {
+ Pane {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
- font.pixelSize: 13
-
CommunitiesPortalModelEditor {
anchors.fill: parent
model: mockedModel
diff --git a/storybook/pages/CommunitiesPortalModelEditor.qml b/storybook/pages/CommunitiesPortalModelEditor.qml
index fb69e6372a..aee9789f44 100644
--- a/storybook/pages/CommunitiesPortalModelEditor.qml
+++ b/storybook/pages/CommunitiesPortalModelEditor.qml
@@ -8,7 +8,7 @@ ListView {
id: root
spacing: 25
- ScrollBar.vertical: ScrollBar { }
+ ScrollBar.vertical: ScrollBar { x: root.width }
ImageSelectPopup {
id: iconSelector
@@ -46,152 +46,141 @@ ListView {
}
}
- delegate: Rectangle {
- width: parent.width
- height: column.implicitHeight
+ delegate: ColumnLayout {
+ width: ListView.view.width
- ColumnLayout {
- id: column
+ Label {
+ Layout.fillWidth: true
+ text: "community id: " + model.communityId
+ font.weight: Font.Bold
+ }
- width: parent.width
- spacing: 2
+ TextField {
+ Layout.fillWidth: true
+ text: model.name
+ onTextChanged: model.name = text
+ }
+ TextField {
+ Layout.fillWidth: true
+ text: model.description
+ onTextChanged: model.description = text
+ }
+
+ Flow {
+ Layout.fillWidth: true
+
+ CheckBox {
+ text: "featured"
+ checked: model.featured
+ onToggled: model.featured = checked
+ }
+ CheckBox {
+ text: "available"
+ checked: model.available
+ onToggled: model.available = checked
+ }
+ CheckBox {
+ text: "loaded"
+ checked: model.loaded
+ onToggled: model.loaded = checked
+ }
+ }
+
+ RowLayout {
+ Layout.fillWidth: true
+ Layout.preferredHeight: 50
+
+ Rectangle {
+ border.color: 'gray'
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ Image {
+ anchors.fill: parent
+ anchors.margins: 1
+ fillMode: Image.PreserveAspectFit
+ source: model.icon
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ iconSelector.open()
+ StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
+ model.icon = icon
+ iconSelector.close()
+ })
+ }
+ }
+ }
+
+ Rectangle {
+ border.color: 'gray'
+ Layout.fillWidth: true
+ Layout.fillHeight: true
+
+ Image {
+ anchors.fill: parent
+ anchors.margins: 1
+ fillMode: Image.PreserveAspectFit
+ source: model.banner
+ }
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: {
+ bannerSelector.open()
+ StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
+ model.banner = banner
+ bannerSelector.close()
+ })
+ }
+ }
+ }
+ }
+
+ TextField {
+ Layout.fillWidth: true
+ maximumLength: 1024 * 1024 * 1024
+ text: model.icon
+ onTextChanged: model.icon = text
+ }
+
+ TextField {
+ Layout.fillWidth: true
+ maximumLength: 1024 * 1024 * 1024
+ text: model.banner
+ onTextChanged: model.banner = text
+ }
+
+ Row {
Label {
- text: "community id: " + model.communityId
- font.weight: Font.Bold
+ anchors.verticalCenter: parent.verticalCenter
+ text: "members:\t"
}
- TextField {
- Layout.fillWidth: true
- text: model.name
- onTextChanged: model.name = text
+ SpinBox {
+ editable: true
+ height: 30
+ from: 0; to: 10 * 1000 * 1000
+ value: model.members
+ onValueChanged: model.members = value
+ }
+ }
+
+ Row {
+ Label {
+ anchors.verticalCenter: parent.verticalCenter
+ text: "popularity:\t"
}
- TextField {
- Layout.fillWidth: true
- text: model.description
- onTextChanged: model.description = text
- }
-
- Flow {
- Layout.fillWidth: true
-
- CheckBox {
- text: "featured"
- checked: model.featured
- onToggled: model.featured = checked
- }
- CheckBox {
- text: "available"
- checked: model.available
- onToggled: model.available = checked
- }
- CheckBox {
- text: "loaded"
- checked: model.loaded
- onToggled: model.loaded = checked
- }
- }
-
- RowLayout {
- Layout.fillWidth: true
- Layout.preferredHeight: 50
-
- Rectangle {
- border.color: 'gray'
- Layout.preferredWidth: root.width / 2
- Layout.fillHeight: true
-
- Image {
- anchors.fill: parent
- anchors.margins: 1
- fillMode: Image.PreserveAspectFit
- source: model.icon
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: {
- iconSelector.open()
- StorybookUtils.singleShotConnection(iconSelector.selected, icon => {
- model.icon = icon
- iconSelector.close()
- })
- }
- }
- }
-
- Rectangle {
- border.color: 'gray'
- Layout.preferredWidth: root.width / 2
- Layout.fillHeight: true
-
- Image {
- anchors.fill: parent
- anchors.margins: 1
- fillMode: Image.PreserveAspectFit
- source: model.banner
- }
-
- MouseArea {
- anchors.fill: parent
- onClicked: {
- bannerSelector.open()
- StorybookUtils.singleShotConnection(bannerSelector.selected, banner => {
- model.banner = banner
- bannerSelector.close()
- })
- }
- }
- }
- }
-
- TextField {
- Layout.fillWidth: true
- maximumLength: 1024 * 1024 * 1024
- text: model.icon
- onTextChanged: model.icon = text
- }
-
- TextField {
- Layout.fillWidth: true
- maximumLength: 1024 * 1024 * 1024
- text: model.banner
- onTextChanged: model.banner = text
- }
-
- Row {
- spacing: 4
-
- Label {
- anchors.verticalCenter: parent.verticalCenter
- text: "members:\t"
- }
-
- SpinBox {
- editable: true
- height: 30
- from: 0; to: 10 * 1000 * 1000
- value: model.members
- onValueChanged: model.members = value
- }
- }
-
- Row {
- spacing: 4
-
- Label {
- anchors.verticalCenter: parent.verticalCenter
- text: "popularity:\t"
- }
-
- SpinBox {
- editable: true
- height: 30
- from: 0; to: 10 * 1000 * 1000
- value: model.popularity
- onValueChanged: model.popularity = value
- }
+ SpinBox {
+ editable: true
+ height: 30
+ from: 0; to: 10 * 1000 * 1000
+ value: model.popularity
+ onValueChanged: model.popularity = value
}
}
}
diff --git a/storybook/pages/LoginViewPage.qml b/storybook/pages/LoginViewPage.qml
index b4627d1958..3dc06a071c 100644
--- a/storybook/pages/LoginViewPage.qml
+++ b/storybook/pages/LoginViewPage.qml
@@ -1,6 +1,5 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
import AppLayouts.Onboarding.views 1.0
import AppLayouts.Onboarding.stores 1.0
@@ -100,8 +99,6 @@ SplitView {
SplitView.minimumWidth: 300
SplitView.preferredWidth: 300
- font.pixelSize: 13
-
// model editor will go here
}
}
diff --git a/storybook/qml.qrc b/storybook/qml.qrc
index 13c506527d..44428d7dea 100644
--- a/storybook/qml.qrc
+++ b/storybook/qml.qrc
@@ -4,6 +4,7 @@
Storybook/Logs.qml
Storybook/LogsAndControlsPanel.qml
Storybook/LogsView.qml
+ Storybook/PagesList.qml
Storybook/StorybookUtils.qml
Storybook/qmldir
main.qml