style(proxies): tweak proxy hover style

This commit is contained in:
Haishan 2019-01-02 22:33:05 +08:00
parent be029ded16
commit 761e25f1ea
4 changed files with 16 additions and 31 deletions

View file

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import cx from 'classnames';
import { useStoreState } from 'm/store'; import { useStoreState } from 'm/store';
import Icon from 'c/Icon'; import Icon from 'c/Icon';
@ -49,18 +48,15 @@ const mapStateToProps = s => {
}; };
}; };
function Proxy({ now, name, isSelectable }) { function Proxy({ now, name }) {
const { proxies, delay } = useStoreState(mapStateToProps); const { proxies, delay } = useStoreState(mapStateToProps);
const latency = delay[name]; const latency = delay[name];
const proxy = proxies[name]; const proxy = proxies[name];
const color = now ? colors[proxy.type] : '#555'; const color = now ? colors[proxy.type] : '#555';
const iconId = icons[proxy.type]; const iconId = icons[proxy.type];
const proxyClassName = cx(s0.proxy, {
[s0.proxyNotSelectable]: !isSelectable
});
return ( return (
<div className={proxyClassName}> <div className={s0.proxy}>
<div className={s0.left} style={{ color }}> <div className={s0.left} style={{ color }}>
<Icon id={iconId} width={80} height={80} /> <Icon id={iconId} width={80} height={80} />
</div> </div>
@ -73,8 +69,7 @@ function Proxy({ now, name, isSelectable }) {
} }
Proxy.propTypes = { Proxy.propTypes = {
now: PropTypes.bool, now: PropTypes.bool,
name: PropTypes.string, name: PropTypes.string
isSelectable: PropTypes.bool
}; };
export default Proxy; export default Proxy;

View file

@ -1,27 +1,5 @@
.proxy { .proxy {
display: flex; display: flex;
cursor: pointer;
svg {
transition: transform 0.4s ease, color 0.4s ease;
}
&:hover {
svg {
transform: scale(1.1);
color: #aaa;
}
}
}
.proxyNotSelectable {
// cursor: not-allowed;
cursor: auto;
&:hover {
svg {
transform: initial;
color: currentcolor;
}
}
} }
.left { .left {

View file

@ -1,5 +1,6 @@
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import cx from 'classnames';
import { useActions, useStoreState } from 'm/store'; import { useActions, useStoreState } from 'm/store';
import Proxy from 'c/Proxy'; import Proxy from 'c/Proxy';
@ -43,9 +44,12 @@ export default function ProxyGroup2({ name }) {
<div className={s0.list}> <div className={s0.list}>
{list.map(proxyName => { {list.map(proxyName => {
const isSelectable = group.type === 'Selector'; const isSelectable = group.type === 'Selector';
const proxyClassName = cx(s0.proxy, {
[s0.proxySelectable]: isSelectable
});
return ( return (
<div <div
className={s0.proxy} className={proxyClassName}
key={proxyName} key={proxyName}
onClick={() => { onClick={() => {
if (!isSelectable) return; if (!isSelectable) return;

View file

@ -17,4 +17,12 @@
.proxy { .proxy {
width: 300px; width: 300px;
padding: 10px 5px; padding: 10px 5px;
transition: transform 0.4s ease;
// transition: transform 0.4s ease, color 0.4s ease;
&.proxySelectable {
cursor: pointer;
&:hover {
transform: scale(1.1);
}
}
} }