Commit Graph

122 Commits

Author SHA1 Message Date
vipul chhabra
958126733b message view: Fix The unexpected behavior of Youtube Thumbnail.
It is observed in Mozilla margin was considered from other side of thumbnail
due to some special padding issues observed in mozilla.

To fix this top and left value are assigned to 0 so that it automatically
takes its correct position in all browsers

Fixes #11867.
2019-03-18 13:19:59 -07:00
Anders Kaseorg
aad61c42a3 css: Replace generated U+202A LEFT-TO-RIGHT EMBEDDING with CSS properties.
These generated characters (added in #9889) were causing poor wrapping
behavior, at least in Firefox.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-03-11 17:12:53 -07:00
Steve Howell
c40597b5f5 fonts: Make STREAMS and USERS be 14px.
Before this they were 14.2px due to a complex set of
calculations.
2019-03-04 15:58:33 -08:00
Tim Abbott
ddb965110f CSS: Remove manual antialiasing configuration.
The antialiasing decisions we made for the webapp should be constant
over the entire page, not limited to particular subsections or themes.

If we wanted antialiasing, we should do it on the entire page, not
individual random widgets.  But it's not clear we actually want to do
it on the entire page.  The `-moz-osx-font-smoothing: grayscale`
setting now happens by default in OSX Mojave (40% world market share
right now and growing), so there's no reason to override it.  And
without retina displays, generally, subpixel rendering provides better
results than antialiasing (which overrides subpixel rendering).

Thanks to Anders Kaseorg for advice on this issue.
2019-03-04 15:12:48 -08:00
Anders Kaseorg
ce2474c0ad css: Fix unread marker gap in night mode.
Instead of drawing a white border between unread markers, leave a real
space.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-22 13:01:03 -08:00
Vaibhav
af3b18d1f5 messagebox: Remove on-message-row-hover controls visible rules.
Date separator exists inside the message_row, which causes the
message controls to be visible even when hovering on date
separator. These two rules are redundant and cause this buggy
action. Other rules handle the behaviour of message controls
being visible on message box hover. Hence these can be removed.
2019-02-18 14:15:16 -08:00
Steve Howell
febad410f5 fix: Use padding, not margin, for the date separator.
My very recent margin fix was tested on a slightly
stale version of master.

    see c7e03f9a71
2019-02-15 11:30:36 -08:00
Steve Howell
c7e03f9a71 message view: Fix margin for date separator.
Without this tweak the date separator overlaps
the left borner.
2019-02-15 09:55:15 -08:00
Rishi Gupta
801d14280d search: Update styling and text for no search results.
Changed <h5> to <p>, and removed the special formatting of
.empty_search_text to make this more in line with the formatting we
generally use with empty narrows.
2019-02-14 15:03:14 -08:00
Tim Abbott
4d1fb5270d message view: Fix asymmetric padding on date separators. 2019-02-13 16:03:33 -08:00
Anders Kaseorg
89897bcf70 css: Move inline date separators from messagebox to message_row.
Fixes border-related glitches introduced by commit
51c6c82003 (#10820).  Alternative
to #11534.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-13 16:03:21 -08:00
Anders Kaseorg
dae6aa21d8 css: Remove dead CSS classes message_data, prev_is_same_sender.
Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-13 16:03:16 -08:00
YashRE42
93b6fa6036 search: Display stop words from query when no results.
This displays to the user clearly which words we ignored in their
search query due to being stop words.

Fixes #10592.
2019-02-13 13:23:48 -08:00
Tim Abbott
e1832d890a css: Move conversation-partners styles to left-sidebar.css. 2019-02-11 19:12:20 -08:00
Tim Abbott
51c6c82003 message_list: Don't split message groups for a date divider.
This adds date dividers within a single message group when the only
reason we had previously been splitting apart two message groups is a
change of date.  The overall effect is a cleaner message list user
experience.

The downside of this change would be that the recipient bars no longer
will always show a new date for date changes; to fix that, we rewrite
how the floating recipient bars both set the date field on the
floating recipient bar itself, as well as ensure that non-floating
recipient bars don't show duplicate dates.

In a future design update where we modify how message recipient bars
look, we may very well be able to simplify this logic by removing some
of the dynamic nature of the recipient bar calculations.  But this is
a good implementation of what remains.

Tweaked significantly by tabbott from Steve Howell's original, both to
extract these changes from a larger PR as well as to modify the
first_visible_message logic to handle some tricky corner cases.

Fixes #10171.
2019-02-11 15:56:09 -08:00
Vishnu Ks
6ed6bcef05 invites: Move multiuse invite status to footer. 2019-02-07 15:41:00 -08:00
Vishnu Ks
b62bd83083 invites: Add generate multiuse invite button. 2019-02-07 15:41:00 -08:00
Steve Howell
e7ead7383d css: Add explicit padding below the navbar.
We have always intended to have 10px of whitespace
below the navbar, and this enforces it directly
and explicitly in the CSS.

Note that the three major panels still should
have a margin of 50px, which is equal to
the safe outer height of the header (40px + 10px).
2019-02-07 22:36:08 +00:00
Shubham Dhama
5779320874 invites: Use stream_id instead of stream names in invitation.
This replaces the current usage of stream names with stream ids.

This commit also removes the `traditional` attribute from the invite
form as now we are sending stream_ids as an argument; this was the
only place in the codebase we used traditional=true, and it's great to
have it removed.
2019-02-01 15:47:20 -08:00
Mohit Gupta
42d886a6d5 messages: Add loading spinner for deleting messages.
User was able to click delete button multiple time which could cause
multiple delete requests. This commit disables and hides the delete
message button after the first click and shows a spinner until http
the delete request responds.

Also adds a casperjs test to ensure that spinner becomes visible and
delete button becomes invisible after clicking on delete button for
first time and hides spinner and show delete buttton when message is
deleted.

Fixes: #11219.
2019-01-25 11:07:02 -08:00
Rohitt Vashishtha
f993fdd480 markdown: Add _@**Name** syntax for silent mentions.
These mentions look like regular mentions except they do not
trigger any notification for the person mentioned. These are
primarily to be used when you make a bot take an action and
the bot mentions you, or when you quote a message that mentions
you.

Fixes #11221.
2019-01-16 16:01:06 -08:00
Tim Abbott
c70face2dc css: Make message editing controls look like compose controls. 2019-01-15 12:05:02 -08:00
Steve Howell
0c48dad1da muting: Use more generic markup for undo-mute popup.
This makes everything generic except for the main
message given to the user.
2019-01-04 10:40:05 -08:00
Cynthia Lin
bcea4f10e6 message view: Add guest avatar markers to message sender avatars. 2018-12-30 11:07:00 -08:00
Joshua Pan
ad1df0ebeb settings: Add support for customizing the top-left logo.
This adds a new realm_logo field, which is a horizontal-format logo to
be displayed in the top-left corner of the webapp, and any other
places where we might want a wide-format branding of the organization.

Tweaked significantly by tabbott to rebase, fix styling, etc.

Fixing the styling of this feature's loading indicator caused me to
notice the loading indicator for the realm_icon feature was also ugly,
so I fixed that too.

Fixes #7995.
2018-12-18 12:44:52 -08:00
Joshua Pan
5c196d70bd css: Switch upper left logo and text to a single image.
This is preparation for allowing customization of this field.
2018-12-18 12:19:56 -08:00
Marco Burstein
046ecc5d50 styles: Fix compose options hidden when editing.
Fix an issue that when a message is being edited, sometimes compose
options are hidden if there is no time limit. Also, move the options
further from the time limit to make them more noticeable.

Fix #11056.
2018-12-16 13:45:43 -08:00
Rishi Gupta
647103a4e0 message visibility: Make stylistic improvements to history-limited-box. 2018-12-13 16:50:52 -08:00
Vishnu Ks
e5b3d39ce9 messages: Show banner when message history is limited.
This communicates to users clearly about the situation when the
history_limited flag is set by the backend (because message history
was cutoff).
2018-12-13 09:02:11 -08:00
Tim Abbott
c21247abf9 Revert "Position sidebars with top instead of margin-top."
This reverts commit c4620af2161283fe2cff0ba8f89789211d02bbdd.

This broke the positioning of the permissions request layer when that
appears.
2018-12-04 17:26:37 -08:00
Anders Kaseorg
8a6158c663 Position sidebars with top instead of margin-top.
This should make no visible changes.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-11-28 17:53:49 -08:00
Anders Kaseorg
10fb3539ae Position top-messages-logo statically.
This should make no visible changes.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2018-11-28 17:53:49 -08:00
Tim Abbott
3ef0d6016c copy: Fix copy-pasting of EDITED notices in messages.
Previously, because the parens were added via CSS, copy-pasting the
EDITED notices resulted in junk like this:

 Iago 3:51 PMEDITED
edited message content

Now, you get:

 Iago 3:51 PM (EDITED)
edited message content
2018-11-27 16:20:46 -08:00
Cynthia Lin
f03d7d29b5 styles: Convert named colors to HSL values. 2018-10-16 13:14:19 -07:00
Cynthia Lin
cbb6b3a1af styles: Normalize differences in previous hex-to-HSL conversion. 2018-10-16 13:14:19 -07:00
Cynthia Lin
89d81b37d4 styles: Convert background properties to background-color. 2018-10-16 13:14:19 -07:00
Cynthia Lin
67b705207e styles: Convert 3-digit hex values to HSL values. 2018-10-16 13:14:19 -07:00
Cynthia Lin
926365dc89 styles: Convert 6-digit hex values to HSL values. 2018-10-16 13:14:19 -07:00
Akash Nimare
da7adb038f thumbnail: Show play button on hovering youtube thumbnail.
This PR adds a play icon on hovering the youtube thumbnails.
Also, shows the pointer cursor on vimeo videos instead of
zoom-in.
2018-10-09 16:12:36 -07:00
Cynthia Lin
1a198b6a79 left sidebar: Eliminate duplicate border for stream sidebar icon.
Resolves one of the issues listed in #10423.
2018-10-02 12:08:42 -07:00
Akash Nimare
dbd68081b2 message-box: Show zoom-in cursor on hovering over images.
This PR adds a zoom-in cursor to all the images in the
message-box container. This makes the UX of clicking on
images better.
2018-09-13 07:45:14 -04:00
Akash Nimare
44fd3f124c topic_edit_form: Update styling of topic edit form.
Updated the CSS a bit so that it matches with other inputs.
2018-08-23 11:51:20 -07:00
Cynthia Lin
0314d63e7a night_mode: Improve legacy searchbox styling to fit night mode. 2018-07-31 17:41:27 -07:00
Cynthia Lin
ae48010158 night_mode: Improve pill searchbox styling to fit night mode. 2018-07-31 17:41:27 -07:00
Shubham Padia
5bf6e55778 search pills: Fix visual bugs due to CSS refactoring of input pills.
Changed search pill padding, `.navbar-search` flex-wrap to match with
the CSS refactoring in 66df4e3e84.
The `height: 100%` changes to `.navbar-search` and `.input-append`
make up for the issue in which the pills overflowed in the mobile
view due to `.navbar-search` height being declared 40px explicitly
while the actual heiight in mobile view was shorter.
2018-07-27 10:54:09 -07:00
Aditya Bansal
5190f4c51a stylesheets: Fix coding style to comply with stylistic rules. 2018-07-27 00:15:58 -07:00
Aditya Bansal
fa3a337f37 stylelint: Fix css stylistic violations in various scss stylesheets. 2018-07-25 14:58:25 -07:00
Shubham Padia
1f553a41d0 search: Higlight #searchbox on focus.
Adds box-shadow to `#searchbox` when either `#search_query` or any
of the pills have focus. Uses jquery instead of pure css as the
`:focus` event occurs on `#search_query`, while we want to add
box-shadow to `#searchbox`. This could have been done with
`:focus-within` CSS selector, but it is not supported in IE or Opera.

`#search_query` already had an onfocus/focusout listener, adding
listeners to `#searchbox.pills` for those events wouldn't have worked
as you don't want the focusout event to fire when the focus shifts
from input to pill.

Also adds `focusin`, `focusout` and `css()` to zjquery. `css` is
same as `val`, except it returns an empty object in case of no value
instead of an empty string. I don't think `css()` is valid syntax
in actual jquery.
2018-07-23 11:29:10 -07:00
Shubham Padia
069a4f1626 search: Disable tab_bar due to addition of search pills.
tab_bar.js becomes redundant after implementation of search pills.
This commit adds a comment to tab_bar.initiliaze, so the event
listeners related to it do not get initiated. This does not remove
any code related to tab_bar.js.
Also adds left and right border around the search icon.
2018-07-23 11:29:10 -07:00
Shubham Padia
36707a33ca search: Add a basic implementation of search pills.
Following points have been implemented in this commit:
1.) Add search pill on selecting typeahead.
2.) Re-narrow after removing a search pill.
3.) Add quiet optional parameter to removeLastPill.
4.) Pre populate search pills in narrow.activate.
5.) Clear existing search pills on narrow.deactivate.

Description of above points:
1.) I tried out using the description from suggestions.lookup_table
to append a pill using appendValidatedData so that the description
had not to be calculated again. But the description in the suggestions
lookup contains html due to highlighting. This html is escaped when
inputed in a pill. An attempt was also made to remove the higlighting
by replacing the tags. But other espaced characters like &lt; also
popped up, so it was better to use append_search_string.
3.) If one wants to refresh the pill using pill.clear and wants to
repopulate them, evaluating the event_handler associated with the
action of removing the pill may not be desired.
4.) Pill population code is added to narrow.activate. Pills are not
populated if the narrow was triggered by search as search handles the
addition and removal of pill by itself. The reason for not handling
search too in narrow.activate is to avoid clearing the pills and
repopulating them. Example of some of the triggers for narrow.activate
include `restore draft`, `topic change`,`sidebar`.

Also modifies tests for search.js
2018-07-23 11:29:10 -07:00