Skip to content

Commit

Permalink
Merge pull request #55 from merefield/combine_social_and_tiles
Browse files Browse the repository at this point in the history 
Combine social and tiles
  • Loading branch information
@angusmcleod
angusmcleod committed Feb 28, 2019
2 parents 44dc707 + 7f2ce3b commit ffff336
Show file tree
Hide file tree
Showing 14 changed files with 109 additions and 464 deletions.
7 changes: 1 addition & 6 deletions assets/javascripts/discourse/connectors/category-custom-settings/category-list-settings.hbs
View file
@@ -1,12 +1,7 @@
{{#if siteSettings.topic_list_previews_enabled}}
<section class='field'>
<label>{{i18n 'category.topic_list_social'}}</label>
{{list-setting settingValue=category.custom_fields.topic_list_social choices=choices settingName='category.topic_list_social'}}
</section>

<section class='field'>
<label>{{i18n 'category.topic_list_tiles'}}</label>
{{list-setting settingValue=category.custom_fields.topic_list_tiles choices=filteredChoices settingName='category.topic_list_tiles'}}
{{list-setting settingValue=category.custom_fields.topic_list_tiles choices=choices settingName='category.topic_list_tiles'}}
</section>

<section class='field'>
Expand Down
8 changes: 2 additions & 6 deletions ...s/javascripts/discourse/connectors/category-custom-settings/category-list-settings.js.es6
View file
@@ -1,6 +1,6 @@

const listChoices = ['latest', 'new', 'unread', 'top', 'suggested', 'agenda', 'latest-mobile', 'new-mobile', 'unread-mobile', 'top-mobile', 'suggested-mobile', 'agenda-mobile'];
const listSettings = ['tiles', 'social', 'thumbnail', 'excerpt', 'action', 'category_column'];
const filterChoices = ['suggested', 'agenda', 'latest-mobile', 'new-mobile', 'unread-mobile','top-mobile', 'suggested-mobile', 'agenda-mobile'];
const listSettings = ['tiles', 'thumbnail', 'excerpt', 'action', 'category_column'];

export default {
setupComponent(args, component) {
Expand All @@ -16,9 +16,5 @@ export default {
}
});
component.set('choices', listChoices);

const filteredChoices = listChoices.filter(c => (filterChoices.indexOf(c) === -1));

component.set('filteredChoices', filteredChoices);
}
};
104 changes: 30 additions & 74 deletions assets/javascripts/discourse/initializers/preview-edits.js.es6
View file
Expand Up @@ -16,13 +16,11 @@ export default {
api.modifyClass('component:topic-list', {
router: Ember.inject.service('-routing'),
currentRoute: Ember.computed.alias('router.router.currentRouteName'),
classNameBindings: ['showThumbnail', 'showExcerpt', 'showActions', 'socialStyle', 'tilesStyle'],
classNameBindings: ['showThumbnail', 'showExcerpt', 'showActions', 'tilesStyle'],
suggestedList: Ember.computed.equal('parentView.parentView.parentView.elementId', 'suggested-topics'),
discoveryList: Ember.computed.equal('parentView._debugContainerKey', 'component:discovery-topics-list'),
listChanged: false,

// Lifecyle logic

@on('init')
setup() {
const suggestedList = this.get('suggestedList');
Expand All @@ -32,11 +30,11 @@ export default {
};
},

@on('didRender')
completeRender(){
if (this.get('tilesStyle')){
Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
};
@on('didRender')
completeRender(){
if (this.get('tilesStyle')){
Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
};
},

@on('didInsertElement')
Expand All @@ -46,24 +44,22 @@ export default {
},

@on('didInsertElement')
@observes('socialStyle','tilesStyle')
@observes('tilesStyle')
setupListStyle() {
if (!this.$()) {return;}
this.$().parents('#list-area').toggleClass('social-style', this.get('socialStyle'));
if (this.get('tilesStyle')){
this.$().parents('#list-area').toggleClass('tiles-style', true);
this.$("tbody").toggleClass('grid', true);
if ( !this.$( ".grid-sizer" ).length) {
this.$(".grid").prepend("<div class='grid-sizer'></div><div class='gutter-sizer'></div>");
this.$("tbody").toggleClass('tiles-grid', true);
if ( !this.$( ".tiles-grid-sizer" ).length) {
this.$(".tiles-grid").prepend("<div class='tiles-grid-sizer'></div><div class='tiles-gutter-sizer'></div>");
};
}
},

@on('willDestroyElement')
_tearDown() {
this.$().parents('#list-area').removeClass('social-style');
this.$().parents('#list-area').removeClass('tiles-style');
this.$("tbody").removeClass('grid');
this.$("tbody").removeClass('tiles-grid');
},

filter() {
Expand Down Expand Up @@ -105,21 +101,11 @@ export default {
return category ? (catEnabled || siteDefaults && siteEnabled) : siteEnabled;
},

@computed('listChanged')
socialStyle() {
return this.settingEnabled('topic_list_social');
},

@computed('listChanged')
tilesStyle() {
return this.settingEnabled('topic_list_tiles');
},

@computed('listChanged')
tilesOrSocial() {
return (this.get('tilesStyle') || this.get('socialStyle'));
},

@computed('listChanged')
showThumbnail() {
return this.settingEnabled('topic_list_thumbnail');
Expand All @@ -136,10 +122,10 @@ export default {
},

@computed('listChanged')
showCategoryBadge() {
return !this.settingEnabled('topic_list_category_column') &&
(!this.get('category') || this.get('category.has_children'));
},
showCategoryBadge() {
return !this.settingEnabled('topic_list_category_column') &&
(!this.get('category') || this.get('category.has_children'));
},

@observes('showCategoryBadge', 'hideCategory')
toggleHideCategory() {
Expand All @@ -150,59 +136,49 @@ export default {

@computed('listChanged')
skipHeader() {
return this.get('tilesStyle') || this.get('socialStyle') || this.get('site.mobileView');
return this.get('tilesStyle') || this.get('site.mobileView');
},

@computed('listChanged')
thumbnailFirstXRows() {
return Discourse.SiteSettings.topic_list_thumbnail_first_x_rows;
},

// don't forget to update masonry layout when required
@observes('topics.[]')
masonryObserver() {
if (this.get('tilesStyle')){
Ember.run.scheduleOnce('afterRender', this, this.applyMasonry);
}
},

applyMasonry() {
// initialize
let msnry = this.$('.grid').data('masonry');
let msnry = this.$('.tiles-grid').data('masonry');

if (msnry) {
msnry.reloadItems();
//disable transition
var transitionDuration = msnry.options.transitionDuration;
msnry.options.transitionDuration = 0;
$('.grid').imagesLoaded(function() {msnry.layout()});
$('.tiles-grid').imagesLoaded(function() {msnry.layout()});
//reset transition
msnry.options.transitionDuration = transitionDuration;
} else {
// init masonry
// transition set to zero on mobile due to undesirable behaviour on mobile safari if > 0
const transDuration = this.get('site.mobileView') ? 0 : Discourse.SiteSettings.topic_list_tiles_transition_time;
this.$('.grid').masonry({
itemSelector: '.grid-item',
this.$('.tiles-grid').masonry({
itemSelector: '.tiles-grid-item',
transitionDuration: `${transDuration}s`,
percentPosition: true,
Width: '.grid-sizer',
gutter: '.gutter-sizer'
columnWidth: '.tiles-grid-sizer',
gutter: '.tiles-gutter-sizer'
});

msnry = this.$('.grid').data('masonry');
msnry = this.$('.tiles-grid').data('masonry');

$('.grid').imagesLoaded(function() {msnry.layout()});
$('.tiles-grid').imagesLoaded(function() {msnry.layout()});
};
}
});

api.modifyClass('component:topic-list-item', {
canBookmark: Ember.computed.bool('currentUser'),
rerenderTriggers: ['bulkSelectEnabled', 'topic.pinned', 'likeDifference', 'topic.thumbnails'],
socialStyle: Ember.computed.alias('parentView.socialStyle'),
tilesStyle: Ember.computed.alias('parentView.tilesStyle'),
tilesOrSocial: Ember.computed.alias('parentView.tilesOrSocial'),
showThumbnail: Ember.computed.and('thumbnails', 'parentView.showThumbnail'),
showExcerpt: Ember.computed.and('topic.excerpt', 'parentView.showExcerpt'),
showActions: Ember.computed.alias('parentView.showActions'),
Expand All @@ -221,7 +197,7 @@ export default {
if (this.get('tilesStyle')) {
// needs 'div's for masonry
this.set('tagName', 'div');
this.classNames = ['grid-item'];
this.classNames = ['tiles-grid-item'];
};

if (thumbnails) {
Expand Down Expand Up @@ -253,44 +229,25 @@ export default {
if (topic.get('thumbnails') && this.get('thumbnailFirstXRows') && (this.$().index() > this.get('thumbnailFirstXRows'))) {
this.set('showThumbnail', false);
}

this._afterRender();
},

@on('didRender')
@observes('thumbnails')
_afterRender() {
Ember.run.scheduleOnce('afterRender', this, () => {
this._setupTitleCSS();
if (this.get('showThumbnail') && (this.get('socialStyle') )) {
this._sizeThumbnails();
}
if (this.get('showExcerpt') && !this.get('tilesStyle')) {
this._setupExcerptClick();
}
if (this.get('showActions')) {
this._setupActions();
}
if (this.get('tilesStyle')) {
var myid = this.$().attr('id');
$(`#${myid} > .topic-title`).wrap("<div class='topic-header-grid'></div>");
$(`#${myid} .topic-users`).appendTo(`#${myid} .topic-header-grid`);
$(`#${myid} .topic-category`).appendTo(`#${myid} .topic-header-grid`);
$(`#${myid} .topic-category`).removeClass('inline').removeClass('sub');
$(`#${myid} .topic-actions`).unwrap(`#${myid} .main-link-footer`);
$(`#${myid} .discourse-tags`).insertAfter(`#${myid} .topic-details`);
$(`#${myid} .discourse-tags`).wrap("<div class='topic-tags'></div>");
$(`#${myid} .topic-meta`).insertAfter(`#${myid} .topic-tags`);
$(`#${myid} .topic-views`).prevAll().remove();
$(`#${myid} .topic-actions`).appendTo(`#${myid}`);
}
});
},

_setupTitleCSS() {
let $el = this.$('.topic-title a.visited');
if ($el) {
$el.closest('.topic-details').addClass('visited');
}
this.$('.topic-title a.visited').closest('.topic-details').addClass('visited');
},

_setupExcerptClick() {
Expand Down Expand Up @@ -378,11 +335,10 @@ export default {
return getDefaultThumbnail(category);
},

@computed('tilesStyle', 'socialStyle', 'thumbnailWidth', 'thumbnailHeight')
thumbnailOpts(tilesStyle, socialStyle, thumbnailWidth, thumbnailHeight) {
@computed('tilesStyle', 'thumbnailWidth', 'thumbnailHeight')
thumbnailOpts(tilesStyle, thumbnailWidth, thumbnailHeight) {
let opts = {
tilesStyle,
socialStyle,
tilesStyle
}

if (thumbnailWidth) {
Expand Down
2 changes: 1 addition & 1 deletion assets/javascripts/discourse/lib/utilities.js.es6
View file
Expand Up @@ -34,7 +34,7 @@ var renderUnboundPreview = function(thumbnails, params) {
};

const settings = Discourse.SiteSettings;
const attrPrefix = opts.socialStyle ? 'max-' : '';
const attrPrefix = '';
const attrWidthSuffix = opts.tilesStyle ? '%' : 'px';
const attrHeightSuffix = opts.tilesStyle ? '' : 'px';
const css_classes = opts.tilesStyle? 'thumbnail tiles-thumbnail' : 'thumbnail';
Expand Down
29 changes: 16 additions & 13 deletions assets/javascripts/discourse/templates/list/topic-list-item.raw.hbs
View file
Expand Up @@ -5,16 +5,23 @@
{{/if}}

<td class='main-link clearfix' colspan="{{titleColSpan}}">
{{#if tilesOrSocial}}
{{raw "list/topic-list-title" topic=topic tilesOrSocial=tilesOrSocial tilesStyle=tilesStyle socialStyle=socialStyle showTopicPostBadges=showTopicPostBadges}}
{{#if tilesStyle}}
<div class="topic-header-grid">
{{raw "list/topic-list-title" topic=topic tilesStyle=tilesStyle showTopicPostBadges=showTopicPostBadges}}
<div class="topic-category">
{{#if showCategoryBadge}}
{{category-link topic.category}}
{{/if}}
</div>
</div>
{{/if}}

{{#if showThumbnail}}
{{raw "list/topic-thumbnail" topic=topic thumbnails=thumbnails category=category opts=thumbnailOpts}}
{{/if}}

<div class="topic-details">
{{#unless tilesOrSocial}}
{{#unless tilesStyle}}
{{raw "list/topic-list-title"
topic=topic
showTopicPostBadges=showTopicPostBadges
Expand All @@ -34,29 +41,25 @@
{{raw "list/topic-excerpt" topic=topic}}
{{/if}}

{{#unless tilesOrSocial}}
</div>
{{#unless tilesStyle}}
<div class="actions-and-meta-data">
{{#if showActions}}
{{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions}}
{{/if}}
{{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
</div>
{{/unless}}
</div>

{{#if tilesOrSocial}}
<div class="main-link-footer">
{{#if tilesStyle}}
</div>
{{raw 'list/topic-meta' likesHeat=likesHeat title=view.title topic=topic}}
{{#if showActions}}
{{raw "list/topic-actions" likeCount=likeCount topicActions=topicActions}}
{{/if}}
{{raw-plugin-outlet name="topic-list-main-link-footer"}}
{{raw 'list/topic-meta' likesHeat=likesHeat title=view.title topic=topic}}
</div>
{{/if}}
{{/if}}
</td>

{{#unless tilesOrSocial}}
{{#unless tilesStyle}}
{{#if showCategoryColumn}}
{{raw "list/category-column" category=topic.category}}
{{/if}}
Expand Down
40 changes: 25 additions & 15 deletions assets/javascripts/discourse/templates/list/topic-list-title.raw.hbs
View file
Expand Up @@ -3,27 +3,37 @@
{{raw-plugin-outlet name="topic-list-before-status"}}
{{raw "topic-status" topic=topic}}
{{topic-link topic}}
{{#if tilesStyle}}
{{#if mobileView}}
{{#if topic.unseen}}
<span class="badge-notification new-topic"></span>
{{/if}}
{{else}}
{{#if showTopicPostBadges}}
{{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
{{/if}}
{{/if}}
{{/if}}

{{#if topic.featured_link}}
{{topic-featured-link topic}}
{{/if}}

{{#if mobileView}}
{{#if topic.unseen}}
<span class="badge-notification new-topic"></span>
{{#unless tilesStyle}}
{{#if mobileView}}
{{#if topic.unseen}}
<span class="badge-notification new-topic"></span>
{{/if}}
{{else}}
{{#if showTopicPostBadges}}
{{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
{{/if}}
{{/if}}
{{else}}
{{#if showTopicPostBadges}}
{{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl}}
{{/if}}
{{/if}}

{{#unless tilesOrSocial}}
{{raw-plugin-outlet name="topic-list-after-title"}}
{{/unless}}
</span>

{{#if tilesOrSocial}}
{{raw "list/topic-users" topic=topic posterNames=posterNames}}
{{/if}}
{{raw-plugin-outlet name="topic-list-after-title"}}
</span>
</div>
{{#if tilesStyle}}
{{raw "list/topic-users" tilesStyle=tilesStyle topic=topic posterNames=posterNames}}
{{/if}}

0 comments on commit ffff336

Please sign in to comment.