diff --git a/.changeset/shiny-dolls-shop.md b/.changeset/shiny-dolls-shop.md new file mode 100644 index 000000000..f753c3ee0 --- /dev/null +++ b/.changeset/shiny-dolls-shop.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": minor +--- + +New Chat component diff --git a/src/pages/_data/chat.yml b/src/pages/_data/chat.yml new file mode 100644 index 000000000..484e9c4c1 --- /dev/null +++ b/src/pages/_data/chat.yml @@ -0,0 +1,39 @@ +- timestamp: "09:32" + person-id: 0 + message: "Hey guys, I just pushed a new commit on the dev 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 calculateStatistics 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 package.json. Did you also update the README 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 calculateStatistic 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 README is updated, I'll merge this commit into the main branch. Nice work, Paweł." +- timestamp: "09:52" + person-id: 0 + message: 'Thanks, @everyone! 🙌' +- person-id: 4 + loading: true \ No newline at end of file diff --git a/src/pages/_includes/ui/chat.html b/src/pages/_includes/ui/chat.html new file mode 100644 index 000000000..691a8ee49 --- /dev/null +++ b/src/pages/_includes/ui/chat.html @@ -0,0 +1,40 @@ +
+
+ {% for message in site.data.chat %} + {% assign person = site.data.people[message.person-id] %} + {% capture chat-avatar %} +
{% include ui/avatar.html person=person %}
+ {% endcapture %} + {% capture chat-message %} +
+
+ {% unless message.loading %} +
+
+
{{ person.full_name }}
+
{{ message.timestamp }}
+
+
+ {% endunless %} +
+ {% if message.loading %} +

typing

+ {% else %} +

{{ message.message }}

+ {% endif %} + + {% if message.gif %} +
+ +
+ {% endif %} +
+
+
+ {% endcapture %} +
+
{% if message.person-id == 0 %} {{ chat-message }} {{ chat-avatar }} {% else %} {{ chat-avatar }} {{ chat-message }} {% endif %}
+
+ {% endfor %} +
+
\ No newline at end of file diff --git a/src/scss/_core.scss b/src/scss/_core.scss index 495f10620..23a0a8497 100644 --- a/src/scss/_core.scss +++ b/src/scss/_core.scss @@ -61,6 +61,7 @@ @import "ui/type"; @import "ui/charts"; @import "ui/offcanvas"; +@import "ui/chat"; @import "utils/background"; @import "utils/colors"; diff --git a/src/scss/ui/_cards.scss b/src/scss/ui/_cards.scss index 03d72a31d..c5044a0f3 100644 --- a/src/scss/ui/_cards.scss +++ b/src/scss/ui/_cards.scss @@ -583,4 +583,12 @@ Card list group border-bottom-left-radius: var(--#{$prefix}card-border-radius); border-top-left-radius: 0; } +} + +/** +Card note +*/ +.card-note { + --#{$prefix}card-bg: #fff7dd; + --#{$prefix}card-border-color: #fff1c9; } \ No newline at end of file diff --git a/src/scss/ui/_chat.scss b/src/scss/ui/_chat.scss new file mode 100644 index 000000000..bbb93fd44 --- /dev/null +++ b/src/scss/ui/_chat.scss @@ -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; + } +}