github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

disable filter pill edit button when filter is controlled by input control (#14971)

Browse source 
* disable filter pill edit button when filter is controlled by panel

* use span insted of i for icons

* update text to say Kibana
This commit is contained in:
Nathan Reese 2018-03-20 11:14:55 -06:00 • committed by GitHub
parent 82e17f435f
commit 0ca3984503
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 25 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/ui/public/filter_bar/filter_bar.less
View file

@ -124,6 +124,11 @@ filter-bar {
.unpinned {
.opacity(.7);
}
.fa-disabled {
opacity: 0.7;
cursor: not-allowed;
}
}
}

24
src/ui/public/filter_bar/filter_pill/filter_pill.html
View file

@ -12,7 +12,7 @@
tabindex="0"
aria-disabled="{{pill.filter.meta.disabled}}"
>
<span ng-if="pill.filter.$state.store == 'globalState'"><i class="fa fa-fw fa-thumb-tack pinned"></i></span>
<span ng-if="pill.filter.$state.store == 'globalState'"><span class="fa fa-fw fa-thumb-tack pinned"></span></span>
<span ng-if="pill.filter.meta.negate">NOT</span>
<span ng-if="pill.filter.meta.alias">{{ pill.filter.meta.alias }}</span>
<span ng-if="!pill.filter.meta.alias">{{ pill.filter.meta.key }}:</span>
@ -28,8 +28,8 @@
ng-blur="pill.deactivateActions()"
aria-label="{{pill.filter.meta.disabled ? 'Enable filter' : 'Disable filter'}}"
>
<i ng-show="pill.filter.meta.disabled" class="fa fa-fw fa-square-o disabled"></i>
<i ng-hide="pill.filter.meta.disabled" class="fa fa-fw fa-check-square-o enabled"></i>
<span ng-show="pill.filter.meta.disabled" class="fa fa-fw fa-square-o disabled"></span>
<span ng-hide="pill.filter.meta.disabled" class="fa fa-fw fa-check-square-o enabled"></span>
</button>
<button
@ -40,8 +40,8 @@
ng-blur="pill.deactivateActions()"
aria-label="{{pill.filter.$state.store == 'globalState' ? 'Unpin filter' : 'Pin filter'}}"
>
<i ng-show="pill.filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack pinned"></i>
<i ng-hide="pill.filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack fa-rotate-270 unpinned"></i>
<span ng-show="pill.filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack pinned"></span>
<span ng-hide="pill.filter.$state.store == 'globalState'" class="fa fa-fw fa-thumb-tack fa-rotate-270 unpinned"></span>
</button>
<button
@ -52,8 +52,8 @@
ng-blur="pill.deactivateActions()"
aria-label="Invert filter"
>
<i ng-show="pill.filter.meta.negate" class="fa fa-fw fa-search-plus negative"></i>
<i ng-hide="pill.filter.meta.negate" class="fa fa-fw fa-search-minus positive"></i>
<span ng-show="pill.filter.meta.negate" class="fa fa-fw fa-search-plus negative"></span>
<span ng-hide="pill.filter.meta.negate" class="fa fa-fw fa-search-minus positive"></span>
</button>
<button
@ -63,18 +63,24 @@
ng-blur="pill.deactivateActions()"
aria-label="Remove filter"
>
<i class="fa fa-fw fa-trash" data-test-subj="removeFilter-{{ pill.filter.meta.key }}"></i>
<span class="fa fa-fw fa-trash" data-test-subj="removeFilter-{{ pill.filter.meta.key }}"></span>
</button>
<button
class="action filter-edit"
ng-click="pill.onEditFilter(pill.filter)"
ng-disabled="pill.isControlledByPanel()"
ng-focus="pill.activateActions()"
ng-blur="pill.deactivateActions()"
aria-label="Edit filter"
data-test-subj="editFilter"
>
<i class="fa fa-fw fa-edit"></i>
<span
ng-show="pill.isControlledByPanel()"
tooltip="Edit disabled because filter is controlled by Kibana"
class="fa fa-fw fa-edit fa-disabled"
></span>
<span ng-hide="pill.isControlledByPanel()" class="fa fa-fw fa-edit"></span>
</button>
</div>

5
src/ui/public/filter_bar/filter_pill/filter_pill.js
View file

@ -1,3 +1,4 @@
import _ from 'lodash';
import template from './filter_pill.html';
import { uiModules } from 'ui/modules';
@ -27,6 +28,10 @@ module.directive('filterPill', function () {
this.areActionsActivated = false;
};
this.isControlledByPanel = () => {
return _.has(this.filter, 'meta.controlledBy');
};
}
};
});