changed

vickykatoch · Dec 5, 2015 · ac02b4b · ac02b4b
1 parent 83b571a
commit ac02b4b
Show file tree

Hide file tree

Showing 13 changed files with 115 additions and 11 deletions.
diff --git a/app/assets/images/Thumbs.db b/app/assets/images/Thumbs.db
diff --git a/app/assets/images/logo.jpg b/app/assets/images/logo.jpg
diff --git a/app/assets/styles/app.css b/app/assets/styles/app.css
@@ -1,5 +1,6 @@
 body {
     font-family: "Open Sans", Arial, sans-serif;
+    line-height: 1;
 }
 
 .container-fluid {

diff --git a/bower.json b/bower.json
@@ -29,6 +29,7 @@
   "dependencies": {
     "angular": "~1.4.8",
     "jquery": "~2.1.4",
-    "bootstrap": "~3.3.6"
+    "bootstrap": "~3.3.6",
+    "font-awesome": "~4.5.0"
   }
 }
diff --git a/dist/avamUI.controller.js b/dist/avamUI.controller.js
@@ -1 +1,17 @@
-
+var avam;
+(function (avam) {
+    var ui;
+    (function (ui) {
+        var AvamUIModelController = (function () {
+            function AvamUIModelController() {
+                this.isMenuVisible = true;
+                this.isMenuVertical = true;
+                this.isMenuLayoutToggleAllowed = true;
+            }
+            AvamUIModelController.prototype.contructor = function () {
+            };
+            return AvamUIModelController;
+        })();
+        ui.AvamUIModelController = AvamUIModelController;
+    })(ui = avam.ui || (avam.ui = {}));
+})(avam || (avam = {}));
diff --git a/dist/avamUI.directive.js b/dist/avamUI.directive.js
@@ -1,17 +1,26 @@
 /// <reference path="../typings/angularjs/angular.d.ts" />
+/// <reference path="./avamUI.controller.ts" />
 var avam;
 (function (avam) {
     var ui;
     (function (ui) {
         var AvamUIDirective = (function () {
             function AvamUIDirective() {
                 this.transclude = true;
-                this.scope = {};
+                this.scope = {
+                    title: '@',
+                    subTitle: '@',
+                    iconFile: '@'
+                };
+                this.controllerAs = 'vm';
                 this.templateUrl = './src/avamUI.template.html';
+                this.controller = ui.AvamUIModelController;
             }
             AvamUIDirective.instance = function () {
                 return new AvamUIDirective;
             };
+            AvamUIDirective.prototype.link = function (scope, element, attributes, controller) {
+            };
             return AvamUIDirective;
         })();
         angular.module("avamUI").directive("avamUi", AvamUIDirective.instance);

diff --git a/favicon.ico b/favicon.ico
diff --git a/gulpfile.js b/gulpfile.js
@@ -23,4 +23,8 @@ gulp.task('compile:ts', function(){
             noImplicitAny: true
            }))
         .pipe(gulp.dest(gulpConfig.outputPath));
+});
+
+gulp.task('watch', function(){
+    gulp.watch(gulpConfig.typeScriptSourceFiles, ['clean','compile:ts']);
 });
diff --git a/index.html b/index.html
@@ -2,18 +2,20 @@
 <html ng-app="avam">
 	<head>
 		<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
+		<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.css">
 		<link rel="stylesheet" href="src/avamUi.css">
 		<link rel="stylesheet" href="app/assets/styles/app.css">
 	</head>
 	<body class="container-fluid">
 
-		<avam-ui></avam-ui>
+		<avam-ui title="AVAM" sub-title="A Framework Framework" icon-file="app/assets/images/logo.jpg"></avam-ui>
 
 		<script src="lib/jquery/dist/jquery.js"></script>
 		<script src="lib/angular/angular.js"></script>
 
 		<script src="dist/avamUI.module.js"></script>
 		<script src="dist/avamUI.directive.js"></script>
+		<script src="dist/avamUI.controller.js"></script>
 
 		<script src="app/app.module.js"></script>
 

diff --git a/src/avamUI.controller.ts b/src/avamUI.controller.ts
@@ -1,7 +1,17 @@
 module avam.ui{
-	export interface IAvamUIModel{
+	export interface IAvamUIControllerModel{
 		isMenuVisible:boolean;
 		isMenuVertical:boolean;
 		isMenuLayoutToggleAllowed:boolean;
 	}
+
+	export class AvamUIModelController implements IAvamUIControllerModel{
+		isMenuVisible:boolean=true;
+		isMenuVertical:boolean=true;
+		isMenuLayoutToggleAllowed:boolean=true;
+
+		contructor(){
+		}
+
+	}
 }
diff --git a/src/avamUI.directive.ts b/src/avamUI.directive.ts
@@ -1,19 +1,33 @@
 /// <reference path="../typings/angularjs/angular.d.ts" />
+/// <reference path="./avamUI.controller.ts" />
+
 
 module avam.ui{
 
-
-
-
+	interface IAvamUIAttributes extends ng.IAttributes{
+		title:string;
+		subTitle:string;
+		iconFile:string;
+	}
+
 	class AvamUIDirective implements ng.IDirective{
 
 		static instance() : ng.IDirective{
 			return new AvamUIDirective;
 		}
 		transclude=true;
 		scope = {
+			title:'@',
+			subTitle:'@',
+			iconFile:'@'
 		};
+		controllerAs = 'vm';
 		templateUrl = './src/avamUI.template.html';
+		controller = AvamUIModelController;
+		link(scope: ng.IScope, element: ng.IAugmentedJQuery,
+            attributes: IAvamUIAttributes, controller: IAvamUIControllerModel): void {
+
+			}
 	}	
 	angular.module("avamUI").directive("avamUi", AvamUIDirective.instance);
 }
diff --git a/src/avamUI.template.html b/src/avamUI.template.html
@@ -1,6 +1,20 @@
-<div class="avam-ui">	
+<div class="avam-header">	
 	<div class="row">
-		<div class="col-sm-6">Left</div>
-		<div class="col-sm-6">Right</div>
+		<div class="col-sm-6 avam-logo-area">
+			<img ng-src="{{iconFile}}" class="avam-icon"/>
+			<div class="avam-title-area">
+				<p class="avam-logo-title">{{title}}</p>
+				<p class="avam-logo-subtitle">{{subTitle}}</p>						
+			</div>
+			<div ng-if="vm.isMenuVisible" class="avam-collapsed-menu pull-right">
+				<button type="button" class="btn ps-nav-button">
+                    <i class="fa fa-bars"></i>
+                </button>
+			</div>		
+		</div>
+		<div class="col-sm-6">
+
+
+		</div>
 	</div>
 </div>
diff --git a/src/avamUi.css b/src/avamUi.css
@@ -0,0 +1,33 @@
+.avam-header{
+	background-color: white;
+    padding: 0 10px;
+    border-bottom: 2px solid red;
+    vertical-align: middle;
+}
+.avam-logo-area{
+
+}
+.avam-icon{
+	display: inline-block;
+    width: 50px;
+    height: 50px;
+    margin: 8px;
+    vertical-align: top;
+    border: 1px solid #999;
+}
+.avam-title-area{
+    display: inline-block;
+}
+.avam-logo-title{
+    color: #111;
+    margin-top: 6px;
+    font-size: 22px;
+}
+.avam-logo-subtitle{
+    font-size: 13px;
+    margin-top: -13px;
+}
+.avam-collapsed-menu {
+    display: inline-block;
+    height: 100%;
+}