Add label delete functionality; styles.

This commit is contained in:
Paulo Reis 2018-08-01 12:17:29 +01:00
parent 3a80c34078
commit 5a64313e24
12 changed files with 149 additions and 36 deletions

View file

@ -10,6 +10,7 @@ aside.change-list(
load-initialize="ui.view == 'history'"
is-loading="history.loading"
on-entry-select="handleEntrySelect(selectedEntry)"
on-label-delete="handleLabelDelete(label)"
)
aside.change-list(
@ -107,6 +108,7 @@ script(type="text/ng-template", id="historyEntriesListTpl")
entry="entry"
current-user="$ctrl.currentUser"
on-select="$ctrl.onEntrySelect({ selectedEntry: selectedEntry })"
on-label-delete="$ctrl.onLabelDelete({ label: label })"
ng-show="!$ctrl.isLoading"
)
.loading(ng-show="$ctrl.isLoading")
@ -133,8 +135,14 @@ script(type="text/ng-template", id="historyEntryTpl")
ng-if="$ctrl.entry.labels.length > 0"
ng-repeat="label in ::$ctrl.entry.labels"
)
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(
ng-repeat="pathname in ::$ctrl.entry.pathnames"

View file

@ -27,7 +27,7 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
novalidate
)
.modal-header
h3 Label this version
h3 Add label
.modal-body
.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}}
.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
@ -39,6 +39,9 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
focus-on="open"
required
)
p.help-block(ng-if="update")
| A new label will be added as of
strong {{ update.meta.end_ts | formatDate:'ddd Do MMM YYYY, h:mm a' }}
.modal-footer
button.btn.btn-default(
type="button"
@ -50,3 +53,25 @@ script(type="text/ng-template", id="historyV2AddLabelModalTemplate")
ng-value="state.inflight ? 'Adding label' : 'Add label'"
type="submit"
)
script(type="text/ng-template", id="historyV2DeleteLabelModalTemplate")
.modal-header
h3 Delete label
.modal-body
.alert.alert-danger(ng-show="state.error.message") {{ state.error.message}}
.alert.alert-danger(ng-show="state.error && !state.error.message") #{translate("generic_something_went_wrong")}
p.help-block(ng-if="labelDetails")
| Are you sure you want to delete the following label:
strong "{{ labelDetails.comment }}"
| ?
.modal-footer
button.btn.btn-default(
type="button"
ng-disabled="state.inflight"
ng-click="$dismiss()"
) #{translate("cancel")}
button.btn.btn-primary(
type="button"
ng-click="deleteLabel()"
ng-disabled="state.inflight"
) {{ state.inflight ? 'Deleting label' : 'Delete label' }}

View file

@ -8,6 +8,7 @@ define [
"ide/history/controllers/HistoryV2FileTreeController"
"ide/history/controllers/HistoryV2ToolbarController"
"ide/history/controllers/HistoryV2AddLabelModalController"
"ide/history/controllers/HistoryV2DeleteLabelModalController"
"ide/history/directives/infiniteScroll"
"ide/history/components/historyEntriesList"
"ide/history/components/historyEntry"
@ -136,15 +137,9 @@ define [
@$scope.history.loading = true
@$scope.history.loadingFileTree = true
requests =
updates: @ide.$http.get updatesURL
if !@$scope.history.labels?
requests.labels = @ide.$http.get "/project/#{@ide.project_id}/labels"
@ide.$q.all requests
.then (responses) =>
updatesData = responses.updates.data
@ide.$http.get updatesURL
.then (response) =>
updatesData = response.data
@_loadUpdates(updatesData.updates)
@$scope.history.nextBeforeTimestamp = updatesData.nextBeforeTimestamp
if !updatesData.nextBeforeTimestamp?
@ -212,6 +207,24 @@ define [
labelCurrentVersion: (labelComment) =>
@_labelVersion labelComment, @$scope.history.selection.updates[0].toV
deleteLabel: (labelId) =>
url = "/project/#{@$scope.project_id}/labels/#{labelId}"
@ide.$http({
url,
method: "DELETE"
headers:
"X-CSRF-Token": window.csrfToken
}).then (response) =>
@_deleteLabelFromLocalCollection @$scope.history.updates, labelId
@_deleteLabelFromLocalCollection @$scope.history.selection, labelId
_deleteLabelFromLocalCollection: (collection, labelId) ->
for update in collection
update.labels = _.filter update.labels, (label) ->
label.id != labelId
_parseDiff: (diff) ->
if diff.binary
return { binary: true }

View file

@ -14,6 +14,7 @@ define [
isLoading: "<"
currentUser: "<"
onEntrySelect: "&"
onLabelDelete: "&"
controller: historyEntriesListController
templateUrl: "historyEntriesListTpl"
}

View file

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

View file

@ -1,7 +1,8 @@
define [
"base",
], (App) ->
App.controller "HistoryV2AddLabelModalController", ["$scope", "$modalInstance", "ide", ($scope, $modalInstance, ide) ->
App.controller "HistoryV2AddLabelModalController", ["$scope", "$modalInstance", "ide", "update", ($scope, $modalInstance, ide, update) ->
$scope.update = update
$scope.inputs =
labelName: null
$scope.state =

View file

@ -0,0 +1,23 @@
define [
"base",
], (App) ->
App.controller "HistoryV2DeleteLabelModalController", ["$scope", "$modalInstance", "ide", "labelDetails", ($scope, $modalInstance, ide, labelDetails) ->
$scope.labelDetails = labelDetails
$scope.state =
inflight: false
error: false
$scope.deleteLabel = () ->
$scope.state.inflight = true
ide.historyManager.deleteLabel labelDetails.id
.then (response) ->
$scope.state.inflight = false
$modalInstance.close()
.catch (response) ->
{ data, status } = response
$scope.state.inflight = false
if status == 400
$scope.state.error = { message: data }
else
$scope.state.error = true
]

View file

@ -3,17 +3,24 @@ define [
"ide/history/util/displayNameForUser"
], (App, displayNameForUser) ->
App.controller "HistoryV2ListController", ["$scope", "ide", ($scope, ide) ->
App.controller "HistoryV2ListController", ["$scope", "$modal", "ide", ($scope, $modal, ide) ->
$scope.hoveringOverListSelectors = false
$scope.loadMore = () =>
ide.historyManager.fetchNextBatchOfUpdates()
$scope.handleEntrySelect = (entry) ->
# $scope.$applyAsync () ->
ide.historyManager.selectUpdate(entry)
$scope.recalculateSelectedUpdates()
$scope.handleLabelDelete = (labelDetails) ->
$modal.open(
templateUrl: "historyV2DeleteLabelModalTemplate"
controller: "HistoryV2DeleteLabelModalController"
resolve:
labelDetails: () -> labelDetails
)
$scope.recalculateSelectedUpdates = () ->
beforeSelection = true
afterSelection = false

View file

@ -6,5 +6,7 @@ define [
$modal.open(
templateUrl: "historyV2AddLabelModalTemplate"
controller: "HistoryV2AddLabelModalController"
resolve:
update: () -> $scope.history.selection.updates[0]
)
]

View file

@ -56,10 +56,36 @@
.history-entry-label {
color: @history-entry-label-color;
font-weight: bold;
font-size: @font-size-small;
margin-bottom: 3px;
margin-right: 10px;
&:last-of-type {
margin-right: 0;
}
.history-entry-selected & {
color: #FFF;
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;
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-delete-btn {
padding-left: (@padding-xs-horizontal / 2);
padding-right: @padding-xs-horizontal;
border-radius: 0 9999px 9999px 0;
&:hover {
background-color: darken(@history-entry-label-bg-color, 8%);
.history-entry-selected & {
background-color: darken(@history-entry-selected-label-bg-color, 8%);
}
}
}

View file

@ -988,7 +988,10 @@
// v2 History
@history-base-font-size : @font-size-small;
@history-base-bg : @gray-lightest;
@history-entry-label-color : @red;
@history-entry-label-bg-color : @red;
@history-entry-label-color : #FFF;
@history-entry-selected-label-bg-color : #FFF;
@history-entry-selected-label-color : @red;
@history-entry-day-bg : @gray;
@history-entry-selected-bg : @red;
@history-base-color : @gray-light;

View file

@ -277,7 +277,10 @@
// v2 History
@history-base-font-size : @font-size-small;
@history-base-bg : @ol-blue-gray-1;
@history-entry-label-color : @ol-blue;
@history-entry-label-bg-color : @ol-blue;
@history-entry-label-color : #FFF;
@history-entry-selected-label-bg-color: #FFF;
@history-entry-selected-label-color : @ol-blue;
@history-entry-day-bg : @ol-blue-gray-2;
@history-entry-selected-bg : @ol-green;
@history-base-color : @ol-blue-gray-2;