Additional toolbar work

This commit is contained in:
Brad Davis 2016-06-20 15:41:21 -07:00
parent 4aa5e87a26
commit 37e9f66639
8 changed files with 174 additions and 75 deletions

View file

@ -3,12 +3,12 @@ import QtQuick.Controls 1.4
import QtWebEngine 1.1;
import Qt.labs.settings 1.0
import "../desktop"
import "../desktop" as OriginalDesktop
import ".."
import "."
import "./toolbars"
Desktop {
OriginalDesktop.Desktop {
id: desktop
MouseArea {
@ -54,12 +54,13 @@ Desktop {
WebEngine.settings.localContentCanAccessRemoteUrls = true;
var sysToolbar = desktop.getToolbar("com.highfidelity.interface.toolbar.system");
//toolbars[sysToolbar.objectName] = sysToolbar
var toggleHudButton = sysToolbar.addButton({
objectName: "hudToggle",
imageURL: "../../../icons/hud-01.svg",
visible: true,
pinned: true,
});
toggleHudButton.yOffset = Qt.binding(function(){
return desktop.pinned ? 50 : 0
});

View file

@ -7,14 +7,16 @@ import "."
Window {
id: window
frame: ToolFrame { }
frame: ToolFrame {
horizontalSpacers: horizontal
verticalSpacers: !horizontal
}
hideBackground: true
resizable: false
destroyOnCloseButton: false
destroyOnHidden: false
closable: false
shown: true
pinned: true
width: content.width
height: content.height
visible: true
@ -32,54 +34,77 @@ Window {
}
onHorizontalChanged: {
var oldParent = horizontal ? column : row;
var newParent = horizontal ? row : column;
var move = [];
var i;
for (i in oldParent.children) {
var child = oldParent.children[i];
if (child.spacer) {
continue;
}
move.push(oldParent.children[i]);
}
for (i in move) {
move[i].parent = newParent;
for (var i in buttons) {
var child = buttons[i];
child.parent = newParent;
if (horizontal) {
move[i].y = 0
child.y = 0
} else {
move[i].x = 0
child.x = 0
}
}
fixSpacers();
}
Item {
id: content
implicitHeight: horizontal ? row.height : column.height
implicitWidth: horizontal ? row.width : column.width
Row {
id: row
spacing: 6
visible: window.horizontal
Rectangle{ readonly property bool spacer: true; id: rowSpacer1; width: 1; height: row.height }
Rectangle{ readonly property bool spacer: true; id: rowSpacer2; width: 1; height: row.height }
Rectangle{ readonly property bool spacer: true; id: rowSpacer3; width: 1; height: row.height }
Rectangle{ readonly property bool spacer: true; id: rowSpacer4; width: 1; height: row.height }
}
Column {
id: column
spacing: 6
visible: !window.horizontal
Rectangle{ readonly property bool spacer: true; id: colSpacer1; width: column.width; height: 1 }
Rectangle{ readonly property bool spacer: true; id: colSpacer2; width: column.width; height: 1 }
Rectangle{ readonly property bool spacer: true; id: colSpacer3; width: column.width; height: 1 }
Rectangle{ readonly property bool spacer: true; id: colSpacer4; width: column.width; height: 1 }
}
Component { id: toolbarButtonBuilder; ToolbarButton { } }
Connections {
target: desktop
onPinnedChanged: {
if (!window.pinned) {
return;
}
var newPinned = desktop.pinned;
for (var i in buttons) {
var child = buttons[i];
if (desktop.pinned) {
if (!child.pinned) {
child.visible = false;
}
} else {
child.visible = true;
}
}
}
}
}
function findButtonIndex(name) {
if (!name) {
return -1;
}
for (var i in buttons) {
var child = buttons[i];
if (child.objectName === name) {
return i;
}
}
return -1;
}
function findButton(name) {
var index = findButtonIndex(name);
if (index < 0) {
return;
}
return buttons[index];
}
function addButton(properties) {
@ -88,30 +113,39 @@ Window {
// If a name is specified, then check if there's an existing button with that name
// and return it if so. This will allow multiple clients to listen to a single button,
// and allow scripts to be idempotent so they don't duplicate buttons if they're reloaded
if (properties.objectName) {
for (var i in buttons) {
var child = buttons[i];
if (child.objectName === properties.objectName) {
return child;
}
}
var result = findButton(properties.objectName);
if (result) {
return result;
}
properties.toolbar = this;
var result = toolbarButtonBuilder.createObject(container, properties);
properties.opacity = 0;
result = toolbarButtonBuilder.createObject(container, properties);
buttons.push(result);
fixSpacers();
result.opacity = 1;
updatePinned();
return result;
}
function fixSpacers() {
colSpacer3.parent = null
colSpacer4.parent = null
rowSpacer3.parent = null
rowSpacer4.parent = null
colSpacer3.parent = column
colSpacer4.parent = column
rowSpacer3.parent = row
rowSpacer4.parent = row
function removeButton(name) {
var index = findButtonIndex(name);
if (index < -1) {
console.warn("Tried to remove non-existent button " + name);
return;
}
buttons[index].destroy();
buttons.splice(index, 1);
updatePinned();
}
function updatePinned() {
var newPinned = false;
for (var i in buttons) {
var child = buttons[i];
if (child.pinned) {
newPinned = true;
break;
}
}
pinned = newPinned;
}
}

View file

@ -7,11 +7,40 @@ Item {
property alias alpha: button.opacity
property var subImage;
property int yOffset: 0
property int buttonState: 0
property var toolbar;
property real size: 50 // toolbar ? toolbar.buttonSize : 50
width: size; height: size
property bool pinned: false
clip: true
Behavior on opacity {
NumberAnimation {
duration: 150
easing.type: Easing.InOutCubic
}
}
property alias fadeTargetProperty: button.opacity
onFadeTargetPropertyChanged: {
visible = (fadeTargetProperty !== 0.0);
}
onVisibleChanged: {
if ((!visible && fadeTargetProperty != 0.0) || (visible && fadeTargetProperty == 0.0)) {
var target = visible;
visible = !visible;
fadeTargetProperty = target ? 1.0 : 0.0;
return;
}
}
onButtonStateChanged: {
yOffset = size * buttonState
}
Component.onCompleted: {
if (subImage) {
if (subImage.y) {
@ -30,10 +59,7 @@ Item {
MouseArea {
anchors.fill: parent
onClicked: {
console.log("Clicked on button " + image.source + " named " + button.objectName)
button.clicked();
}
onClicked: button.clicked();
}
}

View file

@ -59,7 +59,7 @@ Item {
height: 1.66 * window.height
x: (window.width - width) / 2
y: window.height / 2 - 0.375 * height
visible: gradientsSupported && window && window.focus && pane.visible
visible: gradientsSupported && window && window.focus && window.content.visible
gradient: Gradient {
// GradientStop position 0.5 is at full circumference of circle that fits inside the square.
GradientStop { position: 0.0; color: "#ff000000" } // black, 100% opacity

View file

@ -16,20 +16,67 @@ import "../styles-uit"
Frame {
HifiConstants { id: hifi }
property bool horizontalSpacers: false
property bool verticalSpacers: false
Rectangle {
// Dialog frame
id: frameContent
readonly property int frameMargin: 6
readonly property int frameMarginLeft: frameMargin
readonly property int frameMarginRight: frameMargin
readonly property int frameMarginTop: frameMargin
readonly property int frameMarginBottom: frameMargin
readonly property int frameMarginLeft: frameMargin + (horizontalSpacers ? 12 : 0)
readonly property int frameMarginRight: frameMargin + (horizontalSpacers ? 12 : 0)
readonly property int frameMarginTop: frameMargin + (verticalSpacers ? 12 : 0)
readonly property int frameMarginBottom: frameMargin + (verticalSpacers ? 12 : 0)
Rectangle {
visible: horizontalSpacers
anchors.left: parent.left
anchors.leftMargin: 6
anchors.verticalCenter: parent.verticalCenter
width: 8
height: window.height
color: "gray";
radius: 4
}
Rectangle {
visible: horizontalSpacers
anchors.right: parent.right
anchors.rightMargin: 6
anchors.verticalCenter: parent.verticalCenter
width: 8
height: window.height
color: "gray";
radius: 4
}
Rectangle {
visible: verticalSpacers
anchors.top: parent.top
anchors.topMargin: 6
anchors.horizontalCenter: parent.horizontalCenter
height: 8
width: window.width
color: "gray";
radius: 4
}
Rectangle {
visible: verticalSpacers
anchors.bottom: parent.bottom
anchors.bottomMargin: 6
anchors.horizontalCenter: parent.horizontalCenter
height: 8
width: window.width
color: "gray";
radius: 4
}
anchors {
topMargin: -frameMargin
leftMargin: -frameMargin
rightMargin: -frameMargin
bottomMargin: -frameMargin
leftMargin: -frameMarginLeft
rightMargin: -frameMarginRight
topMargin: -frameMarginTop
bottomMargin: -frameMarginBottom
}
anchors.fill: parent
color: hifi.colors.baseGrayHighlight40

View file

@ -15,15 +15,6 @@ class QmlWrapper : public QObject {
public:
QmlWrapper(QObject* qmlObject, QObject* parent = nullptr)
: QObject(parent), _qmlObject(qmlObject) {
const QMetaObject *metaobject = qmlObject->metaObject();
int count = metaobject->propertyCount();
qDebug() << "Scanning properties for " << qmlObject;
for (int i = 0; i < count; ++i) {
QMetaProperty metaproperty = metaobject->property(i);
const char *name = metaproperty.name();
qDebug() << "Property " << name;
}
}
Q_INVOKABLE void writeProperty(QString propertyName, QVariant propertyValue) {

View file

@ -13,7 +13,7 @@ var toolBar = (function() {
newZoneButton,
newParticleButton
var toolIconUrl = Script.resolvePath("assets/images/tools/");
var toolIconUrl = Script.resolvePath("../../system/assets/images/tools/");
function initialize() {
print("Toolbars: " + Toolbars);

View file

@ -57,7 +57,7 @@ ApplicationWindow {
"particle-01.svg",
]
property int iconIndex: 0
readonly property string toolIconUrl: "file:///C:/Users/bdavi/git/hifi/scripts/system/assets/images/tools/"
readonly property string toolIconUrl: "../../../../../scripts/system/assets/images/tools/"
text: "Create Button"
onClicked: {
var name = icons[iconIndex];