Browse Source
feat(Dashboard): add new designs
feat(Dashboard): add new designs
Signed-off-by: Dorra Jaouad <dorra.jaoued7@gmail.com>pull/15697/head
Dorra Jaouad
2 months ago
9 changed files with 232 additions and 175 deletions
-
6REUSE.toml
-
BINimg/dashboard/meetings.png
-
BINimg/dashboard/mentions.png
-
BINimg/dashboard/reminders.png
-
BINimg/dashboard/welcome.png
-
117src/components/Dashboard/DashboardSection.vue
-
4src/components/Dashboard/EventCard.vue
-
97src/components/Dashboard/Section.vue
-
183src/components/Dashboard/TalkDashboard.vue
|
After Width: 600 | Height: 600 | Size: 280 KiB |
|
After Width: 600 | Height: 600 | Size: 142 KiB |
|
After Width: 600 | Height: 600 | Size: 106 KiB |
|
After Width: 600 | Height: 600 | Size: 112 KiB |
@ -0,0 +1,117 @@ |
|||
<!-- |
|||
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors |
|||
- SPDX-License-Identifier: AGPL-3.0-or-later |
|||
--> |
|||
|
|||
<script lang="ts" setup> |
|||
import { useIsMobile, useIsSmallMobile } from '@nextcloud/vue/composables/useIsMobile' |
|||
|
|||
const { wide = false, title = '', subtitle = '', description = '' } = defineProps<{ |
|||
wide?: boolean |
|||
title?: string |
|||
subtitle?: string |
|||
description?: string |
|||
}>() |
|||
const isSmallMobile = useIsSmallMobile() |
|||
const isMobile = useIsMobile() |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="dashboard-section" |
|||
:class="{ |
|||
'dashboard-section--wide': wide && !isSmallMobile, |
|||
'dashboard-section--list': $slots.list, |
|||
}"> |
|||
<div v-if="!isSmallMobile" |
|||
class="dashboard-section__bar" |
|||
:class="{ |
|||
'dashboard-section__bar--narrow': $slots.list || isMobile, |
|||
gradient: !$slots.image || isMobile, |
|||
'image-container': $slots.image, |
|||
}"> |
|||
<slot v-if="!($slots.list || isMobile)" name="image" /> |
|||
</div> |
|||
<div class="dashboard-section__content"> |
|||
<h3 class="dashboard-section__title"> |
|||
{{ title }} |
|||
</h3> |
|||
<span class="dashboard-section__subtitle">{{ subtitle }}</span> |
|||
<span class="dashboard-section__description">{{ description }}</span> |
|||
<slot name="list" /> |
|||
<div v-if="$slots.action" class="dashboard-section__action"> |
|||
<slot name="action" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-section { |
|||
display: flex; |
|||
border-radius: var(--border-radius-large); |
|||
overflow: hidden; |
|||
border: 2px solid var(--color-border); |
|||
height: 100%; |
|||
|
|||
&--wide { |
|||
flex-direction: row; |
|||
|
|||
.dashboard-section__content { |
|||
justify-content: center; |
|||
} |
|||
} |
|||
|
|||
&__content { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: auto; |
|||
min-height: 0; |
|||
padding: 0 calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 5); |
|||
} |
|||
|
|||
&__bar { |
|||
flex: 0 0 200px; |
|||
|
|||
&.gradient { |
|||
background: linear-gradient(78deg, var(--color-primary) 60%, var(--color-main-background) 120%); |
|||
} |
|||
|
|||
&--narrow { |
|||
flex: 0 0 10px; |
|||
} |
|||
|
|||
// Style for slotted images |
|||
:deep(img) { |
|||
width: 100%; |
|||
height: 100%; |
|||
object-fit: cover; |
|||
object-position: center; |
|||
} |
|||
|
|||
&.image-container { |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
overflow: hidden; |
|||
} |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 1.25rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&__subtitle { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&__action { |
|||
padding-block: calc(var(--default-grid-baseline) * 2); |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
margin-block: calc(var(--default-grid-baseline) * 2); |
|||
} |
|||
</style> |
|||
@ -1,97 +0,0 @@ |
|||
<!-- |
|||
- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors |
|||
- SPDX-License-Identifier: AGPL-3.0-or-later |
|||
--> |
|||
|
|||
<script lang="ts" setup> |
|||
import { useIsMobile } from '@nextcloud/vue/composables/useIsMobile' |
|||
|
|||
const { wide = false, title = '', subtitle = '', description = '' } = defineProps<{ |
|||
wide?: boolean |
|||
title?: string |
|||
subtitle?: string |
|||
description?: string |
|||
}>() |
|||
const isMobile = useIsMobile() |
|||
</script> |
|||
|
|||
<template> |
|||
<div class="dashboard-section" |
|||
:class="{ |
|||
'dashboard-section--wide': wide, |
|||
'dashboard-section--list': $slots.list, |
|||
}"> |
|||
<div v-if="!isMobile" |
|||
class="dashboard-section__bar" |
|||
:class="{ 'dashboard-section__bar--narrow': $slots.list }" /> |
|||
<div class="dashboard-section__content-wrapper"> |
|||
<div class="dashboard-section__content"> |
|||
<h3 class="dashboard-section__title"> |
|||
{{ title }} |
|||
</h3> |
|||
<span class="dashboard-section__subtitle">{{ subtitle }}</span> |
|||
<span class="dashboard-section__description">{{ description }}</span> |
|||
<slot name="list" /> |
|||
<div v-if="$slots.action" class="dashboard-section__action"> |
|||
<slot name="action" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<style lang="scss" scoped> |
|||
.dashboard-section { |
|||
display: flex; |
|||
border-radius: var(--border-radius-large); |
|||
overflow: hidden; |
|||
box-shadow: 0 2px 10px 0 rgba(0,0,0, 0.2); |
|||
height: 100%; |
|||
flex-direction: column; |
|||
|
|||
&--wide { |
|||
flex-direction: row; |
|||
} |
|||
|
|||
&__content-wrapper { |
|||
display: flex; |
|||
flex: auto; |
|||
height: 96%; // bar is 4% |
|||
padding: var(--default-grid-baseline); |
|||
} |
|||
|
|||
&__content { |
|||
position: relative; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex-grow: inherit; |
|||
padding: 0 calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 4); |
|||
} |
|||
|
|||
&__bar { |
|||
background: linear-gradient(100deg, var(--color-primary) 0%, var(--color-main-background) 130%); |
|||
flex: 0 0 50%; |
|||
|
|||
&--narrow { |
|||
flex: 0 0 4%; |
|||
} |
|||
} |
|||
|
|||
&__title { |
|||
font-size: 1.25rem; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&__subtitle { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
&__action { |
|||
margin-top: auto; |
|||
} |
|||
} |
|||
|
|||
h3 { |
|||
margin-block: calc(var(--default-grid-baseline) * 2); |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue