Merge pull request #647 from ethereum/support_tab

Support tab

assets/css/browser-solidity.css

@@ -130,8 +130,12 @@
     display: block;
 }
 
-#righthand-panel #optionViews.txView input,
-#righthand-panel #optionViews.txView select {
+#header #optionViews.supportView #supportView {
+    display: block;
+}
+
+#header #optionViews.txView input,
+#header #optionViews.txView select {
     max-width: 13em;
     padding: 0.3em;
     box-sizing: border-box;

src/app/panels/righthand-panel.js

@@ -7,6 +7,7 @@ var settingsTab = require('../tabs/settings-tab')
 var analysisTab = require('../tabs/analysis-tab')
 var debuggerTab = require('../tabs/debugger-tab')
 var filesTab = require('../tabs/files-tab')
+var supportTab = require('../tabs/support-tab')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
@@ -31,7 +32,7 @@ var css = csjs`
     bottom             : 0;
     cursor             : col-resize;
     z-index            : 999;
-    border-left        : 2px solid hsla(215, 81%, 79%, .3);    
+    border-left        : 2px solid hsla(215, 81%, 79%, .3);
   }
   .ghostbar           {
     width             : 3px;
@@ -44,7 +45,7 @@ var css = csjs`
     bottom            : 0;
   }
   .panel              {
-    height            : 100%;  
+    height            : 100%;
   }
   .header             {
     height            : 100%;
@@ -70,7 +71,7 @@ function RighthandPanel (appAPI, events, opts) {
       <li class="publishView" title="Publish" >Files</li>
       <li class="debugView" title="Debugger">Debugger</li>
       <li class="staticanalysisView" title="Static Analysis">Analysis</li>
-      <li id="helpButton"><a href="https://remix.readthedocs.org" target="_blank" title="Open Documentation">Docs</a></li>
+      <li class="supportView" title="Help and support">Support</li>
     </ul>
   `
   self._view.dragbar = yo`<div id="dragbar" class=${css.dragbar}></div>`
@@ -92,6 +93,7 @@ function RighthandPanel (appAPI, events, opts) {
   analysisTab(optionViews, appAPI, events, opts)
   debuggerTab(optionViews, appAPI, events, opts)
   filesTab(optionViews, appAPI, events, opts)
+  supportTab(optionViews, appAPI, events, opts)
 
   self.render = function () { return self._view.element }
 

src/app/tabs/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')
+}