midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Styling tweaks, better metadata handling at data upload

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-19 18:28:30 +02:00
parent 87bf376b2e
commit bf7e6376c0
5 changed files with 108 additions and 85 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/SubtleButton.ts
View file

@ -25,7 +25,7 @@ export class SubtleButton extends UIElement {
if ((imageUrl ?? "") === "") {
img = undefined;
} else if (typeof (imageUrl) === "string") {
img = new Img(imageUrl).SetClass("w-full")
img = new Img(imageUrl)
} else {
img = imageUrl;
}

3
UI/BigComponents/SimpleAddUI.ts
View file

@ -159,8 +159,7 @@ export default class SimpleAddUI extends Toggle {
return new Toggle(
Translations.t.general.presetInfo.Subs({
tags: preset.tags.map(t => t.asHumanString(optionallyLinkToWiki && csCount > Constants.userJourney.tagsVisibleAndWikiLinked, true)).join("&"),
}),
}).SetStyle("word-break: break-all"),
undefined,
State.state.osmConnection.userDetails.map(userdetails => userdetails.csCount >= Constants.userJourney.tagsVisibleAt)

14
UI/Input/Checkboxes.ts
View file

@ -44,7 +44,7 @@ export default class CheckBoxes extends InputElement<number[]> {
input.id = "checkbox" + id
input.type = "checkbox"
input.classList.add("p-1","cursor-pointer","ml-3","pl-3")
input.classList.add("p-1","cursor-pointer","m-3","pl-3","mr-0")
const label = document.createElement("label")
label.htmlFor = input.id
@ -52,7 +52,7 @@ export default class CheckBoxes extends InputElement<number[]> {
label.classList.add("block","w-full","p-2","cursor-pointer","bg-red")
const wrapper = document.createElement("span")
wrapper.classList.add("flex","w-full","border", "border-gray-400")
wrapper.classList.add("flex","w-full","border", "border-gray-400","m-1")
wrapper.appendChild(input)
wrapper.appendChild(label)
el.appendChild(wrapper)
@ -64,6 +64,16 @@ export default class CheckBoxes extends InputElement<number[]> {
if (selectedValues.indexOf(i) >= 0) {
input.checked = true;
}
if(input.checked){
wrapper.classList.remove("border-gray-400")
wrapper.classList.add("border-black")
}else{
wrapper.classList.add("border-gray-400")
wrapper.classList.remove("border-black")
}
})
input.onchange = () => {

40
UI/Input/RadioButton.ts
View file

@ -70,18 +70,7 @@ export class RadioButton<T> extends InputElement<T> {
const form = document.createElement("form")
const inputs = []
value.addCallbackAndRun(
selected => {
let somethingChecked = false;
for (let i = 0; i < inputs.length; i++){
let input = inputs[i];
input.checked = !somethingChecked && elements[i].IsValid(selected);
somethingChecked = somethingChecked || input.checked
}
}
)
const wrappers: HTMLElement[] = []
for (let i1 = 0; i1 < elements.length; i1++) {
let element = elements[i1];
@ -94,7 +83,7 @@ export class RadioButton<T> extends InputElement<T> {
input.id = "radio" + groupId + "-" + i1;
input.name = groupId;
input.type = "radio"
input.classList.add("p-1","cursor-pointer","ml-2","pl-2","pr-0","m-0","ml-3")
input.classList.add("p-1","cursor-pointer","ml-2","pl-2","pr-0","m-3","mr-0")
input.onchange = () => {
if(input.checked){
@ -114,12 +103,35 @@ export class RadioButton<T> extends InputElement<T> {
const block = document.createElement("div")
block.appendChild(input)
block.appendChild(label)
block.classList.add("flex","w-full","border", "rounded-full", "border-gray-400")
block.classList.add("flex","w-full","border", "rounded-full", "border-gray-400","m-1")
wrappers.push(block)
form.appendChild(block)
}
value.addCallbackAndRun(
selected => {
let somethingChecked = false;
for (let i = 0; i < inputs.length; i++){
let input = inputs[i];
input.checked = !somethingChecked && elements[i].IsValid(selected);
somethingChecked = somethingChecked || input.checked
if(input.checked){
wrappers[i].classList.remove("border-gray-400")
wrappers[i].classList.add("border-black")
}else{
wrappers[i].classList.add("border-gray-400")
wrappers[i].classList.remove("border-black")
}
}
}
)
this.SetClass("flex flex-col")
return form;
}