zhangyuheng/ObjToSchematic
1
0
Fork 0
forked from mirror/ObjToSchematic
Code Pull Requests 1 Activity

Added UI header with update checker

Browse Source
This commit is contained in:
Lucas Dower 2023-01-24 21:29:38 +00:00
parent 134914530b
commit de67687d86
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
6 changed files with 216 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
res/static/bug.svg Normal file
View File

@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-bug" 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" id="bug-svg"/>
<path d="M9 9v-1a3 3 0 0 1 6 0v1" />
<path d="M8 9h8a6 6 0 0 1 1 3v3a5 5 0 0 1 -10 0v-3a6 6 0 0 1 1 -3" />
<line x1="3" y1="13" x2="7" y2="13" />
<line x1="17" y1="13" x2="21" y2="13" />
<line x1="12" y1="20" x2="12" y2="14" />
<line x1="4" y1="19" x2="7.35" y2="17" />
<line x1="20" y1="19" x2="16.65" y2="17" />
<line x1="4" y1="7" x2="7.75" y2="9.4" />
<line x1="20" y1="7" x2="16.25" y2="9.4" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 711 B

4
res/static/github.svg Normal file
View File

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-github" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round" id="github-svg">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 613 B

10
src/config.ts
View File

@ -12,6 +12,10 @@ export class AppConfig {
}
public readonly RELEASE_MODE: boolean;
public readonly MAJOR_VERSION: number;
public readonly MINOR_VERSION: number;
public readonly HOTFIX_VERSION: number;
public readonly VERSION_TYPE: 'd' | 'a' | 'r'; // dev, alpha, or release build
public readonly RELEASE_VERSION: string;
public readonly VOXEL_BUFFER_CHUNK_SIZE: number;
@ -41,7 +45,11 @@ export class AppConfig {
private constructor() {
this.RELEASE_MODE = false;
this.RELEASE_VERSION = '0.8.0d';
this.MAJOR_VERSION = 0;
this.MINOR_VERSION = 8;
this.HOTFIX_VERSION = 0;
this.VERSION_TYPE = 'd';
this.RELEASE_VERSION = `${this.MAJOR_VERSION}.${this.MINOR_VERSION}.${this.HOTFIX_VERSION}${this.VERSION_TYPE}`;
this.VOXEL_BUFFER_CHUNK_SIZE = 5_000;
const configFile = fs.readFileSync(PathUtil.join(AppPaths.Get.resources, 'config.json'), 'utf8');

140
src/ui/elements/header_element.ts Normal file
View File

@ -0,0 +1,140 @@
import { shell } from 'electron';
import { AppConfig } from '../../config';
import { ASSERT } from '../../util/error_util';
import { LOG, LOG_ERROR } from '../../util/log_util';
import { AppPaths, PathUtil } from '../../util/path_util';
import { UIUtil } from '../../util/ui_util';
import { BaseUIElement } from './base_element';
import { ToolbarItemElement } from './toolbar_item';
export class HeaderUIElement extends BaseUIElement<HTMLDivElement> {
private static _instance: HeaderUIElement;
public static get Get() {
return this._instance || (this._instance = new this());
}
private _githubButton: ToolbarItemElement;
private _bugButton: ToolbarItemElement;
private constructor() {
super();
this._githubButton = new ToolbarItemElement({ icon: 'github' })
.onClick(() => {
shell.openExternal('https://github.com/LucasDower/ObjToSchematic');
});
this._bugButton = new ToolbarItemElement({ icon: 'bug' })
.onClick(() => {
shell.openExternal('https://github.com/LucasDower/ObjToSchematic/issues');
});
}
// Header element shouldn't be
protected override _onEnabledChanged(): void {
return;
}
public override generateHTML(): string {
return `
<div class="property">
<div class="col-container header-cols">
<div class="col-container">
<div class="col-item">
<img class="logo" src="${PathUtil.join(AppPaths.Get.static, 'icon.png')}">
</div>
<div class="col-item">
<div class="row-container">
<div class="row-item title">
ObjToSchematic
</div>
<div class="row-item subtitle" id="update-checker">
Up-to-date
</div>
</div>
</div>
</div>
<div class="col-container">
<div class="col-item">
${this._githubButton.generateHTML()}
</div>
<div class="col-item">
${this._bugButton.generateHTML()}
</div>
</div>
</div>
</div>
`;
}
public override registerEvents(): void {
this._githubButton.registerEvents();
this._bugButton.registerEvents();
}
public override finalise(): void {
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>';
fetch('https://api.github.com/repos/LucasDower/ObjToSchematic/releases/latest')
.then((response) => response.json())
.then((data) => {
const latest: string = data.tag_name; // e.g. v0.7.0
const versionString = latest.substring(1); // e.g. 0.7.0
const versionValues = versionString.split('.').map((x) => parseInt(x));
// Is the local version older than the latest release on GitHub?
let isGitHubVersionNewer = false;
if (versionValues[0] > AppConfig.Get.MAJOR_VERSION) {
isGitHubVersionNewer = true;
} else {
if (versionValues[1] > AppConfig.Get.MINOR_VERSION) {
isGitHubVersionNewer = true;
} else {
if (versionValues[2] > AppConfig.Get.HOTFIX_VERSION) {
isGitHubVersionNewer = true;
}
}
}
/*
let isLocalVersionNewer = false;
if (versionValues[0] < AppConfig.Get.MAJOR_VERSION) {
isLocalVersionNewer = true;
} else {
if (versionValues[1] < AppConfig.Get.MINOR_VERSION) {
isLocalVersionNewer = true;
} else {
if (versionValues[2] > AppConfig.Get.HOTFIX_VERSION) {
isLocalVersionNewer = true;
}
}
}
*/
LOG(`[VERSION]: Current: ${[AppConfig.Get.MAJOR_VERSION, AppConfig.Get.MINOR_VERSION, AppConfig.Get.HOTFIX_VERSION]}, Latest: ${versionValues}`);
updateElement.style.animation = '';
if (isGitHubVersionNewer) {
updateElement.innerHTML = `<a href="#" id="update-link">New ${versionString} update available!</a>`;
const linkElement = UIUtil.getElementById('update-link') as HTMLLinkElement;
linkElement.onclick = () => {
shell.openExternal('https://github.com/LucasDower/ObjToSchematic/releases/latest');
};
} else {
// Either using most up-to-date version or local version is newer (using unreleased dev or alpha build)
updateElement.innerHTML = `Version up-to-date!`;
}
})
.catch((error) => {
LOG_ERROR(error);
updateElement.style.animation = '';
updateElement.innerHTML = 'Could not check for updates';
});
}
}

6
src/ui/layout.ts
View File

@ -19,6 +19,7 @@ import { CheckboxElement } from './elements/checkbox';
import { ComboBoxElement, ComboBoxItem } from './elements/combobox';
import { ConfigUIElement } from './elements/config_element';
import { FileInputElement } from './elements/file_input';
import { HeaderUIElement } from './elements/header_element';
import { OutputElement } from './elements/output';
import { SliderElement } from './elements/slider';
import { ToolbarItemElement } from './elements/toolbar_item';
@ -468,7 +469,7 @@ export class UI {
}
document.getElementById('properties')!.innerHTML = `<div class="container">
` + itemHTML + `</div>`;
` + HeaderUIElement.Get.generateHTML() + itemHTML + `</div>`;
// Build toolbar
let toolbarHTML = '';
@ -567,6 +568,9 @@ export class UI {
}
public registerEvents() {
HeaderUIElement.Get.registerEvents();
HeaderUIElement.Get.finalise();
for (const groupName in this._ui) {
const group = this._uiDull[groupName];
for (const elementName in group.elements) {

46
styles.css
View File

@ -18,6 +18,7 @@
--prop-sunken: hsl(0, 0%, 8%);
--text-standard: hsl(0, 0%, 66%);
--text-muted: hsl(0, 0%, 45%);
--text-disabled: hsl(0, 0%, 33%);
--vertical-divider: hsl(0, 0%, 14%);
@ -797,10 +798,55 @@ svg {
display: flex;
flex-direction: row;
gap: 2px;
align-items: center;
}
.col-item {
display: flex;
flex-direction: column;
align-items: center;
}
.logo {
width: 32px;
margin-right: 10px;
}
.title {
font-size: 110%;
}
.subtitle {
font-size: 90%;
font-weight: 300;
color: var(--text-muted);
}
.header-cols {
justify-content: space-between;
width: 100%;
padding-top: 4px;
}
.button-loading {
box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
}
@keyframes pulse-opacity {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
a {
font-weight: 400;
color: var(--prop-accent-hovered)
}