Added 'Select Messages' button to chat CM

src/components/chat/selection.ts

@@ -179,11 +179,11 @@ export default class ChatSelection {
     return bubble.firstElementChild.tagName == 'LABEL' && bubble.firstElementChild.firstElementChild as HTMLInputElement;
   }
 
-  public updateForwardContainer() {
-    if(!this.selectedMids.size) return;
+  public updateForwardContainer(forceSelection = false) {
+    if(!this.selectedMids.size && !forceSelection) return;
     this.selectionCountEl.innerText = this.selectedMids.size + ' Message' + (this.selectedMids.size == 1 ? '' : 's');
 
-    let cantForward = false, cantDelete = false;
+    let cantForward = !this.selectedMids.size, cantDelete = !this.selectedMids.size;
     for(const mid of this.selectedMids.values()) {
       const message = this.appMessagesManager.getMessage(mid);
       if(!cantForward) {
@@ -207,9 +207,9 @@ export default class ChatSelection {
     this.selectionDeleteBtn.toggleAttribute('disabled', cantDelete);
   }
 
-  public toggleSelection(toggleCheckboxes = true) {
+  public toggleSelection(toggleCheckboxes = true, forceSelection = false) {
     const wasSelecting = this.isSelecting;
-    this.isSelecting = this.selectedMids.size > 0;
+    this.isSelecting = this.selectedMids.size > 0 || forceSelection;
 
     if(wasSelecting == this.isSelecting) return;
     
@@ -234,7 +234,7 @@ export default class ChatSelection {
 
     blurActiveElement(); // * for mobile keyboards
 
-    SetTransition(bubblesContainer, 'is-selecting', !!this.selectedMids.size, 200, () => {
+    SetTransition(bubblesContainer, 'is-selecting', !!this.selectedMids.size || forceSelection, 200, () => {
       if(!this.isSelecting) {
         this.selectionContainer.remove();
         this.selectionContainer = this.selectionForwardBtn = this.selectionDeleteBtn = null;
@@ -287,6 +287,10 @@ export default class ChatSelection {
         this.toggleBubbleCheckbox(bubble, this.isSelecting);
       }
     }
+
+    if(forceSelection) {
+      this.updateForwardContainer(forceSelection);
+    }
   }
 
   public cancelSelection = () => {

src/components/chat/topbar.ts

@@ -28,6 +28,7 @@ export default class ChatTopbar {
   subtitle: HTMLDivElement;
   chatUtils: HTMLDivElement;
   btnJoin: HTMLButtonElement;
+  btnPinned: HTMLButtonElement;
   btnMute: HTMLButtonElement;
   btnSearch: HTMLButtonElement;
   btnMore: HTMLButtonElement;
@@ -94,6 +95,7 @@ export default class ChatTopbar {
     this.btnJoin = Button('btn-primary chat-join hide');
     this.btnJoin.append('SUBSCRIBE');
 
+    this.btnPinned = ButtonIcon('pinlist');
     this.btnMute = ButtonIcon('mute');
     this.btnSearch = ButtonIcon('search');
     const menuButtons: (ButtonMenuItemOptions & {verify: () => boolean})[] = [{
@@ -103,6 +105,11 @@ export default class ChatTopbar {
         new ChatSearch(this, this.chat);
       },
       verify: () => mediaSizes.isMobile
+    }, {
+      icon: 'pinlist',
+      text: 'Pinned Messages',
+      onClick: () => {},
+      verify: () => mediaSizes.isMobile
     }, {
       icon: 'mute',
       text: 'Mute',
@@ -117,6 +124,20 @@ export default class ChatTopbar {
         this.appMessagesManager.mutePeer(this.peerID);
       },
       verify: () => rootScope.myID != this.peerID && this.appMessagesManager.isPeerMuted(this.peerID)
+    }, {
+      icon: 'select',
+      text: 'Select Messages',
+      onClick: () => {
+        this.chat.selection.toggleSelection(true, true);
+      },
+      verify: () => !this.chat.selection.isSelecting
+    }, {
+      icon: 'select',
+      text: 'Clear Selection',
+      onClick: () => {
+        this.chat.selection.cancelSelection();
+      },
+      verify: () => this.chat.selection.isSelecting
     }, {
       icon: 'delete danger',
       text: 'Delete and Leave',
@@ -130,7 +151,7 @@ export default class ChatTopbar {
       });
     });
 
-    this.chatUtils.append(this.chatAudio.divAndCaption.container, this.btnJoin, this.btnMute, this.btnSearch, this.btnMore);
+    this.chatUtils.append(this.chatAudio.divAndCaption.container, this.btnJoin, this.btnPinned, this.btnMute, this.btnSearch, this.btnMore);
 
     this.container.append(this.btnBack, this.chatInfo, this.chatUtils);
 

src/scss/partials/_chatTopbar.scss

@@ -66,12 +66,6 @@
 		}
 	} */
 
-	@include respond-to(handhelds) {
-		.chat-mute-button, .chat-search-button {
-			display: none;
-		}
-	}
-
 	/* @include respond-to(handhelds) {
 		position: sticky;
 		top: 0;
@@ -124,6 +118,10 @@
 		overflow: hidden;
 		padding-left: 49px;
 		//--utils-width: NaN;
+
+		@include respond-to(handhelds) {
+			padding-left: 52px;
+    }
 		
 		//&.have-utils-width {
 			max-width: calc(100% - var(--utils-width));
@@ -156,6 +154,12 @@
 				transition: none;
 			}
 		}
+
+		@include respond-to(handhelds) {
+			> .btn-icon:not(.btn-menu-toggle) {
+				display: none;
+			}
+		}
 	}
 
 	.chat-join {
@@ -183,10 +187,6 @@
 		align-items: center;
 		cursor: pointer;
 
-    @include respond-to(handhelds) {
-			margin-left: 10px;
-    }
-
 		.bottom {
 			font-size: 14px;
 			//line-height: 18px;

src/scss/partials/_slider.scss

@@ -154,7 +154,7 @@ $slider-time: .25s;
 
   i {
     position: absolute;
-    bottom: calc(-.625rem - 2px);
+    bottom: calc(-.625rem - 2.4px);
     left: 0;
     opacity: 0;
     background-color: $color-blue;