test docs

feat(StatusQ) Adding qdoc related files
2022-02-10 16:38:33 -05:00 · 2022-02-10 16:37:57 -05:00 · 2022-02-10 22:39:47 +02:00 · 2022-02-09 10:00:41 +01:00 · 2022-02-09 09:21:46 +01:00 · 2022-02-08 09:40:35 +01:00
38 changed files with 2121 additions and 502 deletions
@@ -1,3 +1,20 @@
+<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)

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- StatusBaseText.qml -->
+  <title>List of All Members for StatusBaseText | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">List of All Members for StatusBaseText</h1>
+<p>This is the complete list of members for <a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a>, including inherited members.</p>
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- StatusBaseText.qml -->
+  <title>StatusBaseText QML Type | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<div class="sidebar">
+<div class="toc">
+<h3><a name="toc">Contents</a></h3>
+<ul>
+<li class="level1"><a href="#details">Detailed Description</a></li>
+</ul>
+</div>
+<div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusBaseText QML Type</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusBaseText-brief -->
+<p>Displays multiple lines of text. Inherits <a href="https://doc.qt.io/qt-5/qml-qtquick-text.html">Text</a>. <a href="#details">More...</a></p>
+<!-- @@@StatusBaseText -->
+<div class="table"><table class="alignedsummary">
+<tr><td class="memItemLeft rightAlign topAlign"> Import Statement:</td><td class="memItemRight bottomAlign"> import StatusQ.Core 0.1</td></tr><tr><td class="memItemLeft rightAlign topAlign"> Since:</td><td class="memItemRight bottomAlign"> StatusQ.Core 0.1</td></tr></table></div><ul>
+<li><a href="qml-statusq-core-statusbasetext-members.html">List of all members, including inherited members</a></li>
+</ul>
+<!-- $$$StatusBaseText-description -->
+<a name="details"></a>
+<h2 id="details">Detailed Description</h2>
+<p>The <code>StatusBaseText</code> item displays text. For example:</p>
+<pre class="qml"><span class="type"><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></span> {
+    <span class="name">width</span>: <span class="number">240</span>
+    <span class="name">text</span>: <span class="string">&quot;Hello World!&quot;</span>
+    <span class="name">font</span>.pixelSize: <span class="number">24</span>
+    <span class="name">color</span>: <span class="name">Theme</span>.<span class="name">pallete</span>.<span class="name">directColor1</span>
+}</pre>
+<p class="centerAlign"><img src="images/status_base_text.png" alt="" /></p><p>For a list of components available see <a href="statusq-index.html">StatusQ</a>.</p>
+<!-- @@@StatusBaseText -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcomponents.qdoc -->
+  <title>StatusQ Components | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Components</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Components</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Components-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Components components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAddress</li>
+<li>StatusBadge</li>
+<li>StatusChatInfoToolBar</li>
+<li>StatusChatList</li>
+<li>StatusChatListItem</li>
+<li>StatusImageSettings</li>
+<li>StatusChatListCategory</li>
+<li>StatusChatListCategoryItem</li>
+<li>StatusChatListAndCategories</li>
+<li>StatusChatToolBar</li>
+<li>StatusContactRequestsIndicatorListItem</li>
+<li>StatusDescriptionListItem</li>
+<li>StatusLetterIdenticon</li>
+<li>StatusListItem</li>
+<li>StatusListSectionHeadline</li>
+<li>StatusLoadingIndicator</li>
+<li>StatusMemberListItem</li>
+<li>StatusNavigationListItem</li>
+<li>StatusNavigationPanelHeadline</li>
+<li>StatusRoundIcon</li>
+<li>StatusRoundedImage</li>
+<li>StatusMacWindowButtons</li>
+<li>StatusListItemBadge</li>
+<li>StatusExpandableItem</li>
+<li>StatusSmartIdenticon</li>
+<li>StatusMessage</li>
+<li>StatusMessageDetails</li>
+<li>StatusTagSelector</li>
+<li>StatusToastMessage</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Components -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcontrols.qdoc -->
+  <title>StatusQ Controls | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Controls</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Controls</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Controls-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Controls components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAccountSelector</li>
+<li>StatusAssetSelector</li>
+<li>StatusBanner</li>
+<li>StatusChatCommandButton</li>
+<li>StatusChatInfoButton</li>
+<li>StatusChatListCategoryItemButton</li>
+<li>StatusColorSelector</li>
+<li>StatusIconTabButton</li>
+<li>StatusNavBarTabButton</li>
+<li>StatusTabBarIconButton</li>
+<li>StatusToolTip</li>
+<li>StatusBaseButton</li>
+<li>StatusButton</li>
+<li>StatusFlatButton</li>
+<li>StatusRoundButton</li>
+<li>StatusFlatRoundButton</li>
+<li>StatusSwitch</li>
+<li>StatusRadioButton</li>
+<li>StatusCheckBox</li>
+<li>StatusSlider</li>
+<li>StatusSelect</li>
+<li>StatusBaseInput</li>
+<li>StatusInput</li>
+<li>StatusPickerButton</li>
+<li>StatusProgressBar</li>
+<li>StatusPasswordStrengthIndicator</li>
+<li>StatusSwitchTabButton</li>
+<li>StatusSwitchTabBar</li>
+<li>StatusSelectableText</li>
+<li>StatusWalletColorButton</li>
+<li>StatusWalletColorSelect</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Controls -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqcore.qdoc -->
+  <title>StatusQ Core | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Core</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Core</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Core-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Core components. These files are available for general import and they are based off the <a href="https://doc.qt.io/qt-5/qtquick-qmlmodule.html">Qt Quick Primitives</a> and <a href="https://doc.qt.io/archives/qt-5.11/qtquick-controls2-qmlmodule.html">Qt Quick Controls 2</a>.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAppNavBarFilterModel</li>
+<li><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></li>
+<li>StatusIcon</li>
+<li>StatusIconBackgroundSettings</li>
+<li>StatusIconSettings</li>
+<li>StatusImageSettings</li>
+<li>StatusModalHeaderSettings</li>
+<li>StatusTooltipSettings</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Core -->
+<div class="table"><table class="annotated">
+<tr class="odd topAlign"><td class="tblName"><p><a href="qml-statusq-core-statusbasetext.html">StatusBaseText</a></p></td><td class="tblDescr"><p>Displays multiple lines of text. Inherits Text</p></td></tr>
+</table></div>
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusq-overview.qdoc -->
+  <title>StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ</h1>
+<span class="subtitle"></span>
+<!-- $$$statusq-index.html-description -->
+<div class="descr"> <a name="details"></a>
+<p><a href="statusq-index.html">StatusQ</a> provides a collection of components..&#x2e;&#x2e;</p>
+<p><a href="statusq-index.html">StatusQ</a> - Components and Interfaces</p>
+<ul>
+<li><a href="statusq-components-qmlmodule.html">Components</a></li>
+<li><a href="statusq-controls-qmlmodule.html">Controls</a></li>
+<li><a href="statusq-core-qmlmodule.html">Core</a></li>
+<li><a href="statusq-layout-qmlmodule.html">Layout</a></li>
+<li><a href="statusq-platform-qmlmodule.html">Platform</a></li>
+<li><a href="statusq-popups-qmlmodule.html">Popups</a></li>
+</ul>
+</div>
+<!-- @@@statusq-index.html -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqlayout.qdoc -->
+  <title>StatusQ Layout | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Layout</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Layout</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Layout-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Layout components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusAppLayout</li>
+<li>StatusAppNavBar</li>
+<li>StatusAppTwoPanelLayout</li>
+<li>StatusAppThreePanelLayout</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Layout -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqplatform.qdoc -->
+  <title>StatusQ Platform | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Platform</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Platform</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Platform-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Platform components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusMacTrafficLights</li>
+<li>StatusMacNotification</li>
+<li>StatusWindowsTitleBar</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Platform -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+<!-- statusqpopups.qdoc -->
+  <title>StatusQ Popups | StatusQ 0.1</title>
+<link rel="stylesheet" type="text/css" href="style/style.css"/>
+</head>
+<body>
+<p class="header"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/><li><a href="statusq-index.html">StatusQ</a></li>
+<li>StatusQ Popups</li>
+<div class="sidebar"><div class="sidebar-content" id="sidebar-content"></div></div>
+<h1 class="title">StatusQ Popups</h1>
+<span class="subtitle"></span>
+<!-- $$$StatusQ.Popups-description -->
+<div class="descr"> <a name="details"></a>
+<p>This is a listing of all Popups components.</p>
+<p>This module is part of the <a href="statusq-index.html">StatusQ</a> project.</p>
+<ul>
+<li>StatusMenuSeparator</li>
+<li>StatusPopupMenu</li>
+<li>StatusMenuItem</li>
+<li>StatusMenuItemDelegate</li>
+<li>StatusModal</li>
+<li>StatusSearchPopup</li>
+<li>StatusModalDivider</li>
+<li>StatusSearchPopupMenuItem</li>
+<li>StatusSearchLocationMenu</li>
+<li>StatusSpellcheckingMenuItems</li>
+</ul>
+</div>
+<!-- @@@StatusQ.Popups -->
+<hr/><div class="footer"><p><acronym title="Copyright">&copy;</acronym> 2022 Status. All rights reserved. <a href="https://status.im" target="_blank"><small>status.im</a></small></p></div></body>
+</html>
@@ -0,0 +1,41 @@
+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;
+}
@@ -1,498 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Components 0.1
-
-QtObject {
-
-    property var demoChatListItems: ListModel {
-        id: demoChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "#status"
-            icon: ""
-            isIdenticon: false
-            color: "blue"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "status-desktop"
-            icon: ""
-            isIdenticon: false
-            color: "red"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: true
-            notificationsCount: 1
-            muted: false
-            active: false
-            position: 1
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340002"
-            name: "Amazing Funny Squirrel"
-            icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAlklEQVR4nOzW0QmDQBAG4SSkl7SUQlJGCrElq9F3QdjjVhh/5nv3cFhY9vUIYQiNITSG0Bh
-CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2ImYgiNITTlTdG1nUZ5a92VITQxITFiJmIIjSE0htAYQrMHAAD//+wwFVpz+yqXAAAAAElFTkSuQmCC"
-            isIdenticon: true
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 2
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340003"
-            name: "Black Ops"
-            icon: ""
-            isIdenticon: false
-            color: "purple"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 3
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Spectacular Growing Otter"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.OneToOneChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 4
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340005"
-            name: "channel-with-a-super-duper-long-name"
-            icon: ""
-            isIdenticon: false
-            color: "green"
-            description: ""
-            type: StatusChatListItem.Type.PublicChat
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 5
-            subItems: []
-        }
-    }
-
-    property var demoCommunityChatListItems: ListModel {
-        id: demoCommunityChatListItems
-        ListElement {
-            itemId: "x012340000"
-            name: "general"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.CommunityChat
-            hasUnreadMessages: true
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 0
-            subItems: []
-        }
-        ListElement {
-            itemId: "x012340001"
-            name: "Public"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: true
-            position: 1
-            subItems: [
-                ListElement {
-                    itemId: "x012340002"
-                    parentItemId: "x012340001"
-                    name: "random"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: true
-                    notificationsCount: 4
-                    muted: false
-                    active: false
-                    position: 0
-                },
-                ListElement {
-                    itemId: "x012340003"
-                    parentItemId: "x012340001"
-                    name: "watercooler"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: false
-                    active: true
-                    position: 1
-                }
-            ]
-        }
-        ListElement {
-            itemId: "x012340004"
-            name: "Development"
-            icon: ""
-            isIdenticon: false
-            color: "orange"
-            description: ""
-            type: StatusChatListItem.Type.Unknown0
-            hasUnreadMessages: false
-            notificationsCount: 0
-            muted: false
-            active: false
-            position: 2
-            subItems: [
-                ListElement {
-                    itemId: "x012340005"
-                    parentItemId: "x012340004"
-                    name: "language-design"
-                    icon: ""
-                    isIdenticon: false
-                    color: "orange"
-                    description: ""
-                    hasUnreadMessages: false
-                    notificationsCount: 0
-                    muted: true
-                    active: false
-                    position: 0
-                }
-            ]
-        }
-    }
-
-    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
-                }]}
-    }
-
-    //    App Section Types:
-    //    chat: 0
-    //    community: 1
-    //    wallet: 2
-    //    browser: 3
-    //    nodeManagement: 4
-    //    profileSettings: 5
-    //    apiDocumentation: 100
-    //    demoApp: 101
-
-    property ListModel mainAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "mainApp"
-            sectionType: 100
-            name: "API Documentation"
-            active: true
-            image: ""
-            icon: "edit"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "demoApp"
-            sectionType: 101
-            name: "Demo Application"
-            active: false
-            image: ""
-            icon: "status"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-    }
-
-    property ListModel demoAppSectionsModel: ListModel {
-        ListElement {
-            sectionId: "chat"
-            sectionType: 0
-            name: "Chat"
-            active: true
-            image: ""
-            icon: "chat"
-            color: ""
-            hasNotification: false
-            notificationsCount: 0
-        }
-        ListElement {
-            sectionId: "0x123456789"
-            sectionType: 1
-            name: "Status Community"
-            active: false
-            image: "https://assets.brandfetch.io/51a495de903c46a.png"
-            icon: ""
-            color: ""
-            hasNotification: false
-            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: 6
-            name: "Profile"
-            active: false
-            image: ""
-            icon: "bigger/settings"
-            color: ""
-            hasNotification: true
-            notificationsCount: 0
-        }
-    }
-}
@@ -0,0 +1,19 @@
+/*!
+   \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
+*/
+
@@ -0,0 +1,41 @@
+/*!
+    \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
+*/
@@ -0,0 +1,43 @@
+/*!
+    \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{StatusInput}
+       \li \l{StatusPickerButton}
+       \li \l{StatusProgressBar}
+       \li \l{StatusPasswordStrengthIndicator}
+       \li \l{StatusSwitchTabButton}
+       \li \l{StatusSwitchTabBar}
+       \li \l{StatusSelectableText}
+       \li \l{StatusWalletColorButton}
+       \li \l{StatusWalletColorSelect}
+   \endlist
+*/
@@ -0,0 +1,22 @@
+/*!
+    \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{StatusImageSettings}
+       \li \l{StatusModalHeaderSettings}
+       \li \l{StatusTooltipSettings}
+   \endlist
+*/
@@ -0,0 +1,16 @@
+/*!
+    \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
+*/
@@ -0,0 +1,15 @@
+/*!
+    \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
+*/
@@ -0,0 +1,22 @@
+/*!
+    \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
+*/
@@ -0,0 +1,36 @@
+project = StatusQ
+version = 0.1
+description = StatusQ Project
+url     = https://github.com/status-im/StatusQ
+
+#These are set implictly by qdoc as well, but only with these the module header can be found
+includepaths = -I . \
+               -I $PWD/../../src/StatusQ
+
+imagedirs = src/images
+sourcedirs += src \
+              $PWD/../../src/StatusQ/Components \
+              $PWD/../../src/StatusQ/Controls \
+              $PWD/../../src/StatusQ/Core \
+              $PWD/../../src/StatusQ/Layout \
+              $PWD/../../src/StatusQ/Platform \
+              $PWD/../../src/StatusQ/Popups \
+
+sources.fileextensions = "*.cpp *.qdoc *.qml"
+
+depends += qtcore \
+           qtquick \
+           qtqml \
+           qtgui \
+           qtdoc \
+           qtquickcontrols2
+
+navigation.homepage    = "StatusQ"
+
+outputdir  =    $PWD/html
+outputformats = HTML
+
+HTML.stylesheets = style.css
+HTML.headerstyles = "<link rel=\"stylesheet\" type=\"text/css\" href=\"style/style.css\"/>\n"
+HTML.postheader = "<p class=\"header\"><small>StatusQ - A Components selection for Status dekstop client. </p></small></p><hr/>"
+HTML.footer = "<hr/><div class=\"footer\"><p><acronym title=\"Copyright\">&copy;</acronym> 2022 Status. All rights reserved. <a href=\"https://status.im\" target=\"_blank\"><small>status.im</a></small></p></div>"
@@ -0,0 +1,41 @@
+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;
+}
@@ -260,6 +260,16 @@ StatusWindow {
                            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);
+                        }
                        StatusListSectionHeadline { text: "StatusQ.Popup" }
                        StatusNavigationListItem { 
                            title: "StatusPopupMenu"
@@ -375,8 +385,7 @@ StatusWindow {
            }
            DemoApp {
                id: demoApp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.horizontalCenter: parent.horizontalCenter
+                anchors.centerIn: parent
            }
            DropShadow {
                anchors.fill: demoApp
@@ -0,0 +1,40 @@
+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;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,100 @@
+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
+    }
+}
@@ -15,7 +15,7 @@ SOURCES += \
        handler.cpp \
        main.cpp \
        sandboxapp.cpp \
-        spellchecker.cpp
+        spellchecker.cpp \

 !macx {
    SOURCES += statuswindow.cpp
@@ -21,6 +21,7 @@ Rectangle {
    property real leftPadding: 16
    property real rightPadding: 16
    property bool enabled: true
+    property bool highlighted: false
    property int type: StatusListItem.Type.Primary
    property list<Item> components

@@ -100,7 +101,7 @@ Rectangle {
    implicitWidth: 448
    implicitHeight: Math.max(64, statusListItemTitleArea.height + 16)
    color: {
-        if (sensor.containsMouse) {
+        if (sensor.containsMouse || statusListItem.highlighted) {
            switch(type) {
                case StatusListItem.Type.Primary:
                    return Theme.palette.baseColor2
@@ -0,0 +1,182 @@
+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;
+                }
+            }
+        }
+    }
+}
@@ -0,0 +1,78 @@
+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
+                }
+            }
+        }
+    }
+}
@@ -27,3 +27,5 @@ 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
@@ -10,6 +10,7 @@ ProgressBar {
    property string text
    property color fillColor
    property color backgroundColor: Theme.palette.directColor8
+    property color backgroundBorderColor: "transparent"

    width: 416
    height: 16
@@ -19,6 +20,7 @@ ProgressBar {
        implicitWidth: parent.width
        implicitHeight: parent.height
        color: control.backgroundColor
+        border.color: control.backgroundBorderColor
        radius: 5
    }
    contentItem: Item {
@@ -1,6 +1,30 @@
 import QtQuick 2.13
 import StatusQ.Core.Theme 0.1

+/*!
+   \qmltype StatusBaseText
+   \inherits Text
+   \inqmlmodule StatusQ.Core
+   \since StatusQ.Core 0.1
+   \brief Displays multiple lines of text. Inherits \l{https://doc.qt.io/qt-5/qml-qtquick-text.html}{Text}.
+
+   The \c StatusBaseText item displays text.
+   For example:
+
+   \qml
+       StatusBaseText {
+           width: 240
+           text: "Hello World!"
+           font.pixelSize: 24
+           color: Theme.pallete.directColor1
+       }
+   \endqml
+
+   \image status_base_text.png
+
+   For a list of components available see StatusQ.
+*/
+
 Text {
    font.family: Theme.palette.baseFont.name
 }
@@ -167,6 +167,10 @@ ThemePalette {
        property color backgroundColor: baseColor5
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: baseColor3
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor: baseColor3
        property color secondaryHoverBackgroundColor: primaryColor3
@@ -165,6 +165,10 @@ ThemePalette {
        property color backgroundColor: baseColor2
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor: white
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor: white
        property color secondaryHoverBackgroundColor: getColor('blue6')
@@ -101,6 +101,10 @@ QtObject {
        property color backgroundColor
    }

+    property QtObject statusToastMessage: QtObject {
+        property color backgroundColor
+    }
+
    property QtObject statusListItem: QtObject {
        property color backgroundColor
        property color secondaryHoverBackgroundColor
@@ -321,5 +321,7 @@
        <file>src/StatusQ/Controls/StatusPasswordStrengthIndicator.qml</file>
        <file>src/StatusQ/Components/StatusMemberListItem.qml</file>
        <file>src/StatusQ/Components/StatusTagSelector.qml</file>
+        <file>src/StatusQ/Components/StatusToastMessage.qml</file>
+        <file>src/StatusQ/Components/StatusWizardStepper.qml</file>
    </qresource>
 </RCC>
Author	SHA1	Message	Date
Iuri Matias	2b71a674ff	test docs	2022-02-10 16:38:33 -05:00
Iuri Matias	aa93cf2968	test docs	2022-02-10 16:37:57 -05:00
Alexandra Betouni	a8f096faaf	feat(StatusQ) Adding qdoc related files Added qdoc conf & source files for each StatusQ module. Documented StatusBaseText from StatusQ.Core as an example To generate docs, from sandbox/docs run /path/to/Qt/installation/bin/qdoc statusq.qdocconf A folder named "html" will be generated under sandbox/doc, open the statusq-index.html to get to the home page. Closes #550	2022-02-10 22:39:47 +02:00
Patryk Osmaczko	5780f183c7	feat(StatusListItem): add highlighted property	2022-02-09 10:00:41 +01:00
Alexandra Betouni	b7d6554b80	feat(StatusQ.Components): Adding StatusWizardSteper component Added StatusWizardStepper component Also added corresponding page in API documentation Closes #522	2022-02-09 09:21:46 +01:00
Pascal Precht	0fabd92d61	chore: cut 0.23.0 release	2022-02-08 09:40:35 +01:00
Alexandra Betouni	7b290ddd56	feat(StatusQ.Components): Adding StatusToastMessage Added StatusToastMessage component, an example page as well as a demonstration in chat view Closes #521	2022-02-08 09:36:38 +01:00
Alexandra Betouni	094dee4928	feat(StatusQ.Components): Adding StatusTagSelector component Added StatusTagSelector component needed for creating new chat channels, either ono on one or group based on updated designs on Figma Also added corresponding page in API Documentation Closes #526	2022-02-02 10:26:45 +01:00
Noelia	5497bb3f5f	chore(demoApp): restore DemoApp to have the latest changes from both master and base_bc Updated DemoApp, main and Models to have the latest changes from both master and base_bc	2022-02-02 10:18:03 +01:00