mirror of
https://github.com/lubosz/overte.git
synced 2025-04-10 04:28:59 +02:00
Expand frame decoration when mouse is over a window in HMD mode
This commit is contained in:
Brad Davis
parent
c4dba51337
commit
f2220288fb
9 changed files with 325 additions and 184 deletions
|
|
@ -21,7 +21,19 @@ Window {
|
|||
height: content.height
|
||||
visible: true
|
||||
// Disable this window from being able to call 'desktop.raise() and desktop.showDesktop'
|
||||
activator: Item {}
|
||||
activator: MouseArea {
|
||||
width: frame.decoration ? frame.decoration.width : window.width
|
||||
height: frame.decoration ? frame.decoration.height : window.height
|
||||
x: frame.decoration ? frame.decoration.anchors.leftMargin : 0
|
||||
y: frame.decoration ? frame.decoration.anchors.topMargin : 0
|
||||
propagateComposedEvents: true
|
||||
acceptedButtons: Qt.AllButtons
|
||||
enabled: window.visible
|
||||
hoverEnabled: true
|
||||
onPressed: mouse.accepted = false;
|
||||
onEntered: window.mouseEntered();
|
||||
onExited: window.mouseExited();
|
||||
}
|
||||
property bool horizontal: true
|
||||
property real buttonSize: 50;
|
||||
property var buttons: []
|
||||
|
|
|
|||
47
interface/resources/qml/windows/Decoration.qml
Normal file
47
interface/resources/qml/windows/Decoration.qml
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
//
|
||||
// DefaultFrame.qml
|
||||
//
|
||||
// Created by Bradley Austin Davis on 12 Jan 2016
|
||||
// Copyright 2016 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.5
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import "."
|
||||
import "../styles-uit"
|
||||
|
||||
Rectangle {
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
property int frameMargin: 9
|
||||
property int frameMarginLeft: frameMargin
|
||||
property int frameMarginRight: frameMargin
|
||||
property int frameMarginTop: 2 * frameMargin + iconSize
|
||||
property int frameMarginBottom: iconSize + 11
|
||||
|
||||
anchors {
|
||||
topMargin: -frameMarginTop
|
||||
leftMargin: -frameMarginLeft
|
||||
rightMargin: -frameMarginRight
|
||||
bottomMargin: -frameMarginBottom
|
||||
}
|
||||
anchors.fill: parent
|
||||
color: hifi.colors.baseGrayHighlight40
|
||||
border {
|
||||
width: hifi.dimensions.borderWidth
|
||||
color: hifi.colors.faintGray50
|
||||
}
|
||||
radius: hifi.dimensions.borderRadius
|
||||
|
||||
// Enable dragging of the window,
|
||||
// detect mouseover of the window (including decoration)
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
drag.target: window
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -16,104 +16,6 @@ import "../styles-uit"
|
|||
|
||||
Frame {
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
Rectangle {
|
||||
// Dialog frame
|
||||
id: frameContent
|
||||
|
||||
readonly property int iconSize: hifi.dimensions.frameIconSize
|
||||
readonly property int frameMargin: 9
|
||||
readonly property int frameMarginLeft: frameMargin
|
||||
readonly property int frameMarginRight: frameMargin
|
||||
readonly property int frameMarginTop: 2 * frameMargin + iconSize
|
||||
readonly property int frameMarginBottom: iconSize + 11
|
||||
|
||||
anchors {
|
||||
topMargin: -frameMarginTop
|
||||
leftMargin: -frameMarginLeft
|
||||
rightMargin: -frameMarginRight
|
||||
bottomMargin: -frameMarginBottom
|
||||
}
|
||||
anchors.fill: parent
|
||||
color: hifi.colors.baseGrayHighlight40
|
||||
border {
|
||||
width: hifi.dimensions.borderWidth
|
||||
color: hifi.colors.faintGray50
|
||||
}
|
||||
radius: hifi.dimensions.borderRadius
|
||||
|
||||
// Enable dragging of the window
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
drag.target: window
|
||||
}
|
||||
|
||||
Row {
|
||||
id: controlsRow
|
||||
anchors {
|
||||
right: parent.right;
|
||||
top: parent.top;
|
||||
topMargin: frameContent.frameMargin + 1 // Move down a little to visually align with the title
|
||||
rightMargin: frameContent.frameMarginRight;
|
||||
}
|
||||
spacing: frameContent.iconSize / 4
|
||||
|
||||
HiFiGlyphs {
|
||||
// "Pin" button
|
||||
visible: window.pinnable
|
||||
text: window.pinned ? hifi.glyphs.pinInverted : hifi.glyphs.pin
|
||||
color: pinClickArea.pressed ? hifi.colors.redHighlight : hifi.colors.white
|
||||
size: frameContent.iconSize
|
||||
MouseArea {
|
||||
id: pinClickArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
onClicked: window.pinned = !window.pinned;
|
||||
}
|
||||
}
|
||||
|
||||
HiFiGlyphs {
|
||||
// "Close" button
|
||||
visible: window ? window.closable : false
|
||||
text: closeClickArea.containsPress ? hifi.glyphs.closeInverted : hifi.glyphs.close
|
||||
color: closeClickArea.containsMouse ? hifi.colors.redHighlight : hifi.colors.white
|
||||
size: frameContent.iconSize
|
||||
MouseArea {
|
||||
id: closeClickArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: window.shown = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RalewayRegular {
|
||||
// Title
|
||||
id: titleText
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: frameContent.frameMarginLeft + hifi.dimensions.contentMargin.x
|
||||
right: controlsRow.left
|
||||
rightMargin: frameContent.iconSize
|
||||
top: parent.top
|
||||
topMargin: frameContent.frameMargin
|
||||
}
|
||||
text: window ? window.title : ""
|
||||
color: hifi.colors.white
|
||||
size: hifi.fontSizes.overlayTitle
|
||||
}
|
||||
|
||||
DropShadow {
|
||||
source: titleText
|
||||
anchors.fill: titleText
|
||||
horizontalOffset: 2
|
||||
verticalOffset: 2
|
||||
samples: 2
|
||||
color: hifi.colors.baseGrayShadow60
|
||||
visible: (window && window.focus)
|
||||
cached: true
|
||||
}
|
||||
}
|
||||
DefaultFrameDecoration {}
|
||||
}
|
||||
|
||||
|
|
|
|||
115
interface/resources/qml/windows/DefaultFrameDecoration.qml
Normal file
115
interface/resources/qml/windows/DefaultFrameDecoration.qml
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
//
|
||||
// DefaultFrame.qml
|
||||
//
|
||||
// Created by Bradley Austin Davis on 12 Jan 2016
|
||||
// Copyright 2016 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.5
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import "."
|
||||
import "../styles-uit"
|
||||
|
||||
|
||||
Decoration {
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
// Dialog frame
|
||||
id: root
|
||||
|
||||
property int iconSize: hifi.dimensions.frameIconSize
|
||||
frameMargin: 9
|
||||
frameMarginLeft: frameMargin
|
||||
frameMarginRight: frameMargin
|
||||
frameMarginTop: 2 * frameMargin + iconSize
|
||||
frameMarginBottom: iconSize + 11
|
||||
|
||||
Connections {
|
||||
target: window
|
||||
onMouseEntered: {
|
||||
if (!HMD.active) {
|
||||
return;
|
||||
}
|
||||
root.frameMargin = 18
|
||||
titleText.size = hifi.fontSizes.overlayTitle * 2
|
||||
root.iconSize = hifi.dimensions.frameIconSize * 2
|
||||
}
|
||||
onMouseExited: {
|
||||
root.frameMargin = 9
|
||||
titleText.size = hifi.fontSizes.overlayTitle
|
||||
root.iconSize = hifi.dimensions.frameIconSize
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
id: controlsRow
|
||||
anchors {
|
||||
right: parent.right;
|
||||
top: parent.top;
|
||||
topMargin: root.frameMargin + 1 // Move down a little to visually align with the title
|
||||
rightMargin: root.frameMarginRight;
|
||||
}
|
||||
spacing: root.iconSize / 4
|
||||
|
||||
HiFiGlyphs {
|
||||
// "Pin" button
|
||||
visible: window.pinnable
|
||||
text: window.pinned ? hifi.glyphs.pinInverted : hifi.glyphs.pin
|
||||
color: pinClickArea.pressed ? hifi.colors.redHighlight : hifi.colors.white
|
||||
size: root.iconSize
|
||||
MouseArea {
|
||||
id: pinClickArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
propagateComposedEvents: true
|
||||
onClicked: window.pinned = !window.pinned;
|
||||
}
|
||||
}
|
||||
|
||||
HiFiGlyphs {
|
||||
// "Close" button
|
||||
visible: window ? window.closable : false
|
||||
text: closeClickArea.containsPress ? hifi.glyphs.closeInverted : hifi.glyphs.close
|
||||
color: closeClickArea.containsMouse ? hifi.colors.redHighlight : hifi.colors.white
|
||||
size: root.iconSize
|
||||
MouseArea {
|
||||
id: closeClickArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
onClicked: window.shown = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RalewayRegular {
|
||||
// Title
|
||||
id: titleText
|
||||
anchors {
|
||||
left: parent.left
|
||||
leftMargin: root.frameMarginLeft + hifi.dimensions.contentMargin.x
|
||||
right: controlsRow.left
|
||||
rightMargin: root.iconSize
|
||||
top: parent.top
|
||||
topMargin: root.frameMargin
|
||||
}
|
||||
text: window ? window.title : ""
|
||||
color: hifi.colors.white
|
||||
size: hifi.fontSizes.overlayTitle
|
||||
}
|
||||
|
||||
DropShadow {
|
||||
source: titleText
|
||||
anchors.fill: titleText
|
||||
horizontalOffset: 2
|
||||
verticalOffset: 2
|
||||
samples: 2
|
||||
color: hifi.colors.baseGrayShadow60
|
||||
visible: (window && window.focus)
|
||||
cached: true
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -22,10 +22,10 @@ Item {
|
|||
|
||||
property bool gradientsSupported: desktop.gradientsSupported
|
||||
|
||||
readonly property int frameMarginLeft: frameContent.frameMarginLeft
|
||||
readonly property int frameMarginRight: frameContent.frameMarginRight
|
||||
readonly property int frameMarginTop: frameContent.frameMarginTop
|
||||
readonly property int frameMarginBottom: frameContent.frameMarginBottom
|
||||
readonly property int frameMarginLeft: frame.decoration ? frame.decoration.frameMarginLeft : 0
|
||||
readonly property int frameMarginRight: frame.decoration ? frame.decoration.frameMarginRight : 0
|
||||
readonly property int frameMarginTop: frame.decoration ? frame.decoration.frameMarginTop : 0
|
||||
readonly property int frameMarginBottom: frame.decoration ? frame.decoration.frameMarginBottom : 0
|
||||
|
||||
// Frames always fill their parents, but their decorations may extend
|
||||
// beyond the window via negative margin sizes
|
||||
|
|
@ -103,16 +103,14 @@ Item {
|
|||
}
|
||||
onReleased: {
|
||||
if (hid) {
|
||||
pane.visible = true
|
||||
frameContent.visible = true
|
||||
window.content.visible = true
|
||||
hid = false;
|
||||
}
|
||||
}
|
||||
onPositionChanged: {
|
||||
if (pressed) {
|
||||
if (pane.visible) {
|
||||
pane.visible = false;
|
||||
frameContent.visible = false
|
||||
if (window.content.visible) {
|
||||
window.content.visible = false;
|
||||
hid = true;
|
||||
}
|
||||
var delta = Qt.vector2d(mouseX, mouseY).minus(pressOrigin);
|
||||
|
|
|
|||
|
|
@ -16,81 +16,11 @@ import "../styles-uit"
|
|||
|
||||
Frame {
|
||||
HifiConstants { id: hifi }
|
||||
property bool horizontalSpacers: false
|
||||
property bool verticalSpacers: false
|
||||
property alias horizontalSpacers: decoration.horizontalSpacers
|
||||
property alias verticalSpacers: decoration.verticalSpacers
|
||||
|
||||
Rectangle {
|
||||
// Dialog frame
|
||||
id: frameContent
|
||||
readonly property int frameMargin: 6
|
||||
readonly property int frameMarginLeft: frameMargin + (horizontalSpacers ? 12 : 0)
|
||||
readonly property int frameMarginRight: frameMargin + (horizontalSpacers ? 12 : 0)
|
||||
readonly property int frameMarginTop: frameMargin + (verticalSpacers ? 12 : 0)
|
||||
readonly property int frameMarginBottom: frameMargin + (verticalSpacers ? 12 : 0)
|
||||
|
||||
Rectangle {
|
||||
visible: horizontalSpacers
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 8
|
||||
height: window.height
|
||||
color: "gray";
|
||||
radius: 4
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: horizontalSpacers
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: 8
|
||||
height: window.height
|
||||
color: "gray";
|
||||
radius: 4
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: verticalSpacers
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 6
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: 8
|
||||
width: window.width
|
||||
color: "gray";
|
||||
radius: 4
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: verticalSpacers
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 6
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: 8
|
||||
width: window.width
|
||||
color: "gray";
|
||||
radius: 4
|
||||
}
|
||||
|
||||
anchors {
|
||||
leftMargin: -frameMarginLeft
|
||||
rightMargin: -frameMarginRight
|
||||
topMargin: -frameMarginTop
|
||||
bottomMargin: -frameMarginBottom
|
||||
}
|
||||
anchors.fill: parent
|
||||
color: hifi.colors.baseGrayHighlight40
|
||||
border {
|
||||
width: hifi.dimensions.borderWidth
|
||||
color: hifi.colors.faintGray50
|
||||
}
|
||||
radius: hifi.dimensions.borderRadius / 2
|
||||
|
||||
// Enable dragging of the window
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
drag.target: window
|
||||
}
|
||||
ToolFrameDecoration {
|
||||
id: decoration
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
98
interface/resources/qml/windows/ToolFrameDecoration.qml
Normal file
98
interface/resources/qml/windows/ToolFrameDecoration.qml
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
//
|
||||
// DefaultFrame.qml
|
||||
//
|
||||
// Created by Bradley Austin Davis on 12 Jan 2016
|
||||
// Copyright 2016 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.5
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
import "."
|
||||
import "../styles-uit"
|
||||
|
||||
Decoration {
|
||||
id: root
|
||||
HifiConstants { id: hifi }
|
||||
|
||||
property bool horizontalSpacers: false
|
||||
property bool verticalSpacers: false
|
||||
|
||||
// Dialog frame
|
||||
property int spacerWidth: 8
|
||||
property int spacerRadius: 4
|
||||
property int spacerMargin: 12
|
||||
frameMargin: 6
|
||||
frameMarginLeft: frameMargin + (horizontalSpacers ? spacerMargin : 0)
|
||||
frameMarginRight: frameMargin + (horizontalSpacers ? spacerMargin : 0)
|
||||
frameMarginTop: frameMargin + (verticalSpacers ? spacerMargin : 0)
|
||||
frameMarginBottom: frameMargin + (verticalSpacers ? spacerMargin : 0)
|
||||
radius: hifi.dimensions.borderRadius / 2
|
||||
|
||||
Connections {
|
||||
target: window
|
||||
onMouseEntered: {
|
||||
if (!HMD.active) {
|
||||
return;
|
||||
}
|
||||
root.frameMargin = 18
|
||||
root.spacerWidth = 16
|
||||
root.spacerRadius = 8
|
||||
root.spacerMargin = 8
|
||||
}
|
||||
onMouseExited: {
|
||||
root.frameMargin = 6
|
||||
root.spacerWidth = 8
|
||||
root.spacerRadius = 4
|
||||
root.spacerMargin = 12
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: horizontalSpacers
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: root.spacerWidth
|
||||
height: decoration.height - 12
|
||||
color: "gray";
|
||||
radius: root.spacerRadius
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: horizontalSpacers
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 6
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
width: root.spacerWidth
|
||||
height: decoration.height - 12
|
||||
color: "gray";
|
||||
radius: root.spacerRadius
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: verticalSpacers
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 6
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: root.spacerWidth
|
||||
width: decoration.width - 12
|
||||
color: "gray";
|
||||
radius: root.spacerRadius
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
visible: verticalSpacers
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 6
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
height: root.spacerWidth
|
||||
width: decoration.width - 12
|
||||
color: "gray";
|
||||
radius: root.spacerRadius
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -31,6 +31,8 @@ Fadable {
|
|||
// Signals
|
||||
//
|
||||
signal windowDestroyed();
|
||||
signal mouseEntered();
|
||||
signal mouseExited();
|
||||
|
||||
//
|
||||
// Native properties
|
||||
|
|
@ -113,11 +115,14 @@ Fadable {
|
|||
propagateComposedEvents: true
|
||||
acceptedButtons: Qt.AllButtons
|
||||
enabled: window.visible
|
||||
hoverEnabled: true
|
||||
onPressed: {
|
||||
//console.log("Pressed on activator area");
|
||||
window.raise();
|
||||
mouse.accepted = false;
|
||||
}
|
||||
onEntered: window.mouseEntered();
|
||||
onExited: window.mouseExited();
|
||||
}
|
||||
|
||||
// This mouse area serves to swallow mouse events while the mouse is over the window
|
||||
|
|
@ -287,4 +292,7 @@ Fadable {
|
|||
break;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseEntered: console.log("Mouse entered " + window)
|
||||
onMouseExited: console.log("Mouse exited " + window)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,11 @@ ApplicationWindow {
|
|||
property var toolbar;
|
||||
property var lastButton;
|
||||
|
||||
Button {
|
||||
text: HMD.active ? "Disable HMD" : "Enable HMD"
|
||||
onClicked: HMD.active = !HMD.active
|
||||
}
|
||||
|
||||
// Window visibility
|
||||
Button {
|
||||
text: "toggle desktop"
|
||||
|
|
@ -340,13 +345,13 @@ ApplicationWindow {
|
|||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
Window {
|
||||
id: blue
|
||||
closable: true
|
||||
visible: true
|
||||
resizable: true
|
||||
destroyOnHidden: false
|
||||
title: "Blue"
|
||||
|
||||
width: 100; height: 100
|
||||
x: 1280 / 2; y: 720 / 2
|
||||
|
|
@ -366,7 +371,33 @@ ApplicationWindow {
|
|||
}
|
||||
}
|
||||
|
||||
Window {
|
||||
id: green
|
||||
closable: true
|
||||
visible: true
|
||||
resizable: true
|
||||
title: "Green"
|
||||
destroyOnHidden: false
|
||||
|
||||
width: 100; height: 100
|
||||
x: 1280 / 2; y: 720 / 2
|
||||
Settings {
|
||||
category: "TestWindow.Green"
|
||||
property alias x: green.x
|
||||
property alias y: green.y
|
||||
property alias width: green.width
|
||||
property alias height: green.height
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
visible: true
|
||||
color: "green"
|
||||
Component.onDestruction: console.log("Green destroyed")
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Rectangle { width: 100; height: 100; x: 100; y: 100; color: "#00f" }
|
||||
|
||||
Window {
|
||||
|
|
|
|||
Loading…
Reference in a new issue