From d9f1aa73ba830deb31a66a3609d1cea3b9c7008a Mon Sep 17 00:00:00 2001 From: Preston Bezos Date: Mon, 17 Jun 2019 09:12:32 -0700 Subject: [PATCH] switched top bar icons and changes input device meter to be in icon instead of in bar --- .../inputDeviceButton/InputDeviceButton.qml | 121 ++++++++---------- .../inputDeviceButton/images/mic-clip-i.svg | 32 ++--- .../inputDeviceButton/images/mic-gate-i.svg | 22 ++-- .../inputDeviceButton/images/mic-mute-a.svg | 26 ++-- .../inputDeviceButton/images/mic-mute-i.svg | 23 ++-- .../inputDeviceButton/images/mic-ptt-i.svg | 23 +++- .../inputDeviceButton/images/mic-unmute-a.svg | 72 +++-------- .../images/mic-unmute-i-old.svg | 9 ++ .../inputDeviceButton/images/mic-unmute-i.svg | 20 ++- .../simplifiedUI/topBar/SimplifiedTopBar.qml | 45 ++++--- .../topBar/images/desktopMode.svg | 18 +-- .../topBar/images/outputDeviceLoud.svg | 18 ++- .../topBar/images/outputDeviceMuted.svg | 27 ++-- .../simplifiedUI/topBar/images/settings.svg | 30 +++-- .../simplifiedUI/topBar/images/status.svg | 3 - .../simplifiedUI/topBar/images/statusAway.svg | 9 ++ .../topBar/images/statusPresent.svg | 7 + .../simplifiedUI/topBar/images/vrMode.svg | 21 ++- 18 files changed, 259 insertions(+), 267 deletions(-) create mode 100644 interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i-old.svg delete mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/status.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/statusAway.svg create mode 100644 interface/resources/qml/hifi/simplifiedUI/topBar/images/statusPresent.svg diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml index c546af218b..751b3775a7 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/InputDeviceButton.qml @@ -48,18 +48,6 @@ Rectangle { } } - opacity: 0.7 - - onLevelChanged: { - var rectOpacity = (muted && (level >= userSpeakingLevel)) ? 1.0 : 0.7; - if (pushToTalk && !pushingToTalk) { - rectOpacity = (mouseArea.containsMouse) ? 1.0 : 0.7; - } else if (mouseArea.containsMouse && rectOpacity != 1.0) { - rectOpacity = 1.0; - } - micBar.opacity = rectOpacity; - } - color: "#00000000" MouseArea { @@ -116,83 +104,86 @@ Rectangle { Item { id: icon anchors.verticalCenter: parent.verticalCenter - anchors.right: parent.horizontalCenter + anchors.horizontalCenter: parent.horizontalCenter anchors.rightMargin: 2 - width: 13 - height: 21 + width: muted ? 20 : 16 + height: 22 Item { anchors.fill: parent - opacity: mouseArea.containsMouse ? 1.0 : 0.7 Image { id: image + visible: false source: (pushToTalk) ? pushToTalkIcon : muted ? mutedIcon : clipping ? clippingIcon : gated ? gatedIcon : unmutedIcon anchors.fill: parent - fillMode: Image.PreserveAspectFit } ColorOverlay { + opacity: mouseArea.containsMouse ? 1.0 : 0.7 + visible: level === 0 || micBar.muted id: imageOverlay anchors { fill: image } source: image color: pushToTalk ? (pushingToTalk ? colors.unmutedColor : colors.mutedColor) : colors.icon } - } - } - Item { - id: bar + OpacityMask { + id: bar + visible: level > 0 && !micBar.muted + anchors.fill: meterGradient + source: meterGradient + maskSource: image + } - anchors.verticalCenter: parent.verticalCenter - anchors.left: parent.horizontalCenter - anchors.leftMargin: 2 - - width: 4 - height: 21 - - Rectangle { // base - id: baseBar - radius: 4 - anchors { fill: parent } - color: colors.gutter + LinearGradient { + id: meterGradient + anchors { fill: parent } + visible: false + start: Qt.point(0, 0) + end: Qt.point(0, parent.height) + rotation: 180 + gradient: Gradient { + GradientStop { + position: 1.0 + color: colors.greenStart + } + GradientStop { + position: 0.5 + color: colors.greenEnd + } + GradientStop { + position: 0.0 + color: colors.yellow + } + } + } } - Rectangle { // mask - id: mask - height: micBar.muted ? parent.height : parent.height * level - color: micBar.muted ? colors.mutedColor : "white" + Item { width: parent.width - radius: 5 - anchors { - bottom: parent.bottom - bottomMargin: 0 - left: parent.left - leftMargin: 0 + height: parent.height-parent.height*level + anchors.top: parent.top + anchors.left: parent.left + clip:true + Image { + id: maskImage + visible: false + source: (pushToTalk) ? pushToTalkIcon : muted ? mutedIcon : + clipping ? clippingIcon : gated ? gatedIcon : unmutedIcon + anchors.top: parent.top + anchors.left: parent.left + width: parent.width + height: parent.parent.height } - } - - LinearGradient { - anchors { fill: mask } - visible: mask.visible && !micBar.muted - source: mask - start: Qt.point(0, 0) - end: Qt.point(0, bar.height) - rotation: 180 - gradient: Gradient { - GradientStop { - position: 0.0 - color: colors.greenStart - } - GradientStop { - position: 0.5 - color: colors.greenEnd - } - GradientStop { - position: 1.0 - color: colors.yellow - } + + ColorOverlay { + visible: level > 0 && !micBar.muted + anchors { fill: maskImage } + source: maskImage + color: "#b2b2b2" } + } } } diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-clip-i.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-clip-i.svg index 8b694c7f3d..cc2c347d6f 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-clip-i.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-clip-i.svg @@ -1,20 +1,14 @@ - - - - - - image/svg+xml - - - - - - - - - - - - - + + + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-gate-i.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-gate-i.svg index ac70ce66cb..f36461fdd8 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-gate-i.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-gate-i.svg @@ -1,13 +1,11 @@ - - - - - - image/svg+xml - - - - - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-a.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-a.svg index eb36c2dd55..09fe385499 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-a.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-a.svg @@ -1,13 +1,15 @@ - - - - - - image/svg+xml - - - - - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-i.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-i.svg index ebca81f370..658f129817 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-i.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-mute-i.svg @@ -1,13 +1,12 @@ - - - - - - image/svg+xml - - - - - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-ptt-i.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-ptt-i.svg index 3bf1f1bf9e..6f7e606982 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-ptt-i.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-ptt-i.svg @@ -1,8 +1,17 @@ - - -image/svg+xml - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-a.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-a.svg index 0bd0b0c238..8c8fe36955 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-a.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-a.svg @@ -1,57 +1,15 @@ - - - - - - image/svg+xml - - - - - - - - - + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i-old.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i-old.svg new file mode 100644 index 0000000000..77a0f30ed6 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i-old.svg @@ -0,0 +1,9 @@ + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i.svg b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i.svg index 121873dd1b..c7858f9ef4 100644 --- a/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i.svg +++ b/interface/resources/qml/hifi/simplifiedUI/inputDeviceButton/images/mic-unmute-i.svg @@ -1,13 +1,9 @@ - - - - - - image/svg+xml - - - - - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index 85b3cf149f..e3389e43d0 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -134,7 +134,7 @@ Rectangle { id: avatarButtonContainer anchors.verticalCenter: parent.verticalCenter anchors.left: parent.left - anchors.leftMargin: 16 + anchors.leftMargin: 2 width: 48 height: width @@ -203,7 +203,7 @@ Rectangle { id: inputDeviceButton anchors.verticalCenter: parent.verticalCenter anchors.left: avatarButtonContainer.right - anchors.leftMargin: 6 + anchors.leftMargin: 2 width: 32 height: width } @@ -213,7 +213,7 @@ Rectangle { id: outputDeviceButtonContainer anchors.verticalCenter: parent.verticalCenter anchors.left: inputDeviceButton.right - anchors.leftMargin: 2 + anchors.leftMargin: 7 width: 32 height: width @@ -225,9 +225,8 @@ Rectangle { AudioScriptingInterface.systemInjectorGain === simplifiedUI.numericConstants.mutedValue source: outputDeviceButton.outputMuted ? "./images/outputDeviceMuted.svg" : "./images/outputDeviceLoud.svg" anchors.centerIn: parent - width: 20 - height: 20 - fillMode: Image.PreserveAspectFit + width: outputDeviceButton.outputMuted ? 25 : 26 + height: 22 visible: false } @@ -276,7 +275,7 @@ Rectangle { id: statusButton property string currentStatus anchors.centerIn: parent - width: 15 + width: 22 height: width radius: width/2 visible: false @@ -297,6 +296,21 @@ Rectangle { } } + Image { + id: statusIcon + source: statusButton.currentStatus === "available" ? "images/statusPresent.svg" : "images/statusAway.svg" + anchors.centerIn: parent + width: statusButton.currentStatus === "busy" ? 13 : 14 + height: statusButton.currentStatus === "busy" ? 2 : 10 + } + + ColorOverlay { + anchors.fill: statusIcon + opacity: statusButton.currentStatus ? (statusButtonMouseArea.containsMouse ? 1.0 : 0.7) : 0.7 + source: statusIcon + color: "#ffffff" + } + MouseArea { id: statusButtonMouseArea anchors.fill: parent @@ -322,8 +336,8 @@ Rectangle { id: hmdButtonContainer anchors.verticalCenter: parent.verticalCenter anchors.right: settingsButtonContainer.left - anchors.rightMargin: 14 - width: 32 + anchors.rightMargin: 8 + width: 48 height: width visible: false @@ -331,9 +345,8 @@ Rectangle { id: displayModeImage source: HMD.active ? "./images/desktopMode.svg" : "./images/vrMode.svg" anchors.centerIn: parent - width: 29 - height: 16 - fillMode: Image.PreserveAspectFit + width: HMD.active ? 25 : 43 + height: 22 visible: false } @@ -392,16 +405,16 @@ Rectangle { id: settingsButtonContainer anchors.verticalCenter: parent.verticalCenter anchors.right: parent.right - anchors.rightMargin: 16 - width: 32 + anchors.rightMargin: 2 + width: 48 height: width Image { id: settingsButtonImage source: "./images/settings.svg" anchors.centerIn: parent - width: 20 - height: 20 + width: 22 + height: 22 fillMode: Image.PreserveAspectFit visible: false } diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg index 8b04caca88..de344c2c82 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/desktopMode.svg @@ -1,13 +1,7 @@ - - - - - - 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 index ebd844c471..3133b320f3 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceLoud.svg @@ -1,3 +1,15 @@ - - - + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg index 4188175c31..38c670d8ad 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/outputDeviceMuted.svg @@ -1,14 +1,15 @@ - - - - - - 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 index 04a031d498..7d0594837f 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/settings.svg @@ -1,13 +1,19 @@ - - - - - - image/svg+xml - - - - - - + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/status.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/status.svg deleted file mode 100644 index ebd844c471..0000000000 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/status.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusAway.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusAway.svg new file mode 100644 index 0000000000..d5b4798d9e --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusAway.svg @@ -0,0 +1,9 @@ + + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusPresent.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusPresent.svg new file mode 100644 index 0000000000..af7649ba78 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/statusPresent.svg @@ -0,0 +1,7 @@ + + + + + diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg b/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg index 57b564813d..1339473beb 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/images/vrMode.svg @@ -1,13 +1,10 @@ - - - - - - image/svg+xml - - - - - - + + + +