From 81378f43c1c2b4bf56df036878beba24050da321 Mon Sep 17 00:00:00 2001 From: James Allen Date: Wed, 9 Apr 2014 15:24:26 +0100 Subject: [PATCH] Make a few UI improvements to syncing --- .../public/coffee/pdf/SyncButtonsView.coffee | 54 ++++++++++++------- .../public/js/libs/pdfListView/PdfListView.js | 25 ++++++++- .../web/public/stylesheets/less/editor.less | 4 +- 3 files changed, 62 insertions(+), 21 deletions(-) diff --git a/services/web/public/coffee/pdf/SyncButtonsView.coffee b/services/web/public/coffee/pdf/SyncButtonsView.coffee index 3a4a425c4e..c7b2c3f55f 100644 --- a/services/web/public/coffee/pdf/SyncButtonsView.coffee +++ b/services/web/public/coffee/pdf/SyncButtonsView.coffee @@ -6,40 +6,58 @@ define [ template: $("#syncButtonsTemplate").html() events: - "click .sync-code-to-pdf": () -> @trigger "click:sync-code-to-pdf" - "click .sync-pdf-to-code": () -> @trigger "click:sync-pdf-to-code" + "click .sync-code-to-pdf": () -> + ga('send', 'event', 'editor-interaction', 'sync-code-to-pdf') + @trigger "click:sync-code-to-pdf" + "click .sync-pdf-to-code": () -> + ga('send', 'event', 'editor-interaction', 'sync-pdf-to-code') + @trigger "click:sync-pdf-to-code" initialize: (options) -> @render() @ide = options.ide @ide.editor.on "resize", => @repositionLeft() - @ide.editor.on "cursor:change", => @repositionTop() render: () -> @setElement($(@template)) + + ### These keep screwing up in the UI :( + @$(".sync-code-to-pdf").tooltip({ + title: "Go to code location in the output" + animate: false + placement: "top" + trigger: "hover" + delay: + show: 800 + hide: 0 + }) + @$(".sync-pdf-to-code").tooltip({ + html: true + title: "Go to output location in the code
(Or double click the output)" + animate: false + placement: "bottom" + trigger: "hover" + delay: + show: 800 + hide: 0 + }) + ### return @ hide: () -> @$el.hide() - show: () -> @$el.show() + show: () -> + state = @ide.editor.$splitter.layout().readState() + if !state.east?.initClosed + @$el.show() repositionLeft: () -> state = @ide.editor.$splitter.layout().readState() if state.east? @$el.css({right: state.east.size - 8}) + if state.east.initClosed + @hide() + else + @show() - repositionTop: () -> - # The cursor hasn't actually moved yet. - setTimeout () => - cursor = @ide.editor.getCursorElement() - container = @ide.editor.getContainerElement() - top = cursor.offset().top - container.offset().top - top = top - 6 - - max = @ide.editor.getContainerElement().outerHeight() - @$el.outerHeight() - top = 0 if top < 0 - top = max if top > max - - @$el.css({top: top}) - , 10 diff --git a/services/web/public/js/libs/pdfListView/PdfListView.js b/services/web/public/js/libs/pdfListView/PdfListView.js index 66d7d1ba37..b2bca71872 100644 --- a/services/web/public/js/libs/pdfListView/PdfListView.js +++ b/services/web/public/js/libs/pdfListView/PdfListView.js @@ -144,6 +144,8 @@ RenderController.prototype = { finishedRendering: function(pageView) { var idx = this.renderList.indexOf(pageView); + pageView.callAfterRenderedCallbacks(); + // If the finished pageView is in the list of pages to render, // then remove it from the list and render start rendering the // next page. @@ -408,7 +410,11 @@ ListView.prototype = { for (i = 0; i < highlights.length; i++) { var pageIndex = highlights[i].page; var pageView = this.pageViews[pageIndex]; - pageView.addHighlight(highlights[i].highlight, fromTop); + (function(pageView, highlight) { + pageView.doWhenRendered(function() { + pageView.addHighlight(highlight.highlight, fromTop); + }); + })(pageView, highlights[i]); } }, @@ -489,6 +495,7 @@ function PageView(page, listView) { this.isRendered = false; this.renderState = RenderingStates.INITIAL; + this.afterRenderCallbacks = []; var dom = this.dom = document.createElement('div'); dom.className = "plv-page-view page-view"; @@ -699,6 +706,22 @@ PageView.prototype = { } this.highlightsLayer.addHighlight(left, top, width, height); } + }, + + doWhenRendered: function(callback) { + if (this.isRendered) { + callback() + } else { + this.afterRenderCallbacks.push(callback); + } + }, + + callAfterRenderedCallbacks: function () { + var callbacks = this.afterRenderCallbacks; + for (var i = 0; i < callbacks.length; i++) { + callbacks[i](); + } + this.afterRenderCallbacks = []; } }; diff --git a/services/web/public/stylesheets/less/editor.less b/services/web/public/stylesheets/less/editor.less index 03f1d877d0..5f93c15c30 100644 --- a/services/web/public/stylesheets/less/editor.less +++ b/services/web/public/stylesheets/less/editor.less @@ -207,7 +207,7 @@ body.editor { .sync-buttons { z-index: 3; position: absolute; - top: 0; + top: 45px; right: 0; padding: 2px; background-color: #eee; @@ -242,7 +242,7 @@ body.editor { #pdfArea { background-color: #eee; #pdfToolBar{ - padding: 5px 10px 3px 10px; + padding: 5px 5px 3px 5px; margin: 0; background-color: white; border-bottom: 1px solid #aaa;