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.
This commit re-adds bootstrap CSS rules to ".settings_text_input"
selector in settings.css and this helps in adding the bootstrap
CSS to text inputs used in settings.
This is a prep commit to remove bootstrap CSS for text type inputs.
This commit re-adds bootstrap CSS for search input in
integrations page using a more specific selector in
integrations.css. We also change the selector to use
a class name instead of "input".
This is a prep commit for removing bootstrap CSS for text type
inputs.
This commit re-adds bootstrap CSS for text inputs in devtools
integrations page using a more specific selector in
integrations_dev_panel.css.
This is a prep commit for removing bootstrap CSS for text type
inputs.
This commit re-adds bootstrap CSS for the input
used to set the email to which emails will be
forwarded in the development environment "/emails"
page by using a more specific selector in
email_log.css.
This commit also increases the width of input to be
consistent with many other text type inputs and this
also helps in viewing the full placeholder text.
This is a prep commit for removing bootstrap CSS for
text type inputs.
This commit re-adds bootstrap CSS for "Organization website"
input in sponsorship page using a more specific selector in
billing.css. This change is done by re-using the existing
CSS for number type inputs and also removes the height
property which is not required.
This is a prep commit for removing bootstrap CSS for text
type inputs.
This commit re-adds bootstrap CSS for text inputs in realm details
page by using a more specific selector in activity.css. The CSS
added for search input includes bootstrap CSS applied using
".search-query" and "input[type="text"]" selectors.
We remove the CSS for search-query CSS from bootstrap.css
as the search element in app navbar already overrides the
bootstrap CSS.
This is a prep commit for removing bootstrap CSS for text type
inputs.
This commit re-adds bootstrap CSS for text inputs used in poll and
todo widgets by using a more specific selector in widgets.css.
This is a prep commit for removing bootstrap CSS for text type inputs.
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 required bootstrap CSS rules for
search box input element.
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 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.
This commit re-adds bootstrap CSS rules to ".modal_text_input"
selector in modal.css and this helps in adding the bootstrap
CSS to text inputs used in modals.
This is a prep commit to remove bootstrap CSS for text type inputs.
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.
`Lighter` for this icon gets converted to 100 font weight, but the
visual difference starts to appear only after 500 font weight so,
we keep at 400 to begin with, which is what we support.
This commit adds a cancel button to the upload banner, replacing
the previous close icon. Now, the cancel button is used to cancel
the upload process, while the close icon is used to remove the
upload banner without interrupting the upload.
A new case has been added to the switch statement in the 'upload.js'
file to handle the functionality of hiding the banner called
'upload_banner_hide_button'.
Replaced the functionality of the 'compose_banner_close_banner' case
inside the switch statement with a new case called
'upload_banner_cancel_button'. The cancel button is now assigned
the selector 'upload_banner_cancel_button'.
`Cancel` button is only preset for banner which tracks
progress while a file is being uploaded.
To maintain consistency with other banners, the cancel button's
dimensions and color have been adjusted to match the style of other
buttons present in different banners.
Fixes: #21156
Archiving a user/stream notification stream disables
user/stream notifications.This commit adds a warning
that notifications will be disabled while archiving
any notification stream.
Fixes#22110.
Co-authored-by: Victor Fróes <71036803+vfroes21@users.noreply.github.com>
Co-authored-by: Isabella Carmo <isabella.carmo@hotmail.com>
The CSS for modals uses "--color-background-color" to set
background color of modal. But the variable is defined in
zulip.css which is not available for portico pages and thus
the email visibility modal was not rendering as expected in
"Terms of service" page.
This commit defines the "--color-background-color" variable
in portico.css such that it is available for portico pages
as well.
This commit updates the text on email confirmation page to
make it more clear what's going on and why the user needs
to check their email.
Fixes#25900.
This is logic from 10 years ago (dbc4798594)
that is no longer relevant. It seems like we used to show the
search bar open all the time and only showed the buttons when
there was focus in the search bar. Now we close the search bar
when it's not being used, and no longer need to update button
visibility or disable the search close button.
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.
This traverses the DOM to the <pre> element containing the
copyable material of interest.
The button is attached to the .codehilite element to ensure
that the button does not move with horizontally-scrolling
code content that exceeds the width of the content column,
as happens frequently at mobile scales or for very long
lines of content.
Fixes#26093.
This commit removes settings_text_input class from url type inputs
and we instead add the width property to settings_url_input.
Note that we might instead have a single class for all type of inputs
instead of having different classes for url, password and text type
inputs in further commits.
We remove the modal_text_input class from password and url type inputs
in modals and add the width property CSS to modal_password_input and
modal_url_input instead.
Note that we might instead have a single class for all type of inputs
instead of having different classes for url, password and text type
inputs in further commits.
We use url type inputs in the add and edit custom field modals
and also to show the url type custom fields in "Profile" panel
and "Manage user" modal.
This commit re-adds the bootstrap CSS rules to these specific
input elements using modal_url_input and settings_url_input
class and thus removes the CSS for url type inputs from
bootstrap.css.
We might replace the new class added here with a common class
for all type of inputs in further commits.
We use password type inputs for API key and password
change modal in the main app and in login, register
and password reset pages.
For the portico pages, i.e. login, register and
password reset pages, the bootstrap CSS is already
overridden by our custom CSS defined in
portico_signin.css and some of the CSS added by
bootstrap is redundant. Only outline property was
being applied by bootstrap on focusing the input
which has been added to CSS in portico_signin.css
in this commit.
For the inputs used in app, i.e. API key and password
change modal, we have already added the CSS rules of
Bootstrap using "modal_password_input" class.
Thus, we can remove the CSS for password type inputs
from bootstrap.css.
This commit adds specific CSS styles from bootstrap to password
type inputs in modals using modal_password_input class. This
change helps us in removing the bootstrap CSS for password type
inputs in further commits.
We might replace the new added class with a single class which
will be used for all type of inputs in further commits.
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.
This commit adds the required bootstrap CSS rules for fieldset
elements to the specific selector in portico_signin.css and
removes the CSS from bootstrap.css.
We use input-block-level class only for search input
and this commit adds the required bootstrap rules for
it to the specific elements in search.css. So, we can
safely remove the CSS defined for this class in
bootstrap.css.
Previously, we used to have top and bottom paddings of 4px to
the select elements but it was removed in a208da9c4d to make
sure that text for the selected option is aligned properly.
All other select elements have height set to 30px, but the
select elements in stream settings page had height set to
"fit-content" and so they looked ugly after removing the
padding.
This commit sets the height of select elements in stream
settings to 30px.
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.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner
to main-view-banner.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_action_button
to main-view-banner-action-button.
Previously, we have duplicate stylings in compose banner and unread banner.
This is rather messy and creates a lot of styling rules. We should define
an abstraction for them. This change will rename compose_banner_close_button
to main-view-banner-close-button.
Added a copy-to-clipboard button to the code blocks in the API and
Help Center docs. Previously, copying code from the docs required
manual copying, which was cumbersome.
Used the same copy-to-clipboard svg icon as the one used in
web/src but manually created the button within the js function instead
of using a template. Updated the pre CSS element to have relative
positioning and gave the copy-codeblock element absolute positioning
to ensure the button stayed in the top-right corner.
Fixes#25726.
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.
* Remove `box-sizing` and `min-width` properties which have no
effect on `inline` positioned element. Modified class selector to
add `span` which reflects this while reading the CSS.
* Remove `2px` vertical padding and `line-height` which combined
are fighting for space??
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.
This allows the recipient box to take 100% of the available
horizontal space, up to 175px. The effect is that the
compose-box buttons are available to users at mobile scales
(viewports of 400px wide or less).
This commit fixes the vertical alignment of "x" button in the
alert to be more closer to the center. We can still improve it
by probably using something like flexbox layout instead of
hard coding paddings or margins.
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.
This fix prevents the active-message outline from being obscured
under certain conditions, such as when setting a browser to zoom
out at 90% or less.
Suggested-by: Anders Kaseorg <anders@zulip.com>
This commit keeps the height of the dropdown consistent, even when
it's adjacent a multiline collection of pills in a group DM.
It also keeps the righthand buttons and narrows top-aligned, too.
Additional markup and CSS ensures that the < marker always stays
vertically centered with respect to the dropdown.
While this commit achieves what the subject advertises (fixing the
input box's height to match the recipient drop-down), but it does
so by relying heavily on flexbox's behavior to manage the height
of the elements and vertical centering, where necessary, rather
than positioning hacks or vertical padding.
This commit also removes some additional styles that do not make
sense (e.g., `min-width: 0`) or that need not be set.
Animating `box-shadow` and `top` is slow since the browser
drops frames when animating them. We can fix it by using `will-change`
property but it is just better to not animate them and instead
use transform.
The nav bar's bottom border was being hidden by the search
bar. This makes the search bar slightly less high to fix this
issue.
Soon this code will be replaced with the changes in #24345.
This just ensures that the mention-pill color selectors are children
of `rendered_markdown`, which class appears both in the message-
preview area as well as individual message rows.
Fixes#25720.
This commit adds bootstrap CSS rules for number type inputs
in billing and upgrade page to billing.css as we will be
removing them from bootstrap.css in further commits.
This commit adds bootstrap CSS rules for number type inputs
in activity page to activity.css as we will be removing them
from bootstrap.css in further commits.
We use "submit" type inputs in dev login page. Only "cursor"
CSS was applied to those elements from bootstrap and this
commit adds it to those elements in portico_signin.css and
removes the CSS in bootstrap.css and bootstrap-btn.css.
We use "input-xxlarge" class for search box in activity
support page only. This commit adds the width property
in activity.css for the search box and rest of the CSS
applied using this class was redundant and can be removed
safely.
We had the `3px 0 1px` padding before migration to use grid,
then I switched it to use `4px 0 1px` since we were planning to
use blue box border which seemed to have helped that case.
Since we switched to using outline for blue box, it makes sense
to just use equal padding.
Backend incorrectly renders @everyone and @stream as `user-mention`
while they are clearly `group_mention`. To fix this, we use
`data-user-id` property of @everyone and @stream which are
set to `*` for them.
When there are only muted unread mentions in a stream, show `@` icon
and unread count in faded style, also align the `@` on more topics
with no unead counter on it.
If there are only muted unread messages without mentions don't show
the unread counter on the stream.
Fixes#25382.
The use of named areas with `grid-area` make it unnecessary to
declare `grid-row` or `grid-column` values. (Note also that
grid areas must not be presented in quotation marks.)
Additionally, because `.unread_marker` is no longer placed on the
grid by itself (i.e., it always accompanies `.date_unread_marker`
or `.message_unread_marker`), it does not need any manual grid
placement, `grid-area` or otherwise.
This change enables the unread marker to participate as a grid item,
rather than the product of various absolute/relative positioning
hacks. The intention is to therefore prevent the blue active-message
box from disappearing on browsers that have zoomed out (~80% zoom).
With grid in place, this also makes for a more robust presentation
of each message row, and named grid areas should make it possible to
modify and extend the grid into the future.
Finally, this change removes styles that are no longer necessary in
the context of CSS Grid.
Added styling to show no outline around the copy to clipboard button on click.
Previously, when clicking this button, a rectangular outline appeared around
the button, which didn't look good, since a 'Copied!' message was already displayed.
Fixes#25533.
These changes ensure that only headings targeted by URL fragments are
highlighted in full. Div elements will have their immediate first
child element highlighted instead (e.g., the first element of an API
parameter box).
Fixes#25413.
The old code was disabling the save button wrong by using
`.addClass("disabled")` instead of `prop()`.
Added tooltip for the disabled save button as per issue #25413 and changed
"Times up!" color to red.
The textbox readonly logic was changed to no longer becoming readonly. Reason
being there are edge cases involving the compose buttons such that simply
marking the textbox as readonly is not sufficient.
E.g. using the compose buttons after readonly still modifies the content.
One solution might be to just hide the compose buttons visually. However, there
are edge cases for that too. If preview mode was previously active, then
perhaps that state needs to be reverted. If any modal is open, such as the emoji
picker, then that needs to be closed. Solving these edge cases doesn't
improve the user experience. Keeping the textbox editable allows an easier way
for user to copy the text and don't have weird cases.
Zulip's select widgets have a 30px height; this comes from Bootstrap
but is also generally nice for visual consistency.
In modals, we use a 15px font-size, instead of the 14px used in the
rest of the app, and in that context, the 4px vertical padding plus
30px fixed height resulted in the text not being vertically aligned.
Fix this by removing that vertical padding; all of our select elements
with these classes appear to position the text in the center of the
dropdown through other CSS mechanisms.
We now allow users to change email address visibility setting
on the "Terms of service" page during first login. This page is
not shown for users creating account using normal registration
process, but is useful for imported users and users created
through API, LDAP, SCIM and management commands.
In #22524, we have updated the compose banner to the new, updated design
while the unread banners have remained the same. When comparing them side
by side, they look rather old and outdated. We should apply the updated
design to the unread banners as well.
Fixes: #25551.
This commit assigns a `.scroll-target` class to preserve any URL
fragment whose corresponding ID is on the self-same page as the
activating link.
This accommodates a side-effect of the fetch-based page-loading
logic, which seems to lose the `:target` reference once a load
or reload is complete.
One caveat: While the approach here works fine when loading a new
docs page whose URL includes a fragment, there appears to be something
about `simplebar` that clears out the `:target` reference. If you
click a heading link on a help page, for example, you might
momentarily see the highlighted style appear before it disappears.
Keyboard navigation has been added to the scheduled messages modal
in this commit. The solution is based on the `modals_handle_events`
function from the `messages_overlay_ui.js` module, as well as some
helpful functions from the same module.
Fixes: #25181.
Earlier the field used for adding subscribers to existing
streams was not properly disabled.
This commit properly disables the field and also adds a new function
for enabling and disabling add subscribers container.
This PR ensure that all elements targeted by URL fragments will
remain visible below the portico's menu bar at all viewport
sizes and also when a user zooms in, provided the target is on a
page with the menu bar, which will have the `portico-landing`
class.
Whether a quirk or a bug, Chrome appears to ignore the padding on
ancestral containing elements when calculating the offset for
`scroll-margin-top`, which is why padding has been moved to
`.inner-content` for `.why-page` and `.case-studies-page`, which
are the two unique class names for portico pages where the targeted-
element scrolling behavior is used.
This commit ensures that the Attribution, Jobs, and Team pages all
share a uniform structure to match those of other pages. This will
simplify styling and should ensure greater confidence when modifying
portico landing-page styles.
The one CSS modification here, for the jobs page, maintains the space
at the top of the "How we work" section.
This commit addresses `#stream-creation .modal-footer` becoming
transparent after an error in creating a stream due to overlapping
with `.stream-creation-body`. Instead of adding data-simplebar on
.stream-creation-body, added it to a new div
`stream-creation-simplebar-container` which contains 3 divs:
stream_create_info,stream_creating_indicator and stream-creation-body.
Additionally, fixed the border-radius of the modal footer on the
bottom left side for device width > $md_min.
Fixes#25526
I didn't want to use JS for it since calculating height based on
item height before rendering the dropdown is expensive and after
rendering the dropdown will cause it jump.
`Version` and `Forked from` copy buttons in the "About Zulip" UI
will now change color when hovered over.
This allows the copy button to pop out more when hovering over it.
Fixes part of #23210.
Now that the navbar is a different color, we want it to also
take up the full width of the screen. Because the navbar has
margin, this commit adds a new div. To not have to add a new
div, the scrollbar would need to be moved to the `html`
element, which is a bigger project.
This commit also moves the zulip logo to be left-justified instead
of centered, since it looks strange centered with the full
width navbar.
This looks visually nicer, and I think is necessary to merge it for
now, but I'm doing this as a separate commit so it's easy to revert if
we change our mind.
In move_topic modal, Renamed inline_topic_edit to
move_messages_edit_topic to be more specific selector as
inline_topic_edit is also used in message header.
Additionally, Removed id inline_topic_edit as it was only used
in zulip.css instead used `.inline_topic_edit` selector as that
element also have class with same name inline_topic_edit.
Fixes#24805
Abbrevated DM recipient names in message feeds, Drafts and Scheduled
messages overlays by wrapping recipient names in span with class
private_message_header_name and applying `overflow: hidden` and
`text-overflow: ellipsis` CSS to it.
Fixes#25353
Previously, infomational banners didn't have any dark theme stylings which
resulted in a messy and terrible contrast with the dark themed app. These
changes adds those missing styles and uses the same stylings and colors
as the compose banners. Thus, making a definite improvement then before.
This commit introduces structures and logic to hide the Scheduled
messages item from the left sidebar if there are no messages
scheduled to be sent.
Test coverage has been added for counts and visibility, too.
Fixes: #25101
Added a div inside #send_later button with class separator-line,
height 70%, width 1px and `background-color: hsl(0deg 0% 100% / 65%)`
to make it look like a line also made #send_later a flex with
`align-items: center` so that separator line is vertically centered.
Fixes#25340
This means that we now schedule the message simply after selecting
time if the message is valid.
Also, editing scheduled messages will now delete the scheduled
message and open compose with scheduled message.
When all the unread messages in a muted stream are in specifically
muted topics, this ensures that the total unread count for the stream
that the user sees before clicking "more topics" will match the total
unreads number for the stream itself.
This behavior is limited to muted streams, since in a normal / not
muted stream, we don't display a "muted topics only" faded unread
count by the stream's summary line to avoid distracting the user with
it, we match that behavior for the "more topics" line.
We also now display the `@` , again to ensure the stream's summary
line never displays an `@` without some topic row having one.
Earlier, the sender info would overlap with the edit compose
area because of another class applying "margin-top" to keep
the sender info properly aligned when the message is not being
edited. However, that "margin-top" had to be changed when the edit
compose is opened.
This commits adds that "margin-top" to sender info to make sure
that it doesn't overlap with the edit compose area.
When there was an unread message below date row, the date
row overlaps with the message header.
This was a result of #23538 not adjusting the message header
z-index along with the z-index of date row.
When composing a private message to a different recipient than the
current view, the go-to-compose-target icon looked vertically
misaligned with these icons. Fix this by removing the CSS rule that
made these other top-corner icons not centered within their row.
This commit fixes the opacity of the group-icon and bot-icon
in the left-sidebar direct message section to make them look
more consistent with the other icons in the left sidebar.
This commit removes the presence dot display for bots and fixes
the gap between the bot name and bot icon in the user profile
popover. It also fixes the alignment of the bot icon.
Fixes: #25066
Karl Stolley
Aman Agrawal
Daniil Fadeev
Lalit
yogesh sirsat
Prakhar Pratyush
Prakhar Pratyush
palashb01
evykassirer
Ujjawal Modi
Lauryn Menard
David Rosa
Signior-X
Sahil Batra
Anders Kaseorg
Satyam Bansal
Zixuan James Li
Julia Bichler
Hemant Umre
nimish
Tim Abbott
Ishita Gupta
evykassirer
Akshat
Ganesh Pawar
Wladimir Ramos
Hardik Dharmani
Joelute
UBC Student
Akarsh Jain
Mateusz Mandera
Josiah Kievit
Trident Pancake
Lakshay Mittal
Daniil Fadeev
alik-balika
Alex Vandiver