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

Resolve bootstrap CSS conflict.

Browse Source
This commit is contained in:
Matias Arriola 2022-02-23 21:47:45 +00:00 committed by Paulo Veiga
parent f95aef2ce6
commit 477a58628d
10 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -0,0 +1,16 @@
/*
These are patches or hacks to avoid boostrap interfering with Mui styles
This file is meant to be removed when removing bootstrap
*/
/*
/* bootstrap modal */
.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

@ -42,7 +42,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 */
@ -127,7 +128,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;
} }

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

@ -108,7 +108,7 @@ const Editor = ({
isTryMode={options.mode === 'showcase'} isTryMode={options.mode === 'showcase'}
onAction={onAction} onAction={onAction}
/> />
<div id="mindplot"></div> <div id="mindplot" className="wise-editor"></div>
<Footer showTryPanel={options.mode === 'showcase'} /> <Footer showTryPanel={options.mode === 'showcase'} />
</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');
} }
_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',
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>',