Commit Graph

271 Commits

Author SHA1 Message Date
B.Melnik 770338a658 refactor(Controls): make use of newly introduced StatusIconSettings in button controls
Closes #57
2022-09-21 18:20:02 +02:00
Pascal Precht fcb6847cc9 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
2022-09-21 18:20:02 +02:00
Pascal Precht efb34ee85a 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.
2022-09-21 18:20:02 +02:00
Pascal Precht 9cbdf4fa97 feat(Components): introduce `StatusRoundIcon` component
This commit introduces a `StatusRoundIcon` component which renders
a `StatusIcon` inside a rounded rectangle.

This is similar to `StatusRoundButton`, just that it isn't a clickable
component.

With these changes, we also introduce a new `StatusIconSettings` config
object that can be used across component that need icon configuration.

The configuration includes the following properties:

- `name` - Name of the icon and used to locate the asset
- `width`
- `height`

Closes #53
2022-09-21 18:20:02 +02:00
Pascal Precht a3525c63e3 feat(StatusIconTabButton): introduce image loading state and fallback
This commit introduces a loading indicator for cases where `icon.source`
is set (a custom image/icon) to improve UX of the component.

It also falls back to a letter identicon in case loading the image source
wasn't successful.

Usage:

```
StatusIconTabButton {
    icon.source: "SOME URL THAT CAN'T BE RESOLVED"
    icon.color: "red" // in case fallback is used, icon.color will be gray by default
    name: "Some channel" // used to generated letter identicon as fallback
}
```

Closes #37
2022-09-21 18:20:02 +02:00
Pascal Precht 9f6f36f571 refactor(sandbox): rely on global `Theme` instead of theme prop 2022-09-21 18:20:02 +02:00
B.Melnik d7db8dc0df chore: add StatusCheckBox
Closes: #10
2022-09-21 18:20:02 +02:00
B.Melnik 96a5b3b55a chore: add StatusRadioButton
Closes #11
2022-09-21 18:20:02 +02:00
B.Melnik f185b892ea feat: add StatusSwitch
Closes #12
2022-09-21 18:20:02 +02:00
B.Melnik 8fdd4f7e20 fix: fix crash on removing title bar 2022-09-21 18:20:02 +02:00
Pascal Precht a1e721bfc3 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
2022-09-21 18:20:02 +02:00
B.Melnik a3c3091c5d feat:Add buttons components 2022-09-21 18:20:02 +02:00
B.Melnik 65991fe559 chore: remove title bar example
Co-authored-by: Pascal Precht <pascal.precht@gmail.com>
2022-09-21 18:20:02 +02:00
Pascal Precht a9df397e71 feat(Controls): introduce StatusNavBarTabButton
This component is used to render application tabs in the application
nav bar that is yet to be implemented.

`StatusNavBarTabButton` is a composition of `StatusIconTabButton`, `StatusToolTip`
and `StatusBadge` and exposes each of these to enable customization.

Usage:

```
StatusNavBarTabButton {
    checked: true/false // whether or not it's 'active'
    name: "string" // used to render a `StatusLetterIdenticon`
    badge.value: 30 // `StatusBadge` is exposed as `badge`
    tooltip.text: "Some tooltip" // `StatusTooltip` is exposed as `tooltip`
    icon.name: "message" // Behaves exactly like `StatusIconTabButton.icon`
}
```

Closes #17
2022-09-21 18:20:02 +02:00
Pascal Precht cc6d28b7ce feat(Controls): introduce StatusToolTip component
This moves the `StatusToolTip` component into `StatusQ` and applies some of
the changes done by @jrainville in https://github.com/status-im/status-desktop/pull/2447.

Usage:

```
import StatusQ.Controls 0.1

Button {
    text: "Hover me!"
    StatusToolTip {
        visible: parent.hovered
        text: "Top"
        orientation: StatusToolTip.Orientation.Top // default: Top
    }
}
```

Closes #14
2022-09-21 18:20:02 +02:00
Pascal Precht 791d3e275a feat(Core.Controls): introduce StatusIconTabButton component
This adds the `StatusIconTabButton` componoent to `StatusQ` with some slight
adjustments:

- removes `iconColor` in favour of `icon.color`
- removes `disabledColor` (main reason being that we don't show disabled buttons of this type)

This button handles various cases:

1. Icon tab buttons - An icon button used in Status Desktop for different sections
2. Letter identicon button - Used for community sections that don't have a profile picture
3. Image icon button - Used for community sections that do have a profile picture

Which type is rendered depends on the configuration of the component as shown
in the usage.

Usage:

```
import StatusQ.Controls 0.1

// When `icon.name` is set, it renders a `StatusIcon` button
StatusIconTabButton {
    icon.name: "chat"
}

// When `icon.source` is set, it renders a `StatusRoundedImage` button
StatusIconTabButton {
    icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
}

// When `name` is set, it renders a `StatusLetterIdenticon` button
StatusIconTabButton {
    name: "#status"
}

```

Closes #16
2022-09-21 18:20:02 +02:00
Pascal Precht b2576f0e5e feat(Components): introduce StatusBadge component
This component can be used to render badges with additional information
as seen in the navbar tab buttons and menu items.

Here's how it can be used:

```
StatusBadge {
  value: 2
}
```

By default and based on value, StatusBadge will change its width.
If no value is provided, it renders as badge indicator as seen in the profile
tab button.

Closes #15
2022-09-21 18:20:02 +02:00
Pascal Precht 50506b40a1 feat(Components): introduce StatusRoundedImage
A component that renders an image as a circle, given some URL.

Usage:

```
StatusRoundedImage {
    image.source: "..." // some url
}
```

Closes #32
2022-09-21 18:20:02 +02:00
Pascal Precht 554400e9d2 feat(Components): introduce StatusLetterIdenticon
This introduces the `StatusLetterIdenticon` component to StatusQ.

Usage:

```
import StatusQ.Components 0.1

StatusLetterIdenticon {
    name: "#status"
}
```

Closes #28
2022-09-21 18:20:02 +02:00
Pascal Precht f999f30d44 feat(Components): introduce StatusLoadingIndicator
A `StatusIcon` that rotates infinitely and can be used for indicating
pending states.

Usage:

```
StatusLoadingIndicator {
    width: 24 // default: 17
    height: 24 // default: 17
    color: "red" // default: loading asset color
}
```

Closes #7
2022-09-21 18:20:01 +02:00
B.Melnik 6c62e1c20b feat: Set up catalog app (sandbox)
Closes #5
2022-09-21 18:20:01 +02:00