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

Refactoring: remove 'professional' information page

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-07 00:18:09 +02:00
parent a1fa3b4942
commit d6d9438bc7
23 changed files with 0 additions and 1232 deletions
Download patch file Download diff file Expand all files Collapse all files

93
UI/Base/Toggleable.ts
View file

@ -1,93 +0,0 @@
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 {
constructor(toggles: Toggleable[]) {
for (const el of toggles) {
el.isVisible.addCallbackAndRun((isVisible) =>
toggles.forEach((toggle) => {
if (toggle !== el && isVisible) {
toggle.isVisible.setData(false)
}
})
)
}
super(toggles)
}
}
export default class Toggleable extends Combine {
public readonly isVisible = new UIEventSource(false)
constructor(
title: Title | Combine | BaseUIElement,
content: BaseUIElement,
options?: {
closeOnClick?: true | boolean
height?: "100vh" | string
}
) {
super([title, content])
content.SetClass("animate-height border-l-4 pl-2 block")
title.SetClass("background-subtle rounded-lg")
const self = this
this.onClick(() => {
if (self.isVisible.data) {
if (options?.closeOnClick ?? true) {
self.isVisible.setData(false)
}
} else {
self.isVisible.setData(true)
}
})
const contentElement = content.ConstructElement()
if (title instanceof Combine) {
for (const el of title.getElements()) {
if (el instanceof Title) {
title = el
break
}
}
}
if (title instanceof Title) {
Hash.hash.addCallbackAndRun((h) => {
if (h === (<Title>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>title).id)
}
})
}
this.isVisible.addCallbackAndRun((isVisible) => {
if (isVisible) {
contentElement.style.maxHeight = options?.height ?? "100vh"
contentElement.style.overflowY = "auto"
contentElement.style["-webkit-mask-image"] = "unset"
} else {
contentElement.style["-webkit-mask-image"] =
"-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))"
contentElement.style.maxHeight = "2rem"
}
})
}
public Collapse(): Toggleable {
this.isVisible.setData(false)
return this
}
}

102
UI/ProfessionalGui.ts
View file

@ -1,102 +0,0 @@
import { FixedUiElement } from "./Base/FixedUiElement"
import Translations from "./i18n/Translations"
import Combine from "./Base/Combine"
import Title from "./Base/Title"
import Toggleable, { Accordeon } from "./Base/Toggleable"
import List from "./Base/List"
import BaseUIElement from "./BaseUIElement"
import LanguagePicker from "./LanguagePicker"
import TableOfContents from "./Base/TableOfContents"
import LeftIndex from "./Base/LeftIndex"
import Locale from "./i18n/Locale";
class Snippet extends Toggleable {
constructor(translations, ...extraContent: BaseUIElement[]) {
super(new Title(translations.title, 3), new SnippetContent(translations, ...extraContent))
}
}
class SnippetContent extends Combine {
constructor(translations: any, ...extras: BaseUIElement[]) {
super([
translations.intro,
new List([
translations.li0,
translations.li1,
translations.li2,
translations.li3,
translations.li4,
translations.li5,
translations.li6,
]),
translations.outro,
...extras,
])
this.SetClass("flex flex-col")
}
}
class ProfessionalGui extends LeftIndex {
constructor() {
const t = Translations.t.professional
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 Title(t.title, 1), t.intro]).SetClass("flex flex-col"),
]).SetClass("flex")
const content = new Combine([
header,
new Title(t.osmTitle, 2),
t.text0,
t.text1,
new Accordeon([
new Snippet(t.aboutOsm.aboutOsm),
new Snippet(t.aboutOsm.benefits),
new Snippet(t.aboutOsm.license),
new Snippet(t.aboutOsm.vandalism),
]).SetClass("flex flex-col"),
new Title(t.aboutMc.title, 2),
t.aboutMc.text0,
t.aboutMc.text1,
t.aboutMc.text2,
new Accordeon([
new Snippet(t.aboutMc.layers),
new Snippet(t.aboutMc.survey),
new Snippet(t.aboutMc.internalUse),
new Snippet(t.services),
]),
new Title(t.drawbacks.title, 2).SetClass("text-2xl"),
t.drawbacks.intro,
new Accordeon([
new Snippet(t.drawbacks.unsuitedData),
new Snippet(
t.drawbacks.licenseNuances,
new Title(t.drawbacks.licenseNuances.usecaseMapDifferentSources.title, 4),
new SnippetContent(t.drawbacks.licenseNuances.usecaseMapDifferentSources),
new Title(t.drawbacks.licenseNuances.usecaseGatheringOpenData.title, 4),
new SnippetContent(t.drawbacks.licenseNuances.usecaseGatheringOpenData)
),
]),
]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
const leftContents: BaseUIElement[] = [
new TableOfContents(content, {
noTopLevel: true,
maxDepth: 2,
}).SetClass("subtle"),
new LanguagePicker(
Translations.t.professional.title.SupportedLanguages(), Locale.language
)?.SetClass("mt-4 self-end flex-col"),
].map((el) => el?.SetClass("pl-4"))
super(leftContents, content)
}
}
new FixedUiElement("").AttachTo("decoration-desktop")
new ProfessionalGui().AttachTo("main")