From 25ccd4a7dbf876d8b9904d2e9c474be2752393a0 Mon Sep 17 00:00:00 2001
From: Archit Hadge <archit.hadge@gmail.com>
Date: Sun, 7 Nov 2021 15:12:11 +0530
Subject: [PATCH] settings: Change "N minutes" options to Custom.

We change the various "Up to N minutes" settings option labels to
"Custom", since the N is a little too mathy for some users.

Since the new prompts for the value of N are longer, we need to move
those prompts to the next line. Mainly this means switching from
`dependent-inline-block` to `dependent-block`, but we also need to
move the block out of the containing input-group for the CSS to be
happy.

Substantially rewritten by tabbott to use CSS for positioning and
change the message deleting copy of this issue.

Fixes #20177.
---
 static/js/settings_config.ts                  |  6 +--
 .../settings/notification_settings.hbs        | 22 +++++-----
 .../organization_permissions_admin.hbs        | 40 +++++++++----------
 3 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/static/js/settings_config.ts b/static/js/settings_config.ts
index 32e819d1d0..1526c44ef2 100644
--- a/static/js/settings_config.ts
+++ b/static/js/settings_config.ts
@@ -345,7 +345,7 @@ const time_limit_dropdown_values = new Map([
     [
         "custom_limit",
         {
-            text: $t({defaultMessage: "Up to N minutes after posting"}),
+            text: $t({defaultMessage: "Custom"}),
         },
     ],
 ]);
@@ -411,7 +411,7 @@ export const msg_delete_limit_dropdown_values = new Map([
     [
         "custom_limit",
         {
-            text: $t({defaultMessage: "Up to N minutes after posting"}),
+            text: $t({defaultMessage: "Custom"}),
         },
     ],
 ]);
@@ -623,7 +623,7 @@ export const email_notifications_batching_period_values = [
     },
     {
         value: "custom_period",
-        description: $t({defaultMessage: "N minutes"}),
+        description: $t({defaultMessage: "Custom"}),
     },
 ];
 
diff --git a/static/templates/settings/notification_settings.hbs b/static/templates/settings/notification_settings.hbs
index fa1a030749..87653e69fe 100644
--- a/static/templates/settings/notification_settings.hbs
+++ b/static/templates/settings/notification_settings.hbs
@@ -129,17 +129,17 @@
                     <option value="{{ this.value }}">{{ this.description }}</option>
                 {{/each}}
             </select>
-            <div class="dependent-inline-block">
-                <label for="email_notification_batching_period_edit_minutes" class="inline-block">
-                    {{t 'N' }}:
-                </label>
-                <input type="text"
-                  name="email_notification_batching_period_edit_minutes"
-                  class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element"
-                  data-setting-widget-type="number"
-                  autocomplete="off"
-                  id="{{prefix}}email_notification_batching_period_edit_minutes"/>
-            </div>
+        </div>
+        <div class="dependent-block">
+            <label for="email_notification_batching_period_edit_minutes" class="inline-block">
+                {{t 'Delay period (minutes)' }}:
+            </label>
+            <input type="text"
+              name="email_notification_batching_period_edit_minutes"
+              class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element"
+              data-setting-widget-type="number"
+              autocomplete="off"
+              id="{{prefix}}email_notification_batching_period_edit_minutes"/>
         </div>
 
         {{#each notification_settings.email_message_notification_settings}}
diff --git a/static/templates/settings/organization_permissions_admin.hbs b/static/templates/settings/organization_permissions_admin.hbs
index bc981826b3..3b23cc3683 100644
--- a/static/templates/settings/organization_permissions_admin.hbs
+++ b/static/templates/settings/organization_permissions_admin.hbs
@@ -154,16 +154,16 @@
                             <option value="{{0}}">{{1.text}}</option>
                         {{/each}}
                     </select>
-                    <div class="dependent-inline-block">
-                        <label for="id_realm_message_content_edit_limit_minutes" class="inline-block realm-time-limit-label">
-                            {{t 'N' }}:
-                        </label>
-                        <input type="text" id="id_realm_message_content_edit_limit_minutes"
-                          name="realm_message_content_edit_limit_minutes"
-                          class="admin-realm-time-limit-input prop-element"
-                          autocomplete="off"
-                          value="{{ realm_message_content_edit_limit_minutes }}"/>
-                    </div>
+                </div>
+                <div class="dependent-block">
+                    <label for="id_realm_message_content_edit_limit_minutes" class="inline-block realm-time-limit-label">
+                        {{t 'Duration editing is allowed after posting (minutes)'}}:&nbsp;
+                    </label>
+                    <input type="text" id="id_realm_message_content_edit_limit_minutes"
+                      name="realm_message_content_edit_limit_minutes"
+                      class="admin-realm-time-limit-input prop-element"
+                      autocomplete="off"
+                      value="{{ realm_message_content_edit_limit_minutes }}"/>
                 </div>
 
                 <div class="input-group">
@@ -200,16 +200,16 @@
                             <option value="{{0}}">{{1.text}}</option>
                         {{/each}}
                     </select>
-                    <div class="dependent-inline-block">
-                        <label for="id_realm_message_content_delete_limit_minutes" class="inline-block realm-time-limit-label">
-                            {{t 'N' }}:
-                        </label>
-                        <input type="text" id="id_realm_message_content_delete_limit_minutes"
-                          name="realm_message_content_delete_limit_minutes"
-                          class="admin-realm-time-limit-input prop-element"
-                          autocomplete="off"
-                          value="{{ realm_message_content_delete_limit_minutes }}"/>
-                    </div>
+                </div>
+                <div class="dependent-block">
+                    <label for="id_realm_message_content_delete_limit_minutes" class="inline-block realm-time-limit-label">
+                        {{t "Duration deletion is allowed after posting (minutes)" }}:
+                    </label>
+                    <input type="text" id="id_realm_message_content_delete_limit_minutes"
+                      name="realm_message_content_delete_limit_minutes"
+                      class="admin-realm-time-limit-input prop-element"
+                      autocomplete="off"
+                      value="{{ realm_message_content_delete_limit_minutes }}"/>
                 </div>
 
                 <div class="input-group">