Prettify sidebar modules
This commit is contained in:
parent
4695b31113
commit
46e3ad4b94
|
@ -69,7 +69,8 @@ export default {
|
|||
this.loading = false;
|
||||
}
|
||||
|
||||
this.mediator.saveAssignees(this.field)
|
||||
this.mediator
|
||||
.saveAssignees(this.field)
|
||||
.then(setLoadingFalse.bind(this))
|
||||
.catch(() => {
|
||||
setLoadingFalse();
|
||||
|
|
|
@ -56,11 +56,7 @@ export default {
|
|||
.update('issue', { confidential })
|
||||
.then(() => window.location.reload())
|
||||
.catch(() => {
|
||||
Flash(
|
||||
__(
|
||||
'Something went wrong trying to change the confidentiality of this issue',
|
||||
),
|
||||
);
|
||||
Flash(__('Something went wrong trying to change the confidentiality of this issue'));
|
||||
});
|
||||
},
|
||||
},
|
||||
|
|
|
@ -34,11 +34,7 @@ export default {
|
|||
required: true,
|
||||
type: Object,
|
||||
validator(mediatorObject) {
|
||||
return (
|
||||
mediatorObject.service &&
|
||||
mediatorObject.service.update &&
|
||||
mediatorObject.store
|
||||
);
|
||||
return mediatorObject.service && mediatorObject.service.update && mediatorObject.store;
|
||||
},
|
||||
},
|
||||
},
|
||||
|
@ -67,8 +63,7 @@ export default {
|
|||
|
||||
methods: {
|
||||
toggleForm() {
|
||||
this.mediator.store.isLockDialogOpen = !this.mediator.store
|
||||
.isLockDialogOpen;
|
||||
this.mediator.store.isLockDialogOpen = !this.mediator.store.isLockDialogOpen;
|
||||
},
|
||||
|
||||
updateLockedAttribute(locked) {
|
||||
|
@ -79,9 +74,14 @@ export default {
|
|||
.then(() => window.location.reload())
|
||||
.catch(() =>
|
||||
Flash(
|
||||
sprintf(__('Something went wrong trying to change the locked state of this %{issuableDisplayName}'), {
|
||||
issuableDisplayName: this.issuableDisplayName,
|
||||
}),
|
||||
sprintf(
|
||||
__(
|
||||
'Something went wrong trying to change the locked state of this %{issuableDisplayName}',
|
||||
),
|
||||
{
|
||||
issuableDisplayName: this.issuableDisplayName,
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
|
|
|
@ -1,78 +1,78 @@
|
|||
<script>
|
||||
import { __, n__, sprintf } from '~/locale';
|
||||
import tooltip from '~/vue_shared/directives/tooltip';
|
||||
import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
|
||||
import { __, n__, sprintf } from '~/locale';
|
||||
import tooltip from '~/vue_shared/directives/tooltip';
|
||||
import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
|
||||
|
||||
export default {
|
||||
directives: {
|
||||
tooltip,
|
||||
export default {
|
||||
directives: {
|
||||
tooltip,
|
||||
},
|
||||
components: {
|
||||
userAvatarImage,
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
components: {
|
||||
userAvatarImage,
|
||||
participants: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
props: {
|
||||
loading: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false,
|
||||
},
|
||||
participants: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: () => [],
|
||||
},
|
||||
numberOfLessParticipants: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 7,
|
||||
},
|
||||
numberOfLessParticipants: {
|
||||
type: Number,
|
||||
required: false,
|
||||
default: 7,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowingMoreParticipants: false,
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShowingMoreParticipants: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
lessParticipants() {
|
||||
return this.participants.slice(0, this.numberOfLessParticipants);
|
||||
},
|
||||
computed: {
|
||||
lessParticipants() {
|
||||
return this.participants.slice(0, this.numberOfLessParticipants);
|
||||
},
|
||||
visibleParticipants() {
|
||||
return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
|
||||
},
|
||||
hasMoreParticipants() {
|
||||
return this.participants.length > this.numberOfLessParticipants;
|
||||
},
|
||||
toggleLabel() {
|
||||
let label = '';
|
||||
if (this.isShowingMoreParticipants) {
|
||||
label = __('- show less');
|
||||
} else {
|
||||
label = sprintf(__('+ %{moreCount} more'), {
|
||||
moreCount: this.participants.length - this.numberOfLessParticipants,
|
||||
});
|
||||
}
|
||||
visibleParticipants() {
|
||||
return this.isShowingMoreParticipants ? this.participants : this.lessParticipants;
|
||||
},
|
||||
hasMoreParticipants() {
|
||||
return this.participants.length > this.numberOfLessParticipants;
|
||||
},
|
||||
toggleLabel() {
|
||||
let label = '';
|
||||
if (this.isShowingMoreParticipants) {
|
||||
label = __('- show less');
|
||||
} else {
|
||||
label = sprintf(__('+ %{moreCount} more'), {
|
||||
moreCount: this.participants.length - this.numberOfLessParticipants,
|
||||
});
|
||||
}
|
||||
|
||||
return label;
|
||||
},
|
||||
participantLabel() {
|
||||
return sprintf(
|
||||
n__('%{count} participant', '%{count} participants', this.participants.length),
|
||||
{ count: this.loading ? '' : this.participantCount },
|
||||
);
|
||||
},
|
||||
participantCount() {
|
||||
return this.participants.length;
|
||||
},
|
||||
return label;
|
||||
},
|
||||
methods: {
|
||||
toggleMoreParticipants() {
|
||||
this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
|
||||
},
|
||||
onClickCollapsedIcon() {
|
||||
this.$emit('toggleSidebar');
|
||||
},
|
||||
participantLabel() {
|
||||
return sprintf(
|
||||
n__('%{count} participant', '%{count} participants', this.participants.length),
|
||||
{ count: this.loading ? '' : this.participantCount },
|
||||
);
|
||||
},
|
||||
};
|
||||
participantCount() {
|
||||
return this.participants.length;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
toggleMoreParticipants() {
|
||||
this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
|
||||
},
|
||||
onClickCollapsedIcon() {
|
||||
this.$emit('toggleSidebar');
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,23 +1,23 @@
|
|||
<script>
|
||||
import Store from '../../stores/sidebar_store';
|
||||
import participants from './participants.vue';
|
||||
import Store from '../../stores/sidebar_store';
|
||||
import participants from './participants.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
participants,
|
||||
export default {
|
||||
components: {
|
||||
participants,
|
||||
},
|
||||
props: {
|
||||
mediator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
mediator: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store: new Store(),
|
||||
};
|
||||
},
|
||||
};
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
store: new Store(),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -21,10 +21,9 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
onToggleSubscription() {
|
||||
this.mediator.toggleSubscription()
|
||||
.catch(() => {
|
||||
Flash(__('Error occurred when toggling the notification subscription'));
|
||||
});
|
||||
this.mediator.toggleSubscription().catch(() => {
|
||||
Flash(__('Error occurred when toggling the notification subscription'));
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -1,111 +1,111 @@
|
|||
<script>
|
||||
import { __, sprintf } from '~/locale';
|
||||
import { abbreviateTime } from '~/lib/utils/pretty_time';
|
||||
import icon from '~/vue_shared/components/icon.vue';
|
||||
import tooltip from '~/vue_shared/directives/tooltip';
|
||||
import { __, sprintf } from '~/locale';
|
||||
import { abbreviateTime } from '~/lib/utils/pretty_time';
|
||||
import icon from '~/vue_shared/components/icon.vue';
|
||||
import tooltip from '~/vue_shared/directives/tooltip';
|
||||
|
||||
export default {
|
||||
name: 'TimeTrackingCollapsedState',
|
||||
components: {
|
||||
icon,
|
||||
export default {
|
||||
name: 'TimeTrackingCollapsedState',
|
||||
components: {
|
||||
icon,
|
||||
},
|
||||
directives: {
|
||||
tooltip,
|
||||
},
|
||||
props: {
|
||||
showComparisonState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
directives: {
|
||||
tooltip,
|
||||
showSpentOnlyState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
showComparisonState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
showSpentOnlyState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
showEstimateOnlyState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
showNoTimeTrackingState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
timeSpentHumanReadable: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
timeEstimateHumanReadable: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
showEstimateOnlyState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
timeSpent() {
|
||||
return this.abbreviateTime(this.timeSpentHumanReadable);
|
||||
},
|
||||
timeEstimate() {
|
||||
return this.abbreviateTime(this.timeEstimateHumanReadable);
|
||||
},
|
||||
divClass() {
|
||||
if (this.showComparisonState) {
|
||||
return 'compare';
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
return 'estimate-only';
|
||||
} else if (this.showSpentOnlyState) {
|
||||
return 'spend-only';
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'no-tracking';
|
||||
}
|
||||
showNoTimeTrackingState: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
timeSpentHumanReadable: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
timeEstimateHumanReadable: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
timeSpent() {
|
||||
return this.abbreviateTime(this.timeSpentHumanReadable);
|
||||
},
|
||||
timeEstimate() {
|
||||
return this.abbreviateTime(this.timeEstimateHumanReadable);
|
||||
},
|
||||
divClass() {
|
||||
if (this.showComparisonState) {
|
||||
return 'compare';
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
return 'estimate-only';
|
||||
} else if (this.showSpentOnlyState) {
|
||||
return 'spend-only';
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'no-tracking';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
spanClass() {
|
||||
if (this.showComparisonState) {
|
||||
return '';
|
||||
},
|
||||
spanClass() {
|
||||
if (this.showComparisonState) {
|
||||
return '';
|
||||
} else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
|
||||
return 'bold';
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'no-value';
|
||||
}
|
||||
} else if (this.showEstimateOnlyState || this.showSpentOnlyState) {
|
||||
return 'bold';
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'no-value';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
text() {
|
||||
if (this.showComparisonState) {
|
||||
return `${this.timeSpent} / ${this.timeEstimate}`;
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
return `-- / ${this.timeEstimate}`;
|
||||
} else if (this.showSpentOnlyState) {
|
||||
return `${this.timeSpent} / --`;
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'None';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
timeTrackedTooltipText() {
|
||||
let title;
|
||||
if (this.showComparisonState) {
|
||||
title = __('Time remaining');
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
title = __('Estimated');
|
||||
} else if (this.showSpentOnlyState) {
|
||||
title = __('Time spent');
|
||||
}
|
||||
|
||||
return sprintf('%{title}: %{text}', ({ title, text: this.text }));
|
||||
},
|
||||
tooltipText() {
|
||||
return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
|
||||
},
|
||||
return '';
|
||||
},
|
||||
methods: {
|
||||
abbreviateTime(timeStr) {
|
||||
return abbreviateTime(timeStr);
|
||||
},
|
||||
text() {
|
||||
if (this.showComparisonState) {
|
||||
return `${this.timeSpent} / ${this.timeEstimate}`;
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
return `-- / ${this.timeEstimate}`;
|
||||
} else if (this.showSpentOnlyState) {
|
||||
return `${this.timeSpent} / --`;
|
||||
} else if (this.showNoTimeTrackingState) {
|
||||
return 'None';
|
||||
}
|
||||
|
||||
return '';
|
||||
},
|
||||
};
|
||||
timeTrackedTooltipText() {
|
||||
let title;
|
||||
if (this.showComparisonState) {
|
||||
title = __('Time remaining');
|
||||
} else if (this.showEstimateOnlyState) {
|
||||
title = __('Estimated');
|
||||
} else if (this.showSpentOnlyState) {
|
||||
title = __('Time spent');
|
||||
}
|
||||
|
||||
return sprintf('%{title}: %{text}', { title, text: this.text });
|
||||
},
|
||||
tooltipText() {
|
||||
return this.showNoTimeTrackingState ? __('Time tracking') : this.timeTrackedTooltipText;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
abbreviateTime(timeStr) {
|
||||
return abbreviateTime(timeStr);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -15,16 +15,22 @@ export default {
|
|||
},
|
||||
estimateText() {
|
||||
return sprintf(
|
||||
s__('estimateCommand|%{slash_command} will update the estimated time with the latest command.'), {
|
||||
s__(
|
||||
'estimateCommand|%{slash_command} will update the estimated time with the latest command.',
|
||||
),
|
||||
{
|
||||
slash_command: '<code>/estimate</code>',
|
||||
}, false,
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
spendText() {
|
||||
return sprintf(
|
||||
s__('spendCommand|%{slash_command} will update the sum of the time spent.'), {
|
||||
s__('spendCommand|%{slash_command} will update the sum of the time spent.'),
|
||||
{
|
||||
slash_command: '<code>/spend</code>',
|
||||
}, false,
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
},
|
||||
|
|
|
@ -26,7 +26,7 @@ export default {
|
|||
methods: {
|
||||
listenForQuickActions() {
|
||||
$(document).on('ajax:success', '.gfm-form', this.quickActionListened);
|
||||
eventHub.$on('timeTrackingUpdated', (data) => {
|
||||
eventHub.$on('timeTrackingUpdated', data => {
|
||||
this.quickActionListened(null, data);
|
||||
});
|
||||
},
|
||||
|
@ -34,9 +34,7 @@ export default {
|
|||
const subscribedCommands = ['spend_time', 'time_estimate'];
|
||||
let changedCommands;
|
||||
if (data !== undefined) {
|
||||
changedCommands = data.commands_changes
|
||||
? Object.keys(data.commands_changes)
|
||||
: [];
|
||||
changedCommands = data.commands_changes ? Object.keys(data.commands_changes) : [];
|
||||
} else {
|
||||
changedCommands = [];
|
||||
}
|
||||
|
|
|
@ -41,9 +41,9 @@ export default {
|
|||
},
|
||||
computed: {
|
||||
buttonClasses() {
|
||||
return this.collapsed ?
|
||||
'btn-blank btn-todo sidebar-collapsed-icon dont-change-state' :
|
||||
'btn btn-default btn-todo issuable-header-btn float-right';
|
||||
return this.collapsed
|
||||
? 'btn-blank btn-todo sidebar-collapsed-icon dont-change-state'
|
||||
: 'btn btn-default btn-todo issuable-header-btn float-right';
|
||||
},
|
||||
buttonLabel() {
|
||||
return this.isTodo ? MARK_TEXT : TODO_TEXT;
|
||||
|
|
|
@ -37,7 +37,8 @@ class SidebarMoveIssue {
|
|||
// Keep the dropdown open after selecting an option
|
||||
shouldPropagate: false,
|
||||
data: (searchTerm, callback) => {
|
||||
this.mediator.fetchAutocompleteProjects(searchTerm)
|
||||
this.mediator
|
||||
.fetchAutocompleteProjects(searchTerm)
|
||||
.then(callback)
|
||||
.catch(() => new window.Flash('An error occurred while fetching projects autocomplete.'));
|
||||
},
|
||||
|
@ -48,7 +49,7 @@ class SidebarMoveIssue {
|
|||
</a>
|
||||
</li>
|
||||
`,
|
||||
clicked: (options) => {
|
||||
clicked: options => {
|
||||
const project = options.selectedObj;
|
||||
const selectedProjectId = options.isMarking ? project.id : 0;
|
||||
this.mediator.setMoveToProjectId(selectedProjectId);
|
||||
|
@ -68,17 +69,12 @@ class SidebarMoveIssue {
|
|||
|
||||
onConfirmClicked() {
|
||||
if (isValidProjectId(this.mediator.store.moveToProjectId)) {
|
||||
this.$confirmButton
|
||||
.disable()
|
||||
.addClass('is-loading');
|
||||
this.$confirmButton.disable().addClass('is-loading');
|
||||
|
||||
this.mediator.moveIssue()
|
||||
.catch(() => {
|
||||
window.Flash('An error occurred while moving the issue.');
|
||||
this.$confirmButton
|
||||
.enable()
|
||||
.removeClass('is-loading');
|
||||
});
|
||||
this.mediator.moveIssue().catch(() => {
|
||||
window.Flash('An error occurred while moving the issue.');
|
||||
this.$confirmButton.enable().removeClass('is-loading');
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -15,15 +15,16 @@ export default class SidebarMilestone {
|
|||
components: {
|
||||
timeTracker,
|
||||
},
|
||||
render: createElement => createElement('timeTracker', {
|
||||
props: {
|
||||
timeEstimate: parseInt(timeEstimate, 10),
|
||||
timeSpent: parseInt(timeSpent, 10),
|
||||
humanTimeEstimate,
|
||||
humanTimeSpent,
|
||||
rootPath: '/',
|
||||
},
|
||||
}),
|
||||
render: createElement =>
|
||||
createElement('timeTracker', {
|
||||
props: {
|
||||
timeEstimate: parseInt(timeEstimate, 10),
|
||||
timeSpent: parseInt(timeSpent, 10),
|
||||
humanTimeEstimate,
|
||||
humanTimeSpent,
|
||||
rootPath: '/',
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -22,14 +22,15 @@ function mountAssigneesComponent(mediator) {
|
|||
components: {
|
||||
SidebarAssignees,
|
||||
},
|
||||
render: createElement => createElement('sidebar-assignees', {
|
||||
props: {
|
||||
mediator,
|
||||
field: el.dataset.field,
|
||||
signedIn: el.hasAttribute('data-signed-in'),
|
||||
issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
|
||||
},
|
||||
}),
|
||||
render: createElement =>
|
||||
createElement('sidebar-assignees', {
|
||||
props: {
|
||||
mediator,
|
||||
field: el.dataset.field,
|
||||
signedIn: el.hasAttribute('data-signed-in'),
|
||||
issuableType: gl.utils.isInIssuePage() ? 'issue' : 'merge_request',
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -83,11 +84,12 @@ function mountParticipantsComponent(mediator) {
|
|||
components: {
|
||||
sidebarParticipants,
|
||||
},
|
||||
render: createElement => createElement('sidebar-participants', {
|
||||
props: {
|
||||
mediator,
|
||||
},
|
||||
}),
|
||||
render: createElement =>
|
||||
createElement('sidebar-participants', {
|
||||
props: {
|
||||
mediator,
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -102,11 +104,12 @@ function mountSubscriptionsComponent(mediator) {
|
|||
components: {
|
||||
sidebarSubscriptions,
|
||||
},
|
||||
render: createElement => createElement('sidebar-subscriptions', {
|
||||
props: {
|
||||
mediator,
|
||||
},
|
||||
}),
|
||||
render: createElement =>
|
||||
createElement('sidebar-subscriptions', {
|
||||
props: {
|
||||
mediator,
|
||||
},
|
||||
}),
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -22,11 +22,15 @@ export default class SidebarService {
|
|||
}
|
||||
|
||||
update(key, data) {
|
||||
return Vue.http.put(this.endpoint, {
|
||||
[key]: data,
|
||||
}, {
|
||||
emulateJSON: true,
|
||||
});
|
||||
return Vue.http.put(
|
||||
this.endpoint,
|
||||
{
|
||||
[key]: data,
|
||||
},
|
||||
{
|
||||
emulateJSON: true,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
getProjectsAutocomplete(searchTerm) {
|
||||
|
|
Loading…
Reference in New Issue