diff --git a/interface/resources/qml/hifi/dialogs/AboutDialog.qml b/interface/resources/qml/hifi/dialogs/AboutDialog.qml index 3d5d1a94a37..a7d48789b9e 100644 --- a/interface/resources/qml/hifi/dialogs/AboutDialog.qml +++ b/interface/resources/qml/hifi/dialogs/AboutDialog.qml @@ -25,8 +25,201 @@ ScrollingWindow { minSize: Qt.vector2d(480, 706) title: "About" - TabletAboutDialog { - width: pane.width - height: pane.height - } + Column { + x: 45 + y: 30 + spacing: 5 + + Image { + width: 278; height: 73 + fillMode: Image.PreserveAspectFit + source: "../../../images/brand-banner.svg" + } + Item { height: 25; width: 1 } + Column { + id: buildColumn + anchors.left: parent.left + anchors.leftMargin: 0 + RalewayRegular { + text: "Interface" + size: 16 + color: "white" + } + RalewayRegular { + text: "Build " + About.buildVersion + " " + About.releaseName + size: 16 + color: "white" + } + RalewayRegular { + text: "Released " + About.buildDate + size: 16 + color: "white" + } + } + Item { height: 10; width: 1 } + RalewayRegular { + text: "An open source virtual reality platform." + size: 20 + color: "white" + } + RalewayRegular { + textFormat: Text.StyledText + linkColor: "#00B4EF" + color: "white" + text: "Website" + size: 20 + onLinkActivated: { + About.openUrl("https://overte.org"); + } + + } + RalewayRegular { + textFormat: Text.StyledText + linkColor: "#00B4EF" + color: "white" + text: "Source" + size: 20 + onLinkActivated: { + About.openUrl("https://github.com/overte-org/overte"); + } + + } + Item { height: 25; width: 1 } + Row { + spacing: 5 + Image { + sourceSize.width: 34 + sourceSize.height: 25 + source: "../../../images/about-qt.png" + MouseArea { + anchors.fill: parent + onClicked: { + About.openUrl("https://www.qt.io/"); + } + } + } + RalewayRegular { + color: "white" + text: "Built using Qt " + About.qtVersion + size: 12 + anchors.verticalCenter: parent.verticalCenter + } + Item { height: 1; width: 15 } + Image { + sourceSize.width: 34 + sourceSize.height: 25 + source: "../../../images/about-qt.png" + MouseArea { + anchors.fill: parent + onClicked: { + About.openUrl("https://www.qt.io/"); + } + } + } + RalewayRegular { + color: "white" + text: "Qt WebEngine " + About.qtWebEngineVersion + size: 12 + anchors.verticalCenter: parent.verticalCenter + } + } + Row { + spacing: 5 + Image { + sourceSize.width: 25 + sourceSize.height: 25 + source: "../../../images/about-chromium.svg" + MouseArea { + anchors.fill: parent + onClicked: { + About.openUrl("https://www.chromium.org/"); + } + } + } + RalewayRegular { + color: "white" + text: "Chromium " + About.qtChromiumVersion + size: 12 + anchors.verticalCenter: parent.verticalCenter + } + } + Row { + spacing: 5 + + Image { + sourceSize.width: 70 + sourceSize.height: 26 + source: "../../../images/about-physics.png" + } + RalewayRegular { + color: "white" + text: "Physics powered by Bullet" + size: 12 + anchors.verticalCenter: parent.verticalCenter + } + + Image { + sourceSize.width: 34 + sourceSize.height: 25 + source: "../../../images/about-opus.png" + MouseArea { + anchors.fill: parent + onClicked: { + About.openUrl("http://opus-codec.org/"); + } + } + } + RalewayRegular { + color: "white" + text: "Built using the Opus codec." + size: 12 + anchors.verticalCenter: parent.verticalCenter + } + } + Item { height: 20; width: 1 } + RalewayRegular { + color: "white" + text: "© 2022 - 2023 Overte e.V." + size: 14 + } + RalewayRegular { + color: "white" + text: "© 2019 - 2021 Vircadia contributors." + size: 14 + } + RalewayRegular { + color: "white" + text: "© 2012 - 2019 High Fidelity, Inc. All rights reserved." + size: 14 + } + RalewayRegular { + textFormat: Text.StyledText + color: "white" + linkColor: "#00B4EF" + text: "Distributed under the Apache License, Version 2.0.." + size: 14 + onLinkActivated: { + About.openUrl("http://www.apache.org/licenses/LICENSE-2.0.html"); + } + } + Item { height: 35; width: 1 } + RalewayRegular { + color: "white" + text: "In memoriam," + size: 14 + } + RalewayRegular { + color: "white" + text: "2012 - 2019 the High Fidelity virtual reality project." + size: 14 + } + Item { height: 5; width: 1 } + Image { + id: hifiLogo + width: 200; height: 50 + fillMode: Image.PreserveAspectFit + source: "../../../images/about-highfidelity.png" + } + } + } diff --git a/interface/resources/qml/hifi/dialogs/TabletAboutDialog.qml b/interface/resources/qml/hifi/dialogs/TabletAboutDialog.qml deleted file mode 100644 index cac6ab6865f..00000000000 --- a/interface/resources/qml/hifi/dialogs/TabletAboutDialog.qml +++ /dev/null @@ -1,217 +0,0 @@ -// -// TabletAssetDialog.qml -// -// Created by David Rowe on 18 Apr 2017 -// Copyright 2017 High Fidelity, Inc. -// Copyright 2020 Vircadia contributors. -// -// 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 stylesUit 1.0 - -Rectangle { - width: 480 - height: 706 - - color: "#404040" - - Column { - x: 45 - y: 30 - spacing: 5 - - Image { - width: 278; height: 73 - fillMode: Image.PreserveAspectFit - source: "../../../images/brand-banner.svg" - } - Item { height: 25; width: 1 } - Column { - id: buildColumn - anchors.left: parent.left - anchors.leftMargin: 0 - RalewayRegular { - text: "Interface" - size: 16 - color: "white" - } - RalewayRegular { - text: "Build " + About.buildVersion + " " + About.releaseName - size: 16 - color: "white" - } - RalewayRegular { - text: "Released " + About.buildDate - size: 16 - color: "white" - } - } - Item { height: 10; width: 1 } - RalewayRegular { - text: "An open source virtual reality platform." - size: 20 - color: "white" - } - RalewayRegular { - textFormat: Text.StyledText - linkColor: "#00B4EF" - color: "white" - text: "Website" - size: 20 - onLinkActivated: { - About.openUrl("https://overte.org"); - } - - } - RalewayRegular { - textFormat: Text.StyledText - linkColor: "#00B4EF" - color: "white" - text: "Source" - size: 20 - onLinkActivated: { - About.openUrl("https://github.com/overte-org/overte"); - } - - } - Item { height: 25; width: 1 } - Row { - spacing: 5 - Image { - sourceSize.width: 34 - sourceSize.height: 25 - source: "../../../images/about-qt.png" - MouseArea { - anchors.fill: parent - onClicked: { - About.openUrl("https://www.qt.io/"); - } - } - } - RalewayRegular { - color: "white" - text: "Built using Qt " + About.qtVersion - size: 12 - anchors.verticalCenter: parent.verticalCenter - } - Item { height: 1; width: 15 } - Image { - sourceSize.width: 34 - sourceSize.height: 25 - source: "../../../images/about-qt.png" - MouseArea { - anchors.fill: parent - onClicked: { - About.openUrl("https://www.qt.io/"); - } - } - } - RalewayRegular { - color: "white" - text: "Qt WebEngine " + About.qtWebEngineVersion - size: 12 - anchors.verticalCenter: parent.verticalCenter - } - } - Row { - spacing: 5 - Image { - sourceSize.width: 25 - sourceSize.height: 25 - source: "../../../images/about-chromium.svg" - MouseArea { - anchors.fill: parent - onClicked: { - About.openUrl("https://www.chromium.org/"); - } - } - } - RalewayRegular { - color: "white" - text: "Chromium " + About.qtChromiumVersion - size: 12 - anchors.verticalCenter: parent.verticalCenter - } - } - Row { - spacing: 5 - - Image { - sourceSize.width: 70 - sourceSize.height: 26 - source: "../../../images/about-physics.png" - } - RalewayRegular { - color: "white" - text: "Physics powered by Bullet" - size: 12 - anchors.verticalCenter: parent.verticalCenter - } - - Image { - sourceSize.width: 34 - sourceSize.height: 25 - source: "../../../images/about-opus.png" - MouseArea { - anchors.fill: parent - onClicked: { - About.openUrl("http://opus-codec.org/"); - } - } - } - RalewayRegular { - color: "white" - text: "Built using the Opus codec." - size: 12 - anchors.verticalCenter: parent.verticalCenter - } - } - Item { height: 20; width: 1 } - RalewayRegular { - color: "white" - text: "© 2022 - 2023 Overte e.V." - size: 14 - } - RalewayRegular { - color: "white" - text: "© 2019 - 2021 Vircadia contributors." - size: 14 - } - RalewayRegular { - color: "white" - text: "© 2012 - 2019 High Fidelity, Inc. All rights reserved." - size: 14 - } - RalewayRegular { - textFormat: Text.StyledText - color: "white" - linkColor: "#00B4EF" - text: "Distributed under the Apache License, Version 2.0.." - size: 14 - onLinkActivated: { - About.openUrl("http://www.apache.org/licenses/LICENSE-2.0.html"); - } - } - Item { height: 35; width: 1 } - RalewayRegular { - color: "white" - text: "In memoriam," - size: 14 - } - RalewayRegular { - color: "white" - text: "2012 - 2019 the High Fidelity virtual reality project." - size: 14 - } - Item { height: 5; width: 1 } - Image { - id: hifiLogo - width: 200; height: 50 - fillMode: Image.PreserveAspectFit - source: "../../../images/about-highfidelity.png" - } - } -} diff --git a/interface/resources/qml/windows/Decoration.qml b/interface/resources/qml/windows/Decoration.qml index 1ba7ad125d6..5904d2cec2d 100644 --- a/interface/resources/qml/windows/Decoration.qml +++ b/interface/resources/qml/windows/Decoration.qml @@ -1,30 +1,61 @@ // // Decoration.qml // -// Created by Bradley Austin Davis on 12 Jan 2016 -// Copyright 2016 High Fidelity, Inc. +// Created by Armored Dragon with parts used from Bradley Austin Davis +// Copyright 2024 Overte e.V. // // Distributed under the Apache License, Version 2.0. // See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html // +// TODO: Remove Controls after adjusting action buttons + +import QtGraphicalEffects 1.15 import QtQuick 2.5 -import QtGraphicalEffects 1.0 +import QtQuick.Controls 2.0 import "." import stylesUit 1.0 + + Rectangle { HifiConstants { id: hifi } + // Dialog frame + id: root + signal inflateDecorations(); signal deflateDecorations(); - property int frameMargin: 9 + property int iconSize: hifi.dimensions.frameIconSize + property int titleMargin: 5 + property int frameMargin: 2 property int frameMarginLeft: frameMargin property int frameMarginRight: frameMargin - property int frameMarginTop: 2 * frameMargin + iconSize - property int frameMarginBottom: iconSize + 11 + property int frameMarginTop: 10 + iconSize + property int frameMarginBottom: frameMargin + property bool is_window: true // Controls whether or not the border should include the top bar + property color bg_color: Qt.rgba(0,0,0,0.8) + + Behavior on frameMargin { + NumberAnimation { + duration: 100 + easing.type: Easing.InOutQuad + } + } + Behavior on bg_color { + ColorAnimation { + duration: 100 + easing.type: Easing.InOutQuad + } + } + Behavior on titleMargin { + NumberAnimation { + duration: 100 + easing.type: Easing.InOutQuad + } + } anchors { topMargin: -frameMarginTop @@ -33,12 +64,8 @@ Rectangle { bottomMargin: -frameMarginBottom } anchors.fill: parent - color: hifi.colors.baseGrayHighlight40 - border { - width: hifi.dimensions.borderWidth - color: hifi.colors.faintGray50 - } - radius: hifi.dimensions.borderRadius + color: bg_color + radius: 0 // hifi.dimensions.borderRadius // Enable dragging of the window, // detect mouseover of the window (including decoration) @@ -47,13 +74,21 @@ Rectangle { anchors.fill: parent drag.target: window hoverEnabled: true - onEntered: window.mouseEntered(); + onEntered: { + window.mouseEntered(); + frameMargin = 15; + titleMargin = 18; + bg_color = Qt.rgba(0.122, 0.122, 0.122, 1) + } onExited: { if (!containsMouseGlobal()) { window.mouseExited(); + frameMargin = 2; + titleMargin = 5; + bg_color = Qt.rgba(0,0,0,0.8) } } - + function containsMouseGlobal() { var reticlePos = Reticle.position; var globalPosition = decorationMouseArea.mapToItem(desktop, 0, 0); @@ -64,17 +99,17 @@ Rectangle { return localPosition.x >= 0 && localPosition.x <= width && localPosition.y >= 0 && localPosition.y <= height; } - + } Connections { target: window function onMouseEntered() { if (desktop.hmdHandMouseActive) { - root.inflateDecorations() + // root.inflateDecorations() } } function onMouseExited() { - root.deflateDecorations(); + // root.deflateDecorations(); } } Connections { @@ -82,12 +117,93 @@ Rectangle { function onHmdHandMouseActiveChanged() { if (desktop.hmdHandMouseActive) { if (decorationMouseArea.containsMouse) { - root.inflateDecorations(); + // root.inflateDecorations(); } } else { - root.deflateDecorations(); + // root.deflateDecorations(); } } } + + Rectangle{ + visible: is_window + height: frameMarginTop + width: parent.width + color: "black" + } + Row { + visible: is_window + id: controlsRow + width: parent.width + height: frameMarginTop + + // Title + Text { + id: titleText + anchors { + top: parent.top + frameMargin // FIXME: Error somewhere here + bottom: parent.bottom + left: parent.left + leftMargin: titleMargin + } + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + font.family: "Raleway" + font.pixelSize: 20 // Set font size + color: hifi.colors.white + text: window ? window.title : "" + } + + // Action buttons + Row { + anchors { + right: parent.right + top: parent.top + } + // Close + Item { + visible: window ? window.closable : false + height: frameMarginTop + width: 50 + + MouseArea { + anchors.fill: parent + hoverEnabled: true + cursorShape: containsMouse ? Qt.PointingHandCursor : Qt.ArrowCursor + onEntered: { + cursorShape: Qt.PointingHandCursor + closeButton.color = Qt.rgba(1,0,0,1) + } + onExited: { + cursorShape: Qt.ArrowCursor + closeButton.color = Qt.rgba(1,1,1,1) + } + onClicked: { + window.shown = false; + window.windowClosed(); + } + } + + Text { + id: closeButton + text: hifi.glyphs.close + font.family: "hifi-glyphs" + color: Qt.rgba(1,1,1,1) + font.pointSize: 18 + anchors.fill: parent + horizontalAlignment: Text.AlignHCenter + verticalAlignment: Text.AlignVCenter + + Behavior on color { + ColorAnimation{ + duration: 100 + easing.type: Easing.InOutQuad + } + } + } + } + } + + } } diff --git a/interface/resources/qml/windows/DefaultFrame.qml b/interface/resources/qml/windows/DefaultFrame.qml index 5a366e367b3..e5acf888b2e 100644 --- a/interface/resources/qml/windows/DefaultFrame.qml +++ b/interface/resources/qml/windows/DefaultFrame.qml @@ -15,6 +15,6 @@ import stylesUit 1.0 Frame { HifiConstants { id: hifi } - DefaultFrameDecoration {} + Decoration {} } diff --git a/interface/resources/qml/windows/DefaultFrameDecoration.qml b/interface/resources/qml/windows/DefaultFrameDecoration.qml deleted file mode 100644 index fb0dd55985c..00000000000 --- a/interface/resources/qml/windows/DefaultFrameDecoration.qml +++ /dev/null @@ -1,116 +0,0 @@ -// -// 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 stylesUit 1.0 - -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 - - onInflateDecorations: { - if (!HMD.active) { - return; - } - root.frameMargin = 18 - titleText.size = hifi.fontSizes.overlayTitle * 2 - root.iconSize = hifi.dimensions.frameIconSize * 2 - } - - onDeflateDecorations: { - 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; - window.windowClosed(); - } - } - } - } - - 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: (desktop.gradientsSupported && window && window.focus) - cached: true - } -} - diff --git a/interface/resources/qml/windows/Frame.qml b/interface/resources/qml/windows/Frame.qml index cfff40bbf62..e3e3a7fef91 100644 --- a/interface/resources/qml/windows/Frame.qml +++ b/interface/resources/qml/windows/Frame.qml @@ -33,7 +33,6 @@ Item { anchors.fill: parent children: [ - focusShadow, decoration, sizeOutline, debugZ, @@ -55,22 +54,6 @@ Item { window.height = newSize.y } - RadialGradient { - id: focusShadow - width: 1.66 * window.width - height: 1.66 * window.height - x: (window.width - width) / 2 - y: window.height / 2 - 0.375 * height - visible: gradientsSupported && window && window.focus && window.content.visible - gradient: Gradient { - // GradientStop position 0.5 is at full circumference of circle that fits inside the square. - GradientStop { position: 0.0; color: "#ff000000" } // black, 100% opacity - GradientStop { position: 0.333; color: "#1f000000" } // black, 12% opacity - GradientStop { position: 0.5; color: "#00000000" } // black, 0% opacity - GradientStop { position: 1.0; color: "#00000000" } - } - cached: true - } Rectangle { id: sizeOutline diff --git a/interface/resources/qml/windows/ScrollingWindow.qml b/interface/resources/qml/windows/ScrollingWindow.qml index 0c91b58e315..324f58fbf2b 100644 --- a/interface/resources/qml/windows/ScrollingWindow.qml +++ b/interface/resources/qml/windows/ScrollingWindow.qml @@ -55,7 +55,7 @@ Windows.Window { id: contentBackground anchors.fill: parent //anchors.rightMargin: parent.isScrolling ? verticalScrollWidth + 1 : 0 - color: hifi.colors.baseGray + color: "transparent" visible: !window.hideBackground && modality != Qt.ApplicationModal } diff --git a/interface/resources/qml/windows/ToolFrameDecoration.qml b/interface/resources/qml/windows/ToolFrameDecoration.qml index 4f149037b38..ec3934833c3 100644 --- a/interface/resources/qml/windows/ToolFrameDecoration.qml +++ b/interface/resources/qml/windows/ToolFrameDecoration.qml @@ -17,6 +17,8 @@ import stylesUit 1.0 Decoration { id: root HifiConstants { id: hifi } + is_window: false // Not a window, don't show top box + property bool horizontalSpacers: false property bool verticalSpacers: false @@ -25,6 +27,7 @@ Decoration { property int spacerWidth: 8 property int spacerRadius: 4 property int spacerMargin: 12 + frameMargin: 6 frameMarginLeft: frameMargin + (horizontalSpacers ? spacerMargin : 0) frameMarginRight: frameMargin + (horizontalSpacers ? spacerMargin : 0)