Merge pull request #7748 from ctrlaltdavid/20890

Position default toolbar buttons bottom center of screen
This commit is contained in:
Brad Hefta-Gaub 2016-04-26 10:18:40 -07:00
commit 28b5ef63b8
4 changed files with 32 additions and 19 deletions

View file

@ -27,6 +27,7 @@ var directoryWindow = new OverlayWebWindow({
var toolHeight = 50; var toolHeight = 50;
var toolWidth = 50; var toolWidth = 50;
var TOOLBAR_MARGIN_Y = 25;
function showDirectory() { function showDirectory() {
@ -53,11 +54,14 @@ var toolBar = (function() {
browseDirectoryButton; browseDirectoryButton;
function initialize() { function initialize() {
toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) { toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.directory.toolbar", function(windowDimensions, toolbar) {
return { return {
x: windowDimensions.x - 8 - toolbar.width, x: windowDimensions.x / 2,
y: 50 y: windowDimensions.y
}; };
}, {
x: -2 * toolWidth,
y: -TOOLBAR_MARGIN_Y - toolHeight
}); });
browseDirectoryButton = toolBar.addTool({ browseDirectoryButton = toolBar.addTool({
imageURL: toolIconUrl + "directory-01.svg", imageURL: toolIconUrl + "directory-01.svg",

View file

@ -53,6 +53,7 @@ selectionManager.addEventListener(function() {
var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/"; var toolIconUrl = HIFI_PUBLIC_BUCKET + "images/tools/";
var toolHeight = 50; var toolHeight = 50;
var toolWidth = 50; var toolWidth = 50;
var TOOLBAR_MARGIN_Y = 25;
var DEGREES_TO_RADIANS = Math.PI / 180.0; var DEGREES_TO_RADIANS = Math.PI / 180.0;
var RADIANS_TO_DEGREES = 180.0 / Math.PI; var RADIANS_TO_DEGREES = 180.0 / Math.PI;
@ -179,11 +180,14 @@ var toolBar = (function() {
newParticleButton newParticleButton
function initialize() { function initialize() {
toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) { toolBar = new ToolBar(0, 0, ToolBar.HORIZONTAL, "highfidelity.edit.toolbar", function(windowDimensions, toolbar) {
return { return {
x: windowDimensions.x - 8 - toolbar.width, x: windowDimensions.x / 2,
y: (windowDimensions.y - toolbar.height) / 2 y: windowDimensions.y
}; };
}, {
x: toolWidth,
y: -TOOLBAR_MARGIN_Y - toolHeight
}); });
activeButton = toolBar.addTool({ activeButton = toolBar.addTool({

View file

@ -27,6 +27,7 @@ var examplesWindow = new OverlayWebWindow({
var toolHeight = 50; var toolHeight = 50;
var toolWidth = 50; var toolWidth = 50;
var TOOLBAR_MARGIN_Y = 25;
function showExamples(marketplaceID) { function showExamples(marketplaceID) {
@ -58,11 +59,14 @@ var toolBar = (function() {
browseExamplesButton; browseExamplesButton;
function initialize() { function initialize() {
toolBar = new ToolBar(0, 0, ToolBar.VERTICAL, "highfidelity.examples.toolbar", function(windowDimensions, toolbar) { toolBar = new ToolBar(0, 0, ToolBar.HORIXONTAL, "highfidelity.examples.toolbar", function(windowDimensions, toolbar) {
return { return {
x: windowDimensions.x - 8 - toolbar.width, x: windowDimensions.x / 2,
y: 135 y: windowDimensions.y
}; };
}, {
x: -toolWidth / 2,
y: -TOOLBAR_MARGIN_Y - toolHeight
}); });
browseExamplesButton = toolBar.addTool({ browseExamplesButton = toolBar.addTool({
imageURL: toolIconUrl + "examples-01.svg", imageURL: toolIconUrl + "examples-01.svg",

View file

@ -139,12 +139,13 @@ Tool.prototype = new Overlay2D;
Tool.IMAGE_HEIGHT = 50; Tool.IMAGE_HEIGHT = 50;
Tool.IMAGE_WIDTH = 50; Tool.IMAGE_WIDTH = 50;
ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction) { ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPositionFunction, optionalOffset) {
this.tools = new Array(); this.tools = new Array();
this.x = x; this.x = x;
this.y = y; this.y = y;
this.offset = optionalOffset ? optionalOffset : { x: 0, y: 0 };
this.width = 0; this.width = 0;
this.height = 0 this.height = 0;
this.backAlpha = 1.0; this.backAlpha = 1.0;
this.back = Overlays.addOverlay("rectangle", { this.back = Overlays.addOverlay("rectangle", {
color: { red: 255, green: 255, blue: 255 }, color: { red: 255, green: 255, blue: 255 },
@ -370,14 +371,14 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit
that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients. that.onResizeViewport = function (newSize) { // Can be overridden or extended by clients.
var recommendedRect = Controller.getRecommendedOverlayRect(); var recommendedRect = Controller.getRecommendedOverlayRect();
var recommendedDimmensions = { x: recommendedRect.width, y: recommendedRect.height }; var recommendedDimmensions = { x: recommendedRect.width, y: recommendedRect.height };
var originRelativeX = (that.x - that.origin.x); var originRelativeX = (that.x - that.origin.x - that.offset.x);
var originRelativeY = (that.y - that.origin.y); var originRelativeY = (that.y - that.origin.y - that.offset.y);
var fractionX = clamp(originRelativeX / that.windowDimensions.x, 0, 1); var fractionX = clamp(originRelativeX / that.windowDimensions.x, 0, 1);
var fractionY = clamp(originRelativeY / that.windowDimensions.y, 0, 1); var fractionY = clamp(originRelativeY / that.windowDimensions.y, 0, 1);
that.windowDimensions = newSize || recommendedDimmensions; that.windowDimensions = newSize || recommendedDimmensions;
that.origin = { x: recommendedRect.x, y: recommendedRect.y }; that.origin = { x: recommendedRect.x, y: recommendedRect.y };
var newX = (fractionX * that.windowDimensions.x) + recommendedRect.x; var newX = (fractionX * that.windowDimensions.x) + recommendedRect.x + that.offset.x;
var newY = (fractionY * that.windowDimensions.y) + recommendedRect.y; var newY = (fractionY * that.windowDimensions.y) + recommendedRect.y + that.offset.y;
that.move(newX, newY); that.move(newX, newY);
}; };
if (optionalPersistenceKey) { if (optionalPersistenceKey) {
@ -387,7 +388,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit
var screenSize = { x: recommendedRect.width, y: recommendedRect.height }; var screenSize = { x: recommendedRect.width, y: recommendedRect.height };
if (screenSize.x > 0 && screenSize.y > 0) { if (screenSize.x > 0 && screenSize.y > 0) {
// Guard against invalid screen size that can occur at shut-down. // Guard against invalid screen size that can occur at shut-down.
var fraction = {x: that.x / screenSize.x, y: that.y / screenSize.y}; var fraction = {x: (that.x - that.offset.x) / screenSize.x, y: (that.y - that.offset.y) / screenSize.y};
Settings.setValue(this.fractionKey, JSON.stringify(fraction)); Settings.setValue(this.fractionKey, JSON.stringify(fraction));
} }
} }
@ -456,7 +457,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit
var screenSize = { x: recommendedRect.width, y: recommendedRect.height }; var screenSize = { x: recommendedRect.width, y: recommendedRect.height };
if (savedFraction) { if (savedFraction) {
// If we have saved data, keep the toolbar at the same proportion of the screen width/height. // If we have saved data, keep the toolbar at the same proportion of the screen width/height.
that.move(savedFraction.x * screenSize.x, savedFraction.y * screenSize.y); that.move(savedFraction.x * screenSize.x + that.offset.x, savedFraction.y * screenSize.y + that.offset.y);
} else if (!optionalInitialPositionFunction) { } else if (!optionalInitialPositionFunction) {
print("No initPosition(screenSize, intializedToolbar) specified for ToolBar"); print("No initPosition(screenSize, intializedToolbar) specified for ToolBar");
} else { } else {
@ -464,7 +465,7 @@ ToolBar = function(x, y, direction, optionalPersistenceKey, optionalInitialPosit
var that = this; var that = this;
Script.setTimeout(function () { Script.setTimeout(function () {
var position = optionalInitialPositionFunction(screenSize, that); var position = optionalInitialPositionFunction(screenSize, that);
that.move(position.x, position.y); that.move(position.x + that.offset.x, position.y + that.offset.y);
}, 0); }, 0);
} }
} }