-
Notifications
You must be signed in to change notification settings - Fork 312
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ENH: モーフィングUIの実装 #1030
ENH: モーフィングUIの実装 #1030
Changes from 1 commit
bc41c37
202f31a
9a15da6
bd6e7a2
c5991c8
efe21bd
811dee7
9ba2528
9355128
8156f65
586ed7b
f754a6e
5dc0556
bd2b4f1
97a59af
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,94 +1,107 @@ | ||
<template> | ||
<q-dialog persistent ref="dialogRef"> | ||
<!-- 仮デザイン --> | ||
<q-layout container class="q-dialog-plugin bg-background"> | ||
<q-header> | ||
<q-toolbar> | ||
<q-toolbar-title class="text-display" | ||
>音声書き出し結果</q-toolbar-title | ||
> | ||
</q-toolbar> | ||
<q-space /> | ||
</q-header> | ||
<q-page-container> | ||
<q-page> | ||
<q-list separator v-if="writeErrorArray.length > 0"> | ||
<div class="error">失敗(書き込みエラー):</div> | ||
<q-item v-for="(value, index) in writeErrorArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value.path }}</q-item-label> | ||
<q-item-label>詳細:{{ value.message }}</q-item-label> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
<q-list separator v-if="engineErrorArray.length > 0"> | ||
<div class="error">失敗(エンジンエラー):</div> | ||
<q-item v-for="(value, index) in engineErrorArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value }}</q-item-label> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
<q-list separator v-if="successArray.length > 0"> | ||
<div class="success">成功:</div> | ||
<q-item v-for="(value, index) in successArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value }}</q-item-label> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
</q-page> | ||
</q-page-container> | ||
<q-footer> | ||
<q-toolbar> | ||
<q-space /> | ||
<q-btn flat dense align="right" @click="close" label="閉じる" /> | ||
</q-toolbar> | ||
</q-footer> | ||
</q-layout> | ||
</q-dialog> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from "vue"; | ||
import { useDialogPluginComponent } from "quasar"; | ||
|
||
export default defineComponent({ | ||
name: "SaveAllResultDialog", | ||
props: { | ||
successArray: Array, | ||
writeErrorArray: Array, | ||
engineErrorArray: Array, | ||
}, | ||
emits: { | ||
...useDialogPluginComponent.emits, | ||
}, | ||
setup() { | ||
const { dialogRef, onDialogOK } = useDialogPluginComponent(); | ||
const close = () => onDialogOK(); | ||
return { | ||
dialogRef, | ||
close, | ||
}; | ||
}, | ||
}); | ||
</script> | ||
|
||
<style scoped lang="scss"> | ||
@use '@/styles/colors' as colors; | ||
|
||
.q-page-container { | ||
margin-top: 1em; | ||
} | ||
|
||
.q-item { | ||
border-bottom: solid 0.1rem colors.$primary; | ||
} | ||
|
||
.success { | ||
color: green; | ||
} | ||
.error { | ||
color: red; | ||
} | ||
</style> | ||
<template> | ||
<q-dialog persistent ref="dialogRef"> | ||
<!-- 仮デザイン --> | ||
<q-layout container class="q-dialog-plugin bg-background"> | ||
<q-header> | ||
<q-toolbar> | ||
<q-toolbar-title class="text-display" | ||
>音声書き出し結果</q-toolbar-title | ||
> | ||
</q-toolbar> | ||
<q-space /> | ||
</q-header> | ||
<q-page-container> | ||
<q-page> | ||
<q-list separator v-if="writeErrorArray.length > 0"> | ||
<div class="error">失敗(書き込みエラー):</div> | ||
<q-item v-for="(value, index) in writeErrorArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value.path }}</q-item-label> | ||
<q-item-label>詳細:{{ value.message }}</q-item-label> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
<q-list separator v-if="engineErrorArray.length > 0"> | ||
<div class="error">失敗(エンジンエラー):</div> | ||
<q-item v-for="(value, index) in engineErrorArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value.path }}</q-item-label> | ||
<q-item-label v-if="value.message" | ||
>詳細:{{ value.message }}</q-item-label | ||
Comment on lines
+27
to
+30
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. すみません。 エンジンエラーの詳細を追加しました。 |
||
> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
<q-list separator v-if="successArray.length > 0"> | ||
<div class="success">成功:</div> | ||
<q-item v-for="(value, index) in successArray" :key="index"> | ||
<q-item-section> | ||
<q-item-label>{{ value }}</q-item-label> | ||
</q-item-section> | ||
</q-item> | ||
</q-list> | ||
</q-page> | ||
</q-page-container> | ||
<q-footer> | ||
<q-toolbar> | ||
<q-space /> | ||
<q-btn flat dense align="right" @click="close" label="閉じる" /> | ||
</q-toolbar> | ||
</q-footer> | ||
</q-layout> | ||
</q-dialog> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { WriteErrorTypeForSaveAllResultDialog } from "@/store/type"; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 型付けのためのインポート追加 |
||
import { useDialogPluginComponent } from "quasar"; | ||
import { defineComponent, PropType } from "vue"; | ||
|
||
export default defineComponent({ | ||
name: "SaveAllResultDialog", | ||
props: { | ||
successArray: { | ||
type: Array as PropType<string | undefined[]>, | ||
required: true, | ||
}, | ||
writeErrorArray: { | ||
type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>, | ||
required: true, | ||
}, | ||
engineErrorArray: { | ||
type: Array as PropType<WriteErrorTypeForSaveAllResultDialog[]>, | ||
required: true, | ||
}, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. propsを型付け |
||
}, | ||
emits: { | ||
...useDialogPluginComponent.emits, | ||
}, | ||
setup() { | ||
const { dialogRef, onDialogOK } = useDialogPluginComponent(); | ||
const close = () => onDialogOK(); | ||
return { | ||
dialogRef, | ||
close, | ||
}; | ||
}, | ||
}); | ||
</script> | ||
|
||
<style scoped lang="scss"> | ||
@use '@/styles/colors' as colors; | ||
|
||
.q-page-container { | ||
margin-top: 1em; | ||
} | ||
|
||
.q-item { | ||
border-bottom: solid 0.1rem colors.$primary; | ||
} | ||
|
||
.success { | ||
color: green; | ||
} | ||
.error { | ||
color: red; | ||
} | ||
</style> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
暫定的に既存の型をそのまま流用。
エラーダイアログを出す方針が確定したら
WriteError
とEngineError
両方で使える型名に変更するか新しく型を定義する。