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/app/AppLayouts/Chat/ChatColumn/TopBar.qml

174 lines
6.2 KiB
QML
Raw Normal View History

update qml imports
2020-06-17 19:18:31 +00:00
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
import "../../../../shared"
feat: introduce StatusIdenticon components This component introduces `StatusLetterIdenticon`, `StatusImageIdenticon` and `StatusIdenticon`. - `StatusLetterIdenticon` renders an identicon with a single letter based on a name. - `StatusImageIdenticon` renders an actual image based on an identicon URL - `StatusIdenticon` is a composition of the former both, but with a loading mechanism to decide which should be rendered The commit also ensures all of these components are used respectively throughout the application.
2020-09-22 14:45:09 +00:00
import "../../../../shared/status"
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
import "../../../../imports"
feat(ui): introduce `ChannelIcon` component This component renders channel identicons based on the chat type and channel name and will render a user identicon in case of a one-on-one chat.
2020-06-02 09:54:46 +00:00
import "../components"
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
Rectangle {
fix: pixelated icons on the menu
2020-08-14 12:08:09 +00:00
property int iconSize: 16
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
id: chatTopBarContent
feat: add dark theme colors and new properties for it
2020-07-13 18:45:54 +00:00
color: Style.current.background
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
height: 56
Layout.fillWidth: true
feat: add dark theme colors and new properties for it
2020-07-13 18:45:54 +00:00
border.color: Style.current.border
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
border.width: 1
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
Loader {
property bool isGroupChatOrOneToOne: (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat ||
chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
feat: make channel list compact in compact mode
2020-07-15 16:09:20 +00:00
anchors.left: parent.left
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
anchors.leftMargin: this.isGroupChatOrOneToOne ? Style.current.padding : Style.current.padding + 4
feat: make channel list compact in compact mode
2020-07-15 16:09:20 +00:00
anchors.top: parent.top
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
anchors.topMargin: 4
sourceComponent: this.isGroupChatOrOneToOne ? chatInfoButton : chatInfo
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
Component {
id: chatInfoButton
StatusChatInfoButton {
fix: "Contact / Not a contact" indicator was not being updated when an user was added/removed as contact
2020-10-02 19:25:33 +00:00
chatId: chatsModel.activeChannel.id
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
chatName: chatsModel.activeChannel.name
chatType: chatsModel.activeChannel.chatType
identicon: chatsModel.activeChannel.identicon
feat: add muted states for channel Fixes #1615
2021-01-15 18:36:42 +00:00
muted: chatsModel.activeChannel.muted
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
identiconSize: 36
onClicked: {
switch (chatsModel.activeChannel.chatType) {
case Constants.chatTypePrivateGroupChat:
refactor(ChannelContextMenu): remove dependency on active channel This commit does a bunch of things: - First and foremost, it removes the active channel dependency. This is needed to have it operate on the correct channel object, without forcing us to change the active channel (e.g. right-clicking on a channel item that's not active, will make it active eventually) - To make that work, this commit changes the `ChannelContextMenu` to receive a `ChatItemView`, so it can be used for things like determining what menu options are shown, what members are in a group, whether someone is admin of a group etc. - This also required a new `QtProperty` called `contextChannel`. The reason this is required, is because in some cases, like receiving members count of groups, we need a complete `ChatItemView` object as we don't have access to certain APIs otherwise. - Unfortunately, we can't pass down `activeChannel` every where for that because sometimes the context menu should not actually operate on the active channel. Fixes: #1755
2021-01-25 15:58:33 +00:00
groupInfoPopup.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx())
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
break;
case Constants.chatTypeOneToOne:
refactor: move getProfileImage API to appMain Prior to this commit, the function was expected on a `chatView` QML object. This has worked out so far because the places where the API is used were always living inside `ChatLayout`. With the new timeline however, this is no longer the case so we have to make sure that the API is available to other views as well.
2020-12-21 12:08:44 +00:00
const profileImage = appMain.getProfileImage(chatsModel.activeChannel.id)
Fixed the issue doesn't show nickname on profileview in 1:1 chat. Fixes #1826
2021-02-11 08:39:46 +00:00
openProfilePopup(chatsModel.activeChannel.name, chatsModel.activeChannel.id, profileImage || chatsModel.activeChannel.identicon, "", chatsModel.activeChannel.nickname)
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
break;
}
fix: display ens names with correct format in all screens
2020-08-07 19:26:51 +00:00
}
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
Component {
id: chatInfo
StatusChatInfo {
identiconSize: 36
chatName: chatsModel.activeChannel.name
chatType: chatsModel.activeChannel.chatType
identicon: chatsModel.activeChannel.identicon
feat: add muted states for channel Fixes #1615
2021-01-15 18:36:42 +00:00
muted: chatsModel.activeChannel.muted
Various fixes - Make the topbar channel identifier color match the channel list color - Display private groups on the channel list - Reduce chat identifier height
2020-06-09 15:48:17 +00:00
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
feat: introduce `StatusChatInfo` and `StatusChatInfoButton` components These components are used to render the chat info in the top bar of the chat view. `StatusChatInfoButton` is an clickable button that will open chat info dialogs. Closes #923
2020-09-22 14:50:14 +00:00
fix: fix chat menu button
2020-07-09 17:56:31 +00:00
Rectangle {
id: moreActionsBtnContainer
width: 40
height: 40
radius: Style.current.radius
color: Style.current.transparent
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
fix: fix chat menu button
2020-07-09 17:56:31 +00:00
anchors.rightMargin: Style.current.smallPadding
StyledText {
id: moreActionsBtn
text: "..."
font.letterSpacing: 0.5
font.bold: true
lineHeight: 1.4
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
font.pixelSize: 25
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
MouseArea {
id: mouseArea
anchors.fill: parent
fix: fix chat menu button
2020-07-09 17:56:31 +00:00
hoverEnabled: true
onEntered: {
feat: add dark theme colors and new properties for it
2020-07-13 18:45:54 +00:00
parent.color = Style.current.border
fix: fix chat menu button
2020-07-09 17:56:31 +00:00
}
onExited: {
parent.color = Style.current.transparent
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
onClicked: {
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
var menu = chatContextMenu;
refactor: introduce ChannelContextMenu component This commit introduces a new `ChannelContextMenu` component that can be reused in different places, such as the channel list, as well as the chat bar. At the moment we use two different pop up menus that also show two different set of menu options. By using `ChanelContextMenu` in both of these places, we get the same menu and same experience. Closes #1711
2021-01-21 14:39:27 +00:00
var isPrivateGroupChat = chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat
if(isPrivateGroupChat){
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
menu = groupContextMenu
}
fix: toggle top bar menu on button click
2021-01-11 20:08:35 +00:00
if (menu.opened) {
return menu.close()
}
refactor: introduce ChannelContextMenu component This commit introduces a new `ChannelContextMenu` component that can be reused in different places, such as the channel list, as well as the chat bar. At the moment we use two different pop up menus that also show two different set of menu options. By using `ChanelContextMenu` in both of these places, we get the same menu and same experience. Closes #1711
2021-01-21 14:39:27 +00:00
if (isPrivateGroupChat) {
menu.popup(moreActionsBtn.x, moreActionsBtn.height)
} else {
fix: make sure context menu receives correct channel index This was missing in one of our previous PRs and causes the channel context menu to not function properly e.g. when deleting chats, it currently always deletes the first chat in the channel list instead of the active channel.
2021-02-08 12:10:40 +00:00
menu.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx())
refactor: introduce ChannelContextMenu component This commit introduces a new `ChannelContextMenu` component that can be reused in different places, such as the channel list, as well as the chat bar. At the moment we use two different pop up menus that also show two different set of menu options. By using `ChanelContextMenu` in both of these places, we get the same menu and same experience. Closes #1711
2021-01-21 14:39:27 +00:00
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
refactor: introduce ChannelContextMenu component This commit introduces a new `ChannelContextMenu` component that can be reused in different places, such as the channel list, as well as the chat bar. At the moment we use two different pop up menus that also show two different set of menu options. By using `ChanelContextMenu` in both of these places, we get the same menu and same experience. Closes #1711
2021-01-21 14:39:27 +00:00
ChannelContextMenu {
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
id: chatContextMenu
refactor: introduce ChannelContextMenu component This commit introduces a new `ChannelContextMenu` component that can be reused in different places, such as the channel list, as well as the chat bar. At the moment we use two different pop up menus that also show two different set of menu options. By using `ChanelContextMenu` in both of these places, we get the same menu and same experience. Closes #1711
2021-01-21 14:39:27 +00:00
groupInfoPopup: groupInfoPopup
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
PopupMenu {
id: groupContextMenu
fix: toggle top bar menu on button click
2021-01-11 20:08:35 +00:00
closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
update qml imports
2020-06-17 19:18:31 +00:00
Action {
feat: group information
2020-06-11 17:50:36 +00:00
icon.source: "../../../img/group_chat.svg"
fix: fix PopupMenu icon size to be back to 25 but customizable
2020-07-10 18:49:14 +00:00
icon.width: chatTopBarContent.iconSize
icon.height: chatTopBarContent.iconSize
chore: run transform script to change qstr to qstrid
2020-07-06 20:39:55 +00:00
//% "Group Information"
text: qsTrId("group-information")
refactor(ChannelContextMenu): remove dependency on active channel This commit does a bunch of things: - First and foremost, it removes the active channel dependency. This is needed to have it operate on the correct channel object, without forcing us to change the active channel (e.g. right-clicking on a channel item that's not active, will make it active eventually) - To make that work, this commit changes the `ChannelContextMenu` to receive a `ChatItemView`, so it can be used for things like determining what menu options are shown, what members are in a group, whether someone is admin of a group etc. - This also required a new `QtProperty` called `contextChannel`. The reason this is required, is because in some cases, like receiving members count of groups, we need a complete `ChatItemView` object as we don't have access to certain APIs otherwise. - Unfortunately, we can't pass down `activeChannel` every where for that because sometimes the context menu should not actually operate on the active channel. Fixes: #1755
2021-01-25 15:58:33 +00:00
onTriggered: groupInfoPopup.openMenu(chatsModel.activeChannel, chatsModel.getActiveChannelIdx())
feat: group information
2020-06-11 17:50:36 +00:00
}
feat(chat): implement clearing chat history Closes #148
2020-06-18 09:47:30 +00:00
Action {
icon.source: "../../../img/close.svg"
fix: fix PopupMenu icon size to be back to 25 but customizable
2020-07-10 18:49:14 +00:00
icon.width: chatTopBarContent.iconSize
icon.height: chatTopBarContent.iconSize
chore: run transform script to change qstr to qstrid
2020-07-06 20:39:55 +00:00
//% "Clear history"
text: qsTrId("clear-history")
feat(chat): implement clearing chat history Closes #148
2020-06-18 09:47:30 +00:00
onTriggered: chatsModel.clearChatHistory(chatsModel.activeChannel.id)
}
update qml imports
2020-06-17 19:18:31 +00:00
Action {
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
icon.source: "../../../img/leave_chat.svg"
fix: fix PopupMenu icon size to be back to 25 but customizable
2020-07-10 18:49:14 +00:00
icon.width: chatTopBarContent.iconSize
icon.height: chatTopBarContent.iconSize
chore: run transform script to change qstr to qstrid
2020-07-06 20:39:55 +00:00
//% "Leave Group"
text: qsTrId("leave-group")
refactor: Introduce more generic confirmation dialog for simpel cases
2020-08-10 13:06:46 +00:00
onTriggered: {
//% "Leave group"
deleteChatConfirmationDialog.title = qsTrId("leave-group")
//% "Leave group"
deleteChatConfirmationDialog.confirmButtonLabel = qsTrId("leave-group")
chore: run qstrConverter script
2020-08-26 15:52:26 +00:00
//% "Are you sure you want to leave this chat?"
deleteChatConfirmationDialog.confirmationText = qsTrId("are-you-sure-you-want-to-leave-this-chat-")
refactor: Introduce more generic confirmation dialog for simpel cases
2020-08-10 13:06:46 +00:00
deleteChatConfirmationDialog.open()
}
feat: leave private chat groups
2020-06-10 19:41:03 +00:00
}
}
feat: group information
2020-06-11 17:50:36 +00:00
GroupInfoPopup {
id: groupInfoPopup
feat(GroupInfo): allow user to visit group member profile page Closes #638
2020-08-06 13:37:09 +00:00
}
extract TopBar into its own file
2020-05-27 21:59:34 +00:00
}
}
refactor: Introduce more generic confirmation dialog for simpel cases
2020-08-10 13:06:46 +00:00
ConfirmationDialog {
id: deleteChatConfirmationDialog
uiux(StatusButton): introduce warn type Fixes #1603
2021-01-13 20:26:30 +00:00
btnType: "warn"
refactor: Introduce more generic confirmation dialog for simpel cases
2020-08-10 13:06:46 +00:00
onConfirmButtonClicked: {
chatsModel.leaveActiveChat()
deleteChatConfirmationDialog.close()
}
}
feat(ui): introduce `ChannelIcon` component This component renders channel identicons based on the chat type and channel name and will render a user identicon in case of a one-on-one chat.
2020-06-02 09:54:46 +00:00
}