Merge pull request #1490 from NicoPennec/lucide

Replace Feather icons library with Lucide

package.json

@@ -31,6 +31,7 @@
     "color-hash": "2.0.2",
     "color-string": "1.9.1",
     "fabric": "cgwire/fabric.js",
+    "lucide-vue": "0.408.0",
     "marked": "13.0.2",
     "marked-emoji": "1.4.1",
     "moment": "2.30.1",
@@ -50,7 +51,6 @@
     "vue-at": "2.5.1",
     "vue-chartkick": "0.6.1",
     "vue-drag-drop": "1.1.4",
-    "vue-feather-icons": "5.1.0",
     "vue-i18n": "8.28.2",
     "vue-meta": "2.4.0",
     "vue-router": "3.6.5",

src/App.vue

@@ -46,13 +46,10 @@ export default {
       'episodeMap',
       'isCurrentUserAdmin',
       'isDataLoading',
-      'isPreviewFileDisplayed',
       'isDarkTheme',
-      'isLoginLoading',
       'isSavingCommentPreview',
       'isTVShow',
       'previewFileIdToShow',
-      'route',
       'personMap',
       'productionMap',
       'sequenceMap',
@@ -109,7 +106,6 @@ export default {
       'loadTaskStatus',
       'loadTaskType',
       'refreshMetadataDescriptor',
-      'removeAsset',
       'setMainConfig',
       'setSupportChat'
     ]),
@@ -900,23 +896,23 @@ a:hover {
 }
 
 .pa0 {
-  padding: 0em;
+  padding: 0;
 }
 
 .pa1 {
   padding: 1em;
 }
 
 .pb0 {
-  padding-bottom: 0em;
+  padding-bottom: 0;
 }
 
 .pb1 {
   padding-bottom: 1em;
 }
 
 .pt0 {
-  padding-top: 0em;
+  padding-top: 0;
 }
 
 .mauto {
@@ -932,7 +928,7 @@ a:hover {
 }
 
 .mr0 {
-  margin-right: 0em;
+  margin-right: 0;
 }
 
 .mr05 {
@@ -1138,7 +1134,7 @@ textarea.input:focus {
   color: white;
   border-color: #5e60ba;
   padding: 12px 12px 12px 12px;
-  margin: 0.3em 0 0em 0;
+  margin: 0.3em 0 0 0;
   font-size: 1.4em;
   font-weight: 500;
   letter-spacing: 1px;
@@ -1188,8 +1184,8 @@ textarea.input:focus {
   padding: 3em 2em 2em 2em;
   border-radius: 2px;
   box-shadow:
-    rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px,
-    rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
+    rgba(0, 0, 0, 0.14902) 0 1px 1px 0,
+    rgba(0, 0, 0, 0.09804) 0 1px 2px 0;
 }
 
 .box h1.title {
@@ -1212,15 +1208,15 @@ textarea.input:focus {
 }
 
 .button .icon.is-small:first-child:last-child {
-  margin-right: 0em;
+  margin-right: 0;
 }
 
 .actions .button .icon.is-small.icon-only:first-child:last-child {
-  margin-right: 0em;
+  margin-right: 0;
 }
 
 .actions .button .icon.is-small:first-child:last-child {
-  margin-right: 0em;
+  margin-right: 0;
 }
 
 .button .icon.is-small {
@@ -1847,7 +1843,7 @@ tbody:last-child .empty-line:last-child {
 }
 
 .modal-content label.button {
-  margin-left: 0em;
+  margin-left: 0;
 }
 
 .modal-content .box p.text {
@@ -1954,7 +1950,7 @@ tbody:last-child .empty-line:last-child {
 
 .entity-thumbnail {
   border-radius: 0.5em;
-  box-shadow: 0px 0px 6px var(--box-shadow);
+  box-shadow: 0 0 6px var(--box-shadow);
   cursor: pointer;
   transition: transform ease 0.3s;
   max-width: 90px;
@@ -1994,7 +1990,7 @@ th.validation-cell {
 .block {
   background: var(--background-block);
   border-radius: 1em;
-  box-shadow: 0px 0px 6px var(--box-shadow);
+  box-shadow: 0 0 6px var(--box-shadow);
   color: var(--text);
   padding: 1.5em;
 
@@ -2232,6 +2228,16 @@ th.validation-cell {
   padding: 0.5em;
 }
 
+// Ludice Icons
+.icon-1x {
+  width: 1em;
+  height: 1em;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
 @media screen and (max-width: 1000px) {
   .button .icon.is-small {
     margin-right: 0;

src/components/Main.vue

@@ -9,11 +9,12 @@
 </template>
 
 <script>
-import Topbar from '@/components/tops/Topbar'
-import Sidebar from '@/components/sides/Sidebar'
+import Topbar from '@/components/tops/Topbar.vue'
+import Sidebar from '@/components/sides/Sidebar.vue'
 
 export default {
   name: 'main-wrapper',
+
   components: {
     Topbar,
     Sidebar

src/components/cells/BooleanCell.vue

@@ -1,40 +1,30 @@
 <template>
   <td class="has-text-centered">
-    <boolean-rep class="bool-icon" :value="value" />
+    <boolean-rep :value="value" />
   </td>
 </template>
 
 <script>
-import BooleanRep from '@/components/widgets/BooleanRep'
+import BooleanRep from '@/components/widgets/BooleanRep.vue'
 
 export default {
   name: 'boolean-cell',
+
   components: {
     BooleanRep
   },
 
-  data() {
-    return {}
-  },
-
   props: {
     value: {
       default: false,
       type: Boolean
     }
-  },
-
-  computed: {},
-
-  methods: {}
+  }
 }
 </script>
 
 <style lang="scss" scoped>
 td {
   padding-top: 11px;
-  .bool-icon {
-    margin-top: 0px;
-  }
 }
 </style>

src/components/cells/DepartmentNamesCell.vue

@@ -11,16 +11,14 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters } from 'vuex'
+
 import { sortByName } from '@/lib/sorting'
 
-import DepartmentName from '@/components/widgets/DepartmentName'
+import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
 export default {
   name: 'department-names-cell',
-  data() {
-    return {}
-  },
 
   components: {
     DepartmentName
@@ -38,8 +36,6 @@ export default {
   },
 
   methods: {
-    ...mapActions([]),
-
     sortDepartments(departmentIds = []) {
       return sortByName(
         departmentIds.map(departmentId => this.departmentMap.get(departmentId))
@@ -48,5 +44,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped></style>

src/components/cells/MetadataHeader.vue

@@ -3,7 +3,7 @@
     scope="col"
     class="metadata-descriptor"
     :class="{ 'datatable-row-header': isStick }"
-    :style="{ left: left }"
+    :style="{ left }"
   >
     <div class="flexrow metadata-wrapper-header">
       <department-name
@@ -25,20 +25,21 @@
         @click="$emit('show-metadata-header-menu', $event)"
         v-if="!noMenu"
       >
-        <chevron-down-icon size="12" />
+        <chevron-down-icon :size="12" />
       </span>
     </div>
   </th>
 </template>
 
 <script>
-import { ChevronDownIcon } from 'vue-feather-icons'
-
 import { mapGetters } from 'vuex'
-import DepartmentName from '@/components/widgets/DepartmentName'
+import { ChevronDownIcon } from 'lucide-vue'
+
+import DepartmentName from '@/components/widgets/DepartmentName.vue'
 
 export default {
   name: 'metadata-header',
+
   props: {
     descriptor: Object,
     isStick: {
@@ -54,9 +55,14 @@ export default {
       default: false
     }
   },
-  components: { ChevronDownIcon, DepartmentName },
+
+  components: {
+    ChevronDownIcon,
+    DepartmentName
+  },
+
   computed: {
-    ...mapGetters(['departmentMap', 'taskTypeMap']),
+    ...mapGetters(['departmentMap']),
 
     currentDepartments() {
       const departemts = this.descriptor.departments || []

src/components/cells/MetadataInput.vue

@@ -125,14 +125,18 @@
 
 <script>
 import { mapGetters } from 'vuex'
+
 import { descriptorMixin } from '@/components/mixins/descriptors'
 import { domMixin } from '@/components/mixins/dom'
 import { entityListMixin } from '@/components/mixins/entity_list'
-import ComboboxTag from '@/components/widgets/ComboboxTag'
+
+import ComboboxTag from '@/components/widgets/ComboboxTag.vue'
 
 export default {
   name: 'metadata-input',
+
   mixins: [descriptorMixin, domMixin, entityListMixin],
+
   components: {
     ComboboxTag
   },

src/components/cells/PeopleNameCell.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script>
-import PeopleAvatar from '@/components/widgets/PeopleAvatar'
-import PeopleName from '@/components/widgets/PeopleName'
+import PeopleAvatar from '@/components/widgets/PeopleAvatar.vue'
+import PeopleName from '@/components/widgets/PeopleName.vue'
 
 export default {
   name: 'people-name-cell',