diff options
author | Marco Ambrosini <marcoambrosini@pm.me> | 2019-10-17 17:03:13 +0300 |
---|---|---|
committer | Marco Ambrosini <marcoambrosini@pm.me> | 2019-10-17 19:04:14 +0300 |
commit | e12d1a0d4f7e4ee521af3bbf6ff04612f019ca25 (patch) | |
tree | 8f8b18c99377c0005295129af7411eafa9da0702 | |
parent | 6a79f50e1956686963c941488cc4d46ea78913d9 (diff) |
Add sticky avatar
Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>
-rw-r--r-- | src/assets/variables.scss | 2 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/Message/Message.vue | 54 | ||||
-rw-r--r-- | src/components/MessagesList/MessagesGroup/MessagesGroup.vue | 11 | ||||
-rw-r--r-- | src/components/NewMessageForm/NewMessageForm.vue | 1 |
4 files changed, 28 insertions, 40 deletions
diff --git a/src/assets/variables.scss b/src/assets/variables.scss index 6282c672f..c41b8e06d 100644 --- a/src/assets/variables.scss +++ b/src/assets/variables.scss @@ -57,4 +57,4 @@ $navigation-width: 300px; $breakpoint-mobile: 1024px; //message width -$message-width: 600px; +$message-width: 650px; diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue index ed8f36048..70369ea59 100644 --- a/src/components/MessagesList/MessagesGroup/Message/Message.vue +++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue @@ -30,7 +30,7 @@ the main body of the message as well as a quote. :class="{ 'hover': hover }" @mouseover="hover=true" @mouseleave="hover=false"> - <div class="message__author"> + <div v-if="isFirstMessage" class="message__author"> <h6>{{ actorDisplayName }}</h6> </div> <div class="message__main"> @@ -40,7 +40,7 @@ the main body of the message as well as a quote. <div v-show="isTemporary" class="message__main__right icon-loading-small" /> <div v-show="!isTemporary" class="message__main__right"> <h6>{{ messageTime }}</h6> - <Actions v-show="hover" class="actions"> + <Actions v-show="hover" class="message__main__right__actions"> <ActionButton icon="icon-delete" @click="handleDelete"> Delete </ActionButton> @@ -107,6 +107,10 @@ export default { isTemporary: { type: Boolean, required: true + }, + isFirstMessage: { + type: Boolean, + required: true } }, computed: { @@ -126,12 +130,8 @@ export default { @import '../../../../assets/variables'; .message { - min-width: 100%; padding: 4px 0 4px 0; flex-direction: column; - &:hover { - background-color: rgba(47, 47, 47, 0.068); - } &__author { color: var(--color-text-maxcontrast); } @@ -140,38 +140,24 @@ export default { justify-content: space-between; min-width: 100%; &__text { - width: 400px; + flex: 1 1 400px; color: var(--color-text-light); - } - &__right { - width: 80px; - } - } -} - -.message { - &-main { - display: inline-flex; - flex-grow: 1; - flex-direction: column; - - &--quote { + &--quote { border-left: 4px solid var(--color-primary); padding: 4px 0 0 8px; + } + } + &__right { + flex: 0 0 150px; + display: flex; + color: var(--color-text-maxcontrast); + font-size: 13px; + padding: 0 8px 0 8px; + &__actions { + position: absolute; + margin: -10px 0 0 60px + } } } } - -.right { - display: flex; - min-width: 110px; - color: #989898; - padding: 0 8px 0 8px; - } - - .actions { - position: absolute; - margin: -14px 0 0 50px; - padding:2px; - } </style> diff --git a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue index b3bc0aefd..cd363daa0 100644 --- a/src/components/MessagesList/MessagesGroup/MessagesGroup.vue +++ b/src/components/MessagesList/MessagesGroup/MessagesGroup.vue @@ -29,8 +29,9 @@ </div> <div class="messages"> <Message - v-for="message of messages" + v-for="(message, index) of messages" v-bind="message" + :isFirstMessage="index === 0" :key="message.id" :hover="hover" :actor-display-name="actorDisplayName" @@ -103,17 +104,17 @@ export default { } .messages { + flex: auto; display: flex; padding: 8px 0 8px 0; flex-direction: column; &__avatar { min-height: 100%; - width: 52px; - min-width: 52px; - padding: 4px 8px 0 8px; + flex: 0 0 52px; + padding: 20px 8px 10px 8px; &__icon { position: sticky; - top: 16px; + top: 12px; } } } diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue index 830288298..06dfd314b 100644 --- a/src/components/NewMessageForm/NewMessageForm.vue +++ b/src/components/NewMessageForm/NewMessageForm.vue @@ -68,6 +68,7 @@ export default { const message = Object.assign({}, { id: this.createTemporaryMessageId(), actorDisplayName: OC.getCurrentUser().displayName, + actorId: OC.getCurrentUser().Id, message: this.text, token: this.token }) |