Fix up file browser resize handle and outlining

This commit is contained in:
David Rowe 2016-05-25 13:10:26 +12:00
parent 66a90cc3f8
commit 1c4eed640f
7 changed files with 45 additions and 26 deletions

View file

@ -29,6 +29,8 @@ ModalWindow {
implicitWidth: 640
implicitHeight: 480
minSize: Qt.vector2d(300, 240)
HifiConstants { id: hifi }
Settings {

View file

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

View file

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

View file

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

View file

@ -22,12 +22,17 @@ Frame {
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 - (frameContent.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 {

View file

@ -19,4 +19,6 @@ Window {
destroyOnCloseButton: true
destroyOnInvisible: true
frame: ModalFrame{}
property int colorScheme: hifi.colorSchemes.light
}

View file

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