Terncode/pixel.horse
1
0
Fork 0
mirror of https://github.com/Terncode/pixel.horse.git synced 2026-09-24 13:55:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add search icon to chat filter

Browse Source
This commit is contained in:
Stubenhocker1399
2019-09-11 13:40:10 +02:00
parent 4a39fb9bec
commit 7deecebe28
3 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/chat-log/chat-log.pug
+3 -1
View File
@@ -13,7 +13,9 @@
| Party | Party
a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')") a.link-plain.chat-log-tab(#whisperTab tabindex (click)="switchTab('whisper')")
| Whisper | Whisper
input.link-plain.chat-log-tab.chat-log-filter(#filterTab type="text" [style.background-color]="filterColor" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()") a.link-plain.chat-log-tab([style.background-color]="filterColor" (click)="focus()")
fa-icon.search-icon([icon]="searchIcon")
input.chat-log-filter(#filterInput type="text" (keyup.enter)="(unFocus())" (keyup.esc)="(unFocus())" [placeholder]="'Filter'" (keyup)="filterChat()")
.chat-log-scroll-outer() .chat-log-scroll-outer()
.chat-log-scroll-inner(#scroll) .chat-log-scroll-inner(#scroll)
.chat-log-scroll-inner-inner(#lines) .chat-log-scroll-inner-inner(#lines)
src/ts/components/shared/chat-log/chat-log.scss
+8
View File
@@ -159,10 +159,18 @@ $resizer-offset: $resizer-size / 2;
color: rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.2);
} }
.search-icon {
padding-right: 5px;
}
.chat-log-filter { .chat-log-filter {
padding-bottom: 5px; padding-bottom: 5px;
border: none; border: none;
width: 100px; width: 100px;
background-color: rgba(0, 0, 0, 0);
border: none;
outline: none;
color: white;
} }
.chat-log-filter::-webkit-input-placeholder { .chat-log-filter::-webkit-input-placeholder {
src/ts/components/shared/chat-log/chat-log.ts
+14 -8
View File
@@ -9,7 +9,7 @@ import { SettingsService } from '../../services/settingsService';
import { AgDragEvent } from '../directives/agDrag'; import { AgDragEvent } from '../directives/agDrag';
import { element, textNode, removeAllNodes, replaceNodes } from '../../../client/htmlUtils'; import { element, textNode, removeAllNodes, replaceNodes } from '../../../client/htmlUtils';
import { DEFAULT_CHATLOG_OPACITY, PONY_TYPE, SECOND } from '../../../common/constants'; import { DEFAULT_CHATLOG_OPACITY, PONY_TYPE, SECOND } from '../../../common/constants';
import { faCaretUp, faArrowDown } from '../../../client/icons'; import { faCaretUp, faArrowDown, faSearch } from '../../../client/icons';
import { sampleMessages } from '../../../common/debugData'; import { sampleMessages } from '../../../common/debugData';
import { findEntityById } from '../../../common/worldMap'; import { findEntityById } from '../../../common/worldMap';
import { colorToRGBA, rgb2hsl, HSL, hsl2CSS } from '../../../common/color'; import { colorToRGBA, rgb2hsl, HSL, hsl2CSS } from '../../../common/color';
@@ -209,13 +209,14 @@ function findUserIndex(users: IndexEntryUser[], id: number, crc: number | undefi
export class ChatLog implements AfterViewInit, OnDestroy, DoCheck { export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
readonly toBottomIcon = faArrowDown; readonly toBottomIcon = faArrowDown;
readonly resizeIcon = faCaretUp; readonly resizeIcon = faCaretUp;
readonly searchIcon = faSearch;
@ViewChild('chatLog', { static: true }) chatLog!: ElementRef; @ViewChild('chatLog', { static: true }) chatLog!: ElementRef;
@ViewChild('scroll', { static: true }) scroll!: ElementRef; @ViewChild('scroll', { static: true }) scroll!: ElementRef;
@ViewChild('lines', { static: true }) lines!: ElementRef; @ViewChild('lines', { static: true }) lines!: ElementRef;
@ViewChild('localTab', { static: true }) localTab!: ElementRef; @ViewChild('localTab', { static: true }) localTab!: ElementRef;
@ViewChild('partyTab', { static: true }) partyTab!: ElementRef; @ViewChild('partyTab', { static: true }) partyTab!: ElementRef;
@ViewChild('whisperTab', { static: true }) whisperTab!: ElementRef; @ViewChild('whisperTab', { static: true }) whisperTab!: ElementRef;
@ViewChild('filterTab', { static: true }) filterTab!: ElementRef; @ViewChild('filterInput', { static: true }) filterInput!: ElementRef;
@ViewChild('toggleButton', { static: true }) toggleButton!: ElementRef; @ViewChild('toggleButton', { static: true }) toggleButton!: ElementRef;
@ViewChild('count', { static: true }) countElement!: ElementRef; @ViewChild('count', { static: true }) countElement!: ElementRef;
@ViewChild('content', { static: true }) contentElement!: ElementRef; @ViewChild('content', { static: true }) contentElement!: ElementRef;
@@ -449,7 +450,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
filterChat() { filterChat() {
this.clearTimeOutAutoClear(); this.clearTimeOutAutoClear();
this.clearTimeOutAutoUnfocus(); this.clearTimeOutAutoUnfocus();
let value = this.filterTab.nativeElement.value; let value = this.filterInput.nativeElement.value;
if (!value) { if (!value) {
this.clearTimeOutAutoClear(); this.clearTimeOutAutoClear();
this.unFocus(); this.unFocus();
@@ -460,7 +461,7 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
} }
this.autoClear = setTimeout(() => { this.autoClear = setTimeout(() => {
this.filterTab.nativeElement.value = ''; this.filterInput.nativeElement.value = '';
this.filterChat(); this.filterChat();
this.unFocus(); this.unFocus();
}, SECOND * 30); }, SECOND * 30);
@@ -478,10 +479,10 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
try { try {
const regExp = new RegExp(value); const regExp = new RegExp(value);
this.filterChatLogLines(regExp, toLowerCase); this.filterChatLogLines(regExp, toLowerCase);
this.filterTab.nativeElement.style.color = ''; this.filterInput.nativeElement.style.color = '';
} catch (err) {// If the user inputs invalid regExp we just notify him by changing text color to red } catch (err) {// If the user inputs invalid regExp we just notify him by changing text color to red
if (DEVELOPMENT) console.error(err); if (DEVELOPMENT) console.error(err);
this.filterTab.nativeElement.style.color = '#ff6666'; this.filterInput.nativeElement.style.color = '#ff6666';
} }
return; return;
} else { } else {
@@ -566,10 +567,15 @@ export class ChatLog implements AfterViewInit, OnDestroy, DoCheck {
if (this.autoUnfocus) clearTimeout(this.autoUnfocus); if (this.autoUnfocus) clearTimeout(this.autoUnfocus);
this.autoUnfocus = undefined; this.autoUnfocus = undefined;
} }
focus() {
this.clearTimeOutAutoUnfocus();
if (this.filterInput.nativeElement)
this.filterInput.nativeElement.focus();
}
unFocus() { unFocus() {
this.clearTimeOutAutoUnfocus(); this.clearTimeOutAutoUnfocus();
if (this.filterTab.nativeElement) if (this.filterInput.nativeElement)
this.filterTab.nativeElement.blur(); this.filterInput.nativeElement.blur();
} }
addMessage(message: ChatMessage) { addMessage(message: ChatMessage) {
if (message.name && message.message) { if (message.name && message.message) {