More CSS improvements and cleanups
This commit is contained in:
Pieter Vander Vennet
parent
6d5f4ade25
commit
257194c063
7 changed files with 128 additions and 287 deletions
|
|
@ -24,8 +24,6 @@ export class FeatureInfoBox extends UIElement {
|
|||
private readonly _tagsES: UIEventSource<any>;
|
||||
private readonly _changes: Changes;
|
||||
private readonly _title: UIElement;
|
||||
private readonly _osmLink: UIElement;
|
||||
private readonly _wikipedialink: UIElement;
|
||||
private readonly _infoboxes: TagDependantUIElement[];
|
||||
|
||||
private readonly _oneSkipped = Translations.t.general.oneSkippedQuestion.Clone();
|
||||
|
|
@ -65,22 +63,36 @@ export class FeatureInfoBox extends UIElement {
|
|||
this._oneSkipped.onClick(initTags)
|
||||
|
||||
|
||||
let renderedTitle: UIElement;
|
||||
title = title ?? new TagRenderingOptions(
|
||||
{
|
||||
mappings: [{k: new And([]), txt: ""}]
|
||||
}
|
||||
)
|
||||
if (typeof (title) == "string") {
|
||||
this._title = new FixedUiElement(title);
|
||||
renderedTitle = new FixedUiElement(title);
|
||||
} else if (title instanceof UIElement) {
|
||||
this._title = title;
|
||||
renderedTitle = title;
|
||||
} else {
|
||||
this._title = title.construct(deps);
|
||||
renderedTitle = title.construct(deps);
|
||||
}
|
||||
this._osmLink = new OsmLink().construct(deps);
|
||||
this._wikipedialink = new WikipediaLink().construct(deps);
|
||||
|
||||
|
||||
renderedTitle
|
||||
.SetStyle("width: calc(100% - 50px - 0.2em);")
|
||||
.SetClass("title-font")
|
||||
|
||||
const osmLink = new OsmLink()
|
||||
.construct(deps)
|
||||
.SetStyle("width: 24px; display:block;")
|
||||
const wikipedialink = new WikipediaLink()
|
||||
.construct(deps)
|
||||
.SetStyle("width: 24px; display:block;")
|
||||
|
||||
this._title = new Combine([
|
||||
renderedTitle,
|
||||
wikipedialink,
|
||||
osmLink]).SetStyle("display:flex;");
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
|
|
@ -134,22 +146,15 @@ export class FeatureInfoBox extends UIElement {
|
|||
questionElement = this._someSkipped;
|
||||
}
|
||||
|
||||
const title = new Combine([
|
||||
this._title,
|
||||
this._wikipedialink,
|
||||
this._osmLink]);
|
||||
|
||||
const infoboxcontents = new Combine(
|
||||
[ new VerticalCombine(info, "infobox-information "), questionElement ?? ""]);
|
||||
[new VerticalCombine(info, "infobox-information "), questionElement ?? ""]);
|
||||
|
||||
return "<div class='featureinfobox'>" +
|
||||
new Combine([
|
||||
"<div class='featureinfoboxtitle'>",
|
||||
title,
|
||||
"</div>",
|
||||
"<div class='infoboxcontents'>",
|
||||
infoboxcontents,
|
||||
"</div>"]).Render() + "</div>";
|
||||
return new Combine([
|
||||
this._title,
|
||||
"<div class='infoboxcontents'>",
|
||||
infoboxcontents,
|
||||
"</div>"]).SetClass("featureinfobox")
|
||||
.Render();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,20 +1,13 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import {ImageSearcher} from "../../Logic/ImageSearcher";
|
||||
import {SlideShow} from "../SlideShow";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import {
|
||||
Dependencies,
|
||||
TagDependantUIElement,
|
||||
TagDependantUIElementConstructor
|
||||
} from "../../Customizations/UIElementConstructor";
|
||||
import {State} from "../../State";
|
||||
import Translation from "../i18n/Translation";
|
||||
import {CheckBox} from "../Input/CheckBox";
|
||||
import Combine from "../Base/Combine";
|
||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import Translations from "../i18n/Translations";
|
||||
|
||||
export class ImageCarouselConstructor implements TagDependantUIElementConstructor {
|
||||
IsKnown(properties: any): boolean {
|
||||
|
|
@ -41,24 +34,13 @@ export class ImageCarouselConstructor implements TagDependantUIElementConstructo
|
|||
|
||||
export class ImageCarousel extends TagDependantUIElement {
|
||||
|
||||
|
||||
private readonly searcher: ImageSearcher;
|
||||
|
||||
public readonly searcher: ImageSearcher;
|
||||
public readonly slideshow: SlideShow;
|
||||
|
||||
private readonly _uiElements: UIEventSource<UIElement[]>;
|
||||
|
||||
private readonly _deleteButton: UIElement;
|
||||
private readonly _confirmation: UIElement;
|
||||
|
||||
constructor(tags: UIEventSource<any>, osmConnection: OsmConnection = undefined) {
|
||||
constructor(tags: UIEventSource<any>) {
|
||||
super(tags);
|
||||
|
||||
const self = this;
|
||||
osmConnection = osmConnection ?? State.state?.osmConnection;
|
||||
this.searcher = new ImageSearcher(tags);
|
||||
|
||||
this._uiElements = this.searcher.map((imageURLS: string[]) => {
|
||||
const uiElements = this.searcher.map((imageURLS: string[]) => {
|
||||
const uiElements: UIElement[] = [];
|
||||
for (const url of imageURLS) {
|
||||
const image = ImageSearcher.CreateImageElement(url);
|
||||
|
|
@ -67,96 +49,12 @@ export class ImageCarousel extends TagDependantUIElement {
|
|||
return uiElements;
|
||||
});
|
||||
|
||||
this.slideshow = new SlideShow(
|
||||
this._uiElements,
|
||||
new FixedUiElement("")).HideOnEmpty(true);
|
||||
|
||||
|
||||
const showDeleteButton = this.slideshow._currentSlide.map((i: number) => {
|
||||
if (!osmConnection?.userDetails?.data?.loggedIn) {
|
||||
return false;
|
||||
}
|
||||
return self.searcher.IsDeletable(self.searcher.data[i]);
|
||||
}, [this.searcher, osmConnection?.userDetails, this.slideshow._currentSlide]);
|
||||
|
||||
const isDeleted: UIEventSource<boolean> = this.slideshow._currentSlide.map((i: number) => {
|
||||
const isDeleted = self.searcher._deletedImages.data.indexOf(self.searcher.data[i]) >= 0;
|
||||
console.log("Now deleted: ", i, isDeleted);
|
||||
return isDeleted;
|
||||
}, [this.searcher, this.searcher._deletedImages, this.slideshow._currentSlide]);
|
||||
|
||||
const style = ";padding:0.4em;height:2em;padding: 0.4em; font-weight:bold;";
|
||||
const backButton = Translations.t.image.dontDelete
|
||||
.SetStyle("background:black;border-radius:0.4em 0.4em 0 0" + style)
|
||||
|
||||
const deleteButton =
|
||||
Translations.t.image.doDelete
|
||||
.SetStyle("background:#ff8c8c;border-radius:0 0 0.4em 0.4em" + style);
|
||||
this._confirmation = deleteButton;
|
||||
|
||||
const isDeletedBadge = Translations.t.image.isDeleted
|
||||
.SetStyle("display:block;" +
|
||||
"background-color: black;color:white;padding:0.4em;border-radius:0.4em");
|
||||
|
||||
const confirmDialog = new Combine([
|
||||
backButton,
|
||||
deleteButton]
|
||||
).SetStyle("display:flex;" +
|
||||
"flex-direction:column;" +
|
||||
"background:black;" +
|
||||
"color:white;" +
|
||||
"border-radius:0.5em;" +
|
||||
"width:max-content;" +
|
||||
"height:min-content;");
|
||||
|
||||
const smallDeleteButton = new FixedUiElement("<img style='width:1.5em' src='./assets/delete.svg'>")
|
||||
.SetStyle("display:block;" +
|
||||
"width: 1.5em;" +
|
||||
"height: 1.5em;" +
|
||||
"padding: 0.5em;" +
|
||||
"border-radius: 3em;" +
|
||||
"background-color: black;")
|
||||
|
||||
const deleteButtonCheckbox = new CheckBox(
|
||||
confirmDialog,
|
||||
new VariableUiElement(
|
||||
showDeleteButton.map(showDelete => {
|
||||
|
||||
if (isDeleted.data) {
|
||||
return isDeletedBadge.Render()
|
||||
}
|
||||
if (!showDelete) {
|
||||
return "";
|
||||
}
|
||||
return smallDeleteButton.Render();
|
||||
}, [this.searcher._deletedImages, isDeleted]
|
||||
)));
|
||||
|
||||
deleteButton.onClick(() => {
|
||||
console.log("Deleting image...");
|
||||
deleteButtonCheckbox.isEnabled.setData(false);
|
||||
deleteButtonCheckbox.Update();
|
||||
self.searcher.Delete(self.searcher.data[self.slideshow._currentSlide.data]);
|
||||
});
|
||||
|
||||
isDeleted.addCallback(isD => {
|
||||
if(isD){
|
||||
deleteButtonCheckbox.isEnabled.setData(false);
|
||||
}
|
||||
})
|
||||
|
||||
this._deleteButton = deleteButtonCheckbox;
|
||||
this._deleteButton.SetStyle(
|
||||
"position:absolute;display:block;top:1em;left:5em;z-index: 7000;width:min-content;height:min-content;"
|
||||
)
|
||||
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
|
||||
|
||||
}
|
||||
|
||||
InnerRender(): string {
|
||||
return new Combine([
|
||||
this._deleteButton,
|
||||
this.slideshow
|
||||
]).SetStyle("position:relative").Render();
|
||||
return this.slideshow.Render();
|
||||
}
|
||||
|
||||
IsKnown(): boolean {
|
||||
|
|
|
|||
|
|
@ -7,17 +7,14 @@ export class SlideShow extends UIElement {
|
|||
private readonly _embeddedElements: UIEventSource<UIElement[]>
|
||||
|
||||
public readonly _currentSlide: UIEventSource<number> = new UIEventSource<number>(0);
|
||||
private readonly _noimages: UIElement;
|
||||
private _prev: UIElement;
|
||||
private _next: UIElement;
|
||||
|
||||
constructor(
|
||||
embeddedElements: UIEventSource<UIElement[]>,
|
||||
noImages: UIElement) {
|
||||
embeddedElements: UIEventSource<UIElement[]>) {
|
||||
super(embeddedElements);
|
||||
this._embeddedElements = embeddedElements;
|
||||
this.ListenTo(this._currentSlide);
|
||||
this._noimages = noImages;
|
||||
|
||||
const self = this;
|
||||
this._prev = new FixedUiElement("<div class='prev-button'>" +
|
||||
|
|
@ -41,7 +38,7 @@ export class SlideShow extends UIElement {
|
|||
|
||||
InnerRender(): string {
|
||||
if (this._embeddedElements.data.length == 0) {
|
||||
return this._noimages.Render();
|
||||
return "";
|
||||
}
|
||||
|
||||
if (this._embeddedElements.data.length == 1) {
|
||||
|
|
|
|||
|
|
@ -169,6 +169,7 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
|
||||
this._editButton = new FixedUiElement("");
|
||||
if (this._question !== undefined) {
|
||||
// 2.3em total width
|
||||
this._editButton = new FixedUiElement(
|
||||
"<img style='width: 1.3em;height: 1.3em;padding: 0.5em;border-radius: 0.65em;border: solid black 1px;font-size: medium;float: right;' " +
|
||||
"src='./assets/pencil.svg' alt='edit'>")
|
||||
|
|
@ -498,22 +499,27 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
if (this.IsKnown()) {
|
||||
|
||||
const answer = this.RenderAnswer();
|
||||
if(answer.IsEmpty()){
|
||||
if (answer.IsEmpty()) {
|
||||
return "";
|
||||
}
|
||||
let editButton;
|
||||
|
||||
|
||||
const answerStyle = " display: inline-block;" +
|
||||
" margin: 0.1em;" +
|
||||
" width: 100%;" +
|
||||
" font-size: large;"
|
||||
|
||||
if (State.state === undefined || // state undefined -> we are custom testing
|
||||
State.state?.osmConnection?.userDetails?.data?.loggedIn && this._question !== undefined) {
|
||||
editButton = this._editButton;
|
||||
answer.SetStyle("display:inline-block;width:calc(100% - 2.3em);")
|
||||
return new Combine([
|
||||
answer,
|
||||
this._editButton])
|
||||
.SetStyle(answerStyle)
|
||||
.Render();
|
||||
}
|
||||
|
||||
return new Combine([
|
||||
"<span class='answer'>",
|
||||
"<span class='answer-text'>",
|
||||
answer,
|
||||
"</span>",
|
||||
editButton ?? "",
|
||||
"</span>"]).Render();
|
||||
return answer.SetStyle(answerStyle).Render();
|
||||
}
|
||||
|
||||
return "";
|
||||
|
|
|
|||
|
|
@ -158,9 +158,9 @@ export abstract class UIElement extends UIEventSource<string> {
|
|||
if (this.style !== undefined && this.style !== "") {
|
||||
style = `style="${this.style}" `;
|
||||
}
|
||||
const clss = "";
|
||||
let clss = "";
|
||||
if (this.clss.length > 0) {
|
||||
`class='${this.clss.join(" ")}' `;
|
||||
clss = `class='${this.clss.join(" ")}' `;
|
||||
}
|
||||
return `<span ${clss}${style}id='${this.id}'>${this.lastInnerRender}</span>`
|
||||
}
|
||||
|
|
@ -184,14 +184,14 @@ export abstract class UIElement extends UIEventSource<string> {
|
|||
|
||||
public SetClass(clss: string): UIElement {
|
||||
this.dumbMode = false;
|
||||
if(clss === "" && this.clss.length > 0){
|
||||
if (clss === "" && this.clss.length > 0) {
|
||||
this.clss = [];
|
||||
this.Update();
|
||||
}
|
||||
if (this.clss.indexOf(clss) < 0) {
|
||||
} else if (this.clss.indexOf(clss) < 0) {
|
||||
this.clss.push(clss);
|
||||
this.Update();
|
||||
}
|
||||
console.log(this.clss)
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue