add: group channels, group channel members list, group channel renaming
This commit is contained in:
parent
a62905a8c4
commit
b91e9a62fb
16 changed files with 341 additions and 77 deletions
|
|
@ -47,7 +47,7 @@ hide_user_menu=true) }}
|
|||
|
||||
<div class="sidebar flex flex-col gap-2 justify-between" id="channels_list">
|
||||
<div class="flex flex-col gap-2 w-full">
|
||||
<div class="title flex justify-between">
|
||||
<div class="title flex items-center justify-between channel_header">
|
||||
{% if community %}
|
||||
<b class="name shorter">
|
||||
{% if community.context.display_name %} {{
|
||||
|
|
@ -56,7 +56,7 @@ hide_user_menu=true) }}
|
|||
</b>
|
||||
{% else %}
|
||||
<b>{{ text "chats:label.my_chats" }}</b>
|
||||
{% endif %}
|
||||
{% endif %} {% if selected_community != 0 %}
|
||||
<div class="dropdown">
|
||||
<button
|
||||
class="camo small"
|
||||
|
|
@ -67,7 +67,6 @@ hide_user_menu=true) }}
|
|||
</button>
|
||||
|
||||
<div class="inner">
|
||||
{% if selected_community != 0 %}
|
||||
<a href="/community/{{ selected_community }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span
|
||||
|
|
@ -75,7 +74,7 @@ hide_user_menu=true) }}
|
|||
}}</span
|
||||
>
|
||||
</a>
|
||||
{% endif %} {% if can_manage_channels %}
|
||||
{% if can_manage_channels %}
|
||||
<a href="/community/{{ selected_community }}/manage">
|
||||
{{ icon "settings" }}
|
||||
<span>{{ text "general:action.manage" }}</span>
|
||||
|
|
@ -83,6 +82,7 @@ hide_user_menu=true) }}
|
|||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if can_manage_channels %}
|
||||
|
|
@ -138,6 +138,8 @@ hide_user_menu=true) }}
|
|||
:root {
|
||||
--list-bar-width: 64px;
|
||||
--channels-bar-width: 256px;
|
||||
--sidebar-height: calc(100dvh - 42px);
|
||||
--channel-header-height: 48px;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -253,7 +255,7 @@ hide_user_menu=true) }}
|
|||
border-right: solid 1px var(--color-super-lowered);
|
||||
padding: 0.4rem;
|
||||
width: max-content;
|
||||
height: calc(100dvh - 42px);
|
||||
height: var(--sidebar-height);
|
||||
overflow: auto;
|
||||
transition: left 0.15s;
|
||||
z-index: 1;
|
||||
|
|
@ -274,7 +276,7 @@ hide_user_menu=true) }}
|
|||
width: calc(
|
||||
100dvw - var(--list-bar-width) - var(--channels-bar-width)
|
||||
) !important;
|
||||
height: calc(100dvh - 42px);
|
||||
height: var(--sidebar-height);
|
||||
}
|
||||
|
||||
.message {
|
||||
|
|
@ -294,13 +296,36 @@ hide_user_menu=true) }}
|
|||
}
|
||||
|
||||
.message.grouped {
|
||||
padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 52px);
|
||||
padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 42px);
|
||||
}
|
||||
|
||||
turbo-frame {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.channel_header {
|
||||
height: var(--channel-header-height);
|
||||
}
|
||||
|
||||
.members_list_half {
|
||||
padding-top: 1rem;
|
||||
border-top: solid 1px var(--color-super-lowered);
|
||||
}
|
||||
|
||||
.channels_list_half:not(.no_members),
|
||||
.members_list_half {
|
||||
overflow: auto;
|
||||
height: calc(
|
||||
(var(--sidebar-height) - var(--channel-header-height) - 8rem) /
|
||||
2
|
||||
);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
:root {
|
||||
--sidebar-height: calc(100dvh - 42px * 2);
|
||||
}
|
||||
|
||||
.message.grouped {
|
||||
padding: 0.25rem 1rem 0.25rem calc(1rem + 0.5rem + 39px);
|
||||
}
|
||||
|
|
@ -316,7 +341,7 @@ hide_user_menu=true) }}
|
|||
|
||||
#stream {
|
||||
width: 100dvw !important;
|
||||
height: calc(100dvh - 42px * 2);
|
||||
height: var(--sidebar-height);
|
||||
}
|
||||
|
||||
nav::after {
|
||||
|
|
@ -327,10 +352,6 @@ hide_user_menu=true) }}
|
|||
.chats_nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: calc(100dvh - 42px * 2);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
@ -360,6 +381,10 @@ hide_user_menu=true) }}
|
|||
anchor.href += `?nav=${window.SIDEBARS_OPEN}`;
|
||||
}
|
||||
|
||||
function mention_user(username) {
|
||||
document.getElementById("content").value += ` @${username} `;
|
||||
}
|
||||
|
||||
function toggle_sidebars() {
|
||||
window.SIDEBARS_OPEN = !window.SIDEBARS_OPEN;
|
||||
|
||||
|
|
@ -388,6 +413,58 @@ hide_user_menu=true) }}
|
|||
}
|
||||
}
|
||||
|
||||
globalThis.add_member = async (id) => {
|
||||
await trigger("atto::debounce", ["channels::add_member"]);
|
||||
const member = await trigger("atto::prompt", ["Member username:"]);
|
||||
|
||||
if (!member) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/v1/channels/${id}/add`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
member,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.update_channel_title = async (id) => {
|
||||
await trigger("atto::debounce", ["channels::update_title"]);
|
||||
const title = await trigger("atto::prompt", ["New channel title:"]);
|
||||
|
||||
if (!title) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch(`/api/v1/channels/${id}/title`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
title,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.kick_member = async (cid, uid) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
|
|
@ -493,6 +570,7 @@ hide_user_menu=true) }}
|
|||
});
|
||||
|
||||
setTimeout(() => {
|
||||
window.LAST_MESSAGE_AUTHOR_ID = null;
|
||||
window.socket.addEventListener("message", async (event) => {
|
||||
if (event.data === "Ping") {
|
||||
return socket.send("Pong");
|
||||
|
|
@ -515,6 +593,8 @@ hide_user_menu=true) }}
|
|||
if (document.getElementById("stream_body")) {
|
||||
const element = document.createElement("div");
|
||||
element.style.display = "contents";
|
||||
|
||||
const message_owner = JSON.parse(msg.data)[1].owner;
|
||||
element.innerHTML = await (
|
||||
await fetch(
|
||||
`/chats/${window.CHAT_PROPS.selected_community}/${window.CHAT_PROPS.selected_channel}/_render`,
|
||||
|
|
@ -525,6 +605,9 @@ hide_user_menu=true) }}
|
|||
},
|
||||
body: JSON.stringify({
|
||||
data: msg.data,
|
||||
grouped:
|
||||
message_owner ===
|
||||
window.LAST_MESSAGE_AUTHOR_ID,
|
||||
}),
|
||||
},
|
||||
)
|
||||
|
|
@ -534,6 +617,8 @@ hide_user_menu=true) }}
|
|||
.getElementById("stream_body")
|
||||
.prepend(element);
|
||||
clean_text();
|
||||
|
||||
window.LAST_MESSAGE_AUTHOR_ID = message_owner;
|
||||
} else {
|
||||
console.log("abandoned remote");
|
||||
socket.close();
|
||||
|
|
@ -557,7 +642,7 @@ hide_user_menu=true) }}
|
|||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: e.target.content.value,
|
||||
content: e.target.content.value.trim(),
|
||||
channel: window.CHAT_PROPS.selected_channel,
|
||||
}),
|
||||
})
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue