Commit Graph

219 Commits

Author SHA1 Message Date
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
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 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
Patryk Osmaczko 8ff0a47be0 feat(StatusQ.Controls): add StatusTokenInlineSelector
Closes: status-im/status-desktop#4937
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
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 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
Anthony Laibe 3363469109 fix(@StatusListItem): Use tags model 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 8f649f1586 fix(build): fix linux build
Fixes #413
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
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 7a517f3ac7 feat(StatusQ): Moving docs outside sandbox
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.
2022-09-21 18:20:06 +02:00
Alexandra Betouni 13d5c24a27 fix(sandbox): Fix results popup component position
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.
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
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
Noelia 4cb28fee12 chore(demoApp): restore DemoApp to have the latest changes from both master and base_bc
Updated DemoApp, main and Models to have the
latest changes from both master and base_bc
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
Alexandra Betouni 0f3d6fccde refactor(sandbox): remove obsolete timeline demo code
This feature is deprecated and shall be removed

Relates to #4177
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
Alexandra Betouni dc9cb8a08a fix: Icon components had wrong color in sandbox app
Icon color in Icons page was broken as setting it
in main.qml was mistakenly removed. Set it back to
Theme.palette.primaryColor1

Closes #538
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
Alexandra Betouni 774b7e44f4 fix(build): broken MacOS build (#533)
moved DESTDIR in sandbox.pro above
copydata command as it was breaking
the build process on MacOS
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
Boris Melnik 05d0705664 fix(build): Windows build 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 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
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 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
B.Melnik 75d0382e97 fix(Spellchecking): Add check for hunspell existence 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
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
B.Melnik 3f9f3d5b15 feat: Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors 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
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 c86d1d63df fix: Sandbox doesn't build on Linux machines
fixes #423
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 79769c165e feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2022-09-21 18:20:05 +02:00
B.Melnik 540cd79618 feat(Spellchecking): Add dictionaries
Closes: #400
2022-09-21 18:20:05 +02:00
B.Melnik b9b4ecae21 feat(Spellchecker): Add Spellchecker class
Closes: #399
2022-09-21 18:20:04 +02:00
B.Melnik 556de60a8d feat(Spellchecking): Add huspell dependency
Closes: #397
2022-09-21 18:20:04 +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 de776e4567 feat(StatusValidator): allow validators to provide default `errorMessage`
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" : ""
}
```
2022-09-21 18:20:03 +02:00
Khushboo Mehta 5c5d782605 feat(StatusExpandableItem): Refactored the StatusExpandableSettingsItem to support different types
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
2022-09-21 18:20:03 +02:00
Pascal Precht dc96cf04a9 fix(StatusModal): don't reserve header subtitle space
Closes #378
2022-09-21 18:20:03 +02:00
Alexandra Betouni faea959d63 feat(StatusInput): Introduced secondaryLabel property
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
2022-09-21 18:20:03 +02:00
Khushboo Mehta 9bb00e43a2 feat(StatusModal): Add popup menu support for StatusModal
Added logic to support a popup menu to be launched from the StatusModal header.
Added an example in sandbox to demonstrate its usage.

fixes #374
2022-09-21 18:20:03 +02:00
Khushboo Mehta 1398b3c9d5 feat(StatusExpandableSettingsItem): Added new component for wallet settings
Also added a page in the sandbox to demonstrate its usage.
2022-09-21 18:20:03 +02:00
Pascal Precht 4c661109c6 feat(StatusQ.Controls): introduce StatusSwitchTabBar and StatusSwitchTabButton
This commit adds two new components to the StatusQ.Controls module:

- StatusSwitchTabBar
- StatusSwitchTabButton

Usage:

```qml
StatusSwitchTabBar {

    StatusSwitchTabButton {
        text: "Tab 1"
    }

    StatusSwitchTabButton {
        text: "Tab 2"
    }

    StatusSwitchTabButton {
        text: "Tab 3"
    }
}
```

Closes #365
2022-09-21 18:20:03 +02:00
B.Melnik cd72ef5f38 refactor(StatusModal): Remove custom content property
BREAKING CHANGES:
- `content` property removed
- `Loader` inside StatusModal removed
- default `contentItem` property should be used now

Closes: #306
2022-09-21 18:20:03 +02:00
Pascal Precht 1af17548ba feat: introduce bigger versions of navbar icons
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.
2022-09-21 18:20:03 +02:00
Pascal Precht 4d54a9347f feat(StatusDescriptionListItem): introduce support for `value`
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.
2022-09-21 18:20:03 +02:00
Sale Djenic 07540b2463 refactor(StatusSearchPopup): change expected search model shape
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`
2022-09-21 18:20:03 +02:00
Pascal Precht 7cf893113b feat(StatusModal): add ability to set elide config of header titles
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
2022-09-21 18:20:03 +02:00
B.Melnik aec06b41d4 feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
2022-09-21 18:20:03 +02:00
Pascal Precht 4c5b8a79d6 fix(StatusModal): ensure header and subtitles elide if needed
Closes #256
2022-09-21 18:20:03 +02:00
B.Melnik 378101fa31 fix(StatusChatInfoButton): Add self-calculated implicitWIdth and elide to texts
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
2022-09-21 18:20:03 +02:00
Pascal Precht dfcf6e07f1 fix(StatusListItem): don't set width on title item
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.
2022-09-21 18:20:03 +02:00
Pascal Precht cebfe60d50 feat(StatusChatListAndCategories): add drag and drop support for cate… (#349)
* 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.
2022-09-21 18:20:03 +02:00
B.Melnik 85ee81cfa3 feat(StatusChatList): Add drag and drop support of list items
This implements drag and drop capabilities of chat items within a `StatusChatList`.
The commit introduces a `DelegateModal` to visually reorder chat items
when they're being dragged and dropped onto a `DropArea`.

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

```qml
StatusChatList {

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

StatusChatListAndCategories {

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

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

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

```qml
StatusChatList {
    draggableItems: true
    ...
}
```
2022-09-21 18:20:03 +02:00
Sale Djenic 9396bd208c feat(StatusSearchPopupMenuItem): New APIs resetSearchSelection and setSearchSelection
New methods added `resetSearchSelection` and `setSearchSelection` for resetting
and setting selected location.
2022-09-21 18:20:03 +02:00
Sale Djenic ca7d17ffc6 feat(StatusSearchPopupMenuItem): new API
Status Menu item received new value property.
2022-09-21 18:20:03 +02:00
Sale Djenic 92757be8fd fix(StatusSearchLocationMenu): typo fix
Fixed a typo in StatusSearchLocationMenu.locationModel
2022-09-21 18:20:03 +02:00
Sale Djenic b1a871cd37 feat(StatusListItem): introduce itemId and titleId properties and their handlers
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.
2022-09-21 18:20:03 +02:00
Pascal Precht 2d0febcaae feat(StatusInput): introduce new validator pipeline
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
2022-09-21 18:20:03 +02:00
Alexandra Betouni 11071a903e feat(StatusQ.Popups) Adding SearchPopup component
Closes #264
2022-09-21 18:20:03 +02:00
Alexandra Betouni dec0083793 fix(StatusAppThreePanelLayout): limit right panel width to 300px
Also added handle in DemoApp as well as hiding text when in minimum
width for right and left panels
2022-09-21 18:20:03 +02:00
Pascal Precht 567dab012e chore(sandbox): make app wider due to minimum layout width
There have been minimum layout widths introduced lately which break the
sandbox app's UI. This commit makes it wider by default so this doesn't happen
2022-09-21 18:20:03 +02:00
Pascal Precht 6a2d3cc80f feat(sandbox): make use of `StatusInput` in chat view 2022-09-21 18:20:03 +02:00
Pascal Precht 53f1baac88 feat(StatusBaseInput): add icon support
Usage:

```qml
StatusBaseInput {
    icon.name: "..."
}
```

Closes #242
2022-09-21 18:20:03 +02:00
Pascal Precht fca3386cec feat(StatusInput): implement error message and charlimit APIs
Usage:

```qml
StatusInput {
  label: "Fieldname"
  charLimit: 30
  errorMessage: "Some error occured"

  input.valid: false
  input.text: "Some invalid value"
  input.valid: false
}
```

Closes #289, #290
2022-09-21 18:20:03 +02:00
Pascal Precht e25fcf79f9 feat(Controls): introduce `StatusInput`
`StatusInput` is a wrapper around `StatusBaseInput` to provide additional
component composition for labels, error messages and alike

Closes #288
2022-09-21 18:20:03 +02:00
Pascal Precht 0ffee3f426 feat(StatusBaseInput): add visual validity state
Closes #287
2022-09-21 18:20:03 +02:00
Pascal Precht e966641ed1 fix(StatusBaseInput): ensure clear button has the correct color
Also only render clear button when input has active focus.

Closes #286
2022-09-21 18:20:03 +02:00
Pascal Precht 9945454a5d chore(sandbox): introduce StatusInputPage 2022-09-21 18:20:03 +02:00
Alexandra Betouni fa8925eba0 feat(StatusQ.Layout): introducing StatusAppThreePanelLayout
Added new component to support a 3 column view

Closes #272
2022-09-21 18:20:03 +02:00
Pascal Precht aadd10c29a fix(StatusListItem): ensure title area wraps text 2022-09-21 18:20:03 +02:00
Pascal Precht c6c9bc6a32 feat(StatusPopupMenu): add support for letter identicons, identicons and images
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
2022-09-21 18:20:03 +02:00
Pascal Precht 92dd998c4f feat(StatusListItem): support tertiaryTitle
Usage:

```qml
StatusListItem {
    title: ...
    subTitle: ...
    tertiaryTitle: ...
}
```

Closes #275
2022-09-21 18:20:03 +02:00
Pascal Precht 97dbebc8aa feat(StatusModal): introduce support for identicons and letter identicons
Usage:

```qml
StatusModal {

    header.image.isIdenticon: ...

    // or

    header.icon.isLetterIdenticon: ...
    header.icon.background.color: ...
}
```

Closes #269
2022-09-21 18:20:03 +02:00
Pascal Precht 5c74322a50 feat(StatusListItem): add identicon support
Closes #261
2022-09-21 18:20:03 +02:00
Pascal Precht c17383ce9c feat(StatusChatListItem): introduce muted badge visuals
Also ensure title font weight stays `normal` when item is `muted`.

Closes #258, #259
2022-09-21 18:20:03 +02:00