diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-03 12:09:31 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-03 12:09:31 +0300 |
commit | 04baa85554ff13bdd4d6f4e6bb24119d17608fee (patch) | |
tree | 7cb9c0977e09d97da340f48703d79b2dbd3579a0 /app/assets/javascripts/static_site_editor | |
parent | 42f41de46525ce0065f02ee07c1a79f5669526a0 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/static_site_editor')
3 files changed, 56 insertions, 1 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue new file mode 100644 index 00000000000..921d93669c5 --- /dev/null +++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue @@ -0,0 +1,18 @@ +<script> +import { GlFormTextarea } from '@gitlab/ui'; + +export default { + components: { + GlFormTextarea, + }, + props: { + value: { + type: String, + required: true, + }, + }, +}; +</script> +<template> + <gl-form-textarea :value="value" v-on="$listeners" /> +</template> diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue index 7b8b46cb048..4a0e153eb33 100644 --- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue +++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue @@ -1,3 +1,37 @@ +<script> +import { mapState, mapActions } from 'vuex'; +import { GlSkeletonLoader } from '@gitlab/ui'; + +import EditArea from './edit_area.vue'; + +export default { + components: { + EditArea, + GlSkeletonLoader, + }, + computed: { + ...mapState(['content', 'isContentLoaded', 'isLoadingContent']), + }, + mounted() { + this.loadContent(); + }, + methods: { + ...mapActions(['loadContent']), + }, +}; +</script> <template> - <div></div> + <div class="d-flex justify-content-center h-100"> + <div v-if="isLoadingContent" class="w-50 h-50 mt-2"> + <gl-skeleton-loader :width="500" :height="102"> + <rect width="500" height="16" rx="4" /> + <rect y="20" width="375" height="16" rx="4" /> + <rect x="380" y="20" width="120" height="16" rx="4" /> + <rect y="40" width="250" height="16" rx="4" /> + <rect x="255" y="40" width="150" height="16" rx="4" /> + <rect x="410" y="40" width="90" height="16" rx="4" /> + </gl-skeleton-loader> + </div> + <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" /> + </div> </template> diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js index 512967cc3d9..68a7f95760c 100644 --- a/app/assets/javascripts/static_site_editor/store/state.js +++ b/app/assets/javascripts/static_site_editor/store/state.js @@ -1,4 +1,7 @@ const createState = (initialState = {}) => ({ + isLoadingContent: false, + isContentLoaded: false, + content: '', ...initialState, }); |