@slidev/client 0.43.11 → 0.43.12

package/internals/NavControls.vue

@@ -2,7 +2,7 @@
 import { computed, ref, shallowRef } from 'vue'
 import { isColorSchemaConfigured, isDark, toggleDark } from '../logic/dark'
 import { currentPage, downloadPDF, hasNext, hasPrev, isEmbedded, isPresenter, next, presenterPassword, prev, showPresenter, total } from '../logic/nav'
-import { activeElement, breakpoints, fullscreen, showEditor, showInfoDialog, showPresenterCursor, toggleOverview } from '../state'
+import { activeElement, breakpoints, fullscreen, presenterLayout, showEditor, showInfoDialog, showPresenterCursor, toggleOverview, togglePresenterLayout } from '../state'
 import { brush, drawingEnabled } from '../logic/drawings'
 import { configs } from '../env'
 import Settings from './Settings.vue'
@@ -148,6 +148,11 @@ if (__SLIDEV_FEATURE_DRAWINGS__)
           <HiddenText :text="showEditor ? 'Hide editor' : 'Show editor'" />
           <carbon:text-annotation-toggle />
         </button>
+
+        <button v-if="isPresenter" class="slidev-icon-btn" title="Toggle Presenter Layout" @click="togglePresenterLayout">
+          <carbon:template />
+          {{ presenterLayout }}
+        </button>
       </template>
       <template v-if="!__DEV__">
         <button v-if="configs.download" class="slidev-icon-btn" @click="downloadPDF">

package/internals/NoteEditor.vue

@@ -9,6 +9,9 @@ const props = defineProps({
   class: {
     default: '',
   },
+  style: {
+    default: () => ({}),
+  },
   placeholder: {
     default: 'No notes for this slide',
   },
@@ -62,7 +65,9 @@ onClickOutside(input, () => {
 <template>
   <NoteDisplay
     v-if="!editing && note"
+    class="my--4 border-transparent border-2"
     :class="props.class"
+    :style="props.style"
     :note="note"
     :note-html="info?.noteHTML"
     @click="switchNoteEdit"
@@ -71,10 +76,12 @@ onClickOutside(input, () => {
     v-else
     ref="input"
     v-model="note"
-    class="prose resize-none overflow-auto outline-none bg-transparent block"
-    style="line-height: 1.75; margin: 1em 0;"
+    class="prose resize-none overflow-auto outline-none bg-transparent block border-green border-2"
+    style="line-height: 1.75;"
+    :style="props.style"
     :class="props.class"
     :placeholder="placeholder"
+    @keydown.esc=" editing = false"
     @focus="editing = true"
   />
 </template>

package/internals/Presenter.vue

@@ -3,7 +3,7 @@ import { useHead } from '@vueuse/head'
 import { computed, onMounted, reactive, ref, shallowRef, watch } from 'vue'
 import { useMouse, useWindowFocus } from '@vueuse/core'
 import { clicks, clicksTotal, currentPage, currentRoute, hasNext, nextRoute, total, useSwipeControls } from '../logic/nav'
-import { showEditor, showOverview, showPresenterCursor } from '../state'
+import { decreasePresenterFontSize, increasePresenterFontSize, presenterLayout, presenterNotesFontSize, showEditor, showOverview, showPresenterCursor } from '../state'
 import { configs, themeVars } from '../env'
 import { sharedState } from '../state/shared'
 import { registerShortcuts } from '../logic/shortcuts'
@@ -86,7 +86,7 @@ onMounted(() => {
 
 <template>
   <div class="bg-main h-full slidev-presenter">
-    <div class="grid-container">
+    <div class="grid-container" :class="`layout${presenterLayout}`">
       <div class="grid-section top flex">
         <img src="../assets/logo-title-horizontal.png" class="ml-2 my-auto h-10 py-1 lg:h-14 lg:py-2" style="height: 3.5rem;" alt="Slidev logo">
         <div class="flex-auto" />
@@ -135,12 +135,31 @@ onMounted(() => {
           next
         </div>
       </div>
-      <div class="grid-section note overflow-auto">
-        <template v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor">
-          <Editor />
-        </template>
-        <NoteEditor v-else-if="__DEV__" class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
-        <NoteStatic v-else class="w-full max-w-full h-full overflow-auto p-2 lg:p-4" />
+      <!-- Notes -->
+      <div v-if="__DEV__ && __SLIDEV_FEATURE_EDITOR__ && Editor && showEditor" class="grid-section note of-auto">
+        <Editor />
+      </div>
+      <div v-else class="grid-section note grid grid-rows-[1fr_min-content]">
+        <NoteEditor
+          v-if="__DEV__"
+          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+          :style="{ fontSize: `${presenterNotesFontSize}em` }"
+        />
+        <NoteStatic
+          v-else
+          class="w-full max-w-full h-full overflow-auto p-2 lg:p-4"
+          :style="{ fontSize: `${presenterNotesFontSize}em` }"
+        />
+        <div class="border-t border-main py-1 px-2 text-sm">
+          <button class="slidev-icon-btn" @click="increasePresenterFontSize">
+            <HiddenText text="Increase font size" />
+            <carbon:zoom-in />
+          </button>
+          <button class="slidev-icon-btn" @click="decreasePresenterFontSize">
+            <HiddenText text="Decrease font size" />
+            <carbon:zoom-out />
+          </button>
+        </div>
       </div>
       <div class="grid-section bottom">
         <NavControls :persist="true" />
@@ -180,6 +199,9 @@ onMounted(() => {
   @apply h-full w-full bg-gray-400 bg-opacity-15;
   display: grid;
   gap: 1px 1px;
+}
+
+.grid-container.layout1 {
   grid-template-columns: 1fr 1fr;
   grid-template-rows: min-content 2fr 1fr min-content;
   grid-template-areas:
@@ -189,8 +211,18 @@ onMounted(() => {
     "bottom bottom";
 }
 
+.grid-container.layout2 {
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: min-content 2fr 1fr min-content;
+  grid-template-areas:
+    "top top"
+    "note main"
+    "note next"
+    "bottom bottom";
+}
+
 @media (max-aspect-ratio: 3/5) {
-  .grid-container {
+  .grid-container.layout1 {
     grid-template-columns: 1fr;
     grid-template-rows: min-content 1fr 1fr 1fr min-content;
     grid-template-areas:
@@ -203,7 +235,7 @@ onMounted(() => {
 }
 
 @media (min-aspect-ratio: 1/1) {
-  .grid-container {
+  .grid-container.layout1 {
     grid-template-columns: 1fr 1.1fr 0.9fr;
     grid-template-rows: min-content 1fr 2fr min-content;
     grid-template-areas:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slidev/client",
-  "version": "0.43.11",
+  "version": "0.43.12",
   "description": "Presentation slides for developers",
   "author": "antfu <anthonyfu117@hotmail.com>",
   "license": "MIT",
@@ -45,8 +45,8 @@
     "vue-router": "^4.2.5",
     "vue-starport": "^0.4.0",
     "windicss": "^3.5.6",
-    "@slidev/parser": "0.43.11",
-    "@slidev/types": "0.43.11"
+    "@slidev/parser": "0.43.12",
+    "@slidev/types": "0.43.12"
   },
   "devDependencies": {
     "vite": "^4.5.0"

package/state/index.ts

@@ -29,4 +29,21 @@ export const showPresenterCursor = useLocalStorage('slidev-presenter-cursor', tr
 export const showEditor = useLocalStorage('slidev-show-editor', false)
 export const editorWidth = useLocalStorage('slidev-editor-width', isClient ? window.innerWidth * 0.4 : 100)
 
+export const presenterNotesFontSize = useLocalStorage('slidev-presenter-font-size', 1)
+export const presenterLayout = useLocalStorage('slidev-presenter-layout', 1)
+
+export function togglePresenterLayout() {
+  presenterLayout.value = presenterLayout.value + 1
+  if (presenterLayout.value > 2)
+    presenterLayout.value = 1
+}
+
+export function increasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.min(2, presenterNotesFontSize.value + 0.1)
+}
+
+export function decreasePresenterFontSize() {
+  presenterNotesFontSize.value = Math.max(0.5, presenterNotesFontSize.value - 0.1)
+}
+
 export const toggleOverview = useToggle(showOverview)