Refactored all device list components to its own module.

res/app/device-list/column/index.js

@@ -0,0 +1,4 @@
+module.exports = angular.module('stf.device-list.column', [
+  require('gettext').name
+])
+  .service('DeviceColumnService', require('./device-column-service'))

res/app/device-list/customize/device-list-customize.css

@@ -0,0 +1,15 @@
+.stf-device-list .stf-device-details-customize {
+  white-space: nowrap;
+  padding: 10px;
+  padding-bottom: 0;
+  column-count: 2;
+  -moz-column-count: 2;
+  -webkit-column-count: 2;
+  max-width: 800px;
+}
+
+.stf-device-list .stf-device-details-customize .radio,
+.stf-device-list .stf-device-details-customize .checkbox {
+  margin: 0;
+  margin-bottom: 10px;
+}

res/app/device-list/customize/index.js

@@ -0,0 +1,4 @@
+require('./device-list-customize.css')
+
+module.exports = angular.module('stf.device-list.customize', [
+])

res/app/device-list/details/battery-level.jade

@@ -1,2 +0,0 @@
-progressbar(value='device.battery.level', max='device.battery.scale', type='success')
-  span {{ device.enhancedBatteryPercentage }}

res/app/device-list/details/device-list-details-directive.js

@@ -1,4 +1,4 @@
-var patchArray = require('./util/patch-array')
+var patchArray = require('./../util/patch-array')
 
 module.exports = function DeviceListDetailsDirective(
   $filter

res/app/device-list/details/device-list-details.css

@@ -0,0 +1,13 @@
+.device-list-details-content table {
+  white-space: nowrap;
+}
+
+.device-list-details-content .device-list-product,
+.device-list-details-content .device-list-carrier {
+  white-space: normal;
+}
+
+.device-list-details-content .progress {
+  margin-bottom: 0 !important;
+  height: 17px !important;
+}

res/app/device-list/details/index.js

@@ -0,0 +1,11 @@
+require('./device-list-details.css')
+
+module.exports = angular.module('stf.device-list.details', [
+  require('stf/device').name,
+  require('stf/user/group').name,
+  require('stf/common-ui').name,
+  require('stf/admin-mode').name,
+  require('../column').name,
+  require('../empty').name
+])
+  .directive('deviceListDetails', require('./device-list-details-directive'))

res/app/device-list/details/model.jade

@@ -1,6 +0,0 @@
-.device-list-product
-  span.device-small-image
-    img(ng-src='{{device.enhancedImage24}}')
-
-    span(ng-if='device.state !== "using"') {{device.enhancedModel}}
-    a(ng-if='device.state === "using"', ng-href='/#!/control/{{ device.serial }}') {{device.enhancedModel}}

res/app/device-list/details/status.jade

@@ -1,2 +0,0 @@
-button(ng-class='device.enhancedButtonClass', ng-dblclick='tryToKick(device)',
-  ng-click='device.usable && toggle(device)').btn.btn-xs.device-status {{device.enhancedStateAction | translate }}

res/app/device-list/details/user.jade

@@ -1,2 +0,0 @@
-a(ng-if='device.owner', ng-href='{{ device.enhancedUserContactUrl }}', role='button', target='_href') {{ device.enhancedUserName }}
-  a(ng-if='!device.owner') -

res/app/device-list/device-list.css

@@ -35,101 +35,11 @@
   margin-top: 4px;
 }
 
-.stf-device-list .device-search {
-  width: 20em;
-  -webkit-transition: none;
-  transition: none;
-}
-
-.stf-device-list .filter-out {
-  display: none;
-}
-
-.stf-device-list .device-search:focus {
-  /*width: 25em;*/
-}
-
-ul.devices-icon-view {
-  margin: 0;
-  display: inline-block;
-  list-style-type: none;
-  /*font-weight: 300;*/
-  font-family: 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
-}
-
-ul.devices-icon-view li {
-  width: 126px;
-  height: 170px;
-  background: white;
-  -webkit-border-radius: 8px;
-  -moz-border-radius: 8px;
-  border-radius: 8px;
-  border: 1px solid #e6e6e6;
-  float: left;
-  clear: none;
-  margin: 6px;
-  text-align: center;
-}
-
-ul.devices-icon-view li:hover {
-  background-color: #fbfbfb;
-
-}
-
-ul.devices-icon-view .device-photo-small {
-  margin-top: 8px;
-  margin-bottom: 10px;
-}
-
-ul.devices-icon-view .device-photo-small img {
-  width: auto;
-  height: 90px;
-  max-width: 95%; /* TODO: Fix this with a new container */
-  /*box-shadow: 0 10px 5px rgba(255, 255, 255, 1);*/
-}
-
-ul.devices-icon-view .device-name-bigtext {
-  display: inline-block;
-  width: 80%;
-}
-
-ul.devices-icon-view .device-name {
-  color: #3FA9F5;
-  font-size: 16px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  white-space: nowrap;
-}
-
-ul.devices-icon-view .device-product {
-  font-size: 16px;
-  color: #555;
-}
-
-ul.devices-icon-view .device-status-text {
-
-}
-
 img.device-icon-smallest {
   width: 12px;
   margin-right: 6px;
 }
 
-ul.devices-icon-view .device-is-busy {
-  /*box-shadow: inset 0 0 10px #e6e6e6;*/
-  /*background: #e6e6e6 !important;*/
-  opacity: 0.7;
-  cursor: not-allowed;
-}
-
-ul.devices-icon-view .device-is-busy .btn {
-  cursor: not-allowed;
-}
-
-ul.devices-icon-view .device-is-busy .device-photo-small img {
-  opacity: 0.5;
-}
-
 .stf-device-list .device-small-image {
   margin-right: 8px;
   width: 13px;
@@ -154,52 +64,6 @@ ul.devices-icon-view .device-is-busy .device-photo-small img {
   opacity: 1;
 }
 
-.device-list-details-content table {
-  white-space: nowrap;
-}
-
-.device-list-details-content .device-list-product,
-.device-list-details-content .device-list-carrier {
-  white-space: normal;
-}
-
-.device-list-details-content .progress {
-  margin-bottom: 0 !important;
-  height: 17px !important;
-}
-
-.stf-stats-container .fa {
-  font-size: 0.8em;
-}
-
-.stf-stats-container.ng-enter {
-  /*-webkit-transition: 2000ms ease 1s;*/
-  /*transition: 2000ms ease 1s;*/
-  -webkit-transition: 550ms ease 0ms;
-  transition: 550ms ease 0ms;
-  opacity: 0;
-}
-
-.stf-stats-container.ng-enter-active {
-  opacity: 1;
-}
-
-.stf-device-list .stf-device-details-customize {
-  white-space: nowrap;
-  padding: 10px;
-  padding-bottom: 0;
-  column-count: 2;
-  -moz-column-count: 2;
-  -webkit-column-count: 2;
-  max-width: 800px;
-}
-
-.stf-device-list .stf-device-details-customize .radio,
-.stf-device-list .stf-device-details-customize .checkbox {
-  margin: 0;
-  margin-bottom: 10px;
-}
-
 .stf-device-list .device-product-name-unusable {
   color: inherit;
 }

res/app/device-list/empty/index.js

@@ -0,0 +1,3 @@
+module.exports = angular.module('stf.device-list.empty', [
+])
+  .directive('deviceListEmpty', require('./device-list-empty-directive'))

res/app/device-list/icons/device-list-icons-directive.js

@@ -1,4 +1,4 @@
-var patchArray = require('./util/patch-array')
+var patchArray = require('./../util/patch-array')
 
 module.exports = function DeviceListDetailsDirective(
   $filter

res/app/device-list/icons/device-list-icons.css

@@ -0,0 +1,71 @@
+ul.devices-icon-view {
+  margin: 0;
+  display: inline-block;
+  list-style-type: none;
+  /*font-weight: 300;*/
+  font-family: 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif;
+}
+
+ul.devices-icon-view li {
+  width: 126px;
+  height: 170px;
+  background: white;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  border: 1px solid #e6e6e6;
+  float: left;
+  clear: none;
+  margin: 6px;
+  text-align: center;
+}
+
+ul.devices-icon-view li:hover {
+  background-color: #fbfbfb;
+
+}
+
+ul.devices-icon-view .device-photo-small {
+  margin-top: 8px;
+  margin-bottom: 10px;
+}
+
+ul.devices-icon-view .device-photo-small img {
+  width: auto;
+  height: 90px;
+  max-width: 95%; /* TODO: Fix this with a new container */
+  /*box-shadow: 0 10px 5px rgba(255, 255, 255, 1);*/
+}
+
+ul.devices-icon-view .device-name-bigtext {
+  display: inline-block;
+  width: 80%;
+}
+
+ul.devices-icon-view .device-name {
+  color: #3FA9F5;
+  font-size: 16px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+ul.devices-icon-view .device-product {
+  font-size: 16px;
+  color: #555;
+}
+
+ul.devices-icon-view .device-is-busy {
+  /*box-shadow: inset 0 0 10px #e6e6e6;*/
+  /*background: #e6e6e6 !important;*/
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+ul.devices-icon-view .device-is-busy .btn {
+  cursor: not-allowed;
+}
+
+ul.devices-icon-view .device-is-busy .device-photo-small img {
+  opacity: 0.5;
+}

res/app/device-list/icons/index.js

@@ -0,0 +1,10 @@
+require('./device-list-icons.css')
+
+module.exports = angular.module('stf.device-list.icons', [
+  require('gettext').name,
+  require('stf/user/group').name,
+  require('stf/common-ui').name,
+  require('../column').name,
+  require('../empty').name
+])
+  .directive('deviceListIcons', require('./device-list-icons-directive'))

res/app/device-list/index.js

@@ -1,13 +1,18 @@
 require('./device-list.css')
 
-require('checklist-model')
-
 module.exports = angular.module('device-list', [
   require('stf/device').name,
   require('stf/user/group').name,
+  require('stf/control').name,
   require('stf/common-ui').name,
-  require('stf/admin-mode').name,
-  'checklist-model'
+  require('stf/settings').name,
+  require('./column').name,
+  require('./details').name,
+  require('./empty').name,
+  require('./icons').name,
+  require('./stats').name,
+  require('./customize').name,
+  require('./search').name
 ])
   .config(['$routeProvider', function ($routeProvider) {
     $routeProvider
@@ -17,8 +22,3 @@ module.exports = angular.module('device-list', [
       })
   }])
   .controller('DeviceListCtrl', require('./device-list-controller'))
-  .service('DeviceColumnService', require('./device-column-service'))
-  .directive('deviceListDetails', require('./device-list-details-directive'))
-  .directive('deviceListIcons', require('./device-list-icons-directive'))
-  .directive('deviceListStats', require('./device-list-stats-directive'))
-  .directive('deviceListEmpty', require('./device-list-empty-directive'))

res/app/device-list/search/device-list-search.css

@@ -0,0 +1,13 @@
+.stf-device-list .device-search {
+  width: 20em;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.stf-device-list .filter-out {
+  display: none;
+}
+
+.stf-device-list .device-search:focus {
+  /*width: 25em;*/
+}

res/app/device-list/search/index.js

@@ -0,0 +1,4 @@
+require('./device-list-search.css')
+
+module.exports = angular.module('stf.device-list.search', [
+])

res/app/device-list/stats/device-list-stats.css

@@ -0,0 +1,15 @@
+.stf-stats-container .fa {
+  font-size: 0.8em;
+}
+
+.stf-stats-container.ng-enter {
+  /*-webkit-transition: 2000ms ease 1s;*/
+  /*transition: 2000ms ease 1s;*/
+  -webkit-transition: 550ms ease 0ms;
+  transition: 550ms ease 0ms;
+  opacity: 0;
+}
+
+.stf-stats-container.ng-enter-active {
+  opacity: 1;
+}

res/app/device-list/stats/index.js

@@ -0,0 +1,6 @@
+require('./device-list-stats.css')
+
+module.exports = angular.module('stf.device-list.stats', [
+  require('stf/user').name
+])
+  .directive('deviceListStats', require('./device-list-stats-directive'))