mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-02-21 16:32:13 +00:00
feat: rework settings page design
This commit is contained in:
Thea Schöbl
@@ -21,83 +21,107 @@
|
||||
<ion-title>{{ 'feedback.page.TITLE' | translate }}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
|
||||
<ion-input
|
||||
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
|
||||
[(ngModel)]="author.name"
|
||||
name="name"
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
|
||||
<ion-select [(ngModel)]="message.name" value="comment" name="title" interface="popover" required="true">
|
||||
<ion-select-option value="Comment">{{
|
||||
'feedback.form.type.values.comment' | translate
|
||||
}}</ion-select-option>
|
||||
<ion-select-option value="Bug">{{ 'feedback.form.type.values.bug' | translate }}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
|
||||
<ion-input
|
||||
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
|
||||
[(ngModel)]="author.email"
|
||||
type="email"
|
||||
name="email"
|
||||
ngModel
|
||||
email
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
|
||||
<ion-textarea
|
||||
[(ngModel)]="message.messageBody"
|
||||
placeholder="{{ 'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE} }}"
|
||||
name="message"
|
||||
required="true"
|
||||
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
|
||||
autoGrow="true"
|
||||
></ion-textarea>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap"
|
||||
>{{ 'feedback.form.termsAgree.0' | translate }}
|
||||
<a [routerLink]="['/about/privacy']">{{ 'feedback.form.termsAgree.1' | translate }}</a
|
||||
>.</ion-label
|
||||
>
|
||||
<ion-checkbox color="primary" slot="start" [(ngModel)]="termsAgree" name="termsAgree"></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
|
||||
<ion-checkbox
|
||||
color="primary"
|
||||
slot="start"
|
||||
[(ngModel)]="protocolDataAgree"
|
||||
name="protocolDataAgree"
|
||||
></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-card>
|
||||
<ion-card-title>
|
||||
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
|
||||
<ng-container *ngIf="!showMetaData; else hide">{{
|
||||
'feedback.form.protocolData.show' | translate
|
||||
}}</ng-container>
|
||||
<ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
|
||||
</ion-button>
|
||||
</ion-card-title>
|
||||
<ion-card-content *ngIf="metaData && showMetaData">
|
||||
<pre>{{ metaData | json }}</pre>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<ion-button
|
||||
type="submit"
|
||||
color="primary"
|
||||
expand="block"
|
||||
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
|
||||
>{{ 'feedback.form.submit' | translate }}</ion-button
|
||||
>
|
||||
</form>
|
||||
<ion-content class="ion-content-parallax">
|
||||
<div>
|
||||
<div class="feedback-content">
|
||||
<ion-card>
|
||||
<form #feedbackForm="ngForm" (ngSubmit)="onSubmit()">
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.name.label' | translate }}</ion-label>
|
||||
<ion-input
|
||||
placeholder="{{ 'feedback.form.name.placeholder' | translate }}"
|
||||
[(ngModel)]="author.name"
|
||||
name="name"
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.type.label' | translate }}</ion-label>
|
||||
<ion-select
|
||||
[(ngModel)]="message.name"
|
||||
value="comment"
|
||||
name="title"
|
||||
interface="popover"
|
||||
required="true"
|
||||
>
|
||||
<ion-select-option value="Comment">{{
|
||||
'feedback.form.type.values.comment' | translate
|
||||
}}</ion-select-option>
|
||||
<ion-select-option value="Bug">{{
|
||||
'feedback.form.type.values.bug' | translate
|
||||
}}</ion-select-option>
|
||||
</ion-select>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.email.label' | translate }}</ion-label>
|
||||
<ion-input
|
||||
placeholder="{{ 'feedback.form.email.placeholder' | translate }}"
|
||||
[(ngModel)]="author.email"
|
||||
type="email"
|
||||
name="email"
|
||||
ngModel
|
||||
email
|
||||
></ion-input>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label position="stacked">{{ 'feedback.form.message.label' | translate }}</ion-label>
|
||||
<ion-textarea
|
||||
[(ngModel)]="message.messageBody"
|
||||
placeholder="{{
|
||||
'feedback.form.message.placeholder' | translate: {number: MINIMUM_MESSAGE_SIZE}
|
||||
}}"
|
||||
name="message"
|
||||
required="true"
|
||||
minlength="{{ MINIMUM_MESSAGE_SIZE }}"
|
||||
autoGrow="true"
|
||||
></ion-textarea>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">{{ 'feedback.form.termsAgree.0' | translate }} </ion-label>
|
||||
<ion-checkbox
|
||||
color="primary"
|
||||
slot="start"
|
||||
[(ngModel)]="termsAgree"
|
||||
name="termsAgree"
|
||||
></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-item lines="none">
|
||||
<ion-label
|
||||
><a style="display: contents" [routerLink]="['/about/privacy']">{{
|
||||
'feedback.form.termsAgree.1' | translate
|
||||
}}</a></ion-label
|
||||
>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
<ion-label class="ion-text-wrap">{{ 'feedback.form.protocolDataAgree' | translate }}</ion-label>
|
||||
<ion-checkbox
|
||||
color="primary"
|
||||
slot="start"
|
||||
[(ngModel)]="protocolDataAgree"
|
||||
name="protocolDataAgree"
|
||||
></ion-checkbox>
|
||||
</ion-item>
|
||||
<ion-card>
|
||||
<ion-card-title>
|
||||
<ion-button expand="block" fill="clear" (click)="toggleShowMetaData()">
|
||||
<ng-container *ngIf="!showMetaData; else hide">{{
|
||||
'feedback.form.protocolData.show' | translate
|
||||
}}</ng-container>
|
||||
<ng-template #hide>{{ 'feedback.form.protocolData.hide' | translate }}</ng-template>
|
||||
</ion-button>
|
||||
</ion-card-title>
|
||||
<ion-card-content *ngIf="metaData && showMetaData">
|
||||
<pre>{{ metaData | json }}</pre>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
<ion-button
|
||||
type="submit"
|
||||
color="primary"
|
||||
expand="block"
|
||||
[disabled]="!feedbackForm.valid || !termsAgree || submitSuccess"
|
||||
>{{ 'feedback.form.submit' | translate }}</ion-button
|
||||
>
|
||||
</form>
|
||||
</ion-card>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
Reference in New Issue
Block a user