Commit b715b472 authored by Himanshu Kapoor's avatar Himanshu Kapoor Committed by Olena Horal-Koretska

Improve UX of table creator

parent a2750547
......@@ -5,17 +5,17 @@ import { clamp } from '../services/utils';
export const tableContentType = 'table';
const MIN_ROWS = 3;
const MIN_COLS = 3;
const MAX_ROWS = 8;
const MAX_COLS = 8;
const MIN_ROWS = 5;
const MIN_COLS = 5;
const MAX_ROWS = 10;
const MAX_COLS = 10;
export default {
components: {
GlButton,
GlDropdown,
GlDropdownDivider,
GlDropdownForm,
GlButton,
},
inject: ['tiptapEditor'],
data() {
......@@ -62,22 +62,22 @@ export default {
};
</script>
<template>
<gl-dropdown size="small" category="tertiary" icon="table">
<gl-dropdown-form class="gl-px-3! gl-w-auto!">
<div class="gl-w-auto!">
<div v-for="r of list(maxRows)" :key="r" class="gl-display-flex">
<gl-button
v-for="c of list(maxCols)"
:key="c"
:data-testid="`table-${r}-${c}`"
:class="{ 'gl-bg-blue-50!': r <= rows && c <= cols }"
:aria-label="getButtonLabel(r, c)"
class="gl-display-inline! gl-px-0! gl-w-5! gl-h-5! gl-rounded-0!"
@mouseover="setRowsAndCols(r, c)"
@click="insertTable()"
/>
</div>
<gl-dropdown-divider />
<gl-dropdown size="small" category="tertiary" icon="table" class="table-dropdown">
<gl-dropdown-form class="gl-px-3!">
<div v-for="r of list(maxRows)" :key="r" class="gl-display-flex">
<gl-button
v-for="c of list(maxCols)"
:key="c"
:data-testid="`table-${r}-${c}`"
:class="{ 'active gl-bg-blue-50!': r <= rows && c <= cols }"
:aria-label="getButtonLabel(r, c)"
class="table-creator-grid-item gl-display-inline gl-rounded-0! gl-w-6! gl-h-6! gl-p-0!"
@mouseover="setRowsAndCols(r, c)"
@click="insertTable()"
/>
</div>
<gl-dropdown-divider class="gl-my-3! gl-mx-n3!" />
<div class="gl-px-1">
{{ getButtonLabel(rows, cols) }}
</div>
</gl-dropdown-form>
......
......@@ -35,3 +35,22 @@
}
}
}
.table-creator-grid-item {
box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100,
inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 #{$gl-spacing-scale-2 * 3 / 4} $gray-100 !important;
&.active {
box-shadow: inset 0 0 0 $gl-spacing-scale-2 $white,
inset $gl-spacing-scale-1 $gl-spacing-scale-1 0 $gl-spacing-scale-2 $blue-500,
inset #{-$gl-spacing-scale-1} #{-$gl-spacing-scale-1} 0 $gl-spacing-scale-2 $blue-500 !important;
}
}
.table-dropdown .dropdown-menu {
@include gl-min-w-0;
@include gl-w-auto;
@include gl-white-space-nowrap;
}
......@@ -29,17 +29,17 @@ describe('content_editor/components/toolbar_table_button', () => {
wrapper.destroy();
});
it('renders a grid of 3x3 buttons to create a table', () => {
expect(getNumButtons()).toBe(9); // 3 x 3
it('renders a grid of 5x5 buttons to create a table', () => {
expect(getNumButtons()).toBe(25); // 5x5
});
describe.each`
row | col | numButtons | tableSize
${1} | ${2} | ${9} | ${'1x2'}
${2} | ${2} | ${9} | ${'2x2'}
${2} | ${3} | ${12} | ${'2x3'}
${3} | ${2} | ${12} | ${'3x2'}
${3} | ${3} | ${16} | ${'3x3'}
${3} | ${4} | ${25} | ${'3x4'}
${4} | ${4} | ${25} | ${'4x4'}
${4} | ${5} | ${30} | ${'4x5'}
${5} | ${4} | ${30} | ${'5x4'}
${5} | ${5} | ${36} | ${'5x5'}
`('button($row, $col) in the table creator grid', ({ row, col, numButtons, tableSize }) => {
describe('on mouse over', () => {
beforeEach(async () => {
......@@ -50,9 +50,7 @@ describe('content_editor/components/toolbar_table_button', () => {
it('marks all rows and cols before it as active', () => {
const prevRow = Math.max(1, row - 1);
const prevCol = Math.max(1, col - 1);
expect(wrapper.findByTestId(`table-${prevRow}-${prevCol}`).element).toHaveClass(
'gl-bg-blue-50!',
);
expect(wrapper.findByTestId(`table-${prevRow}-${prevCol}`).element).toHaveClass('active');
});
it('shows a help text indicating the size of the table being inserted', () => {
......@@ -89,8 +87,8 @@ describe('content_editor/components/toolbar_table_button', () => {
});
});
it('does not create more buttons than a 8x8 grid', async () => {
for (let i = 3; i < 8; i += 1) {
it('does not create more buttons than a 10x10 grid', async () => {
for (let i = 5; i < 10; i += 1) {
expect(getNumButtons()).toBe(i * i);
// eslint-disable-next-line no-await-in-loop
......@@ -98,6 +96,6 @@ describe('content_editor/components/toolbar_table_button', () => {
expect(findDropdown().element).toHaveText(`Insert a ${i}x${i} table.`);
}
expect(getNumButtons()).toBe(64); // 8x8 (and not 9x9)
expect(getNumButtons()).toBe(100); // 10x10 (and not 11x11)
});
});
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