![]()
johnsmith
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.module.css b/grafana-plugin/src/containers/Rotations/Rotations.module.css
index b764648c..eaed6de2 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.module.css
+++ b/grafana-plugin/src/containers/Rotations/Rotations.module.css
@@ -1,94 +1,3 @@
-.root {
- background: var(--rotations-background);
- border: var(--rotations-border);
- display: flex;
- flex-direction: column;
- border-radius: var(--border-radius);
-}
-
-.current-time {
- position: absolute;
- width: 1px;
- background: var(--gradient-brandVertical);
- top: 0;
- bottom: 0;
- z-index: 1;
- transition: left 500ms ease;
-}
-
-.header {
- padding: 0 10px;
-}
-
-.title {
- margin: 16px 0;
-}
-
-.layer {
- display: block;
-}
-
-.rotations {
- position: relative;
-}
-
-.layer-title {
- text-align: center;
- font-weight: 500;
- line-height: 16px;
- padding: 8px;
- background: var(--secondary-background);
-}
-
-.layer-title:hover {
- background: rgba(204, 204, 220, 0.12);
-}
-
-.rotations-plus-title {
- display: flex;
- flex-direction: column;
-}
-
-.header-plus-content {
- position: relative;
- padding-top: 26px;
- padding-bottom: 26px;
-}
-
-.layer-header {
- padding: 12px;
- display: flex;
- justify-content: space-between;
-}
-
-.layer-header-title {
- font-weight: 400;
- font-size: 14px;
- line-height: 20px;
- color: rgba(204, 204, 220, 0.65);
-}
-
-.layer-content {
- position: relative;
-}
-
-.add-rotations-layer {
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- text-align: center;
- padding: 12px;
- cursor: pointer;
-}
-
-.add-rotations-layer:hover {
- background: var(--secondary-background);
-}
-
-/*
-animation
-*/
-
.enter {
opacity: 0;
}
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.styles.ts b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
new file mode 100644
index 00000000..1654e45c
--- /dev/null
+++ b/grafana-plugin/src/containers/Rotations/Rotations.styles.ts
@@ -0,0 +1,93 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+
+export const getRotationsStyles = (theme: GrafanaTheme2) => {
+ return {
+ root: css`
+ background: 1px solid ${theme.colors.background.secondary};
+ border: ${theme.colors.border.weak};
+ display: flex;
+ flex-direction: column;
+ border-radius: ${theme.shape.radius.default};
+ `,
+
+ currentTime: css`
+ position: absolute;
+ width: 1px;
+ background: ${theme.colors.gradients.brandVertical}
+ top: 0;
+ bottom: 0;
+ z-index: 1;
+ transition: left 500ms ease;
+ `,
+
+ header: css`
+ padding: 0 10px;
+ `,
+
+ title: css`
+ margin: 16px 0;
+ `,
+
+ layer: css`
+ display: block;
+ `,
+
+ rotations: css`
+ position: relative;
+ `,
+
+ layerTitle: css`
+ text-align: center;
+ font-weight: 500;
+ line-height: 16px;
+ padding: 8px;
+ background: ${theme.colors.background.secondary};
+
+ &:hover {
+ background: rgba(204, 204, 220, 0.12);
+ }
+ `,
+
+ rotationsPlusTitle: css`
+ display: flex;
+ flex-direction: column;
+ `,
+
+ headerPlusContent: css`
+ position: relative;
+ padding-top: 26px;
+ padding-bottom: 26px;
+ `,
+
+ layerHeader: css`
+ padding: 12px;
+ display: flex;
+ justify-content: space-between;
+ `,
+
+ layerHeaderTitle: css`
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 20px;
+ color: rgba(204, 204, 220, 0.65);
+ `,
+
+ layerContent: css`
+ position: relative;
+ `,
+
+ addRotationsLayer: css`
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ text-align: center;
+ padding: 12px;
+ cursor: pointer;
+
+ &:hover {
+ background: ${theme.colors.background.secondary};
+ }
+ `,
+ };
+};
diff --git a/grafana-plugin/src/containers/Rotations/Rotations.tsx b/grafana-plugin/src/containers/Rotations/Rotations.tsx
index bb91f081..58f5d88f 100644
--- a/grafana-plugin/src/containers/Rotations/Rotations.tsx
+++ b/grafana-plugin/src/containers/Rotations/Rotations.tsx
@@ -1,8 +1,7 @@
import React, { Component } from 'react';
-import { SelectableValue } from '@grafana/data';
-import { ValuePicker, HorizontalGroup, Button, Tooltip } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { ValuePicker, HorizontalGroup, Button, Tooltip, withTheme2 } from '@grafana/ui';
import dayjs from 'dayjs';
import { observer } from 'mobx-react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -22,10 +21,9 @@ import { UserActions } from 'utils/authorization/authorization';
import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
import { findColor } from './Rotations.helpers';
+import { getRotationsStyles } from './Rotations.styles';
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
interface RotationsProps extends WithStoreProps {
shiftIdToShowRotationForm?: Shift['id'] | 'new';
@@ -41,6 +39,7 @@ interface RotationsProps extends WithStoreProps {
disabled: boolean;
filters: ScheduleFiltersType;
onSlotClick?: (event: Event) => void;
+ theme: GrafanaTheme2;
}
interface RotationsState {
@@ -69,6 +68,7 @@ class _Rotations extends Component
{
filters,
onShowShiftSwapForm,
onSlotClick,
+ theme,
} = this.props;
const { layerPriority, shiftStartToShowRotationForm, shiftEndToShowRotationForm } = this.state;
@@ -97,13 +97,14 @@ class _Rotations extends Component {
const isTypeReadOnly =
schedule && (schedule?.type === ScheduleType.Ical || schedule?.type === ScheduleType.Calendar);
+ const styles = getRotationsStyles(theme);
return (
<>
-
-
+
+
-
+
Rotations
@@ -145,28 +146,32 @@ class _Rotations extends Component {
-
+
{layers && layers.length ? (
-
+
{layers.map((layer, layerIndex) => (
-
-
-
+
+
+
Layer {layer.priority}
-
+
{!currentTimeHidden && (
-
+
)}
-
+
{layer.shifts.map(({ shiftId, isPreview, events }, rotationIndex) => (
{
@@ -194,16 +199,16 @@ class _Rotations extends Component {
) : (
-
-
+
+
Layer 1
-
-
+
+
-
+
{
this.handleAddLayer(nextPriority, shiftStart, shiftEnd);
@@ -219,7 +224,7 @@ class _Rotations extends Component {
)}
{nextPriority > 1 && (
{
if (disabled) {
return;
@@ -232,6 +237,7 @@ class _Rotations extends Component {
)}
+
{shiftIdToShowRotationForm && (
{
};
}
-export const Rotations = withMobXProviderContext(_Rotations);
+export const Rotations = withMobXProviderContext(withTheme2(_Rotations));
diff --git a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
index 2329d91f..05854050 100644
--- a/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
+++ b/grafana-plugin/src/containers/Rotations/ScheduleFinal.tsx
@@ -1,7 +1,6 @@
import React, { FC } from 'react';
-import { HorizontalGroup } from '@grafana/ui';
-import cn from 'classnames/bind';
+import { HorizontalGroup, useStyles2 } from '@grafana/ui';
import dayjs from 'dayjs';
import { observer } from 'mobx-react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
@@ -22,10 +21,9 @@ import { withMobXProviderContext } from 'state/withStore';
import { DEFAULT_TRANSITION_TIMEOUT } from './Rotations.config';
import { findColor } from './Rotations.helpers';
+import { getRotationsStyles } from './Rotations.styles';
-import styles from './Rotations.module.css';
-
-const cx = cn.bind(styles);
+import animationStyles from './Rotations.module.css';
interface ScheduleFinalProps extends WithStoreProps {
scheduleId: Schedule['id'];
@@ -45,6 +43,8 @@ const _ScheduleFinal: FC = observer(
const base = 7 * 24 * 60; // in minutes
const diff = currentDateInSelectedTimezone.diff(calendarStartDate, 'minutes');
+ const styles = useStyles2(getRotationsStyles);
+
const currentTimeX = diff / base;
const shifts = flattenShiftEvents(getShiftsFromStore(store, scheduleId, calendarStartDate));
@@ -62,11 +62,11 @@ const _ScheduleFinal: FC = observer(
};
return (
-