Backporting visual work from branch

This commit is contained in:
Brad Davis 2015-04-27 10:43:20 -07:00
parent 3032b1fb67
commit 0b1df891af
27 changed files with 466 additions and 246 deletions

View file

@ -5,9 +5,8 @@ import "controls"
import "styles"
Dialog {
HifiConstants { id: hifi }
title: "Login"
HifiPalette { id: hifiPalette }
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
objectName: "LoginDialog"
height: 512
width: 384
@ -117,7 +116,7 @@ Dialog {
width: 192
height: 64
anchors.horizontalCenter: parent.horizontalCenter
color: hifiPalette.hifiBlue
color: hifi.colors.hifiBlue
border.width: 0
radius: 10
@ -160,7 +159,7 @@ Dialog {
text:"Create Account"
font.pointSize: 12
font.bold: true
color: hifiPalette.hifiBlue
color: hifi.colors.hifiBlue
MouseArea {
anchors.fill: parent
@ -177,7 +176,7 @@ Dialog {
verticalAlignment: Text.AlignVCenter
font.pointSize: 12
text: "Recover Password"
color: hifiPalette.hifiBlue
color: hifi.colors.hifiBlue
MouseArea {
anchors.fill: parent

View file

@ -18,8 +18,6 @@ Dialog {
onImplicitHeightChanged: root.height = implicitHeight
onImplicitWidthChanged: root.width = implicitWidth
SystemPalette { id: palette }
function calculateImplicitWidth() {
if (buttons.visibleChildren.length < 2)
return;

View file

@ -7,12 +7,19 @@ import "styles"
Hifi.VrMenu {
id: root
HifiConstants { id: hifi }
anchors.fill: parent
objectName: "VrMenu"
enabled: false
opacity: 0.0
property int animationDuration: 200
HifiPalette { id: hifiPalette }
property var models: []
property var columns: []
z: 10000
onEnabledChanged: {
@ -22,7 +29,7 @@ Hifi.VrMenu {
opacity = enabled ? 1.0 : 0.0
if (enabled) {
forceActiveFocus()
}
}
}
// The actual animator
@ -41,10 +48,6 @@ Hifi.VrMenu {
if (!visible) reset();
}
property var models: []
property var columns: []
property var menuBuilder: Component {
Border {
Component.onCompleted: {
@ -58,10 +61,20 @@ Hifi.VrMenu {
y = lastMousePosition.y - height / 2;
}
}
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
border.color: hifiPalette.hifiBlue
color: sysPalette.window
border.color: hifi.colors.hifiBlue
color: hifi.colors.window
property int menuDepth
/*
MouseArea {
// Rectangle { anchors.fill: parent; color: "#7f0000FF"; visible: enabled }
anchors.fill: parent
onClicked: {
while (parent.menuDepth != root.models.length - 1) {
root.popColumn()
}
}
}
*/
ListView {
spacing: 6
@ -71,12 +84,11 @@ Hifi.VrMenu {
anchors.margins: outerMargin
id: listView
height: root.height
currentIndex: -1
onCountChanged: {
recalculateSize()
}
}
function recalculateSize() {
var newHeight = 0
var newWidth = minWidth;
@ -87,11 +99,11 @@ Hifi.VrMenu {
parent.height = newHeight + outerMargin * 2;
parent.width = newWidth + outerMargin * 2
}
highlight: Rectangle {
width: listView.minWidth - 32;
height: 32
color: sysPalette.highlight
color: hifi.colors.hifiBlue
y: (listView.currentItem) ? listView.currentItem.y : 0;
x: 32
Behavior on y {
@ -101,10 +113,8 @@ Hifi.VrMenu {
}
}
}
property int columnIndex: root.models.length - 1
model: root.models[columnIndex]
model: root.models[menuDepth]
delegate: Loader {
id: loader
sourceComponent: root.itemBuilder
@ -120,12 +130,6 @@ Hifi.VrMenu {
value: modelData
when: loader.status == Loader.Ready
}
Binding {
target: loader.item
property: "listViewIndex"
value: index
when: loader.status == Loader.Ready
}
Binding {
target: loader.item
property: "listView"
@ -133,26 +137,24 @@ Hifi.VrMenu {
when: loader.status == Loader.Ready
}
}
}
}
}
property var itemBuilder: Component {
Text {
SystemPalette { id: sp; colorGroup: SystemPalette.Active }
id: thisText
x: 32
property var source
property var root
property var listViewIndex
property var listView
text: typedText()
height: implicitHeight
width: implicitWidth
color: source.enabled ? "black" : "gray"
color: source.enabled ? hifi.colors.text : hifi.colors.disabledText
enabled: source.enabled
onImplicitWidthChanged: {
if (listView) {
listView.minWidth = Math.max(listView.minWidth, implicitWidth + 64);
@ -163,15 +165,27 @@ Hifi.VrMenu {
FontAwesome {
visible: source.type == 1 && source.checkable
x: -32
text: (source.type == 1 && source.checked) ? "\uF05D" : "\uF10C"
text: checkText();
color: parent.color
function checkText() {
if (source.type != 1) {
return;
}
// FIXME this works for native QML menus but I don't think it will
// for proxied QML menus
if (source.exclusiveGroup) {
return source.checked ? "\uF05D" : "\uF10C"
}
return source.checked ? "\uF046" : "\uF096"
}
}
FontAwesome {
visible: source.type == 2
x: listView.width - 64
x: listView.width - 32 - (hifi.layout.spacing * 2)
text: "\uF0DA"
color: parent.color
}
function typedText() {
switch(source.type) {
@ -200,38 +214,53 @@ Hifi.VrMenu {
interval: 1000
onTriggered: parent.select();
}
onEntered: {
if (source.type == 2 && enabled) {
timer.start()
}
}
onExited: {
timer.stop()
}
/*
* Uncomment below to have menus auto-popup
*
* FIXME if we enabled timer based menu popup, either the timer has
* to be very very short or after auto popup there has to be a small
* amount of time, or a test if the mouse has moved before a click
* will be accepted, otherwise it's too easy to accidently click on
* something immediately after the auto-popup appears underneath your
* cursor
*
*/
//onEntered: {
// if (source.type == 2 && enabled) {
// timer.start()
// }
//}
//onExited: {
// timer.stop()
//}
onClicked: {
select();
}
function select() {
timer.stop();
listView.currentIndex = listViewIndex
parent.root.selectItem(parent.source);
var popped = false;
while (columns.length - 1 > listView.parent.menuDepth) {
popColumn();
popped = true;
}
if (!popped || source.type != 1) {
parent.root.selectItem(parent.source);
}
}
}
}
}
function lastColumn() {
return columns[root.columns.length - 1];
}
function pushColumn(items) {
models.push(items)
if (columns.length) {
var oldColumn = lastColumn();
oldColumn.enabled = false;
oldColumn.opacity = 0.5;
//oldColumn.enabled = false
}
var newColumn = menuBuilder.createObject(root);
columns.push(newColumn);

View file

@ -5,6 +5,5 @@ import "."
import "../styles"
Original.Button {
style: ButtonStyle {
}
style: ButtonStyle { }
}

View file

@ -0,0 +1,16 @@
import QtQuick.Controls 1.3 as Original
import QtQuick.Controls.Styles 1.3
import "../styles"
import "."
Original.CheckBox {
text: "Check Box"
style: CheckBoxStyle {
indicator: FontAwesome {
text: control.checked ? "\uf046" : "\uf096"
}
label: Text {
text: control.text
}
}
}

View file

@ -11,28 +11,21 @@ import "../styles"
* Examine the QML ApplicationWindow.qml source for how it does this
*
*/
Item {
DialogBase {
id: root
HifiPalette { id: hifiPalette }
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
HifiConstants { id: hifi }
// FIXME better placement via a window manager
x: parent ? parent.width / 2 - width / 2 : 0
y: parent ? parent.height / 2 - height / 2 : 0
property int animationDuration: 400
property bool destroyOnInvisible: false
property bool destroyOnCloseButton: true
property bool resizable: false
property int animationDuration: hifi.effects.fadeInDuration
property int minX: 256
property int minY: 256
property int topMargin: root.height - clientBorder.height + 8
property int margins: 8
property string title
property int titleSize: titleBorder.height + 12
property string frameColor: hifiPalette.hifiBlue
property string backgroundColor: sysPalette.window
property string headerBackgroundColor: sysPalette.dark
clip: true
readonly property int topMargin: root.height - clientBorder.height + hifi.layout.spacing
/*
* Support for animating the dialog in and out.
@ -44,7 +37,8 @@ Item {
// visibility, so that we can do animations in both directions. Because
// visibility and enabled are boolean flags, they cannot be animated. So when
// enabled is change, we modify a property that can be animated, like scale or
// opacity.
// opacity, and then when the target animation value is reached, we can
// modify the visibility
onEnabledChanged: {
scale = enabled ? 1.0 : 0.0
}
@ -57,13 +51,13 @@ Item {
}
}
// We remove any load the dialog might have on the QML by toggling it's
// visibility based on the state of the animated property
// Once we're scaled to 0, disable the dialog's visibility
onScaleChanged: {
visible = (scale != 0.0);
}
// Some dialogs should be destroyed when they become invisible, so handle that
// Some dialogs should be destroyed when they become invisible,
// so handle that
onVisibleChanged: {
if (!visible && destroyOnInvisible) {
destroy();
@ -91,6 +85,7 @@ Item {
MouseArea {
id: sizeDrag
enabled: root.resizable
property int startX
property int startY
anchors.right: parent.right
@ -103,7 +98,7 @@ Item {
startY = mouseY
}
onPositionChanged: {
if (pressed && root.resizable) {
if (pressed) {
root.deltaSize((mouseX - startX), (mouseY - startY))
startX = mouseX
startY = mouseY
@ -111,83 +106,41 @@ Item {
}
}
/*
* Window decorations, with a title bar and frames
*/
Border {
id: windowBorder
anchors.fill: parent
border.color: root.frameColor
color: root.backgroundColor
MouseArea {
id: titleDrag
x: root.titleX
y: root.titleY
width: root.titleWidth
height: root.titleHeight
Border {
id: titleBorder
height: 48
drag {
target: root
minimumX: 0
minimumY: 0
maximumX: root.parent ? root.parent.width - root.width : 0
maximumY: root.parent ? root.parent.height - root.height : 0
}
Row {
id: windowControls
anchors.bottom: parent.bottom
anchors.top: parent.top
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
border.color: root.frameColor
color: root.headerBackgroundColor
Text {
id: titleText
// FIXME move all constant colors to our own palette class HifiPalette
color: "white"
text: root.title
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
}
MouseArea {
id: titleDrag
anchors.right: closeButton.left
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.top: parent.top
anchors.rightMargin: 4
drag {
target: root
minimumX: 0
minimumY: 0
maximumX: root.parent ? root.parent.width - root.width : 0
maximumY: root.parent ? root.parent.height - root.height : 0
}
}
Image {
id: closeButton
x: 360
height: 16
anchors.rightMargin: hifi.layout.spacing
FontAwesome {
id: icon
anchors.verticalCenter: parent.verticalCenter
width: 16
anchors.right: parent.right
anchors.rightMargin: 12
source: "../../styles/close.svg"
size: root.titleHeight - hifi.layout.spacing * 2
color: "red"
text: "\uf00d"
MouseArea {
anchors.margins: hifi.layout.spacing / 2
anchors.fill: parent
onClicked: {
root.close();
}
}
}
} // header border
Border {
id: clientBorder
border.color: root.frameColor
// FIXME move all constant colors to our own palette class HifiPalette
color: "#00000000"
anchors.bottom: parent.bottom
anchors.bottomMargin: 0
anchors.top: titleBorder.bottom
anchors.topMargin: -titleBorder.border.width
anchors.right: parent.right
anchors.rightMargin: 0
anchors.left: parent.left
anchors.leftMargin: 0
clip: true
} // client border
} // window border
}
}
}

View file

@ -0,0 +1,74 @@
import QtQuick 2.3
import QtQuick.Controls 1.2
import "."
import "../styles"
Item {
id: root
HifiConstants { id: hifi }
implicitHeight: 512
implicitWidth: 512
property string title
property int titleSize: titleBorder.height + 12
property string frameColor: hifi.colors.hifiBlue
property string backgroundColor: hifi.colors.dialogBackground
property bool active: false
property alias titleBorder: titleBorder
readonly property alias titleX: titleBorder.x
readonly property alias titleY: titleBorder.y
readonly property alias titleWidth: titleBorder.width
readonly property alias titleHeight: titleBorder.height
property alias clientBorder: clientBorder
readonly property real clientX: clientBorder.x + hifi.styles.borderWidth
readonly property real clientY: clientBorder.y + hifi.styles.borderWidth
readonly property real clientWidth: clientBorder.width - hifi.styles.borderWidth * 2
readonly property real clientHeight: clientBorder.height - hifi.styles.borderWidth * 2
/*
* Window decorations, with a title bar and frames
*/
Border {
id: windowBorder
anchors.fill: parent
border.color: root.frameColor
color: "#00000000"
Border {
id: titleBorder
height: hifi.layout.windowTitleHeight
anchors.right: parent.right
anchors.left: parent.left
border.color: root.frameColor
clip: true
color: root.active ?
hifi.colors.activeWindow.headerBackground :
hifi.colors.inactiveWindow.headerBackground
Text {
id: titleText
color: root.active ?
hifi.colors.activeWindow.headerText :
hifi.colors.inactiveWindow.headerText
text: root.title
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
anchors.fill: parent
}
} // header border
Border {
id: clientBorder
border.color: root.frameColor
color: root.backgroundColor
anchors.bottom: parent.bottom
anchors.top: titleBorder.bottom
anchors.topMargin: -titleBorder.border.width
anchors.right: parent.right
anchors.left: parent.left
clip: true
} // client border
} // window border
}

View file

@ -8,9 +8,9 @@ Text {
property int size: 32
width: size
height: size
font.pixelSize: size
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
horizontalAlignment: Text.AlignLeft
font.family: iconFont.name
font.pointSize: 18
}

View file

@ -1,24 +0,0 @@
import QtQuick 2.3
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Controls.Styles 1.3
Button {
text: "Text"
style: ButtonStyle {
background: Item { anchors.fill: parent }
label: Text {
id: icon
width: height
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
font.family: iconFont.name
font.pointSize: 18
property alias unicode: icon.text
FontLoader { id: iconFont; source: "/fonts/fontawesome-webfont.ttf"; }
text: control.text
color: control.enabled ? "white" : "dimgray"
}
}
}

View file

@ -1,5 +0,0 @@
import QtQuick 2.3
import QtQuick.Controls 1.3 as Original
import "../styles"
import "../controls"

View file

@ -0,0 +1,8 @@
import QtQuick.Controls 1.3 as Original
import QtQuick.Controls.Styles 1.3
import "../styles"
import "."
Original.Slider {
}

View file

@ -0,0 +1,11 @@
import QtQuick 2.4
import "../styles"
Item {
id: root
HifiConstants { id: hifi }
property real size: hifi.layout.spacing
property real multiplier: 1.0
height: size * multiplier
width: size * multiplier
}

View file

@ -0,0 +1,15 @@
import QtQuick.Controls 1.3 as Original
import QtQuick.Controls.Styles 1.3
import "../styles"
import "."
Original.SpinBox {
style: SpinBoxStyle {
HifiConstants { id: hifi }
font.family: hifi.fonts.fontFamily
font.pointSize: hifi.fonts.fontSize
}
}

View file

@ -1,7 +1,9 @@
import QtQuick 2.3 as Original
import "../styles"
Original.Text {
font.family: "Helvetica"
font.pointSize: 18
HifiConstants { id: hifi }
font.family: hifi.fonts.fontFamily
font.pointSize: hifi.fonts.fontSize
}

View file

@ -0,0 +1,24 @@
import QtQuick 2.3 as Original
import "../styles"
import "."
Original.Item {
property alias text: label.text
property alias value: slider.value
Text {
id: label
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
verticalAlignment: Original.Text.AlignVCenter
}
Slider {
id: slider
width: 120
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
}
}

View file

@ -0,0 +1,26 @@
import QtQuick 2.3 as Original
import "../styles"
import "."
Original.Item {
property alias text: label.text
property alias value: spinBox.value
Text {
id: label
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
verticalAlignment: Original.Text.AlignVCenter
text: "Minimum HMD FPS"
}
SpinBox {
id: spinBox
width: 120
maximumValue: 240
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
}
}

View file

@ -1,7 +1,9 @@
import QtQuick 2.3 as Original
import QtQuick.Controls 2.3 as Original
import "../styles"
Original.TextArea {
font.family: "Helvetica"
font.pointSize: 18
HifiConstants { id: hifi }
font.family: hifi.fonts.fontFamily
font.pointSize: hifi.fonts.fontSize
}

View file

@ -1,7 +1,9 @@
import QtQuick 2.3 as Original
import "../styles"
Original.TextEdit {
font.family: "Helvetica"
font.pointSize: 18
HifiConstants { id: hifi }
font.family: hifi.fonts.fontFamily
font.pointSize: hifi.fonts.fontSize
}

View file

@ -0,0 +1,9 @@
import "."
import "../styles"
Text {
HifiConstants { id: hifi }
color: hifi.colors.hifiBlue
font.pointSize: hifi.fonts.headerPointSize
font.bold: true
}

View file

@ -1,34 +1,36 @@
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick 2.3 as Original
import "../styles"
import "."
TextInput {
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
Original.TextInput {
id: root
HifiConstants { id: hifi }
property string helperText
font.family: "Helvetica"
font.pointSize: 18
width: 256
height: 64
color: myPalette.text
height: hifi.layout.rowHeight
clip: true
verticalAlignment: TextInput.AlignVCenter
color: hifi.colors.text
verticalAlignment: Original.TextInput.AlignVCenter
font.family: hifi.fonts.fontFamily
font.pointSize: hifi.fonts.fontSize
onTextChanged: {
if (text == "") {
helperText.visible = true;
} else {
helperText.visible = false;
}
Original.Rectangle {
// Render the rectangle as background
z: -1
anchors.fill: parent
color: hifi.colors.inputBackground
}
Text {
id: helperText
anchors.fill: parent
font.pointSize: parent.font.pointSize
font.family: parent.font.family
verticalAlignment: TextInput.AlignVCenter
text: parent.helperText
color: myPalette.dark
clip: true
verticalAlignment: parent.verticalAlignment
horizontalAlignment: parent.horizontalAlignment
text: root.helperText
color: hifi.colors.hintText
visible: !root.text
}
}

View file

@ -0,0 +1,40 @@
import QtQuick 2.3 as Original
import "../styles"
import "."
Original.Item {
id: root
HifiConstants { id: hifi }
height: hifi.layout.rowHeight
property string text
property string helperText
property string buttonText
property int buttonWidth: 0
property alias input: input
property alias button: button
signal clicked()
TextInput {
id: input
text: root.text
helperText: root.helperText
anchors.left: parent.left
anchors.right: button.left
anchors.rightMargin: 8
anchors.bottom: parent.bottom
anchors.top: parent.top
}
Button {
id: button
clip: true
width: root.buttonWidth ? root.buttonWidth : implicitWidth
text: root.buttonText
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.top: parent.top
onClicked: root.clicked()
}
}

View file

@ -1,11 +1,12 @@
import QtQuick 2.3
Rectangle {
SystemPalette { id: myPalette; colorGroup: SystemPalette.Active }
property int margin: 5
color: myPalette.window
border.color: myPalette.dark
border.width: 5
radius: border.width * 2
HifiConstants { id: hifi }
implicitHeight: 64
implicitWidth: 64
color: hifi.colors.window
border.color: hifi.colors.hifiBlue
border.width: hifi.styles.borderWidth
radius: hifi.styles.borderRadius
}

View file

@ -4,7 +4,7 @@ import "."
import "../controls"
OriginalStyles.ButtonStyle {
Original.SystemPalette { id: myPalette; colorGroup: Original.SystemPalette.Active }
HifiConstants { id: hifi }
padding {
top: 8
left: 12
@ -15,10 +15,9 @@ OriginalStyles.ButtonStyle {
anchors.fill: parent
}
label: Text {
renderType: Original.Text.NativeRendering
verticalAlignment: Original.Text.AlignVCenter
horizontalAlignment: Original.Text.AlignHCenter
text: control.text
color: control.enabled ? myPalette.text : myPalette.dark
color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
}
}

View file

@ -0,0 +1,61 @@
import QtQuick 2.4
Item {
SystemPalette { id: sysPalette; colorGroup: SystemPalette.Active }
readonly property alias colors: colors
readonly property alias layout: layout
readonly property alias fonts: fonts
readonly property alias styles: styles
readonly property alias effects: effects
Item {
id: colors
readonly property color hifiBlue: "#0e7077"
readonly property color window: sysPalette.window
readonly property color dialogBackground: sysPalette.window
//readonly property color dialogBackground: "#00000000"
readonly property color inputBackground: "white"
readonly property color background: sysPalette.dark
readonly property color text: sysPalette.text
readonly property color disabledText: "gray"
readonly property color hintText: sysPalette.dark
readonly property color light: sysPalette.light
readonly property alias activeWindow: activeWindow
readonly property alias inactiveWindow: inactiveWindow
QtObject {
id: activeWindow
readonly property color headerBackground: "white"
readonly property color headerText: "black"
}
QtObject {
id: inactiveWindow
readonly property color headerBackground: "gray"
readonly property color headerText: "black"
}
}
QtObject {
id: fonts
readonly property real headerPointSize: 24
readonly property string fontFamily: "Helvetica"
readonly property real fontSize: 18
}
QtObject {
id: layout
property int spacing: 8
property int rowHeight: 40
property int windowTitleHeight: 48
}
QtObject {
id: styles
readonly property int borderWidth: 5
readonly property int borderRadius: borderWidth * 2
}
QtObject {
id: effects
readonly property int fadeInDuration: 400
}
}

View file

@ -1,5 +1,11 @@
import QtQuick 2.4
QtObject {
Item {
property string hifiBlue: "#0e7077"
}
property alias colors: colorsObj
Item {
id: colorsObj
property string hifiRed: "red"
}
}

View file

@ -1,15 +1,10 @@
ButtonStyle {
background: Item { anchors.fill: parent }
label: Text {
label: FontAwesome {
id: icon
width: height
verticalAlignment: Text.AlignVCenter
renderType: Text.NativeRendering
font.family: iconFont.name
font.pointSize: 18
property alias unicode: icon.text
FontLoader { id: iconFont; source: "../../fonts/fontawesome-webfont.ttf"; }
property alias unicode: text
text: control.text
color: control.enabled ? "white" : "dimgray"
color: control.enabled ? hifi.colors.text : hifi.colors.disabledText
}
}

View file

@ -1,22 +0,0 @@
import QtQuick 2.4
import QtQuick.Controls.Styles 1.3
import "../controls"
import "."
ButtonStyle {
HifiPalette { id: hifiPalette }
padding {
top: 2
left: 4
right: 4
bottom: 2
}
background: Item {}
label: Text {
renderType: Text.NativeRendering
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
text: control.text
color: control.enabled ? "yellow" : "brown"
}
}