Various fixes

src/components/modals/EditStatusAutomationModal.vue

@@ -17,7 +17,7 @@
         </h1>
 
         <form v-on:submit.prevent>
-          <h2 class="subtitle">{{ $t('status_automations.entity_title') }}</h2>
+          <h3 class="subtitle">{{ $t('status_automations.entity_title') }}</h3>
           <combobox
             :label="$t('status_automations.fields.entity_type')"
             :options="entityTypeOptions"
@@ -26,7 +26,7 @@
             locale-key-prefix="status_automations.entity_types."
             @enter="confirmClicked"
           />
-          <span v-else> {{ form.entityType }} </span>
+          <span class="entity-type-name" v-else> {{ form.entityType }} </span>
 
           <h2 class="subtitle">{{ $t('status_automations.in_title') }}</h2>
 
@@ -197,7 +197,11 @@ export default {
     setTaskTypes(fieldType) {
       if (fieldType === 'asset') {
         this.form.inEntityTaskTypes = this.assetTaskTypes
-        this.form.outEntityTaskTypes = this.assetTaskTypes
+        if (this.mode === 'status') {
+          this.form.outEntityTaskTypes = this.assetTaskTypes
+        } else {
+          this.form.outEntityTaskTypes = this.shotTaskTypes
+        }
       } else if (fieldType === 'shot') {
         this.form.inEntityTaskTypes = this.shotTaskTypes
         this.form.outEntityTaskTypes = this.shotTaskTypes
@@ -272,7 +276,12 @@ export default {
 }
 .subtitle {
   font-size: 1.4em;
-  margin-top: 1.5em;
+  margin-top: 2em;
   margin-bottom: 0.5em;
+  text-transform: none;
+}
+.entity-type-name {
+  font-size: 1.2em;
+  text-transform: capitalize;
 }
 </style>

src/components/pages/Asset.vue

@@ -176,7 +176,7 @@
                       :with-link="false"
                     />
                     <div>
-                      <span>{{ shot.shot_name }}</span>
+                      <span class="break-word">{{ shot.shot_name }}</span>
                       <span v-if="shot.nb_occurences > 1">
                         ({{ shot.nb_occurences }})
                       </span>
@@ -244,7 +244,7 @@
                       :with-link="false"
                     />
                     <div>
-                      <span>{{ asset.asset_name }}</span>
+                      <span class="break-word">{{ asset.asset_name }}</span>
                       <span v-if="asset.nb_occurences > 1">
                         ({{ asset.nb_occurences }})
                       </span>

src/components/pages/Episode.vue

@@ -148,7 +148,7 @@
                       :with-link="false"
                       :no-cache="true"
                     />
-                    <div>
+                    <div class="break-word">
                       {{ asset.asset_name }}
                       <span v-if="asset.nb_occurences > 1">
                         ({{ asset.nb_occurences }})

src/components/pages/Playlist.vue

@@ -191,6 +191,7 @@
           @annotation-changed="onAnnotationChanged"
           @for-client-changed="onForClientChanged"
           @annotations-refreshed="onAnnotationsRefreshed"
+          @new-entity-dropped="onNewEntityDropped"
         />
 
         <div
@@ -370,33 +371,40 @@
                   </button>
                 </h2>
                 <div class="addition-entities">
-                  <div
-                    :class="{
-                      'addition-shot': true,
-                      playlisted: currentEntities[shot.id] !== undefined
-                    }"
+                  <drag
                     :key="shot.id"
-                    @click.prevent="addEntityToPlaylist(shot)"
+                    :transfer-data="shot.id"
                     v-for="shot in sequenceShots.filter(s => !s.canceled)"
                   >
-                    <light-entity-thumbnail
-                      :preview-file-id="shot.preview_file_id"
-                      width="150px"
-                      height="100px"
-                    />
-                    <div>
-                      <span
-                        :title="getTaskStatus(shot).name"
-                        :style="{
-                          color: getTaskStatus(shot).color
-                        }"
-                        v-if="currentPlaylist.task_type_id"
-                      >
-                        &bullet;
-                      </span>
-                      <span class="playlisted-shot-name">{{ shot.name }}</span>
+                    <div
+                      :class="{
+                        'addition-shot': true,
+                        playlisted: currentEntities[shot.id] !== undefined
+                      }"
+                      :transfer-data="shot.id"
+                      @click.prevent="addEntityToPlaylist(shot)"
+                    >
+                      <light-entity-thumbnail
+                        :preview-file-id="shot.preview_file_id"
+                        width="150px"
+                        height="100px"
+                      />
+                      <div>
+                        <span
+                          :title="getTaskStatus(shot).name"
+                          :style="{
+                            color: getTaskStatus(shot).color
+                          }"
+                          v-if="currentPlaylist.task_type_id"
+                        >
+                          &bullet;
+                        </span>
+                        <span class="playlisted-shot-name">{{
+                          shot.name
+                        }}</span>
+                      </div>
                     </div>
-                  </div>
+                  </drag>
                 </div>
               </div>
             </div>
@@ -906,12 +914,14 @@ export default {
       }
     },
 
-    addEntity(entity) {
+    addEntity(entity, scrollRight = true) {
       return this.loadEntityPreviewFiles(entity)
         .then(previewFiles => {
           return this.addToStorePlaylistAndSave(previewFiles, entity)
         })
-        .then(this.addToPlayerPlaylist)
+        .then(entity => {
+          this.addToPlayerPlaylist(entity, scrollRight)
+        })
         .catch(err => console.error(err))
     },
 
@@ -923,13 +933,15 @@ export default {
       })
     },
 
-    addToPlayerPlaylist(entity) {
+    addToPlayerPlaylist(entity, scrollRight = true) {
       const playlistEntity = this.convertEntityToPlaylistFormat(entity)
       Vue.set(this.currentEntities, playlistEntity.id, playlistEntity)
       this.playlistPlayer.entityList.push(playlistEntity)
-      this.$nextTick(() => {
-        this.playlistPlayer.scrollToRight()
-      })
+      if (scrollRight) {
+        this.$nextTick(() => {
+          this.playlistPlayer.scrollToRight()
+        })
+      }
     },
 
     addEntityToPlaylist(entity) {
@@ -938,6 +950,24 @@ export default {
       }
     },
 
+    onNewEntityDropped(info) {
+      let entity = null
+      if (this.isAssetPlaylist) {
+        entity = this.assetMap.get(info.after)
+      } else if (this.isSequencePlaylist) {
+        entity = this.sequenceMap.get(info.after)
+      } else {
+        entity = this.shotMap.get(info.after)
+      }
+
+      if (entity && !this.currentEntities[entity.id]) {
+        const notScrollRight = false
+        this.addEntity(entity, notScrollRight).then(() => {
+          this.playlistPlayer.onEntityDropped(info)
+        })
+      }
+    },
+
     removeEntity(entity) {
       this.removeEntityPreviewFromPlaylist({
         playlist: this.currentPlaylist,

src/components/pages/Sequence.vue

@@ -150,7 +150,7 @@
                       :with-link="false"
                       :no-cache="true"
                     />
-                    <div>
+                    <div class="break-word">
                       {{ asset.asset_name }}
                       <span v-if="asset.nb_occurences > 1">
                         ({{ asset.nb_occurences }})

src/components/pages/Shot.vue

@@ -231,7 +231,7 @@
                       :with-link="false"
                       :no-cache="true"
                     />
-                    <div>
+                    <div class="break-word">
                       {{ asset.asset_name }}
                       <span v-if="asset.nb_occurences > 1">
                         ({{ asset.nb_occurences }})

src/components/pages/breakdown/AssetBlock.vue

@@ -279,4 +279,8 @@ export default {
 .modify-asset {
   min-width: 20px;
 }
+
+.asset-text-name {
+  word-wrap: anywhere;
+}
 </style>

src/components/pages/playlists/PlaylistPlayer.vue

@@ -798,6 +798,7 @@
           @play-click="entityListClicked"
           @remove-entity="removeEntity"
           @preview-changed="onPreviewChanged"
+          @entity-to-add="$emit('entity-to-add', $event)"
           @entity-dropped="onEntityDropped"
         />
       </div>
@@ -1350,19 +1351,30 @@ export default {
       this.updateTaskPanel()
     },
 
+    /*
+     * Called when an entity is dropped in the playlist. The entity is moved
+     * to the new position and the order of the entities is updated.
+     * @param {Object} info - {
+     *   before: where entity is dropped (id of the entity before),
+     *   after: the id of the entity dropped.
+     * }
+     */
     onEntityDropped(info) {
       const playlistEl = this.$refs['playlisted-entities']
       const scrollLeft = playlistEl.scrollLeft
-
       const entityToMove = this.entityList.find(s => s.id === info.after)
-      const toMoveIndex = this.entityList.findIndex(s => s.id === info.after)
-      let targetIndex = this.entityList.findIndex(s => s.id === info.before)
-      if (toMoveIndex > targetIndex) targetIndex += 1
-      this.moveSelectedEntity(entityToMove, toMoveIndex, targetIndex)
-      this.$nextTick(() => {
-        playlistEl.scrollLeft = scrollLeft
-      })
-      this.$emit('order-change', info)
+      if (!entityToMove) {
+        this.$emit('new-entity-dropped', info)
+      } else {
+        const toMoveIndex = this.entityList.findIndex(s => s.id === info.after)
+        let targetIndex = this.entityList.findIndex(s => s.id === info.before)
+        if (toMoveIndex > targetIndex) targetIndex += 1
+        this.moveSelectedEntity(entityToMove, toMoveIndex, targetIndex)
+        this.$nextTick(() => {
+          playlistEl.scrollLeft = scrollLeft
+        })
+        this.$emit('order-change', info)
+      }
     },
 
     moveSelectedEntityToLeft() {

src/components/widgets/AddComment.vue

@@ -108,7 +108,7 @@
       <div class="post-area">
         <checklist
           :checklist="checklist"
-          :frame="frame"
+          :frame="frame + 1"
           :revision="revision"
           :is-movie-preview="isMovie"
           @add-item="onAddChecklistItem"