@ant-design/icons#PlusSquareTwoTone JavaScript Examples
The following examples show how to use
@ant-design/icons#PlusSquareTwoTone.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: App.js From ctf_platform with MIT License | 4 votes |
|
render() {
return (
<div style={{ position: "fixed" }}>
<Transition
items={this.state.logined}
native
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}
>
{(styles, item) => {
if (item && !this.state.loading) {
return (
<animated.div style={{ ...styles, width: "100vw", height: "100vh", backgroundImage: "url(" + require("./assets/mainBG.webp").default + ")", backgroundSize: "cover" }}>
<Layout style={{ backgroundColor: "rgba(0, 0, 0, 0)" }}>
<Sider
className={this.state.mobileBreakpoint ? "mobileSider" : ""}
breakpoint="md"
collapsedWidth={0}
onBreakpoint={(broken) => { broken ? this.setState({ mobileBreakpoint: true }) : this.setState({ mobileBreakpoint: false }) }}
style={{ boxShadow: "5px 0px 6px 3px rgba(0, 0, 0, .5)" }}
>
<div className="overflow-handle">
<div style={{ height: "9ch", padding: "15px", display: "flex", alignItems: "center", justifyItems: "center" }}>
<img alt="Sieberrsec Logo" src={require("./assets/sieberrsec_ctf.svg").default} style={{ width: "100%", height: "100%", marginRight: "1vw" }}></img>
</div>
<Dropdown overlay={
<Menu>
{this.state.team != "teams-disabled" && this.state.team != "loading" && (
<div>
<Menu.Item key="Team">
<NavLink to="/Team">
<span>
<b style={{ color: "#d89614" }}><u>{this.state.team ? this.state.team : "No Team"}</u></b>
<br />{this.state.team ? "Manage Team " : "Create/Join a Team "}
</span>
<TeamOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
</div>
)}
<Menu.Item key="Profile">
<NavLink to="/Profile">
<span>Profile </span>
<UserOutlined />
</NavLink>
</Menu.Item>
<Menu.Item key="Settings">
<NavLink to="/Settings">
<span>Settings </span>
<SettingOutlined />
</NavLink>
</Menu.Item>
<Menu.Divider />
<Menu.Item key="logout" onClick={() => {
confirm({
title: 'Are you sure you want to logout?',
icon: <ExclamationCircleOutlined />,
onOk: (close) => { this.handleLogout(); close(); },
onCancel: () => { },
});
}}>
<span style={{ color: "#d32029" }}>Logout <LogoutOutlined /></span>
</Menu.Item>
</Menu>}
trigger={['click']}>
<div className="buttonHover"
style={{ display: "flex", flexDirection: "column", justifyContent: "center", alignContent: "center", alignItems: "center", height: "13ch", cursor: "pointer", paddingLeft: "2ch", marginBottom: "2vh" }}>
<div style={{ display: "flex", flexDirection: "row", justifyContent: "center", alignContent: "center", alignItems: "center", marginBottom: "1vh" }}>
<h3 style={{ marginRight: "1vw", fontSize: "2.3ch" }}>{this.state.username}</h3>
<Avatar size="large" src={"/static/profile/" + this.state.username + ".webp"} />
</div>
<div>
<h3 style={{ color: "#d89614", fontSize: "2.3ch" }}>{this.state.team !== "teams-disabled" && this.state.team != "loading" && this.state.team ? <b>Team Score:</b> : <b>Score:</b>} {this.state.userScore}</h3>
</div>
</div>
</Dropdown>
<Menu
selectedKeys={[this.state.current]}
onSelect={(selection) => { this.setState({ current: selection.key }) }}
mode="inline"
theme="dark"
> {/*
defaultSelectedKeys - default selected menu items
defaultOpenKeys - default opened sub menus
inline - Sidebar Menu
*/}
<Menu.Item key="" className="menu-item">
<NavLink to="/">
<HomeTwoTone className="menu-item-icon" />
<span>Home</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Challenges" className="menu-item">
<NavLink to="/Challenges">
<FlagTwoTone className="menu-item-icon" />
<span>Challenges</span>
</NavLink>
</Menu.Item>
<Menu.Item key="Scoreboard" className="menu-item">
<NavLink to="/Scoreboard">
<FundTwoTone className="menu-item-icon" />
<span>Scoreboard</span>
</NavLink>
</Menu.Item>
<Menu.Divider />
{this.state.permissions === 1 && (
<Menu.Item key="CreateChallenge" className="menu-item">
<NavLink to="/CreateChallenge">
<PlusSquareTwoTone className="menu-item-icon" twoToneColor="#d89614" />
<span>Create Challenge</span>
</NavLink>
</Menu.Item>
)}
{this.state.permissions === 2 && (
<Menu.Item key="Admin" className="menu-item">
<NavLink to="/Admin">
<CodeTwoTone className="menu-item-icon" twoToneColor="#d32029" />
<span>Admin Panel</span>
</NavLink>
</Menu.Item>
)}
</Menu>
<div style={{ textAlign: "center", marginTop: "3ch", color: "#8c8c8c" }}>
<p>Sieberrsec CTF Platform {ctfxVersion} <a href="https://github.com/IRS-Cybersec/ctf_platform" target="_blank">Contribute <GithubOutlined /></a></p>
</div>
</div>
</Sider>
<Content style={{ height: "100vh", position: "static", overflow: "hidden", margin: "17.5px" }}>
<Route
render={({ location, ...rest }) => (
<Transition
native
items={location.pathname.split("/")[1]}
trail={5}
key={location.pathname.split("/")[1]}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0, display: "none" }}>
{(style, loc) => (
<animated.div style={{ ...style, height: "95vh", overflowY: "auto", backgroundColor: "rgba(0, 0, 0, 0.7)", border: "5px solid transparent", borderRadius: "20px" }}>
<Suspense fallback={<div style={{ height: "100%", width: "100%", display: "flex", justifyContent: "center", alignItems: "center", zIndex: 15 }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Switch>
<Route exact path='/' render={(props) => <Home {...props} transition={style} />} />
<Route path='/Challenges/:categoryChall?' render={(props) => <Challenges {...props} permissions={this.state.permissions} transition={style} obtainScore={this.obtainScore.bind(this)} username={this.state.username} team={this.state.team} />} />
<Route exact path='/Scoreboard' render={(props) => <Scoreboard {...props} handleWebSocket={this.handleWebSocket.bind(this)} transition={style} scoreboardSocket={this.state.scoreboardSocket} />} />
<Route exact path='/Settings' render={(props) => <Settings {...props} transition={style} logout={this.handleLogout.bind(this)} username={this.state.username} />} />
<Route exact path='/Profile/:user?' render={(props) => <Profile {...props} transition={style} username={this.state.username} key={window.location.pathname} />} />
<Route exact path='/Team/:team?' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
<Route exact path='/Team/join/:code' render={(props) => <Teams {...props} transition={style} key={window.location.pathname} team={this.state.team} setTeam={this.setTeam.bind(this)} obtainScore={this.obtainScore.bind(this)} />} />
{this.state.permissions >= 1 ? (
<Route exact path='/CreateChallenge' render={(props) => <UserChallengeCreate {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => { <Oops {...props} transition={style} /> }} />
)}
{this.state.permissions === 2 ? (
<Route path={['/Admin/:tabPane?']} render={(props) => <Admin {...props} transition={style} />} />
) : (
<Route path='/Oops' render={(props) => <Oops {...props} transition={style} />} />
)}
<Route path='/*' render={(props) => <Oops {...props} transition={style} />} />
</Switch>
</Suspense>
</animated.div>
)}
</Transition>
)}
/>
</Content>
</Layout>
</animated.div>
)
}
else {
if (!this.state.loading && !item && !this.state.token) {
return (
<animated.div style={{ ...styles, position: "absolute" }}>
<Suspense fallback={<div className="loading-style">
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</div>}>
<Login handleLogin={this.handleLogin.bind(this)}></Login>
</Suspense>
</animated.div>)
}
else {
return (
<animated.div style={{ ...styles, position: "absolute", height: "100vh", width: "100vw", display: "flex", justifyContent: "center", alignItems: "center", backgroundColor: "rgba(0, 0, 0, 0.95)" }}>
<Ellipsis color="#177ddc" size={120} ></Ellipsis>
</animated.div>
)
}
}
}
}
</Transition>
</div >
);
}
Example #2
| Source File: index.js From quick_redis_blog with MIT License | 4 votes |
|
/**
* 显示右键菜单
*
* @returns
* @memberof ResourceTree
*/
showTreeRightClickMenu() {
let keys = resourceTreeSelectKeys;
// 0:新建连接;1:修改连接;2:删除连接;3:新建目录;4:修改目录;5:删除目录;6:删除;7:打开命令行;8:打开新窗口;9:断开连接;10:新建根目录;11:复制链接
let showMenuItem = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER_ON_ROOT] = 1;
if (typeof keys === "undefined") {
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
} else {
let nodeTypeList = [];
for (let i = 0; i < keys.length; i++) {
let node = this.findNodeByNodeKey(this.props.hosts, keys[i]);
if (node == null || typeof node === "undefined") {
continue;
}
nodeTypeList.push(node.isLeaf);
if (nodeTypeList.length >= 2) {
break;
}
}
if (nodeTypeList.length === 2) {
// 选择了多个类型的节点
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_ALL] = 1;
} else if (nodeTypeList.length === 1) {
let nodeType = nodeTypeList[0];
if (nodeType === false) {
// 文件夹
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_FOLDER] = 1;
} else {
// 连接
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.UPDATE_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DEL_CONN] = 1;
showMenuItem[
HOSTS_TREEE_MENU_TYPE.CREATE_CONN_TERMINAL
] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN_MUTI] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.DISCONNECT_CONN] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.COPY_CONN] = 1;
}
} else {
// 没有选择节点
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_FOLDER] = 1;
showMenuItem[HOSTS_TREEE_MENU_TYPE.CREATE_CONN] = 1;
}
}
return (
<Menu
onClick={this.clickTreeRightClickMenu.bind(this)}
style={{ width: 200 }}
>
{showMenuItem[0] === 1 ? (
<Menu.Item key="0">
<FolderAddTwoTone /> {intl.get("Tree.Menu.CREATE_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[1] === 1 ? (
<Menu.Item key="1">
<EditTwoTone /> {intl.get("Tree.Menu.UPDATE_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[2] === 1 ? (
<Menu.Item key="2">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[3] === 1 ? (
<Menu.Item key="3">
<FolderAddTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[4] === 1 ? (
<Menu.Item key="4">
<EditTwoTone /> {intl.get("Tree.Menu.UPDATE_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[5] === 1 ? (
<Menu.Item key="5">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_FOLDER")}
</Menu.Item>
) : (
""
)}
{showMenuItem[6] === 1 ? (
<Menu.Item key="6">
<DeleteTwoTone /> {intl.get("Tree.Menu.DEL_ALL")}
</Menu.Item>
) : (
""
)}
{showMenuItem[7] === 1 ? (
<Menu.Item key="7">
<CodeTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_CONN_TERMINAL")}
</Menu.Item>
) : (
""
)}
{showMenuItem[8] === 1 ? (
<Menu.Item key="8">
<PlusSquareTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_CONN_MUTI")}
</Menu.Item>
) : (
""
)}
{showMenuItem[9] === 1 ? (
<Menu.Item key="9">
<ApiTwoTone /> {intl.get("Tree.Menu.DISCONNECT_CONN")}
</Menu.Item>
) : (
""
)}
{showMenuItem[10] === 1 ? (
<Menu.Item key="10">
<FolderAddTwoTone />{" "}
{intl.get("Tree.Menu.CREATE_FOLDER_ON_ROOT")}
</Menu.Item>
) : (
""
)}
{showMenuItem[11] === 1 ? (
<Menu.Item key="11">
<CopyTwoTone /> {intl.get("Tree.Menu.COPY_CONN")}
</Menu.Item>
) : (
""
)}
</Menu>
);
}
