From a9bc7c880674965ef110b4efe3c0f05f72b23016 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Wed, 15 May 2019 17:14:02 -0700 Subject: [PATCH] Images, not glyphs --- .../simplifiedUI/topBar/SimplifiedTopBar.qml | 174 ++++++++++-------- .../topBar/images/desktopMode.svg | 13 ++ .../topBar/images/outputDeviceLoud.svg | 13 ++ .../topBar/images/outputDeviceMuted.svg | 14 ++ .../simplifiedUI/topBar/images/settings.svg | 13 ++ .../topBar/images/updatedIcons.zip | Bin 0 -> 7619 bytes .../simplifiedUI/topBar/images/vrMode.svg | 13 ++ 7 files changed, 162 insertions(+), 78 deletions(-) create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/updatedIcons.zip create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index 2c1e632cff..be8ff3f2c3 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -203,39 +203,45 @@ Rectangle { anchors.verticalCenter: parent.verticalCenter anchors.left: inputDeviceButton.right anchors.leftMargin: 24 - width: 20 + width: 30 height: width - HifiStylesUit.HiFiGlyphs { - property bool outputMuted: false + Image { id: outputDeviceButton - text: (outputDeviceButton.outputMuted ? simplifiedUI.glyphs.vol_0 : simplifiedUI.glyphs.vol_3) - color: (outputDeviceButton.outputMuted ? simplifiedUI.colors.controls.outputVolumeButton.text.muted : simplifiedUI.colors.controls.outputVolumeButton.text.noisy) - opacity: outputDeviceButtonMouseArea.containsMouse ? 1.0 : 0.7 - size: 32 + property bool outputMuted: false + source: outputDeviceButton.outputMuted ? "./images/outputDeviceMuted.svg" : "./images/outputDeviceLoud.svg" anchors.centerIn: parent - width: parent.width - height: parent.height - horizontalAlignment: Text.AlignHCenter - MouseArea { - id: outputDeviceButtonMouseArea - anchors.fill: parent - hoverEnabled: true - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - } - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - outputDeviceButton.outputMuted = !outputDeviceButton.outputMuted; + width: 20 + height: 20 + fillMode: Image.PreserveAspectFit + visible: false + } - sendToScript({ - "source": "SimplifiedTopBar.qml", - "method": "setOutputMuted", - "data": { - "outputMuted": outputDeviceButton.outputMuted - } - }); - } + ColorOverlay { + anchors.fill: outputDeviceButton + opacity: outputDeviceButtonMouseArea.containsMouse ? 1.0 : 0.7 + source: outputDeviceButton + color: (outputDeviceButton.outputMuted ? simplifiedUI.colors.controls.outputVolumeButton.text.muted : simplifiedUI.colors.controls.outputVolumeButton.text.noisy) + } + + MouseArea { + id: outputDeviceButtonMouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + Tablet.playSound(TabletEnums.ButtonHover); + } + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + outputDeviceButton.outputMuted = !outputDeviceButton.outputMuted; + + sendToScript({ + "source": "SimplifiedTopBar.qml", + "method": "setOutputMuted", + "data": { + "outputMuted": outputDeviceButton.outputMuted + } + }); } } } @@ -244,34 +250,40 @@ Rectangle { Item { id: hmdButtonContainer - anchors.top: parent.top - anchors.bottom: parent.bottom + anchors.verticalCenter: parent.verticalCenter anchors.right: settingsButtonContainer.left anchors.rightMargin: 8 - width: height + width: 48 + height: width - HifiStylesUit.HiFiGlyphs { - id: hmdGlyph - text: HMD.active ? simplifiedUI.glyphs.hmd : simplifiedUI.glyphs.screen - color: simplifiedUI.colors.text.white - opacity: hmdGlyphMouseArea.containsMouse ? 1.0 : 0.7 - size: 40 + Image { + id: displayModeImage + source: HMD.active ? "./images/vrMode.svg" : "./images/desktopMode.svg" anchors.centerIn: parent - width: 35 - height: parent.height - horizontalAlignment: Text.AlignHCenter - MouseArea { - id: hmdGlyphMouseArea - anchors.fill: parent - hoverEnabled: true - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - } - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - // TODO: actually do this right and change the display plugin - HMD.active = !HMD.active; - } + width: 29 + height: 16 + fillMode: Image.PreserveAspectFit + visible: false + } + + ColorOverlay { + anchors.fill: displayModeImage + opacity: displayModeMouseArea.containsMouse ? 1.0 : 0.7 + source: displayModeImage + color: simplifiedUI.colors.text.white + } + + MouseArea { + id: displayModeMouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + Tablet.playSound(TabletEnums.ButtonHover); + } + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + // TODO: actually do this right and change the display plugin + HMD.active = !HMD.active; } } } @@ -280,36 +292,42 @@ Rectangle { Item { id: settingsButtonContainer - anchors.top: parent.top - anchors.bottom: parent.bottom + anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right anchors.rightMargin: 16 - width: height + width: 48 + height: width - HifiStylesUit.HiFiGlyphs { - id: settingsGlyph - text: simplifiedUI.glyphs.gear - color: simplifiedUI.colors.text.white - opacity: settingsGlyphMouseArea.containsMouse ? 1.0 : 0.7 - size: 40 + Image { + id: settingsButtonImage + source: "./images/settings.svg" anchors.centerIn: parent - width: 35 - height: parent.height - horizontalAlignment: Text.AlignHCenter - MouseArea { - id: settingsGlyphMouseArea - anchors.fill: parent - hoverEnabled: true - onEntered: { - Tablet.playSound(TabletEnums.ButtonHover); - } - onClicked: { - Tablet.playSound(TabletEnums.ButtonClick); - sendToScript({ - "source": "SimplifiedTopBar.qml", - "method": "toggleSettingsApp" - }); - } + width: 20 + height: 20 + fillMode: Image.PreserveAspectFit + visible: false + } + + ColorOverlay { + opacity: settingsButtonMouseArea.containsMouse ? 1.0 : 0.7 + anchors.fill: settingsButtonImage + source: settingsButtonImage + color: simplifiedUI.colors.text.white + } + + MouseArea { + id: settingsButtonMouseArea + anchors.fill: parent + hoverEnabled: true + onEntered: { + Tablet.playSound(TabletEnums.ButtonHover); + } + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + sendToScript({ + "source": "SimplifiedTopBar.qml", + "method": "toggleSettingsApp" + }); } } } diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg new file mode 100644 index 0000000000..8b04caca88 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg @@ -0,0 +1,13 @@ + + + + + + image/svg+xml + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg new file mode 100644 index 0000000000..987f6eecdf --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg @@ -0,0 +1,13 @@ + + + + + + image/svg+xml + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg new file mode 100644 index 0000000000..4188175c31 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg @@ -0,0 +1,14 @@ + + + + + + image/svg+xml + + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg new file mode 100644 index 0000000000..04a031d498 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg @@ -0,0 +1,13 @@ + + + + + + image/svg+xml + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/updatedIcons.zip b/interface/resources/qml/hifi/simplifiedUI/topBar/images/updatedIcons.zip new file mode 100644 index 0000000000000000000000000000000000000000..205133e4c98e958659ebb6d1c8208e15eded01cc GIT binary patch literal 7619 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 E0o-)w2mk;8 literal 0 HcmV?d00001 diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg new file mode 100644 index 0000000000..57b564813d --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg @@ -0,0 +1,13 @@ + + + + + + image/svg+xml + + + + + + +