diff --git a/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java b/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java index a7848e4..4f71076 100644 --- a/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java +++ b/android-app/asciiflow-infinity/src/main/java/com/lewish/asciiflow/AsciiflowApp.java @@ -4,6 +4,7 @@ import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; +import android.webkit.WebChromeClient; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; @@ -19,8 +20,18 @@ public class AsciiflowApp extends Activity { webView = (WebView) findViewById(R.id.activity_main_webview); WebSettings webSettings = webView.getSettings(); webSettings.setJavaScriptEnabled(true); + webSettings.setSupportMultipleWindows(true); + webSettings.setJavaScriptCanOpenWindowsAutomatically(true); + webView.setWebViewClient(new WebViewClient()); - webView.loadUrl("http://lewish.github.io/asciiflow2/app"); + webView.setWebChromeClient(new WebChromeClient() { + @Override + public void onCloseWindow(WebView window) { + webView.removeView(window); + super.onCloseWindow(window); + } + }); + webView.loadUrl("http://lewish.github.io/asciiflow2/"); } diff --git a/images/box-tool.png b/images/box-tool.png new file mode 100644 index 0000000..5c4f838 Binary files /dev/null and b/images/box-tool.png differ diff --git a/images/erase-tool.png b/images/erase-tool.png new file mode 100644 index 0000000..1f86864 Binary files /dev/null and b/images/erase-tool.png differ diff --git a/images/freeform-tool.png b/images/freeform-tool.png new file mode 100644 index 0000000..8b519b5 Binary files /dev/null and b/images/freeform-tool.png differ diff --git a/images/info-button.png b/images/info-button.png new file mode 100644 index 0000000..b2f6d14 Binary files /dev/null and b/images/info-button.png differ diff --git a/images/line-tool.png b/images/line-tool.png new file mode 100644 index 0000000..dab4b1b Binary files /dev/null and b/images/line-tool.png differ diff --git a/images/move-tool.png b/images/move-tool.png new file mode 100644 index 0000000..cb2b1bb Binary files /dev/null and b/images/move-tool.png differ diff --git a/images/text-tool.png b/images/text-tool.png new file mode 100644 index 0000000..5c30098 Binary files /dev/null and b/images/text-tool.png differ diff --git a/index.html b/index.html index 5cc02f1..4bcfeb2 100644 --- a/index.html +++ b/index.html @@ -13,11 +13,47 @@ font-size: 0.95em; } -#draw-tools, #file-tools, #edit-tools, #drive-tools, .tooltip { +body { + margin: 0px; +} + +#draw-tools { + text-align: center; display: inline-block; - position: relative; - float: left; + position: fixed; + width: 100%; + background-color: #FFF; z-index: 100; + box-shadow:0px 3px 3px #CCC; +} + +#file-tools { + text-align: right; + display: inline-block; + position: fixed; + width: 100%; + z-index: 100; +} + +button { + display: inline-block; + margin: 5px; + width: 30px; + height: 30px; + text-align: center; + cursor: pointer; + outline: 0 !important; + background-size: 100% !important; +} + +/* Mobile overrides */ +@media(max-width:600px) { + /* Move file tools to the bottom. */ + #file-tools { + bottom: 0px; + background-color: #FFF; + box-shadow:0px -3px 3px #CCC; + } } .dialog { @@ -29,50 +65,32 @@ margin: auto; max-width: 640px; max-height: 480px; - width: 80%; - height: 80%; - background: #B2CAFF; - border-width: 2px; - border-color: #777; - border-style: solid; + width: 90%; + height: 70%; + background: #FFF; display: none; z-index: 100; padding: 5px; + box-shadow:0px 0px 3px 3px #CCC; } .visible { display: block !important; } -button { - display: block; - margin: 3px; - width: 60px; - height: 30px; - text-align: center; - cursor: pointer; - outline: 0 !important; - border-width: 2px; - border-color: #777; - border-style: solid; -} - -#draw-tools > button { - background: #B2CAFF; +#draw-tools > button, #file-tools > button { + background: transparent; + border-width: 0px; } #draw-tools > button.active { - background: #8BB5FF; + /* TODO: Offset background images. */ } #file-tools > button { background: #D8D8D8; } -#edit-tools > button { - background: #FCB789; -} - .dialog > button { margin-top: 6px; display: inline-block; @@ -84,23 +102,8 @@ button { top: 0px; } -#logo { - position: fixed; - top: 0px; - left: 0px; - z-index: 100; - background: #F8F8F8; - border-right: 1px solid #444; - border-bottom: 1px solid #444; -} #drive-textarea { - margin: 9px; -} - -#logo pre { - margin: 0px; - display: none; } textarea { @@ -115,68 +118,34 @@ textarea { white-space: pre; } -.tooltip { - display: none; -} - -/* Horrible hack to stop touble tap events on mobile/tablet. */ -/* TODO: Enable tooltips on mobile without double tap .*/ -media(min-width:800px) { -.tool:hover > .tooltip { - display: block; - position: fixed; - bottom: 5px; - left: 5px; -} -} - - -
- - - - - - -
+
- - - - - -
-
- - -
-
+ + + + + + +
@@ -185,6 +154,13 @@ media(min-width:800px) {
+
Draw boxes. You can resize them later with the Resize tool.
+
Draw lines. Connect it to another line to change the orientation.
+
Press a character on the keyboard, then drag to draw it.
+
Drag out an area to erase.
+
Resize boxes and lines, just drag a line to change it.
+
Press where to start writing, and type the text you want.
+