インポートできるソングの一覧をファイル選択の下に

Hiroshiba · Jul 30, 2024 · a4820f6 · a4820f6
1 parent 6cc30fd
commit a4820f6
Showing 1 changed file with 11 additions and 18 deletions.
diff --git a/src/components/Dialog/ImportSongProjectDialog.vue b/src/components/Dialog/ImportSongProjectDialog.vue
@@ -8,17 +8,6 @@
       <QSeparator />
 
       <QCardSection class="q-py-none">
-        <details class="q-pt-md">
-          <summary>対応しているファイル形式</summary>
-          <ul>
-            <li
-              v-for="[name, extensions] in projectNameToExtensions"
-              :key="name"
-            >
-              {{ name }}：{{ extensions.map((ext) => `.${ext}`).join("、") }}
-            </li>
-          </ul>
-        </details>
         <QFile
           v-model="projectFile"
           label="インポートするファイル"
@@ -29,6 +18,17 @@
           placeholder="ファイルを選択してください"
           @input="handleFileChange"
         />
+        <div v-if="projectFile == null">
+          <span class="text-weight-bold">対応しているファイル形式</span>
+          <ul>
+            <li
+              v-for="[name, extensions] in projectNameToExtensions"
+              :key="name"
+            >
+              {{ name }}：{{ extensions.map((ext) => `.${ext}`).join("、") }}
+            </li>
+          </ul>
+        </div>
       </QCardSection>
       <QCardSection v-if="trackOptions.length > 0">
         <QList bordered class="rounded-borders scroll scrollable-area">
@@ -355,13 +355,6 @@ const handleCancel = () => {
 </script>
 
 <style scoped lang="scss">
-details {
-  summary {
-    display: list-item;
-    cursor: pointer;
-  }
-}
-
 .dialog-card {
   width: 700px;
   max-width: 80vw;