Spaces:
Running
Running
| <html> | |
| <head> | |
| <script type="module"> | |
| import { store } from "/plugins/_desktop/webui/desktop-store.js"; | |
| </script> | |
| </head> | |
| <body> | |
| <div x-data> | |
| <template x-if="$store.desktop"> | |
| <div class="office-panel" x-create="$store.desktop.onMount($el, xAttrs($el) || {})" x-destroy="$store.desktop.cleanup()"> | |
| <div class="office-shell"> | |
| <div class="office-document-header" x-show="$store.desktop.hasActiveFile()" style="display: none;"> | |
| <div class="office-document-title" :title="$store.desktop.tabLabel($store.desktop.session)"> | |
| <x-icon class="office-document-icon" aria-hidden="true" :name="$store.desktop.tabIcon($store.desktop.session)"></x-icon> | |
| <span class="office-document-name" x-text="$store.desktop.tabTitle($store.desktop.session)"></span> | |
| <span class="office-document-dirty" x-show="$store.desktop.dirty" aria-hidden="true">*</span> | |
| </div> | |
| <button | |
| type="button" | |
| class="office-icon-button office-document-save-button" | |
| title="Save" | |
| aria-label="Save" | |
| :class="{ 'is-primary': $store.desktop.dirty }" | |
| :disabled="$store.desktop.saving" | |
| @click="$store.desktop.save()" | |
| > | |
| <x-icon :class="{ spinning: $store.desktop.saving }" :name="$store.desktop.saving ? 'progress_activity' : 'save'"></x-icon> | |
| </button> | |
| <div class="office-file-actions" x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false"> | |
| <button | |
| type="button" | |
| class="office-icon-button office-file-menu-button" | |
| title="File actions" | |
| aria-label="File actions" | |
| aria-haspopup="menu" | |
| :aria-expanded="open.toString()" | |
| :disabled="$store.desktop.saving" | |
| @click.stop="open = !open" | |
| > | |
| <x-icon name="more_vert"></x-icon> | |
| </button> | |
| <div class="office-new-menu office-file-menu" role="menu" x-show="open" @click.stop> | |
| <button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.desktop.saving" @click="open = false; $store.desktop.renameActiveFile()"> | |
| <x-icon aria-hidden="true" name="edit"></x-icon> | |
| <span>Rename</span> | |
| </button> | |
| <button type="button" class="office-new-menu-item" role="menuitem" :disabled="$store.desktop.loading" @click="open = false; $store.desktop.closeActiveFile()"> | |
| <x-icon aria-hidden="true" name="close"></x-icon> | |
| <span>Close File</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="office-state-line" x-show="$store.desktop.message || $store.desktop.error || $store.desktop.loading" style="display: none;"> | |
| <x-icon :class="{ spinning: $store.desktop.loading }" :name="$store.desktop.loading ? 'progress_activity' : ($store.desktop.error ? 'error' : 'check_circle')"></x-icon> | |
| <span x-text="$store.desktop.error || $store.desktop.message || 'Working'"></span> | |
| </div> | |
| <div class="office-body"> | |
| <div class="office-editor-wrap" x-show="$store.desktop.session" style="display: none;"> | |
| <div class="office-editor-scroll" :class="{ 'is-desktop': $store.desktop.hasOfficialOffice() }" @click.self="$store.desktop.focusEditor()"> | |
| <template x-if="$store.desktop.hasOfficialOffice()"> | |
| <div | |
| class="office-desktop-wrap" | |
| data-office-desktop-host | |
| x-init="$nextTick(() => $store.desktop.mountDesktopFrameHost($el))" | |
| > | |
| </div> | |
| </template> | |
| </div> | |
| </div> | |
| <div class="office-desktop-empty" x-show="$store.desktop.shouldShowDesktopEmptyState()" style="display: none;"> | |
| <x-icon aria-hidden="true" name="power_settings_new"></x-icon> | |
| <span class="office-desktop-empty-title">Desktop is shut down</span> | |
| <button type="button" class="office-icon-button office-command-button" @click="$store.desktop.restartDesktopSession()"> | |
| <x-icon aria-hidden="true" name="restart_alt"></x-icon> | |
| <span class="office-button-label">Restart Desktop</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <style> | |
| .office-panel, | |
| .office-shell { | |
| display: flex; | |
| flex: 1 1 auto; | |
| flex-direction: column; | |
| width: 100%; | |
| height: 100%; | |
| min-width: 0; | |
| min-height: 0; | |
| background: var(--color-background); | |
| color: var(--color-text); | |
| } | |
| .office-panel { | |
| container-type: inline-size; | |
| } | |
| .modal-inner.office-modal { | |
| box-sizing: border-box; | |
| width: min(1120px, calc(100vw - 32px)); | |
| height: min(820px, calc(100vh - 32px)); | |
| min-width: min(720px, calc(100vw - 16px)); | |
| min-height: min(520px, calc(100vh - 16px)); | |
| max-width: none; | |
| max-height: none; | |
| resize: none; | |
| overflow: hidden; | |
| will-change: width, height, left, top; | |
| } | |
| .modal-inner.office-modal.is-resizing, | |
| .modal-inner.office-modal.is-dragging { | |
| user-select: none; | |
| } | |
| .modal-inner.office-modal.is-focus-mode { | |
| border-radius: 6px; | |
| } | |
| .modal-inner.office-modal .modal-scroll { | |
| display: flex; | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| max-height: none; | |
| overflow: hidden; | |
| padding: 0; | |
| } | |
| .modal-inner.office-modal .modal-header { | |
| grid-template-columns: minmax(0, 1fr) auto auto; | |
| } | |
| .office-modal-input-shield { | |
| position: absolute; | |
| inset: 42px 0 0 0; | |
| z-index: 4; | |
| display: none; | |
| background: transparent; | |
| } | |
| .office-modal-resizer { | |
| position: absolute; | |
| z-index: 5; | |
| display: block; | |
| touch-action: none; | |
| } | |
| .office-modal-resizer.is-right { | |
| top: 42px; | |
| right: -4px; | |
| bottom: 12px; | |
| width: 10px; | |
| cursor: ew-resize; | |
| } | |
| .office-modal-resizer.is-bottom { | |
| right: 12px; | |
| bottom: -4px; | |
| left: 0; | |
| height: 10px; | |
| cursor: ns-resize; | |
| } | |
| .office-modal-resizer.is-corner { | |
| right: 0; | |
| bottom: 0; | |
| width: 22px; | |
| height: 22px; | |
| cursor: nwse-resize; | |
| } | |
| .office-modal-resizer.is-corner::after { | |
| content: ""; | |
| position: absolute; | |
| right: 6px; | |
| bottom: 6px; | |
| width: 9px; | |
| height: 9px; | |
| border-right: 2px solid color-mix(in srgb, var(--color-text) 42%, transparent); | |
| border-bottom: 2px solid color-mix(in srgb, var(--color-text) 42%, transparent); | |
| border-radius: 1px; | |
| } | |
| .modal-inner.office-modal.is-focus-mode .office-modal-resizer { | |
| display: none; | |
| } | |
| .modal-inner.office-modal .modal-bd.office-modal-body, | |
| .modal-inner.office-modal .modal-bd.office-modal-body > x-component, | |
| .modal-inner.office-modal .modal-bd.office-modal-body > x-component > div[x-data], | |
| .modal-inner.office-modal .modal-bd.office-modal-body > x-component > .office-panel, | |
| .modal-inner.office-modal .modal-bd.office-modal-body > x-component > div[x-data] > .office-panel { | |
| display: flex; | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| min-width: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding: 0; | |
| } | |
| .office-toolbar { | |
| display: flex; | |
| flex-direction: row; | |
| align-items: stretch; | |
| flex-wrap: nowrap; | |
| min-height: 0; | |
| padding: 6px 10px; | |
| overflow: hidden; | |
| border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 20%); | |
| background: color-mix(in srgb, var(--color-background), var(--color-panel) 48%); | |
| } | |
| .office-toolbar-row { | |
| display: flex; | |
| align-items: center; | |
| flex: 0 0 auto; | |
| flex-wrap: nowrap; | |
| gap: 6px; | |
| width: 100%; | |
| min-width: 0; | |
| min-height: 32px; | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| scrollbar-width: thin; | |
| } | |
| .office-tool-group { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: nowrap; | |
| flex: 0 0 auto; | |
| gap: 4px; | |
| min-width: 0; | |
| } | |
| .office-editor-tools { | |
| gap: 3px; | |
| } | |
| .office-tool-actions { | |
| justify-content: flex-end; | |
| } | |
| .office-toolbar-spacer { | |
| flex: 1 1 16px; | |
| min-width: 8px; | |
| } | |
| .office-toolbar-divider { | |
| flex: 0 0 auto; | |
| width: 1px; | |
| height: 22px; | |
| margin-inline: 2px; | |
| background: color-mix(in srgb, var(--color-border), transparent 18%); | |
| } | |
| .office-document-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| min-height: 38px; | |
| padding: 5px 10px 5px 12px; | |
| border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 22%); | |
| background: color-mix(in srgb, var(--color-panel), var(--color-background) 30%); | |
| } | |
| .office-document-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 7px; | |
| min-width: 0; | |
| flex: 1 1 auto; | |
| color: var(--color-text); | |
| } | |
| .office-document-icon { | |
| flex: 0 0 auto; | |
| font-size: 19px; | |
| line-height: 1; | |
| } | |
| .office-document-name { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 13px; | |
| font-weight: 750; | |
| letter-spacing: 0; | |
| line-height: 1.2; | |
| } | |
| .office-document-dirty { | |
| flex: 0 0 auto; | |
| color: #2ca58d; | |
| font-size: 14px; | |
| font-weight: 800; | |
| line-height: 1; | |
| } | |
| .office-file-actions { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| flex: 0 0 auto; | |
| } | |
| .office-document-save-button, | |
| .office-file-menu-button { | |
| width: 30px; | |
| height: 30px; | |
| min-width: 30px; | |
| } | |
| .office-header-actions { | |
| position: relative; | |
| display: inline-flex; | |
| align-items: center; | |
| flex: 0 0 auto; | |
| } | |
| .office-header-new-button { | |
| appearance: none; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| height: 34px; | |
| min-height: 34px; | |
| padding: 0 9px 0 8px; | |
| border: 1px solid transparent; | |
| border-radius: 7px; | |
| background: transparent; | |
| color: var(--color-text); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 750; | |
| letter-spacing: 0; | |
| line-height: 1; | |
| opacity: 0.82; | |
| white-space: nowrap; | |
| transition: background-color 0.16s ease, border-color 0.16s ease, opacity 0.16s ease; | |
| } | |
| .office-header-new-button:hover, | |
| .office-header-actions.is-open .office-header-new-button { | |
| opacity: 1; | |
| border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border)); | |
| background: color-mix(in srgb, var(--color-background-hover) 72%, transparent); | |
| } | |
| .office-header-new-button .material-symbols-outlined { | |
| font-size: 18px; | |
| line-height: 1; | |
| } | |
| .office-header-new-button .office-new-chevron { | |
| margin-left: -2px; | |
| font-size: 16px; | |
| opacity: 0.8; | |
| } | |
| .office-new-menu { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| right: 0; | |
| z-index: 100; | |
| min-width: 184px; | |
| padding: 5px; | |
| border: 1px solid color-mix(in srgb, var(--color-border), transparent 10%); | |
| border-radius: 8px; | |
| background: color-mix(in srgb, var(--color-panel), var(--color-background) 10%); | |
| box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34); | |
| } | |
| .right-canvas-desktop-actions .office-new-menu { | |
| z-index: 4000; | |
| } | |
| .office-new-menu[hidden] { | |
| display: none; | |
| } | |
| .office-new-menu-item { | |
| appearance: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| height: 32px; | |
| padding: 0 8px; | |
| border: 1px solid transparent; | |
| border-radius: 6px; | |
| background: transparent; | |
| color: var(--color-text); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 12px; | |
| font-weight: 650; | |
| letter-spacing: 0; | |
| line-height: 1; | |
| text-align: left; | |
| white-space: nowrap; | |
| } | |
| .office-new-menu-item:hover { | |
| border-color: color-mix(in srgb, var(--color-primary) 22%, transparent); | |
| background: color-mix(in srgb, var(--color-background-hover) 76%, transparent); | |
| } | |
| .office-new-menu-item:disabled { | |
| cursor: default; | |
| opacity: 0.46; | |
| } | |
| .office-new-menu-item .material-symbols-outlined { | |
| flex: 0 0 auto; | |
| width: 18px; | |
| font-size: 18px; | |
| line-height: 1; | |
| text-align: center; | |
| } | |
| .office-icon-button, | |
| .office-tab, | |
| .office-tab-close { | |
| border: 1px solid color-mix(in srgb, var(--color-border), transparent 12%); | |
| border-radius: 8px; | |
| background: color-mix(in srgb, var(--color-panel), var(--color-background) 16%); | |
| color: inherit; | |
| transition: border-color 120ms ease, background 120ms ease, transform 120ms ease; | |
| } | |
| .office-icon-button { | |
| display: inline-grid; | |
| place-items: center; | |
| width: 32px; | |
| height: 32px; | |
| min-width: 32px; | |
| padding: 0; | |
| } | |
| .office-command-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 5px; | |
| width: auto; | |
| max-width: 126px; | |
| padding: 0 8px; | |
| white-space: nowrap; | |
| } | |
| .office-command-button .office-button-label { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| font-size: 11px; | |
| font-weight: 700; | |
| line-height: 1; | |
| } | |
| .office-icon-button.is-primary { | |
| border-color: color-mix(in srgb, #2c7be5, var(--color-border) 20%); | |
| background: color-mix(in srgb, #2c7be5, var(--color-panel) 82%); | |
| } | |
| .office-icon-button.is-active { | |
| border-color: color-mix(in srgb, #2ca58d, var(--color-border) 24%); | |
| background: color-mix(in srgb, #2ca58d, var(--color-panel) 84%); | |
| } | |
| .office-icon-button:hover:not(:disabled), | |
| .office-tab:hover, | |
| .office-tab-close:hover { | |
| border-color: color-mix(in srgb, #2c7be5, var(--color-border) 45%); | |
| background: color-mix(in srgb, var(--color-panel), #2c7be5 8%); | |
| } | |
| .office-icon-button:disabled { | |
| cursor: default; | |
| opacity: 0.42; | |
| } | |
| .office-icon-button .material-symbols-outlined, | |
| .office-tab-icon { | |
| font-size: 19px; | |
| line-height: 1; | |
| } | |
| .office-tabs { | |
| display: flex; | |
| gap: 6px; | |
| min-height: 42px; | |
| padding: 7px 10px; | |
| overflow-x: auto; | |
| border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 22%); | |
| background: color-mix(in srgb, var(--color-panel), var(--color-background) 28%); | |
| } | |
| .office-tab-shell { | |
| display: grid; | |
| grid-template-columns: minmax(0, 1fr) 28px; | |
| align-items: center; | |
| min-width: 150px; | |
| max-width: 240px; | |
| } | |
| .office-tab-shell.is-system { | |
| grid-template-columns: minmax(0, 1fr); | |
| min-width: 172px; | |
| } | |
| .office-tab, | |
| .office-tab-close { | |
| height: 28px; | |
| min-height: 28px; | |
| border-radius: 7px; | |
| } | |
| .office-tab { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| min-width: 0; | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| padding: 0 8px; | |
| text-align: left; | |
| } | |
| .office-tab-shell.is-system .office-tab { | |
| border-radius: 7px; | |
| } | |
| .office-tab-close { | |
| display: grid; | |
| place-items: center; | |
| border-left: 0; | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| padding: 0; | |
| } | |
| .office-tab-close .material-symbols-outlined { | |
| font-size: 17px; | |
| } | |
| .office-tab-shell.is-active .office-tab, | |
| .office-tab-shell.is-active .office-tab-close { | |
| border-color: color-mix(in srgb, #2c7be5, var(--color-border) 36%); | |
| background: color-mix(in srgb, #2c7be5, var(--color-panel) 88%); | |
| } | |
| .office-tab-shell.is-dirty .office-tab-title::after { | |
| content: " *"; | |
| color: #2ca58d; | |
| } | |
| .office-tab-title { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 12px; | |
| line-height: 1; | |
| } | |
| .office-state-line { | |
| display: flex; | |
| align-items: center; | |
| flex: 0 0 auto; | |
| gap: 8px; | |
| width: 100%; | |
| min-width: 0; | |
| min-height: 34px; | |
| box-sizing: border-box; | |
| padding: 6px 12px; | |
| border-bottom: 1px solid color-mix(in srgb, var(--color-border), transparent 28%); | |
| color: var(--color-text-secondary); | |
| font-size: 12px; | |
| } | |
| .office-state-line > .material-symbols-outlined { | |
| flex: 0 0 auto; | |
| } | |
| .office-state-line > span:not(.material-symbols-outlined) { | |
| min-width: 0; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .office-body { | |
| position: relative; | |
| display: flex; | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| overflow: hidden; | |
| background: var(--color-background); | |
| } | |
| .office-body.is-source { | |
| background: transparent; | |
| } | |
| .office-editor-wrap { | |
| display: flex; | |
| flex: 1 1 auto; | |
| flex-direction: column; | |
| min-width: 0; | |
| min-height: 0; | |
| } | |
| .office-editor-scroll { | |
| flex: 1 1 auto; | |
| min-height: 0; | |
| overflow: auto; | |
| padding: 30px 24px; | |
| } | |
| .office-editor-scroll.is-source { | |
| display: flex; | |
| overflow: hidden; | |
| padding: var(--spacing-md); | |
| background: transparent; | |
| } | |
| .office-editor-scroll.is-desktop { | |
| display: flex; | |
| overflow: hidden; | |
| padding: 0; | |
| background: #1f2329; | |
| } | |
| .office-desktop-wrap { | |
| display: flex; | |
| flex: 1 1 auto; | |
| width: 100%; | |
| height: 100%; | |
| min-width: 0; | |
| min-height: 0; | |
| aspect-ratio: auto; | |
| background: #1f2329; | |
| } | |
| .office-desktop-empty { | |
| display: grid; | |
| flex: 1 1 auto; | |
| place-items: center; | |
| align-content: center; | |
| gap: 12px; | |
| min-width: 0; | |
| min-height: 0; | |
| padding: 24px; | |
| color: var(--color-text-secondary); | |
| text-align: center; | |
| } | |
| .office-desktop-empty > .material-symbols-outlined { | |
| font-size: 32px; | |
| color: color-mix(in srgb, var(--color-text) 68%, transparent); | |
| } | |
| .office-desktop-empty-title { | |
| font-size: 13px; | |
| font-weight: 700; | |
| } | |
| .office-desktop-frame { | |
| flex: 1 1 auto; | |
| width: 100%; | |
| height: 100%; | |
| min-height: 0; | |
| aspect-ratio: auto; | |
| border: 0; | |
| background: #20242a; | |
| } | |
| .office-panel .spinning { | |
| animation: office-spin 0.8s linear infinite; | |
| } | |
| @keyframes office-spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| @container (max-width: 680px) { | |
| .office-toolbar { | |
| padding-inline: 8px; | |
| } | |
| .office-toolbar-row { | |
| gap: 5px; | |
| } | |
| .office-command-button { | |
| width: 32px; | |
| max-width: 32px; | |
| padding-inline: 0; | |
| } | |
| .office-command-button .office-button-label { | |
| position: absolute; | |
| width: 1px; | |
| height: 1px; | |
| overflow: hidden; | |
| clip: rect(0 0 0 0); | |
| white-space: nowrap; | |
| } | |
| } | |
| /* While the canvas is being resized, the left-edge drag sweeps the cursor across this | |
| iframe, which captures the pointermove and freezes shrinking (widening drags away, so | |
| it works). Disable hit-testing on the frame during the drag — right-canvas-store.js | |
| toggles `right-canvas-resizing` on <body> for the duration of the drag. */ | |
| body.right-canvas-resizing .office-desktop-frame { pointer-events: none; } | |
| </style> | |
| </body> | |
| </html> | |