Skip to content
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.

Sign up for GitHub

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

HelpDialog内のレイアウトをNavigationViewに置き換え・調整 #2262

Merged
merged 5 commits into from
Sep 13, 2024
Merged

HelpDialog内のレイアウトをNavigationViewに置き換え・調整 #2262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
43b3f37
HelpDialogのレイアウトをBaseNavigationViewを使ったものに変更
takusea Sep 7, 2024
48dcbdd
不要な記述を削除
takusea Sep 7, 2024
426a1f7
コンポーネント内の文字色を統一
takusea Sep 7, 2024
5588961
subtitleクラスに上部marginを追加
takusea Sep 7, 2024
908c190
selectedPageのcomputed関数をエラーを返す形に変更
takusea Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/Base/BaseNavigationView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import BaseScrollArea from "./BaseScrollArea.vue";
grid-template-rows: 100%;
backdrop-filter: blur(32px);
background-color: colors.$background-drawer;
color: colors.$display;
}

.sidebar-inner {
Expand Down
154 changes: 69 additions & 85 deletions src/components/Dialog/HelpDialog/HelpDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,70 +7,66 @@
class="help-dialog transparent-backdrop"
>
<QLayout container view="hHh Lpr lff">
<div class="grid">
<div class="list-wrapper">
<BaseScrollArea>
<div class="list-inner">
<template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
<BaseListItem
v-if="page.type === 'item'"
:selected="selectedPageIndex === pageIndex"
@click="selectedPageIndex = pageIndex"
>
{{ page.name }}
</BaseListItem>
<div v-else-if="page.type === 'separator'" class="list-label">
{{ page.name }}
</div>
</template>
</div>
</BaseScrollArea>
</div>

<QPageContainer>
<QPage>
<QTabPanels v-model="selectedPageIndex">
<QTabPanel
v-for="(page, pageIndex) of pagedata"
:key="pageIndex"
:name="pageIndex"
class="q-pa-none"
<QPageContainer>
<QHeader class="q-pa-sm">
<QToolbar>
<QToolbarTitle class="text-display">
ヘルプ /
{{ selectedPage.parent ? selectedPage.parent + " / " : ""
}}{{ selectedPage.name }}
</QToolbarTitle>
<QBtn
v-if="selectedPage.shouldShowOpenLogDirectoryButton"
unelevated
color="toolbar-button"
textColor="toolbar-button-display"
class="text-no-wrap text-bold q-mr-sm"
@click="openLogDirectory"
>
ログフォルダを開く
</QBtn>
<!-- close button -->
<QBtn
round
flat
icon="close"
color="display"
aria-label="ヘルプを閉じる"
@click="modelValueComputed = false"
/>
</QToolbar>
</QHeader>
<BaseNavigationView>
<template #sidebar>
<template v-for="(page, pageIndex) of pagedata" :key="pageIndex">
<BaseListItem
v-if="page.type === 'item'"
:selected="selectedPageIndex === pageIndex"
@click="selectedPageIndex = pageIndex"
>
<div v-if="page.type === 'item'" class="root">
<QHeader class="q-pa-sm">
<QToolbar>
<QToolbarTitle class="text-display">
ヘルプ / {{ page.parent ? page.parent + " / " : ""
}}{{ page.name }}
</QToolbarTitle>
<QBtn
v-if="page.shouldShowOpenLogDirectoryButton"
unelevated
color="toolbar-button"
textColor="toolbar-button-display"
class="text-no-wrap text-bold q-mr-sm"
@click="openLogDirectory"
>
ログフォルダを開く
</QBtn>
<!-- close button -->
<QBtn
round
flat
icon="close"
color="display"
aria-label="ヘルプを閉じる"
@click="modelValueComputed = false"
/>
</QToolbar>
</QHeader>
<Component :is="page.component" v-bind="page.props" />
</div>
</QTabPanel>
</QTabPanels>
</QPage>
</QPageContainer>
</div>
{{ page.name }}
</BaseListItem>
<div v-else-if="page.type === 'separator'" class="list-label">
{{ page.name }}
</div>
</template>
</template>
<QTabPanels v-model="selectedPageIndex">
<QTabPanel
v-for="(page, pageIndex) of pagedata"
:key="pageIndex"
:name="pageIndex"
class="q-pa-none"
>
<Component
:is="page.component"
v-if="page.type === 'item'"
v-bind="page.props"
/>
</QTabPanel>
</QTabPanels>
</BaseNavigationView>
</QPageContainer>
</QLayout>
</QDialog>
</template>
Expand All @@ -83,7 +79,7 @@ import OssLicense from "./HelpOssLicenseSection.vue";
import UpdateInfo from "./HelpUpdateInfoSection.vue";
import LibraryPolicy from "./HelpLibraryPolicySection.vue";
import BaseListItem from "@/components/Base/BaseListItem.vue";
import BaseScrollArea from "@/components/Base/BaseScrollArea.vue";
import BaseNavigationView from "@/components/Base/BaseNavigationView.vue";
import { UpdateInfo as UpdateInfoObject, UrlString } from "@/type/preload";
import { useStore } from "@/store";
import { useFetchNewUpdateInfos } from "@/composables/useFetchNewUpdateInfos";
Expand Down Expand Up @@ -284,33 +280,21 @@ const pagedata = computed(() => {

const selectedPageIndex = ref(0);

const selectedPage = computed(() => {
if (pagedata.value[selectedPageIndex.value].type == "item") {
return pagedata.value[selectedPageIndex.value] as PageItem;
} else {
throw new Error("selectedPageにはPageItem型の値を指定してください。");
}
});

const openLogDirectory = () => window.backend.openLogDirectory();
</script>

<style scoped lang="scss">
@use "@/styles/v2/colors" as colors;
@use "@/styles/v2/variables" as vars;

.grid {
display: grid;
grid-template-columns: auto 1fr;
backdrop-filter: blur(32px);
background-color: colors.$background-drawer;
}

// TODO: MenuBar+Header分のマージン。Dialogコンポーネント置き換え後削除
.list-wrapper {
margin-top: 66px;
height: calc(100vh - 90px);
width: max-content;
}

.list-inner {
display: flex;
flex-direction: column;
padding: vars.$padding-2;
}

.list-label {
padding: vars.$padding-2;
padding-bottom: vars.$padding-1;
Expand All @@ -328,6 +312,6 @@ const openLogDirectory = () => window.backend.openLogDirectory();
}

.q-tab-panels {
background: none;
display: contents;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

（ただのコメントです！）
へーーーーーこれでこのdiv？がなかったことになるんですね！！！
こんなのあるんですね、知らなかった。

}
</style>
7 changes: 2 additions & 5 deletions src/components/Dialog/HelpDialog/HelpLibraryPolicySection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,11 +131,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {
@use "@/styles/v2/colors" as colors;

.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$background;
border-left: 1px solid colors.$border;
height: 100%;
}

.inner {
Expand All @@ -153,6 +149,7 @@ const selectCharacterInfo = (index: DetailKey | undefined) => {

.subtitle {
@include mixin.headline-2;
margin-top: vars.$gap-2;
}

.list {
Expand Down
6 changes: 1 addition & 5 deletions src/components/Dialog/HelpDialog/HelpMarkdownViewSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,11 +35,7 @@ onMounted(async () => {
@use "@/styles/v2/colors" as colors;

.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$background;
border-left: 1px solid colors.$border;
height: 100%;
}

.inner {
Expand Down
6 changes: 1 addition & 5 deletions src/components/Dialog/HelpDialog/HelpOssLicenseSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,7 @@ const selectLicenseIndex = (index: number | undefined) => {
@use "@/styles/v2/colors" as colors;

.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$background;
border-left: 1px solid colors.$border;
height: 100%;
}

.inner {
Expand Down
6 changes: 1 addition & 5 deletions src/components/Dialog/HelpDialog/HelpUpdateInfoSection.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,7 @@ const props = defineProps<{
@use "@/styles/v2/colors" as colors;

.container {
// TODO: 親コンポーネントからheightを取得できないため一時的にcalcを使用、HelpDialogの構造を再設計後100%に変更する
// height: 100%;
height: calc(100vh - 90px);
background-color: colors.$background;
border-left: 1px solid colors.$border;
height: 100%;
}

.inner {
Expand Down
Loading