status-im
/
status-qml
mirror of
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-qml/sandbox/DemoApp.qml

429 lines
13 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"
}
]
}
appView: Loader {
id: appView
anchors.fill: parent
sourceComponent: statusAppChatView
}
}
Component {
id: statusAppChatView
StatusAppTwoPanelLayout {
leftPanel: Item {
anchors.fill: parent
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
StatusChatList {
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.top: parent.top
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
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
selectedChatId: "0"
chatListItems.model: demoChatListItems
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(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
}
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
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 {
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 {
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
anchors.horizontalCenter: parent.horizontalCenter
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"
}
}
}
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
Column {
anchors.top: parent.top
anchors.topMargin: 64
anchors.horizontalCenter: parent.horizontalCenter
spacing: 4
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
StatusChatList {
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
id: statusChatList
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
anchors.horizontalCenter: parent.horizontalCenter
chatListItems.model: demoCommunityChatListItems
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
}
StatusChatListCategory {
name: "Public"
feat(StatusChatListCategory): introduce flag to show/hide buttons This commit introduces a `showActionButtons` flag that defaults to `false` and can be used to render the action buttons provided in the chat list category. This is useful for cases where only admin users should have the right to create channels inside categories or mutate a category's state. Settings `showActionButtons: true` will then render the buttons. Closes #150
2021-06-15 10:17:51 +00:00
showActionButtons: 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
chatList.chatListItems.model: demoCommunityChatListItems
chatList.selectedChatId: "0"
chatList.onChatItemSelected: chatList.selectedChatId = id
popupMenu: categoryPopupCmp
}
StatusChatListCategory {
name: "Development"
feat(StatusChatListCategory): introduce flag to show/hide buttons This commit introduces a `showActionButtons` flag that defaults to `false` and can be used to render the action buttons provided in the chat list category. This is useful for cases where only admin users should have the right to create channels inside categories or mutate a category's state. Settings `showActionButtons: true` will then render the buttons. Closes #150
2021-06-15 10:17:51 +00:00
showActionButtons: 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
chatList.chatListItems.model: demoCommunityChatListItems
chatList.onChatItemSelected: chatList.selectedChatId = id
popupMenu: categoryPopupCmp
}
}
Component {
id: categoryPopupCmp
StatusPopupMenu {
StatusMenuItem {
text: "Mute Category"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Edit Category"
icon.name: "edit"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete Category"
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: "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
ListModel {
id: demoChatListItems
ListElement {
chatId: "0"
name: "#status"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "blue"
}
ListElement {
chatId: "1"
name: "#status-desktop"
chatType: StatusChatListItem.Type.PublicChat
muted: false
hasUnreadMessages: true
iconColor: "red"
unreadMessagesCount: 1
}
ListElement {
chatId: "2"
name: "Amazing Funny Squirrel"
chatType: StatusChatListItem.Type.OneToOneChat
muted: false
hasUnreadMessages: false
iconColor: "green"
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
iconColor: "purple"
unreadMessagesCount: 0
}
ListElement {
chatId: "4"
name: "Spectacular Growing Otter"
chatType: StatusChatListItem.Type.OneToOneChat
muted: true
hasUnreadMessages: false
iconColor: "Orange"
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
iconColor: "orange"
}
ListElement {
chatId: "1"
name: "random"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "orange"
}
ListElement {
chatId: "2"
name: "watercooler"
chatType: StatusChatListItem.Type.CommunityChat
muted: false
hasUnreadMessages: false
hasMention: false
unreadMessagesCount: 0
iconColor: "orange"
}
}
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
}