mirror of
https://github.com/overte-org/overte.git
synced 2025-08-08 10:17:40 +02:00
CheckBox UIT and CheckBox added to Avatar app
This commit is contained in:
parent
c57ddf969a
commit
cf46f3c9d4
4 changed files with 126 additions and 7 deletions
|
@ -85,13 +85,13 @@ Rectangle {
|
||||||
|
|
||||||
SimplifiedControls.Button {
|
SimplifiedControls.Button {
|
||||||
id: wearButton;
|
id: wearButton;
|
||||||
visible: MyAvatar.skeletonModelURL !== root.itemHref && root.isHovering;
|
visible: MyAvatar.skeletonModelURL !== root.itemHref && root.isHovering
|
||||||
|
|
||||||
anchors.right: parent.right;
|
anchors.right: parent.right
|
||||||
anchors.rightMargin: 24;
|
anchors.rightMargin: 24
|
||||||
anchors.verticalCenter: parent.verticalCenter
|
anchors.verticalCenter: parent.verticalCenter
|
||||||
width: 165;
|
width: 165
|
||||||
height: 32;
|
height: 32
|
||||||
text: "WEAR"
|
text: "WEAR"
|
||||||
|
|
||||||
onClicked: {
|
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 {
|
MouseArea {
|
||||||
z: -1
|
z: -1
|
||||||
id: mouseArea
|
id: mouseArea
|
||||||
|
|
|
@ -125,6 +125,20 @@ QtObject {
|
||||||
readonly property color noisy: "#FFFFFF"
|
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"
|
readonly property color darkSeparator: "#595959"
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -169,12 +169,16 @@ Rectangle {
|
||||||
Rectangle {
|
Rectangle {
|
||||||
z: -1
|
z: -1
|
||||||
id: borderMask
|
id: borderMask
|
||||||
visible: avatarButtonImageMouseArea.containsMouse
|
width: avatarButtonImageMouseArea.containsMouse ? avatarButtonImage.width + 4 : avatarButtonImage.width
|
||||||
width: avatarButtonImage.width + 4
|
|
||||||
height: width
|
height: width
|
||||||
radius: width
|
radius: width
|
||||||
anchors.centerIn: avatarButtonImage
|
anchors.centerIn: avatarButtonImage
|
||||||
color: "#FFFFFF"
|
color: "#FFFFFF"
|
||||||
|
|
||||||
|
Behavior on width {
|
||||||
|
enabled: true
|
||||||
|
SmoothedAnimation { velocity: 80 }
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
Rectangle {
|
Rectangle {
|
||||||
|
|
Loading…
Reference in a new issue