Add initial template for gn editor UI

1 files changed, 134 insertions, 0 deletions

diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html
new file mode 100644
index 00000000..60a73b1f
--- /dev/null
+++ b/gn2/wqflask/templates/gn_editor.html
@@ -0,0 +1,134 @@
+{% extends "base.html" %}
+{% block title %}Genenetwork Files Editor {% endblock %}
+
+{% block css %}
+<style>
+
+</style>
+{% endblock %}
+{% block search %}{% endblock %}
+{% block content %}
+<section class="container-fluid">
+    <header class="row">
+<nav class="navbar-inverse">
+  <div class="container-fluid">
+    <div class="navbar-header">
+      <a class="navbar-brand" href="#"><strong>GN Editor<strong></a>
+    </div>
+    <div >
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="#">Commit</a></li>
+	<li><a href="#">Refresh</a></li>
+        <li class="dropdown">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Settings <span class="caret"></span></a>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>           
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</nav>
+    
+    </header>
+
+    <div>
+      <div class="row">
+	<section class="col-sm-6" id="editor" style="height:100vh">
+
+	</section>
+	<section class="col-sm-6">
+	  <div class="row">
+	    <section class="col-sm-10 col-sm-offset-1">
+	      	  Tristique nulla aliquet enim tortor, at auctor urna nunc id cursus metus aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices sagittis orci, a scelerisque! Laoreet suspendisse interdum consectetur libero.
+	    </section>
+	  </div>
+
+	</section>
+      </div>      
+    </div>    
+</section>
+
+{% endblock %}
+
+{% block js %}
+<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
+
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script>
+
+<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script>
+
+ 
+<script src="//ajaxorg.github.io/ace-builds/src-min-noconflict/ace.js"></script>
+
+<script type="text/javascript">
+
+ document.addEventListener('DOMContentLoaded', function() {
+     $('footer').hide()
+  var editor_configurations = {
+  selectionStyle: 'line',// "line"|"text"
+  highlightActiveLine: true, // boolean
+  highlightSelectedWord: true, // boolean
+  readOnly: false, // boolean: true if read only
+  cursorStyle: 'ace', // "ace"|"slim"|"smooth"|"wide"
+  mergeUndoDeltas: true, // false|true|"always"
+  behavioursEnabled: true, // boolean: true if enable custom behaviours
+  wrapBehavioursEnabled: true, // boolean
+  autoScrollEditorIntoView: undefined, // boolean: this is needed if editor is inside scrollable 
+  keyboardHandler: null, // function: handle custom keyboard events
+  
+  // renderer options
+  animatedScroll: false, // boolean: true if scroll should be animated
+  displayIndentGuides: false, // boolean: true if the indent should be shown. See 'showInvisibles'
+  showInvisibles: false, // boolean -> displayIndentGuides: true if show the invisible tabs/spaces in indents
+  showPrintMargin: true, // boolean: true if show the vertical print margin
+  printMarginColumn: 80, // number: number of columns for vertical print margin
+  printMargin: undefined, // boolean | number: showPrintMargin | printMarginColumn
+  showGutter: true, // boolean: true if show line gutter
+  fadeFoldWidgets: false, // boolean: true if the fold lines should be faded
+  showFoldWidgets: true, // boolean: true if the fold lines should be shown ?
+  showLineNumbers: true,
+  highlightGutterLine: false, // boolean: true if the gutter line should be highlighted
+  hScrollBarAlwaysVisible: false, // boolean: true if the horizontal scroll bar should be shown regardless
+  vScrollBarAlwaysVisible: false, // boolean: true if the vertical scroll bar should be shown regardless
+  fontSize: 16, // number | string: set the font size to this many pixels
+  fontFamily: undefined, // string: set the font-family css value
+  maxLines: undefined, // number: set the maximum lines possible. This will make the editor height changes
+  minLines: undefined, // number: set the minimum lines possible. This will make the editor height changes
+  maxPixelHeight: 0, // number -> maxLines: set the maximum height in pixel, when 'maxLines' is defined. 
+  scrollPastEnd: 0, // number -> !maxLines: if positive, user can scroll pass the last line and go n * editorHeight more distance 
+  fixedWidthGutter: false, // boolean: true if the gutter should be fixed width
+  theme: "ace/theme/dracula", // theme string from ace/theme or custom?
+
+  // mouseHandler options
+  scrollSpeed: 2, // number: the scroll speed index
+  dragDelay: 0, // number: the drag delay before drag starts. it's 150ms for mac by default 
+  dragEnabled: true, // boolean: enable dragging
+  focusTimout: 0, // number: the focus delay before focus starts.
+  tooltipFollowsMouse: true, // boolean: true if the gutter tooltip should follow mouse
+
+  // session options
+  firstLineNumber: 1, // number: the line number in first line
+  overwrite: false, // boolean
+  newLineMode: 'auto', // "auto" | "unix" | "windows"
+  useWorker: true, // boolean: true if use web worker for loading scripts
+  useSoftTabs: true, // boolean: true if we want to use spaces than tabs
+  tabSize: 4, // number
+  wrap: true, // boolean | string | number: true/'free' means wrap instead of horizontal scroll, false/'off' means horizontal scroll instead of wrap, and number means number of column before wrap. -1 means wrap at print margin
+  indentedSoftWrap: true, // boolean
+  foldStyle: 'markbegin', // enum: 'manual'/'markbegin'/'markbeginend'.
+  mode: 'ace/mode/markdown'  	 
+}
+
+var editor = ace.edit("editor");
+editor.setOptions(editor_configurations);
+editor.container.style.resize = "horizontal"; 
+ });
+
+
+ 
+  
+</script>
+{% endblock %}
+