Update enter question page

wepublic · Aug 21, 2017 · b3246a9 · b3246a9
1 parent b274250
commit b3246a9
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 35 deletions.
diff --git a/src/assets/lang/de.json b/src/assets/lang/de.json
@@ -39,7 +39,7 @@
 
   "ENTERQUESTION": {
     "ASK_QUESTION": "Frage stellen",
-    "TAG_QUESTION": "Bitte #Tag eingeben",
+    "TAG_QUESTION": "#Tags auswählen",
     "YOUR_QUESTION": "Deine Frage eingeben"
   },
 

diff --git a/src/pages/enterQuestion/enterQuestion.html b/src/pages/enterQuestion/enterQuestion.html
@@ -8,20 +8,19 @@
 </ion-header>
 
 <ion-content padding>
-  <div class="fixed" padding ion-fixed>
-    <div class="bubble">
-      <ion-select no-lines
-        [(ngModel)]="selectedTags" multiple="true" placeholder="{{ 'ENTERQUESTION.TAG_QUESTION' | translate }}"
-        cancelText="{{ 'CANCEL' | translate }}"
-      >
-        <ion-option *ngFor="let tag of tags" value="{{tag.id}}">#{{tag.text}}</ion-option>
-      </ion-select>
-      <ion-textarea
-        [(ngModel)]="questionText" placeholder="{{ 'ENTERQUESTION.YOUR_QUESTION' | translate }}"
-        type="text" wrap="soft" rows="6"
-      >
-      </ion-textarea>
-    </div>
-    <div><a (click)="publishQuestion()"><img class="button" src="assets/icon/enter.svg"></a></div>
+  <div class="bubble">
+    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="25" width="30" class="lasche">
+      <path d="m 1,0 H 18.5 V 1 H 1 z" style="stroke:none" />
+      <path d="m 19.779181,0.5004292 v 0 c -2.50318,0.1043 -4.69502,1.53631 -5.92219,3.76774 l -2.525,4.825 C 8.3861611,14.722329 8.3861611,14.722329 3.7658811,23.551929 c -0.34061,0.59607 -0.89967,0.94807 -1.56588,0.94807 -0.92386,0 -1.70106173,-0.776141 -1.69999999,-1.7 L 0.52562438,0.5041545"/>
+    </svg>
+    <ion-select [(ngModel)]="selectedTags" multiple="true" [selectOptions]="selectOptions"
+                placeholder="{{ 'ENTERQUESTION.TAG_QUESTION' | translate }}"
+                cancelText="{{ 'CANCEL' | translate }}">
+      <ion-option *ngFor="let tag of tags" value="{{tag.id}}">#{{tag.text}}</ion-option>
+    </ion-select>
+    <ion-textarea [(ngModel)]="questionText" placeholder="{{ 'ENTERQUESTION.YOUR_QUESTION' | translate }}"
+                  type="text" wrap="soft" rows="6">
+    </ion-textarea>
   </div>
+  <div><a (click)="publishQuestion()"><img class="button" src="assets/icon/enter.svg"></a></div>
 </ion-content>
diff --git a/src/pages/enterQuestion/enterQuestion.scss b/src/pages/enterQuestion/enterQuestion.scss
@@ -1,11 +1,5 @@
 page-enterQuestion {
 
-  .fixed {
-    width: 100%;
-    height: 100%;
-    background: white;
-  }
-
   .bubble {
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
@@ -15,16 +9,18 @@ page-enterQuestion {
     margin-bottom: 30px;
     margin-left: 5%;
     margin-right: 5%;
-    width: 90%;
     background-color: color($colors, primary);
-    border: 1px solid #15d7a9;
-  }
-
-  .bubble:before {
-    position: absolute;
-    bottom: -28px;
-    content:url('../assets/icon/lasche_gruen.svg');
-    right: -1px;
+    border: 1px solid darken(color($colors, primary), 10%);
+
+    .lasche {
+      position: absolute;
+      right: -1px;
+      bottom: -25px;
+      width: 30px;
+      fill: color($colors, primary);
+      stroke: darken(color($colors, primary), 10%);
+      transform: scale(-1,1);
+    }
   }
 
   .input, .select {

diff --git a/src/pages/enterQuestion/enterQuestion.ts b/src/pages/enterQuestion/enterQuestion.ts
@@ -1,8 +1,9 @@
 import { Component } from '@angular/core';
 import { NavController } from 'ionic-angular';
-import {TagsHelper} from "../../utils/TagsHelper";
-import {QuestionServiceProvider} from "../../providers/question-service/question-service";
-import {MainMenuPage} from "../mainMenu/mainMenu";
+import { TranslateService } from "@ngx-translate/core";
+import { TagsHelper } from "../../utils/TagsHelper";
+import { QuestionServiceProvider } from "../../providers/question-service/question-service";
+import { MainMenuPage } from "../mainMenu/mainMenu";
 
 @Component({
   selector: 'page-enterQuestion',
@@ -14,8 +15,14 @@ export class EnterQuestionPage {
   public selectedTags;
   public questionText;
 
-  constructor(public navCtrl: NavController, public tagsHelper: TagsHelper, public questionService: QuestionServiceProvider) {
+  private selectOptions = {
+    title: ""
+  };
+
+  constructor(private navCtrl: NavController, translate: TranslateService,
+              private tagsHelper: TagsHelper, private questionService: QuestionServiceProvider) {
     this.tags = this.tagsHelper.getAllTagObjectsSorted();
+    translate.get('ENTERQUESTION.TAG_QUESTION', {value: 'world'}).subscribe((res: string) => this.selectOptions.title = res);
   }
 
   publishQuestion() {