@enso-ui/how-to 4.0.7 → 4.0.8

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 (2) hide show
  1. package/package.json +2 -2
  2. package/src/bulma/pages/howTo/Index.vue +93 -76
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enso-ui/how-to",
3
- "version": "4.0.7",
3
+ "version": "4.0.8",
4
4
  "description": "Basic how-to package",
5
5
  "main": "src/bulma/pages/howTo/Index.vue",
6
6
  "scripts": {
@@ -25,11 +25,11 @@
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
- "animate.css": "^4.0.0",
33
33
  "v-tooltip": "4.0.0-alpha.1",
34
34
  "video.js": "^7.0",
35
35
  "vue": "^3.0",
package/src/bulma/pages/howTo/Index.vue CHANGED
@@ -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
- <div class="columns animate__animated animate__fadeInDown"
5
- v-if="addingVideo || editingVideo">
6
- <div class="column is-narrow">
7
- <div class="control">
8
- <input class="input"
9
- v-focus
10
- type="text"
11
- :placeholder="i18n('Video name')"
12
- v-model="video.name">
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
- </div>
15
- <div class="column">
16
- <div class="control is-expanded">
17
- <textarea class="textarea"
18
- rows="2"
19
- type="text"
20
- :placeholder="i18n('Video description')"
21
- v-model="video.description"/>
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
- </div>
24
- <div class="column is-narrow is-flex">
25
- <div class="control animate__animated animate__fadeIn"
26
- v-if="video.name">
27
- <uploader :url="uploadLink"
28
- :params="video"
29
- :file-size-limit="20000000"
30
- file-key="video"
31
- @upload-successful="reset(); getVideos()"
32
- v-if="addingVideo">
33
- <template #control="{ controlEvents }">
34
- <a v-on="controlEvents">
35
- <span class="file-cta">
36
- <span class="file-icon">
37
- <fa icon="upload"/>
38
- </span>
39
- <span class="file-label">
40
- {{ i18n('Video') }}…
41
- </span>
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
- </template>
45
- </uploader>
46
- <a class="button is-outlined is-success"
47
- @click="video = video; update()"
48
- v-if="editingVideo">
49
- <span class="icon">
50
- <fa icon="check"/>
51
- </span>
52
- </a>
53
- </div>
54
- <div class="control animate__animated animate__fadeIn"
55
- v-if="addingVideo || editingVideo">
56
- <a class="button is-danger is-outlined"
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
- </div>
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
- <how-to-video class="is-rounded raises-on-hover"
70
- :video="vid"
71
- :tags="tags"
72
- @start-tagging="video = vid; taggingId = video.id"
73
- @stop-tagging="video = vid; taggingId = null; update()"
74
- @delete="videos.splice(index, 1)"
75
- @update="video = vid; update()"
76
- @edit="video = vid; editingVideo = true;"/>
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="addingVideo || editingVideo"
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
- v-for="tag in filteredTags"
150
- :key="tag.id">
156
+ v-for="tag in filteredTags"
157
+ :key="tag.id">
151
158
  <div class="tags has-addons">
152
159
  <span :class="[
153
- 'tag is-white is-clickable',
154
- { 'is-bold' : tag.selected }
160
+ 'tag is-white is-clickable',
161
+ { 'is-bold' : tag.selected }
155
162
  ]"
156
163
  @click="taggingId
157
- ? video.tagList.push(tag.id)
158
- : tag.selected = !tag.selected">
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,14 +177,19 @@
170
177
  </template>
171
178
 
172
179
  <script>
173
- import 'animate.css';
174
- import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
180
+ import { focus } from '@enso-ui/directives';
181
+ import { Fade } from '@enso-ui/transitions';
182
+ import { Uploader } from '@enso-ui/uploader/bulma';
175
183
  import { library } from '@fortawesome/fontawesome-svg-core';
176
184
  import {
177
- faPlus, faUpload, faBan, faCheck, faPencilAlt, faTags,
185
+ faBan,
186
+ faCheck,
187
+ faPencilAlt,
188
+ faPlus,
189
+ faTags,
190
+ faUpload,
178
191
  } from '@fortawesome/free-solid-svg-icons';
179
- import { focus } from '@enso-ui/directives';
180
- import { Uploader } from '@enso-ui/uploader/bulma';
192
+ import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
181
193
  import HowToVideo from './components/HowToVideo.vue';
182
194
 
183
195
  library.add([faPlus, faUpload, faBan, faCheck, faPencilAlt, faTags]);
@@ -187,7 +199,7 @@ export default {
187
199
 
188
200
  directives: { focus },
189
201
 
190
- components: { Fa, HowToVideo, Uploader, },
202
+ components: { Fa, Fade, HowToVideo, Uploader, },
191
203
 
192
204
  inject: ['canAccess', 'errorHandler', 'i18n', 'route', 'toastr'],
193
205
 
@@ -207,6 +219,11 @@ export default {
207
219
  }),
208
220
 
209
221
  computed: {
222
+ addDisabled() {
223
+ return this.addingVideo || this.editingVideo
224
+ ? true
225
+ : null;
226
+ },
210
227
  uploadLink() {
211
228
  return this.route('howTo.videos.store');
212
229
  },