src/app/modules/messenger/conversation/conversation.component.html

-<div class="m-messenger--conversation m-messenger--dockpane mdl-shadow--4dp" [class.m-messenger--dockpane-open]="conversation.open">
+<div class="m-messenger--conversation m-messenger--dockpane" [class.m-messenger--dockpane-open]="conversation.open">
  <div class="m-messenger--dockpane-tab"
  [class.mdl-color--amber]="conversation.unread"
- (click)="dockpanes.toggle(conversation); initialLoad()">
+ (click)="toggle(); initialLoad()">
  <div class="m-messenger--dockpane-tab-title">
  <span *ngFor="let participant of conversation.participants">{{participant.username}}</span>
  </div>
  <div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
  <i class="material-icons mdl-color-text--blue-grey-100" [hidden]="live">sync_problem</i>
  <i class="material-icons"
- (click)="ribbon.open = !ribbon.open"
- [ngClass]="{ 'm-status-active': ribbon.open }"
- >more_vert</i>
+ (click)="ribbonToggle()"
+ >more_vert</i>
  <i class="material-icons" (click)="dockpanes.close(conversation)">close</i>
  </div>
  </div>
 
- <div class="m-messenger--dockpane-container mdl-shadow--2dp">
- <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbon.open">
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbon.open = false" *ngIf="showMessages">
+ <div class="m-messenger--dockpane-container">
+ <div class="m-messenger--dockpane-tab-ribbon" #ribbon [hidden]="!ribbonOpened">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="deleteHistory(); ribbonOpened = false">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Delete chat history" i18n-title="@@MESSENGER__CONVERSATION__DELETE_TOOLTIP">delete</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__DESTROY">Destroy</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="!blocked">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="!blocked">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Block participants" i18n-title="@@MESSENGER__CONVERSATION__BLOCK_TOOLTIP">block</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__BLOCK">Block</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbon.open = false" *ngIf="blocked">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="block(); ribbonOpened = false" *ngIf="blocked">
  <i class="material-icons mdl-color-text--blue-grey-100" title="Un-block chat" i18n-title="@@MESSENGER__CONVERSATION__UNBLOCK_TOOLTIP">restore</i>
  <ng-container i18n="@@MESSENGER__CONVERSATION__UNBLOCK">Un-block</ng-container>
  </div>

src/app/modules/messenger/conversation/conversation.component.scss

 @import 'defaults.scss';
 
 .m-messenger--conversation{
+ border-radius: 3px 3px 0 0;
+ @include m-theme(){
+ box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+ }
 
  .m-messenger--conversation-messages{
  max-height:240px;
@@ -83,6 +87,15 @@
  margin-bottom: $minds-padding * 2;
  line-height: 1.35;
  }
+
+ button:not([disabled]) {
+ &:hover {
+ @include m-theme(){
+ background-color: themed($m-blue-grey-700);
+ }
+ }
+
+ }
  }
  }
  .m-messenger--conversation-composer{

src/app/modules/messenger/conversation/conversation.component.ts

@@ -64,6 +64,8 @@ export class MessengerConversation {
  invitable: any[] | null = null;
  invited: boolean = false;
 
+ ribbonOpened: boolean = false;
+
  constructor(
  public session: Session,
  public client: Client,
@@ -360,8 +362,22 @@ export class MessengerConversation {
  has = true;
  }
  });
-
  return has;
  }
 
+ // Open the conversation with the ribbon
+ ribbonToggle() {
+ if (!this.ribbonOpened && !this.conversation.open) {
+ this.dockpanes.open(this.conversation);
+ }
+ this.ribbonOpened = !this.ribbonOpened;
+ }
+
+ // Close the ribbon with the conversation
+ toggle() {
+ if (this.ribbonOpened) {
+ this.ribbonOpened = false;
+ }
+ this.dockpanes.toggle(this.conversation);
+ }
 }

src/app/modules/messenger/dockpanes/dockpanes.component.scss

@@ -37,7 +37,6 @@
  @include m-theme(){
  background-color: themed($m-white);
  color: themed($m-grey-800);
- border: 1px solid themed($m-grey-50);
  }
 
  .m-messenger--dockpane-tab-title{
@@ -63,7 +62,6 @@
  }
 
  .m-messenger--dockpane-tab-actions{
- display: inline-block;
  text-align: right;
  vertical-align: middle;
  float: right;
@@ -75,10 +73,9 @@
  line-height: 12px;
  border-radius: 0 3px 0 0;
 
- &:hover,
- &.m-status-active{
+ &:hover{
  @include m-theme(){
- color: themed($m-blue-grey-700) !important;
+ color: themed($m-grey-500) !important;
  }
  }
  }
@@ -121,6 +118,17 @@
  padding-bottom: 8px;
  cursor: pointer;
 
+ &:hover{
+ @include m-theme(){
+ color: themed($m-blue-grey-500) !important;
+ }
+ > i {
+ @include m-theme(){
+ color: themed($m-blue-grey-500) !important;
+ }
+ }
+ }
+
  > i{
  width: 100%;
  font-size: 16px;
@@ -128,12 +136,6 @@
  line-height: 12px;
  border-radius: 0 3px 0 0;
  cursor: pointer;
-
- &:hover{
- @include m-theme(){
- color: themed($m-blue-grey-700) !important;
- }
- }
  }
  }
  }

src/app/modules/messenger/encryption/encryption.component.scss

@@ -23,13 +23,13 @@
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
- padding: $minds-padding;
+ padding: 8px 12px;
  }
  .m-messenger--encryption-setup-help {
  font-size: 11px;
  line-height: 1.35;
  margin: 0;
- padding: $minds-padding;
+ padding: 8px 12px;
  @include m-theme(){
  color: themed($m-blue-grey-700);
  }

src/app/modules/messenger/userlist/userlist.component.html

@@ -4,32 +4,30 @@
  <div class="m-messenger--dockpane-tab-title"><i class="material-icons">chat_bubble</i><span i18n="@@MESSENGER__USERLIST__MESSENGER_TITLE">Messenger</span></div>
  <div class="m-messenger--dockpane-tab-actions" (click)="$event.stopPropagation()">
  <i class="material-icons"
- (click)="ribbonToggle()"
- [ngClass]="{ 'm-status-active': opened_ribbon }">
+ (click)="ribbonToggle()">
  settings
  </i>
  </div>
  </div>
  <div class="m-messenger--dockpane-container">
-
- <div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!opened_ribbon">
- <div class="m-messenger--dockpane-tab-icon" (click)="logout(); opened_ribbon = false" [hidden]="!encryption.isOn()">
+ <div class="m-messenger--dockpane-tab-ribbon mdl-color-text--blue-grey-300" #ribbon [hidden]="!ribbonOpened">
+ <div class="m-messenger--dockpane-tab-icon" (click)="logout(); ribbonOpened = false" [hidden]="!encryption.isOn()">
  <i class="material-icons mdl-color-text--blue-grey-100"
  title="Logout of chat" i18n-title="@@MESSENGER__USERLIST__LOGOUT_TOOLTIP"
  >exit_to_app</i>
  <ng-container i18n="@@MESSENGER__USERLIST__LOGOUT">Logout</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); opened_ribbon = false" [hidden]="!sounds.canPlay()">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.mute(); ribbonOpened = false" [hidden]="!sounds.canPlay()">
  <i class="material-icons mdl-color-text--blue-grey-100"
  title="Disable sounds" i18n-title="@@MESSENGER__USERLIST__DISABLE_SOUNDS_TOOLTIP">notifications</i>
  <ng-container i18n="@@MESSENGER__USERLIST__MUTE">Mute</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); opened_ribbon = false" [hidden]="sounds.canPlay()">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="sounds.unmute(); ribbonOpened = false" [hidden]="sounds.canPlay()">
  <i class="material-icons mdl-color-text--blue-grey-100"
  title="Enable sounds" i18n-title="@@MESSENGER__USERLIST__ENABLE_SOUNDS_TOOLTIP">notifications_off</i>
  <ng-container i18n="@@MESSENGER__USERLIST__UNMUTE">Unmute</ng-container>
  </div>
- <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; opened_ribbon = false">
+ <div class="m-messenger--dockpane-tab-icon mdl-color-text--blue-grey-300" (click)="encryption.reKeying = !encryption.reKeying; ribbonOpened = false">
  <i class="material-icons mdl-color-text--blue-grey-100"
  title="Change your encryption password" i18n-title="@@MESSENGER__USERLIST__CHANGE_PWD_TOOLTIP">vpn_key</i>
  <ng-container i18n="@@MESSENGER__USERLIST__REKEY">Re-key</ng-container>
@@ -53,11 +51,9 @@
  <div [hidden]="!inProgress" style="width:100%; text-align:center; ">
  <div class="mdl-spinner mdl-js-spinner is-active" [mdl] style="margin: 16px auto;"></div>
  </div>
-
-
  </div>
 
- <div class="m-messenger--userlist-search" [hidden]="opened_ribbon">
+ <div class="m-messenger--userlist-search" [hidden]="ribbonOpened">
  <i class="material-icons">search</i>
  <input type="text" placeholder="Search" i18n-placeholder="@@MESSENGER__USERLIST__SEARCH_PH" #q (keyup)="search(q);">
  </div>

src/app/modules/messenger/userlist/userlist.component.scss

@@ -3,6 +3,10 @@
 #{if(&, "&", "*")}.m-messenger--userlist{
 
  width:200px;
+ border-radius: 3px 3px 0 0;
+ @include m-theme(){
+ box-shadow: 0 2px 4px 0 rgba(themed($m-black), .15), 0 1px 0px -2px rgba(themed($m-black), .15), 0 1px 5px 0 rgba(themed($m-black), .15);
+ }
 
  .m-messenger--userlist-search{
  height: 30px;
@@ -42,6 +46,12 @@
  display: flex;
  align-items: center;
 
+ &:hover {
+ @include m-theme(){
+ background-color: rgba(themed($m-blue-grey-50), 0.5);
+ }
+ }
+
  img{
  width: 24px;
  margin: 8px;

src/app/modules/messenger/userlist/userlist.component.ts

@@ -28,7 +28,7 @@ export class MessengerUserlist {
  hasMoreData: boolean = true;
  inProgress: boolean = false;
  cb: number = Date.now();
- opened_ribbon: boolean = false;
+
  minds: Minds = window.Minds;
  storage: Storage = new Storage();
 
@@ -37,7 +37,8 @@ export class MessengerUserlist {
  };
 
  userListToggle: boolean = false;
-
+ ribbonOpened: boolean = false;
+ 
  search_timeout;
 
  constructor(
@@ -170,14 +171,19 @@ export class MessengerUserlist {
  }
  }
 
+ // Open the userlist with the ribbon
  ribbonToggle() {
- if (!this.userListToggle) {
+ if (!this.ribbonOpened && !this.userListToggle) {
  this.userListToggle = true;
  }
- this.opened_ribbon = !this.opened_ribbon;
+ this.ribbonOpened = !this.ribbonOpened;
  }
 
+ // Close the ribbon with the userlist
  toggle() {
+ if (this.ribbonOpened) {
+ this.ribbonOpened = false;
+ }
  this.userListToggle = !this.userListToggle;
  if (this.userListToggle)
  this.load({ refresh: true });