From 7f12a022795b08031aa1c3995409eb132b9345c5 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Tue, 1 Dec 2020 19:10:31 +0200 Subject: [PATCH] Added 'Select Messages' button to chat CM --- src/components/chat/selection.ts | 16 ++++++++++------ src/components/chat/topbar.ts | 23 ++++++++++++++++++++++- src/scss/partials/_chatTopbar.scss | 20 ++++++++++---------- src/scss/partials/_slider.scss | 2 +- 4 files changed, 43 insertions(+), 18 deletions(-) diff --git a/src/components/chat/selection.ts b/src/components/chat/selection.ts index 2f91359c..20dad727 100644 --- a/src/components/chat/selection.ts +++ b/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 = () => { diff --git a/src/components/chat/topbar.ts b/src/components/chat/topbar.ts index 11565ffb..d0030979 100644 --- a/src/components/chat/topbar.ts +++ b/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); diff --git a/src/scss/partials/_chatTopbar.scss b/src/scss/partials/_chatTopbar.scss index f7c47119..4a21422f 100644 --- a/src/scss/partials/_chatTopbar.scss +++ b/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; diff --git a/src/scss/partials/_slider.scss b/src/scss/partials/_slider.scss index c7c93a2a..26c71558 100644 --- a/src/scss/partials/_slider.scss +++ b/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;