Skip to content

Commit

Permalink
feat: Add about dialog
Browse files Browse the repository at this point in the history
  • Loading branch information
yinxin630 committed May 10, 2018
1 parent 0ba54c4 commit 984132c
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 5 deletions.
3 changes: 3 additions & 0 deletions client/components/components.less
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@
top: 45% !important;
transform: translateY(-50%) !important;
}
.rc-dialog-title {
font-size: 16px !important;
}
.rc-dialog-wrap {
overflow: hidden !important;
}
Expand Down
50 changes: 45 additions & 5 deletions client/modules/main/sidebar/Sidebar.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@ class Sidebar extends Component {
settingDialog: false,
userDialog: false,
rewardDialog: false,
infoDialog: false,
avatarLoading: false,
backgroundLoading: false,
};
Expand Down Expand Up @@ -109,6 +110,18 @@ class Sidebar extends Component {
});
}
@autobind
openInfo() {
this.setState({
infoDialog: true,
});
}
@autobind
closeInfo() {
this.setState({
infoDialog: false,
});
}
@autobind
handlePrimaryColorChange(color) {
const primaryColor = `${color.rgb.r}, ${color.rgb.g}, ${color.rgb.b}`;
const { primaryTextColor } = this.props;
Expand Down Expand Up @@ -180,7 +193,7 @@ class Sidebar extends Component {
}
render() {
const { isLogin, isConnect, avatar, primaryColor, primaryTextColor, backgroundImage, sound, soundSwitch, notificationSwitch } = this.props;
const { settingDialog, userDialog, rewardDialog, avatarLoading, backgroundLoading } = this.state;
const { settingDialog, userDialog, rewardDialog, infoDialog, avatarLoading, backgroundLoading } = this.state;
if (isLogin) {
return (
<div className="module-main-sidebar">
Expand All @@ -191,13 +204,11 @@ class Sidebar extends Component {
<IconButton width={40} height={40} icon="github" iconSize={26} />
</a>
<IconButton width={40} height={40} icon="dashang" iconSize={26} onClick={this.openReward} />
<a href="http://suisuijiang.com" target="_black" rel="noopener noreferrer">
<IconButton width={40} height={40} icon="about" iconSize={26} />
</a>
<IconButton width={40} height={40} icon="about" iconSize={26} onClick={this.openInfo} />
<IconButton width={40} height={40} icon="setting" iconSize={26} onClick={this.openSettingDialog} />
<IconButton width={40} height={40} icon="logout" iconSize={26} onClick={Sidebar.logout} />
</div>
<Dialog className="dialog" visible={settingDialog} title="系统设置" onClose={this.closeSettingDialog}>
<Dialog className="dialog system-setting" visible={settingDialog} title="系统设置" onClose={this.closeSettingDialog}>
<div className="content">
<div>
<p>恢复</p>
Expand Down Expand Up @@ -279,6 +290,35 @@ class Sidebar extends Component {
</div>
</div>
</Dialog>
<Dialog className="dialog fiora-info " visible={infoDialog} title="关于" onClose={this.closeInfo}>
<div className="content">
<div>
<p>作者主页</p>
<a href="https://suisuijiang.com" target="_black" rel="noopener noreferrer">https://suisuijiang.com</a>
</div>
<div>
<p>如何在本地运行</p>
<a href="https://github.com/yinxin630/fiora/blob/master/doc/INSTALL.ZH.md" target="_black" rel="noopener noreferrer">https://github.com/yinxin630/fiora/blob/master/doc/INSTALL.ZH.md</a>
</div>
<div>
<p>作者主页</p>
<a href="https://suisuijiang.com" target="_black" rel="noopener noreferrer">https://suisuijiang.com</a>
</div>
<div>
<p>输入框快捷键</p>
<ul>
<li>Command / Ctrl + S: 发送滑稽</li>
<li>Command / Ctrl + 1: 表情阴险</li>
<li>Command / Ctrl + 2: 表情乖</li>
<li>Command / Ctrl + 3: 表情滑稽</li>
<li>Command / Ctrl + 4: 表情呵呵</li>
<li>Command / Ctrl + 5: 表情委屈</li>
<li>Command / Ctrl + 6: 表情笑眼</li>
<li>Command / Ctrl + 7: 表情吐舌</li>
</ul>
</div>
</div>
</Dialog>
</div>
);
}
Expand Down
15 changes: 15 additions & 0 deletions client/modules/main/sidebar/Sidebar.less
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,17 @@
color: #777;
}
}
& > a {
font-size: 14px;
}
& > ul {
margin: 6px 0;
padding-left: 26px;
font-size: 14px;
& > li {
height: 20px;
}
}
& > .color-info {
display: flex;
align-items: center;
Expand Down Expand Up @@ -283,4 +294,8 @@
}
}
}
}
.fiora-info {
width: 600px !important;
height: initial !important;
}

0 comments on commit 984132c

Please sign in to comment.