Expand frame decoration when mouse is over a window in HMD mode

interface/resources/qml/hifi/toolbars/Toolbar.qml

@@ -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: []

interface/resources/qml/windows/Decoration.qml

@@ -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
+    }
+}
+

interface/resources/qml/windows/DefaultFrame.qml

@@ -16,104 +16,6 @@ import "../styles-uit"
 
 Frame {
     HifiConstants { id: hifi }
-
+    DefaultFrameDecoration {}
-    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
-        }
-    }
 }
 

interface/resources/qml/windows/DefaultFrameDecoration.qml

@@ -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
+    }
+}
+

interface/resources/qml/windows/Frame.qml

@@ -22,10 +22,10 @@ Item {
 
     property bool gradientsSupported: desktop.gradientsSupported
 
-    readonly property int frameMarginLeft: frameContent.frameMarginLeft
+    readonly property int frameMarginLeft: frame.decoration ? frame.decoration.frameMarginLeft : 0
-    readonly property int frameMarginRight: frameContent.frameMarginRight
+    readonly property int frameMarginRight: frame.decoration ? frame.decoration.frameMarginRight : 0
-    readonly property int frameMarginTop: frameContent.frameMarginTop
+    readonly property int frameMarginTop: frame.decoration ? frame.decoration.frameMarginTop : 0
-    readonly property int frameMarginBottom: frameContent.frameMarginBottom
+    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
+                window.content.visible = true
-                frameContent.visible = true
                 hid = false;
             }
         }
         onPositionChanged: {
             if (pressed) {
-                if (pane.visible) {
+                if (window.content.visible) {
-                    pane.visible = false;
+                    window.content.visible = false;
-                    frameContent.visible = false
                     hid = true;
                 }
                 var delta = Qt.vector2d(mouseX, mouseY).minus(pressOrigin);

interface/resources/qml/windows/ToolFrame.qml

@@ -16,81 +16,11 @@ import "../styles-uit"
 
 Frame {
     HifiConstants { id: hifi }
-    property bool horizontalSpacers: false
+    property alias horizontalSpacers: decoration.horizontalSpacers
-    property bool verticalSpacers: false
+    property alias verticalSpacers: decoration.verticalSpacers
 
-    Rectangle {
+    ToolFrameDecoration {
-        // Dialog frame
+        id: decoration
-        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
-        }
     }
 }
 

interface/resources/qml/windows/ToolFrameDecoration.qml

@@ -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
+    }
+}
+

interface/resources/qml/windows/Window.qml

@@ -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)
 }

tests/ui/qml/main.qml

@@ -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 {