Merge pull request #2026 from frankrousseau/main

[ui] Annotation fixes, shortcut modal redesign and locale updates

Author: frankrousseau

src/components/modals/AddAttachmentModal.vue

@@ -27,17 +27,13 @@
           {{ $t('tasks.comment_image') }}
         </h1>
 
-        <div class="attachment-upload-zone">
-          <file-upload
-            ref="fileField"
-            :label="$t('main.select_file')"
-            :accept="extensions"
-            :multiple="true"
-            :is-primary="false"
-            @fileselected="onFileSelected"
-            hide-file-names
-          />
-        </div>
+        <file-upload-zone
+          ref="fileField"
+          :label="$t('main.select_file')"
+          :accept="extensions"
+          :multiple="true"
+          @fileselected="onFileSelected"
+        />
 
         <div class="snapshot-actions" v-if="isMovie || isPicture">
           <button
@@ -119,7 +115,7 @@ import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
-import FileUpload from '@/components/widgets/FileUpload.vue'
+import FileUploadZone from '@/components/widgets/FileUploadZone.vue'
 
 const props = defineProps({
   active: { type: Boolean, default: false },
@@ -282,45 +278,6 @@ h3.subtitle {
   flex-wrap: wrap;
 }
 
-.attachment-upload-zone {
-  border: 2px dashed var(--border);
-  border-radius: 10px;
-  margin: 1em 0;
-  padding: 1.5em;
-  text-align: center;
-  transition:
-    border-color 0.2s ease,
-    background 0.2s ease;
-
-  &:hover {
-    background: var(--background-hover, rgba(255, 255, 255, 0.03));
-    border-color: var(--background-selectable, $purple-strong);
-  }
-
-  // Strip Bulma's button background off the file-upload label so the
-  // dropzone's outline is the single visual container — the text sits
-  // directly on the dashed area, no inner button chip.
-  :deep(.dropbox) {
-    background: transparent;
-    border: 0;
-    justify-content: center;
-    padding: 0;
-  }
-
-  :deep(.dropbox label.button) {
-    background: transparent;
-    border: 0;
-    color: var(--text);
-    cursor: pointer;
-    font-weight: 500;
-
-    &:hover {
-      background: transparent;
-      color: var(--background-selectable, $purple-strong);
-    }
-  }
-}
-
 .snapshot-actions {
   display: flex;
   flex-direction: column;

src/components/modals/AddPreviewModal.vue

@@ -34,15 +34,12 @@
           {{ $t('tasks.select_preview_file') }}
         </p>
 
-        <file-upload
+        <file-upload-zone
           ref="previewField"
-          class="preview-files-field"
           :accept="extensions"
-          :is-primary="false"
           :label="$t('main.select_file')"
           :multiple="isMultiple"
           @fileselected="onFileSelected"
-          hide-file-names
         />
 
         <p class="error" v-if="isError">
@@ -129,7 +126,7 @@ import { onBeforeUnmount, onMounted, ref, toRef, watch } from 'vue'
 import { useModal } from '@/composables/modal'
 import files from '@/lib/files'
 
-import FileUpload from '@/components/widgets/FileUpload.vue'
+import FileUploadZone from '@/components/widgets/FileUploadZone.vue'
 
 const props = defineProps({
   active: { type: Boolean, default: false },
@@ -301,10 +298,6 @@ h3.subtitle {
   border-width: 0 0 0 4px;
 }
 
-.preview-files-field {
-  margin: auto;
-}
-
 .box.content {
   position: relative;
 }

src/components/modals/SelectTaskTypeModal.vue

@@ -1,28 +1,60 @@
 <template>
   <base-modal
     :active="active"
-    :title="$t('playlists.select_task_type')"
+    :title="$t('playlists.update_versions_title')"
     @cancel="$emit('cancel')"
   >
-    <form @submit.prevent>
-      <combobox-task-type :task-type-list="taskTypeList" v-model="taskTypeId" />
-    </form>
+    <div class="version-cards">
+      <section class="version-card">
+        <h3 class="version-card-title">
+          {{ $t('playlists.select_task_type') }}
+        </h3>
+        <p class="version-card-help">
+          {{ $t('playlists.apply_task_type_change') }}
+        </p>
+        <form @submit.prevent>
+          <combobox-task-type
+            :task-type-list="taskTypeList"
+            v-model="taskTypeId"
+          />
+        </form>
+        <p class="has-text-right version-card-action">
+          <a
+            :class="{
+              button: true,
+              'is-primary': true,
+              'is-loading': isLoading
+            }"
+            @click="runConfirmation"
+          >
+            {{ $t('main.apply') }}
+          </a>
+        </p>
+      </section>
 
-    <p>
-      {{ $t('playlists.apply_task_type_change') }}
-    </p>
+      <section class="version-card">
+        <h3 class="version-card-title">
+          {{ $t('playlists.update_to_latest_version') }}
+        </h3>
+        <p class="version-card-help">
+          {{ $t('playlists.update_to_latest_version_help') }}
+        </p>
+        <p class="has-text-right version-card-action">
+          <a
+            :class="{
+              button: true,
+              'is-primary': true,
+              'is-loading': isLoading
+            }"
+            @click="runUpdateLatest"
+          >
+            {{ $t('main.apply') }}
+          </a>
+        </p>
+      </section>
+    </div>
 
     <p class="has-text-right mt2">
-      <a
-        :class="{
-          button: true,
-          'is-primary': true,
-          'is-loading': isLoading
-        }"
-        @click="runConfirmation"
-      >
-        {{ $t('main.confirmation') }}
-      </a>
       <button @click="$emit('cancel')" class="button is-link">
         {{ $t('main.cancel') }}
       </button>
@@ -47,18 +79,62 @@ const props = defineProps({
   taskTypeList: { type: Array, default: () => [] }
 })
 
-const emit = defineEmits(['cancel', 'confirm'])
+const emit = defineEmits(['cancel', 'confirm', 'update-latest'])
 
 const taskTypeId = ref('')
 
 const runConfirmation = () => {
   emit('confirm', taskTypeId.value)
 }
 
+const runUpdateLatest = () => {
+  emit('update-latest')
+}
+
 watch(
   () => props.active,
   () => {
     taskTypeId.value = props.taskTypeList[0]?.id || ''
   }
 )
 </script>
+
+<style lang="scss" scoped>
+.version-cards {
+  display: flex;
+  gap: 1em;
+  align-items: stretch;
+}
+
+.version-card {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1em;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--background-alt);
+}
+
+.version-card-title {
+  font-weight: 600;
+  margin-bottom: 0.5em;
+}
+
+.version-card-help {
+  margin-bottom: 1em;
+}
+
+// Pin the action to the bottom so both cards' buttons align even though
+// the task-type card is taller (it has the combobox).
+.version-card-action {
+  margin-top: auto;
+  margin-bottom: 0;
+}
+
+@media screen and (max-width: 768px) {
+  .version-cards {
+    flex-direction: column;
+  }
+}
+</style>