diff options
author | Mike Greiling <mike@pixelcog.com> | 2018-11-16 14:07:38 -0600 |
---|---|---|
committer | Mike Greiling <mike@pixelcog.com> | 2018-11-20 09:30:01 -0600 |
commit | 5b9495c5db851ec8d1ca2cc6da0da12d6b161130 (patch) | |
tree | f622611ceb4caeda70212a52438a2c9428511a68 /app/assets/javascripts/boards | |
parent | 29d129d21718f8aa9c7d58a8b403cf91f6d4addd (diff) | |
download | gitlab-ce-5b9495c5db851ec8d1ca2cc6da0da12d6b161130.tar.gz |
Prettify all the things
Diffstat (limited to 'app/assets/javascripts/boards')
16 files changed, 100 insertions, 254 deletions
diff --git a/app/assets/javascripts/boards/components/board_blank_state.vue b/app/assets/javascripts/boards/components/board_blank_state.vue index 561a4636ef5..667eea17d44 100644 --- a/app/assets/javascripts/boards/components/board_blank_state.vue +++ b/app/assets/javascripts/boards/components/board_blank_state.vue @@ -61,35 +61,25 @@ export default { <template> <div class="board-blank-state"> - <p> - Add the following default lists to your Issue Board with one click: - </p> + <p>Add the following default lists to your Issue Board with one click:</p> <ul class="board-blank-state-list"> - <li - v-for="(label, index) in predefinedLabels" - :key="index" - > - <span - :style="{ backgroundColor: label.color }" - class="label-color"> - </span> + <li v-for="(label, index) in predefinedLabels" :key="index"> + <span :style="{ backgroundColor: label.color }" class="label-color"> </span> {{ label.title }} </li> </ul> <p> - Starting out with the default set of lists will get you - right on the way to making the most of your board. + Starting out with the default set of lists will get you right on the way to making the most of + your board. </p> <button class="btn btn-success btn-inverted btn-block" type="button" - @click.stop="addDefaultLists"> + @click.stop="addDefaultLists" + > Add default lists </button> - <button - class="btn btn-default btn-block" - type="button" - @click.stop="clearBlankState"> + <button class="btn btn-default btn-block" type="button" @click.stop="clearBlankState"> Nevermind, I'll use my own </button> </div> diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue index 2f31316aa76..30fbdb9e97f 100644 --- a/app/assets/javascripts/boards/components/board_card.vue +++ b/app/assets/javascripts/boards/components/board_card.vue @@ -79,14 +79,15 @@ export default { :class="{ 'user-can-drag': !disabled && issue.id, 'is-disabled': disabled || !issue.id, - 'is-active': issueDetailVisible + 'is-active': issueDetailVisible, }" :index="index" :data-issue-id="issue.id" class="board-card" @mousedown="mouseDown" @mousemove="mouseMove" - @mouseup="showIssue($event)"> + @mouseup="showIssue($event);" + > <issue-card-inner :list="list" :issue="issue" diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue index a04b828e277..f3f341ece5c 100644 --- a/app/assets/javascripts/boards/components/board_list.vue +++ b/app/assets/javascripts/boards/components/board_list.vue @@ -222,23 +222,22 @@ export default { <template> <div class="board-list-component"> - <div - v-if="loading" - class="board-list-loading text-center" - aria-label="Loading issues"> + <div v-if="loading" class="board-list-loading text-center" aria-label="Loading issues"> <gl-loading-icon /> </div> <board-new-issue v-if="list.type !== 'closed' && showIssueForm" :group-id="groupId" - :list="list"/> + :list="list" + /> <ul v-show="!loading" ref="list" :data-board="list.id" :data-board-type="list.type" :class="{ 'is-smaller': showIssueForm }" - class="board-list js-board-list"> + class="board-list js-board-list" + > <board-card v-for="(issue, index) in issues" ref="issue" @@ -249,25 +248,12 @@ export default { :issue-link-base="issueLinkBase" :group-id="groupId" :root-path="rootPath" - :disabled="disabled" /> - <li - v-if="showCount" - class="board-list-count text-center" - data-issue-id="-1"> - <gl-loading-icon - v-show="list.loadingMore" - label="Loading more issues" - /> - <span - v-if="list.issues.length === list.issuesSize" - > - Showing all issues - </span> - <span - v-else - > - Showing {{ list.issues.length }} of {{ list.issuesSize }} issues - </span> + :disabled="disabled" + /> + <li v-if="showCount" class="board-list-count text-center" data-issue-id="-1"> + <gl-loading-icon v-show="list.loadingMore" label="Loading more issues" /> + <span v-if="list.issues.length === list.issuesSize"> Showing all issues </span> + <span v-else> Showing {{ list.issues.length }} of {{ list.issuesSize }} issues </span> </li> </ul> </div> diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue index 2a96d1443e1..93bcb4e129e 100644 --- a/app/assets/javascripts/boards/components/board_new_issue.vue +++ b/app/assets/javascripts/boards/components/board_new_issue.vue @@ -96,21 +96,11 @@ export default { <template> <div class="board-new-issue-form"> <div class="board-card"> - <form @submit="submit($event)"> - <div - v-if="error" - class="flash-container" - > - <div class="flash-alert"> - An error occurred. Please try again. - </div> + <form @submit="submit($event);"> + <div v-if="error" class="flash-container"> + <div class="flash-alert">An error occurred. Please try again.</div> </div> - <label - :for="list.id + '-title'" - class="label-bold" - > - Title - </label> + <label :for="list.id + '-title'" class="label-bold"> Title </label> <input :id="list.id + '-title'" ref="input" @@ -120,10 +110,7 @@ export default { name="issue_title" autocomplete="off" /> - <project-select - v-if="groupId" - :group-id="groupId" - /> + <project-select v-if="groupId" :group-id="groupId" /> <div class="clearfix prepend-top-10"> <gl-button ref="submit-button" @@ -134,12 +121,7 @@ export default { > Submit issue </gl-button> - <gl-button - class="float-right" - type="button" - variant="default" - @click="cancel" - > + <gl-button class="float-right" type="button" variant="default" @click="cancel"> Cancel </gl-button> </div> diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue index 48c46ae32f1..0f581c3d37d 100644 --- a/app/assets/javascripts/boards/components/issue_card_inner.vue +++ b/app/assets/javascripts/boards/components/issue_card_inner.vue @@ -169,17 +169,12 @@ export default { :title="__('Confidential')" class="confidential-icon append-right-4" :aria-label="__('Confidential')" - /><a - :href="issue.path" - :title="issue.title" - class="js-no-trigger" - @mousemove.stop>{{ issue.title }}</a> + /><a :href="issue.path" :title="issue.title" class="js-no-trigger" @mousemove.stop>{{ + issue.title + }}</a> </h4> </div> - <div - v-if="showLabelFooter" - class="board-card-labels prepend-top-4 d-flex flex-wrap" - > + <div v-if="showLabelFooter" class="board-card-labels prepend-top-4 d-flex flex-wrap"> <button v-for="label in issue.labels" v-if="showLabel(label)" @@ -189,13 +184,15 @@ export default { :title="label.description" class="badge color-label append-right-4 prepend-top-4" type="button" - @click="filterByLabel(label)" + @click="filterByLabel(label);" > {{ label.title }} </button> </div> <div class="board-card-footer d-flex justify-content-between align-items-end"> - <div class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container"> + <div + class="d-flex align-items-start flex-wrap-reverse board-card-number-container js-board-card-number-container" + > <span v-if="issue.referencePath" class="board-card-number d-flex append-right-8 prepend-top-8" @@ -205,13 +202,11 @@ export default { :title="issueReferencePath" placement="bottom" class="board-issue-path block-truncated bold" - >{{ issueReferencePath }}</tooltip-on-truncate>#{{ issue.iid }} + >{{ issueReferencePath }}</tooltip-on-truncate + >#{{ issue.iid }} </span> <span class="board-info-items prepend-top-8 d-inline-block"> - <issue-due-date - v-if="issue.dueDate" - :date="issue.dueDate" - /><issue-time-estimate + <issue-due-date v-if="issue.dueDate" :date="issue.dueDate" /><issue-time-estimate v-if="issue.timeEstimate" :estimate="issue.timeEstimate" /> @@ -230,8 +225,7 @@ export default { tooltip-placement="bottom" > <span class="js-assignee-tooltip"> - <span class="bold d-block">Assignee</span> - {{ assignee.name }} + <span class="bold d-block">Assignee</span> {{ assignee.name }} <span class="text-white-50">@{{ assignee.username }}</span> </span> </user-avatar-link> diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue index d6c87132843..15937b1091a 100644 --- a/app/assets/javascripts/boards/components/issue_due_date.vue +++ b/app/assets/javascripts/boards/components/issue_due_date.vue @@ -66,25 +66,17 @@ export default { <template> <span> - <span - ref="issueDueDate" - class="board-card-info card-number" - > + <span ref="issueDueDate" class="board-card-info card-number"> <icon - :class="{'text-danger': isPastDue, 'board-card-info-icon': true}" + :class="{ 'text-danger': isPastDue, 'board-card-info-icon': true }" name="calendar" - /><time - :class="{'text-danger': isPastDue}" - datetime="date" - class="board-card-info-text">{{ body }}</time> + /><time :class="{ 'text-danger': isPastDue }" datetime="date" class="board-card-info-text">{{ + body + }}</time> </span> - <gl-tooltip - :target="() => $refs.issueDueDate" - placement="bottom" - > - <span class="bold">{{ __('Due date') }}</span> - <br /> - <span :class="{'text-danger-muted': isPastDue}">{{ title }}</span> + <gl-tooltip :target="() => $refs.issueDueDate" placement="bottom"> + <span class="bold">{{ __('Due date') }}</span> <br /> + <span :class="{ 'text-danger-muted': isPastDue }">{{ title }}</span> </gl-tooltip> </span> </template> diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue index a9803c8ab5d..5acc3025b2c 100644 --- a/app/assets/javascripts/boards/components/issue_time_estimate.vue +++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue @@ -27,22 +27,18 @@ export default { <template> <span> - <span - ref="issueTimeEstimate" - class="board-card-info card-number" - > - <icon - name="hourglass" - css-classes="board-card-info-icon" - /><time class="board-card-info-text">{{ timeEstimate }}</time> + <span ref="issueTimeEstimate" class="board-card-info card-number"> + <icon name="hourglass" css-classes="board-card-info-icon" /><time + class="board-card-info-text" + >{{ timeEstimate }}</time + > </span> <gl-tooltip :target="() => $refs.issueTimeEstimate" placement="bottom" class="js-issue-time-estimate" > - <span class="bold d-block">{{ __('Time estimate') }}</span> - {{ title }} + <span class="bold d-block">{{ __('Time estimate') }}</span> {{ title }} </gl-tooltip> </span> </template> diff --git a/app/assets/javascripts/boards/components/modal/empty_state.vue b/app/assets/javascripts/boards/components/modal/empty_state.vue index 795ba864545..08408eb0b52 100644 --- a/app/assets/javascripts/boards/components/modal/empty_state.vue +++ b/app/assets/javascripts/boards/components/modal/empty_state.vue @@ -45,24 +45,20 @@ export default { <section class="empty-state"> <div class="row"> <div class="col-12 col-md-6 order-md-last"> - <aside class="svg-content"><img :src="emptyStateSvg"/></aside> + <aside class="svg-content"><img :src="emptyStateSvg" /></aside> </div> <div class="col-12 col-md-6 order-md-first"> <div class="text-content"> <h4>{{ contents.title }}</h4> <p v-html="contents.content"></p> - <a - v-if="activeTab === 'all'" - :href="newIssuePath" - class="btn btn-success btn-inverted" - > + <a v-if="activeTab === 'all'" :href="newIssuePath" class="btn btn-success btn-inverted"> New issue </a> <button v-if="activeTab === 'selected'" class="btn btn-default" type="button" - @click="changeTab('all')" + @click="changeTab('all');" > Open issues </button> diff --git a/app/assets/javascripts/boards/components/modal/footer.vue b/app/assets/javascripts/boards/components/modal/footer.vue index d51597ed22d..b1bc7d87086 100644 --- a/app/assets/javascripts/boards/components/modal/footer.vue +++ b/app/assets/javascripts/boards/components/modal/footer.vue @@ -63,28 +63,15 @@ export default { }; </script> <template> - <footer - class="form-actions add-issues-footer" - > + <footer class="form-actions add-issues-footer"> <div class="float-left"> - <button - :disabled="submitDisabled" - class="btn btn-success" - type="button" - @click="addIssues" - > + <button :disabled="submitDisabled" class="btn btn-success" type="button" @click="addIssues"> {{ submitText }} </button> - <span class="inline add-issues-footer-to-list"> - to list - </span> - <lists-dropdown/> + <span class="inline add-issues-footer-to-list"> to list </span> + <lists-dropdown /> </div> - <button - class="btn btn-default float-right" - type="button" - @click="toggleModal(false)" - > + <button class="btn btn-default float-right" type="button" @click="toggleModal(false);"> Cancel </button> </footer> diff --git a/app/assets/javascripts/boards/components/modal/header.vue b/app/assets/javascripts/boards/components/modal/header.vue index fc6cefa89a9..d0e285a149e 100644 --- a/app/assets/javascripts/boards/components/modal/header.vue +++ b/app/assets/javascripts/boards/components/modal/header.vue @@ -58,16 +58,14 @@ export default { class="close" data-dismiss="modal" aria-label="Close" - @click="toggleModal(false)" + @click="toggleModal(false);" > <span aria-hidden="true">×</span> </button> </h2> </header> - <modal-tabs v-if="!loading && issuesCount > 0"/> - <div - v-if="showSearch" - class="add-issues-search append-bottom-10"> + <modal-tabs v-if="!loading && issuesCount > 0" /> + <div v-if="showSearch" class="add-issues-search append-bottom-10"> <modal-filters :store="filter" /> <button ref="selectAllBtn" diff --git a/app/assets/javascripts/boards/components/modal/index.vue b/app/assets/javascripts/boards/components/modal/index.vue index fc0e3e46b88..1e5761cf268 100644 --- a/app/assets/javascripts/boards/components/modal/index.vue +++ b/app/assets/javascripts/boards/components/modal/index.vue @@ -143,9 +143,7 @@ export default { }; </script> <template> - <div - v-if="showAddIssuesModal" - class="add-issues-modal"> + <div v-if="showAddIssuesModal" class="add-issues-modal"> <div class="add-issues-container"> <modal-header :project-id="projectId" @@ -163,15 +161,10 @@ export default { :new-issue-path="newIssuePath" :empty-state-svg="emptyStateSvg" /> - <section - v-if="loading || filterLoading" - class="add-issues-list text-center" - > - <div class="add-issues-list-loading"> - <gl-loading-icon /> - </div> + <section v-if="loading || filterLoading" class="add-issues-list text-center"> + <div class="add-issues-list-loading"><gl-loading-icon /></div> </section> - <modal-footer/> + <modal-footer /> </div> </div> </template> diff --git a/app/assets/javascripts/boards/components/modal/list.vue b/app/assets/javascripts/boards/components/modal/list.vue index e11f398e70d..878bb002c6c 100644 --- a/app/assets/javascripts/boards/components/modal/list.vue +++ b/app/assets/javascripts/boards/components/modal/list.vue @@ -117,38 +117,22 @@ export default { }; </script> <template> - <section - ref="list" - class="add-issues-list add-issues-list-columns"> + <section ref="list" class="add-issues-list add-issues-list-columns"> <div v-if="issuesCount > 0 && issues.length === 0" - class="empty-state add-issues-empty-state-filter text-center"> - <div class="svg-content"> - <img :src="emptyStateSvg" /> - </div> - <div class="text-content"> - <h4> - There are no issues to show. - </h4> - </div> + class="empty-state add-issues-empty-state-filter text-center" + > + <div class="svg-content"><img :src="emptyStateSvg" /></div> + <div class="text-content"><h4>There are no issues to show.</h4></div> </div> - <div - v-for="(group, index) in groupedIssues" - :key="index" - class="add-issues-list-column"> - <div - v-for="issue in group" - v-if="showIssue(issue)" - :key="issue.id" - class="board-card-parent"> + <div v-for="(group, index) in groupedIssues" :key="index" class="add-issues-list-column"> + <div v-for="issue in group" v-if="showIssue(issue)" :key="issue.id" class="board-card-parent"> <div :class="{ 'is-active': issue.selected }" class="board-card" - @click="toggleIssue($event, issue)"> - <issue-card-inner - :issue="issue" - :issue-link-base="issueLinkBase" - :root-path="rootPath"/> + @click="toggleIssue($event, issue);" + > + <issue-card-inner :issue="issue" :issue-link-base="issueLinkBase" :root-path="rootPath" /> <icon v-if="issue.selected" :aria-label="'Issue #' + issue.id + ' selected'" diff --git a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue index c502e32d169..820d0679df5 100644 --- a/app/assets/javascripts/boards/components/modal/lists_dropdown.vue +++ b/app/assets/javascripts/boards/components/modal/lists_dropdown.vue @@ -27,35 +27,20 @@ export default { </script> <template> <div class="dropdown inline"> - <button - class="dropdown-menu-toggle" - type="button" - data-toggle="dropdown" - aria-expanded="false"> - <span - :style="{ backgroundColor: selected.label.color }" - class="dropdown-label-box"> - </span> - {{ selected.title }} - <icon - name="chevron-down" - /> + <button class="dropdown-menu-toggle" type="button" data-toggle="dropdown" aria-expanded="false"> + <span :style="{ backgroundColor: selected.label.color }" class="dropdown-label-box"> </span> + {{ selected.title }} <icon name="chevron-down" /> </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-drop-up"> <ul> - <li - v-for="(list, i) in state.lists" - v-if="list.type == 'label'" - :key="i"> + <li v-for="(list, i) in state.lists" v-if="list.type == 'label'" :key="i"> <gl-link :class="{ 'is-active': list.id == selected.id }" href="#" role="button" - @click.prevent="modal.selectedList = list"> - <span - :style="{ backgroundColor: list.label.color }" - class="dropdown-label-box"> - </span> + @click.prevent="modal.selectedList = list;" + > + <span :style="{ backgroundColor: list.label.color }" class="dropdown-label-box"> </span> {{ list.title }} </gl-link> </li> diff --git a/app/assets/javascripts/boards/components/modal/tabs.vue b/app/assets/javascripts/boards/components/modal/tabs.vue index 5d661590e8e..7b800a6ab97 100644 --- a/app/assets/javascripts/boards/components/modal/tabs.vue +++ b/app/assets/javascripts/boards/components/modal/tabs.vue @@ -20,28 +20,14 @@ export default { <template> <div class="top-area prepend-top-10 append-bottom-10"> <ul class="nav-links issues-state-filters"> - <li :class="{ 'active': activeTab == 'all' }"> - <a - href="#" - role="button" - @click.prevent="changeTab('all')" - > - Open issues - <span class="badge badge-pill"> - {{ issuesCount }} - </span> + <li :class="{ active: activeTab == 'all' }"> + <a href="#" role="button" @click.prevent="changeTab('all');"> + Open issues <span class="badge badge-pill"> {{ issuesCount }} </span> </a> </li> - <li :class="{ 'active': activeTab == 'selected' }"> - <a - href="#" - role="button" - @click.prevent="changeTab('selected')" - > - Selected issues - <span class="badge badge-pill"> - {{ selectedCount }} - </span> + <li :class="{ active: activeTab == 'selected' }"> + <a href="#" role="button" @click.prevent="changeTab('selected');"> + Selected issues <span class="badge badge-pill"> {{ selectedCount }} </span> </a> </li> </ul> diff --git a/app/assets/javascripts/boards/components/project_select.vue b/app/assets/javascripts/boards/components/project_select.vue index 83e6e237757..993d35641c0 100644 --- a/app/assets/javascripts/boards/components/project_select.vue +++ b/app/assets/javascripts/boards/components/project_select.vue @@ -72,23 +72,15 @@ export default { <template> <div> - <label class="label-bold prepend-top-10"> - Project - </label> - <div - ref="projectsDropdown" - class="dropdown" - > + <label class="label-bold prepend-top-10"> Project </label> + <div ref="projectsDropdown" class="dropdown"> <button class="dropdown-menu-toggle wide" type="button" data-toggle="dropdown" aria-expanded="false" > - {{ selectedProjectName }} - <icon - name="chevron-down" - /> + {{ selectedProjectName }} <icon name="chevron-down" /> </button> <div class="dropdown-menu dropdown-menu-selectable dropdown-menu-full-width"> <div class="dropdown-title"> @@ -106,21 +98,11 @@ export default { </button> </div> <div class="dropdown-input"> - <input - class="dropdown-input-field" - type="search" - placeholder="Search projects" - /> - <icon - name="search" - class="dropdown-input-search" - data-hidden="true" - /> + <input class="dropdown-input-field" type="search" placeholder="Search projects" /> + <icon name="search" class="dropdown-input-search" data-hidden="true" /> </div> <div class="dropdown-content"></div> - <div class="dropdown-loading"> - <gl-loading-icon /> - </div> + <div class="dropdown-loading"><gl-loading-icon /></div> </div> </div> </div> diff --git a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue index d681e6a431c..a2b8a0af236 100644 --- a/app/assets/javascripts/boards/components/sidebar/remove_issue.vue +++ b/app/assets/javascripts/boards/components/sidebar/remove_issue.vue @@ -74,14 +74,8 @@ export default Vue.extend({ }); </script> <template> - <div - class="block list" - > - <button - class="btn btn-default btn-block" - type="button" - @click="removeIssue" - > + <div class="block list"> + <button class="btn btn-default btn-block" type="button" @click="removeIssue"> Remove from board </button> </div> |