Commit Graph

602 Commits

Author SHA1 Message Date
ericluoliu c618d7d87c UI: Fix x button alignment in feedback widget. 2021-08-03 16:15:25 -07:00
Aman Agrawal 4d37215c3d css: Set standard outline color for focusable elements.
Fixes #19198

We set blue outline color in day mode and light gray outline colour
in night mode. This removes the different outline colours users
in different platforms / desktop app.
2021-08-02 13:54:54 -07:00
Tim Abbott 5e591f840b css: Fix night styling for deactivated pills.
The new styling isn't perfect, but it's also not obviously broken.

We also move the existing day theme styling to the appropriate files.
2021-07-22 15:29:00 -07:00
Aryan Shridhar 3991fb3ea6 Revert "message_edit: Replace checkboxes with settings_checkbox partial."
This reverts commit 54a1c73c78.
2021-07-22 11:07:49 -07:00
aryanshridhar 54a1c73c78 message_edit: Replace checkboxes with settings_checkbox partial.
This commits replaces the custom `send_notification` message_edit
checkboxes with our `settings_checkbox` partial.

The main intention is to also support the feature of selecting a
checkbox by clicking over its corresponding label as we have
in the case of the organization settings checkboxes.

Due to above change, this commit also removes the redundant
`break-row` HTML class along with it styles.
2021-07-21 10:43:18 -07:00
m-e-l-u-h-a-n e7b1de8ace message view: Show failed message icon tooltips similar to other icons.
We had tooltips bound to failed message action icons, because of
slightly different html structure for these action buttons as
compared to other message action buttons. There were some minor
problems due to this. First there was difference of delay
in which we show other normal action button tooltips. Second
we had to add extra checks to handle tooltip content for these
buttons in tippyjs module.

This is fixed by having same html structure for failed message
buttons as for other message action buttons.
2021-07-18 11:33:32 -07:00
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