@enso-ui/how-to 4.0.5 → 4.0.9
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/package.json +4 -3
- package/src/bulma/pages/howTo/Index.vue +93 -75
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@enso-ui/how-to",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.9",
|
|
4
4
|
"description": "Basic how-to package",
|
|
5
5
|
"main": "src/bulma/pages/howTo/Index.vue",
|
|
6
6
|
"scripts": {
|
|
@@ -25,11 +25,12 @@
|
|
|
25
25
|
"@enso-ui/confirmation": "^2.0",
|
|
26
26
|
"@enso-ui/directives": "^2.0",
|
|
27
27
|
"@enso-ui/uploader": "^2.0",
|
|
28
|
+
"@enso-ui/transitions": "^2.0",
|
|
28
29
|
"@fortawesome/fontawesome-svg-core": "^1.2.2",
|
|
29
30
|
"@fortawesome/free-regular-svg-icons": "^5.2.0",
|
|
30
31
|
"@fortawesome/free-solid-svg-icons": "^5.2.0",
|
|
31
32
|
"@fortawesome/vue-fontawesome": "3.0.0-5",
|
|
32
|
-
"v-tooltip": "4.0.0-alpha.
|
|
33
|
+
"v-tooltip": "4.0.0-alpha.2",
|
|
33
34
|
"video.js": "^7.0",
|
|
34
35
|
"vue": "^3.0",
|
|
35
36
|
"vue-video-player": "^5.0"
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
"autoprefixer": "^9.6.1",
|
|
42
43
|
"babel-eslint": "^10.0.1",
|
|
43
44
|
"cross-env": "^6.0.0",
|
|
44
|
-
"eslint": "^
|
|
45
|
+
"eslint": "^7.0.0",
|
|
45
46
|
"eslint-import-resolver-alias": "^1.1.2",
|
|
46
47
|
"eslint-plugin-vue": "^8.0.0"
|
|
47
48
|
}
|
|
@@ -1,85 +1,92 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="columns is-reverse-mobile">
|
|
3
3
|
<div class="column is-three-quarters-desktop is-full-touch">
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
<div class="
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
4
|
+
<fade enter="down"
|
|
5
|
+
leave="up">
|
|
6
|
+
<div class="columns"
|
|
7
|
+
v-if="addingVideo || editingVideo">
|
|
8
|
+
<div class="column is-narrow">
|
|
9
|
+
<div class="control">
|
|
10
|
+
<input class="input"
|
|
11
|
+
v-focus
|
|
12
|
+
type="text"
|
|
13
|
+
:placeholder="i18n('Video name')"
|
|
14
|
+
v-model="video.name">
|
|
15
|
+
</div>
|
|
13
16
|
</div>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
<div class="column">
|
|
18
|
+
<div class="control is-expanded">
|
|
19
|
+
<textarea class="textarea"
|
|
20
|
+
rows="2"
|
|
21
|
+
type="text"
|
|
22
|
+
:placeholder="i18n('Video description')"
|
|
23
|
+
v-model="video.description"/>
|
|
24
|
+
</div>
|
|
22
25
|
</div>
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
26
|
+
<div class="column is-narrow is-flex">
|
|
27
|
+
<fade>
|
|
28
|
+
<div class="control"
|
|
29
|
+
v-if="video.name">
|
|
30
|
+
<uploader :url="uploadLink"
|
|
31
|
+
:params="video"
|
|
32
|
+
:file-size-limit="20000000"
|
|
33
|
+
file-key="video"
|
|
34
|
+
@upload-successful="reset(); getVideos()"
|
|
35
|
+
v-if="addingVideo">
|
|
36
|
+
<template #control="{ controlEvents }">
|
|
37
|
+
<a v-on="controlEvents">
|
|
38
|
+
<span class="file-cta">
|
|
39
|
+
<span class="file-icon">
|
|
40
|
+
<fa icon="upload"/>
|
|
41
|
+
</span>
|
|
42
|
+
<span class="file-label">
|
|
43
|
+
{{ i18n('Video') }}…
|
|
44
|
+
</span>
|
|
45
|
+
</span>
|
|
46
|
+
</a>
|
|
47
|
+
</template>
|
|
48
|
+
</uploader>
|
|
49
|
+
<a class="button is-outlined is-success"
|
|
50
|
+
@click="video = video; update()"
|
|
51
|
+
v-if="editingVideo">
|
|
52
|
+
<span class="icon">
|
|
53
|
+
<fa icon="check"/>
|
|
42
54
|
</span>
|
|
43
55
|
</a>
|
|
44
|
-
</
|
|
45
|
-
</
|
|
46
|
-
<
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
@click="reset()">
|
|
58
|
-
<span class="icon">
|
|
59
|
-
<fa icon="ban"/>
|
|
60
|
-
</span>
|
|
61
|
-
</a>
|
|
56
|
+
</div>
|
|
57
|
+
</fade>
|
|
58
|
+
<fade>
|
|
59
|
+
<div class="control"
|
|
60
|
+
v-if="addingVideo || editingVideo">
|
|
61
|
+
<a class="button is-danger is-outlined"
|
|
62
|
+
@click="reset()">
|
|
63
|
+
<span class="icon">
|
|
64
|
+
<fa icon="ban"/>
|
|
65
|
+
</span>
|
|
66
|
+
</a>
|
|
67
|
+
</div>
|
|
68
|
+
</fade>
|
|
62
69
|
</div>
|
|
63
70
|
</div>
|
|
64
|
-
</
|
|
71
|
+
</fade>
|
|
65
72
|
<div class="columns is-multiline">
|
|
66
73
|
<div class="column is-half"
|
|
67
74
|
v-for="(vid, index) in filteredVideos"
|
|
68
75
|
:key="index">
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
76
|
+
<how-to-video class="is-rounded raises-on-hover"
|
|
77
|
+
:video="vid"
|
|
78
|
+
:tags="tags"
|
|
79
|
+
@start-tagging="video = vid; taggingId = video.id"
|
|
80
|
+
@stop-tagging="video = vid; taggingId = null; update()"
|
|
81
|
+
@delete="videos.splice(index, 1)"
|
|
82
|
+
@update="video = vid; update()"
|
|
83
|
+
@edit="video = vid; editingVideo = true;"/>
|
|
77
84
|
</div>
|
|
78
85
|
</div>
|
|
79
86
|
</div>
|
|
80
87
|
<div class="column is-one-quarter">
|
|
81
88
|
<a class="button is-info is-fullwidth mb-2"
|
|
82
|
-
:disabled="
|
|
89
|
+
:disabled="addDisabled"
|
|
83
90
|
@click="addingVideo = true"
|
|
84
91
|
v-if="canAccess('howTo.videos.store')">
|
|
85
92
|
<span>
|
|
@@ -146,16 +153,16 @@
|
|
|
146
153
|
v-else>
|
|
147
154
|
<div class="field is-grouped is-grouped-multiline mt-2">
|
|
148
155
|
<div class="control"
|
|
149
|
-
|
|
150
|
-
|
|
156
|
+
v-for="tag in filteredTags"
|
|
157
|
+
:key="tag.id">
|
|
151
158
|
<div class="tags has-addons">
|
|
152
159
|
<span :class="[
|
|
153
|
-
|
|
154
|
-
|
|
160
|
+
'tag is-white is-clickable',
|
|
161
|
+
{ 'is-bold' : tag.selected }
|
|
155
162
|
]"
|
|
156
163
|
@click="taggingId
|
|
157
|
-
|
|
158
|
-
|
|
164
|
+
? video.tagList.push(tag.id)
|
|
165
|
+
: tag.selected = !tag.selected">
|
|
159
166
|
{{ tag.name }}
|
|
160
167
|
</span>
|
|
161
168
|
<a class="tag is-delete is-white"
|
|
@@ -170,13 +177,19 @@
|
|
|
170
177
|
</template>
|
|
171
178
|
|
|
172
179
|
<script>
|
|
173
|
-
import {
|
|
180
|
+
import { focus } from '@enso-ui/directives';
|
|
181
|
+
import { Fade } from '@enso-ui/transitions';
|
|
182
|
+
import { Uploader } from '@enso-ui/uploader/bulma';
|
|
174
183
|
import { library } from '@fortawesome/fontawesome-svg-core';
|
|
175
184
|
import {
|
|
176
|
-
|
|
185
|
+
faBan,
|
|
186
|
+
faCheck,
|
|
187
|
+
faPencilAlt,
|
|
188
|
+
faPlus,
|
|
189
|
+
faTags,
|
|
190
|
+
faUpload,
|
|
177
191
|
} from '@fortawesome/free-solid-svg-icons';
|
|
178
|
-
import {
|
|
179
|
-
import { Uploader } from '@enso-ui/uploader/bulma';
|
|
192
|
+
import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
|
|
180
193
|
import HowToVideo from './components/HowToVideo.vue';
|
|
181
194
|
|
|
182
195
|
library.add([faPlus, faUpload, faBan, faCheck, faPencilAlt, faTags]);
|
|
@@ -186,7 +199,7 @@ export default {
|
|
|
186
199
|
|
|
187
200
|
directives: { focus },
|
|
188
201
|
|
|
189
|
-
components: { Fa, HowToVideo, Uploader, },
|
|
202
|
+
components: { Fa, Fade, HowToVideo, Uploader, },
|
|
190
203
|
|
|
191
204
|
inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
|
|
192
205
|
|
|
@@ -206,6 +219,11 @@ export default {
|
|
|
206
219
|
}),
|
|
207
220
|
|
|
208
221
|
computed: {
|
|
222
|
+
addDisabled() {
|
|
223
|
+
return this.addingVideo || this.editingVideo
|
|
224
|
+
? true
|
|
225
|
+
: null;
|
|
226
|
+
},
|
|
209
227
|
uploadLink() {
|
|
210
228
|
return this.route('howTo.videos.store');
|
|
211
229
|
},
|