Skip to content

G
gitlab-foss

李少辉-开发者 / gitlab-foss

通知 15
Star 0
Fork 0
G
gitlab-foss

体验新版 GitCode，发现更多精彩内容 >>

提交 34f925fe 编写于 作者: P Phil Hughes
浏览文件
操作

Merge branch '23643-responsive-environment-tables' into 'master' 

Responsive environment tables

See merge request !11836
上级 e34e5761 7a9c9a25
隐藏空白更改
内联 并排
Showing with 232 addition and 123 deletion
app/assets/javascripts/environments/components/environment_actions.vue
浏览文件 @ 34f925fe
......@@ -70,7 +70,7 @@ export default {
</span>
</button>
<ul class="dropdown-menu dropdown-menu-align-right">
<ul class="dropdown-menu">
<li v-for="action in actions">
<button
type="button"
......
app/assets/javascripts/environments/components/environment_item.vue
浏览文件 @ 34f925fe
......@@ -421,14 +421,19 @@ export default {
};
</script>
<template>
<tr :class="{ 'js-child-row': model.isChildren }">
<td>
<div
:class="{ 'js-child-row environment-child-row': model.isChildren, 'folder-row': model.isFolder, 'gl-responsive-table-row': !model.isFolder }">
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Environment
</div>
<a
v-if="!model.isFolder"
class="environment-name"
:class="{ 'prepend-left-default': model.isChildren }"
class="environment-name flex-truncate-parent table-mobile-content"
:href="environmentPath">
{{model.name}}
<span class="flex-truncate-child">{{model.name}}</span>
</a>
<span
v-else
......@@ -461,9 +466,9 @@ export default {
{{model.size}}
</span>
</span>
</td>
</div>
<td class="deployment-column">
<div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
<span v-if="shouldRenderDeploymentID">
{{deploymentInternalId}}
</span>
......@@ -478,21 +483,26 @@ export default {
:tooltip-text="deploymentUser.username"
/>
</span>
</td>
</div>
<td class="environments-build-cell">
<div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
<a
v-if="shouldRenderBuildName"
class="build-link"
:href="buildPath">
{{buildName}}
</a>
</td>
</div>
<td>
<div class="table-section section-25" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Commit
</div>
<div
v-if="!model.isFolder && hasLastDeploymentKey"
class="js-commit-component">
class="js-commit-component table-mobile-content">
<commit-component
:tag="commitTag"
:commit-ref="commitRef"
......@@ -501,25 +511,30 @@ export default {
:title="commitTitle"
:author="commitAuthor"/>
</div>
<p
<div
v-if="!model.isFolder && !hasLastDeploymentKey"
class="commit-title">
No deployments yet
</p>
</td>
</div>
</div>
<td>
<div class="table-section section-10" role="gridcell">
<div
v-if="!model.isFolder"
class="table-mobile-header">
Updated
</div>
<span
v-if="!model.isFolder && canShowDate"
class="environment-created-date-timeago">
class="environment-created-date-timeago table-mobile-content">
{{createdDate}}
</span>
</td>
</div>
<td class="environments-actions">
<div class="table-section section-30 environments-actions table-button-footer" role="gridcell">
<div
v-if="!model.isFolder"
class="btn-group pull-right"
class="btn-group environment-action-buttons"
role="group">
<actions-component
......@@ -553,6 +568,6 @@ export default {
:retry-url="retryUrl"
/>
</div>
</td>
</tr>
</div>
</div>
</template>
app/assets/javascripts/environments/components/environment_monitoring.vue
浏览文件 @ 34f925fe
......@@ -19,7 +19,7 @@ export default {
</script>
<template>
<a
class="btn monitoring-url has-tooltip"
class="btn monitoring-url has-tooltip hidden-xs hidden-sm"
data-container="body"
rel="noopener noreferrer nofollow"
:href="monitoringUrl"
......
app/assets/javascripts/environments/components/environment_rollback.vue
浏览文件 @ 34f925fe
......@@ -43,7 +43,7 @@ export default {
<template>
<button
type="button"
class="btn"
class="btn hidden-xs hidden-sm"
@click="onClick"
:disabled="isLoading">
......
app/assets/javascripts/environments/components/environment_stop.vue
浏览文件 @ 34f925fe
......@@ -47,7 +47,7 @@ export default {
<template>
<button
type="button"
class="btn stop-env-link has-tooltip"
class="btn stop-env-link has-tooltip hidden-xs hidden-sm"
data-container="body"
@click="onClick"
:disabled="isLoading"
......
app/assets/javascripts/environments/components/environment_terminal_button.vue
浏览文件 @ 34f925fe
......@@ -29,7 +29,7 @@ export default {
</script>
<template>
<a
class="btn terminal-button has-tooltip"
class="btn terminal-button has-tooltip hidden-xs hidden-sm"
data-container="body"
:title="title"
:aria-label="title"
......
app/assets/javascripts/environments/components/environments_table.vue
浏览文件 @ 34f925fe
......@@ -45,68 +45,59 @@ export default {
};
</script>
<template>
<table class="table ci-table">
<thead>
<tr>
<th class="environments-name">
Environment
</th>
<th class="environments-deploy">
Last deployment
</th>
<th class="environments-build">
Job
</th>
<th class="environments-commit">
Commit
</th>
<th class="environments-date">
Updated
</th>
<th class="environments-actions"></th>
</tr>
</thead>
<tbody>
<template
v-for="model in environments"
v-bind:model="model">
<tr
is="environment-item"
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<div class="ci-table" role="grid">
<div class="gl-responsive-table-row table-row-header" role="row">
<div class="table-section section-10 environments-name" role="rowheader">
Environment
</div>
<div class="table-section section-10 environments-deploy" role="rowheader">
Deployment
</div>
<div class="table-section section-15 environments-build" role="rowheader">
Job
</div>
<div class="table-section section-25 environments-commit" role="rowheader">
Commit
</div>
<div class="table-section section-10 environments-date" role="rowheader">
Updated
</div>
</div>
<template
v-for="model in environments"
v-bind:model="model">
<div
is="environment-item"
:model="model"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<tr v-if="isLoadingFolderContent">
<td colspan="6">
<loading-icon size="2" />
</td>
</tr>
<template v-if="model.isFolder && model.isOpen && model.children && model.children.length > 0">
<div v-if="isLoadingFolderContent">
<loading-icon size="2" />
</div>
<template v-else>
<tr
is="environment-item"
v-for="children in model.children"
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<template v-else>
<div
is="environment-item"
v-for="children in model.children"
:model="children"
:can-create-deployment="canCreateDeployment"
:can-read-environment="canReadEnvironment"
/>
<tr>
<td
colspan="6"
class="text-center">
<a
:href="folderUrl(model)"
class="btn btn-default">
Show all
</a>
</td>
</tr>
</template>
<div>
<div class="text-center prepend-top-10">
<a
:href="folderUrl(model)"
class="btn btn-default">
Show all
</a>
</div>
</div>
</template>
</template>
</tbody>
</table>
</template>
</div>
</template>
app/assets/javascripts/vue_shared/components/commit.js
浏览文件 @ 34f925fe
......@@ -135,8 +135,8 @@ export default {
{{shortSha}}
</a>
<p class="commit-title">
<span v-if="title">
<div class="commit-title flex-truncate-parent">
<span v-if="title" class="flex-truncate-child">
<user-avatar-link
v-if="hasAuthor"
class="avatar-image-container"
......@@ -153,7 +153,7 @@ export default {
<span v-else>
Cant find HEAD commit for this branch
</span>
</p>
</div>
</div>
`,
};
app/assets/stylesheets/framework.scss
浏览文件 @ 34f925fe
......@@ -49,3 +49,4 @@
@import "framework/icons.scss";
@import "framework/snippets.scss";
@import "framework/memory_graph.scss";
@import "framework/responsive-tables.scss";
app/assets/stylesheets/framework/responsive-tables.scss 0 → 100644
浏览文件 @ 34f925fe
@mixin flex-max-width($max) {
flex: 0 0 #{$max + '%'};
max-width: #{$max + '%'};
}
.gl-responsive-table-row {
margin-top: 10px;
border: 1px solid $border-color;
@media (min-width: $screen-md-min) {
padding: 15px 0;
margin: 0;
display: flex;
align-items: center;
border: none;
border-bottom: 1px solid $white-normal;
}
.table-section {
white-space: nowrap;
$section-widths: 10 15 25 30;
@each $width in $section-widths {
&.section-#{$width} {
flex: 0 0 #{$width + '%'};
@media (min-width: $screen-md-min) {
max-width: #{$width + '%'};
}
}
}
&:not(.table-button-footer) {
@media (max-width: $screen-sm-max) {
display: flex;
align-self: stretch;
padding: 10px;
align-items: center;
height: 62px;
&:not(:first-of-type) {
border-top: 1px solid $white-normal;
}
}
}
}
}
.table-row-header {
font-size: 13px;
@media (max-width: $screen-sm-max) {
display: none;
}
}
.table-mobile-header {
color: $gl-text-color-secondary;
@include flex-max-width(40);
@media (min-width: $screen-md-min) {
display: none;
}
}
.table-mobile-content {
@media (max-width: $screen-sm-max) {
@include flex-max-width(60);
text-align: right;
}
}
.flex-truncate-parent {
display: flex;
}
.flex-truncate-child {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (min-width: $screen-md-min) {
flex: 0 0 90%;
}
}
app/assets/stylesheets/pages/environments.scss
浏览文件 @ 34f925fe
......@@ -11,34 +11,7 @@
}
.environments-container {
.table-holder {
width: 100%;
@media (max-width: $screen-sm-max) {
overflow: auto;
}
}
.table.ci-table {
.environments-actions {
min-width: 300px;
}
.environments-commit,
.environments-actions {
width: 20%;
}
.environments-date {
width: 10%;
}
.environments-name,
.environments-deploy,
.environments-build {
width: 15%;
}
.ci-table {
.deployment-column {
> span {
word-break: break-all;
......@@ -150,6 +123,49 @@
}
}
.gl-responsive-table-row {
.environments-actions {
@media (min-width: $screen-md-min) {
text-align: right;
}
@media (max-width: $screen-sm-max) {
background-color: $gray-normal;
align-self: stretch;
border-top: 1px solid $border-color;
.environment-action-buttons {
padding: 10px;
display: flex;
.btn {
border-radius: 3px;
}
> .btn-group,
.external-url {
flex: 1;
flex-basis: 28px;
}
.dropdown-new {
width: 100%;
}
}
}
}
}
.folder-row {
padding: 15px 0;
border-bottom: 1px solid $white-normal;
@media (max-width: $screen-sm-max) {
border-top: 1px solid $white-normal;
margin-top: 10px;
}
}
.prometheus-graph {
text {
fill: $gl-text-color;
......
spec/features/projects/environments/environments_spec.rb
浏览文件 @ 34f925fe
......@@ -31,7 +31,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'available')
expect(page).to have_css('.environments-container')
expect(page.all('tbody > tr').length).to eq(1)
expect(page.all('.environment-name').length).to eq(1)
end
end
......@@ -59,7 +59,7 @@ feature 'Environments page', :feature, :js do
it 'should show one environment' do
visit namespace_project_environments_path(project.namespace, project, scope: 'stopped')
expect(page).to have_css('.environments-container')
expect(page.all('tbody > tr').length).to eq(1)
expect(page.all('.environment-name').length).to eq(1)
end
end
end
......
spec/javascripts/commit/pipelines/pipelines_spec.js
浏览文件 @ 34f925fe
......@@ -71,7 +71,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
it('should render a table with the received pipelines', (done) => {
setTimeout(() => {
expect(this.component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
expect(this.component.$el.querySelectorAll('.ci-table .commit').length).toEqual(1);
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.empty-state')).toBe(null);
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBe(null);
......@@ -108,7 +108,7 @@ describe('Pipelines table in Commits and Merge requests', () => {
expect(this.component.$el.querySelector('.js-pipelines-error-state')).toBeDefined();
expect(this.component.$el.querySelector('.realtime-loading')).toBe(null);
expect(this.component.$el.querySelector('.js-empty-state')).toBe(null);
expect(this.component.$el.querySelector('table')).toBe(null);
expect(this.component.$el.querySelector('.ci-table')).toBe(null);
done();
}, 0);
});
......
spec/javascripts/environments/environment_spec.js
浏览文件 @ 34f925fe
......@@ -271,7 +271,7 @@ describe('Environment', () => {
// wait for next async request
setTimeout(() => {
expect(component.$el.querySelectorAll('.js-child-row').length).toEqual(1);
expect(component.$el.querySelector('td.text-center > a.btn').textContent).toContain('Show all');
expect(component.$el.querySelector('.text-center > a.btn').textContent).toContain('Show all');
Vue.http.interceptors = _.without(Vue.http.interceptors, folderInterceptor);
done();
......
spec/javascripts/environments/environment_table_spec.js
浏览文件 @ 34f925fe
......@@ -29,6 +29,6 @@ describe('Environment item', () => {
},
}).$mount();
expect(component.$el.tagName).toEqual('TABLE');
expect(component.$el.getAttribute('class')).toContain('ci-table');
});
});
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或