Igor Kulikov
9 years ago
14 changed files with 419 additions and 198 deletions
@ -0,0 +1,88 @@ |
|||||
|
/* |
||||
|
* Copyright © 2016-2017 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
import './dashboard-toolbar.scss'; |
||||
|
|
||||
|
import 'javascript-detect-element-resize/detect-element-resize'; |
||||
|
|
||||
|
/* eslint-disable import/no-unresolved, import/default */ |
||||
|
|
||||
|
import dashboardToolbarTemplate from './dashboard-toolbar.tpl.html'; |
||||
|
|
||||
|
/* eslint-enable import/no-unresolved, import/default */ |
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
export default function DashboardToolbar() { |
||||
|
return { |
||||
|
restrict: "E", |
||||
|
scope: true, |
||||
|
transclude: true, |
||||
|
bindToController: { |
||||
|
toolbarOpened: '=', |
||||
|
forceFullscreen: '=', |
||||
|
onTriggerClick: '&' |
||||
|
}, |
||||
|
controller: DashboardToolbarController, |
||||
|
controllerAs: 'vm', |
||||
|
templateUrl: dashboardToolbarTemplate |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
/* eslint-disable angular/angularelement */ |
||||
|
|
||||
|
|
||||
|
/*@ngInject*/ |
||||
|
function DashboardToolbarController($scope, $element, $timeout, mdFabToolbarAnimation) { |
||||
|
|
||||
|
let vm = this; |
||||
|
|
||||
|
vm.mdFabToolbarElement = angular.element($element[0].querySelector('md-fab-toolbar')); |
||||
|
|
||||
|
$timeout(function() { |
||||
|
vm.mdFabBackgroundElement = angular.element(vm.mdFabToolbarElement[0].querySelector('.md-fab-toolbar-background')); |
||||
|
vm.mdFabTriggerElement = angular.element(vm.mdFabToolbarElement[0].querySelector('md-fab-trigger button')); |
||||
|
}); |
||||
|
|
||||
|
addResizeListener(vm.mdFabToolbarElement[0], triggerFabResize); // eslint-disable-line no-undef
|
||||
|
|
||||
|
$scope.$on("$destroy", function () { |
||||
|
removeResizeListener(vm.mdFabToolbarElement[0], triggerFabResize); // eslint-disable-line no-undef
|
||||
|
}); |
||||
|
|
||||
|
function triggerFabResize() { |
||||
|
var ctrl = vm.mdFabToolbarElement.controller('mdFabToolbar'); |
||||
|
if (ctrl.isOpen) { |
||||
|
if (!vm.mdFabBackgroundElement[0].offsetWidth) { |
||||
|
mdFabToolbarAnimation.addClass(vm.mdFabToolbarElement, 'md-is-open', function () { |
||||
|
}); |
||||
|
} else { |
||||
|
var color = window.getComputedStyle(vm.mdFabTriggerElement[0]).getPropertyValue('background-color'); //eslint-disable-line
|
||||
|
|
||||
|
var width = vm.mdFabToolbarElement[0].offsetWidth; |
||||
|
var scale = 2 * (width / vm.mdFabTriggerElement[0].offsetWidth); |
||||
|
vm.mdFabBackgroundElement[0].style.backgroundColor = color; |
||||
|
vm.mdFabBackgroundElement[0].style.borderRadius = width + 'px'; |
||||
|
|
||||
|
var transform = vm.mdFabBackgroundElement[0].style.transform; |
||||
|
var targetTransform = 'scale(' + scale + ')'; |
||||
|
if (!transform || !angular.equals(transform, targetTransform)) { |
||||
|
vm.mdFabBackgroundElement[0].style.transform = targetTransform; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
@ -0,0 +1,114 @@ |
|||||
|
/** |
||||
|
* Copyright © 2016-2017 The Thingsboard Authors |
||||
|
* |
||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
* you may not use this file except in compliance with the License. |
||||
|
* You may obtain a copy of the License at |
||||
|
* |
||||
|
* http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
* |
||||
|
* Unless required by applicable law or agreed to in writing, software |
||||
|
* distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
* See the License for the specific language governing permissions and |
||||
|
* limitations under the License. |
||||
|
*/ |
||||
|
|
||||
|
@import "~compass-sass-mixins/lib/compass"; |
||||
|
@import '../../scss/constants'; |
||||
|
|
||||
|
tb-dashboard-toolbar { |
||||
|
md-fab-toolbar { |
||||
|
&.md-is-open { |
||||
|
md-fab-trigger { |
||||
|
.md-button { |
||||
|
&.md-fab { |
||||
|
opacity: 1; |
||||
|
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2)); |
||||
|
.md-fab-toolbar-background { |
||||
|
background-color: $primary-default !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
md-fab-trigger { |
||||
|
.md-button { |
||||
|
&.md-fab { |
||||
|
line-height: 36px; |
||||
|
width: 36px; |
||||
|
height: 36px; |
||||
|
margin: 4px 0 0 4px; |
||||
|
opacity: 0.5; |
||||
|
@include transition(opacity .3s cubic-bezier(.55,0,.55,.2) .2s); |
||||
|
md-icon { |
||||
|
position: absolute; |
||||
|
top: 25%; |
||||
|
margin: 0; |
||||
|
line-height: 18px; |
||||
|
height: 18px; |
||||
|
width: 18px; |
||||
|
min-height: 18px; |
||||
|
min-width: 18px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
&.is-fullscreen { |
||||
|
&.md-is-open { |
||||
|
md-fab-trigger { |
||||
|
.md-button { |
||||
|
&.md-fab { |
||||
|
.md-fab-toolbar-background { |
||||
|
transition-delay: 0ms !important; |
||||
|
transition-duration: 0ms !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.md-fab-toolbar-wrapper { |
||||
|
height: 64px; |
||||
|
md-toolbar { |
||||
|
min-height: 64px; |
||||
|
height: 64px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.md-fab-toolbar-wrapper { |
||||
|
height: 50px; |
||||
|
md-toolbar { |
||||
|
min-height: 50px; |
||||
|
height: 50px; |
||||
|
md-fab-actions { |
||||
|
font-size: 16px; |
||||
|
margin-top: 0px; |
||||
|
.close-action { |
||||
|
margin-right: -18px; |
||||
|
} |
||||
|
.md-fab-action-item { |
||||
|
width: 100%; |
||||
|
height: 46px; |
||||
|
.tb-dashboard-action-panels { |
||||
|
height: 46px; |
||||
|
flex-direction: row-reverse; |
||||
|
.tb-dashboard-action-panel { |
||||
|
height: 46px; |
||||
|
flex-direction: row-reverse; |
||||
|
div { |
||||
|
height: 46px; |
||||
|
} |
||||
|
md-select { |
||||
|
pointer-events: all; |
||||
|
} |
||||
|
tb-states-component { |
||||
|
pointer-events: all; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,35 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
Copyright © 2016-2017 The Thingsboard Authors |
||||
|
|
||||
|
Licensed under the Apache License, Version 2.0 (the "License"); |
||||
|
you may not use this file except in compliance with the License. |
||||
|
You may obtain a copy of the License at |
||||
|
|
||||
|
http://www.apache.org/licenses/LICENSE-2.0 |
||||
|
|
||||
|
Unless required by applicable law or agreed to in writing, software |
||||
|
distributed under the License is distributed on an "AS IS" BASIS, |
||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
||||
|
See the License for the specific language governing permissions and |
||||
|
limitations under the License. |
||||
|
|
||||
|
--> |
||||
|
|
||||
|
<md-fab-toolbar md-open="vm.toolbarOpened" |
||||
|
md-direction="left" |
||||
|
ng-class="{'is-fullscreen': vm.forceFullscreen, 'md-whiteframe-z1': vm.forceFullscreen}"> |
||||
|
<md-fab-trigger class="align-with-text"> |
||||
|
<md-button aria-label="menu" class="md-fab md-primary" ng-click="vm.onTriggerClick()"> |
||||
|
<md-tooltip ng-show="!vm.toolbarOpened" md-direction="bottom"> |
||||
|
{{ 'dashboard.open-toolbar' | translate }} |
||||
|
</md-tooltip> |
||||
|
<md-icon aria-label="dashboard-toolbar" class="material-icons">more_horiz</md-icon> |
||||
|
</md-button> |
||||
|
</md-fab-trigger> |
||||
|
<md-toolbar> |
||||
|
<md-fab-actions class="md-toolbar-tools"> |
||||
|
<div ng-transclude></div> |
||||
|
</md-fab-actions> |
||||
|
</md-toolbar> |
||||
|
</md-fab-toolbar> |
||||
Loading…
Reference in new issue