Commit Graph

33 Commits

Author SHA1 Message Date
B.Melnik c679854d7d feat(StatusChatList): Add drag and drop support of list items
This implements drag and drop capabilities of chat items within a `StatusChatList`.
The commit introduces a `DelegateModal` to visually reorder chat items
when they're being dragged and dropped onto a `DropArea`.

To persist the new order of chat items, various signals have been introduced to chat
list related components:

```qml
StatusChatList {

    onChatItemReordered: function (id, from, to) {
        // ...
    }
}

StatusChatListAndCategories {

    onChatItemReordered: function (categoryId, chatId, from, to) {
        // ...
    }
}
```

There's no such API on the `StatusChatListCategory` type because that one already
exposes its underlying `StatusChatList` via `chatList`, which makes the signal available.

Dragging and dropping chat items is disabled by default and needs to be turned on
using the `draggableItems` property:

```qml
StatusChatList {
    draggableItems: true
    ...
}
```
2021-08-23 14:16:53 +02:00
Sale Djenic 78edcb3795 feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection
New methods added `resetSearchSelection` and `setSearchSelection` for resetting
and setting selected location.
2021-08-17 10:38:23 +02:00
Sale Djenic c306b68296 fix(StatusSearchLocationMenu): typo fix
Fixed a typo in StatusSearchLocationMenu.locationModel
2021-08-17 10:38:23 +02:00
Alexandra Betouni 30f5ae4b32 feat(StatusQ.Popups) Adding SearchPopup component
Closes #264
2021-08-12 11:35:09 +02:00
Alexandra Betouni d327c51521 fix(StatusAppThreePanelLayout): limit right panel width to 300px
Also added handle in DemoApp as well as hiding text when in minimum
width for right and left panels
2021-07-26 16:49:53 +02:00
Pascal Precht e71bd45c55
chore(sandbox): make app wider due to minimum layout width
There have been minimum layout widths introduced lately which break the
sandbox app's UI. This commit makes it wider by default so this doesn't happen
2021-07-26 15:13:04 +02:00
Pascal Precht 731a0f8c8f feat(sandbox): make use of `StatusInput` in chat view 2021-07-26 15:03:54 +02:00
Alexandra Betouni ffc6fcb429 feat(StatusQ.Layout): introducing StatusAppThreePanelLayout
Added new component to support a 3 column view

Closes #272
2021-07-23 11:06:41 +02:00
Pascal Precht 58e8f1cd23 feat(StatusFlatRoundButton): introduce `highlighted` color for secondary type
Closes #245
2021-07-15 13:00:58 +02:00
Pascal Precht e93dab2ba0 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-12 13:18:58 +02:00
Pascal Precht 096d4148cd chore: ensure `StatusChatList` receives the proper value for mentions
This is due to a change in how mentions and unread messages are indicated.
See 7fbccec227 for more information.
2021-07-09 14:56:24 +02:00
Pascal Precht 34df0f0dab fix(StatusChatListItem): ensure chat name elides when it's too long
Closes #151
2021-06-29 09:46:08 +02:00
Pascal Precht 141872c2a5 fix(StatusChatListItem): ensure public chat names are prefixed with '#'
Closes #191
2021-06-25 12:42:19 +02:00
Pascal Precht a98bae48dd refactor(StatusPopupMenu): expose category and chat id via open handler
Closes #192
2021-06-25 12:42:08 +02:00
Pascal Precht 7a2648f69f 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 16:27:25 +02:00
Pascal Precht baa663cea6 feat(Components): introduce `StatusContactRequestsIndicatorListItem`
Usage:

```qml
import StatusQ.Components 0.1

StatusContactRequestsIndicatorListItem {
    title: "Contact requests"
    requestsCount: 3
    sensor.onClicked: ...
}
```

Closes #175
2021-06-24 16:09:58 +02:00
Pascal Precht a6262f0a34 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-24 16:01:47 +02:00
Pascal Precht 70332a3f41 fix(StatusChatList): expect `model.color` instead of `iconColor` prop 2021-06-24 15:59:45 +02:00
Pascal Precht 8a684a7d8a
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 10:37:59 +02:00
B.Melnik e49b58b94d
feat(Popups): Add StatusModal 2021-06-21 13:04:34 +02:00
Pascal Precht 4588d5976d feat(sandbox): introduce first part of profile view for reference app 2021-06-18 13:51:33 +02:00
Pascal Precht 40617cd710 feat(Components): introduce `StatusNavigationPanelHeadline`
Component to render navigation panel headlines.

Usage:

```qml
import StatusQ.Components 0.1

StatusNavigationPanelHeadline {
    text: "Profile"
}
```

Closes #162
2021-06-18 12:11:50 +02:00
Pascal Precht 7bca27455f
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-16 11:24:18 +02:00
Pascal Precht 9982c3df52 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-16 11:11:34 +02:00
Pascal Precht 454e73a838 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-16 11:01:22 +02:00
Pascal Precht c9bc9bab11 feat(StatusPopupMenu): make menu items invisible when disabled
Closes #135
2021-06-11 13:54:08 +02:00
Pascal Precht 5e8242dfed 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 13:53:17 +02:00
Pascal Precht 90bad9e312 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-09 09:37:27 +02:00
Pascal Precht f4d211acbb 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 15:34:15 +02:00
Pascal Precht 916dcc9c7f 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-08 13:23:32 +02:00
Pascal Precht 1e558b59b0 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-08 13:15:20 +02:00
Pascal Precht 09a6f418d7 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-04 10:15:02 +02:00
Pascal Precht 202fb88654 feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
2021-06-01 10:42:34 +02:00