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) {