diff options
Diffstat (limited to 'app/assets')
43 files changed, 441 insertions, 354 deletions
diff --git a/app/assets/javascripts/api.js b/app/assets/javascripts/api.js index d62fae99c6b..0ca0e8f35dd 100644 --- a/app/assets/javascripts/api.js +++ b/app/assets/javascripts/api.js @@ -150,14 +150,15 @@ const Api = { }, // Return group projects list. Filtered by query - groupProjects(groupId, query, callback) { + groupProjects(groupId, query, options, callback) { const url = Api.buildUrl(Api.groupProjectsPath).replace(':id', groupId); + const defaults = { + search: query, + per_page: 20, + }; return axios .get(url, { - params: { - search: query, - per_page: 20, - }, + params: Object.assign({}, defaults, options), }) .then(({ data }) => callback(data)); }, diff --git a/app/assets/javascripts/boards/filters/due_date_filters.js b/app/assets/javascripts/boards/filters/due_date_filters.js index 70132dbfa6f..9eaa0cd227d 100644 --- a/app/assets/javascripts/boards/filters/due_date_filters.js +++ b/app/assets/javascripts/boards/filters/due_date_filters.js @@ -1,8 +1,7 @@ -/* global dateFormat */ - import Vue from 'vue'; +import dateFormat from 'dateformat'; -Vue.filter('due-date', (value) => { +Vue.filter('due-date', value => { const date = new Date(value); return dateFormat(date, 'mmm d, yyyy', true); }); diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue index e0aecda54f6..eb0985e5603 100644 --- a/app/assets/javascripts/diffs/components/app.vue +++ b/app/assets/javascripts/diffs/components/app.vue @@ -145,7 +145,7 @@ export default { </script> <template> - <div v-if="shouldShow"> + <div v-show="shouldShow"> <div v-if="isLoading" class="loading" diff --git a/app/assets/javascripts/diffs/components/changed_files_dropdown.vue b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue index f224b9dd246..b38d217fbe3 100644 --- a/app/assets/javascripts/diffs/components/changed_files_dropdown.vue +++ b/app/assets/javascripts/diffs/components/changed_files_dropdown.vue @@ -66,59 +66,61 @@ export default { @click="clearSearch" ></i> </div> - <ul> - <li - v-for="diffFile in filteredDiffFiles" - :key="diffFile.name" - > - <a - :href="`#${diffFile.fileHash}`" - :title="diffFile.newPath" - class="diff-changed-file" + <div class="dropdown-content"> + <ul> + <li + v-for="diffFile in filteredDiffFiles" + :key="diffFile.name" > - <icon - :name="fileChangedIcon(diffFile)" - :size="16" - :class="fileChangedClass(diffFile)" - class="diff-file-changed-icon append-right-8" - /> - <span class="diff-changed-file-content append-right-8"> - <strong - v-if="diffFile.blob && diffFile.blob.name" - class="diff-changed-file-name" - > - {{ diffFile.blob.name }} - </strong> - <strong - v-else - class="diff-changed-blank-file-name" - > - {{ s__('Diffs|No file name available') }} - </strong> - <span class="diff-changed-file-path prepend-top-5"> - {{ truncatedDiffPath(diffFile.blob.path) }} + <a + :href="`#${diffFile.fileHash}`" + :title="diffFile.newPath" + class="diff-changed-file" + > + <icon + :name="fileChangedIcon(diffFile)" + :size="16" + :class="fileChangedClass(diffFile)" + class="diff-file-changed-icon append-right-8" + /> + <span class="diff-changed-file-content append-right-8"> + <strong + v-if="diffFile.blob && diffFile.blob.name" + class="diff-changed-file-name" + > + {{ diffFile.blob.name }} + </strong> + <strong + v-else + class="diff-changed-blank-file-name" + > + {{ s__('Diffs|No file name available') }} + </strong> + <span class="diff-changed-file-path prepend-top-5"> + {{ truncatedDiffPath(diffFile.blob.path) }} + </span> </span> - </span> - <span class="diff-changed-stats"> - <span class="cgreen"> - +{{ diffFile.addedLines }} + <span class="diff-changed-stats"> + <span class="cgreen"> + +{{ diffFile.addedLines }} + </span> + <span class="cred"> + -{{ diffFile.removedLines }} + </span> </span> - <span class="cred"> - -{{ diffFile.removedLines }} - </span> - </span> - </a> - </li> + </a> + </li> - <li - v-show="filteredDiffFiles.length === 0" - class="dropdown-menu-empty-item" - > - <a> - {{ __('No files found') }} - </a> - </li> - </ul> + <li + v-show="filteredDiffFiles.length === 0" + class="dropdown-menu-empty-item" + > + <a> + {{ __('No files found') }} + </a> + </li> + </ul> + </div> </div> </span> </template> diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue index 6bad389f778..fba1d1af7cd 100644 --- a/app/assets/javascripts/diffs/components/diff_file_header.vue +++ b/app/assets/javascripts/diffs/components/diff_file_header.vue @@ -112,7 +112,11 @@ export default { }, methods: { handleToggle(e, checkTarget) { - if (!checkTarget || e.target === this.$refs.header) { + if ( + !checkTarget || + e.target === this.$refs.header || + (e.target.classList && e.target.classList.contains('diff-toggle-caret')) + ) { this.$emit('toggleFile'); } }, @@ -201,7 +205,7 @@ export default { <div v-if="!diffFile.submodule && addMergeRequestButtons" - class="file-actions d-none d-md-block" + class="file-actions d-none d-sm-block" > <template v-if="diffFile.blob && diffFile.blob.readableText" diff --git a/app/assets/javascripts/dispatcher.js b/app/assets/javascripts/dispatcher.js index b755458aa4b..a5af37e80b6 100644 --- a/app/assets/javascripts/dispatcher.js +++ b/app/assets/javascripts/dispatcher.js @@ -1,12 +1,12 @@ /* eslint-disable consistent-return, no-new */ import $ from 'jquery'; -import Flash from './flash'; import GfmAutoComplete from './gfm_auto_complete'; import { convertPermissionToBoolean } from './lib/utils/common_utils'; import GlFieldErrors from './gl_field_errors'; import Shortcuts from './shortcuts'; import SearchAutocomplete from './search_autocomplete'; +import performanceBar from './performance_bar'; function initSearch() { // Only when search form is present @@ -72,9 +72,7 @@ function initGFMInput() { function initPerformanceBar() { if (document.querySelector('#js-peek')) { - import('./performance_bar') - .then(m => new m.default({ container: '#js-peek' })) // eslint-disable-line new-cap - .catch(() => Flash('Error loading performance bar module')); + performanceBar({ container: '#js-peek' }); } } diff --git a/app/assets/javascripts/due_date_select.js b/app/assets/javascripts/due_date_select.js index 4164149dd06..17ea3bdb179 100644 --- a/app/assets/javascripts/due_date_select.js +++ b/app/assets/javascripts/due_date_select.js @@ -1,7 +1,6 @@ -/* global dateFormat */ - import $ from 'jquery'; import Pikaday from 'pikaday'; +import dateFormat from 'dateformat'; import { __ } from '~/locale'; import axios from './lib/utils/axios_utils'; import { timeFor } from './lib/utils/datetime_utility'; @@ -55,7 +54,7 @@ class DueDateSelect { format: 'yyyy-mm-dd', parse: dateString => parsePikadayDate(dateString), toString: date => pikadayToString(date), - onSelect: (dateText) => { + onSelect: dateText => { $dueDateInput.val(calendar.toString(dateText)); if (this.$dropdown.hasClass('js-issue-boards-due-date')) { @@ -73,7 +72,7 @@ class DueDateSelect { } initRemoveDueDate() { - this.$block.on('click', '.js-remove-due-date', (e) => { + this.$block.on('click', '.js-remove-due-date', e => { const calendar = this.$datePicker.data('pikaday'); e.preventDefault(); @@ -124,7 +123,8 @@ class DueDateSelect { this.$loading.fadeOut(); }; - gl.issueBoards.BoardsStore.detail.issue.update(this.$dropdown.attr('data-issue-update')) + gl.issueBoards.BoardsStore.detail.issue + .update(this.$dropdown.attr('data-issue-update')) .then(fadeOutLoader) .catch(fadeOutLoader); } @@ -147,17 +147,18 @@ class DueDateSelect { $('.js-remove-due-date-holder').toggleClass('hidden', selectedDateValue.length); - return axios.put(this.issueUpdateURL, this.datePayload) - .then(() => { - const tooltipText = hasDueDate ? `${__('Due date')}<br />${selectedDateValue} (${timeFor(selectedDateValue)})` : __('Due date'); - if (isDropdown) { - this.$dropdown.trigger('loaded.gl.dropdown'); - this.$dropdown.dropdown('toggle'); - } - this.$sidebarCollapsedValue.attr('data-original-title', tooltipText); + return axios.put(this.issueUpdateURL, this.datePayload).then(() => { + const tooltipText = hasDueDate + ? `${__('Due date')}<br />${selectedDateValue} (${timeFor(selectedDateValue)})` + : __('Due date'); + if (isDropdown) { + this.$dropdown.trigger('loaded.gl.dropdown'); + this.$dropdown.dropdown('toggle'); + } + this.$sidebarCollapsedValue.attr('data-original-title', tooltipText); - return this.$loading.fadeOut(); - }); + return this.$loading.fadeOut(); + }); } } @@ -187,15 +188,19 @@ export default class DueDateSelectors { $datePicker.data('pikaday', calendar); }); - $('.js-clear-due-date,.js-clear-start-date').on('click', (e) => { + $('.js-clear-due-date,.js-clear-start-date').on('click', e => { e.preventDefault(); - const calendar = $(e.target).siblings('.datepicker').data('pikaday'); + const calendar = $(e.target) + .siblings('.datepicker') + .data('pikaday'); calendar.setDate(null); }); } // eslint-disable-next-line class-methods-use-this initIssuableSelect() { - const $loading = $('.js-issuable-update .due_date').find('.block-loading').hide(); + const $loading = $('.js-issuable-update .due_date') + .find('.block-loading') + .hide(); $('.js-due-date-select').each((i, dropdown) => { const $dropdown = $(dropdown); diff --git a/app/assets/javascripts/gfm_auto_complete.js b/app/assets/javascripts/gfm_auto_complete.js index 09186a865e4..73b2cd0b2c7 100644 --- a/app/assets/javascripts/gfm_auto_complete.js +++ b/app/assets/javascripts/gfm_auto_complete.js @@ -12,7 +12,7 @@ export const defaultAutocompleteConfig = { members: true, issues: true, mergeRequests: true, - epics: false, + epics: true, milestones: true, labels: true, }; @@ -493,6 +493,7 @@ GfmAutoComplete.atTypeMap = { '@': 'members', '#': 'issues', '!': 'mergeRequests', + '&': 'epics', '~': 'labels', '%': 'milestones', '/': 'commands', diff --git a/app/assets/javascripts/gl_form.js b/app/assets/javascripts/gl_form.js index f802971a3ca..c74de7ac34d 100644 --- a/app/assets/javascripts/gl_form.js +++ b/app/assets/javascripts/gl_form.js @@ -9,6 +9,13 @@ export default class GLForm { this.form = form; this.textarea = this.form.find('textarea.js-gfm-input'); this.enableGFM = Object.assign({}, GFMConfig.defaultAutocompleteConfig, enableGFM); + // Disable autocomplete for keywords which do not have dataSources available + const dataSources = (gl.GfmAutoComplete && gl.GfmAutoComplete.dataSources) || {}; + Object.keys(this.enableGFM).forEach(item => { + if (item !== 'emojis') { + this.enableGFM[item] = !!dataSources[item]; + } + }); // Before we start, we should clean up any previous data for this form this.destroy(); // Setup the form diff --git a/app/assets/javascripts/ide/components/error_message.vue b/app/assets/javascripts/ide/components/error_message.vue index e7408264c80..acbc98b7a7b 100644 --- a/app/assets/javascripts/ide/components/error_message.vue +++ b/app/assets/javascripts/ide/components/error_message.vue @@ -24,8 +24,8 @@ export default { this.isLoading = true; - this.$store - .dispatch(this.message.action, this.message.actionPayload) + this.message + .action(this.message.actionPayload) .then(() => { this.isLoading = false; }) diff --git a/app/assets/javascripts/ide/services/index.js b/app/assets/javascripts/ide/services/index.js index 5e642067141..3e939f0c1a3 100644 --- a/app/assets/javascripts/ide/services/index.js +++ b/app/assets/javascripts/ide/services/index.js @@ -1,16 +1,11 @@ -import Vue from 'vue'; -import VueResource from 'vue-resource'; import axios from '~/lib/utils/axios_utils'; import Api from '~/api'; -Vue.use(VueResource); - export default { - getTreeData(endpoint) { - return Vue.http.get(endpoint, { params: { format: 'json' } }); - }, getFileData(endpoint) { - return Vue.http.get(endpoint, { params: { format: 'json', viewer: 'none' } }); + return axios.get(endpoint, { + params: { format: 'json', viewer: 'none' }, + }); }, getRawFileData(file) { if (file.tempFile) { @@ -21,7 +16,11 @@ export default { return Promise.resolve(file.raw); } - return Vue.http.get(file.rawPath, { params: { format: 'json' } }).then(res => res.text()); + return axios + .get(file.rawPath, { + params: { format: 'json' }, + }) + .then(({ data }) => data); }, getBaseRawFileData(file, sha) { if (file.tempFile) { @@ -32,11 +31,11 @@ export default { return Promise.resolve(file.baseRaw); } - return Vue.http + return axios .get(file.rawPath.replace(`/raw/${file.branchId}/${file.path}`, `/raw/${sha}/${file.path}`), { params: { format: 'json' }, }) - .then(res => res.text()); + .then(({ data }) => data); }, getProjectData(namespace, project) { return Api.project(`${namespace}/${project}`); @@ -53,21 +52,9 @@ export default { getBranchData(projectId, currentBranchId) { return Api.branchSingle(projectId, currentBranchId); }, - createBranch(projectId, payload) { - const url = Api.buildUrl(Api.createBranchPath).replace(':id', projectId); - - return Vue.http.post(url, payload); - }, commit(projectId, payload) { return Api.commitMultiple(projectId, payload); }, - getTreeLastCommit(endpoint) { - return Vue.http.get(endpoint, { - params: { - format: 'json', - }, - }); - }, getFiles(projectUrl, branchId) { const url = `${projectUrl}/files/${branchId}`; return axios.get(url, { params: { format: 'json' } }); diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js index 29995a29d1a..6c0887e11ee 100644 --- a/app/assets/javascripts/ide/stores/actions/file.js +++ b/app/assets/javascripts/ide/stores/actions/file.js @@ -1,5 +1,5 @@ -import { normalizeHeaders } from '~/lib/utils/common_utils'; -import flash from '~/flash'; +import { __ } from '../../../locale'; +import { normalizeHeaders } from '../../../lib/utils/common_utils'; import eventHub from '../../eventhub'; import service from '../../services'; import * as types from '../mutation_types'; @@ -66,13 +66,10 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive .getFileData( `${gon.relative_url_root ? gon.relative_url_root : ''}${file.url.replace('/-/', '/')}`, ) - .then(res => { - const pageTitle = decodeURI(normalizeHeaders(res.headers)['PAGE-TITLE']); - setPageTitle(pageTitle); + .then(({ data, headers }) => { + const normalizedHeaders = normalizeHeaders(headers); + setPageTitle(decodeURI(normalizedHeaders['PAGE-TITLE'])); - return res.json(); - }) - .then(data => { commit(types.SET_FILE_DATA, { data, file }); commit(types.TOGGLE_FILE_OPEN, path); if (makeFileActive) dispatch('setFileActive', path); @@ -80,7 +77,13 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive }) .catch(() => { commit(types.TOGGLE_LOADING, { entry: file }); - flash('Error loading file data. Please try again.', 'alert', document, null, false, true); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading the file.'), + action: payload => + dispatch('getFileData', payload).then(() => dispatch('setErrorMessage', null)), + actionText: __('Please try again'), + actionPayload: { path, makeFileActive }, + }); }); }; @@ -88,7 +91,7 @@ export const setFileMrChange = ({ commit }, { file, mrChange }) => { commit(types.SET_FILE_MERGE_REQUEST_CHANGE, { file, mrChange }); }; -export const getRawFileData = ({ state, commit }, { path, baseSha }) => { +export const getRawFileData = ({ state, commit, dispatch }, { path, baseSha }) => { const file = state.entries[path]; return new Promise((resolve, reject) => { service @@ -113,7 +116,13 @@ export const getRawFileData = ({ state, commit }, { path, baseSha }) => { } }) .catch(() => { - flash('Error loading file content. Please try again.'); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading the file content.'), + action: payload => + dispatch('getRawFileData', payload).then(() => dispatch('setErrorMessage', null)), + actionText: __('Please try again'), + actionPayload: { path, baseSha }, + }); reject(); }); }); diff --git a/app/assets/javascripts/ide/stores/actions/merge_request.js b/app/assets/javascripts/ide/stores/actions/merge_request.js index edb20ff96fc..4aa151abcb7 100644 --- a/app/assets/javascripts/ide/stores/actions/merge_request.js +++ b/app/assets/javascripts/ide/stores/actions/merge_request.js @@ -1,17 +1,16 @@ -import flash from '~/flash'; +import { __ } from '../../../locale'; import service from '../../services'; import * as types from '../mutation_types'; export const getMergeRequestData = ( - { commit, state }, + { commit, dispatch, state }, { projectId, mergeRequestId, force = false } = {}, ) => new Promise((resolve, reject) => { if (!state.projects[projectId].mergeRequests[mergeRequestId] || force) { service .getProjectMergeRequestData(projectId, mergeRequestId) - .then(res => res.data) - .then(data => { + .then(({ data }) => { commit(types.SET_MERGE_REQUEST, { projectPath: projectId, mergeRequestId, @@ -21,7 +20,15 @@ export const getMergeRequestData = ( resolve(data); }) .catch(() => { - flash('Error loading merge request data. Please try again.'); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading the merge request.'), + action: payload => + dispatch('getMergeRequestData', payload).then(() => + dispatch('setErrorMessage', null), + ), + actionText: __('Please try again'), + actionPayload: { projectId, mergeRequestId, force }, + }); reject(new Error(`Merge Request not loaded ${projectId}`)); }); } else { @@ -30,15 +37,14 @@ export const getMergeRequestData = ( }); export const getMergeRequestChanges = ( - { commit, state }, + { commit, dispatch, state }, { projectId, mergeRequestId, force = false } = {}, ) => new Promise((resolve, reject) => { if (!state.projects[projectId].mergeRequests[mergeRequestId].changes.length || force) { service .getProjectMergeRequestChanges(projectId, mergeRequestId) - .then(res => res.data) - .then(data => { + .then(({ data }) => { commit(types.SET_MERGE_REQUEST_CHANGES, { projectPath: projectId, mergeRequestId, @@ -47,7 +53,15 @@ export const getMergeRequestChanges = ( resolve(data); }) .catch(() => { - flash('Error loading merge request changes. Please try again.'); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading the merge request changes.'), + action: payload => + dispatch('getMergeRequestChanges', payload).then(() => + dispatch('setErrorMessage', null), + ), + actionText: __('Please try again'), + actionPayload: { projectId, mergeRequestId, force }, + }); reject(new Error(`Merge Request Changes not loaded ${projectId}`)); }); } else { @@ -56,7 +70,7 @@ export const getMergeRequestChanges = ( }); export const getMergeRequestVersions = ( - { commit, state }, + { commit, dispatch, state }, { projectId, mergeRequestId, force = false } = {}, ) => new Promise((resolve, reject) => { @@ -73,7 +87,15 @@ export const getMergeRequestVersions = ( resolve(data); }) .catch(() => { - flash('Error loading merge request versions. Please try again.'); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading the merge request version data.'), + action: payload => + dispatch('getMergeRequestVersions', payload).then(() => + dispatch('setErrorMessage', null), + ), + actionText: __('Please try again'), + actionPayload: { projectId, mergeRequestId, force }, + }); reject(new Error(`Merge Request Versions not loaded ${projectId}`)); }); } else { diff --git a/app/assets/javascripts/ide/stores/actions/project.js b/app/assets/javascripts/ide/stores/actions/project.js index ab5cd8e4742..501e25d452b 100644 --- a/app/assets/javascripts/ide/stores/actions/project.js +++ b/app/assets/javascripts/ide/stores/actions/project.js @@ -104,7 +104,7 @@ export const createNewBranchFromDefault = ({ state, dispatch, getters }, branch) .catch(() => { dispatch('setErrorMessage', { text: __('An error occured creating the new branch.'), - action: 'createNewBranchFromDefault', + action: payload => dispatch('createNewBranchFromDefault', payload), actionText: __('Please try again'), actionPayload: branch, }); @@ -119,7 +119,7 @@ export const showBranchNotFoundError = ({ dispatch }, branchId) => { }, false, ), - action: 'createNewBranchFromDefault', + action: payload => dispatch('createNewBranchFromDefault', payload), actionText: __('Create branch'), actionPayload: branchId, }); diff --git a/app/assets/javascripts/ide/stores/actions/tree.js b/app/assets/javascripts/ide/stores/actions/tree.js index dcdd900fc7e..ffaaaabff17 100644 --- a/app/assets/javascripts/ide/stores/actions/tree.js +++ b/app/assets/javascripts/ide/stores/actions/tree.js @@ -1,9 +1,6 @@ -import { normalizeHeaders } from '~/lib/utils/common_utils'; -import flash from '~/flash'; import { __ } from '../../../locale'; import service from '../../services'; import * as types from '../mutation_types'; -import { findEntry } from '../utils'; import FilesDecoratorWorker from '../workers/files_decorator_worker'; export const toggleTreeOpen = ({ commit }, path) => { @@ -37,32 +34,6 @@ export const handleTreeEntryAction = ({ commit, dispatch }, row) => { dispatch('showTreeEntry', row.path); }; -export const getLastCommitData = ({ state, commit, dispatch }, tree = state) => { - if (!tree || tree.lastCommitPath === null || !tree.lastCommitPath) return; - - service - .getTreeLastCommit(tree.lastCommitPath) - .then(res => { - const lastCommitPath = normalizeHeaders(res.headers)['MORE-LOGS-URL'] || null; - - commit(types.SET_LAST_COMMIT_URL, { tree, url: lastCommitPath }); - - return res.json(); - }) - .then(data => { - data.forEach(lastCommit => { - const entry = findEntry(tree.tree, lastCommit.type, lastCommit.file_name); - - if (entry) { - commit(types.SET_LAST_COMMIT_DATA, { entry, lastCommit }); - } - }); - - dispatch('getLastCommitData', tree); - }) - .catch(() => flash('Error fetching log data.', 'alert', document, null, false, true)); -}; - export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } = {}) => new Promise((resolve, reject) => { if ( @@ -106,14 +77,13 @@ export const getFiles = ({ state, commit, dispatch }, { projectId, branchId } = if (e.response.status === 404) { dispatch('showBranchNotFoundError', branchId); } else { - flash( - __('Error loading tree data. Please try again.'), - 'alert', - document, - null, - false, - true, - ); + dispatch('setErrorMessage', { + text: __('An error occured whilst loading all the files.'), + action: payload => + dispatch('getFiles', payload).then(() => dispatch('setErrorMessage', null)), + actionText: __('Please try again'), + actionPayload: { projectId, branchId }, + }); } reject(e); }); diff --git a/app/assets/javascripts/lib/utils/datetime_utility.js b/app/assets/javascripts/lib/utils/datetime_utility.js index 7cca32dc6fa..1f66fa811ea 100644 --- a/app/assets/javascripts/lib/utils/datetime_utility.js +++ b/app/assets/javascripts/lib/utils/datetime_utility.js @@ -1,11 +1,10 @@ import $ from 'jquery'; import timeago from 'timeago.js'; -import dateFormat from 'vendor/date.format'; +import dateFormat from 'dateformat'; import { pluralize } from './text_utility'; import { languageCode, s__ } from '../../locale'; window.timeago = timeago; -window.dateFormat = dateFormat; /** * Returns i18n month names array. @@ -143,7 +142,8 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => { if (setTimeago) { // Recreate with custom template $(el).tooltip({ - template: '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', + template: + '<div class="tooltip local-timeago" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>', }); } @@ -275,10 +275,8 @@ export const totalDaysInMonth = date => { * * @param {Array} quarter */ -export const totalDaysInQuarter = quarter => quarter.reduce( - (acc, month) => acc + totalDaysInMonth(month), - 0, -); +export const totalDaysInQuarter = quarter => + quarter.reduce((acc, month) => acc + totalDaysInMonth(month), 0); /** * Returns list of Dates referring to Sundays of the month @@ -333,14 +331,8 @@ export const getTimeframeWindowFrom = (startDate, length) => { // Iterate and set date for the size of length // and push date reference to timeframe list const timeframe = new Array(length) - .fill() - .map( - (val, i) => new Date( - startDate.getFullYear(), - startDate.getMonth() + i, - 1, - ), - ); + .fill() + .map((val, i) => new Date(startDate.getFullYear(), startDate.getMonth() + i, 1)); // Change date of last timeframe item to last date of the month timeframe[length - 1].setDate(totalDaysInMonth(timeframe[length - 1])); @@ -362,14 +354,15 @@ export const getTimeframeWindowFrom = (startDate, length) => { * @param {Date} date * @param {Array} quarter */ -export const dayInQuarter = (date, quarter) => quarter.reduce((acc, month) => { - if (date.getMonth() > month.getMonth()) { - return acc + totalDaysInMonth(month); - } else if (date.getMonth() === month.getMonth()) { - return acc + date.getDate(); - } - return acc + 0; -}, 0); +export const dayInQuarter = (date, quarter) => + quarter.reduce((acc, month) => { + if (date.getMonth() > month.getMonth()) { + return acc + totalDaysInMonth(month); + } else if (date.getMonth() === month.getMonth()) { + return acc + date.getDate(); + } + return acc + 0; + }, 0); window.gl = window.gl || {}; window.gl.utils = { diff --git a/app/assets/javascripts/merge_request_tabs.js b/app/assets/javascripts/merge_request_tabs.js index 329d4303132..53d7504de35 100644 --- a/app/assets/javascripts/merge_request_tabs.js +++ b/app/assets/javascripts/merge_request_tabs.js @@ -16,6 +16,7 @@ import Diff from './diff'; import { localTimeAgo } from './lib/utils/datetime_utility'; import syntaxHighlight from './syntax_highlight'; import Notes from './notes'; +import { polyfillSticky } from './lib/utils/sticky'; /* eslint-disable max-len */ // MergeRequestTabs @@ -68,12 +69,23 @@ let { location } = window; export default class MergeRequestTabs { constructor({ action, setUrl, stubLocation } = {}) { - const mergeRequestTabs = document.querySelector('.js-tabs-affix'); + this.mergeRequestTabs = document.querySelector('.merge-request-tabs-container'); + this.mergeRequestTabsAll = + this.mergeRequestTabs && this.mergeRequestTabs.querySelectorAll + ? this.mergeRequestTabs.querySelectorAll('.merge-request-tabs li') + : null; + this.mergeRequestTabPanes = document.querySelector('#diff-notes-app'); + this.mergeRequestTabPanesAll = + this.mergeRequestTabPanes && this.mergeRequestTabPanes.querySelectorAll + ? this.mergeRequestTabPanes.querySelectorAll('.tab-pane') + : null; const navbar = document.querySelector('.navbar-gitlab'); const peek = document.getElementById('js-peek'); const paddingTop = 16; + this.commitsTab = document.querySelector('.tab-content .commits.tab-pane'); + this.currentTab = null; this.diffsLoaded = false; this.pipelinesLoaded = false; this.commitsLoaded = false; @@ -83,15 +95,15 @@ export default class MergeRequestTabs { this.setUrl = setUrl !== undefined ? setUrl : true; this.setCurrentAction = this.setCurrentAction.bind(this); this.tabShown = this.tabShown.bind(this); - this.showTab = this.showTab.bind(this); + this.clickTab = this.clickTab.bind(this); this.stickyTop = navbar ? navbar.offsetHeight - paddingTop : 0; if (peek) { this.stickyTop += peek.offsetHeight; } - if (mergeRequestTabs) { - this.stickyTop += mergeRequestTabs.offsetHeight; + if (this.mergeRequestTabs) { + this.stickyTop += this.mergeRequestTabs.offsetHeight; } if (stubLocation) { @@ -99,25 +111,22 @@ export default class MergeRequestTabs { } this.bindEvents(); - this.activateTab(action); + if ( + this.mergeRequestTabs && + this.mergeRequestTabs.querySelector(`a[data-action='${action}']`) && + this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click + ) + this.mergeRequestTabs.querySelector(`a[data-action='${action}']`).click(); this.initAffix(); } bindEvents() { - $(document) - .on('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown) - .on('click', '.js-show-tab', this.showTab); - - $('.merge-request-tabs a[data-toggle="tab"]').on('click', this.clickTab); + $('.merge-request-tabs a[data-toggle="tabvue"]').on('click', this.clickTab); } // Used in tests unbindEvents() { - $(document) - .off('shown.bs.tab', '.merge-request-tabs a[data-toggle="tab"]', this.tabShown) - .off('click', '.js-show-tab', this.showTab); - - $('.merge-request-tabs a[data-toggle="tab"]').off('click', this.clickTab); + $('.merge-request-tabs a[data-toggle="tabvue"]').off('click', this.clickTab); } destroyPipelinesView() { @@ -129,58 +138,87 @@ export default class MergeRequestTabs { } } - showTab(e) { - e.preventDefault(); - this.activateTab($(e.target).data('action')); - } - clickTab(e) { - if (e.currentTarget && isMetaClick(e)) { - const targetLink = e.currentTarget.getAttribute('href'); + if (e.currentTarget) { e.stopImmediatePropagation(); e.preventDefault(); - window.open(targetLink, '_blank'); + + const { action } = e.currentTarget.dataset; + + if (action) { + const href = e.currentTarget.getAttribute('href'); + this.tabShown(action, href); + } else if (isMetaClick(e)) { + const targetLink = e.currentTarget.getAttribute('href'); + window.open(targetLink, '_blank'); + } } } - tabShown(e) { - const $target = $(e.target); - const action = $target.data('action'); - - if (action === 'commits') { - this.loadCommits($target.attr('href')); - this.expandView(); - this.resetViewContainer(); - this.destroyPipelinesView(); - } else if (this.isDiffAction(action)) { - if (!isInVueNoteablePage()) { - this.loadDiff($target.attr('href')); - } - if (bp.getBreakpointSize() !== 'lg') { - this.shrinkView(); + tabShown(action, href) { + if (action !== this.currentTab && this.mergeRequestTabs) { + this.currentTab = action; + + if (this.mergeRequestTabPanesAll) { + this.mergeRequestTabPanesAll.forEach(el => { + const tabPane = el; + tabPane.style.display = 'none'; + }); } - if (this.diffViewType() === 'parallel') { - this.expandViewContainer(); + + if (this.mergeRequestTabsAll) { + this.mergeRequestTabsAll.forEach(el => { + el.classList.remove('active'); + }); } - this.destroyPipelinesView(); - this.commitsTab.classList.remove('active'); - } else if (action === 'pipelines') { - this.resetViewContainer(); - this.mountPipelinesView(); - } else { - if (bp.getBreakpointSize() !== 'xs') { + + const tabPane = this.mergeRequestTabPanes.querySelector(`#${action}`); + if (tabPane) tabPane.style.display = 'block'; + const tab = this.mergeRequestTabs.querySelector(`.${action}-tab`); + if (tab) tab.classList.add('active'); + + if (action === 'commits') { + this.loadCommits(href); + this.expandView(); + this.resetViewContainer(); + this.destroyPipelinesView(); + } else if (action === 'new') { this.expandView(); + this.resetViewContainer(); + this.destroyPipelinesView(); + } else if (this.isDiffAction(action)) { + if (!isInVueNoteablePage()) { + this.loadDiff(href); + } + if (bp.getBreakpointSize() !== 'lg') { + this.shrinkView(); + } + if (this.diffViewType() === 'parallel') { + this.expandViewContainer(); + } + this.destroyPipelinesView(); + this.commitsTab.classList.remove('active'); + } else if (action === 'pipelines') { + this.resetViewContainer(); + this.mountPipelinesView(); + } else { + this.mergeRequestTabPanes.querySelector('#notes').style.display = 'block'; + this.mergeRequestTabs.querySelector('.notes-tab').classList.add('active'); + + if (bp.getBreakpointSize() !== 'xs') { + this.expandView(); + } + this.resetViewContainer(); + this.destroyPipelinesView(); + + initDiscussionTab(); + } + if (this.setUrl) { + this.setCurrentAction(action); } - this.resetViewContainer(); - this.destroyPipelinesView(); - initDiscussionTab(); - } - if (this.setUrl) { - this.setCurrentAction(action); + this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction()); } - - this.eventHub.$emit('MergeRequestTabChange', this.getCurrentAction()); } scrollToElement(container) { @@ -193,12 +231,6 @@ export default class MergeRequestTabs { } } - // Activate a tab based on the current action - activateTab(action) { - // important note: the .tab('show') method triggers 'shown.bs.tab' event itself - $(`.merge-request-tabs a[data-action='${action}']`).tab('show'); - } - // Replaces the current Merge Request-specific action in the URL with a new one // // If the action is "notes", the URL is reset to the standard @@ -426,7 +458,6 @@ export default class MergeRequestTabs { initAffix() { const $tabs = $('.js-tabs-affix'); - const $fixedNav = $('.navbar-gitlab'); // Screen space on small screens is usually very sparse // So we dont affix the tabs on these @@ -439,21 +470,6 @@ export default class MergeRequestTabs { */ if ($tabs.css('position') !== 'static') return; - const $diffTabs = $('#diff-notes-app'); - - $tabs - .off('affix.bs.affix affix-top.bs.affix') - .affix({ - offset: { - top: () => $diffTabs.offset().top - $tabs.height() - $fixedNav.height(), - }, - }) - .on('affix.bs.affix', () => $diffTabs.css({ marginTop: $tabs.height() })) - .on('affix-top.bs.affix', () => $diffTabs.css({ marginTop: '' })); - - // Fix bug when reloading the page already scrolling - if ($tabs.hasClass('affix')) { - $tabs.trigger('affix.bs.affix'); - } + polyfillSticky($tabs); } } diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue index 7853847fc37..a8995021699 100644 --- a/app/assets/javascripts/notes/components/notes_app.vue +++ b/app/assets/javascripts/notes/components/notes_app.vue @@ -175,7 +175,7 @@ export default { <template> <div - v-if="shouldShow" + v-show="shouldShow" id="notes" > <ul diff --git a/app/assets/javascripts/pages/search/show/search.js b/app/assets/javascripts/pages/search/show/search.js index 2e1fe78b3fa..e3e0ab91993 100644 --- a/app/assets/javascripts/pages/search/show/search.js +++ b/app/assets/javascripts/pages/search/show/search.js @@ -105,7 +105,7 @@ export default class Search { getProjectsData(term) { return new Promise((resolve) => { if (this.groupId) { - Api.groupProjects(this.groupId, term, resolve); + Api.groupProjects(this.groupId, term, {}, resolve); } else { Api.projects(term, { order_by: 'id', diff --git a/app/assets/javascripts/pages/snippets/form.js b/app/assets/javascripts/pages/snippets/form.js index 758bbafead3..f369c7ef9a6 100644 --- a/app/assets/javascripts/pages/snippets/form.js +++ b/app/assets/javascripts/pages/snippets/form.js @@ -8,6 +8,7 @@ export default () => { members: false, issues: false, mergeRequests: false, + epics: false, milestones: false, labels: false, }); diff --git a/app/assets/javascripts/pages/users/activity_calendar.js b/app/assets/javascripts/pages/users/activity_calendar.js index 50d042fef29..9892a039941 100644 --- a/app/assets/javascripts/pages/users/activity_calendar.js +++ b/app/assets/javascripts/pages/users/activity_calendar.js @@ -2,6 +2,7 @@ import $ from 'jquery'; import _ from 'underscore'; import { scaleLinear, scaleThreshold } from 'd3-scale'; import { select } from 'd3-selection'; +import dateFormat from 'dateformat'; import { getDayName, getDayDifference } from '~/lib/utils/datetime_utility'; import axios from '~/lib/utils/axios_utils'; import flash from '~/flash'; @@ -26,7 +27,7 @@ function getSystemDate(systemUtcOffsetSeconds) { function formatTooltipText({ date, count }) { const dateObject = new Date(date); const dateDayName = getDayName(dateObject); - const dateText = dateObject.format('mmm d, yyyy'); + const dateText = dateFormat(dateObject, 'mmm d, yyyy'); let contribText = 'No contributions'; if (count > 0) { @@ -84,7 +85,7 @@ export default class ActivityCalendar { date.setDate(date.getDate() + i); const day = date.getDay(); - const count = timestamps[date.format('yyyy-mm-dd')] || 0; + const count = timestamps[dateFormat(date, 'yyyy-mm-dd')] || 0; // Create a new group array if this is the first day of the week // or if is first object diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue index e047d10ac93..c32dc83da8e 100644 --- a/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/dropdown_job_component.vue @@ -109,6 +109,7 @@ export default { :key="i" > <job-component + :dropdown-length="job.size" :job="item" css-class-job-name="mini-pipeline-graph-dropdown-item" @pipelineActionRequestComplete="pipelineActionRequestComplete" diff --git a/app/assets/javascripts/pipelines/components/graph/job_component.vue b/app/assets/javascripts/pipelines/components/graph/job_component.vue index 886e62ab1a7..8af984ef91a 100644 --- a/app/assets/javascripts/pipelines/components/graph/job_component.vue +++ b/app/assets/javascripts/pipelines/components/graph/job_component.vue @@ -46,6 +46,11 @@ export default { required: false, default: '', }, + dropdownLength: { + type: Number, + required: false, + default: Infinity, + }, }, computed: { status() { @@ -70,6 +75,10 @@ export default { return textBuilder.join(' '); }, + tooltipBoundary() { + return this.dropdownLength < 5 ? 'viewport' : null; + }, + /** * Verifies if the provided job has an action path * @@ -94,9 +103,9 @@ export default { :href="status.details_path" :title="tooltipText" :class="cssClassJobName" + :data-boundary="tooltipBoundary" data-container="body" data-html="true" - data-boundary="viewport" class="js-pipeline-graph-job-link" > diff --git a/app/assets/javascripts/pipelines/components/stage.vue b/app/assets/javascripts/pipelines/components/stage.vue index b9231c002fd..56fdb858088 100644 --- a/app/assets/javascripts/pipelines/components/stage.vue +++ b/app/assets/javascripts/pipelines/components/stage.vue @@ -186,32 +186,27 @@ export default { </i> </button> - <ul + <div class="dropdown-menu mini-pipeline-graph-dropdown-menu js-builds-dropdown-container" aria-labelledby="stageDropdown" > - - <li + <loading-icon v-if="isLoading"/> + <ul + v-else class="js-builds-dropdown-list scrollable-menu" > - - <loading-icon v-if="isLoading"/> - - <ul - v-else + <li + v-for="job in dropdownContent" + :key="job.id" > - <li - v-for="job in dropdownContent" - :key="job.id" - > - <job-component - :job="job" - css-class-job-name="mini-pipeline-graph-dropdown-item" - @pipelineActionRequestComplete="pipelineActionRequestComplete" - /> - </li> - </ul> - </li> - </ul> + <job-component + :dropdown-length="dropdownContent.length" + :job="job" + css-class-job-name="mini-pipeline-graph-dropdown-item" + @pipelineActionRequestComplete="pipelineActionRequestComplete" + /> + </li> + </ul> + </div> </div> </template> diff --git a/app/assets/javascripts/project_select.js b/app/assets/javascripts/project_select.js index 240dde56325..bce7556bd40 100644 --- a/app/assets/javascripts/project_select.js +++ b/app/assets/javascripts/project_select.js @@ -47,7 +47,10 @@ export default function projectSelect() { projectsCallback = finalCallback; } if (_this.groupId) { - return Api.groupProjects(_this.groupId, query.term, projectsCallback); + return Api.groupProjects(_this.groupId, query.term, { + with_issues_enabled: _this.withIssuesEnabled, + with_merge_requests_enabled: _this.withMergeRequestsEnabled, + }, projectsCallback); } else { return Api.projects(query.term, { order_by: _this.orderBy, diff --git a/app/assets/javascripts/shared/milestones/form.js b/app/assets/javascripts/shared/milestones/form.js index 060f374310c..8681a1776c6 100644 --- a/app/assets/javascripts/shared/milestones/form.js +++ b/app/assets/javascripts/shared/milestones/form.js @@ -8,10 +8,11 @@ export default (initGFM = true) => { new DueDateSelectors(); // eslint-disable-line no-new // eslint-disable-next-line no-new new GLForm($('.milestone-form'), { - emojis: initGFM, + emojis: true, members: initGFM, issues: initGFM, mergeRequests: initGFM, + epics: initGFM, milestones: initGFM, labels: initGFM, }); diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue index c44419d24e6..5e464f8a0e2 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue @@ -1,4 +1,5 @@ <script> +import Icon from '~/vue_shared/components/icon.vue'; import timeagoMixin from '../../vue_shared/mixins/timeago'; import tooltip from '../../vue_shared/directives/tooltip'; import LoadingButton from '../../vue_shared/components/loading_button.vue'; @@ -14,6 +15,7 @@ export default { LoadingButton, MemoryUsage, StatusIcon, + Icon, }, directives: { tooltip, @@ -110,11 +112,10 @@ export default { class="deploy-link js-deploy-url" > {{ deployment.external_url_formatted }} - <i - class="fa fa-external-link" - aria-hidden="true" - > - </i> + <icon + :size="16" + name="external-link" + /> </a> </template> <span diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue index 1fdc3218671..53c4dc8c8f4 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_status_icon.vue @@ -32,7 +32,7 @@ }; </script> <template> - <div class="space-children flex-container-block append-right-10"> + <div class="space-children d-flex append-right-10"> <div v-if="isLoading" class="mr-widget-icon" diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue index 0d9a560c88e..97f4196b94d 100644 --- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue +++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_merge_when_pipeline_succeeds.vue @@ -82,7 +82,7 @@ <div class="mr-widget-body media"> <status-icon status="success" /> <div class="media-body"> - <h4 class="flex-container-block"> + <h4 class="d-flex align-items-start"> <span class="append-right-10"> {{ s__("mrWidget|Set by") }} <mr-widget-author :author="mr.setToMWPSBy" /> @@ -119,7 +119,7 @@ </p> <p v-else - class="flex-container-block" + class="d-flex align-items-start" > <span class="append-right-10"> {{ s__("mrWidget|The source branch will not be removed") }} diff --git a/app/assets/javascripts/vue_shared/components/markdown/field.vue b/app/assets/javascripts/vue_shared/components/markdown/field.vue index fba67681777..298971a36b2 100644 --- a/app/assets/javascripts/vue_shared/components/markdown/field.vue +++ b/app/assets/javascripts/vue_shared/components/markdown/field.vue @@ -67,6 +67,7 @@ members: this.enableAutocomplete, issues: this.enableAutocomplete, mergeRequests: this.enableAutocomplete, + epics: this.enableAutocomplete, milestones: this.enableAutocomplete, labels: this.enableAutocomplete, }); diff --git a/app/assets/stylesheets/bootstrap_migration.scss b/app/assets/stylesheets/bootstrap_migration.scss index f610a1aea08..ded33e8b151 100644 --- a/app/assets/stylesheets/bootstrap_migration.scss +++ b/app/assets/stylesheets/bootstrap_migration.scss @@ -128,6 +128,11 @@ table { border-spacing: 0; } +.tooltip { + // Fix bootstrap4 bug whereby tooltips flicker when they are hovered over their borders + pointer-events: none; +} + .popover { font-size: 14px; } diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss index 1d4828be223..340fddd398b 100644 --- a/app/assets/stylesheets/framework/blocks.scss +++ b/app/assets/stylesheets/framework/blocks.scss @@ -350,11 +350,6 @@ } } -.flex-container-block { - display: -webkit-flex; - display: flex; -} - .flex-right { margin-left: auto; } diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 326499125fc..218e37602dd 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/app/assets/stylesheets/framework/common.scss @@ -262,12 +262,7 @@ li.note { } .milestone { - &.milestone-closed { - background: $gray-light; - } - .progress { - margin-bottom: 0; margin-top: 4px; box-shadow: none; background-color: $border-gray-light; diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss index 9cbaaa5dc8d..ea4cb9a0b75 100644 --- a/app/assets/stylesheets/framework/contextual_sidebar.scss +++ b/app/assets/stylesheets/framework/contextual_sidebar.scss @@ -68,8 +68,7 @@ } .nav-sidebar { - transition: width $sidebar-transition-duration, - left $sidebar-transition-duration; + transition: width $sidebar-transition-duration, left $sidebar-transition-duration; position: fixed; z-index: 400; width: $contextual-sidebar-width; @@ -77,12 +76,12 @@ bottom: 0; left: 0; background-color: $gray-light; - box-shadow: inset -2px 0 0 $border-color; + box-shadow: inset -1px 0 0 $border-color; transform: translate3d(0, 0, 0); &:not(.sidebar-collapsed-desktop) { @media (min-width: map-get($grid-breakpoints, sm)) and (max-width: map-get($grid-breakpoints, sm)) { - box-shadow: inset -2px 0 0 $border-color, + box-shadow: inset -1px 0 0 $border-color, 2px 1px 3px $dropdown-shadow-color; } } @@ -214,7 +213,7 @@ > li { > a { @include media-breakpoint-up(sm) { - margin-right: 2px; + margin-right: 1px; } &:hover { @@ -224,7 +223,7 @@ &.is-showing-fly-out { > a { - margin-right: 2px; + margin-right: 1px; } .sidebar-sub-level-items { @@ -317,14 +316,14 @@ .toggle-sidebar-button, .close-nav-button { - width: $contextual-sidebar-width - 2px; + width: $contextual-sidebar-width - 1px; transition: width $sidebar-transition-duration; position: fixed; bottom: 0; padding: $gl-padding; background-color: $gray-light; border: 0; - border-top: 2px solid $border-color; + border-top: 1px solid $border-color; color: $gl-text-color-secondary; display: flex; align-items: center; @@ -379,7 +378,7 @@ .toggle-sidebar-button { padding: 16px; - width: $contextual-sidebar-collapsed-width - 2px; + width: $contextual-sidebar-collapsed-width - 1px; .collapse-text, .icon-angle-double-left { diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss index f060254777c..00eac1688f2 100644 --- a/app/assets/stylesheets/framework/files.scss +++ b/app/assets/stylesheets/framework/files.scss @@ -322,14 +322,17 @@ span.idiff { } .file-title-flex-parent { - display: flex; - align-items: center; - justify-content: space-between; - background-color: $gray-light; - border-bottom: 1px solid $border-color; - padding: 5px $gl-padding; - margin: 0; - border-radius: $border-radius-default $border-radius-default 0 0; + &, + .file-holder & { + display: flex; + align-items: center; + justify-content: space-between; + background-color: $gray-light; + border-bottom: 1px solid $border-color; + padding: 5px $gl-padding; + margin: 0; + border-radius: $border-radius-default $border-radius-default 0 0; + } .file-header-content { white-space: nowrap; @@ -337,6 +340,17 @@ span.idiff { text-overflow: ellipsis; padding-right: 30px; position: relative; + width: auto; + + @media (max-width: map-get($grid-breakpoints, sm)-1) { + width: 100%; + } + } + + .file-holder & { + .file-actions { + position: static; + } } .btn-clipboard { diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 2b2e6d69e33..282e424fc38 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -243,3 +243,15 @@ label { } } } + +.input-icon-wrapper { + position: relative; + + .input-icon-right { + position: absolute; + right: 0.8em; + top: 50%; + transform: translateY(-50%); + color: $theme-gray-600; + } +} diff --git a/app/assets/stylesheets/framework/issue_box.scss b/app/assets/stylesheets/framework/issue_box.scss index 1d247671761..86de88729ee 100644 --- a/app/assets/stylesheets/framework/issue_box.scss +++ b/app/assets/stylesheets/framework/issue_box.scss @@ -45,4 +45,9 @@ &.status-box-upcoming { background: $gl-text-color-secondary; } + + &.status-box-milestone { + color: $gl-text-color; + background: $gray-darker; + } } diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss index 49226ae8eac..f75be4e01cd 100644 --- a/app/assets/stylesheets/pages/commits.scss +++ b/app/assets/stylesheets/pages/commits.scss @@ -261,12 +261,16 @@ vertical-align: baseline; } - a.autodevops-badge { - color: $white-light; - } + a { + color: $gl-text-color; - a.autodevops-link { - color: $gl-link-color; + &.autodevops-badge { + color: $white-light; + } + + &.autodevops-link { + color: $gl-link-color; + } } .commit-row-description { diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss index d652982410a..a90a9c6e486 100644 --- a/app/assets/stylesheets/pages/diff.scss +++ b/app/assets/stylesheets/pages/diff.scss @@ -14,8 +14,8 @@ background-color: $gray-normal; } - .diff-toggle-caret { - padding-right: 6px; + svg { + vertical-align: text-bottom; } } @@ -737,6 +737,10 @@ max-width: 560px; width: 100%; z-index: 150; + min-height: $dropdown-min-height; + max-height: $dropdown-max-height; + overflow-y: auto; + margin-bottom: 0; @include media-breakpoint-up(sm) { left: $gl-padding; diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss index 79cac7f4ff0..391dfea0703 100644 --- a/app/assets/stylesheets/pages/labels.scss +++ b/app/assets/stylesheets/pages/labels.scss @@ -79,6 +79,7 @@ justify-content: space-between; padding: $gl-padding; border-radius: $border-radius-default; + border: 1px solid $theme-gray-100; &.sortable-ghost { opacity: 0.3; @@ -89,6 +90,7 @@ cursor: move; cursor: -webkit-grab; cursor: -moz-grab; + border: 0; &:active { cursor: -webkit-grabbing; diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss index ccf5d632614..efd730af558 100644 --- a/app/assets/stylesheets/pages/merge_requests.scss +++ b/app/assets/stylesheets/pages/merge_requests.scss @@ -737,6 +737,10 @@ > *:not(:last-child) { margin-right: .3em; } + + svg { + vertical-align: text-top; + } } .deploy-link { diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss index dba83e56d72..46437ce5841 100644 --- a/app/assets/stylesheets/pages/milestone.scss +++ b/app/assets/stylesheets/pages/milestone.scss @@ -3,8 +3,20 @@ } .milestones { + padding: $gl-padding-8; + margin-top: $gl-padding-8; + border-radius: $border-radius-default; + background-color: $theme-gray-100; + .milestone { - padding: 10px 16px; + border: 0; + padding: $gl-padding-top $gl-padding; + border-radius: $border-radius-default; + background-color: $white-light; + + &:not(:last-child) { + margin-bottom: $gl-padding-4; + } h4 { font-weight: $gl-font-weight-bold; @@ -13,6 +25,24 @@ .progress { width: 100%; height: 6px; + margin-bottom: $gl-padding-4; + } + + .milestone-progress { + a { + color: $gl-link-color; + } + } + + .status-box { + font-size: $tooltip-font-size; + margin-top: 0; + margin-right: $gl-padding-4; + + @include media-breakpoint-down(xs) { + line-height: unset; + padding: $gl-padding-4 $gl-input-padding; + } } } } @@ -229,6 +259,10 @@ } } +.milestone-range { + color: $gl-text-color-tertiary; +} + @include media-breakpoint-down(xs) { .milestone-banner-text, .milestone-banner-link { diff --git a/app/assets/stylesheets/pages/settings.scss b/app/assets/stylesheets/pages/settings.scss index 2f28031b9c8..e264b06c4b2 100644 --- a/app/assets/stylesheets/pages/settings.scss +++ b/app/assets/stylesheets/pages/settings.scss @@ -255,25 +255,12 @@ } } -.modal-doorkeepr-auth, -.doorkeeper-app-form { - .scope-description { - color: $theme-gray-700; - } -} - .modal-doorkeepr-auth { .modal-body { padding: $gl-padding; } } -.doorkeeper-app-form { - .scope-description { - margin: 0 0 5px 17px; - } -} - .deprecated-service { cursor: default; } |