vnTextarea style fix, new component vnMenu wich extends vnPopover
This commit is contained in:
parent
6b1ad875cb
commit
3fd4e29429
|
@ -30,6 +30,8 @@ describe('Component vnDropDown', () => {
|
||||||
let popoverTemplate = require('../popover/popover.html');
|
let popoverTemplate = require('../popover/popover.html');
|
||||||
let $popover = angular.element(`<div>${popoverTemplate}</div>`);
|
let $popover = angular.element(`<div>${popoverTemplate}</div>`);
|
||||||
$scope.popover = $componentController('vnPopover', {$element: $popover, $scope, $timeout, $transitions});
|
$scope.popover = $componentController('vnPopover', {$element: $popover, $scope, $timeout, $transitions});
|
||||||
|
$scope.popover.$postLink();
|
||||||
|
|
||||||
$scope.model = $componentController('vnModel', {$httpBackend, $q, $filter});
|
$scope.model = $componentController('vnModel', {$httpBackend, $q, $filter});
|
||||||
controller = $componentController('vnDropDown', {$element, $scope, $transclude: null, $timeout, $httpBackend, $translate: null});
|
controller = $componentController('vnDropDown', {$element, $scope, $transclude: null, $timeout, $httpBackend, $translate: null});
|
||||||
controller.$postLink();
|
controller.$postLink();
|
||||||
|
|
|
@ -2,8 +2,6 @@ import './textfield/textfield';
|
||||||
import './watcher/watcher';
|
import './watcher/watcher';
|
||||||
import './paging/paging';
|
import './paging/paging';
|
||||||
import './icon/icon';
|
import './icon/icon';
|
||||||
import './autocomplete/autocomplete';
|
|
||||||
import './popover/popover';
|
|
||||||
import './dialog/dialog';
|
import './dialog/dialog';
|
||||||
import './confirm/confirm';
|
import './confirm/confirm';
|
||||||
import './title/title';
|
import './title/title';
|
||||||
|
@ -12,7 +10,10 @@ import './spinner/spinner';
|
||||||
import './snackbar/snackbar';
|
import './snackbar/snackbar';
|
||||||
import './tooltip/tooltip';
|
import './tooltip/tooltip';
|
||||||
import './icon-menu/icon-menu';
|
import './icon-menu/icon-menu';
|
||||||
|
import './popover/popover';
|
||||||
|
import './autocomplete/autocomplete';
|
||||||
import './drop-down/drop-down';
|
import './drop-down/drop-down';
|
||||||
|
import './menu/menu';
|
||||||
import './column-header/column-header';
|
import './column-header/column-header';
|
||||||
import './grid-header/grid-header';
|
import './grid-header/grid-header';
|
||||||
import './multi-check/multi-check';
|
import './multi-check/multi-check';
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
import ngModule from '../../module';
|
||||||
|
import Popover from '../popover/popover';
|
||||||
|
|
||||||
|
export default class Menu extends Popover {
|
||||||
|
$postLink() {
|
||||||
|
super.$postLink();
|
||||||
|
this.element.addEventListener('click',
|
||||||
|
() => this.onClick());
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick() {
|
||||||
|
this.hide();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ngModule.component('vnMenu', {
|
||||||
|
template: require('../popover/popover.html'),
|
||||||
|
controller: Menu,
|
||||||
|
transclude: true,
|
||||||
|
bindings: {
|
||||||
|
onOpen: '&?',
|
||||||
|
onClose: '&?'
|
||||||
|
}
|
||||||
|
});
|
|
@ -11,6 +11,10 @@ export default class Popover extends Component {
|
||||||
this.$timeout = $timeout;
|
this.$timeout = $timeout;
|
||||||
this.$transitions = $transitions;
|
this.$transitions = $transitions;
|
||||||
this._shown = false;
|
this._shown = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
$postLink() {
|
||||||
|
this.$element.addClass('vn-popover');
|
||||||
|
|
||||||
this.docKeyDownHandler = e => this.onDocKeyDown(e);
|
this.docKeyDownHandler = e => this.onDocKeyDown(e);
|
||||||
this.docFocusInHandler = e => this.onDocFocusIn(e);
|
this.docFocusInHandler = e => this.onDocFocusIn(e);
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
vn-popover {
|
.vn-popover {
|
||||||
display: none;
|
display: none;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
vn-textarea {
|
||||||
|
& > .mdl-textfield {
|
||||||
|
width: initial;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,5 +1,6 @@
|
||||||
import ngModule from '../../module';
|
import ngModule from '../../module';
|
||||||
import template from './textarea.html';
|
import template from './textarea.html';
|
||||||
|
import './style.scss';
|
||||||
|
|
||||||
directive.$inject = ['vnTemplate'];
|
directive.$inject = ['vnTemplate'];
|
||||||
export function directive(vnTemplate) {
|
export function directive(vnTemplate) {
|
||||||
|
|
|
@ -9,22 +9,22 @@
|
||||||
vn-popover="apps-menu"
|
vn-popover="apps-menu"
|
||||||
translate-attr="{title: 'Applications'}">
|
translate-attr="{title: 'Applications'}">
|
||||||
</vn-icon>
|
</vn-icon>
|
||||||
<vn-popover vn-id="apps-menu" ng-click="appsMenu.hide()">
|
<vn-menu vn-id="apps-menu">
|
||||||
<ul id="apps-menu" pad-small>
|
<ul pad-small>
|
||||||
<li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
|
<li ng-repeat="mod in ::$ctrl.modules" ui-sref="{{::mod.route.state}}">
|
||||||
<vn-icon icon="{{::mod.icon}}"></vn-icon>
|
<vn-icon icon="{{::mod.icon}}"></vn-icon>
|
||||||
<span translate>{{::mod.name}}</span>
|
<span translate>{{::mod.name}}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</vn-popover>
|
</vn-menu>
|
||||||
<vn-icon
|
<vn-icon
|
||||||
id="lang"
|
id="lang"
|
||||||
icon="language"
|
icon="language"
|
||||||
vn-popover="langs-menu"
|
vn-popover="langs-menu"
|
||||||
translate-attr="{title: 'Change language'}">
|
translate-attr="{title: 'Change language'}">
|
||||||
</vn-icon>
|
</vn-icon>
|
||||||
<vn-popover vn-id="langs-menu">
|
<vn-menu vn-id="langs-menu">
|
||||||
<ul id="langs-menu" pad-small>
|
<ul pad-small>
|
||||||
<li
|
<li
|
||||||
ng-repeat="lang in ::$ctrl.langs"
|
ng-repeat="lang in ::$ctrl.langs"
|
||||||
name="{{::lang}}"
|
name="{{::lang}}"
|
||||||
|
@ -32,7 +32,7 @@
|
||||||
<span>{{::lang}}</span>
|
<span>{{::lang}}</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</vn-popover>
|
</vn-menu>
|
||||||
<vn-icon
|
<vn-icon
|
||||||
id="logout"
|
id="logout"
|
||||||
icon="exit_to_app"
|
icon="exit_to_app"
|
||||||
|
|
|
@ -14,7 +14,7 @@ vn-main-menu {
|
||||||
color: #FF9300;
|
color: #FF9300;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
vn-popover ul {
|
.vn-popover ul {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: white;
|
color: white;
|
||||||
|
@ -25,7 +25,7 @@ vn-main-menu {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: .8em;
|
padding: .8em;
|
||||||
border-radius: .1em;
|
border-radius: .1em;
|
||||||
min-width: 4em;
|
min-width: 8em;
|
||||||
|
|
||||||
& > vn-icon {
|
& > vn-icon {
|
||||||
padding-right: .3em;
|
padding-right: .3em;
|
||||||
|
|
|
@ -23,7 +23,7 @@ Nightmare.action('changeLanguageToEnglish', function(done) {
|
||||||
this.then(done);
|
this.then(done);
|
||||||
} else {
|
} else {
|
||||||
this.click('#lang')
|
this.click('#lang')
|
||||||
.click('#langs-menu > li[name="en"]')
|
.click('vn-main-menu [vn-id="langs-menu"] ul > li[name="en"]')
|
||||||
.then(done);
|
.then(done);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -11,7 +11,7 @@
|
||||||
"port": 3306,
|
"port": 3306,
|
||||||
"database": "vn",
|
"database": "vn",
|
||||||
"user": "root",
|
"user": "root",
|
||||||
"password": ""
|
"password": "root"
|
||||||
},
|
},
|
||||||
"smtp": {
|
"smtp": {
|
||||||
"host": "localhost",
|
"host": "localhost",
|
||||||
|
|
|
@ -9,7 +9,7 @@
|
||||||
"port": 3306,
|
"port": 3306,
|
||||||
"database": "vn",
|
"database": "vn",
|
||||||
"user": "root",
|
"user": "root",
|
||||||
"password": ""
|
"password": "root"
|
||||||
},
|
},
|
||||||
"pdf": {
|
"pdf": {
|
||||||
"format": "A4",
|
"format": "A4",
|
||||||
|
|
Loading…
Reference in New Issue