Commit Graph

233 Commits

Author SHA1 Message Date
aryanshridhar 7c588d4747 dropdown_list_widget: Add support for Multiselect dropdown list widget (MDLW).
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.
2021-07-29 10:09:03 -07:00
sahil839 4b1313a92b models: Replace add_emoji_by_admins_only with add_custom_emoji_policy.
This commit replaces boolean field add_emoji_by_admins_only with an
integer field add_custom_emoji_policy as we would also add full members
and moderators option for this setting in further commits.
2021-07-27 16:41:22 -07:00
Tim Abbott a5eb3abc52 css: Fix settings alignment for dialog widget modal. 2021-07-14 13:32:26 -07:00
sahil839 fd55df9f7c settings: Use dialog_widget for bot-edit form and remove edit_fields_modal.
This commit changes the bot-edit modal to use dialog_widget instead of
edit_fields_modal.

This commit also removes edit_fields_modal module as it is no longer used.
2021-07-14 13:02:26 -07:00
sahil839 c87c4f92ee confirm_dialog: Rename variables and classes used in templates.
This commit renames the variables, functions used in confirm_dialog.js
and classes and ids used in confirm_dialog.hbs.

This change is made so that we can easily migrate edit_fields_modal to
use this same code with some more changes.

We will change the file names and correspondingly import variables in
the next commit.
2021-07-14 12:21:24 -07:00
Tim Abbott 718caf453e move_topic_model: Fix the line-height of dropdown-toggle button.
Our dropdown-toggle buttons are meant to have the same size as select
elements, but looked weird if you selected a stream with non-English
characters in its name.

We fix this by copying some styling details settings from our common
input/select styling.

Fixes #18479.
2021-07-07 17:46:24 -07:00
sahil839 8fe401c38c confirm_dialog: Rename confirm_dialog_yes_button class.
This commit renames confirm_dialog_yes_button class to
confirm_dialog_submit_button. This will help in keeping
a general class name when deduplicating the code for
confirm_dialog and edit_fields_modal.
2021-07-06 15:15:50 -07:00
sahil839 7eb183fdf7 settings: Move presence-enabled setting to 'Account & privacy'.
The presence setting is more suited in 'Account & privacy'
section as it is not related to notifications in anyway
and resembles privacy of user by allowing user to hide
his status of being online.
2021-07-05 14:27:56 -07:00
aryanshridhar f41692d032 table-sticky-headers: Add z-index CSS property to table headers.
Previously, there were cases where the table contents started to
overlap with the table heading when scrolled down the table.
This was mostly visible in `Custom Emoji` organization UI,
where the images and action table column contents started to
overlap with the table headers.

Rectified the bug by adding a CSS `z-index` property to
`table-sticky-headers` class which takes care of all
such overlapping issues.

Fixes #18906.
2021-07-01 12:19:53 -07:00
sahil839 b94d6c1a20 settings: Move timezone setting from display settings to profile.
The user timezone is only used for user's profile, so we can
move this setting to the Profile panel of settings and this
will also help us in covering some space when there are no
custom profile fields for the organization.
2021-06-30 16:56:03 -07:00
sahil839 bb816e1998 settings: Separate "Your account" section in two different sections.
We separate "Your account" section to two different sections -
"Profile" section for user name, custom profile fields, and avatar
and "Account & Security" section for email, password, role, api-key
and deactivating button.

Another important change here is that the modal for changing name
is removed and now the name has a simple input text box and it
behaves similar to inputs for custom-profile-fields.

Fixes #18848.
2021-06-30 16:56:03 -07:00
sahil839 1cb72c77fe settings_users: Rename user-name-form to edit-user-form.
This commit renames user-name-form to edit-user-form as
the modal for which this id is used, is used to edit all
the user properties, not only name.
2021-06-28 22:11:24 -07:00
Tim Abbott e76fd775ba settings: Remove unnecessary ancient table styling.
This effectively reverts d96d4e30ab,
which is a bug that hasn't been present for other reasons due to past
design changes.

It fixes a bug where the "Search operators" page had missing margin
between the table and post-table content..
2021-06-28 09:14:09 -07:00
sahil839 0b8b7c4441 settings: Use edit_fields_modal framework for user-info edit modal.
This commit modifies the user-info edit modal to use newly added
edit_fields_modal framework.

Fixes a part of #18417.
2021-06-24 16:55:23 -07:00
sahil839 b04647f219 settings: Use edit_fields_modal framework for linkifier-edit modal.
This commit modifies the linkifier-edit modal to use newly added
edit_fields_modal framework.

One important change is that we remove the "edit-linkifier-status"
element as the corresponding "edit-fields-modal-status" element
is added in edit_fields_modal.hbs and we also modify the css
accordingly. This "edit-fields-modal-status" is used only for
this modal and remains empty for others, so this change does not
cause problems with other modals.

There is another element which uses "edit-linkifier-status" as a
class, but the css we defined was for "edit-linkifier-status" as
id, so the css change is also safe.
2021-06-24 16:55:23 -07:00
sahil839 98bb0f7b28 settings: Show spinner inside the confirm button for confirm_dialog.
We show a spinner inside the button instead of hiding the button
and then showing the spinner in the bottom area. We also disable
the button to avoid repetitive clicking by user.
2021-06-24 09:48:42 -07:00
m-e-l-u-h-a-n a57aa07a6d css: Extract modal related css rules.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:50:55 -07:00
Anders Kaseorg 5d64c21c38 styles: Globally set font-size and a unitless line-height.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
Tim Abbott 6a7d4d96c5 settings: Fix size of dropdown_list_widget elements.
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.
2021-06-11 16:58:52 -07:00
Tim Abbott 1298b4a0d2 css: Remove font size hardcoding of save/discard button. 2021-06-11 15:08:14 -07:00
Tim Abbott ff93176743 css: Remove special font size for settings errors.
These errors look fine with our normal font size, and it's one less
thing to potentially test.
2021-06-11 15:08:14 -07:00
aryanshridhar 418c40b2ea settings_users: Refactor user_deactivation modal to confirm_dialog module.
The "email" span in the old modal was not used for styling, just to
support updating the field visually.
2021-06-08 17:57:27 -07:00
sahil839 d8c4b96b12 setting: Divide user_invite_restriction into a checkbox and dropdown.
This commit divides the user_invite_restriction setting dropdown to
a checkbox and a dropdown.
The checkbox is used for 'realm_invite_required' setting and dropdown
for 'realm_invite_to_realm_policy'.

This separation of UI elements is fine as these two settings are
separate in database also and also helps in removing excess if-else
conditions and switch cases.
2021-06-03 18:45:29 -07:00
Priyank Patel 75034bb767 settings_orgs: Add hover like effects on focus for save-discard buttons.
This uses the same effect as hovering over the button when they are
focused using keyboard shortcuts such as Tab or Alt + Tab.
2021-06-03 12:41:10 -07:00
Tim Abbott 61e1f5eb37 settings: Use consistent dropdown widths for permissions. 2021-05-13 08:42:24 -07:00
akshatdalton a3930d8804 edit_linkifier: Improve UI for error message display on modal. 2021-05-12 20:32:35 -07:00
Tim Abbott 831b7ca965 css: Fix style for buttons that are just a pencil icon. 2021-05-09 20:29:06 -07:00
akshatdalton 43aee21dcc linkifiers: Add frontend support to edit linkifier.
A modal is added to edit the realm linkifier which
supports ui_report error.

Puppeteer tests to verify linkifier update and an
invalid test to verify that linkifier error messages
are reported on the modal are added as well.
2021-05-09 20:12:25 -07:00
Sumanth V Rao a510dac024 settings_playground: Add UI to create a new playground.
The design of the form is similar to the linkifiers page
and is styled similarly.

The introduction text for "Code playgrounds" is improved
with more details and examples.

Also, we can remove the hardcoded playground and the fix
we had previously done to prevent breaking the hardcoded
playground.
2021-05-04 11:39:33 -07:00
Nikhil Maske 0023f7f9a0 settings css: Make HTML table headers sticky.
Introduce a new class "table-sticky-headers" in the settings
and organisation settings HTML table tags and it is used
to make the table headers fix at the top. This commit also
add the background-color and hover properties to the
settings and organisation settings table to make them look
similar to the recent_topics_table.
2021-04-30 08:19:47 -07:00
Megamind 84db1e9737
frontend: Fix overflow of alert-word-status-text in narrowed window. 2021-04-28 09:34:30 -07:00
Aman Agrawal f47e93481e giphy: Set rating according to realm_giphy_rating.
We set rating of GIFs retrieved from GIPHY according to
realm_giphy_rating setting. Also, we allow user to set
a rating in organization settings.
2021-04-28 07:07:36 -07:00
Tim Abbott 63e3d3dd36 settings: Capitalize notification sound names with CSS. 2021-04-27 16:43:28 -07:00
Tim Abbott ebcd587ee5 settings: Use consistent width for account settings modals.
The password change modal, in particular, was way too narrow to
display its error messages comfortably.
2021-04-23 15:01:37 -07:00
Gaurav Pandey e80ddfe4e6 settings: Add show password feature to forms in settings modal.
Fixes part of #17301.
2021-04-23 15:01:37 -07:00
akshatdalton b9a318485c bots settings: Stop modal from getting closed when an error is shown.
This commit fixes the issue of error message not getting
displayed when the `Full name` field, in bots settings, is given
a duplicate name of an already created bot with the same name.

We were closing the modal each time whether the request is
successful or not. Hence, we now close the modal only
when the request is successful and error is displayed on
the modal otherwise.

Fixes #18091.
2021-04-13 11:42:36 -07:00
Anders Kaseorg d84727ce7f styles: Use Source Code Pro as our monospace font.
Fixes #15993.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
aryanshridhar 134a6f8bba edit_bot: Fix dropdown username capitalization.
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.
2021-03-30 16:14:42 -07:00
Abhijeet Prasad Bodas 9223dced3b refactor: Rename filter to linkifier in frontend code and docs.
This only leaves `page_params.realm_filters`, which
will be changed in further commits along with the
API change.
2021-03-15 11:19:59 -07:00
Josh Gilley de74d2fd7c settings: Use HTML table for "Alert Words" for better icon alignment.
"Alert Words" is one of Zulip's oldest settings UI elements, and as a
result is buggy.  This commit converts it to use our standard
progressive-table-wrapper system used for settings tables, which has
the side effect of fixing a bug that mad ethe tables look pretty bad
if one adds a very long word.

Fixes #17172.
2021-03-05 14:38:56 -08:00
Aryan Shridhar bfefec31f4 Revert "edit_bot: Fixed dropdown username capitalization."
This reverts commit ea02d48e81.
2021-03-03 23:58:50 +05:30
Riken Shah 70bc5ba6f2 settings: Make account settings more responsive.
The textarea in Settings/User Profile was overflowing in
smaller width devices.

This commit fixes that issue by adding appropriate media queries.

Fixes part of #16817.
2021-02-26 07:59:01 -08:00
Anders Kaseorg fa191b9912 Revert "stream-ui: Change view from 2-column to 1-column at width 992px."
This reverts commit 34ada11448.

That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-26 07:52:47 -08:00
aryanshridhar ea02d48e81 edit_bot: Fixed dropdown username capitalization.
Restructured edit_bot to unwrap label tag from the
control group, hence defaulting to original text size.
2021-02-24 13:50:29 -08:00
Ganesh Pawar 34ada11448 stream-ui: Change view from 2-column to 1-column at width 992px.
This prevents the elements to go on a newline on iPad sized devices.
2021-02-23 15:17:33 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal 1b34f689a6 settings: Use sm_max for adjusting settings for small width devices. 2021-01-25 14:49:32 -08:00
Aman Agrawal 65db0aeb98 settings: Use 425px as breakpoint for seperating api key buttons. 2021-01-25 14:49:32 -08:00
Aman Agrawal e4389b7562 settings: Remove dead code.
This code has no effect on the checkbox in settings overlay.
2021-01-25 14:49:32 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00