MAINT: Move the chat-room-reply-indicator DIV up one level

This commit is contained in:
bananarama92 2025-03-31 16:36:40 +02:00
parent 71f4ede190
commit 8a074d6ac0
No known key found for this signature in database
GPG key ID: E83C7D3B5DA36248
3 changed files with 48 additions and 42 deletions
BondageClub
CSS
Screens/Online/ChatRoom

View file

@ -344,5 +344,5 @@ select:invalid:not(:disabled):not(:read-only) {
}
.hidden {
display: none;
}
display: none !important;
}

View file

@ -101,25 +101,30 @@
border-left: min(0.2vh, 0.1vw) inset black;
justify-self: center;
}
#chat-room-reply-indicator-text {
color: var(--base-font-color);
text-overflow: ellipsis;
text-wrap: nowrap;
overflow: hidden;
flex: 1;
line-height: 1.6em;
border: min(0.2vh, 0.1vw) solid black;
border-right: none;
user-select: none
user-select: none;
border-right: black solid max(3px, min(0.4vh, 0.2vw));
padding-left: 4px;
}
#chat-room-reply-indicator:not(.hidden) {
background-color: var(--base-color, #eee);
position: absolute;
transform: translateY(-105%);
width: 100%;
#chat-room-reply-indicator {
background-color: #eee;
display: flex;
height: 1.6em;
}
#chat-room-reply-indicator-close {
aspect-ratio: 1;
}
#chat-room-reply-indicator-close::before {
content: "❌";
}
#InputChat {
grid-area: chat-input;
min-height: var(--button-size);
@ -131,15 +136,7 @@
border: unset;
outline: unset;
}
#chat-room-reply-indicator-close::before {
content: "❌";
}
#chat-room-reply-indicator-close {
background-color: var(--base-color, #eee);
border: min(0.2vh, 0.1vw) solid black;
cursor: pointer;
aspect-ratio: 1;
}
#InputChat:focus {
scrollbar-width: auto;
}
@ -316,8 +313,10 @@
--base-font-color: #eee;
}
#TextAreaChatLog[data-colortheme="dark"]~#chat-room-bot,
#TextAreaChatLog[data-colortheme="dark2"]~#chat-room-bot {
#TextAreaChatLog[data-colortheme="dark"] ~ #chat-room-bot,
#TextAreaChatLog[data-colortheme="dark2"] ~ #chat-room-bot,
#TextAreaChatLog[data-colortheme="dark"] ~ #chat-room-reply-indicator,
#TextAreaChatLog[data-colortheme="dark2"] ~ #chat-room-reply-indicator {
--button-color: #eee;
--base-color: #111;
--base-font-color: #eee;

View file

@ -1159,23 +1159,23 @@ function ChatRoomCreateElement() {
attributes: { id: "TextAreaChatLog", role: "log" },
classList: ["scroll-box"],
},
{
tag: "div",
attributes: {id: "chat-room-reply-indicator"},
classList: ["hidden"],
children: [
{ tag: "span", attributes: { id: "chat-room-reply-indicator-text" }, children: [TextGet("ChatRoomReply")] },
ElementButton.Create(
"chat-room-reply-indicator-close",
ChatRoomMessageReplyStop,
{ noStyling: true },
),
],
},
{
tag: "div",
attributes: { id: "chat-room-bot" },
children: [
{
tag: "div",
attributes: {id: "chat-room-reply-indicator"},
classList: ["hidden"],
children: [
{ tag: "span", attributes: { id: "chat-room-reply-indicator-text" }, children: [TextGet("ChatRoomReply")] },
ElementButton.Create(
"chat-room-reply-indicator-close",
ChatRoomMessageReplyStop,
{ noStyling: true },
),
],
},
{
tag: "textarea",
attributes: {
@ -4419,10 +4419,12 @@ function ChatRoomMessageGetType(msgId) {
* Closes the reply.
*/
function ChatRoomMessageReplyStop() {
const chatInput = /** @type {null | HTMLTextAreaElement} */(document.getElementById("InputChat"));
const replyIndicator = document.getElementById("chat-room-reply-indicator");
chatInput.removeAttribute("reply-id");
replyIndicator.classList.add("hidden");
const chatInput = document.getElementById("InputChat");
document.getElementById("chat-room-reply-indicator")?.classList.add("hidden");
if (chatInput) {
chatInput.removeAttribute("reply-id");
ChatRoomInputResize(chatInput);
}
}
/**
@ -4431,8 +4433,12 @@ function ChatRoomMessageReplyStop() {
*/
function ChatRoomMessageSetReply(msgId) {
const chatInput = /** @type {null | HTMLTextAreaElement} */(document.getElementById("InputChat"));
chatInput.setAttribute("reply-id", msgId);
const replyMessage = ChatRoomMessageGetById(msgId);
if (!chatInput || !replyMessage) {
return;
}
chatInput.setAttribute("reply-id", msgId);
const type = ChatRoomMessageGetType(msgId);
const isWhisper = type === "Whisper";
if (isWhisper) {
@ -4444,6 +4450,7 @@ function ChatRoomMessageSetReply(msgId) {
const replyName = ChatRoomMessageGetReplyName(msgId, isWhisper);
replyIndicatorText.textContent = `${TextGet("ChatRoomReply")}: ${replyName && `${replyName}` || "a message"}`;
replyIndicator.classList.remove("hidden");
ChatRoomInputResize(chatInput);
chatInput.focus();
}