Prettify performance_bar notes and profile modules
This commit is contained in:
parent
d87e88a616
commit
b49c400a96
|
@ -95,29 +95,20 @@ export default {
|
|||
return awardList.filter(award => award.user.id === this.getUserData.id).length;
|
||||
},
|
||||
awardTitle(awardsList) {
|
||||
const hasReactionByCurrentUser = this.hasReactionByCurrentUser(
|
||||
awardsList,
|
||||
);
|
||||
const hasReactionByCurrentUser = this.hasReactionByCurrentUser(awardsList);
|
||||
const TOOLTIP_NAME_COUNT = hasReactionByCurrentUser ? 9 : 10;
|
||||
let awardList = awardsList;
|
||||
|
||||
// Filter myself from list if I am awarded.
|
||||
if (hasReactionByCurrentUser) {
|
||||
awardList = awardList.filter(
|
||||
award => award.user.id !== this.getUserData.id,
|
||||
);
|
||||
awardList = awardList.filter(award => award.user.id !== this.getUserData.id);
|
||||
}
|
||||
|
||||
// Get only 9-10 usernames to show in tooltip text.
|
||||
const namesToShow = awardList
|
||||
.slice(0, TOOLTIP_NAME_COUNT)
|
||||
.map(award => award.user.name);
|
||||
const namesToShow = awardList.slice(0, TOOLTIP_NAME_COUNT).map(award => award.user.name);
|
||||
|
||||
// Get the remaining list to use in `and x more` text.
|
||||
const remainingAwardList = awardList.slice(
|
||||
TOOLTIP_NAME_COUNT,
|
||||
awardList.length,
|
||||
);
|
||||
const remainingAwardList = awardList.slice(TOOLTIP_NAME_COUNT, awardList.length);
|
||||
|
||||
// Add myself to the begining of the list so title will start with You.
|
||||
if (hasReactionByCurrentUser) {
|
||||
|
@ -128,9 +119,7 @@ export default {
|
|||
|
||||
// We have 10+ awarded user, join them with comma and add `and x more`.
|
||||
if (remainingAwardList.length) {
|
||||
title = `${namesToShow.join(', ')}, and ${
|
||||
remainingAwardList.length
|
||||
} more.`;
|
||||
title = `${namesToShow.join(', ')}, and ${remainingAwardList.length} more.`;
|
||||
} else if (namesToShow.length > 1) {
|
||||
// Join all names with comma but not the last one, it will be added with and text.
|
||||
title = namesToShow.slice(0, namesToShow.length - 1).join(', ');
|
||||
|
@ -170,9 +159,7 @@ export default {
|
|||
awardName: parsedName,
|
||||
};
|
||||
|
||||
this.toggleAwardRequest(data).catch(() =>
|
||||
Flash('Something went wrong on our end.'),
|
||||
);
|
||||
this.toggleAwardRequest(data).catch(() => Flash('Something went wrong on our end.'));
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
@ -68,10 +68,7 @@ export const collapseSystemNotes = notes => {
|
|||
lastDescriptionSystemNote = note;
|
||||
lastDescriptionSystemNoteIndex = acc.length;
|
||||
} else if (lastDescriptionSystemNote) {
|
||||
const timeDifferenceMinutes = getTimeDifferenceMinutes(
|
||||
lastDescriptionSystemNote,
|
||||
note,
|
||||
);
|
||||
const timeDifferenceMinutes = getTimeDifferenceMinutes(lastDescriptionSystemNote, note);
|
||||
|
||||
// are they less than 10 minutes appart?
|
||||
if (timeDifferenceMinutes > 10) {
|
||||
|
|
|
@ -4,5 +4,4 @@ import notesModule from './modules';
|
|||
|
||||
Vue.use(Vuex);
|
||||
|
||||
export default () =>
|
||||
new Vuex.Store(notesModule());
|
||||
export default () => new Vuex.Store(notesModule());
|
||||
|
|
|
@ -1,29 +1,29 @@
|
|||
<script>
|
||||
export default {
|
||||
props: {
|
||||
currentRequest: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
metric: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
export default {
|
||||
props: {
|
||||
currentRequest: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
duration() {
|
||||
return (
|
||||
this.currentRequest.details[this.metric] &&
|
||||
this.currentRequest.details[this.metric].duration
|
||||
);
|
||||
},
|
||||
calls() {
|
||||
return (
|
||||
this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
|
||||
);
|
||||
},
|
||||
metric: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
duration() {
|
||||
return (
|
||||
this.currentRequest.details[this.metric] &&
|
||||
this.currentRequest.details[this.metric].duration
|
||||
);
|
||||
},
|
||||
calls() {
|
||||
return (
|
||||
this.currentRequest.details[this.metric] && this.currentRequest.details[this.metric].calls
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
|
|
|
@ -9,8 +9,7 @@ export default ({ container }) =>
|
|||
performanceBarApp: () => import('./components/performance_bar_app.vue'),
|
||||
},
|
||||
data() {
|
||||
const performanceBarData = document.querySelector(this.$options.el)
|
||||
.dataset;
|
||||
const performanceBarData = document.querySelector(this.$options.el).dataset;
|
||||
const store = new PerformanceBarStore();
|
||||
|
||||
return {
|
||||
|
|
|
@ -11,8 +11,10 @@ export default class PerformanceBarService {
|
|||
|
||||
static registerInterceptor(peekUrl, callback) {
|
||||
const interceptor = response => {
|
||||
const [fireCallback, requestId, requestUrl] =
|
||||
PerformanceBarService.callbackParams(response, peekUrl);
|
||||
const [fireCallback, requestId, requestUrl] = PerformanceBarService.callbackParams(
|
||||
response,
|
||||
peekUrl,
|
||||
);
|
||||
|
||||
if (fireCallback) {
|
||||
callback(requestId, requestUrl);
|
||||
|
@ -30,10 +32,7 @@ export default class PerformanceBarService {
|
|||
|
||||
static removeInterceptor(interceptor) {
|
||||
axios.interceptors.response.eject(interceptor);
|
||||
Vue.http.interceptors = _.without(
|
||||
Vue.http.interceptors,
|
||||
vueResourceInterceptor,
|
||||
);
|
||||
Vue.http.interceptors = _.without(Vue.http.interceptors, vueResourceInterceptor);
|
||||
}
|
||||
|
||||
static callbackParams(response, peekUrl) {
|
||||
|
|
|
@ -32,8 +32,6 @@ export default class PerformanceBarStore {
|
|||
}
|
||||
|
||||
canTrackRequest(requestUrl) {
|
||||
return (
|
||||
this.requests.filter(request => request.url === requestUrl).length < 2
|
||||
);
|
||||
return this.requests.filter(request => request.url === requestUrl).length < 2;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,78 +1,78 @@
|
|||
<script>
|
||||
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
|
||||
import { __, s__, sprintf } from '~/locale';
|
||||
import csrf from '~/lib/utils/csrf';
|
||||
import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
|
||||
import { __, s__, sprintf } from '~/locale';
|
||||
import csrf from '~/lib/utils/csrf';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
DeprecatedModal,
|
||||
export default {
|
||||
components: {
|
||||
DeprecatedModal,
|
||||
},
|
||||
props: {
|
||||
actionUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
props: {
|
||||
actionUrl: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
confirmWithPassword: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
username: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
confirmWithPassword: {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enteredPassword: '',
|
||||
enteredUsername: '',
|
||||
};
|
||||
username: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
computed: {
|
||||
csrfToken() {
|
||||
return csrf.token;
|
||||
},
|
||||
inputLabel() {
|
||||
let confirmationValue;
|
||||
if (this.confirmWithPassword) {
|
||||
confirmationValue = __('password');
|
||||
} else {
|
||||
confirmationValue = __('username');
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
enteredPassword: '',
|
||||
enteredUsername: '',
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
csrfToken() {
|
||||
return csrf.token;
|
||||
},
|
||||
inputLabel() {
|
||||
let confirmationValue;
|
||||
if (this.confirmWithPassword) {
|
||||
confirmationValue = __('password');
|
||||
} else {
|
||||
confirmationValue = __('username');
|
||||
}
|
||||
|
||||
confirmationValue = `<code>${confirmationValue}</code>`;
|
||||
confirmationValue = `<code>${confirmationValue}</code>`;
|
||||
|
||||
return sprintf(
|
||||
s__('Profiles|Type your %{confirmationValue} to confirm:'),
|
||||
{ confirmationValue },
|
||||
false,
|
||||
);
|
||||
},
|
||||
text() {
|
||||
return sprintf(
|
||||
s__(`Profiles|
|
||||
return sprintf(
|
||||
s__('Profiles|Type your %{confirmationValue} to confirm:'),
|
||||
{ confirmationValue },
|
||||
false,
|
||||
);
|
||||
},
|
||||
text() {
|
||||
return sprintf(
|
||||
s__(`Profiles|
|
||||
You are about to permanently delete %{yourAccount}, and all of the issues, merge requests, and groups linked to your account.
|
||||
Once you confirm %{deleteAccount}, it cannot be undone or recovered.`),
|
||||
{
|
||||
yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
|
||||
deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
{
|
||||
yourAccount: `<strong>${s__('Profiles|your account')}</strong>`,
|
||||
deleteAccount: `<strong>${s__('Profiles|Delete Account')}</strong>`,
|
||||
},
|
||||
false,
|
||||
);
|
||||
},
|
||||
methods: {
|
||||
canSubmit() {
|
||||
if (this.confirmWithPassword) {
|
||||
return this.enteredPassword !== '';
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
canSubmit() {
|
||||
if (this.confirmWithPassword) {
|
||||
return this.enteredPassword !== '';
|
||||
}
|
||||
|
||||
return this.enteredUsername === this.username;
|
||||
},
|
||||
onSubmit() {
|
||||
this.$refs.form.submit();
|
||||
},
|
||||
return this.enteredUsername === this.username;
|
||||
},
|
||||
};
|
||||
onSubmit() {
|
||||
this.$refs.form.submit();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -4,20 +4,35 @@ import $ from 'jquery';
|
|||
import 'cropper';
|
||||
import _ from 'underscore';
|
||||
|
||||
((global) => {
|
||||
(global => {
|
||||
// Matches everything but the file name
|
||||
const FILENAMEREGEX = /^.*[\\\/]/;
|
||||
|
||||
class GitLabCrop {
|
||||
constructor(input, { filename, previewImage, modalCrop, pickImageEl, uploadImageBtn, modalCropImg,
|
||||
exportWidth = 200, exportHeight = 200, cropBoxWidth = 200, cropBoxHeight = 200 } = {}) {
|
||||
constructor(
|
||||
input,
|
||||
{
|
||||
filename,
|
||||
previewImage,
|
||||
modalCrop,
|
||||
pickImageEl,
|
||||
uploadImageBtn,
|
||||
modalCropImg,
|
||||
exportWidth = 200,
|
||||
exportHeight = 200,
|
||||
cropBoxWidth = 200,
|
||||
cropBoxHeight = 200,
|
||||
} = {},
|
||||
) {
|
||||
this.onUploadImageBtnClick = this.onUploadImageBtnClick.bind(this);
|
||||
this.onModalHide = this.onModalHide.bind(this);
|
||||
this.onModalShow = this.onModalShow.bind(this);
|
||||
this.onPickImageClick = this.onPickImageClick.bind(this);
|
||||
this.fileInput = $(input);
|
||||
this.modalCropImg = _.isString(this.modalCropImg) ? $(this.modalCropImg) : this.modalCropImg;
|
||||
this.fileInput.attr('name', `${this.fileInput.attr('name')}-trigger`).attr('id', `${this.fileInput.attr('id')}-trigger`);
|
||||
this.fileInput
|
||||
.attr('name', `${this.fileInput.attr('name')}-trigger`)
|
||||
.attr('id', `${this.fileInput.attr('id')}-trigger`);
|
||||
this.exportWidth = exportWidth;
|
||||
this.exportHeight = exportHeight;
|
||||
this.cropBoxWidth = cropBoxWidth;
|
||||
|
@ -59,7 +74,7 @@ import _ from 'underscore';
|
|||
btn = this;
|
||||
return _this.onActionBtnClick(btn);
|
||||
});
|
||||
return this.croppedImageBlob = null;
|
||||
return (this.croppedImageBlob = null);
|
||||
}
|
||||
|
||||
onPickImageClick() {
|
||||
|
@ -94,9 +109,9 @@ import _ from 'underscore';
|
|||
width: cropBoxWidth,
|
||||
height: cropBoxHeight,
|
||||
left: (container.width - cropBoxWidth) / 2,
|
||||
top: (container.height - cropBoxHeight) / 2
|
||||
top: (container.height - cropBoxHeight) / 2,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -116,7 +131,7 @@ import _ from 'underscore';
|
|||
var data, result;
|
||||
data = $(btn).data();
|
||||
if (this.modalCropImg.data('cropper') && data.method) {
|
||||
return result = this.modalCropImg.cropper(data.method, data.option);
|
||||
return (result = this.modalCropImg.cropper(data.method, data.option));
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -127,7 +142,7 @@ import _ from 'underscore';
|
|||
readFile(input) {
|
||||
var _this, reader;
|
||||
_this = this;
|
||||
reader = new FileReader;
|
||||
reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
_this.modalCropImg.attr('src', reader.result);
|
||||
return _this.modalCrop.modal('show');
|
||||
|
@ -145,7 +160,7 @@ import _ from 'underscore';
|
|||
array.push(binary.charCodeAt(i));
|
||||
}
|
||||
return new Blob([new Uint8Array(array)], {
|
||||
type: 'image/png'
|
||||
type: 'image/png',
|
||||
});
|
||||
}
|
||||
|
||||
|
@ -157,11 +172,13 @@ import _ from 'underscore';
|
|||
}
|
||||
|
||||
setBlob() {
|
||||
this.dataURL = this.modalCropImg.cropper('getCroppedCanvas', {
|
||||
width: 200,
|
||||
height: 200
|
||||
}).toDataURL('image/png');
|
||||
return this.croppedImageBlob = this.dataURLtoBlob(this.dataURL);
|
||||
this.dataURL = this.modalCropImg
|
||||
.cropper('getCroppedCanvas', {
|
||||
width: 200,
|
||||
height: 200,
|
||||
})
|
||||
.toDataURL('image/png');
|
||||
return (this.croppedImageBlob = this.dataURLtoBlob(this.dataURL));
|
||||
}
|
||||
|
||||
getBlob() {
|
||||
|
|
|
@ -26,11 +26,7 @@ export default class Profile {
|
|||
}
|
||||
|
||||
bindEvents() {
|
||||
$('.js-preferences-form').on(
|
||||
'change.preference',
|
||||
'input[type=radio]',
|
||||
this.submitForm,
|
||||
);
|
||||
$('.js-preferences-form').on('change.preference', 'input[type=radio]', this.submitForm);
|
||||
$('#user_notification_email').on('change', this.submitForm);
|
||||
$('#user_notified_of_own_activity').on('change', this.submitForm);
|
||||
this.form.on('submit', this.onSubmitForm);
|
||||
|
|
Loading…
Reference in New Issue