diff --git a/app/assets/dash_v1.css b/app/assets/dash_v1.css index cc3f026..109260e 100644 --- a/app/assets/dash_v1.css +++ b/app/assets/dash_v1.css @@ -104,6 +104,12 @@ body { background: #ccdddd; } +.inject { + margin: 3px; + margin-left: 14px; + margin-top: 14px; +} + #title-header-content { padding: 14px; font-size: 20pt; @@ -185,17 +191,14 @@ body { } .iheader { - background: tomato; /* no flex rules, it will grow */ } .idiv { flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ - background: gold; overflow: auto; } .ifooter { - background: lightgreen; /*min-height: 60px; min-height has its purpose :) , unless you meant height*/ } \ No newline at end of file diff --git a/app/views/dash_v1/editor_template.pug b/app/views/dash_v1/editor_template.pug index 9141bbc..d687cf0 100644 --- a/app/views/dash_v1/editor_template.pug +++ b/app/views/dash_v1/editor_template.pug @@ -12,8 +12,12 @@ html #pre-header-content DevBug | v#{devbug.version} #{(user ? " | User: "+user.username : "")} #{(e_project ? " | Project: "+project.name+" | API: "+project.uuid : "")} #{((_flitter.config('server.environment') === 'development') ? " | Development" : "" )} | Editor Mode #title-header #title-header-content-sm #{title ? title : 'DevBug Dashboard'} + .iheader + block header .idiv block content + .ifooter + block footer .ifooter ul#navbar li diff --git a/app/views/dash_v1/snippet.pug b/app/views/dash_v1/snippet.pug index 4981ce6..ab0e9e0 100644 --- a/app/views/dash_v1/snippet.pug +++ b/app/views/dash_v1/snippet.pug @@ -1,91 +1,94 @@ -extends ./template +extends ./editor_template +block header + .inject + if errors + each error in errors + p(style='color: red; font-weight: bold;') #{error} + form#snippet_form(method='post' enctype='multipart/form-data') + label(for='snippet_name') Snippet Title: + input#snippet_name(type='text' name='title' placeholder='required' value=snippet ? snippet.name : '' autofocus required readonly=!!readonly) + label(for='snippet_mode' style='margin-left: 10px;') Language: + select#snippet_mode(name='mode' onchange='selectonchange()' required disabled=!!readonly) + option(value='ace/mode/c_cpp') C/C++ + option(value='ace/mode/css') CSS + option(value='ace/mode/gitignore') .gitignore + option(value='ace/mode/go') Go + option(value='ace/mode/html') HTML + option(value='ace/mode/java') Java + option(value='ace/mode/javascript') JavaScript + option(value='ace/mode/json') JSON + option(value='ace/mode/mysql') MySQL + option(value='ace/mode/perl') Perl + option(value='ace/mode/pgsql') Postgres + option(value='ace/mode/php') PHP + option(value='ace/mode/python') Python + option(value='ace/mode/ruby') Ruby + option(value='ace/mode/rust') Rust + option(value='ace/mode/sql') SQL + option(value='ace/mode/text') Text + option(value='ace/mode/typescript') TypeScript + option(value='ace/mode/apache_conf') Apache Configuration + option(value='ace/mode/asl') ASL + option(value='ace/mode/assembly_x86') Assembly (x86) + option(value='ace/mode/autohotkey') AutoHotKey + option(value='ace/mode/crystal') Crystal + option(value='ace/mode/clojure') Clojure + option(value='ace/mode/cobol') COBOL + option(value='ace/mode/coffee') CoffeeScript + option(value='ace/mode/csharp') C# + option(value='ace/mode/d') D + option(value='ace/mode/django') django + option(value='ace/mode/dockerfile') Dockerfile + option(value='ace/mode/ejs') EJS + option(value='ace/mode/elixir') Elixir + option(value='ace/mode/fortran') Fortran + option(value='ace/mode/haml') HAML + option(value='ace/mode/handlebars') Handlebars + option(value='ace/mode/html_elixir') HTML (Elixir) + option(value='ace/mode/html_ruby') HTML (Ruby) + option(value='ace/mode/ini') INI + option(value='ace/mode/jade') Jade + option(value='ace/mode/julia') Julia + option(value='ace/mode/kotlin') Kotlin + option(value='ace/mode/latex') LaTeX + option(value='ace/mode/less') Less + option(value='ace/mode/lisp') Lisp + option(value='ace/mode/lua') Lua + option(value='ace/mode/makefile') Makefile + option(value='ace/mode/markdown') Markdown + option(value='ace/mode/matlab') MATLAB + option(value='ace/mode/nginx') NGINX + option(value='ace/mode/objectivec') Objective-C + option(value='ace/mode/pascal') Pascal + option(value='ace/mode/perl6') Perl 6 + option(value='ace/mode/php_laravel_blade') PHP (blade template) + option(value='ace/mode/puppet') Puppet + option(value='ace/mode/powershell') PowerShell + option(value='ace/mode/r') R + option(value='ace/mode/sass') SASS + option(value='ace/mode/scala') Scala + option(value='ace/mode/scss') SCSS + option(value='ace/mode/sh') /bin/sh + option(value='ace/mode/slim') Slim + option(value='ace/mode/snippets') Snippets + option(value='ace/mode/sqlserver') SQL Server + option(value='ace/mode/svg') SVG + option(value='ace/mode/swift') Swift + option(value='ace/mode/tcl') TCL + option(value='ace/mode/tex') Tex + option(value='ace/mode/vbscript') VBScript + option(value='ace/mode/xml') XML + option(value='ace/mode/yaml') YAML + input#snippet_value(type='hidden' name='data' required) + if snippet && user && is_owner && readonly + a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet + a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit block content - if errors - each error in errors - p(style='color: red; font-weight: bold;') #{error} - form#snippet_form(method='post' enctype='multipart/form-data') - label(for='snippet_name') Snippet Title: - input#snippet_name(type='text' name='title' placeholder='required' value=snippet ? snippet.name : '' autofocus required readonly=!!readonly) - label(for='snippet_mode' style='margin-left: 10px;') Language: - select#snippet_mode(name='mode' onchange='selectonchange()' required disabled=!!readonly) - option(value='ace/mode/c_cpp') C/C++ - option(value='ace/mode/css') CSS - option(value='ace/mode/gitignore') .gitignore - option(value='ace/mode/go') Go - option(value='ace/mode/html') HTML - option(value='ace/mode/java') Java - option(value='ace/mode/javascript') JavaScript - option(value='ace/mode/json') JSON - option(value='ace/mode/mysql') MySQL - option(value='ace/mode/perl') Perl - option(value='ace/mode/pgsql') Postgres - option(value='ace/mode/php') PHP - option(value='ace/mode/python') Python - option(value='ace/mode/ruby') Ruby - option(value='ace/mode/rust') Rust - option(value='ace/mode/sql') SQL - option(value='ace/mode/text') Text - option(value='ace/mode/typescript') TypeScript - option(value='ace/mode/apache_conf') Apache Configuration - option(value='ace/mode/asl') ASL - option(value='ace/mode/assembly_x86') Assembly (x86) - option(value='ace/mode/autohotkey') AutoHotKey - option(value='ace/mode/crystal') Crystal - option(value='ace/mode/clojure') Clojure - option(value='ace/mode/cobol') COBOL - option(value='ace/mode/coffee') CoffeeScript - option(value='ace/mode/csharp') C# - option(value='ace/mode/d') D - option(value='ace/mode/django') django - option(value='ace/mode/dockerfile') Dockerfile - option(value='ace/mode/ejs') EJS - option(value='ace/mode/elixir') Elixir - option(value='ace/mode/fortran') Fortran - option(value='ace/mode/haml') HAML - option(value='ace/mode/handlebars') Handlebars - option(value='ace/mode/html_elixir') HTML (Elixir) - option(value='ace/mode/html_ruby') HTML (Ruby) - option(value='ace/mode/ini') INI - option(value='ace/mode/jade') Jade - option(value='ace/mode/julia') Julia - option(value='ace/mode/kotlin') Kotlin - option(value='ace/mode/latex') LaTeX - option(value='ace/mode/less') Less - option(value='ace/mode/lisp') Lisp - option(value='ace/mode/lua') Lua - option(value='ace/mode/makefile') Makefile - option(value='ace/mode/markdown') Markdown - option(value='ace/mode/matlab') MATLAB - option(value='ace/mode/nginx') NGINX - option(value='ace/mode/objectivec') Objective-C - option(value='ace/mode/pascal') Pascal - option(value='ace/mode/perl6') Perl 6 - option(value='ace/mode/php_laravel_blade') PHP (blade template) - option(value='ace/mode/puppet') Puppet - option(value='ace/mode/powershell') PowerShell - option(value='ace/mode/r') R - option(value='ace/mode/sass') SASS - option(value='ace/mode/scala') Scala - option(value='ace/mode/scss') SCSS - option(value='ace/mode/sh') /bin/sh - option(value='ace/mode/slim') Slim - option(value='ace/mode/snippets') Snippets - option(value='ace/mode/sqlserver') SQL Server - option(value='ace/mode/svg') SVG - option(value='ace/mode/swift') Swift - option(value='ace/mode/tcl') TCL - option(value='ace/mode/tex') Tex - option(value='ace/mode/vbscript') VBScript - option(value='ace/mode/xml') XML - option(value='ace/mode/yaml') YAML - input#snippet_value(type='hidden' name='data' required) - if snippet && user && is_owner && readonly - a.btn(href='/dash/v1/snippet/share/'+snippet.id style='margin-left: 20px') Share Snippet - a.btn(href='/dash/v1/project/snippet/'+project.id+'/edit/'+snippet.uuid style='margin-left: 10px') Edit pre#editor #{ snippet ? snippet.data : '' } + input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript') +block footer if (!readonly) button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' } - input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript') block scripts script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js") diff --git a/app/views/dash_v1/use/main.pug b/app/views/dash_v1/use/main.pug index fb9561d..5312799 100644 --- a/app/views/dash_v1/use/main.pug +++ b/app/views/dash_v1/use/main.pug @@ -21,6 +21,12 @@ block content a.btn(href='./api') DevBug API br h3 Changelog + h4 v0.6.0 - UI Improvements! + ul + li New navigation theme with sticky navigation bar to make the display cleaner + li Separate "editor mode" layout for views using Ace.js + li Out viewer now uses editor mode. + h4 v0.5.1 - Use Ace.js for Outputs ul li Switched over to use Ace.js to view development output. Might make this a user preference in the future.