Added unblocking.

Added styling.

Trigger changes on both conversation and messages when we block/unblock.

js/blocked_number_controller.js

@@ -1,4 +1,4 @@
-/* global , Whisper, storage */
+/* global , Whisper, storage, ConversationController */
 /* global textsecure: false */
 
 /* eslint-disable more/no-then */
@@ -83,4 +83,3 @@
       },
     };
   })();
-  

js/models/conversations.js

@@ -153,10 +153,12 @@
     block() {
       BlockedNumberController.block(this.id);
       this.trigger('change');
+      this.messageCollection.forEach(m => m.trigger('change'));
     },
     unblock() {
       BlockedNumberController.unblock(this.id);
       this.trigger('change');
+      this.messageCollection.forEach(m => m.trigger('change'));
     },
     async cleanup() {
       await window.Signal.Types.Conversation.deleteExternalFiles(

js/views/blocked_number_view.js

@@ -25,7 +25,7 @@
           });
 
           this.listView.render();
-          this.$('.content').append(this.listView.el);
+          this.$('.blocked-user-settings').append(this.listView.el);
         });
       },
       render_attributes() {
@@ -37,12 +37,11 @@
 
 
   Whisper.BlockedNumberListView = Whisper.ListView.extend({
-    tagName: 'div',
     itemView: Whisper.View.extend({
-      tagName: 'div',
+      tagName: 'li',
       templateName: 'blockedNumber',
-      initialize() {
-        this.listenTo(this.model, 'change', this.render);
+      events: {
+        'click .unblock-button': 'onUnblock',
       },
       render_attributes() {
         const number = (this.model && this.model.get('number')) || '-';
@@ -50,7 +49,16 @@
           number,
         }
       },
+      onUnblock() {
+        const number = this.model && this.model.get('number');
+        if (!number) return;
+
+        if (BlockedNumberController.isBlocked(number)) {
+          BlockedNumberController.unblock(number);
+          window.onUnblockNumber(number);
+          this.remove();
+        }
+      },
     }),
   });
   })();
-  

main.js

@@ -930,6 +930,12 @@ ipc.on('set-media-permissions', (event, value) => {
   event.sender.send('set-success-media-permissions', null);
 });
 
+ipc.on('on-unblock-number', (event, number) => {
+  if (mainWindow && mainWindow.webContents) {
+    mainWindow.webContents.send('on-unblock-number', number);
+  }
+});
+
 installSettingsGetter('is-primary');
 installSettingsGetter('sync-request');
 installSettingsGetter('sync-time');

preload.js

@@ -77,6 +77,21 @@ window.setMediaPermissions = enabled =>
   ipc.send('set-media-permissions', enabled);
 window.getMediaPermissions = () => ipc.sendSync('get-media-permissions');
 
+// Events for updating block number states across different windows
+// In this case we need these to update the blocked number collection on the main window from the settings window
+window.onUnblockNumber = number => ipc.send('on-unblock-number', number);
+
+ipc.on('on-unblock-number', (event, number) => {
+  if (window.ConversationController) {
+    try {
+      const conversation = window.ConversationController.get(number);
+      conversation.unblock();
+    } catch (e) {
+      window.log.info('IPC on unblock: failed to fetch conversation for number: ', number);
+    }
+  }
+});
+
 window.closeAbout = () => ipc.send('close-about');
 
 window.updateTrayIcon = unreadCount =>

settings.html

@@ -35,12 +35,14 @@
     </div>
 </script>
 <script type='text/x-tmpl-mustache' id='blockedNumber'>
-  <div>{{ number }}</div>
+  <div class='blocked-number'>
+    <div class='wordwrap'>{{ number }}</div>
+    <button class='grey unblock-button'>Unblock</button>
   </div>
 </script>
 <script type='text/x-tmpl-mustache' id='blockedUserSettings'>
   <h3>{{ blockedHeader }}</h3>
-  <div class='content'>
+  <div class='blocked-user-settings'>
   </div>
 </script>
 <script type='text/x-tmpl-mustache' id='settings'>

settings_preload.js

@@ -26,6 +26,10 @@ window.getAppInstance = () => config.appInstance;
 
 window.closeSettings = () => ipcRenderer.send('close-settings');
 
+// Events for updating block number states across different windows
+// In this case we need these to update the blocked number collection on the main window from the settings window
+window.onUnblockNumber = number => ipcRenderer.send('on-unblock-number', number);
+
 window.getDeviceName = makeGetter('device-name');
 
 window.getThemeSetting = makeGetter('theme-setting');

stylesheets/_settings.scss

@@ -38,6 +38,41 @@
       color: red;
     }
   }
+
+  .blocked-number {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  .blocked-number {
+    div {
+      flex: 1;
+      flex-wrap: wrap-reverse;
+      word-break: break-all;
+    }
+    button {
+      line-height: 36px;
+      padding: 0 20px;
+      margin: 0 0 20px 20px;
+    }
+  }
+
+  .blocked-user-settings ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .wordwrap {
+    white-space: pre-wrap;      /* CSS3 */
+    white-space: -moz-pre-wrap; /* Firefox */
+    white-space: -pre-wrap;     /* Opera <7 */
+    white-space: -o-pre-wrap;   /* Opera 7 */
+    word-wrap: break-word;      /* IE */
+ }
+
   .restart-needed {
     margin-top: 1em;
   }