Commit Graph

145 Commits

Author SHA1 Message Date
Sanchit Sharma 48b60db4a4 settings_config: Use `kbd` for `realm_enter_send` label.
Fixes: #29083.
2024-09-06 11:47:04 -07:00
Sanchit Sharma 671946351c settings: Improve visibility of "Enter Sends Message" setting.
Addresses user research feedback by duplicating the "Enter Sends
Message" setting in the Settings > Preferences menu, specifically within
the General section, ensuring users can easily locate and configure
this option.

server_events_dispatch: Remove break statement.
The settings page needs to be updated when
`enter_sends` property is updated.

css: Update vertical-align to middle for the checkbox element.

Co-authored-by: Akarsh Jain<akarsh.jain.790@gmail.com>.
2024-09-06 11:47:04 -07:00
Shubham Padia 1ec4539550 css: Rename .icon to .sidebar-item-icon for the name to be unique.
See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1901490
for more details.
2024-09-03 12:20:42 -07:00
Shubham Padia 2f120d2572 settings: Make show more tab look similar to other tabs.
Fixes https://chat.zulip.org/#narrow/stream/101-design/topic/org.20settings.20-.20show.20more.20-.20icon.20alignment/near/1935512
Also renames `.collapse-settings-btn` to `.collapse-settings-button`.
2024-09-03 12:20:42 -07:00
Shubham Padia 28d9c02479 css: Have `move-handle` for every movable row instance.
The original motivation was to remove the `+ i` instances because of
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1934360.
But it seemed better to have similar html structure and css across all
movable rows.
2024-09-03 10:22:44 -07:00
Shubham Padia 77ebdfac77 css: Use classname for show_my_user_profile_modal icon styles.
Having the selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
2024-09-03 10:22:44 -07:00
Shubham Padia 82b68e9bdb css: Use classname for play_notification_sound icon styles.
Having the selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
Also does some refactoring to account for the fact that
.setting_notification_sound does not have any icons as children.
2024-09-03 10:22:44 -07:00
Karl Stolley a8ecba8ab8 settings: Remove .new-style, unused .button ul selector. 2024-08-30 14:06:27 -07:00
Karl Stolley 7a94d484ff settings: Remove unused or unnecessary center classes from .new-style cluster. 2024-08-30 14:06:27 -07:00
Karl Stolley f98551f128 settings: Remove unnecessary .block from .new-style cluster. 2024-08-30 14:06:27 -07:00
Karl Stolley 0cfddc9874 settings: Remove .w-200 class from .new-style cluster.
All elements that use this have their width already superseded by
other selectors.
2024-08-30 14:06:27 -07:00
Karl Stolley 2e6a34042f settings: Remove unnecesary inline-block div.
This also removes the need for any min-width declarations on the
labels, which will behave as block elements and take up the
containing block's available width.
2024-08-30 14:06:27 -07:00
Karl Stolley 668660bc71 settings: Remove unused .warning from .new-style cluster.
This seems to have been used with the `password_warning()` function
in `password_quality.ts`, but that function does not appear to be
called in the app--only in the portico.
2024-08-30 14:06:27 -07:00
Shubham Padia f38fe78e53 css: Use classnames for settings page .sidebar li items.
Having the > ul selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
2024-08-30 10:23:19 -07:00
Shubham Padia 3afc34050b css: Use classnames for settings page .sidebar li items.
Having the `*` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
We've used `sidebar` instead of `sidebar-wrapper` for the rules in
dark-theme also, since that is the rule being followed for light theme.
We've introduced a new class called `sidebar-item`.
2024-08-30 10:23:19 -07:00
Shubham Padia 2081fb52a1 css: Use padding-top instead of putting margin-top on first div.
It has the same visual effect and we do not have to use a div selector.
Having the `div` selector there affects the performance. See
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more details.
2024-08-13 22:36:35 -07:00
evykassirer f7a27be0a8 settings css: Use classname for checkbox label instead of span. 2024-07-26 14:41:08 -07:00
Shubham Padia 629e6c701c settings: Fix eye icon misaligning with password input on small screen. 2024-07-17 11:05:59 -07:00
Shubham Padia e72b42ec13 settings: Add parent div to all input password elements in same row.
We had to specify margin-bottom as 10px separately for
`modal_password_input`, `password_visibility_toggle` and
`settings-forgot-password` classes. We've added a div that encapsulates
all these 3 elements which are meant to be in the same row and gives it
a common margin-bottom.
This is a refactor commit.
2024-07-17 11:05:59 -07:00
Shubham Padia 2778aa5b0e settings: Fix alignment of `Forgot it` for change your password.
We've removed the unused parent div. We've also removed the class that
was only being used in that div from zulip.css. We've attached a class
to the anchor element now and it has the same name as the class we
removed.
2024-07-17 11:05:59 -07:00
Shubham Padia a4f1c9fd9e settings: Convert password dialog box to use flexbox.
Fixes https://chat.zulip.org/#narrow/stream/9-issues/topic/Eye.20icon.20misaligned.20in.20Manage.20your.20API.20key/near/1890711.
The eye icon to show and hide password was misaligned in the 16px info
density mode. But since the icon was using absolute positioning to style
the icon, we took this chance to refactor the element to use flexbox.
We've renamed the `password-div` to `settings-password-div` for settings
specific styling. The eye icon was only broken in settings, and since
the settings and the login/signup stuff the same class was used at is
quite different from each other, it might be better to have two
different classes. The other `password-div` has not been refactored, it
might be better refactored in its own PR along with other similar
elements to use flexbox.
2024-07-17 11:05:59 -07:00
Sahil Batra 3980507599 settings: Do not allow last active value to wrap randomly.
We do not allow the "Last active" values in users list to
wrap at random breakpoints and instead wrap at end of the
words.
2024-07-16 14:52:29 -07:00
sujal shah fa16f7720f settings: Drop email column on narrow screens.
Since we access email through pills,to improve the
visibility on a narrow screen, if the screen width
goes below 'lg_min' or 992px drop the email column from users,
deactivated users, bots, channels, groups using a new classname
'settings-email-column'.
2024-07-16 14:52:29 -07:00
Shubham Padia 4207c985b2 settings: Fix Add channel button relying on min-width for padding.
Fixes #30674.
When having a bigger translation string, it was noticed that Add channel
button had no horizontal padding. But this wasn't true for a shorter
string. The button was using `min-width` as a proxy for padding. When
the width of the button went beyond the minimum 100px, the padding
disappeared.
`.new-style` properties will apply here for the standard button
styling, where the standard horizontal padding is important for the fix.
But we can't use the vertical padding of that class since we want the
button to align with the filter to the right of it which is smaller than
a standard button, so we set the vertical padding to 0 and give the
button a height of 30px. This height is used at multiple places to be
the same as the search filter, e.g. roles dropdown in users tab.
We've also changed the margin from 11px to 12px to be the same as the
filter on the right.
2024-07-15 12:43:06 -07:00
Sahil Batra 3fe8ad37df settings: Refactor css for users and bots table.
This commit makes the selectors for CSS applied to users
and bots table more specific since the classes used
before are generic and can be used at other places
as well.
2024-07-15 12:42:08 -07:00
Sahil Batra 413892ddb1 settings: Use more specific selector for file name CSS.
This commit makes the selector used to apply CSS to
file name column in uploaded files table more specific
as the class name used before is generic and can be
used at other places as well.
2024-07-15 12:42:08 -07:00
Sahil Batra 91cf69f6a1 settings: Set min-width of table columns for narrow screens.
This commit adds minimum width property for different columns
such that the columns do not get too small for narrow screens
and the tables can be scrolled horizontally to view the content.
2024-07-12 10:35:22 -07:00
Sahil Batra 9c9c8dc058 settings: Do not allow text to wrap randomly in some columns.
There are some columns where the text is not user dependent
and we know how long the text can be like user role, bot type
and custom profile field type. In such cases, we can just avoid
wrapping the text randomly.
2024-07-12 10:35:22 -07:00
Sahil Batra 9fab65f4b0 settings: Do not restrict width for table columns.
This commit removes width or min-width properties set for
different table columns so that the column width can adjust
themselves based on the text in different font sizes.

We still have the width property set on "actions" column
though to keep it at the right when a table has only 2/3
columns.

Further commits would be added to handle wrapping of
text in some columns and also to make sure that sort
arrows are visible correctly.
2024-07-12 10:35:22 -07:00
Shubham Padia 2becb41931 settings_users: Reactivated user should not get un-greyed on sort.
On reactivate or deactivate, we add appropriate class through JQuery.
But that class only remains there until sort, on sort any of these added
classes will be removed. We did not face the problem of un-greying for
active users page, because deactivated_users class was added to the HTML
always if `is_active` was false for the user.
In this commit, we rename `reactivated_user` to `active-user` and this
class will be present for all active users, even on the active users
table. For the deactivated users table, we will have scoped css that
will grey out the row with `active-user` class.
2024-07-11 12:16:12 -07:00
Shubham Padia 6c152b3adc account_settings: Make change password similar to other setting buttons.
Fixes #30691.
We've removed the pencil icon and renamed the button to `Change your
password`. We've also removed the `.small` and `.btn-link` classes.
We also changed the `Password` label to use the `.settings-field-label`
class, same as the other labels for settings.
2024-07-11 09:49:27 -07:00
Shubham Padia 73e9d9da64 account_settings: Make change email similar to other settings buttons.
We removed the pencil icon, `.btn-link` and `.small` classes.
We also changed the `Email` label to use the `.settings-field-label`
class, same as the other labels for settings.
2024-07-11 09:49:27 -07:00
Shubham Padia 6085212574 settings: Make change language button similar to other settings buttons.
We've removed the pencil icon and removed the `.small` class from the
button.
This setting button is being used in two places: Changing your personal
language and changing the org-wide language for emails. That is why
we have used the `Change the language` generic tooltip instead of
`Change your language` tooltip.
2024-07-11 09:49:27 -07:00
Sahil Batra c4d84d1e5c settings: Allow tabs in bots list to be wider.
This commit changes the width of tabs in bots panel
to be set as per the text inside it with the previous
width being set as minimum width to avoid tabs being
too small.
2024-07-09 17:12:47 -07:00
Sahil Batra 5704bf72e0 settings: Increase width of setting dropdown widget buttons.
We now do not restrict the width of dropdown widget buttons
so that the width can be increased when the font size increases
and also if the option selected is long due to langauge.

We have similar behavior for the select element except that
the width of select element is set according to the longest
option while for dropdown widgets the button width is set
as per the current selected value.

This change is only for group-based setting dropdowns in
organization, stream and group settigs.
2024-07-09 17:11:15 -07:00
Aman Agrawal 153f983b01 settings: Allow tab switcher text to expand to show full text.
Instead of showing ellipsis if the content of the tab switcher is
more than the width, we now allow it to take more width to show
full text.

If we don't have enough space to show the full text to show on
small screen sizes, we use ellipsis for overflowing text.

Increased sidebar width by 5px to accomodate full tab switcher
at both 14px and 16px font sizes.
2024-07-09 13:18:03 -07:00
tnmkr 6613efeca3 org_settings: Fix dropdown color in `Organization settings` section.
This fixes the text color for .dropdown-widget-button dropdowns both in
enabled and disabled state.
2024-07-09 13:11:53 -07:00
tnmkr fcade635f8 org_settings: Fix repeated css for `Organization permissions` section.
These `background-color` and `cursor` rules are not needed here as the
`.dropdown-widget-button` base class already defines these properties
for `:disabled` pseudo-selector and there is no need to repeat here
again.
2024-07-09 13:11:53 -07:00
tnmkr 92f5b7d86a app_components: Fix opacity for disabled .dropdown-widget-button.
This is a follow up to previous commit
fe0a068ee5. We want
`.dropdown-widget-button` dropdowns to look same as `select` dropdowns.

This commit fixes opacity for all `.dropdown-widget-button`, which then
makes repetition in `settings.css` unnecessary.
2024-07-09 13:11:53 -07:00
tnmkr 13c4f281ab css: Normalize opacity on `select:disabled` elements.
We are setting the opacity to Chrome's 0.7 because that is what most
select fields in Organization settings are styled for.
2024-07-09 13:11:53 -07:00
Sahil Batra d9da6d17e0 settings: Remove max-height for bots box container.
This helps us in avoiding the scrollbar inside the box
if the information density setting is set to 16/140 by
allowing the box to set its height as per the content.

There is no need for max-height since the height of the
box was anyways less than the max-height value set before
at normal font size and screen widths.

For narrow screens, the max-height property was set to unset,
so removing the max-height property does not have any effect
on how the bots are shown on narrow screens.

Fixes #30669.
2024-07-04 07:57:32 -07:00
Aman Agrawal 621ae91c70 settings: Use box buttons for download and delete.
Co-authored-by: Shashank Singh <shashanksingh@Shashanks-Air.mshome.net>
2024-07-03 16:53:39 -07:00
Sahil Batra d60075a8cf settings: Make the label for disabled checkboxes less faded.
This commit updates the CSS to makes the label for disabled
checkbox less faded such that it is faded enough to figure out
that the setting is disabled but the text is also visible clearly.
2024-06-27 09:18:39 -07:00
Sahil Batra 1fac997338 settings: Refactor CSS for "control-label-disabled" class.
We previously had two CSS rules for control-label-disabled
class, one in settings.css and one in subscriptions.css
and the rule in subscriptions.css was being used by all
the elements with that class.

This commit refactors the code to have only single CSS rule
for that class with the value being set to the one used in
subscriptions.css, because that was the one being used and
that also looks better in terms of design, and the CSS is
defined in settings.css since it can be considered more
general file for writing CSS used in organization/personal
settings along with stream settings.

This commit also removes the unused code for
".control-label-disabled.enabled" selector since we no
longer use that selector.
2024-06-26 14:22:47 -07:00
Karl Stolley 67b8b9e13a settings: Remove font size, unnecessary height from emoji file name. 2024-06-26 12:00:21 -07:00
Karl Stolley 5cd4a8c8e5 pills: Express pill-container spacing on base class. 2024-06-23 22:00:18 -07:00
PieterCK c4d20678e4 settings: Refactor css for notification table.
Add new app variable for .notification-table class.
This variable is responsible to set the tables' thead
background color in dark theme. Previously it depended
on a genral CSS rule in dark_theme.css for its thead
color, however that cluster of rule has been deprecated
in #29859.

Note: The `thead` background color for the notification
table in the light theme is transparent, so the new
variable in `app_variable.css` does not have a
corresponding value for the light theme.
2024-06-18 09:48:41 -07:00
Shubham Padia 8ab6e71593 settings: Unite user settings into a single panel.
Previously, there were three different sections for managing active
users, deactivated users and invitations.
This commit combines users section has into a single tabbed panel.

Fixes: #26949.

Co-authored-by: shashank-23002 <21bec103@iiitdmj.ac.in>
2024-06-17 17:16:21 -07:00
sujal 4dd8b258cd stream_settings: Restructure stream creation panel.
Removed the "Stream permissions" heading to simplify the panel.

Moved the "Announce new stream in {stream}" option just above
"Default stream for new users".

Implement a collapsible "Advanced configurations" section,
collapsed by default, to accommodate less commonly changed settings.
This allows for future expansion of stream permission configurations.

Fixes part of #29403.
2024-06-17 16:20:06 -07:00
Sahil Batra bf24d5b936 settings: Use common selector for dropdown widget CSS.
This commit updates CSS to use a common selector to set the
width and color properties for all dropdown widgets in the
"Organization permissions" panel as we expect all dropdown
widgets to have same width and color.

This helps in avoiding bug in UI if someone forgots to update
the CSS while adding a new setting using dropdown widget.
2024-06-14 17:11:23 -07:00