fix: refine earth settings modal and hud interactions
This commit is contained in:
linkong
@@ -128,6 +128,12 @@
|
||||
<button id="zoom-out" class="liquid-glass-surface earth-zoom-btn" title="缩小">−<span class="tooltip earth-toolbar-tooltip">缩小</span></button>
|
||||
</div>
|
||||
</div>
|
||||
<button id="settings-trigger" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="设置">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">settings</span>
|
||||
</span>
|
||||
<span class="tooltip earth-toolbar-tooltip">设置</span>
|
||||
</button>
|
||||
<button id="reset-view" class="floating-btn liquid-glass-surface earth-toolbar-btn" title="重置视角">
|
||||
<span class="icon" aria-hidden="true">
|
||||
<span class="material-symbols-rounded">my_location</span>
|
||||
@@ -147,8 +153,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="coordinates-display" class="hud-panel hud-panel-coordinates">
|
||||
<h3 class="hud-panel-title">坐标信息</h3>
|
||||
<div id="coordinates-display" class="hud-panel hud-panel-coordinates hud-panel-draggable" data-panel-key="coordinates-display">
|
||||
<div class="hud-panel-header hud-panel-drag-handle">
|
||||
<h3 class="hud-panel-title">坐标信息</h3>
|
||||
<button class="hud-panel-close" type="button" data-close-panel="coordinates-display" aria-label="关闭坐标信息">
|
||||
<span class="material-symbols-rounded">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="coord-item hud-panel-row">
|
||||
<span class="coord-label hud-panel-label">经度:</span>
|
||||
<span id="longitude-value" class="coord-value hud-panel-value">0.00°</span>
|
||||
@@ -161,8 +172,13 @@
|
||||
<div class="earth-mouse-coords" id="mouse-coords">鼠标位置: 无</div>
|
||||
</div>
|
||||
|
||||
<div id="legend" class="hud-panel hud-panel-legend">
|
||||
<h3 class="legend-title hud-panel-title">线缆图例</h3>
|
||||
<div id="legend" class="hud-panel hud-panel-legend hud-panel-draggable" data-panel-key="legend">
|
||||
<div class="hud-panel-header hud-panel-drag-handle">
|
||||
<h3 class="legend-title hud-panel-title">线缆图例</h3>
|
||||
<button class="hud-panel-close" type="button" data-close-panel="legend" aria-label="关闭图例">
|
||||
<span class="material-symbols-rounded">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="legend-list">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color legend-color-americas"></div>
|
||||
@@ -183,8 +199,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="earth-stats" class="hud-panel hud-panel-stats">
|
||||
<h3 class="hud-panel-title">地球信息</h3>
|
||||
<div id="earth-stats" class="hud-panel hud-panel-stats hud-panel-draggable" data-panel-key="earth-stats">
|
||||
<div class="hud-panel-header hud-panel-drag-handle">
|
||||
<h3 class="hud-panel-title">地球信息</h3>
|
||||
<button class="hud-panel-close" type="button" data-close-panel="earth-stats" aria-label="关闭地球信息">
|
||||
<span class="material-symbols-rounded">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="stats-item hud-panel-row">
|
||||
<span class="stats-label hud-panel-label">电缆系统:</span>
|
||||
<span class="stats-value hud-panel-value" id="cable-count">0个</span>
|
||||
@@ -234,6 +255,57 @@
|
||||
</div>
|
||||
<div id="status-message" class="earth-status-message"></div>
|
||||
<div id="tooltip" class="earth-tooltip"></div>
|
||||
<div id="settings-modal" class="earth-settings-modal" aria-hidden="true">
|
||||
<div id="settings-backdrop" class="earth-settings-backdrop"></div>
|
||||
<div class="earth-settings-sheet liquid-glass-surface" role="dialog" aria-modal="true" aria-labelledby="settings-title">
|
||||
<div class="earth-settings-header">
|
||||
<div>
|
||||
<div class="earth-settings-kicker">设置</div>
|
||||
<h2 id="settings-title" class="earth-settings-title">显示与视图</h2>
|
||||
</div>
|
||||
<button id="settings-close" class="earth-settings-close" type="button" aria-label="关闭设置">
|
||||
<span class="material-symbols-rounded">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="earth-settings-content">
|
||||
<section class="earth-settings-section">
|
||||
<div class="earth-settings-section-title">视图</div>
|
||||
<div class="earth-settings-list">
|
||||
<label class="earth-settings-item" for="toggle-view-legend">
|
||||
<div class="earth-settings-copy">
|
||||
<span class="earth-settings-item-title">图例</span>
|
||||
<span class="earth-settings-item-subtitle">控制左下角图例面板显示</span>
|
||||
</div>
|
||||
<span class="earth-settings-switch">
|
||||
<input id="toggle-view-legend" type="checkbox" data-settings-panel="legend">
|
||||
<span class="earth-settings-switch-track"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="earth-settings-item" for="toggle-view-coordinates">
|
||||
<div class="earth-settings-copy">
|
||||
<span class="earth-settings-item-title">坐标信息</span>
|
||||
<span class="earth-settings-item-subtitle">控制右上角坐标信息面板显示</span>
|
||||
</div>
|
||||
<span class="earth-settings-switch">
|
||||
<input id="toggle-view-coordinates" type="checkbox" data-settings-panel="coordinates-display">
|
||||
<span class="earth-settings-switch-track"></span>
|
||||
</span>
|
||||
</label>
|
||||
<label class="earth-settings-item" for="toggle-view-stats">
|
||||
<div class="earth-settings-copy">
|
||||
<span class="earth-settings-item-title">地球信息</span>
|
||||
<span class="earth-settings-item-subtitle">控制右下角统计信息面板显示</span>
|
||||
</div>
|
||||
<span class="earth-settings-switch">
|
||||
<input id="toggle-view-stats" type="checkbox" data-settings-panel="earth-stats">
|
||||
<span class="earth-settings-switch-track"></span>
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module" src="js/main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user