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".
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.
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.
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.
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.
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 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.
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 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 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.
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>
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.
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 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>
This commit re-adds the required bootstrap CSS rules for inline
topic edit input to the specific selector in zulip.css.
This is a prep commit for removing bootstrap CSS for text type
inputs.
This commit re-adds bootstrap CSS for custom expiration time
input in invite modal.
We also need to add the code to handle dark theme CSS here to
make sure the CSS for dark theme is prioritized correctly.
This commit also refactors the CSS to modify the selectors to
be simple and remove unnecessary IDs.
We don't have 800 font weight available, so the font weight defaults
to 700, so we use it directly here to avoid any changes when
we convert to variable font.
Simplebar seems unaware of the `max-height: 1000px` on
`.subscriptions-container`, and therefore does not properly provide
a scrollbar when it's needed.
This commit adds a `max-height` to the stream Simplebar container,
ensuring that otherwise hidden content that Simplebar believes to
be visible can be scrolled to.
Finally, rather than rely on magic numbers or math done in comments,
this commit establishes CSS variables for all relevant modal-element
heights, doing the math inline using CSS calc().
Fixes#26107.
We use pull-right class for copy button with the multi-use
invite link only and this commit adds CSS for that specific
element. This commit then removes the bootstrap CSS for
pull-right class and also removes pull-right class from the
copy button since it is no longer required.
Previously, the HTML structure of unread banners continued to utilize the
old stylings. We are currently in the process of simplifing both the
compose banner and unread banner stylings into one. These change will
update the HTML structure to be the same as the compose banner and use
the new stylings.
This commit darkens the text-message color in the light theme
to the HSL equivalent of a dark gray (#262626).
This is the first time in the Zulip codebase where one CSS
custom property is set to another: the dark theme preserves
its use of `--color-text-default` in this way, but can be
adjusted independently of the reset of the theme in the future
by setting a different color value on
`--color-text-message-default`. Related reading on this
technique:
https://css-tricks.com/a-complete-guide-to-custom-properties/#aa-properties-as-properties
Fixes a part of #22022.
This in-progress feature was started in 2018 and hasn't
been worked on much since. It's already in a broken state,
which makes it hard to iterate on the existing search bar
since it's hard to know how those changes will affect search
pills.
We do still want to add search pills eventually, and when
we work on that, we can refer to this diff to readd the
changes back.
This commit revamps the invite type section of the "Invite user" modal
to provide a more intuitive user experience. The section now includes a
radio button option with two choices: "Send an email" and "Generate an
invite link." The email input box is hidden when the "Generate an invite
link" option is selected.
Fixes#24692.
Since we want the same space in recent topics to display the
compose box without overlapping with any other topics, it makes
sense to use a common variable.
Fixes#25779
We move the simplebar scroll on the right sidebar to a little left
when there is an overlay scrollbar present so that user can drag
either of them.
When overlay / modal is displayed, scrollbar is hidden due to
the disabled scrolling on `html`. Reduce width of fixed elements
that will be visible in background and `html` so that they don't
occupy that extra space.
Also, I was over-thinking how we can get the scrollbar width. The
moment we allowed scrolling on `html`, it was easy to get the
scrollbar width.
Karl Stolley
Aman Agrawal
Prakhar Pratyush
Sahil Batra
evykassirer
Hardik Dharmani
Joelute
Karl Stolley
YashRE42
Vector73
Prakhar Pratyush
Daniil Fadeev
Ujjawal Modi
nimish
Tim Abbott
Ishita Gupta
evykassirer
Anders Kaseorg
Akshat
Akarsh Jain