revert: remove copy to clipboard functionality

Implementation across browsers makes this too much of a hassle to implement and behave consistently, notably Safari

Refs: e29a98f
This commit is contained in:
Sebin Nyshkim 2023-01-18 23:38:00 +01:00
parent cb99059ef4
commit de9281574d

View file

@ -10,10 +10,6 @@ interface Props {
colors: ColorDict[]; colors: ColorDict[];
} }
const copyToClipboard = (value: string) => {
navigator.clipboard.writeText(value);
};
defineProps<Props>(); defineProps<Props>();
</script> </script>
@ -29,13 +25,7 @@ defineProps<Props>();
<tbody class="color-table__body"> <tbody class="color-table__body">
<tr class="color-table__row" v-for="(color, idx) in colors" :key="idx"> <tr class="color-table__row" v-for="(color, idx) in colors" :key="idx">
<td class="color-table__cell name">{{ color.name }}</td> <td class="color-table__cell name">{{ color.name }}</td>
<td <td class="color-table__cell value">{{ color.value }}</td>
class="color-table__cell value"
@click.prevent="copyToClipboard(color.value)"
>
{{ color.value }}
<ClipboardIcon class="color-table__copy" />
</td>
<td <td
class="color-table__cell color" class="color-table__cell color"
:style="{ 'background-color': color.value }" :style="{ 'background-color': color.value }"
@ -61,17 +51,11 @@ defineProps<Props>();
&.value { &.value {
font-family: monospace; font-family: monospace;
text-align: center; text-align: center;
cursor: pointer;
} }
&.color { &.color {
min-width: 10vw; min-width: 10vw;
} }
} }
&__copy {
margin: 0 0 -0.25rem 0;
max-height: 1.25rem;
}
} }
</style> </style>