Similar to what we did in status desktop under
d0a26a326e
- since Qt 5.xy, hover is not enabled by default for QQC2, so enable it
unconditionally as we are a desktop app anyway
- this fixes several hover effects being broken, mostly for builtin
components like MenuItem and some buttons (eg. the leftmost NavBar)
where we haven't enabled those with `hoverEnabled: true` explicitely
since most of the compilation time is spent on creating the QRC bundle
and the resulting binary is quite huge, advice the `rcc` compiler to add
support for "big resources"
(cf https://doc.qt.io/qt-6/resources.html#embedding-large-files)
Also pass the env $LDFLAGS to qmake (to be able to link e.g. with mold,
which again greatly reduces the time to link the binary)
this leads to 6-10x faster time when recompiling
(Linux, gcc 12.1.1, mold 1.3.0)
BEFORE:
Clean build:
real 0m57,256s
user 1m25,869s
sys 0m40,963s
Incremental build, one file touched:
real 0m54,323s
user 0m54,012s
sys 0m2,934s
AFTER:
Clean build:
real 0m7,276s
user 0m21,001s
sys 0m37,256s
Incremental build, one file touched:
real 0m5,569s
user 0m4,850s
sys 0m0,840s
- Added community banner.
- Added community restrictions / private.
- Modified card background shape.
- Modified logo shape and position.
- Modified text position and size.
- Modified `loading state` card.
- Added `DropShadow` effect.
- Added new icons.
- Added new community images and updated model.
- Added numbers format function.
- Added following new properties: `banner`,`activeUsers` `communityColor`, `isPrivate` and `tokenLogo`.
Closes#692
- Different tag color depending if the entry `isReadonly` or not.
- Tag disabled if the entry `isReadonly`.
- Possibility to show icon if entry contains the proper info.
- Added property `orderByReadonly` to position `isReadonly` entries in the left.
Updated sandbox project examples according to new tag updates.
Closes#694
- Added loader in right component position and removed `StatusChatInfoButton` specific.
- Updated sandbox and added new example in Layouts with another different component than the `StatusChatInfoButton`.
BREAKING CHANGES:
The toolbar now expects a component to be loaded. The previous `StatusChatInfoButton` component has been removed and needs to be passed as a component from outside whenever needed.
Breaking changes in `desktop` will be addressed in: https://github.com/status-im/status-desktop/pull/5823
It includes logo, title, community members, description, loaded, community id, popularity, tags row (that must be replaced to a new StatusQ component `StatusListItemTagRow`.
It also contains `locale` property used to decide the member's number format.
Added loading card.
Added Community Card page (components test) and view (demo app) in sandbox.
Added component documentation.
Part of task: https://github.com/status-im/status-desktop/issues/4936
- `open` property set to `true` by default
- `duration` property added (if set to anything greater than 0, will trigger
close toast signal after `duration` milliseconds)
- `close` signal is now emitted once animation gets completed
Disabled uncheck option if component is configured as single selection mode.
Added binding to reset searcher input text when picker is closed.
BREAKING CHANGE: Renamed `searchText` property for `placeholderSearchText` to control placeholder text in searcher and added / used existing `searchText` property to control searcher input text.
Added property `textPixelSize` to be configurable in `StatusPickerButton`.
Added signal `itemPickerChanged` to be directly notified when an item changes its selected property value.
Updated `selected` property properly in `StatusListPicker`.
Added new property `enableSelectableItem` to highlight an item when hovering.
Some documentation improvements.
It adds the `StatusItemPicker` control and `StatusListPicker` component and its corresponding documentation.
The new selector component is composed by a `StatusButtonPicker` and a drop-down list.
It adds sections in `ListView` by using `category` model property.
It incorporates a searcher in header.
The selector type can be customised as a `StatusRadioButton` or a `StatusCheckbox`.
It adds dynamic selection mechanism.
It adds a dynamic text fit between `name` and `shortName` text components.
It adds a specific page in `sandbox` and some models to play with that.
It extends `StatusPickerButton` to allow more than one type.
Closes#563
* feat(StatusSeedPhraseInput): exposed touch/keys pressed events
Exposed keys.onPressed signal, mouse on clicked signal
as well as tabNavItem to be set in KeyNavigation.tab
when needed
Needed for task https://github.com/status-im/status-desktop/issues/4955
* feat(StatusListItem): Added new tags inline in the StatusListItem (#607)
Co-authored-by: Khushboo-dev-cpp <60327365+Khushboo-dev-cpp@users.noreply.github.com>
* feat: Add emoji support
1. StatusChatListItem (only updated parts already done by Jo)
2. StatusListItem
3. StatusInput
* feat(StatusColorSelectorGrid): Added new widget for color selection as needed in wallet
* fix(StatusInput): on reset, valid should be set to true else error mode is shown even though the user hasnt entered a value
* fix(StatusLetterIdenticon): Removed the clicked event out from the LetterIdenticon and added it to the StatusBaseInput as other places that use the letterIdenticon dont need the mouse area is not needed
Moved `remove` function below remove contact signal
also removed online status badge from CreateChatView
Fixed as well name tags to be adapting on parent's
width and scrolling the list to the end when this is
bigger than the available width. Switcehd to use
nameCountLimit property where needed
It creates `StatusPinInput` control that allows customzing its circle diameter, circle spacing and pin length. It contains a `TextInput` object that will provide the component, input text management like validation rules.
It incorporates a blinking animation when the control is focused and feedback (mouse shape changed) when hovering it.
It adds new page in sandbox to play with `StatusPinInput` control.
It adds component documentation.
Also it creates 2 new `StatusValidator` controls with their corresponding documentation:
- `StatusRegularExpressionValidator` which wraps a QML type `RegularExpressionValidator`.
- `StatusIntValidator` which wraps a QML type `IntValidator`.
Closes#524
Created new control `StatusIdenticonRing` and used in `StatusSmartIdenticon` component.
Added property assignments in sandbox models to display the `StatusIdenticonRing` when needed.
Added first documentation approach for `StatusIdenticonRing` and `StatusIdenticonRingSettings`.
Closes#517
Create `StatusContactVerificationIcons` row component.
Refactor in `StatusMemberListItem`. It now uses `StatusContactVerificationIcons` component.
Refactor in `StatusListItem`. It now contains a Loader for dynamically decide if a row icons component is defined aside the title.
Refactor in `StatusMessageHeader` and `StatusMessage`. They now use `StatusContactVerificationIcons` component.
Closes#542
BREAKING CHANGES:
Removed `titleIcon1Visible` and `titleIcon1Visible` from `StatusListItem`.
Removed `ContactType` enumeration in `StatusMessage`. Now, contact verification type is managed by enum `TrustedType` in `StatusContactVerificationIcons` component.
To generate docs, from doc folder run
/path/to/Qt/installation/bin/qdoc statusq.qdocconf
A folder named "html" will be generated under doc,
open the statusq-index.html to get to the home page.
Fixed alignment when results are being filtered.
If the x position that the popup should be aligned
goes off the screen, the popup appears back on
position 0. Also fixed result list item was not
vertically centered.
Added qdoc conf & source files for each
StatusQ module. Documented StatusBaseText
from StatusQ.Core as an example
To generate docs, from sandbox/docs run
/path/to/Qt/installation/bin/qdoc statusq.qdocconf
A folder named "html" will be generated under sandbox/doc,
open the statusq-index.html to get to the home page.
Closes#550
Added StatusTagSelector component needed for
creating new chat channels, either ono on
one or group based on updated designs on
Figma
Also added corresponding page in API Documentation
Closes#526
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.
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
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 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
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
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
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 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
...
}
```
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
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 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
Khushboo-dev-cpp
Noelia
Alexandra Betouni
Michał Iskierko
Jonathan Rainville
Lukáš Tinkl
Patryk Osmaczko
Lukáš Tinkl
Sale Djenic
Igor Sirotin
Mikhail Rogachev
Boris Melnik
Noelia
Igor Sirotin
mishkarogachev
Khushboo Mehta
Stefan
Stefan
osmaczko
Anthony Laibe
Pascal Precht
Alexandra Betouni