Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[SSE mobile] Add tooltip for data cell

Browse source
This commit is contained in:
SergeyEzhin 2022-06-15 19:57:45 +04:00
parent de58289ceb
commit 0d5daecadd
4 changed files with 66 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
apps/spreadsheeteditor/mobile/src/controller/Main.jsx
View file

@ -459,6 +459,35 @@ class MainController extends Component {
this.api.asc_registerCallback('asc_onEntriesListMenu', this.onEntriesListMenu.bind(this, false));
this.api.asc_registerCallback('asc_onValidationListMenu', this.onEntriesListMenu.bind(this, true));
this.api.asc_registerCallback('asc_onInputMessage', (title, msg) => {
if(!!title && !!msg) {
const coord = this.api.asc_getActiveCellCoord();
// const topPosition = coord.asc_getY() * 2 + coord.asc_getHeight() * 3 + 10;
// const leftPosition = coord.asc_getX();
// console.log(coord);
// console.log(topPosition, leftPosition);
f7.popover.create({
targetX: coord.asc_getX(),
targetY: coord.asc_getY(),
content: `
<div class="popover tooltip-cell-data">
<div class="popover-angle"></div>
<div class="popover-inner">
<p class="tooltip-cell-data__title">${title}</p>
<p class="tooltip-cell-data__msg">${msg}</p>
</div>
</div>
`,
backdrop: false,
closeByBackdropClick: false
}).open();
// document.querySelector('.tooltip-cell-data').style.top = `${topPosition}px`;
// document.querySelector('.tooltip-cell-data').style.left = `${leftPosition}px`;
}
});
}
onEntriesListMenu(validation, textArr, addArr) {

4
apps/spreadsheeteditor/mobile/src/less/app-ios.less
View file

@ -16,4 +16,8 @@
.actions-move-sheet .actions-button-text{
color: @brandColor;
}
.tooltip-cell-data {
border-radius: 4px;
}
}

4
apps/spreadsheeteditor/mobile/src/less/app-material.less
View file

@ -58,4 +58,8 @@
}
}
}
.tooltip-cell-data {
border-radius: 0;
}
}

29
apps/spreadsheeteditor/mobile/src/less/app.less
View file

@ -180,4 +180,33 @@
color: @text-normal;
}
}
}
.tooltip-cell-data {
width: 186px;
height: 153px;
overflow-y: auto;
box-shadow: 0px 20px 46px rgba(0, 0, 0, 0.1);
border-radius: 4px;
.popover-inner {
padding: 8px;
}
&__title {
font-style: normal;
font-weight: 600;
font-size: 12px;
line-height: 16px;
color: @text-normal;
margin: 0;
margin-bottom: 4px;
}
&__msg {
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 13px;
color: @text-secondary;
letter-spacing: 0.06px;
margin: 0;
}
}