This makes it possible it include our standard markdown formatting in
one's custom profile fields, allowing for links, emphasis, emoji, etc.
Fixes#10131.
While we're at it, we remove the JSON parsing that was part of the
user field code path, since this function isn't responsible for
rendering user fields.
We instead get the specific fields from message
that we use. This is particularly helpful
for subject -> topic migration; we no longer
have to account for "subject" fields in
client-side templates.
This adds a new realm_logo field, which is a horizontal-format logo to
be displayed in the top-left corner of the webapp, and any other
places where we might want a wide-format branding of the organization.
Tweaked significantly by tabbott to rebase, fix styling, etc.
Fixing the styling of this feature's loading indicator caused me to
notice the loading indicator for the realm_icon feature was also ugly,
so I fixed that too.
Fixes#7995.
Fix an issue that when a message is being edited, sometimes compose
options are hidden if there is no time limit. Also, move the options
further from the time limit to make them more noticeable.
Fix#11056.
Also, add a new notification sound, "ding". It comes from
https://freesound.org, where the original Zulip notification sound comes
from as well. In the future, new sounds can be added by adding audio
files to the `static/audio/notification_sounds` directory.
Tweaked significantly by tabbott:
* Avoided removing static/audio/zulip.ogg, because that file is
checked for by old versions of the desktop app.
* Added a views check for the sound being valid + tests.
* Added additional tests.
* Restructured the test_events test to be cleaner.
* Removed check_bool_or_string.
* Increased max length of notification_sound.
* Provide available_notification_sounds in events data set if global
notifications settings are requested.
Fixes#8051.
This ensures the "account settings" UI for managing a user's own email
address uses the delivery email, since that's what users care most about.
Eventually, we'll need to add support for at least viewing both email
addresses in "account settings", but this is the right long-term
behavior.
This new setting is still hidden in the UI when not in the development
environment, because the feature isn't ready for production, but
merging this will help simplify future work on the feature.
When the list of recipients of a group private message conversation is
truncated due to being long in the "Private messages" area, we didn't
provide easy access to the full list of people. Fix this by adding a
title attribute for the area.
Fixes#10978.
This correctly shows guest users that they cannot interact with
anything in the "Organization" tab, though we preserve the read-only
access to it so that they can (e.g.) browse the organization's custom
emoji.
Previously, because the parens were added via CSS, copy-pasting the
EDITED notices resulted in junk like this:
Iago 3:51 PMEDITED
edited message content
Now, you get:
Iago 3:51 PM (EDITED)
edited message content
Status messages were incorrectly not selectable, due to a bug in how
we setup the no-select hierarchy (for making copy-paste not have weird
whitespace issues).
Fixes#10456.
For message groups, I just changed the internal name
to "topic_links".
For uses of "subject_links" that are tied to how the
server names fields, I introduced these wrappers:
* util.set_topic_links(obj, topic_links)
* util.get_topic_links(obj)
These can be used for either messages or events.
Previously, messages were a string of disconnected regions. Modeling them as a list brings several benefits:
* Quickly jump to the message list by using a screen reader's list navigation hotkey.
* Quickly jump between messages by using a screen reader's list item navigation hotkey.
* Quickly jump to the beginning or end of message lists in screen readers that support it.
Change wording of public stream description to
"Any member of the organization" from "Anybody"
to indicate that guest users can't subscribe even
public stream of organization.
This moves the deactivate account which was previously placed under
"SETTINGS / YOUR ACCOUNT" -> "Deactivate account" to "SETTINGS / YOUR
ACCOUNT" -> "User settings" for making it more visible.
When a user clicks the compose `+` button, create a popover at the
bottom right of the screen including buttons for opening a new stream
message or a new private message.
The "notification settings" page previously advertised support for
mobile push notifications via checkboxes, even if the server hadn't
yet been registered for push notifications. This was a frequent
source of onboarding pain for new Zulip organizations.
We fix this by providing a clear warning and disabling the relevant
inputs on the settings pages.
Modified significantly by tabbott to correct some tricky logic errors
as well as some copy-paste bugs.
Fixes#10331.
This supports guest user in the user-info-form-modal as well as in the
role section of the admin-user-table.
With some fixes by Tim Abbott and Shubham Dhama.
This deduplicate code for the checkboxes which are dependent on other
parameters and it makes no sense changing them when that parameter is
false. For example, changing `message_content_in_email_notifications`
makes sense only when `enable_offline_email_notifications` is true.
This module makes it really easy to create are-you-sure
dialogs for dangerous operations.
Basically it's one function with five parameters. You
give three chunks of HTML, a callback function, and
a parent container.
The first use of this will be in settings_user_groups,
coming up in a couple commits.
Since now we have email notifications for streams messages too, so
there is no direct dependency of
`message_content_in_email_notifications`checkbox on
`enable_offline_email_notifications` setting and neither we can say it's
dependent on `enable_stream_email_notifications` as well because we may
have email notifications set for individual streams. So removing this
checkbox dependency is the best solution here.
This is largely inspired by requests from people not liking the
Google's new emojiset. A lot of people were requesting to revert
back to old blobs emojiset so we are re-enabling this feature
after making relevant infrastructure changes for supporting google's
old blob emojiset and re-adding support for twitter emojiset.
Fixes: #10158.
This adds a feature in the "Notification" section of "Settings" tab,
which lets user enable or disable login emails notification.
Tweaked by tabbott to simplify the test.
Fixes: #5795, progress towards #5854.
Empty "person picker" fields appear with a much smaller width than all
other custom fields. Increase the `min-width` of the field that it
matches the widths of other text boxes.
Fix#10414.
Modify structure of template data used to render
`user_profile_modal.handlebars`.
This is preparatory commit to display user pills in user profile
popover instead of user names in user type custom fields.
This commit add FIELD_TYPE_CHOICES_DICT to page_params and replace
FIELD_TYPE_CHOICES.
FIELD_TYPE_CHOICES_DICT includes all field types with keyword, id
and display name. Using this field-type-dict, we can access field
type information by it's keyword, and remove all static use of
field-type'a name or id in frontend.
This commit also modifies functions in js where this page_params
field-types is used.
This line full of non-breaking spaces dates back to before Zulip being
open sourced (ca4e6a0ff), so we can assume it was a fix that we don't
need anymore.
This commit
- Remove `add-btn` in choices, to create new input
for choice
- Add logic which create blank input for choice at
the bottom if user start typing into above input choice.
Hide `delete-btn` of first choice in create-new-custom-field and
edit-choice-type-field form, so user can not delete all choices
and have to submit at least one choice.
This commit remove this logic of choice-field-delete-btn from
both settings.
This is preparatory commit of adding new logic in `delete-btn`.
Fixes#10124.
Users in the waiting period category cannot subscribe other users to
a stream. When a user tries to mention another unsubscribed user, a
warning message appears with a subscribe button on it to subscribe
the other user.
This commit removes the subscribe button and changes the warning text
for users in the waiting period category.
Instead of displaying a fixed error message inside the yellow bar itself,
now the yellow bar disappears on error and a red compose_error is shown.
The error message is the one returned from the server.
Due to copyright issues with potentially displaying Apple emojisets on
non-apple devices, as well as iamcal dropping support for the emojione
emojiset (see https://github.com/iamcal/emoji-data/pull/142), we are
dropping (perhaps temporarily) support for allowing users to switch
emojisets in Zulip.
This commit just hides the feature from the user but leaves most of
the infrastructure in place so that in the future if we decide to
re-enable the support we will not need to redo the infrastructure work
(some JS-side code is deleted, mostly because we'll want to re-add the
feature using the do_settings_change infrastructure anyway).
The most likely emoji set to add is the legacy "blobs" Google emoji
set, since it seems popular with some users.
Tweaked by tabbott to remove some additional JS code and update the
changelog.
Previously, we incorrectly setup the click handler on
create-custom-field-btn each time settings overlay opens, which
executes handler multiple times results in more than one HTTP request
to server for custom field creation.
This commit creates an ID for create-field-btn and initializes the
click handler on this button, instead of the form; the side effect of
that change is that we're now no longer double-adding this click
handler every time the page is opened.
This isn't a clean solution; ideally, we'd only call the function to
add the click handler once in the first place.
Fixes#10126.
Admin user must enter at least one choice for choice type fields
in create new custom field form. Admin can not delete all choice
options in form.
Reset delete-btn of choice inputs on choice reordering so that
admin can delete all choice except first choice input option.
Currently, admin user has to add order of custom-field-choice in
input box to create and edit choice-type custom field.
Remove this input boxes and add drag-drop list of custom-field-choices
using Sortable.js.
Fixes#10129
In Chrome, the loading spinners on the Bots and Deactivated Users pages
were not visible due to the `filter` elements having duplicate IDs across
the different pages. (There are multiple `filter` elements with the ID
`uil-ring-shadow` on the page.)
To solve this, when generating a new loading SVG element, we append
the container element's ID to the filter's ID, thus preventing any
duplicates.
Fix#8620.
This commit fixes two issues with the previous implementation:
1. JavaScript's replace replaces only the first instance,
thus we need to use a regex.
2. Handlebars was setting the id of the HTML elements with
spaces in between which broke the delete button; now a
new variable display_name is passed to the template.
This also makes changes to the casper tests to have an emoji
name with multiple spaces in it to ensure this bug doesn't
appear again.
We now render the "skin" part of "Stream Settings" before
adding in the actual streams. The new function
populate_stream_settings_left_panel() takes care of adding
the streams. It uses a new template called
`subscriptions.handlebars`.
Splitting out this function will give us more flexibility
for various improvements.
First, we can decide to render the list after we open the
overlay, just to avoid the problem that users don't know why
the modal's opening. (And we could add a loader spinner as
needed.)
Second, we can improve our filter features so that we do
filtering in the data instead of moving DOM rows around,
which is expensive.
Third, we can eventually introduce progressive rendering.
Finally, having the function broken out will make profiling
more precise about where bottlenecks exist.
Now that `emoji_collection` and `emojis_by_name` are global
datasources in the webapp we need to rename things carefully
to reflect their actual meaning. The fact that emoji code is
used as a css class for unicode emoji is one thing but it is
not its sole use so renaming it seems a good idea.
The `tr` block does clones the `options` array (which contains the
entire subscriptions data set) very inefficiently, which leads to the
rendering being very slow.
We don't need a `tr` block here, as there is no dynamic content that
needs to be replaced.
Previous commits have fully implemented the logic for stream email
notifications; this final commit adds support for configuring it to
the UI.
Fixes#6511.
This changes the icon indicating that you can drug the custom
profile field rows in settings to be the double rows of dots
typically used to indicate draggability. It also gives those
rows the "move" cursor on hover.
Previously, commit e5d2e95 attempted to change the styling of the user
profile pill containers to match the inputs above it. However, it used
an incorrect selector (#settings_page), resulting in all other pill
containers on settings pages being changed to match it as well
(example: User groups pill containers in Organization
settings). Additionally, its selector's specified background attribute
resulted in problems in dark mode.
To correctly style the user profile pill containers to match the other
input's styling, we apply the uneditable-input class native to
Bootstrap so that we don't need to create an entirely new selector to
style it.
Note that the .custom_user_field .pill-container selector was added so
that it could match the padding of inputs. Also, the
.custom_user_field .pill-container:focus-within selector was added
with attributes straight from Bootstrap's input:focus selectors so
that .custom_user_field .pill-container would have a blue outline
while users were typing in the input pill, just like the other inputs.
Allow passing image link in the item passed to appendValidatedData.
When passing image link via any of the append* functions, make sure
that create_item_from_text for that pill also adds the image link to
the item created.
This commit does not make any visual change to the current app.
Changes to user_pill.js are necessary to enable user avatars for
pills.
This was killed when the "Deleted Streams" feature was dropped
in commit 7bbe44d7 but we forgot to deal with it at the time.
squash to admin_streams_list
The error handling for delete/reactivate was broken.
The old code related to appending id_suffix to the ids of
the per-bot error divs did not have corresponding
selectors in the actual error handling.
Things still aren't great, but there's a bit more
encapsulation now, and you'll see errors for the
delete/reactivate cases.
The user can also edit the question after adding it.
The question in the poll can only be added/edited
by the user who started the poll.
The input bar will be disabled for the other users
if the question is not yet added. If the question is
added, the input bar will not be visible to the other
users.
Even when admin removes all custom fields from org, custom
fields header "Profile" doesn't get removed.
Render header "Profile" whenever custom fields data get changed.
Fixes#9797.
Clicking on the unread count badge on the right sidebar did not
narrow the selected pm/group-pm. This commit moves the count div
inside selectable_sidebar_block. Also uses flexbox instead of
inline-blocks for user presences selectable_sidebar_block.
For other users' profile, keyboard navigation worked only upto 2
items as the third item with '.mention_user' could not be focused.
This was due to href missing from the anchor tag. $.focus() requires
href to be defined, even if it is '#' to focus the anchor tag.
When admin user create new private stream, widget for changing privacy
of stream doesn't render. Because we render subscription-settings
template partially on subscription-add event, so this case wasn't
handled.
Fixes#9469
Previously weren't registering modal properly, which gets fixed by
using open_modal. It further fixes closing of modal by using escape
and positioning of modal.
Fixes: #9590.
These styles aren't great, but they're hopefully
better than none at all and inspire a follow up
commit from somebody else (so it starts to look
like a "real" feature instead of feeling completely
proof-of-concept).
The user can now specify the value while creating a stream.
An admin can later change it via `Change stream permissions`
modal. Add is_announcement_only to subscription type text.
Previously, the Botserver determined which bot to run for an
outgoing webhook by dispatching on a different URL endpoint
for each bot. Now, instead, the Botserver determines which bot
to run by the section header of the bot in the flaskbotrc.
This commit makes the frontend provide the new flaskbotrc
and updates the setup steps for the Botserver in the docs.
This should make it easier for us to iterate on a less-dense Zulip.
We create two classes on body, less_dense_mode and more_dense_mode, so
that it's easy as we refactor to separate the two concepts from things
like colors that are independent.
A "zform" knows how to render data that follows our
schema for widget messages with form elements like
buttons and choices.
This code won't be triggered until a subsequent
server-side commit takes widget_content from
API callers such as the trivial chat bot and
creates submessages for us.
This is a trial to have the first reply hotspot in the bottom
whitespace (and stick there until "Got it!" is pressed).
Tweaked by tabbott to clean it up a bit. Still needs more work on the
visuals.
Now that we've moved it into a bulleted set of options inside a modal,
there's no good reason to have separate variables for the corner cases
around who can manage a stream.
Dropdown element for outgoing interface type was not showing correct
value, cause the way default value was set to dropdown was incorrect
(it should have been setting the selected parameter on the selected
option if it were going to be selected via the template code).
Fixes#9419.
Template was rendering undefined value of `bot_id` instead of
`user_id`.
Fix this by replacing `bot_id` with `user_id` and changing
template data variable to `data-user-id` to avoid
future confusion.
This makes a few important cleanup changes:
* Using the more standard data-field-id name for the ID value.
* Using $(e.target).closest() rather than `.parent`, which is more
robust to future changes in markup.
We only use this data in a rarely-used settings screen, and it can be
large after years of posting screenshots.
So optimize the performance of / by just loading these data when we
actually visit the page.
This saves about 300ms of runtime for loading the home view for my
user account on chat.zulip.org.
This fixes some minor glitches with buttons:
* Movement of the organization-settings-parent block on the
appearance of widgets.
* Large and odd look of save button.
* Use of fadeIn and fadeOut rather than changing opacity as
opacity don't actually remove them.
When we populate the buddy list or update it for activity, we now
have buddy_data set a faded flag that is rendered in the template.
This avoids some re-rendering overhead and is on the eventual path
to having our widget be more data-oriented (and all rendering happens
"behind" the widget).
We still do direct DOM updates when the compose state changes or
when we get peer subscription events.
Add realm setting to set time limit for message deleitng.
Set default value of message_content_delete_limit_seconds
to 600 seconds(10 min).
Thanks to Shubham Dhama for rebasing and reworking this. Some final
edits also done by Tim Abbott.
Fixes#7344.
Some labels like one for `translate_emoticons` which contains HTML
get escaped because of use of `{{ label }}` syntax, which escapes
the string for XSS security purpose but since labels aren't any
threat to any such security cases, we can use triple curly brackets
`{{{ label }}}` syntax.
Fixes: #9231.
This coverts the "checkbox" for `realm_allow_message_editing` and
"input" for `realm_message_content_edit_limit_seconds` into a
dropdown with the option for custom time limit option.
Following templates are affected: display-settings.handlebars and
ui-settings.handlebars.
There will be no UI change, it is just to make code more readable.
In 7b8da9b we have introduced some other checkmark icons
which aren't necessary as old icons still make sense there.
So removing them as they don't add any extra value.
Fixes: #8995.
Removed the top margin of input-group css
to prevent the double margins. Also fixed the
default-language positioning, and maintained
margin consistency in organization settings.
Fixes#8890.
`@everone` and `@all` will have a megaphone icon from FontAwesome in
place of the avatar.
Also, fix the `composebox_typeahead` tests to account for the images.
Fix#6635.
We make some specific cases of tags use 2 space indents.
The case description:
* A tag with opening tag spread over multiple lines and closing tag
on the same line as of the closing angle bracket of the opening tag.
* A tag with opening tag spread over multiple lines and closing tag
not on the same line as of the closing angle bracket of the opening
tag.
Example:
Case 1:
Not linted:
<button type="button"
class="btn btn-primary btn-small">{{t "Yes" }}</button>
After linting:
<button type="button"
class="btn btn-primary btn-small">{{t "Yes" }}</button>
Case 2:
Before linting:
<div class = "foo"
id = "bar"
role = "whatever">
{{ bla }}
</div>
After linting:
<div class = "foo"
id = "bar"
role = "whatever">
{{ bla }}
</div>
This reverts loader indicator from the new fontawesome
`icon-button-loading` to previous SVG one, this change is only reflected
to those loaders which use `loader.handlebars` template for
loading indication(because there are some indicators like "Save changes"
in org settings which don't use loader.handlebars).
This main problem with this indicator is that it is bit
inconsistent with other places where we use `loader.handlebars` like
loading Zulip icon which appears while fetching old messages.
Introduced a new checkmark icon in the settings page
from entypo ( www.entypo.com ) to make icons more
consistent between user and organization settings.
This commit changes the way the save and discard buttons on the
organization profile, settings and permissions tabs look and fades
them out after a delay. It also cleans up the code a bit in the
settings_org.js file. It introduces changes to the css in
settings.css as well as the template for save-discard buttons.
It also fixes a bug on the user settings whereby if an option
that requires reload is clicked before clicking an option that does
not require reload, the reload message is erased. This could create
an issue where the user is not aware that a reload is required.
The loader is also changed to using fa-icon as loading spinner on
user settings and the colors are tweaked a little bit.
(It is a preliminary change for deduplication of org settings template.)
This is done because of some settings like organization-settings
has ids which match the pattern of having a prefix `id_`
before the property name.
For those settings which don't have any prefix, there will be no
effect.
Here obsolete `t` in the label is removed since we do
label translations in JS files.
This splits "Language and notifications" section into "Default user
settings" and "Notifications".
With this, we can easily add other default user settings in the
same place.
Now that we have support for displaying custom profile fields, this
adds administrator-level support for creating them.
Tweaked by tabbott to fix a few small bugs and clean up the commit message.
Fixes#1760.
This wraps each subsection in notification settings in a parent div.
This is done just to make the code more readable and clean.
There will be no UI change.
With this we have the same way to save changes done in org profile
subsection, i.e. show "Save" button beside header of subsection,
add "Discard changes" button for org profile subsection and
show "Save" and "Discard" button only when needed.
Also, there is so much code which become obsolete which is removed
in this commit.
We only have one possible email hint, so there's no reason
to create one for each stream row, especially since we don't
clean them out when we close stream settings.
Also, we remove unnecessary tips regarding modification settings.
Remove 'Only organization administrators can edit these settings'.
Remove 'Anyone in this organization can add user groups'.
Before this commit when we press enter in the text-input field the
first subsection get saved because a click event is triggered for
the first save button (of first subsection) irrespective of the
location of text input field in the whole form which is expected
as a default behavior of the forms.
The simple fix is to make the button of type "button" and override
action of "enter" in an input field.
More info at https://stackoverflow.com/a/12914700/7418550 and
https://stackoverflow.com/a/7060762/7418550
This makes each subsection of org-permissions independent from the
perspective of saving changes.
All the behavior we have for org-settings are also ultimately
reflected here as well like individual "Save" button for each
subsection, "Discard" button for discarding changes done in a
subsection and appearance of this button only when required.
This changes failed status element to use class
`.admin-realm-failed-change-status` rather than id so that we can use
the same code in `save_organization_settings()` in future to refer to
failed-status element of that section.
We restructured template to make org-permissions-template have more
separated subsections and so that we can easily apply event handlers
and selectors to their corresponding subsections (there will
be no change in UI).
(This is similar to 8b54b08)
This will reset the changes done in a subsection to the current ones
in page_params.
It will only appear when there are some user-provided changes to be reset.
With this "Save" button is only shown when there are changes in a
subsection. This means if we changed a setting and reverted it back to
original ones, then, "Save" button will get disappear. Hence, we're shown
"Save" when there are some property changes to send to the server.
This makes each subsection(like "Message feed") independent of changes
done in any other subsection and the save button of each subsection
saves the changes done in that subsection only.
Clicking the cancel button removes all the changes and the user
group returns back to the original state. Saved button is showed
once the changes are saved on blur.
This restructures the organization-settings-admin template into
different subsections. With this, we can easily limit the scope of
event handlers and selectors within their subsection to which
are applied.
There will be no change in UI because of this.
This makes it convenient to mention a stream you're not subscribed to,
which can be useful for communicating about where a topic is
discussed, for example.
Fixes: #5757.
Even if realm admin can access unsubscribed private stream subscribers,
admin can't add subscriber to stream. Hide the option to add subs to
stream in UI.
This will allow realm admins to access subscribers of unsubscribed
private stream. This is a preparatory commit for letting realm admins
remove those users.
This makes the textarea responsive by making the width 100% and
the max-width 500px so that it doesn't get *too* wide.
Please close#8511 when this is merged.
Fixes: #8504.
Previously, stream subscribers were not rendering correctly. Due to
following reasons:
- Subscribers list didn't get initialized
- Subscriber members template add subscriber-list-table DOM element
conditionally, which doesn't handle case if user have access to
subscribers later.
Fix this by cleaning subscriber member template to hide the
elements, instead of conditionally adding DOM elements and
initialize subscribers list even if user can't access subscribers.
If user unsubscribe from private stream, then user can't
access unsubscribed stream members.
After subscription removal, immediately render subscription members
template in case of user can't access stream subscriber.
Only allow realm admins to create stream without subscribing
themselves, restrict non realm admin users.
This new restriction is only for the UI; we don't actually block it at
the backend/API level (one could always create and then remove oneself
anyway).
Restrict users(even realm admins) from creating stream with zero
subscribers only in UI.
In backend, if subscribers are zero, we automatically subscribe
current user to stream.
Add div element to inform user whether stream is successfully
created or not. This will help to inform user in case if current
user is not subscribed to created stream.
For public stream, always show stream preview link.
For private stream, only show stream preview link if user is currently
subscribed or previously subscribed to private stream.
This removes `create-stream-dropdown` class from the template and css
because it is causing irregularity in size of other permissions dropdown
because of `right-margin` and removing it makes all the dropdown
regularly sized.
The former "the-bot-is-being-created" indicator was useless,
since it only edited the value attribute of the "create-bot" button;
that attribute only sets the text of a button when it is initially created.
This commit replaces the old code with a spinning loading indicator,
like the one used for editing bots.
This split notification settings to separate settings for streams,
PM/mention and other notifications settings.
Previously we have to treat them combined, but with this refactor,
we can treat them separately for future changes.
Fixes#8587.
The problem that prompted this PR is that I couldn't select the API
key of a bot in chrome to copy it, but I could on Firefox.
Using the `auto` proerty value to override the `user-select`
property of a parent does not seem to be compatible
with all browsers.
In `recipient-row` template, if conditions to add/hide/show edit
icon for message topic is incorrect.
In some cases, we only want to just hide the edit icon, but icon
should be in DOM, cause in future if organization settings are
changed we want to show edit icon in message row.
If user can edit topic of message, surely add edit icon element to
DOM regardless of user is allowed to edit or not. If user is
allowed to edit then show edit icon otherwise hide edit icon element.
This makes it easier for users to tell how Zulip ended up with an
avatar for them without them uploading one: through the Gravatar
service used across many Wordpress blogs.
Fixes#8225.
In stream deactivation modal, make "stream_name" a template variable,
rather than patching stream name to modal header in javascript.
Add tests for deactivation stream modal.
This replaces the cumbersome system we had for giving users feedback
on settings state changes in the display settings UI.
We expect this new system to be what we will attempt to migrate other
settings widgets to match over the coming weeks and months. It also
provides the opportunity to significant refactor away a lot of the
code duplication in settings_display.js.
Thanks to Brock Whittaker for redoing the styling and improving the
code simplicity.
Fixes#7622.