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 cls from 'classnames';
|
||||
import { useClickOutside } from 'hooks/use-click-outside';
|
||||
import interact from 'interactjs';
|
||||
import styles from './style.module.scss';
|
||||
|
@ -7,12 +8,13 @@ interface IProps {
|
|||
width: number;
|
||||
height: number;
|
||||
onChange: (arg: { width: number; height: number }) => void;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const MIN_WIDTH = 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 $topLeft = useRef<HTMLDivElement>(null);
|
||||
const $topRight = useRef<HTMLDivElement>(null);
|
||||
|
@ -62,7 +64,12 @@ export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children
|
|||
}, [width, height]);
|
||||
|
||||
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.topRight} ref={$topRight} data-type={'topRight'}></span>
|
||||
<span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
|
||||
.treeItemWrap {
|
||||
display: flex;
|
||||
line-height: 28px;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
|
@ -101,5 +102,5 @@
|
|||
}
|
||||
|
||||
.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 { DataRender } from 'components/data-render';
|
||||
import { EventEmitter } from 'helpers/event-emitter';
|
||||
import { NavItem } from './NavItem';
|
||||
import { NavItem } from './nav-item';
|
||||
import { Tree } from './tree';
|
||||
import styles from './index.module.scss';
|
||||
import { isPublicWiki } from '@think/domains';
|
||||
|
|
|
@ -9,7 +9,7 @@ import { findParents } from 'components/wiki/tocs/utils';
|
|||
import { LogoImage, LogoText } from 'components/logo';
|
||||
import { DataRender } from 'components/data-render';
|
||||
import { Tree } from './tree';
|
||||
import { NavItem } from './NavItem';
|
||||
import { NavItem } from './nav-item';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
interface IProps {
|
||||
|
|
|
@ -56,7 +56,6 @@
|
|||
.node-attachment,
|
||||
.node-banner,
|
||||
.node-iframe,
|
||||
.node-image,
|
||||
.node-katex,
|
||||
.node-mind,
|
||||
.node-codeBlock,
|
||||
|
@ -72,23 +71,61 @@
|
|||
}
|
||||
|
||||
&.selected-node {
|
||||
position: relative;
|
||||
.render-wrapper {
|
||||
position: relative;
|
||||
border: 1px solid var(--node-selected-border-color) !important;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--node-selected-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: 0px;
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
background-color: rgb(179, 212, 255);
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
inset: 0px;
|
||||
pointer-events: none;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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) {
|
||||
return (
|
||||
<Resizeable width={width} height={height} onChange={onResize}>
|
||||
<Resizeable className={cls('render-wrapper')} width={width} height={height} onChange={onResize}>
|
||||
{img}
|
||||
</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 (
|
||||
|
|
Loading…
Reference in New Issue