-
-
Notifications
You must be signed in to change notification settings - Fork 3.9k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
131 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
--- | ||
"@tabler/core": minor | ||
--- | ||
|
||
New Chat component |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
- timestamp: "09:32" | ||
person-id: 0 | ||
message: "Hey guys, I just pushed a new commit on the <code>dev</code> branch. Can you have a look and tell me what you think?" | ||
- timestamp: "09:34" | ||
person-id: 2 | ||
message: "Sure Paweł, let me pull the latest updates." | ||
- timestamp: "09:34" | ||
person-id: 3 | ||
message: "I'm on it too 👊" | ||
- timestamp: "09:40" | ||
person-id: 2 | ||
message: "I see you've refactored the <code>calculateStatistics</code> function. The code is much cleaner now." | ||
- timestamp: "09:42" | ||
person-id: 0 | ||
message: "Yes, I thought it was getting a bit cluttered." | ||
- timestamp: "09:43" | ||
person-id: 4 | ||
message: "The commit message is descriptive, too. Good job on mentioning the issue number it fixes." | ||
- timestamp: "09:44" | ||
person-id: 3 | ||
message: "I noticed you added some new dependencies in the <code>package.json</code>. Did you also update the <code>README</code> with the setup instructions?" | ||
- timestamp: "09:45" | ||
person-id: 0 | ||
message: "Oops, I forgot. I'll add that right away." | ||
gif: "https://media3.giphy.com/media/VABbCpX94WCfS/giphy.gif" | ||
- timestamp: "09:46" | ||
person-id: 2 | ||
message: "I see a couple of edge cases we might not be handling in the <code>calculateStatistic</code> function. Should I open an issue for that?" | ||
- timestamp: "09:47" | ||
person-id: 0 | ||
message: "Yes, Bob. Please do. We should not forget to handle those." | ||
- timestamp: "09:50" | ||
person-id: 4 | ||
message: "Alright, once the <code>README</code> is updated, I'll merge this commit into the main branch. Nice work, Paweł." | ||
- timestamp: "09:52" | ||
person-id: 0 | ||
message: 'Thanks, <a href="#">@everyone</a>! 🙌' | ||
- person-id: 4 | ||
loading: true |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<div class="chat"> | ||
<div class="chat-bubbles"> | ||
{% for message in site.data.chat %} | ||
{% assign person = site.data.people[message.person-id] %} | ||
{% capture chat-avatar %} | ||
<div class="col-auto">{% include ui/avatar.html person=person %}</div> | ||
{% endcapture %} | ||
{% capture chat-message %} | ||
<div class="{% if message.loading %}col-auto{% else %}col{% if include.wide %} col-lg-6{% endif %}{% endif %}"> | ||
<div class="chat-bubble{% if message.person-id == 0 %} chat-bubble-me{% endif %}"> | ||
{% unless message.loading %} | ||
<div class="chat-bubble-title"> | ||
<div class="row"> | ||
<div class="col chat-bubble-author">{{ person.full_name }}</div> | ||
<div class="col-auto chat-bubble-date">{{ message.timestamp }}</div> | ||
</div> | ||
</div> | ||
{% endunless %} | ||
<div class="chat-bubble-body"> | ||
{% if message.loading %} | ||
<p class="text-secondary text-italic">typing<span class="animated-dots"></span></p> | ||
{% else %} | ||
<p>{{ message.message }}</p> | ||
{% endif %} | ||
|
||
{% if message.gif %} | ||
<div class="mt-2"> | ||
<img src="{{ message.gif }}" alt="" class="rounded img-fluid" /> | ||
</div> | ||
{% endif %} | ||
</div> | ||
</div> | ||
</div> | ||
{% endcapture %} | ||
<div class="chat-item"> | ||
<div class="row align-items-end{% if message.person-id == 0 %} justify-content-end{% endif %}">{% if message.person-id == 0 %} {{ chat-message }} {{ chat-avatar }} {% else %} {{ chat-avatar }} {{ chat-message }} {% endif %}</div> | ||
</div> | ||
{% endfor %} | ||
</div> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
.chat { | ||
} | ||
|
||
.chat-bubbles { | ||
display: flex; | ||
flex-direction: column; | ||
gap: 1rem; | ||
} | ||
|
||
.chat-bubble { | ||
background: var(--#{$prefix}bg-surface-secondary); | ||
border-radius: var(--#{$prefix}border-radius-lg); | ||
padding: 1rem; | ||
position: relative; | ||
} | ||
|
||
.chat-bubble-me { | ||
background-color: var(--#{$prefix}primary-lt); | ||
box-shadow: none; | ||
} | ||
|
||
.chat-bubble-title { | ||
margin-bottom: 0.25rem; | ||
} | ||
|
||
.chat-bubble-author { | ||
font-weight: 600; | ||
} | ||
|
||
.chat-bubble-date { | ||
color: var(--#{$prefix}secondary); | ||
} | ||
|
||
.chat-bubble-body { | ||
> *:last-child { | ||
margin-bottom: 0; | ||
} | ||
} |