Commit Graph

71 Commits

Author SHA1 Message Date
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
Shubham Padia 5212026620 search: Change letter-spacing to normal for search box.
The letter-spacing was changed last in commit
fc4d80d941 which is about a 5 year old
commit at the point of writing. The change is removed as I did not
notice any visual change on removing it. Changing the letter spacing to
normal lets the text in the pills be seen legibly, otherwise the characters
were overlapping.
2018-07-23 11:29:10 -07:00