Commit Graph

43 Commits

Author SHA1 Message Date
B.Melnik 44b275f23d
feat(StatusRoundedImage): add loading indicator option
Closes #56
2021-05-27 14:53:49 +02:00
Pascal Precht 82e34d64a6 fix(StatusFlatRoundButton): use correct hover color 2021-05-26 15:33:26 +02:00
Pascal Precht 041c11fb94 feat(StatusBadge): introduce `borderColor` and `hoverBorderColor`
`StatusBadge` uses a border with same color as its underlying component
to create "fake space" (see `StatusNavTabButton`).

The color depends on the parent component background and its state,
which the `StatusBadge` doesn't know about by itself, so the border color
has to be set explicity whereever it's desired.

This commit introduces (default) colors for the border based on where
badge is used.
2021-05-26 15:32:59 +02:00
Pascal Precht cb9492abed fix(StatusBadge): use medium font weight for badge text 2021-05-26 15:32:35 +02:00
Pascal Precht 6327566889 feat(Components): introduce StatusNavigationListItem
This introduces the `StatusNavigationListItem` that can be used to render
menu navigation items in secondary panels, such as the profile panel.

Usage:

```
import StatusQ.Components 0.1

StatusNavigationListItem {
    title: "Menu Item"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
}

StatusNavigationListItem {
    title: "Menu Item"
    icon.name: "info"
    badge.value: 1
}
StatusNavigationListItem {
    title: "Menu Item (selected)"
    selected: true
    icon.name: "info"
    badge.value: 1
}
```

Closes #72
2021-05-26 10:28:04 +02:00
Pascal Precht a4e62fb2cf feat(Core): introduce StatusIconBackgroundSettings
This is a settings object to complement the existing `StatusIconSettings`.
Some components, like `StatusRoundIcon` need to be able to configure the
surroundings of the icon their rendering.

In such cases, `StatusIconBackgroundSettings` expose an API that give consumers
a way to configure things like background color, width, height and radius.
2021-05-26 10:26:08 +02:00
Pascal Precht b40d427d88 feat(Components): introduce StatusChatListItem
This introduces the brand new `StatusChatListItem` which can be used
to render channels, one-to-one chats and community channels in Status
applications.

The component can be used as follows:

```qml
import Status.Components 0.1

StatusChatListItem {
    name: "channel-name" // name of channel or user
    type: StatusChatListItem.Type.PublicChat // GroupChat | CommunityChat | OneToOneChat
    image.source: "profile/image/source" // uses letter identicon instead of not supplied
    hasUnreadMessages: true // default `false`
    badge.value: 1 // default `0`
    muted: true // `default `false`
    selected: true // default `false`

    onUnmute: ... // signal when unmute icon is clicked
}
```

Closes #65
2021-05-26 10:22:59 +02:00
Pascal Precht f1e34e39b9
fix(Core): disable StatusIcon ColorOverlay if no color is supplied
This is needed to have the underlying SVG's color bleed through and
make use of the image's opacity at the same time.

Using `ColorOverlay` together with (half) transparent colors doesn't
work very well as it makes the underlying SVG color come through,
result in wrong colors.

Applying `opacity` on the image itself cause the `ColorOverlay` to
reduce in opacity as well. So in order to work with transparent
colors, we need a way to turn of the ColorOverlay and work with the
Image's opacity, which is what this change enables.
2021-05-25 14:15:44 +02:00
B.Melnik 3ecf73ef58
refactor(Controls): make use of newly introduced StatusIconSettings in button controls
Closes #57
2021-05-25 14:10:56 +02:00
B.Melnik ee4a7c8824
fix: hover effect for StatusFlatRoundButton
Closes: #58
2021-05-25 14:05:05 +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 d9529883a5
feat(Core): introduce `StatusImageSettings`
Very similar to what we're doing with `StatusIconSettings` in https://github.com/status-im/StatusQ/pull/61,
this commit introduces `StatusImageSettings` to expose a consisten image
API across components.
2021-05-25 12:28:30 +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 8639e8ccba
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
2021-05-25 12:23:47 +02:00
Pascal Precht 6a92ff6823 fix(Components): add proper foreground color for StatusBadge
Fixes #59
2021-05-25 12:20:39 +02:00
Pascal Precht 9b99d8a957
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
2021-05-21 10:17:53 +02:00
Pascal Precht 1cb0c1d389 fix(StatusRadioButton): ensure control label as correct color
Closes #51
2021-05-21 10:14:30 +02:00
Pascal Precht 136cd55560 refactor(sandbox): rely on global `Theme` instead of theme prop 2021-05-21 10:14:03 +02:00
Pascal Precht 893cd0fdb1
chore(README): add StatusQ.Layout module to readme 2021-05-20 11:23:59 +02:00
B.Melnik c48d345044
chore: add StatusCheckBox
Closes: #10
2021-05-20 11:17:52 +02:00
B.Melnik fc95910552
chore: add StatusRadioButton
Closes #11
2021-05-20 10:56:43 +02:00
B.Melnik 52998d687c
feat: add StatusSwitch
Closes #12
2021-05-20 10:51:30 +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
B.Melnik 91b8d31754 feat:Add buttons components 2021-05-19 10:43:14 +02:00
B.Melnik 8737c06ab8
chore: remove title bar example
Co-authored-by: Pascal Precht <pascal.precht@gmail.com>
2021-05-17 10:39:24 +02:00
Pascal Precht ea118d716e 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
2021-05-07 13:14:35 +02:00
Pascal Precht f3a6c9f4be 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
2021-05-07 13:06:43 +02:00
Pascal Precht f4b5b271a8
fix(README): fix module name in readme docs 2021-05-07 12:58:06 +02:00
Pascal Precht b4b1f472f1 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
2021-05-07 12:56:52 +02:00
Pascal Precht a89e218a9f 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
2021-05-07 12:51:09 +02:00
Pascal Precht 09876c1f67 feat(Components): introduce StatusRoundedImage
A component that renders an image as a circle, given some URL.

Usage:

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

Closes #32
2021-05-07 12:48:34 +02:00
Pascal Precht 996ceb2b68 feat(Core.Theme): expose solid black and white on `ThemePalette`
Status color palettes don't specify a solid black and white that stay
black and white in both themes.

This commit introduces `black` and `white` as solid colors to `ThemePalette`
so they are automatically inherited in all built-in and custom themes.
2021-05-07 12:48:08 +02:00
Pascal Precht 75e8772500
fix(Core.Theme): remove redundant theme properties
This slipped through in #31
2021-05-05 14:22:12 +02:00
Pascal Precht b015531396 feat(Components): introduce StatusLetterIdenticon
This introduces the `StatusLetterIdenticon` component to StatusQ.

Usage:

```
import StatusQ.Components 0.1

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

Closes #28
2021-05-05 14:12:53 +02:00
Pascal Precht 0a88e65224 fix(Core.Theme): ensure all font weight are available
Turns out, even though we only use one and the same `font.family` name
throughout our components (namely `Inter` and/or `InterStatus`),
`font.weight` properties set to anything other than `Font.Normal` (which is the default),
will not apply unless all font weights have actually been loaded.

Unfortunately we can put a `FontLoader` as direct child in a `ThemePalette`
so we have to make it actual properties.

These properties aren't really used anywhere and merely serve as a place
to load font assets.

Fixes #30
2021-05-05 14:12:40 +02:00
Pascal Precht 3ce1138be6 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
2021-05-05 11:47:20 +02:00
Pascal Precht c7d533af02 feat(Core): introduce StatusBaseText component
Abstract text component that defaults to Status' `Inter` font.
Also known as `StyledText` in Status Desktop.

This will close #20 as it doesn't make sense to implement multiple
components for a single text type. Size and weight of text can be configured
on a per usage basis.

Closes #20
2021-05-05 11:23:01 +02:00
Pascal Precht 1d05b8dce0 chore: add usage instructions to readme file 2021-05-05 11:22:40 +02:00
B.Melnik 3528b2ff44
feat: Set up catalog app (sandbox)
Closes #5
2021-05-05 07:55:43 +02:00
Pascal Precht 608fdbdac8 feat: introduce theming capability
This commit introduces the theming story discussed in #3.
Once this lands, we'll have a new namespace `StatusQ.Core.Theme` which
can be used as follows:

```qml
import StatusQ.Core.Theme

StatusLightTheme {}
StatusDarkTheme {}

Theme.palette.[SOME_THEME_PROP] // as spec'ed in #3
```

Closes #3
2021-05-04 21:04:46 +02:00
Pascal Precht eb87aa4bcb chore: move StatusIcon component to StatusQ
Closes #2
2021-05-04 16:56:28 +02:00
Pascal Precht a05b9bdfd4
chore: let the fun begin 2021-04-30 18:23:57 +02:00