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

Add history labels view.

Browse source
This commit is contained in:
Paulo Reis 2018-08-08 13:46:43 +01:00
parent cd853abb3c
commit f2b957e5b3
8 changed files with 103 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -70,10 +70,10 @@ script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
script(type="text/ng-template", id="historyLabelTpl") script(type="text/ng-template", id="historyLabelTpl")
.history-entry-label( .history-label(
ng-class="{ 'history-entry-label-own' : $ctrl.isOwnedByCurrentUser }" ng-class="{ 'history-label-own' : $ctrl.isOwnedByCurrentUser }"
) )
span.history-entry-label-comment( span.history-label-comment(
tooltip-append-to-body="true" tooltip-append-to-body="true"
tooltip-template="'historyLabelTooltipTpl'" tooltip-template="'historyLabelTooltipTpl'"
tooltip-placement="left" tooltip-placement="left"
@ -81,7 +81,7 @@ script(type="text/ng-template", id="historyLabelTpl")
) )
i.fa.fa-tag i.fa.fa-tag
|  {{ $ctrl.labelText }} |  {{ $ctrl.labelText }}
button.history-entry-label-delete-btn( button.history-label-delete-btn(
ng-if="$ctrl.isOwnedByCurrentUser" ng-if="$ctrl.isOwnedByCurrentUser"
stop-propagation="click" stop-propagation="click"
ng-click="$ctrl.onLabelDelete()" ng-click="$ctrl.onLabelDelete()"

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

@ -17,6 +17,11 @@ aside.change-list(
history-labels-list( history-labels-list(
ng-if="history.showOnlyLabels" ng-if="history.showOnlyLabels"
labels="history.labels" labels="history.labels"
current-user="user"
users="projectUsers"
is-loading="history.loading"
on-label-select="handleLabelSelect(label)"
on-label-delete="handleLabelDelete(label)"
) )
aside.change-list( aside.change-list(
@ -201,12 +206,33 @@ script(type="text/ng-template", id="historyEntryTpl")
) #{translate("anonymous")} ) #{translate("anonymous")}
script(type="text/ng-template", id="historyLabelsListTpl") script(type="text/ng-template", id="historyLabelsListTpl")
history-label( .history-labels-list
ng-repeat="label in $ctrl.labels" .history-entry-label(
show-tooltip="false" ng-repeat="label in $ctrl.labels | orderBy : [ '-version', '-created_at' ] track by label.id"
label-text="label.comment" ng-click="$ctrl.onLabelSelect({ label: label })"
label-owner-name="$ctrl.displayNameById(label.user_id)" )
label-creation-date-time="label.created_at" history-label(
is-owned-by-current-user="label.user_id === $ctrl.currentUser.id" show-tooltip="false"
on-label-delete="$ctrl.onLabelDelete({ label: label })" label-text="label.comment"
) is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
on-label-delete="$ctrl.onLabelDelete({ label: label })"
)
.history-entry-label-metadata
.history-entry-label-metadata-user(ng-init="user = $ctrl.getUserById(label.user_id)")
| Saved by
span.name(
ng-if="user && user._id !== $ctrl.currentUser.id"
ng-style="$ctrl.getUserCSSStyle(user);"
) {{ ::$ctrl.displayName(user) }}
span.name(
ng-if="user && user._id == $ctrl.currentUser.id"
ng-style="$ctrl.getUserCSSStyle(user);"
) You
span.name(
ng-if="user == null"
ng-style="$ctrl.getUserCSSStyle(user);"
) #{translate("anonymous")}
time.history-entry-label-metadata-time {{ ::label.created_at | formatDate }}
.loading(ng-show="$ctrl.isLoading")
i.fa.fa-spin.fa-refresh
|    #{translate("loading")}...

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

@ -1,7 +1,8 @@
define [ define [
"base" "base"
"ide/colors/ColorManager"
"ide/history/util/displayNameForUser" "ide/history/util/displayNameForUser"
], (App, displayNameForUser) -> ], (App, ColorManager, displayNameForUser) ->
historyEntryController = ($scope, $element, $attrs, _) -> historyEntryController = ($scope, $element, $attrs, _) ->
ctrl = @ ctrl = @
# This method (and maybe the one below) will be removed soon. User details data will be # This method (and maybe the one below) will be removed soon. User details data will be
@ -19,7 +20,8 @@ define [
else if projectOp.add? then "#{ projectOp.add.pathname}" else if projectOp.add? then "#{ projectOp.add.pathname}"
else if projectOp.remove? then "#{ projectOp.remove.pathname}" else if projectOp.remove? then "#{ projectOp.remove.pathname}"
ctrl.getUserCSSStyle = (user) -> ctrl.getUserCSSStyle = (user) ->
hue = user?.hue or 100 curUserId = user?._id or user?.id
hue = ColorManager.getHueForUserId(curUserId) or 100
if ctrl.entry.inSelection if ctrl.entry.inSelection
color : "#FFF" color : "#FFF"
else else

4
services/web/public/coffee/ide/history/components/historyLabel.coffee
View file

@ -10,8 +10,8 @@ define [
App.component "historyLabel", { App.component "historyLabel", {
bindings: bindings:
labelText: "<" labelText: "<"
labelOwnerName: "<" labelOwnerName: "<?"
labelCreationDateTime: "<" labelCreationDateTime: "<?"
isOwnedByCurrentUser: "<" isOwnedByCurrentUser: "<"
onLabelDelete: "&" onLabelDelete: "&"
showTooltip: "<?" showTooltip: "<?"

16
services/web/public/coffee/ide/history/components/historyLabelsList.coffee
View file

@ -1,27 +1,33 @@
define [ define [
"base" "base"
"ide/colors/ColorManager"
"ide/history/util/displayNameForUser" "ide/history/util/displayNameForUser"
], (App, displayNameForUser) -> ], (App, ColorManager, displayNameForUser) ->
historyLabelsListController = ($scope, $element, $attrs) -> historyLabelsListController = ($scope, $element, $attrs) ->
ctrl = @ ctrl = @
# This method (and maybe the one below) will be removed soon. User details data will be # This method (and maybe the one below) will be removed soon. User details data will be
# injected into the history API responses, so we won't need to fetch user data from other # injected into the history API responses, so we won't need to fetch user data from other
# local data structures. # local data structures.
_getUserById = (id) -> ctrl.getUserById = (id) ->
_.find ctrl.users, (user) -> _.find ctrl.users, (user) ->
curUserId = user?._id or user?.id curUserId = user?._id or user?.id
curUserId == id curUserId == id
ctrl.displayName = displayNameForUser ctrl.displayName = displayNameForUser
ctrl.displayNameById = (id) -> ctrl.getUserCSSStyle = (user) ->
displayNameForUser(_getUserById(id)) curUserId = user?._id or user?.id
hue = ColorManager.getHueForUserId(curUserId) or 100
if false #ctrl.entry.inSelection
color : "#FFF"
else
color: "hsl(#{ hue }, 70%, 50%)"
return return
App.component "historyLabelsList", { App.component "historyLabelsList", {
bindings: bindings:
labels: "<" labels: "<"
users: "<" users: "<"
isLoading: "<"
currentUser: "<" currentUser: "<"
isLoading: "<"
onLabelSelect: "&" onLabelSelect: "&"
onLabelDelete: "&" onLabelDelete: "&"
controller: historyLabelsListController controller: historyLabelsListController

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

@ -16,6 +16,9 @@ define [
ide.historyManager.selectUpdate(entry) ide.historyManager.selectUpdate(entry)
$scope.recalculateSelectedUpdates() $scope.recalculateSelectedUpdates()
$scope.handleLabelSelect = (label) ->
console.log label
$scope.handleLabelDelete = (labelDetails) -> $scope.handleLabelDelete = (labelDetails) ->
$modal.open( $modal.open(
templateUrl: "historyV2DeleteLabelModalTemplate" templateUrl: "historyV2DeleteLabelModalTemplate"

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

@ -61,8 +61,7 @@
color: #FFF; color: #FFF;
} }
} }
.history-label {
.history-entry-label {
display: inline-block; display: inline-block;
color: @history-entry-label-color; color: @history-entry-label-color;
font-size: @font-size-small; font-size: @font-size-small;
@ -73,8 +72,8 @@
color: @history-entry-selected-label-color; color: @history-entry-selected-label-color;
} }
} }
.history-entry-label-comment, .history-label-comment,
.history-entry-label-delete-btn { .history-label-delete-btn {
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal; padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
border: 0; border: 0;
background-color: @history-entry-label-bg-color; background-color: @history-entry-label-bg-color;
@ -82,19 +81,19 @@
background-color: @history-entry-selected-label-bg-color; background-color: @history-entry-selected-label-bg-color;
} }
} }
.history-entry-label-comment { .history-label-comment {
display: block; display: block;
float: left; float: left;
border-radius: 9999px; border-radius: 9999px;
max-width: 190px; max-width: 190px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
.history-entry-label-own & { .history-label-own & {
padding-right: (@padding-xs-horizontal / 2); padding-right: (@padding-xs-horizontal / 2);
border-radius: 9999px 0 0 9999px; border-radius: 9999px 0 0 9999px;
} }
} }
.history-entry-label-delete-btn { .history-label-delete-btn {
padding-left: (@padding-xs-horizontal / 2); padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal; padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0; border-radius: 0 9999px 9999px 0;
@ -163,6 +162,15 @@
} }
} }
.history-labels-list {
.history-entries;
overflow-y: auto;
}
.history-entry-label {
.history-entry-details;
padding: 7px 10px;
}
.history-file-tree-inner { .history-file-tree-inner {
.full-size; .full-size;
overflow-y: auto; overflow-y: auto;
@ -239,330 +247,3 @@
color: @brand-primary; color: @brand-primary;
} }
} }
// @changesListWidth: 250px;
// @changesListPadding: @line-height-computed / 2;
// @selector-padding-vertical: 10px;
// @selector-padding-horizontal: @line-height-computed / 2;
// @day-header-height: 24px;
// @range-bar-color: @link-color;
// @range-bar-selected-offset: 14px;
// #history {
// .upgrade-prompt {
// position: absolute;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// z-index: 100;
// background-color: rgba(128,128,128,0.4);
// .message {
// margin: auto;
// margin-top: 100px;
// padding: (@line-height-computed / 2) @line-height-computed;
// width: 400px;
// background-color: white;
// border-radius: 8px;
// }
// .message-wider {
// width: 650px;
// margin-top: 60px;
// padding: 0;
// }
// .message-header {
// .modal-header;
// }
// .message-body {
// .modal-body;
// }
// }
// .diff-panel {
// .full-size;
// margin-right: @changesListWidth;
// }
// .diff {
// .full-size;
// .toolbar {
// padding: 3px;
// .name {
// float: left;
// padding: 3px @line-height-computed / 4;
// display: inline-block;
// }
// }
// .diff-editor {
// .full-size;
// top: 40px;
// }
// .hide-ace-cursor {
// .ace_active-line, .ace_cursor-layer, .ace_gutter-active-line {
// display: none;
// }
// }
// .diff-deleted {
// padding: @line-height-computed;
// }
// .deleted-warning {
// background-color: @brand-danger;
// color: white;
// padding: @line-height-computed / 2;
// margin-right: @line-height-computed / 4;
// }
// &-binary {
// .alert {
// margin: @line-height-computed / 2;
// }
// }
// }
// aside.change-list {
// border-left: 1px solid @editor-border-color;
// height: 100%;
// width: @changesListWidth;
// position: absolute;
// right: 0;
// .loading {
// text-align: center;
// font-family: @font-family-serif;
// }
// ul {
// li.change {
// position: relative;
// user-select: none;
// -ms-user-select: none;
// -moz-user-select: none;
// -webkit-user-select: none;
// .day {
// background-color: #fafafa;
// border-bottom: 1px solid @editor-border-color;
// padding: 4px;
// font-weight: bold;
// text-align: center;
// height: @day-header-height;
// font-size: 14px;
// line-height: 1;
// }
// .selectors {
// input {
// margin: 0;
// }
// position: absolute;
// left: @selector-padding-horizontal;
// top: 0;
// bottom: 0;
// width: 24px;
// .selector-from {
// position: absolute;
// bottom: @selector-padding-vertical;
// left: 0;
// opacity: 0.8;
// }
// .selector-to {
// position: absolute;
// top: @selector-padding-vertical;
// left: 0;
// opacity: 0.8;
// }
// .range {
// position: absolute;
// left: 5px;
// width: 4px;
// top: 0;
// bottom: 0;
// }
// }
// .description {
// padding: (@line-height-computed / 4);
// padding-left: 38px;
// min-height: 38px;
// border-bottom: 1px solid @editor-border-color;
// cursor: pointer;
// &:hover {
// background-color: @gray-lightest;
// }
// }
// .users {
// .user {
// font-size: 0.8rem;
// color: @gray;
// text-transform: capitalize;
// position: relative;
// padding-left: 16px;
// .color-square {
// height: 12px;
// width: 12px;
// border-radius: 3px;
// position: absolute;
// left: 0;
// bottom: 3px;
// }
// .name {
// width: 94%;
// white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
// }
// }
// }
// .time {
// float: right;
// color: @gray;
// display: inline-block;
// padding-right: (@line-height-computed / 2);
// font-size: 0.8rem;
// line-height: @line-height-computed;
// }
// .doc {
// font-size: 0.9rem;
// font-weight: bold;
// }
// .action {
// color: @gray;
// text-transform: uppercase;
// font-size: 0.7em;
// margin-bottom: -2px;
// margin-top: 2px;
// &-edited {
// margin-top: 0;
// }
// }
// }
// li.loading-changes, li.empty-message {
// padding: 6px;
// cursor: default;
// &:hover {
// background-color: inherit;
// }
// }
// li.selected {
// border-left: 4px solid @range-bar-color;
// .day {
// padding-left: 0;
// }
// .description {
// padding-left: 34px;
// }
// .selectors {
// left: @selector-padding-horizontal - 4px;
// .range {
// background-color: @range-bar-color;
// }
// }
// }
// li.selected-to {
// .selectors {
// .range {
// top: @range-bar-selected-offset;
// }
// .selector-to {
// opacity: 1;
// }
// }
// }
// li.selected-from {
// .selectors {
// .range {
// bottom: @range-bar-selected-offset;
// }
// .selector-from {
// opacity: 1;
// }
// }
// }
// li.first-in-day {
// .selectors {
// .selector-to {
// top: @day-header-height + @selector-padding-vertical;
// }
// }
// }
// li.first-in-day.selected-to {
// .selectors {
// .range {
// top: @day-header-height + @range-bar-selected-offset;
// }
// }
// }
// }
// ul.hover-state {
// li {
// .selectors {
// .range {
// background-color: transparent;
// top: 0;
// bottom: 0;
// }
// }
// }
// li.hover-selected {
// .selectors {
// .range {
// top: 0;
// background-color: @gray-light;
// }
// }
// }
// li.hover-selected-to {
// .selectors {
// .range {
// top: @range-bar-selected-offset;
// }
// .selector-to {
// opacity: 1;
// }
// }
// }
// li.hover-selected-from {
// .selectors {
// .range {
// bottom: @range-bar-selected-offset;
// }
// .selector-from {
// opacity: 1;
// }
// }
// }
// li.first-in-day.hover-selected-to {
// .selectors {
// .range {
// top: @day-header-height + @range-bar-selected-offset;
// }
// }
// }
// }
// }
// }
// .diff-deleted {
// padding-top: 15px;
// }
// .editor-dark {
// #history {
// aside.change-list {
// border-color: @editor-dark-toolbar-border-color;
// ul li.change {
// .day {
// background-color: darken(@editor-dark-background-color, 10%);
// border-bottom: 1px solid @editor-dark-toolbar-border-color;
// }
// .description {
// border-bottom: 1px solid @editor-dark-toolbar-border-color;
// &:hover {
// background-color: black;
// }
// }
// }
// }
// }
// }

57
services/web/public/stylesheets/app/editor/toolbar.less
View file

@ -194,56 +194,57 @@
} }
.toggle-switch { .toggle-switch {
position: relative; position: relative;
height: 100%; height: 100%;
width: 100%; width: 100%;
background-color: @toggle-switch-bg; background-color: @toggle-switch-bg;
border-radius: @btn-border-radius-base; border-radius: @btn-border-radius-base;
} }
.toggle-switch-label { .toggle-switch-label {
position: relative; position: relative;
display: block; display: block;
font-weight: normal; font-weight: normal;
z-index: 2; z-index: 2;
float: left; float: left;
width: 50%; width: 50%;
height: 100%; height: 100%;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
margin-bottom: 0; margin-bottom: 0;
cursor: pointer; cursor: pointer;
user-select: none; user-select: none;
transition: color 0.12s ease-out; color: @text-color;
transition: color 0.12s ease-out;
} }
.toggle-switch-input { .toggle-switch-input {
position: absolute; position: absolute;
opacity: 0; opacity: 0;
} }
.toggle-switch-input:checked + .toggle-switch-label { .toggle-switch-input:checked + .toggle-switch-label {
color: #fff; color: #fff;
font-weight: bold; font-weight: bold;
} }
.toggle-switch-selection { .toggle-switch-selection {
display: block; display: block;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 2px; top: 2px;
left: 2px; left: 2px;
right: 2px; right: 2px;
width: calc(~"50% - 2px"); width: calc(~"50% - 2px");
height: calc(~"100% - 4px"); height: calc(~"100% - 4px");
background: @toggle-switch-highlight-color; background: @toggle-switch-highlight-color;
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base; border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
transition: transform 0.12s ease-out, border-radius 0.12s ease-out; transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
} }
.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection { .toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
transform: translate(100%); transform: translate(100%);
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0; border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
} }
/************************************** /**************************************