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.
By implementing a careful flexbox declaration on a new banner-
element container, this presents banners accessibly across the full
range of possible viewports--and relies only on a single, small
media query to do so.
Fixes: #25847
Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
Added a show_unread_counts personal user setting to the
Settings > Display settings > Advanced section which
lets user choose whether he/she wants to see unread messages
count on the left sidebar for streams.
This setting have three options,
"All Streams" - This will show unread messages count for all
streams.
"Unmuted Stream" - This will be default option and it will
only show unread messages count for unmuted streams.
"No Stream" - This option will not show unread messages count
on any stream.
Fixes#24149
Buttons which change the content in the compose textarea were so far
enabled even in preview mode, and would work, but those changes would
not be reflected in the visible preview. This is extremely confusing,
and can lead to the possibility of a user accidentally changing the
content of the compose textarea while previewing, and sending that.
Now we disable those buttons in preview mode, both when composing a new
message and when editing an existing one. We still show the tooltips,
but grey them out and make them unclickable.
Fixes: #20962
This commit adds the follow icon to the right end
(before the three-dot menu icon) of the topic list item
for followed topics.
The icon replaces '@' instead of showing both the '@' and "Follow"
icons in the case of unread mentions, as users don't care if they
are following a topic if they've got unread mentions there.
In a muted stream, the text color of followed topics in the topic list
is set to be similar to that of unmuted topics.
The reason is that the followed topic has a tier of interest above
being unmuted, so it shouldn't stay faded in the topic list.
This commit adds the CSS variable '--color-unmuted-topic-list-item'
for the unmuted topic's color in the topic list.
The color for both the light and dark themes is defined in
'zulip.css' and used in 'left_sidebar.css'.
This approach helps to remove the use of the selector 'unmuted_topic'
only for color definition in 'dark_theme.css'.
This commit unsets the padding of the bot icon and, as the anchor
tag has been replaced with the i tag, we have also set the color
and pointer. This is done so that when the user hovers over the
icon, it will appear as a clickable button.
This commit moves the bot icon to the left of the name in the user
profile and adds a margin-left and margin-right to the name to ensure
there is enough space between the icon, name, and edit pencil.
This commit redirects the edit pencil in the user profile modal to
the 'manage user' tab whenever a user with permission to manage
other users via the user profile opens another user's profile.
However, we still want to redirect the edit pencil to
'settings/profile' if the user opens their own profile. The user
management permission is granted if the user is an admin or the
owner of the bot. However, we do not want system bots to have
access to the edit pencil or the 'manage user' tab. Therefore,
a new variable called 'can_manage_profile' has been introduced
to manage all these permissions, and the CSS has been updated
accordingly.
To redirect to the manage user tab without opening another modal,
I have extracted the toggler. This toggler will store the
component, and if the edit pencil button is clicked, we can use
the goto function to redirect to a different tab.
Changed the id names of both the edit pencil icons to explain
better of what they do.
This commit increases the gap between the labels and input/select
of the user profile manage user/bot tab for clearer visibility.
It also reduces the gap between the 'deactivate user' button and
the last input to make it look better.
This commit fixes the inconsistent height of the user profile when
switching tabs. We now have four tabs in the user profile:
"Profile," "Streams," "User Groups," and "Manage User." However,
the "Manage User" tab has footer buttons that need to remain
sticky at the bottom without changing the overall height of
the modal.
To achieve this, we wrapped the footer inside a div element and
assigned it a class called "manage-profile-tab-footer." The main
body of the user profile is given a height of 60vh. However, for
the "Manage User" tab, we decreased this height to 52vh and
allocated the remaining 8vh height to the div element to
accommodate the footer buttons. This ensures that the user
profile maintains consistent height when switching between tabs.
However, we have a 1px border in the footer, so to ensure that
the height is consistent, we reduce the height of the modal
content by 1px, making it calc(52vh - 1px).
To implement this, CSS code was added to the "popover.css" file
and accessed through the class specified in the "user_profile.js"
file.
The default padding of the buttons inside footer is 20px, but
with the above solution on large screens the buttons are not
aligned properly, so removed the padding top and bottom
and instead applied the flex box and property to align the buttons.
With the previous commits, we have now implemented the subscribe
widget with a separate heading. However, the font size and the gap
of both the heading of the widget and the streams list look bad,
so this commit fixes that.
Since the heading of both the widget and the list have the same CSS,
instead of duplicating it, we used the same class for both and
reduced the font size.
This commit adds a subscription widget to the user profile,
including the logic to prevent non-admin users from seeing the
subscription widget of other users. Additionally, as it is not
possible to subscribe generic bots to streams, and the user should
not be a deactivated user, we check for these conditions before
displaying the subscription widget.
To ensure that the alert for both subscribing and unsubscribing
appears on top of the subscribe widget, changed the location of
the alert to be displayed at the top.
Additionally, considering that no stream will be initially selected,
we have made the decision to disable the subscribe button. Once the
user selects a stream, we will enable the subscribe button
accordingly.
Changed the add_user_ids_to_stream function inside subscriber_api.js
to support self subscribe also, so that we don't have to duplicate the
logic in user_profile.js
Created a separate file for the subscribe widget called
user_profile_subscribe_widget.hbs.
Fixes: #18883
By default, Tippys with the `data-reference-hidden` attribute aren't
displayed. But when we render them as centered overlays on mobile and
use `getReferenceClientRect` for a virtual reference, Tippy slaps this
hidden attribute on our element, making it invisible. We want to
bypass this in scenarios where we're centering popovers on mobile
screens.
Because demo organization owners do not initially have an email
set, some of the personal and organization settings in the web-app
UI should be disabled/hidden until the owner configures an email
address for their account.
Disables the dropdown for changing the user's email address visibility
in the account & security tab of the personal settings overlay until
the user configures an email address.
Because demo organization owners do not initially have an email
set, some of the personal and organization settings in the web-app
UI should be disabled/hidden until the owner configures an email
address for their account.
Disables the show/change API key button in the account & security
tab of the personal settings overlay if the user's email address
is not configured. A tooltip is shown when hovering over the disabled
button explaining why the feature is disabled.
This allows the select to flex, keeping the buttons position on
screen even at mobile-scale viewports.
While other most other controls are currently not so responsive,
this might provide some direction (along with a TODO) on how to
go about moving controls in that direction.
Fixes: #26563
Remove overflow: hidden from the body and overflow: auto from the
.markdown element. Adjust the scroll-margin-top on the heading
elements so that using the hash, the page opens at perfect
location. Add position: fixed to .sidebar so that it does not scroll
with the content.
For the mobile view, change the .sidebar right from 100vw to 100%.
Also change how the hamburger menu changes its position: use right
instead of left as that works better than translate combined with
left.
This improves upon a change introduced in #26279. But rather than
setting an `overflow` value, this uses `minmax()` with a 0 minimum
value--pushing back against the default grid minimum column value
of `auto`. The `auto` value will always try to fit the content
into the grid, even if that means wreaking havoc on the grid as
defined.
This commit lets us render popovers centered on the screen with a
background overlay. It's the same thing we did with Bootstrap
popovers, but optimized for use with Tippy.
The tabular figures in Source Sans 3 place a foot on the 1, and
overall just feel visually a little heavier than their proportional
counterparts.
To compensate for that, this takes advantage of the variable-font
properties of Source Sans 3 to subtly drop the weight to keep the
timestamp readable but not in fierce competition with the message
area.
This not only introduces a new gold color that works across light
and dark modes, but it also separates out the hover and focus-
visible styles for stars--regardless of whether a star has been
filled or not.
The :focus-visible selector is more appropriate here, as that
enables browsers to determine whether focus should be displayed
or not. That's generally the case with keyboard-achieved focus,
but pointers and fingers generally do not need focus to be
displayed.
By not displaying a different icon color on simple :focus, this
will also ensure that star icons behave predictably when hovered
or focused via keyboard in both starred and unstarred states.
This corrects for an issue where hover controls would remain
visible after multiple clicks on one of the hover control icons,
despite the mouse pointer leaving the area.
This does not really create a regression for keyboard focus, as
there is currently no reasonable way to get a Tab key into the
hover controls area.
However, if one clicks multiple times on the vdots icon, and uses
Tab to move back and forth, the icons still remain visible--thanks
to the mouse pointer still being in the hover area.
This introduces a new breakpoint. In the future, this kind of
round-about sizing will be made unncessary by container queries,
but while those ship in all modern browsers, their availability
is quite recent:
https://developer.mozilla.org/en-US/docs/Web/CSS/@container
This commit updates the admin custom profile fields table to be
similar to other tables in settings page. After this change,
the table will be horizontally scrollable for narrow screens
and the buttons in actions column will not wrap to multiple lines.
This increases the width of "Actions" column and it takes some
unnecessary space, but this will be handled in the next commit
which will adjust "Actions" column in all the tables.
The bottom border of heading row in striped (and not bordered)
tables was thicker than needed due to two borders being present -
one from the bottom border for heading element and one from top
border for the first row in the table.
This commit changes the CSS to remove the top border of the first
row.
This commit removes unnecessary CSS defined for tables using
table-condensed class.
The vertical-align property for "td" elements is not needed
since by default the vertical-align property for "td" elements
is inherited and is set to "middle".
The margin properties set for the tables in informational
overlay is also not needed since we have set the width
to 100% and setting the margin to auto does not result in
anything different.
The API and user documentation pages gain nothing from being a single
page application other than a bunch of random errors.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This commit replaces the mute/unmute topic button in the message
header bar with a button that allows the user to set the
visibility_policy of the topic to muted, unmuted, followed or inherit.
The button in the message header bar has an icon corresponding to the
current visibility policy of the topic.
In a muted stream:
A click on the button opens a popover with 'Mute', 'Default', 'Unmute',
and 'Follow' options.
In a not muted stream:
A click on the button opens a popover with 'Mute', 'Default', and
'Follow' options. 'Unmute' option is available only when the
visibility_policy is set to 'Unmute'.
The current visibility_policy of the topic is highlighted in the
popover.
The box-shadows cuts off on left and overlaps with button on right.
We instead change background-color in dark theme and border color in
white theme to show focus.
In commit 5edc8fc, abstract classes were added to the
drafts overlay, but the classes that were already there
were not removed. This resulted in the same styles being
applied twice.
Removes the "dropdown-list-body" class and references as it is no
longer used in the new DropdownWidget. The previous uses of the
class were removed in commit 875d564f2d.
This commit adds a 'Default stream for new users' checkbox in
the stream editing UI to allow admins to easily add or remove
a stream as the default stream for new users. Previously, this
functionality required navigating to separate menu.
Fixes a part of #24048.
We change the custom profile fields table to have same header as
of other table and as a result this also makes the page look
better if an organization has zero custom profile fields.
This commit re-adds bootstrap CSS rules defined using "table"
class to the specific CSS files where CSS for different tables
is present.
This is a prep commit for removing table related bootstrap CSS
from bootstrap.css.
Previously, two borders were applied on the heading of tables
in informational_overlay. Top of the heading element had one
border from "table" and one from "th" element. Bottom of the
heading had one border from "th" element and one from "td"
element.
This commit fixes it by changing the CSS for borders on
"th" element to be applied only on striped tables without
borders (i.e. tables having "table-striped" class but not
"table-bordered" class) as bordered tables already have
top borders defined on td and table element while on
striped tables without borders, only bottom border is
applied on "td" elements along with the top and bottom
borders on "th".
This commit re-adds bootstrap CSS rules with "table-bordered" class
to app_components.css so that tables used in the app can use this
css and we can remove the CSS from bootstrap.css.
This commit re-adds required bootstrap CSS rules defined with
"table-bordered" class to the specific files.
This is a prep commit to remove bootstrap CSS for tables.
This commit renames "dialog_cancel_button" class in the exit button
of modals to "dialog_exit_button", which seems a much better name
for a button that is used to close a modal.
This commit encompasses the following changes:
* Replace the [More...] link with a button titled "Show more".
* Replace the [Show Less...] link with a button titled "Show less".
* Add various on-hover interactions to the buttons.
* In the condensed view, add fading to the bottom of the message to
visually communicate that the message is truncated.
* Update /help/ description.
Fixes#22801.
Co-authored-by: Evy Kassirer <evy.kassirer@gmail.com>
Dropping support for url_prefix for RealmPlayground, the server now uses
url_template instead only for playground creation, retrieval and audit
logging upon removal.
This does the necessary handling so that url_template is expanded with
the extracted code.
Fixes#25723.
Signed-off-by: Zixuan James Li <p359101898@gmail.com>
This also removes padding on .message_content that wasn't actually
rendered due to its low specificity. It was likely also leftover
from an earlier, non-grid-based layout.
The default appearance in modern Firefox is totally fine, and our
override was incorrectly changing the dropdown triangle to black for
the dark theme.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This CSS will only be used if somehow the tweet is renderd as
a simple quote without iframe either due to network problem
or if the actual tweet is deleted.
This commit re-adds bootstrap CSS rules for blockquote elements
used in various markdown pages including the ones which are
rendered during message formatting like when quoting a message.
This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
This commit re-adds bootstrap CSS rules for blockquote elements
used for testimonials in the landing page.
This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
This commit re-adds bootstrap CSS rules for blockquote written
using ">" in case study pages and some other pages like
"/why-zulip", "/history", etc.
We also remove the unnecessary CSS for "blockquote::after"
selector in this commit.
This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
This commit re-adds the required bootstrap CSS for blockquote
elements used in "for/businesd", "for/research", "for/events"
and "for/open-source" pages.
This commit only handles the blockquote elements inside ".quote"
and ".intro-quote" elements and not "blockquote.twitter-tweet"
elements which will be handled separately. The blockquote
elements rendered using markdown using ">" will also be handled
separately.
This commit also updates blockquotes in self-hosting page as
blockquote element on this page is also inside ".quote" element.
This is a prep commit to remove the blockquote CSS rules from
bootstrap.css.
We use "testimonials" class only to show the testimonials
in landing page, i.e. hello.html and that page does not
use "why-page" class. So, the CSS with selectors including
".portico-landing.why-page .testimonials" is not required
and this commit removes it.
The removed CSS was added in fc6833e46a when we used
"testimonials" class for quotes in why-zulip.html page
but this changed since we moved the quotes to markdown file.
The "label" class was only used for the labels shown in
activity support page. This commit adds the required CSS
rules to activity.css and removes them from bootstrap.css.
We use "small" element only to show secondary details in
a typeahead option. This commit re-adds bootstrap CSS
rule to the specific element in compose.css and removes
the CSS from bootstrap.css.
Also, we do not use small elements inside any of h1, h2,
h3, h4 and blockquote elements, so the CSS for those can
be safely removed.
We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.
Others are either redundant or overridden by the other CSS
for the specific elements.
The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
The terminology "arrows" comes from historical functionality
that is no longer relevant, so searchbox_container is a more
clear and accurate name.
It would be nice in the future to see if we can remove
some of the nesting of HTML (#searchbox, #searchbox_form,
and #searchbox_container).
This commit adds support for following a topic from the topic
three-dot menu in the left sidebar.
Three options, i.e., 'Mute topic', 'Unmute topic', and 'Follow topic',
are shown at the top of the menu (in the mentioned order), regardless
of whether the stream is muted or unmuted.
We can no longer set the topic's visibility_policy to INHERIT
(the default value) from this menu.
The changes are visible in the development environment only.
Fixes#25917.
Co-authored-by: Prakhar Pratyush <prakhar841301@gmail.com>
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
This commit also demonstrates how precise line-heights contribute
to a design: by matching the line-height on the avatar's grid area
to the dimensions of the square avatar image, it's possible to
center the first line of text (me-messages, in this case) with a
non-text element.
This satisfies the linter's desire for the `grid-template`
shorthand while keeping the illustrative template areas in
their own little diagram-like property.
This commit adds a boolean field `mentions_topic_wildcard`
to the `MessageRenderingResult` dataclass.
The field is set to true only if message rendering determines
the message has an actual topic wildcard mention in it (and not,
e.g., topic wildcard mention syntax inside a code block).
The rendered content for topic wildcard mention is
'<span class="topic-mention">{wildcard}</span>'.
The 'topic-mention' class is the identifier for the wildcard
mention being a topic wildcard mention.
We don't use 'data-user-id="*"' and "user-mention" class for
topic wildcard mentions and eventually plan to remove them for
stream wildcard mentions too in a separate mini-project.
This commit adds a 3px column between the `controls` and `time`
areas, which keeps the controls from crowding the time for
languages with longer time markers.
To make the layout easier to reason about, this includes the
minimum width for the time column as part of the message-box
grid definition.
This bad rendering was the result of unwanted css applied
in the stream description. In message view header, the stream
link (title) we have defined has css defined but the markdown
rendered stream link in stream description had the same class
resulting in unwanted css applied to it.
Fixes: #25961.
Signed-off-by: Akshat <akshat25iiit@gmail.com>
The bootstrap CSS was not re-added to the input for number of licenses
in "Pay by invoice" section of upgrade page while removing the bootstrap
CSS for "number" type inputs from bootstrap.css.
This commit fixes it by re-using the existing CSS for other number type
inputs.
This commit adds filter_text_input class to various search inputs
used across the app. This new class is used to re-add the bootstrap
CSS rules such that we can remove the CSS from bootstrap.css.
This commit re-adds bootstrap CSS for custom time limit inputs
used by various settings by using more specific selector in
settings.css.
This is a prep commit for removing bootstrap CSS for text type
inputs.
Karl Stolley
Aman Agrawal
Prakhar Pratyush
Anders Kaseorg
ecxtacy
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
Lalit
yogesh sirsat
Prakhar Pratyush
Lauryn Menard
Signior-X
Julia Bichler
nimish
Ishita Gupta
Akshat