Commit Graph

3434 Commits

Author SHA1 Message Date
sahil839 d8c4b96b12 setting: Divide user_invite_restriction into a checkbox and dropdown.
This commit divides the user_invite_restriction setting dropdown to
a checkbox and a dropdown.
The checkbox is used for 'realm_invite_required' setting and dropdown
for 'realm_invite_to_realm_policy'.

This separation of UI elements is fine as these two settings are
separate in database also and also helps in removing excess if-else
conditions and switch cases.
2021-06-03 18:45:29 -07:00
Priyank Patel 75034bb767 settings_orgs: Add hover like effects on focus for save-discard buttons.
This uses the same effect as hovering over the button when they are
focused using keyboard shortcuts such as Tab or Alt + Tab.
2021-06-03 12:41:10 -07:00
Robert Imschweiler 31322be598 css: Make login-social-button responsive to larger fonts. 2021-06-02 20:23:33 -07:00
Aman Agrawal 36051877a5 recent_topics: Optimize for mobile devices.
On small widths, add margin to right to action buttons so
that they don't they trigger scrollbar when clicked upon.

Make action buttons larger so that they are easier to click / tap on small
widths.
2021-06-01 08:32:06 -07:00
sahil839 d37ddf13a4 registration: Show spinner and disable button while processing.
This commit disables the button and shows a loading spinner on
the button when signup request is being processed to avoid race
conditions caused by user clicking on the button multiple times.

The fix is done observing that for the case when form is invalid
the whole page is rerendered and thus we do not need to remove
the spinner and enable the button again and for other errors
we redirect to some other page.

And for the validation taking place in client-side, the button
is disabled and spinner is shown, only is form is valid, by
using "$('#registration').valid()".
2021-05-27 22:51:13 -07:00
Nikhil Maske 725f975e96 left_sidebar: Set the width of stream-list-filter to 236px. 2021-05-25 19:49:49 +05:30
slefforge 99097b10fc help: Fix formatting on stream-permissions table legend.
This is a bit hacky, but it avoids the legend being weirdly
misaligned.

Fixes #18062.
2021-05-23 12:04:11 -07:00
Riken Shah 51e24519b8 refactor: Rename `panels.js` to `navbar_alerts.js` as it better explains it. 2021-05-21 17:49:12 -07:00
Aman Agrawal 637c7e297c streams_filter_icon: Convert from id to class.
This will allow us repeat the class which we cannot do with id.
2021-05-20 14:41:40 -07:00
Aman Agrawal ddfb9b5200 tippy: Increase font size from 12 to 13px.
Increasing the font size for clear visibility.
2021-05-19 11:20:49 -07:00
sahil839 48761208f0 css: Change width of upgrade-tip and to max-content.
We change the width of upgrade-tip to be max-content
such that it matches with the other elements in
settings overlay like dropdown, which are not of full
width.
2021-05-19 11:04:32 -07:00
PIG208 4e8dd43841 devtools: Improve the appearance of dev_panel. 2021-05-18 17:35:29 -07:00
rht aa3cdfa2e9 Fix typos using codespell.
The command:
codespell --skip='./locale,*.svg,./docs/translating,postgresql.conf.template.erb,.*fixtures,./yarn.lock,./docs/THIRDPARTY,./tools/setup/emoji/emoji_names.py,./tools/setup/emoji/emoji_map.json,./zerver/management/data/unified_reactions.json' --ignore-words=codespell_ignore_words.txt .

The content of codespell_ignore_words:
```
te
ans
pullrequest
ist
cros
wit
nwe
circularly
ned
ba
ressemble
ser
sur
hel
fpr
alls
nd
ot
```
2021-05-18 17:33:51 -07:00
Vishnu KS 323ad83d98 billing: Allow updating licenses of plans on manual license management. 2021-05-14 15:10:02 -07:00
Anders Kaseorg e015f3ed7d docs: Correct “webapp” to “web app”.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-14 13:15:38 -07:00
Aman Agrawal 987acd93f4 message_edit_form: Fix vertical alignment of bottom elements. 2021-05-13 17:11:29 -07:00
Anders Kaseorg 668b5137b0 version: Display Zulip version in About Zulip dialog.
We record Git details about the merge-base with upstream branches in
the zulip-git-version file, if the upstream repository is available.

Note that the first Git upgrade after merging the parent commit will
not include the merge-base details, since the upstream repository will
not have been available.

Co-authored-by: Tim Abbott <tabbott@zulip.com>
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-13 11:36:12 -07:00
Tim Abbott 61e1f5eb37 settings: Use consistent dropdown widths for permissions. 2021-05-13 08:42:24 -07:00
akshatdalton a3930d8804 edit_linkifier: Improve UI for error message display on modal. 2021-05-12 20:32:35 -07:00
Aman Agrawal 91d32b1512 recent_topics: Extend the borders to bottom of window.
When height of topics is less than window height, the borders
don't reach bottom. So, we min-height for the table to make it
span to the bottom.
2021-05-12 15:45:08 -07:00
Tim Abbott ad4c5890aa portico: Make apps selector easier to see. 2021-05-12 11:58:14 -07:00
Tim Abbott 4dae2c53fb recent_topics: Make muted user avatars a bit less bright. 2021-05-12 09:38:36 -07:00
Abhijeet Prasad Bodas ed8faf1374 recent topics: Rename some HTML classes for readability. 2021-05-12 09:30:24 -07:00
Tim Abbott 9239de408a compose: Remove now unused nonexistent_stream_reply_error.
This was a holdover from the legacy "reply" button behavior; with the
new wide button model, it just becomes a normal "compose" button.
2021-05-11 23:57:57 -07:00
Tim Abbott 6a374d6d28 drafts: Replace notification when saving a draft.
The old logic, inline in the compose area, has produced a very weird
effect where the buttons would move to fit the notification, ever
since design changes to use the full bottom row space.

We address this by just using a Tippy tooltip instead.
2021-05-11 15:01:25 -07:00
Tim Abbott f83bea76a2 compose: Revert placeholder styling for bottom reply button.
* Revert "frontend: Remove hover effect from small messagebox."
  This reverts commit 27d9643274.
* Revert "frontend: Use placeholder style for small messagebox text."
  This reverts commit 8453aac260.
* Revert "frontend: Make "Reply" button look more like a textbox."
  This reverts commit 9fdd7184c6.
2021-05-10 12:54:30 -07:00
Anders Kaseorg 544bbd5398 docs: Fix capitalization mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-10 09:57:26 -07:00
Tim Abbott 831b7ca965 css: Fix style for buttons that are just a pencil icon. 2021-05-09 20:29:06 -07:00
akshatdalton 43aee21dcc linkifiers: Add frontend support to edit linkifier.
A modal is added to edit the realm linkifier which
supports ui_report error.

Puppeteer tests to verify linkifier update and an
invalid test to verify that linkifier error messages
are reported on the modal are added as well.
2021-05-09 20:12:25 -07:00
Tim Abbott 99636c36a3 css: Remove inconsistent topic edit modal margin.
Similar elements in both the compose box and main message edit UI have
no margin in this location, and look better.
2021-05-09 19:47:27 -07:00
Tim Abbott 3e4a819722 css: Centralize topic edit modal CSS. 2021-05-09 19:47:08 -07:00
aryanshridhar 85fc8d5472 popovers: Allow Move topic's dropdown_list_widget to overflow.
Added a CSS overflow property to Move topic popover so that the
dropdown_list_widget doesn't hide behind the modal.
2021-05-09 19:35:51 -07:00
aryanshridhar 42c02f0788 popovers: Add search typeahead to Move topic popover.
Implemented dropdown_list_widget in Move topic popover which enables,
the functionality to search for streams while moving a particular topic.

The aim is to reduce the user effort by having an input
typeahead instead of haivng a dropdown list of streams.

Closes #14860.
2021-05-09 19:32:33 -07:00
Tim Abbott eff0014691 apps: Fix inconsistent sizing of hover bubbles.
They are all now approximately 110x110 squares, rather than having some be
substantially taller than others.
2021-05-09 18:42:13 -07:00
Wesley Aptekar-Cassels 27d9643274 frontend: Remove hover effect from small messagebox.
Textboxes shouldn't have hover effects.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 8453aac260 frontend: Use placeholder style for small messagebox text.
This makes the small messagebox (previously referred to as the "Reply"
button) look more like a textbox.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 8bc0c14e81 css: Explicitly set placeholder text style.
Previously, we relied on the browser placeholder text style, but this
makes it impossible to style text to look like a placeholder.

Chrome uses `color` to set the placeholder, while Firefox uses
`opacity`. This commit sets both, since setting one without the other
will lead to strange behaviour.

We pick the color for the light and day themes to ensure that we meet
WCAG standards for accessibility.
2021-05-08 08:26:16 -07:00
Wesley Aptekar-Cassels 9fdd7184c6 frontend: Make "Reply" button look more like a textbox.
* Use "text" cursor effect
* Reduce padding
* Remove blue color in placeholder text
2021-05-08 07:59:31 -07:00
Aman Agrawal 51acbefc8a recent_topics: Display compose box & enable compose hotkeys.
We move compose from being a part of message feed to
being a part of  middle column which is a common parent of recent
topics and message feed. This allows us to use a common compose
box for both the views. Fortunately, compose actions were
independent of this change so there weren't any evident
side effects.

Fixes #17543
2021-05-07 16:07:51 -07:00
Anders Kaseorg 779353b44e apps: Link to macOS Apple silicon native build.
Leave the Intel build as the prominent default, since it will run on
both platforms.  (I would have liked to detect the appropriate
platform, but Apple seems to have put significant effort into making
that impossible for anti-fingerprinting reasons, which is probably an
overall good.)

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-06 17:52:00 -07:00
Anders Kaseorg fa8532d9b7 apps: Move id="download-android-apk" from span to a.
Due to spaghetti CSS that should be fixed but isn’t fixed here, the
<span> wrapper is still needed so the hover effect is applied.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-05-06 17:52:00 -07:00
Tim Abbott c60609efeb css: Fix hover effect for status list messages in night theme.
Fixes #17944.
2021-05-05 15:37:30 -07:00
Tim Abbott 318dd8b408 css: Remove grey styling for day theme compose buttons.
This day theme styling was added in
74dbcdf2a8, and some users interpreted
this buttons styling as suggesting that these buttons were disabled.
2021-05-05 11:51:56 -07:00
Sumanth V Rao a510dac024 settings_playground: Add UI to create a new playground.
The design of the form is similar to the linkifiers page
and is styled similarly.

The introduction text for "Code playgrounds" is improved
with more details and examples.

Also, we can remove the hardcoded playground and the fix
we had previously done to prevent breaking the hardcoded
playground.
2021-05-04 11:39:33 -07:00
Tim Abbott 472c845908 subs: Remove obsolete form. 2021-05-04 09:33:56 -07:00
Ken Clary 74dbcdf2a8 frontend: Change 'reply' button label to reflect selected message.
The 'reply' button shows the stream>topic or recipient(s) of the
selected message, for better UX.  It also expands to fill the
remaining horizontal space in the button bar -- this should help make
it easier for new users to figure out how to reply.

Finally, it uses "Message" instead of "Reply", to better match the
compose box.

Fixes #17940.
2021-05-03 14:58:02 -07:00
akshatdalton bf41f455cd message_view: Add support for unmuting of topic from its recipient bar.
Earlier, a user can only mute a topic from its recipient bar but can't
unmute it from there (and in fact we displayed an option to mute even
if the topic was already muted!). This commit fixes that bug and
allows a user also to unmute the topic from its recipient bar.

There are two core issues here;
* We did not have code, an icon, etc. for the "already muted" case in
  the recipient bar logic at all.
* We did not rerender messages in !excludes_muted_topics views when
  muting state changed.

See: 660475bd0c for background on when
we started only rerendering the streams with excludes_muted_topics
after muting changes.  Rerendering of newly muted topics are important
for live rendering if a user is narrowed to that topic itself, which
are essentially all excludes_muted_topics narrows anyway.

Hence, now, we rerender by calling the `rerender` function for muted
topics (which is done just before we update the items for muting via
the function: `update_items_for_topic_muting`).

Tweaked by tabbott to add comments explaining the reasoning and
long-term plans.

Fixes #15223.
2021-05-03 13:07:09 -07:00
mandepsingh 61de39dd6f help: Improve alignment for markdown tables. 2021-05-01 08:21:03 -07:00
pilgrim2308 a74b52db22 UI: Add Zulip version in gear menu.
Currently only enabled in development, since the exact details don't
seem right..

Co-Author-By: Signior-X <b19188@students.iitmandi.ac.in>
Co-Author-By: Aman Agrawal <amanagr@zulip.com>

Implements UI for #8005.
2021-04-30 17:58:08 -07:00
Tim Abbott 01245c86b3 sidebars: Add a bit of margin above sidebar links.
This avoids slightly glitchy looking behavior in certain scroll
positions where there just isn't enough space above link to make it
look like it's top of the other element.
2021-04-30 16:07:25 -07:00
Tim Abbott 3e8ec76aa0 css: Slightly increase size of left sidebar. 2021-04-30 16:02:31 -07:00
Tim Abbott ed6d5dcf36 css: Extract variables for the widths of the sidebars. 2021-04-30 16:02:31 -07:00
Nikhil Maske 74bc1a0fe5 pm_left_col: Shift the PMs list slightly towards right.
Currently we show the PMs list align with the Private
messages header that make them no difference between
header and its elements list and it may confuse the user
to notice that PMs list is expanded or not. We follow
a trend of shifting the child elements slightly towards
right from the parent header element in stream-topic list.
Maintaining this trend we fix this issue similarly, the
PMs list is shifted by 10px towards the right.
2021-04-30 16:02:31 -07:00
Nikhil Maske b7fb130578 left_sidebar: Replace user_circle_class with fa fa-group icon.
It is difficult to distinguish group PMs from 1:1 PMs, so to
improve the UI it is better to show different icon for group
PMs. Here we are using fa fa-group icon for group PMs.

Fixes #18069.
2021-04-30 16:02:29 -07:00
Nikhil Maske 0023f7f9a0 settings css: Make HTML table headers sticky.
Introduce a new class "table-sticky-headers" in the settings
and organisation settings HTML table tags and it is used
to make the table headers fix at the top. This commit also
add the background-color and hover properties to the
settings and organisation settings table to make them look
similar to the recent_topics_table.
2021-04-30 08:19:47 -07:00
Aman Agrawal 4a91d5ffdb compose_control_buttons: Change class name for GIF icon.
Since we no longer use giphy logo to open giphy
popover, this is a more appropriate name.
2021-04-29 16:06:51 -07:00
Aman Agrawal 818b4ee7f9 giphy: Don't change logo color in night mode.
Since giphy logo is no longer an svg, we don't need to change its
color.
2021-04-29 16:06:51 -07:00
Aman Agrawal 374ce1094b giphy: Use `zulip-icon` font to render giphy icon. 2021-04-29 09:02:25 -07:00
Aman Agrawal 5bd37b44f2 zulip-icon: Add `zulip-icon` as classPrefix for icon.
This avoids general class names like `bot`.
2021-04-29 09:02:25 -07:00
Aman Agrawal 2a1bcd4b59 giphy: Fix incorrectly working show/hide behaviour.
There were some changes that were lost/added by mistake
during a rebase of #17707 after #18154 was merged.

Fixes the GIF icon being hidden / displayed incorrectly
with respect to the settings.

These changes were originally part of
67527a2517 but
were lost during the rebase.
2021-04-29 09:02:25 -07:00
Megamind 84db1e9737
frontend: Fix overflow of alert-word-status-text in narrowed window. 2021-04-28 09:34:30 -07:00
Aman Agrawal 94b2f6e232 compose_control_buttons: Use class of giphy icon to locate it.
Since giphy icon can be present in compose box and messaged edit
form at the same, we don't want should use a class here.
2021-04-28 07:07:36 -07:00
Aman Agrawal 33641d7e05 giphy: Change icon of GIF picker.
We use an icon which is more clear for what it stands for.

Increase allowed size of message-control-buttons slightly so
that they are clearly visible. This is more important for
GIF icon to be visible properly than any other icon here.
2021-04-28 07:07:36 -07:00
Aman Agrawal f47e93481e giphy: Set rating according to realm_giphy_rating.
We set rating of GIFs retrieved from GIPHY according to
realm_giphy_rating setting. Also, we allow user to set
a rating in organization settings.
2021-04-28 07:07:36 -07:00
Tim Abbott 63e3d3dd36 settings: Capitalize notification sound names with CSS. 2021-04-27 16:43:28 -07:00
Aman Agrawal 7772ef187e compose: Make close compose icon more visible.
Users may not know there is a way to close the compose box especially
in night mode since the close icon blends with the background.
2021-04-27 10:06:25 -07:00
Aman Agrawal 1b844a8d1c message_edit: Deduplicate control buttons.
Deduplicate control buttons by re-using the
compose_control_buttons.

A link to `help` overlay was added to `message_edit_form`
as a part of this process.

This fixes a bug that when video provider is set to `Jitsi`
from `none` in organization settings while message_edit_form
is open, the video icon is not displayed since
it was not present in the message_edit_form DOM even if
compose.update_video_chat_button_display tries to display it.
It is fixed since the `.video_link` element is always present
in DOM of `message_edit_form` now.
2021-04-27 10:06:25 -07:00
Aman Agrawal 84a7f08acc compose: Use `class` to find `markdown_preview` related elements.
We convert the following elements to use a class instead of
id for accessing them across the codebase:

* markdown_preview
* undo_markdown_preview
* markdown_preview_spinner
* message_edit_content
* preview_content

Converted them together since changes to one impacted the other in
some modules like click_handlers.

Also, added a function in rows to get `message_row`.
2021-04-27 10:06:25 -07:00
Aman Agrawal eae1829ead message_edit_form: Convert from `id` to `class`.
Since we can have multiple instances of `message_edit_form`, it
makes sense to have it as a class.

We track the message_edit_form by setting an id to
`form` element dependent on message_id.
2021-04-27 10:06:25 -07:00
Anders Kaseorg 178736c8eb docs: Fix spelling errors caught by codespell.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-04-26 09:31:08 -07:00
PIG208 a84eea9b84 static: Make alert.css shared between app and portico.
This involves in two changes for styling.
1. The alert class is moved from alert.css to app_components.css as this
class serves nothing but to default .alert elements to be hidden. This
is only required in the webapp but not portico pages (where .alert
elements are preferred to be shown by default).
2. The import statement for alert.css is moved from app.js to common.js,
so that both the webapp and the portico pages can share the styles. This
will be fine to share the styles as .alert-display, .alert-animations,
.alert-box are more specific then .alert and they use nested class to
define styles for inner elements.

Undoes #17936 properly.
2021-04-26 09:27:05 -07:00
Aman Agrawal 4c4c2e46fb stream_creation_form: Fix footer padding overlapping with text. 2021-04-25 08:54:08 -07:00
Aman Agrawal 384156c307 stream_create: Use ListWidget to render list of all users.
This improves the UX of creating a stream for atleast 1000+ users
realm by showing the the stream creation form much faster than
before.

Search, user addition, scrolling worked smoothly on 15k+
users realm as tested on dev setup.

Also, simplebar is used to replace the default scrollbar.

Fixes #16805
2021-04-25 08:54:08 -07:00
Tim Abbott ebcd587ee5 settings: Use consistent width for account settings modals.
The password change modal, in particular, was way too narrow to
display its error messages comfortably.
2021-04-23 15:01:37 -07:00
Gaurav Pandey e80ddfe4e6 settings: Add show password feature to forms in settings modal.
Fixes part of #17301.
2021-04-23 15:01:37 -07:00
Gaurav Pandey fa235e60ff login: Add show password feature to login page.
The show password feature is a functionality to
toggle the visibility of the password fields in forms
so that one can check if they have entered the correct
password or not. We implement this using an eye icon
toggling which converts input field type from password
to text and vice-versa.
Fixes part of #17301.
2021-04-23 15:01:37 -07:00
Aman Agrawal 2ceda13e31 tippy: Fix weird looking arrow for playground and copy code tooltips.
They were taking the height of the code block, we don't want them to,
hence we explicitly set their height to 0.
2021-04-23 11:59:18 -07:00
Aman Agrawal 9350bbd976 tippy: Fix font-family for copy code and playground tooltips. 2021-04-23 11:59:18 -07:00
Aman Agrawal 489daa7f7c tippy: Append tooltips to the parent of the `reference`.
This allows us to hide tooltips automatically when the
parent container is hidden while tooltip is active.

In an overlay, when a tooltip is active and `esc` is pressed,
the tooltip will remain active without this commit.

This has side effects of some properties of parent applying to
tooltips if property is directly set to `div`. Through manual testing,
only area where this was found was fixed.
2021-04-23 11:59:18 -07:00
Aman Agrawal 11b09bba83 compose: Replace `message-control-button` with `compose_control_button`.
This is both more correct and also fixes this element having had a
name very similar to message_control_button, which refers to an
element in the message_controls section of a rendered message.
2021-04-19 16:54:10 -07:00
Vishnu KS ab771e4b19 support: Show the first human user in realm search result. 2021-04-16 13:22:02 -07:00
Tim Abbott f89af5b2b4 css: Add block comment for reaction button logic. 2021-04-16 12:20:54 -07:00
Aman Agrawal c3211b652f reaction_button: Hide if it is the first child.
Since all the message reactions are inserted before the
add reaction button, if it is the first child, we can safely
remove it.

We changed this from `only-child` to be `first-child` because
we append tooltips as siblings of `reaction_button` but since
they are appended, they are always appended after the `reaction_button`.
Thus, if there were tooltips present the reaction_button won't hide.
2021-04-16 12:17:54 -07:00
Aman Agrawal e41fffc43e pm_list: Show correct unread unread counts.
We only update the `.private_messages_header` here since
unread_counts of `.expanded_private_message` are updated
via `pm_list.update_private_messages`.

This fixes the bug of PMs in `.expanded_private_message` having
the same unread count as `private_messages_header`.

Since we rerender the DOM of `.expanded_private_message` every
time we update unread count of PMs, we don't need to manually
update them here. Also, we always keep them on display since
there is no real need to toggle them. They are not visible
when they have 0 unread counts via `.zero_count`.
2021-04-15 10:08:50 -07:00
Tim Abbott 85a7325757 css: Delete orphaned starred messages CSS.
This CSS stopped being used in
84afc67369.
2021-04-14 11:50:07 -07:00
Tim Abbott b7cfefc213 css: Add custom styling for starred message counts.
We use an inverted color scheme to what we use for unread messages, so
that one's eyes scan these as different from unreads.

We also need to introduce a 1px offset because the border takes up space.

Fixes #17938.
2021-04-14 11:43:38 -07:00
Aman Agrawal 97496088c9 recent_topics: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 6744522229 user_presence_row: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal ab87325fea pm_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 019afcd40d topic_list_item: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal b6d9577b48 stream_list: Use `unread_counts` class for showing unread count. 2021-04-14 10:57:16 -07:00
Aman Agrawal 84afc67369 top_left_corner: Directly use `span.unread_count` to display unreads.
In an effort to use a common class to display unread counts across
the app, we simplify the elements used to show unreads and use a
single `span` with `unread_count` class to do so.
2021-04-14 10:57:16 -07:00
Aman Agrawal b1f8041c31 giphy: Use simplebar to replace browser scrollbar. 2021-04-14 10:50:47 -07:00
Aman Agrawal 35bd44ed2a giphy: Add clear search button.
Make the input more square looking to match with our other
input boxes.
2021-04-14 10:50:47 -07:00
Aman Agrawal 84f7bb85f6 giphy: Make footer background black to match to with attribution.
Adjust border-radius to make edges smooth.
2021-04-14 10:50:47 -07:00
Aman Agrawal 6271a7db9c message_controls: Don't set css properties for all `div`s in it.
This tends to behave badly when we add new elements which don't
want these properties.
2021-04-14 10:15:58 -07:00
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
Aman Agrawal 40d8a79ef4 recent_topics: Fill all vertical space available. 2021-02-25 17:31:32 -08:00
Aman Agrawal ad011272fe recent_topics: Remove top and bottom borders.
Don't show recent topics in a separate box.
2021-02-25 17:31:32 -08:00
Aman Agrawal 1eafb1d8b3 recent_topics: Move from overlay to a narrow-like view.
Recent Topics is no longer an overlay now, but note that it is
also not a typical messages narrow. It can reside between
an overlay and a Filter in the sense that it is dispalyed as
a typical Filter narrow but has properties of an Overlay.

Compose box is not visible in this view as it will be confusing
to many users and hence compose shortcuts have also been disabled.

Keyboard shortcuts that apply on messages have also been disabled.

The remaining shortcuts that apply to a narrow are still accessible
here.
2021-02-25 17:31:32 -08:00
Aman Agrawal 9ed3e47796 recent_topics: Show read topics in a darker shade. 2021-02-25 17:31:32 -08:00
Signior-X 15c4a72ac5 frontend: Fix shifted user invite copy icon
This issue adds the appropriate padding to the
copy_generate_invite_link class. This fixes the copy link icon which
seemed to be shifted when clicked.

Fixes #16868
2021-02-25 17:38:08 -05:00
Signior-X 2aec78e954 frontend: Fix right margin in stream description.
This commits gives a right margin to the stream description
so that it does not collide with the icon on its right and
also become better visually appealing.
2021-02-25 13:53:34 -05:00
aryanshridhar ea02d48e81 edit_bot: Fixed dropdown username capitalization.
Restructured edit_bot to unwrap label tag from the
control group, hence defaulting to original text size.
2021-02-24 13:50:29 -08:00
Tim Abbott 28ac9f941d css: Fix night theme keyboard UI with popovers.
When interacting with popovers in the night theme using the keyboard
UI (e.g. the `i` menu for a message), the background color was
incorrectly white, resulting from the bootstrap `nav > li > a:focus`
rule.  We had already fixed this for `nav > li > a:hover`; we just
need to add `nav > li > a:focus` to the relevant block of CSS rules as
well.

Replaces #17195 and #17353.

Rewritten to use a cleaner solution by tabbott.
2021-02-24 12:21:54 -08:00
Megamind d001916b78
right sidebar: Increase hover opacity of "filter users".
Usually we increase the opacity of an interactable icon on hover, but the search-icon at the top of the 
right sidebar was missing the behavior.

Co-authored-by: ritik <ritikcn05@gmail.com>
2021-02-23 15:30:45 -08:00
Ganesh Pawar 4118279c1a stream-ui: Fix oddly spaced elements in streams tab.
This reverts most of the changes made in commit a5f0379.
2021-02-23 15:17:33 -08:00
Ganesh Pawar 34ada11448 stream-ui: Change view from 2-column to 1-column at width 992px.
This prevents the elements to go on a newline on iPad sized devices.
2021-02-23 15:17:33 -08:00
Anders Kaseorg ba0ee6ddfa dependencies: Upgrade Source Sans Pro font to Source Sans 3.
https://blog.adobe.com/en/2020/11/30/whats-new-in-source-sans-3.html

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-23 14:55:33 -08:00
m-e-l-u-h-a-n 03e4ccbc2d message-view: Increase spacing for lists coming after paragraphs.
Lists that were followed by a paragraph (i.e. our p+ul, p+ol CSS rule)
in messages had negative top margin of -3px.  Adjusting the margin
here is important, because the default styling would result in an
excessive gap that made bulleted lists weirdly far from the previous
paragraph.  See #12113 for background.

However, the -3px negative margin was so large that it reduced spaces
between paragraph and lists, such that there was too little visible
separation between the two.  We fix this by going with a 0px
margin-top instead.

This has been tested for various structures of messages:
1. text + bulleted list
2. bulleted list + unbulleted list(or two lists)
3. only list.

And it looks good in all cases.

Fixes #17284.
2021-02-16 08:56:26 -08:00
Suyash Vardhan Mathur 05928bbdee api docs: Change font size for code and response blocks.
The code blocks and response blocks had small and unreadable font,
because they were using the bootstrap defaults without adjustment for
the size of content on the rest of the page.  Fixes part of
zulip#15967.
2021-02-16 08:22:35 -08:00
Suyash Vardhan Mathur c9c40d4fd2 api docs: Cleaned up CSS for parameter classes.
Deduplicated CSS classes of data types of response and
request parameters in API Documentation to use a single
class.
2021-02-09 10:31:36 -08:00
Suyash Vardhan Mathur 26a81ab3aa api docs: Display data type of responses in API Documentation.
Previously, the data type of responses wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation. Here we add a recursive function to
render the data types visibly in API Documentation.
Fixes part of #15967.
2021-02-05 10:41:42 -08:00
Anders Kaseorg 64b78ad992 styles: Use range context queries to eliminate *_max variables.
On a high-DPI display or with a non-default zoom level, the browser
viewport may have a width strictly between md_max = 767px and md_min =
768px.  Use only the *_min bounds for consistency.

This requires queries with strict inequalities to express upper
bounds (width < md_min).  Fortunately, that functionality is provided
by range context queries.  Unfortunately, those are not supported in
all browsers.  Fortunately, we can compile them away using
postcss-media-minmax.  Unfortunately, postcss-media-minmax currently
subtracts 1px for strict inequalities anyway to work around a Safari
rounding bug.  Fortunately, 0.02px should be sufficient for that, so I
submitted a PR:

https://github.com/postcss/postcss-media-minmax/pull/28

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-02-05 09:23:59 -08:00
Aman Agrawal 1b34f689a6 settings: Use sm_max for adjusting settings for small width devices. 2021-01-25 14:49:32 -08:00
Aman Agrawal 65db0aeb98 settings: Use 425px as breakpoint for seperating api key buttons. 2021-01-25 14:49:32 -08:00
Aman Agrawal e4389b7562 settings: Remove dead code.
This code has no effect on the checkbox in settings overlay.
2021-01-25 14:49:32 -08:00
Aman Agrawal b38dc0a48b user_status: Expand to full width on mobile like width devices.
Use 424px as a breakpoint vs 384px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 705fd50e9e feedback_container: Expand to almost full width below 767px.
Remove css clutter.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1374d556da css: Use a min width for main app containers below mm (375px) widths. 2021-01-25 14:49:32 -08:00
Aman Agrawal f8aea9aecb postcss_vars: Use underscore to follow better naming convention. 2021-01-25 14:49:32 -08:00
Aman Agrawal c287377512 css: Replace 575px with it's variable sm-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal d9b60e63cf media_breakpoints: Use ms-min var for 320px. 2021-01-25 14:49:32 -08:00
Aman Agrawal 6fc71194c8 lightbox: Show compact view at 767px instead of 736px.
No regression is possible since are just doing adjustments to
make this view compact at a higher width.
2021-01-25 14:49:32 -08:00
Aman Agrawal e2130b944d compose: Adjust compose box for mobile at 374px vs 370px.
Since the change in breakpoint is minor no regression is seen.
2021-01-25 14:49:32 -08:00
Aman Agrawal 1e56db447c settings: Show bots info at full width at less than 991px.
Since the bots list breaks at 625px with left col of settings
hidden and at  850px with left col of settings visible
without this media query,
having this media query trigger at 991px shouldn't produce
any problems.
2021-01-25 14:49:32 -08:00
Aman Agrawal 89b5245d3c css: Replace 767px with it's variable md-max. 2021-01-25 14:49:32 -08:00
Aman Agrawal 17f34bdfbf rendered_markdown: Use 575px instead of 600px for breakpoint.
This media query changes the how embedded messages is displayed
on small screens. Changing breakpoint to 575px offers similar
experience.
2021-01-25 14:49:32 -08:00
Aman Agrawal 500f02e796 subscriptions_overlay: Justify stream filters at 991px vs 1033px.
This media query aligns filter buttons on tablets. Since tablets
range are usually less than 991px in width, this breakpoint makes
more sense. Also, the filter buttons looks nice between 1033px
and 991px.
2021-01-25 14:49:32 -08:00
Aman Agrawal d71ea084e0 settings: Use 767px as breakpoint for single col mode.
Since we are increasing breakpoint from 750px to 767px, there
is no regression. Visually, no difference is perceived.
2021-01-25 14:49:32 -08:00
Aman Agrawal 3d95078117 settings: Move user avatar below at 991px instead of 953px.
Since we are increasing the breakpoint width, the is no
regression possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal 92cd856848 subscriptions_overlay: Use 991px as breakpoint for smaller devices.
Instead of adjusting the width of settings container at
1130px, we adjust it at 991px which is the standard for smaller
screens. Adjusting it 1200px(xl) didn't make sense, so the
next reasonable breakpoint was used.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac402428ed recent_topics: Use 767px for 750px as breakpoint for hiding columns.
There is no breaking change, just standardizing breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal e404fea055 popovers: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable here.
2021-01-25 14:49:32 -08:00
Aman Agrawal a9be2f4067 recent_topics: Expand width at 767px instead of 700px.
This looks nice and doesn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal d074b8b1f0 informational_overlays: Use $md-max=767px for 769px breakpoint.
md == 768px so there si only 1px difference here which is not
noticeable.
2021-01-25 14:49:32 -08:00
Aman Agrawal 67dd54445f drafts: Expand width at 757px instead of 700px.
This is to standardize the media breakpoints.
2021-01-25 14:49:32 -08:00
Aman Agrawal 9e1eb25199 alerts: Reduce width to 80% at 991px (lg-max) instead of 900px.
Since alert-box has size of 900px on large devices, we had to
reduce its size for devices less than 900px. Setting this
breakpoint to 991px, shouldn't break anything.
2021-01-25 14:49:32 -08:00
Aman Agrawal ac09572317 media_query: Use 575px instead of 500px to reduce spacing.
At 575px, we used to reduce spacing for
all components around webapp.

This is basically the standard breakpoint for mobile devices.
2021-01-25 14:49:32 -08:00
Aman Agrawal a55128721b search_pills: Use 575px instead of 500px as breakpoint for mobile.
The changes were not live tested since search pill is not enabled.

However, this should look fine since the properties changed
were not depended upon 500px.
2021-01-25 14:49:32 -08:00
Aman Agrawal ddf5ee9d38 compose: Use 575px instead of 551px as breakpoint for mobile.
This was tested to be working fine. Since display property
doesn't depend upon 551px, no regressions are possible.
2021-01-25 14:49:32 -08:00
Aman Agrawal e941ee4a15 media_query: Use 767px instead of 775px as md breakpoint.
We use 767px for hiding left column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 775px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 5a8150e34b media_query: Use 1199px instead of 1165px as xl breakpoint.
We use 1199px for hiding right column.

The components changed here were tested to be working fine.

This change is not likely to introduce any regression as the
calculations in the components here were not dependent upon the
breakpoint being at 1165px.
2021-01-25 14:49:32 -08:00
Aman Agrawal 677f5e961a subscriptions: Remove dead code for hiding stream description.
This code was intended to hide the stream description on stream
settings overlay on display <350px; but, the css selector for
should be `.stream-row` instead of `.stream_row`. Anyway, the
overlay looks fine on small devices with stream description.
Hence, we just remove this dead code.
2021-01-25 14:49:32 -08:00
Suyash Vardhan Mathur f4cf5166bb api docs: Display data type of parameters in API documentation.
Previously, the data type of parameters wasn't displayed in the API
Documentation, even though that OpenAPI data is carefully validated
against the implementation.  Here we add a recursive function to
render the data types visibly in the API documentation.

This only covers the request parameters; we'll want to do something
similar for response parameters in a follow-up PR.

Fixes part of #15967.
2021-01-21 15:56:07 -08:00
Aman Agrawal 84a7e9f837 subscriptions_overlay: Show buttons in next line as block at <576px.
When we switch subscription overlay from two column to one
column overlay, we also set stream buttons to show in next line.

575px because it the breakpoint used by bootstrap 4 for small
screens.
2021-01-19 17:49:10 -08:00
Aman Agrawal 9b23e540df message_edit: Stop stream_header_colorblock from overlapping others. 2021-01-17 11:07:32 -08:00
Anders Kaseorg 93101c953f alerts: Prevent icons from spilling out of alerts.
Fixes #16911.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-12-30 07:55:29 -08:00
Aman Agrawal 62d721e859 docs: Remove HipChat migration guide.
As of Feb 15th 2019, Hipchat Cloud and Stride
have reached End Of Life and are no longer
supported by Atlassian. Since it is almost 2 years
now we can remove the migration guides.
2020-12-23 15:43:13 +05:30
Pranav Joglekar 089af801fb
ui: Make the set status modal mobile responsive.
The set status modal to add/remove/update user status was not
visible properly on devices with a small width. This commit fixes
the issue by adding appropriate media queries to the css to make
the modal mobile responsive.

Fixes part of #16817.
2020-12-18 12:45:14 -08:00
Vishnu KS 4b99f9e407 support: Fix styling of plan details.
The vertical allignment of billing method and downgrade plan
went a bit off in 41cb047645

This commit should fix the allignment.
2020-12-17 17:09:20 -08:00
Siddharth Asthana 6f962c1815 support: Add ability to change subdomain of realms. 2020-12-06 00:48:10 -08:00
Vishnu KS bae9dc5f2f billing: Use name selector for overriding the spin button for license input. 2020-11-06 09:59:33 -08:00
Kamal Marhubi 9c176bc0fa markdown: Remove border colour on inline code links
The visual noise from the blue border has bothered me forever and I
finally decided to do something about it. I don't know if this is the
best solution, but I do think it's a lot better than the status quo!
2020-11-05 09:32:05 -08:00
YashRE42 79d077135e navbar: Remove :not() text-overflow selector.
Here we change from using clip to using ellipses on stream name.
2020-11-03 16:54:09 -08:00
YashRE42 af221526f2 navbar: Remove unnecessary :not() selector.
Replace not selector with equivalent properties.
2020-11-03 16:54:09 -08:00
YashRE42 4c0b7f9e9b messsage_view_header: Remove flex set via :not().
This did not server any purpose.
2020-11-03 16:54:09 -08:00
YashRE42 967efc32d2 widgets: Remove tictactoe example widget.
Steve asked me to remove this, since the tictactoe game was always
intended as a proof of concept. Now that we have poll and todo
widgets, the sample code for tictactoe has much less value.

We replace the content and type in test_widgets.py to maintain
coverage.
2020-11-03 14:46:39 -08:00
Aman Agrawal 190af58d18 subscription_settings: Fix subscriber search box width.
These properties were causing the search box to have a very small
width. Removing it returns search box to normal width.
2020-11-02 16:30:57 -08:00
aniketsonu 28aaf24a61 invite: Add Copy-to-Clipboard button for multiuse links.
A convenient copy-to-clipboard button was added in the Invite users to
Zulip modal, to make it slightly more convenient to share the
generated links.

The formatting is extracted to a template to make i18n and variable
substitution simpler.

Tweaked by tabbott significantly to simplify JS, HTML, and CSS.

Fixes #16442.
2020-11-02 15:34:50 -08:00
Aman Agrawal 7d21f574b7 subscriptions_overlay: Increase line height of stream name.
This stop some part of stream name from being hidden.
2020-11-02 12:15:33 -08:00
Aman Agrawal aa5a032087 subscriptions_overlay: Stop button from overflowing out of view.
This media query makes the buttons overflow out of view and are
not visible for large stream names.
2020-11-02 12:13:12 -08:00
Aman Agrawal a144f56a00 compose: Remove breaking css property.
When compose box is open we already set
```
    $(".new_message_textarea").css("min-height", "3em");
```
in compose_actions.js.

So, this property actually reduces the min-height slightly which
hides the topic when it is long enough to span in two lines.
2020-11-02 12:10:36 -08:00
Aman Agrawal a26c0b6584 compose: Remove unused css property.
This property never gets used and is not necessary since it
is overridden by
```
        .button.small {
            font-size: 1em;
            padding: 3px 10px;
        }

```
in compose.css

which looks good enough.
2020-11-02 12:10:36 -08:00
Aman Agrawal e7a5588cb3 drafts: Remove unused css property.
Since width of drafts-container is set to 58% above, this
property never gets used.
2020-11-02 12:09:34 -08:00
Aman Agrawal 93e99d0ebd settings: Remove unused css property.
There is no sidebar-bottom-anchor in our codebase, because it was
removed in 96caebf38f.
2020-11-02 12:07:30 -08:00
Anders Kaseorg b98434682e styles: Convert [readonly] selector to :read-only pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
Anders Kaseorg 192f1eb0fc styles: Convert [disabled] selectors to :disabled pseudo-class.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-30 11:46:57 -07:00
aryanshridhar c591141d7c popover: Fixed color-picker popover responsiveness.
Color-picker overflows the screen width when an user
attempts to change color of the stream in small devices.

Fixed by making it fullscreen in narrow devices.

Fixes #16477
2020-10-29 16:56:02 -07:00
Anders Kaseorg 72d6ff3c3b docs: Fix more capitalization issues.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2020-10-23 11:46:55 -07:00
sahil839 1d5aa2e514 settings_org: Add frontend to change wildcard_mention_policy.
We add dropdown for wildcard_mention_policy in organization
permissions page.
2020-10-22 15:00:27 -07:00
YashRE42 e344ea25f8 landing-page: Rename to landing_page.css. 2020-10-19 11:50:39 -07:00
YashRE42 ab67232904 portico-signin: Rename to portico_signin.css. 2020-10-19 11:50:39 -07:00
YashRE42 7ee3484b7b portico-styles: Rename to portico_styles.css. 2020-10-19 11:50:39 -07:00
YashRE42 51f82ad839 right_sidebar: Rename .css file to right_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.right_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 bd72ba76f3 left-sidebar: Rename .css file to left_sidebar.css.
This changes the file name to existing conventions, it does not,
however, change the actual `.left_sidebar` tag used in the
app.
2020-10-18 14:09:47 -07:00
YashRE42 46a74d3e08 informational-overlays: Rename .css file to informational_overlays.
This changes the file name to existing conventions, it does not,
however, change the actual `.informational-overlay` tag used in the
app.
2020-10-18 14:09:47 -07:00
Aman Agrawal 1e5873df9e text-error-css: Use same color as used by bootstrap for text-error. 2020-10-18 14:06:20 -07:00
Aman Agrawal 1849ca41d2 login: Top right align error message.
Fixes the alignment issues and this better indicates the field to
which error message belongs to.
2020-10-18 14:06:20 -07:00
Aman Agrawal 8297121050 Revert "login: Fix alignment of error message in login form."
This reverts commit 6fe82620df.

Reverted since this misaligns other forms which use the same
class.
2020-10-18 14:06:20 -07:00
Sumanth V Rao 264bf1fc2a css: Hide bottom-right resizable box in view-source textarea. 2020-10-08 17:13:50 -07:00
Sumanth V Rao adfe4cacc6 css: Add vertical scrollbar styling for view-source textarea.
This styles the vertical scrollbar similar to the horizontal
one for <pre/> (which can be seen in narrow windows). Strictly
speaking, this change shouldn't go in rendered_markdown.scss, but
placing it there helps unify the two scrollbar stylings rather than
duplicating them.
2020-10-08 17:13:50 -07:00
Sumanth V Rao ab9a011f89 css: Modify button styling to adjust for svg size change.
This builds on the previous commit and adds final touches to
both the button positioning and style.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 792029cbb8 css: Refactor copy_message button to use copy_button_base class styling.
Z-index is added to the base class. This doesn't affect copy_code_button
in any way.

Attributes dropped/changed:
    - background-color
    - Base class on-hover property is now used.
    - height, width, padding is now the base classes.

We can also remove the TODO now.
2020-10-08 17:13:50 -07:00
Sumanth V Rao 26ff6db751 css: Extract copy_button_base from copy_codeblock class.
The base class will contain common styling which is used by both
copy_codeblock and copy_message buttons. This sets us up nicely
for following commit(s) which aims to unify the two button styling.
2020-10-08 17:13:50 -07:00
Aman Agrawal c7d66421f9 sidebars: Fill search boxes to full width.
After our bootstrap upgrade, search boxes were not full width on
when sidebars acted as popovers on small widths.
2020-10-08 17:03:56 -07:00
Aman Agrawal 6fe82620df login: Fix alignment of error message in login form. 2020-10-07 16:18:54 -07:00
Gittenburg 55a67ee7c5 message_edit: Display Formatting button as "Help".
Match the compose change b245e1e49a.
2020-10-02 14:54:14 -07:00
Aman Agrawal ff5d00890c new-style-checkbox: Set to cursor to not-allowed when disabled. 2020-10-01 17:45:11 -07:00
Aman Agrawal f6e42d3c28 msg_edit: Don't show checkbox label in next line. 2020-10-01 17:45:11 -07:00
Aman Agrawal 07bba28889 settings-dropdown: Use bootstrap styling on hover.
For dropdown elements, use bootstrap styling. The styling
was not applied by default from bootstrap since we
use a combination of dropdown + simplebar for this element.
This doesn't match the expected structure of elements by
bootstrap since simplebar inserts elements of its own.

The style is same as in bootstrap v2.3.2 for
.dropdown-menu > li > a.
2020-09-30 17:45:53 -07:00
Sumanth V Rao 918b1ea61d css: Add styling for code_external_link hyperlink.
In case of previews, we tweak the positioning a bit more
to the right.

The previous styling also had the focus-within action
which isn't needed here as hovering over the codeblock
is enough to display both the icons.
2020-09-28 16:04:54 -07:00
Vishnu KS 510efbc1a8 support: Add option to change billing method. 2020-09-28 15:37:49 -07:00
Vishnu KS 3e438538b4 support: Add support for downgrading realm. 2020-09-28 15:37:49 -07:00
Gittenburg b245e1e49a compose: Display Formatting button as "Help".
The Formatting button that opens our Markdown help popover previously
had an "A" as its icon (the Font Awesome icon for font). This commit
changes the link to spell out "Help" to make it more discoverable.
2020-09-25 16:47:44 -07:00
Gittenburg 0c6df114f6 compose: Reorder message action buttons.
Now that they are tab accessible, we should order them by importance.
Previously the order was:

1. Add emoji
2. Formatting
3. Attach files
4. Add video call
5. Preview
6. Drafts

This commit changes the order to:

1. Attach files
2. Preview
3. Add video call
4. Add emoji
5. Drafts
6. Formatting

The "Add emoji" button is moved back because emojis can be more
conveniently entered using the typeahead triggered with ":" or the
emoticon conversions.
2020-09-25 16:47:43 -07:00
Gittenburg 6e95809cc4 emoji_picker: Fix search input length.
This was probably a regression from our upgrade to bootstrap 2.3.2.
2020-09-23 11:33:27 -07:00
sahil839 7525642507 popover: Show normal popover instead of extended profile one for bot owner.
We should show normal popover instead of extended profile one for the bot
owner in bots section of organization settings.

A new function show_user_info_popover is added, as it makes sense to keep
it separated from the function used to open popover for sender of a
message, which uses the message from which the popover is opened.
This added function can further be used for showing popover for
"invited_by" in invites table.
2020-09-22 15:42:53 -07:00
Amitsinghyadav a72e9476ee api_docs: Add fragment references for all parameters.
This makes it convenient to link to a specific parameter accepted by
Zulip API endpoint.
2020-09-21 12:18:10 -07:00
Ryan Rehman d6fce41800 stream edit: Update stream subscription info text.
This changes the success text of the `subscriber_list_add`
form to display the subscribed and already subscribed users
on success. We also display the user profile as a popover.

Previously we would only display the email ids of the already
subscribed users.

Formatting tweaked by tabbott.
2020-09-18 16:53:01 -07:00
Aman Agrawal ef19e4870d css: Don't use `Monaco` font for <code>.
bootstrap sets <code> to use `Monaco` font by default. We don't
want to use this font since some characters are not clearly
readable like `()` appearing as `0`.

Hence, we use Menlo font by default if available.

Since `Monaco` font is only installed in macOS by default, this
mostly affected mac users.
2020-09-18 11:35:13 -07:00