vnTextarea style fix, new component vnMenu wich extends vnPopover

This commit is contained in:
Juan 2018-03-13 12:07:28 +01:00
parent 6b1ad875cb
commit 3fd4e29429
12 changed files with 52 additions and 14 deletions

View File

@ -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();

View File

@ -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';

View File

@ -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: '&?'
}
});

View File

@ -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);

View File

@ -1,4 +1,4 @@
vn-popover { .vn-popover {
display: none; display: none;
z-index: 10; z-index: 10;
position: fixed; position: fixed;

View File

@ -0,0 +1,6 @@
vn-textarea {
& > .mdl-textfield {
width: initial;
display: block;
}
}

View File

@ -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) {

View File

@ -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"

View File

@ -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;

View File

@ -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);
} }
}); });

View File

@ -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",

View File

@ -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",