Skip to content

Commit

Permalink
Merge pull request #16949 from dannon/color
Browse files Browse the repository at this point in the history
Standardize to W3C naming for color.
  • Loading branch information
mvdbeek authored Oct 31, 2023
2 parents 5b44e84 + 140a65c commit a5b88e0
Show file tree
Hide file tree
Showing 22 changed files with 306 additions and 306 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { mount } from "@vue/test-utils";
import { nextTick } from "vue";

import { colors } from "./colors";

import ColorSelector from "./ColorSelector.vue";

describe("ColorSelector", () => {
it("shows a button for each color and 'none'", () => {
const wrapper = mount(ColorSelector, { propsData: { color: "none" } });
const buttons = wrapper.findAll("button");
expect(buttons.length).toBe(Object.keys(colors).length + 1);
});

it("highlights the selected color", async () => {
const wrapper = mount(ColorSelector, { propsData: { color: "none" } });
const allSelected = wrapper.findAll(".selected");
expect(allSelected.length).toBe(1);

let selected = allSelected.wrappers[0];
expect(selected.element.getAttribute("title")).toBe("No Color");

const colorNames = Object.keys(colors);

for (let i = 0; i < colorNames.length; i++) {
const color = colorNames[i];
wrapper.setProps({ color });
await nextTick();

selected = wrapper.find(".selected");

expect(selected.element.getAttribute("title")).toContain(color);
}
});

it("emits the set color", async () => {
const wrapper = mount(ColorSelector, { propsData: { color: "none" } });

const colorNames = Object.keys(colors);

for (let i = 0; i < colorNames.length; i++) {
const color = colorNames[i];
await wrapper.find(`[title="Color ${color}"]`).trigger("click");
expect(wrapper.emitted()["set-color"][i][0]).toBe(color);
}
});
});
100 changes: 100 additions & 0 deletions client/src/components/Workflow/Editor/Comments/ColorSelector.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<script setup lang="ts">
import type { WorkflowCommentColor } from "@/stores/workflowEditorCommentStore";
import { brightColors, colors } from "./colors";
const props = defineProps<{
color: WorkflowCommentColor;
}>();
const emit = defineEmits<{
(e: "set-color", color: WorkflowCommentColor): void;
}>();
function onClickColor(color: WorkflowCommentColor) {
emit("set-color", color);
}
</script>

<template>
<div class="comment-color-selector">
<button
class="color-button prevent-zoom"
title="No Color"
data-color="none"
:class="{ selected: props.color === 'none' }"
@click="() => onClickColor('none')"></button>
<button
v-for="(hex, name) in colors"
:key="name"
class="color-button prevent-zoom"
:data-color="name"
:title="`Color ${name}`"
:class="{ selected: props.color === name }"
:style="{
'--color': hex,
'--color-bright': brightColors[name],
}"
@click="() => onClickColor(name)"></button>
</div>
</template>

<style scoped lang="scss">
@import "theme/blue.scss";
.comment-color-selector {
position: absolute;
z-index: 10000;
display: grid;
grid-template-rows: 1rem 1rem;
grid-template-columns: repeat(5, 1rem);
grid-auto-flow: column;
overflow: hidden;
border-radius: 0.25rem;
.color-button {
--color: #{$brand-primary};
--color-bright: #{$brand-secondary};
background-color: var(--color);
border-color: var(--color-bright);
border-width: 0;
border-radius: 0;
padding: 0;
width: 100%;
height: 100%;
display: grid;
place-items: center;
transition: none;
&:hover {
background-color: var(--color-bright);
}
&:focus,
&:focus-visible {
border-color: var(--color-bright);
border-width: 2px;
box-shadow: none;
}
&.selected::after {
content: "";
display: block;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: var(--color-bright);
}
&.selected:hover::after {
background-color: var(--color);
}
}
}
</style>

This file was deleted.

100 changes: 0 additions & 100 deletions client/src/components/Workflow/Editor/Comments/ColourSelector.vue

This file was deleted.

Loading

0 comments on commit a5b88e0

Please sign in to comment.