From a8ee87974653e9f679f8034573f9d0288c290b5e Mon Sep 17 00:00:00 2001 From: Paulo Reis Date: Thu, 2 Aug 2018 15:29:12 +0100 Subject: [PATCH] Use history label component; restrict label deletion to label owners. --- .../project/editor/history/entriesListV2.pug | 46 ++++++++++++++----- .../ide/history/HistoryV2Manager.coffee | 1 + .../components/historyEntriesList.coffee | 4 ++ .../history/components/historyEntry.coffee | 9 +++- .../HistoryV2ListController.coffee | 3 ++ .../stylesheets/app/editor/history-v2.less | 37 ++++++++++++--- 6 files changed, 82 insertions(+), 18 deletions(-) diff --git a/services/web/app/views/project/editor/history/entriesListV2.pug b/services/web/app/views/project/editor/history/entriesListV2.pug index 4cbed71fda..b96c74947d 100644 --- a/services/web/app/views/project/editor/history/entriesListV2.pug +++ b/services/web/app/views/project/editor/history/entriesListV2.pug @@ -5,10 +5,12 @@ aside.change-list( history-entries-list( entries="history.updates" current-user="user" + users="projectUsers" load-entries="loadMore()" load-disabled="history.loading || history.atEnd" load-initialize="ui.view == 'history'" is-loading="history.loading" + show-only-labelled="listConfig.showOnlyLabelled" on-entry-select="handleEntrySelect(selectedEntry)" on-label-delete="handleLabelDelete(label)" ) @@ -116,9 +118,10 @@ script(type="text/ng-template", id="historyEntriesListTpl") ) .infinite-scroll-inner history-entry( - ng-repeat="entry in $ctrl.entries" + ng-repeat="entry in $ctrl.entries | filter:$ctrl.shouldShowEntry" entry="entry" current-user="$ctrl.currentUser" + users="$ctrl.users" on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })" on-label-delete="$ctrl.onLabelDelete({ label: label })" ng-show="!$ctrl.isLoading" @@ -143,17 +146,14 @@ script(type="text/ng-template", id="historyEntryTpl") time.history-entry-day(ng-if="::$ctrl.entry.meta.first_in_day") {{ ::$ctrl.entry.meta.end_ts | relativeDate }} .history-entry-details(ng-click="$ctrl.onSelect({ selectedEntry: $ctrl.entry })") - .history-entry-label( - ng-if="$ctrl.entry.labels.length > 0" + history-label( ng-repeat="label in $ctrl.entry.labels" + 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 })" ) - span.history-entry-label-comment - i.fa.fa-tag - |  {{ label.comment }} - button.history-entry-label-delete-btn( - stop-propagation="click" - ng-click="$ctrl.onLabelDelete({ label: label })" - ) × ol.history-entry-changes li.history-entry-change( @@ -198,4 +198,28 @@ script(type="text/ng-template", id="historyEntryTpl") li.history-entry-metadata-user(ng-if="::$ctrl.entry.meta.users.length == 0") span.name( ng-style="$ctrl.getUserCSSStyle();" - ) #{translate("anonymous")} \ No newline at end of file + ) #{translate("anonymous")} + +script(type="text/ng-template", id="historyLabelTpl") + .history-entry-label( + ng-class="{ 'history-entry-label-own' : $ctrl.isOwnedByCurrentUser }" + ) + span.history-entry-label-comment( + tooltip-template="'historyLabelTooltipTpl'" + tooltip-placement="left" + ) + i.fa.fa-tag + |  {{ $ctrl.labelText }} + button.history-entry-label-delete-btn( + ng-if="$ctrl.isOwnedByCurrentUser" + stop-propagation="click" + ng-click="$ctrl.onLabelDelete()" + ) × + +script(type="text/ng-template", id="historyLabelTooltipTpl") + .history-label-tooltip + p.history-label-tooltip-title + i.fa.fa-tag + |  {{ $ctrl.labelText }} + p.history-label-tooltip-owner Created by {{ $ctrl.labelOwnerName }} + time.history-label-tooltip-datetime {{ labelCreationDateTime | formatDate }} \ No newline at end of file diff --git a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee index a921cacb08..7ff41985f4 100644 --- a/services/web/public/coffee/ide/history/HistoryV2Manager.coffee +++ b/services/web/public/coffee/ide/history/HistoryV2Manager.coffee @@ -12,6 +12,7 @@ define [ "ide/history/directives/infiniteScroll" "ide/history/components/historyEntriesList" "ide/history/components/historyEntry" + "ide/history/components/historyLabel" "ide/history/components/historyFileTree" "ide/history/components/historyFileEntity" ], (moment, ColorManager, displayNameForUser, HistoryViewModes) -> diff --git a/services/web/public/coffee/ide/history/components/historyEntriesList.coffee b/services/web/public/coffee/ide/history/components/historyEntriesList.coffee index 82331258ec..f872b5d72a 100644 --- a/services/web/public/coffee/ide/history/components/historyEntriesList.coffee +++ b/services/web/public/coffee/ide/history/components/historyEntriesList.coffee @@ -3,11 +3,14 @@ define [ ], (App) -> historyEntriesListController = ($scope, $element, $attrs) -> ctrl = @ + ctrl.shouldShowEntry = (entry) -> + !(ctrl.showOnlyLabelled and entry.labels.length == 0) return App.component "historyEntriesList", { bindings: entries: "<" + users: "<" loadEntries: "&" loadDisabled: "<" loadInitialize: "<" @@ -15,6 +18,7 @@ define [ currentUser: "<" onEntrySelect: "&" onLabelDelete: "&" + showOnlyLabelled: "<" controller: historyEntriesListController templateUrl: "historyEntriesListTpl" } diff --git a/services/web/public/coffee/ide/history/components/historyEntry.coffee b/services/web/public/coffee/ide/history/components/historyEntry.coffee index 46018d3a32..2995c5f481 100644 --- a/services/web/public/coffee/ide/history/components/historyEntry.coffee +++ b/services/web/public/coffee/ide/history/components/historyEntry.coffee @@ -2,9 +2,15 @@ define [ "base" "ide/history/util/displayNameForUser" ], (App, displayNameForUser) -> - historyEntryController = ($scope, $element, $attrs) -> + historyEntryController = ($scope, $element, $attrs, $filter, _) -> 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.getProjectOpDoc = (projectOp) -> if projectOp.rename? then "#{ projectOp.rename.pathname} → #{ projectOp.rename.newPathname }" else if projectOp.add? then "#{ projectOp.add.pathname}" @@ -21,6 +27,7 @@ define [ bindings: entry: "<" currentUser: "<" + users: "<" onSelect: "&" onLabelDelete: "&" controller: historyEntryController diff --git a/services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee b/services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee index d63f9329ae..f7c602733f 100644 --- a/services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee +++ b/services/web/public/coffee/ide/history/controllers/HistoryV2ListController.coffee @@ -5,6 +5,9 @@ define [ App.controller "HistoryV2ListController", ["$scope", "$modal", "ide", ($scope, $modal, ide) -> $scope.hoveringOverListSelectors = false + $scope.listConfig = + showOnlyLabelled: false + $scope.projectUsers = $scope.project.members.concat $scope.project.owner $scope.loadMore = () => ide.historyManager.fetchNextBatchOfUpdates() diff --git a/services/web/public/stylesheets/app/editor/history-v2.less b/services/web/public/stylesheets/app/editor/history-v2.less index 7ed37d49b1..404609917a 100644 --- a/services/web/public/stylesheets/app/editor/history-v2.less +++ b/services/web/public/stylesheets/app/editor/history-v2.less @@ -60,24 +60,32 @@ font-size: @font-size-small; margin-bottom: 3px; margin-right: 10px; - &:last-of-type { - margin-right: 0; - } + white-space: nowrap; .history-entry-selected & { color: @history-entry-selected-label-color; } } .history-entry-label-comment, .history-entry-label-delete-btn { - display: inline-block; - padding: 0 (@padding-xs-horizontal / 2) 1px @padding-xs-horizontal; + padding: 0 @padding-xs-horizontal 1px @padding-xs-horizontal; border: 0; background-color: @history-entry-label-bg-color; - border-radius: 9999px 0 0 9999px; .history-entry-selected & { background-color: @history-entry-selected-label-bg-color; } } + .history-entry-label-comment { + display: block; + float: left; + border-radius: 9999px; + max-width: 190px; + overflow: hidden; + text-overflow: ellipsis; + .history-entry-label-own & { + padding-right: (@padding-xs-horizontal / 2); + border-radius: 9999px 0 0 9999px; + } + } .history-entry-label-delete-btn { padding-left: (@padding-xs-horizontal / 2); padding-right: @padding-xs-horizontal; @@ -90,6 +98,23 @@ } } + .history-label-tooltip { + white-space: normal; + padding: (@line-height-computed / 4); + text-align: left; + } + .history-label-tooltip-title, + .history-label-tooltip-owner, + .history-label-tooltip-datetime { + margin: 0 0 (@line-height-computed / 4) 0; + } + .history-label-tooltip-title { + font-weight: bold; + } + .history-label-tooltip-datetime { + margin-bottom: 0; + } + .history-entry-changes { .list-unstyled; margin-bottom: 3px;