Hide the "configure field help" icons until user requests access

user can technically "request access" on "any page" and not just those
with configurable fields..but who cares for now i think..

tailbone/forms/core.py

@@ -900,11 +900,17 @@ class Form(object):
         not for "readonly" fields.
         """
         dform = self.make_deform_form()
-        field = dform[fieldname]
+        field = dform[fieldname] if fieldname in dform else None
-        label = self.get_label(fieldname)
+
-        markdowns = self.get_field_markdowns()
+        include = bool(field)
+        if self.readonly or (not field and fieldname in self.readonly_fields):
+            include = True
+        if not include:
+            return
 
         if self.field_visible(fieldname):
+            label = self.get_label(fieldname)
+            markdowns = self.get_field_markdowns()
 
             # these attrs will be for the <b-field> (*not* the widget)
             attrs = {
@@ -912,15 +918,17 @@ class Form(object):
             }
 
             # add some magic for file input fields
-            if isinstance(field.schema.typ, deform.FileData):
+            if field and isinstance(field.schema.typ, deform.FileData):
                 attrs['class_'] = 'file'
 
             # show helptext if present
+            # TODO: older logic did this only if field was *not*
+            # readonly, perhaps should add that back..
             if self.has_helptext(fieldname):
                 attrs['message'] = self.render_helptext(fieldname)
 
             # show errors if present
-            error_messages = self.get_error_messages(field)
+            error_messages = self.get_error_messages(field) if field else None
             if error_messages:
 
                 # TODO: this surely can't be what we ought to do
@@ -941,22 +949,16 @@ class Form(object):
             attrs.update(bfield_attrs)
 
             # render the field widget or whatever
-            html = field.serialize(use_buefy=True,
+            if self.readonly or fieldname in self.readonly_fields:
-                                   **self.get_renderer_kwargs(fieldname))
+                html = self.render_field_value(fieldname) or HTML.tag('span')
-            html = HTML.literal(html)
+            elif field:
+                html = field.serialize(use_buefy=True,
+                                       **self.get_renderer_kwargs(fieldname))
+                html = HTML.literal(html)
 
             # may need a complex label
             label_contents = [label]
 
-            # add 'configure' icon if allowed
-            if self.can_edit_help:
-                icon = HTML.tag('b-icon', size='is-small', pack='fas',
-                                icon='cog')
-                icon = HTML.tag('a', title="Configure field", c=[icon],
-                                **{'@click.prevent': "configureFieldInit('{}')".format(fieldname)})
-                label_contents.append(HTML.literal('&nbsp; &nbsp;'))
-                label_contents.append(icon)
-
             # add 'help' icon/tooltip if defined
             if markdowns.get(fieldname):
                 icon = HTML.tag('b-icon', size='is-small', pack='fas',
@@ -978,6 +980,16 @@ class Form(object):
                 label_contents.append(HTML.literal('&nbsp; &nbsp;'))
                 label_contents.append(tooltip)
 
+            # add 'configure' icon if allowed
+            if self.can_edit_help:
+                icon = HTML.tag('b-icon', size='is-small', pack='fas',
+                                icon='cog')
+                icon = HTML.tag('a', title="Configure field", c=[icon],
+                                **{'@click.prevent': "configureFieldInit('{}')".format(fieldname),
+                                   'v-show': 'configureFieldsHelp'})
+                label_contents.append(HTML.literal('&nbsp; &nbsp;'))
+                label_contents.append(icon)
+
             # nb. must apply hack to get <template #label> as final result
             label_template = HTML.tag('template', c=label_contents,
                                       **{'#label': 1})
@@ -988,7 +1000,7 @@ class Form(object):
             # and finally wrap it all in a <b-field>
             return HTML.tag('b-field', c=[label_template, html], **attrs)
 
-        else: # hidden field
+        elif field: # hidden field
 
             # can just do normal thing for these
             # TODO: again, why does serialize() not return literal?

tailbone/templates/form.mako

@@ -11,7 +11,12 @@
 
 <%def name="render_buefy_form()">
   <div class="form">
-    <${form.component}></${form.component}>
+    <${form.component}
+      % if can_edit_help:
+      :configure-fields-help="configureFieldsHelp"
+      % endif
+      >
+    </${form.component}>
   </div>
 </%def>
 
@@ -58,25 +63,6 @@
   ${parent.render_this_page_template()}
 </%def>
 
-<%def name="modify_this_page_vars()">
-  ${parent.modify_this_page_vars()}
-  % if can_edit_help and form:
-      <script type="text/javascript">
-
-        ${form.component_studly}.methods.configureFieldInit = function(fieldname) {
-            this.configureFieldName = fieldname
-            this.configureFieldLabel = this.fieldLabels[fieldname]
-            this.configureFieldMarkdown = this.fieldMarkdowns[fieldname]
-            this.configureFieldShowDialog = true
-            this.$nextTick(() => {
-                this.$refs.configureFieldMarkdown.focus()
-            })
-        }
-
-      </script>
-  % endif
-</%def>
-
 <%def name="finalize_this_page_vars()">
   ${parent.finalize_this_page_vars()}
   % if form is not Undefined:

tailbone/templates/forms/deform_buefy.mako

@@ -13,16 +13,7 @@
         ${form_body|n}
     % else:
     % for field in form.fields:
-        % if form.readonly or (field not in dform and field in form.readonly_fields):
+        ${form.render_buefy_field(field)}
-            <b-field horizontal
-                     label="${form.get_label(field)}">
-              ${form.render_field_value(field) or h.HTML.tag('span')}
-            </b-field>
-
-        % elif field in dform:
-            ${form.render_buefy_field(field)}
-        % endif
-
     % endfor
     % endif
   </section>
@@ -116,7 +107,11 @@
       template: '#${form.component}-template',
       mixins: [FormPosterMixin],
       components: {},
-      props: {},
+      props: {
+          % if can_edit_help:
+              configureFieldsHelp: Boolean,
+          % endif
+      },
       watch: {},
       computed: {},
       methods: {
@@ -130,6 +125,17 @@
           % endif
 
           % if can_edit_help:
+
+              configureFieldInit(fieldname) {
+                  this.configureFieldName = fieldname
+                  this.configureFieldLabel = this.fieldLabels[fieldname]
+                  this.configureFieldMarkdown = this.fieldMarkdowns[fieldname]
+                  this.configureFieldShowDialog = true
+                  this.$nextTick(() => {
+                      this.$refs.configureFieldMarkdown.focus()
+                  })
+              },
+
               configureFieldSave() {
                   this.configureFieldSaving = true
                   let url = '${edit_help_url}'

tailbone/templates/page.mako

@@ -33,6 +33,9 @@
     let ThisPage = {
         template: '#this-page-template',
         mixins: [FormPosterMixin],
+        props: {
+            configureFieldsHelp: Boolean,
+        },
         computed: {},
         methods: {},
     }

tailbone/templates/page_help.mako

@@ -21,11 +21,22 @@
               </b-button>
             </p>
             % if can_edit_help:
-                <p class="control">
+                ## TODO: this dropdown is duplicated, below
-                  <b-button @click="configureInit()">
+                <b-dropdown aria-role="list"  position="is-bottom-left">
-                    <span><i class="fa fa-cog"></i></span>
+                  <template #trigger="{ active }">
-                  </b-button>
+                    <b-button>
-                </p>
+                      <span><i class="fa fa-cog"></i></span>
+                    </b-button>
+                  </template>
+                  <b-dropdown-item aria-role="listitem"
+                                   @click="configureInit()">
+                    Edit Page Help
+                  </b-dropdown-item>
+                  <b-dropdown-item aria-role="listitem"
+                                   @click="configureFieldsInit()">
+                    Edit Fields Help
+                  </b-dropdown-item>
+                </b-dropdown>
             % endif
           </b-field>
 
@@ -33,10 +44,23 @@
 
           <b-field>
             <p class="control">
-              <b-button @click="configureInit()">
+              ## TODO: this dropdown is duplicated, above
-                <span><i class="fa fa-question-circle"></i></span>
+              <b-dropdown aria-role="list"  position="is-bottom-left">
-                <span><i class="fa fa-cog"></i></span>
+                <template #trigger="{ active }">
-              </b-button>
+                  <b-button>
+                    <span><i class="fa fa-question-circle"></i></span>
+                    <span><i class="fa fa-cog"></i></span>
+                  </b-button>
+                </template>
+                <b-dropdown-item aria-role="listitem"
+                                 @click="configureInit()">
+                  Edit Page Help
+                </b-dropdown-item>
+                <b-dropdown-item aria-role="listitem"
+                                 @click="configureFieldsInit()">
+                  Edit Fields Help
+                </b-dropdown-item>
+              </b-dropdown>
             </p>
           </b-field>
 
@@ -151,6 +175,7 @@
                 this.displayShowDialog = true
             },
 
+            % if can_edit_help:
             configureInit() {
                 this.configureShowDialog = true
                 this.$nextTick(() => {
@@ -158,7 +183,15 @@
                 })
             },
 
-            % if can_edit_help:
+            configureFieldsInit() {
+                this.$emit('configure-fields-help')
+                this.$buefy.toast.open({
+                    message: "Please see the gear icon next to configurable fields",
+                    type: 'is-info',
+                    duration: 4000, // 4 seconds
+                })
+            },
+
             configureSave() {
                 this.configureSaving = true
                 let url = '${url('{}.edit_help'.format(route_prefix))}'
@@ -184,10 +217,13 @@
 
     let PageHelpData = {
         displayShowDialog: false,
+
+        % if can_edit_help:
         configureShowDialog: false,
         configureSaving: false,
         helpURL: ${json.dumps(help_url or None)|n},
         markdownText: ${json.dumps(help_markdown or None)|n},
+        % endif
     }
 
   </script>

tailbone/templates/themes/falafel/base.mako

@@ -407,7 +407,12 @@
             % endif
 
             <div class="level-item">
-              <page-help></page-help>
+              <page-help
+                % if can_edit_help:
+                @configure-fields-help="configureFieldsHelp = true"
+                % endif
+                >
+              </page-help>
             </div>
 
             ## Feedback Button / Dialog
@@ -573,8 +578,11 @@
 </%def>
 
 <%def name="render_this_page_component()">
-  <this-page
+  <this-page @change-content-title="changeContentTitle"
-    v-on:change-content-title="changeContentTitle">
+             % if can_edit_help:
+             :configure-fields-help="configureFieldsHelp"
+             % endif
+             >
   </this-page>
 </%def>
 
@@ -842,6 +850,10 @@
         contentTitleHTML: ${json.dumps(capture(self.content_title))|n},
         feedbackMessage: "",
 
+        % if can_edit_help:
+            configureFieldsHelp: false,
+        % endif
+
         globalSearchActive: false,
         globalSearchTerm: '',
         globalSearchData: ${json.dumps(global_search_data)|n},