Web   ·   Wiki   ·   Activities   ·   Blog   ·   Lists   ·   Chat   ·   Meeting   ·   Bugs   ·   Git   ·   Translate   ·   Archive   ·   People   ·   Donate
summaryrefslogtreecommitdiffstats
path: root/app/templates
diff options
context:
space:
mode:
authorSebastian Silva <sebastian@sugarlabs.org>2011-11-16 07:56:19 (GMT)
committer Sebastian Silva <sebastian@sugarlabs.org>2011-11-16 07:56:19 (GMT)
commit82511a6fe2d29d50c1cdca4b2abb23ff681a1943 (patch)
treeff6359d68287417abfaaf49e492e2630239e60c9 /app/templates
parent61517139f02df2ce417f465dfabdbf5dbe8f4063 (diff)
Major improvements in IDE usability.
Diffstat (limited to 'app/templates')
-rw-r--r--app/templates/editor.html91
-rw-r--r--app/templates/filer.html71
-rw-r--r--app/templates/help.html92
-rw-r--r--app/templates/skel.html21
-rw-r--r--app/templates/split-view.html9
-rw-r--r--app/templates/wysiwyg-editor.html54
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+"&amp;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>&nbsp;/${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>