Add license clarifications, further work on the notes theme

This commit is contained in:
Pieter Vander Vennet 2022-01-08 17:44:23 +01:00
parent b15eaff55e
commit 3277b83c5f
6 changed files with 47 additions and 13 deletions

View file

@ -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
}
}

View file

@ -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")

View file

@ -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()
})

View file

@ -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)
}
}