Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

First nearly-finished draft of project page

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-11-26 02:45:39 +01:00
parent e8fb457596
commit adf4eb18c0
6 changed files with 216 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Base/Title.ts
View file

@ -1,9 +1,11 @@
import BaseUIElement from "../BaseUIElement";
import {FixedUiElement} from "./FixedUiElement";
import Hash from "../../Logic/Web/Hash";
export default class Title extends BaseUIElement {
public readonly title: BaseUIElement;
public readonly level: number;
public readonly id : string
constructor(embedded: string | BaseUIElement, level: number = 3) {
super()
@ -13,6 +15,7 @@ export default class Title extends BaseUIElement {
this.title = embedded
}
this.level = level;
this.id = this.title.ConstructElement().innerText.replace(/ /g, '_')
}
AsMarkdown(): string {
@ -36,6 +39,7 @@ export default class Title extends BaseUIElement {
}
const h = document.createElement("h" + this.level)
h.appendChild(el)
el.id = this.id
return h;
}
}

24
UI/Base/Toggleable.ts
View file

@ -1,6 +1,8 @@
import BaseUIElement from "../BaseUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Combine from "./Combine";
import Title from "./Title";
import Hash from "../../Logic/Web/Hash";
export class Accordeon extends Combine {
@ -23,14 +25,32 @@ export class Accordeon extends Combine {
export default class Toggleable extends Combine {
public readonly isVisible = new UIEventSource(false)
constructor(title: BaseUIElement, content: BaseUIElement) {
constructor(title: Title | BaseUIElement, content: BaseUIElement) {
super([title, content])
content.SetClass("animate-height border-l-4 border-gray-300 pl-2")
content.SetClass("animate-height border-l-4 pl-2")
title.SetClass("background-subtle rounded-lg")
const self = this
this.onClick(() => self.isVisible.setData(!self.isVisible.data))
const contentElement = content.ConstructElement()
if(title instanceof Title){
Hash.hash.addCallbackAndRun(h => {
if(h === title.id){
self.isVisible.setData(true)
content.RemoveClass("border-gray-300")
content.SetClass("border-red-300")
}else{
content.SetClass("border-gray-300")
content.RemoveClass("border-red-300")
}
})
this.isVisible.addCallbackAndRun(isVis => {
if(isVis){
Hash.hash.setData(title.id)
}
})
}
this.isVisible.addCallbackAndRun(isVisible => {
if (isVisible) {
contentElement.style.maxHeight = "100vh"

139
UI/ProfessionalGui.ts
View file

@ -6,17 +6,19 @@ import Toggleable, {Accordeon} from "./Base/Toggleable";
import List from "./Base/List";
import BaseUIElement from "./BaseUIElement";
import Link from "./Base/Link";
import LanguagePicker from "./LanguagePicker";
import Hash from "../Logic/Web/Hash";
import {Translation} from "./i18n/Translation";
import {SubtleButton} from "./Base/SubtleButton";
import Svg from "../Svg";
class TableOfContents extends Combine {
/**
* All the padding levels. Note that these are written out so that tailwind-generate-css can detect them
* @private
*/
private static readonly paddings: string[] = ["pl-0, pl-2", "pl-4", "pl-6", "pl-8", "pl-10", "pl-12", "pl-14"]
private readonly titles: Title[]
constructor(elements: Combine | Title[]) {
constructor(elements: Combine | Title[], options: {
noTopLevel: false | boolean
}) {
let titles: Title[]
if (elements instanceof Combine) {
titles = elements.getToC()
@ -24,21 +26,71 @@ class TableOfContents extends Combine {
titles = elements
}
const minLevel = Math.min(...titles.map(t => t.level))
const els: BaseUIElement[] = []
let els: { level: number, content: BaseUIElement }[] = []
for (const title of titles) {
const l = title.level - minLevel
const padding = TableOfContents.paddings[l]
const text = title.title.ConstructElement().innerText
const vis = new Link(new FixedUiElement(text), "#" + text).SetClass(padding)
els.push(vis)
let content: BaseUIElement
if (title.title instanceof Translation) {
content = title.title.Clone()
} else {
content = new FixedUiElement(title.title.ConstructElement().innerText)
}
const vis = new Link(content, "#" + title.id)
Hash.hash.addCallbackAndRun(h => {
if (h === title.id) {
vis.SetClass("font-bold")
} else {
vis.RemoveClass("font-bold")
}
})
els.push({level: title.level, content: vis})
}
super(els);
if (options.noTopLevel) {
const minLevel = Math.min(...els.map(e => e.level))
els = els.filter(e => e.level !== minLevel)
}
super(TableOfContents.mergeLevel(els).map(el => el.SetClass("mt-2")));
this.SetClass("flex flex-col")
this.titles = titles;
}
private static mergeLevel(elements: { level: number, content: BaseUIElement }[]): BaseUIElement[] {
const maxLevel = Math.max(...elements.map(e => e.level))
const minLevel = Math.min(...elements.map(e => e.level))
if (maxLevel === minLevel) {
return elements.map(e => e.content)
}
const result: { level: number, content: BaseUIElement } [] = []
let running: BaseUIElement[] = []
for (const element of elements) {
if (element.level === maxLevel) {
running.push(element.content)
continue
}
if (running.length !== undefined) {
result.push({
content: new List(running),
level: maxLevel - 1
})
running = []
}
result.push(element)
}
if (running.length !== undefined) {
result.push({
content: new List(running),
level: maxLevel - 1
})
}
return TableOfContents.mergeLevel(result)
}
AsMarkdown(): string {
return super.AsMarkdown();
}
@ -71,19 +123,18 @@ export default class ProfessionalGui {
constructor() {
const t = Translations.t.professional
// LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()).SetClass("flex absolute top-2 right-3"),
const content = new Combine([
const header = new Combine([
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.SetClass("flex-none m-3"),
new Combine([
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.SetClass("flex-none m-3"),
new Combine([
new Title(t.title, 1).SetClass("font-bold text-3xl"),
t.intro
]).SetClass("flex flex-col")
]).SetClass("flex"),
new Title(t.title, 1).SetClass("font-bold text-3xl"),
t.intro
]).SetClass("flex flex-col")
]).SetClass("flex")
const content = new Combine([
header,
new Title(t.osmTitle, 2).SetClass("text-2xl"),
t.text0,
t.text1,
@ -97,13 +148,41 @@ export default class ProfessionalGui {
new Title(t.aboutMc.title, 2).SetClass("text-2xl"),
t.aboutMc.text0,
t.aboutMc.text1,
t.aboutMc.text2
t.aboutMc.text2,
new Accordeon([
new Snippet(t.aboutMc.layers),
new Snippet(t.aboutMc.survey),
new Snippet(t.aboutMc.internalUse)
]),
new Title(t.drawbacks.title, 2).SetClass("text-2xl"),
t.drawbacks.intro,
new Accordeon([
new Snippet(t.drawbacks.unsuitedData),
new Snippet(t.drawbacks.licenseNuances)
]),
]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10")
const backToIndex = new Combine([new SubtleButton(
Svg.back_svg().SetStyle("height: 1.5rem;"),
t.backToMapcomplete,
{
url: window.location.host + "/index.html"
}
)]).SetClass("block")
const toc = new TableOfContents(content)
new Combine([toc, content]).SetClass("flex").AttachTo("main")
const leftContents: BaseUIElement[] = [
backToIndex,
new TableOfContents(content, {
noTopLevel: true
}).SetClass("subtle"),
LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()).SetClass("mt-4 self-end flex-col"),
].map(el => el.SetClass("pl-4"))
const leftBar = new Combine([
new Combine(leftContents).SetClass("sticky top-4 m-4")
]).SetClass("block w-full md:w-2/6 lg:w-1/6")
new Combine([leftBar, content]).SetClass("block md:flex").AttachTo("main")
}