Commit Graph

123 Commits

Author SHA1 Message Date
Anders Kaseorg 70ff164f89 js: Convert _.any(a, …), _.some(a, …) to a.some(…).
And convert the corresponding function expressions to arrow style
while we’re here.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-10 14:08:12 -08:00
Anders Kaseorg 719546641f js: Convert a.indexOf(…) !== -1 to a.includes(…).
Babel polyfills this for us for Internet Explorer.

import * as babelParser from "recast/parsers/babel";
import * as recast from "recast";
import * as tsParser from "recast/parsers/typescript";
import { builders as b, namedTypes as n } from "ast-types";
import K from "ast-types/gen/kinds";
import fs from "fs";
import path from "path";
import process from "process";

const checkExpression = (node: n.Node): node is K.ExpressionKind =>
  n.Expression.check(node);

for (const file of process.argv.slice(2)) {
  console.log("Parsing", file);
  const ast = recast.parse(fs.readFileSync(file, { encoding: "utf8" }), {
    parser: path.extname(file) === ".ts" ? tsParser : babelParser,
  });
  let changed = false;

  recast.visit(ast, {
    visitBinaryExpression(path) {
      const { operator, left, right } = path.node;
      if (
        n.CallExpression.check(left) &&
        n.MemberExpression.check(left.callee) &&
        !left.callee.computed &&
        n.Identifier.check(left.callee.property) &&
        left.callee.property.name === "indexOf" &&
        left.arguments.length === 1 &&
        checkExpression(left.arguments[0]) &&
        ((["===", "!==", "==", "!=", ">", "<="].includes(operator) &&
          n.UnaryExpression.check(right) &&
          right.operator == "-" &&
          n.Literal.check(right.argument) &&
          right.argument.value === 1) ||
          ([">=", "<"].includes(operator) &&
            n.Literal.check(right) &&
            right.value === 0))
      ) {
        const test = b.callExpression(
          b.memberExpression(left.callee.object, b.identifier("includes")),
          [left.arguments[0]]
        );
        path.replace(
          ["!==", "!=", ">", ">="].includes(operator)
            ? test
            : b.unaryExpression("!", test)
        );
        changed = true;
      }
      this.traverse(path);
    },
  });

  if (changed) {
    console.log("Writing", file);
    fs.writeFileSync(file, recast.print(ast).code, { encoding: "utf8" });
  }
}

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-10 14:08:12 -08:00
Anders Kaseorg 02511bff1c js: Automatically convert _.each to for…of.
This commit was automatically generated by the following script,
followed by lint --fix and a few small manual lint-related cleanups.

import * as babelParser from "recast/parsers/babel";
import * as recast from "recast";
import * as tsParser from "recast/parsers/typescript";
import { builders as b, namedTypes as n } from "ast-types";
import { Context } from "ast-types/lib/path-visitor";
import K from "ast-types/gen/kinds";
import { NodePath } from "ast-types/lib/node-path";
import assert from "assert";
import fs from "fs";
import path from "path";
import process from "process";

const checkExpression = (node: n.Node): node is K.ExpressionKind =>
  n.Expression.check(node);
const checkStatement = (node: n.Node): node is K.StatementKind =>
  n.Statement.check(node);

for (const file of process.argv.slice(2)) {
  console.log("Parsing", file);
  const ast = recast.parse(fs.readFileSync(file, { encoding: "utf8" }), {
    parser: path.extname(file) === ".ts" ? tsParser : babelParser,
  });
  let changed = false;
  let inLoop = false;
  let replaceReturn = false;

  const visitLoop = (...args: string[]) =>
    function(this: Context, path: NodePath) {
      for (const arg of args) {
        this.visit(path.get(arg));
      }
      const old = { inLoop };
      inLoop = true;
      this.visit(path.get("body"));
      inLoop = old.inLoop;
      return false;
    };

  recast.visit(ast, {
    visitDoWhileStatement: visitLoop("test"),

    visitExpressionStatement(path) {
      const { expression, comments } = path.node;
      let valueOnly;
      if (
        n.CallExpression.check(expression) &&
        n.MemberExpression.check(expression.callee) &&
        !expression.callee.computed &&
        n.Identifier.check(expression.callee.object) &&
        expression.callee.object.name === "_" &&
        n.Identifier.check(expression.callee.property) &&
        ["each", "forEach"].includes(expression.callee.property.name) &&
        [2, 3].includes(expression.arguments.length) &&
        checkExpression(expression.arguments[0]) &&
        (n.FunctionExpression.check(expression.arguments[1]) ||
          n.ArrowFunctionExpression.check(expression.arguments[1])) &&
        [1, 2].includes(expression.arguments[1].params.length) &&
        n.Identifier.check(expression.arguments[1].params[0]) &&
        ((valueOnly = expression.arguments[1].params[1] === undefined) ||
          n.Identifier.check(expression.arguments[1].params[1])) &&
        (expression.arguments[2] === undefined ||
          n.ThisExpression.check(expression.arguments[2]))
      ) {
        const old = { inLoop, replaceReturn };
        inLoop = false;
        replaceReturn = true;
        this.visit(
          path
            .get("expression")
            .get("arguments")
            .get(1)
            .get("body")
        );
        inLoop = old.inLoop;
        replaceReturn = old.replaceReturn;

        const [right, { body, params }] = expression.arguments;
        const loop = b.forOfStatement(
          b.variableDeclaration("let", [
            b.variableDeclarator(
              valueOnly ? params[0] : b.arrayPattern([params[1], params[0]])
            ),
          ]),
          valueOnly
            ? right
            : b.callExpression(
                b.memberExpression(right, b.identifier("entries")),
                []
              ),
          checkStatement(body) ? body : b.expressionStatement(body)
        );
        loop.comments = comments;
        path.replace(loop);
        changed = true;
      }
      this.traverse(path);
    },

    visitForStatement: visitLoop("init", "test", "update"),

    visitForInStatement: visitLoop("left", "right"),

    visitForOfStatement: visitLoop("left", "right"),

    visitFunction(path) {
      this.visit(path.get("params"));
      const old = { replaceReturn };
      replaceReturn = false;
      this.visit(path.get("body"));
      replaceReturn = old.replaceReturn;
      return false;
    },

    visitReturnStatement(path) {
      if (replaceReturn) {
        assert(!inLoop); // could use labeled continue if this ever fires
        const { argument, comments } = path.node;
        if (argument === null) {
          const s = b.continueStatement();
          s.comments = comments;
          path.replace(s);
        } else {
          const s = b.expressionStatement(argument);
          s.comments = comments;
          path.replace(s, b.continueStatement());
        }
        return false;
      }
      this.traverse(path);
    },

    visitWhileStatement: visitLoop("test"),
  });

  if (changed) {
    console.log("Writing", file);
    fs.writeFileSync(file, recast.print(ast).code, { encoding: "utf8" });
  }
}

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-07 14:09:47 -08:00
Anders Kaseorg 362ab8838b emoji: Convert active_realm_emojis from object to Map.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-06 17:24:43 -08:00
Anders Kaseorg 419666fc31 emoji: Convert all_realm_emojis from object to Map.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-06 17:24:43 -08:00
Steve Howell b8f01f9cda people: Rename method to get_by_user_id().
This name is consistent with:

    get_by_email()
    get_by_name()
2020-02-05 12:04:56 -08:00
Anders Kaseorg fac2c71776 dict: Replace items method with @@iterator method.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-04 12:22:03 -08:00
Anders Kaseorg b16222a38b dict: Remove setdefault method.
Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2020-02-04 12:22:02 -08:00
Anders Kaseorg 28f3dfa284 js: Automatically convert var to let and const in most files.
This commit was originally automatically generated using `tools/lint
--only=eslint --fix`.  It was then modified by tabbott to contain only
changes to a set of files that are unlikely to result in significant
merge conflicts with any open pull request, excluding about 20 files.
His plan is to merge the remaining changes with more precise care,
potentially involving merging parts of conflicting pull requests
before running the `eslint --fix` operation.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-11-03 12:42:39 -08:00
Anders Kaseorg d17b577d0c js: Purge useless IIFEs.
With webpack, variables declared in each file are already file-local
(Global variables need to be explicitly exported), so these IIFEs are
no longer needed.

Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-10-25 13:51:21 -07:00
vinitS101 fe2ec995b6 message_view: Add js tooltip hovers for emoji reactions.
This removes HTML title hovers for emoji reaction buttons below messages
and replaces them with js tooltips.

Fixes #8679.
2019-07-19 12:45:44 -07:00
Anders Kaseorg db0b33842c templates: Replace templates.render with require calls.
This removes an unnecessary layer of indirection and allows webpack to
catch filename mistakes.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-07-12 21:11:14 -07:00
Thomas Ip a2872c107e typescript: Move TS files into JS directory.
This is just a code reorganization to avoid making it difficult to
find things as we migrate more file to TypeScript.
2019-03-25 12:11:37 -07:00
Thomas Ip 7d050ab0cf typescript: Migrate dict.js to typescript. 2019-03-21 10:48:44 -07:00
Rohitt Vashishtha 43988c4c8d reactions: Fix minor formatting in log message.
Changes -> "Unknown user_id 8888in reaction for message 1001"
to ------> "Unknown user_id 8888 in reaction for message 1001".
2018-07-10 16:22:52 -04:00
Armaan Ahluwalia 6d255efe4c app: Prepare JS files for consumption by webpack.
This commit prepares the frontend code to be consumed by webpack.

It is a hack: In theory, modules should be declaring and importing the
modules they depend on and the globals they expose directly.

However, that requires significant per-module work, which we don't
really want to block moving our toolchain to webpack on.

So we expose the modules by setting window.varName = varName; as
needed in the js files.
2018-07-05 10:53:36 +02:00
Shubham Dhama 80a2d5bc59 eslint: Enable `conditionalAssign` config of no-trailing-spaces rule. 2018-06-11 07:51:24 -04:00
Shubham Dhama dcb6254a4e eslint: Enable `no-extra-parens` rule.
Following sub-configuration is disabled:
                "nestedBinaryExpressions": false,
2018-06-11 07:51:24 -04:00
Tim Abbott 063d11b139 js: Standardize indentation of switch/case statements.
This gets my current draft eslint indentation configuration passing
cleaning on static/js.
2018-05-06 19:35:18 -07:00
Tim Abbott feef35bf25 linter: Add checks for sloppy use of .html().
Since jQuery's .html() can be a source of security bugs, we add a new
lint rule that tries to catch common problematic uses.
2018-04-12 09:50:14 -07:00
Harshit Bansal a49655e0d4 emoji: Migrate realm emoji to be addressed by `id` rather than `name`.
This commit migrates realm emoji to be addressed by their `id` rather
than their name. This fixes a long standing issue which was causing
an error on uploading an emoji with same name as a deactivated realm
emoji.

Fixes: #6977.
2018-03-20 22:24:44 -07:00
Harshit Bansal 5aa8629a10 reactions: Migrate `emoji_code` to store `id` for realm emoji.
Till now, we had been storing realm emoji's name in emoji code field
in reactions' model. This commit migrates it to store realm emoji's id.
It is a part of effort to migrate realm emojis to be referenced by their
id and not by name.
2018-03-09 13:46:27 -08:00
Aastha Gupta daf86eb664 settings: Add "text" option to emoji_set model.
We no longer have a special UI setting and model
field ("emoji_alt_code") for saying users want text-only
emojis.  We now instead make "text" be a fifth choice
for "emojiset".

Fixes #7406
2018-01-02 14:55:01 -05:00
Vishnu Ks c2847669b1 reactions: Implement local echo functionality.
Fixes #4291
2017-12-22 15:15:29 -05:00
Harshit Bansal 8a4fc9970f reactions.js: Migrate webapp to use the new reactions API.
Fixes: #6909.
2017-11-20 15:27:20 -08:00
Harshit Bansal 6f4d24d851 reactions.js: Fix the conditional check for sending reaction request.
Request for adding an reaction only if there is a default emoji or
an active realm emoji with that name while request for removing a
reaction should be sent only if there is a default emoji or a realm
emoji(may be active or deactivated) with that name. Earlier we were
not including deactivated realm emojis while deciding whether a
request for removing a reaction should be sent or not which was
causing requests for the removal of reactions with deactivated realm
emojis not to be sent to the backend.

Fixes: #6007.
2017-10-09 11:31:21 -07:00
Harshit Bansal 5b5bcce098 emoji: Migrate bugdown emoji to use sprite sheets.
This commit switches to use sprite sheets for rendering emojis
in all the remaining places, i.e., message bodies and composebox
typeahead. This commit also includes some changes to notifications.py
file so that the spans used for rendering emojis can be converted
to corresponding image tags so that we don't break the emoji rendering
in missed message emails since we can't use sprite sheets there.

As part of switching the bugdown system to use sprite sheets, we need
to switch the name_to_codepoint mappings to match the new sprite
sheets.  This has the side effect of fixing a bunch of emoji like
numbers and flag emoji in the emoji pickers.

Fixes: #3895.
Fixes: #3972.
2017-09-29 11:14:34 -07:00
Joshua Pan d387291b6c reactions.js: Extract open_reactions_popover().
Added tests for open_reactions_popover() also.
2017-09-19 19:07:30 -07:00
Tim Abbott 9081f2cf44 reactions: Store the emoji codepoint in the database.
This is the first part of a larger migration to convert Zulip's
reactions storage to something based on the codepoint, not the emoji
name that the user typed in, so that we don't need to worry about
changes in the names we're using breaking the emoji storage.
2017-08-15 09:29:27 -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
Harshit Bansal a6cd460f72 emoji: Rename `emoji.realm_emojis` to `emoji.all_realm_emojis`. 2017-07-05 13:02:41 -07:00
Harshit Bansal 29ff36cd2a reactions: Don't send add/remove requests for deactivated realm emojis.
Eventually, we'll want to support unreacting to deactivated realm
emoji, but for now the issues around name conflicts mean we can't
really support that.
2017-07-05 13:02:20 -07:00
Steve Howell 9b75daaa60 Extract reactions.view.remove_reaction(). 2017-06-29 07:19:52 -04:00
Steve Howell e2ae4aeb16 Extract reactions.view.update_existing_reaction(). 2017-06-29 07:19:52 -04:00
Steve Howell 8cf6ef95b1 Extract reactions.view.insert_new_reaction(). 2017-06-29 07:19:52 -04:00
Steve Howell 791e489938 Use a proper context in insert_new_reaction().
Before this change, we were piggybacking fields on to the event
object, which coupled us to any other function that relies on
the event.
2017-06-29 07:19:52 -04:00
Steve Howell 4ec1260b41 reactions.js: Have an initialize() function. 2017-05-30 21:43:18 -07:00
Steve Howell ecbbc8788a Move code from reactions -> emoji_picker.
This moves all the code dealing with emoji_picker
navigation and click/enter events to emoji_picker.js.

Some of the code still delegates back to reactions.js
in some way.

The navigate() code really does nothing reaction-specific,
nor does filter_emojis(), nor do some of their helpers.

This was mostly moving code, but I also did some
s/reaction// or s/reaction/emoji/ in names.
2017-05-29 17:10:05 -06:00
Steve Howell 3654406f17 Simplify/rename code to choose reaction in emoji picker.
We now call the function toggle_selected_emoji(), and it
is simpler in these ways:

    * We get the selected emoji more directly.
    * We reuse code in toggle_emoji_reaction().
2017-05-29 17:10:05 -06:00
Steve Howell 1ee757a237 Use toggle_emoji_reaction() in the emoji picker.
If we know the name of the emoji you need to toggle,
we can toggle_emoji_reaction(), which is less complex
than toggle_reaction().
2017-05-29 17:10:04 -06:00
Steve Howell 805c99ae27 Add hide_emoji_popover() to toggle_emoji_reaction().
This change sets us up to de-duplicate some code.  It
changes behavior for the edge case situation where
you had the reaction menu open but then decide to
click on one of the existing reactions.  This change
closes the emoji popover, which is probably the
correct behavior.
2017-05-29 17:10:04 -06:00
Steve Howell 63d0711c4b Rename message_reaction_on_click() to toggle_emoji_reaction().
This prepares us to de-duplicate some code.
2017-05-29 17:10:04 -06:00
Steve Howell affff8ac82 Extract reactions.set_reaction_count. 2017-05-29 14:59:52 -07:00
Steve Howell 1747223c35 reactions: Refactor remove_reaction().
* Add whitespace/comments.
    * Use find_reaction() helper.
    * Handle full-removal earlier in block.
    * Sequence operations in a more organized way.
2017-05-29 14:59:52 -07:00
Steve Howell 5c405f7048 reactions: Refactor add_reaction().
This commit splits out some helper methods to make it easier
to test:

    get_reaction_section
    find_reaction
    get_add_reaction_button
    update_existing_reaction
    insert_new_reaction
2017-05-29 14:59:52 -07:00
Brock Whittaker a88ca9fafc emoji-reactions: Fix reactions to not break inline-block display.
This fixes the reactions to not break a new line by changing them from
a weird combination of “float: left” and “display: block” (inlined), to
just “display: inline-block”.

With fixes from Harshit Bansal for an issue with using the hotkeys in
a filtered popover.

Fixes: #4818.
2017-05-17 12:49:40 -07:00
Harshit Bansal bf97734c57 reactions: Fix broken rendering of flag emojis in reactions.
Use the patched css classes for rendering flag emojis in reactions.
2017-05-17 08:09:50 -07:00
Cory Lynch 08f1c86041 Make reaction picker case-insensitive.
The search bar for picking message reactions now is case-insensitive,
since that's a better user experience, and there isn't a clear use
case for capital letters in emoji names.

Fixes #4666.
2017-05-11 19:10:21 -07:00
Tejas Kasetty 9b9c323314 emoji picker: Move cursor to end of filter string when focusing.
This is a much less annoying behavior than the Chrome browser default.

Explanatory comment added by tabbott, thanks to Steve Howell for the
research.

Fixes #4604.
2017-05-11 18:54:44 -07:00
Steve Howell d7813ee6b3 reactions: Remove unneeded message_store.get() calls.
Both callers to get_user_list_for_message_reactions() already
had a message object, so there was no need to pass in an id
just to fetch it from message_store again, so now the first
parameter is message, not message_id.
2017-05-11 09:39:17 -07:00
Steve Howell 87f5c22593 Simplify how we find the current user's emoji reactions.
This adds the current_user_has_reacted_to_emoji() helper.

This new helper is easier to use and slightly more efficient
than calling get_user_list_for_message_reaction() and then
indexOf().

This also replaces one call to get_user_list_for_message_reaction()
with a list of user_ids that we already had locally.

The node tests were improved a bit here, including a minor
whitespace fixup.
2017-05-11 09:39:17 -07:00
Tejas Kasetty 5dd5c84854 Add support for emoji picker hotkeys in compose context.
This is a follow-up to merging the compose and reactions emoji
pickers.  The logic for what happens when the user picks an emoji via
the hotkeys (i.e. hits `enter`) was still attempting to add a reaction
to the currently selected message unconditionally.

This commit adds a check in the two `enter` key code paths, and does
the correct thing in each case.

Fixes #4736.
2017-05-10 16:26:58 -07:00
Tim Abbott cfeff245c1 emoji: Manage Zulip emoji as a custom/extra realm emoji.
This is prerequisite for converting our emoji system to work off of
iamcal sprite sheets.

Also, fixes #4308.
2017-04-30 16:40:31 -07:00
Jack Zhang df817f12f4 emoji: Rename reaction-popover to emoji-popover.
The name emoji-popover should now be more appropiate, as there's no more
need to distinguish between reacting to messages and composing messages.
2017-04-30 15:15:33 -07:00
Jack Zhang a9505654da emoji: Replace the old compose emoji picker with the reactions picker.
This removes the old compose emoji picker in its entirety, changing
the few callbacks needed to launch the reactions-style emoji picker
instead and hook it up properly.

Callbacks for reactions and composing messages are distinguished by
selecting for, respectively, the .reaction and .composition classes.

Fixes #4122.
2017-04-30 15:14:42 -07:00
Jack Zhang f8b3ce7d15 emoji: Move all emoji picker logic/events into emoji_picker module.
Added emoji_picker.js to static asset pipeline.
2017-04-30 14:13:36 -07:00
Joshua Pan a7327422a8 reaction.js: Create reaction_navigate(). 2017-04-19 06:17:15 +00:00
Joshua Pan abda711c66 reaction.js: Extract reaction_show_list functions.
This creates get_emoji_at_index() and
find_index_for_emoji() functions, which search for
emojis and indices in reactions_show_list. Update
maybe_select_emoji with newly created functions.
2017-04-19 06:17:15 +00:00
Joshua Pan e075c84ca5 reaction.js: Maintain reaction_show_list.
This updates reaction_show_list whenever the popover
gets opened and whenever the search filter for reactions
gets used.
2017-04-19 06:17:15 +00:00
Joshua Pan cd28ea6d07 reaction.js: Update toggle_reaction().
Created get_selected_emoji() function.
toggle_reaction() now doesn't require emoji_name
and automatically looks for a selected_emoji
if possible.
2017-04-19 06:16:30 +00:00
Steve Howell cf6545a71f reactions: Only warn for unknown user ids.
If we get reactions for deactivated users, or otherwise missing
users, we only issue a blueslip warning now.  The function
get_message_reactions() was indirectly causing blueslip errors
before this fix, but we can downgrade to warnings now that this
function has better unit tests around it.

We eventually want to track deactivated users on the client.

Fixes #4289
2017-03-26 11:51:36 -07:00
Steve Howell 80addd902c Extract local vars in get_message_reactions(). 2017-03-26 11:39:05 -07:00
Steve Howell b3e4aa4c44 reactions: Downgrade blueslip error to a warning.
When we get a server error for adding/removing a reaction, we
no longer make a blueslip error, since it is somewhat common for
users to retry actions before the server sends an event.  The
code comment that is part of this commit explains this further.

Fixes #4290.
2017-03-24 18:24:15 -07:00
Joshua Pan b600e4d594 Pressing enter in reactions search picks first reaction. 2017-03-19 14:36:34 -07:00
Joshua Pan c8f2da3f3e reactions.js: Refactor reaction_popover_reaction_on_click. 2017-03-19 14:25:10 -07:00
Steve Howell 203ced0ee6 minor: Rename var in filter_emojis(). 2017-03-19 06:25:10 -07:00
Sourav Badami 4616ee7762 Enable display of emoji as their alt codes in reactions.
This currently only supports this in emoji reactions, not in actual
emoji in message bodies, but it's a great start for people who want a
text-only view.

Tweaked to update the text by tabbott.

Fixes #3169.
2017-03-03 15:19:34 -08:00
hackerkid 10324ba592 Change reaction button color when user reacts.
This makes it easy to see whether you were one of the people who
reacted to a give message.
2017-02-21 23:09:46 -08:00
Tim Abbott 7badc39b02 reactions: Fix exceptions reacting to locally echoed messages.
Previously, we were incorrectly not updating the data-message-id used
in the .message_reactions section to use the final ID when
echo.reify_id was called.

This meant in particular that if someone else reacted to a message you
sent, and you clicked it to share the reaction, you'd get an exception.
2017-02-07 14:13:29 -08:00
Tim Abbott 9821b3ebef reactions: Fix JS error for not-yet-fetched messages. 2017-01-17 00:10:41 -08:00
Tim Abbott 998dff9e50 lint: Add dangling commas in JavaScript objects. 2017-01-11 15:23:42 -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