up

src/components/ConnectionPanel.vue

@@ -13,6 +13,7 @@ import {
   useMessage,
 } from 'naive-ui'
 import { computed, ref, watch } from 'vue'
+import ScreenConnectionPanel from './ScreenConnectionPanel.vue'
 import {
   DEFAULT_SERVER,
   type GameMaterial,
@@ -262,6 +263,7 @@ const gameOptions = computed(() => {
           >Подключиться</n-button
         >
       </template>
+      <ScreenConnectionPanel :state="state" :is-busy="isBusy" @action="run" />
       <p v-if="state.preparation.active" role="status" data-testid="materials-progress">
         Материалы: {{ state.preparation.completed }}/{{ state.preparation.total }} ·
         {{ (state.preparation.downloadedBytes / 1048576).toFixed(1) }} МиБ
@@ -287,7 +289,6 @@ const gameOptions = computed(() => {
           name="materials"
         >
           <div class="materials-list">
-            <n-button text size="small" @click="openMaterialsFolder">Открыть папку</n-button>
             <p v-if="!state.materials.length">В игре нет материалов.</p>
             <n-table
               v-if="state.materials.length"
@@ -299,14 +300,11 @@ const gameOptions = computed(() => {
                 <tr>
                   <th scope="col">Материал</th>
                   <th scope="col" class="status-column">Статус</th>
-                  <th scope="col" class="action-column">
-                    <span class="visually-hidden">Загрузка</span>
-                  </th>
                 </tr>
               </thead>
               <tbody v-for="group in materialGroups" :key="group.id">
                 <tr>
-                  <th scope="rowgroup" colspan="3">{{ group.name }}</th>
+                  <th scope="rowgroup" colspan="2">{{ group.name }}</th>
                 </tr>
                 <tr
                   v-for="(row, index) in group.rows"
@@ -321,6 +319,7 @@ const gameOptions = computed(() => {
                   </td>
                   <td class="material-status-cell">
                     <span
+                      v-if="row.material.status === 'ready' || row.material.status === 'loading'"
                       role="status"
                       :aria-label="materialLabels[row.material.status]"
                       :title="materialLabels[row.material.status]"
@@ -341,14 +340,11 @@ const gameOptions = computed(() => {
                         stroke-width="2"
                         aria-hidden="true"
                       >
-                        <path v-if="row.material.status === 'ready'" d="m5 12 4 4L19 6" />
-                        <path v-else d="m6 6 12 12M6 18 18 6" />
+                        <path d="m5 12 4 4L19 6" />
                       </svg>
                     </span>
-                  </td>
-                  <td>
                     <n-button
-                      v-if="row.material.status === 'missing' || row.material.status === 'error'"
+                      v-else
                       square
                       size="small"
                       :disabled="isBusy || state.busy"
@@ -379,6 +375,7 @@ const gameOptions = computed(() => {
               </tbody>
             </n-table>
             <div class="materials-actions">
+              <n-button text size="small" @click="openMaterialsFolder">Открыть папку</n-button>
               <n-button
                 :disabled="
                   !state.authenticated || state.currentGameId === null || isBusy || state.busy
@@ -414,10 +411,6 @@ const gameOptions = computed(() => {
   width: 72px;
 }
 
-.action-column {
-  width: 48px;
-}
-
 .material-name {
   overflow-wrap: anywhere;
 }
@@ -444,19 +437,13 @@ const gameOptions = computed(() => {
 }
 
 .materials-actions {
+  align-items: center;
   display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
   justify-content: flex-end;
 }
 
-.visually-hidden {
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-}
-
 .current-game {
   align-items: center;
   display: flex;

src/components/ControlPage.vue

@@ -23,7 +23,6 @@ import type {
 } from '../types/screen'
 
 import ConnectionPanel from './ConnectionPanel.vue'
-import ScreenConnectionPanel from './ScreenConnectionPanel.vue'
 import MusicPlanPanel from './MusicPlanPanel.vue'
 import { useOnlineConnection } from '../composables/useOnlineConnection'
 import ScreenPlanPanel from './ScreenPlanPanel.vue'
@@ -279,7 +278,6 @@ onUnmounted(() => {
         <n-button v-if="state?.outputOpen" @click="run(() => bridge!.closeOutput())"
           >Закрыть показ</n-button
         >
-        <ScreenConnectionPanel :state="onlineState" :is-busy="isOnlineBusy" @action="runOnline" />
         <template v-if="state">
           <label class="mute"
             >Выключить весь звук