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

Refactoring of review element

Browse source
This commit is contained in:
pietervdvn 2021-06-21 03:07:49 +02:00
parent 64b0ca2859
commit 91b21647a3
3 changed files with 9 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
UI/Input/TextField.ts
View file

@ -13,7 +13,6 @@ export class TextField extends InputElement<string> {
constructor(options?: { constructor(options?: {
placeholder?: string | BaseUIElement, placeholder?: string | BaseUIElement,
value?: UIEventSource<string>, value?: UIEventSource<string>,
textArea?: boolean,
htmlType?: string, htmlType?: string,
inputMode?: string, inputMode?: string,
label?: BaseUIElement, label?: BaseUIElement,

14
UI/Reviews/ReviewForm.ts
View file

@ -38,7 +38,7 @@ export default class ReviewForm extends InputElement<Review> {
}); });
const comment = new TextField({ const comment = new TextField({
placeholder: Translations.t.reviews.write_a_comment, placeholder: Translations.t.reviews.write_a_comment,
textArea: true, htmlType: "area",
value: this._value.map(r => r?.comment), value: this._value.map(r => r?.comment),
textAreaRows: 5 textAreaRows: 5
}) })
@ -49,7 +49,8 @@ export default class ReviewForm extends InputElement<Review> {
const self = this; const self = this;
this._postingAs = this._postingAs =
new Combine([t.posting_as, new VariableUiElement(osmConnection.userDetails.map((ud: UserDetails) => ud.name)).SetClass("review-author")]) new Combine([t.posting_as, new VariableUiElement(osmConnection.userDetails.map((ud: UserDetails) => ud.name))
.SetClass("review-author")])
.SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;") .SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;")
this._saveButton = this._saveButton =
new SaveButton(this._value.map(r => self.IsValid(r)), undefined) new SaveButton(this._value.map(r => self.IsValid(r)), undefined)
@ -91,16 +92,19 @@ export default class ReviewForm extends InputElement<Review> {
InnerConstructElement(): HTMLElement { InnerConstructElement(): HTMLElement {
const form = new Combine([ const form = new Combine([
new Combine([this._stars, this._postingAs]).SetClass("review-form-top"), new Combine([this._stars, this._postingAs]).SetClass("flex"),
this._comment, this._comment,
new Combine([ new Combine([
this._isAffiliated, this._isAffiliated,
this._saveButton this._saveButton
]).SetClass("review-form-bottom"), ]).SetClass("review-form-bottom"),
"<br/>",
Translations.t.reviews.tos.SetClass("subtle") Translations.t.reviews.tos.SetClass("subtle")
]) ])
.SetClass("review-form") .SetClass("flex flex-col p-4")
.SetStyle( "border-radius: 1em;" +
" background-color: var(--subtle-detail-color);" +
" color: var(--subtle-detail-color-contrast);" +
" border: 2px solid var(--subtle-detail-color-contrast)")
const connection = this._osmConnection; const connection = this._osmConnection;
const login = Translations.t.reviews.plz_login.Clone().onClick(() => connection.AttemptLogin()) const login = Translations.t.reviews.plz_login.Clone().onClick(() => connection.AttemptLogin())

9
css/ReviewElement.css
View file

@ -18,15 +18,6 @@
margin-left: 0.5em; margin-left: 0.5em;
} }
.review-form {
display: block;
border-radius: 1em;
padding: 1em;
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
border: 2px solid var(--subtle-detail-color-contrast)
}
.review-form-bottom { .review-form-bottom {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;