Add icons to file-panel

src/app/panels/file-panel.js

@@ -36,6 +36,24 @@ var css = csjs`
   .newFile i:hover    {
     color             : orange;
   }
+  .gist            {
+    padding           : 10px;
+  }
+  .gist i          {
+    cursor            : pointer;
+  }
+  .gist i:hover    {
+    color             : orange;
+  }
+  .copyFiles            {
+    padding           : 10px;
+  }
+  .copyFiles i          {
+    cursor            : pointer;
+  }
+  .copyFiles i:hover    {
+    color             : orange;
+  }
   .connectToLocalhost {
     padding           : 10px;
   }
@@ -106,7 +124,7 @@ function filepanel (appAPI, filesProvider) {
           <div class=${css.menu}>
             <span onclick=${createNewFile} class="newFile ${css.newFile}" title="Create New File in the Browser Storage Explorer">
               <i class="fa fa-plus-circle"></i>
-            </span>            
+            </span>
             ${canUpload ? yo`
               <span class=${css.uploadFile} title="Add Local file to the Browser Storage Explorer">
                 <label class="fa fa-folder-open">
@@ -114,6 +132,12 @@ function filepanel (appAPI, filesProvider) {
                 </label>
               </span>
             ` : ''}
+            <span class="${css.gist}">
+              <i class="fa fa-github"></i>
+            </span>
+            <span class="${css.copyFiles}">
+              <i class="fa fa-files-o" aria-hidden="true"></i>
+            </span>
             <span onclick=${connectToLocalhost} class="${css.connectToLocalhost}">
               <i class="websocketconn fa fa-link" title="Connect to Localhost"></i>
             </span>

src/app/support-tab.js

@@ -0,0 +1,93 @@
+var yo = require('yo-yo')
+
+// -------------- styling ----------------------
+var csjs = require('csjs-inject')
+var styleGuide = require('./style-guide')
+var styles = styleGuide()
+
+var css = csjs`
+  .supportTabView {
+    height: 100vh;
+    padding: 2%;
+    padding-bottom: 3em;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+  .chat extends ${styles.displayBox} {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    height: 85%;
+  }
+  .chatTitle {
+    cursor: pointer;
+    height: 40px;
+    width: 90%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 3px;
+    background-color: white;
+    border: 2px dotted ${styles.colors.lightGrey};
+  }
+  .chatTitle:hover {
+    background-color: ${styles.colors.lightYellow};
+  }
+  .icon {
+    height: 70%;
+    margin-right: 2%;
+  }
+  .chatTitleText {
+    font-size: 13px;
+    font-weight: bold;
+  }
+  .chatTitleText {
+    opacity: 0.8;
+  }
+  .chatIframe {
+    width: 100%;
+    height: 100%;
+    border: 2px dotted ${styles.colors.lightGrey};
+    overflow: hidden;
+    transform: scale(0.9);
+  }
+  .infoBox extends ${styles.infoTextBox}{
+
+  }
+`
+
+var infoText = yo`
+  <div>
+    Have a question, found a bug or want to propose a feature? Have a look at the
+    <a href='https://github.com/ethereum/browser-solidity/issues'> issues</a> or check out
+    <a href='https://remix.readthedocs.io/en/latest/'> the documentation page on Remix</a> or
+    <a href='https://solidity.readthedocs.io/en/latest/'> Solidity</a>.
+  </div>
+`
+
+module.exports = supportTab
+
+function supportTab (container, appAPI, events, opts) {
+  var el = yo`
+    <div class="${css.supportTabView} "id="supportView">
+      <div>
+        <div class="${css.infoBox}">
+          ${infoText}
+        </div>
+      </div>
+      <div class="${css.chat}">
+        <div class="${css.chatTitle}" onclick=${openLink} title='Click to open chat in Gitter'>
+          <img class="${css.icon}" title="Solidity" src="assets/img/remix_logo_512x512.svg">
+          <div class="${css.chatTitleText}">ethereum/remix community chat</div>
+        </div>
+        <iframe class="${css.chatIframe}" src='https://gitter.im/ethereum/remix/~embed'>
+      </div>
+    </div>
+  `
+  container.appendChild(el)
+}
+
+function openLink () {
+  window.open('https://gitter.im/ethereum/remix')
+}