diff --git a/interface/resources/icons/create-icons/20-text-01.svg b/interface/resources/icons/create-icons/20-text-01.svg new file mode 100644 index 0000000000..337f3b70e3 --- /dev/null +++ b/interface/resources/icons/create-icons/20-text-01.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + diff --git a/interface/resources/icons/create-icons/21-cube-01.svg b/interface/resources/icons/create-icons/21-cube-01.svg new file mode 100644 index 0000000000..21a980ca35 --- /dev/null +++ b/interface/resources/icons/create-icons/21-cube-01.svg @@ -0,0 +1,17 @@ + + + + + + + + diff --git a/interface/resources/icons/create-icons/22-sphere-01.svg b/interface/resources/icons/create-icons/22-sphere-01.svg new file mode 100644 index 0000000000..5080a16e78 --- /dev/null +++ b/interface/resources/icons/create-icons/22-sphere-01.svg @@ -0,0 +1,21 @@ + + + + + + + + diff --git a/interface/resources/icons/create-icons/23-zone-01.svg b/interface/resources/icons/create-icons/23-zone-01.svg new file mode 100644 index 0000000000..5428257893 --- /dev/null +++ b/interface/resources/icons/create-icons/23-zone-01.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + diff --git a/interface/resources/icons/create-icons/24-light-01.svg b/interface/resources/icons/create-icons/24-light-01.svg new file mode 100644 index 0000000000..028ea22793 --- /dev/null +++ b/interface/resources/icons/create-icons/24-light-01.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + diff --git a/interface/resources/icons/create-icons/25-web-1-01.svg b/interface/resources/icons/create-icons/25-web-1-01.svg new file mode 100644 index 0000000000..4f0eccc11e --- /dev/null +++ b/interface/resources/icons/create-icons/25-web-1-01.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + diff --git a/interface/resources/icons/create-icons/90-particles-01.svg b/interface/resources/icons/create-icons/90-particles-01.svg new file mode 100644 index 0000000000..5e0105d7cd --- /dev/null +++ b/interface/resources/icons/create-icons/90-particles-01.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + diff --git a/interface/resources/icons/create-icons/94-model-01.svg b/interface/resources/icons/create-icons/94-model-01.svg new file mode 100644 index 0000000000..5d8c4c5eca --- /dev/null +++ b/interface/resources/icons/create-icons/94-model-01.svg @@ -0,0 +1,20 @@ + + + + + diff --git a/interface/resources/images/sphere-01.svg b/interface/resources/images/sphere-01.svg new file mode 100644 index 0000000000..975199c8da --- /dev/null +++ b/interface/resources/images/sphere-01.svg @@ -0,0 +1,108 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml index 44959395fa..00856f8212 100644 --- a/interface/resources/qml/hifi/tablet/Edit.qml +++ b/interface/resources/qml/hifi/tablet/Edit.qml @@ -1,10 +1,13 @@ import QtQuick 2.5 -import QtQuick.Controls 1.0 +import QtQuick.Controls 1.4 import QtWebEngine 1.1 import QtWebChannel 1.0 import QtQuick.Controls.Styles 1.4 import "../../controls" +import "../toolbars" import HFWebEngineProfile 1.0 +import QtGraphicalEffects 1.0 +import "../../styles-uit" StackView { id: editRoot @@ -33,109 +36,222 @@ StackView { height: 60 Tab { - title: "Create" + title: "CREATE" active: true enabled: true property string originalUrl: "" - Flow { - id: createEntitiesFlow - spacing: 16 + Rectangle { + color: "#404040" - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/assets-01.svg" - text: "ASSETS" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" } - }); + Text { + color: "#ffffff" + text: "Choose an Entity Type to Create:" + font.pixelSize: 14 + font.bold: true + anchors.top: parent.top + anchors.topMargin: 28 + anchors.left: parent.left + anchors.leftMargin: 28 + } + + Flow { + id: createEntitiesFlow + spacing: 35 + anchors.right: parent.right + anchors.rightMargin: 55 + anchors.left: parent.left + anchors.leftMargin: 55 + anchors.top: parent.top + anchors.topMargin: 70 + + + NewEntityButton { + icon: "icons/create-icons/94-model-01.svg" + text: "MODEL" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newModelButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/21-cube-01.svg" + text: "CUBE" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/22-sphere-01.svg" + text: "SPHERE" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/24-light-01.svg" + text: "LIGHT" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newLightButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/20-text-01.svg" + text: "TEXT" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newTextButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/25-web-1-01.svg" + text: "WEB" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newWebButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/23-zone-01.svg" + text: "ZONE" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" } + }); + editTabView.currentIndex = 2 + } + } + + NewEntityButton { + icon: "icons/create-icons/90-particles-01.svg" + text: "PARTICLE" + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" } + }); + editTabView.currentIndex = 2 + } } } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/model-01.svg" - text: "MODEL" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newModelButton" } - }); + Item { + id: assetServerButton + width: 370 + height: 38 + anchors.horizontalCenter: parent.horizontalCenter + anchors.top: createEntitiesFlow.bottom + anchors.topMargin: 35 + + Rectangle { + id: assetServerButtonBg + color: "black" + opacity: 1 + radius: 6 + 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 } - } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/cube-01.svg" - text: "CUBE" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" } - }); - } - } + Rectangle { + id: assetServerButtonGradient + gradient: Gradient { + GradientStop { + position: 0 + color: "#383838" + } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/sphere-01.svg" - text: "SPHERE" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" } - }); + GradientStop { + position: 1 + color: "black" + } + } + opacity: 1 + radius: 6 + 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 } - } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/light-01.svg" - text: "LIGHT" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newLightButton" } - }); + Text { + color: "#ffffff" + text: "OPEN THIS DOMAIN'S ASSET SERVER" + font.bold: true + font.pixelSize: 14 + anchors.centerIn: parent } - } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/text-01.svg" - text: "TEXT" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newTextButton" } - }); + MouseArea { + anchors.fill: parent + hoverEnabled: true + enabled: true + onClicked: { + editRoot.sendToScript({ + method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" } + }); + } + onEntered: { + assetServerButton.state = "hover state"; + } + onExited: { + assetServerButton.state = "base state"; + } } - } - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/web-01.svg" - text: "WEB" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newWebButton" } - }); - } - } + states: [ + State { + name: "hover state" - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/zone-01.svg" - text: "ZONE" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" } - }); - } - } + PropertyChanges { + target: assetServerButtonGradient + opacity: 0 + } + }, + State { + name: "base state" - Button { - iconSource: "../../../../../scripts/system/assets/images/tools/particle-01.svg" - text: "PARTICLE" - onClicked: { - editRoot.sendToScript({ - method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" } - }); - } + PropertyChanges { + target: assetServerButtonGradient + opacity: 1 + } + } + ] } } } Tab { - title: "List" + title: "LIST" active: true enabled: true property string originalUrl: "" @@ -150,7 +266,7 @@ StackView { } Tab { - title: "Properties" + title: "PROPERTIES" active: true enabled: true property string originalUrl: "" @@ -165,7 +281,7 @@ StackView { } Tab { - title: "Grid" + title: "GRID" active: true enabled: true property string originalUrl: "" @@ -180,7 +296,7 @@ StackView { } Tab { - title: "Particles" + title: "P" active: true enabled: true property string originalUrl: "" @@ -198,17 +314,40 @@ StackView { style: TabViewStyle { frameOverlap: 1 tab: Rectangle { - color: styleData.selected ? "slategrey" :"grey" - implicitWidth: text.width + 25 - implicitHeight: 60 - radius: 2 + color: styleData.selected ? "#404040" :"black" + implicitWidth: text.width + 42 + implicitHeight: 40 Text { id: text anchors.centerIn: parent text: styleData.title + font.pixelSize: 16 + font.bold: true color: styleData.selected ? "white" : "white" + property string glyphtext: "" + HiFiGlyphs { + anchors.centerIn: parent + size: 30 + color: "#ffffff" + text: text.glyphtext + } + Component.onCompleted: if (styleData.title == "P") { + text.text = " "; + text.glyphtext = "\ue004"; + } } } + tabBar: Rectangle { + color: "black" + 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 + } } } } diff --git a/interface/resources/qml/hifi/tablet/NewEntityButton.qml b/interface/resources/qml/hifi/tablet/NewEntityButton.qml new file mode 100644 index 0000000000..e5684fa791 --- /dev/null +++ b/interface/resources/qml/hifi/tablet/NewEntityButton.qml @@ -0,0 +1,160 @@ +import QtQuick 2.0 +import QtGraphicalEffects 1.0 + +Item { + id: newEntityButton + property var uuid; + property string text: "ENTITY" + property string icon: "icons/edit-icon.svg" + property string activeText: newEntityButton.text + property string activeIcon: newEntityButton.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: "#1c1c1c" + 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; + } + } + + Rectangle { + id: buttonOutline + color: "#00000000" + opacity: 0 + radius: 8 + z: 1 + border.width: 2 + border.color: "#ffffff" + 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 + } + + DropShadow { + id: glow + visible: false + anchors.fill: parent + horizontalOffset: 0 + verticalOffset: 0 + color: "#ffffff" + radius: 20 + z: -1 + samples: 41 + source: buttonOutline + } + + + Image { + id: icon + width: 50 + height: 50 + visible: false + anchors.bottom: text.top + anchors.bottomMargin: 5 + anchors.horizontalCenter: parent.horizontalCenter + fillMode: Image.Stretch + source: newEntityButton.urlHelper(newEntityButton.icon) + } + + ColorOverlay { + id: iconColorOverlay + anchors.fill: icon + source: icon + color: "#ffffff" + } + + Text { + id: text + color: "#ffffff" + text: newEntityButton.text + font.bold: true + font.pixelSize: 16 + anchors.bottom: parent.bottom + anchors.bottomMargin: 12 + anchors.horizontalCenter: parent.horizontalCenter + horizontalAlignment: Text.AlignHCenter + } + + MouseArea { + anchors.fill: parent + hoverEnabled: true + enabled: true + onClicked: { + newEntityButton.clicked(); + } + onEntered: { + newEntityButton.state = "hover state"; + } + onExited: { + newEntityButton.state = "base state"; + } + } + + states: [ + State { + name: "hover state" + + PropertyChanges { + target: buttonOutline + opacity: 1 + } + + PropertyChanges { + target: glow + visible: true + } + }, + State { + name: "base state" + + PropertyChanges { + target: glow + visible: false + } + } + ] +} + +