summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/LeftSidebar/ConversationsList/ConversationsList.vue3
-rw-r--r--src/components/LoadingPlaceholder.vue84
-rw-r--r--src/components/MessagesList/LoadingMessage.vue88
-rw-r--r--src/components/MessagesList/MessagesList.vue10
4 files changed, 75 insertions, 110 deletions
diff --git a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
index 8ec138025..d7c0b6eea 100644
--- a/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
+++ b/src/components/LeftSidebar/ConversationsList/ConversationsList.vue
@@ -28,7 +28,8 @@
@click.native="handleConversationClick" />
<template
v-if="!initialisedConversations">
- <LoadingPlaceholder />
+ <LoadingPlaceholder
+ type="conversations" />
</template>
<Hint v-else-if="searchText && !conversationsList.length"
:hint="t('spreed', 'No matches')" />
diff --git a/src/components/LoadingPlaceholder.vue b/src/components/LoadingPlaceholder.vue
index 29c10688c..dba573be0 100644
--- a/src/components/LoadingPlaceholder.vue
+++ b/src/components/LoadingPlaceholder.vue
@@ -22,9 +22,9 @@
<template>
<ul>
<!-- Placeholder animation -->
- <svg class="unified-search__result-placeholder-gradient">
+ <svg class="placeholder-gradient">
<defs>
- <linearGradient id="unified-search__result-placeholder-gradient">
+ <linearGradient id="placeholder-gradient">
<stop offset="0%" :stop-color="light">
<animate attributeName="stop-color"
:values="`${light}; ${light}; ${dark}; ${dark}; ${light}`"
@@ -42,14 +42,26 @@
</svg>
<!-- Placeholders -->
- <li v-for="placeholder in 5" :key="placeholder">
+ <li v-for="placeholder in count" :key="placeholder">
<svg
- class="unified-search__result-placeholder"
+ v-if="type === 'conversations'"
+ class="conversation-placeholder"
xmlns="http://www.w3.org/2000/svg"
- fill="url(#unified-search__result-placeholder-gradient)">
- <circle class="unified-search__result-placeholder-icon" />
- <rect class="unified-search__result-placeholder-line-one" />
- <rect class="unified-search__result-placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" />
+ fill="url(#placeholder-gradient)">
+ <circle class="conversation-placeholder-icon" />
+ <rect class="conversation-placeholder-line-one" />
+ <rect class="conversation-placeholder-line-two" :style="{width: `calc(${randWidth()}%)`}" />
+ </svg>
+ <svg
+ v-if="type === 'messages'"
+ class="message-placeholder"
+ xmlns="http://www.w3.org/2000/svg"
+ fill="url(#placeholder-gradient)">
+ <circle class="message-placeholder-icon" />
+ <rect class="message-placeholder-line-one" />
+ <rect class="message-placeholder-line-two" />
+ <rect class="message-placeholder-line-three" />
+ <rect class="message-placeholder-line-four" :style="{width: `calc(${randWidth()}%)`}" />
</svg>
</li>
</ul>
@@ -62,7 +74,11 @@ export default {
props: {
type: {
type: String,
- default: 'conversation',
+ required: true,
+ },
+ count: {
+ type: Number,
+ default: 5,
},
},
@@ -96,27 +112,29 @@ export default {
position: relative;
}
- .unified-search__result-placeholder-gradient {
+ .placeholder-gradient {
position: fixed;
height: 0;
width: 0;
z-index: -1;
}
- .unified-search__result-placeholder {
- width: calc(100% - 2 * #{$margin});
- height: $clickable-area;
- margin: $margin;
- position: relative;
+ .conversation-placeholder,
+ .message-placeholder {
&-icon {
width: $clickable-area;
height: $clickable-area;
- position: relative;
cx: calc(#{$clickable-area} / 2);
cy: calc(#{$clickable-area} / 2);
r: calc(#{$clickable-area} / 2);
}
+ }
+
+ .conversation-placeholder {
+ width: calc(100% - 2 * #{$margin});
+ height: $clickable-area;
+ margin: $margin;
&-line-one,
&-line-two {
@@ -135,4 +153,38 @@ export default {
}
}
+ .message-placeholder {
+ width: 800px;
+ height: calc(#{$clickable-area} * 2);
+ margin: $margin auto;
+ padding: 0 $margin;
+ display: block;
+
+ &-line-one,
+ &-line-two,
+ &-line-three,
+ &-line-four {
+ width: 640px;
+ height: 1em;
+ x: $margin + $clickable-area;
+ }
+
+ &-line-one {
+ y: 5px;
+ width: 175px;
+ }
+
+ &-line-two {
+ y: 25px;
+ }
+
+ &-line-three {
+ y: 45px;
+ }
+
+ &-line-four {
+ y: 65px;
+ }
+ }
+
</style>
diff --git a/src/components/MessagesList/LoadingMessage.vue b/src/components/MessagesList/LoadingMessage.vue
deleted file mode 100644
index b1e66168d..000000000
--- a/src/components/MessagesList/LoadingMessage.vue
+++ /dev/null
@@ -1,88 +0,0 @@
-<!--
- - @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
- -
- - @author Joas Schilling <coding@schilljs.com>
- -
- - @license GNU AGPL version 3 or any later version
- -
- - This program is free software: you can redistribute it and/or modify
- - it under the terms of the GNU Affero General Public License as
- - published by the Free Software Foundation, either version 3 of the
- - License, or (at your option) any later version.
- -
- - This program is distributed in the hope that it will be useful,
- - but WITHOUT ANY WARRANTY; without even the implied warranty of
- - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- - GNU Affero General Public License for more details.
- -
- - You should have received a copy of the GNU Affero General Public License
- - along with this program. If not, see <http://www.gnu.org/licenses/>.
--->
-
-<template>
- <li class="message-placeholder">
- <div class="message-placeholder__wrapper">
- <div class="icon-container" />
- <div class="placeholder">
- <div class="user" />
- <div class="line" />
- <div class="line" />
- <div class="half-line" />
- </div>
- </div>
- </li>
-</template>
-
-<script>
-export default {
- name: 'LoadingMessage',
-}
-</script>
-
-<style lang="scss" scoped>
- @import '../../assets/variables';
-
- .message-placeholder {
- line-height: 44px;
- list-style-type: none;
- width: 100%;
- &__wrapper{
- width: $message-max-width + 60px;
- margin: 0 auto;
- }
- $icon-size: 44px;
- .icon-container {
- width: $icon-size;
- height: $icon-size;
- margin-left: -2px;
- margin-top: 2px;
- display: inline-block;
- background-color: var(--color-background-dark);
- border-radius: 50%;
- vertical-align: top;
- }
-
- .placeholder {
- width: 220px;
- height: $icon-size * 2;
- display: inline-block;
-
- .user,
- .line,
- .half-line {
- background-color: var(--color-background-dark);
- height: ($icon-size / 2) - 6px;
- width: $message-max-width - 60px;
- margin-top: 4px;
- }
-
- .user {
- width: 175px;
- }
-
- .half-line {
- width: $message-max-width / 2;
- }
- }
- }
-</style>
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index 0dfb32cb4..a1217845c 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -46,9 +46,9 @@ get the messagesList array and loop through the list to generate the messages.
:messages="item"
@deleteMessage="handleDeleteMessage" />
<template v-if="!messagesGroupedByAuthor.length">
- <LoadingMessage
- v-for="n in 15"
- :key="n" />
+ <LoadingPlaceholder
+ type="messages"
+ :count="15" />
</template>
</div>
</template>
@@ -56,7 +56,6 @@ get the messagesList array and loop through the list to generate the messages.
<script>
import moment from '@nextcloud/moment'
import MessagesGroup from './MessagesGroup/MessagesGroup'
-import LoadingMessage from './LoadingMessage'
import { fetchMessages, lookForNewMessages } from '../../services/messagesService'
import CancelableRequest from '../../utils/cancelableRequest'
import Axios from '@nextcloud/axios'
@@ -64,11 +63,12 @@ import { subscribe } from '@nextcloud/event-bus'
import isInLobby from '../../mixins/isInLobby'
import debounce from 'debounce'
import { EventBus } from '../../services/EventBus'
+import LoadingPlaceholder from '../LoadingPlaceholder'
export default {
name: 'MessagesList',
components: {
- LoadingMessage,
+ LoadingPlaceholder,
MessagesGroup,
},
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-26 13:02:57 +0000