Skip to content

Commit

Permalink
Add kuiLocalTab-isDisabled state.
Browse files Browse the repository at this point in the history
Backports PR #10830

**Commit 1:**
Add kuiLocalTab-isDisabled state.

* Original sha: 4f56c32
* Authored by CJ Cenizal <[email protected]> on 2017-03-21T18:47:09Z

**Commit 2:**
Update Management header to use kuiLocalTab-isDisabled class.

* Original sha: 93ceb5f
* Authored by CJ Cenizal <[email protected]> on 2017-03-22T19:42:33Z
  • Loading branch information
elastic-jasper committed Mar 24, 2017
1 parent 6e4e1a3 commit 3d27de3
Show file tree
Hide file tree
Showing 4 changed files with 24 additions and 7 deletions.
2 changes: 1 addition & 1 deletion src/core_plugins/kibana/public/management/app.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
ng-if="sectionName"
ng-repeat="item in section.visibleItems"
class="kuiLocalTab"
ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-disabled': item.disabled || !item.url }"
ng-class="{ 'kuiLocalTab-isSelected': item.active, 'kuiLocalTab-isDisabled': !item.active && (item.disabled || !item.url) }"
kbn-href="{{::item.disabled ? '' : item.url}}"
data-test-subj="{{::item.name}}"
tooltip="{{::item.tooltip}}"
Expand Down
13 changes: 11 additions & 2 deletions ui_framework/components/local_nav/_local_tabs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
text-decoration: none;
cursor: pointer;

&:hover,
&:active {
&:hover:not(.kuiLocalTab-isDisabled),
&:active:not(.kuiLocalTab-isDisabled) {
color: $localTabTextColor-isHover;

@include darkTheme {
Expand All @@ -39,6 +39,15 @@
}
}

/**
* 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
* a regular cursor instead of setting pointer-events: none.
*/
&.kuiLocalTab-isDisabled {
opacity: 0.5;
cursor: default; /* 1 */
}

& + & {
margin-left: 15px;
}
Expand Down
14 changes: 11 additions & 3 deletions ui_framework/dist/ui_framework.css
Original file line number Diff line number Diff line change
Expand Up @@ -1258,10 +1258,14 @@ body {
color: #5a5a5a;
border-bottom: 2px solid transparent;
text-decoration: none;
cursor: pointer; }
.kuiLocalTab:hover, .kuiLocalTab:active {
cursor: pointer;
/**
* 1. We may want to show a tooltip to explain why the tab is disabled, so we will just show
* a regular cursor instead of setting pointer-events: none.
*/ }
.kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
color: #000000; }
.theme-dark .kuiLocalTab:hover, .theme-dark .kuiLocalTab:active {
.theme-dark .kuiLocalTab:hover:not(.kuiLocalTab-isDisabled), .theme-dark .kuiLocalTab:active:not(.kuiLocalTab-isDisabled) {
color: #ffffff; }
.kuiLocalTab.kuiLocalTab-isSelected {
color: #000000;
Expand All @@ -1270,6 +1274,10 @@ body {
.theme-dark .kuiLocalTab.kuiLocalTab-isSelected {
color: #ffffff;
border-bottom-color: #ffffff; }
.kuiLocalTab.kuiLocalTab-isDisabled {
opacity: 0.5;
cursor: default;
/* 1 */ }
.kuiLocalTab + .kuiLocalTab {
margin-left: 15px; }
.theme-dark .kuiLocalTab {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
Your Documents
</a>

<a class="kuiLocalTab" href="#">
<a class="kuiLocalTab kuiLocalTab-isDisabled" href="#">
Another Tab
</a>
</div>
Expand Down

0 comments on commit 3d27de3

Please sign in to comment.