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
192
public/base.css
192
public/base.css
|
|
@ -354,6 +354,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
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 {
|
||||
background:
|
||||
|
|
@ -406,6 +442,33 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
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::after,
|
||||
|
|
@ -441,6 +504,42 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
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::after {
|
||||
|
|
@ -529,6 +628,46 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
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::after,
|
||||
|
|
@ -597,3 +736,56 @@ body[data-perms*="rooms.create"] [data-requires-permission="rooms.create"] {
|
|||
left: -1px;
|
||||
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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue