Commit 5b9495c5 authored by Mike Greiling's avatar Mike Greiling

Prettify all the things

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