status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
status-desktop/ui/StatusQ/README.md

53 lines
1.7 KiB
Markdown
Raw Normal View History

chore: let the fun begin
2021-04-30 16:23:57 +00:00
# Status QML
> An emerging reusable UI component library for Status applications.
chore: add usage instructions to readme file
2021-05-05 07:52:58 +00:00
## Usage
StatusQ introduces a module namespace that semantically groups components so they can be easily imported.
These modules are:
- [StatusQ.Core](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/qmldir)
- [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
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-06 09:20:50 +00:00
- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
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 07:37:01 +00:00
- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
chore: add usage instructions to readme file
2021-05-05 07:52:58 +00:00
Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
Other than that, modules and components can be used as expected.
Example:
```
import Status.Core 0.1
import Status.Controls 0.1
StatusInput {
...
}
```
## Viewing and testing components
To make viewing and testing components easy, we've added a sandbox application to this repository in which StatusQ components are being build. This is the first place where components see the light of the world and can be run in a proper application environment.
### Using Qt Creator
The easiest way to run the sandbox application is to simply open the provided `sandbox.pro` file using Qt Creator.
### Using command line interface
To run the sandbox from within a command line interface, run the following commands:
```
$ git clone https://github.com/status-im/StatusQ
$ cd StatusQ/sandbox
$ qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
$ make
```
Once that is done, the sandbox can be started with the generated executable:
```
$ ./bin
```