Commit Graph

3138 Commits

Author SHA1 Message Date
Tim Abbott 0dac331c17 css: Adjust scope for main overlay CSS and click handlers.
KaTeX makes use of a "span.overlay" element for the little vector
arrow symbol on top of a `\vec` object. This conflicts with Zulip's
CSS for our overlays, which are divs with the `overlay` CSS class.

While KaTeX may rename their class
(https://github.com/KaTeX/KaTeX/issues/1456), we can work around this
issue by scoping our own overlay CSS and click handlers to
"div.overlay" rather than ".overlay".

Fixes #18068.
2021-04-14 08:27:18 -07:00
Siddharth Asthana 7c485c1302 integrations page: Add "Create your own" button.
This commit adds a "Create your own" button on the integrations page. It
redirects to "api/integrations-overview" page and is placed by the side
of "Request an Integration" button.

Fixes #7935
2021-04-13 21:03:48 -07:00
majordwarf 4b3290566b docs: Document integration request process.
There was no proper documentation to guide user to request an integration.
The following changes documents the whole process and links it from the
`/integrations/` page making it visible to the end-user.

Fixes #7935
2021-04-13 20:48:34 -07:00
akshatdalton b9a318485c bots settings: Stop modal from getting closed when an error is shown.
This commit fixes the issue of error message not getting
displayed when the `Full name` field, in bots settings, is given
a duplicate name of an already created bot with the same name.

We were closing the modal each time whether the request is
successful or not. Hence, we now close the modal only
when the request is successful and error is displayed on
the modal otherwise.

Fixes #18091.
2021-04-13 11:42:36 -07:00
Rutvi Sharma 71edbd47d5 style: Increase width of gear menu to avoid distracting hover.
The comment explains the reasoning, but this should make it a lot
easier for users to visually focus on the menu items in the sidebar.

Changed by tabbott to use the same width as the right sidebar itself.

Inspired by #17169.
2021-04-09 15:52:37 -07:00
TylerPham2000 4dacbfdc82
panels: Adjust opacity value for the exit widget.
This makes this icon less invisible.

Once the user hovers over the "x" it will become brighter to notify the user.
2021-04-09 14:49:50 -07:00
Sumanth V Rao 164506d950 css: Fix vertical alignment mismatch for view_in_playground button.
We'll be changing the icon and probably even doing the alignment in
a better fashion in the future, so this is just a temporary fix
till then.
2021-04-07 21:06:36 -07:00
Anders Kaseorg 8f0f0b9e91 styles: Slightly increase monospace font size.
Commit d84727ce7f (#17970) slightly
decreased the apparent size on some platforms depending on which font
was in use before, and some users complained that it was a bit hard to
read.  Based on experiments with multiple platforms and monitors and
resolutions, this appears to be a good compromise that increases the
rendered height without increasing the width more than necessary.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-07 13:17:20 -07:00
Aman Agrawal 18907eac33 tippy: Set default font size to 12px.
The default font size for tippy before was 14px and it appears large
for a tooltip compared to rest of the content.
2021-04-07 01:16:29 -07:00
Anders Kaseorg d84727ce7f styles: Use Source Code Pro as our monospace font.
Fixes #15993.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Anders Kaseorg 236e114870 styles: Consistently use generic fallback font families.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-05 15:18:41 -07:00
Aman Agrawal 5e83965e80 giphy: Use GIPHY web SDK to allow inserting GIFs in compose box.
We use GIPHY web SDK to create popover containing GIFs in a
grid format. Simply clicking on the GIFs will insert the GIF in the compose
box.

We add GIPHY logo to compose box action icons which opens the GIPHY
picker popover containing GIFs with "Powered by GIPHY"
attribution.
2021-04-05 15:04:49 -07:00
Aman Agrawal f7f5308986 recent_topics: Don't change background color on thead hover.
We expect to give recent topics a cleaner look by doing so.

Fixes #17934
2021-04-03 07:41:01 -07:00
Palash Singh Raghuwanshi 7c43f1e2f7 static: Fix setting gear to be not active when app loads.
From the commit history, this typo has always been there; because it
had the same priority as the `opacity: 0.5` for that element,
it can be nondeterministic whether the bug appeared.

Fixes #17476.
2021-04-02 18:15:00 -07:00
Anders Kaseorg 0868641ea4 Revert "static: Make alert-box available for portico pages."
This reverts commit a00f5dd90e (#17801).

That commit introduced a regression in the portico pages as described
in commit 85b3157b47.  Since that fix
introduced a regression of its own, we need to revert both commits for
now.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-01 15:25:23 -07:00
Anders Kaseorg 6a877890b8 Revert "css: Fix webapp alert styling incorrectly applying to portico."
This reverts commit 85b3157b47.

This broke the × button on Blueslip alert boxes, because @extend does
not work across different PostCSS compilation units.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-01 15:25:23 -07:00
Tim Abbott 85b3157b47 css: Fix webapp alert styling incorrectly applying to portico.
In a00f5dd90e, we needed to move the
`alert-box` styles from alerts.css to be visible in portico pages.
However, when doing so, we incorrectly moved all of alerts.css, which
also has styles for `alert` and` alert-error` designed to make it
convenient to include hidden elements for potential errors in the
webapp settings UIs directly in the HTML template (and then use
show/hide to manage them).

We fix this by moving just the alert-box scope to the common
components.css module, which is designed as the place for styles
shared between the webapp and portico pages.

This fixes an issue where the error messages for wrong password and
the like were invisible :(.
2021-03-31 10:06:40 -07:00
aryanshridhar 134a6f8bba edit_bot: Fix dropdown username capitalization.
Restructured dropdown_list_widget template to unwrap label tag
from the control group, hence defaulting the edit_bot
dropdown items to their original text size.
2021-03-30 16:14:42 -07:00
Anders Kaseorg e642b8e777 rendered_markdown: Add horizontal scrollbar to overflowing ```math.
Fixes #14422.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-28 19:03:40 -07:00
Sumanth V Rao e925ec6c41 css: Hide copy-paste button for codeblocks in formatting help overlay.
We missed out on this during our previous efforts to add a copy-to-clipboard
icon in codeblocks (42d30bc14b).
2021-03-26 09:46:09 -07:00
PIG208 a00f5dd90e static: Make alert-box available for portico pages. 2021-03-26 09:41:08 -07:00
Anders Kaseorg d22a61443e notifications: Remove in_browser_notify and bootstrap-notify.
Follow up to #14768.  This feature was already non-functional due to
.alert-display { display: none; }, and if we want to reimplement it,
we should do it using a modern library.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-22 23:40:38 -07:00
Anders Kaseorg aff8a32bc1 notifications: Simplify sound playing.
Remove the unused notifications-area wrapper.  Remove the feature
detection code as all browsers recognize the <audio> element.  Create
the <audio> statically with the page template.  Use multiple <source>s
to let the browser detect the appropriate format instead of trying to
do its job for it.  Remove the absurd loop="yes" attribute, which had
fortunately been specified on the wrong element.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-03-22 23:36:38 -07:00
Gaurav Pandey dea5245590 right-sidebar: Fix design bugs with keyboard-shortcuts.
The keyboard-shortcuts icon currently has a fix position
causing design related bugs such as overlapping with userlist
in the sidebar.

The fix wraps the invite-more-users link and keyboard icon inside
a div with display property as flex instead of just using the anchor
tags inside the side-bar items.
2021-03-22 19:29:46 -07:00
Signior-X 31b7eb7439 style: Fix the vertical alignment in message controls.
This commit adds vertical-align: middle to .message_failed in zulip.css
which was necessary as the alignment of .message_failed wasn't matching
with rest of the message controls like .edit_content. This makes the
look of the message controls better that they don't look shifted.

Follow up #17666
2021-03-21 17:38:14 -07:00
Gaurav Pandey 7ddf6435a9 left-sidebar: Remove add-streams option out of scrollbar.
This commit removes the option to add more streams out of scrollbar
as it is not visible on mobile devices or organizations with large number of
streams until scrolled down.
2021-03-16 14:10:04 -07:00
Abhijeet Prasad Bodas 9223dced3b refactor: Rename filter to linkifier in frontend code and docs.
This only leaves `page_params.realm_filters`, which
will be changed in further commits along with the
API change.
2021-03-15 11:19:59 -07:00
Tim Abbott e1aa7dd882 portico: Fix line-wrapping of bulleted lists with 2-digit numbers.
As demonstrated with the recent Zabbix integration, our line-wrapping
of numbered lists was busted in the presence of 2-digit numbers of steps.

Fixes #17634.
2021-03-14 19:36:29 -07:00
m-e-l-u-h-a-n e781136acd css: Add separate class for typeahead items with no presence circle.
This commit adds a new class for typeahead items that do not need
a presence circle. It is changed to support addition of new items
that do not require presence circle.

There should not be any visual change due to this.
2021-03-12 02:10:21 -08:00
m-e-l-u-h-a-n 629aeced16 compose: Remove presence circles for wildcard users.
This commit removes presence circles for special users like
all, stream, and everyone. This was discussed at
 #design>Presence circles in typeahead, and this was justified
as presence circles for these special users will always be grey
circle and do not convey any information about presence of anyone.
2021-03-12 02:10:21 -08:00
m-e-l-u-h-a-n cd0d3347ab compose: Fix spacing of presence circles in typeahead.
This commit increases spacing between presence circles and user avatar
in typeahead suggestions.
These changes were discussed in #design>Presence.
2021-03-12 02:10:21 -08:00
Josh Gilley de74d2fd7c settings: Use HTML table for "Alert Words" for better icon alignment.
"Alert Words" is one of Zulip's oldest settings UI elements, and as a
result is buggy.  This commit converts it to use our standard
progressive-table-wrapper system used for settings tables, which has
the side effect of fixing a bug that mad ethe tables look pretty bad
if one adds a very long word.

Fixes #17172.
2021-03-05 14:38:56 -08:00
smit_patel fb8d18caf8 compose: Fix alignment of Drafts button.
Fixes #17095.
2021-03-04 17:33:01 -08:00
m-e-l-u-h-a-n f4a111e314 compose: Add user presence circles in mention and pm typeahead.
This commit addresses the problem of user's status visibility to
some extent. It adds presence circles, like we have in buddy_list to the
typeahead suggestions that are given for mentioning users in messages.

Tweaked by tabbott to adjust vertical alignment of group mentions as well.

Testing for the changes is done manually in the developement server,
and also by updating frontend tests to address these changes.

Fixes: #17138
2021-03-04 17:06:02 -08:00
Tim Abbott 7def3e7832 css: Fix vertical alignment of mention typeahead.
Somehow the previous styling was oddly off-center.
2021-03-04 17:05:04 -08:00
Gaurav Pandey 3dcf97bf27 tooltip: Hide tooltip for touch events on touch-enabled devices.
Fixes #16674.
The commit hides the tooltip for touch events on touch enabled device.

Touch events trigger both click and hover action,
leaving the hover action sustained until next click.

Hence it is better to hide the tooltip to avoid the clutter in UI.
2021-03-04 12:32:16 -08:00
Gaurav Pandey a3561c15d2 invites: Remove odd box-shadow for invite link clipboard svg. 2021-03-03 21:57:41 -08:00
Aryan Shridhar bfefec31f4 Revert "edit_bot: Fixed dropdown username capitalization."
This reverts commit ea02d48e81.
2021-03-03 23:58:50 +05:30
Gaurav Pandey 60c6ba7c3a right-sidebar: Display ellipsis icon by default on touch-based devices.
Hover does not work for touch-based devices like mobile phones.
Hence the icons on the right sidebar do not appear, making the
user unaware of its presence on such devices. The following
media property displays the icon by default for such behaviour.
2021-03-02 12:05:50 -08:00
Gaurav Pandey 56f16ca9dd left-sidebar: Display ellipsis icon by default on touch-based devices.
Hover does not work for touch-based devices like mobile phones.
Hence the the icons does not appear, making the user unaware of its
presence on such devices. The following media property displays the
icon by default for such behaviour.
2021-03-01 15:40:39 -08:00
Suyash Vardhan Mathur d1c24d3f67 api docs: Fix blank line at end of Code Blocks.
Added the missing padding: 0 to remove the blank line in code blocks
as is done in Webapp code blocks CSS. Fixes part of #15967.
2021-02-26 08:14:54 -08:00
Riken Shah e5ad56fa71 keyboard shortcuts: Make keyboard shortcuts modal more responsive.
Some hotkey combinations were overflowing in the keyboard shortcuts
table in smaller width devices.

Fixes part of #16817.
2021-02-26 07:59:15 -08:00
Riken Shah 70bc5ba6f2 settings: Make account settings more responsive.
The textarea in Settings/User Profile was overflowing in
smaller width devices.

This commit fixes that issue by adding appropriate media queries.

Fixes part of #16817.
2021-02-26 07:59:01 -08:00
Anders Kaseorg fa191b9912 Revert "stream-ui: Change view from 2-column to 1-column at width 992px."
This reverts commit 34ada11448.

That commit traded a minor visual glitch for a major usability
regression at my most common browser width (960px).

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-26 07:52:47 -08:00
Aman Agrawal fafbccfcd4 recent_topics: Stop last_msg_time_header::after from overflowing.
We change the text. This is an attempt to make the text space occupied by
the col header of last message timestamp smaller so that
it doesn't overflow to next line in some languages.

Also, add some extra padding.
2021-02-25 17:33:01 -08:00
Aman Agrawal d0a1d95c89 recent_topics: Fix search box not visible after wrapping in safari.
On safari, after search box wraps to next line on smaller widths,
it is not visible due to some flex box default property difference
between chrome and safari. We fix this by resetting default
property.
2021-02-25 17:31:33 -08:00
Aman Agrawal 56aa6673fe recent_topics: Use padding instead of line-height for spacing.
We need to increase a bit of spacing around text in rows at <750px
because row height is reduced after hiding avatars. We use
padding instead of line height so that this plays nice when text
is wrapped.

Note more padding is also required for >750px now because text
can be wrapped now and take more width than avatars.
2021-02-25 17:31:33 -08:00
Aman Agrawal 126b5dc186 recent_topics: Let text in wrap to enforce fix width behaviour.
If we don't allow text to wrap, it overrides the fix width of
the columns.
2021-02-25 17:31:33 -08:00
Aman Agrawal 876616f17b recent_topics: Fix % of space taken by columns.
This stops recent topics from adjusting column widths as new
messages are fetched, resulting in a better user experience.
2021-02-25 17:31:32 -08:00
Aman Agrawal b84bce2bc7 all_messages: Change default icon from home to align-left.
Since All messages narrow is no longer home page for webapp,
we change its icon to align-left which also shows a concept of
interleaved topics / messages.
2021-02-25 17:31:32 -08:00