Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Anastasiya S
|
ea6e651b2a | ||
|
Anastasiya S
|
0a08bb80c0 |
@@ -1,17 +0,0 @@
|
||||
### Checklist
|
||||
|
||||
- [ ] follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)
|
||||
- the scope should be the component's name e.g: `feat(StatusListItem): ... `
|
||||
- when adding new components, the scope is the module e.g: `feat(StatusQ.Controls): ...`
|
||||
- [ ] add documentation if necessary (new component, new feature)
|
||||
- [ ] update sandbox app
|
||||
- in case of new component, add new component page
|
||||
- in case of new features, add variation to existing component page
|
||||
- nice to have: add it to the demo application as well
|
||||
- [ ] test changes in both light and dark theme?
|
||||
- [ ] is this a breaking change?
|
||||
- [ ] use the dedicated `BREAKING CHANGE` commit message section
|
||||
- [ ] resolve breaking changes in [status-desktop](https://github.com/status-im/status-desktop)
|
||||
- [ ] (pre-merge) adapt code to breaking changes
|
||||
- [ ] (post-merge) update StatusQ submodule pointer
|
||||
- [ ] test changes in [status-desktop](https://github.com/status-im/status-desktop)
|
||||
@@ -13,7 +13,3 @@ Makefile
|
||||
*_qml.cpp
|
||||
*_qmlcache.qrc
|
||||
sandbox/qmlcache_loader.cpp
|
||||
doc/html
|
||||
CMakeLists.txt.user
|
||||
.vscode
|
||||
build/
|
||||
|
||||
-158
@@ -1,161 +1,3 @@
|
||||
<a name=""></a>
|
||||
## 0.25.0 (2022-03-07)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **@StatusListItem:** fix left padding ([f574e390](f574e390))
|
||||
* **StatusListItem:** add propagateTitleClicks property to StatusListItem ([8495fae8](8495fae8))
|
||||
* **StatusQ.Popups:** removed overlay setting (#557) ([665141f8](665141f8))
|
||||
* **StatusTagSelector:** Updates and fixes in the component ([07a5dc09](07a5dc09))
|
||||
* **build:** fix linux build ([9d06aae1](9d06aae1), closes [#413](413))
|
||||
* **sandbox:** Fix results popup component position ([cdf51fef](cdf51fef))
|
||||
|
||||
#### Features
|
||||
|
||||
* **@StatusListItem:** add option for tags ([381150a7](381150a7))
|
||||
* **StatusChatList:** Highlight chat item at creation time ([9e6fbe95](9e6fbe95))
|
||||
* **StatusChatListItem:** enable assigning emoji to chat item ([5fac8774](5fac8774))
|
||||
* **StatusContactVerificationIcons:** Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
|
||||
* **StatusQ:** Moving docs outside sandbox ([825999b1](825999b1))
|
||||
* **StatusQ.Core:** add new arrow-left icon ([e9f20be1](e9f20be1))
|
||||
* **StatusSmartIdenticon:** Add support for color rings in StatusSmartIdenticon (#553) ([3b86d13a](3b86d13a), closes [#517](517))
|
||||
|
||||
#### Breaking Changes
|
||||
|
||||
* **StatusContactVerificationIcons:** Create new row control that includes mutual connect and trust indicator icons (#559) ([c0f825c6](c0f825c6), closes [#542](542))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## 0.24.0 (2022-02-14)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusListItem:** add highlighted property ([5780f183](5780f183))
|
||||
* **StatusQ.Components:** Adding StatusWizardSteper component ([b7d6554b](b7d6554b), closes [#522](522))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.23.0 (2022-02-08)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* Icon components had wrong color in sandbox app ([b632c712](b632c712), closes [#538](538))
|
||||
* **StatusChatList:** unexisting property name for chat item fixed ([c2e07517](c2e07517))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusQ.Components:**
|
||||
* Adding StatusToastMessage ([7b290ddd](7b290ddd), closes [#521](521))
|
||||
* Adding StatusTagSelector component ([094dee49](094dee49), closes [#526](526))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.22.0 (2022-01-31)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusMemberListItem:** Implement `StatusMemberListItem` (#539) ([c5a605bf](c5a605bf), closes [#515](515))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.21.0 (2022-01-24)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **build:** broken MacOS build (#533) ([55901cf0](55901cf0))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusMessage:** Introducing a new StatusQ Component for Chat Messages ([ea955694](ea955694))
|
||||
* **StatusQ.Controls:** Introduce `StatusPasswordStrengthIndicator` ([626695da](626695da), closes [#528](528))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.20.0 (2022-01-17)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBanner:** introduce type variants for different banner styles ([35d12f44](35d12f44))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusBaseInput:** Corrects allignment of the placeholder text in the StatusBaseInput. ([5a416aa1](5a416aa1))
|
||||
* **build:** Windows build ([14ab4ce5](14ab4ce5))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.19.0 (2021-12-03)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusChatListItem:** This change fixes the issue of the chat list items getting a highlight even when they are not really hovered ([ab6bdf54](ab6bdf54))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusModal:** introduce `hasCloseButton` property ([2336b6aa](2336b6aa))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.18.0 (2021-11-30)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAppNavBar:** Fixed position of profile button on the NavBar ([419b7384](419b7384))
|
||||
* **StatusImageWithTitle:** Fix position of the edit title button ([8d2121ad](8d2121ad))
|
||||
* **StatusListItem:** ensure title is elided ([b7883e82](b7883e82))
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusListItem:** Expose the Aside text so that it can be modified from the outside ([f82ce8b7](f82ce8b7))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.17.1 (2021-11-19)
|
||||
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAccountSelector:** Adapt ui to data model changed ([db024436](db024436))
|
||||
* **StatusAssetSelector:** Fixed error of crypto balance not updated correctly ([2040d0f8](2040d0f8))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.17.0 (2021-11-10)
|
||||
|
||||
|
||||
#### Features
|
||||
|
||||
* **StatusBaseButton:** introduce `Tiny` size ([dee9f437](dee9f437))
|
||||
* **StatusQ.Controls.Validators:** introduce `StatusUrlValidator` ([a9155865](a9155865))
|
||||
|
||||
#### Bug Fixes
|
||||
|
||||
* **StatusAccountSelector:** adapt AccountSelector to new model (#482) ([ce8d3231](ce8d3231))
|
||||
* **StatusExpandibleItem:** add missing hover indicator in `Secondary` type ([e23dc533](e23dc533), closes [#478](478))
|
||||
* **StatusInput:** ensure validator messages are rendered when validators return boolean values ([f82cd7f5](f82cd7f5))
|
||||
* **StatusListItem:** This solves the issue of channel list overlpaing when a category is collapsed. ([0c715b17](0c715b17))
|
||||
* **StatusSearchPopup:** disable enter and return keys to avoid UI breakage ([fecfb2a7](fecfb2a7))
|
||||
* **StatusSlider:** slider background and handle should not depend on root's height ([31cfc883](31cfc883))
|
||||
|
||||
|
||||
|
||||
<a name=""></a>
|
||||
## Version 0.16.0 (2021-11-01)
|
||||
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
cmake_minimum_required(VERSION 3.19)
|
||||
|
||||
project(StatusQ)
|
||||
|
||||
add_subdirectory(tests)
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
@@ -1,19 +0,0 @@
|
||||
/*!
|
||||
\page statusq-index.html
|
||||
\title StatusQ
|
||||
\brief A components library for Status desktop client.
|
||||
|
||||
|
||||
StatusQ provides a collection of components....
|
||||
|
||||
StatusQ - Components and Interfaces
|
||||
\list
|
||||
\li \l{StatusQ Components}{Components}
|
||||
\li \l{StatusQ Controls}{Controls}
|
||||
\li \l{StatusQ Core}{Core}
|
||||
\li \l{StatusQ Layout}{Layout}
|
||||
\li \l{StatusQ Platform}{Platform}
|
||||
\li \l{StatusQ Popups}{Popups}
|
||||
\endlist
|
||||
*/
|
||||
|
||||
@@ -1,43 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Components 0.1
|
||||
\title StatusQ Components
|
||||
\brief Basic set of Components StatusQ components
|
||||
|
||||
This is a listing of all Components components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAddress}
|
||||
\li \l{StatusBadge}
|
||||
\li \l{StatusChatInfoToolBar}
|
||||
\li \l{StatusChatList}
|
||||
\li \l{StatusChatListItem}
|
||||
\li \l{StatusImageSettings}
|
||||
\li \l{StatusChatListCategory}
|
||||
\li \l{StatusChatListCategoryItem}
|
||||
\li \l{StatusChatListAndCategories}
|
||||
\li \l{StatusChatToolBar}
|
||||
\li \l{StatusContactRequestsIndicatorListItem}
|
||||
\li \l{StatusDescriptionListItem}
|
||||
\li \l{StatusLetterIdenticon}
|
||||
\li \l{StatusListItem}
|
||||
\li \l{StatusListPicker}
|
||||
\li \l{StatusListSectionHeadline}
|
||||
\li \l{StatusLoadingIndicator}
|
||||
\li \l{StatusMemberListItem}
|
||||
\li \l{StatusNavigationListItem}
|
||||
\li \l{StatusNavigationPanelHeadline}
|
||||
\li \l{StatusRoundIcon}
|
||||
\li \l{StatusRoundedImage}
|
||||
\li \l{StatusMacWindowButtons}
|
||||
\li \l{StatusListItemBadge}
|
||||
\li \l{StatusExpandableItem}
|
||||
\li \l{StatusSmartIdenticon}
|
||||
\li \l{StatusMessage}
|
||||
\li \l{StatusMessageDetails}
|
||||
\li \l{StatusTagSelector}
|
||||
\li \l{StatusToastMessage}
|
||||
\li \l{StatusWizardStepper}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,49 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Controls 0.1
|
||||
\title StatusQ Controls
|
||||
\brief Basic set of Controls StatusQ components
|
||||
|
||||
This is a listing of all Controls components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAccountSelector}
|
||||
\li \l{StatusAssetSelector}
|
||||
\li \l{StatusBanner}
|
||||
\li \l{StatusChatCommandButton}
|
||||
\li \l{StatusChatInfoButton}
|
||||
\li \l{StatusChatListCategoryItemButton}
|
||||
\li \l{StatusColorSelector}
|
||||
\li \l{StatusIconTabButton}
|
||||
\li \l{StatusNavBarTabButton}
|
||||
\li \l{StatusTabBarIconButton}
|
||||
\li \l{StatusToolTip}
|
||||
\li \l{StatusBaseButton}
|
||||
\li \l{StatusButton}
|
||||
\li \l{StatusFlatButton}
|
||||
\li \l{StatusRoundButton}
|
||||
\li \l{StatusFlatRoundButton}
|
||||
\li \l{StatusSwitch}
|
||||
\li \l{StatusRadioButton}
|
||||
\li \l{StatusCheckBox}
|
||||
\li \l{StatusSlider}
|
||||
\li \l{StatusSelect}
|
||||
\li \l{StatusBaseInput}
|
||||
\li \l{StatusIdenticonRing}
|
||||
\li \l{StatusInput}
|
||||
\li \l{StatusItemPicker}
|
||||
\li \l{StatusPickerButton}
|
||||
\li \l{StatusPinInput}
|
||||
\li \l{StatusProgressBar}
|
||||
\li \l{StatusPasswordStrengthIndicator}
|
||||
\li \l{StatusSwitchTabButton}
|
||||
\li \l{StatusSwitchTabBar}
|
||||
\li \l{StatusSelectableText}
|
||||
\li \l{StatusWalletColorButton}
|
||||
\li \l{StatusWalletColorSelect}
|
||||
\li \l{StatusRegularExpressionValidator}
|
||||
\li \l{StatusIntValidator}
|
||||
\li \l{StatusSeedPhraseInput}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,23 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Core 0.1
|
||||
\title StatusQ Core
|
||||
\brief Basic set of Core StatusQ components
|
||||
|
||||
This is a listing of all Core components. These
|
||||
files are available for general import and they are based off the \l{https://doc.qt.io/qt-5/qtquick-qmlmodule.html}{Qt
|
||||
Quick Primitives} and \l{https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html}{Qt Quick Controls 2}.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAppNavBarFilterModel}
|
||||
\li \l{StatusBaseText}
|
||||
\li \l{StatusIcon}
|
||||
\li \l{StatusIconBackgroundSettings}
|
||||
\li \l{StatusIconSettings}
|
||||
\li \l{StatusIdenticonRingSettings}
|
||||
\li \l{StatusImageSettings}
|
||||
\li \l{StatusModalHeaderSettings}
|
||||
\li \l{StatusTooltipSettings}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,16 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Layout 0.1
|
||||
\title StatusQ Layout
|
||||
\brief Basic set of Layout StatusQ components
|
||||
|
||||
This is a listing of all Layout components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAppLayout}
|
||||
\li \l{StatusAppNavBar}
|
||||
\li \l{StatusAppTwoPanelLayout}
|
||||
\li \l{StatusAppThreePanelLayout}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,15 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Platform 0.1
|
||||
\title StatusQ Platform
|
||||
\brief Basic set of Platform StatusQ components
|
||||
|
||||
This is a listing of all Platform components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusMacTrafficLights}
|
||||
\li \l{StatusMacNotification}
|
||||
\li \l{StatusWindowsTitleBar}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,22 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Popups 0.1
|
||||
\title StatusQ Popups
|
||||
\brief Basic set of Popups StatusQ components
|
||||
|
||||
This is a listing of all Popups components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusMenuSeparator}
|
||||
\li \l{StatusPopupMenu}
|
||||
\li \l{StatusMenuItem}
|
||||
\li \l{StatusMenuItemDelegate}
|
||||
\li \l{StatusModal}
|
||||
\li \l{StatusSearchPopup}
|
||||
\li \l{StatusModalDivider}
|
||||
\li \l{StatusSearchPopupMenuItem}
|
||||
\li \l{StatusSearchLocationMenu}
|
||||
\li \l{StatusSpellcheckingMenuItems}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,36 +0,0 @@
|
||||
project = StatusQ
|
||||
version = 0.1
|
||||
description = StatusQ Project
|
||||
url = https://github.com/status-im/StatusQ
|
||||
|
||||
#These are set implictly by qdoc as well, but only with these the module header can be found
|
||||
includepaths = -I . \
|
||||
-I $PWD/../src/StatusQ
|
||||
|
||||
imagedirs = src/images
|
||||
sourcedirs += src \
|
||||
$PWD/../src/StatusQ/Components \
|
||||
$PWD/../src/StatusQ/Controls \
|
||||
$PWD/../src/StatusQ/Core \
|
||||
$PWD/../src/StatusQ/Layout \
|
||||
$PWD/../src/StatusQ/Platform \
|
||||
$PWD/../src/StatusQ/Popups \
|
||||
|
||||
sources.fileextensions = "*.cpp *.qdoc *.qml"
|
||||
|
||||
depends += qtcore \
|
||||
qtquick \
|
||||
qtqml \
|
||||
qtgui \
|
||||
qtdoc \
|
||||
qtquickcontrols2
|
||||
|
||||
navigation.homepage = "StatusQ"
|
||||
|
||||
outputdir = $PWD/html
|
||||
outputformats = HTML
|
||||
|
||||
HTML.stylesheets = style.css
|
||||
HTML.headerstyles = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\"/>\n"
|
||||
HTML.postheader = "<p class=\"header\"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/>"
|
||||
HTML.footer = "<hr/><div class=\"footer\"><p><acronym title=\"Copyright\">©</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
|
||||
@@ -1,41 +0,0 @@
|
||||
body {
|
||||
font-family: "Verdana";
|
||||
font-size: 14px;
|
||||
max-width: 80%;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
color: #4360DF;
|
||||
}
|
||||
|
||||
div.sidebar {
|
||||
float: right;
|
||||
}
|
||||
|
||||
pre {
|
||||
padding: 15px;
|
||||
}
|
||||
div.qmlproto {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
pre, div.qmlproto {
|
||||
font-family: "Courier New";
|
||||
font-size: 20px;
|
||||
margin-left: 2em;
|
||||
background-color: #F0F2F5;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 2em;
|
||||
}
|
||||
|
||||
p.header {
|
||||
margin-bottom: -1em;
|
||||
}
|
||||
p.footer {
|
||||
text-align: right;
|
||||
margin-top: -1em;
|
||||
}
|
||||
@@ -188,19 +188,4 @@ GridLayout {
|
||||
to: 100
|
||||
value: 40
|
||||
}
|
||||
|
||||
StatusBanner {
|
||||
id: banner
|
||||
width: 360
|
||||
topPadding: 20
|
||||
type: StatusBanner.Type.Danger
|
||||
statusText: "Banner"
|
||||
}
|
||||
|
||||
StatusProgressBar {
|
||||
id: progressBar
|
||||
text: "Weak"
|
||||
value: 0.5
|
||||
fillColor : Theme.palette.pinColor1
|
||||
}
|
||||
}
|
||||
+765
-99
@@ -9,9 +9,6 @@ import StatusQ.Layout 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import "demoapp"
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
Rectangle {
|
||||
id: demoApp
|
||||
height: 602
|
||||
@@ -21,31 +18,6 @@ Rectangle {
|
||||
|
||||
property string titleStyle: "osx"
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
readonly property int apiDocumentation: 100
|
||||
readonly property int demoApp: 101
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < Models.demoAppSectionsModel.count; i++) {
|
||||
let item = Models.demoAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId)
|
||||
{
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", false)
|
||||
continue
|
||||
}
|
||||
|
||||
Models.demoAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
}
|
||||
|
||||
StatusMacTrafficLights {
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
@@ -76,74 +48,32 @@ Rectangle {
|
||||
|
||||
id: navBar
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: Models.demoAppSectionsModel
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
onAboutToUpdateFilteredRegularModel: {
|
||||
communityAdded = false
|
||||
}
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
tooltip.text: "Chat"
|
||||
checked: appView.sourceComponent == statusAppChatView
|
||||
onClicked: {
|
||||
if(model.sectionType === appSectionType.chat)
|
||||
{
|
||||
appView.sourceComponent = statusAppChatView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
else if(model.sectionType === appSectionType.profileSettings)
|
||||
{
|
||||
appView.sourceComponent = statusAppProfileSettingsView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
appView.sourceComponent = statusAppChatView
|
||||
}
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Status Community"
|
||||
tooltipText: "Status Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
id: communityBtn
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
name: model.name
|
||||
tooltip.text: model.tooltipText
|
||||
icon.color: Theme.palette.miscColor6
|
||||
icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
checked: appView.sourceComponent == statusAppCommunityView
|
||||
onClicked: {
|
||||
if(model.sectionType === appSectionType.community)
|
||||
{
|
||||
appView.sourceComponent = statusAppCommunityView
|
||||
demoApp.setActiveItem(model.sectionId)
|
||||
}
|
||||
appView.sourceComponent = statusAppCommunityView
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
@@ -174,7 +104,39 @@ Rectangle {
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "bigger/browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "bigger/status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
id: profileNavButton
|
||||
icon.name: "bigger/settings"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusAppNavBar.backgroundColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
|
||||
checked: appView.sourceComponent == statusAppProfileSettingsView
|
||||
onClicked: {
|
||||
appView.sourceComponent = statusAppProfileSettingsView
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
appView: Loader {
|
||||
@@ -186,31 +148,735 @@ Rectangle {
|
||||
|
||||
Component {
|
||||
id: statusAppChatView
|
||||
StatusAppChatView { }
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
Item {
|
||||
id: searchInputWrapper
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
height: searchInput.height
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: parent.left
|
||||
anchors.right: actionButton.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
|
||||
height: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 0
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusRoundButton {
|
||||
id: actionButton
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: "add"
|
||||
state: "default"
|
||||
|
||||
onClicked: chatContextMenu.popup(actionButton.width-chatContextMenu.width, actionButton.height + 4)
|
||||
states: [
|
||||
State {
|
||||
name: "default"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 0
|
||||
highlighted: false
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "pressed"
|
||||
PropertyChanges {
|
||||
target: actionButton
|
||||
icon.rotation: 45
|
||||
highlighted: true
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
from: "default"
|
||||
to: "pressed"
|
||||
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Clockwise
|
||||
easing.type: Easing.InCubic
|
||||
}
|
||||
},
|
||||
Transition {
|
||||
from: "pressed"
|
||||
to: "default"
|
||||
RotationAnimation {
|
||||
duration: 150
|
||||
direction: RotationAnimation.Counterclockwise
|
||||
easing.type: Easing.OutCubic
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
StatusPopupMenu {
|
||||
id: chatContextMenu
|
||||
|
||||
onOpened: {
|
||||
actionButton.state = "pressed"
|
||||
}
|
||||
|
||||
onClosed: {
|
||||
actionButton.state = "default"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start new chat"
|
||||
icon.name: "private-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Start group chat"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Join public chat"
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Communities"
|
||||
icon.name: "communities"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatListItems.model: models.demoChatListItems
|
||||
selectedChatId: "0"
|
||||
onChatItemSelected: selectedChatId = id
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < models.demoChatListItems.count; i++) {
|
||||
let item = models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
notificationCount: 1
|
||||
|
||||
onNotificationButtonClicked: notificationCount = 0
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAppCommunityView
|
||||
StatusAppCommunityView {
|
||||
communityDetailModalTitle: demoCommunityDetailModal.header.title
|
||||
communityDetailModalImage: demoCommunityDetailModal.header.image.source
|
||||
onChatInfoButtonClicked: {
|
||||
demoCommunityDetailModal.open();
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatInfoButton.title: "CryptoKitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.onClicked: demoCommunityDetailModal.open()
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
chatList.model: models.demoCommunityChatListItems
|
||||
categoryList.model: models.demoCommunityCategoryItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
onChatItemSelected: selectedChatId = id
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Category"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Edit Category"
|
||||
icon.name: "edit"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete Category"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "general"
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(demoCommunityDetailModal.header.title,
|
||||
"",
|
||||
demoCommunityDetailModal.header.image.source);
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusChatToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locationModel: models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: ["John", "Nick", "Maria", "Mike"]
|
||||
delegate: Row {
|
||||
width: parent.width
|
||||
height: 30
|
||||
spacing: 8
|
||||
Rectangle {
|
||||
width: 24
|
||||
height: 24
|
||||
radius: width/2
|
||||
color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
|
||||
}
|
||||
StatusBaseText {
|
||||
height: parent.height
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
text: modelData
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAppProfileSettingsView
|
||||
StatusAppProfileSettingsView { }
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: profileHeadline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Profile"
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
anchors.top: profileHeadline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
|
||||
contentHeight: profileMenuItems.height + 8
|
||||
contentWidth: parent.width
|
||||
clip: true
|
||||
|
||||
Column {
|
||||
id: profileMenuItems
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: models.demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: models.demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: invisibleSeparator
|
||||
height: 16
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: models.demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
DemoContactRequestsModal {
|
||||
StatusModal {
|
||||
id: demoContactRequestsModal
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Contact Requests"
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Contact request will be shown here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Decline all"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
onClicked: demoContactRequestsModal.close()
|
||||
},
|
||||
StatusButton {
|
||||
text: "Accept all"
|
||||
onClicked: demoContactRequestsModal.close()
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
DemoCommunityDetailModal {
|
||||
StatusModal {
|
||||
id: demoCommunityDetailModal
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Cryptokitties"
|
||||
header.subTitle: "Public Community"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
|
||||
contentItem: Column {
|
||||
width: demoCommunityDetailModal.width
|
||||
|
||||
StatusModalDivider {
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: "A community of cat lovers, meow!"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
height: 46
|
||||
color: Theme.palette.directColor1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Share community"
|
||||
subTitle: "https://join.status.im/u/0x04...45f19"
|
||||
tooltip.text: "Copy to clipboard"
|
||||
icon.name: "copy"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Members"
|
||||
icon.name: "group-chat"
|
||||
label: "184"
|
||||
components: [
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Notifications"
|
||||
icon.name: "notification"
|
||||
components: [
|
||||
StatusSwitch {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Edit community"
|
||||
icon.name: "edit"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Transfer ownership"
|
||||
icon.name: "exchange"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Leave community"
|
||||
icon.name: "arrow-right"
|
||||
icon.rotation: 180
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Models {
|
||||
id: models
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,295 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
|
||||
Column {
|
||||
spacing: 5
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
chatInfoButton.muted: true
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
notificationCount: 1
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: 5
|
||||
Button {
|
||||
id: btn
|
||||
text: "Append"
|
||||
onClicked: {
|
||||
buttons.append({
|
||||
name: "Test community",
|
||||
tooltipText: "Test Community"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
id: buttons
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
id: test
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "chat"
|
||||
badge.value: 33
|
||||
badge.visible: true
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
tooltip.text: "Chat"
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.model: ListModel {
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
ListElement {
|
||||
name: "Test community"
|
||||
tooltipText: "Test Community"
|
||||
}
|
||||
}
|
||||
|
||||
navBarCommunityTabButtons.delegate: StatusNavBarTabButton {
|
||||
name: model.name
|
||||
tooltip.text: model.name
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "wallet"
|
||||
tooltip.text: "Wallet"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "browser"
|
||||
tooltip.text: "Browser"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "status-update"
|
||||
tooltip.text: "Timeline"
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
icon.name: "profile"
|
||||
badge.visible: true
|
||||
badge.anchors.rightMargin: 4
|
||||
badge.anchors.topMargin: 5
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
tooltip.text: "Profile"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
@@ -26,7 +25,7 @@ GridLayout {
|
||||
badge.value: 1
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Menu Item (selected) with very long text"
|
||||
title: "Menu Item (selected)"
|
||||
selected: true
|
||||
icon.name: "info"
|
||||
badge.value: 1
|
||||
@@ -65,12 +64,6 @@ GridLayout {
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel-emoji"
|
||||
type: StatusChatListItem.Type.CommunityChat
|
||||
icon.emoji: "😁"
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
name: "community-channel-with-image"
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
@@ -92,8 +85,7 @@ GridLayout {
|
||||
StatusChatListItem {
|
||||
name: "has-mentions"
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
@@ -108,7 +100,7 @@ GridLayout {
|
||||
type: StatusChatListItem.Type.PublicChat
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
@@ -138,7 +130,7 @@ GridLayout {
|
||||
selected: true
|
||||
muted: true
|
||||
hasUnreadMessages: true
|
||||
notificationsCount: 1
|
||||
badge.value: 1
|
||||
}
|
||||
|
||||
|
||||
@@ -329,43 +321,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
badge.icon.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Tags"
|
||||
icon.isLetterIdenticon: true
|
||||
bottomModel: 3
|
||||
bottomDelegate: StatusListItemTag {
|
||||
title: "tag"
|
||||
icon.isLetterIdenticon: true
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Inline Tags"
|
||||
icon.isLetterIdenticon: true
|
||||
tagsModel : 2
|
||||
tagsDelegate: StatusListItemTag {
|
||||
color: "blue"
|
||||
height: 24
|
||||
radius: 6
|
||||
closeButtonVisible: false
|
||||
icon.emoji: "😁"
|
||||
icon.emojiSize: Emoji.size.verySmall
|
||||
icon.isLetterIdenticon: true
|
||||
title: "helloworld.eth"
|
||||
titleText.font.pixelSize: 12
|
||||
titleText.color: Theme.palette.indirectColor1
|
||||
}
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
title: "List Item with Emoji"
|
||||
subTitle: "Emoji"
|
||||
icon.emoji: "😁"
|
||||
icon.color: "yellow"
|
||||
icon.letterSize: 14
|
||||
icon.isLetterIdenticon: true
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Title"
|
||||
subTitle: "Subtitle"
|
||||
@@ -390,55 +345,4 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This is an example"
|
||||
userName: "annabelle"
|
||||
chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
|
||||
trustIndicator: StatusContactVerificationIcons.TrustedType.Verified
|
||||
isMutualContact: true
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
isOnline: true
|
||||
ringSettings.ringSpecModel:
|
||||
ListModel {
|
||||
ListElement {colorId: 13; segmentLength: 5}
|
||||
ListElement {colorId: 31; segmentLength: 5}
|
||||
ListElement {colorId: 10; segmentLength: 1}
|
||||
ListElement {colorId: 2; segmentLength: 5}
|
||||
ListElement {colorId: 26; segmentLength: 2}
|
||||
ListElement {colorId: 19; segmentLength: 4}
|
||||
ListElement {colorId: 28; segmentLength: 3}
|
||||
}
|
||||
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "carmen.eth"
|
||||
isOnline: false
|
||||
trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "very-long-annoying-nickname.eth"
|
||||
isOnline: false
|
||||
trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This girl I know from work"
|
||||
userName: "annabelle"
|
||||
isOnline: true
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "Mark Cuban"
|
||||
userName: "annabelle"
|
||||
chatKey: "0x043a7ed0e8752236a4688563652fd0296453cef00a5dcddbe252dc74f72cc1caa97a2b65e4a1a52d9c30a84c9966beaaaf6b333d659cbdd2e486b443ed1012cf04"
|
||||
isMutualContact: true
|
||||
image.source: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/
|
||||
nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
image.isIdenticon: true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,336 @@
|
||||
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
|
||||
}]}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusLoadingIndicator {
|
||||
color: Theme.palette.directColor4
|
||||
}
|
||||
|
||||
StatusLetterIdenticon {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
StatusRoundedImage {
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusBadge {}
|
||||
|
||||
StatusBadge {
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 10
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 100
|
||||
}
|
||||
|
||||
StatusRoundIcon {
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
@@ -73,16 +73,6 @@ Column {
|
||||
onClicked: spellMenu.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Editable Title"
|
||||
onClicked: editTitleModal.open()
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
text: "Modal with Advanced Header/Footer"
|
||||
onClicked: advancedHeaderFooterModal.open()
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: simpleModal
|
||||
anchors.centerIn: parent
|
||||
@@ -351,49 +341,6 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
|
||||
}
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: editTitleModal
|
||||
anchors.centerIn: parent
|
||||
header.title: "This title can be edited"
|
||||
header.editable: true
|
||||
}
|
||||
|
||||
StatusModal {
|
||||
id: advancedHeaderFooterModal
|
||||
anchors.centerIn: parent
|
||||
showHeader: false
|
||||
showFooter: false
|
||||
showAdvancedHeader: true
|
||||
showAdvancedFooter: true
|
||||
height: 200
|
||||
advancedHeaderComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: 1
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any header here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
advancedFooterComponent: Rectangle {
|
||||
width: parent.width
|
||||
height: 50
|
||||
color: Theme.palette.baseColor1
|
||||
border.width: 1
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Add any footer here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: dummyAccountsModel
|
||||
ListElement{name: "Account 1"; iconName: "filled-account"}
|
||||
+13
-22
@@ -2,62 +2,53 @@ import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import Sandbox 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
Column {
|
||||
spacing: 8
|
||||
|
||||
StatusAccountSelector {
|
||||
id: accountSelector
|
||||
accounts: ListModel {
|
||||
ListElement {
|
||||
name: "Pascal"
|
||||
address: "0x1234567891011"
|
||||
path: ""
|
||||
color: "red"
|
||||
publicKey: ""
|
||||
iconColor: "red"
|
||||
balance: "0"
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "1199.02"
|
||||
assets: []
|
||||
fiatBalance: "1199.02"
|
||||
}
|
||||
ListElement {
|
||||
name: "Boris"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "red"
|
||||
publicKey: ""
|
||||
iconColor: "red"
|
||||
balance: "0"
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
fiatBalance: "0"
|
||||
}
|
||||
ListElement {
|
||||
name: "Alexandra"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "yellow"
|
||||
publicKey: ""
|
||||
iconColor: "yellow"
|
||||
balance: "0"
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
fiatBalance: "0"
|
||||
}
|
||||
ListElement {
|
||||
name: "Khushboo"
|
||||
address: "0x123"
|
||||
path: ""
|
||||
color: "blue"
|
||||
publicKey: ""
|
||||
iconColor: "blue"
|
||||
balance: "0"
|
||||
walletType: "generated"
|
||||
isChat: ""
|
||||
currencyBalance: "0"
|
||||
assets: []
|
||||
fiatBalance: "0"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -13,26 +13,22 @@ Column {
|
||||
spacing: 8
|
||||
|
||||
StatusAssetSelector {
|
||||
getCurrencyBalanceString: function (currencyBalance) {
|
||||
return currencyBalance.toFixed(2) + " USD"
|
||||
}
|
||||
tokenAssetSourceFn: function (symbol) {
|
||||
return "../../assets/img/icons/snt.svg"
|
||||
}
|
||||
assets: ListModel {
|
||||
ListElement {
|
||||
address: "0x1234"
|
||||
name: "Status Network Token"
|
||||
balance: "20"
|
||||
value: "20"
|
||||
symbol: "SNT"
|
||||
currencyBalance: 9992.01
|
||||
fiatBalance: "9992.01"
|
||||
fiatBalanceDisplay: "9992.01"
|
||||
}
|
||||
ListElement {
|
||||
address: "0x1234"
|
||||
name: "DAI Token"
|
||||
balance: "15"
|
||||
value: "20"
|
||||
symbol: "DAI"
|
||||
currencyBalance: 20.00001
|
||||
fiatBalance: "20"
|
||||
fiatBalanceDisplay: "20"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -57,38 +57,11 @@ Column {
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: 480
|
||||
implicitHeight: 82
|
||||
z: 100000
|
||||
StatusSeedPhraseInput {
|
||||
id: statusSeedInput
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
height: parent.height
|
||||
textEdit.input.anchors.leftMargin: 16
|
||||
textEdit.input.anchors.rightMargin: 16
|
||||
textEdit.input.anchors.topMargin: 11
|
||||
textEdit.label: "Input with drop down selection list"
|
||||
leftComponentText: "1"
|
||||
inputList: ListModel {
|
||||
ListElement {
|
||||
seedWord: "panda"
|
||||
}
|
||||
ListElement {
|
||||
seedWord: "posible"
|
||||
}
|
||||
ListElement {
|
||||
seedWord: "wing"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
charLimit: 30
|
||||
errorMessage: "Error message"
|
||||
|
||||
input.clearable: true
|
||||
input.valid: false
|
||||
input.placeholderText: "Placeholder"
|
||||
@@ -129,24 +102,10 @@ Column {
|
||||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Input with <i>StatusRegularExpressionValidator</i>"
|
||||
charLimit: 30
|
||||
input.placeholderText: `Must match regex(${validators[0].regularExpression.toString()}) and <= 30 chars`
|
||||
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
|
||||
validators: [
|
||||
StatusRegularExpressionValidator {
|
||||
regularExpression: /^[0-9A-Za-z_\$-\s]*$/
|
||||
errorMessage: "Bad input!"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
input.placeholderText: "Input width component (right side)"
|
||||
input.rightComponent: StatusIcon {
|
||||
input.component: StatusIcon {
|
||||
icon: "cancel"
|
||||
height: 16
|
||||
color: Theme.palette.dangerColor1
|
||||
@@ -171,45 +130,4 @@ Column {
|
||||
input.minimumHeight: 80
|
||||
input.maximumHeight: 200
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
property bool toggled: true
|
||||
label: "Input with emoji icon"
|
||||
input.placeholderText: "Enter Name"
|
||||
input.icon.emoji: toggled ? "😁" : "🧸"
|
||||
input.icon.color: "blue"
|
||||
input.isIconSelectable: true
|
||||
onIconClicked: {
|
||||
toggled = !toggled
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
property bool toggled: true
|
||||
label: "Input with selectable icon which is not an emoji"
|
||||
input.placeholderText: "Enter Name"
|
||||
input.icon.emoji: ""
|
||||
input.icon.name: toggled ? "filled-account" : "image"
|
||||
input.icon.color: "blue"
|
||||
input.isIconSelectable: true
|
||||
onIconClicked: {
|
||||
toggled = !toggled
|
||||
}
|
||||
}
|
||||
|
||||
StatusInput {
|
||||
label: "Input with inline token selector"
|
||||
input.leftComponent: StatusTokenInlineSelector {
|
||||
tokens: [{amount: 0.1, token: "ETH"},
|
||||
{amount: 10, token: "SNT"},
|
||||
{amount: 15, token: "MANA"}]
|
||||
|
||||
StatusToolTip {
|
||||
id: toolTip
|
||||
text: "posted"
|
||||
}
|
||||
onTriggered: toolTip.visible = true
|
||||
}
|
||||
input.edit.readOnly: true
|
||||
}
|
||||
}
|
||||
+1
-1
@@ -12,6 +12,6 @@ Column {
|
||||
spacing: 8
|
||||
|
||||
StatusWalletColorSelect {
|
||||
model: Theme.palette.userCustomizationColors
|
||||
model: Theme.palette.accountColors
|
||||
}
|
||||
}
|
||||
@@ -7,8 +7,6 @@ Item {
|
||||
id: themeSwitchWrapper
|
||||
signal checkedChanged()
|
||||
|
||||
property alias lightThemeEnabled: switchControl.checked
|
||||
|
||||
width: themeSwitch.width
|
||||
height: themeSwitch.height
|
||||
|
||||
@@ -28,7 +26,6 @@ Item {
|
||||
}
|
||||
|
||||
StatusSwitch {
|
||||
id: switchControl
|
||||
onCheckedChanged: themeSwitchWrapper.checkedChanged()
|
||||
|
||||
StatusToolTip {
|
||||
|
||||
@@ -1,443 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
Column {
|
||||
spacing: 5
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.PublicChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
chatInfoButton.muted: true
|
||||
}
|
||||
|
||||
StatusChatToolBar {
|
||||
chatInfoButton.title: "Some contact"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
notificationCount: 1
|
||||
}
|
||||
|
||||
Row {
|
||||
spacing: 5
|
||||
Button {
|
||||
id: btn
|
||||
text: "Append"
|
||||
onClicked: {
|
||||
buttons.append({
|
||||
name: "Test community",
|
||||
tooltipText: "Test Community"
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppNavBar {
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: ListModel {
|
||||
ListElement {sectionId: "chat"; sectionType: 0; name: "Chat"; active: true; image: ""; icon: "chat"; color: ""; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0001"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 12}
|
||||
ListElement {sectionId: "0x0002"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0003"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0004"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 1}
|
||||
ListElement {sectionId: "0x0005"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0006"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 3}
|
||||
ListElement {sectionId: "0x0007"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 5}
|
||||
ListElement {sectionId: "0x0008"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0009"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "0x0010"; sectionType: 1; name: "Test Community"; active: false; image: ""; icon: ""; color: "#00ff00"; hasNotification: true; notificationsCount: 11}
|
||||
ListElement {sectionId: "wallet"; sectionType: 2; name: "Wallet"; active: false; image: ""; icon: "wallet"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "browser"; sectionType: 3; name: "Browser"; active: false; image: ""; icon: "bigger/browser"; color: ""; hasNotification: false; notificationsCount: 0}
|
||||
ListElement {sectionId: "profile"; sectionType: 5; name: "Profile"; active: false; image: ""; icon: "bigger/settings"; color: ""; hasNotification: true; notificationsCount: 0}
|
||||
}
|
||||
|
||||
property bool communityAdded: false
|
||||
|
||||
filterRegularItem: function(item) {
|
||||
if(item.sectionType === appSectionType.community)
|
||||
if(communityAdded)
|
||||
return false
|
||||
else
|
||||
communityAdded = true
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
filterCommunityItem: function(item) {
|
||||
return item.sectionType === appSectionType.community
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
}
|
||||
|
||||
communityNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Invite People")
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("View Community")
|
||||
icon.name: "group"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Edit Community")
|
||||
icon.name: "edit"
|
||||
enabled: false
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: qsTr("Leave Community")
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
ColumnLayout {
|
||||
GridLayout {
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
columns: 6
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusLoadingIndicator {
|
||||
color: Theme.palette.directColor4
|
||||
}
|
||||
|
||||
StatusLetterIdenticon {
|
||||
name: "#status"
|
||||
}
|
||||
|
||||
StatusRoundedImage {
|
||||
image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
}
|
||||
|
||||
StatusBadge {}
|
||||
|
||||
StatusBadge {
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 10
|
||||
}
|
||||
|
||||
StatusBadge {
|
||||
value: 100
|
||||
}
|
||||
|
||||
StatusRoundIcon {
|
||||
icon.name: "info"
|
||||
}
|
||||
}
|
||||
|
||||
Flow {
|
||||
Layout.fillWidth: true
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: 12
|
||||
StatusLetterIdenticon {
|
||||
name: "A"
|
||||
color: Theme.palette.userCustomizationColors[index]
|
||||
letterSize: 16
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,104 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQml.Models 2.2
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
ListView {
|
||||
id: messageList
|
||||
anchors.fill: parent
|
||||
anchors.margins: 15
|
||||
clip: true
|
||||
delegate: StatusMessage {
|
||||
id: delegate
|
||||
width: parent.width
|
||||
|
||||
audioMessageInfoText: "Audio Message"
|
||||
cancelButtonText: "Cancel"
|
||||
saveButtonText: "Save"
|
||||
loadingImageText: "Loading image..."
|
||||
errorLoadingImageText: "Error loading the image"
|
||||
resendText: "Resend"
|
||||
pinnedMsgInfoText: "Pinned by"
|
||||
|
||||
messageDetails: StatusMessageDetails {
|
||||
contentType: model.contentType
|
||||
messageContent: model.messageContent
|
||||
amISender: model.amIsender
|
||||
displayName: model.userName
|
||||
secondaryName: model.localName !== "" && model.ensName.startsWith("@") ? model.ensName: ""
|
||||
chatID: model.chatKey
|
||||
profileImage: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
source: model.profileImage
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
messageText: model.message
|
||||
hasMention: model.hasMention
|
||||
isMutualContact: model.isMutualContact
|
||||
trustIndicator: model.trustIndicator
|
||||
isPinned: model.isPinned
|
||||
pinnedBy: model.pinnedBy
|
||||
hasExpired: model.hasExpired
|
||||
}
|
||||
timestamp.text: "10:00 am"
|
||||
timestamp.tooltip.text: "10:01 am"
|
||||
// reply related data
|
||||
isAReply: model.isReply
|
||||
replyDetails: StatusMessageDetails {
|
||||
amISender: model.isReply ? model.replyAmISender : ""
|
||||
displayName: model.isReply ? model.replySenderName: ""
|
||||
profileImage: StatusImageSettings {
|
||||
width: 20
|
||||
height: 20
|
||||
source: model.isReply ? model.replyProfileImage: ""
|
||||
isIdenticon: model.isReply ? model.replyIsIdenticon: ""
|
||||
}
|
||||
messageText: model.isReply ? model.replyMessageText: ""
|
||||
contentType: model.replyContentType
|
||||
messageContent: model.replyMessageContent
|
||||
}
|
||||
quickActions: [
|
||||
StatusFlatRoundButton {
|
||||
id: emojiBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reaction-b"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Add reaction"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: replyBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "reply"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Reply"
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "tiny/edit"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "Edit"
|
||||
onClicked: {
|
||||
delegate.editMode = !delegate.editMode
|
||||
}
|
||||
},
|
||||
StatusFlatRoundButton {
|
||||
id: otherBtn
|
||||
width: 32
|
||||
height: 32
|
||||
icon.name: "more"
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
tooltip.text: "More"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Page {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
anchors.margins: 16
|
||||
property ListModel contactsModel: null
|
||||
background: null
|
||||
|
||||
header: RowLayout {
|
||||
id: headerRow
|
||||
width: parent.width
|
||||
height: tagSelector.height
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 17
|
||||
maxHeight: root.height
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("USER LIMIT REACHED")
|
||||
listLabel: qsTr("Contacts")
|
||||
onTextChanged: {
|
||||
sortModel(root.contactsModel);
|
||||
}
|
||||
Component.onCompleted: {
|
||||
textEdit.forceActiveFocus();
|
||||
sortModel(root.contactsModel);
|
||||
}
|
||||
}
|
||||
|
||||
StatusButton {
|
||||
implicitHeight: 44
|
||||
Layout.alignment: Qt.AlignTop
|
||||
enabled: (tagSelector.namesModel.count > 0)
|
||||
text: "Confirm"
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 68
|
||||
|
||||
StatusBaseText {
|
||||
visible: (contactsModel.count === 0)
|
||||
anchors.centerIn: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.baseColor1
|
||||
text: qsTr("You can only send direct messages to your Contacts. \n\n
|
||||
Send a contact request to the person you would like to chat with, you will be\n able to
|
||||
chat with them once they have accepted your contact request.")
|
||||
Component.onCompleted: {
|
||||
if (visible) {
|
||||
tagSelector.enabled = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
|
||||
StatusModal {
|
||||
id: root
|
||||
|
||||
anchors.centerIn: parent
|
||||
|
||||
header.title: "Cryptokitties"
|
||||
header.subTitle: "Public Community"
|
||||
header.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
|
||||
contentItem: Column {
|
||||
width: root.width
|
||||
|
||||
StatusModalDivider {
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
text: "A community of cat lovers, meow!"
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 15
|
||||
height: 46
|
||||
color: Theme.palette.directColor1
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusDescriptionListItem {
|
||||
title: "Share community"
|
||||
subTitle: "https://join.status.im/u/0x04...45f19"
|
||||
tooltip.text: "Copy to clipboard"
|
||||
icon.name: "copy"
|
||||
iconButton.onClicked: tooltip.visible = !tooltip.visible
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Members"
|
||||
icon.name: "group-chat"
|
||||
label: "184"
|
||||
components: [
|
||||
StatusIcon {
|
||||
icon: "chevron-down"
|
||||
rotation: 270
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Notifications"
|
||||
icon.name: "notification"
|
||||
components: [
|
||||
StatusSwitch {}
|
||||
]
|
||||
}
|
||||
|
||||
StatusModalDivider {
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Edit community"
|
||||
icon.name: "edit"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Transfer ownership"
|
||||
icon.name: "exchange"
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
|
||||
StatusListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
statusListItemTitle.font.pixelSize: 17
|
||||
title: "Leave community"
|
||||
icon.name: "arrow-right"
|
||||
icon.rotation: 180
|
||||
type: StatusListItem.Type.Secondary
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
StatusModal {
|
||||
id: root
|
||||
|
||||
header.title: "Contact Requests"
|
||||
headerActionButton: StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 32
|
||||
height: 32
|
||||
|
||||
icon.width: 20
|
||||
icon.height: 20
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
contentItem: StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: "Contact request will be shown here"
|
||||
font.pixelSize: 15
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
|
||||
rightButtons: [
|
||||
StatusButton {
|
||||
text: "Decline all"
|
||||
type: StatusBaseButton.Type.Danger
|
||||
onClicked: root.close()
|
||||
},
|
||||
StatusButton {
|
||||
text: "Accept all"
|
||||
onClicked: root.close()
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,194 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
property bool createChat: false
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: headline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Chat"
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: searchInputWrapper
|
||||
width: parent.width
|
||||
height: searchInput.height
|
||||
anchors.top: headline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
Layout.leftMargin: 17
|
||||
implicitHeight: 36
|
||||
topPadding: 8
|
||||
bottomPadding: 8
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "edit"
|
||||
onClicked: {
|
||||
root.createChat = !root.createChat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
model: Models.demoChatListItems
|
||||
highlightItem: !root.createChat
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < Models.demoChatListItems.count; i++) {
|
||||
let item = Models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
Models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.createChat ? createChatView : chatChannelView
|
||||
Component {
|
||||
id: createChatView
|
||||
CreateChatView {
|
||||
contactsModel: Models.dummyContactsModel
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatChannelView
|
||||
ChatChannelView {
|
||||
model: Models.chatMessagesModel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
notificationCount: 1
|
||||
|
||||
onNotificationButtonClicked: notificationCount = 0
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,274 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Popups 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusAppThreePanelLayout {
|
||||
id: root
|
||||
|
||||
property string communityDetailModalTitle: ""
|
||||
property string communityDetailModalImage: ""
|
||||
signal chatInfoButtonClicked()
|
||||
|
||||
handle: Rectangle {
|
||||
implicitWidth: 5
|
||||
color: SplitHandle.pressed ? Theme.palette.baseColor2
|
||||
: (SplitHandle.hovered ? Qt.darker(Theme.palette.baseColor5, 1.1) : "transparent")
|
||||
}
|
||||
leftPanel: Item {
|
||||
id: leftPanel
|
||||
|
||||
StatusChatInfoToolBar {
|
||||
id: statusChatInfoToolBar
|
||||
|
||||
anchors.top: parent.top
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
chatInfoButton.title: "CryptoKitties"
|
||||
chatInfoButton.subTitle: "128 Members"
|
||||
chatInfoButton.image.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.onClicked: { chatInfoButtonClicked(); }
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
id: scrollView
|
||||
|
||||
anchors.top: statusChatInfoToolBar.bottom
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
width: leftPanel.width
|
||||
|
||||
contentHeight: communityCategories.height
|
||||
clip: true
|
||||
|
||||
StatusChatListAndCategories {
|
||||
id: communityCategories
|
||||
width: leftPanel.width
|
||||
height: implicitHeight > (leftPanel.height - 64) ? implicitHeight + 8 : leftPanel.height - 64
|
||||
|
||||
draggableItems: true
|
||||
draggableCategories: false
|
||||
model: Models.demoCommunityChatListItems
|
||||
|
||||
showCategoryActionButtons: true
|
||||
|
||||
categoryPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string categoryId
|
||||
|
||||
openHandler: function (id) {
|
||||
categoryId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Category"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Edit Category"
|
||||
icon.name: "edit"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete Category"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
chatListPopupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
StatusMenuItem {
|
||||
text: "Create channel"
|
||||
icon.name: "channel"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Create category"
|
||||
icon.name: "channel-category"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Invite people"
|
||||
icon.name: "share-ios"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Item {
|
||||
StatusChatToolBar {
|
||||
id: statusChatToolBar
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "general"
|
||||
chatInfoButton.subTitle: "Community Chat"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor6
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.CommunityChat
|
||||
onSearchButtonClicked: {
|
||||
searchButton.highlighted = !searchButton.highlighted;
|
||||
searchPopup.setSearchSelection(communityDetailModalTitle,
|
||||
"",
|
||||
communityDetailModalImage);
|
||||
searchPopup.open();
|
||||
}
|
||||
membersButton.onClicked: membersButton.highlighted = !membersButton.highlighted
|
||||
onMembersButtonClicked: {
|
||||
root.showRightPanel = !root.showRightPanel;
|
||||
}
|
||||
}
|
||||
|
||||
StatusSearchPopup {
|
||||
id: searchPopup
|
||||
searchOptionsPopupMenu: searchPopupMenu
|
||||
onAboutToHide: {
|
||||
if (searchPopupMenu.visible) {
|
||||
searchPopupMenu.close();
|
||||
}
|
||||
//clear menu
|
||||
for (var i = 2; i < searchPopupMenu.count; i++) {
|
||||
searchPopupMenu.removeItem(searchPopupMenu.takeItem(i));
|
||||
}
|
||||
}
|
||||
onClosed: {
|
||||
statusChatToolBar.searchButton.highlighted = false
|
||||
searchPopupMenu.dismiss();
|
||||
}
|
||||
onSearchTextChanged: {
|
||||
if (searchPopup.searchText !== "") {
|
||||
searchPopup.loading = true;
|
||||
searchModelSimTimer.start();
|
||||
} else {
|
||||
searchPopup.searchResults = [];
|
||||
searchModelSimTimer.stop();
|
||||
}
|
||||
}
|
||||
Timer {
|
||||
id: searchModelSimTimer
|
||||
interval: 500
|
||||
onTriggered: {
|
||||
if (searchPopup.searchText.startsWith("c")) {
|
||||
searchPopup.searchResults = Models.searchResultsA;
|
||||
} else {
|
||||
searchPopup.searchResults = Models.searchResultsB;
|
||||
}
|
||||
searchPopup.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusSearchLocationMenu {
|
||||
id: searchPopupMenu
|
||||
searchPopup: searchPopup
|
||||
locationModel: Models.optionsModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin:16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
opacity: (rightPanel.width > 50) ? 1.0 : 0.0
|
||||
visible: (opacity > 0.1)
|
||||
font.pixelSize: 15
|
||||
text: qsTr("Members")
|
||||
}
|
||||
|
||||
ListView {
|
||||
anchors.top: titleText.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 16
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
model: Models.membersListModel
|
||||
delegate: StatusMemberListItem {
|
||||
implicitWidth: parent.width
|
||||
nickName: model.nickName
|
||||
userName: model.userName
|
||||
chatKey: model.chatKey
|
||||
trustIndicator: model.trustIndicator
|
||||
isMutualContact: model.isMutualContact
|
||||
image.source: model.source
|
||||
image.isIdenticon: model.isIdenticon
|
||||
isOnline: model.isOnline
|
||||
ringSettings.ringSpecModel: model.ringSpecModel
|
||||
ringSettings.distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "data" 1.0
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
id: root
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusNavigationPanelHeadline {
|
||||
id: profileHeadline
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
text: "Profile"
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
anchors.top: profileHeadline.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.bottom: parent.bottom
|
||||
width: parent.width
|
||||
|
||||
contentHeight: profileMenuItems.height + 8
|
||||
contentWidth: parent.width
|
||||
clip: true
|
||||
|
||||
Column {
|
||||
id: profileMenuItems
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
spacing: 4
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileGeneralMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "Settings" }
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileSettingsMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
|
||||
Item {
|
||||
id: invisibleSeparator
|
||||
height: 16
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Repeater {
|
||||
model: Models.demoProfileOtherMenuItems
|
||||
delegate: StatusNavigationListItem {
|
||||
title: model.title
|
||||
icon.name: model.icon
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
@@ -1 +0,0 @@
|
||||
singleton Models 1.0 Models.qml
|
||||
@@ -11,11 +11,6 @@ int main(int argc, char *argv[])
|
||||
#endif
|
||||
|
||||
SandboxApp app(argc, argv);
|
||||
|
||||
app.setOrganizationName("Status");
|
||||
app.setOrganizationDomain("status.im");
|
||||
app.setApplicationName("Sandbox");
|
||||
|
||||
app.startEngine();
|
||||
|
||||
return app.exec();
|
||||
|
||||
+210
-194
@@ -2,8 +2,6 @@ import QtQuick 2.14
|
||||
import QtQuick.Window 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.13
|
||||
import QtQuick.Layouts 1.14
|
||||
import Qt.labs.settings 1.0
|
||||
|
||||
import Sandbox 0.1
|
||||
|
||||
@@ -14,8 +12,6 @@ import StatusQ.Components 0.1
|
||||
import StatusQ.Layout 0.1
|
||||
import StatusQ.Platform 0.1
|
||||
|
||||
import "demoapp/data" 1.0
|
||||
|
||||
StatusWindow {
|
||||
id: rootWindow
|
||||
width: Qt.platform.os == "ios" || Qt.platform.os == "android" ? Screen.width
|
||||
@@ -33,30 +29,11 @@ StatusWindow {
|
||||
|
||||
property real factor: 1.0
|
||||
|
||||
Component.onCompleted: rootWindow.updatePosition()
|
||||
Component.onCompleted: {
|
||||
Theme.palette = lightTheme
|
||||
apiDocsButton.checked = true
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
readonly property int apiDocumentation: 100
|
||||
readonly property int demoApp: 101
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
|
||||
let item = Models.mainAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId) {
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", false);
|
||||
continue
|
||||
}
|
||||
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
rootWindow.updatePosition();
|
||||
}
|
||||
|
||||
StatusAppLayout {
|
||||
@@ -66,36 +43,37 @@ StatusWindow {
|
||||
appNavBar: StatusAppNavBar {
|
||||
height: rootWindow.height
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: Models.mainAppSectionsModel
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "refresh"
|
||||
tooltip.text: "Reload App"
|
||||
onClicked: app.restartQml()
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
if(model.sectionType === appSectionType.apiDocumentation)
|
||||
{
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
id: apiDocsButton
|
||||
icon.name: "edit"
|
||||
tooltip.text: "API Documentation"
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(libraryDocumentationCmp)
|
||||
rootWindow.setActiveItem(sectionId)
|
||||
checked = !checked
|
||||
demoAppButton.checked = false
|
||||
}
|
||||
else if(model.sectionType === appSectionType.demoApp)
|
||||
{
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
id: demoAppButton
|
||||
icon.name: "status"
|
||||
tooltip.text: "Demo Application"
|
||||
checked: stackView.currentItem == demoAppCmp
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(demoAppCmp)
|
||||
rootWindow.setActiveItem(model.sectionId)
|
||||
checked = !checked
|
||||
apiDocsButton.checked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
appView: StackView {
|
||||
@@ -109,10 +87,12 @@ StatusWindow {
|
||||
anchors.topMargin: 32
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 32
|
||||
lightThemeEnabled: storeSettings.lightTheme
|
||||
onLightThemeEnabledChanged: {
|
||||
Theme.palette = lightThemeEnabled ? rootWindow.darkTheme : rootWindow.lightTheme
|
||||
storeSettings.lightTheme = lightThemeEnabled
|
||||
onCheckedChanged: {
|
||||
if (Theme.palette === rootWindow.lightTheme) {
|
||||
Theme.palette = rootWindow.darkTheme
|
||||
} else {
|
||||
Theme.palette = rootWindow.lightTheme
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -121,16 +101,6 @@ StatusWindow {
|
||||
id: libraryDocumentationCmp
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
id: mainPageView
|
||||
|
||||
function page(name, fillPage) {
|
||||
storeSettings.fillPage = fillPage ? true : false
|
||||
viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
|
||||
}
|
||||
function control(name) {
|
||||
viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
|
||||
storeSettings.fillPage = false
|
||||
}
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
@@ -150,162 +120,122 @@ StatusWindow {
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Core" }
|
||||
StatusNavigationListItem {
|
||||
title: "Icons"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
title: "Icons"
|
||||
selected: page.sourceComponent == iconsComponent
|
||||
onClicked: page.sourceComponent = iconsComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Layout" }
|
||||
StatusNavigationListItem {
|
||||
title: "Layouts"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title.substring(0, title.length - 1));
|
||||
title: "Layouts"
|
||||
selected: page.sourceComponent == layoutComponent
|
||||
onClicked: page.sourceComponent = layoutComponent
|
||||
}
|
||||
|
||||
StatusListSectionHeadline { text: "StatusQ.Controls" }
|
||||
StatusNavigationListItem {
|
||||
title: "Buttons"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
title: "Buttons"
|
||||
selected: page.sourceComponent == buttonsComponent
|
||||
onClicked: page.sourceComponent = buttonsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSwitchTab"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page("StatusTabSwitch");
|
||||
title: "StatusSwitchTab"
|
||||
selected: page.sourceComponent == statusTabSwitchesComponent
|
||||
onClicked: page.sourceComponent = statusTabSwitchesComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatCommandButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusChatCommandButton"
|
||||
selected: page.sourceComponent == statusChatCommandButtonPageComponent
|
||||
onClicked: page.sourceComponent = statusChatCommandButtonPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Controls"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
title: "Controls"
|
||||
selected: page.sourceComponent == controlsComponent
|
||||
onClicked: page.sourceComponent = controlsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTabBarIconButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusTabBarIconButton"
|
||||
selected: page.sourceComponent == statusTabBarIconButtonPageComponent
|
||||
onClicked: page.sourceComponent = statusTabBarIconButtonPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusInput"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusInput"
|
||||
selected: page.sourceComponent == statusInputPageComponent
|
||||
onClicked: page.sourceComponent = statusInputPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusSelect"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusSelect"
|
||||
selected: page.sourceComponent == statusSelectPageComponent
|
||||
onClicked: page.sourceComponent = statusSelectPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAccountSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusAccountSelector"
|
||||
selected: page.sourceComponent == statusAccountSelectorPageComponent
|
||||
onClicked: page.sourceComponent = statusAccountSelectorPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAssetSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusAssetSelector"
|
||||
selected: page.sourceComponent == statusAssetSelectorPageComponent
|
||||
onClicked: page.sourceComponent = statusAssetSelectorPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusColorSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusColorSelector"
|
||||
selected: page.sourceComponent == statusColorSelectorPageComponent
|
||||
onClicked: page.sourceComponent = statusColorSelectorPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWalletColorButton"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusWalletColorButton"
|
||||
selected: page.sourceComponent == statusWalletColorButtonPageComponent
|
||||
onClicked: page.sourceComponent = statusWalletColorButtonPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWalletColorSelect"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPasswordStrengthIndicator"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPinInput"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
title: "StatusWalletColorSelect"
|
||||
selected: page.sourceComponent == statusWalletColorSelectPageComponent
|
||||
onClicked: page.sourceComponent = statusWalletColorSelectPageComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Components" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusAddress"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == statusAddressPageComponent
|
||||
onClicked: page.sourceComponent = statusAddressPageComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "List Items"
|
||||
selected: viewLoader.source.toString().includes(title.replace(/\s+/g, ''))
|
||||
onClicked: mainPageView.control(title.replace(/\s+/g, ''));
|
||||
selected: page.sourceComponent == listItemsComponent
|
||||
onClicked: page.sourceComponent = listItemsComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusChatInfoToolBar"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == chatInfoToolBarComponent
|
||||
onClicked: page.sourceComponent = chatInfoToolBarComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "Others"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.control(title);
|
||||
selected: page.sourceComponent == othersComponent
|
||||
onClicked: page.sourceComponent = othersComponent
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusExpandableItem"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page("StatusExpandableSettingsItem");
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusTagSelector"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusToastMessage"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusWizardStepper"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusListPicker"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == settingsComponent
|
||||
onClicked: page.sourceComponent = settingsComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Popup" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusPopupMenu"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
selected: page.sourceComponent == popupMenuComponent
|
||||
onClicked: page.sourceComponent = popupMenuComponent
|
||||
}
|
||||
|
||||
StatusNavigationListItem {
|
||||
title: "StatusModal"
|
||||
selected: viewLoader.source.toString().includes("Popups")
|
||||
onClicked: mainPageView.control("Popups");
|
||||
selected: page.sourceComponent == statusModalComponent
|
||||
onClicked: page.sourceComponent = statusModalComponent
|
||||
}
|
||||
StatusListSectionHeadline { text: "StatusQ.Platform" }
|
||||
StatusNavigationListItem {
|
||||
title: "StatusMacNotification"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusColorSelectorGrid"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title);
|
||||
}
|
||||
StatusNavigationListItem {
|
||||
title: "StatusImageCropPanel"
|
||||
selected: viewLoader.source.toString().includes(title)
|
||||
onClicked: mainPageView.page(title, true);
|
||||
selected: page.sourceComponent == notificationComponent
|
||||
onClicked: page.sourceComponent = notificationComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -314,11 +244,8 @@ StatusWindow {
|
||||
rightPanel: Item {
|
||||
id: rightPanel
|
||||
anchors.fill: parent
|
||||
|
||||
ScrollView {
|
||||
visible: !storeSettings.fillPage
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 64
|
||||
contentHeight: (pageWrapper.height + pageWrapper.anchors.topMargin) * rootWindow.factor
|
||||
contentWidth: (pageWrapper.width * rootWindow.factor)
|
||||
clip: true
|
||||
@@ -327,32 +254,17 @@ StatusWindow {
|
||||
id: pageWrapper
|
||||
width: rightPanel.width
|
||||
anchors.top: parent.top
|
||||
height: Math.max(rootWindow.height, viewLoader.height + 128)
|
||||
anchors.topMargin: 64
|
||||
height: Math.max(rootWindow.height, page.height + 128)
|
||||
scale: rootWindow.factor
|
||||
|
||||
Loader {
|
||||
id: viewLoader
|
||||
active: !storeSettings.fillPage
|
||||
id: page
|
||||
active: true
|
||||
anchors.centerIn: parent
|
||||
source: storeSettings.selected.length === 0 ? mainPageView.control("Icons") : storeSettings.selected
|
||||
onSourceChanged: {
|
||||
storeSettings.selected = viewLoader.source
|
||||
if (source.toString().includes("Icons")) {
|
||||
item.iconColor = Theme.palette.primaryColor1;
|
||||
}
|
||||
}
|
||||
sourceComponent: iconsComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
active: storeSettings.fillPage
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 64
|
||||
visible: storeSettings.fillPage
|
||||
clip: true
|
||||
|
||||
source: viewLoader.source
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -380,6 +292,116 @@ StatusWindow {
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: iconsComponent
|
||||
Icons { iconColor: Theme.palette.primaryColor1 }
|
||||
}
|
||||
|
||||
Component {
|
||||
id: controlsComponent
|
||||
Controls {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusInputPageComponent
|
||||
StatusInputPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusSelectPageComponent
|
||||
StatusSelectPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAccountSelectorPageComponent
|
||||
StatusAccountSelectorPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAssetSelectorPageComponent
|
||||
StatusAssetSelectorPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusColorSelectorPageComponent
|
||||
StatusColorSelectorPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusTabBarIconButtonPageComponent
|
||||
StatusTabBarIconButtonPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusWalletColorButtonPageComponent
|
||||
StatusWalletColorButtonPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusWalletColorSelectPageComponent
|
||||
StatusWalletColorSelectPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: listItemsComponent
|
||||
ListItems {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusAddressPageComponent
|
||||
StatusAddressPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: layoutComponent
|
||||
Layout {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: othersComponent
|
||||
Others {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: buttonsComponent
|
||||
Buttons {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusChatCommandButtonPageComponent
|
||||
StatusChatCommandButtonPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: popupMenuComponent
|
||||
StatusPopupMenuPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatInfoToolBarComponent
|
||||
StatusChatInfoToolBarPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusModalComponent
|
||||
Popups {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: statusTabSwitchesComponent
|
||||
StatusTabSwitchPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: settingsComponent
|
||||
StatusExpandableSettingsItemPage{}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: notificationComponent
|
||||
StatusMacNotificationPage {}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: demoAppCmp
|
||||
|
||||
@@ -418,7 +440,8 @@ StatusWindow {
|
||||
}
|
||||
DemoApp {
|
||||
id: demoApp
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
DropShadow {
|
||||
anchors.fill: demoApp
|
||||
@@ -470,11 +493,4 @@ StatusWindow {
|
||||
rootWindow.toggleFullScreen()
|
||||
}
|
||||
}
|
||||
|
||||
Settings {
|
||||
id: storeSettings
|
||||
property string selected: ""
|
||||
property bool lightTheme: true
|
||||
property bool fillPage: false
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,36 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: 800
|
||||
height: 100
|
||||
|
||||
Row {
|
||||
id: selectedColor
|
||||
anchors.top: parent.top
|
||||
anchors.left: colorSelectionGrid.left
|
||||
spacing: 10
|
||||
StatusBaseText {
|
||||
text: "SelectedColor is"
|
||||
}
|
||||
Rectangle {
|
||||
width: 100
|
||||
height: 20
|
||||
radius: width/2
|
||||
color: colorSelectionGrid.selectedColor
|
||||
}
|
||||
}
|
||||
|
||||
StatusColorSelectorGrid {
|
||||
id: colorSelectionGrid
|
||||
anchors.top: selectedColor.bottom
|
||||
anchors.topMargin: 10
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
titleText: "COLOR"
|
||||
selectedColorIndex: 2
|
||||
}
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
import QtGraphicalEffects 1.14
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: mainLayout.implicitWidth
|
||||
implicitHeight: mainLayout.implicitHeight
|
||||
|
||||
property var testControls: [ctrl1, ctrl2, ctrl3]
|
||||
|
||||
property bool globalStylePreferRound: true
|
||||
|
||||
ColumnLayout {
|
||||
id: mainLayout
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
RowLayout {
|
||||
ColumnLayout {
|
||||
Text {
|
||||
text: `AR: ${ctrl1.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
|
||||
StatusImageCropPanel {
|
||||
id: ctrl1
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
|
||||
}
|
||||
Text {
|
||||
text: `AR: ${ctrl2.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
StatusImageCropPanel {
|
||||
id: ctrl2
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rectangular : StatusImageCrop.WindowStyle.Rounded
|
||||
aspectRatio: 16/9
|
||||
enableCheckers: true
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
Text {
|
||||
text: `AR: ${ctrl3.aspectRatio.toFixed(2)}`
|
||||
}
|
||||
StatusImageCropPanel {
|
||||
id: ctrl3
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: globalStylePreferRound ? StatusImageCrop.WindowStyle.Rounded : StatusImageCrop.WindowStyle.Rectangular
|
||||
aspectRatio: 0.8
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: StandardKey.ZoomIn
|
||||
onActivated: {
|
||||
for(let i in testControls) {
|
||||
const c = testControls[i]
|
||||
c.setCropRect(ctrl1.inflateRectBy(c.cropRect, -0.05))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: StandardKey.ZoomOut
|
||||
onActivated: {
|
||||
for(let i in testControls) {
|
||||
const c = testControls[i]
|
||||
c.setCropRect(ctrl1.inflateRectBy(c.cropRect, 0.05))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequences: ["Ctrl+W"]
|
||||
onActivated: globalStylePreferRound = !globalStylePreferRound
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
import "../demoapp/data" 1.0
|
||||
|
||||
GridLayout {
|
||||
id: root
|
||||
columns: 1
|
||||
rowSpacing: 150
|
||||
|
||||
GridLayout {
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
rows: 4
|
||||
columns: 2
|
||||
rowSpacing: 170
|
||||
columnSpacing: 150
|
||||
z: 100
|
||||
StatusListPicker {
|
||||
id: languagePicker
|
||||
z: 100
|
||||
inputList: Models.languagePickerModel
|
||||
placeholderSearchText: qsTr("Search Languages")
|
||||
menuAlignment: StatusListPicker.MenuAlignment.Left
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: languagePicker2
|
||||
z: 100
|
||||
inputList: Models.languageNoImagePickerModel
|
||||
placeholderSearchText: qsTr("Search Languages")
|
||||
menuAlignment: StatusListPicker.MenuAlignment.Center
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: currencyPicker
|
||||
inputList: Models.currencyPickerModel
|
||||
placeholderSearchText: qsTr("Search Currencies")
|
||||
multiSelection: true
|
||||
}
|
||||
|
||||
StatusListPicker {
|
||||
id: currencyPicker2
|
||||
inputList: Models.currencyPickerModel2
|
||||
placeholderSearchText: qsTr("Search Currencies")
|
||||
multiSelection: true
|
||||
printSymbol: true
|
||||
enableSelectableItem: false
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: pageDesc
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignHCenter
|
||||
height: 100
|
||||
width: 500
|
||||
text: "4 different configurations for the `StatusListPicker` component:\n
|
||||
* Single selection. \n
|
||||
* Single selection but dynamically changed to multiple selection (model provides multiple selected items).\n
|
||||
* Multiple selection.\n
|
||||
* Multiple selection and displayed name is the symbol + shortName\n"
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 15
|
||||
}
|
||||
|
||||
// Outsite area
|
||||
MouseArea {
|
||||
height: root.height
|
||||
width: root.width
|
||||
onClicked: {
|
||||
languagePicker.close()
|
||||
languagePicker2.close()
|
||||
currencyPicker.close()
|
||||
currencyPicker2.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +0,0 @@
|
||||
import QtQuick.Layouts 1.14
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
GridLayout {
|
||||
columns: 1
|
||||
columnSpacing: 5
|
||||
rowSpacing: 5
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: veryweakPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.VeryWeak
|
||||
value: 0.75
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: weakPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Weak
|
||||
value: 0.5
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: sosoPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.SoSo
|
||||
value: 0.25
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: goodPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Good
|
||||
value: 1
|
||||
}
|
||||
|
||||
StatusPasswordStrengthIndicator {
|
||||
id: greatPw
|
||||
strength: StatusPasswordStrengthIndicator.Strength.Great
|
||||
value: 0.3
|
||||
}
|
||||
}
|
||||
@@ -1,75 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Controls.Validators 0.1
|
||||
|
||||
Column {
|
||||
id: root
|
||||
spacing: 25
|
||||
Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
|
||||
|
||||
// PIN input that accepts only numbers
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Enter Keycard PIN"
|
||||
font.pixelSize: 30
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
StatusPinInput {
|
||||
id: numbersPinInput
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
validator: StatusIntValidator{bottom: 0; top: 999999;}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.dangerColor1
|
||||
text: "Only numbers allowed"
|
||||
font.pixelSize: 16
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Introduced PIN: " + numbersPinInput.pinInput
|
||||
font.pixelSize: 12
|
||||
}
|
||||
|
||||
// PIN input that accepts input depending on the regular expression definition
|
||||
StatusBaseText {
|
||||
topPadding: 100
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Enter another Keycard PIN"
|
||||
font.pixelSize: 30
|
||||
font.bold: true
|
||||
}
|
||||
|
||||
StatusPinInput {
|
||||
id: regexPinInput
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
validator: StatusRegularExpressionValidator { regularExpression: /[0-9A-Za-z@]+/ }
|
||||
circleDiameter: 22
|
||||
circleSpacing: 22
|
||||
pinLen: 7
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.dangerColor1
|
||||
text: "Only alphanumeric characters and '@' allowed"
|
||||
font.pixelSize: 16
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Introduced PIN: " + regexPinInput.pinInput
|
||||
font.pixelSize: 12
|
||||
}
|
||||
}
|
||||
@@ -1,56 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
|
||||
property ListModel asortedContacts: ListModel {
|
||||
ListElement {
|
||||
publicId: "0x0"
|
||||
name: "Maria"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x1"
|
||||
name: "James"
|
||||
icon: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
|
||||
isIdenticon: false
|
||||
onlineStatus: 1
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x2"
|
||||
name: "Paul"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 2
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x3"
|
||||
name: "Tracy"
|
||||
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0BhCExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
|
||||
isIdenticon: true
|
||||
onlineStatus: 3
|
||||
}
|
||||
ListElement {
|
||||
publicId: "0x4"
|
||||
name: "Nick"
|
||||
icon: ""
|
||||
isIdenticon: false
|
||||
onlineStatus: 3
|
||||
}
|
||||
}
|
||||
|
||||
StatusTagSelector {
|
||||
id: tagSelector
|
||||
width: 650
|
||||
height: 44
|
||||
anchors.centerIn: parent
|
||||
namesModel: root.asortedContacts
|
||||
toLabelText: qsTr("To: ")
|
||||
warningText: qsTr("USER LIMIT REACHED")
|
||||
}
|
||||
}
|
||||
@@ -1,41 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
|
||||
Column {
|
||||
id: toastArea
|
||||
anchors.centerIn: parent
|
||||
spacing: 8
|
||||
Repeater {
|
||||
id: toastRepeater
|
||||
width: parent.width
|
||||
height: childrenRect.height
|
||||
model: [
|
||||
{"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":"", "duration":0},
|
||||
{"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
|
||||
{"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com", "duration":0},
|
||||
{"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":"", "duration":4000},
|
||||
{"title":"Test User", "subTitle":"Hello message...", "icon":"", "loading":false, "type":0,"url":"", "duration":4000}
|
||||
]
|
||||
delegate: StatusToastMessage {
|
||||
primaryText: modelData.title
|
||||
secondaryText: modelData.subTitle
|
||||
icon.name: modelData.icon
|
||||
loading: modelData.loading
|
||||
type: modelData.type
|
||||
linkUrl: modelData.url
|
||||
duration: modelData.duration
|
||||
onLinkActivated: {
|
||||
Qt.openUrlExternally(link);
|
||||
}
|
||||
onClose: {
|
||||
console.warn("toast closed: ", modelData.title)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,100 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
width: 800
|
||||
height: 100
|
||||
|
||||
//Simulate animation between steps
|
||||
property bool stepsCompleted: false
|
||||
function reset() {
|
||||
for (var i = 0; i < stepsListModel.count; i++) {
|
||||
stepsListModel.setProperty(i, "loading", false);
|
||||
stepsListModel.setProperty(i, "stepCompleted", false);
|
||||
step1.loadingTime = 0;
|
||||
step2.loadingTime = 0;
|
||||
root.stepsCompleted = false;
|
||||
}
|
||||
}
|
||||
|
||||
ListModel {
|
||||
id: stepsListModel
|
||||
ListElement {description:"Send Request"; loadingTime: 0; stepCompleted: false}
|
||||
ListElement {description:"Receive Response"; loadingTime: 0; stepCompleted: false}
|
||||
ListElement {description:"Confirm Identity"; loadingTime: 0; stepCompleted: false}
|
||||
}
|
||||
|
||||
Shortcut {
|
||||
sequence: "Ctrl+R"
|
||||
onActivated: {
|
||||
if (!root.stepsCompleted) {
|
||||
animate.running = true;
|
||||
} else {
|
||||
root.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: indicLabel
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
color: Theme.palette.directColor1
|
||||
text: "Press Ctrl+R to run the animation"
|
||||
font.pixelSize: 17
|
||||
}
|
||||
|
||||
SequentialAnimation {
|
||||
id: animate
|
||||
ScriptAction {
|
||||
id: step1
|
||||
property int loadingTime: 0
|
||||
Behavior on loadingTime { NumberAnimation { duration: 2000 }}
|
||||
onLoadingTimeChanged: {
|
||||
stepsListModel.setProperty(1, "loadingTime", step1.loadingTime);
|
||||
}
|
||||
script: {
|
||||
step1.loadingTime = 2000;
|
||||
stepsListModel.setProperty(0, "loadingTime", step1.loadingTime);
|
||||
stepsListModel.setProperty(0, "stepCompleted", true);
|
||||
}
|
||||
}
|
||||
PauseAnimation {
|
||||
duration: 2100
|
||||
}
|
||||
ScriptAction {
|
||||
id: step2
|
||||
property int loadingTime: 0
|
||||
Behavior on loadingTime { NumberAnimation { duration: 2000 } }
|
||||
onLoadingTimeChanged: {
|
||||
stepsListModel.setProperty(2, "loadingTime", step2.loadingTime);
|
||||
}
|
||||
script: {
|
||||
step2.loadingTime = 2000;
|
||||
stepsListModel.setProperty(1, "stepCompleted", true);
|
||||
}
|
||||
}
|
||||
PauseAnimation {
|
||||
duration: 2100
|
||||
}
|
||||
ScriptAction {
|
||||
script: {
|
||||
stepsListModel.setProperty(2, "stepCompleted", true);
|
||||
root.stepsCompleted = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
//simulation code
|
||||
|
||||
StatusWizardStepper {
|
||||
id: wizardStepper
|
||||
width: (parent.width - 50)
|
||||
anchors.top: indicLabel.bottom
|
||||
anchors.topMargin: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
stepsModel: stepsListModel
|
||||
}
|
||||
}
|
||||
+11
-39
@@ -1,46 +1,18 @@
|
||||
<RCC>
|
||||
<qresource prefix="/">
|
||||
<file>main.qml</file>
|
||||
<file>pages/StatusAccountSelectorPage.qml</file>
|
||||
<file>pages/StatusAddressPage.qml</file>
|
||||
<file>pages/StatusAssetSelectorPage.qml</file>
|
||||
<file>pages/StatusChatCommandButtonPage.qml</file>
|
||||
<file>pages/StatusChatInfoToolBarPage.qml</file>
|
||||
<file>pages/StatusColorSelectorPage.qml</file>
|
||||
<file>pages/StatusExpandableSettingsItemPage.qml</file>
|
||||
<file>pages/StatusInputPage.qml</file>
|
||||
<file>pages/StatusMacNotificationPage.qml</file>
|
||||
<file>pages/StatusPopupMenuPage.qml</file>
|
||||
<file>pages/StatusSelectPage.qml</file>
|
||||
<file>pages/StatusTabBarIconButtonPage.qml</file>
|
||||
<file>pages/StatusTabSwitchPage.qml</file>
|
||||
<file>pages/StatusWalletColorButtonPage.qml</file>
|
||||
<file>pages/StatusWalletColorSelectPage.qml</file>
|
||||
<file>pages/StatusPasswordStrengthIndicatorPage.qml</file>
|
||||
<file>controls/Buttons.qml</file>
|
||||
<file>controls/Controls.qml</file>
|
||||
<file>controls/Icons.qml</file>
|
||||
<file>controls/Layout.qml</file>
|
||||
<file>controls/ListItems.qml</file>
|
||||
<file>controls/Others.qml</file>
|
||||
<file>controls/Popups.qml</file>
|
||||
<file>demoapp/ChatChannelView.qml</file>
|
||||
<file>demoapp/CreateChatView.qml</file>
|
||||
<file>demoapp/DemoCommunityDetailModal.qml</file>
|
||||
<file>demoapp/DemoContactRequestsModal.qml</file>
|
||||
<file>demoapp/StatusAppChatView.qml</file>
|
||||
<file>demoapp/StatusAppCommunityView.qml</file>
|
||||
<file>demoapp/StatusAppProfileSettingsView.qml</file>
|
||||
<file>demoapp/data/Models.qml</file>
|
||||
<file>demoapp/data/qmldir</file>
|
||||
<file>demoapp/data/logo-test-image.png</file>
|
||||
<file>Controls.qml</file>
|
||||
<file>Icons.qml</file>
|
||||
<file>Others.qml</file>
|
||||
<file>Buttons.qml</file>
|
||||
<file>DemoApp.qml</file>
|
||||
<file>ListItems.qml</file>
|
||||
<file>StatusChatInfoToolBarPage.qml</file>
|
||||
<file>StatusPopupMenuPage.qml</file>
|
||||
<file>StatusInputPage.qml</file>
|
||||
<file>ThemeSwitch.qml</file>
|
||||
<file>pages/StatusColorSelectorGridPage.qml</file>
|
||||
<file>pages/StatusListPickerPage.qml</file>
|
||||
<file>pages/StatusPinInputPage.qml</file>
|
||||
<file>pages/StatusTagSelectorPage.qml</file>
|
||||
<file>pages/StatusToastMessagePage.qml</file>
|
||||
<file>pages/StatusWizardStepperPage.qml</file>
|
||||
<file>Layout.qml</file>
|
||||
<file>Popups.qml</file>
|
||||
<file>StatusExpandableSettingsItemPage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
+9
-10
@@ -15,16 +15,13 @@ SOURCES += \
|
||||
handler.cpp \
|
||||
main.cpp \
|
||||
sandboxapp.cpp \
|
||||
spellchecker.cpp \
|
||||
spellchecker.cpp
|
||||
|
||||
!macx {
|
||||
SOURCES += statuswindow.cpp
|
||||
}
|
||||
|
||||
TARGET = sandboxapp
|
||||
DESTDIR = $$PWD/bin
|
||||
|
||||
DESTDIR = $$PWD/bin
|
||||
|
||||
macx {
|
||||
CONFIG -= app_bundle
|
||||
@@ -41,12 +38,6 @@ macx {
|
||||
DEFINES += USE_HUNSPELL
|
||||
message("hunspell exists in /usr/local/lib")
|
||||
}
|
||||
|
||||
copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
|
||||
first.depends = $(first) copydata
|
||||
export(first.depends)
|
||||
export(copydata.commands)
|
||||
QMAKE_EXTRA_TARGETS += first copydata
|
||||
}
|
||||
|
||||
ios {
|
||||
@@ -63,6 +54,14 @@ ios {
|
||||
RESOURCES += qml.qrc \
|
||||
$$PWD/../statusq.qrc
|
||||
|
||||
DESTDIR = $$PWD/bin
|
||||
|
||||
copydata.commands = $(COPY_DIR) $$PWD/dictionaries $$DESTDIR
|
||||
first.depends = $(first) copydata
|
||||
export(first.depends)
|
||||
export(copydata.commands)
|
||||
QMAKE_EXTRA_TARGETS += first copydata
|
||||
|
||||
# Default rules for deployment.
|
||||
qnx: target.path = /tmp/$${TARGET}/bin
|
||||
else: unix:!android: target.path = /opt/$${TARGET}/bin
|
||||
|
||||
@@ -20,7 +20,7 @@ void SandboxApp::startEngine()
|
||||
qmlRegisterType<SpellChecker>("Sandbox", 0, 1, "Spellchecker");
|
||||
|
||||
#ifdef QT_DEBUG
|
||||
const QUrl url = QUrl::fromLocalFile(applicationDirPath() + "/../main.qml");
|
||||
const QUrl url(applicationDirPath() + "/../main.qml");
|
||||
#else
|
||||
const QUrl url(QStringLiteral("qrc:/main.qml"));
|
||||
#endif
|
||||
|
||||
@@ -1,10 +1,4 @@
|
||||
#!/bin/bash
|
||||
|
||||
make clean
|
||||
if [[ $OSTYPE == 'darwin'* ]]
|
||||
then
|
||||
qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
|
||||
else
|
||||
qmake sandbox.pro CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
|
||||
fi
|
||||
make
|
||||
qmake sandbox.pro -spec macx-clang CONFIG+=debug CONFIG+=x86_64 && /usr/bin/make qmake_all
|
||||
make
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ Rectangle {
|
||||
anchors.centerIn: parent
|
||||
text: {
|
||||
if (statusBadge.value > 99) {
|
||||
return qsTr("99+");
|
||||
return "99+";
|
||||
}
|
||||
return statusBadge.value;
|
||||
}
|
||||
|
||||
@@ -15,17 +15,19 @@ Column {
|
||||
width: 288
|
||||
|
||||
property string categoryId: ""
|
||||
property var model: null
|
||||
property string selectedChatId: ""
|
||||
property alias chatListItems: delegateModel
|
||||
property bool draggableItems: false
|
||||
property bool highlightItem: true
|
||||
|
||||
property alias statusChatListItems: statusChatListItems
|
||||
|
||||
property Component popupMenu
|
||||
|
||||
property var filterFn
|
||||
property var profileImageFn
|
||||
property var chatNameFn
|
||||
|
||||
signal chatItemSelected(string categoryId, string id)
|
||||
signal chatItemSelected(string id)
|
||||
signal chatItemUnmuted(string id)
|
||||
signal chatItemReordered(string id, int from, int to)
|
||||
|
||||
@@ -37,16 +39,17 @@ Column {
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
model: statusChatList.model
|
||||
|
||||
delegate: Item {
|
||||
id: draggable
|
||||
width: statusChatListItem.width
|
||||
height: statusChatListItem.height
|
||||
|
||||
property alias chatListItem: statusChatListItem
|
||||
|
||||
visible: {
|
||||
if (!!statusChatList.filterFn) {
|
||||
return statusChatList.filterFn(model)
|
||||
return statusChatList.filterFn(model, statusChatList.categoryId)
|
||||
}
|
||||
return true
|
||||
}
|
||||
@@ -91,30 +94,36 @@ Column {
|
||||
}
|
||||
|
||||
StatusChatListItem {
|
||||
|
||||
id: statusChatListItem
|
||||
|
||||
opacity: dragSensor.active ? 0.0 : 1.0
|
||||
originalOrder: model.position
|
||||
chatId: model.itemId
|
||||
categoryId: model.parentItemId? model.parentItemId : ""
|
||||
name: model.name
|
||||
type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
|
||||
muted: model.muted
|
||||
hasUnreadMessages: model.hasUnreadMessages
|
||||
notificationsCount: model.notificationsCount
|
||||
highlightWhenCreated: !!model.highlight
|
||||
selected: (model.active && statusChatList.highlightItem)
|
||||
property string profileImage: ""
|
||||
|
||||
icon.emoji: model.emoji
|
||||
icon.color: !!model.color ? model.color : Theme.palette.userCustomizationColors[model.colorId]
|
||||
image.isIdenticon: false
|
||||
image.source: model.icon
|
||||
ringSettings.ringSpecModel: model.colorHash
|
||||
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: {
|
||||
highlightWhenCreated = false
|
||||
|
||||
if (mouse.button === Qt.RightButton && !!statusChatList.popupMenu) {
|
||||
statusChatListItem.highlighted = true
|
||||
|
||||
@@ -123,7 +132,7 @@ Column {
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler(model.itemId)
|
||||
originalOpenHandler((model.chatId || model.id))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,10 +152,10 @@ Column {
|
||||
return
|
||||
}
|
||||
if (!statusChatListItem.selected) {
|
||||
statusChatList.chatItemSelected(model.parentItemId, model.itemId)
|
||||
statusChatList.chatItemSelected(model.chatId || model.id)
|
||||
}
|
||||
}
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.itemId)
|
||||
onUnmute: statusChatList.chatItemUnmuted(model.chatId || model.id)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -195,8 +204,9 @@ Column {
|
||||
type: draggable.chatListItem.type
|
||||
muted: draggable.chatListItem.muted
|
||||
dragged: true
|
||||
hasUnreadMessages: model.hasUnreadMessages
|
||||
notificationsCount: model.notificationsCount
|
||||
hasUnreadMessages: draggable.chatListItem.hasUnreadMessages
|
||||
hasMention: draggable.chatListItem.hasMention
|
||||
badge.value: draggable.chatListItem.badge.value
|
||||
selected: draggable.chatListItem.selected
|
||||
|
||||
icon.color: draggable.chatListItem.icon.color
|
||||
|
||||
@@ -14,15 +14,17 @@ Item {
|
||||
implicitWidth: chatListsAndCategories.width
|
||||
|
||||
property StatusTooltipSettings categoryAddButtonToolTip: StatusTooltipSettings {
|
||||
text: qsTr("Add channel inside category")
|
||||
text: "Add channel inside category"
|
||||
}
|
||||
property StatusTooltipSettings categoryMenuButtonToolTip: StatusTooltipSettings {
|
||||
text: qsTr("More")
|
||||
text: "More"
|
||||
}
|
||||
|
||||
property var model: []
|
||||
property string selectedChatId: ""
|
||||
property bool showCategoryActionButtons: false
|
||||
property bool showPopupMenu: true
|
||||
property alias chatList: statusChatList.chatListItems
|
||||
property alias categoryList: delegateModel
|
||||
property alias sensor: sensor
|
||||
property bool draggableItems: false
|
||||
property bool draggableCategories: false
|
||||
@@ -34,7 +36,7 @@ Item {
|
||||
property Component chatListPopupMenu
|
||||
property Component popupMenu
|
||||
|
||||
signal chatItemSelected(string categoryId, string id)
|
||||
signal chatItemSelected(string id)
|
||||
signal chatItemUnmuted(string id)
|
||||
signal chatItemReordered(string categoryId, string chatId, int from, int to)
|
||||
signal chatListCategoryReordered(string categoryId, int from, int to)
|
||||
@@ -69,25 +71,26 @@ Item {
|
||||
StatusChatList {
|
||||
id: statusChatList
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
visible: statusChatList.model.count > 0
|
||||
onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
|
||||
visible: chatListItems.count > 0
|
||||
selectedChatId: statusChatListAndCategories.selectedChatId
|
||||
onChatItemSelected: statusChatListAndCategories.chatItemSelected(id)
|
||||
onChatItemUnmuted: statusChatListAndCategories.chatItemUnmuted(id)
|
||||
onChatItemReordered: statusChatListAndCategories.chatItemReordered(categoryId, id, from, to)
|
||||
draggableItems: statusChatListAndCategories.draggableItems
|
||||
model: statusChatListAndCategories.model
|
||||
filterFn: function (model) {
|
||||
return !model.isCategory
|
||||
return !!!model.categoryId
|
||||
}
|
||||
popupMenu: statusChatListAndCategories.chatListPopupMenu
|
||||
}
|
||||
|
||||
DelegateModel {
|
||||
id: delegateModel
|
||||
model: statusChatListAndCategories.model
|
||||
|
||||
delegate: Item {
|
||||
id: draggable
|
||||
width: statusChatListCategory.width
|
||||
height: statusChatListCategory.height
|
||||
|
||||
property alias chatListCategory: statusChatListCategory
|
||||
|
||||
StatusChatListCategory {
|
||||
@@ -96,7 +99,7 @@ Item {
|
||||
property bool dragActive: false
|
||||
property real startY: 0
|
||||
property real startX: 0
|
||||
|
||||
|
||||
opacity: dragActive ? 0.0 : 1.0
|
||||
|
||||
dragSensor.drag.target: draggedListCategoryLoader.item
|
||||
@@ -133,15 +136,16 @@ Item {
|
||||
menuButton.tooltip: statusChatListAndCategories.categoryMenuButtonToolTip
|
||||
|
||||
originalOrder: model.position
|
||||
categoryId: model.itemId
|
||||
categoryId: model.categoryId
|
||||
name: model.name
|
||||
showActionButtons: statusChatListAndCategories.showCategoryActionButtons
|
||||
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.itemId)
|
||||
addButton.onClicked: statusChatListAndCategories.categoryAddButtonClicked(model.categoryId)
|
||||
|
||||
chatList.model: model.subItems
|
||||
chatList.onChatItemSelected: statusChatListAndCategories.chatItemSelected(categoryId, id)
|
||||
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.itemId, id, from, to)
|
||||
chatList.onChatItemReordered: statusChatListAndCategories.chatItemReordered(model.categoryId, id, from, to)
|
||||
chatList.draggableItems: statusChatListAndCategories.draggableItems
|
||||
|
||||
popupMenu: statusChatListAndCategories.categoryPopupMenu
|
||||
@@ -150,7 +154,7 @@ Item {
|
||||
// Used to set the initial value of "opened" when the
|
||||
// model is bound/changed.
|
||||
opened: {
|
||||
let openedState = statusChatListAndCategories.openedCategoryState[model.itemId]
|
||||
let openedState = statusChatListAndCategories.openedCategoryState[model.categoryId]
|
||||
return openedState !== undefined ? openedState : true // defaults to open
|
||||
}
|
||||
|
||||
@@ -159,7 +163,7 @@ Item {
|
||||
// as the state would be lost each time the model is
|
||||
// changed.
|
||||
onOpenedChanged: {
|
||||
statusChatListAndCategories.openedCategoryState[model.itemId] = statusChatListCategory.opened
|
||||
statusChatListAndCategories.openedCategoryState[model.categoryId] = statusChatListCategory.opened
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,7 +212,8 @@ Item {
|
||||
name: draggable.chatListCategory.name
|
||||
showActionButtons: draggable.chatListCategory.showActionButtons
|
||||
|
||||
chatList.model: draggable.chatListCategory.chatList.model
|
||||
chatList.chatListItems.model: draggable.chatListCategory.chatList.chatListItems.model
|
||||
chatList.selectedChatId: draggable.chatListCategory.chatList.selectedChatId
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -35,11 +35,11 @@ Column {
|
||||
StatusChatListCategoryItem {
|
||||
id: statusChatListCategoryItem
|
||||
title: statusChatListCategory.name
|
||||
visible: model.isCategory
|
||||
opened: statusChatListCategory.opened
|
||||
sensor.pressAndHoldInterval: 150
|
||||
|
||||
showMenuButton: showActionButtons && !!statusChatListCategory.popupMenu
|
||||
|
||||
highlighted: statusChatListCategory.dragged
|
||||
sensor.onClicked: {
|
||||
if (sensor.enabled) {
|
||||
@@ -48,6 +48,7 @@ Column {
|
||||
popupMenuSlot.item.popup(mouse.x + 4, mouse.y + 6);
|
||||
return
|
||||
}
|
||||
statusChatListCategory.opened = !opened;
|
||||
}
|
||||
}
|
||||
onTitleClicked: statusChatListCategory.opened = !opened
|
||||
@@ -67,7 +68,7 @@ Column {
|
||||
visible: statusChatListCategory.opened
|
||||
categoryId: statusChatListCategory.categoryId
|
||||
filterFn: function (model) {
|
||||
return !!model.parentItemId && model.parentItemId === statusChatList.categoryId
|
||||
return !!model.categoryId && model.categoryId == statusChatList.categoryId
|
||||
}
|
||||
|
||||
popupMenu: statusChatListCategory.chatListPopupMenu
|
||||
|
||||
@@ -39,21 +39,21 @@ StatusListItem {
|
||||
id: addButton
|
||||
icon.name: "add"
|
||||
icon.width: 20
|
||||
visible: statusChatListCategoryItem.showAddButton &&
|
||||
visible: statusChatListCategoryItem.showAddButton &&
|
||||
(statusChatListCategoryItem.highlighted ||
|
||||
statusChatListCategoryItem.sensor.containsMouse)
|
||||
onClicked: statusChatListCategoryItem.addButtonClicked(mouse)
|
||||
tooltip.text: qsTr("Add channel inside category")
|
||||
tooltip.text: "Add channel inside category"
|
||||
},
|
||||
StatusChatListCategoryItemButton {
|
||||
id: menuButton
|
||||
icon.name: "more"
|
||||
icon.width: 21
|
||||
visible: statusChatListCategoryItem.showMenuButton &&
|
||||
visible: statusChatListCategoryItem.showMenuButton &&
|
||||
(statusChatListCategoryItem.highlighted ||
|
||||
statusChatListCategoryItem.sensor.containsMouse)
|
||||
onClicked: statusChatListCategoryItem.menuButtonClicked(mouse)
|
||||
tooltip.text: qsTr("More")
|
||||
tooltip.text: "More"
|
||||
},
|
||||
StatusChatListCategoryItemButton {
|
||||
id: toggleButton
|
||||
|
||||
@@ -5,12 +5,11 @@ import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
id: statusChatListItem
|
||||
|
||||
objectName: "chatItem"
|
||||
property int originalOrder: -1
|
||||
@@ -19,7 +18,7 @@ Rectangle {
|
||||
property string name: ""
|
||||
property alias badge: statusBadge
|
||||
property bool hasUnreadMessages: false
|
||||
property int notificationsCount: 0
|
||||
property bool hasMention: false
|
||||
property bool muted: false
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 24
|
||||
@@ -29,13 +28,10 @@ Rectangle {
|
||||
width: 24
|
||||
height: 24
|
||||
color: Theme.palette.miscColor5
|
||||
emoji: ""
|
||||
charactersLen: root.type === StatusChatListItem.Type.OneToOneChat ? 2 : 1
|
||||
letterSize: 15
|
||||
}
|
||||
property alias ringSettings: identicon.ringSettings
|
||||
property int type: StatusChatListItem.Type.PublicChat
|
||||
property bool highlighted: false
|
||||
property bool highlightWhenCreated: false
|
||||
property bool selected: false
|
||||
property bool dragged: false
|
||||
property alias sensor: sensor
|
||||
@@ -62,7 +58,7 @@ Rectangle {
|
||||
if (selected) {
|
||||
return Theme.palette.statusChatListItem.selectedBackgroundColor
|
||||
}
|
||||
return hoverHander.hovered || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
|
||||
return sensor.containsMouse || highlighted ? Theme.palette.statusChatListItem.hoverBackgroundColor : Theme.palette.baseColor4
|
||||
}
|
||||
|
||||
opacity: dragged ? 0.7 : 1
|
||||
@@ -70,24 +66,21 @@ Rectangle {
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHander
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: root.clicked(mouse)
|
||||
onClicked: statusChatListItem.clicked(mouse)
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: identicon
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
image: root.image
|
||||
icon: root.icon
|
||||
name: root.name
|
||||
image: statusChatListItem.image
|
||||
icon: statusChatListItem.icon
|
||||
name: statusChatListItem.name
|
||||
}
|
||||
|
||||
StatusIcon {
|
||||
@@ -97,21 +90,21 @@ Rectangle {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
width: 14
|
||||
visible: root.type !== StatusChatListItem.Type.OneToOneChat
|
||||
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
|
||||
opacity: {
|
||||
if (root.muted && !hoverHander.hovered && !root.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
return 0.4
|
||||
}
|
||||
return root.hasUnreadMessages ||
|
||||
root.notificationsCount > 0 ||
|
||||
root.selected ||
|
||||
root.highlighted ||
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
statusBadge.visible ||
|
||||
hoverHander.hovered ? 1.0 : 0.7
|
||||
sensor.containsMouse ? 1.0 : 0.7
|
||||
}
|
||||
|
||||
icon: {
|
||||
switch (root.type) {
|
||||
switch (statusChatListItem.type) {
|
||||
case StatusChatListItem.Type.PublicCat:
|
||||
return Theme.palette.name == "light" ? "tiny/public-chat" : "tiny/public-chat-white"
|
||||
break;
|
||||
@@ -136,27 +129,25 @@ Rectangle {
|
||||
anchors.rightMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
text: (root.type === StatusChatListItem.Type.PublicChat &&
|
||||
!root.name.startsWith("#") ?
|
||||
"#" + root.name :
|
||||
root.name)
|
||||
text: (statusChatListItem.type === StatusChatListItem.Type.PublicChat &&
|
||||
!statusChatListItem.name.startsWith("#") ?
|
||||
"#" + statusChatListItem.name :
|
||||
statusChatListItem.name)
|
||||
elide: Text.ElideRight
|
||||
color: {
|
||||
if (root.muted && !hoverHander.hovered && !root.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
return Theme.palette.directColor5
|
||||
}
|
||||
return root.hasUnreadMessages ||
|
||||
root.notificationsCount > 0 ||
|
||||
root.selected ||
|
||||
root.highlighted ||
|
||||
root.highlightWhenCreated ||
|
||||
hoverHander.hovered ||
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
sensor.containsMouse ||
|
||||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||
}
|
||||
font.weight: !root.muted &&
|
||||
(root.hasUnreadMessages ||
|
||||
root.notificationsCount > 0 ||
|
||||
root.highlightWhenCreated ||
|
||||
font.weight: !statusChatListItem.muted &&
|
||||
(statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusBadge.visible) ? Font.Bold : Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
@@ -169,18 +160,18 @@ Rectangle {
|
||||
width: 14
|
||||
opacity: mutedIconSensor.containsMouse ? 1.0 : 0.2
|
||||
icon: Theme.palette.name === "light" ? "tiny/muted" : "tiny/muted-white"
|
||||
visible: root.muted
|
||||
visible: statusChatListItem.muted
|
||||
|
||||
MouseArea {
|
||||
id: mutedIconSensor
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: root.unmute()
|
||||
onClicked: statusChatListItem.unmute()
|
||||
}
|
||||
|
||||
StatusToolTip {
|
||||
text: qsTr("Unmute")
|
||||
text: "Unmute"
|
||||
visible: mutedIconSensor.containsMouse
|
||||
}
|
||||
}
|
||||
@@ -192,11 +183,10 @@ Rectangle {
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
|
||||
color: root.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
|
||||
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
|
||||
border.width: 4
|
||||
border.color: color
|
||||
value: root.notificationsCount
|
||||
visible: root.notificationsCount > 0
|
||||
visible: statusBadge.value > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@ Rectangle {
|
||||
onClicked: statusChatToolBar.searchButtonClicked()
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Search")
|
||||
tooltip.text: "Search"
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
}
|
||||
@@ -72,7 +72,7 @@ Rectangle {
|
||||
onClicked: statusChatToolBar.membersButtonClicked()
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Members")
|
||||
tooltip.text: "Members"
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
}
|
||||
@@ -87,31 +87,12 @@ Rectangle {
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.visible: !!tooltip.text && menuButton.hovered && !popupMenuSlot.item.opened
|
||||
tooltip.text: qsTr("More")
|
||||
tooltip.text: "More"
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
property bool showMoreMenu: false
|
||||
onClicked: {
|
||||
menuButton.highlighted = true
|
||||
|
||||
let originalOpenHandler = popupMenuSlot.item.openHandler
|
||||
let originalCloseHandler = popupMenuSlot.item.closeHandler
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler()
|
||||
}
|
||||
}
|
||||
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
if (!!originalCloseHandler) {
|
||||
originalCloseHandler()
|
||||
}
|
||||
}
|
||||
|
||||
popupMenuSlot.item.openHandler = originalOpenHandler
|
||||
popupMenuSlot.item.popup(-popupMenuSlot.item.width + menuButton.width, menuButton.height + 4)
|
||||
statusChatToolBar.menuButtonClicked()
|
||||
}
|
||||
@@ -119,6 +100,15 @@ Rectangle {
|
||||
Loader {
|
||||
id: popupMenuSlot
|
||||
active: !!statusChatToolBar.popupMenu
|
||||
onLoaded: {
|
||||
popupMenuSlot.item.closeHandler = function () {
|
||||
menuButton.highlighted = false
|
||||
}
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
menuButton.highlighted = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -141,7 +131,7 @@ Rectangle {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
|
||||
// initializing the tooltip
|
||||
tooltip.text: qsTr("Activity")
|
||||
tooltip.text: "Activity"
|
||||
tooltip.orientation: StatusToolTip.Orientation.Bottom
|
||||
tooltip.y: parent.height + 12
|
||||
|
||||
|
||||
@@ -14,7 +14,6 @@ StatusListItem {
|
||||
|
||||
components: [
|
||||
StatusBadge {
|
||||
visible: statusContactRequestsListItem.requestsCount > 0
|
||||
value: statusContactRequestsListItem.requestsCount
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
border.width: 4
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Row {
|
||||
id: root
|
||||
|
||||
property bool isMutualContact: false
|
||||
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
|
||||
property StatusIconSettings mutualConnectionIcon: StatusIconSettings {
|
||||
name: "tiny/tiny-contact"
|
||||
color: Theme.palette.indirectColor1
|
||||
width: dummyImage.width
|
||||
height: dummyImage.height
|
||||
background: StatusIconBackgroundSettings {
|
||||
width: 10
|
||||
height: 10
|
||||
color: Theme.palette.primaryColor1
|
||||
}
|
||||
// Only used to get implicit width and height from the actual image
|
||||
property Image dummyImage: Image {
|
||||
source: mutualConnectionIcon.name ? "../../assets/img/icons/" + mutualConnectionIcon.name + ".svg": ""
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
|
||||
property StatusIconSettings trustContactIcon: StatusIconSettings {
|
||||
// None and Untrustworthy types, same aspect (Icon will not be visible in case of None type):
|
||||
name: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? "tiny/tiny-checkmark" : "tiny/subtract"
|
||||
color: Theme.palette.indirectColor1
|
||||
width: dummyImage.width
|
||||
height: dummyImage.height
|
||||
background: StatusIconBackgroundSettings {
|
||||
width: 10
|
||||
height: 10
|
||||
color: root.trustIndicator === StatusContactVerificationIcons.TrustedType.Verified ? Theme.palette.primaryColor1 : Theme.palette.dangerColor1
|
||||
}
|
||||
// Only used to get implicit width and height from the actual image
|
||||
property Image dummyImage: Image {
|
||||
source: trustContactIcon.name ? "../../assets/img/icons/" + trustContactIcon.name + ".svg": ""
|
||||
visible: false
|
||||
}
|
||||
}
|
||||
|
||||
enum TrustedType {
|
||||
None, //0
|
||||
Verified, //1
|
||||
Untrustworthy //2
|
||||
}
|
||||
|
||||
spacing: 4
|
||||
visible: root.isMutualContact || (root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None)
|
||||
|
||||
StatusRoundIcon {
|
||||
visible: root.isMutualContact
|
||||
icon.name: root.mutualConnectionIcon.name
|
||||
icon.width: root.mutualConnectionIcon.width
|
||||
icon.height: root.mutualConnectionIcon.height
|
||||
icon.rotation: root.mutualConnectionIcon.rotation
|
||||
icon.color: root.mutualConnectionIcon.color
|
||||
icon.background.color: root.mutualConnectionIcon.background.color
|
||||
icon.background.width: root.mutualConnectionIcon.background.width
|
||||
icon.background.height: root.mutualConnectionIcon.background.height
|
||||
}
|
||||
|
||||
StatusRoundIcon {
|
||||
visible: root.trustIndicator !== StatusContactVerificationIcons.TrustedType.None
|
||||
icon.name: root.trustContactIcon.name
|
||||
icon.width: root.trustContactIcon.width
|
||||
icon.height: root.trustContactIcon.height
|
||||
icon.rotation: root.trustContactIcon.rotation
|
||||
icon.color: root.trustContactIcon.color
|
||||
icon.background.color: root.trustContactIcon.background.color
|
||||
icon.background.width: root.trustContactIcon.background.width
|
||||
icon.background.height: root.trustContactIcon.background.height
|
||||
}
|
||||
}
|
||||
@@ -12,7 +12,6 @@ Rectangle {
|
||||
property alias additionalText: additionalText.text
|
||||
property alias button: button
|
||||
property alias expandableComponent: expandableRegion.sourceComponent
|
||||
property alias expandableItem: expandableRegion.item
|
||||
|
||||
property int type: StatusExpandableItem.Type.Primary
|
||||
property bool expandable: true
|
||||
@@ -59,134 +58,111 @@ Rectangle {
|
||||
}
|
||||
|
||||
|
||||
Rectangle {
|
||||
id: header
|
||||
StatusSmartIdenticon {
|
||||
id: identicon
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
height: 64
|
||||
radius: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 8 : 0
|
||||
color: statusExpandableItem.type === StatusExpandableItem.Type.Secondary && sensor.containsMouse ? Theme.palette.baseColor2 : "transparent"
|
||||
anchors.topMargin: 25
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 0 : 11
|
||||
image: statusExpandableItem.image
|
||||
icon: statusExpandableItem.icon
|
||||
name: primaryText.text
|
||||
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
|
||||
}
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: identicon
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 12.5 : 25
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Secondary) ? 16 : 11
|
||||
image: statusExpandableItem.image
|
||||
icon: statusExpandableItem.icon
|
||||
name: primaryText.text
|
||||
active: (statusExpandableItem.type !== StatusExpandableItem.Type.Tertiary)
|
||||
}
|
||||
StatusBaseText {
|
||||
id: primaryText
|
||||
anchors.top: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ||
|
||||
(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? parent.top : undefined
|
||||
anchors.topMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? 29 : 17
|
||||
anchors.left: identicon.active ? identicon.right : parent.left
|
||||
anchors.leftMargin: (statusExpandableItem.type === StatusExpandableItem.Type.Primary) ? 10 : 16
|
||||
|
||||
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
|
||||
|
||||
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)
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
StatusIcon {
|
||||
id: expandImage
|
||||
anchors.verticalCenter: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
|
||||
primaryText.verticalCenter : identicon.verticalCenter
|
||||
anchors.verticalCenterOffset:(statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ? -3 : -1
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: {
|
||||
switch (statusExpandableItem.type) {
|
||||
case StatusExpandableItem.Type.Primary:
|
||||
return 23
|
||||
break;
|
||||
case StatusExpandableItem.Type.Secondary:
|
||||
return 16
|
||||
break;
|
||||
default:
|
||||
return 6
|
||||
|
||||
}
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if(expandable) {
|
||||
expanded = !expanded
|
||||
}
|
||||
visible: expandable && !button.visible
|
||||
color: (statusExpandableItem.type === StatusExpandableItem.Type.Tertiary) ?
|
||||
Theme.palette.baseColor1 :
|
||||
Theme.palette.directColor1
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if(expandable) {
|
||||
expanded = !expanded
|
||||
}
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
visible: !button.visible && expandable
|
||||
hoverEnabled: true
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
visible: !button.visible && expandable
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: expandableRegion
|
||||
anchors.top: header.bottom
|
||||
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
|
||||
visible: false
|
||||
active: false
|
||||
}
|
||||
|
||||
onExpandedChanged: {
|
||||
@@ -203,13 +179,13 @@ Rectangle {
|
||||
name: "EXPANDED"
|
||||
PropertyChanges {target: expandImage; icon: "chevron-up"}
|
||||
PropertyChanges {target: statusExpandableItem; height: 82 + expandableRegion.height + 22}
|
||||
PropertyChanges {target: expandableRegion; visible: true}
|
||||
PropertyChanges {target: expandableRegion; active: true}
|
||||
},
|
||||
State {
|
||||
name: "COLLAPSED"
|
||||
PropertyChanges {target: expandImage; icon: "chevron-down"}
|
||||
PropertyChanges {target: statusExpandableItem; height: 82}
|
||||
PropertyChanges {target: expandableRegion; visible: false}
|
||||
PropertyChanges {target: expandableRegion; active: false}
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -1,281 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusImageCropPanel
|
||||
\inherits Item
|
||||
\inqmlmodule StatusQ.Components
|
||||
\since StatusQ.Components 0.1
|
||||
\brief Draw a crop-window onto an image and allows manipulating the position of the crop-window. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
|
||||
|
||||
Adds mouse pan and zoom functionality on top of StatusImageCrop functionality. Also adds small
|
||||
practical features and optimizes drawing by minimizing StatusImageCrop area
|
||||
|
||||
\sa StatusImageCrop for more details
|
||||
|
||||
Example of how to use it:
|
||||
|
||||
\qml
|
||||
StatusImageCropPanel {
|
||||
width: 400
|
||||
height: 200
|
||||
source: "qrc:/demoapp/data/logo-test-image.png"
|
||||
windowStyle: StatusImageCrop.WindowStyle.Rectangular
|
||||
Component.onCompleted: setCropRect(Qt.rect(10, 0, sourceSize.width - 20, sourceSize.height))
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: mainLayout.implicitWidth
|
||||
implicitHeight: mainLayout.implicitHeight
|
||||
|
||||
/*!
|
||||
\qmlproperty real StatusImageCrop::aspectRatio
|
||||
Initial aspect-ratio of the crop-window
|
||||
*/
|
||||
property real aspectRatio: 1
|
||||
/*!
|
||||
\qmlproperty bool StatusImageCrop::interactive
|
||||
If true allows user to interact with the image. Set to false for previewing existing crop-data
|
||||
*/
|
||||
property bool interactive: true
|
||||
/*!
|
||||
\qmlproperty bool StatusImageCrop::margins
|
||||
Space to keep around the control borders and crop area
|
||||
*/
|
||||
property int margins: 10
|
||||
|
||||
/*!
|
||||
\qmlproperty url StatusImageCropPanel::source
|
||||
\sa StatusImageCrop::source
|
||||
*/
|
||||
/*required*/ property alias source: cropEditor.source
|
||||
|
||||
/*!
|
||||
\qmlproperty WindowStyle StatusImageCropPanel::windowStyle
|
||||
\sa StatusImageCrop::windowStyle
|
||||
*/
|
||||
property alias windowStyle: cropEditor.windowStyle
|
||||
/*!
|
||||
\qmlproperty int StatusImageCropPanel::radius
|
||||
\sa StatusImageCrop::radius
|
||||
*/
|
||||
property alias radius: cropEditor.radius
|
||||
/*!
|
||||
\qmlproperty color StatusImageCropPanel::wallColor
|
||||
\sa StatusImageCrop::wallColor
|
||||
*/
|
||||
property alias wallColor: cropEditor.wallColor
|
||||
/*!
|
||||
\qmlproperty real StatusImageCropPanel::wallTransparency
|
||||
\sa StatusImageCrop::wallTransparency
|
||||
*/
|
||||
property alias wallTransparency: cropEditor.wallTransparency
|
||||
/*!
|
||||
\qmlproperty rect StatusImageCropPanel::cropRect
|
||||
\sa StatusImageCrop::cropRect
|
||||
*/
|
||||
property alias cropRect: cropEditor.cropRect
|
||||
/*!
|
||||
\qmlproperty rect StatusImageCropPanel::cropRect
|
||||
\sa StatusImageCrop::cropRect
|
||||
*/
|
||||
readonly property alias cropWindow: cropEditor.cropWindow
|
||||
/*!
|
||||
\qmlproperty real StatusImageCrop::scrollZoomFactor
|
||||
How fast is image scaled (zoomed) when using mouse scroll
|
||||
*/
|
||||
property real scrollZoomFactor: 0.5
|
||||
/*!
|
||||
\qmlproperty bool StatusImageCropPanel::enableCheckers
|
||||
Shows helper guiding checkers pattern where image is not covering
|
||||
*/
|
||||
property bool enableCheckers: root.interactive
|
||||
/*!
|
||||
\qmlproperty size StatusImageCropPanel::sourceSize
|
||||
\sa StatusImageCrop::sourceSize
|
||||
*/
|
||||
property alias sourceSize: cropEditor.sourceSize
|
||||
|
||||
/*
|
||||
\qmlmethod StatusImageCropPanel::setCropRect(rect)
|
||||
\sa StatusImageCrop::cropRect
|
||||
*/
|
||||
function setCropRect(newRect) {
|
||||
cropEditor.setCropRect(newRect)
|
||||
aspectRatio = cropEditor.aspectRatio
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
function updateAspectRatio(newAR) {
|
||||
// Keep width and adjust height
|
||||
const eW = cropEditor.cropRect.width
|
||||
const w = (eW <= 0) ? cropEditor.sourceSize.width : eW
|
||||
const h = w/newAR
|
||||
const c = (eW <= 0)
|
||||
? Qt.point(cropEditor.sourceSize.width/2, cropEditor.sourceSize.height/2)
|
||||
: Qt.point(cropEditor.cropRect.x + w/2, cropEditor.cropRect.y + cropEditor.cropRect.height/2)
|
||||
const nR = Qt.rect(c.x - w/2, c.y-h/2, w, h)
|
||||
cropEditor.setCropRect(nR)
|
||||
}
|
||||
}
|
||||
|
||||
Component.onCompleted: d.updateAspectRatio(root.aspectRatio)
|
||||
onAspectRatioChanged: d.updateAspectRatio(root.aspectRatio)
|
||||
onSourceSizeChanged: d.updateAspectRatio(root.aspectRatio)
|
||||
|
||||
ColumnLayout {
|
||||
id: mainLayout
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
Item {
|
||||
id: cropSpaceItem
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
clip: true
|
||||
|
||||
Rectangle {
|
||||
id: leftOverlay
|
||||
anchors.left: parent.left
|
||||
anchors.top: parent.top
|
||||
anchors.right: cropEditor.left
|
||||
anchors.bottom: parent.bottom
|
||||
color: wallColor
|
||||
opacity: wallTransparency
|
||||
z: cropEditor.z + 1
|
||||
}
|
||||
Rectangle {
|
||||
id: topOverlay
|
||||
anchors.left: leftOverlay.right
|
||||
anchors.top: parent.top
|
||||
anchors.right: rightOverlay.left
|
||||
anchors.bottom: cropEditor.top
|
||||
color: wallColor
|
||||
opacity: wallTransparency
|
||||
z: cropEditor.z + 1
|
||||
}
|
||||
|
||||
StatusImageCrop {
|
||||
id: cropEditor
|
||||
anchors.centerIn: parent
|
||||
width: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height * aspectRatio : cropSpaceItem.width - root.margins * 2
|
||||
height: aspectRatio < cropSpaceItem.width/cropSpaceItem.height ? cropSpaceItem.height - root.margins * 2 : cropSpaceItem.width / aspectRatio
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: rightOverlay
|
||||
anchors.left: cropEditor.right
|
||||
anchors.top: parent.top
|
||||
anchors.right: parent.right
|
||||
anchors.bottom: parent.bottom
|
||||
color: wallColor
|
||||
opacity: wallTransparency
|
||||
z: cropEditor.z + 1
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bottomOverlay
|
||||
anchors.left: leftOverlay.right
|
||||
anchors.top: cropEditor.bottom
|
||||
anchors.right: rightOverlay.left
|
||||
anchors.bottom: parent.bottom
|
||||
color: wallColor
|
||||
opacity: wallTransparency
|
||||
z: cropEditor.z + 1
|
||||
}
|
||||
|
||||
// Checkers
|
||||
Canvas {
|
||||
visible: root.enableCheckers
|
||||
anchors.fill: parent
|
||||
onPaint: {
|
||||
var ctx = getContext("2d")
|
||||
for(let xI = 0; xI < Math.ceil(width/10); xI++) {
|
||||
for(let yI = 0; yI < Math.ceil(height/10); yI++) {
|
||||
ctx.fillStyle = (xI % 2) === (yI % 2) ? "#FFFFFE" : "#DBDBDB"
|
||||
ctx.fillRect(xI * 10, yI * 10, 10, 10)
|
||||
}
|
||||
}
|
||||
}
|
||||
z: cropEditor.z - 1
|
||||
}
|
||||
|
||||
// Drag and zoom
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
|
||||
enabled: root.interactive
|
||||
|
||||
property var lastDragPoint: null
|
||||
onReleased: lastDragPoint = null
|
||||
|
||||
onMouseXChanged: updateDrag(Qt.point(mouse.x, mouse.y))
|
||||
onMouseYChanged: updateDrag(Qt.point(mouse.x, mouse.y))
|
||||
|
||||
onWheel: {
|
||||
const delta = wheel.angleDelta.y / 120
|
||||
cropEditor.setCropRect(cropEditor.getZoomRect(cropEditor.zoomScale + delta * root.scrollZoomFactor))
|
||||
}
|
||||
|
||||
function moveRect(r /*rect*/, delta /*real*/) {
|
||||
return Qt.rect(r.x + delta.x, r.y + delta.y, r.width, r.height)
|
||||
}
|
||||
|
||||
function scaleSize(sz /*size*/, s /*size*/) {
|
||||
return Qt.point(sz.width * s, sz.height * s)
|
||||
}
|
||||
|
||||
function updateDrag(p) {
|
||||
let delta = (lastDragPoint ? Qt.size(lastDragPoint.x - p.x, lastDragPoint.y - p.y) : Qt.size(0, 0))
|
||||
delta = scaleSize(delta, 1/cropEditor.scrToImgScale)
|
||||
cropEditor.setCropRect(moveRect(cropEditor.cropRect, delta))
|
||||
lastDragPoint = p
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
visible: root.interactive
|
||||
|
||||
StatusIcon {
|
||||
icon: "remove-circle"
|
||||
|
||||
Layout.preferredWidth: 20
|
||||
Layout.preferredHeight: 20
|
||||
}
|
||||
StatusSlider {
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: 20
|
||||
Layout.bottomMargin: 25
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
|
||||
enabled: root.interactive
|
||||
|
||||
from: cropEditor.minZoomScale
|
||||
to: cropEditor.maxZoomScale
|
||||
value: cropEditor.zoomScale
|
||||
live: false
|
||||
onMoved: cropEditor.setCropRect(cropEditor.getZoomRect(valueAt(visualPosition)))
|
||||
}
|
||||
StatusIcon {
|
||||
icon: "add-circle"
|
||||
|
||||
Layout.preferredWidth: 20
|
||||
Layout.preferredHeight: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,17 +1,13 @@
|
||||
import QtQuick 2.13
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core.Utils 0.1
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
id: statusLetterIdenticon
|
||||
|
||||
property alias identiconText: identiconText
|
||||
property string name
|
||||
property string emoji
|
||||
property string emojiSize: Emoji.size.small
|
||||
property int letterSize: 21
|
||||
property int charactersLen: 1
|
||||
|
||||
color: Theme.palette.miscColor5
|
||||
width: 40
|
||||
@@ -20,40 +16,15 @@ Rectangle {
|
||||
|
||||
StatusBaseText {
|
||||
id: identiconText
|
||||
|
||||
anchors.alignWhenCentered: false
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
width: parent.width
|
||||
height: parent.height
|
||||
|
||||
text: ((statusLetterIdenticon.name.charAt(0) === "#")
|
||||
|| (statusLetterIdenticon.name.charAt(0) === "@") ?
|
||||
statusLetterIdenticon.name.charAt(1) : statusLetterIdenticon.name.charAt(0)).toUpperCase()
|
||||
font.weight: Font.Bold
|
||||
font.pixelSize: root.letterSize
|
||||
color: d.luminance(root.color) > 0.5 ? Qt.rgba(0, 0, 0, 0.5) : Qt.rgba(255, 255, 255, 0.7)
|
||||
|
||||
text: {
|
||||
if (emoji) {
|
||||
if(Utils.isHtml(emoji))
|
||||
return emoji
|
||||
else
|
||||
return Emoji.parse(root.emoji, emojiSize)
|
||||
}
|
||||
|
||||
const shift = (root.name.charAt(0) === "#") ||
|
||||
(root.name.charAt(0) === "@")
|
||||
|
||||
return root.name.substring(shift, shift + charactersLen).toUpperCase()
|
||||
}
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
function luminance(color) {
|
||||
let r = Math.pow(color.r, 2.2) * 0.2126
|
||||
let g = Math.pow(color.g, 2.2) * 0.7151
|
||||
let b = Math.pow(color.b, 2.2) * 0.0721
|
||||
return r + g + b
|
||||
}
|
||||
font.pixelSize: statusLetterIdenticon.letterSize
|
||||
color: Qt.rgba(255, 255, 255, 0.7)
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -9,32 +9,49 @@ import StatusQ.Controls 0.1
|
||||
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
|
||||
}
|
||||
|
||||
radius: 8
|
||||
|
||||
property string itemId: ""
|
||||
property string titleId: ""
|
||||
|
||||
property string title: ""
|
||||
property string titleAsideText: ""
|
||||
property string subTitle: ""
|
||||
property string tertiaryTitle: ""
|
||||
property string label: ""
|
||||
property alias badge: statusListItemBadge
|
||||
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property bool enabled: true
|
||||
property bool highlighted: false
|
||||
property bool propagateTitleClicks: true
|
||||
property int type: StatusListItem.Type.Primary
|
||||
property list<Item> components
|
||||
property var bottomModel: []
|
||||
property Component bottomDelegate
|
||||
property var tagsModel: []
|
||||
property Component tagsDelegate
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
height: isLetterIdenticon ? 40 : 20
|
||||
width: isLetterIdenticon ? 40 : 20
|
||||
rotation: 0
|
||||
isLetterIdenticon: false
|
||||
letterSize: 21
|
||||
charactersLen: 1
|
||||
color: isLetterIdenticon ? background.color : type === StatusListItem.Type.Danger ?
|
||||
Theme.palette.dangerColor1 : Theme.palette.primaryColor1
|
||||
background: StatusIconBackgroundSettings {
|
||||
@@ -56,56 +73,23 @@ Rectangle {
|
||||
height: 40
|
||||
isIdenticon: false
|
||||
}
|
||||
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
|
||||
initalAngleRad: 0
|
||||
ringPxSize: 1.5
|
||||
distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
property string label: ""
|
||||
|
||||
property int type: StatusListItem.Type.Primary
|
||||
|
||||
property alias sensor: sensor
|
||||
property alias badge: statusListItemBadge
|
||||
|
||||
property alias statusListItemIcon: iconOrImage
|
||||
property alias statusListItemTitle: statusListItemTitle
|
||||
property alias statusListItemTitleAside: statusListItemTitleAsideText
|
||||
property alias statusListItemTitleIcons: titleIconsRow
|
||||
property alias statusListItemTitleArea: statusListItemTitleArea
|
||||
property alias statusListItemSubTitle: statusListItemSubTitle
|
||||
property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
|
||||
property alias statusListItemComponentsSlot: statusListItemComponentsSlot
|
||||
property alias statusListItemTagsSlot: statusListItemTagsSlot
|
||||
property alias statusListItemInlineTagsSlot: statusListItemTagsSlotInline
|
||||
|
||||
property list<Item> components
|
||||
|
||||
signal clicked(string itemId)
|
||||
signal titleClicked(string titleId)
|
||||
|
||||
enum Type {
|
||||
Primary,
|
||||
Secondary,
|
||||
Danger
|
||||
}
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: {
|
||||
if (bottomModel.length === 0) {
|
||||
return Math.max(64, statusListItemTitleArea.height + 16)
|
||||
}
|
||||
return Math.max(64, statusListItemTitleArea.height + 90)
|
||||
}
|
||||
color: {
|
||||
if (sensor.containsMouse || statusListItem.highlighted) {
|
||||
switch(type) {
|
||||
case StatusListItem.Type.Primary:
|
||||
return Theme.palette.baseColor2
|
||||
case StatusListItem.Type.Secondary:
|
||||
return Theme.palette.statusListItem.secondaryHoverBackgroundColor
|
||||
case StatusListItem.Type.Danger:
|
||||
return Theme.palette.dangerColor3
|
||||
}
|
||||
}
|
||||
return Theme.palette.statusListItem.backgroundColor
|
||||
}
|
||||
radius: 8
|
||||
|
||||
onComponentsChanged: {
|
||||
if (components.length) {
|
||||
for (let idx in components) {
|
||||
@@ -122,7 +106,6 @@ Rectangle {
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
preventStealing: true
|
||||
|
||||
onClicked: {
|
||||
statusListItem.clicked(statusListItem.itemId)
|
||||
@@ -139,29 +122,17 @@ Rectangle {
|
||||
name: statusListItem.title
|
||||
active: statusListItem.icon.isLetterIdenticon ||
|
||||
!!statusListItem.icon.name ||
|
||||
!!statusListItem.image.source.toString() ||
|
||||
!!statusListItem.icon.emoji
|
||||
badge.border.color: statusListItem.color
|
||||
ringSettings: statusListItem.ringSettings
|
||||
!!statusListItem.image.source.toString()
|
||||
}
|
||||
|
||||
Item {
|
||||
id: statusListItemTitleArea
|
||||
|
||||
function getStatusListItemTitleAnchorsRight() {
|
||||
let isIconsRowVisible = false
|
||||
if(titleIconsRow.item) {
|
||||
isIconsRowVisible = true//titleIconsRow.item.visible
|
||||
}
|
||||
return !statusListItem.titleAsideText && !isIconsRowVisible ? statusListItemTitleArea.right : undefined
|
||||
}
|
||||
|
||||
anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
|
||||
anchors.right: statusListItemLabel.visible ? statusListItemLabel.left : statusListItemComponentsSlot.left
|
||||
anchors.leftMargin: iconOrImage.active ? 16 : statusListItem.leftPadding
|
||||
anchors.right: statusListItemLabel.visible ?
|
||||
statusListItemLabel.left : statusListItemComponentsSlot.left
|
||||
anchors.leftMargin: statusListItem.leftPadding
|
||||
anchors.rightMargin: statusListItem.rightPadding
|
||||
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
|
||||
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
height: childrenRect.height
|
||||
|
||||
StatusBaseText {
|
||||
@@ -169,39 +140,26 @@ Rectangle {
|
||||
text: statusListItem.title
|
||||
font.pixelSize: 15
|
||||
height: visible ? contentHeight : 0
|
||||
elide: Text.ElideRight
|
||||
anchors.left: parent.left
|
||||
anchors.top: bottomModel.length === 0 ? undefined: parent.top
|
||||
anchors.topMargin: bottomModel.length === 0 ? undefined : 20
|
||||
width: Math.min(implicitWidth, parent.width)
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
StatusToolTip {
|
||||
id: statusListItemTitleTooltip
|
||||
text: statusListItemTitle.text
|
||||
delay: 0
|
||||
visible: statusListItemTitle.truncated && statusListItemTitleMouseArea.containsMouse
|
||||
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 {
|
||||
id: statusListItemTitleMouseArea
|
||||
anchors.fill: parent
|
||||
enabled: statusListItem.enabled
|
||||
cursorShape: sensor.enabled && containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
cursorShape: containsMouse? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: statusListItem.propagateTitleClicks
|
||||
propagateComposedEvents: true
|
||||
onClicked: {
|
||||
statusListItem.titleClicked(statusListItem.titleId)
|
||||
mouse.accepted = false
|
||||
@@ -214,21 +172,12 @@ Rectangle {
|
||||
anchors.left: statusListItemTitle.right
|
||||
anchors.leftMargin: 4
|
||||
anchors.verticalCenter: statusListItemTitle.verticalCenter
|
||||
anchors.top: bottomModel.length === 0 ? undefined: parent.top
|
||||
anchors.topMargin: bottomModel.length === 0 ? undefined : 20
|
||||
text: statusListItem.titleAsideText
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.baseColor1
|
||||
visible: !!statusListItem.titleAsideText
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: titleIconsRow
|
||||
anchors.left: !statusListItem.titleAsideText ? statusListItemTitle.right : statusListItemTitleAsideText.right
|
||||
anchors.verticalCenter: statusListItemTitle.verticalCenter
|
||||
anchors.leftMargin: 4
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemSubTitle
|
||||
anchors.top: statusListItemTitle.bottom
|
||||
@@ -259,42 +208,11 @@ Rectangle {
|
||||
width: contentItem.width
|
||||
implicitHeight: visible ? 22 : 0
|
||||
}
|
||||
|
||||
Row {
|
||||
id: statusListItemTagsSlotInline
|
||||
anchors.top: statusListItemTertiaryTitle.bottom
|
||||
width: parent.width
|
||||
spacing: 10
|
||||
clip: true
|
||||
|
||||
Repeater {
|
||||
model: tagsModel
|
||||
delegate: tagsDelegate
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: statusListItemTagsSlot
|
||||
anchors.topMargin: 16
|
||||
anchors.top: iconOrImage.bottom
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
width: statusListItemBadge.width
|
||||
spacing: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
|
||||
Repeater {
|
||||
model: bottomModel
|
||||
delegate: bottomDelegate
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: statusListItemLabel
|
||||
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
|
||||
anchors.top: bottomModel.length === 0 ? undefined: parent.top
|
||||
anchors.topMargin: bottomModel.length === 0 ? undefined : 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.right: statusListItemComponentsSlot.left
|
||||
anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0
|
||||
|
||||
@@ -304,13 +222,12 @@ Rectangle {
|
||||
visible: !!statusListItem.label
|
||||
}
|
||||
|
||||
|
||||
Row {
|
||||
id: statusListItemComponentsSlot
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: statusListItem.rightPadding
|
||||
anchors.verticalCenter: bottomModel.length === 0 ? parent.verticalCenter : undefined
|
||||
anchors.top: bottomModel.length === 0 ? undefined: parent.top
|
||||
anchors.topMargin: bottomModel.length === 0 ? undefined : 12
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
spacing: 10
|
||||
}
|
||||
}
|
||||
|
||||
@@ -57,8 +57,6 @@ Control {
|
||||
visible: root.icon.isLetterIdenticon
|
||||
color: root.icon.color
|
||||
name: root.primaryText
|
||||
emoji: root.icon.emoji
|
||||
emojiSize: root.icon.emojiSize
|
||||
}
|
||||
StatusBaseText {
|
||||
font.weight: Font.Medium
|
||||
|
||||
@@ -1,81 +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
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
width: layout.width
|
||||
height: 30
|
||||
color: Theme.palette.primaryColor3
|
||||
radius: 15
|
||||
|
||||
property alias titleText: titleText
|
||||
|
||||
property string title: ""
|
||||
property bool closeButtonVisible: true
|
||||
signal clicked()
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 20
|
||||
height: 20
|
||||
isIdenticon: false
|
||||
}
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
height: 20
|
||||
width: 20
|
||||
rotation: 0
|
||||
isLetterIdenticon: false
|
||||
letterSize: 10
|
||||
color: Theme.palette.primaryColor1
|
||||
background: StatusIconBackgroundSettings {
|
||||
width: 15
|
||||
height: 15
|
||||
color: Theme.palette.primaryColor3
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: layout
|
||||
|
||||
height: parent.height
|
||||
spacing: 5
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: iconOrImage
|
||||
Layout.leftMargin: 5
|
||||
image: root.image
|
||||
icon: root.icon
|
||||
name: root.title
|
||||
active: root.icon.isLetterIdenticon ||
|
||||
!!root.icon.name ||
|
||||
!!root.image.source.toString()
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: titleText
|
||||
color: Theme.palette.primaryColor1
|
||||
text: root.title
|
||||
Layout.rightMargin: closeButtonVisible ? 0 : 5
|
||||
}
|
||||
|
||||
StatusIcon {
|
||||
id: closeIcon
|
||||
color: Theme.palette.primaryColor1
|
||||
icon: "close-circle"
|
||||
visible: closeButtonVisible
|
||||
Layout.rightMargin: 5
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
root.clicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,392 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.13
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusListPicker
|
||||
\inherits Item
|
||||
\inqmlmodule StatusQ.Components
|
||||
\since StatusQ.Components 0.1
|
||||
\brief It is a combination of StatusPickerButton and a drop-down list component that provides a way of presenting a list of selectable options to the user. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-item.html}{Item}.
|
||||
|
||||
The \c StatusListPicker is populated with a data model. The data model is commonly a JavaScript array or a ListModel object.
|
||||
|
||||
StatusListPicker can be made as a single or multiple options picker by setting its StatusListPicker::multiSelection property properly or will be auto-set if the model contains / provides more than one selected items.
|
||||
The StatusPickerButton text holds the text of the current item selected in the list picker. If there is more than one item selected, a string composed will be displayed.
|
||||
The drop-down list incorporates a searcher by the following model roles: `name` or / and `shortName`.
|
||||
|
||||
NOTE: Make sure to set the appropriate z-index when instantiating the component in order to place it on top of your view in order to display the drop-down data properly.
|
||||
Make sure to position the component inside its parent also when it is spanned in order to achieve a better user experience.
|
||||
|
||||
Example of how the component looks like:
|
||||
\image status_list_picker.png
|
||||
Example of how to use it:
|
||||
\qml
|
||||
StatusListPicker {
|
||||
id: currencyPicker
|
||||
inputList: Models.currencyPickerModel
|
||||
searchText: qsTr("Search Language")
|
||||
multiSelection: true
|
||||
printSymbol: true
|
||||
}
|
||||
\endqml
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::inputList
|
||||
This property holds the data that will be populated in the list picker.
|
||||
|
||||
NOTE: This model property should not change so it is an in / out property where the selected role will be dynamically changed according to user actions.
|
||||
|
||||
Here an example of the model roles expected:
|
||||
\qml
|
||||
inputList: ListModel {
|
||||
ListElement {
|
||||
key: 0
|
||||
name: "United States Dollar"
|
||||
shortName: "USD"
|
||||
symbol: "$"
|
||||
imageSource: "../../assets/twemoji/26x26/1f4b4.png"
|
||||
category: "fiat"
|
||||
selected: true
|
||||
}
|
||||
ListElement {
|
||||
key: 1
|
||||
name: "British Pound"
|
||||
shortName: "GBP"
|
||||
symbol: "£"
|
||||
imageSource: "../../assets/twemoji/26x26/1f4b5.png"
|
||||
category: "fiat"
|
||||
selected: false
|
||||
}
|
||||
}
|
||||
\endqml
|
||||
*/
|
||||
property ListModel inputList: ListModel { }
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::searchText
|
||||
This property holds the search text the searcher input displays by default.
|
||||
*/
|
||||
property string searchText: ""
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::placeholderSearchText
|
||||
This property holds the placeholder text the searcher input displays by default.
|
||||
*/
|
||||
property string placeholderSearchText: qsTr("Search")
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::multiSelection
|
||||
This property holds whether the list picker is a single or a multiple picker option by displaying a StatusRadioButton or StatusCheckBox instead.
|
||||
*/
|
||||
property bool multiSelection: false
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::printSymbol
|
||||
This property holds whether the selected items will display a composition of the role `symbol` in the StatusPickerButton text or just only the role `shortName`.
|
||||
*/
|
||||
property bool printSymbol: false
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::maxPickerHeight
|
||||
This property holds the maximum drop-down list height allowed. The drop-down list height will be set as the minimum value between the list content height and the maxPickerHeight property.
|
||||
*/
|
||||
property int maxPickerHeight: 718
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::enableSelectableItem
|
||||
This property holds if the item in the list will be highlighted when hovering and clickable in its complete area or just not highlighted and able to be selected by clicking only the checbox or radiobutton area.
|
||||
*/
|
||||
property bool enableSelectableItem: true
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusListPicker::menuAlignment
|
||||
This property holds the allignment of the menu in terms of the button
|
||||
*/
|
||||
property int menuAlignment: StatusListPicker.MenuAlignment.Right
|
||||
|
||||
/*!
|
||||
\qmlproperty enum StatusListPicker::MenuAlignment
|
||||
This property holds the allignment of the menu in terms of the button
|
||||
values can be Left, Right or Center
|
||||
*/
|
||||
enum MenuAlignment {
|
||||
Left,
|
||||
Right,
|
||||
Center
|
||||
}
|
||||
|
||||
/*
|
||||
\qmlmethod StatusListPicker::close()
|
||||
It can be used to force to close the drop-down picker list whenever the consumer needs it. For example by adding an outside MouseArea to close the picker when user clicks outsite the component:
|
||||
\qml
|
||||
// Outsite area
|
||||
MouseArea {
|
||||
height: root.height
|
||||
width: root.width
|
||||
onClicked: { currencyPicker.close() }
|
||||
}
|
||||
\endqml
|
||||
*/
|
||||
function close() {
|
||||
picker.visible = false
|
||||
|
||||
// Reset searcher:
|
||||
root.searchText = ""
|
||||
}
|
||||
|
||||
/*!
|
||||
\qmlsignal StatusListPicker::itemPickerChanged(string key, bool selected)
|
||||
This signal is emitted when an item changes its selected value.
|
||||
*/
|
||||
signal itemPickerChanged(string key, bool selected)
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
property var filteredModel: ListModel { }
|
||||
|
||||
// Used to set up component and the needed private properties
|
||||
function initialize() {
|
||||
if(filteredModel.count === 0) {
|
||||
// It is necessary to load the model, not loaded yet!
|
||||
var selected = 0
|
||||
var selectionText = ""
|
||||
for(var i = 0; i < root.inputList.count; i++) {
|
||||
var item = root.inputList.get(i)
|
||||
d.filteredModel.append(item)
|
||||
if(item.selected) selected++;
|
||||
}
|
||||
|
||||
// If the given model has more than one selected elements, the behaviour of the list picker will be as a multiple selector with checkboxes although it is
|
||||
// set in the radiobutton mode. Radiobutton mode is only for mutial-exclusion.
|
||||
if(selected > 1)
|
||||
multiSelection = true
|
||||
|
||||
// Update selected items text:
|
||||
d.getSelectedItemsText()
|
||||
}
|
||||
}
|
||||
|
||||
// Used to update model elements given a specific text by filtering them for its `name` and / or `shortName`.
|
||||
function applyFilter(text) {
|
||||
const input = text.toLowerCase()
|
||||
filteredModel.clear()
|
||||
for(var i = 0; i < root.inputList.count; i++) {
|
||||
let item = root.inputList.get(i)
|
||||
if(item.name.toLowerCase().includes(input) || item.shortName.toLowerCase().includes(input))
|
||||
filteredModel.append(item)
|
||||
}
|
||||
}
|
||||
|
||||
function formatSymbolShortNameText(symbol, shortName) {
|
||||
var formattedText = ""
|
||||
if(root.printSymbol && symbol)
|
||||
formattedText = symbol + shortName
|
||||
else
|
||||
formattedText = shortName
|
||||
return formattedText
|
||||
}
|
||||
|
||||
function getSelectedItemsText() {
|
||||
var res = ""
|
||||
for(var i = 0; i < root.inputList.count; i++) {
|
||||
var item = root.inputList.get(i)
|
||||
if(item.selected) {
|
||||
if(res != "")
|
||||
res += ", "
|
||||
res += d.formatSymbolShortNameText(item.symbol, item.shortName)
|
||||
}
|
||||
}
|
||||
return res
|
||||
}
|
||||
|
||||
// Used to update the base input list model with the new selected property
|
||||
function updateInputListModel(key, selected, isSingleSelection) {
|
||||
// If it is a single selection we must ensure that when a new key is selected others are cleared.
|
||||
// It must be done manually because as there is the option of filterning, the model visualized changes
|
||||
// and it could be possible to have a filtered list without an element selected (but in the base model
|
||||
// it is) so, the binding to not selected will not be executed, as in the current filtered model
|
||||
// there are no changes to update, just only the selected one.
|
||||
for(var i = 0; i < root.inputList.count; i++) {
|
||||
if(root.inputList.get(i).key === key) {
|
||||
root.inputList.get(i).selected = selected
|
||||
}
|
||||
else if(isSingleSelection && selected) {
|
||||
// Clear all the list
|
||||
root.inputList.get(i).selected = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
width: 110
|
||||
height: 38
|
||||
|
||||
Component.onCompleted: d.initialize()
|
||||
|
||||
StatusPickerButton {
|
||||
id: btn
|
||||
anchors.fill: parent
|
||||
bgColor: Theme.palette.primaryColor3
|
||||
contentColor: Theme.palette.primaryColor1
|
||||
text: picker.selectedItemsText
|
||||
textPixelSize: 13
|
||||
type: StatusPickerButton.Type.Down
|
||||
|
||||
onClicked: {
|
||||
picker.visible = !picker.visible
|
||||
|
||||
// Restart list position:
|
||||
content.positionViewAtBeginning()
|
||||
content.forceActiveFocus()
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: picker
|
||||
|
||||
property string selectedItemsText: ""
|
||||
|
||||
width: content.itemWidth
|
||||
height: Math.min(content.contentHeight + content.anchors.topMargin + content.anchors.bottomMargin, root.maxPickerHeight)
|
||||
anchors.left: root.menuAlignment === StatusListPicker.MenuAlignment.Left ? btn.left : undefined
|
||||
anchors.right: root.menuAlignment === StatusListPicker.MenuAlignment.Right ? btn.right : undefined
|
||||
anchors.horizontalCenter: root.menuAlignment === StatusListPicker.MenuAlignment.Center ? btn.horizontalCenter : undefined
|
||||
anchors.top: btn.bottom
|
||||
anchors.topMargin: 4
|
||||
visible: false
|
||||
color: Theme.palette.statusPopupMenu.backgroundColor
|
||||
radius: 8
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
source: picker
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 4
|
||||
radius: 12
|
||||
samples: 25
|
||||
spread: 0.2
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
|
||||
ListView {
|
||||
id: content
|
||||
|
||||
property int itemHeight: 40
|
||||
property int itemWidth: 360
|
||||
|
||||
model: d.filteredModel
|
||||
width: itemWidth
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 8
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 8
|
||||
currentIndex: -1
|
||||
clip: true
|
||||
headerPositioning: ListView.OverlayHeader
|
||||
header: Rectangle {
|
||||
id: header
|
||||
width: content.itemWidth
|
||||
height: searchInput.height + 24
|
||||
color: Theme.palette.statusPopupMenu.backgroundColor
|
||||
z: 3 // Above delegate (z=1) and above section.delegate (z = 2)
|
||||
|
||||
StatusBaseInput {
|
||||
id: searchInput
|
||||
implicitHeight: 36
|
||||
width: content.itemWidth - 2 * 18
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
topPadding: 0
|
||||
bottomPadding: 0
|
||||
placeholderText: root.placeholderSearchText
|
||||
text: root.searchText
|
||||
icon.name: "search"
|
||||
|
||||
onTextChanged: {
|
||||
d.applyFilter(text)
|
||||
root.searchText = text
|
||||
}
|
||||
}
|
||||
}// End of search input item
|
||||
delegate: StatusItemPicker {
|
||||
width: content.itemWidth
|
||||
height: content.itemHeight
|
||||
color: mouseArea.containsMouse ? Theme.palette.baseColor4 : "transparent"
|
||||
image: StatusImageSettings {
|
||||
source: model.imageSource ? model.imageSource : ""
|
||||
width: 15
|
||||
height: 15
|
||||
isIdenticon: false
|
||||
}
|
||||
name: model.name
|
||||
shortName: model.shortName
|
||||
selectorType: root.multiSelection ? StatusItemPicker.SelectorType.CheckBox : StatusItemPicker.SelectorType.RadioButton
|
||||
selected: model.selected
|
||||
radioGroup: radioBtnGroup
|
||||
|
||||
onCheckedChanged: {
|
||||
d.updateInputListModel(model.key, checked, selectorType === StatusItemPicker.SelectorType.RadioButton)
|
||||
if(selectorType === StatusItemPicker.SelectorType.RadioButton && checked) {
|
||||
// Update selected item text
|
||||
picker.selectedItemsText = d.formatSymbolShortNameText(model.symbol, model.shortName)
|
||||
}
|
||||
else {
|
||||
// Update selected items text (multiple selection, text chain).
|
||||
picker.selectedItemsText = d.getSelectedItemsText()
|
||||
}
|
||||
|
||||
// Used to notify selected property changes in the specific item picker.
|
||||
itemPickerChanged(model.key, checked)
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
enabled: root.enableSelectableItem
|
||||
anchors.fill: parent
|
||||
cursorShape: root.enableSelectableItem ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
if(selectorType === StatusItemPicker.SelectorType.RadioButton) {
|
||||
// Just only allow to select, not unselect in case of single selection (radiobutton)
|
||||
if(!selected) selected = !selected
|
||||
}
|
||||
else
|
||||
// In case of multiple selections you can both select and unselect.
|
||||
selected = !selected
|
||||
}
|
||||
}
|
||||
}
|
||||
section.property: "category"
|
||||
section.criteria: ViewSection.FullString
|
||||
section.delegate: Item {
|
||||
width: content.itemWidth
|
||||
height: content.itemHeight
|
||||
|
||||
StatusBaseText {
|
||||
anchors.leftMargin: 18
|
||||
anchors.left: parent.left
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
text: section
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 15
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
}// End of Category item
|
||||
|
||||
onActiveFocusChanged: { if(!activeFocus) root.close() }
|
||||
|
||||
// Not visual element to control mutual-exclusion of radiobuttons that are not sharing the same parent (inside list view)
|
||||
ButtonGroup {
|
||||
id: radioBtnGroup
|
||||
}
|
||||
}// End of Content
|
||||
}// End of Rectangle picker
|
||||
}
|
||||
@@ -1,127 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusMemberListItem
|
||||
\inherits StatusListItem
|
||||
\inqmlmodule StatusQ.Components
|
||||
\since StatusQ.Components 0.1
|
||||
\brief It is a list item with a specific format to display members of a community or chat. Inherits from \c StatusListItem.
|
||||
|
||||
The \c StatusMemberListItem is a clickable / hovering list item with a specific format to display members of a community or chat.
|
||||
|
||||
It displays the member avatar, trust and mutual contact indicators, nick name, user name, chat key and information about the member connectivity.
|
||||
|
||||
Example of how the control looks like:
|
||||
\image status_member_list_item.png
|
||||
|
||||
Example of how to use it:
|
||||
|
||||
\qml
|
||||
StatusMemberListItem {
|
||||
nickName: "carmen.eth"
|
||||
isOnline: false
|
||||
trustIndicator: StatusContactVerificationIcons.TrustedType.Untrustworthy
|
||||
}
|
||||
|
||||
StatusMemberListItem {
|
||||
nickName: "This girl I know from work"
|
||||
userName: "annabelle"
|
||||
isOnline: true
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
StatusListItem {
|
||||
id: root
|
||||
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::nickName
|
||||
This property holds the nick name of the member represented.
|
||||
*/
|
||||
property string nickName: ""
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::userName
|
||||
This property holds the user name of the member represented.
|
||||
*/
|
||||
property string userName: ""
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::chatKey
|
||||
This property holds the chat key of the member represented.
|
||||
*/
|
||||
property string chatKey: ""
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::isMutualContact
|
||||
This property holds if the member represented is a mutual contact.
|
||||
*/
|
||||
property bool isMutualContact: false
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::trustIndicator
|
||||
This property holds the trust indicator of the member represented. Possible values are:
|
||||
\list
|
||||
\li StatusContactVerificationIcons.TrustedType.None
|
||||
\li StatusContactVerificationIcons.TrustedType.Verified
|
||||
\li StatusContactVerificationIcons.TrustedType.Untrustworthy
|
||||
\endlist
|
||||
*/
|
||||
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
/*!
|
||||
\qmlproperty string StatusMemberListItem::isOnline
|
||||
This property holds the connectivity status of the member represented.
|
||||
*/
|
||||
property bool isOnline: false
|
||||
|
||||
QtObject {
|
||||
id: d
|
||||
|
||||
// Subtitle composition:
|
||||
function composeSubtitile() {
|
||||
var compose = ""
|
||||
if(root.userName !== "")
|
||||
compose = "(" + root.userName + ")"
|
||||
|
||||
if(compose !== "" && root.chatKey !== "")
|
||||
// Composition
|
||||
compose += " • " + composeShortKeyChat(root.chatKey)
|
||||
|
||||
else if(root.chatKey !== "")
|
||||
compose = composeShortKeyChat(root.chatKey)
|
||||
|
||||
return compose
|
||||
}
|
||||
|
||||
// Short keychat composition:
|
||||
function composeShortKeyChat(chatKey) {
|
||||
return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
|
||||
}
|
||||
}
|
||||
|
||||
// root object settings:
|
||||
title: root.nickName
|
||||
statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
|
||||
isMutualContact: root.isMutualContact
|
||||
trustIndicator: root.trustIndicator
|
||||
}
|
||||
subTitle: d.composeSubtitile()
|
||||
statusListItemSubTitle.font.pixelSize: 10
|
||||
icon.isLetterIdenticon: !root.image.source.toString()
|
||||
statusListItemIcon.badge.visible: true
|
||||
statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
||||
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
|
||||
|
||||
// Default sizes / positions by design
|
||||
implicitWidth: 256
|
||||
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
|
||||
leftPadding: 8
|
||||
image.width: 32
|
||||
image.height: 32
|
||||
icon.width: 32
|
||||
icon.height: 32
|
||||
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
|
||||
statusListItemIcon.anchors.top: undefined
|
||||
statusListItemIcon.badge.border.width: 2
|
||||
statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
|
||||
statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
import "./private/statusMessage"
|
||||
|
||||
Rectangle {
|
||||
id: statusMessage
|
||||
|
||||
enum ContentType {
|
||||
Unknown = 0,
|
||||
Text = 1,
|
||||
Emoji = 2,
|
||||
Image = 3,
|
||||
Sticker = 4,
|
||||
Audio = 5,
|
||||
Transaction = 6,
|
||||
Invitation = 7
|
||||
}
|
||||
|
||||
property alias messageHeader: messageHeader
|
||||
property alias quickActions:quickActionsPanel.quickActions
|
||||
property alias statusChatInput: editComponent.inputComponent
|
||||
property alias linksComponent: linksLoader.sourceComponent
|
||||
property alias footerComponent: footer.sourceComponent
|
||||
property alias timestamp: messageHeader.timestamp
|
||||
|
||||
property string resendText: ""
|
||||
property string cancelButtonText: ""
|
||||
property string saveButtonText: ""
|
||||
property string loadingImageText: ""
|
||||
property string errorLoadingImageText: ""
|
||||
property string audioMessageInfoText: ""
|
||||
property string pinnedMsgInfoText: ""
|
||||
|
||||
property bool isAppWindowActive: false
|
||||
property bool editMode: false
|
||||
property bool isAReply: false
|
||||
property StatusMessageDetails messageDetails: StatusMessageDetails {}
|
||||
property StatusMessageDetails replyDetails: StatusMessageDetails {}
|
||||
|
||||
signal profilePictureClicked()
|
||||
signal senderNameClicked()
|
||||
signal editCompleted(var newMsgText)
|
||||
signal replyProfileClicked()
|
||||
signal stickerLoaded()
|
||||
signal imageClicked(var imageSource)
|
||||
signal resendClicked()
|
||||
|
||||
height: childrenRect.height
|
||||
color: hoverHandler.hovered ? (messageDetails.hasMention ? Theme.palette.mentionColor3 : messageDetails.isPinned ? Theme.palette.pinColor2 : Theme.palette.baseColor2) : messageDetails.hasMention ? Theme.palette.mentionColor4 : messageDetails.isPinned ? Theme.palette.pinColor3 : "transparent"
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHandler
|
||||
}
|
||||
|
||||
ColumnLayout {
|
||||
id: messageLayout
|
||||
width: parent.width
|
||||
StatusMessageReply {
|
||||
Layout.fillWidth: true
|
||||
visible: isAReply
|
||||
replyDetails: statusMessage.replyDetails
|
||||
onReplyProfileClicked: statusMessage.replyProfileClicked()
|
||||
audioMessageInfoText: statusMessage.audioMessageInfoText
|
||||
}
|
||||
RowLayout {
|
||||
spacing: 8
|
||||
Layout.fillWidth: true
|
||||
StatusSmartIdenticon {
|
||||
id: profileImage
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.topMargin: 10
|
||||
Layout.leftMargin: 16
|
||||
image: messageDetails.profileImage
|
||||
name: messageHeader.displayName
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
onClicked: statusMessage.profilePictureClicked()
|
||||
}
|
||||
}
|
||||
Column {
|
||||
spacing: 4
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.topMargin: 10
|
||||
Layout.fillWidth: true
|
||||
StatusPinMessageDetails {
|
||||
visible: messageDetails.isPinned && !editMode
|
||||
pinnedMsgInfoText: statusMessage.pinnedMsgInfoText
|
||||
pinnedBy: messageDetails.pinnedBy
|
||||
}
|
||||
StatusMessageHeader {
|
||||
id: messageHeader
|
||||
width: parent.width
|
||||
displayName: messageDetails.displayName
|
||||
secondaryName: messageDetails.secondaryName
|
||||
tertiaryDetail: messageDetails.chatID
|
||||
isMutualContact: messageDetails.isMutualContact
|
||||
trustIndicator: messageDetails.trustIndicator
|
||||
resendText: statusMessage.resendText
|
||||
showResendButton: messageDetails.hasExpired && messageDetails.amISender
|
||||
onClicked: statusMessage.senderNameClicked()
|
||||
onResendClicked: statusMessage.resendClicked()
|
||||
visible: !editMode
|
||||
}
|
||||
Loader {
|
||||
active: !editMode && !!messageDetails.messageText
|
||||
width: parent.width
|
||||
visible: active
|
||||
sourceComponent: StatusTextMessage {
|
||||
width: parent.width
|
||||
textField.text: messageDetails.messageText
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
active: messageDetails.contentType === StatusMessage.ContentType.Image && !editMode
|
||||
visible: active
|
||||
sourceComponent: StatusImageMessage {
|
||||
source: messageDetails.contentType === StatusMessage.ContentType.Image ? messageDetails.messageContent : ""
|
||||
onClicked: statusMessage.imageClicked()
|
||||
shapeType: messageDetails.amISender ? StatusImageMessage.ShapeType.RIGHT_ROUNDED : StatusImageMessage.ShapeType.LEFT_ROUNDED
|
||||
}
|
||||
}
|
||||
StatusSticker {
|
||||
visible: messageDetails.contentType === StatusMessage.ContentType.Sticker && !editMode
|
||||
image.source: messageDetails.messageContent
|
||||
onLoaded: statusMessage.stickerLoaded()
|
||||
}
|
||||
Loader {
|
||||
active: messageDetails.contentType === StatusMessage.ContentType.Audio && !editMode
|
||||
visible: active
|
||||
sourceComponent: StatusAudioMessage {
|
||||
audioSource: messageDetails.messageContent
|
||||
hovered: hoverHandler.hovered
|
||||
audioMessageInfoText: statusMessage.audioMessageInfoText
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
id: linksLoader
|
||||
active: !!linksLoader.sourceComponent
|
||||
visible: active
|
||||
}
|
||||
Loader {
|
||||
id: transactionBubbleLoader
|
||||
active: messageDetails.contentType === StatusMessage.ContentType.Transaction && !editMode
|
||||
visible: active
|
||||
}
|
||||
Loader {
|
||||
id: invitationBubbleLoader
|
||||
active: messageDetails.contentType === StatusMessage.ContentType.Invitation && !editMode
|
||||
visible: active
|
||||
}
|
||||
StatusEditMessage {
|
||||
id: editComponent
|
||||
width: parent.width
|
||||
msgText: messageDetails.messageText
|
||||
visible: editMode
|
||||
saveButtonText: statusMessage.saveButtonText
|
||||
cancelButtonText: statusMessage.cancelButtonText
|
||||
onCancelEditClicked: editMode = false
|
||||
onEditCompleted: {
|
||||
editMode = false
|
||||
statusMessage.editCompleted(newMsgText)
|
||||
}
|
||||
}
|
||||
StatusBaseText {
|
||||
id: retryLbl
|
||||
color: Theme.palette.dangerColor1
|
||||
text: statusMessage.resendText
|
||||
font.pixelSize: 12
|
||||
visible: messageDetails.hasExpired && messageDetails.amISender && !messageDetails.timestamp && !editMode
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: statusMessage.resendClicked()
|
||||
}
|
||||
}
|
||||
Loader {
|
||||
id: footer
|
||||
active: sourceComponent && !editMode
|
||||
visible: active
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusMessageQuickActions {
|
||||
id: quickActionsPanel
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 20
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: -8
|
||||
visible: hoverHandler.hovered && !editMode
|
||||
}
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
QtObject {
|
||||
id: msgDetails
|
||||
|
||||
property bool amISender: false
|
||||
property string displayName: ""
|
||||
property string secondaryName: ""
|
||||
property string chatID: ""
|
||||
property StatusImageSettings profileImage: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
}
|
||||
property bool isEdited: false
|
||||
property string messageText: ""
|
||||
property int contentType: 0
|
||||
property string messageContent: ""
|
||||
property bool isMutualContact: false
|
||||
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
property bool hasMention: false
|
||||
property bool isPinned: false
|
||||
property string pinnedBy: ""
|
||||
property bool hasExpired: false
|
||||
property string timestamp: ""
|
||||
}
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@ StatusListItem {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
hoverEnabled: true
|
||||
onClicked: statusNavigationListItem.clicked(itemId, mouse)
|
||||
onClicked: statusNavigationListItem.clicked(mouse)
|
||||
}
|
||||
|
||||
components: [
|
||||
|
||||
@@ -1,16 +1,11 @@
|
||||
import QtQuick 2.13
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Loader {
|
||||
id: statusSmartIdenticon
|
||||
|
||||
property string name: ""
|
||||
property int dZ: 100
|
||||
|
||||
// Badge color properties must be set if badgeItem.visible = true
|
||||
property alias badge: statusBadge
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 40
|
||||
@@ -22,12 +17,6 @@ Loader {
|
||||
height: 40
|
||||
}
|
||||
|
||||
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
|
||||
initalAngleRad: 0
|
||||
ringPxSize: Math.max(1.5, statusSmartIdenticon.image.width / 24.0)
|
||||
distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
|
||||
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
|
||||
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
|
||||
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
|
||||
@@ -83,29 +72,7 @@ Loader {
|
||||
height: statusSmartIdenticon.icon.height
|
||||
color: statusSmartIdenticon.icon.color
|
||||
name: statusSmartIdenticon.name
|
||||
emoji: statusSmartIdenticon.icon.emoji
|
||||
emojiSize: statusSmartIdenticon.icon.emojiSize
|
||||
letterSize: statusSmartIdenticon.icon.letterSize
|
||||
charactersLen: statusSmartIdenticon.icon.charactersLen
|
||||
}
|
||||
}
|
||||
|
||||
// Next components are painted above main sourceComponent
|
||||
StatusIdenticonRing {
|
||||
settings: statusSmartIdenticon.ringSettings
|
||||
anchors.fill: parent
|
||||
z: statusSmartIdenticon.dZ/2
|
||||
}
|
||||
|
||||
// State component
|
||||
StatusBadge {
|
||||
id: statusBadge
|
||||
visible: false
|
||||
anchors.bottom: statusSmartIdenticon.bottom
|
||||
anchors.right: statusSmartIdenticon.right
|
||||
border.width: 3
|
||||
implicitHeight: 15
|
||||
implicitWidth: 15
|
||||
z: statusSmartIdenticon.dZ
|
||||
}
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user