src/app/modules/channels/sidebar/sidebar.html

@@ -5,14 +5,31 @@
     (added)="upload_avatar($event)"
   ></minds-avatar>
   <div class="m-channel--name">
-    <h2>{{user.name}}</h2>
+    <h2 [hidden]="editing">{{user.name}}</h2>
+    <div
+      class="minds-editable-container mdl-card__supporting-text m-channel--name--editor"
+      *ngIf="editing && isOwner()"
+    >
+      <input
+        [autoGrow]
+        class="mdl-textfield__input"
+        type="text"
+        name="briefdescription"
+        [(ngModel)]="user.name"
+      />
+    </div>
     <span
       class="minds-button-edit"
       (click)="toggleEditing()"
       *ngIf="session.getLoggedInUser().guid == user.guid"
     >
       <button class="material-icons" [hidden]="editing">edit</button>
-      <button class="material-icons" [hidden]="!editing">done</button>
+      <button
+        class="material-icons m-channel-button-edit--done"
+        [hidden]="!editing"
+      >
+        done
+      </button>
     </span>
     <minds-button-user-dropdown
       [(user)]="user"

src/app/modules/channels/sidebar/sidebar.scss

@@ -4,6 +4,30 @@
   border: 0 !important;
 }
 
+.m-channel--name--editor {
+  max-width: 88%;
+}
+
+.m-channel-button-edit--done {
+  position: relative;
+  right: 8px;
+  bottom: 8px;
+}
+
+.m-channel--name > div > input {
+  margin: 0;
+  font-size: 28px;
+  font-weight: 800;
+  letter-spacing: 0.25px;
+  line-height: 32px;
+  text-rendering: optimizeLegibilty;
+  -webkit-font-smoothing: antialiased;
+  text-align: center;
+  @include m-theme() {
+    border: 1px solid themed($m-grey-100);
+  }
+}
+
 .m-channel-bio-field {
   div > i {
     vertical-align: middle;

src/app/modules/channels/sidebar/sidebar.ts

@@ -87,6 +87,7 @@ export class ChannelSidebar {
     }
 
     this.changeEditing.next(!this.editing);
+    this.minds.user.name = this.user.name; //no need to refresh for other pages to update.
   }
 
   upload_avatar(file) {