Menu style changes and pointer support

This commit is contained in:
Lewis Hemens 2014-01-20 21:36:58 +00:00
parent e73ba39e13
commit 5c837d80bf
3 changed files with 47 additions and 21 deletions

View File

@ -17,38 +17,41 @@
text-align: center;
}
#dialog {
.dialog {
transition: height 0.3s;
background: #DDD;
border-radius: 5px;
margin-top: 10px;
}
margin: 10px;
border: 1px solid #444;
background: #D0E0FF;
#dialog.hidden {
height: 0px;
display: none;
}
.visible {
display: block !important;
}
button {
width: 60px;
width: 15%;
height: 30px;
text-align: center;
cursor: pointer;
border-radius: 5px;
background: #DEF;
outline: 0 !important;
border: 0px;
border-width: 1px;
border-color: #DDD;
}
button.active {
font-weight: bold;
border-color: #444;
background: #D0E0FF;
}
#ascii-canvas {
position: fixed;
left: 0px;
top: 0px;
cursor: crosshair;
};
#export-area {
@ -61,15 +64,15 @@ button.active {
<body>
<div id="menu">
<div id="buttons">
<button id="box-button">Box</button>
<button id="box-button" class="active">Box</button>
<button id="line-button">Line</button>
<button id="freeform-button">Draw</button>
<button id="erase-button">Erase</button>
<button id="move-button">Resize</button>
<button id="menu-button">Menu</button>
</div>
<div id="dialog" class="hidden">
<textarea id="export-area"></textarea>
<div id="menu-button-dialog" class="dialog">
<pre id="export-area">BLAH</pre>
</div>
</div>
<canvas id="ascii-canvas"></canvas>

View File

@ -41,6 +41,10 @@ ascii.Controller.prototype.handlePress = function(position) {
* @param {ascii.Vector} position
*/
ascii.Controller.prototype.handleMove = function(position) {
// Update the cursor pointer, depending on the draw function.
this.view.canvas.style.cursor = this.drawFunction.getCursor(
this.view.screenToCell(position));
// No clicks, so just ignore.
if (this.pressVector == null) { return; }
@ -156,12 +160,12 @@ ascii.Controller.prototype.installBindings = function() {
* @param {string} id The ID of the element clicked.
*/
ascii.Controller.prototype.updateButtons = function(id) {
$('#buttons > button').removeClass();
$('#dialog').addClass('hidden');
$('#buttons > button').removeClass('active');
$('.dialog').removeClass('visible');
$('#' + id).addClass('active');
if (id == 'menu-button') {
$('#dialog').removeClass('hidden');
}
$('#' + id + '-dialog').addClass('visible');
// Install the right draw tool based on button pressed.
if (id == 'box-button') {
this.drawFunction = new ascii.DrawBox(this.state);

View File

@ -44,6 +44,11 @@ ascii.DrawFunction.prototype.start = function(position) {};
ascii.DrawFunction.prototype.move = function(position) {};
/** End of drawing. @param {ascii.Vector} position */
ascii.DrawFunction.prototype.end = function(position) {};
/** Cursor for given cell.
* @param {ascii.Vector} position
* @return {string}
*/
ascii.DrawFunction.prototype.getCursor = function(position) {};
/**
* @constructor
@ -67,7 +72,9 @@ ascii.DrawBox.prototype.move = function(position) {
ascii.DrawBox.prototype.end = function(position) {
this.state.commitDraw();
};
ascii.DrawBox.prototype.getCursor = function(position) {
return 'crosshair';
};
/**
* @constructor
@ -94,10 +101,12 @@ ascii.DrawLine.prototype.move = function(position) {
drawLine(this.state, this.startPosition, position, clockwise);
};
ascii.DrawLine.prototype.end = function(position) {
this.state.commitDraw();
};
ascii.DrawLine.prototype.getCursor = function(position) {
return 'crosshair';
};
/**
* @constructor
@ -116,9 +125,11 @@ ascii.DrawFreeform.prototype.start = function(position) {
ascii.DrawFreeform.prototype.move = function(position) {
this.state.setValue(position, this.value);
};
ascii.DrawFreeform.prototype.end = function(position) {
};
ascii.DrawFreeform.prototype.getCursor = function(position) {
return 'crosshair';
};
/**
* @constructor
@ -215,3 +226,11 @@ ascii.DrawMove.prototype.followLine = function(startPosition, direction) {
}
};
ascii.DrawMove.prototype.getCursor = function(position) {
if (this.state.getCell(position).isSpecial()) {
return 'pointer';
} else {
return 'default';
}
};