Commit Graph

349 Commits

Author SHA1 Message Date
Sahil Batra 2eb204f699 settings: Add move_messages_between_streams_limit_seconds element in UI.
This commit adds dropdown for move_messages_between_streams_limit_seconds
setting which is used to control for how long the user is allowed to
edit stream.
2023-02-08 12:46:05 -08:00
Sahil Batra 4378b1639d settings: Add move_messages_within_stream_limit_seconds element in UI.
This commit adds dropdown for move_messages_within_stream_limit_seconds
setting which is used to control for how long the user is allowed to
edit topic.
2023-02-08 12:46:05 -08:00
Palash Baderia 0ca5d11670 settings: Improve column widths in settings > uploaded files.
Changed the width of the file column to show the names properly,
while making sure that the table UI remains consistent in different
languages too (checked the same for Russian language).

Drop the file size column if the viewport is less than 992px (lg_min)
to ensure that the size word doesn't break when there are no uploaded files.
Discussed on CZO thread.

Changed the position of the Date uploaded arrow to stay visible
in all view ports and added word-break to prevent spill over of Mentioned-in
and date uploaded.

Fixes: #23738
2023-02-07 15:15:40 -08:00
Sahil Singh dd85e8b4f5 settings: Fix emoji image preview with wide images.
The image preview in the 'upload_widget' would scale images that are
wider than the intended square shape for custom emoji; this resulted
in a misleading preview, because the server will instead crop such
images to take their leftmost square.

Fix this using 'object-fit: cover', to have the browser do something
similar.
2023-02-03 11:47:19 -08:00
Sahil Singh 0870ad5d14 settings: Preview bot avatar in bot editing/creation forms.
Previews of the current bot avatar and the uploaded bot avatar were not
displayed during bot creation or editing.

We address this by extending The 'upload_widget' component with with
'preview_text' and 'preview_image' parameters to provide a preview of
the image that will be used as the bot's avatar during bot creation or
editing.

Fixes #23023.
2023-02-03 11:47:19 -08:00
Ganesh Pawar b7335d0dec custom_emoji: Convert inline form to modal.
Fixes part of #21298.
2023-02-02 10:59:57 -08:00
Sahil Batra a2315422e7 settings: Override bottom margin for inputs.
We override the bottom margin added by bootstrap for
url type custom profile input in user profile page
and all the inputs in edit-user form. Previously, this
was handled by form-horizontal class which was removed
in #24057.

For most of the other text-type inputs, it is overridden
in app_components.css and for checkbox-type inputs, it is
overridden by other bootstrap CSS itself. But that only
handles text-type and checkbox-type inputs inside
".new-style" element and not url type inputs.
Some other inputs already have specific CSS to override the
bootstrap CSS.

For the same reason, there is no need to override bottom
margin for inputs in organization profile as there is no
url type inputs in that page and this commit removes the
CSS for it.
2023-02-01 14:48:48 -08:00
Lauryn Menard e6bfdc7d34 settings: Create shared class for tooltips on disabled settings.
Creates a shared `disabled_setting_tooltip` class that can be
reused in cases where a personal or organization setting button
or input is disabled and a tooltip is added to give information
about why the user cannot change/access the setting.
2023-02-01 14:46:02 -08:00
Lauryn Menard 264a34d543 settings-css: Combine rules for disabled button `pointer-events`. 2023-02-01 14:46:02 -08:00
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 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
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
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
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 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 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 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
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 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
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 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
Sahil Batra cebf43903c settings: Fix height of left sidebar for short screens.
It was not possible to scroll to the bottom of the list on
narrow-width when only single column was displayed on the
settings overlay. This commit fixes the height of the sidebar
and set to "100% - height of header - height of tab-container"
which fixes the scroll behavior.

This is not a issue for two-column overlay where height is set
to "100% - height of header" (the tab-container is already
inside the header).

This duplicates some CSS to avoid using "!important". While doing
this duplication, we remove "margin: 0" and "display: block" since
these are already set as default values.

Fixes #22876.
2022-10-16 19:16:53 -07:00
Sahil Batra de257d434f settings: Set min width of role column.
We set minimum width for role column in users list,
deactivated users list and bots list such that role
value always fits in one line.

Fixes #23218.
2022-10-13 10:05:20 -07:00
evykassirer c321f57785 settings: Explain that Google blob emojis are deprecated.
Part of fixing #19371.
2022-10-04 12:29:35 -07:00
Ganesh Pawar 5b75fcd3e7 settings: Convert `form` to `div` in `Full name` input.
This prevents the web app from being reloaded when the user presses
`Enter`.

Fixes #22906
2022-09-29 17:11:15 -07:00
Sahil Batra 17aba277c5 settings: Change id and name of message delete limit dropdown.
We change the id and name of message delete limit dropdown to
"id_realm_message_content_delete_limit_seconds" and
"realm_message_content_delete_limit_seconds" respectively.

This is a prep commit for sending only changed settings in
message editing section to the API.
2022-09-23 16:24:16 -07:00
Sahil Batra 1e9c65b759 settings: Change id and name of message edit limit dropdown.
We change the id and name of message edit limit dropdown to
"id_realm_message_content_edit_limit_seconds" and
"realm_message_content_edit_limit_seconds" respectively.

This is a prep commit for sending only changed settings in
message editing section to the API.
2022-09-23 16:24:16 -07:00
Yogesh Sirsat 6db88f0d39 settings_bots: Move "Add a new bot" tab inside a modal.
"Add a new bot" tab from personal `settings > bots` moving this
into a modal form, so we can trigger this form from other places
too without duplicating the code.

Fixes part of #20309.
2022-09-23 12:06:51 -07:00
Sahil Batra 086147fdc4 settings: Move display_in_profile_summary checkbox to center.
We move display_in_profile_summary checkbox in the custom
profile fields table to center. We also need to move heading
subsequently to the center.
2022-09-21 11:06:54 -07:00
Yogesh Sirsat a3094d0f26 custom_profile_fields: Toggle new "display_in_profile_summary" field.
Custom profile fields table `CSS` changed to fit the new "Display"
column of checkboxes, checkboxes are for select/deselect custom
profile field to display in profile popover.

New option "Display in profile summary" added in create and edit
custom profile fields form, with the help of this the user can
pick max of 2 custom profile fields except for `LONG_TEXT` and
`USER` fields to display in his user profile popover.

Checkboxes will go in a disabled state, with an explanatory tooltip,
if we've already passed the limit of 2 fields with this setting
enabled.

Fixes #21215.
2022-09-20 17:03:57 -07:00
Yogesh Sirsat 9416427dc2 settings_bots: Open bots streams tab from personal settings > bots.
UI in settings for bot owners to unsubscribe their bots from streams,
Personal settings > Bots > Bot info card > hashtag icon.

Fixes: #22460
2022-09-16 17:51:34 -07:00
Yogesh Sirsat 23fbd38b4c bots: Display full user profile modal for bots.
This commit can display a full user profile modal for bots too,
by clicking on "View Full Profile" in the profile info popover
same as normal users.

Fixes part of: #21402
2022-09-16 17:51:34 -07:00
Ganesh Pawar 7f8f954897 bots: Remove redundant overflow CSS.
This was added to avoid the `owner` dropdown field from being
only partially visible in the `Manage bot` modal. But, now the
`owner` field is moved up in the modal so this isn't needed.
2022-09-14 15:45:36 -07:00
sayamsamal c8f346b5e5 icons: Change mute icon from bell to speaker.
This icon is more standard, and lets us use a speaker icon for other
applications.

Fixes #21751
2022-09-09 17:32:19 -07:00
Raghav Luthra 4dad9fa158 user_settings: Add user setting to control the user list style.
Added a user_list_style personal user setting to the bottom of
Settings > Display settings > Theme section which controls the look
of the right sidebar user list.

The radio button UI includes a preview of what the styles look like.

The setting is intended to eventually have 3 possible values: COMPACT,
WITH_STATUS and WITH_AVATAR; the final value is not yet implemented.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
2022-09-09 16:30:54 -07:00
Sahil Batra bef9592d49 settings: Move custom input div inside the main setting div.
This commit moves "dependent-block" div inside the main
setting "input-group" div as the custom input is part of
that setting only. Also this will help in further refactoring
of settings code which will be done in next couple of PRs.

There are no changes visually, the space between settings
and inputs remain same.
2022-09-06 11:14:02 -07:00
Het Patel b6a4e38c9d
settings: Fix styling of preview organization profile button.
Fixes #22743.
2022-08-30 22:58:56 -07:00
Ganesh Pawar e758ec400b alert word: Convert inline form to modal. 2022-08-15 19:07:38 -07:00
Tim Abbott 0b350f23af settings: Remove useless .controls CSS.
These settings widgets have not had an object with the .controls CSS
class at least since they were given independent template files.
2022-08-13 17:11:36 -07:00
Tim Abbott e30e8c0e6d settings: Fix settings inputs broken in mobile sizes.
In 84e307581f, we removed the HTML that
these CSS rules applied to. (We incorrectly only tested that commit in
desktop sizes).

Also, the width: 100% rule both did not have sufficient priority to
apply, and also exceeded the size of the input. Fix this with a hacky
!important, since there's a good chance we'll replace these inputs
with a modal or something.
2022-08-13 17:11:36 -07:00
Sahil Batra 8302337aa9 settings: Add tooltip for user read receipts setting.
We show tooltip for user read receipts setting mentioning
that the organization has disabled read receipts setting
when an organization does so. We hide the tooltip when
organization read receipts setting is enabled.

We also fix the alignment of "i" icons with label and headings
at various places by moving it 1 pixel below. There may be
some places where it is not fixed, but those will be fixed
separately.
2022-08-12 11:21:44 -07:00
Rishabh-792 91a0e14778 settings: Fix text alignment in save and discard buttons.
The text inside save/discard widget buttons was misaligned with
respect to the icon in the button. To align it properly, we add
vertical-align and a reduced line-height property to the span.

Fixes: #20583.
2022-08-11 16:12:18 -07:00