mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
UI: Theme changes (#22880)
* Theme: Updates the theme to align panel & page background colors * Updated dashboard settings view to be similar to new panel edit * Updated themes * Added shadow * Updates generated files * Minor fix to inspect drawer * Clean up old dashboard setttings stuff * Polish to search * Updated truth image * Minor tweaks to dropdown menu * Updates and alignments between inspect drawer and explore rich history * removed unused variables * Minor tweak to light page header bg
This commit is contained in:
parent
e2f7f85222
commit
08c95c3419
Binary file not shown.
Before Width: | Height: | Size: 26 KiB After Width: | Height: | Size: 26 KiB |
@ -144,6 +144,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
gray95: string;
|
||||
gray85: string;
|
||||
gray70: string;
|
||||
gray60: string;
|
||||
gray33: string;
|
||||
gray25: string;
|
||||
gray15: string;
|
||||
@ -208,6 +209,7 @@ export interface GrafanaTheme extends GrafanaThemeCommons {
|
||||
|
||||
// panel
|
||||
panelBg: string;
|
||||
panelBorder: string;
|
||||
|
||||
// TODO: move to background section
|
||||
bodyBg: string;
|
||||
|
@ -34,7 +34,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, scollableContent: boolean)
|
||||
return {
|
||||
drawer: css`
|
||||
.drawer-content {
|
||||
background-color: ${theme.colors.bodyBg};
|
||||
background-color: ${theme.colors.pageBg};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
|
@ -82,7 +82,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"blueLight": "#5794f2",
|
||||
"blueShade": "#1f60c4",
|
||||
"body": "#d8d9da",
|
||||
"bodyBg": "#161719",
|
||||
"bodyBg": "#0b0c0e",
|
||||
"brandDanger": "#e02f44",
|
||||
"brandPrimary": "#eb7b18",
|
||||
"brandSuccess": "#299c46",
|
||||
@ -102,7 +102,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"formCheckboxBgChecked": "#5794f2",
|
||||
"formCheckboxBgCheckedHover": "#3274d9",
|
||||
"formCheckboxCheckmark": "#343b40",
|
||||
"formDescription": "#7B8087",
|
||||
"formDescription": "#7b8087",
|
||||
"formFocusOutline": "#1f60c4",
|
||||
"formInputBg": "#0b0c0e",
|
||||
"formInputBgDisabled": "#141619",
|
||||
@ -136,7 +136,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"gray4": "#d8d9da",
|
||||
"gray5": "#ececec",
|
||||
"gray6": "#f4f5f8",
|
||||
"gray60": "#7B8087",
|
||||
"gray60": "#7b8087",
|
||||
"gray7": "#fbfbfb",
|
||||
"gray70": "#9fa7b3",
|
||||
"gray85": "#c7d0d9",
|
||||
@ -146,7 +146,7 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"headingColor": "#d8d9da",
|
||||
"inputBlack": "#09090b",
|
||||
"inputBlack": "#0b0c0e",
|
||||
"link": "#d8d9da",
|
||||
"linkDisabled": "#8e8e8e",
|
||||
"linkExternal": "#33b5e5",
|
||||
@ -154,9 +154,10 @@ exports[`TimePicker renders buttons correctly 1`] = `
|
||||
"online": "#299c46",
|
||||
"orange": "#eb7b18",
|
||||
"orangeDark": "#ff780a",
|
||||
"pageBg": "#161719",
|
||||
"pageBg": "#141619",
|
||||
"pageHeaderBorder": "#202226",
|
||||
"panelBg": "#212124",
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryKeyword": "#66d9ef",
|
||||
@ -391,7 +392,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"blueLight": "#5794f2",
|
||||
"blueShade": "#1f60c4",
|
||||
"body": "#d8d9da",
|
||||
"bodyBg": "#161719",
|
||||
"bodyBg": "#0b0c0e",
|
||||
"brandDanger": "#e02f44",
|
||||
"brandPrimary": "#eb7b18",
|
||||
"brandSuccess": "#299c46",
|
||||
@ -411,7 +412,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"formCheckboxBgChecked": "#5794f2",
|
||||
"formCheckboxBgCheckedHover": "#3274d9",
|
||||
"formCheckboxCheckmark": "#343b40",
|
||||
"formDescription": "#7B8087",
|
||||
"formDescription": "#7b8087",
|
||||
"formFocusOutline": "#1f60c4",
|
||||
"formInputBg": "#0b0c0e",
|
||||
"formInputBgDisabled": "#141619",
|
||||
@ -445,7 +446,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"gray4": "#d8d9da",
|
||||
"gray5": "#ececec",
|
||||
"gray6": "#f4f5f8",
|
||||
"gray60": "#7B8087",
|
||||
"gray60": "#7b8087",
|
||||
"gray7": "#fbfbfb",
|
||||
"gray70": "#9fa7b3",
|
||||
"gray85": "#c7d0d9",
|
||||
@ -455,7 +456,7 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"greenBase": "#299c46",
|
||||
"greenShade": "#23843b",
|
||||
"headingColor": "#d8d9da",
|
||||
"inputBlack": "#09090b",
|
||||
"inputBlack": "#0b0c0e",
|
||||
"link": "#d8d9da",
|
||||
"linkDisabled": "#8e8e8e",
|
||||
"linkExternal": "#33b5e5",
|
||||
@ -463,9 +464,10 @@ exports[`TimePicker renders content correctly after beeing open 1`] = `
|
||||
"online": "#299c46",
|
||||
"orange": "#eb7b18",
|
||||
"orangeDark": "#ff780a",
|
||||
"pageBg": "#161719",
|
||||
"pageBg": "#141619",
|
||||
"pageHeaderBorder": "#202226",
|
||||
"panelBg": "#212124",
|
||||
"panelBg": "#141619",
|
||||
"panelBorder": "#202226",
|
||||
"purple": "#9933cc",
|
||||
"queryGreen": "#74e680",
|
||||
"queryKeyword": "#66d9ef",
|
||||
|
@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase};
|
||||
$green-shade: ${theme.colors.greenShade};
|
||||
$orange-dark: ${theme.colors.orangeDark};
|
||||
|
||||
$gray98: ${theme.colors.gray98};
|
||||
$gray95: ${theme.colors.gray95};
|
||||
$gray85: ${theme.colors.gray85};
|
||||
$gray70: ${theme.colors.gray70};
|
||||
$gray60: ${theme.colors.gray60};
|
||||
$gray33: ${theme.colors.gray33};
|
||||
$gray25: ${theme.colors.gray25};
|
||||
$gray15: ${theme.colors.gray15};
|
||||
$gray10: ${theme.colors.gray10};
|
||||
$gray05: ${theme.colors.gray05};
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: ${theme.colors.black};
|
||||
@ -91,8 +102,6 @@ $textShadow: none;
|
||||
// gradients
|
||||
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
|
||||
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px);
|
||||
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@ -112,12 +121,12 @@ $hr-border-color: $dark-9;
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: ${theme.colors.panelBg};
|
||||
$panel-border: solid 1px $dark-1;
|
||||
$panel-header-hover-bg: $dark-9;
|
||||
$panel-border: 1px solid ${theme.colors.panelBorder};
|
||||
$panel-header-hover-bg: ${theme.colors.gray15};
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// page header
|
||||
$page-header-bg: linear-gradient(90deg, $dark-7, $black);
|
||||
$page-header-bg: ${theme.colors.gray15};
|
||||
$page-header-shadow: inset 0px -4px 14px $dark-3;
|
||||
$page-header-border-color: $dark-9;
|
||||
|
||||
@ -132,8 +141,8 @@ $code-tag-bg: $dark-1;
|
||||
$code-tag-border: $dark-9;
|
||||
|
||||
// cards
|
||||
$card-background: linear-gradient(135deg, $dark-8, $dark-6);
|
||||
$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
|
||||
$card-background: linear-gradient(135deg, $dark-4, $dark-3);
|
||||
$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6);
|
||||
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
// Lists
|
||||
@ -209,7 +218,6 @@ $placeholderText: darken($text-color, 25%);
|
||||
|
||||
// Search
|
||||
$search-shadow: 0 0 30px 0 $black;
|
||||
$search-filter-box-bg: $gray-blue;
|
||||
|
||||
// Typeahead
|
||||
$typeahead-shadow: 0 5px 10px 0 $black;
|
||||
@ -218,10 +226,10 @@ $typeahead-selected-color: $yellow;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $dark-6;
|
||||
$dropdownBorder: rgba(0, 0, 0, 0.2);
|
||||
$dropdownBackground: $panel-bg;
|
||||
$dropdownBorder: ${theme.colors.panelBorder};
|
||||
$dropdownDividerTop: transparent;
|
||||
$dropdownDividerBottom: #444;
|
||||
$dropdownDividerBottom: ${theme.colors.gray25};
|
||||
|
||||
$dropdownLinkColor: $text-color;
|
||||
$dropdownLinkColorHover: $white;
|
||||
@ -236,26 +244,23 @@ $horizontalComponentOffset: 180px;
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 55px;
|
||||
|
||||
$navbarBackground: $panel-bg;
|
||||
$navbarBorder: 1px solid $dark-6;
|
||||
|
||||
$navbarButtonBackground: $navbarBackground;
|
||||
$navbarButtonBackgroundHighlight: $body-bg;
|
||||
|
||||
$navbarButtonBackground: $panel-bg;
|
||||
$navbar-button-border: #2f2f32;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $black;
|
||||
$side-menu-bg-mobile: $side-menu-bg;
|
||||
$side-menu-bg: $panel-bg;
|
||||
$side-menu-bg-mobile: $panel-bg;
|
||||
$side-menu-border: none;
|
||||
$side-menu-item-hover-bg: $dark-3;
|
||||
$side-menu-shadow: 0 0 20px black;
|
||||
$side-menu-link-color: $link-color;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $body-bg;
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $dark-3;
|
||||
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
|
||||
|
@ -22,6 +22,17 @@ $green-base: ${theme.colors.greenBase};
|
||||
$green-shade: ${theme.colors.greenShade};
|
||||
$orange-dark: ${theme.colors.orangeDark};
|
||||
|
||||
$gray98: ${theme.colors.gray98};
|
||||
$gray95: ${theme.colors.gray95};
|
||||
$gray85: ${theme.colors.gray85};
|
||||
$gray70: ${theme.colors.gray70};
|
||||
$gray60: ${theme.colors.gray60};
|
||||
$gray33: ${theme.colors.gray33};
|
||||
$gray25: ${theme.colors.gray25};
|
||||
$gray15: ${theme.colors.gray15};
|
||||
$gray10: ${theme.colors.gray10};
|
||||
$gray05: ${theme.colors.gray05};
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: ${theme.colors.black};
|
||||
@ -83,8 +94,6 @@ $text-shadow-faint: none;
|
||||
// gradients
|
||||
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
|
||||
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
|
||||
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@ -104,12 +113,12 @@ $hr-border-color: $gray-4 !default;
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: ${theme.colors.panelBg};
|
||||
$panel-border: solid 1px $gray-5;
|
||||
$panel-border: 1px solid ${theme.colors.panelBorder};
|
||||
$panel-header-hover-bg: $gray-6;
|
||||
$panel-corner: $gray-4;
|
||||
|
||||
// Page header
|
||||
$page-header-bg: linear-gradient(90deg, $white, $gray-7);
|
||||
$page-header-bg: linear-gradient(90deg, $white, ${theme.colors.gray95});
|
||||
$page-header-shadow: inset 0px -3px 10px $gray-6;
|
||||
$page-header-border-color: $gray-4;
|
||||
|
||||
@ -202,7 +211,6 @@ $placeholderText: $gray-2;
|
||||
|
||||
// search
|
||||
$search-shadow: 0 1px 5px 0 $gray-5;
|
||||
$search-filter-box-bg: $gray-7;
|
||||
|
||||
// Typeahead
|
||||
$typeahead-shadow: 0 5px 10px 0 $gray-5;
|
||||
@ -229,26 +237,23 @@ $horizontalComponentOffset: 180px;
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 52px;
|
||||
|
||||
$navbarBackground: $white;
|
||||
$navbarBorder: 1px solid $gray-5;
|
||||
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
$navbarButtonBackground: $panel-bg;
|
||||
$navbar-button-border: $gray-4;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $dark-1;
|
||||
$side-menu-bg: ${theme.colors.gray15};
|
||||
$side-menu-border: 1px solid ${theme.colors.gray25};
|
||||
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: $gray-1;
|
||||
$side-menu-item-hover-bg: ${theme.colors.gray25};
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
$side-menu-link-color: $gray-6;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $gray-7;
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $gray-6;
|
||||
$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
|
||||
|
||||
|
@ -48,7 +48,7 @@ const darkTheme: GrafanaTheme = {
|
||||
name: 'Grafana Dark',
|
||||
colors: {
|
||||
...basicColors,
|
||||
inputBlack: '#09090b',
|
||||
inputBlack: basicColors.gray05,
|
||||
brandPrimary: basicColors.orange,
|
||||
brandSuccess: basicColors.greenBase,
|
||||
brandWarning: basicColors.orange,
|
||||
@ -61,8 +61,8 @@ const darkTheme: GrafanaTheme = {
|
||||
online: basicColors.greenBase,
|
||||
warn: '#f79520',
|
||||
critical: basicColors.redBase,
|
||||
bodyBg: basicColors.dark2,
|
||||
pageBg: basicColors.dark2,
|
||||
bodyBg: basicColors.gray05,
|
||||
pageBg: basicColors.gray10,
|
||||
body: basicColors.gray4,
|
||||
text: basicColors.gray4,
|
||||
textStrong: basicColors.white,
|
||||
@ -75,7 +75,8 @@ const darkTheme: GrafanaTheme = {
|
||||
linkExternal: basicColors.blue,
|
||||
headingColor: basicColors.gray4,
|
||||
pageHeaderBorder: basicColors.gray15,
|
||||
panelBg: basicColors.dark4,
|
||||
panelBg: basicColors.gray10,
|
||||
panelBorder: basicColors.gray15,
|
||||
|
||||
// Next-gen forms functional colors
|
||||
formLabel: basicColors.gray70,
|
||||
|
@ -6,7 +6,7 @@ export const commonColorsPalette = {
|
||||
gray95: '#e9edf2',
|
||||
gray85: '#c7d0d9',
|
||||
gray70: '#9fa7b3',
|
||||
gray60: '#7B8087',
|
||||
gray60: '#7b8087',
|
||||
gray33: '#464c54',
|
||||
gray25: '#343b40',
|
||||
gray15: '#202226',
|
||||
|
@ -63,7 +63,7 @@ const lightTheme: GrafanaTheme = {
|
||||
warn: '#f79520',
|
||||
critical: basicColors.redShade,
|
||||
bodyBg: basicColors.gray7,
|
||||
pageBg: basicColors.gray7,
|
||||
pageBg: basicColors.white,
|
||||
|
||||
// Text colors
|
||||
body: basicColors.gray1,
|
||||
@ -83,6 +83,7 @@ const lightTheme: GrafanaTheme = {
|
||||
|
||||
// panel
|
||||
panelBg: basicColors.white,
|
||||
panelBorder: basicColors.gray95,
|
||||
|
||||
// Next-gen forms functional colors
|
||||
formLabel: basicColors.gray33,
|
||||
|
@ -3,7 +3,7 @@ import React, { useContext } from 'react';
|
||||
import tinycolor from 'tinycolor2';
|
||||
import { SearchQuery } from './search';
|
||||
import { css, cx } from 'emotion';
|
||||
import { ThemeContext, selectThemeVariant } from '@grafana/ui';
|
||||
import { ThemeContext } from '@grafana/ui';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
|
||||
type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
||||
@ -19,14 +19,9 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
|
||||
width: 100%;
|
||||
height: 55px; /* this variable is not part of GrafanaTheme yet*/
|
||||
display: flex;
|
||||
background-color: ${selectThemeVariant(
|
||||
{
|
||||
light: theme.colors.white,
|
||||
dark: theme.colors.dark4,
|
||||
},
|
||||
theme.type
|
||||
)};
|
||||
background-color: ${theme.colors.formInputBg};
|
||||
position: relative;
|
||||
box-shadow: 0 0 10px ${theme.isLight ? theme.colors.gray85 : theme.colors.black};
|
||||
`,
|
||||
input: css`
|
||||
max-width: 653px;
|
||||
@ -34,22 +29,8 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
|
||||
height: 51px;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
background: ${selectThemeVariant(
|
||||
{
|
||||
light: theme.colors.dark1,
|
||||
dark: theme.colors.black,
|
||||
},
|
||||
theme.type
|
||||
)};
|
||||
background-color: ${selectThemeVariant(
|
||||
{
|
||||
light: tinycolor(theme.colors.white)
|
||||
.lighten(4)
|
||||
.toString(),
|
||||
dark: theme.colors.dark4,
|
||||
},
|
||||
theme.type
|
||||
)};
|
||||
background-color: ${theme.colors.formInputBg};
|
||||
background: ${theme.colors.formInputBg};
|
||||
flex-grow: 10;
|
||||
`,
|
||||
spacer: css`
|
||||
@ -57,6 +38,7 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
|
||||
`,
|
||||
icon: cx(
|
||||
css`
|
||||
color: ${theme.colors.textWeak};
|
||||
font-size: ${theme.typography.size.lg};
|
||||
padding: ${theme.spacing.md} ${theme.spacing.md} ${theme.spacing.sm} ${theme.spacing.md};
|
||||
`,
|
||||
|
@ -100,7 +100,7 @@ exports[`ServerStats Should render table with stats 1`] = `
|
||||
className="css-13jkosq"
|
||||
>
|
||||
<li
|
||||
className="css-14totda"
|
||||
className="css-1aiaexb"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<i
|
||||
|
@ -20,7 +20,6 @@ import { SaveDashboardModalProxy } from 'app/features/dashboard/components/SaveD
|
||||
|
||||
export interface OwnProps {
|
||||
dashboard: DashboardModel;
|
||||
editview: string;
|
||||
isEditing: boolean;
|
||||
isFullscreen: boolean;
|
||||
$injector: any;
|
||||
@ -53,17 +52,10 @@ export class DashNav extends PureComponent<Props> {
|
||||
};
|
||||
|
||||
onClose = () => {
|
||||
if (this.props.editview) {
|
||||
this.props.updateLocation({
|
||||
query: { editview: null },
|
||||
partial: true,
|
||||
});
|
||||
} else {
|
||||
this.props.updateLocation({
|
||||
query: { panelId: null, edit: null, fullscreen: null, tab: null },
|
||||
partial: true,
|
||||
});
|
||||
}
|
||||
this.props.updateLocation({
|
||||
query: { panelId: null, edit: null, fullscreen: null, tab: null },
|
||||
partial: true,
|
||||
});
|
||||
};
|
||||
|
||||
onToggleTVMode = () => {
|
||||
@ -101,7 +93,7 @@ export class DashNav extends PureComponent<Props> {
|
||||
};
|
||||
|
||||
renderDashboardTitleSearchButton() {
|
||||
const { dashboard } = this.props;
|
||||
const { dashboard, isFullscreen } = this.props;
|
||||
|
||||
const folderTitle = dashboard.meta.folderTitle;
|
||||
const haveFolder = dashboard.meta.folderId > 0;
|
||||
@ -110,7 +102,7 @@ export class DashNav extends PureComponent<Props> {
|
||||
<>
|
||||
<div>
|
||||
<div className="navbar-page-btn">
|
||||
{!this.isInFullscreenOrSettings && <i className="gicon gicon-dashboard" />}
|
||||
{!isFullscreen && <i className="gicon gicon-dashboard" />}
|
||||
{haveFolder && (
|
||||
<>
|
||||
<a className="navbar-page-btn__folder" onClick={this.onFolderNameClick}>
|
||||
@ -124,20 +116,11 @@ export class DashNav extends PureComponent<Props> {
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{this.isSettings && <span className="navbar-settings-title"> / Settings</span>}
|
||||
<div className="navbar__spacer" />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
get isInFullscreenOrSettings() {
|
||||
return this.props.editview || this.props.isFullscreen;
|
||||
}
|
||||
|
||||
get isSettings() {
|
||||
return this.props.editview;
|
||||
}
|
||||
|
||||
renderBackButton() {
|
||||
return (
|
||||
<div className="navbar-edit">
|
||||
@ -147,13 +130,13 @@ export class DashNav extends PureComponent<Props> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const { dashboard, onAddPanel, location } = this.props;
|
||||
const { dashboard, onAddPanel, location, isFullscreen } = this.props;
|
||||
const { canStar, canSave, canShare, showSettings, isStarred } = dashboard.meta;
|
||||
const { snapshot } = dashboard;
|
||||
const snapshotUrl = snapshot && snapshot.originalUrl;
|
||||
return (
|
||||
<div className="navbar">
|
||||
{this.isInFullscreenOrSettings && this.renderBackButton()}
|
||||
{isFullscreen && this.renderBackButton()}
|
||||
{this.renderDashboardTitleSearchButton()}
|
||||
|
||||
{this.playlistSrv.isPlaying && (
|
||||
|
@ -6,9 +6,13 @@ import { AngularComponent, getAngularLoader } from '@grafana/runtime';
|
||||
|
||||
// Types
|
||||
import { DashboardModel } from '../../state/DashboardModel';
|
||||
import { BackButton } from 'app/core/components/BackButton/BackButton';
|
||||
import { e2e } from '@grafana/e2e';
|
||||
import { updateLocation } from 'app/core/actions';
|
||||
|
||||
export interface Props {
|
||||
dashboard: DashboardModel | null;
|
||||
updateLocation: typeof updateLocation;
|
||||
}
|
||||
|
||||
export class DashboardSettings extends PureComponent<Props> {
|
||||
@ -18,7 +22,7 @@ export class DashboardSettings extends PureComponent<Props> {
|
||||
componentDidMount() {
|
||||
const loader = getAngularLoader();
|
||||
|
||||
const template = '<dashboard-settings dashboard="dashboard" class="dashboard-settings" />';
|
||||
const template = '<dashboard-settings dashboard="dashboard" class="dashboard-settings__body2" />';
|
||||
const scopeProps = { dashboard: this.props.dashboard };
|
||||
|
||||
this.angularCmp = loader.load(this.element, scopeProps, template);
|
||||
@ -30,7 +34,31 @@ export class DashboardSettings extends PureComponent<Props> {
|
||||
}
|
||||
}
|
||||
|
||||
onClose = () => {
|
||||
this.props.updateLocation({
|
||||
query: { editview: null },
|
||||
partial: true,
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return <div className="panel-height-helper" ref={element => (this.element = element)} />;
|
||||
const { dashboard } = this.props;
|
||||
const folderTitle = dashboard.meta.folderTitle;
|
||||
const haveFolder = dashboard.meta.folderId > 0;
|
||||
|
||||
return (
|
||||
<div className="dashboard-settings">
|
||||
<div className="navbar navbar--shadow">
|
||||
<div className="navbar-edit">
|
||||
<BackButton onClick={this.onClose} aria-label={e2e.pages.Dashboard.Toolbar.selectors.backArrow} />
|
||||
</div>
|
||||
<div className="navbar-page-btn">
|
||||
{haveFolder && <div className="navbar-page-btn__folder">{folderTitle} / </div>}
|
||||
<span>{dashboard.title} / Settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="dashboard-settings__body1" ref={element => (this.element = element)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { FC } from 'react';
|
||||
import { css } from 'emotion';
|
||||
import { Icon, selectThemeVariant, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui';
|
||||
import { Icon, stylesFactory, Tab, TabsBar, useTheme } from '@grafana/ui';
|
||||
import { GrafanaTheme, SelectableValue, PanelData, getValueFormat, formattedValueToString } from '@grafana/data';
|
||||
import { InspectTab } from './PanelInspector';
|
||||
import { PanelModel } from '../../state';
|
||||
@ -60,7 +60,7 @@ export const InspectHeader: FC<Props> = ({
|
||||
};
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const headerBackground = selectThemeVariant({ dark: theme.colors.gray15, light: theme.colors.white }, theme.type);
|
||||
const headerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
|
||||
return {
|
||||
header: css`
|
||||
background-color: ${headerBackground};
|
||||
|
@ -1,6 +1,6 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
import { FieldConfigSource, GrafanaTheme, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
|
||||
import { Forms, selectThemeVariant, stylesFactory } from '@grafana/ui';
|
||||
import { Forms, stylesFactory } from '@grafana/ui';
|
||||
import { css, cx } from 'emotion';
|
||||
import config from 'app/core/config';
|
||||
import AutoSizer from 'react-virtualized-auto-sizer';
|
||||
@ -316,7 +316,6 @@ export const PanelEditor = connect(mapStateToProps, mapDispatchToProps)(PanelEdi
|
||||
*/
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const handleColor = theme.colors.blueLight;
|
||||
const background = selectThemeVariant({ light: theme.colors.white, dark: theme.colors.inputBlack }, theme.type);
|
||||
|
||||
const resizer = css`
|
||||
font-style: italic;
|
||||
@ -344,7 +343,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: ${background};
|
||||
background: ${theme.colors.bodyBg};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
`,
|
||||
@ -382,7 +381,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
`,
|
||||
|
||||
toolbar: css`
|
||||
display: flex;
|
||||
padding: ${theme.spacing.sm};
|
||||
|
@ -79,7 +79,7 @@ const getPanelEditorTabsStyles = stylesFactory(() => {
|
||||
flex-direction: column;
|
||||
flex-grow: 1;
|
||||
min-height: 0;
|
||||
background: ${theme.colors.pageBg};
|
||||
background: ${theme.colors.panelBg};
|
||||
|
||||
.toolbar {
|
||||
background: transparent;
|
||||
|
@ -198,10 +198,6 @@ describe('DashboardPage', () => {
|
||||
it('should render settings view', () => {
|
||||
expect(ctx.wrapper).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should set animation state', () => {
|
||||
expect(ctx.wrapper?.state().isSettingsOpening).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
dashboardPageScenario('When adding panel', ctx => {
|
||||
|
@ -61,7 +61,6 @@ export interface Props {
|
||||
}
|
||||
|
||||
export interface State {
|
||||
isSettingsOpening: boolean;
|
||||
isEditing: boolean;
|
||||
isFullscreen: boolean;
|
||||
fullscreenPanel: PanelModel | null;
|
||||
@ -73,7 +72,6 @@ export interface State {
|
||||
|
||||
export class DashboardPage extends PureComponent<Props, State> {
|
||||
state: State = {
|
||||
isSettingsOpening: false,
|
||||
isEditing: false,
|
||||
isFullscreen: false,
|
||||
showLoadingState: false,
|
||||
@ -103,7 +101,7 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props) {
|
||||
const { dashboard, editview, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props;
|
||||
const { dashboard, urlEdit, urlFullscreen, urlPanelId, urlUid } = this.props;
|
||||
|
||||
if (!dashboard) {
|
||||
return;
|
||||
@ -120,14 +118,6 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
return;
|
||||
}
|
||||
|
||||
// handle animation states when opening dashboard settings
|
||||
if (!prevProps.editview && editview) {
|
||||
this.setState({ isSettingsOpening: true });
|
||||
setTimeout(() => {
|
||||
this.setState({ isSettingsOpening: false });
|
||||
}, 10);
|
||||
}
|
||||
|
||||
// Sync url state with model
|
||||
if (urlFullscreen !== dashboard.meta.fullscreen || urlEdit !== dashboard.meta.isEditing) {
|
||||
if (urlPanelId && !isNaN(parseInt(urlPanelId, 10))) {
|
||||
@ -265,8 +255,10 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
urlEditPanel,
|
||||
inspectTab,
|
||||
isNewEditorOpen,
|
||||
updateLocation,
|
||||
} = this.props;
|
||||
const { isSettingsOpening, isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
|
||||
|
||||
const { isEditing, isFullscreen, scrollTop, updateScrollTop } = this.state;
|
||||
|
||||
if (!dashboard) {
|
||||
if (isInitSlow) {
|
||||
@ -275,11 +267,6 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
return null;
|
||||
}
|
||||
|
||||
const classes = classNames({
|
||||
'dashboard-page--settings-opening': isSettingsOpening,
|
||||
'dashboard-page--settings-open': !isSettingsOpening && editview,
|
||||
});
|
||||
|
||||
const gridWrapperClasses = classNames({
|
||||
'dashboard-container': true,
|
||||
'dashboard-container--has-submenu': dashboard.meta.submenuEnabled,
|
||||
@ -294,12 +281,11 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
const approximateScrollTop = Math.round(scrollTop / 25) * 25;
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div>
|
||||
<DashNav
|
||||
dashboard={dashboard}
|
||||
isEditing={isEditing}
|
||||
isFullscreen={isFullscreen}
|
||||
editview={editview}
|
||||
$injector={$injector}
|
||||
onAddPanel={this.onAddPanel}
|
||||
/>
|
||||
@ -311,8 +297,6 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
updateAfterMountMs={500}
|
||||
className="custom-scrollbar--page"
|
||||
>
|
||||
{editview && <DashboardSettings dashboard={dashboard} />}
|
||||
|
||||
{initError && this.renderInitFailedState()}
|
||||
|
||||
<div className={gridWrapperClasses}>
|
||||
@ -335,6 +319,11 @@ export class DashboardPage extends PureComponent<Props, State> {
|
||||
<PanelEditor dashboard={dashboard} sourcePanel={editPanel} />
|
||||
</Portal>
|
||||
)}
|
||||
{editview && (
|
||||
<Portal>
|
||||
<DashboardSettings dashboard={dashboard} updateLocation={updateLocation} />
|
||||
</Portal>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -1,9 +1,7 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`DashboardPage Dashboard init completed Should render dashboard grid 1`] = `
|
||||
<div
|
||||
className=""
|
||||
>
|
||||
<div>
|
||||
<Connect(DashNav)
|
||||
$injector={Object {}}
|
||||
dashboard={
|
||||
@ -347,9 +345,7 @@ exports[`DashboardPage Dashboard is fetching slowly Should render slow init stat
|
||||
exports[`DashboardPage Given initial state Should render nothing 1`] = `""`;
|
||||
|
||||
exports[`DashboardPage When dashboard has editview url state should render settings view 1`] = `
|
||||
<div
|
||||
className="dashboard-page--settings-opening"
|
||||
>
|
||||
<div>
|
||||
<Connect(DashNav)
|
||||
$injector={Object {}}
|
||||
dashboard={
|
||||
@ -448,7 +444,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
|
||||
"version": 0,
|
||||
}
|
||||
}
|
||||
editview="settings"
|
||||
isEditing={false}
|
||||
isFullscreen={false}
|
||||
onAddPanel={[Function]}
|
||||
@ -467,104 +462,6 @@ exports[`DashboardPage When dashboard has editview url state should render setti
|
||||
setScrollTop={[Function]}
|
||||
updateAfterMountMs={500}
|
||||
>
|
||||
<DashboardSettings
|
||||
dashboard={
|
||||
DashboardModel {
|
||||
"annotations": Object {
|
||||
"list": Array [
|
||||
Object {
|
||||
"builtIn": 1,
|
||||
"datasource": "-- Grafana --",
|
||||
"enable": true,
|
||||
"hide": true,
|
||||
"iconColor": "rgba(0, 211, 255, 1)",
|
||||
"name": "Annotations & Alerts",
|
||||
"type": "dashboard",
|
||||
},
|
||||
],
|
||||
},
|
||||
"autoUpdate": undefined,
|
||||
"description": undefined,
|
||||
"editable": true,
|
||||
"events": Emitter {
|
||||
"emitter": EventEmitter {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
},
|
||||
},
|
||||
"getVariables": [Function],
|
||||
"gnetId": null,
|
||||
"graphTooltip": 0,
|
||||
"id": null,
|
||||
"links": Array [],
|
||||
"meta": Object {
|
||||
"canEdit": true,
|
||||
"canMakeEditable": false,
|
||||
"canSave": true,
|
||||
"canShare": true,
|
||||
"canStar": true,
|
||||
"fullscreen": false,
|
||||
"isEditing": false,
|
||||
"showSettings": true,
|
||||
},
|
||||
"originalTemplating": Array [],
|
||||
"originalTime": Object {
|
||||
"from": "now-6h",
|
||||
"to": "now",
|
||||
},
|
||||
"panels": Array [
|
||||
PanelModel {
|
||||
"cachedPluginOptions": Object {},
|
||||
"datasource": null,
|
||||
"events": Emitter {
|
||||
"emitter": EventEmitter {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
},
|
||||
},
|
||||
"gridPos": Object {
|
||||
"h": 1,
|
||||
"w": 1,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"id": 1,
|
||||
"options": Object {},
|
||||
"replaceVariables": [Function],
|
||||
"targets": Array [
|
||||
Object {
|
||||
"refId": "A",
|
||||
},
|
||||
],
|
||||
"title": "My graph",
|
||||
"transparent": false,
|
||||
"type": "graph",
|
||||
},
|
||||
],
|
||||
"refresh": undefined,
|
||||
"revision": undefined,
|
||||
"schemaVersion": 22,
|
||||
"snapshot": undefined,
|
||||
"style": "dark",
|
||||
"tags": Array [],
|
||||
"templating": Object {
|
||||
"list": Array [],
|
||||
},
|
||||
"time": Object {
|
||||
"from": "now-6h",
|
||||
"to": "now",
|
||||
},
|
||||
"timepicker": Object {},
|
||||
"timezone": "",
|
||||
"title": "My dashboard",
|
||||
"uid": null,
|
||||
"variables": Object {
|
||||
"list": Array [],
|
||||
},
|
||||
"version": 0,
|
||||
}
|
||||
}
|
||||
/>
|
||||
<div
|
||||
className="dashboard-container"
|
||||
>
|
||||
@ -770,5 +667,106 @@ exports[`DashboardPage When dashboard has editview url state should render setti
|
||||
</div>
|
||||
</CustomScrollbar>
|
||||
</div>
|
||||
<Portal>
|
||||
<DashboardSettings
|
||||
dashboard={
|
||||
DashboardModel {
|
||||
"annotations": Object {
|
||||
"list": Array [
|
||||
Object {
|
||||
"builtIn": 1,
|
||||
"datasource": "-- Grafana --",
|
||||
"enable": true,
|
||||
"hide": true,
|
||||
"iconColor": "rgba(0, 211, 255, 1)",
|
||||
"name": "Annotations & Alerts",
|
||||
"type": "dashboard",
|
||||
},
|
||||
],
|
||||
},
|
||||
"autoUpdate": undefined,
|
||||
"description": undefined,
|
||||
"editable": true,
|
||||
"events": Emitter {
|
||||
"emitter": EventEmitter {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
},
|
||||
},
|
||||
"getVariables": [Function],
|
||||
"gnetId": null,
|
||||
"graphTooltip": 0,
|
||||
"id": null,
|
||||
"links": Array [],
|
||||
"meta": Object {
|
||||
"canEdit": true,
|
||||
"canMakeEditable": false,
|
||||
"canSave": true,
|
||||
"canShare": true,
|
||||
"canStar": true,
|
||||
"fullscreen": false,
|
||||
"isEditing": false,
|
||||
"showSettings": true,
|
||||
},
|
||||
"originalTemplating": Array [],
|
||||
"originalTime": Object {
|
||||
"from": "now-6h",
|
||||
"to": "now",
|
||||
},
|
||||
"panels": Array [
|
||||
PanelModel {
|
||||
"cachedPluginOptions": Object {},
|
||||
"datasource": null,
|
||||
"events": Emitter {
|
||||
"emitter": EventEmitter {
|
||||
"_events": Object {},
|
||||
"_eventsCount": 0,
|
||||
},
|
||||
},
|
||||
"gridPos": Object {
|
||||
"h": 1,
|
||||
"w": 1,
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
},
|
||||
"id": 1,
|
||||
"options": Object {},
|
||||
"replaceVariables": [Function],
|
||||
"targets": Array [
|
||||
Object {
|
||||
"refId": "A",
|
||||
},
|
||||
],
|
||||
"title": "My graph",
|
||||
"transparent": false,
|
||||
"type": "graph",
|
||||
},
|
||||
],
|
||||
"refresh": undefined,
|
||||
"revision": undefined,
|
||||
"schemaVersion": 22,
|
||||
"snapshot": undefined,
|
||||
"style": "dark",
|
||||
"tags": Array [],
|
||||
"templating": Object {
|
||||
"list": Array [],
|
||||
},
|
||||
"time": Object {
|
||||
"from": "now-6h",
|
||||
"to": "now",
|
||||
},
|
||||
"timepicker": Object {},
|
||||
"timezone": "",
|
||||
"title": "My dashboard",
|
||||
"uid": null,
|
||||
"variables": Object {
|
||||
"list": Array [],
|
||||
},
|
||||
"version": 0,
|
||||
}
|
||||
}
|
||||
updateLocation={[MockFunction]}
|
||||
/>
|
||||
</Portal>
|
||||
</div>
|
||||
`;
|
||||
|
@ -51,24 +51,23 @@ interface RichHistoryState {
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const borderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
|
||||
const tabBarBg = theme.isLight ? theme.colors.white : theme.colors.black;
|
||||
const tabContentBg = theme.isLight ? theme.colors.gray7 : theme.colors.dark2;
|
||||
const tabContentBg = theme.colors.pageBg;
|
||||
return {
|
||||
container: css`
|
||||
height: 100%;
|
||||
background-color: ${tabContentBg};
|
||||
`,
|
||||
tabContent: css`
|
||||
background-color: ${tabContentBg};
|
||||
padding: ${theme.spacing.md};
|
||||
background-color: ${tabContentBg};
|
||||
`,
|
||||
close: css`
|
||||
position: absolute;
|
||||
right: ${theme.spacing.sm};
|
||||
right: 16px;
|
||||
top: 5px;
|
||||
cursor: pointer;
|
||||
font-size: ${theme.typography.size.lg};
|
||||
`,
|
||||
tabs: css`
|
||||
background-color: ${tabBarBg};
|
||||
padding-top: ${theme.spacing.sm};
|
||||
border-color: ${borderColor};
|
||||
ul {
|
||||
|
@ -36,7 +36,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
|
||||
: isRemoved
|
||||
? theme.colors.gray15
|
||||
: theme.colors.gray05;
|
||||
const cardBoxShadow = theme.isLight ? `0px 2px 2px ${borderColor}` : `0px 2px 4px black`;
|
||||
|
||||
return {
|
||||
queryCard: css`
|
||||
@ -44,7 +43,6 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
|
||||
flex-direction: column;
|
||||
border: 1px solid ${borderColor};
|
||||
margin: ${theme.spacing.sm} 0;
|
||||
box-shadow: ${cardBoxShadow};
|
||||
background-color: ${cardColor};
|
||||
border-radius: ${theme.border.radius.sm};
|
||||
.starred {
|
||||
|
@ -22,12 +22,12 @@ import { RichHistory, Tabs } from './RichHistory';
|
||||
import { deleteRichHistory } from '../state/actions';
|
||||
|
||||
const getStyles = stylesFactory((theme: GrafanaTheme) => {
|
||||
const containerBackground = theme.isLight ? theme.colors.gray7 : theme.colors.dark2;
|
||||
const containerBackground = theme.isLight ? theme.colors.gray95 : theme.colors.gray15;
|
||||
const containerBorderColor = theme.isLight ? theme.colors.gray5 : theme.colors.dark6;
|
||||
const handleBackground = theme.isLight ? theme.colors.gray5 : theme.colors.gray15;
|
||||
const handleDots = theme.isLight ? theme.colors.gray70 : theme.colors.gray33;
|
||||
const handleBackgroundHover = theme.isLight ? theme.colors.gray70 : theme.colors.gray33;
|
||||
const handleDotsHover = theme.isLight ? theme.colors.gray5 : theme.colors.dark7;
|
||||
const handleBackground = theme.isLight ? theme.colors.white : theme.colors.gray15;
|
||||
const handleDots = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
|
||||
const handleBackgroundHover = theme.isLight ? theme.colors.gray85 : theme.colors.gray33;
|
||||
const handleDotsHover = theme.isLight ? theme.colors.gray70 : theme.colors.dark7;
|
||||
|
||||
return {
|
||||
container: css`
|
||||
|
@ -197,6 +197,7 @@ export function setupAngularRoutes($routeProvider: route.IRouteProvider, $locati
|
||||
.when('/explore', {
|
||||
template: '<react-container />',
|
||||
reloadOnSearch: false,
|
||||
pageClass: 'page-explore',
|
||||
resolve: {
|
||||
roles: () => (config.viewersCanEdit ? [] : ['Editor', 'Admin']),
|
||||
component: () => SafeDynamicImport(import(/* webpackChunkName: "explore" */ 'app/features/explore/Wrapper')),
|
||||
|
@ -25,6 +25,17 @@ $green-base: #299c46;
|
||||
$green-shade: #23843b;
|
||||
$orange-dark: #ff780a;
|
||||
|
||||
$gray98: #f7f8fa;
|
||||
$gray95: #e9edf2;
|
||||
$gray85: #c7d0d9;
|
||||
$gray70: #9fa7b3;
|
||||
$gray60: #7b8087;
|
||||
$gray33: #464c54;
|
||||
$gray25: #343b40;
|
||||
$gray15: #202226;
|
||||
$gray10: #141619;
|
||||
$gray05: #0b0c0e;
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000000;
|
||||
@ -78,8 +89,8 @@ $critical: #e02f44;
|
||||
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$body-bg: #161719;
|
||||
$page-bg: #161719;
|
||||
$body-bg: #0b0c0e;
|
||||
$page-bg: #141619;
|
||||
|
||||
$body-color: #d8d9da;
|
||||
$text-color: #d8d9da;
|
||||
@ -94,8 +105,6 @@ $textShadow: none;
|
||||
// gradients
|
||||
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
|
||||
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
$page-gradient: linear-gradient(180deg, $dark-5 10px, $dark-2 100px);
|
||||
$edit-gradient: linear-gradient(180deg, $dark-2 50%, $input-black);
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@ -114,13 +123,13 @@ $hr-border-color: $dark-9;
|
||||
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: #212124;
|
||||
$panel-border: solid 1px $dark-1;
|
||||
$panel-header-hover-bg: $dark-9;
|
||||
$panel-bg: #141619;
|
||||
$panel-border: 1px solid #202226;
|
||||
$panel-header-hover-bg: #202226;
|
||||
$panel-corner: $panel-bg;
|
||||
|
||||
// page header
|
||||
$page-header-bg: linear-gradient(90deg, $dark-7, $black);
|
||||
$page-header-bg: #202226;
|
||||
$page-header-shadow: inset 0px -4px 14px $dark-3;
|
||||
$page-header-border-color: $dark-9;
|
||||
|
||||
@ -135,8 +144,8 @@ $code-tag-bg: $dark-1;
|
||||
$code-tag-border: $dark-9;
|
||||
|
||||
// cards
|
||||
$card-background: linear-gradient(135deg, $dark-8, $dark-6);
|
||||
$card-background-hover: linear-gradient(135deg, $dark-9, $dark-6);
|
||||
$card-background: linear-gradient(135deg, $dark-4, $dark-3);
|
||||
$card-background-hover: linear-gradient(135deg, $dark-5, $dark-6);
|
||||
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, 0.1), 1px 1px 0 0 rgba(0, 0, 0, 0.3);
|
||||
|
||||
// Lists
|
||||
@ -212,7 +221,6 @@ $placeholderText: darken($text-color, 25%);
|
||||
|
||||
// Search
|
||||
$search-shadow: 0 0 30px 0 $black;
|
||||
$search-filter-box-bg: $gray-blue;
|
||||
|
||||
// Typeahead
|
||||
$typeahead-shadow: 0 5px 10px 0 $black;
|
||||
@ -221,10 +229,10 @@ $typeahead-selected-color: $yellow;
|
||||
|
||||
// Dropdowns
|
||||
// -------------------------
|
||||
$dropdownBackground: $dark-6;
|
||||
$dropdownBorder: rgba(0, 0, 0, 0.2);
|
||||
$dropdownBackground: $panel-bg;
|
||||
$dropdownBorder: #202226;
|
||||
$dropdownDividerTop: transparent;
|
||||
$dropdownDividerBottom: #444;
|
||||
$dropdownDividerBottom: #343b40;
|
||||
|
||||
$dropdownLinkColor: $text-color;
|
||||
$dropdownLinkColorHover: $white;
|
||||
@ -239,26 +247,23 @@ $horizontalComponentOffset: 180px;
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 55px;
|
||||
|
||||
$navbarBackground: $panel-bg;
|
||||
$navbarBorder: 1px solid $dark-6;
|
||||
|
||||
$navbarButtonBackground: $navbarBackground;
|
||||
$navbarButtonBackgroundHighlight: $body-bg;
|
||||
|
||||
$navbarButtonBackground: $panel-bg;
|
||||
$navbar-button-border: #2f2f32;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $black;
|
||||
$side-menu-bg-mobile: $side-menu-bg;
|
||||
$side-menu-bg: $panel-bg;
|
||||
$side-menu-bg-mobile: $panel-bg;
|
||||
$side-menu-border: none;
|
||||
$side-menu-item-hover-bg: $dark-3;
|
||||
$side-menu-shadow: 0 0 20px black;
|
||||
$side-menu-link-color: $link-color;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $body-bg;
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $dark-3;
|
||||
$menu-dropdown-shadow: 5px 5px 20px -5px $black;
|
||||
|
||||
|
@ -25,6 +25,17 @@ $green-base: #3eb15b;
|
||||
$green-shade: #369b4f;
|
||||
$orange-dark: #ed5700;
|
||||
|
||||
$gray98: #f7f8fa;
|
||||
$gray95: #e9edf2;
|
||||
$gray85: #c7d0d9;
|
||||
$gray70: #9fa7b3;
|
||||
$gray60: #7b8087;
|
||||
$gray33: #464c54;
|
||||
$gray25: #343b40;
|
||||
$gray15: #202226;
|
||||
$gray10: #141619;
|
||||
$gray05: #0b0c0e;
|
||||
|
||||
// Grays
|
||||
// -------------------------
|
||||
$black: #000000;
|
||||
@ -72,7 +83,7 @@ $critical: #c4162a;
|
||||
// Scaffolding
|
||||
// -------------------------
|
||||
$body-bg: #f7f8fa;
|
||||
$page-bg: #f7f8fa;
|
||||
$page-bg: #ffffff;
|
||||
|
||||
$body-color: #52545c;
|
||||
$text-color: #52545c;
|
||||
@ -86,8 +97,6 @@ $text-shadow-faint: none;
|
||||
// gradients
|
||||
$brand-gradient-horizontal: linear-gradient(to right, #f05a28 30%, #fbca0a 99%);
|
||||
$brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
|
||||
$page-gradient: linear-gradient(180deg, $white 10px, $gray-7 100px);
|
||||
$edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%);
|
||||
|
||||
// Links
|
||||
// -------------------------
|
||||
@ -107,12 +116,12 @@ $hr-border-color: $gray-4 !default;
|
||||
// Panel
|
||||
// -------------------------
|
||||
$panel-bg: #ffffff;
|
||||
$panel-border: solid 1px $gray-5;
|
||||
$panel-border: 1px solid #e9edf2;
|
||||
$panel-header-hover-bg: $gray-6;
|
||||
$panel-corner: $gray-4;
|
||||
|
||||
// Page header
|
||||
$page-header-bg: linear-gradient(90deg, $white, $gray-7);
|
||||
$page-header-bg: linear-gradient(90deg, $white, #e9edf2);
|
||||
$page-header-shadow: inset 0px -3px 10px $gray-6;
|
||||
$page-header-border-color: $gray-4;
|
||||
|
||||
@ -205,7 +214,6 @@ $placeholderText: $gray-2;
|
||||
|
||||
// search
|
||||
$search-shadow: 0 1px 5px 0 $gray-5;
|
||||
$search-filter-box-bg: $gray-7;
|
||||
|
||||
// Typeahead
|
||||
$typeahead-shadow: 0 5px 10px 0 $gray-5;
|
||||
@ -232,26 +240,23 @@ $horizontalComponentOffset: 180px;
|
||||
// Navbar
|
||||
// -------------------------
|
||||
$navbarHeight: 52px;
|
||||
|
||||
$navbarBackground: $white;
|
||||
$navbarBorder: 1px solid $gray-5;
|
||||
|
||||
$navbarButtonBackground: lighten($navbarBackground, 3%);
|
||||
$navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
|
||||
|
||||
$navbarButtonBackground: $panel-bg;
|
||||
$navbar-button-border: $gray-4;
|
||||
|
||||
// Sidemenu
|
||||
// -------------------------
|
||||
$side-menu-bg: $dark-1;
|
||||
$side-menu-bg: #202226;
|
||||
$side-menu-border: 1px solid #343b40;
|
||||
$side-menu-bg-mobile: rgba(0, 0, 0, 0); //$gray-6;
|
||||
$side-menu-item-hover-bg: $gray-1;
|
||||
$side-menu-item-hover-bg: #343b40;
|
||||
$side-menu-shadow: 5px 0px 10px -5px $gray-1;
|
||||
$side-menu-link-color: $gray-6;
|
||||
|
||||
// Menu dropdowns
|
||||
// -------------------------
|
||||
$menu-dropdown-bg: $gray-7;
|
||||
$menu-dropdown-bg: $panel-bg;
|
||||
$menu-dropdown-hover-bg: $gray-6;
|
||||
$menu-dropdown-shadow: 5px 5px 10px -5px $gray-1;
|
||||
|
||||
|
@ -1,24 +1,26 @@
|
||||
.dashboard-settings {
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-modal;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
.dashboard-settings__body1 {
|
||||
height: calc(100% - #{$navbarHeight});
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dashboard-settings__body2 {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.dashboard-page--settings-opening {
|
||||
.dashboard-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-page--settings-open {
|
||||
.dashboard-settings {
|
||||
opacity: 1;
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
.dashboard-container {
|
||||
display: none;
|
||||
}
|
||||
background: $panel-bg;
|
||||
}
|
||||
|
||||
.dashboard-settings__content {
|
||||
@ -31,7 +33,7 @@
|
||||
|
||||
.dashboard-settings__aside {
|
||||
padding: 32px 0 0 32px;
|
||||
background: $panel-bg;
|
||||
background: lightOrDark($gray95, $gray15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
@ -14,6 +14,10 @@
|
||||
padding-left: $dashboard-padding;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&--shadow {
|
||||
box-shadow: $side-menu-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin navbar-alt-look() {
|
||||
@ -22,28 +26,6 @@
|
||||
border-bottom: $navbarBorder;
|
||||
}
|
||||
|
||||
.dashboard-page--settings-open {
|
||||
.navbar {
|
||||
@include navbar-alt-look();
|
||||
}
|
||||
|
||||
.navbar-buttons--tv,
|
||||
.navbar-button--add-panel,
|
||||
.navbar-button--star,
|
||||
.navbar-button--save,
|
||||
.navbar-button--share,
|
||||
.navbar-button--settings,
|
||||
.navbar-page-btn .fa-caret-down,
|
||||
.refresh-picker,
|
||||
.time-picker {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.navbar-buttons--close {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.panel-in-fullscreen,
|
||||
.panel-in-fullscreen.view-mode--tv {
|
||||
.navbar {
|
||||
@ -86,6 +68,7 @@
|
||||
.navbar-page-btn__folder {
|
||||
color: $text-color-weak;
|
||||
display: none;
|
||||
padding-right: 8px;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
display: inline-block;
|
||||
@ -129,7 +112,7 @@ i.navbar-page-btn__search {
|
||||
}
|
||||
|
||||
.navbar-button {
|
||||
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow);
|
||||
background-color: $panel-bg;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -192,6 +175,12 @@ i.navbar-page-btn__search {
|
||||
@include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.fa {
|
||||
color: $text-color;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
.btn-title {
|
||||
margin-left: $space-xs;
|
||||
@ -206,12 +195,3 @@ i.navbar-page-btn__search {
|
||||
align-items: center;
|
||||
padding-right: 13px;
|
||||
}
|
||||
|
||||
.navbar-settings-title {
|
||||
display: block;
|
||||
margin: 0;
|
||||
color: $headings-color;
|
||||
font-size: $font-size-lg;
|
||||
min-height: $navbarHeight;
|
||||
line-height: $navbarHeight;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
// Colors
|
||||
$progress-color-dark: $panel-bg !default;
|
||||
$progress-color: $panel-bg !default;
|
||||
$progress-line-uncompleted: lightOrDarkTheme($gray-3, $gray-1);
|
||||
$progress-line-uncompleted: lightOrDark($gray-3, $gray-1);
|
||||
|
||||
// Sizing
|
||||
$marker-size: 60px !default;
|
||||
|
@ -3,10 +3,10 @@
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: $navbarHeight;
|
||||
top: 0;
|
||||
z-index: $zindex-modal-backdrop;
|
||||
background-color: $black;
|
||||
@include opacity(75);
|
||||
@include opacity(60);
|
||||
}
|
||||
|
||||
.search-container {
|
||||
@ -16,6 +16,7 @@
|
||||
bottom: 0;
|
||||
z-index: ($zindex-modal-backdrop + 10);
|
||||
position: fixed;
|
||||
background: $body-bg;
|
||||
}
|
||||
|
||||
// Search
|
||||
@ -26,7 +27,7 @@
|
||||
}
|
||||
|
||||
.search-dropdown__col_1 {
|
||||
background: $page-bg;
|
||||
padding: $dashboard-padding;
|
||||
max-width: 700px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -47,8 +48,9 @@
|
||||
}
|
||||
|
||||
.search-filter-box {
|
||||
background: $search-filter-box-bg;
|
||||
border-radius: 2px;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-radius: 3px;
|
||||
padding: $spacer * 1.5;
|
||||
min-width: 340px;
|
||||
margin-bottom: $spacer * 1.5;
|
||||
@ -77,6 +79,10 @@
|
||||
.search-results-scroller {
|
||||
display: flex;
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.search-results-container {
|
||||
@ -106,10 +112,9 @@
|
||||
|
||||
.search-section {
|
||||
background: $panel-bg;
|
||||
border: $panel-border;
|
||||
border-bottom: 1px solid lightOrDark($gray95, $gray25);
|
||||
padding: 0px 4px 4px 4px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.search-section__header {
|
||||
|
@ -1,12 +1,14 @@
|
||||
$mobile-menu-breakpoint: md;
|
||||
|
||||
.sidemenu {
|
||||
background: $side-menu-bg;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex-direction: column;
|
||||
width: $side-menu-width;
|
||||
z-index: $zindex-sidemenu;
|
||||
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -20,7 +22,7 @@ $mobile-menu-breakpoint: md;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up($mobile-menu-breakpoint) {
|
||||
background: $side-menu-bg;
|
||||
border-right: $side-menu-border;
|
||||
height: auto;
|
||||
box-shadow: $side-menu-shadow;
|
||||
position: relative;
|
||||
@ -205,7 +207,7 @@ li.sidemenu-org-switcher {
|
||||
height: $navbarHeight - 1px;
|
||||
|
||||
&:hover {
|
||||
background: $navbarButtonBackgroundHighlight;
|
||||
background: lightOrDark($gray33, $gray25);
|
||||
}
|
||||
|
||||
img {
|
||||
|
@ -11,12 +11,13 @@
|
||||
.main-view {
|
||||
position: relative;
|
||||
flex-grow: 1;
|
||||
background: $page-gradient;
|
||||
background: $page-bg;
|
||||
}
|
||||
|
||||
.panel-in-fullscreen {
|
||||
.page-explore,
|
||||
.page-dashboard {
|
||||
.main-view {
|
||||
background: $edit-gradient;
|
||||
background: $body-bg;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -369,7 +369,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@function lightOrDarkTheme($lightColor, $darkColor) {
|
||||
@function lightOrDark($lightColor, $darkColor) {
|
||||
@if (lightness($text-color) < 50) {
|
||||
@return $lightColor;
|
||||
} @else {
|
||||
|
Loading…
Reference in New Issue
Block a user