Chore: move PageHeader component to angular folder (#88556)

move page-header component to angular folder, scss to angular.scss
This commit is contained in:
Ashley Harrison 2024-06-03 11:47:47 +01:00 committed by GitHub
parent cdb6b13c7e
commit e781716a38
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 117 additions and 119 deletions

View File

@ -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"],

View File

@ -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() {

View File

@ -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;

View File

@ -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;
}

View File

@ -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';

View File

@ -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;
}