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

Improved dialog box styling and added info dialog for tools

This commit is contained in:
Lewis Hemens 2014-03-22 17:36:52 +00:00
parent dee8731e2f
commit 7862f2ebe1
1 changed files with 41 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@ -11,6 +11,7 @@
font-weight: bold;
font-family: sans-serif;
font-size: 0.95em;
color: #777;
}
body {
@ -36,6 +37,7 @@ body {
}
button {
vertical-align: top;
display: inline-block;
margin: 5px;
width: 30px;
@ -46,6 +48,20 @@ button {
background-size: 100% !important;
}
.info-icon {
width: 30px;
height: 30px;
background-size: 100% !important;
display: inline-block;
}
.info-description {
vertical-align: middle;
margin-left: 5px;
display: inline-block;
height: 30px;
}
/* Mobile overrides */
@media(max-width:600px) {
/* Move file tools to the bottom. */
@ -79,7 +95,6 @@ button {
}
#draw-tools > button, #file-tools > button {
background: transparent;
border-width: 0px;
}
@ -87,10 +102,6 @@ button {
/* TODO: Offset background images. */
}
#file-tools > button {
background: #D8D8D8;
}
.dialog > button {
margin-top: 6px;
display: inline-block;
@ -103,7 +114,8 @@ button {
}
#drive-textarea {
#drive-filename {
display: inline-block;
}
textarea {
@ -118,34 +130,42 @@ textarea {
white-space: pre;
}
.box-image { background-image: url('images/box-tool.png'); }
.line-image { background-image: url('images/line-tool.png'); }
.freeform-image { background-image: url('images/freeform-tool.png'); }
.erase-image { background-image: url('images/erase-tool.png'); }
.move-image { background-image: url('images/move-tool.png'); }
.text-image { background-image: url('images/text-tool.png'); }
.info-image { background-image: url('images/info-button.png'); }
</style>
</head>
<body>
<div id="draw-tools">
<button id="box-button" class="tool active" style="background-image: url('images/box-tool.png');">
<button id="box-button" class="tool active box-image">
</button>
<button id="line-button" class="tool" style="background-image: url('images/line-tool.png');">
<button id="line-button" class="tool line-image">
</button>
<button id="freeform-button" class="tool" style="background-image: url('images/freeform-tool.png');">
<button id="freeform-button" class="tool freeform-image">
</button>
<button id="erase-button" class="tool" style="background-image: url('images/erase-tool.png');">
<button id="erase-button" class="tool erase-image">
</button>
<button id="move-button" class="tool" style="background-image: url('images/move-tool.png');">
<button id="move-button" class="tool move-image">
</button>
<button id="text-button" class="tool" style="background-image: url('images/text-tool.png');">
<button id="text-button" class="tool text-image">
</button>
</div>
<div id="file-tools">
<div id="drive-filename" class="edit"></div>
<div id="drive-filename" class="edit">Untitled ASCII Diagram</div>
<button id="export-button" class="tool">Ex</button>
<button id="import-button" class="tool">Im</button>
<button id="save-button" class="tool">Sa</button>
<button id="clear-button" class="tool">Cl</button>
<button id="undo-button" class="tool">Un</button>
<button id="redo-button" class="tool">Re</button>
<button id="options-button" class="tool" style="background-image: url('images/info-button.png');"></button>
<button id="options-button" class="tool info-image"></button>
</div>
<div id="export-button-dialog" class="dialog">
@ -154,15 +174,16 @@ textarea {
</div>
<div id="options-button-dialog" class="dialog">
<div class="tooltip">Draw boxes. You can resize them later with the Resize tool.</div>
<div class="tooltip">Draw lines. Connect it to another line to change the orientation.</div>
<div class="tooltip">Press a character on the keyboard, then drag to draw it.</div>
<div class="tooltip">Drag out an area to erase.</div>
<div class="tooltip">Resize boxes and lines, just drag a line to change it.</div>
<div class="tooltip">Press where to start writing, and type the text you want.</div>
<div class="info-icon box-image"></div><div class="info-description">Draw boxes. You can resize them later with the Resize tool.</div><br>
<div class="info-icon line-image"></div><div class="info-description">Draw lines. Connect it to another line to change the orientation.</div><br>
<div class="info-icon text-image"></div><div class="info-description">Press a character on the keyboard, then drag to draw it.</div><br>
<div class="info-icon erase-image"></div><div class="info-description">Drag out an area to erase.</div><br>
<div class="info-icon move-image"></div><div class="info-description">Resize boxes and lines, just drag a line to change it.</div><br>
<div class="info-icon text-image"></div><div class="info-description">Press where to start writing, and type the text you want.</div><br>
<button id="use-lines-button">Lines Mode</button>
<button id="use-ascii-button">ASCII Mode</button>
<button class="close-dialog-button">Close</button>
</div>
<div id="import-button-dialog" class="dialog">