Minimal implementation of KToolbar.

learningequality · Nov 19, 2024 · 1072c23 · 1072c23
1 parent c04026a
commit 1072c23
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/lib/KThemePlugin.js b/lib/KThemePlugin.js
@@ -42,6 +42,7 @@ import KTextTruncator from './KTextTruncator';
 import KLogo from './KLogo';
 import KRadioButtonGroup from './KRadioButtonGroup.vue';
 import KFocusTrap from './KFocusTrap.vue';
+import KToolbar from './KToolbar';
 
 import { themeTokens, themeBrand, themePalette, themeOutlineStyle } from './styles/theme';
 import globalThemeState from './styles/globalThemeState';
@@ -165,4 +166,5 @@ export default function KThemePlugin(Vue) {
   Vue.component('KTextTruncator', KTextTruncator);
   Vue.component('KRadioButtonGroup', KRadioButtonGroup);
   Vue.component('KFocusTrap', KFocusTrap);
+  Vue.component('KToolbar', KToolbar);
 }
diff --git a/lib/keen/UiToolbar.vue → lib/KToolbar.vue b/lib/keen/UiToolbar.vue → lib/KToolbar.vue
@@ -48,8 +48,8 @@
 
 <script>
 
-  import UiIconButton from './UiIconButton.vue';
-  import UiProgressLinear from './UiProgressLinear.vue';
+  import UiIconButton from './keen/UiIconButton.vue';
+  import UiProgressLinear from './keen/UiProgressLinear.vue';
 
   export default {
     name: 'UiToolbar',
@@ -125,8 +125,8 @@
 </script>
 
 <style lang="scss">
-  @import '../styles/definitions';
-  @import './styles/imports';
+  @import './styles/definitions';
+  @import './keen/styles/imports';
 
   $ui-toolbar-font-size: rem(18px) !default;
   $ui-toolbar-height: rem(56px) !default;
@@ -138,7 +138,7 @@
     align-items: center;
     justify-content: space-between;
     height: $ui-toolbar-height;
-    padding-left: rem(16px);
+    padding: 0 16px;
     max-width: 100%;
     font-family: inherit;
     font-size: $ui-toolbar-font-size;
@@ -158,7 +158,9 @@
   }
 
   .ui-toolbar__left {
-    display: inline-flex;
+    display: flex;
+    align-items: center;
+    margin-left: 16px;
   }
 
   .ui-toolbar__nav-icon {
@@ -175,7 +177,7 @@
   }
 
   .ui-toolbar__brand {
-    min-width: rem(160px);
+    min-width: inherit;
   }
 
   .ui-toolbar__brand-text {
@@ -204,6 +206,11 @@
     height: rem(3px);
   }
 
+  .ui-toolbar__title {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
   // ================================================
   // Types
   // ================================================