diff options
Diffstat (limited to 'app/assets')
7 files changed, 65 insertions, 12 deletions
diff --git a/app/assets/javascripts/static_site_editor/components/edit_header.vue b/app/assets/javascripts/static_site_editor/components/edit_header.vue new file mode 100644 index 00000000000..5660bfbe5ae --- /dev/null +++ b/app/assets/javascripts/static_site_editor/components/edit_header.vue @@ -0,0 +1,23 @@ +<script> +import { DEFAULT_HEADING } from '../constants'; + +export default { + props: { + title: { + type: String, + required: false, + default: '', + }, + }, + computed: { + heading() { + return this.title || DEFAULT_HEADING; + }, + }, +}; +</script> +<template> + <div> + <h3 ref="sseHeading">{{ heading }}</h3> + </div> +</template> diff --git a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue index 7f00fb71b04..efb442d4d09 100644 --- a/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue +++ b/app/assets/javascripts/static_site_editor/components/publish_toolbar.vue @@ -7,6 +7,11 @@ export default { GlLoadingIcon, }, props: { + returnUrl: { + type: String, + required: false, + default: '', + }, saveable: { type: Boolean, required: false, @@ -23,12 +28,17 @@ export default { <template> <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4"> <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" /> - <gl-new-button - variant="success" - :disabled="!saveable || savingChanges" - @click="$emit('submit')" - > - {{ __('Submit Changes') }} - </gl-new-button> + <div> + <gl-new-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{ + s__('StaticSiteEditor|Return to site') + }}</gl-new-button> + <gl-new-button + variant="success" + :disabled="!saveable || savingChanges" + @click="$emit('submit')" + > + {{ __('Submit Changes') }} + </gl-new-button> + </div> </div> </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 8deae2f2c8a..4d912f5c0b5 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 @@ -3,16 +3,25 @@ import { mapState, mapGetters, mapActions } from 'vuex'; import { GlSkeletonLoader } from '@gitlab/ui'; import EditArea from './edit_area.vue'; +import EditHeader from './edit_header.vue'; import Toolbar from './publish_toolbar.vue'; export default { components: { EditArea, + EditHeader, GlSkeletonLoader, Toolbar, }, computed: { - ...mapState(['content', 'isLoadingContent', 'isSavingChanges', 'isContentLoaded']), + ...mapState([ + 'content', + 'isLoadingContent', + 'isSavingChanges', + 'isContentLoaded', + 'returnUrl', + 'title', + ]), ...mapGetters(['contentChanged']), }, mounted() { @@ -24,7 +33,7 @@ export default { }; </script> <template> - <div class="d-flex justify-content-center h-100 pt-2"> + <div class="d-flex justify-content-center h-100 pt-2"> <div v-if="isLoadingContent" class="w-50 h-50"> <gl-skeleton-loader :width="500" :height="102"> <rect width="500" height="16" rx="4" /> @@ -36,12 +45,14 @@ export default { </gl-skeleton-loader> </div> <div v-if="isContentLoaded" class="d-flex flex-grow-1 flex-column"> + <edit-header class="w-75 align-self-center py-2" :title="title" /> <edit-area class="w-75 h-100 shadow-none align-self-center" :value="content" @input="setContent" /> <toolbar + :return-url="returnUrl" :saveable="contentChanged" :saving-changes="isSavingChanges" @submit="submitChanges" diff --git a/app/assets/javascripts/static_site_editor/constants.js b/app/assets/javascripts/static_site_editor/constants.js index 5081d467016..d7ce2a93a56 100644 --- a/app/assets/javascripts/static_site_editor/constants.js +++ b/app/assets/javascripts/static_site_editor/constants.js @@ -10,3 +10,5 @@ export const SUBMIT_CHANGES_COMMIT_ERROR = s__( export const SUBMIT_CHANGES_MERGE_REQUEST_ERROR = s__( 'StaticSiteEditor|Could not create merge request.', ); + +export const DEFAULT_HEADING = s__('StaticSiteEditor|Static site editor'); diff --git a/app/assets/javascripts/static_site_editor/index.js b/app/assets/javascripts/static_site_editor/index.js index 3d40f3918a4..c6a883c659a 100644 --- a/app/assets/javascripts/static_site_editor/index.js +++ b/app/assets/javascripts/static_site_editor/index.js @@ -3,10 +3,10 @@ import StaticSiteEditor from './components/static_site_editor.vue'; import createStore from './store'; const initStaticSiteEditor = el => { - const { projectId, path: sourcePath } = el.dataset; + const { projectId, returnUrl, path: sourcePath } = el.dataset; const store = createStore({ - initialState: { projectId, sourcePath, username: window.gon.current_username }, + initialState: { projectId, returnUrl, sourcePath, username: window.gon.current_username }, }); return new Vue({ diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js index d48cc8ed1a4..98a84d9f75d 100644 --- a/app/assets/javascripts/static_site_editor/store/state.js +++ b/app/assets/javascripts/static_site_editor/store/state.js @@ -1,6 +1,7 @@ const createState = (initialState = {}) => ({ username: null, projectId: null, + returnUrl: null, sourcePath: null, isLoadingContent: false, diff --git a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue index 82b3c784f96..a0c161a335a 100644 --- a/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue +++ b/app/assets/javascripts/vue_shared/components/stacked_progress_bar.vue @@ -1,4 +1,5 @@ <script> +import { __ } from '~/locale'; import { roundOffFloat } from '~/lib/utils/common_utils'; import tooltip from '~/vue_shared/directives/tooltip'; @@ -27,6 +28,11 @@ export default { required: false, default: 'neutral', }, + unavailableLabel: { + type: String, + required: false, + default: __('Not available'), + }, successCount: { type: Number, required: true, @@ -103,7 +109,7 @@ export default { <template> <div :class="cssClass" class="stacked-progress-bar"> - <span v-if="!totalCount" class="status-unavailable"> {{ __('Not available') }} </span> + <span v-if="!totalCount" class="status-unavailable">{{ unavailableLabel }}</span> <span v-if="successPercent" v-tooltip |