Browse Source

Added 'Select Messages' button to chat CM

master
Eduard Kuzmenko 4 years ago
parent
commit
7f12a02279
  1. 16
      src/components/chat/selection.ts
  2. 23
      src/components/chat/topbar.ts
  3. 20
      src/scss/partials/_chatTopbar.scss
  4. 2
      src/scss/partials/_slider.scss

16
src/components/chat/selection.ts

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

23
src/components/chat/topbar.ts

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

20
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) { /* @include respond-to(handhelds) {
position: sticky; position: sticky;
top: 0; top: 0;
@ -125,6 +119,10 @@
padding-left: 49px; padding-left: 49px;
//--utils-width: NaN; //--utils-width: NaN;
@include respond-to(handhelds) {
padding-left: 52px;
}
//&.have-utils-width { //&.have-utils-width {
max-width: calc(100% - var(--utils-width)); max-width: calc(100% - var(--utils-width));
@ -156,6 +154,12 @@
transition: none; transition: none;
} }
} }
@include respond-to(handhelds) {
> .btn-icon:not(.btn-menu-toggle) {
display: none;
}
}
} }
.chat-join { .chat-join {
@ -183,10 +187,6 @@
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
@include respond-to(handhelds) {
margin-left: 10px;
}
.bottom { .bottom {
font-size: 14px; font-size: 14px;
//line-height: 18px; //line-height: 18px;

2
src/scss/partials/_slider.scss

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

Loading…
Cancel
Save