Merge pull request #2151 from kobotoolbox/554-drop-make-editable

Use input instead of makeEditable for question names
kobotoolbox · Jan 28, 2019 · dc3c710 · dc3c710
2 parents 462f72b + 3da94eb
commit dc3c710
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 80 deletions.
diff --git a/jsapp/scss/stylesheets/partials/_registration.scss b/jsapp/scss/stylesheets/partials/_registration.scss
@@ -250,7 +250,7 @@
 .error-message {
   font-size: 14px;
   color: $cool-red;
-  background-color: rgba(255, 0, 0, 0.075);
+  background-color: rgba($cool-red, 0.075);
 }
 
 .registration__credit {

diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card.scss b/jsapp/scss/stylesheets/partials/form_builder/_card.scss
@@ -62,8 +62,17 @@
     }
 
     .card__header-title {
-        cursor:text;
-        // white-space: pre;
+        color: $cool-gray;
+
+        &:focus {
+            color: $black;
+        }
+
+        // we use placeholder as error message, as empty title is not welcomed
+         &::placeholder {
+            color: $cool-red;
+            background-color: rgba($cool-red, 0.075);
+        }
     }
     .card__header-hint {
         color: inherit;

diff --git a/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss b/jsapp/scss/stylesheets/partials/form_builder/_card_multichoice.scss
@@ -39,11 +39,6 @@
     .row__multioptions {
       display: block;
     }
-
-    .card__buttons__multioptions,
-    .card__buttons__multioptions + .card__header-title {
-      color: $indicatorColor;
-    }
   }
 }
 

diff --git a/jsapp/xlform/src/view.row.coffee b/jsapp/xlform/src/view.row.coffee
@@ -101,8 +101,6 @@ module.exports = do ->
           @model.finalize()
           val.set('value', '')
         view.render().insertInDOM(@)
-        if key == 'label'
-          @make_label_editable(view)
       if @model.getValue('required')
         @$card.addClass('card--required')
       @
@@ -170,10 +168,6 @@ module.exports = do ->
       @model.rows.each (row)=>
         @getApp().ensureElInView(row, @, @$rows).render()
 
-      if !@already_rendered
-        # only render the row details which are necessary for the initial view (ie 'label')
-        @make_label_editable new $viewRowDetail.DetailView(model: @model.get('label'), rowView: @).render().insertInDOM(@)
-
       @already_rendered = true
       @
 
@@ -201,20 +195,6 @@ module.exports = do ->
         if row.constructor.key == 'group' && !@hasNestedGroups()
           @$('.xlf-dv-appearance').eq(0).show()
       @
-    make_label_editable: (view) ->
-      $viewUtils.makeEditable view, view.model, @$label, options:
-        placement: 'right'
-        rows: 3
-      ,
-      edit_callback: (value) ->
-        value = value.replace(new RegExp(String.fromCharCode(160), 'g'), '')
-        value = value.replace /\t/g, ' '
-        view.model.set 'value', value
-
-        if value == ''
-          return newValue: new Array(10).join('&nbsp;')
-        else
-          return newValue: value;
 
   class RowView extends BaseRowView
     _expandedRender: ->
@@ -262,12 +242,6 @@ module.exports = do ->
         @showMultioptions()
         @is_expanded = true
       return
-    make_label_editable: (view) ->
-      $viewUtils.makeEditable view, view.model, @$label, options:
-        placement: 'right'
-        rows: 3
-      ,
-      transformFunction: (value) -> value
 
   class KoboMatrixView extends RowView
     className: "survey__row survey__row--kobo-matrix"
@@ -292,8 +266,6 @@ module.exports = do ->
           @model.finalize()
           val.set('value', '')
         view.render().insertInDOM(@)
-        if key == 'label'
-          @make_label_editable(view)
       @
 
   class RankScoreView extends RowView

diff --git a/jsapp/xlform/src/view.row.templates.coffee b/jsapp/xlform/src/view.row.templates.coffee
@@ -62,7 +62,7 @@ module.exports = do ->
             <div class="noop card__indicator__icon"><i class="fa fa-fw card__header-icon"></i></div>
           </div>
           <div class="card__text">
-            <span class="card__header-title js-cancel-select-row js-cancel-sort"></span>
+            <input type="text" placeholder="#{_t("Question title is required")}" class="card__header-title js-cancel-select-row js-cancel-sort">
             <input type="text" placeholder="#{_t("Question hint")}" class="card__header-hint js-cancel-select-row js-cancel-sort">
           </div>
           <div class="card__buttons">
@@ -106,7 +106,7 @@ module.exports = do ->
             <div class="noop card__indicator__icon"><i class="fa fa-fw card__header-icon fa-table"></i></div>
           </div>
           <div class="card__text">
-            <span class="card__header-title js-cancel-select-row js-cancel-sort"></span>
+            <input type="text" placeholder="#{_t("Question title is required")}" class="card__header-title js-cancel-select-row js-cancel-sort">
           </div>
           <div class="card__buttons">
             <span class="card__buttons__button card__buttons__button--settings card__buttons__button--gray js-toggle-card-settings" data-button-name="settings"><i class="fa fa-cog"></i></span>

diff --git a/jsapp/xlform/src/view.rowDetail.coffee b/jsapp/xlform/src/view.rowDetail.coffee
@@ -162,8 +162,17 @@ module.exports = do ->
     html: -> false
     insertInDOM: (rowView)->
       cht = rowView.$label
-      cht.html(@model.get("value")|| new Array(10).join('&nbsp;'))
-      @
+      cht.value = @model.get('value')
+      return @
+    afterRender: ->
+      @listenForInputChange({
+        el: this.rowView.$label,
+        transformFn: (value) ->
+          value = value.replace(new RegExp(String.fromCharCode(160), 'g'), '')
+          value = value.replace /\t/g, ' '
+          return value
+      })
+      return
 
   viewRowDetail.DetailViewMixins.hint =
     html: -> false

diff --git a/jsapp/xlform/src/view.surveyApp.coffee b/jsapp/xlform/src/view.surveyApp.coffee
@@ -53,7 +53,6 @@ module.exports = do ->
       "click #xlf-download": "downloadButtonClick"
       "click #save": "saveButtonClick"
       "click #publish": "publishButtonClick"
-      "click #settings": "toggleSurveySettings"
       "update-sort": "updateSort"
       "click .js-select-row": "selectRow"
       "click .js-select-row--force": "forceSelectRow"
@@ -234,28 +233,6 @@ module.exports = do ->
 
     getApp: -> @
 
-    toggleSurveySettings: (evt) ->
-      $et = $(evt.currentTarget)
-      $et.toggleClass('active__settings')
-      if @features.surveySettings
-        $settings = @$(".form__settings")
-        $settings.toggle()
-        close_settings = (e) ->
-          $settings_toggle = $('#settings')
-
-          is_in_settings = (element) ->
-            element == $settings[0] || $settings.find(element).length > 0
-          is_in_settings_toggle = (element) ->
-            element == $settings_toggle[0] || $settings_toggle.find(element).length > 0
-
-          if !(is_in_settings(e.target) || is_in_settings_toggle(e.target))
-            $settings.hide()
-            $et.removeClass('active__settings')
-            $('body').off 'click', close_settings
-
-        $('body').on 'click', close_settings
-
-
     _getViewForTarget: (evt)->
       $et = $(evt.currentTarget)
       modelId = $et.closest('.survey__row').data('row-id')
@@ -331,12 +308,6 @@ module.exports = do ->
         for key, value of validations
             break
 
-      if @features.displayTitle
-        $viewUtils.makeEditable @, @survey.settings, '.form-title', property:'form_title', options: validate: (value) ->
-          if value.length > 255
-            return "Length cannot exceed 255 characters, is " + value.length + " characters."
-          return
-
       $inps = {}
       _settings = @survey.settings
 
@@ -377,12 +348,6 @@ module.exports = do ->
       @null_top_row_view_selector = new $viewRowSelector.RowSelector(el: @$el.find(".survey__row__spacer").get(0), survey: @survey, ngScope: @ngScope, surveyView: @, reversible:true)
 
     _render_hideConditionallyDisplayedContent: ->
-      if not @features.displayTitle
-        @$(".survey-header__inner").hide()
-
-      if not @features.surveySettings
-        @$(".survey-header__options-toggle").hide()
-
       if !@features.multipleQuestions
         @$el.addClass('survey-editor--singlequestion')
         @$el.find(".survey-editor__null-top-row").addClass("survey-editor__null-top-row--hidden")
@@ -743,17 +708,13 @@ module.exports = do ->
     features:
       multipleQuestions: true
       skipLogic: true
-      displayTitle: true
       copyToLibrary: true
-      surveySettings: true
 
   class surveyApp.QuestionApp extends SurveyFragmentApp
     features:
       multipleQuestions: false
       skipLogic: false
-      displayTitle: false
       copyToLibrary: false
-      surveySettings: false
     render: () ->
       super
       @$('.survey-editor.form-editor-wrap.container').append $('.question__tags')

diff --git a/jsapp/xlform/src/view.utils.coffee b/jsapp/xlform/src/view.utils.coffee
@@ -14,8 +14,12 @@ module.exports = do ->
 
   viewUtils.makeEditable = (that, model, selector, {property, transformFunction, options, edit_callback}) ->
     if !(selector instanceof jQuery)
+      origSelector = selector
       selector =that.$el.find(selector)
 
+    if selector.length is 0
+      console?.error("makeEditable called on nonexistent element:", origSelector)
+
     if selector.data('madeEditable')
       console?.error "makeEditable called 2x on the same element: ", selector
     selector.data('madeEditable', true)
@@ -74,7 +78,6 @@ module.exports = do ->
 
 
     selector.on 'click', enable_edit
-    #selector.editable editableOpts
 
 
   viewUtils.reorderElemsByData = (selector, parent, dataAttribute)->