Adjust the location of the signer snippet

js/src/ui/Icons/index.js

@@ -25,8 +25,10 @@ import DashboardIcon from 'material-ui/svg-icons/action/dashboard';
 import DeleteIcon from 'material-ui/svg-icons/action/delete';
 import DoneIcon from 'material-ui/svg-icons/action/done-all';
 import EditIcon from 'material-ui/svg-icons/content/create';
+import FingerprintIcon from 'material-ui/svg-icons/action/fingerprint';
 import LinkIcon from 'material-ui/svg-icons/content/link';
 import LockedIcon from 'material-ui/svg-icons/action/lock';
+import MoveIcon from 'material-ui/svg-icons/action/open-with';
 import NextIcon from 'material-ui/svg-icons/navigation/arrow-forward';
 import PrevIcon from 'material-ui/svg-icons/navigation/arrow-back';
 import SaveIcon from 'material-ui/svg-icons/content/save';
@@ -48,8 +50,10 @@ export {
   DeleteIcon,
   DoneIcon,
   EditIcon,
+  FingerprintIcon,
   LinkIcon,
   LockedIcon,
+  MoveIcon,
   NextIcon,
   PrevIcon,
   SaveIcon,

js/src/ui/ParityBackground/parityBackground.js

@@ -26,7 +26,12 @@ class ParityBackground extends Component {
     backgroundSeed: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
-    onClick: PropTypes.func
+    onClick: PropTypes.func,
+    style: PropTypes.object
+  };
+
+  static defaultProps = {
+    style: {}
   };
 
   state = {
@@ -65,7 +70,11 @@ class ParityBackground extends Component {
 
   render () {
     const { children, className, onClick } = this.props;
-    const { style } = this.state;
+
+    const style = {
+      ...this.state.style,
+      ...this.props.style
+    };
 
     return (
       <div

js/src/views/Dapps/builtin.json

@@ -80,6 +80,7 @@
     "description": "A Javascript development console complete with web3 and parity objects.",
     "version": "0.3",
     "author": "Gav Wood <[email protected]>",
+    "position": "top-right",
     "visible": true,
     "secure": true
   }

js/src/views/Dapps/dappsStore.js

@@ -14,6 +14,7 @@
 // You should have received a copy of the GNU General Public License
 // along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 
+import EventEmitter from 'eventemitter3';
 import { action, computed, observable, transaction } from 'mobx';
 import store from 'store';
 
@@ -30,7 +31,7 @@ const BUILTIN_APPS_KEY = 'BUILTIN_APPS_KEY';
 
 let instance = null;
 
-export default class DappsStore {
+export default class DappsStore extends EventEmitter {
   @observable apps = [];
   @observable displayApps = {};
   @observable modalOpen = false;
@@ -44,13 +45,27 @@ export default class DappsStore {
   _registryAppsIds = null;
 
   constructor (api) {
+    super();
+
     this._api = api;
 
     this.readDisplayApps();
     this.loadExternalOverlay();
     this.subscribeToChanges();
   }
 
+  static get (api) {
+    if (!instance) {
+      instance = new DappsStore(api);
+    }
+
+    if (api && !instance._api) {
+      instance._api = api;
+    }
+
+    return instance;
+  }
+
   /**
    * Try to find the app from the local (local or builtin)
    * apps, else fetch from the node
@@ -68,6 +83,10 @@ export default class DappsStore {
         }
 
         return this.fetchRegistryApp(dappReg, id, true);
+      })
+      .then((app) => {
+        this.emit('loaded', app);
+        return app;
       });
   }
 
@@ -90,14 +109,6 @@ export default class DappsStore {
       .then(this.writeDisplayApps);
   }
 
-  static get (api) {
-    if (!instance) {
-      instance = new DappsStore(api);
-    }
-
-    return instance;
-  }
-
   subscribeToChanges () {
     const { dappReg } = Contracts.get();
 

js/src/views/ParityBar/parityBar.css

@@ -15,15 +15,6 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-.bar, .expanded {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  font-size: 16px;
-  font-family: 'Roboto', sans-serif;
-  z-index: 10001;
-}
-
 .overlay {
   position: fixed;
   top: 0;
@@ -32,42 +23,73 @@
   left: 0;
   background: rgba(255, 255, 255, 0.5);
   z-index: 10000;
+  user-select: none;
+}
+
+.bar, .expanded {
+  position: fixed;
+  font-size: 16px;
+  font-family: 'Roboto', sans-serif;
+  z-index: 10001;
+  user-select: none;
 }
 
 .bar {
   vertical-align: middle;
   display: flex;
   flex-wrap: wrap;
   width: 100%;
+  top: 0;
+  left: 0;
+
+  &.moving {
+    bottom: 0;
+    right: 0;
+
+    &:hover {
+      cursor: move;
+    }
+  }
+}
+
+.parityBg {
+  position: fixed;
+
+  transition-property: left, top, right, bottom;
+  transition-duration: 0.25s;
+  transition-timing-function: ease;
+
+  &.moving {
+    transition-duration: 0.05s;
+    transition-timing-function: ease-in-out;
+  }
 }
 
 .expanded {
-  right: 1em;
   border-radius: 4px 4px 0 0;
   display: flex;
   flex-direction: column;
   max-height: 50vh;
-}
 
-.expanded .content {
-  flex: 1;
-  overflow-y: auto;
-  overflow-x: hidden;
-  display: flex;
-  background: rgba(0, 0, 0, 0.8);
-  min-height: 16em;
+  .content {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    display: flex;
+    background: rgba(0, 0, 0, 0.8);
+    min-height: 16em;
+  }
 }
 
 .corner {
-  position: absolute;
-  bottom: 0;
-  right: 1em;
   border-radius: 4px 4px 0 0;
 }
 
 .cornercolor {
   background: rgba(0, 0, 0, 0.5);
   padding: 0.5em 1em;
+  display: flex;
+  align-items: center;
 }
 
 .link {
@@ -76,12 +98,12 @@
   outline: none !important;
   color: white !important;
   display: inline-block;
-}
 
-.link img, .link svg {
-  height: 24px !important;
-  width: 24px !important;
-  margin: 2px 0.5em 0 0;
+  img, svg {
+    height: 24px !important;
+    width: 24px !important;
+    margin: 2px 0.5em 0 0;
+  }
 }
 
 .link+.link {
@@ -123,20 +145,20 @@
   padding: 0.5em 1em;
   background: rgba(0, 0, 0, 0.25);
   margin-bottom: 0;
-}
 
-.header:after {
-  clear: both;
+  &:after {
+    clear: both;
+  }
 }
 
-.header button,
-.corner button {
-  color: white !important;
-}
+.header, .corner {
+  button {
+    color: white !important;
+  }
 
-.header svg,
-.coner svg {
-  fill: white !important;
+  svg {
+    fill: white !important;
+  }
 }
 
 .body {
@@ -150,12 +172,12 @@
 .actions {
   float: right;
   margin-top: -2px;
-}
 
-.actions div {
-  margin-left: 1em;
-  display: inline-block;
-  cursor: pointer;
+  div {
+    margin-left: 1em;
+    display: inline-block;
+    cursor: pointer;
+  }
 }
 
 .parityIcon, .signerIcon {
@@ -164,3 +186,34 @@
   vertical-align: middle;
   margin-left: 12px;
 }
+
+.moveIcon {
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    cursor: move;
+  }
+}
+
+.dragButton {
+  width: 1em;
+  height: 1em;
+  margin-left: 0.5em;
+
+  background-color: white;
+  opacity: 0.25;
+  border-radius: 50%;
+
+  transition-property: opacity;
+  transition-duration: 0.1s;
+  transition-timing-function: ease-in-out;
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  &.moving {
+    opacity: 0.75;
+  }
+}