vmario/wisemapping-frontend
1
0
Fork 0
mirror of https://bitbucket.org/wisemapping/wisemapping-frontend.git synced 2024-11-22 14:47:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix css style issue due to bootstrap.

Browse Source
This commit is contained in:
Matias Arriola 2022-03-02 22:25:51 +00:00 committed by Paulo Veiga
parent 58c08b467e
commit e9a23bb1e2
10 changed files with 39 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/editor/src/bootstrap-fixes.css vendored Normal file
View File

@ -0,0 +1,20 @@
/*
These are patches or hacks to avoid boostrap interfering with Mui styles
This file is meant to be removed when removing bootstrap
*/
/*
/* bootstrap modal */
.wise-editor .modal {
overflow: hidden;
}
.modal-backdrop {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.5);
z-index: 1000;
}

10
packages/editor/src/bootstrap-prefix.min.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
packages/editor/src/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
packages/editor/src/components/toolbar/index.tsx
View File

@ -43,7 +43,7 @@ export default function Toolbar({
}: ToolbarPropsType): React.ReactElement { }: ToolbarPropsType): React.ReactElement {
const intl = useIntl(); const intl = useIntl();
return ( return (
<HeaderContainer> <HeaderContainer className="wise-editor">
<div id="toolbar"> <div id="toolbar">
<div id="backToList"> <div id="backToList">
<img src={BackIconSvg} /> <img src={BackIconSvg} />

5
packages/editor/src/global-styled.css
View File

@ -1,7 +1,8 @@
/********************************************************************************/ /********************************************************************************/
/* Header & Toolbar Styles */ /* Header & Toolbar Styles */
/********************************************************************************/ /********************************************************************************/
@import "bootstrap.min.css"; @import "bootstrap-prefix.min.css";
@import "bootstrap-fixes.css";
html { html {
/* avoid bootstrap overriding font-size and breaking Mui */ /* avoid bootstrap overriding font-size and breaking Mui */
@ -129,7 +130,7 @@ div.shareModalDialog {
background-color: #efefef; background-color: #efefef;
} }
.popover { .wise-editor .popover {
font-size: 13px; font-size: 13px;
max-width: none; max-width: none;
} }

3
packages/editor/src/index.tsx
View File

@ -100,7 +100,8 @@ const Editor = ({
onAction={onAction} onAction={onAction}
/> />
} }
<div id="mindplot" style={mindplotStyle}></div> <div id="mindplot" style={mindplotStyle} className="wise-editor"></div>
<div id="mindplot-tooltips" className="wise-editor"></div>
<Footer editorMode={options.mode} /> <Footer editorMode={options.mode} />
</IntlProvider > </IntlProvider >
); );

1
packages/mindplot/src/components/NoteIcon.ts
View File

@ -55,7 +55,6 @@ class NoteIcon extends Icon {
} }
this._tip = new FloatingTip($(me.getImage().peer._native), { this._tip = new FloatingTip($(me.getImage().peer._native), {
title: $msg('NOTE'), title: $msg('NOTE'),
container: 'body',
// Content can also be a function of the target element! // Content can also be a function of the target element!
content() { content() {
return me._buildTooltipContent(); return me._buildTooltipContent();

2
packages/mindplot/src/components/libraries/bootstrap/BootstrapDialog.js
View File

@ -59,6 +59,8 @@ class BootstrapDialog extends Options {
$(this).remove(); $(this).remove();
}); });
this._native.on('shown.bs.modal', this.onDialogShown); this._native.on('shown.bs.modal', this.onDialogShown);
this._native.appendTo('#mindplot-tooltips');
} }
_buildFooter() { _buildFooter() {

2
packages/mindplot/src/components/widget/FloatingTip.js
View File

@ -27,7 +27,7 @@ const defaultOptions = {
title: '', title: '',
content: '', content: '',
delay: 0, delay: 0,
container: false, container: '#mindplot-tooltips',
destroyOnExit: false, destroyOnExit: false,
}; };

1
packages/mindplot/src/components/widget/LinkIconTooltip.js
View File

@ -31,7 +31,6 @@ class LinkIconTooltip extends FloatingTip {
}, },
html: true, html: true,
placement: 'bottom', placement: 'bottom',
container: 'body',
title: $msg('LINK'), title: $msg('LINK'),
trigger: 'manual', trigger: 'manual',
template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>', template: '<div id="linkPopover" class="popover" onmouseover="jQuery(this).mouseleave(function() {jQuery(this).fadeOut(200); });" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',