Bug 961950 - Replace message edit button with option menu contains de…

…lete / settings option
steveck-chung · Feb 17, 2014 · 4b70e8c · 4b70e8c
1 parent 2a68279
commit 4b70e8c
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 19 deletions.
diff --git a/apps/sms/index.html b/apps/sms/index.html
@@ -76,8 +76,8 @@
             <a href="#new" id="icon-add">
               <span class="icon icon-compose"></span>
             </a>
-            <a id="threads-edit-icon">
-              <span class="icon icon-edit"></span>
+            <a id="threads-options-icon">
+              <span class="icon icon-options"></span>
             </a>
           </menu>
           <h1 data-l10n-id="messages">Messages</h1>

diff --git a/apps/sms/js/thread_list_ui.js b/apps/sms/js/thread_list_ui.js
@@ -3,7 +3,8 @@
 
 /*global Template, Utils, Threads, Contacts, URL, Threads,
          WaitingScreen, MozSmsFilter, MessageManager, TimeHeaders,
-         Drafts, Thread, ThreadUI */
+         Drafts, Thread, ThreadUI, OptionMenu, ActivityPicker */
+
 /*exported ThreadListUI */
 (function(exports) {
 'use strict';
@@ -35,7 +36,7 @@ var ThreadListUI = {
       'container', 'no-messages',
       'check-all-button', 'uncheck-all-button',
       'delete-button', 'cancel-button',
-      'edit-icon', 'edit-mode', 'edit-form', 'draft-saved-banner'
+      'options-icon', 'edit-mode', 'edit-form', 'draft-saved-banner'
     ].forEach(function(id) {
       this[Utils.camelCase(id)] = document.getElementById('threads-' + id);
     }, this);
@@ -60,8 +61,8 @@ var ThreadListUI = {
       'click', this.cancelEdit.bind(this)
     );
 
-    this.editIcon.addEventListener(
-      'click', this.startEdit.bind(this)
+    this.optionsIcon.addEventListener(
+      'click', this.showOptions.bind(this)
     );
 
     this.container.addEventListener(
@@ -336,7 +337,30 @@ var ThreadListUI = {
 
     ThreadListUI.noMessages.classList[removeWhenEmpty]('hide');
     ThreadListUI.container.classList[addWhenEmpty]('hide');
-    ThreadListUI.editIcon.classList[addWhenEmpty]('disabled');
+  },
+
+  showOptions: function thlui_options() {
+    var params = {
+      items: [{
+        l10nId: 'settings',
+        method: function oSettings() {
+          ActivityPicker.openSettings();
+        }
+      },{ // Last item is the Cancel button
+        l10nId: 'cancel',
+        incomplete: true
+      }]
+    };
+
+    // Add delete option when list is not empty 
+    if (ThreadListUI.noMessages.classList.contains('hide')) {
+      params.items.unshift({
+        l10nId: 'deleteMessages-label',
+        method: this.startEdit.bind(this)
+      });
+    }
+
+    new OptionMenu(params).show();
   },
 
   startEdit: function thlui_edit() {

diff --git a/apps/sms/test/unit/mock_thread_list_ui.js b/apps/sms/test/unit/mock_thread_list_ui.js
@@ -18,6 +18,7 @@ var MockThreadListUI = {
   removeThread: function() {},
   delete: function() {},
   setEmpty: function() {},
+  showOptions: function() {},
   startEdit: function() {},
   cancelEdit: function() {},
   renderThreads: function() {},

diff --git a/apps/sms/test/unit/thread_list_ui_test.js b/apps/sms/test/unit/thread_list_ui_test.js
@@ -1,6 +1,7 @@
 /*global mocha, MocksHelper, loadBodyHTML, MockL10n, ThreadListUI,
          MessageManager, WaitingScreen, Threads, Template, MockMessages,
-         MockThreadList, MockTimeHeaders, Draft, Drafts, Thread, ThreadUI
+         MockThreadList, MockTimeHeaders, Draft, Drafts, Thread, ThreadUI,
+         MockOptionMenu
          */
 
 'use strict';
@@ -27,6 +28,7 @@ require('/shared/test/unit/mocks/mock_contact_photo_helper.js');
 require('/test/unit/thread_list_mockup.js');
 require('/test/unit/utils_mockup.js');
 requireApp('sms/test/unit/mock_thread_ui.js');
+requireApp('sms/test/unit/mock_action_menu.js');
 
 var mocksHelperForThreadListUI = new MocksHelper([
   'asyncStorage',
@@ -36,7 +38,8 @@ var mocksHelperForThreadListUI = new MocksHelper([
   'WaitingScreen',
   'TimeHeaders',
   'ThreadUI',
-  'ContactPhotoHelper'
+  'ContactPhotoHelper',
+  'OptionMenu'
 ]).init();
 
 suite('thread_list_ui', function() {
@@ -102,7 +105,6 @@ suite('thread_list_ui', function() {
         // set wrong states
         ThreadListUI.noMessages.classList.add('hide');
         ThreadListUI.container.classList.remove('hide');
-        ThreadListUI.editIcon.classList.remove('disabled');
         // make sure it sets em all
         ThreadListUI.setEmpty(true);
       });
@@ -112,16 +114,12 @@ suite('thread_list_ui', function() {
       test('adds container hide', function() {
         assert.isTrue(ThreadListUI.container.classList.contains('hide'));
       });
-      test('adds editIcon disabled', function() {
-        assert.isTrue(ThreadListUI.editIcon.classList.contains('disabled'));
-      });
     });
     suite('(false)', function() {
       setup(function() {
         // set wrong states
         ThreadListUI.noMessages.classList.remove('hide');
         ThreadListUI.container.classList.add('hide');
-        ThreadListUI.editIcon.classList.add('disabled');
         // make sure it sets em all
         ThreadListUI.setEmpty(false);
       });
@@ -131,9 +129,36 @@ suite('thread_list_ui', function() {
       test('removes container hide', function() {
         assert.isFalse(ThreadListUI.container.classList.contains('hide'));
       });
-      test('removes editIcon disabled', function() {
-        assert.isFalse(ThreadListUI.editIcon.classList.contains('disabled'));
-      });
+    });
+  });
+
+  suite('showOptions', function() {
+    setup(function() {
+      MockOptionMenu.mSetup();
+    });
+    teardown(function() {
+      MockOptionMenu.mTeardown();
+    });
+
+    test('show settings/cancel options when list is empty', function() {
+      ThreadListUI.setEmpty(true);
+      ThreadListUI.showOptions();
+
+      var optionItems = MockOptionMenu.calls[0].items;
+      assert.equal(optionItems.length, 2);
+      assert.equal(optionItems[0].l10nId, 'settings');
+      assert.equal(optionItems[1].l10nId, 'cancel');
+    });
+
+    test('show delete/settings/cancel options when list existed', function() {
+      ThreadListUI.setEmpty(false);
+      ThreadListUI.showOptions();
+
+      var optionItems = MockOptionMenu.calls[0].items;
+      assert.equal(optionItems.length, 3);
+      assert.equal(optionItems[0].l10nId, 'deleteMessages-label');
+      assert.equal(optionItems[1].l10nId, 'settings');
+      assert.equal(optionItems[2].l10nId, 'cancel');
     });
   });
 
@@ -757,7 +782,6 @@ suite('thread_list_ui', function() {
           sinon.assert.calledWith(ThreadListUI.finalizeRendering, true);
           assert.isFalse(ThreadListUI.noMessages.classList.contains('hide'));
           assert.isTrue(ThreadListUI.container.classList.contains('hide'));
-          assert.isTrue(ThreadListUI.editIcon.classList.contains('disabled'));
         });
       });
     });
@@ -794,7 +818,6 @@ suite('thread_list_ui', function() {
           sinon.assert.calledWith(ThreadListUI.finalizeRendering, false);
           assert.isTrue(ThreadListUI.noMessages.classList.contains('hide'));
           assert.isFalse(ThreadListUI.container.classList.contains('hide'));
-          assert.isFalse(ThreadListUI.editIcon.classList.contains('disabled'));
 
           var mmsThreads = container.querySelectorAll(
             '[data-last-message-type="mms"]'