krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-17 22:57:21 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove search from private-messages (#12044)

Browse Source 
* remove search from private-messages + paged conversations + fixes

* remove autoSize call

* add conversation border at the top

* border-bottom under `Disable Private Messages` - revert border-bottom on conversation items
This commit is contained in:
negue
2020-04-20 16:32:54 +02:00
committed by GitHub
parent 0e36c1aa0f
commit cbcc7cd479
6 changed files with 135 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
website/client/src/pages/private-messages.vue
View File

@@ -19,7 +19,10 @@
<!-- placeholder -->
</div>
</div>
<div class="d-flex selected-conversion">
<div
v-if="selectedConversation && selectedConversation.key"
class="d-flex selected-conversion"
>
<router-link
:to="{'name': 'userProfile', 'params': {'userId': selectedConversation.key}}"
>
@@ -49,13 +52,6 @@
@change="toggleOpt()"
/>
</div>
<div class="search-section">
<b-form-input
v-model="search"
class="input-search"
:placeholder="$t('search')"
/>
</div>
<div
v-if="filtersConversations.length > 0"
class="conversations"
@@ -75,6 +71,13 @@
@click="selectConversation(conversation.key)"
/>
</div>
<button
class="btn btn-secondary"
v-if="canLoadMoreConversations"
@click="loadConversations()"
>
{{ $t('loadMore') }}
</button>
</div>
<div class="messages-column d-flex flex-column align-items-center">
<div
@@ -142,7 +145,7 @@
<h4>{{ disabledTexts.title }}</h4>
<p>{{ disabledTexts.description }}</p>
</div>
<div>
<div class="full-width">
<div
class="new-message-row d-flex align-items-center"
>
@@ -152,10 +155,8 @@
class="flex-fill"
:placeholder="$t('needsTextPlaceholder')"
:maxlength="MAX_MESSAGE_LENGTH"
:class="{'has-content': newMessage !== '', 'disabled': newMessageDisabled}"
:style="{'--textarea-auto-height': textareaAutoHeight}"
:class="{'has-content': newMessage.trim() !== '', 'disabled': newMessageDisabled}"
@keyup.ctrl.enter="sendPrivateMessage()"
@input="autoSize()"
>
</textarea>
</div>
@@ -293,20 +294,6 @@
margin-left: 12px;
}
.input-search {
background-repeat: no-repeat;
background-position: center left 16px;
background-size: 16px 16px;
background-image: url(~@/assets/svg/for-css/search_gray.svg) !important;
padding-left: 40px;
height: 40px;
}
.input-search::placeholder {
color: $gray-200 !important;
}
.selected-conversion {
justify-content: center;
align-items: center;
@@ -321,6 +308,8 @@
height: 44px;
background-color: $gray-600;
padding: 0.75rem 1.5rem;
border-bottom: 1px solid $gray-500;
}
@@ -417,6 +406,10 @@
}
}
.full-width {
width: 100%;
}
.new-message-row {
width: 100%;
padding-left: 1.5rem;
@@ -435,8 +428,12 @@
background-color: $gray-500;
}
min-height: var(--textarea-auto-height, 40px);
&.has-content {
--textarea-auto-height: 80px
}
max-height: var(--textarea-auto-height, 40px);
min-height: var(--textarea-auto-height, 40px);
}
}
@@ -502,11 +499,6 @@
padding: 0;
border-bottom-left-radius: 8px;
.search-section {
padding: 1rem 1.5rem;
border-bottom: 1px solid $gray-500;
}
@media only screen and (max-width: 768px) {
width: 280px;
}
@@ -555,7 +547,6 @@
<script>
import Vue from 'vue';
import moment from 'moment';
import filter from 'lodash/filter';
import groupBy from 'lodash/groupBy';
import orderBy from 'lodash/orderBy';
import habiticaMarkdown from 'habitica-markdown';
@@ -574,7 +565,9 @@ import faceAvatar from '@/components/faceAvatar';
import Avatar from '@/components/avatar';
import { EVENTS } from '@/libs/events';
const MAX_TEXTAREA_HEIGHT = 80;
// extract to a shared path
const CONVERSATIONS_PER_PAGE = 10;
const PM_PER_PAGE = 10;
export default {
components: {
@@ -597,19 +590,21 @@ export default {
messageIcon,
mail,
}),
displayCreate: true,
selectedConversation: {},
search: '',
newMessage: '',
showPopover: false,
messages: [],
messagesByConversation: {}, // cache {uuid: []}
loadedConversations: [],
loaded: false,
messagesLoading: false,
showPopover: false,
/* Conversation-specific data */
initiatedConversation: null,
updateConversationsCounter: 0,
textareaAutoHeight: undefined,
selectedConversation: {},
conversationPage: 0,
canLoadMoreConversations: false,
loadedConversations: [],
messagesByConversation: {}, // cache {uuid: []}
newMessage: '',
messages: [],
messagesLoading: false,
MAX_MESSAGE_LENGTH: MAX_MESSAGE_LENGTH.toString(),
};
},
@@ -724,13 +719,9 @@ export default {
// Vue-subscribe to changes
const subscribeToUpdate = this.updateConversationsCounter > -1;
const filtered = subscribeToUpdate && !this.search
? this.conversations
const filtered = subscribeToUpdate && this.conversations;
/* eslint-disable max-len */
: filter(this.conversations, conversation => conversation.name.toLowerCase().indexOf(this.search.toLowerCase()) !== -1);
const ordered = orderBy(filtered, [o => moment(o.date).toDate()], ['desc']);
const ordered = orderBy(filtered, [o => o.date], ['desc']);
return ordered;
},
@@ -810,14 +801,25 @@ export default {
async reload () {
this.loaded = false;
const conversationRes = await axios.get('/api/v4/inbox/conversations');
this.loadedConversations = conversationRes.data.data;
this.loadedConversations = [];
this.selectedConversation = {};
await this.loadConversations();
await this.$store.dispatch('user:markPrivMessagesRead');
this.loaded = true;
},
async loadConversations () {
const query = ['/api/v4/inbox/conversations'];
query.push(`?page=${this.conversationPage}`);
this.conversationPage += 1;
const conversationRes = await axios.get(query.join(''));
const loadedConversations = conversationRes.data.data;
this.canLoadMoreConversations = loadedConversations.length === CONVERSATIONS_PER_PAGE;
this.loadedConversations.push(...loadedConversations);
},
messageRemoved (message) {
const messages = this.messagesByConversation[this.selectedConversation.key];
@@ -833,9 +835,6 @@ export default {
};
}
},
toggleClick () {
this.displayCreate = !this.displayCreate;
},
toggleOpt () {
this.$store.dispatch('user:togglePrivateMessagesOpt');
},
@@ -848,11 +847,7 @@ export default {
await this.loadMessages();
}
Vue.nextTick(() => {
if (!this.$refs.chatscroll) return;
const chatscroll = this.$refs.chatscroll.$el;
chatscroll.scrollTop = chatscroll.scrollHeight;
});
this.scrollToBottom();
},
sendPrivateMessage () {
if (!this.newMessage) return;
@@ -890,11 +885,7 @@ export default {
this.selectedConversation.lastMessageText = this.newMessage;
this.selectedConversation.date = new Date();
Vue.nextTick(() => {
if (!this.$refs.chatscroll) return;
const chatscroll = this.$refs.chatscroll.$el;
chatscroll.scrollTop = chatscroll.scrollHeight;
});
this.scrollToBottom();
this.$store.dispatch('members:sendPrivateMessage', {
toUserId: this.selectedConversation.key,
@@ -908,7 +899,13 @@ export default {
});
this.newMessage = '';
this.autoSize();
},
scrollToBottom () {
Vue.nextTick(() => {
if (!this.$refs.chatscroll) return;
const chatscroll = this.$refs.chatscroll.$el;
chatscroll.scrollTop = chatscroll.scrollHeight;
});
},
removeTags (html) {
const tmp = document.createElement('DIV');
@@ -943,31 +940,17 @@ export default {
const res = await axios.get(requestUrl);
const loadedMessages = res.data.data;
/* eslint-disable max-len */
this.messagesByConversation[conversationKey] = this.messagesByConversation[conversationKey] || [];
/* eslint-disable max-len */
const loadedMessagesToAdd = loadedMessages
.filter(m => this.messagesByConversation[conversationKey].findIndex(mI => mI.id === m.id) === -1);
this.messagesByConversation[conversationKey].push(...loadedMessagesToAdd);
// only show the load more Button if the max count was returned
this.selectedConversation.canLoadMore = loadedMessages.length === 10;
this.selectedConversation.canLoadMore = loadedMessages.length === PM_PER_PAGE;
this.messagesLoading = false;
},
autoSize () {
const { textarea } = this.$refs;
// weird issue: browser only removing the scrollHeight / clientHeight per key event - 56-54-52
let { scrollHeight } = textarea;
if (this.newMessage === '') {
// reset height when the message was removed again
scrollHeight = 40;
}
if (scrollHeight > MAX_TEXTAREA_HEIGHT) {
scrollHeight = MAX_TEXTAREA_HEIGHT;
}
this.textareaAutoHeight = `${scrollHeight}px`;
},
selectFirstConversation () {
if (this.loadedConversations.length > 0) {
this.selectConversation(this.loadedConversations[0].uuid, true);