Commit Graph

64 Commits

Author SHA1 Message Date
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
Shubham Padia e228687094 search: Make search query a contenteditable div for search pill.
Input pills require a contenteditable div with a class named input
to fall inside the pill container. On converting the input tag into
a div, the size of the input decreases which is compensated by a
line-height of 40px. Comment above letter-spacing:normal was removed
as chrome and firefox do not change the letter-spacing to normal
for a div via the default browser stylesheet.

NOTE: Currently writing something into the div will call the action
corresponding to that key in the keyboard shortcuts. The input will
work fine once the pills have been initiated.

For the casper tests, for now, we just use the legacy search code.
When we change that, $.val() cannot be used on contenteditable div, so
$.html() will need to be used instead in select_item_via_typeahead.
2018-07-23 11:29:10 -07:00
Tim Abbott e1291cf839 search: Copy CSS to a separate #searchbox_legacy block.
This way, we can edit the CSS for the searchbox without having to
worry about changing the legacy behavior.
2018-07-23 11:29:10 -07:00
Tim Abbott 87427fb923 css: Put searchbox CSS into a single CSS block. 2018-07-23 11:29:10 -07:00
Tim Abbott 26cd7f931c css: Move message edit history CSS from middle of search CSS. 2018-07-23 11:29:10 -07:00
Aditya Bansal 21b9e8dee1 typeahead_list_item.handlebars: Upgrade to font-awesome 4.7 icon prefixes.
We also remove a CSS hack that was required because the original icon
was poorly centered.
2018-07-11 20:31:03 +05:30
Aditya Bansal ccb4e11eb4 navbar.html: Upgrade to use font-awesome 4.7 icon prefixes. 2018-07-11 20:17:11 +05:30
Max Nussenbaum 568aa43838 flatpickr: Hide the up/down arrows in the Flatpickr datepicker.
This hides the up and down arrows that appear in the year input
of the Flatpickr-provided datepicker. (This is only used in
settings for now, but the arrows will be hidden anywhere Flatpickr
is used.)
2018-07-11 19:16:25 +05:30