ADD icons

RecuencoJones · Nov 27, 2022 · 920bd65 · 920bd65
1 parent 88983b7
commit 920bd65
Show file tree

Hide file tree

Showing 11 changed files with 84 additions and 44 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "@electron-forge/maker-zip": "^6.0.3",
     "@types/luxon": "3.1.0",
     "@vitejs/plugin-vue": "3.2.0",
+    "bootstrap-icons": "1.10.2",
     "concurrently": "7.6.0",
     "cross-env": "7.0.3",
     "electron": "21.3.0",

diff --git a/src/foreground/components/AppBreadcrumb.vue b/src/foreground/components/AppBreadcrumb.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="app-breadcrumb">
-    <router-link class="crumb" to="/">home</router-link>
+    <router-link class="crumb" to="/"><i class="bi-house-fill" /> Home</router-link>
     <template v-for="crumb of crumbs" :key="crumb.path" >
-      <span>&gt;</span>
+      <i class="bi-chevron-right" />
       <router-link class="crumb" :to="crumb.path">
         {{ sanitize(crumb.name) }}
       </router-link>
@@ -49,9 +49,9 @@ export default {
 .app-breadcrumb {
   display: flex;
   align-items: center;
-  height: 1.5rem;
+  height: 2rem;
   padding: .25rem 1rem;
-  font-size: .85rem;
+  font-size: 1rem;
   background-color: var(--color-breadcrumb-background);
 
   .crumb {

diff --git a/src/foreground/components/AppHeader.vue b/src/foreground/components/AppHeader.vue
@@ -1,10 +1,10 @@
 <template>
   <header class="app-header">
     <nav class="app-header__left">
-      <router-link class="title" to="/">vizkochos</router-link>
+      <router-link class="title" to="/">Vizkochos</router-link>
     </nav>
     <nav class="app-header__right">
-      <router-link to="/preferences">Preferences</router-link>
+      <router-link to="/preferences"><i class="bi-sliders" /></router-link>
     </nav>
   </header>
 </template>
@@ -14,20 +14,16 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  height: 2rem;
+  height: 3rem;
+  font-size: 1.25rem;
   padding: .25rem 1rem;
   background-color: var(--color-header-background);
   box-shadow: 0 0 3px 2px var(--color-box-shadow);
   z-index: 2;
 
-  &__left,
-  &__right {
-    flex: 0;
-  }
-
   .title {
     font-weight: bold;
-    font-size: 1.25rem;
+    font-size: 1.5rem;
     color: var(--color-header-title);
   }
 

diff --git a/src/foreground/components/ContextSidebar.vue b/src/foreground/components/ContextSidebar.vue
@@ -2,23 +2,29 @@
   <aside class="context-sidebar">
     <div>
       <h4>
-        <router-link :to="'/contexts/' + context">Overview</router-link>
+        <router-link :to="'/contexts/' + context"><i class="bi-binoculars" /> Overview</router-link>
       </h4>
     </div>
     <div>
-      <h4>Cluster</h4>
-      <span v-if="config">{{ config.cluster }}</span>
-      <span v-else class="text-placeholder"></span>
-      <h4>User</h4>
-      <span v-if="config">{{ config.user }}</span>
-      <span v-else class="text-placeholder"></span>
-      <h4>Namespace</h4>
-      <span v-if="config">{{ config.namespace }}</span>
-      <span v-else class="text-placeholder"></span>
+      <h4><i class="bi-hdd-rack" /> Cluster</h4>
+      <div class="resource-link">
+        <span v-if="config">{{ config.cluster }}</span>
+        <span v-else class="text-placeholder"></span>
+      </div>
+      <h4><i class="bi-person" /> User</h4>
+      <div class="resource-link">
+        <span v-if="config">{{ config.user }}</span>
+        <span v-else class="text-placeholder"></span>
+      </div>
+      <h4><i class="bi-tag" /> Namespace</h4>
+      <div class="resource-link">
+        <span v-if="config">{{ config.namespace }}</span>
+        <span v-else class="text-placeholder"></span>
+      </div>
     </div>
     <div v-for="group of groups" :key="group.name">
-      <h4>{{ group.name }}</h4>
-      <div v-for="resource of group.resources" :key="resource">
+      <h4><i :class="group.icon" /> {{ group.name }}</h4>
+      <div class="resource-link" v-for="resource of group.resources" :key="resource">
         <router-link :to="'/contexts/' + context + '/' + resource">{{ resource }}</router-link>
       </div>
     </div>
@@ -70,5 +76,9 @@ export default {
   a, span {
     color: var(--color-sidebar-link);
   }
+
+  .resource-link {
+    padding: 0.25rem 0;
+  }
 }
 </style>
diff --git a/src/foreground/components/ResourceDetail.vue b/src/foreground/components/ResourceDetail.vue
@@ -4,7 +4,7 @@
     <h3>{{ item.metadata.name }}</h3>
     <details open>
       <summary>
-        <strong>Details</strong>
+        <strong><i class="bi-card-list" /> Details</strong>
       </summary>
       <table>
         <tbody>
@@ -53,7 +53,7 @@
     </details>
     <details v-if="item.spec && item.spec.containers" open>
       <summary>
-        <strong>Logs</strong>
+        <strong><i class="bi-justify" /> Logs</strong>
       </summary>
       <pre class="logs" ref="logs"><span v-for="(entry, index) in logs" :key="index">{{ entry }}</span></pre>
     </details>
@@ -74,7 +74,7 @@
     </details>
     <details>
       <summary>
-        <strong>Manifest</strong>
+        <strong><i class="bi-filetype-yml" /> Manifest</strong>
       </summary>
       <pre>{{ toYaml(item) }}</pre>
     </details>
@@ -158,6 +158,7 @@ export default {
   bottom: 0;
   background: white;
   max-width: 50vw;
+  min-width: 35vw;
   overflow: auto;
   padding: 1rem;
   background-color: var(--color-detail-background);

diff --git a/src/foreground/config/resources.js b/src/foreground/config/resources.js
@@ -1,5 +1,6 @@
 export const resources = [
   {
+    icon: 'bi-boxes',
     name: 'Runtime',
     resources: [
       'pods',
@@ -11,13 +12,15 @@ export const resources = [
   },
   {
     name: 'Configuration',
+    icon: 'bi-gear',
     resources: [
       'configmaps',
       'secrets'
     ]
   },
   {
     name: 'Connectivity',
+    icon: 'bi-ethernet',
     resources: [
       'services',
       'ingresses',

diff --git a/src/foreground/main.js b/src/foreground/main.js
@@ -8,6 +8,7 @@ import AddContext from './pages/AddContext.vue';
 import Context from './pages/Context.vue';
 import ContextOverview from './pages/ContextOverview.vue';
 import ContextResource from './pages/ContextResource.vue';
+import 'bootstrap-icons/font/bootstrap-icons.css';
 import './styles/global.scss';
 
 const router = createRouter({

diff --git a/src/foreground/pages/Home.vue b/src/foreground/pages/Home.vue
@@ -9,34 +9,34 @@
     <div class="columns">
       <div>
         <section>
-          <h4>Quickstart</h4>
+          <h4><i class="bi-bookmarks" /> Quickstart</h4>
           <div>
-            <router-link to="/contexts/new">Add context</router-link>
+            <router-link to="/contexts/new"><i class="bi-plus-square-dotted" /> Add context</router-link>
           </div>
           <div>
-            <router-link to="/contexts">Manage contexts</router-link>
+            <router-link to="/contexts"><i class="bi-view-list" /> View contexts</router-link>
           </div>
           <div>
-            <router-link to="/preferences">Manage preferences</router-link>
+            <router-link to="/preferences"><i class="bi-sliders" /> Manage preferences</router-link>
           </div>
         </section>
         <section>
-          <h4>Recently viewed</h4>
+          <h4><i class="bi-clock-history" /> Recently viewed</h4>
           <div v-for="(recent, index) of recents" :key="index">
-            <router-link :to="recent.path">{{ recent.name }}</router-link>
+            <router-link :to="recent.path"><i class="bi-box" /> {{ recent.name }}</router-link>
           </div>
         </section>
       </div>
       <div>
         <section>
-          <h4>Pinned</h4>
+          <h4><i class="bi-pin-angle" /> Pinned</h4>
           <div v-if="pinned"></div>
           <div v-else><i>Nothing pinned yet</i></div>
         </section>
         <section>
-          <h4>Help</h4>
+          <h4><i class="bi-info-circle" /> Help</h4>
           <div>
-            <a href="#" @click="openGitHubRepository" >View in GitHub</a>
+            <a href="#" @click="openGitHubRepository"><i class="bi-github" /> View in GitHub</a>
           </div>
         </section>
       </div>
@@ -76,6 +76,10 @@ export default {
 
   section {
     padding: 2vh 1vw;
+
+    div {
+      padding: .25rem 0;
+    }
   }
 }
 </style>
diff --git a/src/foreground/pages/ListContexts.vue b/src/foreground/pages/ListContexts.vue
@@ -1,14 +1,12 @@
 <template>
-  <main class="toolbar-layout">
+  <main class="toolbar-layout contexts">
     <nav class="toolbar">
-      <router-link to="/contexts/new">
-        <button>Create context</button>
-      </router-link>
+      <router-link to="/contexts/new"><i class="bi-plus-square-dotted" /> Add context</router-link>
     </nav>
     <section class="view">
       <h4>Choose context</h4>
       <div v-for="context of contexts" :key="context.name">
-        <router-link :to="'/contexts/' + context.name">{{ context.name }}</router-link>
+        <router-link :to="'/contexts/' + context.name"><i class="bi-box" /> {{ context.name }}</router-link>
       </div>
     </section>
   </main>
@@ -31,3 +29,16 @@ export default {
   }
 }
 </script>
+
+<style lang="scss">
+.contexts {
+
+  .view {
+    padding: 10vh 20vw;
+
+    div {
+      padding: 0.25rem 0;
+    }
+  }
+}
+</style>
diff --git a/src/foreground/styles/global.scss b/src/foreground/styles/global.scss
@@ -8,7 +8,7 @@ html, body, #app {
 }
 
 .router-link-exact-active {
-  font-weight: bold;
+  font-weight: bold !important;
 }
 
 main {
@@ -45,7 +45,7 @@ dl {
   .toolbar {
     flex: 0 0 auto;
     background-color: var(--color-toolbar-background);
-    padding: .5rem;
+    padding: 1rem 2rem;
   }
 
   .view {