diff options
Diffstat (limited to 'app/assets/javascripts/comment_templates')
5 files changed, 33 insertions, 27 deletions
diff --git a/app/assets/javascripts/comment_templates/components/app.vue b/app/assets/javascripts/comment_templates/components/app.vue index 9e0d2cc73ec..de3229acc78 100644 --- a/app/assets/javascripts/comment_templates/components/app.vue +++ b/app/assets/javascripts/comment_templates/components/app.vue @@ -3,21 +3,21 @@ export default {}; </script> <template> - <div class="row gl-mt-5"> - <div class="col-lg-4"> - <h4 class="gl-mt-0"> - {{ __('Comment templates') }} - </h4> - <p> - {{ - __( - 'Comment templates can be used when creating comments inside issues, merge requests, and epics.', - ) - }} - </p> - </div> - <div class="col-lg-8"> - <keep-alive><router-view /></keep-alive> + <div class="settings-section gl-mt-3"> + <div class="settings-sticky-header"> + <div class="settings-sticky-header-inner"> + <h4 class="gl-my-0"> + {{ __('Comment templates') }} + </h4> + </div> </div> + <p class="gl-text-secondary"> + {{ + __( + 'Comment templates can be used when creating comments inside issues, merge requests, and epics.', + ) + }} + </p> + <keep-alive><router-view /></keep-alive> </div> </template> diff --git a/app/assets/javascripts/comment_templates/components/form.vue b/app/assets/javascripts/comment_templates/components/form.vue index 47efccc3d0c..6bdf1b313cb 100644 --- a/app/assets/javascripts/comment_templates/components/form.vue +++ b/app/assets/javascripts/comment_templates/components/form.vue @@ -112,7 +112,7 @@ export default { <template> <gl-form - class="new-note common-note-form gl-mb-6" + class="new-note common-note-form" data-testid="comment-template-form" @submit.prevent="onSubmit" > diff --git a/app/assets/javascripts/comment_templates/components/list.vue b/app/assets/javascripts/comment_templates/components/list.vue index 52bebfd050c..46d6b49297d 100644 --- a/app/assets/javascripts/comment_templates/components/list.vue +++ b/app/assets/javascripts/comment_templates/components/list.vue @@ -44,14 +44,18 @@ export default { </script> <template> - <div class="gl-border-t gl-pt-4"> + <div class="settings-section"> <gl-loading-icon v-if="loading" size="lg" /> <template v-else> - <h5 class="gl-font-lg" data-testid="title"> - <gl-sprintf :message="__('My comment templates (%{count})')"> - <template #count>{{ count }}</template> - </gl-sprintf> - </h5> + <div class="settings-sticky-header"> + <div class="settings-sticky-header-inner"> + <h4 class="gl-my-0" data-testid="title"> + <gl-sprintf :message="__('My comment templates (%{count})')"> + <template #count>{{ count }}</template> + </gl-sprintf> + </h4> + </div> + </div> <ul class="gl-list-style-none gl-p-0 gl-m-0"> <list-item v-for="template in savedReplies" :key="template.id" :template="template" /> </ul> diff --git a/app/assets/javascripts/comment_templates/components/list_item.vue b/app/assets/javascripts/comment_templates/components/list_item.vue index d763700db42..70ba449113b 100644 --- a/app/assets/javascripts/comment_templates/components/list_item.vue +++ b/app/assets/javascripts/comment_templates/components/list_item.vue @@ -94,7 +94,7 @@ export default { </gl-tooltip> </div> </div> - <div class="gl-mt-3 gl-font-monospace">{{ template.content }}</div> + <div class="gl-mt-3 gl-font-monospace gl-white-space-pre-wrap">{{ template.content }}</div> <gl-modal ref="delete-modal" :title="__('Delete comment template')" diff --git a/app/assets/javascripts/comment_templates/pages/index.vue b/app/assets/javascripts/comment_templates/pages/index.vue index 72a94dafc58..daa4ba689a7 100644 --- a/app/assets/javascripts/comment_templates/pages/index.vue +++ b/app/assets/javascripts/comment_templates/pages/index.vue @@ -52,10 +52,12 @@ export default { <template> <div> - <h5 class="gl-mt-0 gl-font-lg"> - {{ __('Add new comment template') }} - </h5> - <create-form @saved="refetchSavedReplies" /> + <div class="settings-section"> + <h5 class="gl-mt-0 gl-font-lg"> + {{ __('Add new comment template') }} + </h5> + <create-form @saved="refetchSavedReplies" /> + </div> <list :loading="$apollo.queries.savedReplies.loading" :saved-replies="savedReplies" |