apply tablet design for curve

Author: dragandragan1988

frontend/javascripts/app/controllers/amplification_chart_ctrl.js.coffee

@@ -929,4 +929,15 @@ window.ChaiBioTech.ngApp.controller 'AmplificationChartCtrl', [
         last_target_channel = 0
         last_target_assigned = 0
 
+      $scope.onChangeScrollView = (direction, event) ->
+        if event and (angular.element(event.target).hasClass('switch-item') or angular.element(event.target).hasClass('view-mode-switch'))
+          return
+
+        if document.querySelector('.chart-screens-container').scrollLeft < 100
+          if direction == '' or direction == 'right'
+            angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 2500 }, 'fast'
+        else
+          angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 0 }, 'fast'
+        return
+
 ]

frontend/javascripts/app/controllers/melt_curve_ctrl.coffee

@@ -614,4 +614,12 @@ App.controller 'MeltCurveChartCtrl', [
       $scope.label_Temp = ''
       $scope.label_Norm = ''
       $scope.label_dF_dT = ''
+
+    $scope.onChangeScrollView = (direction) ->
+      if document.querySelector('.chart-screens-container').scrollLeft < 100
+        if direction == '' or direction == 'right'
+          angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 2500 }, 'fast'
+      else
+        angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 0 }, 'fast'
+      return
 ]

frontend/javascripts/app/controllers/standard_curve_chart_ctrl.js.coffee

@@ -717,4 +717,12 @@ window.ChaiBioTech.ngApp.controller 'StandardCurveChartCtrl', [
       $scope.targetGridTop = ->
         Math.max(document.getElementById("curve-plot").clientHeight + 30, 412 + 30)
 
+      $scope.onChangeScrollView = (direction) ->
+        if document.querySelector('.chart-screens-container').scrollLeft < 100
+          if direction == '' or direction == 'right'
+            angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 2500 }, 'fast'
+        else
+          angular.element(document.querySelector('.chart-screens-container')).animate { scrollLeft: 0 }, 'fast'
+        return
+
 ]

frontend/javascripts/app/directives/aspect-Ratio.coffee

@@ -18,9 +18,10 @@ App.directive 'aspectRatio', [
       offsetTop: '=?'
     link: ($scope, elem) ->
 
-      elem.addClass 'aspect-Ratio'
+      elem.addClass 'aspect-Ratio'      
 
       getWidth = ->
+
         # console.log('parent_getWidth')
         # console.log(elem.parent().width())
         width = elem.parent().width() - $scope.offsetX
@@ -45,13 +46,10 @@ App.directive 'aspectRatio', [
         # if height > elem.parent().height()  then height = elem.parent().height()
         height
 
-      resizeAspectRatio = -> 
-
+      resizeDesktopAspectRatio = -> 
         width = getWidth()
         height = getHeight()
 
-        # console.log('resizeAspectRatio')
-
         if width > $scope.maxWidth and height > $scope.maxHeight
           width = $scope.maxWidth
           height = $scope.maxHeight
@@ -69,7 +67,10 @@ App.directive 'aspectRatio', [
         elem.css('min-Width': width)
         elem.css('width': width)
         elem.css('min-height': height)
-        elem.css('height': height)        
+        elem.css('height': height)    
+        angular.element('.choose-chart').removeClass('small')
+        angular.element('.chart-screen-wapper').css('min-width': 1368)
+
         elem.parent().children().last().get(0).style.height = height + "px"
         angular.element(elem.parent().children().last().get(0)).children().last().get(0).style.height = height - $scope.offsetTop + "px"
 
@@ -81,6 +82,62 @@ App.directive 'aspectRatio', [
           element.getElementsByClassName('target-box')[0].style.padding = "5px 20px 5px 10px"
         else if offsetHeight == scrollHeight
           element.getElementsByClassName('target-box')[0].style.padding = "5px 10px"
+        return
+
+      resizeTabletAspectRatio = ->
+        innerHeight = window.innerHeight
+        innerWidth = window.innerWidth
+
+
+        minHeight = if innerWidth > 1024 then 780 else 640
+        maxHeight = if innerWidth > 768 then 1024 else 720
+        paddingHeight = 60
+
+        if innerWidth > 1112
+          minHeight = 960
+          maxHeight = 1024
+          wellTableHeight = 175
+        else if innerWidth > 1024
+          minHeight = 720
+          maxHeight = 1024
+          wellTableHeight = 130
+          paddingHeight = 40
+        else if innerWidth > 992
+          minHeight = 640
+          maxHeight = 1024
+          wellTableHeight = 110
+          paddingHeight = 40
+        else
+          minHeight = 840
+          maxHeight = 1024
+          wellTableHeight = 110
+          paddingHeight = 40
+       
+        height = Math.min(Math.max(innerHeight, minHeight), maxHeight) - 100 - 100 - 60  - paddingHeight - wellTableHeight
+        width = height * 1.7
+
+        elem.css('min-Width': width)
+        elem.css('width': width)
+        elem.css('min-height': height)
+        elem.css('height': height)
+
+        if wellTableHeight == 175
+          angular.element('.choose-chart').removeClass('small')
+        else
+          angular.element('.choose-chart').addClass('small')
+
+        angular.element('.chart-screen-wapper').css('min-width': width + 40 + 620)
+
+        return
+
+      resizeAspectRatio = -> 
+        innerWidth = window.innerWidth
+        if innerWidth > 1366
+          resizeDesktopAspectRatio()
+        else
+          resizeTabletAspectRatio()
+
+
 
       resizeTimeout = null
 

frontend/javascripts/app/directives/fixed-result-header.js

@@ -130,6 +130,7 @@ function fixedResultHeader($timeout, $window, $rootScope) {
                 });
 
                 var validWidth = (tableMinWidth > parentWidth ? tableMinWidth : parentWidth - 3) - scrollWidth - fixedWidth;
+                var innerWidth = window.innerWidth;
 
                 angular.forEach(elem.querySelectorAll('tr:first-child th'), function (thElem, i) {
                     var tdElems = elem.querySelectorAll('tbody tr td:nth-child(' + (i + 1) + ')');
@@ -138,7 +139,15 @@ function fixedResultHeader($timeout, $window, $rootScope) {
 
                     angular.forEach(tdElems, function(tdElem, i){
                         if(thElem.attributes.width.value.indexOf('%') != -1){
-                            tdElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                            if(innerWidth > 1368){
+                                tdElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                            } else {
+                                if(widthPercent == '100'){
+                                    tdElem.style.width = '120px';
+                                } else {
+                                    tdElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                                }
+                            }
                             // tdElem.style.width = widthPercent + '%';
                         } else {
                             tdElem.style.width = thElem.attributes.width.value;
@@ -147,8 +156,15 @@ function fixedResultHeader($timeout, $window, $rootScope) {
 
                     if (thElem) {
                         if(thElem.attributes.width.value.indexOf('%') != -1){
-                            // thElem.style.width = widthPercent + '%';
-                            thElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                            if(innerWidth > 1368){
+                                thElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                            } else {
+                                if(widthPercent == '100'){
+                                    thElem.style.width = '120px';
+                                } else {
+                                    thElem.style.width = (widthPercent * validWidth / 100) + 'px';
+                                }
+                            }
                         } else {
                             thElem.style.width = thElem.attributes.width.value;
                         }

frontend/javascripts/app/directives/fullViewHeight.coffee

@@ -0,0 +1,60 @@
+App.directive 'fullViewHeight', [
+  'WindowWrapper'
+  '$timeout'
+  (WindowWrapper, $timeout) ->
+
+    restrict: 'AE',
+    scope:
+      offset: '=?'
+      force: '=?'
+      doc: '=?'
+      parent: '=?'
+      min: '=?'
+    link: ($scope, elem) ->
+
+      $scope.offset = ($scope.offset || 0) * 1
+      $scope.min = ($scope.min || 0) * 1
+
+      elem.addClass 'full-height'
+      getHeight = ->
+        height = if $scope.doc
+                  WindowWrapper.documentHeight() - $scope.offset
+                else if $scope.parent
+                  elem.parent().height() - $scope.offset
+                else
+                  WindowWrapper.height() - $scope.offset
+
+        if height > elem.parent().height()  then height = elem.parent().height()
+        height = if $scope.min > height then $scope.min else height
+        height
+        
+      set = (height) ->
+        height = height || getHeight()
+
+        if ($scope.force)
+          elem.css( 'height':  height )
+          elem.css( 'min-height' : height )
+        else
+          # height = if elem.height() > height then elem.height() else height
+          elem.css( 'min-height' : height )
+          
+      resizeTimeout = null
+
+      $scope.$on 'window:resize', ->
+        height = getHeight()
+        elem.css('min-height': height, height: '', overflow: 'hidden')
+        if resizeTimeout
+          $timeout.cancel(resizeTimeout)
+
+        resizeTimeout = $timeout ->
+          elem.css(overflow: '', height: '', 'min-height': '')
+          set()
+          resizeTimeout = null
+        , 100
+
+      if $scope.min > 0
+        set($scope.min)
+
+      $timeout(set, 100)
+
+]

frontend/javascripts/app/directives/v2/amplification_well_switch.js.coffee

@@ -53,9 +53,6 @@ window.ChaiBioTech.ngApp.directive 'chartWellSwitch', [
         standard: '/images/ring_s.svg'
         unknown: '/images/ring_u.svg'
 
-      $scope.touch_desc = 'touch test'
-
-
       $scope.registerOutsideHover = false;
       unhighlight_event = ''
 
@@ -98,14 +95,17 @@ window.ChaiBioTech.ngApp.directive 'chartWellSwitch', [
       ngModel.$setViewValue wells
       $scope.wells = wells
 
-      $scope.row_header_width = 20
+      $scope.row_header_width = if window.innerWidth <= 1366 and window.innerWidth > 1112 then 30 else 20
       $scope.columns = []
       $scope.rows = []
       for i in [0...8]
         $scope.columns.push index: i, selected: false
       for i in [0...2]
         $scope.rows.push index: i, selected: false
 
+      $scope.$on 'window:resize', ->
+        $scope.row_header_width = if window.innerWidth <= 1366 and window.innerWidth > 1112 then 30 else 20
+
       $scope.getWidth = -> elem[0].parentElement.offsetWidth
       $scope.getCellWidth = ->
         ($scope.getWidth() - $scope.row_header_width) / $scope.columns.length
@@ -248,9 +248,6 @@ window.ChaiBioTech.ngApp.directive 'chartWellSwitch', [
         # type can be 'column', 'row', 'well' or 'corner'
         # index is index of the type
 
-        $scope.touch_desc = $scope.touch_desc + '** touchStart **' + evt + ' ' + type + ' ' + index
-
-
         $scope.dragging = true
         $scope.dragStartingPoint =
           type: type
@@ -536,14 +533,19 @@ window.ChaiBioTech.ngApp.directive 'chartWellSwitch', [
 
         if type is 'well' and index is $scope.dragStartingPoint.index
           # deselect all other wells if ctrl/cmd key is not held
-          if !isCtrlKeyHeld(evt)
+          # toggle selected state
+          selected_count = 0
+          for i in [0..15] by 1
+            if $scope.wells["well_#{i}"].selected
+              selected_count = selected_count + 1
+
+          if selected_count == 1
             $scope.rows.forEach (r) ->
               $scope.columns.forEach (c) ->
                 $scope.wells["well_#{r.index * $scope.columns.length + c.index}"].selected = false
 
-          # toggle selected state
           well = $scope.wells["well_#{index}"]
-          well.selected = if isCtrlKeyHeld(evt) then !well.selected else true
+          well.selected = if selected_count > 1 then !well.selected else true
 
 
         if $scope.dragStartingPoint.type is 'well' and $scope.shiftStartIndex >= 0

frontend/javascripts/app/views/directives/v2/chart-well-switch.html

@@ -16,12 +16,12 @@
   See the License for the specific language governing permissions and
   limitations under the License.
 -->
-<div class="chart-well-switch" style="height: 100%; display: block;">
+<div class="chart-well-switch" style="height: 100%; display: block;">  
   <table style="height: 100%">
     <tbody>
       <tr>
-        <th style="height:20px;" class="col-header G2" ng-click="selectAllWells()" ng-style="{width: row_header_width + 'px'}"></th>
-        <th style="height:20px;" class="col-header G2" ng-class="{dragged: col.selected}" ng-mousedown="dragStart($event, 'column', col.index)" ng-mouseup="dragStop($event, 'column', col.index)" ng-mousemove="dragged($event, 'column', col.index)" ng-repeat="col in columns" ng-style="{width: getCellWidth() + 'px'}">
+        <th class="col-header G2" ng-click="selectAllWells()" ng-style="{width: row_header_width + 'px'}"></th>
+        <th class="col-header G2" ng-class="{dragged: col.selected}" ng-mousedown="dragStart($event, 'column', col.index)" ng-mouseup="dragStop($event, 'column', col.index)" ng-mousemove="dragged($event, 'column', col.index)" ng-repeat="col in columns" ng-style="{width: getCellWidth() + 'px'}">
           {{col.index + 1}}
         </th>
       </tr>