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
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
- pull in required StatusQ changes (see status-im/StatusQ#882)
- simplify the radio buttons handling, no need for a ButtonGroup as they
share the same parent
- the radio buttons have the desired font size as a result ;)
Remove ValidationMode.Always for StatusInputs because by default they
are invalid and validate input when dirty
Remove condition from errorMessage of BackupSeedStepBase as not needed.
Fixes#6825
Requires https://github.com/status-im/StatusQ/pull/858
BREAKING CHANGE: StatusInputs are invalid by default and validate when
dirty.
B.Melnik
Pascal Precht
Michał Cieślak
Lukáš Tinkl
Michal Iskierko
Alexandra Betouni
Patryk Osmaczko
Khushboo Mehta
PavelS
MishkaRogachev
Noelia
Jonathan Rainville
Stefan
Igor Sirotin
