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
@include gl-font-weight-normal;
&.label-dark {
@include gl-text-gray-900;
color: var(--gray-900, $gray-900);
}
&.label-bold {
......
<script>
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 { truncate } from '~/lib/utils/text_utility';
import { __, sprintf } from '~/locale';
import { LIGHT_TO_DARK_MODE_SHADE_MAPPING } from '../../../constants';
export const SHIFT_WIDTHS = {
md: 100,
......@@ -50,8 +53,21 @@ export default {
return this.assignee.user.username;
},
chevronClass() {
return `gl-bg-data-viz-${this.assignee.colorPalette}-${this.assignee.colorWeight}`;
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() {
return sprintf(__('Ends: %{endsAt}'), {
......@@ -81,10 +97,11 @@ export default {
<div
:id="rotationAssigneeUniqueID"
class="gl-h-6"
:class="[chevronClass, $options.ROTATION_CENTER_CLASS]"
:style="{ backgroundColor: chevronBackground }"
:class="$options.ROTATION_CENTER_CLASS"
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" />
<span
v-if="!hasRotationMobileViewText"
......
......@@ -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 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
* 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';
import mockRotations from '../../mocks/mock_rotation.json';
jest.mock('lodash/uniqueId', () => (prefix) => `${prefix}fakeUniqueId`);
jest.mock('~/lib/utils/color_utils');
describe('RotationAssignee', () => {
let wrapper;
......@@ -72,11 +73,9 @@ describe('RotationAssignee', () => {
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();
expect(token.classes()).toContain(
`gl-bg-data-viz-${assignee.participant.colorPalette}-${assignee.participant.colorWeight}`,
);
expect(token.attributes('style')).toBe('background-color: rgb(87, 114, 255);');
});
it('should render an assignee schedule and rotation information in a popover', () => {
......
......@@ -84,9 +84,10 @@ exports[`RotationsListSectionComponent when the timeframe includes today renders
style="left: 0px; width: 0px;"
>
<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"
id="rotation-assignee-2"
style="background-color: rgb(87, 114, 255);"
>
<div
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
style="left: 0px; width: 0px;"
>
<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"
id="rotation-assignee-3"
style="background-color: rgb(209, 78, 0);"
>
<div
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';
import { scheduleIid } from '../../mocks/apollo_mock';
import mockRotations from '../../mocks/mock_rotation.json';
jest.mock('~/lib/utils/color_utils');
describe('RotationsListSectionComponent', () => {
let wrapper;
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