15308555518/ frontend
1
0
Fork 0
mirror of https://github.com/cloudreve/frontend.git synced 2025-12-25 19:52:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Feat: icon transition in switch buttons

This commit is contained in:
HFO4 2021-03-09 14:56:16 +08:00
parent d77f67fb62
commit ff0e2627dc
3 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/component/Modals/CreateShare.js
View File

@ -38,6 +38,8 @@ import OutlinedInput from "@material-ui/core/OutlinedInput";
import Tooltip from "@material-ui/core/Tooltip";
import MenuItem from "@material-ui/core/MenuItem";
import Select from "@material-ui/core/Select";
import EyeIcon from "@material-ui/icons/RemoveRedEye";
import ToggleIcon from "material-ui-toggle-icon";
const useStyles = makeStyles(theme => ({
widthAnimation: {},
@ -296,11 +298,13 @@ export default function CreatShare(props) {
}
edge="end"
>
{values.showPassword ? (
<Visibility />
) : (
<VisibilityOff />
)}
<ToggleIcon
on={values.showPassword}
onIcon={<Visibility />}
offIcon={
<VisibilityOff />
}
/>
</IconButton>
</InputAdornment>
}

10
src/component/Navbar/StorageBar.js
View File

@ -146,11 +146,11 @@ class StorageBarCompoment extends Component {
<div className={classes.info}>
<Tooltip
title={
"已使用" +
"已使用 " +
(this.state.used === null
? " -- "
: this.state.used) +
"，共" +
", 共 " +
(this.state.total === null
? " -- "
: this.state.total)
@ -162,14 +162,10 @@ class StorageBarCompoment extends Component {
noWrap
color="textSecondary"
>
已使用
已使用{" "}
{this.state.used === null
? " -- "
: this.state.used}
，共
{this.state.total === null
? " -- "
: this.state.total}
</Typography>
</Tooltip>
</div>

35
src/component/Share/MyShare.js
View File

@ -35,6 +35,7 @@ import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import { withRouter } from "react-router-dom";
import ToggleIcon from "material-ui-toggle-icon";
const styles = theme => ({
cardContainer: {
@ -376,7 +377,7 @@ class MyShareCompoment extends Component {
)
}
>
<OpenIcon />
<OpenIcon fontSize={"small"} />
</IconButton>
</Tooltip>{" "}
{value.password !== "" && (
@ -391,7 +392,9 @@ class MyShareCompoment extends Component {
}
>
<IconButton>
<LockIcon />
<LockIcon
fontSize={"small"}
/>
</IconButton>
</Tooltip>
<Tooltip
@ -402,7 +405,9 @@ class MyShareCompoment extends Component {
}
>
<IconButton>
<VpnKey />
<VpnKey
fontSize={"small"}
/>
</IconButton>
</Tooltip>
</>
@ -416,7 +421,9 @@ class MyShareCompoment extends Component {
}
>
<IconButton>
<UnlockIcon />
<UnlockIcon
fontSize={"small"}
/>
</IconButton>
</Tooltip>
)}
@ -432,11 +439,19 @@ class MyShareCompoment extends Component {
}
>
<IconButton>
{!value.preview ? (
<VisibilityOff />
) : (
<EyeIcon />
)}
<ToggleIcon
on={value.preview}
onIcon={
<EyeIcon
fontSize={"small"}
/>
}
offIcon={
<VisibilityOff
fontSize={"small"}
/>
}
/>
</IconButton>
</Tooltip>
<Tooltip
@ -447,7 +462,7 @@ class MyShareCompoment extends Component {
}
>
<IconButton>
<DeleteIcon />
<DeleteIcon fontSize={"small"} />
</IconButton>
</Tooltip>
</CardActions>