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

Fix searchable select style issue 

https://github.com/rancher/rancher/issues/11258
This commit is contained in:
loganhz 2018-02-01 15:48:11 +08:00
parent 6329d214fa
commit 6577b18f44
3 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/styles/components/_searchable-select.scss
View File

@ -43,7 +43,6 @@
} }
.searchable-options { .searchable-options {
max-height: 285px;
overflow-y: scroll; overflow-y: scroll;
background: $input-bg; background: $input-bg;
position: absolute; position: absolute;

9
lib/shared/addon/components/searchable-select/component.js
View File

@ -25,7 +25,9 @@ import { next } from '@ember/runloop';
import { get, set, computed, observer } from '@ember/object'; import { get, set, computed, observer } from '@ember/object';
import C from 'ui/utils/constants'; import C from 'ui/utils/constants';
import layout from './template'; import layout from './template';
import { htmlSafe } from '@ember/string';
import { on } from '@ember/object/evented'; import { on } from '@ember/object/evented';
const MAX_HEIGHT = 285;
export default Component.extend({ export default Component.extend({
layout, layout,
@ -56,6 +58,7 @@ export default Component.extend({
filter: null, filter: null,
// the current highlighted option. // the current highlighted option.
$activeTarget: null, $activeTarget: null,
maxHeight: MAX_HEIGHT,
actions: { actions: {
selectUnGroupedItem(idx) { selectUnGroupedItem(idx) {
@ -84,6 +87,8 @@ export default Component.extend({
if (this.get('showOptions') === true) { if (this.get('showOptions') === true) {
return; return;
} }
const toBottom = $('body').height() - $(this.$()[0]).offset().top - 60;
this.set('maxHeight', toBottom < MAX_HEIGHT ? toBottom : MAX_HEIGHT)
this.set('filter', null); this.set('filter', null);
// select text inside input search box, which will let users easey to clear the inputed text. // select text inside input search box, which will let users easey to clear the inputed text.
// this.$('.input-search').select(); // this.$('.input-search').select();
@ -121,6 +126,10 @@ export default Component.extend({
this.off(); this.off();
}, },
optionsMaxHeightCss: computed('maxHeight', function() {
return htmlSafe('max-height: ' + this.get('maxHeight') + 'px');
}),
// Show option image --> unGroupedContent only // Show option image --> unGroupedContent only
showOptionIcon: computed('unGroupedContent.@each.imgUrl', function () { showOptionIcon: computed('unGroupedContent.@each.imgUrl', function () {
return this.get('unGroupedContent').some(item => !!item.imgUrl); return this.get('unGroupedContent').some(item => !!item.imgUrl);

2
lib/shared/addon/components/searchable-select/template.hbs
View File

@ -2,7 +2,7 @@
{{input disabled=readOnly class=(concat 'form-control input-search search ' class) placeholder=placeholder type="text" autocomplete="off" value=filter}} {{input disabled=readOnly class=(concat 'form-control input-search search ' class) placeholder=placeholder type="text" autocomplete="off" value=filter}}
{{#if showOptions}} {{#if showOptions}}
<section class="searchable-options"> <section class="searchable-options" style={{optionsMaxHeightCss}}>
{{#if prompt}} {{#if prompt}}
<div <div
class="searchable-option searchable-prompt" class="searchable-option searchable-prompt"