fix(DemoApp) Results popup component position

Fixed alignment when results are being filtered.
If the x position that the popup should be aligned
goes off the screen, the popup appears back on
position 0. Also fixed result list item was not
vertically centered.

Closes #531

sandbox/demoapp/CreateChatView.qml

@@ -71,22 +71,27 @@ Page {
             StatusBaseText {
                 id: contactsLabel
                 font.pixelSize: 15
+                anchors.left: parent.left
+                anchors.leftMargin: 8
                 color: Theme.palette.baseColor1
-                text: "Contacts"
+                text: qsTr("Contacts")
             }
             Control {
                 width: 360
                 anchors {
                     top: contactsLabel.bottom
                     topMargin: 8//Style.current.padding
-                    bottom: parent.bottom
+                    bottom: !statusPopupMenuBackgroundContent.visible ?  parent.bottom : undefined
                     bottomMargin: 20//Style.current.bigPadding
                 }
+                height: 16 + (!statusPopupMenuBackgroundContent.visible ? parent.height :
+                        (((userListView.count * 64) > parent.height) ? parent.height : (userListView.count * 64)))
+                x: (statusPopupMenuBackgroundContent.visible && (tagSelector.namesModel.count > 0) &&
+                   ((tagSelector.textEdit.x + 24 + statusPopupMenuBackgroundContent.width) < parent.width))
+                   ? (tagSelector.textEdit.x + 24) : 0
                 background: Rectangle {
                     id: statusPopupMenuBackgroundContent
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: (userListView.height + 8)
+                    anchors.fill: parent
                     visible: (tagSelector.sortedList.count > 0)
                     color: Theme.palette.statusPopupMenu.backgroundColor
                     radius: 8
@@ -107,9 +112,9 @@ Page {
                 }
                 contentItem: ListView {
                     id: userListView
-                    anchors.left: parent.left
-                    anchors.right: parent.right
-                    height: (count * 64) > parent.height ? parent.height : (count * 64)
+                    anchors.fill: parent
+                    anchors.topMargin: 8
+                    anchors.bottomMargin: 8
                     clip: true
                     model: contactsModel
                     ScrollBar.vertical: ScrollBar {
@@ -125,7 +130,6 @@ Page {
                         Rectangle {
                             id: rectangle
                             anchors.fill: parent
-                            anchors.topMargin: 8
                             anchors.rightMargin: 8
                             anchors.leftMargin: 8
                             radius: 8

sandbox/doc/src/statusq-overview.qdoc

@@ -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
+*/
+

sandbox/doc/src/statusqcomponents.qdoc

@@ -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
+*/

sandbox/doc/src/statusqcontrols.qdoc

@@ -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
+*/

sandbox/doc/src/statusqcore.qdoc

@@ -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
+*/

sandbox/doc/src/statusqlayout.qdoc

@@ -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
+*/

sandbox/doc/src/statusqplatform.qdoc

@@ -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
+*/

sandbox/doc/src/statusqpopups.qdoc

@@ -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
+*/

sandbox/doc/statusq.qdocconf

@@ -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>"

sandbox/doc/style.css

@@ -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;
+}

sandbox/sandbox.pro

@@ -15,7 +15,7 @@ SOURCES += \
         handler.cpp \
         main.cpp \
         sandboxapp.cpp \
-        spellchecker.cpp
+        spellchecker.cpp \
 
 !macx {
     SOURCES += statuswindow.cpp

src/StatusQ/Core/StatusBaseText.qml

@@ -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
 }