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
|
|
@ -10,7 +10,7 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
|||
* Makes sure the hash shows the selected element and vice-versa.
|
||||
*/
|
||||
export default class SelectedFeatureHandler {
|
||||
private static readonly _no_trigger_on = new Set(["welcome", "copyright", "layers", "new", "filter","", undefined])
|
||||
private static readonly _no_trigger_on = new Set(["welcome", "copyright", "layers", "new", "filters","", undefined])
|
||||
private readonly hash: UIEventSource<string>;
|
||||
private readonly state: {
|
||||
selectedElement: UIEventSource<any>,
|
||||
|
|
|
|||
|
|
@ -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"){
|
||||
|
|
|
|||
1
assets/svg/liberapay.svg
Normal file
1
assets/svg/liberapay.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><g transform="matrix(.83012 0 0 .83012-135.4-247.7)"><path d="m259.55 385.57c0 5.145-4.169 9.318-9.318 9.318h-77.74c-5.144 0-9.318-4.174-9.318-9.318v-77.74c0-5.145 4.174-9.318 9.318-9.318h77.74c5.149 0 9.318 4.173 9.318 9.318v77.74" fill="#f6c915"/><g fill="#fff"><path d="m202.45 366.03c-3.104 0-5.541-.405-7.311-1.213-1.77-.809-3.039-1.912-3.803-3.313-.766-1.398-1.137-3-1.115-4.818.021-1.814.272-3.748.754-5.803l8.327-34.817 10.164-1.573-9.114 37.768c-.175.786-.273 1.508-.295 2.163-.023.655.098 1.235.36 1.737.262.504.71.908 1.344 1.213.633.307 1.519.504 2.656.591l-1.967 8.06"/><path d="m239.16 344.33c0 3.19-.525 6.108-1.574 8.753-1.049 2.646-2.503 4.929-4.36 6.852-1.858 1.925-4.087 3.421-6.688 4.491-2.601 1.07-5.432 1.607-8.49 1.607-1.487 0-2.973-.132-4.459-.395l-2.951 11.869h-9.704l10.884-45.37c1.748-.524 3.748-.994 5.999-1.41 2.252-.415 4.689-.622 7.312-.622 2.448 0 4.558.371 6.327 1.114 1.771.743 3.224 1.76 4.361 3.049 1.136 1.29 1.977 2.798 2.523 4.524.546 1.726.82 3.574.82 5.542m-23.802 13.442c.743.175 1.661.262 2.754.262 1.704 0 3.256-.316 4.655-.951 1.398-.633 2.59-1.518 3.574-2.655.982-1.136 1.747-2.501 2.294-4.098.546-1.595.819-3.354.819-5.278 0-1.879-.416-3.475-1.245-4.787-.831-1.311-2.273-1.967-4.327-1.967-1.4 0-2.711.131-3.935.394l-4.589 19.08"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -879,6 +879,16 @@
|
|||
],
|
||||
"sources": []
|
||||
},
|
||||
{
|
||||
"path": "liberapay.svg",
|
||||
"license": "Logo (all rights reserved)",
|
||||
"authors": [
|
||||
"LiberaPay"
|
||||
],
|
||||
"sources": [
|
||||
"https://liberapay.com/"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "loading.svg",
|
||||
"license": "CC0; trivial",
|
||||
|
|
|
|||
|
|
@ -11,7 +11,8 @@
|
|||
"en": "This theme is an attempt to help automating the GRB import.<br/>Note that this is very hacky and 'steals' the GRB data from an external site; in order to do this, you need to install and activate <a href='https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/'>this firefox extension</a> for it to work."
|
||||
},
|
||||
"language": [
|
||||
"nl"
|
||||
"nl",
|
||||
"en"
|
||||
],
|
||||
"maintainer": "",
|
||||
"icon": "./assets/svg/bug.svg",
|
||||
|
|
|
|||
|
|
@ -161,6 +161,14 @@
|
|||
"iconAttribution": {
|
||||
"title": "Used icons"
|
||||
},
|
||||
"openIssueTracker": "File a bug",
|
||||
"editJosm": "Edit here with JOSM",
|
||||
"josmOpened": "JOSM is opened",
|
||||
"josmNotOpened": "JOSM could not be reached. Make sure it is opened and remote control is enabled",
|
||||
"editId": "Open the OpenStreetMap online editor here",
|
||||
"openMapillary": "Open Mapillary here",
|
||||
"donate": "Support MapComplete financially",
|
||||
"openOsmcha": "See latest edits made with {theme}",
|
||||
"mapContributionsBy": "The current visible data has edits made by {contributors}",
|
||||
"mapContributionsByAndHidden": "The current visible data has edits made by {contributors} and {hiddenCount} more contributors",
|
||||
"codeContributionsBy": "MapComplete has been built by {contributors} and <a href='https://github.com/pietervdvn/MapComplete/graphs/contributors' target='_blank'>{hiddenCount} more contributors</a>"
|
||||
|
|
|
|||
|
|
@ -792,6 +792,9 @@
|
|||
"description": "A <b>ghost bike</b> is a memorial for a cyclist who died in a traffic accident, in the form of a white bicycle placed permanently near the accident location.<br/><br/>On this map, one can see all the ghost bikes which are known by OpenStreetMap. Is a ghost bike missing? Everyone can add or update information here - you only need to have a (free) OpenStreetMap account.",
|
||||
"title": "Ghost bikes"
|
||||
},
|
||||
"grb": {
|
||||
"description": "This theme is an attempt to help automating the GRB import.<br/>Note that this is very hacky and 'steals' the GRB data from an external site; in order to do this, you need to install and activate <a href='https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/'>this firefox extension</a> for it to work."
|
||||
},
|
||||
"hackerspaces": {
|
||||
"description": "On this map you can see hackerspaces, add a new hackerspace or update data directly",
|
||||
"layers": {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue