diff options
author | Alexander_Kabui | 2024-08-08 14:27:22 +0300 |
---|---|---|
committer | BonfaceKilz | 2024-08-29 18:58:56 +0300 |
commit | babcece4d46dc04858165fd7e5d1fcd7144885ab (patch) | |
tree | 5697778335a9673c8246ea83422a6d0c8eaab97e /gn2/wqflask/templates/gn_editor_settings.html | |
parent | 291b3c5c15a4533d861ed19b478570f96665259f (diff) | |
download | genenetwork2-babcece4d46dc04858165fd7e5d1fcd7144885ab.tar.gz |
Add commit preview page.
Diffstat (limited to 'gn2/wqflask/templates/gn_editor_settings.html')
-rw-r--r-- | gn2/wqflask/templates/gn_editor_settings.html | 127 |
1 files changed, 63 insertions, 64 deletions
diff --git a/gn2/wqflask/templates/gn_editor_settings.html b/gn2/wqflask/templates/gn_editor_settings.html index 466e18c3..769fe23d 100644 --- a/gn2/wqflask/templates/gn_editor_settings.html +++ b/gn2/wqflask/templates/gn_editor_settings.html @@ -1,100 +1,99 @@ <section> <h4><i>Select a theme</i></h4> <form> - <div class="form-check"> + <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> + <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"> + </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> <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"> + <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 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> + <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> + <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="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> + <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="wideCursor" value="wide"> - <label class="form-check-label" for="wideCursor">wide</label> + <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> -</div> </form> <br> -<div class="row"> - <div class="col-sm-offset-1"> - <button class="btn btn-primary" id="settingBtn"> - Save Settings -</button> + <div class="row"> + <div class="col-sm-offset-1"> + <button class="btn btn-primary" id="settingBtn"> + Save Settings + </button> + </div> </div> -</div> </section> {% block js %} <script> - + $('#fontSizeRange').on('input', function () { - var fontSize = $(this).val(); - $('#fontSizeValue').text(fontSize); -}); + var fontSize = $(this).val(); + $('#fontSizeValue').text(fontSize); + }); document.querySelector("#settingBtn").addEventListener("click", function () { - var formData = { - theme: `ace/theme/${$('input[name="theme"]:checked').val()}`, - fontSize: parseInt($("#fontSizeRange").val()), - wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true, - cursorStyle: $('input[name="cursor"]:checked').val() - - } - htmx.find("#output").dispatchEvent( - new CustomEvent("updateEditor", { - bubbles: true, - detail: {action: 'didInitialize', payload: formData}, - }), - ); -}); + var formData = { + theme: `ace/theme/${$('input[name="theme"]:checked').val()}`, + fontSize: parseInt($("#fontSizeRange").val()), + wrap:$('input[name="wrap"]:checked').val()== "false" ? false : true, + cursorStyle: $('input[name="cursor"]:checked').val() + + } + htmx.find("#output").dispatchEvent( + new CustomEvent("updateEditor", { + bubbles: true, + detail: {action: 'didInitialize', payload: formData}, + }), + ); + }); </script> {% endblock %} - |