Added announcement to banner

This commit is contained in:
Lucas Dower 2024-04-04 23:34:58 +01:00
parent 25afe63c5f
commit abdd43aa87
5 changed files with 37 additions and 1 deletions

View File

@ -182,6 +182,7 @@ export const en_GB = {
open_github_repo: 'Open GitHub repo',
open_github_issues: 'Open GitHub issues',
join_discord: 'Join Discord server',
kofi_donate: 'Donate via Ko-fi',
}
},
};

View File

@ -12,7 +12,7 @@ export class AppConfig {
public readonly MAJOR_VERSION = 0;
public readonly MINOR_VERSION = 8;
public readonly HOTFIX_VERSION = 9;
public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'd'; // dev, alpha, or release build
public readonly VERSION_TYPE: 'd' | 'a' | 'r' = 'r'; // dev, alpha, or release build
public readonly MINECRAFT_VERSION = '1.20.1';
public readonly LOCALE = 'en-GB';

View File

@ -15,6 +15,7 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
private _githubButton: ToolbarItemComponent;
private _bugButton: ToolbarItemComponent;
private _discordButton: ToolbarItemComponent;
private _kofiButton: ToolbarItemComponent;
private constructor() {
super();
@ -36,6 +37,12 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
window.open('https://discord.gg/McS2VrBZPD');
})
.setTooltip('toolbar.join_discord');
this._kofiButton = new ToolbarItemComponent({ id: 'kofi', iconSVG: AppIcons.KOFI })
.onClick(() => {
window.open('https://ko-fi.com/lucasdower');
})
.setTooltip('toolbar.kofi_donate');
}
// Header element shouldn't be
@ -45,6 +52,9 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
public override generateHTML(): string {
return `
<div class="col-container announcement">
The next release of ObjToSchematic will be a major overhaul with new features coming later in 2024. Join the Discord for updates.
</div>
<div class="col-container header-cols">
<div class="col-container">
<div class="col-item">
@ -65,6 +75,7 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
${this._githubButton.generateHTML()}
${this._bugButton.generateHTML()}
${this._discordButton.generateHTML()}
${this._kofiButton.generateHTML()}
</div>
</div>
<div class="row-container header-cols">
@ -84,18 +95,21 @@ export class HeaderComponent extends BaseComponent<HTMLDivElement> {
this._githubButton.updateTranslation();
this._bugButton.updateTranslation();
this._discordButton.updateTranslation();
this._kofiButton.updateTranslation();
}
public override registerEvents(): void {
this._githubButton.registerEvents();
this._bugButton.registerEvents();
this._discordButton.registerEvents();
this._kofiButton.registerEvents();
}
public override finalise(): void {
this._githubButton.finalise();
this._bugButton.finalise();
this._discordButton.finalise();
this._kofiButton.finalise();
// const updateElement = UIUtil.getElementById('update-checker') as HTMLDivElement;
// updateElement.style.animation = 'pulse-opacity 1.5s infinite';
// updateElement.innerHTML = '<i style="animation: pulse-opacity 1.5s infinite;">Checking for updates...</i>';

View File

@ -180,6 +180,17 @@ export namespace AppIcons {
</svg>
`;
export const KOFI = `
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-coffee" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#9e9e9e" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M3 14c.83 .642 2.077 1.017 3.5 1c1.423 .017 2.67 -.358 3.5 -1c.83 -.642 2.077 -1.017 3.5 -1c1.423 -.017 2.67 .358 3.5 1" />
<path d="M8 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
<path d="M12 3a2.4 2.4 0 0 0 -1 2a2.4 2.4 0 0 0 1 2" />
<path d="M3 10h14v5a6 6 0 0 1 -6 6h-2a6 6 0 0 1 -6 -6v-5z" />
<path d="M16.746 16.726a3 3 0 1 0 .252 -5.555" />
</svg>
`;
export const SELECT_ALL = `
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-square-check" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>

View File

@ -750,3 +750,13 @@ a {
font-size: var(--font-size-small);
color: var(--text-dim);
}
.announcement {
border: 1px solid var(--blue-600);
background: var(--blue-500);
margin-bottom: 30px;
padding: 10px;
color: var(--text-bright);
border-radius: 3px;
font-size: smaller;
}