fix: fix style

This commit is contained in:
fantasticit 2022-04-01 12:54:48 +08:00
parent 8956e9ed87
commit bcbf965f2b
7 changed files with 67 additions and 18 deletions

View File

@ -1,4 +1,5 @@
import React, { useRef, useEffect } from 'react'; import React, { useRef, useEffect } from 'react';
import cls from 'classnames';
import { useClickOutside } from 'hooks/use-click-outside'; import { useClickOutside } from 'hooks/use-click-outside';
import interact from 'interactjs'; import interact from 'interactjs';
import styles from './style.module.scss'; import styles from './style.module.scss';
@ -7,12 +8,13 @@ interface IProps {
width: number; width: number;
height: number; height: number;
onChange: (arg: { width: number; height: number }) => void; onChange: (arg: { width: number; height: number }) => void;
className?: string;
} }
const MIN_WIDTH = 50; const MIN_WIDTH = 50;
const MIN_HEIGHT = 50; const MIN_HEIGHT = 50;
export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children }) => { export const Resizeable: React.FC<IProps> = ({ width, height, className, onChange, children }) => {
const $container = useRef<HTMLDivElement>(null); const $container = useRef<HTMLDivElement>(null);
const $topLeft = useRef<HTMLDivElement>(null); const $topLeft = useRef<HTMLDivElement>(null);
const $topRight = useRef<HTMLDivElement>(null); const $topRight = useRef<HTMLDivElement>(null);
@ -62,7 +64,12 @@ export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children
}, [width, height]); }, [width, height]);
return ( return (
<div id="js-resizeable-container" className={styles.resizable} ref={$container} style={{ width, height }}> <div
id="js-resizeable-container"
className={cls(className, styles.resizable)}
ref={$container}
style={{ width, height }}
>
<span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span> <span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span>
<span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span> <span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span>
<span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span> <span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>

View File

@ -20,6 +20,7 @@
.treeItemWrap { .treeItemWrap {
display: flex; display: flex;
line-height: 28px;
.left { .left {
display: flex; display: flex;
@ -101,5 +102,5 @@
} }
.docListTitle { .docListTitle {
margin: 12px .5rem; margin: 12px 0.5rem;
} }

View File

@ -10,7 +10,7 @@ import { IconDocument, IconSetting, IconOverview, IconGlobe } from 'components/i
import { DocumentCreator } from 'components/document/create'; import { DocumentCreator } from 'components/document/create';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { EventEmitter } from 'helpers/event-emitter'; import { EventEmitter } from 'helpers/event-emitter';
import { NavItem } from './NavItem'; import { NavItem } from './nav-item';
import { Tree } from './tree'; import { Tree } from './tree';
import styles from './index.module.scss'; import styles from './index.module.scss';
import { isPublicWiki } from '@think/domains'; import { isPublicWiki } from '@think/domains';

View File

@ -9,7 +9,7 @@ import { findParents } from 'components/wiki/tocs/utils';
import { LogoImage, LogoText } from 'components/logo'; import { LogoImage, LogoText } from 'components/logo';
import { DataRender } from 'components/data-render'; import { DataRender } from 'components/data-render';
import { Tree } from './tree'; import { Tree } from './tree';
import { NavItem } from './NavItem'; import { NavItem } from './nav-item';
import styles from './index.module.scss'; import styles from './index.module.scss';
interface IProps { interface IProps {

View File

@ -56,7 +56,6 @@
.node-attachment, .node-attachment,
.node-banner, .node-banner,
.node-iframe, .node-iframe,
.node-image,
.node-katex, .node-katex,
.node-mind, .node-mind,
.node-codeBlock, .node-codeBlock,
@ -72,23 +71,61 @@
} }
&.selected-node { &.selected-node {
position: relative;
.render-wrapper { .render-wrapper {
position: relative;
border: 1px solid var(--node-selected-border-color) !important; border: 1px solid var(--node-selected-border-color) !important;
&:hover { &:hover {
border-color: var(--node-selected-border-color); border-color: var(--node-selected-border-color);
box-shadow: none; box-shadow: none;
} }
}
&::after { &::after {
position: absolute; position: absolute;
content: ''; content: '';
inset: 0px; inset: 0px;
opacity: 0.3;
pointer-events: none; pointer-events: none;
background-color: rgb(179, 212, 255); background-color: rgba(179, 212, 255, 0.3);
}
}
}
&:not(.has-focus) {
::selection {
background-color: transparent;
}
}
}
.node-image {
.render-wrapper {
position: relative;
&:hover {
&::after {
position: absolute;
content: '';
inset: 0px;
pointer-events: none;
background-color: transparent;
border: 1px solid var(--node-hover-border-color) !important;
border-radius: var(--border-radius);
}
}
}
&.selected-node {
.render-wrapper {
position: relative;
&::after {
position: absolute;
content: '';
inset: 0px;
pointer-events: none;
background-color: rgba(179, 212, 255, 0.3);
border: 1px solid var(--node-selected-border-color) !important;
border-radius: var(--border-radius);
}
} }
} }

View File

@ -71,17 +71,21 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
); );
} }
const img = <img className="render-wrapper" src={src} alt={alt} width={width} height={height} />; const img = <img src={src} alt={alt} width={width} height={height} />;
if (isEditable) { if (isEditable) {
return ( return (
<Resizeable width={width} height={height} onChange={onResize}> <Resizeable className={cls('render-wrapper')} width={width} height={height} onChange={onResize}>
{img} {img}
</Resizeable> </Resizeable>
); );
} }
return <div style={{ display: 'inline-block', width, height, maxWidth: '100%' }}>{img}</div>; return (
<div className={cls('render-wrapper')} style={{ display: 'inline-block', width, height, maxWidth: '100%' }}>
{img}
</div>
);
})(); })();
return ( return (