Skip to content

Commit

Permalink
feat: replace CalculatorShareButton with new calculator-quick-share
Browse files Browse the repository at this point in the history
  • Loading branch information
ozgurg committed Apr 1, 2024
1 parent 1fe1695 commit 4ebbc37
Show file tree
Hide file tree
Showing 7 changed files with 175 additions and 50 deletions.
35 changes: 0 additions & 35 deletions components/Calculator/CalculatorShareButton.vue

This file was deleted.

105 changes: 105 additions & 0 deletions components/Calculator/calculator-quick-share.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<template>
<div class="calculator-quick-share grey darken-4">
<template v-for="_item in items">
<v-btn
:key="_item.title"
:href="_item.url"
:color="_item.color"
:title="_item.title"
elevation="0"
rel="nofollow noopener noreferrer"
target="_blank">
<vh-icon
:icon="_item.icon"
size="28" />
</v-btn>
</template>

<v-btn
elevation="0"
light=""
@click="emitOtherClicked()">
Diğer…
</v-btn>
</div>
</template>

<script>
import { mdiFacebook, mdiWhatsapp } from "@mdi/js";
import {
createFacebookShareUrl,
createWhatsAppShareUrl,
createXShareUrl
} from "@/utils/create-social-media-share-url.js";
import { createShareUrlOfCalculator } from "@/utils/create-share-url-of-calculator.js";
export default {
emits: ["click:other"],
props: {
queryString: {
type: Object,
default: () => {
}
}
},
methods: {
emitOtherClicked() {
const vm = this;
vm.$emit("click:other");
}
},
computed: {
url() {
const vm = this;
return createShareUrlOfCalculator(vm.$route.path, vm.queryString, true);
},
items() {
const vm = this;
return [
{
url: createFacebookShareUrl(vm.url),
title: "Facebook'ta paylaş",
color: "#0566ff",
icon: mdiFacebook
},
{
url: createXShareUrl(vm.url, ""),
title: "X'de paylaş",
color: "#000",
icon: "x.svg"
},
{
url: createWhatsAppShareUrl(vm.url),
title: "WhatsApp ile gönder",
color: "#25d366",
icon: mdiWhatsapp
}
];
}
}
};
</script>

<style lang="scss" scoped="">
$padding: .625rem;
$button-border-radius: .5rem;
$button-border-radius-large: 1rem;
.calculator-quick-share {
display: flex;
flex-flow: row nowrap;
gap: .5rem;
border-radius: calc(#{$button-border-radius-large} + #{$padding});
padding: $padding;
.v-btn {
flex: 1;
border-radius: $button-border-radius;
&:first-child {
border-radius: $button-border-radius-large $button-border-radius $button-border-radius $button-border-radius-large
}
&:last-child {
border-radius: $button-border-radius $button-border-radius-large $button-border-radius-large $button-border-radius
}
}
}
</style>
17 changes: 14 additions & 3 deletions pages/kdv-hesaplayici/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,14 @@
:items="resultList"
class="mb-10" />

<form-row direction="horizontal">
<CalculatorShareButton
<form-row
label="Sonuçları paylaş"
direction="horizontal">
<calculator-quick-share
:query-string="form"
@click:other="showShareDialog()" />
<CalculatorShareDialog
v-model="ui.isShareDialogShown"
:screenshot-output="resultList"
:form="form"
:calculator-title="page.title" />
Expand Down Expand Up @@ -115,7 +121,8 @@ export default {
title: "%20",
form: { rate: 20 }
}
]
],
isShareDialogShown: false
},
form: {
price: "",
Expand All @@ -125,6 +132,10 @@ export default {
results: {}
}),
methods: {
showShareDialog() {
const vm = this;
vm.ui.isShareDialogShown = true;
},
isPresetActive(preset) {
const vm = this;
return preset.form.rate === vm.form.rate;
Expand Down
17 changes: 14 additions & 3 deletions pages/konsol-vergisi-hesaplayici/_slug.vue
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,14 @@
</form-row>
</div>

<form-row direction="horizontal">
<CalculatorShareButton
<form-row
label="Sonuçları paylaş"
direction="horizontal">
<calculator-quick-share
:query-string="form"
@click:other="showShareDialog()" />
<CalculatorShareDialog
v-model="ui.isShareDialogShown"
:screenshot-input="screenshotInput"
:screenshot-output="resultList"
:form="form"
Expand Down Expand Up @@ -108,6 +114,10 @@ export default {
}),
methods: {
moneyFormat,
showShareDialog() {
const vm = this;
vm.ui.isShareDialogShown = true;
},
_calculate() {
const vm = this;
Expand Down Expand Up @@ -198,7 +208,8 @@ export default {
preset,
ui: {
options,
otherCalculations
otherCalculations,
isShareDialogShown: false
},
form
};
Expand Down
17 changes: 14 additions & 3 deletions pages/konsol-vergisi-hesaplayici/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -78,8 +78,14 @@
class="mb-10" />
</form-row>

<form-row direction="horizontal">
<CalculatorShareButton
<form-row
label="Sonuçları paylaş"
direction="horizontal">
<calculator-quick-share
:query-string="form"
@click:other="showShareDialog()" />
<CalculatorShareDialog
v-model="ui.isShareDialogShown"
:screenshot-input="screenshotInput"
:screenshot-output="resultList"
:form="form"
Expand Down Expand Up @@ -112,7 +118,8 @@ export default {
data: () => ({
page: konsolVergisiHesaplayiciPage,
ui: {
calculations: buildCalculations()
calculations: buildCalculations(),
isShareDialogShown: false
},
form: {
currency: "USD",
Expand All @@ -121,6 +128,10 @@ export default {
results: {}
}),
methods: {
showShareDialog() {
const vm = this;
vm.ui.isShareDialogShown = true;
},
_calculate() {
const vm = this;
Expand Down
17 changes: 14 additions & 3 deletions pages/telefon-vergisi-hesaplayici/_slug.vue
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,14 @@
</form-row>
</div>

<form-row direction="horizontal">
<CalculatorShareButton
<form-row
label="Sonuçları paylaş"
direction="horizontal">
<calculator-quick-share
:query-string="form"
@click:other="showShareDialog()" />
<CalculatorShareDialog
v-model="ui.isShareDialogShown"
:screenshot-input="screenshotInput"
:screenshot-output="resultList"
:form="form"
Expand Down Expand Up @@ -121,6 +127,10 @@ export default {
}),
methods: {
moneyFormat,
showShareDialog() {
const vm = this;
vm.ui.isShareDialogShown = true;
},
_calculate() {
const vm = this;
Expand Down Expand Up @@ -220,7 +230,8 @@ export default {
ui: {
options,
otherCalculations,
registration: registrationOptions
registration: registrationOptions,
isShareDialogShown: false
},
form
};
Expand Down
17 changes: 14 additions & 3 deletions pages/telefon-vergisi-hesaplayici/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -86,8 +86,14 @@
class="mb-10" />
</form-row>

<form-row direction="horizontal">
<CalculatorShareButton
<form-row
label="Sonuçları paylaş"
direction="horizontal">
<calculator-quick-share
:query-string="form"
@click:other="showShareDialog()" />
<CalculatorShareDialog
v-model="ui.isShareDialogShown"
:screenshot-input="screenshotInput"
:screenshot-output="resultList"
:form="form"
Expand Down Expand Up @@ -122,7 +128,8 @@ export default {
page: telefonVergisiHesaplayiciPage,
ui: {
calculations: buildCalculations(),
registration: registrationOptions
registration: registrationOptions,
isShareDialogShown: false
},
form: {
currency: "USD",
Expand All @@ -132,6 +139,10 @@ export default {
results: {}
}),
methods: {
showShareDialog() {
const vm = this;
vm.ui.isShareDialogShown = true;
},
_calculate() {
const vm = this;
Expand Down

0 comments on commit 4ebbc37

Please sign in to comment.