IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: implements a random and auto generated skeleton (#20202)

Browse Source 
UI is not modified much besides removing the border-bottom, and using only message body.

However instead of having a fix template, this is all automatically generated and random, resulting in a more natural experience.
This commit is contained in:
Joffrey JAFFEUX 2023-02-07 22:48:10 +01:00 committed by GitHub
parent b755b45029
commit a04201ae01
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 35 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.hbs
View File

@ -1,119 +1,15 @@
<div class="chat-skeleton -animation">
<div class="chat-skeleton__header">
<div class="chat-skeleton__header-img"></div>
<div class="chat-skeleton__header-name"></div>
</div>
{{#each this.placeholders as |rows|}}
<div class="chat-skeleton__body">
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -small"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -large"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
</div>
<div class="chat-skeleton__header">
<div class="chat-skeleton__header-img"></div>
<div class="chat-skeleton__header-name"></div>
</div>
<div class="chat-skeleton__body">
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -small"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -small"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -medium"></div>
</div>
</div>
</div>
<div class="chat-skeleton__header">
<div class="chat-skeleton__header-img"></div>
<div class="chat-skeleton__header-name"></div>
</div>
<div class="chat-skeleton__body">
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -small"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -large"></div>
<div class="chat-skeleton__message-msg -line2 -small"></div>
</div>
</div>
<div class="chat-skeleton__message">
<div class="chat-skeleton__message-avatar"></div>
<div class="chat-skeleton__message-poster"></div>
<div class="chat-skeleton__message-content">
<div class="chat-skeleton__message-msg -line1 -medium"></div>
<div class="chat-skeleton__message-msg -line2 -large"></div>
{{#each rows as |row|}}
<div class="chat-skeleton__message-msg" style={{row}}></div>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>

16
plugins/chat/assets/javascripts/discourse/components/chat-skeleton.js Normal file
View File

@ -0,0 +1,16 @@
import Component from "@glimmer/component";
import { htmlSafe } from "@ember/template";
export default class ChatSkeleton extends Component {
get placeholders() {
return Array.from({ length: 15 }, () => {
return Array.from({ length: this.#randomIntFromInterval(1, 5) }, () => {
return htmlSafe(`width: ${this.#randomIntFromInterval(20, 95)}%`);
});
});
}
#randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
}

56
plugins/chat/assets/stylesheets/common/chat-skeleton.scss
View File

@ -3,32 +3,8 @@ $radius: 10px;
.chat-skeleton {
height: auto;
&__header {
display: flex;
align-items: center;
width: 100%;
padding: 1em;
border-bottom: 1px solid var(--primary-100);
box-sizing: border-box;
}
&__header-img {
background-color: var(--primary-100);
border-radius: 50%;
width: 20px;
height: 20px;
margin-right: 0.5rem;
}
&__header-name {
background-color: var(--primary-100);
width: 70px;
height: 18px;
border-radius: $radius;
}
&__body {
padding: 1em;
padding: 0.5em 1em;
}
&__message {
@ -52,10 +28,10 @@ $radius: 10px;
border-radius: 50%;
margin-right: 0.5rem;
.chat-skeleton__message:nth-of-type(odd) & {
.chat-skeleton__body:nth-of-type(odd) & {
background-color: var(--primary-100);
}
.chat-skeleton__message:nth-of-type(even) & {
.chat-skeleton__body:nth-of-type(even) & {
background-color: var(--primary-200);
}
}
@ -68,10 +44,10 @@ $radius: 10px;
height: 20px;
border-radius: $radius;
.chat-skeleton__message:nth-of-type(odd) & {
.chat-skeleton__body:nth-of-type(odd) & {
background-color: var(--primary-100);
}
.chat-skeleton__message:nth-of-type(even) & {
.chat-skeleton__body:nth-of-type(even) & {
background-color: var(--primary-200);
}
}
@ -83,30 +59,14 @@ $radius: 10px;
&__message-msg {
height: 13px;
border-radius: $radius;
margin: 5px 0;
.chat-skeleton__message:nth-of-type(odd) & {
.chat-skeleton__body:nth-of-type(odd) & {
background-color: var(--primary-100);
}
.chat-skeleton__message:nth-of-type(even) & {
.chat-skeleton__body:nth-of-type(even) & {
background-color: var(--primary-200);
}
&.-line1 {
margin-top: 0.5rem;
margin-bottom: 0.5em;
}
&.-small {
width: 35%;
}
&.-medium {
width: 60%;
}
&.-large {
width: 85%;
}
}
&.-animation {