diff --git a/src/components/APIConfig.js b/src/components/APIConfig.js index 5746040..e31683c 100644 --- a/src/components/APIConfig.js +++ b/src/components/APIConfig.js @@ -58,7 +58,7 @@ function APIConfig2() { tabIndex="1" onKeyDown={handleContentOnKeyDown} > -
RESTful API config for Clash
+
Clash External Controller Config
Hostname and Port
diff --git a/src/components/APIConfig.module.scss b/src/components/APIConfig.module.scss index 0edf1b6..cba61e8 100644 --- a/src/components/APIConfig.module.scss +++ b/src/components/APIConfig.module.scss @@ -16,7 +16,7 @@ .inputs { display: flex; align-items: center; - div:nth-child(2) { + input:nth-child(2) { width: 120px; margin-left: 10px; } diff --git a/src/components/APIDiscovery.js b/src/components/APIDiscovery.js index 0fdd126..c94719f 100644 --- a/src/components/APIDiscovery.js +++ b/src/components/APIDiscovery.js @@ -7,6 +7,8 @@ import APIConfig from 'c/APIConfig'; import { closeModal } from 'd/modals'; import { fetchConfigs } from 'd/configs'; +import s0 from './APIDiscovery.module.scss'; + const mapStateToProps = s => ({ modals: s.modals }); @@ -26,6 +28,8 @@ export default function APIDiscovery() { return ( closeModal('apiConfig')} diff --git a/src/components/APIDiscovery.module.scss b/src/components/APIDiscovery.module.scss new file mode 100644 index 0000000..b1e970c --- /dev/null +++ b/src/components/APIDiscovery.module.scss @@ -0,0 +1,7 @@ +.content { + background: none; +} + +.overlay { + background: #222; +} diff --git a/src/components/Button.module.scss b/src/components/Button.module.scss index 22214d5..37ea289 100644 --- a/src/components/Button.module.scss +++ b/src/components/Button.module.scss @@ -1,12 +1,15 @@ .btn { -webkit-appearance: none; outline: none; - color: #ddd; - background: #606060; + color: #bebebe; + background: #232323; border: 1px solid #555; border-radius: 100px; padding: 6px 12px; &:hover { - background: darken(#555, 3%); + background: #387cec; + border: 1px solid #387cec; + color: #fff; + // background: darken(#555, 3%); } } diff --git a/src/components/Modal.js b/src/components/Modal.js index 19accdc..a9b1951 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -1,17 +1,26 @@ import React from 'react'; import PropTypes from 'prop-types'; import Modal from 'react-modal'; +import cx from 'classnames'; import s0 from './Modal.module.scss'; -function ModalAPIConfig({ isOpen, onRequestClose, children, ...otherProps }) { +function ModalAPIConfig({ + isOpen, + onRequestClose, + className, + overlayClassName, + children, + ...otherProps +}) { + const contentCls = cx(className, s0.content); + const overlayCls = cx(overlayClassName, s0.overlay); return ( {children} @@ -22,7 +31,9 @@ function ModalAPIConfig({ isOpen, onRequestClose, children, ...otherProps }) { ModalAPIConfig.propTypes = { isOpen: PropTypes.bool.isRequired, onRequestClose: PropTypes.func.isRequired, - children: PropTypes.node.isRequired + children: PropTypes.node.isRequired, + className: PropTypes.string, + overlayClassName: PropTypes.string }; export default React.memo(ModalAPIConfig); diff --git a/src/components/Root.scss b/src/components/Root.scss index 243604f..7a0a5a0 100644 --- a/src/components/Root.scss +++ b/src/components/Root.scss @@ -61,8 +61,9 @@ } body { - font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', - 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, + Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + 'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; margin: 0; padding: 0; } diff --git a/src/ducks/configs.js b/src/ducks/configs.js index 11f80df..0edc8e0 100644 --- a/src/ducks/configs.js +++ b/src/ducks/configs.js @@ -3,16 +3,13 @@ import { openModal } from 'd/modals'; import * as trafficAPI from 'a/traffic'; const CompletedFetchConfigs = 'configs/CompletedFetchConfigs'; -const OptimisticUpdateConfigs = 'proxies/OptimisticUpdateConfigs'; +const OptimisticUpdateConfigs = 'configs/OptimisticUpdateConfigs'; +const MarkHaveFetchedConfig = 'configs/MarkHaveFetchedConfig'; export const getConfigs = s => s.configs; -// maybe we should put this flag in the redux store -// but since is not related a UI element and only make sense to this chunk -// of code, I'm going to leave it here -let successfullyFetchedConfigsBefore = false; export function fetchConfigs() { - return async dispatch => { + return async (dispatch, getState) => { let res; try { res = await configsAPI.fetchConfigs(); @@ -41,13 +38,24 @@ export function fetchConfigs() { payload }); - // side effect - if (successfullyFetchedConfigsBefore === false) { - successfullyFetchedConfigsBefore = true; + const configsCurr = getConfigs(getState()); + + if (configsCurr.haveFetchedConfig) { // normally user will land on the "traffic chart" page first // calling this here will let the data start streaming // the traffic chart should already subscribed to the streaming trafficAPI.fetchData(); + } else { + dispatch(markHaveFetchedConfig()); + } + }; +} + +function markHaveFetchedConfig() { + return { + type: MarkHaveFetchedConfig, + payload: { + haveFetchedConfig: true } }; } @@ -91,15 +99,15 @@ const initialState = { 'redir-port': 0, 'allow-lan': false, mode: 'Rule', - 'log-level': 'info' + 'log-level': 'info', ///// + haveFetchedConfig: false }; export default function reducer(state = initialState, { type, payload }) { switch (type) { - // case CompletedRequestDelayForProxy: - // case OptimisticSwitchProxy: + case MarkHaveFetchedConfig: case OptimisticUpdateConfigs: case CompletedFetchConfigs: { return { ...state, ...payload };