Merge pull request #73 from Lissy93/REFACTOR_ui-improvments

Refactor UI improvments

src/components/LinkItems/Item.vue

@@ -214,6 +214,7 @@ export default {
   &:hover {
     box-shadow: var(--item-hover-shadow);
     background: var(--item-background-hover);
+    color: var(--item-text-color-hover);
     position: relative;
     .tile-title span.text {
       white-space: pre-wrap;
@@ -278,12 +279,14 @@ export default {
 
 /* Specify layout for alternate sized icons */
 .item {
+  /* Small Tile Specific Themes */
   &.size-small {
     display: flex;
     flex-direction: row-reverse;
     justify-content: flex-end;
     align-items: center;
     height: 2rem;
+    padding-top: 4px;
     div img, div svg.missing-image {
       width: 2rem;
     }
@@ -298,6 +301,7 @@ export default {
       }
     }
   }
+  /* Medium Tile Specific Themes */
   &.size-medium {
     display: flex;
     flex-direction: column;
@@ -312,14 +316,42 @@ export default {
       max-width: 160px;
     }
   }
+  /* Large Tile Specific Themes */
   &.size-large {
-    height: 100px;
+    display: flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    text-align: left;
+    overflow: hidden;
+    align-items: center;
+    max-height: 6rem;
+    margin: 0.2rem;
+    padding: 0.5rem;
+    img {
+      padding: 0.1rem 0.25rem;
+    }
+    .tile-title {
+      height: auto;
+      padding: 0.1rem 0.25rem;
+      span.text {
+        position: relative;
+        font-weight: bold;
+        font-size: 1.1rem;
+        width: 100%;
+      }
+      p.description {
+        display: block;
+        margin: 0;
+        white-space: pre-wrap;
+        font-size: .9em;
+        text-overflow: ellipsis;
+      }
+    }
   }
-
   p.description {
-    display: none;
+    display: none; // By default, we don't show the description
   }
-  &:before {
+  &:before { // Certain themes (e.g. material) show css animated fas icon on hover
     display: none;
     font-family: FontAwesome;
     content: var(--open-icon, "\f054") !important;

src/components/PageStrcture/Footer.vue

@@ -36,7 +36,7 @@ footer {
   text-align: center;
   color: var(--medium-grey);
   opacity: var(--dimming-factor);
-  background: var(--background-darker);
+  background: var(--footer-background);
   margin-top: 1.5rem;
   border-top: 1px solid var(--outline-color);
   @include tablet-down {

src/components/Settings/SearchBar.vue

@@ -83,7 +83,7 @@ export default {
     background: var(--search-container-background);
     label {
         display: inline;
-        color: var(--settings-text-color);
+        color: var(--search-label-color);
         margin: 0.5rem;
         display: inline;
     }

src/styles/color-palette.scss

@@ -42,6 +42,7 @@
   --nav-link-border-color: transparent;
   --nav-link-border-color-hover: var(--primary);
   --item-text-color: var(--primary);
+  --item-text-color-hover: var(--item-text-color);
   --item-group-outer-background: var(--primary);
   --item-group-heading-text-color: var(--item-group-background);
   --item-group-heading-text-color-hover: var(--background);
@@ -49,8 +50,10 @@
   --settings-text-color: var(--primary);
   --search-container-background: var(--background-darker);
   --search-field-background: var(--background);
+  --search-label-color: var(--settings-text-color);
   --footer-text-color: var(--medium-grey);
   --footer-text-color-link:  var(--primary);
+  --footer-background: var(--background-darker);
   --welcome-popup-background: var(--background-darker);
   --welcome-popup-text-color: var(--primary);
   --config-code-background: #fff;

src/styles/color-themes.scss

@@ -97,6 +97,39 @@ html[data-theme='matrix'] {
   }
 }
 
+html[data-theme='blue-purple'] {
+  --primary: #54dbf8;
+  --background: #e5e8f5;
+  --background-darker: #5346f3;
+  --font-headings: 'Sniglet', cursive;
+
+  --dimming-factor: 0.8;
+  --curve-factor: 6px;
+
+  --settings-text-color: var(--background-darker);
+  --item-text-color: var(--background-darker);
+  --item-background: var(--white);
+  --item-background-hover: var(--primary);
+
+  --item-group-heading-text-color: var(--background-darker);
+  --item-group-background: var(--background);
+  --footer-text-color: var(--white);
+  --context-menu-background: var(--white);
+  --context-menu-color: var(--background-darker);
+  --context-menu-secondary-color: var(--primary);
+
+  .item {
+    box-shadow: none;
+    border: 1px solid var(--background-darker);
+  }
+  section.filter-container form label {
+    color: var(--primary);
+  }
+  footer {
+    color: var(--white);
+  }
+}
+
 html[data-theme='hacker-girl'] {
   --background: #000;
   --background-darker: #000;
@@ -658,7 +691,8 @@ html[data-theme='vaporware'] {
   --curve-factor: 2px;
   --curve-factor-navbar: 6px;
   --login-form-color: #09bfe6;
-
+  --config-settings-background: #100e2c;
+  
   .home {
     background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%);
   }
@@ -719,4 +753,30 @@ html[data-theme='vaporware'] {
   //   background-size: cover;
   //   div.home { background: none; }
   // }
+}
+
+html[data-theme='cyberpunk'] {
+--pink: #ff2a6d;
+--pale:	#d1f7ff;
+--aqua:	#05d9e8;
+--teal:	#005678;
+--blue:	#01012b;
+--gold:	#ebeb0f;
+
+--primary: var(--gold);
+--background: var(--blue);
+--background-darker: var(--pink);
+--heading-text-color: var(--blue);
+--nav-link-background-color-hover: var(--blue);
+--nav-link-text-color-hover: var(--pink);
+--nav-link-border-color-hover: var(--blue);
+--config-settings-background: var(--blue);
+--config-settings-color: var(--pink);
+--search-label-color: var(--blue);
+--item-group-background: var(--blue);
+--item-text-color: var(--pale);
+--scroll-bar-color: var(--aqua);
+--scroll-bar-background: var(--teal);
+--footer-background: var(--aqua);
+--font-headings: 'Audiowide', cursive;
 }

src/styles/typography.scss

@@ -57,4 +57,7 @@ html {
 @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap');
 
 /* Jam */
-@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap');
+
+/* Cyber Punk */
+@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

src/utils/defaults.js

@@ -31,8 +31,10 @@ module.exports = {
     'raspberry-jam',
     'bee',
     'tiger',
+    'blue-purple',
     'material-original',
     'material-dark-original',
+    'cyberpunk',
     'vaporware',
     'high-contrast-dark',
     'high-contrast-light',

src/views/Home.vue

@@ -160,13 +160,17 @@ export default {
     },
     /* Checks if any of the icons are Font Awesome glyphs */
     checkIfFontAwesomeNeeded() {
-      let isFound = false;
+      let isNeeded = false;
+      if (!this.sections) return false;
       this.sections.forEach((section) => {
+        if (section.icon && section.icon.includes('fa-')) isNeeded = true;
         section.items.forEach((item) => {
-          if (item.icon && item.icon.includes('fa-')) isFound = true;
+          if (item.icon && item.icon.includes('fa-')) isNeeded = true;
         });
       });
-      return isFound;
+      const currentTheme = localStorage[localStorageKeys.THEME]; // Some themes require FA
+      if (['material', 'material-dark'].includes(currentTheme)) isNeeded = true;
+      return isNeeded;
     },
     /* Injects font-awesome's script tag, only if needed */
     initiateFontAwesome() {