|
|
|
@@ -16,7 +16,8 @@ |
|
|
|
@end="saveLayout"> |
|
|
|
<div v-for="panelId in layout" :key="panels[panelId].id" class="panel"> |
|
|
|
<div class="panel--header"> |
|
|
|
<h2 :class="panels[panelId].iconClass"> |
|
|
|
<h2> |
|
|
|
<div :class="panels[panelId].iconClass" role="img" /> |
|
|
|
{{ panels[panelId].title }} |
|
|
|
</h2> |
|
|
|
</div> |
|
|
|
@@ -27,24 +28,26 @@ |
|
|
|
</Draggable> |
|
|
|
|
|
|
|
<div class="footer"> |
|
|
|
<a class="edit-panels icon-rename" |
|
|
|
tabindex="0" |
|
|
|
@click="showModal" |
|
|
|
@keyup.enter="showModal" |
|
|
|
@keyup.space="showModal">{{ t('dashboard', 'Customize') }}</a> |
|
|
|
<Button @click="showModal"> |
|
|
|
<template #icon> |
|
|
|
<Pencil :size="20" /> |
|
|
|
</template> |
|
|
|
{{ t('dashboard', 'Customize') }} |
|
|
|
</Button> |
|
|
|
</div> |
|
|
|
|
|
|
|
<Modal v-if="modal" size="large" @close="closeModal"> |
|
|
|
<div class="modal__content"> |
|
|
|
<h3>{{ t('dashboard', 'Edit widgets') }}</h3> |
|
|
|
<ol class="panels"> |
|
|
|
<li v-for="status in sortedAllStatuses" :key="status"> |
|
|
|
<li v-for="status in sortedAllStatuses" :key="status" :class="'panel-' + status"> |
|
|
|
<input :id="'status-checkbox-' + status" |
|
|
|
type="checkbox" |
|
|
|
class="checkbox" |
|
|
|
:checked="isStatusActive(status)" |
|
|
|
@input="updateStatusCheckbox(status, $event.target.checked)"> |
|
|
|
<label :for="'status-checkbox-' + status" :class="statusInfo[status].icon"> |
|
|
|
<label :for="'status-checkbox-' + status"> |
|
|
|
<div :class="statusInfo[status].icon" role="img" /> |
|
|
|
{{ statusInfo[status].text }} |
|
|
|
</label> |
|
|
|
</li> |
|
|
|
@@ -55,13 +58,14 @@ |
|
|
|
v-bind="{swapThreshold: 0.30, delay: 500, delayOnTouchOnly: true, touchStartThreshold: 3}" |
|
|
|
handle=".draggable" |
|
|
|
@end="saveLayout"> |
|
|
|
<li v-for="panel in sortedPanels" :key="panel.id"> |
|
|
|
<li v-for="panel in sortedPanels" :key="panel.id" :class="'panel-' + panel.id"> |
|
|
|
<input :id="'panel-checkbox-' + panel.id" |
|
|
|
type="checkbox" |
|
|
|
class="checkbox" |
|
|
|
:checked="isActive(panel)" |
|
|
|
@input="updateCheckbox(panel, $event.target.checked)"> |
|
|
|
<label :for="'panel-checkbox-' + panel.id" :class="isActive(panel) ? 'draggable ' + panel.iconClass : panel.iconClass"> |
|
|
|
<label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }"> |
|
|
|
<div :class="panel.iconClass" role="img" /> |
|
|
|
{{ panel.title }} |
|
|
|
</label> |
|
|
|
</li> |
|
|
|
@@ -89,13 +93,16 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import Vue from 'vue' |
|
|
|
import { loadState } from '@nextcloud/initial-state' |
|
|
|
import { generateUrl } from '@nextcloud/router' |
|
|
|
import { getCurrentUser } from '@nextcloud/auth' |
|
|
|
import Modal from '@nextcloud/vue/dist/Components/Modal' |
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
import { loadState } from '@nextcloud/initial-state' |
|
|
|
import axios from '@nextcloud/axios' |
|
|
|
import { generateUrl } from '@nextcloud/router' |
|
|
|
import Button from '@nextcloud/vue/dist/Components/Button' |
|
|
|
import Draggable from 'vuedraggable' |
|
|
|
import Modal from '@nextcloud/vue/dist/Components/Modal' |
|
|
|
import Pencil from 'vue-material-design-icons/Pencil.vue' |
|
|
|
import Vue from 'vue' |
|
|
|
|
|
|
|
import isMobile from './mixins/isMobile' |
|
|
|
import BackgroundSettings from './components/BackgroundSettings' |
|
|
|
import getBackgroundUrl from './helpers/getBackgroundUrl' |
|
|
|
@@ -106,6 +113,7 @@ const background = loadState('dashboard', 'background') |
|
|
|
const themingDefaultBackground = loadState('dashboard', 'themingDefaultBackground') |
|
|
|
const version = loadState('dashboard', 'version') |
|
|
|
const shippedBackgroundList = loadState('dashboard', 'shippedBackgrounds') |
|
|
|
|
|
|
|
const statusInfo = { |
|
|
|
weather: { |
|
|
|
text: t('dashboard', 'Weather'), |
|
|
|
@@ -118,15 +126,18 @@ const statusInfo = { |
|
|
|
} |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'App', |
|
|
|
name: 'DashboardApp', |
|
|
|
components: { |
|
|
|
Modal, |
|
|
|
Draggable, |
|
|
|
BackgroundSettings, |
|
|
|
Button, |
|
|
|
Draggable, |
|
|
|
Modal, |
|
|
|
Pencil, |
|
|
|
}, |
|
|
|
mixins: [ |
|
|
|
isMobile, |
|
|
|
], |
|
|
|
|
|
|
|
data() { |
|
|
|
return { |
|
|
|
isAdmin: getCurrentUser().isAdmin, |
|
|
|
@@ -163,6 +174,7 @@ export default { |
|
|
|
backgroundImage: `url(${this.backgroundImage})`, |
|
|
|
} |
|
|
|
}, |
|
|
|
|
|
|
|
greeting() { |
|
|
|
const time = this.timer.getHours() |
|
|
|
|
|
|
|
@@ -203,12 +215,14 @@ export default { |
|
|
|
const shouldShowName = this.displayName && this.uid !== this.displayName |
|
|
|
return { text: shouldShowName ? good[partOfDay].withName : good[partOfDay].generic } |
|
|
|
}, |
|
|
|
|
|
|
|
isActive() { |
|
|
|
return (panel) => this.layout.indexOf(panel.id) > -1 |
|
|
|
}, |
|
|
|
isStatusActive() { |
|
|
|
return (status) => !(status in this.enabledStatuses) || this.enabledStatuses[status] |
|
|
|
}, |
|
|
|
|
|
|
|
sortedAllStatuses() { |
|
|
|
return Object.keys(this.allCallbacksStatus).slice().sort(this.sortStatuses) |
|
|
|
}, |
|
|
|
@@ -226,6 +240,7 @@ export default { |
|
|
|
return this.registeredStatus.slice().sort(this.sortStatuses) |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
watch: { |
|
|
|
callbacks() { |
|
|
|
this.rerenderPanels() |
|
|
|
@@ -245,6 +260,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
mounted() { |
|
|
|
this.updateGlobalStyles() |
|
|
|
this.updateSkipLink() |
|
|
|
@@ -261,6 +277,7 @@ export default { |
|
|
|
destroyed() { |
|
|
|
window.removeEventListener('scroll', this.handleScroll) |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
/** |
|
|
|
* Method to register panels that will be called by the integrating apps |
|
|
|
@@ -342,16 +359,14 @@ export default { |
|
|
|
this.updateGlobalStyles() |
|
|
|
}, |
|
|
|
updateGlobalStyles() { |
|
|
|
document.body.setAttribute('data-dashboard-background', this.background) |
|
|
|
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') |
|
|
|
// Override primary-invert-if-bright and color-primary-text if background is set |
|
|
|
const isBackgroundBright = shippedBackgroundList[this.background]?.theming === 'dark' |
|
|
|
if (isBackgroundBright) { |
|
|
|
document.querySelector('#header').style.setProperty('--primary-invert-if-bright', 'invert(100%)') |
|
|
|
document.querySelector('#header').style.setProperty('--color-primary-text', '#000000') |
|
|
|
} else { |
|
|
|
document.body.classList.remove('dashboard--dark') |
|
|
|
document.querySelector('#header').style.removeProperty('--primary-invert-if-bright') |
|
|
|
document.querySelector('#header').style.removeProperty('--color-primary-text') |
|
|
|
} |
|
|
|
}, |
|
|
|
updateSkipLink() { |
|
|
|
@@ -411,19 +426,9 @@ export default { |
|
|
|
background-repeat: no-repeat; |
|
|
|
background-attachment: fixed; |
|
|
|
background-color: var(--color-primary); |
|
|
|
--color-background-translucent: rgba(255, 255, 255, 0.8); |
|
|
|
--color-background-translucent: rgba(var(--color-main-background-rgb), 0.8); |
|
|
|
--background-blur: blur(10px); |
|
|
|
|
|
|
|
#body-user.theme--dark & { |
|
|
|
background-color: var(--color-main-background); |
|
|
|
--color-background-translucent: rgba(24, 24, 24, 0.8); |
|
|
|
} |
|
|
|
|
|
|
|
#body-user.theme--highcontrast & { |
|
|
|
background-color: var(--color-main-background); |
|
|
|
--color-background-translucent: var(--color-main-background); |
|
|
|
} |
|
|
|
|
|
|
|
> h2 { |
|
|
|
color: var(--color-primary-text); |
|
|
|
text-align: center; |
|
|
|
@@ -486,20 +491,27 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
> h2 { |
|
|
|
display: block; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-grow: 1; |
|
|
|
margin: 0; |
|
|
|
font-size: 20px; |
|
|
|
line-height: 24px; |
|
|
|
font-weight: bold; |
|
|
|
background-size: 32px; |
|
|
|
background-position: 14px 12px; |
|
|
|
padding: 16px 8px 16px 60px; |
|
|
|
padding: 16px 8px; |
|
|
|
height: 56px; |
|
|
|
white-space: nowrap; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
cursor: grab; |
|
|
|
div { |
|
|
|
background-size: 32px; |
|
|
|
width: 32px; |
|
|
|
height: 32px; |
|
|
|
margin-right: 16px; |
|
|
|
background-position: center; |
|
|
|
filter: var(--background-invert-if-dark); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
@@ -519,7 +531,8 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.footer { |
|
|
|
text-align: center; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
transition: bottom var(--animation-slow) ease-in-out; |
|
|
|
bottom: 0; |
|
|
|
padding: 44px 0; |
|
|
|
@@ -537,6 +550,8 @@ export default { |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
|
|
|
|
.button, |
|
|
|
.button-vue |
|
|
|
.edit-panels, |
|
|
|
.statuses ::v-deep .action-item .action-item__menutoggle, |
|
|
|
.statuses ::v-deep .action-item.action-item--open .action-item__menutoggle { |
|
|
|
@@ -576,18 +591,29 @@ export default { |
|
|
|
background-color: var(--color-background-hover); |
|
|
|
border: 2px solid var(--color-main-background); |
|
|
|
border-radius: var(--border-radius-large); |
|
|
|
background-size: 24px; |
|
|
|
background-position: 16px 16px; |
|
|
|
text-align: left; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
white-space: nowrap; |
|
|
|
|
|
|
|
div { |
|
|
|
position: absolute; |
|
|
|
top: 16px; |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
background-size: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
&:hover { |
|
|
|
border-color: var(--color-primary); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// Do not invert status icons |
|
|
|
&:not(.panel-status) label div { |
|
|
|
filter: var(--background-invert-if-dark); |
|
|
|
} |
|
|
|
|
|
|
|
input[type='checkbox'].checkbox + label:before { |
|
|
|
position: absolute; |
|
|
|
right: 12px; |
John Molakvoæ
2 lat temu