Capitalize all component folders

harmonyqml/components/Base/HAvatar.qml

@@ -0,0 +1,49 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.4
+import "../Base" as Base
+
+Rectangle {
+    property bool hidden: false
+    property var name: null  // null, string or PyQtFuture
+    property var imageSource: null
+    property int dimension: 48
+
+    readonly property string resolvedName:
+        ! name ? "?" :
+        typeof(name) == "string" ? name :
+        (name.value ? name.value : "?")
+
+    width: dimension
+    height: hidden ? 1 : dimension
+    opacity: hidden ? 0 : 1
+
+    color: resolvedName === "?" ?
+           Base.HStyle.avatar.background.unknown :
+           Qt.hsla(
+               Backend.hueFromString(resolvedName),
+               Base.HStyle.avatar.background.saturation,
+               Base.HStyle.avatar.background.lightness,
+               Base.HStyle.avatar.background.alpha
+            )
+
+    HLabel {
+        z: 1
+        anchors.centerIn: parent
+        visible: ! hidden
+
+        text: resolvedName.charAt(0)
+        color: Base.HStyle.avatar.letter
+        font.pixelSize: parent.height / 1.4
+    }
+
+    HImage {
+        z: 2
+        anchors.fill: parent
+        visible: ! hidden && imageSource !== null
+
+        Component.onCompleted: if (imageSource) {source = imageSource}
+        fillMode: Image.PreserveAspectCrop
+        sourceSize.width: dimension
+    }
+}

harmonyqml/components/Base/HButton.qml

@@ -0,0 +1,115 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+Button {
+    property string iconName: ""
+    property var iconDimension: null
+    property bool circle: false
+
+    property int fontSize: HStyle.fontSize.normal
+    property color backgroundColor: "lightgray"
+    property alias overlayOpacity: buttonBackgroundOverlay.opacity
+
+    property bool loading: false
+
+    property int contentWidth: 0
+
+    signal canceled
+    signal clicked
+    signal doubleClicked
+    signal entered
+    signal exited
+    signal pressAndHold
+    signal pressed
+    signal released
+
+    function loadingUntilFutureDone(future) {
+        loading = true
+        future.onGotResult.connect(function() { loading = false })
+    }
+
+    id: button
+    display: Button.TextBesideIcon
+
+    background: Rectangle {
+        id: buttonBackground
+        color: Qt.lighter(backgroundColor, checked ? 1.3 : 1.0)
+        radius: circle ? height : 0
+
+        Rectangle {
+            id: buttonBackgroundOverlay
+            anchors.fill: parent
+            radius: parent.radius
+            color: "black"
+            opacity: 0
+        }
+    }
+
+    Component {
+        id: buttonContent
+
+        HRowLayout {
+            id: contentLayout
+            spacing: button.text && iconName ? 5 : 0
+            Component.onCompleted: contentWidth = implicitWidth
+
+            HIcon {
+                svgName: loading ? "hourglass" : iconName
+                dimension: iconDimension || contentLayout.height
+            }
+
+            HLabel {
+                text: button.text
+                font.pixelSize: fontSize
+                horizontalAlignment: Text.AlignHCenter
+                verticalAlignment: Text.AlignVCenter
+
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+        }
+    }
+
+    Component {
+        id: loadingOverlay
+        HRowLayout {
+            HIcon {
+                svgName: "hourglass"
+                Layout.preferredWidth: contentWidth || -1
+                Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            }
+        }
+    }
+
+    contentItem: Loader {
+        sourceComponent:
+            loading && ! iconName ? loadingOverlay : buttonContent
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onCanceled: button.canceled()
+        onClicked: button.clicked()
+        onDoubleClicked: button.doubleClicked()
+        onEntered: {
+            overlayOpacity = checked ? 0 : 0.3
+            button.entered()
+        }
+        onExited: {
+            overlayOpacity = 0
+            button.exited()
+        }
+        onPressAndHold: button.pressAndHold()
+        onPressed: {
+            overlayOpacity += 0.3
+            button.pressed()
+        }
+        onReleased: {
+            if (checkable) { checked = ! checked }
+            overlayOpacity = checked ? 0 : 0.3
+            button.released()
+        }
+    }
+}

harmonyqml/components/Base/HColumnLayout.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+ColumnLayout {
+    id: columnLayout
+    spacing: 0
+
+    property int totalSpacing:
+        spacing * Math.max(0, (columnLayout.visibleChildren.length - 1))
+}

harmonyqml/components/Base/HGlassRectangle.qml

@@ -0,0 +1,38 @@
+import QtQuick 2.7
+import QtGraphicalEffects 1.0
+
+Item {
+    property bool isPageStackDescendant: true
+
+    default property alias children: rectangle.children
+    property alias color: rectangle.color
+    property alias gradient: rectangle.gradient
+    property alias blurRadius: fastBlur.radius
+    property alias border: rectangle.border
+    property alias radius: rectangle.radius
+
+    ShaderEffectSource {
+        id: effectSource
+        sourceItem: mainUIBackground
+        anchors.fill: parent
+        sourceRect: Qt.rect(
+            (isPageStackDescendant ? pageStack.x : 0) + parent.x,
+            (isPageStackDescendant ? pageStack.y : 0) + parent.y,
+            width,
+            height
+        )
+    }
+
+    FastBlur {
+        id: fastBlur
+        anchors.fill: effectSource
+        source: effectSource
+        radius: rectangle.color == "#00000000" ? 0 : 8
+    }
+
+    Rectangle {
+        id: rectangle
+        anchors.fill: parent
+        color: HStyle.sidePane.background
+    }
+}

harmonyqml/components/Base/HIcon.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+
+HImage {
+    property var svgName: null
+    property int dimension: 20
+
+    source: "../../icons/" + (svgName || "none") + ".svg"
+    sourceSize.width: svgName ? dimension : 0
+    sourceSize.height: svgName ? dimension : 0
+}

harmonyqml/components/Base/HImage.qml

@@ -0,0 +1,8 @@
+import QtQuick 2.7
+
+Image {
+    asynchronous: true
+    cache: true
+    mipmap: true
+    fillMode: Image.PreserveAspectFit
+}

harmonyqml/components/Base/HInterfaceBox.qml

@@ -0,0 +1,61 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+HScalingBox {
+    id: interfaceBox
+
+    property alias title: interfaceTitle.text
+    property alias buttonModel: interfaceButtonsRepeater.model
+    property var buttonCallbacks: []
+    property string enterButtonTarget: ""
+
+    default property alias body: interfaceBody.children
+
+    function clickEnterButtonTarget() {
+        for (var i = 0; i < buttonModel.length; i++) {
+            var btn = interfaceButtonsRepeater.itemAt(i)
+            if (btn.name === enterButtonTarget) { btn.clicked() }
+        }
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+        id: mainColumn
+
+        HRowLayout {
+            Layout.alignment: Qt.AlignHCenter
+            Layout.margins: interfaceBox.margins
+
+            HLabel {
+                id: interfaceTitle
+                font.pixelSize: HStyle.fontSize.big
+            }
+        }
+
+        Item { Layout.fillHeight: true }
+
+        ColumnLayout { id: interfaceBody }
+
+        Item { Layout.fillHeight: true }
+
+        HRowLayout {
+            Repeater {
+                id: interfaceButtonsRepeater
+                model: []
+
+                HButton {
+                    property string name: modelData.name
+
+                    id: button
+                    text: modelData.text
+                    iconName: modelData.iconName || ""
+                    onClicked: buttonCallbacks[modelData.name](button)
+
+                    Layout.fillWidth: true
+                    Layout.preferredHeight: 32
+                }
+            }
+        }
+    }
+}

harmonyqml/components/Base/HLabel.qml

@@ -0,0 +1,9 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import "."
+
+Label {
+    font.family: HStyle.fontFamily.sans
+    font.pixelSize: HStyle.fontSize.normal
+    textFormat: Text.PlainText
+}

harmonyqml/components/Base/HNoticeLabel.qml

@@ -0,0 +1,31 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+import "../Base" as Base
+
+Base.HRowLayout {
+    property alias text: noticeLabel.text
+    property alias color: noticeLabel.color
+    property alias font: noticeLabel.font
+    property alias backgroundColor: noticeLabelBackground.color
+    property alias radius: noticeLabelBackground.radius
+
+    Base.HLabel {
+        id: noticeLabel
+        horizontalAlignment: Text.AlignHCenter
+        wrapMode: Text.Wrap
+        padding: 3
+        leftPadding: 10
+        rightPadding: 10
+
+        Layout.margins: 10
+        Layout.alignment: Qt.AlignCenter
+        Layout.maximumWidth: parent.width - Layout.margins * 2
+
+        background: Rectangle {
+            id: noticeLabelBackground
+            color: Base.HStyle.box.background
+            radius: Base.HStyle.box.radius
+        }
+    }
+}

harmonyqml/components/Base/HRichLabel.qml

@@ -0,0 +1,23 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+HLabel {
+    id: label
+    textFormat: Text.RichText
+
+    MouseArea {
+        id: mouseArea
+        anchors.fill: parent
+        hoverEnabled: true
+
+        onPositionChanged: function (event) {
+            cursorShape = label.linkAt(event.x, event.y) ?
+                          Qt.PointingHandCursor : Qt.ArrowCursor
+        }
+
+        onClicked: function(event) {
+            var link = label.linkAt(event.x, event.y)
+            if (link) { Qt.openUrlExternally(link) }
+        }
+    }
+}

harmonyqml/components/Base/HRowLayout.qml

@@ -0,0 +1,11 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.4
+
+RowLayout {
+    id: rowLayout
+    spacing: 0
+
+    property int totalSpacing:
+        spacing * Math.max(0, (rowLayout.visibleChildren.length - 1))
+}

harmonyqml/components/Base/HScalingBox.qml

@@ -0,0 +1,15 @@
+import QtQuick 2.7
+
+HGlassRectangle {
+    property real widthForHeight: 0.75
+    property int baseHeight: 300
+    property int startScalingUpAboveHeight: 1080
+
+    readonly property int baseWidth: baseHeight * widthForHeight
+    readonly property int margins: baseHeight * 0.03
+
+    color: HStyle.box.background
+    height: Math.min(parent.height, baseHeight)
+    width: Math.min(parent.width, baseWidth)
+    scale: Math.max(1, parent.height / startScalingUpAboveHeight)
+}

harmonyqml/components/Base/HScrollableTextArea.qml

@@ -0,0 +1,24 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.2
+
+ScrollView {
+    property alias placeholderText: textArea.placeholderText
+    property alias text: textArea.text
+    property alias area: textArea
+
+    default property alias textAreaData: textArea.data
+
+    clip: true
+
+    TextArea {
+        id: textArea
+        readOnly: ! visible
+        selectByMouse: true
+
+        wrapMode: TextEdit.Wrap
+        font.family: HStyle.fontFamily.sans
+        font.pixelSize: HStyle.fontSize.normal
+        color: HStyle.colors.foreground
+    }
+}
+

harmonyqml/components/Base/HSplitView.qml

@@ -0,0 +1,7 @@
+import QtQuick 2.7
+import QtQuick.Controls 1.4 as Controls1
+
+//https://doc.qt.io/qt-5/qml-qtquick-controls-splitview.html
+Controls1.SplitView {
+    handleDelegate: Item {}
+}

harmonyqml/components/Base/HStatusAvatar.qml

@@ -0,0 +1,13 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.4
+
+HAvatar {
+    HImage {
+        id: status
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        source: "../../icons/status.svg"
+        sourceSize.width: 12
+    }
+}

harmonyqml/components/Base/HStyle.qml

@@ -0,0 +1,98 @@
+pragma Singleton
+import QtQuick 2.7
+
+QtObject {
+    id: style
+
+    readonly property QtObject fontSize: QtObject {
+        property int smallest: 6
+        property int smaller: 8
+        property int small: 12
+        property int normal: 16
+        property int big: 24
+        property int bigger: 32
+        property int biggest: 48
+    }
+
+    readonly property QtObject fontFamily: QtObject {
+        property string sans: "SFNS Display"
+        property string serif: "Roboto Slab"
+        property string mono: "Hack"
+    }
+
+    readonly property QtObject colors: QtObject {
+        property color background0: Qt.hsla(0, 0, 0.8, 0.7)
+        property color foreground: "black"
+        property color foregroundDim: Qt.hsla(0, 0, 0.2, 1)
+        property color foregroundError: Qt.hsla(0.95, 0.64, 0.32, 1)
+    }
+
+    property int radius: 5
+
+    readonly property QtObject sidePane: QtObject {
+        property color background: colors.background0
+    }
+
+    readonly property QtObject chat: QtObject {
+        readonly property QtObject roomHeader: QtObject {
+            property color background: colors.background0
+        }
+
+        readonly property QtObject messageList: QtObject {
+            property color background: colors.background0
+        }
+
+        readonly property QtObject message: QtObject {
+            property color background: colors.background0
+            property color body: colors.foreground
+            property color date: colors.foregroundDim
+        }
+
+        readonly property QtObject event: QtObject {
+            property color background: colors.background0
+            property real saturation: 0.22
+            property real lightness: 0.24
+            property color date: colors.foregroundDim
+        }
+
+        readonly property QtObject daybreak: QtObject {
+            property color background: colors.background0
+            property color foreground: colors.foreground
+            property int radius: style.radius
+        }
+
+        readonly property QtObject inviteBanner: QtObject {
+            property color background: colors.background0
+        }
+
+        readonly property QtObject leftBanner: QtObject {
+            property color background: colors.background0
+        }
+
+        readonly property QtObject sendBox: QtObject {
+            property color background: colors.background0
+        }
+    }
+
+    readonly property QtObject box: QtObject {
+        property color background: colors.background0
+        property int radius: style.radius
+    }
+
+    readonly property QtObject avatar: QtObject {
+        property int radius: style.radius
+        property color letter: "white"
+
+        readonly property QtObject background: QtObject {
+            property real saturation: 0.22
+            property real lightness: 0.5
+            property real alpha: 1
+            property color unknown: Qt.hsla(0, 0, 0.22, 1)
+        }
+    }
+
+    readonly property QtObject displayName: QtObject {
+        property real saturation: 0.32
+        property real lightness: 0.3
+    }
+}

harmonyqml/components/Base/HTextField.qml

@@ -0,0 +1,10 @@
+import QtQuick 2.7
+import QtQuick.Controls 2.0
+
+TextField {
+    font.family: HStyle.fontFamily.sans
+    font.pixelSize: HStyle.fontSize.normal
+    color: HStyle.colors.foreground
+
+    selectByMouse: true
+}

harmonyqml/components/Base/qmldir

@@ -0,0 +1 @@
+singleton HStyle 1.0 HStyle.qml