mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-08-16 12:32:57 +02:00
create tab background and new entity buttons
This commit is contained in:
Faye Li
parent
6f506d6023
commit
88318c1911
2 changed files with 291 additions and 82 deletions
|
|
@ -39,106 +39,111 @@ StackView {
|
|||
enabled: true
|
||||
property string originalUrl: ""
|
||||
|
||||
Flow {
|
||||
id: createEntitiesFlow
|
||||
spacing: 16
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 30
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 30
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 30
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 30
|
||||
Rectangle {
|
||||
color: "#383838"
|
||||
Flow {
|
||||
id: createEntitiesFlow
|
||||
spacing: 35
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 55
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 55
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 30
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 70
|
||||
|
||||
TabletButton {
|
||||
icon: "icons/assets-01.svg"
|
||||
text: "ASSETS"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "icons/assets-01.svg"
|
||||
text: "ASSETS"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "model-01.svg"
|
||||
text: "MODEL"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "model-01.svg"
|
||||
text: "MODEL"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../cube-01.svg"
|
||||
text: "CUBE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../cube-01.svg"
|
||||
text: "CUBE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ToolbarButton {
|
||||
imageURL: "../images/sphere-01.svg"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../images/sphere-01.svg"
|
||||
text: "SPHERE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../scripts/system/assets/images/tools/light-01.svg"
|
||||
text: "LIGHT"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../scripts/system/assets/images/tools/light-01.svg"
|
||||
text: "LIGHT"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../scripts/system/assets/images/tools/text-01.svg"
|
||||
text: "TEXT"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../scripts/system/assets/images/tools/text-01.svg"
|
||||
text: "TEXT"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../scripts/system/assets/images/tools/web-01.svg"
|
||||
text: "WEB"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../scripts/system/assets/images/tools/web-01.svg"
|
||||
text: "WEB"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../scripts/system/assets/images/tools/zone-01.svg"
|
||||
text: "ZONE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../scripts/system/assets/images/tools/zone-01.svg"
|
||||
text: "ZONE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
TabletButton {
|
||||
icon: "../scripts/system/assets/images/tools/particle-01.svg"
|
||||
text: "PARTICLE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
|
||||
});
|
||||
NewEntityButton {
|
||||
icon: "../scripts/system/assets/images/tools/particle-01.svg"
|
||||
text: "PARTICLE"
|
||||
onClicked: {
|
||||
editRoot.sendToScript({
|
||||
method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
204
interface/resources/qml/hifi/tablet/NewEntityButton.qml
Normal file
204
interface/resources/qml/hifi/tablet/NewEntityButton.qml
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
import QtQuick 2.0
|
||||
import QtGraphicalEffects 1.0
|
||||
|
||||
Item {
|
||||
id: tabletButton
|
||||
property var uuid;
|
||||
property string text: "EDIT"
|
||||
property string icon: "icons/edit-icon.svg"
|
||||
property string activeText: tabletButton.text
|
||||
property string activeIcon: tabletButton.icon
|
||||
property bool isActive: false
|
||||
property bool inDebugMode: false
|
||||
property bool isEntered: false
|
||||
property double sortOrder: 100
|
||||
property int stableOrder: 0
|
||||
property var tabletRoot;
|
||||
width: 100
|
||||
height: 100
|
||||
|
||||
signal clicked()
|
||||
|
||||
function changeProperty(key, value) {
|
||||
tabletButton[key] = value;
|
||||
}
|
||||
|
||||
onIsActiveChanged: {
|
||||
if (tabletButton.isEntered) {
|
||||
tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate";
|
||||
} else {
|
||||
tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate";
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: buttonBg
|
||||
color: "#222222"
|
||||
opacity: 1
|
||||
radius: 8
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 0
|
||||
anchors.left: parent.left
|
||||
anchors.leftMargin: 0
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 0
|
||||
anchors.top: parent.top
|
||||
anchors.topMargin: 0
|
||||
}
|
||||
|
||||
function urlHelper(src) {
|
||||
if (src.match(/\bhttp/)) {
|
||||
return src;
|
||||
} else {
|
||||
return "../../../" + src;
|
||||
}
|
||||
}
|
||||
|
||||
Image {
|
||||
id: icon
|
||||
width: 50
|
||||
height: 50
|
||||
visible: false
|
||||
anchors.bottom: text.top
|
||||
anchors.bottomMargin: 5
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
fillMode: Image.Stretch
|
||||
source: tabletButton.urlHelper(tabletButton.icon)
|
||||
}
|
||||
|
||||
ColorOverlay {
|
||||
id: iconColorOverlay
|
||||
anchors.fill: icon
|
||||
source: icon
|
||||
color: "#ffffff"
|
||||
}
|
||||
|
||||
Text {
|
||||
id: text
|
||||
color: "#ffffff"
|
||||
text: tabletButton.text
|
||||
font.bold: true
|
||||
font.pixelSize: 18
|
||||
anchors.bottom: parent.bottom
|
||||
anchors.bottomMargin: 10
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
horizontalAlignment: Text.AlignHCenter
|
||||
}
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
enabled: true
|
||||
onClicked: {
|
||||
console.log("Tablet Button Clicked!");
|
||||
if (tabletButton.inDebugMode) {
|
||||
if (tabletButton.isActive) {
|
||||
tabletButton.isActive = false;
|
||||
} else {
|
||||
tabletButton.isActive = true;
|
||||
}
|
||||
}
|
||||
tabletButton.clicked();
|
||||
if (tabletRoot) {
|
||||
tabletRoot.playButtonClickSound();
|
||||
}
|
||||
}
|
||||
onEntered: {
|
||||
tabletButton.isEntered = true;
|
||||
if (tabletButton.isActive) {
|
||||
tabletButton.state = "hover active state";
|
||||
} else {
|
||||
tabletButton.state = "hover state";
|
||||
}
|
||||
}
|
||||
onExited: {
|
||||
tabletButton.isEntered = false;
|
||||
if (tabletButton.isActive) {
|
||||
tabletButton.state = "active state";
|
||||
} else {
|
||||
tabletButton.state = "base state";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
states: [
|
||||
State {
|
||||
name: "hover state"
|
||||
|
||||
PropertyChanges {
|
||||
target: buttonOutline
|
||||
border.color: "#1fc6a6"
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: glow
|
||||
visible: true
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "active state"
|
||||
|
||||
PropertyChanges {
|
||||
target: buttonOutline
|
||||
border.color: "#1fc6a6"
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: buttonBg
|
||||
color: "#1fc6a6"
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: text
|
||||
color: "#333333"
|
||||
text: tabletButton.activeText
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: iconColorOverlay
|
||||
color: "#333333"
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: icon
|
||||
source: tabletButton.urlHelper(tabletButton.activeIcon)
|
||||
}
|
||||
},
|
||||
State {
|
||||
name: "hover active state"
|
||||
|
||||
PropertyChanges {
|
||||
target: glow
|
||||
visible: true
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: buttonOutline
|
||||
border.color: "#ffffff"
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: buttonBg
|
||||
color: "#1fc6a6"
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: text
|
||||
color: "#333333"
|
||||
}
|
||||
|
||||
PropertyChanges {
|
||||
target: iconColorOverlay
|
||||
color: "#333333"
|
||||
}
|
||||
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in a new issue