diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-28 18:10:08 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-28 18:10:08 +0300 |
commit | f7f0c0502763777f48964774a87b0a34dfb1d9ab (patch) | |
tree | 777821671f0eba38eadd5f60da96a1e54870350a /app/assets/javascripts/vue_shared | |
parent | 10cb807543dca60b59a380100d1b70730d0e8b29 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/vue_shared')
-rw-r--r-- | app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue | 34 | ||||
-rw-r--r-- | app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue | 35 |
2 files changed, 69 insertions, 0 deletions
diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue new file mode 100644 index 00000000000..6045d75ac11 --- /dev/null +++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_layout.vue @@ -0,0 +1,34 @@ +<script> +import SectionLoader from './section_loader.vue'; + +export default { + name: 'SectionLayout', + components: { + SectionLoader, + }, + props: { + heading: { + type: String, + required: true, + }, + isLoading: { + type: Boolean, + required: false, + default: false, + }, + }, +}; +</script> + +<template> + <div class="row gl-m-0 gl-border-b gl-line-height-20 gl-py-6"> + <div class="col-lg-4 gl-pl-0 gl-pr-9"> + <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2> + <slot name="description"></slot> + </div> + <div class="col-lg-8 gl-pr-0 gl-pl-0"> + <section-loader v-if="isLoading" /> + <slot v-else name="features"></slot> + </div> + </div> +</template> diff --git a/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue new file mode 100644 index 00000000000..b15e25b0943 --- /dev/null +++ b/app/assets/javascripts/vue_shared/security_configuration/components/section_loader.vue @@ -0,0 +1,35 @@ +<script> +import { GlCard, GlSkeletonLoader } from '@gitlab/ui'; + +export default { + name: 'SectionLoader', + components: { + GlCard, + GlSkeletonLoader, + }, +}; +</script> + +<template> + <div> + <gl-skeleton-loader :width="1248" :height="180"> + <rect x="0" y="0" width="100" height="15" rx="4" /> + <rect x="0" y="24" width="460" height="32" rx="4" /> + <rect x="0" y="71" width="100" height="15" rx="4" /> + <rect x="0" y="95" width="460" height="72" rx="4" /> + </gl-skeleton-loader> + <gl-card v-for="i in 2" :key="i" class="gl-mb-5"> + <template #header> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="300" height="15" rx="4" /> + </gl-skeleton-loader> + </template> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="600" height="15" rx="4" /> + </gl-skeleton-loader> + <gl-skeleton-loader :width="1248" :height="15"> + <rect x="0" y="0" width="300" height="15" rx="4" /> + </gl-skeleton-loader> + </gl-card> + </div> +</template> |