Updated Models.qml for chats and communities models to reflect changes due to
refactor in the actual backend.`StatusChatList` and `StatusChatListAndCategories`
components updated accordingly.
Create component StatusMemberListItem.
Add StatusMemberListItem component in sandbox\controls\ListItems for testing all its variants and demo app.
Add new properties in StatusListItem.
Reorganize StatusListItem.qml following Qt conventions.
Add badge in StatusSmartIndenticon component that allows configure a colored state.
Closes#515
Create a password strength indicator component with the corresponding variation.
Create a base StatusProgressBar component.
Add new miscColor12.
Closes#528
The below mentioned features have been implemented in this component
1. Profile Picture of sender
2. Sender details - name, secondaryName, chatID
3. Text content
4. Image Content
5. Sticker Content
6. Audio Content
7. Reply Component with all the details for the message beinf replied to
8. Pinned component for Pinned message
9. Edit Component to edit the message
10. Loades to load the below -
a. Link content loader
b. transaction content
c. invitation bubble
d. footer - in this case to show emoji reactions to a message
e. quick actions loader to show the related quick actions
* feat(sandbox/controls): Added StatusBanner component in controls view
In order to test StatusBanner.qml ui component it has been added into the Sandbox app as another Control.
* chore(sandbox/controls): Refactor `StatusBanner' component
Create enum to allow selecting StatusBanner type (`Info`, `Danger`, `Success`, `Warning`).
Add new success color with some opacity in ThemePalette.
* chore(Controls/StatusBanner): Use states instead of function
To have a cleaner code, it has been added states to manage type property changes.
* chore(Controls/StatusBanner): Remove unnecessary stuff
Remove unnecessary name property.
Remove successColor3 property.
The issue is caused by the fact that the MouseArea returns containsMouse as true even when the item is not hovered.
The issue is reproduced when the model changes dynamically in the StatusChatList, thus causing the StatusChatListItem to be recreated and
this is when the containsMouse remains true even though the item is not hovered.
I see a bunch of issues in the QT bug list with regards to the containsMouse property but are still open.
A solution to this is to use HoverHandler which is a more reliable way getting hovered events for an item.
Also added error handling in case in case that crypto symbol image is not available
Added a way to display the balance in currently selected currency on the widget
To do this the consumer of this widget needs to implement "getCurrencyBalanceString" based on the currently selected currency
fixes#4079
The issue is not reproducible a 100% of time. In order to solve this bug, we have turned on the preventStealing flag for the mousseArea.
Checked for any sideimpacts but didnt find any.
Tried several times and this change seems to solve the bug. Feel free to repoen if you are still able to reproduce this behaviour.
fixes#4047
Made slider background and handle to not depend
to root's height so that it covers cases where a
legend is needed thus all should be clickable for
better user experience.
Relates to status-im/status-desktop#3984
There's two ways to signal that a validator emits invalidity on a control:
1. Its `validate()` method returns `false`
2. Its `validate()` method returns an object
Option 2) allows validators to supply the `errors` object with additional data.
Due to latest changes to `errorMessage` handling in validators, those messages
would not be rendered anymore if a validator returns simply `false` instead of an object.
The reason for that is because the code assumed that only option 2) is gonna happen.
This commit ensures that error messages a displayed in both options.
1. Added icon disabledColor property under StatusIconSettings
2. Added Tertiary and Quaternary type to accomodate hovered behavior needed in many buttons
3. Added a missing gif icon.
This is a select component to pick from various supplied colors.
Usage:
```qml
import StatusQ.Controls 0.1
StatusColorSelector {
model: ["red", "blue", "green"]
}
```
Closes#444
This introduces a `StatusAddress` component which renders an address
and can be made `expandable` by applying a `width`:
```qml
import StatusQ.Components 0.1
// Simple case
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
}
// Expandable case
Item {
width: 200
height: childrenRect.height
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
expandable: true
width: parent.width
}
}
```
Closes#430
This introduces a new `StatusSelect` component which is a select form control.
The `model` property can be used to apply a `ListModel` for dynamic data.
To give users full control over what the menu items look like, `StatusSelect`
exposes a `selectMenu.delegate` property.
Most of the time this should be a `StatusMenuItemDelegate` to get access to the
comple `MenuItem` component (remember that `StatusMenuItem` is merely an `Action`
type).
`StatusMenuItemDelegate` derives most of its behaviour by its applied `action`,
so the easiest way to construct a dynamic select with StatusQ menu item look and feel
is a combination of `StatusMenuItemDelegate` and `StatusMenuItem` as shown below.
Further more, because `StatusSelect` can't know what the `delegate` is going to look like
it also can't decide what data goes into a `selectedItem`. Therefore, it offers another API,
the `selectedItemComponent` which can be any component. This component can then be accessed
by menu item actions to set corresponding properties.
Usage:
```qml
import StatusQ.Controls 0.1
StatusSelect {
label: "Some label"
model: ListModel {
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name
}
}
}
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent
property string text: ""
StatusBaseText {
text: selectedItem.text
anchors.centerIn: parent
color: Theme.palette.directColor1
}
}
}
```
Closes#436
This extracts the `MenuItem` delegate used in `StatusPopupMenu` into its
own component so it can be easily reused for cases where simply supplying the
popup menu with `StatusMenuItem` (which is of type `Action`) isn't enough.
Ideally, the `StatusMenuItemDelegate` would be called `StatusMenuItem` but that
would be a breaking change.
Usage:
```qml
StatusPopupMenu {
delegate: StatusMenuItemDelegate {
...
}
}
Category `opened` state is tracked and restored on model change.
Previously, when the model data for categories and channels was changed, all unexpanded, or collapsed categories would automatically expand. This was due to the default state of the category `opened` property being restored (which was set to true) when the model data changed.
With this change in place, the opened state of each category is tracked in the parent component (`StatusChatListAndCategories`), and on each model change, the opened state is restored.
NOTE: it was tempting to the put the changes inside of the `StatusChatListCategory` component, however this would not work as the component is used as a delegate, and all state is wiped on each model change.
Ever since we've moved to `DelegateModel` which is passed to the `Repeater`
which was previously aliased as `chatListItems`, we no longer get access to the
`model.itemAt` method. This is because `DelegateModel` doesn't have such a method.
So in order to restore that access, we have to expose `Repeater` additionally.
The reason this method is needed, is so that apps like Status Desktop can update
individual chat list items based on `Connection` events
Allows asynchronous validation, with the ability to track the validated value for use in the StatusInput as a value that is separate from the entered text.
Async operations are debounced internally to the StatusAsyncValidator.
- `validate`: the input value to this function is the value sent to `asyncComplete`, which must be called by the validator. Return true when the value from the async operation is valid.
- `asyncComplete`: signal to be called by the validator after the async operation has completed. It should contain the value returned by the async operation that should be validated in `validate`.
- `validatedValue`: This is the valid value returned from the async operation. It it tracked separately so that the input text on the `StatusInput` can remain as entered by the user. Use this property and the `onValidatedValueChanged` signal handler for the “real” value to be used by other components.
Closes#395
List items' mouse area was also triggered when chevron
(sub menu) button was clicked so it was unsetting the
opened variable which is responsible for opening/closing
the chats list.
This property enables users to load any component into the input field.
This is useful for rendering a "clearable" icon button, simple icons or
even more complex buttons.
Usage:
```qml
StatusBaseInput {
...
component: StatusIcon {
name: "cancel"
color: Theme.palette.dangerColor1
width: 16
}
}
```
The `clearable` property of `StatusBaseInput` also renders and icon button
on the right hand side. With this new feature, `clearable` is just a short-hand
for:
```qml
StatusBaseInput {
...
component: StatusFlatRoundButton {
visible: edit.text.length != 0 &&
statusBaseInput.clearable &&
!statusBaseInput.multiline &&
edit.activeFocus
type: StatusFlatRoundButton.Type.Secondary
width: 24
height: 24
icon.name: "clear"
icon.width: 16
icon.height: 16
icon.color: Theme.palette.baseColor1
onClicked: {
edit.clear()
}
}
}
```
Closes#380
This allows users to configure how validation is run. There are two modes:
1. `ValidationMode.OnlyWhenDirty`
2. `ValidationMode.Always`
By default, validation happens when the inputs value changes, or on
initial `Component.onCompleted` event. The first mode allows for not
performing validation when the input field is blank and validation.
isn't necessary (yet).
Validators can now define a default `errorMessage` like so:
```qml
StatusValidator {
...
errorMessage: "..."
}
```
Because there's no access to runtime validation errors, `errorMessage` have to
be static. However, if applications wish to provide their own `errorMessage`
they can still override it and make it dynamic:
```qml
SomeValidator {
...
errorMessage: input.errors.someValidator ? "Whoopsie" : ""
}
```
Renamed StatusExpandableSettingsItem to StatusExpandableItem.
Added support for dofferent types of styles for the item.
Type Primary: Relates to Settings Design
Type Secondary: Relates to Collectibles Design
Type Tertiary: Relates to the Collectibles detailed view design
BREAKING CHANGE: Renamed and expanded features of the StatusExpandableSettingsItem to StatusExpandableItem
This is used to enforce focus on the search input when the popup
is opened. In fact users decide to override the search popup's
`onOpened` handler, they still get access to this API to make use of it.
This margin shows because of `handle` width incuded in `SplitView` width. Handle have `Component` type and can't accessable for getting sizes. I add `magic constant` as hotfix.
Closes: #307
Due to design updates in AddAccount modal, updates are
needed in StatusBaseInput and StatusInput
* Added the possibility of having the icon on the right
side
* Added secondaryLabel for title
* Added examples in StatusInputPage
Closes#383
This introduces a new API to allow users to provide a function that formats
timestamps in the search results.
```qml
StatusSearchPopup {
formatTimestampFn: function (ts) {
return // formatted ts
}
}
```
Closes#363
Turns out the icons used in the navigation bar of the application actually
are designed to be bigger than the usual icons.
We can't just use the original source and scale them up in QML because that
will impact the stroke width of the SVGs as well, hence we need to introduce
a special set of icons that are design bigger but presever the feature ratios.
This adds a new `value` property to the component to set label for a
selected value and also rendering a chevron as an indicator that the list
item becomes clickable.
This changes the share of the model expected to render search results.
BREAKING CHANGE:
The model has changed in the following way:
- `image` field added
- `color` field added
- `badgeIdenticonColor` field renamed to `badgeIconColor`
- `isLetterIdenticon` field renamed to `badgeIsLetterIdenticon`
There are now two new properties in `StatusModalHeaderSettings`:
- `titleElide`
- `subTitleElide`
These can be used to configure the `elide` property of both header titles.
The default values for both of them is `Text.ElideRight`.
Closes#353
This commit add elide flags to text in title and subtitle and add flexibility to width. Now compoents use next rules:
1. If width is set - text should be elided when implicit text width is more than root object width
2. Component grows if width is not set based on inner elements natural sizes
Closes: #335 and #338
There was an explicit `width` introduced on `statusListItemTitle`, most likely
to make room for it when `titleAsideText` is supplied.
This unfortunately causes the title get a very small width, resulting in broken
UI.
Since we can assume that there should be enough space for the titleAsideText
when it's used, we probably don't have to calculate a fixed width for the title
in the first place.
This commit therefore removes that explicit setting.
* feat(StatusChatListAndCategories): add drag and drop support for categories
This adds support for dragging and dropping chat list categories.
To persist reorder of chat categories, the new `onChatListCategoryReordered`
signal can be leveraged.
Drag and drop of categories is turned off by default and needs to
be turned on using `draggableCategories: true`.
Closes#227
* feat(Status.Core): introduce Utils namespace
This adds a new package for utility related things.
This fixes a bug that was introduced in 01da750899 with a breaking change
where `StatusChatListCategoryItem`'s `clicked` signal would no longer receive
a `mouse` event object.
The reason this is happening is because we've introduced a new `clicked` signal
on `StatusListItem`. The idea was to rely on that within `StatusChatListCategoryItem`,
however, we didn't take into account that the new `clicked` signal in `StatusListItem`
doesn't emit a `mouse` event object.
To fix this issue could either reintroduce the custom `clicked` handler on
`StatusChatListCategoryItem`, or listen to the original `sensor.onClicked` and
`onTitleClicked` signals exposed by `StatusListItem` instead, ensuring the required
`mouse` event data exists.
Fixes#333
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
...
}
```
These properties can be used to determine whether a user has either
interacted with the form control, or changed its value.
It's also used in initial validation to ensure validation is done but
visually, form controls stay untouched.
Closes#327
A single `signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)`
with parameters referring to the first level and second level item is exposed
and replaced multiple signals we had before for the same purpose.
A click on the item's title or whole item emits appropriate `titleClicked` or
`clicked` signal with `titleId` or `itemId` value respectively. `titleId` and
`itemId` may or may not defer from their display values, it's up to logic which
is applied.
This is introduced because of need of the issue-2934.
There's a new `validators` property that can be used to add validators to `StatusInput` instances, which are executed in the same order:
```qml
StatusInput {
text: "Some value"
validators: [...]
}
```
For convenience StatusQ provides some common validation methods, such as `StatusMinLengthValidator`, StatusMaxLengthValidator` and could be extended to other (e.g. email validation etc):
```qml
StatusInput {
text: "Some value"
validators: [
StatusMinLengthValidator { minLength: 3 }
]
}
```
Validators are executed every time the text of the input changes. They are executed in the same order they have been applied, which enables users to create cascading conditions like "First make sure the value is at least 3 characters long, then make sure it matches a certain pattern".
When a validation fails, it sets the validity of the input (`valid: false`) accordingly and optionally exposes additional error information on `StatusInput.errors`:
```qml
StatusInput {
text: "Fo"
onTextChanged: {
if (errors) {
/**
* errors now has the following structure:
* errors: {
* minLength: { minValue: 3, actual: ... }
* }
* Also, `StatusInput` is now `valid = false`
**/
errorMesssage = "Expected " + errors.minLenght.minValue + " but got: "+ errors.minLength.actual; // i18n'able
}
}
validators: [
StatusMinLengthValidator { minLength: 3 }
]
}
```
There can be any number of error objects on the `errors` property, depending on who many validators have been run that failed validation.
Custom validators can be implemented by introducing a new `StatusValidator` type that has to implement a `validate()` function and defines the validators name. The `validate()` function has to return either `true` or `false` depending on whether the value is valid.
Alternatively, the function can return an error object which gets exposed on the underlying input's `errors` property, at which point it's considered invalid as well.
Here's a simple custom validator:
```qml
// HelloValidator.qml
import StatusQ.Controls.Validators 0.1
StatusValidator {
property string name: "hello"
validate: function (value) { // `value` is the `text` value of the underlying control
return value === "hello"
}
}
```
Applying this validators would look like this:
```qml
StatusInput {
text: "Some value"
validators: [
HelloValidator {}
]
onTextChanged: {
if (errors.hello) {
errorMessage = "Doesn't say hello!"
}
}
}
```
Alternatively, validators can return error objects to provide more information about what went wrong. Here's the implementation of the `StatusMinLengthValidator` as an example:
```qml
StatusValidator {
property int minLength: 0
name: "minLength"
validate: function (value) {
return value.length >= minLength ? true : {
min: minLength,
actual: value.length
}
}
}
```
Because validators as components, they can hold any custom properties they need to be configured.
There has been concern that, with this API, error messages need to be potentially defined in multiple places, given that there could be multiple instances of any validator. This is easily solved by having a centralized function figure out what the error message is, given a certain error object:
```qml
StatusInput {
validators: [
StatusMinLengthValidator { minLength: 3 }
]
onTextChanged: {
if (errors) {
errorMessage = getErrorMessage(errors) // this function is provided by global or elsewhere
}
}
}
```
Closes#298
Prior to this commit, setting `charLimit` on `StatusInput` would only have a visual effect
(rendering the char limit), however it wouldn't actually enforce this limit.
This was by intended behaviour, because we wanted to leave some room
for possible validators to kick in (for example a max length validator).
If however the char limit is enforce, such a validator would never kick in.
There seems to be consensus in the team that the limit should be enforced though.
This commit enables that.
The menu has a CloseOnReleaseOutside policy and so it
was closing and immediately re-opened when the kebab icon
was clicked since it's outside the menu area and also was
calling the popup function of the menu. Added dummy bool
property to detect whether the menu is already closed and
not open it again
Closes#308
There's some usage specific color being added to the chat input (which doesn't live in
StatusQ yet). To make sure we don't lose that change, I'm adding the new
colors to StatusQ theming system and have Status Desktop use it for the time being
until `StatusChatInput` is moved to StatusQ anyways.
This extends the popup menu to accept image or icon configurations a la `StatusIconSettings`
and `StatusImageSettings` in menu items, as well as nested menus.
Usage:
```qml
StatusPopupMenu {
StatusMenuItem {
text: "Custom Image icon"
image.source: // image source
}
StatusMenuItem {
text: "Custom identicon icon"
image.source: // identicon source
image.isIdenticon: true
}
StatusMenuItem {
text: "Custom letter identicon"
iconSettings.isLetterIdenticon: true
iconSettings.background.color: "red"
}
}
```
Few things to note:
- Because `StatusMenuItem` is an `Action` type, we can't extend its `icon` property,
so we have to introduce our own (`iconSettings`) which can be of type `StatusIconSettings`
- Where possible, `StatusPopupMenu` will prefer `iconSettings.[...]` over `icon.[...]`,
which means, both would work: `icon.name` and `iconSettings.name`.
This is for consistency's sake. Consumers can switch completely to `iconSettings` if desired.
- When `isLetterIdenticon` is true, `iconSettings.background.color` must be set, similar
to how it work in any other StatusQ component that makes use of this configuration type.
Closes#263
This component can be used to group different sections within a popup menu.
Usage:
```qml
StatusPopupMenu {
StatusMenuItem {
text: "One"
icon.name: "info"
}
StatusMenuHeadline {
text: "Some text"
}
StatusMenuItem {
text: "Two"
icon.name: "info"
}
}
```
There's cases where the arrow on the tooltip needs to be repositioned, for example
when the tooltip doesn't fit into the viewport anymore but is centered below a button.
This adds a `StatusModalDivider` to the header and footer so they don't
have to be put into `content` and therefore won't scroll out of the viewport
if the content exceeds the modal height.
The footer divider is only rendered when there's indeed action buttons
provided.
Closes#265
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
This adds support for letter identicons by using the `icon.isLetterIdenticon`
flag:
```qml
StatusListItem {
title: "Some name"
icon.isLetterIdenticon: true
icon.background.color: "orange"
}
```
Closes#239
Adding picker button
* As an example it opens Qt's ColorDialog, as soon as
a color is selected there, the button is colored
with that. Final color picker to be implemented in
a seperate task.
Also minor improvements in main.qml and sandbox.pro
Closes#202
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
This property enables users to pass as factory function to `StatusChatList`
component that determines the profile image of a given chat id.
Usage:
```qml
import StatusQ.Components 0.1
StatusChatList {
...
profileImageFn: function (id) {
// `id` is the model id of the current chat item iterator
return ... // has to return a profile image url
}
}
```
In addition to this property, this commit also makes the component
expect an optional `model.identityImage` in case it's already provided.
That way, `profileImageFn` can be omitted.
Closes#174
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
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.
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
This uses the newly introduced `filterFn` in `StatusChatList` to hide chat items
that don't belong to a given category.
It also optionally exposes the `categoryId` on the provided popup menu, so it has
access to it inside menu item triggers.
Chat lists can belong to a category inside of communities, so they should
hold a property `categoryId` that represents that. In addition,
this commit introduces a `filterFn` function that can be used to conditionally
show/hide chat list items.
Closes#154
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
This turned out to be a bug. `model.count` isn't defined on `Repeater`
types.
Also, set `ScrollView` height to `0` if there are not community
tab buttons. This is needed because the columns implicit height
comes with spacing, resulting in some height.
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
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
These properties are needed to enable more control over how a list
item implementation can look like.
Content children are exposed as follows:
```qml
StatusListItem {
statusListItemTitle.[...]: ... // StatusBaseText
sensor.[...]: ... // MouseArea
rightPadding: ... // default 16
leftPadding: .. // default 16
}
```
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
As discussed in #109, when using the `rotation` property of `StatusIcon`
it seems to just mirror the underlying image source.
It turns out that using `rotation` on the image source is enough to have
the `ColorOverlay` rotate as well. Adding a `rotation` to the overlay will
rotate the source that's already rotated, resulting in a mirrored result.
To fix this, we're removing the additional `rotation` from the overlay.
Fixes#109
This is a component to easily render two panel layouts used in different
view of Status Desktop. Designed to be used with `StatusAppLayout`
Usage:
```qml
import StatusQ.Layout 0.1
StatusAppLayout {
...
appView: StackView {
anchors.fill: parent
initialItem: Component {
StatusAppTwoPanelLayout {
leftPanel: Component {...}
rightPanel: Component {...}
}
}
}
}
```
Closes: #78
`StatusBadge` uses a border with same color as its underlying component
to create "fake space" (see `StatusNavTabButton`).
The color depends on the parent component background and its state,
which the `StatusBadge` doesn't know about by itself, so the border color
has to be set explicity whereever it's desired.
This commit introduces (default) colors for the border based on where
badge is used.
This is a settings object to complement the existing `StatusIconSettings`.
Some components, like `StatusRoundIcon` need to be able to configure the
surroundings of the icon their rendering.
In such cases, `StatusIconBackgroundSettings` expose an API that give consumers
a way to configure things like background color, width, height and radius.
This introduces the brand new `StatusChatListItem` which can be used
to render channels, one-to-one chats and community channels in Status
applications.
The component can be used as follows:
```qml
import Status.Components 0.1
StatusChatListItem {
name: "channel-name" // name of channel or user
type: StatusChatListItem.Type.PublicChat // GroupChat | CommunityChat | OneToOneChat
image.source: "profile/image/source" // uses letter identicon instead of not supplied
hasUnreadMessages: true // default `false`
badge.value: 1 // default `0`
muted: true // `default `false`
selected: true // default `false`
onUnmute: ... // signal when unmute icon is clicked
}
```
Closes#65
This is needed to have the underlying SVG's color bleed through and
make use of the image's opacity at the same time.
Using `ColorOverlay` together with (half) transparent colors doesn't
work very well as it makes the underlying SVG color come through,
result in wrong colors.
Applying `opacity` on the image itself cause the `ColorOverlay` to
reduce in opacity as well. So in order to work with transparent
colors, we need a way to turn of the ColorOverlay and work with the
Image's opacity, which is what this change enables.
Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61,
this commit introduces `StatusImageSettings` to expose a consisten image
API across components.
This is just temporary until #40 lands, but for now it allows for
the scrollable content to be grow which is needed to make pages
with many components usable.
This commit introduces a `StatusRoundIcon` component which renders
a `StatusIcon` inside a rounded rectangle.
This is similar to `StatusRoundButton`, just that it isn't a clickable
component.
With these changes, we also introduce a new `StatusIconSettings` config
object that can be used across component that need icon configuration.
The configuration includes the following properties:
- `name` - Name of the icon and used to locate the asset
- `width`
- `height`
Closes#53
This commit introduces a loading indicator for cases where `icon.source`
is set (a custom image/icon) to improve UX of the component.
It also falls back to a letter identicon in case loading the image source
wasn't successful.
Usage:
```
StatusIconTabButton {
icon.source: "SOME URL THAT CAN'T BE RESOLVED"
icon.color: "red" // in case fallback is used, icon.color will be gray by default
name: "Some channel" // used to generated letter identicon as fallback
}
```
Closes#37
This commit introduces a new `StatusAppNavBar` component that can be used
to create a Status application's tab bar for dedicated tab sections such as
chat, profile, wallet etc.
The component is build in a way that it support declarative and imperative usage
where necessary.
In its most simple form, a `StatusAppNavBar` comes with a single tab button
for the chat section. Such button has to be of type `StatusNavBarTabButton`:
```qml
import StatusQ.Layout 0.1
StatusAppNavBar {
navBarChatButton: StatusNavBarTabButton {
icon.name: "chat"
badge.value: 33
badge.visible: true
tooltip.text: "Chat"
}
}
```
In addition, it's possible to specify a list of `StatusNavBarTabButton` for
other sections of the application using the `navBarTabButtons` property:
```qml
StatusAppNavBar {
...
navBarTabButtons: [
StatusNavBarTabButton {
icon.name: "wallet"
tooltip.text: "Wallet"
},
StatusNavBarTabButton {
icon.name: "browser"
tooltip.text: "Browser"
},
StatusNavBarTabButton {
icon.name: "status-update"
tooltip.text: "Timeline"
}
]
}
```
Lastly, when desired to render tabs for Status community, which can grow
in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons`
property that can have a `model` and a `delegate`. The `delegate` should also
be a `StatusNavBarTabButton`:
```qml
StatusAppNavBar {
...
navBarCommunityTabButtons.model: someModel.communities
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
name: model.name
tooltip.text: model.name
anchors.horizontalCenter: parent.horizontalCenter
}
}
```
The amount of community tab buttons can grow as they need until their dedicated
area becomes scrollable, at which point all `navBarTabButtons` will stick to the
bottom of `StatusAppNavBar`.
Closes#18
This component is used to render application tabs in the application
nav bar that is yet to be implemented.
`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.
Usage:
```
StatusNavBarTabButton {
checked: true/false // whether or not it's 'active'
name: "string" // used to render a `StatusLetterIdenticon`
badge.value: 30 // `StatusBadge` is exposed as `badge`
tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```
Closes#17
This moves the `StatusToolTip` component into `StatusQ` and applies some of
the changes done by @jrainville in https://github.com/status-im/status-desktop/pull/2447.
Usage:
```
import StatusQ.Controls 0.1
Button {
text: "Hover me!"
StatusToolTip {
visible: parent.hovered
text: "Top"
orientation: StatusToolTip.Orientation.Top // default: Top
}
}
```
Closes#14
This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight
adjustments:
- removes `iconColor` in favour of `icon.color`
- removes `disabledColor` (main reason being that we don't show disabled buttons of this type)
This button handles various cases:
1. Icon tab buttons - An icon button used in Status Desktop for different sections
2. Letter identicon button - Used for community sections that don't have a profile picture
3. Image icon button - Used for community sections that do have a profile picture
Which type is rendered depends on the configuration of the component as shown
in the usage.
Usage:
```
import StatusQ.Controls 0.1
// When `icon.name` is set, it renders a `StatusIcon` button
StatusIconTabButton {
icon.name: "chat"
}
// When `icon.source` is set, it renders a `StatusRoundedImage` button
StatusIconTabButton {
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}
// When `name` is set, it renders a `StatusLetterIdenticon` button
StatusIconTabButton {
name: "#status"
}
```
Closes#16
This component can be used to render badges with additional information
as seen in the navbar tab buttons and menu items.
Here's how it can be used:
```
StatusBadge {
value: 2
}
```
By default and based on value, StatusBadge will change its width.
If no value is provided, it renders as badge indicator as seen in the profile
tab button.
Closes#15
Status color palettes don't specify a solid black and white that stay
black and white in both themes.
This commit introduces `black` and `white` as solid colors to `ThemePalette`
so they are automatically inherited in all built-in and custom themes.
Turns out, even though we only use one and the same `font.family` name
throughout our components (namely `Inter` and/or `InterStatus`),
`font.weight` properties set to anything other than `Font.Normal` (which is the default),
will not apply unless all font weights have actually been loaded.
Unfortunately we can put a `FontLoader` as direct child in a `ThemePalette`
so we have to make it actual properties.
These properties aren't really used anywhere and merely serve as a place
to load font assets.
Fixes#30
A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.
Usage:
```
StatusLoadingIndicator {
width: 24 // default: 17
height: 24 // default: 17
color: "red" // default: loading asset color
}
```
Closes#7
Abstract text component that defaults to Status' `Inter` font.
Also known as `StyledText` in Status Desktop.
This will close#20 as it doesn't make sense to implement multiple
components for a single text type. Size and weight of text can be configured
on a per usage basis.
Closes#20
This commit introduces the theming story discussed in #3.
Once this lands, we'll have a new namespace `StatusQ.Core.Theme` which
can be used as follows:
```qml
import StatusQ.Core.Theme
StatusLightTheme {}
StatusDarkTheme {}
Theme.palette.[SOME_THEME_PROP] // as spec'ed in #3
```
Closes#3
- pull in required StatusQ changes (see status-im/StatusQ#882)
- simplify the radio buttons handling, no need for a ButtonGroup as they
share the same parent
- the radio buttons have the desired font size as a result ;)
Remove ValidationMode.Always for StatusInputs because by default they
are invalid and validate input when dirty
Remove condition from errorMessage of BackupSeedStepBase as not needed.
Fixes#6825
Requires https://github.com/status-im/StatusQ/pull/858
BREAKING CHANGE: StatusInputs are invalid by default and validate when
dirty.
This partially covers factory reset flow. The part where user is able to select which accounts
wants to remove/keep from/on a keycard will be added later once we add the keycard settings part
for storing those data to a keycard.
Fixes: #6790
- Created new test case with basic create group chat scenario.
- Added specific data folder for `tst_groupChat`.
- Removed deprecated data folder.
- Added dynamic login (depending on the account).
- Added global account information in `suite_status/data` folder.
- Added new group chat validations, title, history texts, members added and send chat message.
- Replaced some ids by objectNames.
- Some improvements in `names.py`.
- Onboarding objects refactor.
Fixes#6444
Fixes#6609
The menu was lost because it used to be set as part of the ScrollView background, but it got changed to a Flickable as part of the fix to the scrolls being not smooth.
Anyway, background doesn't exist on Flickables, so I removed it and moved the MouseArea to the CommunityColumnView instead.
Fixes#6220
Fixes the issue with the mutual contact icon showing when just added.
It also does a huge cleanup of the codebase to remove isContact and replace it with either isAdded, when we care only about if we added, or isMutualContact if we want the contact to be mutual
Also fixes an issue with the MessageContextMenu not reflecting the added state correctly.
Fixes#6306
- update the StatusQ components to the latest commit which includes
the StatusIcon fixes
- switch the LanguageStore and CurrenciesStore to use SVG icons for flags
and money icons instead of PNGs
This is first iteration. Models have been restructured and qml adapted
to the changes.
What is left to be done:
- populate new models with appropriate data (some fields were left
default)
- use new fields in qml, use StatusMemberItem where possible
- fix all #FIXMEs introduced by this commit
iterates: #5951
Added new option add / remove contacts in dropdown and created navigation to modify the loaded component in the toolbar.
Enabled addition of new members into a group chat by the admin.
Enabled removal of members of a group chat by the admin.
Added into `ChatContentView` components related to chat toolbar:
- `StatusTagSelector` and its corresponding logic
- Moved `StatusChatInfoButton` from toolbar to content view.
Added `esc` key event to leave the group chat add / remove panel.
Updated `StatusQ` link.
Closes#5522
- Updated finalise button text with the British spelling.
- Password warning texts in onboard flow updated to correct size.
- Updated StatusQ that fixes button change size after loading.
- Updated position of the message error in the Confirmation Screen.
Fixes#5607, #5339, #5606 and #5610
NOTE: Updated status-desktop compilation error after StatusQ commit 1a5990f24bd3f2aba87ab62880e39113c63ba015
Added currency picker into `LanguageView.qml`.
Added `category` and `imageSource` property to existing `CurrenciesStore.qml`. Renamed `code` to `shortName`.
Added `currenciesModel` property to `WalletStore.qml`.
Added wallet store into `LanguageView.qml` in order to link to the currencies model.
Added some tokens in the currencies store.
Made wallet and any currency related UI code that uses current currency use the new Display Currency value.
Removed no longer used wallet/settings related files.
Closes#5385
Renamed setting section "Language" to "Language & Currency".
Updated link to StatusQ - Needed new `StatusListPicker` component.
Added language model in `LanguageStore` and created first view approach for `Language` setting.
Added temporal confirmation dialog for Linux OS (since it is currently needed to restart the app to apply changes).
Removed no longer used files.
Closes#5384
This replaces the self-built components for the user list with StatusQ's
list item component and also addresses some of the quirks that existed in the UI
related to that original component.
The user list is now responsive and properly aligned.
**This depends on StatusQ v0.18.0**
This fixes the base button in the favorites modal by replacing the legacy
`Input` component with StatusQ's `StatusInput` and `StatusButton` components.
It also updates the validation mechanism to use the one provided by StatusQ.
The `height` of the modal has been adjusted due to its content growing when
validation errors are shown.
This will go away as soon as we replace `ModalPopup` with `StatusModal`.
Fixes#3977
- Display loading indicator on login when mailserver messages are requested
- Fix bug where the mailserver that's selected as soon as you login is disconnected while being still in the process of connecting instead of waiting until 10s have passed to try connecting to a different mailserver
- Use status-go version that fixes an issue fetching mailserver messages when more than 999 messages are being verified if they're in the cache
Fixes: #3564.
Several UI bug fixes have been made for the gif widget:
1. Star now only appears once the gif is hovered
2. Default hover star colour is “grey”
3. Once the star is hovered, the star turns yellow
4. If the gif is favourited, the star fills in yellow
5. Removed square border around the gif
6. Added invisible padding around the star to increase the mouse surface area for hover/click
7. Added tooltip to the star for adding/removing from favourites
NOTE:
1. An initial attempt at changing star state based on gif thumb hover and star hover proved unsuccessful. Changing visibility of the star had to depend on both the hover state of the thumb AND the star — relying on only the thumb hover caused a flicker.
2. Relying on the local hover state of the star and the thumb hover state caused inconsistencies where the hover state of the star would become true after not being hovered. I’m still unsure as to why this was happening. A workaround was to create a signal to a HOC as to the last hovered gif id. From there, we could rely on matching `model.id` to the last hovered gif id in the HOC.
When StatusQ switched to using `DelegateModel` in `StatusChatList` to enable drag and drop,
we lost the API `itemAt` which was previously exposed via the `Repeater` that was aliased as
`chatListItems`.
StatusQ now exposes `statusChatListItems` additionally so we can still access `model.itemAt`
which is used in this commit.
The only reason this is done here though, is because we need to update the profile picture of
contacts when we get a contact changed signal. Ideally, we handle contact changes including the
profile picture entirely in the backend and have it then just rerender the screen (instead of
using a `Connection`).
Fixes#3328
Adapted the bookmark list to a grid view to accomodate items when the list gets long.
Max column size is 7 and in case screen cannot show 7 columns it will flow to the next row.
Also added ideinticon for a website with no icon
Fixed the issue of DApps launching on all new tabs.
fixes#2009
Updated offset of the notification tooltip arrow based on if the members list is visible. The arrow should be in center when member list is visible else it should be right aligned as there is no place on the window
fixes#3102
Searching messages by some term for a specific channel is added on the side of status-go and an
appropriate part on the side of nim is developed accordingly.
Fixes: #2912
Searching messages by some term for a specific channel is added on the side of status-go and an
appropriate part on the side of nim is developed accordingly.
Fixes: #2912
There was a change in StatusQ that introduced dividers for modal footers
and headers, so we don't need to put them in the content manually anymore.
This commit removes the no longer needed ones.
This commit refactors the `CommunityProfilePopup` to use `StatusModal`. Since it's made of
various popup content components, it also updates the memberlist, the overview and the
invite friends view, so it doesn't break the UI along the way.
Closes: #2885, #2887, #2888
This integrates the StatusQ Theming system and updates the selected
theme based on existing APIs, allowing it to live side by side next
to the legacy theming system.
Closes#2687
This commit does a couple of things:
- add StatusQ as a dependency (https://github.com/status-im/StatusQ)
our emerging component library
- updates the rcc generation script to follow symlinks as well
- add qrc:/./StatusQ/src as import path
At the time of creating this commit `StatusQ` provides only the StatusIcon
component, but more will be added in the future.
Sale Djenic
Alexandra Betouni
Pascal Precht
Noelia
Noelia
Khushboo Mehta
Boris Melnik
Anthony Laibe
Jonathan Rainville
Anastasiya S
Khushboo-dev-cpp
Eric Mastro
Eric Mastro
Alexandra Betouni
RichΛrd
B.Melnik
Iuri Matias
Boris Melnik
Michał Cieślak
Lukáš Tinkl
Michal Iskierko
Patryk Osmaczko
PavelS
MishkaRogachev
Stefan
Igor Sirotin
Igor Sirotin
Noelia Santos
