Add license clarifications, further work on the notes theme

UI/BigComponents/LicensePicker.ts

@@ -2,19 +2,34 @@ import {DropDown} from "../Input/DropDown";
 import Translations from "../i18n/Translations";
 import {UIEventSource} from "../../Logic/UIEventSource";
 import {OsmConnection} from "../../Logic/Osm/OsmConnection";
+import {Translation} from "../i18n/Translation";
 
 export default class LicensePicker extends DropDown<string> {
 
+    private static readonly cc0 = "CC0"
+    private static readonly ccbysa = "CC-BY-SA 4.0"
+    private static readonly ccby = "CC-BY 4.0"
+
     constructor(state: {osmConnection: OsmConnection}) {
         super(Translations.t.image.willBePublished.Clone(),
             [
-                {value: "CC0", shown: Translations.t.image.cco.Clone()},
-                {value: "CC-BY-SA 4.0", shown: Translations.t.image.ccbs.Clone()},
-                {value: "CC-BY 4.0", shown: Translations.t.image.ccb.Clone()}
+                {value:LicensePicker. cc0, shown: Translations.t.image.cco.Clone()},
+                {value:LicensePicker.  ccbysa, shown: Translations.t.image.ccbs.Clone()},
+                {value: LicensePicker. ccby, shown: Translations.t.image.ccb.Clone()}
             ],
             state?.osmConnection?.GetPreference("pictures-license") ?? new UIEventSource<string>("CC0")
         )
         this.SetClass("flex flex-col sm:flex-row").SetStyle("float:left");
     }
 
+    public static LicenseExplanations() : Map<string, Translation>{
+        let dict = new Map<string, Translation>();
+        
+        dict.set(LicensePicker. cc0, Translations.t.image.ccoExplanation)
+        dict.set(LicensePicker. ccby, Translations.t.image.ccbExplanation)
+        dict.set(LicensePicker. ccbysa, Translations.t.image.ccbsExplanation)
+
+        return dict
+    }
+    
 }

UI/Image/ImageUploadFlow.ts

@@ -61,6 +61,8 @@ export class ImageUploadFlow extends Toggle {
         })
 
         const licensePicker = new LicensePicker(state)
+        const explanations = LicensePicker.LicenseExplanations()
+        const chosenLicense = new VariableUiElement(licensePicker.GetValue().map(license => explanations.get(license)))
 
         const t = Translations.t.image;
 
@@ -150,7 +152,8 @@ export class ImageUploadFlow extends Toggle {
 
             fileSelector,
             Translations.t.image.respectPrivacy.Clone().SetStyle("font-size:small;"),
-            licensePicker
+            licensePicker,
+            chosenLicense.SetClass("subtle text-sm")
         ]).SetClass("flex flex-col image-upload-flow mt-4 mb-8 text-center")
 
 

UI/Popup/LoginButton.ts

@@ -9,7 +9,7 @@ export default class LoginButton extends SubtleButton {
     constructor(text: BaseUIElement | string, state: {
         osmConnection: OsmConnection
     }) {
-        super(Svg.osm_logo_svg(), text);
+        super(Svg.osm_logo_ui(), text);
         this.onClick(() => {
             state.osmConnection.AttemptLogin()
         })

UI/SpecialVisualizations.ts

@@ -829,8 +829,8 @@ export default class SpecialVisualizations {
 
                         const label = new Combine([
                             Svg.camera_plus_ui().SetClass("block w-12 h-12 p-1 text-4xl "),
-                            "Add image to node. Your image will be published in the public domain."
-                        ]).SetClass("p-2 border-4 border-black rounded-full font-bold h-full align-middle w-full flex justify-center")
+                            Translations.t.image.addPicture
+                        ]).SetClass("p-2 border-4 border-black rounded-full font-bold h-full align-center w-full flex justify-center")
 
                         const fileSelector = new FileSelectorButton(label)
                         fileSelector.GetValue().addCallback(filelist => {
@@ -838,9 +838,17 @@ export default class SpecialVisualizations {
                             uploader.uploadMany("Image for osm.org/note/" + id, "CC0", filelist)
                             
                         })
+                        const ti = Translations.t.image
+                        const uploadPanel = new Combine([
+                            fileSelector,
+                            new Combine([ti.willBePublished, ti.cco]),
+                            ti.ccoExplanation.SetClass("subtle text-sm"),
+                            ti.respectPrivacy.SetClass("text-sm")
+                        ]).SetClass("flex flex-col")
                         return new LoginToggle( new Toggle( 
                             Translations.t.image.uploadingPicture.SetClass("alert"),
-                            fileSelector, isUploading), t.loginToAddPicture, state)
+                            uploadPanel,
+                            isUploading), t.loginToAddPicture, state)
                     }
 
                 }

assets/themes/notes/notes.json

@@ -66,11 +66,17 @@
           "render": "{add_note_comment()}"
         },
         {
-          "id": "Spam",
+          "id": "report-contributor",
           "render": {
             "en": "<a href='https://www.openstreetmap.org/reports/new?reportable_id={_first_user_id}&reportable_type=User' target='_blank' class='subtle'>Report {_first_user} as spam</a>"
           },
           "condition": "_opened_by_anonymous_user=false"
+        },
+        {
+          "id": "report-note",
+          "render": {
+            "en": "<a href='https://www.openstreetmap.org/reports/new?reportable_id={id}&reportable_type=Note' target='_blank'>Report this note as spam or inappropriate</a>"
+          }
         }
       ],
       "mapRendering": [

langs/en.json

@@ -4,10 +4,13 @@
     "uploadingPicture": "Uploading your picture…",
     "uploadingMultiple": "Uploading {count} pictures…",
     "pleaseLogin": "Please log in to add a picture",
-    "willBePublished": "Your picture will be published: ",
+    "willBePublished": "Your picture will be published ",
     "cco": "in the public domain",
     "ccbs": "under the CC-BY-SA-license",
     "ccb": "under the CC-BY-license",
+    "ccoExplanation": "Adding a picture in the public domain implies that anyone can do anything with your picture",
+    "ccbsExplanation": "The CC-BY-SA license implies that anyone may use your picture for any purpose, but they have to attribute you and remixes of the picture have to be republished under the same license",
+    "ccbExplanation": "The CC-BY license implies that anyone may use your picture for any purpose, but they have to attribute you",
     "uploadFailed": "Could not upload your picture. Are you connected to the Internet, and allow third party API's? The Brave browser or the uMatrix plugin might block them.",
     "respectPrivacy": "Do not photograph people nor license plates. Do not upload Google Maps, Google Streetview or other copyrighted sources.",
     "uploadDone": "Your picture has been added. Thanks for helping out!",
@@ -115,7 +118,6 @@
         "importTags": "The element will receive {tags}",
         "zoomInMore": "Zoom in more to import this feature",
         "wrongType": "This element is not a point or a way and can not be imported"
-        
       }
     },
     "pickLanguage": "Choose a language: ",
@@ -428,12 +430,12 @@
     "addCommentPlaceholder": "Add a comment...",
     "addComment": "Add comment",
     "addCommentAndClose": "Add comment and close",
-    "closeNote":       "Close note",
+    "closeNote": "Close note",
     "reopenNote": "Reopen note",
     "reopenNoteAndComment": "Reopen note and comment",
     "anonymous": "Anonymous user",
     "loginToAddComment": "Login to add a comment",
     "loginToAddPicture": "Login to add a picture",
-    "loginToClose": "Login to close this note"
+    "loginToClose": "Login to close this note",
   }
 }