Update sandbox/sandboxapp.cpp

Co-authored-by: Pascal Precht <pascal.precht@gmail.com>

README.md

@@ -11,7 +11,6 @@ These modules are:
 - [StatusQ.Core.Theme](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Core/Theme/qmldir)
 - [StatusQ.Components](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Controls/qmldir)
 - [StatusQ.Controls](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Components/qmldir)
-- [StatusQ.Layout](https://github.com/status-im/StatusQ/blob/master/src/StatusQ/Layout/qmldir)
 
 Provided components can be viewed and tested in the [sandbox application](#viewing-and-testing-components) that comes with this repository.
 Other than that, modules and components can be used as expected.

sandbox/Buttons.qml

@@ -1,239 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Layouts 1.14
-
-import StatusQ.Controls 0.1
-import StatusQ.Core.Theme 0.1
-
-Grid {
-
-    columns: 3
-    columnSpacing: 38
-    rowSpacing: 10
-
-    horizontalItemAlignment: Grid.AlignHCenter
-
-    // Large
-    StatusButton {
-        text: "Button"
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        loading: true
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        enabled: false
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        loading: true
-    }
-
-    // Small
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        enabled: false
-    }
-
-    StatusButton {
-        text: "Button"
-        type: StatusBaseButton.Type.Danger
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-        loading: true
-    }
-
-    // Icon buttons
-
-    // blue
-
-    StatusRoundButton {
-        icon: "info"
-    }
-
-    StatusRoundButton {
-        icon: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        icon: "info"
-        loading: true
-    }
-
-    // black
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon: "info"
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon: "info"
-        enabled: false
-    }
-
-    StatusRoundButton {
-        type: StatusRoundButton.Type.Secondary
-        icon: "info"
-        loading: true
-    }
-
-    // Rounded blue
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-
-        icon: "info"
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        width: 44
-        height: 44
-        icon: "info"
-        loading: true
-    }
-
-    // Rounded white
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-
-        icon: "info"
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon: "info"
-        enabled: false
-    }
-
-    StatusFlatRoundButton {
-        type: StatusFlatRoundButton.Type.Secondary
-        width: 44
-        height: 44
-        icon: "info"
-        loading: true
-    }
-
-    StatusFlatButton {
-        iconName: "info"
-        text: "Button"
-        size: StatusBaseButton.Size.Small
-    }
-    StatusFlatButton {
-        iconName: "info"
-        text: "Button"
-        enabled: false
-        size: StatusBaseButton.Size.Small
-    }
-
-    StatusFlatButton {
-        iconName: "info"
-        text: "Button"
-        loading: true
-        size: StatusBaseButton.Size.Small
-    }
-}

sandbox/Controls.qml

@@ -9,6 +9,7 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
+    property ThemePalette theme
 
     StatusIconTabButton {
         icon.name: "chat"
@@ -18,14 +19,6 @@ GridLayout {
         icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jpg"
     }
 
-    StatusIconTabButton {
-        icon.color: Theme.palette.miscColor9
-        // This icon source is flawed and demonstrates the fallback case
-        // when the image source can't be loaded
-        icon.source: "https://pbs.twimg.com/profile_images/1369221718338895873/T_5fny6o_400x400.jp"
-        name: "Pascal"
-    }
-
     StatusIconTabButton {
         name: "#status"
     }
@@ -92,14 +85,4 @@ GridLayout {
         tooltip.text: "Chat"
         badge.value: 100
     }
-
-    StatusSwitch {
-
-    }
-
-    StatusRadioButton {
-        text: "i'm radio!"
-    }
-
-    StatusCheckBox {}
 }

sandbox/Layout.qml

@@ -1,258 +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.Layout 0.1
-
-GridLayout {
-    columns: 6
-    columnSpacing: 5
-    rowSpacing: 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
-            tooltip.text: "Chat"
-        }
-    }
-
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            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: Theme.palette.statusAppNavBar.backgroundColor
-                badge.border.width: 2
-
-                tooltip.text: "Profile"
-            }
-        ]
-    }
-
-    StatusAppNavBar {
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            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
-            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: Theme.palette.statusAppNavBar.backgroundColor
-                badge.border.width: 2
-
-                tooltip.text: "Profile"
-            }
-        ]
-    }
-
-    StatusAppNavBar {
-        id: test
-        navBarChatButton: StatusNavBarTabButton {
-            icon.name: "chat"
-            badge.value: 33
-            badge.visible: true
-            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: Theme.palette.statusAppNavBar.backgroundColor
-                badge.border.width: 2
-
-                tooltip.text: "Profile"
-            }
-        ]
-    }
-}
-

sandbox/Others.qml

@@ -8,9 +8,10 @@ GridLayout {
     columns: 6
     columnSpacing: 5
     rowSpacing: 5
+    property ThemePalette theme
 
     StatusLoadingIndicator {
-        color: Theme.palette.directColor4
+        color: parent.theme.directColor4
     }
 
     StatusLetterIdenticon {
@@ -34,8 +35,4 @@ GridLayout {
     StatusBadge {
         value: 100
     }
-
-    StatusRoundIcon {
-        icon.name: "info"
-    }
 }

sandbox/main.qml

@@ -2,36 +2,24 @@ import QtQuick 2.14
 import QtQuick.Window 2.14
 import QtQuick.Controls 2.14
 
-import Sandbox 0.1
-
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 
-StatusWindow {
+Window {
     id: rootWindow
-    width: 1024
-    height: 840
+    width: 640
+    height: 480
     visible: true
     title: qsTr("Status App Sandbox")
 
-    property ThemePalette lightTheme: StatusLightTheme {}
-    property ThemePalette darkTheme: StatusDarkTheme { }
-
     ButtonGroup {
         id: topicsGroup
         buttons: tabs.children
     }
 
-    ButtonGroup {
-        buttons: switchRow.children
-    }
-
     Flow {
         id: tabs
-        anchors.left: parent.left
-        anchors.leftMargin: 100
-        anchors.right: parent.right
-
+        width: parent.width
         Button {
             text: "Reload QML"
             onClicked: app.restartQml()
@@ -46,94 +34,84 @@ StatusWindow {
             checkable: true
             text: "Controls"
         }
-        Button {
-            id: layoutTab
-            checkable: true
-            text: "Layout"
-        }
         Button {
             id: otherTab
             checkable: true
             text: "Other"
         }
-
-        Button {
-            id: buttonsTab
-            checkable: true
-            text: "Buttons"
-        }
     }
 
-
-
     ScrollView {
         width: parent.width
         anchors.top: tabs.bottom
         anchors.bottom: parent.bottom
-        contentHeight: lightThemeBg.height * rootWindow.factor
+        contentHeight: rootWindow.height * rootWindow.factor
         contentWidth: rootWindow.width * rootWindow.factor
         clip: true
+        SplitView {
+            width: parent.width
+            height: rootWindow.height
+            handle: Item {}
 
-
-        Rectangle {
-            id: lightThemeBg
-
-            width: rootWindow.width
-            height: page.height + 64
-            anchors.topMargin: 32
-            color: Theme.palette.baseColor5
-            clip: true
             scale: rootWindow.factor
 
-            Loader {
-                id: page
-                active: true
-                anchors.centerIn: parent
+            Rectangle {
+                id: lightThemeBg
 
-                sourceComponent: {
-                    switch(topicsGroup.checkedButton) {
-                    case iconsTab:
-                        return iconsComponent;
-                    case controlsTab:
-                        return controlsComponent;
-                    case layoutTab:
-                        return layoutComponent;
-                    case otherTab:
-                        return othersComponent;
-                    case buttonsTab:
-                        return buttonsComponent;
-                    default:
-                        return null;
+                SplitView.minimumWidth: rootWindow.width / 2
+                height: parent.height
+                color: lightTheme.baseColor5
+                clip: true
+
+                Loader {
+                    active: true
+                    anchors.centerIn: parent
+                    property var currentTheme: StatusLightTheme { id: lightTheme }
+
+                    sourceComponent: {
+                        switch(topicsGroup.checkedButton) {
+                        case iconsTab:
+                            return iconsComponent;
+                        case controlsTab:
+                            return controlsComponent;
+                        case otherTab:
+                            return othersComponent;
+                        default:
+                            return null;
+                        }
                     }
                 }
+
             }
 
-            Row {
-                id: switchRow
-                scale: 0.8
-                anchors.right: parent.right
-                anchors.top: parent.top
+            Rectangle {
+                id: darkThemeBg
 
-                Button {
-                    checkable: true
-                    checked: true
-                    text: "Light Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(lightTheme)
+                SplitView.fillWidth: true
+                SplitView.minimumWidth: rootWindow.width / 2
+                height: parent.height
+                color: darkTheme.baseColor5
+                clip: true
+
+                Loader {
+                    active: true
+                    anchors.centerIn: parent
+                    property var currentTheme:  StatusDarkTheme { id: darkTheme }
+
+                    sourceComponent: {
+                        switch(topicsGroup.checkedButton) {
+                        case iconsTab:
+                            return iconsComponent;
+                        case controlsTab:
+                            return controlsComponent;
+                        case otherTab:
+                            return othersComponent;
+                        default:
+                            return null;
                         }
                     }
                 }
 
-                Button {
-                    checkable: true
-                    text: "Dark Theme"
-                    onCheckedChanged: {
-                        if (checked) {
-                            Theme.setTheme(darkTheme)
-                        }
-                    }
-                }
             }
         }
     }
@@ -169,7 +147,7 @@ StatusWindow {
         id: iconsComponent
         Icons {
             anchors.centerIn: parent
-            iconColor: Theme.palette.primaryColor1
+            iconColor: parent? parent.currentTheme.primaryColor1 : "#ffffff"
         }
     }
 
@@ -177,13 +155,7 @@ StatusWindow {
         id: controlsComponent
         Controls {
             anchors.centerIn: parent
-        }
-    }
-
-    Component {
-        id: layoutComponent
-        Layout {
-            anchors.centerIn: parent
+            theme: parent.currentTheme
         }
     }
 
@@ -191,13 +163,7 @@ StatusWindow {
         id: othersComponent
         Others {
             anchors.centerIn: parent
-        }
-    }
-
-    Component {
-        id: buttonsComponent
-        Buttons {
-            anchors.centerIn: parent
+            theme: parent.currentTheme
         }
     }
 }

sandbox/qml.qrc

@@ -4,6 +4,5 @@
         <file>Controls.qml</file>
         <file>Icons.qml</file>
         <file>Others.qml</file>
-        <file>Buttons.qml</file>
     </qresource>
 </RCC>

sandbox/sandbox.pro

@@ -12,7 +12,7 @@ SOURCES += \
         sandboxapp.cpp
 
 OBJECTIVE_SOURCES += \
-    statuswindow_mac.mm
+        sandboxapp_mac.mm
 
 RESOURCES += qml.qrc
 
@@ -28,13 +28,4 @@ OTHER_FILES += $$files($$PWD/../src/*, true)
 
 HEADERS += \
     handler.h \
-    sandboxapp.h \
-    statuswindow.h
-
-DISTFILES += \
-    ../src/StatusQ/Controls/StatusBaseButton.qml \
-    ../src/StatusQ/Controls/StatusButton.qml \
-    ../src/StatusQ/Controls/StatusCheckBox.qml \
-    ../src/StatusQ/Controls/StatusFlatRoundButton.qml \
-    ../src/StatusQ/Controls/StatusRadioButton.qml \
-    ../src/StatusQ/Controls/StatusSwitch.qml
+    sandboxapp.h

sandbox/sandboxapp.cpp

@@ -4,8 +4,6 @@
 #include <QWindow>
 #include <QDebug>
 
-#include "statuswindow.h"
-
 SandboxApp::SandboxApp(int &argc, char **argv)
     : QGuiApplication(argc, argv),
       m_handler(new Handler(this))
@@ -15,8 +13,6 @@ SandboxApp::SandboxApp(int &argc, char **argv)
 
 void SandboxApp::startEngine()
 {
-    qmlRegisterType<StatusWindow>("Sandbox", 0, 1, "StatusWindow");
-
     const QUrl url(applicationDirPath() + "/../main.qml");
 
     m_engine.rootContext()->setContextProperty("app", m_handler);
@@ -29,6 +25,13 @@ void SandboxApp::startEngine()
                 QCoreApplication::exit(-1);
         }, Qt::QueuedConnection);
     m_engine.load(url);
+
+    QWindow *rootWindow = qobject_cast<QWindow*>(m_engine.rootObjects().at(0));
+    if (rootWindow) {
+        removeTitleBar(rootWindow->winId());
+    } else {
+        qDebug() << "Window doesn't exist";
+    }
 }
 
 void SandboxApp::restartEngine()

sandbox/sandboxapp.h

@@ -13,6 +13,8 @@ public:
 
     void startEngine();
 
+    void removeTitleBar(WId wid);
+
 public slots:
     void restartEngine();
 

sandbox/sandboxapp_mac.mm

@@ -1,4 +1,4 @@
-#include "statuswindow.h"
+#include "sandboxapp.h"
 
 #include <QColor>
 
@@ -7,7 +7,7 @@
 #include <AppKit/NSWindow.h>
 #include <AppKit/NSColor.h>
 
-void StatusWindow::removeTitleBar(WId wid)
+void SandboxApp::removeTitleBar(WId wid)
 {
     NSView *nsView = reinterpret_cast<NSView*>(wid);
     NSWindow *window = [nsView window];

sandbox/statuswindow.h

@@ -1,21 +0,0 @@
-#ifndef STATUSWINDOW_H
-#define STATUSWINDOW_H
-
-#include <QQuickWindow>
-
-class StatusWindow: public QQuickWindow
-{
-    Q_OBJECT
-
-public:
-    explicit StatusWindow(QWindow *parent = nullptr)
-        : QQuickWindow(parent)
-    {
-        removeTitleBar(winId());
-    }
-
-private:
-    void removeTitleBar(WId wid);
-};
-
-#endif // STATUSWINDOW_H

src/StatusQ/Components/StatusBadge.qml

@@ -28,7 +28,7 @@ Rectangle {
         visible: statusBadge.value > 0
         font.pixelSize: statusBadge.value > 99 ? 10 : 12
         font.weight: Font.Bold
-        color: Theme.palette.statusBadge.foregroundColor
+        color: Theme.palette.white
         anchors.centerIn: parent
         text: {
             if (statusBadge.value > 99) {

src/StatusQ/Components/StatusRoundIcon.qml

@@ -1,28 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-Rectangle {
-    id: statusRoundedIcon
-
-    implicitWidth: 40
-    implicitHeight: 40
-    radius: width / 2;
-
-    color: Theme.palette.primaryColor3;
-    property StatusIconSettings icon: StatusIconSettings {
-        width: 24
-        height: 24
-    }
-
-    StatusIcon {
-        id: statusIcon
-        anchors.centerIn: parent
-
-        width: statusRoundedIcon.icon.width
-        height: statusRoundedIcon.icon.height
-
-        color: Theme.palette.primaryColor1
-        icon: statusRoundedIcon.icon.name
-    }
-}

src/StatusQ/Components/qmldir

@@ -3,5 +3,4 @@ module StatusQ.Components
 StatusBadge 0.1 StatusBadge.qml
 StatusLetterIdenticon 0.1 StatusLetterIdenticon.qml
 StatusLoadingIndicator 0.1 StatusLoadingIndicator.qml
-StatusRoundIcon 0.1 StatusRoundIcon.qml
 StatusRoundedImage 0.1 StatusRoundedImage.qml

src/StatusQ/Controls/StatusBaseButton.qml

@@ -1,142 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-Rectangle {
-    id: statusBaseButton
-
-    enum Size {
-        Small,
-        Large
-    }
-
-    enum Type {
-        Normal,
-        Danger
-    }
-
-    property alias iconName: icon.icon
-
-    property bool loading: false
-
-    property alias hovered: sensor.containsMouse
-
-    property int size: StatusBaseButton.Size.Large
-    property int type: StatusBaseButton.Type.Normal
-
-    property alias text: label.text
-    property alias font: label.font
-
-    property real defaultLeftPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultRightPadding: size === StatusBaseButton.Size.Large ? 24 : 12
-    property real defaultTopPadding: size === StatusBaseButton.Size.Large ? 11 : 10
-    property real defaultBottomPadding: size === StatusBaseButton.Size.Large ? 11 : 10
-
-
-    property real leftPadding: defaultLeftPadding
-    property real rightPadding: defaultRightPadding
-    property real topPadding: defaultTopPadding
-    property real bottomPadding: defaultBottomPadding
-
-    property color normalColor
-    property color hoverColor
-    property color disaledColor
-
-    property color textColor
-    property color disabledTextColor
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-
-
-    /// Implementation
-
-    implicitWidth: sensor.width
-    implicitHeight: sensor.height
-
-    radius: 8
-
-    color: {
-        if (statusBaseButton.enabled) {
-            return sensor.containsMouse ? hoverColor
-                                        : normalColor
-        } else {
-            return disaledColor
-        }
-    }
-
-
-    MouseArea {
-        id: sensor
-        width: layout.width + statusBaseButton.leftPadding + statusBaseButton.rightPadding
-        height: layout.height + statusBaseButton.topPadding + statusBaseButton.bottomPadding
-
-        cursorShape: loading ? Qt.ArrowCursor
-                             : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
-
-        Row {
-            id: layout
-            anchors.left: parent.left
-            anchors.leftMargin: statusBaseButton.leftPadding
-            anchors.verticalCenter: parent.verticalCenter
-            spacing: 4
-            StatusIcon {
-                id: icon
-                anchors.verticalCenter: parent.verticalCenter
-                visible: !loading && iconName !== ""
-                color: statusBaseButton.enabled ? textColor
-                                                : disabledTextColor
-            } // Icon
-            StatusBaseText {
-                id: label
-                visible: !loading
-                anchors.verticalCenter: parent.verticalCenter
-                font.pixelSize: size === StatusBaseButton.Size.Large ? 15 : 13 // by design
-
-                color: statusBaseButton.enabled ? textColor
-                                                : disabledTextColor
-            } // Text
-
-            Loader {
-                anchors.verticalCenter: parent.verticalCenter
-                active: loading
-                sourceComponent: StatusLoadingIndicator {
-                    color: statusBaseButton.enabled ? textColor
-                                                    : disabledTextColor
-                } // Indicator
-            } // Loader
-        } // Ro
-
-
-        onPressed: {
-            if (!loading) {
-                statusBaseButton.pressed(mouse)
-            }
-        }
-
-        onReleased: {
-            if (!loading) {
-                statusBaseButton.released(mouse)
-            }
-        }
-
-        onClicked: {
-            if (!loading) {
-                statusBaseButton.clicked(mouse)
-            }
-        }
-
-        onPressAndHold: {
-            if (!loading) {
-                statusBaseButton.pressAndHold(mouse)
-            }
-        }
-    } // Sensor
-
-}

src/StatusQ/Controls/StatusButton.qml

@@ -1,17 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusBaseButton {
-    id: statusButton
-
-    normalColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
-                                                       : Theme.palette.dangerColor3
-    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor2
-                                                       : Theme.palette.dangerColor2
-    disaledColor: Theme.palette.baseColor2
-
-    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
-                                                     : Theme.palette.dangerColor1
-    disabledTextColor: Theme.palette.baseColor1
-}

src/StatusQ/Controls/StatusCheckBox.qml

@@ -1,42 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtGraphicalEffects 1.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-
-CheckBox {
-    id: statusCheckBox
-
-    indicator: Rectangle {
-        implicitWidth: 18
-        implicitHeight: 18
-        x: statusCheckBox.leftPadding
-        y: parent.height / 2 - height / 2
-        radius: 2
-        color: (statusCheckBox.down || statusCheckBox.checked) ? Theme.palette.primaryColor1
-                                                               : Theme.palette.directColor8
-
-        StatusIcon {
-            icon: "checkbox"
-            width: 11
-            height: 8
-            anchors.centerIn: parent
-            anchors.horizontalCenterOffset: 1
-            color: Theme.palette.white
-            visible: statusCheckBox.down || statusCheckBox.checked
-        }
-    }
-
-    contentItem: StatusBaseText {
-        text: statusCheckBox.text
-        opacity: enabled ? 1.0 : 0.3
-        verticalAlignment: Text.AlignVCenter
-        wrapMode: Text.WordWrap
-        width: parent.width
-        leftPadding: !!statusCheckBox.text ? statusCheckBox.indicator.width + statusCheckBox.spacing
-                                           : statusCheckBox.indicator.width
-    }
-}

src/StatusQ/Controls/StatusFlatButton.qml

@@ -1,21 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
-StatusBaseButton {
-    id: statusFlatButton
-
-    normalColor: "transparent"
-    hoverColor:  type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor3
-                                                       : Theme.palette.dangerColor3
-    disaledColor: "transparent"
-
-    textColor: type === StatusBaseButton.Type.Normal ? Theme.palette.primaryColor1
-                                                     : Theme.palette.dangerColor1
-    disabledTextColor: Theme.palette.baseColor1
-
-    border.color: type === StatusBaseButton.Type.Normal || hovered ? "transparent"
-                                                          : Theme.palette.baseColor2
-    rightPadding: iconName !== "" ? 18 : defaultRightPadding
-    leftPadding: iconName !== "" ? 14 : defaultLeftPadding
-}

src/StatusQ/Controls/StatusFlatRoundButton.qml

@@ -1,138 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-
-Rectangle {
-    id: statusFlatRoundButton
-
-    property alias icon: iconSettings.name
-
-    property bool loading: false
-
-    property int type: StatusFlatRoundButton.Type.Primary
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    enum Type {
-        Primary,
-        Secondary
-    }
-
-
-
-    /// Implementation
-
-    QtObject {
-        id: iconSettings
-        property alias name: statusIcon.icon
-        property color color: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Secondary:
-                return Theme.palette.directColor1;
-            case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor1;
-            }
-        }
-
-        property color disabledColor: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Secondary:
-                return Theme.palette.baseColor1;
-            case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.baseColor1;
-            }
-        }
-    }
-
-    QtObject {
-        id: backgroundSettings
-
-        property color color: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Primary:
-            case StatusFlatRoundButton.Type.Secondary:
-                return "transparent";
-            }
-        }
-
-        property color hoverColor: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Primary:
-                return Theme.palette.primaryColor2;
-            case StatusFlatRoundButton.Type.Secondary:
-                return Theme.palette.baseColor2;
-            }
-        }
-
-        property color disabledColor: {
-            switch(statusFlatRoundButton.type) {
-            case StatusFlatRoundButton.Type.Primary:
-            case StatusFlatRoundButton.Type.Secondary:
-                return "transparent";
-            }
-        }
-    }
-
-    implicitWidth: 44
-    implicitHeight: 44
-    radius: 8
-
-    color: {
-        if (statusFlatRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
-                                        : backgroundSettings.color
-        } else {
-            return backgroundSettings.disabledColor
-        }
-    }
-    MouseArea {
-        id: sensor
-
-        anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
-                             : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
-
-
-        StatusIcon {
-            id: statusIcon
-            anchors.centerIn: parent
-            visible: !loading
-
-            width: statusFlatRoundButton.width -  20
-            height: statusFlatRoundButton.height - 20
-
-            color: {
-                if (statusFlatRoundButton.enabled) {
-                    return iconSettings.color
-                } else {
-                    return iconSettings.disabledColor
-                }
-            }
-        } // Icon
-        Loader {
-            active: loading
-            anchors.centerIn: parent
-            sourceComponent: StatusLoadingIndicator {
-                color: {
-                    if (statusFlatRoundButton.enabled) {
-                        return iconSettings.color
-                    } else {
-                        return iconSettings.disabledColor
-                    }
-                }
-            } // Indicator
-        } // Loader
-
-        onClicked: statusFlatRoundButton.clicked(mouse)
-        onPressed: statusFlatRoundButton.pressed(mouse)
-        onReleased: statusFlatRoundButton.released(mouse)
-        onPressAndHold: statusFlatRoundButton.pressAndHold(mouse)
-    } // Sensor
-} // Rectangle

src/StatusQ/Controls/StatusIconTabButton.qml

@@ -40,37 +40,10 @@ TabButton {
 
         Component {
             id: imageIcon
-            Item {
+            StatusRoundedImage {
                 width: 28
                 height: 28
-                StatusRoundedImage {
-                    id: statusRoundImage
-                    width: parent.width
-                    height: parent.height
-                    image.source: icon.source
-                }
-                Loader {
-                    sourceComponent: {
-                        switch (statusRoundImage.image.status) {
-                            case Image.Loading:
-                              return statusLoadingIndicator
-                              break;
-                            case Image.Error:
-                              return letterIdenticon
-                              break;
-                        }
-                    }
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    active: statusRoundImage.image.status === Image.Loading || statusRoundImage.image.status === Image.Error
-                }
-
-                Component {
-                    id: statusLoadingIndicator
-                    StatusLoadingIndicator {
-                        color: Theme.palette.directColor6
-                    }
-                }
+                image.source: icon.source
             }
         }
 

src/StatusQ/Controls/StatusRadioButton.qml

@@ -1,41 +0,0 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQml 2.14
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-
-RadioButton {
-    id: statusRadioButton
-
-    width: indicator.implicitWidth
-
-    indicator: Rectangle {
-        implicitWidth: 20
-        implicitHeight: 20
-        x: 0
-        y: 6
-        radius: 10
-        color: statusRadioButton.checked ? Theme.palette.primaryColor1
-                                         : Theme.palette.directColor8
-
-        Rectangle {
-            width: 12
-            height: 12
-            radius: 6
-            anchors.horizontalCenter: parent.horizontalCenter
-            anchors.verticalCenter: parent.verticalCenter
-            color: statusRadioButton.checked ? Theme.palette.white : "transparent"
-            visible: statusRadioButton.checked
-        }
-    }
-    contentItem: StatusBaseText {
-        text: statusRadioButton.text
-        color: Theme.palette.directColor1
-        verticalAlignment: Text.AlignVCenter
-        leftPadding: !!statusRadioButton.text ? statusRadioButton.indicator.width + statusRadioButton.spacing
-                                              : statusRadioButton.indicator.width
-    }
-}

src/StatusQ/Controls/StatusRoundButton.qml

@@ -1,140 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-
-Rectangle {
-    id: statusRoundButton
-
-    property alias icon: iconSettings.name
-
-    property bool loading: false
-
-    property int type: StatusRoundButton.Type.Primary
-
-    signal pressed(var mouse)
-    signal released(var mouse)
-    signal clicked(var mouse)
-    signal pressAndHold(var mouse)
-
-    enum Type {
-        Primary,
-        Secondary
-    }
-
-
-
-    /// Implementation
-
-    QtObject {
-        id: iconSettings
-        property alias name: statusIcon.icon
-        property color color: {
-            switch(statusRoundButton.type) {
-            case StatusRoundButton.Type.Primary:
-                return Theme.palette.primaryColor1;
-            case StatusRoundButton.Type.Secondary:
-                return Theme.palette.indirectColor1;
-            }
-        }
-
-        property color disabledColor: {
-            switch(statusRoundButton.type) {
-            case StatusRoundButton.Type.Primary:
-                return Theme.palette.baseColor1;
-            case StatusRoundButton.Type.Secondary:
-                return Theme.palette.indirectColor1;
-            }
-        }
-    }
-
-    QtObject {
-        id: backgroundSettings
-
-        property color color: {
-            switch(statusRoundButton.type) {
-            case StatusRoundButton.Type.Primary:
-                return Theme.palette.primaryColor3;
-            case StatusRoundButton.Type.Secondary:
-                return Theme.palette.primaryColor1;
-            }
-        }
-
-        property color hoverColor: {
-            switch(statusRoundButton.type) {
-            case StatusRoundButton.Type.Primary:
-                return Theme.palette.primaryColor2;
-            case StatusRoundButton.Type.Secondary:
-                return Theme.palette.miscColor1;
-            }
-        }
-
-        property color disabledColor: {
-            switch(statusRoundButton.type) {
-            case StatusRoundButton.Type.Primary:
-                return Theme.palette.indirectColor1;
-            case StatusRoundButton.Type.Secondary:
-                return Theme.palette.baseColor1;
-            }
-        }
-    }
-
-    implicitWidth: 44
-    implicitHeight: 44
-    radius: width / 2;
-
-    color: {
-        if (statusRoundButton.enabled) {
-            return sensor.containsMouse ? backgroundSettings.hoverColor
-                                        : backgroundSettings.color
-        } else {
-            return backgroundSettings.disabledColor
-        }
-    }
-    MouseArea {
-        id: sensor
-
-        anchors.fill: parent
-        cursorShape: loading ? Qt.ArrowCursor
-                             : Qt.PointingHandCursor
-        hoverEnabled: !loading
-        enabled: !loading
-
-
-        StatusIcon {
-            id: statusIcon
-            anchors.centerIn: parent
-            visible: !loading
-
-            width: statusRoundButton.width -  20
-            height: statusRoundButton.height - 20
-
-            color: {
-                if (statusRoundButton.enabled) {
-                    return iconSettings.color
-                } else {
-                    return iconSettings.disabledColor
-                }
-            }
-        } // Icon
-        Loader {
-            active: loading
-            anchors.centerIn: parent
-            sourceComponent: StatusLoadingIndicator {
-                color: {
-                    if (statusRoundButton.enabled) {
-                        return iconSettings.color
-                    } else {
-                        return iconSettings.disabledColor
-                    }
-                }
-            } // Indicator
-        } // Loader
-
-        onClicked: statusRoundButton.clicked(mouse)
-        onPressed: statusRoundButton.pressed(mouse)
-        onReleased: statusRoundButton.released(mouse)
-        onPressAndHold: statusRoundButton.pressAndHold(mouse)
-    } // Sensor
-} // Rectangle

src/StatusQ/Controls/StatusSwitch.qml

@@ -1,66 +0,0 @@
-import QtQuick 2.12
-import QtQuick.Controls 2.14
-import QtGraphicalEffects 1.14
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Components 0.1
-
-Switch {
-    id: statusSwitch
-
-    indicator: Rectangle {
-        id: oval
-        implicitWidth: 52
-        implicitHeight: 28
-        x: statusSwitch.leftPadding
-        y: parent.height / 2 - height / 2
-        radius: 14
-        color: statusSwitch.checked ? Theme.palette.primaryColor1
-                               : Theme.palette.directColor8
-
-
-        Rectangle {
-            id: circle
-            y: 4
-            width: 20
-            height: 20
-            radius: 10
-            color: Theme.palette.white
-            layer.enabled: true
-            layer.effect: DropShadow {
-                width: parent.width
-                height: parent.height
-                visible: true
-                verticalOffset: 1
-                fast: true
-                cached: true
-                color: Theme.palette.dropShadow
-            }
-
-            states: [
-                State {
-                    name: "on"
-                    when: statusSwitch.checked
-                    PropertyChanges { target: circle; x: oval.width - circle.width - 4 }
-                },
-                State {
-                    name: "off"
-                    when: !statusSwitch.checked
-                    PropertyChanges { target: circle; x: 4 }
-                }
-            ]
-
-            transitions: Transition {
-                reversible: true
-                NumberAnimation { properties: "x"; easing.type: Easing.Linear; duration: 120; }
-            }
-        }
-    }
-
-    contentItem: StatusBaseText {
-        text: statusSwitch.text
-        opacity: enabled ? 1.0 : 0.3
-        verticalAlignment: Text.AlignVCenter
-        leftPadding: !!statusSwitch.text ? statusSwitch.indicator.width + statusSwitch.spacing : statusSwitch.indicator.width
-    }
-}

src/StatusQ/Controls/qmldir

@@ -3,11 +3,4 @@ module StatusQ.Controls
 StatusIconTabButton 0.1 StatusIconTabButton.qml
 StatusNavBarTabButton 0.1 StatusNavBarTabButton.qml
 StatusToolTip 0.1 StatusToolTip.qml
-StatusBaseButton 0.1 StatusBaseButton.qml
-StatusButton 0.1 StatusButton.qml
-StatusFlatButton 0.1 StatusFlatButton.qml
-StatusRoundButton 0.1 StatusRoundButton.qml
-StatusFlatRoundButton 0.1 StatusFlatRoundButton.qml
-StatusSwitch 0.1 StatusSwitch.qml
-StatusRadioButton 0.1 StatusRadioButton.qml
-StatusCheckBox 0.1 StatusCheckBox.qml
+

src/StatusQ/Core/StatusIconSettings.qml

@@ -1,11 +0,0 @@
-import QtQuick 2.13
-
-QtObject {
-    id: statusIconSettings
-
-    property string name
-    property real width
-    property real height
-    property color color
-    property url source
-}

src/StatusQ/Core/StatusImageSettings.qml

@@ -1,10 +0,0 @@
-import QtQuick 2.13
-
-QtObject {
-    id: statusImageSettings
-
-    property url source
-    property real width
-    property real height
-}
-

src/StatusQ/Core/Theme/StatusDarkTheme.qml

@@ -116,13 +116,5 @@ ThemePalette {
     miscColor9: getColor('moss2')
     miscColor10: getColor('brown3')
     miscColor11: getColor('yellow2')
-
-    property QtObject statusAppNavBar: QtObject {
-        property color backgroundColor: baseColor5
-    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: baseColor3
-    }
 }
 

src/StatusQ/Core/Theme/StatusLightTheme.qml

@@ -116,13 +116,5 @@ ThemePalette {
     miscColor9: getColor('moss')
     miscColor10: getColor('brown')
     miscColor11: getColor('brown2')
-
-    property QtObject statusAppNavBar: QtObject {
-        property color backgroundColor: baseColor4
-    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: white
-    }
 }
 

src/StatusQ/Core/Theme/Theme.qml

@@ -4,7 +4,10 @@ import QtQuick 2.13
 
 QtObject {
     id: appTheme
-    property QtObject palette: StatusLightTheme {}
+    // Replace it with:
+    //      property QtObject palette: StatusLightTheme {}
+    // for reloading
+    property ThemePalette palette: StatusLightTheme {}
 
     function setTheme(theme) {
         palette = theme

src/StatusQ/Core/Theme/ThemePalette.qml

@@ -25,8 +25,6 @@ QtObject {
     property color black: getColor('black')
     property color white: getColor('white')
 
-    property color dropShadow: getColor('black', 0.12)
-
     property color baseColor1
     property color baseColor2
     property color baseColor3
@@ -78,14 +76,6 @@ QtObject {
     property color miscColor10
     property color miscColor11
 
-    property QtObject statusAppNavBar: QtObject {
-        property color backgroundColor
-    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor
-    }
-
     function alphaColor(color, alpha) {
         let actualColor = Qt.darker(color, 1)
         actualColor.a = alpha

src/StatusQ/Core/qmldir

@@ -2,6 +2,4 @@ module StatusQ.Core
 
 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
-StatusIconSettings 0.1 StatusIconSettings.qml
-StatusImageSettings 0.1 StatusImageSettings.qml
 

src/StatusQ/Layout/StatusAppNavBar.qml

@@ -1,135 +0,0 @@
-import QtQuick 2.13
-import QtQuick.Layouts 1.13
-import QtQuick.Controls 2.13
-
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
-Rectangle {
-    id: statusAppNavBar
-
-    property StatusNavBarTabButton navBarChatButton
-    property list<StatusNavBarTabButton> navBarTabButtons
-    property alias navBarCommunityTabButtons: navBarCommunityTabButtons
-
-    property int navBarContentHeight: 0
-    property int navBarContentHeightWithoutCommunityButtons: 0
-
-    width: 78
-    implicitHeight: 600
-    color: Theme.palette.statusAppNavBar.backgroundColor
-
-    Component.onCompleted: {
-        navBarContentHeightWithoutCommunityButtons = (navBarChatButtonSlot.anchors.topMargin + navBarChatButtonSlot.height) + 
-                                  (separator.anchors.topMargin + separator.height) +
-                                  (navBarTabButtonsSlot.height + navBarTabButtonsSlot.anchors.topMargin + navBarTabButtonsSlot.anchors.bottomMargin)
-        navBarContentHeight = navBarContentHeightWithoutCommunityButtons +
-                              (navBarCommunityTabButtonsSlot.height + navBarScrollSection.anchors.topMargin)
-    }
-
-    onNavBarChatButtonChanged: {
-        if (!!navBarChatButton) {
-            navBarChatButton.parent = navBarChatButtonSlot
-        }
-    }
-
-    onNavBarTabButtonsChanged: {
-        if (navBarTabButtons.length) {
-            for (let idx in navBarTabButtons) {
-                navBarTabButtons[idx].parent = navBarTabButtonsSlot
-            }
-        }
-    }
-
-    Item {
-        id: navBarChatButtonSlot
-        anchors.top: parent.top
-        anchors.topMargin: 48
-        anchors.horizontalCenter: parent.horizontalCenter
-        height: statusAppNavBar.navBarChatButton.height
-        width: statusAppNavBar.navBarChatButton.width
-    }
-
-    Rectangle {
-        id: separatorTop
-        height: 1
-        width: 30
-        color: Theme.palette.directColor7
-        anchors.top: navBarChatButtonSlot.bottom
-        anchors.topMargin: 16
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: separator.anchors.topMargin === 0
-    }
-
-    ScrollView {
-        id: navBarScrollSection
-        anchors.top: separatorTop.visible ? separatorTop.bottom : navBarChatButtonSlot.bottom
-        anchors.topMargin: separatorTop.visible ? 0 : 12
-        anchors.horizontalCenter: statusAppNavBar.horizontalCenter
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
-
-        Component.onCompleted: {
-            if (navBarContentHeight > statusAppNavBar.height) {
-                height = statusAppNavBar.height - 
-                         statusAppNavBar.navBarContentHeightWithoutCommunityButtons -
-                         (!!navBarTabButtonsSlot.anchors.bottom ? navBarTabButtonsSlot.anchors.bottomMargin : navBarTabButtonsSlot.anchors.topMargin)
-                bottomPadding = 16
-                topPadding = 16
-            } else {
-                height = navBarCommunityTabButtonsSlot.implicitHeight
-            }
-        }
-
-        Column {
-            id: navBarCommunityTabButtonsSlot
-            width: navBarScrollSection.width
-            anchors.top: parent.top
-            anchors.horizontalCenter: parent.horizontalCenter
-            spacing: 12
-
-            onImplicitHeightChanged: {
-                statusAppNavBar.Component.onCompleted()
-                navBarTabButtonsSlot.Component.onCompleted()
-                navBarScrollSection.Component.onCompleted()
-            }
-
-            Repeater {
-                id: navBarCommunityTabButtons
-            }
-        }
-    }
-
-    Rectangle {
-        id: separator
-        height: 1
-        width: 30
-        color: Theme.palette.directColor7
-        anchors.top: navBarCommunityTabButtons.model && navBarCommunityTabButtons.model.count > 0 ? navBarScrollSection.bottom : navBarChatButtonSlot.bottom
-        anchors.topMargin: navBarScrollSection.height < navBarCommunityTabButtonsSlot.implicitHeight ? 0 : 16
-        anchors.horizontalCenter: parent.horizontalCenter
-        visible: navBarChatButton !== null && navBarTabButtons.length > 0
-    }
-
-    Column {
-        id: navBarTabButtonsSlot
-        anchors.horizontalCenter: parent.horizontalCenter
-        spacing: 12
-
-        Component.onCompleted: {
-            if (navBarContentHeight > statusAppNavBar.height) {
-                anchors.top = undefined
-                anchors.topMargin = 0
-                anchors.bottom = statusAppNavBar.bottom
-                anchors.bottomMargin = 32
-            } else {
-                anchors.bottom = undefined
-                anchors.bottomMargin = 0
-                anchors.top = separator.visible ? separator.bottom : parent.top
-                anchors.topMargin = separator.visible ? 16 : navBarChatButtonSlot.anchors.topMargin
-            }
-        }
-    }
-}
-

src/StatusQ/Layout/qmldir

@@ -1,5 +0,0 @@
-module StatusQ.Layout
-
-StatusAppNavBar 0.1 StatusAppNavBar.qml
-
-

src/assets/img/icons/checkbox.svg

@@ -1,3 +0,0 @@
-<svg width="11" height="8" viewBox="0 0 11 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M3.76413 5.69006L9.32479 0.278881C9.70676 -0.0928258 10.3248 -0.0940903 10.7111 0.28187C11.0948 0.655228 11.0968 1.25861 10.7142 1.63093L4.45575 7.72112C4.26582 7.90595 4.01753 7.99919 3.76838 8C3.51183 7.99812 3.26284 7.90634 3.07584 7.72437L0.284232 5.0078C-0.0959013 4.63789 -0.0957078 4.03795 0.290638 3.66199C0.674309 3.28863 1.29863 3.29084 1.67363 3.65576L3.76413 5.69006Z" fill="white"/>
-</svg>