The correct background-color for buttons of save-discard widget
was not being applied and instead almost transparent color was
applied to dark-theme CSS rules. This commit adds ID to the
selector such that CSS in app_components.css is preferred over
dark-theme CSS.
Removes the `btn-direct` class in `portico.css` that was only
being used for dev login buttons.
Adds `dev-button` class for general CSS rules for buttons on the
dev login page. Adds `dev-login-button` and `dev-create-button`
classes for CSS rules specific to the two types of buttons on the
page.
Removes `#find_account .btn` and `#find_account .form-control`
rules in `static/styles/portico/portico.css`.
The last use of these rules was removed in commit 7afbc9ddd6
when the login and registration pages were redesigned.
The `next_is_same_sender` has no effect on the CSS of the message
displayed and the JS changes seem to have no effect too.
See cc8021a742 for more details.
Disables the deactivate account button in the user's account and
privacy settings tab if they are the only active organization owner.
Adds a tooltip when hovering on the deactivated button to let the
user know why the button is disabled.
The backend already returns an error for self account deactivation
requests if the user is the only organization owner.
If there is no `disabled_text` provided for the image upload widget,
then there is no need to have the `image_disabled` div rendered in
the template. This allows the hover CSS rules to be more general for
the image upload widget in general.
Adds a check for `disabled_text` around the `image_disabled` div
element in `image_upload_widget.hbs`.
Also, changes `image_upload_background` class to
`image_hover_background` so that it more accurately describes what
the CSS rule is for and why it's used in both the `image_disabled`
div and the `image_upload_button` div.
The `hide` CSS rule in `app_components.css` was being overwritten
by the more specific rules in `image_upload_widget.css`, which
meant that when changing the inage was disabled the hover text for
updating or deleting the image was still visible.
Adds `hide` class (and therefore more specific rule) to
`image_upload_widget.css` for when this text should be display
none.
Fixes#23844.
Using grid layout moves us away from fixed widths
and position for items where possible, which will
make it easier to make messagebox changes without
breaking formatting.
Visual changes expected in this commit:
- When the action buttons overlap the message content,
it will no longer visually overlap but completely cut off
the content — which is good, but means the messages can’t
be as wide on narrow width views. There’s a slight improvement
to this in an upcoming commit.
Also removes the `last_message` CSS, which was busted due to the
`last_message` calculation not correctly being updated for new
messages arriving, and didn't improve styling.
Rest of the page uses "Source sans 3" font and also most of
input and select elements in rest of the app use the same font.
This commit updates the select, input and textarea elements in
"/upgrade" page to use "Source sans 3" font and not the one set
by Bootstrap.
Most of the select, input and textarea elements in the app uses
"Source sans 3" font.
This commit updates the select, input and textarea elements in
"/devtools/integrations" page to use "Source sans 3" font
and not the one set by Bootstrap.
Renames and cleans up some of the CSS rules for the `btn-admin`
class that is used in the dev login page for input elements.
Confirmed via git-grep that this class is only used on the dev
login page.
Fixed a bug in expanded compose box preview mode,
which lead to buttons at the bottom of the compose box
being pushed off the screen and text overflowing.
Manually tested for different screen sizes.
Fixes: #23493.
Moves the tooltip when email changes are disabled to be shown on
hovering over the email button text and pencil icon. Removes the
question icon that previously showed the tooltip on hover.
This fixes a visual regression in newer Electron builds (without
regressing Firefox) for which I still don't entirely know the root
cause, where extra "borders" were being applied to messages in both
streams and PMs. Applying a negative "spread radius" to the box-shadow
properties of these elements, and moving that pixel to the "horizontal
shadow" aspect of the property (which is used to create the left-side
"ruler" effect), restores the expected look and feel.
Tested in qutebrowser (Chromium 87-based), Electron v18+v19, and Firefox
107.
Refs (and should unblock) zulip/zulip-desktop#1251
This margin doesn't make sense in a wider view, and is actually
a hinderance to the layout on narrower screens, and removing it still
keeps more than enough separation from the buttons on the right.
This commit adds required bootstrap CSS rules used for emails
textarea element in invite modal with existing CSS for that
element in zulip.css. We also change the selector to use class
instead of ID such that the dark theme CSS can take precedence
when using dark theme.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds required bootstrap CSS rules used for message-edit
textarea element with existing CSS for that element in zulip.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds required bootstrap CSS rules used for
compose textarea element in with existing CSS for that
element in compose.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds required bootstrap CSS rules used for textarea
element in sponsorship page with existing CSS for that element
in billing.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds required bootstrap CSS rules used for textarea
element in support page with existing CSS for that element in
portico_signin.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds bootstrap CSS rules used for textarea element
in devtools integrations panel in integerations_dev_panel.css.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit adds margin-bottom property to CSS of email field
in user deactivation modal with other CSS properties for this
field in settings.css since we are going to remove bootstrap
CSS rules in further commits.
This commit extracts some common bootstrap rules used for textarea
elements in settings (both organization and stream settings) and
this rules are added for settings_textarea class. We also add
settings_textarea class to the textarea elements in settings.
This change is done so we can safely remove textarea CSS rules
for bootstrap.css as a part of our process to remove bootstrap
without changing existing design.
This commit deletes all the functions, CSS and other code
for stream privacy modal since we have udpated the UI to
show stream permission settings always in "General" section
and not inside the modal.
Fixes a part of #19519.
This commit adds code to show save-discard widget when stream
permission settings are changed and subsequently hide it when
the setting is again changed to original value.
Some important code changes -
- Added code in "settings_org.js" to handle stream settings.
- Added handler in "stream_edit.js" to show or hide the
save-discard widget when settings are changed.
Fixes part of #19519.
We now show the stream permission settings - stream privacy,
stream post policy and stream message retentions setting,
always in the "General" section of stream settings instead
of showing it in the modal. The setting elements are
disabled for users who cannot change them.
Some important changes are -
- Add proper classes and IDs to the elements such that
code in settings_org.js can be used to set and change these
settings.
- Code in "settings_org.js" is updated to be able to set
stream message retention setting while rendering the page.
- Added enable_or_disable_permission_settings_in_edit_panel
function in stream_ui_updates.js (since that will also be
used in live updating code) to disable the setting elements
if required.
- We also update update_web_public_stream_privacy_option_state
function such that we can correctly enable/disable web-public
option in stream edit panel based on permissions.
- Added code for save-discard widget in stream_settings.hbs in
this commit but code to implement the correct behavior of it
will be added in further commits.
Fixes part of #19519.
We change the CSS for save-discard widget to not be inside
"#settings_page" selector such that it can be used as a
common component for stream settings also.
This commit also updates the selectors to be more specific
such that the ".new-style.button" css cannot override
these rules.
This class was used for setting margin-top as 0 but since the default value
of this property is already 0, this CSS is not required and thus we can
remove this class also since it is not used anywhere else.
Previously user presence dot in the right sidebar becomes narrower
when there is unread counter, and as such, this commit adds a min-width
to the user presence dot.
Fixes: #23519
This is part several updates for #22524.
Notes:
* data-stream_name isn't needed in the template (before or after),
since there is not even an action button that could use it.
This is part several updates for #22524.
This commit also removes `compose_error.hide()` since there is only
one remaining use of it (which has been replaced by the contents of
`hide()`). Eventually `#compose-send-status` should be replaced
fully in a future PR, after we rewrite the upload banner to use
the new banner template.
Testing note: I removed the test test_compose_not_subscribed_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.
This is part several updates for #22524.
Testing note: I removed the test test_compose_all_everyone_confirm_clicked
since it heavily relies on the old way of rendering banners and is too
UI-focused (instead of logic focused) for me to feel like it's worth
testing that the banner is removed when clicking the button.
This is part several updates for #22524.
Testing note: I removed the tests test_compose_invite_users_clicked
and test_compose_invite_close_clicked, since they heavily relied on
the old way of rendering banners and were too UI-focused (instead of
logic focused) for me to feel like it was worth testing that the
banners removed when clicking the buttons.
Error banners were rendered in a different place than warnings.
Now compose errors and warnings share the same template and styling
in compose_banner.hbs
Testing notes:
* I removed test_message_overflow since it seemed not to test
anything that test_check_overflow_text wasn't already testing.
* private_message_recipient() can't be called to set emails to non-valid
emails, so `invalid_recipient` cannot be tested (and is likely very
difficult to trigger in production, if possible at all).
This is the beginning of a fix for #22524 which converts several
banners to a new style. As a part of that set of changes, this
commit creates the shared template and warning styling. The
resolved topic warning was picked (for no particular reason)
to migrate first. Further commits updating other banners
to follow.
We need to fill width of `actions_hover` with padding of
`zulip-icon`, so that hovering over `.actions_hover` shows you
tooltip and clicking on it shows popover.
We can remove the "padding-left: 0px" rule for
"label.radio" element now since the default value
for padding property is 0 and we have also removed
the bootstrap applied "padding-left: -20px" rule
in the previous commit.
We rewrite the CSS rules, handled by bootstrap for the radio buttons of
"Enter to send" setting, to compose.css as we are in process of
removing bootstrap.
The line-height property added to input element by bootstrap is not
added to subscriptions.css since it is already added for all inputs
in zulip.css.
We rewrite the CSS rules, handled by bootstrap for the radio buttons
for stream privacy choices (in both stream create and edit form),
to subscriptions.css as we are in process of removing bootstrap.
The settings-radio-input-parent block in subscriptions.css is moved
to be top-level instead of being nested inside "stream_privacy_modal"
and "stream-creation-body" block, such that we can use this class
in future for resusable components (like settings_checkbox).
The bootstrap CSS rules are also added to this
settings-radio-input-parent selector.
The max-height property added to label by bootstrap is not added
since it does not applies to non-replaced inline elements.
The line-height property added to input element by bootstrap is
not added to subscriptions.css since it is already added for all
inputs in zulip.css.
We rewrite the CSS rules, handled by bootstrap for the radio
buttons in display settings (both user and realm-level defaults),
to settings.css as we are in process of removing bootstrap.
This commit adds a new class "display-settings-radio-choice-label"
to radio label elements in the display settings and the bootstrap
CSS rules along with existing CSS defined by us for radio-type
display settings are added to this class.
This change will help us in future where we may want to have
reusable components (like settings_checkbox) for radio-type
settings with visual preview.
The line-height property added to input element by bootstrap is
not added to settings.css since it is already added for all inputs
in zulip.css.
This commit renames the radio-input-parent class for parent div of
stream privacy radio inputs to settings-radio-input-parent.
This change is done so that we can use this same class name for adding
other similarly styled radio inputs to be used in settings in future.
We add the CSS rules handled by bootstrap for the radio
buttons in forward email modal to email_log.css as we
are in process of removing bootstrap
The elements for which CSS rules have been added are label
with "radio" class and "radio" type input elements.
The max-height property added to label by bootstrap is not
added since it does not applies to non-replaced inline
elements.
Previously, CSS rules were added inline for emails page in
dev server. This commit adds a new file which contains
CSS rules for the emails page in dev server. This will
also help us in adding focus for the radio buttons in
the page, which cannot be added inline to the elements,
when we remove the use of bootstrap for this page.
It can sometimes be unclear to logged-out users why they
are not seeing all their subscribed streams in the left sidebar.
To reduce the chances of users being confused, added a login link
at the bottom of the streams list for logged-out users.
To avoid leaking any information, the link is shown regardless of
whether or not there are actually any additional streams in the
organization.
Fixes#22844.
This commit renames dependent-block class to dependent-settings-block
and also moves the CSS to app_components.css. This class will now
only be used for this particular type of custom inputs and thus
we do not need ID in the selectors for applying the CSS.
We move the css to app_components.css from settings.css because
we are going to add save-discard widget in stream settings as
well and thus we can reuse the CSS there.
This has no visual changes.
I hand-verified all the places we include these elements in the UI:
* Markdown rendered inside the app.
* Markdown rendered on portico pages.
* The only such element in our HTML templates is the <h5>s for
organization logos.
For a couple of these, we were relying on the default margins provided
by Bootstrap.
Before 2017, Zulip's manage streams and settings UIs were tab in the
same pane position as our current message feed and recent topics.
That original implementation was implemented using Bootstrap tabs;
while it hasn't been in use for years, we had a bunch of stale code
related to it leftover in this module.
Previous algorithm was not correct if we didn't have full data for
the current narrow loaded from the server. #23512 adds the support
to mark messages in a narrow unread after a give message_id.
Added a new alert banner to indicate loading and success states of
an ongoing request. This is useful when requests can take a long
time to complete.
Following b563fdc537, the z-index of the
compose box (2) tied with that of unread date dividers within a topic;
this could lead to the dividers incorrectly appearing on top of the
compose box.
We don't have other elements that can overlap with compose with a
z-index between 2 and 4, so just increase it to 4.
The tweaks I made as part of merging
f204a4c592 apparently were wrong; the
CSS class .popover_user_presence had been shared between both the user
card and the profile.
Fix this by referencing the right CSS classes. Additionally, fix the
margins to have a square hover region around the presence dot.
Fixes#23588.
Fixes#23517.
While this feature was added to Zulip very early, it has been troubled
for most of that time; it never looked great visually, had a lot of
implementation complexity around resize.js, and has a weird model (a
setting that changes the UI only in certain window sizes).
This option is not commonly used; while a significant portion of users
have it enabled, many of them just don't use window sizes where it
actually has an effect. So it's not clear that it will be missed if
removed; we got very few bug reports when it was completely broken for
a few days after we first integrated the new left sidebar private
messages design.
Even with it no longer being broken, it does not work very well with
the addition of the new PMs section in the left sidebar. (Having two
scrollbars in the sidebar looks quite awkward.) The new private
messages section in the left sidebar also addresses some of the use
cases for always keeping the Users list always visible, even in narrow
windows.
This option is only removed from frontend for now. To make this
decision easily reversible, the backend code of this feature
is still kept.
Some Safari users users observed an issue where these modal buttons
appeared with an ugly white-on-grey format. Removing the CSS line with
`appearance: button` appears to fix this for affected users.
That line seems unlikely to have been constructive; as documented in
https://developer.mozilla.org/en-US/docs/Web/CSS/appearance, this is a
deprecated value equivalent to `auto`, and a bit of a misfeature.
Additionally, the "Log in" button was incorrectly underlined on hover;
override that style.
Increase z-index of unread-marker to always appear above the message and
focused outline. Also, z-index of date_row is increased to hide
unread marker for it in special conditions.
To implement this, we are rendering users in PMs with
the status icon (via `user_with_status_icon.hbs`) and
then passing rendered HTML to the recent topics row.
Fixes#23262
We have bound the `mouseenter` event with a circle
status parent element to render the tooltip. Instead of passing
the tooltip content directly in `data-tippy-content`, we
are rendering it via JS because when showing the bot
tooltip we want a multiline tooltip.
We have also made some minor changes to `do_render_buddy_list_tooltip`,
so we can append the tooltip to the target element and avoid adding
a observer to it.
This commit also sets the font weight for tippy content to
400 to avoid bold content.
Moving the last active status icon to the modal header, we obtain a
cleaner visual design for the user profile modal which is more
consistent with other parts of UI.
Due to incorrect heights set for user-group creation and stream
creation body we had a UI bug because of which bottom part of
user group and stream creation forms were slightly visible
through the bottom.
It was due to somewhat fussy css height rules and incorrect
height calculations for that UI.
Instead of topic filter box being a part of the list when keeps
updating, we move it out and fix its position.
This should reduce rendering time of topics list and provide
a smoother experience to users when waiting for topics list to
load.
Fixes#23273
Removed height restriction to allow the box to grow when text wraps
to the next line.
Aligned wrapped lines to the text in the first line instead of the
icon.
0.5 opacity felt too light; it made these appear similar in color to
muted streams, not as the intended grey text. This opacity reduction
is only applied in dark theme to sidebar titles.
Fixes#22911
`Back to streams`, stream name and filter topics are all sticky
now and their color changes based on which filter is active and
the currently applied theme.
Previously, when you clicked the confirmation button in a
dialog_widget, we'd display a loading spinner on top of an ugly grey
button background.
Remove the ugly grey background color, while making sure the loading
spinner inside the button looks good and doesn't resize the button.
Fixes: #22002
The blue font color on the vote_text beside the reactions in
light mode made it seem like a link which it's not, so it has
been changed to regular font color.
We preserve the blue font color on hover, matching the add-reaction
button.
This fixes a bug where in narrow windows, long vote_text could extend
beyond the body of the reaction's allocated area.
It also provides a matching right margin around the count/name inside
the reaction pill, which looks better when we have strings inside them.
This commit introduces the change of rendering private messages
section as collapsible, whose data-fetching logic came with zulip#21357.
We now have separated out `Private messages` from `top_left_corner`
section and shifted it below the `global_filters` in a different
separate section along with stream list with common scroll bar
in left-sidebar.
The new PM section will be opened by-default on loading the page
and will have a toggle-icon in its header, clicking on which makes the
section collapse/expand accordingly.
In default view, only recent 5 PM threads would be shown
and would append the active conversation as the 6th one at last
if not present in those 5, similar to how topics list work.
In PM section with unreads, a maximum of 8 conversations
would be shown and rest of them would be hidden behind
the 'more conversations' li-item, clicking on which takes
to the zoomedIn view of PM section where all the present
PM threads would be visible and rest of the sections of left-sidebar
will get collapsed.
Fixes#20870.
Co-authored-by: Aman Agrawal <amanagr@zulip.com>
Sahil Batra
Lauryn Menard
Aman Agrawal
Manas Jayaswal
SameepAher
Anders Kaseorg
Tim Abbott
Josh Klar
Rohitt Vashishtha
Ujjawal Modi
Sayam Samal
Julia Bichler
Akarsh Jain
evykassirer
Hemant Umre
Taiki
Riken Shah
Javier González
m-e-l-u-h-a-n
aparna-bhatt
Raghav Luthra
jai2201