From 8e3186d41c34f151aec162390759d3c9d6527dc9 Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Mon, 30 Mar 2015 12:46:55 +1030 Subject: [PATCH] Set up responsive admin layout --- .../admin/app/components/ui/admin-nav-item.js | 8 ++ .../admin/app/components/user-dropdown.js | 23 ++++++ .../admin/app/controllers/application.js | 9 +++ framework/core/ember/admin/app/router.js | 6 +- .../ember/admin/app/templates/appearance.hbs | 1 + .../ember/admin/app/templates/application.hbs | 44 ++++++++++- .../core/ember/admin/app/templates/basics.hbs | 1 + .../ember/admin/app/templates/dashboard.hbs | 1 + .../core/ember/admin/app/templates/error.hbs | 13 --- .../ember/admin/app/templates/extensions.hbs | 1 + .../ember/admin/app/templates/permissions.hbs | 1 + .../core/ember/admin/app/views/application.js | 79 +++++++++++++++++++ .../app/components/application/back-button.js | 0 .../app/controllers/alerts.js | 0 .../app/initializers/inject-components.js | 1 - .../app/templates/alerts.hbs | 0 .../components/application/back-button.hbs | 0 .../components/application/user-dropdown.hbs | 0 .../forum/app/initializers/inject-composer.js | 6 ++ .../core/ember/forum/app/templates/alerts.hbs | 7 -- framework/core/less/admin/app.less | 3 + framework/core/less/admin/layout.less | 76 ++++++++++++++++++ 22 files changed, 257 insertions(+), 23 deletions(-) create mode 100644 framework/core/ember/admin/app/components/ui/admin-nav-item.js create mode 100644 framework/core/ember/admin/app/components/user-dropdown.js create mode 100644 framework/core/ember/admin/app/controllers/application.js create mode 100644 framework/core/ember/admin/app/templates/appearance.hbs create mode 100644 framework/core/ember/admin/app/templates/basics.hbs create mode 100644 framework/core/ember/admin/app/templates/dashboard.hbs delete mode 100644 framework/core/ember/admin/app/templates/error.hbs create mode 100644 framework/core/ember/admin/app/templates/extensions.hbs create mode 100644 framework/core/ember/admin/app/templates/permissions.hbs create mode 100644 framework/core/ember/admin/app/views/application.js rename framework/core/ember/{forum => common}/app/components/application/back-button.js (100%) rename framework/core/ember/{forum => common}/app/controllers/alerts.js (100%) rename framework/core/ember/{admin => common}/app/templates/alerts.hbs (100%) rename framework/core/ember/{forum => common}/app/templates/components/application/back-button.hbs (100%) rename framework/core/ember/{forum => common}/app/templates/components/application/user-dropdown.hbs (100%) create mode 100644 framework/core/ember/forum/app/initializers/inject-composer.js delete mode 100644 framework/core/ember/forum/app/templates/alerts.hbs create mode 100644 framework/core/less/admin/layout.less diff --git a/framework/core/ember/admin/app/components/ui/admin-nav-item.js b/framework/core/ember/admin/app/components/ui/admin-nav-item.js new file mode 100644 index 000000000..7658dadc9 --- /dev/null +++ b/framework/core/ember/admin/app/components/ui/admin-nav-item.js @@ -0,0 +1,8 @@ +import Ember from 'ember'; +import NavItem from './nav-item'; + +var precompileTemplate = Ember.Handlebars.compile; + +export default NavItem.extend({ + layout: precompileTemplate('{{#link-to routeName}}{{fa-icon icon class="icon"}} {{label}}
{{description}}
{{/link-to}}') +}); diff --git a/framework/core/ember/admin/app/components/user-dropdown.js b/framework/core/ember/admin/app/components/user-dropdown.js new file mode 100644 index 000000000..fad9b0ed6 --- /dev/null +++ b/framework/core/ember/admin/app/components/user-dropdown.js @@ -0,0 +1,23 @@ +import Ember from 'ember'; + +import HasItemLists from '../mixins/has-item-lists'; +import DropdownButton from './ui/dropdown-button'; + +var precompileTemplate = Ember.Handlebars.compile; + +export default DropdownButton.extend(HasItemLists, { + layoutName: 'components/application/user-dropdown', + itemLists: ['items'], + + buttonClass: 'btn btn-default btn-naked btn-rounded btn-user', + menuClass: 'pull-right', + label: Ember.computed.alias('user.username'), + + populateItems: function(items) { + var self = this; + + this.addActionItem(items, 'logout', 'Log Out', 'sign-out', null, function() { + self.get('parentController').send('invalidateSession'); + }); + } +}) diff --git a/framework/core/ember/admin/app/controllers/application.js b/framework/core/ember/admin/app/controllers/application.js new file mode 100644 index 000000000..5387efb7b --- /dev/null +++ b/framework/core/ember/admin/app/controllers/application.js @@ -0,0 +1,9 @@ +import Ember from 'ember'; + +export default Ember.Controller.extend({ + actions: { + toggleDrawer: function() { + this.toggleProperty('drawerShowing'); + } + } +}); diff --git a/framework/core/ember/admin/app/router.js b/framework/core/ember/admin/app/router.js index b00da59c6..b8bc6caab 100644 --- a/framework/core/ember/admin/app/router.js +++ b/framework/core/ember/admin/app/router.js @@ -6,7 +6,11 @@ var Router = Ember.Router.extend({ }); Router.map(function() { - // this.resource('index', {path: '/'} + this.resource('dashboard', {path: '/'}); + this.resource('basics'); + this.resource('permissions'); + this.resource('appearance'); + this.resource('extensions'); }); export default Router; diff --git a/framework/core/ember/admin/app/templates/appearance.hbs b/framework/core/ember/admin/app/templates/appearance.hbs new file mode 100644 index 000000000..6db9a2630 --- /dev/null +++ b/framework/core/ember/admin/app/templates/appearance.hbs @@ -0,0 +1 @@ +Appearance diff --git a/framework/core/ember/admin/app/templates/application.hbs b/framework/core/ember/admin/app/templates/application.hbs index a8233120f..ad5e01d76 100644 --- a/framework/core/ember/admin/app/templates/application.hbs +++ b/framework/core/ember/admin/app/templates/application.hbs @@ -1 +1,43 @@ -hey there +
+ + {{application/back-button className="back-control" toggleDrawer="toggleDrawer" goBack="goBack" canGoBack=false}} + +
+ +
+ +
+
+
+ {{ui/dropdown-select items=view.adminNav}} +
+
+ {{outlet}} +
+
+
+ +
+ + + +{{render "alerts"}} diff --git a/framework/core/ember/admin/app/templates/basics.hbs b/framework/core/ember/admin/app/templates/basics.hbs new file mode 100644 index 000000000..4a80312cf --- /dev/null +++ b/framework/core/ember/admin/app/templates/basics.hbs @@ -0,0 +1 @@ +Basics diff --git a/framework/core/ember/admin/app/templates/dashboard.hbs b/framework/core/ember/admin/app/templates/dashboard.hbs new file mode 100644 index 000000000..dcabf8fdf --- /dev/null +++ b/framework/core/ember/admin/app/templates/dashboard.hbs @@ -0,0 +1 @@ +Dashboard diff --git a/framework/core/ember/admin/app/templates/error.hbs b/framework/core/ember/admin/app/templates/error.hbs deleted file mode 100644 index b17a9157d..000000000 --- a/framework/core/ember/admin/app/templates/error.hbs +++ /dev/null @@ -1,13 +0,0 @@ -
-
-

Error

-
-
- -
-
-

{{model.message}}

- - 
{{model.stack}}
-
-
diff --git a/framework/core/ember/admin/app/templates/extensions.hbs b/framework/core/ember/admin/app/templates/extensions.hbs new file mode 100644 index 000000000..26c0a2e8b --- /dev/null +++ b/framework/core/ember/admin/app/templates/extensions.hbs @@ -0,0 +1 @@ +Extensions diff --git a/framework/core/ember/admin/app/templates/permissions.hbs b/framework/core/ember/admin/app/templates/permissions.hbs new file mode 100644 index 000000000..ca206fbdd --- /dev/null +++ b/framework/core/ember/admin/app/templates/permissions.hbs @@ -0,0 +1 @@ +Permissions diff --git a/framework/core/ember/admin/app/views/application.js b/framework/core/ember/admin/app/views/application.js new file mode 100644 index 000000000..a07d71a4c --- /dev/null +++ b/framework/core/ember/admin/app/views/application.js @@ -0,0 +1,79 @@ +import Ember from 'ember'; + +import HasItemLists from '../mixins/has-item-lists'; +import AdminNavItem from '../components/ui/admin-nav-item'; +import SearchInput from '../components/ui/search-input'; +import UserDropdown from '../components/user-dropdown'; + +export default Ember.View.extend(HasItemLists, { + itemLists: ['headerPrimary', 'headerSecondary', 'adminNav'], + + drawerShowingChanged: Ember.observer('controller.drawerShowing', function() { + Ember.run.scheduleOnce('afterRender', this, function() { + $('body').toggleClass('drawer-open', this.get('controller.drawerShowing')); + }); + }), + + didInsertElement: function() { + this.$('.global-content').click(function(e) { + if (view.get('controller.drawerShowing')) { + e.preventDefault(); + view.set('controller.drawerShowing', false); + } + }); + }, + + populateHeaderSecondary: function(items) { + var controller = this.get('controller'); + + items.pushObjectWithTag(SearchInput.extend({ + placeholder: 'Search Forum', + controller: controller, + valueBinding: Ember.Binding.oneWay('controller.searchQuery'), + activeBinding: Ember.Binding.oneWay('controller.searchActive'), + action: function(value) { controller.send('search', value); } + }), 'search'); + + items.pushObjectWithTag(UserDropdown.extend({ + user: this.get('controller.session.user'), + parentController: controller + }), 'user'); + }, + + populateAdminNav: function(items) { + items.pushObjectWithTag(AdminNavItem.extend({ + routeName: 'dashboard', + icon: 'bar-chart', + label: 'Dashboard', + description: 'Your forum at a glance.' + }), 'dashboard'); + + items.pushObjectWithTag(AdminNavItem.extend({ + routeName: 'basics', + icon: 'pencil', + label: 'Basics', + description: 'Set your forum title, language, and other basic settings.' + }), 'basics'); + + items.pushObjectWithTag(AdminNavItem.extend({ + routeName: 'permissions', + icon: 'key', + label: 'Permissions', + description: 'Configure who can see and do what.' + }), 'permissions'); + + items.pushObjectWithTag(AdminNavItem.extend({ + routeName: 'appearance', + icon: 'paint-brush', + label: 'Appearance', + description: 'Customize your forum\'s colors, logos, and other variables.' + }), 'appearance'); + + items.pushObjectWithTag(AdminNavItem.extend({ + routeName: 'extensions', + icon: 'puzzle-piece', + label: 'Extensions', + description: 'Add extra functionality to your forum and make it your own.' + }), 'extensions'); + } +}); diff --git a/framework/core/ember/forum/app/components/application/back-button.js b/framework/core/ember/common/app/components/application/back-button.js similarity index 100% rename from framework/core/ember/forum/app/components/application/back-button.js rename to framework/core/ember/common/app/components/application/back-button.js diff --git a/framework/core/ember/forum/app/controllers/alerts.js b/framework/core/ember/common/app/controllers/alerts.js similarity index 100% rename from framework/core/ember/forum/app/controllers/alerts.js rename to framework/core/ember/common/app/controllers/alerts.js diff --git a/framework/core/ember/common/app/initializers/inject-components.js b/framework/core/ember/common/app/initializers/inject-components.js index 2061cb641..87946d15c 100644 --- a/framework/core/ember/common/app/initializers/inject-components.js +++ b/framework/core/ember/common/app/initializers/inject-components.js @@ -3,7 +3,6 @@ export default { initialize: function(container, application) { application.inject('adapter', 'alerts', 'controller:alerts') application.inject('component', 'alerts', 'controller:alerts') - application.inject('component', 'composer', 'controller:composer') application.inject('model', 'session', 'simple-auth-session:main') application.inject('component', 'session', 'simple-auth-session:main') application.inject('component', 'store', 'store:main') diff --git a/framework/core/ember/admin/app/templates/alerts.hbs b/framework/core/ember/common/app/templates/alerts.hbs similarity index 100% rename from framework/core/ember/admin/app/templates/alerts.hbs rename to framework/core/ember/common/app/templates/alerts.hbs diff --git a/framework/core/ember/forum/app/templates/components/application/back-button.hbs b/framework/core/ember/common/app/templates/components/application/back-button.hbs similarity index 100% rename from framework/core/ember/forum/app/templates/components/application/back-button.hbs rename to framework/core/ember/common/app/templates/components/application/back-button.hbs diff --git a/framework/core/ember/forum/app/templates/components/application/user-dropdown.hbs b/framework/core/ember/common/app/templates/components/application/user-dropdown.hbs similarity index 100% rename from framework/core/ember/forum/app/templates/components/application/user-dropdown.hbs rename to framework/core/ember/common/app/templates/components/application/user-dropdown.hbs diff --git a/framework/core/ember/forum/app/initializers/inject-composer.js b/framework/core/ember/forum/app/initializers/inject-composer.js new file mode 100644 index 000000000..52b09bde4 --- /dev/null +++ b/framework/core/ember/forum/app/initializers/inject-composer.js @@ -0,0 +1,6 @@ +export default { + name: 'inject-composer', + initialize: function(container, application) { + application.inject('component', 'composer', 'controller:composer') + } +}; diff --git a/framework/core/ember/forum/app/templates/alerts.hbs b/framework/core/ember/forum/app/templates/alerts.hbs deleted file mode 100644 index 1821af7cd..000000000 --- a/framework/core/ember/forum/app/templates/alerts.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
- {{#each alert in alerts}} -
- {{view alert dismiss="dismissAlert"}} -
- {{/each}} -
diff --git a/framework/core/less/admin/app.less b/framework/core/less/admin/app.less index 42ce2265c..747ac3d56 100644 --- a/framework/core/less/admin/app.less +++ b/framework/core/less/admin/app.less @@ -21,3 +21,6 @@ @import "@{common-path}/alerts.less"; @import "@{common-path}/modals.less"; @import "@{common-path}/layout.less"; +@import "@{common-path}/side-nav.less"; + +@import "layout.less"; diff --git a/framework/core/less/admin/layout.less b/framework/core/less/admin/layout.less new file mode 100644 index 000000000..52a036941 --- /dev/null +++ b/framework/core/less/admin/layout.less @@ -0,0 +1,76 @@ +@admin-pane-width: 300px; + +.admin-nav { + & .description { + display: none; + } +} +.admin-content { + padding: 20px 0; +} +@media @desktop, @desktop-hd { + .admin-nav { + position: fixed; + top: @header-height; + bottom: 0; + width: @admin-pane-width; + box-shadow: 0 2px 6px @fl-shadow-color; + background: @fl-body-bg; + border-top: 1px solid @fl-body-control-bg; + + & .dropdown-select .dropdown-menu > li { + & > a { + padding: 15px 15px 15px 45px; + display: block; + text-decoration: none; + white-space: normal; + } + & > a, & > a:hover, &.active > a { + color: @fl-body-muted-color; + } + &.active > a { + background: @fl-body-secondary-color; + font-weight: normal; + + & .label, & .icon { + color: @fl-body-color; + } + & .label { + font-weight: bold; + } + } + &:hover:not(.active) { + & .label { + text-decoration: underline; + } + } + } + & .icon { + float: left; + margin-left: -30px; + font-size: 14px; + margin-top: 2px; + } + & .label { + display: block; + font-size: 15px; + font-weight: normal; + margin: 0 0 5px; + } + & .description { + display: block; + font-size: 12px; + } + } + .admin-content { + margin-left: @admin-pane-width; + padding: 20px; + } + .container { + width: 100%; + + .global-content & { + padding: 0; + } + } +}