added bootstrap classes to resolve following.

1.added scrollbar and left tool bar is now behaves(on dragginf of jspanel) within jspanel. 2 .the title bar is taking full width 3. male-femakle button in DA are now highlighted correctly. 4. layer change slider is now with its full height.

added bootstrap classes to resolve following.
1.added scrollbar and left tool bar is now behaves(on dragginf of jspanel) within jspanel. 2 .the title bar is taking full width 3. male-femakle button in DA are now highlighted correctly. 4. layer change slider is now with its full height.
Nikita Kulshreshtha
1 parent eb153fe9
Showing 7 changed files with 72 additions and 59 deletions
400-SOURCECODE/AIAHTML5.Web/MainMenu.html
400-SOURCECODE/AIAHTML5.Web/app/controllers/DAController.js
400-SOURCECODE/AIAHTML5.Web/app/views/da/da-view.html
400-SOURCECODE/AIAHTML5.Web/content/css/main.css
400-SOURCECODE/AIAHTML5.Web/libs/jquery/1.11.4/jquery-ui.js
400-SOURCECODE/AIAHTML5.Web/libs/jquery/jquery_plugin/jsPanel/jspanel/jquery.jspanel.css
400-SOURCECODE/AIAHTML5.Web/themes/default/css/bootstrap/3.3.6/main.css
-<div class="bodyWrap row" >
+<div class="bodyWrap row container-fluid">
     <div class="col-sm-12 col-md-12 pageHeading">
         <!--<button type="button" class="btn btn-success pull-left toggleBar btn-sm" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar"> <i class="fa fa-bars"></i> </button>-->
         <div class=" pull-left toggleBar toggleHeadingButton" data-toggle="tooltip" data-placement="top" title="Show/Hide Sidebar" style="padding-left: 15px; "> <i class="fa fa-bars"></i> </div>
@@ -29,7 +29,7 @@
     </div>
     <div class="main">
         <div class="col-sm-12">
-                <div align="center" id="MainImage"><img src="content/images/img1.png" alt="" title="" class="img-responsive"></div>
+            <div align="center" id="MainImage"><img src="content/images/img1.png" alt="" title="" class="img-responsive"></div>
             <div ng-view></div>
         </div>
     </div>
@@ -23,7 +23,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
         //get the DA body view list based on selected gender
         $scope.getDAViewList = function ($event) {
-          //  debugger;
+          //debugger;
             if ($('#MainImage') != null) {
                 $('#MainImage').remove();
             }
@@ -36,8 +36,17 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
             else {
                 $scope.genderId = $event.currentTarget.id;
             }
-          //  $($event.currentTarget.id).addClass("active");
+            if ($event != null) {
+                if ($event.currentTarget.id == "Male") {
+                    $('#Male').addClass('active');
+                    $('#Female').removeClass("active");
+                    }
+                else{
+                    $('#Female').addClass('active');
+                    $('#Male').removeClass("active");
+                }
+            }
                 $scope.selectedGenderBodyViewData = new jinqJs()
                .from($scope.BodyViewData.BodyViews.view)
                .where('_gender == ' + $scope.genderId)
@@ -69,36 +78,14 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
                     $compile($el)($scope);
-                    
-
-
                 });
         };
-        $scope.checkImgExistance = function (imagePath) {
-            var result = "";
-            $.ajax({
-                url: imagePath,
-                success: function (data) {
-
-                    result = true;
-
-                },
-                error: function (data) {
-
-                    result = false;
-
-                },
-            })
-         //  debugger
-            return result;
-        }
-
-       
+              
         $scope.openView = function ($event) {
-            debugger;
+           // debugger;
             $rootScope.currentBodyViewId = $event.currentTarget.id;
             $rootScope.CurrentActiveView = $event.currentTarget.textContent;
             $rootScope.pageToOpen = 'app/views/da/da-body-view.html';
@@ -175,8 +162,8 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
                    // right: 0
                 },
                 //overflow: { horizontal: 'scroll', vertical: 'scroll' },
-                
-                size: { width: $(window).outerWidth() , height: $(window).outerHeight()-110  },
+               
+                size: { width: $(window).outerWidth()-10 , height: $(window).outerHeight()-110  },
                 //size: { width: 500, height: 500 },
             });
@@ -222,7 +209,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
             .error(function (data, status, headers, config) {
                 console.log(data);
             });
-            debugger;
+         //   debugger;
             $scope.voId = $rootScope.currentBodyViewId;
             $scope.layerNo = 0;
@@ -240,7 +227,7 @@ function ($scope,$rootScope, $compile,$http, $log, $location, $timeout,DA,Module
             //set height of canvas div and left tool bar as per window size
             $scope.BodyRegionCordinatesData = []; // create an empty array
-            $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 134)
+            $('#canvasDiv').css('height', $('#daImagePanel').outerHeight() - 104)
             //$('#canvasDiv').css('width', $('#daImagePanel').outerWidth() - 100)
             $('#leftToolBar').css('height', $('#daImagePanel').outerHeight() )
 <div class=" ">
-    <div class="tools " id="leftToolBar">
-        <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar"></div>
+    <div class="tools pull-left" id="leftToolBar">
+        <div class="toggle-icon toggleBar toggleHeadingButton" title="Show/Hide Sidebar" style="top:20px;"></div>
         <div class="" style="top:20px">
             <div class="col-sm-6" title="Identify">
                 <button class="btn btn-primary btn-sm"> <img src="content/images/icon-identity.png" alt="" title=""></button>
@@ -70,8 +70,8 @@
         </div>
     </div>
-    <div class="">
-        <div class="col-sm-12 stickey-area" style="z-index:999;left:20px">
+    <div class="main2">
+        <div class="col-sm-12 stickey-area" >
             <div class="breadcrumb ">
                 <div class="">
                     <div class="input-group col-sm-8 col-xs-7 col-md-10 pull-left">
@@ -99,11 +99,11 @@
                 </div>
             </div>
         </div>
-        <div style="top:100px;">
-            <div>
-                <div>
-                    <!--<div class="col-sm-12 img-thumbnail" align="center"><img src="content/images/1000x600.jpg" alt="" title="" class="img-responsive"></div>-->
-                    <div id="canvasDiv" style="  width: 95% !important;top:0px;overflow:scroll;background-color:white;">
+        <div class="col-sm-12">
+            <div class="container-fluid">
+                <div class="row">
+                    <div id="canvasDiv" class="col-sm-12 img-thumbnail" align="center"></div>
+                    <!--<div id="canvasDiv" style="  width: 95% !important;top:0px;overflow:scroll;background-color:white;">-->
                         <div id="daLoaderLabel">Loading....</div>
                     </div>
@@ -175,4 +175,29 @@
     $(function () {
         $(".modal").draggable();
     });
+</script>
+<script>
+    $(function () {
+        "use strict";
+        /*** Sidebar Toggle ***/
+        var barPos = 0;
+        var bar = $('#leftToolBar');
+        var main = $('.main2');
+        $('.toggleBar').click(function () {
+            // alert('kkkkkkkkkkkkkk')
+            /*barPos = parseInt($('.sidebar').css('left'));
+            if(barPos!==0 && !bar.hasClass('active'))
+            {
+                bar.addClass('active');
+                main.addClass('active');
+            }
+            else
+            {
+                bar.removeClass('active');
+                main.removeClass('active');
+            }*/
+            bar.toggleClass('active');
+            main.toggleClass('active');
+        });
+    });
 </script>
 \ No newline at end of file
@@ -499,12 +499,12 @@ footer.dark {
 	z-index: 99999;
 	-moz-transition: left 0.5s ease;
 	transition: left 0.5s ease;
-	background: url(content/images/icon-sidebar.png) no-repeat 0;
+	background: url(/content/images/icon-sidebar.png) no-repeat 0;
 	width: 11px;
 	height: 33px;
 }
 .active .toggle-icon {
-	background: url(content/images/icon-sidebar.png) no-repeat -11px;
+	background: url(/content/images/icon-sidebar.png) no-repeat -11px;
 	width: 11px;
 	height: 33px;
 }
@@ -515,12 +515,12 @@ footer.dark {
 	z-index: 99999;
 	-moz-transition: left 0.5s ease;
 	transition: left 0.5s ease;
-	background: url(content/images/icon-sidebar.png) no-repeat 0;
+	background: url(/content/images/icon-sidebar.png) no-repeat 0;
 	width: 11px;
 	height: 33px;
 }
 .active .toggle-icon-treeview {
-	background: url(content/images/icon-sidebar.png) no-repeat -11px;
+	background: url(/content/images/icon-sidebar.png) no-repeat -11px;
 	width: 11px;
 	height: 33px;
 }
@@ -12836,7 +12836,7 @@ var slider = $.widget( &quot;ui.slider&quot;, $.ui.mouse, {
 			.addClass( "ui-slider" +
 				" ui-slider-" + this.orientation +
 				" ui-widget" +
-				" ui-widget-content1" +
+				" ui-widget-content" +
 				" ui-corner-all");
 		this._refresh();
@@ -12939,7 +12939,7 @@ var slider = $.widget( &quot;ui.slider&quot;, $.ui.mouse, {
 				" ui-slider-horizontal" +
 				" ui-slider-vertical" +
 				" ui-widget" +
-				" ui-widget-content1" +
+				" ui-widget-content" +
 				" ui-corner-all" );
 		this._mouseDestroy();
@@ -130,11 +130,12 @@ h3.jsPanel-title{
     text-align: left;
     text-overflow: ellipsis;
     margin: 0;
-    font-variant: small-caps;
-    font-weight: normal;
+    font-variant: normal;
+    font-weight: bold;
     cursor: move;
     min-height: 20px;
     padding: 0 5px;
+    font-size:15px
 }
 .jsPanel-hdr-r div{
     float: right;
@@ -304,11 +305,11 @@ h3.jsPanel-title{
 .jsPanel-theme-primary .ui-icon-gripsmall-diagonal-se{ color: #000; }
 /* success --------------------------------------------- */
-.jsPanel.jsPanel-theme-success{ background: none repeat scroll 0 0 #fff; box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4); }
-.jsPanel-hdr.jsPanel-theme-success{ color: #fff; font-family: tahoma,arial,verdana,sans-serif; font-weight: normal; background: #818D43; }
-.jsPanel-hdr.jsPanel-theme-success h3{ color: #fff; }
-.jsPanel-hdr.jsPanel-theme-success h3 small{ color: #fff; font-size: 65%; }
-.jsPanel-content.jsPanel-theme-success { background: none repeat scroll 0 0 #ffffff; color: #000000; font-family: tahoma,arial,verdana,sans-serif; outline: 1px solid #bbb; }
+.jsPanel.jsPanel-theme-success{ background: none repeat scroll 0 0 #fff; box-shadow: 0 0 6px rgba(0, 33, 50, 0.1), 0 7px 25px rgba(17, 38, 60, 0.4);background-color:#222222 }
+.jsPanel-hdr.jsPanel-theme-success{ color: #fff; font-family: Open Sans, Helvetica,tahoma,arial,verdana,sans-serif; font-weight: bold; font-size:15px; background: #818D43; }
+.jsPanel-hdr.jsPanel-theme-success h3{ color: #fff;font-size:15px;font-weight: bold }
+.jsPanel-hdr.jsPanel-theme-success h3 small{ color: #fff; font-size: 65%; font-weight: bold}
+.jsPanel-content.jsPanel-theme-success { background: none repeat scroll 0 0 #ffffff; color: #000000; font-family: tahoma,arial,verdana,sans-serif; outline: 1px solid #bbb;background-color:#222222 }
 .jsPanel-ftr.jsPanel-theme-success{}
 .jsPanel-theme-successt .ui-icon-gripsmall-diagonal-se{ color: #000; }
@@ -395,7 +395,7 @@ footer.dark {
 	width: 110px;
 	padding-top: 20px;
 	/*overflow: hidden;*/
-	position: fixed;
+	/*position: fixed;*/
 	left: 0;
     /*nk*/
 	/*top: 70px;*/
@@ -498,12 +498,12 @@ footer.dark {
 	z-index: 99999;
 	-moz-transition: left 0.5s ease;
 	transition: left 0.5s ease;
-	background: url(content/images/icon-sidebar.png) no-repeat 0;
+	background: url(../../../../../content/images/icon-sidebar.png) no-repeat 0;
 	width: 11px;
 	height: 33px;
 }
 .active .toggle-icon {
-	background: url(content/images/icon-sidebar.png) no-repeat -11px;
+	background: url(../../../../../content/images/icon-sidebar.png) no-repeat -11px;
 	width: 11px;
 	height: 33px;
 }
@@ -514,12 +514,12 @@ footer.dark {
 	z-index: 99999;
 	-moz-transition: left 0.5s ease;
 	transition: left 0.5s ease;
-	background: url(content/images/icon-sidebar.png) no-repeat 0;
+	background: url(../../../../../content/images/icon-sidebar.png) no-repeat 0;
 	width: 11px;
 	height: 33px;
 }
 .active .toggle-icon-treeview {
-	background: url(content/images/icon-sidebar.png) no-repeat -11px;
+	background: url(../../../../../content/images/icon-sidebar.png) no-repeat -11px;
 	width: 11px;
 	height: 33px;
 }