feat: demo theme

This commit is contained in:
yanmao 2021-12-16 11:44:50 +08:00
parent 52cf6641a6
commit d9ccd8faa5
11 changed files with 88 additions and 54 deletions

View File

@ -40,15 +40,15 @@
&-logo {
display: inline-block;
height: 40px;
height: 30px;
color: #080e29;
font-weight: 500;
text-decoration: none;
font-size: 18px;
line-height: 40px;
line-height: 30px;
&:not([data-plaintext]) {
padding-left: 56px;
padding-left: 36px;
background: url(@img-logo) no-repeat 0 / contain;
}
@ -68,7 +68,6 @@
}
nav {
margin-left: 20px;
display: flex;
> span {
position: relative;

View File

@ -96,6 +96,7 @@ const Navbar: FC<INavbarProps> = ({
{navSuffix}
<LocaleSelect location={location} />
</nav>
<div id="am-editor-ot-members"></div>
{navLast}
</div>
);

View File

@ -121,7 +121,7 @@ export const pluginConfig: { [key: string]: PluginOptions } = {
overflow: {
maxLeftWidth: () => {
// 编辑区域位置
const rect = $('.editor-content')
const rect = $('.am-engine')
.get<HTMLElement>()
?.getBoundingClientRect();
const editorLeft = rect?.left || 0;
@ -132,7 +132,7 @@ export const pluginConfig: { [key: string]: PluginOptions } = {
},
maxRightWidth: () => {
// 编辑区域位置
const rect = $('.editor-content')
const rect = $('.am-engine')
.get<HTMLElement>()
?.getBoundingClientRect();
const editorRigth = (rect?.right || 0) - (rect?.width || 0);

View File

@ -2,18 +2,29 @@
.__dumi-default-layout[data-site-mode='true'][data-route='/'],
.__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN'] {
padding-top: 138px !important;
padding-top: 106px !important;
min-height: auto;
@media @mobile {
padding-top: 86px !important;
padding-top: 54px !important;
}
}
.__dumi-default-layout[data-site-mode='true'][data-route='/'],
.__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN']
.__dumi-default-layout[data-site-mode='true'][data-route='/zh-CN'] {
.__dumi-default-navbar {
box-shadow: none;
@media @mobile {
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.08);
}
}
.__dumi-default-navbar-logo {
@media @mobile {
display: none;
}
}
}
.__dumi-default-layout[data-site-mode='true'] .__dumi-default-navbar nav {
@ -43,17 +54,13 @@
.editor-ot-users {
font-size: 12px;
background: #ffffff;
padding: 4px 0 4px 266px;
z-index: 999;
position: fixed;
width: 100%;
top: 64px;
margin: 0 24px;
@media @mobile {
padding: 8px 16px;
padding: 4px 8px;
z-index: 1;
left: 0;
top: 50px;
margin: 0;
}
}
@ -72,7 +79,7 @@
background: #ffffff;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.02);
z-index: 1000;
top: 96px;
top: 64px;
}
.__dumi-default-previewer-demo .editor-toolbar {
@ -91,7 +98,7 @@
.editor-container {
padding: 24px 0 64px;
height: calc(100vh - 138px);
height: calc(100vh - 106px);
width: 100%;
margin: 0 auto;
overflow: auto;
@ -112,15 +119,15 @@
min-height: 800px;
@media @mobile {
width: auto;
min-height: calc(100vh - 96px);
min-height: calc(100vh - 64px);
border: 0 none;
}
}
.editor-content .am-engine {
padding: 40px 0 60px;
padding: 0 0 60px;
@media @mobile {
padding: 18px 0 0 0;
padding: 0;
}
}

View File

@ -13,6 +13,7 @@ import Toc from '../toc';
import { cards, pluginConfig, plugins } from './config';
import Toolbar, { ToolbarItemProps } from './toolbar';
import './index.less';
import ReactDOM from 'react-dom';
export type Content = {
value: string;
@ -321,10 +322,25 @@ const EditorComponent: React.FC<EditorProps> = ({
}
};
useEffect(() => {
const headerOTMembersElement = document.getElementById(
'am-editor-ot-members',
);
if (!headerOTMembersElement || !props.ot) {
return;
}
ReactDOM.render(
<OTComponent members={members} />,
headerOTMembersElement,
);
return () => {
ReactDOM.unmountComponentAtNode(headerOTMembersElement);
};
}, [members, props.ot]);
return (
<Loading loading={loading}>
<>
{props.ot && <OTComponent members={members} />}
{engine.current && (
<Toolbar engine={engine.current} items={props.toolbar} />
)}

View File

@ -1,37 +1,21 @@
import React, { useContext } from 'react';
import React from 'react';
import Avatar from 'antd/es/avatar';
import Space from 'antd/es/space';
import { isMobile } from '@aomao/engine';
import OTClient, { STATUS, EVENT } from './client';
import Context from '../../../context';
import type { Member, ERROR } from './client';
import 'antd/es/avatar/style';
import 'antd/es/space/style';
const OTComponent: React.FC<{ members: Array<Member> }> = ({ members }) => {
const { lang } = useContext(Context);
return (
<div className="editor-ot-users">
<Space className="editor-ot-users-content" size="small">
{!isMobile && (
<span style={{ color: '#888888' }}>
{lang === 'zh-CN' ? (
<>
线<strong>{members.length}</strong>
</>
) : (
<>
<strong>{members.length}</strong> person online
</>
)}
</span>
)}
{members.map((member) => {
return (
<Avatar
key={member['id']}
size={isMobile ? 18 : 24}
size={isMobile ? 24 : 30}
style={{ backgroundColor: member['color'] }}
>
{member['name']}

View File

@ -1,6 +1,7 @@
@import (reference) '../../styles/variables.less';
.editor-wrapper-view {
.am-engine-view {
width: 812px;
min-width: 812px;
@ -9,3 +10,4 @@
width: 100% !important;
}
}
}

View File

@ -1,6 +1,6 @@
import React, { useRef, useEffect, useState, useContext } from 'react';
import Message from 'antd/es/message';
import { View, ViewInterface, isServer } from '@aomao/engine';
import { $, View, ViewInterface, removeUnit } from '@aomao/engine';
import { plugins, cards } from '../editor/config';
import Loading from '../loading';
import Context from '../../context';
@ -30,6 +30,29 @@ const ViewRender: React.FC<ViewProps> = ({ content, html }) => {
lang,
plugins: viewPlugins,
cards,
config: {
table: {
overflow: {
maxLeftWidth: () => {
return 0;
},
maxRightWidth: () => {
// 编辑区域位置
const wrapper = $('.editor-wrapper-view');
const view = $('.am-engine-view');
const wRect = wrapper
.get<HTMLElement>()
?.getBoundingClientRect();
const vRect = view
.get<HTMLElement>()
?.getBoundingClientRect();
const width =
(wRect?.width || 0) - (vRect?.width || 0);
return width <= 0 ? 100 : width;
},
},
},
},
});
view.current.messageSuccess = (msg: string) => {
Message.success(msg);

View File

@ -509,7 +509,7 @@ class TableComponent extends Card<TableValue> implements TableInterface {
super.didRender();
this.viewport = isEngine(this.editor)
? this.wrapper?.find(Template.VIEWPORT)
: this.wrapper;
: this.wrapper?.find(Template.VIEWPORT_READER);
this.selection.init();
this.conltrollBar.init();

View File

@ -199,10 +199,12 @@ class Template implements TemplateInterface {
)}${menuBar}</div>`;
}
htmlView({ html, noBorder }: TableValue) {
return `<div class="${VIEWPORT_READER}"${
htmlView({ html, noBorder, overflow }: TableValue) {
return `<div class="${TABLE_WRAPPER_CLASS_NAME} ${
overflow !== false ? TABLE_OVERFLOW_CLASS_NAME : ''
}"><div class="${VIEWPORT_READER}"${
noBorder === true ? " data-table-no-border='true'" : ''
}>${html}</div>`;
}>${html}</div></div>`;
}
}

File diff suppressed because one or more lines are too long