Replaces all notification-options like dropdowns with select-box

2017-09-08 20:47:39 +02:00
parent f13776e550
commit cf6fb7622e
40 changed files with 396 additions and 388 deletions
@@ -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}&nbsp;${text}<span class='caret'></span>`;
-    } else {
-      return `${icon}&nbsp;<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,