Thinking about the user journey, make tags visible at a certain point
This commit is contained in:
parent
47d755e59f
commit
cd37d8db98
14 changed files with 175 additions and 49 deletions
|
@ -15,6 +15,7 @@ import Locale from "../UI/i18n/Locale";
|
|||
import {State} from "../State";
|
||||
import {TagRenderingOptions} from "./TagRenderingOptions";
|
||||
import Translation from "../UI/i18n/Translation";
|
||||
import {SubtleButton} from "../UI/Base/SubtleButton";
|
||||
|
||||
|
||||
export class TagRendering extends UIElement implements TagDependantUIElement {
|
||||
|
@ -39,6 +40,8 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
private readonly _questionElement: InputElement<TagsFilter>;
|
||||
|
||||
private readonly _saveButton: UIElement;
|
||||
private readonly _friendlyLogin: UIElement;
|
||||
|
||||
private readonly _skipButton: UIElement;
|
||||
private readonly _editButton: UIElement;
|
||||
|
||||
|
@ -142,14 +145,17 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
if (tags === undefined) {
|
||||
return "";
|
||||
}
|
||||
if ((State.state?.osmConnection?.userDetails?.data?.csCount ?? 0) < 200) {
|
||||
const csCount = State.state.osmConnection.userDetails.data.csCount;
|
||||
if (csCount < State.userJourney.tagsVisibleAt) {
|
||||
return "";
|
||||
}
|
||||
return tags.asHumanString()
|
||||
if (csCount < State.userJourney.tagsVisibleAndWikiLinked) {
|
||||
return new FixedUiElement(tags.asHumanString(false)).SetClass("subtle").Render();
|
||||
}
|
||||
return tags.asHumanString(true);
|
||||
}
|
||||
)
|
||||
);
|
||||
this._appliedTags.clss = "subtle";
|
||||
|
||||
const cancel = () => {
|
||||
self._questionSkipped.setData(true);
|
||||
|
@ -161,6 +167,9 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
this._saveButton = new SaveButton(this._questionElement.GetValue())
|
||||
.onClick(save);
|
||||
|
||||
this._friendlyLogin = Translations.t.general.loginToStart
|
||||
.onClick(() => State.state.osmConnection.AttemptLogin())
|
||||
|
||||
this._editButton = new FixedUiElement("");
|
||||
if (this._question !== undefined) {
|
||||
this._editButton = new FixedUiElement("<img class='editbutton' src='./assets/pencil.svg' alt='edit'>")
|
||||
|
@ -381,6 +390,17 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
|
||||
|
||||
InnerRender(): string {
|
||||
|
||||
if (this.IsQuestioning() && !State.state.osmConnection.userDetails.data.loggedIn) {
|
||||
const question =
|
||||
this.ApplyTemplate(this._question).Render();
|
||||
return "<div class='question'>" +
|
||||
"<span class='question-text'>" + question + "</span>" +
|
||||
"<br/>" +
|
||||
"<span class='login-button-friendly'>" + this._friendlyLogin.Render() + "</span>" +
|
||||
"</div>"
|
||||
}
|
||||
|
||||
if (this.IsQuestioning() || this._editMode.data) {
|
||||
// Not yet known or questioning, we have to ask a question
|
||||
|
||||
|
@ -430,14 +450,14 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
|||
}
|
||||
const self = this;
|
||||
const tags = this._source.map(tags => self._tagsPreprocessor(self._source.data));
|
||||
let transl : Translation;
|
||||
if (typeof (template) === "string") {
|
||||
transl = new Translation({en: TagUtils.ApplyTemplate(template, tags)});
|
||||
}else{
|
||||
transl = template;
|
||||
}
|
||||
|
||||
return new VariableUiElement(tags.map(tags => transl.Subs(tags).InnerRender()));
|
||||
return new VariableUiElement(tags.map(tags => {
|
||||
const tr = Translations.WT(template);
|
||||
if (tr.Subs === undefined) {
|
||||
// This is a weird edge case
|
||||
return tr.InnerRender();
|
||||
}
|
||||
return tr.Subs(tags).InnerRender()
|
||||
}));
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue