Close simonv3#49. Other text can be set to something else

hc27080401 · Nov 23, 2016 · abbea1d · abbea1d
1 parent 0da622b
commit abbea1d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 2 deletions.
diff --git a/client/js/manage/directives/add-question-with-options.ng.html b/client/js/manage/directives/add-question-with-options.ng.html
@@ -13,7 +13,14 @@
       </a>
     </div>
     <div class="form-align-group" ng-if="option.type === 'other'">
-      <label for="{{ }}-other">Other: </label>
+      <label class="other-option-label" for="{{ }}-other"
+        ng-class="{active: active}">
+        <span class="other-label"
+          ng-click="active = true">{{ option.otherLabel || 'Other' }}:</span>
+        <input ng-model="option.otherLabel"
+          type="text"
+          ng-blur="active = false"></input>
+      </label>
       <input id="{{ }}-other" type="text" disabled/>
       <a ng-click="removeOther()">
         <i class="icon-cross"></i>

diff --git a/client/js/surveys/directives/survey-question-radio.ng.html b/client/js/surveys/directives/survey-question-radio.ng.html
@@ -13,7 +13,7 @@
       name="{{ question.question }}"
       type="{{ question.type }}"
       ng-change="optionChanged(option)"
-      /> Other
+      /> {{ option.otherLabel || 'Other' }}
   </span>
 
   <input ng-if="option.type === 'other' && choosingOther"

diff --git a/client/styles/manage.less b/client/styles/manage.less
@@ -76,3 +76,25 @@
     margin-left: 2rem;
   }
 }
+
+.other-option-label {
+
+  input {
+    display: none;
+
+    float: right;
+    text-align: right;
+  }
+
+  &.active {
+    span {
+      display: none;
+    }
+
+    input {
+      display: block;
+    }
+  }
+}
+
+