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.
This commit is contained in:
Archit Hadge 2021-11-07 15:12:11 +05:30 committed by Tim Abbott
parent 2d766f3e78
commit 25ccd4a7db
3 changed files with 34 additions and 34 deletions

View File

@ -345,7 +345,7 @@ const time_limit_dropdown_values = new Map([
[ [
"custom_limit", "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", "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", value: "custom_period",
description: $t({defaultMessage: "N minutes"}), description: $t({defaultMessage: "Custom"}),
}, },
]; ];

View File

@ -129,17 +129,17 @@
<option value="{{ this.value }}">{{ this.description }}</option> <option value="{{ this.value }}">{{ this.description }}</option>
{{/each}} {{/each}}
</select> </select>
<div class="dependent-inline-block"> </div>
<label for="email_notification_batching_period_edit_minutes" class="inline-block"> <div class="dependent-block">
{{t 'N' }}: <label for="email_notification_batching_period_edit_minutes" class="inline-block">
</label> {{t 'Delay period (minutes)' }}:
<input type="text" </label>
name="email_notification_batching_period_edit_minutes" <input type="text"
class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element" name="email_notification_batching_period_edit_minutes"
data-setting-widget-type="number" class="email_notification_batching_period_edit_minutes admin-realm-time-limit-input prop-element"
autocomplete="off" data-setting-widget-type="number"
id="{{prefix}}email_notification_batching_period_edit_minutes"/> autocomplete="off"
</div> id="{{prefix}}email_notification_batching_period_edit_minutes"/>
</div> </div>
{{#each notification_settings.email_message_notification_settings}} {{#each notification_settings.email_message_notification_settings}}

View File

@ -154,16 +154,16 @@
<option value="{{0}}">{{1.text}}</option> <option value="{{0}}">{{1.text}}</option>
{{/each}} {{/each}}
</select> </select>
<div class="dependent-inline-block"> </div>
<label for="id_realm_message_content_edit_limit_minutes" class="inline-block realm-time-limit-label"> <div class="dependent-block">
{{t 'N' }}: <label for="id_realm_message_content_edit_limit_minutes" class="inline-block realm-time-limit-label">
</label> {{t 'Duration editing is allowed after posting (minutes)'}}:&nbsp;
<input type="text" id="id_realm_message_content_edit_limit_minutes" </label>
name="realm_message_content_edit_limit_minutes" <input type="text" id="id_realm_message_content_edit_limit_minutes"
class="admin-realm-time-limit-input prop-element" name="realm_message_content_edit_limit_minutes"
autocomplete="off" class="admin-realm-time-limit-input prop-element"
value="{{ realm_message_content_edit_limit_minutes }}"/> autocomplete="off"
</div> value="{{ realm_message_content_edit_limit_minutes }}"/>
</div> </div>
<div class="input-group"> <div class="input-group">
@ -200,16 +200,16 @@
<option value="{{0}}">{{1.text}}</option> <option value="{{0}}">{{1.text}}</option>
{{/each}} {{/each}}
</select> </select>
<div class="dependent-inline-block"> </div>
<label for="id_realm_message_content_delete_limit_minutes" class="inline-block realm-time-limit-label"> <div class="dependent-block">
{{t 'N' }}: <label for="id_realm_message_content_delete_limit_minutes" class="inline-block realm-time-limit-label">
</label> {{t "Duration deletion is allowed after posting (minutes)" }}:
<input type="text" id="id_realm_message_content_delete_limit_minutes" </label>
name="realm_message_content_delete_limit_minutes" <input type="text" id="id_realm_message_content_delete_limit_minutes"
class="admin-realm-time-limit-input prop-element" name="realm_message_content_delete_limit_minutes"
autocomplete="off" class="admin-realm-time-limit-input prop-element"
value="{{ realm_message_content_delete_limit_minutes }}"/> autocomplete="off"
</div> value="{{ realm_message_content_delete_limit_minutes }}"/>
</div> </div>
<div class="input-group"> <div class="input-group">