generated from t/malachite
add: base chat ui
This commit is contained in:
parent
747a05d649
commit
f53eb3d367
10 changed files with 176 additions and 1031 deletions
|
@ -198,7 +198,12 @@ video {
|
|||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.card_nest .card:nth-child(1) {
|
||||
.card_nest:not(.reverse) .card:nth-child(1) {
|
||||
background: var(--color-super-raised);
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
}
|
||||
|
||||
.card_nest.reverse .card:nth-child(2) {
|
||||
background: var(--color-super-raised);
|
||||
padding: var(--pad-2) var(--pad-4);
|
||||
}
|
||||
|
|
|
@ -15,11 +15,43 @@
|
|||
("href" "/chats/{{ chat.id }}")
|
||||
(text "{{ components::chat_name(chat=chat, members=members, advanced=true, avatar_size=\"18px\") }}"))))
|
||||
(div
|
||||
("class" "card flex flex_col gap_2")
|
||||
("class" "flex flex_col card_nest reverse")
|
||||
("style" "flex: 1 0 auto")
|
||||
(text "{% if messages|length == 0 -%}")
|
||||
(i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!"))
|
||||
(text "{%- endif %}"))
|
||||
(div
|
||||
("class" "card flex flex_rev_col gap_2")
|
||||
("style" "flex: 1 0 auto")
|
||||
("id" "messages_stream")
|
||||
(text "{% if chat.last_message_created > 0 -%}")
|
||||
(div
|
||||
("class" "flex gap_ch items_center")
|
||||
("id" "delivered_read_status")
|
||||
(text "{% if chat.last_message_read_by|length <= 1 -%}")
|
||||
; just delivered
|
||||
(text "{{ icon \"check\" }}")
|
||||
(text "{{ chat.last_message_created|int|date(format=\"%Y-%m-%d %H:%M\", timezone=\"Etc/UTC\") }} UTC }}")
|
||||
(text "{%- else -%}")
|
||||
; delivered and read by at least two people
|
||||
(text "{{ icon \"check-check\" }}")
|
||||
(text "{% for uid in chat.last_message_read_by -%}")
|
||||
(text "{{ components::avatar(id=uid) }}")
|
||||
(text "{%- endfor %}")
|
||||
(text "{%- endif %}"))
|
||||
(text "{%- endif %}")
|
||||
|
||||
(text "{% if messages|length == 0 -%}")
|
||||
(i ("class" "flex gap_ch items_center fade") (text "{{ icon \"star\" }} This is the start of the chat!"))
|
||||
(text "{%- endif %}"))
|
||||
(form
|
||||
("class" "card flex flex_row items_center gap_2")
|
||||
(input
|
||||
("type" "text")
|
||||
("class" "w_full")
|
||||
("name" "content")
|
||||
("id" "content")
|
||||
("placeholder" "Send a message to {{ components::chat_name(chat=chat, members=members) }}"))
|
||||
(button
|
||||
("class" "button")
|
||||
(text "{{ icon \"send\" }}"))))
|
||||
|
||||
(script
|
||||
(text ""))
|
||||
|
|
|
@ -40,3 +40,12 @@
|
|||
(text "{%- endif %}")
|
||||
(text "{%- endif %}")
|
||||
(text "{%- endmacro %}")
|
||||
|
||||
(text "{% macro message(message) -%}")
|
||||
(div
|
||||
("class" "flex w_full gap_ch message {%- if user.id == message.owner %} justify_right mine {%- endif %}")
|
||||
(div
|
||||
("class" "inner no_p_margin")
|
||||
(text "{{ message.content|markdown|safe }}"))
|
||||
(text "{{ components::avatar(id=uid) }}"))
|
||||
(text "{%- endmacro %}")
|
||||
|
|
2
app/templates_src/message.lisp
Normal file
2
app/templates_src/message.lisp
Normal file
|
@ -0,0 +1,2 @@
|
|||
(text "{%- import \"components.lisp\" as components -%}")
|
||||
(text "{{ components::message(message) }}")
|
4
app/templates_src/messages.lisp
Normal file
4
app/templates_src/messages.lisp
Normal file
|
@ -0,0 +1,4 @@
|
|||
(text "{%- import \"components.lisp\" as components -%}")
|
||||
(text "{% for message in messages -%}")
|
||||
(text "{{ components::message(message) }}")
|
||||
(text "{%- endfor %}")
|
|
@ -48,7 +48,7 @@
|
|||
(text "home"))
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "https://trisua.com/t/malachite")
|
||||
("href" "https://trisua.com/t/tawny")
|
||||
(text "source"))
|
||||
(hr)
|
||||
(text "{% if not user -%}")
|
||||
|
@ -63,8 +63,8 @@
|
|||
(text "{%- else -%}")
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "/app")
|
||||
(text "app"))
|
||||
("href" "/chats")
|
||||
(text "my chats"))
|
||||
(a
|
||||
("class" "button")
|
||||
("href" "{{ config.service_hosts.tetratto }}/settings")
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue