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

904 lines
28 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"
}
feat(Components): introduce `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
Column {
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
feat(Components): introduce `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
width: parent.width
spacing: 8
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
feat(Components): introduce `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter
title: "Contact requests"
requestsCount: 3
sensor.onClicked: demoContactRequestsModal.open()
}
StatusChatList {
anchors.horizontalCenter: parent.horizontalCenter
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
chatListItems.model: demoChatListItems
selectedChatId: "0"
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 `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
}
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(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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
popupMenu: StatusPopupMenu {
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
property string chatId
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
refactor(StatusPopupMenu): expose category and chat id via open handler Closes #192
2021-06-25 10:26:29 +00:00
openHandler: function (id) {
chatId = id
}
feat(Components): introduce `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuItem {
text: "View Profile"
icon.name: "group-chat"
}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuSeparator {}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuSeparator {}
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 `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
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(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
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
chatInfoButton.title: "Amazing Funny Squirrel"
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
chatInfoButton.subTitle: "Contact"
chatInfoButton.icon.color: Theme.palette.miscColor7
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
chatInfoButton.pinnedMessagesCount: 1
feat(StatusChatToolBar): add members and search button This commit adds the members and search button which are needed for certain features in Status Desktop. In views where these aren't needed, each button can be set `visible: false` individually: ```qml StatusChatToolBar { ... membersButton.visible: false searchButton.visible: false } ``` Closes #243
2021-07-09 11:59:40 +00:00
searchButton.visible: false
membersButton.visible: false
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
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
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
StatusAppThreePanelLayout {
id: root
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
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
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
width: leftPanel.width
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
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(StatusPopupMenu): expose category and chat id via open handler Closes #192
2021-06-25 10:26:29 +00:00
openHandler: function (id) {
categoryId = id
}
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
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
StatusMenuItem {
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
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
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
StatusMenuItem {
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
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(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
centerPanel: 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
StatusChatToolBar {
anchors.top: parent.top
width: parent.width
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
chatInfoButton.title: "general"
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
chatInfoButton.subTitle: "Community Chat"
chatInfoButton.icon.color: Theme.palette.miscColor6
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
feat(StatusFlatRoundButton): introduce `highlighted` color for secondary type Closes #245
2021-07-13 15:05:31 +00:00
searchButton.onClicked: searchButton.highlighted = !searchButton.highlighted
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
onMembersButtonClicked: {
root.showRightPanel = !root.showRightPanel;
}
}
}
rightPanel: Item {
StatusBaseText {
id: titleText
anchors.top: parent.top
anchors.topMargin:16
anchors.left: parent.left
anchors.leftMargin: 16
font.pixelSize: 15
text: qsTr("Members")
}
ListView {
anchors.top: titleText.bottom
anchors.topMargin: 16
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: 8
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
boundsBehavior: Flickable.StopAtBounds
model: ["John", "Nick", "Maria", "Mike"]
delegate: Row {
width: parent.width
height: 30
spacing: 8
Rectangle {
width: 24
height: 24
radius: width/2
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
}
StatusBaseText {
height: parent.height
horizontalAlignment: Text.AlignHCenter
font.pixelSize: 15
text: modelData
}
}
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 `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
}
}
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
Item {
feat(sandbox): introduce first part of profile view for reference app
2021-06-17 13:10:55 +00:00
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(Components): introduce `StatusContactRequestsIndicatorListItem` Usage: ```qml import StatusQ.Components 0.1 StatusContactRequestsIndicatorListItem { title: "Contact requests" requestsCount: 3 sensor.onClicked: ... } ``` Closes #175
2021-06-23 12:57:29 +00:00
StatusModal {
id: demoContactRequestsModal
anchors.centerIn: parent
header.title: "Contact Requests"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "notification"
}
content: StatusBaseText {
anchors.centerIn: parent
text: "Contact request will be shown here"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Decline all"
type: StatusBaseButton.Type.Danger
onClicked: demoContactRequestsModal.close()
},
StatusButton {
text: "Accept all"
onClicked: demoContactRequestsModal.close()
}
]
}
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
StatusModal {
id: demoCommunityDetailModal
anchors.centerIn: parent
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
header.title: "Cryptokitties"
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
header.subTitle: "Public Community"
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
content: Column {
width: demoCommunityDetailModal.width
feat(StatusQ.Layout): introducing StatusAppThreePanelLayout Added new component to support a 3 column view Closes #272
2021-07-22 14:41:29 +00:00
StatusModalDivider {
bottomPadding: 8
feat(Popups): Add StatusModal
2021-06-14 12:10:36 +00:00
}
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
unreadMessagesCount: 0
chore: ensure `StatusChatList` receives the proper value for mentions This is due to a change in how mentions and unread messages are indicated. See https://github.com/status-im/status-desktop/commit/7fbccec227492c9c9f5188e1088e80304e1101fd for more information.
2021-07-09 12:40:00 +00:00
mentionsCount: 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"
fix(StatusChatListItem): ensure public chat names are prefixed with '#' Closes #191
2021-06-25 10:33:30 +00:00
name: "status-desktop"
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
chatType: StatusChatListItem.Type.PublicChat
muted: false
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
chore: ensure `StatusChatList` receives the proper value for mentions This is due to a change in how mentions and unread messages are indicated. See https://github.com/status-im/status-desktop/commit/7fbccec227492c9c9f5188e1088e80304e1101fd for more information.
2021-07-09 12:40:00 +00:00
mentionsCount: 1
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: "2"
name: "Amazing Funny Squirrel"
chatType: StatusChatListItem.Type.OneToOneChat
muted: false
fix(StatusChatList): expect `model.color` instead of `iconColor` prop
2021-06-23 10:18:08 +00:00
color: "green"
feat(StatusRoundedImage): introduce identicon support This just introduces a new `StatusImageSettings` property `isIdenticon` which can be used to determine whether a `StatusRoundedImage` should render with a background + border (which is the case for identicons). It also updates the `StatusChatList` delegate to consider that property and have it properly decide how to render the UI. Closes #173
2021-06-24 13:41:42 +00:00
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
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: "3"
name: "Black Ops"
chatType: StatusChatListItem.Type.GroupChat
muted: 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
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
}
fix(StatusChatListItem): ensure chat name elides when it's too long Closes #151
2021-06-25 11:55:12 +00:00
ListElement {
chatId: "5"
name: "channel-with-a-super-duper-long-name"
chatType: StatusChatListItem.Type.PublicChat
muted: false
color: "green"
unreadMessagesCount: 0
}
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(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
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
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
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
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
}