Commit Graph

3932 Commits

Author SHA1 Message Date
Lauryn Menard a00a1ab5ce dev-login: Rename `btn-admin` class to `btn-dev-login`.
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.
2022-12-30 21:26:42 -08:00
SameepAher 37a8bebf77 compose: Fix overflow in expanded compose box preview mode.
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.
2022-12-30 17:57:17 -08:00
Lauryn Menard 19f2795e41 settings-account: Move tooltip for email change disabled to button.
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.
2022-12-30 17:54:00 -08:00
Lauryn Menard 782cc80d99 account-settings: Refactor change email button and modal class names.
Prep commit for updating tooltip from info icon to disabled button.
2022-12-30 17:54:00 -08:00
Anders Kaseorg 5f76fb16b7 styles: Add overflow: hidden fallback for overflow: clip.
overflow: clip is missing in Safari < 16.
https://caniuse.com/css-overflow

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-12-27 10:31:06 -08:00
Tim Abbott 0bc47b1c77 invite: Display globe icon for web-public streams.
This requires both passing through the is_web_public parameter to the
template, and a bit of CSS to make the globe not huge.
2022-12-14 21:04:12 -08:00
Josh Klar 2e825f637d css: Apply negative spread radius to message box-shadows.
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
2022-12-14 17:28:37 -08:00
Anders Kaseorg b0c1b2c37f styles: Delete useless rules for stream and topic names.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-12-14 17:20:07 -08:00
Anders Kaseorg 34306ba1f3 styles: Don’t clip tall characters in stream and topic names.
Fixes #23867.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-12-14 17:20:07 -08:00
Rohitt Vashishtha 8d539cff8f css: Remove unneeded 35px right margin from recipient row.
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.
2022-12-14 12:27:23 -08:00
Rohitt Vashishtha f6f2f9e70a css: Prevent composebox to_text from getting wrapped.
Even when there is space, the to_text was getting wrapped in languages
that have more than one word for "To:", like Korean.
2022-12-14 12:27:23 -08:00
Ujjawal Modi 35f05631dd css: Fix spilling out of long email on email change confirmation.
In the email change confirmation page, now long emails break to
multiple lines instead of spilling out.

Fixes #23654.
2022-12-13 16:29:10 -08:00
Sahil Batra 26b7e40ac5 invite: Add bootstrap CSS rules to emails textarea in invite overlay.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 264bfd4583 message_edit: Add bootstrap CSS rules to message edit textarea.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 735743879a compose: Add bootstrap CSS rules for compose textarea.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 74b985ccce billing: Add bootstrap CSS rules for textarea in sponsorship page.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra cb699d6c10 support: Add bootstrap css rules to textarea element in support page.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 2e93a4ccd6 integrations_dev_panel: Add CSS rule for textarea elements.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra fc21e68a9e settings: Set margin-bottom for email field in deactivate modal.
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.
2022-12-13 12:03:06 -08:00
Sahil Batra 1c0b9b8c7a css: Extract common bootstrap CSS rules for textarea in settings.
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.
2022-12-13 12:03:06 -08:00
Sayam Samal cfacb6fe25 user_profile: Convert preview profile to sticky button.
Having the preview profile button always visible makes it more
accessible when the user is at a random scroll positon in the
profile settings.
2022-12-09 13:27:15 -08:00
Sahil Batra 15dbf9742d stream_settings: Remove code for stream privacy modal.
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.
2022-12-09 11:16:26 -08:00
Julia Bichler 445957df05 stream settings: Show save/discard widget when settings change.
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.
2022-12-09 11:16:26 -08:00
Julia Bichler b871ffe712 stream settings: Always show stream settings.
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.
2022-12-09 11:16:26 -08:00
Sahil Batra e64c1948ed app_components: Refactor css for save-discard widget.
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.
2022-12-09 11:16:26 -08:00
Sahil Batra c96dd02084 settings: Remove unused CSS and corresponding organization-submission class.
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.
2022-12-09 11:16:26 -08:00
Akarsh Jain 761ca16d6d
css: Add min-width to user presence dot. (#23526)
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
2022-12-06 16:15:55 -08:00
evykassirer f9c72701c6 compose: Migrate compose_private_stream_alert to use compose_banner.
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.
2022-12-06 15:43:34 -08:00
evykassirer 086f02a3ab compose: Migrate compose_not_subscribed to use compose_banner.
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.
2022-12-06 15:43:34 -08:00
evykassirer 8ced075643 compose: Migrate compose-all-everyone to use compose_banner.
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.
2022-12-06 15:43:34 -08:00
evykassirer ab5d088188 compose: Migrate compose_invite_users to use compose_banner.
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.
2022-12-06 15:43:34 -08:00
evykassirer f1c6fc13e7 compose: Migrate generic error to use shared banner template.
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).
2022-12-06 15:43:33 -08:00
evykassirer 85cbd324eb compose: Create shared compose banner and use for resolved topic warning.
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.
2022-12-06 15:42:07 -08:00
Aman Agrawal eb45925b1a actions_popover: Use tippyjs instead of bootstrap to display popover.
Fixes #23494
Popover now automatically displays on left when there is not
enough space top or bottom of the reference element.
2022-12-06 09:58:40 -08:00
Aman Agrawal 6a1ae465cc css: Let actions popover icon take maximum possible width & height.
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.
2022-12-06 09:58:40 -08:00
Sahil Batra 5e74a8d0cc subscriptions: Remove redundant CSS rule.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra 53eeae9019 compose: Do not use bootstrap css for "Enter to send" radio buttons.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra d2b48fab27 streams: Do not use bootstrap CSS in stream privacy choices inputs.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra 55aaf1d56d settings: Do not use bootstrap css in radio-type display settings.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra f8065dcd3d streams: Rename radio-input-parent class to settings-radio-input-parent.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra 8f149750f3 email_log: Do not use bootstrap css for radio buttons.
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.
2022-11-30 17:35:22 -08:00
Sahil Batra 00ad7e5aeb development: Add CSS file for emails page in dev server.
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.
2022-11-30 17:35:22 -08:00
Hemant Umre f7c6d1dd77 left_sidebar: Add login link to left sidebar for logged-out users.
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.
2022-11-29 16:35:36 -08:00
Aman Agrawal b6a29a03f5 left_sidebar: Add border radius to the selected stream. 2022-11-28 20:23:57 -08:00
Anders Kaseorg 5cc92365b8 dark_theme: Declare color-scheme CSS property.
This allows the browser to select a more appropriate color for the
browser scrollbars, for example.

https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-27 13:18:52 -08:00
Anders Kaseorg 21f8d26040 dark_theme: Move color scheme classes from body to root element.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-11-27 13:18:52 -08:00
Sahil Batra ec1f41eb9d settings: Rename dependent-block class to dependent-settings-block.
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.
2022-11-22 17:14:35 -08:00
Sahil Batra fe179412ce settings: Move save-discard widget css to app_components.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.
2022-11-22 17:14:35 -08:00
Tim Abbott 016c4700ab css: Remove Bootstrap CSS reset for h5/h6.
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.
2022-11-22 13:55:21 -08:00
Tim Abbott 2a3f708e9a gear_menu: Delete unused Bootstrap tabs code.
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.
2022-11-22 13:55:21 -08:00