Merge pull request #2486 from HyphaApp/enhancement/sumission-comment-form-improvments

Make the submission comment form more compact.

hypha/apply/activity/forms.py

 from django import forms
 from django.core.exceptions import ValidationError
-from django.utils.safestring import mark_safe
 from pagedown.widgets import PagedownWidget
 
-from .models import VISIBILILTY_HELP_TEXT, VISIBILITY, Activity
+from .models import Activity
 
 
 class CommentForm(forms.ModelForm):
@@ -28,9 +27,6 @@ class CommentForm(forms.ModelForm):
         visibility.initial = self.visibility_choices[1] if user.is_apply_staff else self.visibility_choices[0]
         if len(self.visibility_choices) > 1:
             visibility.choices = self.visibility_choices
-            visibility.help_text = mark_safe('<br>'.join(
-                [VISIBILITY[choice] + ': ' + VISIBILILTY_HELP_TEXT[choice] for choice in self.allowed_visibility]
-            ))
         else:
             visibility.widget = forms.HiddenInput()
 

hypha/apply/activity/migrations/0059_rename_team_staff.py

+# Generated by Django 2.2.24 on 2021-08-16 14:48
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('activity', '0058_add_project_invoicing'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='activity',
+            name='visibility',
+            field=models.CharField(choices=[('applicant', 'Applicant(s)'), ('team', 'Staff'), ('reviewers', 'Reviewers'), ('partners', 'Partners'), ('all', 'All')], default='applicant', max_length=30),
+        ),
+    ]

hypha/apply/activity/models.py

@@ -21,18 +21,9 @@ REVIEWER = 'reviewers'
 PARTNER = 'partners'
 ALL = 'all'
 
-VISIBILILTY_HELP_TEXT = {
-    APPLICANT: 'Visible to applicant and team.',
-    TEAM: 'Visible only to team.',
-    REVIEWER: 'Visible to reviewers and team.',
-    PARTNER: 'Visible to partners and team.',
-    ALL: 'Visible to any user who has access to the submission.',
-}
-
-
 VISIBILITY = {
     APPLICANT: 'Applicant(s)',
-    TEAM: 'Team',
+    TEAM: 'Staff',
     REVIEWER: 'Reviewers',
     PARTNER: 'Partners',
     ALL: 'All',

hypha/apply/activity/templates/activity/include/comment_form.html

 <h4>Add communication</h4>
 <div class="wrapper wrapper--comments">
-    {% include 'funds/includes/delegated_form_base.html' with form=comment_form value='Comment' extra_classes='form__comments'%}
+    {% include 'funds/includes/delegated_form_base.html' with form=comment_form value='Submit' extra_classes='form__comments'%}
 </div>

hypha/apply/templates/forms/includes/field.html

 {% load util_tags %}
 {% with widget_type=field|widget_type field_type=field|field_type %}
 
-<div class="form__group {% if widget_type == 'checkbox_input' %} form__group--checkbox{% endif %}{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' or widget_type == 'single_file_field_widget' or widget_type == 'multi_file_field_widget' %} form__group--file{% endif %}{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}{% if is_application and field.field.grouper_for %} form-fields-grouper{% endif %}"{% if is_application and field.field.grouper_for %}data-grouper-for="{{ field.field.grouper_for }}" data-toggle-on="{{ field.field.choices.0.0 }}" data-toggle-off="{{ field.field.choices.1.0 }}"{% endif %}{% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields and not field.field.visible %}true{% else %}false{% endif %}" data-required="{{ field.field.required_when_visible }}"{% endif %}{% if field.field.word_limit %} data-word-limit="{{ field.field.word_limit }}"{% endif %}>
+<div class="form__group {{ field.id_for_label }} {% if widget_type == 'checkbox_input' %} form__group--checkbox{% endif %}{% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' or widget_type == 'single_file_field_widget' or widget_type == 'multi_file_field_widget' %} form__group--file{% endif %}{% if field.help_text %} form__group--wrap{% endif %}{% if field.errors %} form__error{% endif %}{% if is_application and field.field.group_number > 1 %} field-group field-group-{{ field.field.group_number }}{% endif %}{% if is_application and field.field.grouper_for %} form-fields-grouper{% endif %}"{% if is_application and field.field.grouper_for %}data-grouper-for="{{ field.field.grouper_for }}" data-toggle-on="{{ field.field.choices.0.0 }}" data-toggle-off="{{ field.field.choices.1.0 }}"{% endif %}{% if is_application and field.field.group_number > 1 %} data-hidden="{% if not show_all_group_fields and not field.field.visible %}true{% else %}false{% endif %}" data-required="{{ field.field.required_when_visible }}"{% endif %}{% if field.field.word_limit %} data-word-limit="{{ field.field.word_limit }}"{% endif %}>
     {% if widget_type == 'clearable_file_input' or widget_type == 'multi_file_input' or widget_type == 'single_file_field_widget' or widget_type == 'multi_file_field_widget'%}
         <span class="form__question">{{ field.label }}</span>
         <label for="{{ field.id_for_label }}" class="form__question form__question--{{ field_type }} {{ widget_type }}" {% if field.field.required %}required{% endif %}>

hypha/static_src/src/javascript/apply/submission-filters.js

@@ -33,7 +33,7 @@
         // find the matching dropdown
         let match = $(`.select2-selection[aria-owns="${selectId}"]`);
 
-        if (match.length !== 0){
+        if (match.length !== 0) {
             // if the dropdown contains a clear class, the filters are active
             if ($(match[0]).find('span.select2-selection__clear').length !== 0) {
                 match[0].classList.add(filterActiveClass);

hypha/static_src/src/sass/apply/components/_form.scss

@@ -335,6 +335,40 @@
         }
     }
 
+    &__comments {
+        display: grid;
+        grid-template-areas: 'message' 'visibility' 'actions';
+        grid-template-rows: auto auto auto;
+        grid-template-columns: 1fr;
+
+
+        @include media-query(tablet-landscape) {
+            grid-template-areas: 'message visibility' 'actions actions';
+            grid-template-rows: auto auto;
+            grid-template-columns: 2fr 1fr;
+            column-gap: 2rem;
+
+            .wmd-input {
+                max-width: 100%;
+                margin-bottom:  0;
+            }
+        }
+
+        .id_message {
+            grid-area: message;
+        }
+
+        .id_visibility_0 {
+            grid-area: visibility;
+        }
+
+        .button {
+            grid-area: actions;
+            max-width: 210px;
+            text-align: center;
+        }
+    }
+
     select,
     input[type='url'],
     input[type='text']:not(.input--secondary),

hypha/static_src/src/sass/apply/components/_grid.scss

@@ -56,12 +56,7 @@
             }
 
             .wrapper--comments & {
-                max-width: 800px;
-                margin-bottom: 0;
-
-                @include media-query(mob-landscape) {
-                    grid-template-columns: repeat(auto-fit,  200px 200px);
-                }
+                grid-template-columns: 1fr;
             }
 
             + br {