Tab UI improvements (#20)

* updated eslint rules

* added basic pinning

* improved tab data handling

* tab UI improvements

* improved responsiveness

* updated tab icons

package.json

@@ -10,10 +10,13 @@
     "tauri": "tauri"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.4.2",
+    "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@tauri-apps/api": "^1.4.0",
     "dataclass": "^2.1.1",
     "lit": "^3.0.2",
-    "uikit": "^3.17.8"
+    "uikit": "^3.17.8",
+    "uikit-icons": "^0.5.0"
   },
   "devDependencies": {
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
@@ -33,6 +36,6 @@
     "less": "^4.2.0",
     "less-loader": "^11.1.3",
     "typescript": "^4.9.5",
-    "vite": "^4.2.1"
+    "vite": "^4.5.0"
   }
 }

src/html/component/content-pane/content-pane.less

@@ -1 +1,10 @@
 @import "uikit/src/less/uikit.theme.less";
+
+.fa-lock, .fa-lock-open {
+  height: 1em;
+}
+
+.content-pane {
+  outline: white solid 1px;
+  height: 99%;
+}

src/html/component/content-pane/content-pane.ts

@@ -2,10 +2,9 @@ import { css, html, LitElement, type TemplateResult, unsafeCSS } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import style_less from './content-pane.less?inline'
 import { type TabData } from '../../util/tab-data'
-import UIkit from 'uikit'
-import Icons from 'uikit/dist/js/uikit-icons'
-
-UIkit.use(Icons)
+import { library, icon, findIconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { faLock, faLockOpen } from '@fortawesome/free-solid-svg-icons'
+library.add(faLock, faLockOpen)
 
 @customElement('content-pane')
 export class ContentPane extends LitElement {
@@ -24,13 +23,14 @@ export class ContentPane extends LitElement {
   }
 
   protected render (): TemplateResult {
+    const locked = icon(findIconDefinition({ prefix: 'fas', iconName: 'lock' })).node
+    const unlocked = icon(findIconDefinition({ prefix: 'fas', iconName: 'lock-open' })).node
     return html`
-            <div class="content-pane uk-container uk-container-expand uk-margin-top">
-                <button class="uk-button uk-button-small uk-button-secondary pin-button" @click="${this.pin}">${this.tab.pinned ? 'unpin' : 'pin'}</button>
-                <span class="uk-margin-small-right uk-icon" uk-icon="lock"></span>
-                <span uk-icon="icon: home; ratio: 2"></span>
-                <span uk-icon="icon: settings; ratio: 2"></span>
-                <h1 class="uk-heading-large uk-text-success">${this.tab.data}</h1>
+        <div class="content-pane uk-container uk-container-expand">                
+                <button class="uk-button uk-button-small uk-button-secondary pin-button" @click="${this.pin}">
+                    ${this.tab.pinned ? locked : unlocked}
+                </button>
+                <h1 class="uk-heading uk-text-success">${this.tab.data}</h1>
             </div>
         `
   }

src/html/component/nav-bar/nav-bar.less

@@ -1,6 +1,5 @@
 @import "uikit/src/less/uikit.theme.less";
 
 .nav-bar {
-  overflow: hidden;
-  min-width: 20vw;
+  white-space: nowrap;
 }

src/html/component/root-component/root-component.less

@@ -1 +1,21 @@
 @import "uikit/src/less/uikit.theme.less";
+
+.root-component {
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+}
+
+.content {
+  width: 100vw;
+  height: 100%;
+}
+
+@media only screen and (max-width: 50em) {
+  .inactive {
+    display: none;
+  }
+  .active {
+    width: 100vw;
+  }
+}

src/html/component/root-component/root-component.ts

@@ -4,54 +4,38 @@ import { map } from 'lit/directives/map.js'
 import style_less from './root-component.less?inline'
 import '../content-pane/content-pane'
 import '../nav-bar/nav-bar'
-import { TabData } from '../../util/tab-data'
+import { type TabData } from '../../util/tab-data'
+import { tabList } from '../../util/config'
 
 const SAVE_KEY = 'tab-data'
 
 @customElement('root-component')
 class RootComponent extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
-  @state() tabs: TabData[] = []
-  currentIndex = 0
+  @state() tabs: TabData[] = tabList
   constructor () {
     super()
     this.loadTabs()
     this.addEventListener('switch-tab', this.switchTab)
     this.addEventListener('pin-tab', this.pinTab)
     this.addEventListener('unpin-tab', this.pinTab)
-    this.addEventListener('add-tab', this.addTab)
-    this.addEventListener('reset', this.reset)
-  }
-
-  private addTab (): void {
-    this.currentIndex++
-    this.tabs = this.tabs.concat(TabData.create({
-      id: this.currentIndex,
-      name: `Tab ${this.currentIndex}`,
-      data: `Contents of tab ${this.currentIndex}`
-    }))
-    this.saveTabs()
   }
 
   private saveTabs (): void {
     const tabData = this.tabs.map((tab) => ({
-      data: tab.data,
-      name: tab.name,
       id: tab.id,
-      active: tab.active
+      active: tab.active,
+      pinned: tab.pinned
     }))
     localStorage.setItem(SAVE_KEY, JSON.stringify(tabData))
   }
 
   private loadTabs (): void {
     const tabData = JSON.parse(localStorage.getItem(SAVE_KEY) ?? '[]')
-    this.tabs = tabData.map((data: { id: number, name: string, data: string, active: boolean }) => {
-      this.currentIndex = Math.max(this.currentIndex, +data.id)
-      return TabData.create({
-        id: data.id,
-        name: data.name,
-        data: data.data,
-        active: data.active
+    tabData.forEach((data: { id: number, active: boolean, pinned: boolean }) => {
+      this.tabs[data.id] = this.tabs[data.id].copy({
+        active: data.active,
+        pinned: data.pinned
       })
     })
     console.log(this.tabs)
@@ -62,9 +46,9 @@ class RootComponent extends LitElement {
     if (tabId === undefined) return
     const tabIndex = this.tabs.findIndex((tab) => tab.id === tabId)
     if (tabIndex === -1) return
-    this.tabs[tabIndex] = this.tabs[tabIndex].copy({ pinned: e.type === 'pin-tab' })
-    console.log('tab pin:', this.tabs[tabIndex], e.type)
-    this.requestUpdate()
+    const updatedTabs = this.tabs.slice()
+    updatedTabs[tabIndex] = updatedTabs[tabIndex].copy({ pinned: e.type === 'pin-tab' })
+    this.tabs = updatedTabs
     this.saveTabs()
   }
 
@@ -80,20 +64,14 @@ class RootComponent extends LitElement {
     this.saveTabs()
   }
 
-  private reset (): void {
-    this.currentIndex = 0
-    this.tabs = []
-    this.addTab()
-    localStorage.removeItem(SAVE_KEY)
-  }
-
   render (): TemplateResult {
+    const visibleTabs = this.tabs.sort((a, b) => a.id - b.id).filter((tab) => tab.pinned || tab.active)
     return html`
-      <div class="uk-container-expand">
+      <div class="root-component">
         <nav-bar .tabs=${this.tabs}></nav-bar>
-          <div class="uk-flex uk-flex-row">
-              ${map(this.tabs.sort((a, b) => a.id - b.id).filter((tab) => tab.pinned || tab.active), (tab) => html`
-                  <content-pane .tab=${tab}></content-pane>
+          <div class="content uk-flex uk-flex-row uk-flex-stretch uk-flex-wrap-stretch">
+              ${map(visibleTabs, (tab) => html`
+                  <content-pane class="uk-width-1-${visibleTabs.length} ${tab.active ? 'active' : 'inactive'}" .tab=${tab}></content-pane>
               `)}
           </div>
       </div>

src/html/component/tab-bar/tab-bar.less

@@ -1,16 +1,27 @@
 @import "uikit/src/less/uikit.theme.less";
 
-.plus-symbol {
-  color: white;
+.svg-inline--fa {
+  min-height: 1em;
+  height: 1em;
 }
 
-.tabs {
-  display: flex;
+.tab {
+  flex: auto;
+  padding: 0.5em;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  outline: #2f2f2f solid 2px;
 }
-
-.new-tab-button {
-  margin-top: auto;
-  align-self: stretch;
-  justify-self: stretch;
+.tab-name {
+  margin: 0 0.3em;
+  min-width: 0;
 }
 
+@media only screen and (max-width: 50em) {
+  .tab-name {
+    display: none;
+  }
+  .tab {
+    padding: 1em;
+  }
+}

src/html/component/tab-bar/tab-bar.ts

@@ -3,18 +3,16 @@ import { customElement, property } from 'lit/decorators.js'
 import { map } from 'lit/directives/map.js'
 import style_less from './tab-bar.less?inline'
 import { type TabData } from '../../util/tab-data'
+import { fas, type IconName } from '@fortawesome/free-solid-svg-icons'
+import { findIconDefinition, icon, library } from '@fortawesome/fontawesome-svg-core'
+library.add(fas)
 
 @customElement('tab-bar')
 class TabBar extends LitElement {
   static styles = css`${unsafeCSS(style_less)}`
 
   @property() tabs: TabData[] = []
 
-  private addTab (): void {
-    this.dispatchEvent(new Event('add-tab', { bubbles: true, composed: true }))
-    this.requestUpdate()
-  }
-
   switchTab (tabId: number) {
     return () => {
       this.dispatchEvent(new CustomEvent('switch-tab', {
@@ -28,23 +26,18 @@ class TabBar extends LitElement {
     }
   }
 
-  private reset (): void {
-    this.dispatchEvent(new Event('reset', { bubbles: true, composed: true }))
-    this.requestUpdate()
-  }
-
   render (): TemplateResult {
     return html`
-      <div class="tabs">
+      <div class="tabs uk-flex uk-flex-row">
         ${map(this.tabs, (tab) => html`
-            <button class="tab uk-button ${tab.active ? 'uk-button-primary' : 'uk-button-secondary'}" 
+            <button class="tab uk-button uk-padding-remove-vertical ${tab.active ? 'uk-button-primary' : 'uk-button-secondary'}" 
                     @click=${this.switchTab(tab.id)} 
                     ${tab.pinned ? 'disabled' : ''}>
-                ${tab.name}
+                ${tab.pinned ? icon(findIconDefinition({ prefix: 'fas', iconName: 'lock' })).node : ''}
+                ${icon(findIconDefinition({ prefix: 'fas', iconName: `${tab.icon as IconName}` })).node}
+                <span class="tab-name">${tab.name}</span>
             </button>
         `)}
-        <button class="uk-button uk-button-default uk-button-small new-tab-button" @click=${this.addTab}><span class="plus-symbol">+</span></button>
-        <button class="uk-button-small uk-button-secondary uk-margin-left" @click=${this.reset}>\u21bb</button>
       </div>
     `
   }

src/html/component/undo-redo/undo-redo.less

@@ -1,7 +1,11 @@
 @import "uikit/src/less/uikit.theme.less";
 
 .undo-redo {
-  min-width: 5em;
+  min-width: 6em;
   width: 100%;
   overflow: hidden;
-}
+}
+
+.fa-arrow-left, .fa-arrow-right {
+  height: 1em;
+}

src/html/component/undo-redo/undo-redo.ts

@@ -1,6 +1,9 @@
 import { html, css, unsafeCSS, LitElement, type TemplateResult } from 'lit'
 import { customElement } from 'lit/decorators.js'
 import style_less from './undo-redo.less?inline'
+import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons'
+import { findIconDefinition, icon, library } from '@fortawesome/fontawesome-svg-core'
+library.add(faArrowLeft, faArrowRight)
 
 @customElement('undo-redo')
 class UndoRedo extends LitElement {
@@ -9,8 +12,8 @@ class UndoRedo extends LitElement {
   render (): TemplateResult {
     return html`
       <div class="undo-redo uk-flex-nowrap">
-        <button class="uk-button uk-button-secondary uk-button-small">&#8249;</button>
-        <button class="uk-button uk-button-secondary uk-button-small" disabled>&#8250;</button>
+        <button class="uk-button uk-button-secondary uk-button-small">${icon(findIconDefinition({ prefix: 'fas', iconName: 'arrow-left' })).node}</button>
+        <button class="uk-button uk-button-secondary uk-button-small" disabled>${icon(findIconDefinition({ prefix: 'fas', iconName: 'arrow-right' })).node}</button>
       </div>
     `
   }

src/html/util/config.ts

@@ -0,0 +1,36 @@
+import { TabData } from './tab-data'
+
+let index = 0
+
+export const tabList: TabData[] = [
+  TabData.create({
+    id: index++,
+    name: 'Regulations',
+    data: 'Content of regulations tab',
+    icon: 'r'
+  }),
+  TabData.create({
+    id: index++,
+    name: 'Functions',
+    data: 'Content of functions tab',
+    icon: 'f'
+  }),
+  TabData.create({
+    id: index++,
+    name: 'Observations',
+    data: 'Content of observations tab',
+    icon: 'o'
+  }),
+  TabData.create({
+    id: index++,
+    name: 'Properties',
+    data: 'Content of properties tab',
+    icon: 'p'
+  }),
+  TabData.create({
+    id: index++,
+    name: 'Analysis',
+    data: 'Content of analysis tab',
+    icon: 'a'
+  })
+]

src/html/util/tab-data.ts

@@ -6,4 +6,5 @@ export class TabData extends Data {
   pinned: boolean = false
   data: string = 'unknown'
   active: boolean = false
+  icon: string = 'question'
 }