feature: sidebar hiding on mobile
feature: message actions button (nothing works yet, tho)
This commit is contained in:
parent
01768da647
commit
2224e1abe0
5 changed files with 328 additions and 6 deletions
|
|
@ -23,10 +23,16 @@ feature discussions.
|
||||||
- [X] avatar uploads
|
- [X] avatar uploads
|
||||||
- [X] chat rooms
|
- [X] chat rooms
|
||||||
- [X] chat messages
|
- [X] chat messages
|
||||||
|
- [ ] chat message actions
|
||||||
|
- [X] '...' button to show actions
|
||||||
|
- [ ] delete message
|
||||||
|
- [ ] reply to message
|
||||||
|
- [ ] copy message link
|
||||||
- [ ] @-prefixing of users for notifications/highlighting
|
- [ ] @-prefixing of users for notifications/highlighting
|
||||||
- [ ] chat input box should auto-complete users for you
|
- [ ] chat input box should auto-complete users for you
|
||||||
- [ ] messages to you should be highlighted somehow
|
- [ ] messages to you should be highlighted somehow
|
||||||
- [ ] chat message reactions
|
- [ ] chat message reactions
|
||||||
|
- [X] sidebar on mobile needs to show/hide via a button
|
||||||
- [ ] clean up after initial implementation
|
- [ ] clean up after initial implementation
|
||||||
- [X] split the monolithic talk.html up
|
- [X] split the monolithic talk.html up
|
||||||
- [ ] chat message processing
|
- [ ] chat message processing
|
||||||
|
|
|
||||||
192
public/base.css
192
public/base.css
|
|
@ -354,6 +354,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
||||||
right: -5px;
|
right: -5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ICON - FORWARD */
|
||||||
|
.icon.forward-copy {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
box-shadow: 6px -6px 0 -4px;
|
||||||
|
}
|
||||||
|
.icon.forward-copy::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1px;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.icon.forward-copy::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
background: currentColor;
|
||||||
|
width: 2px;
|
||||||
|
height: 10px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
bottom: 8px;
|
||||||
|
right: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ICON - HOME */
|
/* ICON - HOME */
|
||||||
.icon.home {
|
.icon.home {
|
||||||
background:
|
background:
|
||||||
|
|
@ -406,6 +442,33 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ICON - MORE */
|
||||||
|
.icon.more {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 24px;
|
||||||
|
height: 20px;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.icon.more::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: currentColor;
|
||||||
|
border-radius: 20px;
|
||||||
|
top: 6px;
|
||||||
|
left: 8px;
|
||||||
|
box-shadow:
|
||||||
|
-5px 0 0,
|
||||||
|
5px 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
/* ICON - PLUS */
|
/* ICON - PLUS */
|
||||||
.icon.plus,
|
.icon.plus,
|
||||||
.icon.plus::after,
|
.icon.plus::after,
|
||||||
|
|
@ -441,6 +504,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ICON - REPLY */
|
||||||
|
.icon.reply {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
box-shadow: -6px -6px 0 -4px;
|
||||||
|
}
|
||||||
|
.icon.reply::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 2px solid;
|
||||||
|
border-radius: 1px;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
.icon.reply::after {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
background: currentColor;
|
||||||
|
width: 2px;
|
||||||
|
height: 10px;
|
||||||
|
transform: rotate(-45deg);
|
||||||
|
bottom: 8px;
|
||||||
|
left: 2px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ICON - RESOURCES */
|
/* ICON - RESOURCES */
|
||||||
.icon.resources,
|
.icon.resources,
|
||||||
.icon.resources::after {
|
.icon.resources::after {
|
||||||
|
|
@ -529,6 +628,46 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
||||||
inset 0 0 0 2px currentColor;
|
inset 0 0 0 2px currentColor;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ICON - TRASH */
|
||||||
|
.icon.trash {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 10px;
|
||||||
|
height: 12px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
box-shadow: 0 0 0 2px, inset -2px 0 0, inset 2px 0 0;
|
||||||
|
border-bottom-left-radius: 1px;
|
||||||
|
border-bottom-right-radius: 1px;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
.icon.trash::after,
|
||||||
|
.icon.trash::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.icon.trash::after {
|
||||||
|
background: currentColor;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 16px;
|
||||||
|
height: 2px;
|
||||||
|
top: -4px;
|
||||||
|
left: -5px;
|
||||||
|
}
|
||||||
|
.icon.trash::before {
|
||||||
|
width: 10px;
|
||||||
|
height: 4px;
|
||||||
|
border: 2px solid;
|
||||||
|
border-bottom: transparent;
|
||||||
|
border-top-left-radius: 2px;
|
||||||
|
border-top-right-radius: 2px;
|
||||||
|
top: -7px;
|
||||||
|
left: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
/* ICON - USER */
|
/* ICON - USER */
|
||||||
.icon.user,
|
.icon.user,
|
||||||
.icon.user::after,
|
.icon.user::after,
|
||||||
|
|
@ -597,3 +736,56 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
||||||
left: -1px;
|
left: -1px;
|
||||||
top: 8px;
|
top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ICONS - RIGHT/LEFT */
|
||||||
|
.icon.right {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.icon.right::after,
|
||||||
|
.icon.right::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-right: 2px solid;
|
||||||
|
border-top: 2px solid;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
top: 7px;
|
||||||
|
right: 6px;
|
||||||
|
}
|
||||||
|
.icon.right::after {
|
||||||
|
right: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon.left {
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
transform: scale(var(--icon-scale, 1));
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
.icon.left::after,
|
||||||
|
.icon.left::before {
|
||||||
|
content: "";
|
||||||
|
display: block;
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: absolute;
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border-left: 2px solid;
|
||||||
|
border-bottom: 2px solid;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
top: 7px;
|
||||||
|
left: 6px;
|
||||||
|
}
|
||||||
|
.icon.left::after {
|
||||||
|
left: 11px;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -43,6 +43,12 @@
|
||||||
padding: 0.5rem;
|
padding: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#talk .sidebar #sidebar-toggle,
|
||||||
|
#talk .sidebar #sidebar-toggle-icon {
|
||||||
|
opacity: 0;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
#talk .sidebar .title {
|
#talk .sidebar .title {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: small;
|
font-size: small;
|
||||||
|
|
@ -85,18 +91,20 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
#talk #room-chat-entry-container form button {
|
#talk #room-chat-entry-container form button {
|
||||||
width: inherit;
|
width: 50px;
|
||||||
padding: inherit;
|
padding: inherit;
|
||||||
margin: 0 1rem;
|
margin: 0 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#talk #room-chat-entry-container form textarea {
|
#talk #room-chat-entry-container form textarea {
|
||||||
|
width: 100%;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
background: inherit;
|
background: inherit;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
#talk .message-container {
|
#talk .message-container {
|
||||||
|
position: relative;
|
||||||
transition: all 0.33s;
|
transition: all 0.33s;
|
||||||
background: rgba(255, 255, 255, 0.03);
|
background: rgba(255, 255, 255, 0.03);
|
||||||
margin-top: 0.75rem;
|
margin-top: 0.75rem;
|
||||||
|
|
@ -138,6 +146,49 @@
|
||||||
opacity: 0.75;
|
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 {
|
#talk .message-container .info-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-bottom: -1.5rem;
|
margin-bottom: -1.5rem;
|
||||||
|
|
@ -187,9 +238,6 @@
|
||||||
max-width: 640px;
|
max-width: 640px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#talk .embed-container.iframe {
|
|
||||||
}
|
|
||||||
|
|
||||||
#talk .embed-container .embed-actions-container {
|
#talk .embed-container .embed-actions-container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
|
|
@ -245,3 +293,61 @@
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-style: none;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -18,6 +18,10 @@
|
||||||
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
<script src="/js/external/punycode.js" type="text/javascript"></script>
|
||||||
<script src="/tabs/talk/talk.js" type="text/javascript"></script>
|
<script src="/tabs/talk/talk.js" type="text/javascript"></script>
|
||||||
<div class="sidebar resizable">
|
<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">
|
<div id="room-creation-container" data-requires-permission="rooms.create">
|
||||||
<button
|
<button
|
||||||
id="toggle-room-creation-form-button"
|
id="toggle-room-creation-form-button"
|
||||||
|
|
|
||||||
|
|
@ -235,7 +235,21 @@ function render_text_event(room_chat_content, event, creator, existing_element)
|
||||||
last_creator_id = creator.id;
|
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="info-container">
|
||||||
<div class="avatar-container">
|
<div class="avatar-container">
|
||||||
<img src="${creator.meta?.avatar ?? "/images/default_avatar.gif"}" alt="user avatar" />
|
<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());
|
(await (await api.fetch(`/api/users/${event.creator_id}`)).json());
|
||||||
|
|
||||||
const existing_element =
|
const existing_element =
|
||||||
document.getElementById(`chat-${event.id}`) ??
|
document.getElementById(`chat-${event.id.substring(0, 49)}`) ??
|
||||||
(event.meta?.temp_id
|
(event.meta?.temp_id
|
||||||
? document.getElementById(`chat-${event.meta.temp_id}`)
|
? document.getElementById(`chat-${event.meta.temp_id}`)
|
||||||
: undefined);
|
: undefined);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue