Making `table-striped` CSS block as a top level shared CSS inside
`app_components.css`, trying to make use of this block on every
table and also removing some dublicated CSS.
Follow-up of #21144
Removes CSS rule that added a left margin and padding to not
first-child paragraph elements and `codehilite` class div elements
in ordered list elements.
Rule was added in 2017 and likely was correcting the alignment of
these elements due to another CSS rule that has since been removed.
The PR changes the following behaviors and UI:
1. Removes the checkmark button to mark the topic as read in
"Recent Topics".
2. Make the unread messages counter be the button for marking
all messages in the topic as read. The unread messages counter
is made clickable and tooltip is set to "Mark as read".
In "recent_topic_row.hbs", remove the checkmark button and add
classes and attributes to ".unread_counter" to give it desirable
behaviour on clicking.
In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read".
In "recent_topics.css" we set the background-color of unread counter to
hsl(105, 2%, 50%) to decrease fading of unread counter.
Fixes: #21654
Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.
So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.
Fixes a part of #19449
Set the default_language as cookie and reload the page so that
the spectator can immediately see the language change in effect.
We can reload the page forcefully for spectators since there is
no chance of any work being lost. It is possible that the spectator
may lose the selected message on doing so.
This requires a new dependency, to be able to set cookies from
frontend JavaScript.
Fixes#21961
We add `padding-right` to input field so that input do not overlap with
`x`and add `text-overflow: ellipsis` to make overflow less jarring.
Fixes#19765
This'll be shown only when in a different narrow from what
you're composing to.
Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.
We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548
Thanks to Vlad Korobov for the icon and for proposing various
designs.
There are two tangled issues addressed here:
* We were weirdly using a scaled up copy of fa-angle-up, rather than
fa-chevron-up, for a chevron up, for the expand/collapse widget.
* We were previously using × for the close icon, which had
visual and scaling issues next to the fa-angle icon.
Fixes#20403.
The commit fixes the issue in which the settings sidebar would
overflow into the settings header when scrolled; it also adds
border-box model to minimize calculations and magic numbers.
This changes recent topics to be consistent with our other tables. The
valus are copied from the common settings CSS for tables.
Ideally, we'd just share the CSS, but the existing table CSS is deep
inside a .settings-section CSS block, and it's a bit of a refactor to
share it.
Fixes: #21140.
Instead of setting `disable` attribute to the elements, we make
them look like disabled and remove interactions with them. This
helps us keep the hotkey handling logic for navigation easier
to manage.
Fixes#21279
Previously, these buttons were centered via flex, which meant that in
the rare case that a long list of private message recipients caused
the recipient area to line-wrap, these icons would be incorrectly
placed at the vertical center of the now multi-line block.
Fix this by setting an auto bottom-marging.
Fixes#21693.
For user who is not an administrator.
Also implemented a banner that notifies the user if they can edit
the following settings (name/description and stream permission).
Also increased padding-top of stream header by 10px. This change is done
to increase vertical spacing between the banner
and the stream header.
Fixes#20001.
This is especially to add more space around the globe icon since
it wider than lock icon, so the previously set padding for the
stream icon has to be increased.
This change was motivated by the addition of status emoji to the buddy
list. Previously there was no spacing between the status emoji and the
unread count, and as such, this commit adds a left margin to the
unread count.
The above change has an additional consequence, long user names such
as "Othello, the Moor of Venice" get truncated with ellipses, instead
of reaching to the edge of the unread counts (as they previously
would).
While the 2px value that we had previously chosen looked alright for
most emoji (😀, 😃, etc) some emoji such as 🐙
used more of the width available to them and as such still looked too
close to the user name. As such this commit bumps the value to 3px
(4px was a bit too much space).
We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.
Fixes#19840
At the moment we fit only a single image per message per line. This is
wasteful of space as multiple images can be accomodated per line on
widescreen displays. This commit modifies the rendered_markdown
stylesheet to make this possible.
The comments detail various technical considerations.
Fixes#20975.
Previously, the maximum width for the topic input in the compose box
was artificially limited to 20% of the width of the compose box.
While this may have had some useful role in encouraging short topics,
we can teach that idea in other ways, and it seems more helpful to
have the input length match what works well for viewing topics in the
left sidebar without being cut off.
Improved the contrast of ? and i icons by changing their opacity to a
consistent 0.6, going to 1 on hover.
Changed the colour of playground icon by testing and added spacing
between title and the playground icon by changing the icon margin.
With some TODO comments added by tabbott for readability.
Fixes part of #20484.
Close buttons are misaligned if the warning banner text takes up two lines.
We increase the specificity of the selectors to ensure that this CSS
overrides Bootstrap.
Fixes#20839.
The upload spinners for all of the image upload widgets were in
wrong alignment due to the use of magic numbers to center them.
This commit replaces the above mentioned approach with the use
of flexbox to fix alignment issues across all the image upload widgets.
Due to differences in length of the words for different languages
there were alignment issues in the organization profile settings.
This commit uses flexbox to ensure that the alignment stays correct
for any changes in language/word length.
Fixes#21385
Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.
Extend out custom outline property to all `[role="button"]` elements.
In "stream_types.hbs"
For "Who can access the stream?" and "Who can post to the stream?" replace
"h4" with "label" to make the for smaller and to remove boldness.
For "Message retention for stream" replace the "h4" with "label"
and add class="stream-title".
In "subscriptions.css":
Add "margin:25px auto" to "#announce-new-stream" to ensure equal
gaps above and below it.
Reduce margin and paddings for ".radio-input-parent".
For "select" set "width: fit-content" and
"height: fit-content" to ensure that the text in the
dropdown is clearly visible.
Fixes: #21322
This commit fixes the issue where the delete (x) button on the
top right corner of the profile picture section remains hidden
even when a hover action is performed on the profile photo.
The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.
We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.
Fixes#20499
I made the header sections above all our settings
panel lists more consistent.
Before this change:
* some lists had titles, others didn't
* the placement of the filter box was random
* alerts strangely went between the filter box
and the list
* filter boxes were too large
* CSS was haphazard
* forms were squished against tables
Now all the settings with list have consistent
HTML, CSS, and look-and-feel in the area directly above
their list of items.
With the exception of Custom Profile Fields, all the
lists with headers above them happen to be based on
ListWidget, but the header styling is not coupled
to ListWidget, because we want consistent headers
even if Custom Profile Fields has a non-ListWidget
list (due to its drag&drop features).
Previously, this had different hover behavior from the adjacent
elements, which seems like a bug.
The CSS for this component is shared with Recent Topics; we migrate
the styling for on_hover_topic_read for consistency.
Fixes#21273.
You generally only need to type a few characters to filter
down to just a few folks, even in gigantic realms.
I tried not to make it **too** small, just in case, but
the default width was kind of gaudy.
The header was more confusing than helpful, and we
want the create-stream UI to be less cluttered.
We don't really need the help-center text here, since
we already have ? icons next to the relevant headings
for the sub-sections.
We kill off some CSS, but we won't kill off stream-title
until the big upcoming changes for stream pills.
Muted streams are now greyed out in the personal settings,
also changes to the notification settings of a muted stream are
not possible anymore.
Also, add a bell-slash icon after the stream name of muted streams,
clicking on it unmutes the stream.
Fixes#19780.
With the recent changes to lightbox image handling in #21145 and #20788
it is no longer necessary to have panning and zooming disabled by
default. This commit removes the enable/disable button and instead
replaces it with a "Reset Image" button, and enables panning and zooming
as the default state of the lightbox.
This commit attempts to prevent images with long filenames,
descriptions, or author names displayed in the lightbox from altering
the layout of the page.
It also adds a title prop to both the filename and author, allowing a
user to hover and see a tooltip of the full text in the case where the
text is truncated.
Fixes#21058.
Make the unread marker lines at the side of messages continuous by
adding "height: 100%" to ".unread-marker".
This provides a nicer visual experience by not highlighting the
boundaries between messages. (One can see that information using the
timestamps or by moving the selection cursor, where appropriate).
Fixes#20981.
Inherit uses the settings of the parent element; we actually want to
just undo the `display: none` we'd set for this CSS property, which is
what revert is for.
The previous `display: unset` logic didn't work with dividers in the
gear menu. This new version should be correct -- what we want to do
here is just override the `display: none` default for this class, not
revert to the default browser styling for that element type.
This reverts commit f3964673e7.
It broke drafts_scroll by confusing jQuery object APIs with DOM
element APIs.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This changes the method of rendering list of alert words in DOM,
earlier it was rendered using 'for' loop over the array of alert_words
which is now changed to render using ListWidget, which gets a array
of objects from get_word_list() in alert_words.js.
The use of ListWidget helps to define a parent_container and $container
in table-body of alert-words-table using which we can now apply sorting over
alert words with the help of handle_sort() function in list_widget.js
Changed the method of adding alert_word_settings_item row in table body
through {{#with}} loop because of rendering through ListWidget, which was done
earlier using for loop over each alert-word in while rendering the list.
this commit also mocks template of render_alert_word_item
while mocking ListWidget.create() function in render_alert_words_ui().
and checks that ListWidget.create() is not called when variable `loaded`
is set as false.
Fixes#21142.
This commit adds a width of 10px to fa-square and fa-check-square
icons in recent-topics table, so that on toggling between these icons
we can prevent the change in width of the whole button to make it look
good visually.
This PR changes the library used for panning and zooming in the lightbox
module from timmywil/panzoom to avanka/panzoom.
The original (timmywil) version of the library contains a bug where if
you have a high resolution touchpad and Firefox and you zoom in and out
repeatedly on an image, the image may drift. avanka/panzoom does not
appear to display this behavior.
Restores the behaviour from before 5f83bc5cfe, where clicking
outside the image closes the lightbox, primarily by way of swapping
out the panzoom library.
Fixes: #21163.
Edit history of message was rendered directly without passing
it through rendered_markdown.js. Due to this several visual
features for dynamic elements like time, spoilers, mentions
etc were not available.
To fix above issues we pass the content of edit-history
through rendered_markdown before showing edit history modal.
Fixes: #16029.
Moves the profile avatar to the top when the viewport is narrowed down.
Tweaked by tabbott to add the 20px bottom margin in a more consistent
way, which also lets us deduplicate some code.
Fixes#21000.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.
This avoids distracting the user when viewing a thread they've already
read.
tabbott has verified that if new messages come in, the banner will reappear.
Fixes: #18768.
The class `sidebar-topic-check` has a minimum width assigned for the
`topic-resolved` icon to create an appropriate space for that column
whether or not there are resolved topics present.
Add a corresponding `margin-left` to align `more topics`
appropriately.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.
We adjust the bottom offset of the button based on compose box
height.
Fixes#19862
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
In the dark theme, disable the hover behavior to display sorting options
for actions column in tables (Which doesn't support this).
Matches existing behavior in light theme.
Fixes: #21137
This seems to have no negative effect, and substantially improves the
visuals in situations where we're displaying a user's name.
While we're at it, switch to a relative font size.
Removes the 5px `margin-right` on images, replacing it
with a 5px `margin-left`. This change aligns the images
with the message content while making sure they do not
stick stick together in other layouts.
Add a margin below the subscription link for it to be visible when we
hover over links, where the browser will display the URL in the
bottom-left corner of the screen.
This reverts commit 8e06335788 (#21048).
It regressed the ↑ and ↓ keys because drafts.drafts_scroll was not
updated to use ui.get_scroll_element. Also, styling the native
scrollbar as hidden is not the right workaround because the hidden
native scrollbar still exists and can be scrolled independently of the
SimpleBar.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.
Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.
With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.
Fixes#19739.
Currently the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.
As such this commit does the prep work of extracting a template which
will be used in all places that need to show the status emoji.
With refactor and minor edits by Yash RE.
Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
Currently, the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.
As such this commit does the prep work of decoupling the
selected_emoji style in user_status.css from the .status_emoji
style... by having it always override the value of "top".
This is an unpredictable piece of css that shouldn't be part of
the code. It was introduced earlier in
04ece5e5c5
for `open-source` content which has been completely replaced.
This commit adds a method of marking an overlay as being meant to be
left open despite click events triggering that would normally close it.
This is to prevent the case where a user drags an image and "unclicks"
in an area where normally clicking would close the overlay.
This PR changes how the Pan & Zoom feature of images displayed in the
attachment lightbox are handled.
The existing method of using a canvas element is replaced by the Panzoom
library (timmywil/panzoom). This library is lightweight and has 0
transitive dependencies.
This fixes#20759 where the issue is that the viewport of a zoomed image
was not expanding to fill the available space on the page. Switching to
this new library also solves several other UX issues:
* Images are no longer blurred when in Pan & Zoom mode.
* The zoom behavior itself uses focal point zooming: zooming occurs
where the cursor is on the image instead of at the center of the
image, reducing the need for extra panning.
* CSS transitions are used for a more visually pleasing experience
when switching images, toggling zoom off, etc.
* The library has the potential to open other file types which
leaves that option open for us in the future.
This change makes it easier to see who is present in a group private message conversation
when some of the users in it have long names.
We disable a stylelint rule for this line, because this particular -webkit prefixed CSS rule
works in all modern browsers including Firefox.
Fixes#21003.
It seems like orange is the loudest possible color to
denote a quasi-neutral-idle state, so we hope to
replace it with another color.
This commit does not change any styling.
I removed the sentences in the doc, since they are
kind of too vague to be useful. If we want to say that
the idle state is correlated with the half-orange
circles in the buddy list, then we want to say that
more specifically.
Autosize library can miss resize of compose-textarea when
compose is collapsed / expanded while preview box is displayed
and compose-textarea is hidden. So, we force a autosize.update
of compose-textarea, when user exits markdown preview, to ensure
that the textarea is of correct size.
Fixes#19353
This commit creates the function warn_if_topic_resolved that checks if
the topic to which the user is composing is resolved or not. First it
checks if the stream exists and then if the topic name starts with the
RESOLVED_TOPIC_PREFIX. If the conditions are true, a warning banner is
shown to the user.
It also shows to the user a button to unresolve the topic, if he has
the permission to do so.
Fixes#20584.
The content which is scrollable is moved left by the width of the
scrollbar when scrollbar is visible. The navbar, floating recipient bar
and composebox doesn't move. We reduce their width by scrollbar width
to adjust for the reduced width of the scrollable content.
Since floating recipient bar is center aligned (with margin: 0 auto)
we also have to move left by half the scrollbar width.
Group css classes having the same value being assigned together. This
makes the code easier to understand.
Added a negative `outline-offset` of the same width as the grey border
for the blue selection outline around the `draft-info-box`.
This removes the gap between the blue box in the active state, while
the unselected `draft-info-box`es look the same as before, with a grey
border.
Fixes: #20950.
We were showing # for all types of streams in the title at the top
in the right column of stream settings overlay. This commit fixes
it to show globe icon for web-public streams and lock icon for
private streams.
Adds a line break before the descriptive text for return
values and events in the api documentation in order to
help with readability of descriptions with multiple
paragraphs of descriptive text.
Adjustments made to the CSS of list items in unordered
lists to visually group the first paragraph of text
to any following paragraphs or unordered lists.
There was a bug where information overlay was not closing on clicking
"x" when some text was selected. This was due to document.getSelection().type
returning "Range" and we do not close the modal in that case as per the code
added in 081d74141b.
As the "x" icon was button, the document.getSelection().type was
still returning "Range" for the text selected, but when the "x"
icon is inside a span, as in settings overlay, clicking on "x"
deselects the already selected text and selection type is not
"Range" and thus modal is closed.
This commit also improves the vertical alignment of "x".
Fixes#20645.
Removed the CSS rule setting the button's width to 100px. This lets
the button take as much space as the appropriate translation needs,
without displaying an odd two-line button.
Fixes: #20077
yogesh sirsat
Lauryn Menard
Anders Kaseorg
NerdyLucifer
madrix01
Aman Agrawal
somesh202
anurastogiji
Ganesh Pawar
Tim Abbott
Dinesh
Adam Sah
sayamsamal
Sahil Batra
Sdrummolo
Palash
YashRE42
ditsuke
Rishabh-792
SantamRC
My-Name-Is-Nabil
Biki-das
jai2201
Steve Howell
Junchen Liu
Julia Bichler
Austin Riba
Austin Riba
Purushottam Tiwari
Alya Abbott
Jai soni
Yogesh Sirsat
Parth
AnushaNathRoy
Priyam Seth
N-Shar-ma
Ashwat Kumar Singh
Lauryn Menard
Eeshan Garg