andyburke/autonomous.contact
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: sidebar hiding on mobile

Browse source 
feature: message actions button (nothing works yet, tho)
This commit is contained in:
Andy Burke 2025-08-19 16:58:35 -07:00
parent 01768da647
commit 2224e1abe0
5 changed files with 328 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

114
public/tabs/talk/talk.css
View file

@ -43,6 +43,12 @@
padding: 0.5rem;
}
#talk .sidebar #sidebar-toggle,
#talk .sidebar #sidebar-toggle-icon {
opacity: 0;
display: none;
}
#talk .sidebar .title {
text-transform: uppercase;
font-size: small;
@ -85,18 +91,20 @@
}
#talk #room-chat-entry-container form button {
width: inherit;
width: 50px;
padding: inherit;
margin: 0 1rem;
}
#talk #room-chat-entry-container form textarea {
width: 100%;
flex-grow: 1;
background: inherit;
color: inherit;
}
#talk .message-container {
position: relative;
transition: all 0.33s;
background: rgba(255, 255, 255, 0.03);
margin-top: 0.75rem;
@ -138,6 +146,49 @@
opacity: 0.75;
}
#talk .message-container .message-actions-container {
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: flex;
flex-direction: row;
}
#talk .message-container .message-actions-container .message-action {
opacity: 0;
transition: 0.2s ease-in-out;
width: 0;
height: 4rem;
overflow: hidden;
order: -1;
cursor: pointer;
margin-right: 1.25rem;
padding-top: 0.25rem;
text-align: center;
}
#talk .message-container .message-actions-container label {
cursor: pointer;
}
#talk .message-container .message-actions-container input[type="checkbox"] {
opacity: 0;
display: none;
}
#talk
.message-container
.message-actions-container
input[type="checkbox"]:checked
~ .message-action {
opacity: 1;
width: 4rem;
}
#talk .message-container .message-actions-container .message-action .action-name {
font-size: x-small;
}
#talk .message-container .info-container {
display: flex;
margin-bottom: -1.5rem;
@ -187,9 +238,6 @@
max-width: 640px;
}
#talk .embed-container.iframe {
}
#talk .embed-container .embed-actions-container {
position: absolute;
z-index: 100;
@ -245,3 +293,61 @@
overflow: hidden;
border-style: none;
}
@media screen and (max-width: 768px) {
#talk .sidebar {
z-index: 100;
background: var(--bg);
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left: -100%;
overflow-y: scroll;
overflow: visible;
transition: all ease-in-out 0.33s;
}
#talk .sidebar #sidebar-toggle-icon {
opacity: 1;
display: block;
position: absolute;
top: 1rem;
right: -2.5rem;
cursor: pointer;
transition: all ease-in-out 0.33s;
background: rgba(128, 128, 128, 0.5);
border-radius: 0 1rem 1rem 0;
padding: 0.5rem;
}
#talk .sidebar .icon {
transition: all ease-in-out 0.33s;
}
#talk .sidebar:has(#sidebar-toggle:checked) {
left: 0;
}
#talk .sidebar:has(#sidebar-toggle:checked) #sidebar-toggle-icon {
right: 0;
rotate: 180deg;
}
#talk #room-chat-container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
#talk #room-chat-container #room-chat-entry-container,
#talk #room-chat-container #room-chat-entry-container form {
padding: 0.25rem;
}
#talk #room-chat-container #room-chat-entry-container form button {
margin: 0 0.5rem;
}
}

4
public/tabs/talk/talk.html
View file

@ -18,6 +18,10 @@
<script src="/js/external/punycode.js" type="text/javascript"></script>
<script src="/tabs/talk/talk.js" type="text/javascript"></script>
<div class="sidebar resizable">
<input type="checkbox" id="sidebar-toggle" />
<label id="sidebar-toggle-icon" for="sidebar-toggle">
<div class="icon right"></div>
</label>
<div id="room-creation-container" data-requires-permission="rooms.create">
<button
id="toggle-room-creation-form-button"

18
public/tabs/talk/talk.js
View file

@ -235,7 +235,21 @@ function render_text_event(room_chat_content, event, creator, existing_element)
last_creator_id = creator.id;
}
const html_content = `<div id="chat-${event.id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
const message_id = event.id.substring(0, 49);
const html_content = `<div id="chat-${message_id}" class="message-container ${user_tick_tock_class} ${time_tick_tock_class}" data-creator_id="${creator.id}">
<div class="message-actions-container">
<input
type="checkbox"
id="show_message_actions-${message_id}"
class="message-actions-display-toggle"
/>
<label for="show_message_actions-${message_id}" class="message-actions-display-toggle-label"
><div class="icon more"></div>
</label>
<div class="message-action" data-action="reply"><i class="icon reply"></i><span class="action-name">Reply</span></div>
<div class="message-action" data-action="forward_copy"><i class="icon forward-copy"></i><span class="action-name">Forward (Copy Link)</span></div>
<div class="message-action" data-action="delete"><i class="icon trash"></i><span class="action-name">Delete</span></div>
</div>
<div class="info-container">
<div class="avatar-container">
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
@ -299,7 +313,7 @@ async function append_room_events(events) {
(await (await api.fetch(`/api/users/${event.creator_id}`)).json());
const existing_element =
document.getElementById(`chat-${event.id}`) ??
document.getElementById(`chat-${event.id.substring(0, 49)}`) ??
(event.meta?.temp_id
? document.getElementById(`chat-${event.meta.temp_id}`)
: undefined);