@enso-ui/how-to 5.0.0 → 5.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 laravel-enso
+Copyright (c) 2026 laravel-enso
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -25,4 +25,4 @@ Thank you to all the people who already contributed to Enso!
 
 ## License
 
-[ISC](https://opensource.org/licenses/ISC)
+[MIT](https://opensource.org/licenses/MIT)

package/package.json

@@ -1,11 +1,8 @@
 {
   "name": "@enso-ui/how-to",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "Basic how-to package",
   "main": "src/bulma/pages/howTo/Index.vue",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/enso-ui/how-to.git"
@@ -15,7 +12,7 @@
     "vue"
   ],
   "author": "Adrian Ocneanu <aocneanu@gmail.com>",
-  "license": "ISC",
+  "license": "MIT",
   "bugs": {
     "url": "https://github.com/enso-ui/how-to/issues"
   },
@@ -24,26 +21,15 @@
     "@enso-ui/card": "^3.0",
     "@enso-ui/confirmation": "^2.0",
     "@enso-ui/directives": "^2.0",
-    "@enso-ui/ui": "^6.0",
+    "@enso-ui/ui": "^7.0.0",
     "@enso-ui/uploader": "^2.0",
     "@enso-ui/transitions": "^2.0",
-    "@fortawesome/fontawesome-svg-core": "^1.2.2",
-    "@fortawesome/free-regular-svg-icons": "^5.2.0",
-    "@fortawesome/free-solid-svg-icons": "^5.11.2",
-    "@fortawesome/vue-fontawesome": "3.0.0-5",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-regular-svg-icons": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/vue-fontawesome": "3.1.3",
     "v-tooltip": "^4.0.0-beta.2",
     "video.js": "^7.0",
     "vue": "^3.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "5.0.0-beta.6",
-    "@vue/cli-plugin-eslint": "5.0.0-beta.6",
-    "@vue/eslint-config-airbnb": "^5.0.0",
-    "autoprefixer": "^9.6.1",
-    "babel-eslint": "^10.0.1",
-    "cross-env": "^6.0.0",
-    "eslint": "^7.0.0",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-vue": "^8.0.0"
   }
 }

package/src/bulma/pages/howTo/Index.vue

@@ -3,7 +3,7 @@
         <div class="column is-three-quarters-desktop is-full-touch">
             <fade enter="down"
                 leave="up">
-                <div class="columns"
+                <div class="columns how-to-editor"
                     v-if="addingVideo || editingVideo">
                     <div class="column is-narrow">
                         <div class="control">
@@ -29,15 +29,15 @@
                                  v-if="video.name">
                                 <enso-uploader :url="uploadLink"
                                     :params="video"
-                                    :file-size-limit="20000000"
+                                    :file-size-limit="25*1024*1024"
                                     file-key="video"
                                     @upload-successful="reset(); getVideos()"
                                     v-if="addingVideo">
                                     <template #control="{ controlEvents }">
                                         <a v-on="controlEvents">
-                                            <span class="file-cta">
+                                            <span class="file-cta how-to-editor__upload-cta">
                                                   <span class="file-icon">
-                                                    <fa icon="upload"/>
+                                                    <fa :icon="faUpload"/>
                                                   </span>
                                                   <span class="file-label">
                                                     {{ i18n('Video') }}…
@@ -50,7 +50,7 @@
                                     @click="video = video; update()"
                                     v-if="editingVideo">
                                     <span class="icon">
-                                        <fa icon="check"/>
+                                        <fa :icon="faCheck"/>
                                     </span>
                                 </a>
                             </div>
@@ -61,7 +61,7 @@
                                 <a class="button is-danger is-outlined"
                                     @click="reset()">
                                     <span class="icon">
-                                        <fa icon="ban"/>
+                                        <fa :icon="faBan"/>
                                     </span>
                                 </a>
                             </div>
@@ -73,7 +73,7 @@
                 <div class="column is-half"
                     v-for="(vid, index) in filteredVideos"
                     :key="vid.id">
-                <how-to-video class="is-rounded raises-on-hover"
+                <how-to-video class="is-rounded"
                     :video="vid"
                     :tags="tags"
                     @start-tagging="video = vid; taggingId = video.id"
@@ -93,16 +93,16 @@
                     {{ i18n('Add video') }}
                 </span>
                 <span class="icon is-small">
-                    <fa icon="plus"/>
+                    <fa :icon="faPlus"/>
                 </span>
             </a>
-            <div class="box has-background-light raises-on-hover">
+            <div class="box how-to-tags-panel">
                 <div class="level">
                     <div class="level-left">
                         <div class="level-item">
                             <label class="label">
                                 <span class="icon is-small">
-                                    <fa icon="tags"
+                                    <fa :icon="faTags"
                                         size="xs"/>
                                 </span>
                                 {{ i18n('Tags') }}
@@ -115,28 +115,28 @@
                                 @click="addTag"
                                 v-if="canAccess('howTo.tags.store') && query && tagIsNew">
                                 <span class="icon is-small">
-                                    <fa icon="check"/>
+                                    <fa :icon="faCheck"/>
                                 </span>
                             </a>
                             <a class="button is-small is-outlined is-danger"
                                 v-if="canAccess('howTo.tags.update') && !query && selectedTag"
                                 @click="editingTag = true">
                                 <span class="icon is-small">
-                                    <fa icon="pencil-alt"/>
+                                    <fa :icon="faPen"/>
                                 </span>
                             </a>
                             <a class="button is-small is-outlined is-success ml-1"
                                 v-if="editingTag"
                                 @click="editingTag = false; updateTag()">
                                 <span class="icon is-small">
-                                    <fa icon="check"/>
+                                    <fa :icon="faCheck"/>
                                 </span>
                             </a>
                             <a class="button is-small is-outlined ml-1"
                                 v-if="editingTag"
                                 @click="editingTag = false">
                                 <span class="icon is-small">
-                                    <fa icon="ban"/>
+                                    <fa :icon="faBan"/>
                                 </span>
                             </a>
                         </div>
@@ -180,11 +180,10 @@
 import { focus } from '@enso-ui/directives';
 import { Fade } from '@enso-ui/transitions';
 import { EnsoUploader } from '@enso-ui/uploader/bulma';
-import { library } from '@fortawesome/fontawesome-svg-core';
 import {
     faBan,
     faCheck,
-    faPencilAlt,
+    faPen,
     faPlus,
     faTags,
     faUpload,
@@ -192,8 +191,6 @@ import {
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
 import HowToVideo from './components/HowToVideo.vue';
 
-library.add([faPlus, faUpload, faBan, faCheck, faPencilAlt, faTags]);
-
 export default {
     name: 'Index',
 
@@ -206,6 +203,12 @@ export default {
     inject: ['canAccess', 'errorHandler', 'http', 'i18n', 'route', 'toastr'],
 
     data: () => ({
+        faBan,
+        faCheck,
+        faPen,
+        faPlus,
+        faTags,
+        faUpload,
         videos: [],
         query: '',
         tags: [],
@@ -335,3 +338,44 @@ export default {
     },
 };
 </script>
+
+<style lang="scss">
+.how-to-editor__upload-cta {
+    background-color: var(--enso-filter-control-surface);
+    color: var(--bulma-text-strong);
+
+    &:hover,
+    &:focus {
+        background-color: var(--enso-filter-surface);
+        color: var(--bulma-text-strong);
+    }
+}
+
+.how-to-editor {
+    .file-cta {
+        color: var(--bulma-text-strong);
+    }
+}
+
+.how-to-tags-panel.box {
+    color: var(--bulma-text);
+
+    .label {
+        color: var(--bulma-text-strong);
+    }
+
+    .tag.is-white,
+    .tag.is-delete.is-white {
+        background-color: var(--bulma-scheme-main-ter);
+        color: var(--bulma-text-strong);
+    }
+
+    .tag.is-delete.is-white:hover {
+        background-color: color-mix(
+            in srgb,
+            var(--bulma-danger) 16%,
+            var(--bulma-scheme-main-ter)
+        );
+    }
+}
+</style>

package/src/bulma/pages/howTo/components/HowToVideo.vue

@@ -1,16 +1,16 @@
 <template>
-    <card>
+    <card class="how-to-video-card">
         <card-header>
             <template #title>
                 <span class="icon is-small mr-1">
-                    <fa icon="video"/>
+                    <fa :icon="faVideo"/>
                 </span>
                 {{ video.name }}
             </template>
             <template #controls>
                 <card-control v-tooltip="video.description">
                     <span class="icon">
-                        <fa icon="info-circle"/>
+                        <fa :icon="faCircleInfo"/>
                     </span>
                 </card-control>
                 <card-control v-if="!video.poster && canAccess('howTo.posters.store')">
@@ -22,7 +22,7 @@
                         <template #control="{ controlEvents }">
                             <span class="icon"
                                 v-on="controlEvents">
-                                <fa :icon="['far', 'image']"/>
+                                <fa :icon="faImage"/>
                             </span>
                         </template>
                     </enso-uploader>
@@ -30,34 +30,34 @@
                 <card-control v-if="canAccess('howTo.videos.update')">
                     <span class="icon"
                         @click="$emit('edit')">
-                        <fa :icon="['far', 'edit']"/>
+                        <fa :icon="faPenToSquare"/>
                     </span>
                 </card-control>
                 <card-control v-if="canAccess('howTo.videos.update')">
                     <span class="icon"
                         @click="tagging = !tagging;
                             $emit(tagging ? 'start-tagging' : 'stop-tagging')">
-                        <fa :icon="tagging ? 'check' : 'tags'"/>
+                        <fa :icon="tagging ? faCheck : faTags"/>
                     </span>
                 </card-control>
                 <card-control v-if="canAccess('howTo.posters.destroy') && video.poster">
                     <confirmation @confirm="destroyPoster">
                         <span class="icon is-small">
-                            <fa :icon="['far', 'trash-alt']"/>
+                            <fa :icon="faTrashCan"/>
                         </span>
                     </confirmation>
                 </card-control>
                 <card-control v-else-if="canAccess('howTo.videos.destroy')">
                     <confirmation @confirm="destroyVideo">
                         <span class="icon is-small">
-                            <fa :icon="['far', 'trash-alt']"/>
+                            <fa :icon="faTrashCan"/>
                         </span>
                     </confirmation>
                 </card-control>
                 <card-collapse/>
             </template>
         </card-header>
-        <card-content class="is-paddingless">
+        <card-content class="p-0">
             <video-player :options="options()"
                 class="vjs-custom-skin"
                 playsinline/>
@@ -92,9 +92,13 @@
 import 'v-tooltip/dist/v-tooltip.css';
 import { VTooltip } from 'v-tooltip';
 import { FontAwesomeIcon as Fa } from '@fortawesome/vue-fontawesome';
-import { library } from '@fortawesome/fontawesome-svg-core';
-import { faInfo, faTags, faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import { faTrashAlt, faEdit, faImage } from '@fortawesome/free-regular-svg-icons';
+import {
+    faCheck,
+    faCircleInfo,
+    faTags,
+    faVideo,
+} from '@fortawesome/free-solid-svg-icons';
+import { faTrashCan, faPenToSquare, faImage } from '@fortawesome/free-regular-svg-icons';
 import {
     Card, CardHeader, CardCollapse, CardControl, CardContent,
     CardFooter, CardFooterItem,
@@ -104,8 +108,6 @@ import { EnsoUploader } from '@enso-ui/uploader';
 import VideoPlayer from './VideoPlayer.vue';
 import 'video.js/dist/video-js.css';
 
-library.add([faTrashAlt, faInfo, faTags, faEdit, faImage, faInfoCircle]);
-
 export default {
     name: 'HowToVideo',
 
@@ -141,6 +143,13 @@ export default {
     emits: ['delete', 'edit', 'start-tagging', 'stop-tagging'],
 
     data: () => ({
+        faCheck,
+        faCircleInfo,
+        faImage,
+        faPenToSquare,
+        faTags,
+        faTrashCan,
+        faVideo,
         tagging: false,
     }),
 
@@ -189,9 +198,72 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-    .card-footer {
-        white-space: nowrap;
-        overflow: auto;
-        text-overflow: ellipsis;
-    }
+:deep(.how-to-video-card.card) {
+    overflow: hidden;
+}
+
+:deep(.how-to-video-card .card-header-title),
+:deep(.how-to-video-card .card-header-icon),
+:deep(.how-to-video-card .card-header .icon) {
+    color: var(--bulma-text-strong);
+}
+
+:deep(.how-to-video-card > .card-content) {
+    color: var(--bulma-text);
+}
+
+:deep(.how-to-video-card > .card-footer),
+:deep(.how-to-video-card .card-footer-item) {
+    background-color: var(--bulma-card-footer-background-color) !important;
+    border-color: var(--bulma-border);
+    color: var(--bulma-text);
+}
+
+:deep(.how-to-video-card .card-content .video-js),
+:deep(.how-to-video-card .card-content .vjs-poster),
+:deep(.how-to-video-card .card-content .vjs-tech) {
+    background-color: var(--bulma-scheme-main-bis) !important;
+}
+
+:deep(.how-to-video-card .card-content .video-js) {
+    color: var(--bulma-text);
+}
+
+:deep(.how-to-video-card .card-content .vjs-control-bar) {
+    background: color-mix(
+        in srgb,
+        var(--bulma-scheme-main-ter) 88%,
+        black
+    );
+}
+
+:deep(.how-to-video-card .card-content .vjs-big-play-button) {
+    border-color: color-mix(in srgb, var(--bulma-primary) 35%, var(--bulma-border));
+    background-color: color-mix(
+        in srgb,
+        var(--bulma-scheme-main) 80%,
+        black
+    );
+    color: var(--bulma-text-strong);
+}
+
+:deep(.how-to-video-card .card-control) {
+    color: var(--bulma-text-light);
+}
+
+:deep(.how-to-video-card .card-control:hover),
+:deep(.how-to-video-card .card-control:focus) {
+    color: var(--bulma-text-strong);
+}
+
+:deep(.how-to-video-card .tag) {
+    background-color: var(--bulma-scheme-main-ter);
+    color: var(--bulma-text-strong);
+}
+
+.card-footer {
+    white-space: nowrap;
+    overflow: auto;
+    text-overflow: ellipsis;
+}
 </style>

package/src/bulma/pages/howTo/components/VideoPlayer.vue

@@ -215,6 +215,25 @@ export default {
 </script>
 
 <style>
+.video-player,
+.video-player .video-js,
+.video-player .vjs-tech,
+.video-player .vjs-poster {
+    background-color: var(--bulma-scheme-main-bis);
+}
+
+.video-player .video-js {
+    color: var(--bulma-text);
+}
+
+.video-player .video-js .vjs-control-bar {
+    background: color-mix(
+        in srgb,
+        var(--bulma-scheme-main-ter) 88%,
+        black
+    );
+}
+
 .vjs-custom-skin > .video-js .vjs-big-play-button {
     top: 50%;
     left: 50%;