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.
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.
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.
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.
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.
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
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.
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
Aman Agrawal
evykassirer
Karl Stolley
Tim Abbott
Trident Pancake
Lakshay Mittal
Joelute
alik-balika
Hardik Dharmani
sbansal1999