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