CheckBox UIT and CheckBox added to Avatar app

This commit is contained in:
Zach Fox 2019-05-14 11:50:07 -07:00
parent c57ddf969a
commit cf46f3c9d4
4 changed files with 126 additions and 7 deletions

View file

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

View file

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

View file

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

View file

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