mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-09 11:07:52 +02:00
Style HMD menu items
This commit is contained in:
parent
2b45971f8c
commit
fb0f97264c
3 changed files with 48 additions and 26 deletions
|
@ -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)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
Loading…
Reference in a new issue