Commit Graph

3201 Commits

Author SHA1 Message Date
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