aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/guff.cr159
-rw-r--r--src/views/admin-page.ecr519
2 files changed, 635 insertions, 43 deletions
diff --git a/src/guff.cr b/src/guff.cr
index b0f57d4..8228e88 100644
--- a/src/guff.cr
+++ b/src/guff.cr
@@ -1332,10 +1332,10 @@ module Guff
assets(:style, paths)
end
- def tabs(rows : Array(Hash(Symbol, String)))
+ def tabs(prefix : String, rows : Array(Hash(Symbol, String)))
String.build do |io|
rows.each do |row|
- TabView.new(@context, "admin", row).to_s(io)
+ TabView.new(@context, prefix, row).to_s(io)
end
end
end
@@ -1344,48 +1344,123 @@ module Guff
class AdminPageView < HTMLView
TITLE = "Guff Admin"
- TABS = [{
- id: "home",
- css: "active",
- icon: "fa-home",
- name: "Home",
- text: "View home tab.",
- }, {
- id: "posts",
- css: "",
- icon: "fa-cubes",
- name: "Posts",
- text: "Manage blog, pages, and projects.",
- }, {
- id: "files",
- css: "",
- icon: "fa-files-o",
- name: "Files",
- text: "Manage files.",
- }, {
- id: "users",
- css: "",
- icon: "fa-users",
- name: "Users",
- text: "Manage users and permissions.",
- }, {
- id: "settings",
- css: "",
- icon: "fa-cog",
- name: "Settings",
- text: "Configure site settings.",
- }]
-
- def tabs
- super(TABS)
- end
-
- OPTION = "<option value='%s'>%s</option>"
-
- def role_options
+ TABS = {
+ "admin": [{
+ id: "home",
+ css: "active",
+ icon: "fa-home",
+ name: "Home",
+ text: "View home tab.",
+ }, {
+ id: "posts",
+ css: "",
+ icon: "fa-cubes",
+ name: "Posts",
+ text: "Manage blog, pages, and projects.",
+ }, {
+ id: "files",
+ css: "",
+ icon: "fa-files-o",
+ name: "Files",
+ text: "Manage files.",
+ }, {
+ id: "users",
+ css: "",
+ icon: "fa-users",
+ name: "Users",
+ text: "Manage users and permissions.",
+ }, {
+ id: "settings",
+ css: "",
+ icon: "fa-cog",
+ name: "Settings",
+ text: "Configure site settings.",
+ }],
+ }
+
+ TEMPLATES = {
+ option: "
+ <option value='%s'>%s</option>
+ ",
+
+ new_post_button: "
+ <a
+ href='#'
+ class='btn btn-primary'
+ title='Create new blog post.'
+ data-toggle='modal'
+ data-target='#blog-edit-dialog'
+ >
+ <i class='fa fa-plus-circle'></i>
+ New Post
+ </a><!-- btn -->
+
+ <a
+ href='#'
+ class='btn btn-primary'
+ title='Show additonal options.'
+ data-toggle='dropdown'
+ >
+ <span class='hidden'>
+ <i class='fa fa-plus-circle'></i>
+ New
+ </span>
+
+ <i class='fa fa-caret-down'></i>
+ </a>
+
+ <ul class='dropdown-menu'>
+ <li class='hidden'>
+ <a
+ href='#'
+ title='Create new blog post.'
+ data-toggle='modal'
+ data-target='#blog-edit-dialog'
+ >
+ <i class='fa fa-fw fa-bullhorn'></i>
+ New Post
+ </a>
+ </li>
+
+ <li>
+ <a
+ href='#'
+ title='Create new page.'
+ data-toggle='modal'
+ data-target='#page-edit-dialog'
+ >
+ <i class='fa fa-fw fa-bookmark-o'></i>
+ New Page
+ </a>
+ </li>
+
+ <li>
+ <a
+ href='#'
+ title='Create new project.'
+ data-toggle='modal'
+ data-target='#project-edit-dialog'
+ >
+ <i class='fa fa-fw fa-cube'></i>
+ New Project
+ </a>
+ </li>
+ </ul>
+ ",
+ }
+
+ def tabs(id : String)
+ super(id, TABS[id])
+ end
+
+ private def new_post_button
+ TEMPLATES[:new_post_button]
+ end
+
+ private def role_options
@role_options ||= String.build do |io|
@context.models.role.get_roles.each do |row|
- io << OPTION % %w{role name}.map { |key| h(row[key]) }
+ io << TEMPLATES[:option] % %w{role name}.map { |key| h(row[key]) }
end
end
end
diff --git a/src/views/admin-page.ecr b/src/views/admin-page.ecr
index 3394096..7614453 100644
--- a/src/views/admin-page.ecr
+++ b/src/views/admin-page.ecr
@@ -46,7 +46,7 @@
<div class='container'>
<div class='col-md-12'>
<ul class='nav nav-tabs nav-justified' role='tablist'><%=
- tabs
+ tabs("admin")
%></ul><!-- nav -->
<div class='tab-content'>
@@ -57,6 +57,11 @@
>
<div class='panel panel-default'>
<div class='panel-heading'>
+ <div class='btn-toolbar'>
+ <div class='btn-group btn-group-sm'><%=
+ new_post_button
+ %></div><!-- btn-group -->
+ </div><!-- btn-toolbar -->
</div><!-- panel-heading -->
<div class='panel-body'>
@@ -74,6 +79,11 @@
>
<div class='panel panel-default'>
<div class='panel-heading'>
+ <div class='btn-toolbar'>
+ <div class='btn-group btn-group-sm'><%=
+ new_post_button
+ %></div><!-- btn-group -->
+ </div><!-- btn-toolbar -->
</div><!-- panel-heading -->
<div class='panel-body'>
@@ -395,6 +405,513 @@
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
+
+ <div id='blog-edit-dialog' class='modal fade' role='dialog'>
+ <div class='modal-dialog modal-lg' role='document'>
+ <div class='modal-content'>
+ <div class='modal-header'>
+ <button
+ type='button'
+ class='close'
+ data-dismiss='modal'
+ aria-label='Close'
+ >
+ <span aria-hidden='true'>
+ &times;
+ </span>
+ </button><!-- close -->
+
+ <h4 class='modal-title'>
+ <i class='fa fa-edit'></i>
+ Edit Blog Entry
+ </h4><!-- modal-title -->
+ </div><!-- modal-header -->
+
+ <div class='modal-body'>
+ <div class='row'>
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='blog-edit-name'>
+ Title
+ </label>
+
+ <input
+ type='text'
+ id='blog-edit-name'
+ class='form-control post-name'
+ title='Enter title for blog entry.'
+ placeholder='Blog Entry Title'
+ aria-describedby='blog-edit-name-help'
+ />
+
+ <p id='blog-edit-name-help' class='help-block'>
+ Title of blog entry.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='blog-edit-slug'>
+ Slug
+ </label>
+
+ <div class='input-group'>
+ <input
+ type='text'
+ id='blog-edit-slug'
+ class='form-control post-slug'
+ disabled='disabled'
+ title='Enter slug for blog entry.'
+ placeholder='blog-post-title'
+ aria-describedby='blog-edit-slug-help'
+ />
+
+ <a
+ href='#'
+ class='btn input-group-addon btn-default post-slug-lock'
+ title='Toggle slug lock.'
+ aria-describedby='page-edit-slug-help'
+ >
+ <i class='fa fa-lock'></i>
+ </a><!-- slog-lock -->
+ </div><!-- input-group -->
+
+ <p id='blog-edit-slug-help' class='help-block'>
+ Slug of blog entry.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+ </div><!-- row -->
+
+ <div class='form-group'>
+ <label for='blog-edit-body'>
+ Body
+ </label>
+
+ <textarea
+ id='blog-edit-body'
+ class='form-control'
+ rows='15'
+ aria-describedby='blog-edit-body-help'
+ ></textarea>
+
+ <p id='blog-edit-body-help' class='help-block'>
+ Body of this blog entry.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- modal-body -->
+
+ <div class='modal-footer'>
+ <button
+ id='blog-edit-confirm'
+ class='btn btn-primary'
+ title='Create post.'
+ >
+ <span class='hidden loading'>
+ <i class='fa fa-spinner fa-spin'></i>
+ Please Wait...
+ </span>
+
+ <span class='loading'>
+ <i class='fa fa-save'></i>
+ Save Changes
+ </span>
+ </button>
+
+ <button
+ class='btn btn-default'
+ data-dismiss='modal'
+ title='Close dialog.'
+ >
+ &times; Close
+ </button>
+ </div><!-- modal-footer -->
+ </div><!-- modal-content -->
+ </div><!-- modal-dialog -->
+ </div><!-- modal -->
+
+ <div id='page-edit-dialog' class='modal fade' role='dialog'>
+ <div class='modal-dialog modal-lg' role='document'>
+ <div class='modal-content'>
+ <div class='modal-header'>
+ <button
+ type='button'
+ class='close'
+ data-dismiss='modal'
+ aria-label='Close'
+ >
+ <span aria-hidden='true'>
+ &times;
+ </span>
+ </button><!-- close -->
+
+ <h4 class='modal-title'>
+ <i class='fa fa-edit'></i>
+ Edit Page
+ </h4><!-- modal-title -->
+ </div><!-- modal-header -->
+
+ <div class='modal-body'>
+ <div class='row'>
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='page-edit-name'>
+ Title
+ </label>
+
+ <input
+ type='text'
+ id='page-edit-name'
+ class='form-control post-name'
+ title='Enter title for page.'
+ placeholder='Page Title'
+ aria-describedby='page-edit-name-help'
+ />
+
+ <p id='page-edit-name-help' class='help-block'>
+ Title of page.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='page-edit-slug'>
+ Path
+ </label>
+
+ <div class='input-group'>
+ <input
+ type='text'
+ id='page-edit-slug'
+ class='form-control post-slug'
+ disabled='disabled'
+ title='Enter path for this page.'
+ placeholder='page-title'
+ />
+
+ <a
+ href='#'
+ class='btn input-group-addon btn-default post-slug-lock'
+ title='Toggle path lock.'
+ aria-describedby='page-edit-slug-help'
+ >
+ <i class='fa fa-lock'></i>
+ </a><!-- slog-lock -->
+ </div><!-- input-group -->
+
+ <p id='page-edit-slug-help' class='help-block'>
+ URL path of page.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+ </div><!-- row -->
+
+ <div class='form-group'>
+ <label for='page-edit-body'>
+ Body
+ </label>
+
+ <textarea
+ id='page-edit-body'
+ class='form-control'
+ rows='15'
+ aria-describedby='page-edit-body-help'
+ ></textarea>
+
+ <p id='page-edit-body-help' class='help-block'>
+ Body of this page.
+ </p>
+ </div><!-- form-group -->
+
+ <div class='row'>
+ <div class='col-md-6'>
+ <label>
+ Layout
+ </label>
+
+ <div class='btn-group btn-group-justified'>
+ <a
+ href='#'
+ class='btn btn-default post-state'
+ title='Use blank layout for this page.'
+ >
+ <i class='fa fa-file-o'></i>
+ Blank
+ </a>
+
+ <a
+ href='#'
+ class='btn btn-primary post-state'
+ title='Use default layout for this page.'
+ >
+ <i class='fa fa-newspaper-o'></i>
+ Default
+ </a>
+ </div><!-- btn-group -->
+
+ <p class='help-block'>
+ Layout for this page.
+ </p>
+ </div><!-- col-md-6 -->
+
+ <div class='col-md-6'>
+ <label>
+ State
+ </label>
+
+ <div class='btn-group btn-group-justified'>
+ <a
+ href='#'
+ class='btn btn-primary post-state'
+ title='Mark this page as a draft.'
+ >
+ <i class='fa fa-wrench'></i>
+ Draft
+ </a>
+
+ <a
+ href='#'
+ class='btn btn-default post-state'
+ title='Mark this page as published.'
+ >
+ <i class='fa fa-bullhorn'></i>
+ Published
+ </a>
+
+ <a
+ href='#'
+ class='btn btn-default post-state'
+ title='Mark this page as deleted.'
+ >
+ <i class='fa fa-trash'></i>
+ Deleted
+ </a>
+ </div><!-- btn-group -->
+
+ <p class='help-block'>
+ Visibility state of this page.
+ </p>
+ </div><!-- col-md-6 -->
+ </div><!-- row -->
+ </div><!-- modal-body -->
+
+ <div class='modal-footer'>
+ <button
+ id='page-edit-confirm'
+ class='btn btn-primary'
+ title='Save changes.'
+ >
+ <span class='hidden loading'>
+ <i class='fa fa-spinner fa-spin'></i>
+ Please Wait...
+ </span>
+
+ <span class='loading'>
+ <i class='fa fa-save'></i>
+ Save Changes
+ </span>
+ </button>
+
+ <button
+ class='btn btn-default'
+ data-dismiss='modal'
+ title='Close dialog.'
+ >
+ &times; Close
+ </button>
+ </div><!-- modal-footer -->
+ </div><!-- modal-content -->
+ </div><!-- modal-dialog -->
+ </div><!-- modal -->
+
+ <div id='project-edit-dialog' class='modal fade' role='dialog'>
+ <div class='modal-dialog modal-lg' role='document'>
+ <div class='modal-content'>
+ <div class='modal-header'>
+ <button
+ type='button'
+ class='close'
+ data-dismiss='modal'
+ aria-label='Close'
+ >
+ <span aria-hidden='true'>
+ &times;
+ </span>
+ </button><!-- close -->
+
+ <h4 class='modal-title'>
+ <i class='fa fa-edit'></i>
+ Edit Project
+ </h4><!-- modal-title -->
+ </div><!-- modal-header -->
+
+ <div class='modal-body'>
+ <div class='row'>
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='project-edit-name'>
+ Name
+ </label>
+
+ <input
+ type='text'
+ id='project-edit-name'
+ class='form-control post-name'
+ title='Enter project name.'
+ placeholder='Project Name'
+ aria-describedby='project-edit-name-help'
+ />
+
+ <p id='project-edit-name-help' class='help-block'>
+ Name of project.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='project-edit-slug'>
+ Slug
+ </label>
+
+ <div class='input-group'>
+ <input
+ type='text'
+ id='project-edit-slug'
+ class='form-control post-slug'
+ title='Enter project slug.'
+ disabled='disabled'
+ placeholder='project-name'
+ aria-describedby='project-edit-slug-help'
+ />
+
+ <a
+ href='#'
+ class='btn input-group-addon btn-default post-slug-lock'
+ title='Toggle slug lock.'
+ >
+ <i class='fa fa-lock'></i>
+ </a><!-- slog-lock -->
+ </div><!-- input-group -->
+
+ <p id='project-edit-slug-help' class='help-block'>
+ URL path component of project.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+ </div><!-- row -->
+
+ <div class='form-group'>
+ <label for='project-edit-body'>
+ Description
+ </label>
+
+ <textarea
+ id='project-edit-body'
+ class='form-control'
+ title='Description of this project.'
+ rows='15'
+ aria-describedby='project-edit-body-help'
+ ></textarea>
+
+ <p id='project-edit-body-help' class='help-block'>
+ Description of this project.
+ </p>
+ </div><!-- form-group -->
+
+ <div class='row'>
+ <div class='col-md-6'>
+ <div class='form-group'>
+ <label for='project-edit-repo'>
+ Git Repository
+ </label>
+
+ <input
+ type='text'
+ id='project-edit-repo'
+ class='form-control'
+ title='Enter project Git repository URL.'
+ placeholder='https://example.com/git/example-project.git'
+ aria-describedby='project-edit-repo-help'
+ />
+
+ <p id='project-edit-repo-help' class='help-block'>
+ URL of Git repository for this project.
+ </p>
+ </div><!-- form-group -->
+ </div><!-- col-md-6 -->
+
+ <div class='col-md-6'>
+ <label>
+ State
+ </label>
+
+ <div class='btn-group btn-group-justified'>
+ <a
+ href='#'
+ class='btn btn-primary post-state'
+ title='Mark this project as a draft.'
+ >
+ <i class='fa fa-wrench'></i>
+ Draft
+ </a>
+
+ <a
+ href='#'
+ class='btn btn-default post-state'
+ title='Mark this project as published.'
+ >
+ <i class='fa fa-bullhorn'></i>
+ Published
+ </a>
+
+ <a
+ href='#'
+ class='btn btn-default post-state'
+ title='Mark this project as deleted.'
+ >
+ <i class='fa fa-trash'></i>
+ Deleted
+ </a>
+ </div><!-- btn-group -->
+
+ <p class='help-block'>
+ Visibility state of this project.
+ </p>
+ </div><!-- col-md-6 -->
+ </div><!-- row -->
+ </div><!-- modal-body -->
+
+ <div class='modal-footer'>
+ <button
+ id='project-edit-confirm'
+ class='btn btn-primary'
+ title='Save changes.'
+ >
+ <span class='hidden loading'>
+ <i class='fa fa-spinner fa-spin'></i>
+ Please Wait...
+ </span>
+
+ <span class='loading'>
+ <i class='fa fa-save'></i>
+ Save Changes
+ </span>
+ </button>
+
+ <button
+ class='btn btn-default'
+ data-dismiss='modal'
+ title='Close dialog.'
+ >
+ &times; Close
+ </button>
+ </div><!-- modal-footer -->
+ </div><!-- modal-content -->
+ </div><!-- modal-dialog -->
+ </div><!-- modal -->
</body>
<%=