Initial split from UI-2

paritytech · Aug 1, 2017 · 7747cad · 7747cad
1 parent 5efe863
commit 7747cad
Show file tree

Hide file tree

Showing 36 changed files with 3,163 additions and 0 deletions.
diff --git a/Application/application.css b/Application/application.css
@@ -0,0 +1,65 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.app {
+  display: flex;
+  flex-direction: column;
+  font-family: Arial, sans-serif;
+  font-size: 11px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+textarea,
+input {
+  font-family: dejavu sans mono, monospace;
+  outline: none;
+}
+
+code,
+pre {
+  font-family: dejavu sans mono, monospace;
+  font-size: 11px;
+}
+
+.header {
+  flex: 0 0 auto;
+}
+
+.view {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.eval {
+  flex: 0 1 auto;
+  font-family: dejavu sans mono, monospace;
+  overflow: auto;
+}
+
+.input {
+  border-top: 1px solid #eee;
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 50px;
+}
+
+.status {
+  flex: 0 0 auto;
+  font-family: dejavu sans mono, monospace;
+}
diff --git a/Application/application.js b/Application/application.js
@@ -0,0 +1,94 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+
+import { api } from '../parity';
+
+import Console from '../Console';
+import Header from '../Header';
+import Input from '../Input';
+import Settings from '../Settings';
+import Snippets from '../Snippets';
+import Watches from '../Watches';
+
+import ApplicationStore from './application.store';
+import WatchesStore from '../Watches/watches.store';
+
+import styles from './application.css';
+
+@observer
+export default class Application extends Component {
+  application = ApplicationStore.get();
+  watches = WatchesStore.get();
+
+  componentWillMount () {
+    this.watches.add('time', () => new Date());
+    this.watches.add('blockNumber', api.eth.blockNumber, api);
+  }
+
+  render () {
+    return (
+      <div className={ styles.app }>
+        <div className={ styles.header }>
+          <Header />
+        </div>
+
+        { this.renderView() }
+
+        <div className={ styles.status }>
+          <Watches />
+        </div>
+      </div>
+    );
+  }
+
+  renderView () {
+    const { view } = this.application;
+
+    if (view === 'console') {
+      return (
+        <div className={ styles.view }>
+          <div className={ styles.eval }>
+            <Console />
+          </div>
+          <div className={ styles.input }>
+            <Input />
+          </div>
+        </div>
+      );
+    }
+
+    if (view === 'settings') {
+      return (
+        <div className={ styles.view }>
+          <Settings />
+        </div>
+      );
+    }
+
+    if (view === 'snippets') {
+      return (
+        <div className={ styles.view }>
+          <Snippets />
+        </div>
+      );
+    }
+
+    return null;
+  }
+}
diff --git a/Application/application.store.js b/Application/application.store.js
@@ -0,0 +1,42 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { action, observable } from 'mobx';
+
+let instance;
+
+export default class ApplicationStore {
+  @observable view = this.views[0].id;
+
+  views = [
+    { label: 'Console', id: 'console' },
+    { label: 'Snippets', id: 'snippets' },
+    { label: 'Settings', id: 'settings' }
+  ];
+
+  static get () {
+    if (!instance) {
+      instance = new ApplicationStore();
+    }
+
+    return instance;
+  }
+
+  @action
+  setView (view) {
+    this.view = view;
+  }
+}
diff --git a/Application/index.js b/Application/index.js
@@ -0,0 +1,17 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+export default from './application';
diff --git a/Autocomplete/autocomplete.css b/Autocomplete/autocomplete.css
@@ -0,0 +1,55 @@
+/* Copyright 2015-2017 Parity Technologies (UK) Ltd.
+/* This file is part of Parity.
+/*
+/* Parity is free software: you can redistribute it and/or modify
+/* it under the terms of the GNU General Public License as published by
+/* the Free Software Foundation, either version 3 of the License, or
+/* (at your option) any later version.
+/*
+/* Parity is distributed in the hope that it will be useful,
+/* but WITHOUT ANY WARRANTY; without even the implied warranty of
+/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+/* GNU General Public License for more details.
+/*
+/* You should have received a copy of the GNU General Public License
+/* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+.container {
+  background: #f8f8f8;
+  box-shadow: 0 0.125em 0.25em rgba(0, 0, 0, 0.5);
+  font-family: dejavu sans mono, monospace;
+  left: 20px;
+  position: absolute;
+  max-height: 300px;
+  overflow: auto;
+}
+
+.item {
+  background-color: white;
+  padding: 0.25em 0.25em 0.25em 0.35em;
+  display: flex;
+  justify-content: space-between;
+
+  &.selected {
+    background-color: rgb(64, 115, 244);
+
+    &,
+    .proto {
+      color: white;
+    }
+  }
+
+  &:hover {
+    cursor: default;
+  }
+
+  &:hover:not(.selected) {
+    background-color: rgb(230, 236, 255);
+  }
+
+  .proto {
+    color: gray;
+    margin-left: 1em;
+  }
+}
diff --git a/Autocomplete/autocomplete.js b/Autocomplete/autocomplete.js
@@ -0,0 +1,96 @@
+// Copyright 2015-2017 Parity Technologies (UK) Ltd.
+// This file is part of Parity.
+
+// Parity is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Parity is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Parity.  If not, see <http://www.gnu.org/licenses/>.
+
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import AutocompleteStore from './autocomplete.store';
+
+import styles from './autocomplete.css';
+
+@observer
+export default class Autocomplete extends Component {
+  autocompleteStore = AutocompleteStore.get();
+
+  render () {
+    if (!this.autocompleteStore.show) {
+      return null;
+    }
+
+    return (
+      <div
+        className={ styles.container }
+        style={ this.autocompleteStore.position }
+      >
+        { this.renderAutocompletes() }
+      </div>
+    );
+  }
+
+  renderAutocompletes () {
+    const { selected, values } = this.autocompleteStore;
+    const displayedProto = {};
+
+    return values.map((autocomplete, index) => {
+      const { name, prototypeName } = autocomplete;
+      const onClick = () => this.handleClick(index);
+      const setRef = (node) => this.setRef(index, node);
+
+      const proto = !displayedProto[prototypeName]
+        ? (
+          <span className={ styles.proto }>
+            { prototypeName }
+          </span>
+        )
+        : null;
+
+      if (!displayedProto[prototypeName]) {
+        displayedProto[prototypeName] = true;
+      }
+
+      const classes = [ styles.item ];
+
+      if (index === selected) {
+        classes.push(styles.selected);
+      }
+
+      return (
+        <div
+          className={ classes.join(' ') }
+          key={ index }
+          onClick={ onClick }
+          ref={ setRef }
+        >
+          <span>
+            { name }
+          </span>
+          { proto }
+        </div>
+      );
+    });
+  }
+
+  handleClick = (index) => {
+    this.autocompleteStore.select(index);
+  };
+
+  setRef = (index, node) => {
+    const element = ReactDOM.findDOMNode(node);
+
+    this.autocompleteStore.setElement(index, element);
+  };
+}