diff --git a/services/web/app/views/project/editor/editor.pug b/services/web/app/views/project/editor/editor.pug index 98060725a7..d3a2e7fd8a 100644 --- a/services/web/app/views/project/editor/editor.pug +++ b/services/web/app/views/project/editor/editor.pug @@ -100,15 +100,19 @@ div.full-size( tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToPdf()" + ng-disabled="syncToPdfInFlight" ) - i.synctex-control-icon + i.synctex-control-icon(ng-show="!syncToPdfInFlight") + i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToPdfInFlight") a.btn.btn-default.btn-xs.synctex-control.synctex-control-goto-code( tooltip-html="'"+translate('go_to_pdf_location_in_code', {}, true)+"'" tooltip-placement="right" tooltip-append-to-body="true" ng-click="syncToCode()" + ng-disabled="syncToCodeInFlight" ) - i.synctex-control-icon + i.synctex-control-icon(ng-show="!syncToCodeInFlight") + i.synctex-spin-icon.fa.fa-refresh.fa-spin(ng-show="syncToCodeInFlight") div.full-size( ng-if="ui.pdfLayout == 'flat'" diff --git a/services/web/app/views/project/editor/file-tree.pug b/services/web/app/views/project/editor/file-tree.pug index cac3f1e715..5117e27a2c 100644 --- a/services/web/app/views/project/editor/file-tree.pug +++ b/services/web/app/views/project/editor/file-tree.pug @@ -2,13 +2,13 @@ aside.editor-sidebar.full-size( ng-controller="FileTreeController" ng-class="{ 'multi-selected': multiSelectedCount > 0 }" ng-show="ui.view != 'history' || !history.isV2" - vertical-resizable-panes=user.betaProgram && "outline-resizer" - vertical-resizable-panes-toggled-externally-on=user.betaProgram && "outline-toggled" - vertical-resizable-panes-min-size=user.betaProgram && "32" - vertical-resizable-panes-max-size=user.betaProgram && "75%" + vertical-resizable-panes="outline-resizer" + vertical-resizable-panes-toggled-externally-on="outline-toggled" + vertical-resizable-panes-min-size="32" + vertical-resizable-panes-max-size="75%" ) .file-tree( - vertical-resizable-top=user.betaProgram + vertical-resizable-top ) .toolbar.toolbar-filetree(ng-if="permissions.write") a( @@ -99,20 +99,19 @@ aside.editor-sidebar.full-size( span {{ entity.name }} - if user.betaProgram - .outline-container( - vertical-resizable-bottom - ng-controller="OutlineController" + .outline-container( + vertical-resizable-bottom + ng-controller="OutlineController" + ) + outline-pane( + is-tex-file="isTexFile" + outline="outline" + project-id="project_id" + jump-to-line="jumpToLine" + on-toggle="onToggle" + event-tracking="eventTracking" + highlighted-line="highlightedLine" ) - outline-pane( - is-tex-file="isTexFile" - outline="outline" - project-id="project_id" - jump-to-line="jumpToLine" - on-toggle="onToggle" - event-tracking="eventTracking" - highlighted-line="highlightedLine" - ) script(type='text/ng-template', id='entityListItemTemplate') @@ -156,8 +155,7 @@ script(type='text/ng-template', id='entityListItemTemplate') dropdown, ng-if="permissions.write" ) - a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click") - i.fa.fa-chevron-down + a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click") ul.dropdown-menu.dropdown-menu-right li @@ -214,7 +212,7 @@ script(type='text/ng-template', id='entityListItemTemplate') ) i.fa.fa-fw.toggle( ng-if="entity.type == 'folder'" - ng-class="{'fa-chevron-right': !expanded, 'fa-chevron-down': expanded}" + ng-class="{'fa-angle-right': !expanded, 'fa-angle-down': expanded}" ng-click="toggleExpanded()" ) @@ -245,8 +243,7 @@ script(type='text/ng-template', id='entityListItemTemplate') dropdown, ng-if="permissions.write" ) - a.dropdown-toggle(href, dropdown-toggle, stop-propagation="click") - i.fa.fa-chevron-down + a.dropdown-toggle.file-tree-dropdown-toggle(href, dropdown-toggle, stop-propagation="click") ul.dropdown-menu.dropdown-menu-right li diff --git a/services/web/frontend/js/ide/editor/EditorManager.js b/services/web/frontend/js/ide/editor/EditorManager.js index f2daefac9d..8efc0f644c 100644 --- a/services/web/frontend/js/ide/editor/EditorManager.js +++ b/services/web/frontend/js/ide/editor/EditorManager.js @@ -139,8 +139,8 @@ export default (EditorManager = (function() { sl_console.log(`[openDoc] Opening ${doc.id}`) this.$scope.ui.view = 'editor' - const done = () => { - this.$scope.$broadcast('doc:after-opened') + const done = isNewDoc => { + this.$scope.$broadcast('doc:after-opened', { isNewDoc }) if (options.gotoLine != null) { // allow Ace to display document before moving, delay until next tick // added delay to make this happen later that gotoStoredPosition in @@ -163,7 +163,7 @@ export default (EditorManager = (function() { // automatically update the file tree whenever the file is opened this.ide.fileTreeManager.selectEntity(doc) this.$scope.$apply(() => { - return done() + return done(false) }) return } @@ -192,7 +192,7 @@ export default (EditorManager = (function() { return this.$scope.$apply(() => { this.$scope.editor.opening = false this.$scope.editor.sharejs_doc = sharejs_doc - return done() + return done(true) }) }) } diff --git a/services/web/frontend/js/ide/outline/OutlineManager.js b/services/web/frontend/js/ide/outline/OutlineManager.js index 4369a3f77a..440bcd192b 100644 --- a/services/web/frontend/js/ide/outline/OutlineManager.js +++ b/services/web/frontend/js/ide/outline/OutlineManager.js @@ -18,9 +18,17 @@ class OutlineManager { this.ignoreNextScroll = false this.ignoreNextCursorUpdate = false - scope.$on('doc:after-opened', () => { + scope.$on('doc:after-opened', (ev, { isNewDoc }) => { + if (isNewDoc) { + // if a new doc is opened a cursor updates will be triggered before the + // content is loaded. We have to ignore it or the outline highlight + // will be incorrect. This doesn't happen when `doc:after-opened` is + // fired without a new doc opened. + this.ignoreNextCursorUpdate = true + } + // always ignore the next scroll update so the cursor update takes + // precedence this.ignoreNextScroll = true - this.ignoreNextCursorUpdate = true this.shareJsDoc = scope.editor.sharejs_doc this.isTexFile = isValidTeXFile(scope.editor.open_doc_name) this.updateOutline() diff --git a/services/web/frontend/js/ide/outline/components/OutlineItem.js b/services/web/frontend/js/ide/outline/components/OutlineItem.js index 42a8f8b2d6..48548bb70d 100644 --- a/services/web/frontend/js/ide/outline/components/OutlineItem.js +++ b/services/web/frontend/js/ide/outline/components/OutlineItem.js @@ -3,6 +3,14 @@ import PropTypes from 'prop-types' import classNames from 'classnames' import OutlineList from './OutlineList' +function getChildrenLines(children) { + return (children || []) + .map(child => { + return getChildrenLines(child.children).concat(child.line) + }) + .flat() +} + function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) { const [expanded, setExpanded] = useState(true) const titleElementRef = createRef() @@ -17,8 +25,13 @@ function OutlineItem({ outlineItem, jumpToLine, highlightedLine }) { 'fa-angle-right': !expanded }) + const hasHighlightedChild = + !expanded && + getChildrenLines(outlineItem.children).includes(highlightedLine) + const itemLinkClasses = classNames('outline-item-link', { - 'outline-item-link-highlight': highlightedLine === outlineItem.line + 'outline-item-link-highlight': + highlightedLine === outlineItem.line || hasHighlightedChild }) function handleExpandCollapseClick() { diff --git a/services/web/frontend/js/ide/outline/components/OutlinePane.js b/services/web/frontend/js/ide/outline/components/OutlinePane.js index b29ac7263f..e4750ab1e2 100644 --- a/services/web/frontend/js/ide/outline/components/OutlinePane.js +++ b/services/web/frontend/js/ide/outline/components/OutlinePane.js @@ -55,19 +55,19 @@ function OutlinePane({ >

File outline

- - - - The File outline is a beta feature. Click here to manage your - beta program membership. - - - + {expanded ? ( + + ev.stopPropagation()} + > + {infoContent} + + + ) : null} {expanded && isTexFile ? ( @@ -83,11 +83,13 @@ function OutlinePane({ ) } -const tooltip = ( - - The File outline is a beta feature. - +const infoContent = ( + <> + The File outline is a new feature. Click the icon to give + feedback. + ) +const tooltip = {infoContent} OutlinePane.propTypes = { isTexFile: PropTypes.bool.isRequired, diff --git a/services/web/frontend/js/ide/outline/components/OutlineRoot.js b/services/web/frontend/js/ide/outline/components/OutlineRoot.js index a45b643816..c83337e861 100644 --- a/services/web/frontend/js/ide/outline/components/OutlineRoot.js +++ b/services/web/frontend/js/ide/outline/components/OutlineRoot.js @@ -21,7 +21,7 @@ function OutlineRoot({ outline, jumpToLine, highlightedLine }) { target="_blank" rel="noopener noreferrer" > - Know more about the file outline + Find out more about the file outline )} diff --git a/services/web/frontend/js/ide/pdf/controllers/PdfController.js b/services/web/frontend/js/ide/pdf/controllers/PdfController.js index 3c0eb382f2..95a2a52293 100644 --- a/services/web/frontend/js/ide/pdf/controllers/PdfController.js +++ b/services/web/frontend/js/ide/pdf/controllers/PdfController.js @@ -973,6 +973,8 @@ App.factory('synctex', function(ide, $http, $q) { App.controller('PdfSynctexController', function($scope, synctex, ide) { this.cursorPosition = null + $scope.syncToPdfInFlight = false + $scope.syncToCodeInFlight = false ide.$scope.$on('cursor:editor:update', (event, cursorPosition) => { this.cursorPosition = cursorPosition }) @@ -981,14 +983,19 @@ App.controller('PdfSynctexController', function($scope, synctex, ide) { if (this.cursorPosition == null) { return } - synctex.syncToPdf(this.cursorPosition).then(highlights => { - $scope.pdf.highlights = highlights - }) + $scope.syncToPdfInFlight = true + synctex + .syncToPdf(this.cursorPosition) + .then(highlights => { + $scope.pdf.highlights = highlights + }) + .finally(() => ($scope.syncToPdfInFlight = false)) } ide.$scope.$on('cursor:editor:syncToPdf', $scope.syncToPdf) $scope.syncToCode = function() { + $scope.syncToCodeInFlight = true synctex .syncToCode($scope.pdf.position, { includeVisualOffset: true, @@ -998,6 +1005,7 @@ App.controller('PdfSynctexController', function($scope, synctex, ide) { const { doc, line } = data ide.editorManager.openDoc(doc, { gotoLine: line }) }) + .finally(() => ($scope.syncToCodeInFlight = false)) } }) diff --git a/services/web/frontend/stylesheets/app/editor/file-tree.less b/services/web/frontend/stylesheets/app/editor/file-tree.less index 4242e4fd4c..ed0c2063e0 100644 --- a/services/web/frontend/stylesheets/app/editor/file-tree.less +++ b/services/web/frontend/stylesheets/app/editor/file-tree.less @@ -142,10 +142,30 @@ i.toggle { width: 24px; padding: 6px; - font-size: 0.7rem; + font-size: 16px; color: @file-tree-item-toggle-color; } + .file-tree-dropdown-toggle { + display: flex; + align-items: center; + color: #fff; + white-space: pre; + line-height: 6px; + font-size: 20px; + height: 100%; + padding: 0 12px 0 18px; + + &:hover, + &:focus { + text-decoration: none; + } + &::before { + content: '\00B7\A\00B7\A\00B7'; + margin-top: -4px; + } + } + &.multi-selected { > .entity { > .entity-name { @@ -172,9 +192,6 @@ .dropdown { position: absolute; right: 0; - > a { - padding: 0 12px; - } } .rename-input { @@ -234,7 +251,8 @@ .fake-full-width-bg(@file-tree-item-selected-bg); .entity-menu-toggle { - display: inline; + display: inline-block; + height: 100%; } } } diff --git a/services/web/frontend/stylesheets/app/editor/outline.less b/services/web/frontend/stylesheets/app/editor/outline.less index 342a1fc13e..8f93e731c7 100644 --- a/services/web/frontend/stylesheets/app/editor/outline.less +++ b/services/web/frontend/stylesheets/app/editor/outline.less @@ -62,19 +62,21 @@ text-overflow: ellipsis; } -.outline-header-beta-badge { +.outline-header-info-badge { display: inline-block; - border-radius: @border-radius-base; - background-color: @orange; width: @outline-h-rhythm * 0.75; height: @outline-v-rhythm * 0.75; line-height: @outline-v-rhythm * 0.75; text-align: center; cursor: pointer; + background-color: @info-badge-bg; + font-family: @font-family-serif; color: #fff; + font-style: italic; + border-radius: @outline-h-rhythm * 0.375; &::before { - content: 'β'; + content: 'i'; } &:hover, @@ -174,6 +176,7 @@ border-radius: @border-radius-base; overflow: hidden; text-overflow: ellipsis; + text-align: left; &:hover, &:focus { outline: 0; diff --git a/services/web/frontend/stylesheets/app/editor/pdf.less b/services/web/frontend/stylesheets/app/editor/pdf.less index 1d60187e02..500912114c 100644 --- a/services/web/frontend/stylesheets/app/editor/pdf.less +++ b/services/web/frontend/stylesheets/app/editor/pdf.less @@ -233,6 +233,11 @@ background-color: fade(@btn-default-bg, 80%); transition: background 0.15s ease; + &[disabled] { + opacity: 1; + background-color: fade(@btn-default-bg, 60%); + } + > .synctex-control-icon { display: inline-block; font: normal normal normal 14px/1 FontAwesome; @@ -241,6 +246,10 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } + + > .synctex-spin-icon { + margin-top: 2px; + } } .synctex-control-goto-pdf > .synctex-control-icon { diff --git a/services/web/frontend/stylesheets/app/project-list.less b/services/web/frontend/stylesheets/app/project-list.less index 35d1723f75..903b2aca00 100644 --- a/services/web/frontend/stylesheets/app/project-list.less +++ b/services/web/frontend/stylesheets/app/project-list.less @@ -325,8 +325,7 @@ ul.folders-menu { } > li.folders-menu-item-with-tooltip { > a { - padding-right: 1.5 * @folders-menu-item-h-padding + - @folders-menu-tooltip-size; + padding-right: 1.5 * @folders-menu-item-h-padding + @info-badge-size; } } > li > a.small { @@ -414,15 +413,15 @@ ul.folders-menu { position: absolute; top: 50%; right: @folders-menu-item-h-padding; - width: @folders-menu-tooltip-size; - height: @folders-menu-tooltip-size; - margin-top: -(floor(@folders-menu-tooltip-size / 2)); - line-height: @folders-menu-tooltip-size; - background-color: @folders-menu-tooltip-bg; + width: @info-badge-size; + height: @info-badge-size; + margin-top: -(floor(@info-badge-size / 2)); + line-height: @info-badge-size; + background-color: @info-badge-bg; font-family: @font-family-serif; color: #fff; font-style: italic; - border-radius: ceil(@folders-menu-tooltip-size / 2); + border-radius: ceil(@info-badge-size / 2); text-align: center; font-weight: 700; @media (min-width: @screen-sm-min) { diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index a57b648289..e9105d7ef4 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -956,8 +956,8 @@ @folders-tag-border-color: @folders-tag-menu-color; @folders-tag-menu-active-hover: rgba(0, 0, 0, 0.1); @folders-tag-menu-hover: rgba(0, 0, 0, 0.1); -@folders-menu-tooltip-size: 21px; -@folders-menu-tooltip-bg: @ol-blue; +@info-badge-size: 21px; +@info-badge-bg: @ol-blue; // Progress bars @progress-border-radius: @line-height-computed; @progress-border-width: 0;