From 407384de6359fc1fcac8de2506cf4266b078dc3c Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 22 Jan 2022 20:46:34 +0000
Subject: [PATCH] :art: Improved cross-theme widget styling and options

---
 src/components/Widgets/NewsHeadlines.vue |  5 +-
 src/components/Widgets/WidgetBase.vue    | 10 ++--
 src/components/Workspace/WebContent.vue  |  2 +-
 src/styles/color-palette.scss            |  1 +
 src/styles/color-themes.scss             | 62 +++++++++++++++++++++---
 5 files changed, 68 insertions(+), 12 deletions(-)

diff --git a/src/components/Widgets/NewsHeadlines.vue b/src/components/Widgets/NewsHeadlines.vue
index e79c0c96..d467c70c 100644
--- a/src/components/Widgets/NewsHeadlines.vue
+++ b/src/components/Widgets/NewsHeadlines.vue
@@ -7,7 +7,7 @@
       <span class="date">{{ article.published | date }}</span>
     </div>
     <p class="description">{{ article.description }}</p>
-    <img class="thumbnail" v-if="article.image" :src="article.image" alt="Thumbnail" />
+    <img class="thumbnail" v-if="article.image && !hideImages" :src="article.image" alt="Image" />
   </div>
 </div>
 </template>
@@ -46,6 +46,9 @@ export default {
     keywords() {
       return this.options.keywords ? `&keywords=${this.options.keywords}` : '';
     },
+    hideImages() {
+      return this.options.hideImages;
+    },
     endpoint() {
       return `${widgetApiEndpoints.news}?apiKey=${this.apiKey}`
       + `${this.country}${this.category}${this.lang}${this.count}`;
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 4691dd74..e65b0b5b 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -1,10 +1,11 @@
 <template>
   <div :class="`widget-base ${ loading ? 'is-loading' : '' }`">
     <!-- Update and Full-Page Action Buttons  -->
-    <Button :click="update" class="action-btn update-btn" v-if="!loading">
+    <Button :click="update" class="action-btn update-btn" v-if="!hideControls && !loading">
       <UpdateIcon />
     </Button>
-    <Button :click="fullScreenWidget" class="action-btn open-btn" v-if="!error && !loading">
+    <Button :click="fullScreenWidget"
+      class="action-btn open-btn" v-if="!hideControls && !error && !loading">
       <OpenIcon />
     </Button>
     <!-- Loading Spinner -->
@@ -457,6 +458,9 @@ export default {
     widgetRef() {
       return `widget-${this.widgetType}-${this.index}`;
     },
+    hideControls() {
+      return this.widget.hideControls;
+    },
   },
   methods: {
     /* Calls update data method on widget */
@@ -485,7 +489,7 @@ export default {
 @import '@/styles/media-queries.scss';
 .widget-base {
   position: relative;
-  padding-top: 0.75rem;
+  padding: 0.75rem 0.5rem 0.5rem 0.5rem;
   // Refresh and full-page action buttons
   button.action-btn  {
     height: 1rem;
diff --git a/src/components/Workspace/WebContent.vue b/src/components/Workspace/WebContent.vue
index ece8c65e..e7465a3a 100644
--- a/src/components/Workspace/WebContent.vue
+++ b/src/components/Workspace/WebContent.vue
@@ -26,7 +26,7 @@ iframe {
   height: calc(100% - var(--header-height));
   width: calc(100% - var(--side-bar-width));
   border: none;
-  background: white;
+  background: var(--workspace-web-content-background);
 }
 
 .web-content.hide {
diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss
index 4398cbf3..0bb66f61 100644
--- a/src/styles/color-palette.scss
+++ b/src/styles/color-palette.scss
@@ -90,6 +90,7 @@
   --side-bar-color: var(--primary);
   --side-bar-item-background: var(--side-bar-background);
   --side-bar-item-color: var(--side-bar-color);
+  --workspace-web-content-background: var(--background);
   // Minimal view
   --minimal-view-background-color: var(--background);
   --minimal-view-title-color: var(--primary);
diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss
index 96d07546..b07ac609 100644
--- a/src/styles/color-themes.scss
+++ b/src/styles/color-themes.scss
@@ -237,6 +237,10 @@ html[data-theme='material-original'] {
   --context-menu-background: var(--white);
   --context-menu-secondary-color: var(--white);
   --widget-text-color: var(--black);
+  --minimal-view-section-heading-background: var(--white);
+  --minimal-view-search-background: var(--white);
+  --minimal-view-search-color: var(--background-darker);
+  --minimal-view-group-background: #e3e3e3;
   div.context-menu ul li:hover {
     background: var(--primary);
     color: var(--white);
@@ -244,16 +248,17 @@ html[data-theme='material-original'] {
   .widget-base {
     background: #f5f5f5;
     box-shadow: var(--item-shadow);
-    padding: 0.25rem;
+    padding: 0.5rem;
     margin: 0.25rem 0;
   }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; border: none; }
 }
 
 html[data-theme='material-dark-original'] {
   --primary: #08B0BB;
   --background: #39434C;
   --background-darker: var(--primary);
-  --material-dark: #131a1f;
+  --material-dark: #1b252c;
   --material-light: #41e2ed;
   --settings-text-color: var(--primary);
   --settings-background: #092b3a;
@@ -290,6 +295,10 @@ html[data-theme='material-dark-original'] {
   --description-tooltip-background: var(--material-dark);
   --description-tooltip-color: var(--primary);
   --widget-text-color: var(--white);
+  --minimal-view-section-heading-background: var(--material-dark);
+  --minimal-view-search-background: var(--material-dark);
+  --minimal-view-search-color: var(--background-darker);
+  --minimal-view-group-background: var(--material-dark);
   &::-webkit-scrollbar-thumb {
     border-left: 1px solid var(--material-dark);
   }
@@ -300,6 +309,10 @@ html[data-theme='material-dark-original'] {
       background: #333c43;
     }
   }
+  div.minimal-section-heading, .minimal-section-inner.selected, input.minimal-search {
+    box-shadow: 2px 2px 4px #000000, 0 1px 3px #000000cc;
+  }
+  .minimal-section-inner.selected { border-top: none; }
 }
 
 html[data-theme='colorful'] {
@@ -382,6 +395,12 @@ html[data-theme='minimal-light'], html[data-theme='minimal-dark'], html[data-the
     border-bottom: 1px dashed #ffffff38;
     border-radius: 0;
   }
+  .widget-base {
+    background: var(--background-darker);
+    padding: 1rem 0.5rem;
+    margin: 0.5rem 0;
+  }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; border: none; }
 }
 
 html[data-theme='material'], html[data-theme='material-dark'] {
@@ -565,6 +584,8 @@ html[data-theme='material'] {
   --minimal-view-group-color: var(--primary);
   --minimal-view-group-background: var(--white);
 
+  --widget-background-color: var(--background);
+
   .minimal-section-inner.selected, div.minimal-section-heading  {
     border: none;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
@@ -606,9 +627,10 @@ html[data-theme='material'] {
   .widget-base {
     background: #f5f5f5;
     box-shadow: var(--item-shadow);
-    padding: 0.25rem;
+    padding: 0.5rem;
     margin: 0.25rem 0;
   }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; }
 }
 
 html[data-theme='material-dark'] {
@@ -677,7 +699,8 @@ html[data-theme='material-dark'] {
   // --minimal-view-group-color: var(--primary);
   --minimal-view-group-background: #131a1f;
   --context-menu-secondary-color: #131a1f;
-
+  --widget-accent-color: #131a1fbf;
+  
   div.minimal-section-heading h3, div.minimal-section-heading.selected h3 {
     color: #d5d5d5;
   }
@@ -699,8 +722,9 @@ html[data-theme='material-dark'] {
     background: var(--item-background);
     box-shadow: var(--item-shadow);
     margin: 0.25rem 0;
-    padding: 0.25rem;
+    padding: 0.5rem;
   }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; }
 }
 
 html[data-theme='minimal-light'] {
@@ -731,6 +755,7 @@ html[data-theme='minimal-light'] {
   --about-page-color: var(--background-darker);
   --context-menu-color: var(--background-darker);
   --context-menu-secondary-color: var(--primary);
+  --widget-text-color: #4e4e4e;
   section.filter-container {
     background: var(--white);
     border-bottom: 1px dashed #00000038;
@@ -738,6 +763,9 @@ html[data-theme='minimal-light'] {
       border: 1px solid var(--background-darker);
     }
   }
+  .widget-base {
+    background: #f2f2f2;
+  }
 }
 
 html[data-theme='minimal-dark'] {
@@ -804,6 +832,7 @@ html[data-theme='vaporware'] {
   --description-tooltip-background: var(--background);
   --heading-text-color: var(--background);
   --search-label-color: var(--background);
+  --widget-accent-color: #1d194f;
 
   div.item-group-container {
     gap: 0.3rem;
@@ -859,6 +888,11 @@ html[data-theme='vaporware'] {
       background: none;
     }
   }
+  .widget-base {
+    background: var(--background);
+    padding: 1rem 0.5rem;
+    margin: 0.5rem 0;
+  }
 }
 
 html[data-theme='glow'], html[data-theme=glow-colorful] {
@@ -1004,11 +1038,17 @@ html[data-theme="oblivion-scotch"] {
   div.item-wrapper a.item {
     border: 1px solid #313d4f;
   }
-  section.filter-container form input#filter-tiles {
+  section.filter-container form input#filter-tiles, .widget-base  {
     border: 1px solid #313d4f;
     box-shadow: 0 1px 5px #0c0d0e;
   }
-
+  .widget-base {
+    background: var(--item-background);
+    box-shadow: var(--item-shadow);
+    padding: 0.5rem;
+    margin: 1rem 0;
+  }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; border: none; }
   .minimal-home div.item-group-container, input.minimal-search {
     box-shadow: 0 1px 6px #00000099, 0 1px 1px #000000cc;
   }
@@ -1226,6 +1266,8 @@ html[data-theme="color-block"] {
   --curve-factor: 4px;
   --curve-factor-navbar: 8px;
 
+  --widget-text-color: var(--white);
+
   // Style overrides
   label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; }
   .content-inner { border-top: 1px dashed var(--primary); }
@@ -1241,6 +1283,11 @@ html[data-theme="color-block"] {
       box-shadow: var(--item-hover-shadow);
     }
   }
+  .widget-base {
+    background: var(--background-darker);
+    padding: 1rem 0.5rem;
+    margin: 0.5rem 0;
+  }
 }
 
 html[data-theme="one-dark"] {
@@ -1311,6 +1358,7 @@ html[data-theme="one-dark"] {
     padding: 0.5rem;
     margin: 1rem 0;
   }
+  .minimal-widget-wrap .widget-base { box-shadow:  none; border: none; }
 }