Browse Source

Multiselect album items separately

master
Eduard Kuzmenko 4 years ago
parent
commit
e2686f0bd2
  1. 2
      src/components/chat/contextMenu.ts
  2. 60
      src/components/chat/selection.ts
  3. 8
      src/components/wrappers.ts
  4. 7
      src/lib/appManagers/appImManager.ts
  5. 3
      src/scss/components/_global.scss
  6. 46
      src/scss/partials/_chatBubble.scss
  7. 7
      src/scss/style.scss

2
src/components/chat/contextMenu.ts

@ -237,7 +237,7 @@ export default class ChatContextMenu {
}; };
private onSelectClick = () => { private onSelectClick = () => {
appImManager.chatSelection.toggleByBubble(findUpClassName(this.target, 'bubble')); appImManager.chatSelection.toggleByBubble(findUpClassName(this.target, 'album-item') || findUpClassName(this.target, 'bubble'));
}; };
private onClearSelectionClick = () => { private onClearSelectionClick = () => {

60
src/components/chat/selection.ts

@ -154,6 +154,7 @@ export default class ChatSelection {
public toggleBubbleCheckbox(bubble: HTMLElement, show: boolean) { public toggleBubbleCheckbox(bubble: HTMLElement, show: boolean) {
const hasCheckbox = !!this.getCheckboxInputFromBubble(bubble); const hasCheckbox = !!this.getCheckboxInputFromBubble(bubble);
const isAlbum = bubble.classList.contains('is-album');
if(show) { if(show) {
if(hasCheckbox) return; if(hasCheckbox) return;
@ -171,6 +172,10 @@ export default class ChatSelection {
} else if(hasCheckbox) { } else if(hasCheckbox) {
bubble.firstElementChild.remove(); bubble.firstElementChild.remove();
} }
if(isAlbum) {
this.appImManager.getBubbleAlbumItems(bubble).forEach(item => this.toggleBubbleCheckbox(item, show));
}
} }
public getCheckboxInputFromBubble(bubble: HTMLElement) { public getCheckboxInputFromBubble(bubble: HTMLElement) {
@ -304,15 +309,40 @@ export default class ChatSelection {
this.toggleSelection(false); this.toggleSelection(false);
} }
public toggleByBubble(bubble: HTMLElement) { private updateBubbleSelection(bubble: HTMLElement, isSelected: boolean) {
this.toggleBubbleCheckbox(bubble, true);
const input = this.getCheckboxInputFromBubble(bubble);
input.checked = isSelected;
this.toggleSelection();
this.updateForwardContainer();
SetTransition(bubble, 'is-selected', isSelected, 200);
}
public isAlbumBubbleSelected(bubble: HTMLElement) {
const albumCheckboxInput = this.getCheckboxInputFromBubble(bubble);
return albumCheckboxInput?.checked;
}
public toggleByBubble = (bubble: HTMLElement) => {
const mid = +bubble.dataset.mid; const mid = +bubble.dataset.mid;
const isAlbum = bubble.classList.contains('is-album');
if(isAlbum) {
if(!this.isAlbumBubbleSelected(bubble)) {
const mids = this.appMessagesManager.getMidsByMid(mid); const mids = this.appMessagesManager.getMidsByMid(mid);
mids.forEach(mid => this.selectedMids.delete(mid));
}
const found = mids.find(mid => this.selectedMids.has(mid)); this.appImManager.getBubbleAlbumItems(bubble).forEach(this.toggleByBubble);
return;
}
const found = this.selectedMids.has(mid);
if(found) { if(found) {
mids.forEach(mid => this.selectedMids.delete(mid)); this.selectedMids.delete(mid);
} else { } else {
let diff = MAX_SELECTION_LENGTH - this.selectedMids.size - mids.length; const diff = MAX_SELECTION_LENGTH - this.selectedMids.size - 1;
if(diff < 0) { if(diff < 0) {
toast('Max selection count reached.'); toast('Max selection count reached.');
return; return;
@ -331,15 +361,23 @@ export default class ChatSelection {
} while(this.selectedMids.size > MAX_SELECTION_LENGTH); */ } while(this.selectedMids.size > MAX_SELECTION_LENGTH); */
} }
mids.forEach(mid => this.selectedMids.add(mid)); this.selectedMids.add(mid);
} }
this.toggleBubbleCheckbox(bubble, true); const isAlbumItem = bubble.classList.contains('album-item');
const input = this.getCheckboxInputFromBubble(bubble); if(isAlbumItem) {
input.checked = !found; const albumContainer = findUpClassName(bubble, 'bubble');
const isAlbumSelected = this.isAlbumBubbleSelected(albumContainer);
this.toggleSelection(); const mids = this.appMessagesManager.getMidsByMid(mid);
this.updateForwardContainer(); const selectedMids = mids.filter(mid => this.selectedMids.has(mid));
SetTransition(bubble, 'is-selected', !found, 200);
const willChange = mids.length == selectedMids.length || isAlbumSelected;
if(willChange) {
this.updateBubbleSelection(albumContainer, mids.length == selectedMids.length);
} }
}
this.updateBubbleSelection(bubble, !found);
};
} }

8
src/components/wrappers.ts

@ -798,11 +798,14 @@ export function wrapAlbum({groupID, attachmentDiv, middleware, uploading, lazyLo
div.style.borderBottomRightRadius = 'inherit'; div.style.borderBottomRightRadius = 'inherit';
} }
const mediaDiv = document.createElement('div');
mediaDiv.classList.add('album-item-media');
if(media._ == 'photo') { if(media._ == 'photo') {
wrapPhoto( wrapPhoto(
media, media,
message, message,
div, mediaDiv,
0, 0,
0, 0,
false, false,
@ -814,7 +817,7 @@ export function wrapAlbum({groupID, attachmentDiv, middleware, uploading, lazyLo
} else { } else {
wrapVideo({ wrapVideo({
doc: message.media.document, doc: message.media.document,
container: div, container: mediaDiv,
message, message,
boxWidth: 0, boxWidth: 0,
boxHeight: 0, boxHeight: 0,
@ -828,6 +831,7 @@ export function wrapAlbum({groupID, attachmentDiv, middleware, uploading, lazyLo
// @ts-ignore // @ts-ignore
//div.style.backgroundColor = '#' + Math.floor(Math.random() * (2 ** 24 - 1)).toString(16).padStart(6, '0'); //div.style.backgroundColor = '#' + Math.floor(Math.random() * (2 ** 24 - 1)).toString(16).padStart(6, '0');
div.append(mediaDiv);
attachmentDiv.append(div); attachmentDiv.append(div);
} }
} }

7
src/lib/appManagers/appImManager.ts

@ -528,7 +528,8 @@ export class AppImManager {
return; return;
} }
this.chatSelection.toggleByBubble(bubble); //this.chatSelection.toggleByBubble(bubble);
this.chatSelection.toggleByBubble(findUpClassName(target, 'album-item') || bubble);
return; return;
} }
@ -892,6 +893,10 @@ export class AppImManager {
return null; return null;
} }
public getBubbleAlbumItems(bubble: HTMLElement) {
return Array.from(bubble.querySelectorAll('.album-item')) as HTMLElement[];
}
public loadMoreHistory(top: boolean, justLoad = false) { public loadMoreHistory(top: boolean, justLoad = false) {
//this.log('loadMoreHistory', top); //this.log('loadMoreHistory', top);
if(!this.peerID || /* TEST_SCROLL || */ this.setPeerPromise || (top && this.getHistoryTopPromise) || (!top && this.getHistoryBottomPromise)) return; if(!this.peerID || /* TEST_SCROLL || */ this.setPeerPromise || (top && this.getHistoryTopPromise) || (!top && this.getHistoryBottomPromise)) return;

3
src/scss/components/_global.scss

@ -25,6 +25,9 @@ a {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
img, video {
-webkit-user-drag: none;
}
// Positioning // Positioning
.valign-wrapper { .valign-wrapper {

46
src/scss/partials/_chatBubble.scss

@ -209,6 +209,9 @@ $bubble-margin: .25rem;
} }
.checkbox-caption { .checkbox-caption {
padding: 0;
width: 25px;
&:before { &:before {
top: 7px !important; top: 7px !important;
left: 3px !important; left: 3px !important;
@ -614,10 +617,7 @@ $bubble-margin: .25rem;
max-height: none; max-height: none;
.album-item { .album-item {
background-color: #000; background-color: lighten($color-blue, 35%);
background-size: cover;
/* background-position: center center; */
/* flex: 1 0 auto; */
max-width: 100%; max-width: 100%;
cursor: pointer; cursor: pointer;
position: absolute; position: absolute;
@ -626,6 +626,40 @@ $bubble-margin: .25rem;
img, video { img, video {
border-radius: inherit; border-radius: inherit;
} }
.bubble-select-checkbox {
bottom: auto !important;
left: auto;
right: .25rem;
top: .25rem;
}
&.is-selected {
border-radius: 0;
.album-item-media {
transform: scale(1);
border-radius: 0;
}
&.animating {
transition: border-radius var(--layer-transition);
.album-item-media {
transition: transform var(--layer-transition), border-radius var(--layer-transition);
}
}
&:not(.backwards) {
.album-item-media {
transform: scale(.925);
}
&, .album-item-media {
border-radius: .5rem;
}
}
}
} }
} }
} }
@ -1464,6 +1498,10 @@ $bubble-margin: .25rem;
color: $darkgreen; color: $darkgreen;
} }
.album-item {
background-color: darken(#eeffde, 10%) !important;
}
.time { .time {
padding-right: 4px; padding-right: 4px;
margin-left: -4px; margin-left: -4px;

7
src/scss/style.scss

@ -1023,3 +1023,10 @@ middle-ellipsis-element {
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.album-item {
&-media {
width: 100%;
height: 100%;
}
}

Loading…
Cancel
Save