diff --git a/services/web/app/views/templates.jade b/services/web/app/views/templates.jade index e692d86b42..ee2a4ab165 100644 --- a/services/web/app/views/templates.jade +++ b/services/web/app/views/templates.jade @@ -430,7 +430,11 @@ .track-changes-diff script(type='text/template')#changeListItemTemplate - a(href="#") + div(class='change-selectors') + input(type="radio",name="fromVersion").change-selector-from + input(type="radio",name="toVersion").change-selector-to + + div(class='change-description') div(class='change-message') {{user_id}} div(class='change-date') {{end_ts}} div(class='change-date') {{start_ts}} diff --git a/services/web/public/coffee/track-changes/ChangeListView.coffee b/services/web/public/coffee/track-changes/ChangeListView.coffee index 4565fcd5d7..b4a9e1ca13 100644 --- a/services/web/public/coffee/track-changes/ChangeListView.coffee +++ b/services/web/public/coffee/track-changes/ChangeListView.coffee @@ -18,6 +18,9 @@ define [ @collection.on "reset", (collection) -> self.addItem model for model in collection.models + @selectedFromIndex = 0 + @selectedToIndex = 0 + @render() @hideLoading() @@ -28,13 +31,36 @@ define [ this addItem: (model) -> + index = @collection.indexOf(model) view = new ChangeListItemView(model : model) @itemViews.push view - index = @collection.indexOf(model) elementAtIndex = @$(".change-list").children()[index] view.$el.insertBefore(elementAtIndex) + view.on "click", (e, v) => - @trigger "change_diff", v.model.get("version") + @selectedToIndex = index + @selectedFromIndex = index + @resetAllSelectors() + @triggerChangeDiff() + + view.on "selected:to", (e, v) => + @selectedToIndex = index + @resetAllSelectors() + @triggerChangeDiff() + + view.on "selected:from", (e, v) => + @selectedFromIndex = index + @resetAllSelectors() + @triggerChangeDiff() + + view.resetSelector(index, @selectedFromIndex, @selectedToIndex) + + resetAllSelectors: () -> + for view, i in @itemViews + view.resetSelector(i, @selectedFromIndex, @selectedToIndex) + + triggerChangeDiff: () -> + @trigger "change_diff", @collection.models[@selectedFromIndex], @collection.models[@selectedToIndex] listShorterThanContainer: -> @$el.height() > @$(".change-list").height() @@ -84,7 +110,9 @@ define [ tagName: "li" events: - "click a": "onClick" + "click .change-description" : "onClick" + "click .change-selector-from" : "onFromSelectorClick" + "click .change-selector-to" : "onToSelectorClick" template : $("#changeListItemTemplate").html() @@ -105,5 +133,61 @@ define [ e.preventDefault() @trigger "click", e, @ + onToSelectorClick: (e) -> + @trigger "selected:to", e, @ + + onFromSelectorClick: (e) -> + @trigger "selected:from", e, @ + + isSelectedFrom: () -> + @$(".change-selector-from").is(":checked") + + isSelectedTo: () -> + @$(".change-selector-to").is(":checked") + + hideFromSelector: () -> + @$(".change-selector-from").hide() + + showFromSelector: () -> + @$(".change-selector-from").show() + + hideToSelector: () -> + @$(".change-selector-to").hide() + + showToSelector: () -> + @$(".change-selector-to").show() + + setFromChecked: (checked) -> + @$(".change-selector-from").prop("checked", checked) + + setToChecked: (checked) -> + @$(".change-selector-to").prop("checked", checked) + + setSelected: () -> + @$el.addClass("selected") + + setUnselected: () -> + @$el.removeClass("selected") + + resetSelector: (myIndex, selectedFromIndex, selectedToIndex) -> + if myIndex >= selectedToIndex + @showFromSelector() + else + @hideFromSelector() + + if myIndex <= selectedFromIndex + @showToSelector() + else + @hideToSelector() + + if selectedToIndex <= myIndex <= selectedFromIndex + @setSelected() + else + @setUnselected() + + @setFromChecked(myIndex == selectedFromIndex) + @setToChecked(myIndex == selectedToIndex) + + return ChangeListView diff --git a/services/web/public/coffee/track-changes/TrackChangesManager.coffee b/services/web/public/coffee/track-changes/TrackChangesManager.coffee index a7588169b5..a385f56fed 100644 --- a/services/web/public/coffee/track-changes/TrackChangesManager.coffee +++ b/services/web/public/coffee/track-changes/TrackChangesManager.coffee @@ -24,12 +24,12 @@ define [ @changeListView.render() @changeListView.loadUntilFull() - @changeListView.on "change_diff", (version) => + @changeListView.on "change_diff", (fromModel, toModel) => @diff = new Diff({ project_id: @project_id doc_id: @doc_id - from: version - to: version + from: fromModel.get("version") + to: toModel.get("version") }) @diffView = new DiffView( model: @diff diff --git a/services/web/public/stylesheets/less/trackchanges.less b/services/web/public/stylesheets/less/trackchanges.less index 2423530631..77c4169798 100644 --- a/services/web/public/stylesheets/less/trackchanges.less +++ b/services/web/public/stylesheets/less/trackchanges.less @@ -1,10 +1,10 @@ -@changesListWidth: 200px; -@versionsListPadding: 10px; +@changesListWidth: 250px; +@changesListPadding: 10px; #trackChangesPanel { .track-changes-diff { position: absolute; - right: @versionsListWidth + 1px; + right: @changesListWidth + 1px; left: 0; top: 0; bottom: 0; @@ -22,7 +22,7 @@ .track-changes-side-bar { border-left: 1px solid #999; height: 100%; - width: @versionsListWidth; + width: @changesListWidth; position: absolute; right: 0; } @@ -50,4 +50,32 @@ left: 0; } } + + ul.change-list { + li { + padding: 4px; + position: relative; + .change-selectors { + position: absolute; + top: 4px; + left: 4px; + .change-selector-from { + position: absolute; + top: 0; + left: 0; + } + .change-selector-to { + position: absolute; + top: 0; + left: 20px; + } + } + .change-description { + padding-left: 40px; + } + } + li.selected { + background-color: rgb(190, 226, 244); + } + } } \ No newline at end of file