diff --git a/res/css/views/emojipicker/_EmojiPicker.scss b/res/css/views/emojipicker/_EmojiPicker.scss index ddb3e82eca..5f3cfb8133 100644 --- a/res/css/views/emojipicker/_EmojiPicker.scss +++ b/res/css/views/emojipicker/_EmojiPicker.scss @@ -36,16 +36,6 @@ limitations under the License. border-bottom: 1px solid $message-action-bar-border-color; } -.mx_EmojiPicker button > svg { - width: 100%; - height: 100%; - fill: $primary-fg-color; -} - -.mx_EmojiPicker button:disabled > svg { - fill: $focus-bg-color; -} - .mx_EmojiPicker_anchor { border: none; padding: 8px 8px 6px; @@ -66,6 +56,31 @@ limitations under the License. } } +.mx_EmojiPicker_anchor::before { + background-color: $primary-fg-color; + content: ''; + display: inline-block; + mask-size: 100%; + mask-repeat: no-repeat; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_anchor:disabled::before { + background-color: $focus-bg-color; +} + +.mx_EmojiPicker_anchor_activity::before { mask-image: url('$(res)/img/emojipicker/activity.svg') } +.mx_EmojiPicker_anchor_custom::before { mask-image: url('$(res)/img/emojipicker/custom.svg') } +.mx_EmojiPicker_anchor_flags::before { mask-image: url('$(res)/img/emojipicker/flags.svg') } +.mx_EmojiPicker_anchor_foods::before { mask-image: url('$(res)/img/emojipicker/foods.svg') } +.mx_EmojiPicker_anchor_nature::before { mask-image: url('$(res)/img/emojipicker/nature.svg') } +.mx_EmojiPicker_anchor_objects::before { mask-image: url('$(res)/img/emojipicker/objects.svg') } +.mx_EmojiPicker_anchor_people::before { mask-image: url('$(res)/img/emojipicker/people.svg') } +.mx_EmojiPicker_anchor_places::before { mask-image: url('$(res)/img/emojipicker/places.svg') } +.mx_EmojiPicker_anchor_recent::before { mask-image: url('$(res)/img/emojipicker/recent.svg') } +.mx_EmojiPicker_anchor_symbols::before { mask-image: url('$(res)/img/emojipicker/symbols.svg') } + .mx_EmojiPicker_anchor_visible { border-bottom: 2px solid $button-bg-color; } @@ -99,6 +114,20 @@ limitations under the License. cursor: pointer; } +.mx_EmojiPicker_search_icon::after { + mask: url('$(res)/img/emojipicker/search.svg') no-repeat; + mask-size: 100%; + background-color: $primary-fg-color; + content: ''; + display: inline-block; + width: 100%; + height: 100%; +} + +.mx_EmojiPicker_search_clear::after { + mask-image: url('$(res)/img/emojipicker/delete.svg'); +} + .mx_EmojiPicker_category { padding: 0 12px; display: flex; diff --git a/res/img/emojipicker/activity.svg b/res/img/emojipicker/activity.svg new file mode 100644 index 0000000000..d921667e7a --- /dev/null +++ b/res/img/emojipicker/activity.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/custom.svg b/res/img/emojipicker/custom.svg new file mode 100644 index 0000000000..814cd8ec13 --- /dev/null +++ b/res/img/emojipicker/custom.svg @@ -0,0 +1,34 @@ + + + + + + + + + diff --git a/res/img/emojipicker/delete.svg b/res/img/emojipicker/delete.svg new file mode 100644 index 0000000000..5f5d4e52eb --- /dev/null +++ b/res/img/emojipicker/delete.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/flags.svg b/res/img/emojipicker/flags.svg new file mode 100644 index 0000000000..bd0a935265 --- /dev/null +++ b/res/img/emojipicker/flags.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/foods.svg b/res/img/emojipicker/foods.svg new file mode 100644 index 0000000000..57a15976d8 --- /dev/null +++ b/res/img/emojipicker/foods.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/res/img/emojipicker/nature.svg b/res/img/emojipicker/nature.svg new file mode 100644 index 0000000000..a4778be927 --- /dev/null +++ b/res/img/emojipicker/nature.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/objects.svg b/res/img/emojipicker/objects.svg new file mode 100644 index 0000000000..e0d39f985a --- /dev/null +++ b/res/img/emojipicker/objects.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/people.svg b/res/img/emojipicker/people.svg new file mode 100644 index 0000000000..c2fdb579f6 --- /dev/null +++ b/res/img/emojipicker/people.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/places.svg b/res/img/emojipicker/places.svg new file mode 100644 index 0000000000..0947baaf04 --- /dev/null +++ b/res/img/emojipicker/places.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/recent.svg b/res/img/emojipicker/recent.svg new file mode 100644 index 0000000000..2fdcc65cd2 --- /dev/null +++ b/res/img/emojipicker/recent.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/res/img/emojipicker/search.svg b/res/img/emojipicker/search.svg new file mode 100644 index 0000000000..b5f660b3ac --- /dev/null +++ b/res/img/emojipicker/search.svg @@ -0,0 +1,15 @@ + + + + + diff --git a/res/img/emojipicker/symbols.svg b/res/img/emojipicker/symbols.svg new file mode 100644 index 0000000000..a2b86d9ec8 --- /dev/null +++ b/res/img/emojipicker/symbols.svg @@ -0,0 +1,14 @@ + + + + + diff --git a/src/components/views/emojipicker/Header.js b/src/components/views/emojipicker/Header.js index 04addfc81d..05cbebbfb1 100644 --- a/src/components/views/emojipicker/Header.js +++ b/src/components/views/emojipicker/Header.js @@ -17,8 +17,6 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import * as icons from "./icons"; - class Header extends React.PureComponent { static propTypes = { categories: PropTypes.arrayOf(PropTypes.object).isRequired, @@ -31,13 +29,12 @@ class Header extends React.PureComponent { - ) + ); } } diff --git a/src/components/views/emojipicker/Search.js b/src/components/views/emojipicker/Search.js index 547f673815..dbdb91ff10 100644 --- a/src/components/views/emojipicker/Search.js +++ b/src/components/views/emojipicker/Search.js @@ -17,8 +17,6 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import * as icons from "./icons"; - class Search extends React.PureComponent { static propTypes = { query: PropTypes.string.isRequired, @@ -39,11 +37,10 @@ class Search extends React.PureComponent { return (
this.props.onChange(ev.target.value)} ref={this.inputRef}/> + onChange={ev => this.props.onChange(ev.target.value)} ref={this.inputRef} /> + className={`mx_EmojiPicker_search_icon ${this.props.query ? "mx_EmojiPicker_search_clear" : ""}`} + title={this.props.query ? "Cancel search" : "Search"} />
); } diff --git a/src/components/views/emojipicker/icons.js b/src/components/views/emojipicker/icons.js deleted file mode 100644 index b6cf1ad371..0000000000 --- a/src/components/views/emojipicker/icons.js +++ /dev/null @@ -1,170 +0,0 @@ -// Copyright (c) 2016, Missive -// From https://github.com/missive/emoji-mart/blob/master/src/svgs/index.js -// Licensed under BSD-3-Clause: https://github.com/missive/emoji-mart/blob/master/LICENSE - -import React from 'react' - -const categories = { - activity: () => ( - - - - ), - - custom: () => ( - - - - - - - - ), - - flags: () => ( - - - - ), - - foods: () => ( - - - - ), - - nature: () => ( - - - - - ), - - objects: () => ( - - - - - ), - - people: () => ( - - - - - ), - - places: () => ( - - - - - ), - - recent: () => ( - - - - - ), - - symbols: () => ( - - - - ), -} - -const search = { - search: () => ( - - - - ), - - delete: () => ( - - - - ), -} - -export { categories, search }