Style HMD menu items

This commit is contained in:
David Rowe 2016-03-11 15:24:35 +13:00
parent 2b45971f8c
commit fb0f97264c
3 changed files with 48 additions and 26 deletions

View file

@ -12,8 +12,8 @@ import QtQuick 2.5
import QtQuick.Controls 1.4 import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4 import QtQuick.Controls.Styles 1.4
import "../controls" import "../controls-uit"
import "../styles" import "../styles-uit"
Item { Item {
id: root id: root
@ -21,24 +21,28 @@ Item {
property alias text: label.text property alias text: label.text
property var source property var source
implicitHeight: source.visible ? label.implicitHeight * 1.5 : 0 implicitHeight: source.visible ? 2 * label.implicitHeight : 0
implicitWidth: label.width + label.height * 2.5 implicitWidth: 2 * hifi.dimensions.menuPadding.x + check.width + label.width + tail.width
visible: source.visible visible: source.visible
width: parent.width width: parent.width
FontAwesome { FontAwesome {
clip: true clip: true
id: check id: check
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter anchors {
anchors.verticalCenter: parent.verticalCenter verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: hifi.dimensions.menuPadding.x
}
width: 1.5 * hifi.dimensions.menuPadding.x
color: label.color color: label.color
text: checkText() text: checkText()
size: label.height size: label.height
visible: source.visible visible: source.visible
font.pixelSize: size font.pixelSize: size
function checkText() { function checkText() {
if (!source || source.type != 1 || !source.checkable) { if (!source || source.type !== 1 || !source.checkable) {
return "" return ""
} }
// FIXME this works for native QML menus but I don't think it will // FIXME this works for native QML menus but I don't think it will
@ -50,25 +54,36 @@ Item {
} }
} }
Text { RalewaySemiBold {
id: label id: label
size: hifi.fontSizes.rootMenu
font.capitalization: Font.AllUppercase
anchors.left: check.right anchors.left: check.right
anchors.leftMargin: 4
anchors.verticalCenter: parent.verticalCenter anchors.verticalCenter: parent.verticalCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
color: source.enabled ? hifi.colors.text : hifi.colors.disabledText color: source.enabled ? hifi.colors.baseGrayShadow : hifi.colors.baseGrayShadow50
enabled: source.visible && (source.type !== 0 ? source.enabled : false) enabled: source.visible && (source.type !== 0 ? source.enabled : false)
visible: source.visible visible: source.visible
} }
FontAwesome { Item {
id: tag // Space for shortcut key or disclosure icon.
x: root.parent.width - width id: tail
size: label.height width: 4 * hifi.dimensions.menuPadding.x
width: implicitWidth anchors {
visible: source.visible && (source.type == 2) verticalCenter: parent.verticalCenter
text: "\uF0DA" right: parent.right
anchors.verticalCenter: parent.verticalCenter rightMargin: hifi.dimensions.menuPadding.x
color: label.color }
HiFiGlyphs {
text: hifi.glyphs.disclosureExpand
color: source.enabled ? hifi.colors.baseGrayShadow : hifi.colors.baseGrayShadow25
size: 2 * hifi.fontSizes.rootMenuDisclosure
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
horizontalAlignment: Text.AlignRight
visible: source.visible && (source.type === 2)
}
} }
} }

View file

@ -40,16 +40,20 @@ FocusScope {
x: 8; y: 8 x: 8; y: 8
width: 128 width: 128
height: count * 32 height: count * 32
topMargin: hifi.dimensions.menuPadding topMargin: hifi.dimensions.menuPadding.y
onEnabledChanged: recalcSize(); onEnabledChanged: recalcSize();
onVisibleChanged: recalcSize(); onVisibleChanged: recalcSize();
onCountChanged: recalcSize(); onCountChanged: recalcSize();
focus: true focus: true
highlight: Rectangle { highlight: Rectangle {
width: listView.currentItem ? listView.currentItem.width : 0 anchors {
height: listView.currentItem ? listView.currentItem.height : 0 left: parent ? parent.left : undefined
color: "lightsteelblue"; radius: 3 right: parent ? parent.right : undefined
leftMargin: hifi.dimensions.borderWidth
rightMargin: hifi.dimensions.borderWidth
}
color: hifi.colors.white
} }
delegate: VrMenuItem { delegate: VrMenuItem {
@ -86,7 +90,7 @@ FocusScope {
newHeight += currentItem.implicitHeight newHeight += currentItem.implicitHeight
} }
} }
newHeight += 2 * hifi.dimensions.menuPadding; // White space at top and bottom. newHeight += 2 * hifi.dimensions.menuPadding.y; // White space at top and bottom.
if (maxWidth > width) { if (maxWidth > width) {
width = maxWidth; width = maxWidth;
} }

View file

@ -67,6 +67,8 @@ Item {
readonly property color darkGray30: "#4d121212" readonly property color darkGray30: "#4d121212"
readonly property color darkGray0: "#00121212" readonly property color darkGray0: "#00121212"
readonly property color baseGrayShadow60: "#99252525" readonly property color baseGrayShadow60: "#99252525"
readonly property color baseGrayShadow50: "#80252525"
readonly property color baseGrayShadow25: "#40252525"
readonly property color baseGrayHighlight40: "#66575757" readonly property color baseGrayHighlight40: "#66575757"
readonly property color baseGrayHighlight15: "#26575757" readonly property color baseGrayHighlight15: "#26575757"
readonly property color lightGrayText80: "#ccafafaf" readonly property color lightGrayText80: "#ccafafaf"
@ -136,7 +138,7 @@ Item {
readonly property real modalDialogTitleHeight: 40 readonly property real modalDialogTitleHeight: 40
readonly property real controlLineHeight: 29 // Height of spinbox control on 1920 x 1080 monitor readonly property real controlLineHeight: 29 // Height of spinbox control on 1920 x 1080 monitor
readonly property real controlInterlineHeight: 22 // 75% of controlLineHeight readonly property real controlInterlineHeight: 22 // 75% of controlLineHeight
readonly property real menuPadding: 12 readonly property vector2d menuPadding: Qt.vector2d(12, 12)
} }
Item { Item {
@ -154,6 +156,7 @@ Item {
readonly property real logs: dimensions.largeScreen ? 16 : 12 readonly property real logs: dimensions.largeScreen ? 16 : 12
readonly property real code: dimensions.largeScreen ? 16 : 12 readonly property real code: dimensions.largeScreen ? 16 : 12
readonly property real rootMenu: dimensions.largeScreen ? 15 : 11 readonly property real rootMenu: dimensions.largeScreen ? 15 : 11
readonly property real rootMenuDisclosure: dimensions.largeScreen ? 20 : 16
readonly property real menuItem: dimensions.largeScreen ? 15 : 11 readonly property real menuItem: dimensions.largeScreen ? 15 : 11
readonly property real shortcutText: dimensions.largeScreen ? 13 : 9 readonly property real shortcutText: dimensions.largeScreen ? 13 : 9
readonly property real carat: dimensions.largeScreen ? 38 : 30 readonly property real carat: dimensions.largeScreen ? 38 : 30