MrBesen/tweb
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve pinned messages border

Browse Source
This commit is contained in:
Eduard Kuzmenko 2021-07-18 13:57:10 +03:00
parent e793a329d0
commit ce35f84eae
2 changed files with 61 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/chat/pinnedMessageBorder.ts
View File

@ -123,7 +123,8 @@ export default class PinnedMessageBorder {
}
// return (index + 1) * barHeight + index * GAP;
return (barHeight + GAP * 2) / 2 + (index - 2) * (barHeight + GAP);
return index * barHeight - (count - index - 1) * GAP;
//return (barHeight + GAP * 2) / 2 + (index - 2) * (barHeight + GAP);
};
private getTrackHeight = (count: number, barHeight: number) => {
@ -161,6 +162,16 @@ export default class PinnedMessageBorder {
this.border.classList.toggle(BASE_CLASS + '-mask', count > 4);
if(index <= 1) {
this.border.classList.add('mask-bottom');
this.border.classList.remove('mask-top');
} else if(index >= (count - 2)) {
this.border.classList.add('mask-top');
this.border.classList.remove('mask-bottom');
} else {
this.border.classList.add('mask-top', 'mask-bottom');
}
this.wrapper.className = BASE_CLASS + '-wrapper';
this.wrapper.style.cssText = `clip-path: url(#${clipPathId}); width: 2px; height: ${trackHeight}px; transform: translateY(-${trackTranslateY}px);`;

54
src/scss/partials/_chatPinned.scss
View File

@ -9,6 +9,7 @@
position: relative;
height: 2rem;
width: .125rem;
flex: 0 0 auto;
// padding: .125rem 0;
&-wrapper-1 {
@ -22,8 +23,50 @@
}
&-mask {
height: 2.5rem;
mask-image: linear-gradient(to bottom, transparent 0, black 4px, black 36px, transparent 40px);
--mask-height: .375rem;
--height: 2.5rem;
height: var(--height);
overflow: hidden;
/* mask-image: linear-gradient(to bottom, transparent 0, black var(--mask-height), black calc(var(--height) - var(--mask-height)), transparent var(--height));
&.mask-top {
mask-image: linear-gradient(to bottom, transparent 0, black var(--mask-height));
}
&.mask-bottom {
mask-image: linear-gradient(to bottom, black calc(var(--height) - var(--mask-height)), transparent var(--height));
} */
&:before,
&:after {
position: absolute;
left: 0;
right: 0;
content: " ";
display: block;
z-index: 1;
height: var(--mask-height);
opacity: 0;
@include animation-level(2) {
transition: opacity .2s ease-in-out;
}
}
&:before {
top: 0;
background: linear-gradient(var(--surface-color), transparent);
}
&:after {
bottom: 0;
background: linear-gradient(transparent, var(--surface-color));
}
&.mask-top:before,
&.mask-bottom:after {
opacity: 1;
}
}
&-wrapper {
@ -117,7 +160,7 @@
//line-height: 18px;
//line-height: 1;
//line-height: 15px;
line-height: 16px;
line-height: var(--line-height);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
@ -357,6 +400,7 @@
.pinned-message-subtitle {
position: relative;
height: calc(var(--height) / 2);
min-height: calc(var(--height) / 2);
overflow: visible;
@include animation-level(2) {
@ -366,8 +410,8 @@
}
&-title {
margin-top: -.0625rem;
margin-bottom: .1875rem;
margin-top: -.125rem;
margin-bottom: .25rem;
}
&-subtitle {