Compare commits

..
Author SHA1 Message Date
B.Melnik 3a0e54928c wip 2021-07-09 10:41:03 +03:00
10365 changed files with 3209 additions and 50703 deletions
-17
View File
@@ -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)
-5
View File
@@ -12,8 +12,3 @@ Makefile
.qmake.stash
*_qml.cpp
*_qmlcache.qrc
sandbox/qmlcache_loader.cpp
doc/html
CMakeLists.txt.user
.vscode
build/
-664
View File
@@ -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))
-5
View File
@@ -1,5 +0,0 @@
cmake_minimum_required(VERSION 3.19)
project(StatusQ)
add_subdirectory(tests)
-1
View File
@@ -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: 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

-19
View File
@@ -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
*/
-43
View File
@@ -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
*/
-49
View File
@@ -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
*/
-23
View File
@@ -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
*/
-16
View File
@@ -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
*/
-15
View File
@@ -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
*/
-22
View File
@@ -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
*/
-36
View File
@@ -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\">&copy;</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
-41
View File
@@ -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;
}
+239
View File
@@ -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,25 +8,10 @@ import StatusQ.Controls 0.1
import Sandbox 0.1
GridLayout {
columns: 1
columns: 6
columnSpacing: 5
rowSpacing: 5
StatusSelectableText {
color: Theme.palette.baseColor1
text: "This is a multiline paragraph that can be selected and copied. A paragraph is a group of words put together to form a group that is usually longer than a sentence. Paragraphs are often made up of several sentences. There are usually between three and eight sentences. Paragraphs can begin with an indentation (about five spaces), or by missing a line out, and then starting again."
font.pixelSize: 15
width: 300
multiline: true
}
StatusSelectableText {
color: Theme.palette.baseColor1
text: "<p>This is a selectable link in rich text format to test <a href='www.google.com'>www.google.com</a></p>"
font.pixelSize: 15
width: 200
}
StatusIconTabButton {
icon.name: "chat"
}
@@ -130,36 +115,6 @@ GridLayout {
pinnedMessagesCount: 1
}
Item {
implicitWidth: 100
implicitHeight: 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: 100
}
}
Item {
implicitWidth: 100
implicitHeight: 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: 400
}
}
StatusChatInfoButton {
title: "group"
subTitle: "Group Chat"
@@ -189,18 +144,31 @@ GridLayout {
value: 40
}
StatusBanner {
id: banner
width: 360
topPadding: 20
type: StatusBanner.Type.Danger
statusText: "Banner"
StatusBaseInput {
placeholderText: "One line"
}
StatusProgressBar {
id: progressBar
text: "Weak"
value: 0.5
fillColor : Theme.palette.pinColor1
StatusBaseInput {
multiline: true
placeholderText: "Multiline"
}
StatusBaseInput {
multiline: true
placeholderText: "Multiline with static height"
implicitHeight: 100
}
Item {
implicitHeight: 300
implicitWidth: 300
StatusBaseInput {
anchors.centerIn: parent
multiline: true
placeholderText: "Multiline with max/min"
minimumHeight: 80
maximumHeight: 200
}
}
}
+769 -115
View File
@@ -7,64 +7,46 @@ import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Popups 0.1
import StatusQ.Platform 0.1
import "demoapp"
import "demoapp/data" 1.0
Rectangle {
id: demoApp
height: 602
width: 1002
width: 902
border.width: 1
border.color: Theme.palette.baseColor2
property string titleStyle: "osx"
Row {
anchors.top: demoApp.top
anchors.left: demoApp.left
anchors.topMargin: 14
anchors.leftMargin: 14
QtObject {
id: appSectionType
readonly property int chat: 0
readonly property int community: 1
readonly property int 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
}
spacing: 6
z: statusAppLayout.z + 1
function setActiveItem(sectionId) {
for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
let item = Models.demoAppSectionsModel.get(i)
if (item.sectionId !== sectionId)
{
Models.demoAppSectionsModel.setProperty(i, "active", false)
continue
}
Models.demoAppSectionsModel.setProperty(i, "active", true);
Rectangle {
color: "#E24640"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#FFC12F"
height: 12
width: 12
radius: 6
}
Rectangle {
color: "#2ACB42"
height: 12
width: 12
radius: 6
}
}
StatusMacTrafficLights {
anchors.left: parent.left
anchors.top: parent.top
anchors.margins: 13
z: statusAppLayout.z + 1
visible: titleStyle === "osx"
}
StatusWindowsTitleBar {
id: windowsTitle
anchors.top: parent.top
width: parent.width
z: statusAppLayout.z + 1
visible: titleStyle === "windows"
}
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
@@ -76,74 +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: 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.profileSettings)
{
appView.sourceComponent = statusAppProfileSettingsView
demoApp.setActiveItem(model.sectionId)
}
appView.sourceComponent = statusAppChatView
}
}
communityNavBarButton: StatusNavBarTabButton {
navBarCommunityTabButtons.model: ListModel {
ListElement {
name: "Status Community"
tooltipText: "Status Community"
}
}
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
id: communityBtn
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
name: model.name
tooltip.text: model.tooltipText
icon.color: Theme.palette.miscColor6
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
checked: appView.sourceComponent == statusAppCommunityView
onClicked: {
if(model.sectionType === appSectionType.community)
{
appView.sourceComponent = statusAppCommunityView
demoApp.setActiveItem(model.sectionId)
}
appView.sourceComponent = statusAppCommunityView
}
popupMenu: StatusPopupMenu {
@@ -174,7 +114,39 @@ Rectangle {
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 {
@@ -186,31 +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
}
}
}
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"
}
}
}
+295
View File
@@ -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"
}
]
}
}
}
+250
View File
@@ -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
}
}
+41
View File
@@ -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"
}
}
+174
View File
@@ -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!"
}
}
]
}
}
+72
View File
@@ -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"
}
}
}
}
-3
View File
@@ -7,8 +7,6 @@ Item {
id: themeSwitchWrapper
signal checkedChanged()
property alias lightThemeEnabled: switchControl.checked
width: themeSwitch.width
height: themeSwitch.height
@@ -28,7 +26,6 @@ Item {
}
StatusSwitch {
id: switchControl
onCheckedChanged: themeSwitchWrapper.checkedChanged()
StatusToolTip {
-318
View File
@@ -1,318 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Dialogs 1.3
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Column {
spacing: 10
Grid {
id: buttonGridWidth
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
}
// 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();
}
ColorDialog {
id: colorDialog
property bool colorSelected: false
onAccepted: {
colorSelected = true;
}
}
}
}
-443
View File
@@ -1,443 +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: 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"
})
}
}
QtObject {
id: appSectionType
readonly property int chat: 0
readonly property int community: 1
readonly property int wallet: 2
readonly property int browser: 3
readonly property int nodeManagement: 4
readonly property int profileSettings: 5
}
StatusAppNavBar {
sectionModel: ListModel {
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
}
regularNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
}
}
StatusAppNavBar {
communityTypeRole: "sectionType"
communityTypeValue: appSectionType.community
sectionModel: ListModel {
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
}
property bool communityAdded: false
filterRegularItem: function(item) {
if(item.sectionType === appSectionType.community)
if(communityAdded)
return false
else
communityAdded = true
return true
}
filterCommunityItem: function(item) {
return item.sectionType === appSectionType.community
}
regularNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
}
communityNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: qsTr("Invite People")
icon.name: "share-ios"
}
StatusMenuItem {
text: qsTr("View Community")
icon.name: "group"
}
StatusMenuItem {
text: qsTr("Edit Community")
icon.name: "edit"
enabled: false
}
StatusMenuSeparator {}
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 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: 2
}
communityNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: qsTr("Invite People")
icon.name: "share-ios"
}
StatusMenuItem {
text: qsTr("View Community")
icon.name: "group"
}
StatusMenuItem {
text: qsTr("Edit Community")
icon.name: "edit"
enabled: false
}
StatusMenuSeparator {}
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 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: false; notificationsCount: 0}
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
}
property bool communityAdded: false
filterRegularItem: function(item) {
if(item.sectionType === appSectionType.community)
if(communityAdded)
return false
else
communityAdded = true
return true
}
filterCommunityItem: function(item) {
return item.sectionType === appSectionType.community
}
regularNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
}
communityNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: qsTr("Invite People")
icon.name: "share-ios"
}
StatusMenuItem {
text: qsTr("View Community")
icon.name: "group"
}
StatusMenuItem {
text: qsTr("Edit Community")
icon.name: "edit"
enabled: false
}
StatusMenuSeparator {}
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 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: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
}
property bool communityAdded: false
filterRegularItem: function(item) {
if(item.sectionType === appSectionType.community)
if(communityAdded)
return false
else
communityAdded = true
return true
}
filterCommunityItem: function(item) {
return item.sectionType === appSectionType.community
}
regularNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
}
communityNavBarButton: StatusNavBarTabButton {
anchors.horizontalCenter: parent.horizontalCenter
name: model.icon.length > 0? "" : model.name
icon.name: model.icon
icon.source: model.image
tooltip.text: model.name
autoExclusive: true
checked: model.active
badge.value: model.notificationsCount
badge.visible: model.hasNotification
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
badge.border.width: 2
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: qsTr("Invite People")
icon.name: "share-ios"
}
StatusMenuItem {
text: qsTr("View Community")
icon.name: "group"
}
StatusMenuItem {
text: qsTr("Edit Community")
icon.name: "edit"
enabled: false
}
StatusMenuSeparator {}
StatusMenuItem {
text: qsTr("Leave Community")
icon.name: "arrow-right"
icon.width: 14
iconRotation: 180
type: StatusMenuItem.Type.Danger
}
}
}
}
}
}
-444
View File
@@ -1,444 +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: 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) 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: 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: 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: 24
radius: 6
closeButtonVisible: false
icon.emoji: "😁"
icon.emojiSize: Emoji.size.verySmall
icon.isLetterIdenticon: true
title: "helloworld.eth"
titleText.font.pixelSize: 12
titleText.color: Theme.palette.indirectColor1
}
}
StatusListItem {
title: "List Item with Emoji"
subTitle: "Emoji"
icon.emoji: "😁"
icon.color: "yellow"
icon.letterSize: 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"
chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
isMutualContact: true
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
isOnline: true
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"
isOnline: false
trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
}
StatusMemberListItem {
nickName: "very-long-annoying-nickname.eth"
isOnline: false
trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
}
StatusMemberListItem {
nickName: "This girl I know from work"
userName: "annabelle"
isOnline: true
}
StatusMemberListItem {
nickName: "Mark Cuban"
userName: "annabelle"
chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
isMutualContact: true
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
image.isIdenticon: true
}
}
-61
View File
@@ -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: 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"
}
}
Flow {
Layout.fillWidth: true
spacing: 4
Repeater {
model: 12
StatusLetterIdenticon {
name: "A"
color: Theme.palette.userCustomizationColors[index]
letterSize: 16
}
}
}
}
-408
View File
@@ -1,408 +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
Column {
spacing: 20
StatusButton {
text: "Simple modal"
onClicked: simpleModal.open()
}
StatusButton {
text: "Simple title modal"
onClicked: simpleTitleModal.open()
}
StatusButton {
text: "Modal with header image"
onClicked: headerImageModal.open()
}
StatusButton {
text: "Modal with footer buttons"
onClicked: footerButtonsModal.open()
}
StatusButton {
text: "Modal with header action button"
onClicked: headerActionButtonModal.open()
}
StatusButton {
text: "Modal with content"
onClicked: modalExample.open()
}
StatusButton {
text: "Modal with changable content"
onClicked: modalWithContentAccess.open()
}
StatusButton {
text: "Modal with letter identicon"
onClicked: modalWithLetterIdenticon.open()
}
StatusButton {
text: "Modal with identicon"
onClicked: modalWithIdenticon.open()
}
StatusButton {
text: "Modal with editable identicon"
onClicked: modalWithEditableIdenticon.open()
}
StatusButton {
text: "Modal with long titles"
onClicked: modalWithLongTitles.open()
}
StatusButton {
text: "Modal with Header Popup Menu"
onClicked: modalWithHeaderPopupMenu.open()
}
StatusButton {
text: "Spellchecking menu"
onClicked: spellMenu.open()
}
StatusButton {
text: "Modal with Editable Title"
onClicked: editTitleModal.open()
}
StatusButton {
text: "Modal with Advanced Header/Footer"
onClicked: advancedHeaderFooterModal.open()
}
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: 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
}
]
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "info"
}
}
StatusModal {
id: modalWithContentAccess
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
contentItem: StatusBaseText {
id: text
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithContentAccess.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithLetterIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.icon.isLetterIdenticon: true
header.icon.background.color: "red"
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Some text content"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Change text"
onClicked: {
modalWithLetterIdenticon.contentItem.text = "Changed!"
}
}
]
}
StatusModal {
id: modalWithIdenticon
anchors.centerIn: parent
header.title: "Header"
header.subTitle: "SubTitle"
header.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: 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: 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: 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: 200
advancedHeaderComponent: Rectangle {
width: parent.width
height: 50
color: Theme.palette.baseColor1
border.width: 1
StatusBaseText {
anchors.centerIn: parent
text: "Add any header here"
font.pixelSize: 15
color: Theme.palette.directColor1
}
}
advancedFooterComponent: Rectangle {
width: parent.width
height: 50
color: Theme.palette.baseColor1
border.width: 1
StatusBaseText {
anchors.centerIn: parent
text: "Add any footer here"
font.pixelSize: 15
color: Theme.palette.directColor1
}
}
}
ListModel {
id: dummyAccountsModel
ListElement{name: "Account 1"; iconName: "filled-account"}
ListElement{name: "Account 2"; iconName: "filled-account"}
}
StatusSpellcheckingMenuItems {
id: spellMenu
anchors.centerIn: parent
suggestions: ["suggestion1", "suggestion2", "suggestion3", "suggestion4"]
}
}
-104
View File
@@ -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: 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: 40
height: 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: 20
height: 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: 32
height: 32
icon.name: "reaction-b"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Add reaction"
},
StatusFlatRoundButton {
id: replyBtn
width: 32
height: 32
icon.name: "reply"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Reply"
},
StatusFlatRoundButton {
width: 32
height: 32
icon.name: "tiny/edit"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "Edit"
onClicked: {
delegate.editMode = !delegate.editMode
}
},
StatusFlatRoundButton {
id: otherBtn
width: 32
height: 32
icon.name: "more"
type: StatusFlatRoundButton.Type.Tertiary
tooltip.text: "More"
}
]
}
}
-99
View File
@@ -1,99 +0,0 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Page {
id: root
anchors.fill: parent
anchors.margins: 16
property ListModel contactsModel: null
background: null
header: RowLayout {
id: headerRow
width: parent.width
height: tagSelector.height
anchors.right: parent.right
anchors.rightMargin: 8
StatusTagSelector {
id: tagSelector
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.leftMargin: 17
maxHeight: root.height
toLabelText: qsTr("To: ")
warningText: qsTr("USER LIMIT REACHED")
listLabel: qsTr("Contacts")
ringSpecModelGetter: function(pubKey) {
//for simulation purposes only, in real app
//this would be Utils.getColorHashAsJson(pubKey)
var index = -1;
if (!!contactsModel) {
for (var i = 0; i < contactsModel.count; i++) {
if (contactsModel.get(i).publicId === 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, '');
}
onTextChanged: {
sortModel(root.contactsModel);
}
Component.onCompleted: {
textEdit.forceActiveFocus();
sortModel(root.contactsModel);
}
}
StatusButton {
implicitHeight: 44
Layout.alignment: Qt.AlignTop
enabled: (tagSelector.namesModel.count > 0)
text: "Confirm"
}
}
contentItem: Item {
anchors.fill: parent
anchors.topMargin: 68
StatusBaseText {
visible: (contactsModel.count === 0)
anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: 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: 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
}
}
}
@@ -1,40 +0,0 @@
import QtQuick 2.12
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Popups 0.1
import StatusQ.Core.Theme 0.1
StatusModal {
id: root
header.title: "Contact Requests"
headerActionButton: StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
width: 32
height: 32
icon.width: 20
icon.height: 20
icon.name: "notification"
}
contentItem: StatusBaseText {
anchors.centerIn: parent
text: "Contact request will be shown here"
font.pixelSize: 15
color: Theme.palette.directColor1
}
rightButtons: [
StatusButton {
text: "Decline all"
type: StatusBaseButton.Type.Danger
onClicked: root.close()
},
StatusButton {
text: "Accept all"
onClicked: root.close()
}
]
}
-191
View File
@@ -1,191 +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: 16
anchors.horizontalCenter: parent.horizontalCenter
text: "Chat"
}
RowLayout {
id: searchInputWrapper
width: 288
height: searchInput.height
anchors.top: headline.bottom
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
StatusBaseInput {
id: searchInput
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
implicitHeight: 36
topPadding: 8
bottomPadding: 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: 16
anchors.horizontalCenter: parent.horizontalCenter
spacing: 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 {
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
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: 14
iconRotation: 180
type: StatusMenuItem.Type.Danger
}
}
}
}
}
-273
View File
@@ -1,273 +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: 8
anchors.bottom: parent.bottom
width: leftPanel.width
contentHeight: communityCategories.height
clip: true
StatusChatListAndCategories {
id: communityCategories
width: leftPanel.width
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
draggableItems: true
draggableCategories: false
model: Models.demoCommunityChatListItems
showCategoryActionButtons: true
categoryPopupMenu: StatusPopupMenu {
property string categoryId
openHandler: function (id) {
categoryId = id
}
StatusMenuItem {
text: "Mute Category"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Edit Category"
icon.name: "edit"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete Category"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
chatListPopupMenu: StatusPopupMenu {
property string chatId
StatusMenuItem {
text: "Mute chat"
icon.name: "notification"
}
StatusMenuItem {
text: "Mark as Read"
icon.name: "checkmark-circle"
}
StatusMenuItem {
text: "Clear history"
icon.name: "close-circle"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Delete chat"
icon.name: "delete"
type: StatusMenuItem.Type.Danger
}
}
popupMenu: StatusPopupMenu {
StatusMenuItem {
text: "Create channel"
icon.name: "channel"
}
StatusMenuItem {
text: "Create category"
icon.name: "channel-category"
}
StatusMenuSeparator {}
StatusMenuItem {
text: "Invite people"
icon.name: "share-ios"
}
}
}
}
}
centerPanel: Item {
StatusChatToolBar {
id: 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
onSearchButtonClicked: {
searchButton.highlighted = !searchButton.highlighted;
searchPopup.setSearchSelection(communityDetailModalTitle,
"",
communityDetailModalImage);
searchPopup.open();
}
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
onMembersButtonClicked: {
root.showRightPanel = !root.showRightPanel;
}
}
StatusSearchPopup {
id: searchPopup
searchOptionsPopupMenu: searchPopupMenu
onAboutToHide: {
if (searchPopupMenu.visible) {
searchPopupMenu.close();
}
//clear menu
for (var i = 2; i < searchPopupMenu.count; i++) {
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
}
}
onClosed: {
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 > 50) ? 1.0 : 0.0
visible: (opacity > 0.1)
font.pixelSize: 15
text: qsTr("Members")
}
ListView {
anchors.top: titleText.bottom
anchors.topMargin: 16
anchors.left: parent.left
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: 8
anchors.bottom: parent.bottom
anchors.bottomMargin: 16
boundsBehavior: Flickable.StopAtBounds
model: Models.membersListModel
delegate: StatusMemberListItem {
implicitWidth: parent.width
nickName: model.nickName
userName: model.name
chatKey: model.publicId
trustIndicator: model.trustIndicator
isMutualContact: model.isMutualContact
image.source: model.icon
image.isIdenticon: model.isIdenticon
isOnline: model.onlineStatus
ringSettings.ringSpecModel: model.ringSpecModel
}
}
}
}
@@ -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: 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: 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: 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
View File
@@ -1 +0,0 @@
singleton Models 1.0 Models.qml
-5
View File
@@ -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();
+113 -282
View File
@@ -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
@@ -14,12 +12,10 @@ import StatusQ.Components 0.1
import StatusQ.Layout 0.1
import StatusQ.Platform 0.1
import "demoapp/data" 1.0
StatusWindow {
id: rootWindow
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
: 1224
: 1024
height: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.height
:840
visible: true
@@ -33,30 +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);
}
rootWindow.updatePosition();
}
StatusAppLayout {
@@ -66,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: 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 {
@@ -109,10 +87,12 @@ StatusWindow {
anchors.topMargin: 32
anchors.right: parent.right
anchors.rightMargin: 32
lightThemeEnabled: storeSettings.lightTheme
onLightThemeEnabledChanged: {
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
storeSettings.lightTheme = lightThemeEnabled
onCheckedChanged: {
if (Theme.palette === rootWindow.lightTheme) {
Theme.palette = rootWindow.darkTheme
} else {
Theme.palette = rootWindow.lightTheme
}
}
}
}
@@ -121,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
@@ -150,167 +120,56 @@ StatusWindow {
StatusListSectionHeadline { text: "StatusQ.Core" }
StatusNavigationListItem {
title: "Icons"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
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));
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);
title: "Buttons"
selected: page.sourceComponent == buttonsComponent
onClicked: page.sourceComponent = buttonsComponent
}
StatusNavigationListItem {
title: "StatusSwitchTab"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page("StatusTabSwitch");
}
StatusNavigationListItem {
title: "StatusChatCommandButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "Controls"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.control(title);
}
StatusNavigationListItem {
title: "StatusTabBarButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusTabBarIconButton"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "StatusInput"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
}
StatusNavigationListItem {
title: "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 {
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 {
title: "StatusChatInfoToolBar"
selected: viewLoader.source.toString().includes(title)
onClicked: mainPageView.page(title);
selected: page.sourceComponent == chatInfoToolBarComponent
onClicked: page.sourceComponent = chatInfoToolBarComponent
}
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);
selected: page.sourceComponent == othersComponent
onClicked: page.sourceComponent = othersComponent
}
StatusListSectionHeadline { text: "StatusQ.Popup" }
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);
selected: page.sourceComponent == statusModalComponent
onClicked: page.sourceComponent = statusModalComponent
}
}
}
@@ -321,43 +180,27 @@ StatusWindow {
anchors.fill: parent
ScrollView {
visible: !storeSettings.fillPage
anchors.fill: parent
anchors.topMargin: 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: 64
visible: storeSettings.fillPage
clip: true
source: viewLoader.source
}
}
}
}
@@ -385,45 +228,61 @@ 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: 20
spacing: 2
Text {
text: "OSX"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusSwitch {
onCheckedChanged: {
if (checked) {
demoApp.titleStyle = "windows"
} else {
demoApp.titleStyle = "osx"
}
}
}
Text {
text: "Win"
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
}
DemoApp {
id: demoApp
anchors.centerIn: parent
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
DropShadow {
anchors.fill: demoApp
@@ -442,8 +301,6 @@ StatusWindow {
anchors.top: parent.top
anchors.margins: 13
visible: Qt.platform.os == "osx"
onClose: {
rootWindow.close()
}
@@ -456,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
Column {
spacing: 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: []
}
}
}
}
-25
View File
@@ -1,25 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Components 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
}
Item {
width: 200
height: childrenRect.height
StatusAddress {
text: "0x9ce0056c5fc6bb9459a4dcfa35eaad8c1fee5ce9"
expandable: true
width: parent.width
}
}
}
-40
View File
@@ -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: 800
height: 100
Row {
id: selectedColor
anchors.top: parent.top
anchors.left: colorSelectionGrid.left
spacing: 10
StatusBaseText {
text: "SelectedColor is"
}
Rectangle {
width: 100
height: 20
radius: width/2
color: colorSelectionGrid.selectedColor
}
}
StatusColorSelectorGrid {
id: colorSelectionGrid
anchors.top: selectedColor.bottom
anchors.topMargin: 10
anchors.horizontalCenter: parent.horizontalCenter
titleText: "COLOR"
selectedColorIndex: 2
}
}
-17
View File
@@ -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: 8
StatusColorSelector {
model: ["red", "blue", "green"]
}
}
@@ -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: 12
width: 800
anchors.top:parent.top
leftPadding: 20
rightPadding: 20
Rectangle {
width: parent.width
height: 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: 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: 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: 654
height: infoText.implicitHeight
color: Theme.palette.baseColor5
StatusBaseText {
id: infoText
anchors.centerIn: parent
color: Theme.palette.directColor4
font.pixelSize: 15
lineHeight: 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
}
}
}
-215
View File
@@ -1,215 +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: 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: 480
implicitHeight: 82
z: 100000
StatusSeedPhraseInput {
id: statusSeedInput
anchors.left: parent.left
anchors.right: parent.right
height: parent.height
textEdit.input.anchors.leftMargin: 16
textEdit.input.anchors.rightMargin: 16
textEdit.input.anchors.topMargin: 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: 15
input.icon.height: 11
input.icon.name: text !== "" ? "checkmark" : ""
input.leftIcon: false
}
StatusInput {
label: "Label"
secondaryLabel: "secondary label"
input.placeholderText: "Placeholder"
input.implicitHeight: 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: 16
color: Theme.palette.dangerColor1
}
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline"
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with static height"
input.implicitHeight: 100
}
StatusInput {
input.multiline: true
input.placeholderText: "Multiline with max/min"
input.minimumHeight: 80
input.maximumHeight: 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 {
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
}
}
-81
View File
@@ -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: 150
GridLayout {
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
rows: 4
columns: 2
rowSpacing: 170
columnSpacing: 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: 100
width: 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: 15
}
// Outsite area
MouseArea {
height: root.height
width: root.width
onClicked: {
languagePicker.close()
languagePicker2.close()
currencyPicker.close()
currencyPicker2.close()
}
}
}
@@ -1,16 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14
import StatusQ.Platform 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusMacNotification {
name: "Some name"
message: "Some message here"
}
}
@@ -1,38 +0,0 @@
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 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
}
}
-75
View File
@@ -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: 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: 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: 16
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Introduced PIN: " + numbersPinInput.pinInput
font.pixelSize: 12
}
// PIN input that accepts input depending on the regular expression definition
StatusBaseText {
topPadding: 100
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Enter another Keycard PIN"
font.pixelSize: 30
font.bold: true
}
StatusPinInput {
id: regexPinInput
anchors.horizontalCenter: parent.horizontalCenter
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
circleDiameter: 22
circleSpacing: 22
pinLen: 7
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.dangerColor1
text: "Only alphanumeric characters and '@' allowed"
font.pixelSize: 16
}
StatusBaseText {
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Introduced PIN: " + regexPinInput.pinInput
font.pixelSize: 12
}
}
-150
View File
@@ -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: 5
rowSpacing: 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"
}
}
}
}
-54
View File
@@ -1,54 +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
StatusSelect {
id: select
label: "Some label"
model: ListModel {
ListElement {
name: "Pascal"
}
ListElement {
name: "Khushboo"
}
ListElement {
name: "Alexandra"
}
ListElement {
name: "Eric"
}
}
selectMenu.delegate: StatusMenuItemDelegate {
statusPopupMenu: select
action: StatusMenuItem {
iconSettings.name: "filled-account"
text: name
onTriggered: {
selectedItem.text = name
}
}
}
selectedItemComponent: Item {
id: selectedItem
anchors.fill: parent
property string text: ""
StatusBaseText {
text: selectedItem.text
anchors.centerIn: parent
color: Theme.palette.directColor1
}
}
}
}
-27
View File
@@ -1,27 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import Sandbox 0.1
Column {
spacing: 8
StatusTabBar {
StatusTabButton {
width: implicitWidth
text: "Button 1"
}
StatusTabButton {
width: implicitWidth
text: "Button 2"
}
StatusTabButton {
width: implicitWidth
text: "Button 3"
badge.value: 42
}
}
}
@@ -1,50 +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
Row {
StatusTabBarIconButton {
icon.name: "smileys-and-people"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "animals-and-nature"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "activity"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "travel-and-places"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "objects"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "symbols"
onClicked: highlighted = !highlighted
}
StatusTabBarIconButton {
icon.name: "flags"
onClicked: highlighted = !highlighted
}
}
}
-24
View File
@@ -1,24 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import QtQuick.Controls 2.13
import StatusQ.Controls 0.1
GridLayout {
columns: 1
columnSpacing: 5
rowSpacing: 5
StatusSwitchTabBar {
StatusSwitchTabButton {
text: "Swap"
}
StatusSwitchTabButton {
text: "Swap & Send"
}
StatusSwitchTabButton {
text: "Send"
}
}
}
-56
View File
@@ -1,56 +0,0 @@
import QtQuick 2.14
import StatusQ.Components 0.1
Item {
id: root
anchors.fill: parent
property ListModel asortedContacts: ListModel {
ListElement {
publicId: "0x0"
name: "Maria"
icon: ""
isIdenticon: false
onlineStatus: 3
}
ListElement {
publicId: "0x1"
name: "James"
icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
isIdenticon: false
onlineStatus: 1
}
ListElement {
publicId: "0x2"
name: "Paul"
icon: ""
isIdenticon: false
onlineStatus: 2
}
ListElement {
publicId: "0x3"
name: "Tracy"
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
isIdenticon: true
onlineStatus: 3
}
ListElement {
publicId: "0x4"
name: "Nick"
icon: ""
isIdenticon: false
onlineStatus: 3
}
}
StatusTagSelector {
id: tagSelector
width: 650
height: 44
anchors.centerIn: parent
namesModel: root.asortedContacts
toLabelText: qsTr("To: ")
warningText: qsTr("USER LIMIT REACHED")
}
}
-41
View File
@@ -1,41 +0,0 @@
import QtQuick 2.14
import StatusQ.Components 0.1
Item {
id: root
anchors.fill: parent
Column {
id: toastArea
anchors.centerIn: parent
spacing: 8
Repeater {
id: toastRepeater
width: parent.width
height: childrenRect.height
model: [
{"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":"", "duration":0},
{"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
{"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
{"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
{"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
]
delegate: StatusToastMessage {
primaryText: modelData.title
secondaryText: modelData.subTitle
icon.name: modelData.icon
loading: modelData.loading
type: modelData.type
linkUrl: modelData.url
duration: modelData.duration
onLinkActivated: {
Qt.openUrlExternally(link);
}
onClose: {
console.warn("toast closed: ", modelData.title)
}
}
}
}
}
@@ -1,38 +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
Row {
spacing: 4
StatusWalletColorButton {
icon.color: Theme.palette.miscColor1
selected: true
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor2
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor3
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor4
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor5
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor6
}
StatusWalletColorButton {
icon.color: Theme.palette.miscColor7
}
}
}
@@ -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: 8
StatusWalletColorSelect {
model: Theme.palette.userCustomizationColors
}
}
-100
View File
@@ -1,100 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Components 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
width: 800
height: 100
//Simulate animation between steps
property bool stepsCompleted: false
function reset() {
for (var i = 0; i < stepsListModel.count; i++) {
stepsListModel.setProperty(i, "loading", false);
stepsListModel.setProperty(i, "stepCompleted", false);
step1.loadingTime = 0;
step2.loadingTime = 0;
root.stepsCompleted = false;
}
}
ListModel {
id: stepsListModel
ListElement {description:"Send Request"; loadingTime: 0; stepCompleted: false}
ListElement {description:"Receive Response"; loadingTime: 0; stepCompleted: false}
ListElement {description:"Confirm Identity"; loadingTime: 0; stepCompleted: false}
}
Shortcut {
sequence: "Ctrl+R"
onActivated: {
if (!root.stepsCompleted) {
animate.running = true;
} else {
root.reset();
}
}
}
StatusBaseText {
id: indicLabel
anchors.horizontalCenter: parent.horizontalCenter
color: Theme.palette.directColor1
text: "Press Ctrl+R to run the animation"
font.pixelSize: 17
}
SequentialAnimation {
id: animate
ScriptAction {
id: step1
property int loadingTime: 0
Behavior on loadingTime { NumberAnimation { duration: 2000 }}
onLoadingTimeChanged: {
stepsListModel.setProperty(1, "loadingTime", step1.loadingTime);
}
script: {
step1.loadingTime = 2000;
stepsListModel.setProperty(0, "loadingTime", step1.loadingTime);
stepsListModel.setProperty(0, "stepCompleted", true);
}
}
PauseAnimation {
duration: 2100
}
ScriptAction {
id: step2
property int loadingTime: 0
Behavior on loadingTime { NumberAnimation { duration: 2000 } }
onLoadingTimeChanged: {
stepsListModel.setProperty(2, "loadingTime", step2.loadingTime);
}
script: {
step2.loadingTime = 2000;
stepsListModel.setProperty(1, "stepCompleted", true);
}
}
PauseAnimation {
duration: 2100
}
ScriptAction {
script: {
stepsListModel.setProperty(2, "stepCompleted", true);
root.stepsCompleted = true;
}
}
}
//simulation code
StatusWizardStepper {
id: wizardStepper
width: (parent.width - 50)
anchors.top: indicLabel.bottom
anchors.topMargin: 16
anchors.horizontalCenter: parent.horizontalCenter
stepsModel: stepsListModel
}
}
+9 -40
View File
@@ -1,47 +1,16 @@
<RCC>
<qresource prefix="/">
<file>main.qml</file>
<file>pages/StatusAccountSelectorPage.qml</file>
<file>pages/StatusAddressPage.qml</file>
<file>pages/StatusAssetSelectorPage.qml</file>
<file>pages/StatusChatCommandButtonPage.qml</file>
<file>pages/StatusChatInfoToolBarPage.qml</file>
<file>pages/StatusColorSelectorPage.qml</file>
<file>pages/StatusExpandableSettingsItemPage.qml</file>
<file>pages/StatusInputPage.qml</file>
<file>pages/StatusMacNotificationPage.qml</file>
<file>pages/StatusPopupMenuPage.qml</file>
<file>pages/StatusSelectPage.qml</file>
<file>pages/StatusTabBarIconButtonPage.qml</file>
<file>pages/StatusTabSwitchPage.qml</file>
<file>pages/StatusWalletColorButtonPage.qml</file>
<file>pages/StatusWalletColorSelectPage.qml</file>
<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
<file>controls/Buttons.qml</file>
<file>controls/Controls.qml</file>
<file>controls/Icons.qml</file>
<file>controls/Layout.qml</file>
<file>controls/ListItems.qml</file>
<file>controls/Others.qml</file>
<file>controls/Popups.qml</file>
<file>demoapp/ChatChannelView.qml</file>
<file>demoapp/CreateChatView.qml</file>
<file>demoapp/DemoCommunityDetailModal.qml</file>
<file>demoapp/DemoContactRequestsModal.qml</file>
<file>demoapp/StatusAppChatView.qml</file>
<file>demoapp/StatusAppCommunityView.qml</file>
<file>demoapp/StatusAppProfileSettingsView.qml</file>
<file>demoapp/data/Models.qml</file>
<file>demoapp/data/qmldir</file>
<file>demoapp/data/logo-test-image.png</file>
<file>Controls.qml</file>
<file>Icons.qml</file>
<file>Others.qml</file>
<file>Buttons.qml</file>
<file>DemoApp.qml</file>
<file>ListItems.qml</file>
<file>StatusChatInfoToolBarPage.qml</file>
<file>StatusPopupMenuPage.qml</file>
<file>ThemeSwitch.qml</file>
<file>pages/StatusColorSelectorGridPage.qml</file>
<file>pages/StatusListPickerPage.qml</file>
<file>pages/StatusPinInputPage.qml</file>
<file>pages/StatusTagSelectorPage.qml</file>
<file>pages/StatusToastMessagePage.qml</file>
<file>pages/StatusWizardStepperPage.qml</file>
<file>pages/StatusTabBarButtonPage.qml</file>
<file>Layout.qml</file>
<file>Popups.qml</file>
</qresource>
</RCC>
+14 -29
View File
@@ -1,8 +1,6 @@
QT += quick svg
CONFIG += c++11 warn_on qtquickcompiler
QML_IMPORT_PATH= $$PWD/../src
CONFIG += c++11 warn_on
DEFINES += QT_DEPRECATED_WARNINGS
@@ -14,39 +12,18 @@ DEFINES += QT_DEPRECATED_WARNINGS
SOURCES += \
handler.cpp \
main.cpp \
sandboxapp.cpp \
spellchecker.cpp \
sandboxapp.cpp
!macx {
SOURCES += statuswindow.cpp
}
TARGET = sandboxapp
DESTDIR = $$PWD/bin
DESTDIR = $$PWD/bin
macx {
CONFIG -= app_bundle
OBJECTIVE_SOURCES += \
statuswindow_mac.mm
hunspellTarget.depends = FORCE
hunspellTarget.commands = brew install hunspell
QMAKE_EXTRA_TARGETS += hunspellTarget
exists (/usr/local/lib/libhunspell-1.7.a) {
LIBS += -L"/usr/local/lib" -lhunspell-1.7
INCLUDEPATH += /usr/local/include/hunspell
DEFINES += USE_HUNSPELL
message("hunspell exists in /usr/local/lib")
}
copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
first.depends = $(first) copydata
export(first.depends)
export(copydata.commands)
QMAKE_EXTRA_TARGETS += first copydata
}
ios {
@@ -63,6 +40,8 @@ ios {
RESOURCES += qml.qrc \
$$PWD/../statusq.qrc
DESTDIR = $$PWD/bin
# Default rules for deployment.
qnx: target.path = /tmp/$${TARGET}/bin
else: unix:!android: target.path = /opt/$${TARGET}/bin
@@ -72,11 +51,17 @@ else: unix:!android: target.path = /opt/$${TARGET}/bin
HEADERS += \
handler.h \
sandboxapp.h \
statuswindow.h \
spellchecker.h
statuswindow.h
OTHER_FILES += $$files($$PWD/../*.qml, true)
OTHER_FILES += $$files($$PWD/*.qml, true)
DISTFILES += \
../src/StatusQ/Components/StatusMacWindowButtons.qml \
../src/StatusQ/Controls/StatusBaseButton.qml \
../src/StatusQ/Controls/StatusButton.qml \
../src/StatusQ/Controls/StatusCheckBox.qml \
../src/StatusQ/Controls/StatusFlatRoundButton.qml \
../src/StatusQ/Controls/StatusRadioButton.qml \
../src/StatusQ/Controls/StatusSlider.qml \
../src/StatusQ/Controls/StatusSwitch.qml
android {
+1 -3
View File
@@ -5,7 +5,6 @@
#include <QDebug>
#include "statuswindow.h"
#include "spellchecker.h"
SandboxApp::SandboxApp(int &argc, char **argv)
: QGuiApplication(argc, argv),
@@ -17,10 +16,9 @@ SandboxApp::SandboxApp(int &argc, char **argv)
void SandboxApp::startEngine()
{
qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
#ifdef QT_DEBUG
const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
const QUrl url(applicationDirPath() + "/../main.qml");
#else
const QUrl url(QStringLiteral("qrc:/main.qml"));
#endif
+3 -9
View File
@@ -1,10 +1,4 @@
#!/bin/bash
make clean
if [[ $OSTYPE == 'darwin'* ]]
then
qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
else
qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
fi
make
qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
make
+78 -67
View File
@@ -1,8 +1,6 @@
#include "spellchecker.h"
#ifdef USE_HUNSPELL
#include "hunspell.hxx"
#endif
#include <QTextCodec>
#include <QFile>
#include <QDebug>
@@ -13,53 +11,18 @@
#include <QDir>
SpellChecker::SpellChecker(QObject *parent)
: QObject(parent)
, m_userDict("userDict_")
#ifdef USE_HUNSPELL
, m_hunspell(nullptr)
#endif
: QSyntaxHighlighter(parent)
{
auto language = QLocale::system().bcp47Name();
}
SpellChecker::~SpellChecker()
{
#ifdef USE_HUNSPELL
delete m_hunspell;
#endif
}
bool SpellChecker::spell(const QString &word)
{
#ifdef USE_HUNSPELL
return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
#else
return true;
#endif
}
bool SpellChecker::isInit() const
{
#ifdef USE_HUNSPELL
return !m_hunspell;
#endif
return false;
}
void SpellChecker::initHunspell()
{
#ifdef USE_HUNSPELL
if (m_hunspell) {
delete m_hunspell;
}
QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang + "/index.dic";
QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang + "/index.aff";
QString dictFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language + "/index.dic";
QString affixFile = QDir::homePath() + "/Status/StatusQ/sandbox/dictionaries/" + language + "/index.aff";
QByteArray dictFilePathBA = dictFile.toLocal8Bit();
QByteArray affixFilePathBA = affixFile.toLocal8Bit();
m_hunspell = new Hunspell(affixFilePathBA.constData(),
dictFilePathBA.constData());
qDebug() << "TEST" << dictFile;
// detect encoding analyzing the SET option in the affix file
auto encoding = QStringLiteral("ISO8859-15");
QFile _affixFile(affixFile);
@@ -84,7 +47,7 @@ void SpellChecker::initHunspell()
}
m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());
QString userDict = m_userDict + m_lang + ".txt";
QString userDict = "userDict_" + language + ".txt";
if (!userDict.isEmpty()) {
QFile userDictonaryFile(userDict);
@@ -102,14 +65,22 @@ void SpellChecker::initHunspell()
} else {
qDebug() << "User dictionary not set.";
}
#endif
}
SpellChecker::~SpellChecker()
{
delete m_hunspell;
}
bool SpellChecker::spell(const QString &word)
{
return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
}
QVariantList SpellChecker::suggest(const QString &word)
{
int numSuggestions = 0;
QVariantList suggestions;
#ifdef USE_HUNSPELL
std::vector<std::string> wordlist;
wordlist = m_hunspell->suggest(m_codec->fromUnicode(word).toStdString());
@@ -121,22 +92,20 @@ QVariantList SpellChecker::suggest(const QString &word)
QByteArray::fromStdString(wordlist[i]));
}
}
#endif
return suggestions;
}
void SpellChecker::ignoreWord(const QString &word)
{
#ifdef USE_HUNSPELL
m_hunspell->add(m_codec->fromUnicode(word).constData());
#endif
}
void SpellChecker::addToUserWordlist(const QString &word)
{
#ifdef USE_HUNSPELL
QString userDict = m_userDict + m_lang + ".txt";
auto language = QLocale::scriptToString(QLocale::system().script());
QString userDict = "userDict_" + language + ".txt";
if (!userDict.isEmpty()) {
QFile userDictonaryFile(userDict);
if (userDictonaryFile.open(QIODevice::Append)) {
@@ -150,32 +119,74 @@ void SpellChecker::addToUserWordlist(const QString &word)
} else {
qDebug() << "User dictionary not set.";
}
#endif
}
const QString& SpellChecker::lang() const
void SpellChecker::setText(const QString &text)
{
return m_lang;
}
void SpellChecker::setLang(const QString& lang)
{
if (m_lang != lang) {
m_lang = lang;
initHunspell();
emit langChanged();
if (m_text != text) {
m_text = text;
emit textChanged();
makeDisplayText(m_text);
}
}
const QString& SpellChecker::userDict() const
const QString &SpellChecker::text() const
{
return m_userDict;
return m_text;
}
void SpellChecker::setUserDict(const QString& userDict)
const QString &SpellChecker::displayText() const
{
if (m_userDict != userDict) {
m_userDict = userDict;
emit userDictChanged();
return m_displayText;
}
QQuickTextDocument *SpellChecker::textDocument() const
{
return m_document;
}
void SpellChecker::setTextDocument(QQuickTextDocument *document)
{
if (m_document != document) {
m_document = document;
setDocument(m_document->textDocument());
emit textDocumentChanged();
}
}
void SpellChecker::highlightBlock(const QString &text)
{
QTextCharFormat format;
format.setUnderlineColor(Qt::red);
format.setFontUnderline(true);
// format.setUnderlineStyle(QTextCharFormat::DotLine);
format.merge(currentBlock().charFormat());
QRegularExpression expression("\\S+");
QRegularExpressionMatchIterator i = expression.globalMatch(text);
while(i.hasNext()) {
QRegularExpressionMatch match = i.next();
if (!spell(match.captured())) {
setFormat(match.capturedStart(), match.capturedLength(), format);
}
}
}
void SpellChecker::makeDisplayText(const QString &text)
{
auto words = text.split(" ");
QString gPattern = "<u style=\"color: red;\">%1</u>";
m_displayText = ""; // todo optimize delta
for (const auto& word: qAsConst(words)) {
if (!spell(word)) {
m_displayText.append(" " + gPattern.arg(word));
} else {
m_displayText.append(" " + word);
}
}
emit displayTextChanged();
}
+21 -18
View File
@@ -6,17 +6,15 @@
#include <QQuickTextDocument>
#include <QSyntaxHighlighter>
#ifdef USE_HUNSPELL
class Hunspell;
#endif
class QTextCodec;
class SpellChecker : public QObject
class SpellChecker : public QSyntaxHighlighter
{
Q_OBJECT
Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
Q_PROPERTY(QString text READ text WRITE setText NOTIFY textChanged)
Q_PROPERTY(QString displayText READ displayText NOTIFY displayTextChanged)
Q_PROPERTY(QQuickTextDocument* document READ textDocument WRITE setTextDocument NOTIFY textDocumentChanged)
public:
explicit SpellChecker(QObject *parent = nullptr);
~SpellChecker();
@@ -25,29 +23,34 @@ public:
Q_INVOKABLE QVariantList suggest(const QString &word);
Q_INVOKABLE void ignoreWord(const QString &word);
Q_INVOKABLE void addToUserWordlist(const QString &word);
Q_INVOKABLE bool isInit() const;
const QString& lang() const;
void setLang(const QString& lang);
void setText(const QString& text);
const QString& text() const;
const QString& userDict() const;
void setUserDict(const QString& userDict);
const QString& displayText() const;
QQuickTextDocument* textDocument() const;
void setTextDocument(QQuickTextDocument* document);
signals:
void langChanged();
void userDictChanged();
void textChanged();
void displayTextChanged();
void textDocumentChanged();
protected:
void highlightBlock(const QString &text) final;
private:
void initHunspell();
void makeDisplayText(const QString& text);
private:
QString m_lang;
QString m_userDict;
QString m_text;
QString m_displayText;
QString m_dictionaryPath;
QQuickTextDocument *m_document;
#ifdef USE_HUNSPELL
Hunspell *m_hunspell;
#endif
QTextCodec *m_codec;
};
-39
View File
@@ -1,39 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
StatusBaseText {
id: root
property bool expandable: false
property bool expanded: false
readonly property real actualWidth: implicitWidth
property real maxWidth: width
font.family: Theme.palette.monoFont.name
font.pixelSize: 13
elide: Text.ElideMiddle
color: Theme.palette.baseColor1
Component.onCompleted: {
maxWidth = width
expanded = actualWidth <= maxWidth
}
MouseArea {
anchors.fill: parent
cursorShape: root.expandable ? Qt.PointingHandCursor : Qt.arrowCursor
enabled: root.expandable
onClicked: {
if (root.expanded) {
width = root.width = root.maxWidth
} else {
width = root.width = root.actualWidth
}
root.expanded = !root.expanded
}
}
}
+1 -1
View File
@@ -32,7 +32,7 @@ Rectangle {
anchors.centerIn: parent
text: {
if (statusBadge.value > 99) {
return qsTr("99+");
return "99+";
}
return statusBadge.value;
}
@@ -11,7 +11,6 @@ Item {
implicitHeight: 56
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: statusMenuButton
property Component popupMenu
signal chatInfoButtonClicked()
@@ -27,19 +26,19 @@ Item {
id: statusChatInfoButton
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
anchors.rightMargin: 5
anchors.leftMargin: 5
type: StatusChatInfoButton.Type.OneToOneChat
onClicked: statusChatInfoToolBar.chatInfoButtonClicked()
}
StatusRoundButton {
id: statusMenuButton
id: menuButton
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
visible: popupMenuSlot.active
width: visible ? 32 : 0
width: 32
height: 32
type: StatusRoundButton.Type.Secondary
@@ -50,14 +49,14 @@ Item {
State {
name: "default"
PropertyChanges {
target: statusMenuButton
target: menuButton
icon.rotation: 0
}
},
State {
name: "pressed"
PropertyChanges {
target: statusMenuButton
target: menuButton
icon.rotation: 45
highlighted: true
}
@@ -88,8 +87,8 @@ Item {
onClicked: {
statusChatInfoToolBar.addButtonClicked(mouse)
statusMenuButton.state = "pressed"
popupMenuSlot.item.popup(statusMenuButton.width-popupMenuSlot.item.width, statusMenuButton.height + 4)
menuButton.state = "pressed"
popupMenuSlot.item.popup(menuButton.width-popupMenuSlot.item.width, menuButton.height + 4)
}
Loader {
@@ -97,9 +96,10 @@ Item {
active: !!statusChatInfoToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
statusMenuButton.state = "default"
menuButton.state = "default"
}
}
}
}
}
+61 -178
View File
@@ -1,10 +1,7 @@
import QtQuick 2.13
import QtQml.Models 2.14
import QtQuick.Controls 2.13 as QC
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
@@ -15,19 +12,17 @@ Column {
width: 288
property string categoryId: ""
property var model: null
property bool draggableItems: false
property bool highlightItem: true
property alias statusChatListItems: statusChatListItems
property string selectedChatId: ""
property alias chatListItems: statusChatListItems
property Component popupMenu
property var filterFn
property var profileImageFn
property var chatNameFn
signal chatItemSelected(string categoryId, string id)
signal chatItemSelected(string id)
signal chatItemUnmuted(string id)
signal chatItemReordered(string id, int from, int to)
onPopupMenuChanged: {
if (!!popupMenu) {
@@ -35,183 +30,71 @@ Column {
}
}
DelegateModel {
id: delegateModel
model: statusChatList.model
delegate: Item {
id: draggable
width: statusChatListItem.width
height: statusChatListItem.height
property alias chatListItem: statusChatListItem
Repeater {
id: statusChatListItems
delegate: StatusChatListItem {
id: statusChatListItem
property string profileImage: ""
Component.onCompleted: {
if (typeof statusChatList.profileImageFn === "function") {
profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
}
}
chatId: model.chatId || model.id
name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
type: model.chatType
muted: !!model.muted
hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
hasMention: !!model.hasMention
badge.value: model.unviewedMessagesCount || 0
selected: (model.chatId || model.id) === statusChatList.selectedChatId
icon.color: model.color || ""
image.isIdenticon: !!!profileImage && !!!model.identityImage && !!model.identicon
image.source: profileImage || model.identityImage || model.identicon || ""
onClicked: {
if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
statusChatListItem.highlighted = true
let originalOpenHandler = popupMenuSlot.item.openHandler
let originalCloseHandler = popupMenuSlot.item.closeHandler
popupMenuSlot.item.openHandler = function () {
if (!!originalOpenHandler) {
originalOpenHandler((model.chatId || model.id))
}
}
popupMenuSlot.item.closeHandler = function () {
if (statusChatListItem) {
statusChatListItem.highlighted = false
}
if (!!originalCloseHandler) {
originalCloseHandler()
}
}
popupMenuSlot.item.popup(mouse.x + 4, statusChatListItem.y + mouse.y + 6)
popupMenuSlot.item.openHandler = originalOpenHandler
return
}
statusChatList.chatItemSelected(model.chatId || model.id)
}
onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
visible: {
if (!!statusChatList.filterFn) {
return statusChatList.filterFn(model)
return statusChatList.filterFn(model, statusChatList.categoryId)
}
return true
}
MouseArea {
id: dragSensor
anchors.fill: parent
cursorShape: active ? Qt.ClosedHandCursor : Qt.PointingHandCursor
hoverEnabled: true
pressAndHoldInterval: 150
enabled: statusChatList.draggableItems
property bool active: false
property real startY: 0
property real startX: 0
drag.target: draggedListItemLoader.item
drag.threshold: 0.1
drag.filterChildren: true
onPressed: {
startY = mouseY
startX = mouseX
}
onPressAndHold: active = true
onReleased: {
if (active) {
statusChatList.chatItemReordered(statusChatListItem.chatId, statusChatListItem.originalOrder, statusChatListItem.originalOrder)
}
active = false
}
onMouseYChanged: {
if ((Math.abs(startY - mouseY) > 1) && pressed) {
active = true
}
}
onMouseXChanged: {
if ((Math.abs(startX - mouseX) > 1) && pressed) {
active = true
}
}
StatusChatListItem {
id: statusChatListItem
opacity: dragSensor.active ? 0.0 : 1.0
originalOrder: model.position
chatId: model.itemId
categoryId: model.parentItemId? model.parentItemId : ""
name: model.name
type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
muted: model.muted
hasUnreadMessages: model.hasUnreadMessages
notificationsCount: model.notificationsCount
highlightWhenCreated: !!model.highlight
selected: (model.active && statusChatList.highlightItem)
icon.emoji: model.emoji
icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
image.isIdenticon: false
image.source: model.icon
ringSettings.ringSpecModel: model.colorHash
sensor.cursorShape: dragSensor.cursorShape
onClicked: {
highlightWhenCreated = false
if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
statusChatListItem.highlighted = true
let originalOpenHandler = popupMenuSlot.item.openHandler
let originalCloseHandler = popupMenuSlot.item.closeHandler
popupMenuSlot.item.openHandler = function () {
if (!!originalOpenHandler) {
originalOpenHandler(model.itemId)
}
}
popupMenuSlot.item.closeHandler = function () {
if (statusChatListItem) {
statusChatListItem.highlighted = false
}
if (!!originalCloseHandler) {
originalCloseHandler()
}
}
let p = statusChatListItem.mapToItem(statusChatList, mouse.x, mouse.y)
popupMenuSlot.item.popup(p.x + 4, p.y + 6)
popupMenuSlot.item.openHandler = originalOpenHandler
return
}
if (!statusChatListItem.selected) {
statusChatList.chatItemSelected(model.parentItemId, model.itemId)
}
}
onUnmute: statusChatList.chatItemUnmuted(model.itemId)
}
}
DropArea {
id: dropArea
width: dragSensor.active ? 0 : parent.width
height: dragSensor.active ? 0 : parent.height
keys: ["chat-item-category-" + statusChatListItem.categoryId]
onEntered: reorderDelay.start()
onDropped: statusChatList.chatItemReordered(statusChatListItem.chatId, drag.source.originalOrder, statusChatListItem.DelegateModel.itemsIndex)
Timer {
id: reorderDelay
interval: 100
repeat: false
onTriggered: {
if (dropArea.containsDrag) {
dropArea.drag.source.chatListItem.originalOrder = statusChatListItem.originalOrder
delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
}
}
}
}
Loader {
id: draggedListItemLoader
active: dragSensor.active
sourceComponent: StatusChatListItem {
property var globalPosition: Utils.getAbsolutePosition(draggable)
parent: QC.Overlay.overlay
sensor.cursorShape: dragSensor.cursorShape
Drag.active: dragSensor.active
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
Drag.keys: ["chat-item-category-" + categoryId]
Drag.source: draggable
Component.onCompleted: {
x = globalPosition.x
y = globalPosition.y
}
chatId: draggable.chatListItem.chatId
categoryId: draggable.chatListItem.categoryId
name: draggable.chatListItem.name
type: draggable.chatListItem.type
muted: draggable.chatListItem.muted
dragged: true
hasUnreadMessages: model.hasUnreadMessages
notificationsCount: model.notificationsCount
selected: draggable.chatListItem.selected
icon.color: draggable.chatListItem.icon.color
image.isIdenticon: draggable.chatListItem.image.isIdenticon
image.source: draggable.chatListItem.image.source
}
}
}
}
Repeater {
id: statusChatListItems
model: delegateModel
}
Loader {
id: popupMenuSlot
active: !!statusChatList.popupMenu
@@ -1,11 +1,8 @@
import QtQuick 2.14
import QtQml.Models 2.14
import QtQuick.Controls 2.14 as QC
import QtQuick.Controls 2.14
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Popups 0.1
import StatusQ.Core 0.1
Item {
id: statusChatListAndCategories
@@ -13,31 +10,18 @@ Item {
implicitHeight: chatListsAndCategories.height
implicitWidth: chatListsAndCategories.width
property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
text: qsTr("Add channel inside category")
}
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
text: qsTr("More")
}
property var model: []
property string selectedChatId: ""
property bool showCategoryActionButtons: false
property bool showPopupMenu: true
property alias chatList: statusChatList.chatListItems
property alias categoryList: statusChatListCategories
property alias sensor: sensor
property bool draggableItems: false
property bool draggableCategories: false
// Keeps track of expanded category state. Should only be modified
// internally at runtime.
property var openedCategoryState: new Object({})
property Component categoryPopupMenu
property Component chatListPopupMenu
property Component popupMenu
signal chatItemSelected(string categoryId, string id)
signal chatItemSelected(string id)
signal chatItemUnmuted(string id)
signal chatItemReordered(string categoryId, string chatId, int from, int to)
signal chatListCategoryReordered(string categoryId, int from, int to)
signal categoryAddButtonClicked(string id)
onPopupMenuChanged: {
@@ -53,7 +37,7 @@ Item {
height: statusChatListAndCategories.height
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
return
}
@@ -68,155 +52,35 @@ Item {
StatusChatList {
id: statusChatList
visible: statusChatList.model.count > 0
onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
anchors.horizontalCenter: parent.horizontalCenter
visible: !!chatListItems.model && chatListItems.count > 0
selectedChatId: statusChatListAndCategories.selectedChatId
onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
draggableItems: statusChatListAndCategories.draggableItems
model: statusChatListAndCategories.model
filterFn: function (model) {
return !model.isCategory
return !!!model.categoryId
}
popupMenu: statusChatListAndCategories.chatListPopupMenu
}
DelegateModel {
id: delegateModel
model: statusChatListAndCategories.model
delegate: Item {
id: draggable
width: statusChatListCategory.width
height: statusChatListCategory.height
property alias chatListCategory: statusChatListCategory
StatusChatListCategory {
id: statusChatListCategory
property bool dragActive: false
property real startY: 0
property real startX: 0
opacity: dragActive ? 0.0 : 1.0
dragSensor.drag.target: draggedListCategoryLoader.item
dragSensor.drag.threshold: 0.1
dragSensor.drag.filterChildren: true
dragSensor.onPressAndHold: {
if (statusChatListAndCategories.draggableCategories) {
dragActive = true
}
}
dragSensor.onReleased: {
if (dragActive) {
statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, statusChatListCategory.originalOrder, statusChatListCategory.originalOrder)
}
dragActive = false
}
dragSensor.cursorShape: dragActive ? Qt.ClosedHandCursor : Qt.PointingHandCursor
dragSensor.onPressed: {
startY = dragSensor.mouseY
startX = dragSensor.mouseX
}
dragSensor.onMouseYChanged: {
if (statusChatListAndCategories.draggableCategories && (Math.abs(startY - dragSensor.mouseY) > 1) && dragSensor.pressed) {
dragActive = true
}
}
dragSensor.onMouseXChanged: {
if (statusChatListAndCategories.draggableCategories && (Math.abs(startX - dragSensor.mouseX) > 1) && dragSensor.pressed) {
dragActive = true
}
}
addButton.tooltip: statusChatListAndCategories.categoryAddButtonToolTip
menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
originalOrder: model.position
categoryId: model.itemId
name: model.name
showActionButtons: statusChatListAndCategories.showCategoryActionButtons
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
chatList.model: model.subItems
chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.itemId, id, from, to)
chatList.draggableItems: statusChatListAndCategories.draggableItems
popupMenu: statusChatListAndCategories.categoryPopupMenu
chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
// Used to set the initial value of "opened" when the
// model is bound/changed.
opened: {
let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
return openedState !== undefined ? openedState : true // defaults to open
}
// Used to track the internal changes of the `opened`
// property. This cannot be brought inside the component
// as the state would be lost each time the model is
// changed.
onOpenedChanged: {
statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
}
}
DropArea {
id: dropArea
width: draggable.chatListCategory.dragActive ? 0 : parent.width
height: draggable.chatListCategory.dragActive ? 0 : parent.height
keys: ["chat-category"]
onEntered: reorderDelay.start()
onDropped: statusChatListAndCategories.chatListCategoryReordered(statusChatListCategory.categoryId, drag.source.originalOrder, statusChatListCategory.DelegateModel.itemsIndex)
Timer {
id: reorderDelay
interval: 100
repeat: false
onTriggered: {
if (dropArea.containsDrag) {
dropArea.drag.source.chatListCategory.originalOrder = statusChatListCategory.originalOrder
delegateModel.items.move(dropArea.drag.source.DelegateModel.itemsIndex, draggable.DelegateModel.itemsIndex)
}
}
}
}
Loader {
id: draggedListCategoryLoader
active: draggable.chatListCategory.dragActive
sourceComponent: StatusChatListCategory {
property var globalPosition: Utils.getAbsolutePosition(draggable)
parent: QC.Overlay.overlay
dragSensor.cursorShape: draggable.chatListCategory.dragSensor.cursorShape
Drag.active: draggable.chatListCategory.dragActive
Drag.hotSpot.x: width / 2
Drag.hotSpot.y: height / 2
Drag.keys: ["chat-category"]
Drag.source: draggable
Component.onCompleted: {
x = globalPosition.x
y = globalPosition.y
}
dragged: true
categoryId: draggable.chatListCategory.categoryId
name: draggable.chatListCategory.name
showActionButtons: draggable.chatListCategory.showActionButtons
chatList.model: draggable.chatListCategory.chatList.model
}
}
}
}
Repeater {
id: statusChatListCategories
visible: !!model && model.count > 0
model: delegateModel
delegate: StatusChatListCategory {
categoryId: model.categoryId
name: model.name
showActionButtons: statusChatListAndCategories.showCategoryActionButtons
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
chatList.chatListItems.model: statusChatListAndCategories.chatList.model
chatList.selectedChatId: statusChatListAndCategories.selectedChatId
chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
chatList.onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
popupMenu: statusChatListAndCategories.categoryPopupMenu
chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
}
}
}
}
@@ -7,21 +7,16 @@ Column {
id: statusChatListCategory
spacing: 0
opacity: dragged ? 0.5 : 1
objectName: "chatListCategory"
property int originalOrder: -1
property string categoryId: ""
property string name: ""
property bool opened: true
property bool dragged: false
property alias showActionButtons: statusChatListCategoryItem.showActionButtons
property alias addButton: statusChatListCategoryItem.addButton
property alias menuButton: statusChatListCategoryItem.menuButton
property alias toggleButton: statusChatListCategoryItem.toggleButton
property alias chatList: statusChatList
property alias dragSensor: statusChatListCategoryItem.sensor
property Component chatListPopupMenu
property Component popupMenu
@@ -35,22 +30,18 @@ Column {
StatusChatListCategoryItem {
id: statusChatListCategoryItem
title: statusChatListCategory.name
visible: model.isCategory
opened: statusChatListCategory.opened
sensor.pressAndHoldInterval: 150
showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
highlighted: statusChatListCategory.dragged
sensor.onClicked: {
if (sensor.enabled) {
if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
highlighted = true;
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
return
}
showMenuButton: !!statusChatListCategory.popupMenu
onClicked: {
if (mouse.button === Qt.RightButton && !!statusChatListCategory.popupMenu) {
highlighted = true
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
return
}
statusChatListCategory.opened = !opened
}
onTitleClicked: statusChatListCategory.opened = !opened
onToggleButtonClicked: statusChatListCategory.opened = !opened
onMenuButtonClicked: {
highlighted = true
@@ -67,7 +58,7 @@ Column {
visible: statusChatListCategory.opened
categoryId: statusChatListCategory.categoryId
filterFn: function (model) {
return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
return !!model.categoryId && model.categoryId == statusChatList.categoryId
}
popupMenu: statusChatListCategory.chatListPopupMenu
@@ -23,12 +23,15 @@ StatusListItem {
property alias menuButton: menuButton
property alias toggleButton: toggleButton
signal clicked(var mouse)
signal addButtonClicked(var mouse)
signal menuButtonClicked(var mouse)
signal toggleButtonClicked(var mouse)
color: sensor.containsMouse || highlighted ? Theme.palette.baseColor2 : "transparent"
sensor.onClicked: statusChatListCategoryItem.clicked(mouse)
statusListItemTitle.color: Theme.palette.directColor4
statusListItemTitle.font.weight: Font.Medium
@@ -39,36 +42,28 @@ StatusListItem {
id: addButton
icon.name: "add"
icon.width: 20
visible: statusChatListCategoryItem.showAddButton &&
visible: statusChatListCategoryItem.showAddButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
tooltip.text: qsTr("Add channel inside category")
tooltip.text: "Add channel inside category"
},
StatusChatListCategoryItemButton {
id: menuButton
icon.name: "more"
icon.width: 21
visible: statusChatListCategoryItem.showMenuButton &&
visible: statusChatListCategoryItem.showMenuButton &&
(statusChatListCategoryItem.highlighted ||
statusChatListCategoryItem.sensor.containsMouse)
onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
tooltip.text: qsTr("More")
tooltip.text: "More"
},
StatusChatListCategoryItemButton {
id: toggleButton
icon.name: "chevron-down"
icon.width: 18
icon.rotation: statusChatListCategoryItem.opened ? 0 : 270
onPressed: {
sensor.enabled = false;
}
onClicked: {
statusChatListCategoryItem.toggleButtonClicked(mouse);
}
onReleased: {
sensor.enabled = true;
}
onClicked: statusChatListCategoryItem.toggleButtonClicked(mouse)
}
]
}
+110 -103
View File
@@ -1,44 +1,25 @@
import QtQuick 2.13
import QtQml.Models 2.13
import QtQuick.Controls 2.13 as QC
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
Rectangle {
id: root
id: statusChatListItem
objectName: "chatItem"
property int originalOrder: -1
property string chatId: ""
property string categoryId: ""
property string name: ""
property alias badge: statusBadge
property bool hasUnreadMessages: false
property int notificationsCount: 0
property bool hasMention: false
property bool muted: false
property StatusImageSettings image: StatusImageSettings {
width: 24
height: 24
}
property StatusImageSettings image: StatusImageSettings {}
property StatusIconSettings icon: StatusIconSettings {
width: 24
height: 24
color: Theme.palette.miscColor5
emoji: ""
charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
}
property alias ringSettings: identicon.ringSettings
property int type: StatusChatListItem.Type.PublicChat
property bool highlighted: false
property bool highlightWhenCreated: false
property bool selected: false
property bool dragged: false
property alias sensor: sensor
signal clicked(var mouse)
signal unmute()
@@ -62,32 +43,63 @@ Rectangle {
if (selected) {
return Theme.palette.statusChatListItem.selectedBackgroundColor
}
return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
}
opacity: dragged ? 0.7 : 1
MouseArea {
id: sensor
HoverHandler {
id: hoverHander
}
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
onClicked: root.clicked(mouse)
onClicked: statusChatListItem.clicked(mouse)
StatusSmartIdenticon {
Loader {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
image: root.image
icon: root.icon
name: root.name
sourceComponent: !!statusChatListItem.image.source.toString() ?
statusRoundedImageCmp : statusLetterIdenticonCmp
}
Component {
id: statusLetterIdenticonCmp
StatusLetterIdenticon {
height: 24
width: 24
name: statusChatListItem.name
letterSize: 15
color: statusChatListItem.icon.color
}
}
Component {
id: statusRoundedImageCmp
Item {
height: 24
width: 24
StatusRoundedImage {
id: statusRoundedImage
width: parent.width
height: parent.height
image.source: statusChatListItem.image.source
showLoadingIndicator: true
color: statusChatListItem.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
border.width: statusChatListItem.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
}
Loader {
sourceComponent: statusLetterIdenticonCmp
active: statusRoundedImage.image.status === Image.Error
}
}
}
StatusIcon {
@@ -97,32 +109,32 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
width: 14
visible: root.type !== StatusChatListItem.Type.OneToOneChat
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
opacity: {
if (root.muted && !hoverHander.hovered && !root.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
return 0.4
}
return root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.selected ||
root.highlighted ||
statusBadge.visible ||
hoverHander.hovered ? 1.0 : 0.7
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
statusBadge.visible ||
sensor.containsMouse ? 1.0 : 0.7
}
icon: {
switch (root.type) {
case StatusChatListItem.Type.PublicCat:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
break;
case StatusChatListItem.Type.GroupChat:
return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
break;
case StatusChatListItem.Type.CommunityChat:
return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
break;
default:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
switch (statusChatListItem.type) {
case StatusChatListItem.Type.PublicCat:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
break;
case StatusChatListItem.Type.GroupChat:
return Theme.palette.name == "light" ? "tiny/group" : "tiny/group-white"
break;
case StatusChatListItem.Type.CommunityChat:
return Theme.palette.name == "light" ? "tiny/channel" : "tiny/channel-white"
break;
default:
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
}
}
}
@@ -131,72 +143,67 @@ Rectangle {
id: chatName
anchors.left: statusIcon.visible ? statusIcon.right : identicon.right
anchors.leftMargin: statusIcon.visible ? 1 : 8
anchors.right: mutedIcon.visible ? mutedIcon.left :
statusBadge.visible ? statusBadge.left : parent.right
anchors.right: statusBadge.visible ? statusBadge.left :
mutedIcon.visible ? mutedIcon.left : parent.right
anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter
text: (root.type === StatusChatListItem.Type.PublicChat &&
!root.name.startsWith("#") ?
"#" + root.name :
root.name)
text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
!statusChatListItem.name.startsWith("#") ?
"#" + statusChatListItem.name :
statusChatListItem.name
elide: Text.ElideRight
color: {
if (root.muted && !hoverHander.hovered && !root.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
return Theme.palette.directColor5
}
return root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.selected ||
root.highlighted ||
root.highlightWhenCreated ||
hoverHander.hovered ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
return statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
sensor.containsMouse ||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
}
font.weight: !root.muted &&
(root.hasUnreadMessages ||
root.notificationsCount > 0 ||
root.highlightWhenCreated ||
statusBadge.visible) ? Font.Bold : Font.Medium
font.weight: statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusBadge.visible ? Font.Bold : Font.Medium
font.pixelSize: 15
}
StatusIcon {
id: mutedIcon
anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
width: 14
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
visible: root.muted
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: root.unmute()
}
StatusToolTip {
text: qsTr("Unmute")
visible: mutedIconSensor.containsMouse
}
}
StatusBadge {
id: statusBadge
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.color: color
value: root.notificationsCount
visible: root.notificationsCount > 0
visible: statusBadge.value > 0
}
StatusIcon {
id: mutedIcon
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
width: 14
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
visible: statusChatListItem.muted
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusChatListItem.unmute()
}
StatusToolTip {
text: "Unmute"
visible: mutedIconSensor.containsMouse
}
}
}
}
+14 -72
View File
@@ -14,8 +14,6 @@ Rectangle {
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: menuButton
property alias notificationButton: notificationButton
property alias membersButton: membersButton
property alias searchButton: searchButton
property int notificationCount: 0
property Component popupMenu
@@ -23,8 +21,6 @@ Rectangle {
signal chatInfoButtonClicked()
signal menuButtonClicked()
signal notificationButtonClicked()
signal membersButtonClicked()
signal searchButtonClicked()
onPopupMenuChanged: {
if (!!popupMenu) {
@@ -37,7 +33,6 @@ Rectangle {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
width: Math.min(implicitWidth, parent.width - actionButtons.implicitWidth - anchors.leftMargin * 2)
onClicked: statusChatToolBar.chatInfoButtonClicked()
}
@@ -49,34 +44,6 @@ Rectangle {
spacing: 8
StatusFlatRoundButton {
id: searchButton
width: 32
height: 32
icon.name: "search"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.searchButtonClicked()
// initializing the tooltip
tooltip.text: qsTr("Search")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
}
StatusFlatRoundButton {
id: membersButton
width: 32
height: 32
icon.name: "group-chat"
type: StatusFlatRoundButton.Type.Secondary
onClicked: statusChatToolBar.membersButtonClicked()
// initializing the tooltip
tooltip.text: qsTr("Members")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
}
StatusFlatRoundButton {
id: menuButton
width: 32
@@ -85,40 +52,11 @@ Rectangle {
type: StatusFlatRoundButton.Type.Secondary
visible: !!statusChatToolBar.popupMenu
// initializing the tooltip
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
tooltip.text: qsTr("More")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
property bool showMoreMenu: false
onClicked: {
menuButton.highlighted = true
let originalOpenHandler = popupMenuSlot.item.openHandler
let originalCloseHandler = popupMenuSlot.item.closeHandler
popupMenuSlot.item.openHandler = function () {
if (!!originalOpenHandler) {
originalOpenHandler()
}
}
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
if (!!originalCloseHandler) {
originalCloseHandler()
}
}
popupMenuSlot.item.openHandler = originalOpenHandler
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
statusChatToolBar.menuButtonClicked()
}
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
highlighted = true
let p = menuButton.mapToItem(statusChatToolBar, menuButton.x, menuButton.y)
popupMenuSlot.item.popup(p.x + menuButton.width - popupMenuSlot.item.width, p.y + 4 + menuButton.height)
}
}
@@ -127,8 +65,7 @@ Rectangle {
width: 1
color: Theme.palette.directColor7
anchors.verticalCenter: parent.verticalCenter
visible: notificationButton.visible &&
(menuButton.visible || membersButton.visible || searchButton.visible)
visible: menuButton.visible && notificationButton.visible
}
StatusFlatRoundButton {
@@ -140,11 +77,6 @@ Rectangle {
icon.height: 21
type: StatusFlatRoundButton.Type.Secondary
// initializing the tooltip
tooltip.text: qsTr("Activity")
tooltip.orientation: StatusToolTip.Orientation.Bottom
tooltip.y: parent.height + 12
onClicked: statusChatToolBar.notificationButtonClicked()
StatusBadge {
@@ -171,5 +103,15 @@ Rectangle {
}
}
Loader {
id: popupMenuSlot
active: !!statusChatToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
menuButton.highlighted = false
}
}
}
}
@@ -14,7 +14,6 @@ StatusListItem {
components: [
StatusBadge {
visible: statusContactRequestsListItem.requestsCount > 0
value: statusContactRequestsListItem.requestsCount
anchors.verticalCenter: parent.verticalCenter
border.width: 4
@@ -1,79 +0,0 @@
import QtQuick 2.0
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Row {
id: root
property bool isMutualContact: false
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
name: "tiny/tiny-contact"
color: Theme.palette.indirectColor1
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
color: Theme.palette.primaryColor1
}
// Only used to get implicit width and height from the actual image
property Image dummyImage: Image {
source: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": ""
visible: false
}
}
property StatusIconSettings trustContactIcon: StatusIconSettings {
// None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
color: Theme.palette.indirectColor1
width: dummyImage.width
height: dummyImage.height
background: StatusIconBackgroundSettings {
width: 10
height: 10
color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
}
// Only used to get implicit width and height from the actual image
property Image dummyImage: Image {
source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": ""
visible: false
}
}
enum TrustedType {
None, //0
Verified, //1
Untrustworthy //2
}
spacing: 4
visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
StatusRoundIcon {
visible: root.isMutualContact
icon.name: root.mutualConnectionIcon.name
icon.width: root.mutualConnectionIcon.width
icon.height: root.mutualConnectionIcon.height
icon.rotation: root.mutualConnectionIcon.rotation
icon.color: root.mutualConnectionIcon.color
icon.background.color: root.mutualConnectionIcon.background.color
icon.background.width: root.mutualConnectionIcon.background.width
icon.background.height: root.mutualConnectionIcon.background.height
}
StatusRoundIcon {
visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
icon.name: root.trustContactIcon.name
icon.width: root.trustContactIcon.width
icon.height: root.trustContactIcon.height
icon.rotation: root.trustContactIcon.rotation
icon.color: root.trustContactIcon.color
icon.background.color: root.trustContactIcon.background.color
icon.background.width: root.trustContactIcon.background.width
icon.background.height: root.trustContactIcon.background.height
}
}
@@ -8,15 +8,12 @@ Rectangle {
property string title: ""
property string subTitle: ""
property alias subTitleComponent: statusDescriptionListItemSubTitle
property string value: ""
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
}
property alias tooltip: statusToolTip
property alias iconButton: statusFlatRoundButton
property alias sensor: sensor
implicitWidth: 448
implicitHeight: 56
@@ -24,77 +21,48 @@ Rectangle {
color: Theme.palette.statusListItem.backgroundColor
MouseArea {
id: sensor
anchors.fill: parent
hoverEnabled: true
enabled: false
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
StatusBaseText {
id: statusDescriptionListItemTitle
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 5
StatusBaseText {
id: statusDescriptionListItemTitle
anchors.top: parent.top
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 5
color: Theme.palette.baseColor1
text: statusDescriptionListItem.title
font.pixelSize: 13
font.weight: Font.Medium
}
color: Theme.palette.baseColor1
text: statusDescriptionListItem.title
font.pixelSize: 13
font.weight: Font.Medium
}
StatusBaseText {
id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 4
StatusBaseText {
id: statusDescriptionListItemSubTitle
anchors.top: statusDescriptionListItemTitle.bottom
anchors.left: parent.left
anchors.leftMargin: 16
anchors.topMargin: 4
text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1
font.pixelSize: 15
font.weight: Font.Normal
}
text: statusDescriptionListItem.subTitle
color: Theme.palette.directColor1
font.pixelSize: 15
font.weight: Font.Normal
}
StatusFlatRoundButton {
id: statusFlatRoundButton
visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
StatusFlatRoundButton {
id: statusFlatRoundButton
visible: !!statusDescriptionListItem.icon.name
anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
anchors.left: statusDescriptionListItemSubTitle.right
anchors.leftMargin: 4
width: 32
height: 32
width: 32
height: 32
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
icon.height: statusDescriptionListItem.icon.height
icon.name: statusDescriptionListItem.icon.name
icon.width: statusDescriptionListItem.icon.width
icon.height: statusDescriptionListItem.icon.height
StatusToolTip {
id: statusToolTip
}
}
Row {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
visible: !!statusDescriptionListItem.value
spacing: 8
StatusBaseText {
text: statusDescriptionListItem.value
color: Theme.palette.baseColor1
font.pixelSize: 15
anchors.verticalCenter: parent.verticalCenter
}
StatusIcon {
icon: "chevron-down"
rotation: 270
color: Theme.palette.baseColor1
}
StatusToolTip {
id: statusToolTip
}
}
}
-19
View File
@@ -1,19 +0,0 @@
import QtQuick 2.13
import StatusQ.Core 0.1
Image {
id: root
property string emojiId: ""
width: 14
height: 14
sourceSize.width: width
sourceSize.height: height
fillMode: Image.PreserveAspectFit
mipmap: true
antialiasing: true
source: emojiId ? `../../assets/twemoji/svg/${emojiId}.svg` : ""
}
@@ -1,228 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Rectangle {
id: statusExpandableItem
property alias primaryText: primaryText.text
property alias secondaryText: secondaryText.text
property alias additionalText: additionalText.text
property alias button: button
property alias expandableComponent: expandableRegion.sourceComponent
property alias expandableItem: expandableRegion.item
property int type: StatusExpandableItem.Type.Primary
property bool expandable: true
property bool expanded: false
property StatusIconSettings icon: StatusIconSettings {
width: !!statusExpandableItem.icon.name.toString() ? 24 : 40
height: !!statusExpandableItem.icon.name.toString() ? 24 : 40
color: Theme.palette.directColor1
background: StatusIconBackgroundSettings {
width: 32
height: 32
color: Theme.palette.primaryColor2
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
}
enum Type {
Primary, // 0
Secondary, // 1
Tertiary // 2
}
implicitWidth: 718
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 8 : 0
color: "transparent"
border.color: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Theme.palette.baseColor2 : "transparent"
state: "COLLAPSED"
clip: true
Rectangle {
id: separatorRect
anchors.top: parent.top
anchors.horizontalCenter: parent.horizontalCenter
width: parent.width
height: 1
color: Theme.palette.baseColor2
visible: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary)
}
Rectangle {
id: header
anchors.top: parent.top
width: parent.width
height: 64
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
StatusSmartIdenticon {
id: identicon
anchors.top: parent.top
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
image: statusExpandableItem.image
icon: statusExpandableItem.icon
name: primaryText.text
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
}
StatusBaseText {
id: primaryText
anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ||
(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
anchors.left: identicon.active ? identicon.right : parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? identicon.verticalCenter : undefined
width: !!additionalText.text ? (button.visible ? parent.width - icon.background.width - button.width - additionalText.contentWidth - 110 :
parent.width - icon.background.width - additionalText.contentWidth - 110) :
(button.visible ? parent.width - icon.background.width - button.width - 70 :
parent.width - icon.background.width - 70)
font.weight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? Font.Medium : Font.Normal
font.pixelSize: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 15 : 17
lineHeight: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 22 : 24
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? Theme.palette.baseColor1 : Theme.palette.directColor1
}
StatusBaseText {
id: secondaryText
anchors.top: primaryText.bottom
anchors.topMargin: 4
anchors.left: primaryText.left
anchors.right: primaryText.right
font.pixelSize: 15
lineHeight: 22
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.directColor3
}
StatusBaseText {
id: additionalText
anchors.verticalCenter: primaryText.verticalCenter
anchors.verticalCenterOffset: 2
anchors.right: expandImage.left
anchors.rightMargin: 16
font.pixelSize: 15
lineHeight: 24
lineHeightMode: Text.FixedHeight
elide: Text.ElideRight
color: Theme.palette.baseColor1
}
StatusButton {
id: button
anchors.top: parent.top
anchors.topMargin: 19
anchors.right: parent.right
anchors.rightMargin: 16
visible: !!text
}
StatusIcon {
id: expandImage
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
primaryText.verticalCenter : identicon.verticalCenter
anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? -3 : -1
anchors.right: parent.right
anchors.rightMargin: {
switch (statusExpandableItem.type) {
case StatusExpandableItem.Type.Primary:
return 23
break;
case StatusExpandableItem.Type.Secondary:
return 16
break;
default:
return 6
}
}
visible: expandable && !button.visible
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
Theme.palette.baseColor1 :
Theme.palette.directColor1
}
MouseArea {
id: sensor
anchors.fill: parent
onClicked: {
if(expandable) {
expanded = !expanded
}
}
cursorShape: Qt.PointingHandCursor
visible: !button.visible && expandable
hoverEnabled: true
}
}
Loader {
id: expandableRegion
anchors.top: header.bottom
anchors.topMargin: 16
anchors.left: parent.left
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 48 : 0
anchors.right: parent.right
anchors.rightMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 16 : 0
visible: false
}
onExpandedChanged: {
if(expanded) {
state = "EXPANDED"
}
else {
state = "COLLAPSED"
}
}
states: [
State {
name: "EXPANDED"
PropertyChanges {target: expandImage; icon: "chevron-up"}
PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
PropertyChanges {target: expandableRegion; visible: true}
},
State {
name: "COLLAPSED"
PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: statusExpandableItem; height: 82}
PropertyChanges {target: expandableRegion; visible: false}
}
]
transitions: [
Transition {
from: "COLLAPSED"
to: "EXPANDED"
NumberAnimation { properties: "height"; duration: 200 }
},
Transition {
from: "EXPANDED"
to: "COLLAPSED"
NumberAnimation { properties: "height"; duration: 200 }
}
]
}

Some files were not shown because too many files have changed in this diff Show More