Commit d2745100 authored by Olena Horal-Koretska's avatar Olena Horal-Koretska Committed by Enrique Alcántara

Assignee color for dark mode

parent 4313ef4a
...@@ -95,7 +95,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi ...@@ -95,7 +95,7 @@ $column-right-gradient: linear-gradient(to right, $gradient-dark-gray 0%, $gradi
@include gl-font-weight-normal; @include gl-font-weight-normal;
&.label-dark { &.label-dark {
@include gl-text-gray-900; color: var(--gray-900, $gray-900);
} }
&.label-bold { &.label-bold {
......
<script> <script>
import { GlAvatar, GlPopover } from '@gitlab/ui'; import { GlAvatar, GlPopover } from '@gitlab/ui';
import { uniqueId } from 'lodash'; import * as cssVariables from '@gitlab/ui/scss_to_js/scss_variables';
import { uniqueId, startCase } from 'lodash';
import { darkModeEnabled } from '~/lib/utils/color_utils';
import { formatDate } from '~/lib/utils/datetime_utility'; import { formatDate } from '~/lib/utils/datetime_utility';
import { truncate } from '~/lib/utils/text_utility'; import { truncate } from '~/lib/utils/text_utility';
import { __, sprintf } from '~/locale'; import { __, sprintf } from '~/locale';
import { LIGHT_TO_DARK_MODE_SHADE_MAPPING } from '../../../constants';
export const SHIFT_WIDTHS = { export const SHIFT_WIDTHS = {
md: 100, md: 100,
...@@ -50,8 +53,21 @@ export default { ...@@ -50,8 +53,21 @@ export default {
return this.assignee.user.username; return this.assignee.user.username;
}, },
chevronClass() { colorWeight() {
return `gl-bg-data-viz-${this.assignee.colorPalette}-${this.assignee.colorWeight}`; const { colorWeight } = this.assignee;
return darkModeEnabled() ? LIGHT_TO_DARK_MODE_SHADE_MAPPING[colorWeight] : colorWeight;
},
chevronBackground() {
const { colorPalette } = this.assignee;
const bgColor = `dataViz${startCase(colorPalette)}${this.colorWeight}`;
return cssVariables[bgColor];
},
textClass() {
if (darkModeEnabled()) {
return this.colorWeight < 500 ? 'gl-text-white' : 'gl-text-gray-900';
}
return 'gl-text-white';
}, },
endsAt() { endsAt() {
return sprintf(__('Ends: %{endsAt}'), { return sprintf(__('Ends: %{endsAt}'), {
...@@ -81,10 +97,11 @@ export default { ...@@ -81,10 +97,11 @@ export default {
<div <div
:id="rotationAssigneeUniqueID" :id="rotationAssigneeUniqueID"
class="gl-h-6" class="gl-h-6"
:class="[chevronClass, $options.ROTATION_CENTER_CLASS]" :style="{ backgroundColor: chevronBackground }"
:class="$options.ROTATION_CENTER_CLASS"
data-testid="rotation-assignee" data-testid="rotation-assignee"
> >
<div class="gl-text-white" :class="$options.ROTATION_CENTER_CLASS"> <div :class="[textClass, $options.ROTATION_CENTER_CLASS]">
<gl-avatar v-if="!hasRotationMobileViewAvatar" :src="assignee.user.avatarUrl" :size="16" /> <gl-avatar v-if="!hasRotationMobileViewAvatar" :src="assignee.user.avatarUrl" :size="16" />
<span <span
v-if="!hasRotationMobileViewText" v-if="!hasRotationMobileViewText"
......
...@@ -8,6 +8,15 @@ export const CHEVRON_SKIPPING_SHADE_ENUM = ['500', '600', '700', '800', '900', ' ...@@ -8,6 +8,15 @@ export const CHEVRON_SKIPPING_SHADE_ENUM = ['500', '600', '700', '800', '900', '
export const CHEVRON_SKIPPING_PALETTE_ENUM = ['blue', 'orange', 'aqua', 'green', 'magenta']; export const CHEVRON_SKIPPING_PALETTE_ENUM = ['blue', 'orange', 'aqua', 'green', 'magenta'];
export const LIGHT_TO_DARK_MODE_SHADE_MAPPING = {
500: 500,
600: 400,
700: 300,
800: 200,
900: 100,
950: 50,
};
/** /**
* an Array of Objects that represent the 30 possible * an Array of Objects that represent the 30 possible
* color combinations for assignees * color combinations for assignees
......
---
title: Assignee color for dark mode
merge_request: 58501
author:
type: changed
...@@ -10,6 +10,7 @@ import { truncate } from '~/lib/utils/text_utility'; ...@@ -10,6 +10,7 @@ import { truncate } from '~/lib/utils/text_utility';
import mockRotations from '../../mocks/mock_rotation.json'; import mockRotations from '../../mocks/mock_rotation.json';
jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}fakeUniqueId`); jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}fakeUniqueId`);
jest.mock('~/lib/utils/color_utils');
describe('RotationAssignee', () => { describe('RotationAssignee', () => {
let wrapper; let wrapper;
...@@ -72,11 +73,9 @@ describe('RotationAssignee', () => { ...@@ -72,11 +73,9 @@ describe('RotationAssignee', () => {
expect(findAvatar().exists()).toBe(false); expect(findAvatar().exists()).toBe(false);
}); });
it('should render an assignee color based on the chevron skipping color pallette', () => { it('should render an assignee color based on the chevron skipping color palette', () => {
const token = findToken(); const token = findToken();
expect(token.classes()).toContain( expect(token.attributes('style')).toBe('background-color: rgb(87, 114, 255);');
`gl-bg-data-viz-${assignee.participant.colorPalette}-${assignee.participant.colorWeight}`,
);
}); });
it('should render an assignee schedule and rotation information in a popover', () => { it('should render an assignee schedule and rotation information in a popover', () => {
......
...@@ -84,9 +84,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders ...@@ -84,9 +84,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;" style="left: 0px; width: 0px;"
> >
<div <div
class="gl-h-6 gl-bg-data-viz-blue-500 gl-display-flex gl-justify-content-center gl-align-items-center" class="gl-h-6 gl-display-flex gl-justify-content-center gl-align-items-center"
data-testid="rotation-assignee" data-testid="rotation-assignee"
id="rotation-assignee-2" id="rotation-assignee-2"
style="background-color: rgb(87, 114, 255);"
> >
<div <div
class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center" class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
...@@ -124,9 +125,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders ...@@ -124,9 +125,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;" style="left: 0px; width: 0px;"
> >
<div <div
class="gl-h-6 gl-bg-data-viz-orange-500 gl-display-flex gl-justify-content-center gl-align-items-center" class="gl-h-6 gl-display-flex gl-justify-content-center gl-align-items-center"
data-testid="rotation-assignee" data-testid="rotation-assignee"
id="rotation-assignee-3" id="rotation-assignee-3"
style="background-color: rgb(209, 78, 0);"
> >
<div <div
class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center" class="gl-text-white gl-display-flex gl-justify-content-center gl-align-items-center"
......
...@@ -11,6 +11,8 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper'; ...@@ -11,6 +11,8 @@ import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import { scheduleIid } from '../../mocks/apollo_mock'; import { scheduleIid } from '../../mocks/apollo_mock';
import mockRotations from '../../mocks/mock_rotation.json'; import mockRotations from '../../mocks/mock_rotation.json';
jest.mock('~/lib/utils/color_utils');
describe('RotationsListSectionComponent', () => { describe('RotationsListSectionComponent', () => {
let wrapper; let wrapper;
const mockTimeframeInitialDate = new Date(mockRotations[0].shifts.nodes[0].startsAt); const mockTimeframeInitialDate = new Date(mockRotations[0].shifts.nodes[0].startsAt);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment