mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Merge remote-tracking branch 'origin/10190_fix_select_icon_and_firefox'
This commit is contained in:
commit
4acf6b0eee
@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import { NavModel, NavModelItem } from '../../nav_model_srv';
|
||||
import classNames from 'classnames';
|
||||
import appEvents from 'app/core/app_events';
|
||||
import React from "react";
|
||||
import { NavModel, NavModelItem } from "../../nav_model_srv";
|
||||
import classNames from "classnames";
|
||||
import appEvents from "app/core/app_events";
|
||||
|
||||
export interface IProps {
|
||||
model: NavModel;
|
||||
@ -9,12 +9,12 @@ export interface IProps {
|
||||
|
||||
function TabItem(tab: NavModelItem) {
|
||||
if (tab.hideFromTabs) {
|
||||
return (null);
|
||||
return null;
|
||||
}
|
||||
|
||||
let tabClasses = classNames({
|
||||
'gf-tabs-link': true,
|
||||
active: tab.active,
|
||||
"gf-tabs-link": true,
|
||||
active: tab.active
|
||||
});
|
||||
|
||||
return (
|
||||
@ -28,8 +28,9 @@ function TabItem(tab: NavModelItem) {
|
||||
}
|
||||
|
||||
function SelectOption(navItem: NavModelItem) {
|
||||
if (navItem.hideFromTabs) { // TODO: Rename hideFromTabs => hideFromNav
|
||||
return (null);
|
||||
if (navItem.hideFromTabs) {
|
||||
// TODO: Rename hideFromTabs => hideFromNav
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
@ -39,14 +40,22 @@ function SelectOption(navItem: NavModelItem) {
|
||||
);
|
||||
}
|
||||
|
||||
function Navigation({main}: {main: NavModelItem}) {
|
||||
return (<nav>
|
||||
<SelectNav customCss="page-header__select_nav" main={main} />
|
||||
<Tabs customCss="page-header__tabs" main={main} />
|
||||
</nav>);
|
||||
function Navigation({ main }: { main: NavModelItem }) {
|
||||
return (
|
||||
<nav>
|
||||
<SelectNav customCss="page-header__select-nav" main={main} />
|
||||
<Tabs customCss="page-header__tabs" main={main} />
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
|
||||
function SelectNav({
|
||||
main,
|
||||
customCss
|
||||
}: {
|
||||
main: NavModelItem;
|
||||
customCss: string;
|
||||
}) {
|
||||
const defaultSelectedItem = main.children.find(navItem => {
|
||||
return navItem.active === true;
|
||||
});
|
||||
@ -54,17 +63,32 @@ function SelectNav({main, customCss}: {main: NavModelItem, customCss: string}) {
|
||||
const gotoUrl = evt => {
|
||||
var element = evt.target;
|
||||
var url = element.options[element.selectedIndex].value;
|
||||
appEvents.emit('location-change', {href: url});
|
||||
appEvents.emit("location-change", { href: url });
|
||||
};
|
||||
|
||||
return (<select
|
||||
className={`gf-select-nav ${customCss}`}
|
||||
defaultValue={defaultSelectedItem.url}
|
||||
onChange={gotoUrl}>{main.children.map(SelectOption)}</select>);
|
||||
return (
|
||||
<div className={`gf-form-select-wrapper width-20 ${customCss}`}>
|
||||
<label
|
||||
className={`gf-form-select-icon ${defaultSelectedItem.icon}`}
|
||||
htmlFor="page-header-select-nav"
|
||||
/>
|
||||
{/* Label to make it clickable */}
|
||||
<select
|
||||
className="gf-select-nav gf-form-input"
|
||||
defaultValue={defaultSelectedItem.url}
|
||||
onChange={gotoUrl}
|
||||
id="page-header-select-nav"
|
||||
>
|
||||
{main.children.map(SelectOption)}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Tabs({main, customCss}: {main: NavModelItem, customCss: string}) {
|
||||
return <ul className={`gf-tabs ${customCss}`}>{main.children.map(TabItem)}</ul>;
|
||||
function Tabs({ main, customCss }: { main: NavModelItem; customCss: string }) {
|
||||
return (
|
||||
<ul className={`gf-tabs ${customCss}`}>{main.children.map(TabItem)}</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default class PageHeader extends React.Component<IProps, any> {
|
||||
@ -77,7 +101,11 @@ export default class PageHeader extends React.Component<IProps, any> {
|
||||
for (let i = 0; i < breadcrumbs.length; i++) {
|
||||
const bc = breadcrumbs[i];
|
||||
if (bc.url) {
|
||||
breadcrumbsResult.push(<a className="text-link" key={i} href={bc.url}>{bc.title}</a>);
|
||||
breadcrumbsResult.push(
|
||||
<a className="text-link" key={i} href={bc.url}>
|
||||
{bc.title}
|
||||
</a>
|
||||
);
|
||||
} else {
|
||||
breadcrumbsResult.push(<span key={i}> / {bc.title}</span>);
|
||||
}
|
||||
@ -95,12 +123,15 @@ export default class PageHeader extends React.Component<IProps, any> {
|
||||
|
||||
<div className="page-header__info-block">
|
||||
{main.text && <h1 className="page-header__title">{main.text}</h1>}
|
||||
{main.breadcrumbs && main.breadcrumbs.length > 0 && (
|
||||
<h1 className="page-header__title">
|
||||
{this.renderBreadcrumb(main.breadcrumbs)}
|
||||
</h1>)
|
||||
}
|
||||
{main.subTitle && <div className="page-header__sub-title">{main.subTitle}</div>}
|
||||
{main.breadcrumbs &&
|
||||
main.breadcrumbs.length > 0 && (
|
||||
<h1 className="page-header__title">
|
||||
{this.renderBreadcrumb(main.breadcrumbs)}
|
||||
</h1>
|
||||
)}
|
||||
{main.subTitle && (
|
||||
<div className="page-header__sub-title">{main.subTitle}</div>
|
||||
)}
|
||||
{main.subType && (
|
||||
<div className="page-header__stamps">
|
||||
<i className={main.subType.icon} />
|
||||
|
@ -60,20 +60,24 @@
|
||||
switch-class="gf-form-switch--transparent gf-form-switch--search-result-filter-row__checkbox"
|
||||
/>
|
||||
<div class="search-results-filter-row__filters">
|
||||
<select
|
||||
class="search-results-filter-row__filters-item gf-form-input"
|
||||
ng-model="ctrl.selectedStarredFilter"
|
||||
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
|
||||
ng-change="ctrl.onStarredFilterChange()"
|
||||
ng-show="!(ctrl.canMove || ctrl.canDelete)"
|
||||
/>
|
||||
<select
|
||||
class="search-results-filter-row__filters-item gf-form-input"
|
||||
ng-model="ctrl.selectedTagFilter"
|
||||
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
|
||||
ng-change="ctrl.onTagFilterChange()"
|
||||
ng-show="!(ctrl.canMove || ctrl.canDelete)"
|
||||
/>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select
|
||||
class="search-results-filter-row__filters-item gf-form-input"
|
||||
ng-model="ctrl.selectedStarredFilter"
|
||||
ng-options="t.text disable when t.disabled for t in ctrl.starredFilterOptions"
|
||||
ng-change="ctrl.onStarredFilterChange()"
|
||||
ng-show="!(ctrl.canMove || ctrl.canDelete)"
|
||||
/>
|
||||
</div>
|
||||
<div class="gf-form-select-wrapper">
|
||||
<select
|
||||
class="search-results-filter-row__filters-item gf-form-input"
|
||||
ng-model="ctrl.selectedTagFilter"
|
||||
ng-options="t.term disable when t.disabled for t in ctrl.tagFilterOptions"
|
||||
ng-change="ctrl.onTagFilterChange()"
|
||||
ng-show="!(ctrl.canMove || ctrl.canDelete)"
|
||||
/>
|
||||
</div>
|
||||
<div class="gf-form-button-row" ng-show="ctrl.canMove || ctrl.canDelete">
|
||||
<button type="button"
|
||||
class="btn gf-form-button btn-inverse"
|
||||
|
@ -111,7 +111,7 @@ $input-border: 1px solid $input-border-color;
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
color: $text-color-weak
|
||||
color: $text-color-weak;
|
||||
}
|
||||
}
|
||||
|
||||
@ -248,12 +248,30 @@ $input-border: 1px solid $input-border-color;
|
||||
position: relative;
|
||||
background-color: $input-bg;
|
||||
|
||||
.gf-form-select-icon {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: $input-padding-x;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
|
||||
& + .gf-form-input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-left: $input-padding-x*3;
|
||||
background-color: transparent;
|
||||
|
||||
option {
|
||||
// Firefox
|
||||
color: $black;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select.gf-form-input {
|
||||
text-indent: 0.01px;
|
||||
text-overflow: "";
|
||||
padding-right: $input-padding-x*4;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux.
|
||||
padding-right: $input-padding-x*3;
|
||||
appearance: none;
|
||||
|
||||
&:-moz-focusring {
|
||||
|
@ -69,8 +69,9 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-header__select_nav {
|
||||
.page-header__select-nav {
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none;
|
||||
|
Loading…
Reference in New Issue
Block a user