Commit Graph

3975 Commits

Author SHA1 Message Date
Sahil Batra 6b7e588a68 css: Remove some unnecessary CSS.
This commit removes the margin-bottom CSS added for
select elements to override the margin added by bootstrap.
Since we have removed the bootstrap CSS rules for
select elements in previous commits, we can remove
the overridden CSS in this commit.

This commit also removes margin-bottom CSS for input
element in one case, because CSS in app_components.css
already overrides the current bootstrap CSS for input
element.
2023-01-26 12:36:31 -08:00
Sahil Batra 03668a4272 subscriptions: Remove unused CSS.
Since, we have removed bootstrap CSS rules for select elements
in previous commit, we do not need to set this rule since
default value of margin is 0.
2023-01-26 12:36:31 -08:00
Sahil Batra af36e9f823 css: Add "bootstrap-focus-style" class to select elements.
This commit adds "bootstrap-focus-style" class to the select
elements such that we can add CSS rule for focusing a select
element at single place only using this class.
2023-01-26 12:36:31 -08:00
Sahil Batra 0d4839d900 modal: Add bootstrap CSS rules for select elements in modal.
This commit adds bootstrap CSS rules used for select elements
used in different modals in modal.css.

This change is done so we can safely remove select CSS
rules from bootstrap.css as a part of our process to
remove bootstrap.

This commit also changes the CSS for propagate mode select
element in "Move messages" modal to use ID as selector
instead of class such that the width property can be
overridden correctly.
2023-01-26 12:36:31 -08:00
Sahil Batra 45fcd9ee45 settings: Add bootstrap CSS rules for select elements.
This commit adds bootstrap CSS rules used for select
elements in settings page in settings.css.

This change is done so we can safely remove select CSS
rules from bootstrap.css as a part of our process to
remove bootstrap.

Due to this change, a couple of settings have lesser
margin at the bottom than before, but they look fine
with lesser margins and anyways had unnecessarily
larger margin before.

We also update the selector used to set width of
desktop-icon-count-display setting such that the
default of 220px is correctly overridden by the
specific CSS for this element.
2023-01-26 12:36:31 -08:00
Sahil Batra a3a3f7796a stream_settings: Add bootstrap rules for select elements.
This commit adds bootstrap CSS rules used for select
elements in stream settings to existing CSS in
subscriptions.css.

This change is done so we can safely remove select CSS
rules from bootstrap.css as a part of our process to
remove bootstrap.
2023-01-26 12:36:31 -08:00
Sahil Batra bbcca49a5e invite: Add bootstrap CSS rules for select elements in invite modal.
This commit adds bootstrap CSS rules used for select elements in
invite UI in zulip.css.

This change is done so we can safely remove select CSS rules from
bootstrap.css as a part of our process to remove bootstrap.

This commit also adds class to a couple of select elements in invite
UI such that we can use those class to write CSS as using IDs would
lead to the dark-theme background not being applied correctly.
2023-01-26 12:36:31 -08:00
Sahil Batra 275da6b300 activity: Add bootstrap CSS rules for select elements in support page.
This commit adds bootstrap CSS rules used for select elements in
activity support page in activity.css.

This change is done so we can safely remove select CSS rules from
bootstrap.css as a part of our process to remove bootstrap.
2023-01-26 12:36:31 -08:00
Sahil Batra 4be60fa1ba upgrade: Add bootstrap CSS rules for org type select element.
This commit adds bootstrap CSS rules used for org type select
element in sponsorship page in billing.css.

This change is done so we can safely remove select CSS rules
from bootstrap.css as a part of our process to remove bootstrap.

We also remove inline style for this element and instead add
it with other CSS in billing.css.
2023-01-26 12:36:31 -08:00
Sahil Batra 6de03c415c integrations_dev_panel: Add bootstrap CSS rules for select elements.
This commit adds bootstrap CSS rules used for select elements in
devtools integrations panel in integerations_dev_panel.css.

This change is done so we can safely remove select CSS rules from
bootstrap.css as a part of our process to remove bootstrap.
2023-01-26 12:36:31 -08:00
Sahil Batra d708bc338c register: Add bootstrap CSS rules for select elements.
This commit adds bootstrap CSS rules used for select
elements in realm creation form to the existing CSS
in portico_signin.css.

This change is done so we can safely remove select CSS
rules from bootstrap.css as a part of our process to
remove bootstrap.
2023-01-26 12:36:31 -08:00
Sahil Batra 72b528e22b development: Add bootstrap CSS rules for select in dev login form.
This commit adds bootstrap CSS rules used for select element
in dev login form in portico_signin.css.

This change is done so we can safely remove select CSS rules
from bootstrap.css as a part of our process to remove bootstrap.
2023-01-26 12:36:31 -08:00
Sahil Batra e14b1f03fa register: Refactor template for new account registration.
This commit refactors the template code for source-realm
select element to have same structure as other inputs
and select element in the page. Thus this change also
makes the styling of source-realm select element consistent
with other select element in the page.
2023-01-26 12:36:31 -08:00
Sahil Batra 970d692d69 settings: Fix upgrade-banner for narrow width screens.
The upgrade banner was being clipped for narrow width screens
and was only partially visible. This commit changes it to instead
wrap the content such that complete content is visible on the
screen.

We also decrease the right margin for icon in the banner such
that the text of the banner fits in one line for at least normal
screen size and zoom in stream settings overlay.
2023-01-26 10:31:07 -08:00
Lauryn Menard 019fa7e122 organization-profile: Update deactivate organization section.
Removes the info icon with the tooltip information and replaces
it with a question help link icon to the help center article on
deactivating an organization.

Also, when the button is disabled, adds a tooltip on hover that
explains only organization owners can deactivate an organization.

If the current user's owner role is changed, then the button and
tooltip are live updated.

Part of #22892.
2023-01-24 13:09:53 -08:00
Aman Agrawal 37431cf0b5 urls: Provide `email` as a GET parameter.
Since we want to use `accounts/new/send_confirm` to know how many
users actually register after visiting the register page, we
added it to Google Tag Manager, but GTM tracks every user
registration separately due <email> in the URL
making it harder to track.

To solve this, we want to pass <email> as a GET parameter which
can be easily filtered inside GTM using a RegEx and all the
registrations can be tracked as one.
2023-01-24 11:29:50 -08:00
Aman Agrawal f4e9bf269c css: Fix positioning of text elements in message row without sender.
When I changed the padding for message content in the PR which
converted the message row to a grid, I forgot to adjust
the position of edited and time elements.
2023-01-23 16:41:03 -08:00
Sahil Batra ba1188db05 settings: Rename admin-realm-time-limit-input class.
This commit renames admin-realm-time-limit-input class to
time-limit-custom-input such that there is no confusion
when it is used for stream settings also.
2023-01-20 12:45:53 -08:00
Sahil Batra bc5f0e881e settings: Rename IDs of waiting-period-threshold setting elements. 2023-01-20 12:45:53 -08:00
Tim Abbott 235768ae4c setting: Remove now unused dependant-inline-block class. 2023-01-20 12:39:28 -08:00
Sahil Batra 802deb1761 settings: Remove form-horizontal class from modal templates.
This commit removes form-horizontal class from various modal
templates. We add CSS for margin-bottom property for select
and input elements to keep the design same as before. Most
of the added CSS can be removed once we remove bootstrap
CSS completely for these elements.

We can safely remove this class since vertical-align property
is already present due to other bootstrap CSS. And
margin-bottom property for checkbox inputs are added by
bootstrap and for text inputs inside ".new-style" element it
is handled in app_components.css. For other inputs, this commit
adds CSS as mentioned above.

The display property for inputs other than checkbox and select
elements is set to inline-block by other bootstrap CSS.
For checkbox-type inputs browser sets display property to
inline-block but it is eventually computed to "block" as the
float property is set to left and so it is not required to
set display property for checkbox type inputs.
2023-01-19 17:26:58 -08:00
Sahil Batra 8b7a911b0e settings: Remove form-horizontal class from settings template.
This commit removes form-horizontal class from form elements
in user profile, org profile, org settings and org permission
pages. We also add margin-bottom property for select elements
in this page.

We can safely remove this class since vertical-align property
is already present due to other bootstrap CSS.
And margin-bottom property for checkbox inputs are added by
bootstrap and for text inputs it is handled in
app_components.css.

The display property for inputs other than checkbox and select
elements is set to inline-block by other bootstrap CSS.
For checkbox-type inputs browser sets display property to
inline-block but it is eventually computed to "block" as the
float property is set to left and so it is not required to
set display property for checkbox type inputs.

We have added CSS for select elements in settings.css which can
be removed later once we remove bootstrap for select elements
completely.
2023-01-19 17:26:56 -08:00
Sahil Batra a144166e12 settings: Remove form-horizontal class from notification settings.
This commit removes form-horizontal class from time-limit-setting
div in notfication_settings.hbs. We can safely remove this class
since display and vertical-align properties are applied for select
and input elements by other bootstrap CSS, the margin-bottom
property for custom input is applied by existing CSS in
app_components.css and this commit adds margin-bottom property for
select elements.

The CSS added in this commit will probably be removed once we
remove bootstrap CSS rules for select elements completely.
2023-01-19 17:26:11 -08:00
Sahil Batra 48dec70099 invite: Remove form-horizontal class from invite modal.
This commit removes form-horizontal class from invite_user
template. We can safely remove this class as vertical-align
property is already handled for input and select elements
by other bootstrap CSS.

For checkbox type inputs, the display property is already
set to inline-block by browser for all input elements but
it is eventually computed to "block" since float property
for this element is set to left. So, setting display
property is not necessary for checkbox input.

We add margin-bottom property CSS for now and that can
eventually be removed when we remove bootstrap CSS for
these elements completely.
2023-01-19 17:24:48 -08:00
Sahil Batra 3920a73b20 social_auth_select_email: Remove form-horizontal class.
This commit removes form-horizontal class from form elements
in social_auth_select_email.html. There is no visible input
element in the form element so the bootstrap CSS using
"form-horizontal" class does not apply to any of the elments
in the page, so removing this class does not have any affect.

The "form-horizontal" class is used in portico-signin.css for
adding hover behavior, so we add a new class "select-email-form"
and use it to add the hover behavior.
2023-01-19 17:24:14 -08:00
Aman Agrawal a31df1d58b css: Don't render message failed buttons.
We used to make message failed button (retry / cancel) invisible
when the message is successfully send instead of not rendering them.
This resulted in them being accessible via keyboard when they are not
visible. I couldn't find a reason for retry and cancel buttons to
use `visibility` to be hidden instead of just being not rendered via
`display: none`.
2023-01-19 10:57:14 -08:00
Praveen Kumar 5b89f34f48
message_failed: Hide focus rectangle while animating.
The focus rectangle would spin along with the arrows, which looked bad.

We do want to allow focus rectangles on this element for keyboard interaction,
so we just disable the focus rectangle during the animation.

Fixes #24110.
2023-01-19 10:40:27 -08:00
Evy Kassirer cc35e2f9b2
navbar: Remove stale .rightside-userlist CSS class.
Since fbe9a9e539, the top_navbar element
unconditionally has the rightside_userlist class. There's some CSS
associated with this class NOT being present, which can be deleted as having
no effect, and then we can remove the class as having no effect as well,
2023-01-19 10:37:38 -08:00
Lauryn Menard 1e96c6e9a2 settings-profile: Move tooltip for name change disabled to field.
Moves the tooltip when name changes are disabled to be shown on
hovering over the full name input field. Removes the question icon
that previously showed the tooltip on hover.
2023-01-18 13:39:16 -08:00
Sahil Batra e80e3b07c4 settings: Fix flickering of icon when hovering on discard button.
The color of "x" icon in "Discard" button flickers when hovering
over the button. This commit fixes it by just adding the hover
color to the text and not icon which was anyways set to original
color using different selector which was the cause of flickering.
2023-01-17 14:45:48 -08:00
Sahil Batra c0e2c9b6d6 settings: Change hover behavior of save discard buttons.
This commit fixes the hover behavior of save-discard button
in dark theme. We change the text to be slightly brighter
on hover and keep the icon color same.

The background-color property is removed from hover CSS. This
change is safe because for save-button, we already define
different hover behavior below which takes precedence. And
for light-theme, the discard button already has the same
background-color without hovering, so this property was only
affecting discard button in dark-theme.
2023-01-17 14:45:48 -08:00
Sahil Batra e804795fa6 settings: Fix text color for discard button in dark theme.
We change the color of text and "x" icon in the discard
button in dark theme to be same as that of other text
in the settings page.
2023-01-17 14:45:48 -08:00
Sahil Batra 4e63794ddd settings: Fix background-color of save-discard widget in dark theme.
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.
2023-01-17 14:45:48 -08:00
Sahil Batra 316248308a bot_avatar_row: Remove ".bot_error" element.
We do not use ".bot_error" element to show errors
anymore after a9893fb654 added confirmation modal
for reactivating bot.
2023-01-17 09:45:40 -08:00
Lauryn Menard 2a60e4c1e6 portico-signin: Clean up CSS for buttons on dev login page.
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.
2023-01-17 09:44:26 -08:00
Lauryn Menard 49daf6743a portico-css: Remove unused `find_account` CSS rules.
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.
2023-01-17 09:42:56 -08:00
Aman Agrawal 1f3367abfb message_list_view: Remove dead next_is_same_sender code.
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.
2023-01-14 14:49:28 -08:00
Lauryn Menard 1a3b0edf4b account-settings: Disable deactivate account button when only owner.
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.
2023-01-11 13:30:31 -08:00
Lauryn Menard d3a513f4bd image-upload-widget: Render `image_disabled` div if text to display.
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.
2023-01-11 13:12:59 -08:00
Manas Jayaswal 3cbec56e81 image-upload-widget: Fix hover behavior when image cannot be changed.
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.
2023-01-11 13:12:59 -08:00
Aman Agrawal 26011c98fd css: Use grid layout for messages.
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.
2023-01-10 17:03:37 -08:00
Sahil Batra 1cfded7e6f billing: Use same font-family for inputs as for rest of the page.
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.
2023-01-02 08:28:34 -08:00
Sahil Batra 541076ca68 integrations_dev_panel: Use same font-family as used in the app.
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.
2023-01-02 08:28:34 -08:00
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