From 8b1bcbeb7b33ff725f57654f8ab84fb6ba1ac106 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 12 Aug 2020 12:16:32 +0300 Subject: [PATCH 01/27] #599: history page, readonly flag, header --- src/scss/component/header.scss | 10 +- src/ts/component/block/iconPage.tsx | 15 ++- src/ts/component/editor/page.tsx | 3 +- src/ts/component/header/main/edit.tsx | 2 +- src/ts/component/header/main/history.tsx | 35 +++++++ src/ts/component/index.tsx | 2 + src/ts/component/menu/block/more.tsx | 11 ++- src/ts/component/page/index.tsx | 2 + src/ts/component/page/main/history.tsx | 112 +++++++++++++++++++++++ src/ts/interface/block.tsx | 1 + 10 files changed, 178 insertions(+), 15 deletions(-) create mode 100644 src/ts/component/header/main/history.tsx create mode 100644 src/ts/component/page/main/history.tsx diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index 23001d34de..d100fcd1c0 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -57,10 +57,8 @@ .icon:hover { background-color: rgba(0,0,0,0.15); } } -.headerMainEdit { background: #fff; padding: 9px 10px 9px 82px; line-height: 20px; } - -.headerMainEditSearch { background: #fff; padding: 5px 10px; height: 38px; } -.headerMainEditSearch { +.headerMainEdit { background: #fff; padding: 5px 10px; height: 38px; line-height: 20px; } +.headerMainEdit { .icon { width: 40px; height: 28px; background-size: 20px 20px; border-radius: 6px; } .icon:hover { background-color: #f3f2ec; } @@ -93,12 +91,12 @@ } body.platformMac { - .headerMainEditSearch { + .headerMainEdit { .side.left { left: 90px; } } } -.headerMainEditSearch:hover, .headerMainEditSearch.active { +.headerMainEdit:hover, .headerMainEdit.active { .side.left { opacity: 1; } .mid { .icon { opacity: 1; } diff --git a/src/ts/component/block/iconPage.tsx b/src/ts/component/block/iconPage.tsx index 9a1aa11338..aaf99e51f6 100644 --- a/src/ts/component/block/iconPage.tsx +++ b/src/ts/component/block/iconPage.tsx @@ -17,13 +17,24 @@ class BlockIconPage extends React.Component { }; render (): any { - const { rootId } = this.props; + const { rootId, readOnly } = this.props; const details = blockStore.getDetails(rootId, rootId); const { iconEmoji, iconImage } = details; return ( - + ); }; diff --git a/src/ts/component/editor/page.tsx b/src/ts/component/editor/page.tsx index b99716ce2a..e24767712b 100644 --- a/src/ts/component/editor/page.tsx +++ b/src/ts/component/editor/page.tsx @@ -6,7 +6,6 @@ import { commonStore, blockStore } from 'ts/store'; import { I, C, M, Key, Util, DataUtil, SmileUtil, Mark, focus, keyboard, crumbs, Storage, Mapper, Action } from 'ts/lib'; import { observer } from 'mobx-react'; import { throttle } from 'lodash'; - import Controls from './controls'; interface Props extends RouteComponentProps { @@ -444,7 +443,7 @@ class EditorPage extends React.Component { const { selection } = dataset || {}; const { focused } = focus; - if (keyboard.isFocused) { + if (keyboard.isFocused || !selection) { return; }; diff --git a/src/ts/component/header/main/edit.tsx b/src/ts/component/header/main/edit.tsx index 33439b596b..306d35bfc4 100644 --- a/src/ts/component/header/main/edit.tsx +++ b/src/ts/component/header/main/edit.tsx @@ -41,7 +41,7 @@ class HeaderMainEdit extends React.Component { const details = blockStore.getDetails(breadcrumbs, rootId); const { iconEmoji, iconImage, name } = details; - const cn = [ 'header', 'headerMainEditSearch' ]; + const cn = [ 'header', 'headerMainEdit' ]; if (commonStore.popupIsOpen('navigation')) { cn.push('active'); diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx new file mode 100644 index 0000000000..6a5e69f744 --- /dev/null +++ b/src/ts/component/header/main/history.tsx @@ -0,0 +1,35 @@ +import * as React from 'react'; +import { RouteComponentProps } from 'react-router'; +import { observer } from 'mobx-react'; + +interface Props extends RouteComponentProps { + rootId: string; +}; + +@observer +class HeaderMainHistory extends React.Component { + + constructor (props: any) { + super(props); + }; + + render () { + return ( +
+
+ left +
+ +
+ mid +
+ +
+ right +
+
+ ); + }; +}; + +export default HeaderMainHistory; \ No newline at end of file diff --git a/src/ts/component/index.tsx b/src/ts/component/index.tsx index 668ab6405a..ee859cda22 100644 --- a/src/ts/component/index.tsx +++ b/src/ts/component/index.tsx @@ -15,6 +15,7 @@ import ListChildren from './list/children'; import HeaderAuth from './header/auth'; import HeaderMainIndex from './header/main/index'; import HeaderMainEdit from './header/main/edit'; +import HeaderMainHistory from './header/main/history'; import HeaderHelpIndex from './header/help/index'; import FooterAuth from './footer/auth'; import FooterMainIndex from './footer/main/index'; @@ -68,6 +69,7 @@ export { HeaderAuth, HeaderMainIndex, HeaderMainEdit, + HeaderMainHistory, HeaderHelpIndex, FooterAuth, FooterMainIndex, diff --git a/src/ts/component/menu/block/more.tsx b/src/ts/component/menu/block/more.tsx index a89d89e3fe..4e811d142f 100644 --- a/src/ts/component/menu/block/more.tsx +++ b/src/ts/component/menu/block/more.tsx @@ -126,6 +126,7 @@ class MenuBlockMore extends React.Component { { id: 'undo', icon: 'undo', name: 'Undo' }, { id: 'redo', icon: 'redo', name: 'Redo' }, { id: 'print', icon: 'print', name: 'Print' }, + { id: 'history', icon: 'history', name: 'History' }, //{ id: 'move', icon: 'move', name: 'Move to' }, //{ id: 'export', icon: 'export', name: 'Export to web' }, ]; @@ -161,7 +162,7 @@ class MenuBlockMore extends React.Component { onClick (e: any, item: any) { const { param, history } = this.props; const { data } = param; - const { blockId, blockIds, rootId, onSelect } = data; + const { blockId, rootId, onSelect } = data; const { breadcrumbs } = blockStore; const block = blockStore.getLeaf(rootId, blockId); @@ -192,9 +193,7 @@ class MenuBlockMore extends React.Component { break; case 'print': - window.setTimeout(() => { - window.print(); - }, 300); + window.setTimeout(() => { window.print(); }, 300); break; case 'export': @@ -204,6 +203,10 @@ class MenuBlockMore extends React.Component { }; }); break; + + case 'history': + history.push('/main/history/' + blockId); + break; case 'move': commonStore.popupOpen('navigation', { diff --git a/src/ts/component/page/index.tsx b/src/ts/component/page/index.tsx index 3e9f199afb..391e63fb26 100644 --- a/src/ts/component/page/index.tsx +++ b/src/ts/component/page/index.tsx @@ -18,6 +18,7 @@ import PageAuthSuccess from './auth/success'; import PageMainIndex from './main/index'; import PageMainEdit from './main/edit'; +import PageMainHistory from './main/history'; const $ = require('jquery'); const raf = require('raf'); @@ -36,6 +37,7 @@ const Components: any = { 'main/index': PageMainIndex, 'main/edit': PageMainEdit, + 'main/history': PageMainHistory, }; interface Props extends RouteComponentProps {}; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx new file mode 100644 index 0000000000..613eacda7f --- /dev/null +++ b/src/ts/component/page/main/history.tsx @@ -0,0 +1,112 @@ +import * as React from 'react'; +import { RouteComponentProps } from 'react-router'; +import { HeaderMainHistory as Header, FooterMainEdit as Footer, Block } from 'ts/component'; +import { blockStore } from 'ts/store'; +import { I, M } from 'ts/lib'; + +interface Props extends RouteComponentProps {}; + +class PageMainHistory extends React.Component { + + refHeader: any = null; + + constructor (props: any) { + super(props); + }; + + render () { + const { history, location, match } = this.props; + const rootId = match.params.id; + const root = blockStore.getLeaf(rootId, rootId); + + if (!root) { + return null; + }; + + const childrenIds = blockStore.getChildrenIds(rootId, rootId); + const children = blockStore.getChildren(rootId, rootId); + const details = blockStore.getDetails(rootId, rootId); + const length = childrenIds.length; + + const withIcon = details.iconEmoji || details.iconImage; + const withCover = (details.coverType != I.CoverType.None) && details.coverId; + const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, childrenIds: [], fields: {}, content: {} }); + + let cn = [ 'editorWrapper' ]; + let icon: any = { id: rootId + '-icon', childrenIds: [], fields: {}, content: {} }; + + if (root.isPageProfile()) { + cn.push('isProfile'); + icon.type = I.BlockType.IconUser; + } else { + icon.type = I.BlockType.IconPage; + }; + + if (root.isPageSet()) { + cn.push('isDataview'); + }; + + icon = new M.Block(icon); + + if (withIcon && withCover) { + cn.push('withIconAndCover'); + } else + if (withIcon) { + cn.push('withIcon'); + } else + if (withCover) { + cn.push('withCover'); + }; + + return ( +
+
{ this.refHeader = ref; }} {...this.props} rootId={rootId} /> +
+
+
+
+ {withIcon ? ( + + ) : ''} + + {children.map((block: I.Block, i: number) => { + return ( + {}} + onKeyUp={() => {}} + onMenuAdd={() => {}} + onPaste={() => {}} + readOnly={true} + /> + ) + })} +
+
+
+
+
+
+ ); + }; + + componentDidMount () { + }; + + componentDidUpdate () { + }; + +}; + +export default PageMainHistory; \ No newline at end of file diff --git a/src/ts/interface/block.tsx b/src/ts/interface/block.tsx index 606e7ac583..c035e1e04e 100644 --- a/src/ts/interface/block.tsx +++ b/src/ts/interface/block.tsx @@ -44,6 +44,7 @@ export interface BlockComponent { dataset?: any; rootId: string; block: I.Block; + readOnly?: boolean; onKeyDown?(e: any, text: string, marks: I.Mark[], range: I.TextRange): void; onKeyUp?(e: any, text: string, marks: I.Mark[], range: I.TextRange): void; }; From e7258ccb82ed224645825a874b3202e78b5edbc8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 12 Aug 2020 12:46:25 +0300 Subject: [PATCH 02/27] #599: readOnly editor --- src/scss/common.scss | 1 + src/ts/component/block/text.tsx | 47 ++++++++++++++------------ src/ts/component/block/title.tsx | 6 ++-- src/ts/component/page/main/history.tsx | 1 + 4 files changed, 30 insertions(+), 25 deletions(-) diff --git a/src/scss/common.scss b/src/scss/common.scss index 4ce8a93115..c0151628e8 100644 --- a/src/scss/common.scss +++ b/src/scss/common.scss @@ -38,6 +38,7 @@ input, textarea, select { font-family: 'Inter'; } .through { pointer-events: none; } .rel { position: relative; } .disabled { opacity: 0.5 !important; cursor: default !important; } +.readOnly { -webkit-user-modify: read-only !important; } .fileWrap { position: relative; overflow: hidden; cursor: pointer; } .fileWrap { diff --git a/src/ts/component/block/text.tsx b/src/ts/component/block/text.tsx index fda2e03f48..b6745e3840 100644 --- a/src/ts/component/block/text.tsx +++ b/src/ts/component/block/text.tsx @@ -9,6 +9,18 @@ import { commonStore, blockStore } from 'ts/store'; import * as Prism from 'prismjs'; import 'prismjs/themes/prism.css'; +interface Props extends I.BlockComponent, RouteComponentProps { + onToggle?(e: any): void; + onFocus?(e: any): void; + onBlur?(e: any): void; + onMenuAdd? (id: string, text: string, range: I.TextRange): void; + onPaste? (e: any): void; +}; + +const { ipcRenderer } = window.require('electron'); +const Constant = require('json/constant.json'); +const $ = require('jquery'); + // Prism languages const langs = [ 'clike', 'c', 'cpp', 'csharp', 'abap', 'arduino', 'bash', 'basic', 'clojure', 'coffeescript', 'dart', 'diff', 'docker', 'elixir', @@ -21,22 +33,6 @@ for (let lang of langs) { require(`prismjs/components/prism-${lang}.js`); }; -interface Props extends RouteComponentProps { - rootId: string; - dataset?: any; - block: I.Block; - onToggle?(e: any): void; - onFocus?(e: any): void; - onBlur?(e: any): void; - onKeyDown?(e: any, text: string, marks: I.Mark[], range: I.TextRange): void; - onMenuAdd? (id: string, text: string, range: I.TextRange): void; - onPaste? (e: any): void; -}; - -const { ipcRenderer } = window.require('electron'); -const Constant = require('json/constant.json'); -const $ = require('jquery'); - @observer class BlockText extends React.Component { @@ -71,14 +67,14 @@ class BlockText extends React.Component { }; render () { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, fields, content } = block; const { text, marks, style, checked, color } = content; let marker: any = null; let placeHolder = Constant.placeHolder.default; let ct = color ? 'textColor textColor-' + color : ''; - let cv: string[] = [ 'value', 'focusable', 'c' + id, ct ]; + let cv: string[] = [ 'value', 'focusable', 'c' + id, ct, (readOnly ? 'readOnly' : '') ]; let additional = null; for (let mark of marks) { @@ -126,7 +122,7 @@ class BlockText extends React.Component {
{ const { onKeyDown, rootId, block } = this.props; const { id } = block; - const { filter } = commonStore; if ( commonStore.menuIsOpen('blockStyle') || @@ -796,9 +791,13 @@ class BlockText extends React.Component { }; onCheck (e: any) { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, content } = block; const { checked } = content; + + if (readOnly) { + return; + }; focus.clear(true); DataUtil.blockSetText(rootId, block, this.getValue(), this.marks, true, () => { @@ -807,9 +806,13 @@ class BlockText extends React.Component { }; onLang (v: string) { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, content } = block; const l = String(content.text || '').length; + + if (readOnly) { + return; + }; C.BlockListSetFields(rootId, [ { blockId: id, fields: { lang: v } }, diff --git a/src/ts/component/block/title.tsx b/src/ts/component/block/title.tsx index 11a37951dc..cdd420cca2 100644 --- a/src/ts/component/block/title.tsx +++ b/src/ts/component/block/title.tsx @@ -36,19 +36,19 @@ class BlockTitle extends React.Component { }; render (): any { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const details = blockStore.getDetails(rootId, rootId); const { id } = block; const name = this.checkName(); - const cv = [ 'value', 'focusable', 'c' + id ]; + const cv = [ 'value', 'focusable', 'c' + id, (readOnly ? 'readOnly' : '') ]; return (
{
{ this.refHeader = ref; }} {...this.props} rootId={rootId} />
+ {withCover ? : ''}
{withIcon ? ( From 1a9c0dcd8781913e2dba035893a1b3502fd1f5e1 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 26 Aug 2020 13:11:34 +0300 Subject: [PATCH 03/27] refactoring, panel --- src/scss/block/common.scss | 2 + src/scss/block/text.scss | 1 + src/scss/component/header.scss | 42 ++++++++------- src/scss/page/main/history.scss | 10 ++++ src/ts/app.tsx | 1 + src/ts/component/block/index.tsx | 4 +- src/ts/component/header/main/edit.tsx | 2 +- src/ts/component/header/main/history.tsx | 2 +- src/ts/component/page/main/history.tsx | 69 +++++++++++++----------- 9 files changed, 78 insertions(+), 55 deletions(-) create mode 100644 src/scss/page/main/history.scss diff --git a/src/scss/block/common.scss b/src/scss/block/common.scss index 42a0eca16b..23944bed02 100644 --- a/src/scss/block/common.scss +++ b/src/scss/block/common.scss @@ -47,6 +47,8 @@ } .block > .wrapContent > .children > .block.last { margin: 0px; } + + .block.isReadOnly > .wrapMenu > .icon.dnd { display: none; } .block.align0 > .wrapContent { text-align: left; } .block.align1 > .wrapContent { text-align: center; } diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index b982e01e90..2dd5ae171b 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -5,6 +5,7 @@ .block.blockText { .wrap { flex: auto; position: relative; padding: 0px; width: 100%; } .value { -webkit-user-modify: read-write-plaintext-only; width: 100%; overflow: hidden; } + .value:empty { height: 24px; } .placeHolder { color: $colorDarkGrey; position: absolute; z-index: 0; left: 0px; top: 0px; display: none; overflow: hidden; width: 100%; height: 100%; cursor: text; pointer-events: none; diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index d100fcd1c0..23ed222b3f 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -6,8 +6,8 @@ .icon.back { margin-right: 8px; } .icon.logo { - width: 60px; height: 13px; position: absolute; left: 50%; margin-left: -30px; top: 13px; background: url('~img/logo.svg') no-repeat; - background-position: center center; + width: 60px !important; height: 13px !important; position: absolute; left: 50%; margin-left: -30px; top: 13px; background: url('~img/logo.svg') no-repeat; + background-position: center center; background-size: 100% 100% !important; } .path { white-space: nowrap; } @@ -51,28 +51,17 @@ } } -.headerMainIndex { height: 38px; background: rgba(44,43,39,0.1); } -.headerMainIndex { +.header.headerMainIndex { height: 38px; background: rgba(44,43,39,0.1); } +.header.headerMainIndex { .icon { width: 40px; height: 28px; background-size: 20px 20px; border-radius: 6px; } .icon:hover { background-color: rgba(0,0,0,0.15); } } -.headerMainEdit { background: #fff; padding: 5px 10px; height: 38px; line-height: 20px; } -.headerMainEdit { +.header.headerMainEdit { background: #fff; padding: 5px 10px; height: 38px; line-height: 20px; } +.header.headerMainEdit { .icon { width: 40px; height: 28px; background-size: 20px 20px; border-radius: 6px; } .icon:hover { background-color: #f3f2ec; } - .mid { width: 492px; height: 28px; position: absolute; left: 50%; margin-left: -246px; top: 5px; white-space: nowrap; } - .mid { - .icon { margin: 0px; opacity: 0; } - .icon.plus { - .arrow { - width: 8px; height: 8px; background-image: url('~img/icon/header/arrow.svg'); position: absolute; right: -12px; - top: 10px; margin: 0px; background-color: none !important; background-size: 100% 100%; - } - } - } - .path { border: 1px solid #fff; border-radius: 6px; display: inline-block; vertical-align: top; height: 28px; margin: 0px 6px; line-height: 24px; width: 400px; text-align: center; transition: $transitionFast; -webkit-app-region: no-drag; @@ -88,17 +77,30 @@ .icon { margin: 0px; } .icon.back, .icon.forward { width: 32px; } } + + .side.center { width: 492px; height: 28px; position: absolute; left: 50%; margin-left: -246px; top: 5px; white-space: nowrap; } + .side.center { + .icon { margin: 0px; opacity: 0; } + .icon.plus { + .arrow { + width: 8px; height: 8px; background-image: url('~img/icon/header/arrow.svg'); position: absolute; right: -12px; + top: 10px; margin: 0px; background-color: none !important; background-size: 100% 100%; + } + } + } } +.header.headerMainHistory { width: calc(100% - 254px); background: #fff; } + body.platformMac { - .headerMainEdit { + .header.headerMainEdit, .header.headerMainHistory { .side.left { left: 90px; } } } -.headerMainEdit:hover, .headerMainEdit.active { +.header.headerMainEdit:hover, .header.headerMainEdit.active { .side.left { opacity: 1; } - .mid { + .side.center { .icon { opacity: 1; } .icon.dis { opacity: 0.5; } } diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss new file mode 100644 index 0000000000..0cef5f49ef --- /dev/null +++ b/src/scss/page/main/history.scss @@ -0,0 +1,10 @@ +@import "~scss/_vars"; + +.pageMainHistory { + .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); } + .wrapper > .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } + + .panel { width: 254px; background: #fff; border-left: 1px solid #dfddd0; } + + .blockLast { height: 100px; } +} \ No newline at end of file diff --git a/src/ts/app.tsx b/src/ts/app.tsx index 7c5b89381a..98e95af258 100644 --- a/src/ts/app.tsx +++ b/src/ts/app.tsx @@ -43,6 +43,7 @@ import 'scss/component/pin.scss'; import 'scss/page/auth.scss'; import 'scss/page/main/index.scss'; import 'scss/page/main/edit.scss'; +import 'scss/page/main/history.scss'; import 'scss/block/common.scss'; import 'scss/block/dataview.scss'; diff --git a/src/ts/component/block/index.tsx b/src/ts/component/block/index.tsx index 170e1a1337..6e9eda3ef2 100644 --- a/src/ts/component/block/index.tsx +++ b/src/ts/component/block/index.tsx @@ -62,13 +62,13 @@ class Block extends React.Component { }; render () { - const { rootId, cnt, css, index, className, block } = this.props; + const { rootId, cnt, css, index, className, block, readOnly } = this.props; const { id, type, fields, content, align, bgColor } = block; const { style, checked } = content || {}; const childrenIds = blockStore.getChildrenIds(rootId, id); let canSelect = true; - let cn: string[] = [ 'block', (index ? 'index-' + index : ''), 'align' + align ]; + let cn: string[] = [ 'block', (index ? 'index-' + index : ''), 'align' + align, (readOnly ? 'isReadOnly' : '')]; let cd: string[] = [ 'wrapContent' ]; let blockComponent = null; let empty = null; diff --git a/src/ts/component/header/main/edit.tsx b/src/ts/component/header/main/edit.tsx index 306d35bfc4..a4065a8ce1 100644 --- a/src/ts/component/header/main/edit.tsx +++ b/src/ts/component/header/main/edit.tsx @@ -55,7 +55,7 @@ class HeaderMainEdit extends React.Component {
-
+
{ this.onNavigation(e, true); }} />
{ this.onNavigation(e, false); }} onMouseOver={this.onPathOver} onMouseOut={this.onPathOut}> diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx index 6a5e69f744..d477fd6121 100644 --- a/src/ts/component/header/main/history.tsx +++ b/src/ts/component/header/main/history.tsx @@ -20,7 +20,7 @@ class HeaderMainHistory extends React.Component { left
-
+
mid
diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index f40013f1dd..07ee351d86 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { RouteComponentProps } from 'react-router'; -import { HeaderMainHistory as Header, FooterMainEdit as Footer, Block } from 'ts/component'; +import { HeaderMainHistory as Header, Block } from 'ts/component'; import { blockStore } from 'ts/store'; import { I, M } from 'ts/lib'; @@ -61,43 +61,50 @@ class PageMainHistory extends React.Component { return (
{ this.refHeader = ref; }} {...this.props} rootId={rootId} /> -
-
- {withCover ? : ''} -
-
- {withIcon ? ( - - ) : ''} - - {children.map((block: I.Block, i: number) => { - return ( +
+
+
+ {withCover ? : ''} +
+
+ {withIcon ? ( {}} - onKeyUp={() => {}} - onMenuAdd={() => {}} - onPaste={() => {}} + block={icon} + className="root" readOnly={true} - /> - ) - })} + /> + ) : ''} + + {children.map((block: I.Block, i: number) => { + return ( + {}} + onKeyUp={() => {}} + onMenuAdd={() => {}} + onPaste={() => {}} + readOnly={true} + /> + ) + })} +
+ +
+ +
+ +
-
); }; From 7e2b9113d7c8673da4e077830844067245d945c0 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 26 Aug 2020 14:35:24 +0300 Subject: [PATCH 04/27] #599: several design and logic fixes --- src/img/arrow/history0.svg | 3 ++ src/img/arrow/history1.svg | 3 ++ src/img/icon/menu/action/history0.svg | 10 ++++++ src/scss/component/header.scss | 40 ++++++++++++++++++++---- src/scss/menu/block/icon.scss | 1 + src/scss/page/main/history.scss | 2 +- src/ts/component/header/main/history.tsx | 24 +++++++++++--- src/ts/component/menu/block/more.tsx | 2 +- src/ts/component/page/main/history.tsx | 15 +++++++-- src/ts/lib/command.tsx | 18 +++++++++++ 10 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 src/img/arrow/history0.svg create mode 100644 src/img/arrow/history1.svg create mode 100644 src/img/icon/menu/action/history0.svg diff --git a/src/img/arrow/history0.svg b/src/img/arrow/history0.svg new file mode 100644 index 0000000000..3ee27e94b6 --- /dev/null +++ b/src/img/arrow/history0.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/img/arrow/history1.svg b/src/img/arrow/history1.svg new file mode 100644 index 0000000000..64078b426c --- /dev/null +++ b/src/img/arrow/history1.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/img/icon/menu/action/history0.svg b/src/img/icon/menu/action/history0.svg new file mode 100644 index 0000000000..86fa73504e --- /dev/null +++ b/src/img/icon/menu/action/history0.svg @@ -0,0 +1,10 @@ + + + + + + + + + + \ No newline at end of file diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index 23ed222b3f..82c6943c75 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -45,7 +45,13 @@ .icon.add { background-image: url('~img/icon/header/add.svg'); } .icon.settings { background-image: url('~img/icon/header/settings.svg'); } - .side.right { position: absolute; top: 5px; right: 6px; } + .side { position: absolute; top: 5px; height: 28px; line-height: 28px; } + + .side.left { left: 6px; } + + .side.center { width: 492px; height: 28px; left: 50%; margin-left: -246px; white-space: nowrap; } + + .side.right { right: 6px; } .side.right { .icon { margin: 0px; } } @@ -71,14 +77,12 @@ } .path * { pointer-events: all; } - .side { position: absolute; top: 5px; } - .side.left { left: 6px; opacity: 0; transition: $transitionFast; } + .side.left { opacity: 0; transition: $transitionFast; } .side.left { .icon { margin: 0px; } .icon.back, .icon.forward { width: 32px; } } - .side.center { width: 492px; height: 28px; position: absolute; left: 50%; margin-left: -246px; top: 5px; white-space: nowrap; } .side.center { .icon { margin: 0px; opacity: 0; } .icon.plus { @@ -90,12 +94,36 @@ } } -.header.headerMainHistory { width: calc(100% - 254px); background: #fff; } +.header.headerMainHistory { height: 38px; line-height: 22px; padding: 8px 16px; width: calc(100% - 254px); background: #fff; } +.header.headerMainHistory { + .side { height: 20px; top: 8px; } + .side.center { text-align: center; } + .side.right { right: 16px; } + + .side { + .item { color: #6c6a5f; transition: $transitionFast; cursor: pointer; height: 20px; line-height: 20px; } + .item { + .icon.arrow { background-image: url('~img/arrow/history0.svg'); margin: 0px; } + } + .item.orange { color: #e89d00; font-weight: 500; } + + .item.grey:hover { color: $colorBlack; } + .item.orange:hover { color: $colorBlack; } + + .item:hover { + .icon.arrow { background-image: url('~img/arrow/history1.svg'); } + } + } +} body.platformMac { - .header.headerMainEdit, .header.headerMainHistory { + .header { .side.left { left: 90px; } } + + .header.headerMainHistory { + .side.left { left: 80px; } + } } .header.headerMainEdit:hover, .header.headerMainEdit.active { diff --git a/src/scss/menu/block/icon.scss b/src/scss/menu/block/icon.scss index a349393912..a0dee88aa6 100644 --- a/src/scss/menu/block/icon.scss +++ b/src/scss/menu/block/icon.scss @@ -48,6 +48,7 @@ .icon.undo { background-image: url('~img/icon/menu/action/undo0.svg'); } .icon.redo { background-image: url('~img/icon/menu/action/redo0.svg'); } .icon.print { background-image: url('~img/icon/menu/action/print0.svg'); } + .icon.history { background-image: url('~img/icon/menu/action/history0.svg'); } .icon.align.left { background-image: url('~img/icon/menu/align/left.svg'); } .icon.align.center { background-image: url('~img/icon/menu/align/center.svg'); } diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 0cef5f49ef..58210deb89 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -4,7 +4,7 @@ .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); } .wrapper > .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } - .panel { width: 254px; background: #fff; border-left: 1px solid #dfddd0; } + .panel { width: 254px; border-left: 1px solid #dfddd0; } .blockLast { height: 100px; } } \ No newline at end of file diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx index d477fd6121..15cc10d56c 100644 --- a/src/ts/component/header/main/history.tsx +++ b/src/ts/component/header/main/history.tsx @@ -1,6 +1,8 @@ import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { observer } from 'mobx-react'; +import { Icon } from 'ts/component'; +import { DataUtil } from '../../../lib'; interface Props extends RouteComponentProps { rootId: string; @@ -11,25 +13,39 @@ class HeaderMainHistory extends React.Component { constructor (props: any) { super(props); + + this.onBack = this.onBack.bind(this); + this.onRestore = this.onRestore.bind(this); }; render () { return (
- left +
+ Current version +
- mid +
18 July 2020, 16:02
-
- right +
+
Restore version
); }; + + onBack(e: any) { + const { rootId } = this.props; + DataUtil.pageOpen(e, rootId); + }; + + onRestore (e: any) { + }; + }; export default HeaderMainHistory; \ No newline at end of file diff --git a/src/ts/component/menu/block/more.tsx b/src/ts/component/menu/block/more.tsx index 86365122f5..71cbacc717 100644 --- a/src/ts/component/menu/block/more.tsx +++ b/src/ts/component/menu/block/more.tsx @@ -127,7 +127,7 @@ class MenuBlockMore extends React.Component { { id: 'undo', icon: 'undo', name: 'Undo' }, { id: 'redo', icon: 'redo', name: 'Redo' }, { id: 'print', icon: 'print', name: 'Print' }, - { id: 'history', icon: 'history', name: 'History' }, + { id: 'history', icon: 'history', name: 'Version history' }, //{ id: 'move', icon: 'move', name: 'Move to' }, //{ id: 'export', icon: 'export', name: 'Export to web' }, ]; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 07ee351d86..d7534a3948 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -2,13 +2,14 @@ import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { HeaderMainHistory as Header, Block } from 'ts/component'; import { blockStore } from 'ts/store'; -import { I, M } from 'ts/lib'; +import { I, M, C } from 'ts/lib'; interface Props extends RouteComponentProps {}; class PageMainHistory extends React.Component { refHeader: any = null; + versionId: string = ''; constructor (props: any) { super(props); @@ -109,11 +110,21 @@ class PageMainHistory extends React.Component { ); }; - componentDidMount () { + componentDidMount() { + this.loadList(); }; componentDidUpdate () { }; + + loadList () { + const { match } = this.props; + const rootId = match.params.id; + + C.HistoryVersions(rootId, '', 100, (message: any) => { + + }); + }; }; diff --git a/src/ts/lib/command.tsx b/src/ts/lib/command.tsx index 4241dabde9..ab829cabec 100644 --- a/src/ts/lib/command.tsx +++ b/src/ts/lib/command.tsx @@ -556,6 +556,22 @@ const BlockSetDataviewActiveView = (contextId: string, blockId: string, viewId: dispatcher.request('blockSetDataviewActiveView', request, callBack); }; +const HistoryVersions = (pageId: string, lastVersionId: string, limit: number, callBack?: (message: any) => void) => { + const request = new Rpc.History.Versions.Request(); + + request.setPageid(pageId); + request.setLastversionid(lastVersionId); + request.setLimit(limit); + + dispatcher.request('historyVersions', request, callBack); +}; + +/* +HistoryVersions(pageId, lastVersionId, limit) +HistoryShow(pageId, versionId) +HistorySetVersion(pageId, versionId); +*/ + export { VersionGet, @@ -625,4 +641,6 @@ export { BlockListSetAlign, BlockListSetPageIsArchived, BlockListDeletePage, + + HistoryVersions, }; From 15a06466511e74a4ea106ecdc183a419cf21a4c8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 26 Aug 2020 19:06:53 +0300 Subject: [PATCH 05/27] history blocks rendering and loading --- src/scss/component/header.scss | 4 +- src/scss/page/main/history.scss | 17 +++- src/ts/component/page/main/edit.tsx | 1 - src/ts/component/page/main/history.tsx | 118 +++++++++++++++++++++---- src/ts/lib/command.tsx | 14 ++- src/ts/lib/dispatcher.tsx | 61 ++++++------- src/ts/lib/mapper.tsx | 39 +++++--- src/ts/lib/response.tsx | 24 +++++ src/ts/lib/util.tsx | 2 +- src/ts/store/block.tsx | 2 +- 10 files changed, 215 insertions(+), 67 deletions(-) diff --git a/src/scss/component/header.scss b/src/scss/component/header.scss index 82c6943c75..7685e4cd55 100644 --- a/src/scss/component/header.scss +++ b/src/scss/component/header.scss @@ -47,11 +47,11 @@ .side { position: absolute; top: 5px; height: 28px; line-height: 28px; } - .side.left { left: 6px; } + .side.left { left: 6px; z-index: 1; } .side.center { width: 492px; height: 28px; left: 50%; margin-left: -246px; white-space: nowrap; } - .side.right { right: 6px; } + .side.right { right: 6px; z-index: 1; } .side.right { .icon { margin: 0px; } } diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 58210deb89..f84e0f6e8d 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -4,7 +4,22 @@ .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); } .wrapper > .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } - .panel { width: 254px; border-left: 1px solid #dfddd0; } + .block.blockCover { width: calc(100% - 254px - 48px); } + + .list { width: 254px; border-left: 1px solid #dfddd0; position: relative; z-index: 10; background: #fff; } + .list { + .section { padding: 11px 16px; } + .section { + .date { text-transform: uppercase; @include text-very-small; } + } + + .item { padding: 5px 16px; cursor: pointer; transition: $transitionFast; } + .item { + .name { @include text-small; color: #6c6a5f; } + } + + .item:hover { background: #f3f2ec; } + } .blockLast { height: 100px; } } \ No newline at end of file diff --git a/src/ts/component/page/main/edit.tsx b/src/ts/component/page/main/edit.tsx index b447d7fbb1..49de9019a6 100644 --- a/src/ts/component/page/main/edit.tsx +++ b/src/ts/component/page/main/edit.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import * as ReactDOM from 'react-dom'; import { RouteComponentProps } from 'react-router'; import { Storage } from 'ts/lib'; import { HeaderMainEdit as Header, FooterMainEdit as Footer, DragProvider, SelectionProvider, EditorPage } from 'ts/component'; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index d7534a3948..d8f814dbc9 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -2,33 +2,52 @@ import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { HeaderMainHistory as Header, Block } from 'ts/component'; import { blockStore } from 'ts/store'; -import { I, M, C } from 'ts/lib'; +import { I, M, C, Util, dispatcher } from 'ts/lib'; +import { observer } from 'mobx-react'; -interface Props extends RouteComponentProps {}; +interface Props extends RouteComponentProps { }; +interface VersionItem { + id: string; + previousIds: string[]; + authorId: string; + authorName: string; + time: number; +}; -class PageMainHistory extends React.Component { +interface State { + versions: VersionItem[]; +}; + +@observer +class PageMainHistory extends React.Component { + + state = { + versions: [] as VersionItem[], + }; - refHeader: any = null; versionId: string = ''; + refHeader: any = null; constructor (props: any) { super(props); }; render () { - const { history, location, match } = this.props; + const { match } = this.props; + const { versions } = this.state; + const rootId = match.params.id; const root = blockStore.getLeaf(rootId, rootId); - - if (!root) { - return null; - }; + + console.log('RENDER', rootId, root, blockStore.blockObject); const childrenIds = blockStore.getChildrenIds(rootId, rootId); const children = blockStore.getChildren(rootId, rootId); const details = blockStore.getDetails(rootId, rootId); const length = childrenIds.length; + console.log(childrenIds, length); + const withIcon = details.iconEmoji || details.iconImage; const withCover = (details.coverType != I.CoverType.None) && details.coverId; const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, childrenIds: [], fields: {}, content: {} }); @@ -36,14 +55,14 @@ class PageMainHistory extends React.Component { let cn = [ 'editorWrapper' ]; let icon: any = { id: rootId + '-icon', childrenIds: [], fields: {}, content: {} }; - if (root.isPageProfile()) { + if (root && root.isPageProfile()) { cn.push('isProfile'); icon.type = I.BlockType.IconUser; } else { icon.type = I.BlockType.IconPage; }; - if (root.isPageSet()) { + if (root && root.isPageSet()) { cn.push('isDataview'); }; @@ -59,6 +78,27 @@ class PageMainHistory extends React.Component { cn.push('withCover'); }; + const Section = (item: any) => ( + +
+
{item.id}
+
+ +
+ {item.list.map((item: any, i: number) => { + return + })} +
+ + ); + + const Version = (item: any) => ( +
{ this.loadVersion(item.id); }}> +
{Util.date('d F Y, H:i', item.time)}
+
Emmy Noether
+
+ ); + return (
{ this.refHeader = ref; }} {...this.props} rootId={rootId} /> @@ -102,30 +142,74 @@ class PageMainHistory extends React.Component {
-
- +
+ {versions.map((item: any, i: number) => { + return
+ })}
); }; - componentDidMount() { + componentDidMount () { this.loadList(); }; - componentDidUpdate () { - }; - loadList () { const { match } = this.props; const rootId = match.params.id; C.HistoryVersions(rootId, '', 100, (message: any) => { + if (message.error.code || !message.versions.length) { + return; + }; + this.setState({ versions: this.groupData(message.versions) }); + + if (!this.versionId) { + this.loadVersion(message.versions[0].id); + }; + }); + }; + + loadVersion (id: string) { + const { match } = this.props; + const rootId = match.params.id; + + this.versionId = id; + + C.HistoryShow(rootId, id, (message: any) => { + let bs = message.blockShow; + dispatcher.onBlockShow(rootId, bs.type, bs.blocks, bs.details); + + this.forceUpdate(); }); }; + groupData (versions: any[]) { + let groups: any[] = []; + + versions.reverse(); + + for (let item of versions) { + let groupId = Util.date('F Y', item.time); + let group = groups.find((it: any) => { return it.id == groupId; }); + + if (!group) { + group = { + id: Util.date('F Y', item.time), + list: [], + }; + groups.push(group); + }; + + group.list.push(item); + }; + + return groups; + }; + }; export default PageMainHistory; \ No newline at end of file diff --git a/src/ts/lib/command.tsx b/src/ts/lib/command.tsx index ab829cabec..eecd9a0216 100644 --- a/src/ts/lib/command.tsx +++ b/src/ts/lib/command.tsx @@ -566,9 +566,16 @@ const HistoryVersions = (pageId: string, lastVersionId: string, limit: number, c dispatcher.request('historyVersions', request, callBack); }; +const HistoryShow = (pageId: string, versionId: string, callBack?: (message: any) => void) => { + const request = new Rpc.History.Show.Request(); + + request.setPageid(pageId); + request.setVersionid(versionId); + + dispatcher.request('historyShow', request, callBack); +}; + /* -HistoryVersions(pageId, lastVersionId, limit) -HistoryShow(pageId, versionId) HistorySetVersion(pageId, versionId); */ @@ -642,5 +649,6 @@ export { BlockListSetPageIsArchived, BlockListDeletePage, - HistoryVersions, + HistoryVersions, + HistoryShow, }; diff --git a/src/ts/lib/dispatcher.tsx b/src/ts/lib/dispatcher.tsx index 5c875d821b..1b6b5e174f 100644 --- a/src/ts/lib/dispatcher.tsx +++ b/src/ts/lib/dispatcher.tsx @@ -165,36 +165,8 @@ class Dispatcher { break; case 'blockShow': - blocks = data.getBlocksList() || []; - let details = data.getDetailsList() || []; - - blocks = blocks.map((it: any) => { - it = Mapper.From.Block(it); - if (it.id == rootId) { - it.type = I.BlockType.Page; - it.pageType = data.getType(); - }; - return new M.Block(it); - }); - - block = blocks.find((it: I.Block) => { return it.id == rootId; }); - if (!block) { - break; - }; - - if (block.canHaveTitle()) { - block.childrenIds.unshift(rootId + '-title'); - blocks.unshift(new M.Block({ - id: rootId + '-title', - type: I.BlockType.Title, - childrenIds: [], - fields: {}, - content: {}, - })); - }; - - blockStore.blocksSet(rootId, blocks); - blockStore.detailsSet(rootId, details); + let res = Response.BlockShow(data); + this.onBlockShow(rootId, res.type, res.blocks, res.details); break; case 'blockAdd': @@ -517,6 +489,35 @@ class Dispatcher { return 0; }; + onBlockShow (rootId: string, type: number, blocks: any[], details: any[]) { + blocks = blocks.map((it: any) => { + if (it.id == rootId) { + it.type = I.BlockType.Page; + it.pageType = type; + }; + return new M.Block(it); + }); + + let root = blocks.find((it: I.Block) => { return it.id == rootId; }); + if (!root) { + return; + }; + + if (root.canHaveTitle()) { + root.childrenIds.unshift(rootId + '-title'); + blocks.unshift(new M.Block({ + id: rootId + '-title', + type: I.BlockType.Title, + childrenIds: [], + fields: {}, + content: {}, + })); + }; + + blockStore.blocksSet(rootId, blocks); + blockStore.detailsSet(rootId, details); + }; + public request (type: string, data: any, callBack?: (message: any) => void) { const { config } = commonStore; const upper = Util.toUpperCamelCase(type); diff --git a/src/ts/lib/mapper.tsx b/src/ts/lib/mapper.tsx index 2be05eed53..2af319eddb 100644 --- a/src/ts/lib/mapper.tsx +++ b/src/ts/lib/mapper.tsx @@ -67,6 +67,13 @@ const Mapper = { if (v == ContentCase.DATAVIEW) t = I.BlockType.Dataview; return t; }, + + Details: (obj: any) => { + return { + id: obj.getId(), + details: Decode.decodeStruct(obj.getDetails()), + }; + }, Block: (obj: any): I.Block => { let type = Mapper.From.BlockType(obj.getContentCase()); @@ -233,6 +240,16 @@ const Mapper = { return observable(new M.View(view)); }, + HistoryVersionItem: (obj: any) => { + return { + id: obj.getId(), + previousIds: obj.getPreviousidsList() || [], + authorId: obj.getAuthorid(), + authorName: obj.getAuthorname(), + time: obj.getTime(), + }; + }, + }, //------------------------------------------------------------ @@ -376,26 +393,26 @@ const Mapper = { return item; }, - View: (view: I.View) => { - view = Util.objectCopy(new M.View(view)); + View: (obj: I.View) => { + obj = Util.objectCopy(new M.View(obj)); const item = new Model.Block.Content.Dataview.View(); - item.setId(view.id); - item.setName(view.name); - item.setType(view.type); - item.setRelationsList(view.relations.map(Mapper.To.ViewRelation)); - item.setFiltersList(view.filters.map(Mapper.To.Filter)); - item.setSortsList(view.sorts.map(Mapper.To.Sort)); + item.setId(obj.id); + item.setName(obj.name); + item.setType(obj.type); + item.setRelationsList(obj.relations.map(Mapper.To.ViewRelation)); + item.setFiltersList(obj.filters.map(Mapper.To.Filter)); + item.setSortsList(obj.sorts.map(Mapper.To.Sort)); return item; }, - PasteFile: (file: any) => { + PasteFile: (obj: any) => { const item = new Rpc.Block.Paste.Request.File(); - item.setName(file.name); - item.setData(file.data); + item.setName(obj.name); + item.setData(obj.data); return item; }, diff --git a/src/ts/lib/response.tsx b/src/ts/lib/response.tsx index 7f7bf52d97..2fabe154d6 100644 --- a/src/ts/lib/response.tsx +++ b/src/ts/lib/response.tsx @@ -104,6 +104,15 @@ const BlockOpen = (response: any) => { return {}; }; +const BlockShow = (response: any) => { + return { + rootId: response.getRootid(), + type: response.getType(), + blocks: (response.getBlocksList() || []).map(Mapper.From.Block), + details: (response.getDetailsList() || []).map(Mapper.From.Details), + }; +}; + const BlockOpenBreadcrumbs = (response: any) => { return { blockId: response.getBlockid(), @@ -291,6 +300,18 @@ const BlockSetDataviewActiveView = (response: any) => { return {}; }; +const HistoryVersions = (response: any) => { + return { + versions: (response.getVersionsList() || []).map(Mapper.From.HistoryVersionItem), + }; +}; + +const HistoryShow = (response: any) => { + return { + blockShow: this.BlockShow(response.getBlockshow()), + }; +}; + export { VersionGet, @@ -319,6 +340,7 @@ export { BlockOpen, BlockOpenBreadcrumbs, BlockSetBreadcrumbs, + BlockShow, BlockUnlink, BlockClose, @@ -365,4 +387,6 @@ export { BlockListSetAlign, BlockListDeletePage, + HistoryVersions, + HistoryShow, }; diff --git a/src/ts/lib/util.tsx b/src/ts/lib/util.tsx index ea252213bd..e160b6c7c4 100644 --- a/src/ts/lib/util.tsx +++ b/src/ts/lib/util.tsx @@ -247,8 +247,8 @@ class Util { } else { return s; }; - return false; }; + const f: any = { // Day d: () => { diff --git a/src/ts/store/block.tsx b/src/ts/store/block.tsx index ad25b1702f..ae870814c7 100644 --- a/src/ts/store/block.tsx +++ b/src/ts/store/block.tsx @@ -60,7 +60,7 @@ class BlockStore { let map = observable(new Map()); for (let item of details) { - map.set(item.getId(), Decode.decodeStruct(item.getDetails())); + map.set(item.id, item.details); }; intercept(map as any, (change: any) => { From 9130b6ec004c3e78d725051690823e07a09dbee3 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 08:01:29 +0300 Subject: [PATCH 06/27] #599: scroll bars and loader --- src/scss/page/main/history.scss | 7 +++--- src/ts/component/page/main/history.tsx | 34 ++++++++++++++++++++------ 2 files changed, 30 insertions(+), 11 deletions(-) diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index f84e0f6e8d..d9d07bc3d8 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -1,12 +1,13 @@ @import "~scss/_vars"; .pageMainHistory { - .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); } - .wrapper > .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } + #body { overflow: hidden; } + .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); overflow: auto; } + .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } .block.blockCover { width: calc(100% - 254px - 48px); } - .list { width: 254px; border-left: 1px solid #dfddd0; position: relative; z-index: 10; background: #fff; } + .list { width: 254px; border-left: 1px solid #dfddd0; position: relative; z-index: 10; background: #fff; overflow: auto; } .list { .section { padding: 11px 16px; } .section { diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index d8f814dbc9..2c376ba6fa 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; +import * as ReactDOM from 'react-dom'; import { RouteComponentProps } from 'react-router'; -import { HeaderMainHistory as Header, Block } from 'ts/component'; +import { HeaderMainHistory as Header, Block, Loader } from 'ts/component'; import { blockStore } from 'ts/store'; import { I, M, C, Util, dispatcher } from 'ts/lib'; import { observer } from 'mobx-react'; @@ -18,6 +19,8 @@ interface State { versions: VersionItem[]; }; +const $ = require('jquery'); + @observer class PageMainHistory extends React.Component { @@ -36,18 +39,21 @@ class PageMainHistory extends React.Component { const { match } = this.props; const { versions } = this.state; + if (!this.versionId) { + return ; + }; + const rootId = match.params.id; const root = blockStore.getLeaf(rootId, rootId); - - console.log('RENDER', rootId, root, blockStore.blockObject); + if (!root) { + return ; + }; const childrenIds = blockStore.getChildrenIds(rootId, rootId); const children = blockStore.getChildren(rootId, rootId); const details = blockStore.getDetails(rootId, rootId); const length = childrenIds.length; - console.log(childrenIds, length); - const withIcon = details.iconEmoji || details.iconImage; const withCover = (details.coverType != I.CoverType.None) && details.coverId; const cover = new M.Block({ id: rootId + '-cover', type: I.BlockType.Cover, childrenIds: [], fields: {}, content: {} }); @@ -102,8 +108,8 @@ class PageMainHistory extends React.Component { return (
{ this.refHeader = ref; }} {...this.props} rootId={rootId} /> -
-
+
+
{withCover ? : ''}
@@ -142,7 +148,7 @@ class PageMainHistory extends React.Component {
-
+
{versions.map((item: any, i: number) => { return
})} @@ -154,6 +160,7 @@ class PageMainHistory extends React.Component { componentDidMount () { this.loadList(); + this.resize(); }; loadList () { @@ -210,6 +217,17 @@ class PageMainHistory extends React.Component { return groups; }; + resize () { + const win = $(window); + const node = $(ReactDOM.findDOMNode(this)); + const sideLeft = node.find('#sideLeft'); + const sideRight = node.find('#sideRight'); + const height = win.height(); + + sideLeft.css({ height: height }); + sideRight.css({ height: height }); + }; + }; export default PageMainHistory; \ No newline at end of file From f2af04dfc66fab7b2828563d924b5250579bd626 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 08:09:56 +0300 Subject: [PATCH 07/27] #599: HistorySetVersion integration --- src/ts/component/header/main/history.tsx | 11 +++++++++-- src/ts/component/page/main/history.tsx | 21 +++++---------------- src/ts/interface/common.tsx | 8 ++++++++ src/ts/interface/index.tsx | 3 ++- src/ts/lib/command.tsx | 16 +++++++++++----- src/ts/lib/response.tsx | 6 ++++++ 6 files changed, 41 insertions(+), 24 deletions(-) diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx index 15cc10d56c..17ad489863 100644 --- a/src/ts/component/header/main/history.tsx +++ b/src/ts/component/header/main/history.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import { RouteComponentProps } from 'react-router'; import { observer } from 'mobx-react'; import { Icon } from 'ts/component'; -import { DataUtil } from '../../../lib'; +import { DataUtil, I } from 'ts/lib'; +import { C } from '../../../lib'; interface Props extends RouteComponentProps { rootId: string; + version: I.Version; }; @observer @@ -43,7 +45,12 @@ class HeaderMainHistory extends React.Component { DataUtil.pageOpen(e, rootId); }; - onRestore (e: any) { + onRestore (e: any) { + const { rootId, version } = this.props; + + C.HistorySetVersion(rootId, version.id, (message: any) => { + DataUtil.pageOpen(e, rootId); + }); }; }; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 2c376ba6fa..e6d62fcf56 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -7,16 +7,9 @@ import { I, M, C, Util, dispatcher } from 'ts/lib'; import { observer } from 'mobx-react'; interface Props extends RouteComponentProps { }; -interface VersionItem { - id: string; - previousIds: string[]; - authorId: string; - authorName: string; - time: number; -}; interface State { - versions: VersionItem[]; + versions: I.Version[]; }; const $ = require('jquery'); @@ -25,7 +18,7 @@ const $ = require('jquery'); class PageMainHistory extends React.Component { state = { - versions: [] as VersionItem[], + versions: [] as I.Version[], }; versionId: string = ''; @@ -38,14 +31,10 @@ class PageMainHistory extends React.Component { render () { const { match } = this.props; const { versions } = this.state; - - if (!this.versionId) { - return ; - }; - const rootId = match.params.id; + const root = blockStore.getLeaf(rootId, rootId); - if (!root) { + if (!this.versionId || !root) { return ; }; @@ -107,7 +96,7 @@ class PageMainHistory extends React.Component { return (
-
{ this.refHeader = ref; }} {...this.props} rootId={rootId} /> +
{ this.refHeader = ref; }} {...this.props} rootId={rootId} version={{ id: this.versionId, previousIds: [], authorId: '', authorName: '', time: 0 }} />
diff --git a/src/ts/interface/common.tsx b/src/ts/interface/common.tsx index f7be730eaa..fd5249ac35 100644 --- a/src/ts/interface/common.tsx +++ b/src/ts/interface/common.tsx @@ -36,4 +36,12 @@ export interface Option { id: string; name: string; icon?: string; +}; + +export interface Version { + id: string; + previousIds: string[]; + authorId: string; + authorName: string; + time: number; }; \ No newline at end of file diff --git a/src/ts/interface/index.tsx b/src/ts/interface/index.tsx index 6208f40340..ccdc6b3afe 100644 --- a/src/ts/interface/index.tsx +++ b/src/ts/interface/index.tsx @@ -1,4 +1,4 @@ -import { Account, Platform, DragItem, CoverType, CrumbsType, NavigationType, Option } from './common'; +import { Account, Platform, DragItem, CoverType, CrumbsType, NavigationType, Option, Version } from './common'; import { Progress, ProgressType, ProgressState } from './progress'; import { PopupParam, Popup } from './popup'; import { MenuType, MenuDirection, MenuParam, Menu, MenuItem } from './menu'; @@ -38,6 +38,7 @@ export { CrumbsType, NavigationType, Option, + Version, Progress, ProgressType, diff --git a/src/ts/lib/command.tsx b/src/ts/lib/command.tsx index eecd9a0216..9b67064d14 100644 --- a/src/ts/lib/command.tsx +++ b/src/ts/lib/command.tsx @@ -575,9 +575,14 @@ const HistoryShow = (pageId: string, versionId: string, callBack?: (message: any dispatcher.request('historyShow', request, callBack); }; -/* -HistorySetVersion(pageId, versionId); -*/ +const HistorySetVersion= (pageId: string, versionId: string, callBack?: (message: any) => void) => { + const request = new Rpc.History.Show.Request(); + + request.setPageid(pageId); + request.setVersionid(versionId); + + dispatcher.request('historySetVersion', request, callBack); +}; export { VersionGet, @@ -649,6 +654,7 @@ export { BlockListSetPageIsArchived, BlockListDeletePage, - HistoryVersions, - HistoryShow, + HistoryVersions, + HistoryShow, + HistorySetVersion, }; diff --git a/src/ts/lib/response.tsx b/src/ts/lib/response.tsx index 2fabe154d6..cb861b9e98 100644 --- a/src/ts/lib/response.tsx +++ b/src/ts/lib/response.tsx @@ -312,6 +312,11 @@ const HistoryShow = (response: any) => { }; }; +const HistorySetVersion = (response: any) => { + return { + }; +}; + export { VersionGet, @@ -389,4 +394,5 @@ export { HistoryVersions, HistoryShow, + HistorySetVersion, }; From 91d2e899b5575687dfe226ffcdefb8eb86acfd39 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 08:12:58 +0300 Subject: [PATCH 08/27] #599: redirect fix --- src/ts/component/page/main/history.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index e6d62fcf56..39be0eff8d 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -3,7 +3,7 @@ import * as ReactDOM from 'react-dom'; import { RouteComponentProps } from 'react-router'; import { HeaderMainHistory as Header, Block, Loader } from 'ts/component'; import { blockStore } from 'ts/store'; -import { I, M, C, Util, dispatcher } from 'ts/lib'; +import { I, M, C, Util, dispatcher, Storage } from 'ts/lib'; import { observer } from 'mobx-react'; interface Props extends RouteComponentProps { }; @@ -89,7 +89,7 @@ class PageMainHistory extends React.Component { const Version = (item: any) => (
{ this.loadVersion(item.id); }}> -
{Util.date('d F Y, H:i', item.time)}
+
{Util.date('d F Y, H:i:s', item.time)}
Emmy Noether
); @@ -150,6 +150,17 @@ class PageMainHistory extends React.Component { componentDidMount () { this.loadList(); this.resize(); + this.setId(); + }; + + componentDidUpdate () { + this.resize(); + this.setId(); + }; + + setId () { + const { match } = this.props; + Storage.set('pageId', match.params.id); }; loadList () { From 3aab60ca10746d1f2ea36fb37614eff032209670 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 08:48:39 +0300 Subject: [PATCH 09/27] #599: list groups --- src/img/arrow/historyList.svg | 3 + src/scss/page/main/history.scss | 12 +++- src/ts/component/page/main/history.tsx | 95 +++++++++++++++++++++----- 3 files changed, 91 insertions(+), 19 deletions(-) create mode 100644 src/img/arrow/historyList.svg diff --git a/src/img/arrow/historyList.svg b/src/img/arrow/historyList.svg new file mode 100644 index 0000000000..516befd259 --- /dev/null +++ b/src/img/arrow/historyList.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index d9d07bc3d8..37bbdcdd3d 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -14,10 +14,20 @@ .date { text-transform: uppercase; @include text-very-small; } } - .item { padding: 5px 16px; cursor: pointer; transition: $transitionFast; } + .item { padding: 5px 16px; cursor: pointer; transition: $transitionFast; position: relative; } .item { .name { @include text-small; color: #6c6a5f; } + .icon.arrow { + width: 20px; height: 20px; background-image: url('~img/arrow/historyList.svg'); position: absolute; left: 9px; top: 6px; + } } + .item.active { + .icon.arrow { transform: rotateZ(90deg); } + } + + .children { padding-left: 14px; display: none; transition: $transitionFast; } + + .item.withChildren { padding-left: 30px; } .item:hover { background: #f3f2ec; } } diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 39be0eff8d..54293742cf 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { RouteComponentProps } from 'react-router'; -import { HeaderMainHistory as Header, Block, Loader } from 'ts/component'; +import { HeaderMainHistory as Header, Block, Loader, Icon } from 'ts/component'; import { blockStore } from 'ts/store'; import { I, M, C, Util, dispatcher, Storage } from 'ts/lib'; import { observer } from 'mobx-react'; @@ -76,7 +76,7 @@ class PageMainHistory extends React.Component { const Section = (item: any) => (
-
{item.id}
+
{item.groupId}
@@ -87,12 +87,26 @@ class PageMainHistory extends React.Component { ); - const Version = (item: any) => ( -
{ this.loadVersion(item.id); }}> -
{Util.date('d F Y, H:i:s', item.time)}
-
Emmy Noether
-
- ); + const Version = (item: any) => { + const withChildren = item.list && item.list.length; + return ( + +
{ this.loadVersion(item.id); }}> + {withChildren ? { this.toggleChildren(e, item.id); }} /> : ''} +
{Util.date('d F Y, H:i:s', item.time)}
+
Emmy Noether
+
+ + {withChildren ? ( +
+ {item.list.map((child: any, i: number) => { + return + })} +
+ ) : ''} + + ); + }; return (
@@ -162,6 +176,37 @@ class PageMainHistory extends React.Component { const { match } = this.props; Storage.set('pageId', match.params.id); }; + + toggleChildren (e: any, id: string) { + e.stopPropagation(); + + const node = $(ReactDOM.findDOMNode(this)); + const sideRight = node.find('#sideRight'); + const item = sideRight.find('#item-' + id); + const children = sideRight.find('#children-' + id); + const isActive = item.hasClass('active'); + + let height = 0; + if (isActive) { + item.removeClass('active'); + children.css({ overflow: 'visible', height: 'auto' }); + height = children.height(); + children.css({ overflow: 'hidden', height: height }); + + setTimeout(() => { children.css({ height: 0 }); }, 15); + setTimeout(() => { children.hide(); }, 215); + } else { + item.addClass('active'); + children.show(); + children.css({ overflow: 'visible', height: 'auto' }); + height = children.height(); + + children.css({ overflow: 'hidden', height: 0 }); + setTimeout(() => { children.css({ height: height }); }, 15); + setTimeout(() => { children.css({ overflow: 'visible', height: 'auto' }); }, 215); + }; + + }; loadList () { const { match } = this.props; @@ -187,6 +232,10 @@ class PageMainHistory extends React.Component { this.versionId = id; C.HistoryShow(rootId, id, (message: any) => { + if (message.error.code) { + return; + }; + let bs = message.blockShow; dispatcher.onBlockShow(rootId, bs.type, bs.blocks, bs.details); @@ -194,27 +243,37 @@ class PageMainHistory extends React.Component { }); }; - groupData (versions: any[]) { + groupData (versions: any[]) { + let months: any[] = []; let groups: any[] = []; versions.reverse(); - + for (let item of versions) { - let groupId = Util.date('F Y', item.time); - let group = groups.find((it: any) => { return it.id == groupId; }); - + let groupId = Util.date('d F Y H:i:s', Math.floor(item.time / 600) * 600); + let group = groups.find((it: any) => { return it.groupId == groupId; }); + if (!group) { - group = { - id: Util.date('F Y', item.time), - list: [], - }; + group = { ...item, groupId: groupId, list: [] }; groups.push(group); }; + + group.list.push(item); + }; + + for (let item of groups) { + let groupId = Util.date('F Y', item.time); + let group = months.find((it: any) => { return it.groupId == groupId; }); + if (!group) { + group = { groupId: groupId, list: [] }; + months.push(group); + }; + group.list.push(item); }; - return groups; + return months; }; resize () { From 47f1909bcdc2f8315f77a377c3e79993c7431567 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 10:25:06 +0300 Subject: [PATCH 10/27] #599: init expanded state --- src/scss/page/main/history.scss | 10 ++-- src/ts/component/page/main/history.tsx | 65 ++++++++++++++++++++++---- 2 files changed, 62 insertions(+), 13 deletions(-) diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 37bbdcdd3d..8520804bf9 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -21,15 +21,17 @@ width: 20px; height: 20px; background-image: url('~img/arrow/historyList.svg'); position: absolute; left: 9px; top: 6px; } } - .item.active { + .item.expanded { .icon.arrow { transform: rotateZ(90deg); } } - .children { padding-left: 14px; display: none; transition: $transitionFast; } - + .children { display: none; transition: $transitionFast; } + .children { + .item { padding-left: 30px; } + } .item.withChildren { padding-left: 30px; } - .item:hover { background: #f3f2ec; } + .item:hover, .item.active { background: #f3f2ec; } } .blockLast { height: 100px; } diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index cdba2fa49b..a541f5fa45 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -30,7 +30,7 @@ class PageMainHistory extends React.Component { render () { const { match } = this.props; - const { versions } = this.state; + const versions = this.groupData(this.state.versions); const rootId = match.params.id; const root = blockStore.getLeaf(rootId, rootId); @@ -170,6 +170,7 @@ class PageMainHistory extends React.Component { componentDidUpdate () { this.resize(); this.setId(); + this.show(this.versionId); }; setId () { @@ -177,6 +178,45 @@ class PageMainHistory extends React.Component { Storage.set('pageId', match.params.id); }; + show (id: string) { + if (!id) { + return; + }; + + const { versions } = this.state; + const data = this.groupData(versions); + const version = versions.find((it: any) => { return it.id == id; }); + if (!version) { + return; + }; + + const month = data.find((it: any) => { return it.groupId == this.monthId(version.time); }); + if (!month) { + return; + }; + + let group = month.list.find((it: any) => { return it.groupId == this.groupId(version.time); }); + if (!group) { + return; + }; + + const node = $(ReactDOM.findDOMNode(this)); + const sideRight = node.find('#sideRight'); + const item = sideRight.find('#item-' + version.id); + + sideRight.find('.active').removeClass('active'); + item.addClass('active'); + + if (group) { + const groupItem = sideRight.find('#item-' + group.id); + const children = sideRight.find('#children-' + group.id); + + groupItem.addClass('expanded'); + children.show(); + }; + }; + + toggleChildren (e: any, id: string) { e.stopPropagation(); @@ -184,11 +224,11 @@ class PageMainHistory extends React.Component { const sideRight = node.find('#sideRight'); const item = sideRight.find('#item-' + id); const children = sideRight.find('#children-' + id); - const isActive = item.hasClass('active'); + const isActive = item.hasClass('expanded'); let height = 0; if (isActive) { - item.removeClass('active'); + item.removeClass('expanded'); children.css({ overflow: 'visible', height: 'auto' }); height = children.height(); children.css({ overflow: 'hidden', height: height }); @@ -196,7 +236,7 @@ class PageMainHistory extends React.Component { setTimeout(() => { children.css({ height: 0 }); }, 15); setTimeout(() => { children.hide(); }, 215); } else { - item.addClass('active'); + item.addClass('expanded'); children.show(); children.css({ overflow: 'visible', height: 'auto' }); height = children.height(); @@ -217,7 +257,8 @@ class PageMainHistory extends React.Component { return; }; - this.setState({ versions: this.groupData(message.versions) }); + message.versions.reverse(); + this.setState({ versions: message.versions }); if (!this.versionId) { this.loadVersion(message.versions[0].id); @@ -247,10 +288,8 @@ class PageMainHistory extends React.Component { let months: any[] = []; let groups: any[] = []; - versions.reverse(); - for (let version of versions) { - let groupId = Util.date('d F Y H:i:s', Math.floor(version.time / 600) * 600); + let groupId = this.groupId(version.time); let group = groups.find((it: any) => { return it.groupId == groupId; }); if (!group) { @@ -262,7 +301,7 @@ class PageMainHistory extends React.Component { }; for (let group of groups) { - let groupId = Util.date('F Y', group.time); + let groupId = this.monthId(group.time); let month = months.find((it: any) => { return it.groupId == groupId; }); if (!month) { @@ -276,6 +315,14 @@ class PageMainHistory extends React.Component { return months; }; + monthId (time: number) { + return Util.date('F Y', time); + }; + + groupId (time: number) { + return Util.date('d F Y H:i', Math.floor(time / 600) * 600); + }; + resize () { const win = $(window); const node = $(ReactDOM.findDOMNode(this)); From ff8b98d86600d73e47bb5144c5dc4dfdace172b4 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 13:49:25 +0300 Subject: [PATCH 11/27] #599: editor readOnly mode --- dist/.gitignore | 7 ++++++- src/scss/block/media.scss | 3 +++ src/scss/block/text.scss | 3 ++- src/scss/component/inputWithFile.scss | 10 ++++++++-- src/scss/page/main/history.scss | 3 ++- src/ts/component/block/bookmark.tsx | 4 ++-- src/ts/component/block/cover.tsx | 10 ++++++---- src/ts/component/block/file.tsx | 6 +++--- src/ts/component/block/image.tsx | 4 ++-- src/ts/component/block/index.tsx | 12 +++++------- src/ts/component/block/link.tsx | 6 +++--- src/ts/component/block/video.tsx | 4 ++-- src/ts/component/util/inputWithFile.tsx | 24 +++++++++++++++++++++--- 13 files changed, 65 insertions(+), 31 deletions(-) diff --git a/dist/.gitignore b/dist/.gitignore index e6e572a8a9..6262a11b2a 100644 --- a/dist/.gitignore +++ b/dist/.gitignore @@ -12,4 +12,9 @@ main.js.map alpha-mac.yml beta-mac.yml commands.js -anytypeHelper* \ No newline at end of file +anytypeHelper* +alpha-linux.yml +*.snap +beta-linux.yml +latest-linux.yml +linux-unpacked/ \ No newline at end of file diff --git a/src/scss/block/media.scss b/src/scss/block/media.scss index d4c37030c8..0c7523b5f9 100644 --- a/src/scss/block/media.scss +++ b/src/scss/block/media.scss @@ -30,6 +30,9 @@ .icon.play:hover { background-color: rgba(255,255,255,0.9); } } .block.blockMedia > .wrapContent > .selectable > .dropTarget { line-height: 0px; } + + .block.blockMedia.isReadOnly > .wrapContent > .selectable > .dropTarget .icon.resize { display: none; } + .block.blockMedia.isReadOnly > .wrapContent > .selectable > .dropTarget .icon.play { display: none; } .block.blockMedia:hover { .icon.resize { opacity: 1; } diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index 2dd5ae171b..3e2fe5387c 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -73,9 +73,10 @@ .marker.check, .marker.toggle { img { width: 100%; height: 100%; } } - } } + + .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .marker.check { cursor: default; } .block.blockText.isChecked > .wrapContent > .selectable > .dropTarget * { color: $colorDarkGrey !important; } diff --git a/src/scss/component/inputWithFile.scss b/src/scss/component/inputWithFile.scss index e506b128a8..972a8100f3 100644 --- a/src/scss/component/inputWithFile.scss +++ b/src/scss/component/inputWithFile.scss @@ -7,8 +7,8 @@ .inputWithFile { .txt { line-height: 20px; height: 20px; overflow: hidden; width: calc(100% - 26px); vertical-align: top; } .fileWrap { display: inline-block; vertical-align: top; } - .fileWrap .border { border-bottom: 1px solid $colorDarkGrey; display: inline-block; line-height: 1; transition: $transitionFast; } - .fileWrap:hover .border { cursor: pointer; color: $colorBlack; } + .fileWrap .border { border-bottom: 1px solid $colorDarkGrey; display: inline-block; line-height: 1; transition: $transitionFast; cursor: pointer; } + .fileWrap:hover .border { color: $colorBlack; } .input::placeholder { color: $colorDarkGrey; } .urlToggle { cursor: text; display: inline-block; } @@ -24,6 +24,12 @@ .icon.bookmark { background-image: url('~img/icon/menu/action/block/bookmark0.svg'); } } +.inputWithFile.isReadOnly { + .urlToggle { cursor: default; } + .border { border: 0px; cursor: default; } + .fileWrap:hover .border { color: $colorDarkGrey; } +} + .inputWithFile.isSmall { .fileWrap { display: block; } .txt { height: 38px; } diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 8520804bf9..9235332b22 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -18,7 +18,8 @@ .item { .name { @include text-small; color: #6c6a5f; } .icon.arrow { - width: 20px; height: 20px; background-image: url('~img/arrow/historyList.svg'); position: absolute; left: 9px; top: 6px; + width: 20px; height: 20px; background-image: url('~img/arrow/historyList.svg'); position: absolute; left: 9px; top: 6px; + transition: none; } } .item.expanded { diff --git a/src/ts/component/block/bookmark.tsx b/src/ts/component/block/bookmark.tsx index c40e7fcacd..97ec5d0518 100644 --- a/src/ts/component/block/bookmark.tsx +++ b/src/ts/component/block/bookmark.tsx @@ -27,7 +27,7 @@ class BlockBookmark extends React.Component { }; render () { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, content } = block; const { url, title, description, imageHash, faviconHash } = content; @@ -58,7 +58,7 @@ class BlockBookmark extends React.Component { ); } else { element = ( - + ); }; diff --git a/src/ts/component/block/cover.tsx b/src/ts/component/block/cover.tsx index 427655ff19..8960fc6169 100644 --- a/src/ts/component/block/cover.tsx +++ b/src/ts/component/block/cover.tsx @@ -60,7 +60,7 @@ class BlockCover extends React.Component { render() { const { editing, loading } = this.state; - const { rootId } = this.props; + const { rootId, readOnly } = this.props; const details = blockStore.getDetails(rootId, rootId); const { coverType, coverId, } = details; const canEdit = coverType && [ I.CoverType.Image, I.CoverType.BgImage ].indexOf(coverType) >= 0; @@ -114,9 +114,11 @@ class BlockCover extends React.Component { ) : ( )} -
- {elements} -
+ {!readOnly ? ( +
+ {elements} +
+ ) : ''}
); }; diff --git a/src/ts/component/block/file.tsx b/src/ts/component/block/file.tsx index ad35d366f1..7e8ef5e63a 100644 --- a/src/ts/component/block/file.tsx +++ b/src/ts/component/block/file.tsx @@ -26,7 +26,7 @@ class BlockFile extends React.Component { }; render () { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, content } = block; const { state, hash, size, name, mime } = content; @@ -37,7 +37,7 @@ class BlockFile extends React.Component { default: case I.FileState.Empty: element = ( - + ); break; @@ -66,7 +66,7 @@ class BlockFile extends React.Component { ); break; }; - + return (
{element} diff --git a/src/ts/component/block/image.tsx b/src/ts/component/block/image.tsx index be0478b1ed..67cb30aae6 100644 --- a/src/ts/component/block/image.tsx +++ b/src/ts/component/block/image.tsx @@ -30,7 +30,7 @@ class BlockImage extends React.Component { }; render () { - const { block } = this.props; + const { block, readOnly } = this.props; const { id, fields, content } = block; const { width } = fields; const { state } = content; @@ -46,7 +46,7 @@ class BlockImage extends React.Component { default: case I.FileState.Empty: element = ( - + ); break; diff --git a/src/ts/component/block/index.tsx b/src/ts/component/block/index.tsx index 6e9eda3ef2..ad7c92aeff 100644 --- a/src/ts/component/block/index.tsx +++ b/src/ts/component/block/index.tsx @@ -89,12 +89,10 @@ class Block extends React.Component { cn.push('isChecked'); }; - if (block.isTextToggle()) { - if (!childrenIds.length) { - empty = ( -
Empty toggle. Click and drop block inside
- ); - }; + if (block.isTextToggle() && !childrenIds.length && !readOnly) { + empty = ( +
Empty toggle. Click and drop block inside
+ ); }; blockComponent = ; @@ -127,7 +125,7 @@ class Block extends React.Component { if (content.state == I.FileState.Done) { cn.push('withFile'); }; - + switch (content.type) { default: case I.FileType.File: diff --git a/src/ts/component/block/link.tsx b/src/ts/component/block/link.tsx index ef1e03a999..d0a90d3ecf 100644 --- a/src/ts/component/block/link.tsx +++ b/src/ts/component/block/link.tsx @@ -23,15 +23,15 @@ class BlockLink extends React.Component { }; render() { - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id, content } = block; const details = blockStore.getDetails(rootId, content.targetBlockId); const { iconEmoji, iconImage, name, isArchived } = details; const cn = [ 'focusable', 'c' + id, (isArchived ? 'isArchived' : '') ]; - + return (
- +
{name}
diff --git a/src/ts/component/block/video.tsx b/src/ts/component/block/video.tsx index ae64449904..5f36bb3502 100644 --- a/src/ts/component/block/video.tsx +++ b/src/ts/component/block/video.tsx @@ -32,7 +32,7 @@ class BlockVideo extends React.Component { }; render () { - const { block } = this.props; + const { block, readOnly } = this.props; const { id, fields, content } = block; const { state, hash, type, mime } = content; @@ -49,7 +49,7 @@ class BlockVideo extends React.Component { default: case I.FileState.Empty: element = ( - + ); break; diff --git a/src/ts/component/util/inputWithFile.tsx b/src/ts/component/util/inputWithFile.tsx index 2a366f9eef..5b744572c8 100644 --- a/src/ts/component/util/inputWithFile.tsx +++ b/src/ts/component/util/inputWithFile.tsx @@ -10,6 +10,7 @@ interface Props { withFile?: boolean; accept?: string[]; block?: I.Block; + readOnly?: boolean; onChangeUrl? (e: any, url: string): void; onChangeFile? (e: any, path: string): void; }; @@ -54,7 +55,7 @@ class InputWithFile extends React.Component { render () { const { focused, size } = this.state; - const { icon, textUrl, textFile, withFile } = this.props; + const { icon, textUrl, textFile, withFile, readOnly } = this.props; let cn = [ 'inputWithFile', 'resizable' ]; let placeHolder = textUrl; @@ -72,6 +73,10 @@ class InputWithFile extends React.Component { if (isSmall) { cn.push('isSmall'); }; + + if (readOnly) { + cn.push('isReadOnly'); + }; if (isIcon) { cn.push('isIcon'); @@ -188,6 +193,11 @@ class InputWithFile extends React.Component { onFocus (e: any) { e.stopPropagation(); + + const { readOnly } = this.props; + if (readOnly) { + return; + }; this.setState({ focused: true }); }; @@ -201,7 +211,11 @@ class InputWithFile extends React.Component { }; onChangeUrl (e: any, force: boolean) { - const { onChangeUrl } = this.props; + const { onChangeUrl, readOnly } = this.props; + + if (readOnly) { + return; + }; window.clearTimeout(this.t); this.t = window.setTimeout(() => { @@ -221,10 +235,14 @@ class InputWithFile extends React.Component { }; onClickFile (e: any) { - const { onChangeFile, accept } = this.props; + const { onChangeFile, accept, readOnly } = this.props; e.preventDefault(); e.stopPropagation(); + + if (readOnly) { + return; + }; let options: any = { properties: [ 'openFile' ], From 4e19d215d693f5b097c086cde93f4a3912d6e6d2 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 14:40:49 +0300 Subject: [PATCH 12/27] mapper fix --- src/ts/lib/mapper.tsx | 2 +- src/ts/lib/response.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/ts/lib/mapper.tsx b/src/ts/lib/mapper.tsx index 363aeff42c..6dbccbc46b 100644 --- a/src/ts/lib/mapper.tsx +++ b/src/ts/lib/mapper.tsx @@ -240,7 +240,7 @@ const Mapper = { return observable(new M.View(view)); }, - HistoryVersionItem: (obj: any) => { + HistoryVersion: (obj: any) => { return { id: obj.getId(), previousIds: obj.getPreviousidsList() || [], diff --git a/src/ts/lib/response.tsx b/src/ts/lib/response.tsx index cb861b9e98..f4dc87565f 100644 --- a/src/ts/lib/response.tsx +++ b/src/ts/lib/response.tsx @@ -302,12 +302,13 @@ const BlockSetDataviewActiveView = (response: any) => { const HistoryVersions = (response: any) => { return { - versions: (response.getVersionsList() || []).map(Mapper.From.HistoryVersionItem), + versions: (response.getVersionsList() || []).map(Mapper.From.HistoryVersion), }; }; const HistoryShow = (response: any) => { return { + version: Mapper.From.HistoryVersion(response.getVersion()), blockShow: this.BlockShow(response.getBlockshow()), }; }; From 0e83376a9d87ede58d495e6f88fcb6dc71a3263f Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 27 Aug 2020 14:47:19 +0300 Subject: [PATCH 13/27] #599: current version in header --- src/ts/component/header/main/history.tsx | 6 ++++-- src/ts/component/page/main/history.tsx | 19 ++++++++++--------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/src/ts/component/header/main/history.tsx b/src/ts/component/header/main/history.tsx index 17ad489863..17077af1ad 100644 --- a/src/ts/component/header/main/history.tsx +++ b/src/ts/component/header/main/history.tsx @@ -3,7 +3,7 @@ import { RouteComponentProps } from 'react-router'; import { observer } from 'mobx-react'; import { Icon } from 'ts/component'; import { DataUtil, I } from 'ts/lib'; -import { C } from '../../../lib'; +import { C, Util } from '../../../lib'; interface Props extends RouteComponentProps { rootId: string; @@ -21,6 +21,8 @@ class HeaderMainHistory extends React.Component { }; render () { + const { version } = this.props; + return (
@@ -30,7 +32,7 @@ class HeaderMainHistory extends React.Component {
-
18 July 2020, 16:02
+
{Util.date('d F Y H:i:s', version.time)}
diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index a541f5fa45..8c3e7574ae 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -21,7 +21,7 @@ class PageMainHistory extends React.Component { versions: [] as I.Version[], }; - versionId: string = ''; + version: I.Version = null; refHeader: any = null; constructor (props: any) { @@ -34,7 +34,7 @@ class PageMainHistory extends React.Component { const rootId = match.params.id; const root = blockStore.getLeaf(rootId, rootId); - if (!this.versionId || !root) { + if (!this.version || !root) { return ; }; @@ -110,7 +110,7 @@ class PageMainHistory extends React.Component { return (
-
{ this.refHeader = ref; }} {...this.props} rootId={rootId} version={{ id: this.versionId, previousIds: [], authorId: '', authorName: '', time: 0 }} /> +
{ this.refHeader = ref; }} {...this.props} rootId={rootId} version={this.version} />
@@ -170,7 +170,10 @@ class PageMainHistory extends React.Component { componentDidUpdate () { this.resize(); this.setId(); - this.show(this.versionId); + + if (this.version) { + this.show(this.version.id); + }; }; setId () { @@ -216,7 +219,6 @@ class PageMainHistory extends React.Component { }; }; - toggleChildren (e: any, id: string) { e.stopPropagation(); @@ -245,7 +247,6 @@ class PageMainHistory extends React.Component { setTimeout(() => { children.css({ height: height }); }, 15); setTimeout(() => { children.css({ overflow: 'visible', height: 'auto' }); }, 215); }; - }; loadList () { @@ -260,7 +261,7 @@ class PageMainHistory extends React.Component { message.versions.reverse(); this.setState({ versions: message.versions }); - if (!this.versionId) { + if (!this.version) { this.loadVersion(message.versions[0].id); }; }); @@ -270,13 +271,13 @@ class PageMainHistory extends React.Component { const { match } = this.props; const rootId = match.params.id; - this.versionId = id; - C.HistoryShow(rootId, id, (message: any) => { if (message.error.code) { return; }; + this.version = message.version; + let bs = message.blockShow; dispatcher.onBlockShow(rootId, bs.type, bs.blocks, bs.details); From 92bedb0cd261b4495348a004e692dfe718e09b40 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 31 Aug 2020 10:03:01 +0300 Subject: [PATCH 14/27] hsitory fixes --- src/scss/page/main/history.scss | 4 +--- src/ts/component/page/main/history.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 9235332b22..c11330a01e 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -2,11 +2,9 @@ .pageMainHistory { #body { overflow: hidden; } - .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); overflow: auto; } + .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); overflow: auto; position: relative; } .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } - .block.blockCover { width: calc(100% - 254px - 48px); } - .list { width: 254px; border-left: 1px solid #dfddd0; position: relative; z-index: 10; background: #fff; overflow: auto; } .list { .section { padding: 11px 16px; } diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 8c3e7574ae..ac4c23a040 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -94,7 +94,7 @@ class PageMainHistory extends React.Component {
{ this.loadVersion(item.id); }}> {withChildren ? { this.toggleChildren(e, item.id); }} /> : ''}
{Util.date('d F Y, H:i:s', item.time)}
-
Emmy Noether
+ {item.authorName ?
{item.authorName}
: ''}
{withChildren ? ( From e5bf7deeb2ad20948ab096e20f99f85c6f5eccaf Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 31 Aug 2020 10:08:53 +0300 Subject: [PATCH 15/27] fix --- src/scss/block/text.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index 3e2fe5387c..4a93dea1c2 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -5,7 +5,7 @@ .block.blockText { .wrap { flex: auto; position: relative; padding: 0px; width: 100%; } .value { -webkit-user-modify: read-write-plaintext-only; width: 100%; overflow: hidden; } - .value:empty { height: 24px; } + .placeHolder { color: $colorDarkGrey; position: absolute; z-index: 0; left: 0px; top: 0px; display: none; overflow: hidden; width: 100%; height: 100%; cursor: text; pointer-events: none; @@ -77,6 +77,8 @@ } .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .marker.check { cursor: default; } + .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .value { min-height: 24px; } + .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .placeHolder { display: none; } .block.blockText.isChecked > .wrapContent > .selectable > .dropTarget * { color: $colorDarkGrey !important; } From 95105e6cf43d293f9738b2c773220a0df00de901 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 31 Aug 2020 10:51:07 +0300 Subject: [PATCH 16/27] fix debug flag --- electron.js | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/electron.js b/electron.js index f1ad56fed7..3fd6b7394d 100644 --- a/electron.js +++ b/electron.js @@ -383,25 +383,19 @@ function menuInit () { { label: 'Interface', type: 'checkbox', checked: config.debugUI, click: () => { - setConfig({ debugUI: !config.debugUI }, () => { - send('toggleDebug', 'ui', config.debugUI); - }); + setConfig({ debugUI: !config.debugUI }); } }, { label: 'Middleware', type: 'checkbox', checked: config.debugMW, click: () => { - setConfig({ debugMW: !config.debugMW }, () => { - send('toggleDebug', 'mw', config.debugMW); - }); + setConfig({ debugMW: !config.debugMW }); } }, { label: 'Analytics', type: 'checkbox', checked: config.debugAN, click: () => { - setConfig({ debugAN: !config.debugAN }, () => { - send('toggleDebug', 'an', config.debugAN); - }); + setConfig({ debugAN: !config.debugAN }); } }, ] @@ -438,6 +432,7 @@ function setChannel (channel) { function setConfig (obj, callBack) { config = Object.assign(config, obj); storage.set('config', config, (error) => { + send('config', config); if (callBack) { callBack(error); }; From 6c4b9088801b82af14e1ca6ab822cecb106a2d5b Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 31 Aug 2020 10:52:00 +0300 Subject: [PATCH 17/27] fix debug flag --- electron.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/electron.js b/electron.js index 3fd6b7394d..c8aebf7aa0 100644 --- a/electron.js +++ b/electron.js @@ -406,9 +406,7 @@ function menuInit () { }, { label: 'Dev Tools', accelerator: 'Alt+CmdOrCtrl+I', - click: () => { - win.webContents.openDevTools(); - } + click: () => { win.webContents.openDevTools(); } } ] }; From cb23362cce0238baa1b10acb4790c7306017c4dd Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Mon, 31 Aug 2020 10:53:01 +0300 Subject: [PATCH 18/27] update deps --- package-lock.json | 104 +++++++++++++++++++++++----------------------- package.json | 10 ++--- 2 files changed, 57 insertions(+), 57 deletions(-) diff --git a/package-lock.json b/package-lock.json index b93d87a7c8..d90c3d249a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -437,59 +437,59 @@ "integrity": "sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA=" }, "@sentry/browser": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.21.4.tgz", - "integrity": "sha512-/bRGMNjJc4Qt9Me9qLobZe0pREUAMFQAR7GOF9HbgzxUc49qVvmPRglvwzwhPJ6XKPg0NH/C6MOn+yuIRjfMag==", + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-5.22.3.tgz", + "integrity": "sha512-2TzE/CoBa5ZkvxJizDdi1Iz1ldmXSJpFQ1mL07PIXBjCt0Wxf+WOuFSj5IP4L40XHfJE5gU8wEvSH0VDR8nXtA==", "requires": { - "@sentry/core": "5.21.4", - "@sentry/types": "5.21.4", - "@sentry/utils": "5.21.4", + "@sentry/core": "5.22.3", + "@sentry/types": "5.22.3", + "@sentry/utils": "5.22.3", "tslib": "^1.9.3" } }, "@sentry/core": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.21.4.tgz", - "integrity": "sha512-2hB0shKL6RUuLqqmnDUPvwiV25OSnchxkJ6NbLqnn2DYLqLARfZuVcw2II4wb/Jlw7SDnbkQIPs0/ax7GPe1Nw==", + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/core/-/core-5.22.3.tgz", + "integrity": "sha512-eGL5uUarw3o4i9QUb9JoFHnhriPpWCaqeaIBB06HUpdcvhrjoowcKZj1+WPec5lFg5XusE35vez7z/FPzmJUDw==", "requires": { - "@sentry/hub": "5.21.4", - "@sentry/minimal": "5.21.4", - "@sentry/types": "5.21.4", - "@sentry/utils": "5.21.4", + "@sentry/hub": "5.22.3", + "@sentry/minimal": "5.22.3", + "@sentry/types": "5.22.3", + "@sentry/utils": "5.22.3", "tslib": "^1.9.3" } }, "@sentry/hub": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.21.4.tgz", - "integrity": "sha512-bgEgBHK6OWoAkrnYwVsIOw+sR4MWpe5/CB7H7r+GBJsSnBysncbSaBgndKmtb1GTWdzMxMlvXU16zC6TR5JX5Q==", + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/hub/-/hub-5.22.3.tgz", + "integrity": "sha512-INo47m6N5HFEs/7GMP9cqxOIt7rmRxdERunA3H2L37owjcr77MwHVeeJ9yawRS6FMtbWXplgWTyTIWIYOuqVbw==", "requires": { - "@sentry/types": "5.21.4", - "@sentry/utils": "5.21.4", + "@sentry/types": "5.22.3", + "@sentry/utils": "5.22.3", "tslib": "^1.9.3" } }, "@sentry/minimal": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.21.4.tgz", - "integrity": "sha512-pIpIH2ZTwdijGTw6VwfkTETAEoc9k/Aejz6mAjFDMzlOPb3bCx+W8EbGzFOxuwOsiE84bysd2UPVgFY4YSLV/g==", + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/minimal/-/minimal-5.22.3.tgz", + "integrity": "sha512-HoINpYnVYCpNjn2XIPIlqH5o4BAITpTljXjtAftOx6Hzj+Opjg8tR8PWliyKDvkXPpc4kXK9D6TpEDw8MO0wZA==", "requires": { - "@sentry/hub": "5.21.4", - "@sentry/types": "5.21.4", + "@sentry/hub": "5.22.3", + "@sentry/types": "5.22.3", "tslib": "^1.9.3" } }, "@sentry/types": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.21.4.tgz", - "integrity": "sha512-uJTRxW//NPO0UJJzRQOtYHg5tiSBvn1dRk5FvURXmeXt9d9XtwmRhHWDwI51uAkyv+51tun3v+0OZQfLvAI+gQ==" + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/types/-/types-5.22.3.tgz", + "integrity": "sha512-cv+VWK0YFgCVDvD1/HrrBWOWYG3MLuCUJRBTkV/Opdy7nkdNjhCAJQrEyMM9zX0sac8FKWKOHT0sykNh8KgmYw==" }, "@sentry/utils": { - "version": "5.21.4", - "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.21.4.tgz", - "integrity": "sha512-zY8OvaE/lU+DCzTSFrDZNXZmBLM/0URUlyYD4RubqzrgKY/eP1pSbEsDzYYhc+OrBr8TjG66N+5T3gMZX0BfNg==", + "version": "5.22.3", + "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-5.22.3.tgz", + "integrity": "sha512-AHNryXMBvIkIE+GQxTlmhBXD0Ksh+5w1SwM5qi6AttH+1qjWLvV6WB4+4pvVvEoS8t5F+WaVUZPQLmCCWp6zKw==", "requires": { - "@sentry/types": "5.21.4", + "@sentry/types": "5.22.3", "tslib": "^1.9.3" } }, @@ -591,9 +591,9 @@ "integrity": "sha512-7+2BITlgjgDhH0vvwZU/HZJVyk+2XUlvxXe8dFMedNX/aMkaOq++rMAFXc0tM7ij15QaWlbdQASBR9dihi+bDQ==" }, "@types/lodash": { - "version": "4.14.160", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.160.tgz", - "integrity": "sha512-aP03BShJoO+WVndoVj/WNcB/YBPt+CIU1mvaao2GRAHy2yg4pT/XS4XnVHEQBjPJGycWf/9seKEO9vopTJGkvA==", + "version": "4.14.161", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.161.tgz", + "integrity": "sha512-EP6O3Jkr7bXvZZSZYlsgt5DIjiGr0dXP1/jVEwVLTFgg0d+3lWVQkRavYVQszV7dYUwvg0B8R0MBDpcmXg7XIA==", "dev": true }, "@types/long": { @@ -634,9 +634,9 @@ "dev": true }, "@types/react": { - "version": "16.9.46", - "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.46.tgz", - "integrity": "sha512-dbHzO3aAq1lB3jRQuNpuZ/mnu+CdD3H0WVaaBQA8LTT3S33xhVBUj232T8M3tAhSWJs/D/UqORYUlJNl/8VQZg==", + "version": "16.9.48", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.48.tgz", + "integrity": "sha512-4ykBVswgYitPGMXFRxJCHkxJDU2rjfU3/zw67f8+dB7sNdVJXsrwqoYxz/stkAucymnEEbRPFmX7Ce5Mc/kJCw==", "dev": true, "requires": { "@types/prop-types": "*", @@ -3396,9 +3396,9 @@ "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==" }, "csstype": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.2.tgz", - "integrity": "sha512-ofovWglpqoqbfLNOTBNZLSbMuGrblAf1efvvArGKOZMBrIoJeu5UsAipQolkijtyQx5MtAzT/J9IHj/CEY1mJw==", + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.3.tgz", + "integrity": "sha512-jPl+wbWPOWJ7SXsWyqGRk3lGecbar0Cb0OvZF/r/ZU011R4YqiRehgkQ9p4eQfo9DSDLqLL3wHwfxeJiuIsNag==", "dev": true }, "currently-unhandled": { @@ -7024,9 +7024,9 @@ "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" }, "mem": { - "version": "6.1.0", - "resolved": "https://registry.npmjs.org/mem/-/mem-6.1.0.tgz", - "integrity": "sha512-RlbnLQgRHk5lwqTtpEkBTQ2ll/CG/iB+J4Hy2Wh97PjgZgXgWJWrFF+XXujh3UUVLvR4OOTgZzcWMMwnehlEUg==", + "version": "6.1.1", + "resolved": "https://registry.npmjs.org/mem/-/mem-6.1.1.tgz", + "integrity": "sha512-Ci6bIfq/UgcxPTYa8dQQ5FY3BzKkT894bwXWXxC/zqs0XgMO2cT20CGkOqda7gZNkmK5VP4x89IGZ6K7hfbn3Q==", "requires": { "map-age-cleaner": "^0.1.3", "mimic-fn": "^3.0.0" @@ -7133,9 +7133,9 @@ } }, "mimic-fn": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.0.0.tgz", - "integrity": "sha512-PiVO95TKvhiwgSwg1IdLYlCTdul38yZxZMIcnDSFIBUm4BNZha2qpQ4GpJ++15bHoKDtrW2D69lMfFwdFYtNZQ==" + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz", + "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==" }, "mimic-response": { "version": "1.0.1", @@ -7296,17 +7296,17 @@ "integrity": "sha512-kAcNjzDGjILjvNiVrQZfVY6Bxs5YKt35rtwNuU/uneLq+E9zF5grnGmr95EMqqYSVpE6RjJLID3y3j0yQ/cvRA==" }, "mobx-react": { - "version": "6.2.5", - "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.2.5.tgz", - "integrity": "sha512-LxtXXW0GkOAO6VOIg2m/6WL6ZuKlzOWwESIFdrWelI0ZMIvtKCMZVUuulcO5GAWSDsH0ApaMkGLoaPqKjzyziQ==", + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-6.3.0.tgz", + "integrity": "sha512-C14yya2nqEBRSEiJjPkhoWJLlV8pcCX3m2JRV7w1KivwANJqipoiPx9UMH4pm6QNMbqDdvJqoyl+LqNu9AhvEQ==", "requires": { - "mobx-react-lite": ">=2.0.6" + "mobx-react-lite": ">=2.2.0" } }, "mobx-react-lite": { - "version": "2.0.7", - "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.0.7.tgz", - "integrity": "sha512-YKAh2gThC6WooPnVZCoC+rV1bODAKFwkhxikzgH18wpBjkgTkkR9Sb0IesQAH5QrAEH/JQVmy47jcpQkf2Au3Q==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/mobx-react-lite/-/mobx-react-lite-2.2.0.tgz", + "integrity": "sha512-FUPacb4bk21qp/wrEv2vPcqC314nGRgHQzzIPHVBGAT5GtzaYiwvMHx192/Vy8TyI4+8H5JY9689jnvDOvLRuQ==" }, "mobx-state-tree": { "version": "3.17.2", diff --git a/package.json b/package.json index 2030db2ea8..0c7ae3263e 100644 --- a/package.json +++ b/package.json @@ -35,12 +35,12 @@ "@types/i18n": "^0.8.7", "@types/is": "0.0.21", "@types/jquery": "^3.5.1", - "@types/lodash": "^4.14.160", + "@types/lodash": "^4.14.161", "@types/long": "^4.0.1", "@types/mobx-devtools-mst": "^0.9.7", "@types/node": "^12.12.54", "@types/prismjs": "^1.16.1", - "@types/react": "^16.9.46", + "@types/react": "^16.9.48", "@types/react-beautiful-dnd": "^11.0.5", "@types/react-dnd": "^3.0.2", "@types/react-dnd-html5-backend": "^3.0.2", @@ -67,7 +67,7 @@ "webpack-dev-server": "^3.11.0" }, "dependencies": { - "@sentry/browser": "^5.21.4", + "@sentry/browser": "^5.22.3", "@types/bindings": "^1.3.0", "about-window": "^1.13.4", "amplitude-js": "^5.11.0", @@ -105,12 +105,12 @@ "linebyline": "^1.3.0", "lodash": "^4.17.20", "lowlight": "^1.14.0", - "mem": "^6.1.0", + "mem": "^6.1.1", "mobx": "^5.15.6", "mobx-decorators": "^6.0.1", "mobx-devtools-mst": "^0.9.22", "mobx-logger": "^0.7.1", - "mobx-react": "^6.2.5", + "mobx-react": "^6.3.0", "mobx-state-tree": "^3.17.2", "node-sass": "^4.14.1", "npm": "^6.14.8", From 4bbfcbed7a590b1c6da9c2c583b91d594777dd4c Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Tue, 8 Sep 2020 09:27:42 +0300 Subject: [PATCH 19/27] fixes --- src/scss/block/common.scss | 3 +++ src/scss/block/text.scss | 7 ++++++- src/ts/component/block/index.tsx | 9 +++++---- src/ts/component/page/main/history.tsx | 13 +++++++++++++ 4 files changed, 27 insertions(+), 5 deletions(-) diff --git a/src/scss/block/common.scss b/src/scss/block/common.scss index 23944bed02..5af84552ca 100644 --- a/src/scss/block/common.scss +++ b/src/scss/block/common.scss @@ -48,6 +48,9 @@ .block > .wrapContent > .children > .block.last { margin: 0px; } + .block.isReadOnly { + .colResize { display: none; } + } .block.isReadOnly > .wrapMenu > .icon.dnd { display: none; } .block.align0 > .wrapContent { text-align: left; } diff --git a/src/scss/block/text.scss b/src/scss/block/text.scss index 4a93dea1c2..4cea27ff7a 100644 --- a/src/scss/block/text.scss +++ b/src/scss/block/text.scss @@ -79,6 +79,11 @@ .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .marker.check { cursor: default; } .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .value { min-height: 24px; } .block.blockText.isReadOnly > .wrapContent > .selectable > .dropTarget .placeHolder { display: none; } + + .block.blockText.isReadOnly.code { + .select { display: none; } + } + .block.blockText.isReadOnly.code > .wrapContent > .selectable > .dropTarget { padding: 16px; } .block.blockText.isChecked > .wrapContent > .selectable > .dropTarget * { color: $colorDarkGrey !important; } @@ -119,7 +124,7 @@ .name { overflow: visible; } } } - + .block.blockText.paragraph > .wrapContent.bgColor > .selectable > .dropTarget, .block.blockText.header1 > .wrapContent.bgColor > .selectable > .dropTarget, .block.blockText.header2 > .wrapContent.bgColor > .selectable > .dropTarget, diff --git a/src/ts/component/block/index.tsx b/src/ts/component/block/index.tsx index ad7c92aeff..ff882fb2f1 100644 --- a/src/ts/component/block/index.tsx +++ b/src/ts/component/block/index.tsx @@ -382,11 +382,12 @@ class Block extends React.Component { onResizeStart (e: any, index: number) { e.stopPropagation(); - if (!this._isMounted) { + const { dataset, rootId, block, readOnly } = this.props; + + if (!this._isMounted || readOnly) { return; }; - const { dataset, rootId, block } = this.props; const { id } = block; const childrenIds = blockStore.getChildrenIds(rootId, id); const { selection } = dataset || {}; @@ -510,11 +511,11 @@ class Block extends React.Component { return; }; - const { rootId, block } = this.props; + const { rootId, block, readOnly } = this.props; const { id } = block; const node = $(ReactDOM.findDOMNode(this)); - if (!block.isLayoutRow() || keyboard.isDragging) { + if (!block.isLayoutRow() || keyboard.isDragging || readOnly) { return; }; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index ac4c23a040..ad5a31dab0 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -23,6 +23,8 @@ class PageMainHistory extends React.Component { version: I.Version = null; refHeader: any = null; + scrollLeft: number = 0; + scrollRight: number = 0; constructor (props: any) { super(props); @@ -168,12 +170,23 @@ class PageMainHistory extends React.Component { }; componentDidUpdate () { + const node = $(ReactDOM.findDOMNode(this)); + const sideLeft = node.find('#sideLeft'); + const sideRight = node.find('#sideRight'); + const self = this; + this.resize(); this.setId(); if (this.version) { this.show(this.version.id); }; + + sideLeft.scrollTop(this.scrollLeft); + sideRight.scrollTop(this.scrollRight); + + sideLeft.unbind('scroll').scroll(function () { console.log(self.scrollLeft); self.scrollLeft = $(this).scrollTop(); }); + sideRight.unbind('scroll').scroll(function () { console.log(self.scrollRight); self.scrollRight = $(this).scrollTop(); }); }; setId () { From d44fdfbe1458cdd3830b1ee1df0fc49bbbc3e847 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 9 Sep 2020 16:21:24 +0300 Subject: [PATCH 20/27] groups fix --- src/ts/component/page/main/history.tsx | 13 +++---------- src/ts/interface/common.tsx | 1 + src/ts/lib/mapper.tsx | 1 + 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index ad5a31dab0..b5c76d2d50 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -211,7 +211,7 @@ class PageMainHistory extends React.Component { return; }; - let group = month.list.find((it: any) => { return it.groupId == this.groupId(version.time); }); + let group = month.list.find((it: any) => { return it.groupId == version.groupId; }); if (!group) { return; }; @@ -271,7 +271,6 @@ class PageMainHistory extends React.Component { return; }; - message.versions.reverse(); this.setState({ versions: message.versions }); if (!this.version) { @@ -303,11 +302,9 @@ class PageMainHistory extends React.Component { let groups: any[] = []; for (let version of versions) { - let groupId = this.groupId(version.time); - let group = groups.find((it: any) => { return it.groupId == groupId; }); - + let group = groups.find((it: any) => { return it.groupId == version.groupId; }); if (!group) { - group = { ...version, groupId: groupId, list: [] }; + group = { ...version, groupId: version.groupId, list: [] }; groups.push(group); } else { group.list.push(version); @@ -333,10 +330,6 @@ class PageMainHistory extends React.Component { return Util.date('F Y', time); }; - groupId (time: number) { - return Util.date('d F Y H:i', Math.floor(time / 600) * 600); - }; - resize () { const win = $(window); const node = $(ReactDOM.findDOMNode(this)); diff --git a/src/ts/interface/common.tsx b/src/ts/interface/common.tsx index fd5249ac35..0856882ff3 100644 --- a/src/ts/interface/common.tsx +++ b/src/ts/interface/common.tsx @@ -43,5 +43,6 @@ export interface Version { previousIds: string[]; authorId: string; authorName: string; + groupId: number; time: number; }; \ No newline at end of file diff --git a/src/ts/lib/mapper.tsx b/src/ts/lib/mapper.tsx index 6dbccbc46b..5cda167009 100644 --- a/src/ts/lib/mapper.tsx +++ b/src/ts/lib/mapper.tsx @@ -246,6 +246,7 @@ const Mapper = { previousIds: obj.getPreviousidsList() || [], authorId: obj.getAuthorid(), authorName: obj.getAuthorname(), + groupId: obj.getGroupid(), time: obj.getTime(), }; }, From b0bd63c775a07f0abb53ce6006dc577e2b74d330 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Wed, 9 Sep 2020 16:59:10 +0300 Subject: [PATCH 21/27] groups fix --- src/scss/page/main/history.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index c11330a01e..b0304afc80 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -12,7 +12,7 @@ .date { text-transform: uppercase; @include text-very-small; } } - .item { padding: 5px 16px; cursor: pointer; transition: $transitionFast; position: relative; } + .item { padding: 5px 16px 5px 30px; cursor: pointer; transition: $transitionFast; position: relative; } .item { .name { @include text-small; color: #6c6a5f; } .icon.arrow { @@ -28,7 +28,6 @@ .children { .item { padding-left: 30px; } } - .item.withChildren { padding-left: 30px; } .item:hover, .item.active { background: #f3f2ec; } } From 4318309d7dfbfecf8e80d0d06694a9128ac2df20 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 11 Sep 2020 10:48:40 +0300 Subject: [PATCH 22/27] history paging --- src/ts/app.tsx | 2 +- src/ts/component/page/main/history.tsx | 69 ++++++++++++++++++++------ src/ts/component/page/main/index.tsx | 3 +- 3 files changed, 56 insertions(+), 18 deletions(-) diff --git a/src/ts/app.tsx b/src/ts/app.tsx index 3e172296df..379bfb2e1f 100644 --- a/src/ts/app.tsx +++ b/src/ts/app.tsx @@ -255,7 +255,7 @@ class App extends React.Component { this.setWindowEvents(); if (pageId) { - Storage.set('redirectTo', pageId); + Storage.set('redirectTo', '/main/edit/' + pageId); }; }; diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index b5c76d2d50..5ed7b50cf7 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -10,6 +10,7 @@ interface Props extends RouteComponentProps { }; interface State { versions: I.Version[]; + groups: any[]; }; const $ = require('jquery'); @@ -19,12 +20,15 @@ class PageMainHistory extends React.Component { state = { versions: [] as I.Version[], + groups: [] as any[], }; version: I.Version = null; refHeader: any = null; scrollLeft: number = 0; scrollRight: number = 0; + loading: boolean = false; + lastId: string = ''; constructor (props: any) { super(props); @@ -32,7 +36,7 @@ class PageMainHistory extends React.Component { render () { const { match } = this.props; - const versions = this.groupData(this.state.versions); + const { versions, groups } = this.state; const rootId = match.params.id; const root = blockStore.getLeaf(rootId, rootId); @@ -154,9 +158,11 @@ class PageMainHistory extends React.Component {
- {versions.map((item: any, i: number) => { - return
- })} +
+ {groups.map((item: any, i: number) => { + return
+ })} +
@@ -164,7 +170,7 @@ class PageMainHistory extends React.Component { }; componentDidMount () { - this.loadList(); + this.loadList(''); this.resize(); this.setId(); }; @@ -173,7 +179,6 @@ class PageMainHistory extends React.Component { const node = $(ReactDOM.findDOMNode(this)); const sideLeft = node.find('#sideLeft'); const sideRight = node.find('#sideRight'); - const self = this; this.resize(); this.setId(); @@ -185,13 +190,33 @@ class PageMainHistory extends React.Component { sideLeft.scrollTop(this.scrollLeft); sideRight.scrollTop(this.scrollRight); - sideLeft.unbind('scroll').scroll(function () { console.log(self.scrollLeft); self.scrollLeft = $(this).scrollTop(); }); - sideRight.unbind('scroll').scroll(function () { console.log(self.scrollRight); self.scrollRight = $(this).scrollTop(); }); + sideLeft.unbind('scroll').scroll(() => { this.onScrollLeft(); }); + sideRight.unbind('scroll').scroll(() => { this.onScrollRight(); }); + }; + + onScrollLeft () { + const node = $(ReactDOM.findDOMNode(this)); + const sideLeft = node.find('#sideLeft'); + + this.scrollLeft = sideLeft.scrollTop(); + }; + + onScrollRight () { + const { versions } = this.state; + const win = $(window); + const node = $(ReactDOM.findDOMNode(this)); + const sideRight = node.find('#sideRight'); + const wrap = sideRight.find('.wrap'); + + this.scrollRight = sideRight.scrollTop(); + if (this.scrollRight >= wrap.height() - win.height()) { + this.loadList(versions[versions.length - 1].id); + }; }; setId () { const { match } = this.props; - Storage.set('pageId', match.params.id); + Storage.set('redirectTo', '/main/history/' + match.params.id); }; show (id: string) { @@ -199,14 +224,13 @@ class PageMainHistory extends React.Component { return; }; - const { versions } = this.state; - const data = this.groupData(versions); + const { versions, groups } = this.state; const version = versions.find((it: any) => { return it.id == id; }); if (!version) { return; }; - const month = data.find((it: any) => { return it.groupId == this.monthId(version.time); }); + const month = groups.find((it: any) => { return it.groupId == this.monthId(version.time); }); if (!month) { return; }; @@ -262,16 +286,29 @@ class PageMainHistory extends React.Component { }; }; - loadList () { + loadList (lastId: string) { const { match } = this.props; + const { versions, groups } = this.state; const rootId = match.params.id; + + if (this.loading || (this.lastId && (lastId == this.lastId))) { + return; + }; + + this.loading = true; + this.lastId = lastId; + + C.HistoryVersions(rootId, lastId, 100, (message: any) => { + this.loading = false; - C.HistoryVersions(rootId, '', 100, (message: any) => { if (message.error.code || !message.versions.length) { return; }; - this.setState({ versions: message.versions }); + this.setState({ + versions: versions.concat(message.versions), + groups: groups.concat(this.groupData(message.versions)), + }); if (!this.version) { this.loadVersion(message.versions[0].id); @@ -297,7 +334,7 @@ class PageMainHistory extends React.Component { }); }; - groupData (versions: any[]) { + groupData (versions: I.Version[]) { let months: any[] = []; let groups: any[] = []; diff --git a/src/ts/component/page/main/index.tsx b/src/ts/component/page/main/index.tsx index 07c3932996..bf7a729320 100644 --- a/src/ts/component/page/main/index.tsx +++ b/src/ts/component/page/main/index.tsx @@ -78,12 +78,13 @@ class PageMainIndex extends React.Component { }; componentDidMount () { + const { history } = this.props; const node = $(ReactDOM.findDOMNode(this)); const hello = node.find('#hello'); const redirectTo = Storage.get('redirectTo'); if (redirectTo) { - DataUtil.pageOpen(null, redirectTo); + history.push(redirectTo); Storage.delete('redirectTo'); }; From 4732824d63087cf71bb92bdb0c73df167f4d69c8 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 11 Sep 2020 10:51:11 +0300 Subject: [PATCH 23/27] fix --- src/ts/lib/dispatcher.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/ts/lib/dispatcher.tsx b/src/ts/lib/dispatcher.tsx index 1b6b5e174f..fcffc2662b 100644 --- a/src/ts/lib/dispatcher.tsx +++ b/src/ts/lib/dispatcher.tsx @@ -596,13 +596,6 @@ class Dispatcher { 'Render time:', renderTime + 'ms', 'Total time:', totalTime + 'ms' ); - - if (middleTime > 3000) { - Sentry.captureMessage(`${type}: middleware time too long`); - }; - if (renderTime > 1000) { - Sentry.captureMessage(`${type}: render time too long`); - }; }; }); } catch (err) { From e090a0446d3914d7ddac4b5bbc911493f9a9c192 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 11 Sep 2020 12:21:52 +0300 Subject: [PATCH 24/27] #719: history groups --- src/scss/page/main/history.scss | 5 ++- src/ts/component/page/main/history.tsx | 52 +++++++++++++++++++------- 2 files changed, 42 insertions(+), 15 deletions(-) diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index b0304afc80..0ccaa7642a 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -5,12 +5,15 @@ .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); overflow: auto; position: relative; } .loaderWrapper { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; } - .list { width: 254px; border-left: 1px solid #dfddd0; position: relative; z-index: 10; background: #fff; overflow: auto; } + .list { width: 254px; border-left: 1px solid #dfddd0; z-index: 10; position: relative; background: #fff; overflow: auto; } .list { .section { padding: 11px 16px; } .section { .date { text-transform: uppercase; @include text-very-small; } } + .section.fix { position: fixed; right: 0px; top: 0px; background: #fff; width: 253px; } + + .wrap { position: relative; } .item { padding: 5px 16px 5px 30px; cursor: pointer; transition: $transitionFast; position: relative; } .item { diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 5ed7b50cf7..78e37561f0 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -10,17 +10,17 @@ interface Props extends RouteComponentProps { }; interface State { versions: I.Version[]; - groups: any[]; }; const $ = require('jquery'); +const LIMIT = 100; +const GROUP_OFFSET = 300; @observer class PageMainHistory extends React.Component { state = { versions: [] as I.Version[], - groups: [] as any[], }; version: I.Version = null; @@ -36,8 +36,9 @@ class PageMainHistory extends React.Component { render () { const { match } = this.props; - const { versions, groups } = this.state; + const { versions } = this.state; const rootId = match.params.id; + const groups = this.groupData(versions); const root = blockStore.getLeaf(rootId, rootId); if (!this.version || !root) { @@ -207,16 +208,33 @@ class PageMainHistory extends React.Component { const node = $(ReactDOM.findDOMNode(this)); const sideRight = node.find('#sideRight'); const wrap = sideRight.find('.wrap'); + const sections = wrap.find('.section'); this.scrollRight = sideRight.scrollTop(); if (this.scrollRight >= wrap.height() - win.height()) { this.loadList(versions[versions.length - 1].id); }; + + sections.each((i: number, item: any) => { + item = $(item); + const top = item.offset().top; + + let clone = sideRight.find('.section.fix.c' + i); + if (top < 0) { + if (!clone.length) { + clone = item.clone(); + sideRight.prepend(clone); + clone.addClass('fix c' + i).css({ zIndex: i + 1 }); + }; + } else { + clone.remove(); + }; + }); }; setId () { const { match } = this.props; - Storage.set('redirectTo', '/main/history/' + match.params.id); + Storage.set('pageId', match.params.id); }; show (id: string) { @@ -224,12 +242,13 @@ class PageMainHistory extends React.Component { return; }; - const { versions, groups } = this.state; + const { versions } = this.state; const version = versions.find((it: any) => { return it.id == id; }); if (!version) { return; }; + const groups = this.groupData(versions); const month = groups.find((it: any) => { return it.groupId == this.monthId(version.time); }); if (!month) { return; @@ -288,7 +307,7 @@ class PageMainHistory extends React.Component { loadList (lastId: string) { const { match } = this.props; - const { versions, groups } = this.state; + const { versions } = this.state; const rootId = match.params.id; if (this.loading || (this.lastId && (lastId == this.lastId))) { @@ -298,17 +317,14 @@ class PageMainHistory extends React.Component { this.loading = true; this.lastId = lastId; - C.HistoryVersions(rootId, lastId, 100, (message: any) => { + C.HistoryVersions(rootId, lastId, LIMIT, (message: any) => { this.loading = false; if (message.error.code || !message.versions.length) { return; }; - this.setState({ - versions: versions.concat(message.versions), - groups: groups.concat(this.groupData(message.versions)), - }); + this.setState({ versions: versions.concat(message.versions) }); if (!this.version) { this.loadVersion(message.versions[0].id); @@ -337,11 +353,19 @@ class PageMainHistory extends React.Component { groupData (versions: I.Version[]) { let months: any[] = []; let groups: any[] = []; + let groupId = 0; - for (let version of versions) { - let group = groups.find((it: any) => { return it.groupId == version.groupId; }); + for (let i = 0; i < versions.length; ++i) { + let version = versions[i]; + let prev = versions[i - 1]; + + if (prev && (prev.time - version.time > GROUP_OFFSET)) { + groupId++; + }; + + let group = groups.find((it: any) => { return it.groupId == groupId; }); if (!group) { - group = { ...version, groupId: version.groupId, list: [] }; + group = { ...version, groupId: groupId, list: [] }; groups.push(group); } else { group.list.push(version); From 05499f66ff7189d22488f5eead22353100124f41 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Sat, 12 Sep 2020 08:24:02 +0300 Subject: [PATCH 25/27] #720: removed year --- src/ts/component/page/main/history.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index 92a53ad22f..e743da922f 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -100,7 +100,7 @@ class PageMainHistory extends React.Component {
{ this.loadVersion(item.id); }}> {withChildren ? { this.toggleChildren(e, item.id); }} /> : ''} -
{Util.date('d F Y, H:i', item.time)}
+
{Util.date('d F, H:i', item.time)}
{item.authorName ?
{item.authorName}
: ''}
From 9e0b8f56278ad12ea19ce3106d3350cc9e8df618 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Thu, 17 Sep 2020 19:53:36 +0300 Subject: [PATCH 26/27] #730: remove selections from ui --- src/scss/menu/common.scss | 2 ++ src/scss/page/main/history.scss | 1 + src/scss/popup/common.scss | 2 ++ 3 files changed, 5 insertions(+) diff --git a/src/scss/menu/common.scss b/src/scss/menu/common.scss index fc1e1afe1f..335e0de099 100644 --- a/src/scss/menu/common.scss +++ b/src/scss/menu/common.scss @@ -3,6 +3,8 @@ .menus { .dimmer { position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 102; background: rgba(0,0,0,0); } #menu-polygon { z-index: 1000; position: absolute; } + + .menu * { user-select: none; } .menu { border-radius: 8px; color: $colorBlack; position: absolute; z-index: 103; text-align: left; diff --git a/src/scss/page/main/history.scss b/src/scss/page/main/history.scss index 38465bd86b..31bdb0a10a 100644 --- a/src/scss/page/main/history.scss +++ b/src/scss/page/main/history.scss @@ -1,5 +1,6 @@ @import "~scss/_vars"; +.pageMainHistory * { user-select: none; } .pageMainHistory { #body { overflow: hidden; } .wrapper { padding: 38px 0px 0px 0px; width: calc(100% - 254px); overflow: auto; position: relative; } diff --git a/src/scss/popup/common.scss b/src/scss/popup/common.scss index 85f27dd789..0060d8f76f 100644 --- a/src/scss/popup/common.scss +++ b/src/scss/popup/common.scss @@ -6,6 +6,8 @@ .innerWrap { opacity: 1; transform: scale3d(1,1,1); } .dimmer { opacity: 1; } } + + .popup * { user-select: none; } .popup { .innerWrap { From 5578dbdecffa2e82c17773e5ee137c6a638871b4 Mon Sep 17 00:00:00 2001 From: Andrew Simachev Date: Fri, 18 Sep 2020 12:22:59 +0300 Subject: [PATCH 27/27] group fix --- src/ts/component/page/main/history.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/component/page/main/history.tsx b/src/ts/component/page/main/history.tsx index e743da922f..cb2dec5916 100644 --- a/src/ts/component/page/main/history.tsx +++ b/src/ts/component/page/main/history.tsx @@ -359,7 +359,7 @@ class PageMainHistory extends React.Component { let version = versions[i]; let prev = versions[i - 1]; - if (prev && (prev.time - version.time > GROUP_OFFSET)) { + if (prev && ((prev.time - version.time > GROUP_OFFSET) || (prev.time - version.time < 0))) { groupId++; };