diff options
| -rw-r--r-- | gn2/wqflask/templates/gn_editor.html | 139 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gn_editor_commit.html | 63 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gn_editor_results_page.html | 63 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gn_editor_settings.html | 243 |
4 files changed, 307 insertions, 201 deletions
diff --git a/gn2/wqflask/templates/gn_editor.html b/gn2/wqflask/templates/gn_editor.html index 18d4eaa1..09723dab 100644 --- a/gn2/wqflask/templates/gn_editor.html +++ b/gn2/wqflask/templates/gn_editor.html @@ -1,65 +1,94 @@ {% extends "base.html" %} -{% block title %}Genenetwork Files Editor {% endblock %} - +{% block title %}Genenetwork Files Editor{% endblock %} {% block css %} - - -<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='diff2html/diff2html.min.css') }}" /> -<link rel="stylesheet" type="text/css" href="{{ url_for('css', filename='highlight/default.min.css') }}" /> -<style> - -</style> + <link rel="stylesheet" + type="text/css" + href="{{ url_for('css', filename='diff2html/diff2html.min.css') }}" /> + <link rel="stylesheet" + type="text/css" + href="{{ url_for('css', filename='highlight/default.min.css') }}" /> {% endblock %} {% block search %}{% endblock %} {% block content %} -<section class="container-fluid"> - <header class="row"> - <nav class="navbar" style="background-color:#ccc"> - <div class="container-fluid"> - <div class="navbar-header"> - <a class="navbar-brand" href="#"><strong>GN Editor<strong></a> - </div> - <div style="padding-right:3.6rem"> - <ul class="nav navbar-nav navbar-right"> - <li><a href="#" hx-get="/editor/commit" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Commit </a></li> - <li><a href="#" hx-get="/editor/settings" hx-target="#output" hx-trigger="click" hx-swap="innerHTML" >Settings </a></li> - <li><a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" target="_blank">Help</a></li> - </ul> - </div> - </div> - </nav> - </header> - <div> - <div class="row" id="gn-editor"> - <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" id="output" style="height:100vh;overflow-y:scroll;padding-top:2.5rem" id="swap"> - </section> + <section class="container-fluid"> + <header class="row"> + <nav class="navbar" style="background-color:#ccc"> + <div class="container-fluid"> + <div class="navbar-header"> + <a class="navbar-brand" href="#"><strong>GN Editor</strong></a> + </div> + <div style="padding-right:3.6rem"> + <ul class="nav navbar-nav navbar-right"> + <li> + <a href="#" + hx-get="/editor/commit" + hx-target="#output" + hx-trigger="click" + hx-swap="innerHTML">Commit</a> + </li> + <li> + <a href="#" + hx-get="/editor/settings" + hx-target="#output" + hx-trigger="click" + hx-swap="innerHTML">Settings</a> + </li> + <li> + <a href="https://github.com/ajaxorg/ace/wiki/Default-Keyboard-Shortcuts" + target="_blank">Help</a> + </li> + </ul> + </div> + </div> + </nav> + </header> + <div> + <div class="row" id="gn-editor"> + <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" + id="output" + style="height:100vh; + overflow-y:scroll; + padding-top:2.5rem" + id="swap"> + </section> + </div> + </section> + </div> </div> - - </section> - </div> - </div> -</section> - + </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='diff2html/diff2html.min.js') }}"></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 language="javascript" type="text/javascript" src="{{ url_for('js', filename='jsdiff/diff.min.js') }}"></script> -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='ace/ace.js') }}"></script> -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='marked/marked.min.js') }}"></script> -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='marked/marked-highlight.js') }}"></script> -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='highlight/highlight.min.js') }}"></script> -<script type="text/javascript"> + <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='diff2html/diff2html.min.js') }}"></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 language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='jsdiff/diff.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='ace/ace.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='marked/marked.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='marked/marked-highlight.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='highlight/highlight.min.js') }}"></script> + <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { $('footer').hide() @@ -170,5 +199,5 @@ }); -</script> + </script> {% endblock %} diff --git a/gn2/wqflask/templates/gn_editor_commit.html b/gn2/wqflask/templates/gn_editor_commit.html index 8fd1547b..c08c93bb 100644 --- a/gn2/wqflask/templates/gn_editor_commit.html +++ b/gn2/wqflask/templates/gn_editor_commit.html @@ -1,40 +1,37 @@ <section classs="row commit-content" style="padding-top:25px"> - <div class="col-sm-10 col-sm-offset-1"> - <div> - <div> - <h2> <i>Commit your Changes</i></h2> - </div> - </div> - <br> - <div> - <div class="row"> - <label class="col-sm-4" for="message"> <i>*Commit Message*</i></label> - </div> - <br> - <div class="row"> - <textarea rows="12" class="col-sm-12" name="message" required id="commit-message"> + <div class="col-sm-10 col-sm-offset-1"> + <div> + <div> + <h2> + <i>Commit your Changes</i> + </h2> + </div> + </div> + <br> + <div> + <div class="row"> + <label class="col-sm-8" for="message"> + <i>*Commit Message*</i> + </label> + </div> + <br> + <div class="row"> + <textarea rows="12" class="col-sm-12" name="message" required id="commit-message"> </textarea> - </div> - </div> - <br> - <br> - <div class="row"> - <button id="btn-commit" - class="btn btn-primary col-sm-2 col-sm-offset-1"> - Commit - </button> - <button id="btn-diff" - class="btn col-sm-2 col-sm-offset-1"> - Show Diff - </button> - </div> - <br> - <div id="diff_page"> + </div> + </div> + <br> + <br> + <div class="row"> + <button id="btn-commit" class="btn btn-primary col-lg-3 col-lg-offset-1 col-sm-4 col-sm-offset-1">Commit</button> + <button id="btn-diff" class="btn col-lg-3 col-lg-offset-1 col-sm-4 col-sm-offset-1">Show Diff</button> + </div> + <br> + <div id="diff_page"></div> </div> - </div> </section> {% block js %} -<script> + <script> htmx.on("#btn-commit", "click", function(event){ let msg = htmx.find("#commit-message").value.trim() if (msg != ""){ @@ -54,5 +51,5 @@ }), ); }) -</script> + </script> {% endblock %} diff --git a/gn2/wqflask/templates/gn_editor_results_page.html b/gn2/wqflask/templates/gn_editor_results_page.html index d502e882..666bd432 100644 --- a/gn2/wqflask/templates/gn_editor_results_page.html +++ b/gn2/wqflask/templates/gn_editor_results_page.html @@ -1,39 +1,46 @@ <section classs="row commit-content" style="padding-top:25px"> - <div class="col-sm-10 col-sm-offset-1"> - <div> - <div> - <h2> <i>Results status - {{status}}</i></h2> - </div> - </div> - <br> - {% if error %} - <h1> Error-type: <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{error}}</i></b></mark></h1> - <h3>Error-message: - <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{msg}}</i></b></mark></h3> - {% else %} - <div> - <h3>New Commit Sha: <span class="lead"> - <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{commit_sha}}</i></b></mark> - </span></h3> - <br/> - <div class="lead"> <h3>Commit Message: - <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{message}}</i></b></mark> - </h3> - - </div> - </div> + <div class="col-sm-10 col-sm-offset-1"> + <div> + <div> + <h2> + <i>Results status - {{ status }}</i> + </h2> + </div> + </div> + <br> + {% if error %} + <h1> + Error-type: <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"><b><i>{{ error }}</i></b></mark> + </h1> + <h3> + Error-message: + <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"><b><i>{{ msg }}</i></b></mark> + </h3> + {% else %} + <div> + <h3> + New Commit Sha: <span class="lead"> + <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"><b><i>{{ commit_sha }}</i></b></mark> + </span> + </h3> + <br /> + <div class="lead"> + <h3> + Commit Message: + <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"><b><i>{{ message }}</i></b></mark> + </h3> + </div> + </div> {% endif %} <br> - </div> +</div> </section> - {% block js %} -<script> + <script> var commitSha = "{{ commit_sha }}"; if (commitSha !="" && commitSha!= undefined){ localStorage.setItem("gn_editor_sha", commitSha) } -</script> - + </script> {% endblock %} diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html index a87e3dc8..1e2cae10 100644 --- a/gn2/wqflask/templates/gn_editor_settings.html +++ b/gn2/wqflask/templates/gn_editor_settings.html @@ -1,100 +1,173 @@ <section> - <h4><i>Select a theme</i></h4> - <form> - <div class="form-check"> - <input class="form-check-input" type="radio" name="theme" id="twilightTheme" value="twilight" checked > - <label class="form-check-label" for="twilight">twilight</label> - </div> - + <h4> + <i>Select a theme</i> + </h4> + <form> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="theme" + id="twilightTheme" + value="twilight" + checked> + <label class="form-check-label" for="twilight">twilight</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="theme" + id="draculaTheme" + value="dracula"> + <label class="form-check-label" for="draculaTheme">dracula</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="theme" + id="normalTheme" + value="textmate" + checked> + <label class="form-check-label" for="normalTheme">Text</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="theme" + id="monokaiTheme" + value="monokai"> + <label class="form-check-label" for="monokaiTheme">Monokai</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="theme" + id="customTheme" + value="xcode"> + <label class="form-check-label" for="customTheme">xcode</label> + </div> + <br> + <div class="form-group" style="padding-top:10px"> + <h4> + <i>Select Font Size</i> + </h4> + <input type="range" + class="form-control-range" + id="fontSizeRange" + name="fontSizeRange" + min="10" + max="36" + step="1" + value="16"> + <em><span id="fontSizeValue">16</span> px</em> + </div> + <br> + <div> + <h4> + <i>Select Wrap Option:</i> + </h4> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="wrap" + id="normalTheme" + value="true" + checked> + <label class="form-check-label" for="normalTheme">True</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="wrap" + id="monokaiTheme" + value="false"> + <label class="form-check-label" for="monokaiTheme">False</label> + </div> + </div> + <div> + <h4> + <i>Cursor Styles:</i> + </h4> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="cursor" + id="aceCursor" + value="ace" + checked> + <label class="form-check-label" for="aceCursor">ace</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="cursor" + id="slimCursor" + value="slim"> + <label class="form-check-label" for="slimCursor">slim</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="cursor" + id="smoothCursor" + value="smooth"> + <label class="form-check-label" for="smoothCursor">smooth</label> + </div> + <div class="form-check"> + <input class="form-check-input" + type="radio" + name="cursor" + id="wideCursor" + value="wide"> + <label class="form-check-label" for="wideCursor">wide</label> + </div> + </div> + </form> + <br> + <h4> + <i>Choose KeyBoard Binding:</i> + </h4> <div class="form-check"> - <input class="form-check-input" type="radio" name="theme" id="draculaTheme" value="dracula"> - <label class="form-check-label" for="draculaTheme">dracula</label> + <input class="form-check-input" + type="radio" + name="keyboard" + id="default" + value="default" + checked> + <label class="form-check-label" for="default">Default</label> </div> <div class="form-check"> - <input class="form-check-input" type="radio" name="theme" id="normalTheme" value="textmate" checked > - <label class="form-check-label" for="normalTheme">Text</label> + <input class="form-check-input" + type="radio" + name="keyboard" + id="vscode" + value="vscode"> + <label class="form-check-label" for="vscode">Vscode</label> </div> <div class="form-check"> - <input class="form-check-input" type="radio" name="theme" id="monokaiTheme" value="monokai" > - <label class="form-check-label" for="monokaiTheme">Monokai</label> + <input class="form-check-input" + type="radio" + name="keyboard" + id="emacs" + value="emacs"> + <label class="form-check-label" for="emacs">Emacs</label> </div> <div class="form-check"> - <input class="form-check-input" type="radio" name="theme" id="customTheme" value="xcode"> - <label class="form-check-label" for="customTheme">xcode</label> - </div> - - <br> - <div class="form-group" style="padding-top:10px"> - <h4> <i>Select Font Size</i></h4> - <input type="range" class="form-control-range" id="fontSizeRange" name="fontSizeRange" min="10" max="36" step="1" value="16"> - <em><span id="fontSizeValue">16</span> px</em> + <input class="form-check-input" + type="radio" + name="keyboard" + id="vim" + value="vim"> + <label class="form-check-label" for="vim">Vim</label> </div> - <br> - <div> - <h4><i>Select Wrap Option:</i></h4> - <div class="form-check"> - <input class="form-check-input" type="radio" name="wrap" id="normalTheme" value="true" checked> - <label class="form-check-label" for="normalTheme">True</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="wrap" id="monokaiTheme" value="false"> - <label class="form-check-label" for="monokaiTheme">False</label> - </div> - </div> - <div> - <h4><i>Cursor Styles:</i></h4> - <div class="form-check"> - <input class="form-check-input" type="radio" name="cursor" id="aceCursor" value="ace" checked > - <label class="form-check-label" for="aceCursor">ace</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="cursor" id="slimCursor" value="slim"> - <label class="form-check-label" for="slimCursor">slim</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="cursor" id="smoothCursor" value="smooth"> - <label class="form-check-label" for="smoothCursor">smooth</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="cursor" id="wideCursor" value="wide"> - <label class="form-check-label" for="wideCursor">wide</label> - </div> + <div class="row"> + <div class="col-sm-offset-1"> + <button class="btn btn-primary" id="settingBtn">Save Settings</button> + </div> </div> - </form> - <br> - - <h4><i>Choose KeyBoard Binding:</i></h4> - <div class="form-check"> - <input class="form-check-input" type="radio" name="keyboard" id="default" value="default" checked > - <label class="form-check-label" for="default">Default</label> - </div> - - <div class="form-check"> - <input class="form-check-input" type="radio" name="keyboard" id="vscode" value="vscode"> - <label class="form-check-label" for="vscode">Vscode</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="keyboard" id="emacs" value="emacs"> - <label class="form-check-label" for="emacs">Emacs</label> - </div> - <div class="form-check"> - <input class="form-check-input" type="radio" name="keyboard" id="vim" value="vim" > - <label class="form-check-label" for="vim">Vim</label> - </div> - <br> - <div class="row"> - <div class="col-sm-offset-1"> - <button class="btn btn-primary" id="settingBtn"> - Save Settings - </button> - </div> - </div> </section> - {% block js %} -<script> - + <script> $('#fontSizeRange').on('input', function () { var fontSize = $(this).val(); $('#fontSizeValue').text(fontSize); @@ -118,5 +191,5 @@ }), ); }) -</script> + </script> {% endblock %} |