This commit refactors the code for dropdown list widget settings
such that we can reuse the added functions for further settings
that will use dropdown_list_widget.
This change will be helpful when we will add group-based settings
and change some of the existing role-based settings to be group-based.
We add a new function "get_widget_for_dropdown_list_settings" to
get the widget variable from setting name. The functions to get
and set the setting value use "get_widget_for_dropdown_list_settings"
function to get the widget and then gets or sets the setting value
accordingly.
We also add "data-setting-widget-type" and "data-setting-value-type"
attributes to the element like other settings.
The "data-setting-widget-type" attr is used by get_input_element_value
to use "get_dropdown_list_widget_setting_value" function for
dropdown-list-widget settings.
The "data-setting-value-type" attribute is used to parse the setting
value to correct types in "get_dropdown_list_widget_setting_value"
function.
The 3 instances of dropdown_list_widget using the `label` property had
different design than the rest of all of our dropdowns, in that the
label was on the same line as the dropdown.
Fix this by adjusting the `label` option to use our standard
`dropdown-title` CSS class.
Also remove the colons in the labels.
I confirmed that these were the only instances of this widget using
the label feature.
Fixes#20415.
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.
Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.
Fixes#19888.
This commit adds the support to select multiple dropdown items by inheriting
dropdown list widget and overriding some of it's properties.
The parameters that can be passed along with it are-
- widget_name: The desired name of the widget.
- data: The data that needs to be populated as dropdown items.
- default_text: The default text to be rendered when none of the items is selected.
- on_update: Function to trigger once the filter button is pressed.
- on_close: Function to trigger once the dropdown is successfully closed after filtering.
- value: The default value that is initially selected by user.
- limit: The maximum number of dropdown items to display on button text.
This widget can later be implemented in recent topic view to replace the
several ellipses filter button and also within the organisation user's page
to quickly sort the users list according to their org role.
We remove the small CSS class, which set the font size as something
tiny, and also restructure it with a fixed height and more natural
markup for the reset link.
Previously, when a user hits 'Enter' key within a input
field it incorrectly triggers the dropdown_list_widget's
reset button.
This is because the reset button had the default type attribute of
'submit' which triggers the click event binded to it. Fixed it by
explicitly defining it's type attribute to be a button.
Previously, when the user presses 'Enter' within a input
field while keyboard focus in is in the topic edit textbox
it incorrectly opened the dropdown list widget.
This is because the dropdown button had the default type attribute of
'submit' which triggers the click event binded to it. Fix it by
explicitly defining it's type attribute to be a button.
Fixes#18415
There can be several cases when we don't require a reset button
with the dropdown_list_widget.
Hence, Added an abstraction for dropdown_list_widget that
renders the button only if it's corresponding text is passed.
- Rectifies broken label tag having a misleading 'for' attribute.
- Removed 'name' attribute from unlabelled span tag.
- Removed label expression from DropdownListWidget to built an,
abstraction for control group only.
Fixes#17311.
Restructured dropdown_list_widget template to unwrap label tag
from the control group, hence defaulting the edit_bot
dropdown items to their original text size.
Fixes the following issues:
- Rectifies broken label tag having a misleading 'for' attribute.
- Removed 'name' attribute from unlabelled span tag.
- Removed label expression from DropdownListWidget to built an,
abstraction for control group only.
Fixes#17311.
This commit fixes the dropdown_list_widget to use simplebar for
scrolling.
It was not being used because data-simplebar should not be inserted
to the element being rerendered. This commit adds a new element
wrapping 'dropdown-list-body' which was being rerendered and
data-simplebar is added to that new element 'dropdown-list-wrapper'.
Also, there should always be a max-height property on data-simplebar
element and it is also added in this commit.
There is also a change to set margin of 10px only on the first div
element and which is direct children of organization-settings-parent
element. This is correct because we only want margin to add some space
between the heading of subsection and the first setting of that
subsection. Previously, the margin was being added to first div of all
the other child containers also and this was adding unnecessary margin
to the first div element of different simplebar containers.
We wrap the [reset] anchor tag in a button so that we can set 'disabled'
attribute on it. We change the styles to hide the [reset] button and the
pencil icon when the widget is disabled.
We also need to call `e.preventDefault()` in the event handler since now
the anchor tag behaves as a button.
We extract a general purpose widget to create dropdown lists with
search. This widget is used for default code block language, but can
be easily extended to cover notifications_stream and similar options.
The current usage is:
```js
const widget = DropdownListWidget({
setting_name: 'realm_alpha_beta',
data: [{name: 'hello', value: 'world'}, {...}, ...],
subsection: 'msg-editing',
default_text: 'Nothing is selected',
});
```
and
```handlebars
{{> dropdown_list_widget
setting_name="realm_alpha_beta"
list_placeholder=(t 'Filter the data')
reset_button_text=(t '[Unset]')
label=admin_settings_label.realm_alpha_beta }}
```
This can further be refined by shifting more variables from handlebars
to javascript in the future.
Sahil Batra
Tim Abbott
Arch0125
aryanshridhar
Aryan Shridhar
Aman Agrawal
Rohitt Vashishtha