github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-20 11:03:40 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add custom styling; add code to handle point-in-time selection.

Browse source
This commit is contained in:
Paulo Reis 2018-05-01 17:27:51 +01:00
parent 6e6bc91130
commit 9f6dc12658
9 changed files with 103 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
services/web/app/views/project/editor/history/entriesListV2.pug
View file

@ -9,6 +9,7 @@ aside.change-list(
load-disabled="history.loading || history.atEnd"
load-initialize="ui.view == 'history'"
is-loading="history.loading"
on-entry-select="handleEntrySelect(selectedEntry)"
)
@ -23,6 +24,7 @@ script(type="text/ng-template", id="historyEntriesListTpl")
ng-repeat="entry in $ctrl.entries"
entry="entry"
current-user="$ctrl.currentUser"
on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
)
.loading(ng-show="history.loading")
i.fa.fa-spin.fa-refresh
@ -31,13 +33,13 @@ script(type="text/ng-template", id="historyEntriesListTpl")
script(type="text/ng-template", id="historyEntryTpl")
.history-entry(
ng-class="{\
'first-in-day': $ctrl.entry.meta.first_in_day,\
'selected': $ctrl.entry.inSelection,\
'selected-to': $ctrl.entry.selectedTo,\
'selected-from': $ctrl.entry.selectedFrom,\
'hover-selected': $ctrl.entry.inHoverSelection,\
'hover-selected-to': $ctrl.entry.hoverSelectedTo,\
'hover-selected-from': $ctrl.entry.hoverSelectedFrom,\
'history-entry-first-in-day': $ctrl.entry.meta.first_in_day,\
'history-entry-selected': $ctrl.entry.inSelection,\
'history-entry-selected-to': $ctrl.entry.selectedTo,\
'history-entry-selected-from': $ctrl.entry.selectedFrom,\
'history-entry-hover-selected': $ctrl.entry.inHoverSelection,\
'history-entry-hover-selected-to': $ctrl.entry.hoverSelectedTo,\
'history-entry-hover-selected-from': $ctrl.entry.hoverSelectedFrom,\
}"
)
@ -66,7 +68,7 @@ script(type="text/ng-template", id="historyEntryTpl")
//- ng-show="$ctrl.entry.beforeSelection || $ctrl.entry.inSelection"
)
.history-entry-details(ng-click="select()")
.history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })")
ol.history-entry-changes
li.history-entry-change(
ng-repeat="pathname in ::$ctrl.entry.pathnames"

37
services/web/public/coffee/ide/history/HistoryV2Manager.coffee
View file

@ -2,12 +2,13 @@ define [
"moment"
"ide/colors/ColorManager"
"ide/history/util/displayNameForUser"
"ide/history/util/HistoryViewModes"
"ide/history/controllers/HistoryListController"
"ide/history/controllers/HistoryDiffController"
"ide/history/directives/infiniteScroll"
"ide/history/components/historyEntriesList"
"ide/history/components/historyEntry"
], (moment, ColorManager, displayNameForUser) ->
], (moment, ColorManager, displayNameForUser, HistoryViewModes) ->
class HistoryManager
constructor: (@ide, @$scope) ->
@reset()
@ -18,13 +19,13 @@ define [
else
@show()
@$scope.$watch "history.selection.updates", (updates) =>
if updates? and updates.length > 0
@_selectDocFromUpdates()
@reloadDiff()
# @$scope.$watch "history.selection.updates", (updates) =>
# if updates? and updates.length > 0
# @_selectDocFromUpdates()
# @reloadDiff()
@$scope.$watch "history.selection.pathname", () =>
@reloadDiff()
# @$scope.$watch "history.selection.pathname", () =>
# @reloadDiff()
show: () ->
@$scope.ui.view = "history"
@ -37,6 +38,7 @@ define [
@$scope.history = {
isV2: true
updates: []
viewMode: HistoryViewModes.POINT_IN_TIME
nextBeforeTimestamp: null
atEnd: false
selection: {
@ -72,6 +74,21 @@ define [
@$scope.history.updates[indexOfLastUpdateNotByMe].selectedFrom = true
autoSelectLastUpdate: () ->
return if @$scope.history.updates.length == 0
@$scope.history.updates[0].selectedTo = true
@$scope.history.updates[0].selectedFrom = true
selectUpdate: (update) ->
selectedUpdateIndex = @$scope.history.updates.indexOf update
if selectedUpdateIndex == -1
selectedUpdateIndex = 0
for update in @$scope.history.updates
update.selectedTo = false
update.selectedFrom = false
@$scope.history.updates[selectedUpdateIndex].selectedTo = true
@$scope.history.updates[selectedUpdateIndex].selectedFrom = true
BATCH_SIZE: 10
fetchNextBatchOfUpdates: () ->
url = "/project/#{@ide.project_id}/updates?min_count=#{@BATCH_SIZE}"
@ -202,7 +219,11 @@ define [
@$scope.history.updates =
@$scope.history.updates.concat(updates)
@autoSelectRecentUpdates() if firstLoad
if firstLoad
if @$scope.history.viewMode == HistoryViewModes.COMPARE
@autoSelectRecentUpdates()
else
@autoSelectLastUpdate()
_perDocSummaryOfUpdates: (updates) ->
# Track current_pathname -> original_pathname

3
services/web/public/coffee/ide/history/components/historyEntriesList.coffee
View file

@ -2,7 +2,7 @@ define [
"base"
], (App) ->
historyEntriesListController = ($scope, $element, $attrs) ->
ctrl = @
ctrl = @
return
App.component "historyEntriesList", {
@ -13,6 +13,7 @@ define [
loadInitialize: "<"
isLoading: "<"
currentUser: "<"
onEntrySelect: "&"
controller: historyEntriesListController
templateUrl: "historyEntriesListTpl"
}

1
services/web/public/coffee/ide/history/components/historyEntry.coffee
View file

@ -19,6 +19,7 @@ define [
bindings:
entry: "<"
currentUser: "<"
onSelect: "&"
controller: historyEntryController
templateUrl: "historyEntryTpl"
}

67
services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee
View file

@ -9,6 +9,11 @@ define [
$scope.loadMore = () =>
ide.historyManager.fetchNextBatchOfUpdates()
$scope.handleEntrySelect = (entry) ->
# $scope.$applyAsync () ->
ide.historyManager.selectUpdate(entry)
$scope.recalculateSelectedUpdates()
$scope.recalculateSelectedUpdates = () ->
beforeSelection = true
afterSelection = false
@ -70,41 +75,41 @@ define [
$scope.recalculateSelectedUpdates()
]
App.controller "HistoryListItemController", ["$scope", "event_tracking", ($scope, event_tracking) ->
$scope.$watch "update.selectedFrom", (selectedFrom, oldSelectedFrom) ->
if selectedFrom
for update in $scope.history.updates
update.selectedFrom = false unless update == $scope.update
$scope.recalculateSelectedUpdates()
# App.controller "HistoryListItemController", ["$scope", "event_tracking", ($scope, event_tracking) ->
# $scope.$watch "update.selectedFrom", (selectedFrom, oldSelectedFrom) ->
# if selectedFrom
# for update in $scope.history.updates
# update.selectedFrom = false unless update == $scope.update
# $scope.recalculateSelectedUpdates()
$scope.$watch "update.selectedTo", (selectedTo, oldSelectedTo) ->
if selectedTo
for update in $scope.history.updates
update.selectedTo = false unless update == $scope.update
$scope.recalculateSelectedUpdates()
# $scope.$watch "update.selectedTo", (selectedTo, oldSelectedTo) ->
# if selectedTo
# for update in $scope.history.updates
# update.selectedTo = false unless update == $scope.update
# $scope.recalculateSelectedUpdates()
$scope.select = () ->
event_tracking.sendMB "history-view-change"
$scope.update.selectedTo = true
$scope.update.selectedFrom = true
# $scope.select = () ->
# event_tracking.sendMB "history-view-change"
# $scope.update.selectedTo = true
# $scope.update.selectedFrom = true
$scope.mouseOverSelectedFrom = () ->
$scope.history.hoveringOverListSelectors = true
$scope.update.hoverSelectedFrom = true
$scope.recalculateHoveredUpdates()
# $scope.mouseOverSelectedFrom = () ->
# $scope.history.hoveringOverListSelectors = true
# $scope.update.hoverSelectedFrom = true
# $scope.recalculateHoveredUpdates()
$scope.mouseOutSelectedFrom = () ->
$scope.history.hoveringOverListSelectors = false
$scope.resetHoverState()
# $scope.mouseOutSelectedFrom = () ->
# $scope.history.hoveringOverListSelectors = false
# $scope.resetHoverState()
$scope.mouseOverSelectedTo = () ->
$scope.history.hoveringOverListSelectors = true
$scope.update.hoverSelectedTo = true
$scope.recalculateHoveredUpdates()
# $scope.mouseOverSelectedTo = () ->
# $scope.history.hoveringOverListSelectors = true
# $scope.update.hoverSelectedTo = true
# $scope.recalculateHoveredUpdates()
$scope.mouseOutSelectedTo = () ->
$scope.history.hoveringOverListSelectors = false
$scope.resetHoverState()
# $scope.mouseOutSelectedTo = () ->
# $scope.history.hoveringOverListSelectors = false
# $scope.resetHoverState()
$scope.displayName = displayNameForUser
]
# $scope.displayName = displayNameForUser
# ]

4
services/web/public/coffee/ide/history/util/HistoryViewModes.coffee Normal file
View file

@ -0,0 +1,4 @@
define [], () ->
HistoryViewModes =
POINT_IN_TIME : 'point_in_time'
COMPARE : 'compare'

9
services/web/public/stylesheets/app/editor/history-v2.less
View file

@ -17,6 +17,12 @@
background-color: #FFF;
margin-bottom: 2px;
padding: 5px 10px;
cursor: pointer;
.history-entry-selected & {
background-color: @history-entry-selected-bg;
color: #FFF;
}
}
.history-entry-changes {
.list-unstyled;
@ -33,6 +39,9 @@
color: @history-highlight-color;
font-weight: bold;
word-break: break-all;
.history-entry-selected & {
color: #FFF;
}
}
.history-entry-metadata {

11
services/web/public/stylesheets/core/_common-variables.less
View file

@ -975,8 +975,9 @@
@sys-msg-border : 1px solid @common-border-color;
// v2 History
@history-base-font-size : @font-size-small;
@history-base-bg : @gray-lightest;
@history-entry-day-bg : @gray-dark;
@history-base-color : @gray-light;
@history-highlight-color : @gray;
@history-base-font-size : @font-size-small;
@history-base-bg : @gray-lightest;
@history-entry-day-bg : @gray-dark;
@history-entry-selected-bg : @red;
@history-base-color : @gray-light;
@history-highlight-color : @gray;

11
services/web/public/stylesheets/core/ol-variables.less
View file

@ -267,11 +267,12 @@
// v2 History
@history-base-font-size : @font-size-small;
@history-base-bg : @ol-blue-gray-1;
@history-entry-day-bg : @ol-blue-gray-2;
@history-base-color : @ol-blue-gray-2;
@history-highlight-color : @ol-type-color;
@history-base-font-size : @font-size-small;
@history-base-bg : @ol-blue-gray-1;
@history-entry-day-bg : @ol-blue-gray-2;
@history-entry-selected-bg : @ol-green;
@history-base-color : @ol-blue-gray-2;
@history-highlight-color : @ol-type-color;
// System messages
@sys-msg-background : @ol-blue;