Commit Graph

485 Commits

Author SHA1 Message Date
Alexandra Betouni a5da508617 feat(StatusBaseInput): Adding component documentation (#631)
Part of #616
2022-09-21 18:20:09 +02:00
Noelia 093649b867 feat(StatusPasswordStrengthIndicator): Added component documentation (#630)
Added component documentation.

Part of #620
2022-09-21 18:20:09 +02:00
Noelia 340ccf2915 feat(StatusMemberListItem): Added component documentation (#629)
Added component documentation and updated functions to be private.

Part of #620
2022-09-21 18:20:09 +02:00
Noelia 64bb0c35a0 feat(StatusBanner): Added component documentation (#628)
Added component documentation.

Part of #620
2022-09-21 18:20:09 +02:00
Alexandra Betouni a4eaba3de4 feat(StatusTagSelector): Adding component documentation (#623)
Part of #616
2022-09-21 18:20:09 +02:00
Alexandra Betouni 30a7e95460 feat(StatusToastMessage): Adding component documentation (#621)
Part of #616
2022-09-21 18:20:09 +02:00
Alexandra Betouni c8740d77de feat(StatusSeedPhraseInput): Adding component documentation (#617)
Also fixed component's height in demonstration page

Part of #616
2022-09-21 18:20:09 +02:00
Alexandra Betouni c35431f4ee fix(StatusTagSelector): adding wrap mode in text edit (#633)
needed for: https://github.com/status-im/status-desktop/issues/5294
2022-09-21 18:20:09 +02:00
Noelia 84cc9eae73 fix(StatusListPicker/StatusItemPicker/StatusPickerButton): Added some properties / signals (#624)
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.
2022-09-21 18:20:09 +02:00
Pascal Precht 10ccfef8de fix(StatusSeedPhraseInput): don't access input control via `root` 2022-09-21 18:20:09 +02:00
Richard Ramos 708d844c2b fix(StatusSeedPhraseInput): handle 3 characters mnemonics 2022-09-21 18:20:09 +02:00
Boris Melnik 6a7271147d fix(StatusListItem): Show emoji if exist
Part of: https://github.com/status-im/status-desktop/issues/5350
2022-09-21 18:20:08 +02:00
Alexandra Betouni 191c759407 feat(StatusWizardStepper): Adding component documentation (#618)
Part of #616
2022-09-21 18:20:08 +02:00
Anthony Laibe 83955adb6f fix(StatusFloatValidator): Fix value equal to bottom 2022-09-21 18:20:08 +02:00
Patryk Osmaczko 3c855450fb fix: add various fixes/improvements to identicons 2022-09-21 18:20:08 +02:00
Boris Melnik 4ff66d8fd3 feat(assets): Add new icons for community settings
Part of: status-im/status-desktop#4932
2022-09-21 18:20:08 +02:00
Noelia c586b9be1e feat(StatusQ.Components/Controls): New `StatusListPicker` and `StatusItemPicker` selector component / control (#583)
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
2022-09-21 18:20:08 +02:00
Stefan Dunca 9be2de676a Clarify dynamic scoping 2022-09-21 18:20:08 +02:00
Stefan 62b09f047c docs(General): initial proposal on developer documentation and checklists
Developer targeted checklist and reminders to cover the most common source of errors
and tech-debt (maintenance burden).
2022-09-21 18:20:08 +02:00
Alexandra Betouni b3c3a90148 fix(StatusTagSelector): fixing tag selector height (#606)
Fix for https://github.com/status-im/status-desktop/issues/5199
2022-09-21 18:20:08 +02:00
Alexandra Betouni 02b2b591fe fix(StatusSeedPhraseInput): added trim() also when seedWord selected from list (#613)
Fixes issue on Windows where empty spaces are insterted in the input
field together with the word
2022-09-21 18:20:08 +02:00
Jonathan Rainville 55e29b6f67 fix(StatusSeedPhraseInput): remove empty spaces in seed phrase input (#611) 2022-09-21 18:20:08 +02:00
Sale Djenic 4e42de03de fix(@desktop/contacts): placeholder position updated 2022-09-21 18:20:08 +02:00
Alexandra Betouni 59510b8a0a feat(StatusSeedPhraseInput): exposed keys on pressed signal (#599)
* 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>
2022-09-21 18:20:08 +02:00
Noelia f795ced1bd fix(StatusChatListCategory): Selecting the category menu should not toggle the category itself
Closes `status-desktop` issue https://github.com/status-im/status-desktop/issues/4914
2022-09-21 18:20:08 +02:00
Michał Iskierko 164c65e6c4 fix(StatusSearchPopup): Fix cutting text with big font (#604)
Decreasing padding.
Setting loading property default to false.

Fix #5197
2022-09-21 18:20:08 +02:00
Patryk Osmaczko a0246f6a7c fix(StatusInput): add implicitHeight
It makes it work with layouts correctly.
2022-09-21 18:20:08 +02:00
Patryk Osmaczko c6b2a02e0a fix(StatusBaseInput): fix default padding when leftComponent is loaded 2022-09-21 18:20:08 +02:00
Alexandra Betouni 5f012da87f fix(StatusSeedPhraseInput): Increased suggestion match chars to 4 2022-09-21 18:20:08 +02:00
Khushboo Mehta 10520a6f53 fix(StatusInput): Added mising documentation of new properties to StatusInput and StatusModal
Moved the StatusInputWithCursor out of StatusQ as it not needed under StatusQ.
2022-09-21 18:20:08 +02:00
Khushboo Mehta af0acb801c fix(StatusModal): Added support for advanced footer and header as seen in new designs.
It is also backward compatible and is not a breaking change.
2022-09-21 18:20:08 +02:00
Khushboo Mehta 3a58ee8200 feat(StatusInput): Expose errorMessage so that its placement can be controlled from outside 2022-09-21 18:20:08 +02:00
Khushboo Mehta 604ba1b88d fix(StatusListItemTag): Fix for allignment in StatusListItemTag and option to make close button invisible 2022-09-21 18:20:08 +02:00
Khushboo Mehta 3a93f835d2 feat: Added new icon fees 2022-09-21 18:20:08 +02:00
Khushboo Mehta 111d90bcd7 feat(StatusFloatValidator): Used to validate a float variable for
1. Is a valid number
2. Is greater than bottom value
3. Is less than top value
2022-09-21 18:20:08 +02:00
Khushboo Mehta 58250acaf8 feat(StatusInputWithCursor): Extended the StatusInput to support an Input with no background and a blinking custom cursor 2022-09-21 18:20:08 +02:00
Alexandra Betouni 511c1f7d4c fix(StatusTagSelector): move suggestions popup inside component (#598)
Closes #531
2022-09-21 18:20:08 +02:00
Boris Melnik b86678f726 fix(StatusQ.Popups): Replace TextEdit to StatusBaseInput for SearchPopup
Closes: https://github.com/status-im/status-desktop/issues/5059
2022-09-21 18:20:08 +02:00
Patryk Osmaczko 8ff0a47be0 feat(StatusQ.Controls): add StatusTokenInlineSelector
Closes: status-im/status-desktop#4937
2022-09-21 18:20:08 +02:00
Jonathan Rainville 78ce7a6ac0 fix(StatusLetterIdenticon): fix emoji positioning
The emoji wasn't centered correctly on Windows
Fixes #5045
2022-09-21 18:20:08 +02:00
Patryk Osmaczko 957680cb1c fix(StatusBaseInput): apply changes required by StatusSeedPhraseInput 2022-09-21 18:20:08 +02:00
Patryk Osmaczko f2c832e015 refactor(StatusBaseInput): use RowLayout for position management 2022-09-21 18:20:08 +02:00
Noelia ffb7289b9f fix(StatusPasswordStrengthIndicator): Added new `onValueChanged` condition
Added new `onValueChanged` condition if bar value is 0 --> Strength.None.
2022-09-21 18:20:08 +02:00
Alexandra Betouni 36a109421c fix(SeedPhraseInput): Fixing SeedPhraseInput control height
The suggestion list should be showing up to 5 seed
word entries
2022-09-21 18:20:08 +02:00
Alexandra Betouni 18fddf7289 fix(SeedPhraseInput): fix lost focus after typing one character
Relates to: https://github.com/status-im/status-desktop/issues/4955
2022-09-21 18:20:08 +02:00
Jonathan Rainville bdeb0e9c1c fix(StatusChatListItem): add missing import (#585) 2022-09-21 18:20:08 +02:00
Jonathan Rainville d2911c42ab fix(StatusIconSettings): set charactersLen to 1 by default (#581)
This caused a breaking change where components that used to imply 1 charactersLen now showed no character at all because it defaulted to 0.
2022-09-21 18:20:08 +02:00
Jonathan Rainville 66b5b9d34b feat(StatusIconSetting): add emojiSize setting for icons (#579) 2022-09-21 18:20:08 +02:00
Jonathan Rainville dfad051880 fix(StatusContactRequestIndicatorListItem): hide badge when value is 0 (#580)
* fix(StatusContactRequestIndicatorListItem): hide badge when value is 0

* feat(icons): add edit pencil icon
2022-09-21 18:20:08 +02:00
Alexandra Betouni cc50cd1e96 feat(StatusQ/Controls): Adding StatusSeedPhraseInput control
Also added an example in Inputs page

Closes #567
2022-09-21 18:20:08 +02:00
Stefan a7056bb8bf docs(StatusInput): Initial basic docs plus validationMode 2022-09-21 18:20:08 +02:00
Stefan cf97a51fb5 fix(dev): silence qml warnings 2022-09-21 18:20:08 +02:00
Stefan ed4277c543 feat(StatusInput): add mode to ingnore unvalidated content
Add optional feature to StatusInput not to allow typing characters
that are not validated

updates #4961
2022-09-21 18:20:08 +02:00
osmaczko 5d58dc334c Add various of changes required by emojiHash and identiconRing integration (#577)
* chore(StatusIdenticonRing): make ringSpecModel accept array of objects

* chore(StatusLetterIdenticon): add charactersLen and textColor settings
2022-09-21 18:20:08 +02:00
Khushboo-dev-cpp 0b4941966e feat: Add emoji support (#575)
* 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
2022-09-21 18:20:07 +02:00
Jonathan Rainville ae3bb01c10 fix(StatusQ.Validators): fix regular expression test in validator 2022-09-21 18:20:07 +02:00
Anthony Laibe 3363469109 fix(@StatusListItem): Use tags model 2022-09-21 18:20:07 +02:00
Alexandra Betouni 0abfab4674 feat(StatusLetterIdenticon): Added charCount property in StatusLetterIdenticon
For desktop task #4956 the letter identicon displayed inside
the StatusSmartIdenticon should be of 2 characters and not 1.
2022-09-21 18:20:07 +02:00
Noelia 6b7a332d61 feat(StatusPasswordStrengthIndicator): Add new Strength type `None`
Add new Strength type None and its corresponding state.
2022-09-21 18:20:07 +02:00
Anthony Laibe 7b45a1ad16 feat(@StatusListItem): add option for tags 2022-09-21 18:20:07 +02:00
Jonathan Rainville 688b6b2d92 feat(StatusChatListItem): enable assigning emoji to chat item 2022-09-21 18:20:07 +02:00
Anthony Laibe b4194a69e9 feat(StatusQ.Core): add new arrow-left icon 2022-09-21 18:20:06 +02:00
Anthony Laibe dcee33a06d fix(@StatusListItem): fix left padding
When there is an icon, take it into account when calculating the left
padding
2022-09-21 18:20:06 +02:00
Jonathan Rainville ee18ab89dd fix(StatusListItem): add propagateTitleClicks property to StatusListItem
Makes it possible disable the propagation of the mouse event when it's not wanted, for example in the search popup, where if the user clicks the title, we want to show the profile popup, but not navigate to the channel
2022-09-21 18:20:06 +02:00
Alexandra Betouni c5635bb36a fix(StatusTagSelector): Updates and fixes in the component
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
2022-09-21 18:20:06 +02:00
Boris Melnik 9f66a36b69 feat(StatusChatList): Highlight chat item at creation time
Part of: https://github.com/status-im/status-desktop/issues/4767
2022-09-21 18:20:06 +02:00
Noelia c4ede85ed3 feat(StatusPinInput): Introduce `StatusPinInput` control
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
2022-09-21 18:20:06 +02:00
Noelia 0df69a8f51 feat(StatusSmartIdenticon): Add support for color rings in StatusSmartIdenticon (#553)
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
2022-09-21 18:20:06 +02:00
Noelia 3bc3216ba0 feat(StatusContactVerificationIcons): Create new row control that includes mutual connect and trust indicator icons (#559)
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.
2022-09-21 18:20:06 +02:00
Alexandra Betouni 422eb741d4 fix(StatusQ.Popups): removed overlay setting (#557)
A MouseArea was set as an Overlay to the PopupMenu
consuming all clicks outside the component until it
was closed. Removed it as it's not necessary anymore.

Closes https://github.com/status-im/status-desktop/issues/3599
2022-09-21 18:20:06 +02:00
Alexandra Betouni 93b414229b feat(StatusQ) Adding qdoc related files (#555)
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
2022-09-21 18:20:06 +02:00
Patryk Osmaczko f68a70d07a feat(StatusListItem): add highlighted property 2022-09-21 18:20:06 +02:00
Alexandra Betouni 632b5b7267 feat(StatusQ.Components): Adding StatusWizardSteper component
Added StatusWizardStepper component

Also added corresponding page in API documentation

Closes #522
2022-09-21 18:20:06 +02:00
Alexandra Betouni f024831c9b feat(StatusQ.Components): Adding StatusToastMessage
Added StatusToastMessage component, an example page
as well as a demonstration in chat view

Closes #521
2022-09-21 18:20:06 +02:00
Alexandra Betouni 08aced147f feat(StatusQ.Components): Adding StatusTagSelector component
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
2022-09-21 18:20:06 +02:00
Richard Ramos 6de288570c refactor: fix empty categories handling (#544)
* feat(StatusChatListCategory): display item if the model is a category
* fix(StatusChatListAndCategories): do not display categories in StatusChatList
2022-09-21 18:20:06 +02:00
Sale Djenic ad7b5a9ff9 refactor(StatusAppNavBar): `triggerUpdate` function added 2022-09-21 18:20:06 +02:00
Sale Djenic ab835857fb refactor(StatusChatToolBar): open/close handlers get called if they are set for `popupMenu` of `StatusChatToolBar` component 2022-09-21 18:20:06 +02:00
Sale Djenic ce8603b0e1 fix(StatusChatList): unexisting property name for chat item fixed
`StatusChatList` component is able to display:
- chats for Chat section
- channels for Community section
- channels from a category from Community section

in cases 1. and 2. displayed items do not have `parentItemId` property and
it's not used in these cases.
This commit fixes that console error.
2022-09-21 18:20:06 +02:00
Sale Djenic 0f15cb6d5f refactor(StatusChatList): `categoryId` parameter added to `chatItemSelected` signal 2022-09-21 18:20:06 +02:00
Sale Djenic 1529070e24 refactor(StatusChatList): updates due to chat & communities models refactored
Updated Models.qml for chats and communities models to reflect changes due to
refactor in the actual backend.`StatusChatList` and `StatusChatListAndCategories`
components updated accordingly.
2022-09-21 18:20:06 +02:00
Sale Djenic 909b183b12 refactor(StatusAppNavBar): profile nav bar button added
Profile button of type `StatusNavBarTabButton` added to `StatusAppNavBar`
and exposed so it can be optionally set from outside of the component.
2022-09-21 18:20:06 +02:00
Sale Djenic 4ade947921 refactor(StatusAppNavBar): navigation bar displays buttons based on set model
`StatusAppNavBar` component is refactored in order to meet new changes we
have on the backend in the desktop app.
2022-09-21 18:20:06 +02:00
Noelia 2e11b7f203 feat(StatusMemberListItem): Implement `StatusMemberListItem` (#539)
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
2022-09-21 18:20:06 +02:00
Noelia d1525b0b53 feat(StatusQ.Controls): Introduce `StatusPasswordStrengthIndicator`
Create a password strength indicator component with the corresponding variation.

Create a base StatusProgressBar component.

Add new miscColor12.

Closes #528
2022-09-21 18:20:06 +02:00
Khushboo Mehta bd41957c80 feat(StatusMessage): Introducing a new StatusQ Component for Chat Messages
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
2022-09-21 18:20:06 +02:00
Alexandra Betouni e7b9462c84 refactor: refactored/cleaned up sandbox app
Grouped QML files by pages, controls and demo app
related stuff
2022-09-21 18:20:06 +02:00
Noelia 60638305aa feat(StatusBanner): introduce type variants for different banner styles
* 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.
2022-09-21 18:20:06 +02:00
Noelia 10af4c5433 Created new UI component StatusBanner and added into StatusQ/Controls 2022-09-21 18:20:06 +02:00
Khushboo Mehta 7dfd8260a9 fix(StatusBaseInput): Corrects allignment of the placeholder text in the StatusBaseInput. 2022-09-21 18:20:06 +02:00
Khushboo Mehta 5a00101169 fix(StatusChatListItem): This change fixes the issue of the chat list items getting a highlight even when they are not really hovered
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.
2022-09-21 18:20:06 +02:00
Pascal Precht 337779f9a6 feat(StatusModal): introduce `hasCloseButton` property
This property can be used to hide the close button, as there are some
modals that shouldn't allow users to "x" modals away.
2022-09-21 18:20:06 +02:00
Pascal Precht b2da194809 fix(StatusListItem): ensure title is elided 2022-09-21 18:20:06 +02:00
Khushboo Mehta e83ad058c8 fix(StatusImageWithTitle): Fix position of the edit title button 2022-09-21 18:20:06 +02:00
Khushboo Mehta 5f6f311d8d feat(StatusListItem): Expose the Aside text so that it can be modified from the outside 2022-09-21 18:20:06 +02:00
Khushboo Mehta 083d648b05 fix(StatusAppNavBar): Fixed position of profile button on the NavBar 2022-09-21 18:20:06 +02:00
Anthony Laibe d18dfdec03 fix(StatusAccountSelector): Adapt ui to data model changed 2022-09-21 18:20:06 +02:00
Khushboo Mehta 375c76ca1d fix(StatusAssetSelector): Fixed error of crypto balance not updated correctly
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
2022-09-21 18:20:06 +02:00
Khushboo Mehta 7fd7c8a947 fix(StatusListItem): This solves the issue of channel list overlpaing when a category is collapsed.
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
2022-09-21 18:20:06 +02:00
Jonathan Rainville 876c6e99f8 fix(StatusAccountSelector): adapt AccountSelector to new model (#482) 2022-09-21 18:20:06 +02:00
Pascal Precht 5fa646d2eb fix(StatusExpandibleItem): add missing hover indicator in `Secondary` type
Fixes #478
2022-09-21 18:20:06 +02:00
Anastasiya S 817a900fd6 fix(StatusSearchPopup): disable enter and return keys to avoid UI breakage 2022-09-21 18:20:06 +02:00
Alexandra Betouni 77e210fa87 fix(StatusSlider): slider background and handle should not depend on root's height
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
2022-09-21 18:20:06 +02:00
Pascal Precht d1be7973c9 feat(StatusQ.Controls.Validators): introduce `StatusUrlValidator` 2022-09-21 18:20:06 +02:00
Pascal Precht 09e0d8a8b9 feat(StatusBaseButton): introduce `Tiny` size 2022-09-21 18:20:06 +02:00
Pascal Precht b4e2730f3d fix(StatusInput): ensure validator messages are rendered when validators return boolean values
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.
2022-09-21 18:20:06 +02:00
Pascal Precht 2ea3c76bf5 fix(StatusModal): render footer correctly based on `showFooter` flag 2022-09-21 18:20:06 +02:00
Pascal Precht 617ca649b3 feat(StatusQ.Platform): introduce StatusMacNotification component 2022-09-21 18:20:06 +02:00
Pascal Precht 61760e8e54 feat(StatusQ.Controls): introduce `StatusWalletColorSelect` control
Usage:

```qml
StatusWalletColorSelect {
    model: Theme.palette.accountColors
}

```

Closes #467
2022-09-21 18:20:06 +02:00
Pascal Precht 6959ec54aa fix(StatusRoundButton): ensure disabled state uses correct background color 2022-09-21 18:20:06 +02:00
Pascal Precht d8745049da feat(StatusQ.Controls): introduce `StatusWalletColorButton` component
Usage:

```qml
StatusWalletColorButton {
    icon.color: Theme.palette.miscColor1
    selected: true
}
```

Closes #466
2022-09-21 18:20:06 +02:00
Pascal Precht bb3fb252d0 feat(StatusQ.Controls): introduce StatusChatCommandButton
Usage:

```qml
StatusChatCommandButton {
    icon.name: "send"
    icon.color: Theme.palette.miscColor2
    text: "Send transaction"
}
```

Closes #429
2022-09-21 18:20:06 +02:00
Pascal Precht b61a8c45da feat(StatusQ.Controls): introduce `StatusTabBarIconButton` component
Usage:

```qml
StatusTabBarIconButton {
    icon.name: "travel-and-places"
}
```

Closes #428
2022-09-21 18:20:06 +02:00
Alexandra Betouni 3c7b498e74 fix(Popups/StatusMenuItemDelegate) adding checks to avoid undefined errors 2022-09-21 18:20:06 +02:00
Khushboo Mehta 32e69e6a8e feat(StatusSmartIdenticon): Created a new StatusQ componnent to accomodate:
1. A StatusRoundedImage
2. StatusRoundIcon
3. LetterIdenticon

Fallback in case of an error in loading Image to the LetterIdenticon
2022-09-21 18:20:06 +02:00
Pascal Precht c1021977d6 fix(StatusModal): ensure `onEditButtonClicked` signal is emitted
Closes #454
2022-09-21 18:20:06 +02:00
Pascal Precht b85ccbfc23 fix(StatusModal): expose `header.editable` property
Fixes #452
2022-09-21 18:20:06 +02:00
Anastasiya S cec89ef605 chore(StatusChatInfoButton): add object name for pin counter for testing purposes 2022-09-21 18:20:06 +02:00
Anastasiya S ffc4598bc5 chore(StatusChatInfoButton): add object name for testing purposes 2022-09-21 18:20:06 +02:00
B.Melnik f6bbd95f13 chore(ForTests): Add ojectName's for modals 2022-09-21 18:20:06 +02:00
Khushboo Mehta 5ab7c91b44 feat(StatusFlatRoundButton): Update the StatusFlatRoundButton to take over button behaviour from StatusIconButton under ui/shared/status
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.
2022-09-21 18:20:06 +02:00
Pascal Precht d27e067e1d fix: use proper double checkmark icon 2022-09-21 18:20:06 +02:00
Pascal Precht 312800ccb9 fix(StatusBaseButton): introduce missing `highlighted` property 2022-09-21 18:20:06 +02:00
Pascal Precht e2c178ad43 feat(StatusQ.Controls): introduce StatusColorSelector component
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
2022-09-21 18:20:06 +02:00
Pascal Precht b194a1d869 feat(StatusQ.Controls): introduce `StatusAssetSelector` component
This is used for a more complex amount and asset selector component.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAssetSelector {
    assets: ListModel {
        ListElement {
            address: "0x1234"
            name: "Status Network Token"
            value: "20"
            symbol: "SNT"
            fiatBalance: "9992.01"
            fiatBalanceDisplay: "9992.01"
        }
        ListElement {
            address: "0x1234"
            name: "DAI Token"
            value: "20"
            symbol: "DAI"
            fiatBalance: "20"
            fiatBalanceDisplay: "20"
        }
    }
}
```

Closes #442
2022-09-21 18:20:06 +02:00
Pascal Precht 368ede5645 feat(StatusQ.Components): introduce `StatusAddress` component
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
2022-09-21 18:20:06 +02:00
Pascal Precht 9389ee256e feat(StatusQ.Controls): introduce `StatusAccountSelector` component
This commit moves the original `AccountSelector` into StatusQ and makes it
a `StatusAccountSelector`. The API has been preserved. The only difference is
that it's internally relying completely on `StatusQ.Core.Theme` and `StatusQ.Controls`
components instead.

Usage:

```qml
import StatusQ.Controls 0.1

StatusAccountSelector {
    accounts: ListModel {
        ListElement {
            name: "Pascal"
            address: "0x1234567891011"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "1199.02"
        }
        ListElement {
            name: "Boris"
            address: "0x123"
            iconColor: "red"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Alexandra"
            address: "0x123"
            iconColor: "yellow"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
        ListElement {
            name: "Khushboo"
            address: "0x123"
            iconColor: "blue"
            balance: "0"
            walletType: "generated"
            assets: []
            fiatBalance: "0"
        }
    }
}
```

Closes #435
2022-09-21 18:20:06 +02:00
Pascal Precht 03c6da6e9f feat(StatusQ.Controls): introduce `StatusSelect`
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
2022-09-21 18:20:06 +02:00
Pascal Precht ec2aeffc55 feat(StatusQ.Popups): introduce `StatusMenuItemDelegate`
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 {
        ...
    }
}
2022-09-21 18:20:06 +02:00
B.Melnik a0d97fb464 feat(StatusModal): Add edit avatar button
Part of https://github.com/status-im/status-desktop/issues/3734
2022-09-21 18:20:06 +02:00
Khushboo Mehta fb290392b4 fix(StatusChatInfoButton): StatusChatInfoButton takes up entire available width
fixes #432
2022-09-21 18:20:05 +02:00
Khushboo-dev-cpp 315f91d737 feature(StatusSelectableText): Added a selectable text component (#431)
Features:
1. Select text and copy it
2. Custom highlight on selection
3. Highlight on links
4. Support for multiline text
2022-09-21 18:20:05 +02:00
B.Melnik f0004ffc4c fix(StatusSpellcheckingMenuItems): Exact menu items order 2022-09-21 18:20:05 +02:00
Pascal Precht a30cd474d9 fix(StatusSearchPopup): use correct theme color for search result text
This used `Theme.palette.black` before which doesn't work across differen themes.
`Theme.palette.directColor1` is the correct one to use here.
2022-09-21 18:20:05 +02:00
Pascal Precht 86c1f69723 fix(StatusChatList): ensure right click popup opens in correct position
This broke because the emitted `mouse` coordinates where no longer correct
after we've moved the chat list item into a delegate model.
2022-09-21 18:20:05 +02:00
Eric Mastro fd92ad5e28 feat: add star icons (#422) 2022-09-21 18:20:05 +02:00
Eric Mastro 567983b7d8 fix: track category opened state
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.
2022-09-21 18:20:05 +02:00
B.Melnik 79769c165e feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2022-09-21 18:20:05 +02:00
Pascal Precht 48bd006d05 feat(StatusChatList): expose `statusChatListItems` Repeater
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
2022-09-21 18:20:05 +02:00
Pascal Precht 581dd15f14 feat(StatusInput): add support for asynchronous validators
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
2022-09-21 18:20:05 +02:00
Pascal Precht 8e4b5e2c09 feat(StatusInput): introduce `leftPadding` and `rightPadding` properties 2022-09-21 18:20:04 +02:00
Pascal Precht ada657fab6 feat(StatusInput): introduce `reset` API
This can be used to reset text, error message and validity state of inputs
2022-09-21 18:20:04 +02:00
Alexandra Betouni 56212c547a fix(StatusChatListCategoryItem): Disable sensor when chevron clicked
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.
2022-09-21 18:20:04 +02:00
Alexandra Betouni 0c0d9bf919 fix(StatusChatInfoToolBar): Right anchored title in StatusChatInfoToolBar
So that elide mode in text can be activated
2022-09-21 18:20:04 +02:00
Pascal Precht 2bb282bb2c fix(StatusQ.Controls.Validators): fix bug that addressOrEns validator isn't properly exposed in QML 2022-09-21 18:20:03 +02:00
Khushboo Mehta 45dd8147ad feat(StatusExpandableItem): Correct placement of expandable region in tertiary type 2022-09-21 18:20:03 +02:00
Pascal Precht 74a88a70b3 feat(StatusBaseInput): introduce `component` property
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
2022-09-21 18:20:03 +02:00
Pascal Precht 1b5d407e93 fix(StatusCheckbox): give checkbox label proper theme color 2022-09-21 18:20:03 +02:00
Pascal Precht ff549d2822 feat(StatusQ.Controls.Validators): introduce `StatusAddressAndEnsValidator` 2022-09-21 18:20:03 +02:00
Pascal Precht f979011323 feat(StatusQ.Controls.Validators): introduce `StatusAddressValidator` 2022-09-21 18:20:03 +02:00