Commit Graph

59 Commits

Author SHA1 Message Date
Patryk Osmaczko a50296046d feat: add filtering&sorting example
closes: status-im/status-desktop#6510
closes: status-im/status-desktop#6512
2022-09-21 18:20:12 +02:00
Mikhail Rogachev bd2932594a feat(StatusScrollView): New scrollview component without twitches (#766) 2022-09-21 18:20:12 +02:00
Khushboo-dev-cpp f8b5beb61c feat(StatusCard): Create a new reusbale card component (#731)
closes #582
2022-09-21 18:20:12 +02:00
Noelia e106f93c4d feat(StatusItemSelector): Component improvements
-  Added `popupItem` property
- Replaced `GridLayout` to `Flow`.
- Added add item logic.
- Added operators logic.
- Added basic documentation.
- Added to sandbox.
2022-09-21 18:20:12 +02:00
Patryk Osmaczko 9a076ee49c feat(StatusDialog): introduce StatusDialog
closes: #725
2022-09-21 18:20:11 +02:00
Mikhail Rogachev 529cf9de3a feat(StatusCommunityTags): Add community tags component (#718) 2022-09-21 18:20:11 +02:00
Noelia 7bd9b37792 feat(StatusCommunityCard): First component iteration (#693)
It includes logo, title, community members, description, loaded, community id, popularity, tags row (that must be replaced to a new StatusQ component `StatusListItemTagRow`.

It also contains `locale` property used to decide the member's number format.

Added loading card.

Added Community Card page (components test) and view (demo app) in sandbox.

Added component documentation.

Part of task: https://github.com/status-im/status-desktop/issues/4936
2022-09-21 18:20:10 +02:00
Mikhail Rogachev 290d5cbebc feat(StatusColorSpace): impl color space component (#679) 2022-09-21 18:20:10 +02:00
Igor Sirotin c2c47b6bb7 feat(StatusTabButton): Created component as per design (#684) 2022-09-21 18:20:10 +02:00
Stefan 59fc0a6669 feat(Sandbox): add visual test setup page for StatusImageCropPanel
Other improvements:

- save state for theme switcher and last selected page
- add optional fill all test space for pages

fixes: 5401
2022-09-21 18:20:09 +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
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
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
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
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 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
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
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
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
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
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 aec06b41d4 feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
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 9945454a5d chore(sandbox): introduce StatusInputPage 2022-09-21 18:20:03 +02:00
Alexandra Betouni dd23ef2990 [#202] Added Picker button
Adding picker button
* As an example it opens Qt's ColorDialog, as soon as
  a color is selected there, the button is colored
  with that. Final color picker to be implemented in
  a seperate task.

Also minor improvements in main.qml and sandbox.pro

Closes #202
2022-09-21 18:20:03 +02:00
B.Melnik eab95c1c7b feat(Popups): Add StatusModal 2022-09-21 18:20:02 +02:00
Pascal Precht 2a7c3aded7 feat(Components): introduce `StatusListSectionHeadline`
Usage:

```qml
import StatusQ.Components 0.1

StatusListSectionHeadline {
    text: "Settings"
}
```

Closes #164
2022-09-21 18:20:02 +02:00
Pascal Precht f2de2642ac feat(Components): introduce `StatusChatInfoToolBar` component
Usage:

```qml
import StatusQ.Components 0.1

StatusChatInfoToolBar {
    chatInfoButton.title: "Cryptokitties"
    chatInfoButton.subTitle: "128 Members"
    chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
    chatInfoButton.icon.color: Theme.palette.miscColor6

    popupMenu: StatusPopupMenu {

        StatusMenuItem {
            text: "Create channel"
            icon.name: "channel"
        }

        StatusMenuItem {
            text: "Create category"
            icon.name: "channel-category"
        }

        StatusMenuSeparator {}

        StatusMenuItem {
            text: "Invite people"
            icon.name: "share-ios"
        }
    }
}
```

Closes #141
2022-09-21 18:20:02 +02:00
Pascal Precht 524eb14512 Revert "Revert "feat: can be used on tablets (#146)""
This reverts commit 59b40c0713a9a41bd95bff0f395a796c69e46fa6.
2022-09-21 18:20:02 +02:00
Pascal Precht 9bf98a1ede Revert "feat: can be used on tablets (#146)"
This reverts commit 63be01447930494f2afc61d5212f3c84ee1509e8.
2022-09-21 18:20:02 +02:00
Boris Melnik 7e9a76dbe7 feat: can be used on tablets (#146)
Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>
2022-09-21 18:20:02 +02:00
Pascal Precht 82643816f6 feat(StatusQ.Popups): introduce StatusPopupMenu component
Usage:

```qml
import StatusQ.Popups 0.1

Button {
    onClicked: simpleMenu.popup()
}

StatusPopupMenu {
    id: simpleMenu
    StatusMenuItem {
        text: "One"
    }

    StatusMenuItem {
        text: "Two"
    }

    StatusMenuItem {
        text: "Three"
    }
}
```

Closes #96 #74
2022-09-21 18:20:02 +02:00
Pascal Precht aecbb443de chore: re-introduce reload button 2022-09-21 18:20:02 +02:00
B.Melnik 1acc248c79 fix: update position of window to center, add traffic lights 2022-09-21 18:20:02 +02:00
Pascal Precht 4e25f584cc feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
2022-09-21 18:20:02 +02:00
Pascal Precht cea1d68308 refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
2022-09-21 18:20:02 +02:00