first commit
This commit is contained in:
210
modules/ps_buybuttonlite/app/src/App.vue
Normal file
210
modules/ps_buybuttonlite/app/src/App.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<div id="psbuybuttonlite-content">
|
||||
<el-row type="flex" justify="center">
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="20">
|
||||
<PsCard>
|
||||
<PsCardHeader>
|
||||
<template slot="headerLeft">
|
||||
<i class="material-icons">link</i> Buy button lite
|
||||
</template>
|
||||
</PsCardHeader>
|
||||
|
||||
<PsCardBlock>
|
||||
<el-row type="flex" justify="center" :gutter="100">
|
||||
<el-col :xs="24" :sm="18" :md="16" :lg="12">
|
||||
<el-form ref="form" :rules="rulesForm" :model="form" label-width="200px">
|
||||
<el-form-item :label="translations.selectProduct" prop="selectedProduct">
|
||||
<el-autocomplete v-model="product" :fetch-suggestions="querySearchAsync" :trigger-on-focus="false" :placeholder="translations.searchProduct" @select="handleSelect">
|
||||
<i slot="suffix" class="material-icons">search</i>
|
||||
<template slot-scope="{ item }">
|
||||
<div class="product-suggestion">
|
||||
<img :src="item.image_link" class="product-suggestion-image" width="50" height="50">
|
||||
<div class="product-suggestion-name">
|
||||
<div>
|
||||
<span class="product-suggestion-attributes">{{ item.name }}</span><br>
|
||||
<span v-if="item.attribute_name" class="product-suggestion-attributes">{{ item.attribute_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-autocomplete>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.selectedProduct">
|
||||
<div>
|
||||
<div class="selected-product-image">
|
||||
<img :src="form.selectedProduct.image_link" class="product-suggestion-image" width="75" height="75">
|
||||
</div>
|
||||
<div class="selected-product-name">
|
||||
<div>
|
||||
<label>{{ form.selectedProduct.name }}</label><br>
|
||||
<label>{{ form.selectedProduct.attribute_name }}</label>
|
||||
</div>
|
||||
<div class="selected-product-delete">
|
||||
<i class="material-icons red" @click="removeSelectedProduct()">close</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<Alert v-if="form.selectedProduct.customizable == 1" type="warning">{{ translations.alertCustomizableProduct }}</Alert>
|
||||
|
||||
<el-form-item :label="translations.action" prop="selectedAction">
|
||||
<el-select v-model="form.selectedAction" :placeholder="translations.action" clearable>
|
||||
<el-option label="Go to cart" value="1"></el-option>
|
||||
<el-option label="Check out" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item :label="translations.sharableLink" class="form-link">
|
||||
<span v-if="form.selectedProduct && form.selectedAction" class="generated-link">{{ redirectControllerUrl }}?id_product={{ form.selectedProduct.id_product }}&action={{ form.selectedAction }}<label class="generated-link" v-if="form.selectedProduct.id_product_attribute">&id_product_attribute={{ form.selectedProduct.id_product_attribute }}</label></span>
|
||||
<span v-else class="no-link">{{ translations.linkPlaceholder }}</span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</PsCardBlock>
|
||||
|
||||
<PsCardFooter>
|
||||
<template slot="footerRight">
|
||||
<el-button type="primary" @click="validateForm('form')">{{ translations.copyToClipboard }}</el-button>
|
||||
</template>
|
||||
</PsCardFooter>
|
||||
</PsCard>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<BannerPromo
|
||||
:idProductAddons="41139"
|
||||
:isoCode="context.country.iso_code"
|
||||
:isoLang="context.language.iso_code"
|
||||
:psVersion="ps_version"
|
||||
:trackingAddonsLink="trackingAddonsLink"
|
||||
>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span class="features"><i class="material-icons">add_circle</i> Card & Button design integration</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="features"><i class="material-icons">add_circle</i> Overview and Card Manager</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span class="features"><i class="material-icons">add_circle</i> Statistics</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="features"><i class="material-icons">add_circle</i> Virtual cart on external pages</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</BannerPromo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
import PsCard from '@/components/PsCard.vue'
|
||||
import PsCardHeader from '@/components/PsCardHeader.vue'
|
||||
import PsCardBlock from '@/components/PsCardBlock.vue'
|
||||
import PsCardFooter from '@/components/PsCardFooter.vue'
|
||||
import Alert from '@/components/Alert.vue'
|
||||
import BannerPromo from '@/components/BannerPromo.vue'
|
||||
|
||||
const shopContext = JSON.parse(context)
|
||||
const translations = JSON.parse(confTranslations)
|
||||
|
||||
export default {
|
||||
name: 'configuration',
|
||||
components: {
|
||||
BannerPromo,
|
||||
PsCard,
|
||||
PsCardHeader,
|
||||
PsCardBlock,
|
||||
PsCardFooter,
|
||||
Alert
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
product: '',
|
||||
form: {
|
||||
selectedProduct: '',
|
||||
selectedAction: ''
|
||||
},
|
||||
rulesForm: {
|
||||
selectedProduct: [
|
||||
{ required: true, message: translations.errorFormSelectProduct, trigger: 'change' }
|
||||
],
|
||||
selectedAction: [
|
||||
{ required: true, message: translations.errorFormSelectAction, trigger: 'change' }
|
||||
]
|
||||
},
|
||||
redirectControllerUrl: redirectControllerUrl,
|
||||
context: shopContext,
|
||||
translations: translations,
|
||||
trackingAddonsLink: trackingAddonsLink,
|
||||
ps_base_url: psBaseUrl,
|
||||
ps_version: psVersion
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
validateForm: function (formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
this.copyToClopboard(this.redirectControllerUrl + '?id_product=' + this.form.selectedProduct.id_product + '&action=' + this.form.selectedAction + '&id_product_attribute=' + this.form.selectedProduct.id_product_attribute)
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
querySearchAsync: function (queryString, cb) {
|
||||
const formData = new FormData()
|
||||
formData.append('action', 'SearchProducts')
|
||||
formData.append('product_search', queryString)
|
||||
|
||||
axios.post(adminAjaxController, formData)
|
||||
.then((response) => {
|
||||
cb(response.data)
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
handleSelect: function (item) {
|
||||
this.form.selectedProduct = item
|
||||
},
|
||||
removeSelectedProduct: function () {
|
||||
this.form.selectedProduct = ''
|
||||
},
|
||||
copyToClopboard: function (payload) {
|
||||
const el = document.createElement('textarea')
|
||||
el.value = payload
|
||||
el.setAttribute('readonly', '')
|
||||
el.style.position = 'absolute'
|
||||
el.style.left = '-9999px'
|
||||
document.body.appendChild(el)
|
||||
el.select()
|
||||
document.execCommand('copy')
|
||||
document.body.removeChild(el)
|
||||
|
||||
showSuccessMessage(this.translations.linkCopied)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.el-autocomplete {
|
||||
width: 60%;
|
||||
}
|
||||
.no-link {
|
||||
color: #6c868e;
|
||||
font-style: italic;
|
||||
}
|
||||
.features {
|
||||
font-weight: 700;
|
||||
}
|
||||
.features > .material-icons {
|
||||
font-size:18px;
|
||||
color: #25b9d7;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
</style>
|
||||
161
modules/ps_buybuttonlite/app/src/components/Alert.vue
Normal file
161
modules/ps_buybuttonlite/app/src/components/Alert.vue
Normal file
@@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div v-if="isActive" class="addons-alert" :class="type">
|
||||
<button v-if="closable" @click="isActive = false" type="button" class="close-addons-alert">
|
||||
<span aria-hidden="true"><i class="material-icons">close</i></span>
|
||||
</button>
|
||||
<p class="alert-text">
|
||||
<slot/>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Alert',
|
||||
data () {
|
||||
return {
|
||||
isActive: true
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
require: true
|
||||
},
|
||||
closable: {
|
||||
type: Boolean,
|
||||
require: false,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.addons-alert {
|
||||
padding: 12px 0 12px 46px;
|
||||
padding: .75rem 0 .75rem 2.875rem;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
color: #363a41;
|
||||
// padding: 12px 10px;
|
||||
// padding: .75rem .625rem;
|
||||
margin-bottom: 16px;
|
||||
margin-bottom: 1rem;
|
||||
border: 2px solid transparent;
|
||||
border: .125rem solid transparent;
|
||||
}
|
||||
.addons-alert:before {
|
||||
font-family: Material Icons;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
font-size: 1.5rem;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
vertical-align: middle;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-feature-settings: "liga";
|
||||
font-feature-settings: "liga";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 46px;
|
||||
width: 2.875rem;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 25.008px;
|
||||
font-size: 1.563rem;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
}
|
||||
.addons-alert.info {
|
||||
border-color: #25b9d7;
|
||||
}
|
||||
.info:before {
|
||||
content: "\E88F";
|
||||
background-color: #dff5f9;
|
||||
color: #25b9d7;
|
||||
}
|
||||
.addons-alert.warning {
|
||||
border-color: #cd9321;
|
||||
}
|
||||
.warning:before {
|
||||
content: "\E001";
|
||||
background-color: #fde7bb;
|
||||
color: #cd9321;
|
||||
}
|
||||
.addons-alert.danger {
|
||||
border-color: #c05c67;
|
||||
}
|
||||
.danger:before {
|
||||
content: "\E001";
|
||||
background-color: #fde1e1;
|
||||
color: #c05c67;
|
||||
}
|
||||
.addons-alert.success {
|
||||
border-color: #70b580;
|
||||
}
|
||||
.success:before {
|
||||
content: "\E5CA";
|
||||
background-color: #d6f0d8;
|
||||
color: #70b580;
|
||||
}
|
||||
.close-addons-alert {
|
||||
color: #6c868e;
|
||||
margin-right: 10px;
|
||||
margin-right: .625rem;
|
||||
opacity: 1;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
-webkit-appearance: none;
|
||||
float: right;
|
||||
font-size: 21px;
|
||||
font-size: 1.3125rem;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
color: #000;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
// opacity: .5;
|
||||
}
|
||||
.addons-alert.info .close-addons-alert {
|
||||
color: #25b9d7 !important;
|
||||
}
|
||||
.addons-alert.success .close-addons-alert {
|
||||
color: #70b580 !important;
|
||||
}
|
||||
.addons-alert.warning .close-addons-alert {
|
||||
color: #cd9321 !important;
|
||||
}
|
||||
.addons-alert.danger .close-addons-alert {
|
||||
color: #c05c67 !important;
|
||||
}
|
||||
.close-addons-alert .material-icons {
|
||||
font-size: 18px;
|
||||
font-size: 1.125rem;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
.alert-text {
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
margin: unset !important;
|
||||
}
|
||||
</style>
|
||||
196
modules/ps_buybuttonlite/app/src/components/BannerPromo.vue
Normal file
196
modules/ps_buybuttonlite/app/src/components/BannerPromo.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div v-show="Object.keys(product).length > 0" class="banner-block">
|
||||
<el-row justify="center" :gutter="50">
|
||||
<el-col :xs="24" :sm="24" :md="8" :lg="6">
|
||||
<div style="display:inline-flex;">
|
||||
<div class="pico">
|
||||
<img :src="product.img">
|
||||
</div>
|
||||
<div style="margin-left:20px">
|
||||
<p class="go-further">{{ translations.goFurther }}</p>
|
||||
<span class="product-name">{{ product.displayName }}</span>
|
||||
<p class="addons">{{ translations.addonsMarketplace }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="16" :lg="12">
|
||||
<p>{{ product.fullDescription }}</p>
|
||||
<slot/>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="6" class="center">
|
||||
<el-button type="text" @click="dialogDiscover = true"><i class="material-icons" style="vertical-align:middle">computer</i> {{ translations.screenshots }}</el-button>
|
||||
<el-button type="primary" @click="redirectToAddons()">{{ translations.discover }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-dialog id="dialog-preview-addons" :visible.sync="dialogDiscover">
|
||||
<el-carousel id="screenshot-preview-addons" :interval="5000" height="66.67vh" arrow="always" indicator-position="none">
|
||||
<el-carousel-item v-for="picture in product.pictures" :key="parseInt(picture)" :style="'background-image:url('+picture.big+')'">
|
||||
<!-- <img :src="picture.big" width="" height=""> -->
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
<el-row class="dialog-preview-addons-footer" type="flex" justify="center">
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
||||
<el-button class="by-prestashop" type="text" @click="dialogDiscover = true"><i class="material-icons" style="vertical-align:middle">check_circle</i> {{ translations.developedBy }}</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="12" :lg="12">
|
||||
<el-button class="right" type="primary" @click="redirectToAddons()">{{ translations.discoverOn }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios'
|
||||
|
||||
const translations = JSON.parse(bannerPromoTranslations)
|
||||
|
||||
export default {
|
||||
name: 'BannerPromo',
|
||||
data: function () {
|
||||
return {
|
||||
dialogDiscover: false,
|
||||
product: '',
|
||||
translations: translations
|
||||
}
|
||||
},
|
||||
props: {
|
||||
idProductAddons: Number,
|
||||
isoCode: String,
|
||||
isoLang: String,
|
||||
psVersion: String,
|
||||
trackingAddonsLink: String
|
||||
},
|
||||
created: function () {
|
||||
axios.get('https://api.addons.prestashop.com/index.php', {
|
||||
params: {
|
||||
method: 'prediggo',
|
||||
action: 'product',
|
||||
iso_lang: this.isoLang,
|
||||
iso_code: this.isoCode,
|
||||
version: this.psVersion,
|
||||
id_product: this.idProductAddons
|
||||
}
|
||||
}).then((response) => {
|
||||
this.product = response.data
|
||||
}).catch((error) => {
|
||||
console.log(error)
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
redirectToAddons: function () {
|
||||
window.open(this.trackingAddonsLink, '_blank')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.go-further {
|
||||
font-size: 14px;
|
||||
}
|
||||
.product-name {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.addons {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #DF0067;
|
||||
}
|
||||
.banner-block {
|
||||
width: 100%;
|
||||
padding: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: #FFFFFF;
|
||||
box-shadow: 0 0 14px 0 rgba(0,0,0,0.06);
|
||||
}
|
||||
.dialog-preview-addons-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.by-prestashop {
|
||||
color: white !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
.by-prestashop {
|
||||
color: white !important;
|
||||
}
|
||||
.center {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
#dialog-preview-addons .el-dialog {
|
||||
width: 100vh !important;
|
||||
}
|
||||
#dialog-preview-addons .el-dialog__header {
|
||||
padding: 0 !important;
|
||||
}
|
||||
#dialog-preview-addons .el-dialog__body {
|
||||
padding: 0 !important;
|
||||
}
|
||||
#dialog-preview-addons .el-dialog__headerbtn {
|
||||
top: -40px !important;
|
||||
right: -40px !important;
|
||||
}
|
||||
#dialog-preview-addons .el-dialog__headerbtn .el-dialog__close {
|
||||
color: #ffffff;
|
||||
font-size: 24px;
|
||||
font-weight: 900;
|
||||
}
|
||||
#dialog-preview-addons .el-dialog__headerbtn .el-dialog__close:hover {
|
||||
color: #25B9D7;
|
||||
}
|
||||
|
||||
#screenshot-preview-addons.el-carousel {
|
||||
overflow: unset !important;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
#screenshot-preview-addons > .el-carousel__container {
|
||||
overflow: hidden;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow--left {
|
||||
left: -50px !important;
|
||||
position: fixed;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow--left:hover {
|
||||
color: #25B9D7;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow--right {
|
||||
right: -50px !important;
|
||||
position: fixed;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow--right:hover {
|
||||
color: #25B9D7;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow {
|
||||
background-color: unset !important;
|
||||
}
|
||||
#screenshot-preview-addons .el-carousel__arrow:hover {
|
||||
background-color: unset !important;
|
||||
}
|
||||
#screenshot-preview-addons .el-icon-arrow-left {
|
||||
font-size: 32px !important;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
#screenshot-preview-addons .el-icon-arrow-left:hover {
|
||||
color: #25B9D7;
|
||||
}
|
||||
#screenshot-preview-addons .el-icon-arrow-right {
|
||||
font-size: 32px !important;
|
||||
font-weight: 900 !important;
|
||||
}
|
||||
#screenshot-preview-addons .el-icon-arrow-right:hover {
|
||||
color: #25B9D7;
|
||||
}
|
||||
</style>
|
||||
26
modules/ps_buybuttonlite/app/src/components/PsCard.vue
Normal file
26
modules/ps_buybuttonlite/app/src/components/PsCard.vue
Normal file
@@ -0,0 +1,26 @@
|
||||
<template>
|
||||
<div class="ps-card">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PsCard'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ps-card {
|
||||
position: relative;
|
||||
display: block;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: .75rem;
|
||||
background-color: #fff;
|
||||
border: 1px solid #dbe6e9;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 4px 0 rgba(0,0,0,.06);
|
||||
font-family: Open Sans,Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
18
modules/ps_buybuttonlite/app/src/components/PsCardBlock.vue
Normal file
18
modules/ps_buybuttonlite/app/src/components/PsCardBlock.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div class="ps-card-block">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PsCardBlock'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ps-card-block {
|
||||
padding: 20px;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
</style>
|
||||
27
modules/ps_buybuttonlite/app/src/components/PsCardFooter.vue
Normal file
27
modules/ps_buybuttonlite/app/src/components/PsCardFooter.vue
Normal file
@@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div class="ps-card-footer clearfix">
|
||||
</slot>
|
||||
<div class="justify-content-start">
|
||||
<slot name="footerLeft"></slot>
|
||||
</div>
|
||||
<div class="justify-content-end">
|
||||
<slot name="footerRight"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PsCardFooter'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ps-card-footer {
|
||||
padding: 10px 15px;
|
||||
padding: .625rem .9375rem;
|
||||
background-color: #fafbfc !important;
|
||||
border-top: 1px solid #e5e5e5;
|
||||
font-family: Open Sans,Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
42
modules/ps_buybuttonlite/app/src/components/PsCardHeader.vue
Normal file
42
modules/ps_buybuttonlite/app/src/components/PsCardHeader.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div class="ps-card-header clearfix">
|
||||
</slot>
|
||||
<div class="justify-content-start">
|
||||
<slot name="headerLeft"></slot>
|
||||
</div>
|
||||
<div class="justify-content-end">
|
||||
<slot name="headerRight"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PsCardHeader'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ps-card-header {
|
||||
padding: 10px !important;
|
||||
padding: .625rem ! important;
|
||||
background-color: #fafbfc !important;
|
||||
border-bottom: 1px solid #e5e5e5 !important;
|
||||
font-size: 1rem !important;
|
||||
font-weight: 600;
|
||||
line-height: 1.5 !important;
|
||||
color: #363a41 !important;
|
||||
margin: unset !important;
|
||||
margin-top: 0;
|
||||
text-transform: unset !important;
|
||||
font-family: Open Sans,Helvetica,Arial,sans-serif !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.ps-card-header .material-icons {
|
||||
vertical-align: text-bottom;
|
||||
color: #6c868e;
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
11
modules/ps_buybuttonlite/app/src/main.js
Normal file
11
modules/ps_buybuttonlite/app/src/main.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import locale from 'element-ui/lib/locale/lang/en'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI, { locale })
|
||||
|
||||
new Vue({
|
||||
render: h => h(App)
|
||||
}).$mount('#ps_buybuttonlite')
|
||||
Reference in New Issue
Block a user