github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Get hover state working

Browse source
This commit is contained in:
James Allen 2014-06-26 17:22:06 +01:00
parent 60e5542f35
commit 28f8c9e055
3 changed files with 98 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
services/web/app/views/project/editor/track-changes.jade
View file

@ -1,13 +1,22 @@
div#trackChanges(ng-show="ui.view == 'track-changes'")
aside.change-list
ul.list-unstyled(ng-controller="TrackChangesListController")
aside.change-list(
ng-controller="TrackChangesListController"
)
ul.list-unstyled(
ng-class="{\
'hover-state': trackChanges.hoveringOverListSelectors\
}"
)
li.change(
ng-repeat="update in trackChanges.updates"
ng-class="{\
'first-in-day': update.meta.first_in_day,\
'selected': update.inSelection,\
'selected-to': update.selectedTo,\
'selected-from': update.selectedFrom\
'selected-from': update.selectedFrom,\
'hover-selected': update.inHoverSelection,\
'hover-selected-to': update.hoverSelectedTo,\
'hover-selected-from': update.hoverSelectedFrom,\
}"
ng-controller="TrackChangesListItemController"
)
@ -22,6 +31,9 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
name="fromVersion"
ng-model="update.selectedFrom"
ng-value="true"
ng-mouseover="mouseOverSelectedFrom()"
ng-mouseout="mouseOutSelectedFrom()"
ng-show="update.afterSelection || update.inSelection"
)
form
input.selector-to(
@ -29,6 +41,9 @@ div#trackChanges(ng-show="ui.view == 'track-changes'")
name="toVersion"
ng-model="update.selectedTo"
ng-value="true"
ng-mouseover="mouseOverSelectedTo()"
ng-mouseout="mouseOutSelectedTo()"
ng-show="update.beforeSelection || update.inSelection"
)
div.description(ng-click="select()")

67
services/web/public/coffee/app/ide/track-changes/TrackChangesListController.coffee
View file

@ -2,14 +2,63 @@ define [
"base"
], (App) ->
App.controller "TrackChangesListController", ["$scope", ($scope) ->
$scope.hoveringOverListSelectors = false
$scope.recalculateSelectedUpdates = () ->
beforeSelection = true
afterSelection = false
inSelection = false
for update in $scope.trackChanges.updates
if update.selectedTo
inSelection = true
beforeSelection = false
update.beforeSelection = beforeSelection
update.inSelection = inSelection
update.afterSelection = afterSelection
if update.selectedFrom
inSelection = false
afterSelection = true
$scope.recalculateHoveredUpdates = () ->
hoverSelectedFrom = false
hoverSelectedTo = false
for update in $scope.trackChanges.updates
# Figure out whether the to or from selector is hovered over
if update.hoverSelectedFrom
hoverSelectedFrom = true
if update.hoverSelectedTo
hoverSelectedTo = true
console.log "RECALCULATING HOVER", hoverSelectedFrom, hoverSelectedTo
if hoverSelectedFrom
# We want to 'hover select' everything between hoverSelectedFrom and selectedTo
inHoverSelection = false
for update in $scope.trackChanges.updates
if update.selectedTo
update.hoverSelectedTo = true
inHoverSelection = true
update.inHoverSelection = inHoverSelection
if update.hoverSelectedFrom
inHoverSelection = false
if hoverSelectedTo
# We want to 'hover select' everything between hoverSelectedTo and selectedFrom
inHoverSelection = false
for update in $scope.trackChanges.updates
if update.hoverSelectedTo
inHoverSelection = true
update.inHoverSelection = inHoverSelection
if update.selectedFrom
update.hoverSelectedFrom = true
inHoverSelection = false
$scope.resetHoverState = () ->
for update in $scope.trackChanges.updates
delete update.hoverSelectedFrom
delete update.hoverSelectedTo
delete update.inHoverSelection
]
App.controller "TrackChangesListItemController", ["$scope", ($scope) ->
@ -31,4 +80,22 @@ define [
$scope.update.selectedTo = true
$scope.update.selectedFrom = true
$scope.mouseOverSelectedFrom = () ->
$scope.trackChanges.hoveringOverListSelectors = true
$scope.update.hoverSelectedFrom = true
$scope.recalculateHoveredUpdates()
$scope.mouseOutSelectedFrom = () ->
$scope.trackChanges.hoveringOverListSelectors = false
$scope.resetHoverState()
$scope.mouseOverSelectedTo = () ->
$scope.trackChanges.hoveringOverListSelectors = true
$scope.update.hoverSelectedTo = true
$scope.recalculateHoveredUpdates()
$scope.mouseOutSelectedTo = () ->
$scope.trackChanges.hoveringOverListSelectors = false
$scope.resetHoverState()
]

25
services/web/public/stylesheets/app/editor/track-changes.less
View file

@ -1,11 +1,12 @@
@changesListWidth: 250px;
@changesListPadding: @line-height-computed / 2;
@selector-padding-vertical: @line-height-computed / 3;
@selector-padding-vertical: 10px;
@selector-padding-horizontal: @line-height-computed / 2;
@day-header-height: 24px;
@range-bar-color: @link-color;
@range-bar-selected-offset: 10px;
#trackChanges {
// .track-changes-diff {
@ -220,6 +221,9 @@
}
li.selected {
border-left: 4px solid @range-bar-color;
.day {
padding-left: 0;
}
.description {
padding-left: 34px;
}
@ -233,7 +237,7 @@
li.selected-to {
.selectors {
.range {
top: 10px;
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
@ -243,7 +247,7 @@
li.selected-from {
.selectors {
.range {
bottom: 10px;
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
@ -251,9 +255,6 @@
}
}
li.first-in-day {
.day {
display: block;
}
.selectors {
.selector-to {
top: @day-header-height + @selector-padding-vertical;
@ -263,12 +264,12 @@
li.first-in-day.selected-to {
.selectors {
.range {
top: 33px;
top: @day-header-height + @range-bar-selected-offset;
}
}
}
}
ul.list.hover-state {
ul.hover-state {
li {
.selectors {
.range {
@ -282,14 +283,14 @@
.selectors {
.range {
top: 0;
background-color: #999;
background-color: @gray-light;
}
}
}
li.hover-selected-to {
.selectors {
.range {
top: 10px;
top: @range-bar-selected-offset;
}
.selector-to {
opacity: 1;
@ -299,7 +300,7 @@
li.hover-selected-from {
.selectors {
.range {
bottom: 10px;
bottom: @range-bar-selected-offset;
}
.selector-from {
opacity: 1;
@ -309,7 +310,7 @@
li.first-in-day.hover-selected-to {
.selectors {
.range {
top: 33px;
top: @day-header-height + @range-bar-selected-offset;
}
}
}