rancher
/
ui
mirror of https://github.com/rancher/ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Option to allow multiline values in form-key-value (rancher/rancher#4317)

This commit is contained in:
Vincent Fiduccia 2016-04-07 12:43:55 -07:00
parent 1c017bbb69
commit a1b37476b9
4 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/components/form-key-value/component.js
View File

@ -63,6 +63,7 @@ export default Ember.Component.extend({
valuePlaceholder: 'Value', valuePlaceholder: 'Value',
allowEmptyValue: false, allowEmptyValue: false,
addInitialEmptyRow: false, addInitialEmptyRow: false,
allowMultilineValue: true,
ary: null, ary: null,
asMap: null, asMap: null,

14
app/components/form-key-value/template.hbs
View File

@ -10,19 +10,23 @@
</tr> </tr>
{{#each ary as |row|}} {{#each ary as |row|}}
<tr> <tr>
<td data-title="Key"> <td class="valign-top" data-title="Key">
{{input-paste pasted="pastedLabels" class="form-control input-sm key" type="text" value=row.key placeholder=keyPlaceholder}} {{input-paste pasted="pastedLabels" class="form-control input-sm key" type="text" value=row.key placeholder=keyPlaceholder}}
</td> </td>
<td class="text-center"> <td class="valign-top text-center">
<p class="form-control-static input-sm">=</p> <p class="form-control-static input-sm">=</p>
</td> </td>
<td data-title="Value"> <td class="valign-top" data-title="Value">
{{input class="form-control input-sm value" type="text" value=row.value placeholder=valuePlaceholder}} {{#if allowMultilineValue}}
{{textarea-autogrow class="form-control input-sm value" value=row.value placeholder=valuePlaceholder}}
{{else}}
{{input class="form-control input-sm value" type="text" value=row.value placeholder=valuePlaceholder}}
{{/if}}
</td> </td>
<td class="text-right"> <td class="valign-top text-right">
<button class="btn btn-primary btn-sm" {{action "remove" row}}><i class="icon icon-minus"/></button> <button class="btn btn-primary btn-sm" {{action "remove" row}}><i class="icon icon-minus"/></button>
</td> </td>
</tr> </tr>

15
app/components/textarea-autogrow/component.js
View File

@ -2,14 +2,15 @@ import Ember from 'ember';
import { isGecko } from 'ui/utils/platform'; import { isGecko } from 'ui/utils/platform';
export default Ember.TextArea.extend({ export default Ember.TextArea.extend({
tagName: 'textarea',
text: null, text: null,
classNames: [], minHeight: 0,
paddingAndBorder: null,
minHeight: 43,
maxHeight: 200, maxHeight: 200,
tagName: 'textarea',
classNames: ['no-resize'],
didInsertElement() { didInsertElement() {
this.set('minHeight', ( this.get('isSmall') ? 31 : 43));
this.autoSize(); this.autoSize();
this.$().on('paste', () => { this.$().on('paste', () => {
@ -21,6 +22,10 @@ export default Ember.TextArea.extend({
this.autoSize(); this.autoSize();
}, },
isSmall: function() {
return this.$().hasClass('input-sm');
}.property(),
autoSize() { autoSize() {
let el = this.element; let el = this.element;
let $el = $(el); let $el = $(el);
@ -29,7 +34,7 @@ export default Ember.TextArea.extend({
$el.css('height', '1px'); $el.css('height', '1px');
let border = parseInt($el.css('borderTopWidth'),10)||0 + parseInt($el.css('borderBottomWidth'),10)||0; let border = parseInt($el.css('borderTopWidth'),10)||0 + parseInt($el.css('borderBottomWidth'),10)||0;
let magic = ( isGecko ? 1 : 2); // Sigh, but it's wrong without magic fudge let magic = (this.get('isSmall') ? -2 : 0) + ( isGecko ? 1 : 2); // Sigh, but it's wrong without magic fudge
let neu = Math.max(this.get('minHeight'), Math.min(el.scrollHeight + border + magic, this.get('maxHeight'))); let neu = Math.max(this.get('minHeight'), Math.min(el.scrollHeight + border + magic, this.get('maxHeight')));
$el.css('overflowY', (el.scrollHeight > neu ? 'auto' : 'hidden')); $el.css('overflowY', (el.scrollHeight > neu ? 'auto' : 'hidden'));

14
app/styles/layout/_layout.scss
View File

@ -29,10 +29,22 @@ B {
background-color : $midGray; background-color : $midGray;
} }
.inline-block { .inline-block {
display : inline-block; display : inline-block;
} }
.valign-top {
vertical-align: top;
}
.valign-middle {
vertical-align: middle;
}
.valign-bottom {
vertical-align: bottom;
}
/********** /**********
* Articles (above the page info/warnings) * Articles (above the page info/warnings)
**********/ **********/