Merge pull request #21 from matty22/enhancement/reorg-question-settings

Enhancement/reorg question settings

notes.md

@@ -4,17 +4,19 @@ File Upload
 
 ## Known deficiencies or possible improvements
 - Can only drag in or sort. Need to be able to do both
-- Add Firebase back end?
-- The hacky way I am adding question options and ratings to radio, checkbox, and grid type questions
 - CSS everywhere
+- Having to use !important on a - Ability to put question labels and controls on separate lines. Question      above and fields belowCSS rule to override the default cursor rule instituted by ng2-dnd package
 - Needs some serious refactoring
-- Having to use !important on a CSS rule to override the default cursor rule instituted by ng2-dnd package
-- Ability to put question labels and controls on separate lines. Question above and fields below
-- If user includes an email address, include email address validation in the exported code
+- The hacky way I am adding question options and ratings to radio, checkbox, and grid type questions
 - Add preview link to see survey on its own page (good way to get Angular routing in use on this project)
 - Allow user to exclude parts of address field and customize placeholder for each field
 - Allow user to remove options/ratings from multi-select type fields
-- Required attribute for checkboxes doesn't work the same as radio buttons in that for radio buttons for any set of buttons with the same
-  name attribute, if any one of them is checked the required is fulfilled. For checkboxes, the required attribute is on a per
-  checkbox basis ,so validation has to be done with JS to get the same type of experience
-- Refine order of question style settings so that they are all consistent and make sense
+- Refine order of question style settings so that they are all consistent and make sense
+- Color pickers instead of hex strings
+- Paddding setting split into 4 fields rather than string
+- Border setting split out into 3 fields rather than string
+- Button needs a font size settings field
+- Paragraph element needs to respect line breaks and perhaps have a very basic rich text editor implemented
+- Required attribute for checkboxes doesn't work the same as radio buttons in that for radio buttons for any   set of buttons with the same name attribute, if any one of them is checked the required is fulfilled. For    checkboxes, the required attribute is on a per checkbox basis ,so validation has to be done with JS to get   the same type of experience
+- Add Firebase back end?
+

src/app/questionpanel/questionpanel.component.html

@@ -530,11 +530,6 @@ <h1 *ngSwitchCase="'h1'" [ngStyle]="{'color': question.color}">{{question.label}
       </mat-form-field>
       <mat-slide-toggle [(ngModel)]="questionToEdit.options.hideQuestion">Hide Question?</mat-slide-toggle>
       <mat-slide-toggle [(ngModel)]="questionToEdit.options.responseRequired">Answer Required?</mat-slide-toggle>
-      <p>Grid Type</p>
-      <mat-button-toggle-group [(ngModel)]="questionToEdit.options.gridType">
-        <mat-button-toggle value="radio"><mat-icon>radio_button_checked</mat-icon></mat-button-toggle>
-        <mat-button-toggle value="checkbox"><mat-icon>check_box</mat-icon></mat-button-toggle>
-      </mat-button-toggle-group>
       <mat-form-field>
         <input matInput [(ngModel)]="questionToEdit.options.padding" placeholder="Padding">
       </mat-form-field>
@@ -559,6 +554,11 @@ <h1 *ngSwitchCase="'h1'" [ngStyle]="{'color': question.color}">{{question.label}
         <mat-button-toggle value="center"><mat-icon>format_align_center</mat-icon></mat-button-toggle>
         <mat-button-toggle value="flex-end"><mat-icon>format_align_right</mat-icon></mat-button-toggle>
       </mat-button-toggle-group>
+      <p>Grid Type</p>
+      <mat-button-toggle-group [(ngModel)]="questionToEdit.options.gridType">
+        <mat-button-toggle value="radio"><mat-icon>radio_button_checked</mat-icon></mat-button-toggle>
+        <mat-button-toggle value="checkbox"><mat-icon>check_box</mat-icon></mat-button-toggle>
+      </mat-button-toggle-group>
       <p>Answer Options</p>
       <div id="questionOptionList" *ngFor="let option of tempQuestionOptions; index as i; last as isLast;">
         <input type="text" [(ngModel)]="questionToEdit.options.questionOptions[i]">