Remove Banner for INSUFFICIENT_STORAGE while in device plugin

kolibri/core/assets/src/views/CorePage/AppBarPage.vue

@@ -22,9 +22,7 @@
         type="indeterminate"
         :delay="false"
       />
-      <div aria-live="polite">
-        <StorageNotification :showBanner="showStorageNotification" />
-      </div>
+      <slot name="storageNotif"></slot>
     </ScrollingHeader>
 
     <div
@@ -56,20 +54,17 @@
   import ScrollingHeader from 'kolibri.coreVue.components.ScrollingHeader';
   import useKResponsiveWindow from 'kolibri.coreVue.composables.useKResponsiveWindow';
   import SideNav from 'kolibri.coreVue.components.SideNav';
-  import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { isTouchDevice } from 'kolibri.utils.browserInfo';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
   import AppBar from '../AppBar';
-  import StorageNotification from '../StorageNotification';
-  import useUserSyncStatus from '../../composables/useUserSyncStatus';
 
   export default {
     name: 'AppBarPage',
     components: {
       AppBar,
       ScrollingHeader,
       SideNav,
-      StorageNotification,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -136,9 +131,6 @@
       paddingLeftRight() {
         return this.isAppContext || this.windowIsSmall ? '8px' : '32px';
       },
-      showStorageNotification() {
-        return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
-      },
       showAppBarsOnScroll() {
         let show = true;
         if (this.isAppContextAndTouchDevice) {

kolibri/plugins/learn/assets/src/views/LearnAppBarPage.vue

@@ -24,6 +24,15 @@
       <LearnTopNav ref="topNav" />
     </template>
 
+    <template #storageNotif>
+      <div
+        v-if="page === 'AppBarPage'"
+        aria-live="polite"
+      >
+        <StorageNotification :showBanner="showStorageNotification" />
+      </div>
+    </template>
+
     <slot></slot>
 
   </component>
@@ -36,8 +45,10 @@
   import AppBarPage from 'kolibri.coreVue.components.AppBarPage';
   import ImmersivePage from 'kolibri.coreVue.components.ImmersivePage';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import LearnTopNav from './LearnTopNav';
   import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
+  import StorageNotification from './StorageNotification';
 
   export default {
     name: 'LearnAppBarPage',
@@ -46,6 +57,7 @@
       ImmersivePage,
       LearnTopNav,
       DeviceConnectionStatus,
+      StorageNotification,
     },
     mixins: [commonCoreStrings],
 
@@ -78,6 +90,9 @@
       page() {
         return this.deviceId ? 'ImmersivePage' : 'AppBarPage';
       },
+      showStorageNotification() {
+        return this.userDeviceStatus === LearnerDeviceStatus.INSUFFICIENT_STORAGE;
+      },
     },
   };
 

kolibri/core/assets/src/views/StorageNotification.vue → kolibri/plugins/learn/assets/src/views/StorageNotification.vue

@@ -15,27 +15,31 @@
 
         <!-- Grid Buttons -->
         <KGridItem class="button-grid-item" :layout12="{ span: 12 }">
-          <KButton
-            :text="coreString('closeAction')"
-            style="margin-right: 10px"
-            appearance="flat-button"
-            :secondary="true"
-            @click="closeBanner"
-          />
-          <KButton
-            v-if="hasDownloads"
-            :text="$tr('goToDownloads')"
-            appearance="raised-button"
-            :secondary="true"
-            @click="closeBanner"
-          />
-          <KButton
-            v-if="isAdmin"
-            :text="$tr('manageChannels')"
-            appearance="raised-button"
-            :secondary="true"
-            @click="manageChannel"
-          />
+          <div class="button-layout">
+            <KButton
+              :text="coreString('closeAction')"
+              class="button-style"
+              appearance="flat-button"
+              :secondary="true"
+              @click="closeBanner"
+            />
+            <KButton
+              v-if="hasDownloads"
+              :text="$tr('goToDownloads')"
+              class="button-style"
+              appearance="raised-button"
+              :secondary="true"
+              @click="openDownloads"
+            />
+            <KButton
+              v-if="isAdmin"
+              :text="$tr('manageChannels')"
+              class="button-style"
+              appearance="raised-button"
+              :secondary="true"
+              @click="manageChannel"
+            />
+          </div>
         </KGridItem>
       </KGrid>
     </div>
@@ -53,7 +57,7 @@
   import { LearnerDeviceStatus } from 'kolibri.coreVue.vuex.constants';
   import urls from 'kolibri.urls';
   import redirectBrowser from 'kolibri.utils.redirectBrowser';
-  import useUserSyncStatus from '../composables/useUserSyncStatus';
+  import useUserSyncStatus from 'kolibri.coreVue.composables.useUserSyncStatus';
 
   export default {
     name: 'StorageNotification',
@@ -164,6 +168,10 @@
           this.previouslyFocusedElement.focus();
         }
       },
+      openDownloads() {
+        const downloadsUrl = urls['kolibri:kolibri.plugins.learn:my_downloads']();
+        redirectBrowser(downloadsUrl);
+      },
       manageChannel() {
         const deviceManagementUrl = urls['kolibri:kolibri.plugins.device:device_management']();
         if (this.canManageContent && deviceManagementUrl) {
@@ -246,10 +254,26 @@
     margin: 0 auto;
   }
 
-  .button-grid-item {
-    display: flex;
-    justify-content: flex-end;
-    min-height: 60px;
+  @media (min-width: 509px) {
+    .button-style {
+      margin-right: 10px;
+    }
+
+    .button-grid-item {
+      display: flex;
+      justify-content: flex-end;
+      min-height: 60px;
+    }
+  }
+  @media (max-width: 509px) {
+    .button-style {
+      margin-bottom: 10px;
+    }
+
+    .button-layout {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
 </style>