Commit eb789bdb authored by Mike Greiling's avatar Mike Greiling

Prettify all the things

parent 61ba9201
......@@ -65,12 +65,7 @@ export default {
<template>
<div>
<a
v-show="!isLoading && !hasError"
:href="linkUrl"
target="_blank"
rel="noopener noreferrer"
>
<a v-show="!isLoading && !hasError" :href="linkUrl" target="_blank" rel="noopener noreferrer">
<img
:src="imageUrlWithRetries"
class="project-badge"
......@@ -80,15 +75,9 @@ export default {
/>
</a>
<gl-loading-icon
v-show="isLoading"
:inline="true"
/>
<gl-loading-icon v-show="isLoading" :inline="true" />
<div
v-show="hasError"
class="btn-group"
>
<div v-show="hasError" class="btn-group">
<div class="btn btn-default btn-sm disabled">
<icon
:size="16"
......@@ -97,9 +86,7 @@ export default {
aria-hidden="true"
/>
</div>
<div
class="btn btn-default btn-sm disabled"
>
<div class="btn btn-default btn-sm disabled">
<span class="prepend-left-8 append-right-8">{{ s__('Badges|No badge image') }}</span>
</div>
</div>
......@@ -112,10 +99,7 @@ export default {
type="button"
@click="reloadImage"
>
<icon
:size="16"
name="retry"
/>
<icon :size="16" name="retry" />
</button>
</div>
</template>
......@@ -155,10 +155,7 @@ export default {
@submit.prevent.stop="onSubmit"
>
<div class="form-group">
<label
for="badge-link-url"
class="label-bold"
>{{ s__('Badges|Link') }}</label>
<label for="badge-link-url" class="label-bold">{{ s__('Badges|Link') }}</label>
<p v-html="helpText"></p>
<input
id="badge-link-url"
......@@ -168,19 +165,12 @@ export default {
required
@input="debouncedPreview"
/>
<div class="invalid-feedback">
{{ s__('Badges|Please fill in a valid URL') }}
</div>
<span class="form-text text-muted">
{{ badgeLinkUrlExample }}
</span>
<div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
<span class="form-text text-muted"> {{ badgeLinkUrlExample }} </span>
</div>
<div class="form-group">
<label
for="badge-image-url"
class="label-bold"
>{{ s__('Badges|Badge image URL') }}</label>
<label for="badge-image-url" class="label-bold">{{ s__('Badges|Badge image URL') }}</label>
<p v-html="helpText"></p>
<input
id="badge-image-url"
......@@ -190,12 +180,8 @@ export default {
required
@input="debouncedPreview"
/>
<div class="invalid-feedback">
{{ s__('Badges|Please fill in a valid URL') }}
</div>
<span class="form-text text-muted">
{{ badgeImageUrlExample }}
</span>
<div class="invalid-feedback">{{ s__('Badges|Please fill in a valid URL') }}</div>
<span class="form-text text-muted"> {{ badgeImageUrlExample }} </span>
</div>
<div class="form-group">
......@@ -206,37 +192,22 @@ export default {
:image-url="renderedImageUrl"
:link-url="renderedLinkUrl"
/>
<p v-show="isRendering">
<gl-loading-icon
:inline="true"
/>
<p v-show="isRendering"><gl-loading-icon :inline="true" /></p>
<p v-show="!renderedBadge && !isRendering" class="disabled-content">
{{ s__('Badges|No image to preview') }}
</p>
<p
v-show="!renderedBadge && !isRendering"
class="disabled-content"
>{{ s__('Badges|No image to preview') }}</p>
</div>
<div
v-if="isEditing"
class="row-content-block"
>
<div v-if="isEditing" class="row-content-block">
<loading-button
:loading="isSaving"
:label="s__('Badges|Save changes')"
type="submit"
container-class="btn btn-success"
/>
<button
class="btn btn-cancel"
type="button"
@click="onCancel"
>{{ __('Cancel') }}</button>
<button class="btn btn-cancel" type="button" @click="onCancel">{{ __('Cancel') }}</button>
</div>
<div
v-else
class="form-group"
>
<div v-else class="form-group">
<loading-button
:loading="isSaving"
:label="s__('Badges|Add badge')"
......
......@@ -26,32 +26,15 @@ export default {
<div class="card">
<div class="card-header">
{{ s__('Badges|Your badges') }}
<span
v-show="!isLoading"
class="badge badge-pill"
>{{ badges.length }}</span>
<span v-show="!isLoading" class="badge badge-pill">{{ badges.length }}</span>
</div>
<gl-loading-icon
v-show="isLoading"
:size="2"
class="card-body"
/>
<div
v-if="hasNoBadges"
class="card-body"
>
<gl-loading-icon v-show="isLoading" :size="2" class="card-body" />
<div v-if="hasNoBadges" 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="card-body"
>
<badge-list-row
v-for="badge in badges"
:key="badge.id"
:badge="badge"
/>
<div v-else class="card-body">
<badge-list-row v-for="badge in badges" :key="badge.id" :badge="badge" />
</div>
</div>
</template>
......@@ -50,20 +50,14 @@ export default {
<span class="badge badge-pill">{{ badgeKindText }}</span>
</div>
<div class="table-section section-15 table-button-footer">
<div
v-if="canEditBadge"
class="table-action-buttons">
<div v-if="canEditBadge" class="table-action-buttons">
<button
:disabled="badge.isDeleting"
class="btn btn-default append-right-8"
type="button"
@click="editBadge(badge)"
@click="editBadge(badge);"
>
<icon
:size="16"
:aria-label="__('Edit')"
name="pencil"
/>
<icon :size="16" :aria-label="__('Edit')" name="pencil" />
</button>
<button
:disabled="badge.isDeleting"
......@@ -71,18 +65,11 @@ export default {
type="button"
data-toggle="modal"
data-target="#delete-badge-modal"
@click="updateBadgeInModal(badge)"
@click="updateBadgeInModal(badge);"
>
<icon
:size="16"
:aria-label="__('Delete')"
name="remove"
/>
<icon :size="16" :aria-label="__('Delete')" name="remove" />
</button>
<gl-loading-icon
v-show="badge.isDeleting"
:inline="true"
/>
<gl-loading-icon v-show="badge.isDeleting" :inline="true" />
</div>
</div>
</div>
......
......@@ -46,7 +46,8 @@ export default {
:header-title-text="s__('Badges|Delete badge?')"
:footer-primary-button-text="s__('Badges|Delete badge')"
footer-primary-button-variant="danger"
@submit="onSubmitModal">
@submit="onSubmitModal"
>
<div class="well">
<badge
:image-url="badgeInModal ? badgeInModal.renderedImageUrl : ''"
......@@ -56,15 +57,9 @@ export default {
<p v-html="deleteModalText"></p>
</gl-modal>
<badge-form
v-show="isEditing"
:is-editing="true"
/>
<badge-form v-show="isEditing" :is-editing="true" />
<badge-form
v-show="!isEditing"
:is-editing="false"
/>
<badge-form v-show="!isEditing" :is-editing="false" />
<badge-list v-show="!isEditing" />
</div>
</template>
......@@ -23,10 +23,12 @@ export default class BlobViewer {
if (!viewer || !viewer.dataset.richType) return;
const initViewer = promise =>
promise.then(module => module.default(viewer)).catch(error => {
Flash('Error loading file viewer.');
throw error;
});
promise
.then(module => module.default(viewer))
.catch(error => {
Flash('Error loading file viewer.');
throw error;
});
switch (viewer.dataset.richType) {
case 'balsamiq':
......
......@@ -61,35 +61,25 @@ export default {
<template>
<div class="board-blank-state">
<p>
Add the following default lists to your Issue Board with one click:
</p>
<p>Add the following default lists to your Issue Board with one click:</p>
<ul class="board-blank-state-list">
<li
v-for="(label, index) in predefinedLabels"
:key="index"
>
<span
:style="{ backgroundColor: label.color }"
class="label-color">
</span>
<li v-for="(label, index) in predefinedLabels" :key="index">
<span :style="{ backgroundColor: label.color }" class="label-color"> </span>
{{ label.title }}
</li>
</ul>
<p>
Starting out with the default set of lists will get you
right on the way to making the most of your board.
Starting out with the default set of lists will get you right on the way to making the most of
your board.
</p>
<button
class="btn btn-success btn-inverted btn-block"
type="button"
@click.stop="addDefaultLists">
@click.stop="addDefaultLists"
>
Add default lists
</button>
<button
class="btn btn-default btn-block"
type="button"
@click.stop="clearBlankState">
<button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState">
Nevermind, I'll use my own
</button>
</div>
......
......@@ -79,14 +79,15 @@ export default {
:class="{
'user-can-drag': !disabled && issue.id,
'is-disabled': disabled || !issue.id,
'is-active': issueDetailVisible
'is-active': issueDetailVisible,
}"
:index="index"
:data-issue-id="issue.id"
class="board-card"
@mousedown="mouseDown"
@mousemove="mouseMove"
@mouseup="showIssue($event)">
@mouseup="showIssue($event);"
>
<issue-card-inner
:list="list"
:issue="issue"
......
......@@ -222,23 +222,22 @@ export default {
<template>
<div class="board-list-component">
<div
v-if="loading"
class="board-list-loading text-center"
aria-label="Loading issues">
<div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues">
<gl-loading-icon />
</div>
<board-new-issue
v-if="list.type !== 'closed' && showIssueForm"
:group-id="groupId"
:list="list"/>
:list="list"
/>
<ul
v-show="!loading"
ref="list"
:data-board="list.id"
:data-board-type="list.type"
:class="{ 'is-smaller': showIssueForm }"
class="board-list js-board-list">
class="board-list js-board-list"
>
<board-card
v-for="(issue, index) in issues"
ref="issue"
......@@ -249,25 +248,12 @@ export default {
:issue-link-base="issueLinkBase"
:group-id="groupId"
:root-path="rootPath"
:disabled="disabled" />
<li
v-if="showCount"
class="board-list-count text-center"
data-issue-id="-1">
<gl-loading-icon
v-show="list.loadingMore"
label="Loading more issues"
/>
<span
v-if="list.issues.length === list.issuesSize"
>
Showing all issues
</span>
<span
v-else
>
Showing {{ list.issues.length }} of {{ list.issuesSize }} issues
</span>
:disabled="disabled"
/>
<li v-if="showCount" class="board-list-count text-center" data-issue-id="-1">
<gl-loading-icon v-show="list.loadingMore" label="Loading more issues" />
<span v-if="list.issues.length === list.issuesSize"> Showing all issues </span>
<span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span>
</li>
</ul>
</div>
......
......@@ -99,21 +99,11 @@ export default {
<template>
<div class="board-new-issue-form">
<div class="board-card">
<form @submit="submit($event)">
<div
v-if="error"
class="flash-container"
>
<div class="flash-alert">
An error occurred. Please try again.
</div>
<form @submit="submit($event);">
<div v-if="error" class="flash-container">
<div class="flash-alert">An error occurred. Please try again.</div>
</div>
<label
:for="list.id + '-title'"
class="label-bold"
>
Title
</label>
<label :for="list.id + '-title'" class="label-bold"> Title </label>
<input
:id="list.id + '-title'"
ref="input"
......@@ -123,10 +113,7 @@ export default {
name="issue_title"
autocomplete="off"
/>
<project-select
v-if="groupId"
:group-id="groupId"
/>
<project-select v-if="groupId" :group-id="groupId" />
<div class="clearfix prepend-top-10">
<gl-button
ref="submit-button"
......@@ -137,12 +124,7 @@ export default {
>
Submit issue
</gl-button>
<gl-button
class="float-right"
type="button"
variant="default"
@click="cancel"
>
<gl-button class="float-right" type="button" variant="default" @click="cancel">
Cancel
</gl-button>
</div>
......
......@@ -171,17 +171,12 @@ export default {
:title="__('Confidential')"
class="confidential-icon append-right-4"
:aria-label="__('Confidential')"
/><a
:href="issue.path"
:title="issue.title"
class="js-no-trigger"
@mousemove.stop>{{ issue.title }}</a>
/><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{
issue.title
}}</a>
</h4>
</div>
<div
v-if="showLabelFooter"
class="board-card-labels prepend-top-4 d-flex flex-wrap"
>
<div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap">
<button
v-for="label in issue.labels"
v-if="showLabel(label)"
......@@ -191,13 +186,15 @@ export default {
:title="label.description"
class="badge color-label append-right-4 prepend-top-4"
type="button"
@click="filterByLabel(label)"
@click="filterByLabel(label);"
>
{{ label.title }}
</button>
</div>
<div class="board-card-footer d-flex justify-content-between align-items-end">
<div class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container">
<div
class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"
>
<span
v-if="issue.referencePath"
class="board-card-number d-flex append-right-8 prepend-top-8"
......@@ -207,19 +204,17 @@ export default {
:title="issueReferencePath"
placement="bottom"
class="board-issue-path block-truncated bold"
>{{ issueReferencePath }}</tooltip-on-truncate>#{{ issue.iid }}
>{{ issueReferencePath }}</tooltip-on-truncate
>#{{ issue.iid }}
</span>
<span class="board-info-items prepend-top-8 d-inline-block">
<issue-due-date
v-if="issue.dueDate"
:date="issue.dueDate"
/><issue-time-estimate
<issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate
v-if="issue.timeEstimate"
:estimate="issue.timeEstimate"
/><issue-card-weight
v-if="issue.weight"
:weight="issue.weight"
@click="filterByWeight(issue.weight)"
@click="filterByWeight(issue.weight);"
/>
</span>
</div>
......@@ -236,8 +231,7 @@ export default {
tooltip-placement="bottom"
>
<span class="js-assignee-tooltip">
<span class="bold d-block">Assignee</span>
{{ assignee.name }}
<span class="bold d-block">Assignee</span> {{ assignee.name }}
<span class="text-white-50">@{{ assignee.username }}</span>
</span>
</user-avatar-link>
......
......@@ -66,25 +66,17 @@ export default {
<template>
<span>
<span
ref="issueDueDate"
class="board-card-info card-number"
>
<span ref="issueDueDate" class="board-card-info card-number">
<icon
:class="{'text-danger': isPastDue, 'board-card-info-icon': true}"
:class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }"
name="calendar"
/><time
:class="{'text-danger': isPastDue}"
datetime="date"
class="board-card-info-text">{{ body }}</time>
/><time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{
body
}}</time>
</span>
<gl-tooltip
:target="() => $refs.issueDueDate"
placement="bottom"
>
<span class="bold">{{ __('Due date') }}</span>
<br />
<span :class="{'text-danger-muted': isPastDue}">{{ title }}</span>
<gl-tooltip :target="() => $refs.issueDueDate" placement="bottom">
<span class="bold">{{ __('Due date') }}</span> <br />
<span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span>
</gl-tooltip>
</span>
</template>
......@@ -27,22 +27,18 @@ export default {
<template>
<span>
<span
ref="issueTimeEstimate"
class="board-card-info card-number"
>
<icon
name="hourglass"
css-classes="board-card-info-icon"
/><time class="board-card-info-text">{{ timeEstimate }}</time>
<span ref="issueTimeEstimate" class="board-card-info card-number">
<icon name="hourglass" css-classes="board-card-info-icon" /><time
class="board-card-info-text"
>{{ timeEstimate }}</time
>
</span>
<gl-tooltip
:target="() => $refs.issueTimeEstimate"
placement="bottom"
class="js-issue-time-estimate"
>
<span class="bold d-block">{{ __('Time estimate') }}</span>
{{ title }}
<span class="bold d-block">{{ __('Time estimate') }}</span> {{ title }}
</gl-tooltip>
</span>
</template>
......@@ -45,24 +45,20 @@ export default {
<section class="empty-state">
<div class="row">
<div class="col-12 col-md-6 order-md-last">
<aside class="svg-content"><img :src="emptyStateSvg"/></aside>
<aside class="svg-content"><img :src="emptyStateSvg" /></aside>
</div>
<div class="col-12 col-md-6 order-md-first">
<div class="text-content">
<h4>{{ contents.title }}</h4>
<p v-html="contents.content"></p>
<a
v-if="activeTab === 'all'"
:href="newIssuePath"
class="btn btn-success btn-inverted"
>
<a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted">
New issue
</a>
<button
v-if="activeTab === 'selected'"
class="btn btn-default"
type="button"
@click="changeTab('all')"
@click="changeTab('all');"
>
Open issues
</button>
......
......@@ -63,28 +63,15 @@ export default {
};
</script>
<template>
<footer
class="form-actions add-issues-footer"
>
<footer class="form-actions add-issues-footer">
<div class="float-left">
<button
:disabled="submitDisabled"
class="btn btn-success"
type="button"
@click="addIssues"
>
<button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues">
{{ submitText }}
</button>
<span class="inline add-issues-footer-to-list">
to list
</span>
<lists-dropdown/>
<span class="inline add-issues-footer-to-list"> to list </span>
<lists-dropdown />
</div>
<button
class="btn btn-default float-right"
type="button"
@click="toggleModal(false)"
>
<button class="btn btn-default float-right" type="button" @click="toggleModal(false);">
Cancel
</button>
</footer>
......
......@@ -58,16 +58,14 @@ export default {
class="close"
data-dismiss="modal"
aria-label="Close"
@click="toggleModal(false)"
@click="toggleModal(false);"
>
<span aria-hidden="true">×</span>
</button>
</h2>
</header>
<modal-tabs v-if="!loading && issuesCount > 0"/>
<div
v-if="showSearch"
class="add-issues-search append-bottom-10">
<modal-tabs v-if="!loading && issuesCount > 0" />
<div v-if="showSearch" class="add-issues-search append-bottom-10">
<modal-filters :store="filter" />
<button
ref="selectAllBtn"
......
......@@ -143,9 +143,7 @@ export default {
};
</script>
<template>
<div
v-if="showAddIssuesModal"
class="add-issues-modal">
<div v-if="showAddIssuesModal" class="add-issues-modal">
<div class="add-issues-container">
<modal-header
:project-id="projectId"
......@@ -163,15 +161,10 @@ export default {
:new-issue-path="newIssuePath"
:empty-state-svg="emptyStateSvg"
/>
<section
v-if="loading || filterLoading"
class="add-issues-list text-center"
>
<div class="add-issues-list-loading">
<gl-loading-icon />
</div>
<section v-if="loading || filterLoading" class="add-issues-list text-center">
<div class="add-issues-list-loading"><gl-loading-icon /></div>
</section>
<modal-footer/>
<modal-footer />
</div>
</div>
</template>
......@@ -117,38 +117,22 @@ export default {
};
</script>
<template>
<section
ref="list"
class="add-issues-list add-issues-list-columns">
<section ref="list" class="add-issues-list add-issues-list-columns">
<div
v-if="issuesCount > 0 && issues.length === 0"
class="empty-state add-issues-empty-state-filter text-center">
<div class="svg-content">
<img :src="emptyStateSvg" />
</div>
<div class="text-content">
<h4>
There are no issues to show.
</h4>
</div>
class="empty-state add-issues-empty-state-filter text-center"
>
<div class="svg-content"><img :src="emptyStateSvg" /></div>
<div class="text-content"><h4>There are no issues to show.</h4></div>
</div>
<div
v-for="(group, index) in groupedIssues"
:key="index"
class="add-issues-list-column">
<div
v-for="issue in group"
v-if="showIssue(issue)"
:key="issue.id"
class="board-card-parent">
<div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column">
<div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent">
<div
:class="{ 'is-active': issue.selected }"
class="board-card"
@click="toggleIssue($event, issue)">
<issue-card-inner
:issue="issue"
:issue-link-base="issueLinkBase"
:root-path="rootPath"/>
@click="toggleIssue($event, issue);"
>
<issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" />
<icon
v-if="issue.selected"
:aria-label="'Issue #' + issue.id + ' selected'"
......
......@@ -27,35 +27,20 @@ export default {
</script>
<template>
<div class="dropdown inline">
<button
class="dropdown-menu-toggle"
type="button"
data-toggle="dropdown"
aria-expanded="false">
<span
:style="{ backgroundColor: selected.label.color }"
class="dropdown-label-box">
</span>
{{ selected.title }}
<icon
name="chevron-down"
/>
<button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
<span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span>
{{ selected.title }} <icon name="chevron-down" />
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up">
<ul>
<li
v-for="(list, i) in state.lists"
v-if="list.type == 'label'"
:key="i">
<li v-for="(list, i) in state.lists" v-if="list.type == 'label'" :key="i">
<gl-link
:class="{ 'is-active': list.id == selected.id }"
href="#"
role="button"
@click.prevent="modal.selectedList = list">
<span
:style="{ backgroundColor: list.label.color }"
class="dropdown-label-box">
</span>
@click.prevent="modal.selectedList = list;"
>
<span :style="{ backgroundColor: list.label.color }" class="dropdown-label-box"> </span>
{{ list.title }}
</gl-link>
</li>
......
......@@ -20,28 +20,14 @@ export default {
<template>
<div class="top-area prepend-top-10 append-bottom-10">
<ul class="nav-links issues-state-filters">
<li :class="{ 'active': activeTab == 'all' }">
<a
href="#"
role="button"
@click.prevent="changeTab('all')"
>
Open issues
<span class="badge badge-pill">
{{ issuesCount }}
</span>
<li :class="{ active: activeTab == 'all' }">
<a href="#" role="button" @click.prevent="changeTab('all');">
Open issues <span class="badge badge-pill"> {{ issuesCount }} </span>
</a>
</li>
<li :class="{ 'active': activeTab == 'selected' }">
<a
href="#"
role="button"
@click.prevent="changeTab('selected')"
>
Selected issues
<span class="badge badge-pill">
{{ selectedCount }}
</span>
<li :class="{ active: activeTab == 'selected' }">
<a href="#" role="button" @click.prevent="changeTab('selected');">
Selected issues <span class="badge badge-pill"> {{ selectedCount }} </span>
</a>
</li>
</ul>
......
......@@ -72,23 +72,15 @@ export default {
<template>
<div>
<label class="label-bold prepend-top-10">
Project
</label>
<div
ref="projectsDropdown"
class="dropdown"
>
<label class="label-bold prepend-top-10"> Project </label>
<div ref="projectsDropdown" class="dropdown">
<button
class="dropdown-menu-toggle wide"
type="button"
data-toggle="dropdown"
aria-expanded="false"
>
{{ selectedProjectName }}
<icon
name="chevron-down"
/>
{{ selectedProjectName }} <icon name="chevron-down" />
</button>
<div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width">
<div class="dropdown-title">
......@@ -106,21 +98,11 @@ export default {
</button>
</div>
<div class="dropdown-input">
<input
class="dropdown-input-field"
type="search"
placeholder="Search projects"
/>
<icon
name="search"
class="dropdown-input-search"
data-hidden="true"
/>
<input class="dropdown-input-field" type="search" placeholder="Search projects" />
<icon name="search" class="dropdown-input-search" data-hidden="true" />
</div>
<div class="dropdown-content"></div>
<div class="dropdown-loading">
<gl-loading-icon />
</div>
<div class="dropdown-loading"><gl-loading-icon /></div>
</div>
</div>
</div>
......
......@@ -74,14 +74,8 @@ export default Vue.extend({
});
</script>
<template>
<div
class="block list"
>
<button
class="btn btn-default btn-block"
type="button"
@click="removeIssue"
>
<div class="block list">
<button class="btn btn-default btn-block" type="button" @click="removeIssue">
Remove from board
</button>
</div>
......
......@@ -164,35 +164,21 @@ export default {
:class="[
rowJsClass,
isInstalled && 'cluster-application-installed',
disabled && 'cluster-application-disabled'
disabled && 'cluster-application-disabled',
]"
class="cluster-application-row gl-responsive-table-row gl-responsive-table-row-col-span"
>
<div
class="gl-responsive-table-row-layout"
role="row"
>
<div
class="table-section append-right-8 section-align-top"
role="gridcell"
>
<div class="gl-responsive-table-row-layout" role="row">
<div class="table-section append-right-8 section-align-top" role="gridcell">
<img
v-if="hasLogo"
:src="logoUrl"
:alt="`${title} logo`"
class="cluster-application-logo avatar s40"
/>
<identicon
v-else
:entity-id="identiconId"
:entity-name="title"
size-class="s40"
/>
<identicon v-else :entity-id="identiconId" :entity-name="title" size-class="s40" />
</div>
<div
class="table-section cluster-application-description section-wrap"
role="gridcell"
>
<div class="table-section cluster-application-description section-wrap" role="gridcell">
<strong>
<a
v-if="titleLink"
......@@ -203,12 +189,7 @@ export default {
>
{{ title }}
</a>
<span
v-else
class="js-cluster-application-title"
>
{{ title }}
</span>
<span v-else class="js-cluster-application-title"> {{ title }} </span>
</strong>
<slot name="description"></slot>
<div
......@@ -219,16 +200,10 @@ export default {
{{ generalErrorDescription }}
</p>
<ul v-if="statusReason || requestReason">
<li
v-if="statusReason"
class="js-cluster-application-status-error-message"
>
<li v-if="statusReason" class="js-cluster-application-status-error-message">
{{ statusReason }}
</li>
<li
v-if="requestReason"
class="js-cluster-application-request-error-message"
>
<li v-if="requestReason" class="js-cluster-application-request-error-message">
{{ requestReason }}
</li>
</ul>
......@@ -239,15 +214,8 @@ export default {
class="table-section table-button-footer section-align-top"
role="gridcell"
>
<div
v-if="showManageButton"
class="btn-group table-action-buttons"
>
<a
:href="manageLink"
:class="{ disabled: disabled }"
class="btn"
>
<div v-if="showManageButton" class="btn-group table-action-buttons">
<a :href="manageLink" :class="{ disabled: disabled }" class="btn">
{{ manageButtonLabel }}
</a>
</div>
......
......@@ -158,15 +158,13 @@ export default {
<template>
<section id="cluster-applications">
<h4>
{{ s__('ClusterIntegration|Applications') }}
</h4>
<h4>{{ s__('ClusterIntegration|Applications') }}</h4>
<p class="append-bottom-0">
{{ s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
Helm Tiller is required to install any of the following applications.`) }}
<a :href="helpPath">
{{ __('More information') }}
</a>
{{
s__(`ClusterIntegration|Choose which applications to install on your Kubernetes cluster.
Helm Tiller is required to install any of the following applications.`)
}}
<a :href="helpPath"> {{ __('More information') }} </a>
</p>
<div class="cluster-application-list prepend-top-10">
......@@ -182,23 +180,20 @@ export default {
title-link="https://docs.helm.sh/"
>
<div slot="description">
{{ s__(`ClusterIntegration|Helm streamlines installing
{{
s__(`ClusterIntegration|Helm streamlines installing
and managing Kubernetes applications.
Tiller runs inside of your Kubernetes Cluster,
and manages releases of your charts.`) }}
and manages releases of your charts.`)
}}
</div>
</application-row>
<div
v-show="!helmInstalled"
class="cluster-application-warning"
>
<div
class="svg-container"
v-html="helmInstallIllustration"
>
</div>
{{ s__(`ClusterIntegration|You must first install Helm Tiller before
installing the applications below`) }}
<div v-show="!helmInstalled" class="cluster-application-warning">
<div class="svg-container" v-html="helmInstallIllustration"></div>
{{
s__(`ClusterIntegration|You must first install Helm Tiller before
installing the applications below`)
}}
</div>
<application-row
:id="ingressId"
......@@ -213,9 +208,11 @@ export default {
>
<div slot="description">
<p>
{{ s__(`ClusterIntegration|Ingress gives you a way to route
{{
s__(`ClusterIntegration|Ingress gives you a way to route
requests to services based on the request host or path,
centralizing a number of services into a single entrypoint.`) }}
centralizing a number of services into a single entrypoint.`)
}}
</p>
<template v-if="ingressInstalled">
......@@ -223,10 +220,7 @@ export default {
<label for="ingress-ip-address">
{{ s__('ClusterIntegration|Ingress IP Address') }}
</label>
<div
v-if="ingressExternalIp"
class="input-group"
>
<div v-if="ingressExternalIp" class="input-group">
<input
id="ingress-ip-address"
:value="ingressExternalIp"
......@@ -242,50 +236,33 @@ export default {
/>
</span>
</div>
<input
v-else
type="text"
class="form-control js-ip-address"
readonly
value="?"
/>
<input v-else type="text" class="form-control js-ip-address" readonly value="?" />
</div>
<p
v-if="!ingressExternalIp"
class="settings-message js-no-ip-message"
>
{{ s__(`ClusterIntegration|The IP address is in
<p v-if="!ingressExternalIp" class="settings-message js-no-ip-message">
{{
s__(`ClusterIntegration|The IP address is in
the process of being assigned. Please check your Kubernetes
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`) }}
cluster or Quotas on Google Kubernetes Engine if it takes a long time.`)
}}
<a
:href="ingressHelpPath"
target="_blank"
rel="noopener noreferrer"
>
<a :href="ingressHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
<p>
{{ s__(`ClusterIntegration|Point a wildcard DNS to this
{{
s__(`ClusterIntegration|Point a wildcard DNS to this
generated IP address in order to access
your application after it has been deployed.`) }}
<a
:href="ingressDnsHelpPath"
target="_blank"
rel="noopener noreferrer"
>
your application after it has been deployed.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
</template>
<div
v-html="ingressDescription"
>
</div>
<div v-html="ingressDescription"></div>
</div>
</application-row>
<application-row
......@@ -301,11 +278,7 @@ export default {
:disabled="!helmInstalled"
title-link="https://prometheus.io/docs/introduction/overview/"
>
<div
slot="description"
v-html="prometheusDescription"
>
</div>
<div slot="description" v-html="prometheusDescription"></div>
</application-row>
<application-row
v-if="isProjectCluster"
......@@ -320,10 +293,12 @@ export default {
title-link="https://docs.gitlab.com/runner/"
>
<div slot="description">
{{ s__(`ClusterIntegration|GitLab Runner connects to this
{{
s__(`ClusterIntegration|GitLab Runner connects to this
project's repository and executes CI/CD jobs,
pushing results back and deploying,
applications to production.`) }}
applications to production.`)
}}
</div>
</application-row>
<application-row
......@@ -341,11 +316,13 @@ export default {
>
<div slot="description">
<p>
{{ s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
{{
s__(`ClusterIntegration|JupyterHub, a multi-user Hub, spawns,
manages, and proxies multiple instances of the single-user
Jupyter notebook server. JupyterHub can be used to serve
notebooks to a class of students, a corporate data science group,
or a scientific research group.`) }}
or a scientific research group.`)
}}
</p>
<template v-if="ingressExternalIp">
......@@ -361,9 +338,7 @@ export default {
type="text"
class="form-control js-hostname"
/>
<span
class="input-group-btn"
>
<span class="input-group-btn">
<clipboard-button
:text="jupyterHostname"
:title="s__('ClusterIntegration|Copy Jupyter Hostname to clipboard')"
......@@ -373,13 +348,11 @@ export default {
</div>
</div>
<p v-if="ingressInstalled">
{{ s__(`ClusterIntegration|Replace this with your own hostname if you want.
If you do so, point hostname to Ingress IP Address from above.`) }}
<a
:href="ingressDnsHelpPath"
target="_blank"
rel="noopener noreferrer"
>
{{
s__(`ClusterIntegration|Replace this with your own hostname if you want.
If you do so, point hostname to Ingress IP Address from above.`)
}}
<a :href="ingressDnsHelpPath" target="_blank" rel="noopener noreferrer">
{{ __('More information') }}
</a>
</p>
......@@ -394,19 +367,21 @@ export default {
:status-reason="applications.knative.statusReason"
:request-status="applications.knative.requestStatus"
:request-reason="applications.knative.requestReason"
:install-application-request-params="{ hostname: applications.knative.hostname}"
:install-application-request-params="{ hostname: applications.knative.hostname }"
:disabled="!helmInstalled"
class="hide-bottom-border rounded-bottom"
title-link="https://github.com/knative/docs"
>
<div slot="description">
<p>
{{ s__(`ClusterIntegration|A Knative build extends Kubernetes
{{
s__(`ClusterIntegration|A Knative build extends Kubernetes
and utilizes existing Kubernetes primitives to provide you with
the ability to run on-cluster container builds from source.
For example, you can write a build that uses Kubernetes-native
resources to obtain your source code from a repository,
build it into container a image, and then run that image.`) }}
build it into container a image, and then run that image.`)
}}
</p>
<template v-if="knativeInstalled">
......
......@@ -82,7 +82,6 @@ export default {
</script>
<template>
<div class="content-list pipelines">
<gl-loading-icon
v-if="isLoading"
:label="s__('Pipelines|Loading Pipelines')"
......@@ -93,14 +92,13 @@ export default {
<svg-blank-state
v-else-if="shouldRenderErrorState"
:svg-path="errorStateSvgPath"
:message="s__(`Pipelines|There was an error fetching the pipelines.
Try again in a few moments or contact your support team.`)"
:message="
s__(`Pipelines|There was an error fetching the pipelines.
Try again in a few moments or contact your support team.`)
"
/>
<div
v-else-if="shouldRenderTable"
class="table-holder"
>
<div v-else-if="shouldRenderTable" class="table-holder">
<pipelines-table-component
:pipelines="state.pipelines"
:update-graph-dropdown="updateGraphDropdown"
......
......@@ -32,30 +32,19 @@ export default {
type="button"
@click="dismissOverviewDialog"
>
<icon
name="close"
/>
<icon name="close" />
</button>
<div
class="svg-container"
v-html="iconCycleAnalyticsSplash"
>
</div>
<div class="svg-container" v-html="iconCycleAnalyticsSplash"></div>
<div class="inner-content">
<h4>
{{ __('Introducing Cycle Analytics') }}
</h4>
<h4>{{ __('Introducing Cycle Analytics') }}</h4>
<p>
{{ __(`Cycle Analytics gives an overview
of how much time it takes to go from idea to production in your project.`) }}
{{
__(`Cycle Analytics gives an overview
of how much time it takes to go from idea to production in your project.`)
}}
</p>
<p>
<a
:href="documentationLink"
target="_blank"
rel="nofollow"
class="btn"
>
<a :href="documentationLink" target="_blank" rel="nofollow" class="btn">
{{ __('Read more') }}
</a>
</p>
......
......@@ -14,17 +14,12 @@ export default {
};
</script>
<template>
<span
v-if="count === 50"
class="events-info float-right"
>
<span v-if="count === 50" class="events-info float-right">
<i
v-tooltip
:title="n__(
'Limited to showing %d event at most',
'Limited to showing %d events at most',
50
)"
:title="
n__('Limited to showing %d event at most', 'Limited to showing %d events at most', 50)
"
class="fa fa-warning"
aria-hidden="true"
data-placement="top"
......
......@@ -28,45 +28,26 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(mergeRequest, i) in items"
:key="i"
class="stage-event-item"
>
<li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
<h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url">
{{ mergeRequest.title }}
</a>
<a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
</h5>
<a
:href="mergeRequest.url"
class="issue-link">
!{{ mergeRequest.iid }}
</a>
&middot;
<a :href="mergeRequest.url" class="issue-link"> !{{ mergeRequest.iid }} </a> &middot;
<span>
{{ s__('OpenedNDaysAgo|Opened') }}
<a
:href="mergeRequest.url"
class="issue-date">
{{ mergeRequest.createdAt }}
</a>
<a :href="mergeRequest.url" class="issue-date"> {{ mergeRequest.createdAt }} </a>
</span>
<span>
{{ s__('ByAuthor|by') }}
<a
:href="mergeRequest.author.webUrl"
class="issue-author-link">
<a :href="mergeRequest.author.webUrl" class="issue-author-link">
{{ mergeRequest.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="mergeRequest.totalTime" />
</div>
<div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -28,47 +28,24 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(issue, i) in items"
:key="i"
class="stage-event-item"
>
<li v-for="(issue, i) in items" :key="i" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="issue.author.avatarUrl"/>
<user-avatar-image :img-src="issue.author.avatarUrl" />
<h5 class="item-title issue-title">
<a
:href="issue.url"
class="issue-title"
>
{{ issue.title }}
</a>
<a :href="issue.url" class="issue-title"> {{ issue.title }} </a>
</h5>
<a
:href="issue.url"
class="issue-link"
>#{{ issue.iid }}</a>
&middot;
<a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> &middot;
<span>
{{ s__('OpenedNDaysAgo|Opened') }}
<a
:href="issue.url"
class="issue-date"
>{{ issue.createdAt }}</a>
<a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
</span>
<span>
{{ s__('ByAuthor|by') }}
<a
:href="issue.author.webUrl"
class="issue-author-link"
>
{{ issue.author.name }}
</a>
<a :href="issue.author.webUrl" class="issue-author-link"> {{ issue.author.name }} </a>
</span>
</div>
<div class="item-time">
<total-time :time="issue.totalTime" />
</div>
<div class="item-time"><total-time :time="issue.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -34,42 +34,25 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(commit, i) in items"
:key="i"
class="stage-event-item"
>
<li v-for="(commit, i) in items" :key="i" class="stage-event-item">
<div class="item-details item-conmmit-component">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="commit.author.avatarUrl" />
<h5 class="item-title commit-title">
<a :href="commit.commitUrl">
{{ commit.title }}
</a>
<a :href="commit.commitUrl"> {{ commit.title }} </a>
</h5>
<span>
{{ s__('FirstPushedBy|First') }}
<span
class="commit-icon"
v-html="iconCommit"
>
</span>
<a
:href="commit.commitUrl"
class="commit-hash-link commit-sha"
>{{ commit.shortSha }}</a>
{{ s__('FirstPushedBy|First') }} <span class="commit-icon" v-html="iconCommit"> </span>
<a :href="commit.commitUrl" class="commit-hash-link commit-sha">{{
commit.shortSha
}}</a>
{{ s__('FirstPushedBy|pushed by') }}
<a
:href="commit.author.webUrl"
class="commit-author-link"
>
<a :href="commit.author.webUrl" class="commit-author-link">
{{ commit.author.name }}
</a>
</span>
</div>
<div class="item-time">
<total-time :time="commit.totalTime" />
</div>
<div class="item-time"><total-time :time="commit.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -30,66 +30,37 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(mergeRequest, i) in items"
:key="i"
class="stage-event-item"
>
<li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
<h5 class="item-title merge-merquest-title">
<a :href="mergeRequest.url">
{{ mergeRequest.title }}
</a>
<a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
</h5>
<a
:href="mergeRequest.url"
class="issue-link"
>!{{ mergeRequest.iid }}</a>
&middot;
<a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> &middot;
<span>
{{ s__('OpenedNDaysAgo|Opened') }}
<a
:href="mergeRequest.url"
class="issue-date"
>{{ mergeRequest.createdAt }}</a>
<a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
</span>
<span>
{{ s__('ByAuthor|by') }}
<a
:href="mergeRequest.author.webUrl"
class="issue-author-link"
>{{ mergeRequest.author.name }}</a>
<a :href="mergeRequest.author.webUrl" class="issue-author-link">{{
mergeRequest.author.name
}}</a>
</span>
<template v-if="mergeRequest.state === 'closed'">
<span class="merge-request-state">
<i
class="fa fa-ban"
aria-hidden="true"
>
</i>
{{ mergeRequest.state.toUpperCase() }}
<i class="fa fa-ban" aria-hidden="true"> </i> {{ mergeRequest.state.toUpperCase() }}
</span>
</template>
<template v-else>
<span
v-if="mergeRequest.branch"
class="merge-request-branch"
>
<icon
:size="16"
name="fork"
/>
<a :href="mergeRequest.branch.url">
{{ mergeRequest.branch.name }}
</a>
<span v-if="mergeRequest.branch" class="merge-request-branch">
<icon :size="16" name="fork" />
<a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a>
</span>
</template>
</div>
<div class="item-time">
<total-time :time="mergeRequest.totalTime" />
</div>
<div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -36,62 +36,23 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(build, i) in items"
:key="i"
class="stage-event-item item-build-component"
>
<li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
<div class="item-details">
<!-- FIXME: Pass an alt attribute here for accessibility -->
<user-avatar-image :img-src="build.author.avatarUrl"/>
<user-avatar-image :img-src="build.author.avatarUrl" />
<h5 class="item-title">
<a
:href="build.url"
class="pipeline-id"
>
#{{ build.id }}
</a>
<icon
:size="16"
name="fork"
/>
<a
:href="build.branch.url"
class="ref-name"
>
{{ build.branch.name }}
</a>
<span
class="icon-branch"
v-html="iconBranch"
>
</span>
<a
:href="build.commitUrl"
class="commit-sha"
>
{{ build.shortSha }}
</a>
<a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
<icon :size="16" name="fork" />
<a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
<span class="icon-branch" v-html="iconBranch"> </span>
<a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
</h5>
<span>
<a
:href="build.url"
class="build-date"
>
{{ build.date }}
</a>
{{ s__('ByAuthor|by') }}
<a
:href="build.author.webUrl"
class="issue-author-link"
>
{{ build.author.name }}
</a>
<a :href="build.url" class="build-date"> {{ build.date }} </a> {{ s__('ByAuthor|by') }}
<a :href="build.author.webUrl" class="issue-author-link"> {{ build.author.name }} </a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime" />
</div>
<div class="item-time"><total-time :time="build.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -38,63 +38,22 @@ export default {
<limit-warning :count="items.length" />
</div>
<ul class="stage-event-list">
<li
v-for="(build, i) in items"
:key="i"
class="stage-event-item item-build-component"
>
<li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
<div class="item-details">
<h5 class="item-title">
<span
class="icon-build-status"
v-html="iconBuildStatus"
>
</span>
<a
:href="build.url"
class="item-build-name"
>
{{ build.name }}
</a>
&middot;
<a
:href="build.url"
class="pipeline-id"
>
#{{ build.id }}
</a>
<icon
:size="16"
name="fork"
/>
<a
:href="build.branch.url"
class="ref-name"
>
{{ build.branch.name }}
</a>
<span
class="icon-branch"
v-html="iconBranch"
>
</span>
<a
:href="build.commitUrl"
class="commit-sha">
{{ build.shortSha }}
</a>
<span class="icon-build-status" v-html="iconBuildStatus"> </span>
<a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
<a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
<icon :size="16" name="fork" />
<a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
<span class="icon-branch" v-html="iconBranch"> </span>
<a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
</h5>
<span>
<a
:href="build.url"
class="issue-date">
{{ build.date }}
</a>
<a :href="build.url" class="issue-date"> {{ build.date }} </a>
</span>
</div>
<div class="item-time">
<total-time :time="build.totalTime" />
</div>
<div class="item-time"><total-time :time="build.totalTime" /></div>
</li>
</ul>
</div>
......
......@@ -18,28 +18,16 @@ export default {
<span class="total-time">
<template v-if="hasData">
<template v-if="time.days">
{{ time.days }}
<span>
{{ n__('day', 'days', time.days) }}
</span>
{{ time.days }} <span> {{ n__('day', 'days', time.days) }} </span>
</template>
<template v-if="time.hours">
{{ time.hours }}
<span>
{{ n__('Time|hr', 'Time|hrs', time.hours) }}
</span>
{{ time.hours }} <span> {{ n__('Time|hr', 'Time|hrs', time.hours) }} </span>
</template>
<template v-if="time.mins && !time.days">
{{ time.mins }}
<span>
{{ n__('Time|min', 'Time|mins', time.mins) }}
</span>
{{ time.mins }} <span> {{ n__('Time|min', 'Time|mins', time.mins) }} </span>
</template>
<template v-if="time.seconds && hasData === 1 || time.seconds === 0">
{{ time.seconds }}
<span>
{{ s__('Time|s') }}
</span>
<template v-if="(time.seconds && hasData === 1) || time.seconds === 0">
{{ time.seconds }} <span> {{ s__('Time|s') }} </span>
</template>
</template>
<template v-else>
......
......@@ -43,11 +43,9 @@ export default {
:class="[{ disabled: isLoading }, btnCssClass]"
:disabled="isLoading"
class="btn"
@click="doAction">
@click="doAction"
>
<slot></slot>
<gl-loading-icon
v-if="isLoading"
:inline="true"
/>
<gl-loading-icon v-if="isLoading" :inline="true" />
</button>
</template>
......@@ -123,26 +123,10 @@ export default {
/>
<template v-else-if="hasKeys">
<div class="top-area scrolling-tabs-container inner-page-scroll-tabs">
<div class="fade-left">
<i
class="fa fa-angle-left"
aria-hidden="true"
>
</i>
</div>
<div class="fade-right">
<i
class="fa fa-angle-right"
aria-hidden="true"
>
</i>
</div>
<div class="fade-left"><i class="fa fa-angle-left" aria-hidden="true"> </i></div>
<div class="fade-right"><i class="fa fa-angle-right" aria-hidden="true"> </i></div>
<navigation-tabs
:tabs="tabs"
scope="deployKeys"
@onChangeTab="onChangeTab"
/>
<navigation-tabs :tabs="tabs" scope="deployKeys" @onChangeTab="onChangeTab" />
</div>
<keys-panel
:project-id="projectId"
......
......@@ -112,26 +112,14 @@ export default {
<template>
<div class="gl-responsive-table-row deploy-key">
<div class="table-section section-40">
<div
role="rowheader"
class="table-mobile-header">
{{ s__('DeployKeys|Deploy key') }}
</div>
<div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Deploy key') }}</div>
<div class="table-mobile-content">
<strong class="title qa-key-title">
{{ deployKey.title }}
</strong>
<div class="fingerprint qa-key-fingerprint">
{{ deployKey.fingerprint }}
</div>
<strong class="title qa-key-title"> {{ deployKey.title }} </strong>
<div class="fingerprint qa-key-fingerprint">{{ deployKey.fingerprint }}</div>
</div>
</div>
<div class="table-section section-30 section-wrap">
<div
role="rowheader"
class="table-mobile-header">
{{ s__('DeployKeys|Project usage') }}
</div>
<div role="rowheader" class="table-mobile-header">{{ s__('DeployKeys|Project usage') }}</div>
<div class="table-mobile-content deploy-project-list">
<template v-if="projects.length > 0">
<a
......@@ -139,10 +127,8 @@ export default {
:title="projectTooltipTitle(firstProject)"
class="label deploy-project-label"
>
<span>
{{ firstProject.project.full_name }}
</span>
<icon :name="firstProject.can_push ? 'lock-open' : 'lock'"/>
<span> {{ firstProject.project.full_name }} </span>
<icon :name="firstProject.can_push ? 'lock-open' : 'lock'" />
</a>
<a
v-if="isExpandable"
......@@ -162,39 +148,24 @@ export default {
:title="projectTooltipTitle(deployKeysProject)"
class="label deploy-project-label"
>
<span>
{{ deployKeysProject.project.full_name }}
</span>
<icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'"/>
<span> {{ deployKeysProject.project.full_name }} </span>
<icon :name="deployKeysProject.can_push ? 'lock-open' : 'lock'" />
</a>
</template>
<span
v-else
class="text-secondary">{{ __('None') }}</span>
<span v-else class="text-secondary">{{ __('None') }}</span>
</div>
</div>
<div class="table-section section-15 text-right">
<div
role="rowheader"
class="table-mobile-header">
{{ __('Created') }}
</div>
<div role="rowheader" class="table-mobile-header">{{ __('Created') }}</div>
<div class="table-mobile-content text-secondary key-created-at">
<span
v-tooltip
:title="tooltipTitle(deployKey.created_at)">
<icon name="calendar"/>
<span>{{ timeFormated(deployKey.created_at) }}</span>
<span v-tooltip :title="tooltipTitle(deployKey.created_at)">
<icon name="calendar" /> <span>{{ timeFormated(deployKey.created_at) }}</span>
</span>
</div>
</div>
<div class="table-section section-15 table-button-footer deploy-key-actions">
<div class="btn-group table-action-buttons">
<action-btn
v-if="!isEnabled"
:deploy-key="deployKey"
type="enable"
>
<action-btn v-if="!isEnabled" :deploy-key="deployKey" type="enable">
{{ __('Enable') }}
</action-btn>
<a
......@@ -205,7 +176,7 @@ export default {
class="btn btn-default text-secondary"
data-container="body"
>
<icon name="pencil"/>
<icon name="pencil" />
</a>
<action-btn
v-if="isRemovable"
......@@ -216,7 +187,7 @@ export default {
type="remove"
data-container="body"
>
<icon name="remove"/>
<icon name="remove" />
</action-btn>
<action-btn
v-else-if="isEnabled"
......@@ -227,7 +198,7 @@ export default {
type="disable"
data-container="body"
>
<icon name="cancel"/>
<icon name="cancel" />
</action-btn>
</div>
</div>
......
......@@ -30,24 +30,14 @@ export default {
<template>
<div class="deploy-keys-panel table-holder">
<template v-if="keys.length > 0">
<div
role="row"
class="gl-responsive-table-row table-row-header">
<div
role="rowheader"
class="table-section section-40">
<div role="row" class="gl-responsive-table-row table-row-header">
<div role="rowheader" class="table-section section-40">
{{ s__('DeployKeys|Deploy key') }}
</div>
<div
role="rowheader"
class="table-section section-30">
<div role="rowheader" class="table-section section-30">
{{ s__('DeployKeys|Project usage') }}
</div>
<div
role="rowheader"
class="table-section section-15 text-right">
{{ __('Created') }}
</div>
<div role="rowheader" class="table-section section-15 text-right">{{ __('Created') }}</div>
</div>
<deploy-key
v-for="deployKey in keys"
......@@ -58,10 +48,7 @@ export default {
:project-id="projectId"
/>
</template>
<div
v-else
class="settings-message text-center"
>
<div v-else class="settings-message text-center">
{{ s__('DeployKeys|No deploy keys found. Create one with the form above.') }}
</div>
</div>
......
......@@ -181,18 +181,8 @@ export default {
<template>
<div v-show="shouldShow">
<div
v-if="isLoading"
class="loading"
>
<gl-loading-icon />
</div>
<div
v-else
id="diffs"
:class="{ active: shouldShow }"
class="diffs tab-pane"
>
<div v-if="isLoading" class="loading"><gl-loading-icon /></div>
<div v-else id="diffs" :class="{ active: shouldShow }" class="diffs tab-pane">
<compare-versions
v-if="showCompareVersions"
:merge-request-diffs="mergeRequestDiffs"
......@@ -214,38 +204,21 @@ export default {
class="mr-version-controls"
>
<div class="content-block comments-disabled-notif clearfix">
<i class="fa fa-info-circle"></i>
{{ notAllCommentsDisplayed }}
<i class="fa fa-info-circle"></i> {{ notAllCommentsDisplayed }}
<div class="pull-right">
<a
:href="latestVersionPath"
class="btn btn-sm"
>
{{ showLatestVersion }}
</a>
<a :href="latestVersionPath" class="btn btn-sm"> {{ showLatestVersion }} </a>
</div>
</div>
</div>
<commit-widget
v-if="commit"
:commit="commit"
/>
<commit-widget v-if="commit" :commit="commit" />
<div
:data-can-create-note="getNoteableData.current_user.can_create_note"
class="files d-flex prepend-top-default"
>
<div
v-show="showTreeList"
class="diff-tree-list"
>
<tree-list />
</div>
<div
v-if="diffFiles.length > 0"
class="diff-files-holder"
>
<div v-show="showTreeList" class="diff-tree-list"><tree-list /></div>
<div v-if="diffFiles.length > 0" class="diff-files-holder">
<diff-file
v-for="file in diffFiles"
:key="file.newPath"
......
......@@ -73,10 +73,7 @@ export default {
v-html="commit.title_html"
></a>
<span class="commit-row-message d-block d-sm-none">
&middot;
{{ commit.short_id }}
</span>
<span class="commit-row-message d-block d-sm-none"> &middot; {{ commit.short_id }} </span>
<button
v-if="commit.description_html"
......@@ -84,21 +81,12 @@ export default {
type="button"
:aria-label="__('Toggle commit description')"
>
<icon
:size="12"
name="ellipsis_h"
/>
<icon :size="12" name="ellipsis_h" />
</button>
<div class="commiter">
<a
:href="authorUrl"
v-text="authorName"
></a>
{{ s__('CommitWidget|authored') }}
<time-ago-tooltip
:time="commit.authored_date"
/>
<a :href="authorUrl" v-text="authorName"></a> {{ s__('CommitWidget|authored') }}
<time-ago-tooltip :time="commit.authored_date" />
</div>
<pre
......@@ -108,19 +96,13 @@ export default {
></pre>
</div>
<div class="commit-actions flex-row d-none d-sm-flex">
<div
v-if="commit.signature_html"
v-html="commit.signature_html"
></div>
<div v-if="commit.signature_html" v-html="commit.signature_html"></div>
<commit-pipeline-status
v-if="commit.pipeline_status_path"
:endpoint="commit.pipeline_status_path"
/>
<div class="commit-sha-group">
<div
class="label label-monospace"
v-text="commit.short_id"
></div>
<div class="label label-monospace" v-text="commit.short_id"></div>
<clipboard-button
:text="commit.id"
:title="__('Copy commit SHA to clipboard')"
......
......@@ -31,9 +31,7 @@ export default {
<div class="info-well prepend-top-default">
<div class="well-segment">
<ul class="blob-commit-info">
<commit-item
:commit="commit"
/>
<commit-item :commit="commit" />
</ul>
</div>
</div>
......
......@@ -73,27 +73,20 @@ export default {
<template>
<div class="mr-version-controls">
<div
class="mr-version-menus-container content-block"
>
<div class="mr-version-menus-container content-block">
<button
v-tooltip.hover
type="button"
class="btn btn-default append-right-8 js-toggle-tree-list"
:class="{
active: showTreeList
active: showTreeList,
}"
:title="__('Toggle file browser')"
@click="toggleShowTreeList"
>
<icon
name="hamburger"
/>
<icon name="hamburger" />
</button>
<div
v-if="showDropdowns"
class="d-flex align-items-center compare-versions-container"
>
<div v-if="showDropdowns" class="d-flex align-items-center compare-versions-container">
Changes between
<compare-versions-dropdown
:other-versions="mergeRequestDiffs"
......@@ -109,20 +102,11 @@ export default {
class="mr-version-compare-dropdown"
/>
</div>
<div
class="inline-parallel-buttons d-none d-md-flex ml-auto"
>
<a
v-show="hasCollapsedFile"
class="btn btn-default append-right-8"
@click="expandAllFiles"
>
<div class="inline-parallel-buttons d-none d-md-flex ml-auto">
<a v-show="hasCollapsedFile" class="btn btn-default append-right-8" @click="expandAllFiles">
{{ __('Expand all') }}
</a>
<a
:href="toggleWhitespacePath"
class="btn btn-default qa-toggle-whitespace"
>
<a :href="toggleWhitespacePath" class="btn btn-default qa-toggle-whitespace">
{{ toggleWhitespaceText }}
</a>
<div class="btn-group prepend-left-8">
......
......@@ -112,26 +112,14 @@ export default {
data-toggle="dropdown"
aria-expanded="false"
>
<span>
{{ selectedVersionName }}
</span>
<icon
:size="12"
name="angle-down"
class="position-absolute"
/>
<span> {{ selectedVersionName }} </span>
<icon :size="12" name="angle-down" class="position-absolute" />
</a>
<div class="dropdown-menu dropdown-select dropdown-menu-selectable">
<div class="dropdown-content">
<ul>
<li
v-for="version in targetVersions"
:key="version.id"
>
<a
:class="{ 'is-active': isActive(version) }"
:href="href(version)"
>
<li v-for="version in targetVersions" :key="version.id">
<a :class="{ 'is-active': isActive(version) }" :href="href(version)">
<div>
<strong>
{{ versionName(version) }}
......@@ -141,9 +129,7 @@ export default {
</strong>
</div>
<div>
<small class="commit-sha">
{{ version.truncated_commit_sha }}
</small>
<small class="commit-sha"> {{ version.truncated_commit_sha }} </small>
</div>
<div>
<small>
......
......@@ -97,10 +97,7 @@ export default {
:file-hash="diffFile.file_hash"
:can-comment="getNoteableData.current_user.can_create_note"
/>
<div
v-if="showNotesContainer"
class="note-container"
>
<div v-if="showNotesContainer" class="note-container">
<diff-discussions
v-if="diffFile.discussions.length"
class="diff-file-discussions"
......@@ -115,8 +112,8 @@ export default {
:save-button-title="__('Comment')"
class="diff-comment-form new-note discussion-form discussion-form-container"
@handleFormUpdate="handleSaveNote"
@cancelForm="closeDiffFileCommentForm(diffFile.file_hash)"
/>
@cancelForm="closeDiffFileCommentForm(diffFile.file_hash);"
/>
</div>
</diff-viewer>
</div>
......
......@@ -45,29 +45,22 @@ export default {
v-for="(discussion, index) in discussions"
:key="discussion.id"
:class="{
collapsed: !isExpanded(discussion)
collapsed: !isExpanded(discussion),
}"
class="discussion-notes diff-discussions position-relative"
>
<ul
:data-discussion-id="discussion.id"
class="notes"
>
<ul :data-discussion-id="discussion.id" class="notes">
<template v-if="shouldCollapseDiscussions">
<button
:class="{
'diff-notes-collapse': discussion.expanded,
'btn-transparent badge badge-pill': !discussion.expanded
'btn-transparent badge badge-pill': !discussion.expanded,
}"
type="button"
class="js-diff-notes-toggle"
@click="toggleDiscussion({ discussionId: discussion.id })"
@click="toggleDiscussion({ discussionId: discussion.id });"
>
<icon
v-if="discussion.expanded"
name="collapse"
class="collapse-icon"
/>
<icon v-if="discussion.expanded" name="collapse" class="collapse-icon" />
<template v-else>
{{ index + 1 }}
</template>
......@@ -81,11 +74,7 @@ export default {
:discussions-by-diff-order="true"
@noteDeleted="deleteNoteHandler"
>
<span
v-if="renderAvatarBadge"
slot="avatar-badge"
class="badge badge-pill"
>
<span v-if="renderAvatarBadge" slot="avatar-badge" class="badge badge-pill">
{{ index + 1 }}
</span>
</noteable-discussion>
......
......@@ -119,7 +119,7 @@ export default {
<div
:id="file.file_hash"
:class="{
'is-active': currentDiffFileId === file.file_hash
'is-active': currentDiffFileId === file.file_hash,
}"
class="diff-file file-holder"
>
......@@ -134,13 +134,11 @@ export default {
@showForkMessage="showForkMessage"
/>
<div
v-if="forkMessageVisible"
class="js-file-fork-suggestion-section file-fork-suggestion">
<div v-if="forkMessageVisible" class="js-file-fork-suggestion-section file-fork-suggestion">
<span class="file-fork-suggestion-note">
You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span>
files in this project directly. Please fork this project,
make your changes there, and submit a merge request.
You're not allowed to <span class="js-file-fork-suggestion-section-action">edit</span> files
in this project directly. Please fork this project, make your changes there, and submit a
merge request.
</span>
<a
:href="file.fork_path"
......@@ -162,27 +160,14 @@ export default {
:class="{ hidden: isCollapsed || file.too_large }"
:diff-file="file"
/>
<gl-loading-icon
v-if="showLoadingIcon"
class="diff-content loading"
/>
<div
v-else-if="showExpandMessage"
class="nothing-here-block diff-collapsed"
>
<gl-loading-icon v-if="showLoadingIcon" class="diff-content loading" />
<div v-else-if="showExpandMessage" class="nothing-here-block diff-collapsed">
{{ __('This diff is collapsed.') }}
<a
class="click-to-expand js-click-to-expand"
href="#"
@click.prevent="handleToggle"
>
<a class="click-to-expand js-click-to-expand" href="#" @click.prevent="handleToggle">
{{ __('Click to expand it.') }}
</a>
</div>
<div
v-if="file.too_large"
class="nothing-here-block diff-collapsed js-too-large-diff"
>
<div v-if="file.too_large" class="nothing-here-block diff-collapsed js-too-large-diff">
{{ __('This source diff could not be displayed because it is too large.') }}
<span v-html="viewBlobLink"></span>
</div>
......
......@@ -141,7 +141,7 @@ export default {
<div
ref="header"
class="js-file-title file-title file-title-flex-parent"
@click="handleToggleFile($event, true)"
@click="handleToggleFile($event, true);"
>
<div class="file-header-content">
<icon
......@@ -152,12 +152,7 @@ export default {
class="diff-toggle-caret append-right-5"
@click.stop="handleToggle"
/>
<a
v-once
ref="titleWrapper"
:href="titleLink"
class="append-right-4 js-title-wrapper"
>
<a v-once ref="titleWrapper" :href="titleLink" class="append-right-4 js-title-wrapper">
<file-icon
:file-name="filePath"
:size="18"
......@@ -182,13 +177,7 @@ export default {
></strong>
</span>
<strong
v-else
v-tooltip
:title="filePath"
class="file-title-name"
data-container="body"
>
<strong v-else v-tooltip :title="filePath" class="file-title-name" data-container="body">
{{ filePath }}
</strong>
</a>
......@@ -200,28 +189,18 @@ export default {
css-class="btn-default btn-transparent btn-clipboard"
/>
<small
v-if="diffFile.mode_changed"
ref="fileMode"
>
<small v-if="diffFile.mode_changed" ref="fileMode">
{{ diffFile.a_mode }}{{ diffFile.b_mode }}
</small>
<span
v-if="isUsingLfs"
class="label label-lfs append-right-5"
>
{{ __('LFS') }}
</span>
<span v-if="isUsingLfs" class="label label-lfs append-right-5"> {{ __('LFS') }} </span>
</div>
<div
v-if="!diffFile.submodule && addMergeRequestButtons"
class="file-actions d-none d-sm-block"
>
<template
v-if="diffFile.blob && diffFile.blob.readable_text"
>
<template v-if="diffFile.blob && diffFile.blob.readable_text">
<button
:disabled="!diffHasDiscussions(diffFile)"
:class="{ active: hasExpandedDiscussions }"
......@@ -249,11 +228,7 @@ export default {
v-html="viewReplacedFileButtonText"
>
</a>
<a
:href="diffFile.view_path"
class="btn view-file js-view-file"
v-html="viewFileButtonText"
>
<a :href="diffFile.view_path" class="btn view-file js-view-file" v-html="viewFileButtonText">
</a>
<a
......
......@@ -75,10 +75,7 @@ export default {
class="diff-notes-collapse js-diff-comment-avatar js-diff-comment-button"
@click="toggleDiscussions"
>
<icon
:size="12"
name="collapse"
/>
<icon :size="12" name="collapse" />
</button>
<template v-else>
<user-avatar-image
......@@ -99,7 +96,8 @@ export default {
data-placement="top"
role="button"
@click="toggleDiscussions"
>+{{ moreCount }}</span>
>+{{ moreCount }}</span
>
</template>
</div>
</template>
......@@ -155,15 +155,10 @@ export default {
<template>
<div>
<span
v-if="isMatchLine"
class="context-cell"
role="button"
@click="handleLoadMoreLines"
>...</span>
<template
v-else
<span v-if="isMatchLine" class="context-cell" role="button" @click="handleLoadMoreLines"
>...</span
>
<template v-else>
<button
v-if="shouldShowCommentButton"
type="button"
......@@ -171,21 +166,10 @@ export default {
title="Add a comment to this line"
@click="handleCommentButton"
>
<icon
:size="12"
name="comment"
/>
<icon :size="12" name="comment" />
</button>
<a
v-if="lineNumber"
:data-linenumber="lineNumber"
:href="lineHref"
>
</a>
<diff-gutter-avatars
v-if="shouldShowAvatarsOnGutter"
:discussions="line.discussions"
/>
<a v-if="lineNumber" :data-linenumber="lineNumber" :href="lineHref"> </a>
<diff-gutter-avatars v-if="shouldShowAvatarsOnGutter" :discussions="line.discussions" />
</template>
</div>
</template>
......@@ -89,9 +89,7 @@ export default {
</script>
<template>
<div
class="content discussion-form discussion-form-container discussion-notes"
>
<div class="content discussion-form discussion-form-container discussion-notes">
<note-form
ref="noteForm"
:is-editing="true"
......
......@@ -103,9 +103,7 @@ export default {
</script>
<template>
<td
:class="classNameMap"
>
<td :class="classNameMap">
<diff-line-gutter-content
:line="line"
:file-hash="fileHash"
......
......@@ -32,11 +32,5 @@ export default {
</script>
<template>
<a
:href="editPath"
class="btn btn-default js-edit-blob"
@click="handleEditClick"
>
Edit
</a>
<a :href="editPath" class="btn btn-default js-edit-blob" @click="handleEditClick"> Edit </a>
</template>
......@@ -10,16 +10,9 @@ export default {
</script>
<template>
<span
v-once
class="file-row-stats"
>
<span class="cgreen">
+{{ file.addedLines }}
</span>
<span class="cred">
-{{ file.removedLines }}
</span>
<span v-once class="file-row-stats">
<span class="cgreen"> +{{ file.addedLines }} </span>
<span class="cred"> -{{ file.removedLines }} </span>
</span>
</template>
......
......@@ -26,26 +26,13 @@ export default {
<h4>
{{ __('Too many changes to show.') }}
<div class="pull-right">
<a
:href="plainDiffPath"
class="btn btn-sm"
>
{{ __('Plain diff') }}
</a>
<a
:href="emailPatchPath"
class="btn btn-sm"
>
{{ __('Email patch') }}
</a>
<a :href="plainDiffPath" class="btn btn-sm"> {{ __('Plain diff') }} </a>
<a :href="emailPatchPath" class="btn btn-sm"> {{ __('Email patch') }} </a>
</div>
</h4>
<p>
To preserve performance only
<strong>
{{ visible }} of {{ total }}
</strong>
files are displayed.
To preserve performance only <strong> {{ visible }} of {{ total }} </strong> files are
displayed.
</p>
</div>
</template>
......@@ -97,11 +97,9 @@ export default {
v-if="canComment"
type="button"
class="btn-transparent position-absolute image-diff-overlay-add-comment w-100 h-100 js-add-image-diff-note-button"
@click="clickedImage($event.offsetX, $event.offsetY)"
@click="clickedImage($event.offsetX, $event.offsetY);"
>
<span class="sr-only">
{{ __('Add image comment') }}
</span>
<span class="sr-only"> {{ __('Add image comment') }} </span>
</button>
<button
v-for="(discussion, index) in allDiscussions"
......@@ -111,12 +109,9 @@ export default {
:disabled="!shouldToggleDiscussion"
class="js-image-badge"
type="button"
@click="toggleDiscussion({ discussionId: discussion.id })"
@click="toggleDiscussion({ discussionId: discussion.id });"
>
<icon
v-if="showCommentIcon"
name="image-comment-dark"
/>
<icon v-if="showCommentIcon" name="image-comment-dark" />
<template v-else>
{{ index + 1 }}
</template>
......@@ -125,15 +120,13 @@ export default {
v-if="currentCommentForm"
:style="{
left: `${currentCommentForm.x}px`,
top: `${currentCommentForm.y}px`
top: `${currentCommentForm.y}px`,
}"
:aria-label="__('Comment form position')"
class="btn-transparent comment-indicator"
type="button"
>
<icon
name="image-comment-dark"
/>
<icon name="image-comment-dark" />
</button>
</div>
</template>
......@@ -34,19 +34,10 @@ export default {
</script>
<template>
<tr
:class="className"
class="notes_holder"
>
<td
class="notes_content"
colspan="3"
>
<tr :class="className" class="notes_holder">
<td class="notes_content" colspan="3">
<div class="content">
<diff-discussions
v-if="line.discussions.length"
:discussions="line.discussions"
/>
<diff-discussions v-if="line.discussions.length" :discussions="line.discussions" />
<diff-line-note-form
v-if="diffLineCommentForms[line.line_code]"
:diff-file-hash="diffFileHash"
......
......@@ -102,11 +102,6 @@ export default {
:is-hover="isHover"
class="diff-line-num new_line qa-new-diff-line"
/>
<td
:class="line.type"
class="line_content"
v-html="line.rich_text"
>
</td>
<td :class="line.type" class="line_content" v-html="line.rich_text"></td>
</tr>
</template>
......@@ -40,11 +40,10 @@ export default {
<table
:class="userColorScheme"
:data-commit-id="commitId"
class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view">
class="code diff-wrap-lines js-syntax-highlight text-file js-diff-inline-view"
>
<tbody>
<template
v-for="(line, index) in diffLines"
>
<template v-for="(line, index) in diffLines">
<inline-diff-table-row
:key="line.line_code"
:file-hash="diffFile.file_hash"
......
......@@ -19,29 +19,16 @@ export default {
</script>
<template>
<div
class="row empty-state nothing-here-block"
>
<div class="row empty-state nothing-here-block">
<div class="col-xs-12">
<div class="svg-content">
<span
v-html="emptyImage"
></span>
</div>
<div class="svg-content"><span v-html="emptyImage"></span></div>
</div>
<div class="col-xs-12">
<div class="text-content text-center">
No changes between
<span class="ref-name">{{ sourceBranch }}</span>
and
No changes between <span class="ref-name">{{ sourceBranch }}</span> and
<span class="ref-name">{{ targetBranch }}</span>
<div class="text-center">
<a
:href="newBlobPath"
class="btn btn-success"
>
{{ __('Create commit') }}
</a>
<a :href="newBlobPath" class="btn btn-success"> {{ __('Create commit') }} </a>
</div>
</div>
</div>
......
......@@ -72,17 +72,9 @@ export default {
</script>
<template>
<tr
:class="className"
class="notes_holder"
>
<td
class="notes_content parallel old"
colspan="2">
<div
v-if="shouldRenderDiscussionsOnLeft"
class="content"
>
<tr :class="className" class="notes_holder">
<td class="notes_content parallel old" colspan="2">
<div v-if="shouldRenderDiscussionsOnLeft" class="content">
<diff-discussions
v-if="line.left.discussions.length"
:discussions="line.left.discussions"
......@@ -96,13 +88,8 @@ export default {
line-position="left"
/>
</td>
<td
class="notes_content parallel new"
colspan="2">
<div
v-if="shouldRenderDiscussionsOnRight"
class="content"
>
<td class="notes_content parallel new" colspan="2">
<div v-if="shouldRenderDiscussionsOnRight" class="content">
<diff-discussions
v-if="line.right.discussions.length"
:discussions="line.right.discussions"
......
......@@ -125,8 +125,7 @@ export default {
class="line_content parallel left-side"
@mousedown.native="handleParallelLineMouseDown"
v-html="line.left.rich_text"
>
</td>
></td>
</template>
<template v-else>
<td class="diff-line-num old_line empty-cell"></td>
......@@ -151,8 +150,7 @@ export default {
class="line_content parallel right-side"
@mousedown.native="handleParallelLineMouseDown"
v-html="line.right.rich_text"
>
</td>
></td>
</template>
<template v-else>
<td class="diff-line-num old_line empty-cell"></td>
......
......@@ -44,9 +44,7 @@ export default {
>
<table>
<tbody>
<template
v-for="(line, index) in diffLines"
>
<template v-for="(line, index) in diffLines">
<parallel-diff-table-row
:key="index"
:file-hash="diffFile.file_hash"
......
......@@ -72,16 +72,13 @@ export default {
<div class="tree-list-holder d-flex flex-column">
<div class="append-bottom-8 position-relative tree-list-search d-flex">
<div class="flex-fill d-flex">
<icon
name="search"
class="position-absolute tree-list-icon"
/>
<icon name="search" class="position-absolute tree-list-icon" />
<input
v-model="search"
:placeholder="s__('MergeRequest|Filter files')"
type="search"
class="form-control"
@focus="toggleFocusSearch(true)"
@focus="toggleFocusSearch(true);"
@blur="blurSearch"
/>
<button
......@@ -91,50 +88,39 @@ export default {
class="position-absolute bg-transparent tree-list-icon tree-list-clear-icon border-0 p-0"
@click="clearSearch"
>
<icon
name="close"
/>
<icon name="close" />
</button>
</div>
<div
v-show="!focusSearch"
class="btn-group prepend-left-8 tree-list-view-toggle"
>
<div v-show="!focusSearch" class="btn-group prepend-left-8 tree-list-view-toggle">
<button
v-gl-tooltip.hover
:aria-label="__('List view')"
:title="__('List view')"
:class="{
active: !renderTreeList
active: !renderTreeList,
}"
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
type="button"
@click="toggleRenderTreeList(false)"
@click="toggleRenderTreeList(false);"
>
<icon
name="hamburger"
/>
<icon name="hamburger" />
</button>
<button
v-gl-tooltip.hover
:aria-label="__('Tree view')"
:title="__('Tree view')"
:class="{
active: renderTreeList
active: renderTreeList,
}"
class="btn btn-default pt-0 pb-0 d-flex align-items-center"
type="button"
@click="toggleRenderTreeList(true)"
@click="toggleRenderTreeList(true);"
>
<icon
name="file-tree"
/>
<icon name="file-tree" />
</button>
</div>
</div>
<div
class="tree-list-scroll"
>
<div class="tree-list-scroll">
<template v-if="filteredTreeList.length">
<file-row
v-for="file in filteredTreeList"
......@@ -150,25 +136,15 @@ export default {
@clickFile="scrollToFile"
/>
</template>
<p
v-else
class="prepend-top-20 append-bottom-20 text-center"
>
<p v-else class="prepend-top-20 append-bottom-20 text-center">
{{ s__('MergeRequest|No files found') }}
</p>
</div>
<div
v-once
class="pt-3 pb-3 text-center"
>
<div v-once class="pt-3 pb-3 text-center">
{{ n__('%d changed file', '%d changed files', diffFilesLength) }}
<div>
<span class="cgreen">
{{ n__('%d addition', '%d additions', addedLines) }}
</span>
<span class="cred">
{{ n__('%d deleted', '%d deletions', removedLines) }}
</span>
<span class="cgreen"> {{ n__('%d addition', '%d additions', addedLines) }} </span>
<span class="cred"> {{ n__('%d deleted', '%d deletions', removedLines) }} </span>
</div>
</div>
</div>
......
......@@ -41,12 +41,14 @@ export const assignDiscussionsToDiff = (
) => {
const diffPositionByLineCode = getDiffPositionByLineCode(state.diffFiles);
discussions.filter(discussion => discussion.diff_discussion).forEach(discussion => {
commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
discussion,
diffPositionByLineCode,
discussions
.filter(discussion => discussion.diff_discussion)
.forEach(discussion => {
commit(types.SET_LINE_DISCUSSIONS_FOR_FILE, {
discussion,
diffPositionByLineCode,
});
});
});
};
export const removeDiscussionsFromDiff = ({ commit }, removeDiscussion) => {
......
......@@ -41,7 +41,6 @@ export default {
<template>
<div class="environments-container">
<gl-loading-icon
v-if="isLoading"
:size="3"
......@@ -51,10 +50,7 @@ export default {
<slot name="emptyState"></slot>
<div
v-if="!isLoading && environments.length > 0"
class="table-holder">
<div v-if="!isLoading && environments.length > 0" class="table-holder">
<environment-table
:environments="environments"
:can-create-deployment="canCreateDeployment"
......
......@@ -24,11 +24,11 @@ export default {
{{ s__("Environments|You don't have any environments right now") }}
</h4>
<p class="blank-state-text">
{{ s__(`Environments|Environments are places where
code gets deployed, such as staging or production.`) }}
<a :href="helpPath">
{{ s__("Environments|Read more about environments") }}
</a>
{{
s__(`Environments|Environments are places where
code gets deployed, such as staging or production.`)
}}
<a :href="helpPath"> {{ s__('Environments|Read more about environments') }} </a>
</p>
<div class="text-center">
......@@ -37,7 +37,7 @@ export default {
:href="newPath"
class="btn btn-success js-new-environment-button"
>
{{ s__("Environments|New environment") }}
{{ s__('Environments|New environment') }}
</a>
</div>
</div>
......
......@@ -68,9 +68,7 @@ export default {
};
</script>
<template>
<div
class="btn-group"
role="group">
<div class="btn-group" role="group">
<button
v-tooltip
:title="title"
......@@ -82,34 +80,23 @@ export default {
data-toggle="dropdown"
>
<span>
<icon name="play" />
<icon
name="chevron-down"
/>
<icon name="play" /> <icon name="chevron-down" />
<gl-loading-icon v-if="isLoading" />
</span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li
v-for="(action, i) in actions"
:key="i">
<li v-for="(action, i) in actions" :key="i">
<button
:class="{ disabled: isActionDisabled(action) }"
:disabled="isActionDisabled(action)"
type="button"
class="js-manual-action-link no-btn btn d-flex align-items-center"
@click="onClickAction(action)"
@click="onClickAction(action);"
>
<span class="flex-fill">
{{ action.name }}
</span>
<span
v-if="action.scheduledAt"
class="text-secondary"
>
<icon name="clock" />
{{ remainingTime(action) }}
<span class="flex-fill"> {{ action.name }} </span>
<span v-if="action.scheduledAt" class="text-secondary">
<icon name="clock" /> {{ remainingTime(action) }}
</span>
</button>
</li>
......
......@@ -460,68 +460,36 @@ export default {
'folder-row': model.isFolder,
}"
class="gl-responsive-table-row"
role="row">
role="row"
>
<div
v-gl-tooltip
:title="model.name"
class="table-section section-wrap section-15 text-truncate"
role="gridcell"
>
<div
v-if="!model.isFolder"
class="table-mobile-header"
role="rowheader"
>
{{ s__("Environments|Environment") }}
<div v-if="!model.isFolder" class="table-mobile-header" role="rowheader">
{{ s__('Environments|Environment') }}
</div>
<span
v-if="model.hasDeployBoard"
class="deploy-board-icon"
@click="toggleDeployBoard"
>
<span v-if="model.hasDeployBoard" class="deploy-board-icon" @click="toggleDeployBoard">
<icon :name="deployIconName" />
</span>
<span
v-if="!model.isFolder"
class="environment-name table-mobile-content">
<a
class="qa-environment-link"
:href="environmentPath"
>
{{ model.name }}
</a>
<span
v-if="isProtected"
class="badge badge-success"
>
{{ s__("Environments|protected") }}
<span v-if="!model.isFolder" class="environment-name table-mobile-content">
<a class="qa-environment-link" :href="environmentPath"> {{ model.name }} </a>
<span v-if="isProtected" class="badge badge-success">
{{ s__('Environments|protected') }}
</span>
</span>
<span
v-else
class="folder-name"
role="button"
@click="onClickFolder">
<icon
:name="folderIconName"
class="folder-icon"
/>
<span v-else class="folder-name" role="button" @click="onClickFolder">
<icon :name="folderIconName" class="folder-icon" />
<icon
name="folder"
class="folder-icon"
/>
<icon name="folder" class="folder-icon" />
<span>
{{ model.folderName }}
</span>
<span> {{ model.folderName }} </span>
<span class="badge badge-pill">
{{ model.size }}
</span>
<span class="badge badge-pill"> {{ model.size }} </span>
</span>
</div>
......@@ -529,9 +497,7 @@ export default {
class="table-section section-10 deployment-column d-none d-sm-none d-md-block"
role="gridcell"
>
<span v-if="shouldRenderDeploymentID">
{{ deploymentInternalId }}
</span>
<span v-if="shouldRenderDeploymentID"> {{ deploymentInternalId }} </span>
<span v-if="!model.isFolder && deploymentHasUser">
by
......@@ -545,61 +511,32 @@ export default {
</span>
</div>
<div
class="table-section section-15 d-none d-sm-none d-md-block"
role="gridcell"
>
<a
v-if="shouldRenderBuildName"
:href="buildPath"
class="build-link flex-truncate-parent"
>
<div class="table-section section-15 d-none d-sm-none d-md-block" role="gridcell">
<a v-if="shouldRenderBuildName" :href="buildPath" class="build-link flex-truncate-parent">
<span class="flex-truncate-child">{{ buildName }}</span>
</a>
</div>
<div
v-if="!model.isFolder"
class="table-section section-20"
role="gridcell"
>
<div
role="rowheader"
class="table-mobile-header"
>
{{ s__("Environments|Commit") }}
</div>
<div
v-if="hasLastDeploymentKey"
class="js-commit-component table-mobile-content">
<div v-if="!model.isFolder" class="table-section section-20" role="gridcell">
<div role="rowheader" class="table-mobile-header">{{ s__('Environments|Commit') }}</div>
<div v-if="hasLastDeploymentKey" class="js-commit-component table-mobile-content">
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
:commit-url="commitUrl"
:short-sha="commitShortSha"
:title="commitTitle"
:author="commitAuthor"/>
:author="commitAuthor"
/>
</div>
<div
v-if="!hasLastDeploymentKey"
class="commit-title table-mobile-content">
{{ s__("Environments|No deployments yet") }}
<div v-if="!hasLastDeploymentKey" class="commit-title table-mobile-content">
{{ s__('Environments|No deployments yet') }}
</div>
</div>
<div
v-if="!model.isFolder"
class="table-section section-10"
role="gridcell"
>
<div
role="rowheader"
class="table-mobile-header">
{{ s__("Environments|Updated") }}
</div>
<span
v-if="canShowDate"
class="environment-created-date-timeago table-mobile-content">
<div v-if="!model.isFolder" class="table-section section-10" role="gridcell">
<div role="rowheader" class="table-mobile-header">{{ s__('Environments|Updated') }}</div>
<span v-if="canShowDate" class="environment-created-date-timeago table-mobile-content">
{{ createdDate }}
</span>
</div>
......@@ -607,12 +544,9 @@ export default {
<div
v-if="!model.isFolder && displayEnvironmentActions"
class="table-section section-30 table-button-footer"
role="gridcell">
<div
class="btn-group table-action-buttons"
role="group">
role="gridcell"
>
<div class="btn-group table-action-buttons" role="group">
<external-url-component
v-if="externalURL && canReadEnvironment"
:external-url="externalURL"
......@@ -623,10 +557,7 @@ export default {
:monitoring-url="monitoringUrl"
/>
<actions-component
v-if="actions.length > 0"
:actions="actions"
/>
<actions-component v-if="actions.length > 0" :actions="actions" />
<terminal-button-component
v-if="model && model.terminal_path"
......@@ -639,10 +570,7 @@ export default {
:retry-url="retryUrl"
/>
<stop-component
v-if="canStopEnvironment"
:environment="model"
/>
<stop-component v-if="canStopEnvironment" :environment="model" />
</div>
</div>
</div>
......
......@@ -61,14 +61,7 @@ export default {
class="btn d-none d-sm-none d-md-block"
@click="onClick"
>
<icon
v-if="isLastDeployment"
name="repeat"
/>
<icon
v-else
name="redo"
/>
<icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
<gl-loading-icon v-if="isLoading" />
</button>
</template>
......@@ -65,6 +65,6 @@ export default {
data-target="#stop-environment-modal"
@click="onClick"
>
<icon name="stop"/>
<icon name="stop" />
</loading-button>
</template>
......@@ -103,21 +103,11 @@ export default {
<stop-environment-modal :environment="environmentInStopModal" />
<div class="top-area">
<tabs
:tabs="tabs"
scope="environments"
@onChangeTab="onChangeTab"
/>
<tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
<div
v-if="canCreateEnvironment && !isLoading"
class="nav-controls"
>
<a
:href="newEnvironmentPath"
class="btn btn-success"
>
{{ s__("Environments|New environment") }}
<div v-if="canCreateEnvironment && !isLoading" class="nav-controls">
<a :href="newEnvironmentPath" class="btn btn-success">
{{ s__('Environments|New environment') }}
</a>
</div>
</div>
......
......@@ -44,48 +44,25 @@ export default {
};
</script>
<template>
<div
class="ci-table"
role="grid"
>
<div
class="gl-responsive-table-row table-row-header"
role="row"
>
<div
class="table-section section-15 environments-name"
role="columnheader"
>
{{ s__("Environments|Environment") }}
<div class="ci-table" role="grid">
<div class="gl-responsive-table-row table-row-header" role="row">
<div class="table-section section-15 environments-name" role="columnheader">
{{ s__('Environments|Environment') }}
</div>
<div
class="table-section section-10 environments-deploy"
role="columnheader"
>
{{ s__("Environments|Deployment") }}
<div class="table-section section-10 environments-deploy" role="columnheader">
{{ s__('Environments|Deployment') }}
</div>
<div
class="table-section section-15 environments-build"
role="columnheader"
>
{{ s__("Environments|Job") }}
<div class="table-section section-15 environments-build" role="columnheader">
{{ s__('Environments|Job') }}
</div>
<div
class="table-section section-20 environments-commit"
role="columnheader"
>
{{ s__("Environments|Commit") }}
<div class="table-section section-20 environments-commit" role="columnheader">
{{ s__('Environments|Commit') }}
</div>
<div
class="table-section section-10 environments-date"
role="columnheader"
>
{{ s__("Environments|Updated") }}
<div class="table-section section-10 environments-date" role="columnheader">
{{ s__('Environments|Updated') }}
</div>
</div>
<template
v-for="(model, i) in environments"
:model="model">
<template v-for="(model, i) in environments" :model="model">
<div
is="environment-item"
:key="`environment-item-${i}`"
......@@ -109,12 +86,8 @@ export default {
</div>
</div>
<template
v-if="shouldRenderFolderContent(model)"
>
<div
v-if="model.isLoadingFolderContent"
:key="`loading-item-${i}`">
<template v-if="shouldRenderFolderContent(model)">
<div v-if="model.isLoadingFolderContent" :key="`loading-item-${i}`">
<gl-loading-icon :size="2" />
</div>
......@@ -130,11 +103,8 @@ export default {
<div :key="`sub-div-${i}`">
<div class="text-center prepend-top-10">
<a
:href="folderUrl(model)"
class="btn btn-default"
>
{{ s__("Environments|Show all") }}
<a :href="folderUrl(model)" class="btn btn-default">
{{ s__('Environments|Show all') }}
</a>
</div>
</div>
......
......@@ -62,31 +62,25 @@ export default {
@submit="onSubmit"
>
<template slot="header">
<h4
class="modal-title d-flex mw-100"
>
<h4 class="modal-title d-flex mw-100">
Stopping
<span
v-gl-tooltip
:title="environment.name"
class="text-truncate ml-1 mr-1 flex-fill"
>{{ environment.name }}</span>
<span v-gl-tooltip :title="environment.name" class="text-truncate ml-1 mr-1 flex-fill">{{
environment.name
}}</span>
?
</h4>
</template>
<p>{{ s__('Environments|Are you sure you want to stop this environment?') }}</p>
<div
v-if="!environment.has_stop_action"
class="warning_message"
>
<div v-if="!environment.has_stop_action" class="warning_message">
<p v-html="noStopActionMessage"></p>
<a
href="https://docs.gitlab.com/ee/ci/environments.html#stopping-an-environment"
target="_blank"
rel="noopener noreferrer"
>{{ s__('Environments|Learn more about stopping environments') }}</a>
>{{ s__('Environments|Learn more about stopping environments') }}</a
>
</div>
</gl-modal>
</template>
......@@ -43,20 +43,12 @@ export default {
<div :class="cssContainerClass">
<stop-environment-modal :environment="environmentInStopModal" />
<div
v-if="!isLoading"
class="top-area"
>
<div v-if="!isLoading" class="top-area">
<h4 class="js-folder-name environments-folder-name">
{{ s__("Environments|Environments") }} / <b>{{ folderName }}</b>
{{ s__('Environments|Environments') }} / <b>{{ folderName }}</b>
</h4>
<tabs
:tabs="tabs"
scope="environments"
@onChangeTab="onChangeTab"
/>
<tabs :tabs="tabs" scope="environments" @onChangeTab="onChangeTab" />
</div>
<container
......
......@@ -58,20 +58,16 @@ export default {
</script>
<template>
<div>
<div
v-if="!isLocalStorageAvailable"
class="dropdown-info-note">
<div v-if="!isLocalStorageAvailable" class="dropdown-info-note">
This feature requires local storage to be enabled
</div>
<ul v-else-if="hasItems">
<li
v-for="(item, index) in processedItems"
:key="`processed-items-${index}`"
>
<li v-for="(item, index) in processedItems" :key="`processed-items-${index}`">
<button
type="button"
class="filtered-search-history-dropdown-item"
@click="onItemActivated(item.text)">
@click="onItemActivated(item.text);"
>
<span>
<span
v-for="(token, tokenIndex) in item.tokens"
......@@ -92,15 +88,12 @@ export default {
<button
type="button"
class="filtered-search-history-clear-button"
@click="onRequestClearRecentSearches($event)">
@click="onRequestClearRecentSearches($event);"
>
Clear recent searches
</button>
</li>
</ul>
<div
v-else
class="dropdown-info-note">
You don't have any recent searches
</div>
<div v-else class="dropdown-info-note">You don't have any recent searches</div>
</div>
</template>
......@@ -95,19 +95,14 @@ export default {
<template>
<div>
<frequent-items-search-input
:namespace="namespace"
/>
<frequent-items-search-input :namespace="namespace" />
<gl-loading-icon
v-if="isLoadingItems"
:label="translations.loadingMessage"
:size="2"
class="loading-animation prepend-top-20"
/>
<div
v-if="!isLoadingItems && !hasSearchQuery"
class="section-header"
>
<div v-if="!isLoadingItems && !hasSearchQuery" class="section-header">
{{ translations.header }}
</div>
<frequent-items-list
......
......@@ -55,11 +55,7 @@ export default {
<template>
<div class="frequent-items-list-container">
<ul class="list-unstyled">
<li
v-if="isListEmpty"
:class="{ 'section-failure': isFetchFailed }"
class="section-empty"
>
<li v-if="isListEmpty" :class="{ 'section-failure': isFetchFailed }" class="section-empty">
{{ listEmptyMessage }}
</li>
<frequent-items-list-item
......
......@@ -80,35 +80,14 @@ export default {
<template>
<li class="frequent-items-list-item-container">
<a
:href="webUrl"
class="clearfix"
>
<a :href="webUrl" class="clearfix">
<div class="frequent-items-item-avatar-container">
<img
v-if="hasAvatar"
:src="avatarUrl"
class="avatar s32"
/>
<identicon
v-else
:entity-id="itemId"
:entity-name="itemName"
size-class="s32"
/>
<img v-if="hasAvatar" :src="avatarUrl" class="avatar s32" />
<identicon v-else :entity-id="itemId" :entity-name="itemName" size-class="s32" />
</div>
<div class="frequent-items-item-metadata-container">
<div
:title="itemName"
class="frequent-items-item-title"
v-html="highlightedItemName"
>
</div>
<div
v-if="truncatedNamespace"
:title="namespace"
class="frequent-items-item-namespace"
>
<div :title="itemName" class="frequent-items-item-title" v-html="highlightedItemName"></div>
<div v-if="truncatedNamespace" :title="namespace" class="frequent-items-item-namespace">
{{ truncatedNamespace }}
</div>
</div>
......
......@@ -49,10 +49,6 @@ export default {
type="search"
class="form-control"
/>
<icon
v-if="!searchQuery"
name="search"
class="search-icon"
/>
<icon v-if="!searchQuery" name="search" class="search-icon" />
</div>
</template>
......@@ -43,18 +43,9 @@ export default {
:parent-group="parentGroup"
:action="action"
/>
<li
v-if="hasMoreChildren"
class="group-row">
<a
:href="parentGroup.relativePath"
class="group-row-contents has-more-items">
<i
class="fa fa-external-link"
aria-hidden="true"
>
</i>
{{ moreChildrenStats }}
<li v-if="hasMoreChildren" class="group-row">
<a :href="parentGroup.relativePath" class="group-row-contents has-more-items">
<i class="fa fa-external-link" aria-hidden="true"> </i> {{ moreChildrenStats }}
</a>
</li>
</ul>
......
......@@ -77,89 +77,46 @@ export default {
</script>
<template>
<li
:id="groupDomId"
:class="rowClass"
class="group-row"
@click.stop="onClickRowGroup"
>
<li :id="groupDomId" :class="rowClass" class="group-row" @click.stop="onClickRowGroup">
<div
:class="{ 'project-row-contents': !isGroup }"
class="group-row-contents d-flex justify-content-end align-items-center"
>
<div
class="folder-toggle-wrap append-right-4 d-flex align-items-center"
>
<item-caret
:is-group-open="group.isOpen"
/>
<item-type-icon
:item-type="group.type"
:is-group-open="group.isOpen"
/>
<div class="folder-toggle-wrap append-right-4 d-flex align-items-center">
<item-caret :is-group-open="group.isOpen" />
<item-type-icon :item-type="group.type" :is-group-open="group.isOpen" />
</div>
<div
:class="{ 'content-loading': group.isChildrenLoading }"
class="avatar-container s24 d-none d-sm-flex"
>
<a
:href="group.relativePath"
class="no-expand"
>
<img
v-if="hasAvatar"
:src="group.avatarUrl"
class="avatar s24"
/>
<identicon
v-else
:entity-id="group.id"
:entity-name="group.name"
size-class="s24"
/>
<a :href="group.relativePath" class="no-expand">
<img v-if="hasAvatar" :src="group.avatarUrl" class="avatar s24" />
<identicon v-else :entity-id="group.id" :entity-name="group.name" size-class="s24" />
</a>
</div>
<div
class="group-text flex-grow"
>
<div
class="title namespace-title append-right-8"
>
<div class="group-text flex-grow">
<div class="title namespace-title append-right-8">
<a
v-tooltip
:href="group.relativePath"
:title="group.fullName"
class="no-expand"
data-placement="bottom"
>{{
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
}}</a>
<span
v-if="group.permission"
class="user-access-role"
>{{
// ending bracket must be by closing tag to prevent
// link hover text-decoration from over-extending
group.name
}}</a
>
{{ group.permission }}
</span>
<span v-if="group.permission" class="user-access-role"> {{ group.permission }} </span>
</div>
<div
v-if="group.description"
class="description"
>
<span v-html="group.description">
</span>
<div v-if="group.description" class="description">
<span v-html="group.description"> </span>
</div>
</div>
<item-stats
:item="group"
class="group-stats prepend-top-2"
/>
<item-actions
v-if="isGroup"
:group="group"
:parent-group="parentGroup"
/>
<item-stats :item="group" class="group-stats prepend-top-2" />
<item-actions v-if="isGroup" :group="group" :parent-group="parentGroup" />
</div>
<group-folder
v-if="group.isOpen && hasChildren"
......
......@@ -43,19 +43,9 @@ export default {
<template>
<div class="groups-list-tree-container qa-groups-list-tree-container">
<div
v-if="searchEmpty"
class="has-no-search-results"
>
{{ searchEmptyMessage }}
</div>
<template
v-else
>
<group-folder
:groups="groups"
:action="action"
/>
<div v-if="searchEmpty" class="has-no-search-results">{{ searchEmptyMessage }}</div>
<template v-else>
<group-folder :groups="groups" :action="action" />
<pagination-links
:change="change"
:page-info="pageInfo"
......
......@@ -53,8 +53,9 @@ export default {
:aria-label="editBtnTitle"
data-container="body"
data-placement="bottom"
class="edit-group btn no-expand">
<icon name="settings"/>
class="edit-group btn no-expand"
>
<icon name="settings" />
</a>
<a
v-if="group.canLeave"
......@@ -65,8 +66,9 @@ export default {
data-container="body"
data-placement="bottom"
class="leave-group btn no-expand"
@click.prevent="onLeaveGroup">
<icon name="leave"/>
@click.prevent="onLeaveGroup"
>
<icon name="leave" />
</a>
</div>
</template>
......@@ -21,10 +21,5 @@ export default {
</script>
<template>
<span class="folder-caret">
<icon
:size="12"
:name="iconClass"
/>
</span>
<span class="folder-caret"> <icon :size="12" :name="iconClass" /> </span>
</template>
......@@ -76,14 +76,8 @@ export default {
css-class="item-visibility"
tooltip-placement="left"
/>
<div
v-if="isProject"
class="last-updated"
>
<time-ago-tooltip
:time="item.updatedAt"
tooltip-placement="bottom"
/>
<div v-if="isProject" class="last-updated">
<time-ago-tooltip :time="item.updatedAt" tooltip-placement="bottom" />
</div>
</div>
</template>
......@@ -57,12 +57,6 @@ export default {
:title="title"
data-container="body"
>
<icon :name="iconName" />
<span
v-if="isValuePresent"
class="stat-value"
>
{{ value }}
</span>
<icon :name="iconName" /> <span v-if="isValuePresent" class="stat-value"> {{ value }} </span>
</span>
</template>
......@@ -29,7 +29,5 @@ export default {
</script>
<template>
<span class="item-type-icon">
<icon :name="iconClass"/>
</span>
<span class="item-type-icon"> <icon :name="iconClass" /> </span>
</template>
......@@ -37,7 +37,7 @@ export default {
<button
v-tooltip
:class="{
active: currentActivityView === $options.activityBarViews.edit
active: currentActivityView === $options.activityBarViews.edit,
}"
:title="s__('IDE|Edit')"
:aria-label="s__('IDE|Edit')"
......@@ -45,18 +45,16 @@ export default {
data-placement="right"
type="button"
class="ide-sidebar-link js-ide-edit-mode"
@click.prevent="changedActivityView($event, $options.activityBarViews.edit)"
@click.prevent="changedActivityView($event, $options.activityBarViews.edit);"
>
<icon
name="code"
/>
<icon name="code" />
</button>
</li>
<li>
<button
v-tooltip
:class="{
active: currentActivityView === $options.activityBarViews.review
active: currentActivityView === $options.activityBarViews.review,
}"
:title="s__('IDE|Review')"
:aria-label="s__('IDE|Review')"
......@@ -64,18 +62,16 @@ export default {
data-placement="right"
type="button"
class="ide-sidebar-link js-ide-review-mode"
@click.prevent="changedActivityView($event, $options.activityBarViews.review)"
@click.prevent="changedActivityView($event, $options.activityBarViews.review);"
>
<icon
name="file-modified"
/>
<icon name="file-modified" />
</button>
</li>
<li v-show="hasChanges">
<button
v-tooltip
:class="{
active: currentActivityView === $options.activityBarViews.commit
active: currentActivityView === $options.activityBarViews.commit,
}"
:title="s__('IDE|Commit')"
:aria-label="s__('IDE|Commit')"
......@@ -83,11 +79,9 @@ export default {
data-placement="right"
type="button"
class="ide-sidebar-link js-ide-commit-mode"
@click.prevent="changedActivityView($event, $options.activityBarViews.commit)"
@click.prevent="changedActivityView($event, $options.activityBarViews.commit);"
>
<icon
name="commit"
/>
<icon name="commit" />
</button>
</li>
</ul>
......
......@@ -32,28 +32,14 @@ export default {
</script>
<template>
<a
:href="branchHref"
class="btn-link d-flex align-items-center"
>
<a :href="branchHref" class="btn-link d-flex align-items-center">
<span class="d-flex append-right-default ide-search-list-current-icon">
<icon
v-if="isActive"
:size="18"
name="mobile-issue-close"
/>
<icon v-if="isActive" :size="18" name="mobile-issue-close" />
</span>
<span>
<strong>
{{ item.name }}
</strong>
<span
class="ide-merge-request-project-path d-block mt-1"
>
Updated
<timeago
:time="item.committedDate || ''"
/>
<strong> {{ item.name }} </strong>
<span class="ide-merge-request-project-path d-block mt-1">
Updated <timeago :time="item.committedDate || ''" />
</span>
</span>
</a>
......
......@@ -68,11 +68,7 @@ export default {
class="form-control dropdown-input-field"
@input="searchBranches"
/>
<icon
:size="18"
name="search"
class="input-icon"
/>
<icon :size="18" name="search" class="input-icon" />
</div>
</div>
<div class="dropdown-content ide-merge-requests-dropdown-content d-flex">
......@@ -81,26 +77,13 @@ export default {
:size="2"
class="mt-3 mb-3 align-self-center ml-auto mr-auto"
/>
<ul
v-else
class="mb-3 w-100"
>
<ul v-else class="mb-3 w-100">
<template v-if="hasBranches">
<li
v-for="item in branches"
:key="item.name"
>
<item
:item="item"
:project-id="currentProjectId"
:is-active="isActiveBranch(item)"
/>
<li v-for="item in branches" :key="item.name">
<item :item="item" :project-id="currentProjectId" :is-active="isActiveBranch(item)" />
</li>
</template>
<li
v-else
class="ide-search-list-empty d-flex align-items-center justify-content-center"
>
<li v-else class="ide-search-list-empty d-flex align-items-center justify-content-center">
<template v-if="hasNoSearchResults">
{{ __('No branches found') }}
</template>
......
......@@ -57,11 +57,7 @@ export default {
:disabled="currentBranch && !currentBranch.can_push"
:title="$options.currentBranchPermissionsTooltip"
>
<span
class="ide-radio-label"
v-html="commitToCurrentBranchText"
>
</span>
<span class="ide-radio-label" v-html="commitToCurrentBranchText"> </span>
</radio-group>
<radio-group
:value="$options.commitToNewBranch"
......
......@@ -42,18 +42,9 @@ export default {
<template>
<div class="d-flex ide-commit-editor-header align-items-center">
<file-icon
:file-name="activeFile.name"
:size="16"
class="mr-2"
/>
<strong class="mr-2">
{{ activeFile.path }}
</strong>
<changed-file-icon
:file="activeFile"
class="ml-0"
/>
<file-icon :file-name="activeFile.name" :size="16" class="mr-2" />
<strong class="mr-2"> {{ activeFile.path }} </strong>
<changed-file-icon :file="activeFile" class="ml-0" />
<div class="ml-auto">
<button
v-if="!isStaged"
......@@ -66,7 +57,7 @@ export default {
<button
:class="{
'btn-success': !isStaged,
'btn-warning': isStaged
'btn-warning': isStaged,
}"
type="button"
class="btn btn-inverted"
......
......@@ -13,22 +13,12 @@ export default {
v-if="!lastCommitMsg"
class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
>
<div
class="ide-commit-empty-state-container"
>
<div class="svg-content svg-80">
<img :src="noChangesStateSvgPath" />
</div>
<div class="ide-commit-empty-state-container">
<div class="svg-content svg-80"><img :src="noChangesStateSvgPath" /></div>
<div class="append-right-default prepend-left-default">
<div
class="text-content text-center"
>
<h4>
{{ __('No changes') }}
</h4>
<p>
{{ __('Edit files in the editor and commit changes here') }}
</p>
<div class="text-content text-center">
<h4>{{ __('No changes') }}</h4>
<p>{{ __('Edit files in the editor and commit changes here') }}</p>
</div>
</div>
</div>
......
......@@ -96,7 +96,7 @@ export default {
<div
:class="{
'is-compact': isCompact,
'is-full': !isCompact
'is-full': !isCompact,
}"
:style="{
height: componentHeight ? `${componentHeight}px` : null,
......@@ -109,11 +109,7 @@ export default {
@enter="enterTransition"
@after-enter="afterEndTransition"
>
<div
v-if="isCompact"
ref="compactEl"
class="commit-form-compact"
>
<div v-if="isCompact" ref="compactEl" class="commit-form-compact">
<button
:disabled="!hasChanges"
type="button"
......@@ -122,21 +118,10 @@ export default {
>
{{ __('Commit…') }}
</button>
<p
class="text-center"
v-html="overviewText"
></p>
<p class="text-center" v-html="overviewText"></p>
</div>
<form
v-if="!isCompact"
ref="formEl"
@submit.prevent.stop="commitChanges"
>
<transition name="fade">
<success-message
v-show="lastCommitMsg"
/>
</transition>
<form v-if="!isCompact" ref="formEl" @submit.prevent.stop="commitChanges">
<transition name="fade"> <success-message v-show="lastCommitMsg" /> </transition>
<commit-message-field
:text="commitMessage"
:placeholder="preBuiltCommitMessage"
......
......@@ -93,24 +93,11 @@ export default {
</script>
<template>
<div
class="ide-commit-list-container"
>
<header
class="multi-file-commit-panel-header d-flex mb-0"
>
<div
class="d-flex align-items-center flex-fill"
>
<icon
v-once
:name="iconName"
:size="18"
class="append-right-8"
/>
<strong>
{{ titleText }}
</strong>
<div class="ide-commit-list-container">
<header class="multi-file-commit-panel-header d-flex mb-0">
<div class="d-flex align-items-center flex-fill">
<icon v-once :name="iconName" :size="18" class="append-right-8" />
<strong> {{ titleText }} </strong>
<div class="d-flex ml-auto">
<button
ref="actionBtn"
......@@ -119,7 +106,7 @@ export default {
:aria-label="actionBtnText"
:disabled="!filesLength"
:class="{
'disabled-content': !filesLength
'disabled-content': !filesLength,
}"
type="button"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
......@@ -128,11 +115,7 @@ export default {
data-boundary="viewport"
@click="actionBtnClicked"
>
<icon
:name="actionBtnIcon"
:size="16"
class="ml-auto mr-auto"
/>
<icon :name="actionBtnIcon" :size="16" class="ml-auto mr-auto" />
</button>
<button
v-if="!stagedList"
......@@ -141,7 +124,7 @@ export default {
:aria-label="__('Discard all changes')"
:disabled="!filesLength"
:class="{
'disabled-content': !filesLength
'disabled-content': !filesLength,
}"
type="button"
class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
......@@ -150,23 +133,13 @@ export default {
data-boundary="viewport"
@click="openDiscardModal"
>
<icon
:size="16"
name="remove-all"
class="ml-auto mr-auto"
/>
<icon :size="16" name="remove-all" class="ml-auto mr-auto" />
</button>
</div>
</div>
</header>
<ul
v-if="filesLength"
class="multi-file-commit-list list-unstyled append-bottom-0"
>
<li
v-for="file in fileList"
:key="file.key"
>
<ul v-if="filesLength" class="multi-file-commit-list list-unstyled append-bottom-0">
<li v-for="file in fileList" :key="file.key">
<list-item
:file="file"
:action-component="itemActionComponent"
......@@ -176,10 +149,7 @@ export default {
/>
</li>
</ul>
<p
v-else
class="multi-file-commit-list form-text text-muted text-center"
>
<p v-else class="multi-file-commit-list form-text text-muted text-center">
{{ emptyStateText }}
</p>
<gl-modal
......
......@@ -69,9 +69,7 @@ export default {
</script>
<template>
<div
class="multi-file-commit-list-collapsed text-center"
>
<div class="multi-file-commit-list-collapsed text-center">
<div
v-tooltip
:title="titleTooltip"
......@@ -79,11 +77,7 @@ export default {
data-placement="left"
class="append-bottom-15"
>
<icon
v-once
:name="iconName"
:size="18"
/>
<icon v-once :name="iconName" :size="18" />
</div>
<div
v-tooltip
......@@ -92,11 +86,7 @@ export default {
data-placement="left"
class="append-bottom-10"
>
<icon
:name="additionIconName"
:size="18"
:css-classes="addedFilesIconClass"
/>
<icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
</div>
{{ addedFilesLength }}
<div
......@@ -106,11 +96,7 @@ export default {
data-placement="left"
class="prepend-top-10 append-bottom-10"
>
<icon
:name="modifiedIconName"
:size="18"
:css-classes="modifiedFilesClass"
/>
<icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
</div>
{{ modifiedFilesLength }}
</div>
......
......@@ -99,7 +99,7 @@ export default {
v-tooltip
:title="tooltipTitle"
:class="{
'is-active': isActive
'is-active': isActive,
}"
class="multi-file-commit-list-path w-100 border-0 ml-0 mr-0"
role="button"
......@@ -107,18 +107,11 @@ export default {
@click="openFileInEditor"
>
<span class="multi-file-commit-list-file-path d-flex align-items-center">
<file-icon
:file-name="file.name"
class="append-right-8"
/>{{ file.name }}
<file-icon :file-name="file.name" class="append-right-8" />{{ file.name }}
</span>
<div class="ml-auto d-flex align-items-center">
<div class="d-flex align-items-center ide-commit-list-changed-icon">
<icon
:name="iconName"
:size="16"
:css-classes="iconClass"
/>
<icon :name="iconName" :size="16" :css-classes="iconClass" />
</div>
</div>
</div>
......
......@@ -71,24 +71,16 @@ export default {
<fieldset class="common-note-form ide-commit-message-field">
<div
:class="{
'is-focused': isFocused
'is-focused': isFocused,
}"
class="md-area"
>
<div
v-once
class="md-header"
>
<div v-once class="md-header">
<ul class="nav-links">
<li>
{{ __('Commit Message') }}
<span
v-popover="$options.popoverOptions"
class="form-text text-muted prepend-left-10"
>
<icon
name="question"
/>
<span v-popover="$options.popoverOptions" class="form-text text-muted prepend-left-10">
<icon name="question" />
</span>
</li>
</ul>
......@@ -97,22 +89,13 @@ export default {
<div class="ide-commit-message-highlights-container">
<div
:style="{
transform: `translate3d(0, ${-scrollTop}px, 0)`
transform: `translate3d(0, ${-scrollTop}px, 0)`,
}"
class="note-textarea highlights monospace"
>
<div
v-for="(line, index) in allLines"
:key="index"
>
<span
v-text="line.text"
>
</span><mark
v-show="line.highlightedText"
v-text="line.highlightedText"
>
</mark>
<div v-for="(line, index) in allLines" :key="index">
<span v-text="line.text"> </span
><mark v-show="line.highlightedText" v-text="line.highlightedText"> </mark>
</div>
</div>
</div>
......@@ -124,8 +107,8 @@ export default {
name="commit-message"
@scroll="handleScroll"
@input="onInput"
@focus="updateIsFocused(true)"
@blur="updateIsFocused(false)"
@focus="updateIsFocused(true);"
@blur="updateIsFocused(false);"
>
</textarea>
</div>
......
......@@ -56,7 +56,7 @@ export default {
v-tooltip
:title="tooltipTitle"
:class="{
'is-disabled': disabled
'is-disabled': disabled,
}"
>
<input
......@@ -65,27 +65,18 @@ export default {
:disabled="disabled"
type="radio"
name="commit-action"
@change="updateCommitAction($event.target.value)"
@change="updateCommitAction($event.target.value);"
/>
<span class="prepend-left-10">
<span
v-if="label"
class="ide-radio-label"
>
{{ label }}
</span>
<slot v-else></slot>
<span v-if="label" class="ide-radio-label"> {{ label }} </span> <slot v-else></slot>
</span>
</label>
<div
v-if="commitAction === value && showInput"
class="ide-commit-new-branch"
>
<div v-if="commitAction === value && showInput" class="ide-commit-new-branch">
<input
:placeholder="newBranchName"
type="text"
class="form-control monospace"
@input="updateBranchName($event.target.value)"
@input="updateBranchName($event.target.value);"
/>
</div>
</fieldset>
......
......@@ -38,10 +38,7 @@ export default {
</script>
<template>
<div
v-once
class="multi-file-discard-btn d-flex"
>
<div v-once class="multi-file-discard-btn d-flex">
<button
v-tooltip
:aria-label="__('Stage changes')"
......@@ -51,13 +48,9 @@ export default {
data-container="body"
data-boundary="viewport"
data-placement="bottom"
@click.stop.prevent="stageChange(path)"
@click.stop.prevent="stageChange(path);"
>
<icon
:size="16"
name="mobile-issue-close"
class="ml-auto mr-auto"
/>
<icon :size="16" name="mobile-issue-close" class="ml-auto mr-auto" />
</button>
<button
v-tooltip
......@@ -70,18 +63,14 @@ export default {
data-placement="bottom"
@click.stop.prevent="showDiscardModal"
>
<icon
:size="16"
name="remove"
class="ml-auto mr-auto"
/>
<icon :size="16" name="remove" class="ml-auto mr-auto" />
</button>
<gl-modal
:id="modalId"
:header-title-text="modalTitle"
:footer-primary-button-text="__('Discard changes')"
footer-primary-button-variant="danger"
@submit="discardFileChanges(path)"
@submit="discardFileChanges(path);"
>
{{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
</gl-modal>
......
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment