Commit Graph

13 Commits

Author SHA1 Message Date
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 a1662adead chore(sandbox): introduce StatusInputPage 2021-07-26 15:03:54 +02:00
B.Melnik 1321760442
feat(Controls): introduce StatusBaseInput
Usage: The same interface like TextField

Closes: #106
2021-07-08 11:30:31 +02:00
B.Melnik c0ad32a192
feat(Components): Add StatusSlider
Closes: #13
2021-05-28 13:39:32 +02:00
Pascal Precht 8a79918284 feat(Controls): introduce `StatusChatInfoButton`
Usage:

```qml
StatusChatInfoButton {
		title: "Iuri Matias"
		subTitle: "Contact"
		icon.color: Theme.palette.miscColor7 // identicon used as fallback when image source isn't available
		image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
		type: StatusChatInfoButton.Type.OneToOneChat // PublicChat | GroupChat | CommunityChat
		muted: true // default `false`
		pinnedMessagesCount: 1 // default `0`
}
```

Closes: #79
2021-05-28 11:54:50 +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 136cd55560 refactor(sandbox): rely on global `Theme` instead of theme prop 2021-05-21 10:14:03 +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
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 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