Points popover and overflow

kolibri/core/assets/src/core-app/apiSpec.js

@@ -41,6 +41,7 @@ import SidePanelModal from '../views/SidePanelModal';
 import SideNav from '../views/SideNav';
 import Navbar from '../views/Navbar';
 import NavbarLink from '../views/Navbar/NavbarLink';
+import HorizontalNavBarWithOverflowMenu from '../views/HorizontalNavBarWithOverflowMenu';
 import CoreLogo from '../views/CoreLogo';
 import LanguageSwitcherList from '../views/language-switcher/LanguageSwitcherList';
 import LanguageSwitcherModal from '../views/language-switcher/LanguageSwitcherModal';
@@ -163,6 +164,7 @@ export default {
       SideNav,
       Navbar,
       NavbarLink,
+      HorizontalNavBarWithOverflowMenu,
       LanguageSwitcherModal,
       LanguageSwitcherList,
       ElapsedTime,

kolibri/core/assets/src/views/AppBar.vue

@@ -38,21 +38,40 @@
         </template>
 
         <template #actions>
-          <div>
+          <div aria-live="polite">
             <slot name="app-bar-actions"></slot>
-            <div class="total-points">
-              <slot name="totalPointsMenuItem"></slot>
-            </div>
+            <span v-if="isLearner">
+              <KIconButton
+                ref="pointsButton"
+                icon="pointsActive"
+                :ariaLabel="$tr('pointsAriaLabel')"
+              />
+              <div
+                v-if="pointsDisplayed"
+                class="points-popover"
+                :style="{
+                  color: $themeTokens.text,
+                  padding: '8px',
+                  backgroundColor: $themeTokens.surface,
+                }"
+              >
+                {{ $tr('pointsMessage', { points: totalPoints }) }}
+              </div>
+            </span>
             <span v-if="isUserLoggedIn" tabindex="-1">
               <KIcon
                 icon="person"
                 :style="{
                   fill: $themeTokens.textInverted,
-                  height: '20px',
-                  width: '20px',
+                  height: '24px',
+                  width: '24px',
+                  margin: '4px',
+                  top: '8px',
                 }"
               />
-              <span class="username">{{ usernameForDisplay }}</span>
+              <span class="username">
+                {{ usernameForDisplay }}
+              </span>
             </span>
 
           </div>
@@ -101,6 +120,7 @@
     },
     data() {
       return {
+        pointsDisplayed: false,
         userSyncStatus: null,
         isPolling: false,
         // poll every 10 seconds
@@ -109,7 +129,7 @@
       };
     },
     computed: {
-      ...mapGetters(['isUserLoggedIn']),
+      ...mapGetters(['isUserLoggedIn', 'totalPoints', 'isLearner']),
       ...mapState({
         username: state => state.core.session.username,
         fullName: state => state.core.session.full_name,
@@ -122,9 +142,11 @@
     },
     created() {
       window.addEventListener('click', this.handleWindowClick);
+      window.addEventListener('keydown', this.handlePopoverByKeyboard, true);
     },
     beforeDestroy() {
       window.removeEventListener('click', this.handleWindowClick);
+      window.removeEventListener('keydown', this.handlePopoverByKeyboard, true);
       this.isPolling = false;
     },
     methods: {
@@ -142,6 +164,25 @@
           }, this.pollingInterval);
         }
       },
+      handleWindowClick(event) {
+        if (this.$refs.pointsButton && this.$refs.pointsButton.$el) {
+          if (!this.$refs.pointsButton.$el.contains(event.target) && this.pointsDisplayed) {
+            this.pointsDisplayed = false;
+          } else if (
+            this.$refs.pointsButton &&
+            this.$refs.pointsButton.$el &&
+            this.$refs.pointsButton.$el.contains(event.target)
+          ) {
+            this.pointsDisplayed = !this.pointsDisplayed;
+          }
+        }
+        return event;
+      },
+      handlePopoverByKeyboard(event) {
+        if ((event.key == 'Tab' || event.key == 'Escape') && this.pointsDisplayed) {
+          this.pointsDisplayed = false;
+        }
+      },
       setPollingInterval(status) {
         if (status === SyncStatus.QUEUED) {
           // check more frequently for updates if the user is waiting to sync,
@@ -158,6 +199,15 @@
         context:
           "This message is providing additional context to the screen-reader users, but is not visible in the Kolibri UI.\n\nIn this case the screen-reader will announce the message when user navigates to the 'hamburger' button with the keyboard, to indicate that it allows them to open the sidebar navigation menu.",
       },
+      pointsMessage: {
+        message: 'You earned { points, number } points',
+        context: 'Notification indicating how many points a leaner has earned.',
+      },
+      pointsAriaLabel: {
+        message: 'Points earned',
+        context:
+          'Information for screen reader users about what information they will get by clicking a button',
+      },
     },
   };
 
@@ -174,6 +224,8 @@
   }
 
   .username {
+    position: relative;
+    bottom: 3px;
     max-width: 200px;
     // overflow-x hidden seems to affect overflow-y also, so include a fixed height
     height: 16px;
@@ -239,6 +291,11 @@
     align-items: center;
   }
 
+  /deep/ .ui-toolbar__right {
+    display: flex;
+    align-items: center;
+  }
+
   .brand-logo {
     max-width: 48px;
     max-height: 48px;
@@ -251,4 +308,14 @@
     display: none;
   }
 
+  .points-popover {
+    @extend %dropshadow-4dp;
+
+    position: absolute;
+    right: 50px;
+    z-index: 24;
+    font-size: 12px;
+    border-radius: 8px;
+  }
+
 </style>

kolibri/core/assets/src/views/ContentRenderer/DownloadButton.vue

@@ -1,10 +1,18 @@
 <template>
 
-  <KDropdownMenu
-    :text="$tr('downloadContent')"
-    :options="fileOptions"
-    @select="download"
-  />
+  <KButton
+    ref="button"
+    hasDropdown
+    :primary="$attrs.primary"
+  >
+    <span>{{ $tr('downloadContent') }}</span>
+    <template #menu>
+      <KDropdownMenu
+        :options="fileOptions"
+        @select="download"
+      />
+    </template>
+  </KButton>
 
 </template>
 

kolibri/core/assets/src/views/HorizontalNavBarWithOverflowMenu.vue

@@ -0,0 +1,146 @@
+<template>
+
+  <Navbar>
+    <div v-for="(link, index) in navigationLinks" :key="index" ref="navLinks">
+      <!-- seeting navbarlink to "not hidden" is a bit counter intutive,  -->
+      <!-- but it allows us to only sent the "hidden" value when needed -->
+      <!-- rather than for every link -->
+      <NavbarLink
+        v-if="!link.isHidden"
+        :title="link.title"
+        :link="link.link"
+      >
+        <KIcon
+          :icon="link.icon"
+          :color="link.color"
+        />
+      </NavbarLink>
+    </div>
+    <span v-if="overflowMenuLinks && overflowMenuLinks.length > 0">
+      <KIconButton
+        class="menu-icon"
+        :tooltip="coreString('moreOptions')"
+        tooltipPosition="top"
+        :ariaLabel="coreString('moreOptions')"
+        icon="optionsHorizontal"
+        appearance="flat-button"
+        :color="color"
+        :primary="false"
+      >
+        <template #menu>
+          <KDropdownMenu
+            :primary="false"
+            :disabled="false"
+            :hasIcons="true"
+            :options="overflowMenuLinks"
+            @select="handleSelect"
+          />
+        </template>
+      </KIconButton>
+    </span>
+  </Navbar>
+
+</template>
+
+
+<script>
+
+  import Navbar from 'kolibri.coreVue.components.Navbar';
+  import NavbarLink from 'kolibri.coreVue.components.NavbarLink';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import responsiveWindowMixin from 'kolibri.coreVue.mixins.responsiveWindowMixin';
+  import debounce from 'lodash/debounce';
+
+  export default {
+    name: 'HorizontalNavBarWithOverflowMenu',
+    components: {
+      Navbar,
+      NavbarLink,
+    },
+    mixins: [commonCoreStrings, responsiveWindowMixin],
+    props: {
+      /**
+       * An array of options objects, with one object per dropdown item
+       */
+      navigationLinks: {
+        type: Array,
+        default: () => [],
+        required: true,
+        validator(values) {
+          return values.every(value => value.link.name);
+        },
+      },
+    },
+    data() {
+      return {
+        numberOfNavigationTabsToDisplay: 0,
+        overflowMenuLinks: [],
+      };
+    },
+    computed: {
+      color() {
+        return this.$themeTokens.textInverted;
+      },
+    },
+    mounted() {
+      this.updateNavigationTabDisplay();
+      window.addEventListener('resize', this.updateNavigationTabDisplay);
+    },
+    beforeDestroy() {
+      document.removeEventListener('resize', this.debouncedUpdateNavigation);
+    },
+    methods: {
+      debouncedUpdateNavigation() {
+        return debounce(this.updateNavigationTabDisplay, 1000);
+      },
+      handleSelect(option) {
+        this.$router.push(this.$router.getRoute(option.value.name));
+      },
+      generateOverflowMenu() {
+        const limitedList = this.navigationLinks.slice(
+          this.numberOfNavigationTabsToDisplay,
+          this.navigationLinks.length
+        );
+        let options = [];
+        limitedList.forEach(o => options.push({ label: o.title, value: o.link, icon: o.icon }));
+        this.overflowMenuLinks = options;
+      },
+      updateNavigationTabDisplay() {
+        if (this.$refs.navLinks) {
+          // to get the list item, rather than the wrapping <div>
+          const navItems = this.$refs.navLinks.map(item => item.firstElementChild);
+          let index = 0;
+          let viewportWidthTakenUp = 0;
+          let numberOfTabLinks = 0;
+          if (navItems && navItems.length > 0) {
+            while (index < navItems.length) {
+              viewportWidthTakenUp = viewportWidthTakenUp + navItems[index].offsetWidth;
+              if (viewportWidthTakenUp < window.innerWidth - 60) {
+                navItems[index].classList.add('visible');
+                numberOfTabLinks = index + 1;
+              } else {
+                navItems[index].classList.remove('visible');
+              }
+              index = index + 1;
+            }
+          }
+          this.numberOfNavigationTabsToDisplay = numberOfTabLinks;
+          this.generateOverflowMenu();
+        }
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  @import '~kolibri-design-system/lib/styles/definitions';
+
+  .menu-icon {
+    position: absolute;
+    right: 4px;
+  }
+
+</style>