From edfbe9c7dee4f8ecb3b3df2d2c82aa5d1c2a290b Mon Sep 17 00:00:00 2001 From: Stubenhocker1399 Date: Sat, 7 Sep 2019 14:31:09 +0200 Subject: [PATCH] Cleanup file changes --- .../components/shared/chat-box/chat-box.scss | 214 ++++++++--------- src/ts/components/shared/chat-box/chat-box.ts | 1 + .../components/shared/chat-log/chat-log.scss | 226 +++++++++--------- src/ts/components/shared/chat-log/chat-log.ts | 25 +- 4 files changed, 225 insertions(+), 241 deletions(-) diff --git a/src/ts/components/shared/chat-box/chat-box.scss b/src/ts/components/shared/chat-box/chat-box.scss index 3cb5212..533c587 100644 --- a/src/ts/components/shared/chat-box/chat-box.scss +++ b/src/ts/components/shared/chat-box/chat-box.scss @@ -1,155 +1,155 @@ @import '../../../../styles/partials/variables'; .chat-box { - max-width: 500px; - height: 37px; - position: absolute; - bottom: 0; - left: 0; - right: 0; + max-width: 500px; + height: 37px; + position: absolute; + bottom: 0; + left: 0; + right: 0; } .chat-open-button { - display: block; - position: absolute; - left: 0; - bottom: 0; - z-index: 2; - width: 42px; - height: 40px; + display: block; + position: absolute; + left: 0; + bottom: 0; + z-index: 2; + width: 42px; + height: 40px; } .chat-send-button { - position: absolute; - right: 0; - top: 0; - padding: 0 8px; + position: absolute; + right: 0; + top: 0; + padding: 0 8px; } .chat-input { - opacity: 0.6; - background: black; - color: white; - border: none; - z-index: 1; - padding: 8px; - font-size: 14px; - padding-right: 35px; - padding-left: 90px; - border-radius: $border-radius-base; - outline: none; - width: 100%; + opacity: 0.6; + background: black; + color: white; + border: none; + z-index: 1; + padding: 8px; + font-size: 14px; + padding-right: 35px; + padding-left: 90px; + border-radius: $border-radius-base; + outline: none; + width: 100%; } .chat-box-type { - position: absolute; - left: 42px; - top: 8px; - font-size: 14px; - user-select: none; + position: absolute; + left: 42px; + top: 8px; + font-size: 14px; + user-select: none; cursor: pointer; - - .chat-party > &, .chat-party-think > & { - color: $chat-party; + + .chat-party > &, .chat-party-think > & { + color: $chat-party; } - - .chat-say > &, .chat-think > & { - color: $chat-color; + + .chat-say > &, .chat-think > & { + color: $chat-color; } - - .chat-sup > & { - color: $supporter-1; + + .chat-sup > & { + color: $supporter-1; } - - .chat-sup1 > & { - color: $supporter-1; + + .chat-sup1 > & { + color: $supporter-1; } - - .chat-sup2 > & { - color: $supporter-2; + + .chat-sup2 > & { + color: $supporter-2; } - - .chat-sup3 > & { - color: $supporter-3; + + .chat-sup3 > & { + color: $supporter-3; + } + + .chat-whisper > & { + color: $chat-whisper; } - - .chat-whisper > & { - color: $chat-whisper; - } } .chat-box-type-name { - display: inline-block; - max-width: 120px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - vertical-align: bottom; + display: inline-block; + max-width: 120px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + vertical-align: bottom; } .chat-emoji-button { - position: absolute; - right: 30px; - bottom: 3px; - padding: 0; - margin: 0; - -webkit-filter: grayscale(100%); + position: absolute; + right: 30px; + bottom: 3px; + padding: 0; + margin: 0; + -webkit-filter: grayscale(100%); filter: grayscale(100%); - - &:hover { - bottom: 4px; - -webkit-filter: grayscale(0); - filter: grayscale(0%); - } + + &:hover { + bottom: 4px; + -webkit-filter: grayscale(0); + filter: grayscale(0%); + } } .emoji-box { - display: flex; - padding: 10px; - position: absolute; - background-color: #000000; - opacity: 0.95; - bottom: 40px; - left: 0; - right: 0; - width: 100%; - height: 190px; + display: flex; + padding: 10px; + position: absolute; + background-color: #000000; + opacity: 0.95; + bottom: 40px; + left: 0; + right: 0; + width: 100%; + height: 190px; overflow-y: auto; - &::-webkit-scrollbar { - width: 7px; - } + &::-webkit-scrollbar { + width: 7px; + } - &::-webkit-scrollbar-thumb { - background: rgb(77, 77, 77); - border-radius: 14px; - } + &::-webkit-scrollbar-thumb { + background: rgb(77, 77, 77); + border-radius: 14px; + } } .emoji-box ul { - margin-bottom: 0; + margin-bottom: 0; } .emoji-box li { - display: inline; - list-style: none; - column-width: 180px; + display: inline; + list-style: none; + column-width: 180px; } .emote-sample { - user-select: none; - display: inline-block; - width: 29px; - height: 29px; - text-align: center; - margin-bottom: 3px; - cursor: pointer; - &:hover { - background: rgba(0, 255, 255, 0.2); - border-radius: 2px; - } + user-select: none; + display: inline-block; + width: 29px; + height: 29px; + text-align: center; + margin-bottom: 3px; + cursor: pointer; + &:hover { + background: rgba(0, 255, 255, 0.2); + border-radius: 2px; + } } .emote-sample emote-box { - line-height: 2; + line-height: 2; } diff --git a/src/ts/components/shared/chat-box/chat-box.ts b/src/ts/components/shared/chat-box/chat-box.ts index 2cdacac..4181c66 100644 --- a/src/ts/components/shared/chat-box/chat-box.ts +++ b/src/ts/components/shared/chat-box/chat-box.ts @@ -151,6 +151,7 @@ export class ChatBox implements AfterViewInit, OnDestroy { this.lastMessages.shift(); } } + this.close(); } } diff --git a/src/ts/components/shared/chat-log/chat-log.scss b/src/ts/components/shared/chat-log/chat-log.scss index 4a5592d..1cd13eb 100644 --- a/src/ts/components/shared/chat-log/chat-log.scss +++ b/src/ts/components/shared/chat-log/chat-log.scss @@ -10,169 +10,169 @@ $resizer-size: 12px; $resizer-offset: $resizer-size / 2; .chat-log { - display: flex; - position: absolute; - bottom: 0; - left: 0; - right: 0; - min-width: 200px; - max-width: 100%; - max-height: calc(100vh - 220px); - min-height: 120px; + display: flex; + position: absolute; + bottom: 0; + left: 0; + right: 0; + min-width: 200px; + max-width: 100%; + max-height: calc(100vh - 220px); + min-height: 120px; } .chat-log-buttons { - flex-direction: column-reverse; - width: $chat-log-buttons-width; - padding: 5px 3px; - padding-bottom: 30px; - z-index: 2; + flex-direction: column-reverse; + width: $chat-log-buttons-width; + padding: 5px 3px; + padding-bottom: 30px; + z-index: 2; } .chat-log-toggle { - position: absolute; - bottom: 5px; - left: 4px; - z-index: 3; + position: absolute; + bottom: 5px; + left: 4px; + z-index: 3; } .has-unread .main-bubble { - color: $chat-whisper; + color: $chat-whisper; } .whispers-count { - color: white; - font-weight: bold; - text-align: center; - position: absolute; - left: 6px; - top: 9px; - width: 16px; - font-size: 10px; - display: flex; - justify-content: center; - align-items: center; - line-height: 1rem; + color: white; + font-weight: bold; + text-align: center; + position: absolute; + left: 6px; + top: 9px; + width: 16px; + font-size: 10px; + display: flex; + justify-content: center; + align-items: center; + line-height: 1rem; } .whisper-icon { - position: absolute; - top: 0; - left: 0; - font-size: 14px; - color: $chat-whisper !important; + position: absolute; + top: 0; + left: 0; + font-size: 14px; + color: $chat-whisper !important; } .chat-log-content { - position: relative; - display: flex; - background: $chat-log-bg; - padding: 5px 0; - padding-left: 40px; - margin-left: -$chat-log-buttons-width; - border-radius: $border-radius-base; - word-break: break-word; - white-space: pre-line; - line-height: 20px; - height: 100%; - width: 100%; + position: relative; + display: flex; + background: $chat-log-bg; + padding: 5px 0; + padding-left: 40px; + margin-left: -$chat-log-buttons-width; + border-radius: $border-radius-base; + word-break: break-word; + white-space: pre-line; + line-height: 20px; + height: 100%; + width: 100%; } .chat-log-tabs { - position: absolute; - top: -$chat-log-tabs-height; - left: 30px; - display: flex; - user-select: none; - text-shadow: 0px 0px 4px #000000; + position: absolute; + top: -$chat-log-tabs-height; + left: 30px; + display: flex; + user-select: none; + text-shadow: 0px 0px 4px #000000; } .chat-log-tab { - background: $chat-log-bg-faded; - padding: 5px 10px 0; - margin-left: 10px; - height: $chat-log-tabs-height; - border-top-left-radius: $border-radius-base; - border-top-right-radius: $border-radius-base; - color: white; + background: $chat-log-bg-faded; + padding: 5px 10px 0; + margin-left: 10px; + height: $chat-log-tabs-height; + border-top-left-radius: $border-radius-base; + border-top-right-radius: $border-radius-base; + color: white; overflow: hidden; - - &.active { - background: $chat-log-bg; - } + + &.active { + background: $chat-log-bg; + } } .chat-log-scroll-outer { - overflow: hidden; - width: 100%; + overflow: hidden; + width: 100%; } .chat-log-scroll-inner { - width: calc(100% + 50px); - height: 100%; - overflow-x: hidden; - overflow-y: scroll; - -webkit-overflow-scrolling: touch; + width: calc(100% + 50px); + height: 100%; + overflow-x: hidden; + overflow-y: scroll; + -webkit-overflow-scrolling: touch; } .chat-log-scroll-inner-inner { - display: flex; - flex-direction: column; - justify-content: flex-end; - min-height: 100%; - padding: 0 5px; + display: flex; + flex-direction: column; + justify-content: flex-end; + min-height: 100%; + padding: 0 5px; } .chat-log-resize-top { - position: absolute; - top: -$resizer-offset; - right: $resizer-offset; - height: $resizer-size; - left: 250px; - cursor: ns-resize; + position: absolute; + top: -$resizer-offset; + right: $resizer-offset; + height: $resizer-size; + left: 250px; + cursor: ns-resize; } .chat-log-resize-top-right { - position: absolute; - top: -($resizer-offset + 1); - right: -($resizer-offset + 1); - width: $resizer-size + 4; - height: $resizer-size + 4; - cursor: nesw-resize; + position: absolute; + top: -($resizer-offset + 1); + right: -($resizer-offset + 1); + width: $resizer-size + 4; + height: $resizer-size + 4; + cursor: nesw-resize; } .chat-log-resize-right { - position: absolute; - top: $resizer-offset; - right: -$resizer-offset; - width: $resizer-size; - bottom: $resizer-offset; - cursor: ew-resize; + position: absolute; + top: $resizer-offset; + right: -$resizer-offset; + width: $resizer-size; + bottom: $resizer-offset; + cursor: ew-resize; } .resize-icon { - font-size: 18px; - position: absolute; - top: -3px; - right: 1px; - transform: rotate(45deg); - color: rgba(255, 255, 255, 0.2); + font-size: 18px; + position: absolute; + top: -3px; + right: 1px; + transform: rotate(45deg); + color: rgba(255, 255, 255, 0.2); } .chat-log-filter { - border: none; - width: 100px; - &::placeholder { - color: #ccc; - } + border: none; + width: 100px; + &::placeholder { + color: #ccc; + } } @media only screen and (max-width: 360px) { - .chat-log-filter { - position: absolute; - left: 0; - bottom: 35px; - width: 100%; - border-radius: 2px; - } + .chat-log-filter { + position: absolute; + left: 0; + bottom: 35px; + width: 100%; + border-radius: 2px; + } } diff --git a/src/ts/components/shared/chat-log/chat-log.ts b/src/ts/components/shared/chat-log/chat-log.ts index 7e40e95..1c16c8d 100644 --- a/src/ts/components/shared/chat-log/chat-log.ts +++ b/src/ts/components/shared/chat-log/chat-log.ts @@ -96,14 +96,13 @@ CLASSES[MessageType.WhisperTo] = 'chat-line-whisper'; CLASSES[MessageType.WhisperAnnouncement] = 'chat-line-whisper-announcement'; CLASSES[MessageType.WhisperToAnnouncement] = 'chat-line-whisper-announcement'; - export function createChatLogLineDOM(clickLabel: ClickHandler, clickName: ClickHandler): ChatLogLineDOM { const line: ChatLogLineDOM = {} as any; line.root = element('div', 'chat-line', [ element('span', 'chat-line-lead'), line.time = element('span', 'chat-line-name', [ - textNode(`[`), + textNode('['), line.timeContent = element( 'span', 'chat-line-time-content', [textNode('')], undefined), line.index = element('span', 'chat-line-time-index', [line.indexText = textNode('')]), @@ -111,7 +110,6 @@ export function createChatLogLineDOM(clickLabel: ClickHandler, clickName: ClickH ]), line.label = element( 'span', 'chat-line-label mr-1', [line.labelText = textNode('')], undefined, { click: () => clickLabel(line.entry) }), - line.prefixText = textNode(''), line.name = element('span', 'chat-line-name', [ textNode(`[`), @@ -164,7 +162,6 @@ function setNameColors(line: ChatLogLineDOM | undefined, colors?: string[] | nul } function updateChatLogName(line: ChatLogLineDOM, { name, index }: ChatLogMessage) { - if (name) { line.name.style.display = 'inline'; replaceNodes(line.nameContent, name); @@ -204,6 +201,7 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi return i; } } + return -1; } @@ -596,7 +594,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { } return colors; } - clearTimeOutAutoClear() { if (this.autoClear) clearTimeout(this.autoClear); this.autoClear = null; @@ -622,7 +619,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { let colors: string[] | null = null; colors = this.getCharaterColors(message.id); - this.addEntryToList(this.local, GENERAL_CHAT_LIMIT, open && tab === 'local', entry); setNameColors(entry.dom, colors); @@ -662,9 +658,9 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { this.messageCounter++; } } - private addEntryToList(list: ChatLogMessage[], limit: number, isOpen: boolean, entry: ChatLogMessage) { let removedDom: ChatLogLineDOM | undefined; + while (list.length >= limit) { const removed = list.shift(); @@ -677,6 +673,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { removed.dom = undefined; } } + list.push(entry); if (isOpen) { @@ -685,13 +682,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { this.linesElement.appendChild(entry.dom.root); } } - toggle() { this.settings.chatlogClosed = !this.settings.chatlogClosed; this.settingsService.saveBrowserSettings(); this.updateOpen(); } - switchTab(tab: Tab) { if (this.activeTab !== tab) { this.settings.chatlogTab = tab; @@ -701,13 +696,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { this.updateTabs(); } } - private updateTabs() { this.setActiveTab(this.localTab.nativeElement, this.activeTab === 'local'); this.setActiveTab(this.partyTab.nativeElement, this.activeTab === 'party'); this.setActiveTab(this.whisperTab.nativeElement, this.activeTab === 'whisper'); } - private setActiveTab(tab: HTMLElement, active: boolean) { if (active) { tab.classList.add('active'); @@ -719,21 +712,17 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { tab.style.backgroundColor = this.inactiveBg; } } - scrollToEnd() { // requestAnimationFrame(this.scrollHandler); this.scrollToEndAtFrame = true; } - scrollHandler = () => { this.scrollingToEnd = true; this.scroll.nativeElement.scrollTop = 99999; } - clickNameHandler = (message: ChatLogMessage) => { this.zone.run(() => this.nameClick.emit(message)); } - clickLabel = (message: ChatLogMessage) => { this.zone.run(() => { if (message.label) { @@ -741,11 +730,9 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { } }); } - private clearList() { removeAllNodes(this.linesElement); } - private regenerateList() { this.clearList(); @@ -761,7 +748,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { lines.appendChild(entry.dom.root); }); } - drag({ x, y, type, event }: AgDragEvent, resizeY: boolean, resizeX: boolean) { event.preventDefault(); @@ -791,7 +777,6 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { this.scrollToEnd(); } } - private setUnread(value: number) { if (this.unread !== value) { this.unread = value; @@ -807,13 +792,11 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { } } } - private findEntityFromMessages = (id: number): FakeEntity | undefined => { return findEntityFromMessages(id, this.whisper) || findEntityFromMessages(id, this.party) || findEntityFromMessages(id, this.local); } - private findEntityFromMessagesByName = (name: string): FakeEntity | undefined => { return findEntityFromMessagesByName(name, this.game.playerId, this.whisper) || findEntityFromMessagesByName(name, this.game.playerId, this.party) ||