Browse Source

Fix album multiselect overflow

master
Eduard Kuzmenko 4 years ago
parent
commit
d092c64759
  1. 2
      src/lib/appManagers/appImManager.ts
  2. 20
      src/scss/partials/_chatBubble.scss

2
src/lib/appManagers/appImManager.ts

@ -2078,7 +2078,6 @@ export class AppImManager {
bubble.classList.add('hide-name', 'photo'); bubble.classList.add('hide-name', 'photo');
const tailSupported = !isAndroid; const tailSupported = !isAndroid;
if(tailSupported) bubble.classList.add('with-media-tail');
const storage = appMessagesManager.groupedMessagesStorage[message.grouped_id]; const storage = appMessagesManager.groupedMessagesStorage[message.grouped_id];
if(message.grouped_id && Object.keys(storage).length != 1) { if(message.grouped_id && Object.keys(storage).length != 1) {
@ -2094,6 +2093,7 @@ export class AppImManager {
break; break;
} }
if(tailSupported) bubble.classList.add('with-media-tail');
wrapPhoto(photo, message, attachmentDiv, undefined, undefined, tailSupported, isOut, this.lazyLoadQueue, this.getMiddleware()); wrapPhoto(photo, message, attachmentDiv, undefined, undefined, tailSupported, isOut, this.lazyLoadQueue, this.getMiddleware());
break; break;

20
src/scss/partials/_chatBubble.scss

@ -230,7 +230,7 @@ $bubble-margin: .25rem;
} }
} }
#bubbles.is-selecting & { #bubbles.is-selecting &:not(.is-album) {
.audio, .document, .attachment, poll-element { .audio, .document, .attachment, poll-element {
pointer-events: none !important; pointer-events: none !important;
} }
@ -561,6 +561,8 @@ $bubble-margin: .25rem;
overflow: hidden; overflow: hidden;
user-select: none; user-select: none;
//-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
display: flex; // lol display: flex; // lol
justify-content: center; justify-content: center;
position: relative; position: relative;
@ -628,6 +630,9 @@ $bubble-margin: .25rem;
.attachment { .attachment {
max-width: unquote('min(451px, 100%)'); max-width: unquote('min(451px, 100%)');
max-height: none; max-height: none;
//overflow: hidden;
}
}
.album-item { .album-item {
background-color: lighten($color-blue, 35%); background-color: lighten($color-blue, 35%);
@ -636,10 +641,18 @@ $bubble-margin: .25rem;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
/* #bubbles.is-selecting & {
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); // fix safari overflow
} */
img, video { img, video {
border-radius: inherit; border-radius: inherit;
} }
&-media { // * fix overflow for handhelds
border-radius: inherit;
}
.bubble-select-checkbox { .bubble-select-checkbox {
bottom: auto !important; bottom: auto !important;
left: auto; left: auto;
@ -652,7 +665,6 @@ $bubble-margin: .25rem;
.album-item-media { .album-item-media {
transform: scale(1); transform: scale(1);
border-radius: 0;
} }
&.animating { &.animating {
@ -674,8 +686,6 @@ $bubble-margin: .25rem;
} }
} }
} }
}
}
//&.video { //&.video {
//.attachment { //.attachment {
@ -1204,7 +1214,7 @@ $bubble-margin: .25rem;
} }
} }
&:not(.webpage):not(.is-album):not(.sticker):not(.round):not(.emoji-big) .attachment, .album-item { &:not(.webpage):not(.is-album):not(.sticker):not(.round):not(.emoji-big) .attachment {
background-color: #000; background-color: #000;
} }

Loading…
Cancel
Save