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/
|
||||
|
||||
-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,5 +0,0 @@
|
||||
cmake_minimum_required(VERSION 3.19)
|
||||
|
||||
project(StatusQ)
|
||||
|
||||
add_subdirectory(tests)
|
||||
@@ -9,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)
|
||||
|
||||
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: 21 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: 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,43 +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{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,49 +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{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{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,23 +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{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
|
||||
}
|
||||
}
|
||||
@@ -8,24 +8,9 @@ import StatusQ.Controls 0.1
|
||||
import Sandbox 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(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: Theme.dp(15)
|
||||
width: Theme.dp(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: Theme.dp(15)
|
||||
width: Theme.dp(200)
|
||||
}
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "chat"
|
||||
@@ -57,21 +42,21 @@ GridLayout {
|
||||
visible: parent.hovered
|
||||
text: "Right"
|
||||
orientation: StatusToolTip.Orientation.Right
|
||||
x: parent.width + Theme.dp(16)
|
||||
x: parent.width + 16
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Bottom"
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: parent.height + Theme.dp(12)
|
||||
y: parent.height + 12
|
||||
}
|
||||
StatusToolTip {
|
||||
visible: parent.hovered
|
||||
text: "Left"
|
||||
orientation: StatusToolTip.Orientation.Left
|
||||
x: -parent.width /2 - Theme.dp(8)
|
||||
y: parent.height / 2 - height / 2 + Theme.dp(4)
|
||||
x: -parent.width /2 -8
|
||||
y: parent.height / 2 - height / 2 + 4
|
||||
}
|
||||
}
|
||||
|
||||
@@ -95,7 +80,7 @@ GridLayout {
|
||||
tooltip.text: "Profile"
|
||||
badge.value: 0
|
||||
badge.visible: true
|
||||
badge.anchors.leftMargin:-Theme.dp(16)
|
||||
badge.anchors.leftMargin:-16
|
||||
}
|
||||
|
||||
StatusNavBarTabButton {
|
||||
@@ -130,36 +115,6 @@ GridLayout {
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: Theme.dp(100)
|
||||
implicitHeight: Theme.dp(48)
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias elided"
|
||||
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
|
||||
width: Theme.dp(100)
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: Theme.dp(100)
|
||||
implicitHeight: Theme.dp(48)
|
||||
StatusChatInfoButton {
|
||||
title: "Iuri Matias big not elided"
|
||||
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
|
||||
width: Theme.dp(400)
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatInfoButton {
|
||||
title: "group"
|
||||
subTitle: "Group Chat"
|
||||
@@ -183,34 +138,37 @@ GridLayout {
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
width: Theme.dp(360)
|
||||
width: 360
|
||||
from: 0
|
||||
to: 100
|
||||
value: 40
|
||||
}
|
||||
|
||||
StatusLabeledSlider {
|
||||
width: Theme.dp(360)
|
||||
model: [ qsTr("XS"), qsTr("S"), qsTr("M"), qsTr("L"), qsTr("XL"), qsTr("XXL")]
|
||||
StatusBaseInput {
|
||||
placeholderText: "One line"
|
||||
}
|
||||
|
||||
StatusLabeledSlider {
|
||||
width: Theme.dp(360)
|
||||
model: [ qsTr("50%"), qsTr("100%"), qsTr("150%"), qsTr("200%")]
|
||||
StatusBaseInput {
|
||||
multiline: true
|
||||
placeholderText: "Multiline"
|
||||
}
|
||||
|
||||
StatusBanner {
|
||||
id: banner
|
||||
width: Theme.dp(360)
|
||||
topPadding: Theme.dp(20)
|
||||
type: StatusBanner.Type.Danger
|
||||
statusText: "Banner"
|
||||
StatusBaseInput {
|
||||
multiline: true
|
||||
placeholderText: "Multiline with static height"
|
||||
implicitHeight: 100
|
||||
}
|
||||
|
||||
StatusProgressBar {
|
||||
id: progressBar
|
||||
text: "Weak"
|
||||
value: 0.5
|
||||
fillColor : Theme.palette.pinColor1
|
||||
Item {
|
||||
implicitHeight: 300
|
||||
implicitWidth: 300
|
||||
|
||||
StatusBaseInput {
|
||||
anchors.centerIn: parent
|
||||
multiline: true
|
||||
placeholderText: "Multiline with max/min"
|
||||
minimumHeight: 80
|
||||
maximumHeight: 200
|
||||
}
|
||||
}
|
||||
}
|
||||
+772
-129
@@ -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: Theme.dp(602)
|
||||
width: Theme.dp(1002)
|
||||
border.width: Theme.dp(1)
|
||||
height: 602
|
||||
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: Theme.dp(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"
|
||||
}
|
||||
|
||||
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
|
||||
@@ -77,79 +58,32 @@ Rectangle {
|
||||
|
||||
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: Theme.dp(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: Theme.dp(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 {
|
||||
@@ -175,12 +109,44 @@ Rectangle {
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-right"
|
||||
icon.width: Theme.dp(14)
|
||||
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
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
appView: Loader {
|
||||
@@ -192,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.image.source
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 6
|
||||
columnSpacing: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(5)
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
property color iconColor
|
||||
|
||||
Repeater {
|
||||
@@ -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!"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -8,8 +8,8 @@ import StatusQ.Popups 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(5)
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
chatInfoButton.title: "Cryptokitties"
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,14 +2,11 @@ import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: themeSwitchWrapper
|
||||
signal checkedChanged()
|
||||
|
||||
property alias lightThemeEnabled: switchControl.checked
|
||||
|
||||
width: themeSwitch.width
|
||||
height: themeSwitch.height
|
||||
|
||||
@@ -20,29 +17,28 @@ Item {
|
||||
|
||||
Row {
|
||||
id: themeSwitch
|
||||
spacing: Theme.dp(2)
|
||||
spacing: 2
|
||||
|
||||
Text {
|
||||
text: "🌤"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
id: switchControl
|
||||
onCheckedChanged: themeSwitchWrapper.checkedChanged()
|
||||
|
||||
StatusToolTip {
|
||||
text: "Toggle Theme"
|
||||
visible: sensor.containsMouse
|
||||
orientation: StatusToolTip.Orientation.Bottom
|
||||
y: themeSwitchWrapper.y + Theme.dp(16)
|
||||
y: themeSwitchWrapper.y + 16
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "🌙"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
font.pixelSize: 15
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,346 +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: Theme.dp(10)
|
||||
Grid {
|
||||
id: buttonGridWidth
|
||||
columns: Theme.dp(3)
|
||||
columnSpacing: Theme.dp(38)
|
||||
rowSpacing: Theme.dp(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
|
||||
}
|
||||
|
||||
// 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: Theme.dp(44)
|
||||
height: Theme.dp(44)
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: Theme.dp(44)
|
||||
height: Theme.dp(44)
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: Theme.dp(44)
|
||||
height: Theme.dp(44)
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded white
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: Theme.dp(44)
|
||||
height: Theme.dp(44)
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: Theme.dp(44)
|
||||
height: Theme.dp(44)
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: Theme.dp(44)
|
||||
height: Theme.dp(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"
|
||||
icon.emoji: "🖼️️"
|
||||
}
|
||||
}
|
||||
@@ -1,508 +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: Theme.dp(10)
|
||||
|
||||
StatusChatToolBar {
|
||||
toolbarComponent: chatInfoButton1
|
||||
width: Theme.dp(518)
|
||||
|
||||
Component {
|
||||
id: chatInfoButton1
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
toolbarComponent: chatInfoButton2
|
||||
width: Theme.dp(518)
|
||||
|
||||
Component {
|
||||
id: chatInfoButton2
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.PublicChat
|
||||
pinnedMessagesCount: 1
|
||||
muted: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusChatToolBar {
|
||||
notificationCount: 1
|
||||
toolbarComponent: chatInfoButton3
|
||||
width: Theme.dp(518)
|
||||
|
||||
Component {
|
||||
id: chatInfoButton3
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Some contact"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
notificationCount: 1
|
||||
toolbarComponent: tagSelector
|
||||
width: Theme.dp(518)
|
||||
|
||||
Component {
|
||||
id: tagSelector
|
||||
|
||||
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"
|
||||
width: Theme.dp(100)
|
||||
height: Theme.dp(40)
|
||||
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: Theme.dp(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: Theme.dp(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: Theme.dp(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-right"
|
||||
icon.width: Theme.dp(14)
|
||||
iconRotation: 180
|
||||
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: Theme.dp(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: Theme.dp(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-right"
|
||||
icon.width: Theme.dp(14)
|
||||
iconRotation: Theme.dp(180)
|
||||
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: Theme.dp(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: Theme.dp(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-right"
|
||||
icon.width: Theme.dp(14)
|
||||
iconRotation: Theme.dp(180)
|
||||
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: Theme.dp(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: Theme.dp(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-right"
|
||||
icon.width: Theme.dp(14)
|
||||
iconRotation: Theme.dp(180)
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,477 +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
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(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) with very long text"
|
||||
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-emoji"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
icon.emoji: "😁"
|
||||
}
|
||||
|
||||
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
|
||||
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: Theme.dp(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"
|
||||
icon.name: "info"
|
||||
|
||||
statusListItemTitle.font.pixelSize: Theme.dp(17)
|
||||
statusListItemTitle.font.weight: Font.Bold
|
||||
}
|
||||
|
||||
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"
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
icon.isLetterIdenticon: true
|
||||
icon.color: "orange"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
titleAsideText: "test"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
icon.name: "delete"
|
||||
type: StatusListItem.Type.Danger
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge"
|
||||
subTitle: "Subtitle"
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
badge.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Badge 2"
|
||||
subTitle: "Subtitle"
|
||||
icon.isLetterIdenticon: true
|
||||
badge.primaryText: "CryptoKitties"
|
||||
badge.secondaryText: "#test"
|
||||
badge.icon.color: "orange"
|
||||
badge.icon.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Tags"
|
||||
icon.isLetterIdenticon: true
|
||||
bottomModel: 3
|
||||
bottomDelegate: StatusListItemTag {
|
||||
title: "tag"
|
||||
icon.isLetterIdenticon: true
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Inline Tags"
|
||||
icon.isLetterIdenticon: true
|
||||
tagsModel : 2
|
||||
tagsDelegate: StatusListItemTag {
|
||||
color: "blue"
|
||||
height: Theme.dp(24)
|
||||
radius: Theme.dp(6)
|
||||
closeButtonVisible: false
|
||||
icon.emoji: "😁"
|
||||
icon.emojiSize: Emoji.size.verySmall
|
||||
icon.isLetterIdenticon: true
|
||||
title: "helloworld.eth"
|
||||
titleText.font.pixelSize: Theme.dp(12)
|
||||
titleText.color: Theme.palette.indirectColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Emoji"
|
||||
subTitle: "Emoji"
|
||||
icon.emoji: "😁"
|
||||
icon.color: "yellow"
|
||||
icon.letterSize: Theme.dp(14)
|
||||
icon.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"
|
||||
icon.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
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: 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
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "very-long-annoying-nickname.eth"
|
||||
isUntrustworthy: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This girl I know from work"
|
||||
userName: "annabelle"
|
||||
status: 1 // FIXME: use enum
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "Mark Cuban"
|
||||
userName: "annabelle"
|
||||
pubKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
|
||||
isContact: true
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "admin.guy"
|
||||
isAdmin: true
|
||||
isUntrustworthy: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 16
|
||||
text: "Loading features:"
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Nokia 3310"
|
||||
subTitle: "Incoming device"
|
||||
label: "loading: true"
|
||||
icon.emoji: "😁"
|
||||
icon.color: "hotpink"
|
||||
icon.letterSize: 14
|
||||
icon.isLetterIdenticon: true
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Nokia 3310"
|
||||
subTitle: "Device"
|
||||
label: "loadingFailed: true"
|
||||
icon.emoji: "😁"
|
||||
icon.color: "hotpink"
|
||||
icon.letterSize: 14
|
||||
icon.isLetterIdenticon: true
|
||||
loadingFailed: true
|
||||
}
|
||||
}
|
||||
@@ -1,61 +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: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(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"
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: 12
|
||||
StatusLetterIdenticon {
|
||||
name: "A"
|
||||
color: Theme.palette.userCustomizationColors[index]
|
||||
letterSize: Theme.dp(16)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,464 +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.Popups 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
Column {
|
||||
spacing: Theme.dp(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.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: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
|
||||
icon.width: Theme.dp(20)
|
||||
icon.height: Theme.dp(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
|
||||
}
|
||||
]
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
|
||||
icon.width: Theme.dp(20)
|
||||
icon.height: Theme.dp(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: Theme.dp(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.icon.isLetterIdenticon: true
|
||||
header.icon.background.color: "red"
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: Theme.dp(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.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.image.isIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: Theme.dp(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.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.image.isIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: Theme.dp(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.image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
header.image.isIdenticon: true
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Some text content"
|
||||
font.pixelSize: Theme.dp(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.iconSettings.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: Theme.dp(200)
|
||||
advancedHeaderComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: Theme.dp(50)
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: Theme.dp(1)
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any header here"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
advancedFooterComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: Theme.dp(50)
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: Theme.dp(1)
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any footer here"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: floatingHeaderModal
|
||||
anchors.centerIn: parent
|
||||
height: Theme.dp(200)
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
showAdvancedHeader: true
|
||||
hasFloatingButtons: true
|
||||
advancedHeaderComponent: StatusFloatingButtonsSelector {
|
||||
id: floatingHeader
|
||||
model: dummyAccountsModel
|
||||
delegate: Rectangle {
|
||||
width: button.width
|
||||
height: button.height
|
||||
radius: Theme.dp(8)
|
||||
visible: visibleIndices.includes(index)
|
||||
StatusButton {
|
||||
id: button
|
||||
topPadding: Theme.dp(8)
|
||||
bottomPadding: 0
|
||||
implicitHeight: Theme.dp(32)
|
||||
defaultLeftPadding: Theme.dp(4)
|
||||
text: name
|
||||
icon.emoji: !!emoji ? emoji: ""
|
||||
icon.emojiSize: Emoji.size.middle
|
||||
icon.name: !emoji ? "filled-account": ""
|
||||
normalColor: "transparent"
|
||||
highlighted: index === floatingHeader.currentIndex
|
||||
onClicked: {
|
||||
floatingHeader.currentIndex = index
|
||||
}
|
||||
}
|
||||
}
|
||||
popupMenuDelegate: StatusListItem {
|
||||
implicitWidth: Theme.dp(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,104 +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: Theme.dp(15)
|
||||
clip: true
|
||||
delegate: StatusMessage {
|
||||
id: delegate
|
||||
width: parent.width
|
||||
|
||||
audioMessageInfoText: "Audio Message"
|
||||
cancelButtonText: "Cancel"
|
||||
saveButtonText: "Save"
|
||||
loadingImageText: "Loading image..."
|
||||
errorLoadingImageText: "Error loading the image"
|
||||
resendText: "Resend"
|
||||
pinnedMsgInfoText: "Pinned by"
|
||||
|
||||
messageDetails: StatusMessageDetails {
|
||||
contentType: model.contentType
|
||||
messageContent: model.messageContent
|
||||
amISender: model.amIsender
|
||||
displayName: model.userName
|
||||
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
|
||||
chatID: model.chatKey
|
||||
profileImage: StatusImageSettings {
|
||||
width: Theme.dp(40)
|
||||
height: Theme.dp(40)
|
||||
source: model.profileImage
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
messageText: model.message
|
||||
hasMention: model.hasMention
|
||||
isMutualContact: model.isMutualContact
|
||||
trustIndicator: model.trustIndicator
|
||||
isPinned: model.isPinned
|
||||
pinnedBy: model.pinnedBy
|
||||
hasExpired: model.hasExpired
|
||||
}
|
||||
timestamp.text: "10:00 am"
|
||||
timestamp.tooltip.text: "10:01 am"
|
||||
// reply related data
|
||||
isAReply: model.isReply
|
||||
replyDetails: StatusMessageDetails {
|
||||
amISender: model.isReply ? model.replyAmISender : ""
|
||||
displayName: model.isReply ? model.replySenderName: ""
|
||||
profileImage: StatusImageSettings {
|
||||
width: Theme.dp(20)
|
||||
height: Theme.dp(20)
|
||||
source: model.isReply ? model.replyProfileImage: ""
|
||||
isIdenticon: model.isReply ? model.replyIsIdenticon: ""
|
||||
}
|
||||
messageText: model.isReply ? model.replyMessageText: ""
|
||||
contentType: model.replyContentType
|
||||
messageContent: model.replyMessageContent
|
||||
}
|
||||
quickActions: [
|
||||
StatusFlatRoundButton {
|
||||
id: emojiBtn
|
||||
width: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
icon.name: "reaction-b"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Add reaction"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: replyBtn
|
||||
width: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
icon.name: "reply"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Reply"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
width: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
icon.name: "tiny/edit"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Edit"
|
||||
onClicked: {
|
||||
delegate.editMode = !delegate.editMode
|
||||
}
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: otherBtn
|
||||
width: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "More"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,104 +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: Theme.dp(16)
|
||||
property ListModel contactsModel: null
|
||||
background: null
|
||||
|
||||
header: RowLayout {
|
||||
id: headerRow
|
||||
width: parent.width
|
||||
height: tagSelector.height
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.dp(8)
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: Theme.dp(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 {
|
||||
implicitHeight: Theme.dp(44)
|
||||
Layout.alignment: Qt.AlignTop
|
||||
enabled: (tagSelector.namesModel.count > 0)
|
||||
text: "Confirm"
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.dp(68)
|
||||
|
||||
StatusBaseText {
|
||||
visible: (contactsModel.count === 0)
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: Theme.dp(15)
|
||||
color: Theme.palette.baseColor1
|
||||
text: qsTr("You can only send direct messages to your Contacts. \n\n
|
||||
Send a contact request to the person you would like to chat with, you will be\n 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.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
|
||||
contentItem: Column {
|
||||
width: root.width
|
||||
|
||||
StatusModalDivider {
|
||||
bottomPadding: Theme.dp(8)
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: "A community of cat lovers, meow!"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: Theme.dp(15)
|
||||
height: Theme.dp(46)
|
||||
color: Theme.palette.directColor1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: Theme.dp(16)
|
||||
anchors.rightMargin: Theme.dp(16)
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: Theme.dp(8)
|
||||
bottomPadding: Theme.dp(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: Theme.dp(8)
|
||||
bottomPadding: Theme.dp(8)
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: Theme.dp(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: Theme.dp(8)
|
||||
bottomPadding: Theme.dp(8)
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: Theme.dp(17)
|
||||
title: "Edit community"
|
||||
icon.name: "edit"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: Theme.dp(17)
|
||||
title: "Transfer ownership"
|
||||
icon.name: "exchange"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: Theme.dp(17)
|
||||
title: "Leave community"
|
||||
icon.name: "arrow-right"
|
||||
icon.rotation: 180
|
||||
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: Theme.dp(32)
|
||||
height: Theme.dp(32)
|
||||
|
||||
icon.width: Theme.dp(20)
|
||||
icon.height: Theme.dp(20)
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Contact request will be shown here"
|
||||
font.pixelSize: Theme.dp(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,197 +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
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
property bool createChat: false
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.dp(16)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: searchInputWrapper
|
||||
width: Theme.dp(288)
|
||||
height: searchInput.height
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: Theme.dp(16)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
implicitHeight: Theme.dp(36)
|
||||
topPadding: Theme.dp(8)
|
||||
bottomPadding: Theme.dp(8)
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "edit"
|
||||
onClicked: {
|
||||
root.createChat = !root.createChat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: Theme.dp(16)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: Theme.dp(8)
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
width: parent.width
|
||||
toolbarComponent: statusChatInfoButton
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
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: Theme.dp(14)
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusChatInfoButton
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "Amazing Funny Squirrel"
|
||||
subTitle: "Contact"
|
||||
icon.color: Theme.palette.miscColor7
|
||||
type: StatusChatInfoButton.Type.OneToOneChat
|
||||
pinnedMessagesCount: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,156 +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.Components 0.1
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
|
||||
ScrollView {
|
||||
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: Theme.dp(70)
|
||||
property int layoutHMargin: Theme.dp(64)
|
||||
property int titlePixelSize: Theme.dp(28)
|
||||
property int subtitlePixelSize: Theme.dp(17)
|
||||
property int stylePadding: Theme.dp(16)
|
||||
|
||||
function navigateToCommunity(communityId) {
|
||||
console.info("Clicked community ID: " + communityId)
|
||||
}
|
||||
}
|
||||
|
||||
contentHeight: column.height + d.layoutVMargin
|
||||
contentWidth: column.width + d.layoutHMargin
|
||||
clip: true
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
spacing: Theme.dp(18)
|
||||
|
||||
StatusBaseText {
|
||||
Layout.topMargin: d.layoutVMargin
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
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: Theme.dp(1234) // by design
|
||||
spacing: d.stylePadding/2
|
||||
|
||||
Repeater {
|
||||
model: d.tagsModel
|
||||
delegate: StatusListItemTag {
|
||||
border.color: Theme.palette.baseColor2
|
||||
color: "transparent"
|
||||
height: Theme.dp(32)
|
||||
radius: Theme.dp(36)
|
||||
closeButtonVisible: false
|
||||
icon.emoji: model.emoji
|
||||
icon.height: Theme.dp(32)
|
||||
icon.width: icon.heights
|
||||
icon.color: "transparent"
|
||||
icon.isLetterIdenticon: true
|
||||
title: model.name
|
||||
titleText.font.pixelSize: Theme.dp(15)
|
||||
titleText.color: Theme.palette.primaryColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
Layout.leftMargin: d.layoutHMargin
|
||||
Layout.topMargin: Theme.dp(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: Theme.dp(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,282 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
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
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
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")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
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: { 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"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: Theme.dp(8)
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - Theme.dp(64)) ? implicitHeight + Theme.dp(8) : leftPanel.height - Theme.dp(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 {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
|
||||
width: parent.width
|
||||
toolbarComponent: statusChatInfoButton
|
||||
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(communityDetailModalTitle,
|
||||
"",
|
||||
communityDetailModalImage);
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusChatInfoButton
|
||||
|
||||
StatusChatInfoButton {
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
title: "general"
|
||||
subTitle: "Community Chat"
|
||||
icon.color: Theme.palette.miscColor6
|
||||
type: StatusChatInfoButton.Type.CommunityChat
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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: {
|
||||
statusChatToolBar.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
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > Theme.dp(50)) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: Theme.dp(15)
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: Theme.dp(16)
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: Theme.dp(8)
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.dp(8)
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: Theme.dp(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
|
||||
image.source: model.icon
|
||||
image.isIdenticon: false
|
||||
status: model.onlineStatus
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
id: root
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: profileHeadline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.dp(16)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Profile"
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
anchors.top: profileHeadline.bottom
|
||||
anchors.topMargin: Theme.dp(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: Theme.dp(4)
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: invisibleSeparator
|
||||
height: Theme.dp(16)
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.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 |
@@ -1 +0,0 @@
|
||||
singleton Models 1.0 Models.qml
|
||||
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 |
@@ -11,11 +11,6 @@ int main(int argc, char *argv[])
|
||||
#endif
|
||||
|
||||
SandboxApp app(argc, argv);
|
||||
|
||||
app.setOrganizationName("Status");
|
||||
app.setOrganizationDomain("status.im");
|
||||
app.setApplicationName("Sandbox");
|
||||
|
||||
app.startEngine();
|
||||
|
||||
return app.exec();
|
||||
|
||||
+130
-318
@@ -2,8 +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 Sandbox 0.1
|
||||
|
||||
@@ -13,14 +11,13 @@ import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
StatusWindow {
|
||||
id: rootWindow
|
||||
width: Theme.screenWidth
|
||||
height: Theme.screenHeight
|
||||
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
|
||||
: 1024
|
||||
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
|
||||
:840
|
||||
visible: true
|
||||
title: qsTr("StatusQ Documentation App")
|
||||
|
||||
@@ -32,35 +29,11 @@ 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 demoApp: 101
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
readonly property real scaleRatio: Math.min(rootWindow.width / Theme.screenWidth, rootWindow.height / Theme.screenHeight)
|
||||
onScaleRatioChanged: {
|
||||
Theme.scaleFactor = scaleRatio;
|
||||
rootWindow.updatePosition();
|
||||
}
|
||||
|
||||
StatusAppLayout {
|
||||
@@ -70,36 +43,37 @@ StatusWindow {
|
||||
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: Theme.dp(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)
|
||||
rootWindow.setActiveItem(sectionId)
|
||||
checked = !checked
|
||||
demoAppButton.checked = false
|
||||
}
|
||||
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)
|
||||
rootWindow.setActiveItem(model.sectionId)
|
||||
checked = !checked
|
||||
apiDocsButton.checked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
appView: StackView {
|
||||
@@ -110,13 +84,15 @@ StatusWindow {
|
||||
|
||||
ThemeSwitch {
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.dp(32)
|
||||
anchors.topMargin: 32
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: Theme.dp(32)
|
||||
lightThemeEnabled: storeSettings.lightTheme
|
||||
onLightThemeEnabledChanged: {
|
||||
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
|
||||
storeSettings.lightTheme = lightThemeEnabled
|
||||
anchors.rightMargin: 32
|
||||
onCheckedChanged: {
|
||||
if (Theme.palette === rootWindow.lightTheme) {
|
||||
Theme.palette = rootWindow.darkTheme
|
||||
} else {
|
||||
Theme.palette = rootWindow.lightTheme
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -125,16 +101,6 @@ StatusWindow {
|
||||
id: libraryDocumentationCmp
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
id: mainPageView
|
||||
|
||||
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: Item {
|
||||
anchors.fill: parent
|
||||
@@ -142,194 +108,68 @@ StatusWindow {
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
contentHeight: navigation.height + Theme.dp(56)
|
||||
contentHeight: navigation.height + 56
|
||||
contentWidth: navigation.width
|
||||
clip: true
|
||||
Column {
|
||||
id: navigation
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: Theme.dp(48)
|
||||
anchors.topMargin: 48
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 0
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Core" }
|
||||
StatusNavigationListItem {
|
||||
title: "Icons"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
StatusNavigationListItem {
|
||||
title: "Icons"
|
||||
selected: page.sourceComponent == iconsComponent
|
||||
onClicked: page.sourceComponent = iconsComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Layout" }
|
||||
StatusNavigationListItem {
|
||||
title: "Layouts"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title.substring(0, title.length - 1));
|
||||
StatusNavigationListItem {
|
||||
title: "Layouts"
|
||||
selected: page.sourceComponent == layoutComponent
|
||||
onClicked: page.sourceComponent = layoutComponent
|
||||
}
|
||||
|
||||
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: "Buttons"
|
||||
selected: page.sourceComponent == buttonsComponent
|
||||
onClicked: page.sourceComponent = buttonsComponent
|
||||
}
|
||||
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: "StatusSelect"
|
||||
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: "StatusAssetSelector"
|
||||
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);
|
||||
title: "Controls"
|
||||
selected: page.sourceComponent == controlsComponent
|
||||
onClicked: page.sourceComponent = controlsComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAddress"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
StatusNavigationListItem {
|
||||
title: "List Items"
|
||||
selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
|
||||
onClicked: mainPageView.control(title.replace(/\s+/g, ''));
|
||||
selected: page.sourceComponent == listItemsComponent
|
||||
onClicked: page.sourceComponent = listItemsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatInfoToolBar"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == chatInfoToolBarComponent
|
||||
onClicked: page.sourceComponent = chatInfoToolBarComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
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);
|
||||
selected: page.sourceComponent == othersComponent
|
||||
onClicked: page.sourceComponent = othersComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == popupMenuComponent
|
||||
onClicked: page.sourceComponent = popupMenuComponent
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "StatusModal"
|
||||
selected: viewLoader.source.toString().includes("Popups")
|
||||
onClicked: mainPageView.control("Popups");
|
||||
}
|
||||
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);
|
||||
selected: page.sourceComponent == statusModalComponent
|
||||
onClicked: page.sourceComponent = statusModalComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -340,43 +180,27 @@ StatusWindow {
|
||||
anchors.fill: parent
|
||||
|
||||
ScrollView {
|
||||
visible: !storeSettings.fillPage
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: Theme.dp(64)
|
||||
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: 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: Theme.dp(64)
|
||||
visible: storeSettings.fillPage
|
||||
clip: true
|
||||
|
||||
source: viewLoader.source
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -404,52 +228,68 @@ StatusWindow {
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: iconsComponent
|
||||
Icons { iconColor: Theme.palette.primaryColor1 }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: controlsComponent
|
||||
Controls {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listItemsComponent
|
||||
ListItems {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: layoutComponent
|
||||
Layout {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: othersComponent
|
||||
Others {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: buttonsComponent
|
||||
Buttons {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: popupMenuComponent
|
||||
StatusPopupMenuPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatInfoToolBarComponent
|
||||
StatusChatInfoToolBarPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusModalComponent
|
||||
Popups {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: demoAppCmp
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor3
|
||||
|
||||
Row {
|
||||
id: platformSwitch
|
||||
anchors.left: demoApp.left
|
||||
anchors.bottom: demoApp.top
|
||||
anchors.bottomMargin: Theme.dp(20)
|
||||
spacing: Theme.dp(2)
|
||||
|
||||
Text {
|
||||
text: "OSX"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
onCheckedChanged: {
|
||||
if (checked) {
|
||||
demoApp.titleStyle = "windows"
|
||||
} else {
|
||||
demoApp.titleStyle = "osx"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Win"
|
||||
font.pixelSize: Theme.dp(15)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
DemoApp {
|
||||
id: demoApp
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
DropShadow {
|
||||
anchors.fill: demoApp
|
||||
source: demoApp
|
||||
horizontalOffset: 0
|
||||
verticalOffset: Theme.dp(5)
|
||||
radius: Theme.dp(20)
|
||||
verticalOffset: 5
|
||||
radius: 20
|
||||
samples: 20
|
||||
color: "#22000000"
|
||||
}
|
||||
@@ -459,9 +299,7 @@ StatusWindow {
|
||||
StatusMacTrafficLights {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.margins: Theme.dp(13)
|
||||
|
||||
visible: Qt.platform.os == "osx"
|
||||
anchors.margins: 13
|
||||
|
||||
onClose: {
|
||||
rootWindow.close()
|
||||
@@ -475,30 +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 bool lightTheme: true
|
||||
property bool fillPage: false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,64 +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
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
Column {
|
||||
spacing: Theme.dp(8)
|
||||
|
||||
StatusAccountSelector {
|
||||
id: accountSelector
|
||||
accounts: ListModel {
|
||||
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: "0"
|
||||
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: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
StatusAddress {
|
||||
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
|
||||
}
|
||||
|
||||
Item {
|
||||
width: Theme.dp(200)
|
||||
height: childrenRect.height
|
||||
StatusAddress {
|
||||
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
|
||||
expandable: true
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +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.Popups 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
StatusAssetSelector {
|
||||
getCurrencyBalanceString: function (currencyBalance) {
|
||||
return currencyBalance.toFixed(2) + " USD"
|
||||
}
|
||||
tokenAssetSourceFn: function (symbol) {
|
||||
return "../../assets/img/icons/snt.svg"
|
||||
}
|
||||
assets: ListModel {
|
||||
ListElement {
|
||||
address: "0x1234"
|
||||
name: "Status Network Token"
|
||||
balance: "20"
|
||||
symbol: "SNT"
|
||||
currencyBalance: 9992.01
|
||||
}
|
||||
ListElement {
|
||||
address: "0x1234"
|
||||
name: "DAI Token"
|
||||
balance: "15"
|
||||
symbol: "DAI"
|
||||
currencyBalance: 20.00001
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: Theme.dp(800)
|
||||
height: Theme.dp(100)
|
||||
|
||||
Row {
|
||||
id: selectedColor
|
||||
anchors.top: parent.top
|
||||
anchors.left: colorSelectionGrid.left
|
||||
spacing: Theme.dp(10)
|
||||
StatusBaseText {
|
||||
text: "SelectedColor is"
|
||||
}
|
||||
Rectangle {
|
||||
width: Theme.dp(100)
|
||||
height: Theme.dp(20)
|
||||
radius: width/2
|
||||
color: colorSelectionGrid.selectedColor
|
||||
}
|
||||
}
|
||||
|
||||
StatusColorSelectorGrid {
|
||||
id: colorSelectionGrid
|
||||
anchors.top: selectedColor.bottom
|
||||
anchors.topMargin: Theme.dp(10)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
titleText: "COLOR"
|
||||
selectedColorIndex: 2
|
||||
}
|
||||
}
|
||||
@@ -1,17 +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: Theme.dp(8)
|
||||
|
||||
StatusColorSelector {
|
||||
model: ["red", "blue", "green"]
|
||||
}
|
||||
}
|
||||
@@ -1,110 +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 {
|
||||
|
||||
ColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Thickness")
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
id: thicknessSlider
|
||||
from: colorSpace.width / 8
|
||||
to: colorSpace.width / 16
|
||||
value: colorSpace.width / 10
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Min saturate: ") + colorSpace.minSaturate.toFixed(2)
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
id: minSatSlider
|
||||
from: 0
|
||||
to: 0.5
|
||||
value: 0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Max saturate: ") + colorSpace.maxSaturate.toFixed(2)
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
id: maxSatSlider
|
||||
from: 0.51
|
||||
to: 1.0
|
||||
value: 1.0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Min value: ") + colorSpace.minValue.toFixed(2)
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
id: minValSlider
|
||||
from: 0
|
||||
to: 0.5
|
||||
value: 0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Max value: ") + colorSpace.maxValue.toFixed(2)
|
||||
}
|
||||
|
||||
StatusSlider {
|
||||
id: maxValSlider
|
||||
from: 0.51
|
||||
to: 1.0
|
||||
value: 1.0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusColorSpace {
|
||||
id: colorSpace
|
||||
color: "#ed77eb"
|
||||
thickness: thicknessSlider.value
|
||||
minSaturate: minSatSlider.value
|
||||
maxSaturate: maxSatSlider.value
|
||||
minValue: minValSlider.value
|
||||
maxValue: maxValSlider.value
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: qsTr("Color") + ": " + colorSpace.color
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
color: colorSpace.color
|
||||
implicitHeight: Theme.dp(48)
|
||||
radius: Theme.dp(10)
|
||||
Layout.fillWidth: true
|
||||
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
color: Theme.palette.white
|
||||
font.pixelSize: Theme.dp(15)
|
||||
text: "Quick brown fox jumps over the lazy dog"
|
||||
}
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Randomize"
|
||||
onPressed: colorSpace.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,48 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import QtQuick.Layouts 1.13
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
GridLayout {
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
function navigateToCommunity(communityID) {
|
||||
console.log("Clicked community: " + communityID)
|
||||
}
|
||||
}
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
columns: 2
|
||||
columnSpacing: Theme.dp(28)
|
||||
rowSpacing: Theme.dp(28)
|
||||
|
||||
Repeater {
|
||||
model: Models.curatedCommunitiesModel
|
||||
delegate: StatusCommunityCard {
|
||||
locale: "en"
|
||||
communityId: model.communityId
|
||||
loaded: model.available
|
||||
logo: model.logo
|
||||
banner: model.banner
|
||||
name: model.name
|
||||
description: model.description
|
||||
members: model.members
|
||||
activeUsers: model.activeUsers
|
||||
popularity: model.popularity
|
||||
isPrivate: model.isPrivate
|
||||
tokenLogo: model.tokenLogo
|
||||
categories: ListModel {
|
||||
ListElement { name: "Crypto"; emoji: "🔗"}
|
||||
ListElement { name: "Privacy"; emoji: "👻"}
|
||||
ListElement { name: "Social"; emoji: "☕"}
|
||||
}
|
||||
|
||||
onClicked: { d.navigateToCommunity(communityId) }
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,83 +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
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
Item {
|
||||
|
||||
property int cntSelectedTags: 0
|
||||
property int maxSelectedTags: 4
|
||||
property ListModel tagsModel: ListModel {}
|
||||
|
||||
Component.onCompleted: {
|
||||
tagsModel.clear();
|
||||
for (const key of Object.keys(Models.communityTags)) {
|
||||
tagsModel.append({ name: key, emoji: Models.communityTags[key], selected: false });
|
||||
}
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: column
|
||||
anchors.centerIn: parent
|
||||
width: Theme.dp(600)
|
||||
height: Theme.dp(500)
|
||||
spacing: Theme.dp(20)
|
||||
|
||||
StatusInput {
|
||||
id: tagsFilter
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
label: qsTr("Select tags that will fit your Community")
|
||||
input.icon.name: "search"
|
||||
input.placeholderText: qsTr("Search tags")
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusCommunityTags {
|
||||
filterString: tagsFilter.text
|
||||
model: tagsModel
|
||||
enabled: cntSelectedTags < maxSelectedTags
|
||||
onClicked: {
|
||||
cntSelectedTags++;
|
||||
item.selected = true;
|
||||
}
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
StatusBaseText {
|
||||
text: qsTr("Selected tags")
|
||||
font.pixelSize: Theme.dp(15)
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: cntSelectedTags + "/" + maxSelectedTags
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: Theme.dp(13)
|
||||
}
|
||||
}
|
||||
|
||||
StatusCommunityTags {
|
||||
model: tagsModel
|
||||
showOnlySelected: true
|
||||
onClicked: {
|
||||
cntSelectedTags--;
|
||||
item.selected = false;
|
||||
}
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,152 +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
|
||||
|
||||
Column {
|
||||
spacing: Theme.dp(12)
|
||||
width: Theme.dp(800)
|
||||
anchors.top:parent.top
|
||||
leftPadding: Theme.dp(20)
|
||||
rightPadding: Theme.dp(20)
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: Theme.dp(30)
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Primary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: false
|
||||
icon.name: "seed-phrase"
|
||||
primaryText: "Back up seed phrase"
|
||||
secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
|
||||
button.text: qsTr("Back up seed phrase")
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: true
|
||||
icon.name: "secret"
|
||||
primaryText: "Account signing phrase"
|
||||
secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: true
|
||||
icon.name: "seed-phrase"
|
||||
primaryText: "View private key"
|
||||
secondaryText: "Back up your seed phrase now to secure this account"
|
||||
expandableComponent: notImplemented
|
||||
button.text: "View private key"
|
||||
button.icon.name: "tiny/public-chat"
|
||||
button.onClicked: {
|
||||
// To-do open enter password Modal
|
||||
expanded = !expanded
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: Theme.dp(30)
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Secondary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
primaryText: "CryptoKitties"
|
||||
additionalText: "1456 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
|
||||
additionalText: "564.90 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
primaryText: "CryptoKitties"
|
||||
additionalText: "1456 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: Theme.dp(30)
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Tertiary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandable: true
|
||||
primaryText: "CryptoKitties"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandable: true
|
||||
primaryText: "Rescue Moon"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
Component {
|
||||
id: notImplemented
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: Theme.dp(654)
|
||||
height: infoText.implicitHeight
|
||||
color: Theme.palette.baseColor5
|
||||
StatusBaseText {
|
||||
id: infoText
|
||||
anchors.centerIn: parent
|
||||
color: Theme.palette.directColor4
|
||||
font.pixelSize: Theme.dp(15)
|
||||
lineHeight: Theme.dp(22)
|
||||
lineHeightMode: Text.FixedHeight
|
||||
font.weight: Font.Medium
|
||||
text: qsTr("Not Implemented")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import QtGraphicalEffects 1.14
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: mainLayout.implicitWidth
|
||||
implicitHeight: mainLayout.implicitHeight
|
||||
|
||||
property var testControls: [ctrl1, ctrl2, ctrl3]
|
||||
|
||||
property bool globalStylePreferRound: true
|
||||
|
||||
ColumnLayout {
|
||||
id: mainLayout
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
|
||||
StatusImageCropPanel {
|
||||
id: ctrl1
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
|
||||
}
|
||||
Text {
|
||||
text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
StatusImageCropPanel {
|
||||
id: ctrl2
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
|
||||
aspectRatio: 16/9
|
||||
enableCheckers: true
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
Text {
|
||||
text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
StatusImageCropPanel {
|
||||
id: ctrl3
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
|
||||
aspectRatio: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: StandardKey.ZoomIn
|
||||
onActivated: {
|
||||
for(let i in testControls) {
|
||||
const c = testControls[i]
|
||||
c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: StandardKey.ZoomOut
|
||||
onActivated: {
|
||||
for(let i in testControls) {
|
||||
const c = testControls[i]
|
||||
c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequences: ["Ctrl+W"]
|
||||
onActivated: globalStylePreferRound = !globalStylePreferRound
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,216 +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.Controls.Validators 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: Theme.dp(8)
|
||||
|
||||
StatusInput {
|
||||
input.placeholderText: "Placeholder"
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
input.placeholderText: "Disabled"
|
||||
input.enabled: false
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
input.placeholderText: "Clearable"
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
input.placeholderText: "Invalid"
|
||||
input.valid: false
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
|
||||
input.icon.name: "search"
|
||||
input.placeholderText: "Input with icon"
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
input.placeholderText: "Placeholder"
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
charLimit: 30
|
||||
input.placeholderText: "Placeholder"
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
charLimit: 30
|
||||
input.placeholderText: "Placeholder"
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: Theme.dp(480)
|
||||
implicitHeight: Theme.dp(82)
|
||||
z: 100000
|
||||
StatusSeedPhraseInput {
|
||||
id: statusSeedInput
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: parent.height
|
||||
textEdit.input.anchors.leftMargin: Theme.dp(16)
|
||||
textEdit.input.anchors.rightMargin: Theme.dp(16)
|
||||
textEdit.input.anchors.topMargin: Theme.dp(11)
|
||||
textEdit.label: "Input with drop down selection list"
|
||||
leftComponentText: "1"
|
||||
inputList: ListModel {
|
||||
ListElement {
|
||||
seedWord: "panda"
|
||||
}
|
||||
ListElement {
|
||||
seedWord: "posible"
|
||||
}
|
||||
ListElement {
|
||||
seedWord: "wing"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
charLimit: 30
|
||||
errorMessage: "Error message"
|
||||
input.clearable: true
|
||||
input.valid: false
|
||||
input.placeholderText: "Placeholder"
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "StatusInput"
|
||||
secondaryLabel: "with right icon"
|
||||
input.icon.width: Theme.dp(15)
|
||||
input.icon.height: Theme.dp(11)
|
||||
input.icon.name: text !== "" ? "checkmark" : ""
|
||||
input.leftIcon: false
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
secondaryLabel: "secondary label"
|
||||
input.placeholderText: "Placeholder"
|
||||
input.implicitHeight: Theme.dp(56)
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
id: input
|
||||
label: "Label"
|
||||
charLimit: 30
|
||||
input.placeholderText: "Input with validator"
|
||||
|
||||
validators: [
|
||||
StatusMinLengthValidator {
|
||||
minLength: 10
|
||||
errorMessage: {
|
||||
if (input.errors && input.errors.minLength) {
|
||||
return `Value can't be shorter than ${input.errors.minLength.min} but got ${input.errors.minLength.actual}`
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Input with <i>StatusRegularExpressionValidator</i>"
|
||||
charLimit: 30
|
||||
input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
|
||||
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
|
||||
validators: [
|
||||
StatusRegularExpressionValidator {
|
||||
regularExpression: /^[0-9A-Za-z_\$-\s]*$/
|
||||
errorMessage: "Bad input!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
input.placeholderText: "Input width component (right side)"
|
||||
input.rightComponent: StatusIcon {
|
||||
icon: "cancel"
|
||||
height: Theme.dp(16)
|
||||
color: Theme.palette.dangerColor1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusInput {
|
||||
input.multiline: true
|
||||
input.placeholderText: "Multiline"
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
input.multiline: true
|
||||
input.placeholderText: "Multiline with static height"
|
||||
input.implicitHeight: Theme.dp(100)
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
input.multiline: true
|
||||
input.placeholderText: "Multiline with max/min"
|
||||
input.minimumHeight: Theme.dp(80)
|
||||
input.maximumHeight: Theme.dp(200)
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
property bool toggled: true
|
||||
label: "Input with emoji icon"
|
||||
input.placeholderText: "Enter Name"
|
||||
input.icon.emoji: toggled ? "😁" : "🧸"
|
||||
input.icon.color: "blue"
|
||||
input.isIconSelectable: true
|
||||
onIconClicked: {
|
||||
toggled = !toggled
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
property bool toggled: true
|
||||
label: "Input with selectable icon which is not an emoji"
|
||||
input.placeholderText: "Enter Name"
|
||||
input.icon.emoji: ""
|
||||
input.icon.name: toggled ? "filled-account" : "image"
|
||||
input.icon.color: "blue"
|
||||
input.isIconSelectable: true
|
||||
onIconClicked: {
|
||||
toggled = !toggled
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Input with inline token selector"
|
||||
input.leftComponent: StatusTokenInlineSelector {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
tokens: [{amount: 0.1, token: "ETH"},
|
||||
{amount: 10, token: "SNT"},
|
||||
{amount: 15, token: "MANA"}]
|
||||
|
||||
StatusToolTip {
|
||||
id: toolTip
|
||||
text: "posted"
|
||||
}
|
||||
onTriggered: toolTip.visible = true
|
||||
}
|
||||
input.edit.readOnly: true
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
GridLayout {
|
||||
id: root
|
||||
columns: 1
|
||||
rowSpacing: Theme.dp(150)
|
||||
|
||||
GridLayout {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
rows: 4
|
||||
columns: 2
|
||||
rowSpacing: Theme.dp(170)
|
||||
columnSpacing: Theme.dp(150)
|
||||
z: 100
|
||||
StatusListPicker {
|
||||
id: languagePicker
|
||||
z: 100
|
||||
inputList: Models.languagePickerModel
|
||||
placeholderSearchText: qsTr("Search Languages")
|
||||
menuAlignment: StatusListPicker.MenuAlignment.Left
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: languagePicker2
|
||||
z: 100
|
||||
inputList: Models.languageNoImagePickerModel
|
||||
placeholderSearchText: qsTr("Search Languages")
|
||||
menuAlignment: StatusListPicker.MenuAlignment.Center
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: currencyPicker
|
||||
inputList: Models.currencyPickerModel
|
||||
placeholderSearchText: qsTr("Search Currencies")
|
||||
multiSelection: true
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: currencyPicker2
|
||||
inputList: Models.currencyPickerModel2
|
||||
placeholderSearchText: qsTr("Search Currencies")
|
||||
multiSelection: true
|
||||
printSymbol: true
|
||||
enableSelectableItem: false
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: pageDesc
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
height: Theme.dp(100)
|
||||
width: Theme.dp(500)
|
||||
text: "4 different configurations for the `StatusListPicker` component:\n
|
||||
* Single selection. \n
|
||||
* Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
|
||||
* Multiple selection.\n
|
||||
* Multiple selection and displayed name is the symbol + shortName\n"
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: Theme.dp(15)
|
||||
}
|
||||
|
||||
// Outsite area
|
||||
MouseArea {
|
||||
height: root.height
|
||||
width: root.width
|
||||
onClicked: {
|
||||
languagePicker.close()
|
||||
languagePicker2.close()
|
||||
currencyPicker.close()
|
||||
currencyPicker2.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Platform 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: Theme.dp(8)
|
||||
|
||||
StatusMacNotification {
|
||||
name: "Some name"
|
||||
message: "Some message here"
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(5)
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: veryweakPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
|
||||
value: 0.75
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: weakPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Weak
|
||||
value: 0.5
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: sosoPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.SoSo
|
||||
value: 0.25
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: goodPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Good
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: greatPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Great
|
||||
value: 0.3
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Controls.Validators 0.1
|
||||
|
||||
Column {
|
||||
id: root
|
||||
spacing: Theme.dp(25)
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
|
||||
// PIN input that accepts only numbers
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Enter Keycard PIN"
|
||||
font.pixelSize: Theme.dp(30)
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
StatusPinInput {
|
||||
id: numbersPinInput
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
validator: StatusIntValidator{bottom: 0; top: 999999;}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.dangerColor1
|
||||
text: "Only numbers allowed"
|
||||
font.pixelSize: Theme.dp(16)
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Introduced PIN: " + numbersPinInput.pinInput
|
||||
font.pixelSize: Theme.dp(12)
|
||||
}
|
||||
|
||||
// PIN input that accepts input depending on the regular expression definition
|
||||
StatusBaseText {
|
||||
topPadding: Theme.dp(100)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Enter another Keycard PIN"
|
||||
font.pixelSize: Theme.dp(30)
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
StatusPinInput {
|
||||
id: regexPinInput
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
|
||||
circleDiameter: Theme.dp(22)
|
||||
circleSpacing: Theme.dp(22)
|
||||
pinLen: 7
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.dangerColor1
|
||||
text: "Only alphanumeric characters and '@' allowed"
|
||||
font.pixelSize: Theme.dp(16)
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Introduced PIN: " + regexPinInput.pinInput
|
||||
font.pixelSize: Theme.dp(12)
|
||||
}
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
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: Theme.dp(5)
|
||||
rowSpacing: Theme.dp(5)
|
||||
|
||||
StatusButton {
|
||||
text: "Simple"
|
||||
onClicked: simpleMenu.popup()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Complex"
|
||||
onClicked: complexMenu.popup()
|
||||
}
|
||||
|
||||
|
||||
StatusButton {
|
||||
text: "Menu with custom images and icons"
|
||||
onClicked: customMenu.popup()
|
||||
}
|
||||
|
||||
|
||||
StatusPopupMenu {
|
||||
id: simpleMenu
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Two"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
}
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
id: complexMenu
|
||||
subMenuItemIcons: [{ icon: 'info' }]
|
||||
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
iconSettings.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Two"
|
||||
iconSettings.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
iconSettings.name: "info"
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Four"
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
iconSettings.name: "info"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
iconSettings.name: "info"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
id: customMenu
|
||||
|
||||
subMenuItemIcons: [
|
||||
{ icon: "chat" },
|
||||
{
|
||||
source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
},
|
||||
{
|
||||
isLetterIdenticon: true,
|
||||
color: "red"
|
||||
}
|
||||
]
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Anywhere"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Chat"
|
||||
|
||||
StatusMenuItem {
|
||||
text: "vitalik.eth"
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Pascal"
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Cryptokitties"
|
||||
|
||||
StatusMenuItem {
|
||||
text: "welcome"
|
||||
iconSettings.name: "channel"
|
||||
iconSettings.color: Theme.palette.directColor1
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "support"
|
||||
iconSettings.name: "channel"
|
||||
iconSettings.color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
StatusMenuHeadline { text: "Public" }
|
||||
|
||||
StatusMenuItem {
|
||||
text: "news"
|
||||
iconSettings.name: "channel"
|
||||
iconSettings.color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Another community"
|
||||
|
||||
StatusMenuItem {
|
||||
text: "welcome"
|
||||
iconSettings.isLetterIdenticon: true
|
||||
iconSettings.background.color: "red"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user