Commit Graph

644 Commits

Author SHA1 Message Date
Aman Agrawal 7e365f7ee3 icons: Replace fa-globe icon with a custom globe icon. 2022-03-01 11:36:38 -08:00
Aman Agrawal bab9e50581 scroll_to_bottom_button: Use unicode icon for right arrow. 2022-02-25 14:57:22 -08:00
Dinesh 6afdf2410d message feed: Notify user when messages are not being marked as read.
Notifies user when messages are not being marked as read through a
banner that lets them mark all messages in the narrow as read. Note
that the banner is only displayed if the user's actions, like
scrolling, would've actually marked the messages as read.

This avoids distracting the user when viewing a thread they've already
read.

tabbott has verified that if new messages come in, the banner will reappear.

Fixes: #18768.
2022-02-18 14:48:31 -08:00
Aman Agrawal 0eafa6039b message_scroll: Show scroll to bottom button.
Show/hide scroll to bottom button when the last message is
not visible in the current scroll position.

We adjust the bottom offset of the button based on compose box
height.

Fixes #19862
2022-02-18 13:29:57 -08:00
Aman Agrawal 9b622b7d25 gear_menu: Allow user to configure preferred theme.
We save the preferred theme in localstorage so that user doesn't
have to re-select the theme on every reload. Users on slow
computers might see flash of a theme change, if it happens.
2022-02-18 11:29:48 -08:00
Aman Agrawal ad555f2feb tippy: Only change background color of tooltips with no theme.
This change was not aimed at popovers that use tippy. Since
popovers use light theme and tooltips don't, we use this
`not[data-theme]` selector to exclude popovers from being
affected by this change.
2022-02-18 10:51:35 -08:00
Jai soni 9cd27fd773
right sidebar: Add word-wrap property in tooltips.
This prevents the overflow of tooltips on hovering over buddy list.

Fixes #21119.
2022-02-16 12:59:38 -08:00
Aman Agrawal 430d1a411e tippy: Make background color of tooltips close to black.
This is aimed towards increasing the contrast for tooltips in
dark theme.
2022-02-14 11:57:04 -08:00
Tim Abbott 93ce3396ac status emoji: Adjust margin for common element.
After some experimentation, these styles look better in all the places
we're displaying status emoji.  See the comments for justification.
2022-02-11 13:29:32 -08:00
Tim Abbott 68055048a0 message feed: Add 4px left margin to edited notices.
This makes them not look squished up against the name.
2022-02-10 13:52:24 -08:00
Parth e3ddd662ab message_editing: Fix topic edit propagate option cut-off.
In the topic changing UI, the 'Change later messages to this topic'
and other options in the drop down were cut off when selected in some
languages like Russian.

Make the selection box width adjust appropriately according to the
length of the text, and also place it on its own line unconditionally.
users.

With tweaks by tabbott to use the same approach we already use in the
"Move topic" modal to have the bottom margin for the color block match
that of the dropdown_list_widget itself, of having them share CSS.

Fixes #19739.
2022-02-09 14:06:49 -08:00
AnushaNathRoy 5e05dcbc8f status_emoji: Extract status emoji template.
Currently the emoji_status set by the user is only seen in the buddy
list, it would be useful to show the emoji_status in other places as
well.

As such this commit does the prep work of extracting a template which
will be used in all places that need to show the status emoji.

With refactor and minor edits by Yash RE.

Co-authored-by: YashRE42 <33805964+YashRE42@users.noreply.github.com>
2022-02-08 16:52:49 -08:00
Anders Kaseorg b0ce4f1bce docs: Fix many spelling mistakes.
Signed-off-by: Anders Kaseorg <anders@zulip.com>
2022-02-07 18:51:06 -08:00
Aman Agrawal 0ce2ae1782 bookend: Use it to advertise recent topics for spectators.
We show a minimal text "Browse recent topics" at the end of
every narrow. This will help new users to find additional
content on the app.

Fixes #19844
2022-01-31 16:32:09 -08:00
Aman Agrawal b0dd063bb8 scroll_bar: Simplify module.
The content which is scrollable is moved left by the width of the
scrollbar when scrollbar is visible. The navbar, floating recipient bar
and composebox doesn't move. We reduce their width by scrollbar width
to adjust for the reduced width of the scrollable content.

Since floating recipient bar is center aligned (with margin: 0 auto)
we also have to move left by half the scrollbar width.

Group css classes having the same value being assigned together. This
makes the code easier to understand.
2022-01-28 09:50:27 -08:00
BIKI DAS 42dd58cffe
docs: Fix a few typos in documentation. 2021-12-28 09:36:59 -08:00
YashRE42 bc3d03730f message_controls: Inherit visibility from `.message_failed`.
Previously, there was a bug where a failed message would only show the
`.message_failed` icons on hover, the intent was for them to always be
visible if a message failed to send.

The cause of the above bug was that in
e7b1de8ace we modified the html
structure of the icons such that each icon was inside its own div,
which possessed the `message_control_button` class, and both such divs
were inside a `.message_failed` div. The unintended consequence of this
change was that the rule `.message_controls .message_control_button`
would apply `visibility: hidden` to the icons.

Hence, this commit explicitly sets the visibility of
`.message_failed .message_control_button` to `inherit`.
2021-12-12 11:14:46 -08:00
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