From bd9f5d3e06a3e71815846c952889460da36024f2 Mon Sep 17 00:00:00 2001 From: Aviral Dasgupta Date: Tue, 9 Aug 2016 21:44:09 +0530 Subject: [PATCH] Various fixes and improvements to emojification. - Use locally hosted emoji - Emojify SenderProfile and m.emote - Fix emoji spacing --- .gitignore | 1 + package.json | 12 +++-- src/component-index.js | 1 - .../views/messages/SenderProfile.js | 45 ------------------- .../views/rooms/EventTile.css | 4 +- 5 files changed, 12 insertions(+), 51 deletions(-) delete mode 100644 src/components/views/messages/SenderProfile.js diff --git a/.gitignore b/.gitignore index 0d9bc9d54d..7dda585ca1 100644 --- a/.gitignore +++ b/.gitignore @@ -6,5 +6,6 @@ /packages/ /vector/bundle.* /vector/components.css +/vector/emojione/ /vector/config.json .DS_Store diff --git a/package.json b/package.json index 2b059bcf26..e31fbd9d97 100644 --- a/package.json +++ b/package.json @@ -12,21 +12,23 @@ "matrix-react-parent": "matrix-react-sdk", "scripts": { "reskindex": "reskindex -h src/header", + "build:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/", "build:modernizr": "modernizr -c .modernizr.json -d src/vector/modernizr.js", "build:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css --no-watch", "build:compile": "babel --source-maps -d lib src", "build:bundle": "NODE_ENV=production webpack -p lib/vector/index.js vector/bundle.js", "build:bundle:dev": "NODE_ENV=production webpack --optimize-occurence-order lib/vector/index.js vector/bundle.js", - "build": "npm run build:css && npm run build:compile && npm run build:bundle", + "build": "npm run build:css && npm run build:emojione && npm run build:compile && npm run build:bundle", "build:dev": "npm run build:css && npm run build:compile && npm run build:bundle:dev", "package": "scripts/package.sh", + "start:emojione": "cpx \"node_modules/emojione/assets/svg/*\" vector/emojione/svg/ -w", "start:js": "webpack -w src/vector/index.js vector/bundle.js", "start:js:prod": "NODE_ENV=production webpack -w src/vector/index.js vector/bundle.js", "start:skins:css": "catw \"src/skins/vector/css/**/*.css\" -o vector/components.css", "//cache": "Note the -c 1 below due to https://code.google.com/p/chromium/issues/detail?id=508270", - "start": "parallelshell \"npm run start:js\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", + "start": "parallelshell \"npm run start:js\" \"npm run start:emojione\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", "start:prod": "parallelshell \"npm run start:js:prod\" \"npm run start:skins:css\" \"http-server -c 1 vector\"", - "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css*", + "clean": "rimraf lib vector/bundle.css vector/bundle.js vector/bundle.js.map vector/webpack.css* vector/emojione", "prepublish": "npm run build:css && npm run build:compile", "test": "karma start --single-run=true --autoWatch=false --browsers PhantomJS --colors=false", "test:multi": "karma start" @@ -59,7 +61,9 @@ "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "catw": "^1.0.1", + "cpx": "^1.3.2", "css-raw-loader": "^0.1.1", + "emojione": "^2.2.3", "expect": "^1.16.0", "http-server": "^0.8.4", "json-loader": "^0.5.3", @@ -74,8 +78,8 @@ "mocha": "^2.4.5", "parallelshell": "^1.2.0", "phantomjs-prebuilt": "^2.1.7", - "react-addons-test-utils": "^15.0.1", "react-addons-perf": "^15.0", + "react-addons-test-utils": "^15.0.1", "rimraf": "^2.4.3", "source-map-loader": "^0.1.5", "webpack": "^1.12.14" diff --git a/src/component-index.js b/src/component-index.js index b3baf22aed..2beea42381 100644 --- a/src/component-index.js +++ b/src/component-index.js @@ -44,7 +44,6 @@ module.exports.components['views.login.VectorLoginFooter'] = require('./componen module.exports.components['views.login.VectorLoginHeader'] = require('./components/views/login/VectorLoginHeader'); module.exports.components['views.messages.DateSeparator'] = require('./components/views/messages/DateSeparator'); module.exports.components['views.messages.MessageTimestamp'] = require('./components/views/messages/MessageTimestamp'); -module.exports.components['views.messages.SenderProfile'] = require('./components/views/messages/SenderProfile'); module.exports.components['views.rooms.BottomLeftMenuTile'] = require('./components/views/rooms/BottomLeftMenuTile'); module.exports.components['views.rooms.MessageContextMenu'] = require('./components/views/rooms/MessageContextMenu'); module.exports.components['views.rooms.RoomDNDView'] = require('./components/views/rooms/RoomDNDView'); diff --git a/src/components/views/messages/SenderProfile.js b/src/components/views/messages/SenderProfile.js deleted file mode 100644 index 82f3337d15..0000000000 --- a/src/components/views/messages/SenderProfile.js +++ /dev/null @@ -1,45 +0,0 @@ -/* -Copyright 2015, 2016 OpenMarket Ltd - -Licensed under the Apache License, Version 2.0 (the "License"); -you may not use this file except in compliance with the License. -You may obtain a copy of the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, -WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. -See the License for the specific language governing permissions and -limitations under the License. -*/ - -'use strict'; - -var React = require('react'); - -module.exports = React.createClass({ - displayName: 'SenderProfile', - - propTypes: { - mxEvent: React.PropTypes.object.isRequired, // event whose sender we're showing - aux: React.PropTypes.string, // stuff to go after the sender name, if anything - onClick: React.PropTypes.func, - }, - - render: function() { - var mxEvent = this.props.mxEvent; - var name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender(); - - var msgtype = mxEvent.getContent().msgtype; - if (msgtype && msgtype == 'm.emote') { - return ; // emote message must include the name so don't duplicate it - } - return ( - - {name} { this.props.aux } - - ); - }, -}); - diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index 012239685d..b9b8f45461 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -120,8 +120,10 @@ limitations under the License. /* end of overrides */ -.mx_EventTile_bigEmoji { +/* HACK to override line-height which is already marked important elsewhere */ +.mx_EventTile_bigEmoji.mx_EventTile_bigEmoji { font-size: 48px ! important; + line-height: 48px ! important; } /* this is used for the tile for the event which is selected via the URL.