Commit Graph

627 Commits

Author SHA1 Message Date
S-Abhishek 186d1a83e9 narrow_banner: Move empty narrow messages to handlebar templates.
Removed existing empty narrow divs from app/home.html and created
a new javascript module to dynamically load empty narrow messages
using handlebar template.

Fixes #18797
2021-12-07 13:38:48 -08:00
Aman Agrawal 50f916443d compose: Fix alignment of help link. 2021-12-02 15:11:15 -08:00
Aman Agrawal 7610b33963 flatpickr: Hide bottom arrow in dark mode.
Previous change didn't hide it in dark mode since this css was
being overridden.
2021-12-02 15:11:15 -08:00
Aman Agrawal 4ed6b441c7 flatpickr: Improve look of `Confirm` button.
Change text from OK to Confirm.
Remove icon.
2021-12-02 15:11:15 -08:00
Arch0125 7c4382bb06 dropdown_list_widget: Replaced pencil icon with chevron-down.
This is the standard way to indicate that something is a dropdown
menu, and in particular avoids confusion some folks had with the
pencil icon.

Tweaked by tabbott to unify CSS with all of our other dropdown list
widget instances.

Fixes #19888.
2021-12-01 13:35:15 -08:00
Ganesh Pawar f760850993 login_to_access_modal: Migrate modal to Micromodal. 2021-11-30 14:39:46 -08:00
Ganesh Pawar f5fbf5f0e0 change_password: Migrate modal to dialog_widget. 2021-11-23 15:41:54 -08:00
Aman Agrawal 2af933678c compose: Refactor bottom part of compose box.
* We use flexbox instead of `position: relative` to align elements.
* Increase clickable area of icons using more padding.
* Increase space between elements.
* Fix mobile compose box icon alignment.
2021-11-22 18:29:45 -08:00
Aman Agrawal 4e5e1a2542 recipient_row: Generalize class name for icon in recipient_row. 2021-11-22 15:26:21 -08:00
YashRE42 e8eb6724ad message_view_header: Switch selector for hover to ~ instead of +.
This is a prep commit for adding extended descriptions to
message_view_header, it ensures hover effects work even if we add
additional elements to the message_view_header.
2021-11-10 11:05:22 -08:00
Aman Agrawal 05bd417de4 flatpickr: Visual improvements.
* Fix time input buttons not positioned correctly.
On <768px screens:
* Center align flatpickr.
* Remove bottom arrow.

We should ideally have a semi-transparent black background
for flatpickr on mobile but it is hard to do so with flatpickr
being inserted into DOM by an external library.
2021-11-09 09:40:52 -08:00
Anders Kaseorg 17e72da336 styles: Fix declaration-block-no-redundant-longhand-properties.
Fixed manually.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg 52ad928d3e styles: Fix shorthand-property-no-redundant-values.
Generated by stylelint --fix.

Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-11-05 17:34:13 -07:00
Anders Kaseorg ea88ec9e06 styles: Fix stylelint rule-empty-line-before.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2021-10-17 07:15:09 -07:00
anurastogiji 5de556cbc8 message_edit: Expand breadcrumb checkbox spacing in topic edit UI.
For background, the .topic_move_breadcrumb_messages and
.message_edit_breadcrumb_message classes is applied to these checkboxes.

We add margin-top of 10px to the second checkbox to space them
appropriately. Additionally, we can remove some unnecessary complexity
from the template/CSS.

With a tweak from tabbott to remove the break-row logic as well.

Fixes #19947.
2021-10-14 15:38:53 -07:00
YashRE42 306011a963 css: Remove commented out css. 2021-10-07 10:29:08 -07:00
YashRE42 cf49d85a5b search: Make search_button color consistent with gear icon.
This commit changes the color, opacity and hover effect of the
search_button ( the x icon) to be consistent with other elements in
the search box, the message_view_header and the gear icon to thr
right.
2021-10-07 10:29:08 -07:00
YashRE42 1c674f15be search: Make search_icon hover consistent with message_view_header.
This commit ensures that the search_icon within the search box has the
same color, opacity and hover effect as on the search_icon in the
message_view_header when search is closed.
2021-10-07 10:29:08 -07:00
YashRE42 f3b31fa972 message_view_header: Fix hover effect related to links in description.
This handler was broken during refactor
78d511fd03, as we can see from the
original implementation in 30065b4ee8,
the intent is that hovering over any link within the
narrow_description should not cause the search_icon to change color ie
the hover effect should not be used. This is so because it aligns
with the fact that clicking the links would not open the search bar.

However, during the refactor this was incorrectly switched to forcing
the effect to be applied when we hover over links in the
narrow_description.

This commit reverts to the original and intended behaviour, and also
switches to using opacity rather than color, in accordance with the
changes from the previous commit
(316d499ac74c2caddb57c98a43d9b776b1b32d98).
2021-10-07 10:29:08 -07:00
YashRE42 fb6c34356c message_view_header: Make search_icon hover effects consistent.
In commit 5d91a34119 we change the
behaviour of a hover effect on search_icon to use opacity rather than
a change in color. This change made the search_icon hover consistent
with the gear icon to the right of it, it had the additional benefit
of reducing the need to define a hover effect in night_mode.css.

However, some rules targeting search_icon were leftover that still
used color, this commit changes one in zulip.scss to use opacity and
removes one from night_mode.css that is no longer necessary.
2021-10-07 10:29:08 -07:00
Eeshan Garg 8fab13bb6c invites: Handle long invite URL overflow properly.
Fixes #19764.
2021-10-06 17:38:12 -07:00
Tim Abbott 687c4b9d66 css: Improve EDITED styling for non-English languages.
In some non-English languages, including Russian, the translation of
EDITED does not properly fit.  The best solution is probably something
bigger or having translators abbreviate this string, but it's worth at
least this minimal change to fix extremely ugly overlap behavior for
this widget.

Actual CSS written by Greg Price.
2021-09-16 13:18:19 -07:00
Aman Agrawal 354dfb02e5 stream_select_dropdown: Correct alignment of stream select element.
We left align the text to match with the design used across the
app for similar stream select elements.
2021-09-07 09:44:35 -07:00
Aman Agrawal f5e4dca8f2 login_to_access_modal: Restore current hash after login. 2021-09-06 09:00:16 -07:00
Aman Agrawal 045cdb4ed0 login_to_access: Modal which blocks access for spectator.
We will use this modal for any narrow / hash or other UI element that
requires an actual account to use, to provide something reasonable to
occur when a user clicks on those things.
2021-09-06 09:00:16 -07:00
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