josh/dashy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨 Improved cross-theme widget styling and options

Browse Source
This commit is contained in:
Alicia Sykes
2022-01-22 20:46:34 +00:00
parent c3b6d2b0e0
commit 407384de63
5 changed files with 68 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Widgets/NewsHeadlines.vue
View File

@@ -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}`;

10
src/components/Widgets/WidgetBase.vue
View File

@@ -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;

2
src/components/Workspace/WebContent.vue
View File

@@ -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 {

1
src/styles/color-palette.scss
View File

@@ -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);

60
src/styles/color-themes.scss
View File

@@ -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,6 +699,7 @@ 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; }
}