mirror of
https://github.com/agent0ai/agent-zero.git
synced 2026-05-18 14:53:36 +00:00
70adbe91a0
Remove obsolete Office markdown editor UI and handoff code now that Markdown lives in the dedicated Editor surface. Harden the Editor modal so it opens directly into a Markdown draft and rebinds Ace to the visible root when switching surfaces. Make Browser address Enter navigation explicit and update the canvas setup expectations for the slimmer Office shell.
219 lines
6.1 KiB
HTML
219 lines
6.1 KiB
HTML
<html>
|
|
<head>
|
|
<script type="module">
|
|
import { store } from "/plugins/_office/webui/office-store.js";
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div x-data>
|
|
<template x-if="$store.office">
|
|
<div class="office-panel" x-create="$store.office.onMount($el, xAttrs($el) || {})" x-destroy="$store.office.cleanup()">
|
|
<div class="office-shell">
|
|
<div class="office-state-line" x-show="$store.office.message || $store.office.error || $store.office.loading" style="display: none;">
|
|
<span class="material-symbols-outlined" :class="{ spinning: $store.office.loading }" x-text="$store.office.loading ? 'progress_activity' : ($store.office.error ? 'error' : 'check_circle')"></span>
|
|
<span x-text="$store.office.error || $store.office.message || 'Working'"></span>
|
|
</div>
|
|
|
|
<div class="office-body">
|
|
<div class="office-empty" x-show="!$store.office.loading" style="display: none;">
|
|
<div class="office-empty-actions">
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('open')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">folder_open</span>
|
|
<span class="office-button-label">Open</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('writer')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">description</span>
|
|
<span class="office-button-label">Writer</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('spreadsheet')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">table_chart</span>
|
|
<span class="office-button-label">Calc</span>
|
|
</button>
|
|
<button type="button" class="office-icon-button office-command-button" @click="$store.office.runNewMenuAction('presentation')">
|
|
<span class="material-symbols-outlined" aria-hidden="true">co_present</span>
|
|
<span class="office-button-label">Impress</span>
|
|
</button>
|
|
</div>
|
|
</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(1040px, calc(100vw - 32px));
|
|
height: min(760px, calc(100vh - 32px));
|
|
min-width: min(640px, calc(100vw - 16px));
|
|
min-height: min(460px, calc(100vh - 16px));
|
|
max-width: none;
|
|
max-height: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.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-state-line {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-bottom: 1px solid var(--color-border);
|
|
padding: 8px 10px;
|
|
min-width: 0;
|
|
font-size: 13px;
|
|
color: var(--color-muted);
|
|
}
|
|
|
|
.office-icon-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
height: 32px;
|
|
min-width: 32px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-icon-button:hover:not(:disabled) {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.office-icon-button:disabled {
|
|
cursor: default;
|
|
opacity: 0.55;
|
|
}
|
|
|
|
.office-new-menu {
|
|
position: absolute;
|
|
top: calc(100% + 6px);
|
|
right: 0;
|
|
z-index: 15;
|
|
display: grid;
|
|
min-width: 172px;
|
|
padding: 6px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
.office-new-menu-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background: transparent;
|
|
color: var(--color-text);
|
|
padding: 8px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-new-menu-item:hover {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.office-empty-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.office-body {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
min-height: 0;
|
|
}
|
|
|
|
.office-empty {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 24px;
|
|
}
|
|
|
|
.office-command-button {
|
|
min-width: 108px;
|
|
justify-content: flex-start;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.office-header-actions {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.office-header-new-button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
height: 32px;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 6px;
|
|
background: var(--color-background);
|
|
color: var(--color-text);
|
|
padding: 0 9px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.office-header-actions .office-new-menu {
|
|
right: 0;
|
|
}
|
|
|
|
@container (max-width: 560px) {
|
|
.office-state-line {
|
|
padding: 7px;
|
|
}
|
|
|
|
.office-button-label,
|
|
.office-header-new-button span:not(.material-symbols-outlined) {
|
|
display: none;
|
|
}
|
|
|
|
.office-command-button {
|
|
min-width: 32px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|