rDrama
/
rDrama
9
10
Fork 6
Code Issues Pull Requests Packages Releases Wiki Activity

fix chat annoyance

pull/83/head
Aevann 2022-12-30 20:09:55 +02:00
parent 5f2568a06b
commit f5211c19f9
11 changed files with 34894 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.gitignore vendored
View File

@ -9,7 +9,3 @@ __pycache__/
# Chat environment
chat/node_modules
chat/build
# Chat artefacts
files/assets/css/chat_done.css
files/assets/js/chat_done.js

4
chat/src/App.css
View File

@ -118,10 +118,6 @@ body {
padding-right: 1rem;
padding-left: 1rem;
}
.App-content__reduced {
height: calc(var(--vh, 1vh) * 55);
}
}
lite-youtube {

6
chat/src/App.tsx
View File

@ -1,5 +1,3 @@
(window as any).global = window;
import cx from "classnames";
import throttle from "lodash.throttle";
import React, { useCallback, useEffect, useRef, useState } from "react";
@ -106,9 +104,7 @@ function AppInner() {
</div>
<div className="App-center">
<div
className={cx("App-content", {
"App-content__reduced": quote || focused,
})}
className={cx("App-content")}
ref={contentWrapper}
>
{open ? (

16
chat/src/features/chat/UserInput.css
View File

@ -4,14 +4,6 @@
align-items: center;
}
@media screen and (max-width: 1100px) {
.UserInput-input__large {
min-height: 100px !important;
height: 100px !important;
max-height: 100px !important;
}
}
.UserInput-input {
flex: 1;
margin-right: 2rem;
@ -20,6 +12,14 @@
max-height: 50px;
}
@media screen and (max-width: 1100px) {
.UserInput-input {
min-height: 100px !important;
height: 100px !important;
max-height: 100px !important;
}
}
.UserInput-emoji {
cursor: pointer;
font-size: 20px;

4
chat/src/features/chat/UserInput.tsx
View File

@ -117,9 +117,7 @@ export function UserInput({ large = false, onFocus, onBlur }: Props) {
<textarea
ref={builtChatInput}
id="builtChatInput"
className={cx("UserInput-input form-control", {
"UserInput-input__large": large
})}
className={cx("UserInput-input form-control")}
minLength={1}
maxLength={1000}
rows={1}

328
files/assets/css/chat_done.css 100644
View File

@ -0,0 +1,328 @@
/* src/App.css */
html,
body {
overscroll-behavior-y: none;
}
html {
height: -webkit-fill-available;
}
body {
min-height: 100vh;
min-height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
min-height: -webkit-fill-available;
}
.App {
position: fixed;
width: 100vw;
display: flex;
overflow: hidden;
}
.App-wrapper {
flex: 1;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 2rem;
}
.App-heading {
flex-basis: 3rem;
display: flex;
align-items: center;
}
.App-heading small {
opacity: 0.2;
font-size: 10px;
}
.App-side {
height: 100%;
flex: 1;
background: var(--gray-500);
position: relative;
}
.App-content {
position: relative;
flex: 3;
height: 62vh;
height: calc(var(--vh, 1vh) * 72);
max-height: 1000px;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
display: flex;
flex-direction: column;
}
.App-content::-webkit-scrollbar {
display: none;
}
.App-drawer {
z-index: 2;
display: flex;
background: rgb(var(--background));
height: 100%;
}
.App-center {
display: flex;
align-items: flex-start;
}
.App-bottom-wrapper {
display: flex;
align-items: flex-start;
}
.App-bottom {
flex: 3;
}
.App-bottom-dummy {
flex: 1;
}
.App-bottom-extra {
padding: .25rem;
}
@media screen and (max-width: 1100px) {
.App-wrapper {
margin: 0 auto;
}
.App-heading {
padding: 0 1rem;
}
.App-side {
display: none;
}
.App-bottom-dummy {
display: none;
}
.App-bottom-wrapper {
padding-right: 1rem;
padding-left: 1rem;
}
}
lite-youtube {
min-width: min(80vw, 500px);
}
.btn-secondary {
border: none !important;
}
.btn-secondary:focus {
border: none !important;
box-shadow: none !important;
}
/* src/features/chat/UserList.css */
.UserList {
padding: 1rem;
flex: 1;
}
.UserList-heading {
display: flex;
align-items: center;
justify-content: space-between;
}
.UserList-heading h5 {
margin-right: 2rem;
}
.UserList ul {
max-height: calc(var(--vh, 1vh) * 50);
overflow: auto;
}
.UserList ul::-webkit-scrollbar {
display: none;
}
/* src/features/chat/ChatHeading.css */
.ChatHeading {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.ChatHeading i {
margin-right: 0.5rem;
}
/* src/features/chat/Username.css */
.Username {
display: inline-flex;
align-items: center;
}
.Username > a {
font-weight: bold;
margin-left: 8px;
}
/* src/features/chat/QuotedMessageLink.css */
.QuotedMessageLink {
font-size: 10px;
}
/* src/features/chat/ChatMessage.css */
.ChatMessage {
position: relative;
padding-right: 1.5rem;
max-height: 300px;
}
.ChatMessage__isDm {
background: var(--gray-800);
border-top: 1px dashed var(--primary);
border-bottom: 1px dashed var(--primary);
}
.ChatMessage__isOptimistic {
opacity: 0.5;
}
.ChatMessage p {
margin: 0;
}
.ChatMessage .btn {
border: none !important;
}
.ChatMessage-top {
display: flex;
align-items: center;
}
.ChatMessage-timestamp {
margin-left: 0.5rem;
opacity: 0.5;
font-size: 10px;
}
.ChatMessage-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 30px;
overflow: hidden;
}
.ChatMessage-content {
margin-right: 0.5rem;
word-wrap: break-word;
display: inline-block;
}
.ChatMessage-button {
margin: 0 0.5rem;
}
.ChatMessage-button i {
margin-right: 0.5rem;
}
.ChatMessage-button__confirmed {
color: red !important;
}
.ChatMessage-quoted-link {
padding-left: 2rem;
}
.ChatMessage-actions-button {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
z-index: 5;
background: none !important;
border: none !important;
box-shadow: none !important;
display: flex;
align-items: center;
}
.ChatMessage-actions-button button {
background: none !important;
border: none !important;
padding: 0 !important;
}
.ChatMessage-actions-button button i {
position: relative;
top: 3px;
margin-right: 1rem;
}
.ChatMessage-actions {
z-index: 1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(20, 20, 20, 0.85);
display: flex;
align-items: center;
justify-content: flex-end;
padding: 1rem;
padding-right: 3rem;
animation: fading-in 0.3s ease-in-out forwards;
}
.ChatMessage-actions button {
font-size: 10px;
background: none !important;
}
.ChatMessageList {
flex: 1;
}
.ChatMessageList-group {
margin-bottom: 1rem;
padding: 0.3rem;
border-radius: 8px;
}
.ChatMessageList-group:nth-child(even) {
background: rgba(255, 255, 255, 0.025);
}
/* src/drawers/BaseDrawer.css */
.BaseDrawer {
flex: 1;
padding-right: 2rem;
overflow: hidden;
}
/* src/features/emoji/EmojiGenres.css */
/* src/features/emoji/EmojiDrawer.css */
.EmojiDrawer-options {
display: flex;
align-items: center;
justify-content: space-between;
}
/* src/features/chat/UserInput.css */
.UserInput {
position: relative;
display: flex;
align-items: center;
}
.UserInput-input {
flex: 1;
margin-right: 2rem;
min-height: 50px;
height: 50px;
max-height: 50px;
}
@media screen and (max-width: 1100px) {
.UserInput-input {
min-height: 100px !important;
height: 100px !important;
max-height: 100px !important;
}
}
.UserInput-emoji {
cursor: pointer;
font-size: 20px;
transform: rotateY(180deg);
margin-right: 1rem;
}
/* src/features/chat/UsersTyping.css */
.UsersTyping {
height: 18px;
display: inline-block;
font-size: 10px;
}
/* src/features/chat/QuotedMessage.css */
.QuotedMessage {
display: flex;
align-items: center;
justify-content: space-between;
}
.QuotedMessage-content {
margin-left: 1rem;
flex: 1;
max-width: 420px;
max-height: 40px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 1rem;
}

1
files/assets/js/chat.js 100644
View File

@ -0,0 +1 @@
window.global = window

34552
files/assets/js/chat_done.js 100644
View File

File diff suppressed because it is too large Load Diff

2
files/routes/allroutes.py
View File

@ -91,8 +91,6 @@ CSP = {
}
if IS_LOCALHOST:
CSP["style-src-elem"] += " rdrama.net"
CSP["script-src-elem"] += " rdrama.net"
CSP["media-src"] += " http:"
CSP["img-src"] += " http:"

7
files/templates/chat.html
View File

@ -17,11 +17,8 @@
data-avatar="{{v.profile_url}}"
data-hat="{{v.hat_active(v)[0]}}">
</div>
{% if IS_LOCALHOST %}
<script defer src="https://rdrama.net/assets/js/chat_done.js"></script>
{% else %}
<script defer src="{{'js/chat_done.js' | asset}}"></script>
{% endif %}
<script defer src="{{'js/chat.js' | asset}}"></script>
<script defer src="{{'js/chat_done.js' | asset}}"></script>
<script defer src="{{'js/vendor/lozad.js' | asset}}"></script>
<script defer src="{{'js/vendor/lite-youtube.js' | asset}}"></script>
{% endblock %}

6
files/templates/util/html_head.html
View File

@ -137,11 +137,7 @@
{% endif %}
{% if request.path == '/chat' %}
{% if IS_LOCALHOST %}
<link rel="stylesheet" href="https://rdrama.net/assets/css/chat_done.css">
{% else %}
<link rel="stylesheet" href="{{'css/chat_done.css' | asset}}">
{% endif %}
<link rel="stylesheet" href="{{'css/chat_done.css' | asset}}">
{% endif %}
{% endmacro %}