diff options
| -rw-r--r-- | data/assets/js/admin/tabs/themes.js | 121 | ||||
| -rw-r--r-- | src/guff/views/pages/admin.cr | 3 | ||||
| -rw-r--r-- | src/views/panes/settings/themes.ecr | 67 |
3 files changed, 185 insertions, 6 deletions
diff --git a/data/assets/js/admin/tabs/themes.js b/data/assets/js/admin/tabs/themes.js new file mode 100644 index 0000000..26170b0 --- /dev/null +++ b/data/assets/js/admin/tabs/themes.js @@ -0,0 +1,121 @@ +jQuery(function($) { + "use strict"; + + var TEMPLATES = new LuigiTemplate.Cache({ + theme: [ + "<a ", + "href='#' ", + "class='list-group-item' ", + "title='View details for \"%{theme_name|h}\".' ", + "data-theme_id='%{theme_id|h}' ", + "data-q='%{q|h}' ", + ">", + "<i class='fa fa-fw fa-eye'></i>", + " ", + "%{theme_name|h} (%{theme_version|h}, %{theme_date|h})", + "</a>", + ], + + loading: [ + "<span class='list-group-item disabled'>", + "<i class='fa fa-spinner fa-spin'></i>", + " ", + "Loading...", + "</span>", + ], + + error: [ + "<span class='list-group-item list-group-item-danger disabled'>", + "<i class='fa fa-exclamation-triangle'></i>", + " ", + "Error: %{error|h}", + "</span>", + ], + }); + + function filter() { + var qs = $('#themes-q').val().replace(/^\s+|\s+$/g, '').toLowerCase().split(/\s+/); + + if (qs.length > 0) { + // hide all themes + $('#themes .list-group-item').addClass('hidden'); + + // show matching themes + $($.grep($('#themes .list-group-item'), function(el) { + var eq = $(el).data('q'); + + return ($.grep(qs, function(q) { + return eq.indexOf(q) !== -1; + }).length == qs.length); + })).removeClass('hidden'); + } else { + // show all themes + $('#themes .list-group-item').removeClass('hidden'); + } + } + + function reload() { + var btn = $('#themes-reload'), + list = $('#themes'); + + // show loading + btn.toggleClass('disabled').find('.loading').toggleClass('hidden'); + list.html(TEMPLATES.run('loading')); + + send('theme/list').always(function() { + btn.toggleClass('disabled').find('.loading').toggleClass('hidden'); + list.html(''); + }).fail(function(r) { + var error = r.responseText; + + try { + var data = $.parseJSON(r.responseText); + if (data.error) + error = data.error; + } catch (e) {} + + list.html(TEMPLATES.run('error', { + error: error + })); + }).done(function(r) { + list.html($.map(r, function(row) { + var active = (row.is_active == '1'); + + return TEMPLATES.run('theme', $.extend({}, row, { + q: [row.theme_id, row.theme_name, row.theme_version, row.theme_date].join(' ').toLowerCase(), + })); + }).join('')); + + // refresh filters + filter(); + }); + + // stop event + return false; + } + + $('#themes-q').on('search-update', function() { + filter(); + }); + + $('#themes').on('click', 'a.list-group-item', function() { + var theme_id = $(this).data('theme_id'); + + // update highlight + $('#themes .active').removeClass('active'); + $(this).addClass('active'); + + // TODO: show theme details dialog + // $('#theme-edit-dialog').data('theme_id', theme_id).modal('show'); + + // stop event + return false; + }); + + $('#themes-reload').click(reload); + + // load themes + $('#settings-tab-themes').on('show.bs.tab', function() { + reload(); + }); +}); diff --git a/src/guff/views/pages/admin.cr b/src/guff/views/pages/admin.cr index f2296a8..16d3eb0 100644 --- a/src/guff/views/pages/admin.cr +++ b/src/guff/views/pages/admin.cr @@ -20,9 +20,10 @@ class Guff::Views::Pages::Admin < Guff::Views::HTMLView assets/ckeditor-4.5.8-custom/ckeditor.js assets/js/search-field.js assets/js/dropdown.js - assets/js/admin/tabs/users.js assets/js/admin/tabs/posts.js assets/js/admin/tabs/files.js + assets/js/admin/tabs/users.js + assets/js/admin/tabs/themes.js assets/js/admin/dialogs/user-add.js assets/js/admin/dialogs/user-edit.js assets/js/admin/dialogs/post-edit.js diff --git a/src/views/panes/settings/themes.ecr b/src/views/panes/settings/themes.ecr index a88f24e..9aabffe 100644 --- a/src/views/panes/settings/themes.ecr +++ b/src/views/panes/settings/themes.ecr @@ -5,12 +5,69 @@ > <div class='panel panel-default'> <div class='panel-heading'> + <div class='btn-toolbar'> + <div class='btn-group btn-group-sm'> + <a + href='#' + class='btn btn-primary disabled' + title='Upload new theme.' + data-toggle='modal' + data-target='#theme-add-dialog' + > + <i class='fa fa-plus-circle'></i> + Add Theme + </a><!-- btn --> + </div><!-- btn-group --> + + <div class='btn-group btn-group-sm pull-right'> + <a + href='#' + class='btn btn-default search-toggle' + title='Toggle search field.' + > + <i class='fa fa-fw fa-search'></i> + </a><!-- btn--> + </div><!-- btn-group --> + + <div class='btn-group btn-group-sm pull-right'> + <a + href='#' + id='themes-reload' + class='btn btn-default' + title='Reload themes.' + > + <span class='loading'> + <i class='fa fa-fw fa-refresh'></i> + </span> + + <span class='loading hidden'> + <i class='fa fa-fw fa-spinner fa-spin'></i> + </span> + </a><!-- #reload --> + </div><!-- btn-group --> + </div><!-- btn-toolbar --> + </div><!-- panel-heading --> + + <div class='panel-heading hidden search-toggle'> + <div class='input-group input-group-sm'> + <span class='input-group-addon'> + <i class='fa fa-search'></i> + </span> + + <input + type='text' + id='themes-q' + class='form-control' + title='Enter search terms' + /> + </div><!-- input-group --> </div><!-- panel-heading --> - <div id='themes' class='panel-body'> - <p> - TODO: themes - </p> - </div><!-- panel-body --> + <div id='themes' class='list-group'> + <span class='list-group-item disabled'> + <i class='fa fa-spinner fa-spin'></i> + Loading... + </span><!-- list-group-item --> + </div><!-- list-group --> </div><!-- panel --> </div><!-- tab-pane --> |