ui minor change + user can remove steps

Halleck45 · Oct 17, 2012 · c4ac2c1 · c4ac2c1
1 parent 294a622
commit c4ac2c1
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 48 deletions.
diff --git a/web/app/controllers/FeatureDetailController.js b/web/app/controllers/FeatureDetailController.js
@@ -10,24 +10,39 @@ function FeatureDetailController($scope, FeatureService, $http) {
     $scope.addStep=function(scenario, stepDatas) {
         scenario.addStep(new hbw.entity.step(stepDatas));
     }
+    $scope.addExampleRow=function(scenario) {
+        var max = this.searchVars(scenario).length;
+        var datas = [];
+        var i;
+        for(i = 0 ; i < max ; i++) {
+            datas.push('...');
+        }
+        if(datas.length > 0) {
+            scenario.examples.push(datas);
+        }
+    }
+
+    $scope.removeStep = function(scenario, index) {
+        scenario.removeStep(scenario.steps[index]);
+    }
 
     $scope.addScenario=function(feature) {
         feature.addScenario(new hbw.entity.scenario(
         {
             title:'New scenario',
             steps: [
             {
-                type:'given',
+                type:'Given',
                 'text':'...'
             },
 
             {
-                type:'when',
+                type:'When',
                 'text':'...'
             },
 
             {
-                type:'then',
+                type:'Then',
                 'text':'...'
             }
             ]

diff --git a/web/app/entities/scenario.js b/web/app/entities/scenario.js
@@ -141,6 +141,16 @@ hbw.entity.scenario = function(datas) {
         return this;
     }
 
+    this.removeStep = function(step) {
+        var i;
+        for(i in this.steps) {
+            if(this.steps[i].asString() === step.asString()) {
+                this.steps.splice(i,1);
+                return;
+            }
+        }
+    }
+
 
     /**
      * Call the rendering

diff --git a/web/app/views/partials/feature-detail/main-infos.html b/web/app/views/partials/feature-detail/main-infos.html
@@ -1,19 +1,6 @@
-<div ui-scrollfix="650">
-
-    <div class="well feature-infos-preview">
-        <strong>Feature: {{feature.title}}</strong>:
-        <div class="feature-infos-preview-els">
-            In order {{feature.inorder}}
-            <br />As {{feature.as}}
-            <br />I should {{feature.should}}
-        </div>
-    </div>
+<div ui-scrollfix="+650">
 
     <div class="feature-infos-full">
-        <div class="box-act">
-            <a data-callback-enter="addScenario" data-callback-out="addScenario" class="btn btn-scenario-add btn-scenario-edit">New scenario</a>
-        </div>
-
         <div class="hero-unit">
             <h1>In two words</h1>
             <p>Describe your feature here in a few words</p>

diff --git a/web/app/views/partials/feature-detail/scenarios.html b/web/app/views/partials/feature-detail/scenarios.html
@@ -18,7 +18,7 @@
                 <li ng-repeat="step in scenario.steps">
                     <span class="step-prev">
                         <span class="step-prev-actions">
-                            <i class="icon icon-remove-circle" title="Remove this step" ui-jq="tooltip" ></i>
+                            <i class="icon icon-remove-circle" ng-click="removeStep(scenario, $index)" title="Remove this step" ui-jq="tooltip" ></i>
                             <i class="icon icon-th" title="Click here to add examples"ui-jq="tooltip" ></i>
                         </span>
                         <span class="step-type step-type-{{step.type}}">{{step.type}}</span>
@@ -35,9 +35,9 @@
 
 
         <div class="scenario-edit-actions">
-            <button class="btn" ng-click="addStep( scenario, {type:'Given', text:'...'} );"><i class="icon icon-plus-sign"></i> Pre-requisites</button>
-            <button class="btn" ng-click="addStep( scenario, {type:'When', text:'...'} );"><i class="icon icon-plus-sign"></i> Event</button>
-            <button class="btn" ng-click="addStep( scenario, {type:'Then', text:'...'} );"><i class="icon icon-plus-sign"></i> Expected result</button>
+            <button class="def-hide  btn" ng-click="addStep( scenario, {type:'Given', text:'...'} );"><i class="icon icon-plus-sign"></i> Pre-requisites</button>
+            <button class="def-hide  btn" ng-click="addStep( scenario, {type:'When', text:'...'} );"><i class="icon icon-plus-sign"></i> Event</button>
+            <button class="def-hide  btn" ng-click="addStep( scenario, {type:'Then', text:'...'} );"><i class="icon icon-plus-sign"></i> Expected result</button>
         </div>
 
         <div class="scenario-examples" ui-show="searchVars(scenario).length > 0">
@@ -49,11 +49,21 @@ <h5>Examples:</h5>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr ng-repeat="row in searchValues(scenario.examples)">
-                        <td ng-repeat="cell in row">{{cell}}</td>
+                    <tr ng-repeat="row in searchValues(scenario.examples)" ng-class="{'hide':$first}">
+                        <td ng-repeat="cell in row">
+                            <textarea placeholder="..." class="span8 input-scenario-title" ui-codemirror="{
+                                      mode:'text/javascript',
+                                      matchBracket:false
+                                      }" ng-model="cell"></textarea>
+                        </td>
                     </tr>
                 </tbody>
             </table>
+
+            <div class="def-hide">
+                <button class="def-hide btn btn-small" ng-click="addExampleRow(scenario)">add row</button> 
+                <br /><i class="icon icon-info-sign"></i> <i>Use the &lt;name1&gt; notation in any step to add new column</i>
+            </div>
         </div>
     </div>
 </div>

diff --git a/web/css/style.css b/web/css/style.css
@@ -23,33 +23,15 @@
 .ui-hide {
     display:none;
 }
-.feature-infos-container .feature-infos-preview {
-    -moz-opacity: 0.00;
-    opacity: 0.00;
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
-    position:fixed;
-    top:0px;
-    width:620px;
-}
-.feature-infos-container .ui-scrollfix .feature-infos-preview {
-    -moz-opacity: 1;
-    opacity: 1;
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
-    -webkit-transition: all 0.5s ease-in-out;
-    -moz-transition: all 0.5s ease-in-out;
-    -o-transition: all 0.5s ease-in-out;
-    -ms-transition: all 0.5s ease-in-out;
-    transition: all 0.5s ease-in-out;
-}
 .feature-infos-container .ui-scrollfix {
     -moz-opacity: 1;
     opacity: 1;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
 }
 .feature-infos-container .ui-scrollfix .feature-infos-full {
-    -moz-opacity: 0.00;
-    opacity: 0.00;
-    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=0);
+    -moz-opacity: 0.30;
+    opacity: 0.30;
+    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=3);
     -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
     -o-transition: all 0.5s ease-in-out;
@@ -68,7 +50,7 @@
 .step-prev {
     float:left;
 }
-.scenario-edit-actions {
+.def-hide {
     -moz-opacity: 0.3;
     opacity: 0.3;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30);
@@ -77,10 +59,11 @@
     -o-transition: all 0.3s ease-in-out;
     -ms-transition: all 0.3s ease-in-out;
     transition: all 0.3s ease-in-out;
-
+}
+.scenario-edit-actions {
     padding:0 0 10px 40px;
 }
-.scenario-edit:hover .scenario-edit-actions {
+.scenario-edit:hover .def-hide {
     -moz-opacity: 1;
     opacity: 1;
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
@@ -105,7 +88,7 @@
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=100);
 }
 .edit-scenario-step li:hover {
-    background:#F5F5F5;
+    background:#FFF;
 }
 /* ----- examples ----- */
 .scenario-examples .table {