`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.
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.
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
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.
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.
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.
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
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
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
User should see `pending` state after he `join`s the community, even if
that community does not require explicit admin approval. That's because
currently, each member has to be accepted by admin, either automatically
or manually. That means, if admin is gone, no one will be ever joined to
community, even if this community states it does not require request to
join.
InvitationBubbleView.qml:
- rework view to use layouts properly
- add missing community identicon
Backend:
- remove local community requests on community join
- propagate SIGNAL_COMMUNITY_MY_REQUEST_ADDED to UI
fixes: #7139
This was never implemented, eventhough a similar approach is used with
the global AppSearch. Expose the method `scrollToMessage(messageId)` so
that it can be called from QML directly.
Fixes#7375
The gif test was manually activating the unfurling, which is no longer
necessary. Now check that enabling gifs will enable tenor unfurling
Also add a test for image unfurling and validate the unfurling image
links components and preview settings.
- fix spacing/padding/margins
- remove MouseAreas, they block hovering the buttons (not needed any
longer thanks to our new QQC2 buttons)
- some minor cleanups
Fixes#7366
A new rule introduced which should provide easier tracking/maintainig
later. The rule says:
- popup contains up to 3 action buttons and one back button (optional)
- if 3 buttons are displayed in the popup then the most left button, but
not back button, always triggers tertiary action, middle button always
triggers secondary action and the most right button always triggers primary
action
- if 2 buttons are displayed, then:
- if one of them is "Cancel" (left button) it should trigger tertiary action
and the other one (right button) should trigger primary action
- if non of them is "Cancel" then the left button triggers secondary action
and the right button triggers primary action
- if single button is displayed, then:
- if it's "Cancel" it triggers tertiary action
- if it is not "Cancel" it triggers primary action
- tertiary action always reffers to the cancel action until otherwise set
- tertiary action will be always triggered by closing popup via keybord
(esc key) or clicking on top right `x` button on the popup
- align the dialog to design
- fix radio button logic (it was possible to uncheck a mutually exclusive
checked button eventhough it's inside the button group, leaving the Unpin
button in an undefined state)
- port to StatusDialog and layouts, dropping a lot of needless code
- remove dead code for passing around the `property Component
pinnedMessagesListPopupComponent`; the popup is being invoked via
`Global.openPopup()`
Fixes#7316Fixes#7315
- Added `Authenticate` flow
- `Setup a new Keycard with an existing account` updated so it includes `Authenticate` flow
from the point where is needed (when migrating a profile keypair)
- We are missing `Unlock Keycard` flow for this one, will be added once it is developed
Also
- fix the other saved addresses that were relying on the order of
buttons and fail after adding the favourite button
- improve the rest of the tests
- improve debug buttons
- extend driver with helper functions
Closes: #6898
Depends on statug-go favourite flag extension and merging of `favourites`
with `saved_address` tables and API
Additional changes:
- Remove duplicate name instead of ESN
Closes: #6546
- `Setup a new Keycard with an existing account` flow improved
- code review comments applied
- Qml part updated due to the latest `StatusListItem` changes in `StatusQ`
Changes done within this commit were required by the latest keycard
library change, where we gave up of sending few signals when we're
running/resuming flow, which were sent before (those were signal notifying
about unplugged reader, card not inserted and card inserted, they are sent
by the keycard lib now only if that is really needed).
- Added flow which covers `Setup a new Keycard with an existing account` from
the keycard settings part (though two sub-flows there are missing, `Unlock Keycard`
and `Authentication` cause we don't have them yet).
- Updated factory reset flow (part of shared module) that it can read and display metadata
from a keycard if they are set, with this update this flow is almost complete, we are missing
`Unlock Keycard` flow for it as well.
- 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 ;)
Enable preview for gifs after enabling the gif functionality
Disable gif functionality if the preview was disabled
Addition fixes
- The gifs weren't checked if all images weren't enabled
- The subdomain wasn't checked for whitelisting if the main domain wasn't enabled
- Image clicking
- Dismiss asking for unfurling was not updating the state
Considerations
- Looked into having the "gif enabled" - "tenor unfurling" relation
embedded in the controller but it would require extensive refactoring
by implementing a data-model for unfurling whitelisted domains
Closes: #6829
the "Recent emojis" was always empty until the user has clicked
additional emoji
loading the recent emojis in `Global.onSettingsLoaded` is too late; it's
executed long before the popup is opened; instead do it at the end of
parsing the categories
- export a non-blurry browsers image from Figma
- bring the whole UI closer to the design
- sllight refactor to user StatusDialog and layouts
Fixes#7169
strip the URL from any HTML tags before trying to open it; Qt sometimes
likes to leave some HTML tags there and that breaks the URL validity
checks further on
Fixes: #7170
Replace Contact component with StatusMemberListItem.
Add missing Nim functions to fill models with onlineStatus.
Adjust components paddings to match design.
Fixes#6985
The test network was toggled twice. The banner was impeding with the wallet setting click. The asset list item was missing the objectName and also checking the balance was not resilient
This adds a feature flag for the discord import tool so we can start
landing individual pieces of the feature without it being fully
implemented.
It also introduces the modal chooser for creating new communities but
it doesn't do anything more than that, as of this commit
Closes#6843
- Added new test case `tst_passwordStrength` in `suite_onboarding` that uses squish screenshot validation.
- Added verification points (mac OS) for some password strength validations, using pixel comparison and some minor percentage of failure / color precision allowed.
Closes#7003
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.
`tst_languageSettings`:
- Feature and basic scenarios definition: Change language by selection and change language by search.
- Added `StatusLanguageScreen` class and related methods to change and validate language.
`SquishDriver`:
- Added support to scroll at a specific list view index.
- Added support to directly type into a focused element.
`settings_names.py`:
- Added support for object names related to `side bar` options.
- Unified some nomenclature related to settings objects.
`LanguageView`:
- Updated to allow registering the change on Linux before the restart popup is shown so the language test can work.
Closes#6903
Note: interaction between clients is not tested here to avoid dependency
on mailserver. When mailserver is mocked more comprehensive tests should
be provided, that is: verify if identity properties are propagated
and read correctly between two different clients.
closes: #6950
`tst_chatFlow`:
- Commented out bc of `mailserver` issues and then weak.
- Added basic test scenario for sending a mention in a public chat with needed validations.
- Added basic test scenario to check a mention cannot be done if it is a non existing user.
`StatusChatScreen` updates:
- Updated join room method to validate the chat is loaded.
- Added methods for doing and verifying a mention.
`SquishDriver` updates:
- Added support in `SquishDriver` to click into a link in a text or label component.
- Minor function renames.
Closes#6879
- Added functionality as experimental advanced view button
feat(CommunitySettings / Permissions): Added welcome page
- Enabled new permissions tab.
- Created welcome page layout.
- Added permissions welcome image.
- Fixed top margin content in `SettingsPanelLayout` to fit designs.
Closes#6036
feat(CommunitySettings/Permissions): Created `new permission` page
- Added `new permission` page.
- Created first card layout.
- Added navigation between `welcome` and `newPermission` views.
- Improvements in base community settings layout pages.
Closes#6037
feat(CommunitySettings/Permissions): `Who holds` tokens dropdown component creation and integration
- Tokens dropdown component creation: main view, operators view and extended view.
- Logic to add new token and change operator.
Part of #6038
Images are updated the way they are the same as those we're using for the light
theme, but now without white background. All in all it does the job till we get
a better images from the design team, specialized for the dark theme.
Fixes: #6823
This partially covers factory reset flow. The part where user is able to select which accounts
wants to remove/keep from/on a keycard will be added later once we add the keycard settings part
for storing those data to a keycard.
Fixes: #6790
Use new status-go function to update group chat details.
Changes in RenameGroupPopup to handle choosing colors and images.
Changes in EditCroppedImagePanel to handle background component.
Issue #5982
Keycard implementation affected onboarding/login flows.
- new user - first run - new keys into keycard
- new user - first run - import seed phrase into keycard
- old user - first run - login importing from keycard
- login the app using keycard
Fixes: #5972
drop a defunct MouseArea that was being used for a context menu which got
removed in the meantime; it breaks clicking inside the TextField
Closes: #5167
- fix initial input focus
- fix texts according to design
- fix TAB keys between the input fields
- fix input fields text and placeholders alignment
- make the community options checkboxes clickable
- adjust margins/spacing according to design
Closes: #6724
Fixes#6251
Adds the "Respond to Contact Request" and "Contact Request Pending" options to the MessageContextMenu
Also fixes some small issues with contact verification where the state of the incoming request was not correct
- Created new test case with basic create group chat scenario.
- Added specific data folder for `tst_groupChat`.
- Removed deprecated data folder.
- Added dynamic login (depending on the account).
- Added global account information in `suite_status/data` folder.
- Added new group chat validations, title, history texts, members added and send chat message.
- Replaced some ids by objectNames.
- Some improvements in `names.py`.
- Onboarding objects refactor.
Fixes#6444
Fixes#6609
The menu was lost because it used to be set as part of the ScrollView background, but it got changed to a Flickable as part of the fix to the scrolls being not smooth.
Anyway, background doesn't exist on Flickables, so I removed it and moved the MouseArea to the CommunityColumnView instead.
- fix system appearance preview being cut off
- bring the panel close to UI design (I haven't changed the common
stuff like headline fonts, overall margins, etc)
Closes: #6623
Users model has to be sorted by online status first, otherwise
`UserListPanel` sections will be duplicated. That's because:
> Note: Adding sections to a ListView does not automatically re-order
the list items by the section criteria. If the model is not ordered by
section, then it is possible that the sections created will not be
unique; each boundary between differing sections will result in a
section header being created even if that section exists elsewhere.
fixes: #6563
Currently there is no need in the app for creating a pass via `CreatePasswordModal`
removed that support from the modal to avoid confusion about its usage.
- startup, login and onboarding modules merged into the single one
- `State` class introduced which is the base class for all states, every state
determines what is the next state in each of 3 possible actions, and what
is the previous state, if it has previous state
- `StateWrapper` class is introduced as a convenient way to expose
`State`'s props and deal with them on the qml side
- startup module maintains states as a linked list and there are few convenient
methods to move through the list `onBackActionClicked`, `onNextPrimaryActionClicked`
`onNextSecondaryActionClicked`, `onNextTertiaryActionClicked`
- redundant code removed
Fixes: #6473
- handle `SOURCES` recursively, rather than spelling all the paths out;
most of them were outdated and some still missing
- let the Python script skip existing translations (in case we need to
manually add plurals)
- updated qml_en.ts as a result of these changes
Stats:
```
Updating '../../ui/i18n/qml_en.ts'...
Found 1703 source text(s) (109 new and 1594 already existing)
Kept 35 obsolete entries
Same-text heuristic provided 35 translation(s)
```
- add the (Un)Mark as Untrustworthy action to the menu
- fix the placement and visuals of the (Un)Block menu item
- add a missing separator above these
- store the blocked and trust details in `d.contactDetails` and properly
refresh it upon opening the menu
- some other smaller UI fixes to align the menu to the design
Closes#6538: Stranger's (untrustworthy) menu doesn't match the Design
Closes#6535: The stranger's card doesn't match the Design
previously, the context menu would be randomly placed; now the image gets
access to its context menu and allows for placing it precisely, just like
it's done in UsernameLabel
the role name exported by the model has (likely) changed :/
`qrc:/imports/shared/views/chat/MessageView.qml:212: Error: Cannot assign [undefined] to QString`
Closes#6483: all networks button should match design
Closes#6487: networks button should display number of selected networks
Closes#6488: network tags should display icons and look like designs
Align the Wallet left section navigation bar to the design
Fixes#6479Fixes#6480
- simplify using layouts
- fix margins/spacing
- fix font sizes and weights
`StatusButton` is now used correctly. There are 3 different button variations with preset heights/widths and paddings. The consumer cannot change the height without altering the expected behaviour and display of the button.
Button height is now consistent with chat input.
Fixes#6298
Fixes#6411
- fix the order of buttons and the Skip button transparent background
- don't let the subHeaderItem eat vertical space when it's not visible
- layout/margins/spacing/linespacing fixes
Fixes#6387
TLDR; since this is a GridView, it needs a width/height set and then
centered on top of the parent component (as opposed to `anchors.fill`)
Also added a scroll indicator in case the window height is not tall
enough and fixed some small warnings
Fixes#6396Fixes#6398
- fix displaying the chatkey and the copy button next to it using layouts
- hide the mutual contact and verified contact icons in case of My
profile
Pascal Precht
B.Melnik
Michał Cieślak
Alexandra Betouni
Michal Iskierko
Lukáš Tinkl
Patryk Osmaczko
MishkaRogachev
Khushboo Mehta
Stefan
Anthony Laibe
Igor Sirotin
Sale Djenic
Jonathan Rainville
PavelS
Jinho Jang
Noelia
Boris Melnik
Pascal Precht
Richard Ramos
Anastasiya S
Khushboo-dev-cpp
Kamil K
Jakub Sokołowski
femi
