Style HMD menu backgrounds

This commit is contained in:
David Rowe 2016-03-11 11:42:49 +13:00
parent bbe507ec05
commit 2b45971f8c
3 changed files with 17 additions and 12 deletions

View file

@ -104,8 +104,8 @@ Item {
function buildMenu(items, targetPosition) { function buildMenu(items, targetPosition) {
var model = toModel(items); var model = toModel(items);
// Menu's must be childed to desktop for Z-ordering // Menus must be childed to desktop for Z-ordering
var newMenu = menuViewMaker.createObject(desktop, { model: model, z: topMenu ? topMenu.z + 1 : desktop.zLevels.menu }); var newMenu = menuViewMaker.createObject(desktop, { model: model, z: topMenu ? topMenu.z + 1 : desktop.zLevels.menu, isSubMenu: topMenu !== null });
if (targetPosition) { if (targetPosition) {
newMenu.x = targetPosition.x newMenu.x = targetPosition.x
newMenu.y = targetPosition.y - newMenu.height / 3 * 1 newMenu.y = targetPosition.y - newMenu.height / 3 * 1

View file

@ -12,33 +12,35 @@ 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 "../styles" import "../styles-uit"
FocusScope { FocusScope {
id: root id: root
implicitHeight: border.height implicitHeight: background.height
implicitWidth: border.width implicitWidth: background.width
property alias currentItem: listView.currentItem property alias currentItem: listView.currentItem
property alias model: listView.model property alias model: listView.model
property bool isSubMenu: false
signal selected(var item) signal selected(var item)
HifiConstants { id: hifi }
Border { Rectangle {
id: border id: background
anchors.fill: listView anchors.fill: listView
anchors.margins: -8 radius: hifi.dimensions.borderRadius
border.color: hifi.colors.hifiBlue border.width: hifi.dimensions.borderWidth
color: hifi.colors.window border.color: hifi.colors.lightGrayText80
// color: "#7f7f7f7f" color: isSubMenu ? hifi.colors.faintGray : hifi.colors.faintGray80
} }
ListView { ListView {
id: listView id: listView
x: 8; y: 8 x: 8; y: 8
HifiConstants { id: hifi }
width: 128 width: 128
height: count * 32 height: count * 32
topMargin: hifi.dimensions.menuPadding
onEnabledChanged: recalcSize(); onEnabledChanged: recalcSize();
onVisibleChanged: recalcSize(); onVisibleChanged: recalcSize();
onCountChanged: recalcSize(); onCountChanged: recalcSize();
@ -84,6 +86,7 @@ FocusScope {
newHeight += currentItem.implicitHeight newHeight += currentItem.implicitHeight
} }
} }
newHeight += 2 * hifi.dimensions.menuPadding; // White space at top and bottom.
if (maxWidth > width) { if (maxWidth > width) {
width = maxWidth; width = maxWidth;
} }

View file

@ -70,6 +70,7 @@ Item {
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"
readonly property color faintGray80: "#cce3e3e3"
readonly property color faintGray50: "#80e3e3e3" readonly property color faintGray50: "#80e3e3e3"
// Other colors // Other colors
@ -135,6 +136,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
} }
Item { Item {