PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Underline visible sections in header

Browse source 
Signed-off-by: Tulir Asokan <tulir@maunium.net>
This commit is contained in:
Tulir Asokan 2019-10-14 20:14:40 +03:00
parent 088c9bff9e
commit e16d0bfa4d
4 changed files with 56 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
res/css/views/emojipicker/_EmojiPicker.scss
View file

@ -57,10 +57,10 @@ limitations under the License.
background-color: $focus-bg-color;
border-bottom: 2px solid $button-bg-color;
}
.mx_EmojiPicker_anchor_selected {
border-bottom: 2px solid $button-bg-color;
}
.mx_EmojiPicker_anchor_visible {
border-bottom: 2px solid $button-bg-color;
}
.mx_EmojiPicker_search {

2
src/components/views/emojipicker/Category.js
View file

@ -30,7 +30,7 @@ class Category extends React.PureComponent {
};
render() {
const { onClick, onMouseEnter, onMouseLeave, emojis, name, filter } = this.props;
const { onClick, onMouseEnter, onMouseLeave, emojis, name } = this.props;
if (!emojis || emojis.length === 0) {
return null;
}

50
src/components/views/emojipicker/EmojiPicker.js
View file

@ -71,8 +71,6 @@ class EmojiPicker extends React.Component {
previewEmoji: null,
};
this.bodyRef = React.createRef();
this.recentlyUsed = recent.get().map(unicode => DATA_BY_EMOJI[unicode]);
this.memoizedDataByCategory = {
recent: this.recentlyUsed,
@ -83,49 +81,92 @@ class EmojiPicker extends React.Component {
id: "recent",
name: _t("Frequently Used"),
enabled: this.recentlyUsed.length > 0,
visible: true,
ref: React.createRef(),
}, {
id: "people",
name: _t("Smileys & People"),
enabled: true,
visible: true,
ref: React.createRef(),
}, {
id: "nature",
name: _t("Animals & Nature"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "foods",
name: _t("Food & Drink"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "activity",
name: _t("Activities"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "places",
name: _t("Travel & Places"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "objects",
name: _t("Objects"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "symbols",
name: _t("Symbols"),
enabled: true,
visible: false,
ref: React.createRef(),
}, {
id: "flags",
name: _t("Flags"),
enabled: true,
visible: false,
ref: React.createRef(),
}];
this.bodyRef = React.createRef();
this.onChangeFilter = this.onChangeFilter.bind(this);
this.onHoverEmoji = this.onHoverEmoji.bind(this);
this.onHoverEmojiEnd = this.onHoverEmojiEnd.bind(this);
this.onClickEmoji = this.onClickEmoji.bind(this);
this.scrollToCategory = this.scrollToCategory.bind(this);
this.updateVisibility = this.updateVisibility.bind(this);
window.bodyRef = this.bodyRef;
}
updateVisibility() {
const rect = this.bodyRef.current.getBoundingClientRect();
for (const cat of this.categories) {
const elem = this.bodyRef.current.querySelector(`[data-category-id="${cat.id}"]`);
if (!elem) {
cat.visible = false;
cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
continue;
}
const elemRect = elem.getBoundingClientRect();
const y = elemRect.y - rect.y;
const yEnd = elemRect.y + elemRect.height - rect.y;
cat.visible = y < rect.height && yEnd > 0;
// We update this here instead of through React to avoid re-render on scroll.
if (cat.visible) {
cat.ref.current.classList.add("mx_EmojiPicker_anchor_visible");
} else {
cat.ref.current.classList.remove("mx_EmojiPicker_anchor_visible");
}
}
}
scrollToCategory(category) {
const index = this.categories.findIndex(cat => cat.id === category);
this.bodyRef.current.querySelector(`[data-category-id="${category}"]`).scrollIntoView();
@ -141,6 +182,9 @@ class EmojiPicker extends React.Component {
this.categories.find(cat => cat.id === id).enabled = this.memoizedDataByCategory[id].length > 0;
}
this.setState({ filter });
// Header underlines need to be updated, but updating requires knowing
// where the categories are, so we wait for a tick.
setTimeout(this.updateVisibility, 0);
}
onHoverEmoji(emoji) {
@ -173,7 +217,7 @@ class EmojiPicker extends React.Component {
<div className="mx_EmojiPicker">
<Header categories={this.categories} defaultCategory="recent" onAnchorClick={this.scrollToCategory}/>
<Search query={this.state.filter} onChange={this.onChangeFilter}/>
<div className="mx_EmojiPicker_body" ref={this.bodyRef}>
<div className="mx_EmojiPicker_body" ref={this.bodyRef} onScroll={this.updateVisibility}>
{this.categories.map(category => (
<Category key={category.id} id={category.id} name={category.name}
emojis={this.memoizedDataByCategory[category.id]} onClick={this.onClickEmoji}

23
src/components/views/emojipicker/Header.js
View file

@ -19,33 +19,20 @@ import PropTypes from 'prop-types';
import * as icons from "./icons";
class Header extends React.Component {
class Header extends React.PureComponent {
static propTypes = {
categories: PropTypes.arrayOf(PropTypes.object).isRequired,
onAnchorClick: PropTypes.func.isRequired,
defaultCategory: PropTypes.string,
};
constructor(props) {
super(props);
this.state = {
selected: props.defaultCategory || props.categories[0].id,
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(selected) {
this.setState({selected});
this.props.onAnchorClick(selected);
refs: PropTypes.object,
};
render() {
return (
<nav className="mx_EmojiPicker_header">
{this.props.categories.map(category => (
<button disabled={!category.enabled} key={category.id} className={`mx_EmojiPicker_anchor ${
this.state.selected === category.id ? 'mx_EmojiPicker_anchor_selected' : ''}`}
onClick={() => this.handleClick(category.id)} title={category.name}>
<button disabled={!category.enabled} key={category.id} ref={category.ref}
className={`mx_EmojiPicker_anchor ${category.visible ? 'mx_EmojiPicker_anchor_visible' : ''}`}
onClick={() => this.props.onAnchorClick(category.id)} title={category.name}>
{icons.categories[category.id]()}
</button>
))}