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

Add binoculars theme, auto reformat everything

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-09-09 00:05:51 +02:00
parent 38dea806c5
commit 78d6482c88
586 changed files with 115573 additions and 111842 deletions
Download patch file Download diff file Expand all files Collapse all files

6
UI/BigComponents/AddNewMarker.ts
View file

@ -27,7 +27,7 @@ export default class AddNewMarker extends Combine {
}
}
}
if(icons.length === 1){
if (icons.length === 1) {
return icons[0]
}
icons.push(last)
@ -46,9 +46,9 @@ export default class AddNewMarker extends Combine {
.SetClass("absolute p-1 rounded-full overflow-hidden"),
Svg.addSmall_svg().SetClass("absolute animate-pulse").SetStyle("width: 30px; left: 30px; top: 35px;")
]).SetClass("absolute"),
new Combine([label]).SetStyle("position: absolute; left: 50%")
new Combine([label]).SetStyle("position: absolute; left: 50%")
])
this.SetClass("block relative");
this.SetClass("block relative");
}
}

2
UI/BigComponents/AllDownloads.ts
View file

@ -9,8 +9,6 @@ import {DownloadPanel} from "./DownloadPanel";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import ExportPDF from "../ExportPDF";
import {Browser} from "leaflet";
import ie = Browser.ie;
import {FixedUiElement} from "../Base/FixedUiElement";
export default class AllDownloads extends ScrollableFullScreen {

9
UI/BigComponents/Attribution.ts
View file

@ -18,26 +18,25 @@ export default class Attribution extends Combine {
userDetails: UIEventSource<UserDetails>,
layoutToUse: UIEventSource<LayoutConfig>,
leafletMap: UIEventSource<L.Map>) {
const mapComplete = new Link(`Mapcomplete ${Constants.vNumber}`, 'https://github.com/pietervdvn/MapComplete', true);
const reportBug = new Link(Svg.bug_ui().SetClass("small-image"), "https://github.com/pietervdvn/MapComplete/issues", true);
const layoutId = layoutToUse?.data?.id;
const now = new Date()
// Note: getMonth is zero-index, we want 1-index but with one substracted, so it checks out!
const startDate = now.getFullYear()+"-"+now.getMonth()+"-"+now.getDate()
const startDate = now.getFullYear() + "-" + now.getMonth() + "-" + now.getDate()
const osmChaLink = `https://osmcha.org/?filters=%7B%22comment%22%3A%5B%7B%22label%22%3A%22%23${layoutId}%22%2C%22value%22%3A%22%23${layoutId}%22%7D%5D%2C%22date__gte%22%3A%5B%7B%22label%22%3A%22${startDate}%22%2C%22value%22%3A%222020-07-05%22%7D%5D%2C%22editor%22%3A%5B%7B%22label%22%3A%22MapComplete%22%2C%22value%22%3A%22MapComplete%22%7D%5D%7D`
const stats = new Link(Svg.statistics_ui().SetClass("small-image"), osmChaLink, true)
const idLink = location.map(location => `https://www.openstreetmap.org/edit?editor=id#map=${location?.zoom ?? 0}/${location?.lat ?? 0}/${location?.lon ?? 0}`)
const idLink = location.map(location => `https://www.openstreetmap.org/edit?editor=id#map=${location?.zoom ?? 0}/${location?.lat ?? 0}/${location?.lon ?? 0}`)
const editHere = new Link(Svg.pencil_ui().SetClass("small-image"), idLink, true)
const mapillaryLink = location.map(location => `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`)
const mapillary = new Link(Svg.mapillary_black_ui().SetClass("small-image"), mapillaryLink, true);
let editWithJosm = new VariableUiElement(
userDetails.map(userDetails => {
@ -45,7 +44,7 @@ export default class Attribution extends Combine {
return undefined;
}
const bounds: any = leafletMap?.data?.getBounds();
if(bounds === undefined){
if (bounds === undefined) {
return undefined
}
const top = bounds.getNorth();

2
UI/BigComponents/AttributionPanel.ts
View file

@ -121,7 +121,7 @@ export default class AttributionPanel extends Combine {
})
]
).SetClass("block m-2")
]).SetClass("flex flex-col").SetStyle("width: calc(100% - 50px - 0.5em); min-width: 12rem;")
]).SetClass("flex flex-wrap border-b border-gray-300 m-2 border-box")
}

2
UI/BigComponents/BackgroundSelector.ts
View file

@ -10,7 +10,7 @@ export default class BackgroundSelector extends VariableUiElement {
const available = State.state.availableBackgroundLayers.map(available => {
const baseLayers: { value: BaseLayer, shown: string }[] = [];
for (const i in available) {
if(!available.hasOwnProperty(i)){
if (!available.hasOwnProperty(i)) {
continue;
}
const layer: BaseLayer = available[i];

12
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -21,14 +21,14 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
constructor(isShown: UIEventSource<boolean>) {
const layoutToUse = State.state.layoutToUse.data;
super (
super(
() => layoutToUse.title.Clone(),
() => FullWelcomePaneWithTabs.GenerateContents(layoutToUse, State.state.osmConnection.userDetails, isShown),
"welcome" ,isShown
"welcome", isShown
)
}
private static ConstructBaseTabs(layoutToUse: LayoutConfig, isShown: UIEventSource<boolean>): { header: string | BaseUIElement; content: BaseUIElement }[]{
private static ConstructBaseTabs(layoutToUse: LayoutConfig, isShown: UIEventSource<boolean>): { header: string | BaseUIElement; content: BaseUIElement }[] {
let welcome: BaseUIElement = new ThemeIntroductionPanel(isShown);
if (layoutToUse.id === personal.id) {
@ -70,8 +70,8 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
);
return new Toggle(
new TabbedComponent(tabsWithAboutMc, State.state.welcomeMessageOpenedTab),
new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab),
new TabbedComponent(tabsWithAboutMc, State.state.welcomeMessageOpenedTab),
new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab),
userDetails.map((userdetails: UserDetails) =>
userdetails.loggedIn &&
userdetails.csCount >= Constants.userJourney.mapCompleteHelpUnlock)

6
UI/BigComponents/Histogram.ts
View file

@ -40,7 +40,7 @@ export default class Histogram<T> extends VariableUiElement {
const keys = Array.from(counts.keys());
keys.sort()
const max = Math.max(...Array.from(counts.values()))
const fallbackColor = (keyValue: string) => {
@ -50,7 +50,7 @@ export default class Histogram<T> extends VariableUiElement {
let actualAssignColor = undefined;
if (assignColor === undefined) {
actualAssignColor = fallbackColor;
}else{
} else {
actualAssignColor = (keyValue: string) => {
return assignColor(keyValue) ?? fallbackColor(keyValue)
}
@ -61,7 +61,7 @@ export default class Histogram<T> extends VariableUiElement {
keys.map(key => [
key,
new Combine([
new Combine([new FixedUiElement("" + counts.get(key)).SetClass("font-bold rounded-full block")])
new Combine([new FixedUiElement("" + counts.get(key)).SetClass("font-bold rounded-full block")])
.SetClass("flex justify-center rounded border border-black")
.SetStyle(`background: ${actualAssignColor(key)}; width: ${100 * counts.get(key) / max}%`)
]).SetClass("block w-full")

6
UI/BigComponents/LeftControls.ts
View file

@ -24,7 +24,7 @@ export default class LeftControls extends Combine {
),
undefined
);
const copyrightButton = new Toggle(
toggledCopyright,
new MapControlButton(Svg.copyright_svg())
@ -61,7 +61,7 @@ export default class LeftControls extends Combine {
State.state.filterIsOpened
),
new MapControlButton(Svg.filter_svg())
.onClick(() => State.state.filterIsOpened.setData(true)),
.onClick(() => State.state.filterIsOpened.setData(true)),
State.state.filterIsOpened
)
@ -87,7 +87,7 @@ export default class LeftControls extends Combine {
super([filterButton,
downloadButtonn,
copyrightButton])
this.SetClass("flex flex-col")
}

8
UI/BigComponents/LicensePicker.ts
View file

@ -3,8 +3,8 @@ import Translations from "../i18n/Translations";
import State from "../../State";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class LicensePicker extends DropDown<string>{
export default class LicensePicker extends DropDown<string> {
constructor() {
super(Translations.t.image.willBePublished.Clone(),
[
@ -14,7 +14,7 @@ export default class LicensePicker extends DropDown<string>{
],
State.state?.osmConnection?.GetPreference("pictures-license") ?? new UIEventSource<string>("CC0")
)
this.SetClass("flex flex-col sm:flex-row").SetStyle("float:left");
this.SetClass("flex flex-col sm:flex-row").SetStyle("float:left");
}
}

26
UI/BigComponents/MoreScreen.ts
View file

@ -30,22 +30,22 @@ export default class MoreScreen extends Combine {
.SetClass("absolute top-2 right-3"),
new IndexText()
]);
themeButtonStyle = "h-32 min-h-32 max-h-32 overflow-ellipsis overflow-hidden"
themeListStyle = "md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-g4 gap-4"
}
return[
return [
intro,
MoreScreen.createOfficialThemesList(state, themeButtonStyle).SetClass(themeListStyle),
MoreScreen.createUnofficialThemeList(themeButtonStyle)?.SetClass(themeListStyle),
tr.streetcomplete.Clone().SetClass("block text-base mx-10 my-3 mb-10")
];
}
private static createUnofficialThemeList(buttonClass: string): BaseUIElement{
private static createUnofficialThemeList(buttonClass: string): BaseUIElement {
return new VariableUiElement(State.state.installedThemes.map(customThemes => {
const els : BaseUIElement[] = []
const els: BaseUIElement[] = []
if (customThemes.length > 0) {
els.push(Translations.t.general.customThemeIntro.Clone())
@ -62,18 +62,18 @@ export default class MoreScreen extends Combine {
let officialThemes = AllKnownLayouts.layoutsList
let buttons = officialThemes.map((layout) => {
if(layout === undefined){
if (layout === undefined) {
console.trace("Layout is undefined")
return undefined
}
const button = MoreScreen.createLinkButton(layout)?.SetClass(buttonClass);
if(layout.id === personal.id){
if (layout.id === personal.id) {
return new VariableUiElement(
State.state.osmConnection.userDetails.map(userdetails => userdetails.csCount)
.map(csCount => {
if(csCount < Constants.userJourney.personalLayoutUnlock){
if (csCount < Constants.userJourney.personalLayoutUnlock) {
return undefined
}else{
} else {
return button
}
})
@ -131,7 +131,7 @@ export default class MoreScreen extends Combine {
}
const currentLocation = State.state.locationControl;
let path = window.location.pathname;
// Path starts with a '/' and contains everything, e.g. '/dir/dir/page.html'
path = path.substr(0, path.lastIndexOf("/"));
@ -155,15 +155,13 @@ export default class MoreScreen extends Combine {
const params = [
["z", currentLocation?.zoom],
["lat", currentLocation?.lat],
["lon",currentLocation?.lon]
["lon", currentLocation?.lon]
].filter(part => part[1] !== undefined)
.map(part => part[0]+"="+part[1])
.map(part => part[0] + "=" + part[1])
.join("&")
return `${linkPrefix}${params}${linkSuffix}`;
})
let description = Translations.WT(layout.shortDescription).Clone();
return new SubtleButton(layout.icon,

9
UI/BigComponents/PersonalLayersPanel.ts
View file

@ -7,7 +7,6 @@ import {SubtleButton} from "../Base/SubtleButton";
import Translations from "../i18n/Translations";
import BaseUIElement from "../BaseUIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
import Img from "../Base/Img";
import {UIEventSource} from "../../Logic/UIEventSource";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
@ -62,18 +61,18 @@ export default class PersonalLayersPanel extends VariableUiElement {
* @private
*/
private static CreateLayerToggle(layer: LayerConfig): Toggle {
let icon :BaseUIElement =new Combine([ layer.GenerateLeafletStyle(
let icon: BaseUIElement = new Combine([layer.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
false
).icon.html]).SetClass("relative")
let iconUnset =new Combine([ layer.GenerateLeafletStyle(
let iconUnset = new Combine([layer.GenerateLeafletStyle(
new UIEventSource<any>({id: "node/-1"}),
false
).icon.html]).SetClass("relative")
iconUnset.SetStyle("opacity:0.1")
let name = layer.name ;
let name = layer.name;
if (name === undefined) {
return undefined;
}
@ -90,7 +89,7 @@ export default class PersonalLayersPanel extends VariableUiElement {
return new Toggle(
new SubtleButton(
icon,
content ),
content),
new SubtleButton(
iconUnset,
contentUnselected

133
UI/BigComponents/SearchAndGo.ts
View file

@ -1,83 +1,82 @@
import Locale from "../i18n/Locale";
import { UIEventSource } from "../../Logic/UIEventSource";
import { Translation } from "../i18n/Translation";
import { VariableUiElement } from "../Base/VariableUIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import {Translation} from "../i18n/Translation";
import {VariableUiElement} from "../Base/VariableUIElement";
import Svg from "../../Svg";
import State from "../../State";
import { TextField } from "../Input/TextField";
import { Geocoding } from "../../Logic/Osm/Geocoding";
import {TextField} from "../Input/TextField";
import {Geocoding} from "../../Logic/Osm/Geocoding";
import Translations from "../i18n/Translations";
import Hash from "../../Logic/Web/Hash";
import Combine from "../Base/Combine";
export default class SearchAndGo extends Combine {
constructor() {
const goButton = Svg.search_ui().SetClass(
"w-8 h-8 full-rounded border-black float-right"
);
constructor() {
const goButton = Svg.search_ui().SetClass(
"w-8 h-8 full-rounded border-black float-right"
);
const placeholder = new UIEventSource<Translation>(
Translations.t.general.search.search
);
const searchField = new TextField({
placeholder: new VariableUiElement(placeholder),
value: new UIEventSource<string>(""),
inputStyle:
" background: transparent;\n" +
" border: none;\n" +
" font-size: large;\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" box-sizing: border-box;\n" +
" color: var(--foreground-color);",
});
const placeholder = new UIEventSource<Translation>(
Translations.t.general.search.search
);
const searchField = new TextField({
placeholder: new VariableUiElement(placeholder),
value: new UIEventSource<string>(""),
inputStyle:
" background: transparent;\n" +
" border: none;\n" +
" font-size: large;\n" +
" width: 100%;\n" +
" height: 100%;\n" +
" box-sizing: border-box;\n" +
" color: var(--foreground-color);",
});
searchField.SetClass("relative float-left mt-0 ml-2");
searchField.SetStyle("width: calc(100% - 3em);height: 100%");
searchField.SetClass("relative float-left mt-0 ml-2");
searchField.SetStyle("width: calc(100% - 3em);height: 100%");
super([searchField, goButton]);
super([searchField, goButton]);
this.SetClass("block h-8");
this.SetStyle(
"background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;"
);
this.SetClass("block h-8");
this.SetStyle(
"background: var(--background-color); color: var(--foreground-color); pointer-evetns:all;"
);
// Triggered by 'enter' or onclick
function runSearch() {
const searchString = searchField.GetValue().data;
if (searchString === undefined || searchString === "") {
return;
}
searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.searching);
Geocoding.Search(
searchString,
(result) => {
console.log("Search result", result);
if (result.length == 0) {
placeholder.setData(Translations.t.general.search.nothing);
return;
}
// Triggered by 'enter' or onclick
function runSearch() {
const searchString = searchField.GetValue().data;
if (searchString === undefined || searchString === "") {
return;
}
searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.searching);
Geocoding.Search(
searchString,
(result) => {
console.log("Search result", result);
if (result.length == 0) {
placeholder.setData(Translations.t.general.search.nothing);
return;
}
const poi = result[0];
const bb = poi.boundingbox;
const bounds: [[number, number], [number, number]] = [
[bb[0], bb[2]],
[bb[1], bb[3]],
];
State.state.selectedElement.setData(undefined);
Hash.hash.setData(poi.osm_type + "/" + poi.osm_id);
State.state.leafletMap.data.fitBounds(bounds);
placeholder.setData(Translations.t.general.search.search);
},
() => {
searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.error);
const poi = result[0];
const bb = poi.boundingbox;
const bounds: [[number, number], [number, number]] = [
[bb[0], bb[2]],
[bb[1], bb[3]],
];
State.state.selectedElement.setData(undefined);
Hash.hash.setData(poi.osm_type + "/" + poi.osm_id);
State.state.leafletMap.data.fitBounds(bounds);
placeholder.setData(Translations.t.general.search.search);
},
() => {
searchField.GetValue().setData("");
placeholder.setData(Translations.t.general.search.error);
}
);
}
);
}
searchField.enterPressed.addCallback(runSearch);
goButton.onClick(runSearch);
}
searchField.enterPressed.addCallback(runSearch);
goButton.onClick(runSearch);
}
}

8
UI/BigComponents/ShareButton.ts
View file

@ -1,9 +1,9 @@
import BaseUIElement from "../BaseUIElement";
export default class ShareButton extends BaseUIElement{
export default class ShareButton extends BaseUIElement {
private _embedded: BaseUIElement;
private _shareData: () => { text: string; title: string; url: string };
constructor(embedded: BaseUIElement, generateShareData: () => {
text: string,
title: string,
@ -19,7 +19,7 @@ export default class ShareButton extends BaseUIElement{
const e = document.createElement("button")
e.type = "button"
e.appendChild(this._embedded.ConstructElement())
e.addEventListener('click', () => {
if (navigator.share) {
navigator.share(this._shareData()).then(() => {
@ -32,7 +32,7 @@ export default class ShareButton extends BaseUIElement{
console.log('web share not supported');
}
});
return e;
}

20
UI/BigComponents/ShareScreen.ts
View file

@ -23,7 +23,7 @@ export default class ShareScreen extends Combine {
const optionCheckboxes: BaseUIElement[] = []
const optionParts: (UIEventSource<string>)[] = [];
function check() {
return Svg.checkmark_svg().SetStyle("width: 1.5em; display:inline-block;");
}
@ -48,7 +48,7 @@ export default class ShareScreen extends Combine {
if (includeL) {
return [["z", currentLocation.data?.zoom], ["lat", currentLocation.data?.lat], ["lon", currentLocation.data?.lon]]
.filter(p => p[1] !== undefined)
.map(p => p[0]+"="+p[1])
.map(p => p[0] + "=" + p[1])
.join("&")
} else {
return null;
@ -56,7 +56,7 @@ export default class ShareScreen extends Combine {
}, [currentLocation]));
function fLayerToParam(flayer: {isDisplayed: UIEventSource<boolean>, layerDef: LayerConfig}) {
function fLayerToParam(flayer: { isDisplayed: UIEventSource<boolean>, layerDef: LayerConfig }) {
if (flayer.isDisplayed.data) {
return null; // Being displayed is the default
}
@ -123,12 +123,12 @@ export default class ShareScreen extends Combine {
optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => {
if (isEn) {
if(swtch.reverse){
return `${swtch.urlName}=true`
if (swtch.reverse) {
return `${swtch.urlName}=true`
}
return null;
} else {
if(swtch.reverse){
if (swtch.reverse) {
return null;
}
return `${swtch.urlName}=false`
@ -178,9 +178,7 @@ export default class ShareScreen extends Combine {
);
let editLayout : BaseUIElement= new FixedUiElement("");
let editLayout: BaseUIElement = new FixedUiElement("");
if ((layoutDefinition !== undefined && State.state?.osmConnection !== undefined)) {
editLayout =
new VariableUiElement(
@ -240,11 +238,11 @@ export default class ShareScreen extends Combine {
});
super ([
super([
editLayout,
tr.intro.Clone(),
link,
new VariableUiElement(linkStatus),
new VariableUiElement(linkStatus),
tr.addToHomeScreen.Clone(),
tr.embedIntro.Clone(),
options,

19
UI/BigComponents/SimpleAddUI.ts
View file

@ -82,7 +82,7 @@ export default class SimpleAddUI extends Toggle {
createNewPoint(tags, location, undefined)
} else {
OsmObject.DownloadObject(snapOntoWayId).addCallbackAndRunD(way => {
createNewPoint(tags, location,<OsmWay> way)
createNewPoint(tags, location, <OsmWay>way)
return true;
})
}
@ -188,17 +188,17 @@ export default class SimpleAddUI extends Toggle {
])
)
.onClick(() => State.state.filterIsOpened.setData(true))
const openLayerOrConfirm = new Toggle(
confirmButton,
openLayerControl,
preset.layerToAddTo.isDisplayed
)
const disableFilter = new SubtleButton(
new Combine([
Svg.filter_ui().SetClass("absolute w-full"),
Svg.filter_ui().SetClass("absolute w-full"),
Svg.cross_bottom_right_svg().SetClass("absolute red-svg")
]).SetClass("relative"),
new Combine(
@ -211,7 +211,7 @@ export default class SimpleAddUI extends Toggle {
preset.layerToAddTo.appliedFilters.setData(new And([]))
cancel()
})
const disableFiltersOrConfirm = new Toggle(
openLayerOrConfirm,
disableFilter,
@ -220,9 +220,8 @@ export default class SimpleAddUI extends Toggle {
return filters === undefined || filters.normalize().and.length === 0;
})
)
const tagInfo = SimpleAddUI.CreateTagInfoFor(preset);
const cancelButton = new SubtleButton(Svg.close_ui(),
@ -230,7 +229,7 @@ export default class SimpleAddUI extends Toggle {
).onClick(cancel)
return new Combine([
// Translations.t.general.add.confirmIntro.Subs({title: preset.name}),
// Translations.t.general.add.confirmIntro.Subs({title: preset.name}),
State.state.osmConnection.userDetails.data.dryRun ?
Translations.t.general.testing.Clone().SetClass("alert") : undefined,
disableFiltersOrConfirm,

13
UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -17,22 +17,22 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
State.state.layoutToUse.map(layout => LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone()))
)
;
const toTheMap = new SubtleButton(
undefined,
Translations.t.general.openTheMap.Clone().SetClass("text-xl font-bold w-full text-center")
).onClick(() =>{
).onClick(() => {
isShown.setData(false)
}).SetClass("only-on-mobile")
const plzLogIn =
new SubtleButton(
Svg.osm_logo_ui(),
new Combine([Translations.t.general.loginWithOpenStreetMap
.Clone().SetClass("text-xl font-bold"),
Translations.t.general.loginOnlyNeededToEdit.Clone().SetClass("font-bold")]
).SetClass("flex flex-col text-center w-full")
).SetClass("flex flex-col text-center w-full")
)
.onClick(() => {
State.state.osmConnection.AttemptLogin()
@ -40,8 +40,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
const welcomeBack = Translations.t.general.welcomeBack.Clone();
const loginStatus =
new Toggle(
@ -55,7 +54,7 @@ export default class ThemeIntroductionPanel extends VariableUiElement {
)
super(State.state.layoutToUse.map (layout => new Combine([
super(State.state.layoutToUse.map(layout => new Combine([
layout.description.Clone(),
"<br/><br/>",
toTheMap,

61
UI/BigComponents/UploadFlowStateUI.ts
View file

@ -6,43 +6,40 @@ import Translations from "../i18n/Translations";
/**
* Shows that 'images are uploading', 'all images are uploaded' as relevant...
*/
export default class UploadFlowStateUI extends VariableUiElement{
export default class UploadFlowStateUI extends VariableUiElement {
constructor(queue: UIEventSource<string[]>, failed: UIEventSource<string[]>, success: UIEventSource<string[]>) {
const t = Translations.t.image;
super(
queue.map(queue => {
const failedReasons = failed.data
const successCount = success.data.length
const pendingCount = queue.length - successCount - failedReasons.length;
let stateMessages : BaseUIElement[] = []
if(pendingCount == 1){
stateMessages.push(t.uploadingPicture.Clone().SetClass("alert"))
}
if(pendingCount > 1){
stateMessages.push(t.uploadingMultiple.Subs({count: ""+pendingCount}).SetClass("alert"))
}
if(failedReasons.length > 0){
stateMessages.push(t.uploadFailed.Clone().SetClass("alert"))
}
if(successCount > 0 && pendingCount == 0){
stateMessages.push(t.uploadDone.SetClass("thanks"))
}
stateMessages.forEach(msg => msg.SetStyle("display: block ruby"))
return stateMessages
}, [failed, success])
queue.map(queue => {
const failedReasons = failed.data
const successCount = success.data.length
const pendingCount = queue.length - successCount - failedReasons.length;
let stateMessages: BaseUIElement[] = []
if (pendingCount == 1) {
stateMessages.push(t.uploadingPicture.Clone().SetClass("alert"))
}
if (pendingCount > 1) {
stateMessages.push(t.uploadingMultiple.Subs({count: "" + pendingCount}).SetClass("alert"))
}
if (failedReasons.length > 0) {
stateMessages.push(t.uploadFailed.Clone().SetClass("alert"))
}
if (successCount > 0 && pendingCount == 0) {
stateMessages.push(t.uploadDone.SetClass("thanks"))
}
stateMessages.forEach(msg => msg.SetStyle("display: block ruby"))
return stateMessages
}, [failed, success])
);
}
}

14
UI/BigComponents/UserBadge.ts
View file

@ -105,12 +105,12 @@ export default class UserBadge extends Toggle {
userStats
]).SetClass("flex flex-col sm:w-auto sm:pl-2 overflow-hidden w-0")
const userIcon =
(user.img === undefined ? Svg.osm_logo_ui() : new Img(user.img)).SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 min-width-16 h16 float-left")
(user.img === undefined ? Svg.osm_logo_ui() : new Img(user.img)).SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 min-width-16 h16 float-left")
.onClick(() => {
if(usertext.HasClass("w-0")){
if (usertext.HasClass("w-0")) {
usertext.RemoveClass("w-0")
usertext.SetClass("w-min pl-2")
}else{
} else {
usertext.RemoveClass("w-min")
usertext.RemoveClass("pl-2")
usertext.SetClass("w-0")
@ -121,7 +121,7 @@ export default class UserBadge extends Toggle {
usertext,
userIcon,
]).SetClass("h-16 flex bg-white")
}
}));
@ -132,9 +132,9 @@ export default class UserBadge extends Toggle {
State.state.osmConnection.isLoggedIn
)
this.SetClass("shadow rounded-full h-min overflow-hidden block w-max")
this.SetClass("shadow rounded-full h-min overflow-hidden block w-max")
}