Commit Graph

56 Commits

Author SHA1 Message Date
Cynthia Lin bcea4f10e6 message view: Add guest avatar markers to message sender avatars. 2018-12-30 11:07:00 -08:00
Tim Abbott d9e8380981 copy: Add whitespace before timestamps in messages without sender.
This changes:

  Iago 4:11 PM
test not edited

4:11 PM
test edited

to this:

  Iago 4:11 PM
test not edited

  4:11 PM
test edited
2018-11-27 16:29:32 -08:00
Tim Abbott c43a00fd60 copy: Include EDITED notices in more copy-paste cases.
Previously, they were only included in messages that were the first in
their recipient block and were not /me (status) messages.
2018-11-27 16:24:04 -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
Tim Abbott e159f052bb status: Allow selecting status message text.
Status messages were incorrectly not selectable, due to a bug in how
we setup the no-select hierarchy (for making copy-paste not have weird
whitespace issues).

Fixes #10456.
2018-11-27 15:55:51 -08:00
Nolan Darilek 5d291eb52c accessibility: Model messages as a list with items, each representing a single message.
Previously, messages were a string of disconnected regions. Modeling them as a list brings several benefits:
 * Quickly jump to the message list by using a screen reader's list navigation hotkey.
 * Quickly jump between messages by using a screen reader's list item navigation hotkey.
 * Quickly jump to the beginning or end of message lists in screen readers that support it.
2018-11-16 08:54:01 -08:00
Nolan Darilek c0a8f0a66e accessibility: Add button role and tabindex to sender names.
This facilitates interacting with them via keyboard.
2018-11-09 17:33:42 -08:00
Nolan Darilek ef8ea330fa accessibility: Make individual messages more accessible.
We do this by setting a region and exposing hidden icons.
2018-11-09 17:33:21 -08:00
Nolan Darilek 95781c913d accessibility: Hide non-actionable profile image from screen readers. 2018-11-08 14:10:11 -08:00
Tim Abbott deb29749c2 people: Add a CSS class to label guest users.
This doesn't do anything yet, since we still need to add the actual
CSS, but it should make it easy for someone to just do the design
work.
2018-10-31 10:15:49 -07:00
Aditya Bansal 66096e9509 single_message.handlebars: Upgrade to font-awesome 4.7 icon prefixes. 2018-07-11 20:31:17 +05:30
Aditya Bansal b9f1acb300 linter: Enforce 2 space indents on tags spread over multiple lines.
We make some specific cases of tags use 2 space indents.
The case description:
* A tag with opening tag spread over multiple lines and closing tag
on the same line as of the closing angle bracket of the opening tag.
* A tag with opening tag spread over multiple lines and closing tag
not on the same line as of the closing angle bracket of the opening
tag.

Example:
Case 1:

Not linted:
<button type="button"
class="btn btn-primary btn-small">{{t "Yes" }}</button>

After linting:
<button type="button"
  class="btn btn-primary btn-small">{{t "Yes" }}</button>

Case 2:

Before linting:
<div class = "foo"
     id = "bar"
     role = "whatever">
     {{ bla }}
</div>

After linting:
<div class = "foo"
  id = "bar"
  role = "whatever">
    {{ bla }}
</div>
2018-04-07 20:08:44 -07:00
Aditya Bansal 7d8d7f7f9b reminders: Add alert message for set reminder success or failure. 2018-01-19 11:33:11 -05:00
Steve Howell d52552dcc3 Simplify/unify starring messages from the frontend.
We now do all of the main logic for starring/unstarring
a message in `message_flags.toggle_starred`:

    * mark the message as read (just in case)
    * update the UI (i.e. the green star in the message)
    * update the server

The calling code in both the click handler and the hotkey
handler remains simple--they just handle minor details like
finding the message and clearing popovers.

For updating the server, we now call the new
`send_flag_update` helper.

And we continue to delegate some of the logic to
`ui.update_starred`, but we remove some code there that's
now pushed up to `message_flags.toggle_starred`.

This change should be mostly transparent to users, but it
does remove some inconsistent behaviors between the click
handler and the hotkey handler.  Before this change, the
click handler was more aggressive about updating the UI
and marking the message as read.  For people using the "*"
key to star/unstar, they probably would only have noticed
different behavior on a slow connection or in an edge
case scenario where only half of the message was onscreen.

More importantly, by simplifying how we talk to the server,
this eliminated up to a one-second lag due to the debounce
logic in the batch_updater code.  The complicated debounce
logic is only really needed for batch-updating "read"
messages, and it was overkill and sluggish for starring
messages.

Last but not least, we add defensive code for the local
echo case.  (Users have to wait till the message gets acked
to star it.)
2017-12-26 09:01:21 -05:00
Steve Howell d5d11ff181 Disable message menu for locally echoed messages.
Wait until the server acks a message before we enable
the message popover menu.  This prevents a whole class
of bugs related to re-drawing the message and changing
the message id, and it also makes room for a little
spinner in the future.

Users with decent internet connections will generally
get server responses before they can click on the
chevron or hit esc/i, anyway.
2017-12-26 09:01:21 -05:00
Cynthia Lin a3e5f2a887 message view: Use new custom bot icon in messages. 2017-11-10 11:18:43 -08:00
Harshit Bansal afba03f84e emoji_picker: Change reaction popover's base element.
Change the reaction popover to be based off the container elements
for the various message control icons. This will enable us to easily
control the visibility of the base element when the popover is opened
or closed. Also removes redundant `reactions_hover` class.
2017-09-16 08:17:41 -07:00
Tim Abbott b988a1c661 css: Fix selecting of EDITED notices and weird whitespace.
This completes the effort to make selecting messages work in a way
consistent with what users might expect to be correct.

Fixes #5328.
2017-08-27 22:18:30 -07:00
Tim Abbott f0d8e22b69 css: Don't allow selecting whitespace between hover controls.
This is inspired by #5486 and fixes part of #5328.
2017-08-27 22:18:03 -07:00
Vaida Plankyte b2c0ff68c2 frontend: Add hotkey information to title/inline text.
This should make many Zulip hotkeys significantly more discoverable.
2017-08-23 17:12:09 -07:00
Vaida Plankyte 9548d4635a frontend: Remove IDs from alt value of inline images. 2017-08-10 09:43:43 -07:00
Steve Howell 0e25055c1d Add explicit message field for locally_echoed.
We now set locally_echoed to true for messages that are
locally echoed, and we change some of our code to look
for this flag.
2017-07-21 11:38:25 -07:00
Steve Howell fca158e387 local echo: Remove pencil icon on failed messages.
Our code to edit messages that were echoed locally but failed
by the server was broken.  We just disable it for now.

We have opened #5841 to try to restore this functionality.
2017-07-21 11:38:25 -07:00
Steve Howell bd59b91faa reactions: Simplify markup related to message ids.
Because of local echo, message ids can change in message rows.
Having reactions use markup to indicate their message id just
creates more moving parts, since we would need to handle
message_id_changed events.

Now our handlers just call row.get_message_id() as needed.
2017-07-21 11:38:25 -07:00
Vaida Plankyte 74ab5b607a frontend: Change main UI content to not be background images. 2017-07-11 16:30:07 -07:00
Umair Khan 12b124ba71 single_message.handlerbars: Use __starred_status__ in tooltip.
We do not allow handlerbars within tranlation tags. To use variables in
translatable strings, enclose variables with double lowdashes.
2017-06-29 07:39:20 -04:00
Cynthia Lin a9afe43735 hotkeys: Add `u` hotkey for opening message sender profile.
Fixes #4873
2017-06-21 10:38:05 -04:00
Tim Abbott 835f0c9961 HTML: Fix duplicate useless IDs in message_edit_form.
These ID elements in the message edit forms were never used, and were
they used, would have been broken anyway.  We fix this by just
removing them.

Fixes #4913.
2017-05-22 18:40:21 -07:00
Brock Whittaker 323ff6edca /me: Fix presentation and markup for /me statuses.
This fixes the /me elements to be display inline-block and inline
rather than display block with top and left properties.

This also fixes an unrelated issue with emoji reactions not being
able to be clicked on with /me messages.

Fixes: #4218.
2017-04-20 14:36:17 -07:00
Aditya Bansal 23f8ec9759 Clean single_message.handlebars to use 4 space indents. 2017-04-18 12:06:25 -07:00
Raghav Jajodia ae48eaa90d single_message: Show "Copied!" success message after copying.
As the user clicks the "Copy and close" button, the message_edit
closes and a success message is shown for a few seconds.
2017-04-14 14:07:36 -07:00
zerocod3r 81989b965e Add titles to various message actions elements.
Fixes #4038.
2017-03-16 10:45:05 -07:00
Tim Abbott cc07190fdc capitalization: Clean up failed message sending options. 2017-03-09 00:36:13 -08:00
Brock Whittaker 4d5aa3ddc9 Restyle and refactor .message_controls for better UX.
This refactors the .message_controls to stop relying on absolute
positioning and strange CSS, and throws them inline.

This also restyles so they hang to the right of the time which is now
always present.

Fixes: #3761.
2017-03-06 22:24:21 -08:00
Tommy Ip abf522adfb Add styling to distinguish bots from human users in message view.
With work by Brock Whittaker and Tim Abbott on rebasing + changing
styling.

Fixes #1107
2017-02-16 17:00:21 -08:00
Tim Abbott 173f988aec single_message: Clean up status message templating.
The original templating for this code was super complicated, due to
what appears to be a misguided effort to share code between the
status_message and non-status-message cases, that really just resulted
in a lot of if statements.
2017-02-11 23:01:22 -08:00
Tim Abbott ec3e5e844a reactions: Clean up popovers and hover logic.
Previously, the emoji reactions popovers were keyed off the
edit_content area, which is problematic because that area was
created/deleted on hover, resulting in orphaned popovers (which
wouldn't close properly normally).  That had been hackishly addressed
in the original PR with the overbroad `$('.popover').remove();`.  To
remove that, we fix the actions popover to always be based on an
element that exists in the page.

There probably more to do here, but this is good enough to merge emoji
reactions and iterate from here.
2016-12-30 21:42:54 -08:00
Arpith Siromoney 9c64a08cad Add frontend support for emoji reactions.
This commit replaces the placeholder "clipboard" button with a reaction button.
This is done on any message that can't be edited. Also, on messages sent by
the user the actions popover (toggled by the down chevron icon) contains
an option to add a reaction.

When clicked, a popover with a search bar and a list of emojis is displayed.
If the right sidebar is collapsed (the viewport is small), the popover is placed
to the left of the button.
Focus is set to the search bar. Typing in the search bar filters emojis.

Emojis with which the user has reacted to this message are highlighted.
Clicking them sends an API request to remove that reaction.
Clicking on non-highlighted emojis sends an API request to add a reaction.
When the popover loses focus it is closed.

The frontend listens for reaction events. When an add-reaction event is
received, the emoji is displayed at the bottom of the message with a
count initialized to 1. If there was an existing reaction to the message with
the same emoji, the count is incremented.

Old messages fetched from the server contain reactions.
They are displayed (along with title and count) at the bottom
of each message.

When clicking the emoji reaction at the bottom of the message, if the
user has already reacted with that emoji to this message, the reaction
is removed and the count is decremented. Otherwise, a reaction is added
and the count is incremented.

Hovering over the emoji reaction at the bottom of the message displays
a list of users who have reacted with this emoji along with the
emoji name.

Hovering over the emoji reactions at the bottom of the message displays
a button to add a reaction.

Fixes #541.
2016-12-30 21:42:54 -08:00
Umair Khan db5d86ab9e i18n: Title attribute should be translatable. 2016-12-15 13:44:13 -08:00
aakash-cr7 73fb9c6f66 Fix alignment of 'Not Delivered buttons' on smaller devices. 2016-11-26 10:13:48 -08:00
aakash-cr7 79b4ac8155 Add tooltips to buttons appearing when message is not delivered. 2016-11-26 10:13:48 -08:00
Brock Whittaker d45c050994 message_edit: Restyle message_controls options to have better spacing.
This restyles the message_controls options to center them horizontally
while fixing them closer to the right side of the edge, along with just
replacing the edit button with a preview source button once editing is
disabled.
2016-11-10 19:47:26 -08:00
Brock Whittaker 5497416a36 Move edit button to underneath message timestamp.
This moves the edit button to underneath the timestamp such that when
you hover over a message now the timestamp hides itself and the edit
button appears (if editing is allowed).

Fixes #1733 and other annoying issues with this field.
2016-11-10 19:45:09 -08:00
Brock Whittaker 6936d49202 Live update new avatars across users.
This sends an event when a new avatar is uploaded that refreshes the
avatar for all browser clients without the need to reload the browser.

Fixes: #1359.
2016-08-18 15:32:29 -07:00
Tomasz Kolek c5b56c15de Fix placement of EDITED in one line status messages.
Fixes #836.
2016-06-05 10:11:05 -07:00
Umair Khan ac13187d76 Add translation tags to the templates.
Fixes #726
2016-05-19 22:58:26 -07:00
Allen Rabinovich 3cf0d40436 Fix the overflow issues on status messages
(imported from commit 1b204bd95d80f1752b7df889b1a7e436360f144a)
2014-06-10 14:35:05 -06:00
Jason Michalski d2d9d9cb01 Fix references to local_id and failed_request
Both missed in the refactoring that split global messages and
message_list_view message_containers.

(imported from commit 127d09204a9e363b78eccfe3d72212e78beb2600)
2014-04-30 16:03:38 -04:00
Jason Michalski 3158075405 Use the match data on the message not the message_container
(imported from commit 1289108c767732c76efc7369206ef065f2395e0d)
2014-03-18 18:24:23 -04:00
Jason Michalski 28245ce4e4 Mark messages as read globally
If you read a message in a narrow it should also be marked as read in
the main list.

(imported from commit e892fad0a5b635b5c8de6ebdc79fbfd2b54fab2b)
2014-03-18 16:03:25 -04:00