change selection color to normal

chensivan · Feb 21, 2016 · 3cceb49 · 3cceb49
1 parent fa49b88
commit 3cceb49
Show file tree

Hide file tree

Showing 4 changed files with 261 additions and 85 deletions.
diff --git a/lib/response/responseView.js b/lib/response/responseView.js
@@ -1,13 +1,15 @@
 var $ = require('jquery'),
-	ResizableWidthView = require('./resizable-width-view'),
-	angular = require('angular'),
-	angular_route = require('angular-route'),
-	_ = require('underscore'),
-	helpers = require('atom-helpers'),
-	fs = require('fs'),
-	path = require('path'),
-	ng_chartjs = require('angular-chart.js'),
-	ng_highlightjs = require('angular-highlightjs');
+		ResizableWidthView = require('./resizable-width-view'),
+		angular = require('angular'),
+		angular_route = require('angular-route'),
+		_ = require('underscore'),
+		angular_animate = require('angular-animate'),
+		less = require('less'),
+		helpers = require('atom-helpers'),
+		fs = require('fs'),
+		path = require('path'),
+		ng_chartjs = require('angular-chart.js'),
+		ng_highlightjs = require('angular-highlightjs');
 
 module.exports = VizView;
 

diff --git a/lib/response/views/main.view.html b/lib/response/views/main.view.html
@@ -1,69 +1,37 @@
 
-<style>
-body {
-    background: #eeeeee;
-}
-.panel {
-    /*display: inline-block;*/
-		/*overflow-y:disabled;*/
+<div id="theList" ng-controller='MainController' class="panel wrapper">
 
-		width: 325px;
-    background: #ffffff;
-    box-shadow:0px 0px 5px 5px #C9C9C9;
-    -webkit-box-shadow:2px 2px 5px 5x #C9C9C9;
-    -moz-box-shadow:2px 2px 5px 5px #C9C9C9;
-    margin: 10px;
-    padding: 10px;
-}
-.panel1 {
-    min-width: 100px;
-    width: 325px;
-}
-.panel2 {
-    min-width: 245px;
-    width: 325px;
-
-}
-
-
-</style>
-
-
-
-
-<div id="theList" ng-controller='MainController'>
-	<div class="panel panel2" ng-click="titleClick(title)">{{title}}</div>
-
-	<div class="panel panel2" ng-show="resList" ng-repeat="obj in myArr" id="{{obj.id}}" ng-click="myClick(obj)">
-		<p>{{ obj.request }} </p>
+	<div class="title" ng-click="titleClick(title)">
+	  <i class="ion-android-arrow-back back-arrow" ng-hide="location === 'responseList'"></i>
+	  <span class="title-text">{{selectedObj.request || title}}</span>
 	</div>
-
-	<div ng-if="selectedObj" ng-show="responseContent" ng-controller='ShowRequest' >
-
-
-		<div class="panel panel2">Request: {{selectedObj.request}}</div>
-		<div class="panel panel2" >
-			<p>{{selectedObj.status}}</p>
-		<div>
-		<div class="panel panel2" ng-repeat="response in selectedObj.responseContent" ng-click="subResponseClick(response)" ng-style="{ 'width' : width, 'background' : bgColor }">
-
-			<p>{{response.type}}</p>
-			<p>{{response.response}}</p>
-			<br>
-		</div>
-
-
-
-		<button ng-show="selectedObj" ng-click="merge(selectedObj)">Merge</button>
-		<button ng-show="selectedObj" ng-click="nah(selectedObj)">Nah..</button>
-		<div ng-show="isRejecting">
-			<p>Why?</p>
-			<input type="text" ng-model="inputs.iterationMsg">
-		  </br>
-			<button ng-click="iterate(inputs.iterationMsg)">Please iterate!</button>
-		</div>
-
+  <div class="content-wrapper">
+    <div ng-show="resList" class="request-list">
+    	<div class="request-item" ng-repeat="obj in myArr" id="{{obj.id}}" ng-click="myClick(obj)">
+    		<p>Request: {{ obj.request }} </p>
+    	</div>
+    </div>
+
+  	<div ng-show="selectedObj && responseContent" ng-controller='ShowRequest' class="request-content">
+  		<div class="">
+  			<p>Status: <span ng-style="{'background': selectedObj.status === 'Solved' ? 'green' : 'red'}" class="status">
+  			  {{selectedObj.status}}</span>
+  			</p>
+  		</div>
+  		<div class="sub-response" ng-repeat="response in selectedObj.responseContent"
+  		  ng-click="subResponseClick(response)" ng-style="{'background' : bgColor }">
+
+  			<p class="type">Type: {{response.type}}</p>
+  			<p class="response">{{response.response}}</p>
+  		</div>
+
+  		<button class="response-button" ng-show="selectedObj" ng-click="merge(selectedObj)">Merge</button>
+  		<button class="response-button" ng-show="selectedObj" ng-click="nah()">Nah..</button>
+    </div>
+	</div>
+	<div ng-show="isRejecting" class="reject-controls">
+		<p>Why?</p>
+		<input type="text" ng-model="inputs.iterationMsg">
+		<button class="response-button" ng-click="iterate(inputs.iterationMsg)">Please iterate!</button>
 	</div>
-
-
 </div>
diff --git a/package.json b/package.json
@@ -28,12 +28,14 @@
     "stacktrace-parser": "^0.1.3",
     "temp": "^0.8.1",
     "angular": "~1.4",
-	"angular-route": "~1.4",
-	"underscore": "~1.8",
-	"angular-chart.js": "https://github.com/umso/angular-chart.js.git",
-	"underscore": "~1.8",
-	"highlight.js": "~9.1",
-	"angular-highlightjs": "~0.5",
+    "less": "~2.6",
+    "angular-animate": "~1.5",
+  	"angular-route": "~1.4",
+  	"underscore": "~1.8",
+  	"angular-chart.js": "https://github.com/umso/angular-chart.js.git",
+  	"underscore": "~1.8",
+  	"highlight.js": "~9.1",
+  	"angular-highlightjs": "~0.5",
     "angular-socket-io": "~0.7",
     "node-diff3": "~0.0.1"
   }

diff --git a/styles/responses.less b/styles/responses.less
@@ -5,7 +5,22 @@
 
 @import "ui-variables";
 
- atom-panel.right {
+
+@color-utility: #EEE;
+@color-utility-primary: #FFF;
+
+@color-widget-text: #DDD;
+@color-widget-background: #444;
+
+@shadow-light: 0px 0px 5px 0px rgba(0,0,0,0.1);
+@shadow-medium: 0px 0px 5px 0px rgba(0,0,0,0.5);
+@shadow-medium-primary: 0px 0px 5px 0px rgba(0,0,0,0.8);
+
+@transition-duration: 250ms;
+@transition-widget-duration: 100ms;
+
+
+atom-panel.right {
     background-color: #FFF;
  }
 .zi-mainview {
@@ -42,10 +57,10 @@ atom-text-editor /deep/ .line.delete{
 // atom-text-editor::shadow .lines .line.cursor-line {
 //   background-color: red;
 // }
-
-atom-text-editor::shadow .selection .region {
-  background-color: LightGoldenRodYellow;
-}
+// 
+// atom-text-editor::shadow .selection .region {
+//   background-color: LightGoldenRodYellow;
+// }
 
 .zi-width-resizer {
 	position: absolute;
@@ -114,7 +129,7 @@ atom-text-editor::shadow .selection .region {
   transform-style: preserve-3d;
 
   div {
-    color:yellow;
+    color:green;
     padding: 14px;
     font-size: 18px;
     background-color: #38A824;
@@ -132,3 +147,192 @@ atom-text-editor::shadow .selection .region {
 atom-text-editor::shadow .highlight.test-pkg-highlight .region {
   background-color: rgb(21,100,100);
 }
+
+
+
+
+.panel {
+    /*display: inline-block;*/
+		overflow: auto;
+		min-width: 325px;
+		// Set this to set global width:
+		width: auto;
+    background: @color-utility-primary;
+    box-shadow: @shadow-light;
+    margin: 10px;
+    font-family: Arial, sans-serif;
+
+    p {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+}
+
+
+.title {
+  position: relative;
+  z-index: 30;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  height: 48px;
+  line-height: 48px;
+  padding-left: 10px;
+
+  font-family: sans-serif;
+  font-size: 16px;
+  white-space: nowrap;
+
+  color: @color-widget-text;
+  background-color: @color-widget-background;
+  box-shadow: @shadow-medium;
+  cursor: default;
+
+  .back-arrow {
+    font-size: 28px;
+    margin-right: 5px;
+    opacity: 1;
+    cursor: pointer;
+
+    transition: all @transition-duration;
+
+    &.ng-hide {
+      opacity: 0;
+      margin-right: -23px;
+    }
+  }
+
+  .title-text {
+    vertical-align: top;
+  }
+
+}
+
+
+.content-wrapper {
+  overflow: hidden;
+  position: relative;
+  z-index: 20;
+  padding: 10px;
+  background-color: @color-utility-primary;
+
+  .request-list {
+    // Transition Animation
+    opacity: 1;
+    transition: all @transition-duration;
+
+    &.ng-hide {
+      position: absolute;
+      opacity: 0;
+    }
+    // End Transition Animation
+
+
+    .request-item {
+      padding: 10px;
+      margin-bottom: 8px;
+      border-radius: 2px;
+      background-color: rgba(0,0,0,0.1);
+      box-shadow: inset @shadow-light;
+      cursor: pointer;
+    }
+  }
+
+  .request-content {
+    // Transition Animation
+    opacity: 1;
+    transition: all @transition-duration;
+
+    &.ng-hide {
+      position: absolute;
+      opacity: 0;
+    }
+    // End Transition Animation
+    .status {
+      display: inline-block;
+      padding: 2px 5px;
+      border-radius: 2px;
+      color: @color-utility;
+      font-weight: bold;
+    }
+
+    .sub-response {
+      overflow: hidden;
+      width: 100%;
+      margin: 8px 0px;
+      border-radius: 2px;
+      box-shadow: inset @shadow-medium;
+      color: @color-utility;
+
+      .type {
+        margin: 0;
+        padding: 8px;
+        background-color: rgba(0,0,0,0.17);
+      }
+
+      .response {
+        margin: 0;
+        padding: 8px;
+      }
+    }
+  }
+}
+
+.response-button {
+  border: none;
+  outline: none;
+
+  border-radius: 2px;
+  padding: 8px 10px;
+  font-size: 16px;
+
+  color: @color-widget-text;
+  background-color: @color-widget-background;
+  box-shadow: @shadow-medium;
+  cursor: pointer;
+
+  transition: all @transition-widget-duration;
+
+  &:hover {
+    color: @color-utility-primary;
+    box-shadow: @shadow-medium-primary;
+  }
+
+  &:active {
+    background-color: darken(@color-widget-background, 50);
+    box-shadow: @shadow-medium;
+  }
+}
+
+.reject-controls {
+  position: relative;
+  z-index: 10;
+  padding: 8px;
+  margin-bottom: 0px;
+  border-top: 2px solid @color-widget-background;
+  background-color: darken(@color-utility, 10);
+
+  opacity: 1;
+  transition: opacity @transition-duration, margin @transition-duration;
+
+  &.ng-hide {
+    opacity: 0;
+    margin-top: -200px;
+    margin-bottom: 200px;
+  }
+
+  input {
+    border: none;
+    outline: none;
+    border-radius: 2px;
+    padding: 8px 10px;
+    font-size: 16px;
+    box-shadow: inset @shadow-medium;
+
+    transition: box-shadow @transition-widget-duration;
+
+    &:focus {
+      box-shadow: inset @shadow-medium-primary;
+    }
+  }
+}