From 6f95b5ae802d60ab36400667aea1d04569f70a59 Mon Sep 17 00:00:00 2001 From: Val Erastov Date: Fri, 6 Jul 2018 17:01:58 -0700 Subject: [PATCH] improve history timeline scroll --- web/app/cad/craft/ui/HistoryTimeline.jsx | 59 +++++++++++++++---- web/app/cad/craft/ui/HistoryTimeline.less | 33 ++++++++++- web/app/cad/craft/ui/OperationHistory.less | 4 +- .../cad/craft/ui/SelectedModificationInfo.jsx | 1 - web/app/cad/dom/components/FloatView.jsx | 49 +++++++++++---- web/app/cad/dom/components/FloatView.less | 42 +++++++++++++ web/app/cad/dom/components/View3d.jsx | 4 +- web/app/cad/dom/components/View3d.less | 4 -- 8 files changed, 160 insertions(+), 36 deletions(-) create mode 100644 web/app/cad/dom/components/FloatView.less diff --git a/web/app/cad/craft/ui/HistoryTimeline.jsx b/web/app/cad/craft/ui/HistoryTimeline.jsx index 455be79c..017f0bc3 100644 --- a/web/app/cad/craft/ui/HistoryTimeline.jsx +++ b/web/app/cad/craft/ui/HistoryTimeline.jsx @@ -14,19 +14,52 @@ import {EMPTY_OBJECT} from '../../../../../modules/gems/objects'; import {VIEWER_SELECTOR} from '../../dom/components/View3d'; import {aboveElement} from '../../../../../modules/ui/positionUtils'; -function HistoryTimeline({history, pointer, setHistoryPointer, remove, getOperation}) { - return
- - {history.map((m, i) => - setHistoryPointer(i-1)} /> - - )} - setHistoryPointer(history.length-1)}/> - - -
; + + +class HistoryTimeline extends React.Component { + + render() { + let {history, pointer, setHistoryPointer, remove, getOperation} = this.props; + let scrolly; + return
+ +
scrolly.scrollLeft -= 60}>
+
scrolly = el}> + {history.map((m, i) => + setHistoryPointer(i-1)} /> + + )} + setHistoryPointer(history.length-1)}/> +
+
scrolly.scrollLeft += 60}>
+ + +
; + } + + // scrollInProgressToVisibleRequest = false; + + setHistoryPointerAndRequestScroll = (pointer) => { + // this.scrollInProgressToVisibleRequest = true; + this.props.setHistoryPointer(pointer); + }; + + keepRef = el => this.el = el; + + componentDidUpdate() { + // this.scrollInProgressToVisibleRequest = false; + setTimeout(() => { + let item = this.el.querySelector(`.${ls.historyItem}.${ls.inProgress}`); + if (item) { + item.scrollIntoView({behavior: "smooth", inline: "center"}); + } else { + let history = this.el.querySelector(`.${ls.history}`); + history.scrollLeft = history.scrollWidth; + } + }) + } } const InProgressOperation = connect(streams => streams.wizard.map(wizard => ({wizard})))( diff --git a/web/app/cad/craft/ui/HistoryTimeline.less b/web/app/cad/craft/ui/HistoryTimeline.less index 45fec798..babd78bd 100644 --- a/web/app/cad/craft/ui/HistoryTimeline.less +++ b/web/app/cad/craft/ui/HistoryTimeline.less @@ -3,8 +3,9 @@ .root { background-color: rgba(0, 0, 0, 0.1); display: flex; - align-items: stretch; - height: 34px; + + align-items: flex-end; + height: 48px; //&:hover .timesplitter .handlePoly { // visibility: visible; //} @@ -14,13 +15,37 @@ width: 4px; height: 100%; cursor: pointer; + align-items: flex-end; .handle { - margin-top: -15px; + //margin-top: -15px; margin-left: -4px; font-size: 20px; } } +.history { + display: flex; + align-items: flex-end; + height: 100%; + overflow-x: hidden; + padding: 0 5px; +} +.scroller { + padding: 0 5px; + height: 100%; + display: flex; + align-items: center; + cursor: pointer; + &:hover { + background-color: #BFBFBF; + } + &:active { + background-color: #7e7e7e; + transition: 100ms; + } + +} + .timesplitter.active:not(.eoh) { background-color: #ff940b; @@ -50,6 +75,8 @@ //ITEMS .item { + height: 30px; + flex-shrink: 0; margin: 2px 0; padding: 2px; border: #2e2e2e 1px solid; diff --git a/web/app/cad/craft/ui/OperationHistory.less b/web/app/cad/craft/ui/OperationHistory.less index 7cee7323..9644ff83 100644 --- a/web/app/cad/craft/ui/OperationHistory.less +++ b/web/app/cad/craft/ui/OperationHistory.less @@ -6,8 +6,7 @@ background-color: #780000; } display: flex; - justify-content: space-between; - align-items: baseline; + align-items: center; & .buttons { display: none; } @@ -19,6 +18,7 @@ .buttons { display: none; font-size: 13px; + margin-left: auto; & > * { padding: 0 3px; &.danger:hover { diff --git a/web/app/cad/craft/ui/SelectedModificationInfo.jsx b/web/app/cad/craft/ui/SelectedModificationInfo.jsx index ce0e2452..7d69f52f 100644 --- a/web/app/cad/craft/ui/SelectedModificationInfo.jsx +++ b/web/app/cad/craft/ui/SelectedModificationInfo.jsx @@ -5,7 +5,6 @@ import decoratorChain from '../../../../../modules/ui/decoratorChain'; import {combine, merger} from '../../../../../modules/lstream'; import ls from './SelectedModificationInfo.less'; import ImgIcon from 'ui/components/ImgIcon'; -import YAML from 'yamljs'; import mapContext from 'ui/mapContext'; import {EMPTY_OBJECT} from '../../../../../modules/gems/objects'; import ButtonGroup from '../../../../../modules/ui/components/controls/ButtonGroup'; diff --git a/web/app/cad/dom/components/FloatView.jsx b/web/app/cad/dom/components/FloatView.jsx index 1cc02262..49627d74 100644 --- a/web/app/cad/dom/components/FloatView.jsx +++ b/web/app/cad/dom/components/FloatView.jsx @@ -1,16 +1,45 @@ -import React, {Fragment} from 'react'; +import React from 'react'; import ObjectExplorer from '../../craft/ui/ObjectExplorer'; import OperationHistory from '../../craft/ui/OperationHistory'; import Folder from 'ui/components/Folder'; import Fa from '../../../../../modules/ui/components/Fa'; +import ls from './FloatView.less'; +import cx from 'classnames'; -export default function FloatView() { - return - Model}> - - - Modifications}> - - - ; +export default class FloatView extends React.Component { + + state = { + selected: null + }; + + render() { + return
+
+ {['project', 'history'].map(tabId => this.setState({selected: this.state.selected === tabId ? null : tabId})}>{getIcon(tabId)})} +
+ + {this.state.selected &&
+ {this.state.selected === 'project' && Model}> + + } + {this.state.selected === 'history' && Modifications}> + + } + +
} +
; + } +} + +function Tab({children, selected, onClick}) { + return
{children}
; +} + +function getIcon(id) { + if (id === 'history') { + return ; + } else if (id === 'project') { + return ; + } } \ No newline at end of file diff --git a/web/app/cad/dom/components/FloatView.less b/web/app/cad/dom/components/FloatView.less new file mode 100644 index 00000000..4bd320d4 --- /dev/null +++ b/web/app/cad/dom/components/FloatView.less @@ -0,0 +1,42 @@ +@import "~ui/styles/theme.less"; + +.root { + display: flex; +} + +.tabs { + position: relative; + border-right: 1px solid @border-color; + background-color: @bg-color-alt; + font-size: 13px; +} + +.main { + display: flex; + flex-direction: column; + width: 235px; + flex: 1; + overflow-y: scroll; +} + +.tab { + + border: 1px solid @bg-color; + margin: 3px; + border-radius: 3px; + + padding: 5px 2px; + cursor: pointer; + background-color: @bg-color; + + &:hover { + background-color: #9c9c9c !important; + } + &:active { + transition: 200ms; + background-color: #BFBFBF !important; + } + &.selected { + background-color: #7d7d7d; + } +} diff --git a/web/app/cad/dom/components/View3d.jsx b/web/app/cad/dom/components/View3d.jsx index 1ca8588f..70ca6fd1 100644 --- a/web/app/cad/dom/components/View3d.jsx +++ b/web/app/cad/dom/components/View3d.jsx @@ -20,9 +20,7 @@ export default class View3d extends React.Component { render() { return -
- -
+
diff --git a/web/app/cad/dom/components/View3d.less b/web/app/cad/dom/components/View3d.less index 4c7c5700..b44c9961 100644 --- a/web/app/cad/dom/components/View3d.less +++ b/web/app/cad/dom/components/View3d.less @@ -10,7 +10,3 @@ position: relative; overflow: hidden; } - -.sideBar { - flex-basis: 250px; -}