Issue #21 feat: Question Template : Preview of the answer display lay…

…out (horizontal and vertical) is unclear
sunbird-content-plugins · Jul 25, 2018 · a6ba721 · a6ba721
1 parent 95e2f08
commit a6ba721
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 10 deletions.
diff --git a/assets/Grid.png b/assets/Grid.png
diff --git a/assets/Horizontal.png b/assets/Horizontal.png
diff --git a/assets/Vertical.png b/assets/Vertical.png
diff --git a/editor/question-ctrl.js b/editor/question-ctrl.js
diff --git a/editor/question.html b/editor/question.html
@@ -81,14 +81,23 @@ <h3 class="ui left floated previewHeading">Preview</h3>
                         <div class="preview-heading">
                             <h3 class="ui left floated previewHeading">Configuration</h3>
                         </div>
-                        <label class="qcMetadateFormLbl">
-                            Select layout <span class="star">&nbsp;*</span>
-                        </label>
-                        <select class="ui dropdown form-control" name="templateType"
-                                ng-model="questionData.templateType" ng-change="updatePreview();"  ng-click="generateTelemetry({type: 'TOUCH', id: 'select', target: {id: 'question-layout', ver: '', type: 'select'}})" required>
-                            <option ng-repeat="tem in templatesType" value="{{tem}}">{{tem}}</option>
-                        </select>
-                        <div>
+                        <div class="ui twelve column preview-heading">
+                            <div class="qcMetadateFormLbl">
+                                Select layout<span class="star">&nbsp;*</span>
+                            </div>
+                            <!-- <select class="ui dropdown form-control" name="templateType"
+                                    ng-model="questionData.templateType" ng-change="updatePreview();"  ng-click="generateTelemetry({type: 'TOUCH', id: 'select', target: {id: 'question-layout', ver: '', type: 'select'}})" required>
+                                <option ng-repeat="tem in templatesType" value="{{tem}}">{{tem}}</option>
+                            </select> -->
+                            <div class="ui three column grid template-layout">
+                                <div class="row">
+                                    <div class="column" ng-class="{'activetemplate': questionData.templateType == templateIcon.name}" ng-repeat="templateIcon in templateIcons">
+                                        <img class="ui centered tiny image select-template" src="{{templateIcon.icon}}" ng-click="changeLayout(templateIcon.name);"/>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="preview-heading">
                             <div class="ui label qb-toggle-label">Shuffle Option</div>
                             <div class="ui fluid toggle checkbox verticalcenter">
                                 <input type="checkbox" ng-model="questionData.isShuffleOption"

diff --git a/editor/style.css b/editor/style.css
@@ -259,12 +259,33 @@ color: white;
 }
 
 .preview-heading {
-    padding: 15px 0;
+    padding: 0;
     width: 480px;
     margin: auto;
     text-align: left;
 }
 
 .formDiv{
     overflow: auto;
-}
+}
+
+.activetemplate{
+    border-radius: 5px;
+    border: 1px solid rgba(34,36,38,.15);
+}
+
+.ui.grid.template-layout{
+    margin: 1rem 0;
+}
+
+.ui.grid.template-layout>.row{
+    padding: 0;
+}
+
+.ui.grid.template-layout>.row>.column{
+    padding: 1rem;
+}
+
+.select-template{
+    cursor: pointer;
+}