Using the existing tooltip template for the other "add emoji reaction"
element in message_controls results in the keyboard shortcut being
shown and avoids doing work to translate the string for every single
message containing emoji reactions.
Using different punctuation for the aria-label from the tooltip is
silly. Additionally, we don't need to repeat the channel name in
aria-label; it essentially will never be seen and the message list
copy of getting the channel name was buggy.
Earlier tooltip info for the default topic menu notification option
had static string to display.
This commit changes the string info and includes channel name and its
corresponding privacy icon to display in the tooltip.
Earlier tooltips for topic menu button had inconsistent context with
that of other tooltips. In topic menu tooltip, action was described in
first line which different from that of other tooltips.
This commit changes the tooltip context and rearranges them to match
the format of action on first line and more context on second line.
Using "*" selector is inefficient as they require checking every
element because of the browser's bottom-up matching process.
This commit instead updates the selector to use individual
classes for elements to apply the CSS rules keeping in mind
to use unique class names instead of general class names.
This commit fixes the overflowing issue for long bot owner names in the
user card popover, and also repositions the bot owner user card popover
to align with the bot owner name on the bot user card popover.
This adds the `LONG_HOVER_DELAY` delay to the user card tooltips, which
prevent the tooltips from becoming distracting when the user is just
navigating the popover.
Previously animated images were automatically played in the
message feed of the web app.
Now that we have still thumbnails available for them, we can add a new
personal setting, "web_animate_image_previews", which controls how the
animated images would be played in the web app message feed -- always
played, on hover, or only in the image viewer.
Fixes#31016.
We use different text for guest users, specifying that they can
only search in channels they can view.
The issue description suggests the same for spectators, but
we already use different text for them.
The search-operators help overlay is also updated with the same.
Fixes#30902
This commit removes the popover from the "+" button shown in the closed
compose UI at mobile widths, and instead performs compose actions
directly on-click. The "+" button now opens the compose box with the
channel picker open (even if the user is in a topic or channel view).
This reduces the number of clicks required to start a new message from
the closed compose UI in mobile views, and makes the behavior more
consistent across all the views.
Fixes#30634.
Fixes#30918.
This commit also adds a paper plane icon under `send-dm.svg`. `dm` is
used instead of `direct-message` to opt for brevity when using the
icons.
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.
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.
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.
When an administrators create channels that they are themselves
not initial subscribers, a channel creation confirmation banner
is displayed in the settings panel.
This commit updates the term "stream" to "channel" in the banner.
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'.
The "Dense mode" checkbox is renamed to "Compact mode" and is used
to toggle between changing the font-size and line-height settings
between 14/122 and 16/140 configurations.
Earlier in search suggestion, has: operator returned two different
suggestion string which were `messages with one or more links` and
`messages that contain links`.
This commit changes this to a consistent suggestion string.
Fixes: zulip#30908
All the buttons in settings have become rounded but these were still
square with no border-radius. Added the `rounded` class for them to have
the standard border-radius.
This change help us stay consistent with usergroup section by providing
unique IDs for each section. Before we have classes for the section
elements, but now instead of adding unique classes to each
section element we add IDs, that make more sense.
All 3 properties of `.small` were being overriden by
`#lightbox_overlay .media-actions .button` and the class is no longer
needed there.
The other selector still uses rem, so it might be good to revisit this
and see how 14px/16px scaling currently works on those buttons.
Preparatory commit for #30895.
For buttons in the compose box using `.small`, all properties except
min-width were already being overriden in compose.css. So we added
`min-width: inherit` to compose.css and remove the `small` class.
Preparatory commit for #30895.
It's likely that service is undefined which results in
error while loading the template. We should check if the
service and service.config_data is defined or not to avoid
throwing errors.
This is a prep commit for removing `nav nav-list` classes from all
popovers.
The send later modal, although not being a popover specifically, was the
last place in the code still using `nav nav-list` classes.
Fixes#30776.
`.advanced-settings-status` was being used at a few places for User list
status, that's why it's been replaced with
`.information-settings-status`.
We've renamed `get_all_preferences` to
`information_section_checkbox_group`. We've also converted it from a
function into a dictionary since it doesn't contain any page_params
variables anymore. This is a preparatory commit for adding a new
`Information section` as part of a layout change for this page.
`high_contrast_mode` was part of the checkbox group obtained by calling
`get_all_preferences`. For the new layout change, it will not be a part
of that group and this is a preparatory commit seperating it out from
that group. We will also rename that checkbox group in future commits.
These values were only a part of `DisplaySettings` type objects. We're
moving them out of these type of objects to be a standalone object of
its own. This will make it easier to reference in the next few commits
when those `DisplaySettings` objects would be broken down into different
sections.
We've excluded the new function from coverage since there's not much to
be tested there and similar settings functions do the same.
Previously, when the email was successfully copied via the email copy
button, the email in the user card popover was replaced with a "Email
copied!" message.
This commit replaces this behavior with a more subtle approach, where
only the tooltip of the email copy button changes to "Copied!".
This commit extends the user card popover redesign to the case where
the guest is not allowed access to view some of the other users'
profiles due to a change in the
"Who can view all other users in the organization" permission.
Fixes#27338.
As part of the popover menu redesign, this commit redesigns the user
card popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
We do not allow wrapping text randomly for user role values,
but since bot owner names can be long we do not want to do
that for bot owner column. So, this commit removes the
user_role class which is responsible for adding the required
CSS rule for role values.
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.
This commit adds "progressive-table-wrapper" class so that
the width property is correctly set and UI is correct for
narrow screens. Also, other properties added by that class
are fine.
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.
Fixed#29894.
We were using `is_active` to determine whether to show that column or
not. In case of deactivated table, on reactivating a user, `is_active`
will become true for that user, but we still don't want to show that
column and mess up our layout. Same would happen in the active users
table when a user was deactivated and the `is_active` would become
false. It is better to control the column to be shown on a per-table
basis and we introduced `display_last_active_column` to control that.
Co-authored-by: shubham-padia <shubham@zulip.com>
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.
`.change_password_button` and `#pw_change_link` were unused.
I've not checked for any other unused classes in this page, only
the password field. This was noticed when trying to make a layout
change for the password field and the change was moved to a preparatory
commit for the same.
This enables the stream popover for spectators, by unhiding the triple
vertical dots button in the stream sidebar row.
In the spectators' version of the popover, we only show the
"Copy link to channel" option.
Fixes part of #30529.
Now that the channel name in the left sidebar links to the topmost
topic, we add a new menu option that lets us copy the channel feed link
to the clipboard.
Fixes part of #30529.
This commit reorganizes the channel actions popover to group related
actions together.
As noted by Alya Abbott in CZO, the logic behind the grouping is as
follows:
* The top section is things you might do as part of your workflow for
using Zulip.
* The second section is for managing the channel itself.
* "Change color" is kept independently in the last section because of
how the color picker takes over a big chunk of the menu when opened.
Fixes part of #30529.
Modified the `Select a channel below or change topic name.`
instruction in `move topics/move messages` modal.
It's not necessary and can be confusing when user does not
have permissions to change the channel and topic name.
1) On the `Move topic` modal, dropped the line
2) On the `Move messages` modal, replaced the
line with `Move messages to:`
Fixes#30055.
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.
User circles indicating their presence are now synced across
all the places they appear, except for:
- navbar_personal_menu_popover - since the status
there will never change.
- typeahead_ist_item - because it is short-lived.
Fixes#30536
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.
- Make more succinct; don't over-describe UI the user can't see yet.
- Remove links (there are help links in view descriptions now).
- Explain where topics come from.
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.
This new section was added in ea2d92d934.
This bug caused settings in this section to not be disabled even when
the user lacked permissions to be able to change these settings.
Clicking on the name of a stream in the left sidebar
now navigates to the top topic in the left sidebar
view of that stream, rather than an interleaved view.
Added an "interleaved" button to the stream popover row in the
left sidebar that appears only when the user hovers over it.
Fixes#26937.
Co-authored-by: Aman Agrawal <amanagr@zulip.com>
Fixes#22113.
The search will only be visible when in the `more conversations`
view. Once we click `back to channels` and close the
`more conversations` view, the search will clear and the search
box will disappear.
We've chosen `pm_list_data.get_conversations` as the function
to which we will pass our search term. We could have technically
found the value of the filter element via JQuery in pm_list_data,
but pm_list_data does not handle any JQuery and we should keep
it that way.
`pm_list_data.get_list_info` also accepts the search_string so that
the info it returns in expanded view is accurate.
We've also added some code to `click_handlers` to make sure that
clicking the search input does not bring us into the DM narrow.
In a2ef1d7e93, we made changes so
that when you send a message, your view jumps to the conversation
where you sent it.
For some users it was an improvement, few reported that it
disrupts their workflows.
This prep commit adds a setting which will be used to allow users
to decide whether to automatically go to conversation where they
sent a message.
We clean up unnecessary nesting in this commit and replace one
usage of `#direct-messages-sticky-header` with
`#direct-messages-section-header`. Since `.direct-messages-container`
was being used along with `#direct-messages-sticky-header` at multiple
places, just removing the nesting would break those selectors. For those
selectors, they have been refactored to just look for
`#direct-messages-section-header` instead. `.direct-messages-container`
specific selectors still exist but they apply to both instances of
`.direct-messages-container`, the DM header and the DM list.
While the TODO comment we deleted in left_sidebar.css says we need to
rewrite both show more and show less button to grids; show more was
already a grid.
There have been some very slight changes in the actual size of the back
to channels row; those changes make the row more consistent with the
rest of the left sidebar rows in terms of sizing.
We've introduced a new class called `.hide-more-direct-messages-text`
that applies the same properties as the `span` selector used to. We are
using a class because of better performance when selecting, see
https://chat.zulip.org/#narrow/stream/6-frontend/topic/CSS.20selector.20performance/near/1845719
for more info on the why,
The `font-size` was moved inside the above class, so that when setting
the line-height of the anchor component, the `em` refers to the normal
font size and not the smaller font size for `back to channels`.
We've moved the link inside `.direct-messages-section-header` and most
of the grid properties are inherited from that element.
This is a preparatory commit to introduce DM filter in #30332.
Previously, when a referrer's invitation to Zulip was accepted,
they got a notification from notification-bot indicating
their invitation has been accepted.
This commit adds an option for referrer to decide
whether he wants to receive the direct notification
from the notification-bot.
Fixes: #20398
Earlier, in left sidebar, clicking on followed topic icon would narrow
to the topic.
This commit introduces the ability to open topic status menu from
left sidebar from followed topic icon.
Fixes: zulip#28941.
Fixes position of unsubscribed icon so that it appears in the same line
as the list item of the typeahead and prevent typeahead to increase in
width when the icon is shown.
Objectives are to make the width of overlay scale with font size and
reduce too much gap between text end of first column and
text start of the other column.
As part of the popover menu redesign, this redesigns the playground
links popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
Fixes#29825.
Clicking on remove button will not delete the row anymore. We will
add a strikethrough to the user pill and email text. `Remove` button
will change to `Add` on click to undo this action.
Re-adding a user explicitly should will not undo the soft remove on
their row. e.g If `Iago` was added as part of a group and crossed out.
Now, adding another group with Iago as part of it should not undo the
soft remove.
We maintain a seperate set of soft removed users, but we will not
remove those users from the main user list on clicking `Remove`.
That list can only be modified by actions with the input pills.
We will subtract the soft removed user ids from main user id list
when sending the request to add subscribers to the new channel.
I've not added extra puppetteer tests, since adding users was
not part of the existing tests.
Instead of displaying contextual options in the message buttons popover
based on the message type, we instead abstract the logic behind the
scenes and instead just show the "Start new conversation" with the
relevant hotkey hint.
This also removes the `is_in_private_narrow` parameter which now serves
no purpose in the popover template, as we display the
"New direct message" option in all cases.
As part of the popover menu redesign, this redesigns the mobile message
buttons popover using the new "popover-menu" tippy theme and improves
accessibility by using appropriate ARIA attributes.
Fixes part of #28699.
This commit standardizes the naming of the day and night themes to light
and dark, respectively. This makes the codebase more consistent with
the naming used in the settings and the user interface.
Standardize theme selection across the web app by replacing separate
light/dark theme menu options being used in the spectator view with the
new 3-way theme switcher.
Fixes#30318.
In this commit, a help center link to follow-a-topic and mute-a-topic
has been added in SETTINGS / NOTIFICATIONS > Topic notifications
so that users can understand thier options.
Fixes#30562
Apart from the normal (collapsed) and full screen sizes, a new expanded
state with the same size as the maximum a normal compose box can stretch
to when full (40% of the screen height) is now available. Now a user can
expand the compose box without it covering the full screen with a click.
The vertical resize icon in the bottom right corner of the compose box
is rendered useless so has been removed.
All three states can be cycled through by clicking the compose resize
button in the order: collapsed -> 40% of the screen -> full screen. When
a message naturally causes the compose box in its normal state to expand
up to 40% of the screen, clicking the resize button will take it to full
screen state.
Fixes: #29966.
Since we don't want col_focus to be on the time column as we don't
track it in recent view, we simply mark it as an element user
cannot focus to avoid any confusion.
The elements which received focus didn't have tooltips attached to
them, thus when blur was triggered on `a`, the tooltip didn't hide
as it was not listening on it for the blur event.
We move the toolip to `a` elements so that when focus and blur
are triggered tippy is able to capture them.
The row of buttons is placed using CSS grid template areas so that
visually it is now inside the bottom edge of the textbox. The color of
the buttons row and individual buttons is changed to match the color of
the textbox. All textbox border / box shadow properties are now applied
to its parent instead which is extended under the buttons' row, so that
its border snuggly fits around the buttons row too.
Notable side effects:
- In dark mode the textbox in focused state now has a light border which
does not match the recipient input's current border which doesn't change
when focused. Likely, the recipient input should be updated to match the
textbox's border color.
- The dividers in the formatting buttons row are not vertically centered
now. This should be figured out soon.
Fixes: #28702.
The space wasn’t visible because it was narrower than the padding on
`.rendered_markdown time`, but it showed up in copy-and-paste.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This style is currently only used for search suggestions. Soon,
styling for those suggestions will become more specific, and so
for now we'll keep those styles in search.css to be more clear
about what the new styles affect. If we want to repeat something
like this in the future somewhere else in the app, we can come
up with a generic styling then once we have a better idea of
what that will look like.
Removes some CSS rules used in the invite user modal that were
already being applied via the shared `modal_select` class.
Co-authored-by: Lauryn Menard <lauryn@zulip.com>
Fixes#30403.
Having tabIndex set to 0 led to keyboard focus being put on
a scrollbar container, which led to users having to tab twice
to skip a container.
This commit also removes instances of tabIndex being set to
-1 programatically for certain cases, since it is -1 by default now.
This commit also removes `outline: none` for simplebar since
that property is not needed anymore because the wrapper is
not focusable anymore.
Rename `show_all_private_messages` to `show-all-direct-messages`.
We've also hyphenated the attribute during the rename.
Part of the private_message to direct_message rename project.
Karl Stolley
Tim Abbott
evykassirer
Pratik Chanda
Sahil Batra
Sayam Samal
roanster007
Kislay Verma
Shubham Padia
Prakhar Pratyush
sujal shah
Aditya
afeefuddin
Aman Agrawal
adnan-td
dhruv-goyal-10
iks1
Alya Abbott
tnmkr
shashank-23002
Vector73
Sayam Samal
codewithnick
N-Shar-ma
Anders Kaseorg
sanchi-t
Ujjawal Modi