Now that we show the \vdots icon while the actions popover is open,
there's a weird looking behavior where a focus outline appears around
the \vdots icon, only if you clicked on the icon itself, not its
square containing click arrow.
Disable this unintended behavior, which disrupts the otherwise
simulated state where focus is in the popover (but no row is focused).
The color for the message control buttons is set in the
`message_control_button` class. The `reaction_button_visible` class
also sets a color declaration with the same value.
This commit removes this declaration because it doesn't change the
color of the reaction icon(the class is currently only used in
conjunction with `message_control_button` to toggle the button
visibility) nor does it override any inherited style (hover color
remains the same regardless) as it lacks an `!important` rule.
This commit fixes the issue where the 3-dots menu icons on the left
sidebar disappear even though the associated popover is open by
toggling a special CSS class on the menu item. It follows the same
approach used by the emoji picker on the message feed UI.
Fixes #23157
This commit enables the 3-dot menu to be visible while the associated
actions popover is open using the fact that the 'has_actions_popover'
class is attached to the message with an open popover. This approach
solves the bug without any additional JavaScript code.
Fixes part of #23157
Previously, we had some special CSS for the user profile modals in the
case that there were no custom profile fields, to do things like hide
the <hr> divider between the normal profile fields and custom ones.
The design has for some time treated custom profile fields as just
additional profile fields; so there's no longer a need for custom CSS.
While going through the full profile of a user, we expect to find
that specific user's in-depth details. Thus, we should have a fixed
title displaying the name at the top of the modal to establish the
connection of the profile data with the user.
We also fix the tab switcher between "Profile/Streams/User groups" to
the top of the modal, for the added convinience of switching across
the three options at any point of time.
Fixes#22984
Add an `@` icon in unread topics where user is mentioned.
We track a new set of `stream_id:topic` pairs for the unread mentions
so that recent topics instantly knows if a topic is unread and mentioned
or not.
We seem to override this setting for most of the dropdowns, so this
common CSS only applies to the smaller dropdown shown to logged-in
users, where it was weirdly wide.
User's name with status emoji was overflowing its container,
resulting in overflown text to not be converted into ellipsis
and pushing status emoji out of visible area.
This commit adds private messages to the Recent topics view, to make
it an all-encompassing overview of recent activity visible to the user.
We add a filter "Include PM" to toggle whether PMs should be shown in
recent topics.
Fixes#19449.
This is not the right fix for this, but a temporary adjustment
to make it look good with minimal impact on other languages and
other pages.
Right fix would require changing the structure of the button, which
was not easy to do and make it look similar to how it looks now.
It was not possible to scroll to the bottom of the list on
narrow-width when only single column was displayed on the
settings overlay. This commit fixes the height of the sidebar
and set to "100% - height of header - height of tab-container"
which fixes the scroll behavior.
This is not a issue for two-column overlay where height is set
to "100% - height of header" (the tab-container is already
inside the header).
This duplicates some CSS to avoid using "!important". While doing
this duplication, we remove "margin: 0" and "display: block" since
these are already set as default values.
Fixes#22876.
There is some old CSS that was only being applied to some buttons
and not others. This deletes those lines so that only the opacity
changes on hover and not also the color.
Following up from #23059.
We now disable the topic or stream input in move message modal if
user is not allowed to edit them. Topic input can be disabled only
in the modal opened from message actions popover since permission
to edit topic depends on message and we do not have any message
when we open topic from left sidebar since the message is fetched
from server while submitting.
This commit also does some changes to call ".trim()" on new_topic_name
only when it is undefined. new_topic_name can be undefined when
the new topic input is disabled because "serializeArray" only
considers enabled inputs.
Following the addition of support for custom profile fields in the
user info popovers, we redesign the popover to have a cleaner look.
* Switch top section design from centered to left-aligned.
* Move mute/unmute and manage user options behind a \vdots menu.
* Move the local time and status into a new block.
Almost all design changes ideas are from discussion on chat.zulip.org;
see "#design > pronouns in profile card" for details.
Co-authored-by: evykassirer <evy.kassirer@gmail.com>
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Because some button text is much longer in different languages,
there is an existing bug when the charts are rendered with the
range selector buttons positioned on the right side of the chart.
This positions the range selector buttons to the left side of the
chart and the hover information to the right side of the chart.
For the pie charts and horizontal bar chart, the grouping buttons
labeled "Me" and "Everyone" are moved to the top of the chart, which
matches the grouping buttons on the vertical bar charts.
Adjusts some chart margins for new positioning of buttons and hover
information. Deduplicates some shared code for rangeselector buttons
in `stats.js` for the three vertical bar charts.
This was a regression introduced in the commit
a80500cf5d
where we forgot to change the color of for unread PM date rows
while change the color for the date row of unread stream messages.
We already offer this for stream messages, but had been blocked on
adding it for private messages for visual design reasons. The dark
theme had a natural place to put this, since it had a box around the
private message recipient box; but the light theme didn't.
We add a border to the light theme private message recipient box to
allow us to add the same button to private messages, and implement
that button.
Fixes#21962.
Adds a section to the top of the stats page for organization
summary statistics. Also, adds the first two statistics to that
section for total users in the organization and users that have
been active in the past 15 days.
For some reason, the CSS declared a different background color for this element
only with a narrow window media CSS query. Change this color to the default
background for the rest of this modal.
Fixes#22991.
We change the id and name of message delete limit dropdown to
"id_realm_message_content_delete_limit_seconds" and
"realm_message_content_delete_limit_seconds" respectively.
This is a prep commit for sending only changed settings in
message editing section to the API.
We change the id and name of message edit limit dropdown to
"id_realm_message_content_edit_limit_seconds" and
"realm_message_content_edit_limit_seconds" respectively.
This is a prep commit for sending only changed settings in
message editing section to the API.
The implementation is simple, we just check if the
the message sender is a notification bot to decide if we
should show the read receipts list.
We also update the modal content styling to match the padding at the
top of the modal.
Fixes#22905
"Add a new bot" tab from personal `settings > bots` moving this
into a modal form, so we can trigger this form from other places
too without duplicating the code.
Fixes part of #20309.
Custom profile fields table `CSS` changed to fit the new "Display"
column of checkboxes, checkboxes are for select/deselect custom
profile field to display in profile popover.
New option "Display in profile summary" added in create and edit
custom profile fields form, with the help of this the user can
pick max of 2 custom profile fields except for `LONG_TEXT` and
`USER` fields to display in his user profile popover.
Checkboxes will go in a disabled state, with an explanatory tooltip,
if we've already passed the limit of 2 fields with this setting
enabled.
Fixes#21215.
Displaying custom profile fields in user profile popover, as mentioned
in the issue.
In `popovers.js` filtering out only those custom profile fields, which
are not `LONG_TEXT` or `USER` fields and their values are not empty.
Custom profile fields rendering in profile popover the same way use
similar rendering logic as in the user's full profile modal.
Fixes: #21215
This commit can display a full user profile modal for bots too,
by clicking on "View Full Profile" in the profile info popover
same as normal users.
Fixes part of: #21402
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
This was added to avoid the `owner` dropdown field from being
only partially visible in the `Manage bot` modal. But, now the
`owner` field is moved up in the modal so this isn't needed.
Updates references to keyboard keys in the help center docs to use
`<kbd>` HTML elements, which also means updating them to be as the
key would appear on a keyboard.
Previously, uppercase and lowercase letters were used to indicate
when/if the `Shift` key was being used, and even that was not
consistent throughout the documentation.
For CSS styling, adds a similar rule for `<kbd>` elements that is
used in `/static/styles/app_components.css`. And updates the CSS
class used in `/static/js/portico/help.js` for `adjust_mac_shortcuts`
accordingly.
Also, takes advantage of revising these pages for making small
updates for current help center documentation practices.
Adds a legend to the "org-registration" fieldset where the user
inputs info about the new organization. Previously, there was only
a legend for the "user-registration" fieldset. Also, increases
the opacity of CSS rule for the legend color so that they are
more visible.
Removes the hint text about what the organization URL value is
used for since it is pretty clear from the field's name.
Added a user_list_style personal user setting to the bottom of
Settings > Display settings > Theme section which controls the look
of the right sidebar user list.
The radio button UI includes a preview of what the styles look like.
The setting is intended to eventually have 3 possible values: COMPACT,
WITH_STATUS and WITH_AVATAR; the final value is not yet implemented.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
There will be one more follow up commit to this, that will
add support for editing memberships of user groups and will
complete preliminary version for user group edit settings.
Follw up for #22214.
This commit moves "dependent-block" div inside the main
setting "input-group" div as the custom input is part of
that setting only. Also this will help in further refactoring
of settings code which will be done in next couple of PRs.
There are no changes visually, the space between settings
and inputs remain same.
Change the background-color of all unread count pills in dark theme
to have 1 consistent type of color in complete application,
similar to how we have in light theme.
Fixes#21358.
Simplebar sets tabindex for `simplebar-content-wrapper` which
makes it focusable. The outline which comes with it when focused
is annoying, so we remove the outline.
When a user clicks on a link it triggers `:focus` and an
underline is displayed. This is not intentional.
Also, for keyboard users, we have a surrounding outline box
for focus, so this underline is redundant in that case too.
Disables submit buttons on billing / upgrade page for demo
organizations since they will need to become permanent
organizations before upgrading to Zulip Cloud Standard.
Also creates an alert banner on the same page that links to
the help center article on demo organizations.
Updates sub-headers on demo organizations help center
article to match link text and to follow general convention
of using imperative verb forms in help center subheaders.
Part of #19523.
Co-authored by: Lauryn Menard <lauryn@zulip.com>
Fixes#21716.
By allowing users to view drafts that are addressed to their current narrow,
we hope to help them more easily find and continue previously drafted
messages.
This commit adds a header above the plain text view of the digest to
be more clear about what the user is seeing.
A bit hacky, but the page is an internal development tool.
Fixes#21165.
Adds step-by-step instructions for mobile app users including the
corresponding image icons for the buttons that they should tap on
their screen.
Makes individual SVG image icons, for the help center docs, available
in `/static/images/help/`, instead of importing the entire set of
icons as dependencies.
Adds the icons for the "PMs" tab from https://feathericons.com, and
"Checkmark" and "Send" buttons from https://materialdesignicons.com.
Adds a new nested CSS selector to `.markdown img` so that the default
white border for images does not get applied to these icons.
This is preparatory commit that does basic UI set up for
user group edit in group settings overlay. This allows us to
write proper hashchange logic for user group settings overlay
under diffrent situations.
The work in this commit will be extended in further commits
to add proper UI and group edit logic.
Add support for creation of user groups using right panel
of new user group settings overlay being developed as part
of https://github.com/zulip/zulip/issues/19526.
In further commits we will add support for editing user
groups using right panel of the overlay.
This commit also introduces a minor bug related hashchange
for #groups which would be a quick fix once we have UI
for group edit on #groups overlay.
This is a preparatory commit to set up basic UI for right panel
in user group settings overlay. At this point we only ensure
the proper display of the two panels under different screen sizs.
Actual functionality for user group creation and user group
edit will be added in subsquent commits.
Dedicated overlay for user group settings is added as part of
addressing zulip#19526.
The newely added overlay is currently empty and more UI
related to settings is to be added in further commits.
Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.
The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.
Fixes: #20267
The "Subscribe to more streams" widget has always had this tension
between "Subscribe" vs. "Create" in a way that felt like whatever we
wrote could be confusing. To address this, we enhance the component to
advertise whether additional existing streams that the user can
subscribe to actually exist or not.
- When the user has N>0 streams they can subscribe to, we display
"Browse N more streams".
- When the user has no streams they can subscribe to (i.e. they're
already susbcribed to all the ones they could join) but the user has
permission to create streams, we show a "Create a stream" link.
- If the user doesn't have permission to subscribe to or create any
streams, we don't show a link at all.
Fixes#21865.
Co-authored-by: Jai soni <jai_s@me.iitr.ac.in>
This was caused by an interaction with the controls being positioned
absolutely -103px from the right edge of the element, which is clearly
a hack.
Replace that with a simple `float: right` construction, with the top
padding aligned.
Fixes#22512.
In 84e307581f, we removed the HTML that
these CSS rules applied to. (We incorrectly only tested that commit in
desktop sizes).
Also, the width: 100% rule both did not have sufficient priority to
apply, and also exceeded the size of the input. Fix this with a hacky
!important, since there's a good chance we'll replace these inputs
with a modal or something.
Adds an API endpoint for accessing read receipts for other users, as
well as a modal UI for displaying that information.
Enables the previously merged privacy settings UI for managing whether
a user makes read receipts data available to other users.
Documentation is pending, and we'll likely want to link to the
documentation with help_settings_link once it is complete.
Fixes#3618.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
We show tooltip for user read receipts setting mentioning
that the organization has disabled read receipts setting
when an organization does so. We hide the tooltip when
organization read receipts setting is enabled.
We also fix the alignment of "i" icons with label and headings
at various places by moving it 1 pixel below. There may be
some places where it is not fixed, but those will be fixed
separately.
The text inside save/discard widget buttons was misaligned with
respect to the icon in the button. To align it properly, we add
vertical-align and a reduced line-height property to the span.
Fixes: #20583.
Resolves the issue by aligning the buttons with the text.
It's not entirely clear why text-bottom is the correct alignment, but
visually it seems to be correct.
Fixes: #20583.
* Remove likely useless use of `controls` Bootstrap class.
* Remove outer control-group elements, which just added 10px bottom margin, and
were always used with .no-margin, which removed that margin :).
* Rename message-edit-timer-control-group to message-edit-timer, since
it isn't a control-group.
* Remove Bootstrap `form-horizontal` class and !important override
required by it.
* Standardize on 10px bottom margins; this fixes subtle bugs in some
sizes.
Previously, we had you select where to send notifications before
specifying which messages you're moving, which seems like the wrong
decision hierarchy.
Fixes#19973.
The stream list left sidebar currently has 3 sections:
* Pinned (+ Muted pinned streams)
* Active (+ Muted active streams)
* Inactive streams
Previously, these sections were separated by horizontal lines, which
did not provide an easy way to discern why there were sections. We add
labels to these section dividers to help with this.
Additionally, within each section, we now sort all muted streams to
the bottom, so that they general minimal clutter.
Fixes#19812.
This allows this component to follow existing design patterns, rather
than being its own unusual element with various quirks.
The implementation is approximately the same as before I just migrated
"Edit custom profile field" form into modal, like "Add new custom
profile field" form modal.
Fixes: #21634
This lets us remove this fairly ugly user interface widget, which was
inconsistent with the rest of the settings UI.
The implementation is approximately the same as before I just migrated
"Add new custom profile field" form into a modal, status update
notifications about these forms will be displayed inside their modal,
and made some little design changes as discussed on CZO.
Fixes part of: #21634
Since we updated the bot edit form opened from "Personal"settings
section to be same as that opened from organization settings
section, we do not require this file anymore.
Fixes: #22033.
We mention about sponsorship in upgrade banner to non-business
organizations. The message for business organizations is same
as before.
There is no explicit hover behavior for banners for org types
other than business, as banners are not themselves links in
such cases and only parts of text inside the banner are links.
Fixes#22161.
Originally, DEFAULT_NOTIFICATION_STREAM_NAME was set to
"announce" and we also showed warning in frontend when
user was composing message to "announce" stream and if
the stream had more than 60 subscribers.
But we changed DEFAULT_NOTIFICATION_STREAM_NAME to "general"
in d46b125bf2. That commit did not remove the frontend code
for showing warning and this commit removes it since there
is no "announce" stream by default now, and we would not
want to show warning when sending to "general" since that
stream could be used for many discussions and it would not
be nice experience to show warning everytime.
On registration and login pages on self-hosted Zulip servers,
it is not helpful and confusing to show the full navigation footer
for the Zulip website. Instead, we should show a minimal footer.
Fixes#21776
When some value is very long as in the case of a long email address,
the text used to flow and hide under the profile avatar. We want the
values to be seen at all times, even if they need to be broken into
multiple lines.
The user status appears out of place among the profile fields and thus
placing it under the avatar avoids any discontinuity between the profile
fields. This also adds the status icon beside the user status.
The placement of the avatar on the right makes the full profile modal
UI consistent with Settings > Profile UI. This also helps the custom
profile fields appear more in line with the default profile fields.
Fixes#21805
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.
Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
Removes the `mac-cmd-style` CSS rule that was introduced in
d3e8348 when support for updating keyboard shortcuts with
the `Ctrl` key to the Mac cmd key, `⌘`, was added.
Removing the rule makes the font-size and font-family CSS more
consistent with other keyboard shortcuts in the documentation.
Also, removes the parameter in `adjust_mac_shortcuts` that added
the CSS class / rule to these specific keyboard shortcuts.
New shared `table-striped` CSS class, adds top and bottom side border
already, so adding only left and right side borders to subscribers table
head to avoid weird looking borders.
Making `table-striped` CSS block as a top level shared CSS inside
`app_components.css`, trying to make use of this block on every
table and also removing some dublicated CSS.
Follow-up of #21144
Removes CSS rule that added a left margin and padding to not
first-child paragraph elements and `codehilite` class div elements
in ordered list elements.
Rule was added in 2017 and likely was correcting the alignment of
these elements due to another CSS rule that has since been removed.
The PR changes the following behaviors and UI:
1. Removes the checkmark button to mark the topic as read in
"Recent Topics".
2. Make the unread messages counter be the button for marking
all messages in the topic as read. The unread messages counter
is made clickable and tooltip is set to "Mark as read".
In "recent_topic_row.hbs", remove the checkmark button and add
classes and attributes to ".unread_counter" to give it desirable
behaviour on clicking.
In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read".
In "recent_topics.css" we set the background-color of unread counter to
hsl(105, 2%, 50%) to decrease fading of unread counter.
Fixes: #21654
Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.
So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.
Fixes a part of #19449
Set the default_language as cookie and reload the page so that
the spectator can immediately see the language change in effect.
We can reload the page forcefully for spectators since there is
no chance of any work being lost. It is possible that the spectator
may lose the selected message on doing so.
This requires a new dependency, to be able to set cookies from
frontend JavaScript.
Fixes#21961
We add `padding-right` to input field so that input do not overlap with
`x`and add `text-overflow: ellipsis` to make overflow less jarring.
Fixes#19765
This'll be shown only when in a different narrow from what
you're composing to.
Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.
We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548
Thanks to Vlad Korobov for the icon and for proposing various
designs.
There are two tangled issues addressed here:
* We were weirdly using a scaled up copy of fa-angle-up, rather than
fa-chevron-up, for a chevron up, for the expand/collapse widget.
* We were previously using × for the close icon, which had
visual and scaling issues next to the fa-angle icon.
Fixes#20403.
The commit fixes the issue in which the settings sidebar would
overflow into the settings header when scrolled; it also adds
border-box model to minimize calculations and magic numbers.
This changes recent topics to be consistent with our other tables. The
valus are copied from the common settings CSS for tables.
Ideally, we'd just share the CSS, but the existing table CSS is deep
inside a .settings-section CSS block, and it's a bit of a refactor to
share it.
Fixes: #21140.
Instead of setting `disable` attribute to the elements, we make
them look like disabled and remove interactions with them. This
helps us keep the hotkey handling logic for navigation easier
to manage.
Fixes#21279
Previously, these buttons were centered via flex, which meant that in
the rare case that a long list of private message recipients caused
the recipient area to line-wrap, these icons would be incorrectly
placed at the vertical center of the now multi-line block.
Fix this by setting an auto bottom-marging.
Fixes#21693.
For user who is not an administrator.
Also implemented a banner that notifies the user if they can edit
the following settings (name/description and stream permission).
Also increased padding-top of stream header by 10px. This change is done
to increase vertical spacing between the banner
and the stream header.
Fixes#20001.
This is especially to add more space around the globe icon since
it wider than lock icon, so the previously set padding for the
stream icon has to be increased.
This change was motivated by the addition of status emoji to the buddy
list. Previously there was no spacing between the status emoji and the
unread count, and as such, this commit adds a left margin to the
unread count.
The above change has an additional consequence, long user names such
as "Othello, the Moor of Venice" get truncated with ellipses, instead
of reaching to the edge of the unread counts (as they previously
would).
While the 2px value that we had previously chosen looked alright for
most emoji (😀, 😃, etc) some emoji such as 🐙
used more of the width available to them and as such still looked too
close to the user name. As such this commit bumps the value to 3px
(4px was a bit too much space).
We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.
Fixes#19840
At the moment we fit only a single image per message per line. This is
wasteful of space as multiple images can be accomodated per line on
widescreen displays. This commit modifies the rendered_markdown
stylesheet to make this possible.
The comments detail various technical considerations.
Fixes#20975.
Previously, the maximum width for the topic input in the compose box
was artificially limited to 20% of the width of the compose box.
While this may have had some useful role in encouraging short topics,
we can teach that idea in other ways, and it seems more helpful to
have the input length match what works well for viewing topics in the
left sidebar without being cut off.
Improved the contrast of ? and i icons by changing their opacity to a
consistent 0.6, going to 1 on hover.
Changed the colour of playground icon by testing and added spacing
between title and the playground icon by changing the icon margin.
With some TODO comments added by tabbott for readability.
Fixes part of #20484.
Close buttons are misaligned if the warning banner text takes up two lines.
We increase the specificity of the selectors to ensure that this CSS
overrides Bootstrap.
Fixes#20839.
The upload spinners for all of the image upload widgets were in
wrong alignment due to the use of magic numbers to center them.
This commit replaces the above mentioned approach with the use
of flexbox to fix alignment issues across all the image upload widgets.
Due to differences in length of the words for different languages
there were alignment issues in the organization profile settings.
This commit uses flexbox to ensure that the alignment stays correct
for any changes in language/word length.
Fixes#21385
Tim Abbott
Eyuel Berga Woldemichael
Aman Agrawal
Akarsh Jain
Julia Bichler
sayamsamal
Yogesh Sirsat
rixant
madrix01
Sahil Batra
evykassirer
Mateusz Mandera
Ganesh Pawar
Lauryn Menard
Taiki
Steve Howell
Riken Shah
aadiljaleel
Raghav Luthra
Purushottam Tiwari
jai2201
Het Patel
Eeshan Garg
nickgiann
David Rosa
Oliver Pham
N-Shar-ma
Dinesh
Rishabh-792
Biki-das
anurastogiji
Anders Kaseorg
om2137
Alex Tereschenko
Alya Abbott
NerdyLucifer
somesh202
Adam Sah
Sdrummolo
Palash
YashRE42
ditsuke
SantamRC
My-Name-Is-Nabil