Merge pull request #15030 from wayne-chen/clockOnTablet

Case 21456, Case 21463: Clock On Tablet (81.0/master)

interface/resources/qml/hifi/tablet/TabletHome.qml

@@ -6,7 +6,7 @@ import QtQuick.Layouts 1.3
 import TabletScriptingInterface 1.0
 
 import "."
-import stylesUit 1.0
+import stylesUit 1.0 as HifiStylesUit
 import "../audio" as HifiAudio
 
 Item {
@@ -49,45 +49,117 @@ Item {
         }
 
         Item {
-            width: 150
+            id: rightContainer
-            height: 50
+            width: clockItem.width > loginItem.width ? clockItem.width + clockAmPmTextMetrics.width :
+                loginItem.width + clockAmPmTextMetrics.width
+            height: parent.height
+            anchors.top: parent.top
+            anchors.topMargin: 15
             anchors.right: parent.right
-            anchors.rightMargin: 30
+            anchors.rightMargin: 20
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.bottom: parent.bottom
 
-            ColumnLayout {
+            function timeChanged() {
-                anchors.fill: parent
+                var date = new Date();
-
+                clockTime.text = date.toLocaleTimeString(Qt.locale("en_US"), "h:mm ap");
-                RalewaySemiBold {
+                var regex = /[\sa-zA-z]+/;
-                    text: Account.loggedIn ? qsTr("Log out") : qsTr("Log in")
+                clockTime.text = clockTime.text.replace(regex, "");
-                    horizontalAlignment: Text.AlignRight
+                clockAmPm.text = date.toLocaleTimeString(Qt.locale("en_US"), "ap");
-                    Layout.alignment: Qt.AlignRight
-                    font.pixelSize: 20
-                    color: "#afafaf"
             }
 
-                RalewaySemiBold {
+            Timer {
-                    visible: Account.loggedIn
+                interval: 1000; running: true; repeat: true;
-                    height: Account.loggedIn ? parent.height/2 - parent.spacing/2 : 0
+                onTriggered: rightContainer.timeChanged();
-                    text: Account.loggedIn ? "[" + tabletRoot.usernameShort + "]" : ""
+            }
-                    horizontalAlignment: Text.AlignRight
+
-                    Layout.alignment: Qt.AlignRight
+            Item {
-                    font.pixelSize: 20
+                id: clockAmPmItem
+                width: clockAmPmTextMetrics.width
+                height: clockAmPmTextMetrics.height
+
+                anchors.top: parent.top
+                anchors.right: parent.right
+                TextMetrics {
+                    id: clockAmPmTextMetrics
+                    text: clockAmPm.text
+                    font: clockAmPm.font
+                }
+                Text {
+                    anchors.left: parent.left
+                    id: clockAmPm
+                    anchors.right: parent.right
+                    font.capitalization: Font.AllUppercase
+                    font.pixelSize: 12
+                    font.family: "Rawline"
                     color: "#afafaf"
                 }
             }
 
+            Item {
+                id: clockItem
+                width: clockTimeTextMetrics.width
+                height: clockTimeTextMetrics.height
+                anchors {
+                    top: parent.top
+                    topMargin: -10
+                    right: clockAmPmItem.left
+                    rightMargin: 5
+                }
+                TextMetrics {
+                    id: clockTimeTextMetrics
+                    text: clockTime.text
+                    font: clockTime.font
+                }
+                Text {
+                    anchors.top: parent.top
+                    anchors.right: parent.right
+                    id: clockTime
+                    font.bold: false
+                    font.pixelSize: 36
+                    font.family: "Rawline"
+                    color: "#afafaf"
+                }
+            }
+
+            Item {
+                id: loginItem
+                width: loginTextMetrics.width
+                height: loginTextMetrics.height
+                anchors {
+                    bottom: parent.bottom
+                    bottomMargin: 10
+                    right: clockAmPmItem.left
+                    rightMargin: 5
+                }
+                Text {
+                    id: loginText
+                    anchors.right: parent.right
+                    text: Account.loggedIn ? tabletRoot.usernameShort : qsTr("Log in")
+                    horizontalAlignment: Text.AlignRight
+                    Layout.alignment: Qt.AlignRight
+                    font.pixelSize: 18
+                    font.family: "Rawline"
+                    color: "#afafaf"
+                }
+                TextMetrics {
+                    id: loginTextMetrics
+                    text: loginText.text
+                    font: loginText.font
+                }
+
                 MouseArea {
                     anchors.fill: parent
                     onClicked: {
                         if (!Account.loggedIn) {
-                        DialogsManager.showLoginDialog()
+                            DialogsManager.showLoginDialog();
-                    } else {
-                        Account.logOut()
                         }
                     }
                 }
             }
+            Component.onCompleted: {
+                rightContainer.timeChanged();
+            }
+        }
     }
 
     Rectangle {

interface/resources/qml/hifi/tablet/TabletRoot.qml

@@ -178,9 +178,9 @@ Rectangle {
 
     function setUsername(newUsername) {
         username = newUsername;
-        usernameShort = newUsername.substring(0, 8);
+        usernameShort = newUsername.substring(0, 14);
 
-        if (newUsername.length > 8) {
+        if (newUsername.length > 14) {
              usernameShort = usernameShort + "..."
         }
     }

interface/resources/qml/styles-uit/Rawline.qml

@@ -0,0 +1,20 @@
+//
+//  Rawline.qml
+//
+//  Created by Wayne Chen on 25 Feb 2019
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.7
+
+Text {
+    id: root
+    property real size: 32
+    font.pixelSize: size
+    verticalAlignment: Text.AlignVCenter
+    horizontalAlignment: Text.AlignLeft
+    font.family: "Rawline"
+}

interface/resources/qml/stylesUit/Rawline.qml

@@ -0,0 +1,20 @@
+//
+//  Rawline.qml
+//
+//  Created by Wayne Chen on 25 Feb 2019
+//  Copyright 2019 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import QtQuick 2.7
+
+Text {
+    id: root
+    property real size: 32
+    font.pixelSize: size
+    verticalAlignment: Text.AlignVCenter
+    horizontalAlignment: Text.AlignLeft
+    font.family: "Rawline"
+}

interface/src/Application.cpp

@@ -1075,6 +1075,7 @@ Application::Application(int& argc, char** argv, QElapsedTimer& startupTimer, bo
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/FiraSans-SemiBold.ttf");
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/Raleway-Light.ttf");
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/Raleway-Regular.ttf");
+    QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/rawline-500.ttf");
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/Raleway-Bold.ttf");
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/Raleway-SemiBold.ttf");
     QFontDatabase::addApplicationFont(PathUtils::resourcesPath() + "fonts/Cairo-SemiBold.ttf");