mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: move PageHeader
component to angular folder (#88556)
move page-header component to angular folder, scss to angular.scss
This commit is contained in:
parent
cdb6b13c7e
commit
e781716a38
@ -1148,10 +1148,6 @@ exports[`better eslint`] = {
|
||||
"public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"]
|
||||
],
|
||||
"public/app/core/components/PageHeader/PageHeader.tsx:5381": [
|
||||
[0, 0, 0, "Styles should be written using objects.", "0"],
|
||||
[0, 0, 0, "Styles should be written using objects.", "1"]
|
||||
],
|
||||
"public/app/core/components/PageNotFound/EntityNotFound.tsx:5381": [
|
||||
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
|
||||
[0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
|
||||
@ -7795,6 +7791,10 @@ exports[`no gf-form usage`] = {
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/angular/components/PageHeader/PageHeader.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/angular/components/code_editor/code_editor.ts:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
@ -7877,10 +7877,6 @@ exports[`no gf-form usage`] = {
|
||||
"public/app/core/components/AccessControl/PermissionList.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/core/components/PageHeader/PageHeader.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
|
||||
],
|
||||
"public/app/features/admin/UserLdapSyncInfo.tsx:5381": [
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
|
||||
|
@ -17,11 +17,12 @@ import { QueryEditor as CloudMonitoringQueryEditor } from 'app/plugins/datasourc
|
||||
|
||||
import EmptyListCTA from '../core/components/EmptyListCTA/EmptyListCTA';
|
||||
import { Footer } from '../core/components/Footer/Footer';
|
||||
import { PageHeader } from '../core/components/PageHeader/PageHeader';
|
||||
import { MetricSelect } from '../core/components/Select/MetricSelect';
|
||||
import { TagFilter } from '../core/components/TagFilter/TagFilter';
|
||||
import { HelpModal } from '../core/components/help/HelpModal';
|
||||
|
||||
import { PageHeader } from './components/PageHeader/PageHeader';
|
||||
|
||||
const { SecretFormField } = LegacyForms;
|
||||
|
||||
export function registerAngularDirectives() {
|
||||
|
@ -3,11 +3,12 @@ import React from 'react';
|
||||
|
||||
import { NavModelItem, GrafanaTheme2 } from '@grafana/data';
|
||||
import { Tab, TabsBar, Icon, useStyles2, toIconName } from '@grafana/ui';
|
||||
import { PanelHeaderMenuItem } from 'app/core/components/PageHeader/PanelHeaderMenuItem';
|
||||
|
||||
import { PageInfoItem } from '../Page/types';
|
||||
import { PageInfo } from '../PageInfo/PageInfo';
|
||||
import { ProBadge } from '../Upgrade/ProBadge';
|
||||
import { PageInfoItem } from '../../../core/components/Page/types';
|
||||
import { PageInfo } from '../../../core/components/PageInfo/PageInfo';
|
||||
import { ProBadge } from '../../../core/components/Upgrade/ProBadge';
|
||||
|
||||
import { PanelHeaderMenuItem } from './PanelHeaderMenuItem';
|
||||
|
||||
export interface Props {
|
||||
navItem: NavModelItem;
|
@ -1162,3 +1162,109 @@ div.editor-option label {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-header {
|
||||
margin-top: $space-md;
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
margin-left: $space-md;
|
||||
|
||||
// better align icons
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__inner {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
padding: $space-lg 0;
|
||||
}
|
||||
|
||||
.page-header__title {
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: 1px;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.page-header__img {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-header__icon {
|
||||
font-size: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
color: $text-color-weak;
|
||||
|
||||
&.fa {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.gicon {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.icon-gf {
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__logo {
|
||||
margin: -1px $spacer -1px 0;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.page-header__sub-title {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.page-header-stamps-type {
|
||||
color: $link-color-disabled;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-header__select-nav {
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__link {
|
||||
color: $text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-header__tabs {
|
||||
display: none;
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-breadcrumbs {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
counter-reset: flag;
|
||||
}
|
||||
|
@ -43,7 +43,6 @@
|
||||
@import 'components/row';
|
||||
@import 'components/json_explorer';
|
||||
@import 'components/dashboard_grid';
|
||||
@import 'components/page_header';
|
||||
@import 'components/add_data_source';
|
||||
@import 'components/panel_header';
|
||||
|
||||
|
@ -1,105 +0,0 @@
|
||||
.page-header {
|
||||
margin-top: $space-md;
|
||||
|
||||
.btn {
|
||||
float: right;
|
||||
margin-left: $space-md;
|
||||
|
||||
// better align icons
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__inner {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
padding: $space-lg 0;
|
||||
}
|
||||
|
||||
.page-header__title {
|
||||
font-size: $font-size-h2;
|
||||
margin-bottom: 1px;
|
||||
padding-top: $spacer;
|
||||
}
|
||||
|
||||
.page-header__img {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.page-header__icon {
|
||||
font-size: 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
color: $text-color-weak;
|
||||
|
||||
&.fa {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.gicon {
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
&.icon-gf {
|
||||
top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__logo {
|
||||
margin: -1px $spacer -1px 0;
|
||||
color: $text-color-weak;
|
||||
}
|
||||
|
||||
.page-header__sub-title {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
||||
.page-header-stamps-type {
|
||||
color: $link-color-disabled;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.page-header__select-nav {
|
||||
margin-bottom: 10px;
|
||||
max-width: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header__link {
|
||||
color: $text-color;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.page-header__tabs {
|
||||
display: none;
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.page-breadcrumbs {
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
display: inline-block;
|
||||
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
|
||||
overflow: hidden;
|
||||
border-radius: 5px;
|
||||
counter-reset: flag;
|
||||
}
|
Loading…
Reference in New Issue
Block a user