glib-web 0.6.13 → 0.6.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/component.vue +3 -0
- package/components/fields/file.vue +15 -4
- package/components/socialSharing.vue +123 -0
- package/index.js +5 -0
- package/package.json +5 -3
package/components/component.vue
CHANGED
|
@@ -113,6 +113,8 @@ import SelectBanner from "./banners/select";
|
|
|
113
113
|
import LineChart from "./charts/line";
|
|
114
114
|
import ColumnChart from "./charts/column";
|
|
115
115
|
|
|
116
|
+
import SocialSharing from "./socialSharing";
|
|
117
|
+
|
|
116
118
|
export default {
|
|
117
119
|
components: {
|
|
118
120
|
"views-h1": H1,
|
|
@@ -143,6 +145,7 @@ export default {
|
|
|
143
145
|
"views-map": Map,
|
|
144
146
|
"views-tabBar": TabBar,
|
|
145
147
|
"views-calendar": Calendar,
|
|
148
|
+
"views-socialSharing": SocialSharing,
|
|
146
149
|
|
|
147
150
|
"fields-hidden": HiddenField,
|
|
148
151
|
"fields-text": TextField,
|
|
@@ -5,23 +5,34 @@
|
|
|
5
5
|
<v-avatar
|
|
6
6
|
v-if="placeholder.type == 'avatar'"
|
|
7
7
|
:style="genericStyles(placeholder)"
|
|
8
|
+
class="mr-4"
|
|
8
9
|
>
|
|
9
10
|
<img :src="fileImage || placeholder.url" />
|
|
10
11
|
</v-avatar>
|
|
11
12
|
<img
|
|
12
13
|
v-else-if="placeholder.type == 'image'"
|
|
13
|
-
class="square-image"
|
|
14
|
+
class="square-image mr-4"
|
|
14
15
|
:style="genericStyles(placeholder)"
|
|
15
16
|
:src="fileImage || placeholder.url"
|
|
16
17
|
/>
|
|
17
|
-
<span v-else>{{ fileTitle }}</span>
|
|
18
|
+
<span v-else class="mr-4">{{ fileTitle }}</span>
|
|
18
19
|
|
|
19
|
-
<span
|
|
20
|
+
<span v-if="spec.uploadText">
|
|
21
|
+
<v-btn :class="$classes()" @click="triggerUpload">
|
|
22
|
+
<v-icon> {{ spec.uploadIcon || "upload" }} </v-icon>
|
|
23
|
+
{{ spec.uploadText }}
|
|
24
|
+
</v-btn>
|
|
25
|
+
|
|
26
|
+
<v-btn v-if="fileImage" icon @click="removeImage">
|
|
27
|
+
<v-icon>close</v-icon>
|
|
28
|
+
</v-btn>
|
|
29
|
+
</span>
|
|
30
|
+
<span v-else class="action-container">
|
|
20
31
|
<v-btn icon @click="triggerUpload">
|
|
21
32
|
<v-icon>edit</v-icon>
|
|
22
33
|
</v-btn>
|
|
23
34
|
|
|
24
|
-
<v-btn icon @click="removeImage">
|
|
35
|
+
<v-btn v-if="fileImage" icon @click="removeImage">
|
|
25
36
|
<v-icon>close</v-icon>
|
|
26
37
|
</v-btn>
|
|
27
38
|
</span>
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<ShareNetwork
|
|
3
|
+
:network="spec.network"
|
|
4
|
+
:style="{ backgroundColor: config[spec.network].color }"
|
|
5
|
+
:url="spec.url"
|
|
6
|
+
:title="spec.title"
|
|
7
|
+
:description="spec.description"
|
|
8
|
+
:quote="spec.quote"
|
|
9
|
+
:hashtags="spec.hashtags"
|
|
10
|
+
:twitter-user="spec.twitterUser"
|
|
11
|
+
>
|
|
12
|
+
<i :class="config[spec.network].icon"></i>
|
|
13
|
+
<!-- <v-icon dark class="fah">facebook</v-icon> -->
|
|
14
|
+
<span v-if="spec.text">{{ spec.text }}</span>
|
|
15
|
+
</ShareNetwork>
|
|
16
|
+
</template>
|
|
17
|
+
|
|
18
|
+
<script>
|
|
19
|
+
export default {
|
|
20
|
+
props: {
|
|
21
|
+
spec: { type: Object, required: true }
|
|
22
|
+
},
|
|
23
|
+
data() {
|
|
24
|
+
return {
|
|
25
|
+
config: {
|
|
26
|
+
email: {
|
|
27
|
+
icon: "far fah fa-lg fa-envelope",
|
|
28
|
+
color: "#333333"
|
|
29
|
+
},
|
|
30
|
+
facebook: {
|
|
31
|
+
icon: "fab fah fa-lg fa-facebook-f",
|
|
32
|
+
color: "#1877f2"
|
|
33
|
+
},
|
|
34
|
+
hackernews: {
|
|
35
|
+
icon: "fab fah fa-lg fa-hacker-news",
|
|
36
|
+
color: "#ff4000"
|
|
37
|
+
},
|
|
38
|
+
instapaper: {
|
|
39
|
+
icon: "fas fah fa-lg fa-italic",
|
|
40
|
+
color: "#428bca"
|
|
41
|
+
},
|
|
42
|
+
line: {
|
|
43
|
+
icon: "fab fah fa-lg fa-line",
|
|
44
|
+
color: "#00c300"
|
|
45
|
+
},
|
|
46
|
+
linkedin: {
|
|
47
|
+
icon: "fab fah fa-lg fa-linkedin",
|
|
48
|
+
color: "#007bb5"
|
|
49
|
+
},
|
|
50
|
+
messenger: {
|
|
51
|
+
icon: "fab fah fa-lg fa-facebook-messenger",
|
|
52
|
+
color: "#0084ff"
|
|
53
|
+
},
|
|
54
|
+
pinterest: {
|
|
55
|
+
icon: "fab fah fa-lg fa-pinterest",
|
|
56
|
+
color: "#bd081c"
|
|
57
|
+
},
|
|
58
|
+
reddit: {
|
|
59
|
+
icon: "fab fah fa-lg fa-reddit-alien",
|
|
60
|
+
color: "#ff4500"
|
|
61
|
+
},
|
|
62
|
+
telegram: {
|
|
63
|
+
icon: "fab fah fa-lg fa-telegram-plane",
|
|
64
|
+
color: "#0088cc"
|
|
65
|
+
},
|
|
66
|
+
tumblr: {
|
|
67
|
+
icon: "fab fah fa-lg fa-tumblr",
|
|
68
|
+
color: "#35465c"
|
|
69
|
+
},
|
|
70
|
+
twitter: {
|
|
71
|
+
icon: "fab fah fa-lg fa-twitter",
|
|
72
|
+
color: "#1da1f2"
|
|
73
|
+
},
|
|
74
|
+
weibo: {
|
|
75
|
+
icon: "fab fah fa-lg fa-weibo",
|
|
76
|
+
color: "#e9152d"
|
|
77
|
+
},
|
|
78
|
+
whatsapp: {
|
|
79
|
+
icon: "fab fah fa-lg fa-whatsapp",
|
|
80
|
+
color: "#25d366"
|
|
81
|
+
},
|
|
82
|
+
wordpress: {
|
|
83
|
+
icon: "fab fah fa-lg fa-wordpress",
|
|
84
|
+
color: "#21759b"
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
};
|
|
90
|
+
</script>
|
|
91
|
+
|
|
92
|
+
<style scoped>
|
|
93
|
+
a[class^="share-network-"] {
|
|
94
|
+
flex: none;
|
|
95
|
+
color: #ffffff;
|
|
96
|
+
background-color: #333;
|
|
97
|
+
border-radius: 3px;
|
|
98
|
+
overflow: hidden;
|
|
99
|
+
display: flex;
|
|
100
|
+
flex-direction: row;
|
|
101
|
+
align-content: center;
|
|
102
|
+
align-items: center;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
margin: 0 10px 10px 0;
|
|
105
|
+
text-decoration: none;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
a[class^="share-network-"] .fah {
|
|
109
|
+
background-color: rgba(0, 0, 0, 0.2);
|
|
110
|
+
padding: 10px;
|
|
111
|
+
flex: 0 1 auto;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
a[class^="share-network-"] span {
|
|
115
|
+
padding: 0 10px;
|
|
116
|
+
flex: 1 1 0%;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
a.share-network-twitter {
|
|
121
|
+
background-color: #1da1f2;
|
|
122
|
+
}
|
|
123
|
+
</style>
|
package/index.js
CHANGED
|
@@ -16,6 +16,8 @@ import "./styles/test.sass";
|
|
|
16
16
|
|
|
17
17
|
import Vuetify from "vuetify";
|
|
18
18
|
import "vuetify/dist/vuetify.min.css";
|
|
19
|
+
// Only used for social media icons
|
|
20
|
+
import "@fortawesome/fontawesome-free/css/all.css";
|
|
19
21
|
// import "material-design-icons-iconfont/dist/material-design-icons.css";
|
|
20
22
|
// import "@mdi/font/css/materialdesignicons.css";
|
|
21
23
|
Vue.use(Vuetify);
|
|
@@ -36,6 +38,9 @@ Vue.use(VueYoutube);
|
|
|
36
38
|
// id: 'UA-146876849-1'
|
|
37
39
|
// })
|
|
38
40
|
|
|
41
|
+
import VueSocialSharing from "vue-social-sharing";
|
|
42
|
+
Vue.use(VueSocialSharing);
|
|
43
|
+
|
|
39
44
|
import "./extensions/string.js";
|
|
40
45
|
import "./extensions/array.js";
|
|
41
46
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "glib-web",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.16",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -13,8 +13,10 @@
|
|
|
13
13
|
"@rails/actioncable": "^6.0.0",
|
|
14
14
|
"@rails/activestorage": "^6.0.0-alpha",
|
|
15
15
|
"awesome-phonenumber": "2.15.0",
|
|
16
|
+
"@fortawesome/fontawesome-free": "^5.0.0",
|
|
16
17
|
"chart.js": "^2.8.0",
|
|
17
18
|
"chartjs-plugin-annotation": "^0.5.7",
|
|
19
|
+
"driver.js": "^0.9.8",
|
|
18
20
|
"json-logic-js": "^1.2.2",
|
|
19
21
|
"marked": "^0.7.0",
|
|
20
22
|
"phoenix": "^1.5.3",
|
|
@@ -24,12 +26,12 @@
|
|
|
24
26
|
"vue": "2.6.10",
|
|
25
27
|
"vue-chartkick": "^0.6.1",
|
|
26
28
|
"vue-gtag": "^1.1.2",
|
|
29
|
+
"vue-social-sharing": "^3.0.9",
|
|
27
30
|
"vue-youtube": "^1.4.0",
|
|
28
31
|
"vue2-editor": "^2.9.1",
|
|
29
32
|
"vue2-google-maps": "^0.10.6",
|
|
30
33
|
"vuedraggable": "^2.24.1",
|
|
31
|
-
"vuetify": "2.3.9"
|
|
32
|
-
"driver.js": "^0.9.8"
|
|
34
|
+
"vuetify": "2.3.9"
|
|
33
35
|
},
|
|
34
36
|
"devDependencies": {
|
|
35
37
|
"@types/chart.js": "^2.9.34",
|