From edd370ce81f6917d145cdf5a54488119523ebb7d Mon Sep 17 00:00:00 2001 From: Toby Zerner Date: Thu, 5 Mar 2015 12:07:16 +1030 Subject: [PATCH] Add badges API + styles for discussions and users --- .../components/discussion/post-header/user.js | 2 +- .../ember/app/components/ui/badge-button.js | 11 +++++ framework/core/ember/app/models/discussion.js | 20 +++++++- framework/core/ember/app/models/user.js | 5 +- framework/core/ember/app/styles/app.less | 1 + .../core/ember/app/styles/flarum/badges.less | 31 +++++++++++++ .../ember/app/styles/flarum/discussion.less | 46 +++++++++++++++++++ .../core/ember/app/styles/flarum/index.less | 28 ++++++++++- .../components/index/discussion-listing.hbs | 6 +-- .../core/ember/app/templates/discussion.hbs | 1 + 10 files changed, 141 insertions(+), 10 deletions(-) create mode 100644 framework/core/ember/app/components/ui/badge-button.js create mode 100644 framework/core/ember/app/styles/flarum/badges.less diff --git a/framework/core/ember/app/components/discussion/post-header/user.js b/framework/core/ember/app/components/discussion/post-header/user.js index aa09a96eb..8e35102e6 100644 --- a/framework/core/ember/app/components/discussion/post-header/user.js +++ b/framework/core/ember/app/components/discussion/post-header/user.js @@ -8,5 +8,5 @@ var precompileTemplate = Ember.Handlebars.compile; export default Ember.Component.extend({ tagName: 'h3', classNames: ['post-user'], - layout: precompileTemplate('{{#if post.user}}{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}}{{else}}{{user-avatar post.user}} {{user-name post.user}}{{/if}}') + layout: precompileTemplate('{{#if post.user}}{{#link-to "user" post.user}}{{user-avatar post.user}} {{user-name post.user}}{{/link-to}}{{else}}{{user-avatar post.user}} {{user-name post.user}}{{/if}}{{ui/item-list items=post.user.badges class="badges"}}') }); diff --git a/framework/core/ember/app/components/ui/badge-button.js b/framework/core/ember/app/components/ui/badge-button.js new file mode 100644 index 000000000..1d709244c --- /dev/null +++ b/framework/core/ember/app/components/ui/badge-button.js @@ -0,0 +1,11 @@ +import ActionButton from 'flarum/components/ui/action-button'; + +export default ActionButton.extend({ + tagName: 'span', + classNames: ['badge'], + title: Ember.computed.alias('label'), + + didInsertElement: function() { + this.$().tooltip(); + } +}); diff --git a/framework/core/ember/app/models/discussion.js b/framework/core/ember/app/models/discussion.js index fa2875d1f..c1c3b2f2f 100644 --- a/framework/core/ember/app/models/discussion.js +++ b/framework/core/ember/app/models/discussion.js @@ -1,7 +1,25 @@ import Ember from 'ember'; import DS from 'ember-data'; -export default DS.Model.extend({ +import HasItemLists from 'flarum/mixins/has-item-lists'; + +export default DS.Model.extend(HasItemLists, { + /** + Define a "badges" item list. Example usage: + ``` + populateBadges: function(items) { + items.pushObjectWithTag(BadgeButton.extend({ + label: 'Sticky', + icon: 'thumb-tack', + className: 'badge-sticky', + discussion: this, + isHiddenInList: Ember.computed.not('discussion.sticky') + }), 'sticky'); + } + ``` + */ + itemLists: ['badges'], + title: DS.attr('string'), slug: Ember.computed('title', function() { return this.get('title').toLowerCase().replace(/[^a-z0-9]/gi, '-').replace(/-+/g, '-'); diff --git a/framework/core/ember/app/models/user.js b/framework/core/ember/app/models/user.js index 0ffe16190..33579bb52 100644 --- a/framework/core/ember/app/models/user.js +++ b/framework/core/ember/app/models/user.js @@ -1,8 +1,11 @@ import DS from 'ember-data'; +import HasItemLists from 'flarum/mixins/has-item-lists'; import stringToColor from 'flarum/utils/string-to-color'; -export default DS.Model.extend({ +export default DS.Model.extend(HasItemLists, { + itemLists: ['badges'], + username: DS.attr('string'), email: DS.attr('string'), password: DS.attr('string'), diff --git a/framework/core/ember/app/styles/app.less b/framework/core/ember/app/styles/app.less index 381f7933d..6361546d5 100644 --- a/framework/core/ember/app/styles/app.less +++ b/framework/core/ember/app/styles/app.less @@ -21,6 +21,7 @@ // Finally, with our vendor CSS loaded, we can import Flarum-specific stuff. @import "@{flarum-base}components.less"; @import "@{flarum-base}buttons.less"; +@import "@{flarum-base}badges.less"; @import "@{flarum-base}dropdowns.less"; @import "@{flarum-base}avatars.less"; @import "@{flarum-base}forms.less"; diff --git a/framework/core/ember/app/styles/flarum/badges.less b/framework/core/ember/app/styles/flarum/badges.less new file mode 100644 index 000000000..55594e7c5 --- /dev/null +++ b/framework/core/ember/app/styles/flarum/badges.less @@ -0,0 +1,31 @@ +.badges { + margin: 0; + padding: 0; + list-style: none; + + &, & > li { + display: inline-block; + } +} + +.badge-size(@size) { + width: @size; + height: @size; + border-radius: @size / 2; + line-height: @size - 4px; + &, & .fa { + font-size: 0.6 * @size; + } +} +.badge { + .badge-size(24px); + border: 2px solid @fl-body-bg; + background: @fl-body-secondary-color; + display: inline-block; + vertical-align: middle; + text-align: center; + + & .label { + display: none; + } +} diff --git a/framework/core/ember/app/styles/flarum/discussion.less b/framework/core/ember/app/styles/flarum/discussion.less index 569cdab9e..f68993991 100644 --- a/framework/core/ember/app/styles/flarum/discussion.less +++ b/framework/core/ember/app/styles/flarum/discussion.less @@ -1,3 +1,16 @@ +// ------------------------------------ +// Hero + +.discussion-hero { + & .badges { + margin-right: 5px; + } +} +.discussion-title { + display: inline; + vertical-align: middle; +} + // ------------------------------------ // Sidebar @@ -159,6 +172,16 @@ &, & a { color: @fl-body-heading-color; } + + & .badges { + text-align: right; + white-space: nowrap; + + & .badge { + margin-left: -15px; + position: relative; + } + } } } .post-body { @@ -273,6 +296,21 @@ margin-right: 5px; } } + .post-user { + position: relative; + + & .badges { + position: absolute; + top: -7px; + left: 5px; + width: 32px; + + & .badge { + .badge-size(20px); + margin-left: -13px; + } + } + } .post-activity { padding-left: 30px; } @@ -304,6 +342,14 @@ .avatar-size(64px); } } + .post-user { + & .badges { + float: left; + margin-left: -85px; + margin-top: -3px; + width: 64px; + } + } .post-icon { text-align: right; margin-left: -90px; diff --git a/framework/core/ember/app/styles/flarum/index.less b/framework/core/ember/app/styles/flarum/index.less index c0d9d7851..db21897ed 100644 --- a/framework/core/ember/app/styles/flarum/index.less +++ b/framework/core/ember/app/styles/flarum/index.less @@ -262,13 +262,24 @@ .discussion-summary { position: relative; - &, & a { + &, & .main { color: @fl-body-muted-color; text-decoration: none; } & .author { float: left; - margin-top: 18px; + margin-top: 20px; + } + & .badges { + float: left; + margin-top: 17px; + text-align: right; + white-space: nowrap; + + & .badge { + margin-left: -15px; + position: relative; + } } & .main { display: inline-block; @@ -324,6 +335,15 @@ & .author { margin-left: -45px; } + & .badges { + margin-left: -45px; + width: 38px; + + & .badge { + .badge-size(20px); + margin-left: -13px; + } + } & .avatar { .avatar-size(32px); } @@ -362,6 +382,10 @@ & .author { margin-left: -65px; } + & .badges { + margin-left: -65px; + width: 58px; + } & .main { margin-right: -65px; } diff --git a/framework/core/ember/app/templates/components/index/discussion-listing.hbs b/framework/core/ember/app/templates/components/index/discussion-listing.hbs index 37d33b244..dd237882e 100644 --- a/framework/core/ember/app/templates/components/index/discussion-listing.hbs +++ b/framework/core/ember/app/templates/components/index/discussion-listing.hbs @@ -9,11 +9,7 @@ {{#link-to "user" discussion.startUser class="author"}}{{user-avatar discussion.startUser}}{{/link-to}} -
- {{#each badge in badges}} - {{fl-badge badge}} - {{/each}} -
+{{ui/item-list items=discussion.badges class="badges"}} {{#link-to "discussion" discussion.content (query-params start=start) current-when="discussion" class="main"}}

{{highlight-words discussion.title searchQuery}}

diff --git a/framework/core/ember/app/templates/discussion.hbs b/framework/core/ember/app/templates/discussion.hbs index 903102561..a35a41e8b 100644 --- a/framework/core/ember/app/templates/discussion.hbs +++ b/framework/core/ember/app/templates/discussion.hbs @@ -1,5 +1,6 @@
+ {{ui/item-list items=model.badges class="badges"}}

{{model.title}}