mapcomplete/UI/Popup/SaveButton.ts
Tobias 4068931bba Add Tailwind button for save+cancel
- remove custom styles
- add new button styles based on Tailwind classes using @apply
- extend config to allow hover:ring-blue-200 and such
- update the js-files to use new classes

- Only unsure about the `.review-form .save-non-active`, this might need additional Tailwind helper classes in this specific situation. Don't know where it shows up, so could not test.
2021-01-24 22:20:40 +01:00

35 lines
No EOL
1.3 KiB
TypeScript

import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import Translations from "../i18n/Translations";
import UserDetails, {OsmConnection} from "../../Logic/Osm/OsmConnection";
export class SaveButton extends UIElement {
private readonly _value: UIEventSource<any>;
private readonly _friendlyLogin: UIElement;
private readonly _userDetails: UIEventSource<UserDetails>;
constructor(value: UIEventSource<any>, osmConnection: OsmConnection) {
super(value);
this._userDetails = osmConnection?.userDetails;
if(value === undefined){
throw "No event source for savebutton, something is wrong"
}
this._value = value;
this._friendlyLogin = Translations.t.general.loginToStart.Clone()
.SetClass("login-button-friendly")
.onClick(() => osmConnection?.AttemptLogin())
}
InnerRender(): string {
if(this._userDetails != undefined && !this._userDetails.data.loggedIn){
return this._friendlyLogin.Render();
}
let inactive_class = ''
if (this._value.data === false || (this._value.data ?? "") === "") {
inactive_class = "btn-disabled";
}
return Translations.t.general.save.Clone().SetClass(`btn ${inactive_class}`).Render();
}
}