mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Add history labels view.
This commit is contained in:
Paulo Reis
parent
cd853abb3c
commit
f2b957e5b3
8 changed files with 103 additions and 384 deletions
|
|
@ -70,10 +70,10 @@ script(type="text/ng-template", id="historyRestoreDiffModalTemplate")
|
|||
|
||||
|
||||
script(type="text/ng-template", id="historyLabelTpl")
|
||||
.history-entry-label(
|
||||
ng-class="{ 'history-entry-label-own' : $ctrl.isOwnedByCurrentUser }"
|
||||
.history-label(
|
||||
ng-class="{ 'history-label-own' : $ctrl.isOwnedByCurrentUser }"
|
||||
)
|
||||
span.history-entry-label-comment(
|
||||
span.history-label-comment(
|
||||
tooltip-append-to-body="true"
|
||||
tooltip-template="'historyLabelTooltipTpl'"
|
||||
tooltip-placement="left"
|
||||
|
|
@ -81,7 +81,7 @@ script(type="text/ng-template", id="historyLabelTpl")
|
|||
)
|
||||
i.fa.fa-tag
|
||||
| {{ $ctrl.labelText }}
|
||||
button.history-entry-label-delete-btn(
|
||||
button.history-label-delete-btn(
|
||||
ng-if="$ctrl.isOwnedByCurrentUser"
|
||||
stop-propagation="click"
|
||||
ng-click="$ctrl.onLabelDelete()"
|
||||
|
|
|
|||
|
|
@ -17,6 +17,11 @@ aside.change-list(
|
|||
history-labels-list(
|
||||
ng-if="history.showOnlyLabels"
|
||||
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(
|
||||
|
|
@ -201,12 +206,33 @@ script(type="text/ng-template", id="historyEntryTpl")
|
|||
) #{translate("anonymous")}
|
||||
|
||||
script(type="text/ng-template", id="historyLabelsListTpl")
|
||||
history-label(
|
||||
ng-repeat="label in $ctrl.labels"
|
||||
show-tooltip="false"
|
||||
label-text="label.comment"
|
||||
label-owner-name="$ctrl.displayNameById(label.user_id)"
|
||||
label-creation-date-time="label.created_at"
|
||||
is-owned-by-current-user="label.user_id === $ctrl.currentUser.id"
|
||||
on-label-delete="$ctrl.onLabelDelete({ label: label })"
|
||||
)
|
||||
.history-labels-list
|
||||
.history-entry-label(
|
||||
ng-repeat="label in $ctrl.labels | orderBy : [ '-version', '-created_at' ] track by label.id"
|
||||
ng-click="$ctrl.onLabelSelect({ label: label })"
|
||||
)
|
||||
history-label(
|
||||
show-tooltip="false"
|
||||
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")}...
|
||||
|
|
@ -1,7 +1,8 @@
|
|||
define [
|
||||
"base"
|
||||
"ide/colors/ColorManager"
|
||||
"ide/history/util/displayNameForUser"
|
||||
], (App, displayNameForUser) ->
|
||||
], (App, ColorManager, displayNameForUser) ->
|
||||
historyEntryController = ($scope, $element, $attrs, _) ->
|
||||
ctrl = @
|
||||
# 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.remove? then "#{ projectOp.remove.pathname}"
|
||||
ctrl.getUserCSSStyle = (user) ->
|
||||
hue = user?.hue or 100
|
||||
curUserId = user?._id or user?.id
|
||||
hue = ColorManager.getHueForUserId(curUserId) or 100
|
||||
if ctrl.entry.inSelection
|
||||
color : "#FFF"
|
||||
else
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ define [
|
|||
App.component "historyLabel", {
|
||||
bindings:
|
||||
labelText: "<"
|
||||
labelOwnerName: "<"
|
||||
labelCreationDateTime: "<"
|
||||
labelOwnerName: "<?"
|
||||
labelCreationDateTime: "<?"
|
||||
isOwnedByCurrentUser: "<"
|
||||
onLabelDelete: "&"
|
||||
showTooltip: "<?"
|
||||
|
|
|
|||
|
|
@ -1,27 +1,33 @@
|
|||
define [
|
||||
"base"
|
||||
"ide/colors/ColorManager"
|
||||
"ide/history/util/displayNameForUser"
|
||||
], (App, displayNameForUser) ->
|
||||
], (App, ColorManager, displayNameForUser) ->
|
||||
historyLabelsListController = ($scope, $element, $attrs) ->
|
||||
ctrl = @
|
||||
# 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
|
||||
# local data structures.
|
||||
_getUserById = (id) ->
|
||||
ctrl.getUserById = (id) ->
|
||||
_.find ctrl.users, (user) ->
|
||||
curUserId = user?._id or user?.id
|
||||
curUserId == id
|
||||
ctrl.displayName = displayNameForUser
|
||||
ctrl.displayNameById = (id) ->
|
||||
displayNameForUser(_getUserById(id))
|
||||
ctrl.getUserCSSStyle = (user) ->
|
||||
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
|
||||
|
||||
App.component "historyLabelsList", {
|
||||
bindings:
|
||||
labels: "<"
|
||||
users: "<"
|
||||
isLoading: "<"
|
||||
currentUser: "<"
|
||||
isLoading: "<"
|
||||
onLabelSelect: "&"
|
||||
onLabelDelete: "&"
|
||||
controller: historyLabelsListController
|
||||
|
|
|
|||
|
|
@ -16,6 +16,9 @@ define [
|
|||
ide.historyManager.selectUpdate(entry)
|
||||
$scope.recalculateSelectedUpdates()
|
||||
|
||||
$scope.handleLabelSelect = (label) ->
|
||||
console.log label
|
||||
|
||||
$scope.handleLabelDelete = (labelDetails) ->
|
||||
$modal.open(
|
||||
templateUrl: "historyV2DeleteLabelModalTemplate"
|
||||
|
|
|
|||
|
|
@ -61,8 +61,7 @@
|
|||
color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.history-entry-label {
|
||||
.history-label {
|
||||
display: inline-block;
|
||||
color: @history-entry-label-color;
|
||||
font-size: @font-size-small;
|
||||
|
|
@ -73,8 +72,8 @@
|
|||
color: @history-entry-selected-label-color;
|
||||
}
|
||||
}
|
||||
.history-entry-label-comment,
|
||||
.history-entry-label-delete-btn {
|
||||
.history-label-comment,
|
||||
.history-label-delete-btn {
|
||||
padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal;
|
||||
border: 0;
|
||||
background-color: @history-entry-label-bg-color;
|
||||
|
|
@ -82,19 +81,19 @@
|
|||
background-color: @history-entry-selected-label-bg-color;
|
||||
}
|
||||
}
|
||||
.history-entry-label-comment {
|
||||
.history-label-comment {
|
||||
display: block;
|
||||
float: left;
|
||||
border-radius: 9999px;
|
||||
max-width: 190px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.history-entry-label-own & {
|
||||
.history-label-own & {
|
||||
padding-right: (@padding-xs-horizontal / 2);
|
||||
border-radius: 9999px 0 0 9999px;
|
||||
}
|
||||
}
|
||||
.history-entry-label-delete-btn {
|
||||
.history-label-delete-btn {
|
||||
padding-left: (@padding-xs-horizontal / 2);
|
||||
padding-right: @padding-xs-horizontal;
|
||||
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 {
|
||||
.full-size;
|
||||
overflow-y: auto;
|
||||
|
|
@ -239,330 +247,3 @@
|
|||
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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -194,56 +194,57 @@
|
|||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: @toggle-switch-bg;
|
||||
border-radius: @btn-border-radius-base;
|
||||
background-color: @toggle-switch-bg;
|
||||
border-radius: @btn-border-radius-base;
|
||||
}
|
||||
|
||||
.toggle-switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
font-weight: normal;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
z-index: 2;
|
||||
float: left;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: color 0.12s ease-out;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
color: @text-color;
|
||||
transition: color 0.12s ease-out;
|
||||
}
|
||||
|
||||
.toggle-switch-input {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.toggle-switch-input:checked + .toggle-switch-label {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toggle-switch-selection {
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
width: calc(~"50% - 2px");
|
||||
height: calc(~"100% - 4px");
|
||||
background: @toggle-switch-highlight-color;
|
||||
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
|
||||
transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
right: 2px;
|
||||
width: calc(~"50% - 2px");
|
||||
height: calc(~"100% - 4px");
|
||||
background: @toggle-switch-highlight-color;
|
||||
border-radius: @btn-border-radius-base 0 0 @btn-border-radius-base;
|
||||
transition: transform 0.12s ease-out, border-radius 0.12s ease-out;
|
||||
}
|
||||
|
||||
.toggle-switch-input:checked:nth-child(4) ~ .toggle-switch-selection {
|
||||
transform: translate(100%);
|
||||
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
|
||||
transform: translate(100%);
|
||||
border-radius: 0 @btn-border-radius-base @btn-border-radius-base 0;
|
||||
}
|
||||
|
||||
/**************************************
|
||||
|
|
|
|||
Loading…
Reference in a new issue