r4sas/tweb-i2p
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix 'Send as...' layout

Browse Source
This commit is contained in:
Eduard Kuzmenko 2022-02-22 16:35:13 +02:00
parent 1b057603cb
commit 737dea6f51
3 changed files with 42 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/chat/input.ts
View File

@ -515,6 +515,7 @@ export default class ChatInput {
sendAsButtons[0].element.classList.add('btn-menu-item-header'); sendAsButtons[0].element.classList.add('btn-menu-item-header');
this.sendAsBtnMenu = this.sendAsContainer.firstElementChild as any; this.sendAsBtnMenu = this.sendAsContainer.firstElementChild as any;
this.sendAsBtnMenu.classList.add('scrollable', 'scrollable-y');
this.sendAsContainer.append(this.sendAsCloseBtn); this.sendAsContainer.append(this.sendAsCloseBtn);
this.btnToggleEmoticons = ButtonIcon('none toggle-emoticons', {noRipple: true}); this.btnToggleEmoticons = ButtonIcon('none toggle-emoticons', {noRipple: true});

8
src/scss/partials/_button.scss
View File

@ -101,7 +101,7 @@
padding: .5rem 0; padding: .5rem 0;
border-radius: $border-radius-medium; border-radius: $border-radius-medium;
opacity: 0; opacity: 0;
transform: scale(.8); transform: scale(.8) !important;
transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition); transition: opacity var(--btn-menu-transition), transform var(--btn-menu-transition), visibility var(--btn-menu-transition);
font-size: 1rem; font-size: 1rem;
@ -120,7 +120,7 @@
&.active { &.active {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
transform: scale3d(1, 1, 1); // * scale3d (NOT scale) will fix jumping text transform: scale3d(1, 1, 1) !important; // * scale3d (NOT scale) will fix jumping text
} }
&:not(.active) { &:not(.active) {
@ -208,6 +208,10 @@
position: relative; position: relative;
} }
&-icon {
flex: 0 0 auto;
}
@include respond-to(handhelds) { @include respond-to(handhelds) {
--padding-right: 1.875rem; --padding-right: 1.875rem;
} }

50
src/scss/partials/_chat.scss
View File

@ -738,6 +738,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
--padding-vertical: .3125rem; --padding-vertical: .3125rem;
--padding-horizontal: var(--chat-input-inner-padding); --padding-horizontal: var(--chat-input-inner-padding);
--padding: var(--padding-vertical) var(--padding-horizontal); --padding: var(--padding-vertical) var(--padding-horizontal);
--button-size: 2.125rem;
--button-horizontal-margin: .125rem;
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
@ -1162,8 +1164,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
} }
.new-message-wrapper { .new-message-wrapper {
--button-size: 2.125rem;
--button-horizontal-margin: .125rem;
--send-as-size: 1.875rem; --send-as-size: 1.875rem;
--send-as-margin-left: .25rem; --send-as-margin-left: .25rem;
--send-as-margin-right: .375rem; --send-as-margin-right: .375rem;
@ -1180,24 +1180,43 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
position: absolute; position: absolute;
flex: 0 0 auto; flex: 0 0 auto;
// margin: 0 0.375rem .4375rem var(--send-as-margin-left); // margin: 0 0.375rem .4375rem var(--send-as-margin-left);
margin: 0 0 .4375rem var(--send-as-margin-left); margin-left: var(--send-as-margin-left);
bottom: calc(var(--padding-vertical) + .4375rem);
cursor: pointer; cursor: pointer;
transform: scale(0); transform: scale(0);
background: none !important; background: none !important;
z-index: 2;
.btn-menu-item-icon { .btn-menu {
margin-right: calc(var(--icon-margin) - .5rem); max-height: 20rem;
max-width: 20rem;
top: auto;
right: auto;
left: calc(var(--padding-horizontal) * -1 - .25rem) !important;
width: auto;
height: auto;
transform: scale3d(1, 1, 1);
&.active:before { &-item {
--offset: -.25rem; &-icon {
content: " "; margin-right: calc(var(--icon-margin) - .5rem);
position: absolute;
top: var(--offset); &.active:before {
right: var(--offset); --offset: -.25rem;
bottom: var(--offset); content: " ";
left: var(--offset); position: absolute;
border: .125rem solid var(--primary-color); top: var(--offset);
border-radius: 50%; right: var(--offset);
bottom: var(--offset);
left: var(--offset);
border: .125rem solid var(--primary-color);
border-radius: 50%;
}
}
&-text {
@include text-overflow();
}
} }
} }
} }
@ -1206,6 +1225,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
opacity: 0; opacity: 0;
pointer-events: none;
&.is-visible { &.is-visible {
&:not(.backwards) { &:not(.backwards) {