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 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>

View File

@ -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;
}

View File

@ -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';

View File

@ -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 {

View File

@ -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);
}
}
}

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) {
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 (