Skip to content

Commit d71cb15

Browse files
NotValraNotValra
committed
Improved status.js
1 parent 8268606 commit d71cb15

3 files changed

Lines changed: 72 additions & 34 deletions

File tree

‎src/content/core/ui/catalog/input.js‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,17 @@ export function createStyledInput({
55
label = '',
66
placeholder = ' ',
77
value = '',
8+
multiline = false,
89
}) {
910
const container = document.createElement('div');
1011
container.className = 'rovalra-catalog-input-wrapper';
1112

1213
const inputBase = document.createElement('div');
1314
inputBase.className = 'rovalra-catalog-input-base';
1415

15-
const input = document.createElement('input');
16+
const input = document.createElement(multiline ? 'textarea' : 'input');
17+
if (!multiline) input.type = 'text';
1618

17-
input.type = 'text';
1819
input.id = id;
1920
input.value = value;
2021

@@ -55,6 +56,19 @@ export function createStyledInput({
5556
labelElement.classList.remove('MuiInputLabel-shrink');
5657
}
5758
};
59+
if (multiline) {
60+
Object.assign(input.style, {
61+
resize: 'none',
62+
overflow: 'hidden',
63+
minHeight: '40px',
64+
});
65+
const autoResize = () => {
66+
input.style.height = 'auto';
67+
input.style.height = input.scrollHeight + 'px';
68+
};
69+
input.addEventListener('input', autoResize);
70+
setTimeout(autoResize, 0);
71+
}
5872

5973
input.addEventListener('focus', () => {
6074
labelElement.classList.add('Mui-focused');

‎src/content/features/profile/header/status.js‎

Lines changed: 23 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -89,20 +89,23 @@ DOMPurify.addHook('afterSanitizeAttributes', (currentNode) => {
8989
}
9090
});
9191

92-
function openEditStatusOverlay(currentStatus, onSave, canUseApi) {
92+
function openEditStatusOverlay(currentStatus, onSave, canUseApi, isTrusted) {
9393
const container = document.createElement('div');
9494
Object.assign(container.style, {
9595
display: 'flex',
9696
flexDirection: 'column',
9797
gap: '12px',
9898
paddingTop: '5px',
99+
alignItems: 'center',
99100
});
100101

101102
const { container: inputContainer, input } = createStyledInput({
102103
id: 'rovalra-status-edit-input',
103104
label: 'Enter new status',
104105
value: currentStatus,
106+
multiline: true,
105107
});
108+
inputContainer.style.width = '222px';
106109
input.maxLength = MAX_STATUS_LENGTH;
107110

108111
container.appendChild(inputContainer);
@@ -119,6 +122,20 @@ function openEditStatusOverlay(currentStatus, onSave, canUseApi) {
119122
container.appendChild(helpText);
120123
}
121124

125+
if (isTrusted) {
126+
const trustedHelpText = document.createElement('p');
127+
trustedHelpText.className = 'text-description';
128+
trustedHelpText.innerHTML = DOMPurify.sanitize(`
129+
You are a trusted RoValra user, you can add any text, embed videos, and images.
130+
<br><br>
131+
<strong>Note:</strong> If you are found to add inappropriate content, your donator and custom badges will be revoked.
132+
`);
133+
Object.assign(trustedHelpText.style, {
134+
fontSize: '12px',
135+
});
136+
container.appendChild(trustedHelpText);
137+
}
138+
122139
const errorDisplay = document.createElement('p');
123140
errorDisplay.className = 'text-error';
124141
Object.assign(errorDisplay.style, {
@@ -140,7 +157,7 @@ function openEditStatusOverlay(currentStatus, onSave, canUseApi) {
140157
title: 'Edit Status',
141158
bodyContent: container,
142159
actions: [cancelBtn, saveBtn],
143-
maxWidth: '400px',
160+
maxWidth: '330px',
144161
preventBackdropClose: true,
145162
});
146163

@@ -293,12 +310,12 @@ async function addStatusBubble(avatarContainer, userWantsApi) {
293310
bubble.addEventListener('click', (e) => {
294311
e.stopPropagation();
295312
const isDonator = getCurrentUserTier() >= 1;
313+
const isTrusted = TRUSTED_USER_IDS.includes(
314+
String(authenticatedUserId),
315+
);
296316
openEditStatusOverlay(
297317
statusText === '...' ? '' : statusText,
298318
async (newStatus) => {
299-
const isTrusted = TRUSTED_USER_IDS.includes(
300-
String(authenticatedUserId),
301-
);
302319
const effectiveCanUseApi = isDonator && userWantsApi;
303320
if (
304321
newStatus &&
@@ -419,6 +436,7 @@ async function addStatusBubble(avatarContainer, userWantsApi) {
419436
}
420437
},
421438
isDonator && userWantsApi,
439+
isTrusted,
422440
);
423441
});
424442
}

‎src/css/components/input.scss‎

Lines changed: 33 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,46 @@
11
.rovalra-catalog-input-wrapper {
22
position: relative;
3-
overflow: visible !important;
3+
overflow: visible !important;
44
}
55
.rovalra-catalog-input-base {
66
position: relative;
77
border-radius: 8px;
8-
height: 40px;
8+
min-height: 40px;
99
}
1010
.rovalra-catalog-input-label {
1111
color: var(--rovalra-secondary-text-color);
12-
font-family: "Builder Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
12+
font-family:
13+
'Builder Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
14+
sans-serif;
1315
font-weight: 400;
1416
font-size: 1rem;
1517
line-height: 1.4375em;
1618
padding: 0;
1719
position: absolute;
1820
left: 14px;
19-
top: 50%;
20-
transform: translateY(-50%);
21-
transition: color 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms, transform 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
21+
top: 9px;
22+
transition:
23+
color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
24+
transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
2225
pointer-events: none;
23-
z-index: 1;
26+
z-index: 1;
2427
}
2528
.rovalra-catalog-input-field {
2629
background-color: transparent !important;
2730
border: none !important;
28-
31+
2932
outline: none !important;
3033
box-shadow: none !important;
3134
width: 100%;
32-
height: 40px;
35+
min-height: 40px;
3336
padding: 8px 14px;
3437
position: relative;
3538
color: var(--rovalra-main-text-color) !important;
36-
font-family: "Builder Sans", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif !important;
39+
font-family:
40+
'Builder Sans', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande',
41+
sans-serif !important;
3742
font-size: 16px !important;
43+
line-height: 1.4375em !important;
3844
box-sizing: border-box !important;
3945
}
4046

@@ -50,46 +56,46 @@
5056
background-color: transparent !important;
5157
}
5258

53-
54-
.rovalra-catalog-input-fieldset {
59+
.rovalra-catalog-input-fieldset {
5560
border: 1px solid rgb(66 65 65 / 45%);
5661
position: absolute;
57-
top: -5px;
58-
height: 45px;
62+
top: -5px;
63+
height: calc(100% + 5px);
5964
left: 0;
6065
right: 0;
6166
margin: 0;
6267
border-radius: inherit;
63-
pointer-events: none;
64-
transition: border-color 200ms ease;
68+
pointer-events: none;
69+
transition: border-color 200ms ease;
6570
}
6671
.rovalra-catalog-input-legend {
6772
padding: 0;
6873
text-align: left;
69-
transition: max-width 200ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
74+
transition: max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
7075
line-height: 23px;
7176
height: 11px;
7277
max-width: 0.01px;
73-
background-color: transparent;
74-
transition: background-color 200ms ease;
78+
background-color: transparent;
79+
transition: background-color 200ms ease;
7580
}
7681
.rovalra-catalog-input-legend span {
7782
display: inline-block;
7883
padding-left: 5px;
7984
padding-right: 0px;
80-
visibility: hidden;
85+
visibility: hidden;
8186
font-size: 12px;
8287
}
8388
.rovalra-catalog-input-label.MuiInputLabel-shrink {
84-
transform: translate(0, -27px) scale(0.75);
85-
transform-origin: top left;
89+
transform: translate(0, -17px) scale(0.75);
90+
transform-origin: top left;
8691
}
8792
.rovalra-catalog-input-label.Mui-focused {
8893
}
8994
.rovalra-catalog-input-base.Mui-focused .rovalra-catalog-input-fieldset {
90-
border: 2px solid rgb(51, 95, 255);
95+
border: 2px solid rgb(51, 95, 255);
96+
}
97+
.rovalra-catalog-input-label.MuiInputLabel-shrink
98+
~ .rovalra-catalog-input-base
99+
.rovalra-catalog-input-legend {
100+
max-width: calc(100% * 0.7 + 0px);
91101
}
92-
.rovalra-catalog-input-label.MuiInputLabel-shrink ~ .rovalra-catalog-input-base .rovalra-catalog-input-legend {
93-
94-
max-width: calc(100% * 0.70 + 0px);
95-
}

0 commit comments

Comments
 (0)