From 57f6216ed8f0191131ad5ff45636b74fb55e10a3 Mon Sep 17 00:00:00 2001 From: Matt Huggins Date: Wed, 1 Aug 2018 23:58:39 -0500 Subject: [PATCH 1/5] feat(settings): sidebar navigation --- package.json | 1 + .../settings/components/Settings/Settings.js | 49 +++++++++++++++---- .../components/Settings/Settings.scss | 32 +++++++++++- .../components/SidebarLink/SidebarLink.js | 17 +++++++ .../components/SidebarLink/SidebarLink.scss | 31 ++++++++++++ .../settings/components/SidebarLink/index.js | 1 + src/renderer/shared/components/Page/Page.js | 12 ++--- yarn.lock | 11 +++++ 8 files changed, 135 insertions(+), 19 deletions(-) create mode 100644 src/renderer/settings/components/SidebarLink/SidebarLink.js create mode 100644 src/renderer/settings/components/SidebarLink/SidebarLink.scss create mode 100644 src/renderer/settings/components/SidebarLink/index.js diff --git a/package.json b/package.json index d40c237b1..1dd53c8da 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "react-dom": "16.4.2", "react-redux": "5.0.7", "react-router-dom": "4.3.1", + "react-scroll": "1.7.10", "recharts": "1.1.0", "recompose": "0.28.2", "redux": "3.7.2", diff --git a/src/renderer/settings/components/Settings/Settings.js b/src/renderer/settings/components/Settings/Settings.js index 7021c8671..bcfc43f51 100644 --- a/src/renderer/settings/components/Settings/Settings.js +++ b/src/renderer/settings/components/Settings/Settings.js @@ -1,19 +1,50 @@ import React from 'react'; +import { Element, scrollSpy } from 'react-scroll'; import Page from 'shared/components/Page'; import Panel from 'shared/components/Panel'; import GeneralSettings from '../GeneralSettings'; import NetworkSettings from '../NetworkSettings'; +import SidebarLink from '../SidebarLink'; import styles from './Settings.scss'; -export default function Settings() { - return ( - - - - - - - ); +export default class Settings extends React.PureComponent { + componentDidMount() { + scrollSpy.update(); + } + + render() { + return ( +
+ + +
+
    +
  • + + General + +
    • +
  • + + Network + +
    • +
+
+ +
+ + + + + + +
+ + +
+ ); + } } diff --git a/src/renderer/settings/components/Settings/Settings.scss b/src/renderer/settings/components/Settings/Settings.scss index 91ab40f5d..490fb9363 100644 --- a/src/renderer/settings/components/Settings/Settings.scss +++ b/src/renderer/settings/components/Settings/Settings.scss @@ -1,7 +1,35 @@ .settings { - padding: 24px; + position: relative; + height: 100%; + overflow-y: auto; + + .page { + padding: 24px; + } .panel { - padding: 0 40px 20px; + display: flex; + + .sidebar { + flex: 0 0 auto; + } + + .content { + flex: 1 1 auto; + } + } + + .sidebar { + width: 170px; + box-shadow: inset -1px 0px 0px #d7d8de; + + ul { + list-style: none; + margin: 0; + } + } + + .content { + padding: 0 40px; } } diff --git a/src/renderer/settings/components/SidebarLink/SidebarLink.js b/src/renderer/settings/components/SidebarLink/SidebarLink.js new file mode 100644 index 000000000..a896cf7c8 --- /dev/null +++ b/src/renderer/settings/components/SidebarLink/SidebarLink.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { Link } from 'react-scroll'; + +import styles from './SidebarLink.scss'; + +export default function SidebarLink(props) { + return ( + + ); +} diff --git a/src/renderer/settings/components/SidebarLink/SidebarLink.scss b/src/renderer/settings/components/SidebarLink/SidebarLink.scss new file mode 100644 index 000000000..0a25dfac3 --- /dev/null +++ b/src/renderer/settings/components/SidebarLink/SidebarLink.scss @@ -0,0 +1,31 @@ +.sidebarLink { + display: block; + height: 42px; + line-height: 42px; + padding: 0 16px; + color: $light-text-color; + font-size: 14px; + font-weight: 500; + text-decoration: none; + cursor: pointer; + -webkit-font-smoothing: antialiased; + + &.active, + &:hover { + color: $dark-text-color; + } + + &.active { + position: relative; + + &:after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 2px; + background: linear-gradient(0deg, #b9d532 0%, #5bba47 100%); + } + } +} diff --git a/src/renderer/settings/components/SidebarLink/index.js b/src/renderer/settings/components/SidebarLink/index.js new file mode 100644 index 000000000..25ac7298e --- /dev/null +++ b/src/renderer/settings/components/SidebarLink/index.js @@ -0,0 +1 @@ +export { default } from './SidebarLink'; diff --git a/src/renderer/shared/components/Page/Page.js b/src/renderer/shared/components/Page/Page.js index 6951a0c5c..4e3c039d9 100644 --- a/src/renderer/shared/components/Page/Page.js +++ b/src/renderer/shared/components/Page/Page.js @@ -1,23 +1,19 @@ import React from 'react'; import classNames from 'classnames'; -import { string, node } from 'prop-types'; +import { string } from 'prop-types'; import styles from './Page.scss'; export default function Page(props) { return ( -
- {props.children} -
+
); } Page.propTypes = { - className: string, - children: node + className: string }; Page.defaultProps = { - className: null, - children: null + className: null }; diff --git a/yarn.lock b/yarn.lock index e79b2c5c1..bdbf5254b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5843,6 +5843,10 @@ lodash.tail@^4.1.1: version "4.1.1" resolved "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz#d2333a36d9e7717c8ad2f7cacafec7c32b444664" +lodash.throttle@^4.1.1: + version "4.1.1" + resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4" + lodash.uniq@^4.5.0: version "4.5.0" resolved "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" @@ -7853,6 +7857,13 @@ react-router@^4.3.1: prop-types "^15.6.1" warning "^4.0.1" +react-scroll@1.7.10: + version "1.7.10" + resolved "https://registry.npmjs.org/react-scroll/-/react-scroll-1.7.10.tgz#b59cfa11a899a362c6489607ed5865c9c5fd0b53" + dependencies: + lodash.throttle "^4.1.1" + prop-types "^15.5.8" + react-smooth@1.0.0: version "1.0.0" resolved "https://registry.npmjs.org/react-smooth/-/react-smooth-1.0.0.tgz#b29dbebddddb06d21b5b08962167fb9eac1897d8" From e81518c57be9a7ef8ddb48b0027f352665eb0d5f Mon Sep 17 00:00:00 2001 From: Matt Huggins Date: Thu, 2 Aug 2018 08:29:37 -0500 Subject: [PATCH 2/5] chore(sidebar): make sidebar sticky when scrolling --- package.json | 1 + .../settings/components/Settings/Settings.js | 35 +++++++++++-------- yarn.lock | 9 ++++- 3 files changed, 29 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 1dd53c8da..24f29fc1b 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-redux": "5.0.7", "react-router-dom": "4.3.1", "react-scroll": "1.7.10", + "react-sticky": "6.0.3", "recharts": "1.1.0", "recompose": "0.28.2", "redux": "3.7.2", diff --git a/src/renderer/settings/components/Settings/Settings.js b/src/renderer/settings/components/Settings/Settings.js index bcfc43f51..3f35b8441 100644 --- a/src/renderer/settings/components/Settings/Settings.js +++ b/src/renderer/settings/components/Settings/Settings.js @@ -1,5 +1,6 @@ import React from 'react'; import { Element, scrollSpy } from 'react-scroll'; +import { StickyContainer, Sticky } from 'react-sticky'; import Page from 'shared/components/Page'; import Panel from 'shared/components/Panel'; @@ -16,22 +17,26 @@ export default class Settings extends React.PureComponent { render() { return ( -
- + +
-
    -
  • - - General - -
    • -
  • - - Network - -
    • -
+ + {({ style }) => ( +
    +
  • + + General + +
    • +
  • + + Network + +
    • +
+ )} +
@@ -44,7 +49,7 @@ export default class Settings extends React.PureComponent {
-
+ ); } } diff --git a/yarn.lock b/yarn.lock index bdbf5254b..f0bf9e7be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7656,7 +7656,7 @@ quick-lru@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8" -raf@^3.2.0, raf@^3.4.0: +raf@^3.2.0, raf@^3.3.0, raf@^3.4.0: version "3.4.0" resolved "https://registry.npmjs.org/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575" dependencies: @@ -7873,6 +7873,13 @@ react-smooth@1.0.0: raf "^3.2.0" react-transition-group "^2.2.1" +react-sticky@6.0.3: + version "6.0.3" + resolved "https://registry.npmjs.org/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4" + dependencies: + prop-types "^15.5.8" + raf "^3.3.0" + react-test-renderer@^16.0.0-0: version "16.4.1" resolved "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70" From c182c771c78aa3e9e6bb9132074c665544133010 Mon Sep 17 00:00:00 2001 From: Matt Huggins Date: Thu, 2 Aug 2018 15:23:12 -0500 Subject: [PATCH 3/5] feat(settings): responsive sidebar navigation --- src/renderer/settings/components/Settings/Settings.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/renderer/settings/components/Settings/Settings.scss b/src/renderer/settings/components/Settings/Settings.scss index 490fb9363..79737cb64 100644 --- a/src/renderer/settings/components/Settings/Settings.scss +++ b/src/renderer/settings/components/Settings/Settings.scss @@ -32,4 +32,10 @@ .content { padding: 0 40px; } + + @media only screen and (max-width: $responsive-width) { + .sidebar { + display: none; + } + } } From b4fae148f4f7bafe17ba371f95fbcfb3ab501b48 Mon Sep 17 00:00:00 2001 From: Matt Huggins Date: Fri, 17 Aug 2018 20:18:11 -0500 Subject: [PATCH 4/5] feat(settings): stick sidebar at correct y-offset --- .../components/GeneralSettings/GeneralSettings.scss | 1 + .../components/SectionContent/SectionContent.scss | 2 +- .../settings/components/Settings/Settings.js | 13 +++++++++++-- 3 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/renderer/settings/components/GeneralSettings/GeneralSettings.scss b/src/renderer/settings/components/GeneralSettings/GeneralSettings.scss index 48532fff9..4cf8f6e8d 100644 --- a/src/renderer/settings/components/GeneralSettings/GeneralSettings.scss +++ b/src/renderer/settings/components/GeneralSettings/GeneralSettings.scss @@ -2,6 +2,7 @@ .input { display: flex; align-items: center; + margin-bottom: 0; .label { flex: 0 1 230px; diff --git a/src/renderer/settings/components/SectionContent/SectionContent.scss b/src/renderer/settings/components/SectionContent/SectionContent.scss index 79a88886a..d1e6b0ee9 100644 --- a/src/renderer/settings/components/SectionContent/SectionContent.scss +++ b/src/renderer/settings/components/SectionContent/SectionContent.scss @@ -1,5 +1,5 @@ .sectionContent { - margin-bottom: 40px; + padding-bottom: 40px; color: #494759; font-size: 14px; } diff --git a/src/renderer/settings/components/Settings/Settings.js b/src/renderer/settings/components/Settings/Settings.js index 3f35b8441..de0d82eb6 100644 --- a/src/renderer/settings/components/Settings/Settings.js +++ b/src/renderer/settings/components/Settings/Settings.js @@ -11,17 +11,22 @@ import SidebarLink from '../SidebarLink'; import styles from './Settings.scss'; export default class Settings extends React.PureComponent { + state = { + offset: 0 + }; + componentDidMount() { + this.setState({ offset: this.container.node.offsetTop }); scrollSpy.update(); } render() { return ( - +
- + {({ style }) => (
  • @@ -52,4 +57,8 @@ export default class Settings extends React.PureComponent { ); } + + registerRef = (el) => { + this.container = el; + } } From bb9ed8fd62812924d6e7aba718f61a5a568487a1 Mon Sep 17 00:00:00 2001 From: Matt Huggins Date: Fri, 17 Aug 2018 20:25:15 -0500 Subject: [PATCH 5/5] chore(lint): disable no-descending-specificity --- .stylelintrc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.stylelintrc b/.stylelintrc index b8bcd1f59..c6e3414a9 100644 --- a/.stylelintrc +++ b/.stylelintrc @@ -4,6 +4,7 @@ "function-url-quotes": "always", "number-leading-zero": "always", "max-nesting-depth": 4, - "function-name-case": "lower" + "function-name-case": "lower", + "no-descending-specificity": null } }