Moved github files into .github folder.

Added more track IDs.
Updated README file with features.

.github/ISSUE_TEMPLATE.md

@@ -1,2 +1,34 @@
 <!-- Love altair? Please consider supporting our collective:
-👉  https://opencollective.com/altair/donate -->
+👉  https://opencollective.com/altair/donate -->
+
+<!--- Provide a general summary of the issue in the Title above -->
+
+## Expected Behavior
+<!--- If you're describing a bug, tell us what should happen -->
+<!--- If you're suggesting a change/improvement, tell us how it should work -->
+
+## Current Behavior
+<!--- If describing a bug, tell us what happens instead of the expected behavior -->
+<!--- If suggesting a change/improvement, explain the difference from current behavior -->
+
+## Possible Solution
+<!--- Not obligatory, but suggest a fix/reason for the bug, -->
+<!--- or ideas how to implement the addition or change -->
+
+## Steps to Reproduce (for bugs)
+<!--- Provide a link to a live example, or an unambiguous set of steps to -->
+<!--- reproduce this bug. Include code to reproduce, if relevant -->
+1.
+2.
+3.
+4.
+
+## Context
+<!--- How has this issue affected you? What are you trying to accomplish? -->
+<!--- Providing context helps us come up with a solution that is most useful in the real world -->
+
+## Your Environment
+<!--- Include as many relevant details about the environment you experienced the bug in -->
+* Version used:
+* Environment name and application type (e.g. Chrome 39, chrome extension v1.4.7):
+* Operating System and version (e.g. Linux, v1.4.7):

README.md

@@ -13,19 +13,87 @@
 
 ![altair logo](src/assets/img/altair_logo_128.png "Altair GraphQL Client")
 
+# Altair GraphQL Client (https://altair.sirmuel.design/)
+
+A graphQL client for making graphQL queries to a graphQL server - similar to Postman but for GraphQL.
+
+Web app: https://altair-gql.firebaseapp.com/
+
+There's a [chrome extension](https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja) and a [firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/altair-graphql-client/).
+
+There are apps for [mac, windows and linux users](https://altair.sirmuel.design/) as well.
 
 ![set url](src/assets/img/readme/set-url.gif "Altair GraphQL Client")
+
+## Features
+
+### Headers
+
+You can add, edit and remove HTTP headers used in making the request. This is particularly useful if you need to add things like authentication token headers when making a request that requires authorized access.
+
+### Variables
+
+You can add [GraphQL variables](http://graphql.org/learn/queries/#variables) to your request. [Variables](http://graphql.org/learn/queries/#variables) make it easy to use dynamic values in your queries.
+
+### Response Stats
+
+You can easily know how long your query takes with the response stats information displayed for each request you make.
+
+### Documentation (via introspection)
+
+You can view the GraphQL schema in a nicely displayed manner with information about the various kinds of queries, types, arguments available to you and some description (where provided) of each of them. This is powered by the [introspection capabilities](http://graphql.org/learn/introspection/) provided by GraphQL. This needs to be enabled from the GraphQL server for it to be available.
+
+### Documentation search
+
+You can also search for a particular item in the docs as well. Useful for when you're not sure where a particular field, type or query is in the schema.
+
+### Syntax highlighting
+
+The syntax of the query in the editor is highlighted for easier parsing.
+
+### Error highlighting
+
+You also get errors in your query highlighted for you as you type out your query.
+
+### Add queries and fragments from documentation
+
+You can easily add a query (or fragment) you see in the documentation into the editor without having to manually type every field within the query. This makes it easier to test and develop with the available queries from the GraphQL server.
 ![add fragment](src/assets/img/readme/add-fragment.gif "Altair GraphQL Client")
 
-# Altair GraphQL Client
+### Autocompletion of fields, arguments, types, etc
 
-A graphQL client for making graphQL queries to a graphQL server - Postman for GraphQL.
+You get an autocomplete list of valid terms you can use as you type out your query in the editor.
 
-<!-- Web app: https://altair-gql.herokuapp.com/ -->
+### Prettify Query
 
-There's a [chrome extension](https://chrome.google.com/webstore/detail/altair-graphql-client/flnheeellpciglgpaodhkhmapeljopja) and a [firefox add-on](https://addons.mozilla.org/en-US/firefox/addon/altair-graphql-client/).
+You can format the query in the editor in a properly indented manner for easier reading. This makes it easy to work with queries you might copy from one file to another, which might have lost their indentation (or were never indented before).
+
+### Compress Query
+
+You can compress the query to a minified form, removing any unnecessary whitespace and comments. You can use this after you have made a query and you want to use it in your client side application. This helps save as many bytes as possible when making network requests.
+
+### History of recent queries
+You can view a list of your recent queries that you make in each window, so you can easily go back to a query you tried previously.
+
+### Multiple Windows
+
+You are not limited to only one window at a time but you can have multiple windows open to work with multiple different queries at the same time. You can also name the various windows (by doubleclicking the name) and arrange them however you like to make it easier to work with them.
+
+### GraphQL Subscriptions
+
+You can test your [GraphQL subscriptions](https://www.apollographql.com/docs/graphql-subscriptions/) without any worry. Just provide the subscription URL and start the subscription, and you would get each message as they are sent once you're subscribed. This is very handy when developing apps that use the realtime feature of GraphQL, like chatting ang gaming applications that need realtime feedback. Currently, GraphQL subscriptions has been implemented by the [Apollo GraphQL team](https://www.apollographql.com/).
+
+### Multiple Languages
+
+You can use Altair with several languages including English, Chinese, French, Spanish, among others. Pull Requests for new languages are also welcome.
+
+### Light and Dark themes
+
+You can use Altair with either the light or the dark theme, depending on which theme you like.
+
+### Missing feature?
 
-There are apps for [mac, windows and linux users](https://github.com/imolorhe/altair/releases/latest) as well.
+Is there a feature that is missing? You can let us know by creating a [new issue](https://github.com/imolorhe/altair/issues/new) or you can add the feature by creating a [Pull Request](https://github.com/imolorhe/altair/blob/staging/CONTRIBUTING.md).
 
 ## Development server
 

src/app/components/query-result/query-result.component.html

@@ -32,7 +32,7 @@
         </div>
       </div>
       <div class="query-result__bottom-actions">
-        <button class="btn btn-link btn-sm" (click)="downloadResultChange.next()">
+        <button track-id="download_result" class="btn btn-link btn-sm" (click)="downloadResultChange.next()">
           <clr-icon shape="download"></clr-icon>
           {{ 'QUERY_RESULT_DOWNLOAD_RESULT_BUTTON' | translate }}
         </button>
@@ -54,7 +54,7 @@
             </div>
           </div>
           <div class="subscription-result__actions-right">
-            <button class="subscription-stop-button" (click)="stopSubscriptionChange.next()">Stop</button>
+            <button track-id="stop_subscription" class="subscription-stop-button" (click)="stopSubscriptionChange.next()">Stop</button>
           </div>
       </div>
       <div class="subscription-result__list-wrapper">

src/app/components/settings-dialog/settings-dialog.component.html

@@ -28,7 +28,7 @@ <h3 class="modal-title">
   </div>
   <div class="modal-footer">
     <div class="app-dialog-footer">
-      <button class="app-button active-primary right" (click)="toggleDialogChange.next(false)">{{ 'SAVE_BUTTON' | translate }}</button>
+      <button track-id="save_settings" class="app-button active-primary right" (click)="toggleDialogChange.next(false)">{{ 'SAVE_BUTTON' | translate }}</button>
     </div>
   </div>
 </clr-modal>

src/app/components/url-box/url-box.component.html

@@ -5,11 +5,11 @@
       <clr-icon shape="angle down"></clr-icon>
     </button>
     <clr-dropdown-menu *clrIfOpen>
-      <button *ngFor="let method of methods" type="button" clrDropdownItem [value]="method" (click)="setVerb(method)">{{method}}</button>
+      <button track-id="http_verb_method" *ngFor="let method of methods" type="button" clrDropdownItem [value]="method" (click)="setVerb(method)">{{method}}</button>
     </clr-dropdown-menu>
   </clr-dropdown>
   <div class="url-box__input-container">
-    <input #urlInput type="text" class="url-box__input" placeholder="Enter URL" (blur)="setApiUrl()" (keyup.enter)="setApiUrl()"
+    <input track-id="set_url" #urlInput type="text" class="url-box__input" placeholder="Enter URL" (blur)="setApiUrl()" (keyup.enter)="setApiUrl()"
          [value]="apiUrl">
     <div class="url-box__input-actions">
       <clr-tooltip>

src/app/components/window-switcher/window-switcher.component.html

@@ -13,9 +13,10 @@
       (blur)="saveWindowName(windowId, wTitle.innerText)"
       (keydown.enter)="saveWindowName(windowId, wTitle.innerText)"
     >{{ windows[windowId].layout.title }}</div>
-    <div class="window-switcher__close" *ngIf="windowIds.length > 1" (click)="removeWindowChange.next(windowId)">&#x00D7;</div>
+    <div track-id="close_window_tab" class="window-switcher__close" *ngIf="windowIds.length > 1" (click)="removeWindowChange.next(windowId)">&#x00D7;</div>
   </div>
   <div
+     track-id="new_window_tab"
     class="nav-link nav-text window-switcher window-switcher--new-window _track_me"
     (click)="newWindowChange.next($event)"
     *ngIf="windowIds.length < maxWindowCount">

src/app/containers/window/window.component.html

@@ -89,7 +89,7 @@ <h3 class="modal-title">
         </div>
         <div class="modal-footer">
           <div class="app-dialog-footer">
-            <button class="app-button active-grey left" (click)="addHeader()">{{ 'ADD_HEADER_TEXT' | translate }}</button>
+            <button track-id="add_header" class="app-button active-grey left" (click)="addHeader()">{{ 'ADD_HEADER_TEXT' | translate }}</button>
             <button class="app-button active-primary right" (click)="toggleHeader($event)">{{ 'SAVE_BUTTON' | translate }}</button>
           </div>
         </div>