add another directive for the centered rows

minor refactorings
Nasicus · Apr 27, 2015 · fdf5ab4 · fdf5ab4
1 parent 96b1524
commit fdf5ab4
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 23 deletions.
diff --git a/ClientApp/App/directives/row-center/row-center.html b/ClientApp/App/directives/row-center/row-center.html
@@ -0,0 +1,10 @@
+<div class="row">
+    <div class="one-third column">
+        &nbsp;
+    </div>
+    <div class="one-third column {{additionalClass}}" data-ng-transclude>
+    </div>
+    <div class="one-third column">
+        &nbsp;
+    </div>
+</div>
diff --git a/ClientApp/App/directives/row-center/row-center.js b/ClientApp/App/directives/row-center/row-center.js
@@ -0,0 +1,15 @@
+(function (app) {
+    "use strict";
+
+    app.directive('ncRowCenter', ["appConfig", function (appConfig) {
+        return {
+            restrict: 'A',
+            transclude: true,
+            scope: {
+                additionalClass: '@'
+            },
+            templateUrl: appConfig.directivesUrl + "row-center/row-center.html"
+        };
+    }]);
+
+}(togglApp));
diff --git a/ClientApp/App/directives/row-input/row-input.js b/ClientApp/App/directives/row-input/row-input.js
@@ -1,10 +1,9 @@
 (function (app) {
     "use strict";
-    
-    app.directive('ngRowInput', ["appConfig", function (appConfig) {
+
+    app.directive('ncRowInput', ["appConfig", function (appConfig) {
         return {
             restrict: 'A',
-            require: '^ngModel',
             scope: {
                 ngModel: '=',
                 title: '@',

diff --git a/ClientApp/index.html b/ClientApp/index.html
@@ -15,15 +15,16 @@
         <script type="text/javascript" src="ClientApp/App/services.js"> </script>
         <script type="text/javascript" src="ClientApp/App/controllers.js"> </script>
         <script type="text/javascript" src="ClientApp/App/directives/row-input/row-input.js"> </script>
+        <script type="text/javascript" src="ClientApp/App/directives/row-center/row-center.js"> </script>
     </head>
     <body>
         <div class="container">
             <h1>Toggl Overtime</h1>
 
-            <div data-ng-row-input data-title="API token" data-input-type="text" data-ng-model="apiToken"></div>
-            <div data-ng-row-input data-title="Start date" data-input-type="date" data-ng-model="startDate"></div>
-            <div data-ng-row-input data-title="End date" data-input-type="date" data-ng-model="endDate"></div>
-            <div data-ng-row-input data-title="Regular working hours per week" data-input-type="number" data-ng-model="regularWorkingHours"></div>
+            <div data-nc-row-input data-title="API token" data-input-type="text" data-ng-model="apiToken"></div>
+            <div data-nc-row-input data-title="Start date" data-input-type="date" data-ng-model="startDate"></div>
+            <div data-nc-row-input data-title="End date" data-input-type="date" data-ng-model="endDate"></div>
+            <div data-nc-row-input data-title="Regular working hours per week" data-input-type="number" data-ng-model="regularWorkingHours"></div>
 
             <div class="row">
                 <div class="four columns">
@@ -35,27 +36,23 @@ <h1>Toggl Overtime</h1>
             </div>
 
             <div class="resultsDiv" data-ng-hide="!showLoadingImage">
-                <img src="ClientApp/Resources/Images/ajax-loader.gif" alt="Loading..." />
+                <div data-nc-row-center>
+                    <img src="ClientApp/Resources/Images/ajax-loader.gif" alt="Loading..." />
+                </div>
             </div>
 
-            <div class="resultsDiv errorDiv" data-ng-hide="!hasError">
-                <h2>Oh no ...an error occured :(</h2>
-                <b>{{errorStatus}}</b>: {{errorMessage}}
+            <div class="resultsDiv" data-ng-hide="!hasError">
+                <div data-nc-row-center data-additional-class="errorDiv">
+                    <h2>Oh no - an error occured :(</h2>
+                    <b>{{errorStatus}}</b>: {{errorMessage}}
+                </div>
             </div>
 
             <div data-ng-hide="!data" class="resultsDiv">
-                <div class="row">
-                    <div class="one-third column">
-                        &nbsp;
-                    </div>
-                    <div class="one-third column">
-                        <h2>Summary</h2>
-                        <b>Total Worktime:</b> {{formatSeconds(data.Worktime)}} <br />
-                        <b>Total Overtime:</b> {{formatSeconds(data.Overtime)}}
-                    </div>
-                    <div class="one-third column">
-                        &nbsp;
-                    </div>
+                <div data-nc-row-center>
+                    <h2>Summary</h2>
+                    <b>Total Worktime:</b> {{formatSeconds(data.Worktime)}} <br />
+                    <b>Total Overtime:</b> {{formatSeconds(data.Overtime)}}
                 </div>
                 <br />
                 <div data-ng-repeat="weeks in weeksInBlocks" class="row">

diff --git a/Toggl.Overtime.csproj b/Toggl.Overtime.csproj
@@ -80,6 +80,8 @@
   <ItemGroup>
     <Content Include="ClientApp\App\app.js" />
     <Content Include="ClientApp\App\controllers.js" />
+    <Content Include="ClientApp\App\directives\row-center\row-center.html" />
+    <Content Include="ClientApp\App\directives\row-center\row-center.js" />
     <Content Include="ClientApp\App\directives\row-input\row-input.html" />
     <Content Include="ClientApp\App\directives\row-input\row-input.js" />
     <Content Include="ClientApp\App\services.js" />