From 30e6897d0875a29cf20ad0cc689cdfa78683463a Mon Sep 17 00:00:00 2001 From: jjavierdguezas Date: Mon, 20 Jul 2020 11:13:35 +0200 Subject: [PATCH] a lot of improvements - allow edit custom profiles - improve styles - remove test custom profile --- .../NetworkThrottling/ProfileManager/index.js | 135 +++++++++++++----- .../ProfileManager/styles.css | 51 ++++--- .../app/components/NetworkThrottling/index.js | 4 +- desktop-app/app/reducers/browser.js | 7 - 4 files changed, 137 insertions(+), 60 deletions(-) diff --git a/desktop-app/app/components/NetworkThrottling/ProfileManager/index.js b/desktop-app/app/components/NetworkThrottling/ProfileManager/index.js index 98b6fcef..48aa58e1 100644 --- a/desktop-app/app/components/NetworkThrottling/ProfileManager/index.js +++ b/desktop-app/app/components/NetworkThrottling/ProfileManager/index.js @@ -1,4 +1,4 @@ -import React, {useState, useRef} from 'react'; +import React, {useState} from 'react'; import cx from 'classnames'; import Button from '@material-ui/core/Button'; import Table from '@material-ui/core/Table'; @@ -12,6 +12,7 @@ import CancelOutlinedIcon from '@material-ui/icons/CancelOutlined'; import AddCircleOutlineOutlinedIcon from '@material-ui/icons/AddCircleOutlineOutlined'; import TextField from '@material-ui/core/TextField'; import NumberFormat from 'react-number-format'; +import InputAdornment from '@material-ui/core/InputAdornment'; import commonStyles from '../../common.styles.css'; import styles from './styles.css'; @@ -41,9 +42,9 @@ export default function ProfileManager({ profiles, onSave }) { - const tableRef = useRef(null); const [currentProfiles, updateProfiles] = useState(profiles); const [newElement, setNewElement] = useState({type: 'Custom'}); + const [editModeRows, toggleEditModeRows] = useState({}) const newElementIsInvalid = (newElement.title != null && (newElement.title.trim() == "" || newElement.title.length > 20 || currentProfiles.filter(x => x.title === newElement.title).length !== 0)); @@ -51,8 +52,6 @@ export default function ProfileManager({ if (!newElementIsInvalid && newElement.title != null) { setNewElement({type: 'Custom'}); updateProfiles([...currentProfiles, newElement]); - tableRef.current.scrollTop = 6; - console.log(tableRef.current); } } @@ -60,9 +59,23 @@ export default function ProfileManager({ updateProfiles(currentProfiles.filter(p => p.title !== title)); } + const updateProfile = (title, key, value) => { + const profile = currentProfiles.find(x => x.title === title); + if (profile != null && profile.type === 'Custom') { + profile[key] = value; + updateProfiles([...currentProfiles]); + } + } + + const toggleEditMode = (row) => { + if (row.type !== 'Custom') return; + editModeRows[row.title] = !editModeRows[row.title]; + toggleEditModeRows({...editModeRows}); + } + return (
- + @@ -70,18 +83,66 @@ export default function ProfileManager({ Download Upload Latency - + {currentProfiles.map((row) => ( - + toggleEditMode(row)}> {row.title} - {row.downloadKps} - {row.uploadKps} - {row.latencyMs} + + {row.type !== 'Online' && + updateProfile(row.title, 'downloadKps', e.target.value)} + fullWidth + variant="outlined" + placeholder={row.type !== 'Custom' || !editModeRows[row.title] ? "": "(optional)"} + InputProps={{ + inputComponent: NumberFormatCustom, + endAdornment: Kb/s, + }} + disabled={row.type !== 'Custom' || !editModeRows[row.title]} + /> + } + + + {row.type !== 'Online' && + updateProfile(row.title, 'uploadKps', e.target.value)} + fullWidth + variant="outlined" + placeholder={row.type !== 'Custom' || !editModeRows[row.title] ? "": "(optional)"} + InputProps={{ + inputComponent: NumberFormatCustom, + endAdornment: Kb/s, + }} + disabled={row.type !== 'Custom' || !editModeRows[row.title]} + /> + } + + + {row.type !== 'Online' && + updateProfile(row.title, 'latencyMs', e.target.value)} + fullWidth + variant="outlined" + placeholder={row.type !== 'Custom' || !editModeRows[row.title] ? "": "(optional)"} + InputProps={{ + inputComponent: NumberFormatCustom, + endAdornment: ms, + }} + disabled={row.type !== 'Custom' || !editModeRows[row.title]} + /> + } + {row.type === 'Custom' && removeProfile(row.title)} />} @@ -94,52 +155,56 @@ export default function ProfileManager({ - setNewElement({...newElement, title: e.target.value})} - error={newElementIsInvalid} - fullWidth - variant="outlined" + setNewElement({...newElement, title: e.target.value})} + error={newElementIsInvalid} + fullWidth + variant="outlined" placeholder="New Profile Name" + className={cx(styles.titleField)} /> setNewElement({...newElement, downloadKps: e.target.value})} - fullWidth - variant="outlined" - placeholder="Kb/s (optional)" + className={cx(styles.numericField)} + value={newElement.downloadKps == null ? '' : newElement.downloadKps} + onChange={(e) => setNewElement({...newElement, downloadKps: e.target.value})} + fullWidth + variant="outlined" + placeholder="(optional)" InputProps={{ inputComponent: NumberFormatCustom, + endAdornment: Kb/s, }} /> setNewElement({...newElement, uploadKps: e.target.value})} - fullWidth - variant="outlined" - placeholder="Kb/s (optional)" + className={cx(styles.numericField)} + value={newElement.uploadKps == null ? '' : newElement.uploadKps} + onChange={(e) => setNewElement({...newElement, uploadKps: e.target.value})} + fullWidth + variant="outlined" + placeholder="(optional)" InputProps={{ inputComponent: NumberFormatCustom, + endAdornment: Kb/s, }} /> setNewElement({...newElement, latencyMs: e.target.value})} - fullWidth - variant="outlined" - placeholder="ms (optional)" + className={cx(styles.numericField)} + value={newElement.latencyMs == null ? '' : newElement.latencyMs} + onChange={(e) => setNewElement({...newElement, latencyMs: e.target.value})} + fullWidth + variant="outlined" + placeholder="(optional)" InputProps={{ inputComponent: NumberFormatCustom, + endAdornment: ms, }} /> diff --git a/desktop-app/app/components/NetworkThrottling/ProfileManager/styles.css b/desktop-app/app/components/NetworkThrottling/ProfileManager/styles.css index 5cbd31fc..94fa7993 100644 --- a/desktop-app/app/components/NetworkThrottling/ProfileManager/styles.css +++ b/desktop-app/app/components/NetworkThrottling/ProfileManager/styles.css @@ -1,39 +1,58 @@ .profileManagerContainer { - height: 600px; - padding: 20px; + height: 600px; + padding: 20px; } .profilesContainer { - max-height: 430px; - overflow-y: auto; - flex-grow: 1; + max-height: 430px; + overflow-y: auto; + flex-grow: 1; } .profilesHeader > tr > th { - font-size: 20px; - font-weight: bold; + font-size: 20px; + font-weight: bold; +} + +.profilesRow > th, +td { + padding-right: 16px !important; } .profilesRow > th { - margin-right: 16px; + cursor: default; +} +.profilesRow > th.customProfile { + cursor: pointer; } .actionIcon { - pointer-events: all; - cursor: pointer; - color: white; + pointer-events: all; + cursor: pointer; + color: white; } .actionIcon:hover { - color: #6075ef; + color: #6075ef; } .saveButton { - position: absolute !important; - bottom: 25px; - right: 25px; + position: absolute !important; + bottom: 25px; + right: 25px; } .numericField * { - text-align: right; + text-align: right; + font-size: 14px !important; +} +.numericFieldDisabled fieldset { + border: 0 !important; +} +.numericFieldDisabled input { + color: white !important; +} + +.titleField * { + font-size: 14px !important; } diff --git a/desktop-app/app/components/NetworkThrottling/index.js b/desktop-app/app/components/NetworkThrottling/index.js index c0bf0261..65dc8738 100644 --- a/desktop-app/app/components/NetworkThrottling/index.js +++ b/desktop-app/app/components/NetworkThrottling/index.js @@ -29,7 +29,7 @@ const selectStyles = { ? '#ffffff20' : null, color: 'white', - + ':active': { ...selectStyles[':active'], backgroundColor: !isDisabled && '#ffffff40', @@ -102,7 +102,7 @@ export default function NetworkThrottling({ component="span" onClick={() => setOpen(true)} > - Customize Profiles + Manage Profiles diff --git a/desktop-app/app/reducers/browser.js b/desktop-app/app/reducers/browser.js index 35331120..fe12abf5 100644 --- a/desktop-app/app/reducers/browser.js +++ b/desktop-app/app/reducers/browser.js @@ -278,13 +278,6 @@ function getDefaultNetworkThrottlingProfiles(): NetworkThrottlingProfileType[] { downloadKps: 1475, uploadKps: 675, latencyMs: 563 - }, - { - type: 'Custom', - title: 'Modem 56K', - downloadKps: 56, - uploadKps: 56, - latencyMs: 2000 } ] }