TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-04 17:04:59 +03:00
Code Issues Projects Releases Wiki Activity

fixed notification components

Browse Source
This commit is contained in:
Austin Burdine 2015-05-21 11:03:24 -06:00 committed by Hannah Wolfe
parent cf239774eb
commit 77d08c3207
8 changed files with 79 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
core/client/app/components/gh-alert.js Normal file
View File

@ -0,0 +1,40 @@
import Ember from 'ember';
var AlertComponent = Ember.Component.extend({
tagName: 'article',
classNames: ['gh-alert', 'gh-alert-blue'],
classNameBindings: ['typeClass'],
typeClass: Ember.computed(function () {
var classes = '',
message = this.get('message'),
type,
dismissible;
// Check to see if we're working with a DS.Model or a plain JS object
if (typeof message.toJSON === 'function') {
type = message.get('type');
dismissible = message.get('dismissible');
} else {
type = message.type;
dismissible = message.dismissible;
}
classes += 'notification-' + type;
if (type === 'success' && dismissible !== false) {
classes += ' notification-passive';
}
return classes;
}),
actions: {
closeNotification: function () {
var self = this;
self.notifications.closeNotification(self.get('message'));
}
}
});
export default AlertComponent;

18
core/client/app/components/gh-alerts.js Normal file
View File

@ -0,0 +1,18 @@
import Ember from 'ember';
var AlertsComponent = Ember.Component.extend({
tagName: 'aside',
classNames: 'gh-alerts',
messages: Ember.computed.filter('notifications', function (notification) {
var displayStatus = (typeof notification.toJSON === 'function') ?
notification.get('status') : notification.status;
return displayStatus === 'persistent';
}),
messageCountObserver: Ember.observer('messages.[]', function () {
this.sendAction('notify', this.get('messages').length);
})
});
export default AlertsComponent;

4
core/client/app/components/gh-notification.js
View File

@ -1,7 +1,9 @@
import Ember from 'ember';
var NotificationComponent = Ember.Component.extend({
classNames: ['js-bb-notification'],
tagName: 'article',
classNames: ['gh-notification', 'gh-notification-green'],
classNameBindings: ['typeClass'],
typeClass: Ember.computed(function () {
var classes = '',

19
core/client/app/components/gh-notifications.js
View File

@ -1,25 +1,14 @@
import Ember from 'ember';
var NotificationsComponent = Ember.Component.extend({
tagName: 'aside',
classNames: 'notifications',
classNameBindings: ['location'],
classNames: 'gh-notifications',
messages: Ember.computed.filter('notifications', function (notification) {
// If this instance of the notifications component has no location affinity
// then it gets all notifications
if (!this.get('location')) {
return true;
}
var displayStatus = (typeof notification.toJSON === 'function') ?
notification.get('status') : notification.status;
var displayLocation = (typeof notification.toJSON === 'function') ?
notification.get('location') : notification.location;
return this.get('location') === displayLocation;
return displayStatus === 'passive';
}),
messageCountObserver: function () {
this.sendAction('notify', this.get('messages').length);
}.observes('messages.[]')
});
export default NotificationsComponent;

33
core/client/app/templates/application.hbs
View File

@ -1,17 +1,6 @@
<a class="sr-only sr-only-focusable" href="#gh-main">Skip to main content</a>
<!-- TODO: Rename gh-alerts, remove location attr -->
{{gh-notifications location="top" notify="topNotificationChange"}}
<!-- TODO: SHOULD RENDER LIKE
<aside id="ember754" class="gh-alerts">
<article class="gh-alert gh-alert-blue">
<div class="gh-alert-content">
<a href="https://ghost.org/download">Ghost 0.6.4</a> is available! Hot Damn. Please <a href="http://support.ghost.org/how-to-upgrade/" target="_blank">upgrade</a> now.
</div>
<button class="gh-alert-close icon-x" data-ember-action="779"><span class="hidden">Close</span></button>
</article>
</aside>
-->
{{gh-alerts notify="topNotificationChange"}}
<div class="gh-viewport">
@ -23,24 +12,8 @@
{{outlet}}
</main>
<!-- TODO: Remove location attr -->
{{gh-notifications location="bottom"}}
<!-- TODO: SHOULD RENDER LIKE
<aside id="ember721" class="ember-view gh-notifications">
<article class="gh-notification gh-notification-green">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>12 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
<article class="gh-notification">
<div class="gh-notification-content">
<strong>Hannah Wolfe</strong> just updated the post <em>20 Reasons Why You're Not Selling Anything</em>.
</div>
<button class="gh-notification-close icon-x" data-ember-action="1077"><span class="hidden">Close</span></button>
</article>
</aside>
-->
{{gh-notifications}}
{{outlet "modal"}}
{{outlet "settings-menu"}}

4
core/client/app/templates/components/gh-alert.hbs Normal file
View File

@ -0,0 +1,4 @@
<div class="gh-alert-content">
{{message.message}}
</div>
<button class="gh-alert-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>

3
core/client/app/templates/components/gh-alerts.hbs Normal file
View File

@ -0,0 +1,3 @@
{{#each message in messages}}
{{gh-alert message=message}}
{{/each}}

10
core/client/app/templates/components/gh-notification.hbs
View File

@ -1,6 +1,4 @@
<article class="gh-notification js-notification {{typeClass}}">
<div class="gh-notification-content">
{{message.message}}
</div>
<button class="gh-notification-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>
</article>
<div class="gh-notification-content">
{{message.message}}
</div>
<button class="gh-notification-close icon-x" {{action "closeNotification"}}><span class="hidden">Close</span></button>