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

809 lines
24 KiB
QML
Raw Normal View History

feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
import QtQuick 2.14
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
feat(StatusQ.Popups): introduce StatusPopupMenu component Usage: ```qml import StatusQ.Popups 0.1 Button { onClicked: simpleMenu.popup() } StatusPopupMenu { id: simpleMenu StatusMenuItem { text: "One" } StatusMenuItem { text: "Two" } StatusMenuItem { text: "Three" } } ``` Closes #96 #74
2021-06-02 10:41:31 +00:00
import StatusQ.Popups 0.1
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
Rectangle {
id: demoApp
height: 602
width: 902
border.width: 1
border.color: Theme.palette.baseColor2
Row {
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: 14
anchors.leftMargin: 14
spacing: 6
z: statusAppLayout.z + 1
Rectangle {
color: "#E24640"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#FFC12F"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#2ACB42"
height: 12
width: 12
radius: 6
}
}
StatusAppLayout {
id: statusAppLayout
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: demoApp.border.width
anchors.leftMargin: demoApp.border.width
height: demoApp.height - demoApp.border.width * 2
width: demoApp.width - demoApp.border.width * 2
appNavBar: StatusAppNavBar {
feat(StatusNavBarTabButton): introduce `popupMenu` property This enables users to apply a `StatusPopupMenu` to the button which automatically positions itself and takes care of highlighting the activated button. Usage: ```qml StatusNavBarTabButton { ... popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" } } } ``` Closes #137
2021-06-11 11:08:12 +00:00
id: navBar
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
tooltip.text: "Chat"
checked: appView.sourceComponent == statusAppChatView
onClicked: {
appView.sourceComponent = statusAppChatView
}
}
navBarCommunityTabButtons.model: ListModel {
ListElement {
name: "Status Community"
tooltipText: "Status Community"
}
}
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
feat(StatusNavBarTabButton): introduce `popupMenu` property This enables users to apply a `StatusPopupMenu` to the button which automatically positions itself and takes care of highlighting the activated button. Usage: ```qml StatusNavBarTabButton { ... popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" } } } ``` Closes #137
2021-06-11 11:08:12 +00:00
id: communityBtn
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
anchors.horizontalCenter: parent.horizontalCenter
name: model.name
tooltip.text: model.tooltipText
icon.color: Theme.palette.miscColor6
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
checked: appView.sourceComponent == statusAppCommunityView
onClicked: {
appView.sourceComponent = statusAppCommunityView
}
feat(StatusNavBarTabButton): introduce `popupMenu` property This enables users to apply a `StatusPopupMenu` to the button which automatically positions itself and takes care of highlighting the activated button. Usage: ```qml StatusNavBarTabButton { ... popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" } } } ``` Closes #137
2021-06-11 11:08:12 +00:00
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: qsTr("Invite People")
icon.name: "share-ios"
}
StatusMenuItem {
text: qsTr("View Community")
icon.name: "group"
}
StatusMenuItem {
text: qsTr("Edit Community")
icon.name: "edit"
feat(StatusPopupMenu): make menu items invisible when disabled Closes #135
2021-06-11 11:20:26 +00:00
enabled: false
feat(StatusNavBarTabButton): introduce `popupMenu` property This enables users to apply a `StatusPopupMenu` to the button which automatically positions itself and takes care of highlighting the activated button. Usage: ```qml StatusNavBarTabButton { ... popupMenu: StatusPopupMenu { StatusMenuItem { text: qsTr("Invite People") icon.name: "share-ios" } StatusMenuItem { text: qsTr("View Community") icon.name: "group" } StatusMenuItem { text: qsTr("Edit Community") icon.name: "edit" } } } ``` Closes #137
2021-06-11 11:08:12 +00:00
}
StatusMenuSeparator {}
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
type: StatusMenuItem.Type.Danger
}
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
navBarTabButtons: [
StatusNavBarTabButton {
icon.name: "wallet"
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "browser"
tooltip.text: "Browser"
},
StatusNavBarTabButton {
icon.name: "status-update"
tooltip.text: "Timeline"
},
StatusNavBarTabButton {
id: profileNavButton
icon.name: "profile"
badge.visible: true
badge.anchors.rightMargin: 4
badge.anchors.topMargin: 5
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
badge.border.width: 2
tooltip.text: "Profile"
feat(sandbox): introduce first part of profile view for reference app
2021-06-17 13:10:55 +00:00
checked: appView.sourceComponent == statusAppProfileSettingsView
onClicked: {
appView.sourceComponent = statusAppProfileSettingsView
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
]
}
appView: Loader {
id: appView
anchors.fill: parent
sourceComponent: statusAppChatView
}
}
Component {
id: statusAppChatView
StatusAppTwoPanelLayout {
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
leftPanel: Item {
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
anchors.fill: parent
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
StatusNavigationPanelHeadline {
id: headline
anchors.top: parent.top
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
text: "Chat"
}
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusChatList {
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
anchors.top: headline.bottom
anchors.topMargin: 16
anchors.bottom: parent.bottom
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
anchors.horizontalCenter: parent.horizontalCenter
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
chatListItems.model: demoChatListItems
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
selectedChatId: "0"
feat(StatusChatList): introduce `popupMenu` property Chat list items can open a context on right click as well, so `StatusChatList` needs to provide an API for users to pass down a `StatusPopupMenu` accordingly. This is now possible with a dedicated `popupMenu` proporty that can be used as follows: ```qml StatusChatList { ... popupMenu: StatusPopupMenu { property string chatId openHandler: function () { ... } StatusMenuItem { ... } ... } } ``` As will all `popupMenu` properties in StatusQ component, having this explicit API option enables us to have control over how triggering components (in this case chat list items) behave when they open a context menu (e.g. keeping them highlighted as long as the menu is active). When defining a `chatId` property, `StatusChatList` will hydrate it with the id of the chat list item that has triggered the menu. If there's more logic to be executed upon opening the menu, `openHandler` serves as a hook similar to other popup menus. Inside the hook, users have access to the specific `chatId`. Closes #171
2021-06-23 10:04:19 +00:00
feat(Components): introduce `StatusNavigationPanelHeadline` Component to render navigation panel headlines. Usage: ```qml import StatusQ.Components 0.1 StatusNavigationPanelHeadline { text: "Profile" } ``` Closes #162
2021-06-17 12:58:19 +00:00
onChatItemSelected: selectedChatId = id
onChatItemUnmuted: {
for (var i = 0; i < demoChatListItems.count; i++) {
let item = demoChatListItems.get(i);
if (item.chatId === id) {
demoChatListItems.setProperty(i, "muted", false)
}
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
feat(StatusChatList): introduce `popupMenu` property Chat list items can open a context on right click as well, so `StatusChatList` needs to provide an API for users to pass down a `StatusPopupMenu` accordingly. This is now possible with a dedicated `popupMenu` proporty that can be used as follows: ```qml StatusChatList { ... popupMenu: StatusPopupMenu { property string chatId openHandler: function () { ... } StatusMenuItem { ... } ... } } ``` As will all `popupMenu` properties in StatusQ component, having this explicit API option enables us to have control over how triggering components (in this case chat list items) behave when they open a context menu (e.g. keeping them highlighted as long as the menu is active). When defining a `chatId` property, `StatusChatList` will hydrate it with the id of the chat list item that has triggered the menu. If there's more logic to be executed upon opening the menu, `openHandler` serves as a hook similar to other popup menus. Inside the hook, users have access to the specific `chatId`. Closes #171
2021-06-23 10:04:19 +00:00
popupMenu: StatusPopupMenu {
property string chatId
StatusMenuItem {
text: "View Profile"
icon.name: "group-chat"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
}
rightPanel: Item {
anchors.fill: parent
StatusChatToolBar {
anchors.top: parent.top
width: parent.width
chatInfoButton.title: "Amazing Funny Squirrel"
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1
notificationCount: 1
onNotificationButtonClicked: notificationCount = 0
feat(StatusQ.Popups): introduce StatusPopupMenu component Usage: ```qml import StatusQ.Popups 0.1 Button { onClicked: simpleMenu.popup() } StatusPopupMenu { id: simpleMenu StatusMenuItem { text: "One" } StatusMenuItem { text: "Two" } StatusMenuItem { text: "Three" } } ``` Closes #96 #74
2021-06-02 10:41:31 +00:00
fix(StatusChatToolBar): ensure menu button stays highlighted This introduces a new `popupMenu` property that can be used to pass down a `StatusPopupMenu` to `StatusChatToolBar`. The reason this is done is so that we get control over its `onClosed` handler, which is used to remove the menu button's `highlighted` state. The `highlighted` state is activated inside the component as well when it's clicked. Existing signals like `menuButtonClicked` still exist and can be leveraged for further logic. Closes #125
2021-06-08 13:45:27 +00:00
popupMenu: StatusPopupMenu {
feat(StatusQ.Popups): introduce StatusPopupMenu component Usage: ```qml import StatusQ.Popups 0.1 Button { onClicked: simpleMenu.popup() } StatusPopupMenu { id: simpleMenu StatusMenuItem { text: "One" } StatusMenuItem { text: "Two" } StatusMenuItem { text: "Three" } } ``` Closes #96 #74
2021-06-02 10:41:31 +00:00
id: contextMenu
StatusMenuItem {
text: "Mute Chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear History"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Leave Chat"
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
type: StatusMenuItem.Type.Danger
}
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
}
}
}
Component {
id: statusAppCommunityView
StatusAppTwoPanelLayout {
leftPanel: Item {
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
id: leftPanel
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
anchors.fill: parent
feat(Components): introduce `StatusChatInfoToolBar` component Usage: ```qml import StatusQ.Components 0.1 StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" chatInfoButton.subTitle: "128 Members" chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" chatInfoButton.icon.color: Theme.palette.miscColor6 popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } ``` Closes #141
2021-06-14 11:30:42 +00:00
StatusChatInfoToolBar {
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
id: statusChatInfoToolBar
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
anchors.top: parent.top
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
anchors.horizontalCenter: parent.horizontalCenter
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
chatInfoButton.title: "CryptoKitties"
feat(Components): introduce `StatusChatInfoToolBar` component Usage: ```qml import StatusQ.Components 0.1 StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" chatInfoButton.subTitle: "128 Members" chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" chatInfoButton.icon.color: Theme.palette.miscColor6 popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } ``` Closes #141
2021-06-14 11:30:42 +00:00
chatInfoButton.subTitle: "128 Members"
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
chatInfoButton.icon.color: Theme.palette.miscColor6
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
chatInfoButton.onClicked: demoCommunityDetailModal.open()
feat(Components): introduce `StatusChatInfoToolBar` component Usage: ```qml import StatusQ.Components 0.1 StatusChatInfoToolBar { chatInfoButton.title: "Cryptokitties" chatInfoButton.subTitle: "128 Members" chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg" chatInfoButton.icon.color: Theme.palette.miscColor6 popupMenu: StatusPopupMenu { StatusMenuItem { text: "Create channel" icon.name: "channel" } StatusMenuItem { text: "Create category" icon.name: "channel-category" } StatusMenuSeparator {} StatusMenuItem { text: "Invite people" icon.name: "share-ios" } } } ``` Closes #141
2021-06-14 11:30:42 +00:00
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
}
}
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
ScrollView {
id: scrollView
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
anchors.top: statusChatInfoToolBar.bottom
anchors.topMargin: 8
anchors.bottom: parent.bottom
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
width: leftPanel.width
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
contentHeight: communityCategories.height
clip: true
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusChatListAndCategories {
id: communityCategories
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
width: leftPanel.width
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
chatList.model: demoCommunityChatListItems
categoryList.model: demoCommunityCategoryItems
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
showCategoryActionButtons: true
onChatItemSelected: selectedChatId = id
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
categoryPopupMenu: StatusPopupMenu {
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
property string categoryId
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuItem {
text: "Mute Category"
icon.name: "notification"
}
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
feat(Components): introduce `StatusChatListCategory` A component used to render chat list groups. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategory { categoryId: ... name: "Public" opened: true // default `true` addButton.[...]: ... // `StatusChatListCategoryItemButton` menuButton.[...]: ... // `StatusChatListCategoryItemButton` toggleButton.[...]: ... // `StatusChatListCategoryItemButton` chatList.chatListItems.model: ... // `chatsList` is a `StatusChatList` chatList.selectedChatId: ... chatList.onChatItemSelected: ... popupMenu: StatusPopupMenu { ... } } ``` Closes #123
2021-06-08 11:28:06 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuItem {
text: "Edit Category"
icon.name: "edit"
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuSeparator {}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuItem {
text: "Delete Category"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
}
feat(StatusChatList): introduce `popupMenu` property Chat list items can open a context on right click as well, so `StatusChatList` needs to provide an API for users to pass down a `StatusPopupMenu` accordingly. This is now possible with a dedicated `popupMenu` proporty that can be used as follows: ```qml StatusChatList { ... popupMenu: StatusPopupMenu { property string chatId openHandler: function () { ... } StatusMenuItem { ... } ... } } ``` As will all `popupMenu` properties in StatusQ component, having this explicit API option enables us to have control over how triggering components (in this case chat list items) behave when they open a context menu (e.g. keeping them highlighted as long as the menu is active). When defining a `chatId` property, `StatusChatList` will hydrate it with the id of the chat list item that has triggered the menu. If there's more logic to be executed upon opening the menu, `openHandler` serves as a hook similar to other popup menus. Inside the hook, users have access to the specific `chatId`. Closes #171
2021-06-23 10:04:19 +00:00
chatListPopupMenu: StatusPopupMenu {
property string chatId
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
refactor: don't make StatusChatList scrollable by default This is because we ran into issues where some component compositions caused scrollviews to be nested which rendered them non-functional. For now we're rolling back the idea of components being smart enough to become scrollable by themselves and have StatusQ consumers handle scroll behaviour.
2021-06-22 08:37:59 +00:00
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
}
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}
}
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
rightPanel: Item {
anchors.fill: parent
StatusChatToolBar {
anchors.top: parent.top
width: parent.width
chatInfoButton.title: "general"
chatInfoButton.subTitle: "Community Chat"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
}
}
}
}
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
feat(sandbox): introduce first part of profile view for reference app
2021-06-17 13:10:55 +00:00
Component {
id: statusAppProfileSettingsView
StatusAppTwoPanelLayout {
leftPanel: Item {
anchors.fill: parent
StatusNavigationPanelHeadline {
id: profileHeadline
anchors.top: parent.top
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
text: "Profile"
}
ScrollView {
anchors.top: profileHeadline.bottom
anchors.topMargin: 16
anchors.bottom: parent.bottom
width: parent.width
contentHeight: profileMenuItems.height + 8
contentWidth: parent.width
clip: true
Column {
id: profileMenuItems
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
Repeater {
model: demoProfileGeneralMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
}
StatusListSectionHeadline { text: "Settings" }
Repeater {
model: demoProfileSettingsMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
}
Item {
id: invisibleSeparator
height: 16
width: parent.width
}
Repeater {
model: demoProfileOtherMenuItems
delegate: StatusNavigationListItem {
title: model.title
icon.name: model.icon
}
}
}
}
}
rightPanel: Item {
anchors.fill: parent
}
}
}
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
StatusModal {
id: demoCommunityDetailModal
anchors.centerIn: parent
header.title: "Cryptokitties"
header.subTitle: "Public Community"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
content: Column {
width: demoCommunityDetailModal.width
StatusModalDivider {
bottomPadding: 8
}
StatusBaseText {
text: "A community of cat lovers, meow!"
verticalAlignment: Text.AlignVCenter
font.pixelSize: 15
height: 46
color: Theme.palette.directColor1
anchors.left: parent.left
anchors.right: parent.right
anchors.leftMargin: 16
anchors.rightMargin: 16
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusDescriptionListItem {
title: "Share community"
subTitle: "https://join.status.im/u/0x04...45f19"
tooltip.text: "Copy to clipboard"
icon.name: "copy"
iconButton.onClicked: tooltip.visible = !tooltip.visible
width: parent.width
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Members"
icon.name: "group-chat"
label: "184"
components: [
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
]
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Notifications"
icon.name: "notification"
components: [
StatusSwitch {}
]
}
StatusModalDivider {
topPadding: 8
bottomPadding: 8
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Edit community"
icon.name: "edit"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Transfer ownership"
icon.name: "exchange"
type: StatusListItem.Type.Secondary
}
StatusListItem {
anchors.horizontalCenter: parent.horizontalCenter
statusListItemTitle.font.pixelSize: 17
title: "Leave community"
icon.name: "arrow-right"
icon.rotation: 180
type: StatusListItem.Type.Secondary
}
}
}
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
ListModel {
id: demoChatListItems
ListElement {
chatId: "0"
name: "#status"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "blue"
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
}
ListElement {
chatId: "1"
name: "#status-desktop"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: true
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "red"
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
unreadMessagesCount: 1
}
ListElement {
chatId: "2"
name: "Amazing Funny Squirrel"
chatType: StatusChatListItem.Type.OneToOneChat
muted: false
hasUnreadMessages: false
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "green"
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
identicon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
unreadMessagesCount: 0
}
ListElement {
chatId: "3"
name: "Black Ops"
chatType: StatusChatListItem.Type.GroupChat
muted: false
hasUnreadMessages: false
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "purple"
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
unreadMessagesCount: 0
}
ListElement {
chatId: "4"
name: "Spectacular Growing Otter"
chatType: StatusChatListItem.Type.OneToOneChat
muted: true
hasUnreadMessages: false
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "Orange"
feat(Components): introduce `StatusChatList` This commit introduce a new `StautsChatList` component that can be used to render `StatusChatListItem`s, typically for chat and community views. The component expects a `chatListItems.model` that has the following properties: ```qml ListModel { ListElement { chatId: "0" name: "#status" chatType: StatusChatListItem.Type.PublicChat muted: false hasUnreadMessages: false hasMention: false unreadMessagesCount: 0 iconColor: "blue" } ... } ``` It also emits two possible signals: - `onChatItemSelected(string id)` - `onChatItemUnmuted(string id)` Usage: ```qml import StatusQ.Components 0.1 StatusChatList { selectedChatId: "0" chatListItems.model: demoChatListItems onChatItemSelected: ... onChatItemUnmuted: ... } ``` Closes #100
2021-06-07 09:16:18 +00:00
unreadMessagesCount: 0
}
}
feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117
2021-06-07 12:16:37 +00:00
ListModel {
id: demoCommunityChatListItems
ListElement {
chatId: "0"
name: "general"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "orange"
feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117
2021-06-07 12:16:37 +00:00
}
ListElement {
chatId: "1"
name: "random"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "orange"
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
categoryId: "public"
feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117
2021-06-07 12:16:37 +00:00
}
ListElement {
chatId: "2"
name: "watercooler"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "orange"
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
categoryId: "public"
}
ListElement {
chatId: "3"
name: "language-design"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "orange"
feat(Components): introduce `StatusChatListAndCategories` component This is a wrapping component that can be used to render community chat lists and categories. It takes care of rendering categories, the top chat list, as well as becominng scrollable in case the content outgrows the available space. Usage: ```qml import StatusQ.Components 0.1 StatusChatListAndCategories { chatList.model: ... // non-categorized chat items, pass all chat items here, the component will take care of filtering categorized items out categoryListModel: ... // available categories (need to have `id` and `name`) selectedChatId: ... showCategoryActionButtons: true // default `false` - useful when only admin users can create and mutate categories/channels onChatItemSelected: ... // `id` is available for selected chat id categoryPopupMenu: StatusPopupMenu { // optional popup menu for category items property string categoryId // define this property to have it hydrated with correct id and make it available inside menu items ... } popupMenu: StatusPopupMenu { ... } // optional popup menu for whole list, will be triggered with right-click } ``` Closes #133
2021-06-15 14:27:39 +00:00
categoryId: "dev"
}
}
ListModel {
id: demoCommunityCategoryItems
ListElement {
categoryId: "public"
name: "Public"
}
ListElement {
categoryId: "dev"
name: "Development"
feat(Components): introduce `StatusChatListCategoryItem` This component is used to render chat list categories. Usage: ```qml import StatusQ.Components 0.1 StatusChatListCategoryItem { title: "Public" onClicked: opened = !opened onToggleButtonClicked: opened = !opened onMenuButtonClicked: ... onAddButtonClicked: ... addButton.[...]: ... // StatusChatListCategoryItemButton menuButton.[...]: ... // StatusChatListCategoryItemButton toggleButton.[...]: ... // StatusChatListCategoryItemButton } ``` The button components are exposed so their tooltips can be configured with (internationalized) app messages. Closes #117
2021-06-07 12:16:37 +00:00
}
}
feat(sandbox): introduce first part of profile view for reference app
2021-06-17 13:10:55 +00:00
ListModel {
id: demoProfileGeneralMenuItems
ListElement {
title: "My Profile"
icon: "profile"
}
ListElement {
title: "Contacts"
icon: "contact"
}
ListElement {
title: "ENS Usernames"
icon: "username"
}
}
ListModel {
id: demoProfileSettingsMenuItems
ListElement {
title: "Privacy & Security"
icon: "security"
}
ListElement {
title: "Appearance"
icon: "appearance"
}
ListElement {
title: "Browser"
icon: "browser"
}
ListElement {
title: "Sounds"
icon: "sound"
}
ListElement {
title: "Language"
icon: "language"
}
ListElement {
title: "Notifications"
icon: "notification"
}
ListElement {
title: "Sync settings"
icon: "mobile"
}
ListElement {
title: "Advanced"
icon: "settings"
}
}
ListModel {
id: demoProfileOtherMenuItems
ListElement {
title: "Need help?"
icon: "help"
}
ListElement {
title: "About"
icon: "info"
}
ListElement {
title: "Sign out & Quit"
icon: "logout"
}
}
feat(sandbox): introduce first version of reference app This reference app serves as a dogfooding ground for StatusQ components.
2021-05-31 12:55:01 +00:00
}