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

Cleanup file changes

Browse Source
This commit is contained in:
Stubenhocker1399
2019-09-07 14:40:56 +02:00
parent 6d47b155ff
commit edfbe9c7de
4 changed files with 225 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/ts/components/shared/chat-box/chat-box.scss
+107 -107
View File
@@ -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;
}
src/ts/components/shared/chat-box/chat-box.ts
+1
View File
@@ -151,6 +151,7 @@ export class ChatBox implements AfterViewInit, OnDestroy {
this.lastMessages.shift();
}
}
this.close();
}
}
src/ts/components/shared/chat-log/chat-log.scss
+113 -113
View File
@@ -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;
}
}
src/ts/components/shared/chat-log/chat-log.ts
+4 -21
View File
@@ -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) ||