| 1 | <html> |
| 2 | <head> |
| 3 | <script type="module"> |
| 4 | import { store } from "/components/canvas/right-canvas-store.js"; |
| 5 | import { store as preferencesStore } from "/components/sidebar/bottom/preferences/preferences-store.js"; |
| 6 | </script> |
| 7 | </head> |
| 8 | <body> |
| 9 | <div x-data> |
| 10 | <template x-if="$store.rightCanvas"> |
| 11 | <aside |
| 12 | id="right-canvas" |
| 13 | class="right-canvas" |
| 14 | :class="{ |
| 15 | 'is-open': $store.rightCanvas.isOpen, |
| 16 | 'is-closed': !$store.rightCanvas.isOpen, |
| 17 | 'is-overlay': $store.rightCanvas.isOverlayMode, |
| 18 | 'is-mobile': $store.rightCanvas.isMobileMode |
| 19 | }" |
| 20 | :style="$store.rightCanvas.widthStyle()" |
| 21 | x-show="$store.rightCanvas.shouldRender()" |
| 22 | x-init="$store.rightCanvas.init($el)" |
| 23 | x-effect="$store.rightCanvas.applyLayoutState()" |
| 24 | aria-label="Universal Canvas" |
| 25 | > |
| 26 | <div class="right-canvas-resize-handle" title="Resize canvas" @pointerdown="$store.rightCanvas.startResize($event)"></div> |
| 27 | |
| 28 | <nav class="right-canvas-rail" aria-label="Canvas surfaces" x-show="$store.preferences.isUiControlVisible('rightCanvasRail')"> |
| 29 | <button |
| 30 | type="button" |
| 31 | class="right-canvas-rail-button right-canvas-toggle-button" |
| 32 | :class="{ 'is-active': $store.rightCanvas.isOpen }" |
| 33 | :title="$store.rightCanvas.isOpen ? 'Hide canvas' : 'Show canvas'" |
| 34 | :aria-label="$store.rightCanvas.isOpen ? 'Hide canvas' : 'Show canvas'" |
| 35 | :aria-pressed="$store.rightCanvas.isOpen.toString()" |
| 36 | @click="$store.rightCanvas.toggleCanvas()" |
| 37 | > |
| 38 | <x-icon name="dock_to_right"></x-icon> |
| 39 | </button> |
| 40 | |
| 41 | <div class="right-canvas-rail-separator" aria-hidden="true"></div> |
| 42 | |
| 43 | <template x-for="surface in $store.rightCanvas.railSurfaces" :key="surface.id"> |
| 44 | <button |
| 45 | type="button" |
| 46 | class="right-canvas-rail-button" |
| 47 | :class="{ 'is-active': $store.rightCanvas.isSurfaceActive(surface.id) && $store.rightCanvas.isOpen }" |
| 48 | :title="surface.title" |
| 49 | :aria-label="surface.title" |
| 50 | @click="$store.rightCanvas.open(surface.id)" |
| 51 | > |
| 52 | <template x-if="surface.image"> |
| 53 | <img class="right-canvas-surface-image" :src="surface.image" alt="" aria-hidden="true"> |
| 54 | </template> |
| 55 | <template x-if="!surface.image"> |
| 56 | <x-icon :name="surface.icon"></x-icon> |
| 57 | </template> |
| 58 | </button> |
| 59 | </template> |
| 60 | </nav> |
| 61 | |
| 62 | <section class="right-canvas-shell"> |
| 63 | <x-extension id="right-canvas-shell-start"></x-extension> |
| 64 | |
| 65 | <header class="right-canvas-header"> |
| 66 | <div class="right-canvas-tabs" role="tablist" aria-label="Canvas tabs"> |
| 67 | <x-extension id="right-canvas-tabs-start"></x-extension> |
| 68 | <template x-for="surface in $store.rightCanvas.panelSurfaces" :key="surface.id"> |
| 69 | <button |
| 70 | type="button" |
| 71 | class="right-canvas-tab" |
| 72 | role="tab" |
| 73 | :aria-selected="$store.rightCanvas.isSurfaceActive(surface.id).toString()" |
| 74 | :title="surface.title" |
| 75 | :class="{ 'is-active': $store.rightCanvas.isSurfaceActive(surface.id) }" |
| 76 | @click="$store.rightCanvas.open(surface.id)" |
| 77 | > |
| 78 | <template x-if="surface.image"> |
| 79 | <img class="right-canvas-surface-image" :src="surface.image" alt="" aria-hidden="true"> |
| 80 | </template> |
| 81 | <template x-if="!surface.image"> |
| 82 | <x-icon aria-hidden="true" :name="surface.icon"></x-icon> |
| 83 | </template> |
| 84 | <span class="right-canvas-tab-label" x-text="surface.title"></span> |
| 85 | </button> |
| 86 | </template> |
| 87 | <x-extension id="right-canvas-tabs-end"></x-extension> |
| 88 | </div> |
| 89 | |
| 90 | <div class="right-canvas-toolbar" aria-label="Canvas toolbar"> |
| 91 | <x-extension id="right-canvas-toolbar-start"></x-extension> |
| 92 | <button |
| 93 | type="button" |
| 94 | class="right-canvas-icon-button" |
| 95 | title="Open as window" |
| 96 | aria-label="Open as window" |
| 97 | x-show="$store.rightCanvas.currentSurfaceCanUndock()" |
| 98 | @click="$store.rightCanvas.undockActiveSurface()" |
| 99 | > |
| 100 | <x-icon name="open_in_new"></x-icon> |
| 101 | </button> |
| 102 | <button |
| 103 | type="button" |
| 104 | class="right-canvas-icon-button right-canvas-close-button" |
| 105 | title="Close canvas" |
| 106 | aria-label="Close canvas" |
| 107 | @click="$store.rightCanvas.close()" |
| 108 | > |
| 109 | <x-icon name="close"></x-icon> |
| 110 | </button> |
| 111 | <x-extension id="right-canvas-toolbar-end"></x-extension> |
| 112 | </div> |
| 113 | </header> |
| 114 | |
| 115 | <main class="right-canvas-panels"> |
| 116 | <x-extension id="right-canvas-panels"></x-extension> |
| 117 | <template x-if="$store.rightCanvas.panelSurfaces.length === 0"> |
| 118 | <div class="right-canvas-empty-state"> |
| 119 | <x-extension id="right-canvas-empty-state"></x-extension> |
| 120 | <x-icon name="space_dashboard"></x-icon> |
| 121 | <span>Canvas</span> |
| 122 | </div> |
| 123 | </template> |
| 124 | </main> |
| 125 | |
| 126 | <x-extension id="right-canvas-shell-end"></x-extension> |
| 127 | </section> |
| 128 | </aside> |
| 129 | </template> |
| 130 | </div> |
| 131 | </body> |
| 132 | </html> |