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)
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.2 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,41 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Components 0.1
|
||||
\title StatusQ Components
|
||||
\brief Basic set of Components StatusQ components
|
||||
|
||||
This is a listing of all Components components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAddress}
|
||||
\li \l{StatusBadge}
|
||||
\li \l{StatusChatInfoToolBar}
|
||||
\li \l{StatusChatList}
|
||||
\li \l{StatusChatListItem}
|
||||
\li \l{StatusImageSettings}
|
||||
\li \l{StatusChatListCategory}
|
||||
\li \l{StatusChatListCategoryItem}
|
||||
\li \l{StatusChatListAndCategories}
|
||||
\li \l{StatusChatToolBar}
|
||||
\li \l{StatusContactRequestsIndicatorListItem}
|
||||
\li \l{StatusDescriptionListItem}
|
||||
\li \l{StatusLetterIdenticon}
|
||||
\li \l{StatusListItem}
|
||||
\li \l{StatusListSectionHeadline}
|
||||
\li \l{StatusLoadingIndicator}
|
||||
\li \l{StatusMemberListItem}
|
||||
\li \l{StatusNavigationListItem}
|
||||
\li \l{StatusNavigationPanelHeadline}
|
||||
\li \l{StatusRoundIcon}
|
||||
\li \l{StatusRoundedImage}
|
||||
\li \l{StatusMacWindowButtons}
|
||||
\li \l{StatusListItemBadge}
|
||||
\li \l{StatusExpandableItem}
|
||||
\li \l{StatusSmartIdenticon}
|
||||
\li \l{StatusMessage}
|
||||
\li \l{StatusMessageDetails}
|
||||
\li \l{StatusTagSelector}
|
||||
\li \l{StatusToastMessage}
|
||||
\endlist
|
||||
*/
|
||||
@@ -1,47 +0,0 @@
|
||||
/*!
|
||||
\qmlmodule StatusQ.Controls 0.1
|
||||
\title StatusQ Controls
|
||||
\brief Basic set of Controls StatusQ components
|
||||
|
||||
This is a listing of all Controls components.
|
||||
|
||||
This module is part of the \l{StatusQ}{StatusQ} project.
|
||||
|
||||
\list
|
||||
\li \l{StatusAccountSelector}
|
||||
\li \l{StatusAssetSelector}
|
||||
\li \l{StatusBanner}
|
||||
\li \l{StatusChatCommandButton}
|
||||
\li \l{StatusChatInfoButton}
|
||||
\li \l{StatusChatListCategoryItemButton}
|
||||
\li \l{StatusColorSelector}
|
||||
\li \l{StatusIconTabButton}
|
||||
\li \l{StatusNavBarTabButton}
|
||||
\li \l{StatusTabBarIconButton}
|
||||
\li \l{StatusToolTip}
|
||||
\li \l{StatusBaseButton}
|
||||
\li \l{StatusButton}
|
||||
\li \l{StatusFlatButton}
|
||||
\li \l{StatusRoundButton}
|
||||
\li \l{StatusFlatRoundButton}
|
||||
\li \l{StatusSwitch}
|
||||
\li \l{StatusRadioButton}
|
||||
\li \l{StatusCheckBox}
|
||||
\li \l{StatusSlider}
|
||||
\li \l{StatusSelect}
|
||||
\li \l{StatusBaseInput}
|
||||
\li \l{StatusIdenticonRing}
|
||||
\li \l{StatusInput}
|
||||
\li \l{StatusPickerButton}
|
||||
\li \l{StatusPinInput}
|
||||
\li \l{StatusProgressBar}
|
||||
\li \l{StatusPasswordStrengthIndicator}
|
||||
\li \l{StatusSwitchTabButton}
|
||||
\li \l{StatusSwitchTabBar}
|
||||
\li \l{StatusSelectableText}
|
||||
\li \l{StatusWalletColorButton}
|
||||
\li \l{StatusWalletColorSelect}
|
||||
\li \l{StatusRegularExpressionValidator}
|
||||
\li \l{StatusIntValidator}
|
||||
\endlist
|
||||
*/
|
||||
@@ -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
|
||||
@@ -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,49 +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: "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
|
||||
}]}
|
||||
}
|
||||
}
|
||||
@@ -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,33 +57,6 @@ Column {
|
||||
input.clearable: true
|
||||
}
|
||||
|
||||
Item {
|
||||
implicitWidth: 480
|
||||
implicitHeight: 102
|
||||
z: 100000
|
||||
StatusSeedPhraseInput {
|
||||
id: statusSeedInput
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
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
|
||||
@@ -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,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,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,68 +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: { 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: 0
|
||||
placeholderText: "Search"
|
||||
icon.name: "search"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "public-chat"
|
||||
}
|
||||
|
||||
StatusIconTabButton {
|
||||
icon.name: "edit"
|
||||
onClicked: {
|
||||
root.createChat = !root.createChat;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Column {
|
||||
anchors.top: searchInputWrapper.bottom
|
||||
anchors.topMargin: 16
|
||||
width: parent.width
|
||||
spacing: 8
|
||||
|
||||
StatusContactRequestsIndicatorListItem {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
title: "Contact requests"
|
||||
requestsCount: 3
|
||||
sensor.onClicked: demoContactRequestsModal.open()
|
||||
}
|
||||
|
||||
StatusChatList {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
model: Models.demoChatListItems
|
||||
onChatItemUnmuted: {
|
||||
for (var i = 0; i < Models.demoChatListItems.count; i++) {
|
||||
let item = Models.demoChatListItems.get(i);
|
||||
if (item.chatId === id) {
|
||||
Models.demoChatListItems.setProperty(i, "muted", false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
|
||||
property string chatId
|
||||
|
||||
openHandler: function (id) {
|
||||
chatId = id
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "View Profile"
|
||||
icon.name: "group-chat"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Clear history"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Delete chat"
|
||||
icon.name: "delete"
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
centerPanel: Loader {
|
||||
anchors.fill: parent
|
||||
sourceComponent: root.createChat ? createChatView : chatChannelView
|
||||
}
|
||||
|
||||
Component {
|
||||
id: createChatView
|
||||
CreateChatView {
|
||||
contactsModel: Models.dummyContactsModel
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: chatChannelView
|
||||
ChatChannelView {
|
||||
model: Models.chatMessagesModel
|
||||
}
|
||||
}
|
||||
|
||||
rightPanel: Item {
|
||||
anchors.fill: parent
|
||||
|
||||
StatusChatToolBar {
|
||||
anchors.top: parent.top
|
||||
width: parent.width
|
||||
|
||||
chatInfoButton.title: "Amazing Funny Squirrel"
|
||||
chatInfoButton.subTitle: "Contact"
|
||||
chatInfoButton.icon.color: Theme.palette.miscColor7
|
||||
chatInfoButton.type: StatusChatInfoButton.Type.OneToOneChat
|
||||
chatInfoButton.pinnedMessagesCount: 1
|
||||
|
||||
searchButton.visible: false
|
||||
membersButton.visible: false
|
||||
notificationCount: 1
|
||||
|
||||
onNotificationButtonClicked: notificationCount = 0
|
||||
|
||||
popupMenu: StatusPopupMenu {
|
||||
id: contextMenu
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Mute Chat"
|
||||
icon.name: "notification"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Mark as Read"
|
||||
icon.name: "checkmark-circle"
|
||||
}
|
||||
StatusMenuItem {
|
||||
text: "Clear History"
|
||||
icon.name: "close-circle"
|
||||
}
|
||||
|
||||
StatusMenuSeparator {}
|
||||
|
||||
StatusMenuItem {
|
||||
text: "Leave Chat"
|
||||
icon.name: "arrow-right"
|
||||
icon.width: 14
|
||||
iconRotation: 180
|
||||
type: StatusMenuItem.Type.Danger
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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
@@ -1 +0,0 @@
|
||||
singleton Models 1.0 Models.qml
|
||||
+201
-155
@@ -12,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,33 +31,11 @@ StatusWindow {
|
||||
|
||||
Component.onCompleted: {
|
||||
Theme.palette = lightTheme
|
||||
apiDocsButton.checked = true
|
||||
|
||||
rootWindow.updatePosition();
|
||||
}
|
||||
|
||||
QtObject {
|
||||
id: appSectionType
|
||||
readonly property int chat: 0
|
||||
readonly property int community: 1
|
||||
readonly property int wallet: 2
|
||||
readonly property int browser: 3
|
||||
readonly property int nodeManagement: 4
|
||||
readonly property int profileSettings: 5
|
||||
readonly property int apiDocumentation: 100
|
||||
readonly property int demoApp: 101
|
||||
}
|
||||
|
||||
function setActiveItem(sectionId) {
|
||||
for (var i = 0; i < Models.mainAppSectionsModel.count; i++) {
|
||||
let item = Models.mainAppSectionsModel.get(i)
|
||||
if (item.sectionId !== sectionId) {
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", false);
|
||||
continue
|
||||
}
|
||||
|
||||
Models.mainAppSectionsModel.setProperty(i, "active", true);
|
||||
}
|
||||
}
|
||||
|
||||
StatusAppLayout {
|
||||
id: appLayout
|
||||
anchors.fill: parent
|
||||
@@ -67,36 +43,37 @@ StatusWindow {
|
||||
appNavBar: StatusAppNavBar {
|
||||
height: rootWindow.height
|
||||
|
||||
communityTypeRole: "sectionType"
|
||||
communityTypeValue: appSectionType.community
|
||||
sectionModel: Models.mainAppSectionsModel
|
||||
navBarChatButton: StatusNavBarTabButton {
|
||||
icon.name: "refresh"
|
||||
tooltip.text: "Reload App"
|
||||
onClicked: app.restartQml()
|
||||
}
|
||||
|
||||
regularNavBarButton: StatusNavBarTabButton {
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
name: model.icon.length > 0? "" : model.name
|
||||
icon.name: model.icon
|
||||
icon.source: model.image
|
||||
tooltip.text: model.name
|
||||
autoExclusive: true
|
||||
checked: model.active
|
||||
badge.value: model.notificationsCount
|
||||
badge.visible: model.hasNotification
|
||||
badge.border.color: hovered ? Theme.palette.statusBadge.hoverBorderColor : Theme.palette.statusBadge.borderColor
|
||||
badge.border.width: 2
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
if(model.sectionType === appSectionType.apiDocumentation)
|
||||
{
|
||||
navBarTabButtons: [
|
||||
StatusNavBarTabButton {
|
||||
id: apiDocsButton
|
||||
icon.name: "edit"
|
||||
tooltip.text: "API Documentation"
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(libraryDocumentationCmp)
|
||||
rootWindow.setActiveItem(sectionId)
|
||||
checked = !checked
|
||||
demoAppButton.checked = false
|
||||
}
|
||||
else if(model.sectionType === appSectionType.demoApp)
|
||||
{
|
||||
},
|
||||
StatusNavBarTabButton {
|
||||
id: demoAppButton
|
||||
icon.name: "status"
|
||||
tooltip.text: "Demo Application"
|
||||
checked: stackView.currentItem == demoAppCmp
|
||||
onClicked: {
|
||||
stackView.clear()
|
||||
stackView.push(demoAppCmp)
|
||||
rootWindow.setActiveItem(model.sectionId)
|
||||
checked = !checked
|
||||
apiDocsButton.checked = false
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
appView: StackView {
|
||||
@@ -124,14 +101,6 @@ StatusWindow {
|
||||
id: libraryDocumentationCmp
|
||||
|
||||
StatusAppTwoPanelLayout {
|
||||
id: mainPageView
|
||||
|
||||
function page(name) {
|
||||
viewLoader.source = Qt.resolvedUrl("./pages/" + name + "Page.qml");
|
||||
}
|
||||
function control(name) {
|
||||
viewLoader.source = Qt.resolvedUrl("./controls/" + name + ".qml");
|
||||
}
|
||||
|
||||
leftPanel: Item {
|
||||
anchors.fill: parent
|
||||
@@ -151,152 +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);
|
||||
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);
|
||||
selected: page.sourceComponent == notificationComponent
|
||||
onClicked: page.sourceComponent = notificationComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -316,17 +255,13 @@ StatusWindow {
|
||||
width: rightPanel.width
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 64
|
||||
height: Math.max(rootWindow.height, viewLoader.height + 128)
|
||||
height: Math.max(rootWindow.height, page.height + 128)
|
||||
scale: rootWindow.factor
|
||||
Loader {
|
||||
id: viewLoader
|
||||
id: page
|
||||
active: true
|
||||
anchors.centerIn: parent
|
||||
source: mainPageView.control("Icons")
|
||||
onSourceChanged: {
|
||||
if (source.toString().includes("Icons")) {
|
||||
item.iconColor = Theme.palette.primaryColor1;
|
||||
}
|
||||
}
|
||||
sourceComponent: iconsComponent
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -357,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
|
||||
|
||||
@@ -395,7 +440,8 @@ StatusWindow {
|
||||
}
|
||||
DemoApp {
|
||||
id: demoApp
|
||||
anchors.centerIn: parent
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
DropShadow {
|
||||
anchors.fill: demoApp
|
||||
|
||||
@@ -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,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,40 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
anchors.fill: parent
|
||||
|
||||
Column {
|
||||
id: toastArea
|
||||
anchors.centerIn: parent
|
||||
spacing: 8
|
||||
Repeater {
|
||||
id: toastRepeater
|
||||
width: parent.width
|
||||
height: childrenRect.height
|
||||
model: [
|
||||
{"title":"anna.eth wants to verify your identity", "subTitle":"Provide the code in the letter I sent to you on February 1st.", "icon":"contact", "loading":false, "type":0,"url":""},
|
||||
{"title":"Verification Request Sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""},
|
||||
{"title":"Collectible is being minted...", "subTitle":"View on Etherscan", "icon":"", "loading":true, "type":0,"url":"http://google.com"},
|
||||
{"title":"Contact request sent", "subTitle":"", "icon":"checkmark-circle", "loading":false, "type":1,"url":""}
|
||||
]
|
||||
delegate: StatusToastMessage {
|
||||
primaryText: modelData.title
|
||||
secondaryText: modelData.subTitle
|
||||
icon.name: modelData.icon
|
||||
loading: modelData.loading
|
||||
type: modelData.type
|
||||
linkUrl: modelData.url
|
||||
onLinkActivated: {
|
||||
Qt.openUrlExternally(link);
|
||||
}
|
||||
//simulate open
|
||||
Component.onCompleted: {
|
||||
open = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,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
|
||||
}
|
||||
}
|
||||
+14
-31
@@ -1,35 +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/DemoCommunityDetailModal.qml</file>
|
||||
<file>demoapp/DemoContactRequestsModal.qml</file>
|
||||
<file>demoapp/StatusAppChatView.qml</file>
|
||||
<file>demoapp/StatusAppCommunityView.qml</file>
|
||||
<file>demoapp/StatusAppProfileSettingsView.qml</file>
|
||||
<file>demoapp/data/Models.qml</file>
|
||||
<file>demoapp/data/qmldir</file>
|
||||
<file>Controls.qml</file>
|
||||
<file>Icons.qml</file>
|
||||
<file>Others.qml</file>
|
||||
<file>Buttons.qml</file>
|
||||
<file>DemoApp.qml</file>
|
||||
<file>ListItems.qml</file>
|
||||
<file>StatusChatInfoToolBarPage.qml</file>
|
||||
<file>StatusPopupMenuPage.qml</file>
|
||||
<file>StatusInputPage.qml</file>
|
||||
<file>ThemeSwitch.qml</file>
|
||||
<file>Layout.qml</file>
|
||||
<file>Popups.qml</file>
|
||||
<file>StatusExpandableSettingsItemPage.qml</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
</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
|
||||
|
||||
|
||||
@@ -15,7 +15,8 @@ Column {
|
||||
width: 288
|
||||
|
||||
property string categoryId: ""
|
||||
property var model: null
|
||||
property string selectedChatId: ""
|
||||
property alias chatListItems: delegateModel
|
||||
property bool draggableItems: false
|
||||
|
||||
property alias statusChatListItems: statusChatListItems
|
||||
@@ -23,8 +24,10 @@ Column {
|
||||
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)
|
||||
|
||||
@@ -36,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
|
||||
}
|
||||
@@ -92,26 +96,34 @@ Column {
|
||||
StatusChatListItem {
|
||||
|
||||
id: statusChatListItem
|
||||
|
||||
property string profileImage: ""
|
||||
|
||||
opacity: dragSensor.active ? 0.0 : 1.0
|
||||
Component.onCompleted: {
|
||||
if (typeof statusChatList.profileImageFn === "function") {
|
||||
profileImage = statusChatList.profileImageFn(model.chatId || model.id) || ""
|
||||
}
|
||||
}
|
||||
originalOrder: model.position
|
||||
chatId: model.itemId
|
||||
categoryId: model.parentItemId? model.parentItemId : ""
|
||||
name: model.name
|
||||
icon.emoji: model.emoji
|
||||
type: !!model.type ? model.type : StatusChatListItem.Type.CommunityChat
|
||||
muted: model.muted
|
||||
hasUnreadMessages: model.hasUnreadMessages
|
||||
notificationsCount: model.notificationsCount
|
||||
highlightWhenCreated: !!model.highlight
|
||||
selected: model.active
|
||||
icon.color: model.color
|
||||
image.isIdenticon: model.isIdenticon
|
||||
image.source: model.icon
|
||||
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
|
||||
|
||||
@@ -120,7 +132,7 @@ Column {
|
||||
|
||||
popupMenuSlot.item.openHandler = function () {
|
||||
if (!!originalOpenHandler) {
|
||||
originalOpenHandler(model.itemId)
|
||||
originalOpenHandler((model.chatId || model.id))
|
||||
}
|
||||
}
|
||||
|
||||
@@ -140,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)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -192,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
|
||||
|
||||
@@ -20,9 +20,11 @@ Item {
|
||||
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
|
||||
|
||||
@@ -5,7 +5,6 @@ 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
|
||||
|
||||
@@ -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,14 +28,10 @@ Rectangle {
|
||||
width: 24
|
||||
height: 24
|
||||
color: Theme.palette.miscColor5
|
||||
letterSize: emoji ? 11 : 15
|
||||
emoji: ""
|
||||
emojiSize: Emoji.size.verySmall
|
||||
charactersLen: 1
|
||||
letterSize: 15
|
||||
}
|
||||
property int type: StatusChatListItem.Type.PublicChat
|
||||
property bool highlighted: false
|
||||
property bool highlightWhenCreated: false
|
||||
property bool selected: false
|
||||
property bool dragged: false
|
||||
property alias sensor: sensor
|
||||
@@ -63,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
|
||||
@@ -71,13 +66,10 @@ Rectangle {
|
||||
MouseArea {
|
||||
id: sensor
|
||||
|
||||
HoverHandler {
|
||||
id: hoverHander
|
||||
}
|
||||
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
|
||||
onClicked: statusChatListItem.clicked(mouse)
|
||||
|
||||
@@ -100,15 +92,15 @@ Rectangle {
|
||||
width: 14
|
||||
visible: statusChatListItem.type !== StatusChatListItem.Type.OneToOneChat
|
||||
opacity: {
|
||||
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
return 0.4
|
||||
}
|
||||
return statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
statusBadge.visible ||
|
||||
hoverHander.hovered ? 1.0 : 0.7
|
||||
sensor.containsMouse ? 1.0 : 0.7
|
||||
}
|
||||
|
||||
icon: {
|
||||
@@ -143,21 +135,19 @@ Rectangle {
|
||||
statusChatListItem.name)
|
||||
elide: Text.ElideRight
|
||||
color: {
|
||||
if (statusChatListItem.muted && !hoverHander.hovered && !statusChatListItem.highlighted) {
|
||||
if (statusChatListItem.muted && !sensor.containsMouse && !statusChatListItem.highlighted) {
|
||||
return Theme.palette.directColor5
|
||||
}
|
||||
return statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
return statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.selected ||
|
||||
statusChatListItem.highlighted ||
|
||||
statusChatListItem.highlightWhenCreated ||
|
||||
hoverHander.hovered ||
|
||||
sensor.containsMouse ||
|
||||
statusBadge.visible ? Theme.palette.directColor1 : Theme.palette.directColor4
|
||||
}
|
||||
font.weight: !statusChatListItem.muted &&
|
||||
(statusChatListItem.hasUnreadMessages ||
|
||||
statusChatListItem.notificationsCount > 0 ||
|
||||
statusChatListItem.highlightWhenCreated ||
|
||||
(statusChatListItem.hasMention ||
|
||||
statusChatListItem.hasUnreadMessages ||
|
||||
statusBadge.visible) ? Font.Bold : Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
@@ -196,8 +186,7 @@ Rectangle {
|
||||
color: statusChatListItem.muted ? Theme.palette.primaryColor2 : Theme.palette.primaryColor1
|
||||
border.width: 4
|
||||
border.color: color
|
||||
value: statusChatListItem.notificationsCount
|
||||
visible: statusChatListItem.notificationsCount > 0
|
||||
visible: statusBadge.value > 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -93,25 +93,6 @@ Rectangle {
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -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,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
|
||||
property int letterSize: 21
|
||||
property int charactersLen: 1
|
||||
|
||||
color: Theme.palette.miscColor5
|
||||
width: 40
|
||||
@@ -20,30 +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
|
||||
font.pixelSize: statusLetterIdenticon.letterSize
|
||||
color: Qt.rgba(255, 255, 255, 0.7)
|
||||
|
||||
text: {
|
||||
if (emoji) {
|
||||
if(Utils.isHtml(emoji))
|
||||
return emoji
|
||||
else
|
||||
return Emoji.parse(emoji, emojiSize || undefined)
|
||||
}
|
||||
|
||||
const shift = (root.name.charAt(0) === "#") ||
|
||||
(root.name.charAt(0) === "@")
|
||||
|
||||
return root.name.substring(shift, shift + charactersLen).toUpperCase()
|
||||
}
|
||||
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 string tertiaryTitle: ""
|
||||
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)
|
||||
@@ -140,27 +123,16 @@ Rectangle {
|
||||
active: statusListItem.icon.isLetterIdenticon ||
|
||||
!!statusListItem.icon.name ||
|
||||
!!statusListItem.image.source.toString()
|
||||
badge.border.color: statusListItem.color
|
||||
ringSettings: statusListItem.ringSettings
|
||||
}
|
||||
|
||||
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,10 +141,6 @@ Rectangle {
|
||||
font.pixelSize: 15
|
||||
height: visible ? contentHeight : 0
|
||||
wrapMode: Text.WrapAtWordBoundaryOrAnywhere
|
||||
anchors.left: parent.left
|
||||
anchors.right: !statusListItem.titleAsideText && !titleIconsRow.sourceComponent ? parent.right : undefined
|
||||
anchors.top: bottomModel.length === 0 ? undefined: parent.top
|
||||
anchors.topMargin: bottomModel.length === 0 ? undefined : 20
|
||||
color: {
|
||||
if (!statusListItem.enabled) {
|
||||
return Theme.palette.baseColor1
|
||||
@@ -189,10 +157,9 @@ Rectangle {
|
||||
|
||||
MouseArea {
|
||||
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
|
||||
@@ -205,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
|
||||
@@ -250,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
|
||||
|
||||
@@ -295,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,63 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
|
||||
StatusListItem {
|
||||
id: root
|
||||
|
||||
property string nickName: ""
|
||||
property string userName: ""
|
||||
property string chatKey: ""
|
||||
property bool isMutualContact: false
|
||||
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
property bool isOnline: false
|
||||
|
||||
// Subtitle composition:
|
||||
function composeSubtitile() {
|
||||
var compose = ""
|
||||
if(root.userName !== "")
|
||||
compose = "(" + root.userName + ")"
|
||||
|
||||
if(compose !== "" && root.chatKey !== "")
|
||||
// Composition
|
||||
compose += " • " + composeShortKeyChat(root.chatKey)
|
||||
|
||||
else if(root.chatKey !== "")
|
||||
compose = composeShortKeyChat(root.chatKey)
|
||||
|
||||
return compose
|
||||
}
|
||||
|
||||
// Short keychat composition:
|
||||
function composeShortKeyChat(chatKey) {
|
||||
return chatKey.substring(0, 5) + "..." + chatKey.substring(chatKey.length - 3)
|
||||
}
|
||||
|
||||
// root object settings:
|
||||
title: root.nickName
|
||||
statusListItemTitleIcons.sourceComponent: StatusContactVerificationIcons {
|
||||
isMutualContact: root.isMutualContact
|
||||
trustIndicator: root.trustIndicator
|
||||
}
|
||||
subTitle: composeSubtitile()
|
||||
statusListItemSubTitle.font.pixelSize: 10
|
||||
icon.isLetterIdenticon: !root.image.source.toString()
|
||||
statusListItemIcon.badge.visible: true
|
||||
statusListItemIcon.badge.color: root.isOnline ? Theme.palette.successColor1 : Theme.palette.baseColor1
|
||||
color: sensor.containsMouse ? Theme.palette.baseColor2 : Theme.palette.baseColor4
|
||||
|
||||
// Default sizes / positions by design
|
||||
implicitWidth: 256
|
||||
implicitHeight: Math.max(56, statusListItemTitleArea.height + leftPadding)
|
||||
leftPadding: 8
|
||||
image.width: 32
|
||||
image.height: 32
|
||||
icon.width: 32
|
||||
icon.height: 32
|
||||
statusListItemIcon.anchors.verticalCenter: sensor.verticalCenter
|
||||
statusListItemIcon.anchors.top: undefined
|
||||
statusListItemIcon.badge.border.width: 2
|
||||
statusListItemIcon.badge.implicitHeight: 12 // 8 px + 2 px * 2 borders
|
||||
statusListItemIcon.badge.implicitWidth: 12 // 8 px + 2 px * 2 borders
|
||||
}
|
||||
@@ -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: ""
|
||||
}
|
||||
|
||||
|
||||
@@ -1,21 +1,15 @@
|
||||
import QtQuick 2.13
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Loader {
|
||||
id: statusSmartIdenticon
|
||||
|
||||
property string name: ""
|
||||
property int dZ: 100
|
||||
|
||||
// Badge color properties must be set if badgeItem.visible = true
|
||||
property alias badge: statusBadge
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
charactersLen: 1
|
||||
}
|
||||
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
@@ -23,12 +17,6 @@ Loader {
|
||||
height: 40
|
||||
}
|
||||
|
||||
property StatusIdenticonRingSettings ringSettings: StatusIdenticonRingSettings {
|
||||
initalAngleRad: 0
|
||||
ringPxSize: 1.5
|
||||
distinctiveColors: Theme.palette.identiconRingColors
|
||||
}
|
||||
|
||||
sourceComponent: statusSmartIdenticon.icon.isLetterIdenticon ? letterIdenticon :
|
||||
!!statusSmartIdenticon.image.source.toString() ? roundedImage :
|
||||
!!statusSmartIdenticon.icon.name.toString() ? roundedIcon : letterIdenticon
|
||||
@@ -84,30 +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
|
||||
identiconText.color: statusSmartIdenticon.icon.textColor
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,285 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQuick.Controls 2.14
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: root
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: 44 + ((userListView.count > 0) ? 44 + ((((userListView.count * 64) > root.maxHeight)
|
||||
? root.maxHeight : (userListView.count * 64))) :0)
|
||||
|
||||
property real maxHeight
|
||||
property alias textEdit: edit
|
||||
property alias text: edit.text
|
||||
property string warningText: ""
|
||||
property string toLabelText: ""
|
||||
property string listLabel: ""
|
||||
property int nameCountLimit: 5
|
||||
|
||||
property ListModel sortedList: ListModel { }
|
||||
property ListModel namesModel: ListModel { }
|
||||
|
||||
function find(model, criteria) {
|
||||
for (var i = 0; i < model.count; ++i) if (criteria(model.get(i))) return model.get(i);
|
||||
return null;
|
||||
}
|
||||
|
||||
function insertTag(name, id) {
|
||||
if (!find(namesModel, function(item) { return item.publicId === id }) && namesModel.count < root.nameCountLimit) {
|
||||
namesModel.insert(namesModel.count, {"name": name, "publicId": id});
|
||||
addMember(id);
|
||||
edit.clear();
|
||||
}
|
||||
}
|
||||
|
||||
function sortModel(inputModel) {
|
||||
sortedList.clear();
|
||||
if (text !== "") {
|
||||
for (var i = 0; i < inputModel.count; i++ ) {
|
||||
var entry = inputModel.get(i);
|
||||
if (entry.name.toLowerCase().includes(text.toLowerCase())) {
|
||||
sortedList.insert(sortedList.count, {"publicId": entry.publicId, "name": entry.name,
|
||||
"icon": entry.icon, "isIdenticon": entry.isIdenticon,
|
||||
"onlineStatus": entry.onlineStatus});
|
||||
userListView.model = sortedList;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
userListView.model = inputModel;
|
||||
}
|
||||
}
|
||||
|
||||
signal addMember(string memberId)
|
||||
signal removeMember(string memberId)
|
||||
|
||||
Rectangle {
|
||||
id: tagSelectorRect
|
||||
width: parent.width
|
||||
height: 44
|
||||
radius: 8
|
||||
color: Theme.palette.baseColor2
|
||||
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
anchors.leftMargin: 16
|
||||
anchors.rightMargin: 16
|
||||
spacing: 8
|
||||
StatusBaseText {
|
||||
Layout.preferredWidth: 22
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
|
||||
color: Theme.palette.baseColor1
|
||||
text: root.toLabelText
|
||||
}
|
||||
|
||||
ScrollView {
|
||||
Layout.preferredWidth: (namesList.contentWidth > (parent.width - 142)) ?
|
||||
(parent.width - 142) : namesList.contentWidth
|
||||
implicitHeight: 30
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
visible: (namesList.count > 0)
|
||||
contentWidth: namesList.contentWidth
|
||||
ScrollBar.vertical.policy: ScrollBar.AlwaysOff
|
||||
ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
|
||||
clip: true
|
||||
ListView {
|
||||
id: namesList
|
||||
anchors.fill: parent
|
||||
model: namesModel
|
||||
orientation: ListView.Horizontal
|
||||
spacing: 8
|
||||
onCountChanged: {
|
||||
contentX = contentWidth;
|
||||
}
|
||||
delegate: Rectangle {
|
||||
id: nameDelegate
|
||||
width: (nameText.contentWidth + 34)
|
||||
height: 30
|
||||
color: mouseArea.containsMouse ? Theme.palette.miscColor1 : Theme.palette.primaryColor1
|
||||
radius: 8
|
||||
StatusBaseText {
|
||||
id: nameText
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.palette.indirectColor1
|
||||
text: name
|
||||
}
|
||||
StatusIcon {
|
||||
anchors.left: nameText.right
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
color: Theme.palette.indirectColor1
|
||||
icon: "close"
|
||||
}
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: {
|
||||
removeMember(publicId);
|
||||
namesModel.remove(index, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TextEdit {
|
||||
id: edit
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 44
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
visible: (namesModel.count < 5)
|
||||
enabled: visible
|
||||
focus: true
|
||||
font.pixelSize: 15
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
Keys.onPressed: {
|
||||
if ((event.key === Qt.Key_Backspace || event.key === Qt.Key_Escape)
|
||||
&& getText(cursorPosition, (cursorPosition-1)) === "") {
|
||||
removeMember(namesModel.get(namesList.count-1).publicId);
|
||||
namesModel.remove((namesList.count-1), 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: warningTextLabel
|
||||
visible: (namesModel.count === root.nameCountLimit)
|
||||
Layout.preferredWidth: 120
|
||||
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.dangerColor1
|
||||
text: root.nameCountLimit + " " + root.warningText
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: contactsLabel
|
||||
font.pixelSize: 15
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 8
|
||||
anchors.top: tagSelectorRect.bottom
|
||||
anchors.topMargin: 32
|
||||
visible: (namesModel.count === 0)
|
||||
color: Theme.palette.baseColor1
|
||||
text: root.listLabel
|
||||
}
|
||||
|
||||
Control {
|
||||
id: suggestionsContainer
|
||||
width: 360
|
||||
anchors {
|
||||
top: (root.sortedList.count > 0) ? tagSelectorRect.bottom : contactsLabel.bottom
|
||||
topMargin: 8//Style.current.padding
|
||||
bottom: parent.bottom
|
||||
bottomMargin: 20//Style.current.bigPadding
|
||||
}
|
||||
visible: ((root.namesModel.count === 0) || (root.sortedList.count > 0))
|
||||
x: ((root.namesModel.count > 0) && ((edit.x + 8) <= (root.width - suggestionsContainer.width)))
|
||||
? (edit.x + 8) : 0
|
||||
background: Rectangle {
|
||||
id: bgRect
|
||||
anchors.fill: parent
|
||||
visible: (root.sortedList.count > 0)
|
||||
color: Theme.palette.statusPopupMenu.backgroundColor
|
||||
radius: 8
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
width: bgRect.width
|
||||
height: bgRect.height
|
||||
x: bgRect.x
|
||||
source: bgRect
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 4
|
||||
radius: 12
|
||||
samples: 25
|
||||
spread: 0.2
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
}
|
||||
contentItem: ListView {
|
||||
id: userListView
|
||||
anchors.fill: parent
|
||||
anchors.topMargin: 8
|
||||
anchors.bottomMargin: 8
|
||||
clip: true
|
||||
ScrollBar.vertical: ScrollBar {
|
||||
policy: ScrollBar.AsNeeded
|
||||
}
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
delegate: Item {
|
||||
id: wrapper
|
||||
anchors.right: parent.right
|
||||
anchors.left: parent.left
|
||||
height: 64
|
||||
property bool hovered: false
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
anchors.fill: parent
|
||||
anchors.rightMargin: 8
|
||||
anchors.leftMargin: 8
|
||||
radius: 8
|
||||
visible: (root.sortedList.count > 0)
|
||||
color: (wrapper.hovered) ? Theme.palette.baseColor2 : "transparent"
|
||||
}
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: contactImage
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16//Style.current.padding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
name: model.name
|
||||
icon: StatusIconSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
letterSize: 15
|
||||
}
|
||||
image: StatusImageSettings {
|
||||
width: 40
|
||||
height: 40
|
||||
source: model.icon
|
||||
isIdenticon: model.isIdenticon
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: contactInfo
|
||||
text: model.name
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 8
|
||||
anchors.left: contactImage.right
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
elide: Text.ElideRight
|
||||
color: Theme.palette.directColor1
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onEntered: {
|
||||
wrapper.hovered = true;
|
||||
}
|
||||
onExited: {
|
||||
wrapper.hovered = false;
|
||||
}
|
||||
onClicked: {
|
||||
root.insertTag(model.name, model.publicId);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
|
||||
import QtGraphicalEffects 1.13
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Control {
|
||||
id: root
|
||||
width: 343
|
||||
height: !!secondaryText ? 68 : 48
|
||||
anchors.right: parent.right
|
||||
|
||||
property bool open: false
|
||||
property string primaryText: ""
|
||||
property string secondaryText: ""
|
||||
property bool loading: false
|
||||
property string iconName: ""
|
||||
property string linkUrl: ""
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 23
|
||||
height: 23
|
||||
}
|
||||
|
||||
property int type: StatusToastMessage.Type.Default
|
||||
enum Type {
|
||||
Default,
|
||||
Success
|
||||
}
|
||||
|
||||
function open(title, subTitle, iconName, type, loading, url) {
|
||||
root.primaryText = title;
|
||||
root.secondaryText = subTitle;
|
||||
root.icon.name = iconName;
|
||||
root.type = type;
|
||||
root.loading = loading;
|
||||
root.linkUrl = url;
|
||||
root.open = true;
|
||||
}
|
||||
|
||||
signal close()
|
||||
signal linkActivated(var link)
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "opened"
|
||||
when: root.open
|
||||
PropertyChanges {
|
||||
target: root
|
||||
anchors.rightMargin: 0
|
||||
opacity: 1.0
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "closed"
|
||||
when: !root.open
|
||||
PropertyChanges {
|
||||
target: root
|
||||
anchors.rightMargin: -width
|
||||
opacity: 0.0
|
||||
}
|
||||
StateChangeScript {
|
||||
script: { root.close(); }
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
transitions: [
|
||||
Transition {
|
||||
to: "*"
|
||||
NumberAnimation { properties: "anchors.rightMargin,opacity"; duration: 400 }
|
||||
}
|
||||
]
|
||||
|
||||
background: Rectangle {
|
||||
id: background
|
||||
anchors.fill: parent
|
||||
color: Theme.palette.statusToastMessage.backgroundColor
|
||||
radius: 8
|
||||
border.color: Theme.palette.baseColor2
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
verticalOffset: 3
|
||||
radius: 8
|
||||
samples: 15
|
||||
fast: true
|
||||
cached: true
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
}
|
||||
|
||||
contentItem: Item {
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 4
|
||||
height: parent.height
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
onMouseXChanged: {
|
||||
root.open = (mouseX < (root.width/3));
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
anchors.fill: parent
|
||||
spacing: 16
|
||||
Rectangle {
|
||||
implicitWidth: 32
|
||||
implicitHeight: 32
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
radius: (root.width/2)
|
||||
color: (root.type === StatusToastMessage.Type.Success) ?
|
||||
Theme.palette.successColor2 : Theme.palette.primaryColor3
|
||||
Loader {
|
||||
anchors.centerIn: parent
|
||||
sourceComponent: root.loading ? loadingInd : statusIcon
|
||||
Component {
|
||||
id: loadingInd
|
||||
StatusLoadingIndicator {
|
||||
color: (root.type === StatusToastMessage.Type.Success) ?
|
||||
Theme.palette.successColor1 : Theme.palette.primaryColor1
|
||||
}
|
||||
}
|
||||
Component {
|
||||
id: statusIcon
|
||||
StatusIcon {
|
||||
anchors.centerIn: parent
|
||||
width: root.icon.width
|
||||
height: root.icon.height
|
||||
color: (root.type === StatusToastMessage.Type.Success) ?
|
||||
Theme.palette.successColor1 : Theme.palette.primaryColor1
|
||||
icon: root.icon.name
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Column {
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
StatusBaseText {
|
||||
width: parent.width
|
||||
font.pixelSize: 13
|
||||
color: Theme.palette.directColor1
|
||||
elide: Text.ElideRight
|
||||
text: root.primaryText
|
||||
}
|
||||
StatusBaseText {
|
||||
width: parent.width
|
||||
visible: (!root.linkUrl && !!root.secondaryText)
|
||||
height: visible ? contentHeight : 0
|
||||
font.pixelSize: 13
|
||||
color: Theme.palette.baseColor1
|
||||
text: root.secondaryText
|
||||
elide: Text.ElideRight
|
||||
}
|
||||
StatusSelectableText {
|
||||
visible: (!!root.linkUrl)
|
||||
height: visible ? implicitHeight : 0
|
||||
font.pixelSize: 13
|
||||
hoveredLinkColor: Theme.palette.primaryColor1
|
||||
text: "<p><a style=\"text-decoration:none\" href=\'" + root.linkUrl + " \'>" + root.secondaryText + "</a></p>"
|
||||
onLinkActivated: {
|
||||
root.linkActivated(root.linkUrl);
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusFlatRoundButton {
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
icon.name: "close"
|
||||
icon.color: Theme.palette.directColor1
|
||||
implicitWidth: 30
|
||||
implicitHeight: 30
|
||||
onClicked: {
|
||||
root.open = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,78 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.12
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: wizardWrapper
|
||||
width: parent.width
|
||||
height: 56
|
||||
property ListModel stepsModel: ListModel { }
|
||||
|
||||
ListView {
|
||||
id: repeat
|
||||
width: childrenRect.width
|
||||
height: parent.height
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
orientation: ListView.Horizontal
|
||||
model: stepsModel
|
||||
delegate: Item {
|
||||
id: wrapperItem
|
||||
width: (index === 0) ? descriptionLabel.contentWidth : (wizardWrapper.width / repeat.count)
|
||||
height: 56
|
||||
onXChanged: {
|
||||
//as x changes while delegates are created, direct assignment doesn't work
|
||||
x = (index === (repeat.count-1)) ? (width+32) : (label.width/2) + 8
|
||||
}
|
||||
StatusProgressBar {
|
||||
id: barBorder
|
||||
width: visible ? (parent.width - (label.width/2 + 24)) : 0
|
||||
height: visible ? 8 : 0
|
||||
visible: (index > 0)
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.verticalCenterOffset: -12
|
||||
from: 0
|
||||
//TODO what is to: here?
|
||||
to: 2000
|
||||
value: loadingTime
|
||||
backgroundColor: "transparent"
|
||||
backgroundBorderColor: Theme.palette.primaryColor1
|
||||
fillColor: Theme.palette.primaryColor1
|
||||
}
|
||||
Item {
|
||||
id: label
|
||||
width: descriptionLabel.contentWidth
|
||||
height: 56
|
||||
anchors.left: (index > 0) ? barBorder.right : parent.left
|
||||
anchors.leftMargin: (index > 0) ? -((width/2) - 24) : 0
|
||||
Rectangle {
|
||||
width: 32
|
||||
height: 32
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
radius: width/2
|
||||
color: stepCompleted ? Theme.palette.primaryColor1 : "transparent"
|
||||
border.color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
|
||||
? "transparent" : Theme.palette.primaryColor1
|
||||
border.width: 2
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: index+1
|
||||
font.pixelSize: 17
|
||||
color: (stepCompleted && (barBorder.visible ? (barBorder.value === barBorder.to) : true))
|
||||
? Theme.palette.indirectColor1 : Theme.palette.primaryColor1
|
||||
}
|
||||
}
|
||||
StatusBaseText {
|
||||
id: descriptionLabel
|
||||
anchors.bottom: parent.bottom
|
||||
text: description
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,143 +0,0 @@
|
||||
import QtQuick 2.3
|
||||
import QtMultimedia 5.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
// To-do update as per latest design -> Audio graphs. Also the player should ideally be in the BE?
|
||||
Rectangle {
|
||||
id: audioChatMessage
|
||||
|
||||
property string audioMessageInfoText: ""
|
||||
property bool isPreview: false
|
||||
property bool hovered: false
|
||||
property string audioSource: ""
|
||||
|
||||
width: 320
|
||||
height: 32
|
||||
radius: 20
|
||||
|
||||
color: hovered ? Theme.palette.directColor8 : Theme.palette.baseColor2
|
||||
|
||||
Audio {
|
||||
id: audioMessage
|
||||
source: audioSource
|
||||
notifyInterval: 150
|
||||
}
|
||||
|
||||
RowLayout {
|
||||
id: preview
|
||||
visible: isPreview
|
||||
spacing: 5
|
||||
anchors.centerIn: parent
|
||||
StatusIcon {
|
||||
id: icon
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.preferredWidth: 14
|
||||
Layout.preferredHeight: 14
|
||||
icon: "audio"
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Theme.palette.baseColor1
|
||||
text: audioMessageInfoText
|
||||
font.pixelSize: 13
|
||||
}
|
||||
}
|
||||
|
||||
StatusFlatRoundButton {
|
||||
id: playButton
|
||||
width: 15
|
||||
height: 15
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
visible: !isPreview
|
||||
|
||||
type: StatusFlatRoundButton.Type.Tertiary
|
||||
color: "transparent"
|
||||
icon.name: audioMessage.playbackState == Audio.PlayingState ? "pause-filled" : "play-filled"
|
||||
icon.color: Theme.palette.directColor1
|
||||
|
||||
onClicked: {
|
||||
if(audioMessage.playbackState === Audio.PlayingState){
|
||||
audioMessage.pause();
|
||||
} else {
|
||||
audioMessage.play();
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
height: 2
|
||||
width: 240
|
||||
color: Theme.palette.directColor5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.left: playButton.right
|
||||
anchors.leftMargin: 10
|
||||
visible: !isPreview
|
||||
Rectangle {
|
||||
id: progress
|
||||
height: 2
|
||||
width: {
|
||||
if(audioMessage.duration === 0) return 0;
|
||||
if(audioMessage.playbackState === Audio.StoppedState) return 0;
|
||||
return parent.width * audioMessage.position / audioMessage.duration;
|
||||
}
|
||||
color: Theme.palette.directColor5
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: handle
|
||||
width: 10
|
||||
height: 10
|
||||
color: Theme.palette.directColor1
|
||||
radius: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
x: progress.width
|
||||
state: "default"
|
||||
|
||||
states: State {
|
||||
name: "pressed"
|
||||
when: handleMouseArea.pressed
|
||||
PropertyChanges {
|
||||
target: handle;
|
||||
scale: 1.2
|
||||
}
|
||||
}
|
||||
transitions: Transition {
|
||||
NumberAnimation {
|
||||
properties: "scale";
|
||||
duration: 100;
|
||||
easing.type: Easing.InOutQuad
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
id: handleMouseArea
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
drag.target: parent
|
||||
drag.axis: Drag.XAxis
|
||||
drag.minimumX: 0
|
||||
drag.maximumX: parent.parent.width
|
||||
onPressed: {
|
||||
handle.state = "pressed"
|
||||
if(audioMessage.playbackState === Audio.PlayingState) {
|
||||
audioMessage.pause();
|
||||
}
|
||||
}
|
||||
onReleased: {
|
||||
handle.state = "default"
|
||||
audioMessage.seek(audioMessage.duration * handle.x / parent.parent.width)
|
||||
audioMessage.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import QtQuick 2.3
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Item {
|
||||
id: editText
|
||||
|
||||
property alias inputComponent: chatInputLoader.sourceComponent
|
||||
|
||||
property string cancelButtonText: ""
|
||||
property string saveButtonText: ""
|
||||
property string msgText: ""
|
||||
|
||||
signal cancelEditClicked()
|
||||
signal editCompleted(var newMsgText)
|
||||
|
||||
height: childrenRect.height
|
||||
|
||||
ColumnLayout {
|
||||
spacing: 4
|
||||
Loader {
|
||||
id: chatInputLoader
|
||||
// To-Do: Move to StatusChatInput once its moved to StatusQ
|
||||
sourceComponent: StatusInput {
|
||||
width: editText.width
|
||||
input.placeholderText: ""
|
||||
input.text: msgText
|
||||
input.implicitHeight: 40
|
||||
}
|
||||
}
|
||||
RowLayout {
|
||||
spacing: 4
|
||||
StatusFlatButton {
|
||||
id: cancelBtn
|
||||
text: cancelButtonText
|
||||
size: StatusBaseButton.Size.Small
|
||||
onClicked: cancelEditClicked()
|
||||
}
|
||||
StatusButton {
|
||||
id: saveBtn
|
||||
text: saveButtonText
|
||||
size: StatusBaseButton.Size.Small
|
||||
enabled: chatInputLoader.item.input.text.trim().length > 0
|
||||
onClicked: editCompleted(chatInputLoader.item.input.text)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,114 +0,0 @@
|
||||
import QtQuick 2.3
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: imageContainer
|
||||
|
||||
enum ShapeType {
|
||||
ROUNDED = 0,
|
||||
LEFT_ROUNDED = 1,
|
||||
RIGHT_ROUNDED = 2
|
||||
}
|
||||
|
||||
property alias imageAlias: imageMessage
|
||||
|
||||
property bool isAppWindowActive: false
|
||||
property url source: ""
|
||||
property bool allCornersRounded: false
|
||||
property bool isLeftCorner: true
|
||||
property int imageWidth: 350
|
||||
property int shapeType: -1
|
||||
|
||||
property string loadingImageText: ""
|
||||
property string errorLoadingImageText: ""
|
||||
|
||||
signal clicked(var image, var mouse)
|
||||
|
||||
width: loadingImage.visible ? loadingImage.width : imageMessage.width
|
||||
height: loadingImage.visible ? loadingImage.height : imageMessage.paintedHeight
|
||||
|
||||
QtObject {
|
||||
id: _internal
|
||||
property bool isAnimated: !!source && source.toString().endsWith('.gif')
|
||||
property bool pausePlaying: false
|
||||
}
|
||||
|
||||
AnimatedImage {
|
||||
id: imageMessage
|
||||
|
||||
width: sourceSize.width > imageWidth ? imageWidth : sourceSize.width
|
||||
fillMode: Image.PreserveAspectFit
|
||||
source: imageContainer.source
|
||||
playing: _internal.isAnimated && isAppWindowActive && !_internal.pausePlaying
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: OpacityMask {
|
||||
maskSource: Item {
|
||||
width: imageMessage.width
|
||||
height: imageMessage.height
|
||||
|
||||
Rectangle {
|
||||
anchors.top: parent.top
|
||||
anchors.left: parent.left
|
||||
width: imageMessage.width
|
||||
height: imageMessage.height
|
||||
radius: 16
|
||||
}
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: parent.left
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 4
|
||||
visible: shapeType === StatusImageMessage.ShapeType.LEFT_ROUNDED //!isLeftCorner && !allCornersRounded
|
||||
}
|
||||
Rectangle {
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.right: parent.right
|
||||
width: 32
|
||||
height: 32
|
||||
radius: 4
|
||||
visible: shapeType === StatusImageMessage.ShapeType.RIGHT_ROUNDED //isLeftCorner && !allCornersRounded
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
onClicked: {
|
||||
if (imageContainer.isAnimated) {
|
||||
// FIXME the ListView completely removes Items that scroll out of view
|
||||
// so when we scroll backto the image, it gets reloaded and playing is reset
|
||||
_internal.pausePlaying = ! _internal.pausePlaying
|
||||
return
|
||||
}
|
||||
imageContainer.clicked(imageMessage, mouse)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: loadingImage
|
||||
visible: imageMessage.status === Image.Loading
|
||||
|| imageMessage.status === Image.Error
|
||||
width: parent.width
|
||||
height: width
|
||||
border.width: 1
|
||||
border.color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
|
||||
StatusBaseText {
|
||||
anchors.centerIn: parent
|
||||
text: imageMessage.status === Image.Error ? errorLoadingImageText: loadingImageText
|
||||
color: imageMessage.status === Image.Error?
|
||||
Theme.palette.dangerColor1 :
|
||||
Theme.palette.directColor1
|
||||
font.pixelSize: 15
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
|
||||
Item {
|
||||
id: statusMessageHeader
|
||||
|
||||
property alias displayNameLabel: primaryDisplayName
|
||||
property alias secondaryNameLabel: secondaryDisplayName
|
||||
property alias tertiaryDetailsLabel: tertiaryDetailText
|
||||
property alias timestamp: timestampText
|
||||
|
||||
property string displayName: ""
|
||||
property string secondaryName: ""
|
||||
property string tertiaryDetail: ""
|
||||
property string resendText: ""
|
||||
property bool showResendButton: false
|
||||
property bool isMutualContact: false
|
||||
property var trustIndicator: StatusContactVerificationIcons.TrustedType.None
|
||||
|
||||
signal clicked()
|
||||
signal resendClicked()
|
||||
|
||||
height: childrenRect.height
|
||||
width: primaryDisplayName.width + (secondaryDisplayName.visible ? secondaryDisplayName.width + header.spacing : 0)
|
||||
|
||||
RowLayout {
|
||||
id: header
|
||||
spacing: 4
|
||||
TextEdit {
|
||||
id: primaryDisplayName
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.weight: Font.Medium
|
||||
font.pixelSize: 15
|
||||
font.underline: mouseArea.containsMouse
|
||||
readOnly: true
|
||||
wrapMode: Text.WordWrap
|
||||
selectByMouse: true
|
||||
color: Theme.palette.primaryColor1
|
||||
text: displayName
|
||||
MouseArea {
|
||||
id: mouseArea
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
hoverEnabled: true
|
||||
onClicked: {
|
||||
statusMessageHeader.clicked()
|
||||
}
|
||||
}
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
StatusContactVerificationIcons {
|
||||
isMutualContact: statusMessageHeader.isMutualContact
|
||||
trustIndicator: statusMessageHeader.trustIndicator
|
||||
}
|
||||
StatusBaseText {
|
||||
id: secondaryDisplayName
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 10
|
||||
text: secondaryName
|
||||
visible: !!text
|
||||
}
|
||||
StatusBaseText {
|
||||
id: dotSeparator1
|
||||
Layout.fillHeight: true
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.baseColor1
|
||||
text: "."
|
||||
visible: secondaryDisplayName.visible
|
||||
}
|
||||
StatusBaseText {
|
||||
id: tertiaryDetailText
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.maximumWidth: 58
|
||||
font.pixelSize: 10
|
||||
elide: Text.ElideMiddle
|
||||
color: Theme.palette.baseColor1
|
||||
text: tertiaryDetail
|
||||
}
|
||||
StatusBaseText {
|
||||
id: dotSeparator2
|
||||
Layout.fillHeight: true
|
||||
font.pixelSize: 10
|
||||
color: Theme.palette.baseColor1
|
||||
text: "."
|
||||
visible: tertiaryDetailText.visible
|
||||
}
|
||||
StatusTimeStampLabel {
|
||||
id: timestampText
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Theme.palette.dangerColor1
|
||||
font.pixelSize: 12
|
||||
text: statusMessageHeader.resendText
|
||||
visible: showResendButton && !!timestampText.text
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: statusMessageHeader.resendClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,51 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtGraphicalEffects 1.13
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Rectangle {
|
||||
id: buttonsContainer
|
||||
|
||||
property list<Item> quickActions
|
||||
|
||||
QtObject {
|
||||
id: _internal
|
||||
readonly property int containerMargin: 2
|
||||
}
|
||||
|
||||
width: buttonRow.width + _internal.containerMargin * 2
|
||||
height: 36
|
||||
radius: 8
|
||||
color: Theme.palette.statusSelect.menuItemBackgroundColor
|
||||
|
||||
layer.enabled: true
|
||||
layer.effect: DropShadow {
|
||||
width: buttonsContainer.width
|
||||
height: buttonsContainer.height
|
||||
x: buttonsContainer.x
|
||||
y: buttonsContainer.y + 10
|
||||
horizontalOffset: 0
|
||||
verticalOffset: 2
|
||||
source: buttonsContainer
|
||||
radius: 10
|
||||
samples: 15
|
||||
color: Theme.palette.dropShadow
|
||||
}
|
||||
|
||||
Row {
|
||||
id: buttonRow
|
||||
spacing: _internal.containerMargin
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: _internal.containerMargin
|
||||
anchors.verticalCenter: buttonsContainer.verticalCenter
|
||||
height: parent.height - 2 * _internal.containerMargin
|
||||
}
|
||||
|
||||
onQuickActionsChanged: {
|
||||
for (let idx in quickActions) {
|
||||
quickActions[idx].parent = buttonRow
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Shapes 1.13
|
||||
import QtGraphicalEffects 1.13
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Components 0.1
|
||||
|
||||
Loader {
|
||||
id: chatReply
|
||||
|
||||
property StatusMessageDetails replyDetails
|
||||
property string audioMessageInfoText: ""
|
||||
|
||||
signal replyProfileClicked()
|
||||
|
||||
active: visible
|
||||
|
||||
sourceComponent: RowLayout {
|
||||
id: replyLayout
|
||||
spacing: 8
|
||||
Shape {
|
||||
id: replyCorner
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.leftMargin: 35
|
||||
Layout.topMargin: profileImage.height/2
|
||||
Layout.preferredWidth: 20
|
||||
Layout.preferredHeight: messageLayout.height - replyCorner.Layout.topMargin
|
||||
asynchronous: true
|
||||
antialiasing: true
|
||||
ShapePath {
|
||||
strokeColor: Qt.hsla(Theme.palette.baseColor1.hslHue, Theme.palette.baseColor1.hslSaturation, Theme.palette.baseColor1.hslLightness, 0.4)
|
||||
strokeWidth: 3
|
||||
fillColor: "transparent"
|
||||
capStyle: ShapePath.RoundCap
|
||||
joinStyle: ShapePath.RoundJoin
|
||||
startX: 20
|
||||
startY: 0
|
||||
PathLine { x: 10; y: 0 }
|
||||
PathArc {
|
||||
x: 0; y: 10
|
||||
radiusX: 13
|
||||
radiusY: 13
|
||||
direction: PathArc.Counterclockwise
|
||||
}
|
||||
PathLine { x: 0; y: messageLayout.height}
|
||||
}
|
||||
}
|
||||
ColumnLayout {
|
||||
id: messageLayout
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignTop
|
||||
Layout.topMargin: 4
|
||||
RowLayout {
|
||||
StatusSmartIdenticon {
|
||||
id: profileImage
|
||||
Layout.alignment: Qt.AlignTop
|
||||
image: replyDetails.profileImage
|
||||
name: replyDetails.displayName
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
onClicked: replyProfileClicked()
|
||||
}
|
||||
}
|
||||
TextEdit {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Theme.palette.baseColor1
|
||||
selectionColor: Theme.palette.primaryColor3
|
||||
selectedTextColor: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
font.weight: Font.Medium
|
||||
selectByMouse: true
|
||||
readOnly: true
|
||||
text: replyDetails.displayName
|
||||
}
|
||||
}
|
||||
StatusTextMessage {
|
||||
Layout.fillWidth: true
|
||||
textField.text: replyDetails.messageText
|
||||
textField.font.pixelSize: 13
|
||||
textField.color: Theme.palette.baseColor1
|
||||
textField.height: 18
|
||||
clip: true
|
||||
visible: !!replyDetails.messageText
|
||||
}
|
||||
StatusImageMessage {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: imageAlias.paintedHeight
|
||||
imageWidth: 56
|
||||
source: replyDetails.contentType === StatusMessage.ContentType.Image ? replyDetails.messageContent : ""
|
||||
visible: replyDetails.contentType === StatusMessage.ContentType.Image
|
||||
shapeType: StatusImageMessage.ShapeType.ROUNDED
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 48
|
||||
Layout.alignment: Qt.AlignLeft
|
||||
visible: replyDetails.contentType === StatusMessage.ContentType.Sticker
|
||||
StatusSticker {
|
||||
image.width: 48
|
||||
image.height: 48
|
||||
image.source: replyDetails.messageContent
|
||||
}
|
||||
}
|
||||
Item {
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 22
|
||||
visible: replyDetails.contentType === StatusMessage.ContentType.Audio
|
||||
StatusAudioMessage {
|
||||
id: audioMessage
|
||||
anchors.left: parent.left
|
||||
width: 125
|
||||
height: 22
|
||||
isPreview: true
|
||||
audioSource: replyDetails.messageContent
|
||||
audioMessageInfoText: chatReply.audioMessageInfoText
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Layouts 1.14
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Loader {
|
||||
property string pinnedMsgInfoText: ""
|
||||
property string pinnedBy: ""
|
||||
|
||||
active: visible
|
||||
|
||||
sourceComponent: Rectangle {
|
||||
height: 24
|
||||
width: layout.width + 16
|
||||
color: Theme.palette.pinColor2
|
||||
radius: 12
|
||||
RowLayout {
|
||||
id: layout
|
||||
anchors.centerIn: parent
|
||||
StatusIcon {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.preferredWidth: 16
|
||||
Layout.preferredHeight: 16
|
||||
color: Theme.palette.pinColor1
|
||||
icon: "tiny/pin"
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.leftMargin: -4
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
text: pinnedMsgInfoText
|
||||
}
|
||||
StatusBaseText {
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
Layout.leftMargin: -4
|
||||
color: Theme.palette.directColor1
|
||||
font.pixelSize: 13
|
||||
font.weight: Font.Medium
|
||||
text: pinnedBy
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,125 +0,0 @@
|
||||
import QtQuick 2.3
|
||||
import QtGraphicalEffects 1.13
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Loader {
|
||||
id: statusSticker
|
||||
|
||||
property bool noHover: false
|
||||
property bool noMouseArea: false
|
||||
property StatusImageSettings image: StatusImageSettings {
|
||||
width: 140
|
||||
height: 140
|
||||
}
|
||||
|
||||
signal loaded()
|
||||
signal clicked()
|
||||
|
||||
active: visible
|
||||
|
||||
sourceComponent: Rectangle {
|
||||
id: root
|
||||
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 16
|
||||
|
||||
width: image.width
|
||||
height: image.height
|
||||
|
||||
function reload() {
|
||||
// From the documentation (https://doc.qt.io/qt-5/qml-qtquick-image.html#sourceSize-prop)
|
||||
// Note: Changing this property dynamically causes the image source to
|
||||
// be reloaded, potentially even from the network, if it is not in the
|
||||
// disk cache.
|
||||
const oldSource = sticker.source
|
||||
sticker.cache = false
|
||||
sticker.sourceSize.width += 1
|
||||
sticker.sourceSize.width -= 1
|
||||
sticker.cache = true
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: loader
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
|
||||
Image {
|
||||
id: sticker
|
||||
anchors.fill: parent
|
||||
horizontalAlignment: Image.AlignHCenter
|
||||
verticalAlignment: Image.AlignVCenter
|
||||
cache: true
|
||||
source: image.source
|
||||
|
||||
onStatusChanged: {
|
||||
if (status === Image.Ready) {
|
||||
statusSticker.loaded()
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
enabled: !noMouseArea && (sticker.status === Image.Ready)
|
||||
cursorShape: noHover ? Qt.ArrowCursor : Qt.PointingHandCursor
|
||||
anchors.fill: parent
|
||||
onClicked: statusSticker.clicked()
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: loadingIndicator
|
||||
StatusLoadingIndicator {
|
||||
width: 24
|
||||
height: 24
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: reload
|
||||
StatusIcon {
|
||||
icon: "refresh"
|
||||
color: Theme.palette.directColor1
|
||||
mipmap: false
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
onClicked: root.reload()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "loading"
|
||||
when: sticker.status === Image.Loading
|
||||
PropertyChanges {
|
||||
target: loader
|
||||
sourceComponent: loadingIndicator
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "error"
|
||||
when: sticker.status === Image.Error
|
||||
PropertyChanges {
|
||||
target: loader
|
||||
sourceComponent: reload
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "ready"
|
||||
when: sticker.status === Image.Ready
|
||||
PropertyChanges {
|
||||
target: root
|
||||
color: "transparent"
|
||||
}
|
||||
PropertyChanges {
|
||||
target: loader
|
||||
sourceComponent: undefined
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Item {
|
||||
id: textMessage
|
||||
|
||||
property int contentType: 0
|
||||
property alias textField: chatText
|
||||
|
||||
signal linkActivated(url link)
|
||||
|
||||
implicitHeight: showMoreLoader.active ? childrenRect.height : chatText.height
|
||||
|
||||
QtObject {
|
||||
id: _internal
|
||||
property bool readMore: false
|
||||
property bool veryLongChatText: chatText.length > 1000
|
||||
}
|
||||
|
||||
TextEdit {
|
||||
id: chatText
|
||||
visible: !showMoreLoader.active || _internal.readMore
|
||||
selectedTextColor: Theme.palette.directColor1
|
||||
selectionColor: Theme.palette.primaryColor3
|
||||
color: Theme.palette.directColor1
|
||||
font.family: Theme.palette.baseFont.name
|
||||
font.pixelSize: 15
|
||||
textFormat: Text.RichText
|
||||
wrapMode: Text.Wrap
|
||||
readOnly: true
|
||||
selectByMouse: true
|
||||
height: _internal.veryLongChatText && !_internal.readMore ? Math.min(implicitHeight, 200) : implicitHeight
|
||||
width: parent.width
|
||||
clip: height < implicitHeight
|
||||
onLinkActivated: textMessage.linkActivated(link)
|
||||
onLinkHovered: {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: mask
|
||||
anchors.fill: chatText
|
||||
active: showMoreLoader.active
|
||||
visible: false
|
||||
sourceComponent: LinearGradient {
|
||||
start: Qt.point(0, 0)
|
||||
end: Qt.point(0, chatText.height)
|
||||
gradient: Gradient {
|
||||
GradientStop { position: 0.0; color: "white" }
|
||||
GradientStop { position: 0.85; color: "white" }
|
||||
GradientStop { position: 1; color: "transparent" }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: opMask
|
||||
active: showMoreLoader.active && !_internal.readMore
|
||||
anchors.fill: chatText
|
||||
sourceComponent: OpacityMask {
|
||||
source: chatText
|
||||
maskSource: mask
|
||||
}
|
||||
}
|
||||
|
||||
Loader {
|
||||
id: showMoreLoader
|
||||
active: _internal.veryLongChatText
|
||||
anchors.top: chatText.bottom
|
||||
anchors.topMargin: -10
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
sourceComponent: StatusRoundButton {
|
||||
implicitWidth: 24
|
||||
implicitHeight: 24
|
||||
type: StatusRoundButton.Type.Secondary
|
||||
icon.name: _internal.readMore ? "chevron-up": "chevron-down"
|
||||
onClicked: {
|
||||
_internal.readMore = !_internal.readMore
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
StatusBaseText {
|
||||
id: timestampLabe;
|
||||
property alias tooltip: tooltip
|
||||
|
||||
Layout.alignment: Qt.AlignVCenter
|
||||
color: Theme.palette.baseColor1
|
||||
font.pixelSize: 10
|
||||
visible: !!text
|
||||
StatusToolTip {
|
||||
id: tooltip
|
||||
visible: hhandler.hovered && !!text
|
||||
maxWidth: 350
|
||||
}
|
||||
HoverHandler {
|
||||
id: hhandler
|
||||
}
|
||||
}
|
||||
@@ -10,24 +10,16 @@ StatusChatListCategoryItem 0.1 StatusChatListCategoryItem.qml
|
||||
StatusChatListAndCategories 0.1 StatusChatListAndCategories.qml
|
||||
StatusChatToolBar 0.1 StatusChatToolBar.qml
|
||||
StatusContactRequestsIndicatorListItem 0.1 StatusContactRequestsIndicatorListItem.qml
|
||||
StatusContactVerificationIcons 0.1 StatusContactVerificationIcons.qml
|
||||
StatusDescriptionListItem 0.1 StatusDescriptionListItem.qml
|
||||
StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
|
||||
StatusListItem 0.1 StatusListItem.qml
|
||||
StatusListSectionHeadline 0.1 StatusListSectionHeadline.qml
|
||||
StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
|
||||
StatusMemberListItem 0.1 StatusMemberListItem.qml
|
||||
StatusNavigationListItem 0.1 StatusNavigationListItem.qml
|
||||
StatusNavigationPanelHeadline 0.1 StatusNavigationPanelHeadline.qml
|
||||
StatusRoundIcon 0.1 StatusRoundIcon.qml
|
||||
StatusRoundedImage 0.1 StatusRoundedImage.qml
|
||||
StatusMacWindowButtons 0.1 StatusMacWindowButtons.qml
|
||||
StatusListItemBadge 0.1 StatusListItemBadge.qml
|
||||
StatusListItemTag 0.1 StatusListItemTag.qml
|
||||
StatusExpandableItem 0.1 StatusExpandableItem.qml
|
||||
StatusSmartIdenticon 0.1 StatusSmartIdenticon.qml
|
||||
StatusMessage 0.1 StatusMessage.qml
|
||||
StatusMessageDetails 0.1 StatusMessageDetails.qml
|
||||
StatusTagSelector 0.1 StatusTagSelector.qml
|
||||
StatusToastMessage 0.1 StatusToastMessage.qml
|
||||
StatusWizardStepper 0.1 StatusWizardStepper.qml
|
||||
|
||||
@@ -46,7 +46,7 @@ Item {
|
||||
if (showBalanceForAssetSymbol == "" || minRequiredAssetBalance == 0 || !assetFound) {
|
||||
return root.isValid
|
||||
}
|
||||
root.isValid = assetFound.balance >= minRequiredAssetBalance
|
||||
root.isValid = assetFound.value >= minRequiredAssetBalance
|
||||
return root.isValid
|
||||
}
|
||||
|
||||
@@ -54,8 +54,8 @@ Item {
|
||||
if (!selectedAccount) {
|
||||
return
|
||||
}
|
||||
if (selectedAccount.color) {
|
||||
selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
|
||||
if (selectedAccount.iconColor) {
|
||||
selectedIconImg.color = Utils.getThemeAccountColor(selectedAccount.iconColor, Theme.palette.accountColors) || Theme.palette.accountColors[0]
|
||||
}
|
||||
if (selectedAccount.name) {
|
||||
selectedTextField.text = selectedAccount.name
|
||||
@@ -63,8 +63,8 @@ Item {
|
||||
if (selectedAccount.address) {
|
||||
textSelectedAddress.text = selectedAccount.address + " •"
|
||||
}
|
||||
if (selectedAccount.currencyBalance) {
|
||||
textSelectedAddressFiatBalance.text = selectedAccount.currencyBalance + " " + currency.toUpperCase()
|
||||
if (selectedAccount.fiatBalance) {
|
||||
textSelectedAddressFiatBalance.text = selectedAccount.fiatBalance + " " + currency.toUpperCase()
|
||||
}
|
||||
if (selectedAccount.assets && showBalanceForAssetSymbol) {
|
||||
assetFound = Utils.findAssetBySymbol(selectedAccount.assets, showBalanceForAssetSymbol)
|
||||
@@ -82,7 +82,7 @@ Item {
|
||||
if (!assetFound) {
|
||||
return
|
||||
}
|
||||
txtAssetBalance.text = root.assetBalanceTextFn(assetFound.balance)
|
||||
txtAssetBalance.text = root.assetBalanceTextFn(assetFound.value)
|
||||
txtAssetSymbol.text = " " + assetFound.symbol
|
||||
}
|
||||
|
||||
@@ -90,11 +90,11 @@ Item {
|
||||
id: txtAssetBalance
|
||||
visible: root.assetFound !== undefined
|
||||
anchors.bottom: select.top
|
||||
anchors.bottomMargin: -18
|
||||
anchors.bottomMargin: -18
|
||||
anchors.right: txtAssetSymbol.left
|
||||
anchors.left: select.left
|
||||
anchors.leftMargin: select.width / 2.5
|
||||
|
||||
|
||||
color: !root.isValid ? Theme.palette.dangerColor1 : Theme.palette.baseColor1
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: 13
|
||||
@@ -194,7 +194,7 @@ Item {
|
||||
|
||||
Component.onCompleted: {
|
||||
if (!root.selectedAccount && isFirstItem) {
|
||||
root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
|
||||
root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -208,7 +208,7 @@ Item {
|
||||
width: 20
|
||||
height: 20
|
||||
icon: "filled-account"
|
||||
color: Utils.getThemeAccountColor(model.color, Theme.palette.accountColors) || Theme.palette.accountColors[0]
|
||||
color: Utils.getThemeAccountColor(iconColor, Theme.palette.accountColors) || Theme.palette.accountColors[0]
|
||||
}
|
||||
|
||||
Column {
|
||||
@@ -221,7 +221,7 @@ Item {
|
||||
|
||||
StatusBaseText {
|
||||
id: accountName
|
||||
text: model.name
|
||||
text: name
|
||||
elide: Text.ElideRight
|
||||
font.pixelSize: 15
|
||||
anchors.left: parent.left
|
||||
@@ -247,7 +247,7 @@ Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 15
|
||||
height: 22
|
||||
text: currencyBalance
|
||||
text: fiatBalance
|
||||
color: Theme.palette.directColor1
|
||||
}
|
||||
StatusBaseText {
|
||||
@@ -267,7 +267,7 @@ Item {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: itemContainer
|
||||
onClicked: {
|
||||
root.selectedAccount = { address, name, color: model.color, assets, currencyBalance }
|
||||
root.selectedAccount = { address, name, iconColor, assets, fiatBalance }
|
||||
select.selectMenu.close()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,12 +12,17 @@ Item {
|
||||
id: root
|
||||
property var assets
|
||||
property var selectedAsset
|
||||
property string defaultToken: ""
|
||||
property var tokenAssetSourceFn: function (symbol) {
|
||||
return ""
|
||||
}
|
||||
// Define this in the usage to get balance in currency selected by user
|
||||
property var getCurrencyBalanceString: function (currencyBalance) { return "" }
|
||||
property var assetGetterFn: function (index, field) {
|
||||
// This is merely to make the component work with nim model data
|
||||
// as well as static QML ListModel data
|
||||
if (typeof assets.get === "function") {
|
||||
return assets.get(index)[field]
|
||||
}
|
||||
return assets.rowData(index, field)
|
||||
}
|
||||
implicitWidth: 86
|
||||
implicitHeight: 32
|
||||
|
||||
@@ -33,6 +38,20 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
onAssetsChanged: {
|
||||
if (!assets) {
|
||||
return
|
||||
}
|
||||
selectedAsset = {
|
||||
name: assetGetterFn(0, "name"),
|
||||
symbol: assetGetterFn(0, "symbol"),
|
||||
value: assetGetterFn(0, "value"),
|
||||
fiatBalanceDisplay: assetGetterFn(0, "fiatBalanceDisplay"),
|
||||
address: assetGetterFn(0, "address"),
|
||||
fiatBalance: assetGetterFn(0, "fiatBalance")
|
||||
}
|
||||
}
|
||||
|
||||
StatusSelect {
|
||||
id: select
|
||||
width: parent.width
|
||||
@@ -52,11 +71,6 @@ Item {
|
||||
width: 24
|
||||
height: 24
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
image.onStatusChanged: {
|
||||
if (iconImg.image.status === Image.Error) {
|
||||
iconImg.image.source = defaultToken
|
||||
}
|
||||
}
|
||||
}
|
||||
StatusBaseText {
|
||||
id: selectedTextField
|
||||
@@ -87,11 +101,6 @@ Item {
|
||||
anchors.leftMargin: 16
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
image.source: root.tokenAssetSourceFn(symbol.toUpperCase())
|
||||
image.onStatusChanged: {
|
||||
if (iconImg.image.status === Image.Error) {
|
||||
iconImg.image.source = defaultToken
|
||||
}
|
||||
}
|
||||
}
|
||||
Column {
|
||||
anchors.left: iconImg.right
|
||||
@@ -116,28 +125,23 @@ Item {
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
text: parseFloat(balance).toFixed(4) + " " + symbol
|
||||
text: parseFloat(value).toFixed(4) + " " + symbol
|
||||
}
|
||||
StatusBaseText {
|
||||
font.pixelSize: 15
|
||||
anchors.right: parent.right
|
||||
text: getCurrencyBalanceString(currencyBalance)
|
||||
text: fiatBalanceDisplay.toUpperCase()
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
}
|
||||
background: Rectangle {
|
||||
color: itemContainer.highlighted ? Theme.palette.statusSelect.menuItemHoverBackgroundColor : Theme.palette.statusSelect.menuItemBackgroundColor
|
||||
}
|
||||
Component.onCompleted: {
|
||||
if(index === 0 ) {
|
||||
selectedAsset = { name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
|
||||
}
|
||||
}
|
||||
MouseArea {
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
anchors.fill: itemContainer
|
||||
onClicked: {
|
||||
selectedAsset = {name: name, symbol: symbol, address: address, balance: balance, currencyBalance: currencyBalance}
|
||||
root.selectedAsset = { address, name, value, symbol, fiatBalance, fiatBalanceDisplay }
|
||||
select.selectMenu.close()
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,89 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
Column {
|
||||
id: statusBanner
|
||||
width: parent.width
|
||||
|
||||
property string statusText
|
||||
property int type: StatusBanner.Type.Info
|
||||
property int textPixels: 15
|
||||
property int statusBannerHeight: 38
|
||||
|
||||
// "private" properties
|
||||
QtObject {
|
||||
id: d
|
||||
property color backgroundColor
|
||||
property color bordersColor
|
||||
property color fontColor
|
||||
}
|
||||
|
||||
enum Type {
|
||||
Info, // 0
|
||||
Danger, // 1
|
||||
Success, // 2
|
||||
Warning // 3
|
||||
}
|
||||
|
||||
// Component definition
|
||||
Rectangle {
|
||||
id: topDiv
|
||||
color: d.bordersColor
|
||||
height: 1
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: box
|
||||
width: parent.width
|
||||
height: statusBanner.statusBannerHeight
|
||||
color: d.backgroundColor
|
||||
|
||||
StatusBaseText {
|
||||
id: statusTxt
|
||||
anchors.fill: parent
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: statusBanner.textPixels
|
||||
text: statusBanner.statusText
|
||||
color: d.fontColor
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: bottomDiv
|
||||
color: d.bordersColor
|
||||
height: 1
|
||||
width: parent.width
|
||||
}
|
||||
|
||||
// Behavior
|
||||
states: [
|
||||
State {
|
||||
when: statusBanner.type === StatusBanner.Type.Info
|
||||
PropertyChanges { target: d; backgroundColor: Theme.palette.primaryColor3}
|
||||
PropertyChanges { target: d; bordersColor: Theme.palette.primaryColor2}
|
||||
PropertyChanges { target: d; fontColor: Theme.palette.primaryColor1}
|
||||
},
|
||||
State {
|
||||
when: statusBanner.type === StatusBanner.Type.Danger
|
||||
PropertyChanges { target: d; backgroundColor: Theme.palette.dangerColor3}
|
||||
PropertyChanges { target: d; bordersColor: Theme.palette.dangerColor2}
|
||||
PropertyChanges { target: d; fontColor: Theme.palette.dangerColor1}
|
||||
},
|
||||
State {
|
||||
when: statusBanner.type === StatusBanner.Type.Success
|
||||
PropertyChanges { target: d; backgroundColor: Theme.palette.successColor2}
|
||||
PropertyChanges { target: d; bordersColor: Theme.palette.successColor2}
|
||||
PropertyChanges { target: d; fontColor: Theme.palette.successColor1}
|
||||
},
|
||||
State {
|
||||
when: statusBanner.type === StatusBanner.Type.Warning
|
||||
PropertyChanges { target: d; backgroundColor: Theme.palette.pinColor3}
|
||||
PropertyChanges { target: d; bordersColor: Theme.palette.pinColor2}
|
||||
PropertyChanges { target: d; fontColor: Theme.palette.pinColor1}
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -1,15 +1,14 @@
|
||||
import QtQuick 2.14
|
||||
|
||||
import QtQuick.Controls 2.14 as QC
|
||||
import QtQuick.Layouts 1.14
|
||||
|
||||
import StatusQ.Components 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
|
||||
Item {
|
||||
id: root
|
||||
id: statusBaseInput
|
||||
|
||||
property bool multiline: false
|
||||
|
||||
@@ -25,7 +24,6 @@ Item {
|
||||
|
||||
property alias edit: edit
|
||||
property alias text: edit.text
|
||||
property alias background: background
|
||||
|
||||
property alias color: edit.color
|
||||
property alias font: edit.font
|
||||
@@ -37,11 +35,10 @@ Item {
|
||||
property alias placeholderTextColor: placeholder.color
|
||||
property alias placeholderFont: placeholder.font
|
||||
|
||||
property real leftPadding: leftComponentLoader.item ? 8 : 16
|
||||
property real leftPadding: 16
|
||||
property real rightPadding: 16
|
||||
property real topPadding: 12
|
||||
property real bottomPadding: 12
|
||||
property var tabNavItem: null
|
||||
|
||||
property real minimumHeight: 0
|
||||
property real maximumHeight: 0
|
||||
@@ -52,64 +49,56 @@ Item {
|
||||
property bool dirty: false
|
||||
property bool pending: false
|
||||
property bool leftIcon: true
|
||||
property bool isIconSelectable: false
|
||||
property bool showBackground: true
|
||||
|
||||
property StatusIconSettings icon: StatusIconSettings {
|
||||
width: 24
|
||||
height: 24
|
||||
name: ""
|
||||
color: Theme.palette.baseColor1
|
||||
emoji: ""
|
||||
letterSize: emoji ? 11 : 14
|
||||
background: StatusIconBackgroundSettings {
|
||||
width: 30
|
||||
height: 30
|
||||
color: Theme.palette.indirectColor1
|
||||
}
|
||||
|
||||
property Item component
|
||||
|
||||
onClearableChanged: {
|
||||
if (clearable && !component) {
|
||||
clearButtonLoader.active = true
|
||||
clearButtonLoader.parent = statusBaseInputComponentSlot
|
||||
} else {
|
||||
clearButtonLoader.active = false
|
||||
}
|
||||
}
|
||||
|
||||
property Component leftComponent
|
||||
property Component rightComponent
|
||||
|
||||
signal iconClicked
|
||||
signal keyPressed(var event)
|
||||
signal editClicked()
|
||||
onComponentChanged: {
|
||||
if (!!component) {
|
||||
component.parent = statusBaseInputComponentSlot
|
||||
}
|
||||
}
|
||||
|
||||
implicitWidth: 448
|
||||
implicitHeight: multiline ? Math.min(Math.max(
|
||||
(edit.implicitHeight + topPadding + bottomPadding),
|
||||
44, root.minimumHeight), root.maximumHeight) : 44
|
||||
implicitHeight: multiline ? Math.max((edit.implicitHeight + topPadding + bottomPadding), 44) : 44
|
||||
|
||||
Rectangle {
|
||||
id: background
|
||||
width: parent.width
|
||||
height: maximumHeight != 0 ? Math.min(
|
||||
minimumHeight
|
||||
!= 0 ? Math.max(
|
||||
root.implicitHeight,
|
||||
minimumHeight) : root.implicitHeight,
|
||||
maximumHeight) : parent.height
|
||||
color: root.showBackground ? Theme.palette.baseColor2
|
||||
: "transparent"
|
||||
minimumHeight != 0 ? Math.max(statusBaseInput.implicitHeight, minimumHeight)
|
||||
: statusBaseInput.implicitHeight, maximumHeight) : parent.height
|
||||
color: Theme.palette.baseColor2
|
||||
radius: 8
|
||||
|
||||
clip: true
|
||||
|
||||
border.width: 1
|
||||
border.color: {
|
||||
if (!root.showBackground) {
|
||||
return "transparent"
|
||||
}
|
||||
if (!root.valid && root.dirty) {
|
||||
return Theme.palette.dangerColor1
|
||||
if (!statusBaseInput.valid && statusBaseInput.dirty) {
|
||||
return Theme.palette.dangerColor1;
|
||||
}
|
||||
if (edit.activeFocus) {
|
||||
return Theme.palette.primaryColor1
|
||||
return Theme.palette.primaryColor1;
|
||||
}
|
||||
return sensor.containsMouse ? Theme.palette.primaryColor2 : "transparent"
|
||||
}
|
||||
|
||||
|
||||
MouseArea {
|
||||
id: sensor
|
||||
enabled: !edit.activeFocus
|
||||
@@ -118,138 +107,147 @@ Item {
|
||||
cursorShape: Qt.IBeamCursor
|
||||
onClicked: {
|
||||
edit.forceActiveFocus()
|
||||
root.editClicked()
|
||||
}
|
||||
RowLayout {
|
||||
anchors {
|
||||
fill: parent
|
||||
leftMargin: root.leftPadding
|
||||
rightMargin: root.rightPadding
|
||||
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
anchors.topMargin: 10
|
||||
anchors.left: statusBaseInput.leftIcon ? parent.left : undefined
|
||||
anchors.right: !statusBaseInput.leftIcon ? parent.right : undefined
|
||||
anchors.leftMargin: 10
|
||||
anchors.rightMargin: 10
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
icon: statusBaseInput.icon.name
|
||||
width: statusBaseInput.icon.width
|
||||
height: statusBaseInput.icon.height
|
||||
color: statusBaseInput.icon.color
|
||||
visible: !!statusBaseInput.icon.name
|
||||
}
|
||||
|
||||
Flickable {
|
||||
id: flick
|
||||
anchors.top: parent.top
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.left: (statusIcon.visible && statusBaseInput.leftIcon) ?
|
||||
statusIcon.right : parent.left
|
||||
anchors.right: {
|
||||
if (!!statusBaseInput.component) {
|
||||
return statusBaseInputComponentSlot.left
|
||||
}
|
||||
return statusIcon.visible && !statusBaseInput.leftIcon ? statusIcon.left : parent.right
|
||||
}
|
||||
|
||||
clip: true
|
||||
|
||||
Loader {
|
||||
id: leftComponentLoader
|
||||
sourceComponent: {
|
||||
if (root.leftComponent) return root.leftComponent
|
||||
if (!root.leftIcon) return undefined
|
||||
if (root.icon.emoji) return identiconComponent
|
||||
if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent
|
||||
return undefined
|
||||
}
|
||||
anchors.leftMargin: statusIcon.visible && statusBaseInput.leftIcon ? 8
|
||||
: statusBaseInput.leftPadding
|
||||
anchors.rightMargin: {
|
||||
return clearable ? clearButtonLoader.width + 12 :
|
||||
(statusIcon.visible && !leftIcon) || !!statusBaseInput.component ? 8 : 0
|
||||
}
|
||||
|
||||
Flickable {
|
||||
id: flick
|
||||
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Layout.topMargin: root.topPadding
|
||||
Layout.bottomMargin: root.bottomPadding
|
||||
|
||||
contentWidth: edit.paintedWidth
|
||||
contentHeight: edit.paintedHeight
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
QC.ScrollBar.vertical: QC.ScrollBar {
|
||||
interactive: multiline
|
||||
enabled: multiline
|
||||
}
|
||||
clip: true
|
||||
|
||||
function ensureVisible(r) {
|
||||
if (contentX >= r.x)
|
||||
contentX = r.x
|
||||
else if (contentX + width <= r.x + r.width)
|
||||
contentX = r.x + r.width - width
|
||||
if (contentY >= r.y)
|
||||
contentY = r.y
|
||||
else if (contentY + height <= r.y + r.height)
|
||||
contentY = r.y + r.height - height
|
||||
}
|
||||
|
||||
TextEdit {
|
||||
id: edit
|
||||
|
||||
property string previousText: text
|
||||
property var keyEvent
|
||||
|
||||
width: flick.width
|
||||
height: flick.height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
selectByMouse: true
|
||||
selectionColor: Theme.palette.primaryColor2
|
||||
selectedTextColor: color
|
||||
focus: true
|
||||
font.pixelSize: 15
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
wrapMode: root.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
|
||||
|
||||
Keys.onReturnPressed: event.accepted = !multiline
|
||||
Keys.onEnterPressed: event.accepted = !multiline
|
||||
Keys.forwardTo: [root]
|
||||
KeyNavigation.priority: !!root.tabNavItem ? KeyNavigation.BeforeItem : KeyNavigation.AfterItem
|
||||
KeyNavigation.tab: root.tabNavItem
|
||||
Keys.onPressed: {
|
||||
edit.keyEvent = event.key
|
||||
root.keyPressed(event);
|
||||
anchors.topMargin: statusBaseInput.topPadding
|
||||
anchors.bottomMargin: statusBaseInput.bottomPadding
|
||||
contentWidth: edit.paintedWidth
|
||||
contentHeight: edit.paintedHeight
|
||||
boundsBehavior: Flickable.StopAtBounds
|
||||
QC.ScrollBar.vertical: QC.ScrollBar { interactive: multiline; enabled: multiline }
|
||||
function ensureVisible(r) {
|
||||
if (contentX >= r.x)
|
||||
contentX = r.x;
|
||||
else if (contentX+width <= r.x+r.width)
|
||||
contentX = r.x+r.width-width;
|
||||
if (contentY >= r.y)
|
||||
contentY = r.y;
|
||||
else if (contentY+height <= r.y+r.height)
|
||||
contentY = r.y+r.height-height;
|
||||
}
|
||||
TextEdit {
|
||||
id: edit
|
||||
property string previousText: text
|
||||
width: flick.width
|
||||
height: flick.height
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
selectByMouse: true
|
||||
selectionColor: Theme.palette.primaryColor2
|
||||
selectedTextColor: color
|
||||
focus: true
|
||||
font.pixelSize: 15
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: Theme.palette.directColor1
|
||||
onCursorRectangleChanged: { flick.ensureVisible(cursorRectangle); }
|
||||
wrapMode: statusBaseInput.multiline ? Text.WrapAtWordBoundaryOrAnywhere : TextEdit.NoWrap
|
||||
onActiveFocusChanged: {
|
||||
if (statusBaseInput.pristine) {
|
||||
statusBaseInput.pristine = false
|
||||
}
|
||||
}
|
||||
|
||||
onCursorRectangleChanged: flick.ensureVisible(cursorRectangle)
|
||||
onActiveFocusChanged: if (root.pristine) root.pristine = false
|
||||
onTextChanged: {
|
||||
root.dirty = true
|
||||
if (root.maximumLength > 0) {
|
||||
if (text.length > root.maximumLength) {
|
||||
var cursor = cursorPosition
|
||||
text = previousText
|
||||
if (cursor > text.length) {
|
||||
cursorPosition = text.length
|
||||
} else {
|
||||
cursorPosition = cursor - 1
|
||||
}
|
||||
Keys.onReturnPressed: {
|
||||
if (multiline) {
|
||||
event.accepted = false
|
||||
} else {
|
||||
event.accepted = true
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onEnterPressed: {
|
||||
if (multiline) {
|
||||
event.accepted = false
|
||||
} else {
|
||||
event.accepted = true
|
||||
}
|
||||
}
|
||||
|
||||
Keys.forwardTo: [statusBaseInput]
|
||||
|
||||
onTextChanged: {
|
||||
statusBaseInput.dirty = true
|
||||
if (statusBaseInput.maximumLength > 0) {
|
||||
if (text.length > statusBaseInput.maximumLength) {
|
||||
var cursor = cursorPosition;
|
||||
text = previousText;
|
||||
if (cursor > text.length) {
|
||||
cursorPosition = text.length;
|
||||
} else {
|
||||
cursorPosition = cursor-1;
|
||||
}
|
||||
previousText = text
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
id: placeholder
|
||||
visible: (edit.text.length === 0)
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: root.rightPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 15
|
||||
elide: StatusBaseText.ElideRight
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: root.enabled ? Theme.palette.baseColor1 : Theme.palette.directColor6
|
||||
previousText = text
|
||||
}
|
||||
}
|
||||
} // Flickable
|
||||
|
||||
Loader {
|
||||
sourceComponent: {
|
||||
if (root.rightComponent) return root.rightComponent
|
||||
if (root.clearable) return clearButton
|
||||
if (root.leftIcon) return undefined
|
||||
if (root.icon.emoji) return identiconComponent
|
||||
if (root.icon.name) return isIconSelectable ? identiconComponent : iconComponent
|
||||
return undefined
|
||||
StatusBaseText {
|
||||
id: placeholder
|
||||
visible: (edit.text.length === 0)
|
||||
anchors.left: parent.left
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: statusBaseInput.rightPadding
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
font.pixelSize: 15
|
||||
elide: StatusBaseText.ElideRight
|
||||
font.family: Theme.palette.baseFont.name
|
||||
color: statusBaseInput.enabled ? Theme.palette.baseColor1 :
|
||||
Theme.palette.directColor6
|
||||
}
|
||||
}
|
||||
|
||||
} // Flickable
|
||||
|
||||
Item {
|
||||
id: statusBaseInputComponentSlot
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 12
|
||||
width: childrenRect.width
|
||||
height: childrenRect.height
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
}
|
||||
}
|
||||
} // Rectangle
|
||||
|
||||
|
||||
Component {
|
||||
id: clearButton
|
||||
|
||||
StatusFlatRoundButton {
|
||||
visible: edit.text.length != 0 && root.clearable && !root.multiline
|
||||
&& edit.activeFocus
|
||||
Loader {
|
||||
id: clearButtonLoader
|
||||
sourceComponent: StatusFlatRoundButton {
|
||||
id: clearButton
|
||||
visible: edit.text.length != 0 &&
|
||||
statusBaseInput.clearable &&
|
||||
!statusBaseInput.multiline &&
|
||||
edit.activeFocus
|
||||
type: StatusFlatRoundButton.Type.Secondary
|
||||
width: 24
|
||||
height: 24
|
||||
@@ -263,41 +261,5 @@ Item {
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: identiconComponent
|
||||
|
||||
StatusSmartIdenticon {
|
||||
id: identicon
|
||||
|
||||
icon.width: !root.icon.emoji ? 20 : 30
|
||||
icon.height: !root.icon.emoji ? 20 : 30
|
||||
icon.background: root.icon.background
|
||||
icon.color: root.icon.color
|
||||
icon.letterSize: root.icon.letterSize
|
||||
icon.emoji: root.icon.emoji
|
||||
icon.name: !root.icon.emoji ? root.icon.name : ""
|
||||
|
||||
MouseArea {
|
||||
cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
acceptedButtons: Qt.LeftButton | Qt.RightButton
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
enabled: identicon.visible
|
||||
onClicked: root.iconClicked()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Component {
|
||||
id: iconComponent
|
||||
|
||||
StatusIcon {
|
||||
id: statusIcon
|
||||
|
||||
icon: root.icon.name
|
||||
width: root.icon.width
|
||||
height: root.icon.height
|
||||
color: root.icon.color
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,32 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
RadioButton {
|
||||
id: control
|
||||
|
||||
property string radioButtonColor: ""
|
||||
property string selectionColor: StatusColors.colors['white']
|
||||
|
||||
implicitWidth: 48
|
||||
implicitHeight: 48
|
||||
|
||||
indicator: Rectangle {
|
||||
implicitWidth: 48
|
||||
implicitHeight: 48
|
||||
radius: width/2
|
||||
color: radioButtonColor
|
||||
|
||||
Rectangle {
|
||||
width: 20
|
||||
height: 20
|
||||
radius: width/2
|
||||
color: selectionColor
|
||||
border.color: StatusColors.colors['grey3']
|
||||
visible: control.checked
|
||||
anchors.centerIn: parent
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +0,0 @@
|
||||
import QtQuick 2.13
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
import StatusQ.Core.Theme 0.1
|
||||
|
||||
import "./"
|
||||
|
||||
Column {
|
||||
id: root
|
||||
|
||||
property alias titleText: title.text
|
||||
property alias title: title
|
||||
|
||||
property int selectedColorIndex: 0
|
||||
property string selectedColor: ""
|
||||
property var model: [StatusColors.colors['black'],
|
||||
StatusColors.colors['grey'],
|
||||
StatusColors.colors['blue2'],
|
||||
StatusColors.colors['purple'],
|
||||
StatusColors.colors['cyan'],
|
||||
StatusColors.colors['violet'],
|
||||
StatusColors.colors['red2'],
|
||||
StatusColors.colors['yellow'],
|
||||
StatusColors.colors['green2'],
|
||||
StatusColors.colors['moss'],
|
||||
StatusColors.colors['brown'],
|
||||
StatusColors.colors['brown2']]
|
||||
|
||||
spacing: 16
|
||||
|
||||
StatusBaseText {
|
||||
id: title
|
||||
verticalAlignment: Text.AlignVCenter
|
||||
font.pixelSize: 13
|
||||
color: Theme.palette.baseColor1
|
||||
}
|
||||
|
||||
Grid {
|
||||
columns: 6
|
||||
rowSpacing: 16
|
||||
columnSpacing: 32
|
||||
Repeater {
|
||||
model: root.model
|
||||
delegate: StatusColorRadioButton {
|
||||
checked: index === selectedColorIndex
|
||||
radioButtonColor: root.model[index] || "transparent"
|
||||
onCheckedChanged: {
|
||||
if(checked) {
|
||||
selectedColorIndex = index
|
||||
selectedColor = root.model[index]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
import QtQuick 2.0
|
||||
import QtQuick.Layouts 1.0
|
||||
|
||||
import StatusQ.Core 0.1
|
||||
/*!
|
||||
\qmltype StatusIdenticonRing
|
||||
\inherits Item
|
||||
\inqmlmodule StatusQ.Controls
|
||||
\since StatusQ.Controls 0.1
|
||||
\brief It provides lines wrapped into a ring around another component like avatars.
|
||||
|
||||
The \c StatusIdenticonRing item displays lines wrapped into a ring. The line is rendered clockwise.
|
||||
|
||||
N segments and M distinctive colors compose identicon lines.
|
||||
|
||||
Example of how the component looks like:
|
||||
\image status_identicon_ring.png
|
||||
|
||||
Example of how to use it:
|
||||
|
||||
\qml
|
||||
StatusIdenticonRing {
|
||||
anchors.fill: parent
|
||||
settings: StatusIdenticonRingSettings {
|
||||
initalAngleRad: 0
|
||||
ringPxSize: 1.5
|
||||
ringSpecModel: [ ListElement {colorId: 0; segmentLength: 1},
|
||||
ListElement {colorId: 28; segmentLength: 1},
|
||||
ListElement {colorId: 31; segmentLength: 1},
|
||||
ListElement {colorId: 22; segmentLength: 4},
|
||||
ListElement {colorId: 28; segmentLength: 3},
|
||||
ListElement {colorId: 27; segmentLength: 5},
|
||||
ListElement {colorId: 7; segmentLength: 5},
|
||||
ListElement {colorId: 13; segmentLength: 1},
|
||||
ListElement {colorId: 25; segmentLength: 4}]
|
||||
distinctiveColors: ["#000000", "#726F6F", "#C4C4C4",
|
||||
"#E7E7E7", "#FFFFFF", "#00FF00",
|
||||
"#009800", "#B8FFBB", "#FFC413",
|
||||
"#9F5947", "#FFFF00", "#A8AC00",
|
||||
"#FFFFB0", "#FF5733", "#FF0000",
|
||||
"#9A0000", "#FF9D9D", "#FF0099",
|
||||
"#C80078", "#FF00FF", "#900090",
|
||||
"#FFB0FF", "#9E00FF", "#0000FF",
|
||||
"#000086", "#9B81FF", "#3FAEF9",
|
||||
"#9A6600", "#00FFFF", "#008694",
|
||||
"#C2FFFF", "#00F0B6"]
|
||||
}
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
|
||||
/*!
|
||||
\qmlproperty StatusIdenticonRingSettings StatusIdenticonRing::settings
|
||||
This property holds a set of settings for building the ring.
|
||||
*/
|
||||
property StatusIdenticonRingSettings settings: StatusIdenticonRingSettings {
|
||||
initalAngleRad: 0
|
||||
ringPxSize: 1.5
|
||||
}
|
||||
|
||||
visible: settings.ringSpecModel !== undefined
|
||||
|
||||
Loader {
|
||||
anchors.fill: parent
|
||||
|
||||
active: root.visible
|
||||
|
||||
sourceComponent: Canvas {
|
||||
function printArcSegment(context, xPos, yPos, radius, color, startAngle, arcAngleLen, lineWidth) {
|
||||
context.beginPath()
|
||||
context.arc(xPos, yPos, radius, startAngle, startAngle + arcAngleLen, false/*anticlockwise*/)
|
||||
context.strokeStyle = color
|
||||
context.lineWidth = lineWidth
|
||||
context.stroke()
|
||||
}
|
||||
|
||||
function getSegmentsCount() {
|
||||
if (typeof settings.ringSpecModel.count !== "undefined") {
|
||||
return settings.ringSpecModel.count
|
||||
}
|
||||
return settings.ringSpecModel.length
|
||||
}
|
||||
|
||||
function getSegment(i) {
|
||||
if (typeof settings.ringSpecModel.count !== "undefined") {
|
||||
return settings.ringSpecModel.get(i)
|
||||
}
|
||||
return settings.ringSpecModel[i]
|
||||
}
|
||||
|
||||
function totalRingUnits() {
|
||||
var units = 0
|
||||
for (let i=0; i < getSegmentsCount(); i++) {
|
||||
const segment = getSegment(i)
|
||||
units += segment.segmentLength
|
||||
}
|
||||
return Math.max(1, units)
|
||||
}
|
||||
|
||||
|
||||
onPaint: {
|
||||
const context = getContext("2d")
|
||||
const radius = (height - settings.ringPxSize) / 2
|
||||
const xPos = width / 2
|
||||
const yPos = height / 2
|
||||
const unitRadLen = 2 * Math.PI / totalRingUnits()
|
||||
const segmentsCount = getSegmentsCount()
|
||||
let arcPos = settings.initalAngleRad
|
||||
context.reset()
|
||||
|
||||
if(settings.ringSpecModel) {
|
||||
for (let i=0; i < segmentsCount; i++) {
|
||||
const segment = getSegment(i)
|
||||
printArcSegment(context,
|
||||
xPos,
|
||||
yPos,
|
||||
radius,
|
||||
settings.distinctiveColors[segment.colorId],
|
||||
arcPos,
|
||||
segment.segmentLength * unitRadLen,
|
||||
settings.ringPxSize)
|
||||
arcPos += segment.segmentLength * unitRadLen
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,71 +6,27 @@ import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Controls 0.1
|
||||
import StatusQ.Controls.Validators 0.1
|
||||
|
||||
/*!
|
||||
\qmltype StatusInput
|
||||
\inherits Item
|
||||
\inqmlmodule StatusQ.Controls
|
||||
\since StatusQ.Controls 0.1
|
||||
\brief The StatusInput control provides a generic user text input
|
||||
|
||||
|
||||
|
||||
Example of how to use it:
|
||||
|
||||
\qml
|
||||
StatusInput {
|
||||
label: "Label"
|
||||
charLimit: 30
|
||||
errorMessage: "Input doesn't match validator"
|
||||
|
||||
input.clearable: true
|
||||
input.placeholderText: "Placeholder text"
|
||||
}
|
||||
\endqml
|
||||
|
||||
For a list of components available see StatusQ.
|
||||
*/
|
||||
Item {
|
||||
id: root
|
||||
implicitWidth: 480
|
||||
implicitHeight: (label.visible ?
|
||||
label.anchors.topMargin +
|
||||
label.height :
|
||||
charLimitLabel.visible ?
|
||||
charLimitLabel.anchors.topMargin +
|
||||
charLimitLabel.height :
|
||||
0) +
|
||||
statusBaseInput.anchors.topMargin +
|
||||
statusBaseInput.height +
|
||||
(errorMessage.visible ?
|
||||
errorMessage.anchors.topMargin +
|
||||
errorMessage.height :
|
||||
0) + 8
|
||||
|
||||
height: implicitHeight
|
||||
width: implicitWidth
|
||||
height: (label.visible ?
|
||||
label.anchors.topMargin +
|
||||
label.height :
|
||||
charLimitLabel.visible ?
|
||||
charLimitLabel.anchors.topMargin +
|
||||
charLimitLabel.height :
|
||||
0) +
|
||||
statusBaseInput.anchors.topMargin +
|
||||
statusBaseInput.height +
|
||||
(errorMessage.visible ?
|
||||
errorMessage.anchors.topMargin +
|
||||
errorMessage.height :
|
||||
0) + 8
|
||||
|
||||
property alias input: statusBaseInput
|
||||
property alias valid: statusBaseInput.valid
|
||||
property alias pending: statusBaseInput.pending
|
||||
property alias text: statusBaseInput.text
|
||||
|
||||
/*!
|
||||
\qmlproperty errorMessageCmp
|
||||
This property represents the errorMessage shown on statusInput in cases one of the validators fails
|
||||
|
||||
This can be used to control the error message's look and position from the outside.
|
||||
|
||||
Examples of usage
|
||||
|
||||
\qml
|
||||
StatusInput {
|
||||
errorMessageCmp.font.pixelSize: 15
|
||||
errorMessageCmp.font.weight: Font.Medium
|
||||
}
|
||||
\endqml
|
||||
*/
|
||||
property alias errorMessageCmp: errorMessage
|
||||
property string label: ""
|
||||
property string secondaryLabel: ""
|
||||
property int charLimit: 0
|
||||
@@ -79,73 +35,27 @@ Item {
|
||||
property real rightPadding: 16
|
||||
property list<StatusValidator> validators
|
||||
property list<StatusAsyncValidator> asyncValidators
|
||||
/*!
|
||||
\qmlproperty int (enumeration ValidationMode)
|
||||
This property describes the validation mode
|
||||
|
||||
Note that this property should be always strictly compared with one of ValidationMode's value
|
||||
|
||||
Default value: StatusInput.ValidationMode.OnlyWhenDirty
|
||||
|
||||
Examples of usage
|
||||
|
||||
> To ignore invalid input
|
||||
\qml
|
||||
StatusInput {
|
||||
validationMode: StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
validators: [
|
||||
StatusMinLengthValidator {
|
||||
minLength: 15
|
||||
}
|
||||
]
|
||||
}
|
||||
\endqml
|
||||
*/
|
||||
property int validationMode: StatusInput.ValidationMode.OnlyWhenDirty
|
||||
property string validatedValue
|
||||
|
||||
property var pendingValidators: []
|
||||
|
||||
signal iconClicked()
|
||||
signal keyPressed(var event)
|
||||
signal editClicked()
|
||||
|
||||
/*!
|
||||
\qmltype ValidationMode
|
||||
\brief Available validation modes supported by StatusInput
|
||||
|
||||
Values:
|
||||
|
||||
- OnlyWhenDirty validates input only after it has become dirty
|
||||
- Always validates input even before it has become dirty
|
||||
- IgnoreInvalidInput ignore the new content if it doesn't match validators
|
||||
|
||||
Has no effect without at least a validator
|
||||
|
||||
\note that it represents a QML enumeration and can't be used as a property type, we use int instead
|
||||
|
||||
\see validationMode for a usage example
|
||||
\see validators
|
||||
*/
|
||||
enum ValidationMode {
|
||||
OnlyWhenDirty, // validates input only after it has become dirty
|
||||
Always, // validates input even before it has become dirty
|
||||
IgnoreInvalidInput // ignore the new content if it doesn't match
|
||||
Always // validates input even before it has become dirty
|
||||
}
|
||||
|
||||
property var errors: ({})
|
||||
property var asyncErrors: ({})
|
||||
|
||||
function reset() {
|
||||
statusBaseInput.valid = true
|
||||
statusBaseInput.valid = false
|
||||
statusBaseInput.pristine = true
|
||||
statusBaseInput.text = ""
|
||||
root.errorMessage = ""
|
||||
}
|
||||
|
||||
property string _previousText: text
|
||||
function validate() {
|
||||
|
||||
if (!statusBaseInput.dirty && validationMode === StatusInput.ValidationMode.OnlyWhenDirty) {
|
||||
return
|
||||
}
|
||||
@@ -175,23 +85,11 @@ Item {
|
||||
if (errors){
|
||||
let errs = Object.values(errors)
|
||||
if (errs && errs[0]) {
|
||||
if(validationMode === StatusInput.ValidationMode.IgnoreInvalidInput
|
||||
&& text.length > _previousText.length) {
|
||||
// Undo the last input
|
||||
const cursor = statusBaseInput.cursorPosition;
|
||||
statusBaseInput.text = _previousText;
|
||||
if (statusBaseInput.cursor > statusBaseInput.text.length) {
|
||||
statusBaseInput.cursorPosition = statusBaseInput.text.length;
|
||||
} else {
|
||||
statusBaseInput.cursorPosition = cursor-1;
|
||||
}
|
||||
}
|
||||
errorMessage.text = errs[0].errorMessage || root.errorMessage;
|
||||
} else {
|
||||
errorMessage.text = ""
|
||||
}
|
||||
}
|
||||
_previousText = text
|
||||
}
|
||||
|
||||
if (asyncValidators.length && !Object.values(errors).length) {
|
||||
@@ -291,13 +189,6 @@ Item {
|
||||
onTextChanged: root.validate()
|
||||
|
||||
Keys.forwardTo: [root]
|
||||
onIconClicked: root.iconClicked()
|
||||
onKeyPressed: {
|
||||
root.keyPressed(event);
|
||||
}
|
||||
onEditChanged: {
|
||||
root.editClicked();
|
||||
}
|
||||
}
|
||||
|
||||
StatusBaseText {
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
import QtQuick 2.14
|
||||
import QtQuick.Controls 2.14
|
||||
|
||||
import StatusQ.Core.Theme 0.1
|
||||
import StatusQ.Core 0.1
|
||||
|
||||
StatusProgressBar {
|
||||
id: control
|
||||
|
||||
property var strength
|
||||
property string labelVeryWeak: "Very weak"
|
||||
property string labelWeak: "Weak"
|
||||
property string labelSoso: "So-so"
|
||||
property string labelGood: "Good"
|
||||
property string labelGreat: "Great"
|
||||
|
||||
enum Strength {
|
||||
None, // 0
|
||||
VeryWeak, // 1
|
||||
Weak, // 2
|
||||
SoSo, // 3
|
||||
Good, // 4
|
||||
Great // 5
|
||||
}
|
||||
|
||||
onValueChanged: if(value === 0) control.strength = StatusPasswordStrengthIndicator.Strength.None
|
||||
|
||||
// Behavior:
|
||||
states: [
|
||||
// Strength states definition:
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.None
|
||||
PropertyChanges { target: control; text: ""}
|
||||
},
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.VeryWeak
|
||||
PropertyChanges { target: control; fillColor : Theme.palette.dangerColor1}
|
||||
PropertyChanges { target: control; text: labelVeryWeak}
|
||||
},
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.Weak
|
||||
PropertyChanges { target: control; fillColor : Theme.palette.pinColor1}
|
||||
PropertyChanges { target: control; text: labelWeak}
|
||||
},
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.SoSo
|
||||
PropertyChanges { target: control; fillColor : Theme.palette.miscColor7}
|
||||
PropertyChanges { target: control; text: labelSoso}
|
||||
},
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.Good
|
||||
PropertyChanges { target: control; fillColor : Theme.palette.miscColor12}
|
||||
PropertyChanges { target: control; text: labelGood}
|
||||
},
|
||||
State {
|
||||
when: control.strength === StatusPasswordStrengthIndicator.Strength.Great
|
||||
PropertyChanges { target: control; fillColor : Theme.palette.successColor1}
|
||||
PropertyChanges { target: control; text: labelGreat}
|
||||
}
|
||||
]
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user