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

複数選択ボタンを右側に移動 #58

Merged
merged 2 commits into from
Oct 19, 2024
+46 −40
Merged

複数選択ボタンを右側に移動 #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bee768e
バーの高さ調整
miyaoka Oct 19, 2024
3269752
複数選択ボタンを右側に移動
miyaoka Oct 19, 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
40 changes: 12 additions & 28 deletions src/components/menu/FilteringButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,42 +10,26 @@ const focusStore = useFocusStore();
function close() {
searchStore.setSearchString("");
}

function selectAll() {
focusStore.isMultiSelectMode = true;
focusStore.multiSelectEventIdSet.clear();
eventListStore.filteredEventList.forEach((event) => {
focusStore.multiSelectEventIdSet.add(event.id);
});
}
</script>

<template>
<div
v-if="searchStore.hasQuery"
class="_container fixed inset-0 bottom-8 top-auto z-10 m-auto flex w-fit items-center justify-center gap-2 rounded-full bg-black p-2 text-sm text-white shadow-md max-md:bottom-20"
class="_container fixed inset-0 bottom-4 top-auto z-10 m-auto flex w-fit items-center justify-center gap-2 max-md:bottom-16"
>
<div class="px-1">
<span>絞り込み中:</span>
<span> {{ eventListStore.filteredEventList.length }}件 </span>
</div>
<button
class="flex h-11 w-fit items-center gap-2 rounded-full border-2 bg-blue-600 px-2 text-sm font-bold text-white shadow-md"
@click="close"
>
<div class="px-1">
<span>絞り込み中: </span>
<span>{{ eventListStore.filteredEventList.length }}件</span>
</div>

<div class="flex gap-2">
<button
class="flex h-11 items-center justify-center gap-1 rounded-full bg-green-600/90 px-2 py-1 hover:bg-green-700/90"
@click="selectAll"
>
<i class="i-mdi-check-all size-6" />
全選択
</button>
<button
class="flex h-11 items-center justify-center gap-1 rounded-full bg-red-600/90 px-2 py-1 hover:bg-red-700/90"
@click="close"
>
<div class="flex gap-2">
<i class="i-mdi-close size-6" />
絞り込み解除
</button>
</div>
</div>
</button>
</div>
</template>

Expand Down
44 changes: 33 additions & 11 deletions src/components/menu/FooterMenu.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,11 @@ import ScrollButton from "./ScrollButton.vue";
import { getYouTubeVideoId } from "@/lib/youtube";
import { useEventListStore } from "@/store/eventListStore";
import { useFocusStore } from "@/store/focusStore";
import { useSearchStore } from "@/store/searchStore";

const focusStore = useFocusStore();
const eventListStore = useEventListStore();
const searchStore = useSearchStore();

const multiviewPlayerUrl = "https://multiview-player.vercel.app/";

Expand All @@ -29,21 +31,39 @@ function openInMultiPlayer() {
url.search = new URLSearchParams(vidList.map((vid) => ["v", vid])).toString();
window.open(url.href, "_blank");
}

function selectAll() {
focusStore.isMultiSelectMode = true;
focusStore.multiSelectEventIdSet.clear();
eventListStore.filteredEventList.forEach((event) => {
focusStore.multiSelectEventIdSet.add(event.id);
});
}
</script>

<template>
<footer class="relative z-30">
<FilteringButton />

<div class="fixed bottom-4 right-4 flex flex-col items-end gap-4">
<div class="fixed bottom-4 right-4 flex flex-col items-end gap-2">
<div
v-if="focusStore.isMultiSelectMode"
class="flex items-center justify-center gap-4 rounded-xl bg-green-700 px-4 py-2 text-white"
class="flex items-center justify-center gap-4 rounded-xl bg-green-700 px-4 py-2 text-white shadow-md"
>
<div class="flex flex-col">
<div class="flex flex-col gap-1">
<p class="text-lg font-bold">複数選択モード</p>
<p>選択した動画をマルチビュー画面で表示</p>
<p>（{{ focusStore.multiSelectEventIdSet.size }}個選択中）</p>
<p>
選択した動画をマルチビュー画面で表示<br />
（{{ focusStore.multiSelectEventIdSet.size }}個選択中）
</p>
<button
v-if="searchStore.hasQuery"
class="flex h-8 items-center justify-center gap-1 rounded-full bg-green-600/90 px-2"
@click="selectAll"
>
<i class="i-mdi-check-all size-6" />
全選択
</button>
</div>
<div>
<button
Expand All @@ -56,13 +76,15 @@ function openInMultiPlayer() {
</button>
</div>
</div>
<div class="flex flex-row items-end gap-2">
<div class="flex flex-col items-end gap-2">
<MultiSelectButton />
<KeywordListButton />
<BookmarkedEventButton />
<AddedEventButton />
<LiveFilterButton />
<ScrollButton />
<div class="flex flex-row items-end gap-2">
<KeywordListButton />
<BookmarkedEventButton />
<AddedEventButton />
<LiveFilterButton />
<ScrollButton />
</div>
</div>
</div>
</footer>
Expand Down
2 changes: 1 addition & 1 deletion src/components/streams/detail/LiverEventDetailPopover.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ async function onClickNotify(id: string) {
<div
class="w-[480px] max-w-full overflow-hidden rounded-lg border border-gray-500 bg-white pb-2 shadow-xl"
>
<div class="flex items-center bg-gray-800 px-4 py-2 text-gray-200">
<div class="flex h-11 items-center bg-gray-800 px-4 text-gray-200">
<div class="font-bold">
{{ fullDate }}
</div>
Expand Down