haskal
/
asciiflow2
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Updated UI style, re-ordered buttons, added dialog close buttons

This commit is contained in:
Lewis Hemens 2014-02-24 23:47:36 +00:00
parent 9d6eabcad4
commit 8c302af136
2 changed files with 75 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
index.html
View File

@ -6,26 +6,37 @@
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<title>ASCIIFlow Infinity</title> <title>ASCIIFlow Infinity</title>
<style> <style>
#menu {
position: absolute; * {
top: 95px; font-weight: bold;
left: 0px; font-size: 0.95em;
}
#draw-tools, #file-tools, #edit-tools {
display: inline-block;
position: relative;
float: left;
z-index: 100; z-index: 100;
} }
.dialog { .dialog {
position: fixed; position: fixed;
top: 95px; left: 0px;
left: 70px; right: 0px;
right: 10px; top: 0px;
bottom: 10px; bottom: 0px;
margin: auto;
max-width: 640px; max-width: 640px;
max-height: 480px; max-height: 480px;
transition: height 0.3s; width: 80%;
margin-top: 3px; height: 80%;
background: #F8F8F8; background: #B2CAFF;
border-width: 2px;
border-color: #777;
border-style: solid;
display: none; display: none;
border: 1px solid #444; z-index: 100;
padding: 5px;
} }
.visible { .visible {
@ -39,22 +50,31 @@ button {
height: 30px; height: 30px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
background: #F8F8F8;
outline: 0 !important; outline: 0 !important;
border-width: 1px; border-width: 2px;
border-color: #444; border-color: #777;
border-style: solid;
} }
button.active { #draw-tools > button {
background: #D0E0FF; background: #B2CAFF;
} }
button.file { #draw-tools > button.active {
background: #8BB5FF;
}
#file-tools > button {
background: #D8D8D8; background: #D8D8D8;
} }
button.file.active { #edit-tools > button {
background: #C8C8C8; background: #FCB789;
}
.dialog > button {
margin-top: 6px;
display: inline-block;
} }
#ascii-canvas { #ascii-canvas {
@ -73,21 +93,9 @@ button.file.active {
border-bottom: 1px solid #444; border-bottom: 1px solid #444;
} }
/* Small screen overrides */
@media(max-width: 700px) {
#logo {
display: none;
}
#menu {
top: 0px;
}
.dialog {
top: 0px;
}
}
#logo pre { #logo pre {
margin: 0px; margin: 0px;
display: none;
} }
textarea { textarea {
@ -113,29 +121,35 @@ textarea {
/__/ \__\___||____||_||_|_/ |____|____| \_/\_/ /__/ \__\___||____||_||_|_/ |____|____| \_/\_/
</pre></div> </pre></div>
<div id="menu">
<div id="buttons">
<button id="export-button" class="file tool">Export</button>
<button id="import-button" class="file tool">Import</button>
<button id="clear-button" class="file tool">Clear</button>
<button id="box-button" class="tool active">Box</button> <div id="draw-tools">
<button id="line-button" class="tool">Line</button> <button id="box-button" class="tool active">Box</button>
<button id="freeform-button" class="tool">Draw</button> <button id="line-button" class="tool">Line</button>
<button id="erase-button" class="tool">Erase</button> <button id="freeform-button" class="tool">Draw</button>
<button id="move-button" class="tool">Resize</button> <button id="erase-button" class="tool">Erase</button>
<button id="text-button" class="tool">Text</button> <button id="move-button" class="tool">Resize</button>
<button id="undo-button">Undo</button> <button id="text-button" class="tool">Text</button>
<!-- <button id="select-button">Select</button> --> <!-- <button id="select-button">Select</button> -->
</div>
<div id="export-button-dialog" class="dialog">
<textarea id="export-area"></textarea>
</div>
<div id="import-button-dialog" class="dialog">
<textarea id="import-area"></textarea>
<button id="import-submit-button">Submit</button>
</div>
</div> </div>
<div id="file-tools">
<button id="export-button" class="tool">Export</button>
<button id="import-button" class="tool">Import</button>
</div>
<div id="edit-tools">
<button id="clear-button" class="tool">Clear</button>
<button id="undo-button" class="tool">Undo</button>
</div>
<div id="export-button-dialog" class="dialog">
<textarea id="export-area"></textarea>
<button class="close-dialog-button">Close</button>
</div>
<div id="import-button-dialog" class="dialog">
<textarea id="import-area"></textarea>
<button class="close-dialog-button">Close</button>
<button id="import-submit-button">Submit</button>
</div>
<canvas id="ascii-canvas"></canvas> <canvas id="ascii-canvas"></canvas>
<script src="jquery-1.9.1.min.js"></script> <script src="jquery-1.9.1.min.js"></script>
<script src="js-compiled.js"></script> <script src="js-compiled.js"></script>

11
js-lib/controller.js
View File

@ -101,12 +101,12 @@ ascii.Controller.prototype.installBindings = function() {
// TODO: Handle pinch to zoom. // TODO: Handle pinch to zoom.
$('#buttons > button.tool').click(function(e) { $('button.tool').click(function(e) {
this.updateButtons(e.target.id); this.updateButtons(e.target.id);
}.bind(this)); }.bind(this));
$('#undo-button').click(function(e) { $('button.close-dialog-button').click(function(e) {
this.state.undo(); $('.dialog').removeClass('visible');
}.bind(this)); }.bind(this));
$('#import-submit-button').click(function(e) { $('#import-submit-button').click(function(e) {
@ -132,7 +132,7 @@ ascii.Controller.prototype.installBindings = function() {
* @param {string} id The ID of the element clicked. * @param {string} id The ID of the element clicked.
*/ */
ascii.Controller.prototype.updateButtons = function(id) { ascii.Controller.prototype.updateButtons = function(id) {
$('#buttons > button.tool').removeClass('active'); $('button.tool').removeClass('active');
$('.dialog').removeClass('visible'); $('.dialog').removeClass('visible');
$('#' + id).toggleClass('active'); $('#' + id).toggleClass('active');
@ -163,6 +163,9 @@ ascii.Controller.prototype.updateButtons = function(id) {
if (id == 'clear-button') { if (id == 'clear-button') {
this.state.clear(); this.state.clear();
} }
if (id == 'undo-button') {
this.state.undo();
}
}; };
/** /**