diff --git a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/AvatarAppListDelegate.qml b/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/AvatarAppListDelegate.qml index a34a39cda4..92a5b50365 100644 --- a/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/AvatarAppListDelegate.qml +++ b/interface/resources/qml/hifi/simplifiedUI/avatarApp/components/AvatarAppListDelegate.qml @@ -85,13 +85,13 @@ Rectangle { SimplifiedControls.Button { id: wearButton; - visible: MyAvatar.skeletonModelURL !== root.itemHref && root.isHovering; + visible: MyAvatar.skeletonModelURL !== root.itemHref && root.isHovering - anchors.right: parent.right; - anchors.rightMargin: 24; + anchors.right: parent.right + anchors.rightMargin: 24 anchors.verticalCenter: parent.verticalCenter - width: 165; - height: 32; + width: 165 + height: 32 text: "WEAR" onClicked: { @@ -99,6 +99,18 @@ Rectangle { } } + SimplifiedControls.CheckBox { + id: wornCheckBox; + enabled: false + visible: MyAvatar.skeletonModelURL === root.itemHref + anchors.right: parent.right + anchors.rightMargin: 24 + anchors.verticalCenter: parent.verticalCenter + width: 14 + height: 14 + checked: true + } + MouseArea { z: -1 id: mouseArea diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml index f946ebbb40..db4e6d0234 100644 --- a/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedConstants/SimplifiedConstants.qml @@ -125,6 +125,20 @@ QtObject { readonly property color noisy: "#FFFFFF" } } + readonly property QtObject checkBox: QtObject { + readonly property QtObject background: QtObject { + readonly property color disabled: "#464646" + readonly property color active: "#00B4EF" + readonly property color enabled: "#767676" + } + readonly property QtObject border: QtObject { + readonly property color hover: "#00B4EF" + } + readonly property QtObject innerBox: QtObject { + readonly property color border: "#36CDFF" + readonly property color background: "#00B4EF" + } + } } readonly property color darkSeparator: "#595959" diff --git a/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/CheckBox.qml b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/CheckBox.qml new file mode 100644 index 0000000000..0d26623ce9 --- /dev/null +++ b/interface/resources/qml/hifi/simplifiedUI/simplifiedControls/CheckBox.qml @@ -0,0 +1,89 @@ +// +// CheckBox.qml +// +// Created by Zach Fox on 2019-05-14 +// Copyright 2019 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.10 +import QtQuick.Controls 2.3 as Original +import stylesUit 1.0 as HifiStylesUit +import "../simplifiedConstants" as SimplifiedConstants +import TabletScriptingInterface 1.0 + +Original.CheckBox { + id: root + + SimplifiedConstants.SimplifiedConstants { + id: simplifiedUI + } + + property int colorScheme: hifi.colorSchemes.light + property string color: hifi.colors.lightGrayText + property alias checkBoxSize: checkBoxIndicator.width + property alias checkBoxRadius: checkBoxIndicator.radius + property alias checkSize: innerBox.width + property alias checkRadius: innerBox.radius + property bool wrapLabel: true; + property alias labelFontFamily: checkBoxLabel.font.family + property alias labelFontSize: checkBoxLabel.font.pixelSize + property alias labelFontWeight: checkBoxLabel.font.weight + + focusPolicy: Qt.ClickFocus + hoverEnabled: true + + onClicked: { + Tablet.playSound(TabletEnums.ButtonClick); + } + + + onHoveredChanged: { + if (hovered) { + Tablet.playSound(TabletEnums.ButtonHover); + } + } + + + indicator: Rectangle { + id: checkBoxIndicator + width: 14 + height: width + radius: 4 + y: parent.height / 2 - height / 2 + color: root.enabled ? + (root.pressed ? simplifiedUI.colors.controls.checkBox.background.active : simplifiedUI.colors.controls.checkBox.background.enabled) : + simplifiedUI.colors.controls.checkBox.background.disabled + border.width: root.hovered ? 2 : 0 + border.color: simplifiedUI.colors.controls.checkBox.border.hover + + Rectangle { + id: innerBox + visible: root.hovered || root.checked + opacity: root.hovered ? 0.3 : 1.0 + anchors.centerIn: parent + width: checkBoxIndicator.width - 4 + height: width + radius: 2 + color: simplifiedUI.colors.controls.checkBox.innerBox.background + border.width: 1 + border.color: simplifiedUI.colors.controls.checkBox.innerBox.border + } + } + + contentItem: Text { + id: checkBoxLabel + text: root.text + color: root.color + font.family: "Graphik"; + font.pixelSize: 14; + font.weight: Font.DemiBold; + x: 2 + verticalAlignment: Text.AlignVCenter + wrapMode: root.wrapLabel ? Text.Wrap : Text.NoWrap + elide: root.wrapLabel ? Text.ElideNone : Text.ElideRight + leftPadding: root.indicator.width + root.spacing + } +} diff --git a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml index 2c604d27d8..49414031f6 100644 --- a/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml +++ b/interface/resources/qml/hifi/simplifiedUI/topBar/SimplifiedTopBar.qml @@ -169,12 +169,16 @@ Rectangle { Rectangle { z: -1 id: borderMask - visible: avatarButtonImageMouseArea.containsMouse - width: avatarButtonImage.width + 4 + width: avatarButtonImageMouseArea.containsMouse ? avatarButtonImage.width + 4 : avatarButtonImage.width height: width radius: width anchors.centerIn: avatarButtonImage color: "#FFFFFF" + + Behavior on width { + enabled: true + SmoothedAnimation { velocity: 80 } + } } Rectangle {