This commit adds right padding, approximately equal to the
size of the sorting arrow, to the table headers which show
sorting arrows to make sure that arrows are visible clearly
at different font sizes and in different text languages.
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.
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.
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.
To increase the number of options available for the user to pick from,
we increase the limit of options shown to 50 for all typeaheads, and
make the menu scrollable. The max height is set to original height of
the composebox typeahead menu, which fit 8 options or to 95% of the
window height, whichever is smaller.
Fixes: #20620.
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.
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.
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.
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.
As part of the popover menu redesign, this redesigns the compose send
options popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes#25117.
As part of the popover menu redesign, this commit redesigns the user
group info popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
This commit changes the width of tabs in stream and
group settings to be set as per the text inside it
with the previous width being set as minimum width
to avoid tabs being too small.
Fixes#30672.
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.
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.
This supports adding users to DM pills by simply typing
a user's name in the text input directly after a complete
dm pill. It only works for DM pills at the end of search
input.
Clicking the X button removes a user from its user pill
container, and if that user was the last user left in the
container, then the whole container is also removed.
Previously, search pill overflow was broken (sticking out of the
search box to the right) and now the search bar extends vertically to
allow pills to wrap when there are too many pills for one line.
There's still a bug when opening the search bar where the input
isn't selected. But I'm not worrying too much about that because
that text is about to be replaced with pills.
At widths under 400px, buttons in the popover were running off the edge,
which is fixed by removing the dividers between them.
For the new info density, buttons in the original row, even despite
removing the dividers, were still not fitting, so their width has been
slightly reduced.
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.
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.
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.
Shubham Padia
Sahil Batra
N-Shar-ma
evykassirer
Sayam Samal
Aman Agrawal
Karl Stolley
tnmkr