Update site to use Modus Bootstrap v2

trimble-oss · Oct 26, 2023 · 8f60c03 · 8f60c03
1 parent 2c81082
commit 8f60c03
Show file tree

Hide file tree

Showing 37 changed files with 30,308 additions and 275 deletions.
diff --git a/.cspell.json b/.cspell.json
@@ -1,11 +1,14 @@
 {
   "version": "0.2",
   "words": [
+    "basehref",
     "blombard",
+    "ccircle",
     "codelyzer",
     "codeql",
     "coliff",
     "cpath",
+    "csvg",
     "Delivr",
     "devkit",
     "doesn",
@@ -59,10 +62,7 @@
     "Xhref",
     "xlink"
   ],
-  "flagWords": [
-    "teh",
-    "whitelist"
-  ],
+  "flagWords": ["teh", "whitelist"],
   "ignorePaths": [
     ".cspell.json",
     "**/node_modules/**",

diff --git a/.gitignore b/.gitignore
@@ -10,3 +10,5 @@
 _site-data.json
 
 Thumbs.db
+
+docs/-*
diff --git a/app-components/preview/app-components.js b/app-components/preview/app-components.js
diff --git a/app-components/src/app/search/search.component.html b/app-components/src/app/search/search.component.html
@@ -1,23 +1,12 @@
 <div class="position-relative">
-  <div class="input-with-icon-left">
-    <input
-      class="form-control form-control-lg"
-      placeholder="Search all Modus Icons"
-      type="search"
-      autocomplete="off"
-      [(ngModel)]="searchString"
-      (input)="search()" />
-    <div class="input-icon">
-      <img
-        [src]="assetpath + 'modus-solid/svg/search.svg'"
-        class="opacity-75"
-        alt
-        height="22"
-        width="22" />
+  <div class="form-control-with-icon" role="search">
+    <input class="form-control form-control-lg" placeholder="Search all Modus Icons" type="search" autocomplete="off"
+      [(ngModel)]="searchString" (input)="search()" />
+    <div class="form-control-icon">
+      <img [src]="assetpath + 'modus-solid/svg/search.svg'" class="opacity-75" alt height="22" width="22" />
     </div>
   </div>
-  <div
-    style="top: 48px; max-height: 240px; overflow-y: auto; z-index: 1000"
+  <div style="top: 48px; max-height: 240px; overflow-y: auto; z-index: 1000"
     class="list-group list-group-borderless bg-white position-absolute shadow justify-content-start w-100">
     <ng-container *ngIf="searchResults.length === 0 && searchString.length > 1">
       <div class="list-group-item justify-content-center">
@@ -27,23 +16,16 @@ <h5 class="mb-0 text-gray-4">
       </div>
     </ng-container>
     <ng-container *ngIf="searchResults.length > 0">
-      <a
-        class="list-group-item text-decoration-none text-dark d-flex align-items-center"
-        *ngFor="let item of searchResults"
-        [href]="basehref + '/' + item.setName + '/' + item.name + '/'">
-        <svg
-          class="modus-icons mr-2"
-          fill="currentColor"
-          width="1.2em"
-          height="1.2em">
-          <use
-            [attr.xlink:href]="
+      <a class="list-group-item text-decoration-none text-dark d-flex align-items-center"
+        *ngFor="let item of searchResults" [href]="basehref + '/' + item.setName + '/' + item.name + '/'">
+        <svg class="modus-icons me-2" fill="currentColor" width="1.2em" height="1.2em">
+          <use [attr.xlink:href]="
               assetpath + item.setName + '/sprites/modus-icons.svg#' + item.name
             "></use>
         </svg>
-        <h5 class="mr-2 mb-0">{{ item.displayName }}</h5>
-        <label class="mb-0 mr-4">{{ item.tags }}</label>
-        <label class="mb-0 ml-auto text-secondary">{{
+        <h5 class="me-2 mb-0">{{ item.displayName }}</h5>
+        <label class="mb-0 me-4">{{ item.tags }}</label>
+        <label class="mb-0 ms-auto text-secondary">{{
           item.setDisplayName
         }}</label>
       </a>

diff --git a/app-components/src/app/set/set.component.html b/app-components/src/app/set/set.component.html
@@ -1,60 +1,28 @@
 <div class="d-flex align-items-center mb-4">
-  <div class="input-with-icon-left" style="width: 30%; min-width: 250px">
-    <input
-      type="search"
-      class="form-control"
-      [placeholder]="'Filter ' + iconSet.displayName + ' icons'"
-      [(ngModel)]="filterTerm"
+  <div class="form-control-with-icon" style="width: 30%; min-width: 250px" role="search">
+    <input type="search" class="form-control form-control-filter"
+      [placeholder]="'Filter ' + iconSet.displayName + ' icons'" [(ngModel)]="filterTerm"
       (input)="filterIcons($event.target.value)" />
-    <div class="input-icon">
-      <img
-        [src]="assetpath + 'modus-solid/svg/filter.svg'"
-        class="opacity-75"
-        alt
-        height="22"
-        width="22" />
+    <div class="form-control-icon">
+      <img [src]="assetpath + 'modus-solid/svg/filter.svg'" class="opacity-75" alt height="22" width="22" />
     </div>
   </div>
-  <div class="d-flex ml-auto" *ngIf="hasCategories">
-    <div class="form-group mr-2 mb-0">
-      <div class="custom-control custom-switch">
-        <input
-          type="checkbox"
-          [checked]="showCategories"
-          (change)="showCategories = !showCategories"
-          [disabled]="filterTerm !== ''"
-          class="custom-control-input"
-          id="exampleSwitch1" />
-        <label class="custom-control-label mr-2" for="exampleSwitch1"
-          >Show categories</label
-        >
-      </div>
+  <div class="d-flex ms-auto" *ngIf="hasCategories">
+    <div class="form-check form-switch me-2 mb-0 mt-1">
+      <input type="checkbox" [checked]="showCategories" (change)="showCategories = !showCategories"
+        [disabled]="filterTerm !== ''" class="form-check-input" id="Switch1" />
+      <label class="form-check-label me-2" for="Switch1">Show categories</label>
     </div>
     <div class="d-flex flex-column">
       <div class="btn-group" dropdown>
-        <button
-          id="button-basic"
-          dropdownToggle
-          type="button"
-          [disabled]="filterTerm !== ''"
-          class="btn btn-outline-dark dropdown-toggle"
-          aria-controls="dropdown-basic">
+        <button id="button-basic" dropdownToggle type="button" [disabled]="filterTerm !== ''"
+          class="btn btn-outline-secondary dropdown-toggle" aria-controls="dropdown-basic">
           Categories
         </button>
-        <ul
-          id="dropdown-basic"
-          *dropdownMenu
-          class="dropdown-menu"
-          role="menu"
-          aria-labelledby="button-basic">
+        <ul id="dropdown-basic" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-basic">
           <li role="menuitem" *ngFor="let cat of categoryList">
-            <a
-              class="dropdown-item"
-              (click)="selectCategory(cat)"
-              [ngClass]="{ active: selectedCategory === cat }"
-              href="javascript: void(0);"
-              >{{ cat }}</a
-            >
+            <a class="dropdown-item" (click)="selectCategory(cat)" [ngClass]="{ active: selectedCategory === cat }"
+              href="javascript: void(0);">{{ cat }}</a>
           </li>
         </ul>
       </div>
@@ -63,75 +31,51 @@
 </div>
 <ng-container *ngIf="hasCategories && showCategories && filterTerm === ''">
   <ng-container *ngFor="let cat of iconSetCats">
-    <div
-      class="mb-5"
-      *ngIf="cat.name === selectedCategory || selectedCategory === 'All'">
-      <h2 class="font-weight-bold mb-3">
+    <div class="mb-5" *ngIf="cat.name === selectedCategory || selectedCategory === 'All'">
+      <h2 class="fw-bold mb-3">
         {{ cat.name === "" ? "No Category" : cat.name }}
       </h2>
-      <ul
-        class="row row-cols-2 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
+      <ul class="row row-cols-2 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
         <ng-container *ngFor="let icon of cat.icons | filter : filterTerm">
-          <li
-            class="col mb-4"
-            [attr.data-tags]="icon.tags.join[',']"
+          <li class="col mb-4" [attr.data-tags]="icon.tags.join[',']"
             [attr.data-categories]="icon.categories.join[',']">
-            <a
-              class="d-block text-dark text-decoration-none"
-              [href]="'/' + setname + '/' + icon.name + '/'">
+            <a class="d-block text-dark text-decoration-none" [href]="'/' + setname + '/' + icon.name + '/'">
               <div class="p-3 py-4 mb-2 bg-light text-center rounded">
-                <svg
-                  class="modus-icons"
-                  fill="currentColor"
-                  width="32"
-                  height="32">
-                  <use
-                    [attr.xlink:href]="
+                <svg class="modus-icons" fill="currentColor" width="32" height="32">
+                  <use [attr.xlink:href]="
                       assetpath +
                       setname +
                       '/sprites/modus-icons.svg#' +
                       icon.name
                     "></use>
                 </svg>
               </div>
-              <div
-                class="name text-muted text-decoration-none text-center pt-1">
+              <div class="name text-muted text-decoration-none text-center pt-1">
                 {{ icon.displayName }}
-              </div></a
-            >
+              </div>
+            </a>
           </li>
         </ng-container>
       </ul>
     </div>
   </ng-container>
 </ng-container>
 <ng-container *ngIf="!hasCategories || !showCategories || filterTerm !== ''">
-  <ul
-    class="row row-cols-2 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
+  <ul class="row row-cols-2 row-cols-sm-4 row-cols-md-5 row-cols-lg-6 row-cols-xl-8 list-unstyled list">
     <ng-container *ngFor="let icon of iconSet.icons | filter : filterTerm">
-      <li
-        class="col mb-4"
-        [attr.data-tags]="icon.tags.join[',']"
-        [attr.data-categories]="icon.categories.join[',']">
-        <a
-          class="d-block text-dark text-decoration-none"
-          [href]="'/' + setname + '/' + icon.name + '/'">
+      <li class="col mb-4" [attr.data-tags]="icon.tags.join[',']" [attr.data-categories]="icon.categories.join[',']">
+        <a class="d-block text-dark text-decoration-none" [href]="'/' + setname + '/' + icon.name + '/'">
           <div class="p-3 py-4 mb-2 bg-light text-center rounded">
-            <svg
-              class="modus-icons"
-              fill="currentColor"
-              width="32"
-              height="32">
-              <use
-                [attr.xlink:href]="
+            <svg class="modus-icons" fill="currentColor" width="32" height="32">
+              <use [attr.xlink:href]="
                   assetpath + setname + '/sprites/modus-icons.svg#' + icon.name
                 "></use>
             </svg>
           </div>
           <div class="name text-muted text-decoration-none text-center pt-1">
             {{ icon.displayName }}
-          </div></a
-        >
+          </div>
+        </a>
       </li>
     </ng-container>
   </ul>

diff --git a/docs/assets/js/app-components.js b/docs/assets/js/app-components.js
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
@@ -6,7 +6,7 @@
   'use strict'
 
   var btnHtml =
-    '<div class="bd-clipboard"><button type="button" class="btn-clipboard rounded border-0" title="Copy to clipboard" data-toggle="tooltip" data-placement="top" aria-label="Copy to clipboard"><div class="ico ico-clipboard"></div></button></div>';
+    '<div class="bd-clipboard"><button type="button" class="btn-clipboard rounded border-0" title="Copy to clipboard" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="Copy to clipboard"><div class="ico ico-clipboard"></div></button></div>';
 
   [].slice.call(document.querySelectorAll('div.highlight'))
     .forEach(function (element) {

diff --git a/docs/assets/js/theme-toggle.js b/docs/assets/js/theme-toggle.js
@@ -14,7 +14,7 @@ const storageKey = 'theme-preference',
     localStorage.setItem(storageKey, theme.value), reflectPreference();
   },
   reflectPreference = () => {
-    document.firstElementChild.setAttribute('data-theme', theme.value),
+    document.firstElementChild.setAttribute('data-bs-theme', theme.value),
       document
         .querySelector('#theme-toggle')
         ?.setAttribute('aria-label', theme.value);

diff --git a/docs/assets/js/vendor/instant-page.min.js b/docs/assets/js/vendor/instant-page.min.js
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
@@ -50,7 +50,7 @@
   width: 18px;
 }
 
-[data-theme="dark"] {
+[data-bs-theme="dark"] {
   .ico-check,
   .ico-clipboard {
     filter: invert(1);

diff --git a/docs/assets/scss/_footer.scss b/docs/assets/scss/_footer.scss
@@ -21,6 +21,6 @@
   text-decoration: underline;
 }
 
-[data-theme="dark"] footer.footer {
+[data-bs-theme="dark"] footer.footer {
   background-color: #171c1e !important;
 }
diff --git a/docs/assets/scss/_home.scss b/docs/assets/scss/_home.scss
@@ -46,7 +46,7 @@ body.home .btn-clipboard {
   background-repeat: no-repeat;
 }
 
-[data-theme="light"] {
+[data-bs-theme="light"] {
 
   .card-home,
   .card-home div {
@@ -62,7 +62,7 @@ body.home .btn-clipboard {
   }
 }
 
-[data-theme="dark"] {
+[data-bs-theme="dark"] {
   body.home .highlight {
     background-color: #000;
   }

diff --git a/docs/assets/scss/_navbar.scss b/docs/assets/scss/_navbar.scss
@@ -41,7 +41,7 @@ header.navbar {
   border-bottom: 2px solid #fff !important;
 }
 
-[data-theme="dark"] .navbar-main .dropdown-item img {
+[data-bs-theme="dark"] .navbar-main .dropdown-item img {
   filter: invert(1);
 }
 
@@ -54,6 +54,6 @@ header.navbar {
   color: #fff;
 }
 
-[data-theme="light"] .navbar-main .dropdown-menu {
+[data-bs-theme="light"] .navbar-main .dropdown-menu {
   color: #252a2e !important;
 }
diff --git a/docs/assets/scss/_theme-dark.scss b/docs/assets/scss/_theme-dark.scss
@@ -1,5 +1,8 @@
-[data-theme="dark"] {
-  @import "../../../node_modules/@trimbleinc/modus-bootstrap/dist/modus-dark";
+[data-bs-theme="dark"] {
+  body {
+    background-color: #252a2e;
+  }
+
   .bd-navbar {
     min-height: 26px;
   }
@@ -16,6 +19,10 @@
     filter: brightness(7) saturate(0.5);
   }
 
+  img {
+    filter: invert(1);
+  }
+
   .btn-clipboard {
     background-color: #464b52;
     color: #f1f1f6;
@@ -29,6 +36,10 @@
     color: #f1f1f6;
   }
 
+  .list .modus-icons {
+    filter: brightness(9.5);
+  }
+
   pre code span span {
     filter: brightness(1.1);
   }
@@ -41,7 +52,26 @@
   button[data-toggle="dropdown"] img {
     filter: invert(1);
   }
-    .navbar-main .text-muted {
-      color: #cbcdd6 !important;
-    }
+
+  .navbar-main .text-muted {
+    color: #cbcdd6 !important;
+  }
+
+  .form-switch .form-check-input:not(:checked) {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
+  }
+
+  .dropdown-item.active {
+    background-color: #1a4c67 !important;
+    border-top: 1px solid #019aeb;
+    border-bottom: 1px solid #019aeb;
+  }
+
+  .dropdown-item:hover:not(:active) {
+    background-color: #464b52 !important;
+  }
+
+  main .navbar-brand img {
+    filter: none;
+  }
 }