feat: create streamer mode box with separate alert-based component

Signed-off-by: Alexander Trost <[email protected]>
fivenet-app · Oct 11, 2024 · 98275b2 · 98275b2
1 parent 45adafd
commit 98275b2
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 16 deletions.
diff --git a/app/components/auth/account/AccountInfo.vue b/app/components/auth/account/AccountInfo.vue
@@ -4,6 +4,7 @@ import ChangeUsernameModal from '~/components/auth/account/ChangeUsernameModal.v
 import DebugInfo from '~/components/auth/account/DebugInfo.vue';
 import OAuth2Connections from '~/components/auth/account/OAuth2Connections.vue';
 import CopyToClipboardButton from '~/components/partials/CopyToClipboardButton.vue';
+import StreamerModeAlert from '~/components/partials/StreamerModeAlert.vue';
 import DataErrorBlock from '~/components/partials/data/DataErrorBlock.vue';
 import DataNoDataBlock from '~/components/partials/data/DataNoDataBlock.vue';
 import DataPendingBlock from '~/components/partials/data/DataPendingBlock.vue';
@@ -75,10 +76,7 @@ const selectedTab = computed({
     <div>
         <template v-if="streamerMode">
             <UDashboardPanelContent class="pb-24">
-                <UDashboardSection
-                    :title="$t('system.streamer_mode.title')"
-                    :description="$t('system.streamer_mode.description')"
-                />
+                <StreamerModeAlert />
             </UDashboardPanelContent>
         </template>
         <template v-else>

diff --git a/app/components/partials/StreamerModeAlert.vue b/app/components/partials/StreamerModeAlert.vue
@@ -0,0 +1,12 @@
+<template>
+    <UAlert
+        :title="$t('system.streamer_mode.title')"
+        :description="$t('system.streamer_mode.description')"
+        icon="i-mdi-broadcast"
+        color="amber"
+        variant="subtle"
+        :actions="[
+            { label: $t('common.settings'), to: '/settings', variant: 'outline', color: 'black', icon: 'i-mdi-cog-outline' },
+        ]"
+    />
+</template>
diff --git a/app/components/rector/AppConfig.vue b/app/components/rector/AppConfig.vue
@@ -273,10 +273,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
         </UDashboardNavbar>
 
         <UDashboardPanelContent class="pb-24">
-            <UDashboardSection
-                :title="$t('system.streamer_mode.title')"
-                :description="$t('system.streamer_mode.description')"
-            />
+            <StreamerModeAlert />
         </UDashboardPanelContent>
     </template>
     <template v-else>

diff --git a/app/components/rector/JobProps.vue b/app/components/rector/JobProps.vue
@@ -250,10 +250,7 @@ const onSubmitThrottle = useThrottleFn(async (event: FormSubmitEvent<Schema>) =>
         </UDashboardNavbar>
 
         <UDashboardPanelContent class="pb-24">
-            <UDashboardSection
-                :title="$t('system.streamer_mode.title')"
-                :description="$t('system.streamer_mode.description')"
-            />
+            <StreamerModeAlert />
         </UDashboardPanelContent>
     </template>
     <template v-else>

diff --git a/app/components/rector/filestore/FileList.vue b/app/components/rector/filestore/FileList.vue
@@ -111,10 +111,7 @@ const previewTypes = ['jpg', 'jpeg', 'png', 'webp'];
         </UDashboardNavbar>
 
         <UDashboardPanelContent class="pb-24">
-            <UDashboardSection
-                :title="$t('system.streamer_mode.title')"
-                :description="$t('system.streamer_mode.description')"
-            />
+            <StreamerModeAlert />
         </UDashboardPanelContent>
     </template>
     <template v-else>