mirror of
https://github.com/PrimalHQ/primal-web-app.git
synced 2024-10-03 02:10:55 +00:00
Fix Messages layout
This commit is contained in:
parent
6119b47820
commit
d8f7efdeb1
@ -95,14 +95,14 @@
|
||||
|
||||
>div {
|
||||
position: fixed;
|
||||
width: var(--left-col-w);
|
||||
width: var(--right-col-w);
|
||||
display: grid;
|
||||
grid-template-rows: var(--header-height) 1fr 82px;
|
||||
height: 100%;
|
||||
border-left: 1px solid var(--devider);
|
||||
}
|
||||
|
||||
&.messagesHeader {
|
||||
&.messagesColumn {
|
||||
>div {
|
||||
border-left: none;
|
||||
}
|
||||
@ -110,6 +110,7 @@
|
||||
}
|
||||
|
||||
.messagesSearch {
|
||||
width: calc(var(--right-col-w) + 8px);
|
||||
border-right: 1px solid var(--devider);
|
||||
}
|
||||
|
||||
@ -135,6 +136,14 @@
|
||||
height: 52px;
|
||||
}
|
||||
}
|
||||
|
||||
&.messagesHeader {
|
||||
width: calc(var(--right-col-w) + 8px);
|
||||
|
||||
>div {
|
||||
width: calc(var(--right-col-w) + 8px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rightContent {
|
||||
|
@ -136,9 +136,9 @@ const Layout: Component = () => {
|
||||
</div>
|
||||
|
||||
|
||||
<div class={`${styles.rightColumn} ${location.pathname.startsWith('/messages') ? styles.messagesHeader : ''}`}>
|
||||
<div class={`${styles.rightColumn} ${location.pathname.startsWith('/messages') ? styles.messagesColumn : ''}`}>
|
||||
<div>
|
||||
<div class={styles.rightHeader}>
|
||||
<div class={`${styles.rightHeader} ${location.pathname.startsWith('/messages') ? styles.messagesHeader : ''}`}>
|
||||
<div id="search_section" class={location.pathname.startsWith('/messages') ? styles.messagesSearch : ''}>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -57,9 +57,15 @@
|
||||
.messagesContent {
|
||||
position: relative;
|
||||
|
||||
display: flex;
|
||||
width: calc(var(--left-col-w) + var(--right-col-w) + 424px);
|
||||
|
||||
.senders {
|
||||
width: 334px;
|
||||
|
||||
.sendersHeader {
|
||||
height: 48px;
|
||||
width: 334px;
|
||||
width: 100%;
|
||||
background: none;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--devider);
|
||||
@ -152,9 +158,11 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
width: 334px;
|
||||
overflow-y: overlay;
|
||||
overflow-x: hidden;
|
||||
width: 100%;
|
||||
height: calc(100vh - 176px);
|
||||
padding-right: 8px;
|
||||
// padding-right: 8px;
|
||||
border-radius: 0;
|
||||
border-left: 1px solid var(--devider);
|
||||
|
||||
@ -170,6 +178,7 @@
|
||||
border-bottom: 1px solid var(--devider);
|
||||
margin-bottom: 0px;
|
||||
align-items: center;
|
||||
width: 334px;
|
||||
|
||||
&:hover, &.selected, &.focus {
|
||||
background-color: var(--background-input);
|
||||
@ -226,15 +235,12 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.conversation {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 320px;
|
||||
background-color: var(--background-card );
|
||||
width: 628px;
|
||||
height: calc(100vh - var(--header-height));
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
|
||||
@ -290,7 +296,7 @@
|
||||
.newMessage {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
vertical-align: bottom;
|
||||
align-items: flex-end;
|
||||
display: flex;
|
||||
border-radius: 0;
|
||||
border: 1px solid var(--devider);
|
||||
@ -302,7 +308,7 @@
|
||||
padding: 1px;
|
||||
border-radius: 8px;
|
||||
width: 538px;
|
||||
height: 34px;
|
||||
height: 40px;
|
||||
box-sizing: border-box;
|
||||
|
||||
textarea {
|
||||
|
@ -323,37 +323,37 @@ const Messages: Component = () => {
|
||||
const onExpandableTextareaInput = () => {
|
||||
const maxHeight = 800;
|
||||
|
||||
const elm = newMessageInput as AutoSizedTextArea;
|
||||
const input = newMessageInput as AutoSizedTextArea;
|
||||
|
||||
if(!elm || elm.nodeName !== 'TEXTAREA') {
|
||||
if(!input || input.nodeName !== 'TEXTAREA') {
|
||||
return;
|
||||
}
|
||||
|
||||
const minRows = parseInt(elm.getAttribute('data-min-rows') || '0');
|
||||
const minRows = parseInt(input.getAttribute('data-min-rows') || '0');
|
||||
|
||||
!elm._baseScrollHeight && getScrollHeight(elm);
|
||||
!input._baseScrollHeight && getScrollHeight(input);
|
||||
|
||||
|
||||
if (elm.scrollHeight >= (maxHeight / 3)) {
|
||||
if (input.scrollHeight >= (maxHeight / 3)) {
|
||||
return;
|
||||
}
|
||||
|
||||
elm.rows = minRows;
|
||||
const rows = elm.value === '' ? 0 : Math.ceil((elm.scrollHeight - elm._baseScrollHeight) / 20);
|
||||
input.rows = minRows;
|
||||
const rows = input.value === '' ? 0 : Math.ceil((input.scrollHeight - input._baseScrollHeight) / 20);
|
||||
|
||||
elm.rows = minRows + rows;
|
||||
elm.style.height = `${40 + (20 * rows)}px`;
|
||||
input.rows = minRows + rows;
|
||||
input.style.height = `${40 + (20 * rows)}px`;
|
||||
|
||||
if (newMessageWrapper) {
|
||||
newMessageWrapper.style.height = `${80 + (20 * rows)}px`;
|
||||
}
|
||||
|
||||
if (newMessageInputBorder) {
|
||||
newMessageInputBorder.style.height = `${82 + (20 * rows)}px`;
|
||||
newMessageInputBorder.style.height = `${42 + (20 * rows)}px`;
|
||||
}
|
||||
|
||||
// debounce(() => {
|
||||
setMessage(elm.value)
|
||||
setMessage(input.value)
|
||||
// }, 300);
|
||||
|
||||
}
|
||||
@ -909,6 +909,7 @@ const Messages: Component = () => {
|
||||
|
||||
<div class={styles.messagesContent}>
|
||||
|
||||
<div class={styles.senders}>
|
||||
<div class={styles.sendersHeader}>
|
||||
<div class={styles.senderCategorySelector}>
|
||||
<button
|
||||
@ -981,6 +982,7 @@ const Messages: Component = () => {
|
||||
}
|
||||
</For>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class={styles.conversation}>
|
||||
<div class={styles.newMessage} ref={newMessageWrapper} >
|
||||
|
Loading…
Reference in New Issue
Block a user