Commit Graph

54 Commits

Author SHA1 Message Date
Mikhail Rogachev 69b5cb1988
feat(StatusCommunityTags): Add community tags component (#718) 2022-06-14 16:23:18 +03:00
Noelia 46cd904ced
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-05-31 11:44:26 +02:00
Mikhail Rogachev 81cbab3f66
feat(StatusColorSpace): impl color space component (#679) 2022-05-24 10:32:40 +03:00
Igor Sirotin 485647d1c3
feat(StatusTabButton): Created component as per design (#684) 2022-05-23 14:29:42 +03:00
Stefan 5f8453659d 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-05-05 17:16:13 +02:00
Noelia 555ad8bea8
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-04-04 12:16:47 +02:00
Khushboo-dev-cpp 428b165198
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-03-11 14:34:21 -05:00
Noelia 1217771fd0
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-02-18 09:25:05 +01:00
Alexandra Betouni b7d6554b80 feat(StatusQ.Components): Adding StatusWizardSteper component
Added StatusWizardStepper component

Also added corresponding page in API documentation

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

Closes #521
2022-02-08 09:36:38 +01:00
Alexandra Betouni 094dee4928
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-02-02 10:26:45 +01:00
Noelia 5497bb3f5f 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-02-02 10:18:03 +01:00
Alexandra Betouni 491f7d5d15 refactor(sandbox): remove obsolete timeline demo code
This feature is deprecated and shall be removed

Relates to #4177
2022-02-01 11:10:09 +01:00
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 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
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
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
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
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
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 faca4765f4
feat(StatusWindowsTitleBar): Add windows title bar
Closes: #200
2021-08-30 09:42:01 +02:00
Pascal Precht e71bd45c55
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
2021-07-26 15:13:04 +02:00
Pascal Precht a1662adead chore(sandbox): introduce StatusInputPage 2021-07-26 15:03:54 +02:00
Alexandra Betouni 51a345866a [#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
2021-07-09 11:16:04 +02:00
B.Melnik e49b58b94d
feat(Popups): Add StatusModal 2021-06-21 13:04:34 +02:00
Pascal Precht 507703af18 feat(Components): introduce `StatusListSectionHeadline`
Usage:

```qml
import StatusQ.Components 0.1

StatusListSectionHeadline {
    text: "Settings"
}
```

Closes #164
2021-06-18 12:12:04 +02:00
Pascal Precht 454e73a838 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
2021-06-16 11:01:22 +02:00
Pascal Precht 3480609f7a
Revert "Revert "feat: can be used on tablets (#146)""
This reverts commit 59b40c0713.
2021-06-15 11:16:22 +02:00
Pascal Precht 59b40c0713
Revert "feat: can be used on tablets (#146)"
This reverts commit 63be014479.
2021-06-14 16:41:28 +02:00
Boris Melnik 63be014479
feat: can be used on tablets (#146)
Co-authored-by: B.Melnik <b.melnik@restream.rt.ru>
2021-06-14 08:26:16 -04:00
Pascal Precht 09a6f418d7 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
2021-06-04 10:15:02 +02:00
Pascal Precht 6083fbb1e9 chore: re-introduce reload button 2021-06-03 16:38:34 +02:00
B.Melnik 26aae6d027 fix: update position of window to center, add traffic lights 2021-06-03 16:38:08 +02:00
Pascal Precht 202fb88654 feat(sandbox): introduce first version of reference app
This reference app serves as a dogfooding ground for StatusQ components.
2021-06-01 10:42:34 +02:00
Pascal Precht 1548212e47 refactor(sandbox): make use of StatusQ to layout sandbox app
Closes #41
2021-05-28 11:57:23 +02:00
Pascal Precht a3fe02d0ce feat(Components): introduce `StatusListItem` component
This introduces a base list item component that is used in many different
places across Status Desktop. The component is configurable and allows for
child component customization.

Usage:

```qml
StatusListItem {
    title: "Title"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    image.source: "..."
    label: "Some label"
}

StatusListItem {
    title: "Title"
    subTitle: "Subtitle"
    icon.name: "info"
    label: "Some label"
    components: [
        StatusButton {
            text: "Button"
            size: StatusBaseButton.Size.Small
        }
        ...
    ]
}
```

Closes #19
2021-05-25 13:52:25 +02:00
Pascal Precht 2f09179fcf
fix(sandbox): make scrollview content height grow with content
This is just temporary until #40 lands, but for now it allows for
the scrollable content to be grow which is needed to make pages
with many components usable.
2021-05-25 12:27:33 +02:00
Pascal Precht 136cd55560 refactor(sandbox): rely on global `Theme` instead of theme prop 2021-05-21 10:14:03 +02:00
B.Melnik c94b801e37 fix: fix crash on removing title bar 2021-05-20 10:48:51 +02:00
Pascal Precht 0dfd39afe2 feat(Layout): introduce StatusAppNavBar
This commit introduces a new `StatusAppNavBar` component that can be used
to create a Status application's tab bar for dedicated tab sections such as
chat, profile, wallet etc.

The component is build in a way that it support declarative and imperative usage
where necessary.

In its most simple form, a `StatusAppNavBar` comes with a single tab button
for the chat section. Such button has to be of type `StatusNavBarTabButton`:

```qml
import StatusQ.Layout 0.1

StatusAppNavBar {
    navBarChatButton: StatusNavBarTabButton {
        icon.name: "chat"
        badge.value: 33
        badge.visible: true
        tooltip.text: "Chat"
    }
}
```

In addition, it's possible to specify a list of `StatusNavBarTabButton` for
other sections of the application using the `navBarTabButtons` property:

```qml

StatusAppNavBar {
    ...
    navBarTabButtons: [
        StatusNavBarTabButton {
            icon.name: "wallet"
            tooltip.text: "Wallet"
        },
        StatusNavBarTabButton {
            icon.name: "browser"
            tooltip.text: "Browser"
        },
        StatusNavBarTabButton {
            icon.name: "status-update"
            tooltip.text: "Timeline"
        }
    ]
}
```

Lastly, when desired to render tabs for Status community, which can grow
in size, `StatusAppNavBar` exposes a list via the `navBarCommunityTabButtons`
property that can have a `model` and a `delegate`. The `delegate` should also
be a `StatusNavBarTabButton`:

```qml

StatusAppNavBar {
    ...
    navBarCommunityTabButtons.model: someModel.communities

    navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
        name: model.name
        tooltip.text: model.name
        anchors.horizontalCenter: parent.horizontalCenter
    }
}
```

The amount of community tab buttons can grow as they need until their dedicated
area becomes scrollable, at which point all `navBarTabButtons` will stick to the
bottom of `StatusAppNavBar`.

Closes #18
2021-05-19 12:00:05 +02:00