forked from MapComplete/MapComplete
Rework copyright panel, fix filter view toggle
This commit is contained in:
parent
6c39f563b6
commit
64adf13d42
10 changed files with 120 additions and 22 deletions
|
|
@ -56,6 +56,7 @@ export default class Attribution extends Combine {
|
|||
)
|
||||
)
|
||||
super([mapComplete, reportBug, stats, editHere, editWithJosm, mapillary]);
|
||||
this.SetClass("flex")
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,23 +12,99 @@ import {VariableUiElement} from "../Base/VariableUIElement";
|
|||
import * as contributors from "../../assets/contributors.json"
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
||||
import Title from "../Base/Title";
|
||||
import {SubtleButton} from "../Base/SubtleButton";
|
||||
import Svg from "../../Svg";
|
||||
import FeaturePipeline from "../../Logic/FeatureSource/FeaturePipeline";
|
||||
import {BBox} from "../../Logic/BBox";
|
||||
import Loc from "../../Models/Loc";
|
||||
import Toggle from "../Input/Toggle";
|
||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import Constants from "../../Models/Constants";
|
||||
|
||||
/**
|
||||
* The attribution panel shown on mobile
|
||||
*/
|
||||
export default class AttributionPanel extends Combine {
|
||||
export default class CopyrightPanel extends Combine {
|
||||
|
||||
private static LicenseObject = AttributionPanel.GenerateLicenses();
|
||||
private static LicenseObject = CopyrightPanel.GenerateLicenses();
|
||||
|
||||
constructor(layoutToUse: LayoutConfig, contributions: UIEventSource<Map<string, number>>) {
|
||||
constructor(state: {
|
||||
layoutToUse: LayoutConfig,
|
||||
featurePipeline: FeaturePipeline,
|
||||
currentBounds: UIEventSource<BBox>,
|
||||
locationControl: UIEventSource<Loc>,
|
||||
osmConnection: OsmConnection
|
||||
}, contributions: UIEventSource<Map<string, number>>) {
|
||||
|
||||
const t =Translations.t.general.attribution
|
||||
const layoutToUse = state.layoutToUse
|
||||
const josmState = new UIEventSource<string>(undefined)
|
||||
// Reset after 15s
|
||||
josmState.stabilized(15000).addCallbackD(_ => josmState.setData(undefined))
|
||||
const iconStyle = "height: 1.5rem; width: auto"
|
||||
const actionButtons = [
|
||||
new SubtleButton(Svg.liberapay_ui().SetStyle(iconStyle), t.donate, {
|
||||
url: "https://liberapay.com/pietervdvn/",
|
||||
newTab: true
|
||||
}),
|
||||
new SubtleButton(Svg.bug_ui().SetStyle(iconStyle), t.openIssueTracker, {
|
||||
url: "https://github.com/pietervdvn/MapComplete/issues",
|
||||
newTab: true
|
||||
}),
|
||||
new SubtleButton(Svg.statistics_ui().SetStyle(iconStyle), t.openOsmcha.Subs({theme: state.layoutToUse.title}), {
|
||||
url: Utils.OsmChaLinkFor(31, state.layoutToUse.id),
|
||||
newTab: true
|
||||
}),
|
||||
new VariableUiElement(state.locationControl.map(location => {
|
||||
const idLink = `https://www.openstreetmap.org/edit?editor=id#map=${location?.zoom ?? 0}/${location?.lat ?? 0}/${location?.lon ?? 0}`
|
||||
return new SubtleButton(Svg.pencil_ui().SetStyle(iconStyle), t.editId, {url: idLink, newTab: true})
|
||||
})),
|
||||
|
||||
new VariableUiElement(state.locationControl.map(location => {
|
||||
const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`
|
||||
return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle), t.openMapillary, {url: mapillaryLink, newTab: true})
|
||||
})),
|
||||
new VariableUiElement(josmState.map(state => {
|
||||
if(state === undefined){
|
||||
return undefined
|
||||
}
|
||||
state = state.toUpperCase()
|
||||
if(state === "OK"){
|
||||
return t.josmOpened.SetClass("thanks")
|
||||
}
|
||||
return t.josmNotOpened.SetClass("alert")
|
||||
})),
|
||||
new Toggle(
|
||||
new SubtleButton(Svg.josm_logo_ui().SetStyle(iconStyle) , t.editJosm).onClick(() => {
|
||||
const bounds: any = state.currentBounds.data;
|
||||
if (bounds === undefined) {
|
||||
return undefined
|
||||
}
|
||||
const top = bounds.getNorth();
|
||||
const bottom = bounds.getSouth();
|
||||
const right = bounds.getEast();
|
||||
const left = bounds.getWest();
|
||||
const josmLink = `http://127.0.0.1:8111/load_and_zoom?left=${left}&right=${right}&top=${top}&bottom=${bottom}`
|
||||
Utils.download(josmLink).then(answer => josmState.setData(answer.replace(/\n/g, '').trim())).catch(_ => josmState.setData("ERROR"))
|
||||
}), undefined, state.osmConnection.userDetails.map(ud => ud.loggedIn && ud.csCount >= Constants.userJourney.historyLinkVisible)),
|
||||
|
||||
].map(button => button.SetStyle("max-height: 3rem"))
|
||||
|
||||
const iconAttributions = Utils.NoNull(Array.from(layoutToUse.ExtractImages()))
|
||||
.map(CopyrightPanel.IconAttribution)
|
||||
|
||||
let maintainer : BaseUIElement= undefined
|
||||
if(layoutToUse.maintainer !== undefined && layoutToUse.maintainer !== "" && layoutToUse.maintainer.toLowerCase() !== "mapcomplete"){
|
||||
maintainer = Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.maintainer})
|
||||
}
|
||||
|
||||
super([
|
||||
Translations.t.general.attribution.attributionContent,
|
||||
((layoutToUse.maintainer ?? "") == "") ? "" : Translations.t.general.attribution.themeBy.Subs({author: layoutToUse.maintainer}),
|
||||
layoutToUse.credits,
|
||||
"<br/>",
|
||||
maintainer,
|
||||
new Combine(actionButtons).SetClass("block w-full"),
|
||||
new FixedUiElement(layoutToUse.credits),
|
||||
new Attribution(State.state.locationControl, State.state.osmConnection.userDetails, State.state.layoutToUse, State.state.currentBounds),
|
||||
"<br/>",
|
||||
|
||||
new VariableUiElement(contributions.map(contributions => {
|
||||
if(contributions === undefined){
|
||||
return ""
|
||||
|
|
@ -62,14 +138,12 @@ export default class AttributionPanel extends Combine {
|
|||
|
||||
|
||||
})),
|
||||
"<br/>",
|
||||
AttributionPanel.CodeContributors(),
|
||||
"<h3>", Translations.t.general.attribution.iconAttribution.title.Clone().SetClass("pt-6 pb-3"), "</h3>",
|
||||
...Utils.NoNull(Array.from(layoutToUse.ExtractImages()))
|
||||
.map(AttributionPanel.IconAttribution)
|
||||
]);
|
||||
CopyrightPanel.CodeContributors(),
|
||||
new Title(t.iconAttribution.title, 3),
|
||||
...iconAttributions
|
||||
].map(e => e?.SetClass("mt-4")));
|
||||
this.SetClass("flex flex-col link-underline overflow-hidden")
|
||||
this.SetStyle("max-width: calc(100vw - 5em); width: 40rem;")
|
||||
this.SetStyle("max-width: calc(100vw - 5em); width: 40rem; margin-left: 0.75rem; margin-right: 0.5rem")
|
||||
}
|
||||
|
||||
private static CodeContributors(): BaseUIElement {
|
||||
|
|
@ -97,7 +171,7 @@ export default class AttributionPanel extends Combine {
|
|||
iconPath = "." + new URL(iconPath).pathname;
|
||||
}
|
||||
|
||||
const license: SmallLicense = AttributionPanel.LicenseObject[iconPath]
|
||||
const license: SmallLicense = CopyrightPanel.LicenseObject[iconPath]
|
||||
if (license == undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import Combine from "../Base/Combine";
|
||||
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
|
||||
import Translations from "../i18n/Translations";
|
||||
import AttributionPanel from "./AttributionPanel";
|
||||
import CopyrightPanel from "./CopyrightPanel";
|
||||
import ContributorCount from "../../Logic/ContributorCount";
|
||||
import Toggle from "../Input/Toggle";
|
||||
import MapControlButton from "../MapControlButton";
|
||||
|
|
@ -37,8 +37,8 @@ export default class LeftControls extends Combine {
|
|||
const toggledCopyright = new ScrollableFullScreen(
|
||||
() => Translations.t.general.attribution.attributionTitle.Clone(),
|
||||
() =>
|
||||
new AttributionPanel(
|
||||
state.layoutToUse,
|
||||
new CopyrightPanel(
|
||||
state,
|
||||
new ContributorCount(state).Contributors
|
||||
),
|
||||
"copyright",
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export class DefaultGuiState {
|
|||
if(Hash.hash.data === "download"){
|
||||
this.downloadControlIsOpened.setData(true)
|
||||
}
|
||||
if(Hash.hash.data === "filter"){
|
||||
if(Hash.hash.data === "filters"){
|
||||
this.filterViewIsOpened.setData(true)
|
||||
}
|
||||
if(Hash.hash.data === "copyright"){
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue