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

Css tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-07 04:50:12 +01:00
parent 489c6fc3c0
commit 701ce3e89a
23 changed files with 1220 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

34
UI/Base/Ornament.ts Normal file
View file

@ -0,0 +1,34 @@
import {UIElement} from "../UIElement";
import {UIEventSource} from "../../Logic/UIEventSource";
import Svg from "../../Svg";
export default class Ornament extends UIElement {
private static readonly ornamentsCount = Ornament.countOrnaments();
private readonly _index = new UIEventSource<number>(0)
constructor(index = new UIEventSource<number>(0)) {
super(index);
this._index = index;
this.SetClass("ornament")
const self = this;
this.onClick(() => {
self._index.setData((self._index.data + 1) % Ornament.ornamentsCount);
})
}
private static countOrnaments() {
let ornamentCount = 0;
for (const key in Svg.All) {
if (key.startsWith("Ornament-Horiz-")) {
ornamentCount++;
}
}
return ornamentCount;
}
InnerRender(): string {
return Svg.All[`Ornament-Horiz-${this._index.data}.svg`]
}
}

18
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -1,6 +1,6 @@
import {UIElement} from "../UIElement";
import State from "../../State";
import WelcomeMessage from "./WelcomeMessage";
import ThemeIntroductionPanel from "./ThemeIntroductionPanel";
import * as personal from "../../assets/themes/personalLayout/personalLayout.json";
import PersonalLayersPanel from "./PersonalLayersPanel";
import Svg from "../../Svg";
@ -15,6 +15,8 @@ import {TabbedComponent} from "../Base/TabbedComponent";
import {UIEventSource} from "../../Logic/UIEventSource";
import LayoutConfig from "../../Customizations/JSON/LayoutConfig";
import UserDetails from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import CombinedInputElement from "../Input/CombinedInputElement";
export default class FullWelcomePaneWithTabs extends UIElement {
private readonly _layoutToUse: UIEventSource<LayoutConfig>;
@ -27,9 +29,9 @@ export default class FullWelcomePaneWithTabs extends UIElement {
this._layoutToUse = State.state.layoutToUse;
this._userDetails = State.state.osmConnection.userDetails;
const layoutToUse = this._layoutToUse.data;
let welcome: UIElement = new WelcomeMessage();
let welcome: UIElement = new ThemeIntroductionPanel();
if (layoutToUse.id === personal.id) {
welcome = new PersonalLayersPanel();
}
@ -66,10 +68,18 @@ export default class FullWelcomePaneWithTabs extends UIElement {
}
);
this._component = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
const tabbedPart = new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab)
.ListenTo(this._userDetails);
const backButton = new Combine([
new Combine([Translations.t.general.returnToTheMap.Clone().SetClass("to-the-map")])
.SetClass("to-the-map-inner")
]).SetClass("only-on-mobile")
.onClick(() => State.state.fullScreenMessage.setData(undefined));
tabbedPart.SetStyle("overflow-y: auto; max-height: calc( 100vh - 4em);display:block;")
this._component = new Combine([tabbedPart, backButton]).SetStyle("width:100%;");
}
InnerRender(): string {

25
UI/BigComponents/WelcomeMessage.ts → UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -4,15 +4,16 @@ import State from "../../State";
import Combine from "../Base/Combine";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
import {VariableUiElement} from "../Base/VariableUIElement";
export default class WelcomeMessage extends UIElement {
export default class ThemeIntroductionPanel extends UIElement {
private languagePicker: UIElement;
private readonly description: UIElement;
private readonly plzLogIn: UIElement;
private readonly welcomeBack: UIElement;
private readonly tail: UIElement;
private readonly loginStatus: UIElement;
constructor() {
@ -32,20 +33,24 @@ export default class WelcomeMessage extends UIElement {
});
this.welcomeBack = Translations.t.general.welcomeBack;
this.tail = layout.descriptionTail;
this.loginStatus = new VariableUiElement(
State.state.osmConnection.userDetails.map(
userdetails => {
if (State.state.featureSwitchUserbadge.data) {
return "";
}
return (userdetails.loggedIn ? this.welcomeBack : this.plzLogIn).Render();
}
)
)
}
InnerRender(): string {
let loginStatus = undefined;
if (State.state.featureSwitchUserbadge.data) {
loginStatus = (State.state.osmConnection.userDetails.data.loggedIn ? this.welcomeBack :
this.plzLogIn);
}
return new Combine([
this.description,
"<br/><br/>",
loginStatus,
this.loginStatus,
this.tail,
"<br/>",
this.languagePicker

25
UI/FullScreenMessageBoxHandler.ts
View file

@ -1,5 +1,4 @@
import {UIElement} from "./UIElement";
import Translations from "./i18n/Translations";
import State from "../State";
import Combine from "./Base/Combine";
@ -8,24 +7,11 @@ import Combine from "./Base/Combine";
*/
export default class FullScreenMessageBox extends UIElement {
private readonly returnToTheMap: UIElement;
private _content: UIElement;
constructor(onClear: (() => void)) {
constructor() {
super(State.state.fullScreenMessage);
this.HideOnEmpty(true);
this.returnToTheMap =
new Combine([
// Wrapped another time to prevent the value of 'em' to fluctuate
Translations.t.general.returnToTheMap.Clone()
])
.onClick(() => {
State.state.fullScreenMessage.setData(undefined);
onClear();
})
.SetClass("to-the-map")
}
@ -34,17 +20,14 @@ export default class FullScreenMessageBox extends UIElement {
return "";
}
this._content = State.state.fullScreenMessage.data;
const innerWrap = new Combine([this._content]).SetClass("fullscreenmessage-content")
return new Combine([innerWrap, this.returnToTheMap])
.SetStyle("display:block; height: 100%;")
.Render();
return new Combine([this._content]).SetClass("fullscreenmessage-content").Render();
}
protected InnerUpdate(htmlElement: HTMLElement) {
super.InnerUpdate(htmlElement);
// This is a bit out of place, and it is a fix specifically for the featureinfobox-titlebar
const height = htmlElement.getElementsByClassName("featureinfobox-titlebar")[0]?.clientHeight ?? 0;
htmlElement.style.setProperty("--variable-title-height", height+"px")
htmlElement.style.setProperty("--variable-title-height", height + "px")
}

2
UI/OpeningHours/OhVisualization.ts
View file

@ -197,7 +197,7 @@ export default class OpeningHoursVisualization extends UIElement {
const opensAtDate = oh.getNextChange();
if(opensAtDate === undefined){
const comm = oh.getComment() ?? oh.getUnknown();
if(comm !== undefined){
if(!!comm){
return new FixedUiElement(comm).SetClass("ohviz-closed").Render();
}

23
UI/Popup/FeatureInfoBox.ts
View file

@ -7,6 +7,9 @@ import Combine from "../Base/Combine";
import TagRenderingAnswer from "./TagRenderingAnswer";
import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import Svg from "../../Svg";
import Ornament from "../Base/Ornament";
export default class FeatureInfoBox extends UIElement {
private _tags: UIEventSource<any>;
@ -16,6 +19,8 @@ export default class FeatureInfoBox extends UIElement {
private _titleIcons: UIElement;
private _renderings: UIElement[];
private _questionBox: UIElement;
private _returnToTheMap: UIElement;
private _tail: UIElement;
constructor(
tags: UIEventSource<any>,
@ -28,10 +33,14 @@ export default class FeatureInfoBox extends UIElement {
this._tags = tags;
this._layerConfig = layerConfig;
this._returnToTheMap = Svg.back_svg().onClick(() => {
State.state.fullScreenMessage.setData(undefined);
State.state.selectedElement.setData(undefined);
}).SetClass("only-on-mobile")
.SetClass("featureinfobox-back-to-the-map")
this._title = layerConfig.title === undefined ? undefined :
new TagRenderingAnswer(tags, layerConfig.title)
.SetClass("featureinfobox-title");
this._title = new TagRenderingAnswer(tags, layerConfig.title ?? new TagRenderingConfig("POI"))
.SetClass("featureinfobox-title");
this._titleIcons = new Combine(
layerConfig.titleIcons.map(icon => new TagRenderingAnswer(tags, icon)))
.SetClass("featureinfobox-icons");
@ -54,16 +63,18 @@ export default class FeatureInfoBox extends UIElement {
if (!questionBoxIsUsed) {
this._renderings.push(questionBox);
}
this._tail = new Combine([new Ornament()]).SetClass("only-on-mobile");
}
InnerRender(): string {
return new Combine([
new Combine([this._title, this._titleIcons])
.SetClass("featureinfobox-titlebar"),
new Combine([
this._returnToTheMap, new Combine([this._title, this._titleIcons]).SetClass("featureinfobox-titlebar-title")
]).SetClass("featureinfobox-titlebar"),
new Combine([
...this._renderings,
this._questionBox,
new FixedUiElement("").SetClass("featureinfobox-tail")
this._tail.SetClass("featureinfobox-tail")
]
).SetClass("featureinfobox-content"),
]).SetClass("featureinfobox")

1
UI/ShowDataLayer.ts
View file

@ -151,7 +151,6 @@ export default class ShowDataLayer {
State.state.selectedElement.setData(feature);
}
this._onSelectedTrigger[feature.properties.id.replace("/","_")] = this._onSelectedTrigger[id];
if (feature.properties.id.replace(/\//g, "_") === Hash.hash.data) {
// This element is in the URL, so this is a share link
// We already open it