Commit Graph

3930 Commits

Author SHA1 Message Date
anurastogiji 1921dce7c7 message_edit: Swap propagate_mode with checkboxes in message edit form.
Previously, we had you select where to send notifications before
specifying which messages you're moving, which seems like the wrong
decision hierarchy.

Fixes #19973.
2022-08-06 22:28:40 -07:00
madrix01 c1b5021d84 stream_list: Sort muted to end of sections and add labels.
The stream list left sidebar currently has 3 sections:
* Pinned (+ Muted pinned streams)
* Active (+ Muted active streams)
* Inactive streams

Previously, these sections were separated by horizontal lines, which
did not provide an easy way to discern why there were sections. We add
labels to these section dividers to help with this.

Additionally, within each section, we now sort all muted streams to
the bottom, so that they general minimal clutter.

Fixes #19812.
2022-08-06 21:59:23 -07:00
Julia Bichler 0a278c39d2 settings: Send email after deactivating user.
This adds a feature where an admin can choose to send an email
with custom content to an user after they deactivated them.

Fixes #18943.
2022-08-06 21:41:53 -07:00
Tim Abbott 7767ed217d recent_topics: Fix overly wide unread count focus outline. 2022-08-06 19:54:29 -07:00
yogesh sirsat 87ba3c1549 custom_profile_fields: Convert edit profile field form into a modal.
This allows this component to follow existing design patterns, rather
than being its own unusual element with various quirks.

The implementation is approximately the same as before I just migrated
"Edit custom profile field" form into modal, like "Add new custom
profile field" form modal.

Fixes: #21634
2022-08-05 17:26:56 -07:00
yogesh sirsat 526b55c6fc custom_profile_fields: Convert new profile field form to a modal.
This lets us remove this fairly ugly user interface widget, which was
inconsistent with the rest of the settings UI.

The implementation is approximately the same as before I just migrated
"Add new custom profile field" form into a modal, status update
notifications about these forms will be displayed inside their modal,
and made some little design changes as discussed on CZO.

Fixes part of: #21634
2022-08-05 17:26:56 -07:00
Ganesh Pawar 5697f7f269 archive stream: Update modal text.
Fixes #22658.
2022-08-05 15:55:13 -07:00
evykassirer 1167bb79ef compose: Match top right buttons' color to other compose buttons. 2022-08-03 17:08:01 -07:00
Sahil Batra 9ac6160d35 settings: Remove edit_bot.hbs and CSS for non-existent classes.
Since we updated the bot edit form opened from "Personal"settings
section to be same as that opened from organization settings
section, we do not require this file anymore.

Fixes: #22033.
2022-07-31 16:56:03 -07:00
Sahil Batra 1455f290f2 settings_bots: Use same modal that is used in admin bot-edit form.
We change the edit form opened from "Personal" settings section
to be same as the form opened from "Organization" section.
2022-07-31 16:56:03 -07:00
Aman Agrawal ca275c4c10 integrations: Convert `integration-main-text` selector to class.
This can now be used in multiple places.
2022-07-28 19:04:43 +00:00
Ganesh Pawar e59512764d modal: Use font-weight 600 for modal title. 2022-07-27 14:37:32 -07:00
Anders Kaseorg 35778fa100 overlays: Remove unused support for Bootstrap modals.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-07-26 17:48:31 -07:00
Tim Abbott 83fa5741ca css: Scope edit_bot_form custom CSS. 2022-07-26 17:00:01 -07:00
om2137 6013a1f4fc css: Use more consistent visuals for edit bot form.
* Use more consistent font style, both within the form and with the
  rest of the app.
* Use more consistent spacing.

Fixed #21410.
2022-07-26 16:58:43 -07:00
Aman Agrawal 594b3abadc landing_pages: Fix gradient mismatch with background on wide screens.
Make the gradient end in white color to match the background.
This avoids a weird line in the background at the end of the
gradient.
2022-07-25 16:55:13 -07:00
Aman Agrawal 2e4a525669 plans: Improve design of faq answers. 2022-07-25 16:55:13 -07:00
Sahil Batra 28799c5d84 settings: Mention about sponsorship in upgrade banner.
We mention about sponsorship in upgrade banner to non-business
organizations. The message for business organizations is same
as before.

There is no explicit hover behavior for banners for org types
other than business, as banners are not themselves links in
such cases and only parts of text inside the banner are links.

Fixes #22161.
2022-07-25 16:53:37 -07:00
Sahil Batra 74476317fd compose: Remove validation for stream named "announce".
Originally, DEFAULT_NOTIFICATION_STREAM_NAME was set to
"announce" and we also showed warning in frontend when
user was composing message to "announce" stream and if
the stream had more than 60 subscribers.

But we changed DEFAULT_NOTIFICATION_STREAM_NAME to "general"
in d46b125bf2. That commit did not remove the frontend code
for showing warning and this commit removes it since there
is no "announce" stream by default now, and we would not
want to show warning when sending to "general" since that
stream could be used for many discussions and it would not
be nice experience to show warning everytime.
2022-07-22 17:19:40 -07:00
Ganesh Pawar e16e7630e6 minor: Add `z-index` to `message_time` class.
This fixes the issue of the timestamp in a message not
being clickable at smaller widths.
2022-07-22 16:39:53 -07:00
Alex Tereschenko 9142aab8ba settings_org: Use settings_checkbox in Authentication Methods UI.
Per review feedback in #21002, replace HTML table with a series
of settings_checkbox components for Authentication Methods UI.

Fixes #21001.
2022-07-22 16:38:47 -07:00
Aman Agrawal 768d7630af footer: Reduce links for self-hosted installations on signup pages.
On registration and login pages on self-hosted Zulip servers,
it is not helpful and confusing to show the full navigation footer
for the Zulip website. Instead, we should show a minimal footer.

Fixes #21776
2022-07-22 15:46:42 -07:00
sayamsamal bfc1901289 user_profile_modal: Move profile avatar to the top on smaller screens.
Moving the profile avatar to the top on smaller screen sizes adds to
the general responsiveness of the profile modal.
2022-07-22 15:28:05 -07:00
sayamsamal a5088db6f1 user_profile_modal: Fix long values flowing under the profile avatar.
When some value is very long as in the case of a long email address,
the text used to flow and hide under the profile avatar. We want the
values to be seen at all times, even if they need to be broken into
multiple lines.
2022-07-22 15:28:05 -07:00
sayamsamal d810c285e3 user_profile_modal: Move user status to right and add status icon.
The user status appears out of place among the profile fields and thus
placing it under the avatar avoids any discontinuity between the profile
fields. This also adds the status icon beside the user status.
2022-07-22 15:28:05 -07:00
sayamsamal aebff0fd61 user_profile_modal: Move avatar in full profile to the right.
The placement of the avatar on the right makes the full profile modal
UI consistent with Settings > Profile UI. This also helps the custom
profile fields appear more in line with the default profile fields.

Fixes #21805
2022-07-22 15:28:05 -07:00
sayamsamal 2854eacc7f user_profile_modal: Fix label alignment for non-English languages.
This fixes the issue in which the lengthy labels would either overflow
or affect the alignment of the profile fields.
2022-07-22 15:28:05 -07:00
Julia Bichler ccbdbe4e3b message-editing: Reword move message menu. 2022-07-19 11:50:28 -07:00
Anders Kaseorg a7263583db landing-page: Remove unused hero-screen class.
It’s unused since commit 7f32c26731.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-07-13 16:32:01 -07:00
Alya Abbott 4b8556ed13 images: Move /apps images into dedicated apps image directory. 2022-07-13 15:14:19 -07:00
Alya Abbott 07851077d4 images: Move /features images into dedicated features directory. 2022-07-13 15:14:19 -07:00
Alya Abbott 7b729a07fb images: Move /for/events background image into events images directory. 2022-07-13 15:14:19 -07:00
Alya Abbott 5eccf9743c images: Move /why-zulip images to static/images/landing-page/why-zulip/. 2022-07-13 15:14:19 -07:00
Riken Shah 3ba89e7779 message_scroll: Use CSS transition for scroll to bottom button.
We are abandoning jQuery animation because it build up queue
when there is continous switch in animation state.
i.e When user goes ↑↓↑↓↑↓… at the bottom.

Also added `aria-hidden` to `#scroll-to-bottom-button-container` so
that this widget doesn't interfere with screen readers.
2022-07-13 13:50:55 -07:00
Aman Agrawal f28e89d8b7 popovers: Use css_variables for media queries. 2022-07-12 17:23:15 -07:00
Aman Agrawal df6ad8154a default_language_modal: Add more space around languages displayed.
We use 3 columns on wide screens and come down to 1 column on
narrow screens to ensure that the languages are properly
displayed.
2022-07-12 17:23:15 -07:00
evykassirer ce399cf08f mark as read: Fix button styling for medium-sized screens. 2022-07-12 16:28:34 -07:00
Ganesh Pawar 507dc0127c draft: Fix vertical ellipsis color on hover. 2022-07-12 12:18:56 -07:00
Lauryn Menard 32d396fdc7 help-docs: Remove `mac-cmd-style` CSS rule.
Removes the `mac-cmd-style` CSS rule that was introduced in
d3e8348 when support for updating keyboard shortcuts with
the `Ctrl` key to the Mac cmd key, `⌘`, was added.

Removing the rule makes the font-size and font-family CSS more
consistent with other keyboard shortcuts in the documentation.

Also, removes the parameter in `adjust_mac_shortcuts` that added
the CSS class / rule to these specific keyboard shortcuts.
2022-07-12 12:17:41 -07:00
Ganesh Pawar c6d636ef48 realm_domains_modal: Migrate modal to dialog_widget. 2022-07-07 14:56:45 -07:00
Anders Kaseorg 16b2874b87 styles: Fix selector-not-notation.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-07-06 17:23:16 -07:00
yogesh sirsat 90364d7fa8 stream_settings: Stream subscribers table head borders fix.
New shared `table-striped` CSS class, adds top and bottom side border
already, so adding only left and right side borders to subscribers table
head to avoid weird looking borders.
2022-06-30 11:25:26 -07:00
yogesh sirsat d7c5434827 tables: Cleanup of table-striped CSS block.
Making `table-striped` CSS block as a top level shared CSS inside
`app_components.css`, trying to make use of this block on every
table and also removing some dublicated CSS.

Follow-up of #21144
2022-06-30 11:25:26 -07:00
Lauryn Menard dd8fe68223 docs: Remove CSS padding rule for multi-paragraph ordered lists.
Removes CSS rule that added a left margin and padding to not
first-child paragraph elements and `codehilite` class div elements
in ordered list elements.

Rule was added in 2017 and likely was correcting the alignment of
these elements due to another CSS rule that has since been removed.
2022-06-30 11:12:11 -07:00
Anders Kaseorg 028c2e4ec9 ui_init: Remove unused .subscription_header hover handlers.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-06-21 12:54:51 -07:00
Anders Kaseorg 1e6bc5b36b styles: Delete some unused CSS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-06-10 12:27:48 -07:00
NerdyLucifer c31ab1bcb5 recent-topics: Mark as read using unread counters in Recent topics.
The PR changes the following behaviors and UI:
1. Removes the checkmark button to mark the topic as read in
"Recent Topics".
2. Make the unread messages counter be the button for marking
all messages in the topic as read. The unread messages counter
is made clickable and tooltip is set to "Mark as read".

In "recent_topic_row.hbs", remove the checkmark button and add
classes and attributes to ".unread_counter" to give it desirable
behaviour on clicking.

In "zulip.css" set "opacity: 0.7" for ".on_hover_topic_read".

In "recent_topics.css" we set the background-color of unread counter to
hsl(105, 2%, 50%) to decrease fading of unread counter.

Fixes: #21654
2022-06-08 11:58:25 -07:00
madrix01 b5e21ceeaf recent_topics: Prevent topic name from extending into unread column.
Previously, when there were no unread messages in a topic, the topic
name was allowed to expand into the space allocated to the unread
count. This matched the behavior of the left sidebar. However, the
left sidebar has extremely limited horizontal space, and being able to
display a few extra characters is useful; recent topics does not have
this constraint. Further, recent topics wraps long topic names on
overflow, which looks ugly when using use the unread count's space.

So we switch to having the unread count element consume space even
when there is no count, using `visiblity:hidden`.

Fixes a part of #19449
2022-06-02 12:49:02 -07:00
Aman Agrawal 422b096b9a language_selection_modal: Add more padding between languages. 2022-06-01 17:08:00 -07:00
Aman Agrawal 66b80c8ae8 admin: Use language_selection_widget to set notification language.
Fixes #21948
2022-06-01 17:08:00 -07:00
Aman Agrawal 59e676b1f5 gear_menu: Allow spectators to select their default language.
Set the default_language as cookie and reload the page so that
the spectator can immediately see the language change in effect.

We can reload the page forcefully for spectators since there is
no chance of any work being lost. It is possible that the spectator
may lose the selected message on doing so.

This requires a new dependency, to be able to set cookies from
frontend JavaScript.

Fixes #21961
2022-06-01 17:08:00 -07:00
somesh202 0b92e4c22f org_settings: Fix formatting and field ordering for bot modal.
This commit fixes the formatting of the "Manage bot" modal and re-orders
the field labels as per the bot-list table.
2022-05-10 14:09:57 -07:00
anurastogiji 7a24da70a1 search: Fix x icon overlap in search and filter inputs.
We add `padding-right` to input field so that input do not overlap with
`x`and add `text-overflow: ellipsis` to make overflow less jarring.

Fixes #19765
2022-05-05 17:12:23 -07:00
Ganesh Pawar 59e810790f user_groups: Convert inline form to modal.
Fixes part of #21298.
2022-05-04 17:46:30 -07:00
Aman Agrawal ce62c11720 message_view_header: Add divider after stream name for spectator.
Since originally divider is a part of sub_count which is not
displayed for spectators, we need to add a new one for them.
2022-05-02 10:05:33 -07:00
Tim Abbott d0b3474ef6 login_to_access: Restore paragraph margin in modal.
Now that we have two paragraphs in some settings, this looks better.
2022-04-29 16:35:49 -07:00
Dinesh 68572e6bc8 compose: Display current narrow in go to conversation tooltip. 2022-04-28 12:57:42 -07:00
Dinesh 43107e1424 compose_box: Add button to go the narrow message is being composed to.
This'll be shown only when in a different narrow from what
you're composing to.

Takes care of updating display of the button on moving from
one narrow to another and also on changing inputs. This is
what contributes to majority of js code in this commit.

We are not displaying this for private messages since we do not
have a consistent design for both stream and private compose areas.
See https://chat.zulip.org/#narrow/stream/101-design/topic/narrow.20to.20topic.2Fpms.20when.20composing/near/1318548

Thanks to Vlad Korobov for the icon and for proposing various
designs.
2022-04-28 12:57:42 -07:00
Adam Sah 299995bd3a compose: Fix close icon in top right area.
There are two tangled issues addressed here:
* We were weirdly using a scaled up copy of fa-angle-up, rather than
  fa-chevron-up, for a chevron up, for the expand/collapse widget.
* We were previously using &times; for the close icon, which had
  visual and scaling issues next to the fa-angle icon.

Fixes #20403.
2022-04-25 18:26:37 -07:00
Tim Abbott 2268cb8477 css: Use variables for shared settings sizes. 2022-04-25 18:14:18 -07:00
sayamsamal dc573cbf50 settings: Fix simplebar overflow in settings sidebar.
The commit fixes the issue in which the settings sidebar would
overflow into the settings header when scrolled; it also adds
border-box model to minimize calculations and magic numbers.
2022-04-25 18:03:02 -07:00
yogesh sirsat f4e96f1071 recent_topics: Fix hover effect on recent topics table.
This changes recent topics to be consistent with our other tables. The
valus are copied from the common settings CSS for tables.

Ideally, we'd just share the CSS, but the existing table CSS is deep
inside a .settings-section CSS block, and it's a bit of a refactor to
share it.

Fixes: #21140.
2022-04-25 18:00:28 -07:00
Aman Agrawal 836aa2d5db subscriptions: Fix alignment and size of stream icons.
Reduced size of globe icon and fixed alignment of `#` icon.
2022-04-25 17:48:32 -07:00
Aman Agrawal d0a697fba7 recent_topics: Disable filter buttons for spectator.
Instead of setting `disable` attribute to the elements, we make
them look like disabled and remove interactions with them. This
helps us keep the hotkey handling logic for navigation easier
to manage.

Fixes #21279
2022-04-22 15:33:26 -07:00
Sahil Batra 77fd03e426 invite: Add custom option for invite expiration time in frontend. 2022-04-20 13:31:37 -07:00
Sahil Batra 6bb7f57ec2 settings: Decrease left-margin for the dependent blocks in settings UI. 2022-04-20 13:31:37 -07:00
Sdrummolo cb29eb9434 compose: Fix top right button positioning with long PM recipients.
Previously, these buttons were centered via flex, which meant that in
the rare case that a long list of private message recipients caused
the recipient area to line-wrap, these icons would be incorrectly
placed at the vertical center of the now multi-line block.

Fix this by setting an auto bottom-marging.

Fixes #21693.
2022-04-07 13:21:58 -07:00
Palash 4d44698805 stream_settings: Remove pencil icon from 'General' tab in stream settings.
For user who is not an administrator.
Also implemented a banner that notifies the user if they can edit
the following settings (name/description and stream permission).
Also increased padding-top of stream header by 10px. This change is done
to increase vertical spacing between the banner
and the stream header.

Fixes #20001.
2022-04-01 14:52:06 -07:00
Aman Agrawal 41b7b3d7a4 css: Adjust vertical alignment of globe and lock icons. 2022-03-25 17:02:18 -07:00
Aman Agrawal 9dd8d13e0c compose: Add more space around compose stream privacy icons.
This is especially to add more space around the globe icon since
it wider than lock icon, so the previously set padding for the
stream icon has to be increased.
2022-03-25 17:02:18 -07:00
yogesh sirsat 078d966c64 modals: Refactor help_link_widget for confirmation modal.
Added class "help_link_widget" and applied existing css,
to `a` tag of help_link_widget.

Follow-up of #21508.
2022-03-25 10:43:37 -07:00
yogesh sirsat 417766a3e3 modals: Fix margin for help_link_widget in confirmation modals.
The 5px margin is picked to match what we use in settings.
2022-03-24 12:11:47 -07:00
YashRE42 e88ca470ac right_sidebar: Apply left margin to unread counts.
This change was motivated by the addition of status emoji to the buddy
list. Previously there was no spacing between the status emoji and the
unread count, and as such, this commit adds a left margin to the
unread count.

The above change has an additional consequence, long user names such
as "Othello, the Moor of Venice" get truncated with ellipses, instead
of reaching to the edge of the unread counts (as they previously
would).
2022-03-24 11:07:37 -07:00
YashRE42 07df504c79 status_emoji: Bump margin-left on status emoji by 1 px.
While the 2px value that we had previously chosen looked alright for
most emoji (😀, 😃, etc) some emoji such as 🐙
used more of the width available to them and as such still looked too
close to the user name. As such this commit bumps the value to 3px
(4px was a bit too much space).
2022-03-24 11:07:37 -07:00
Aman Agrawal d006b6cc3d message_list_view: For spectators, show login button for failed images.
We render a login button for images that failed to load for
spectators. The image failed to load most likely due to being
rate limited by the server.

Fixes #19840
2022-03-24 10:50:00 -07:00
ditsuke 4d03a1b0b7 message_feed_view: Fit multiple images horizontally.
At the moment we fit only a single image per message per line. This is
wasteful of space as multiple images can be accomodated per line on
widescreen displays. This commit modifies the rendered_markdown
stylesheet to make this possible.

The comments detail various technical considerations.

Fixes #20975.
2022-03-22 22:35:17 -07:00
Tim Abbott 2f929bee2f compose: Match width of topic compose to left sidebar space.
Previously, the maximum width for the topic input in the compose box
was artificially limited to 20% of the width of the compose box.

While this may have had some useful role in encouraging short topics,
we can teach that idea in other ways, and it seems more helpful to
have the input length match what works well for viewing topics in the
left sidebar without being cut off.
2022-03-22 11:52:26 -07:00
Rishabh-792 3f0b0ee88c settings: Improve help icons in settings.
Improved the contrast of ? and i icons by changing their opacity to a
consistent 0.6, going to 1 on hover.

Changed the colour of playground icon by testing and added spacing
between title and the playground icon by changing the icon margin.

With some TODO comments added by tabbott for readability.

Fixes part of #20484.
2022-03-21 18:07:16 -07:00
SantamRC 373f700736 widgets: Fix line wrapping of todo descriptions.
The simplest solution for doing this involves adding some divs.

Fixes #20523.
2022-03-21 17:52:45 -07:00
My-Name-Is-Nabil cc32a3afff compose: Fix alignment of close buttons in stream invite banners.
Close buttons are misaligned if the warning banner text takes up two lines.

We increase the specificity of the selectors to ensure that this CSS
overrides Bootstrap.

Fixes #20839.
2022-03-21 17:47:12 -07:00
Biki-das 64ec62b15c portico: Fixed responsive of integration request buttons.
Previously, these buttons looked broken in mobile size screens.

Fixes #20799.
2022-03-21 16:44:06 -07:00
Aman Agrawal 61cf9d1843 compose: Minor realignment of compose icons. 2022-03-21 16:41:18 -07:00
Ganesh Pawar b7edd5df2f settings: Place the saving indicator in the header.
Fixes #21441.
2022-03-21 13:30:38 -07:00
sayamsamal 5fb3aa4f44 CSS: Deduplicate CSS in image_upload_widget.css. 2022-03-18 14:43:13 -07:00
sayamsamal b06178767b settings: Fix upload spinner alignment in image upload widgets.
The upload spinners for all of the image upload widgets were in
wrong alignment due to the use of magic numbers to center them.

This commit replaces the above mentioned approach with the use
of flexbox to fix alignment issues across all the image upload widgets.
2022-03-18 14:43:13 -07:00
sayamsamal 7fcac3288b settings: Fix alignment issues for non-English languages.
Due to differences in length of the words for different languages
there were alignment issues in the organization profile settings.

This commit uses flexbox to ensure that the alignment stays correct
for any changes in language/word length.

Fixes #21385
2022-03-18 14:43:13 -07:00
Aman Agrawal bae5f016bf compose_control_menu: Allow to enter press to open the menu.
Make `compose_control_menu_wrapper` clickable and allow tab focus
on it. Disable tab focus on `compose_control_menu` icon. Fix outline
for `compose_control_menu_wrapper`.

Extend out custom outline property to all `[role="button"]` elements.
2022-03-15 16:14:25 -07:00
jai2201 ea65da462e stream-settings: Use CSS nesting at media breakpoints.
Avoid writing repeated class name of `#subscription_overlay` and `subscription_settings`
for CSS at media breakpoints.
2022-03-10 16:00:21 -08:00
Tim Abbott e374d7ef7d css: Deduplicate a subscriptions.css heading. 2022-03-10 15:59:56 -08:00
jai2201 f68961533a stream settings: Remove dead preview-stream CSS.
Remove the CSS written for class 'preview-stream', which stopped
existing in the application in 368b585980.
2022-03-10 15:54:46 -08:00
Tim Abbott f9539617ee stream settings: Remove doubled 10px margin after heading. 2022-03-10 15:21:48 -08:00
NerdyLucifer 10e6fd04e7 stream_settings: Fix fonts & margins in create/edit stream form.
In "stream_types.hbs"
For "Who can access the stream?" and "Who can post to the stream?" replace
"h4" with "label" to make the for smaller and to remove boldness.
For "Message retention for stream" replace the "h4" with "label"
and add class="stream-title".

In "subscriptions.css":
Add "margin:25px auto" to "#announce-new-stream" to ensure equal
gaps above and below it.
Reduce margin and paddings for ".radio-input-parent".
For "select" set "width: fit-content" and
"height: fit-content" to ensure that the text in the
dropdown is clearly visible.

Fixes: #21322
2022-03-10 15:20:20 -08:00
Sayam Samal 681414caf1 user_profile_modal: Interchange posititons of "Joined" and "Role" fields.
This commit swaps the posititon of "Joined" and "Role" fields in the
User Profile Modal to make it consistent with settings/profile.
2022-03-10 15:10:24 -08:00
Sayam Samal 2f606ffbd9 settings: Fix text alignment issues in profile picture overlay.
Fixes #21342
2022-03-10 15:10:24 -08:00
Sayam Samal 9b378b0718 settings: Add responsiveness to textarea fields.
This commit adds responsiveness to textarea fields to improve the
responsive flow of the page.
2022-03-10 15:10:24 -08:00
Sayam Samal cccb3b1b32 settings: Move user details to the right side panel in profile section.
This commit moves the "Role" and "Joined" attributes to the right
side panel of settings/profile to maintain continuity between the
mutable fields.
2022-03-10 15:10:24 -08:00
Sayam Samal 2bf63c1e49 settings: Remove profile picture header in the profile section.
This commit removes the profile picture header and adds an overlay to
handle disabled avatar changes in an organization.
2022-03-10 15:10:24 -08:00
Sayam Samal d5821858dc settings: Fix hidden delete button in profile picture section.
This commit fixes the issue where the delete (x) button on the
top right corner of the profile picture section remains hidden
even when a hover action is performed on the profile photo.
2022-03-10 15:10:24 -08:00
Anders Kaseorg cbca80c846 styles: Fix some invalid CSS.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-09 09:37:31 -08:00
Steve Howell c43d48b22f stream create: Overhaul create-stream add-subscribers UI.
The most notable change here is that when you are adding
subscribers to a stream as part of creating the stream,
you can now use the same essential pill-based UI for
adding users as we do when you edit subscribers for an
existing stream.

We don't try to exactly mimic the edit-stream UI or
implementation, since when you are adding subscribers
during create-stream, we are just updating a list in
memory, whereas in the edit-stream UI, we immediately
send info to the server.

Fixes #20499
2022-03-07 16:58:58 -08:00
Steve Howell 2644fa9645 settings: Make list header sections consistent.
I made the header sections above all our settings
panel lists more consistent.

Before this change:

    * some lists had titles, others didn't
    * the placement of the filter box was random
    * alerts strangely went between the filter box
      and the list
    * filter boxes were too large
    * CSS was haphazard
    * forms were squished against tables

Now all the settings with list have consistent
HTML, CSS, and look-and-feel in the area directly above
their list of items.

With the exception of Custom Profile Fields, all the
lists with headers above them happen to be based on
ListWidget, but the header styling is not coupled
to ListWidget, because we want consistent headers
even if Custom Profile Fields has a non-ListWidget
list (due to its drag&drop features).
2022-03-04 14:37:28 -08:00
Tim Abbott 0c015c7bf3 css: Deduplicate CSS for .always_visible_topic_edit. 2022-03-04 13:25:30 -08:00
Junchen Liu e3237ae7e1 css: Fix hover color for "Edit topic" icon in recipient bars.
Previously, this had different hover behavior from the adjacent
elements, which seems like a bug.

The CSS for this component is shared with Recent Topics; we migrate
the styling for on_hover_topic_read for consistency.

Fixes #21273.
2022-03-04 13:25:30 -08:00
Steve Howell ea082af2ae edit stream: Make filter input more narrow.
You generally only need to type a few characters to filter
down to just a few folks, even in gigantic realms.

I tried not to make it **too** small, just in case, but
the default width was kind of gaudy.
2022-03-04 12:08:54 -08:00
Steve Howell 5f95a33fa3 create streams: Remove "Stream permissions" header.
The header was more confusing than helpful, and we
want the create-stream UI to be less cluttered.

We don't really need the help-center text here, since
we already have ? icons next to the relevant headings
for the sub-sections.

We kill off some CSS, but we won't kill off stream-title
until the big upcoming changes for stream pills.
2022-03-04 12:01:09 -08:00
Julia Bichler 24673b7a69 settings: Grey out muted streams in personal settings.
Muted streams are now greyed out in the personal settings,
also changes to the notification settings of a muted stream are
not possible anymore.

Also, add a bell-slash icon after the stream name of muted streams,
clicking on it unmutes the stream.

Fixes #19780.
2022-03-03 14:51:15 -08:00
Austin Riba 75a29d6b82 lightbox: Remove Pan/Zoom enable button.
With the recent changes to lightbox image handling in #21145 and #20788
it is no longer necessary to have panning and zooming disabled by
default. This commit removes the enable/disable button and instead
replaces it with a "Reset Image" button, and enables panning and zooming
as the default state of the lightbox.
2022-03-03 13:48:32 -08:00
Austin Riba eae0975b63 lightbox: Prevent long titles from altering layout.
This commit attempts to prevent images with long filenames,
descriptions, or author names displayed in the lightbox from altering
the layout of the page.

It also adds a title prop to both the filename and author, allowing a
user to hover and see a tooltip of the full text in the case where the
text is truncated.

Fixes #21058.
2022-03-03 13:48:32 -08:00
NerdyLucifer a5d22b1d1e message_feed_ui: Make unread marker line continuous.
Make the unread marker lines at the side of messages continuous by
adding "height: 100%" to ".unread-marker".

This provides a nicer visual experience by not highlighting the
boundaries between messages. (One can see that information using the
timestamps or by moving the selection cursor, where appropriate).

Fixes #20981.
2022-03-02 17:21:30 -08:00
Anders Kaseorg d4d277bd1f styles: Remove legacy IE gradient filters.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-03-01 23:09:46 -08:00
Aman Agrawal e0aba4c639 recent_topics: Center align globe icon. 2022-03-01 21:00:36 -08:00
Tim Abbott 05a17e5854 spectator: Use display: revert for only-visible-to-spectators.
Inherit uses the settings of the parent element; we actually want to
just undo the `display: none` we'd set for this CSS property, which is
what revert is for.
2022-03-01 11:55:24 -08:00
Tim Abbott 7cc553b75d spectators: Add divider before sidebar login/signup buttons.
This slightly improves the visuals of this component.
2022-03-01 11:51:46 -08:00
Tim Abbott c710d18ec5 spectators: Use display: inherit for only-visible-to-spectators.
The previous `display: unset` logic didn't work with dividers in the
gear menu. This new version should be correct -- what we want to do
here is just override the `display: none` default for this class, not
revert to the default browser styling for that element type.
2022-03-01 11:45:54 -08:00
Aman Agrawal 7e365f7ee3 icons: Replace fa-globe icon with a custom globe icon. 2022-03-01 11:36:38 -08:00
Anders Kaseorg f244c2eca4 Revert "drafts: Use simplebar for scrollbar."
This reverts commit f3964673e7.

It broke drafts_scroll by confusing jQuery object APIs with DOM
element APIs.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-28 15:26:47 -08:00
Julia Bichler f3964673e7 drafts: Use simplebar for scrollbar.
This was originally merged in #21082 in a different variation.
2022-02-28 15:06:19 -08:00
jai2201 5e49ddf4e1 settings: Add sorting feature for list of alert words.
This changes the method of rendering list of alert words in DOM,
earlier it was rendered using 'for' loop over the array of alert_words
which is now changed to render using ListWidget, which gets a array
of objects from get_word_list() in alert_words.js.

The use of ListWidget helps to define a parent_container and $container
in table-body of alert-words-table using which we can now apply sorting over
alert words with the help of handle_sort() function in list_widget.js

Changed the method of adding alert_word_settings_item row in table body
through {{#with}} loop because of rendering through ListWidget, which was done
earlier using for loop over each alert-word in while rendering the list.

this commit also mocks template of render_alert_word_item
while mocking ListWidget.create() function in render_alert_words_ui().
and checks that ListWidget.create() is not called when variable `loaded`
is set as false.

Fixes #21142.
2022-02-25 17:33:11 -08:00
Aman Agrawal 5ae178b39c recent_topics: Show loading indicator before fetching initial messages.
Hide the loading indicator after initial fetch for recent topics.
2022-02-25 16:29:43 -08:00
Aman Agrawal 98c2038718 recent_topics: Position empty topic text independent of columns.
This avoids a column width change after initial loading of
messages finishes and "No topics match your current filter"
text is displayed.
2022-02-25 16:29:43 -08:00
Aman Agrawal bab9e50581 scroll_to_bottom_button: Use unicode icon for right arrow. 2022-02-25 14:57:22 -08:00
jai2201 9288f00cd7 recent-topics: Add `width` CSS property in filter check icons.
This commit adds a width of 10px to fa-square and fa-check-square
icons in recent-topics table, so that on toggling between these icons
we can prevent the change in width of the whole button to make it look
good visually.
2022-02-25 11:15:54 -08:00
Austin Riba 7d3bbe03ac lightbox: Swap panzoom library to anvaka/panzoom.
This PR changes the library used for panning and zooming in the lightbox
module from timmywil/panzoom to avanka/panzoom.

The original (timmywil) version of the library contains a bug where if
you have a high resolution touchpad and Firefox and you zoom in and out
repeatedly on an image, the image may drift. avanka/panzoom does not
appear to display this behavior.

Restores the behaviour from before 5f83bc5cfe, where clicking
outside the image closes the lightbox, primarily by way of swapping
out the panzoom library.

Fixes: #21163.
2022-02-23 12:12:04 -08:00
Purushottam Tiwari 3984df88bb message-editing: Add support for dynamic elements in edit-history.
Edit history of message was rendered directly without passing
it through rendered_markdown.js. Due to this several visual
features for dynamic elements like time, spoilers, mentions
etc were not available.

To fix above issues we pass the content of edit-history
through rendered_markdown before showing edit history modal.

Fixes: #16029.
2022-02-22 15:00:01 -08:00
Sayam Samal d763847cb9 settings: Fix overflow due to unset border-radius. 2022-02-22 10:42:21 -08:00
Sayam Samal bbfc958c62 settings: Fix responsiveness of the profile avatar.
Moves the profile avatar to the top when the viewport is narrowed down.

Tweaked by tabbott to add the 20px bottom margin in a more consistent
way, which also lets us deduplicate some code.

Fixes #21000.
2022-02-22 10:41:59 -08:00
Dinesh 6afdf2410d message feed: Notify user when messages are not being marked as read.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.

This avoids distracting the user when viewing a thread they've already
read.

tabbott has verified that if new messages come in, the banner will reappear.

Fixes: #18768.
2022-02-18 14:48:31 -08:00
jai2201 1b0b0d64e5 left-sidebar: Align more-topics li item with other topic names.
The class `sidebar-topic-check` has a minimum width assigned for the
`topic-resolved` icon to create an appropriate space for that column
whether or not there are resolved topics present.

Add a corresponding `margin-left` to align `more topics`
appropriately.
2022-02-18 13:39:08 -08:00
Aman Agrawal 0eafa6039b message_scroll: Show scroll to bottom button.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.

We adjust the bottom offset of the button based on compose box
height.

Fixes #19862
2022-02-18 13:29:57 -08:00
Aman Agrawal d9497afe9d integrations: Don't fix height of integration icon in detailed view.
This allows us to have more characters that we can use for the
integration name without overflowing the fixed height.
2022-02-18 12:22:32 -08:00
Aman Agrawal 9b622b7d25 gear_menu: Allow user to configure preferred theme.
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
2022-02-18 11:29:48 -08:00
Aman Agrawal b675db78a3 compose: Change icon of formatting popover to a question.
Fixes #21183
2022-02-18 11:16:19 -08:00
Aman Agrawal bd97797904 compose: Add right padding to drafts to make outline look even. 2022-02-18 11:16:19 -08:00
Aman Agrawal ad555f2feb tippy: Only change background color of tooltips with no theme.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
2022-02-18 10:51:35 -08:00
yogesh sirsat 8a1df07e64 recent topics: Display user info popover when clicking participants.
Tweaked by tabbott to do something reasonable for muted users and
display a cursor indicating clicking will do something.

Fixes #21154.
2022-02-17 15:49:24 -08:00
Alya Abbott e93320c40d portico: Add a self-hosting page.
Co-authored-by: Aman Agrawal <amanagr@zulip.com>
2022-02-17 12:43:13 -08:00
Aman Agrawal c396c2f7a4 home: Send rendered realm description for spectators.
Display rendered markdown after passing it through our local
rendered_markdown JS library.
2022-02-17 16:17:15 +00:00
Jai soni 9cd27fd773
right sidebar: Add word-wrap property in tooltips.
This prevents the overflow of tooltips on hovering over buddy list.

Fixes #21119.
2022-02-16 12:59:38 -08:00
Yogesh Sirsat dcae70c0c0
stream_settings: Ignore hover on actions column in tables.
In the dark theme, disable the hover behavior to display sorting options
for actions column in tables (Which doesn't support this).

Matches existing behavior in light theme.

Fixes: #21137
2022-02-15 17:47:55 -08:00
Aman Agrawal fd0f26dc1b right_sidebar: Minor improvements.
Fix width of realm description.
Reduce left margin of list in rendered markdown.
Increase right margin.
2022-02-15 17:21:41 -08:00
Aman Agrawal 450e4bbb56 login: Specify spectator login is in beta. 2022-02-15 17:21:41 -08:00
Tim Abbott 36b208ad51 reactions: Increase font size for reactions.
This seems to have no negative effect, and substantially improves the
visuals in situations where we're displaying a user's name.

While we're at it, switch to a relative font size.
2022-02-14 12:01:09 -08:00
Aman Agrawal 430d1a411e tippy: Make background color of tooltips close to black.
This is aimed towards increasing the contrast for tooltips in
dark theme.
2022-02-14 11:57:04 -08:00
ditsuke 6491ed7213 message_feed_view: Align images with message.
Removes the 5px `margin-right` on images, replacing it
with a 5px `margin-left`. This change aligns the images
with the message content while making sure they do not
stick stick together in other layouts.
2022-02-14 11:48:01 -08:00
Tim Abbott c4af509339 left sidebar: Increase bottom margin.
This improves the visual appearance of the state where you're scrolled
to the bottom with your mouse over a URL.
2022-02-11 14:33:54 -08:00
jai2201 e11c495dff left-sidebar: Leave space below link for it to be visible.
Add a margin below the subscription link for it to be visible when we
hover over links, where the browser will display the URL in the
bottom-left corner of the screen.
2022-02-11 14:28:30 -08:00
Tim Abbott 93ce3396ac status emoji: Adjust margin for common element.
After some experimentation, these styles look better in all the places
we're displaying status emoji.  See the comments for justification.
2022-02-11 13:29:32 -08:00
Tim Abbott a6c364cdd7 left sidebar: Rename streams_inline_cog.
The icon hasn't been a cog for some time.
2022-02-11 10:58:32 -08:00
Tim Abbott 68055048a0 message feed: Add 4px left margin to edited notices.
This makes them not look squished up against the name.
2022-02-10 13:52:24 -08:00
Aman Agrawal 6e4c2e63f5 right_sidebar: Make spectator login buttons don't stick to scroll bar. 2022-02-10 11:37:38 -08:00
Anders Kaseorg a800a86f54 Revert "drafts: Use simplebar."
This reverts commit 8e06335788 (#21048).

It regressed the ↑ and ↓ keys because drafts.drafts_scroll was not
updated to use ui.get_scroll_element.  Also, styling the native
scrollbar as hidden is not the right workaround because the hidden
native scrollbar still exists and can be scrolled independently of the
SimpleBar.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-09 14:15:27 -08:00
Parth e3ddd662ab message_editing: Fix topic edit propagate option cut-off.
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.

Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.

With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.

Fixes #19739.
2022-02-09 14:06:49 -08:00
Julia Bichler 8e06335788 drafts: Use simplebar. 2022-02-09 10:38:30 -08:00
AnushaNathRoy 5e05dcbc8f status_emoji: Extract status emoji template.
Currently the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.

As such this commit does the prep work of extracting a template which
will be used in all places that need to show the status emoji.

With refactor and minor edits by Yash RE.

Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
2022-02-08 16:52:49 -08:00
YashRE42 768a133715 status_emoji: Modify centering technique for .selected_emoji.
Currently, the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.

As such this commit does the prep work of decoupling the
selected_emoji style in user_status.css from the .status_emoji
style... by having it always override the value of "top".
2022-02-08 16:52:49 -08:00
Aman Agrawal 0888a8c628 compose: Fix weird outline for GIF icon.
GIF icon had 32px line-height but only 18px height, this caused it
to trim the bottom part. Make line-height and height same to fix this.
2022-02-08 13:27:27 -08:00
Anders Kaseorg b0ce4f1bce docs: Fix many spelling mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-07 18:51:06 -08:00
Aman Agrawal 264ffb9f9b portico: Make hero subheader and `hero-text` have same color. 2022-02-07 14:38:08 -08:00
Aman Agrawal 8f07b63856 portico: Extend some `solution-page` styles to `case-study-page`. 2022-02-07 14:38:08 -08:00
Aman Agrawal 8d9fd3c380 portico: Use flex for quote boxes to ensure fix alignment issues.
The link at the bottom of quotes block were not properly aligned
on narrow devices. This fixes that issue.
2022-02-07 14:38:08 -08:00
Aman Agrawal 8d5903ddce portico: Don't hide all <br> tags on narrow screens.
This is an unpredictable piece of css that shouldn't be part of
the code. It was introduced earlier in
04ece5e5c5
for `open-source` content which has been completely replaced.
2022-02-07 14:38:08 -08:00
Tim Abbott 3673075974 Revert "left-sidebar: Allow up to 2 lines for group PMs."
This reverts commit 97ffe2b123.

This broke the topic names, and also seems to have some problems with
unread counts and long names.
2022-02-07 11:39:57 -08:00
Aman Agrawal 42d5f51a4c compose: Move help link beside formatting buttons.
We advertise it as message formatting button with `Aa` icon
instead of `?` help icon.
2022-02-07 09:46:19 -08:00
Aman Agrawal bed77a0a76 compose: Add drafts beside formatting buttons.
We hide the drafts button on small screen sizes since it overflows
the window on some languages like Russian.
2022-02-07 09:46:19 -08:00
Aman Agrawal c827c73783 right_sidebar: Add realm description for spectators. 2022-02-04 16:00:59 -08:00
Aman Agrawal ca71e28cd6 accounts_accept_terms: Make elements looks similar to other pages.
Add even vertical space between elements.
2022-02-04 15:48:38 -08:00
Austin Riba 81b1b18886 lightbox: Prevent undesired closing of lightbox during pan.
This commit adds a method of marking an overlay as being meant to be
left open despite click events triggering that would normally close it.
This is to prevent the case where a user drags an image and "unclicks"
in an area where normally clicking would close the overlay.
2022-02-04 14:58:36 -08:00
Austin Riba 5f83bc5cfe lightbox: Replace lightbox_canvas with PanZoom library.
This PR changes how the Pan & Zoom feature of images displayed in the
attachment lightbox are handled.

The existing method of using a canvas element is replaced by the Panzoom
library (timmywil/panzoom). This library is lightweight and has 0
transitive dependencies.

This fixes #20759 where the issue is that the viewport of a zoomed image
was not expanding to fill the available space on the page. Switching to
this new library also solves several other UX issues:

    * Images are no longer blurred when in Pan & Zoom mode.
    * The zoom behavior itself uses focal point zooming: zooming occurs
      where the cursor is on the image instead of at the center of the
      image, reducing the need for extra panning.
    * CSS transitions are used for a more visually pleasing experience
      when switching images, toggling zoom off, etc.
    * The library has the potential to open other file types which
      leaves that option open for us in the future.
2022-02-04 14:58:36 -08:00
Jai soni 97ffe2b123
left-sidebar: Allow up to 2 lines for group PMs.
This change makes it easier to see who is present in a group private message conversation
when some of the users in it have long names.

We disable a stylelint rule for this line, because this particular -webkit prefixed CSS rule 
works in all modern browsers including Firefox.

Fixes #21003.
2022-02-04 14:43:13 -08:00
NerdyLucifer 666fe465dd poll_widget: Fix the position of poll title editing button.
Places poll editing button in the same line of poll title by changing
display property of poll title from inline-block to inline.

Fixes #20753.
2022-02-04 13:43:05 -08:00
Steve Howell 05ff904378 presence: Extract $active_color CSS variable. 2022-02-03 15:31:21 -08:00
Steve Howell 498b02dfb2 presence: Avoid doc/naming references to "orange".
It seems like orange is the loudest possible color to
denote a quasi-neutral-idle state, so we hope to
replace it with another color.

This commit does not change any styling.

I removed the sentences in the doc, since they are
kind of too vague to be useful. If we want to say that
the idle state is correlated with the half-orange
circles in the buddy list, then we want to say that
more specifically.
2022-02-03 15:31:21 -08:00
Steve Howell a9ea525757 pm list: Remove obsolete user_circle_fraction class. 2022-02-03 15:31:21 -08:00
Aman Agrawal acbfdb1c36 compose: Use flexbox to align items in compose top right.
This will help us align components on compose box top better
on small screen sizes.

We also center align the compose_top elements.
2022-02-02 10:04:38 -08:00
Aman Agrawal adf8446b51 compose: Resize compose-textarea after exit from markdown-preview.
Autosize library can miss resize of compose-textarea when
compose is collapsed / expanded while preview box is displayed
and compose-textarea is hidden. So, we force a autosize.update
of compose-textarea, when user exits markdown preview, to ensure
that the textarea is of correct size.

Fixes #19353
2022-02-02 10:01:27 -08:00
Priyam Seth 17f74a3f57 compose: Show warning while composing to a resolved topic.
This commit creates the function warn_if_topic_resolved that checks if
the topic to which the user is composing is resolved or not. First it
checks if the stream exists and then if the topic name starts with the
RESOLVED_TOPIC_PREFIX. If the conditions are true, a warning banner is
shown to the user.

It also shows to the user a button to unresolve the topic, if he has
the permission to do so.

Fixes #20584.
2022-02-01 17:50:17 -08:00
jai2201 38003408cb settings: Make authentication settings more like other panels.
This may still needs further work to replace the table with a more
standard implementation.

Fixes part of #21001.
2022-02-01 11:28:27 -08:00
Aman Agrawal 0ce2ae1782 bookend: Use it to advertise recent topics for spectators.
We show a minimal text "Browse recent topics" at the end of
every narrow. This will help new users to find additional
content on the app.

Fixes #19844
2022-01-31 16:32:09 -08:00
Aman Agrawal 5688d8b0df scroll_bar: Remove unnessary adjustment of keyboard icon.
Since the keyboard icon is not associated with scrollbar, we
can just have a fixed margin-right for it.
2022-01-28 09:50:27 -08:00
Aman Agrawal b0dd063bb8 scroll_bar: Simplify module.
The content which is scrollable is moved left by the width of the
scrollbar when scrollbar is visible. The navbar, floating recipient bar
and composebox doesn't move. We reduce their width by scrollbar width
to adjust for the reduced width of the scrollable content.

Since floating recipient bar is center aligned (with margin: 0 auto)
we also have to move left by half the scrollbar width.

Group css classes having the same value being assigned together. This
makes the code easier to understand.
2022-01-28 09:50:27 -08:00
N-Shar-ma 4219f9bdf8 compose: Align blue selection properly in Drafts.
Added a negative `outline-offset` of the same width as the grey border
for the blue selection outline around the `draft-info-box`.

This removes the gap between the blue box in the active state, while
the unselected `draft-info-box`es look the same as before, with a grey
border.

Fixes: #20950.
2022-01-28 09:15:28 -08:00
Sahil Batra 7265a76fc6 stream-settings: Show icon according to in the right column title.
We were showing # for all types of streams in the title at the top
in the right column of stream settings overlay. This commit fixes
it to show globe icon for web-public streams and lock icon for
private streams.
2022-01-26 12:50:05 -08:00
Ashwat Kumar Singh 563b06ee08
stream_settings: Make disabled tab look disabled in dark mode.
Make disabled tabs look disabled in dark mode by adding color
to ".ind-tab.disabled" in "dark_theme.css".

Fixes #20917.
2022-01-26 04:11:47 -08:00
Lauryn Menard e479acc809 api_docs: Add line break before return value description text.
Adds a line break before the descriptive text for return
values and events in the api documentation in order to
help with readability of descriptions with multiple
paragraphs of descriptive text.

Adjustments made to the CSS of list items in unordered
lists to visually group the first paragraph of text
to any following paragraphs or unordered lists.
2022-01-24 10:02:02 -08:00
Sahil Batra fd1d4e101b overlay: Fix bug of information overlay not closing when text is selected.
There was a bug where information overlay was not closing on clicking
"x" when some text was selected. This was due to document.getSelection().type
returning "Range" and we do not close the modal in that case as per the code
added in 081d74141b.

As the "x" icon was button, the document.getSelection().type was
still returning "Range" for the text selected, but when the "x"
icon is inside a span, as in settings overlay, clicking on "x"
deselects the already selected text and selection type is not
"Range" and thus modal is closed.

This commit also improves the vertical alignment of "x".

Fixes #20645.
2022-01-21 17:39:01 -08:00
Ganesh Pawar 49e9cf10de user_status: Migrate modal to dialog_widget. 2022-01-21 16:17:25 -08:00
Ganesh Pawar f43d3b9986 change_email: Migrate modal to dialog_widget. 2022-01-21 16:12:34 -08:00
Ganesh Pawar 84ed22d59a api_key_modal: Place the error element at the top of the modal.
This is consistent with other modal behaviour.
2022-01-21 16:12:34 -08:00
Eeshan Garg 94c89c80d1 team page: Display contributor count per repo.
Fixes #20725.
2022-01-19 17:37:09 -08:00
Eeshan Garg 3b9455c9ce billing: Make all buttons the same size.
Previously, the "Add Card" button was significantly larger than
the "Buy Standard" and "Submit" buttons.
2022-01-19 16:11:31 -08:00
N-Shar-ma be486b6138 i18n: Fix 'add choice' / 'add task' button size.
Removed the CSS rule setting the button's width to 100px.  This lets
the button take as much space as the appropriate translation needs,
without displaying an odd two-line button.

Fixes: #20077
2022-01-18 12:46:45 -08:00
Aman Agrawal e4b8b9a24e compose: Move `Help` icon beside `Enter send` button. 2022-01-05 16:03:53 -08:00
Aman Agrawal db09639f6c compose: Change UI which toggles `enter_sends` setting.
Use a popover which displays both the options instead of long text.
We only use a small text indicating the current state which user
can click on to trigger the popover.
2022-01-05 16:03:53 -08:00
Rishabh Maheshwari 937d49e209
popover: Fix alignment of edit and delete button.
The icons were misaligned with the time stamp.  

I changed the CSS `right` property to get proper alignment.

Fixes: #20529.
2022-01-05 15:24:00 -08:00
BIKI DAS 42dd58cffe
docs: Fix a few typos in documentation. 2021-12-28 09:36:59 -08:00
Tim Abbott 963ef9e843 help: Remove white border after h1 titles.
This hasn't been part of the visible design for some time; however the
relocation in 3319893545 caused these to
appear again.
2021-12-14 17:35:57 -08:00
YashRE42 bc3d03730f message_controls: Inherit visibility from `.message_failed`.
Previously, there was a bug where a failed message would only show the
`.message_failed` icons on hover, the intent was for them to always be
visible if a message failed to send.

The cause of the above bug was that in
e7b1de8ace we modified the html
structure of the icons such that each icon was inside its own div,
which possessed the `message_control_button` class, and both such divs
were inside a `.message_failed` div. The unintended consequence of this
change was that the rule `.message_controls .message_control_button`
would apply `visibility: hidden` to the icons.

Hence, this commit explicitly sets the visibility of
`.message_failed .message_control_button` to `inherit`.
2021-12-12 11:14:46 -08:00
Alya Abbott 0836b51738 policies: Update Kandra Labs policies pages. 2021-12-10 17:56:12 -08:00
Tim Abbott 3319893545 help: Apply heading CSS beyond just h1 headings.
This makes it possible to use non-H1 headings in the sidebars.
2021-12-09 17:51:52 -08:00
Alya Abbott e70ec964dc portico: Add use case buttons to /why-zulip and /hello. 2021-12-09 08:58:45 -08:00
Aman Agrawal c35ab98d03 hello: Move call to action button style to a specific class. 2021-12-09 08:58:45 -08:00
Nikhil Maske 091772b534 hotspots: Remove intro_reply hotspot.
Zulip shows two guides on How to reply, first one by
the welcome bot and second one is intro_reply hotspot.
To simply and avoid redundancy, intro_reply hotspot is
removed.

Fixes #20482.
2021-12-07 21:55:59 -08:00
Tim Abbott 48dccfd37a css: Fix night theme radio inputs.
Radio inputs that are not selected are technically independent
:read-only inputs, not a single input with multiple values; this
results in this selector for read-only inputs not behaving as
expected.

Fixes #20221.
2021-12-07 14:32:37 -08:00
S-Abhishek 186d1a83e9 narrow_banner: Move empty narrow messages to handlebar templates.
Removed existing empty narrow divs from app/home.html and created
a new javascript module to dynamically load empty narrow messages
using handlebar template.

Fixes #18797
2021-12-07 13:38:48 -08:00
Lauryn Menard 58438c362f documentation: Fix text wrapping and alignment of ordered lists.
Moves CSS rules that rely on list items in an ordered list being
wrapped in a `<p>` tag so that they apply to the list item itself.
Uses `position: absolute` to set the `::before` pseudo-element in
place and `position: relative` to adjust the list items so that they
do not overlap.

Ideally, when Safari supports the `content` property for `::marker`
pseudo-elements, this issue can be revisited.

Fixes #20440.
2021-12-07 11:53:14 -08:00
Tim Abbott fdfaa321b3 css: Fix Saving/saved buttons in stream settings.
This is likely not the correct long-term fix, but it's an effective
tactical fix for this button.  Added a TODO noting the expected
direction for a long term solution.

Fixes #20481.
2021-12-06 14:40:21 -08:00
Aman Agrawal 7dea22c532 dark_theme: Keep modal related css together. 2021-12-06 10:37:21 -08:00
Aman Agrawal 8123ebbfc0 modal: Fix button colors in dark theme.
Use the dark purple color we use for `send` buttom on the
`confirm` button.

Fix color of `cancel` and `disabled` buttons in dark mode.
2021-12-06 10:37:21 -08:00
Aman Agrawal d749438551 compose_ui: Use white spinner on both dark and light theme.
Fixed alignment slightly.
2021-12-04 06:52:18 -08:00
Aman Agrawal 2eaf869949 move_topic_to_stream: Fix clipped stream select dropdown.
The stream select dropdown's height was clipped by the modal
container which resulted in the dropdown only being displayed
partially. We could either move the dropdown to under `body` or use
`position: fixed` for it be able to show outside parent container.
We go for the later option.
2021-12-03 14:38:27 -08:00
Aman Agrawal 24900ec7f8 compose: Don't fix width of send button.
Since the width of `send` text can vary based on language. We
shouldn't fix its width.
2021-12-03 14:29:26 -08:00
Aman Agrawal c7f27f6c94 compose: Fix height of GIF icon.
The GIF icon was taking more height than it was alloted to.
The height taken also varied slighly based on external factors.
This pushed other buttons out of their desired position.
2021-12-03 14:29:26 -08:00
Aman Agrawal 02053f1319 compose: Add side margin to fa-exchange icon. 2021-12-03 14:29:26 -08:00
My-Name-Is-Nabil edccb79010 settings: Apply dark theme to upgrade tips.
Fixes #20431 by changing dark theme colors of upgrade tips to match
colors of other dark theme tips (with the same structure as the
existing .tip class).
2021-12-03 14:22:18 -08:00
Aman Agrawal 788bf8b32e compose: Fix overflowing `.enter_sends` text on `<375px` screens. 2021-12-02 15:11:15 -08:00
Aman Agrawal baa1b4ed1d compose: Fix angle-up icon overlapping with topic input field.
The previous calculations were based on just the cross icon.
Adjusted for the angle-up icon which is 16px in width.
2021-12-02 15:11:15 -08:00
Aman Agrawal 50f916443d compose: Fix alignment of help link. 2021-12-02 15:11:15 -08:00
Aman Agrawal a84869c078 compose: Use a ligther red for character limit exceeded text. 2021-12-02 15:11:15 -08:00
Aman Agrawal ffd9d18577 compose: Enclose hotkeys in `kbd` tag.
We change how `kdb` is displayed in dark-theme for
compose so that they don't take too much user attention
when composing.
2021-12-02 15:11:15 -08:00
Aman Agrawal 7610b33963 flatpickr: Hide bottom arrow in dark mode.
Previous change didn't hide it in dark mode since this css was
being overridden.
2021-12-02 15:11:15 -08:00
Aman Agrawal 4ed6b441c7 flatpickr: Improve look of `Confirm` button.
Change text from OK to Confirm.
Remove icon.
2021-12-02 15:11:15 -08:00
Aman Agrawal aaa7150b8a compose: Move overflowing buttons to a popover.
We don't hide popover on click for formatting buttons, emoji picker and time
picker.
Emoji and time picker popovers need a reference to be displayed,
hence we don't hide them.
Not hiding formatting buttons is based on past discussion.

The current instance of compose popover is stored locally
so that we can access it across different modules.

The basic approach for hiding / displaying a button is based on
width and is executed at `sm` breakpoint as per our
`css_variables.js`.
Used handlebars and `hide/show-sm` css class to make this
work. This avoids using too much JS to hide/display elements.
2021-12-02 15:11:15 -08:00
Aman Agrawal 065b905f87 compose: Slightly move send button upwards.
This may have got misaligned after my last minutes changes to
the compose refactor PR.
2021-12-02 15:11:15 -08:00
Aman Agrawal 63c3f74056 compose: Rearrange compose bottom to separate out enter sends.
* We move enter sends into its own row separate from compose
control buttons and send button. This makes sure compose control
icons don't wrap on narrow widths.

* Move char limit indicator parallel to enter sends button.

* Left align character exceeded count at bottom.
2021-12-02 15:11:15 -08:00
Aman Agrawal a64f6edc2a compose: Use loading spinner as loading indicator. 2021-12-02 15:11:15 -08:00
Aman Agrawal 25ee6a795e compose: Never hide send button.
`Press Enter to send` used to hide `Send` button, we remove that
behaviour.

We show the current state of `Enter` hotkey action via text below
`Send` button which can toggle behaviour on click.
2021-12-02 15:11:15 -08:00
Sahil Batra fc8db93f36 settings: Disable spectator access setting when server setting is False.
We disable the enable_spectator_access setting when the server level
setting, WEB_PUBLIC_STREAMS_ENABLED setting is set to False.

This commit adds a new argument is_disabled to settings_checkbox which
is used to disable the checkbox and set the color of label accordingly.

This commit also adds a help-link besides the label pointing to
"/help/web-public-streams" which is shown irrespective of the
setting being enabled or disabled.

Fixes #20417.
2021-12-02 14:33:51 -08:00
Sahil Batra eb50641af3 settings: Remove is_nested parameter and disableable class.
The is_nested paramter in settings_checkbox.hbs used to
set disableable class in the div element is not used
anywhere and thus we can remove both the is_nested parameter
and disableable class.

The is_nested paramater was first added in 3e0b420423 and
disableable class was added in 706f422c3.

The use of is_nested parameter was removed in a501abf3a1.
2021-12-02 14:33:51 -08:00
Ganesh Pawar 19c4a63d51 move_topic_modal: Use `dialog_error` to display error.
Fixes #20210
2021-12-02 14:02:27 -08:00
Arch0125 7c4382bb06 dropdown_list_widget: Replaced pencil icon with chevron-down.
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.

Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.

Fixes #19888.
2021-12-01 13:35:15 -08:00
Sahil Batra b23df8dc9b popovers: Add "Manage this user" option to user info popover.
This commit adds "Manage this user" option in the user-info popover
which simply opens the administrative user-info modal.

We show a spinner on submit button in this case as modal
is not closed immediately and thus we need some indicator
to show that the task is in progress. There is no spinner
on submit button in the modal opened from "Users" section
of organization settings.

Error handling for this case is different than when the
modal is opened from "Users" section of organization
settings because there is no overlay in the background
of modal in this case.

In this case, we show error inside the modal and do not
close it and in case the change is completed successfully
we just close the modal without showing any message.

Fixes part of #18944.
2021-12-01 12:13:06 -08:00
Ganesh Pawar f760850993 login_to_access_modal: Migrate modal to Micromodal. 2021-11-30 14:39:46 -08:00
Aman Agrawal 8a0c3aeadd landing_page: Force white background colour.
A page can have either `white` (from `landing_page.css`) or `gray`
(from `portico.css`) background color depending on
webpack chunking order.  So, this fixes that bug.
2021-11-30 13:08:17 -08:00
Manan Rathi b40bd21691 data_exports: Fix the heading cutoff in Settings.
Removed the unnecessary margin from the admin_exports_table
class.

Fixes #20311
2021-11-28 07:15:28 -08:00
Sahil Batra 99acb9a876 css: Replace "night-mode-block" with "dark-theme-block". 2021-11-26 22:03:29 -08:00
Sahil Batra 2feb1443df css: Replace "dark mode" with "dark theme" in comments. 2021-11-26 22:03:29 -08:00
Sahil Batra dcd6da0351 misc: Replace "night" and "day" with "dark" and "light".
This commit replaces "night" and "day" used in the context
of themes with "dark" and "light".
2021-11-26 22:03:29 -08:00
Sahil Batra 29dcbbb548 frontend: Rename "night-mode" class to "dark-theme". 2021-11-26 22:03:29 -08:00
Sahil Batra 88e21d0387 misc: Replace "night mode" with "dark theme" in comments. 2021-11-26 22:03:29 -08:00
YashRE42 775018a818 stream_privacy_modal: Fix vertical alignment of radio inputs.
Fixes: #20347.
2021-11-24 10:39:23 -08:00
Ganesh Pawar a7badd726f api_key_modal: Migrate modal to Micromodal. 2021-11-23 15:43:38 -08:00
Ganesh Pawar f5fbf5f0e0 change_password: Migrate modal to dialog_widget. 2021-11-23 15:41:54 -08:00
Ganesh Pawar 3b5b98c8f9 modal: Set margin-bottom to 10px.
Bootstrap sets the margin-bottom to 20px for alert classes, which
is too much for our needs.
2021-11-23 15:41:54 -08:00
Tim Abbott 5ac2241cf9 stream settings: Remove further differences from settings.css.
This fixes various visual glitches that resulted from reusing
components and overriding key elements of them.  The specific logical
changes are as follows:

* Delete custom checkbox positioning for stream settings; we now just
  use the common app_components.css code.
* Remove custom subscription-control-label styling; just use settings
  defaults.
* Copy the h3/h4 styling from settings.css. Ideally we'll deduplicate
  this in further cleanup.
* Add the inline property to stream_settings_checkbox elements, to
  reduce variable with settings_checkbox.hbs.
* Place every individual input inside an input-group, so that we can
  use the standard settings.css styling.
2021-11-23 14:48:17 -08:00
YashRE42 53a5942ab3 stream_types: Remove new-style class in stream_types.hbs.
Previously, the stream_edit modal relied on the new-style class to set
the margin-bottom value for stream-message-retention-days-input to 0,
in order to override the value set by bootstrap. The class new-style
is unhelpful because of its generic name, and in addition, time has /
will eroded away the significance of its name.

Hence, this commit adds the necessary rules to subscriptions.css and
removes the new-style class.

In order to make this change, this commit adds a block to
`subscriptions.css` with the selector `#stream_privacy_modal
.stream-message-retention-days-input input[type="text"]` one important
rule that this adds is `height: inherit;`. Adding this rule solves a
minor UI glitch where selecting "retain N days after posting" would
cause the save and cancel buttons to jump down by a pixel or so.

Fixes: #20222.
2021-11-23 14:11:35 -08:00
YashRE42 9851ed82a7 stream_settings: Remove unused rule referencing .modal-body .grey-box.
In d62e44fcba we migrate to using
micromodal for this pop up (via dialog_widget), as a result the
.modal-body style no longer applied as that class is not used.

In 55adf88e667da02284f0a6ffb6bcfdf73b5427cb we remove the grey-box
class from the stream_types template, hence even if the above wasn't
true, this rule would still not apply.

This commit thus removes this rule.
2021-11-23 14:10:49 -08:00
YashRE42 7151147907 stream_settings: Replace ul, li tags with div tags for checkboxes.
Due to reasons similar to 5de115a964, we
switch from using `ul`/`li`s to using `div`s here.
2021-11-23 14:10:49 -08:00
YashRE42 aaef190a36 stream_settings: Remove grey-box from personal tab & stream create.
Previously, the presence of the styles applied by grey-box caused a
visual disparity between the stream settings overlay and the
personal/organization settings overlay, hence, this commit removes
this class.
2021-11-23 14:10:49 -08:00
YashRE42 afa62609bc stream_types: Remove grey-box class.
Previously, the presence of the styles applied by grey-box caused a
visual disparity between this modal and similar settings in our
organisation settings view, hence, this commit removes this class.
2021-11-23 14:10:48 -08:00
Aman Agrawal bf93ae1644 ui: Align bottom components in the same horizontal line. 2021-11-22 18:44:32 -08:00