feat(presenter): adding a third presenter view layout. (#1980)

Co-authored-by: Anthony Fu <github@antfu.me>
slidevjs · Dec 16, 2024 · 27e9e74 · 27e9e74
1 parent bfba5d6
commit 27e9e74
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/packages/client/internals/NavControls.vue b/packages/client/internals/NavControls.vue
@@ -131,7 +131,7 @@ if (__SLIDEV_FEATURE_RECORD__)
           <div class="i-carbon:text-annotation-toggle" />
         </IconButton>
 
-        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial" @click="togglePresenterLayout">
+        <IconButton v-if="isPresenter" title="Toggle Presenter Layout" class="aspect-ratio-initial flex items-center" @click="togglePresenterLayout">
           <div class="i-carbon:template" />
           {{ presenterLayout }}
         </IconButton>

diff --git a/packages/client/pages/presenter.vue b/packages/client/pages/presenter.vue
@@ -247,6 +247,15 @@ onMounted(() => {
     'bottom bottom';
 }
 
+.grid-container.layout3 {
+  grid-template-columns: 2fr 3fr;
+  grid-template-rows: 1fr 1fr min-content;
+  grid-template-areas:
+    'note next'
+    'main next'
+    'bottom bottom';
+}
+
 @media (max-aspect-ratio: 3/5) {
   .grid-container.layout1 {
     grid-template-columns: 1fr;

diff --git a/packages/client/state/index.ts b/packages/client/state/index.ts
@@ -40,7 +40,7 @@ export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1, { l
 
 export function togglePresenterLayout() {
   presenterLayout.value = presenterLayout.value + 1
-  if (presenterLayout.value > 2)
+  if (presenterLayout.value > 3)
     presenterLayout.value = 1
 }