From 2224e1abe05bfd0f7d7fce7231d252db82b552dc Mon Sep 17 00:00:00 2001 From: Andy Burke Date: Tue, 19 Aug 2025 16:58:35 -0700 Subject: [PATCH] feature: sidebar hiding on mobile feature: message actions button (nothing works yet, tho) --- README.md | 6 ++ public/base.css | 192 +++++++++++++++++++++++++++++++++++++ public/tabs/talk/talk.css | 114 +++++++++++++++++++++- public/tabs/talk/talk.html | 4 + public/tabs/talk/talk.js | 18 +++- 5 files changed, 328 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 76bfb42..ac47bd6 100644 --- a/README.md +++ b/README.md @@ -23,10 +23,16 @@ feature discussions. - [X] avatar uploads - [X] chat rooms - [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 - [ ] chat input box should auto-complete users for you - [ ] messages to you should be highlighted somehow - [ ] chat message reactions + - [X] sidebar on mobile needs to show/hide via a button - [ ] clean up after initial implementation - [X] split the monolithic talk.html up - [ ] chat message processing diff --git a/public/base.css b/public/base.css index ff451e9..e5264f6 100644 --- a/public/base.css +++ b/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; +} diff --git a/public/tabs/talk/talk.css b/public/tabs/talk/talk.css index cecfa7f..e4fcf37 100644 --- a/public/tabs/talk/talk.css +++ b/public/tabs/talk/talk.css @@ -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; + } +} diff --git a/public/tabs/talk/talk.html b/public/tabs/talk/talk.html index fa046f0..73e9f16 100644 --- a/public/tabs/talk/talk.html +++ b/public/tabs/talk/talk.html @@ -18,6 +18,10 @@
+ +