diff --git a/res/app/control-panes/device-control/device-control-controller.js b/res/app/control-panes/device-control/device-control-controller.js
index 7ace09b5..3c47601a 100644
--- a/res/app/control-panes/device-control/device-control-controller.js
+++ b/res/app/control-panes/device-control/device-control-controller.js
@@ -1,4 +1,24 @@
-//module.exports = function DeviceControlCtrl(
+module.exports = function DeviceControlCtrl($scope, DeviceService, GroupService, $location) {
+
+ $scope.groupTracker = DeviceService.trackGroup($scope)
+
+ $scope.groupDevices = $scope.groupTracker.devices
+
+ $scope.kickDevice = function (device) {
+ // if current device
+ // no more: go to devices
+ // more: go to first
+
+ return GroupService.kick(device).then(function () {
+ $scope.$digest()
+ })
+ }
+
+ $scope.controlDevice = function (device) {
+ $location.path('/control/' + device.serial)
+ }
+
+}
// $scope
//, $routeParams
//, $location
diff --git a/res/app/control-panes/device-control/device-control.css b/res/app/control-panes/device-control/device-control.css
index d3833dd1..634a300f 100644
--- a/res/app/control-panes/device-control/device-control.css
+++ b/res/app/control-panes/device-control/device-control.css
@@ -40,4 +40,86 @@ device-screen textarea {
.stf-device-control .dragover {
opacity: 0.7;
+}
+
+.stf-device-control .dropdown-menu {
+ top: auto;
+}
+
+.stf-device-control .device-small-image {
+ width: 14px;
+ height: 14px;
+ display: inline-block;
+ margin-right: 7px;
+}
+
+.stf-device-control .device-small-image img {
+ width: 100%;
+}
+
+.stf-device-control .kick-device {
+ color: gray;
+ margin-left: 25px;
+}
+
+.stf-device-control .kick-device:hover {
+ color: red;
+}
+
+.stf-device-control .kick-device i {
+ margin-right: 0;
+}
+
+/* VNC buttons */
+.stf-vnc-bottom .btn-primary:hover {
+ background: rgba(255, 255, 255, 1.0);
+ /*border-color: rgba(255, 255, 255, 1.0);*/
+ border: none;
+}
+
+.stf-vnc-bottom .btn {
+ border-radius: 0;
+}
+
+/*.stf-vnc-bottom .btn-primary:active,*/
+.stf-vnc-bottom .btn-primary.active {
+ background: rgba(255, 255, 255, 0.7);
+ border: none;
+ /*border-color: rgba(255, 255, 255, 0.7);*/
+}
+
+.stf-vnc-navbar-buttons {
+ padding-top: 2px;
+ padding-bottom: 32px;
+}
+
+.stf-vnc-navbar-buttons .btn {
+ margin-bottom: 0;
+ min-width: 37px;
+}
+
+.stf-vnc-device-name {
+ /*padding: 6px 2px 6px 15px;*/
+ /*float: left;*/
+ font-size: 16px;
+ line-height: 20px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+ color: #858585;
+}
+
+.stf-vnc-navbar {
+ background: #fff;
+ margin-bottom: 2px;
+}
+
+.stf-vnc-fps {
+ line-height: 28px;
+ color: #D1D1D1;
+ font-family: monospace;
+ display: inline-block;
+ width: 28px;
+ min-height: 10px;
+ text-align: center;
}
\ No newline at end of file
diff --git a/res/app/control-panes/device-control/device-control.jade b/res/app/control-panes/device-control/device-control.jade
index 3b02e5d8..a428c9af 100644
--- a/res/app/control-panes/device-control/device-control.jade
+++ b/res/app/control-panes/device-control/device-control.jade
@@ -1,11 +1,8 @@
-.interact-control.fill-height.as-table.stf-device-control
+.interact-control.fill-height.as-table.stf-device-control(ng-controller='DeviceControlCtrl')
.as-cell.fill-height
.as-table.fill-height
.stf-vnc-navbar.as-row
- a.stf-vnc-device-name.cursor.dropdown-toggle
- p {{ $root.device.name }}
- span(ng-show='$root.device && !$root.device.present', translate) (Absent)
.pull-right
button(ng-click='$root.control.identify()', tooltip='Find Device', tooltip-placement='bottom').btn.btn-sm.btn-info-outline
@@ -20,7 +17,25 @@
button(type='button', ng-model='showScreen', btn-checkbox).btn.btn-sm.btn-danger
i(ng-show='showScreen', tooltip-html-unsafe='{{"Just control device"|translate}}
⌘-⇧-O', tooltip-placement='left').fa.fa-eye
i(ng-show='!showScreen', tooltip-html-unsafe='{{"View device"|translate}}
⌘-⇧-O', tooltip-placement='left').fa.fa-eye-slash
- //button(ng-click='showScreen = !showScreen') Show/Hide
+
+ div
+
+
+ a.stf-vnc-device-name.pointer.unselectable.dropdown-toggle(ng-class='{"pointer": groupDevices.length > 1, "cursor": groupDevices.length <= 1}')
+ p {{ $root.device.name }}
+ span.caret(ng-show='groupDevices.length > 1')
+ span(ng-show='$root.device && !$root.device.present', translate) (Absent)
+
+ ul.dropdown-menu.pointer.unselectable(ng-show='groupDevices.length > 1')
+ li(ng-repeat='groupDevice in groupDevices')
+ a(ng-click='controlDevice(groupDevice); $event.stopPropagation();')
+ .device-small-image
+ img(ng-src='{{groupDevice.image ? "/static/devices/" + groupDevice.image : "/static/bower_components/stf-graphics/devices/small/default.jpg" }}')
+ span {{ groupDevice.name }}
+
+ span.pull-right(ng-click='kickDevice(groupDevice); $event.stopPropagation()').kick-device
+ i.fa.fa-times
+
.as-row.fill-height(ng-file-drop='$root.install($files)')
diff --git a/res/app/control-panes/device-control/index.js b/res/app/control-panes/device-control/index.js
index c193cad8..180eb0cc 100644
--- a/res/app/control-panes/device-control/index.js
+++ b/res/app/control-panes/device-control/index.js
@@ -10,4 +10,4 @@ module.exports = angular.module('device-control', [
require('./device-control.jade')
)
}])
-// .controller('DeviceControlCtrl', require('./device-control-controller'))
+ .controller('DeviceControlCtrl', require('./device-control-controller'))
diff --git a/res/app/layout/stf-styles.css b/res/app/layout/stf-styles.css
index 59b15004..e1d3fdd8 100644
--- a/res/app/layout/stf-styles.css
+++ b/res/app/layout/stf-styles.css
@@ -365,60 +365,7 @@ svg {
margin-top: 8px !important;
}
-/* VNC buttons */
-.stf-vnc-bottom .btn-primary:hover {
- background: rgba(255, 255, 255, 1.0);
- /*border-color: rgba(255, 255, 255, 1.0);*/
- border: none;
-}
-.stf-vnc-bottom .btn {
- border-radius: 0;
-}
-
-/*.stf-vnc-bottom .btn-primary:active,*/
-.stf-vnc-bottom .btn-primary.active {
- background: rgba(255, 255, 255, 0.7);
- border: none;
- /*border-color: rgba(255, 255, 255, 0.7);*/
-}
-
-.stf-vnc-navbar-buttons {
- padding-top: 2px;
- padding-bottom: 32px;
-}
-
-.stf-vnc-navbar-buttons .btn {
- margin-bottom: 0;
- min-width: 37px;
-}
-
-.stf-vnc-device-name {
- padding: 6px 2px 6px 15px;
- float: left;
- font-size: 16px;
- line-height: 20px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- /*color: #E4E4E4;*/
- color: #858585;
-}
-
-.stf-vnc-navbar {
- background: #fff;
- margin-bottom: 2px;
-}
-
-.stf-vnc-fps {
- line-height: 28px;
- color: #D1D1D1;
- font-family: monospace;
- display: inline-block;
- width: 28px;
- min-height: 10px;
- text-align: center;
-}
a.active {
color: #007aff !important;