update popup and set stage api

Gulpfile.js

@@ -46,6 +46,16 @@ gulp.task('styl', function () {
     .pipe(notify('Stylus!!'))
 })
 
+gulp.task('styl-popup', function () {
+  return gulp.src('src/browser/popup/styles/app.styl')
+    .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
+    .pipe(styl())
+    .pipe(autoprefixer())
+    .pipe(gulp.dest('src/browser/popup/styles/'))
+    .pipe(livereload())
+    .pipe(notify('Stylus!! @POPUP'))
+})
+
 gulp.task('bs', function () {
   return gulp.src('src/browser/shared/styles/bootstrap.styl')
     .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
@@ -76,6 +86,7 @@ gulp.task('watch-main', function () {
     ['src/browser/main/index.inject.html', 'src/browser/main/**/*.js', 'src/browser/main/**/*.css', 'src/browser/shared/**/*.js', 'src/browser/shared/**/*.css'], ['inject-main'])
 
   gulp.watch('src/browser/main/styles/**/*.styl', ['styl'])
+  gulp.watch('src/browser/popup/styles/**/*.styl', ['styl-popup'])
   gulp.watch('src/browser/shared/styles/**/*.styl', ['bs'])
   livereload.listen()
 })

src/browser/main/tpls/directives/side-nav.tpl.html

@@ -21,8 +21,8 @@
 
 <div class="new-block">
   <div class="btn-group" dropdown>
-     <button btn-new-snippet type="button" class="btn btn-success"><i class="fa fa-plus-square-o fa-fw"></i> New Snippet</button>
+     <button ng-disabled="!vm.isAuthenticated" btn-new-snippet type="button" class="btn btn-success"><i class="fa fa-plus-square-o fa-fw"></i> New Snippet</button>
-     <button type="button" class="btn btn-success dropdown-toggle" dropdown-toggle>
+     <button ng-disabled="!vm.isAuthenticated" type="button" class="btn btn-success dropdown-toggle" dropdown-toggle>
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
      </button>

src/browser/popup/index.html

@@ -13,6 +13,7 @@
     <link rel="stylesheet" href="../vendor/css/font-awesome.css" media="screen" title="no title" charset="utf-8">
 
     <!-- inject:css -->
+    <link rel="stylesheet" href="styles/app.css">
     <link rel="stylesheet" href="../shared/styles/bootstrap.css">
     <!-- endinject -->
 
@@ -25,14 +26,12 @@
 
     <div class="result-block row-fluid">
       <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <small ng-bind="snippet.callSign"></small>&nbsp;/&nbsp;<span ng-bind="snippet.description"></span></a></li>
       </ul>
 
       <div class="right-pane">
         <div class="result-detail-control">
           <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <!-- <button ng-click="editSnippet(selectedItem.id)" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button> -->
-          <!-- <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
         </div>
         <div id="aceView" class="result-detail-content"
           ui-ace="{

src/browser/popup/index.inject.html

@@ -24,14 +24,12 @@
 
     <div class="result-block row-fluid">
       <ul id="result-list" class="result-list left-pane">
-        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <span ng-bind="snippet.callSign"></span> <small ng-bind="snippet.description"></small></a></li>
+        <li ng-click="selectSnippet($index)" ng-repeat="snippet in filteredSnippets" ng-class="{active:$index == selectIndex}"><a href="#"> <small ng-bind="snippet.callSign"></small>&nbsp;/&nbsp;<span ng-bind="snippet.description"></span></a></li>
       </ul>
 
       <div class="right-pane">
         <div class="result-detail-control">
           <button ng-click="writeCode(selectedItem.content)" id="btnClipboard" type="button" name="button" class="btn btn-default"><i class="fa fa-clipboard"></i></button>
-          <!-- <button ng-click="editSnippet(selectedItem.id)" id="btnEdit" type="button" name="button" class="btn btn-default"><i class="fa fa-edit"></i></button> -->
-          <!-- <button id="btnShare" type="button" name="button" class="btn btn-default"><i class="fa fa-share"></i></button> -->
         </div>
         <div id="aceView" class="result-detail-content"
           ui-ace="{
@@ -50,6 +48,7 @@
     <script src="../vendor/ace.js"></script>
     <script src="../vendor/angular.js" charset="utf-8"></script>
     <script src="../vendor/satellizer.js"></script>
+    <script src="../vendor/hotkeys.js" charset="utf-8"></script>
 
     <!-- inject:js -->
     <!-- endinject -->

src/browser/popup/styles/_popup.styl

@@ -26,6 +26,7 @@
       padding: 0
       border-right: 1px solid $baseBorderColor
       li
+        white-space nowrap
         &:nth-child(even)
           background-color $baseBackgroundColor
         &:nth-child(odd)

src/browser/popup/styles/app.css

@@ -0,0 +1,68 @@
+.popup-body .search-block {
+  padding: 5px;
+  height: 44px;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.popup-body .result-block {
+  position: absolute;
+  top: 44px;
+  bottom: 0;
+  width: 100%;
+  overflow: hidden;
+}
+.popup-body .result-block .left-pane {
+  margin: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 40%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.popup-body .result-block .result-list {
+  list-style: none;
+  padding: 0;
+  border-right: 1px solid #001a20;
+}
+.popup-body .result-block .result-list li {
+  white-space: nowrap;
+}
+.popup-body .result-block .result-list li:nth-child(even) {
+  background-color: #002b36;
+}
+.popup-body .result-block .result-list li:nth-child(odd) {
+  background-color: #00323f;
+}
+.popup-body .result-block .result-list li.active {
+  color: #fff;
+  background-color: #088cff;
+}
+.popup-body .result-block .result-list li a {
+  display: block;
+  padding: 5px 10px;
+  border-bottom: 1px solid #001a20;
+}
+.popup-body .result-block .right-pane {
+  position: absolute;
+  left: 40%;
+  top: 0;
+  bottom: 0;
+  width: 60%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+.popup-body .result-block .result-detail-control {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 34px;
+}
+.popup-body .result-block .result-detail-content {
+  position: absolute;
+  top: 34px;
+  bottom: 0;
+  width: 100%;
+}

src/browser/shared/config/env.js

@@ -1,4 +1,4 @@
 /* global angular */
 angular.module('codexen.shared')
-  .constant('apiUrl', 'http://localhost:8000/')
+  // .constant('apiUrl', 'http://localhost:8000/')
-  // .constant('apiUrl', 'http://codexen-server-dev.elasticbeanstalk.com/')
+  .constant('apiUrl', 'http://codexen-server-dev.elasticbeanstalk.com/')

src/main.js

@@ -87,16 +87,14 @@ app.on('ready', function () {
 
   var fromMain
   // Register a 'ctrl+x' shortcut listener.
-  var ret = globalShortcut.register('ctrl+tab+shift', function () {
+  globalShortcut.register('ctrl+tab+shift', function () {
     if (popUpWindow.isVisible()) {
       hidePopUp()
       return
     }
     fromMain = mainWindow ? mainWindow.isFocused() : false
     popUpWindow.show()
-
   })
-  if (!ret) console.log('registerion fails')
 
   // MENU
   var Menu = require('menu')