Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 B.Melnik
|
3a0e54928c |
@@ -1,17 +0,0 @@
|
||||
### Checklist
|
||||
|
||||
- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
|
||||
- the scope should be the component's name e.g: `feat(StatusListItem): ... `
|
||||
- when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
|
||||
- [ ] add documentation if necessary (new component, new feature)
|
||||
- [ ] update sandbox app
|
||||
- in case of new component, add new component page
|
||||
- in case of new features, add variation to existing component page
|
||||
- nice to have: add it to the demo application as well
|
||||
- [ ] test changes in both light and dark theme?
|
||||
- [ ] is this a breaking change?
|
||||
- [ ] use the dedicated `BREAKING CHANGE` commit message section
|
||||
- [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
|
||||
- [ ] (pre-merge) adapt code to breaking changes
|
||||
- [ ] (post-merge) update StatusQ submodule pointer
|
||||
- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)
|
||||
@@ -12,8 +12,3 @@ Makefile
|
||||
.qmake.stash
|
||||
*_qml.cpp
|
||||
*_qmlcache.qrc
|
||||
sandbox/qmlcache_loader.cpp
|
||||
doc/html
|
||||
CMakeLists.txt.user
|
||||
.vscode
|
||||
build/
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
[submodule "vendor/SortFilterProxyModel"]
|
||||
path = vendor/SortFilterProxyModel
|
||||
url = https://github.com/status-im/SortFilterProxyModel.git
|
||||
-664
@@ -1,664 +0,0 @@
|
||||
<a name=""></a>
|
||||
## 0.25.0 (2022-03-07)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **@StatusListItem:** fix left padding ([f574e390](f574e390))
|
||||
* **StatusListItem:** add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
|
||||
* **StatusQ.Popups:** removed overlay setting (#557) ([665141f8](665141f8))
|
||||
* **StatusTagSelector:** Updates and fixes in the component ([07a5dc09](07a5dc09))
|
||||
* **build:** fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
|
||||
* **sandbox:** Fix results popup component position ([cdf51fef](cdf51fef))
|
||||
|
||||
#### Features
|
||||
|
||||
* **@StatusListItem:** add option for tags ([381150a7](381150a7))
|
||||
* **StatusChatList:** Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
|
||||
* **StatusChatListItem:** enable assigning emoji to chat item ([5fac8774](5fac8774))
|
||||
* **StatusContactVerificationIcons:** Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
|
||||
* **StatusQ:** Moving docs outside sandbox ([825999b1](825999b1))
|
||||
* **StatusQ.Core:** add new arrow-left icon ([e9f20be1](e9f20be1))
|
||||
* **StatusSmartIdenticon:** Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
* **StatusContactVerificationIcons:** Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## 0.24.0 (2022-02-14)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusListItem:** add highlighted property ([5780f183](5780f183))
|
||||
* **StatusQ.Components:** Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.23.0 (2022-02-08)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
|
||||
* **StatusChatList:** unexisting property name for chat item fixed ([c2e07517](c2e07517))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusQ.Components:**
|
||||
* Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
|
||||
* Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.22.0 (2022-01-31)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusMemberListItem:** Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.21.0 (2022-01-24)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **build:** broken MacOS build (#533) ([55901cf0](55901cf0))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusMessage:** Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
|
||||
* **StatusQ.Controls:** Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.20.0 (2022-01-17)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBanner:** introduce type variants for different banner styles ([35d12f44](35d12f44))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusBaseInput:** Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
|
||||
* **build:** Windows build ([14ab4ce5](14ab4ce5))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.19.0 (2021-12-03)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusChatListItem:** This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusModal:** introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.18.0 (2021-11-30)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppNavBar:** Fixed position of profile button on the NavBar ([419b7384](419b7384))
|
||||
* **StatusImageWithTitle:** Fix position of the edit title button ([8d2121ad](8d2121ad))
|
||||
* **StatusListItem:** ensure title is elided ([b7883e82](b7883e82))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusListItem:** Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.17.1 (2021-11-19)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAccountSelector:** Adapt ui to data model changed ([db024436](db024436))
|
||||
* **StatusAssetSelector:** Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.17.0 (2021-11-10)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBaseButton:** introduce `Tiny` size ([dee9f437](dee9f437))
|
||||
* **StatusQ.Controls.Validators:** introduce `StatusUrlValidator` ([a9155865](a9155865))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAccountSelector:** adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
|
||||
* **StatusExpandibleItem:** add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
|
||||
* **StatusInput:** ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
|
||||
* **StatusListItem:** This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
|
||||
* **StatusSearchPopup:** disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
|
||||
* **StatusSlider:** slider background and handle should not depend on root's height ([31cfc883](31cfc883))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.16.0 (2021-11-01)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusModal:** render footer correctly based on `showFooter` flag ([da9dc2f4](da9dc2f4))
|
||||
* **StatusRoundButton:** ensure disabled state uses correct background color ([eb4aae40](eb4aae40))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusQ.Controls:**
|
||||
* introduce `StatusWalletColorSelect` control ([ea9a5602](ea9a5602), closes [#467](467))
|
||||
* introduce `StatusWalletColorButton` component ([597ae192](597ae192), closes [#466](466))
|
||||
* **StatusQ.Platform:** introduce StatusMacNotification component ([d301b94c](d301b94c))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.15.0 (2021-10-26)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusQ.Controls:**
|
||||
* introduce StatusChatCommandButton ([4cc0d2bb](4cc0d2bb), closes [#429](429))
|
||||
* introduce `StatusTabBarIconButton` component ([4bcd89b3](4bcd89b3), closes [#428](428))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.14.0 (2021-10-25)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **Spellchecking:** Add check for hunspell existence ([ab9ab249](ab9ab249))
|
||||
* **StatusModal:**
|
||||
* ensure `onEditButtonClicked` signal is emitted ([074dc22b](074dc22b), closes [#454](454))
|
||||
* expose `header.editable` property ([9c5f79a6](9c5f79a6), closes [#452](452))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusSmartIdenticon:** Created a new StatusQ componnent to accomodate: ([14527483](14527483))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.13.0 (2021-10-19)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* use proper double checkmark icon ([8aba017c](8aba017c))
|
||||
* **StatusBaseButton:** introduce missing `highlighted` property ([a3748920](a3748920))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusFlatRoundButton:** Update the StatusFlatRoundButton to take over button behaviour from StatusIconButton under ui/shared/status ([71fbdef1](71fbdef1))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.12.0 (2021-10-18)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors ([e1b0f2dc](e1b0f2dc))
|
||||
* **StatusModal:** Add edit avatar button ([5043b0b6](5043b0b6))
|
||||
* **StatusQ.Components:** introduce `StatusAddress` component ([6789446d](6789446d), closes [#430](430))
|
||||
* **StatusQ.Controls:**
|
||||
* introduce StatusColorSelector component ([bdd69955](bdd69955), closes [#444](444))
|
||||
* introduce `StatusAssetSelector` component ([9fdc9aea](9fdc9aea), closes [#442](442))
|
||||
* introduce `StatusAccountSelector` component ([5e15cc49](5e15cc49), closes [#435](435))
|
||||
* introduce `StatusSelect` ([6e10959e](6e10959e), closes [#436](436))
|
||||
* **StatusQ.Popups:** introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
* **StatusQ.Popups:** introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.11.1(2021-10-12)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Sandbox doesn't build on Linux machines ([dce45c2f](dce45c2f))
|
||||
* **StatusChatInfoButton:** StatusChatInfoButton takes up entire available width ([c276a90e](c276a90e))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.11.0 (2021-09-27)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* track category opened state ([0631d500](0631d500))
|
||||
* **StatusChatList:** ensure right click popup opens in correct position ([a2e3659d](a2e3659d))
|
||||
* **StatusSearchPopup:** use correct theme color for search result text ([654bd9f2](654bd9f2))
|
||||
* **StatusSpellcheckingMenuItems:** Exact menu items order ([478177f2](478177f2))
|
||||
|
||||
#### Features
|
||||
|
||||
* add star icons (#422) ([5c3267f7](5c3267f7))
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.10.0 (2021-09-20)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusChatInfoToolBar:** Right anchored title in StatusChatInfoToolBar ([6e8a36be](6e8a36be))
|
||||
* **StatusChatListCategoryItem:** Disable sensor when chevron clicked ([c83641d2](c83641d2))
|
||||
* **StatusQ.Controls.Validators:** fix bug that addressOrEns validator isn't properly exposed in QML ([1374c193](1374c193))
|
||||
|
||||
#### Features
|
||||
|
||||
* **Spellchecker:** Add Spellchecker class ([c65f80d2](c65f80d2))
|
||||
* **Spellchecking:**
|
||||
* Add dictionaries ([1d12d222](1d12d222))
|
||||
* Add huspell dependency ([f9457ef3](f9457ef3))
|
||||
* **StatusChatList:** expose `statusChatListItems` Repeater ([40c0e48b](40c0e48b))
|
||||
* **StatusExpandableItem:** Correct placement of expandable region in tertiary type ([1f244f62](1f244f62))
|
||||
* **StatusInput:**
|
||||
* add support for asynchronous validators ([8820cd89](8820cd89), closes [#395](395))
|
||||
* introduce `leftPadding` and `rightPadding` properties ([13dc8ae3](13dc8ae3))
|
||||
* introduce `reset` API ([a2ad08e4](a2ad08e4))
|
||||
* **StatusSpellcheckingMenuItems:** Add spellchecking menu ([3e24b710](3e24b710))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.9.0 (2021-09-13)
|
||||
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
* **StatusExpandableItem:** Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppThreePanelLayout:** Fix margin between left and center panels ([29e9557d](29e9557d))
|
||||
* **StatusChatListAndCategories:** rely on correct tooltip settings prop ([2971c607](2971c607))
|
||||
* **StatusCheckbox:** give checkbox label proper theme color ([88fb57dd](88fb57dd))
|
||||
* **StatusModal:** don't reserve header subtitle space ([eabc62f7](eabc62f7), closes [#378](378))
|
||||
|
||||
#### Features
|
||||
|
||||
* **Status.Core.Theme:** add RobotoMono font ([aab44c1e](aab44c1e), closes [#342](342))
|
||||
* **StatusBaseInput:** introduce `component` property ([019471c8](019471c8), closes [#380](380))
|
||||
* **StatusExpandableItem:** Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
|
||||
* **StatusInput:**
|
||||
* introduce `ValidationMode` ([d73a1584](d73a1584))
|
||||
* exposed edit component ([73c77c29](73c77c29))
|
||||
* **StatusQ.Controls.Validators:**
|
||||
* introduce `StatusAddressAndEnsValidator` ([a93ef161](a93ef161))
|
||||
* introduce `StatusAddressValidator` ([77d0e9b8](77d0e9b8))
|
||||
* **StatusSearchPopup:** introduce forceActiveFocus API ([efe31166](efe31166))
|
||||
* **StatusValidator:** allow validators to provide default `errorMessage` ([1a23cc19](1a23cc19))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.8.0 (2021-09-06)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusBaseInput:**
|
||||
* fix one line scroll ([d64aa6de](d64aa6de))
|
||||
* Make clear button bigger ([387bfe77](387bfe77))
|
||||
* **StatusChatToolBar:** Fix mouse event catching after menu closing ([fbecac4a](fbecac4a))
|
||||
* **StatusInput:** Forward keys events to root ([061c7d1c](061c7d1c))
|
||||
* **StatusListItem:** Add propogateCompostedEvents to title mouse area ([5c706fdc](5c706fdc))
|
||||
* **StatusModal:** Remove self-calculating height ([3187de54](3187de54))
|
||||
|
||||
#### Features
|
||||
|
||||
* introduce bigger versions of navbar icons ([0a4d3860](0a4d3860))
|
||||
* **StatusBaseInput:** introduce focussed property ([ddfca7a8](ddfca7a8), closes [#373](373))
|
||||
* **StatusChatListAndCategories:** Add tooltip settings for categories buttons ([64098e84](64098e84))
|
||||
* **StatusDescriptionListItem:**
|
||||
* expose subtitle component for fine control ([1749cc0e](1749cc0e))
|
||||
* introduce support for `value` ([a963ef80](a963ef80))
|
||||
* **StatusExpandableSettingsItem:** Added new component for wallet settings ([f3ab4ce9](f3ab4ce9))
|
||||
* **StatusInput:** Introduced secondaryLabel property ([d648230d](d648230d), closes [#383](383))
|
||||
* **StatusModal:**
|
||||
* Add popup menu support for StatusModal ([8a94fb54](8a94fb54))
|
||||
* add ability to set elide config of header titles ([28e514f9](28e514f9), closes [#353](353))
|
||||
* **StatusQ.Controls:** introduce StatusSwitchTabBar and StatusSwitchTabButton ([d449f0e9](d449f0e9), closes [#365](365))
|
||||
* **StatusSearchPopup:** add function hook to allow timestamp formatting ([b45aba4b](b45aba4b), closes [#363](363))
|
||||
* **qrc:** Add new icon needed for share modal ([38fb8f61](38fb8f61))
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.7.0 (2021-08-30)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusChatListAndCategories:** add drag and drop support for cate… (#349) ([a4178bd6](a4178bd6), closes [#227](227))
|
||||
* **StatusChatListCategoryItem:** Add tooltips settings ([f9775e4d](f9775e4d))
|
||||
* **StatusPopupMenu:** changed close policy ([2d8fd576](2d8fd576))
|
||||
* **StatusWindowsTitleBar:** Add windows title bar ([faca4765](faca4765))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppThreePanelLayout:** increase minimum width in right panel ([7da4bdee](7da4bdee))
|
||||
* **StatusBaseInput:** fix click to focus ([138458d1](138458d1))
|
||||
* **StatusChatInfoButton:** Add self-calculated implicitWIdth and elide to texts ([7ef61ed3](7ef61ed3))
|
||||
* **StatusListItem:** don't set width on title item ([ee5ec7b3](ee5ec7b3))
|
||||
* **StatusModal:** ensure header and subtitles elide if needed ([503a07bf](503a07bf), closes [#256](256))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.6.0 (2021-08-24)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBaseInput:** introduce `dirty` and `pristine` properties ([ea340801](ea340801), closes [#327](327))
|
||||
* **StatusChatList:** Add drag and drop support of list items ([c679854d](c679854d))
|
||||
* **StatusLetterIdenticon:** Expose the text component ([d16719ad](d16719ad))
|
||||
* **StatusListItem:** introduce itemId and titleId properties and their handlers ([01da7508](01da7508))
|
||||
* **StatusSearchPopupMenuItem:**
|
||||
* New APIs resetSearchSelection and setSearchSelection ([78edcb37](78edcb37))
|
||||
* new API ([b133d10f](b133d10f))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusBaseInput:**
|
||||
* ensure wrapmode works as expectefd in multiline mode ([0243852c](0243852c), closes [#324](324))
|
||||
* expose cursorPosition ([ea6743a7](ea6743a7), closes [#323](323))
|
||||
* **StatusChatListCategory:** emit original mouse event data in clicked signal ([5da9cb06](5da9cb06), closes [#333](333))
|
||||
* **StatusInput:**
|
||||
* ensure validation is performed on initialization ([4b107a0e](4b107a0e), closes [#326](326))
|
||||
* remove recursive binding in label height ([51d8b55b](51d8b55b))
|
||||
* **StatusSearchLocationMenu:** typo fix ([c306b682](c306b682))
|
||||
* **StatusSearchPopup:** replace "#" character with "channel" icon ([2de261c4](2de261c4))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.5.0 (2021-08-16)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusChatToolBar:** Use updated StatusFlatRoundButton ([d24c2e62](d24c2e62))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBaseInput:** enforce `maximumLength` if it's set ([f635bad6](f635bad6))
|
||||
* **StatusFlatRoundButton:** Adding tooltip to the button ([5a0489ba](5a0489ba))
|
||||
* **StatusIcon:** add `play-filled` and `pause-filled` icons ([58a30716](58a30716), closes [#310](310))
|
||||
* **StatusInput:** introduce new validator pipeline ([ba4f27f9](ba4f27f9), closes [#298](298))
|
||||
* **StatusToolTip:** Adding an offset property ([ee429683](ee429683))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.4.0 (2021-08-12)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppNavBar:** add profile button (#311) ([2e1359c9](2e1359c9))
|
||||
* **StatusChatListItem:** don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
|
||||
* **StatusPopupMenu:** ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusListItem:** add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
|
||||
* **StatusQ.Theme.Core:** introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.3.0 (2021-07-27)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **Controls:** introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
|
||||
* **Popups:** introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
|
||||
* **StatusBaseInput:**
|
||||
* add icon support ([c8e90349](c8e90349), closes [#242](242))
|
||||
* add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
|
||||
* add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
|
||||
* **StatusInput:** implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
|
||||
* **StatusPopupMenu:** add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
|
||||
* **StatusQ.Layout:** introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
|
||||
* **sandbox:** make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppThreePanelLayout:**
|
||||
* limit right panel width to 300px ([d327c515](d327c515))
|
||||
* limit center panel width to 300px ([762ff87b](762ff87b))
|
||||
* hide right panel when closed ([61705990](61705990))
|
||||
* **StatusBaseInput:**
|
||||
* some minor style adjustment to adhere to design ([f16e857c](f16e857c))
|
||||
* ensure input text is selectable with mouse ([ab303593](ab303593))
|
||||
* ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
|
||||
* add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
|
||||
* expose text prop alias ([116ddfbb](116ddfbb))
|
||||
* **StatusChatInfoButton:** ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
|
||||
* **StatusListItem:** ensure title area wraps text ([e3f79314](e3f79314))
|
||||
* **StatusModal:** reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.2.0 (2021-07-21)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusChatListCategory:** ensures showActionButtons is taken into account ([52cb97e4](52cb97e4))
|
||||
* **StatusPopupMenu:** ensure menu items elide ([d1f8e3e5](d1f8e3e5))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusChatInfoToolBar:** make statusMenuButton public ([38c04cb9](38c04cb9))
|
||||
* **StatusChatListAndCategories:** new API showPopupMenu ([9cfcdace](9cfcdace))
|
||||
* **StatusChatListItem:** introduce muted badge visuals ([a404ba07](a404ba07), closes [#259](259))
|
||||
* **StatusListItem:**
|
||||
* support tertiaryTitle ([03131996](03131996), closes [#275](275))
|
||||
* add identicon support ([214ef6b0](214ef6b0), closes [#261](261))
|
||||
* **StatusModal:**
|
||||
* introduce support for identicons and letter identicons ([fda9b71f](fda9b71f), closes [#269](269))
|
||||
* render header and footer border by default ([18dbaadd](18dbaadd), closes [#265](265))
|
||||
* **StatusToolTip:** expose `arrow` for fine-grain control ([51b7c71d](51b7c71d))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## v0.1.0 (2021-07-15)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Add missing .qml to resources, add qmlcache to gitignore ([71d0ef7f](71d0ef7f))
|
||||
* make release build work ([1a7c2133](1a7c2133))
|
||||
* introduce tiny icon versions and make use of them where needed ([a0fae6ab](a0fae6ab), closes [#128](128))
|
||||
* update position of window to center, add traffic lights ([26aae6d0](26aae6d0))
|
||||
* hover effect for StatusFlatRoundButton ([ee4a7c88](ee4a7c88))
|
||||
* fix crash on removing title bar ([c94b801e](c94b801e))
|
||||
* **Components:**
|
||||
* more popup menu position fine-tuning ([22eaf6fa](22eaf6fa))
|
||||
* add proper foreground color for StatusBadge ([6a92ff68](6a92ff68), closes [#59](59))
|
||||
* **Controls:** ensure round buttons expose `hovered` state ([98b01946](98b01946), closes [#88](88))
|
||||
* **Core:**
|
||||
* add missing `rotation` property to `StatusIconSettings` ([341c0ddd](341c0ddd))
|
||||
* don't rotate `ColorOverlay` of `StatusIcon` ([062fe42a](062fe42a), closes [#109](109))
|
||||
* disable StatusIcon ColorOverlay if no color is supplied ([f1e34e39](f1e34e39))
|
||||
* **Core.Theme:**
|
||||
* ensure proper nav bar colors is used ([6c84fed7](6c84fed7))
|
||||
* remove redundant theme properties ([75e87725](75e87725))
|
||||
* ensure all font weight are available ([0a88e652](0a88e652), closes [#30](30))
|
||||
* **README:** fix module name in readme docs ([f4b5b271](f4b5b271))
|
||||
* **StatusAppNavBar:**
|
||||
* don't rely on `undefined` property ([175d7a19](175d7a19))
|
||||
* don't try to render chat button if it doesn't exist ([d690a0c5](d690a0c5))
|
||||
* **StatusBadge:** use medium font weight for badge text ([cb9492ab](cb9492ab))
|
||||
* **StatusBaseInput:** Fix focus area Closes: #241 ([f2d36d3d](f2d36d3d))
|
||||
* **StatusChatInfoButton:**
|
||||
* make component identicon aware ([7dcec0ca](7dcec0ca), closes [#228](228))
|
||||
* prefix chat name with "#" if needed ([144ac69d](144ac69d), closes [#229](229))
|
||||
* vertically center title if no subtitle is provided ([7b2030c6](7b2030c6), closes [#230](230))
|
||||
* disable hover effects when sensor is disabled ([f7e38c9c](f7e38c9c), closes [#231](231))
|
||||
* **StatusChatList:**
|
||||
* ensure badge is also shown for one to one messages ([ac5c8452](ac5c8452))
|
||||
* ensure popupMenu closeHandler don't break ([722d92c0](722d92c0), closes [#216](216))
|
||||
* use fallback property to determine unread message count ([f7f217ed](f7f217ed))
|
||||
* expect `model.color` instead of `iconColor` prop ([70332a3f](70332a3f))
|
||||
* ensure component provide default `width` ([300536bc](300536bc), closes [#176](176))
|
||||
* **StatusChatListAndCategories:**
|
||||
* make chat list visibily flag work ([53d63a9b](53d63a9b), closes [#217](217))
|
||||
* ensure chatItemUnmuted event is propagated ([a9ae426c](a9ae426c), closes [#219](219))
|
||||
* ensure chat list receives popup menu ([23ddbc2e](23ddbc2e), closes [#218](218))
|
||||
* **StatusChatListCategory:** only try open popup when supplied ([cbdaf128](cbdaf128), closes [#220](220))
|
||||
* **StatusChatListCategoryItem:** don't render menubutton with no popup ([05fc97ca](05fc97ca), closes [#153](153))
|
||||
* **StatusChatListItem:**
|
||||
* ensure chat name elides when it's too long ([34df0f0d](34df0f0d), closes [#151](151))
|
||||
* ensure public chat names are prefixed with '#' ([141872c2](141872c2), closes [#191](191))
|
||||
* use proper font size for chat name ([ac80f7f7](ac80f7f7))
|
||||
* **StatusChatToolBar:**
|
||||
* ensure context menu as proper position ([3ea8da05](3ea8da05))
|
||||
* ensure menu button stays highlighted ([90bad9e3](90bad9e3), closes [#125](125))
|
||||
* **StatusFlatRoundButton:** use correct hover color ([82e34d64](82e34d64))
|
||||
* **StatusListItem:**
|
||||
* ensure icon background in secondary type works correctly ([34b35318](34b35318))
|
||||
* various fixes w.r.t. sensor, icon size etc ([e5e96af5](e5e96af5))
|
||||
* **StatusMenuSeparator:** ensure height is 0 when invisible or disabled ([fd7a5530](fd7a5530), closes [#212](212))
|
||||
* **StatusModal:** ensure modal footer uses correct theme color ([de2c36d0](de2c36d0))
|
||||
* **StatusModalHeader:** ensure header has enough height for children ([75b2f508](75b2f508), closes [#185](185))
|
||||
* **StatusNavBarTabButton:**
|
||||
* fix popup menu positioning ([705f1402](705f1402))
|
||||
* ensure click signal is emitted when not menu is provided ([040da2a4](040da2a4))
|
||||
* don't change checked state implicitly ([b1fe73ba](b1fe73ba))
|
||||
* **StatusNavigationListItem:** make click event work again ([c5ecfe08](c5ecfe08))
|
||||
* **StatusQ.Core.Theme:** use correct dropshadow color in dark theme ([70e17b05](70e17b05))
|
||||
* **StatusRadioButton:** ensure control label as correct color ([1cb0c1d3](1cb0c1d3), closes [#51](51))
|
||||
* **StatusRoundedImage:** ensure images are scaled and positioned properly ([3d0688b7](3d0688b7), closes [#172](172))
|
||||
* **sandbox:** make scrollview content height grow with content ([2f09179f](2f09179f))
|
||||
|
||||
#### Features
|
||||
|
||||
* can be used on tablets (#146) ([63be0144](63be0144))
|
||||
* add StatusSwitch ([52998d68](52998d68), closes [#12](12))
|
||||
* Add buttons components ([91b8d317](91b8d317))
|
||||
* Set up catalog app (sandbox) ([3528b2ff](3528b2ff), closes [#5](5))
|
||||
* introduce theming capability ([608fdbda](608fdbda), closes [#3](3))
|
||||
* **Components:**
|
||||
* introduce `StatusContactRequestsIndicatorListItem` ([baa663ce](baa663ce), closes [#175](175))
|
||||
* introduce `StatusListSectionHeadline` ([507703af](507703af), closes [#164](164))
|
||||
* introduce `StatusNavigationPanelHeadline` ([40617cd7](40617cd7), closes [#162](162))
|
||||
* introduce `StatusChatListAndCategories` component ([7bca2745](7bca2745), closes [#133](133))
|
||||
* introduce `StatusChatInfoToolBar` component ([454e73a8](454e73a8), closes [#141](141))
|
||||
* introduce `StatusChatListCategory` ([f4d211ac](f4d211ac), closes [#123](123))
|
||||
* introduce `StatusChatListCategoryItem` ([916dcc9c](916dcc9c), closes [#117](117))
|
||||
* introduce `StatusChatList` ([1e558b59](1e558b59), closes [#100](100))
|
||||
* Add StatusSlider ([c0ad32a1](c0ad32a1))
|
||||
* introduce `StatusChatToolBar` ([a4421b5b](a4421b5b), closes [#80](80))
|
||||
* introduce `StatusDescriptionListItem` ([4a25ca02](4a25ca02))
|
||||
* introduce StatusNavigationListItem ([63275668](63275668), closes [#72](72))
|
||||
* introduce StatusChatListItem ([b40d427d](b40d427d), closes [#65](65))
|
||||
* introduce `StatusListItem` component ([a3fe02d0](a3fe02d0), closes [#19](19))
|
||||
* introduce `StatusRoundIcon` component ([8639e8cc](8639e8cc), closes [#53](53))
|
||||
* introduce StatusBadge component ([a89e218a](a89e218a), closes [#15](15))
|
||||
* introduce StatusRoundedImage ([09876c1f](09876c1f), closes [#32](32))
|
||||
* introduce StatusLetterIdenticon ([b0155313](b0155313), closes [#28](28))
|
||||
* introduce StatusLoadingIndicator ([3ce1138b](3ce1138b), closes [#7](7))
|
||||
* **Controls:**
|
||||
* introduce StatusBaseInput ([13217604](13217604))
|
||||
* introduce `StatusChatInfoButton` ([8a799182](8a799182))
|
||||
* introduce StatusNavBarTabButton ([ea118d71](ea118d71), closes [#17](17))
|
||||
* introduce StatusToolTip component ([f3a6c9f4](f3a6c9f4), closes [#14](14))
|
||||
* **Core:**
|
||||
* introduce StatusIconBackgroundSettings ([a4e62fb2](a4e62fb2))
|
||||
* introduce `StatusImageSettings` ([d9529883](d9529883))
|
||||
* introduce StatusBaseText component ([c7d533af](c7d533af), closes [#20](20))
|
||||
* **Core.Controls:** introduce StatusIconTabButton component ([b4b1f472](b4b1f472), closes [#16](16))
|
||||
* **Core.Theme:** expose solid black and white on `ThemePalette` ([996ceb2b](996ceb2b))
|
||||
* **Layout:**
|
||||
* introduce `StatusAppTwoPanelLayout` ([af3ca15b](af3ca15b))
|
||||
* introduce StatusAppLayout component ([554998dc](554998dc))
|
||||
* introduce StatusAppNavBar ([0dfd39af](0dfd39af), closes [#18](18))
|
||||
* **Popups:**
|
||||
* Add StatusModal ([e49b58b9](e49b58b9))
|
||||
* introduce StatusModalDivider ([148c30b9](148c30b9))
|
||||
* Add StatusModalFooter ([9c2a5830](9c2a5830))
|
||||
* Add status modal header ([fa9bb7ad](fa9bb7ad))
|
||||
* **StatusBadge:** introduce `borderColor` and `hoverBorderColor` ([041c11fb](041c11fb))
|
||||
* **StatusBaseInput:** Add focused state Closes: #240 ([19349881](19349881))
|
||||
* **StatusChatList:**
|
||||
* expose hook to lazily calculate chat item names ([a664f635](a664f635))
|
||||
* introduce `profileImageFn` property ([cfacd5be](cfacd5be), closes [#174](174))
|
||||
* introduce `popupMenu` property ([a6262f0a](a6262f0a), closes [#171](171))
|
||||
* introduce `filterFn` and `categoryId` ([cb078134](cb078134), closes [#154](154))
|
||||
* **StatusChatListCategory:**
|
||||
* apply chat list filter and expose category id in popup menu ([45775518](45775518))
|
||||
* introduce flag to show/hide buttons ([9982c3df](9982c3df), closes [#150](150))
|
||||
* **StatusChatListCategoryItem:** introduce `highlighted` property ([72bdd2d9](72bdd2d9))
|
||||
* **StatusChatListCategoryItemButton:** introduce `highglighted` property ([645a3b79](645a3b79))
|
||||
* **StatusChatListItem:**
|
||||
* add `highlighted` property ([44343d38](44343d38), closes [#178](178))
|
||||
* accept right clicks ([1f3aa0bb](1f3aa0bb), closes [#131](131))
|
||||
* **StatusChatToolBar:**
|
||||
* add tooltips to action buttons ([86da901e](86da901e), closes [#244](244))
|
||||
* add members and search button ([e93dab2b](e93dab2b), closes [#243](243))
|
||||
* **StatusFlatRoundButton:**
|
||||
* introduce `highlighted` color for secondary type ([58e8f1cd](58e8f1cd), closes [#245](245))
|
||||
* support icon rotation ([3a7a338d](3a7a338d))
|
||||
* **StatusIcon:** Improvement of Icons ([7bc7df8d](7bc7df8d))
|
||||
* **StatusIconTabButton:** introduce image loading state and fallback ([9b99d8a9](9b99d8a9), closes [#37](37))
|
||||
* **StatusListItem:**
|
||||
* add `Danger` type support ([8155d9a2](8155d9a2), closes [#248](248))
|
||||
* support letter identicons ([531e54f2](531e54f2), closes [#239](239))
|
||||
* introduce primary and secondary types ([146218e0](146218e0))
|
||||
* **StatusModal:** expose loaded content ([bd383e87](bd383e87), closes [#237](237))
|
||||
* **StatusNavBarTabButton:** introduce `popupMenu` property ([5e8242df](5e8242df), closes [#137](137))
|
||||
* **StatusPopupMenu:**
|
||||
* introduce `openHandler` ([2427fa2d](2427fa2d))
|
||||
* make menu items invisible when disabled ([c9bc9bab](c9bc9bab), closes [#135](135))
|
||||
* introduce `closeHandler` hook ([fb51e9d7](fb51e9d7))
|
||||
* **StatusQ.Popups:** introduce StatusPopupMenu component ([09a6f418](09a6f418), closes [#96](96))
|
||||
* **StatusRoundButton:** add `highlighted` and `icon.rotation` props ([7c16a9bd](7c16a9bd))
|
||||
* **StatusRoundIcon:** enable `icon.color` support ([70043c5b](70043c5b))
|
||||
* **StatusRoundedImage:**
|
||||
* introduce identicon support ([7a2648f6](7a2648f6), closes [#173](173))
|
||||
* add loading indicator option ([44b275f2](44b275f2), closes [#56](56))
|
||||
* **sandbox:**
|
||||
* introduce first part of profile view for reference app ([4588d597](4588d597))
|
||||
* introduce first version of reference app ([202fb886](202fb886))
|
||||
|
||||
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
cmake_minimum_required(VERSION 3.19)
|
||||
|
||||
project(StatusQ)
|
||||
|
||||
if (APPLE)
|
||||
set(MACOS_VERSION_MIN_FLAGS -mmacosx-version-min=10.14)
|
||||
set(CMAKE_OSX_ARCHITECTURES "x86_64")
|
||||
endif()
|
||||
|
||||
set(CMAKE_AUTOMOC ON)
|
||||
set(CMAKE_AUTORCC ON)
|
||||
|
||||
set(CMAKE_CXX_STANDARD 17)
|
||||
set(CMAKE_CXX_STANDARD_REQUIRED ON)
|
||||
|
||||
# https://doc.qt.io/qtcreator/creator-qml-modules-with-plugins.html#importing-qml-modules
|
||||
set(QML_IMPORT_PATH
|
||||
${CMAKE_SOURCE_DIR}/src;${QML_IMPORT_PATH}
|
||||
CACHE STRING "")
|
||||
|
||||
add_subdirectory(vendor/SortFilterProxyModel)
|
||||
add_subdirectory(sandbox)
|
||||
add_subdirectory(tests)
|
||||
@@ -2,9 +2,6 @@
|
||||
|
||||
> An emerging reusable QML UI component library for Status applications.
|
||||
|
||||
:bangbang: | This repository is set to read-only. `StatusQ` library is further developed in the [status-desktop](https://github.com/status-im/status-desktop) repository.
|
||||
:---: | :---
|
||||
|
||||
## Usage
|
||||
|
||||
StatusQ introduces a module namespace that semantically groups components so they can be easily imported.
|
||||
@@ -12,7 +9,6 @@ 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)
|
||||
- [StatusQ.Core.Utils](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Utils/qmldir)
|
||||
- [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
|
||||
- [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
|
||||
- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
|
||||
@@ -39,7 +35,7 @@ To make viewing and testing components easy, we've added a sandbox application t
|
||||
|
||||
### Using Qt Creator
|
||||
|
||||
The easiest way to run the sandbox application is to simply open the provided `CMakeLists.txt` file 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
|
||||
|
||||
@@ -47,13 +43,14 @@ To run the sandbox from within a command line interface, run the following comma
|
||||
|
||||
```
|
||||
$ git clone https://github.com/status-im/StatusQ
|
||||
$ cd StatusQ
|
||||
$ git submodule update --init
|
||||
$ ./sandbox/scripts/build
|
||||
$ cd StatusQ/sandbox
|
||||
$ ./scripts/build
|
||||
```
|
||||
|
||||
Once that is done, the sandbox can be started with the generated executable:
|
||||
|
||||
```
|
||||
$ ./build/sandbox/Sandbox
|
||||
$ ./bin/sandbox
|
||||
```
|
||||
|
||||
More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
\page statusq-index.html
|
||||
\title StatusQ
|
||||
\brief A components library for Status desktop client.
|
||||
|
||||
|
||||
StatusQ provides a collection of components....
|
||||
|
||||
StatusQ - Components and Interfaces
|
||||
\list
|
||||
\li \l{StatusQ Components}{Components}
|
||||
\li \l{StatusQ Controls}{Controls}
|
||||
\li \l{StatusQ Core}{Core}
|
||||
\li \l{StatusQ Layout}{Layout}
|
||||
\li \l{StatusQ Platform}{Platform}
|
||||
\li \l{StatusQ Popups}{Popups}
|
||||
\endlist
|
||||
*/
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Components 0.1
|
||||
\title StatusQ Components
|
||||
\brief Basic set of Components StatusQ components
|
||||
|
||||
This is a listing of all Components components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAddress}
|
||||
\li \l{StatusBadge}
|
||||
\li \l{StatusChatInfoToolBar}
|
||||
\li \l{StatusChatList}
|
||||
\li \l{StatusChatListItem}
|
||||
\li \l{StatusImageSettings}
|
||||
\li \l{StatusChatListCategory}
|
||||
\li \l{StatusChatListCategoryItem}
|
||||
\li \l{StatusChatListAndCategories}
|
||||
\li \l{StatusChatToolBar}
|
||||
\li \l{StatusContactRequestsIndicatorListItem}
|
||||
\li \l{StatusDescriptionListItem}
|
||||
\li \l{StatusItemSelector}
|
||||
\li \l{StatusLetterIdenticon}
|
||||
\li \l{StatusListItem}
|
||||
\li \l{StatusListPicker}
|
||||
\li \l{StatusListSectionHeadline}
|
||||
\li \l{StatusLoadingIndicator}
|
||||
\li \l{StatusMemberListItem}
|
||||
\li \l{StatusNavigationListItem}
|
||||
\li \l{StatusNavigationPanelHeadline}
|
||||
\li \l{StatusRoundIcon}
|
||||
\li \l{StatusRoundedImage}
|
||||
\li \l{StatusMacWindowButtons}
|
||||
\li \l{StatusListItemBadge}
|
||||
\li \l{StatusExpandableItem}
|
||||
\li \l{StatusSmartIdenticon}
|
||||
\li \l{StatusMessage}
|
||||
\li \l{StatusMessageDetails}
|
||||
\li \l{StatusTagSelector}
|
||||
\li \l{StatusToastMessage}
|
||||
\li \l{StatusWizardStepper}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,51 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Controls 0.1
|
||||
\title StatusQ Controls
|
||||
\brief Basic set of Controls StatusQ components
|
||||
|
||||
This is a listing of all Controls components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAccountSelector}
|
||||
\li \l{StatusAssetSelector}
|
||||
\li \l{StatusBanner}
|
||||
\li \l{StatusChatCommandButton}
|
||||
\li \l{StatusChatInfoButton}
|
||||
\li \l{StatusChatListCategoryItemButton}
|
||||
\li \l{StatusColorSelector}
|
||||
\li \l{StatusDropdown}
|
||||
\li \l{StatusIconTabButton}
|
||||
\li \l{StatusNavBarTabButton}
|
||||
\li \l{StatusTabBarIconButton}
|
||||
\li \l{StatusToolTip}
|
||||
\li \l{StatusBaseButton}
|
||||
\li \l{StatusButton}
|
||||
\li \l{StatusFlatButton}
|
||||
\li \l{StatusRoundButton}
|
||||
\li \l{StatusFlatRoundButton}
|
||||
\li \l{StatusSwitch}
|
||||
\li \l{StatusRadioButton}
|
||||
\li \l{StatusCheckBox}
|
||||
\li \l{StatusSlider}
|
||||
\li \l{StatusSelect}
|
||||
\li \l{StatusBaseInput}
|
||||
\li \l{StatusIconTextButton}
|
||||
\li \l{StatusIdenticonRing}
|
||||
\li \l{StatusInput}
|
||||
\li \l{StatusItemPicker}
|
||||
\li \l{StatusPickerButton}
|
||||
\li \l{StatusPinInput}
|
||||
\li \l{StatusProgressBar}
|
||||
\li \l{StatusPasswordStrengthIndicator}
|
||||
\li \l{StatusSwitchTabButton}
|
||||
\li \l{StatusSwitchTabBar}
|
||||
\li \l{StatusSelectableText}
|
||||
\li \l{StatusWalletColorButton}
|
||||
\li \l{StatusWalletColorSelect}
|
||||
\li \l{StatusRegularExpressionValidator}
|
||||
\li \l{StatusIntValidator}
|
||||
\li \l{StatusSeedPhraseInput}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,24 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Core 0.1
|
||||
\title StatusQ Core
|
||||
\brief Basic set of Core StatusQ components
|
||||
|
||||
This is a listing of all Core components. These
|
||||
files are available for general import and they are based off the \l{https://doc.qt.io/qt-5/qtquick-qmlmodule.html}{Qt
|
||||
Quick Primitives} and \l{https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html}{Qt Quick Controls 2}.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAppNavBarFilterModel}
|
||||
\li \l{StatusBaseText}
|
||||
\li \l{StatusFontSettings}
|
||||
\li \l{StatusIcon}
|
||||
\li \l{StatusIconBackgroundSettings}
|
||||
\li \l{StatusIconSettings}
|
||||
\li \l{StatusIdenticonRingSettings}
|
||||
\li \l{StatusImageSettings}
|
||||
\li \l{StatusModalHeaderSettings}
|
||||
\li \l{StatusTooltipSettings}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,16 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Layout 0.1
|
||||
\title StatusQ Layout
|
||||
\brief Basic set of Layout StatusQ components
|
||||
|
||||
This is a listing of all Layout components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAppLayout}
|
||||
\li \l{StatusAppNavBar}
|
||||
\li \l{StatusAppTwoPanelLayout}
|
||||
\li \l{StatusAppThreePanelLayout}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,15 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Platform 0.1
|
||||
\title StatusQ Platform
|
||||
\brief Basic set of Platform StatusQ components
|
||||
|
||||
This is a listing of all Platform components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusMacTrafficLights}
|
||||
\li \l{StatusMacNotification}
|
||||
\li \l{StatusWindowsTitleBar}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,22 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Popups 0.1
|
||||
\title StatusQ Popups
|
||||
\brief Basic set of Popups StatusQ components
|
||||
|
||||
This is a listing of all Popups components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusMenuSeparator}
|
||||
\li \l{StatusPopupMenu}
|
||||
\li \l{StatusMenuItem}
|
||||
\li \l{StatusMenuItemDelegate}
|
||||
\li \l{StatusModal}
|
||||
\li \l{StatusSearchPopup}
|
||||
\li \l{StatusModalDivider}
|
||||
\li \l{StatusSearchPopupMenuItem}
|
||||
\li \l{StatusSearchLocationMenu}
|
||||
\li \l{StatusSpellcheckingMenuItems}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,36 +0,0 @@
|
||||
project = StatusQ
|
||||
version = 0.1
|
||||
description = StatusQ Project
|
||||
url = https://github.com/status-im/StatusQ
|
||||
|
||||
#These are set implictly by qdoc as well, but only with these the module header can be found
|
||||
includepaths = -I . \
|
||||
-I $PWD/../src/StatusQ
|
||||
|
||||
imagedirs = src/images
|
||||
sourcedirs += src \
|
||||
$PWD/../src/StatusQ/Components \
|
||||
$PWD/../src/StatusQ/Controls \
|
||||
$PWD/../src/StatusQ/Core \
|
||||
$PWD/../src/StatusQ/Layout \
|
||||
$PWD/../src/StatusQ/Platform \
|
||||
$PWD/../src/StatusQ/Popups \
|
||||
|
||||
sources.fileextensions = "*.cpp *.qdoc *.qml"
|
||||
|
||||
depends += qtcore \
|
||||
qtquick \
|
||||
qtqml \
|
||||
qtgui \
|
||||
qtdoc \
|
||||
qtquickcontrols2
|
||||
|
||||
navigation.homepage = "StatusQ"
|
||||
|
||||
outputdir = $PWD/html
|
||||
outputformats = HTML
|
||||
|
||||
HTML.stylesheets = style.css
|
||||
HTML.headerstyles = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\"/>\n"
|
||||
HTML.postheader = "<p class=\"header\"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/>"
|
||||
HTML.footer = "<hr/><div class=\"footer\"><p><acronym title=\"Copyright\">©</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
|
||||
@@ -1,41 +0,0 @@
|
||||
body {
|
||||
font-family: "Verdana";
|
||||
font-size: 14px;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #4360DF;
|
||||
}
|
||||
|
||||
div.sidebar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 15px;
|
||||
}
|
||||
div.qmlproto {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
pre, div.qmlproto {
|
||||
font-family: "Courier New";
|
||||
font-size: 20px;
|
||||
margin-left: 2em;
|
||||
background-color: #F0F2F5;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
p.header {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
p.footer {
|
||||
text-align: right;
|
||||
margin-top: -1em;
|
||||
}
|
||||
@@ -0,0 +1,239 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Grid {
|
||||
|
||||
columns: 3
|
||||
columnSpacing: 38
|
||||
rowSpacing: 10
|
||||
|
||||
horizontalItemAlignment: Grid.AlignHCenter
|
||||
|
||||
// Large
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Small
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
|
||||
// blue
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// black
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded blue
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded white
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
loading: true
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
project(Sandbox)
|
||||
|
||||
find_package(
|
||||
Qt5
|
||||
COMPONENTS Core Quick QuickControls2
|
||||
REQUIRED)
|
||||
|
||||
file(GLOB_RECURSE QML_FILES "../*.qml")
|
||||
file(GLOB_RECURSE JS_FILES "../*.js")
|
||||
file(GLOB_RECURSE HEADERS *.h)
|
||||
if(APPLE)
|
||||
file(GLOB_RECURSE SOURCES *.cpp *.mm)
|
||||
else()
|
||||
file(GLOB_RECURSE SOURCES *.cpp)
|
||||
endif()
|
||||
|
||||
qt5_add_big_resources(QRC_FILES qml.qrc ../src/statusq.qrc ../src/assets.qrc)
|
||||
|
||||
add_executable(
|
||||
${PROJECT_NAME}
|
||||
${HEADERS}
|
||||
${SOURCES}
|
||||
${QRC_FILES}
|
||||
${QML_FILES}
|
||||
${JS_FILES})
|
||||
|
||||
target_compile_definitions(${PROJECT_NAME}
|
||||
PRIVATE SRC_DIR="${CMAKE_CURRENT_LIST_DIR}")
|
||||
target_link_libraries(
|
||||
${PROJECT_NAME} PRIVATE Qt5::Core Qt5::Quick Qt5::QuickControls2
|
||||
SortFilterProxyModel)
|
||||
|
||||
if (APPLE)
|
||||
find_library(AppKit AppKit)
|
||||
find_library(Foundation Foundation)
|
||||
|
||||
target_link_libraries(${PROJECT_NAME} PRIVATE ${AppKit} ${Foundation})
|
||||
endif()
|
||||
@@ -0,0 +1,174 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "chat"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.color: Theme.palette.miscColor9
|
||||
// This icon source is flawed and demonstrates the fallback case
|
||||
// when the image source can't be loaded
|
||||
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
|
||||
name: "Pascal"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Hover me!"
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Top"
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Right"
|
||||
orientation: StatusToolTip.Orientation.Right
|
||||
x: parent.width + 16
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Bottom"
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: parent.height + 12
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Left"
|
||||
orientation: StatusToolTip.Orientation.Left
|
||||
x: -parent.width /2 -8
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
name: "#status"
|
||||
tooltip.text: "Some Channel"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
tooltip.text: "Some Community"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
tooltip.text: "Profile"
|
||||
badge.value: 0
|
||||
badge.visible: true
|
||||
badge.anchors.leftMargin:-16
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
badge.value: 35
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
badge.value: 100
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
|
||||
}
|
||||
|
||||
StatusRadioButton {
|
||||
text: "i'm radio!"
|
||||
}
|
||||
|
||||
StatusCheckBox {}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
muted: true
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "group"
|
||||
subTitle: "Group Chat"
|
||||
pinnedMessagesCount: 1
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.GroupChat
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "public-chat"
|
||||
subTitle: "Public Chat"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.PublicChat
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "community-channel"
|
||||
subTitle: "Community Chat"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
width: 360
|
||||
from: 0
|
||||
to: 100
|
||||
value: 40
|
||||
}
|
||||
|
||||
StatusBaseInput {
|
||||
placeholderText: "One line"
|
||||
}
|
||||
|
||||
StatusBaseInput {
|
||||
multiline: true
|
||||
placeholderText: "Multiline"
|
||||
}
|
||||
|
||||
StatusBaseInput {
|
||||
multiline: true
|
||||
placeholderText: "Multiline with static height"
|
||||
implicitHeight: 100
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitHeight: 300
|
||||
implicitWidth: 300
|
||||
|
||||
StatusBaseInput {
|
||||
anchors.centerIn: parent
|
||||
multiline: true
|
||||
placeholderText: "Multiline with max/min"
|
||||
minimumHeight: 80
|
||||
maximumHeight: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
+775
-130
@@ -7,65 +7,46 @@ import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import "demoapp"
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
Rectangle {
|
||||
id: demoApp
|
||||
height: 602
|
||||
width: 1002
|
||||
width: 902
|
||||
border.width: 1
|
||||
border.color: Theme.palette.baseColor2
|
||||
|
||||
property string titleStyle: "osx"
|
||||
Row {
|
||||
anchors.top: demoApp.top
|
||||
anchors.left: demoApp.left
|
||||
anchors.topMargin: 14
|
||||
anchors.leftMargin: 14
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int communitiesPortal: 2
|
||||
readonly property int wallet: 3
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 5
|
||||
readonly property int profileSettings: 6
|
||||
readonly property int apiDocumentation: 100
|
||||
readonly property int demoApp: 101
|
||||
}
|
||||
spacing: 6
|
||||
z: statusAppLayout.z + 1
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
|
||||
let item = Models.demoAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId)
|
||||
{
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", false)
|
||||
continue
|
||||
}
|
||||
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", true);
|
||||
Rectangle {
|
||||
color: "#E24640"
|
||||
height: 12
|
||||
width: 12
|
||||
radius: 6
|
||||
}
|
||||
Rectangle {
|
||||
color: "#FFC12F"
|
||||
height: 12
|
||||
width: 12
|
||||
radius: 6
|
||||
}
|
||||
Rectangle {
|
||||
color: "#2ACB42"
|
||||
height: 12
|
||||
width: 12
|
||||
radius: 6
|
||||
}
|
||||
}
|
||||
|
||||
StatusMacTrafficLights {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.margins: 13
|
||||
z: statusAppLayout.z + 1
|
||||
visible: titleStyle === "osx"
|
||||
}
|
||||
|
||||
StatusWindowsTitleBar {
|
||||
id: windowsTitle
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
z: statusAppLayout.z + 1
|
||||
visible: titleStyle === "windows"
|
||||
}
|
||||
|
||||
StatusMainLayout {
|
||||
StatusAppLayout {
|
||||
id: statusAppLayout
|
||||
anchors.top: windowsTitle.visible ? windowsTitle.bottom : demoApp.top
|
||||
anchors.top: demoApp.top
|
||||
anchors.left: demoApp.left
|
||||
anchors.topMargin: demoApp.border.width
|
||||
anchors.leftMargin: demoApp.border.width
|
||||
@@ -73,83 +54,36 @@ Rectangle {
|
||||
height: demoApp.height - demoApp.border.width * 2
|
||||
width: demoApp.width - demoApp.border.width * 2
|
||||
|
||||
leftPanel: StatusAppNavBar {
|
||||
appNavBar: StatusAppNavBar {
|
||||
|
||||
id: navBar
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: Models.demoAppSectionsModel
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
onAboutToUpdateFilteredRegularModel: {
|
||||
communityAdded = false
|
||||
}
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
checked: appView.sourceComponent == statusAppChatView
|
||||
onClicked: {
|
||||
if(model.sectionType === appSectionType.chat)
|
||||
{
|
||||
appView.sourceComponent = statusAppChatView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
else if(model.sectionType === appSectionType.communitiesPortal)
|
||||
{
|
||||
appView.sourceComponent = statusCommunityPortalView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
else if(model.sectionType === appSectionType.profileSettings)
|
||||
{
|
||||
appView.sourceComponent = statusAppProfileSettingsView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
appView.sourceComponent = statusAppChatView
|
||||
}
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Status Community"
|
||||
tooltipText: "Status Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
id: communityBtn
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
name: model.name
|
||||
tooltip.text: model.tooltipText
|
||||
icon.color: Theme.palette.miscColor6
|
||||
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
checked: appView.sourceComponent == statusAppCommunityView
|
||||
onClicked: {
|
||||
if(model.sectionType === appSectionType.community)
|
||||
{
|
||||
appView.sourceComponent = statusAppCommunityView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
appView.sourceComponent = statusAppCommunityView
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
@@ -174,14 +108,48 @@ Rectangle {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-left"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
id: profileNavButton
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
|
||||
checked: appView.sourceComponent == statusAppProfileSettingsView
|
||||
onClicked: {
|
||||
appView.sourceComponent = statusAppProfileSettingsView
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
rightPanel: Loader {
|
||||
appView: Loader {
|
||||
id: appView
|
||||
anchors.fill: parent
|
||||
sourceComponent: statusAppChatView
|
||||
@@ -190,36 +158,713 @@ Rectangle {
|
||||
|
||||
Component {
|
||||
id: statusAppChatView
|
||||
StatusAppChatView { }
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatListItems.model: demoChatListItems
|
||||
selectedChatId: "0"
|
||||
onChatItemSelected: selectedChatId = id
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < demoChatListItems.count; i++) {
|
||||
let item = demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
notificationCount: 1
|
||||
|
||||
onNotificationButtonClicked: notificationCount = 0
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAppCommunityView
|
||||
StatusAppCommunityView {
|
||||
communityDetailModalTitle: demoCommunityDetailModal.header.title
|
||||
communityDetailModalImage: demoCommunityDetailModal.header.asset.name
|
||||
onChatInfoButtonClicked: {
|
||||
demoCommunityDetailModal.open();
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatInfoButton.title: "CryptoKitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.onClicked: demoCommunityDetailModal.open()
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
width: leftPanel.width
|
||||
|
||||
chatList.model: demoCommunityChatListItems
|
||||
categoryList.model: demoCommunityCategoryItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
onChatItemSelected: selectedChatId = id
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Category"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Edit Category"
|
||||
icon.name: "edit"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete Category"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "general"
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAppProfileSettingsView
|
||||
StatusAppProfileSettingsView { }
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: profileHeadline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Profile"
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
anchors.top: profileHeadline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
|
||||
contentHeight: profileMenuItems.height + 8
|
||||
contentWidth: parent.width
|
||||
clip: true
|
||||
|
||||
Column {
|
||||
id: profileMenuItems
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: invisibleSeparator
|
||||
height: 16
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusCommunityPortalView
|
||||
StatusAppCommunitiesPortalView { }
|
||||
}
|
||||
|
||||
DemoContactRequestsModal {
|
||||
StatusModal {
|
||||
id: demoContactRequestsModal
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Contact Requests"
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
content: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Contact request will be shown here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Decline all"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
onClicked: demoContactRequestsModal.close()
|
||||
},
|
||||
StatusButton {
|
||||
text: "Accept all"
|
||||
onClicked: demoContactRequestsModal.close()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
DemoCommunityDetailModal {
|
||||
StatusModal {
|
||||
id: demoCommunityDetailModal
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Cryptokitties"
|
||||
header.subTitle: "Public Community"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
|
||||
content: Column {
|
||||
width: demoCommunityDetailModal.width
|
||||
|
||||
StatusModalDivider {
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: "A community of cat lovers, meow!"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
height: 46
|
||||
color: Theme.palette.directColor1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Share community"
|
||||
subTitle: "https://join.status.im/u/0x04...45f19"
|
||||
tooltip.text: "Copy to clipboard"
|
||||
icon.name: "copy"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Members"
|
||||
icon.name: "group-chat"
|
||||
label: "184"
|
||||
components: [
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Notifications"
|
||||
icon.name: "notification"
|
||||
components: [
|
||||
StatusSwitch {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Edit community"
|
||||
icon.name: "edit"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Transfer ownership"
|
||||
icon.name: "exchange"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Leave community"
|
||||
icon.name: "arrow-right"
|
||||
icon.rotation: 180
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
hasMention: false
|
||||
unreadMessagesCount: 0
|
||||
color: "blue"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
hasUnreadMessages: true
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
hasUnreadMessages: false
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
hasMention: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
hasMention: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
hasMention: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
hasUnreadMessages: false
|
||||
hasMention: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
name: "Public"
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
name: "Development"
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileGeneralMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "My Profile"
|
||||
icon: "profile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Contacts"
|
||||
icon: "contact"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "ENS Usernames"
|
||||
icon: "username"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileSettingsMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Privacy & Security"
|
||||
icon: "security"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Appearance"
|
||||
icon: "appearance"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Browser"
|
||||
icon: "browser"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sounds"
|
||||
icon: "sound"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Language"
|
||||
icon: "language"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Notifications"
|
||||
icon: "notification"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sync settings"
|
||||
icon: "mobile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Advanced"
|
||||
icon: "settings"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: demoProfileOtherMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Need help?"
|
||||
icon: "help"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "About"
|
||||
icon: "info"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sign out & Quit"
|
||||
icon: "logout"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,295 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
|
||||
Column {
|
||||
spacing: 5
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
chatInfoButton.muted: true
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
notificationCount: 1
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: 5
|
||||
Button {
|
||||
id: btn
|
||||
text: "Append"
|
||||
onClicked: {
|
||||
buttons.append({
|
||||
name: "Test community",
|
||||
tooltipText: "Test Community"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
id: buttons
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
id: test
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,250 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
icon.name: "info"
|
||||
badge.value: 1
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item (selected)"
|
||||
selected: true
|
||||
icon.name: "info"
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
id: test
|
||||
name: "public-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category"
|
||||
opened: false
|
||||
showActionButtons: true
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category (opened)"
|
||||
opened: true
|
||||
showActionButtons: true
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category (no buttons)"
|
||||
opened: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "group-chat"
|
||||
type: StatusChatListItem.Type.GroupChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel-with-image"
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "Weird Crazy Otter"
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "has-unread-messages"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "has-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "is-muted"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
onUnmute: muted = false
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
}
|
||||
StatusChatListItem {
|
||||
name: "selected-muted-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
muted: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
components: [StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
components: [StatusSwitch {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
components: [StatusRadioButton {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
components: [StatusCheckBox {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
components: [StatusSwitch {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusRadioButton {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
components: [StatusCheckBox {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
icon.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusBadge {
|
||||
value: 1
|
||||
},
|
||||
StatusIcon {
|
||||
icon: "info"
|
||||
color: Theme.palette.baseColor1
|
||||
width: 20
|
||||
height: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
icon.name: "info"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
tooltip.text: "Tooltip"
|
||||
icon.name: "info"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
}
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusLoadingIndicator {
|
||||
color: Theme.palette.directColor4
|
||||
}
|
||||
|
||||
StatusLetterIdenticon {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
StatusRoundedImage {
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusBadge {}
|
||||
|
||||
StatusBadge {
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 10
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 100
|
||||
}
|
||||
|
||||
StatusRoundIcon {
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,174 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
Column {
|
||||
spacing: 20
|
||||
|
||||
StatusButton {
|
||||
text: "Simple modal"
|
||||
onClicked: simpleModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with header image"
|
||||
onClicked: headerImageModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with footer buttons"
|
||||
onClicked: footerButtonsModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with header action button"
|
||||
onClicked: headerActionButtonModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with content"
|
||||
onClicked: modalExample.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with changable content"
|
||||
onClicked: modalWithContentAccess.open()
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: simpleModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: headerImageModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: footerButtonsModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
leftButtons: [
|
||||
StatusRoundButton {
|
||||
icon.name: "arrow-right"
|
||||
rotation: 180
|
||||
}
|
||||
]
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: headerActionButtonModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
leftButtons: [
|
||||
StatusRoundButton {
|
||||
icon.name: "arrow-right"
|
||||
rotation: 180
|
||||
}
|
||||
]
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalExample
|
||||
anchors.centerIn: parent
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
|
||||
leftButtons: [
|
||||
StatusRoundButton {
|
||||
icon.name: "arrow-right"
|
||||
rotation: 180
|
||||
}
|
||||
]
|
||||
|
||||
content: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithContentAccess
|
||||
anchors.centerIn: parent
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
|
||||
content: StatusBaseText {
|
||||
id: text
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithContentAccess.contentComponent.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -14,9 +14,8 @@ GridLayout {
|
||||
StatusChatInfoToolBar {
|
||||
chatInfoButton.title: "Cryptokitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.asset.isImage: true
|
||||
chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
chatInfoButton.asset.color: Theme.palette.miscColor6
|
||||
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtQuick.Controls 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusButton {
|
||||
text: "Simple"
|
||||
onClicked: simpleMenu.popup()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Complex"
|
||||
onClicked: complexMenu.popup()
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
id: simpleMenu
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Two"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
}
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
id: complexMenu
|
||||
subMenuItemIcons: ['info']
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Two"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Four"
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
icon.name: "info"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -7,8 +7,6 @@ Item {
|
||||
id: themeSwitchWrapper
|
||||
signal checkedChanged()
|
||||
|
||||
property alias lightThemeEnabled: switchControl.checked
|
||||
|
||||
width: themeSwitch.width
|
||||
height: themeSwitch.height
|
||||
|
||||
@@ -28,7 +26,6 @@ Item {
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
id: switchControl
|
||||
onCheckedChanged: themeSwitchWrapper.checkedChanged()
|
||||
|
||||
StatusToolTip {
|
||||
|
||||
@@ -1,432 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtQuick.Dialogs 1.3
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Column {
|
||||
spacing: 10
|
||||
Grid {
|
||||
id: buttonGridWidth
|
||||
columns: 3
|
||||
columnSpacing: 38
|
||||
rowSpacing: 10
|
||||
|
||||
horizontalItemAlignment: Grid.AlignHCenter
|
||||
|
||||
// Primary
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Primary
|
||||
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Look I'm a tooltip on a button!"
|
||||
}
|
||||
onClicked: console.warn("Primary button clicked")
|
||||
onPressed: console.warn("Primary button pressed")
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
type: StatusBaseButton.Type.Primary
|
||||
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Tooltip on a disabled button, should not be visible!"
|
||||
}
|
||||
onClicked: console.warn("Primary disabled button clicked, this should not happen !!!")
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
type: StatusBaseButton.Type.Primary
|
||||
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Look I'm a tooltip on a loading button!"
|
||||
}
|
||||
onClicked: console.warn("Primary loading button clicked, this should not happen !!!")
|
||||
}
|
||||
|
||||
// Large
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Large + Icon
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
// Danger
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
// Flat
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Flat + Danger
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Small
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Small + danger
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Flat + small
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
|
||||
// blue
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// black
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// transparent
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Tertiary
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Tertiary
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Tertiary
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded blue
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded white
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
loading: true
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
// Tertiary
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
icon.name: "gif"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
icon.name: "gif"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
icon.name: "gif"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// No background Tertiary
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
color: "transparent"
|
||||
icon.name: "gif"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
icon.name: "gif"
|
||||
color: "transparent"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
icon.name: "gif"
|
||||
color: "transparent"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Quartenery
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Quaternary
|
||||
icon.name: "gif"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Quaternary
|
||||
icon.name: "gif"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Quaternary
|
||||
icon.name: "gif"
|
||||
loading: true
|
||||
}
|
||||
}
|
||||
|
||||
StatusPickerButton {
|
||||
width: buttonGridWidth.width
|
||||
bgColor: colorDialog.colorSelected ? colorDialog.color : Theme.palette.baseColor2
|
||||
contentColor: colorDialog.colorSelected ? Theme.palette.indirectColor1 : Theme.palette.baseColor1
|
||||
text: colorDialog.colorSelected ? colorDialog.color.toString().toUpperCase() : "Pick a color"
|
||||
onClicked: {
|
||||
colorDialog.open();
|
||||
}
|
||||
}
|
||||
|
||||
StatusColorDialog {
|
||||
id: colorDialog
|
||||
anchors.centerIn: parent
|
||||
property bool colorSelected: false
|
||||
onAccepted: {
|
||||
colorSelected = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Button with emoji
|
||||
StatusButton {
|
||||
text: "Button with Emoji"
|
||||
asset.emoji: "🖼️️"
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
width: parent.width
|
||||
text: "wide"
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
spacing: 20
|
||||
|
||||
StatusIconTextButton {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
spacing: 0
|
||||
statusIcon: "next"
|
||||
icon.width: 24
|
||||
icon.height: 24
|
||||
iconRotation: 180
|
||||
text: "Previous page"
|
||||
font.pixelSize: 15
|
||||
onClicked: testText.visible = !testText.visible
|
||||
}
|
||||
StatusBaseText {
|
||||
id: testText
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: "Click and hide!"
|
||||
font.pixelSize: 15
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,241 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusSelectableText {
|
||||
color: Theme.palette.baseColor1
|
||||
text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
|
||||
font.pixelSize: 15
|
||||
width: 300
|
||||
multiline: true
|
||||
}
|
||||
|
||||
StatusSelectableText {
|
||||
color: Theme.palette.baseColor1
|
||||
text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
|
||||
font.pixelSize: 15
|
||||
width: 200
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "chat"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.color: Theme.palette.miscColor9
|
||||
// This icon source is flawed and demonstrates the fallback case
|
||||
// when the image source can't be loaded
|
||||
icon.source: "https://httpstat.us/404"
|
||||
name: "Pascal"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
Button {
|
||||
text: "Hover me!"
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Top"
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Right"
|
||||
orientation: StatusToolTip.Orientation.Right
|
||||
x: parent.width + 16
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Bottom"
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: parent.height + 12
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Left"
|
||||
orientation: StatusToolTip.Orientation.Left
|
||||
x: -parent.width /2 -8
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
name: "#status"
|
||||
tooltip.text: "Some Channel"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.source: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
tooltip.text: "Some Community"
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
tooltip.text: "Profile"
|
||||
badge.value: 0
|
||||
badge.visible: true
|
||||
badge.anchors.leftMargin:-16
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
badge.value: 35
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
badge.value: 100
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
|
||||
}
|
||||
StatusSwitch {
|
||||
text: "Switch with text"
|
||||
}
|
||||
|
||||
StatusRadioButton {
|
||||
text: "Radio button 1"
|
||||
checked: true
|
||||
}
|
||||
StatusRadioButton {
|
||||
text: "Radio button 2 (clicking on this text will uncheck the above)"
|
||||
}
|
||||
StatusRadioButton {
|
||||
LayoutMirroring.enabled : true
|
||||
text: "Radio button 3 (forced right-to-left)"
|
||||
}
|
||||
|
||||
StatusCheckBox {}
|
||||
StatusCheckBox { checkState: Qt.Checked}
|
||||
StatusCheckBox { text: "Check me on left side"}
|
||||
StatusCheckBox { text: "Check me on right side"; leftSide: false}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias"
|
||||
subTitle: "Contact"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
muted: true
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: 100
|
||||
implicitHeight: 48
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias elided"
|
||||
subTitle: "Very long subtitle should elide as well"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
muted: true
|
||||
pinnedMessagesCount: 10
|
||||
width: 100
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: 100
|
||||
implicitHeight: 48
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias big not elided"
|
||||
subTitle: "Contact"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
muted: true
|
||||
pinnedMessagesCount: 1
|
||||
width: 400
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "group"
|
||||
subTitle: "Group Chat"
|
||||
pinnedMessagesCount: 1
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.GroupChat
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "public-chat"
|
||||
subTitle: "Public Chat"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.PublicChat
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "community-channel"
|
||||
subTitle: "Community Chat"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "community-channel"
|
||||
subTitle: "Some very long description text to see how the whole item wraps or elides"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
pinnedMessagesCount: 3
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
width: 360
|
||||
from: 0
|
||||
to: 100
|
||||
value: 40
|
||||
}
|
||||
|
||||
StatusLabeledSlider {
|
||||
width: 360
|
||||
model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
|
||||
}
|
||||
|
||||
StatusLabeledSlider {
|
||||
width: 360
|
||||
model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
|
||||
}
|
||||
|
||||
StatusBanner {
|
||||
id: banner
|
||||
width: 360
|
||||
topPadding: 20
|
||||
type: StatusBanner.Type.Danger
|
||||
statusText: "Banner"
|
||||
}
|
||||
|
||||
StatusProgressBar {
|
||||
id: progressBar
|
||||
text: "Weak"
|
||||
value: 0.5
|
||||
fillColor : Theme.palette.pinColor1
|
||||
}
|
||||
}
|
||||
@@ -1,498 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
Column {
|
||||
spacing: 10
|
||||
|
||||
StatusToolBar {
|
||||
width: 518
|
||||
headerContent: StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
}
|
||||
|
||||
StatusToolBar {
|
||||
width: 518
|
||||
|
||||
headerContent: StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Muted public chat"
|
||||
subTitle: "Some subtitle"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.PublicChat
|
||||
pinnedMessagesCount: 1
|
||||
muted: true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusToolBar {
|
||||
notificationCount: 1
|
||||
width: 518
|
||||
|
||||
headerContent: StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Group chat"
|
||||
subTitle: "Group chat subtitle"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.GroupChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
}
|
||||
|
||||
StatusToolBar {
|
||||
width: 518
|
||||
|
||||
headerContent: StatusChatInfoButton {
|
||||
title: "Community chat"
|
||||
subTitle: "Some very long description text to see how the whole item wraps or ellides"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
pinnedMessagesCount: 3
|
||||
}
|
||||
}
|
||||
|
||||
StatusToolBar {
|
||||
headerContent: StatusChatInfoButton {
|
||||
title: "Very long chat name"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
pinnedMessagesCount: 1234567891
|
||||
}
|
||||
}
|
||||
|
||||
StatusToolBar {
|
||||
notificationCount: 1
|
||||
width: 518
|
||||
|
||||
StatusTagSelector {
|
||||
namesModel: ListModel {
|
||||
ListElement {
|
||||
publicId: "0x0"
|
||||
name: "Maria"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
isReadonly: true
|
||||
tagIcon: "crown"
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x1"
|
||||
name: "James"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 1
|
||||
isReadonly: false
|
||||
tagIcon: ""
|
||||
}
|
||||
}
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("USER LIMIT REACHED")
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: 5
|
||||
Button {
|
||||
id: btn
|
||||
text: "Append"
|
||||
onClicked: {
|
||||
buttons.append({
|
||||
name: "Test community",
|
||||
tooltipText: "Test Community"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-left"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-left"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-left"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
|
||||
ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
|
||||
ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
|
||||
ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-left"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,617 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQml.Models 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 5
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
asset.name: "info"
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item"
|
||||
asset.name: "info"
|
||||
badge.value: 1
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item (selected) with very long text"
|
||||
selected: true
|
||||
asset.name: "info"
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
id: test
|
||||
name: "public-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category"
|
||||
opened: false
|
||||
showActionButtons: true
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category (opened)"
|
||||
opened: true
|
||||
showActionButtons: true
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
title: "Chat list category (no buttons)"
|
||||
opened: true
|
||||
}
|
||||
|
||||
StatusChatListCategoryItem {
|
||||
id: categoryItemInteractive
|
||||
title: "Chat category interactive"
|
||||
showActionButtons: true
|
||||
onAddButtonClicked: testEventsList.eventTriggered("Add button clicked")
|
||||
onMenuButtonClicked: testEventsList.eventTriggered("Menu button clicked")
|
||||
onToggleButtonClicked: {
|
||||
opened = !opened
|
||||
testEventsList.eventTriggered("Toggle button clicked")
|
||||
}
|
||||
onTitleClicked: {
|
||||
testEventsList.eventTriggered("Title clicked")
|
||||
}
|
||||
onClicked: {
|
||||
opened = !opened
|
||||
testEventsList.eventTriggered("Item clicked", itemId)
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: testEventsList
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: categoryItemInteractive.opened ? 20 * count : 0
|
||||
|
||||
clip: true
|
||||
|
||||
function eventTriggered(message) {
|
||||
let obj = eventDelegateComponent.createObject()
|
||||
obj.text = message
|
||||
model.insert(0, obj)
|
||||
}
|
||||
|
||||
Component {
|
||||
id: eventDelegateComponent
|
||||
|
||||
ItemDelegate {
|
||||
implicitHeight: 20
|
||||
|
||||
property int index: ObjectModel.index
|
||||
|
||||
Timer {
|
||||
interval: 5000; running: true
|
||||
onTriggered: testObjectModel.remove(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
model: ObjectModel {
|
||||
id: testObjectModel
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "group-chat"
|
||||
type: StatusChatListItem.Type.GroupChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel-emoji"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
asset.emoji: "😁"
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel-with-image"
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "Weird Crazy Otter"
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
type: StatusChatListItem.Type.OneToOneChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "has-unread-messages"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "has-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "is-muted"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
onUnmute: muted = false
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "muted-with-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-muted-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
muted: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-muted-channel-with-unread-messages"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-muted-with-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
}
|
||||
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
tertiaryTitle: "Tertiary title"
|
||||
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
statusListItemTitle.font.weight: Font.Bold
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
|
||||
tertiaryTitle: "Tertiary title"
|
||||
asset.name: "info"
|
||||
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
statusListItemTitle.font.weight: Font.Bold
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.isImage: true
|
||||
asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.isImage: true
|
||||
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
asset.imgIsIdenticon: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
components: [StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
components: [StatusSwitch {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
components: [StatusRadioButton {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
components: [StatusCheckBox {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
components: [StatusSwitch {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusRadioButton {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
components: [StatusCheckBox {}]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
asset.name: "info"
|
||||
label: "Text"
|
||||
components: [
|
||||
StatusBadge {
|
||||
value: 1
|
||||
},
|
||||
StatusIcon {
|
||||
icon: "info"
|
||||
color: Theme.palette.baseColor1
|
||||
width: 20
|
||||
height: 20
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
asset.name: "info"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
asset.isLetterIdenticon: true
|
||||
asset.color: "orange"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
titleAsideText: "test"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
asset.name: "delete"
|
||||
type: StatusListItem.Type.Danger
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge"
|
||||
subTitle: "Subtitle"
|
||||
asset.isImage: true
|
||||
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
asset.imgIsIdenticon: true
|
||||
badge.asset.isImage: true
|
||||
badge.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge 2"
|
||||
subTitle: "Subtitle"
|
||||
asset.isLetterIdenticon: true
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
badge.asset.color: "orange"
|
||||
badge.asset.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Tags"
|
||||
asset.isLetterIdenticon: true
|
||||
bottomModel: 3
|
||||
bottomDelegate: StatusListItemTag {
|
||||
title: "tag"
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Inline Tags"
|
||||
asset.isLetterIdenticon: true
|
||||
tagsModel: ListModel{
|
||||
ListElement {
|
||||
name: "helloworld.eth"
|
||||
emoji: "😁"
|
||||
}
|
||||
ListElement {
|
||||
name: "account1"
|
||||
emoji: "😁"
|
||||
}
|
||||
ListElement {
|
||||
name: "account2"
|
||||
emoji: "😁"
|
||||
}
|
||||
ListElement {
|
||||
name: "account3"
|
||||
emoji: "😁"
|
||||
}
|
||||
ListElement {
|
||||
name: "account4"
|
||||
emoji: "😁"
|
||||
}
|
||||
}
|
||||
tagsDelegate: StatusListItemTag {
|
||||
color: "blue"
|
||||
height: 24
|
||||
radius: 6
|
||||
closeButtonVisible: false
|
||||
asset.emoji: model.emoji
|
||||
asset.emojiSize: Emoji.size.verySmall
|
||||
asset.isLetterIdenticon: true
|
||||
title: model.name
|
||||
titleText.font.pixelSize: 12
|
||||
titleText.color: Theme.palette.indirectColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Emoji"
|
||||
subTitle: "Emoji"
|
||||
asset.emoji: "😁"
|
||||
asset.color: "yellow"
|
||||
asset.letterSize: 14
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
value: "None"
|
||||
sensor.enabled: true
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
tooltip.text: "Tooltip"
|
||||
asset.name: "info"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
}
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This is an example"
|
||||
userName: "annabelle"
|
||||
pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
|
||||
isVerified: true
|
||||
isContact: true
|
||||
asset.isImage: true
|
||||
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
asset.imgIsIdenticon: true
|
||||
status: 1 // FIXME: use enum
|
||||
ringSettings.ringSpecModel:
|
||||
ListModel {
|
||||
ListElement {colorId: 13; segmentLength: 5}
|
||||
ListElement {colorId: 31; segmentLength: 5}
|
||||
ListElement {colorId: 10; segmentLength: 1}
|
||||
ListElement {colorId: 2; segmentLength: 5}
|
||||
ListElement {colorId: 26; segmentLength: 2}
|
||||
ListElement {colorId: 19; segmentLength: 4}
|
||||
ListElement {colorId: 28; segmentLength: 3}
|
||||
}
|
||||
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "carmen.eth"
|
||||
isUntrustworthy: true
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "very-long-annoying-nickname.eth"
|
||||
isUntrustworthy: true
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "untrusted-admin.eth"
|
||||
asset.isLetterIdenticon: true
|
||||
isUntrustworthy: true
|
||||
isAdmin: true
|
||||
isContact: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This girl I know from work"
|
||||
userName: "annabelle"
|
||||
asset.isLetterIdenticon: true
|
||||
status: 1 // FIXME: use enum
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "Mark Cuban"
|
||||
userName: "annabelle"
|
||||
pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
|
||||
isContact: true
|
||||
asset.isImage: true
|
||||
asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
asset.imgIsIdenticon: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "admin.guy"
|
||||
userName: "adguy"
|
||||
isAdmin: true
|
||||
asset.isLetterIdenticon: true
|
||||
isUntrustworthy: true
|
||||
Component.onCompleted: {
|
||||
print(asset.name, asset.isImage, asset.isLetterIdenticon)
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
text: "Loading features:"
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Nokia 3310"
|
||||
subTitle: "Incoming device"
|
||||
label: "loading: true"
|
||||
asset.width: 40
|
||||
asset.height: 40
|
||||
asset.emoji: "😁"
|
||||
asset.color: "hotpink"
|
||||
asset.letterSize: 14
|
||||
asset.isLetterIdenticon: true
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Nokia 3310"
|
||||
subTitle: "Device"
|
||||
label: "loadingFailed: true"
|
||||
asset.width: 40
|
||||
asset.height: 40
|
||||
asset.emoji: "😁"
|
||||
asset.color: "hotpink"
|
||||
asset.letterSize: 14
|
||||
asset.isLetterIdenticon: true
|
||||
loadingFailed: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
implicitWidth: 600
|
||||
title: "List Item with Tags"
|
||||
subTitle: "03:32"
|
||||
asset.isLetterIdenticon: true
|
||||
inlineTagModel: 6
|
||||
inlineTagDelegate: StatusListItemTag {
|
||||
height: 24
|
||||
title: "tag"
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
components: [
|
||||
ColumnLayout {
|
||||
Row {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
spacing: 4
|
||||
StatusIcon {
|
||||
color: Theme.palette.successColor1
|
||||
icon: "arrow-up"
|
||||
rotation: 135
|
||||
height: 18
|
||||
}
|
||||
StatusBaseText {
|
||||
text: "0.0000015 ETH"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignRight
|
||||
text: "1201.10 USD"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,64 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
ColumnLayout {
|
||||
GridLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusLoadingIndicator {
|
||||
color: Theme.palette.directColor4
|
||||
}
|
||||
|
||||
StatusLetterIdenticon {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
StatusRoundedImage {
|
||||
image.source: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
}
|
||||
|
||||
StatusBadge {}
|
||||
|
||||
StatusBadge {
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 10
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 100
|
||||
}
|
||||
|
||||
StatusRoundIcon {
|
||||
asset.name: "info"
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: 12
|
||||
StatusLetterIdenticon {
|
||||
name: "A"
|
||||
color: Theme.palette.userCustomizationColors[index]
|
||||
letterSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusDatePicker {
|
||||
label: "Select date"
|
||||
}
|
||||
}
|
||||
@@ -1,459 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
Column {
|
||||
spacing: 20
|
||||
|
||||
StatusButton {
|
||||
text: "Simple modal"
|
||||
onClicked: simpleModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Simple title modal"
|
||||
onClicked: simpleTitleModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with header image"
|
||||
onClicked: headerImageModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with footer buttons"
|
||||
onClicked: footerButtonsModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with header action button"
|
||||
onClicked: headerActionButtonModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with content"
|
||||
onClicked: modalExample.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with changable content"
|
||||
onClicked: modalWithContentAccess.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with letter identicon"
|
||||
onClicked: modalWithLetterIdenticon.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with identicon"
|
||||
onClicked: modalWithIdenticon.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with editable identicon"
|
||||
onClicked: modalWithEditableIdenticon.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with long titles"
|
||||
onClicked: modalWithLongTitles.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Header Popup Menu"
|
||||
onClicked: modalWithHeaderPopupMenu.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Spellchecking menu"
|
||||
onClicked: spellMenu.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Editable Title"
|
||||
onClicked: editTitleModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Advanced Header/Footer"
|
||||
onClicked: advancedHeaderFooterModal.open()
|
||||
}
|
||||
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Floating header Buttons"
|
||||
onClicked: floatingHeaderModal.open()
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: simpleModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: simpleTitleModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: headerImageModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.asset.isImage: true
|
||||
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: footerButtonsModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.asset.isImage: true
|
||||
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
leftButtons: [
|
||||
StatusBackButton { }
|
||||
]
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: headerActionButtonModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some Title"
|
||||
header.subTitle: "Subtitle"
|
||||
header.asset.isImage: true
|
||||
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
leftButtons: [
|
||||
StatusBackButton { }
|
||||
]
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalExample
|
||||
anchors.centerIn: parent
|
||||
header.asset.isImage: true
|
||||
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
},
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
]
|
||||
|
||||
leftButtons: [
|
||||
StatusBackButton { }
|
||||
]
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithContentAccess
|
||||
anchors.centerIn: parent
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
id: text
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithContentAccess.contentItem.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithLetterIdenticon
|
||||
anchors.centerIn: parent
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
header.asset.isLetterIdenticon: true
|
||||
header.asset.bgColor: "red"
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithLetterIdenticon.contentItem.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithIdenticon
|
||||
anchors.centerIn: parent
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.asset.imgIsIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithIdenticon.contentItem.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithEditableIdenticon
|
||||
anchors.centerIn: parent
|
||||
header.title: "Header"
|
||||
header.subTitle: "SubTitle"
|
||||
header.headerImageEditable: true
|
||||
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.asset.imgIsIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithIdenticon.contentItem.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithLongTitles
|
||||
anchors.centerIn: parent
|
||||
header.title: "Some super long text here that exceeds the available space"
|
||||
header.subTitle: "Some super long text here that exceeds the available space"
|
||||
header.subTitleElide: Text.ElideMiddle
|
||||
header.asset.name: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.asset.imgIsIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Change text"
|
||||
onClicked: {
|
||||
modalWithLongTitles.contentItem.text = "Changed!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: modalWithHeaderPopupMenu
|
||||
anchors.centerIn: parent
|
||||
header.title: "helloworld.eth"
|
||||
header.subTitle: "Basic address"
|
||||
header.popupMenu: StatusPopupMenu {
|
||||
id: popupMenu
|
||||
Repeater {
|
||||
model: dummyAccountsModel
|
||||
delegate: Loader {
|
||||
sourceComponent: popupMenu.delegate
|
||||
onLoaded: {
|
||||
item.action.text = model.name
|
||||
item.action.assetSettings.name = model.iconName
|
||||
}
|
||||
}
|
||||
}
|
||||
onMenuItemClicked: {
|
||||
popupMenu.dismiss()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: editTitleModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "This title can be edited"
|
||||
header.editable: true
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: advancedHeaderFooterModal
|
||||
anchors.centerIn: parent
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
showAdvancedHeader: true
|
||||
showAdvancedFooter: true
|
||||
height: 200
|
||||
advancedHeaderComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: 1
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any header here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
advancedFooterComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: 1
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any footer here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: floatingHeaderModal
|
||||
anchors.centerIn: parent
|
||||
height: 200
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
showAdvancedHeader: true
|
||||
hasFloatingButtons: true
|
||||
advancedHeaderComponent: StatusFloatingButtonsSelector {
|
||||
id: floatingHeader
|
||||
model: dummyAccountsModel
|
||||
delegate: Rectangle {
|
||||
width: button.width
|
||||
height: button.height
|
||||
radius: 8
|
||||
visible: visibleIndices.includes(index)
|
||||
color: Theme.palette.statusAppLayout.backgroundColor
|
||||
StatusButton {
|
||||
id: button
|
||||
topPadding: 8
|
||||
bottomPadding: 0
|
||||
implicitHeight: 32
|
||||
leftPadding: 4
|
||||
text: name
|
||||
asset.emoji: !!emoji ? emoji: ""
|
||||
asset.emojiSize: Emoji.size.middle
|
||||
asset.name: !emoji ? "filled-account": ""
|
||||
normalColor: "transparent"
|
||||
highlighted: index === floatingHeader.currentIndex
|
||||
onClicked: {
|
||||
floatingHeader.currentIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
popupMenuDelegate: StatusListItem {
|
||||
implicitWidth: 272
|
||||
title: name
|
||||
onClicked: floatingHeader.itemSelected(index)
|
||||
visible: !visibleIndices.includes(index)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: dummyAccountsModel
|
||||
ListElement{name: "Account 1"; iconName: "filled-account"; emoji: "🥑"}
|
||||
ListElement{name: "Account 2"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 3"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 4"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 5"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 6"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 7"; iconName: "filled-account"}
|
||||
}
|
||||
|
||||
StatusSpellcheckingMenuItems {
|
||||
id: spellMenu
|
||||
anchors.centerIn: parent
|
||||
suggestions: ["suggestion1", "suggestion2", "suggestion3", "suggestion4"]
|
||||
}
|
||||
}
|
||||
@@ -1,130 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQml.Models 2.2
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
ListView {
|
||||
id: messageList
|
||||
anchors.fill: parent
|
||||
anchors.margins: 15
|
||||
clip: true
|
||||
|
||||
delegate: StatusMessage {
|
||||
id: delegate
|
||||
width: ListView.view.width
|
||||
|
||||
audioMessageInfoText: "Audio Message"
|
||||
cancelButtonText: "Cancel"
|
||||
saveButtonText: "Save"
|
||||
loadingImageText: "Loading image..."
|
||||
errorLoadingImageText: "Error loading the image"
|
||||
resendText: "Resend"
|
||||
pinnedMsgInfoText: "Pinned by"
|
||||
|
||||
timestamp: model.timestamp
|
||||
isAReply: model.isReply
|
||||
hasMention: model.hasMention
|
||||
isPinned: model.isPinned
|
||||
pinnedBy: model.pinnedBy
|
||||
hasExpired: model.hasExpired
|
||||
reactionsModel: model.reactions || []
|
||||
|
||||
messageDetails: StatusMessageDetails {
|
||||
contentType: model.contentType
|
||||
messageContent: model.messageContent
|
||||
amISender: model.amIsender
|
||||
sender.id: model.senderId
|
||||
sender.displayName: model.senderDisplayName
|
||||
sender.secondaryName: model.senderOptionalName
|
||||
sender.isContact: model.isContact
|
||||
sender.trustIndicator: model.trustIndicator
|
||||
sender.profileImage: StatusProfileImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
pubkey: model.senderId
|
||||
name: model.profileImage || ""
|
||||
colorId: 1
|
||||
colorHash: ListModel {
|
||||
ListElement { colorId: 13; segmentLength: 5 }
|
||||
ListElement { colorId: 31; segmentLength: 5 }
|
||||
ListElement { colorId: 10; segmentLength: 1 }
|
||||
ListElement { colorId: 2; segmentLength: 5 }
|
||||
ListElement { colorId: 26; segmentLength: 2 }
|
||||
ListElement { colorId: 19; segmentLength: 4 }
|
||||
ListElement { colorId: 28; segmentLength: 3 }
|
||||
}
|
||||
}
|
||||
|
||||
messageText: model.message
|
||||
}
|
||||
|
||||
replyDetails: StatusMessageDetails {
|
||||
amISender: model.isReply && model.replyAmISender
|
||||
sender.id: model.replySenderId || ""
|
||||
sender.displayName: model.isReply ? model.replySenderName: ""
|
||||
sender.secondaryName: model.isReply ? model.replySenderEnsName : ""
|
||||
sender.profileImage: StatusProfileImageSettings {
|
||||
width: 20
|
||||
height: 20
|
||||
name: model.isReply ? model.replyProfileImage: ""
|
||||
pubkey: model.replySenderId
|
||||
colorId: 1
|
||||
colorHash: ListModel {
|
||||
ListElement { colorId: 13; segmentLength: 5 }
|
||||
ListElement { colorId: 31; segmentLength: 5 }
|
||||
ListElement { colorId: 10; segmentLength: 1 }
|
||||
ListElement { colorId: 2; segmentLength: 5 }
|
||||
ListElement { colorId: 26; segmentLength: 2 }
|
||||
ListElement { colorId: 19; segmentLength: 4 }
|
||||
ListElement { colorId: 28; segmentLength: 3 }
|
||||
}
|
||||
}
|
||||
messageText: model.isReply ? model.replyMessageText: ""
|
||||
contentType: model.replyContentType
|
||||
messageContent: model.replyMessageContent
|
||||
}
|
||||
|
||||
quickActions: [
|
||||
StatusFlatRoundButton {
|
||||
id: emojiBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reaction-b"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Add reaction"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: replyBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reply"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Reply"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "tiny/edit"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Edit"
|
||||
onClicked: {
|
||||
delegate.editMode = !delegate.editMode
|
||||
}
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: otherBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "More"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,120 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Page {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
property ListModel contactsModel: null
|
||||
background: null
|
||||
|
||||
header: RowLayout {
|
||||
id: headerRow
|
||||
width: parent.width
|
||||
height: tagSelector.height
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
spacing: 16
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 17
|
||||
maxHeight: root.height
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("USER LIMIT REACHED")
|
||||
listLabel: qsTr("Contacts")
|
||||
ringSpecModelGetter: function(pubKey) {
|
||||
//for simulation purposes only, in real app
|
||||
//this would be Utils.getColorHashAsJson(pubKey)
|
||||
var index = -1;
|
||||
if (!!contactsModel) {
|
||||
for (var i = 0; i < contactsModel.count; i++) {
|
||||
if (contactsModel.get(i).pubKey === pubKey) {
|
||||
index = i;
|
||||
}
|
||||
}
|
||||
return contactsModel.get(index).ringSpecModel;
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
compressedKeyGetter: function(pubKey) {
|
||||
//for simulation purposes only, in real app
|
||||
//this would be Utils.getCompressedPk(pubKey);
|
||||
var possibleCharacters = pubKey.split('');
|
||||
var randomStringLength = 12; // assuming you want random strings of 12 characters
|
||||
var randomString = [];
|
||||
for (var i=0; i<randomStringLength; ++i) {
|
||||
var index = (Math.random() * possibleCharacters.length).toFixed(0);
|
||||
var nextChar = possibleCharacters[index];
|
||||
randomString.push(nextChar);
|
||||
}
|
||||
return randomString.join().toString().replace(/,/g, '');
|
||||
}
|
||||
colorIdForPubkeyGetter: function (pubKey) {
|
||||
//for simulation purposes only, in real app
|
||||
//this would be Utils.colorIdForPubkey(pubKey);
|
||||
return Math.floor(Math.random() * 10);
|
||||
}
|
||||
onTextChanged: {
|
||||
sortModel(root.contactsModel);
|
||||
}
|
||||
Component.onCompleted: {
|
||||
textEdit.forceActiveFocus();
|
||||
sortModel(root.contactsModel);
|
||||
}
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
implicitWidth: 106
|
||||
implicitHeight: 44
|
||||
Layout.alignment: Qt.AlignTop
|
||||
enabled: (tagSelector.namesModel.count > 0)
|
||||
text: "Confirm"
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitHeight: 32
|
||||
implicitWidth: 32
|
||||
Layout.alignment: Qt.AlignTop
|
||||
|
||||
StatusActivityCenterButton {
|
||||
id: notificationButton
|
||||
anchors.right: parent.right
|
||||
unreadNotificationsCount: 3
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusBaseText {
|
||||
width: Math.min(553, parent.width - 32)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.verticalCenterOffset: -(headerRow.height/2)
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: contactsModel.count === 0
|
||||
wrapMode: Text.WordWrap
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: qsTr("You can only send direct messages to your Contacts.\n
|
||||
Send a contact request to the person you would like to chat with, you will be able to chat with them once they have accepted your contact request.")
|
||||
Component.onCompleted: {
|
||||
if (visible) {
|
||||
tagSelector.enabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusModal {
|
||||
id: root
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Cryptokitties"
|
||||
header.subTitle: "Public Community"
|
||||
header.asset.isImage: true
|
||||
header.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
|
||||
contentItem: Column {
|
||||
width: root.width
|
||||
|
||||
StatusModalDivider {
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: "A community of cat lovers, meow!"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
height: 46
|
||||
color: Theme.palette.directColor1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Share community"
|
||||
subTitle: "https://join.status.im/u/0x04...45f19"
|
||||
tooltip.text: "Copy to clipboard"
|
||||
asset.name: "copy"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Members"
|
||||
asset.name: "group-chat"
|
||||
label: "184"
|
||||
components: [
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Notifications"
|
||||
asset.name: "notification"
|
||||
components: [
|
||||
StatusSwitch {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Edit community"
|
||||
asset.name: "edit"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Transfer ownership"
|
||||
asset.name: "exchange"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Leave community"
|
||||
asset.name: "arrow-left"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
StatusModal {
|
||||
id: root
|
||||
|
||||
header.title: "Contact Requests"
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Contact request will be shown here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Decline all"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
onClicked: root.close()
|
||||
},
|
||||
StatusButton {
|
||||
text: "Accept all"
|
||||
onClicked: root.close()
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,272 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusSectionLayout {
|
||||
id: root
|
||||
property bool createChat: false
|
||||
|
||||
notificationCount: 1
|
||||
onNotificationButtonClicked: { notificationCount = 0; }
|
||||
showHeader: !root.createChat
|
||||
|
||||
headerContent: RowLayout {
|
||||
id: chatHeader
|
||||
|
||||
signal chatInfoButtonClicked()
|
||||
signal menuButtonClicked()
|
||||
signal membersButtonClicked()
|
||||
signal searchButtonClicked()
|
||||
|
||||
StatusChatInfoButton {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
Layout.leftMargin: padding
|
||||
title: "Amazing Funny Squirrel"
|
||||
subTitle: "Contact"
|
||||
asset.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: actionButtons
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.rightMargin: padding
|
||||
spacing: 8
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: menuButton
|
||||
objectName: "chatToolbarMoreOptionsButton"
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.visible: !!tooltip.text && menuButton.hovered && !contextMenu.open
|
||||
tooltip.text: qsTr("More")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
property bool showMoreMenu: false
|
||||
onClicked: {
|
||||
menuButton.highlighted = true
|
||||
|
||||
let originalOpenHandler = contextMenu.openHandler
|
||||
let originalCloseHandler = contextMenu.closeHandler
|
||||
|
||||
contextMenu.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler()
|
||||
}
|
||||
}
|
||||
|
||||
contextMenu.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
if (!!originalCloseHandler) {
|
||||
originalCloseHandler()
|
||||
}
|
||||
}
|
||||
|
||||
contextMenu.openHandler = originalOpenHandler
|
||||
contextMenu.popup(-contextMenu.width + menuButton.width, menuButton.height + 4)
|
||||
}
|
||||
StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-left"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 1
|
||||
height: 24
|
||||
color: Theme.palette.directColor7
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: (notificationButton.visible && menuButton.visible)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
RowLayout {
|
||||
id: searchInputWrapper
|
||||
width: parent.width
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
|
||||
StatusRoundButton {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
icon.name: "public-chat"
|
||||
icon.color: Theme.palette.directColor1
|
||||
icon.height: editBtn.icon.height
|
||||
icon.width: editBtn.icon.width
|
||||
implicitWidth: editBtn.implicitWidth
|
||||
implicitHeight: editBtn.implicitHeight
|
||||
type: StatusRoundButton.Type.Tertiary
|
||||
StatusToolTip {
|
||||
text: qsTr("Join public chats")
|
||||
visible: parent.hovered
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: parent.height + 12
|
||||
}
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
id: editBtn
|
||||
icon.name: "edit"
|
||||
icon.color: Theme.palette.directColor1
|
||||
checked: root.createChat
|
||||
highlighted: checked
|
||||
onClicked: {
|
||||
root.createChat = !root.createChat;
|
||||
}
|
||||
StatusToolTip {
|
||||
text: qsTr("Start chat")
|
||||
visible: parent.hovered
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: parent.height + 12
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
id: searchInput
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
maximumHeight: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
placeholderText: "Search"
|
||||
input.asset.name: "search"
|
||||
}
|
||||
|
||||
Column {
|
||||
width: parent.width
|
||||
anchors.top: searchInput.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
width: parent.width
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
width: parent.width
|
||||
model: Models.demoChatListItems
|
||||
highlightItem: !root.createChat
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < Models.demoChatListItems.count; i++) {
|
||||
let item = Models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
Models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.createChat ? createChatView : chatChannelView
|
||||
Component {
|
||||
id: createChatView
|
||||
CreateChatView {
|
||||
contactsModel: Models.membersListModel
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatChannelView
|
||||
ChatChannelView {
|
||||
model: Models.chatMessagesModel
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtQuick.Layouts 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
StatusSectionLayout {
|
||||
id: root
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
property ListModel featuredCommunitiesModel: Models.featuredCommunitiesModel
|
||||
property ListModel popularCommunitiesModel: Models.curatedCommunitiesModel
|
||||
property ListModel tagsModel: Models.tagsModel
|
||||
|
||||
property string searchText: ""
|
||||
property int layoutVMargin: 70
|
||||
property int layoutHMargin: 64
|
||||
property int titlePixelSize: 28
|
||||
property int subtitlePixelSize: 17
|
||||
property int stylePadding: 16
|
||||
|
||||
function navigateToCommunity(communityId) {
|
||||
console.info("Clicked community ID: " + communityId)
|
||||
}
|
||||
}
|
||||
centerPanel: Item {
|
||||
anchors.fill: parent
|
||||
clip: true
|
||||
StatusScrollView {
|
||||
anchors.fill: parent
|
||||
contentHeight: column.height + d.layoutVMargin
|
||||
contentWidth: column.width + d.layoutHMargin
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
spacing: 18
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Find community")
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: d.titlePixelSize
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
// Tags definition - Now hidden - Out of scope
|
||||
// TODO: Replace by `StatusListItemTagRow`
|
||||
Row {
|
||||
visible: d.tagsModel.count > 0
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
Layout.rightMargin: d.layoutHMargin
|
||||
width: 1234 // by design
|
||||
spacing: d.stylePadding/2
|
||||
|
||||
Repeater {
|
||||
model: d.tagsModel
|
||||
delegate: StatusListItemTag {
|
||||
border.color: Theme.palette.baseColor2
|
||||
color: "transparent"
|
||||
height: 32
|
||||
radius: 36
|
||||
closeButtonVisible: false
|
||||
asset.emoji: model.emoji
|
||||
asset.height: 32
|
||||
asset.width: asset.height
|
||||
asset.color: "transparent"
|
||||
asset.isLetterIdenticon: true
|
||||
title: model.name
|
||||
titleText.font.pixelSize: 15
|
||||
titleText.color: Theme.palette.primaryColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
Layout.topMargin: 20
|
||||
text: qsTr("Featured")
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: d.subtitlePixelSize
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
id: featuredGrid
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
columns: 3
|
||||
columnSpacing: d.stylePadding
|
||||
rowSpacing: d.stylePadding
|
||||
|
||||
Repeater {
|
||||
model: d.featuredCommunitiesModel
|
||||
delegate: StatusCommunityCard {
|
||||
locale: "es"
|
||||
communityId: model.communityId
|
||||
loaded: model.available
|
||||
logo: model.logo
|
||||
name: model.name
|
||||
description: model.description
|
||||
members: model.members
|
||||
popularity: model.popularity
|
||||
communityColor: model.communityColor
|
||||
categories: ListModel {
|
||||
ListElement { name: "sport"; emoji: "🎾"}
|
||||
ListElement { name: "food"; emoji: "🥑"}
|
||||
ListElement { name: "privacy"; emoji: "👻"}
|
||||
}
|
||||
|
||||
onClicked: { d.navigateToCommunity(communityId) }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
Layout.topMargin: 20
|
||||
text: qsTr("Popular")
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: d.subtitlePixelSize
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
GridLayout {
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
columns: 3
|
||||
columnSpacing: d.stylePadding
|
||||
rowSpacing: d.stylePadding
|
||||
|
||||
Repeater {
|
||||
model: d.popularCommunitiesModel
|
||||
delegate: StatusCommunityCard {
|
||||
locale: "es"
|
||||
communityId: model.communityId
|
||||
loaded: model.available
|
||||
logo: model.logo
|
||||
name: model.name
|
||||
description: model.description
|
||||
members: model.members
|
||||
activeUsers: model.activeUsers
|
||||
popularity: model.popularity
|
||||
tokenLogo: model.tokenLogo
|
||||
isPrivate: model.isPrivate
|
||||
banner: model.banner
|
||||
|
||||
onClicked: { d.navigateToCommunity(communityId) }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,313 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusSectionLayout {
|
||||
id: root
|
||||
|
||||
property string communityDetailModalTitle: ""
|
||||
property string communityDetailModalImage: ""
|
||||
signal chatInfoButtonClicked()
|
||||
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
|
||||
headerContent: RowLayout {
|
||||
id: statusToolBar
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: searchButton
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
Layout.leftMargin: padding
|
||||
icon.name: "search"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Search")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
onClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(communityDetailModalTitle,
|
||||
"",
|
||||
communityDetailModalImage);
|
||||
searchPopup.open();
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
Layout.preferredWidth: Math.min(implicitWidth, parent.width)
|
||||
Layout.fillHeight: true
|
||||
title: "general"
|
||||
subTitle: "Community Chat"
|
||||
asset.color: Theme.palette.miscColor6
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: membersButton
|
||||
icon.name: "group-chat"
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Members")
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
onClicked: {
|
||||
membersButton.highlighted = !membersButton.highlighted;
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = Models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = Models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locationModel: Models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatInfoButton.title: "CryptoKitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.asset.isImage: true
|
||||
chatInfoButton.asset.name: "qrc:/demoapp/data/profile-image-1.jpeg"
|
||||
chatInfoButton.asset.color: Theme.palette.miscColor6
|
||||
chatInfoButton.onClicked: { chatInfoButtonClicked(); }
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
StatusScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
model: Models.demoCommunityChatListItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Category"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Edit Category"
|
||||
icon.name: "edit"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete Category"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
anchors.fill: parent
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Community content here")
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: Models.membersListModel
|
||||
delegate: StatusMemberListItem {
|
||||
implicitWidth: parent.width
|
||||
nickName: model.localNickname
|
||||
userName: model.displayName
|
||||
pubKey: model.pubKey
|
||||
isVerified: model.isVerified
|
||||
isUntrustworthy: model.isUntrustworthy
|
||||
isContact: model.isContact
|
||||
asset.name: model.icon
|
||||
asset.isImage: (asset.name !== "")
|
||||
asset.isLetterIdenticon: (asset.name === "")
|
||||
asset.imgIsIdenticon: false
|
||||
status: model.onlineStatus
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusSectionLayout {
|
||||
id: root
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: profileHeadline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Profile"
|
||||
}
|
||||
|
||||
StatusScrollView {
|
||||
anchors.top: profileHeadline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
|
||||
contentHeight: profileMenuItems.height + 8
|
||||
contentWidth: parent.width
|
||||
clip: true
|
||||
|
||||
Column {
|
||||
id: profileMenuItems
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
asset.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
asset.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: invisibleSeparator
|
||||
height: 16
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
asset.name: model.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@@ -1 +0,0 @@
|
||||
singleton Models 1.0 Models.qml
|
||||
@@ -1,155 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
import SortFilterProxyModel 0.2
|
||||
|
||||
ColumnLayout {
|
||||
id: root
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
StatusIconTextButton {
|
||||
id: sortBtn
|
||||
|
||||
property int sortOrder: -1
|
||||
statusIcon: {
|
||||
if (sortOrder == Qt.AscendingOrder) return "chevron-down"
|
||||
if (sortOrder == Qt.DescendingOrder) return "chevron-up"
|
||||
return "remove"
|
||||
}
|
||||
|
||||
onClicked: {
|
||||
var st = sortOrder + 1
|
||||
sortOrder = st > 1 ? -1 : st
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
id: searchInput
|
||||
|
||||
Layout.fillWidth: true
|
||||
input.asset.name: "search"
|
||||
placeholderText: "nickname.."
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
id: contactBtn
|
||||
|
||||
icon.name: "tiny/tiny-contact"
|
||||
identicon.asset.color: Theme.palette.primaryColor1
|
||||
onClicked: highlighted = !highlighted
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
id: verifiedBtn
|
||||
|
||||
icon.name: "tiny/tiny-checkmark"
|
||||
identicon.asset.color: Theme.palette.primaryColor1
|
||||
onClicked: highlighted = !highlighted
|
||||
}
|
||||
}
|
||||
|
||||
ListView {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: contentItem.childrenRect.height
|
||||
spacing: 4
|
||||
|
||||
model: SortFilterProxyModel {
|
||||
sourceModel: d.users
|
||||
sorters: StringSorter {
|
||||
enabled: sortBtn.sortOrder !== -1
|
||||
roleName: "nick"
|
||||
sortOrder: sortBtn.sortOrder
|
||||
}
|
||||
filters: [
|
||||
ExpressionFilter {
|
||||
expression: model.nick.startsWith(searchInput.text)
|
||||
},
|
||||
AllOf {
|
||||
enabled: contactBtn.highlighted || verifiedBtn.highlighted
|
||||
ValueFilter {
|
||||
enabled: contactBtn.highlighted
|
||||
roleName: "isContact"
|
||||
value: true
|
||||
}
|
||||
ValueFilter {
|
||||
enabled: verifiedBtn.highlighted
|
||||
roleName: "isVerified"
|
||||
value: true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
delegate: StatusMemberListItem {
|
||||
width: parent.width
|
||||
userName: model.name
|
||||
nickName: model.nick
|
||||
isVerified: model.isVerified
|
||||
isContact: model.isContact
|
||||
asset.isLetterIdenticon: true
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
readonly property ListModel users: ListModel {
|
||||
ListElement {
|
||||
name: "Richard"
|
||||
nick: "Ricky"
|
||||
isVerified: true
|
||||
isContact: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Susan"
|
||||
nick: "Sue"
|
||||
isVerified: false
|
||||
isContact: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Edward"
|
||||
nick: "Ed"
|
||||
isVerified: true
|
||||
isContact: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Toomas"
|
||||
nick: "Tommy"
|
||||
isVerified: false
|
||||
isContact: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Elizabeth"
|
||||
nick: "Bess"
|
||||
isVerified: true
|
||||
isContact: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Thomas"
|
||||
nick: "Tom"
|
||||
isVerified: false
|
||||
isContact: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Fernando"
|
||||
nick: "Alonso"
|
||||
isVerified: false
|
||||
isContact: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexander"
|
||||
nick: "Alex"
|
||||
isVerified: true
|
||||
isContact: false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
#include "handler.h"
|
||||
|
||||
Handler::Handler(QObject *parent) : QObject(parent)
|
||||
{
|
||||
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
#ifndef HANDLER_H
|
||||
#define HANDLER_H
|
||||
|
||||
#include <QObject>
|
||||
|
||||
class Handler : public QObject
|
||||
{
|
||||
Q_OBJECT
|
||||
public:
|
||||
explicit Handler(QObject *parent = nullptr);
|
||||
|
||||
signals:
|
||||
void restartQml();
|
||||
};
|
||||
|
||||
#endif // HANDLER_H
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 838 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 398 B |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 957 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1009 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 730 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 45 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
@@ -4,8 +4,6 @@
|
||||
|
||||
#include "sandboxapp.h"
|
||||
|
||||
#include <qqmlsortfilterproxymodeltypes.h>
|
||||
|
||||
int main(int argc, char *argv[])
|
||||
{
|
||||
#if QT_VERSION < QT_VERSION_CHECK(6, 0, 0)
|
||||
@@ -13,15 +11,6 @@ int main(int argc, char *argv[])
|
||||
#endif
|
||||
|
||||
SandboxApp app(argc, argv);
|
||||
|
||||
qqsfpm::registerTypes();
|
||||
|
||||
qputenv("QT_QUICK_CONTROLS_HOVER_ENABLED", QByteArrayLiteral("1"));
|
||||
|
||||
app.setOrganizationName("Status");
|
||||
app.setOrganizationDomain("status.im");
|
||||
app.setApplicationName("Sandbox");
|
||||
|
||||
app.startEngine();
|
||||
|
||||
return app.exec();
|
||||
|
||||
+160
-422
@@ -2,9 +2,6 @@ import QtQuick 2.14
|
||||
import QtQuick.Window 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.13
|
||||
import QtQuick.Layouts 1.14
|
||||
import Qt.labs.settings 1.0
|
||||
import QtQml.Models 2.14
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
@@ -15,14 +12,10 @@ import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import SortFilterProxyModel 0.2
|
||||
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
StatusWindow {
|
||||
id: rootWindow
|
||||
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
|
||||
: 1224
|
||||
: 1024
|
||||
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
|
||||
:840
|
||||
visible: true
|
||||
@@ -36,369 +29,178 @@ StatusWindow {
|
||||
|
||||
property real factor: 1.0
|
||||
|
||||
Component.onCompleted: rootWindow.updatePosition()
|
||||
Component.onCompleted: {
|
||||
Theme.palette = lightTheme
|
||||
apiDocsButton.checked = true
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
readonly property int apiDocumentation: 100
|
||||
readonly property int examples: 101
|
||||
readonly property int demoApp: 102
|
||||
rootWindow.updatePosition();
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
|
||||
let item = Models.mainAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId) {
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", false);
|
||||
continue
|
||||
}
|
||||
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
}
|
||||
|
||||
StatusMainLayout {
|
||||
StatusAppLayout {
|
||||
id: appLayout
|
||||
anchors.fill: parent
|
||||
|
||||
leftPanel: StatusAppNavBar {
|
||||
appNavBar: StatusAppNavBar {
|
||||
height: rootWindow.height
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: Models.mainAppSectionsModel
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "refresh"
|
||||
tooltip.text: "Reload App"
|
||||
onClicked: app.restartQml()
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
if(model.sectionType === appSectionType.apiDocumentation)
|
||||
{
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
id: apiDocsButton
|
||||
icon.name: "edit"
|
||||
tooltip.text: "API Documentation"
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(libraryDocumentationCmp)
|
||||
checked = !checked
|
||||
demoAppButton.checked = false
|
||||
}
|
||||
else if(model.sectionType === appSectionType.examples)
|
||||
{
|
||||
stackView.push(examplesCmp)
|
||||
}
|
||||
else if(model.sectionType === appSectionType.demoApp)
|
||||
{
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
id: demoAppButton
|
||||
icon.name: "status"
|
||||
tooltip.text: "Demo Application"
|
||||
checked: stackView.currentItem == demoAppCmp
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(demoAppCmp)
|
||||
checked = !checked
|
||||
apiDocsButton.checked = false
|
||||
}
|
||||
rootWindow.setActiveItem(model.sectionId)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
appView: StackView {
|
||||
id: stackView
|
||||
anchors.fill: parent
|
||||
StackView {
|
||||
id: stackView
|
||||
anchors.fill: parent
|
||||
initialItem: libraryDocumentationCmp
|
||||
}
|
||||
ThemeSwitch {
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 32
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 32
|
||||
lightThemeEnabled: storeSettings.lightTheme
|
||||
onLightThemeEnabledChanged: {
|
||||
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
|
||||
storeSettings.lightTheme = lightThemeEnabled
|
||||
initialItem: libraryDocumentationCmp
|
||||
}
|
||||
|
||||
ThemeSwitch {
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 32
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 32
|
||||
onCheckedChanged: {
|
||||
if (Theme.palette === rootWindow.lightTheme) {
|
||||
Theme.palette = rootWindow.darkTheme
|
||||
} else {
|
||||
Theme.palette = rootWindow.lightTheme
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Component {
|
||||
id: libraryDocumentationCmp
|
||||
|
||||
StatusSectionLayout {
|
||||
id: mainPageView
|
||||
showHeader: false
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
function page(name, fillPage) {
|
||||
storeSettings.fillPage = fillPage ? true : false
|
||||
viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
|
||||
}
|
||||
function control(name) {
|
||||
viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
|
||||
storeSettings.fillPage = false
|
||||
}
|
||||
|
||||
leftPanel: StatusScrollView {
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 48
|
||||
ScrollView {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
contentHeight: navigation.height + 56
|
||||
contentWidth: navigation.width
|
||||
clip: true
|
||||
Column {
|
||||
id: navigation
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 48
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 0
|
||||
|
||||
Column {
|
||||
id: navigation
|
||||
spacing: 0
|
||||
StatusListSectionHeadline { text: "StatusQ.Core" }
|
||||
StatusNavigationListItem {
|
||||
title: "Icons"
|
||||
selected: page.sourceComponent == iconsComponent
|
||||
onClicked: page.sourceComponent = iconsComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Core" }
|
||||
StatusNavigationListItem {
|
||||
title: "Icons"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Layout" }
|
||||
StatusNavigationListItem {
|
||||
title: "Layouts"
|
||||
selected: page.sourceComponent == layoutComponent
|
||||
onClicked: page.sourceComponent = layoutComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Layout" }
|
||||
StatusNavigationListItem {
|
||||
title: "Layouts"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title.substring(0, title.length - 1));
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Controls" }
|
||||
StatusNavigationListItem {
|
||||
title: "Buttons"
|
||||
selected: page.sourceComponent == buttonsComponent
|
||||
onClicked: page.sourceComponent = buttonsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Controls"
|
||||
selected: page.sourceComponent == controlsComponent
|
||||
onClicked: page.sourceComponent = controlsComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "List Items"
|
||||
selected: page.sourceComponent == listItemsComponent
|
||||
onClicked: page.sourceComponent = listItemsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatInfoToolBar"
|
||||
selected: page.sourceComponent == chatInfoToolBarComponent
|
||||
onClicked: page.sourceComponent = chatInfoToolBarComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Others"
|
||||
selected: page.sourceComponent == othersComponent
|
||||
onClicked: page.sourceComponent = othersComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
selected: page.sourceComponent == popupMenuComponent
|
||||
onClicked: page.sourceComponent = popupMenuComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Controls" }
|
||||
StatusNavigationListItem {
|
||||
title: "Buttons"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSwitchTab"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page("StatusTabSwitch");
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatCommandButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Controls"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTabBarButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTabBarIconButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusInput"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTextArea"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSelect"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusComboBox"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAccountSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusColorSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWalletColorButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWalletColorSelect"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPasswordStrengthIndicator"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPinInput"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAddress"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "List Items"
|
||||
selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
|
||||
onClicked: mainPageView.control(title.replace(/\s+/g, ''));
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatInfoToolBar"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Others"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusExpandableItem"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page("StatusExpandableSettingsItem");
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTagSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusToastMessage"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWizardStepper"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusListPicker"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusCommunityCard"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusCommunityTags"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusItemSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChartPanel"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusModal"
|
||||
selected: viewLoader.source.toString().includes("Popups")
|
||||
onClicked: mainPageView.control("Popups");
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusDialog"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Platform" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusMacNotification"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusColorSelectorGrid"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusImageCropPanel"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusColorSpace"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusCard"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
StatusNavigationListItem {
|
||||
title: "StatusModal"
|
||||
selected: page.sourceComponent == statusModalComponent
|
||||
onClicked: page.sourceComponent = statusModalComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
id: centerPanel
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
anchors.fill: parent
|
||||
|
||||
StatusScrollView {
|
||||
visible: !storeSettings.fillPage
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 64
|
||||
ScrollView {
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
|
||||
contentWidth: (pageWrapper.width * rootWindow.factor)
|
||||
contentWidth: pageWrapper.width * rootWindow.factor
|
||||
clip: true
|
||||
|
||||
Item {
|
||||
id: pageWrapper
|
||||
width: centerPanel.width
|
||||
width: rightPanel.width
|
||||
anchors.top: parent.top
|
||||
height: Math.max(rootWindow.height, viewLoader.height + 128)
|
||||
anchors.topMargin: 64
|
||||
height: Math.max(rootWindow.height, page.height + 128)
|
||||
scale: rootWindow.factor
|
||||
|
||||
Loader {
|
||||
id: viewLoader
|
||||
active: !storeSettings.fillPage
|
||||
id: page
|
||||
active: true
|
||||
anchors.centerIn: parent
|
||||
source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
|
||||
onSourceChanged: {
|
||||
storeSettings.selected = viewLoader.source
|
||||
if (source.toString().includes("Icons")) {
|
||||
item.iconColor = Theme.palette.primaryColor1;
|
||||
}
|
||||
}
|
||||
sourceComponent: iconsComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
active: storeSettings.fillPage
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 64
|
||||
visible: storeSettings.fillPage
|
||||
clip: true
|
||||
|
||||
source: viewLoader.source
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -427,54 +229,48 @@ StatusWindow {
|
||||
}
|
||||
|
||||
Component {
|
||||
id: examplesCmp
|
||||
id: iconsComponent
|
||||
Icons { iconColor: Theme.palette.primaryColor1 }
|
||||
}
|
||||
|
||||
StatusSectionLayout {
|
||||
id: examplesView
|
||||
showHeader: false
|
||||
Component {
|
||||
id: controlsComponent
|
||||
Controls {}
|
||||
}
|
||||
|
||||
function example(name) {
|
||||
examplesLoader.source = Qt.resolvedUrl("./examples/" + name + ".qml")
|
||||
storeSettings.selectedExample = examplesLoader.source
|
||||
}
|
||||
Component {
|
||||
id: listItemsComponent
|
||||
ListItems {}
|
||||
}
|
||||
|
||||
readonly property string defaultExampleSource: example("FilteringSorting")
|
||||
Component {
|
||||
id: layoutComponent
|
||||
Layout {}
|
||||
}
|
||||
|
||||
leftPanel: StatusScrollView {
|
||||
id: examplesLeftPanel
|
||||
Component {
|
||||
id: othersComponent
|
||||
Others {}
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 48
|
||||
Component {
|
||||
id: buttonsComponent
|
||||
Buttons {}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
width: examplesLeftPanel.availableWidth
|
||||
spacing: 0
|
||||
Component {
|
||||
id: popupMenuComponent
|
||||
StatusPopupMenuPage {}
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
Layout.fillWidth: true
|
||||
title: "FilteringSorting"
|
||||
selected: examplesLoader.source.toString().includes(title)
|
||||
onClicked: examplesView.example(title)
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: chatInfoToolBarComponent
|
||||
StatusChatInfoToolBarPage {}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
anchors.fill: parent
|
||||
StatusScrollView {
|
||||
id: examplesCenterPanel
|
||||
anchors.fill: parent
|
||||
anchors.margins: 64
|
||||
anchors.topMargin: anchors.margins + 32
|
||||
|
||||
Loader {
|
||||
id: examplesLoader
|
||||
width: examplesCenterPanel.availableWidth
|
||||
source: storeSettings.selectedExample !== "" ? storeSettings.selectedExample : examplesView.defaultExampleSource
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: statusModalComponent
|
||||
Popups {}
|
||||
}
|
||||
|
||||
Component {
|
||||
@@ -483,39 +279,10 @@ StatusWindow {
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor3
|
||||
|
||||
Row {
|
||||
id: platformSwitch
|
||||
anchors.left: demoApp.left
|
||||
anchors.bottom: demoApp.top
|
||||
anchors.bottomMargin: 20
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
text: "OSX"
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
onCheckedChanged: {
|
||||
if (checked) {
|
||||
demoApp.titleStyle = "windows"
|
||||
} else {
|
||||
demoApp.titleStyle = "osx"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Win"
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
DemoApp {
|
||||
id: demoApp
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
DropShadow {
|
||||
anchors.fill: demoApp
|
||||
@@ -534,8 +301,6 @@ StatusWindow {
|
||||
anchors.top: parent.top
|
||||
anchors.margins: 13
|
||||
|
||||
visible: Qt.platform.os == "osx"
|
||||
|
||||
onClose: {
|
||||
rootWindow.close()
|
||||
}
|
||||
@@ -548,31 +313,4 @@ StatusWindow {
|
||||
rootWindow.toggleFullScreen()
|
||||
}
|
||||
}
|
||||
|
||||
StatusWindowsTitleBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
visible: Qt.platform.os == "windows"
|
||||
|
||||
onClose: {
|
||||
rootWindow.close()
|
||||
}
|
||||
|
||||
onMinimised: {
|
||||
rootWindow.showMinimized()
|
||||
}
|
||||
|
||||
onMaximized: {
|
||||
rootWindow.toggleFullScreen()
|
||||
}
|
||||
}
|
||||
|
||||
Settings {
|
||||
id: storeSettings
|
||||
property string selected: ""
|
||||
property string selectedExample: ""
|
||||
property bool lightTheme: true
|
||||
property bool fillPage: false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,68 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import Sandbox 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
StatusAccountSelector {
|
||||
id: selector1
|
||||
width: 300
|
||||
accounts: accountsModel
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: accountsModel
|
||||
|
||||
ListElement {
|
||||
name: "Pascal"
|
||||
address: "0x1234567891011"
|
||||
path: ""
|
||||
color: "red"
|
||||
publicKey: ""
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "1199.02"
|
||||
assets: []
|
||||
}
|
||||
ListElement {
|
||||
name: "Boris"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "red"
|
||||
publicKey: ""
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "42.42"
|
||||
assets: []
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexandra"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "yellow"
|
||||
publicKey: ""
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
}
|
||||
ListElement {
|
||||
name: "Khushboo"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "blue"
|
||||
publicKey: ""
|
||||
walletType: "watch" // Will be automatically filtered by StatusAccountSelector
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: mainLayout.implicitWidth
|
||||
implicitHeight: mainLayout.implicitHeight
|
||||
|
||||
GridLayout {
|
||||
id: mainLayout
|
||||
|
||||
columns: 2
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
columnSpacing: 15
|
||||
rowSpacing: 8
|
||||
|
||||
StatusBaseText { text: "StatusAddress\nsimple" }
|
||||
StatusAddress {
|
||||
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
|
||||
}
|
||||
|
||||
StatusBaseText { text: "StatusAddress\nclick-expandable" }
|
||||
StatusAddress {
|
||||
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
|
||||
|
||||
Layout.preferredWidth: 200
|
||||
|
||||
expandable: true
|
||||
}
|
||||
|
||||
StatusBaseText { text: `StatusAddressPanel\nfont.pixelSize: 13, copyable, no frame`}
|
||||
StatusAddressPanel {
|
||||
address: "0xDC2c4826f6C56F61C1b9cC6Bb531d0Fe45402fC9"
|
||||
|
||||
font.pixelSize: 13
|
||||
font.weight: Font.Normal
|
||||
|
||||
showFrame: false
|
||||
|
||||
onDoCopy: copyAction.text = address
|
||||
}
|
||||
|
||||
StatusBaseText { text: `StatusAddressPanel\ncompact; width ${simpleAddressPanel.width}px ${simpleAddressPanel.height}px`}
|
||||
StatusAddressPanel {
|
||||
id: simpleAddressPanel
|
||||
address: "0xd8593DEACe2f44dF35dd23fD2BAFC2daeC2ae033"
|
||||
showCopy: false
|
||||
expanded: false
|
||||
onDoCopy: copyAction.text = address
|
||||
expandable: true
|
||||
}
|
||||
|
||||
StatusBaseText { text: "StatusAddressPanel\ncopy-icon, non-expandable" }
|
||||
StatusAddressPanel {
|
||||
address: "0xDd5A0755e99D66a583253372B569231968A6CF7b"
|
||||
onDoCopy: copyAction.text = address
|
||||
}
|
||||
|
||||
StatusBaseText { text: "StatusAddressPanel\ncopy hiden" }
|
||||
StatusAddressPanel {
|
||||
address: "0xd2D44C2A1E78975506e474Ecdc7E4F272D7e9A6c"
|
||||
autHideCopyIcon: true
|
||||
onDoCopy: copyAction.text = address
|
||||
expandable: true
|
||||
}
|
||||
StatusBaseText { text: "StatusAddressPanel\ncopy hiden, non-expandable" }
|
||||
StatusAddressPanel {
|
||||
address: "0xd2a44BA31E78975506e474Ecdc7E4F272D7F3BC5"
|
||||
autHideCopyIcon: true
|
||||
expanded: false
|
||||
onDoCopy: copyAction.text = address
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: "lightblue"
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.columnSpan: mainLayout.columns
|
||||
Layout.preferredHeight: 2
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Copy Action: ")
|
||||
}
|
||||
StatusBaseText {
|
||||
id: copyAction
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,239 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import Sandbox 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
|
||||
ColumnLayout {
|
||||
id: layout
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.top: parent.top
|
||||
spacing: 20
|
||||
|
||||
RowLayout {
|
||||
Layout.fillWidth: true
|
||||
|
||||
StatusCard {
|
||||
id: card
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
primaryText: "Mainnet"
|
||||
secondaryText: state === "unavailable" ? "No Gas" : "75"
|
||||
tertiaryText: state === "unpreferred" ? "UNPREFERRED" : "BALANCE: " + 250
|
||||
cardIconName: "status"
|
||||
advancedInputText: "75"
|
||||
disabledText: "Disabled"
|
||||
}
|
||||
|
||||
StatusComboBox {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.maximumWidth: 200
|
||||
label: "Card State"
|
||||
onCurrentValueChanged: card.state = currentValue
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
name: "default"
|
||||
}
|
||||
ListElement {
|
||||
name: "unavailable"
|
||||
}
|
||||
ListElement {
|
||||
name: "error"
|
||||
}
|
||||
ListElement {
|
||||
name: "unpreferred"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusCheckBox {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: "advancedMode"
|
||||
font.family: Theme.palette.monoFont.name
|
||||
onClicked: {
|
||||
card.advancedMode = checked
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 1
|
||||
width: 700
|
||||
color: "black"
|
||||
}
|
||||
|
||||
// Below is an example on how to implement the network routing using StatusCard and Canvas, also the function in Utils to draw an arrow
|
||||
Row {
|
||||
id: cards
|
||||
spacing: 200
|
||||
Column {
|
||||
id: leftColumn
|
||||
spacing: 20
|
||||
Repeater {
|
||||
model: fromNetworksList
|
||||
StatusCard {
|
||||
primaryText: name
|
||||
secondaryText: balance === 0 ? "No Balance" : !hasGas ? "No Gas" : tokensToSend
|
||||
tertiaryText: "BALANCE: " + balance
|
||||
state: balance === 0 || !hasGas ? "unavailable" : "default"
|
||||
cardIconName: iconName
|
||||
advancedMode: card.advancedMode
|
||||
advancedInputText: tokensToSend
|
||||
disabledText: "Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: rightColumn
|
||||
spacing: 20
|
||||
Repeater {
|
||||
model: toNetworksList
|
||||
StatusCard {
|
||||
primaryText: name
|
||||
secondaryText: tokensToReceive
|
||||
tertiaryText: ""
|
||||
state: preferred ? "default" : "unprefeered"
|
||||
cardIconName: iconName
|
||||
opacity: preferred ? 1 : 0
|
||||
advancedMode: card.advancedMode
|
||||
advancedInputText: tokensToReceive
|
||||
disabledText: "Disabled"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Canvas {
|
||||
id: canvas
|
||||
x: layout.x + leftColumn.x
|
||||
y: cards.y
|
||||
width: cards.width
|
||||
height: cards.height
|
||||
|
||||
function clear() {
|
||||
var ctx = getContext("2d");
|
||||
ctx.reset()
|
||||
}
|
||||
|
||||
onPaint: {
|
||||
// Get the canvas context
|
||||
var ctx = getContext("2d");
|
||||
|
||||
for(var i = 0; i< fromNetworksList.count; i++) {
|
||||
if(fromNetworksList.get(i).routedTo !== "") {
|
||||
for(var j = 0; j< toNetworksList.count; j++) {
|
||||
if(fromNetworksList.get(i).routedTo === toNetworksList.get(j).name) {
|
||||
Utils.drawArrow(ctx, leftColumn.children[i].x + leftColumn.children[i].width,
|
||||
leftColumn.children[i].y + leftColumn.children[i].height/2,
|
||||
rightColumn.x + rightColumn.children[j].x,
|
||||
rightColumn.children[j].y + rightColumn.children[j].height/2,
|
||||
'#627EEA')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
ListModel {
|
||||
id: toNetworksList
|
||||
ListElement {
|
||||
name: "Mainnet"
|
||||
iconName: "status"
|
||||
tokensToReceive: 75
|
||||
preferred: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Aztec"
|
||||
iconName: "status"
|
||||
tokensToReceive: 0
|
||||
preferred: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Hermez"
|
||||
iconName: "status"
|
||||
tokensToReceive: 75
|
||||
preferred: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Loppring"
|
||||
iconName: "status"
|
||||
tokensToReceive: 0
|
||||
preferred: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Optimism"
|
||||
iconName: "status"
|
||||
tokensToReceive: 100
|
||||
preferred: true
|
||||
}
|
||||
ListElement {
|
||||
name: "zkSync"
|
||||
iconName: "status"
|
||||
tokensToReceive: 0
|
||||
preferred: false
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: fromNetworksList
|
||||
ListElement {
|
||||
name: "Mainnet"
|
||||
iconName: "status"
|
||||
tokensToSend: 75
|
||||
balance: 75
|
||||
routedTo: "Mainnet"
|
||||
hasGas: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Aztec"
|
||||
iconName: "status"
|
||||
tokensToSend: 0
|
||||
balance: 75
|
||||
routedTo: ""
|
||||
hasGas: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Hermez"
|
||||
iconName: "status"
|
||||
tokensToSend: 75
|
||||
balance: 75
|
||||
routedTo: "Hermez"
|
||||
hasGas: true
|
||||
}
|
||||
ListElement {
|
||||
name: "Loppring"
|
||||
iconName: "status"
|
||||
tokensToSend: 0
|
||||
balance: 0
|
||||
routedTo: ""
|
||||
hasGas: false
|
||||
}
|
||||
ListElement {
|
||||
name: "Optimism"
|
||||
iconName: "status"
|
||||
tokensToSend: 75
|
||||
balance: 75
|
||||
routedTo: "Optimism"
|
||||
hasGas: true
|
||||
}
|
||||
ListElement {
|
||||
name: "zkSync"
|
||||
iconName: "status"
|
||||
tokensToSend: 25
|
||||
balance: 25
|
||||
routedTo: "Optimism"
|
||||
hasGas: true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,193 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Item {
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
//dummy data
|
||||
property real stepSize: 1000
|
||||
property real minStep: 12000
|
||||
property real maxStep: 22000
|
||||
|
||||
property var graphTabsModel: [{text: "Price", enabled: true}, {text: "Balance", enabled: false}]
|
||||
property var timeRangeTabsModel: [{text: "1H", enabled: true},
|
||||
{text: "1D", enabled: true},{text: "7D", enabled: true},
|
||||
{text: "1M", enabled: true}, {text: "6M", enabled: true},
|
||||
{text: "1Y", enabled: true}, {text: "ALL", enabled: true}]
|
||||
|
||||
property var simTimer: Timer {
|
||||
running: true
|
||||
interval: 3000
|
||||
repeat: true
|
||||
onTriggered: {
|
||||
d.generateData();
|
||||
}
|
||||
}
|
||||
|
||||
function minutes(minutes = 0) {
|
||||
var newMinute = new Date(new Date().getTime() - (minutes * 60 * 1000)).toString();
|
||||
if (newMinute.slice(10,12) === "00") {
|
||||
var dateToday = new Date(Date.now()).toString();
|
||||
return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
|
||||
}
|
||||
return newMinute.slice(10,16);
|
||||
}
|
||||
|
||||
function hour(hours = 0) {
|
||||
var newHour = new Date(new Date().getTime() - (hours * 60 * 60 * 1000)).toString();
|
||||
if (newHour.slice(10,12) === "00") {
|
||||
var dateToday = new Date(Date.now()).toString();
|
||||
return dateToday.slice(4,7) + " " + dateToday.slice(8,10);
|
||||
}
|
||||
return newHour.slice(10,16);
|
||||
}
|
||||
|
||||
function day(before = 0) {
|
||||
var newDay = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
|
||||
return newDay.slice(4,7) + " " + newDay.slice(8,10);
|
||||
}
|
||||
|
||||
function month(before = 0) {
|
||||
var newMonth = new Date(Date.now() - before * 24 * 60 * 60 * 1000).toString();
|
||||
return newMonth.slice(4,7) + " '" + newMonth.slice(newMonth.indexOf("G")-3, newMonth.indexOf("G")-1);
|
||||
}
|
||||
|
||||
property var timeRange: [
|
||||
{'1H': [minutes(60), minutes(55), minutes(50), minutes(45), minutes(40), minutes(35), minutes(30), minutes(25), minutes(20), minutes(15), minutes(10), minutes(5), minutes()]},
|
||||
{'1D': [hour(24), hour(23), hour(22), hour(21), hour(20), hour(19), hour(18), hour(17), hour(16), hour(15), hour(14), hour(13),
|
||||
hour(12), hour(11), hour(10), hour(9), hour(8), hour(7), hour(6), hour(5), hour(4), hour(3), hour(2), hour(1), hour()]},
|
||||
{'7D': [day(6), day(5), day(4), day(3), day(2), day(1), day()]},
|
||||
{'1M': [day(30), day(28), day(26), day(24), day(22), day(20), day(18), day(16), day(14), day(12), day(10), day(8), day(6), day(4), day()]},
|
||||
{'6M': [month(150), month(120), month(90), month(60), month(30), month()]},
|
||||
{'1Y': [month(330), month(300), month(270), month(240), month(210), month(180), month(150), month(120), month(90), month(60), month(30), month()]},
|
||||
{'ALL': ['2016', '2017', '2018', '2019', '2020', '2021', '2022']}
|
||||
]
|
||||
|
||||
function generateData() {
|
||||
var result = [];
|
||||
for (var i = 0; i < timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange].length; ++i) {
|
||||
result[i] = Math.random() * (maxStep - minStep) + minStep;
|
||||
}
|
||||
graphDetail.chart.chartData.datasets[0].data = result;
|
||||
graphDetail.chart.animateToNewData();
|
||||
}
|
||||
}
|
||||
|
||||
StatusChartPanel {
|
||||
id: graphDetail
|
||||
height: 290
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 24
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 24
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
graphsModel: d.graphTabsModel
|
||||
timeRangeModel: d.timeRangeTabsModel
|
||||
onHeaderTabClicked: {
|
||||
//TODO
|
||||
//if time range tab
|
||||
d.generateData();
|
||||
//if graph bar
|
||||
//switch graph
|
||||
}
|
||||
chart.chartType: 'line'
|
||||
chart.chartData: {
|
||||
return {
|
||||
labels: d.timeRange[graphDetail.timeRangeTabBarIndex][graphDetail.selectedTimeRange],
|
||||
datasets: [{
|
||||
label: 'Price',
|
||||
xAxisId: 'x-axis-1',
|
||||
yAxisId: 'y-axis-1',
|
||||
backgroundColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 0.2)' : 'rgba(67, 96, 223, 0.2)',
|
||||
borderColor: (Theme.palette.name === "dark") ? 'rgba(136, 176, 255, 1)' : 'rgba(67, 96, 223, 1)',
|
||||
borderWidth: 3,
|
||||
pointRadius: 0,
|
||||
//data: d.generateData()
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
chart.chartOptions: {
|
||||
return {
|
||||
maintainAspectRatio: false,
|
||||
responsive: true,
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
//TODO enable zoom
|
||||
// zoom: {
|
||||
// enabled: true,
|
||||
// drag: true,
|
||||
// speed: 0.1,
|
||||
// threshold: 2
|
||||
// },
|
||||
// pan:{enabled:true,mode:'x'},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
displayColors: false,
|
||||
callbacks: {
|
||||
footer: function(tooltipItem, data) { return 'Vol: $43,042,678,876'; },
|
||||
label: function(tooltipItem, data) {
|
||||
let label = data.datasets[tooltipItem.datasetIndex].label || '';
|
||||
if (label) {
|
||||
label += ': ';
|
||||
}
|
||||
label += tooltipItem.yLabel.toFixed(2);
|
||||
return label.slice(0,label.indexOf(":")+1)+ " $"+label.slice(label.indexOf(":")+2, label.length);
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
id: 'x-axis-1',
|
||||
position: 'bottom',
|
||||
gridLines: {
|
||||
drawOnChartArea: false,
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 10,
|
||||
fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
|
||||
padding: 16
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
position: 'left',
|
||||
id: 'y-axis-1',
|
||||
gridLines: {
|
||||
borderDash: [8, 4],
|
||||
drawBorder: false,
|
||||
drawTicks: false,
|
||||
color: (Theme.palette.name === "dark") ? '#909090' : '#939BA1'
|
||||
},
|
||||
beforeDataLimits: (axis) => {
|
||||
axis.paddingTop = 25;
|
||||
axis.paddingBottom = 0;
|
||||
},
|
||||
ticks: {
|
||||
fontSize: 10,
|
||||
fontColor: (Theme.palette.name === "dark") ? '#909090' : '#939BA1',
|
||||
padding: 8,
|
||||
min: d.minStep,
|
||||
max: d.maxStep,
|
||||
stepSize: d.stepSize,
|
||||
callback: function(value, index, ticks) {
|
||||
return '$' + value;
|
||||
},
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
StatusChatCommandButton {
|
||||
icon.name: "send"
|
||||
icon.color: Theme.palette.miscColor2
|
||||
text: "Send transaction"
|
||||
}
|
||||
|
||||
StatusChatCommandButton {
|
||||
icon.name: "send"
|
||||
icon.rotation: 180
|
||||
icon.color: Theme.palette.miscColor8
|
||||
text: "Receive transaction"
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user