Merge pull request #1455 from frankrousseau/master

Various minor improvements

src/App.vue

@@ -783,11 +783,12 @@ h2 {
 
   &.bot::after {
     content: 'bot';
+    color: $white;
     position: absolute;
     bottom: -4px;
     font-size: 10px;
     line-height: 10px;
-    padding: 1px 2px;
+    padding: 1px 4px;
     background-color: $grey-strong;
     border: 1px solid $white;
     border-radius: 3px;
@@ -2211,6 +2212,18 @@ th.validation-cell {
   }
 }
 
+.warning {
+  color: $orange;
+}
+
+.warning-text {
+  background-color: rgba($orange, 0.2);
+  border-left: 4px solid $orange;
+  border-bottom-right-radius: 0.5em;
+  border-top-right-radius: 0.5em;
+  padding: 0.5em;
+}
+
 @media screen and (max-width: 1000px) {
   .button .icon.is-small {
     margin-right: 0;

src/components/lists/DayOffList.vue

@@ -9,7 +9,7 @@
         @click="openSetDayOffModal"
       />
     </div>
-    <div class="datatable-wrapper">
+    <div class="datatable-wrapper" v-if="sortedDaysOff.length > 0">
       <table class="datatable">
         <thead class="datatable-head">
           <tr>
@@ -54,6 +54,13 @@
       </table>
     </div>
 
+    <div
+      class="has-text-centered mt2 mb1 strong"
+      v-if="sortedDaysOff.length === 0 && !isLoading"
+    >
+      <p>{{ $t('days_off.no_days_off') }}</p>
+    </div>
+
     <table-info :is-loading="isLoading" :is-error="isError" />
 
     <p class="has-text-centered footer-info" v-if="!isLoading">

src/components/lists/KanbanBoard.vue

@@ -57,30 +57,41 @@
             v-for="task in column.tasks"
           >
             <div class="ui-droppable">
-              <production-name
-                :production="{
-                  id: task.project_id,
-                  name: task.project_name
-                }"
-                :size="25"
-                v-if="!production"
+              <entity-preview
+                style="cursor: grab; margin-top: 1px; margin-left: 1px"
+                :empty-height="100"
+                :empty-width="266"
+                :entity="{ preview_file_id: task.entity_preview_file_id }"
+                cover
+                is-rounded-top-border
               />
-              <div class="flexrow">
-                <entity-thumbnail
-                  :empty-width="80"
-                  :empty-height="60"
-                  :entity="{ preview_file_id: task.entity_preview_file_id }"
-                />
-                <div class="pa1 ellipsis">
-                  {{ task.full_entity_name }}
+              <div class="infos flexrow">
+                <div>
+                  <div class="production-name mb0">
+                    {{ productionMap.get(task.project_id)?.name }}
+                  </div>
+                  <div class="entity-name ellipsis mt0">
+                    {{ task.full_entity_name }}
+                  </div>
+                </div>
+                <div class="filler"></div>
+                <div>
+                  <task-type-name
+                    style="cursor: grab"
+                    :task-id="task.id"
+                    :task-type="getTaskType(task)"
+                    :rounded="true"
+                  />
                 </div>
-              </div>
-              <div class="level mt05">
-                <task-type-name
-                  :task-id="task.id"
-                  :task-type="getTaskType(task)"
-                />
                 <div class="avatars">
+                  <people-avatar
+                    :is-link="false"
+                    :key="`${task.id}-${person.id}`"
+                    :person="person"
+                    :size="20"
+                    :font-size="12"
+                    v-for="person in getSortedPeople(task.assignees)"
+                  />
                   <span
                     class="priority"
                     :class="{
@@ -93,14 +104,6 @@
                   >
                     {{ formatPrioritySymbol(task.priority) }}
                   </span>
-                  <people-avatar
-                    :is-link="false"
-                    :key="`${task.id}-${person.id}`"
-                    :person="person"
-                    :size="20"
-                    :font-size="12"
-                    v-for="person in getSortedPeople(task.assignees)"
-                  />
                 </div>
               </div>
             </div>
@@ -136,9 +139,8 @@ import { domMixin } from '@/components/mixins/dom'
 import { formatListMixin } from '@/components/mixins/format'
 
 import AddPreviewModal from '@/components/modals/AddPreviewModal'
-import EntityThumbnail from '@/components/widgets/EntityThumbnail'
+import EntityPreview from '@/components/widgets/EntityPreview'
 import PeopleAvatar from '@/components/widgets/PeopleAvatar'
-import ProductionName from '@/components/widgets/ProductionName'
 import TableInfo from '@/components/widgets/TableInfo'
 import TaskTypeName from '@/components/widgets/TaskTypeName'
 
@@ -149,9 +151,8 @@ export default {
 
   components: {
     AddPreviewModal,
-    EntityThumbnail,
+    EntityPreview,
     PeopleAvatar,
-    ProductionName,
     TableInfo,
     TaskTypeName
   },
@@ -503,10 +504,10 @@ export default {
 }
 
 .board-card {
-  cursor: pointer;
+  cursor: grab;
+  position: relative;
 
   .ui-droppable {
-    padding: 1em;
     border-radius: 1em;
     border: 1px solid var(--border-alt);
     background-color: var(--background-alt);
@@ -555,7 +556,6 @@ export default {
 .avatars {
   display: flex;
   flex-direction: row;
-  gap: 10px;
 }
 
 .production-name {
@@ -590,4 +590,25 @@ export default {
     background: $red;
   }
 }
+
+.infos {
+  padding: 0.5em;
+}
+
+.production-name {
+  font-weight: 400;
+  margin-bottom: 0em;
+  text-transform: uppercase;
+}
+
+.entity-name {
+  font-size: 1.1em;
+  font-weight: 600;
+}
+
+.avatars {
+  position: absolute;
+  right: 5px;
+  top: 75px;
+}
 </style>

src/components/lists/PeopleList.vue

@@ -59,7 +59,7 @@
               v-if="isBots"
             >
               {{ person.expiration_date }}
-              <alert-triangle-icon class="icon" />
+              <alert-triangle-icon class="icon mr05" />
             </td>
             <td class="role">{{ $t(`people.role.${person.role}`) }}</td>
             <td class="contract" v-if="!isBots">

src/components/modals/AddAttachmentModal.vue

@@ -9,6 +9,15 @@
 
     <div class="modal-content">
       <div class="box content">
+        <!--div
+          ref="dropMask"
+          id="drop-mask"
+          class="drop-mask"
+          @drop="onDrop"
+          v-if="isDraggingFile"
+        >
+          {{ $t('main.drop_files_here') }}
+        </div-->
         <h2 class="subtitle">{{ title }}</h2>
         <h1 class="title">
           {{ $t('tasks.comment_image') }}
@@ -145,7 +154,8 @@ export default {
   data() {
     return {
       forms: [],
-      isAnnotationLoading: false
+      isAnnotationLoading: false,
+      isDraggingFile: false
     }
   },
 
@@ -209,6 +219,26 @@ export default {
 
     removeAttachment(form) {
       this.forms = this.forms.filter(f => f !== form)
+    },
+
+    onDrop(event) {
+      this.isDraggingFile = false
+      this.fileField.onDrop(event)
+      event.preventDefault()
+    },
+
+    onFileDragover(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.isDraggingFile = true
+    },
+
+    onFileDragLeave(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (event.target.id === 'drop-mask') {
+        this.isDraggingFile = false
+      }
     }
   },
 
@@ -288,4 +318,20 @@ h3.subtitle {
 .buttons {
   flex-wrap: wrap;
 }
+
+.drop-mask {
+  align-items: center;
+  background: rgba(0.1, 0, 0, 0.5);
+  border-radius: 5px;
+  color: white;
+  display: flex;
+  font-size: 2em;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1000;
+}
 </style>

src/components/modals/AddPreviewModal.vue

@@ -5,11 +5,29 @@
       modal: true,
       'is-active': active
     }"
+    ref="modal"
   >
-    <div class="modal-background" @click="$emit('cancel')"></div>
-
-    <div class="modal-content">
-      <div class="box content">
+    <div
+      ref="background"
+      class="modal-background"
+      @click="$emit('cancel')"
+    ></div>
+
+    <div
+      class="modal-content"
+      @dragover="onFileDragover"
+      @dragleave="onFileDragLeave"
+    >
+      <div id="modal-content" class="box content" :class="{ dragging: true }">
+        <div
+          ref="dropMask"
+          id="drop-mask"
+          class="drop-mask"
+          @drop="onDrop"
+          v-if="isDraggingFile"
+        >
+          {{ $t('main.drop_files_here') }}
+        </div>
         <h2 class="subtitle">{{ title }}</h2>
         <h1 class="title" v-if="isEditing">
           {{ $t('tasks.change_preview') }}
@@ -171,7 +189,8 @@ export default {
 
   data() {
     return {
-      forms: []
+      forms: [],
+      isDraggingFile: false
     }
   },
 
@@ -224,6 +243,28 @@ export default {
 
     removePreview(form) {
       this.forms = this.forms.filter(f => f !== form)
+    },
+
+    onFileDragover(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      this.isDraggingFile = true
+    },
+
+    onFileDragLeave(event) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (event.target.id === 'drop-mask') {
+        this.isDraggingFile = false
+      }
+    },
+
+    onDrag(event) {},
+
+    onDrop(event) {
+      this.previewField.onDrop(event)
+      this.isDraggingFile = false
+      event.preventDefault()
     }
   },
 
@@ -312,4 +353,24 @@ h3.subtitle {
 .preview-files-field {
   margin: auto;
 }
+
+.box.content {
+  position: relative;
+}
+
+.drop-mask {
+  align-items: center;
+  background: rgba(0.1, 0, 0, 0.5);
+  border-radius: 5px;
+  color: white;
+  display: flex;
+  font-size: 2em;
+  justify-content: center;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 1000;
+}
 </style>