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
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
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
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
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.
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
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
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
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
B.Melnik
Pascal Precht
