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.
The flex-direction property for modal__content should
be set to column as we want to display the elements.
This does not affect most of the modals since they
do not have multiple direct child elements that are
visible at same time and the data-simplebar attribute
already sets the "flex-direction: column" property to
the elements where it is used.
But in the email address visibility modal on user
registration page, there are multiple direct child
elements for the "modal__content" element and we need
to set "flex-direction: column" property for them to
work correctly. We also change the width of select
element in the modal to "fit-content" to avoid it
taking the whole width even when not required.
This commit also fixes the bug in login_to_access
modal, since the `modal__content` for it also
has two direct child elements.
Previously, the emoji size was fixed to 20px by 20px irrespective of
whether the emojis were inside a heading or not. This looked weird when
a small emoji was rendered next to a large h1 text.
This commit fixes that by setting the emoji height to 1.4em
which proportionately increases the size of the emojis as the text size
increases for different headings.
Fixes#12857
The dropdown-menu for "Who can unsubscribe others" was not wide
enough to fit the options in stream creation form. This commit
fixes it to be wide enough to fit the options like we do in
stream edit form.
The dropdown menu for notification stream, default code block
language, etc. was not looking good for short options due to
width being set to fit-content. This commit adds min-width
property to make them look good for short options as well.
This commit adds width property CSS rule for text inputs in
integrations_dev_panel.css to 206px, as we are going to remove
the bootstrap CSS rule which sets width in further commits.
This commit adds width property CSS rule for text inputs
in billing.css to 206px, as we are going to remove the
bootstrap CSS rule which sets width to 206px in further
commits.
This commit adds width property CSS rule for text
inputs in activity.css to 206px, as we are going to
remove the bootstrap CSS rule which sets width to
206px in further commits.
This commit adds CSS to set width of text inputs in
poll and todo widgets to 206px as we will be removing
the bootstrap CSS rule which sets width of inputs to
206px in further commits.
This commit adds width property to CSS for "#inline_topic_edit"
element in zulip.css to set it to 206px, as we will be removing
the bootstrap CSS for it in further commits.
This commit adds settings_text_input class to text inputs in
settings, stream settings and user group settings pages. This
class is used to set the width of inputs to 206px, as we will
be removing the boostrap rule which sets width of the input
in further commits.
This commit adds modal_text_input class to text inputs
in modals to set width of them as set by bootstrap.
This class is used to set the width of inputs to 206px,
as we will be removing the boostrap rule which sets width
of the input in further commits.
This commit increases the width of url field, displayed for
custom external account type fields, in edit profile field
form. The width of the input is increased as urls are generally
long enough and did not fit in the width set previously in most
cases. We increase the width to match the width in add custom
profile field form.
For some reason, browser is treating clicking on the button as
submitting the form, which results in the page getting redirected
to the same page with an additional empty query `?` in the URL.
In previous commits, we updated the realm creation flow to show
the realm name, type and subdomain fields in the first form
when asking for the email of the user. This commit updates the
user registration form to show the already filled realm details
as non-editable text and there is also a button to edit the
realm details before registration.
We also update the sub-heading for user registration form as
mentioned in the issue.
Fixes part of #24307.
We now show inputs for realm details like name, type and URL
in the create_realm.html template opened for "/new" url and
these information will be stored in PreregistrationRealm
objects in further commits.
We add a new class RealmDetailsForm in forms.py for this
such that it is used as a base class for RealmCreationForm
and we define RealmDetailsForm such that we can use it as
a subclass for RegistrationForm as well to avoid duplication.
Forms using upload widget were using the
same css for image preview.
We fix this by assigning a class to the
widget and applying specific styles to it.
Added a width for the Change Email and Password dialogs at
sm_min (576px) and ml_min (425px) to make them more responsive
on narrow screens.
Fixes: #24339.
postcss-preset-env transpiles this back as necessary. (It does a
better job than we did, in fact: we had several four-argument hsl()
calls that should have been hsla().)
Signed-off-by: Anders Kaseorg <anders@zulip.com>
This adds a new search icon which we prefer over the one made
available from bootstrap, and replaces search icons in navbar
search with the Ionic icon.
Changed the id name of the <i></i> tag to user_profile_edit_button_icon
in the user profile modal, as earlier it was edit-button, which is too
vague of a selector name.
Close user profile modal on clicking the space around edit button, by
calling hide_user_profile() on clicking the hover box around the edit
button.
Also, modified the hover box to center around the edit button.
The CSS for our first Tippy popover, actions_popover, incorrectly did
not split the CSS that is meant to be applied to all popovers from
that CSS that is only for that specific popover.
Reorganize this with some clarifying comments.
The previous hide-date CSS class had a semantic meaning of "this
recipient row has the same date as the previous one"; since we're now
having logic read that value, it's worth giving it a semantic name
that makes that code easier to understand.
Aman Agrawal
evykassirer
Tim Abbott
Hardik Dharmani
Alex Vandiver
Joelute
Karl Stolley
sbansal1999
palashb01
Karl Stolley
Lalit
Sahil Batra
Daniil Fadeev
N-Shar-ma
Prakhar Pratyush
m-e-l-u-h-a-n
SameepAher
Akarsh Jain
Zixuan James Li
sayamsamal
Lakshay Mittal
Mateusz Mandera
brijsiyag
atharmohammad
Ishita Gupta
Anders Kaseorg
Pranav2612000
Sahil Singh
YashRE42