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

Fixed disabled styles for various material components, closes #145

Browse Source
This commit is contained in:
Lucas Dower 2023-09-05 22:29:41 +01:00
parent b26aab8a8b
commit 197e9bae19
No known key found for this signature in database
GPG Key ID: B3EE6B8499593605
3 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/components/colour.ts
View File

@ -21,9 +21,9 @@ export class ColourComponent extends ConfigComponent<RGBA, HTMLInputElement> {
super._onEnabledChanged();
if (this.enabled) {
this._getElement().classList.add('enabled');
this._getElement().disabled = false;
} else {
this._getElement().classList.remove('enabled');
this._getElement().disabled = true;
}
}
}

16
src/ui/components/image.ts
View File

@ -75,12 +75,22 @@ export class ImageComponent extends ConfigComponent<Promise<TImageRawWrap>, HTML
protected override _onEnabledChanged(): void {
super._onEnabledChanged();
const imageElement = UIUtil.getElementById(this._imageId) as HTMLImageElement;
const placeholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
if (!this.enabled) {
imageElement.classList.add('disabled');
placeholderComponent.classList.add('disabled');
} else {
imageElement.classList.remove('disabled');
placeholderComponent.classList.remove('disabled');
}
this._switchElement.setEnabled(this.enabled);
}
protected override _onValueChanged(): void {
const inputElement = UIUtil.getElementById(this._imageId) as HTMLImageElement;
const PlaceholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
const placeholderComponent = UIUtil.getElementById(this._imageId + '-placeholder');
this.getValue()
.then((res) => {
@ -90,13 +100,13 @@ export class ImageComponent extends ConfigComponent<Promise<TImageRawWrap>, HTML
this._switchElement.setActive(false);
inputElement.src = res.raw;
inputElement.style.display = 'unset';
PlaceholderComponent.style.display = 'none';
placeholderComponent.style.display = 'none';
})
.catch((err) => {
this._switchElement.setActive(true);
inputElement.src = '';
inputElement.style.display = 'none';
PlaceholderComponent.style.display = 'flex';
placeholderComponent.style.display = 'flex';
});
}

12
styles.css
View File

@ -488,11 +488,14 @@ svg {
border-radius: 5px;
border: 1px solid var(--gray-600);
}
.enabled.colour-swatch::-webkit-color-swatch:hover {
.colour-swatch:enabled::-webkit-color-swatch:hover {
border: 1px solid var(--gray-700);
filter: brightness(1.1);
cursor: pointer;
}
.colour-swatch:disabled::-webkit-color-swatch {
opacity: 0.25;
}
.texture-preview {
border: 1px solid var(--gray-600);
@ -502,6 +505,10 @@ svg {
.texture-preview-missing {
border-color: orange !important;
}
.texture-preview.disabled {
filter: grayscale(0.5);
opacity: 0.5;
}
.texture-preview-placeholder {
border: 1px solid var(--gray-400);
@ -513,6 +520,9 @@ svg {
align-items: center;
justify-content: center;
}
.texture-preview-placeholder.disabled {
color: var(--text-dark);
}
.texture-hover {
border-color: var(--text-standard) !important;