Align the `dropdown-widget` and `<select>` UIs.
Removed default `<select>` tag styles with `appearance: none` css.
Added custom chevron-down icon with `background-image` attribute
to the `<select>` tag.
The svg icon is used in a CSS variable with a data URI.
The CSS variable is used to set different colors for dark and light
theme.
Tweaked by tabbott to scope selectors appropriately and also delete a
10px font-size in one settings dropdown widget.
Fixes#26859.
This commit allows the user to change notification settings even though
the stream is muted and adds a line of text in stream settings and
notification settings.
Fixes#27272.
This switches to our preferred dash-separated classnames
instead of underscore-separated, and also updates the
classname to be differentiable from users that aren't
part of the current narrow.
Until the next commit that splits the buddy list, the
name is a bit inaccurate since it still contains all
the users.
This is a case where the use of alpha channels in HSL color values
shows its limits.
The use of an alpha channel is necessary for the background
elements for the top navbar elements, because they sit over the
top of the navbar's bottom border (actually an inset shaddow).
However, it's impossible to use the alpha-channel based color on
elements like the unread dot, where the border actually sits on
top of the element itself--meaning that the effect would be a
larger dot with an imperceptibly darker ring around it.
What this commit does is use a technique suggested by Anders
Kaseorg for using CSS's `color-mix()` functional notation to
calculate an opaque version of the alpha color for use on
elements that do not or cannot directly take the color with
the alpha channel.
See CZO discussion:
https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102
This fixes a state where the expanded left sidebar appears under
the navbar at the smallest mobile views.
It also provides a stop-gap fix for the right sidebar's USERS
heading, making it align better (but certainly not perfectly)
with the left sidebar's.
3ac0c3c401 incorrecly removed
specificity declarations needed to prevent that CSS from applying to
the right sidebar, which hasn't been properly prepared for this
change.
This brings modern alignment methods to all vdots instances,
including in views, streams, and topic rows.
This also aligns the vdots in the condensed view row with
all the others in the left sidebar.
This is according to Vlad's design in figma which differs from the
style we have in `tooltip-hotkey-hint`.
I used font-weight: 500 instead of 400 as it looked nicer and since
Vlad used Source Sans Pro as font-family which we don't have.
This helps us add elements like hotkey hint which can take more
space that available for text. There are no visual changes.
Removed some duplicate properties too.
Replaced element selectors with specific selectors, those that
remain are intentionally left.
This is to avoid inner-most selectors as element selectors.
The reason being is that browsers evaluate selectors from right
to left, meaning that every time a selector ends in an element,
the browser has to work that much harder whenever and wherever
on a page it encounters the element.
This slightly increases the size of the clock for recent
conversations, and descreases the size of the left-aligned icon
for all messages.
Icon sizes in the expanded view are left untouched.
This also introduces a combo grid/flex layout, which will also be
applied to the DM and Streams headings.
Because there are now multiple classes referenced from the
Puppeteer tests, those selectors now include the expanded
navigation area's parent ID selector.
We were using id before to increase their specificity, but
since it is possible for multiple empty_list_widget_for_list/table
to be in DOM at the same time, we should use a class here. Used
`!important` here so that we can force our padding where these
classes are used.
The CSS variables for heights in subscriptions overlay uses
"modal" word but we actually use overlays for subscriptions
UI, so this commit renames those variables to better names.
We use "modal-body" class in informational overlays and
"About Zulip" overlay. For informational overlays, the
class is used on the element acting as scroll container
so we just rename the class to "overlay-scroll-container".
For "About Zulip" overlay, we do not support scrolling
so "overlay-body" seems a better class name.
We only use "modal-footer" class in stream and user group
creation forms which is actually not a modal, so this commit
renames the class to a better name "settings-sticky-footer".
This is a UI experiment which change the regular and on-hover
colors of the green checkmark in All Streams UI to match the send
button of the compose box.
Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>
This commit changes the UI for subscribing to streams on stream rows
to be more like the mobile version (zulip/zulip-mobile#5333).
The current design made it hard to discover how to subscribe to
streams via left panel and is not very clear on the fact that
its not possible to subscribe to private streams.
To address this the following changes have been made:
- For unsubscribed streams, the on hover-checkmark is replaced by
a "+" which is always displayed and has on-hover highlighting.
- For unsubscribed private streams, the "+" is disabled.
- Tooltips with appropriate messages are added on the "+" sign for the
above 2 cases.
- A tooltip has also been for the on-hover checkmark for subscribed
streams.
Fixes: #22217.
Co-authored-by: Raghav Luthra <rluthra2002@gmail.com>
Add a personal menu dropdown that opens on clicking user avatar icon
in navbar added in previous commit.
The args passed to render_personal_menu() in onShow() are returned by
get_personal_menu_content_context() in popover_menus_data.js so that
they can be unit tested.
Additionally, added CSS to get a custom arrow for dropdown menu.
Added a `?` hotkey in keyboard shortcuts option in personal_menu
dropdown in a style similar to our tooltip's hotkey by adding
? in a span with class .tooltip-hotkey-hint and adding some CSS.
Fixes part of #22802.
This commit adds user avatar icon in navbar. This new avatar icon
will be used as dropdown toggle button. Made `.column-right` a flex,
every element in right-side navbar is in this div now rather than all
elements positioned absolutely with hardcoded values like before.
Fixed some CSS as per new flex layout if `.column-right`.
Fixes part of #22802
With the autocomplete dropdown, some users face trouble or uncertainty
while selecting topics. These changes adds a new indicator to the topic
typeahead dropdown while typing to the topic box. This ensures users
that they are on track and they are doing the right things. We also
suggest the current query even if it doesn't match a topic to continue
providing the new indicator.
Fixes: #23296.
- Adds desktop/web instructions.
- Adds #inbox relative link for logged-in users.
- Moves Inbox up in the left sidebar just under "Reading strategies".
- Moves Inbox article content to Markdown include.
- Adds "From the Inbox view" section to "Finding a topic to read",
"Getting started with Zulip", and "Reading strategies".
- Documents Inbox as a new option for the default web app view.
- Removes unused Markdown link.
- Tweaks subheading to better match help center patterns.
- Add Inbox option in "Configure default settings for new users".
- Adds new tabbed section and instructions for marking messages as
read and reading topics via the Inbox view.
Fixes#26903.
Co-authored-by: Alya Abbott <alya@zulip.com>
This commit adds code to add "(guest)" to user names of guest
users in the following places -
- right sidebar
- user pills, including the pills in search suggestion typehaead
- typeaheads for user
- sender names in message feed
- user profile popover and modals.
- user name in not subscribed warning banner.
Note that the indicator is shown only if enable_guest_user_indicator
setting is set to true.
As a result of this change, we now translate "deactivated" text
shown in user pills for deactivated users.
Fixes part of #26700.
This commit removes all instances of the `required-text` class,
which utilizes the `::after` pseudo-element to render empty list
message. To avoid inserting non-decorative content using a pseudo-
element, we will now use `list_widget.render_empty_list_message_
if_needed` introduced a few commits back to display the empty list
message.
Fixes#23072.
In order to eliminate the usage of `::after` pseudo-element for
rendering the empty list message, this commit introduces a new function
for displaying the empty user list message on the right sidebar.
This commit introduces a function in list_widget.js that allows
displaying a message when the list is empty using the `data-empty`
dataset. The function checks the container type to determine the
appropriate wrapper for the message and appends it to the container
body.
Fixes a part of #23072.
These changes adds a new scheduled message indicator in conversation views
which informs the user of the number of messages that are scheduled to be
sent to the current view.
Fixes: #25584.
Fixes#26823
Fixes user card not displayed on last item in the subscribers list.
This was happening because there wan not enough space below the
user name for the popover to be displayed (as far as I understand this).
Regardless of the fix above, this seems like a nice change.
This commit replaces all previous Font Awesome references in the
left side bar and relevant popovers with the custom Zulip star
icon.
Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
This commit renames the classes and IDs in the views area
(formerly global filters) to a set of flexible values all
prefixed in some way with `left-sidebar-navigation`.
This is meant to make the styles and structures in the area
more readable, while also keeping things flexible into the
future as this area's elements change.
Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
This is Prep commit that introduces 2 new CSS variable
`--color-background-unread-counter` and
`--color-background-unread-counter-popover-menu` that has value
`hsl(105deg 2% 50% / 50%)` in dark theme and `hsl(105deg 2% 50%)`
in light theme for unread counter and `hsl(200deg 100% 40%)`
for unread counter in popover menus to match its blue theme.
This is a Prep commit. This commit fixes the color of
`BACK TO STREAMS` label in the dark theme to be equal to other labels
in left sidebar such as `STREAMS` label.
This uses the banner message's line-height to set a
max-height on the action and cancel buttons to maintain
a consistent vertical spacing.
Additional uses of flexbox here:
1. help the button to remain shorter when it's adjacent a
single-line banner message, and
2. center the closing X icon relative to the current size
of the action button, when one is present
This also styles those inner .banner_message elements to lose
margin inherited from Bootstrap. (This is now also applied to
the upload-message banner.)
It's better to achieve that with a class selector; using a `p`
element selector would mean that such a style would be evaluated
for all `<p>` elements in the DOM. Which is of course a whole lot,
thanks to Markdown alone.
Fixes: #26922
`popover-content` class had no effect on emoji popover since
it was resetting `padding: 0` and background color was
already applied by tippy theme.
In short, removing `popover-content` had no visual changes.
Remove bootstrap-tooltip class `popover-title` from code.
It was only used in user_card_popover for showing user avatar,
so cleaned up properties that were duplicated or not required.
We use "modal-footer" class in stream and user group creation form
and this commit adds bootstrap CSS rules for it to subscriptions.css
so that we can remove the CSS from bootstrap.css.
We used "btn-primary" class only in integrations dev panel page
and this commit re-adds the CSS applied by this class in
integrations_dev_panel.css. We also remove the btn-primary class
since this is a bootstrap-specific class and we no longer
need it.
We now use micromodal in the modal on dev server emails page to
make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.
We now use micromodal in the license update modal on billing page
to make it consistent with other modals in the app and this is
preparatory work for moving away from bootstrap as well.
By replacing `<span>` tags with `<div>` tags inside the tooltip's inner
content we remove the redundancy of having to use break tags to
separate the tooltip's title and it's content.
We also replace any `<p>` tags with `<div>` tags for the following
reasons:
- Since what we want to achieve are just block elements in order to
avoid the break tags, using `<div>` tags provide use with a wider
scope of use cases.
- We don't want the pause, screen readers often introduce after reading
the contents of a paragraph.
- The `<p>` tag cannot contain tables and other block-level elements.
- The semantic meaning of the <p> tag doesn't apply to the commonly
used tooltip content.
Earlier when a user is deactivated or reactivated from users
table and deactivated_users table the `Role` column was modified.
This commit changes this and now `Role` column is not modified
instead now the corresponding row is greyed out.
Fixes#21653.
Adds warning banner to the organization settings overlay/tabs
for demo organizations. For owners, clicking on the link in the
banner opens a modal to convert the demo organization into a
permanent organization.
For admins that are not owners, clicking on the link will go
to the help center article on demo organizations.
Non-admin users will not see the warning banner.
The modal for converting a demo organization requires the owner
to have set their email address. Once the owner's email address
is set, then the organization can be made permanent by changing
the subdomain of the organization. The deletion date for the
demo organization will be removed as part of updating the
subdomain.
The organization owner must also have updated the organization
type to be any value other than unsepecified to convert the
demo organization to a permanent organization. The modal's
submit button will be disabled if that is the value for the
organization type in the form. The demo organizations created
in the dev environment now have their organization type set to
unspecified on creation.
This is a part of #19523.
Co-authored by: Lauryn Menard <lauryn@zulip.com>
On hovering the not-selected option in the left sidebar
topic popover widget to change visibility policy, a wiggle
effect was observed.
This commit fixes the wiggle effect.
This commit fixes the alignment of account-alert-notification-banner
by using a new classname 'account-alert-notification' for this specific
banner, removed the default margin-top and margin-left from this banner
which is set to all other banners, and Aligned the banner with
vertical-align property set to middle.
To left-align this specific banner when the email is long enough
to wrap to the next line removed the margin-left and used a new
classname 'account-settings-heading' for the accounts heading,
and gave a margin-right of 10px to ensure that the notice banner and
the heading have enough space between them, when the email is short.
If the email is long enough to wrap to multiple lines, then the gap
between the email input field and the banner is too low. To adjust
this, set the margin-bottom to 10px.
This commit fixes the issue where, if the content inside the alert
notification banner is long enough, it will wrap inside the alert
banner.
To prevent the email from spilling over in the notice,added the
'overflow-wrap' property set to 'anywhere'.
Fixes: #23653
This ensures uniform display and flexing of different bits of
banner content, including:
* Banners like Sent! Scroll down to view...) that have only a
classless `<p>` marking their content
* Banners like the unscheduled message allert, which puts a
.banner_content class right on the paragraph
* Banners like the Your message was sent to a stream you have
muted", which tuck a `<p>` into a div with the .banner_content
class
The bot settings avatar row was using `fa-clipboard` icon. Changed
the icon to use `{{> copy_to_clipboard_svg }}` SVG icon that is used
everywhere else in the app as copy icon.
Abbreviated long URL for custom field in the user profile modal
and user card popover. Added a copy-to-clipboard icon at
the end of the URL. When hovering over the copy button, it displays
a tippy tooltip with the text `Copy URL`. Clicking the copy button
displays a `Copied` tippy tooltip for 1 second.
Fixes#21680
This is a prep commit. This commit renames
`custom_profile_fields_link` to `custom-profile-fields-link`
to follow kebab-case, which is the preferred style in Zulip.
A formatting button below the compose box can format the selected text
by bulleting or unbulleting the selected (partially or completely)
lines. The behaviour is inspired by how GitHub's bullet list format
button works.
Also adds a new breakpoint for showing vdots for formatting buttons.
Fixes part of: #20305.
The internal design here was that we had no-select on the outer
element and auto-select on these inner elements to override it.
But, `auto-select` class seems to have no effect so we are
removing it.
This fixes a regression introduced in #26807, where a padding
adjustment spilled over to the privacy icon display in message
headers.
This fix should prevent future spillover by isolating left-sidebar
stream icon styles to just the streams list.
This commit includes fixes to satsify vertical alignment, which is
now solely handled by CSS Grid. The commit also consolidates styles
and selectors for the sake of both necessity and readabilty.
This seems to more accurately express the current, desired behavior
in topics lists, but it is a necessity for moving the vdots into
the topic box (otherwise, vdots clicks simultaneously register on
the topic box itself).
Changing `100vh` to `100%` makes the markdown div take up the full
height of the page, even when the page is scrolled. This fixes the bug
where the lower right corner of the page was not covered by the markdown
div and the background was visible.
This restores the styling previously added by commit
ceec61ba10 (#25573). The .scroll-target
class of commit b852da6eed (#25573) was
removed by commit 8dba4cbba6 (#15713,
merged later) and is unnecessary.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit adds a dropdown and custom input element to set the
`realm_jitsi_server_url` when the video call provider is Jitsi. This
allows organization administrators to add a custom Jitsi server as the
organization's video call provider.
Fixes#17914.
Co-authored-by: Gaurav Pandey <gauravguitarrocks@gmail.com>
This does not adjust any of the padding from a float-based era.
It's entirely possible that the status-preview area especially
deserves some further tuning.
With no existing class to reach this selector, this change
introduces a new `.inline-status-emoji` class on the Handlebars
template and in the main Zulip CSS file.
Because of the inline styling in the message sender row, this
specific instance of a status emoji needs to be presented as
an inline flex: that keeps the avatar image layout clean, while
also introducing the `align-self: center` vertical positioning
of the status emoji adjacent the username, which is itself a
bare text node.
This change paves the way to update how actual status emoji are
presented in sidebars, pills, etc., care of flexboxes, which
is previewed here by the inclusion of the `align-self` property.
So that the user can still select and copy text from the body of the
linkifier rows. It might be helpful if we extend this behavior to other
draggable rows, like those for custom profile fields settings.
Fixes#26798
Until now, lists with 3+ digit markers would have their beginnings cut
off to align with 2 digit markers. We fix that by having custom styling
for markers where we align markers only up to 2 digits, and let larger
numbers take up more space pushing the list item content forward as
required to fit the marker. Works for multiline and nested list items too.
The class `search-query` is a bootstrap classname, and using
a name unique from that both lets us rely on bootstrap less
and also not have to override some boostrap styles.
This commit adds code to show the "not-allowed" cursor when hovering over
pill input in "Add members" section if a user is not allowed to add members
to the group like we do for "Add subscribers" section in stream settings.
Previously the "not-allowed" cursor was show only when hovering over "Add"
button.
This commit adds simplebar to user group creation form and makes
it consistent with stream creation form.
This also fixes transparency issue in footer of group creation
form dark theme.
Fixes#24443.
This commit fixes placeholder text in the pill input for user
group members UI in "#groups" overlay to mention members instead
of subscribers. For this we add a new template instead of using
add_subscribers_form.hbs and thus this commit also updates
the class names used in javascript code accordingly.
This commit renames search-container class used in stream and
user group settings overlay to list-toggler-container since
the element does not contain search UI and instead contains
the toggler for "Subscribed" and "All streams" and similarly
for "Your groups" and "All groups".
This shifts the 8px of margin to the wrapper, preserving the space
to the right of the + icon, but no longer allowing it to shift the
hover state or trigger the tooltip when clicking actually activates
the search filter.
Fixes#11494 (at least the one fixable part; the rest should be
closed as wontfix)
This causes no visual changes, but it makes the grid definitions
more precise, while also reflecting that only two hover icons are
ever shown at mobile scales.
The use of grid and flexbox precludes the need for padding these
controls. Further, removing the padding corrects a sneaky grid
discrepancy between controls on messages with and without a
sender.
We add tabs to make distinction between the groups the user
is a member of and all groups in the realm. This is a preliminary
commit and there would be following immediate follow-ups to this:
* Persisting the active state of selected group in the left panel
as the list updates with search and thorugh tab toggles.
* Updating the display of group in the left panel list on membership
update events.
We replace the check icon for "Mark as resolved/unresolved" with
a spinner while the request is still ongoing.
This helps to prevent double-clicking and reduce possible
race conditions.
Fixes#26190.
A spinner is shown when the request is in progress
for inline topic edit.
Earlier, the spinner was not visible in the dark theme.
This commit makes it visible by setting a different fill color
in the dark theme.
This expresses the colors for vdots icons in just three variations,
all as CSS variables. The colors are all derived from the existing
design, and the dots colors in the streams/topics area was used as
as reference. The only visual change here, then, is to the global
filters area, whose vdots were the outliers prior to this change.
The three variations are:
1. hint: for touchscreens where a :hover state is not available
2. visible: for all screens when a parent element is highlighted
3. hover: for when the vdots themselves are hovered
The selectors have been streamlined to use the .sidebar-menu-icon
utility class, and the hover-within-a-hover color on vdots is
expressed more directly, eliminating the need for
selector-specificity busting via !important.
Fixes: #20600
The deleted CSS around the `.zulip-icon-ellipsis-v-solid` class
has no impact on the hover controls, as flexbox and grid are
handling baseline alignment, not this one-off line-height.
Karl Stolley
Aman Agrawal
Anders Kaseorg
ecxtacy
Prakhar Pratyush
Pratik
evykassirer
Vector73
Sayam Samal
Tim Abbott
Sahil Batra
m-e-l-u-h-a-n
Hardik Dharmani
Joelute
David Rosa
Hemant Umre
Alex Vandiver
Ujjawal Modi
Eeshan Garg
Satyam Bansal
palashb01
N-Shar-ma
Daniil Fadeev
Karl Stolley
Zixuan James Li
evykassirer
YashRE42