adding clock

This commit is contained in:
Wayne Chen 2019-02-25 18:00:56 -08:00
parent badd0b8bd3
commit 650b34c463
5 changed files with 156 additions and 28 deletions

Binary file not shown.

View file

@ -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,44 +49,131 @@ Item {
}
Item {
width: 150
height: 50
id: rightContainer
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.verticalCenter: parent.verticalCenter
anchors.rightMargin: 20
anchors.bottom: parent.bottom
ColumnLayout {
anchors.fill: parent
function timeChanged() {
var date = new Date();
clockTime.text = date.toLocaleTimeString(Qt.locale("en_US"), "h:mm ap");
var regex = /[\sa-zA-z]+/;
clockTime.text = clockTime.text.replace(regex, "");
clockAmPm.text = date.toLocaleTimeString(Qt.locale("en_US"), "ap");
}
RalewaySemiBold {
text: Account.loggedIn ? qsTr("Log out") : qsTr("Log in")
horizontalAlignment: Text.AlignRight
Layout.alignment: Qt.AlignRight
font.pixelSize: 20
color: "#afafaf"
Timer {
interval: 1000; running: true; repeat: true;
onTriggered: rightContainer.timeChanged();
}
Item {
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
}
RalewaySemiBold {
visible: Account.loggedIn
height: Account.loggedIn ? parent.height/2 - parent.spacing/2 : 0
text: Account.loggedIn ? "[" + tabletRoot.usernameShort + "]" : ""
horizontalAlignment: Text.AlignRight
Layout.alignment: Qt.AlignRight
font.pixelSize: 20
Text {
anchors.left: parent.left
id: clockAmPm
anchors.right: parent.right
font.capitalization: Font.AllUppercase
font.pixelSize: 12
font.family: "Rawline"
color: "#afafaf"
}
}
MouseArea {
anchors.fill: parent
onClicked: {
if (!Account.loggedIn) {
DialogsManager.showLoginDialog()
} else {
Account.logOut()
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
visible: !Account.loggedIn
text: qsTr("Log in")
horizontalAlignment: Text.AlignRight
Layout.alignment: Qt.AlignRight
font.pixelSize: 18
font.family: "Rawline"
color: "#afafaf"
}
TextMetrics {
id: loginTextMetrics
text: Account.loggedIn ? tabletRoot.usernameShort : loginText.text
font: loginText.font
}
HifiStylesUit.ShortcutText {
anchors.right: parent.right
visible: Account.loggedIn
text: "<a href='https://highfidelity.com'>" + tabletRoot.usernameShort + "</a>"
horizontalAlignment: Text.AlignRight
Layout.alignment: Qt.AlignRight
font.pixelSize: 18
font.bold: true
font.family: "Rawline"
linkColor: hifi.colors.blueAccent
}
MouseArea {
anchors.fill: parent
onClicked: {
if (!Account.loggedIn) {
DialogsManager.showLoginDialog();
} else {
Account.logOut();
}
}
}
}
Component.onCompleted: {
rightContainer.timeChanged();
}
}
}

View file

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

View file

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

View file

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