Merge pull request #762 from ethereum/closeButtonModal

assets/css/browser-solidity.css

@@ -306,77 +306,3 @@ input[type="file"] {
 .ace_gutter-cell.ace_breakpoint{
     background-color: hsla(0, 82%, 82%, 1); /* red in style-guide.js */
 }
-
-/* The Modal (background) */
-.modal {
-    display: none; /* Hidden by default */
-    position: fixed; /* Stay in place */
-    z-index: 6; /* Sit on top */
-    left: 0;
-    top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: hsla(0, 0%, 0%, 1); /* Fallback color */
-    background-color: hsla(0, 0%, 0%, .4); /* Black w/ opacity */
-}
-
-/* Modal Header */
-.modal-header {
-    padding: 2px 16px;
-    background-color: hsla(59, 56%, 78%, 0.5);
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-    color: white;
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-}
-
-/* Modal Body */
-.modal-body {padding: 2px 16px;}
-
-/* Modal Footer */
-.modal-footer {
-    padding: 2px 16px;
-    background-color: hsla(59, 56%, 78%, 0.5);
-    color: black;
-    display: flex;
-    justify-content: flex-end;
-}
-
-/* Modal Content */
-.modal-content {
-    position: relative;
-    background-color: hsl(0, 0%, 100%); /* white in style-guide.js */
-    margin: auto;
-    padding: 0;
-    border-top-right-radius: 3px;
-    border-top-left-radius: 3px;
-    width: 50%;
-    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-    -webkit-animation-name: animatetop;
-    -webkit-animation-duration: 0.4s;
-    animation-name: animatetop;
-    animation-duration: 0.4s;
-}
-
-#modal-footer-cancel {
-    margin-left: 1em;
-    cursor: pointer;
-}
-
-#modal-footer-ok {
-    cursor: pointer;
-}
-
-/* Add Animation */
-@-webkit-keyframes animatetop {
-    from {top: -300px; opacity: 0}
-    to {top: 0; opacity: 1}
-}
-
-@keyframes animatetop {
-    from {top: -300px; opacity: 0}
-    to {top: 0; opacity: 1}
-}

src/app/panels/file-panel.js

@@ -108,6 +108,15 @@ var css = csjs`
     top               : 0;
     bottom            : 0;
   }
+  .dialog {
+    display: flex;
+    flex-direction: column;
+  }
+  .dialogParagraph {
+    ${styles.infoTextBox}
+    margin-bottom: 2em;
+    word-break: break-word;
+  }
 `
 
 var limit = 60
@@ -121,13 +130,19 @@ function filepanel (appAPI, filesProvider) {
   var dragbar = yo`<div onmousedown=${mousedown} class=${css.dragbar}></div>`
 
   function remixdDialog () {
-    return yo`<div><div>This feature allows to interact with your file system from Remix. Once the connection is made the shared folder will be available in the file explorer under <i>localhost</i></div>
-              <div><i>Remixd</i> first has to be run in your local computer. See <a target="_blank" href="http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html</a> for more details.</div>
-              <div>Accepting this dialog will start a session between <i>${window.location.href}</i> and your local file system <i>ws://127.0.0.1:65520</i></div>
-              <div>Please be sure your system is secured enough (port 65520 neither opened nor forwarded).</div>
-              <div><i class="fa fa-link"></i> will update the connection status.</div>
-              <div>This feature is still alpha, we recommend to keep a copy of the shared folder.</div>
-              </div>`
+    return yo`
+      <div class=${css.dialog}>
+        <div class=${css.dialogParagraph}>Interact with your file system from Remix. Click connect and find shared folder in the Remix file explorer (under localhost).
+          Before you get started, check out <a target="_blank" href="http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html">Tutorial_remixd_filesystem</a>
+          to find out how to run Remixd.
+        </div>
+        <div class=${css.dialogParagraph}>Connection will start a session between <em>${window.location.href}</em> and your local file system <i>ws://127.0.0.1:65520</i>
+          so please make sure your system is secured enough (port 65520 neither opened nor forwarded).
+          <i class="fa fa-link"></i> will show you current connection status.
+        </div>
+        <div class=${css.dialogParagraph}>This feature is still in Alpha, so we recommend you to keep a copy of the shared folder.</div>
+      </div>
+    `
   }
 
   function template () {
@@ -273,7 +288,7 @@ function filepanel (appAPI, filesProvider) {
         if (error) console.log(error)
       })
     } else {
-      modalDialog('Connection to Localhost', remixdDialog(),
+      modalDialog('Connect to localhost', remixdDialog(),
         { label: 'Connect',
           fn: () => {
             filesProvider['localhost'].init((error) => {

src/app/tabs/compile-tab.js

@@ -351,7 +351,7 @@ function compileTab (container, appAPI, appEvents, opts) {
             </div>
             `)
         })
-        modalDialog(contractName, log, {label: 'OK'}, {label: ''})
+        modalDialog(contractName, log, {label: ''}, {label: 'Close'})
       }
     }
 

src/app/ui/modaldialog.js

@@ -19,16 +19,20 @@ var css = csjs`
   }
   .modalHeader {
     padding: 2px 16px;
-    background-color: ${styles.colors.orange};
+    background-color: ${styles.colors.backgroundBlue};
     color: ${styles.colors.white};
+    display: flex;
+    justify-content: space-between;
   }
   .modalBody {
     padding: 1.5em;
     line-height: 1.5em;
   }
   .modalFooter {
+    display: flex;
+    justify-content: flex-end;
     padding: 10px 30px;
-    background-color: ${styles.colors.orange};
+    background-color: ${styles.colors.backgroundBlue};
     color: ${styles.colors.white};
     text-align: right;
     font-weight: 700;
@@ -51,8 +55,16 @@ var css = csjs`
   }
   .modalFooterOk {
     cursor: pointer;
+    color: ${styles.colors.grey};
   }
   .modalFooterCancel {
+    margin-left: 1em;
+    cursor: pointer;
+    color: ${styles.colors.grey};
+  }
+  .modalClose {
+    margin: auto 0;
+    color: #393939;
     cursor: pointer;
   }
   @-webkit-keyframes animatetop {
@@ -71,6 +83,7 @@ module.exports = (title, content, ok, cancel) => {
     document.querySelector('body').appendChild(html())
     container = document.querySelector(`.${css.modal}`)
   }
+  var closeDiv = document.getElementById('modal-close')
 
   var okDiv = document.getElementById('modal-footer-ok')
   okDiv.innerHTML = (ok && ok.label !== undefined) ? ok.label : 'OK'
@@ -103,6 +116,7 @@ module.exports = (title, content, ok, cancel) => {
 
   function hide () {
     container.style.display = 'none'
+    container.parentElement.removeChild(container)
   }
 
   function show () {
@@ -112,22 +126,25 @@ module.exports = (title, content, ok, cancel) => {
   function removeEventListener () {
     okDiv.removeEventListener('click', okListener)
     cancelDiv.removeEventListener('click', cancelListener)
+    closeDiv.removeEventListener('click', cancelListener)
   }
 
   okDiv.addEventListener('click', okListener)
   cancelDiv.addEventListener('click', cancelListener)
+  closeDiv.addEventListener('click', cancelListener)
 }
 
 function html () {
-  return yo`<div id="modal-dialog" class="${css.modal}" onclick="clickModal()" >
+  return yo`<div id="modal-dialog" class="${css.modal}">
   <div class="${css['modalContent']}">
     <div class="${css['modalHeader']}">
     <h2></h2>
+    <i id="modal-close" title="Close" class="fa fa-times ${css['modalClose']}" aria-hidden="true"></i>
   </div>
   <div class="${css['modalBody']}"> -
   </div>
   <div class="${css['modalFooter']}">
-    <span id="modal-footer-ok" class="modalFooterOk">OK</span><span id="modal-footer-cancel" class="modalFooterCancel">Cancel</span>
+    <span id="modal-footer-ok" class=${css['modalFooterOk']}>OK</span><span id="modal-footer-cancel"  class=${css['modalFooterCancel']}>Cancel</span>
         </div>
   </div>
   </div>