Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Pascal Precht
|
583f60faaa |
@@ -10,5 +10,3 @@ bin
|
||||
*.autosave
|
||||
Makefile
|
||||
.qmake.stash
|
||||
*_qml.cpp
|
||||
*_qmlcache.qrc
|
||||
|
||||
-369
@@ -1,369 +0,0 @@
|
||||
<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,6 +1,6 @@
|
||||
# StatusQ
|
||||
# Status QML
|
||||
|
||||
> An emerging reusable QML UI component library for Status applications.
|
||||
> An emerging reusable UI component library for Status applications.
|
||||
|
||||
## Usage
|
||||
|
||||
@@ -9,11 +9,9 @@ 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)
|
||||
- [StatusQ.Platform](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Platform/qmldir)
|
||||
- [StatusQ.Popups](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Popups/qmldir)
|
||||
|
||||
Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
|
||||
@@ -51,7 +49,5 @@ $ ./scripts/build
|
||||
Once that is done, the sandbox can be started with the generated executable:
|
||||
|
||||
```
|
||||
$ ./bin/sandbox
|
||||
$ ./bin
|
||||
```
|
||||
|
||||
More Documentation available on the [wiki](https://hackmd.io/@status-desktop/B1naRjxh_/%2FwFtiXvOiQqCdw2lk6gbOLA)
|
||||
|
||||
+226
-248
@@ -1,261 +1,239 @@
|
||||
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
|
||||
|
||||
Grid {
|
||||
|
||||
Column {
|
||||
spacing: 10
|
||||
Grid {
|
||||
id: buttonGridWidth
|
||||
columns: 3
|
||||
columnSpacing: 38
|
||||
rowSpacing: 10
|
||||
columns: 3
|
||||
columnSpacing: 38
|
||||
rowSpacing: 10
|
||||
|
||||
horizontalItemAlignment: Grid.AlignHCenter
|
||||
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
|
||||
}
|
||||
// Large
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Small
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Button"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Icon buttons
|
||||
|
||||
// blue
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// black
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded blue
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
// Rounded white
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 44
|
||||
height: 44
|
||||
icon.name: "info"
|
||||
loading: true
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
enabled: false
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
|
||||
StatusFlatButton {
|
||||
icon.name: "info"
|
||||
text: "Button"
|
||||
loading: true
|
||||
size: StatusBaseButton.Size.Small
|
||||
}
|
||||
}
|
||||
|
||||
+1
-33
@@ -5,10 +5,8 @@ import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
@@ -115,36 +113,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"
|
||||
|
||||
+711
-551
File diff suppressed because it is too large
Load Diff
+1
-109
@@ -95,20 +95,11 @@ GridLayout {
|
||||
onUnmute: muted = false
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "muted-with-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
selected: true
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "selected-muted-channel"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
@@ -116,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
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
}
|
||||
@@ -143,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"
|
||||
@@ -277,62 +224,11 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
icon.name: "info"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "Title"
|
||||
icon.isLetterIdenticon: true
|
||||
icon.background.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"
|
||||
@@ -341,8 +237,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
}
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,336 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
QtObject {
|
||||
|
||||
property var demoChatListItems: ListModel {
|
||||
id: demoChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "#status"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
mentionsCount: 0
|
||||
color: "blue"
|
||||
position: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "status-desktop"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "red"
|
||||
unreadMessagesCount: 1
|
||||
mentionsCount: 1
|
||||
position: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "Amazing Funny Squirrel"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: false
|
||||
color: "green"
|
||||
identicon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
|
||||
CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
unreadMessagesCount: 0
|
||||
position: 2
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "Black Ops"
|
||||
chatType: StatusChatListItem.Type.GroupChat
|
||||
muted: false
|
||||
color: "purple"
|
||||
unreadMessagesCount: 0
|
||||
position: 3
|
||||
}
|
||||
ListElement {
|
||||
chatId: "4"
|
||||
name: "Spectacular Growing Otter"
|
||||
chatType: StatusChatListItem.Type.OneToOneChat
|
||||
muted: true
|
||||
color: "Orange"
|
||||
unreadMessagesCount: 0
|
||||
position: 4
|
||||
}
|
||||
ListElement {
|
||||
chatId: "5"
|
||||
name: "channel-with-a-super-duper-long-name"
|
||||
chatType: StatusChatListItem.Type.PublicChat
|
||||
muted: false
|
||||
color: "green"
|
||||
unreadMessagesCount: 0
|
||||
position: 5
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityChatListItems: ListModel {
|
||||
id: demoCommunityChatListItems
|
||||
ListElement {
|
||||
chatId: "0"
|
||||
name: "general"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
position: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "1"
|
||||
name: "random"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
position: 0
|
||||
}
|
||||
ListElement {
|
||||
chatId: "2"
|
||||
name: "watercooler"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "public"
|
||||
position: 1
|
||||
}
|
||||
ListElement {
|
||||
chatId: "3"
|
||||
name: "language-design"
|
||||
chatType: StatusChatListItem.Type.CommunityChat
|
||||
muted: false
|
||||
unreadMessagesCount: 0
|
||||
color: "orange"
|
||||
categoryId: "dev"
|
||||
position: 0
|
||||
}
|
||||
}
|
||||
|
||||
property var demoCommunityCategoryItems: ListModel {
|
||||
id: demoCommunityCategoryItems
|
||||
ListElement {
|
||||
categoryId: "public"
|
||||
name: "Public"
|
||||
position: 0
|
||||
}
|
||||
ListElement {
|
||||
categoryId: "dev"
|
||||
name: "Development"
|
||||
position: 1
|
||||
}
|
||||
}
|
||||
|
||||
property var demoProfileGeneralMenuItems: ListModel {
|
||||
id: demoProfileGeneralMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "My Profile"
|
||||
icon: "profile"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Contacts"
|
||||
icon: "contact"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "ENS Usernames"
|
||||
icon: "username"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
property var demoProfileSettingsMenuItems: 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"
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
property var demoProfileOtherMenuItems: ListModel {
|
||||
id: demoProfileOtherMenuItems
|
||||
|
||||
ListElement {
|
||||
title: "Need help?"
|
||||
icon: "help"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "About"
|
||||
icon: "info"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
title: "Sign out & Quit"
|
||||
icon: "logout"
|
||||
}
|
||||
}
|
||||
|
||||
//dummy search popup models
|
||||
property var searchResultsA: ListModel {
|
||||
ListElement { itemId: "i1"; titleId: "t1"; title: "@Flea"; sectionName: "Messages"; time: "18:55 AM"; content: "lorem ipsum <font color='#4360DF'>@Nick</font> dolor sit amet";
|
||||
image: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
|
||||
color: "orange";
|
||||
badgeImage: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg";
|
||||
badgePrimaryText: "CryptoKities";
|
||||
badgeSecondaryText: "";
|
||||
badgeIconColor: "";
|
||||
badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "core"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "yellow"; title: "communities-phase3"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "black"; title: "core-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "green"; title: "desktop"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "red"; title: "Crocodile Vanilla Bird"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "carmen eth"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "red"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i9"; titleId: "t9"; image: ""; color: "blue"; title: "MyCommunity"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i10"; titleId: "t10"; image: ""; color: "green"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
}
|
||||
property var searchResultsB: ListModel {
|
||||
ListElement { itemId: "i1"; titleId: "t1"; title: "@Ant"; sectionName: "Messages"; time: "11:43 AM"; content: "<font color='#4360DF'>@John</font>, lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum ";
|
||||
image: "";
|
||||
color: "orange";
|
||||
badgeImage: "";
|
||||
badgePrimaryText: "CryptoKities";
|
||||
badgeSecondaryText: "#design";
|
||||
badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
|
||||
ListElement { itemId: "i2"; titleId: "t2"; image: ""; color: "blue"; title: "support"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i3"; titleId: "t3"; image: ""; color: "red"; title: "desktop-ui"; sectionName: "Channels"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i4"; titleId: "t4"; image: ""; color: "orange"; title: "climate-change"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i5"; titleId: "t5"; image: ""; color: "black"; title: "food"; sectionName: "Chat"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "pink"; badgeIsLetterIdenticon: true }
|
||||
ListElement { itemId: "i6"; titleId: "t6"; image: ""; color: "green"; title: "CryptoKitties"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i7"; titleId: "t7"; image: ""; color: "purple"; title: "CryptoRangers"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: ""; badgeIsLetterIdenticon: false }
|
||||
ListElement { itemId: "i8"; titleId: "t8"; image: ""; color: "yellow"; title: "Foo"; sectionName: "Communities"; time: ""; content: ""; badgeImage: ""; badgePrimaryText: ""; badgeSecondaryText: ""; badgeIconColor: "orange"; badgeIsLetterIdenticon: true }
|
||||
}
|
||||
|
||||
property ListModel optionsModel: ListModel {
|
||||
ListElement {
|
||||
value: "item_1"
|
||||
title: "Item with icon"
|
||||
imageSource: ""
|
||||
iconName: "chat"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
value: "sub_item_1_1"
|
||||
text: "Profile image item"
|
||||
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
value: "sub_item_1_2"
|
||||
text: "identicon item"
|
||||
imageSource: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: true
|
||||
}]}
|
||||
ListElement {
|
||||
value: "item_2"
|
||||
title: "Community item";
|
||||
imageSource: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
iconName: ""
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
value: "sub_item_2_1"
|
||||
text: "welcome"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
value: "sub_item_2_2"
|
||||
text: "support"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
},
|
||||
ListElement {
|
||||
value: "sub_item_2_3"
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
ListElement {
|
||||
value: "item_3"
|
||||
title: "Other";
|
||||
imageSource: "";
|
||||
iconName: "info"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
value: "sub_item_3_1"
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
ListElement {
|
||||
value: "item_4"
|
||||
title: "Letter identicon";
|
||||
imageSource: "";
|
||||
iconName: ""
|
||||
iconColor: "red"
|
||||
isIdenticon: false
|
||||
subItems: [
|
||||
ListElement {
|
||||
value: "sub_item_4_1"
|
||||
text: "news"
|
||||
imageSource: ""
|
||||
iconName: "channel"
|
||||
iconColor: ""
|
||||
isIdenticon: false
|
||||
}]}
|
||||
}
|
||||
}
|
||||
@@ -1,312 +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 long titles"
|
||||
onClicked: modalWithLongTitles.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Header Popup Menu"
|
||||
onClicked: modalWithHeaderPopupMenu.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: 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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: dummyAccountsModel
|
||||
ListElement{name: "Account 1"; iconName: "filled-account"}
|
||||
ListElement{name: "Account 2"; iconName: "filled-account"}
|
||||
}
|
||||
}
|
||||
@@ -1,152 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Column {
|
||||
spacing: 12
|
||||
width: 800
|
||||
anchors.top:parent.top
|
||||
leftPadding: 20
|
||||
rightPadding: 20
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 30
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Primary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: false
|
||||
icon.name: "seed-phrase"
|
||||
primaryText: "Back up seed phrase"
|
||||
secondaryText: "Back up your seed phrase now to secure this account ajhaDH SDHSAHDLSADBSA,DLISAHDLASD ADASDHASLDHALSDHAS DAS,DASJDGLIASGD"
|
||||
button.text: qsTr("Back up seed phrase")
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: true
|
||||
icon.name: "secret"
|
||||
primaryText: "Account signing phrase"
|
||||
secondaryText: "View your signing phrase and ensure that you never get scammed. View your signing phrase and ensure that you never get scammed."
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
expandable: true
|
||||
icon.name: "seed-phrase"
|
||||
primaryText: "View private key"
|
||||
secondaryText: "Back up your seed phrase now to secure this account"
|
||||
expandableComponent: notImplemented
|
||||
button.text: "View private key"
|
||||
button.icon.name: "tiny/public-chat"
|
||||
button.onClicked: {
|
||||
// To-do open enter password Modal
|
||||
expanded = !expanded
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 30
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Secondary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
primaryText: "CryptoKitties"
|
||||
additionalText: "1456 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
primaryText: "Adding Really long text to test scenario of having very long text along with tertiary text"
|
||||
additionalText: "564.90 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Secondary
|
||||
expandable: true
|
||||
primaryText: "CryptoKitties"
|
||||
additionalText: "1456 USD"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: 30
|
||||
color: Theme.palette.baseColor2
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: "Type Tertiary"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandable: true
|
||||
primaryText: "CryptoKitties"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
StatusExpandableItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
type: StatusExpandableItem.Type.Tertiary
|
||||
expandable: true
|
||||
primaryText: "Rescue Moon"
|
||||
expandableComponent: notImplemented
|
||||
}
|
||||
|
||||
Component {
|
||||
id: notImplemented
|
||||
Rectangle {
|
||||
anchors.centerIn: parent
|
||||
width: 654
|
||||
height: infoText.implicitHeight
|
||||
color: Theme.palette.baseColor5
|
||||
StatusBaseText {
|
||||
id: infoText
|
||||
anchors.centerIn: parent
|
||||
color: Theme.palette.directColor4
|
||||
font.pixelSize: 15
|
||||
lineHeight: 22
|
||||
lineHeightMode: Text.FixedHeight
|
||||
font.weight: Font.Medium
|
||||
text: qsTr("Not Implemented")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,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
|
||||
}
|
||||
}
|
||||
@@ -22,13 +22,6 @@ GridLayout {
|
||||
onClicked: complexMenu.popup()
|
||||
}
|
||||
|
||||
|
||||
StatusButton {
|
||||
text: "Menu with custom images and icons"
|
||||
onClicked: customMenu.popup()
|
||||
}
|
||||
|
||||
|
||||
StatusPopupMenu {
|
||||
id: simpleMenu
|
||||
StatusMenuItem {
|
||||
@@ -46,104 +39,33 @@ GridLayout {
|
||||
|
||||
StatusPopupMenu {
|
||||
id: complexMenu
|
||||
subMenuItemIcons: [{ icon: 'info' }]
|
||||
|
||||
subMenuItemIcons: ['info']
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
iconSettings.name: "info"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Two"
|
||||
iconSettings.name: "info"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Three"
|
||||
iconSettings.name: "info"
|
||||
icon.name: "info"
|
||||
}
|
||||
|
||||
StatusPopupMenu {
|
||||
title: "Four"
|
||||
StatusMenuItem {
|
||||
text: "One"
|
||||
iconSettings.name: "info"
|
||||
icon.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"
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
+5
-95
@@ -15,7 +15,7 @@ import StatusQ.Platform 0.1
|
||||
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
|
||||
@@ -138,21 +138,11 @@ StatusWindow {
|
||||
selected: page.sourceComponent == buttonsComponent
|
||||
onClicked: page.sourceComponent = buttonsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSwitchTab"
|
||||
selected: page.sourceComponent == statusTabSwitchesComponent
|
||||
onClicked: page.sourceComponent = statusTabSwitchesComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Controls"
|
||||
selected: page.sourceComponent == controlsComponent
|
||||
onClicked: page.sourceComponent = controlsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusInput"
|
||||
selected: page.sourceComponent == statusInputPageComponent
|
||||
onClicked: page.sourceComponent = statusInputPageComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "List Items"
|
||||
@@ -169,23 +159,12 @@ StatusWindow {
|
||||
selected: page.sourceComponent == othersComponent
|
||||
onClicked: page.sourceComponent = othersComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusExpandableItem"
|
||||
selected: page.sourceComponent == settingsComponent
|
||||
onClicked: page.sourceComponent = settingsComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
selected: page.sourceComponent == popupMenuComponent
|
||||
onClicked: page.sourceComponent = popupMenuComponent
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "StatusModal"
|
||||
selected: page.sourceComponent == statusModalComponent
|
||||
onClicked: page.sourceComponent = statusModalComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -193,10 +172,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 {
|
||||
@@ -251,11 +232,6 @@ StatusWindow {
|
||||
Controls {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusInputPageComponent
|
||||
StatusInputPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listItemsComponent
|
||||
ListItems {}
|
||||
@@ -286,57 +262,12 @@ StatusWindow {
|
||||
StatusChatInfoToolBarPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusModalComponent
|
||||
Popups {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusTabSwitchesComponent
|
||||
StatusTabSwitchPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: settingsComponent
|
||||
StatusExpandableSettingsItemPage{}
|
||||
}
|
||||
|
||||
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.verticalCenter: parent.verticalCenter
|
||||
@@ -359,27 +290,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()
|
||||
}
|
||||
|
||||
@@ -9,10 +9,7 @@
|
||||
<file>ListItems.qml</file>
|
||||
<file>StatusChatInfoToolBarPage.qml</file>
|
||||
<file>StatusPopupMenuPage.qml</file>
|
||||
<file>StatusInputPage.qml</file>
|
||||
<file>ThemeSwitch.qml</file>
|
||||
<file>Layout.qml</file>
|
||||
<file>Popups.qml</file>
|
||||
<file>StatusExpandableSettingsItemPage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
+11
-14
@@ -12,8 +12,7 @@ DEFINES += QT_DEPRECATED_WARNINGS
|
||||
SOURCES += \
|
||||
handler.cpp \
|
||||
main.cpp \
|
||||
sandboxapp.cpp \
|
||||
spellchecker.cpp
|
||||
sandboxapp.cpp
|
||||
|
||||
!macx {
|
||||
SOURCES += statuswindow.cpp
|
||||
@@ -25,14 +24,6 @@ macx {
|
||||
CONFIG -= app_bundle
|
||||
OBJECTIVE_SOURCES += \
|
||||
statuswindow_mac.mm
|
||||
|
||||
hunspellTarget.depends = FORCE
|
||||
hunspellTarget.commands = brew install hunspell
|
||||
QMAKE_EXTRA_TARGETS += hunspellTarget
|
||||
|
||||
|
||||
LIBS += -L"/usr/local/lib" -lhunspell-1.7
|
||||
INCLUDEPATH += /usr/local/include/hunspell
|
||||
}
|
||||
|
||||
ios {
|
||||
@@ -60,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 {
|
||||
|
||||
|
||||
@@ -5,7 +5,6 @@
|
||||
#include <QDebug>
|
||||
|
||||
#include "statuswindow.h"
|
||||
#include "spellchecker.h"
|
||||
|
||||
SandboxApp::SandboxApp(int &argc, char **argv)
|
||||
: QGuiApplication(argc, argv),
|
||||
@@ -17,7 +16,6 @@ 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(applicationDirPath() + "/../main.qml");
|
||||
|
||||
@@ -1,174 +0,0 @@
|
||||
#include "spellchecker.h"
|
||||
|
||||
#include "hunspell.hxx"
|
||||
#include <QTextCodec>
|
||||
#include <QFile>
|
||||
#include <QDebug>
|
||||
#include <QLocale>
|
||||
|
||||
#include <QRegularExpression>
|
||||
#include <QApplication>
|
||||
#include <QDir>
|
||||
|
||||
SpellChecker::SpellChecker(QObject *parent)
|
||||
: QObject(parent)
|
||||
, m_hunspell(nullptr)
|
||||
, m_userDict("userDict_")
|
||||
{
|
||||
|
||||
}
|
||||
|
||||
SpellChecker::~SpellChecker()
|
||||
{
|
||||
#ifdef Q_OS_MACOS
|
||||
delete m_hunspell;
|
||||
#endif
|
||||
}
|
||||
|
||||
bool SpellChecker::spell(const QString &word)
|
||||
{
|
||||
#ifdef Q_OS_MACOS
|
||||
return m_hunspell->spell(m_codec->fromUnicode(word).toStdString());
|
||||
#else
|
||||
return true;
|
||||
#endif
|
||||
}
|
||||
|
||||
bool SpellChecker::isInit() const
|
||||
{
|
||||
return !m_hunspell;
|
||||
}
|
||||
|
||||
void SpellChecker::initHunspell()
|
||||
{
|
||||
#ifdef Q_OS_MACOS
|
||||
if (m_hunspell) {
|
||||
delete m_hunspell;
|
||||
}
|
||||
|
||||
QString dictFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang + "/index.dic";
|
||||
QString affixFile = QApplication::applicationDirPath() + "/dictionaries/" + m_lang + "/index.aff";
|
||||
QByteArray dictFilePathBA = dictFile.toLocal8Bit();
|
||||
QByteArray affixFilePathBA = affixFile.toLocal8Bit();
|
||||
m_hunspell = new Hunspell(affixFilePathBA.constData(),
|
||||
dictFilePathBA.constData());
|
||||
|
||||
// detect encoding analyzing the SET option in the affix file
|
||||
auto encoding = QStringLiteral("ISO8859-15");
|
||||
QFile _affixFile(affixFile);
|
||||
if (_affixFile.open(QIODevice::ReadOnly)) {
|
||||
QTextStream stream(&_affixFile);
|
||||
QRegularExpression enc_detector(
|
||||
QStringLiteral("^\\s*SET\\s+([A-Z0-9\\-]+)\\s*"),
|
||||
QRegularExpression::CaseInsensitiveOption);
|
||||
QString sLine;
|
||||
QRegularExpressionMatch match;
|
||||
while (!stream.atEnd()) {
|
||||
sLine = stream.readLine();
|
||||
if (sLine.isEmpty()) { continue; }
|
||||
match = enc_detector.match(sLine);
|
||||
if (match.hasMatch()) {
|
||||
encoding = match.captured(1);
|
||||
qDebug() << "Encoding set to " + encoding;
|
||||
break;
|
||||
}
|
||||
}
|
||||
_affixFile.close();
|
||||
}
|
||||
m_codec = QTextCodec::codecForName(encoding.toLatin1().constData());
|
||||
|
||||
QString userDict = m_userDict + m_lang + ".txt";
|
||||
|
||||
if (!userDict.isEmpty()) {
|
||||
QFile userDictonaryFile(userDict);
|
||||
if (userDictonaryFile.open(QIODevice::ReadOnly)) {
|
||||
QTextStream stream(&userDictonaryFile);
|
||||
for (QString word = stream.readLine();
|
||||
!word.isEmpty();
|
||||
word = stream.readLine())
|
||||
ignoreWord(word);
|
||||
userDictonaryFile.close();
|
||||
} else {
|
||||
qWarning() << "User dictionary in " << userDict
|
||||
<< "could not be opened";
|
||||
}
|
||||
} else {
|
||||
qDebug() << "User dictionary not set.";
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
QVariantList SpellChecker::suggest(const QString &word)
|
||||
{
|
||||
int numSuggestions = 0;
|
||||
QVariantList suggestions;
|
||||
#ifdef Q_OS_MACOS
|
||||
std::vector<std::string> wordlist;
|
||||
wordlist = m_hunspell->suggest(m_codec->fromUnicode(word).toStdString());
|
||||
|
||||
numSuggestions = static_cast<int>(wordlist.size());
|
||||
if (numSuggestions > 0) {
|
||||
suggestions.reserve(numSuggestions);
|
||||
for (int i = 0; i < numSuggestions; i++) {
|
||||
suggestions << m_codec->toUnicode(
|
||||
QByteArray::fromStdString(wordlist[i]));
|
||||
}
|
||||
}
|
||||
#endif
|
||||
|
||||
return suggestions;
|
||||
}
|
||||
|
||||
void SpellChecker::ignoreWord(const QString &word)
|
||||
{
|
||||
#ifdef Q_OS_MACOS
|
||||
m_hunspell->add(m_codec->fromUnicode(word).constData());
|
||||
#endif
|
||||
}
|
||||
|
||||
void SpellChecker::addToUserWordlist(const QString &word)
|
||||
{
|
||||
#ifdef Q_OS_MACOS
|
||||
QString userDict = m_userDict + m_lang + ".txt";
|
||||
if (!userDict.isEmpty()) {
|
||||
QFile userDictonaryFile(userDict);
|
||||
if (userDictonaryFile.open(QIODevice::Append)) {
|
||||
QTextStream stream(&userDictonaryFile);
|
||||
stream << word << "\n";
|
||||
userDictonaryFile.close();
|
||||
} else {
|
||||
qWarning() << "User dictionary in " << userDict
|
||||
<< "could not be opened for appending a new word";
|
||||
}
|
||||
} else {
|
||||
qDebug() << "User dictionary not set.";
|
||||
}
|
||||
#endif
|
||||
}
|
||||
|
||||
const QString& SpellChecker::lang() const
|
||||
{
|
||||
return m_lang;
|
||||
}
|
||||
|
||||
void SpellChecker::setLang(const QString& lang)
|
||||
{
|
||||
if (m_lang != lang) {
|
||||
m_lang = lang;
|
||||
initHunspell();
|
||||
emit langChanged();
|
||||
}
|
||||
}
|
||||
|
||||
const QString& SpellChecker::userDict() const
|
||||
{
|
||||
return m_userDict;
|
||||
}
|
||||
|
||||
void SpellChecker::setUserDict(const QString& userDict)
|
||||
{
|
||||
if (m_userDict != userDict) {
|
||||
m_userDict = userDict;
|
||||
emit userDictChanged();
|
||||
}
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
#ifndef SPELLCHECKER_H
|
||||
#define SPELLCHECKER_H
|
||||
|
||||
#include <QObject>
|
||||
#include <QVariant>
|
||||
#include <QQuickTextDocument>
|
||||
#include <QSyntaxHighlighter>
|
||||
|
||||
#ifdef Q_OS_MACOS
|
||||
class Hunspell;
|
||||
#endif
|
||||
class QTextCodec;
|
||||
|
||||
class SpellChecker : public QObject
|
||||
{
|
||||
Q_OBJECT
|
||||
Q_PROPERTY(QString lang READ lang WRITE setLang NOTIFY langChanged)
|
||||
Q_PROPERTY(QString userDict READ userDict WRITE setUserDict NOTIFY userDictChanged)
|
||||
|
||||
public:
|
||||
explicit SpellChecker(QObject *parent = nullptr);
|
||||
~SpellChecker();
|
||||
|
||||
Q_INVOKABLE bool spell(const QString& word);
|
||||
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);
|
||||
|
||||
const QString& userDict() const;
|
||||
void setUserDict(const QString& userDict);
|
||||
|
||||
signals:
|
||||
void langChanged();
|
||||
void userDictChanged();
|
||||
|
||||
private:
|
||||
void initHunspell();
|
||||
|
||||
private:
|
||||
QString m_lang;
|
||||
QString m_userDict;
|
||||
|
||||
QQuickTextDocument *m_document;
|
||||
#ifdef Q_OS_MACOS
|
||||
Hunspell *m_hunspell;
|
||||
#endif
|
||||
QTextCodec *m_codec;
|
||||
};
|
||||
|
||||
#endif // SPELLCHECKER_H
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,225 +1,52 @@
|
||||
import QtQuick 2.13
|
||||
import QtQml.Models 2.14
|
||||
import QtQuick.Controls 2.13 as QC
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
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
|
||||
|
||||
Column {
|
||||
ScrollView {
|
||||
id: statusChatList
|
||||
|
||||
spacing: 4
|
||||
width: 288
|
||||
contentHeight: items.height + 8
|
||||
clip: true
|
||||
|
||||
property string categoryId: ""
|
||||
property string selectedChatId: ""
|
||||
property alias chatListItems: delegateModel
|
||||
property bool draggableItems: false
|
||||
|
||||
property Component popupMenu
|
||||
property alias chatListItems: statusChatListItems
|
||||
|
||||
property var filterFn
|
||||
property var profileImageFn
|
||||
property var chatNameFn
|
||||
|
||||
signal chatItemSelected(string id)
|
||||
signal chatItemUnmuted(string id)
|
||||
signal chatItemReordered(string id, int from, int to)
|
||||
|
||||
onPopupMenuChanged: {
|
||||
if (!!popupMenu) {
|
||||
popupMenuSlot.sourceComponent = popupMenu
|
||||
}
|
||||
}
|
||||
Column {
|
||||
id: items
|
||||
spacing: 4
|
||||
Repeater {
|
||||
id: statusChatListItems
|
||||
delegate: StatusChatListItem {
|
||||
chatId: model.chatId
|
||||
name: model.name
|
||||
type: model.chatType
|
||||
muted: !!model.muted
|
||||
hasUnreadMessages: !!model.hasUnreadMessages
|
||||
hasMention: !!model.hasMention
|
||||
badge.value: model.unreadMessagesCount || 0
|
||||
selected: model.chatId === statusChatList.selectedChatId
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
icon.color: model.iconColor || ""
|
||||
image.source: model.identicon || ""
|
||||
|
||||
delegate: Item {
|
||||
id: draggable
|
||||
width: statusChatListItem.width
|
||||
height: statusChatListItem.height
|
||||
|
||||
property alias chatListItem: statusChatListItem
|
||||
|
||||
visible: {
|
||||
if (!!statusChatList.filterFn) {
|
||||
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)
|
||||
onClicked: statusChatList.chatItemSelected(model.chatId)
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.chatId)
|
||||
visible: {
|
||||
if (!!statusChatList.filterFn) {
|
||||
return statusChatList.filterFn(model, statusChatList.categoryId)
|
||||
}
|
||||
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
|
||||
|
||||
property string profileImage: ""
|
||||
|
||||
opacity: dragSensor.active ? 0.0 : 1.0
|
||||
Component.onCompleted: {
|
||||
if (typeof statusChatList.profileImageFn === "function") {
|
||||
profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
|
||||
}
|
||||
}
|
||||
originalOrder: model.position
|
||||
chatId: model.chatId || model.id
|
||||
categoryId: model.categoryId || ""
|
||||
name: !!statusChatList.chatNameFn ? statusChatList.chatNameFn(model) : model.name
|
||||
type: model.chatType
|
||||
muted: !!model.muted
|
||||
hasUnreadMessages: !!model.hasUnreadMessages || model.unviewedMessagesCount > 0
|
||||
hasMention: model.mentionsCount > 0
|
||||
badge.value: model.chatType === StatusChatListItem.Type.OneToOneChat ?
|
||||
model.unviewedMessagesCount || 0 :
|
||||
model.mentionsCount || 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 || ""
|
||||
|
||||
sensor.cursorShape: dragSensor.cursorShape
|
||||
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
|
||||
}
|
||||
if (!statusChatListItem.selected) {
|
||||
statusChatList.chatItemSelected(model.chatId || model.id)
|
||||
}
|
||||
}
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
|
||||
}
|
||||
}
|
||||
|
||||
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: draggable.chatListItem.hasUnreadMessages
|
||||
hasMention: draggable.chatListItem.hasMention
|
||||
badge.value: draggable.chatListItem.badge.value
|
||||
selected: draggable.chatListItem.selected
|
||||
|
||||
icon.color: draggable.chatListItem.icon.color
|
||||
image.isIdenticon: draggable.chatListItem.image.isIdenticon
|
||||
image.source: draggable.chatListItem.image.source
|
||||
return true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Repeater {
|
||||
id: statusChatListItems
|
||||
model: delegateModel
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatList.popupMenu
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,42 +1,26 @@
|
||||
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 {
|
||||
ScrollView {
|
||||
id: statusChatListAndCategories
|
||||
|
||||
implicitHeight: chatListsAndCategories.height
|
||||
implicitWidth: chatListsAndCategories.width
|
||||
|
||||
property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
|
||||
text: "Add channel inside category"
|
||||
}
|
||||
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
|
||||
text: "More"
|
||||
}
|
||||
clip: true
|
||||
contentHeight: chatListsAndCategories.height + 8
|
||||
|
||||
property string selectedChatId: ""
|
||||
property bool showCategoryActionButtons: false
|
||||
property bool showPopupMenu: true
|
||||
property alias chatList: statusChatList.chatListItems
|
||||
property alias categoryList: delegateModel
|
||||
property alias categoryList: statusChatListCategories
|
||||
property alias sensor: sensor
|
||||
property bool draggableItems: false
|
||||
property bool draggableCategories: false
|
||||
|
||||
property Component categoryPopupMenu
|
||||
property Component chatListPopupMenu
|
||||
property Component popupMenu
|
||||
|
||||
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: {
|
||||
@@ -48,11 +32,11 @@ Item {
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.top: parent.top
|
||||
width: statusChatListAndCategories.width
|
||||
width: parent.width
|
||||
height: statusChatListAndCategories.height
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
onClicked: {
|
||||
if (mouse.button === Qt.RightButton && showPopupMenu && !!statusChatListAndCategories.popupMenu) {
|
||||
if (mouse.button === Qt.RightButton && !!statusChatListAndCategories.popupMenu) {
|
||||
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6)
|
||||
return
|
||||
}
|
||||
@@ -68,143 +52,31 @@ Item {
|
||||
StatusChatList {
|
||||
id: statusChatList
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: chatListItems.count > 0
|
||||
visible: !!chatListItems.model && chatListItems.model.count > 0
|
||||
selectedChatId: statusChatListAndCategories.selectedChatId
|
||||
onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
|
||||
onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
|
||||
onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
|
||||
draggableItems: statusChatListAndCategories.draggableItems
|
||||
filterFn: function (model) {
|
||||
return !!!model.categoryId
|
||||
}
|
||||
popupMenu: statusChatListAndCategories.chatListPopupMenu
|
||||
}
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
|
||||
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.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)
|
||||
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
|
||||
chatList.draggableItems: statusChatListAndCategories.draggableItems
|
||||
|
||||
popupMenu: statusChatListAndCategories.categoryPopupMenu
|
||||
chatListPopupMenu: statusChatListAndCategories.chatListPopupMenu
|
||||
}
|
||||
|
||||
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.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
|
||||
chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
popupMenu: statusChatListAndCategories.categoryPopupMenu
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,23 +7,17 @@ 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
|
||||
|
||||
onPopupMenuChanged: {
|
||||
@@ -36,21 +30,17 @@ Column {
|
||||
id: statusChatListCategoryItem
|
||||
title: statusChatListCategory.name
|
||||
opened: statusChatListCategory.opened
|
||||
sensor.pressAndHoldInterval: 150
|
||||
|
||||
showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
|
||||
showMenuButton: !!statusChatListCategory.popupMenu
|
||||
|
||||
highlighted: statusChatListCategory.dragged
|
||||
sensor.onClicked: {
|
||||
if (mouse.button === Qt.RightButton && showActionButtons && !!statusChatListCategory.popupMenu) {
|
||||
onClicked: {
|
||||
if (mouse.button === Qt.RightButton) {
|
||||
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
|
||||
@@ -69,29 +59,20 @@ Column {
|
||||
filterFn: function (model) {
|
||||
return !!model.categoryId && model.categoryId == statusChatList.categoryId
|
||||
}
|
||||
|
||||
popupMenu: statusChatListCategory.chatListPopupMenu
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatListCategory.popupMenu
|
||||
onLoaded: {
|
||||
let originalOpenHandler = popupMenuSlot.item.openHandler
|
||||
let originalCloseHandler = popupMenuSlot.item.closeHandler
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler(statusChatListCategory.categoryId)
|
||||
if (popupMenuSlot.item.hasOwnProperty('categoryId')) {
|
||||
popupMenuSlot.item.categoryId = statusChatListCategory.categoryId
|
||||
}
|
||||
}
|
||||
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
statusChatListCategoryItem.highlighted = false
|
||||
statusChatListCategoryItem.menuButton.highlighted = false
|
||||
if (!!originalCloseHandler) {
|
||||
originalCloseHandler()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
|
||||
@@ -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,10 +7,7 @@ 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
|
||||
@@ -25,25 +18,19 @@ Rectangle {
|
||||
color: Theme.palette.miscColor5
|
||||
}
|
||||
property int type: StatusChatListItem.Type.PublicChat
|
||||
property bool highlighted: false
|
||||
property bool selected: false
|
||||
property bool dragged: false
|
||||
property alias sensor: sensor
|
||||
|
||||
signal clicked(var mouse)
|
||||
signal unmute()
|
||||
|
||||
enum Type {
|
||||
Unknown0, // 0
|
||||
OneToOneChat, // 1
|
||||
PublicChat, // 2
|
||||
GroupChat, // 3
|
||||
Unknown1, // 4
|
||||
Unknown2, // 5
|
||||
CommunityChat // 6
|
||||
PublicChat,
|
||||
GroupChat,
|
||||
CommunityChat,
|
||||
OneToOneChat
|
||||
}
|
||||
|
||||
implicitWidth: 288
|
||||
implicitWidth: 287
|
||||
implicitHeight: 40
|
||||
|
||||
radius: 8
|
||||
@@ -52,17 +39,14 @@ Rectangle {
|
||||
if (selected) {
|
||||
return Theme.palette.statusChatListItem.selectedBackgroundColor
|
||||
}
|
||||
return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
|
||||
return sensor.containsMouse ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
|
||||
}
|
||||
|
||||
opacity: dragged ? 0.7 : 1
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: statusChatListItem.clicked(mouse)
|
||||
@@ -74,7 +58,7 @@ Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
sourceComponent: !!statusChatListItem.image.source.toString() ?
|
||||
statusRoundedImageCmp : statusLetterIdenticonCmp
|
||||
statusRoundedImageCmp : statusLetterIdenticonCmp
|
||||
}
|
||||
|
||||
Component {
|
||||
@@ -99,11 +83,6 @@ Rectangle {
|
||||
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 {
|
||||
@@ -122,30 +101,29 @@ Rectangle {
|
||||
width: 14
|
||||
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
|
||||
opacity: {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse) {
|
||||
return 0.4
|
||||
}
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
statusBadge.visible ||
|
||||
sensor.containsMouse ? 1.0 : 0.7
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
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"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -154,37 +132,40 @@ 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.rightMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
|
||||
!statusChatListItem.name.startsWith("#") ?
|
||||
"#" + statusChatListItem.name :
|
||||
statusChatListItem.name)
|
||||
elide: Text.ElideRight
|
||||
text: statusChatListItem.name
|
||||
color: {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse) {
|
||||
return Theme.palette.directColor5
|
||||
}
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
sensor.containsMouse ||
|
||||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
sensor.containsMouse ||
|
||||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||
}
|
||||
font.weight: !statusChatListItem.muted &&
|
||||
(statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
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
|
||||
@@ -195,7 +176,7 @@ Rectangle {
|
||||
MouseArea {
|
||||
id: mutedIconSensor
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: statusChatListItem.unmute()
|
||||
}
|
||||
@@ -205,18 +186,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
|
||||
visible: statusBadge.value > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,30 +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: {
|
||||
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
|
||||
statusChatToolBar.menuButtonClicked()
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatToolBar.popupMenu
|
||||
onLoaded: {
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
}
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
menuButton.highlighted = true
|
||||
}
|
||||
}
|
||||
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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,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 {
|
||||
@@ -130,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 {
|
||||
@@ -161,5 +103,15 @@ Rectangle {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatToolBar.popupMenu
|
||||
onLoaded: {
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,30 +0,0 @@
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
StatusListItem {
|
||||
id: statusContactRequestsListItem
|
||||
|
||||
implicitHeight: 64
|
||||
implicitWidth: 288
|
||||
|
||||
color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
|
||||
|
||||
property int requestsCount: 0
|
||||
|
||||
components: [
|
||||
StatusBadge {
|
||||
value: statusContactRequestsListItem.requestsCount
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
border.width: 4
|
||||
border.color: color
|
||||
},
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
@@ -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,229 +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 {
|
||||
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)
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: identicon
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 25
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
|
||||
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
|
||||
sourceComponent: !!statusExpandableItem.image.source.toString() ? roundedImage :
|
||||
!!statusExpandableItem.icon.name.toString() ? roundedIcon : letterIdenticon
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roundedImage
|
||||
StatusRoundedImage {
|
||||
image.source: statusExpandableItem.image.source
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: roundedIcon
|
||||
StatusRoundIcon {
|
||||
icon.background.width: statusExpandableItem.icon.background.width
|
||||
icon.background.height: statusExpandableItem.icon.background.height
|
||||
icon.background.color: statusExpandableItem.icon.background.color
|
||||
icon.color: statusExpandableItem.icon.color
|
||||
icon.name: statusExpandableItem.icon.name
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: letterIdenticon
|
||||
StatusLetterIdenticon {
|
||||
height: 40
|
||||
width: 40
|
||||
name: primaryText.text
|
||||
letterSize: 20
|
||||
color: Theme.palette.miscColor5
|
||||
}
|
||||
}
|
||||
|
||||
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: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 23 : 6
|
||||
visible: expandable && !button.visible
|
||||
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
|
||||
Theme.palette.baseColor1 :
|
||||
Theme.palette.directColor1
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if(expandable) {
|
||||
expanded = !expanded
|
||||
}
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
visible: !button.visible && expandable
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: expandableRegion
|
||||
anchors.top: !!secondaryText.text ? secondaryText.bottom: primaryText.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)
|
||||
|
||||
@@ -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
|
||||
@@ -10,85 +8,37 @@ Rectangle {
|
||||
id: statusListItem
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
|
||||
|
||||
enum Type {
|
||||
Primary,
|
||||
Secondary,
|
||||
Danger
|
||||
}
|
||||
|
||||
color: {
|
||||
if (sensor.containsMouse) {
|
||||
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
|
||||
}
|
||||
implicitHeight: 64
|
||||
|
||||
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.statusListItem.backgroundColor
|
||||
radius: 8
|
||||
|
||||
property string itemId: ""
|
||||
property string titleId: ""
|
||||
|
||||
property string title: ""
|
||||
property string titleAsideText: ""
|
||||
property string subTitle: ""
|
||||
property string tertiaryTitle: ""
|
||||
property alias badge: statusListItemBadge
|
||||
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property bool enabled: true
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
height: 20
|
||||
width: 20
|
||||
rotation: 0
|
||||
isLetterIdenticon: false
|
||||
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: Theme.palette.primaryColor3
|
||||
}
|
||||
}
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
isIdenticon: false
|
||||
}
|
||||
property string label: ""
|
||||
|
||||
property int type: StatusListItem.Type.Primary
|
||||
|
||||
property alias sensor: sensor
|
||||
|
||||
property alias statusListItemIcon: iconOrImage
|
||||
property alias statusListItemTitle: statusListItemTitle
|
||||
property alias statusListItemSubTitle: statusListItemSubTitle
|
||||
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
|
||||
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
|
||||
|
||||
property list<Item> components
|
||||
|
||||
signal clicked(string itemId)
|
||||
signal titleClicked(string titleId)
|
||||
|
||||
onComponentsChanged: {
|
||||
if (components.length) {
|
||||
for (let idx in components) {
|
||||
@@ -100,32 +50,18 @@ Rectangle {
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
enabled: statusListItem.enabled
|
||||
anchors.fill: parent
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: {
|
||||
statusListItem.clicked(statusListItem.itemId)
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: iconOrImage
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: statusListItem.leftPadding
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 12
|
||||
sourceComponent: {
|
||||
if (statusListItem.icon.isLetterIdenticon) {
|
||||
return statusLetterIdenticon
|
||||
}
|
||||
return !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
|
||||
}
|
||||
|
||||
active: statusListItem.icon.isLetterIdenticon ||
|
||||
!!statusListItem.icon.name ||
|
||||
!!statusListItem.image.source.toString()
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
sourceComponent: !!statusListItem.icon.name ? statusRoundedIcon : statusRoundedImage
|
||||
active: !!statusListItem.icon.name || !!statusListItem.image.source.toString()
|
||||
}
|
||||
|
||||
Component {
|
||||
@@ -134,8 +70,6 @@ Rectangle {
|
||||
icon.width: statusListItem.icon.width
|
||||
icon.height: statusListItem.icon.height
|
||||
icon.name: statusListItem.icon.name
|
||||
icon.rotation: statusListItem.icon.rotation
|
||||
icon.color: statusListItem.icon.color
|
||||
color: statusListItem.icon.background.color
|
||||
width: statusListItem.icon.background.width
|
||||
height: statusListItem.icon.background.height
|
||||
@@ -148,111 +82,34 @@ Rectangle {
|
||||
image.source: statusListItem.image.source
|
||||
image.height: statusListItem.image.height
|
||||
image.width: statusListItem.image.width
|
||||
color: statusListItem.image.isIdenticon ?
|
||||
Theme.palette.statusRoundedImage.backgroundColor :
|
||||
"transparent"
|
||||
border.width: statusListItem.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticon
|
||||
StatusLetterIdenticon {
|
||||
width: statusListItem.icon.background.width
|
||||
height: statusListItem.icon.background.height
|
||||
color: statusListItem.icon.background.color
|
||||
name: statusListItem.title
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: statusListItemTitleArea
|
||||
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
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
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
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,7 +6,7 @@ StatusIcon {
|
||||
icon: "loading"
|
||||
height: 17
|
||||
width: 17
|
||||
RotationAnimation {
|
||||
RotationAnimator {
|
||||
target: statusIcon;
|
||||
from: 0;
|
||||
to: 360;
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -8,8 +8,6 @@ Rectangle {
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 24
|
||||
height: 24
|
||||
rotation: 0
|
||||
color: Theme.palette.primaryColor1
|
||||
background: StatusIconBackgroundSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
@@ -30,8 +28,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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -26,12 +26,9 @@ Rectangle {
|
||||
|
||||
Image {
|
||||
id: image
|
||||
width: statusRoundImage.width
|
||||
height: statusRoundImage.height
|
||||
sourceSize.width: parent.width * 2
|
||||
sourceSize.height: parent.height * 2
|
||||
sourceSize.width: parent.implicitWidth
|
||||
sourceSize.height: parent.implicitHeight
|
||||
fillMode: Image.PreserveAspectFit
|
||||
anchors.centerIn: parent
|
||||
cache: true
|
||||
}
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@ StatusChatListCategory 0.1 StatusChatListCategory.qml
|
||||
StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
|
||||
StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
|
||||
StatusChatToolBar 0.1 StatusChatToolBar.qml
|
||||
StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
|
||||
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
|
||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||
StatusListItem 0.1 StatusListItem.qml
|
||||
@@ -19,5 +18,3 @@ 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
|
||||
|
||||
@@ -1,265 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import QtQuick.Controls 2.14 as QC
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
|
||||
Item {
|
||||
id: statusBaseInput
|
||||
|
||||
property bool multiline: false
|
||||
|
||||
property bool clearable: false
|
||||
|
||||
property alias inputMethodHints: edit.inputMethodHints
|
||||
|
||||
property alias selectedText: edit.selectedText
|
||||
property alias selectedTextColor: edit.selectedTextColor
|
||||
property alias selectionStart: edit.selectionStart
|
||||
property alias selectionEnd: edit.selectionEnd
|
||||
property alias cursorPosition: edit.cursorPosition
|
||||
|
||||
property alias edit: edit
|
||||
property alias text: edit.text
|
||||
|
||||
property alias color: edit.color
|
||||
property alias font: edit.font
|
||||
property alias focussed: edit.activeFocus
|
||||
property alias verticalAlignmet: edit.verticalAlignment
|
||||
property alias horizontalAlignment: edit.horizontalAlignment
|
||||
|
||||
property alias placeholderText: placeholder.text
|
||||
property alias placeholderTextColor: placeholder.color
|
||||
property alias placeholderFont: placeholder.font
|
||||
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property real topPadding: 12
|
||||
property real bottomPadding: 12
|
||||
|
||||
property real minimumHeight: 0
|
||||
property real maximumHeight: 0
|
||||
property int maximumLength: 0
|
||||
|
||||
property bool valid: true
|
||||
property bool pristine: true
|
||||
property bool dirty: false
|
||||
property bool pending: false
|
||||
property bool leftIcon: true
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 24
|
||||
height: 24
|
||||
name: ""
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
property Item component
|
||||
|
||||
onClearableChanged: {
|
||||
if (clearable && !component) {
|
||||
clearButtonLoader.active = true
|
||||
clearButtonLoader.parent = statusBaseInputComponentSlot
|
||||
} else {
|
||||
clearButtonLoader.active = false
|
||||
}
|
||||
}
|
||||
|
||||
onComponentChanged: {
|
||||
if (!!component) {
|
||||
component.parent = statusBaseInputComponentSlot
|
||||
}
|
||||
}
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
|
||||
|
||||
Rectangle {
|
||||
width: parent.width
|
||||
height: maximumHeight != 0 ? Math.min(
|
||||
minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
|
||||
: statusBaseInput.implicitHeight, maximumHeight) : parent.height
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
|
||||
clip: true
|
||||
|
||||
border.width: 1
|
||||
border.color: {
|
||||
if (!statusBaseInput.valid && statusBaseInput.dirty) {
|
||||
return Theme.palette.dangerColor1;
|
||||
}
|
||||
if (edit.activeFocus) {
|
||||
return Theme.palette.primaryColor1;
|
||||
}
|
||||
return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
|
||||
}
|
||||
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
enabled: !edit.activeFocus
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.IBeamCursor
|
||||
onClicked: {
|
||||
edit.forceActiveFocus()
|
||||
}
|
||||
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
anchors.topMargin: 10
|
||||
anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
|
||||
anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
|
||||
anchors.leftMargin: 10
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: statusBaseInput.icon.name
|
||||
width: statusBaseInput.icon.width
|
||||
height: statusBaseInput.icon.height
|
||||
color: statusBaseInput.icon.color
|
||||
visible: !!statusBaseInput.icon.name
|
||||
}
|
||||
|
||||
Flickable {
|
||||
id: flick
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
|
||||
statusIcon.right : parent.left
|
||||
anchors.right: {
|
||||
if (!!statusBaseInput.component) {
|
||||
return statusBaseInputComponentSlot.left
|
||||
}
|
||||
return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
|
||||
}
|
||||
anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
|
||||
: statusBaseInput.leftPadding
|
||||
anchors.rightMargin: {
|
||||
return clearable ? clearButtonLoader.width + 12 :
|
||||
(statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
|
||||
}
|
||||
anchors.topMargin: statusBaseInput.topPadding
|
||||
anchors.bottomMargin: statusBaseInput.bottomPadding
|
||||
contentWidth: edit.paintedWidth
|
||||
contentHeight: edit.paintedHeight
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
|
||||
function ensureVisible(r) {
|
||||
if (contentX >= r.x)
|
||||
contentX = r.x;
|
||||
else if (contentX+width <= r.x+r.width)
|
||||
contentX = r.x+r.width-width;
|
||||
if (contentY >= r.y)
|
||||
contentY = r.y;
|
||||
else if (contentY+height <= r.y+r.height)
|
||||
contentY = r.y+r.height-height;
|
||||
}
|
||||
TextEdit {
|
||||
id: edit
|
||||
property string previousText: text
|
||||
width: flick.width
|
||||
height: flick.height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
selectByMouse: true
|
||||
selectionColor: Theme.palette.primaryColor2
|
||||
selectedTextColor: color
|
||||
focus: true
|
||||
font.pixelSize: 15
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
|
||||
wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
|
||||
onActiveFocusChanged: {
|
||||
if (statusBaseInput.pristine) {
|
||||
statusBaseInput.pristine = false
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onReturnPressed: {
|
||||
if (multiline) {
|
||||
event.accepted = false
|
||||
} else {
|
||||
event.accepted = true
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onEnterPressed: {
|
||||
if (multiline) {
|
||||
event.accepted = false
|
||||
} else {
|
||||
event.accepted = true
|
||||
}
|
||||
}
|
||||
|
||||
Keys.forwardTo: [statusBaseInput]
|
||||
|
||||
onTextChanged: {
|
||||
statusBaseInput.dirty = true
|
||||
if (statusBaseInput.maximumLength > 0) {
|
||||
if (text.length > statusBaseInput.maximumLength) {
|
||||
var cursor = cursorPosition;
|
||||
text = previousText;
|
||||
if (cursor > text.length) {
|
||||
cursorPosition = text.length;
|
||||
} else {
|
||||
cursorPosition = cursor-1;
|
||||
}
|
||||
}
|
||||
previousText = text
|
||||
}
|
||||
}
|
||||
StatusBaseText {
|
||||
id: placeholder
|
||||
visible: (edit.text.length === 0)
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: statusBaseInput.rightPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 15
|
||||
elide: StatusBaseText.ElideRight
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
|
||||
Theme.palette.directColor6
|
||||
}
|
||||
}
|
||||
|
||||
} // Flickable
|
||||
|
||||
Item {
|
||||
id: statusBaseInputComponentSlot
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
width: childrenRect.width
|
||||
height: childrenRect.height
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
} // Rectangle
|
||||
|
||||
Loader {
|
||||
id: clearButtonLoader
|
||||
sourceComponent: StatusFlatRoundButton {
|
||||
id: clearButton
|
||||
visible: edit.text.length != 0 &&
|
||||
statusBaseInput.clearable &&
|
||||
!statusBaseInput.multiline &&
|
||||
edit.activeFocus
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 24
|
||||
height: 24
|
||||
icon.name: "clear"
|
||||
icon.width: 16
|
||||
icon.height: 16
|
||||
icon.color: Theme.palette.baseColor1
|
||||
onClicked: {
|
||||
edit.clear()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
@@ -7,11 +7,11 @@ import StatusQ.Components 0.1
|
||||
Rectangle {
|
||||
id: statusChatInfoButton
|
||||
|
||||
implicitWidth: identicon.width +
|
||||
Math.max(
|
||||
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.implicitWidth,
|
||||
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.implicitWidth
|
||||
) + 8
|
||||
implicitWidth: identicon.width +
|
||||
Math.max(
|
||||
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonTitle.width,
|
||||
statusChatInfoButtonTitle.anchors.leftMargin + statusChatInfoButtonSubTitle.width
|
||||
) + 8
|
||||
implicitHeight: 48
|
||||
|
||||
property string title: ""
|
||||
@@ -22,30 +22,26 @@ Rectangle {
|
||||
property StatusIconSettings icon: StatusIconSettings {}
|
||||
property int type: StatusChatInfoButton.Type.PublicChat
|
||||
property alias tooltip: statusToolTip
|
||||
property alias sensor: sensor
|
||||
|
||||
signal clicked(var mouse)
|
||||
signal pinnedMessagesCountClicked(var mouse)
|
||||
signal unmute()
|
||||
|
||||
enum Type {
|
||||
Unknown0, // 0
|
||||
OneToOneChat, // 1
|
||||
PublicChat, // 2
|
||||
GroupChat, // 3
|
||||
Unknown1, // 4
|
||||
Unknown2, // 5
|
||||
CommunityChat // 6
|
||||
PublicChat,
|
||||
GroupChat,
|
||||
CommunityChat,
|
||||
OneToOneChat
|
||||
}
|
||||
|
||||
radius: 8
|
||||
color: sensor.enabled && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
|
||||
color: sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
|
||||
onClicked: statusChatInfoButton.clicked(mouse)
|
||||
|
||||
@@ -57,8 +53,8 @@ Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
sourceComponent: !!statusChatInfoButton.image.source.toString() ?
|
||||
statusRoundImageComponent :
|
||||
statusLetterIdenticonComponent
|
||||
statusRoundImageComponent :
|
||||
statusLetterIdenticonComponent
|
||||
}
|
||||
|
||||
Component {
|
||||
@@ -73,8 +69,6 @@ Rectangle {
|
||||
height: parent.height
|
||||
image.source: statusChatInfoButton.image.source
|
||||
showLoadingIndicator: true
|
||||
border.width: statusChatInfoButton.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
Loader {
|
||||
sourceComponent: statusLetterIdenticonComponent
|
||||
@@ -99,20 +93,12 @@ Rectangle {
|
||||
Item {
|
||||
id: statusChatInfoButtonTitle
|
||||
anchors.top: identicon.top
|
||||
anchors.topMargin: statusChatInfoButtonSubTitle.visible ? 0 : 8
|
||||
anchors.left: identicon.right
|
||||
anchors.leftMargin: 8
|
||||
|
||||
width: Math.min(parent.width - anchors.leftMargin
|
||||
- identicon.width - identicon.anchors.leftMargin,
|
||||
implicitWidth)
|
||||
width: statusIcon.width + chatName.anchors.leftMargin + chatName.width + (mutedIcon.visible ? mutedIcon.width + mutedIcon.anchors.leftMargin : 0)
|
||||
height: chatName.height
|
||||
|
||||
implicitWidth: statusIcon.width + chatName.anchors.leftMargin + chatName.implicitWidth
|
||||
+ mutedDelta
|
||||
|
||||
property real mutedDelta: mutedIcon.visible ? mutedIcon.width + 8 : 0
|
||||
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
anchors.top: parent.top
|
||||
@@ -124,17 +110,17 @@ Rectangle {
|
||||
color: statusChatInfoButton.muted ? Theme.palette.baseColor1 : Theme.palette.directColor1
|
||||
icon: {
|
||||
switch (statusChatInfoButton.type) {
|
||||
case StatusChatInfoButton.Type.PublicCat:
|
||||
return "tiny/public-chat"
|
||||
break;
|
||||
case StatusChatInfoButton.Type.GroupChat:
|
||||
return "tiny/group"
|
||||
break;
|
||||
case StatusChatInfoButton.Type.CommunityChat:
|
||||
return "tiny/channel"
|
||||
break;
|
||||
default:
|
||||
return "tiny/public-chat"
|
||||
case StatusChatInfoButton.Type.PublicCat:
|
||||
return "tiny/public-chat"
|
||||
break;
|
||||
case StatusChatInfoButton.Type.GroupChat:
|
||||
return "tiny/group"
|
||||
break;
|
||||
case StatusChatInfoButton.Type.CommunityChat:
|
||||
return "tiny/channel"
|
||||
break;
|
||||
default:
|
||||
return "tiny/public-chat"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -146,15 +132,7 @@ Rectangle {
|
||||
anchors.leftMargin: statusIcon.visible ? 1 : 0
|
||||
anchors.top: parent.top
|
||||
|
||||
elide: Text.ElideRight
|
||||
width: Math.min(implicitWidth, parent.width
|
||||
- statusIcon.width
|
||||
- statusChatInfoButtonTitle.mutedDelta)
|
||||
|
||||
text: statusChatInfoButton.type === StatusChatInfoButton.Type.PublicChat &&
|
||||
!statusChatInfoButton.title.startsWith("#") ?
|
||||
"#" + statusChatInfoButton.title :
|
||||
statusChatInfoButton.title
|
||||
text: statusChatInfoButton.title
|
||||
color: statusChatInfoButton.muted ? Theme.palette.directColor5 : Theme.palette.directColor1
|
||||
font.pixelSize: 15
|
||||
font.weight: Font.Medium
|
||||
@@ -174,7 +152,7 @@ Rectangle {
|
||||
MouseArea {
|
||||
id: mutedIconSensor
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: statusChatInfoButton.unmute()
|
||||
}
|
||||
@@ -193,28 +171,14 @@ Rectangle {
|
||||
id: statusChatInfoButtonSubTitle
|
||||
anchors.left: statusChatInfoButtonTitle.left
|
||||
anchors.top: statusChatInfoButtonTitle.bottom
|
||||
visible: !!statusChatInfoButton.subTitle || statusChatInfoButton.pinnedMessagesCount > 0
|
||||
height: visible ? chatType.height : 0
|
||||
width: Math.min(parent.width - statusChatInfoButtonTitle.anchors.leftMargin
|
||||
- identicon.width - identicon.anchors.leftMargin - 8,
|
||||
implicitWidth)
|
||||
|
||||
implicitWidth: chatType.implicitWidth + pinIconDelta + 8
|
||||
|
||||
|
||||
property real pinIconDelta: pinIcon.visible ? pinIcon.width + pinIcon.anchors.leftMargin
|
||||
+ divider.width + divider.anchors.leftMargin
|
||||
: 0
|
||||
height: chatType.height
|
||||
width: childrenRect.width
|
||||
|
||||
StatusBaseText {
|
||||
id: chatType
|
||||
text: statusChatInfoButton.subTitle
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 12
|
||||
|
||||
elide: Text.ElideRight
|
||||
width: Math.min(parent.width - (pinIcon.visible ? divider.width + divider.anchors.leftMargin + pinIcon.width + pinIcon.anchors.leftMargin : 0),
|
||||
implicitWidth)
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
@@ -225,13 +189,13 @@ Rectangle {
|
||||
anchors.left: chatType.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: chatType.verticalCenter
|
||||
visible: !!chatType.text && pinIcon.visible
|
||||
visible: pinIcon.visible
|
||||
}
|
||||
|
||||
StatusIcon {
|
||||
id: pinIcon
|
||||
|
||||
anchors.left: divider.visible ? divider.right : parent.left
|
||||
anchors.left: divider.right
|
||||
anchors.leftMargin: -2
|
||||
anchors.verticalCenter: chatType.verticalCenter
|
||||
height: 14
|
||||
@@ -256,7 +220,7 @@ Rectangle {
|
||||
id: pinCountSensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: statusChatInfoButton.pinnedMessagesCountClicked(mouse)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: statusChatListCategoryItemButton
|
||||
@@ -10,7 +9,7 @@ StatusFlatRoundButton {
|
||||
radius: 4
|
||||
|
||||
property bool highlighted: false
|
||||
property StatusTooltipSettings tooltip: StatusTooltipSettings {}
|
||||
property alias tooltip: statusToolTip
|
||||
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.width: 20
|
||||
@@ -23,9 +22,6 @@ StatusFlatRoundButton {
|
||||
StatusToolTip {
|
||||
id: statusToolTip
|
||||
visible: !!text && parent.hovered
|
||||
text: tooltip.text
|
||||
orientation: tooltip.orientation
|
||||
offset: tooltip.offset
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -36,7 +36,6 @@ CheckBox {
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
wrapMode: Text.WordWrap
|
||||
width: parent.width
|
||||
color: Theme.palette.directColor1
|
||||
leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
|
||||
: statusCheckBox.indicator.width
|
||||
}
|
||||
|
||||
@@ -34,7 +34,6 @@ Rectangle {
|
||||
property bool loading: false
|
||||
|
||||
property alias hovered: sensor.containsMouse
|
||||
property alias tooltip: statusToolTip
|
||||
|
||||
property bool highlighted: false
|
||||
|
||||
@@ -79,15 +78,6 @@ Rectangle {
|
||||
return "transparent";
|
||||
}
|
||||
}
|
||||
|
||||
property color highlightedColor: {
|
||||
switch(statusFlatRoundButton.type) {
|
||||
case StatusFlatRoundButton.Type.Primary:
|
||||
return Theme.palette.primaryColor3;
|
||||
case StatusFlatRoundButton.Type.Secondary:
|
||||
return Theme.palette.baseColor4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
implicitWidth: 44
|
||||
@@ -96,10 +86,8 @@ Rectangle {
|
||||
|
||||
color: {
|
||||
if (statusFlatRoundButton.enabled) {
|
||||
if (sensor.containsMouse) {
|
||||
return backgroundSettings.hoverColor
|
||||
}
|
||||
return highlighted ? backgroundSettings.highlightedColor : backgroundSettings.color
|
||||
return sensor.containsMouse || highlighted ? backgroundSettings.hoverColor
|
||||
: backgroundSettings.color
|
||||
} else {
|
||||
return backgroundSettings.disabledColor
|
||||
}
|
||||
@@ -152,9 +140,4 @@ Rectangle {
|
||||
onReleased: statusFlatRoundButton.released(mouse)
|
||||
onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
|
||||
} // Sensor
|
||||
|
||||
StatusToolTip {
|
||||
id: statusToolTip
|
||||
visible: !!text && parent.hovered
|
||||
} // Tooltip
|
||||
} // Rectangle
|
||||
|
||||
@@ -1,204 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Controls.Validators 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
implicitWidth: 480
|
||||
height: (label.visible ?
|
||||
label.anchors.topMargin +
|
||||
label.height :
|
||||
charLimitLabel.visible ?
|
||||
charLimitLabel.anchors.topMargin +
|
||||
charLimitLabel.height :
|
||||
0) +
|
||||
statusBaseInput.anchors.topMargin +
|
||||
statusBaseInput.height +
|
||||
(errorMessage.visible ?
|
||||
errorMessage.anchors.topMargin +
|
||||
errorMessage.height :
|
||||
0) + 8
|
||||
|
||||
property alias input: statusBaseInput
|
||||
property alias valid: statusBaseInput.valid
|
||||
property alias pending: statusBaseInput.pending
|
||||
property alias text: statusBaseInput.text
|
||||
property string label: ""
|
||||
property string secondaryLabel: ""
|
||||
property int charLimit: 0
|
||||
property string errorMessage: ""
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property list<StatusValidator> validators
|
||||
property list<StatusValidator> asyncValidators
|
||||
property int validationMode: StatusInput.ValidationMode.OnlyWhenDirty
|
||||
|
||||
property var pendingValidators: []
|
||||
|
||||
enum ValidationMode {
|
||||
OnlyWhenDirty, // validates input only after it has become dirty
|
||||
Always // validates input even before it has become dirty
|
||||
}
|
||||
|
||||
property var errors: ({})
|
||||
property var asyncErrors: ({})
|
||||
|
||||
function reset() {
|
||||
statusBaseInput.valid = false
|
||||
statusBaseInput.pristine = true
|
||||
statusBaseInput.text = ""
|
||||
errorMessage = ""
|
||||
}
|
||||
|
||||
function validate() {
|
||||
if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
|
||||
return
|
||||
}
|
||||
statusBaseInput.valid = true
|
||||
if (validators.length) {
|
||||
for (let idx in validators) {
|
||||
let validator = validators[idx]
|
||||
let result = validator.validate(statusBaseInput.text)
|
||||
|
||||
if (typeof result === "boolean" && result) {
|
||||
statusBaseInput.valid = statusBaseInput.valid && true
|
||||
delete errors[validator.name]
|
||||
} else {
|
||||
if (!errors) {
|
||||
errors = {}
|
||||
}
|
||||
result.errorMessage = validator.errorMessage
|
||||
errors[validator.name] = result
|
||||
statusBaseInput.valid = statusBaseInput.valid && false
|
||||
}
|
||||
}
|
||||
if (errors){
|
||||
let errs = Object.values(errors)
|
||||
if (errs && errs[0]) {
|
||||
errorMessage.text = errs[0].errorMessage || root.errorMessage;
|
||||
} else {
|
||||
errorMessage.text = ""
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (asyncValidators.length && !Object.values(errors).length) {
|
||||
root.pending = true
|
||||
for (let idx in asyncValidators) {
|
||||
let asyncValidator = asyncValidators[idx]
|
||||
if (pendingValidators.indexOf(asyncValidator.name) == -1) {
|
||||
asyncValidator.input = root
|
||||
pendingValidators.push(asyncValidator.name)
|
||||
asyncValidator.validate(statusBaseInput.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateValidity(validatorName, result) {
|
||||
if (!asyncErrors) {
|
||||
asyncErrors = {}
|
||||
}
|
||||
|
||||
if (typeof result === "boolean" && result) {
|
||||
if (asyncErrors[validatorName] !== undefined) {
|
||||
delete asyncErrors[validatorName]
|
||||
}
|
||||
errorMessage.text = ""
|
||||
} else {
|
||||
asyncErrors[validatorName] = result
|
||||
for (let idx in asyncValidators) {
|
||||
errorMessage.text = asyncValidators[idx].errorMessage || root.errorMessage
|
||||
break;
|
||||
}
|
||||
}
|
||||
pendingValidators = pendingValidators.filter(v => v !== validatorName)
|
||||
root.pending = pendingValidators.length > 0
|
||||
root.valid = Object.values(asyncErrors).length == 0
|
||||
}
|
||||
|
||||
Component.onCompleted: validate()
|
||||
|
||||
Row {
|
||||
id: labelRow
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.topMargin: visible ? 8 : 0
|
||||
anchors.leftMargin: root.leftPadding
|
||||
anchors.right: (charLimitLabel.visible ? charLimitLabel.right : parent.right)
|
||||
anchors.rightMargin: root.rightPadding
|
||||
height: visible ? 17 : 0
|
||||
visible: !!root.label
|
||||
spacing: 5
|
||||
StatusBaseText {
|
||||
id: label
|
||||
elide: Text.ElideRight
|
||||
text: root.label
|
||||
font.pixelSize: 15
|
||||
color: statusBaseInput.enabled ? Theme.palette.directColor1 : Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: secondaryLabel
|
||||
height: visible ? 17 : 0
|
||||
visible: !!root.secondaryLabel
|
||||
elide: Text.ElideRight
|
||||
text: root.secondaryLabel
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: charLimitLabel
|
||||
height: visible ? implicitHeight : 0
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: visible ? 11 : 0
|
||||
anchors.rightMargin: root.rightPadding
|
||||
visible: root.charLimit > 0
|
||||
|
||||
text: "%1 / %2".arg(statusBaseInput.text.length).arg(root.charLimit)
|
||||
font.pixelSize: 12
|
||||
color: statusBaseInput.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
|
||||
}
|
||||
|
||||
StatusBaseInput {
|
||||
id: statusBaseInput
|
||||
anchors.top: labelRow.visible ? labelRow.bottom :
|
||||
charLimitLabel.visible ? charLimitLabel.bottom : parent.top
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.topMargin: charLimitLabel.visible ? 11 : 8
|
||||
anchors.leftMargin: root.leftPadding
|
||||
anchors.rightMargin: root.rightPadding
|
||||
maximumLength: root.charLimit
|
||||
onTextChanged: root.validate()
|
||||
|
||||
Keys.forwardTo: [root]
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: errorMessage
|
||||
|
||||
anchors.top: statusBaseInput.bottom
|
||||
anchors.topMargin: 11
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.rightPadding
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: root.leftPadding
|
||||
|
||||
height: visible ? implicitHeight : 0
|
||||
visible: !!text && !statusBaseInput.valid
|
||||
|
||||
font.pixelSize: 12
|
||||
color: Theme.palette.dangerColor1
|
||||
|
||||
|
||||
horizontalAlignment: Text.AlignRight
|
||||
wrapMode: Text.WordWrap
|
||||
}
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.12
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Button {
|
||||
id: root
|
||||
implicitWidth: 446
|
||||
implicitHeight: 44
|
||||
|
||||
property color bgColor: Theme.palette.baseColor2
|
||||
property color contentColor: Theme.palette.baseColor1
|
||||
signal clicked()
|
||||
|
||||
background: Item {
|
||||
anchors.fill: parent
|
||||
Rectangle {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
radius: 8
|
||||
color: root.bgColor
|
||||
}
|
||||
StatusIcon {
|
||||
id: nextIcon
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: "next"
|
||||
color: !Qt.colorEqual(root.contentColor, Theme.palette.baseColor1)
|
||||
? root.contentColor : Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
StatusBaseText {
|
||||
id: textLabel
|
||||
anchors {
|
||||
fill: parent
|
||||
leftMargin: 16
|
||||
}
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
color: root.contentColor
|
||||
text: root.text
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
TabBar {
|
||||
id: statusSwitchTabBar
|
||||
padding: 1
|
||||
|
||||
background: Rectangle {
|
||||
implicitHeight: 36
|
||||
color: Theme.palette.directColor7
|
||||
radius: 8
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
TabButton {
|
||||
id: statusSwitchTabButton
|
||||
|
||||
contentItem: Item {
|
||||
height: 36
|
||||
MouseArea {
|
||||
id: sensor
|
||||
hoverEnabled: true
|
||||
anchors.fill: parent
|
||||
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onPressed: mouse.accepted = false
|
||||
onReleased: mouse.accepted = false
|
||||
|
||||
StatusBaseText {
|
||||
id: label
|
||||
text: statusSwitchTabButton.text
|
||||
color: Theme.palette.primaryColor1
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
id: controlBackground
|
||||
implicitHeight: 36
|
||||
implicitWidth: 148
|
||||
color: statusSwitchTabButton.checked ?
|
||||
Theme.palette.statusSwitchTab.backgroundColor :
|
||||
"transparent"
|
||||
radius: 8
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 0
|
||||
radius: 10
|
||||
samples: 25
|
||||
spread: 0
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,8 +15,6 @@ ToolTip {
|
||||
|
||||
property int maxWidth: 800
|
||||
property int orientation: StatusToolTip.Orientation.Top
|
||||
property int offset: 0
|
||||
property alias arrow: arrow
|
||||
|
||||
implicitWidth: Math.min(maxWidth, textContent.implicitWidth + 16)
|
||||
leftPadding: 8
|
||||
@@ -34,7 +32,6 @@ ToolTip {
|
||||
anchors.bottomMargin: 8
|
||||
}
|
||||
Rectangle {
|
||||
id: arrow
|
||||
color: statusToolTipContentBackground.color
|
||||
height: 20
|
||||
width: 20
|
||||
@@ -42,13 +39,13 @@ ToolTip {
|
||||
radius: 1
|
||||
x: {
|
||||
if (orientation === StatusToolTip.Orientation.Top || orientation === StatusToolTip.Orientation.Bottom) {
|
||||
return statusToolTipBackground.width / 2 - width / 2 + offset
|
||||
return statusToolTipBackground.width / 2 - width / 2
|
||||
}
|
||||
if (orientation === StatusToolTip.Orientation.Left) {
|
||||
return statusToolTipContentBackground.width - (width / 2) - 8 + offset
|
||||
return statusToolTipContentBackground.width - (width / 2) - 8
|
||||
}
|
||||
if (orientation === StatusToolTip.Orientation.Right) {
|
||||
return -width/2 + 8 + offset
|
||||
return -width/2 + 8
|
||||
}
|
||||
}
|
||||
y: {
|
||||
|
||||
@@ -1,15 +0,0 @@
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
StatusValidator {
|
||||
name: "addressOrEns"
|
||||
|
||||
errorMessage: "Please enter a valid address or ENS name."
|
||||
|
||||
validate: function (t) {
|
||||
return Utils.isValidAddress(t) || Utils.isValidEns(t) ?
|
||||
true :
|
||||
{ actual: t }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
StatusValidator {
|
||||
name: "address"
|
||||
|
||||
errorMessage: "Please enter a valid address."
|
||||
|
||||
validate: function (t) {
|
||||
return Utils.isValidAddress(t) ? true : { actual: t }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
StatusValidator {
|
||||
|
||||
property int minLength: 0
|
||||
|
||||
name: "minLength"
|
||||
|
||||
errorMessage: {
|
||||
minLength === 1 ?
|
||||
"Please enter a value" :
|
||||
`The value must be at least ${minLength} characters.`
|
||||
}
|
||||
|
||||
validate: function (value) {
|
||||
return value.length >= minLength ? true : {
|
||||
min: minLength,
|
||||
actual: value.length
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
QtObject {
|
||||
id: statusValidator
|
||||
|
||||
property string name: ""
|
||||
property string errorMessage: "invalid input"
|
||||
property StatusInput input
|
||||
|
||||
property var validate: function (value) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
module StatusQ.Controls.Validators
|
||||
|
||||
StatusAddressValidator 0.1 StatusAddressValidator.qml
|
||||
StatusAddressOrEnsValidator 0.1 StatusAddressOrEnsValidator.qml
|
||||
StatusValidator 0.1 StatusValidator.qml
|
||||
StatusMinLengthValidator 0.1 StatusMinLengthValidator.qml
|
||||
StatusMaxLengthValidator 0.1 StatusMaxLengthValidator.qml
|
||||
@@ -14,8 +14,3 @@ StatusSwitch 0.1 StatusSwitch.qml
|
||||
StatusRadioButton 0.1 StatusRadioButton.qml
|
||||
StatusCheckBox 0.1 StatusCheckBox.qml
|
||||
StatusSlider 0.1 StatusSlider.qml
|
||||
StatusBaseInput 0.1 StatusBaseInput.qml
|
||||
StatusInput 0.1 StatusInput.qml
|
||||
StatusPickerButton 0.1 StatusPickerButton.qml
|
||||
StatusSwitchTabButton 0.1 StatusSwitchTabButton.qml
|
||||
StatusSwitchTabBar 0.1 StatusSwitchTabBar.qml
|
||||
|
||||
@@ -12,20 +12,19 @@ Image {
|
||||
sourceSize.height: height
|
||||
fillMode: Image.PreserveAspectFit
|
||||
|
||||
antialiasing: true
|
||||
mipmap: true
|
||||
|
||||
onIconChanged: {
|
||||
if (icon !== "") {
|
||||
source = "../../assets/img/icons/" + icon + ".svg";
|
||||
}
|
||||
}
|
||||
|
||||
layer.mipmap: true
|
||||
layer.smooth: true
|
||||
layer.format: ShaderEffectSource.RGBA
|
||||
layer.enabled:!Qt.colorEqual(statusIcon.color, "transparent")
|
||||
layer.effect: ColorOverlay {
|
||||
ColorOverlay {
|
||||
visible: !Qt.colorEqual(statusIcon.color, "transparent")
|
||||
anchors.fill: statusIcon
|
||||
source: statusIcon
|
||||
color: statusIcon.color
|
||||
antialiasing: true
|
||||
smooth: true
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,6 +10,5 @@ QtObject {
|
||||
property color color
|
||||
property url source
|
||||
property int rotation
|
||||
property bool isLetterIdenticon
|
||||
property StatusIconBackgroundSettings background: StatusIconBackgroundSettings {}
|
||||
}
|
||||
|
||||
@@ -6,6 +6,5 @@ QtObject {
|
||||
property url source
|
||||
property real width
|
||||
property real height
|
||||
property bool isIdenticon: false
|
||||
}
|
||||
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
QtObject {
|
||||
property string title
|
||||
property string subTitle
|
||||
property int titleElide: Text.ElideRight
|
||||
property int subTitleElide: Text.ElideRight
|
||||
property Component popupMenu
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
isIdenticon: false
|
||||
}
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
isLetterIdenticon: false
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
QtObject {
|
||||
property string text: ""
|
||||
property int orientation: StatusToolTip.Orientation.Top
|
||||
property int offset: 0
|
||||
}
|
||||
@@ -13,7 +13,6 @@ QtObject {
|
||||
'blue3': '#88B0FF',
|
||||
'blue4': '#869EFF',
|
||||
'blue5': '#AAC6FF',
|
||||
'blue6': '#ECEFFC',
|
||||
|
||||
'brown': '#8B3131',
|
||||
'brown2': '#9B832F',
|
||||
|
||||
@@ -68,30 +68,6 @@ ThemePalette {
|
||||
source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
|
||||
}
|
||||
|
||||
property QtObject codeFont: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontThin: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontExtraLight: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontLight: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontMedium: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontBold: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
|
||||
}
|
||||
|
||||
property color dropShadow: getColor('black', 0.08)
|
||||
|
||||
baseColor1: getColor('graphite5')
|
||||
@@ -128,7 +104,6 @@ ThemePalette {
|
||||
directColor6: getColor('white', 0.2)
|
||||
directColor7: getColor('white', 0.1)
|
||||
directColor8: getColor('white', 0.05)
|
||||
directColor9: getColor('white', 0.2)
|
||||
|
||||
indirectColor1: getColor('black')
|
||||
indirectColor2: getColor('black', 0.7)
|
||||
@@ -157,7 +132,6 @@ ThemePalette {
|
||||
|
||||
property QtObject statusListItem: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
property color secondaryHoverBackgroundColor: primaryColor3
|
||||
}
|
||||
|
||||
property QtObject statusChatListItem: QtObject {
|
||||
@@ -189,21 +163,5 @@ ThemePalette {
|
||||
property color hoverBackgroundColor: directColor7
|
||||
property color separatorColor: directColor7
|
||||
}
|
||||
|
||||
property QtObject statusModal: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
}
|
||||
|
||||
property QtObject statusRoundedImage: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
}
|
||||
|
||||
property QtObject statusChatInput: QtObject {
|
||||
property color secondaryBackgroundColor: "#414141"
|
||||
}
|
||||
|
||||
property QtObject statusSwitchTab: QtObject {
|
||||
property color backgroundColor: baseColor3
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -68,30 +68,6 @@ ThemePalette {
|
||||
source: "../../../assets/fonts/InterStatus/InterStatus-Black.otf"
|
||||
}
|
||||
|
||||
property QtObject codeFont: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Regular.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontThin: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Thin.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontExtraLight: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-ExtraLight.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontLight: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Light.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontMedium: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Medium.ttf"
|
||||
}
|
||||
|
||||
property QtObject codeFontBold: FontLoader {
|
||||
source: "../../../assets/fonts/RobotoMono/RobotoMono-Bold.ttf"
|
||||
}
|
||||
|
||||
baseColor1: getColor('grey5')
|
||||
baseColor2: getColor('grey4')
|
||||
baseColor3: getColor('grey3')
|
||||
@@ -126,7 +102,6 @@ ThemePalette {
|
||||
directColor6: getColor('black', 0.3)
|
||||
directColor7: getColor('black', 0.1)
|
||||
directColor8: getColor('black', 0.05)
|
||||
directColor9: getColor('black', 0.2)
|
||||
|
||||
indirectColor1: getColor('white')
|
||||
indirectColor2: getColor('white', 0.7)
|
||||
@@ -155,7 +130,6 @@ ThemePalette {
|
||||
|
||||
property QtObject statusListItem: QtObject {
|
||||
property color backgroundColor: white
|
||||
property color secondaryHoverBackgroundColor: getColor('blue6')
|
||||
}
|
||||
|
||||
property QtObject statusChatListItem: QtObject {
|
||||
@@ -187,21 +161,5 @@ ThemePalette {
|
||||
property color hoverBackgroundColor: baseColor2
|
||||
property color separatorColor: baseColor2
|
||||
}
|
||||
|
||||
property QtObject statusModal: QtObject {
|
||||
property color backgroundColor: white
|
||||
}
|
||||
|
||||
property QtObject statusRoundedImage: QtObject {
|
||||
property color backgroundColor: white
|
||||
}
|
||||
|
||||
property QtObject statusChatInput: QtObject {
|
||||
property color secondaryBackgroundColor: "#E2E6E8"
|
||||
}
|
||||
|
||||
property QtObject statusSwitchTab: QtObject {
|
||||
property color backgroundColor: white
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -24,18 +24,10 @@ QtObject {
|
||||
property FontLoader monoFontExtraBold
|
||||
property FontLoader monoFontBlack
|
||||
|
||||
property FontLoader codeFont
|
||||
property FontLoader codeFontThin
|
||||
property FontLoader codeFontExtraLight
|
||||
property FontLoader codeFontLight
|
||||
property FontLoader codeFontMedium
|
||||
property FontLoader codeFontBold
|
||||
|
||||
property color black: getColor('black')
|
||||
property color white: getColor('white')
|
||||
|
||||
property color dropShadow: getColor('black', 0.12)
|
||||
property color backdropColor: getColor('black', 0.4)
|
||||
|
||||
property color baseColor1
|
||||
property color baseColor2
|
||||
@@ -71,7 +63,6 @@ QtObject {
|
||||
property color directColor6
|
||||
property color directColor7
|
||||
property color directColor8
|
||||
property color directColor9
|
||||
|
||||
property color indirectColor1
|
||||
property color indirectColor2
|
||||
@@ -100,7 +91,6 @@ QtObject {
|
||||
|
||||
property QtObject statusListItem: QtObject {
|
||||
property color backgroundColor
|
||||
property color secondaryHoverBackgroundColor
|
||||
}
|
||||
|
||||
property QtObject statusChatListItem: QtObject {
|
||||
@@ -134,22 +124,6 @@ QtObject {
|
||||
property color separatorColor
|
||||
}
|
||||
|
||||
property QtObject statusModal: QtObject {
|
||||
property color backgroundColor
|
||||
}
|
||||
|
||||
property QtObject statusRoundedImage: QtObject {
|
||||
property color backgroundColor
|
||||
}
|
||||
|
||||
property QtObject statusChatInput: QtObject {
|
||||
property color secondaryBackgroundColor
|
||||
}
|
||||
|
||||
property QtObject statusSwitchTab: QtObject {
|
||||
property color backgroundColor
|
||||
}
|
||||
|
||||
function alphaColor(color, alpha) {
|
||||
let actualColor = Qt.darker(color, 1)
|
||||
actualColor.a = alpha
|
||||
|
||||
@@ -1,31 +0,0 @@
|
||||
pragma Singleton
|
||||
|
||||
import QtQuick 2.13
|
||||
|
||||
QtObject {
|
||||
function getAbsolutePosition(node) {
|
||||
var returnPos = {};
|
||||
returnPos.x = 0;
|
||||
returnPos.y = 0;
|
||||
if (node !== undefined && node !== null) {
|
||||
var parentValue = getAbsolutePosition(node.parent);
|
||||
returnPos.x = parentValue.x + node.x;
|
||||
returnPos.y = parentValue.y + node.y;
|
||||
}
|
||||
return returnPos;
|
||||
}
|
||||
function isValidAddress(inputValue) {
|
||||
return inputValue !== "0x" && /^0x[a-fA-F0-9]{40}$/.test(inputValue)
|
||||
}
|
||||
|
||||
function isValidEns(inputValue) {
|
||||
if (!inputValue) {
|
||||
return false
|
||||
}
|
||||
const isEmail = /(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])/.test(inputValue)
|
||||
const isDomain = /(?:(?:(?<thld>[\w\-]*)(?:\.))?(?<sld>[\w\-]*))\.(?<tld>[\w\-]*)/.test(inputValue)
|
||||
return isEmail || isDomain || (inputValue.startsWith("@") && inputValue.length > 1)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
module StatusQ.Core.Utils
|
||||
|
||||
singleton Utils 0.1 Utils.qml
|
||||
|
||||
@@ -5,5 +5,4 @@ StatusIcon 0.1 StatusIcon.qml
|
||||
StatusIconSettings 0.1 StatusIconSettings.qml
|
||||
StatusIconBackgroundSettings 0.1 StatusIconBackgroundSettings.qml
|
||||
StatusImageSettings 0.1 StatusImageSettings.qml
|
||||
StatusModalHeaderSettings 0.1 StatusModalHeaderSettings.qml
|
||||
StatusTooltipSettings 0.1 StatusTooltipSettings.qml
|
||||
|
||||
|
||||
@@ -10,8 +10,6 @@ Rectangle {
|
||||
id: statusAppNavBar
|
||||
|
||||
property StatusNavBarTabButton navBarChatButton
|
||||
property StatusNavBarTabButton navBarProfileButton
|
||||
|
||||
property list<StatusNavBarTabButton> navBarTabButtons
|
||||
property alias navBarCommunityTabButtons: navBarCommunityTabButtons
|
||||
|
||||
@@ -36,12 +34,6 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
|
||||
onNavBarProfileButtonChanged: {
|
||||
if (!!navBarProfileButton) {
|
||||
navBarProfileButton.parent = navBarProfileButtonSlot
|
||||
}
|
||||
}
|
||||
|
||||
onNavBarTabButtonsChanged: {
|
||||
if (navBarTabButtons.length) {
|
||||
for (let idx in navBarTabButtons) {
|
||||
@@ -83,9 +75,7 @@ Rectangle {
|
||||
if (navBarContentHeight > statusAppNavBar.height) {
|
||||
height = statusAppNavBar.height -
|
||||
statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
|
||||
(!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin) -
|
||||
navBarProfileButtonSlot.height -
|
||||
navBarProfileButtonSlot.anchors.bottomMargin
|
||||
(!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
|
||||
bottomPadding = 16
|
||||
topPadding = 16
|
||||
} else {
|
||||
@@ -132,7 +122,7 @@ Rectangle {
|
||||
if (navBarContentHeight > statusAppNavBar.height) {
|
||||
anchors.top = undefined
|
||||
anchors.topMargin = 0
|
||||
anchors.bottom = navBarProfileButtonSlot.top
|
||||
anchors.bottom = statusAppNavBar.bottom
|
||||
anchors.bottomMargin = 32
|
||||
} else {
|
||||
anchors.bottom = undefined
|
||||
@@ -142,15 +132,5 @@ Rectangle {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: navBarProfileButtonSlot
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: visible ? statusAppNavBar.navBarProfileButton.height : 0
|
||||
width: visible ? statusAppNavBar.navBarProfileButton.width : 0
|
||||
visible: !!statusAppNavBar.navBarProfileButton
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: visible ? 32 : 0
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,54 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
SplitView {
|
||||
id: root
|
||||
implicitWidth: 822
|
||||
implicitHeight: 600
|
||||
|
||||
handle: Item { }
|
||||
|
||||
property Item leftPanel
|
||||
property Item centerPanel
|
||||
property Component rightPanel
|
||||
property bool showRightPanel
|
||||
|
||||
Control {
|
||||
SplitView.minimumWidth: 300
|
||||
SplitView.preferredWidth: 300
|
||||
SplitView.fillHeight: true
|
||||
contentItem: (!!leftPanel) ? leftPanel : null
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor4
|
||||
}
|
||||
}
|
||||
|
||||
Control {
|
||||
SplitView.minimumWidth: 300
|
||||
SplitView.fillWidth: true
|
||||
SplitView.fillHeight: true
|
||||
leftPadding: -5
|
||||
contentItem: (!!centerPanel) ? centerPanel : null
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.statusAppLayout.rightPanelBackgroundColor
|
||||
}
|
||||
}
|
||||
|
||||
Control {
|
||||
SplitView.preferredWidth: root.showRightPanel ? 250 : 0
|
||||
SplitView.minimumWidth: root.showRightPanel ? 58 : 0
|
||||
opacity: root.showRightPanel ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
contentItem: Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: (!!rightPanel) ? rightPanel : null
|
||||
}
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor4
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,4 +3,5 @@ module StatusQ.Layout
|
||||
StatusAppLayout 0.1 StatusAppLayout.qml
|
||||
StatusAppNavBar 0.1 StatusAppNavBar.qml
|
||||
StatusAppTwoPanelLayout 0.1 StatusAppTwoPanelLayout.qml
|
||||
StatusAppThreePanelLayout 0.1 StatusAppThreePanelLayout.qml
|
||||
|
||||
|
||||
|
||||
@@ -1,118 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
Rectangle {
|
||||
id: windowsTitleBar
|
||||
|
||||
property string title: titleText.text
|
||||
|
||||
signal close();
|
||||
signal minimised();
|
||||
signal maximized();
|
||||
|
||||
implicitHeight: 32
|
||||
color: Theme.palette.baseColor5
|
||||
|
||||
Row {
|
||||
id: titleLayout
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
spacing: 4
|
||||
|
||||
StatusIcon {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 16
|
||||
height: 16
|
||||
icon: "windows_titlebar/status"
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: qsTr("Status")
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: buttonsLayout
|
||||
anchors.right: parent.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
height: parent.height
|
||||
|
||||
Rectangle {
|
||||
width: 48
|
||||
height: parent.height
|
||||
|
||||
color: minimizeSensor.containsMouse ? (minimizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
|
||||
: "transparent"
|
||||
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 10
|
||||
height: 1
|
||||
icon: "windows_titlebar/minimise"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: minimizeSensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: windowsTitleBar.minimised()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 48
|
||||
height: parent.height
|
||||
|
||||
color: maximizeSensor.containsMouse ? (maximizeSensor.pressed ? Theme.palette.directColor9 : Theme.palette.directColor8)
|
||||
: "transparent"
|
||||
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 10
|
||||
height: 10
|
||||
icon: "windows_titlebar/maximize"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: maximizeSensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: windowsTitleBar.maximized()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
width: 48
|
||||
height: parent.height
|
||||
|
||||
color: closeSensor.containsMouse ? (closeSensor.pressed ? "#DB1518" : "#ED4245")
|
||||
: "transparent"
|
||||
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
width: 10
|
||||
height: 10
|
||||
icon: "windows_titlebar/close"
|
||||
color: closeSensor.containsMouse ? Theme.palette.white : Theme.palette.directColor1
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: closeSensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: windowsTitleBar.closed()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
module StatusQ.Platform
|
||||
|
||||
StatusMacTrafficLights 0.1 StatusMacTrafficLights.qml
|
||||
StatusWindowsTitleBar 0.1 StatusWindowsTitleBar.qml
|
||||
|
||||
|
||||
|
||||
@@ -1,24 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
MenuSeparator {
|
||||
id: root
|
||||
property string text
|
||||
height: visible && enabled ? implicitHeight : 0
|
||||
contentItem: Item {
|
||||
implicitWidth: 176
|
||||
implicitHeight: 16
|
||||
StatusBaseText {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 12
|
||||
text: root.text
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,17 +9,7 @@ Action {
|
||||
Normal,
|
||||
Danger
|
||||
}
|
||||
icon.color: "transparent"
|
||||
|
||||
property int type: StatusMenuItem.Type.Normal
|
||||
property real iconRotation: 0
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isIdenticon: false
|
||||
}
|
||||
property StatusIconSettings iconSettings: StatusIconSettings {
|
||||
isLetterIdenticon: false
|
||||
background: StatusIconBackgroundSettings {}
|
||||
color: "transparent"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import QtQuick.Controls 2.13
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
MenuSeparator {
|
||||
height: visible && enabled ? implicitHeight : 0
|
||||
contentItem: Rectangle {
|
||||
implicitWidth: 176
|
||||
implicitHeight: 1
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14 as QC
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
|
||||
import "statusModal" as Spares
|
||||
|
||||
QC.Popup {
|
||||
id: statusModal
|
||||
|
||||
property alias headerActionButton: headerImpl.actionButton
|
||||
|
||||
property StatusModalHeaderSettings header: StatusModalHeaderSettings {}
|
||||
property alias rightButtons: footerImpl.rightButtons
|
||||
property alias leftButtons: footerImpl.leftButtons
|
||||
property bool showHeader: true
|
||||
property bool showFooter: true
|
||||
|
||||
signal editButtonClicked()
|
||||
|
||||
parent: QC.Overlay.overlay
|
||||
|
||||
width: 480
|
||||
|
||||
topPadding: headerImpl.implicitHeight
|
||||
bottomPadding: footerImpl.implicitHeight
|
||||
leftPadding: 0
|
||||
rightPadding: 0
|
||||
|
||||
modal: true
|
||||
|
||||
QC.Overlay.modal: Rectangle {
|
||||
color: Theme.palette.backdropColor
|
||||
}
|
||||
|
||||
|
||||
background: Rectangle {
|
||||
color: Theme.palette.statusModal.backgroundColor
|
||||
radius: 8
|
||||
|
||||
Spares.StatusModalHeader {
|
||||
id: headerImpl
|
||||
anchors.top: parent.top
|
||||
width: visible ? parent.width : 0
|
||||
|
||||
visible: statusModal.showHeader
|
||||
title: header.title
|
||||
titleElide: header.titleElide
|
||||
subTitle: header.subTitle
|
||||
subTitleElide: header.subTitleElide
|
||||
image: header.image
|
||||
icon: header.icon
|
||||
popupMenu: header.popupMenu
|
||||
|
||||
onEditButtonClicked: statusModal.editButtonClicked()
|
||||
onClose: statusModal.close()
|
||||
}
|
||||
|
||||
Spares.StatusModalFooter {
|
||||
id: footerImpl
|
||||
anchors.bottom: parent.bottom
|
||||
width: visible ? parent.width : 0
|
||||
visible: statusModal.showFooter
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Column {
|
||||
spacing: 0
|
||||
|
||||
property real topPadding: 0
|
||||
property real bottomPadding: 0
|
||||
|
||||
width: 480
|
||||
|
||||
Item {
|
||||
id: topPaddingItem
|
||||
height: parent.topPadding
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: divider
|
||||
color: Theme.palette.baseColor2
|
||||
height: 1
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Item {
|
||||
id: bottomPaddingItem
|
||||
height: parent.bottomPadding
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
@@ -4,28 +4,21 @@ import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
|
||||
Menu {
|
||||
id: statusPopupMenu
|
||||
closePolicy: Popup.CloseOnPressOutside | Popup.CloseOnEscape
|
||||
|
||||
closePolicy: Popup.CloseOnReleaseOutside | Popup.CloseOnEscape
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
|
||||
property int menuItemCount: 0
|
||||
property var subMenuItemIcons: []
|
||||
|
||||
property var openHandler
|
||||
property var closeHandler
|
||||
|
||||
dim: true
|
||||
Overlay.modeless: MouseArea {}
|
||||
|
||||
|
||||
signal menuItemClicked(int menuIndex)
|
||||
|
||||
onOpened: {
|
||||
if (typeof openHandler === "function") {
|
||||
openHandler()
|
||||
@@ -40,21 +33,19 @@ Menu {
|
||||
|
||||
delegate: MenuItem {
|
||||
id: statusPopupMenuItem
|
||||
implicitWidth: parent ? parent.width : 0
|
||||
|
||||
implicitHeight: action.enabled ? 38 : 0
|
||||
|
||||
property int subMenuIndex
|
||||
|
||||
Component.onCompleted: {
|
||||
if (!!subMenu) {
|
||||
if (subMenu) {
|
||||
subMenuIndex = statusPopupMenu.menuItemCount
|
||||
statusPopupMenu.menuItemCount += 1
|
||||
}
|
||||
}
|
||||
|
||||
action: StatusMenuItem {
|
||||
onTriggered: { statusPopupMenu.menuItemClicked(statusPopupMenuItem.subMenuIndex); }
|
||||
}
|
||||
action: StatusMenuItem {}
|
||||
|
||||
Component {
|
||||
id: indicatorComponent
|
||||
@@ -63,32 +54,13 @@ Menu {
|
||||
implicitHeight: 24
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
width: {
|
||||
let width = statusPopupMenuItem.action.icon.width ||
|
||||
statusPopupMenuItem.action.iconSettings.width
|
||||
|
||||
return !!width ? width : 18
|
||||
}
|
||||
width: !!statusPopupMenuItem.action.icon.width ?
|
||||
statusPopupMenuItem.action.icon.width : 18
|
||||
rotation: statusPopupMenuItem.action.iconRotation
|
||||
icon: {
|
||||
if (statusPopupMenuItem.subMenu && !!statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] &&
|
||||
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon.toString() !== "") {
|
||||
return statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].icon;
|
||||
} else if (!!statusPopupMenuItem.action && statusPopupMenuItem.action.icon.name !== "") {
|
||||
return statusPopupMenuItem.action.icon.name;
|
||||
} else if (statusPopupMenuItem.action.iconSettings.name !== "") {
|
||||
return statusPopupMenuItem.action.iconSettings.name;
|
||||
} else {
|
||||
return "";
|
||||
}
|
||||
}
|
||||
icon: statusPopupMenuItem.subMenu ?
|
||||
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex] :
|
||||
statusPopupMenuItem.action.icon.name
|
||||
color: {
|
||||
let c = statusPopupMenuItem.action.iconSettings.color ||
|
||||
statusPopupMenuItem.action.icon.color
|
||||
|
||||
if (!Qt.colorEqual(c, "transparent")) {
|
||||
return c
|
||||
}
|
||||
switch (statusPopupMenuItem.action.type) {
|
||||
case StatusMenuItem.Type.Danger:
|
||||
return Theme.palette.dangerColor1
|
||||
@@ -101,80 +73,18 @@ Menu {
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticonCmp
|
||||
Item {
|
||||
implicitWidth: 24
|
||||
implicitHeight: 24
|
||||
|
||||
StatusLetterIdenticon {
|
||||
anchors.centerIn: parent
|
||||
width: 16
|
||||
height: 16
|
||||
color: {
|
||||
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex]
|
||||
return subMenuItemIcon && subMenuItemIcon.color ? subMenuItemIcon.color : statusPopupMenuItem.action.iconSettings.background.color
|
||||
}
|
||||
name: statusPopupMenuItem.text
|
||||
letterSize: 11
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusRoundImageCmp
|
||||
|
||||
Item {
|
||||
implicitWidth: 24
|
||||
implicitHeight: 24
|
||||
StatusRoundedImage {
|
||||
anchors.centerIn: parent
|
||||
width: statusPopupMenuItem.action.image.width
|
||||
height: statusPopupMenuItem.action.image.height
|
||||
image.source: statusPopupMenuItem.subMenu ?
|
||||
statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].source :
|
||||
statusPopupMenuItem.action.image.source
|
||||
border.width: (statusPopupMenuItem.subMenu && statusPopupMenu.subMenuItemIcons[statusPopupMenuItem.subMenuIndex].isIdenticon) ||
|
||||
statusPopupMenuItem.action.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
indicator: Loader {
|
||||
sourceComponent: {
|
||||
let subMenuItemIcon = statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]
|
||||
|
||||
if ((parent.subMenu && subMenuItemIcon && subMenuItemIcon.source) ||
|
||||
statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()) {
|
||||
return statusRoundImageCmp
|
||||
}
|
||||
|
||||
return (parent.subMenu && subMenuItemIcon && subMenuItemIcon.isLetterIdenticon) ||
|
||||
(statusPopupMenuItem.action.iconsSettings && statusPopupMenuItem.action.iconSettings.isLetterIdenticon) ?
|
||||
statusLetterIdenticonCmp : indicatorComponent
|
||||
}
|
||||
sourceComponent: indicatorComponent
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
active: {
|
||||
if (enabled) {
|
||||
let hasIconSettings = !!statusPopupMenuItem.action.icon.name ||
|
||||
(statusPopupMenuItem.action.iconSettings &&
|
||||
(!!statusPopupMenuItem.action.iconSettings.name || !!statusPopupMenuItem.action.iconSettings.isLetterIdenticon))
|
||||
|
||||
let hasImageSettings = statusPopupMenuItem.action.image && !!statusPopupMenuItem.action.image.source.toString()
|
||||
|
||||
return enabled && (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex]) || hasIconSettings || hasImageSettings
|
||||
}
|
||||
return false
|
||||
}
|
||||
active: (parent.subMenu && !!statusPopupMenu.subMenuItemIcons[parent.subMenuIndex] ||
|
||||
!!statusPopupMenuItem.action.icon.name) &&
|
||||
statusPopupMenuItem.action.enabled
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.left: statusPopupMenuItem.indicator.right
|
||||
anchors.right: arrowIcon.visible ? arrowIcon.left : arrowIcon.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.leftMargin: 4
|
||||
|
||||
horizontalAlignment: Text.AlignLeft
|
||||
@@ -196,7 +106,6 @@ Menu {
|
||||
}
|
||||
|
||||
arrow: StatusIcon {
|
||||
id: arrowIcon
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
@@ -208,7 +117,7 @@ Menu {
|
||||
|
||||
background: Rectangle {
|
||||
color: {
|
||||
if (statusPopupMenuItem.hovered) {
|
||||
if (hovered) {
|
||||
return statusPopupMenuItem.action.type === StatusMenuItem.Type.Danger ? Theme.palette.dangerColor3 : Theme.palette.statusPopupMenu.hoverBackgroundColor
|
||||
}
|
||||
return "transparent"
|
||||
@@ -217,8 +126,9 @@ Menu {
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: statusPopupMenuItem.action.enabled
|
||||
onPressed: mouse.accepted = false
|
||||
}
|
||||
@@ -250,4 +160,5 @@ Menu {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusPopupMenu {
|
||||
id: root
|
||||
|
||||
property var searchPopup
|
||||
property var locationModel
|
||||
|
||||
signal itemClicked(string firstLevelItemValue, string secondLevelItemValue)
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Anywhere"
|
||||
onTriggered: {
|
||||
searchPopup.resetSearchSelection();
|
||||
root.itemClicked("", "");
|
||||
}
|
||||
}
|
||||
StatusMenuSeparator { }
|
||||
//Dummy item to keep seperator in right position
|
||||
MenuItem { implicitHeight: 0.00001 }
|
||||
Instantiator {
|
||||
model: root.locationModel
|
||||
delegate: Loader {
|
||||
sourceComponent: (!!model.subItems && model.subItems.count > 0) ? subMenus : subMenuItemComponent
|
||||
onLoaded: {
|
||||
if (!!model.subItems && model.subItems.count > 0) {
|
||||
item.parentValue = model.value
|
||||
item.title = model.title;
|
||||
item.subItemsModel = model.subItems;
|
||||
item.parentIconName = model.iconName;
|
||||
item.parentImageSource = model.imageSource;
|
||||
item.parentIdenticonColor = !!model.iconColor ? model.iconColor : Theme.palette.primaryColor1;
|
||||
item.parentIsIdenticon = model.isIdenticon;
|
||||
root.subMenuItemIcons.push({
|
||||
source: model.imageSource,
|
||||
icon: model.iconName,
|
||||
isIdenticon: model.isIdenticon,
|
||||
color: model.iconColor,
|
||||
isLetterIdenticon: !model.imageSource && !model.iconName
|
||||
});
|
||||
root.insertMenu(index+2, item);
|
||||
} else {
|
||||
item.value = model.value
|
||||
item.text = model.title;
|
||||
item.iconSettings.name = model.iconName;
|
||||
item.iconSettings.color = model.iconColor;
|
||||
item.iconSettings.isLetterIdenticon = !model.imageSource && !model.iconName
|
||||
item.image.source = model.imageSource;
|
||||
item.image.isIdenticon = model.isIdenticon;
|
||||
root.insertItem(index+2, item);
|
||||
}
|
||||
}
|
||||
}
|
||||
onObjectRemoved: { root.removeItem(root.takeItem(index+2)); }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: subMenuItemComponent
|
||||
StatusSearchPopupMenuItem {
|
||||
onClicked: {
|
||||
searchPopup.resetSearchSelection()
|
||||
searchPopup.setSearchSelection(text,
|
||||
"",
|
||||
image.source,
|
||||
image.isIdenticon,
|
||||
iconSettings.name,
|
||||
iconSettings.color)
|
||||
root.itemClicked(value, "")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: subMenus
|
||||
StatusPopupMenu {
|
||||
id: menu
|
||||
property var subItemsModel
|
||||
property string parentValue
|
||||
property string parentIconName
|
||||
property string parentImageSource
|
||||
property string parentIdenticonColor
|
||||
property string parentIsIdenticon
|
||||
Repeater {
|
||||
id: menuLoader
|
||||
model: menu.subItemsModel
|
||||
property string parentValue: menu.parentValue
|
||||
property string parentTitleText: menu.title
|
||||
property string parentIconName: menu.parentIconName
|
||||
property string parentImageSource: menu.parentImageSource
|
||||
property string parentIdenticonColor: menu.parentIdenticonColor
|
||||
property string parentIsIdenticon: menu.parentIsIdenticon
|
||||
Loader {
|
||||
id: subMenuLoader
|
||||
sourceComponent: StatusSearchPopupMenuItem {
|
||||
value: model.value
|
||||
text: model.text
|
||||
image.source: model.imageSource
|
||||
iconSettings.name: model.iconName
|
||||
iconSettings.color: model.iconColor
|
||||
image.isIdenticon: model.isIdenticon
|
||||
onTriggered: {
|
||||
searchPopup.resetSearchSelection()
|
||||
if (menuLoader.parentTitleText === "Chat") {
|
||||
searchPopup.setSearchSelection(model.text,
|
||||
"",
|
||||
model.imageSource,
|
||||
model.isIdenticon,
|
||||
model.iconName,
|
||||
model.iconColor)
|
||||
} else {
|
||||
searchPopup.setSearchSelection(menuLoader.parentTitleText,
|
||||
model.text,
|
||||
menuLoader.parentImageSource,
|
||||
menuLoader.parentIsIdenticon,
|
||||
menuLoader.parentIconName,
|
||||
menuLoader.parentIdenticonColor)
|
||||
}
|
||||
root.itemClicked(menuLoader.parentValue, value)
|
||||
root.dismiss()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onMenuItemClicked: {
|
||||
searchPopup.resetSearchSelection()
|
||||
let menuItem = root.menuAt(root.currentIndex)
|
||||
searchPopup.setSearchSelection(menuItem.title,
|
||||
"",
|
||||
menuItem.parentImageSource,
|
||||
menuItem.parentIsIdenticon,
|
||||
menuItem.parentIconName,
|
||||
menuItem.parentIdenticonColor)
|
||||
root.itemClicked(menuItem.parentValue, "")
|
||||
//TODO fix error "QML StatusPopupMenu: cannot find any window to open popup in."
|
||||
root.dismiss()
|
||||
}
|
||||
}
|
||||
@@ -1,362 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.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
|
||||
width: 700
|
||||
height: (!!searchResults && (searchResults.count >= 0) && (searchText !== "")) ? (((searchResults.count < 5)) ? 560 : 770) : 142 //970
|
||||
anchors.centerIn: parent
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
|
||||
property string searchText: contentItem.searchText
|
||||
property string noResultsLabel: "No results"
|
||||
property string defaultSearchLocationText: "Anywhere"
|
||||
property bool loading
|
||||
property Menu searchOptionsPopupMenu: Menu { }
|
||||
property var searchResults: [ ]
|
||||
property var searchSelectionButton
|
||||
|
||||
signal resultItemClicked(string itemId)
|
||||
signal resultItemTitleClicked(string titleId)
|
||||
|
||||
property var formatTimestampFn: function (ts) {
|
||||
return ts
|
||||
}
|
||||
|
||||
function setSearchSelection(text = "",
|
||||
secondaryText = "",
|
||||
imageSource = "",
|
||||
isIdenticon = "",
|
||||
iconName = "",
|
||||
iconColor = "") {
|
||||
searchSelectionButton.primaryText = text
|
||||
searchSelectionButton.secondaryText = secondaryText
|
||||
searchSelectionButton.image.source = imageSource
|
||||
searchSelectionButton.image.isIdenticon = isIdenticon
|
||||
searchSelectionButton.iconSettings.name = iconName
|
||||
searchSelectionButton.iconSettings.color = iconColor !== ""? iconColor : Theme.palette.primaryColor1
|
||||
searchSelectionButton.iconSettings.isLetterIdenticon = !iconName && !imageSource
|
||||
}
|
||||
|
||||
function resetSearchSelection() {
|
||||
setSearchSelection(defaultSearchLocationText, "", "", false, "", "transparent")
|
||||
}
|
||||
|
||||
function forceActiveFocus() {
|
||||
contentItem.searchInput.forceActiveFocus()
|
||||
}
|
||||
|
||||
onOpened: {
|
||||
forceActiveFocus();
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
width: parent.width
|
||||
height: root.height
|
||||
property alias searchText: inputText.text
|
||||
property alias searchInput: inputText
|
||||
|
||||
ColumnLayout {
|
||||
id: contentItemColumn
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 63
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
width: 40
|
||||
height: 40
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: "search"
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
TextEdit {
|
||||
id: inputText
|
||||
anchors.left: statusIcon.right
|
||||
anchors.leftMargin: 15
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
focus: true
|
||||
font.pixelSize: 28
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
StatusMenuSeparator {
|
||||
topPadding: 0
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
Item {
|
||||
Layout.preferredWidth: parent.width
|
||||
Layout.preferredHeight: 58
|
||||
Button {
|
||||
id: searchOptionsMenuButton
|
||||
|
||||
Component.onCompleted: {
|
||||
root.searchSelectionButton = searchOptionsMenuButton
|
||||
}
|
||||
|
||||
property string prefixText: "In"
|
||||
property string primaryText: ""
|
||||
property string secondaryText: ""
|
||||
property StatusIconSettings iconSettings: StatusIconSettings {
|
||||
name: ""
|
||||
isLetterIdenticon: false
|
||||
}
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
source: ""
|
||||
isIdenticon: false
|
||||
}
|
||||
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
implicitWidth: (contentItemRowLayout.width + 24)
|
||||
implicitHeight: 32
|
||||
|
||||
background: Rectangle {
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.searchOptionsPopupMenu.popup();
|
||||
|
||||
RowLayout {
|
||||
id: contentItemRowLayout
|
||||
anchors.centerIn: parent
|
||||
spacing: 2
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
text: searchOptionsMenuButton.prefixText + ": "
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
|
||||
Loader {
|
||||
Layout.preferredWidth: active ? 16 : 0
|
||||
Layout.preferredHeight: 16
|
||||
active: searchOptionsMenuButton.primaryText !== defaultSearchLocationText &&
|
||||
(searchOptionsMenuButton.iconSettings.name ||
|
||||
searchOptionsMenuButton.iconSettings.isLetterIdenticon ||
|
||||
!!searchOptionsMenuButton.image.source.toString())
|
||||
|
||||
sourceComponent: {
|
||||
if (!!searchOptionsMenuButton.image.source.toString()) {
|
||||
return statusRoundedImageCmp
|
||||
}
|
||||
if (!!searchOptionsMenuButton.iconSettings.isLetterIdenticon || !searchOptionsMenuButton.iconSettings.name) {
|
||||
return statusLetterIdenticonCmp
|
||||
}
|
||||
return statusIconCmp
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusIconCmp
|
||||
StatusIcon {
|
||||
width: 16
|
||||
icon: searchOptionsMenuButton.iconSettings.name
|
||||
color: searchOptionsMenuButton.iconSettings.color
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusRoundedImageCmp
|
||||
Item {
|
||||
width: 16
|
||||
height: 16
|
||||
StatusRoundedImage {
|
||||
id: statusRoundedImage
|
||||
implicitWidth: parent.width
|
||||
implicitHeight: parent.height
|
||||
image.source: searchOptionsMenuButton.image.source
|
||||
color: searchOptionsMenuButton.image.isIdenticon ?
|
||||
Theme.palette.statusRoundedImage.backgroundColor :
|
||||
"transparent"
|
||||
border.width: searchOptionsMenuButton.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
|
||||
Loader {
|
||||
sourceComponent: statusLetterIdenticonCmp
|
||||
active: statusRoundedImage.image.status === Image.Error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticonCmp
|
||||
StatusLetterIdenticon {
|
||||
implicitWidth: 16
|
||||
implicitHeight: 16
|
||||
letterSize: 11
|
||||
color: searchOptionsMenuButton.iconSettings.color
|
||||
name: searchOptionsMenuButton.primaryText
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
text: searchOptionsMenuButton.primaryText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 14.5
|
||||
Layout.preferredHeight: 17.5
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!searchOptionsMenuButton.secondaryText
|
||||
color: Theme.palette.baseColor1
|
||||
icon: "next"
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 17.5
|
||||
Layout.preferredHeight: 17.5
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!searchOptionsMenuButton.secondaryText
|
||||
color: Theme.palette.directColor1
|
||||
icon: "channel"
|
||||
}
|
||||
StatusBaseText {
|
||||
color: Theme.palette.directColor1
|
||||
visible: !!searchOptionsMenuButton.secondaryText
|
||||
text: searchOptionsMenuButton.secondaryText
|
||||
font.weight: Font.Medium
|
||||
}
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: 17.5
|
||||
Layout.preferredHeight: 14.5
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
icon: "chevron-down"
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: closeButton
|
||||
width: 32
|
||||
height: 32
|
||||
anchors.left: searchOptionsMenuButton.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
opacity: (searchOptionsMenuButton.primaryText === defaultSearchLocationText) ? 0.0 : 1.0
|
||||
visible: (opacity > 0.1)
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.name: "close"
|
||||
icon.color: Theme.palette.directColor1
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
onClicked: { root.resetSearchSelection(); }
|
||||
}
|
||||
}
|
||||
|
||||
StatusMenuSeparator { Layout.fillWidth: true; visible: (root.height > 142) }
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
clip: true
|
||||
ListView {
|
||||
id: view
|
||||
anchors.fill: parent
|
||||
anchors {
|
||||
leftMargin: 0
|
||||
rightMargin: 0
|
||||
bottomMargin: 67
|
||||
}
|
||||
visible: (!root.loading && (count > 0))
|
||||
model: root.searchResults
|
||||
ScrollBar.vertical: ScrollBar { }
|
||||
delegate: StatusListItem {
|
||||
width: view.width
|
||||
itemId: model.itemId
|
||||
titleId: model.titleId
|
||||
title: model.title
|
||||
statusListItemTitle.color: model.title.startsWith("@") ? Theme.palette.primaryColor1 : Theme.palette.directColor1
|
||||
subTitle: model.content
|
||||
radius: 0
|
||||
statusListItemSubTitle.height: model.content !== "" ? 20 : 0
|
||||
statusListItemSubTitle.elide: Text.ElideRight
|
||||
statusListItemSubTitle.color: Theme.palette.black
|
||||
icon.isLetterIdenticon: (model.image === "")
|
||||
icon.background.color: model.color
|
||||
titleAsideText: root.formatTimestampFn(model.time)
|
||||
image.source: model.image
|
||||
badge.primaryText: model.badgePrimaryText
|
||||
badge.secondaryText: model.badgeSecondaryText
|
||||
badge.image.source: model.badgeImage
|
||||
badge.icon.isLetterIdenticon: model.badgeIsLetterIdenticon
|
||||
badge.icon.color: model.badgeIconColor
|
||||
|
||||
onClicked: {
|
||||
root.resultItemClicked(itemId)
|
||||
}
|
||||
|
||||
onTitleClicked: {
|
||||
root.resultItemTitleClicked(titleId)
|
||||
}
|
||||
}
|
||||
section.property: "sectionName"
|
||||
section.criteria: ViewSection.FullString
|
||||
section.delegate: Item {
|
||||
height: 34
|
||||
width: view.width
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: section
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusLoadingIndicator {
|
||||
anchors.centerIn: parent
|
||||
visible: root.loading
|
||||
color: Theme.palette.primaryColor1
|
||||
width: 24
|
||||
height: 24
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: root.noResultsLabel
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 13
|
||||
visible: ((inputText.text !== "") && (view.count === 0) && !root.loading)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
root.resetSearchSelection();
|
||||
root.loading = false;
|
||||
contentItem.searchText = "";
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
MenuItem {
|
||||
id: root
|
||||
implicitHeight: 38
|
||||
|
||||
property string value: ""
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isIdenticon: false
|
||||
}
|
||||
property StatusIconSettings iconSettings: StatusIconSettings {
|
||||
height: 16
|
||||
width: 16
|
||||
isLetterIdenticon: (root.image.source.toString() === ""
|
||||
&& root.iconSettings.name.toString() === "")
|
||||
background: StatusIconBackgroundSettings {}
|
||||
color: "transparent"
|
||||
}
|
||||
|
||||
background: Rectangle {
|
||||
color: root.hovered ? Theme.palette.statusPopupMenu.hoverBackgroundColor : "transparent"
|
||||
}
|
||||
|
||||
contentItem: RowLayout {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 12
|
||||
StatusIcon {
|
||||
Layout.preferredWidth: visible ? root.iconSettings.width : 0
|
||||
Layout.preferredHeight: visible ? root.iconSettings.height : 0
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: !!root.iconSettings.name && !root.image.source.toString()
|
||||
icon: root.iconSettings.name
|
||||
color: (icon === "channel")? Theme.palette.directColor1 : root.iconSettings.color
|
||||
}
|
||||
StatusRoundedImage {
|
||||
Layout.preferredWidth: visible ? root.image.width : 0
|
||||
Layout.preferredHeight: visible ? root.image.height : 0
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: root.image.source.toString() !== ""
|
||||
image.source: root.image.source
|
||||
border.width: root.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
}
|
||||
StatusLetterIdenticon {
|
||||
Layout.preferredWidth: visible ? root.iconSettings.width : 0
|
||||
Layout.preferredHeight: visible ? root.iconSettings.height : 0
|
||||
visible: root.iconSettings.isLetterIdenticon && !root.iconSettings.name && !root.image.source.toString()
|
||||
color: root.iconSettings.color
|
||||
name: root.text
|
||||
letterSize: 11
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
text: root.text
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onPressed: mouse.accepted = false
|
||||
}
|
||||
}
|
||||
@@ -3,9 +3,3 @@ module StatusQ.Popups
|
||||
StatusMenuSeparator 0.1 StatusMenuSeparator.qml
|
||||
StatusPopupMenu 0.1 StatusPopupMenu.qml
|
||||
StatusMenuItem 0.1 StatusMenuItem.qml
|
||||
StatusMenuHeadline 0.1 StatusMenuHeadline.qml
|
||||
StatusModal 0.1 StatusModal.qml
|
||||
StatusSearchPopup 0.1 StatusSearchPopup.qml
|
||||
StatusModalDivider 0.1 StatusModalDivider.qml
|
||||
StatusSearchPopupMenuItem 0.1 StatusSearchPopupMenuItem.qml
|
||||
StatusSearchLocationMenu 0.1 StatusSearchLocationMenu.qml
|
||||
|
||||
@@ -1,125 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Row {
|
||||
id: statusImageWithTitle
|
||||
|
||||
property alias title: headerTitle.text
|
||||
property alias subTitle: headerSubTitle.text
|
||||
property int titleElide: Text.ElideRight
|
||||
property int subTitleElide: Text.ElideRight
|
||||
property bool editable: false
|
||||
|
||||
signal editButtonClicked
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
isIdenticon: false
|
||||
}
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
isLetterIdenticon: false
|
||||
}
|
||||
|
||||
spacing: 8
|
||||
|
||||
Loader {
|
||||
id: iconOrImage
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: active ? 40 : 0
|
||||
sourceComponent: {
|
||||
if (statusImageWithTitle.icon.isLetterIdenticon) {
|
||||
return statusLetterIdenticon
|
||||
}
|
||||
return statusRoundedImageCmp
|
||||
}
|
||||
active: statusImageWithTitle.icon.isLetterIdenticon ||
|
||||
!!statusImageWithTitle.image.source.toString()
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusLetterIdenticon
|
||||
StatusLetterIdenticon {
|
||||
width: statusImageWithTitle.icon.width
|
||||
height: statusImageWithTitle.icon.height
|
||||
color: statusImageWithTitle.icon.background.color
|
||||
name: statusImageWithTitle.title
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusRoundedImageCmp
|
||||
Item {
|
||||
width: statusImageWithTitle.image.width
|
||||
height: statusImageWithTitle.image.height
|
||||
StatusRoundedImage {
|
||||
id: statusRoundedImage
|
||||
image.source: statusImageWithTitle.image.source
|
||||
width: statusImageWithTitle.image.width
|
||||
height: statusImageWithTitle.image.height
|
||||
color: statusImageWithTitle.image.isIdenticon ?
|
||||
Theme.palette.statusRoundedImage.backgroundColor :
|
||||
"transparent"
|
||||
border.width: statusImageWithTitle.image.isIdenticon ? 1 : 0
|
||||
border.color: Theme.palette.directColor7
|
||||
showLoadingIndicator: true
|
||||
}
|
||||
Loader {
|
||||
sourceComponent: statusLetterIdenticon
|
||||
active: statusRoundedImage.image.status === Image.Error
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
id: textLayout
|
||||
width: !iconOrImage.active ? parent.width :
|
||||
parent.width - iconOrImage.width - parent.spacing
|
||||
Row {
|
||||
id: headerTitleRow
|
||||
width: parent.width
|
||||
spacing: 4
|
||||
StatusBaseText {
|
||||
id: headerTitle
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.pixelSize: 17
|
||||
font.bold: true
|
||||
elide: statusImageWithTitle.titleElide
|
||||
color: Theme.palette.directColor1
|
||||
width: !editButton.visible ? parent.width :
|
||||
parent.width - editButton.width - parent.spacing
|
||||
}
|
||||
StatusFlatRoundButton {
|
||||
id: editButton
|
||||
visible: statusImageWithTitle.editable
|
||||
anchors.bottom: headerTitle.bottom
|
||||
anchors.bottomMargin: -1
|
||||
height: 24
|
||||
width: 24
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.name: "pencil"
|
||||
icon.color: Theme.palette.directColor1
|
||||
icon.width: 12.5
|
||||
icon.height: 12.5
|
||||
|
||||
onClicked: statusImageWithTitle.editButtonClicked()
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: headerSubTitle
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.pixelSize: 15
|
||||
color:Theme.palette.baseColor1
|
||||
width: parent.width
|
||||
elide: statusImageWithTitle.subTitleElide
|
||||
visible: !!statusImageWithTitle.subTitle
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,76 +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
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
|
||||
Rectangle {
|
||||
id: statusModalFooter
|
||||
|
||||
property list<Item> leftButtons
|
||||
property list<StatusBaseButton> rightButtons
|
||||
|
||||
radius: 8
|
||||
|
||||
color: Theme.palette.statusModal.backgroundColor
|
||||
|
||||
onLeftButtonsChanged: {
|
||||
for (let idx in leftButtons) {
|
||||
leftButtons[idx].parent = leftButtonsLayout
|
||||
}
|
||||
}
|
||||
|
||||
onRightButtonsChanged: {
|
||||
for (let idx in rightButtons) {
|
||||
rightButtons[idx].parent = rightButtonsLayout
|
||||
}
|
||||
}
|
||||
|
||||
implicitHeight: visible ? rootLayout.implicitHeight + 30 : 0
|
||||
|
||||
RowLayout {
|
||||
id: rootLayout
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 18
|
||||
|
||||
Row {
|
||||
id: leftButtonsLayout
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
|
||||
spacing: 16
|
||||
}
|
||||
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
implicitHeight: 1
|
||||
}
|
||||
|
||||
Row {
|
||||
id: rightButtonsLayout
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
|
||||
spacing: 16
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
|
||||
StatusModalDivider {
|
||||
visible: (statusModalFooter.leftButtons.length || statusModalFooter.rightButtons.length) && rootLayout.height > 1
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,102 +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
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
Rectangle {
|
||||
id: statusModalHeader
|
||||
|
||||
property alias title: imageWithTitle.title
|
||||
property alias subTitle: imageWithTitle.subTitle
|
||||
property int titleElide
|
||||
property int subTitleElide
|
||||
property alias actionButton: actionButtonLoader.sourceComponent
|
||||
|
||||
property alias image: imageWithTitle.image
|
||||
property alias icon: imageWithTitle.icon
|
||||
property bool editable: false
|
||||
property Component popupMenu
|
||||
|
||||
signal editButtonClicked
|
||||
signal close
|
||||
|
||||
implicitHeight: visible? Math.max(closeButton.height, imageWithTitle.implicitHeight) + 32 : 0
|
||||
implicitWidth: 480
|
||||
|
||||
radius: 16
|
||||
|
||||
color: Theme.palette.statusModal.backgroundColor
|
||||
|
||||
onPopupMenuChanged: {
|
||||
if (!!popupMenu) {
|
||||
popupMenuSlot.sourceComponent = popupMenu
|
||||
}
|
||||
}
|
||||
|
||||
StatusImageWithTitle {
|
||||
id: imageWithTitle
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: actionButtonLoader.left
|
||||
anchors.leftMargin: 16
|
||||
|
||||
editable: statusModalHeader.editable
|
||||
titleElide: statusModalHeader.titleElide
|
||||
subTitleElide: statusModalHeader.subTitleElide
|
||||
onEditButtonClicked: statusModalHeader.editButtonClicked()
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: imageWithTitle
|
||||
visible: !!statusModalHeader.popupMenu
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
popupMenuSlot.item.popup(imageWithTitle.x, imageWithTitle.y + imageWithTitle.height + 8)
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: actionButtonLoader
|
||||
anchors.right: closeButton.left
|
||||
anchors.rightMargin: 8
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: closeButton
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 20
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
width: 32
|
||||
height: 32
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.name: "close"
|
||||
icon.color: Theme.palette.directColor1
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
|
||||
onClicked: statusModalHeader.close()
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
height: parent.radius
|
||||
color: parent.color
|
||||
|
||||
StatusModalDivider {
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusModalHeader.popupMenu
|
||||
}
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1,4 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z" fill="#939BA1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.24014 16.1491C7.1427 16.5194 7.48062 16.8573 7.85093 16.7599L14.6218 14.9781C14.7961 14.9322 14.9322 14.7961 14.9781 14.6218L16.7599 7.85093C16.8573 7.48062 16.5194 7.1427 16.1491 7.24014L9.37823 9.02194C9.20394 9.06781 9.06781 9.20394 9.02194 9.37823L7.24014 16.1491ZM9.25791 14.3756C9.19944 14.5978 9.4022 14.8006 9.62438 14.7421L13.3938 13.7501C13.5681 13.7043 13.7043 13.5681 13.7501 13.3938L14.7421 9.62438C14.8006 9.4022 14.5978 9.19944 14.3756 9.25791L10.6062 10.2499C10.4319 10.2957 10.2957 10.4319 10.2499 10.6062L9.25791 14.3756Z" fill="#939BA1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,3 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.26285 18.4743C7.26285 19.7317 6.24355 20.751 4.98618 20.751C3.7288 20.751 2.7095 19.7317 2.7095 18.4743C2.7095 17.2169 3.7288 16.1976 4.98618 16.1976C6.24355 16.1976 7.26285 17.2169 7.26285 18.4743ZM4.98618 22.251C6.81518 22.251 8.34052 20.9508 8.68838 19.2243H15.3116C15.6595 20.9508 17.1848 22.251 19.0138 22.251C21.0996 22.251 22.7905 20.5601 22.7905 18.4743C22.7905 16.3885 21.0996 14.6976 19.0138 14.6976C17.1848 14.6976 15.6595 15.9978 15.3116 17.7243H8.68838C8.34052 15.9978 6.81518 14.6976 4.98618 14.6976C2.90038 14.6976 1.2095 16.3885 1.2095 18.4743C1.2095 20.5601 2.90038 22.251 4.98618 22.251ZM21.2905 18.4743C21.2905 19.7317 20.2712 20.751 19.0138 20.751C17.7564 20.751 16.7371 19.7317 16.7371 18.4743C16.7371 17.2169 17.7564 16.1976 19.0138 16.1976C20.2712 16.1976 21.2905 17.2169 21.2905 18.4743ZM14.2767 5.5257C14.2767 6.78307 13.2574 7.80237 12 7.80237C10.7426 7.80237 9.72332 6.78307 9.72332 5.5257C9.72332 4.26832 10.7426 3.24902 12 3.24902C13.2574 3.24902 14.2767 4.26832 14.2767 5.5257ZM15.7767 5.5257C15.7767 6.68953 15.2502 7.73042 14.4225 8.4232L17.9099 14.8615C17.4208 15.0107 16.9739 15.2565 16.5914 15.5767L13.104 9.13846C12.7548 9.24503 12.3841 9.30237 12 9.30237C11.6159 9.30237 11.2452 9.24504 10.896 9.13846L7.40862 15.5767C7.02607 15.2565 6.57917 15.0107 6.09013 14.8615L9.57752 8.42321C8.74977 7.73042 8.22332 6.68954 8.22332 5.5257C8.22332 3.4399 9.91419 1.74902 12 1.74902C14.0858 1.74902 15.7767 3.4399 15.7767 5.5257Z" fill="#939BA1"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
@@ -1,4 +0,0 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="8.125" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
|
||||
<rect x="13.375" y="6.5" width="2.5" height="11" rx="1.25" fill="black"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 250 B |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user