@silexlabs/silex-dashboard 1.0.36 → 1.0.38

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.
Files changed (32) hide show
  1. package/.gitmodules +3 -0
  2. package/.silex-client.js +4 -4
  3. package/.silex.js +8 -8
  4. package/_data/api-translations.json +8 -2
  5. package/_includes/api-websites.js.html +24 -1
  6. package/_includes/connectors.html +145 -166
  7. package/_includes/websites.html +155 -171
  8. package/_silex/old/meta.json +1 -0
  9. package/_site/css/connectors.css +1 -1
  10. package/_site/css/websites.css +1 -1
  11. package/_site/en/connectors/index.html +145 -166
  12. package/_site/en/index.html +179 -172
  13. package/_site/fr/connectors/index.html +145 -166
  14. package/_site/fr/index.html +179 -172
  15. package/package.json +2 -2
  16. package/pages/connectors.css.liquid +1 -1
  17. package/pages/en/index.md +2 -0
  18. package/pages/fr/index.md +2 -0
  19. package/pages/websites.css.liquid +1 -1
  20. package/_silex/default/meta.json +0 -1
  21. /package/_silex/{default → old}/assets/alex-hoyau.jpg +0 -0
  22. /package/_silex/{default → old}/assets/alex-small.jpg +0 -0
  23. /package/_silex/{default → old}/assets/bg-purpel-silex.webp +0 -0
  24. /package/_silex/{default → old}/assets/bg-silex-purpel.webp +0 -0
  25. /package/_silex/{default → old}/assets/empty-projects-sos.gif +0 -0
  26. /package/_silex/{default → old}/assets/empty-projects.gif +0 -0
  27. /package/_silex/{default → old}/assets/gitlab.svg +0 -0
  28. /package/_silex/{default → old}/assets/logo-silex.svg +0 -0
  29. /package/_silex/{default → old}/assets/picto-silex.png +0 -0
  30. /package/_silex/{default → old}/assets/picto-silex@3x.png +0 -0
  31. /package/_silex/{default → old}/assets/silex-icon-2018@200px.png +0 -0
  32. /package/_silex/{default → old}/website.json +0 -0
package/_site/en/index.html CHANGED
@@ -1,169 +1,149 @@
1
-
2
- <!DOCTYPE html>
3
- <html lang="">
4
- <head>
5
- <link rel="stylesheet" href="/css/websites.css" />
6
- <!-- font google -->
1
+ <!DOCTYPE html>
2
+ <html lang="">
3
+ <head>
4
+ <link rel="stylesheet" href="/css/websites.css" />
5
+ <!-- font google -->
7
6
  <link rel="preconnect" href="https://fonts.gstatic.com" />
8
7
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;700&display=swap" rel="stylesheet">
9
8
 
10
-
11
9
  <link
12
10
  rel="alternate"
13
11
  hreflang="fr"
14
12
  href="/fr/" />
15
-
16
13
  <style>
17
- .before-js > * {
18
- visibility: hidden;
19
- opacity: 0;
20
- transition: opacity .5s ease;
21
- }
22
- .after-js > * {
23
- visibility: visible;
24
- opacity: 1;
25
- }
26
- .before-js:before {
27
- content: 'Loading';
28
- position: absolute;
29
- top: 49%;
30
- left: 49%;
31
- }
32
- .after-js:before {
33
- content: none;
34
- }
35
-
36
- body { color:#2B1B63;}
37
- /*BTNS*/
38
- .button, .pointer { cursor: pointer!important}
39
- .button{min-width:110px;}
40
- /*BTNS*/
41
- a {
42
- text-decoration: none;
43
- color:#8873FE;}
44
- a:hover { text-decoration: underline; }
45
- .uppercase {text-transform: uppercase;}
46
-
47
- /*footer position*/
48
- .main-min-height {min-height: calc(100vh - 560px);}
49
- /*footer position*/
50
-
51
- /*label*/
52
- ::placeholder {color: #8873FE;}
53
- input:focus {
54
- border: 2px solid ##9977FE;
55
- background-color:#ffffff;}
56
- :focus { outline: none;}
57
- /*label*/
58
- .skeleton-anim:after {
59
- width: 100%;
60
- height: 100%;
61
- position: absolute;
62
- top: 0;
63
- left: 0;
64
- content: "";
65
- background:
66
- linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
67
- linear-gradient(transparent, transparent),
68
- radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
69
- linear-gradient(transparent, transparent);
70
- background-repeat: no-repeat;
71
- background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
72
- background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
73
- animation: loading 1.5s infinite;
74
- }
75
-
76
- @keyframes loading {
77
- to {
78
- background-position: 200% 0, 0 0, 0 190px, 50px 195px;
14
+ .before-js > * {
15
+ visibility: hidden;
16
+ opacity: 0;
17
+ transition: opacity .5s ease;
79
18
  }
80
- }
81
- /*FX ANIMATIONS*/
82
- /*scale-round-inside*/
83
- .fx-scale-round {
84
- position:relative;
85
- z-index: 10;
86
- overflow: hidden;
87
- }
88
- .fx-scale-round::after {
89
- content: "";
90
- background: #ffffff;
91
- position: absolute;
92
- z-index: -1;
93
- border-radius: 50%;
94
- left: -50%;
95
- right: -50%;
96
- top: -100%;
97
- bottom: -100%;
98
- transform: scale(0, 0);
99
- transform-origin: center bottom;
100
- transition: all 0.3s ease-out;
101
-
102
- }
103
- .fx-scale-round:hover {
104
- transform-origin: center bottom;
105
- transform: scale(1.1);
106
- transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
107
- }
108
- .fx-scale-round:hover::after {
109
- transform: scale(1, 1);
110
- transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
111
- }
112
- /*scale-round-inside*/
113
- /*scale*/
114
- .fx-scale:hover {
115
- transform-origin: center bottom;
116
- transform: scale(1.1);
117
- transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
118
- }
119
- /*flash*/
120
- .fx-underline:hover, .fx-flash:hover {
121
- animation: flash-in .5s ;
122
- }
123
- /* Underline animation */
124
- .fx-underline {
125
- position: relative;
126
- }
127
- /* Fade in */
128
- .fx-underline::after {
129
- content: '';
130
- position: absolute;
131
- bottom: -3px;
132
- left: 0;
133
- width: 100%;
134
- height: 0.1em;
135
- background-color: #8873fe;
136
- opacity: 0;
137
- transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 1.8);
138
- }
139
-
140
- .fx-underline:hover::after,
141
- .fx-underline:focus::after {
142
- opacity: 1;
143
- transform: translate3d(0, 2.2em, 0);
144
- }
145
-
146
- /* Scale from center */
147
- .fx-underline:after {
148
- transform: scale(0);
149
- transform-origin: center;
150
- }
151
-
152
- .fx-underline:hover::after,
153
- .fx-underline:focus::after{
154
- transform: scale(1);
155
- }
156
- /* Underline animation */
157
- /*flash-in animation*/
158
- @keyframes flash-in{
159
- 0% {opacity:0;}
160
- 100% {opacity:1;}
161
- }
162
- /*flash-in animation*/
163
-
164
- /*FX ANIMATIONS*/
19
+ .after-js > * {
20
+ visibility: visible;
21
+ opacity: 1;
22
+ }
23
+ .before-js:before {
24
+ content: 'Loading';
25
+ position: absolute;
26
+ top: 49%;
27
+ left: 49%;
28
+ }
29
+ .after-js:before {
30
+ content: none;
31
+ }
32
+ /*BTNS*/
33
+ .button, .pointer {
34
+ cursor: pointer!important}
35
+ .button{
36
+ min-width:110px;
37
+ }
38
+ /*BTNS*/
39
+ a {
40
+ text-decoration: none;
41
+ color:#8873FE;
42
+ }
43
+ a:hover {
44
+ text-decoration: underline;
45
+ }
46
+ .uppercase {
47
+ text-transform: uppercase;
48
+ }
49
+ .underline:hover{
50
+ text-decoration: underline;
51
+ text-decoration-thickness: from-font;
52
+ text-underline-position: under;
53
+ }
54
+ /*footer position*/
55
+ .main-min-height {
56
+ min-height: calc(100vh - 560px);
57
+ }
58
+ /*footer position*/
59
+ /*label*/
60
+ ::placeholder {
61
+ color: #8873FE;
62
+ }
63
+ input:focus {
64
+ border: 2px solid ##9977FE;
65
+ background-color:#ffffff;
66
+ }
67
+ :focus {
68
+ outline: none;
69
+ }
70
+ /*label*/
71
+ .skeleton-anim:after {
72
+ width: 100%;
73
+ height: 100%;
74
+ position: absolute;
75
+ top: 0;
76
+ left: 0;
77
+ content: "";
78
+ background:
79
+ linear-gradient(0.25turn, transparent, rgba(255,255,255,.75), transparent),
80
+ linear-gradient(transparent, transparent),
81
+ radial-gradient(38px circle at 19px 19px, transparent 50%, transparent 51%),
82
+ linear-gradient(transparent, transparent);
83
+ background-repeat: no-repeat;
84
+ background-size: 315px 250px, 315px 180px, 100px 100px, 225px 30px;
85
+ background-position: -315px 0, 0 0, 0px 190px, 50px 195px;
86
+ animation: loading 1.5s infinite;
87
+ }
88
+ @keyframes loading {
89
+ to {
90
+ background-position: 200% 0, 0 0, 0 190px, 50px 195px;
91
+ }
92
+ }
93
+ /*FX ANIMATIONS*/
94
+ /*scale-round-inside_pour-BTN*/
95
+ .fx-scale-round {
96
+ position:relative;
97
+ z-index: 10;
98
+ overflow: hidden;
99
+ }
100
+ .fx-scale-round::after {
101
+ content: "";
102
+ background: #ffffff;
103
+ position: absolute;
104
+ z-index: -1;
105
+ border-radius: 50%;
106
+ left: -50%;
107
+ right: -50%;
108
+ top: -100%;
109
+ bottom: -100%;
110
+ transform: scale(0, 0);
111
+ transform-origin: center bottom;
112
+ transition: all 0.3s ease-out;
113
+ }
114
+ .fx-scale-round:hover {
115
+ transform-origin: center bottom;
116
+ transform: scale(1.1);
117
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
118
+ }
119
+ .fx-scale-round:hover::after {
120
+ transform: scale(1, 1);
121
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
122
+ }
123
+ /*scale-round-inside_pour-BTN*/
124
+ /*scale*/
125
+ .fx-scale:hover {
126
+ transform-origin: center bottom;
127
+ transform: scale(1.1);
128
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
129
+ }
130
+ /*flash*/
131
+ .fx-flash:hover {
132
+ animation: flash-in .5s ;
133
+ }
134
+ /*flash-in animation*/
135
+ @keyframes flash-in{
136
+ 0% {
137
+ opacity:0;
138
+ }
139
+ 100% {
140
+ opacity:1;
141
+ }
142
+ }
143
+ /*flash-in animation*/
144
+ /*FX ANIMATIONS*/
165
145
  </style>
166
- <script src="/js/vue.global.js"></script>
146
+ <script src="/js/vue.global.js"></script>
167
147
  <script src="/js/main.js"></script>
168
148
  <script type="module">
169
149
  const CONNECTORS_PATH = '/connectors/'
@@ -178,10 +158,14 @@ window.addEventListener('load', function() {
178
158
  getUser,
179
159
  logout,
180
160
  websiteDelete,
161
+ websiteDuplicate,
181
162
  websiteList,
182
163
  websiteCreate,
183
164
  websiteMetaWrite,
184
165
  } = api
166
+ function toSafeId(name) {
167
+ return name.replace(/[/\\?%*:|"<>]/g, '_')
168
+ }
185
169
 
186
170
  const App = {
187
171
  data() {
@@ -257,7 +241,7 @@ window.addEventListener('load', function() {
257
241
  try {
258
242
  if (!this.newWebsiteName) throw new Error('You need to provide a website name')
259
243
  this.loading = true
260
- const websiteId = this.newWebsiteName.replace(/[/\\?%*:|"<>]/g, '_')
244
+ const websiteId = toSafeId(this.newWebsiteName)
261
245
  const result = await websiteCreate({
262
246
  websiteId,
263
247
  data: {
@@ -301,6 +285,25 @@ window.addEventListener('load', function() {
301
285
  }
302
286
  },
303
287
 
288
+ async duplicateWebsite(fromId) {
289
+ const name = prompt('New name for the duplicated website')
290
+ if (!name) return
291
+ this.loading = true
292
+ try {
293
+ const toId = toSafeId(name)
294
+ await websiteDuplicate({fromId, toId, connectorId: this.user.storage.connectorId, data: { name }})
295
+ this.error = ''
296
+ this.websites = await websiteList({connectorId: this.user.storage.connectorId})
297
+ this.message = 'Website duplicated successfully'
298
+ this.empty = this.websites.length === 0
299
+ this.loading = false
300
+ } catch (error) {
301
+ this.loading = false
302
+ this.error = `Failed to duplicate website - ${error.message}`
303
+ this.message = ''
304
+ }
305
+ },
306
+
304
307
  async renameWebsite(websiteId) {
305
308
  const website = this.websites.find(w => w.websiteId === websiteId)
306
309
  const name = prompt('New name for this website', website.name)
@@ -334,14 +337,14 @@ window.addEventListener('load', function() {
334
337
  </script>
335
338
 
336
339
 
337
- <title>Silex Dashboard</title>
338
- <link rel="icon" href="" />
339
- <meta property="description" content=""/>
340
- <meta property="og:title" content=""/>
341
- <meta property="og:description" content=""/>
342
- <meta property="og:image" content=""/>
343
- </head>
344
- <body
340
+ <title>Silex Dashboard</title>
341
+ <link rel="icon" href="/assets/favicon-32x32.png" />
342
+ <meta name="description" property="description" content=""/>
343
+ <meta name="og:title" property="og:title" content=""/>
344
+ <meta name="og:description" property="og:description" content=""/>
345
+ <meta name="og:image" property="og:image" content=""/>
346
+ </head>
347
+ <body
345
348
  id="ik0i"
346
349
  class="body loading app before-js"
347
350
 
@@ -477,7 +480,7 @@ window.addEventListener('load', function() {
477
480
  v-if="!empty"
478
481
 
479
482
  ><BUTTON
480
-
483
+ id="ic92g"
481
484
  class="button button--primary rounded top-space-40 fx-scale-round "
482
485
  @click="showCreationForm = !showCreationForm" v-if="!showCreationForm"
483
486
 
@@ -553,7 +556,7 @@ window.addEventListener('load', function() {
553
556
 
554
557
  ><H3
555
558
  id="i69a7"
556
- class="right-space-40 color-2B1B63-80 uppercase pointer "
559
+ class="right-space-40 color-2B1B63-80 uppercase pointer fx-flash full-width button-bar__title underline "
557
560
  v-text="website.name || website.id" @click="openEditor(website.websiteId, 'en')"
558
561
 
559
562
  >My first website</H3><P
@@ -573,16 +576,21 @@ window.addEventListener('load', function() {
573
576
 
574
577
  ><BUTTON
575
578
  id="ifyf6p"
576
- class="right-space-20 bold button-bar__item--link pointer fx-underline fx-scale "
579
+ class="right-space-20 bold button-bar__item--link pointer fx-scale underline fx-flash "
577
580
  @click="openEditor(website.websiteId, 'en')"
578
581
 
579
582
  >Edit</BUTTON><BUTTON
580
583
  id="ihf6ew"
581
- class="right-space-20 button-bar__item--link pointer fx-underline fx-scale "
584
+ class="right-space-20 button-bar__item--link pointer fx-scale underline fx-flash "
582
585
  @click="renameWebsite(website.websiteId, 'en')"
583
586
 
584
587
  >Rename</BUTTON><BUTTON
585
- id="iol4h"
588
+ id="iol4h" title="Duplicate"
589
+ class="button-bar__item--link pointer fx-flash fx-scale button-bar__item--icon "
590
+ @click="duplicateWebsite(website.websiteId, 'en')"
591
+
592
+ ><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><path fill="#8873fe" d="M384 336H192c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16l140.1 0L400 115.9V320c0 8.8-7.2 16-16 16zM192 384H384c35.3 0 64-28.7 64-64V115.9c0-12.7-5.1-24.9-14.1-33.9L366.1 14.1c-9-9-21.2-14.1-33.9-14.1H192c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64zM64 128c-35.3 0-64 28.7-64 64V448c0 35.3 28.7 64 64 64H256c35.3 0 64-28.7 64-64V416H272v32c0 8.8-7.2 16-16 16H64c-8.8 0-16-7.2-16-16V192c0-8.8 7.2-16 16-16H96V128H64z"/></svg></BUTTON><BUTTON
593
+
586
594
  class="button-bar__item--link pointer fx-flash fx-scale "
587
595
  @click="deleteWebsite(website.websiteId)" title="Delete"
588
596
 
@@ -787,5 +795,4 @@ window.addEventListener('load', function() {
787
795
 
788
796
 
789
797
  >Youtube - tutorials and more</A></div></FOOTER></body>
790
- </html>
791
-
798
+ </html>