contrapunctus/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Refactoring of Attribute Images, fix more or less decent slideshow. Turns out a few lines of css can get us there!

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-18 01:25:13 +02:00
parent 6ba4cb18c6
commit 1609c63f3b
20 changed files with 363 additions and 361 deletions
Download patch file Download diff file Expand all files Collapse all files

11
UI/Base/Img.ts
View file

@ -3,10 +3,12 @@ import BaseUIElement from "../BaseUIElement";
export default class Img extends BaseUIElement {
private _src: string;
private readonly _rawSvg: boolean;
constructor(src: string) {
constructor(src: string, rawSvg = false) {
super();
this._src = src;
this._rawSvg = rawSvg;
}
static AsData(source: string) {
@ -21,6 +23,13 @@ export default class Img extends BaseUIElement {
}
protected InnerConstructElement(): HTMLElement {
if (this._rawSvg) {
const e = document.createElement("div")
e.innerHTML = this._src
return e;
}
const el = document.createElement("img")
el.src = this._src;
el.onload = () => {

6
UI/Base/SubtleButton.ts
View file

@ -29,14 +29,14 @@ export class SubtleButton extends UIElement {
} else {
img = imageUrl;
}
img?.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
img?.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0 mr-4")
const image = new Combine([img])
.SetClass("flex-shrink-0");
if (linkTo == undefined) {
return new Combine([
image,
message?.SetClass("blcok ml-4 overflow-ellipsis"),
message?.SetClass("block overflow-ellipsis"),
]).SetClass("flex group w-full");
}
@ -44,7 +44,7 @@ export class SubtleButton extends UIElement {
return new Link(
new Combine([
image,
message?.SetClass("block ml-4 overflow-ellipsis")
message?.SetClass("block overflow-ellipsis")
]).SetClass("flex group w-full"),
linkTo.url,
linkTo.newTab ?? false