style updates

[ci skip]
This commit is contained in:
Phil Hughes 2018-06-01 17:30:50 +01:00
parent 524ebff5d1
commit 0b278a93f9
No known key found for this signature in database
GPG key ID: 32245528C52E0F9F
3 changed files with 62 additions and 10 deletions

View file

@ -39,7 +39,7 @@ export default {
</script> </script>
<template> <template>
<div class="dropdown-menu"> <div class="dropdown-menu ide-merge-requests-dropdown">
<tabs <tabs
stop-propagation stop-propagation
@changed="updateActiveTab" @changed="updateActiveTab"
@ -53,6 +53,7 @@ export default {
:is-loading="isLoading" :is-loading="isLoading"
:items="mergeRequests" :items="mergeRequests"
:current-id="currentMergeRequestId" :current-id="currentMergeRequestId"
:empty-text="__('You have not created any merge requests')"
@search="fetchMergeRequests" @search="fetchMergeRequests"
/> />
</tab> </tab>
@ -62,6 +63,7 @@ export default {
:is-loading="isLoading" :is-loading="isLoading"
:items="mergeRequests" :items="mergeRequests"
:current-id="currentMergeRequestId" :current-id="currentMergeRequestId"
:empty-text="__('You do not have any assigned merge requests')"
@search="fetchMergeRequests" @search="fetchMergeRequests"
/> />
</tab> </tab>
@ -71,7 +73,7 @@ export default {
<style scoped> <style scoped>
.dropdown-menu { .dropdown-menu {
width: 400px; width: 350px;
padding: 0; padding: 0;
max-height: initial !important; max-height: initial !important;
} }

View file

@ -21,12 +21,24 @@ export default {
type: String, type: String,
required: true, required: true,
}, },
emptyText: {
type: String,
required: true,
},
}, },
data() { data() {
return { return {
search: '', search: '',
}; };
}, },
computed: {
hasMergeRequests() {
return this.items.length !== 0;
},
hasNoSearchResults() {
return this.search !== '' && !this.hasMergeRequests;
},
},
watch: { watch: {
isLoading() { isLoading() {
this.focusSearch(); this.focusSearch();
@ -72,20 +84,44 @@ export default {
class="fa fa-search dropdown-input-search" class="fa fa-search dropdown-input-search"
></i> ></i>
</div> </div>
<div class="dropdown-content"> <div class="dropdown-content ide-merge-requests-dropdown-content">
<ul class="mb-3"> <ul class="mb-3">
<template v-if="hasMergeRequests">
<li
v-for="item in items"
:key="item.id"
>
<item
:item="item"
:current-id="currentId"
@click="viewMergeRequest"
/>
</li>
</template>
<li <li
v-for="item in items" v-else
:key="item.id" class="ide-merge-requests-empty d-flex align-items-center justify-content-center"
> >
<item <template v-if="hasNoSearchResults">
:item="item" No merge requests found
:current-id="currentId" </template>
@click="viewMergeRequest" <template v-else>
/> {{ emptyText }}
</template>
</li> </li>
</ul> </ul>
</div> </div>
</template> </template>
</div> </div>
</template> </template>
<style scoped>
.ide-merge-requests-empty {
height: 230px;
}
.ide-merge-requests-dropdown-content {
min-height: 230px;
max-height: 470px;
}
</style>

View file

@ -1274,3 +1274,17 @@
.ide-job-header { .ide-job-header {
min-height: 60px; min-height: 60px;
} }
.ide-merge-requests-dropdown {
.nav-links li {
width: 50%;
}
.nav-links li a {
text-align: center;
}
.nav-links li a:not(.active) {
background-color: #fafafa;
}
}