Compare commits

..
Author SHA1 Message Date
B.Melnik 3a0e54928c wip 2021-07-09 10:41:03 +03:00
215 changed files with 2597 additions and 13903 deletions
-2
View File
@@ -12,5 +12,3 @@ Makefile
.qmake.stash
*_qml.cpp
*_qmlcache.qrc
sandbox/qmlcache_loader.cpp
doc/html
-635
View File
@@ -1,635 +0,0 @@
<a name=""></a>
## 0.24.0 (2022-02-14)
#### Features
* **StatusListItem:** add highlighted property ([5780f183](5780f183))
* **StatusQ.Components:** Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
<a name=""></a>
## Version 0.23.0 (2022-02-08)
#### Bug Fixes
* Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
* **StatusChatList:** unexisting property name for chat item fixed ([c2e07517](c2e07517))
#### Features
* **StatusQ.Components:**
* Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
* Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
<a name=""></a>
## Version 0.22.0 (2022-01-31)
#### Features
* **StatusMemberListItem:** Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
<a name=""></a>
## Version 0.21.0 (2022-01-24)
#### Bug Fixes
* **build:** broken MacOS build (#533) ([55901cf0](55901cf0))
#### Features
* **StatusMessage:** Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
* **StatusQ.Controls:** Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
<a name=""></a>
## Version 0.20.0 (2022-01-17)
#### Features
* **StatusBanner:** introduce type variants for different banner styles ([35d12f44](35d12f44))
#### Bug Fixes
* **StatusBaseInput:** Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
* **build:** Windows build ([14ab4ce5](14ab4ce5))
<a name=""></a>
## Version 0.19.0 (2021-12-03)
#### Bug Fixes
* **StatusChatListItem:** This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
#### Features
* **StatusModal:** introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
<a name=""></a>
## Version 0.18.0 (2021-11-30)
#### Bug Fixes
* **StatusAppNavBar:** Fixed position of profile button on the NavBar ([419b7384](419b7384))
* **StatusImageWithTitle:** Fix position of the edit title button ([8d2121ad](8d2121ad))
* **StatusListItem:** ensure title is elided ([b7883e82](b7883e82))
#### Features
* **StatusListItem:** Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
<a name=""></a>
## Version 0.17.1 (2021-11-19)
#### Bug Fixes
* **StatusAccountSelector:** Adapt ui to data model changed ([db024436](db024436))
* **StatusAssetSelector:** Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
<a name=""></a>
## Version 0.17.0 (2021-11-10)
#### Features
* **StatusBaseButton:** introduce `Tiny` size ([dee9f437](dee9f437))
* **StatusQ.Controls.Validators:** introduce `StatusUrlValidator` ([a9155865](a9155865))
#### Bug Fixes
* **StatusAccountSelector:** adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
* **StatusExpandibleItem:** add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
* **StatusInput:** ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
* **StatusListItem:** This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
* **StatusSearchPopup:** disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
* **StatusSlider:** slider background and handle should not depend on root's height ([31cfc883](31cfc883))
<a name=""></a>
## Version 0.16.0 (2021-11-01)
#### Bug Fixes
* **StatusModal:** render footer correctly based on `showFooter` flag ([da9dc2f4](da9dc2f4))
* **StatusRoundButton:** ensure disabled state uses correct background color ([eb4aae40](eb4aae40))
#### Features
* **StatusQ.Controls:**
* introduce `StatusWalletColorSelect` control ([ea9a5602](ea9a5602), closes [#467](467))
* introduce `StatusWalletColorButton` component ([597ae192](597ae192), closes [#466](466))
* **StatusQ.Platform:** introduce StatusMacNotification component ([d301b94c](d301b94c))
<a name=""></a>
## Version 0.15.0 (2021-10-26)
#### Features
* **StatusQ.Controls:**
* introduce StatusChatCommandButton ([4cc0d2bb](4cc0d2bb), closes [#429](429))
* introduce `StatusTabBarIconButton` component ([4bcd89b3](4bcd89b3), closes [#428](428))
<a name=""></a>
## Version 0.14.0 (2021-10-25)
#### Bug Fixes
* **Spellchecking:** Add check for hunspell existence ([ab9ab249](ab9ab249))
* **StatusModal:**
* ensure `onEditButtonClicked` signal is emitted ([074dc22b](074dc22b), closes [#454](454))
* expose `header.editable` property ([9c5f79a6](9c5f79a6), closes [#452](452))
#### Features
* **StatusSmartIdenticon:** Created a new StatusQ componnent to accomodate: ([14527483](14527483))
<a name=""></a>
## Version 0.13.0 (2021-10-19)
#### Bug Fixes
* use proper double checkmark icon ([8aba017c](8aba017c))
* **StatusBaseButton:** introduce missing `highlighted` property ([a3748920](a3748920))
#### Features
* **StatusFlatRoundButton:** Update the StatusFlatRoundButton to take over button behaviour from StatusIconButton under ui/shared/status ([71fbdef1](71fbdef1))
<a name=""></a>
## Version 0.12.0 (2021-10-18)
#### Features
* Resolve StatusQ modules highlighting and add qml compiler for detecting coompile time errors ([e1b0f2dc](e1b0f2dc))
* **StatusModal:** Add edit avatar button ([5043b0b6](5043b0b6))
* **StatusQ.Components:** introduce `StatusAddress` component ([6789446d](6789446d), closes [#430](430))
* **StatusQ.Controls:**
* introduce StatusColorSelector component ([bdd69955](bdd69955), closes [#444](444))
* introduce `StatusAssetSelector` component ([9fdc9aea](9fdc9aea), closes [#442](442))
* introduce `StatusAccountSelector` component ([5e15cc49](5e15cc49), closes [#435](435))
* introduce `StatusSelect` ([6e10959e](6e10959e), closes [#436](436))
* **StatusQ.Popups:** introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
#### Breaking Changes
* **StatusQ.Popups:** introduce `StatusMenuItemDelegate` ([0764e25a](0764e25a))
<a name=""></a>
## Version 0.11.1(2021-10-12)
#### Bug Fixes
* Sandbox doesn't build on Linux machines ([dce45c2f](dce45c2f))
* **StatusChatInfoButton:** StatusChatInfoButton takes up entire available width ([c276a90e](c276a90e))
<a name=""></a>
## v0.11.0 (2021-09-27)
#### Bug Fixes
* track category opened state ([0631d500](0631d500))
* **StatusChatList:** ensure right click popup opens in correct position ([a2e3659d](a2e3659d))
* **StatusSearchPopup:** use correct theme color for search result text ([654bd9f2](654bd9f2))
* **StatusSpellcheckingMenuItems:** Exact menu items order ([478177f2](478177f2))
#### Features
* add star icons (#422) ([5c3267f7](5c3267f7))
<a name=""></a>
## v0.10.0 (2021-09-20)
#### Bug Fixes
* **StatusChatInfoToolBar:** Right anchored title in StatusChatInfoToolBar ([6e8a36be](6e8a36be))
* **StatusChatListCategoryItem:** Disable sensor when chevron clicked ([c83641d2](c83641d2))
* **StatusQ.Controls.Validators:** fix bug that addressOrEns validator isn't properly exposed in QML ([1374c193](1374c193))
#### Features
* **Spellchecker:** Add Spellchecker class ([c65f80d2](c65f80d2))
* **Spellchecking:**
* Add dictionaries ([1d12d222](1d12d222))
* Add huspell dependency ([f9457ef3](f9457ef3))
* **StatusChatList:** expose `statusChatListItems` Repeater ([40c0e48b](40c0e48b))
* **StatusExpandableItem:** Correct placement of expandable region in tertiary type ([1f244f62](1f244f62))
* **StatusInput:**
* add support for asynchronous validators ([8820cd89](8820cd89), closes [#395](395))
* introduce `leftPadding` and `rightPadding` properties ([13dc8ae3](13dc8ae3))
* introduce `reset` API ([a2ad08e4](a2ad08e4))
* **StatusSpellcheckingMenuItems:** Add spellchecking menu ([3e24b710](3e24b710))
<a name=""></a>
## v0.9.0 (2021-09-13)
#### Breaking Changes
* **StatusExpandableItem:** Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
#### Bug Fixes
* **StatusAppThreePanelLayout:** Fix margin between left and center panels ([29e9557d](29e9557d))
* **StatusChatListAndCategories:** rely on correct tooltip settings prop ([2971c607](2971c607))
* **StatusCheckbox:** give checkbox label proper theme color ([88fb57dd](88fb57dd))
* **StatusModal:** don't reserve header subtitle space ([eabc62f7](eabc62f7), closes [#378](378))
#### Features
* **Status.Core.Theme:** add RobotoMono font ([aab44c1e](aab44c1e), closes [#342](342))
* **StatusBaseInput:** introduce `component` property ([019471c8](019471c8), closes [#380](380))
* **StatusExpandableItem:** Refactored the StatusExpandableSettingsItem to support different types ([718171fd](718171fd))
* **StatusInput:**
* introduce `ValidationMode` ([d73a1584](d73a1584))
* exposed edit component ([73c77c29](73c77c29))
* **StatusQ.Controls.Validators:**
* introduce `StatusAddressAndEnsValidator` ([a93ef161](a93ef161))
* introduce `StatusAddressValidator` ([77d0e9b8](77d0e9b8))
* **StatusSearchPopup:** introduce forceActiveFocus API ([efe31166](efe31166))
* **StatusValidator:** allow validators to provide default `errorMessage` ([1a23cc19](1a23cc19))
<a name=""></a>
## v0.8.0 (2021-09-06)
#### Bug Fixes
* **StatusBaseInput:**
* fix one line scroll ([d64aa6de](d64aa6de))
* Make clear button bigger ([387bfe77](387bfe77))
* **StatusChatToolBar:** Fix mouse event catching after menu closing ([fbecac4a](fbecac4a))
* **StatusInput:** Forward keys events to root ([061c7d1c](061c7d1c))
* **StatusListItem:** Add propogateCompostedEvents to title mouse area ([5c706fdc](5c706fdc))
* **StatusModal:** Remove self-calculating height ([3187de54](3187de54))
#### Features
* introduce bigger versions of navbar icons ([0a4d3860](0a4d3860))
* **StatusBaseInput:** introduce focussed property ([ddfca7a8](ddfca7a8), closes [#373](373))
* **StatusChatListAndCategories:** Add tooltip settings for categories buttons ([64098e84](64098e84))
* **StatusDescriptionListItem:**
* expose subtitle component for fine control ([1749cc0e](1749cc0e))
* introduce support for `value` ([a963ef80](a963ef80))
* **StatusExpandableSettingsItem:** Added new component for wallet settings ([f3ab4ce9](f3ab4ce9))
* **StatusInput:** Introduced secondaryLabel property ([d648230d](d648230d), closes [#383](383))
* **StatusModal:**
* Add popup menu support for StatusModal ([8a94fb54](8a94fb54))
* add ability to set elide config of header titles ([28e514f9](28e514f9), closes [#353](353))
* **StatusQ.Controls:** introduce StatusSwitchTabBar and StatusSwitchTabButton ([d449f0e9](d449f0e9), closes [#365](365))
* **StatusSearchPopup:** add function hook to allow timestamp formatting ([b45aba4b](b45aba4b), closes [#363](363))
* **qrc:** Add new icon needed for share modal ([38fb8f61](38fb8f61))
<a name=""></a>
## v0.7.0 (2021-08-30)
#### Features
* **StatusChatListAndCategories:** add drag and drop support for cate… (#349) ([a4178bd6](a4178bd6), closes [#227](227))
* **StatusChatListCategoryItem:** Add tooltips settings ([f9775e4d](f9775e4d))
* **StatusPopupMenu:** changed close policy ([2d8fd576](2d8fd576))
* **StatusWindowsTitleBar:** Add windows title bar ([faca4765](faca4765))
#### Bug Fixes
* **StatusAppThreePanelLayout:** increase minimum width in right panel ([7da4bdee](7da4bdee))
* **StatusBaseInput:** fix click to focus ([138458d1](138458d1))
* **StatusChatInfoButton:** Add self-calculated implicitWIdth and elide to texts ([7ef61ed3](7ef61ed3))
* **StatusListItem:** don't set width on title item ([ee5ec7b3](ee5ec7b3))
* **StatusModal:** ensure header and subtitles elide if needed ([503a07bf](503a07bf), closes [#256](256))
<a name=""></a>
## v0.6.0 (2021-08-24)
#### Features
* **StatusBaseInput:** introduce `dirty` and `pristine` properties ([ea340801](ea340801), closes [#327](327))
* **StatusChatList:** Add drag and drop support of list items ([c679854d](c679854d))
* **StatusLetterIdenticon:** Expose the text component ([d16719ad](d16719ad))
* **StatusListItem:** introduce itemId and titleId properties and their handlers ([01da7508](01da7508))
* **StatusSearchPopupMenuItem:**
* New APIs resetSearchSelection and setSearchSelection ([78edcb37](78edcb37))
* new API ([b133d10f](b133d10f))
#### Bug Fixes
* **StatusBaseInput:**
* ensure wrapmode works as expectefd in multiline mode ([0243852c](0243852c), closes [#324](324))
* expose cursorPosition ([ea6743a7](ea6743a7), closes [#323](323))
* **StatusChatListCategory:** emit original mouse event data in clicked signal ([5da9cb06](5da9cb06), closes [#333](333))
* **StatusInput:**
* ensure validation is performed on initialization ([4b107a0e](4b107a0e), closes [#326](326))
* remove recursive binding in label height ([51d8b55b](51d8b55b))
* **StatusSearchLocationMenu:** typo fix ([c306b682](c306b682))
* **StatusSearchPopup:** replace "#" character with "channel" icon ([2de261c4](2de261c4))
<a name=""></a>
## v0.5.0 (2021-08-16)
#### Bug Fixes
* **StatusChatToolBar:** Use updated StatusFlatRoundButton ([d24c2e62](d24c2e62))
#### Features
* **StatusBaseInput:** enforce `maximumLength` if it's set ([f635bad6](f635bad6))
* **StatusFlatRoundButton:** Adding tooltip to the button ([5a0489ba](5a0489ba))
* **StatusIcon:** add `play-filled` and `pause-filled` icons ([58a30716](58a30716), closes [#310](310))
* **StatusInput:** introduce new validator pipeline ([ba4f27f9](ba4f27f9), closes [#298](298))
* **StatusToolTip:** Adding an offset property ([ee429683](ee429683))
<a name=""></a>
## v0.4.0 (2021-08-12)
#### Bug Fixes
* **StatusAppNavBar:** add profile button (#311) ([2e1359c9](2e1359c9))
* **StatusChatListItem:** don't signal item selection if already selected ([b345c75a](b345c75a), closes [#303](303))
* **StatusPopupMenu:** ensure icon or image settings exist ([90aa9d76](90aa9d76), closes [#295](295))
#### Features
* **StatusListItem:** add enabled prop to StatusListItem (#302) ([7e03daea](7e03daea))
* **StatusQ.Theme.Core:** introduce theme colors for StatusChatInput (#299) ([556e5cca](556e5cca))
<a name=""></a>
## v0.3.0 (2021-07-27)
#### Features
* **Controls:** introduce `StatusInput` ([646c00bd](646c00bd), closes [#288](288))
* **Popups:** introduce `StatusMenuHeadline` component ([246bec0d](246bec0d))
* **StatusBaseInput:**
* add icon support ([c8e90349](c8e90349), closes [#242](242))
* add visual validity state ([e8cce72c](e8cce72c), closes [#287](287))
* add hover state visuals ([e1ebdaae](e1ebdaae), closes [#285](285))
* **StatusInput:** implement error message and charlimit APIs ([3cf53d02](3cf53d02), closes [#290](290))
* **StatusPopupMenu:** add support for letter identicons, identicons and images ([3c4c7f04](3c4c7f04), closes [#263](263))
* **StatusQ.Layout:** introducing StatusAppThreePanelLayout ([ffc6fcb4](ffc6fcb4), closes [#272](272))
* **sandbox:** make use of `StatusInput` in chat view ([731a0f8c](731a0f8c))
#### Bug Fixes
* **StatusAppThreePanelLayout:**
* limit right panel width to 300px ([d327c515](d327c515))
* limit center panel width to 300px ([762ff87b](762ff87b))
* hide right panel when closed ([61705990](61705990))
* **StatusBaseInput:**
* some minor style adjustment to adhere to design ([f16e857c](f16e857c))
* ensure input text is selectable with mouse ([ab303593](ab303593))
* ensure clear button has the correct color ([de1cec7e](de1cec7e), closes [#286](286))
* add visuals for disabled state ([35f20e33](35f20e33), closes [#284](284))
* expose text prop alias ([116ddfbb](116ddfbb))
* **StatusChatInfoButton:** ensure pin icon button is always rendered ([baefedb8](baefedb8), closes [#278](278))
* **StatusListItem:** ensure title area wraps text ([e3f79314](e3f79314))
* **StatusModal:** reset image/identicon width when loader state has changed ([e4e7ebe3](e4e7ebe3))
<a name=""></a>
## v0.2.0 (2021-07-21)
#### Bug Fixes
* **StatusChatListCategory:** ensures showActionButtons is taken into account ([52cb97e4](52cb97e4))
* **StatusPopupMenu:** ensure menu items elide ([d1f8e3e5](d1f8e3e5))
#### Features
* **StatusChatInfoToolBar:** make statusMenuButton public ([38c04cb9](38c04cb9))
* **StatusChatListAndCategories:** new API showPopupMenu ([9cfcdace](9cfcdace))
* **StatusChatListItem:** introduce muted badge visuals ([a404ba07](a404ba07), closes [#259](259))
* **StatusListItem:**
* support tertiaryTitle ([03131996](03131996), closes [#275](275))
* add identicon support ([214ef6b0](214ef6b0), closes [#261](261))
* **StatusModal:**
* introduce support for identicons and letter identicons ([fda9b71f](fda9b71f), closes [#269](269))
* render header and footer border by default ([18dbaadd](18dbaadd), closes [#265](265))
* **StatusToolTip:** expose `arrow` for fine-grain control ([51b7c71d](51b7c71d))
<a name=""></a>
## v0.1.0 (2021-07-15)
#### Bug Fixes
* Add missing .qml to resources, add qmlcache to gitignore ([71d0ef7f](71d0ef7f))
* make release build work ([1a7c2133](1a7c2133))
* introduce tiny icon versions and make use of them where needed ([a0fae6ab](a0fae6ab), closes [#128](128))
* update position of window to center, add traffic lights ([26aae6d0](26aae6d0))
* hover effect for StatusFlatRoundButton ([ee4a7c88](ee4a7c88))
* fix crash on removing title bar ([c94b801e](c94b801e))
* **Components:**
* more popup menu position fine-tuning ([22eaf6fa](22eaf6fa))
* add proper foreground color for StatusBadge ([6a92ff68](6a92ff68), closes [#59](59))
* **Controls:** ensure round buttons expose `hovered` state ([98b01946](98b01946), closes [#88](88))
* **Core:**
* add missing `rotation` property to `StatusIconSettings` ([341c0ddd](341c0ddd))
* don't rotate `ColorOverlay` of `StatusIcon` ([062fe42a](062fe42a), closes [#109](109))
* disable StatusIcon ColorOverlay if no color is supplied ([f1e34e39](f1e34e39))
* **Core.Theme:**
* ensure proper nav bar colors is used ([6c84fed7](6c84fed7))
* remove redundant theme properties ([75e87725](75e87725))
* ensure all font weight are available ([0a88e652](0a88e652), closes [#30](30))
* **README:** fix module name in readme docs ([f4b5b271](f4b5b271))
* **StatusAppNavBar:**
* don't rely on `undefined` property ([175d7a19](175d7a19))
* don't try to render chat button if it doesn't exist ([d690a0c5](d690a0c5))
* **StatusBadge:** use medium font weight for badge text ([cb9492ab](cb9492ab))
* **StatusBaseInput:** Fix focus area Closes: #241 ([f2d36d3d](f2d36d3d))
* **StatusChatInfoButton:**
* make component identicon aware ([7dcec0ca](7dcec0ca), closes [#228](228))
* prefix chat name with "#" if needed ([144ac69d](144ac69d), closes [#229](229))
* vertically center title if no subtitle is provided ([7b2030c6](7b2030c6), closes [#230](230))
* disable hover effects when sensor is disabled ([f7e38c9c](f7e38c9c), closes [#231](231))
* **StatusChatList:**
* ensure badge is also shown for one to one messages ([ac5c8452](ac5c8452))
* ensure popupMenu closeHandler don't break ([722d92c0](722d92c0), closes [#216](216))
* use fallback property to determine unread message count ([f7f217ed](f7f217ed))
* expect `model.color` instead of `iconColor` prop ([70332a3f](70332a3f))
* ensure component provide default `width` ([300536bc](300536bc), closes [#176](176))
* **StatusChatListAndCategories:**
* make chat list visibily flag work ([53d63a9b](53d63a9b), closes [#217](217))
* ensure chatItemUnmuted event is propagated ([a9ae426c](a9ae426c), closes [#219](219))
* ensure chat list receives popup menu ([23ddbc2e](23ddbc2e), closes [#218](218))
* **StatusChatListCategory:** only try open popup when supplied ([cbdaf128](cbdaf128), closes [#220](220))
* **StatusChatListCategoryItem:** don't render menubutton with no popup ([05fc97ca](05fc97ca), closes [#153](153))
* **StatusChatListItem:**
* ensure chat name elides when it's too long ([34df0f0d](34df0f0d), closes [#151](151))
* ensure public chat names are prefixed with '#' ([141872c2](141872c2), closes [#191](191))
* use proper font size for chat name ([ac80f7f7](ac80f7f7))
* **StatusChatToolBar:**
* ensure context menu as proper position ([3ea8da05](3ea8da05))
* ensure menu button stays highlighted ([90bad9e3](90bad9e3), closes [#125](125))
* **StatusFlatRoundButton:** use correct hover color ([82e34d64](82e34d64))
* **StatusListItem:**
* ensure icon background in secondary type works correctly ([34b35318](34b35318))
* various fixes w.r.t. sensor, icon size etc ([e5e96af5](e5e96af5))
* **StatusMenuSeparator:** ensure height is 0 when invisible or disabled ([fd7a5530](fd7a5530), closes [#212](212))
* **StatusModal:** ensure modal footer uses correct theme color ([de2c36d0](de2c36d0))
* **StatusModalHeader:** ensure header has enough height for children ([75b2f508](75b2f508), closes [#185](185))
* **StatusNavBarTabButton:**
* fix popup menu positioning ([705f1402](705f1402))
* ensure click signal is emitted when not menu is provided ([040da2a4](040da2a4))
* don't change checked state implicitly ([b1fe73ba](b1fe73ba))
* **StatusNavigationListItem:** make click event work again ([c5ecfe08](c5ecfe08))
* **StatusQ.Core.Theme:** use correct dropshadow color in dark theme ([70e17b05](70e17b05))
* **StatusRadioButton:** ensure control label as correct color ([1cb0c1d3](1cb0c1d3), closes [#51](51))
* **StatusRoundedImage:** ensure images are scaled and positioned properly ([3d0688b7](3d0688b7), closes [#172](172))
* **sandbox:** make scrollview content height grow with content ([2f09179f](2f09179f))
#### Features
* can be used on tablets (#146) ([63be0144](63be0144))
* add StatusSwitch ([52998d68](52998d68), closes [#12](12))
* Add buttons components ([91b8d317](91b8d317))
* Set up catalog app (sandbox) ([3528b2ff](3528b2ff), closes [#5](5))
* introduce theming capability ([608fdbda](608fdbda), closes [#3](3))
* **Components:**
* introduce `StatusContactRequestsIndicatorListItem` ([baa663ce](baa663ce), closes [#175](175))
* introduce `StatusListSectionHeadline` ([507703af](507703af), closes [#164](164))
* introduce `StatusNavigationPanelHeadline` ([40617cd7](40617cd7), closes [#162](162))
* introduce `StatusChatListAndCategories` component ([7bca2745](7bca2745), closes [#133](133))
* introduce `StatusChatInfoToolBar` component ([454e73a8](454e73a8), closes [#141](141))
* introduce `StatusChatListCategory` ([f4d211ac](f4d211ac), closes [#123](123))
* introduce `StatusChatListCategoryItem` ([916dcc9c](916dcc9c), closes [#117](117))
* introduce `StatusChatList` ([1e558b59](1e558b59), closes [#100](100))
* Add StatusSlider ([c0ad32a1](c0ad32a1))
* introduce `StatusChatToolBar` ([a4421b5b](a4421b5b), closes [#80](80))
* introduce `StatusDescriptionListItem` ([4a25ca02](4a25ca02))
* introduce StatusNavigationListItem ([63275668](63275668), closes [#72](72))
* introduce StatusChatListItem ([b40d427d](b40d427d), closes [#65](65))
* introduce `StatusListItem` component ([a3fe02d0](a3fe02d0), closes [#19](19))
* introduce `StatusRoundIcon` component ([8639e8cc](8639e8cc), closes [#53](53))
* introduce StatusBadge component ([a89e218a](a89e218a), closes [#15](15))
* introduce StatusRoundedImage ([09876c1f](09876c1f), closes [#32](32))
* introduce StatusLetterIdenticon ([b0155313](b0155313), closes [#28](28))
* introduce StatusLoadingIndicator ([3ce1138b](3ce1138b), closes [#7](7))
* **Controls:**
* introduce StatusBaseInput ([13217604](13217604))
* introduce `StatusChatInfoButton` ([8a799182](8a799182))
* introduce StatusNavBarTabButton ([ea118d71](ea118d71), closes [#17](17))
* introduce StatusToolTip component ([f3a6c9f4](f3a6c9f4), closes [#14](14))
* **Core:**
* introduce StatusIconBackgroundSettings ([a4e62fb2](a4e62fb2))
* introduce `StatusImageSettings` ([d9529883](d9529883))
* introduce StatusBaseText component ([c7d533af](c7d533af), closes [#20](20))
* **Core.Controls:** introduce StatusIconTabButton component ([b4b1f472](b4b1f472), closes [#16](16))
* **Core.Theme:** expose solid black and white on `ThemePalette` ([996ceb2b](996ceb2b))
* **Layout:**
* introduce `StatusAppTwoPanelLayout` ([af3ca15b](af3ca15b))
* introduce StatusAppLayout component ([554998dc](554998dc))
* introduce StatusAppNavBar ([0dfd39af](0dfd39af), closes [#18](18))
* **Popups:**
* Add StatusModal ([e49b58b9](e49b58b9))
* introduce StatusModalDivider ([148c30b9](148c30b9))
* Add StatusModalFooter ([9c2a5830](9c2a5830))
* Add status modal header ([fa9bb7ad](fa9bb7ad))
* **StatusBadge:** introduce `borderColor` and `hoverBorderColor` ([041c11fb](041c11fb))
* **StatusBaseInput:** Add focused state Closes: #240 ([19349881](19349881))
* **StatusChatList:**
* expose hook to lazily calculate chat item names ([a664f635](a664f635))
* introduce `profileImageFn` property ([cfacd5be](cfacd5be), closes [#174](174))
* introduce `popupMenu` property ([a6262f0a](a6262f0a), closes [#171](171))
* introduce `filterFn` and `categoryId` ([cb078134](cb078134), closes [#154](154))
* **StatusChatListCategory:**
* apply chat list filter and expose category id in popup menu ([45775518](45775518))
* introduce flag to show/hide buttons ([9982c3df](9982c3df), closes [#150](150))
* **StatusChatListCategoryItem:** introduce `highlighted` property ([72bdd2d9](72bdd2d9))
* **StatusChatListCategoryItemButton:** introduce `highglighted` property ([645a3b79](645a3b79))
* **StatusChatListItem:**
* add `highlighted` property ([44343d38](44343d38), closes [#178](178))
* accept right clicks ([1f3aa0bb](1f3aa0bb), closes [#131](131))
* **StatusChatToolBar:**
* add tooltips to action buttons ([86da901e](86da901e), closes [#244](244))
* add members and search button ([e93dab2b](e93dab2b), closes [#243](243))
* **StatusFlatRoundButton:**
* introduce `highlighted` color for secondary type ([58e8f1cd](58e8f1cd), closes [#245](245))
* support icon rotation ([3a7a338d](3a7a338d))
* **StatusIcon:** Improvement of Icons ([7bc7df8d](7bc7df8d))
* **StatusIconTabButton:** introduce image loading state and fallback ([9b99d8a9](9b99d8a9), closes [#37](37))
* **StatusListItem:**
* add `Danger` type support ([8155d9a2](8155d9a2), closes [#248](248))
* support letter identicons ([531e54f2](531e54f2), closes [#239](239))
* introduce primary and secondary types ([146218e0](146218e0))
* **StatusModal:** expose loaded content ([bd383e87](bd383e87), closes [#237](237))
* **StatusNavBarTabButton:** introduce `popupMenu` property ([5e8242df](5e8242df), closes [#137](137))
* **StatusPopupMenu:**
* introduce `openHandler` ([2427fa2d](2427fa2d))
* make menu items invisible when disabled ([c9bc9bab](c9bc9bab), closes [#135](135))
* introduce `closeHandler` hook ([fb51e9d7](fb51e9d7))
* **StatusQ.Popups:** introduce StatusPopupMenu component ([09a6f418](09a6f418), closes [#96](96))
* **StatusRoundButton:** add `highlighted` and `icon.rotation` props ([7c16a9bd](7c16a9bd))
* **StatusRoundIcon:** enable `icon.color` support ([70043c5b](70043c5b))
* **StatusRoundedImage:**
* introduce identicon support ([7a2648f6](7a2648f6), closes [#173](173))
* add loading indicator option ([44b275f2](44b275f2), closes [#56](56))
* **sandbox:**
* introduce first part of profile view for reference app ([4588d597](4588d597))
* introduce first version of reference app ([202fb886](202fb886))
-1
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: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.3 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 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
*/
-41
View File
@@ -1,41 +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{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}
\endlist
*/
-47
View File
@@ -1,47 +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{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}
\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"
}
]
}
}
}
@@ -85,8 +85,7 @@ GridLayout {
StatusChatListItem {
name: "has-mentions"
type: StatusChatListItem.Type.PublicChat
hasUnreadMessages: true
notificationsCount: 1
badge.value: 1
}
StatusChatListItem {
@@ -96,20 +95,11 @@ GridLayout {
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
@@ -117,24 +107,6 @@ GridLayout {
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"
}
@@ -144,45 +116,19 @@ GridLayout {
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"
@@ -284,56 +230,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
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
}
StatusDescriptionListItem {
title: "Title"
subTitle: "Subtitle"
}
StatusDescriptionListItem {
title: "Title"
subTitle: "Subtitle"
value: "None"
sensor.enabled: true
}
StatusDescriptionListItem {
title: "Title"
subTitle: "Subtitle"
@@ -346,50 +247,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
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
ringSettings.totalRingUnits: 25
}
StatusMemberListItem {
nickName: "carmen.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
}
}
+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"
}
}
}
}
-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
}
}
}
}
}
}
-367
View File
@@ -1,367 +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()
}
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
}
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"
}
]
}
}
-215
View File
@@ -1,215 +0,0 @@
import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtQml.Models 2.2
import QtGraphicalEffects 1.0
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
implicitHeight: 44
toLabelText: qsTr("To: ")
warningText: qsTr("5 USER LIMIT REACHED")
//simulate model filtering, TODO this
//makes more sense to be provided by the backend
//figure how real implementation should look like
property ListModel sortedList: ListModel { }
onTextChanged: {
sortedList.clear();
if (text !== "") {
for (var i = 0; i < contactsModel.count; i++ ) {
var entry = contactsModel.get(i);
if (entry.name.toLowerCase().includes(text.toLowerCase())) {
sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
"icon": entry.icon, "isIdenticon": entry.isIdenticon,
"onlineStatus": entry.onlineStatus});
userListView.model = sortedList;
}
}
} else {
userListView.model = contactsModel;
}
}
}
StatusButton {
implicitHeight: 44
enabled: (tagSelector.namesModel.count > 0)
text: "Confirm"
}
}
contentItem: Item {
anchors.fill: parent
anchors.topMargin: headerRow.height + 16
Item {
anchors.fill: parent
visible: (contactsModel.count > 0)
StatusBaseText {
id: contactsLabel
font.pixelSize: 15
anchors.left: parent.left
anchors.leftMargin: 8
color: Theme.palette.baseColor1
text: qsTr("Contacts")
}
Control {
width: 360
anchors {
top: contactsLabel.bottom
topMargin: 8//Style.current.padding
bottom: !statusPopupMenuBackgroundContent.visible ? parent.bottom : undefined
bottomMargin: 20//Style.current.bigPadding
}
height: 16 + (!statusPopupMenuBackgroundContent.visible ? parent.height :
(((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64)))
x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) &&
((tagSelector.textEdit.x + 24 + statusPopupMenuBackgroundContent.width) < parent.width))
? (tagSelector.textEdit.x + 24) : 0
background: Rectangle {
id: statusPopupMenuBackgroundContent
anchors.fill: parent
visible: (tagSelector.sortedList.count > 0)
color: Theme.palette.statusPopupMenu.backgroundColor
radius: 8
layer.enabled: true
layer.effect: DropShadow {
width: statusPopupMenuBackgroundContent.width
height: statusPopupMenuBackgroundContent.height
x: statusPopupMenuBackgroundContent.x
visible: statusPopupMenuBackgroundContent.visible
source: statusPopupMenuBackgroundContent
horizontalOffset: 0
verticalOffset: 4
radius: 12
samples: 25
spread: 0.2
color: Theme.palette.dropShadow
}
}
contentItem: ListView {
id: userListView
anchors.fill: parent
anchors.topMargin: 8
anchors.bottomMargin: 8
clip: true
model: contactsModel
ScrollBar.vertical: ScrollBar {
policy: ScrollBar.AsNeeded
}
boundsBehavior: Flickable.StopAtBounds
delegate: Item {
id: wrapper
anchors.right: parent.right
anchors.left: parent.left
height: 64
property bool hovered: false
Rectangle {
id: rectangle
anchors.fill: parent
anchors.rightMargin: 8
anchors.leftMargin: 8
radius: 8
visible: (tagSelector.sortedList.count > 0)
color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
}
StatusSmartIdenticon {
id: contactImage
anchors.left: parent.left
anchors.leftMargin: 16//Style.current.padding
anchors.verticalCenter: parent.verticalCenter
name: model.name
icon: StatusIconSettings {
width: 28
height: 28
letterSize: 15
}
image: StatusImageSettings {
width: 28
height: 28
source: model.icon
isIdenticon: model.isIdenticon
}
}
StatusBaseText {
id: contactInfo
text: model.name
anchors.right: parent.right
anchors.rightMargin: 8
anchors.left: contactImage.right
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
elide: Text.ElideRight
color: Theme.palette.directColor1
font.weight: Font.Medium
font.pixelSize: 15
}
MouseArea {
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
hoverEnabled: true
onEntered: {
wrapper.hovered = true;
}
onExited: {
wrapper.hovered = false;
}
onClicked: {
tagSelector.insertTag(model.name, model.publicId);
}
}
}
}
}
Component.onCompleted: {
if (visible) {
tagSelector.textEdit.forceActiveFocus();
}
}
}
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()
}
]
}
-194
View File
@@ -1,194 +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: parent.width
height: searchInput.height
anchors.top: headline.bottom
anchors.topMargin: 16
anchors.right: parent.right
anchors.rightMargin: 8
StatusBaseInput {
id: searchInput
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.leftMargin: 17
implicitHeight: 36
topPadding: 8
bottomPadding: 0
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
width: parent.width
spacing: 8
StatusContactRequestsIndicatorListItem {
anchors.horizontalCenter: parent.horizontalCenter
title: "Contact requests"
requestsCount: 3
sensor.onClicked: demoContactRequestsModal.open()
}
StatusChatList {
anchors.horizontalCenter: parent.horizontalCenter
model: Models.demoChatListItems
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.dummyContactsModel
}
}
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
}
}
}
}
}
-275
View File
@@ -1,275 +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.userName
chatKey: model.chatKey
trustIndicator: model.trustIndicator
isMutualContact: model.isMutualContact
image.source: model.source
image.isIdenticon: model.isIdenticon
isOnline: model.isOnline
ringSettings.ringSpecModel: model.ringSpecModel
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
ringSettings.totalRingUnits: model.totalRingUnits
}
}
}
}
@@ -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
-1
View File
@@ -1 +0,0 @@
singleton Models 1.0 Models.qml
+105 -234
View File
@@ -12,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,33 +31,11 @@ StatusWindow {
Component.onCompleted: {
Theme.palette = lightTheme
apiDocsButton.checked = true
rootWindow.updatePosition();
}
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);
}
}
StatusAppLayout {
id: appLayout
anchors.fill: parent
@@ -67,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 {
@@ -124,14 +101,6 @@ StatusWindow {
id: libraryDocumentationCmp
StatusAppTwoPanelLayout {
id: mainPageView
function page(name) {
viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
}
function control(name) {
viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
}
leftPanel: Item {
anchors.fill: parent
@@ -151,147 +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: "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);
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);
selected: page.sourceComponent == statusModalComponent
onClicked: page.sourceComponent = statusModalComponent
}
}
}
@@ -300,10 +178,12 @@ StatusWindow {
rightPanel: Item {
id: rightPanel
anchors.fill: parent
ScrollView {
anchors.fill: parent
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 {
@@ -311,17 +191,13 @@ StatusWindow {
width: rightPanel.width
anchors.top: parent.top
anchors.topMargin: 64
height: Math.max(rootWindow.height, viewLoader.height + 128)
height: Math.max(rootWindow.height, page.height + 128)
scale: rootWindow.factor
Loader {
id: viewLoader
id: page
active: true
anchors.centerIn: parent
source: mainPageView.control("Icons")
onSourceChanged: {
if (source.toString().includes("Icons")) {
item.iconColor = Theme.palette.primaryColor1;
}
}
sourceComponent: iconsComponent
}
}
}
@@ -352,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
@@ -409,27 +301,6 @@ StatusWindow {
anchors.top: parent.top
anchors.margins: 13
visible: Qt.platform.os == "osx"
onClose: {
rootWindow.close()
}
onMinimised: {
rootWindow.showMinimized()
}
onMaximized: {
rootWindow.toggleFullScreen()
}
}
StatusWindowsTitleBar {
anchors.top: parent.top
width: parent.width
visible: Qt.platform.os == "windows"
onClose: {
rootWindow.close()
}
@@ -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"
}
}
-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")
}
}
}
}
-133
View File
@@ -1,133 +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
}
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: "Label"
input.placeholderText: "Input width component (right side)"
input.component: 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
}
}
@@ -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
}
}
}
}
@@ -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("5 USER LIMIT REACHED")
}
}
-40
View File
@@ -1,40 +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":""},
{"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
{"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
{"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
]
delegate: StatusToastMessage {
primaryText: modelData.title
secondaryText: modelData.subTitle
icon.name: modelData.icon
loading: modelData.loading
type: modelData.type
linkUrl: modelData.url
onLinkActivated: {
Qt.openUrlExternally(link);
}
//simulate open
Component.onCompleted: {
open = true;
}
}
}
}
}
@@ -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.accountColors
}
}
-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
}
}
+12 -31
View File
@@ -1,35 +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/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>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>Layout.qml</file>
<file>Popups.qml</file>
</qresource>
</RCC>
</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
+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
}
}
}
@@ -11,7 +11,6 @@ Item {
implicitHeight: 56
property alias chatInfoButton: statusChatInfoButton
property alias menuButton: statusMenuButton
property Component popupMenu
signal chatInfoButtonClicked()
@@ -28,20 +27,18 @@ Item {
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 5
anchors.right: (implicitWidth > parent.width - 50) ? statusMenuButton.left : undefined
anchors.rightMargin: 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
@@ -52,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
}
@@ -90,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 {
@@ -99,7 +96,7 @@ Item {
active: !!statusChatInfoToolBar.popupMenu
onLoaded: {
popupMenuSlot.item.closeHandler = function () {
statusMenuButton.state = "default"
menuButton.state = "default"
}
}
}
+61 -174
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,18 +12,17 @@ Column {
width: 288
property string categoryId: ""
property var model: []
property bool draggableItems: false
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) {
@@ -34,180 +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
icon.color: model.color
image.isIdenticon: model.isIdenticon
image.source: model.icon
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: "Add channel inside category"
}
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
text: "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
}
@@ -69,155 +53,34 @@ Item {
StatusChatList {
id: statusChatList
anchors.horizontalCenter: parent.horizontalCenter
visible: statusChatList.model.count > 0
onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
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,23 +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
}
statusChatListCategory.opened = !opened;
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
@@ -68,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
@@ -60,15 +63,7 @@ StatusListItem {
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)
}
]
}
+93 -83
View File
@@ -1,8 +1,4 @@
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.Components 0.1
@@ -11,31 +7,19 @@ import StatusQ.Controls 0.1
Rectangle {
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
letterSize: 15
}
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()
@@ -59,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: statusChatListItem.clicked(mouse)
StatusSmartIdenticon {
Loader {
id: identicon
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
image: statusChatListItem.image
icon: statusChatListItem.icon
name: statusChatListItem.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 {
@@ -96,30 +111,30 @@ Rectangle {
width: 14
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
opacity: {
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
return 0.4
}
return statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.selected ||
statusChatListItem.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 (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"
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"
}
}
}
@@ -128,39 +143,48 @@ 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: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
!statusChatListItem.name.startsWith("#") ?
"#" + statusChatListItem.name :
statusChatListItem.name)
text: statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
!statusChatListItem.name.startsWith("#") ?
"#" + statusChatListItem.name :
statusChatListItem.name
elide: Text.ElideRight
color: {
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
return Theme.palette.directColor5
}
return statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.selected ||
statusChatListItem.highlighted ||
statusChatListItem.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: !statusChatListItem.muted &&
(statusChatListItem.hasUnreadMessages ||
statusChatListItem.notificationsCount > 0 ||
statusChatListItem.highlightWhenCreated ||
statusBadge.visible) ? Font.Bold : Font.Medium
font.weight: statusChatListItem.hasMention ||
statusChatListItem.hasUnreadMessages ||
statusBadge.visible ? Font.Bold : Font.Medium
font.pixelSize: 15
}
StatusBadge {
id: statusBadge
anchors.right: mutedIcon.visible ? mutedIcon.left : parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
border.width: 4
border.color: color
visible: statusBadge.value > 0
}
StatusIcon {
id: mutedIcon
anchors.right: statusBadge.visible ? statusBadge.left : parent.right
anchors.right: parent.right
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
width: 14
@@ -171,7 +195,7 @@ Rectangle {
MouseArea {
id: mutedIconSensor
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusChatListItem.unmute()
}
@@ -181,19 +205,5 @@ Rectangle {
visible: mutedIconSensor.containsMouse
}
}
StatusBadge {
id: statusBadge
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: 8
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
border.width: 4
border.color: color
value: statusChatListItem.notificationsCount
visible: statusChatListItem.notificationsCount > 0
}
}
}
+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: "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: "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: "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: "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
}
}
}
}
@@ -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
}
}
}
@@ -1,227 +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 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
active: 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; active: true}
},
State {
name: "COLLAPSED"
PropertyChanges {target: expandImage; icon: "chevron-down"}
PropertyChanges {target: statusExpandableItem; height: 82}
PropertyChanges {target: expandableRegion; active: false}
}
]
transitions: [
Transition {
from: "COLLAPSED"
to: "EXPANDED"
NumberAnimation { properties: "height"; duration: 200 }
},
Transition {
from: "EXPANDED"
to: "COLLAPSED"
NumberAnimation { properties: "height"; duration: 200 }
}
]
}
@@ -5,7 +5,6 @@ import StatusQ.Core.Theme 0.1
Rectangle {
id: statusLetterIdenticon
property alias identiconText: identiconText
property string name
property int letterSize: 21
@@ -15,10 +14,7 @@ Rectangle {
radius: width / 2
StatusBaseText {
id: identiconText
text: ((statusLetterIdenticon.name.charAt(0) === "#")
|| (statusLetterIdenticon.name.charAt(0) === "@") ?
statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
text: (statusLetterIdenticon.name.charAt(0) == "#" ? statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
font.weight: Font.Bold
font.pixelSize: statusLetterIdenticon.letterSize
color: Qt.rgba(255, 255, 255, 0.7)
+61 -162
View File
@@ -1,6 +1,4 @@
import QtQuick 2.13
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
@@ -9,90 +7,55 @@ import StatusQ.Controls 0.1
Rectangle {
id: statusListItem
property string itemId: ""
property string titleId: ""
implicitWidth: 448
implicitHeight: 64
enum Type {
Primary,
Secondary
}
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Primary ?
Theme.palette.baseColor2 :
Theme.palette.statusListItem.secondaryHoverBackgroundColor
}
return Theme.palette.statusListItem.backgroundColor
}
radius: 8
property string title: ""
property string titleAsideText: ""
property string subTitle: ""
property string tertiaryTitle: ""
property string label: ""
property real leftPadding: 16
property real rightPadding: 16
property bool enabled: true
property bool highlighted: false
property bool propagateTitleClicks: true
property int type: StatusListItem.Type.Primary
property list<Item> components
property StatusIconSettings icon: StatusIconSettings {
height: isLetterIdenticon ? 40 : 20
width: isLetterIdenticon ? 40 : 20
height: 20
width: 20
rotation: 0
isLetterIdenticon: false
letterSize: 21
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
color: {
if (sensor.containsMouse) {
return type === StatusListItem.Type.Secondary ||
type === StatusListItem.Type.Danger ? "transparent" :
Theme.palette.primaryColor3
}
return type === StatusListItem.Type.Danger ?
Theme.palette.dangerColor3 : Theme.palette.primaryColor3
}
color: sensor.containsMouse && type === StatusListItem.Type.Secondary ?
"transparent" :
Theme.palette.primaryColor3
}
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
isIdenticon: false
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
totalRingUnits: 1
initalAngleRad: 0
ringPxSize: 1.5
}
property string label: ""
property int type: StatusListItem.Type.Primary
property alias sensor: sensor
property alias badge: statusListItemBadge
property alias statusListItemIcon: iconOrImage
property alias statusListItemTitle: statusListItemTitle
property alias statusListItemTitleAside: statusListItemTitleAsideText
property alias statusListItemTitleIcons: titleIconsRow
property alias statusListItemTitleArea: statusListItemTitleArea
property alias statusListItemSubTitle: statusListItemSubTitle
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
signal clicked(string itemId)
signal titleClicked(string titleId)
enum Type {
Primary,
Secondary,
Danger
}
implicitWidth: 448
implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
color: {
if (sensor.containsMouse || statusListItem.highlighted) {
switch(type) {
case StatusListItem.Type.Primary:
return Theme.palette.baseColor2
case StatusListItem.Type.Secondary:
return Theme.palette.statusListItem.secondaryHoverBackgroundColor
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor3
}
}
return Theme.palette.statusListItem.backgroundColor
}
radius: 8
property list<Item> components
onComponentsChanged: {
if (components.length) {
@@ -105,137 +68,72 @@ Rectangle {
MouseArea {
id: sensor
enabled: statusListItem.enabled
anchors.fill: parent
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
preventStealing: true
onClicked: {
statusListItem.clicked(statusListItem.itemId)
}
StatusSmartIdenticon {
Loader {
id: iconOrImage
anchors.left: parent.left
anchors.leftMargin: statusListItem.leftPadding
anchors.top: parent.top
anchors.topMargin: 12
image: statusListItem.image
icon: statusListItem.icon
name: statusListItem.title
active: statusListItem.icon.isLetterIdenticon ||
!!statusListItem.icon.name ||
!!statusListItem.image.source.toString()
badge.border.color: statusListItem.color
ringSettings: statusListItem.ringSettings
anchors.verticalCenter: parent.verticalCenter
sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
}
Component {
id: statusRoundedIcon
StatusRoundIcon {
icon.width: statusListItem.icon.width
icon.height: statusListItem.icon.height
icon.name: statusListItem.icon.name
icon.rotation: statusListItem.icon.rotation
color: statusListItem.icon.background.color
width: statusListItem.icon.background.width
height: statusListItem.icon.background.height
}
}
Component {
id: statusRoundedImage
StatusRoundedImage {
image.source: statusListItem.image.source
image.height: statusListItem.image.height
image.width: statusListItem.image.width
}
}
Item {
id: statusListItemTitleArea
function getStatusListItemTitleAnchorsRight() {
let isIconsRowVisible = false
if(titleIconsRow.item) {
isIconsRowVisible = true//titleIconsRow.item.visible
}
return !statusListItem.titleAsideText && !isIconsRowVisible ? statusListItemTitleArea.right : undefined
}
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
anchors.leftMargin: statusListItem.leftPadding
anchors.rightMargin: statusListItem.rightPadding
anchors.verticalCenter: parent.verticalCenter
height: childrenRect.height
height: statusListItemTitle.height + (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0)
StatusBaseText {
id: statusListItemTitle
text: statusListItem.title
font.pixelSize: 15
height: visible ? contentHeight : 0
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
anchors.left: parent.left
anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
color: {
if (!statusListItem.enabled) {
return Theme.palette.baseColor1
}
switch (statusListItem.type) {
case StatusListItem.Type.Primary:
return Theme.palette.directColor1
case StatusListItem.Type.Secondary:
return Theme.palette.primaryColor1
case StatusListItem.Type.Danger:
return Theme.palette.dangerColor1
if (statusListItem.type === StatusListItem.Type.Primary) {
return Theme.palette.directColor1
}
return Theme.palette.primaryColor1
}
MouseArea {
anchors.fill: parent
cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
hoverEnabled: true
propagateComposedEvents: statusListItem.propagateTitleClicks
onClicked: {
statusListItem.titleClicked(statusListItem.titleId)
mouse.accepted = false
}
}
}
StatusBaseText {
id: statusListItemTitleAsideText
anchors.left: statusListItemTitle.right
anchors.leftMargin: 4
anchors.verticalCenter: statusListItemTitle.verticalCenter
text: statusListItem.titleAsideText
font.pixelSize: 10
color: Theme.palette.baseColor1
visible: !!statusListItem.titleAsideText
}
Loader {
id: titleIconsRow
anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
anchors.verticalCenter: statusListItemTitle.verticalCenter
anchors.leftMargin: 4
}
StatusBaseText {
id: statusListItemSubTitle
anchors.top: statusListItemTitle.bottom
width: parent.width
text: statusListItem.subTitle
font.pixelSize: 15
color: !statusListItem.enabled || !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
height: visible ? contentHeight : 0
visible: !!statusListItem.subTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
StatusBaseText {
id: statusListItemTertiaryTitle
anchors.top: statusListItemSubTitle.bottom
width: parent.width
height: visible ? contentHeight : 0
text: statusListItem.tertiaryTitle
color: Theme.palette.baseColor1
font.pixelSize: 13
visible: !!statusListItem.tertiaryTitle
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
}
StatusListItemBadge {
id: statusListItemBadge
anchors.top: statusListItemTertiaryTitle.bottom
width: contentItem.width
implicitHeight: visible ? 22 : 0
visible: !!statusListItem.subTitle
}
}
StatusBaseText {
id: statusListItemLabel
anchors.verticalCenter: parent.verticalCenter
anchors.right: statusListItemComponentsSlot.left
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
@@ -246,6 +144,7 @@ Rectangle {
visible: !!statusListItem.label
}
Row {
id: statusListItemComponentsSlot
anchors.right: parent.right
@@ -1,80 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Control {
id: root
implicitWidth: contentItem.width
implicitHeight: visible ? 22 : 0
visible: !!root.primaryText
property string primaryText: ""
property string secondaryText: ""
property StatusImageSettings image: StatusImageSettings {
height: 16
width: 16
isIdenticon: false
}
property StatusIconSettings icon: StatusIconSettings {
height: 16
width: 16
isLetterIdenticon: false
background: StatusIconBackgroundSettings {}
color: "transparent"
}
background: Rectangle {
anchors.fill: parent
color: "transparent"
radius: 11
border.color: Theme.palette.directColor7
}
contentItem: Item {
id: contentItem
width: (contentItemRow.width + 10)
height: parent.height
RowLayout {
id: contentItemRow
anchors.centerIn: parent
anchors.horizontalCenterOffset: -spacing
spacing: 2
StatusRoundedImage {
implicitWidth: root.image.width
implicitHeight: root.image.height
visible: !root.icon.isLetterIdenticon
image.source: root.image.source
border.color: Theme.palette.baseColor1
border.width: root.image.isIdenticon ? 1 : 0
}
StatusLetterIdenticon {
implicitWidth: root.icon.width
implicitHeight: root.icon.width
letterSize: 11
visible: root.icon.isLetterIdenticon
color: root.icon.color
name: root.primaryText
}
StatusBaseText {
font.weight: Font.Medium
color: Theme.palette.baseColor1
text: root.primaryText
}
StatusIcon {
Layout.alignment: Qt.AlignVCenter
visible: !!root.secondaryText
color: Theme.palette.baseColor1
icon: "next"
}
StatusBaseText {
font.weight: Font.Medium
color: Theme.palette.baseColor1
visible: !!root.secondaryText
text: root.secondaryText
}
}
}
}
@@ -1,63 +0,0 @@
import QtQuick 2.0
import StatusQ.Core.Theme 0.1
import StatusQ.Core 0.1
StatusListItem {
id: root
property string nickName: ""
property string userName: ""
property string chatKey: ""
property bool isMutualContact: false
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
property bool isOnline: false
// Subtitle composition:
function composeSubtitile() {
var compose = ""
if(root.userName !== "")
compose = "(" + root.userName + ")"
if(compose !== "" && root.chatKey !== "")
// Composition
compose += " • " + composeShortKeyChat(root.chatKey)
else if(root.chatKey !== "")
compose = composeShortKeyChat(root.chatKey)
return compose
}
// Short keychat composition:
function composeShortKeyChat(chatKey) {
return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
}
// root object settings:
title: root.nickName
statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
isMutualContact: root.isMutualContact
trustIndicator: root.trustIndicator
}
subTitle: composeSubtitile()
statusListItemSubTitle.font.pixelSize: 10
icon.isLetterIdenticon: !root.image.source.toString()
statusListItemIcon.badge.visible: true
statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
// Default sizes / positions by design
implicitWidth: 256
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
leftPadding: 8
image.width: 32
image.height: 32
icon.width: 32
icon.height: 32
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
statusListItemIcon.anchors.top: undefined
statusListItemIcon.badge.border.width: 2
statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
}
-200
View File
@@ -1,200 +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 "./private/statusMessage"
Rectangle {
id: statusMessage
enum ContentType {
Unknown = 0,
Text = 1,
Emoji = 2,
Image = 3,
Sticker = 4,
Audio = 5,
Transaction = 6,
Invitation = 7
}
property alias messageHeader: messageHeader
property alias quickActions:quickActionsPanel.quickActions
property alias statusChatInput: editComponent.inputComponent
property alias linksComponent: linksLoader.sourceComponent
property alias footerComponent: footer.sourceComponent
property alias timestamp: messageHeader.timestamp
property string resendText: ""
property string cancelButtonText: ""
property string saveButtonText: ""
property string loadingImageText: ""
property string errorLoadingImageText: ""
property string audioMessageInfoText: ""
property string pinnedMsgInfoText: ""
property bool isAppWindowActive: false
property bool editMode: false
property bool isAReply: false
property StatusMessageDetails messageDetails: StatusMessageDetails {}
property StatusMessageDetails replyDetails: StatusMessageDetails {}
signal profilePictureClicked()
signal senderNameClicked()
signal editCompleted(var newMsgText)
signal replyProfileClicked()
signal stickerLoaded()
signal imageClicked(var imageSource)
signal resendClicked()
height: childrenRect.height
color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 : Theme.palette.baseColor2) : messageDetails.hasMention ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
HoverHandler {
id: hoverHandler
}
ColumnLayout {
id: messageLayout
width: parent.width
StatusMessageReply {
Layout.fillWidth: true
visible: isAReply
replyDetails: statusMessage.replyDetails
onReplyProfileClicked: statusMessage.replyProfileClicked()
audioMessageInfoText: statusMessage.audioMessageInfoText
}
RowLayout {
spacing: 8
Layout.fillWidth: true
StatusSmartIdenticon {
id: profileImage
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
Layout.leftMargin: 16
image: messageDetails.profileImage
name: messageHeader.displayName
MouseArea {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
onClicked: statusMessage.profilePictureClicked()
}
}
Column {
spacing: 4
Layout.alignment: Qt.AlignTop
Layout.topMargin: 10
Layout.fillWidth: true
StatusPinMessageDetails {
visible: messageDetails.isPinned && !editMode
pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
pinnedBy: messageDetails.pinnedBy
}
StatusMessageHeader {
id: messageHeader
width: parent.width
displayName: messageDetails.displayName
secondaryName: messageDetails.secondaryName
tertiaryDetail: messageDetails.chatID
isMutualContact: messageDetails.isMutualContact
trustIndicator: messageDetails.trustIndicator
resendText: statusMessage.resendText
showResendButton: messageDetails.hasExpired && messageDetails.amISender
onClicked: statusMessage.senderNameClicked()
onResendClicked: statusMessage.resendClicked()
visible: !editMode
}
Loader {
active: !editMode && !!messageDetails.messageText
width: parent.width
visible: active
sourceComponent: StatusTextMessage {
width: parent.width
textField.text: messageDetails.messageText
}
}
Loader {
active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
visible: active
sourceComponent: StatusImageMessage {
source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
onClicked: statusMessage.imageClicked()
shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
}
}
StatusSticker {
visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
image.source: messageDetails.messageContent
onLoaded: statusMessage.stickerLoaded()
}
Loader {
active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
visible: active
sourceComponent: StatusAudioMessage {
audioSource: messageDetails.messageContent
hovered: hoverHandler.hovered
audioMessageInfoText: statusMessage.audioMessageInfoText
}
}
Loader {
id: linksLoader
active: !!linksLoader.sourceComponent
visible: active
}
Loader {
id: transactionBubbleLoader
active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
visible: active
}
Loader {
id: invitationBubbleLoader
active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
visible: active
}
StatusEditMessage {
id: editComponent
width: parent.width
msgText: messageDetails.messageText
visible: editMode
saveButtonText: statusMessage.saveButtonText
cancelButtonText: statusMessage.cancelButtonText
onCancelEditClicked: editMode = false
onEditCompleted: {
editMode = false
statusMessage.editCompleted(newMsgText)
}
}
StatusBaseText {
id: retryLbl
color: Theme.palette.dangerColor1
text: statusMessage.resendText
font.pixelSize: 12
visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusMessage.resendClicked()
}
}
Loader {
id: footer
active: sourceComponent && !editMode
visible: active
}
}
}
}
StatusMessageQuickActions {
id: quickActionsPanel
anchors.right: parent.right
anchors.rightMargin: 20
anchors.top: parent.top
anchors.topMargin: -8
visible: hoverHandler.hovered && !editMode
}
}
@@ -1,29 +0,0 @@
import QtQuick 2.13
import StatusQ.Core 0.1
QtObject {
id: msgDetails
property bool amISender: false
property string displayName: ""
property string secondaryName: ""
property string chatID: ""
property StatusImageSettings profileImage: StatusImageSettings {
width: 40
height: 40
}
property bool isEdited: false
property string messageText: ""
property int contentType: 0
property string messageContent: ""
property bool isMutualContact: false
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
property bool hasMention: false
property bool isPinned: false
property string pinnedBy: ""
property bool hasExpired: false
property string timestamp: ""
}
@@ -6,6 +6,7 @@ import StatusQ.Components 0.1
StatusListItem {
id: statusNavigationListItem
signal clicked(var mouse)
property bool selected: false
property alias badge: statusBadge
@@ -16,7 +17,6 @@ StatusListItem {
icon.background.height: 20
icon.background.color: "transparent"
statusListItemIcon.anchors.topMargin: 14
color: {
if (selected) {
+1 -2
View File
@@ -9,7 +9,6 @@ Rectangle {
width: 24
height: 24
rotation: 0
color: Theme.palette.primaryColor1
background: StatusIconBackgroundSettings {
width: 40
height: 40
@@ -30,7 +29,7 @@ Rectangle {
width: statusRoundedIcon.icon.width
height: statusRoundedIcon.icon.height
color: statusRoundedIcon.icon.color
color: Theme.palette.primaryColor1
icon: statusRoundedIcon.icon.name
rotation: statusRoundedIcon.icon.rotation
}
@@ -1,108 +0,0 @@
import QtQuick 2.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Loader {
id: statusSmartIdenticon
property string name: ""
property int dZ: 100
// Badge color properties must be set if badgeItem.visible = true
property alias badge: statusBadge
property StatusIconSettings icon: StatusIconSettings {
width: 40
height: 40
}
property StatusImageSettings image: StatusImageSettings {
width: 40
height: 40
}
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
totalRingUnits: 1
initalAngleRad: 0
ringPxSize: 1.5
}
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
Component {
id: roundedImage
Item {
width: statusSmartIdenticon.image.width
height: statusSmartIdenticon.image.height
StatusRoundedImage {
id: statusRoundImage
width: parent.width
height: parent.height
image.source: statusSmartIdenticon.image.source
showLoadingIndicator: true
border.width: statusSmartIdenticon.image.isIdenticon ? 1 : 0
border.color: Theme.palette.directColor7
color: statusSmartIdenticon.image.isIdenticon ?
Theme.palette.statusRoundedImage.backgroundColor :
"transparent"
}
Loader {
anchors.centerIn: parent
active: statusRoundImage.image.status === Image.Error
sourceComponent: letterIdenticon
onLoaded: {
item.color = Theme.palette.miscColor5
item.width = statusSmartIdenticon.image.width
item.height = statusSmartIdenticon.image.height
}
}
}
}
Component {
id: roundedIcon
StatusRoundIcon {
icon.background.width: statusSmartIdenticon.icon.background.width
icon.background.height: statusSmartIdenticon.icon.background.height
icon.background.color: statusSmartIdenticon.icon.background.color
icon.width: statusSmartIdenticon.icon.width
icon.height: statusSmartIdenticon.icon.height
icon.name: statusSmartIdenticon.icon.name
icon.rotation: statusSmartIdenticon.icon.rotation
icon.color: statusSmartIdenticon.icon.color
}
}
Component {
id: letterIdenticon
StatusLetterIdenticon {
width: statusSmartIdenticon.icon.width
height: statusSmartIdenticon.icon.height
color: statusSmartIdenticon.icon.color
name: statusSmartIdenticon.name
letterSize: statusSmartIdenticon.icon.letterSize
}
}
// Next components are painted above main sourceComponent
StatusIdenticonRing {
settings: statusSmartIdenticon.ringSettings
anchors.fill: parent
z: statusSmartIdenticon.dZ/2
}
// State component
StatusBadge {
id: statusBadge
visible: false
anchors.bottom: statusSmartIdenticon.bottom
anchors.right: statusSmartIdenticon.right
border.width: 3
implicitHeight: 15
implicitWidth: 15
z: statusSmartIdenticon.dZ
}
}
@@ -1,137 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: root
implicitWidth: 448
implicitHeight: 44
property alias textEdit: edit
property alias text: edit.text
property string warningText: ""
property string toLabelText: ""
property int nameCountLimit: 5
property ListModel namesModel: ListModel { }
function find(model, criteria) {
for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
return null;
}
function insertTag(name, id) {
if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
namesModel.insert(namesModel.count, {"name": name, "publicId": id});
addMember(id);
edit.clear();
}
}
signal addMember(string memberId)
signal removeMember(string memberId)
Rectangle {
anchors.fill: parent
radius: 8
color: Theme.palette.baseColor2
RowLayout {
anchors.fill: parent
anchors.leftMargin: 16
anchors.rightMargin: 16
spacing: 8
StatusBaseText {
Layout.preferredWidth: 22
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
color: Theme.palette.baseColor1
text: root.toLabelText
}
ScrollView {
Layout.fillWidth: true
implicitHeight: 30
Layout.alignment: Qt.AlignVCenter
visible: (namesList.count > 0)
contentWidth: namesList.contentWidth
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
clip: true
ListView {
id: namesList
anchors.fill: parent
model: namesModel
orientation: ListView.Horizontal
spacing: 8
onContentWidthChanged: {
positionViewAtEnd();
}
delegate: Rectangle {
id: nameDelegate
width: (nameText.contentWidth + 34)
height: 30
color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
radius: 8
StatusBaseText {
id: nameText
anchors.left: parent.left
anchors.leftMargin: 8
anchors.verticalCenter: parent.verticalCenter
color: Theme.palette.indirectColor1
text: name
}
StatusIcon {
anchors.left: nameText.right
anchors.verticalCenter: parent.verticalCenter
color: Theme.palette.indirectColor1
icon: "close"
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
cursorShape: Qt.PointingHandCursor
onClicked: {
removeMember(publicId);
namesModel.remove(index, 1);
}
}
}
}
}
TextEdit {
id: edit
Layout.fillWidth: true
Layout.preferredHeight: 44
verticalAlignment: Text.AlignVCenter
visible: (namesModel.count < 5)
enabled: visible
focus: true
font.pixelSize: 15
font.family: Theme.palette.baseFont.name
color: Theme.palette.directColor1
Keys.onPressed: {
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
&& getText(cursorPosition, (cursorPosition-1)) === "") {
removeMember(namesModel.get(namesList.count-1).publicId);
namesModel.remove((namesList.count-1), 1);
}
}
}
StatusBaseText {
id: warningTextLabel
visible: (namesModel.count === root.nameCountLimit)
Layout.preferredWidth: 120
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
font.pixelSize: 10
color: Theme.palette.dangerColor1
text: root.nameCountLimit + " " + root.warningText
}
}
}
}
@@ -1,182 +0,0 @@
import QtQuick 2.14
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Control {
id: root
width: 343
height: !!secondaryText ? 68 : 48
anchors.right: parent.right
property bool open: false
property string primaryText: ""
property string secondaryText: ""
property bool loading: false
property string iconName: ""
property string linkUrl: ""
property StatusIconSettings icon: StatusIconSettings {
width: 23
height: 23
}
property int type: StatusToastMessage.Type.Default
enum Type {
Default,
Success
}
function open(title, subTitle, iconName, type, loading, url) {
root.primaryText = title;
root.secondaryText = subTitle;
root.icon.name = iconName;
root.type = type;
root.loading = loading;
root.linkUrl = url;
root.open = true;
}
signal close()
signal linkActivated(var link)
states: [
State {
name: "opened"
when: root.open
PropertyChanges {
target: root
anchors.rightMargin: 0
opacity: 1.0
}
},
State {
name: "closed"
when: !root.open
PropertyChanges {
target: root
anchors.rightMargin: -width
opacity: 0.0
}
StateChangeScript {
script: { root.close(); }
}
}
]
transitions: [
Transition {
to: "*"
NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 }
}
]
background: Rectangle {
id: background
anchors.fill: parent
color: Theme.palette.statusToastMessage.backgroundColor
radius: 8
border.color: Theme.palette.baseColor2
layer.enabled: true
layer.effect: DropShadow {
verticalOffset: 3
radius: 8
samples: 15
fast: true
cached: true
color: Theme.palette.dropShadow
}
}
contentItem: Item {
anchors.left: parent.left
anchors.leftMargin: 16
anchors.right: parent.right
anchors.rightMargin: 4
height: parent.height
MouseArea {
anchors.fill: parent
onMouseXChanged: {
root.open = (mouseX < (root.width/3));
}
}
RowLayout {
anchors.fill: parent
spacing: 16
Rectangle {
implicitWidth: 32
implicitHeight: 32
Layout.alignment: Qt.AlignVCenter
radius: (root.width/2)
color: (root.type === StatusToastMessage.Type.Success) ?
Theme.palette.successColor2 : Theme.palette.primaryColor3
Loader {
anchors.centerIn: parent
sourceComponent: root.loading ? loadingInd : statusIcon
Component {
id: loadingInd
StatusLoadingIndicator {
color: (root.type === StatusToastMessage.Type.Success) ?
Theme.palette.successColor1 : Theme.palette.primaryColor1
}
}
Component {
id: statusIcon
StatusIcon {
anchors.centerIn: parent
width: root.icon.width
height: root.icon.height
color: (root.type === StatusToastMessage.Type.Success) ?
Theme.palette.successColor1 : Theme.palette.primaryColor1
icon: root.icon.name
}
}
}
}
Column {
Layout.fillWidth: true
Layout.alignment: Qt.AlignVCenter
StatusBaseText {
width: parent.width
font.pixelSize: 13
color: Theme.palette.directColor1
elide: Text.ElideRight
text: root.primaryText
}
StatusBaseText {
width: parent.width
visible: (!root.linkUrl && !!root.secondaryText)
height: visible ? contentHeight : 0
font.pixelSize: 13
color: Theme.palette.baseColor1
text: root.secondaryText
elide: Text.ElideRight
}
StatusSelectableText {
visible: (!!root.linkUrl)
height: visible ? implicitHeight : 0
font.pixelSize: 13
hoveredLinkColor: Theme.palette.primaryColor1
text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
onLinkActivated: {
root.linkActivated(root.linkUrl);
}
}
}
StatusFlatRoundButton {
type: StatusFlatRoundButton.Type.Secondary
icon.name: "close"
icon.color: Theme.palette.directColor1
implicitWidth: 30
implicitHeight: 30
onClicked: {
root.open = false;
}
}
}
}
}
@@ -1,78 +0,0 @@
import QtQuick 2.14
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.14
import StatusQ.Core 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: wizardWrapper
width: parent.width
height: 56
property ListModel stepsModel: ListModel { }
ListView {
id: repeat
width: childrenRect.width
height: parent.height
anchors.horizontalCenter: parent.horizontalCenter
orientation: ListView.Horizontal
model: stepsModel
delegate: Item {
id: wrapperItem
width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
height: 56
onXChanged: {
//as x changes while delegates are created, direct assignment doesn't work
x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
}
StatusProgressBar {
id: barBorder
width: visible ? (parent.width - (label.width/2 + 24)) : 0
height: visible ? 8 : 0
visible: (index > 0)
anchors.verticalCenter: parent.verticalCenter
anchors.verticalCenterOffset: -12
from: 0
//TODO what is to: here?
to: 2000
value: loadingTime
backgroundColor: "transparent"
backgroundBorderColor: Theme.palette.primaryColor1
fillColor: Theme.palette.primaryColor1
}
Item {
id: label
width: descriptionLabel.contentWidth
height: 56
anchors.left: (index > 0) ? barBorder.right : parent.left
anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
Rectangle {
width: 32
height: 32
anchors.horizontalCenter: parent.horizontalCenter
radius: width/2
color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? "transparent" : Theme.palette.primaryColor1
border.width: 2
StatusBaseText {
anchors.centerIn: parent
text: index+1
font.pixelSize: 17
color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
}
}
StatusBaseText {
id: descriptionLabel
anchors.bottom: parent.bottom
text: description
color: Theme.palette.directColor1
font.pixelSize: 13
}
}
}
}
}
@@ -1,143 +0,0 @@
import QtQuick 2.3
import QtMultimedia 5.14
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
// To-do update as per latest design -> Audio graphs. Also the player should ideally be in the BE?
Rectangle {
id: audioChatMessage
property string audioMessageInfoText: ""
property bool isPreview: false
property bool hovered: false
property string audioSource: ""
width: 320
height: 32
radius: 20
color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
Audio {
id: audioMessage
source: audioSource
notifyInterval: 150
}
RowLayout {
id: preview
visible: isPreview
spacing: 5
anchors.centerIn: parent
StatusIcon {
id: icon
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 14
Layout.preferredHeight: 14
icon: "audio"
color: Theme.palette.baseColor1
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
text: audioMessageInfoText
font.pixelSize: 13
}
}
StatusFlatRoundButton {
id: playButton
width: 15
height: 15
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
visible: !isPreview
type: StatusFlatRoundButton.Type.Tertiary
color: "transparent"
icon.name: audioMessage.playbackState == Audio.PlayingState ? "pause-filled" : "play-filled"
icon.color: Theme.palette.directColor1
onClicked: {
if(audioMessage.playbackState === Audio.PlayingState){
audioMessage.pause();
} else {
audioMessage.play();
}
}
}
Rectangle {
height: 2
width: 240
color: Theme.palette.directColor5
anchors.verticalCenter: parent.verticalCenter
anchors.left: playButton.right
anchors.leftMargin: 10
visible: !isPreview
Rectangle {
id: progress
height: 2
width: {
if(audioMessage.duration === 0) return 0;
if(audioMessage.playbackState === Audio.StoppedState) return 0;
return parent.width * audioMessage.position / audioMessage.duration;
}
color: Theme.palette.directColor5
anchors.verticalCenter: parent.verticalCenter
}
Rectangle {
id: handle
width: 10
height: 10
color: Theme.palette.directColor1
radius: 10
anchors.verticalCenter: parent.verticalCenter
x: progress.width
state: "default"
states: State {
name: "pressed"
when: handleMouseArea.pressed
PropertyChanges {
target: handle;
scale: 1.2
}
}
transitions: Transition {
NumberAnimation {
properties: "scale";
duration: 100;
easing.type: Easing.InOutQuad
}
}
MouseArea {
id: handleMouseArea
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
drag.target: parent
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: parent.parent.width
onPressed: {
handle.state = "pressed"
if(audioMessage.playbackState === Audio.PlayingState) {
audioMessage.pause();
}
}
onReleased: {
handle.state = "default"
audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width)
audioMessage.play()
}
}
}
}
}
@@ -1,51 +0,0 @@
import QtQuick 2.3
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
Item {
id: editText
property alias inputComponent: chatInputLoader.sourceComponent
property string cancelButtonText: ""
property string saveButtonText: ""
property string msgText: ""
signal cancelEditClicked()
signal editCompleted(var newMsgText)
height: childrenRect.height
ColumnLayout {
spacing: 4
Loader {
id: chatInputLoader
// To-Do: Move to StatusChatInput once its moved to StatusQ
sourceComponent: StatusInput {
width: editText.width
input.placeholderText: ""
input.text: msgText
input.implicitHeight: 40
}
}
RowLayout {
spacing: 4
StatusFlatButton {
id: cancelBtn
text: cancelButtonText
size: StatusBaseButton.Size.Small
onClicked: cancelEditClicked()
}
StatusButton {
id: saveBtn
text: saveButtonText
size: StatusBaseButton.Size.Small
enabled: chatInputLoader.item.input.text.trim().length > 0
onClicked: editCompleted(chatInputLoader.item.input.text)
}
}
}
}
@@ -1,114 +0,0 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Item {
id: imageContainer
enum ShapeType {
ROUNDED = 0,
LEFT_ROUNDED = 1,
RIGHT_ROUNDED = 2
}
property alias imageAlias: imageMessage
property bool isAppWindowActive: false
property url source: ""
property bool allCornersRounded: false
property bool isLeftCorner: true
property int imageWidth: 350
property int shapeType: -1
property string loadingImageText: ""
property string errorLoadingImageText: ""
signal clicked(var image, var mouse)
width: loadingImage.visible ? loadingImage.width : imageMessage.width
height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
QtObject {
id: _internal
property bool isAnimated: !!source && source.toString().endsWith('.gif')
property bool pausePlaying: false
}
AnimatedImage {
id: imageMessage
width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
fillMode: Image.PreserveAspectFit
source: imageContainer.source
playing: _internal.isAnimated && isAppWindowActive && !_internal.pausePlaying
layer.enabled: true
layer.effect: OpacityMask {
maskSource: Item {
width: imageMessage.width
height: imageMessage.height
Rectangle {
anchors.top: parent.top
anchors.left: parent.left
width: imageMessage.width
height: imageMessage.height
radius: 16
}
Rectangle {
anchors.bottom: parent.bottom
anchors.left: parent.left
width: 32
height: 32
radius: 4
visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
}
Rectangle {
anchors.bottom: parent.bottom
anchors.right: parent.right
width: 32
height: 32
radius: 4
visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded
}
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
onClicked: {
if (imageContainer.isAnimated) {
// FIXME the ListView completely removes Items that scroll out of view
// so when we scroll backto the image, it gets reloaded and playing is reset
_internal.pausePlaying = ! _internal.pausePlaying
return
}
imageContainer.clicked(imageMessage, mouse)
}
}
}
Rectangle {
id: loadingImage
visible: imageMessage.status === Image.Loading
|| imageMessage.status === Image.Error
width: parent.width
height: width
border.width: 1
border.color: Theme.palette.baseColor2
radius: 8
StatusBaseText {
anchors.centerIn: parent
text: imageMessage.status === Image.Error ? errorLoadingImageText: loadingImageText
color: imageMessage.status === Image.Error?
Theme.palette.dangerColor1 :
Theme.palette.directColor1
font.pixelSize: 15
}
}
}
@@ -1,110 +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
import StatusQ.Controls 0.1
Item {
id: statusMessageHeader
property alias displayNameLabel: primaryDisplayName
property alias secondaryNameLabel: secondaryDisplayName
property alias tertiaryDetailsLabel: tertiaryDetailText
property alias timestamp: timestampText
property string displayName: ""
property string secondaryName: ""
property string tertiaryDetail: ""
property string resendText: ""
property bool showResendButton: false
property bool isMutualContact: false
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
signal clicked()
signal resendClicked()
height: childrenRect.height
width: primaryDisplayName.width + (secondaryDisplayName.visible ? secondaryDisplayName.width + header.spacing : 0)
RowLayout {
id: header
spacing: 4
TextEdit {
id: primaryDisplayName
font.family: Theme.palette.baseFont.name
font.weight: Font.Medium
font.pixelSize: 15
font.underline: mouseArea.containsMouse
readOnly: true
wrapMode: Text.WordWrap
selectByMouse: true
color: Theme.palette.primaryColor1
text: displayName
MouseArea {
id: mouseArea
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
hoverEnabled: true
onClicked: {
statusMessageHeader.clicked()
}
}
Layout.alignment: Qt.AlignBottom
}
StatusContactVerificationIcons {
isMutualContact: statusMessageHeader.isMutualContact
trustIndicator: statusMessageHeader.trustIndicator
}
StatusBaseText {
id: secondaryDisplayName
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
font.pixelSize: 10
text: secondaryName
visible: !!text
}
StatusBaseText {
id: dotSeparator1
Layout.fillHeight: true
font.pixelSize: 10
color: Theme.palette.baseColor1
text: "."
visible: secondaryDisplayName.visible
}
StatusBaseText {
id: tertiaryDetailText
Layout.alignment: Qt.AlignVCenter
Layout.maximumWidth: 58
font.pixelSize: 10
elide: Text.ElideMiddle
color: Theme.palette.baseColor1
text: tertiaryDetail
}
StatusBaseText {
id: dotSeparator2
Layout.fillHeight: true
font.pixelSize: 10
color: Theme.palette.baseColor1
text: "."
visible: tertiaryDetailText.visible
}
StatusTimeStampLabel {
id: timestampText
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.dangerColor1
font.pixelSize: 12
text: statusMessageHeader.resendText
visible: showResendButton && !!timestampText.text
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusMessageHeader.resendClicked()
}
}
}
}
@@ -1,51 +0,0 @@
import QtQuick 2.13
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Rectangle {
id: buttonsContainer
property list<Item> quickActions
QtObject {
id: _internal
readonly property int containerMargin: 2
}
width: buttonRow.width + _internal.containerMargin * 2
height: 36
radius: 8
color: Theme.palette.statusSelect.menuItemBackgroundColor
layer.enabled: true
layer.effect: DropShadow {
width: buttonsContainer.width
height: buttonsContainer.height
x: buttonsContainer.x
y: buttonsContainer.y + 10
horizontalOffset: 0
verticalOffset: 2
source: buttonsContainer
radius: 10
samples: 15
color: Theme.palette.dropShadow
}
Row {
id: buttonRow
spacing: _internal.containerMargin
anchors.left: parent.left
anchors.leftMargin: _internal.containerMargin
anchors.verticalCenter: buttonsContainer.verticalCenter
height: parent.height - 2 * _internal.containerMargin
}
onQuickActionsChanged: {
for (let idx in quickActions) {
quickActions[idx].parent = buttonRow
}
}
}
@@ -1,125 +0,0 @@
import QtQuick 2.14
import QtQuick.Shapes 1.13
import QtGraphicalEffects 1.13
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Components 0.1
Loader {
id: chatReply
property StatusMessageDetails replyDetails
property string audioMessageInfoText: ""
signal replyProfileClicked()
active: visible
sourceComponent: RowLayout {
id: replyLayout
spacing: 8
Shape {
id: replyCorner
Layout.alignment: Qt.AlignTop
Layout.leftMargin: 35
Layout.topMargin: profileImage.height/2
Layout.preferredWidth: 20
Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
asynchronous: true
antialiasing: true
ShapePath {
strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
strokeWidth: 3
fillColor: "transparent"
capStyle: ShapePath.RoundCap
joinStyle: ShapePath.RoundJoin
startX: 20
startY: 0
PathLine { x: 10; y: 0 }
PathArc {
x: 0; y: 10
radiusX: 13
radiusY: 13
direction: PathArc.Counterclockwise
}
PathLine { x: 0; y: messageLayout.height}
}
}
ColumnLayout {
id: messageLayout
Layout.fillWidth: true
Layout.alignment: Qt.AlignTop
Layout.topMargin: 4
RowLayout {
StatusSmartIdenticon {
id: profileImage
Layout.alignment: Qt.AlignTop
image: replyDetails.profileImage
name: replyDetails.displayName
MouseArea {
cursorShape: Qt.PointingHandCursor
acceptedButtons: Qt.LeftButton | Qt.RightButton
anchors.fill: parent
onClicked: replyProfileClicked()
}
}
TextEdit {
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
selectionColor: Theme.palette.primaryColor3
selectedTextColor: Theme.palette.directColor1
font.pixelSize: 13
font.weight: Font.Medium
selectByMouse: true
readOnly: true
text: replyDetails.displayName
}
}
StatusTextMessage {
Layout.fillWidth: true
textField.text: replyDetails.messageText
textField.font.pixelSize: 13
textField.color: Theme.palette.baseColor1
textField.height: 18
clip: true
visible: !!replyDetails.messageText
}
StatusImageMessage {
Layout.fillWidth: true
Layout.preferredHeight: imageAlias.paintedHeight
imageWidth: 56
source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
visible: replyDetails.contentType === StatusMessage.ContentType.Image
shapeType: StatusImageMessage.ShapeType.ROUNDED
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 48
Layout.alignment: Qt.AlignLeft
visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
StatusSticker {
image.width: 48
image.height: 48
image.source: replyDetails.messageContent
}
}
Item {
Layout.fillWidth: true
Layout.preferredHeight: 22
visible: replyDetails.contentType === StatusMessage.ContentType.Audio
StatusAudioMessage {
id: audioMessage
anchors.left: parent.left
width: 125
height: 22
isPreview: true
audioSource: replyDetails.messageContent
audioMessageInfoText: chatReply.audioMessageInfoText
}
}
}
}
}
@@ -1,46 +0,0 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
import QtGraphicalEffects 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Loader {
property string pinnedMsgInfoText: ""
property string pinnedBy: ""
active: visible
sourceComponent: Rectangle {
height: 24
width: layout.width + 16
color: Theme.palette.pinColor2
radius: 12
RowLayout {
id: layout
anchors.centerIn: parent
StatusIcon {
Layout.alignment: Qt.AlignVCenter
Layout.preferredWidth: 16
Layout.preferredHeight: 16
color: Theme.palette.pinColor1
icon: "tiny/pin"
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4
color: Theme.palette.directColor1
font.pixelSize: 13
text: pinnedMsgInfoText
}
StatusBaseText {
Layout.alignment: Qt.AlignVCenter
Layout.leftMargin: -4
color: Theme.palette.directColor1
font.pixelSize: 13
font.weight: Font.Medium
text: pinnedBy
}
}
}
}
@@ -1,125 +0,0 @@
import QtQuick 2.3
import QtGraphicalEffects 1.13
import StatusQ.Components 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Loader {
id: statusSticker
property bool noHover: false
property bool noMouseArea: false
property StatusImageSettings image: StatusImageSettings {
width: 140
height: 140
}
signal loaded()
signal clicked()
active: visible
sourceComponent: Rectangle {
id: root
color: Theme.palette.baseColor2
radius: 16
width: image.width
height: image.height
function reload() {
// From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
// Note: Changing this property dynamically causes the image source to
// be reloaded, potentially even from the network, if it is not in the
// disk cache.
const oldSource = sticker.source
sticker.cache = false
sticker.sourceSize.width += 1
sticker.sourceSize.width -= 1
sticker.cache = true
}
Loader {
id: loader
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
}
Image {
id: sticker
anchors.fill: parent
horizontalAlignment: Image.AlignHCenter
verticalAlignment: Image.AlignVCenter
cache: true
source: image.source
onStatusChanged: {
if (status === Image.Ready) {
statusSticker.loaded()
}
}
MouseArea {
enabled: !noMouseArea && (sticker.status === Image.Ready)
cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
anchors.fill: parent
onClicked: statusSticker.clicked()
}
}
Component {
id: loadingIndicator
StatusLoadingIndicator {
width: 24
height: 24
color: Theme.palette.baseColor1
}
}
Component {
id: reload
StatusIcon {
icon: "refresh"
color: Theme.palette.directColor1
mipmap: false
MouseArea {
anchors.fill: parent
cursorShape: Qt.PointingHandCursor
onClicked: root.reload()
}
}
}
states: [
State {
name: "loading"
when: sticker.status === Image.Loading
PropertyChanges {
target: loader
sourceComponent: loadingIndicator
}
},
State {
name: "error"
when: sticker.status === Image.Error
PropertyChanges {
target: loader
sourceComponent: reload
}
},
State {
name: "ready"
when: sticker.status === Image.Ready
PropertyChanges {
target: root
color: "transparent"
}
PropertyChanges {
target: loader
sourceComponent: undefined
}
}
]
}
}
@@ -1,87 +0,0 @@
import QtQuick 2.13
import QtGraphicalEffects 1.0
import StatusQ.Components 0.1
import StatusQ.Controls 0.1
import StatusQ.Core.Theme 0.1
Item {
id: textMessage
property int contentType: 0
property alias textField: chatText
signal linkActivated(url link)
implicitHeight: showMoreLoader.active ? childrenRect.height : chatText.height
QtObject {
id: _internal
property bool readMore: false
property bool veryLongChatText: chatText.length > 1000
}
TextEdit {
id: chatText
visible: !showMoreLoader.active || _internal.readMore
selectedTextColor: Theme.palette.directColor1
selectionColor: Theme.palette.primaryColor3
color: Theme.palette.directColor1
font.family: Theme.palette.baseFont.name
font.pixelSize: 15
textFormat: Text.RichText
wrapMode: Text.Wrap
readOnly: true
selectByMouse: true
height: _internal.veryLongChatText && !_internal.readMore ? Math.min(implicitHeight, 200) : implicitHeight
width: parent.width
clip: height < implicitHeight
onLinkActivated: textMessage.linkActivated(link)
onLinkHovered: {
cursorShape: Qt.PointingHandCursor
}
}
Loader {
id: mask
anchors.fill: chatText
active: showMoreLoader.active
visible: false
sourceComponent: LinearGradient {
start: Qt.point(0, 0)
end: Qt.point(0, chatText.height)
gradient: Gradient {
GradientStop { position: 0.0; color: "white" }
GradientStop { position: 0.85; color: "white" }
GradientStop { position: 1; color: "transparent" }
}
}
}
Loader {
id: opMask
active: showMoreLoader.active && !_internal.readMore
anchors.fill: chatText
sourceComponent: OpacityMask {
source: chatText
maskSource: mask
}
}
Loader {
id: showMoreLoader
active: _internal.veryLongChatText
anchors.top: chatText.bottom
anchors.topMargin: -10
anchors.horizontalCenter: parent.horizontalCenter
sourceComponent: StatusRoundButton {
implicitWidth: 24
implicitHeight: 24
type: StatusRoundButton.Type.Secondary
icon.name: _internal.readMore ? "chevron-up": "chevron-down"
onClicked: {
_internal.readMore = !_internal.readMore
}
}
}
}
@@ -1,24 +0,0 @@
import QtQuick 2.13
import QtQuick.Layouts 1.14
import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
StatusBaseText {
id: timestampLabe;
property alias tooltip: tooltip
Layout.alignment: Qt.AlignVCenter
color: Theme.palette.baseColor1
font.pixelSize: 10
visible: !!text
StatusToolTip {
id: tooltip
visible: hhandler.hovered && !!text
maxWidth: 350
}
HoverHandler {
id: hhandler
}
}
-11
View File
@@ -1,6 +1,5 @@
module StatusQ.Components
StatusAddress 0.1 StatusAddress.qml
StatusBadge 0.1 StatusBadge.qml
StatusChatInfoToolBar 0.1 StatusChatInfoToolBar.qml
StatusChatList 0.1 StatusChatList.qml
@@ -10,23 +9,13 @@ StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
StatusChatToolBar 0.1 StatusChatToolBar.qml
StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
StatusListItem 0.1 StatusListItem.qml
StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
StatusMemberListItem 0.1 StatusMemberListItem.qml
StatusNavigationListItem 0.1 StatusNavigationListItem.qml
StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
StatusRoundIcon 0.1 StatusRoundIcon.qml
StatusRoundedImage 0.1 StatusRoundedImage.qml
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
StatusListItemBadge 0.1 StatusListItemBadge.qml
StatusExpandableItem 0.1 StatusExpandableItem.qml
StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
StatusMessage 0.1 StatusMessage.qml
StatusMessageDetails 0.1 StatusMessageDetails.qml
StatusTagSelector 0.1 StatusTagSelector.qml
StatusToastMessage 0.1 StatusToastMessage.qml
StatusWizardStepper 0.1 StatusWizardStepper.qml
@@ -1,277 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import QtQml.Models 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
Item {
id: root
property string label: "Choose account"
property bool showAccountDetails: !!selectedAccount
property var accounts
property var selectedAccount
property string currency: "usd"
property alias selectField: select
implicitWidth: 448
height: select.height +
(selectedAccountDetails.visible ? selectedAccountDetails.height + selectedAccountDetails.anchors.topMargin : 0)
// set to asset symbol to display asset's balance top right
// NOTE: if this asset is not selected as a wallet token in the UI, then
// nothing will be displayed
property string showBalanceForAssetSymbol: ""
property var assetFound
property double minRequiredAssetBalance: 0
property int dropdownWidth: width
property alias dropdownAlignment: select.menuAlignment
property bool isValid: true
property bool readOnly: false
property var assetBalanceTextFn: function (foundValue) {
return "Balance: " + (parseFloat(foundValue) === 0.0 ? "0" : Utils.stripTrailingZeros(foundValue))
}
readonly property string watchWalletType: "watch"
enum Type {
Address,
Contact,
Account
}
function validate() {
if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
return root.isValid
}
root.isValid = assetFound.balance >= minRequiredAssetBalance
return root.isValid
}
onSelectedAccountChanged: {
if (!selectedAccount) {
return
}
if (selectedAccount.color) {
selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
}
if (selectedAccount.name) {
selectedTextField.text = selectedAccount.name
}
if (selectedAccount.address) {
textSelectedAddress.text = selectedAccount.address + " •"
}
if (selectedAccount.currencyBalance) {
textSelectedAddressFiatBalance.text = selectedAccount.currencyBalance + " " + currency.toUpperCase()
}
if (selectedAccount.assets && showBalanceForAssetSymbol) {
assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
if (!assetFound) {
console.warn("Cannot find asset '", showBalanceForAssetSymbol, "'. Ensure this asset has been added to the token list.")
}
}
if (!selectedAccount.type) {
selectedAccount.type = StatusAccountSelector.Type.Account
}
validate()
}
onAssetFoundChanged: {
if (!assetFound) {
return
}
txtAssetBalance.text = root.assetBalanceTextFn(assetFound.balance)
txtAssetSymbol.text = " " + assetFound.symbol
}
StatusBaseText {
id: txtAssetBalance
visible: root.assetFound !== undefined
anchors.bottom: select.top
anchors.bottomMargin: -18
anchors.right: txtAssetSymbol.left
anchors.left: select.left
anchors.leftMargin: select.width / 2.5
color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
elide: Text.ElideRight
font.pixelSize: 13
horizontalAlignment: Text.AlignRight
height: 18
StatusToolTip {
enabled: txtAssetBalance.truncated
id: assetTooltip
text: txtAssetBalance.text
}
MouseArea {
enabled: txtAssetBalance.truncated
anchors.fill: parent
hoverEnabled: enabled
onEntered: assetTooltip.visible = true
onExited: assetTooltip.visible = false
}
}
StatusBaseText {
id: txtAssetSymbol
visible: txtAssetBalance.visible
anchors.top: txtAssetBalance.top
anchors.right: parent.right
color: txtAssetBalance.color
font.pixelSize: 13
height: txtAssetBalance.height
}
StatusSelect {
id: select
label: root.label
model: root.accounts
width: parent.width
menuAlignment: StatusSelect.MenuAlignment.Left
selectMenu.delegate: menuItem
selectMenu.width: dropdownWidth
selectedItemComponent: Item {
anchors.fill: parent
StatusIcon {
id: selectedIconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
icon: "filled-account"
}
StatusBaseText {
id: selectedTextField
elide: Text.ElideRight
anchors.left: selectedIconImg.right
anchors.leftMargin: 8
anchors.right: parent.right
anchors.rightMargin: select.selectedItemRightMargin
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
verticalAlignment: Text.AlignVCenter
height: 22
color: Theme.palette.directColor1
}
}
}
Row {
id: selectedAccountDetails
visible: root.showAccountDetails
anchors.top: select.bottom
anchors.topMargin: 8
anchors.left: parent.left
anchors.leftMargin: 2
StatusBaseText {
id: textSelectedAddress
font.pixelSize: 12
elide: Text.ElideMiddle
width: 90
color: Theme.palette.baseColor1
}
StatusBaseText {
id: textSelectedAddressFiatBalance
font.pixelSize: 12
color: Theme.palette.baseColor1
}
}
Component {
id: menuItem
MenuItem {
id: itemContainer
visible: walletType !== root.watchWalletType
property bool isFirstItem: index === 0
property bool isLastItem: index === accounts.rowCount() - 1
Component.onCompleted: {
if (!root.selectedAccount && isFirstItem) {
root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
}
}
height: walletType === root.watchWalletType ? 0 : (accountName.height + 14 + accountAddress.height + 14)
StatusIcon {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
width: 20
height: 20
icon: "filled-account"
color: Utils.getThemeAccountColor(model.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
}
Column {
id: column
anchors.left: iconImg.right
anchors.leftMargin: 14
anchors.right: txtFiatBalance.left
anchors.rightMargin: 8
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
id: accountName
text: model.name
elide: Text.ElideRight
font.pixelSize: 15
anchors.left: parent.left
anchors.right: parent.right
height: 22
color: Theme.palette.directColor1
}
StatusBaseText {
id: accountAddress
text: address
elide: Text.ElideMiddle
width: 80
color: Theme.palette.baseColor1
font.pixelSize: 12
height: 16
}
}
StatusBaseText {
id: txtFiatBalance
anchors.right: fiatCurrencySymbol.left
anchors.rightMargin: 4
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
text: currencyBalance
color: Theme.palette.directColor1
}
StatusBaseText {
id: fiatCurrencySymbol
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
color: Theme.palette.baseColor1
text: root.currency.toUpperCase()
}
background: Rectangle {
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
select.selectMenu.close()
}
}
}
}
}
@@ -1,146 +0,0 @@
import QtQuick 2.13
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Core.Utils 0.1
import StatusQ.Controls 0.1
import StatusQ.Components 0.1
Item {
id: root
property var assets
property var selectedAsset
property string defaultToken: ""
property var tokenAssetSourceFn: function (symbol) {
return ""
}
// Define this in the usage to get balance in currency selected by user
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
implicitWidth: 86
implicitHeight: 32
function resetInternal() {
assets = null
selectedAsset = null
}
onSelectedAssetChanged: {
if (selectedAsset && selectedAsset.symbol) {
iconImg.image.source = tokenAssetSourceFn(selectedAsset.symbol.toUpperCase())
selectedTextField.text = selectedAsset.symbol.toUpperCase()
}
}
StatusSelect {
id: select
width: parent.width
bgColor: "transparent"
bgColorHover: Theme.palette.directColor8
model: root.assets
caretRightMargin: 0
select.radius: 6
select.height: root.height
selectMenu.width: 342
selectedItemComponent: Item {
anchors.fill: parent
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 4
width: 24
height: 24
anchors.verticalCenter: parent.verticalCenter
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
}
}
}
StatusBaseText {
id: selectedTextField
anchors.left: iconImg.right
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter
font.pixelSize: 15
height: 22
verticalAlignment: Text.AlignVCenter
color: Theme.palette.directColor1
}
}
selectMenu.delegate: menuItem
}
Component {
id: menuItem
MenuItem {
id: itemContainer
property bool isFirstItem: index === 0
property bool isLastItem: index === assets.rowCount() - 1
width: parent.width
height: 72
StatusRoundedImage {
id: iconImg
anchors.left: parent.left
anchors.leftMargin: 16
anchors.verticalCenter: parent.verticalCenter
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
image.onStatusChanged: {
if (iconImg.image.status === Image.Error) {
iconImg.image.source = defaultToken
}
}
}
Column {
anchors.left: iconImg.right
anchors.leftMargin: 12
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
text: symbol.toUpperCase()
font.pixelSize: 15
color: Theme.palette.directColor1
}
StatusBaseText {
text: name
color: Theme.palette.baseColor1
font.pixelSize: 15
}
}
Column {
anchors.right: parent.right
anchors.rightMargin: 16
anchors.verticalCenter: parent.verticalCenter
StatusBaseText {
font.pixelSize: 15
text: parseFloat(balance).toFixed(4) + " " + symbol
}
StatusBaseText {
font.pixelSize: 15
anchors.right: parent.right
text: getCurrencyBalanceString(currencyBalance)
color: Theme.palette.baseColor1
}
}
background: Rectangle {
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
}
Component.onCompleted: {
if(index === 0 ) {
selectedAsset = { name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
}
}
MouseArea {
cursorShape: Qt.PointingHandCursor
anchors.fill: itemContainer
onClicked: {
selectedAsset = {name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
select.selectMenu.close()
}
}
}
}
}
-89
View File
@@ -1,89 +0,0 @@
import QtQuick 2.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
Column {
id: statusBanner
width: parent.width
property string statusText
property int type: StatusBanner.Type.Info
property int textPixels: 15
property int statusBannerHeight: 38
// "private" properties
QtObject {
id: d
property color backgroundColor
property color bordersColor
property color fontColor
}
enum Type {
Info, // 0
Danger, // 1
Success, // 2
Warning // 3
}
// Component definition
Rectangle {
id: topDiv
color: d.bordersColor
height: 1
width: parent.width
}
Rectangle {
id: box
width: parent.width
height: statusBanner.statusBannerHeight
color: d.backgroundColor
StatusBaseText {
id: statusTxt
anchors.fill: parent
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
font.pixelSize: statusBanner.textPixels
text: statusBanner.statusText
color: d.fontColor
}
}
Rectangle {
id: bottomDiv
color: d.bordersColor
height: 1
width: parent.width
}
// Behavior
states: [
State {
when: statusBanner.type === StatusBanner.Type.Info
PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Danger
PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Success
PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
},
State {
when: statusBanner.type === StatusBanner.Type.Warning
PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
}
]
}
+4 -30
View File
@@ -7,7 +7,6 @@ Rectangle {
id: statusBaseButton
enum Size {
Tiny,
Small,
Large
}
@@ -34,32 +33,8 @@ Rectangle {
property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
property real defaultTopPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
case StatusBaseButton.Size.Small:
return 10
break;
case StatusBaseButton.Size.Large:
default:
return 11
break;
}
}
property real defaultBottomPadding: {
switch (size) {
case StatusBaseButton.Size.Tiny:
return 5
case StatusBaseButton.Size.Small:
return 10
break;
case StatusBaseButton.Size.Large:
default:
return 11
break;
}
}
property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
property real leftPadding: defaultLeftPadding
@@ -79,7 +54,6 @@ Rectangle {
signal clicked(var mouse)
signal pressAndHold(var mouse)
property bool highlighted: false
/// Implementation
@@ -87,11 +61,11 @@ Rectangle {
implicitWidth: sensor.width
implicitHeight: sensor.height
radius: size !== StatusBaseButton.Size.Tiny ? 8 : 6
radius: 8
color: {
if (statusBaseButton.enabled) {
return sensor.containsMouse || highlighted ? hoverColor
return sensor.containsMouse ? hoverColor
: normalColor
} else {
return disaledColor

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