garrettmills/devbug
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

use editor_template for snippets

Browse Source
This commit is contained in:
Garrett Mills 2019-07-24 16:34:23 -05:00
parent 3e95e5beb4
commit 17793dfd7b
4 changed files with 103 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/dash_v1.css
View File

@ -104,6 +104,12 @@ body {
background: #ccdddd; background: #ccdddd;
} }
.inject {
margin: 3px;
margin-left: 14px;
margin-top: 14px;
}
#title-header-content { #title-header-content {
padding: 14px; padding: 14px;
font-size: 20pt; font-size: 20pt;
@ -185,17 +191,14 @@ body {
} }
.iheader { .iheader {
background: tomato;
/* no flex rules, it will grow */ /* no flex rules, it will grow */
} }
.idiv { .idiv {
flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/ flex: 1; /* 1 and it will fill whole space left if no flex value are set to other children*/
background: gold;
overflow: auto; overflow: auto;
} }
.ifooter { .ifooter {
background: lightgreen;
/*min-height: 60px; min-height has its purpose :) , unless you meant height*/ /*min-height: 60px; min-height has its purpose :) , unless you meant height*/
} }

4
app/views/dash_v1/editor_template.pug
View File

@ -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" : "" )} | <i>Editor Mode</i> #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" : "" )} | <i>Editor Mode</i>
#title-header #title-header
#title-header-content-sm #{title ? title : 'DevBug Dashboard'} #title-header-content-sm #{title ? title : 'DevBug Dashboard'}
.iheader
block header
.idiv .idiv
block content block content
.ifooter
block footer
.ifooter .ifooter
ul#navbar ul#navbar
li li

171
app/views/dash_v1/snippet.pug
View File

@ -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 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 : '' } pre#editor #{ snippet ? snippet.data : '' }
input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block footer
if (!readonly) if (!readonly)
button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' } button.btn(onclick='submitSnippet()') #{ snippet ? 'Update Snippet' : 'Create Snippet' }
input#preset_mode(type='hidden' value=snippet ? snippet.mode : 'ace/mode/javascript')
block scripts block scripts
script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js") script(src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.5/ace.js")

6
app/views/dash_v1/use/main.pug
View File

@ -21,6 +21,12 @@ block content
a.btn(href='./api') DevBug API a.btn(href='./api') DevBug API
br br
h3 Changelog 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 h4 v0.5.1 - Use Ace.js for Outputs
ul ul
li Switched over to use Ace.js to view development output. Might make this a user preference in the future. li Switched over to use Ace.js to view development output. Might make this a user preference in the future.