Commit Graph

596 Commits

Author SHA1 Message Date
aryanshridhar f4e44228a7 message_edit: Improve the style for dropdown toggle button.
Earlier, the `stream_header_colorblock` wasn't properly styled
with the dropdown toggle button from a UI perspective. This was so
because they had a few space between them due to inconsistencies
in their border radius.

This commit adds an border-radius property to the message_edit
dropdown toggle button to eliminate the above issue and
improve it's overall look.
2021-07-16 12:58:15 -07:00
aryanshridhar 1a2782f95d message_edit: Adjust the height of stream_header_colorblock.
Previously, the message edit `stream_header_colorblock` used
to incorrectly extend down till the textarea which caused
the UI to be buggy.

Fixed this by adding a `margin-bottom` property similar to
what we did in case of Move topic dropdown.

This minor change accidentally was missed within commit
7c25bd1aa8.
2021-07-16 12:58:15 -07:00
Kerry Jackson 5d91a34119 search_icon: Fix contrast color of icon.
Fixes #19053.
2021-07-14 14:53:45 -07:00
aryanshridhar 1a3c719967 about_zulip: Indicate the copy icon to be clickable.
Added CSS property of cursor as pointer to the copy
icon in about_zulip section which indicates the
icon to be clickable.

(This minor adjustment was probably missed in a74b52db22)
2021-07-13 16:55:15 -07:00
Tim Abbott 41dbe8ee6b recipient bars: Make unresolve topic CSS match resolve topic.
This avoids showing a highlighted checkmark for resolve topics, which
looks weird given that the topic name itself contains a "resolve
topic" checkmark.
2021-07-13 09:13:14 -07:00
aryanshridhar 4cd2fab7b0 user_popover: Replace custom email tooltip with tippy tooltip.
This commit essentially migrates our custom email tooltip
to tippy tooltip for displaying user's email when their
names would overflow past the right edge of user popover.

This also removes the `email_tooltip` and `tooltip_holder` HTML
classes aloong with their CSS styles as they no longer used.
2021-07-09 09:55:22 -07:00
akshatdalton 8c9b2012ca topic_edit_form: Restyle topic edit save button with logo colours.
Similar to what mentioned in 2e196fd5d3
previous sea-green colour didn't meet the WCAG AA standard
guidelines for color contrast. This changes meets WCAG AAA
standard.
2021-07-08 17:45:42 -07:00
aryanshridhar c6828767fa navbar: Migrate to handlebars.
This commit migrates the `navbar.html` Django template
to handlebars by creating a new file as `navbar.hbs`
within `/static/templates` which is then rendered
using `ui_init` module.

As a part of migration, we also remove the `search_pills_enabled`
and `embedded` parameters from the context attribute as they
are no longer needed now.

Fixes part of #18792.
2021-07-06 16:46:50 -07:00
sahil839 0edb413121 css: Remove unused css.
This was missed in 98bb0f7b2.
2021-07-06 15:15:50 -07:00
Tim Abbott 65acbfa4c4 navbar: Remove buggy nth-last-child logic.
We've been unhappy with this fragile nth-last-child logic since the
big navbar rewrite a few years ago.

Now that we have TippyJS tooltips in the navbar area, it actually
causes a bug: Hovering the "subscribe count" widget makes the search
icon jump.

Fix this by just adding a CSS class to the two elements that are
intended to be modified by this logic.
2021-07-05 18:20:25 -07:00
sahil839 8e7ad58557 message_edit: Show loading indicator inside the button.
We now show loading indicator inside the 'save' button
instead of hiding the buttons to show the loading
indicator. Both the save and clear buttons are disabled
when the request is processing. We do not change color
of the buttons just change the cursor to indicate that
button are disabled and nothing happens on clicking them.

The reason for disabling the cancel button is that it
is actually not possible to cancel the action once
loading has started, so it is actually better to disable
it only such that users are not confused.

This commit adds a wrapper div element around the button
because we wanted to add two css properties to the button-
 'pointer-events: none' such that nothing happens on click
and 'cursor: not-allowed' to indicate that buttons are
disabled. But these boht styles cannot be added to same
element because 'pointer-events: none' overrides the
'cursor: not-allowed' style and normal cursor is visible.
That's why we add a wrapper to add 'cursor: not-allowed'
style to it and add 'pointer-events: none' to the button.
2021-07-05 17:24:28 -07:00
akshatdalton f80419509e message_view: Add resolve topic button in message recipient bar.
Now, one can (un)resolve the topic from 2 places:

1. Stream popovers.
2. Message recipient bars.

Fixes: #18988.
2021-07-05 16:53:55 -07:00
Hashir Sarwar 130f1d7153 input_pill: Customize pills for deactivated users.
This modifies the appearance of pills for deactivated users
in the following ways:

* Adds `(deactivated)` with the deactivated user's name.
* Add a tooltip to the deactivated user's pill stating
that one can't send a message to this user.
* Color the deactivated user's pill reddish.

This now also adds tests for user_pills.

Part of #13766.

Co-authored-by: Signior-X <b19188@students.iitmandi.ac.in>
2021-06-25 18:06:42 -07:00
Dinesh be3b637603 message_view: Make timestamp a permalink to message.
The css edits are to override the `a` tag's default color
with our default values from body, body.night-mode.

Fixes part of #18699.
2021-06-24 16:37:32 -07:00
m-e-l-u-h-a-n a57aa07a6d css: Extract modal related css rules.
Co-authored-by: Pragati Agrawal <pragati22066@gmail.com>
2021-06-23 17:50:55 -07:00
Anders Kaseorg 5d64c21c38 styles: Globally set font-size and a unitless line-height.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
Anders Kaseorg 3691805253 styles: Remove invisible .stream_label::before rules.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
Anders Kaseorg cbec20cfdf message_body: Fix -3px alignment kludge using whitespace control.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-06-23 09:10:50 -07:00
Tim Abbott 95efadaf86 css: Use default font size for buttons and dropdowns. 2021-06-11 17:15:45 -07:00
Tim Abbott 18bcff8c96 css: Remove font-size for message_edit_tooltip.
This looks better with the default font-size, though it needs an
alignment fix.
2021-06-11 16:03:39 -07:00
Tim Abbott f5369db8f1 css: Remove duplicate specifications of default font size.
These unnecessary references to 14px font size complicate any effort
to adjust the font size in Zulip.
2021-06-11 15:11:33 -07:00
Tim Abbott 01bfb621ba css: Rename settings forgot password CSS class.
"info" in not a sensible name for a broadly used CSS class.
2021-06-11 15:08:45 -07:00
Tim Abbott 90041ff453 css: Deduplicate CSS for message_control_button elements.
Each copy set the same 3 properties, with the actions menu relying on
the terribly named "info" class for its copy.
2021-06-11 15:08:14 -07:00
Ganesh Pawar 1afcc98be2 confirm_dialog: Add support for loading spinner. 2021-06-10 12:16:23 -07:00
Steve Howell 842b14b916 layout: Introduce a #compose-content div.
This should make it more intuitive to add
new elements to the compose box (such as
banners), and it also makes it a bit more
clear for styling purposes that the same
geometry happens whether the compose box
is open or the buttons are visible.

I lifted the #compose_container div into
the server template.  It's not totally
clear to me why we need both #compose
and #compose_container, but there are
some scary comments about 1400px that
made me too timid to address that quirk.

In passing I removed a clearly redundant
click handler.
2021-06-10 11:22:05 -07:00
Riken Shah ccfee49407 navbar_alerts: Replace HTML template with handlebars architecture.
This moves this block of HTML templates, which are dynamically
rendered with some user data, to be managed by the frontend handlebars
template system.

This migration involves only displaying active alerts in the DOM, and
thus we no longer need navbar_alerts to have display: none by default.
2021-06-07 17:52:08 -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 ddfb9b5200 tippy: Increase font size from 12 to 13px.
Increasing the font size for clear visibility.
2021-05-19 11:20:49 -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 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
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
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
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 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
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 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 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 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 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
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
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 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
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