Robin-van-der-Linde/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Small refactoring: use checkbox for sharescreen instead of toggles

Browse source
This commit is contained in:
pietervdvn 2022-03-31 03:30:20 +02:00
parent 68c3585d72
commit 592bc4ae0b
2 changed files with 26 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
UI/BigComponents/ShareScreen.ts
View file

@ -12,6 +12,8 @@ import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
import Loc from "../../Models/Loc"; import Loc from "../../Models/Loc";
import BaseLayer from "../../Models/BaseLayer"; import BaseLayer from "../../Models/BaseLayer";
import FilteredLayer from "../../Models/FilteredLayer"; import FilteredLayer from "../../Models/FilteredLayer";
import {InputElement} from "../Input/InputElement";
import CheckBoxes, {CheckBox} from "../Input/Checkboxes";
export default class ShareScreen extends Combine { export default class ShareScreen extends Combine {
@ -19,7 +21,7 @@ export default class ShareScreen extends Combine {
const layout = state?.layoutToUse; const layout = state?.layoutToUse;
const tr = Translations.t.general.sharescreen; const tr = Translations.t.general.sharescreen;
const optionCheckboxes: BaseUIElement[] = [] const optionCheckboxes: InputElement<boolean>[] = []
const optionParts: (UIEventSource<string>)[] = []; const optionParts: (UIEventSource<string>)[] = [];
function check() { function check() {
@ -30,16 +32,12 @@ export default class ShareScreen extends Combine {
return Svg.no_checkmark_svg().SetStyle("width: 1.5em; display: inline-block;"); return Svg.no_checkmark_svg().SetStyle("width: 1.5em; display: inline-block;");
} }
const includeLocation = new Toggle( const includeLocation = new CheckBox(tr.fsIncludeCurrentLocation, true)
new Combine([check(), tr.fsIncludeCurrentLocation.Clone()]),
new Combine([nocheck(), tr.fsIncludeCurrentLocation.Clone()]),
new UIEventSource<boolean>(true)
).ToggleOnClick()
optionCheckboxes.push(includeLocation); optionCheckboxes.push(includeLocation);
const currentLocation = state.locationControl; const currentLocation = state.locationControl;
optionParts.push(includeLocation.isEnabled.map((includeL) => { optionParts.push(includeLocation.GetValue().map((includeL) => {
if (currentLocation === undefined) { if (currentLocation === undefined) {
return null; return null;
} }
@ -66,13 +64,9 @@ export default class ShareScreen extends Combine {
const currentBackground = new VariableUiElement(currentLayer.map(layer => { const currentBackground = new VariableUiElement(currentLayer.map(layer => {
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""}); return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""});
})); }));
const includeCurrentBackground = new Toggle( const includeCurrentBackground = new CheckBox(currentBackground, true)
new Combine([check(), currentBackground]),
new Combine([nocheck(), currentBackground]),
new UIEventSource<boolean>(true)
).ToggleOnClick()
optionCheckboxes.push(includeCurrentBackground); optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => { optionParts.push(includeCurrentBackground.GetValue().map((includeBG) => {
if (includeBG) { if (includeBG) {
return "background=" + currentLayer.data.id return "background=" + currentLayer.data.id
} else { } else {
@ -81,14 +75,10 @@ export default class ShareScreen extends Combine {
}, [currentLayer])); }, [currentLayer]));
const includeLayerChoices = new Toggle( const includeLayerChoices = new CheckBox(tr.fsIncludeCurrentLayers, true)
new Combine([check(), tr.fsIncludeCurrentLayers.Clone()]),
new Combine([nocheck(), tr.fsIncludeCurrentLayers.Clone()]),
new UIEventSource<boolean>(true)
).ToggleOnClick()
optionCheckboxes.push(includeLayerChoices); optionCheckboxes.push(includeLayerChoices);
optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => { optionParts.push(includeLayerChoices.GetValue().map((includeLayerSelection) => {
if (includeLayerSelection) { if (includeLayerSelection) {
return Utils.NoNull(state.filteredLayers.data.map(fLayerToParam)).join("&") return Utils.NoNull(state.filteredLayers.data.map(fLayerToParam)).join("&")
} else { } else {
@ -110,13 +100,9 @@ export default class ShareScreen extends Combine {
for (const swtch of switches) { for (const swtch of switches) {
const checkbox = new Toggle( const checkbox =new CheckBox(Translations.W(swtch.human), !swtch.reverse)
new Combine([check(), Translations.W(swtch.human.Clone())]),
new Combine([nocheck(), Translations.W(swtch.human.Clone())]),
new UIEventSource<boolean>(!swtch.reverse)
).ToggleOnClick();
optionCheckboxes.push(checkbox); optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => { optionParts.push(checkbox.GetValue().map((isEn) => {
if (isEn) { if (isEn) {
if (swtch.reverse) { if (swtch.reverse) {
return `${swtch.urlName}=true` return `${swtch.urlName}=true`

15
UI/Input/Checkboxes.ts
View file

@ -2,6 +2,21 @@ import {InputElement} from "./InputElement";
import {UIEventSource} from "../../Logic/UIEventSource"; import {UIEventSource} from "../../Logic/UIEventSource";
import {Utils} from "../../Utils"; import {Utils} from "../../Utils";
import BaseUIElement from "../BaseUIElement"; import BaseUIElement from "../BaseUIElement";
import InputElementMap from "./InputElementMap";
export class CheckBox extends InputElementMap<number[], boolean> {
constructor(el: BaseUIElement , defaultValue?: boolean) {
super(
new CheckBoxes([el]),
(x0, x1) => x0 === x1,
t => t.length > 0,
x => x ? [0] : []
);
if(defaultValue !== undefined){
this.GetValue().setData(defaultValue)
}
}
}
/** /**
* Supports multi-input * Supports multi-input