diff --git a/README.md b/README.md index adcbd64..a23bf5f 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,9 @@ ## TODO - Add modals for server editing - Remove/edit servers in the list -- App icon + +## Prototype 4 10/26/2017 - Server Edit Modal +![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype4.png?raw=true "Prototype 4") ## Prototype 3 10/25/2017 ![alt text](https://github.com/mgerb/ps-launcher/blob/master/docs/images/prototype3.png?raw=true "Prototype 3") diff --git a/app/components/Header/Header.tsx b/app/components/Header/Header.tsx index 57266c3..221e956 100644 --- a/app/components/Header/Header.tsx +++ b/app/components/Header/Header.tsx @@ -41,7 +41,6 @@ export class Header extends React.Component { return (
- {/* */} v{VERSION}
diff --git a/app/components/Modal/Modal.scss b/app/components/Modal/Modal.scss new file mode 100644 index 0000000..bc104d1 --- /dev/null +++ b/app/components/Modal/Modal.scss @@ -0,0 +1,50 @@ +@import '../../scss/variables'; + +.CustomModal--hidden { + opacity: 0; + pointer-events: none; +} + +.CustomModal__base { + position: fixed; + height: 100%; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + top: 0; + left: 0; + transition: opacity 0.2s ease-in-out; +} + +.CustomModal__content { + height: 400px; + width: 400px; + background: $dark-blue--1; + border-radius: 4px; + z-index: 200; + box-shadow: 0 3px 7px rgba(0, 0, 0, 0.2); + display: flex; + flex-direction: column; +} + +.CustomModal__overlay { + position: fixed; + height: 100%; + width: 100%; + top: 0; + left: 0; + z-index: 100; + background: $dark-blue; + opacity: 0.8; +} + +.CustomModal__header { + height: 50px; + display: flex; + align-items: center; + padding-left: 20px; + background: $dark-blue--2; + border-top-left-radius: 4px; + border-top-right-radius: 4px; +} diff --git a/app/components/Modal/Modal.tsx b/app/components/Modal/Modal.tsx new file mode 100644 index 0000000..7d39845 --- /dev/null +++ b/app/components/Modal/Modal.tsx @@ -0,0 +1,33 @@ +import React from 'react'; + +import './Modal.scss'; + +interface Props { + isOpen: boolean; + title: string; + onClose?(): any; +} + +export class Modal extends React.Component { + constructor(props: Props) { + super(props); + } + + public render(): any { + const { isOpen, onClose, title } = this.props; + + const hiddenClass = !isOpen ? 'CustomModal--hidden' : ''; + + return ( +
+
+
+

{title}

+
+ {this.props.children} +
+
+
+ ); + } +} diff --git a/app/components/ServerList/ServerList.scss b/app/components/ServerList/ServerList.scss index 07c82bf..621fc8e 100644 --- a/app/components/ServerList/ServerList.scss +++ b/app/components/ServerList/ServerList.scss @@ -71,4 +71,16 @@ } } + .modal-content { + display: flex; + flex-direction: column; + padding: 20px; + flex: 1; + } + + .button-group { + align-self: flex-end; + justify-content: flex-end; + } + } diff --git a/app/components/ServerList/ServerList.tsx b/app/components/ServerList/ServerList.tsx index 917d611..1f4c698 100644 --- a/app/components/ServerList/ServerList.tsx +++ b/app/components/ServerList/ServerList.tsx @@ -4,6 +4,7 @@ import { exec } from 'child_process'; import { inject, observer } from 'mobx-react'; import { AppState } from '../../state/AppState'; import { toast } from '../../util'; +import { Modal } from '../Modal/Modal'; import './ServerList.scss'; @@ -11,23 +12,19 @@ interface Props { AppState?: AppState; } +interface State { + showModal: boolean; +} + @inject('AppState') @observer -export class ServerList extends React.Component { +export class ServerList extends React.Component { + constructor(props: Props) { super(props); - } - - private renderItems(): any { - const { AppState } = this.props; - return this.props.AppState.selectedExpansion.servers.map((server, index) => { - const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : ''; - return ( -
AppState.setSelectedServerIndex(index)}> - {server.name} -
- ); - }); + this.state = { + showModal: false, + }; } private async play(): Promise { @@ -72,14 +69,60 @@ export class ServerList extends React.Component { }); } + private renderItems(): any { + const { AppState } = this.props; + return this.props.AppState.selectedExpansion.servers.map((server, index) => { + const selected = AppState.selectedExpansion.selectedServerIndex === index ? ' selected' : ''; + return ( +
AppState.setSelectedServerIndex(index)}> + {server.name} +
+ ); + }); + } + + private renderModal(): any { + return ( + this.setState({ showModal: false })} + title="Add a server" + > +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+ + +
+ +
+
+ ); + } + public render(): any { const { selectedServer } = this.props.AppState; return (
+ {this.renderModal()}
Servers
- + this.setState({ showModal: true })}/>
{this.renderItems()}
diff --git a/app/scss/style.scss b/app/scss/style.scss index 7a8c35a..29fe183 100644 --- a/app/scss/style.scss +++ b/app/scss/style.scss @@ -31,22 +31,72 @@ a { } } -::-webkit-scrollbar-track -{ - border-radius: 10px; +.input { + padding: 10px; + border: 0; + border-radius: 4px; + background: $dark-blue; + width: 100%; + color: $white; + border: 1px solid darken($dark-blue, 5%); + + &::-webkit-input-placeholder { + color: $dark-blue--3; + } +} + +.form-group { + & + & { + margin-top: 20px; + } +} + +.form-group__label { + font-size: 12px; + line-height: 20px; + color: $gray; + padding-left: 5px; +} + +.button { + border: 0; + padding: 10px; + border-radius: 4px; + background: darken($gray, 5%); + transition: all 0.2s linear; + color: $white; + cursor: pointer; + + &:hover { + background: $gray; + } + + & + & { + margin-left: 5px; + } +} + +.button--success { + background: $blue; + + &:hover { + background: $blue--lighter; + } +} + +::-webkit-scrollbar-track { + border-radius: 10px; background-color: none; } -::-webkit-scrollbar -{ - width: 5px; - height: 5px; - background-color: none; - border-radius: 10px; +::-webkit-scrollbar { + width: 5px; + height: 5px; + background-color: none; + border-radius: 10px; } -::-webkit-scrollbar-thumb -{ - border-radius: 10px; - background-color: darken($dark-blue, 5%); +::-webkit-scrollbar-thumb { + border-radius: 10px; + background-color: darken($dark-blue, 5%); } diff --git a/docs/images/prototype4.png b/docs/images/prototype4.png new file mode 100644 index 0000000..16fc7cf Binary files /dev/null and b/docs/images/prototype4.png differ diff --git a/package.json b/package.json index 703970f..dc43bb6 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ "babel-loader": "^7.1.2", "babel-plugin-add-module-exports": "^0.2.1", "babel-polyfill": "^6.26.0", + "babel-preset-env": "^1.6.1", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-0": "^6.16.0", @@ -56,6 +57,7 @@ "@types/lodash": "^4.14.77", "@types/react": "^16.0.10", "@types/react-dom": "^16.0.1", + "@types/react-modal": "^2.2.2", "@types/react-router-dom": "^4.0.2", "@types/toastr": "^2.1.35", "autoprefixer": "^7.1.5", diff --git a/yarn.lock b/yarn.lock index 82d0338..3df2cf0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -59,6 +59,12 @@ "@types/node" "*" "@types/react" "*" +"@types/react-modal@^2.2.2": + version "2.2.2" + resolved "https://registry.yarnpkg.com/@types/react-modal/-/react-modal-2.2.2.tgz#651157522ba45c1ffd8831a2e7bbd8094390a925" + dependencies: + "@types/react" "*" + "@types/react-router-dom@^4.0.2": version "4.0.8" resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-4.0.8.tgz#a9731bf35d053cdd27053baacc19e505d74514f3" @@ -654,7 +660,7 @@ babel-plugin-transform-async-generator-functions@^6.24.1: babel-plugin-syntax-async-generators "^6.5.0" babel-runtime "^6.22.0" -babel-plugin-transform-async-to-generator@^6.24.1: +babel-plugin-transform-async-to-generator@^6.22.0, babel-plugin-transform-async-to-generator@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-async-to-generator/-/babel-plugin-transform-async-to-generator-6.24.1.tgz#6536e378aff6cb1d5517ac0e40eb3e9fc8d08761" dependencies: @@ -708,7 +714,7 @@ babel-plugin-transform-es2015-block-scoped-functions@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-block-scoping@^6.24.1: +babel-plugin-transform-es2015-block-scoping@^6.23.0, babel-plugin-transform-es2015-block-scoping@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-block-scoping/-/babel-plugin-transform-es2015-block-scoping-6.26.0.tgz#d70f5299c1308d05c12f463813b0a09e73b1895f" dependencies: @@ -718,7 +724,7 @@ babel-plugin-transform-es2015-block-scoping@^6.24.1: babel-types "^6.26.0" lodash "^4.17.4" -babel-plugin-transform-es2015-classes@^6.24.1: +babel-plugin-transform-es2015-classes@^6.23.0, babel-plugin-transform-es2015-classes@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-classes/-/babel-plugin-transform-es2015-classes-6.24.1.tgz#5a4c58a50c9c9461e564b4b2a3bfabc97a2584db" dependencies: @@ -732,33 +738,33 @@ babel-plugin-transform-es2015-classes@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-computed-properties@^6.24.1: +babel-plugin-transform-es2015-computed-properties@^6.22.0, babel-plugin-transform-es2015-computed-properties@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-computed-properties/-/babel-plugin-transform-es2015-computed-properties-6.24.1.tgz#6fe2a8d16895d5634f4cd999b6d3480a308159b3" dependencies: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-destructuring@^6.22.0: +babel-plugin-transform-es2015-destructuring@^6.22.0, babel-plugin-transform-es2015-destructuring@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-destructuring/-/babel-plugin-transform-es2015-destructuring-6.23.0.tgz#997bb1f1ab967f682d2b0876fe358d60e765c56d" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-duplicate-keys@^6.24.1: +babel-plugin-transform-es2015-duplicate-keys@^6.22.0, babel-plugin-transform-es2015-duplicate-keys@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-duplicate-keys/-/babel-plugin-transform-es2015-duplicate-keys-6.24.1.tgz#73eb3d310ca969e3ef9ec91c53741a6f1576423e" dependencies: babel-runtime "^6.22.0" babel-types "^6.24.1" -babel-plugin-transform-es2015-for-of@^6.22.0: +babel-plugin-transform-es2015-for-of@^6.22.0, babel-plugin-transform-es2015-for-of@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-for-of/-/babel-plugin-transform-es2015-for-of-6.23.0.tgz#f47c95b2b613df1d3ecc2fdb7573623c75248691" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-function-name@^6.24.1: +babel-plugin-transform-es2015-function-name@^6.22.0, babel-plugin-transform-es2015-function-name@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-function-name/-/babel-plugin-transform-es2015-function-name-6.24.1.tgz#834c89853bc36b1af0f3a4c5dbaa94fd8eacaa8b" dependencies: @@ -772,7 +778,7 @@ babel-plugin-transform-es2015-literals@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-modules-amd@^6.24.1: +babel-plugin-transform-es2015-modules-amd@^6.22.0, babel-plugin-transform-es2015-modules-amd@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-amd/-/babel-plugin-transform-es2015-modules-amd-6.24.1.tgz#3b3e54017239842d6d19c3011c4bd2f00a00d154" dependencies: @@ -780,7 +786,7 @@ babel-plugin-transform-es2015-modules-amd@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-modules-commonjs@^6.24.1: +babel-plugin-transform-es2015-modules-commonjs@^6.23.0, babel-plugin-transform-es2015-modules-commonjs@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-commonjs/-/babel-plugin-transform-es2015-modules-commonjs-6.26.0.tgz#0d8394029b7dc6abe1a97ef181e00758dd2e5d8a" dependencies: @@ -789,7 +795,7 @@ babel-plugin-transform-es2015-modules-commonjs@^6.24.1: babel-template "^6.26.0" babel-types "^6.26.0" -babel-plugin-transform-es2015-modules-systemjs@^6.24.1: +babel-plugin-transform-es2015-modules-systemjs@^6.23.0, babel-plugin-transform-es2015-modules-systemjs@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-systemjs/-/babel-plugin-transform-es2015-modules-systemjs-6.24.1.tgz#ff89a142b9119a906195f5f106ecf305d9407d23" dependencies: @@ -797,7 +803,7 @@ babel-plugin-transform-es2015-modules-systemjs@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-modules-umd@^6.24.1: +babel-plugin-transform-es2015-modules-umd@^6.23.0, babel-plugin-transform-es2015-modules-umd@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-modules-umd/-/babel-plugin-transform-es2015-modules-umd-6.24.1.tgz#ac997e6285cd18ed6176adb607d602344ad38468" dependencies: @@ -805,14 +811,14 @@ babel-plugin-transform-es2015-modules-umd@^6.24.1: babel-runtime "^6.22.0" babel-template "^6.24.1" -babel-plugin-transform-es2015-object-super@^6.24.1: +babel-plugin-transform-es2015-object-super@^6.22.0, babel-plugin-transform-es2015-object-super@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-object-super/-/babel-plugin-transform-es2015-object-super-6.24.1.tgz#24cef69ae21cb83a7f8603dad021f572eb278f8d" dependencies: babel-helper-replace-supers "^6.24.1" babel-runtime "^6.22.0" -babel-plugin-transform-es2015-parameters@^6.24.1: +babel-plugin-transform-es2015-parameters@^6.23.0, babel-plugin-transform-es2015-parameters@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-parameters/-/babel-plugin-transform-es2015-parameters-6.24.1.tgz#57ac351ab49caf14a97cd13b09f66fdf0a625f2b" dependencies: @@ -823,7 +829,7 @@ babel-plugin-transform-es2015-parameters@^6.24.1: babel-traverse "^6.24.1" babel-types "^6.24.1" -babel-plugin-transform-es2015-shorthand-properties@^6.24.1: +babel-plugin-transform-es2015-shorthand-properties@^6.22.0, babel-plugin-transform-es2015-shorthand-properties@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-shorthand-properties/-/babel-plugin-transform-es2015-shorthand-properties-6.24.1.tgz#24f875d6721c87661bbd99a4622e51f14de38aa0" dependencies: @@ -836,7 +842,7 @@ babel-plugin-transform-es2015-spread@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-sticky-regex@^6.24.1: +babel-plugin-transform-es2015-sticky-regex@^6.22.0, babel-plugin-transform-es2015-sticky-regex@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-sticky-regex/-/babel-plugin-transform-es2015-sticky-regex-6.24.1.tgz#00c1cdb1aca71112cdf0cf6126c2ed6b457ccdbc" dependencies: @@ -850,13 +856,13 @@ babel-plugin-transform-es2015-template-literals@^6.22.0: dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-typeof-symbol@^6.22.0: +babel-plugin-transform-es2015-typeof-symbol@^6.22.0, babel-plugin-transform-es2015-typeof-symbol@^6.23.0: version "6.23.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-typeof-symbol/-/babel-plugin-transform-es2015-typeof-symbol-6.23.0.tgz#dec09f1cddff94b52ac73d505c84df59dcceb372" dependencies: babel-runtime "^6.22.0" -babel-plugin-transform-es2015-unicode-regex@^6.24.1: +babel-plugin-transform-es2015-unicode-regex@^6.22.0, babel-plugin-transform-es2015-unicode-regex@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-unicode-regex/-/babel-plugin-transform-es2015-unicode-regex-6.24.1.tgz#d38b12f42ea7323f729387f18a7c5ae1faeb35e9" dependencies: @@ -864,7 +870,7 @@ babel-plugin-transform-es2015-unicode-regex@^6.24.1: babel-runtime "^6.22.0" regexpu-core "^2.0.0" -babel-plugin-transform-exponentiation-operator@^6.24.1: +babel-plugin-transform-exponentiation-operator@^6.22.0, babel-plugin-transform-exponentiation-operator@^6.24.1: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-plugin-transform-exponentiation-operator/-/babel-plugin-transform-exponentiation-operator-6.24.1.tgz#2ab0c9c7f3098fa48907772bb813fe41e8de3a0e" dependencies: @@ -928,7 +934,7 @@ babel-plugin-transform-react-jsx@^6.24.1: babel-plugin-syntax-jsx "^6.8.0" babel-runtime "^6.22.0" -babel-plugin-transform-regenerator@^6.24.1: +babel-plugin-transform-regenerator@^6.22.0, babel-plugin-transform-regenerator@^6.24.1: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz#e0703696fbde27f0a3efcacf8b4dca2f7b3a8f2f" dependencies: @@ -949,6 +955,41 @@ babel-polyfill@^6.26.0: core-js "^2.5.0" regenerator-runtime "^0.10.5" +babel-preset-env@^1.6.1: + version "1.6.1" + resolved "https://registry.yarnpkg.com/babel-preset-env/-/babel-preset-env-1.6.1.tgz#a18b564cc9b9afdf4aae57ae3c1b0d99188e6f48" + dependencies: + babel-plugin-check-es2015-constants "^6.22.0" + babel-plugin-syntax-trailing-function-commas "^6.22.0" + babel-plugin-transform-async-to-generator "^6.22.0" + babel-plugin-transform-es2015-arrow-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoped-functions "^6.22.0" + babel-plugin-transform-es2015-block-scoping "^6.23.0" + babel-plugin-transform-es2015-classes "^6.23.0" + babel-plugin-transform-es2015-computed-properties "^6.22.0" + babel-plugin-transform-es2015-destructuring "^6.23.0" + babel-plugin-transform-es2015-duplicate-keys "^6.22.0" + babel-plugin-transform-es2015-for-of "^6.23.0" + babel-plugin-transform-es2015-function-name "^6.22.0" + babel-plugin-transform-es2015-literals "^6.22.0" + babel-plugin-transform-es2015-modules-amd "^6.22.0" + babel-plugin-transform-es2015-modules-commonjs "^6.23.0" + babel-plugin-transform-es2015-modules-systemjs "^6.23.0" + babel-plugin-transform-es2015-modules-umd "^6.23.0" + babel-plugin-transform-es2015-object-super "^6.22.0" + babel-plugin-transform-es2015-parameters "^6.23.0" + babel-plugin-transform-es2015-shorthand-properties "^6.22.0" + babel-plugin-transform-es2015-spread "^6.22.0" + babel-plugin-transform-es2015-sticky-regex "^6.22.0" + babel-plugin-transform-es2015-template-literals "^6.22.0" + babel-plugin-transform-es2015-typeof-symbol "^6.23.0" + babel-plugin-transform-es2015-unicode-regex "^6.22.0" + babel-plugin-transform-exponentiation-operator "^6.22.0" + babel-plugin-transform-regenerator "^6.22.0" + browserslist "^2.1.2" + invariant "^2.2.2" + semver "^5.3.0" + babel-preset-es2015@^6.18.0: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939" @@ -1303,7 +1344,7 @@ browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@^2.5.0: +browserslist@^2.1.2, browserslist@^2.5.0: version "2.5.1" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.5.1.tgz#68e4bc536bbcc6086d62843a2ffccea8396821c6" dependencies: