Merge branch 'bootstrap4' into 'master'

Upgrade to Bootstrap 4

Closes #45185 and #46710

See merge request gitlab-org/gitlab-ce!18232
This commit is contained in:
Mike Greiling 2018-05-25 21:05:53 +00:00
commit 74894a3877
709 changed files with 3119 additions and 3298 deletions

View File

@ -46,8 +46,9 @@ linters:
# - properties
# - @include declarations with inner @content
# - nested rule sets.
# Disabled to minimize Bootstrap migration footprint
DeclarationOrder:
enabled: true
enabled: false
# `scss-lint:disable` control comments should be preceded by a comment
# explaining why these linters are being disabled for this file.

View File

@ -257,7 +257,6 @@ gem 'sass-rails', '~> 5.0.6'
gem 'uglifier', '~> 2.7.2'
gem 'addressable', '~> 2.5.2'
gem 'bootstrap-sass', '~> 3.3.0'
gem 'font-awesome-rails', '~> 4.7'
gem 'gemojione', '~> 3.3'
gem 'gon', '~> 6.2'

View File

@ -69,9 +69,6 @@ GEM
attr_encrypted (3.1.0)
encryptor (~> 3.0.0)
attr_required (1.0.0)
autoprefixer-rails (6.2.3)
execjs
json
awesome_print (1.2.0)
axiom-types (0.1.1)
descendants_tracker (~> 0.0.4)
@ -91,9 +88,6 @@ GEM
binding_of_caller (0.7.2)
debug_inspector (>= 0.0.1)
blankslate (2.1.2.4)
bootstrap-sass (3.3.6)
autoprefixer-rails (>= 5.2.1)
sass (>= 3.3.4)
bootstrap_form (2.7.0)
brakeman (4.2.1)
browser (2.2.0)
@ -992,7 +986,6 @@ DEPENDENCIES
benchmark-ips (~> 2.3.0)
better_errors (~> 2.1.0)
binding_of_caller (~> 0.7.2)
bootstrap-sass (~> 3.3.0)
bootstrap_form (~> 2.7.0)
brakeman (~> 4.2)
browser (~> 2.2)

View File

@ -345,7 +345,7 @@ class AwardsHandler {
counter.text(counterNumber - 1);
this.removeYouFromUserList($emojiButton);
} else if (emoji === 'thumbsup' || emoji === 'thumbsdown') {
$emojiButton.tooltip('destroy');
$emojiButton.tooltip('dispose');
counter.text('0');
this.removeYouFromUserList($emojiButton);
if ($emojiButton.parents('.note').length) {
@ -358,7 +358,7 @@ class AwardsHandler {
}
removeEmoji($emojiButton) {
$emojiButton.tooltip('destroy');
$emojiButton.tooltip('dispose');
$emojiButton.remove();
const $votesBlock = this.getVotesBlock();
if ($votesBlock.find('.js-emoji-btn').length === 0) {
@ -392,7 +392,7 @@ class AwardsHandler {
.removeAttr('data-title')
.removeAttr('data-original-title')
.attr('title', this.toSentence(authors))
.tooltip('fixTitle');
.tooltip('_fixTitle');
}
addYouToUserList(votesBlock, emoji) {
@ -405,7 +405,7 @@ class AwardsHandler {
users.unshift('You');
return awardBlock
.attr('title', this.toSentence(users))
.tooltip('fixTitle');
.tooltip('_fixTitle');
}
createAwardButtonForVotesBlock(votesBlock, emojiName) {

View File

@ -89,7 +89,7 @@ export default {
v-show="hasError"
class="btn-group"
>
<div class="btn btn-default btn-xs disabled">
<div class="btn btn-default btn-sm disabled">
<icon
class="prepend-left-8 append-right-8"
name="doc_image"
@ -98,7 +98,7 @@ export default {
/>
</div>
<div
class="btn btn-default btn-xs disabled"
class="btn btn-default btn-sm disabled"
>
<span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
</div>
@ -106,7 +106,7 @@ export default {
<button
v-show="hasError"
class="btn btn-transparent btn-xs text-primary"
class="btn btn-transparent btn-sm text-primary"
type="button"
v-tooltip
:title="s__('Badges|Reload badge image')"

View File

@ -23,8 +23,8 @@ export default {
</script>
<template>
<div class="panel panel-default">
<div class="panel-heading">
<div class="card">
<div class="card-header">
{{ s__('Badges|Your badges') }}
<span
v-show="!isLoading"
@ -33,19 +33,19 @@ export default {
</div>
<loading-icon
v-show="isLoading"
class="panel-body"
class="card-body"
size="2"
/>
<div
v-if="hasNoBadges"
class="panel-body"
class="card-body"
>
<span v-if="isGroupBadge">{{ s__('Badges|This group has no badges') }}</span>
<span v-else>{{ s__('Badges|This project has no badges') }}</span>
</div>
<div
v-else
class="panel-body"
class="card-body"
>
<badge-list-row
v-for="badge in badges"

View File

@ -8,10 +8,10 @@ function showTooltip(target, title) {
if (!$target.data('hideTooltip')) {
$target
.attr('title', title)
.tooltip('fixTitle')
.tooltip('_fixTitle')
.tooltip('show')
.attr('title', originalTitle)
.tooltip('fixTitle');
.tooltip('_fixTitle');
}
}

View File

@ -69,7 +69,7 @@ $(document).on('keyup.quick_submit', '.js-quick-submit input[type=submit], .js-q
$this.tooltip({
container: 'body',
html: 'true',
placement: 'auto top',
placement: 'top',
title,
trigger: 'manual',
});

View File

@ -42,9 +42,9 @@ $.fn.requiresInput = function requiresInput() {
function hideOrShowHelpBlock(form) {
const selected = $('.js-select-namespace option:selected');
if (selected.length && selected.data('optionsParent') === 'groups') {
form.find('.help-block').hide();
form.find('.form-text.text-muted').hide();
} else if (selected.length) {
form.find('.help-block').show();
form.find('.form-text.text-muted').show();
}
}

View File

@ -2,9 +2,9 @@ import sqljs from 'sql.js';
import { template as _template } from 'underscore';
const PREVIEW_TEMPLATE = _template(`
<div class="panel panel-default">
<div class="panel-heading"><%- name %></div>
<div class="panel-body">
<div class="card">
<div class="card-header"><%- name %></div>
<div class="card-body">
<img class="img-thumbnail" src="data:image/png;base64,<%- image %>"/>
</div>
</div>

View File

@ -44,7 +44,7 @@ export default class SketchLoader {
previewLink.href = previewUrl;
previewLink.target = '_blank';
previewImage.src = previewUrl;
previewImage.className = 'img-responsive';
previewImage.className = 'img-fluid';
previewLink.appendChild(previewImage);
this.container.appendChild(previewLink);

View File

@ -116,7 +116,7 @@ export default class BlobViewer {
this.copySourceBtn.classList.add('disabled');
}
$(this.copySourceBtn).tooltip('fixTitle');
$(this.copySourceBtn).tooltip('_fixTitle');
}
switchToViewer(name) {

View File

@ -77,7 +77,7 @@ export default {
<template>
<li
class="card"
class="board-card"
:class="{
'user-can-drag': !disabled && issue.id,
'is-disabled': disabled || !issue.id,

View File

@ -92,7 +92,7 @@ export default {
<template>
<div class="board-new-issue-form">
<div class="card">
<div class="board-card">
<form @submit="submit($event)">
<div
class="flash-container"
@ -122,7 +122,7 @@ export default {
/>
<div class="clearfix prepend-top-10">
<button
class="btn btn-success pull-left"
class="btn btn-success float-left"
type="submit"
:disabled="disabled"
ref="submit-button"
@ -130,7 +130,7 @@ export default {
Submit issue
</button>
<button
class="btn btn-default pull-right"
class="btn btn-default float-right"
type="button"
@click="cancel"
>

View File

@ -135,8 +135,8 @@ gl.issueBoards.IssueCardInner = Vue.extend({
},
template: `
<div>
<div class="card-header">
<h4 class="card-title">
<div class="board-card-header">
<h4 class="board-card-title">
<i
class="fa fa-eye-slash confidential-icon"
v-if="issue.confidential"
@ -147,13 +147,13 @@ gl.issueBoards.IssueCardInner = Vue.extend({
:href="issue.path"
:title="issue.title">{{ issue.title }}</a>
<span
class="card-number"
class="board-card-number"
v-if="issueId"
>
{{ issue.referencePath }}
</span>
</h4>
<div class="card-assignee">
<div class="board-card-assignee">
<user-avatar-link
v-for="(assignee, index) in issue.assignees"
:key="assignee.id"
@ -175,11 +175,11 @@ gl.issueBoards.IssueCardInner = Vue.extend({
</div>
</div>
<div
class="card-footer"
class="board-card-footer"
v-if="showLabelFooter"
>
<button
class="label color-label has-tooltip"
class="badge color-label has-tooltip"
v-for="label in issue.labels"
type="button"
v-if="showLabel(label)"

View File

@ -41,10 +41,10 @@ gl.issueBoards.ModalEmptyState = Vue.extend({
template: `
<section class="empty-state">
<div class="row">
<div class="col-xs-12 col-sm-6 col-sm-push-6">
<div class="col-xs-12 col-sm-6 order-sm-last">
<aside class="svg-content"><img :src="emptyStateSvg"/></aside>
</div>
<div class="col-xs-12 col-sm-6 col-sm-pull-6">
<div class="col-xs-12 col-sm-6 order-sm-first">
<div class="text-content">
<h4>{{ contents.title }}</h4>
<p v-html="contents.content"></p>

View File

@ -58,7 +58,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
template: `
<footer
class="form-actions add-issues-footer">
<div class="pull-left">
<div class="float-left">
<button
class="btn btn-success"
type="button"
@ -72,7 +72,7 @@ gl.issueBoards.ModalFooter = Vue.extend({
<lists-dropdown></lists-dropdown>
</div>
<button
class="btn btn-default pull-right"
class="btn btn-default float-right"
type="button"
@click="toggleModal(false)">
Cancel

View File

@ -133,9 +133,9 @@ gl.issueBoards.ModalList = Vue.extend({
<div
v-for="issue in group"
v-if="showIssue(issue)"
class="card-parent">
class="board-card-parent">
<div
class="card"
class="board-card"
:class="{ 'is-active': issue.selected }"
@click="toggleIssue($event, issue)">
<issue-card-inner

View File

@ -24,7 +24,7 @@ gl.issueBoards.ModalTabs = Vue.extend({
role="button"
@click.prevent="changeTab('all')">
Open issues
<span class="badge">
<span class="badge badge-pill">
{{ issuesCount }}
</span>
</a>
@ -35,7 +35,7 @@ gl.issueBoards.ModalTabs = Vue.extend({
role="button"
@click.prevent="changeTab('selected')">
Selected issues
<span class="badge">
<span class="badge badge-pill">
{{ selectedCount }}
</span>
</a>

View File

@ -214,7 +214,7 @@ export default () => {
if (this.disabled) {
$tooltip.tooltip();
} else {
$tooltip.tooltip('destroy');
$tooltip.tooltip('dispose');
}
});
},

View File

@ -141,6 +141,11 @@ export default class VariableList {
$rowClone.find(entry.selector).val(entry.default);
});
// Close any dropdowns
$rowClone.find('.dropdown-menu.show').each((index, $dropdown) => {
$dropdown.classList.remove('show');
});
this.initRow($rowClone);
$row.after($rowClone);

View File

@ -191,11 +191,11 @@ export default {
:value="ingressExternalIp"
readonly
/>
<span class="input-group-btn">
<span class="input-group-append">
<clipboard-button
:text="ingressExternalIp"
:title="s__('ClusterIntegration|Copy Ingress IP Address to clipboard')"
class="js-clipboard-btn"
class="input-group-text js-clipboard-btn"
/>
</span>
</div>

View File

@ -1,15 +1,7 @@
import $ from 'jquery';
// bootstrap jQuery plugins
import 'bootstrap-sass/assets/javascripts/bootstrap/affix';
import 'bootstrap-sass/assets/javascripts/bootstrap/alert';
import 'bootstrap-sass/assets/javascripts/bootstrap/button';
import 'bootstrap-sass/assets/javascripts/bootstrap/dropdown';
import 'bootstrap-sass/assets/javascripts/bootstrap/modal';
import 'bootstrap-sass/assets/javascripts/bootstrap/tab';
import 'bootstrap-sass/assets/javascripts/bootstrap/transition';
import 'bootstrap-sass/assets/javascripts/bootstrap/tooltip';
import 'bootstrap-sass/assets/javascripts/bootstrap/popover';
import 'bootstrap';
// custom jQuery functions
$.fn.extend({

View File

@ -78,7 +78,7 @@ export default function initCompareAutocomplete(limitTo = null, clickHandler = (
$dropdownContainer.on('click', '.dropdown-content a', e => {
$dropdown.prop('title', e.target.text.replace(/_+?/g, '-'));
if ($dropdown.hasClass('has-tooltip')) {
$dropdown.tooltip('fixTitle');
$dropdown.tooltip('_fixTitle');
}
});
});

View File

@ -61,8 +61,8 @@ export default class CreateMergeRequestDropdown {
}
available() {
this.availableButton.classList.remove('hide');
this.unavailableButton.classList.add('hide');
this.availableButton.classList.remove('hidden');
this.unavailableButton.classList.add('hidden');
}
bindEvents() {
@ -232,7 +232,7 @@ export default class CreateMergeRequestDropdown {
}
hide() {
this.wrapperEl.classList.add('hide');
this.wrapperEl.classList.add('hidden');
}
init() {
@ -406,8 +406,8 @@ export default class CreateMergeRequestDropdown {
}
unavailable() {
this.availableButton.classList.add('hide');
this.unavailableButton.classList.remove('hide');
this.availableButton.classList.add('hidden');
this.unavailableButton.classList.remove('hidden');
}
updateBranchName(suggestedBranchName) {

View File

@ -16,7 +16,7 @@
<template>
<span
v-if="count === 50"
class="events-info pull-right"
class="events-info float-right"
>
<i
class="fa fa-warning"

View File

@ -79,7 +79,7 @@ const DiffNoteAvatars = Vue.extend({
storeState: {
handler() {
this.$nextTick(() => {
$('.has-tooltip', this.$el).tooltip('fixTitle');
$('.has-tooltip', this.$el).tooltip('_fixTitle');
// We need to add/remove a class to an element that is outside the Vue instance
this.addNoCommentClass();
@ -138,7 +138,7 @@ const DiffNoteAvatars = Vue.extend({
this.$nextTick(() => {
this.setDiscussionVisible();
$('.has-tooltip', this.$el).tooltip('fixTitle');
$('.has-tooltip', this.$el).tooltip('_fixTitle');
$('.has-tooltip', this.$el).tooltip('hide');
});
},

View File

@ -61,7 +61,7 @@ const ResolveBtn = Vue.extend({
this.$nextTick(() => {
$(this.$refs.button)
.tooltip('hide')
.tooltip('fixTitle');
.tooltip('_fixTitle');
});
},
resolve: function () {

View File

@ -74,7 +74,7 @@
</span>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="(action, i) in actions"
:key="i">

View File

@ -486,14 +486,14 @@
{{ model.folderName }}
</span>
<span class="badge">
<span class="badge badge-pill">
{{ model.size }}
</span>
</span>
</div>
<div
class="table-section section-10 deployment-column hidden-xs hidden-sm"
class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
role="gridcell"
>
<span v-if="shouldRenderDeploymentID">
@ -513,7 +513,7 @@
</div>
<div
class="table-section section-15 hidden-xs hidden-sm"
class="table-section section-15 d-none d-sm-none d-md-block"
role="gridcell"
>
<a

View File

@ -28,7 +28,7 @@
<template>
<a
v-tooltip
class="btn monitoring-url hidden-xs hidden-sm"
class="btn monitoring-url d-none d-sm-none d-md-block"
data-container="body"
rel="noopener noreferrer nofollow"
:href="monitoringUrl"

View File

@ -40,7 +40,7 @@
<template>
<button
type="button"
class="btn hidden-xs hidden-sm"
class="btn d-none d-sm-none d-md-block"
@click="onClick"
:disabled="isLoading"
>

View File

@ -43,7 +43,7 @@
if (confirm('Are you sure you want to stop this environment?')) {
this.isLoading = true;
$(this.$el).tooltip('destroy');
$(this.$el).tooltip('dispose');
eventHub.$emit('postAction', this.stopUrl);
}
@ -55,7 +55,7 @@
<button
v-tooltip
type="button"
class="btn stop-env-link hidden-xs hidden-sm"
class="btn stop-env-link d-none d-sm-none d-md-block"
data-container="body"
@click="onClick"
:disabled="isLoading"

View File

@ -30,7 +30,7 @@
<template>
<a
v-tooltip
class="btn terminal-button hidden-xs hidden-sm"
class="btn terminal-button d-none d-sm-none d-md-block"
data-container="body"
:title="title"
:aria-label="title"

View File

@ -24,7 +24,7 @@ export function setupFeatureHighlightPopover(id, debounceTimeout = 300) {
template: `
<div class="popover feature-highlight-popover" role="tooltip">
<div class="arrow"></div>
<div class="popover-content"></div>
<div class="popover-body"></div>
</div>
`,
})

View File

@ -374,7 +374,7 @@ GitLabDropdown = (function() {
$relatedTarget = $(e.relatedTarget);
$dropdownMenu = $relatedTarget.closest('.dropdown-menu');
if ($dropdownMenu.length === 0) {
return _this.dropdown.removeClass('open');
return _this.dropdown.removeClass('show');
}
}
};
@ -801,7 +801,7 @@ GitLabDropdown = (function() {
if (this.options.filterable) {
const initialScrollTop = $(window).scrollTop();
if (this.dropdown.is('.open')) {
if (this.dropdown.is('.show') && !this.filterInput.is(':focus')) {
this.filterInput.focus();
}

View File

@ -62,7 +62,7 @@ export default class GlFieldError {
this.inputDomElement = this.inputElement.get(0);
this.form = formErrors;
this.errorMessage = this.inputElement.attr('title') || 'This field is required.';
this.fieldErrorElement = $(`<p class='${errorMessageClass} hide'>${this.errorMessage}</p>`);
this.fieldErrorElement = $(`<p class='${errorMessageClass} hidden'>${this.errorMessage}</p>`);
this.state = {
valid: false,
@ -146,8 +146,8 @@ export default class GlFieldError {
renderInvalid() {
this.inputElement.addClass(inputErrorClass);
this.scopedSiblings.hide();
return this.fieldErrorElement.show();
this.scopedSiblings.addClass('hidden');
return this.fieldErrorElement.removeClass('hidden');
}
renderClear() {
@ -157,7 +157,7 @@ export default class GlFieldError {
this.accessCurrentValue(trimmedInput);
}
this.inputElement.removeClass(inputErrorClass);
this.scopedSiblings.hide();
this.fieldErrorElement.hide();
this.scopedSiblings.addClass('hidden');
this.fieldErrorElement.addClass('hidden');
}
}

View File

@ -99,7 +99,7 @@ export default {
/>
</div>
<div
class="avatar-container prepend-top-8 prepend-left-5 s24 hidden-xs"
class="avatar-container prepend-top-8 prepend-left-5 s24 d-none d-sm-block"
:class="{ 'content-loading': group.isChildrenLoading }"
>
<a

View File

@ -102,12 +102,12 @@ export default {
class="ide-empty-state"
>
<div class="row js-empty-state">
<div class="col-xs-12">
<div class="col-12">
<div class="svg-content svg-250">
<img :src="emptyStateSvgPath" />
</div>
</div>
<div class="col-xs-12">
<div class="col-12">
<div class="text-content text-center">
<h4>
Welcome to the GitLab IDE

View File

@ -32,14 +32,14 @@ export default {
<template>
<div
v-if="showButtons"
class="pull-right ide-btn-group"
class="float-right ide-btn-group"
>
<a
v-tooltip
v-if="!file.binary"
:href="file.blamePath"
:title="__('Blame')"
class="btn btn-xs btn-transparent blame"
class="btn btn-sm btn-transparent blame"
>
<icon
name="blame"
@ -50,7 +50,7 @@ export default {
v-tooltip
:href="file.commitsPath"
:title="__('History')"
class="btn btn-xs btn-transparent history"
class="btn btn-sm btn-transparent history"
>
<icon
name="history"
@ -61,7 +61,7 @@ export default {
v-tooltip
:href="file.permalink"
:title="__('Permalink')"
class="btn btn-xs btn-transparent permalink"
class="btn btn-sm btn-transparent permalink"
>
<icon
name="link"
@ -72,7 +72,7 @@ export default {
v-tooltip
:href="file.rawPath"
target="_blank"
class="btn btn-xs btn-transparent prepend-left-10 raw"
class="btn btn-sm btn-transparent prepend-left-10 raw"
rel="noopener noreferrer"
:title="rawDownloadButtonLabel">
<icon

View File

@ -57,7 +57,7 @@ export default {
<div
class="dropdown"
:class="{
open: dropdownOpen,
show: dropdownOpen,
}"
>
<button
@ -69,12 +69,12 @@ export default {
<icon
name="plus"
:size="12"
css-classes="pull-left"
css-classes="float-left"
/>
<icon
name="arrow-down"
:size="12"
css-classes="pull-left"
css-classes="float-left"
/>
</button>
<ul

View File

@ -70,12 +70,12 @@ export default {
@submit="createEntryInStore"
>
<form
class="form-horizontal"
slot="body"
@submit.prevent="createEntryInStore"
class="form-group row append-bottom-0"
>
<fieldset class="form-group append-bottom-0">
<label class="label-light col-sm-3 ide-new-modal-label">
<label class="label-light col-form-label col-sm-3 ide-new-modal-label">
{{ __('Name') }}
</label>
<div class="col-sm-9">

View File

@ -197,7 +197,7 @@ export default {
>
<div class="ide-mode-tabs clearfix" >
<ul
class="nav-links pull-left"
class="nav-links float-left"
v-if="!shouldHideEditor && isEditModeActive"
>
<li :class="editTabCSS">

View File

@ -144,7 +144,7 @@ export default {
:file="file"
/>
</span>
<span class="pull-right ide-file-icon-holder">
<span class="float-right ide-file-icon-holder">
<mr-file-icon
v-if="file.mrChange"
/>
@ -177,7 +177,7 @@ export default {
:project-id="file.projectId"
:branch="file.branchId"
:path="file.path"
class="pull-right prepend-left-8"
class="float-right prepend-left-8"
/>
</div>
</div>

View File

@ -25,13 +25,13 @@
/>
</td>
<template v-if="!leftPanelCollapsed">
<td class="hidden-sm hidden-xs">
<td class="d-none d-sm-none d-md-block">
<skeleton-loading-container
:small="true"
/>
</td>
<td class="hidden-xs">
<td class="d-none d-sm-block">
<skeleton-loading-container
class="animation-container-right"
:small="true"

View File

@ -51,7 +51,7 @@
<template>
<div class="prepend-top-default append-bottom-default clearfix">
<button
class="btn btn-save pull-left"
class="btn btn-save float-left"
:class="{ disabled: formState.updateLoading || !isSubmitEnabled }"
type="submit"
:disabled="formState.updateLoading || !isSubmitEnabled"
@ -64,14 +64,14 @@
</i>
</button>
<button
class="btn btn-default pull-right"
class="btn btn-default float-right"
type="button"
@click="closeForm">
Cancel
</button>
<button
v-if="shouldShowDeleteButton"
class="btn btn-danger pull-right append-right-default"
class="btn btn-danger float-right append-right-default"
:class="{ disabled: deleteLoading }"
type="button"
:disabled="deleteLoading"

View File

@ -84,7 +84,7 @@
<div
:class="{
'col-sm-8 col-lg-9': hasIssuableTemplates,
'col-xs-12': !hasIssuableTemplates,
'col-12': !hasIssuableTemplates,
}"
>
<title-field

View File

@ -1,5 +1,6 @@
import $ from 'jquery';
import _ from 'underscore';
import StickyFill from 'stickyfilljs';
import axios from './lib/utils/axios_utils';
import { visitUrl } from './lib/utils/url_utility';
import bp from './breakpoints';
@ -82,17 +83,11 @@ export default class Job {
/**
If the browser does not support position sticky, it returns the position as static.
If the browser does support sticky, then we allow the browser to handle it, if not
then we default back to Bootstraps affix
then we use a polyfill
**/
if (this.$topBar.css('position') !== 'static') return;
const offsetTop = this.$buildTrace.offset().top;
this.$topBar.affix({
offset: {
top: offsetTop,
},
});
StickyFill.add(this.$topBar);
}
// eslint-disable-next-line class-methods-use-this

View File

@ -56,7 +56,7 @@ export default {
actions.push({
label: 'New issue',
path: this.job.new_issue_path,
cssClass: 'js-new-issue btn btn-new btn-inverted visible-md-block visible-lg-block',
cssClass: 'js-new-issue btn btn-new btn-inverted d-none d-md-block d-lg-block d-xl-block',
type: 'link',
});
}

View File

@ -39,7 +39,7 @@
<span
v-if="hasHelpURL"
class="help-button pull-right"
class="help-button float-right"
>
<a
:href="helpUrl"

View File

@ -48,7 +48,7 @@ export default {
return `${this.job.runner.description} (#${this.job.runner.id})`;
},
retryButtonClass() {
let className = 'js-retry-button pull-right btn btn-retry visible-md-block visible-lg-block';
let className = 'js-retry-button pull-right btn btn-retry d-none d-md-block d-lg-block d-xl-block';
className +=
this.job.status && this.job.recoverable
? ' btn-primary'
@ -105,7 +105,7 @@ export default {
type="button"
:aria-label="__('Toggle Sidebar')"
class="btn btn-blank gutter-toggle pull-right
visible-xs-block visible-sm-block js-sidebar-build-toggle"
d-block d-sm-block d-md-none js-sidebar-build-toggle"
>
<i
aria-hidden="true"

View File

@ -35,7 +35,7 @@ export default class LabelManager {
const $label = $(`#${$btn.data('domId')}`);
const action = $btn.parents('.js-prioritized-labels').length ? 'remove' : 'add';
const $tooltip = $(`#${$btn.find('.has-tooltip:visible').attr('aria-describedby')}`);
$tooltip.tooltip('destroy');
$tooltip.tooltip('dispose');
_this.toggleLabelPriority($label, action);
_this.toggleEmptyState($label, $btn, action);
}

View File

@ -120,7 +120,7 @@ export default class LabelsSelect {
$sidebarLabelTooltip
.attr('title', labelTooltipTitle)
.tooltip('fixTitle');
.tooltip('_fixTitle');
$('.has-tooltip', $value).tooltip({
container: 'body'

View File

@ -51,7 +51,7 @@ export const rstrip = (val) => {
return val;
};
export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('fixTitle');
export const updateTooltipTitle = ($tooltipEl, newTitle) => $tooltipEl.attr('title', newTitle).tooltip('_fixTitle');
export const disableButtonIfEmptyField = (fieldSelector, buttonSelector, eventName = 'input') => {
const field = $(fieldSelector);

View File

@ -143,8 +143,7 @@ export const localTimeAgo = ($timeagoEls, setTimeago = true) => {
if (setTimeago) {
// Recreate with custom template
$(el).tooltip({
template:
'<div class="tooltip local-timeago" role="tooltip"><div class="tooltip-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>',
});
}

View File

@ -46,9 +46,9 @@ document.addEventListener('beforeunload', () => {
// Unbind scroll events
$(document).off('scroll');
// Close any open tooltips
$('.has-tooltip, [data-toggle="tooltip"]').tooltip('destroy');
$('.has-tooltip, [data-toggle="tooltip"]').tooltip('dispose');
// Close any open popover
$('[data-toggle="popover"]').popover('destroy');
$('[data-toggle="popover"]').popover('dispose');
});
window.addEventListener('hashchange', handleLocationHash);
@ -111,7 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
$('.remove-row').on('ajax:success', function removeRowAjaxSuccessCallback() {
$(this)
.tooltip('destroy')
.tooltip('dispose')
.closest('li')
.fadeOut();
});
@ -141,9 +141,9 @@ document.addEventListener('DOMContentLoaded', () => {
});
// Initialize tooltips
$.fn.tooltip.Constructor.DEFAULTS.trigger = 'hover';
$body.tooltip({
selector: '.has-tooltip, [data-toggle="tooltip"]',
trigger: 'hover',
placement(tip, el) {
return $(el).data('placement') || 'bottom';
},
@ -196,7 +196,7 @@ document.addEventListener('DOMContentLoaded', () => {
$container.remove();
});
$('.navbar-toggle').on('click', () => {
$('.navbar-toggler').on('click', () => {
$('.header-content').toggleClass('menu-expanded');
gl.lazyLoader.loadCheck();
});

View File

@ -362,7 +362,7 @@ export default class MergeRequestTabs {
//
// status - Boolean, true to show, false to hide
toggleLoading(status) {
$('.mr-loading-status .loading').toggle(status);
$('.mr-loading-status .loading').toggleClass('hidden', status);
}
diffViewType() {

View File

@ -17,12 +17,12 @@ export default {
<template>
<div
v-if="showPanels"
class="panel panel-default prometheus-panel"
class="card prometheus-panel"
>
<div class="panel-heading">
<div class="card-header">
<h4>{{ name }}</h4>
</div>
<div class="panel-body prometheus-graph-group">
<div class="card-body prometheus-graph-group">
<slot></slot>
</div>
</div>

View File

@ -1231,8 +1231,8 @@ export default class Notes {
const isForced = forceShow === true || forceShow === false;
const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
targetRow.toggle(showNow);
notesContent.toggle(showNow);
targetRow.toggleClass('hide', !showNow);
notesContent.toggleClass('hide', !showNow);
}
if (addForm) {
@ -1675,7 +1675,7 @@ export default class Notes {
<div class="note-header">
<div class="note-header-info">
<a href="/${_.escape(currentUsername)}">
<span class="hidden-xs">${_.escape(
<span class="d-none d-sm-block">${_.escape(
currentUsername,
)}</span>
<span class="note-headline-light">${_.escape(
@ -1694,7 +1694,7 @@ export default class Notes {
</li>`,
);
$tempNote.find('.hidden-xs').text(_.escape(currentUserFullname));
$tempNote.find('.d-none.d-sm-block').text(_.escape(currentUserFullname));
$tempNote
.find('.note-headline-light')
.text(`@${_.escape(currentUsername)}`);

View File

@ -321,7 +321,7 @@ Please check your network connection and try again.`;
<li class="timeline-entry">
<div class="timeline-entry-inner">
<div class="flash-container error-alert timeline-content"></div>
<div class="timeline-icon hidden-xs hidden-sm">
<div class="timeline-icon d-none d-sm-none d-md-block">
<user-avatar-link
v-if="author"
:link-href="author.path"
@ -369,7 +369,7 @@ js-gfm-input js-autosize markdown-area js-vue-textarea"
</markdown-field>
<div class="note-form-actions">
<div
class="pull-left btn-group
class="float-left btn-group
append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown">
<button
@click.prevent="handleSave()"
@ -383,6 +383,7 @@ append-right-10 comment-type-dropdown js-comment-type-dropdown droplab-dropdown"
name="button"
type="button"
class="btn comment-btn note-type-toggle js-note-new-discussion dropdown-toggle"
data-display="static"
data-toggle="dropdown"
aria-label="Open comment type dropdown">
<i

View File

@ -100,7 +100,7 @@ export default {
: 'div';
},
wrapperClass() {
return this.isDiffDiscussion ? '' : 'panel panel-default';
return this.isDiffDiscussion ? '' : 'card';
},
},
mounted() {
@ -263,7 +263,7 @@ Please check your network connection and try again.`;
class="discussion-reply-holder">
<template v-if="!isReplying && canReply">
<div
class="btn-group-justified discussion-with-resolve-btn"
class="btn-group d-flex discussion-with-resolve-btn"
role="group">
<div
class="btn-group"

View File

@ -15,7 +15,7 @@ export default class NotificationsForm {
toggleCheckbox(e) {
const $checkbox = $(e.currentTarget);
const $parent = $checkbox.closest('.checkbox');
const $parent = $checkbox.closest('.form-check');
this.saveEvent($checkbox, $parent);
}

View File

@ -25,7 +25,7 @@ export default function adminInit() {
$('body').on('click', '.js-toggle-colors-link', (e) => {
e.preventDefault();
$('.js-toggle-colors-container').toggle();
$('.js-toggle-colors-container').toggleClass('hide');
});
$('.log-tabs a').on('click', function logTabsClick(e) {

View File

@ -5,7 +5,7 @@ document.addEventListener('DOMContentLoaded', () => {
const twoFactorNode = document.querySelector('.js-two-factor-auth');
const skippable = twoFactorNode.dataset.twoFactorSkippable === 'true';
if (skippable) {
const button = `<a class="btn btn-xs btn-warning pull-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
const button = `<a class="btn btn-sm btn-warning float-right" data-method="patch" href="${twoFactorNode.dataset.two_factor_skip_url}">Configure it later</a>`;
const flashAlert = document.querySelector('.flash-alert .container-fluid');
if (flashAlert) flashAlert.insertAdjacentHTML('beforeend', button);
}

View File

@ -42,7 +42,7 @@
</label>
<span
v-if="helpText"
class="help-block"
class="form-text text-muted"
>
{{ helpText }}
</span>

View File

@ -181,7 +181,7 @@ export default class UserTabs {
toggleLoading(status) {
return this.$parentEl.find('.loading-status .loading')
.toggle(status);
.toggleClass('hidden', status);
}
setCurrentAction(source) {
@ -195,6 +195,6 @@ export default class UserTabs {
}
getCurrentAction() {
return this.$parentEl.find('.nav-links .active a').data('action');
return this.$parentEl.find('.nav-links a.active').data('action');
}
}

View File

@ -37,7 +37,7 @@ export default {
<template>
<div
id="peek-request-selector"
class="pull-right"
class="float-right"
>
<select v-model="currentRequestId">
<option

View File

@ -17,13 +17,13 @@
<template>
<div class="row empty-state">
<div class="col-xs-12">
<div class="col-12">
<div class="svg-content">
<img :src="svgPath" />
</div>
</div>
<div class="col-xs-12 text-center">
<div class="col-12 text-center">
<div class="text-content">
<h4>{{ message }}</h4>
</div>

View File

@ -19,13 +19,13 @@
</script>
<template>
<div class="row empty-state js-empty-state">
<div class="col-xs-12">
<div class="col-12">
<div class="svg-content svg-250">
<img :src="emptyStateSvgPath" />
</div>
</div>
<div class="col-xs-12">
<div class="col-12">
<div class="text-content">
<template v-if="canSetCi">

View File

@ -96,6 +96,7 @@ export default {
:class="cssClassJobName"
data-container="body"
data-html="true"
data-boundary="viewport"
class="js-pipeline-graph-job-link"
>

View File

@ -46,7 +46,7 @@
};
</script>
<template>
<div class="table-section section-15 hidden-xs hidden-sm pipeline-tags">
<div class="table-section section-15 d-none d-sm-none d-md-block pipeline-tags">
<a
:href="pipeline.path"
class="js-pipeline-url-link">
@ -69,35 +69,35 @@
<span
v-if="pipeline.flags.latest"
v-tooltip
class="js-pipeline-url-latest label label-success"
class="js-pipeline-url-latest badge badge-success"
title="Latest pipeline for this branch">
latest
</span>
<span
v-if="pipeline.flags.yaml_errors"
v-tooltip
class="js-pipeline-url-yaml label label-danger"
class="js-pipeline-url-yaml badge badge-danger"
:title="pipeline.yaml_errors">
yaml invalid
</span>
<span
v-if="pipeline.flags.failure_reason"
v-tooltip
class="js-pipeline-url-failure label label-danger"
class="js-pipeline-url-failure badge badge-danger"
:title="pipeline.failure_reason">
error
</span>
<a
v-if="pipeline.flags.auto_devops"
tabindex="0"
class="js-pipeline-url-autodevops label label-info autodevops-badge"
class="js-pipeline-url-autodevops badge badge-info autodevops-badge"
v-popover="popoverOptions"
role="button">
Auto DevOps
</a>
<span
v-if="pipeline.flags.stuck"
class="js-pipeline-url-stuck label label-warning">
class="js-pipeline-url-stuck badge badge-warning">
stuck
</span>
</div>

View File

@ -63,7 +63,7 @@
<loading-icon v-if="isLoading" />
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="(action, i) in actions"
:key="i"

View File

@ -37,7 +37,7 @@
>
</i>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="(artifact, i) in artifacts"
:key="i">

View File

@ -331,7 +331,7 @@
<pipelines-artifacts-component
v-if="pipeline.details.artifacts.length"
class="hidden-xs hidden-sm"
class="d-none d-sm-none d-md-block"
:artifacts="pipeline.details.artifacts"
/>

View File

@ -75,7 +75,7 @@
</p>
<p
class="finished-at hidden-xs hidden-sm"
class="finished-at d-none d-sm-none d-md-block"
v-if="hasFinishedTime"
>

View File

@ -86,7 +86,11 @@ Please update your Git repository remotes as soon as possible.`),
<div class="form-group">
<label :for="$options.inputId">{{ s__('Profiles|Path') }}</label>
<div class="input-group">
<div class="input-group-addon">{{ rootUrl }}</div>
<div class="input-group-prepend">
<div class="input-group-text">
{{ rootUrl }}
</div>
</div>
<input
:id="$options.inputId"
class="form-control"

View File

@ -4,6 +4,6 @@ export default () => {
$('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
if ($(this).hasClass('disabled')) return false;
return $('.js-fork-content').toggle();
return $('.js-fork-content').toggleClass('hidden');
});
};

View File

@ -42,7 +42,7 @@ export default class ProjectLabelSubscription {
const $button = $(button);
if ($button.attr('data-original-title')) {
$button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
$button.tooltip('hide').attr('data-original-title', newAction).tooltip('_fixTitle');
}
return button;

View File

@ -7,7 +7,7 @@ function setVisibilityOptions(namespaceSelector) {
const selectedNamespace = namespaceSelector.options[namespaceSelector.selectedIndex];
const { name, visibility, visibilityLevel, showPath, editPath } = selectedNamespace.dataset;
document.querySelectorAll('.visibility-level-setting .radio').forEach((option) => {
document.querySelectorAll('.visibility-level-setting .form-check').forEach((option) => {
const optionInput = option.querySelector('input[type=radio]');
const optionValue = optionInput ? optionInput.value : 0;
const optionTitle = option.querySelector('.option-title');

View File

@ -66,8 +66,8 @@ const bindEvents = () => {
.on('click', (e) => { e.preventDefault(); })
.popover({
title: $pushNewProjectTipTrigger.data('title'),
placement: 'auto bottom',
html: 'true',
placement: 'bottom',
html: true,
content: $('.push-new-project-tip-template').html(),
})
.on('shown.bs.popover', () => {

View File

@ -46,7 +46,7 @@
<template>
<div
class="search-input-container hidden-xs"
class="search-input-container d-none d-sm-block"
>
<input
type="search"

View File

@ -31,7 +31,7 @@ export default class PrometheusMetrics {
/* eslint-disable class-methods-use-this */
handlePanelToggle(e) {
const $toggleBtn = $(e.currentTarget);
const $currentPanelBody = $toggleBtn.closest('.panel').find('.panel-body');
const $currentPanelBody = $toggleBtn.closest('.card').find('.card-body');
$currentPanelBody.toggleClass('hidden');
if ($toggleBtn.hasClass('fa-caret-down')) {
$toggleBtn.removeClass('fa-caret-down').addClass('fa-caret-right');

View File

@ -84,7 +84,7 @@
css-class="btn-default btn-transparent btn-clipboard"
/>
<div class="controls hidden-xs pull-right">
<div class="controls d-none d-sm-block float-right">
<button
v-if="repo.canDelete"
type="button"

View File

@ -120,7 +120,7 @@
<button
v-if="item.canDelete"
type="button"
class="js-delete-registry btn btn-danger hidden-xs pull-right"
class="js-delete-registry btn btn-danger d-none d-sm-block float-right"
:title="s__('ContainerRegistry|Remove tag')"
:aria-label="s__('ContainerRegistry|Remove tag')"
data-container="body"

View File

@ -108,7 +108,7 @@ Sidebar.prototype.todoUpdateDone = function(data) {
.attr('title', $el.data(`${attrPrefix}Text`));
if ($el.hasClass('has-tooltip')) {
$el.tooltip('fixTitle');
$el.tooltip('_fixTitle');
}
if ($el.data(`${attrPrefix}Icon`)) {

View File

@ -41,7 +41,7 @@ export default {
</i>
<a
v-if="editable"
class="js-sidebar-dropdown-toggle edit-link pull-right"
class="js-sidebar-dropdown-toggle edit-link float-right"
href="#"
>
{{ __('Edit') }}
@ -49,7 +49,7 @@ export default {
<a
v-if="showToggle"
aria-label="Toggle sidebar"
class="gutter-toggle pull-right js-sidebar-toggle"
class="gutter-toggle float-right js-sidebar-toggle"
href="#"
role="button"
>

View File

@ -130,6 +130,7 @@ export default {
v-tooltip
data-container="body"
data-placement="left"
data-boundary="viewport"
:title="collapsedTooltipTitle"
>
<i

View File

@ -75,6 +75,7 @@ export default {
v-tooltip
data-container="body"
data-placement="left"
data-boundary="viewport"
:title="tooltipLabel"
>
<icon
@ -86,7 +87,7 @@ export default {
{{ __('Confidentiality') }}
<a
v-if="isEditable"
class="pull-right confidential-edit"
class="float-right confidential-edit"
href="#"
@click.prevent="toggleForm"
>

View File

@ -32,7 +32,7 @@ export default {
</script>
<template>
<div class="dropdown open">
<div class="dropdown show">
<div class="dropdown-menu sidebar-item-warning-message">
<div>
<p

View File

@ -41,7 +41,7 @@ export default {
</script>
<template>
<div class="dropdown open">
<div class="dropdown show">
<div class="dropdown-menu sidebar-item-warning-message">
<p
class="text"

View File

@ -99,6 +99,7 @@ export default {
v-tooltip
data-container="body"
data-placement="left"
data-boundary="viewport"
:title="tooltipLabel"
>
<icon
@ -112,7 +113,7 @@ export default {
{{ sprintf(__('Lock %{issuableDisplayName}'), { issuableDisplayName: issuableDisplayName }) }}
<button
v-if="isEditable"
class="pull-right lock-edit"
class="float-right lock-edit"
type="button"
@click.prevent="toggleForm"
>

View File

@ -84,6 +84,7 @@
v-tooltip
data-container="body"
data-placement="left"
data-boundary="viewport"
:title="participantLabel"
@click="onClickCollapsedIcon"
>

View File

@ -82,6 +82,7 @@
:title="notificationTooltip"
data-container="body"
data-placement="left"
data-boundary="viewport"
>
<icon
:name="notificationIcon"
@ -91,12 +92,12 @@
/>
</span>
</div>
<span class="issuable-header-text hide-collapsed pull-left">
<span class="issuable-header-text hide-collapsed float-left">
{{ __('Notifications') }}
</span>
<toggle-button
ref="toggleButton"
class="pull-right hide-collapsed js-issuable-subscribe-button"
class="float-right hide-collapsed js-issuable-subscribe-button"
:is-loading="showLoadingState"
:value="subscribed"
@change="toggleSubscription"

View File

@ -114,6 +114,7 @@
v-tooltip
data-container="body"
data-placement="left"
data-boundary="viewport"
:title="tooltipText"
>
<icon name="timer" />

View File

@ -71,7 +71,7 @@ export default {
</div>
</div>
<div class="compare-display-container">
<div class="compare-display pull-left">
<div class="compare-display float-left">
<span class="compare-label">
{{ s__('TimeTracking|Spent') }}
</span>
@ -79,7 +79,7 @@ export default {
{{ timeSpentHumanReadable }}
</span>
</div>
<div class="compare-display estimated pull-right">
<div class="compare-display estimated float-right">
<span class="compare-label">
{{ s__('TimeTrackingEstimated|Est') }}
</span>

View File

@ -116,7 +116,7 @@ export default {
<div class="title hide-collapsed">
{{ __('Time tracking') }}
<div
class="help-button pull-right"
class="help-button float-right"
v-if="!showHelpState"
@click="toggleHelpState(true)"
>
@ -127,7 +127,7 @@ export default {
</i>
</div>
<div
class="close-help-button pull-right"
class="close-help-button float-right"
v-if="showHelpState"
@click="toggleHelpState(false)"
>

View File

@ -202,7 +202,7 @@ function UsersSelect(currentUser, els, options = {}) {
tooltipTitle = __('Assignee');
}
$value.html(assigneeTemplate(user));
$collapsedSidebar.attr('title', tooltipTitle).tooltip('fixTitle');
$collapsedSidebar.attr('title', tooltipTitle).tooltip('_fixTitle');
return $collapsedSidebar.html(collapsedAssigneeTemplate(user));
});
};

View File

@ -127,7 +127,7 @@ export default {
</span>
<loading-button
v-if="deployment.stop_url"
container-class="btn btn-default btn-xs prepend-left-default"
container-class="btn btn-default btn-sm prepend-left-default"
label="Stop environment"
:loading="isStopping"
@click="stopEnvironment"

View File

@ -131,7 +131,7 @@ export default {
aria-hidden="true">
</i>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a
class="js-download-email-patches"

View File

@ -42,7 +42,7 @@
@click="refreshWidget"
:disabled="isRefreshing"
type="button"
class="btn btn-xs btn-default"
class="btn btn-sm btn-default"
>
<loading-icon
v-if="isRefreshing"

Some files were not shown because too many files have changed in this diff Show More