From 0bce25cabfe6675f0ee5f56259c11088ef510ea0 Mon Sep 17 00:00:00 2001 From: Gunther Brunner Date: Tue, 8 Apr 2014 15:56:36 +0900 Subject: [PATCH] Adding List of current used devices. --- .../device-control-controller.js | 22 ++++- .../device-control/device-control.css | 82 +++++++++++++++++++ .../device-control/device-control.jade | 25 ++++-- res/app/control-panes/device-control/index.js | 2 +- res/app/layout/stf-styles.css | 53 ------------ 5 files changed, 124 insertions(+), 60 deletions(-) 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;