LogalDeveloper/owncast
0
Fork 0
Code Activity

Prettified Code!

Browse Source
This commit is contained in:
gabek
2021-11-03 02:28:19 +00:00
committed by GitHub Action
parent 9a91324456
commit f6015dfe50
5 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
webroot/js/components/chat/username.js
View File

@@ -3,7 +3,10 @@ import htm from '/js/web_modules/htm.js';
const html = htm.bind(h);
import { setLocalStorage } from '../../utils/helpers.js';
import { KEY_USERNAME, KEY_CUSTOM_USERNAME_SET } from '../../utils/constants.js';
import {
KEY_USERNAME,
KEY_CUSTOM_USERNAME_SET,
} from '../../utils/constants.js';
export default class UsernameForm extends Component {
constructor(props, context) {
@@ -38,11 +41,13 @@ export default class UsernameForm extends Component {
}
handleKeydown(event) {
if (event.keyCode === 13) { // enter
this.handleUpdateUsername();
} else if (event.keyCode === 27) { // esc
this.handleHideForm();
}
if (event.keyCode === 13) {
// enter
this.handleUpdateUsername();
} else if (event.keyCode === 27) {
// esc
this.handleHideForm();
}
}
handleUpdateUsername() {
@@ -72,7 +77,7 @@ export default class UsernameForm extends Component {
if (onBlur) {
onBlur();
}
}
}
render(props, state) {
const { username, isModerator } = props;
@@ -87,32 +92,60 @@ export default class UsernameForm extends Component {
},
};
return (
html`
<div id="user-info" class="whitespace-nowrap">
<div id="user-info-display" style=${styles.info} title="Click to update user name" class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75" onClick=${this.handleDisplayForm}>
<span id="username-display" class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator && 'moderator-flag'}">${username}</span>
</div>
<div id="user-info-change" class="flex flex-row flex-no-wrap p-1 items-center justify-end" style=${styles.form}>
<input type="text"
id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
maxlength="60"
placeholder="Update username"
defaultValue=${username}
onKeydown=${this.handleKeydown}
onFocus=${this.handleFocus}
onBlur=${this.handleBlur}
ref=${this.textInput}
/>
<button id="button-update-username" onClick=${this.handleUpdateUsername} type="button" class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn">Update</button>
<button id="button-cancel-change" onClick=${this.handleHideForm} type="button" class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50" title="cancel">X</button>
</div>
return html`
<div id="user-info" class="whitespace-nowrap">
<div
id="user-info-display"
style=${styles.info}
title="Click to update user name"
class="flex flex-row justify-end items-center align-middle cursor-pointer py-2 px-4 overflow-hidden w-full opacity-1 transition-opacity duration-200 hover:opacity-75"
onClick=${this.handleDisplayForm}
>
<span
id="username-display"
class="text-indigo-600 text-xs font-semibold truncate overflow-hidden whitespace-no-wrap ${isModerator &&
'moderator-flag'}"
>${username}</span
>
</div>
`);
<div
id="user-info-change"
class="flex flex-row flex-no-wrap p-1 items-center justify-end"
style=${styles.form}
>
<input
type="text"
id="username-change-input"
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-black-500 rounded py-1 px-1 leading-tight text-xs focus:bg-white"
maxlength="60"
placeholder="Update username"
defaultValue=${username}
onKeydown=${this.handleKeydown}
onFocus=${this.handleFocus}
onBlur=${this.handleBlur}
ref=${this.textInput}
/>
<button
id="button-update-username"
onClick=${this.handleUpdateUsername}
type="button"
class="bg-blue-500 hover:bg-blue-700 text-white text-xs uppercase p-1 mx-1 rounded cursor-pointer user-btn"
>
Update
</button>
<button
id="button-cancel-change"
onClick=${this.handleHideForm}
type="button"
class="bg-gray-900 hover:bg-gray-800 py-1 px-2 mx-1 rounded cursor-pointer user-btn text-white text-xs uppercase text-opacity-50"
title="cancel"
>
X
</button>
</div>
</div>
`;
}
}