Skip to content
This repository was archived by the owner on Feb 18, 2024. It is now read-only.

#456 - Textarea for edit dialog #492

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

#456 - Textarea for edit dialog #492

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e68623
Textarea for edit dialog
djhr Oct 18, 2016
8d60fc8
Update README.md
djhr Oct 18, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,7 @@ $mdEditDialog.small(options);
| `placeholder` | `string` | `null` | Placeholder text for input element. |
| `save` | `function` | `null` | A callback function for when the use clicks the save button. The callback will receive the [ngModelController](https://docs.angularjs.org/api/ng/type/ngModel.NgModelController). The dialog will close unless the callback returns a rejected promise. |
| `targetEvent` | `event` | `null` | The event object. This must be provided and it must be from a table cell. |
| `type` | `string` | `"text"` | The value of the `type` attribute on the `input` element. |
| `type` | `string` | `"text"` | The value of the `type` attribute on the `input` element, or `textarea` to render a `textarea` element (use `Shift+Enter` for newline). |
| `validators` | `object` | `null` | Optional attributes to be placed on the input element. |

The `small` method will return a `promise` that will resolve with the controller instance. The controller has two public methods, `dismiss` which will close the dialog without saving and `getInput` which will return the `ngModelController`.
Expand Down Expand Up @@ -289,7 +289,7 @@ $mdEditDialog.large(options);
| `save` | `function` | `null` | A callback function for when the use clicks the save button. The callback will receive the `ngModelController`. The dialog will close unless the callback returns a rejected promise. |
| `targetEvent` | `event` | `null` | The event object. This must be provided and it must be from a table cell. |
| `title` | `string` | `"Edit"` | Dialog title text. |
| `type` | `string` | `"text"` | The value of the `type` attribute on the `input` element. |
| `type` | `string` | `"text"` | The value of the `type` attribute on the `input` element, or `textarea` to render a `textarea` element. |
| `validators` | `object` | `null` | Optional attributes to be placed on the input element. |

The `large` method will return a `promise` that will resolve with the controller instance. The controller has two public methods, `dismiss` which will close the dialog without saving and `getInput` which will return the `ngModelController`.
Expand Down
83 changes: 30 additions & 53 deletions dist/md-data-table.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,10 @@ md-backdrop.md-edit-dialog-backdrop {
z-index: 80;
}
md-edit-dialog {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
z-index: 81;
background-color: #f9f9f9;
Expand Down Expand Up @@ -50,57 +48,47 @@ md-edit-dialog > .md-actions .md-button + .md-button {
margin-left: 8px;
}
.md-table-pagination {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-flex-wrap: wrap-reverse;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
box-sizing: border-box;
padding: 0 24px;
font-size: 12px;
color: rgba(0, 0, 0, 0.54);
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
.md-table-pagination md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
min-width: 64px;
}
.md-table-pagination md-select:not([disabled]):focus .md-select-value {
color: rgba(0, 0, 0, 0.54);
}
.md-table-pagination md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
.md-table-pagination md-select .md-select-value span.md-select-icon {
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
margin-right: -6px !important;
}
.md-table-pagination md-select .md-select-value span.md-select-icon:after {
top: initial;
-webkit-transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
transform: scaleY(0.5) scaleX(1);
}
.md-table-pagination > * {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
height: 56px;
}
.md-table-pagination > .buttons:not(:first-child),
Expand Down Expand Up @@ -128,22 +116,18 @@ md-select.md-table-select > .md-select-value {
md-select.md-table-select > .md-select-value > span {
display: block;
height: auto;
-webkit-transform: none !important;
transform: none !important;
transform: none !important;
}
md-select.md-table-select > .md-select-value > span > .md-text {
display: inherit;
height: inherit;
-webkit-transform: inherit;
transform: inherit;
transform: inherit;
}
md-select.md-table-select > .md-select-value > span.md-select-icon {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-align: center;
align-items: center;
height: 24px;
margin: 0;
}
Expand Down Expand Up @@ -271,16 +255,13 @@ table.md-table th.md-column md-icon {
table.md-table th.md-column md-icon.md-sort-icon {
color: rgba(0, 0, 0, 0.26);
opacity: 0;
transition: -webkit-transform 0.25s, opacity 0.25s;
transition: transform 0.25s, opacity 0.25s;
}
table.md-table th.md-column md-icon.md-sort-icon.md-asc {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
table.md-table th.md-column md-icon.md-sort-icon.md-desc {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
transform: rotate(180deg);
}
table.md-table th.md-column md-icon:not(:first-child) {
margin-left: 8px;
Expand Down Expand Up @@ -368,27 +349,23 @@ table.md-table td.md-cell {
border-top: 1px rgba(0, 0, 0, 0.12) solid;
}
table.md-table td.md-cell.md-numeric md-select {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
table.md-table td.md-cell.md-numeric md-select .md-select-value {
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
}
table.md-table td.md-cell.md-placeholder {
color: rgba(0, 0, 0, 0.26);
}
table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon {
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
color: rgba(0, 0, 0, 0.54);
width: 18px;
text-align: right;
}
table.md-table td.md-cell md-select > .md-select-value > span.md-select-icon:after {
-webkit-transform: scaleY(0.4) scaleX(0.8);
transform: scaleY(0.4) scaleX(0.8);
transform: scaleY(0.4) scaleX(0.8);
}
78 changes: 44 additions & 34 deletions dist/md-data-table.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,9 +369,9 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,

positionDialog(element, options.target);

if(options.focusOnOpen) {
focusOnOpen(element);
}
if(options.focusOnOpen) {
focusOnOpen(element);
}

if(options.clickOutsideToClose) {
backdrop.on('click', function () {
Expand Down Expand Up @@ -484,14 +484,14 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
});
}

function focusOnOpen(element) {
$mdUtil.nextTick(function () {
function focusOnOpen(element) {
$mdUtil.nextTick(function () {
var autofocus = $mdUtil.findFocusTarget(element);

if(autofocus) {
autofocus.focus();
}
}, false);
if(autofocus) {
autofocus.focus();
}
}, false);
}

function positionDialog(element, target) {
Expand Down Expand Up @@ -556,41 +556,48 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
}

function preset(size, options) {

function getAttrs() {
var attrs = 'type="' + (options.type || 'text') + '"';
var attrs = '';

for(var attr in options.validators) {
attrs += ' ' + attr + '="' + options.validators[attr] + '"';
}

return attrs;
}

return {
controller: ['$element', '$q', 'save', '$scope', function ($element, $q, save, $scope) {
function update() {
if($scope.editDialog.$invalid) {
return $q.reject();
}

if(angular.isFunction(save)) {
return $q.when(save($scope.editDialog.input));
}

return $q.resolve();
}

this.dismiss = function () {
$element.remove();
};

this.getInput = function () {
return $scope.editDialog.input;
};

$scope.dismiss = this.dismiss;
$scope.keydown = function(e) {
if ($scope.size == 'small' && e.keyCode == 13 && !e.shiftKey) {
e.preventDefault();
$scope.submit();
}
};

$scope.dismiss = this.dismiss;

$scope.submit = function () {
update().then(function () {
$scope.dismiss();
Expand All @@ -607,25 +614,28 @@ function mdEditDialog($compile, $controller, $document, $mdUtil, $q, $rootScope,
ok: options.ok || 'Save',
placeholder: options.placeholder,
title: options.title,
type: options.type || 'text',
size: size
},
template:
'<md-edit-dialog>' +
'<div layout="column" class="md-content">' +
'<div ng-if="size === \'large\'" class="md-title">{{title || \'Edit\'}}</div>' +
'<form name="editDialog" layout="column" ng-submit="submit(model)">' +
'<md-input-container md-no-float>' +
'<input name="input" ng-model="model" md-autofocus placeholder="{{placeholder}} "' + getAttrs() + '>' +
'<div ng-messages="editDialog.input.$error">' +
'<div ng-repeat="(key, message) in messages" ng-message="{{key}}">{{message}}</div>' +
'</div>' +
'</md-input-container>' +
'</form>' +
'</div>' +
'<div ng-if="size === \'large\'" layout="row" layout-align="end" class="md-actions">' +
'<md-button class="md-primary" ng-click="dismiss()">{{cancel}}</md-button>' +
'<md-button class="md-primary" ng-click="submit()">{{ok}}</md-button>' +
'</div>' +
' <div layout="column" class="md-content">' +
' <div ng-if="size === \'large\'" class="md-title">{{title || \'Edit\'}}</div>' +
' <form name="editDialog" layout="column" ng-submit="submit(model)">' +
' <md-input-container md-no-float>' +
' <input ng-if="type !== \'textarea\'" type="{{type}}" aria-label="{{placeholder}}" name="input" ng-model="model" md-autofocus placeholder="{{placeholder}} "' + getAttrs() + '>' +
' <textarea ng-if="type === \'textarea\'" ng-keydown="keydown($event)" aria-label="{{placeholder}}" name="input" ng-model="model" md-autofocus placeholder="{{placeholder}} "' + getAttrs() + '>' +
' </textarea>' +
' <div ng-messages="editDialog.input.$error">' +
' <div ng-repeat="(key, message) in messages" ng-message="{{key}}">{{message}}</div>' +
' </div>' +
' </md-input-container>' +
' </form>' +
' </div>' +
' <div ng-if="size === \'large\'" layout="row" layout-align="end" class="md-actions">' +
' <md-button class="md-primary" ng-click="dismiss()">{{cancel}}</md-button>' +
' <md-button class="md-primary" ng-click="submit()">{{ok}}</md-button>' +
' </div>' +
'</md-edit-dialog>'
};
}
Expand Down
Loading