Add attribution button as standalone button, fix image license display

This commit is contained in:
Pieter Vander Vennet 2023-02-06 22:43:34 +01:00
parent b942dd764b
commit 664a7f821e
13 changed files with 160 additions and 116 deletions

View file

@ -9,6 +9,7 @@ import { VariableUiElement } from "../Base/VariableUIElement"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import { BBox } from "../../Logic/BBox"
import { Utils } from "../../Utils"
import Translations from "../i18n/Translations"
/**
* The bottom right attribution panel in the leaflet map
@ -58,7 +59,13 @@ export default class Attribution extends Combine {
true
)
let editWithJosm = new VariableUiElement(
const mapDataByOsm = new Link(
Translations.t.general.attribution.mapDataByOsm,
"https://openstreetmap.org/copyright",
true
)
const editWithJosm = new VariableUiElement(
userDetails.map(
(userDetails) => {
if (userDetails.csCount < Constants.userJourney.tagsVisibleAndWikiLinked) {
@ -79,7 +86,7 @@ export default class Attribution extends Combine {
[location, currentBounds]
)
)
super([mapComplete, reportBug, stats, editHere, editWithJosm, mapillary])
super([mapComplete, reportBug, stats, editHere, editWithJosm, mapillary, mapDataByOsm])
this.SetClass("flex")
}
}

View file

@ -2,13 +2,13 @@ import Combine from "../Base/Combine"
import Translations from "../i18n/Translations"
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import { FixedUiElement } from "../Base/FixedUiElement"
import * as licenses from "../../assets/generated/license_info.json"
import licenses from "../../assets/generated/license_info.json"
import SmallLicense from "../../Models/smallLicense"
import { Utils } from "../../Utils"
import Link from "../Base/Link"
import { VariableUiElement } from "../Base/VariableUIElement"
import * as contributors from "../../assets/contributors.json"
import * as translators from "../../assets/translators.json"
import contributors from "../../assets/contributors.json"
import translators from "../../assets/translators.json"
import BaseUIElement from "../BaseUIElement"
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
import Title from "../Base/Title"

View file

@ -85,15 +85,6 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
tabs.push({ header: Svg.share_img, content: new ShareScreen(state) })
}
const copyright = {
header: Svg.copyright_svg(),
content: new Combine([
Translations.t.general.openStreetMapIntro.SetClass("link-underline"),
new CopyrightPanel(state),
]),
}
tabs.push(copyright)
const privacy = {
header: Svg.eye_svg(),
content: new PrivacyPolicy(),

View file

@ -105,24 +105,7 @@ export default class LeftControls extends Combine {
state.featureSwitchBackgroundSelection
)
// If the welcomeMessage is disabled, the copyright is hidden (as that is where the copyright is located
const copyright = new Toggle(
undefined,
new Lazy(() => {
new ScrollableFullScreen(
() => Translations.t.general.attribution.attributionTitle,
() => new CopyrightPanel(state),
"copyright",
guiState.copyrightViewIsOpened
)
return new MapControlButton(Svg.copyright_svg()).onClick(() =>
guiState.copyrightViewIsOpened.setData(true)
)
}),
state.featureSwitchWelcomeMessage
)
super([currentViewAction, filterButton, downloadButton, copyright, mapSwitch])
super([currentViewAction, filterButton, downloadButton, mapSwitch])
this.SetClass("flex flex-col")
}

View file

@ -33,6 +33,8 @@ import GeoLocationHandler from "../Logic/Actors/GeoLocationHandler"
import { GeoLocationState } from "../Logic/State/GeoLocationState"
import Hotkeys from "./Base/Hotkeys"
import AvailableBaseLayers from "../Logic/Actors/AvailableBaseLayers"
import Lazy from "./Base/Lazy"
import CopyrightPanel from "./BigComponents/CopyrightPanel"
/**
* The default MapComplete GUI initializer
@ -239,7 +241,22 @@ export default class DefaultGUI {
const testingBadge = Toggle.If(state.featureSwitchIsTesting, () =>
new FixedUiElement("TESTING").SetClass("alert m-2 border-2 border-black")
)
new Combine([welcomeMessageMapControl, userInfoMapControl, extraLink, testingBadge])
new ScrollableFullScreen(
() => Translations.t.general.attribution.attributionTitle,
() => new CopyrightPanel(state),
"copyright",
guiState.copyrightViewIsOpened
)
const copyright = new MapControlButton(Svg.copyright_svg()).onClick(() =>
guiState.copyrightViewIsOpened.setData(true)
)
new Combine([
welcomeMessageMapControl,
userInfoMapControl,
copyright,
extraLink,
testingBadge,
])
.SetClass("flex flex-col")
.AttachTo("top-left")

View file

@ -404,4 +404,4 @@
]
}
]
}
}

View file

@ -1,6 +1,42 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 159.265625 170.734375 C 160 165.882812 161.617188 161.617188 163.675781 157.941406 C 165.738281 154.265625 168.675781 151.179688 172.355469 148.824219 C 175.882812 146.621094 180.292969 145.589844 185.734375 145.445312 C 189.117188 145.589844 192.207031 146.179688 195 147.355469 C 197.941406 148.679688 200.585938 150.441406 202.644531 152.648438 C 204.703125 154.855469 206.324219 157.5 207.644531 160.441406 C 208.96875 163.382812 209.558594 166.617188 209.703125 169.855469 L 236.027344 169.855469 C 235.734375 162.941406 234.410156 156.621094 231.910156 150.882812 C 229.410156 145.148438 226.027344 140.148438 221.617188 136.03125 C 217.203125 131.914062 211.910156 128.679688 205.734375 126.328125 C 199.558594 123.972656 192.792969 122.945312 185.292969 122.945312 C 175.734375 122.945312 167.355469 124.5625 160.296875 127.945312 C 153.238281 131.328125 147.355469 135.738281 142.648438 141.472656 C 137.945312 147.207031 134.414062 153.824219 132.207031 161.472656 C 130.003906 169.117188 128.679688 177.058594 128.679688 185.589844 L 128.679688 189.558594 C 128.679688 198.085938 129.855469 206.027344 132.0625 213.675781 C 134.265625 221.320312 137.796875 227.9375 142.503906 233.527344 C 147.207031 239.113281 153.089844 243.671875 160.148438 246.910156 C 167.207031 250.144531 175.589844 251.910156 185.148438 251.910156 C 192.058594 251.910156 198.527344 250.730469 204.558594 248.527344 C 210.585938 246.320312 215.882812 243.230469 220.4375 239.261719 C 224.996094 235.292969 228.675781 230.734375 231.320312 225.4375 C 233.96875 220.144531 235.585938 214.558594 235.734375 208.527344 L 209.410156 208.527344 C 209.265625 211.617188 208.527344 214.410156 207.203125 217.058594 C 205.882812 219.703125 204.117188 221.910156 201.910156 223.820312 C 199.707031 225.734375 197.207031 227.203125 194.265625 228.234375 C 191.46875 229.261719 188.53125 229.554688 185.441406 229.703125 C 180.148438 229.554688 175.734375 228.527344 172.355469 226.320312 C 168.675781 223.96875 165.738281 220.878906 163.675781 217.203125 C 161.617188 213.527344 160 209.117188 159.265625 204.265625 C 158.53125 199.410156 158.089844 194.410156 158.089844 189.558594 L 158.089844 185.589844 C 158.089844 180.441406 158.53125 175.589844 159.265625 170.734375 Z M 187.5 40.449219 C 106.328125 40.449219 40.449219 106.328125 40.449219 187.5 C 40.449219 268.671875 106.328125 334.550781 187.5 334.550781 C 268.671875 334.550781 334.550781 268.671875 334.550781 187.5 C 334.550781 106.328125 268.671875 40.449219 187.5 40.449219 Z M 187.5 305.140625 C 122.652344 305.140625 69.859375 252.347656 69.859375 187.5 C 69.859375 122.652344 122.652344 69.859375 187.5 69.859375 C 252.347656 69.859375 305.140625 122.652344 305.140625 187.5 C 305.140625 252.347656 252.347656 305.140625 187.5 305.140625 Z M 187.5 305.140625 "/>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="375px"
height="375px"
viewBox="0 0 375 375"
version="1.1"
id="svg5"
sodipodi:docname="copyright.svg"
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs9" />
<sodipodi:namedview
id="namedview7"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="2.4012481"
inkscape:cx="194.06574"
inkscape:cy="30.192632"
inkscape:window-width="1920"
inkscape:window-height="995"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg5" />
<g
id="surface1"
transform="matrix(1.2644961,0,0,1.2644961,-49.593016,-49.593016)">
<path
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none"
d="m 159.26562,170.73437 c 0.73438,-4.85156 2.35157,-9.11718 4.41016,-12.79296 2.0625,-3.67579 5,-6.76172 8.67969,-9.11719 3.52734,-2.20313 7.9375,-3.23438 13.3789,-3.37891 3.38282,0.14453 6.47266,0.73438 9.26563,1.91016 2.94141,1.32422 5.58594,3.08594 7.64453,5.29297 2.05859,2.20703 3.67969,4.85156 5,7.79297 1.32422,2.9414 1.91406,6.17578 2.05859,9.41406 h 26.32422 c -0.29297,-6.91406 -1.61718,-13.23438 -4.11718,-18.97266 -2.5,-5.73437 -5.88282,-10.73437 -10.29297,-14.85156 -4.41407,-4.11719 -9.70703,-7.35156 -15.88282,-9.70312 -6.17578,-2.35547 -12.9414,-3.38282 -20.4414,-3.38282 -9.5586,0 -17.9375,1.61719 -24.9961,5 -7.05859,3.38281 -12.9414,7.79297 -17.64843,13.52735 -4.70313,5.73437 -8.23438,12.35156 -10.44141,20 -2.20312,7.64453 -3.52734,15.58593 -3.52734,24.11718 v 3.96875 c 0,8.52735 1.17578,16.46875 3.38281,24.11719 2.20312,7.64453 5.73437,14.26172 10.44141,19.85156 4.70312,5.58594 10.58593,10.14453 17.64453,13.38282 7.05859,3.23437 15.4414,5 25,5 6.91015,0 13.3789,-1.17969 19.41015,-3.38282 6.02735,-2.20703 11.32422,-5.29687 15.87891,-9.26562 4.55859,-3.96875 8.23828,-8.52735 10.88281,-13.82422 2.64844,-5.29297 4.26563,-10.87891 4.41406,-16.91016 h -26.32421 c -0.14454,3.08985 -0.88282,5.88282 -2.20704,8.53125 -1.32031,2.64453 -3.08593,4.85157 -5.29296,6.76172 -2.20313,1.91406 -4.70313,3.38281 -7.64454,4.41406 -2.79687,1.02735 -5.73437,1.32032 -8.82421,1.46875 -5.29297,-0.14843 -9.70704,-1.17578 -13.08594,-3.38281 -3.67969,-2.35156 -6.61719,-5.4414 -8.67969,-9.11719 -2.05859,-3.67578 -3.67578,-8.08593 -4.41016,-12.9375 -0.73437,-4.85546 -1.17578,-9.85546 -1.17578,-14.70703 v -3.96875 c 0,-5.14843 0.44141,-10 1.17578,-14.85547 z M 187.5,40.449219 c -81.17187,0 -147.050781,65.878911 -147.050781,147.050781 0,81.17187 65.878911,147.05078 147.050781,147.05078 81.17187,0 147.05078,-65.87891 147.05078,-147.05078 0,-81.17187 -65.87891,-147.050781 -147.05078,-147.050781 z m 0,264.691401 c -64.84766,0 -117.640625,-52.79296 -117.640625,-117.64062 0,-64.84766 52.792965,-117.640625 117.640625,-117.640625 64.84766,0 117.64062,52.792965 117.64062,117.640625 0,64.84766 -52.79296,117.64062 -117.64062,117.64062 z m 0,0"
id="path2" />
</g>
</svg>
</svg>

Before

Width:  |  Height:  |  Size: 3 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

View file

@ -1233,7 +1233,8 @@
},
"question": {
"en": "what notes can you use to pay here?",
"nl": "Met welke bankbiljetten kan je hier betalen?"
"nl": "Met welke bankbiljetten kan je hier betalen?",
"de": "Mit welchen Banknoten kann man hier bezahlen?"
},
"multiAnswer": true,
"mappings": [
@ -1242,7 +1243,8 @@
"icon": "./assets/tagRenderings/5euro.svg",
"then": {
"en": "5 euro notes are accepted",
"nl": "Biljetten van 5 euro worden geaccepteerd"
"nl": "Biljetten van 5 euro worden geaccepteerd",
"de": "5-Euro-Scheine werden angenommen"
}
},
{
@ -1250,7 +1252,8 @@
"icon": "./assets/tagRenderings/10euro.svg",
"then": {
"en": "10 euro notes are accepted",
"nl": "Biljetten van 10 euro worden geaccepteerd"
"nl": "Biljetten van 10 euro worden geaccepteerd",
"de": "10-Euro-Scheine werden angenommen"
}
},
{
@ -1258,7 +1261,8 @@
"icon": "./assets/tagRenderings/20euro.svg",
"then": {
"en": "20 euro notes are accepted",
"nl": "Biljetten van 20 euro worden geaccepteerd"
"nl": "Biljetten van 20 euro worden geaccepteerd",
"de": "20-Euro-Scheine werden angenommen"
}
},
{
@ -1266,7 +1270,8 @@
"icon": "./assets/tagRenderings/50euro.svg",
"then": {
"en": "50 euro notes are accepted",
"nl": "Biljetten van 50 euro worden geaccepteerd"
"nl": "Biljetten van 50 euro worden geaccepteerd",
"de": "50-Euro-Scheine werden angenommen"
}
},
{
@ -1274,7 +1279,8 @@
"icon": "./assets/tagRenderings/100euro.svg",
"then": {
"en": "100 euro notes are accepted",
"nl": "Biljetten van 100 euro worden geaccepteerd"
"nl": "Biljetten van 100 euro worden geaccepteerd",
"de": "100-Euro-Scheine werden angenommen"
}
},
{
@ -1282,7 +1288,8 @@
"icon": "./assets/tagRenderings/200euro.svg",
"then": {
"en": "200 euro notes are accepted",
"nl": "Biljetten van 200 euro worden geaccepteerd"
"nl": "Biljetten van 200 euro worden geaccepteerd",
"de": "200-Euro-Scheine werden angenommen"
}
},
{
@ -1290,7 +1297,8 @@
"icon": "./assets/tagRenderings/500euro.svg",
"then": {
"en": "500 euro notes are accepted",
"nl": "Biljetten van 500 euro worden geaccepteerd"
"nl": "Biljetten van 500 euro worden geaccepteerd",
"de": "500-Euro-Scheine werden angenommen"
}
}
]

View file

@ -8,7 +8,7 @@
*/
/*
! tailwindcss v3.1.8 | MIT License | https://tailwindcss.com
! tailwindcss v3.2.4 | MIT License | https://tailwindcss.com
*/
/*
@ -39,6 +39,7 @@
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
*/
html {
@ -51,6 +52,9 @@ html {
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
-webkit-font-feature-settings: normal;
font-feature-settings: normal;
/* 5 */
}
/*
@ -417,6 +421,12 @@ video {
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
@ -592,6 +602,18 @@ video {
}
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.pointer-events-none {
pointer-events: none;
}
@ -608,6 +630,10 @@ video {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
.static {
position: static;
}
@ -624,10 +650,6 @@ video {
position: relative;
}
.\!relative {
position: relative !important;
}
.sticky {
position: -webkit-sticky;
position: sticky;
@ -997,10 +1019,6 @@ video {
height: 3rem;
}
.h-6 {
height: 1.5rem;
}
.h-4 {
height: 1rem;
}
@ -1017,6 +1035,10 @@ video {
height: 2.75rem;
}
.h-6 {
height: 1.5rem;
}
.h-96 {
height: 24rem;
}
@ -1132,10 +1154,6 @@ video {
flex: none;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-shrink-0 {
flex-shrink: 0;
}
@ -1512,11 +1530,6 @@ video {
padding: 0.125rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-0 {
padding-left: 0px;
padding-right: 0px;
@ -1721,13 +1734,11 @@ video {
}
.underline {
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
text-decoration-line: underline;
}
.line-through {
-webkit-text-decoration-line: line-through;
text-decoration-line: line-through;
text-decoration-line: line-through;
}
.opacity-50 {
@ -1791,17 +1802,15 @@ video {
}
.transition {
transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-transform, -webkit-filter, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-colors {
transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@ -1836,14 +1845,6 @@ video {
color: var(--unsubtle-detail-color-contrast);
}
.\[out\:json\] {
out: json;
}
.\[timeout\:90\] {
timeout: 90;
}
.\[key\:string\] {
key: string;
}
@ -1908,7 +1909,7 @@ body {
}
.leaflet-control-attribution {
display: block ruby;
display: flex;
}
.badge {

View file

@ -118,7 +118,7 @@ body {
}
.leaflet-control-attribution {
display: block ruby;
display: flex;
}
.badge {

View file

@ -133,6 +133,7 @@
"josmOpened": "JOSM is opened",
"mapContributionsBy": "The current visible data has edits made by {contributors}",
"mapContributionsByAndHidden": "The current visible data has edits made by {contributors} and {hiddenCount} more contributors",
"mapDataByOsm": "Map data: OpenStreetMap",
"mapillaryHelp": "<b>Mapillary</b> is an online service which gathers street-level pictures and offers them under a free license. Contributors are allowed to use these pictures to improve OpenStreetMap",
"openIssueTracker": "File a bug",
"openMapillary": "Open Mapillary here",

View file

@ -297,4 +297,4 @@
"question": "Wie lautet der zugehörige Wikipedia Artikel?"
}
}
}
}

View file

@ -878,33 +878,6 @@
"onwheels": {
"description": "Auf dieser Karte können Sie öffentlich zugängliche Orte für Rollstuhlfahrer ansehen, bearbeiten oder hinzufügen",
"layers": {
"19": {
"override": {
"=title": {
"render": "Statistik"
}
}
},
"20": {
"override": {
"+tagRenderings": {
"0": {
"render": {
"special": {
"text": "Import"
}
}
},
"1": {
"render": {
"special": {
"message": "Alle vorgeschlagenen Tags hinzufügen"
}
}
}
}
}
},
"4": {
"override": {
"filter": {
@ -947,6 +920,33 @@
"override": {
"name": "Barrierefreie Parkplätze"
}
},
"19": {
"override": {
"=title": {
"render": "Statistik"
}
}
},
"20": {
"override": {
"+tagRenderings": {
"0": {
"render": {
"special": {
"text": "Import"
}
}
},
"1": {
"render": {
"special": {
"message": "Alle vorgeschlagenen Tags hinzufügen"
}
}
}
}
}
}
},
"title": "Auf Rädern"
@ -1107,6 +1107,10 @@
"stations": {
"description": "Bahnhofsdetails ansehen, bearbeiten und hinzufügen",
"layers": {
"3": {
"description": "Ebene mit Bahnhöfen",
"name": "Bahnhöfe"
},
"15": {
"description": "Anzeigen der Züge, die von diesem Bahnhof abfahren",
"name": "Abfahrtstafeln",
@ -1138,10 +1142,6 @@
"title": {
"render": "Abfahrtstafel"
}
},
"3": {
"description": "Ebene mit Bahnhöfen",
"name": "Bahnhöfe"
}
},
"title": "Bahnhöfe"
@ -1233,4 +1233,4 @@
"shortDescription": "Eine Karte mit Abfalleimern",
"title": "Abfalleimer"
}
}
}