3.0 Beta 7
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
<ul>
|
||||
<li>{{ "chat.changeLogDialog.changeLog.1"|translate }}</li>
|
||||
<li>{{ "chat.changeLogDialog.changeLog.2"|translate }}</li>
|
||||
<li>{{ "chat.changeLogDialog.changeLog.3"|translate }}</li>
|
||||
</ul>
|
||||
|
||||
<button tuiButton iconStart="@tui.check"
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</navbar>
|
||||
|
||||
<messages [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
|
||||
<messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store.messageBox" [messages]="store.messages()" id="scrollContainer" (onDelete)="deleteMessage($event)"/>
|
||||
|
||||
<message-box [viewModel]="store.messageBox"/>
|
||||
}
|
||||
|
||||
@@ -14,6 +14,8 @@ import {MessageBoxViewModel} from '../elements/message-box/message-box-viewmodel
|
||||
import {WebSocketHandler} from '@chatenium/chatenium-sdk/core/webSocketHandler';
|
||||
import {FileData, FileUploadProgressListener} from '@chatenium/chatenium-sdk/domain/fileUploadService.schema';
|
||||
import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
|
||||
import {MessagesViewModel} from '../elements/messages/messages-viewmodel';
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dm',
|
||||
@@ -42,6 +44,7 @@ export class Dm implements OnInit {
|
||||
|
||||
async sendMessage(message: string, files: FileDataWithPreview[] | null) {
|
||||
if (!files && message.trim() == "") return
|
||||
this.scrollToBottom("smooth")
|
||||
|
||||
const session = this.serviceManager.currentSession();
|
||||
if (session != null) {
|
||||
@@ -66,8 +69,11 @@ export class Dm implements OnInit {
|
||||
|
||||
let attachments: Attachment[] = []
|
||||
files?.forEach(file => {
|
||||
const extraMetaData: Record<string, string> = {}
|
||||
const extraMetaData: Record<string, any> = {}
|
||||
extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
|
||||
extraMetaData["progressShown"] = true
|
||||
extraMetaData["totalChunks"] = 0
|
||||
extraMetaData["uploadedChunks"] = 0
|
||||
|
||||
attachments.push({
|
||||
fileName: file.name,
|
||||
@@ -81,6 +87,7 @@ export class Dm implements OnInit {
|
||||
})
|
||||
})
|
||||
|
||||
const tempMsgId = uuidv4()
|
||||
this.store.messages.update(value => [...value, {
|
||||
message: message,
|
||||
chatid: this.chatid,
|
||||
@@ -88,7 +95,7 @@ export class Dm implements OnInit {
|
||||
replyTo: "",
|
||||
author: session.userData.userid,
|
||||
seen: false,
|
||||
msgid: "",
|
||||
msgid: tempMsgId,
|
||||
forwardedFrom: "",
|
||||
isEdited: false,
|
||||
sent_at: {T: 0, I: 0},
|
||||
@@ -98,14 +105,13 @@ export class Dm implements OnInit {
|
||||
|
||||
this.scrollToBottom("smooth")
|
||||
|
||||
await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
|
||||
const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
|
||||
fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
|
||||
this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
|
||||
}
|
||||
})
|
||||
this.updateTempMessage(tempMsgId, respMessage)
|
||||
}
|
||||
|
||||
this.store.messageBox.message.set("")
|
||||
}
|
||||
|
||||
async deleteMessage(messageId: string) {
|
||||
@@ -125,15 +131,61 @@ export class Dm implements OnInit {
|
||||
setTimeout(() => {
|
||||
const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
|
||||
scrollContainer.scroll({
|
||||
top: scrollContainer.scrollHeight,
|
||||
top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
|
||||
left: 0,
|
||||
behavior: anim
|
||||
});
|
||||
|
||||
if (this.store.messagesVm.scrollBarStatus() == -1) {
|
||||
this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
handleMessagesScroll(e: any) {
|
||||
this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
|
||||
}
|
||||
|
||||
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
|
||||
console.log(fileId, allChunks, chunksDone)
|
||||
console.log(tempMsgId, fileId, allChunks, chunksDone)
|
||||
this.store.messages.update(messages =>
|
||||
messages.map(m => {
|
||||
if (m.msgid !== tempMsgId) return m;
|
||||
|
||||
return {
|
||||
...m,
|
||||
files: m.files.map(f => {
|
||||
if (f.fileId !== fileId) return f;
|
||||
return {
|
||||
...f,
|
||||
extraMetaData: {
|
||||
...f.extraMetaData,
|
||||
totalChunks: allChunks,
|
||||
uploadedChunks: chunksDone
|
||||
}
|
||||
};
|
||||
})
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
updateTempMessage(tempMsgId: string, message: Message) {
|
||||
this.store.messages.update(messages =>
|
||||
messages.map(m => {
|
||||
if (m.msgid !== tempMsgId) return m;
|
||||
|
||||
return {
|
||||
...m,
|
||||
msgid: message.msgid,
|
||||
sent_at: message.sent_at,
|
||||
files: m.files.map(f => {
|
||||
f.extraMetaData["progressShown"] = false
|
||||
return f
|
||||
})
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// The chatid parameter ensures isolation
|
||||
@@ -170,6 +222,7 @@ export class Dm implements OnInit {
|
||||
chatData: signal<Chat>(chatData),
|
||||
messages: signal<Message[]>([]),
|
||||
messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
|
||||
messagesVm: new MessagesViewModel(),
|
||||
wsListener: (action, data) => this.onWsListen(action, data, chatid),
|
||||
} as DmStorage;
|
||||
|
||||
@@ -187,6 +240,7 @@ export class Dm implements OnInit {
|
||||
try {
|
||||
const messagesCache = await currentStore.service.getQuick();
|
||||
currentStore.messages.set(messagesCache);
|
||||
this.scrollToBottom("instant")
|
||||
} catch (e) {
|
||||
console.warn(`Cache load failed: ${e}. Skipping cache load...`)
|
||||
}
|
||||
@@ -195,6 +249,8 @@ export class Dm implements OnInit {
|
||||
this.scrollToBottom("instant")
|
||||
|
||||
await currentStore.service.joinWebSocketRoom();
|
||||
} else {
|
||||
this.scrollToBottom("instant")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -80,12 +80,12 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="items-middle">
|
||||
<textarea (keydown.enter)="viewModel().message.set(''); handleEnterKeydown($event); viewModel().onMessageSend(message.value, null)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
|
||||
<textarea (keydown.enter)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null); handleEnterKeydown($event)" [style]="'height:'+textareaHeight+'px;'" #message (input)="onTextAreaInput(message)" [(ngModel)]="viewModel().message"></textarea>
|
||||
<span class="placeholder"
|
||||
[class.hidden]="message.value != ''">{{ "chat.elements.messageBox.placeholder"|translate }}</span>
|
||||
</div>
|
||||
<div class="items-right">
|
||||
<button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().message.set(''); viewModel().onMessageSend(message.value, null)">
|
||||
<button [disabled]="message.value.trim() == ''" tuiButton appearance="flat" (click)="viewModel().onMessageSend(message.value, null); viewModel().message.set(''); viewModel().editingMessage.set(null);">
|
||||
<tui-icon icon="@tui.send"/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
6
src/app/chat/elements/messages/messages-viewmodel.ts
Normal file
6
src/app/chat/elements/messages/messages-viewmodel.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
import {signal} from '@angular/core';
|
||||
|
||||
export class MessagesViewModel {
|
||||
// Saves scrolling state. First value initialized when scrolling to bottom on the message load
|
||||
scrollBarStatus = signal<number>(-1)
|
||||
}
|
||||
@@ -17,24 +17,47 @@
|
||||
<span class="message-text">{{ message.message }}</span>
|
||||
<masonry style="max-height: 300px">
|
||||
@for (file of filterExpressedMedia(message.files); track file) {
|
||||
@if (file.type == "image") {
|
||||
<img [src]="file.path"
|
||||
style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
|
||||
} @else if (file.type == "video") {
|
||||
<div style="position:relative;">
|
||||
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
|
||||
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
|
||||
[thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
|
||||
} @else {
|
||||
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
|
||||
@if (file.extraMetaData['progressShown']) {
|
||||
<tui-progress-circle
|
||||
style="position: absolute; top: 0; right: 0; z-index: 10; transform: translate(-50%, -50%)"
|
||||
[max]="file.extraMetaData['totalChunks']"
|
||||
[value]="file.extraMetaData['uploadedChunks']"
|
||||
/>
|
||||
}
|
||||
}
|
||||
}
|
||||
@if (file.type == "image") {
|
||||
<img [src]="file.path"
|
||||
style="width: 100%; height: 100%; max-height: 300px; object-fit: cover; border-radius: 25px"/>
|
||||
} @else if (file.type == "video") {
|
||||
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
|
||||
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"
|
||||
[thumbnailOverwrite]="file.extraMetaData['thumbnailMetaData']"></video-player>
|
||||
} @else {
|
||||
<video-player maxHeight="300px" maxWidth="300px" [src]="file.path"></video-player>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</masonry>
|
||||
|
||||
<div tuiGroup orientation="vertical" style="width: 100%">
|
||||
@for (file of filterNonExpressedMedia(message.files); track file) {
|
||||
<div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-accent-1); gap: 5px">
|
||||
<tui-icon icon="@tui.file"/>
|
||||
<div style="width: 100%; height: 50px; display: flex; align-items: center; padding: 0 10px; background: var(--tui-background-base-alt); gap: 5px">
|
||||
@if (file.extraMetaData && Object.keys(file.extraMetaData).length > 0) {
|
||||
@if (file.extraMetaData['progressShown']) {
|
||||
<tui-progress-circle
|
||||
size="xs"
|
||||
[max]="file.extraMetaData['totalChunks']"
|
||||
[value]="file.extraMetaData['uploadedChunks']"
|
||||
/>
|
||||
} @else {
|
||||
<tui-icon icon="@tui.file"/>
|
||||
}
|
||||
} @else {
|
||||
<tui-icon icon="@tui.file"/>
|
||||
}
|
||||
<span>{{ file.fileName }}</span>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
.bubble {
|
||||
border-radius: 25px 10px 10px 10px !important;
|
||||
border-radius: 10px 25px 10px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
|
||||
&.chained_end {
|
||||
.bubble {
|
||||
border-radius: 10px 10px 10px 25px !important;
|
||||
border-radius: 10px 10px 25px 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@ import {TranslatePipe} from '@ngx-translate/core';
|
||||
import {MessageBoxViewModel} from '../message-box/message-box-viewmodel';
|
||||
import {FileDataWithPreview} from '../message-box/message-box';
|
||||
import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
|
||||
import {TuiProgressCircle} from '@taiga-ui/kit';
|
||||
|
||||
@Component({
|
||||
selector: 'messages',
|
||||
@@ -32,7 +33,8 @@ import {Attachment} from '@chatenium/chatenium-sdk/domain/common.schema';
|
||||
TranslatePipe,
|
||||
TuiDataListComponent,
|
||||
TuiGroup,
|
||||
TuiIcon
|
||||
TuiIcon,
|
||||
TuiProgressCircle
|
||||
],
|
||||
templateUrl: './messages.html',
|
||||
styleUrl: './messages.scss',
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
</div>
|
||||
</navbar>
|
||||
|
||||
<messages [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
|
||||
<messages (scrollend)="handleMessagesScroll($event)" [messageBoxViewModel]="store!.messageBox" [messages]="store!.messages()" id="scrollContainer"
|
||||
(onDelete)="deleteMessage($event)"/>
|
||||
|
||||
<message-box [viewModel]="store!.messageBox"/>
|
||||
|
||||
@@ -12,6 +12,8 @@ import {Message} from '@chatenium/chatenium-sdk/domain/textChannelService.schema
|
||||
import {Messages} from '../../../elements/messages/messages';
|
||||
import {Navbar} from '../../../elements/navbar/navbar';
|
||||
import {Oimg} from '../../../elements/oimg/oimg';
|
||||
import {MessagesViewModel} from '../../../elements/messages/messages-viewmodel';
|
||||
import {v4 as uuidv4} from 'uuid';
|
||||
|
||||
@Component({
|
||||
selector: 'app-text',
|
||||
@@ -65,15 +67,16 @@ export class Text {
|
||||
}
|
||||
}
|
||||
|
||||
this.store.messageBox.editingMessage.set(null)
|
||||
this.store.messageBox.message.set("")
|
||||
return
|
||||
}
|
||||
|
||||
let attachments: Attachment[] = []
|
||||
files?.forEach(file => {
|
||||
const extraMetaData: Record<string, string> = {}
|
||||
const extraMetaData: Record<string, any> = {}
|
||||
extraMetaData["thumbnailMetaData"] = file.videoThumbnail ?? ""
|
||||
extraMetaData["progressShown"] = true
|
||||
extraMetaData["totalChunks"] = 0
|
||||
extraMetaData["uploadedChunks"] = 0
|
||||
|
||||
attachments.push({
|
||||
fileName: file.name,
|
||||
@@ -87,6 +90,7 @@ export class Text {
|
||||
})
|
||||
})
|
||||
|
||||
const tempMsgId = uuidv4()
|
||||
this.store.messages.update(value => [...value, {
|
||||
author: {
|
||||
userid: session.userData.userid,
|
||||
@@ -94,7 +98,7 @@ export class Text {
|
||||
username: session.userData.username,
|
||||
displayName: session.userData.displayName
|
||||
},
|
||||
msgid: "",
|
||||
msgid: tempMsgId,
|
||||
message: message,
|
||||
sent_at: {
|
||||
T: 0,
|
||||
@@ -104,7 +108,7 @@ export class Text {
|
||||
channelId: "",
|
||||
networkId: "",
|
||||
categoryId: "",
|
||||
files: [],
|
||||
files: attachments,
|
||||
seen: false,
|
||||
replyTo: "",
|
||||
replyToId: "",
|
||||
@@ -114,11 +118,12 @@ export class Text {
|
||||
|
||||
this.scrollToBottom("smooth")
|
||||
|
||||
await this.store.service.sendMessage("", message, null, null, files, <FileUploadProgressListener>{
|
||||
const respMessage = await this.store.service.sendMessage(tempMsgId, message, null, null, files, <FileUploadProgressListener>{
|
||||
fileProgressUpdate: (tempMsgId, fileId, allChunks, chunksDone) => {
|
||||
this.uploadProgressUpdate(tempMsgId, fileId, allChunks, chunksDone)
|
||||
}
|
||||
})
|
||||
this.updateTempMessage(tempMsgId, respMessage)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -138,19 +143,69 @@ export class Text {
|
||||
|
||||
scrollToBottom(anim: 'instant' | 'smooth'): void {
|
||||
setTimeout(() => {
|
||||
if (!this.store) {
|
||||
return
|
||||
}
|
||||
const scrollContainer = <HTMLDivElement>document.querySelector("#scrollContainer")
|
||||
scrollContainer.scroll({
|
||||
top: scrollContainer.scrollHeight,
|
||||
top: this.store.messagesVm.scrollBarStatus() == -1 ? scrollContainer.scrollHeight : this.store.messagesVm.scrollBarStatus(),
|
||||
left: 0,
|
||||
behavior: anim
|
||||
});
|
||||
|
||||
if (this.store.messagesVm.scrollBarStatus() == -1) {
|
||||
this.store.messagesVm.scrollBarStatus.set(scrollContainer.scrollHeight)
|
||||
}
|
||||
}, 0)
|
||||
}
|
||||
|
||||
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
|
||||
console.log(fileId, allChunks, chunksDone)
|
||||
handleMessagesScroll(e: any) {
|
||||
if (!this.store) return
|
||||
this.store.messagesVm.scrollBarStatus.set(e.target.scrollTop)
|
||||
}
|
||||
|
||||
uploadProgressUpdate(tempMsgId: string, fileId: string, allChunks: number, chunksDone: number) {
|
||||
if (!this.store) return
|
||||
this.store.messages.update(messages =>
|
||||
messages.map(m => {
|
||||
if (m.msgid !== tempMsgId) return m;
|
||||
|
||||
return {
|
||||
...m,
|
||||
files: m.files.map(f => {
|
||||
if (f.fileId !== fileId) return f;
|
||||
return {
|
||||
...f,
|
||||
extraMetaData: {
|
||||
...f.extraMetaData,
|
||||
totalChunks: allChunks,
|
||||
uploadedChunks: chunksDone
|
||||
}
|
||||
};
|
||||
})
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
updateTempMessage(tempMsgId: string, message: Message) {
|
||||
if (!this.store) return
|
||||
this.store.messages.update(messages =>
|
||||
messages.map(m => {
|
||||
if (m.msgid !== tempMsgId) return m;
|
||||
|
||||
return {
|
||||
...m,
|
||||
msgid: message.msgid,
|
||||
sent_at: message.sent_at,
|
||||
files: m.files.map(f => {
|
||||
f.extraMetaData["progressShown"] = false
|
||||
return f
|
||||
})
|
||||
};
|
||||
})
|
||||
);
|
||||
}
|
||||
// The chatid parameter ensures isolation
|
||||
onWsListen(action: string, message: string, networkId: string, channelId: string) {
|
||||
const data = JSON.parse(message);
|
||||
@@ -205,6 +260,7 @@ export class Text {
|
||||
categoryData: signal(categoryData),
|
||||
channelData: signal(channelData),
|
||||
messages: signal<Message[]>([]),
|
||||
messagesVm: new MessagesViewModel(),
|
||||
messageBox: new MessageBoxViewModel((msg, files) => this.sendMessage(msg, files)),
|
||||
wsListener: (action, data) => this.onWsListen(action, data, networkId, categoryId),
|
||||
} as TextChannelStorage;
|
||||
@@ -225,13 +281,17 @@ export class Text {
|
||||
try {
|
||||
const messagesCache = await currentStore.service.getQuick();
|
||||
currentStore.messages.set(messagesCache);
|
||||
this.scrollToBottom("instant")
|
||||
} catch (e) {
|
||||
console.warn(`Cache load failed: ${e}. Skipping cache load...`)
|
||||
}
|
||||
const messages = await currentStore.service.get();
|
||||
currentStore.messages.set(messages);
|
||||
this.scrollToBottom("instant")
|
||||
|
||||
await currentStore.service.joinWebSocketRoom();
|
||||
} else {
|
||||
this.scrollToBottom("instant")
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -70,6 +70,11 @@
|
||||
{{'home.enterChtnOnWeb'|translate}}
|
||||
</button>
|
||||
|
||||
<button style="width: 350px" tuiButton appearance="secondary" (click)="openGit()">
|
||||
<fa-icon [icon]="faGitAlt" style="font-size: 25px; display: flex; justify-content: center; width: 10px"></fa-icon>
|
||||
Git
|
||||
</button>
|
||||
|
||||
<button style="width: 350px" appearance="secondary" (click)="openRoadmap()" tuiButton iconStart="@tui.chart-no-axes-gantt">
|
||||
Roadmap
|
||||
</button>
|
||||
@@ -82,71 +87,6 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="detailedFeature">
|
||||
<div class="style">
|
||||
<h1>{{ 'home.chtn'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.circle-gauge"></tui-icon>
|
||||
{{ 'home.adaptsToYou'|translate }}</span></h1>
|
||||
<p>{{ 'home.adaptsToYouDesc'|translate }}</p>
|
||||
|
||||
<div class="cardList">
|
||||
<div tuiCardLarge>
|
||||
<tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
|
||||
|
||||
<h2>{{ 'home.chtnOnWeb'|translate }}</h2>
|
||||
<p>{{ 'home.chtnOnWebDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faAndroid"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnOnAndroid'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnOnAndroidDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faApple"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnOnApple'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnOnAppleDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faWindows"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnOnWindows'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnOnWindowsDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faLinux"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnOnLinux'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnOnLinuxDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faRecordVinyl"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnEcho'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnEchoDesc'|translate }}</p>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faDesktop"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.chtnReson'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{ 'home.chtnResonDesc'|translate }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="detailedFeature">
|
||||
<div class="style">
|
||||
<h1>{{ 'home.chtnIs'|translate }} <span style="color: var(--tui-status-positive)"><tui-icon icon="@tui.lock"></tui-icon>
|
||||
@@ -192,48 +132,35 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="detailedFeature" style="margin-bottom: 5%;">
|
||||
<section class="detailedFeature" id="platformList" style="margin-bottom: 5%;">
|
||||
<div class="style">
|
||||
<h1>{{ 'home.weAreExcitedFor'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
|
||||
<h1>{{ 'home.adaptsTo'|translate }} <span style="color: var(--tui-status-negative)"><tui-icon icon="@tui.heart"></tui-icon>
|
||||
{{ 'home.you'|translate }}</span></h1>
|
||||
<p>{{ 'home.weAreExcitedForYouDesc'|translate }}</p>
|
||||
<p>{{ 'home.adaptsToYouDesc'|translate }}</p>
|
||||
|
||||
<div class="cardList">
|
||||
<div tuiCardLarge>
|
||||
<tui-icon icon="@tui.globe" style="font-size: 80px"></tui-icon>
|
||||
|
||||
<h2><a routerLink="/chat">{{ 'home.enterChtnOnWeb'|translate }}</a></h2>
|
||||
<p>{{ 'home.enterChtnOnWebDesc'|translate }}</p>
|
||||
<div class="disabled card">
|
||||
<fa-icon [icon]="faLinux"></fa-icon>
|
||||
<h2>Linux</h2>
|
||||
<div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faGooglePlay"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.downloadChtnOnAndroid'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{'home.openBetaDesc'|translate}}</p>
|
||||
|
||||
<button (click)="androidBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
|
||||
<div class="disabled card">
|
||||
<fa-icon [icon]="faGoogle"></fa-icon>
|
||||
<h2>Google</h2>
|
||||
<div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<fa-icon [icon]="faAppStoreIos"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.downloadChtnOnApple'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{'home.openBetaDesc'|translate}}</p>
|
||||
|
||||
<button (click)="appleBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
|
||||
<div class="disabled card">
|
||||
<fa-icon [icon]="faApple"></fa-icon>
|
||||
<h2>Apple</h2>
|
||||
<div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
|
||||
</div>
|
||||
|
||||
<div tuiCardLarge>
|
||||
<div class="disabled card">
|
||||
<fa-icon [icon]="faMicrosoft"></fa-icon>
|
||||
|
||||
<h2>{{ 'home.downloadOnWindows'|translate }}</h2>
|
||||
<div tuiBadge>{{'home.openBeta'|translate}}</div>
|
||||
<p>{{'home.openBetaDesc'|translate}}</p>
|
||||
|
||||
<button (click)="msBetaTestDialogOpen = true" tuiButton iconStart="@tui.door-open">{{'home.requestAlphaAccess'|translate}}</button>
|
||||
<h2>Microsoft</h2>
|
||||
<div tuiBadge appearance="accent">{{'home.soon'|translate}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -117,6 +117,35 @@ main {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
#platformList {
|
||||
.cardList {
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
aspect-ratio: 1/1;
|
||||
background: var(--tui-background-base);
|
||||
border-radius: 1.5rem;
|
||||
cursor: pointer;
|
||||
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
fa-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
||||
@@ -8,7 +8,7 @@ import {FaIconComponent} from '@fortawesome/angular-fontawesome';
|
||||
import {
|
||||
faAndroid,
|
||||
faApple,
|
||||
faAppStoreIos,
|
||||
faAppStoreIos, faGitAlt, faGitee, faGoogle,
|
||||
faGooglePlay,
|
||||
faLinux,
|
||||
faMicrosoft,
|
||||
@@ -97,6 +97,10 @@ export class Homepage {
|
||||
window.open('https://help.chatenium.hu/s/169154db-df3e-44cb-980d-2db1915ecdf8', '_blank')
|
||||
}
|
||||
|
||||
openGit() {
|
||||
window.open('https://git.chatenium.hu', '_blank')
|
||||
}
|
||||
|
||||
openMsStore() {
|
||||
window.open('https://apps.microsoft.com/detail/9p1xq5vb62b0?ocid=webpdpshare', '_blank')
|
||||
}
|
||||
@@ -150,4 +154,7 @@ export class Homepage {
|
||||
protected readonly faGooglePlay = faGooglePlay;
|
||||
protected readonly faAppStoreIos = faAppStoreIos;
|
||||
protected readonly faMicrosoft = faMicrosoft;
|
||||
protected readonly faGoogle = faGoogle;
|
||||
protected readonly faGitee = faGitee;
|
||||
protected readonly faGitAlt = faGitAlt;
|
||||
}
|
||||
|
||||
@@ -16,6 +16,7 @@ import {Message as NetworkMessage} from '@chatenium/chatenium-sdk/domain/textCha
|
||||
import {PictureService} from '@chatenium/chatenium-sdk/services/pictureService';
|
||||
import {Album} from '@chatenium/chatenium-sdk/domain/pictureService.schema';
|
||||
import {PublicUserData} from '@chatenium/chatenium-sdk/domain/common.schema';
|
||||
import {MessagesViewModel} from './chat/elements/messages/messages-viewmodel';
|
||||
|
||||
@Injectable({
|
||||
providedIn: 'root',
|
||||
@@ -52,6 +53,7 @@ export enum LoadStatus {
|
||||
export interface DmStorage {
|
||||
service: DMService
|
||||
messages: WritableSignal<Message[]>
|
||||
messagesVm: MessagesViewModel
|
||||
chatData: WritableSignal<Chat>
|
||||
messageBox: MessageBoxViewModel
|
||||
wsListener: (action: string, message: string) => void
|
||||
@@ -73,6 +75,7 @@ export interface NetworkStorage {
|
||||
export interface TextChannelStorage {
|
||||
service: TextChannelServiceService
|
||||
messages: WritableSignal<NetworkMessage[]>
|
||||
messagesVm: MessagesViewModel
|
||||
channelData: WritableSignal<NetworkChannel>
|
||||
categoryData: WritableSignal<NetworkCategory>
|
||||
messageBox: MessageBoxViewModel
|
||||
|
||||
Reference in New Issue
Block a user