Updates icons to use builtin SVGs instead for no external depend… (#354)

* Use iconmoon * Adds icons * Use go to update BASE * Changes more icons * Uses html inline * Reverts css changes * Fixes icons * Fixes tests and icons * Adds --rm to int tests * Fixes unit tests
2020-04-09 11:06:04 -07:00
parent 6dc0c93588
commit 62ab55b1e4
21 changed files with 150 additions and 35 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -4,4 +4,5 @@ node_modules
 dist
 .git
 static
-integration
+integration
+demo.gif
--- a/.htmlnanorc.js
+++ b/.htmlnanorc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  minifySvg: false,
+};
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  printWidth: 120,
+};
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,3 +0,0 @@
-{
-  "printWidth": 120
-}
--- a/4
+++ b/4
@@ -9,9 +9,13 @@ WORKDIR /build
 COPY package*.json yarn.lock ./
 RUN yarn install --network-timeout 1000000

+# Copy config files
+COPY .* ./
+
 # Copy assets to build
 COPY assets ./assets

+
 # Do the build
 RUN yarn build

--- a/assets/App.spec.js
+++ b/assets/App.spec.js
@@ -8,7 +8,7 @@ const localVue = createLocalVue();
 localVue.use(Vuex);

 describe("<App />", () => {
-  const stubs = { RouterLink: RouterLinkStub, "router-view": true, "ion-icon": true };
+  const stubs = { RouterLink: RouterLinkStub, "router-view": true, icon: true };
  let store;

  beforeEach(() => {
@@ -17,18 +17,18 @@ describe("<App />", () => {
    const state = {
      containers: [
        { id: "abc", name: "Test 1" },
-        { id: "xyz", name: "Test 2" }
+        { id: "xyz", name: "Test 2" },
      ],
-      settings: { menuWidth: 15 }
+      settings: { menuWidth: 15 },
    };

    const actions = {
-      FETCH_CONTAINERS: () => Promise.resolve()
+      FETCH_CONTAINERS: () => Promise.resolve(),
    };

    store = new Vuex.Store({
      state,
-      actions
+      actions,
    });
  });

--- a/assets/App.vue
+++ b/assets/App.vue
@@ -31,7 +31,7 @@
      v-if="!isMobile"
    >
      <span class="icon">
-        <ion-icon :name="collapseNav ? 'arrow-dropright' : 'arrow-dropleft'" size="large"></ion-icon>
+        <icon :name="collapseNav ? 'chevron-right' : 'chevron-left'"></icon>
      </span>
    </button>
  </main>
@@ -47,10 +47,12 @@ import SideMenu from "./components/SideMenu";
 import MobileMenu from "./components/MobileMenu";
 import Search from "./components/Search";
 import ContainerTitle from "./components/ContainerTitle";
+import Icon from "./components/Icon";

 export default {
  name: "App",
  components: {
+    Icon,
    LogViewerWithSource,
    SideMenu,
    MobileMenu,
--- a/assets/snapshots/App.spec.js.snap
+++ b/assets/snapshots/App.spec.js.snap
@@ -45,9 +45,8 @@ exports[`<App /> renders correctly 1`] = `
    <span
      class="icon"
    >
-      <ion-icon-stub
-        name="arrow-dropleft"
-        size="large"
+      <icon-stub
+        name="chevron-left"
      />
    </span>
  </button>
--- a/assets/components/Icon.vue
+++ b/assets/components/Icon.vue
@@ -0,0 +1,33 @@
+<template>
+  <svg class="icomoon" :class="['icon-' + name]">
+    <use :href="'#icon-' + name"></use>
+  </svg>
+</template>
+
+<script>
+export default {
+  functional: true,
+  props: {
+    name: {
+      required: true,
+      type: String,
+    },
+  },
+  name: "Icon",
+};
+</script>
+<style lang="scss" scoped>
+.icomoon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+
+  .icon:not(.keep-size) & {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>
--- a/assets/components/ScrollableView.vue
+++ b/assets/components/ScrollableView.vue
@@ -15,7 +15,7 @@
          @click="scrollToBottom('instant')"
          v-show="paused"
        >
-          <ion-icon name="download"></ion-icon>
+          <icon name="download"></icon>
        </button>
      </transition>
    </div>
@@ -23,6 +23,8 @@
 </template>

 <script>
+import Icon from "./Icon";
+
 export default {
  props: {
    scrollable: {
@@ -30,6 +32,9 @@ export default {
      default: true,
    },
  },
+  components: {
+    Icon,
+  },
  name: "ScrollableView",
  data() {
    return {
--- a/assets/components/Search.vue
+++ b/assets/components/Search.vue
@@ -10,8 +10,8 @@
          v-model="filter"
          @keyup.esc="resetSearch()"
        />
-        <span class="icon is-small is-left">
-          <ion-icon name="search"></ion-icon>
+        <span class="icon is-left">
+          <icon name="search"></icon>
        </span>
      </p>
    </div>
@@ -24,10 +24,14 @@
 <script>
 import { mapActions, mapState } from "vuex";
 import hotkeys from "hotkeys-js";
+import Icon from "./Icon";

 export default {
  props: [],
  name: "Search",
+  components: {
+    Icon,
+  },
  data() {
    return {
      showSearch: false,
@@ -80,4 +84,8 @@ export default {
 .delete {
  margin-left: 1em;
 }
+
+.icon {
+  padding: 10px 3px;
+}
 </style>
--- a/assets/components/SideMenu.vue
+++ b/assets/components/SideMenu.vue
@@ -10,7 +10,9 @@
          active-class="is-active"
          class="button is-small is-rounded is-settings-control"
        >
-          <span class="icon"><ion-icon name="settings" size="large"></ion-icon></span>
+          <span class="icon">
+            <icon name="cog"></icon>
+          </span>
        </router-link>
      </div>
    </div>
@@ -28,7 +30,7 @@
              class="icon is-small will-append-container"
              :class="{ 'is-active': activeContainersById[item.id] }"
            >
-              <ion-icon name="ios-add-circle"></ion-icon>
+              <icon name="pin"></icon>
            </span>
            {{ item.name }}
          </div>
@@ -41,9 +43,14 @@
 <script>
 import { mapActions, mapGetters, mapState } from "vuex";

+import Icon from "./Icon";
+
 export default {
  props: [],
  name: "SideMenu",
+  components: {
+    Icon,
+  },
  data() {
    return {};
  },
--- a/assets/index.html
+++ b/assets/index.html
@@ -12,11 +12,62 @@
      window["BASE_PATH"] = "{{ .Base }}";
      window["VERSION"] = "{{ .Version }}";
    </script>
-    <script type="module" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.esm.js"></script>
-    <script nomodule="" src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons/ionicons.js"></script>
  </head>

  <body>
+    <svg
+      aria-hidden="true"
+      style="position: absolute; width: 0; height: 0; overflow: hidden;"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <symbol id="icon-check" viewBox="0 0 24 24">
+          <path
+            d="M19.293 5.293l-10.293 10.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5 5c0.391 0.391 1.024 0.391 1.414 0l11-11c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0z"
+          ></path>
+        </symbol>
+        <symbol id="icon-chevron-down" viewBox="0 0 24 24">
+          <path
+            d="M5.293 9.707l6 6c0.391 0.391 1.024 0.391 1.414 0l6-6c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
+          ></path>
+        </symbol>
+        <symbol id="icon-chevron-left" viewBox="0 0 24 24">
+          <path
+            d="M15.707 17.293l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-6 6c-0.391 0.391-0.391 1.024 0 1.414l6 6c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
+          ></path>
+        </symbol>
+        <symbol id="icon-chevron-right" viewBox="0 0 24 24">
+          <path
+            d="M9.707 18.707l6-6c0.391-0.391 0.391-1.024 0-1.414l-6-6c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"
+          ></path>
+        </symbol>
+        <symbol id="icon-chevrons-down" viewBox="0 0 24 24">
+          <path
+            d="M6.293 13.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM6.293 6.707l5 5c0.391 0.391 1.024 0.391 1.414 0l5-5c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-4.293 4.293-4.293-4.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
+          ></path>
+        </symbol>
+        <symbol id="icon-download" viewBox="0 0 24 24">
+          <path d="M15.6 9.6v-7.2h-7.2v7.2h-6l9.6 9.6 9.6-9.6h-6zM0 21.6h24v2.4h-24v-2.4z"></path>
+        </symbol>
+        <symbol id="icon-pin" viewBox="0 0 24 24">
+          <path
+            d="M13.2 14.4h7.2v-1.2l-3.6-1.2v-9.6l3.6-1.2v-1.2h-16.8v1.2l3.6 1.2v9.6l-3.6 1.2v1.2h7.2v8.4l1.2 1.2 1.2-1.2v-8.4z"
+          ></path>
+        </symbol>
+        <symbol id="icon-search" viewBox="0 0 24 24">
+          <path
+            d="M15.48 17.184c-1.608 1.259-3.66 2.019-5.889 2.019-5.302 0-9.6-4.298-9.6-9.6s4.298-9.6 9.6-9.6c5.302 0 9.6 4.298 9.6 9.6 0 2.229-0.76 4.281-2.035 5.91l0.016-0.021 6.42 6.396-1.704 1.704-6.396-6.408zM9.6 16.8c3.976 0 7.2-3.224 7.2-7.2s-3.224-7.2-7.2-7.2v0c-3.976 0-7.2 3.224-7.2 7.2s3.224 7.2 7.2 7.2v0z"
+          ></path>
+        </symbol>
+        <symbol id="icon-cog" viewBox="0 0 24 24">
+          <path
+            d="M21.886 14.303c-1.259-2.181-0.502-4.976 1.691-6.246l-2.358-4.085c-0.674 0.395-1.457 0.622-2.293 0.622-2.52 0-4.563-2.057-4.563-4.594h-4.717c0.006 0.783-0.189 1.577-0.608 2.303-1.259 2.181-4.058 2.923-6.255 1.658l-2.358 4.085c0.679 0.386 1.267 0.951 1.685 1.675 1.257 2.178 0.504 4.967-1.681 6.24l2.358 4.085c0.671-0.391 1.451-0.615 2.283-0.615 2.512 0 4.55 2.044 4.563 4.569h4.717c-0.002-0.775 0.194-1.56 0.609-2.279 1.257-2.177 4.049-2.92 6.244-1.664l2.358-4.085c-0.675-0.386-1.258-0.949-1.674-1.669zM12 16.859c-2.684 0-4.859-2.176-4.859-4.859s2.176-4.859 4.859-4.859c2.684 0 4.859 2.176 4.859 4.859s-2.176 4.859-4.859 4.859z"
+          ></path>
+        </symbol>
+      </defs>
+    </svg>
    <div id="app"></div>
    <script src="main.js"></script>
  </body>
--- a/assets/main.js
+++ b/assets/main.js
@@ -13,35 +13,33 @@ Vue.use(Meta);
 Vue.use(Dropdown);
 Vue.use(Switch);

-Vue.config.ignoredElements = [/^ion-/];
-
 const routes = [
  {
    path: "/",
    component: Index,
-    name: "default"
+    name: "default",
  },
  {
    path: "/container/:id",
    component: Container,
    name: "container",
-    props: true
+    props: true,
  },
  {
    path: "/settings",
    component: Settings,
-    name: "settings"
-  }
+    name: "settings",
+  },
 ];

 const router = new VueRouter({
  mode: "history",
  base: BASE_PATH + "/",
-  routes
+  routes,
 });

 new Vue({
  router,
  store,
-  render: h => h(App)
+  render: (h) => h(App),
 }).$mount("#app");
--- a/assets/pages/Settings.vue
+++ b/assets/pages/Settings.vue
@@ -38,12 +38,12 @@
        <b-dropdown v-model="size" aria-role="list" style="margin: -8px 10px 0;">
          <button class="button is-primary" type="button" slot="trigger">
            <span class="is-capitalized">{{ size }}</span>
-            <span class="icon"><ion-icon name="ios-arrow-down"></ion-icon></span>
+            <span class="icon"><icon name="chevron-down"></icon></span>
          </button>
          <b-dropdown-item :value="value" aria-role="listitem" v-for="value in ['small', 'medium', 'large']">
            <div class="media">
-              <span class="icon">
-                <ion-icon name="checkmark" v-if="value == size"></ion-icon>
+              <span class="icon keep-size">
+                <icon name="check" v-if="value == size"></icon>
              </span>
              <div class="media-content">
                <h3 class="is-capitalized">{{ value }}</h3>
@@ -60,11 +60,14 @@
 import gt from "semver/functions/gt";
 import valid from "semver/functions/valid";
 import { mapActions, mapState } from "vuex";
+import Icon from "../components/Icon";

 export default {
  props: [],
  name: "Settings",
-  components: {},
+  components: {
+    Icon,
+  },
  data() {
    return {
      currentVersion: VERSION,
--- a/assets/styles.scss
+++ b/assets/styles.scss
@@ -72,3 +72,4 @@ html.has-custom-scrollbars {
    border-color: transparent;
  }
 }
+
--- a/integration/__image_snapshots__/test-js-home-page-renders-full-page-on-desktop-1-snap.png
+++ b/integration/__image_snapshots__/test-js-home-page-renders-full-page-on-desktop-1-snap.png
--- a/integration/__image_snapshots__/test-js-home-page-renders-ipad-viewport-1-snap.png
+++ b/integration/__image_snapshots__/test-js-home-page-renders-ipad-viewport-1-snap.png
--- a/integration/docker-compose.test.yml
+++ b/integration/docker-compose.test.yml
@@ -7,7 +7,7 @@ services:
    environment:
      - DOZZLE_FILTER=name=dozzle
    build:
-      context: ..
+      context: ..    
  integration:
    build:
      context: .
--- a/integration/jest-puppeteer.config.js
+++ b/integration/jest-puppeteer.config.js
@@ -1,6 +1,6 @@
 module.exports = {
  launch: {
-    headless: true,
+    headless: process.env.HEADLESS !== "false",
    defaultViewport: { width: 1920, height: 1200 },
    args: ["--no-sandbox", "--disable-setuid-sandbox"],
    executablePath: process.env.CHROME_EXE_PATH || "",
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
  "clean": "rm -rf static/ a_main-packr.go",
  "release": "release-it",
  "test": "jest",
-  "integration": "docker-compose -f integration/docker-compose.test.yml run integration"
+  "integration": "docker-compose -f integration/docker-compose.test.yml run --rm integration"
 },
 "repository": {
  "type": "git",