+
);
}
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ container: css({
+ position: 'fixed',
+ bottom: 0,
+ right: 0,
+ margin: 0,
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
+ }),
+});
diff --git a/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx b/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx
index 99bda00dfd0..bd2543e2269 100644
--- a/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx
+++ b/public/app/features/dashboard/components/AddLibraryPanelWidget/AddLibraryPanelWidget.tsx
@@ -41,7 +41,7 @@ export const AddLibraryPanelWidget = ({ panel, dashboard }: Props) => {
return (
-
+
Add panel from panel library
@@ -100,10 +100,19 @@ const getStyles = (theme: GrafanaTheme2) => {
},
}),
callToAction: css({
- overflow: 'hidden',
+ backgroundColor: theme.components.panel.background,
+ border: `1px solid ${theme.components.panel.borderColor}`,
+ borderRadius: theme.shape.radius.default,
+ display: 'flex',
+ flex: '1 1 0',
+ flexDirection: 'column',
+ height: '100%',
+ position: 'relative',
+ width: '100%',
outline: '2px dotted transparent',
outlineOffset: '2px',
- boxShadow: '0 0 0 2px black, 0 0 0px 4px #1f60c4',
+ overflow: 'hidden',
+
[theme.transitions.handleMotion('no-preference', 'reduce')]: {
animation: `${pulsate} 2s ease infinite`,
},
diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx
index 4238b4f073a..76e38b778c8 100644
--- a/public/app/features/dashboard/containers/SoloPanelPage.tsx
+++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx
@@ -1,8 +1,10 @@
+import { css } from '@emotion/css';
import { Component } from 'react';
import { connect, ConnectedProps } from 'react-redux';
import AutoSizer from 'react-virtualized-auto-sizer';
-import { Alert } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Alert, useStyles2 } from '@grafana/ui';
import { GrafanaContext, GrafanaContextType } from 'app/core/context/GrafanaContext';
import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
import { DashboardModel, PanelModel } from 'app/features/dashboard/state';
@@ -106,6 +108,7 @@ export interface SoloPanelProps extends State {
}
export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: SoloPanelProps) => {
+ const styles = useStyles2(getStyles);
if (notFound) {
return ;
}
@@ -115,7 +118,7 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: Sol
}
return (
-
+
{({ width, height }) => {
if (width === 0) {
@@ -142,3 +145,16 @@ export const SoloPanel = ({ dashboard, notFound, panel, panelId, timezone }: Sol
};
export default connector(SoloPanelPage);
+
+const getStyles = (theme: GrafanaTheme2) => ({
+ container: css({
+ position: 'fixed',
+ bottom: 0,
+ right: 0,
+ margin: 0,
+ left: 0,
+ top: 0,
+ width: '100%',
+ height: '100%',
+ }),
+});
diff --git a/public/app/routes/routes.tsx b/public/app/routes/routes.tsx
index ae471afb03a..ecb47f368d5 100644
--- a/public/app/routes/routes.tsx
+++ b/public/app/routes/routes.tsx
@@ -83,7 +83,6 @@ export function getAppRoutes(): RouteDescriptor[] {
},
{
path: '/d-solo/:uid/:slug?',
- pageClass: 'dashboard-solo',
routeName: DashboardRoutes.Normal,
chromeless: true,
component: SafeDynamicImport(() =>
@@ -95,7 +94,6 @@ export function getAppRoutes(): RouteDescriptor[] {
// This route handles embedding of snapshot/scripted dashboard panels
{
path: '/dashboard-solo/:type/:slug',
- pageClass: 'dashboard-solo',
routeName: DashboardRoutes.Normal,
chromeless: true,
component: SafeDynamicImport(
diff --git a/public/sass/_angular.scss b/public/sass/_angular.scss
index f273ba5944f..2b3a07c87cc 100644
--- a/public/sass/_angular.scss
+++ b/public/sass/_angular.scss
@@ -2150,3 +2150,24 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
.drop-element.drop-popover.drop-function-def .drop-content {
max-width: 416px;
}
+
+.panel-height-helper {
+ display: block;
+ height: 100%;
+}
+
+.panel-content {
+ padding: $panel-padding;
+ width: 100%;
+ flex-grow: 1;
+ contain: size layout;
+ height: calc(100% - #{$panel-header-height});
+
+ &--no-padding {
+ padding: 0;
+ }
+}
+
+div.flot-text {
+ color: $text-color !important;
+}
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss
index 61e86b1ebca..318e4388da1 100644
--- a/public/sass/_grafana.scss
+++ b/public/sass/_grafana.scss
@@ -19,7 +19,6 @@
@import 'components/dashboard_grid';
// PAGES
-@import 'pages/dashboard';
@import 'pages/history';
// ANGULAR
diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss
deleted file mode 100644
index 437894154fe..00000000000
--- a/public/sass/pages/_dashboard.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.panel {
- height: 100%;
-}
-
-.panel-height-helper {
- display: block;
- height: 100%;
-}
-
-.panel-container {
- background-color: $panel-bg;
- border: $panel-border;
- position: relative;
- border-radius: 2px;
- height: 100%;
- width: 100%;
- display: flex;
- flex-direction: column;
- flex: 1 1 0;
- box-shadow: $panel-box-shadow;
-
- &--transparent {
- background-color: transparent;
- border: 1px solid transparent;
- box-shadow: none;
- }
-
- &:hover {
- .panel-menu-toggle {
- visibility: visible;
- transition: opacity 0.1s ease-in 0.2s;
- opacity: 1;
- }
- }
-
- &--is-editing {
- height: auto;
- }
-
- &--absolute {
- position: absolute;
- }
-}
-
-.panel-content {
- padding: $panel-padding;
- width: 100%;
- flex-grow: 1;
- contain: size layout;
- height: calc(100% - #{$panel-header-height});
-
- &--no-padding {
- padding: 0;
- }
-}
-
-div.flot-text {
- color: $text-color !important;
-}
-
-.dashboard-solo {
- .footer,
- .sidemenu {
- display: none;
- }
-}
-
-.template-variable {
- color: $variable;
-}
-
-.panel-solo {
- position: fixed;
- bottom: 0;
- right: 0;
- margin: 0;
- left: 0;
- top: 0;
- width: '100%';
- height: '100%';
-
- .panel-container {
- border: none;
- }
-
- .panel-menu-toggle,
- .panel-menu {
- display: none;
- }
-}