Commit Graph

3994 Commits

Author SHA1 Message Date
Steve Howell 8fc811dfa9 unread: Add UI support for marking messages as unread.
Fixes #2676.

Co-authored-by: Aman Agrawal <amanagr@zulip.com>
Co-authored-by: Tim Abbott <tabbott@zulip.com>
2022-09-23 16:45:43 -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
Tim Abbott 155787512f css: Modal read receipts CSS to modal.css. 2022-09-23 16:21:31 -07:00
Riken Shah ff899e5c31 read_receipts: Disable showing read receipts for Notification Bot msgs.
The implementation is simple, we just check if the
the message sender is a notification bot to decide if we
should show the read receipts list.

We also update the modal content styling to match the padding at the
top of the modal.

Fixes #22905
2022-09-23 16:20:25 -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
Aman Agrawal 5ef1b1f5da portico: Fix footer text overflow in different languages.
Fixes #22946
We fix width of footer sections and let the text overflow within.
2022-09-23 10:49:48 -07:00
Aman Agrawal 5d76f67247 rendered_markdown: Fix alignment of icons in code blocks. 2022-09-22 10:35:33 -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 cd71fdea60 popovers: Display custom profile fields in user profile popover.
Displaying custom profile fields in user profile popover, as mentioned
in the issue.

In `popovers.js` filtering out only those custom profile fields, which
are not `LONG_TEXT` or `USER` fields and their values are not empty.

Custom profile fields rendering in profile popover the same way use
similar rendering logic as in the user's full profile modal.

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
Aman Agrawal 155540c0e3 popovers: Fix alignment of icons in sidebar and msg action popovers.
The regression was introduced in c8f346b5e5.
Reverted the change that caused the regression and introduced a
new fix.
2022-09-16 11:47:44 -07:00
Aman Agrawal 2aaf3c3c76 Revert "popovers: Align icons and content in middle."
This reverts commit 948dc3a629.
2022-09-16 11:47:44 -07:00
Aman Agrawal 948dc3a629 popovers: Align icons and content in middle.
The icons like `x` for delete message were displayed below the
text in alignment due to a regression.
2022-09-15 12:14:15 -07:00
Ganesh Pawar c439b9d3af modal: Make the modal content scrollable instead of the whole modal.
Earlier, if the content of the modal (apart from the header and footer)
overflowed, the whole modal would become scrollable which would hide
the modal header and footer on scrolling. This commit makes only
the modal content scrollable and keeps the modal header and
footer static.
2022-09-14 15:45:36 -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
aadiljaleel 654bab1d19
popovers: Replace full profile avatar border with box-shadow.
This makes the visual border appear outside the image, not overlapping its edges.

Fixes: #21265
2022-09-14 09:26:53 -07:00
Lauryn Menard fe7d7b48db help-docs: Use `<kbd>` HTML elements for references to keyboard keys.
Updates references to keyboard keys in the help center docs to use
`<kbd>` HTML elements, which also means updating them to be as the
key would appear on a keyboard.

Previously, uppercase and lowercase letters were used to indicate
when/if the `Shift` key was being used, and even that was not
consistent throughout the documentation.

For CSS styling, adds a similar rule for `<kbd>` elements that is
used in `/static/styles/app_components.css`. And updates the CSS
class used in `/static/js/portico/help.js` for `adjust_mac_shortcuts`
accordingly.

Also, takes advantage of revising these pages for making small
updates for current help center documentation practices.
2022-09-13 11:16:14 -07:00
Lauryn Menard 899f535b39 forms: Update create organization part of registration form.
Adds a legend to the "org-registration" fieldset where the user
inputs info about the new organization. Previously, there was only
a legend for the "user-registration" fieldset. Also, increases
the opacity of CSS rule for the legend color so that they are
more visible.

Removes the hint text about what the organization URL value is
used for since it is pretty clear from the field's name.
2022-09-13 10:41:03 -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
Purushottam Tiwari 7879f78917 user groups: Implement edit features in user group settings overlay.
Follow up for #22214.
2022-09-07 12:09:28 -07:00
Purushottam Tiwari b1c81e2e02 user groups: Implement General tab functionalities for group settings.
There will be one more follow up commit to this, that will
add support for editing memberships of user groups and will
complete preliminary version for user group edit settings.

Follw up for #22214.
2022-09-07 12:09:28 -07:00
Riken Shah 39a3944951 timepicker: Fix hours and minutes input getting squeeze in safari.
This issue is probably with the upstream bug in
`flatpickr` but we can fix it for us by specifying minimum
height to the input.

Fixes #22698
2022-09-06 12:57:24 -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
jai2201 294be1661c unread: Use consistent background-color for unread count pills.
Change the background-color of all unread count pills in dark theme
to have 1 consistent type of color in complete application,
similar to how we have in light theme.

Fixes #21358.
2022-09-01 13:55:55 -07:00
Het Patel b6a4e38c9d
settings: Fix styling of preview organization profile button.
Fixes #22743.
2022-08-30 22:58:56 -07:00
Aman Agrawal bc937168cd left_sidebar: Remove outline from streams scrolling container.
Simplebar sets tabindex for `simplebar-content-wrapper` which
makes it focusable. The outline which comes with it when focused
is annoying, so we remove the outline.
2022-08-30 22:29:31 -07:00
Aman Agrawal 379c6acbea portico: Add page to list open organizations.
Fixes #22020
2022-08-30 16:02:06 -07:00
Aman Agrawal cf274577f4 landing_pages: Remove unwanted underline on link focus.
When a user clicks on a link it triggers `:focus` and an
underline is displayed. This is not intentional.

Also, for keyboard users, we have a surrounding outline box
for focus, so this underline is redundant in that case too.
2022-08-30 16:02:06 -07:00
Aman Agrawal 5d3c6aa857 integrations: Round top borders and remove box shadow.
This makes it look good with the new footer.
2022-08-30 16:02:06 -07:00
jai2201 fee877e99c unread: Indicate which streams have unread @-mentions.
Fixes part of #21637.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
2022-08-29 12:49:08 -07:00
Eeshan Garg 5925ce16b1 demo-orgs: Disable billing and upgrade for demo organizations.
Disables submit buttons on billing / upgrade page for demo
organizations since they will need to become permanent
organizations before upgrading to Zulip Cloud Standard.

Also creates an alert banner on the same page that links to
the help center article on demo organizations.

Updates sub-headers on demo organizations help center
article to match link text and to follow general convention
of using imperative verb forms in help center subheaders.

Part of #19523.

Co-authored by: Lauryn Menard <lauryn@zulip.com>
2022-08-29 11:43:45 -07:00
evykassirer 69685c2864 drafts: Create a section to show drafts from the current conversation.
Fixes #21716.

By allowing users to view drafts that are addressed to their current narrow,
we hope to help them more easily find and continue previously drafted
messages.
2022-08-25 23:12:31 -07:00
nickgiann 011233d016 digest: Add header above plain text view of digest.
This commit adds a header above the plain text view of the digest to
be more clear about what the user is seeing.

A bit hacky, but the page is an internal development tool.

Fixes #21165.
2022-08-25 16:00:43 -07:00
David Rosa 682367a3fd help: Document "View user profile" mobile app feature.
Adds instructions for mobile app users.
2022-08-25 11:05:07 -07:00
David Rosa a1e9ac145d help: Add info icon to mobile stream settings macro.
Replaces the unicode character ⓘ with the corresponding
SVG image icon that matches the mobile app's info button.
2022-08-25 11:05:07 -07:00
David Rosa 104fd6566a help: Document "Private messages" mobile app feature.
Adds step-by-step instructions for mobile app users including the
corresponding image icons for the buttons that they should tap on
their screen.

Makes individual SVG image icons, for the help center docs, available
in `/static/images/help/`, instead of importing the entire set of
icons as dependencies.

Adds the icons for the "PMs" tab from https://feathericons.com, and
"Checkmark" and "Send" buttons from https://materialdesignicons.com.
Adds a new nested CSS selector to `.markdown img` so that the default
white border for images does not get applied to these icons.
2022-08-24 15:21:42 -07:00
Purushottam Tiwari c0acffb8a8 user groups: Set up right panel for user group edit.
This is preparatory commit that does basic UI set up for
user group edit in group settings overlay. This allows us to
write proper hashchange logic for user group settings overlay
under diffrent situations.
The work in this commit will be extended in further commits
to add proper UI and group edit logic.
2022-08-23 17:40:02 -07:00
Purushottam Tiwari a8c3be7fee user groups: Add new UI support for user group creation.
Add support for creation of user groups using right panel
of new user group settings overlay being developed as part
of https://github.com/zulip/zulip/issues/19526.

In further commits we will add support for editing user
groups using right panel of the overlay.

This commit also introduces a minor bug related hashchange
for #groups which would be a quick fix once we have UI
for group edit on #groups overlay.
2022-08-23 17:40:02 -07:00
Purushottam Tiwari c1cb5a6ef1 user groups: Set up right panel for user group settings overlay.
This is a preparatory commit to set up basic UI for right panel
in user group settings overlay. At this point we only ensure
the proper display of the two panels under different screen sizs.

Actual functionality for user group creation and user group
edit will be added in subsquent commits.
2022-08-23 17:39:52 -07:00
Purushottam Tiwari 072996141f user groups: Add filter for group list in group settings overlay. 2022-08-23 17:30:39 -07:00
Purushottam Tiwari 76aae8c5a0 user groups: Add user group rows in left for user group overlay. 2022-08-23 17:30:39 -07:00
Purushottam Tiwari 656f6a0fe9 user groups: Add overlay for user group settings.
Dedicated overlay for user group settings is added as part of
addressing zulip#19526.

The newely added overlay is currently empty and more UI
related to settings is to be added in further commits.
2022-08-23 17:30:39 -07:00
Oliver Pham 2ed650f596 search_suggestion: Show profile pictures in autocomplete suggestions.
Because the typeahead.js list items are currently just text, a user's
full name and avatar should be displayed in `input_pill`. To use
`input_pill`, a separate Handlebars partial view was created to
provide a mandatory container (`<div class="pill-container">`) for
`input_pill` and a flex container (`<div class="search_list_item">`)
for vertically aligning the text.

The description of each suggestion (i.e `description_html`) is
rendered as raw HTML, so every special character (e.g. whitespace)
should be HTML-escaped. This enables highlighting the substring in
each search suggestion that matches the query.

Fixes: #20267
2022-08-16 14:17:42 -07:00
N-Shar-ma e52268aeee documentation (user): Document `/poll` in `?` help widget.
To make it easier for users to make polls, their syntax is documented
using an example along with its (non dynamic) rendered version.

Fixes: #18588.
2022-08-16 13:55:56 -07:00
Ganesh Pawar e758ec400b alert word: Convert inline form to modal. 2022-08-15 19:07:38 -07:00
Tim Abbott 4a34b7d18e left-sidebar: Make Subscribe to more streams more informative.
The "Subscribe to more streams" widget has always had this tension
between "Subscribe" vs. "Create" in a way that felt like whatever we
wrote could be confusing. To address this, we enhance the component to
advertise whether additional existing streams that the user can
subscribe to actually exist or not.

- When the user has N>0 streams they can subscribe to, we display
"Browse N more streams".

- When the user has no streams they can subscribe to (i.e. they're
already susbcribed to all the ones they could join) but the user has
permission to create streams, we show a "Create a stream" link.

- If the user doesn't have permission to subscribe to or create any
streams, we don't show a link at all.

Fixes #21865.

Co-authored-by: Jai soni <jai_s@me.iitr.ac.in>
2022-08-15 12:32:43 -07:00
Tim Abbott e083a4bf46 drafts: Fix draft controls being offscreen on mobile web.
This was caused by an interaction with the controls being positioned
absolutely -103px from the right edge of the element, which is clearly
a hack.

Replace that with a simple `float: right` construction, with the top
padding aligned.

Fixes #22512.
2022-08-14 09:07:11 -07:00
Tim Abbott b67ff652de css: Remove Bootstrap legend CSS.
We inline this into the CSS for the one element where we use it.
2022-08-13 17:36:08 -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
Ganesh Pawar f6f85f98a7 portico: Remove usage of `control-group` and `control-label` class. 2022-08-13 14:59:37 -07:00
Dinesh 48d2783559 read_receipts: Add support for displaying read receipts.
Adds an API endpoint for accessing read receipts for other users, as
well as a modal UI for displaying that information.

Enables the previously merged privacy settings UI for managing whether
a user makes read receipts data available to other users.

Documentation is pending, and we'll likely want to link to the
documentation with help_settings_link once it is complete.

Fixes #3618.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
2022-08-12 13:16:35 -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
evykassirer 3ddb2b1457 drafts: Move padding from draft rows to whole list.
This is a refactor with no visible change. It allows other elements
to more easily be added to the draft list and have the same padding.
2022-08-11 16:36:56 -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
Biki-das c387e7c2ec settings: Fixes alignment of save/discard widget with text.
Resolves the issue by aligning the buttons with the text.

It's not entirely clear why text-bottom is the correct alignment, but
visually it seems to be correct.

Fixes: #20583.
2022-08-11 16:06:03 -07:00
Ganesh Pawar 84e307581f minor: Remove usage of `control-group` and `control-label` class. 2022-08-09 10:36:27 -07:00
Ganesh Pawar 91723afbae minor: Remove stale `control-label` CSS.
None of the removed classes/id's make use of the `control-label`
class.
2022-08-09 10:36:27 -07:00
Tim Abbott 98c7427bfc message_edit: Remove Bootstrap cruft from message edit form.
* Remove likely useless use of `controls` Bootstrap class.
* Remove outer control-group elements, which just added 10px bottom margin, and
  were always used with .no-margin, which removed that margin :).
* Rename message-edit-timer-control-group to message-edit-timer, since
  it isn't a control-group.
2022-08-06 22:28:40 -07:00
Tim Abbott 9c1c0016ed css: Clean up message edit form CSS somewhat.
* Remove Bootstrap `form-horizontal` class and !important override
  required by it.
* Standardize on 10px bottom margins; this fixes subtle bugs in some
  sizes.
2022-08-06 22:28:40 -07:00
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