Signed-off-by: Julius Härtl <jus@bitgrid.net>tags/v20.0.0beta1
// 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); | |||||
} | |||||
} |
* @return TemplateResponse | * @return TemplateResponse | ||||
*/ | */ | ||||
public function index(): TemplateResponse { | public function index(): TemplateResponse { | ||||
\OCP\Util::addStyle('dashboard', 'dashboard'); | |||||
$this->eventDispatcher->dispatchTyped(new LoadSidebar()); | $this->eventDispatcher->dispatchTyped(new LoadSidebar()); | ||||
if (class_exists(LoadViewer::class)) { | if (class_exists(LoadViewer::class)) { | ||||
$this->eventDispatcher->dispatchTyped(new LoadViewer()); | $this->eventDispatcher->dispatchTyped(new LoadViewer()); |
'bernie-cetonia-aurata-take-off-composition.jpg' => [ | 'bernie-cetonia-aurata-take-off-composition.jpg' => [ | ||||
'attribution' => '', | 'attribution' => '', | ||||
'attribution_url' => '', | 'attribution_url' => '', | ||||
'theming' => self::THEMING_MODE_DARK, | |||||
], | ], | ||||
'dejan-krsmanovic-ribbed-red-metal.jpg' => [ | 'dejan-krsmanovic-ribbed-red-metal.jpg' => [ | ||||
'attribution' => '', | 'attribution' => '', |
<div class="statuses"> | <div class="statuses"> | ||||
<div v-for="status in registeredStatus" | <div v-for="status in registeredStatus" | ||||
:id="'status-' + status" | :id="'status-' + status" | ||||
:key="status" | |||||
:ref="'status-' + status" /> | |||||
:key="status"> | |||||
<div :ref="'status-' + status" /> | |||||
</div> | |||||
</div> | </div> | ||||
<Draggable v-model="layout" | <Draggable v-model="layout" | ||||
const firstRun = loadState('dashboard', 'firstRun') | const firstRun = loadState('dashboard', 'firstRun') | ||||
const background = loadState('dashboard', 'background') | const background = loadState('dashboard', 'background') | ||||
const version = loadState('dashboard', 'version') | const version = loadState('dashboard', 'version') | ||||
const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds') | |||||
export default { | export default { | ||||
name: 'App', | name: 'App', | ||||
}, | }, | ||||
}, | }, | ||||
mounted() { | mounted() { | ||||
this.updateGlobalStyles() | |||||
setInterval(() => { | setInterval(() => { | ||||
this.timer = new Date() | this.timer = new Date() | ||||
}, 30000) | }, 30000) | ||||
updateBackground(data) { | updateBackground(data) { | ||||
this.background = data.type === 'custom' || data.type === 'default' ? data.type : data.value | this.background = data.type === 'custom' || data.type === 'default' ? data.type : data.value | ||||
this.version = data.version | 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> | </script> | ||||
<style lang="scss"> | <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> | ||||
<style lang="scss" scoped> | <style lang="scss" scoped> | ||||
& > div { | & > div { | ||||
max-width: 200px; | max-width: 200px; | ||||
margin-left: 10px; | |||||
margin-right: 10px; | |||||
} | } | ||||
} | } | ||||