diff options
author | Sebastian Silva <sebastian@sugarlabs.org> | 2011-11-16 07:56:19 (GMT) |
---|---|---|
committer | Sebastian Silva <sebastian@sugarlabs.org> | 2011-11-16 07:56:19 (GMT) |
commit | 82511a6fe2d29d50c1cdca4b2abb23ff681a1943 (patch) | |
tree | ff6359d68287417abfaaf49e492e2630239e60c9 /app/templates | |
parent | 61517139f02df2ce417f465dfabdbf5dbe8f4063 (diff) |
Major improvements in IDE usability.
Diffstat (limited to 'app/templates')
-rw-r--r-- | app/templates/editor.html | 91 | ||||
-rw-r--r-- | app/templates/filer.html | 71 | ||||
-rw-r--r-- | app/templates/help.html | 92 | ||||
-rw-r--r-- | app/templates/skel.html | 21 | ||||
-rw-r--r-- | app/templates/split-view.html | 9 | ||||
-rw-r--r-- | app/templates/wysiwyg-editor.html | 54 |
6 files changed, 338 insertions, 0 deletions
diff --git a/app/templates/editor.html b/app/templates/editor.html new file mode 100644 index 0000000..217eefe --- /dev/null +++ b/app/templates/editor.html @@ -0,0 +1,91 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:py="http://genshi.edgewall.org/"> +<head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <title>Editor</title> + <link rel="stylesheet" href="/static/css/main.css" type="text/css" /> + <link rel="stylesheet" href="/static/css/sugar-theme/jquery-ui-1.8.16.sugar.css" /> + <script src="/static/js/jquery-1.6.2.js" type="text/javascript"></script> + <script src="/static/js/jquery-ui-1.8.16.sugar.min.js" type="text/javascript"></script> + <script src="/static/js/websdk-1.js" type="text/javascript"></script> +<!-- <script src="js/jquery-plugins/json.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.hotkeys-0.7.8.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.intercept.js" type="text/javascript"></script> --> +</head> +<body> +<script src="/static/js/ace/ace-uncompressed.js" type="text/javascript" charset="utf-8"></script> +<script src="/static/js/ace/theme-twilight.js" type="text/javascript" charset="utf-8"></script> +<script py:if="mode" src="/static/js/ace/mode-${mode}.js" type="text/javascript" charset="utf-8"></script> +<pre id="editor">$content</pre> +<div id="editor-sidebar" class="bling"> +<div class="file"> + <img src="/static/icons/${icon}" /><br/> + ${absdir}/<br/> + <strong>${basename}</strong><br/> +</div> +<div id="result"></div> +<hr /> +<form id="saveform" action="/save" method="post"> +<input type="hidden" name="filename" id="filename" value="$filename" /> +<input type="hidden" name="directory" id="directory" value="$directory" /> +<input type="hidden" name="content" id="content" value="ñññ" /> +<!--input type="button" class="btn" value="Browse" onclick='location.href="/files/$directory"' /--> +<br/> +<input type="submit" value="Save file" /><br/> +<input type="button" class="btn" value="Delete file" onclick='location.href="/delete/${filename}"' /> +<!-- save a magic cookie for security here TODO --> +<input type="button" class="btn" value="Return" onclick='location.href="/help"' /> +<!--input type="button" class="btn" value="edit wysiwyg" onclick='top.location.href=top.location.href+"&editor=wysiwyg"' /--> +</form> +</div> +<script> + /* attach a submit handler to the form */ + $("#saveform").submit(function(event) { + + /* stop form from submitting normally */ + event.preventDefault(); + + /* get some values from elements on the page: */ + var form = $( this ), + cont = form.find( 'input[name="content"]' ).val(), + file = form.find( 'input[name="filename"]' ).val(), + dir = form.find( 'input[name="directory"]' ).val(), + url = form.attr( 'action' ); + + /* Send the data using post and put the results in a div */ + $.post( url, { content: cont, filename: file, directory: dir }, + function( data ) { + // var content = $( data ).find( '#content' ); + $( "#result" ).empty().append( data ); + $( "#result" ).show().fadeOut(5000); + } + ); + }); + +document.ready = function() { + var aceEditor = ace.edit("editor"); + aceEditor.setTheme("ace/theme/twilight"); + document.getElementById('editor').style.fontSize='14px'; + aceEditor.getSession().setUseSoftTabs(true); + // we can assume we're on unix + aceEditor.getSession().setNewLineMode("unix"); + + if ("${mode}"!="") { + var thisMode = require("ace/mode/${mode}").Mode; + aceEditor.getSession().setMode(new thisMode()); + } + + function dispatch() { + var c = $('#content'); + c.val(aceEditor.getSession().getValue()); + } + dispatch() + + aceEditor.getSession().on('change', dispatch); + $('.bling').slideDown("slow"); +}; +</script> +</body> +</html> diff --git a/app/templates/filer.html b/app/templates/filer.html new file mode 100644 index 0000000..18ce136 --- /dev/null +++ b/app/templates/filer.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:py="http://genshi.edgewall.org/"> +<head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <title>Filer</title> + <link rel="stylesheet" href="/static/css/main.css" type="text/css" /> + <link rel="stylesheet" href="/static/css/sugar-theme/jquery-ui-1.8.16.sugar.css" /> +<script src="/static/js/jquery-1.6.2.js" type="text/javascript"></script> +<script src="/static/js/jquery-ui-1.8.16.sugar.min.js" type="text/javascript"></script> +<script src="/static/js/jquery.corner.js" type="text/javascript"></script> +<script src="/static/js/websdk-1.js" type="text/javascript"></script> +<!-- <script src="/static/js/jquery.plugin.svgimg.js" type="text/javascript"></script> + <script src="js/jquery-plugins/json.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.hotkeys-0.7.8.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.intercept.js" type="text/javascript"></script> --> + <style type="text/css"> + .demoHeaders { margin-top: 2em; } + #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;} + #dialog_link span.ui-icon {margin: 0 5px 0 0;position: absolute;left: .2em;top: 50%;margin-top: -8px;} + ul#icons {margin: 0; padding: 0;} + ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left; list-style: none;} + ul#icons span.ui-icon {float: left; margin: 0 4px;} + </style> +</head> +<body> + <div style="position:absolute; height:24px; z-index: -1" class="filer-header"> + </div> + <div style="height:24px;width:${width}px;" class="filer-header"> + <ul id="icons" style="float:left" class="ui-widget ui-helper-clearfix"> + <li onclick="location='/fileshome/'" class="ui-state-default ui-corner-all"><span class="ui-icon ui-icon-home"></span></li> + </ul> + <div style="margin-left:15px;padding-top:7px;"> + <span style="color:gray">[${project_name}]</span> /${absdir} + </div> + <!-- ul id="icons" class="ui-widget ui-helper-clearfix"> + <li class="ui-state-default ui-corner-all" title=".ui-icon-home"><span class="ui-icon ui-icon-home"></span></li> + </ul--> + </div> + + <div style="width:${width}px;" id="filer" > + <div py:if="files == []" style="width:100%;text-align:center;color:gray;"> + no active project + </div> + <ul> + <li py:for="file in files"> + <a py:if="file.mode == 'dir'" href="${file.href}" class="file"> + <img src="/static/icons/${file.icon}" style="border:none;"/> + <br/>${file.name} + </a> + <a py:if="file.mode != 'dir'" target="frame1" href="${file.href}" class="file"> + <img src="/static/icons/${file.icon}" style="border:none;"/> + <br/>${file.name} + </a> + </li> +</ul> + </div> +<script> +document.ready = function() { + $('.file').corner("15px"); + $("#filer").show("slow"); + /*if ($.browser.mozilla) { + $('#filer img').hide(); + $('#filer span').show(); + }*/ + $( "input:button" ).button(); +}; +</script> +</body> +</html> diff --git a/app/templates/help.html b/app/templates/help.html new file mode 100644 index 0000000..98977ab --- /dev/null +++ b/app/templates/help.html @@ -0,0 +1,92 @@ +<!DOCTYPE HTML> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:py="http://genshi.edgewall.org/"> +<head> + <meta charset="UTF-8" /> + <title></title> + <link rel="stylesheet" href="/static/css/main.css" type="text/css" /> + <link rel="stylesheet" href="/static/css/sugar-theme/jquery-ui-1.8.16.sugar.css" /> + <script src="/static/js/jquery-1.6.2.js" type="text/javascript"></script> + <script src="/static/js/jquery-ui-1.8.16.sugar.min.js" type="text/javascript"></script> + <script src="/static/js/jquery.corner.js" type="text/javascript"></script> + <script src="/static/js/websdk-1.js" type="text/javascript"></script> +</head> +<body> +${get_flashed_messages()} + <div style="margin:0;padding-left:20px;padding-right:20px;margin-top:10px" id="content" class="bling"> + <section> + <div id="tabs"> + <ul> + <li py:if="project_name != 'None'"><a href="#tabs-0">${project_name} Activity</a></li> + <li><a href="#tabs-1">Projects</a></li> + <li><a href="#tabs-2">Framework Documentation</a></li> + <li><a href="#tabs-3">Widgets Showcase</a></li> + <li><a href="#tabs-4">MYOSA</a></li> + </ul> + <div py:if="project_name != 'None'" id="tabs-0" style="height:280px"> + <div style="text-align:right;"> + <p>You are constructing <strong>$project_name Activity</strong>.</p> + <p py:if="edit_history!=[]"> + These are the most recently edited files:</p> + <div id="filer"> + <ul> + <li py:for="file in edit_history"> + <a py:if="file.mode != 'dir'" target="frame1" href="${file.href}" class="file" + style="float:right"> + <img src="/static/icons/${file.icon}" style="border:none;"/> + <br/>${file.name} + </a> + </li> + </ul> + </div> + </div> + </div> + <div id="tabs-1" style="height:280px"> + <div style="text-align:right;"> + <div class="rounded" style="background-color:white;float:left; padding: 35px;"> + <img src="/static/images/activity-websdk.stroke.png" /></div> + <p>You can build Sugar Activities using standard web technologies with WebSDK.</p> + <p>You may start a new project:</p> + <form target="_top" action="/chdir" method="POST"> + <input class="rounded" style="height:22px;background-color:white;" name="newproject" type="text" /> + <p>or open an existing project:</p> + <select style="color:white;" name="oldproject"> + <option value="">(select one)</option> + <option py:for="activity in activities" value="$activity">${activity}</option> + </select> + <br /><br /> + <input type="submit" value="Ok" /> + </form> + </div> + </div> + <div id="tabs-2" style="height:280px"> + <iframe width="100%" height="280" src="/static/doc/flask-docs/quickstart.html#quickstart" /> + </div> + <div id="tabs-3" style="height:280px"> + <iframe width="100%" height="280" src="/static/doc/sugar-theme.html" /> + </div> + <div id="tabs-4" style="height:280px"> + <iframe width="100%" height="280" src="/static/doc/myosa/ch000_table_of_contents.xhtml" /> + </div> + </div> + </section> + </div> + <script> + document.ready = function() { + $('#content').fadeIn(700); + $('.rounded').corner("15px"); + $('#filer-header').corner("15px"); + $("#filer").show("slow"); + $('.file').corner("15px"); + $('.bling').show("slow"); + /* if ($.browser.mozilla) { + $('#filer img').hide(); + $('#filer span').show(); + } This was SVG workaround but is broken in older + gecko anyway*/ + $('#beta').delay(1500).fadeIn("slow"); + $("#tabs").tabs({ header: "h3" }); + } + </script> +</body> +</html> diff --git a/app/templates/skel.html b/app/templates/skel.html new file mode 100644 index 0000000..447ae4b --- /dev/null +++ b/app/templates/skel.html @@ -0,0 +1,21 @@ +<!DOCTYPE HTML> +<html lang="en-US"> +<head> + <meta charset="UTF-8" /> + <title></title> + <link rel="stylesheet" href="/static/css/main.css" type="text/css" /> + <link rel="stylesheet" href="/static/css/sugar-theme/jquery-ui-1.8.15.custom.css" /> + <script src="/static/js/jquery-1.6.2.js" type="text/javascript"></script> + <script src="/static/js/jquery-ui-1.8.15.custom.min.js" type="text/javascript"></script> + <script src="/static/js/websdk-1.js" type="text/javascript"></script> +</head> +<body> + <div id="content" class="bling"> + </div> + <script> + window.onload = function() { + $('#content').fadeIn(700); + } + </script> +</body> +</html> diff --git a/app/templates/split-view.html b/app/templates/split-view.html new file mode 100644 index 0000000..7884a82 --- /dev/null +++ b/app/templates/split-view.html @@ -0,0 +1,9 @@ +<html> +<head> +<title>Construct Activity</title> +</head> +<frameset rows="*, 155px"> + <frame name="frame1" src="${frame1}" /> + <frame name="frame2" src="${frame2}" /> +</frameset> +</html> diff --git a/app/templates/wysiwyg-editor.html b/app/templates/wysiwyg-editor.html new file mode 100644 index 0000000..3f162c9 --- /dev/null +++ b/app/templates/wysiwyg-editor.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" + xmlns:py="http://genshi.edgewall.org/"> +<head> + <meta charset="UTF-8" /> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <title>Editor</title> + <link rel="stylesheet" href="/www/css/main.css" type="text/css" /> +<script src="/www/js/jquery-1.6.2.js" type="text/javascript"></script> +<!-- <script src="js/jquery-plugins/json.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.hotkeys-0.7.8.js" type="text/javascript"></script> + <script src="js/jquery-plugins/jquery.intercept.js" type="text/javascript"></script> --> +</head> +<body> +<script type="text/javascript" src="/www/js/wymeditor/jquery.wymeditor.pack.js"></script> + <script type="text/javascript" src="/www/js/wymeditor/plugins/fullscreen/jquery.wymeditor.fullscreen.js"></script> +<form action="/save" method="post"> +<div id="editor"> +<textarea class="wymeditor">$content</textarea> +</div> +<div id="editor-sidebar" class="bling"> +<div class="file"> + <img src="/www/icons/${icon}" /><br/> + ${absdir}/<br/> + <strong>${basename}</strong><br/> +</div> +<hr /> +<input type="hidden" name="filename" id="filename" value="$filename" /> +<input type="hidden" name="directory" id="directory" value="$directory" /> +<input type="button" class="btn" value="Browse directory" onclick='location.href="/browse?directory=${directory}"' /> +<br/> +<input type="submit" class="btn" value="Save file" /><br/> +<input type="button" class="btn" value="Delete file" onclick='location.href="/delete?filename=${filename}"' /> +<!-- save a magic cookie for security here TODO --> +<input type="button" class="btn" value="Return to main" onclick='top.location.href="/www/index.html"' /> +</div> +</form> +<script> +jQuery(function() { + jQuery(".wymeditor").wymeditor({ + logoHtml: '', + skin: 'silver', + stylesheet: 'main.css', + postInit: function(wym) { + wym.fullscreen(); + } + }); +}); +window.onload = function() { + $('.bling').slideDown("slow"); +}; +</script> +</body> +</html> |