Move callout to vue file and remove svg from data function to improve performance
This commit is contained in:
parent
12cdc4616d
commit
660ba032d5
|
@ -1,50 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
import Translate from '../../vue_shared/translate';
|
||||
import illustrationSvg from '../icons/intro_illustration.svg';
|
||||
|
||||
Vue.use(Translate);
|
||||
|
||||
const cookieKey = 'pipeline_schedules_callout_dismissed';
|
||||
|
||||
export default {
|
||||
name: 'PipelineSchedulesCallout',
|
||||
data() {
|
||||
return {
|
||||
docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
|
||||
illustrationSvg,
|
||||
calloutDismissed: Cookies.get(cookieKey) === 'true',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dismissCallout() {
|
||||
this.calloutDismissed = true;
|
||||
Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
|
||||
},
|
||||
},
|
||||
template: `
|
||||
<div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
|
||||
<div class="bordered-box landing content-block">
|
||||
<button
|
||||
id="dismiss-callout-btn"
|
||||
class="btn btn-default close"
|
||||
@click="dismissCallout">
|
||||
<i class="fa fa-times"></i>
|
||||
</button>
|
||||
<div class="svg-container" v-html="illustrationSvg"></div>
|
||||
<div class="user-callout-copy">
|
||||
<h4>{{ __('Scheduling Pipelines') }}</h4>
|
||||
<p>
|
||||
{{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }}
|
||||
</p>
|
||||
<p> {{ __('Learn more in the') }}
|
||||
<a
|
||||
:href="docsUrl"
|
||||
target="_blank"
|
||||
rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
};
|
|
@ -0,0 +1,59 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
import Translate from '../../vue_shared/translate';
|
||||
import illustrationSvg from '../icons/intro_illustration.svg';
|
||||
|
||||
Vue.use(Translate);
|
||||
|
||||
const cookieKey = 'pipeline_schedules_callout_dismissed';
|
||||
|
||||
export default {
|
||||
name: 'PipelineSchedulesCallout',
|
||||
data() {
|
||||
return {
|
||||
docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
|
||||
calloutDismissed: Cookies.get(cookieKey) === 'true',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
dismissCallout() {
|
||||
this.calloutDismissed = true;
|
||||
Cookies.set(cookieKey, this.calloutDismissed, { expires: 365 });
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.illustrationSvg = illustrationSvg;
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div
|
||||
v-if="!calloutDismissed"
|
||||
class="pipeline-schedules-user-callout user-callout">
|
||||
<div class="bordered-box landing content-block">
|
||||
<button
|
||||
id="dismiss-callout-btn"
|
||||
class="btn btn-default close"
|
||||
@click="dismissCallout">
|
||||
<i
|
||||
aria-hidden="true"
|
||||
class="fa fa-times">
|
||||
</i>
|
||||
</button>
|
||||
<div class="svg-container" v-html="illustrationSvg"></div>
|
||||
<div class="user-callout-copy">
|
||||
<h4>{{ __('Scheduling Pipelines') }}</h4>
|
||||
<p>
|
||||
{{ __('The pipelines schedule runs pipelines in the future, repeatedly, for specific branches or tags. Those scheduled pipelines will inherit limited project access based on their associated user.') }}
|
||||
</p>
|
||||
<p> {{ __('Learn more in the') }}
|
||||
<a
|
||||
:href="docsUrl"
|
||||
target="_blank"
|
||||
rel="nofollow">{{ s__('Learn more in the|pipeline schedules documentation') }}</a>. <!-- oneline to prevent extra space before period -->
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
|
@ -1,5 +1,5 @@
|
|||
import Vue from 'vue';
|
||||
import PipelineSchedulesCallout from './components/pipeline_schedules_callout';
|
||||
import PipelineSchedulesCallout from './components/pipeline_schedules_callout.vue';
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => new Vue({
|
||||
el: '#pipeline-schedules-callout',
|
||||
|
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: Improves performance of vue code by using vue files and moving svg out of data
|
||||
function in pipeline schedule callout
|
||||
merge_request:
|
||||
author:
|
||||
type: other
|
|
@ -1,6 +1,6 @@
|
|||
import Vue from 'vue';
|
||||
import Cookies from 'js-cookie';
|
||||
import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_schedules_callout';
|
||||
import PipelineSchedulesCallout from '~/pipeline_schedules/components/pipeline_schedules_callout.vue';
|
||||
|
||||
const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
|
||||
const cookieKey = 'pipeline_schedules_callout_dismissed';
|
||||
|
|
Loading…
Reference in New Issue