Merge pull request #7966 from ctrlaltdavid/20932

make file dialog resizable and movable

interface/resources/qml/dialogs/FileDialog.qml

@@ -25,10 +25,13 @@ import "fileDialog"
 //FIXME implement shortcuts for favorite location
 ModalWindow {
     id: root
-    //resizable: true
+    resizable: true
     implicitWidth: 640
     implicitHeight: 480
 
+    minSize: Qt.vector2d(300, 240)
+    draggable: true
+
     HifiConstants { id: hifi }
 
     Settings {

interface/resources/qml/styles-uit/HifiConstants.qml

@@ -141,6 +141,7 @@ Item {
         readonly property real textPadding: 8
         readonly property real sliderHandleSize: 18
         readonly property real sliderGrooveHeight: 8
+        readonly property real frameIconSize: 22
         readonly property real spinnerSize: 50
         readonly property real tablePadding: 12
         readonly property real tableRowHeight: largeScreen ? 26 : 23

interface/resources/qml/windows-uit/DefaultFrame.qml

@@ -20,6 +20,14 @@ Frame {
     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
@@ -34,7 +42,7 @@ Frame {
         }
         radius: hifi.dimensions.borderRadius
 
-        // Allow dragging of the window
+        // Enable dragging of the window
         MouseArea {
             anchors.fill: parent
             drag.target: window
@@ -45,17 +53,17 @@ Frame {
             anchors {
                 right: parent.right;
                 top: parent.top;
-                topMargin: frameMargin + 1  // Move down a little to visually align with the title
-                rightMargin: frameMarginRight;
+                topMargin: frameContent.frameMargin + 1  // Move down a little to visually align with the title
+                rightMargin: frameContent.frameMarginRight;
             }
-            spacing: iconSize / 4
+            spacing: frameContent.iconSize / 4
 
             HiFiGlyphs {
                 // "Pin" button
                 visible: false
                 text: (frame.pinned && !pinClickArea.containsMouse) || (!frame.pinned && pinClickArea.containsMouse) ? hifi.glyphs.pinInverted : hifi.glyphs.pin
                 color: pinClickArea.containsMouse && !pinClickArea.pressed ? hifi.colors.redHighlight : hifi.colors.white
-                size: iconSize
+                size: frameContent.iconSize
                 MouseArea {
                     id: pinClickArea
                     anchors.fill: parent
@@ -70,7 +78,7 @@ Frame {
                 visible: window ? window.closable : false
                 text: closeClickArea.containsPress ? hifi.glyphs.closeInverted : hifi.glyphs.close
                 color: closeClickArea.containsMouse ? hifi.colors.redHighlight : hifi.colors.white
-                size: iconSize
+                size: frameContent.iconSize
                 MouseArea {
                     id: closeClickArea
                     anchors.fill: parent
@@ -85,11 +93,11 @@ Frame {
             id: titleText
             anchors {
                 left: parent.left
-                leftMargin: frameMarginLeft + hifi.dimensions.contentMargin.x
+                leftMargin: frameContent.frameMarginLeft + hifi.dimensions.contentMargin.x
                 right: controlsRow.left
-                rightMargin: iconSize
+                rightMargin: frameContent.iconSize
                 top: parent.top
-                topMargin: frameMargin
+                topMargin: frameContent.frameMargin
             }
             text: window ? window.title : ""
             color: hifi.colors.white

interface/resources/qml/windows-uit/Frame.qml

@@ -22,12 +22,10 @@ Item {
 
     property bool gradientsSupported: desktop.gradientsSupported
 
-    readonly property int iconSize: 22
-    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
+    readonly property int frameMarginLeft: frameContent.frameMarginLeft
+    readonly property int frameMarginRight: frameContent.frameMarginRight
+    readonly property int frameMarginTop: frameContent.frameMarginTop
+    readonly property int frameMarginBottom: frameContent.frameMarginBottom
 
     // Frames always fill their parents, but their decorations may extend
     // beyond the window via negative margin sizes
@@ -76,8 +74,8 @@ Item {
         id: sizeOutline
         x: -frameMarginLeft
         y: -frameMarginTop
-        width: window ? window.width + frameMarginLeft + frameMarginRight : 0
-        height: window ? window.height + frameMarginTop + frameMarginBottom : 0
+        width: window ? window.width + frameMarginLeft + frameMarginRight + 2 : 0
+        height: window ? window.height + frameMarginTop + frameMarginBottom + 2 : 0
         color: hifi.colors.baseGrayHighlight15
         border.width: 3
         border.color: hifi.colors.white50
@@ -88,11 +86,11 @@ Item {
     MouseArea {
         // Resize handle
         id: sizeDrag
-        width: iconSize
-        height: iconSize
+        width: hifi.dimensions.frameIconSize
+        height: hifi.dimensions.frameIconSize
         enabled: window ? window.resizable : false
         hoverEnabled: true
-        x: window ? window.width + frameMarginRight - iconSize : 0
+        x: window ? window.width + frameMarginRight - hifi.dimensions.frameIconSize : 0
         y: window ? window.height + 4 : 0
         property vector2d pressOrigin
         property vector2d sizeOrigin
@@ -124,10 +122,12 @@ Item {
         HiFiGlyphs {
             visible: sizeDrag.enabled
             x: -11  // Move a little to visually align
-            y: -4   // ""
+            y: window.modality == Qt.ApplicationModal ? -6 : -4
             text: hifi.glyphs.resizeHandle
-            size: iconSize + 10
-            color: sizeDrag.containsMouse || sizeDrag.pressed ? hifi.colors.white : hifi.colors.white50
+            size: hifi.dimensions.frameIconSize + 10
+            color: sizeDrag.containsMouse || sizeDrag.pressed
+                   ? hifi.colors.white
+                   : (window.colorScheme == hifi.colorSchemes.dark ? hifi.colors.white50 : hifi.colors.lightGrayText80)
         }
     }
 }

interface/resources/qml/windows-uit/ModalFrame.qml

@@ -18,16 +18,21 @@ Frame {
     HifiConstants { id: hifi }
 
     Rectangle {
-        id: modalFrame
+        id: frameContent
 
         readonly property bool hasTitle: window.title != ""
 
+        readonly property int frameMarginLeft: hifi.dimensions.modalDialogMargin.x
+        readonly property int frameMarginRight: hifi.dimensions.modalDialogMargin.x
+        readonly property int frameMarginTop: hifi.dimensions.modalDialogMargin.y + (frameContent.hasTitle ? hifi.dimensions.modalDialogTitleHeight + 10 : 0)
+        readonly property int frameMarginBottom: hifi.dimensions.modalDialogMargin.y
+
         anchors {
             fill: parent
-            topMargin: -hifi.dimensions.modalDialogMargin.y - (modalFrame.hasTitle ? hifi.dimensions.modalDialogTitleHeight + 10 : 0)
-            leftMargin: -hifi.dimensions.modalDialogMargin.x
-            rightMargin: -hifi.dimensions.modalDialogMargin.x
-            bottomMargin: -hifi.dimensions.modalDialogMargin.y
+            topMargin: -frameMarginTop
+            leftMargin: -frameMarginLeft
+            rightMargin: -frameMarginRight
+            bottomMargin: -frameMarginBottom
         }
 
         border {
@@ -37,8 +42,15 @@ Frame {
         radius: hifi.dimensions.borderRadius
         color: hifi.colors.faintGray
 
+        // Enable dragging of the window
+        MouseArea {
+            anchors.fill: parent
+            drag.target: window
+            enabled: window.draggable
+        }
+
         Item {
-            visible: modalFrame.hasTitle
+            visible: frameContent.hasTitle
             anchors.fill: parent
             anchors {
                 topMargin: -parent.anchors.topMargin

interface/resources/qml/windows-uit/ModalWindow.qml

@@ -14,9 +14,13 @@ import "."
 
 Window {
     id: window
-    anchors.centerIn: parent
     modality: Qt.ApplicationModal
     destroyOnCloseButton: true
     destroyOnInvisible: true
-    frame: ModalFrame{}
+    frame: ModalFrame { }
+
+    property int colorScheme: hifi.colorSchemes.light
+    property bool draggable: false
+
+    anchors.centerIn: draggable ? undefined : parent
 }

interface/resources/qml/windows-uit/Window.qml

@@ -52,6 +52,7 @@ Fadable {
     // property bool pinned: false
     property bool resizable: false
     property bool gradientsSupported: desktop.gradientsSupported
+    property int colorScheme: hifi.colorSchemes.dark
 
     property vector2d minSize: Qt.vector2d(100, 100)
     property vector2d maxSize: Qt.vector2d(1280, 800)

tests/ui/qml/main.qml

@@ -23,14 +23,17 @@ ApplicationWindow {
     Desktop {
         id: desktop
         anchors.fill: parent
-        rootMenu: StubMenu { id: rootMenu }
+
+        //rootMenu: StubMenu { id: rootMenu }
         //Component.onCompleted: offscreenWindow = appWindow
 
+        /*
         MouseArea {
             anchors.fill: parent
             acceptedButtons: Qt.RightButton
             onClicked: desktop.popupMenu(Qt.vector2d(mouseX, mouseY));
         }
+        */
 
         Row {
             id: testButtons