Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gitlab-ce
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
1
Merge Requests
1
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
nexedi
gitlab-ce
Commits
b715b472
Commit
b715b472
authored
Aug 16, 2021
by
Himanshu Kapoor
Committed by
Olena Horal-Koretska
Aug 16, 2021
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Improve UX of table creator
parent
a2750547
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
51 additions
and
34 deletions
+51
-34
app/assets/javascripts/content_editor/components/toolbar_table_button.vue
...cripts/content_editor/components/toolbar_table_button.vue
+21
-21
app/assets/stylesheets/components/content_editor.scss
app/assets/stylesheets/components/content_editor.scss
+19
-0
spec/frontend/content_editor/components/toolbar_table_button_spec.js
...nd/content_editor/components/toolbar_table_button_spec.js
+11
-13
No files found.
app/assets/javascripts/content_editor/components/toolbar_table_button.vue
View file @
b715b472
...
...
@@ -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>
...
...
app/assets/stylesheets/components/content_editor.scss
View file @
b715b472
...
...
@@ -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
;
}
spec/frontend/content_editor/components/toolbar_table_button_spec.js
View file @
b715b472
...
...
@@ -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
)
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment