chat: sidebar open by default (fixes #7366) (#7368)

Co-authored-by: dogi <[email protected]>

package.json

@@ -1,10 +1,10 @@
 {
  "name": "planet",
  "license": "AGPL-3.0",
- "version": "0.13.94",
+ "version": "0.13.95",
  "myplanet": {
- "latest": "v0.12.11",
- "min": "v0.11.50"
+ "latest": "v0.12.20",
+ "min": "v0.11.60"
  },
  "scripts": {
  "ng": "ng",

src/app/chat/chat-sidebar/chat-sidebar.component.html

@@ -1,8 +1,8 @@
 <mat-drawer-container class="sidebar-drawer" autosize>
- <mat-drawer #drawer mode="side">
+ <mat-drawer #drawer mode="side" [opened]="deviceType !== deviceTypes.MOBILE">
  <div class="header-container">
  <div class="header" i18n>
- <button type="button" mat-stroked-button color="primary" class="start-button" mat-button (click)="newChat()">
+ <button type="button" mat-raised-button color="primary" mat-button (click)="newChat()">
  <mat-icon>add</mat-icon> Start New Chat
  </button>
  <button class="icon-button" mat-icon-button (click)="drawer.toggle()"><i class="material-icons">chevron_left</i></button>

src/app/chat/chat-sidebar/chat-sidebar.component.ts

@@ -1,10 +1,11 @@
-import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy, HostListener } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 import { ChatService } from '../../shared/chat.service';
 import { CouchService } from '../../shared/couchdb.service';
+import { DeviceInfoService, DeviceType } from '../../shared/device-info.service';
 import { SearchService } from '../../shared/forms/search.service';
 import { showFormErrors } from '../../shared/table-helpers';
 import { UserService } from '../../shared/user.service';
@@ -17,29 +18,34 @@ import { UserService } from '../../shared/user.service';
 export class ChatSidebarComponent implements OnInit, OnDestroy {
  readonly dbName = 'chat_history';
  private onDestroy$ = new Subject<void>();
+ private _titleSearch = '';
+ get titleSearch(): string { return this._titleSearch.trim(); }
+ set titleSearch(value: string) {
+ this._titleSearch = value;
+ this.recordSearch();
+ this.filterConversations();
+ }
  conversations: any;
  filteredConversations: any;
  selectedConversation: any;
  isEditing: boolean;
  fullTextSearch = false;
  searchType: 'questions' | 'responses';
  overlayOpen = false;
+ deviceType: DeviceType;
+ deviceTypes: typeof DeviceType = DeviceType;
  titleForm: { [key: string]: FormGroup } = {};
- private _titleSearch = '';
- get titleSearch(): string { return this._titleSearch.trim(); }
- set titleSearch(value: string) {
- this._titleSearch = value;
- this.recordSearch();
- this.filterConversations();
- }
 
  constructor(
  private chatService: ChatService,
  private couchService: CouchService,
+ private deviceInfoService: DeviceInfoService,
  private formBuilder: FormBuilder,
  private searchService: SearchService,
  private userService: UserService
- ) {}
+ ) {
+ this.deviceType = this.deviceInfoService.getDeviceType();
+ }
 
  ngOnInit() {
  this.titleSearch = '';
@@ -53,6 +59,10 @@ export class ChatSidebarComponent implements OnInit, OnDestroy {
  this.recordSearch(true);
  }
 
+ @HostListener('window:resize') OnResize() {
+ this.deviceType = this.deviceInfoService.getDeviceType();
+ }
+
  subscribeToNewChats() {
  this.chatService.newChatAdded$
  .pipe(takeUntil(this.onDestroy$))

src/app/chat/chat-sidebar/chat-sidebar.scss

@@ -3,12 +3,8 @@
 .header {
  padding: 10px;
 
- .start-button {
- border: solid;
- margin-right: 0.5rem;
- }
-
  .icon-button {
+ margin-left: 10px;
  background-color: $accent;
  }
 }