Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(dataview): hide tooltip when data view is open. #16321

Merged
merged 2 commits into from
Feb 15, 2022
Merged

fix(dataview): hide tooltip when data view is open. #16321

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8ad3b74
fix(dataview): hide tooltip when data view is open, use padding inste…
plainheart Jan 4, 2022
ba4d92e
fix(dataview): still set `overflow` as `auto`.
plainheart Jan 5, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 25 additions & 15 deletions src/component/toolbox/feature/DataView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,32 +318,40 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
private _dom: HTMLDivElement;

onclick(ecModel: GlobalModel, api: ExtensionAPI) {
// FIXME: better way?
setTimeout(() => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it necessary to use setTimeout? The tooltip should have been displayed before onclick event happens. I'm not sure if there is edge cases or something else I didn't thought of.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tooltip won't disappear if no delay. I don't know why yet.

api.dispatchAction({
type: 'hideTip'
});
});

const container = api.getDom();
const model = this.model;
if (this._dom) {
container.removeChild(this._dom);
}
const root = document.createElement('div');
root.style.cssText = 'position:absolute;left:5px;top:5px;bottom:5px;right:5px;';
// use padding to avoid 5px whitespace
root.style.cssText = 'position:absolute;top:0;bottom:0;left:0;right:0;padding:5px';
root.style.backgroundColor = model.get('backgroundColor') || '#fff';

// Create elements
const header = document.createElement('h4');
const lang = model.get('lang') || [];
header.innerHTML = lang[0] || model.get('title');
header.style.cssText = 'margin: 10px 20px;';
header.style.cssText = 'margin:10px 20px';
header.style.color = model.get('textColor');

const viewMain = document.createElement('div');
const textarea = document.createElement('textarea');
viewMain.style.cssText = 'display:block;width:100%;overflow:auto;';
viewMain.style.cssText = 'overflow:auto';

const optionToContent = model.get('optionToContent');
const contentToOption = model.get('contentToOption');
const result = getContentFromModel(ecModel);
if (typeof optionToContent === 'function') {
if (zrUtil.isFunction(optionToContent)) {
const htmlOrDom = optionToContent(api.getOption());
if (typeof htmlOrDom === 'string') {
if (zrUtil.isString(htmlOrDom)) {
viewMain.innerHTML = htmlOrDom;
}
else if (zrUtil.isDom(htmlOrDom)) {
Expand All @@ -352,22 +360,24 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {
}
else {
// Use default textarea
viewMain.appendChild(textarea);
textarea.readOnly = model.get('readOnly');
textarea.style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;';
textarea.style.color = model.get('textColor');
textarea.style.borderColor = model.get('textareaBorderColor');
textarea.style.backgroundColor = model.get('textareaColor');
const style = textarea.style;
// eslint-disable-next-line max-len
style.cssText = 'width:100%;height:100%;font-family:monospace;font-size:14px;line-height:1.6rem;resize:none';
style.color = model.get('textColor');
style.borderColor = model.get('textareaBorderColor');
style.backgroundColor = model.get('textareaColor');
textarea.value = result.value;
viewMain.appendChild(textarea);
}

const blockMetaList = result.meta;

const buttonContainer = document.createElement('div');
buttonContainer.style.cssText = 'position:absolute;bottom:0;left:0;right:0;';
buttonContainer.style.cssText = 'position:absolute;bottom:5px;left:0;right:0';
pissang marked this conversation as resolved.
Show resolved Hide resolved

let buttonStyle = 'float:right;margin-right:20px;border:none;'
+ 'cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px';
// eslint-disable-next-line max-len
let buttonStyle = 'float:right;margin-right:20px;border:none;cursor:pointer;padding:2px 5px;font-size:12px;border-radius:3px';
const closeButton = document.createElement('div');
const refreshButton = document.createElement('div');

Expand Down Expand Up @@ -395,7 +405,7 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {

let newOption;
try {
if (typeof contentToOption === 'function') {
if (zrUtil.isFunction(contentToOption)) {
newOption = contentToOption(viewMain, api.getOption());
}
else {
Expand All @@ -418,7 +428,7 @@ class DataView extends ToolboxFeature<ToolboxDataViewFeatureOption> {

closeButton.innerHTML = lang[1];
refreshButton.innerHTML = lang[2];
refreshButton.style.cssText = buttonStyle;
refreshButton.style.cssText =
closeButton.style.cssText = buttonStyle;

!model.get('readOnly') && buttonContainer.appendChild(refreshButton);
Expand Down