Commit 4dc49bf6 authored by Konstantin Schulz's avatar Konstantin Schulz
Browse files

better alignment of autocomplete suggestions when choosing a text range

parent 37c91a0f
{ {
"name": "mc_frontend", "name": "mc_frontend",
"version": "1.4.2", "version": "1.4.3",
"author": "Ionic Framework", "author": "Ionic Framework",
"homepage": "https://ionicframework.com/", "homepage": "https://ionicframework.com/",
"scripts": { "scripts": {
......
...@@ -93,7 +93,7 @@ ...@@ -93,7 +93,7 @@
<ion-col style="display: inline-grid"> <ion-col style="display: inline-grid">
<ion-grid style="text-align: left"> <ion-grid style="text-align: left">
<ion-row> <ion-row>
<ion-col class="toggle-menu"> <ion-col class="toggle-menu" style="padding: 0">
<button *ngIf="showFeedback; else dropright" (click)="showFeedback = !showFeedback"> <button *ngIf="showFeedback; else dropright" (click)="showFeedback = !showFeedback">
<ion-icon name="arrow-dropdown"></ion-icon> <ion-icon name="arrow-dropdown"></ion-icon>
</button> </button>
...@@ -110,8 +110,8 @@ ...@@ -110,8 +110,8 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row *ngIf="showFeedback"> <ion-row *ngIf="showFeedback">
<ion-col> <ion-col style="padding: 0;">
<ion-grid style="text-align: left"> <ion-grid style="text-align: left; font-size: 1.2em;">
<ion-row> <ion-row>
<ion-col> <ion-col>
<label> <label>
......
...@@ -221,7 +221,7 @@ export class HelperService { ...@@ -221,7 +221,7 @@ export class HelperService {
}); });
} }
static makeGetRequest(http: HttpClient, toastCtrl: ToastController, url: string, params: HttpParams) { static makeGetRequest(http: HttpClient, toastCtrl: ToastController, url: string, params: HttpParams): Promise<any> {
HelperService.currentError = null; HelperService.currentError = null;
HelperService.isLoading = true; HelperService.isLoading = true;
return new Promise(((resolve, reject) => { return new Promise(((resolve, reject) => {
......
...@@ -26,121 +26,142 @@ ...@@ -26,121 +26,142 @@
{{ 'START_OF_TEXT' | translate }} {{ 'START_OF_TEXT' | translate }}
</ion-col> </ion-col>
<ion-col> <ion-col>
<input [(ngModel)]="corpusService.currentTextRange.start[0]" id="input1" <ion-grid>
(ngModelChange)="showFurtherReferences(true).then()" <ion-row>
placeholder="{{ corpusService.currentCorpus?.citation_level_1 }}" (focus)="currentInputId = 1" <input [(ngModel)]="corpusService.currentTextRange.start[0]" id="input1"
(blur)="resetCurrentInputId()"/> (ngModelChange)="showFurtherReferences(true).then()" (focus)="currentInputId = 1"
placeholder="{{ corpusService.currentCorpus?.citation_level_1 }}"
(blur)="resetCurrentInputId()"/>
</ion-row>
<ion-row>
<ion-list *ngIf="currentInputId === 1">
<ion-item *ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[0] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid>
<ion-row>
<input *ngIf="corpusService.currentCorpus?.citation_level_2 !== CitationLevel[CitationLevel.default]"
[(ngModel)]="corpusService.currentTextRange.start[1]" id="input2"
(ngModelChange)="showFurtherReferences(true).then()"
placeholder="{{ corpusService.currentCorpus?.citation_level_2 }}"
(focus)="currentInputId = 2"
(blur)="resetCurrentInputId()"
disabled="{{!corpusService.currentCorpus?.citations.hasOwnProperty(corpusService.currentTextRange.start[0])}}"/>
</ion-row>
<ion-row>
<ion-list *ngIf="currentInputId === 2">
<ion-item
*ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations[corpusService.currentTextRange.start[0]].subcitations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[1] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-col>
<ion-col>
<ion-grid>
<ion-row>
<input *ngIf="corpusService.currentCorpus?.citation_level_3 !== CitationLevel[CitationLevel.default]"
[(ngModel)]="corpusService.currentTextRange.start[2]" id="input3"
(ngModelChange)="showFurtherReferences(true).then()"
placeholder="{{ corpusService.currentCorpus?.citation_level_3 }}"
(focus)="currentInputId = 3"
(blur)="resetCurrentInputId()" disabled="{{isInputDisabled(true)}}"/>
</ion-row>
<ion-row>
<ion-list *ngIf="currentInputId === 3">
<ion-item
*ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations[corpusService.currentTextRange.start[0]].subcitations[corpusService.currentTextRange.start[1]].subcitations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[2] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-col> </ion-col>
<ion-col>
<input *ngIf="corpusService.currentCorpus?.citation_level_2 !== CitationLevel[CitationLevel.default]"
[(ngModel)]="corpusService.currentTextRange.start[1]" id="input2"
(ngModelChange)="showFurtherReferences(true).then()"
placeholder="{{ corpusService.currentCorpus?.citation_level_2 }}" (focus)="currentInputId = 2"
(blur)="resetCurrentInputId()"
disabled="{{!corpusService.currentCorpus?.citations.hasOwnProperty(corpusService.currentTextRange.start[0])}}"/>
</ion-col>
<ion-col>
<input *ngIf="corpusService.currentCorpus?.citation_level_3 !== CitationLevel[CitationLevel.default]"
[(ngModel)]="corpusService.currentTextRange.start[2]" id="input3"
(ngModelChange)="showFurtherReferences(true).then()"
placeholder="{{ corpusService.currentCorpus?.citation_level_3 }}" (focus)="currentInputId = 3"
(blur)="resetCurrentInputId()" disabled="{{isInputDisabled(true)}}"/>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-list *ngIf="currentInputId === 1">
<ion-item *ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[0] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list *ngIf="currentInputId === 2">
<ion-item
*ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations[corpusService.currentTextRange.start[0]].subcitations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[1] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-col>
<ion-col>
<ion-list *ngIf="currentInputId === 3">
<ion-item
*ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations[corpusService.currentTextRange.start[0]].subcitations[corpusService.currentTextRange.start[1]].subcitations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.start[2] = key; applyAutoComplete(true)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-col>
</ion-row>
<ion-row>
</ion-row> </ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
{{ 'END_OF_TEXT' | translate }} {{ 'END_OF_TEXT' | translate }}
</ion-col> </ion-col>
<ion-col> <ion-col>
<input [(ngModel)]="corpusService.currentTextRange.end[0]" id="input4" <ion-grid>
(ngModelChange)="showFurtherReferences(false).then()" <ion-row>
placeholder="{{ corpusService.currentCorpus?.citation_level_1 }}" (focus)="currentInputId = 4" <input [(ngModel)]="corpusService.currentTextRange.end[0]" id="input4"
(blur)="resetCurrentInputId()"/> (ngModelChange)="showFurtherReferences(false).then()"
</ion-col> placeholder="{{ corpusService.currentCorpus?.citation_level_1 }}"
<ion-col> (focus)="currentInputId = 4" (blur)="resetCurrentInputId()"/>
<input *ngIf="corpusService.currentCorpus?.citation_level_2 !== CitationLevel[CitationLevel.default]" </ion-row>
[(ngModel)]="corpusService.currentTextRange.end[1]" id="input5" <ion-row>
(ngModelChange)="showFurtherReferences(false).then()" <ion-list *ngIf="currentInputId === 4">
placeholder="{{ corpusService.currentCorpus?.citation_level_2 }}" (focus)="currentInputId = 5" <ion-item *ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations)">
(blur)="resetCurrentInputId()" <button class="autocomplete"
disabled="{{!corpusService.currentCorpus?.citations.hasOwnProperty(corpusService.currentTextRange.start[0])}}"/> (click)="corpusService.currentTextRange.end[0] = key; applyAutoComplete(false)">
</ion-col> {{ key }}
<ion-col> </button>
<input *ngIf="corpusService.currentCorpus?.citation_level_3 !== CitationLevel[CitationLevel.default]" </ion-item>
[(ngModel)]="corpusService.currentTextRange.end[2]" id="input6" </ion-list>
(ngModelChange)="showFurtherReferences(false).then()" </ion-row>
placeholder="{{ corpusService.currentCorpus?.citation_level_3 }}" (focus)="currentInputId = 6" </ion-grid>
(blur)="resetCurrentInputId()" disabled="{{isInputDisabled(false)}}"/> </ion-col>
</ion-col> <ion-col>
</ion-row> <ion-grid>
<ion-row> <ion-row>
<ion-col> <input *ngIf="corpusService.currentCorpus?.citation_level_2 !== CitationLevel[CitationLevel.default]"
<ion-list *ngIf="currentInputId === 4"> [(ngModel)]="corpusService.currentTextRange.end[1]" id="input5"
<ion-item *ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations)"> (ngModelChange)="showFurtherReferences(false).then()"
<button class="autocomplete" placeholder="{{ corpusService.currentCorpus?.citation_level_2 }}"
(click)="corpusService.currentTextRange.end[0] = key; applyAutoComplete(false)"> (focus)="currentInputId = 5" (blur)="resetCurrentInputId()"
{{ key }} disabled="{{!corpusService.currentCorpus?.citations.hasOwnProperty(corpusService.currentTextRange.start[0])}}"/>
</button> </ion-row>
</ion-item> <ion-row>
</ion-list> <ion-list *ngIf="currentInputId === 5">
</ion-col> <ion-item
<ion-col> *ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations[corpusService.currentTextRange.end[0]].subcitations)">
<ion-list *ngIf="currentInputId === 5"> <button class="autocomplete"
<ion-item (click)="corpusService.currentTextRange.end[1] = key; applyAutoComplete(false)">
*ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations[corpusService.currentTextRange.end[0]].subcitations)"> {{ key }}
<button class="autocomplete" </button>
(click)="corpusService.currentTextRange.end[1] = key; applyAutoComplete(false)"> </ion-item>
{{ key }} </ion-list>
</button> </ion-row>
</ion-item> </ion-grid>
</ion-list> </ion-col>
</ion-col> <ion-col>
<ion-col> <ion-grid>
<ion-list *ngIf="currentInputId === 6"> <ion-row>
<ion-item <input *ngIf="corpusService.currentCorpus?.citation_level_3 !== CitationLevel[CitationLevel.default]"
*ngFor="let key of ObjectKeys(corpusService.currentCorpus.citations[corpusService.currentTextRange.end[0]].subcitations[corpusService.currentTextRange.end[1]].subcitations)"> [(ngModel)]="corpusService.currentTextRange.end[2]" id="input6"
<button class="autocomplete" (ngModelChange)="showFurtherReferences(false).then()"
(click)="corpusService.currentTextRange.end[2] = key; applyAutoComplete(false)"> placeholder="{{ corpusService.currentCorpus?.citation_level_3 }}"
{{ key }} (focus)="currentInputId = 6" (blur)="resetCurrentInputId()"
</button> disabled="{{isInputDisabled(false)}}"/>
</ion-item> </ion-row>
</ion-list> <ion-row>
<ion-list *ngIf="currentInputId === 6">
<ion-item
*ngFor="let key of ObjectKeys(corpusService.currentCorpus?.citations[corpusService.currentTextRange.end[0]].subcitations[corpusService.currentTextRange.end[1]].subcitations)">
<button class="autocomplete"
(click)="corpusService.currentTextRange.end[2] = key; applyAutoComplete(false)">
{{ key }}
</button>
</ion-item>
</ion-list>
</ion-row>
</ion-grid>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row> <ion-row>
......
...@@ -9,3 +9,7 @@ ion-label { ...@@ -9,3 +9,7 @@ ion-label {
input { input {
max-width: 4em; max-width: 4em;
} }
ion-list {
width: fit-content;
}
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
"PART_OF_SPEECH_SYMBOL": "Symbol", "PART_OF_SPEECH_SYMBOL": "Symbol",
"PART_OF_SPEECH_VERB": "Verb", "PART_OF_SPEECH_VERB": "Verb",
"PHENOMENON_CASE": "Kasus", "PHENOMENON_CASE": "Kasus",
"PHENOMENON_DEPENDENCY": "Dependenz", "PHENOMENON_DEPENDENCY": "Syntax",
"PHENOMENON_LEMMA": "Lemma", "PHENOMENON_LEMMA": "Lemma",
"PHENOMENON_PART_OF_SPEECH": "Wortart", "PHENOMENON_PART_OF_SPEECH": "Wortart",
"PREVIEW": "Vorschau", "PREVIEW": "Vorschau",
......
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
"PART_OF_SPEECH_SYMBOL": "Symbol", "PART_OF_SPEECH_SYMBOL": "Symbol",
"PART_OF_SPEECH_VERB": "Verb", "PART_OF_SPEECH_VERB": "Verb",
"PHENOMENON_CASE": "Case", "PHENOMENON_CASE": "Case",
"PHENOMENON_DEPENDENCY": "Dependency", "PHENOMENON_DEPENDENCY": "Syntax",
"PHENOMENON_LEMMA": "Lemma", "PHENOMENON_LEMMA": "Lemma",
"PHENOMENON_PART_OF_SPEECH": "Part of speech", "PHENOMENON_PART_OF_SPEECH": "Part of speech",
"PREVIEW": "Preview", "PREVIEW": "Preview",
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment