better indication of write-only topics

css/base.css

@@ -825,6 +825,10 @@ table.permission-editor td.checkbox {
 /* END of sidepanel styles */
 
 /* Topic/messages view */
+#topic-view {
+  position: relative;
+}
+
 #topic-caption-panel {
   background-color: #b0bec5;
 }
@@ -837,7 +841,6 @@ table.permission-editor td.checkbox {
   color: black;
 }
 
-
 #topic-caption-panel .avatar-box {
   position: relative;
   width: 3rem;
@@ -859,6 +862,7 @@ table.permission-editor td.checkbox {
 
 /* Scrollable panel where the messages are shown */
 #messages-panel {
+  position: relative;
   padding: 0.75rem;
   overflow-y: scroll;
   background-color: #eceff1;
@@ -866,6 +870,31 @@ table.permission-editor td.checkbox {
   background-image: url("../img/ignasi_pattern_s.png");
 }
 
+#messages-panel.write-only::after {
+  content: "";
+  display: block;
+  position: absolute;
+  top:0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-image: repeating-linear-gradient(45deg,
+    transparent, transparent 0.5rem, rgba(255,255,255,.5) 0.5rem, rgba(255,255,255,.5) 1rem);
+}
+
+#write-only-note {
+  position: absolute;
+  background-color: white;
+  color: #666;
+  height: auto;
+  width: auto;
+  line-height: 2rem;
+  text-align: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 0.25rem 1.5rem;
+}
 /* Footer-panel with the input for the new message */
 #send-message-panel {
   display: flex;

drafty.js

@@ -116,19 +116,16 @@ Sample JSON representation of the text above:
   };
 
   // Convert base64-encoded string into Blob.
-  function base64toBlob(b64Data, contentType) {
+  function base64toBlob (b64, contentType) {
-    var SLICE_SIZE = 1024;
+    var bin = atob(b64);
-    var byteChars = atob(b64Data);
+    var length = bin.length;
-    var chunks = [];
+    var buf = new ArrayBuffer(length);
-    for (var offset = 0; offset < byteChars.length; offset += SLICE_SIZE) {
+    var arr = new Uint8Array(buf);
-      var slice = byteChars.slice(offset, offset + SLICE_SIZE);
+    for (var i = 0; i < length; i++) {
-      var byteNumbers = new Array(slice.length);
+      arr[i] = bin.charCodeAt(i);
-      for (var i = 0; i < slice.length; i++) {
-        byteNumbers[i] = slice.charCodeAt(i);
-      }
-      chunks.push(new Uint8Array(byteNumbers));
     }
-    return new Blob(chunks, {type: contentType});
+
+    return new Blob([buf], {type: contentType});
   }
 
   var Drafty = (function() {

index.html

@@ -2370,6 +2370,8 @@
           title: '',
           avatar: null,
           scrollPosition: 0,
+          readOnly: false,
+          writeOnly: false,
           typingIndicator: false
         };
       },
@@ -2507,6 +2509,13 @@
             avatar: makeImageUrl(desc.public.photo)
           });
         }
+        var acs = desc.getAccessMode();
+        if (acs) {
+          this.setState({
+            readOnly: !acs.isWriter(),
+            writeOnly: !acs.isReader()
+          });
+        }
       },
 
       handleSubsUpdated: function(uids) {
@@ -2636,6 +2645,7 @@
           }
           var avatar = this.state.avatar || true;
           var online = cont && cont.online ? "online" + (this.state.typingIndicator ? " typing" : "") : "offline";
+
           component = (
             <div id="topic-view" className={this.props.hideSelf ? 'nodisplay' : null}>
               <div id="topic-caption-panel" className="caption-panel">
@@ -2666,11 +2676,16 @@
                   level={this.props.errorLevel}
                   text={this.props.errorText} /> : null}
               <LoadSpinner show={this.state.fetchingMessages} />
-              <div id="messages-panel" ref={this.handleScrollReference}>
+              <div id="messages-panel"
+                className={this.state.writeOnly ? "write-only" : null}
+                ref={this.handleScrollReference}>
                 <ul id="scroller" className={chatBoxClass}>
                   {messageNodes}
                 </ul>
               </div>
+              {this.state.writeOnly ?
+                <div id="write-only-note">no access to messages</div>
+                : null}
               <MessagesView.Send topic={this.props.topic} sendMessage={this.props.sendMessage} />
             </div>
           );