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
This removes the HTML structure and CSS styles previously associated
with the element in the scheduling modal.
Preserving this all in its own commit in case it needs to be
restored.
Previously, in the dark theme, the `background-color: #18222f` of the
`.popover` class took precedence over the
`background-color: hsla(0,0%,0%,.7)` of the `.message-info-popover`
and `.user-info-popover` classes. This commit fixes this issue by
adding !important to the background-color property of
`.message-info-popover, .user-info-popover` classes.
This is a more natural place for this extra padding than below the
navbar. Padding below navbar was primarily needed to hide the
message content above the sticky header while scrolling the message feed.
We are still able to do with this change without partially hiding the
loading message indicator.
Fixes#25159
This fixes the bug where the schedule message whole row was not clickable
and had some padding issues. By adding same styles as all other rows in
left sidebar we eliminate those bugs.
This replaces the previous dark border.
A pure white border looked a little too garish, so this dials back the
alpha channel just a bit.
Fixes: #25303.
This uses eyeballed vertical padding on the nested .zulip-icon class
to ensure that the entire send-later button area is clickable (and
not merely hoverable).
This commit adds the new users icon and uses it in the
recipient dropdown, both in the selection options and
the selected option displayed on the button.
Previously this dropdown was only for selecting streams, but
soon it will also be for switching to a private message. This
name helps it be clearer that the dropdown is more general
purpose.
We now show a banner on opening the compose box and changing the
stream in dropdown, if a user is not allowed to post in a stream.
The "Send" button is also disabled if user is not allowed to post
in the stream.
This commit also moved the CSS for disabled modal button in dark
theme below after the other CSS for modals as we are using the
same CSS for the "Send" button as well in disabled state.
This fixes the region between the avatar and the sender name in /me
messages not being part of the blue hover/highlight region for the
sender's user card.
We show the stream privacy icon for the selected option in
dropdown list widget even if the widget is disabled. It is
fixed by changing the CSS to hide only the "i" element used
for the arrow toggle button and not all the "i" elements in
disabled state.
We add a new banner informing the user if and when they send a message
to a muted topic / stream. It also has a button to unmute the topic.
Fixes: #24246.
Updated mute_or_unmute_topic to take visibility policy as parameter
and set topic visibility_policy to the passed visibility_policy.
In zulip.css, updated CSS to set opacity as per visibility_policy.
Updated click handlers for recipient_row mute/unmute icons to
work as per stream.
Fixes#25124
This commit updates the existing 'Muted topics'
settings UI to add support for other visibility
policies.
Changes:
Settings sidebar:
1. Rename 'Muted topics' to 'Topics'.
2. Change icon.
Main panel:
3. Rename 'Muted topics' header to 'Topic settings'.
Topics table:
4. Rename 'Date muted' to 'Date updated'.
5. Update the search bar placeholder text to 'Filter topics'.
6. Drop the 'Actions' column.
7. Add a status column with a dropdown set of options.
(Muted, Unmuted, Default for stream)
Fixes#25081.
Previously the typeahead container was being created at the bottom
of `body`, and its width (and `top` and `left`) were being set to
move it to the right position.
Now it sits in the search box container, which gives it the correct
position and width by default. This is better for DOM readability,
and is also better for the new 100% width (which is part of the
search bar redesign) because it can change width more smoothly
with the search bar when the page changes width.
This commit adds custom functionality to the bootstrap typeahead
to allow the typehead to be placed in the search box container
(whereas previously, it could only be appended to `body`).
Modal that were used as dialog boxes for editing info
had issues with long heading text int .modal__title,
This commit add word-break to break words and avoid
abrupt ui in such cases.
This commit does following improvements in #streams and #groups overlay.
* Adds word break in the title in the right pane to handle long stream
and group names.
* Fix positioning of edit (pencil) button to the right end and provide
maximum available space for stream/group name.
Co-authored-by: Hardik Dharmani <Ddharmani99@gmail.com>
This commit fixes the text overflow bug for pill values by adding a
maximum width of 100% for the pill along with the ellipsis property on
text overflow.
Fixes: #21807.
If there are unread_mentions in unmuted topic in muted stream then,
show `.subscription_block unread_mention` in regular font not faded.
An additional parameter is passed to the update_count_in_dom function
to add or remove the "has-unmuted-mentions" class from the
.subscription_block, allowing for the relevant CSS to be applied to
display the unread mentions in regular font.
Fixes part of #24243.
This commit implements a new logic to display unread messages count
in muted streams. If there are any unread messages in unmuted topics
within a muted stream, the unread counter for the stream will display
the total count of all the unread messages in the unmuted topics.
The counter will be shown in regular font (not faded).
Fixes part of #24243.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Add class unmuted_topic to li.bottom_left_row element if topic is
unmuted. Add relevant CSS for .unmuted_topic to display unmuted
topics in regular font.
Fixes part of #24243.
Previously, muted streams in the left sidebar were faded using
opacity: 0.5, and on hover, the opacity was increased to 0.75.
This opacity was applied to all elements within the muted stream,
including the stream-privacy icon, names of the stream and topics
within, and the unread_count.
In this PR, we changed this behavior to handle opacity for each
element separately. We changed the opacity of the stream-privacy icon
and unread_count, while for the text (names of stream and topics),
we changed the alpha factor for the hsla color property.
The reason for this change is that we can have different opacity levels
for the unread_count and other elements. This will allow us to add
feature in next commits in this PR to set the opacity of unread_count
to 1 while keeping it at 0.5/0.75 for other elements in the case of
muted streams with unread messages in unmuted topics.
Fixes part of #24243
These were previously used in the input form field and
this commit removes the code that supported that and
replaces it by using existing dropdown_widget functionality
to display the icons in the compose dropdown.
Fixes#11832
This lets the user see more options than the three that appear
in the typeahead menu, and prevents them from inputting invalid
stream names.
This change replaces the input field with the dropdown, and
updates everything that referred to the classnames of the old
input field, so that they now get the data they need from the
new dropdown.
This commit sets the transition to "none" for the dropdown
list widget element during focus to remove a weird fade-in
effect. We have to set this to none as the existing CSS
sets transition for all button elements inside ".new-style"
div. This commit adds the CSS for select element too,
as both are using same CSS, but since there was no transition
effect for select elements before as well, we can do this
change safely.
This prep commit renames 'muted_topic_ui_row.hbs'
to 'user_topic_ui_row.hbs'.
This includes minor refactoring, as it is now the
template for rows with any visibility_policy,
not just MUTED.
This replaces any "url_format_string" or "url_format" with
"url_template" for the linkifier settings, including HTML ids, template
variables, and etc.
This is not affected by any external API changes.
Signed-off-by: Zixuan James Li <p359101898@gmail.com>
Following up to #24961, it was discovered that emojis looked worse with
the new changes as the spacings became uneven with each emojis.
Debugging determined that the root cause that the selectors used
applied to __every__ first child of its parent inside the
rendered_markdown area, not just the first child of the main
container.
We now show the stream privacy type icon for the option
selected in dropdown list widget.
This commit also includes a minor CSS change to make the
web-public better aligned in the dropdown list widget
"Move topic" and "Move message" modal. There is no visible
change for other pages and other icons due to this CSS
change.
Fixes part of #22355.
The logic to avoid first unread message with a date row to not
have an unread marker works purely based on `z-index` and seems
to be working nicely.
This avoids a bug where the background color of the date row
of the first unread message is different from others.
This will help up achieve 2 things:
* Have a lot of common CSS for drafts and scheduled messages.
* Have common JS for things like keyboard navigation between drafts
and scheduled messages.
We currently use the GitHub logo to show the bots settings in both
personal and organization settings. This icon is not a correct
representation since we use have support for several different bots
including but not limited to a GitHub integration bot.
This commit replaces the GitHub logo with Smart Toy material icon
from Google, while also adding the required licencing details at
docs/THIRDPARTY.
Part of #19797.
This commit fixes the vertical alignement of globe icon in
inline_decorated_stream_name template by setting it using
relative units instead of px so that it is better aligned
at multiple places with different sizes.
Following important changes are being made here:
* color_class lib is removed since it not used anywhere now.
* We don't need the `dark_background` class since the background
color is already adjusted based on color scheme. So, all
instances of it being used is removed.
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.
At times, it might get confusing for users who are on
slow connections if their messages has not been sent
even after 5s. Including a spinner that will only show
up after 5 seconds has elapsed will keep user informed
about their slow connection.
5s is set as minimum time because showing up a spinner
before than might be distracting for users on normal
connections.
Fixes: #19328.
This commit fixes the alignment of the `search_close` icon on devices
with a width less than $sm_min (576px) by removing a top padding
of 5px and adjusting the position to top 5px from the previous 4px.
When a user opens a profile modal, the overlay is clicked
through in responsive mode, which results in unintended button/link
clicks. This commit removes the causing CSS properties
`pointer-events:none;` which was passing pointer-events to other
elements and `pointer-events:all` which is experimental and do no
effect.
This commit adds a message and link to view or create streams on
empty streams panel. It conditionally renders the message when
there is no stream to show and also when any stream
event (delete,create,subscribe) occurs.
Co-authored-by: Tim Abbott <tabbott@zulip.com>
Fixes#21870.
The dropdown icon for direct messages is partially visible
on small screens. This was due to removing padding when the
screen size is below a certain size by media query.
The intent of the original code appears to have been to remove top
padding, so make the CSS do just that.
The vertical shifts in message body was due to the <p> tags it gets when
converted to markdown. Removing the top margin from the first <p> child
and bottom margin from the last <p> child resolves this issue as due to
those default margins in <p> tags there was vertical shifts in message
body.
Fixes: #21276.
In this commit we remove any explicit references to the polyfills and
replace all the color codes to the hsl() format. We also remove any
other redundant code, after testing for any regressions.
In this commit, we move the progress bar styling out of the legacy
bootstrap.css and move it to a dedicated CSS file. This is a step
forward towards the ongoing effort to remove the use of Bootstrap
from the Zulip codebase.
The new CSS file, progress_bar.css, is added to common.ts, since it
is used in both the webapp and portico pages.
Fixes#23628.
Changed the `.enter_sends` css selector for launching tippyjs popover from
`compose.hbs` because it was colliding with `.enter_sends` selector present in
`organization_user_settings_defaults.hbs`.
Before this change when an admin tried to change user realm default setting of
`enter_sends` it was opening a tippyjs popover despite being a checkbox and it
was hitting `/json/settings` endpoint instead of `/json/realm/user_setting_defaults`.
This commit increases width of text inputs in settings, stream
settings and user group settings to be 325px, which is the
minimum width of select elements on these pages.
Joelute
UBC Student
Karl Stolley
evykassirer
Akarsh Jain
Mateusz Mandera
Anders Kaseorg
Aman Agrawal
Sahil Batra
Tim Abbott
Hardik Dharmani
Josiah Kievit
Trident Pancake
Lakshay Mittal
Daniil Fadeev
Satyam Bansal
Ujjawal Modi
alik-balika
Alex Vandiver
palashb01
Karl Stolley
Lalit
N-Shar-ma
Prakhar Pratyush
m-e-l-u-h-a-n
SameepAher
Zixuan James Li
sayamsamal
brijsiyag
atharmohammad
Ishita Gupta