小畫面的議程表 #294
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <script setup lang="ts"> | ||
| import type { Item } from '~/components/shared/CpGroupButton.vue' | ||
| import { useI18n } from 'vue-i18n' | ||
| import CpButton from '~/components/shared/CpButton.vue' | ||
| import CpGroupButton from '~/components/shared/CpGroupButton.vue' | ||
|
|
||
| type SessionViewItemKey = 'all' | 'favorite' | ||
|
|
||
| const model = defineModel<SessionViewItemKey>({ required: true }) | ||
|
|
||
| const { t } = useI18n() | ||
|
|
||
| const viewItems = computed<Item<SessionViewItemKey>[]>(() => [ | ||
| { key: 'all', label: t('view.all') }, | ||
| { key: 'favorite', label: t('view.favorite'), icon: 'tabler:bookmark' }, | ||
| ]) | ||
|
|
||
| function switchView() { | ||
| model.value = model.value === 'all' ? 'favorite' : 'all' | ||
| } | ||
| </script> | ||
|
|
||
| <template> | ||
| <!-- Flush segments so the toggle's height matches the adjacent search field. --> | ||
| <CpGroupButton | ||
| v-model="model" | ||
| class="hidden md:inline-flex" | ||
| :items="viewItems" | ||
| /> | ||
| <div class="border border-gray-200 rounded-md bg-white inline-flex overflow-hidden md:hidden"> | ||
| <CpButton | ||
| :aria-label="model === 'favorite' ? t('view.favorite') : t('view.all')" | ||
| :aria-pressed="model === 'favorite'" | ||
| :class="model === 'favorite' ? '!bg-yellow-400 !text-white' : '!bg-white !text-black'" | ||
| variant="basic" | ||
| @click="switchView" | ||
| > | ||
| <Icon | ||
| :name="model === 'favorite' ? 'tabler:star-filled' : 'tabler:star'" | ||
| size="18" | ||
| /> | ||
| </CpButton> | ||
|
coderabbitai[bot] marked this conversation as resolved.
|
||
| </div> | ||
| </template> | ||
|
|
||
| <i18n lang="yaml"> | ||
| en: | ||
| view: | ||
| all: 'Sessions' | ||
| favorite: 'Favorites' | ||
| zh: | ||
| view: | ||
| all: '議程' | ||
| favorite: '收藏' | ||
| </i18n> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,13 @@ | ||
| <script lang="ts" setup> | ||
| import type { SessionSummary, SessionTrack } from '#shared/types/session' | ||
| import { useI18n } from '#imports' | ||
| import { useFavoriteLabel, useFavorites } from '~/composables/useFavorites' | ||
| import { DEFAULT_TRACK_COLOR, trackKey } from '~/utils/tracks' | ||
| import CpSessionItem from './CpSessionItem.vue' | ||
|
|
||
| const { sessions: _sessions, trackColors, preview = false } = defineProps<{ | ||
| sessions: SessionSummary[] | ||
| trackColors: Map<string, string> | ||
| // Shared-list preview: render every session as a read-only favorite. | ||
| preview?: boolean | ||
| }>() | ||
|
|
@@ -15,6 +17,11 @@ const localePath = useLocalePath() | |
| const { isFavorite, toggleFavorite } = useFavorites() | ||
| const favoriteLabel = useFavoriteLabel(t) | ||
|
|
||
| function localeName(name?: SessionTrack['name']) { | ||
| const { en = '', 'zh-hant': zh = '' } = name ?? {} | ||
| return locale.value === 'zh' ? zh || en : en || zh | ||
| } | ||
|
|
||
| const sessions = computed(() => { | ||
| if (!_sessions) { | ||
| return {} | ||
|
|
@@ -31,7 +38,12 @@ const sessions = computed(() => { | |
| room: locale.value === 'zh' | ||
| ? (session.room?.['zh-hant'] || session.room?.en || '') | ||
| : (session.room?.en || session.room?.['zh-hant'] || ''), | ||
| tags: session.tags, | ||
|
There was a problem hiding this comment.
For sessions with a normalized difficulty, passing AGENTS.md reference: AGENTS.md:L5-L5 Useful? React with 👍 / 👎. |
||
| track: { | ||
| id: session.track?.id, | ||
| name: localeName(session.track?.name), | ||
|
There was a problem hiding this comment.
When Pretalx supplies a null or unknown track—which AGENTS.md reference: AGENTS.md:L5-L5 Useful? React with 👍 / 👎. |
||
| color: trackColors.get(trackKey(session)) ?? DEFAULT_TRACK_COLOR, | ||
| }, | ||
| })), | ||
| (session) => session.start, | ||
| ) | ||
|
|
@@ -41,30 +53,60 @@ const times = computed(() => Object.keys(sessions.value).sort()) | |
| </script> | ||
|
|
||
| <template> | ||
| <div class="p-3 flex flex-col gap-6 w-[var(--viewport-width,100vw)] isolate"> | ||
| <section | ||
| v-for="time in times" | ||
| :key="time" | ||
| class="group/section" | ||
| > | ||
| <input | ||
| :id="`session-time-${time}`" | ||
| checked | ||
| class="sr-only" | ||
| type="checkbox" | ||
| > | ||
| <h3 class="text-sm font-medium mb-2 bg-white top-0 sticky z-content"> | ||
| <label | ||
| class="text-primary-400 py-1 flex gap-1 w-full cursor-pointer select-none items-center justify-between" | ||
| :for="`session-time-${time}`" | ||
| > | ||
| <div class="flex gap-x-2 items-center"> | ||
| <span class="w-[5ch] block">{{ time }}</span> | ||
| <Icon | ||
| class="text-md text-primary-400" | ||
| name="tabler:circle" | ||
| /> | ||
| <span v-if="sessions?.[time] && sessions[time].length > 1"> | ||
| {{ t('concurrent', { count: sessions[time].length }) }} | ||
| </span> | ||
|
mirumodapon marked this conversation as resolved.
mirumodapon marked this conversation as resolved.
|
||
| </div> | ||
| <Icon | ||
| class="text-sm transition-transform duration-300 group-has-[input:not(:checked)]/section:-rotate-180" | ||
| name="tabler:chevron-up" | ||
| /> | ||
| </label> | ||
| </h3> | ||
| <div class="grid grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-in-out group-has-[input:not(:checked)]/section:grid-rows-[0fr]"> | ||
| <div class="overflow-hidden"> | ||
| <div class="pb-2 flex flex-col gap-2"> | ||
| <CpSessionItem | ||
| v-for="session in sessions[time]" | ||
| :key="session.id" | ||
| :end="session.end" | ||
| :favorite="preview || isFavorite(session.id)" | ||
| :favorite-label="favoriteLabel(session.id, preview)" | ||
| :readonly="preview" | ||
| :room="session.room" | ||
| :speaker="session.speakers" | ||
| :start="session.start" | ||
| :tags="session.tags" | ||
| :title="session.title" | ||
| :to="localePath(`/session/${session.id}`)" | ||
| :track="session.track" | ||
| @toggle-favorite="toggleFavorite(session.id)" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </section> | ||
| </div> | ||
|
|
@@ -74,7 +116,9 @@ const times = computed(() => Object.keys(sessions.value).sort()) | |
| en: | ||
| add: 'Add to favorites' | ||
| remove: 'Remove from favorites' | ||
| concurrent: '{count} sessions starting at the same time' | ||
| zh: | ||
| add: '加入收藏' | ||
| remove: '取消收藏' | ||
| concurrent: '{count} 場同時開始' | ||
| </i18n> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -30,7 +30,7 @@ function share() { | |
| size="18" | ||
| /> | ||
| </template> | ||
| <span class="hidden md:inline">{{ copied ? t('copied') : t('share') }}</span> | ||
| </CpButton> | ||
| </template> | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.