Signed-off-by: Julius Härtl <jus@bitgrid.net>tags/v20.0.0beta1
@@ -0,0 +1,71 @@ | |||
// Show Dashboard background image beneath header | |||
#body-user #header { | |||
background-size: cover !important; | |||
background-position: center 50% !important; | |||
background-repeat: no-repeat !important; | |||
background-attachment: fixed !important; | |||
} | |||
#content { | |||
padding-top: 0 !important; | |||
} | |||
// Hide triangle indicators from navigation since they are out of place without the header bar | |||
#appmenu li a.active::before, | |||
#appmenu li:hover a::before, | |||
#appmenu li:hover a.active::before, | |||
#appmenu li a:focus::before { | |||
display: none !important; | |||
} | |||
$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != ''; | |||
body.dashboard-inverted:not(.dashboard-dark) { | |||
// Do not invert the default logo | |||
@if ($has-custom-logo == false) { | |||
$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true)); | |||
#header .logo { | |||
background-image: $image-logo !important; | |||
opacity: 1; | |||
} | |||
} | |||
#app-dashboard > h2 { | |||
color: #fff; | |||
} | |||
#appmenu li span { | |||
color: #fff; | |||
} | |||
#appmenu svg image { | |||
filter: invert(0); | |||
} | |||
#appmenu .icon-more-white, | |||
.header-right > div:not(#settings) > * { | |||
filter: invert(1) hue-rotate(180deg); | |||
} | |||
} | |||
body.dashboard-dark:not(.dashboard-inverted) { | |||
// invert the default logo | |||
@if ($has-custom-logo == false) { | |||
$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true)); | |||
#header .logo { | |||
background-image: $image-logo !important; | |||
opacity: 1; | |||
} | |||
} | |||
#app-dashboard > h2 { | |||
color: #000; | |||
} | |||
#appmenu li span { | |||
color: #000; | |||
} | |||
#appmenu svg { | |||
filter: invert(1) !important; | |||
} | |||
#appmenu .icon-more-white, | |||
.header-right > div:not(#settings) > * { | |||
filter: invert(1) hue-rotate(180deg); | |||
} | |||
} |
@@ -87,6 +87,7 @@ class DashboardController extends Controller { | |||
* @return TemplateResponse | |||
*/ | |||
public function index(): TemplateResponse { | |||
\OCP\Util::addStyle('dashboard', 'dashboard'); | |||
$this->eventDispatcher->dispatchTyped(new LoadSidebar()); | |||
if (class_exists(LoadViewer::class)) { | |||
$this->eventDispatcher->dispatchTyped(new LoadViewer()); |
@@ -47,6 +47,7 @@ class BackgroundService { | |||
'bernie-cetonia-aurata-take-off-composition.jpg' => [ | |||
'attribution' => '', | |||
'attribution_url' => '', | |||
'theming' => self::THEMING_MODE_DARK, | |||
], | |||
'dejan-krsmanovic-ribbed-red-metal.jpg' => [ | |||
'attribution' => '', |
@@ -4,8 +4,9 @@ | |||
<div class="statuses"> | |||
<div v-for="status in registeredStatus" | |||
:id="'status-' + status" | |||
:key="status" | |||
:ref="'status-' + status" /> | |||
:key="status"> | |||
<div :ref="'status-' + status" /> | |||
</div> | |||
</div> | |||
<Draggable v-model="layout" | |||
@@ -83,6 +84,7 @@ const panels = loadState('dashboard', 'panels') | |||
const firstRun = loadState('dashboard', 'firstRun') | |||
const background = loadState('dashboard', 'background') | |||
const version = loadState('dashboard', 'version') | |||
const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds') | |||
export default { | |||
name: 'App', | |||
@@ -192,6 +194,8 @@ export default { | |||
}, | |||
}, | |||
mounted() { | |||
this.updateGlobalStyles() | |||
setInterval(() => { | |||
this.timer = new Date() | |||
}, 30000) | |||
@@ -268,31 +272,26 @@ export default { | |||
updateBackground(data) { | |||
this.background = data.type === 'custom' || data.type === 'default' ? data.type : data.value | |||
this.version = data.version | |||
this.updateGlobalStyles() | |||
}, | |||
updateGlobalStyles() { | |||
if (window.OCA.Theming.inverted) { | |||
document.body.classList.add('dashboard-inverted') | |||
} | |||
const shippedBackgroundTheme = shippedBackgroundList[this.background] ? shippedBackgroundList[this.background].theming : 'light' | |||
if (shippedBackgroundTheme === 'dark') { | |||
document.body.classList.add('dashboard-dark') | |||
} else { | |||
document.body.classList.remove('dashboard-dark') | |||
} | |||
}, | |||
}, | |||
} | |||
</script> | |||
<style lang="scss"> | |||
// Show Dashboard background image beneath header | |||
#body-user #header { | |||
background-size: cover; | |||
background-position: center 50%; | |||
background-repeat: no-repeat; | |||
background-attachment: fixed; | |||
} | |||
#content { | |||
padding-top: 0; | |||
} | |||
// Hide triangle indicators from navigation since they are out of place without the header bar | |||
#appmenu li a.active::before, | |||
#appmenu li:hover a::before, | |||
#appmenu li:hover a.active::before, | |||
#appmenu li a:focus::before { | |||
display: none; | |||
} | |||
</style> | |||
<style lang="scss" scoped> | |||
@@ -490,6 +489,8 @@ export default { | |||
& > div { | |||
max-width: 200px; | |||
margin-left: 10px; | |||
margin-right: 10px; | |||
} | |||
} | |||