diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index 14a7c9fa..e5111121 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -515,6 +515,7 @@ export default class ChatInput { sendAsButtons[0].element.classList.add('btn-menu-item-header'); this.sendAsBtnMenu = this.sendAsContainer.firstElementChild as any; + this.sendAsBtnMenu.classList.add('scrollable', 'scrollable-y'); this.sendAsContainer.append(this.sendAsCloseBtn); this.btnToggleEmoticons = ButtonIcon('none toggle-emoticons', {noRipple: true}); diff --git a/src/scss/partials/_button.scss b/src/scss/partials/_button.scss index c61a8691..ce27cb93 100644 --- a/src/scss/partials/_button.scss +++ b/src/scss/partials/_button.scss @@ -101,7 +101,7 @@ padding: .5rem 0; border-radius: $border-radius-medium; 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); font-size: 1rem; @@ -120,7 +120,7 @@ &.active { visibility: visible; 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) { @@ -208,6 +208,10 @@ position: relative; } + &-icon { + flex: 0 0 auto; + } + @include respond-to(handhelds) { --padding-right: 1.875rem; } diff --git a/src/scss/partials/_chat.scss b/src/scss/partials/_chat.scss index 8545fd9e..b0c9f060 100644 --- a/src/scss/partials/_chat.scss +++ b/src/scss/partials/_chat.scss @@ -738,6 +738,8 @@ $background-transition-total-time: #{$input-transition-time - $background-transi --padding-vertical: .3125rem; --padding-horizontal: var(--chat-input-inner-padding); --padding: var(--padding-vertical) var(--padding-horizontal); + --button-size: 2.125rem; + --button-horizontal-margin: .125rem; display: flex; align-items: center; flex-direction: column; @@ -1162,8 +1164,6 @@ $background-transition-total-time: #{$input-transition-time - $background-transi } .new-message-wrapper { - --button-size: 2.125rem; - --button-horizontal-margin: .125rem; --send-as-size: 1.875rem; --send-as-margin-left: .25rem; --send-as-margin-right: .375rem; @@ -1180,24 +1180,43 @@ $background-transition-total-time: #{$input-transition-time - $background-transi position: absolute; flex: 0 0 auto; // 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; transform: scale(0); background: none !important; + z-index: 2; + + .btn-menu { + 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); + + &-item { + &-icon { + margin-right: calc(var(--icon-margin) - .5rem); + + &.active:before { + --offset: -.25rem; + content: " "; + position: absolute; + top: var(--offset); + right: var(--offset); + bottom: var(--offset); + left: var(--offset); + border: .125rem solid var(--primary-color); + border-radius: 50%; + } + } - .btn-menu-item-icon { - margin-right: calc(var(--icon-margin) - .5rem); - - &.active:before { - --offset: -.25rem; - content: " "; - position: absolute; - top: var(--offset); - 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; transform: scale(0); opacity: 0; + pointer-events: none; &.is-visible { &:not(.backwards) {