Add ability to filter message recipients by activity (mozilla#3325)

This is a continuation of what was started in mozilla#3314. It implements the remaining bits of the Compose screen in the Messaging Center, namely Activity filters.
mathjazz · Sep 13, 2024 · b8db57f · b8db57f
1 parent d838000
commit b8db57f
Show file tree

Hide file tree

Showing 8 changed files with 427 additions and 206 deletions.
diff --git a/pontoon/base/static/css/check-box.css b/pontoon/base/static/css/check-box.css
@@ -6,7 +6,7 @@
   text-align: left;
 
   .check-box {
-    padding: 8px 0;
+    padding: 4px 0;
   }
 
   .check-box:last-child {

diff --git a/pontoon/base/static/css/style.css b/pontoon/base/static/css/style.css
@@ -139,6 +139,7 @@ input[type='password'],
 input[type='url'],
 input[type='number'],
 input[type='email'],
+input[type='date'],
 textarea {
   background: var(--input-background-1);
   border: 1px solid var(--main-border-1);
@@ -1152,13 +1153,15 @@ body > form,
 }
 
 .check-box .fa:before {
-  color: var(--status-error);
-  content: '';
+  color: var(--toggle-color-1);
+  content: '';
+  font-weight: normal;
 }
 
 .check-box.enabled .fa:before {
   color: var(--status-translated);
   content: '';
+  font-weight: bold;
 }
 
 #helpers > section ul {

diff --git a/pontoon/contributors/static/css/settings.css b/pontoon/contributors/static/css/settings.css
@@ -129,6 +129,10 @@
   font-style: italic;
 }
 
+#main .check-list .check-box {
+  padding: 8px 0;
+}
+
 #main .appearance .field .help {
   margin: 0 0 -12px;
 }

diff --git a/pontoon/messaging/forms.py b/pontoon/messaging/forms.py
@@ -22,3 +22,16 @@ class MessageForm(forms.Form):
     projects = forms.CharField(
         validators=[validators.validate_comma_separated_integer_list]
     )
+
+    translation_minimum = forms.IntegerField(required=False, min_value=0)
+    translation_maximum = forms.IntegerField(required=False, min_value=0)
+    translation_from = forms.DateField(required=False)
+    translation_to = forms.DateField(required=False)
+
+    review_minimum = forms.IntegerField(required=False, min_value=0)
+    review_maximum = forms.IntegerField(required=False, min_value=0)
+    review_from = forms.DateField(required=False)
+    review_to = forms.DateField(required=False)
+
+    login_from = forms.DateField(required=False)
+    login_to = forms.DateField(required=False)
diff --git a/pontoon/messaging/static/css/messaging.css b/pontoon/messaging/static/css/messaging.css
@@ -4,13 +4,10 @@
   }
 
   #compose {
-    padding: 20px;
     box-sizing: border-box;
 
     h3 {
-      color: var(--white-1);
-      font-size: 22px;
-      letter-spacing: 0;
+      margin-bottom: 20px;
 
       .stress {
         color: var(--status-translated);
@@ -19,6 +16,7 @@
 
     .controls {
       margin: 0;
+      text-align: right;
     }
 
     .errors {
@@ -33,7 +31,7 @@
     }
 
     #send-message > section {
-      margin: 20px 0;
+      padding: 20px;
     }
 
     .check-list {
@@ -64,16 +62,27 @@
     .field {
       color: var(--light-grey-7);
       font-size: 16px;
-      margin-bottom: 20px;
+      margin-bottom: 10px;
       text-align: left;
     }
 
+    .field.half {
+      float: left;
+      width: 285px;
+    }
+
+    .field.half:nth-child(2n) {
+      float: right;
+    }
+
     label {
       display: block;
       margin-bottom: 5px;
     }
 
     input[type='text'],
+    input[type='date'],
+    input[type='number'],
     textarea {
       background: var(--black-3);
       float: none;
@@ -88,7 +97,7 @@
       height: 150px;
     }
 
-    .message-editor .subtitle {
+    .message-content .subtitle {
       color: var(--light-grey-7);
       float: right;
       font-size: 13px;

diff --git a/pontoon/messaging/static/js/messaging.js b/pontoon/messaging/static/js/messaging.js
@@ -32,6 +32,19 @@ $(function () {
 
     const isValidProject = $form.find('[name=projects]').val();
 
+    const isValidTranslationMinimum = $form
+      .find('#translation-minimum')[0]
+      .checkValidity();
+    const isValidTranslationMaximum = $form
+      .find('#translation-maximum')[0]
+      .checkValidity();
+    const isValidReviewMinimum = $form
+      .find('#review-minimum')[0]
+      .checkValidity();
+    const isValidReviewMaximum = $form
+      .find('#review-maximum')[0]
+      .checkValidity();
+
     $form.find('.errors').css('visibility', 'hidden');
 
     function showErrorIfNotValid(isValid, selector) {
@@ -46,14 +59,28 @@ $(function () {
     showErrorIfNotValid(isValidRole, '.filter-user-role');
     showErrorIfNotValid(isValidLocale, '.filter-locale');
     showErrorIfNotValid(isValidProject, '.filter-project');
+    showErrorIfNotValid(
+      isValidTranslationMinimum,
+      '.filter-translation > .minimum',
+    );
+    showErrorIfNotValid(
+      isValidTranslationMaximum,
+      '.filter-translation > .maximum',
+    );
+    showErrorIfNotValid(isValidReviewMinimum, '.filter-review > .minimum');
+    showErrorIfNotValid(isValidReviewMaximum, '.filter-review > .maximum');
 
     return (
       isValidType &&
       isValidSubject &&
       isValidBody &&
       isValidRole &&
       isValidLocale &&
-      isValidProject
+      isValidProject &&
+      isValidTranslationMinimum &&
+      isValidTranslationMaximum &&
+      isValidReviewMinimum &&
+      isValidReviewMaximum
     );
   }