radon/radchat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add file picker, fix css for it

Browse Source
This commit is contained in:
Radon 2025-08-29 21:01:41 -05:00
parent e1b638f3da
commit 59638a3a04
3 changed files with 33 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/app.js
View File

@ -489,13 +489,14 @@ class UIManager {
emojiPicker.style.gridTemplateColumns = 'repeat(auto-fill, minmax(3rem, 1fr))';
emojiPicker.style.gap = '1rem';
emojiPicker.style.position = 'absolute';
emojiPicker.style.bottom = '8rem';
emojiPicker.style.right = '1rem';
emojiPicker.style.bottom = '20vh';
emojiPicker.style.right = '2vw';
emojiPicker.style.width = '50vw';
emojiPicker.style.height = '30vh';
emojiPicker.style.overflowY = 'scroll';
emojiPicker.style.overflowX = 'hidden';
emojiPicker.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
emojiPicker.style.border = "3px solid var(--border)";
// Add emojis to the picker
@ -1929,6 +1930,13 @@ class EventHandlers {
const joinChatBtn = document.getElementById('join-chat-btn');
const chatInput = document.getElementById('chat-input');
const sendBtn = document.getElementById('send-btn');
const fileBtn = document.getElementById('file-btn');
fileBtn.addEventListener('change', () => {
const fileList = this.files;
console.log(fileList);
});
joinChatBtn.disabled = usernameInput.value.trim().length === 0;
usernameInput.addEventListener('input', function() {

10
static/index.html
View File

@ -104,9 +104,13 @@
rows="1"
></textarea>
<label for="chat-input"></label>
<button id="scroll-btn" onclick="scrollChatToBottom()" style="display: none;">⮟</button>
<button id="emoji-btn" onclick="toggleEmojiPicker()">😀</button>
<button id="send-btn" onclick="sendChatMessage()" disabled>Send</button>
<div class="chat-input-buttons">
<button id="scroll-btn" onclick="scrollChatToBottom()" style="display: none;">⮟</button>
<input type="file" id="file-input" multiple style="display: none;"/>
<button id="file-btn" onclick='console.log("File button clicked")'>📤</button>
<button id="emoji-btn" onclick="toggleEmojiPicker()">😀</button>
<button id="send-btn" onclick="sendChatMessage()" disabled>Send</button>
</div>
</div>
</div>

18
static/styles.css
View File

@ -778,7 +778,7 @@ main {
transition: border-color 0.3s ease;
resize: none;
height: var(--chat-section-height);
min-height: var(--chat-section-height);
min-height: calc(var(--chat-section-height) * 2.1);
max-height: 50vh;
overflow-y: visible;
line-height: 1.4;
@ -793,15 +793,23 @@ main {
color: var(--text-secondary);
}
.chat-input-buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(1, 1fr);
gap: 0.5rem;
}
#send-btn,
#scroll-btn,
#file-btn,
#emoji-btn {
padding: 1rem 1.75rem;
text-align: center;
border-radius: 8px;
background-color: var(--bg-tertiary);
color: var(--text-primary);
font-size: 1rem;
/*font-size: 1rem;*/
height: var(--chat-section-height);
min-height: var(--chat-section-height);
font-weight: 500;
@ -810,6 +818,11 @@ main {
border: 1px solid var(--border);
}
#send-btn {
grid-column: 1 / 3;
}
#send-btn:hover:not(:disabled),
#scroll-btn:hover:not(:disabled),
#emoji-btn:hover:not(:disabled) {
@ -1510,6 +1523,7 @@ button:disabled {
/* Mobile chat input */
.chat-input-container {
gap: 0.75rem;
min-width: 180px;
}
#chat-input {