wewechat++ init
仓库提交至星火社区作品集 Signed-off-by: Riceneeder <86492950+Riceneeder@users.noreply.github.com>
This commit is contained in:
Riceneeder
119
src/js/pages/Members/index.js
Normal file
119
src/js/pages/Members/index.js
Normal file
@@ -0,0 +1,119 @@
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import { observer, inject } from 'mobx-react';
|
||||
|
||||
import classes from './style.css';
|
||||
import helper from 'utils/helper';
|
||||
|
||||
@inject(stores => ({
|
||||
show: stores.members.show,
|
||||
close: () => stores.members.toggle(false),
|
||||
user: stores.members.user,
|
||||
list: stores.members.list,
|
||||
search: stores.members.search,
|
||||
searching: stores.members.query,
|
||||
filtered: stores.members.filtered,
|
||||
showUserinfo: async(user) => {
|
||||
var me = stores.session.user.User;
|
||||
var caniremove = helper.isChatRoomOwner(stores.members.user);
|
||||
|
||||
if (user.UserName === me.UserName) {
|
||||
user = me;
|
||||
} else {
|
||||
stores.contacts.memberList.find(e => {
|
||||
// Try to find contact in contacts
|
||||
if (e.UserName === user.UserName) {
|
||||
return (user = e);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
stores.userinfo.toggle(true, user, caniremove);
|
||||
},
|
||||
addMember: () => {
|
||||
stores.members.toggle(false);
|
||||
stores.addmember.toggle(true);
|
||||
}
|
||||
}))
|
||||
@observer
|
||||
export default class Members extends Component {
|
||||
render() {
|
||||
var { user, searching, list, filtered } = this.props;
|
||||
|
||||
if (!this.props.show) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.container}>
|
||||
<header>
|
||||
<span dangerouslySetInnerHTML={{ __html: `Group '${user.NickName}' has ${list.length} members` }} />
|
||||
|
||||
<span>
|
||||
<i
|
||||
className="icon-ion-android-add"
|
||||
onClick={e => this.props.addMember()}
|
||||
style={{
|
||||
marginRight: 20,
|
||||
}} />
|
||||
|
||||
<i
|
||||
className="icon-ion-android-close"
|
||||
onClick={e => this.props.close()} />
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<ul className={classes.list}>
|
||||
{
|
||||
(searching && filtered.length === 0) && (
|
||||
<div className={classes.notfound}>
|
||||
<img src="assets/images/crash.png" />
|
||||
<h1>Can't find any people matching '{searching}'</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{
|
||||
(searching ? filtered : list).map((e, index) => {
|
||||
var pallet = e.pallet || [];
|
||||
var frontColor = pallet[1] || [0, 0, 0];
|
||||
|
||||
return (
|
||||
<li
|
||||
key={index}
|
||||
onClick={ev => this.props.showUserinfo(e)}
|
||||
style={{
|
||||
color: `rgb(
|
||||
${frontColor[0]},
|
||||
${frontColor[1]},
|
||||
${frontColor[2]}
|
||||
)`,
|
||||
}}>
|
||||
<div
|
||||
className={classes.cover}
|
||||
style={{
|
||||
backgroundImage: `url(${e.HeadImgUrl})`,
|
||||
}} />
|
||||
<span
|
||||
className={classes.username}
|
||||
dangerouslySetInnerHTML={{ __html: e.NickName }} />
|
||||
</li>
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
||||
<div className={classes.footer}>
|
||||
<input
|
||||
autoFocus={true}
|
||||
id="messageInput"
|
||||
maxLength={30}
|
||||
onInput={e => this.props.search(e.target.value)}
|
||||
placeholder="Type something to search..."
|
||||
ref="input"
|
||||
type="text" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
183
src/js/pages/Members/style.css
Normal file
183
src/js/pages/Members/style.css
Normal file
@@ -0,0 +1,183 @@
|
||||
|
||||
.container {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
background: #fff;
|
||||
color: #333;
|
||||
z-index: 9;
|
||||
|
||||
& header {
|
||||
display: flex;
|
||||
padding: 0 12px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-family: 'Roboto';
|
||||
font-weight: 100;
|
||||
font-size: 20px;
|
||||
color: #333;
|
||||
box-shadow: inset 0 -1px 0 0 #eaedea;
|
||||
}
|
||||
|
||||
& header i {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& header span:nth-child(1) {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 17px;
|
||||
}
|
||||
|
||||
& header i:hover {
|
||||
color: #34b7f1;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
height: calc(100vh - 90px - 60px);
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
& li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 14px;
|
||||
margin: 6px 8px;
|
||||
height: 32px;
|
||||
min-width: 70px;
|
||||
line-height: 32px;
|
||||
border-radius: 1px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .3);
|
||||
overflow: hidden;
|
||||
transition: .2s;
|
||||
}
|
||||
|
||||
|
||||
& li:hover .cover {
|
||||
filter: opacity(1);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
.cover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: opacity(.6);
|
||||
transform: scale(1);
|
||||
transition: .2s;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
position: relative;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 60px;
|
||||
box-shadow: inset 0 1px 0 0 #eaedea;
|
||||
|
||||
& input {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
border: 0;
|
||||
background: 0;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.notfound {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
& img {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
& h1 {
|
||||
font-family: 'Roboto';
|
||||
font-weight: 100;
|
||||
color: rgba(0, 0, 0, .8);
|
||||
letter-spacing: 2px;
|
||||
word-spacing: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (width <= 800px) {
|
||||
.container {
|
||||
& header {
|
||||
padding: 0 10px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
height: calc(100vh - 80px - 46px);
|
||||
|
||||
& li {
|
||||
padding: 0 10px;
|
||||
margin: 4px 6px;
|
||||
height: 28px;
|
||||
min-width: 70px;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
height: 46px;
|
||||
|
||||
& input {
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notfound {
|
||||
& img {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
& h1 {
|
||||
word-spacing: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user