mirrors/TidGi-Desktop
1
Fork 0
mirror of https://github.com/tiddly-gittly/TidGi-Desktop.git synced 2026-03-14 10:42:51 -07:00
Code Issues Projects Releases Packages Wiki Activity

Improve preferences UI/UX (#237)

Browse source
This commit is contained in:
Quang Lam 2020-05-10 14:29:02 +07:00 • committed by GitHub
parent 0b6cefd300
commit bdbab640f5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 128 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

2
PRIVACY.md
View file

@ -25,4 +25,4 @@ Our websites use:
---
This privacy policy is subject to change without notice and was last updated on March 10, 2019. If you have any questions feel free to [create a GitHub issue](https://github.com/atomery/singlebox/issues) or contact us via [contact@atomery.com](mailto:contact@atomery.com).
This privacy policy is subject to change without notice and was last updated on April 27, 2019. If you have any questions feel free to [create a GitHub issue](https://github.com/atomery/singlebox/issues) or contact us via [contact@atomery.com](mailto:contact@atomery.com).

2
package.json
View file

@ -46,6 +46,7 @@
"@material-ui/core": "4.9.13",
"@material-ui/icons": "4.9.1",
"@material-ui/pickers": "3.2.10",
"ace-builds": "1.4.11",
"algoliasearch": "4.2.0",
"babel-eslint": "10.1.0",
"babel-preset-env": "1.7.0",
@ -66,6 +67,7 @@
"eslint-plugin-react-hooks": "1.7.0",
"prop-types": "15.7.2",
"react": "16.13.1",
"react-ace": "8.1.0",
"react-dom": "16.13.1",
"react-redux": "7.2.0",
"react-scripts": "3.4.1",

4
public/windows/code-injection.js
View file

@ -19,8 +19,8 @@ const create = (type) => {
global.codeInjectionType = type;
win = new BrowserWindow({
width: 400,
height: 350,
width: 640,
height: 560,
resizable: false,
maximizable: false,
minimizable: false,

54
src/components/dialog-code-injection/index.js
View file

@ -2,7 +2,13 @@ import React from 'react';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import AceEditor from 'react-ace';
import 'ace-builds/src-noconflict/mode-css';
import 'ace-builds/src-noconflict/mode-javascript';
import 'ace-builds/src-noconflict/theme-github';
import 'ace-builds/src-noconflict/theme-monokai';
import connectComponent from '../../helpers/connect-component';
@ -13,42 +19,50 @@ const styles = (theme) => ({
background: theme.palette.background.paper,
height: '100vh',
width: '100vw',
padding: theme.spacing(2),
padding: 0,
display: 'flex',
flexDirection: 'column',
},
flexGrow: {
flex: 1,
},
actions: {
borderTop: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2),
},
button: {
float: 'right',
marginLeft: theme.spacing(1),
},
});
const getMode = () => {
const codeInjectionType = window.require('electron').remote.getGlobal('codeInjectionType');
if (codeInjectionType === 'css') return 'css';
if (codeInjectionType === 'js') return 'javascript';
return '';
};
const CodeInjection = ({
classes, code, onUpdateForm, onSave,
classes,
code,
onSave,
onUpdateForm,
shouldUseDarkColors,
}) => (
<div className={classes.root}>
<div className={classes.flexGrow}>
<TextField
autoFocus
id="outlined-full-width"
label="Code"
placeholder=""
fullWidth
margin="dense"
variant="outlined"
multiline
rows="12"
InputLabelProps={{
shrink: true,
}}
<AceEditor
mode={getMode()}
theme={shouldUseDarkColors ? 'monokai' : 'github'}
height="100%"
width="100%"
name="codeEditor"
value={code}
onChange={(e) => onUpdateForm({ code: e.target.value })}
onChange={(value) => onUpdateForm({ code: value })}
/>
</div>
<div>
<div className={classes.actions}>
<Button color="primary" variant="contained" disableElevation className={classes.button} onClick={onSave}>
Save
</Button>
@ -62,12 +76,14 @@ const CodeInjection = ({
CodeInjection.propTypes = {
classes: PropTypes.object.isRequired,
code: PropTypes.string.isRequired,
onUpdateForm: PropTypes.func.isRequired,
onSave: PropTypes.func.isRequired,
onUpdateForm: PropTypes.func.isRequired,
shouldUseDarkColors: PropTypes.bool.isRequired,
};
const mapStateToProps = (state) => ({
code: state.dialogCodeInjection.form.code || '',
shouldUseDarkColors: state.general.shouldUseDarkColors,
});
const actionCreators = {

97
src/components/dialog-preferences/index.js
View file

@ -432,41 +432,6 @@ const Preferences = ({
/>
</ListItemSecondaryAction>
</ListItem>
{window.process.platform === 'darwin' && (
<>
<Divider />
<ListItem>
<ListItemText
primary="Swipe to navigate"
secondary={(
<>
<span>Navigate between pages with 3-finger gestures.</span>
<br />
<span>To enable it, you also need to change </span>
<b>
macOS Preferences &gt; Trackpad &gt; More Gestures &gt; Swipe between page
</b>
<span> to </span>
<b>Swipe with three fingers</b>
<span> or </span>
<b>Swipe with two or three fingers.</b>
</>
)}
/>
<ListItemSecondaryAction>
<Switch
edge="end"
color="primary"
checked={swipeToNavigate}
onChange={(e) => {
requestSetPreference('swipeToNavigate', e.target.checked);
requestShowRequireRestartDialog();
}}
/>
</ListItemSecondaryAction>
</ListItem>
</>
)}
</List>
</Paper>
@ -788,6 +753,32 @@ const Preferences = ({
/>
<ChevronRightIcon color="action" />
</ListItem>
<Divider />
<ListItem>
<ListItemText
secondary={(
<>
<span>WebCatalog supports notifications out of the box. </span>
<span>But for some web apps, to receive notifications, </span>
<span>you will need to manually configure additional </span>
<span>web app settings. </span>
<span
role="link"
tabIndex={0}
className={classes.link}
onClick={() => requestOpenInBrowser('https://github.com/atomery/webcatalog/wiki/How-to-Enable-Notifications-in-Web-Apps')}
onKeyDown={(e) => {
if (e.key !== 'Enter') return;
requestOpenInBrowser('https://github.com/atomery/webcatalog/wiki/How-to-Enable-Notifications-in-Web-Apps');
}}
>
Learn more
</span>
<span>.</span>
</>
)}
/>
</ListItem>
</List>
</Paper>
@ -1066,6 +1057,42 @@ const Preferences = ({
/>
</ListItemSecondaryAction>
</ListItem>
{window.process.platform === 'darwin' && (
<>
<Divider />
<ListItem>
<ListItemText
primary="Swipe with three fingers to navigate"
secondary={(
<>
<span>Navigate between pages with 3-finger gestures. </span>
<span>Swipe left to go back or swipe right to go forward.</span>
<br />
<span>To enable it, you also need to change </span>
<b>
macOS Preferences &gt; Trackpad &gt; More Gestures &gt; Swipe between page
</b>
<span> to </span>
<b>Swipe with three fingers</b>
<span> or </span>
<b>Swipe with two or three fingers.</b>
</>
)}
/>
<ListItemSecondaryAction>
<Switch
edge="end"
color="primary"
checked={swipeToNavigate}
onChange={(e) => {
requestSetPreference('swipeToNavigate', e.target.checked);
requestShowRequireRestartDialog();
}}
/>
</ListItemSecondaryAction>
</ListItem>
</>
)}
<Divider />
<ListItem button onClick={requestShowCustomUserAgentWindow}>
<ListItemText

26
yarn.lock
View file

@ -2369,6 +2369,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
mime-types "~2.1.24"
negotiator "0.6.2"
ace-builds@1.4.11, ace-builds@^1.4.6:
version "1.4.11"
resolved "https://registry.yarnpkg.com/ace-builds/-/ace-builds-1.4.11.tgz#b1f19a891afcef1d26522473082baf80067e855f"
integrity sha512-keACH1d7MvAh72fE/us36WQzOFQPJbHphNpj33pXwVZOM84pTWcdFzIAvngxOGIGLTm7gtUP2eJ4Ku6VaPo8bw==
acorn-globals@^4.1.0, acorn-globals@^4.3.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.4.tgz#9fa1926addc11c97308c4e66d7add0d40c3272e7"
@ -5203,6 +5208,11 @@ detect-port-alt@1.1.6:
address "^1.0.1"
debug "^2.6.0"
diff-match-patch@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.4.tgz#6ac4b55237463761c4daf0dc603eb869124744b1"
integrity sha512-Uv3SW8bmH9nAtHKaKSanOQmj2DnlH65fUpcrMdfdaOxUG02QQ4YGZ8AE7kKOMisF7UqvOlGKVYWRvezdncW9lg==
diff-sequences@^24.9.0:
version "24.9.0"
resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-24.9.0.tgz#5715d6244e2aa65f48bba0bc972db0b0b11e95b5"
@ -8818,6 +8828,11 @@ lodash._reinterpolate@^3.0.0:
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
lodash.get@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
lodash.isequal@^4.5.0:
version "4.5.0"
resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@ -11153,6 +11168,17 @@ rc@^1.2.8:
minimist "^1.2.0"
strip-json-comments "~2.0.1"
react-ace@8.1.0:
version "8.1.0"
resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-8.1.0.tgz#6680accb7306a1850e6ef4370a00f0007eadc8b4"
integrity sha512-n3rm9gRNZjLGlXJQ587RASOQCPn6WlcV2gjRYwvG3gyVpBf4pY6lh/uI9tDkx2zYdEKJUfnGbTmzEGL5yyDWuw==
dependencies:
ace-builds "^1.4.6"
diff-match-patch "^1.0.4"
lodash.get "^4.4.2"
lodash.isequal "^4.5.0"
prop-types "^15.7.2"
react-app-polyfill@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/react-app-polyfill/-/react-app-polyfill-1.0.6.tgz#890f8d7f2842ce6073f030b117de9130a5f385f0"