Replaces all notification-options like dropdowns with select-box
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
f13776e550
commit
cf6fb7622e
|
|
@ -122,7 +122,7 @@
|
|||
|
||||
<div>
|
||||
<label>{{i18n 'groups.notification_level'}}</label>
|
||||
{{notifications-button i18nPrefix='groups.notifications' notificationLevel=model.default_notification_level}}
|
||||
{{notification-options i18nPrefix='groups.notifications' value=model.default_notification_level}}
|
||||
<div class='clearfix'></div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,6 @@
|
|||
//= require ./discourse/controllers/navigation/default
|
||||
//= require ./discourse/components/edit-category-panel
|
||||
//= require ./discourse/components/dropdown-button
|
||||
//= require ./discourse/components/notifications-button
|
||||
//= require ./discourse/lib/link-mentions
|
||||
//= require ./discourse/components/site-header
|
||||
//= require ./discourse/components/d-editor
|
||||
|
|
|
|||
|
|
@ -0,0 +1,62 @@
|
|||
import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { observes } from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default DropdownSelectBoxComponent.extend({
|
||||
classNames: ["categories-admin-actions"],
|
||||
|
||||
icon: `${iconHTML('bars')}${iconHTML('caret-down')}`.htmlSafe(),
|
||||
|
||||
generatedHeadertext: null,
|
||||
|
||||
@computed
|
||||
content() {
|
||||
const items = [
|
||||
{
|
||||
id: "create",
|
||||
text: I18n.t("category.create"),
|
||||
description: I18n.t("category.create_long"),
|
||||
icon: "plus"
|
||||
}
|
||||
];
|
||||
|
||||
const includeReorder = this.get("siteSettings.fixed_category_positions");
|
||||
if (includeReorder) {
|
||||
items.push({
|
||||
id: "reorder",
|
||||
text: I18n.t("categories.reorder.title"),
|
||||
description: I18n.t("categories.reorder.title_long"),
|
||||
icon: "random"
|
||||
});
|
||||
}
|
||||
|
||||
return items;
|
||||
},
|
||||
|
||||
actionNames: {
|
||||
create: "createCategory",
|
||||
reorder: "reorderCategories"
|
||||
},
|
||||
|
||||
@observes("value")
|
||||
_didSelectRow() {
|
||||
this.sendAction(`actionNames.${this.get("value")}`);
|
||||
this.set("value", null);
|
||||
},
|
||||
|
||||
@computed
|
||||
templateForRow: function() {
|
||||
return (rowComponent) => {
|
||||
const content = rowComponent.get("content");
|
||||
|
||||
return `
|
||||
<div class="icons">${iconHTML(content.icon)}</div>
|
||||
<div class="texts">
|
||||
<span class="title">${Handlebars.escapeExpression(content.text)}</span>
|
||||
<span class="desc">${Handlebars.escapeExpression(content.description)}</span>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
import { iconHTML } from 'discourse-common/lib/icon-library';
|
||||
import DropdownButton from 'discourse/components/dropdown-button';
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default DropdownButton.extend({
|
||||
buttonExtraClasses: 'no-text',
|
||||
title: '',
|
||||
text: iconHTML('bars') + ' ' + iconHTML('caret-down'),
|
||||
classNames: ['category-notification-menu', 'category-admin-menu'],
|
||||
|
||||
@computed()
|
||||
dropDownContent() {
|
||||
const includeReorder = this.get('siteSettings.fixed_category_positions');
|
||||
const items = [
|
||||
{ id: 'create',
|
||||
title: I18n.t('category.create'),
|
||||
description: I18n.t('category.create_long'),
|
||||
icon: 'plus' }
|
||||
];
|
||||
if (includeReorder) {
|
||||
items.push({
|
||||
id: 'reorder',
|
||||
title: I18n.t('categories.reorder.title'),
|
||||
description: I18n.t('categories.reorder.title_long'),
|
||||
icon: 'random'
|
||||
});
|
||||
}
|
||||
return items;
|
||||
},
|
||||
|
||||
actionNames: {
|
||||
create: 'createCategory',
|
||||
reorder: 'reorderCategories'
|
||||
},
|
||||
|
||||
clicked(id) {
|
||||
this.sendAction('actionNames.' + id);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import NotificationOptionsComponent from "discourse/components/notification-options";
|
||||
import { observes } from "ember-addons/ember-computed-decorators";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
|
||||
export default NotificationOptionsComponent.extend({
|
||||
classNames: ["category-notification-options"],
|
||||
|
||||
classNameBindings: ["hidden:is-hidden"],
|
||||
hidden: Ember.computed.or("category.deleted", "site.isMobileDevice"),
|
||||
|
||||
i18nPrefix: "category.notifications",
|
||||
|
||||
value: Em.computed.alias("category.notification_level"),
|
||||
|
||||
generatedHeadertext: iconHTML("caret-down").htmlSafe(),
|
||||
|
||||
@observes("value")
|
||||
_notificationLevelChanged() {
|
||||
this.get("category").setNotification(this.get("value"));
|
||||
},
|
||||
});
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import NotificationsButton from 'discourse/components/notifications-button';
|
||||
|
||||
export default NotificationsButton.extend({
|
||||
classNames: ['notification-options', 'category-notification-menu'],
|
||||
buttonIncludesText: false,
|
||||
hidden: Em.computed.alias('category.deleted'),
|
||||
notificationLevel: Em.computed.alias('category.notification_level'),
|
||||
i18nPrefix: 'category.notifications',
|
||||
|
||||
clicked(id) {
|
||||
this.get('category').setNotification(id);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import NotificationOptionsComponent from "discourse/components/notification-options";
|
||||
import { observes } from "ember-addons/ember-computed-decorators";
|
||||
|
||||
export default NotificationOptionsComponent.extend({
|
||||
classNames: ["group-notification-options"],
|
||||
|
||||
value: Em.computed.alias("group.group_user.notification_level"),
|
||||
|
||||
i18nPrefix: "groups.notifications",
|
||||
|
||||
@observes("value")
|
||||
_notificationLevelChanged() {
|
||||
this.get("group").setNotification(this.get("value"), this.get("user.id"));
|
||||
}
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import NotificationsButton from 'discourse/components/notifications-button';
|
||||
|
||||
export default NotificationsButton.extend({
|
||||
classNames: ['notification-options', 'group-notification-menu'],
|
||||
notificationLevel: Em.computed.alias('group.group_user.notification_level'),
|
||||
i18nPrefix: 'groups.notifications',
|
||||
|
||||
clicked(id) {
|
||||
this.get('group').setNotification(id, this.get('user.id'));
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { buttonDetails } from "discourse/lib/notification-levels";
|
||||
import { allLevels } from "discourse/lib/notification-levels";
|
||||
|
||||
export default DropdownSelectBoxComponent.extend({
|
||||
classNames: ["notification-options"],
|
||||
|
||||
i18nPrefix: "",
|
||||
i18nPostfix: "",
|
||||
textKey: "key",
|
||||
showFullTitle: true,
|
||||
fullWidthOnMobile: true,
|
||||
content: allLevels,
|
||||
|
||||
@computed("value")
|
||||
icon(value) {
|
||||
const details = buttonDetails(value);
|
||||
return iconHTML(details.icon, {class: details.key}).htmlSafe();
|
||||
},
|
||||
|
||||
@computed("value", "showFullTitle")
|
||||
generatedHeadertext(value, showFullTitle) {
|
||||
if (showFullTitle) {
|
||||
const details = buttonDetails(value);
|
||||
return I18n.t(`${this.get("i18nPrefix")}.${details.key}.title`);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
@computed
|
||||
templateForRow: function() {
|
||||
return (rowComponent) => {
|
||||
const content = rowComponent.get("content");
|
||||
const start = `${this.get("i18nPrefix")}.${content.key}${this.get("i18nPostfix")}`;
|
||||
const title = I18n.t(`${start}.title`);
|
||||
const description = I18n.t(`${start}.description`);
|
||||
|
||||
return `
|
||||
<div class="icons">
|
||||
<span class="selection-indicator"></span>
|
||||
${iconHTML(content.icon, { class: content.key.dasherize() })}
|
||||
</div>
|
||||
<div class="texts">
|
||||
<span class="title">${Handlebars.escapeExpression(title)}</span>
|
||||
<span class="desc">${Handlebars.escapeExpression(description)}</span>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}
|
||||
});
|
||||
|
|
@ -1,50 +0,0 @@
|
|||
import DropdownButton from 'discourse/components/dropdown-button';
|
||||
import { allLevels, buttonDetails } from 'discourse/lib/notification-levels';
|
||||
import { iconHTML } from 'discourse-common/lib/icon-library';
|
||||
import computed from 'ember-addons/ember-computed-decorators';
|
||||
|
||||
export default DropdownButton.extend({
|
||||
classNames: ['notification-options'],
|
||||
title: '',
|
||||
buttonIncludesText: true,
|
||||
activeItem: Em.computed.alias('notificationLevel'),
|
||||
i18nPrefix: '',
|
||||
i18nPostfix: '',
|
||||
|
||||
@computed
|
||||
dropDownContent() {
|
||||
const prefix = this.get('i18nPrefix');
|
||||
const postfix = this.get('i18nPostfix');
|
||||
|
||||
return allLevels.map(l => {
|
||||
const start = `${prefix}.${l.key}${postfix}`;
|
||||
return {
|
||||
id: l.id,
|
||||
title: I18n.t(`${start}.title`),
|
||||
description: I18n.t(`${start}.description`),
|
||||
icon: l.icon,
|
||||
iconClass: l.key.dasherize(),
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
@computed('notificationLevel')
|
||||
text(notificationLevel) {
|
||||
const details = buttonDetails(notificationLevel);
|
||||
const { key } = details;
|
||||
const icon = iconHTML(details.icon, { class: key.dasherize() });
|
||||
|
||||
if (this.get('buttonIncludesText')) {
|
||||
const prefix = this.get('i18nPrefix');
|
||||
const postfix = this.get('i18nPostfix');
|
||||
const text = I18n.t(`${prefix}.${key}${postfix}.title`);
|
||||
return `${icon} ${text}<span class='caret'></span>`;
|
||||
} else {
|
||||
return `${icon} <span class='caret'></span>`;
|
||||
}
|
||||
},
|
||||
|
||||
clicked(id) {
|
||||
this.set("notificationLevel", id);
|
||||
}
|
||||
});
|
||||
|
|
@ -57,19 +57,22 @@ export default Ember.Component.extend({
|
|||
};
|
||||
},
|
||||
|
||||
@computed
|
||||
titleForRow: function() {
|
||||
return (rowComponent) => {
|
||||
return rowComponent.get(`content.${this.get("textKey")}`);
|
||||
};
|
||||
}.property(),
|
||||
},
|
||||
|
||||
@computed
|
||||
shouldHighlightRow: function() {
|
||||
return (rowComponent) => {
|
||||
const id = this._castInteger(rowComponent.get(`content.${this.get("idKey")}`));
|
||||
return id === this.get("value");
|
||||
};
|
||||
}.property(),
|
||||
},
|
||||
|
||||
@computed
|
||||
templateForRow: function() {
|
||||
return (rowComponent) => {
|
||||
let template = "";
|
||||
|
|
@ -83,7 +86,7 @@ export default Ember.Component.extend({
|
|||
|
||||
return template;
|
||||
};
|
||||
}.property(),
|
||||
},
|
||||
|
||||
applyDirection() {
|
||||
this.$().removeClass("is-above is-below is-left-aligned is-right-aligned");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import NotificationOptionsComponent from "discourse/components/notification-options";
|
||||
import { observes } from "ember-addons/ember-computed-decorators";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { iconHTML } from "discourse-common/lib/icon-library";
|
||||
|
||||
export default NotificationOptionsComponent.extend({
|
||||
classNames: ["tag-notification-options"],
|
||||
|
||||
i18nPrefix: "tagging.notifications",
|
||||
|
||||
@observes("value")
|
||||
_notificationLevelChanged() {
|
||||
this.sendAction("action", this.get("value"));
|
||||
},
|
||||
|
||||
@computed("value")
|
||||
icon() {
|
||||
return `${this._super()}${iconHTML("caret-down")}`.htmlSafe();
|
||||
},
|
||||
|
||||
generatedHeadertext: null
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
import NotificationsButton from 'discourse/components/notifications-button';
|
||||
|
||||
export default NotificationsButton.extend({
|
||||
classNames: ['notification-options', 'tag-notification-menu'],
|
||||
buttonIncludesText: false,
|
||||
i18nPrefix: 'tagging.notifications',
|
||||
|
||||
clicked(id) {
|
||||
this.sendAction('action', id);
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export default Ember.Component.extend({
|
||||
layoutName: "components/topic-notification-options-button",
|
||||
|
||||
classNames: ["topic-notification-options-button"],
|
||||
|
||||
showFullTitle: true,
|
||||
|
||||
appendReason: true,
|
||||
});
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
import NotificationOptionsComponent from "discourse/components/notification-options";
|
||||
import { observes, on } from "ember-addons/ember-computed-decorators";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { topicLevels, buttonDetails } from "discourse/lib/notification-levels";
|
||||
|
||||
export default NotificationOptionsComponent.extend({
|
||||
classNames: ["topic-notification-options"],
|
||||
|
||||
content: topicLevels,
|
||||
i18nPrefix: "topic.notifications",
|
||||
|
||||
@on("init")
|
||||
_setInitialNotificationLevel() {
|
||||
this.set("value", this.get("topic.details.notification_level"));
|
||||
},
|
||||
|
||||
@on("didInsertElement")
|
||||
_bindGlobalLevelChanged() {
|
||||
this.appEvents.on("topic-notifications-options:changed", (msg) => {
|
||||
if (msg.type === "notification") {
|
||||
if (this.get("topic.details.notification_level") !== msg.id) {
|
||||
this.get("topic.details").updateNotifications(msg.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@on("willDestroyElement")
|
||||
_unbindGlobalLevelChanged() {
|
||||
this.appEvents.off("topic-notifications-options:changed");
|
||||
},
|
||||
|
||||
@observes("value")
|
||||
_notificationLevelChanged() {
|
||||
this.appEvents.trigger("topic-notifications-options:changed", {type: "notification", id: this.get("value")});
|
||||
},
|
||||
|
||||
@observes("topic.details.notification_level")
|
||||
_content() {
|
||||
this.set("value", this.get("topic.details.notification_level"));
|
||||
},
|
||||
|
||||
@computed("topic.details.notification_level", "showFullTitle")
|
||||
generatedHeadertext(notificationLevel, showFullTitle) {
|
||||
if (showFullTitle) {
|
||||
const details = buttonDetails(notificationLevel);
|
||||
return I18n.t(`topic.notifications.${details.key}.title`);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
export default Ember.Component.extend({
|
||||
layoutName: "components/topic-notifications-button",
|
||||
|
||||
classNames: ['topic-notifications-button'],
|
||||
|
||||
appendReason: true,
|
||||
|
||||
showFullTitle: true
|
||||
});
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
import DropdownSelectBoxComponent from "discourse/components/dropdown-select-box";
|
||||
import { observes, on } from "ember-addons/ember-computed-decorators";
|
||||
import computed from "ember-addons/ember-computed-decorators";
|
||||
import { topicLevels, buttonDetails } from 'discourse/lib/notification-levels';
|
||||
import { iconHTML } from 'discourse-common/lib/icon-library';
|
||||
|
||||
export default DropdownSelectBoxComponent.extend({
|
||||
classNames: ["topic-notifications"],
|
||||
|
||||
content: topicLevels,
|
||||
|
||||
i18nPrefix: 'topic.notifications',
|
||||
i18nPostfix: '',
|
||||
|
||||
textKey: "key",
|
||||
showFullTitle: true,
|
||||
fullWidthOnMobile: true,
|
||||
|
||||
@on("init")
|
||||
_setInitialNotificationLevel() {
|
||||
this.set("value", this.get("topic.details.notification_level"));
|
||||
},
|
||||
|
||||
@on("didInsertElement")
|
||||
_bindGlobalLevelChanged() {
|
||||
this.appEvents.on("topic-notifications-button:changed", (msg) => {
|
||||
if (msg.type === "notification") {
|
||||
if (this.get("topic.details.notification_level") !== msg.id) {
|
||||
this.get("topic.details").updateNotifications(msg.id);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
@on("willDestroyElement")
|
||||
_unbindGlobalLevelChanged() {
|
||||
this.appEvents.off("topic-notifications-button:changed");
|
||||
},
|
||||
|
||||
@observes("value")
|
||||
_notificationLevelChanged() {
|
||||
this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: this.get("value")});
|
||||
},
|
||||
|
||||
@computed("topic.details.notification_level")
|
||||
icon(notificationLevel) {
|
||||
const details = buttonDetails(notificationLevel);
|
||||
return iconHTML(details.icon, {class: details.key}).htmlSafe();
|
||||
},
|
||||
|
||||
@observes("topic.details.notification_level")
|
||||
_content() {
|
||||
this.set("value", this.get("topic.details.notification_level"));
|
||||
},
|
||||
|
||||
@computed("topic.details.notification_level", "showFullTitle")
|
||||
generatedHeadertext(notificationLevel, showFullTitle) {
|
||||
if (showFullTitle) {
|
||||
const details = buttonDetails(notificationLevel);
|
||||
return I18n.t(`topic.notifications.${details.key}.title`);
|
||||
} else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
|
||||
templateForRow: function() {
|
||||
return (rowComponent) => {
|
||||
const content = rowComponent.get("content");
|
||||
const start = `${this.get('i18nPrefix')}.${content.key}${this.get('i18nPostfix')}`;
|
||||
const title = I18n.t(`${start}.title`);
|
||||
const description = I18n.t(`${start}.description`);
|
||||
|
||||
return `
|
||||
<div class="icons">
|
||||
<span class="selection-indicator"></span>
|
||||
${iconHTML(content.icon, { class: content.key })}
|
||||
</div>
|
||||
<div class="texts">
|
||||
<span class="title">${title}</span>
|
||||
<span class="desc">${description}</span>
|
||||
</div>
|
||||
`;
|
||||
};
|
||||
}.property()
|
||||
});
|
||||
|
|
@ -198,19 +198,19 @@ export default {
|
|||
},
|
||||
|
||||
setTrackingToMuted(event) {
|
||||
this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 0, event});
|
||||
this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 0, event});
|
||||
},
|
||||
|
||||
setTrackingToRegular(event) {
|
||||
this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 1, event});
|
||||
this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 1, event});
|
||||
},
|
||||
|
||||
setTrackingToTracking(event) {
|
||||
this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 2, event});
|
||||
this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 2, event});
|
||||
},
|
||||
|
||||
setTrackingToWatching(event) {
|
||||
this.appEvents.trigger('topic-notifications-button:changed', {type: 'notification', id: 3, event});
|
||||
this.appEvents.trigger('topic-notifications-options:changed', {type: 'notification', id: 3, event});
|
||||
},
|
||||
|
||||
sendToTopicListItemView(action) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<button class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}" aria-label="{{text}}" title="{{text}}">
|
||||
<button
|
||||
class="btn {{if text 'btn-icon-text' 'no-text btn-icon'}}"
|
||||
aria-label="{{text}}"
|
||||
type="button"
|
||||
title="{{text}}">
|
||||
|
||||
{{icon}}
|
||||
|
||||
{{#if text}}
|
||||
<span class="d-button-label">{{text}}</span>
|
||||
{{/if}}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@
|
|||
{{pinned-button topic=topic}}
|
||||
</div>
|
||||
|
||||
{{topic-notifications-button topic=topic}}
|
||||
{{topic-notification-options-button topic=topic}}
|
||||
|
||||
{{plugin-outlet name="after-topic-footer-buttons"
|
||||
args=(hash topic=topic)
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{topic-notifications topic=topic showFullTitle=showFullTitle}}
|
||||
{{topic-notification-options topic=topic showFullTitle=showFullTitle}}
|
||||
|
||||
{{#if appendReason}}
|
||||
<p class="reason">
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
{{navigation-bar navItems=navItems filterMode=filterMode category=category}}
|
||||
|
||||
{{#if currentUser}}
|
||||
{{category-notifications-button category=category}}
|
||||
{{category-notification-options category=category}}
|
||||
{{/if}}
|
||||
|
||||
{{create-topic-button
|
||||
|
|
@ -33,4 +33,3 @@
|
|||
{{plugin-outlet name="category-navigation" args=(hash category=category)}}
|
||||
</div>
|
||||
{{/d-section}}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@
|
|||
<div class="container">
|
||||
{{#if tagNotification}}
|
||||
{{#unless additionalTags}}
|
||||
{{tag-notifications-button action="changeTagNotification"
|
||||
notificationLevel=tagNotification.notification_level}}
|
||||
{{tag-notification-options action="changeTagNotification"
|
||||
value=tagNotification.notification_level}}
|
||||
{{/unless}}
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,6 @@
|
|||
{{i18n "topic.unsubscribe.change_notification_state"}}
|
||||
</p>
|
||||
|
||||
{{topic-notifications-button topic=model}}
|
||||
{{topic-notification-options-button topic=model}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if isGroup}}
|
||||
{{group-notifications-button group=group user=model}}
|
||||
{{group-notification-options group=group user=model}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -315,7 +315,7 @@ createWidget('timeline-footer-controls', {
|
|||
|
||||
if (currentUser) {
|
||||
controls.push(new ComponentConnector(this,
|
||||
'topic-notifications-button',
|
||||
'topic-notification-options-button',
|
||||
{
|
||||
topic,
|
||||
appendReason: false,
|
||||
|
|
|
|||
|
|
@ -14,6 +14,13 @@
|
|||
font: 1.071em/0.9 "FontAwesome";
|
||||
}
|
||||
}
|
||||
|
||||
.select-box {
|
||||
float: right;
|
||||
margin-top: 0;
|
||||
margin-left: 5px;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
html.anon .topic-list a.title:visited:not(.badge-notification) {color: $primary-medium; }
|
||||
|
|
@ -370,4 +377,3 @@ div.education {
|
|||
@extend .list-cell;
|
||||
border-bottom: 2px solid $primary-low;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -187,18 +187,6 @@ header .discourse-tag {color: $tag-color }
|
|||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.notification-options.tag-notification-menu {
|
||||
float: right;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.tag-notification-menu .dropdown-menu {
|
||||
right: 0;
|
||||
top: 30px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.tag-sort-options {
|
||||
margin-bottom: 20px;
|
||||
a {
|
||||
|
|
|
|||
|
|
@ -153,20 +153,11 @@
|
|||
|
||||
|
||||
.list-controls {
|
||||
.category-breadcrumb {
|
||||
a.badge-category, .dropdown-header {
|
||||
.category-breadcrumb {
|
||||
a.badge-category, .dropdown-header {
|
||||
display: inline-block;
|
||||
padding: 5px 8px;
|
||||
line-height: 20px;
|
||||
&.category-dropdown-button {
|
||||
margin-left: -4px;
|
||||
padding: 5px;
|
||||
width: 13px;
|
||||
|
||||
.d-icon-caret-right {
|
||||
margin-left: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.bar>.dropdown-header:not(.home):first-child {
|
||||
|
|
@ -190,8 +181,6 @@
|
|||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.category-dropdown-menu {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.category-notification-options.category-notification-options.is-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
.category-select-box {
|
||||
.category-select-box.category-select-box {
|
||||
.select-box-row {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
|
|
|
|||
|
|
@ -1,16 +1,71 @@
|
|||
.dropdown-select-box.dropdown-select-box {
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
min-width: auto;
|
||||
|
||||
&.is-expanded {
|
||||
z-index: 9999;
|
||||
|
||||
.collection,
|
||||
.select-box-collection,
|
||||
.select-box-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.select-box-body {
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
background-clip: padding-box;
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.select-box-row {
|
||||
margin: 0;
|
||||
padding: 5px 10px;
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
|
||||
.d-icon {
|
||||
font-size: 1.286em;
|
||||
align-self: center;
|
||||
margin-right: 0;
|
||||
opacity: 1;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));
|
||||
}
|
||||
}
|
||||
|
||||
.texts {
|
||||
line-height: 18px;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: 0.857em;
|
||||
font-weight: normal;
|
||||
color: dark-light-choose(scale-color($primary, $lightness: 50%), scale-color($secondary, $lightness: 40%));;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-highlighted {
|
||||
background: none;
|
||||
}
|
||||
|
|
@ -20,20 +75,29 @@
|
|||
}
|
||||
}
|
||||
|
||||
.select-box-collection {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dropdown-header {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
justify-content: flex-start;
|
||||
width: min-content;
|
||||
width: max-content;
|
||||
background: none;
|
||||
|
||||
.d-icon + .d-icon {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.notification-options.notification-options {
|
||||
.select-box-body {
|
||||
min-width: 550px;
|
||||
max-width: 550px;
|
||||
}
|
||||
|
||||
.select-box-row {
|
||||
&.is-highlighted .icons .selection-indicator {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.icons {
|
||||
align-self: flex-start;
|
||||
|
||||
.selection-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: $tertiary;
|
||||
visibility: hidden;
|
||||
border-radius: 12px;
|
||||
align-self: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
#topic-footer-buttons {
|
||||
.topic-notification-options-button {
|
||||
min-width: auto;
|
||||
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reason {
|
||||
line-height: 16px;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-notification-options-button .topic-notification-options {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.topic-notification-options-button {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
.topic-notification-options, .reason {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,98 +0,0 @@
|
|||
#topic-footer-buttons .topic-notifications {
|
||||
min-width: auto;
|
||||
.btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#topic-footer-buttons p.reason {
|
||||
line-height: 16px;
|
||||
margin: 0 0 0 5px;
|
||||
}
|
||||
|
||||
.topic-notifications-button {
|
||||
display: inline-flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
margin: 5px 0;
|
||||
|
||||
.topic-notifications, .reason {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-notifications.topic-notifications {
|
||||
display: inline-flex;
|
||||
height: 30px;
|
||||
|
||||
&.is-expanded .collection, &.is-expanded .select-box-collection, &.is-expanded .select-box-body {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.select-box-collection {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select-box-body {
|
||||
background-clip: padding-box;
|
||||
border: 1px solid dark-light-diff($primary, $secondary, 90%, -60%);
|
||||
box-shadow: 0 1px 5px rgba(0,0,0,0.4);
|
||||
width: 550px;
|
||||
}
|
||||
|
||||
.select-box-row {
|
||||
&.is-highlighted .icons .selection-indicator {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.icons {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-self: flex-start;
|
||||
margin-right: 10px;
|
||||
|
||||
.selection-indicator {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: $tertiary;
|
||||
visibility: hidden;
|
||||
border-radius: 12px;
|
||||
align-self: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
font-size: 1.286em;
|
||||
align-self: flex-start;
|
||||
margin-right: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.texts {
|
||||
line-height: 18px;
|
||||
flex: 1;
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
font-size: 1em;
|
||||
color: $primary;
|
||||
}
|
||||
|
||||
.desc {
|
||||
flex: 1;
|
||||
font-size: 0.857em;
|
||||
font-weight: normal;
|
||||
color: #919191;
|
||||
white-space: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -197,10 +197,6 @@
|
|||
button:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.topic-notifications {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.start-date {
|
||||
|
|
|
|||
|
|
@ -278,7 +278,7 @@ button.dismiss-read {
|
|||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.category-notification-menu, .tags-admin-menu {
|
||||
.tags-admin-menu {
|
||||
.dropdown-menu {
|
||||
right: 0;
|
||||
top: 30px;
|
||||
|
|
|
|||
|
|
@ -8,11 +8,6 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-notification-menu {
|
||||
float: right;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.profile-image {
|
||||
|
|
@ -263,13 +258,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.group-notification-menu .dropdown-menu {
|
||||
top: 30px;
|
||||
bottom: auto;
|
||||
left: auto;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.viewing-self & .about.collapsed-info {
|
||||
.secondary, .staff-counters {
|
||||
display: inherit;
|
||||
|
|
|
|||
|
|
@ -314,12 +314,6 @@ tr.category-topic-link {
|
|||
// Misc. stuff
|
||||
// --------------------------------------------------
|
||||
|
||||
.list-controls {
|
||||
.category-dropdown-button {
|
||||
padding: 4px 10px 4px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group .dropdown-toggle:active,
|
||||
.btn-group.open .dropdown-toggle {
|
||||
outline: 0;
|
||||
|
|
@ -407,7 +401,7 @@ ol.category-breadcrumb {
|
|||
.btn-default.pull-right { margin-right: 10px; }
|
||||
}
|
||||
|
||||
.category-notification-menu, .tags-admin-menu {
|
||||
.tags-admin-menu {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ acceptance("Topic Notifications button", {
|
|||
QUnit.test("Updating topic notification level", assert => {
|
||||
visit("/t/internationalization-localization/280");
|
||||
|
||||
const notificationOptions = "#topic-footer-buttons .topic-notifications";
|
||||
const notificationOptions = "#topic-footer-buttons .topic-notification-options";
|
||||
|
||||
andThen(() => {
|
||||
assert.ok(
|
||||
Loading…
Reference in New Issue