Remove UiToolbar wrapper in favour of KToolbar.

learningequality · Nov 27, 2024 · a5c9f72 · a5c9f72
1 parent eae3572
commit a5c9f72
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 59 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/ChannelRenderer/ContentModal.vue b/kolibri/plugins/learn/assets/src/views/ChannelRenderer/ContentModal.vue
@@ -10,7 +10,7 @@
       :style="bodyStyle"
     >
       <nav>
-        <UiToolbar
+        <KToolbar
           ref="toolbar"
           :showIcon="true"
           :style="toolbarStyle"
@@ -26,7 +26,7 @@
           <span :style="titleStyle">
             {{ title }}
           </span>
-        </UiToolbar>
+        </KToolbar>
       </nav>
 
       <main>
@@ -40,7 +40,7 @@
 
 <script>
 
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import Backdrop from 'kolibri-common/components/Backdrop';
   import ContentItem from './ContentItem';
 
@@ -49,7 +49,7 @@
     components: {
       Backdrop,
       ContentItem,
-      UiToolbar,
+      KToolbar,
     },
     props: {
       contentNode: {

diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -1,7 +1,7 @@
 <template>
 
   <nav :aria-label="$tr('optionsLabel')">
-    <UiToolbar
+    <KToolbar
       style="z-index: 8"
       :style="contentSpecificStyles"
       class="toolbar"
@@ -171,7 +171,7 @@
           </CoreMenu>
         </span>
       </template>
-    </UiToolbar>
+    </KToolbar>
   </nav>
 
 </template>
@@ -185,7 +185,7 @@
   import { ContentNodeKinds } from 'kolibri/constants';
   import CoreMenuOption from 'kolibri-common/components/CoreMenu/CoreMenuOption';
   import ProgressIcon from 'kolibri-common/components/labels/ProgressIcon';
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import { validateLearningActivity } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import TimeDuration from 'kolibri-common/components/TimeDuration';
@@ -203,7 +203,7 @@
       CoreMenuOption,
       LearningActivityIcon,
       ProgressIcon,
-      UiToolbar,
+      KToolbar,
       TimeDuration,
       SuggestedTime,
       DeviceConnectionStatus,
@@ -466,7 +466,7 @@
         return this.allActions.slice(this.numBarActions);
       },
       contentSpecificStyles() {
-        // The prime difference is that Exercises won't have shadows under the UiToolbar
+        // The prime difference is that Exercises won't have shadows under the KToolbar
         // because the LessonMasteryBar lives under it and has its own drop shadow.
         if (this.contentKind === ContentNodeKinds.EXERCISE) {
           return { border: `1px solid ${this.$themeTokens.fineLine}`, 'box-shadow': 'none' };

diff --git a/packages/kolibri-common/components/BaseToolbar.vue b/packages/kolibri-common/components/BaseToolbar.vue
@@ -16,12 +16,12 @@
 <script>
 
   /**
-   * A simple toolbar with appearance derived from UiToolbar.
+   * A simple toolbar with appearance derived from KToolbar.
    * It behaves like a container that doesn't provide any implementation
    * of its internal content layout. Insted, its content area is expected
    * to be fully controlled from components that use this toolbar.
-   * It is suitable for toolbar layouts that don't conform to typical UiToolbar
-   * use-cases or when using UiToolbar may be possible but is complicated
+   * It is suitable for toolbar layouts that don't conform to typical KToolbar
+   * use-cases or when using KToolbar may be possible but is complicated
    * and requires many /deep/ overrides and fixes.
    */
   export default {

diff --git a/packages/kolibri-common/components/keen/UiToolbar.vue b/packages/kolibri-common/components/keen/UiToolbar.vue
diff --git a/packages/kolibri-tools/lib/moduleMapping.js b/packages/kolibri-tools/lib/moduleMapping.js
@@ -57,7 +57,7 @@ module.exports = {
   'kolibri.coreVue.components.CoreLogo': 'kolibri/components/CoreLogo',
   'kolibri.coreVue.components.UiAlert': 'kolibri-design-system/lib/keen/UiAlert',
   'kolibri.coreVue.components.UiIconButton': 'kolibri-design-system/lib/keen/UiIconButton',
-  'kolibri.coreVue.components.UiToolbar': 'kolibri-common/components/keen/UiToolbar',
+  'kolibri.coreVue.components.UiToolbar': 'kolibri-design-system/lib/KToolbar',
   'kolibri.coreVue.components.PrivacyInfoModal': 'kolibri-common/components/PrivacyInfoModal',
   'kolibri.coreVue.components.UserTypeDisplay': 'kolibri-common/components/UserTypeDisplay',
   'kolibri.coreVue.components.Draggable': 'kolibri-common/components/sortable/Draggable',

diff --git a/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue b/packages/kolibri/components/pages/AppBarPage/internal/AppBar.vue
@@ -7,7 +7,7 @@
     <header>
       <SkipNavigationLink />
 
-      <UiToolbar
+      <KToolbar
         :removeNavIcon="showAppNavView"
         type="clear"
         textColor="black"
@@ -107,7 +107,7 @@
             </span>
           </div>
         </template>
-      </UiToolbar>
+      </KToolbar>
     </header>
     <div
       v-if="showNavigation && !windowIsLarge && !showAppNavView"
@@ -130,7 +130,7 @@
   import { get } from '@vueuse/core';
   import { computed, getCurrentInstance } from '@vue/composition-api';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import KIconButton from 'kolibri-design-system/lib/buttons-and-links/KIconButton';
   import themeConfig from 'kolibri/styles/themeConfig';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
@@ -145,7 +145,7 @@
   export default {
     name: 'AppBar',
     components: {
-      UiToolbar,
+      KToolbar,
       KIconButton,
       SkipNavigationLink,
       Navbar,

diff --git a/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue b/packages/kolibri/components/pages/AppBarPage/internal/SideNav.vue
@@ -528,8 +528,8 @@
 
   @import '~kolibri-design-system/lib/styles/definitions';
 
-  // Matches the Keen-UI/UiToolbar box-shadow property
-  %ui-toolbar-box-shadow {
+  // Matches the KToolbar box-shadow property
+  %k-toolbar-box-shadow {
     box-shadow:
       0 0 2px rgba(0, 0, 0, 0.12),
       0 2px 2px rgba(0, 0, 0, 0.2);
@@ -574,7 +574,7 @@
   }
 
   .side-nav-header {
-    @extend %ui-toolbar-box-shadow;
+    @extend %k-toolbar-box-shadow;
 
     position: fixed;
     top: 0;

diff --git a/packages/kolibri/components/pages/ImmersivePage/internal/ImmersiveToolbar.vue b/packages/kolibri/components/pages/ImmersivePage/internal/ImmersiveToolbar.vue
@@ -1,7 +1,7 @@
 <template>
 
   <header>
-    <UiToolbar
+    <KToolbar
       :title="appBarTitle"
       :textColor="isFullscreen ? 'black' : 'white'"
       type="clear"
@@ -56,23 +56,23 @@
       <template #actions>
         <slot name="actions"></slot>
       </template>
-    </UiToolbar>
+    </KToolbar>
   </header>
 
 </template>
 
 
 <script>
 
-  import UiToolbar from 'kolibri-common/components/keen/UiToolbar';
+  import KToolbar from 'kolibri-design-system/lib/KToolbar';
   import { validateLinkObject } from 'kolibri/utils/validators';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useNav from 'kolibri/composables/useNav';
 
   export default {
     name: 'ImmersiveToolbar',
     components: {
-      UiToolbar,
+      KToolbar,
     },
     mixins: [commonCoreStrings],
     setup() {
@@ -133,7 +133,7 @@
 
 <style lang="scss" scoped>
 
-  // only used when using a link. Otherwise, uses UiToolbar's styles
+  // only used when using a link. Otherwise, uses KToolbar's styles
   .icon {
     // copied from keen
     width: 3em;