Skip to content

Commit

Permalink
feat: transparent color
Browse files Browse the repository at this point in the history
  • Loading branch information
@zzxming
zzxming committed Nov 22, 2024
1 parent 322bb2d commit a2f2949
Show file tree
Hide file tree
Showing 4 changed files with 25 additions and 45 deletions.
40 changes: 9 additions & 31 deletions docs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const quill2 = new Quill('#editor2', {
DeleteColumn: '删除当前列',
DeleteTable: '删除当前表格',
BackgroundColor: '设置背景颜色',
BorderColor: '设置边框颜色',
},
defaultColorMap: [
[
Expand Down Expand Up @@ -114,6 +115,7 @@ const quill2 = new Quill('#editor2', {
texts: {
custom: '自定义',
clear: '清除',
transparent: '透明',
},
},
},
Expand Down Expand Up @@ -216,34 +218,10 @@ quill1.setContents([
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1kibdy9zqsu', colId: '5', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '\n' },

// { insert: '\n' },
// { insert: { 'table-up-col': { tableId: '1', colId: '1', width: 121 } } },
// { insert: { 'table-up-col': { tableId: '1', colId: '2', width: 121 } } },
// { insert: { 'table-up-col': { tableId: '1', colId: '3', width: 121 } } },
// { insert: '1' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '2' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '3' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '4' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '5' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '6' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '7' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '8' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '9' },
// { attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
// { insert: '\n' },

{ insert: '\n' },
{ insert: { 'table-up-col': { tableId: '1', colId: '1', full: false, width: 121 } } },
{ insert: { 'table-up-col': { tableId: '1', colId: '2', full: false, width: 121 } } },
{ insert: { 'table-up-col': { tableId: '1', colId: '3', full: false, width: 121 } } },
{ insert: { 'table-up-col': { tableId: '1', colId: '1', width: 121 } } },
{ insert: { 'table-up-col': { tableId: '1', colId: '2', width: 121 } } },
{ insert: { 'table-up-col': { tableId: '1', colId: '3', width: 121 } } },
{ insert: '1' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '1', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '2' },
Expand All @@ -255,13 +233,13 @@ quill1.setContents([
{ insert: '5' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '6' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1, borderColor: 'rgb(253, 235, 255)' } }, insert: '\n' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '2', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '7' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '1', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '8' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1, height: '37px' } }, insert: '\n' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '2', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '9' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1, height: '37px', borderColor: 'rgb(253, 235, 255)' } }, insert: '\n' },
{ attributes: { 'table-up-cell-inner': { tableId: '1', rowId: '3', colId: '3', rowspan: 1, colspan: 1 } }, insert: '\n' },
{ insert: '\n' },

// { insert: '\n' },
Expand Down
16 changes: 13 additions & 3 deletions src/modules/table-menu.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export class TableMenu {
}

resolveOptions(options: TableMenuOptionsInput) {
return Object.assign({
const value = Object.assign({
tipText: true,
tipTexts: {},
tools: defaultTools,
Expand Down Expand Up @@ -266,14 +266,16 @@ export class TableMenu {
'rgb(59, 21, 81)',
],
],
texts: this.resolveTexts(options.texts),
}, options);
value.texts = Object.assign(this.resolveTexts(options.texts), options.texts);
return value as TableMenuOptions;
};

resolveTexts(texts: Partial<TableMenuTexts> = {}) {
return Object.assign({
custom: 'Custom',
clear: 'Clear',
transparent: 'Transparent',
}, texts);
}

Expand Down Expand Up @@ -353,7 +355,14 @@ export class TableMenu {
Object.assign(colorMapRow.style, {
marginTop: '4px',
});
const transparentColor = document.createElement('div');
transparentColor.classList.add('table-color-transparent');
transparentColor.textContent = this.options.texts.transparent;
transparentColor.addEventListener('click', () => {
handle(this.tableModule, this.selectedTds, 'transparent');
});
const clearColor = document.createElement('div');
clearColor.classList.add('table-color-clear');
clearColor.textContent = this.options.texts.clear;
clearColor.addEventListener('click', () => {
handle(this.tableModule, this.selectedTds, null);
Expand All @@ -377,8 +386,9 @@ export class TableMenu {
}, false);
label.appendChild(customColor);
label.appendChild(input);
clearColor.classList.add('table-color-clear');
label.classList.add('table-color-custom');

colorMapRow.appendChild(transparentColor);
colorMapRow.appendChild(clearColor);
colorMapRow.appendChild(label);
colorSelectWrapper.appendChild(colorMapRow);
Expand Down
13 changes: 2 additions & 11 deletions src/style/index.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -270,6 +270,7 @@
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
}
}
&-used {
Expand All @@ -288,14 +289,14 @@
border: 1px solid #a3a3a3;
cursor: pointer;
}
&-transparent,
&-clear,
&-custom {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
height: 20px;
margin: 0px 4px;
color: #303133;
background-color: #fff;
cursor: pointer;
Expand Down Expand Up @@ -354,16 +355,6 @@
}
td {
border: 1px solid #a1a1aa;
border-bottom-color: transparent;
border-right-color: transparent;
&:last-child {
border-right-color: #a1a1aa;
}
}
tr:last-child {
td {
border-bottom-color: #a1a1aa;
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/utils/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type Tool = ToolOption | ToolOptionBreak;
export interface TableMenuTexts {
custom: string;
clear: string;
transparent: string;
}
export interface TableMenuOptions {
tipText: boolean;
Expand Down

0 comments on commit a2f2949

Please sign in to comment.