chore: add StatusSwitch

2021-05-20 11:48:54 +03:00
24 changed files with 31 additions and 229 deletions
@@ -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.
@@ -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"
    }
@@ -96,10 +89,4 @@ GridLayout {
    StatusSwitch {

    }
-
-    StatusRadioButton {
-        text: "i'm radio!"
-    }
-
-    StatusCheckBox {}
 }
@@ -11,6 +11,7 @@ GridLayout {
    columns: 6
    columnSpacing: 5
    rowSpacing: 5
+    property ThemePalette theme

    Button {
        id: btn
@@ -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"
-    }
 }
@@ -2,12 +2,10 @@ 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
@@ -70,7 +68,7 @@ StatusWindow {
        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

@@ -79,14 +77,12 @@ StatusWindow {
            id: lightThemeBg

            width: rootWindow.width
-            height: page.height + 64
-            anchors.topMargin: 32
+            height: parent.height
            color: Theme.palette.baseColor5
            clip: true
            scale: rootWindow.factor

            Loader {
-                id: page
                active: true
                anchors.centerIn: parent

@@ -177,6 +173,7 @@ StatusWindow {
        id: controlsComponent
        Controls {
            anchors.centerIn: parent
+            theme: Theme.palette
        }
    }

@@ -184,6 +181,7 @@ StatusWindow {
        id: layoutComponent
        Layout {
            anchors.centerIn: parent
+            theme: Theme.palette
        }
    }

@@ -191,6 +189,7 @@ StatusWindow {
        id: othersComponent
        Others {
            anchors.centerIn: parent
+            theme: Theme.palette
        }
    }

@@ -12,7 +12,7 @@ SOURCES += \
        sandboxapp.cpp

 OBJECTIVE_SOURCES += \
-    statuswindow_mac.mm
+        sandboxapp_mac.mm

 RESOURCES += qml.qrc

@@ -28,13 +28,10 @@ OTHER_FILES += $$files($$PWD/../src/*, true)

 HEADERS += \
    handler.h \
-    sandboxapp.h \
-    statuswindow.h
+    sandboxapp.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
@@ -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()
@@ -13,6 +13,8 @@ public:

    void startEngine();

+    void removeTitleBar(WId wid);
+
 public slots:
    void restartEngine();

@@ -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];
@@ -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
@@ -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) {
@@ -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
-    }
-}
@@ -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
@@ -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
-    }
-}
@@ -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
            }
        }

@@ -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
-    }
-}
@@ -9,5 +9,4 @@ 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
+
@@ -1,9 +0,0 @@
-import QtQuick 2.13
-
-QtObject {
-    id: statusIconSettings
-
-    property string name
-    property real width
-    property real height
-}
@@ -120,9 +120,5 @@ ThemePalette {
    property QtObject statusAppNavBar: QtObject {
        property color backgroundColor: baseColor5
    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: baseColor3
-    }
 }

@@ -120,9 +120,5 @@ ThemePalette {
    property QtObject statusAppNavBar: QtObject {
        property color backgroundColor: baseColor4
    }
-
-    property QtObject statusBadge: QtObject {
-        property color foregroundColor: white
-    }
 }

@@ -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
@@ -82,10 +82,6 @@ QtObject {
        property color backgroundColor
    }

-    property QtObject statusBadge: QtObject {
-        property color foregroundColor
-    }
-
    function alphaColor(color, alpha) {
        let actualColor = Qt.darker(color, 1)
        actualColor.a = alpha
@@ -2,5 +2,4 @@ module StatusQ.Core

 StatusBaseText 0.1 StatusBaseText.qml
 StatusIcon 0.1 StatusIcon.qml
-StatusIconSettings 0.1 StatusIconSettings.qml

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