Commit Graph

142 Commits

Author SHA1 Message Date
Sale Djenic 2ee91475e5 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-02-01 11:10:09 +01:00
Alexandra Betouni b632c712c1 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-02-01 08:45:46 +01:00
Noelia c5a605bf73
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-01-28 15:29:29 +01:00
Noelia 626695da25
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-01-24 10:59:33 +01:00
Khushboo Mehta ea9556948b 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-01-21 11:41:58 +01:00
Alexandra Betouni 0056df517d refactor: refactored/cleaned up sandbox app
Grouped QML files by pages, controls and demo app
related stuff
2022-01-19 16:22:52 +01:00
Alexandra Betouni 55901cf0a3
fix(build): broken MacOS build (#533)
moved DESTDIR in sandbox.pro above
copydata command as it was breaking
the build process on MacOS
2022-01-19 00:45:21 +02:00
Noelia 35d12f444d
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-01-14 20:18:57 +01:00
Boris Melnik 14ab4ce52d fix(build): Windows build 2022-01-14 16:24:19 +01:00
Khushboo Mehta 8d2121ade6 fix(StatusImageWithTitle): Fix position of the edit title button 2021-11-30 13:58:27 +01:00
Khushboo Mehta 2040d0f857 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
2021-11-16 16:08:52 +01:00
Pascal Precht d301b94c70 feat(StatusQ.Platform): introduce StatusMacNotification component 2021-10-29 10:38:51 +02:00
Pascal Precht ea9a560277 feat(StatusQ.Controls): introduce `StatusWalletColorSelect` control
Usage:

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

```

Closes #467
2021-10-28 09:15:40 +02:00
Pascal Precht 597ae19242 feat(StatusQ.Controls): introduce `StatusWalletColorButton` component
Usage:

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

Closes #466
2021-10-27 17:59:50 +02:00
Pascal Precht 4cc0d2bbca feat(StatusQ.Controls): introduce StatusChatCommandButton
Usage:

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

Closes #429
2021-10-26 14:26:42 +02:00
Pascal Precht 4bcd89b38a feat(StatusQ.Controls): introduce `StatusTabBarIconButton` component
Usage:

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

Closes #428
2021-10-26 14:26:30 +02:00
B.Melnik ab9ab2497b fix(Spellchecking): Add check for hunspell existence 2021-10-25 11:59:50 +02:00
Khushboo Mehta 1452748331 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
2021-10-22 11:02:05 +02:00
Khushboo Mehta 71fbdef164 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.
2021-10-19 08:04:00 +02:00
B.Melnik e1b0f2dc9a feat: Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors 2021-10-18 09:46:22 +02:00
Pascal Precht bdd699557d 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
2021-10-15 11:04:22 +02:00
Pascal Precht 9fdc9aeaa3 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
2021-10-15 11:03:31 +02:00
Pascal Precht 6789446df3 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
2021-10-15 11:02:41 +02:00
Pascal Precht 5e15cc49f6 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
2021-10-15 11:02:28 +02:00
Pascal Precht 6e10959e40 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
2021-10-15 11:00:30 +02:00
B.Melnik 5043b0b625
feat(StatusModal): Add edit avatar button
Part of https://github.com/status-im/status-desktop/issues/3734
2021-10-15 10:49:40 +02:00
Khushboo Mehta dce45c2ff3 fix: Sandbox doesn't build on Linux machines
fixes #423
2021-10-08 08:37:01 +02:00
Khushboo-dev-cpp d9da5bdc1d
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
2021-09-29 15:22:23 -04:00
B.Melnik 3e24b71075 feat(StatusSpellcheckingMenuItems): Add spellchecking menu
Closes: #398
2021-09-20 08:52:06 +02:00
B.Melnik 1d12d222f3 feat(Spellchecking): Add dictionaries
Closes: #400
2021-09-16 15:37:59 +02:00
B.Melnik c65f80d22e feat(Spellchecker): Add Spellchecker class
Closes: #399
2021-09-14 14:34:25 +02:00
B.Melnik f9457ef311 feat(Spellchecking): Add huspell dependency
Closes: #397
2021-09-14 14:33:53 +02:00
Pascal Precht 019471c804 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
2021-09-13 09:56:24 +02:00
Pascal Precht 1a23cc1912 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" : ""
}
```
2021-09-13 09:55:09 +02:00
Khushboo Mehta 718171fd7b 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
2021-09-08 13:37:03 +02:00
Pascal Precht eabc62f796 fix(StatusModal): don't reserve header subtitle space
Closes #378
2021-09-08 11:21:18 +02:00
Alexandra Betouni d648230d79 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
2021-09-06 14:50:51 +02:00
Khushboo Mehta 8a94fb5412 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
2021-09-06 11:01:13 +02:00
Khushboo Mehta f3ab4ce9c9
feat(StatusExpandableSettingsItem): Added new component for wallet settings
Also added a page in the sandbox to demonstrate its usage.
2021-09-03 10:55:27 +02:00
Pascal Precht d449f0e903
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
2021-09-03 10:45:45 +02:00
B.Melnik 4a6800ed77
refactor(StatusModal): Remove custom content property
BREAKING CHANGES:
- `content` property removed
- `Loader` inside StatusModal removed
- default `contentItem` property should be used now

Closes: #306
2021-09-02 11:06:32 +02:00
Pascal Precht 0a4d3860ea 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.
2021-08-31 13:48:28 +02:00
Pascal Precht a963ef80c8 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.
2021-08-31 11:27:43 +02:00
Sale Djenic 9b3275f327 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`
2021-08-31 11:23:23 +02:00
Pascal Precht 28e514f927 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
2021-08-31 10:59:56 +02:00
B.Melnik faca4765f4
feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
2021-08-30 09:42:01 +02:00
Pascal Precht 503a07bf5a fix(StatusModal): ensure header and subtitles elide if needed
Closes #256
2021-08-27 23:08:09 +02:00
B.Melnik 7ef61ed3f8 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
2021-08-27 13:39:36 +02:00
Pascal Precht ee5ec7b3db 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.
2021-08-27 09:37:06 +02:00
Pascal Precht a4178bd6dc
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.
2021-08-26 15:33:45 -04:00