mirror of https://github.com/fantasticit/think.git
fix: fix style
This commit is contained in:
parent
8956e9ed87
commit
bcbf965f2b
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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: rgba(179, 212, 255, 0.3);
|
||||||
background-color: rgb(179, 212, 255);
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&: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);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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 (
|
||||||
|
|
Loading…
Reference in New Issue