altf4arnold/datatracker
1
0
Fork 0
Code Issues Pull requests Actions 4 Packages Projects Releases Wiki Activity

feat: agenda / floor-plan dark mode support (#5995)

Browse source
This commit is contained in:
Nicolas Giard 2023-07-19 19:23:37 -04:00 committed by GitHub
parent a20d1f4d9b
commit 05644a16ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 335 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
client/App.vue
View file

@ -26,6 +26,21 @@ const siteStore = useSiteStore()
const appContainer = ref(null)
// --------------------------------------------------------------------
// Set user theme
// --------------------------------------------------------------------
const desiredTheme = window.localStorage?.getItem('theme')
if (desiredTheme === 'dark') {
siteStore.theme = 'dark'
} else if (desiredTheme === 'light') {
siteStore.theme = 'light'
} else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
siteStore.theme = 'dark'
} else {
siteStore.theme = 'light'
}
// --------------------------------------------------------------------
// Handle browser resize
// --------------------------------------------------------------------

7
client/agenda/Agenda.vue
View file

@ -533,6 +533,13 @@ onMounted(() => {
color: $blue-700;
position: relative;
@at-root .theme-dark & {
border: 1px solid $blue-800;
background: linear-gradient(to top, lighten($blue-900, 2%), lighten($blue-900, 5%));
color: $blue-100;
box-shadow: inset 0 0 0 1px #000;
}
> button {
position: absolute;
top: 15px;

18
client/agenda/AgendaDetailsModal.vue
View file

@ -282,6 +282,10 @@ async function fetchSessionMaterials () {
.bi {
font-size: 20px;
color: $indigo;
@at-root .theme-dark & {
color: $indigo-300;
}
}
.detail-header {
@ -343,6 +347,11 @@ async function fetchSessionMaterials () {
border-radius: 5px;
font-weight: 500;
@at-root .theme-dark & {
background-color: $gray-900;
border-color: $gray-700;
}
a {
cursor: pointer;
@ -365,6 +374,11 @@ async function fetchSessionMaterials () {
margin-top: 12px;
border-radius: 5px;
@at-root .theme-dark & {
background-color: $gray-900;
border-color: $gray-700;
}
.bi {
color: $blue;
}
@ -377,6 +391,10 @@ async function fetchSessionMaterials () {
border: none;
border-radius: 5px;
display: block;
@at-root .theme-dark & {
background-color: $gray-900;
}
}
}

44
client/agenda/AgendaFilter.vue
View file

@ -217,30 +217,58 @@ function toggleFilterGroup (key) {
padding: 5px;
border-radius: 10px;
@at-root .theme-dark & {
background-color: $gray-800;
}
&:nth-child(2) {
background-color: $blue-100;
@at-root .theme-dark & {
background-color: $gray-800;
}
.agenda-personalize-areamain {
button {
color: $blue-600;
@at-root .theme-dark & {
color: $blue-100;
}
}
}
.agenda-personalize-groups {
background-color: lighten($blue-100, 7%);
@at-root .theme-dark & {
background-color: $gray-700;
}
}
}
&:nth-child(3) {
background-color: $orange-100;
@at-root .theme-dark & {
background-color: $gray-800;
}
.agenda-personalize-areamain {
button {
color: $orange-600;
@at-root .theme-dark & {
color: $orange-100;
}
}
}
.agenda-personalize-groups {
background-color: lighten($orange-100, 7%);
@at-root .theme-dark & {
background-color: $gray-700;
}
}
}
@ -276,6 +304,12 @@ function toggleFilterGroup (key) {
transition: background-color .5s ease;
position: relative;
@at-root .theme-dark & {
background-color: $gray-600;
border-color: $gray-700;
color: #FFF;
}
> .bi {
margin-right: .5rem;
}
@ -310,6 +344,10 @@ function toggleFilterGroup (key) {
flex: 1;
display: flex;
flex-wrap: wrap;
@at-root .theme-dark & {
background-color: $gray-700;
}
}
&-group {
@ -324,6 +362,12 @@ function toggleFilterGroup (key) {
color: $gray-600;
margin-right: 0px;
@at-root .theme-dark & {
background-color: $gray-600;
border-color: $gray-700;
color: #FFF;
}
@media screen and (max-width: $bs5-break-sm) {
font-size: .9em;
}

12
client/agenda/AgendaQuickAccess.vue
View file

@ -219,6 +219,9 @@ function scrollToNow (ev) {
</script>
<style lang="scss">
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
.agenda-quickaccess {
width: 300px;
@ -252,6 +255,10 @@ function scrollToNow (ev) {
text-align: center;
margin-top: 12px;
@at-root .theme-dark & {
border-color: $secondary;
}
@media screen and (max-width: 1350px) {
flex-direction: column;
}
@ -267,6 +274,11 @@ function scrollToNow (ev) {
background-color: #FFF;
transform: translate(-50%, 0);
text-transform: uppercase;
@at-root .theme-dark & {
background-color: $gray-900;
color: #FFF;
}
}
button {

167
client/agenda/AgendaScheduleList.vue
View file

@ -684,6 +684,10 @@ onBeforeUnmount(() => {
border-radius: 5px;
border-collapse: separate;
border-spacing: 0;
@at-root .theme-dark & {
border-color: #000;
}
}
// -> Table HEADER
@ -703,6 +707,11 @@ onBeforeUnmount(() => {
font-weight: 600;
border-right: 1px solid #FFF;
@at-root .theme-dark & {
border-bottom-color: #000;
border-right-color: #000;
}
@media screen and (max-width: $bs5-break-md) {
font-size: .8em;
padding: 0 6px;
@ -757,6 +766,10 @@ onBeforeUnmount(() => {
tr:nth-child(odd) td {
background-color: #F9F9F9;
@at-root .theme-dark & {
background-color: darken($gray-900, 5%);
}
}
&-display-noresult > td {
@ -766,6 +779,12 @@ onBeforeUnmount(() => {
color: $gray-800;
text-shadow: 1px 1px 0 #FFF;
font-weight: 600;
@at-root .theme-dark & {
background: linear-gradient(to bottom, $gray-900, $gray-800);
color: #FFF;
text-shadow: 1px 1px 0 $gray-900;
}
}
&-display-day > td {
@ -777,6 +796,10 @@ onBeforeUnmount(() => {
font-weight: 600;
scroll-margin-top: 25px;
@at-root .theme-dark & {
border-bottom-color: #000;
}
@media screen and (max-width: $bs5-break-md) {
font-size: .9em;
}
@ -789,6 +812,11 @@ onBeforeUnmount(() => {
padding: 0 12px;
color: #333;
@at-root .theme-dark & {
background: linear-gradient(to top, lighten($blue-900, 8%), lighten($blue-900, 4%)) !important;
color: $blue-100;
}
@media screen and (max-width: $bs5-break-md) {
padding: 0 6px;
}
@ -796,12 +824,21 @@ onBeforeUnmount(() => {
&.agenda-table-cell-ts {
border-right: 1px solid $blue-200 !important;
color: $blue-700;
@at-root .theme-dark & {
border-right-color: $blue-700 !important;
color: $blue-200;
}
}
&.agenda-table-cell-name {
color: $blue-700;
font-weight: 600;
@at-root .theme-dark & {
color: $blue-200;
}
@media screen and (max-width: $bs5-break-md) {
font-size: .9em;
}
@ -813,6 +850,10 @@ onBeforeUnmount(() => {
padding: 0 12px;
color: #333;
@at-root .theme-dark & {
color: #FFF;
}
@media screen and (max-width: $bs5-break-md) {
padding: 2px 6px;
}
@ -821,6 +862,11 @@ onBeforeUnmount(() => {
background-color: desaturate($blue-700, 50%) !important;
border-bottom: 1px solid #FFF;
padding-bottom: 2px;
@at-root .theme-dark & {
background-color: $gray-800 !important;
border-bottom-color: #000;
}
}
&.agenda-table-cell-ts {
@ -829,6 +875,13 @@ onBeforeUnmount(() => {
border-right: 1px solid $blue-200 !important;
color: $blue-200;
border-bottom: 1px solid #FFF;
@at-root .theme-dark & {
background: linear-gradient(to right, rgba(lighten($blue-900, 8%), .1), lighten($blue-900, 5%));
border-right-color: $blue-700 !important;
border-bottom-color: $blue-700;
color: $blue-700;
}
}
}
@ -837,6 +890,11 @@ onBeforeUnmount(() => {
border-right: 1px solid $gray-300 !important;
white-space: nowrap;
@at-root .theme-dark & {
color: $yellow-100;
border-right-color: $gray-700 !important;
}
@media screen and (max-width: 1300px) {
font-size: .85rem;
}
@ -880,6 +938,11 @@ onBeforeUnmount(() => {
border-right: 1px solid $gray-300 !important;
white-space: nowrap;
@at-root .theme-dark & {
color: $gray-400;
border-right-color: $gray-700 !important;
}
@media screen and (max-width: $bs5-break-md) {
font-size: .7rem;
word-break: break-all;
@ -906,6 +969,14 @@ onBeforeUnmount(() => {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-right: 6px;
@at-root .theme-dark & {
background-color: $gray-700;
border-bottom-color: $gray-600;
border-right-color: $gray-600;
color: $gray-200;
text-shadow: 1px 1px $gray-800;
}
}
}
@ -937,6 +1008,10 @@ onBeforeUnmount(() => {
}
&.bi-green {
color: $green-500;
@at-root .theme-dark & {
color: $green-300;
}
}
&.bi-pink {
color: $pink-500;
@ -986,6 +1061,11 @@ onBeforeUnmount(() => {
padding: 2px 3px;
transition: background-color .6s ease;
@at-root .theme-dark & {
background-color: rgba(0, 0, 0, .2);
color: $gray-200;
}
&:hover, &:focus {
color: $blue;
}
@ -994,6 +1074,10 @@ onBeforeUnmount(() => {
color: $red-500;
background-color: rgba($red-500, .1);
@at-root .theme-dark & {
color: $red-400;
}
&:hover, &:focus {
background-color: rgba($red-500, .3);
}
@ -1002,6 +1086,10 @@ onBeforeUnmount(() => {
color: $orange-700;
background-color: rgba($orange-500, .1);
@at-root .theme-dark & {
color: $orange-400;
}
&:hover, &:focus {
background-color: rgba($orange-500, .3);
}
@ -1010,6 +1098,10 @@ onBeforeUnmount(() => {
color: $blue-600;
background-color: rgba($blue-300, .1);
@at-root .theme-dark & {
color: $blue-300;
}
&:hover, &:focus {
background-color: rgba($blue-300, .3);
}
@ -1018,6 +1110,10 @@ onBeforeUnmount(() => {
color: $green-500;
background-color: rgba($green-300, .1);
@at-root .theme-dark & {
color: $green-300;
}
&:hover, &:focus {
background-color: rgba($green-300, .3);
}
@ -1026,6 +1122,10 @@ onBeforeUnmount(() => {
color: $purple-500;
background-color: rgba($purple-400, .1);
@at-root .theme-dark & {
color: $purple-300;
}
&:hover, &:focus {
background-color: rgba($purple-400, .3);
}
@ -1034,6 +1134,10 @@ onBeforeUnmount(() => {
color: $pink-500;
background-color: rgba($pink-400, .1);
@at-root .theme-dark & {
color: $pink-400;
}
&:hover, &:focus {
background-color: rgba($pink-400, .3);
}
@ -1042,6 +1146,10 @@ onBeforeUnmount(() => {
color: $teal-600;
background-color: rgba($teal-400, .1);
@at-root .theme-dark & {
color: $teal-300;
}
&:hover, &:focus {
background-color: rgba($teal-400, .3);
}
@ -1068,6 +1176,10 @@ onBeforeUnmount(() => {
text-align: right;
white-space: nowrap;
@at-root .theme-dark & {
border-right-color: $gray-700 !important;
}
@media screen and (max-width: 1300px) {
font-size: .9rem;
}
@ -1093,6 +1205,15 @@ onBeforeUnmount(() => {
border-bottom: none;
}
&.agenda-table-cell-ts.is-session-event {
@at-root .theme-dark & {
background: transparent;
color: $red-300;
border-top: 1px solid darken($red-100, 5%);
border-bottom-color: darken($red-100, 5%);
}
}
&.agenda-table-cell-room {
border-right: 1px solid darken($red-100, 5%) !important;
}
@ -1111,6 +1232,15 @@ onBeforeUnmount(() => {
border-bottom: none;
}
&.agenda-table-cell-ts.is-session-event {
@at-root .theme-dark & {
background: transparent;
color: $orange-300;
border-top: 1px solid darken($orange-100, 5%);
border-bottom-color: darken($orange-100, 5%);
}
}
&.agenda-table-cell-room {
border-right: 1px solid darken($orange-100, 5%) !important;
}
@ -1124,10 +1254,21 @@ onBeforeUnmount(() => {
border-top: 1px solid darken($indigo-100, 5%);
border-bottom: 1px solid darken($indigo-100, 5%);
@at-root .theme-dark & {
color: $indigo-100;
// border-bottom-color: #000;
}
&.agenda-table-cell-ts {
background: linear-gradient(to right, lighten($indigo-100, 8%), lighten($indigo-100, 5%));
color: $indigo-700;
border-right: 1px solid $indigo-100 !important;
@at-root .theme-dark & {
background: rgba($indigo, .1) !important;
color: $indigo-100;
border-right-color: $indigo-500 !important;
}
}
&.agenda-table-cell-room {
@ -1137,10 +1278,18 @@ onBeforeUnmount(() => {
&.agenda-table-cell-name {
color: $indigo-700;
font-style: italic;
@at-root .theme-dark & {
color: $indigo-200;
}
}
&.agenda-table-cell-links {
background: linear-gradient(to right, lighten($indigo-100, 5%), lighten($indigo-100, 8%));
@at-root .theme-dark & {
background: rgba($indigo, .1) !important;
}
}
}
&-type-plenary td {
@ -1149,9 +1298,19 @@ onBeforeUnmount(() => {
border-top: 1px solid darken($teal-100, 5%);
border-bottom: 1px solid darken($teal-100, 5%);
@at-root .theme-dark & {
background: rgba($teal, .15) !important;
color: $teal-100;
border-bottom: 1px solid darken($teal-600, 5%);
}
&.agenda-table-cell-ts {
background: linear-gradient(to right, lighten($teal-100, 8%), lighten($teal-100, 2%));
border-right: 1px solid $teal-200 !important;
@at-root .theme-dark & {
border-right-color: $teal-700 !important;
}
}
&.agenda-table-cell-room {
@ -1161,10 +1320,18 @@ onBeforeUnmount(() => {
&.agenda-table-cell-name {
font-weight: 600;
color: $teal-700;
@at-root .theme-dark & {
color: $teal-200;
}
}
&.agenda-table-cell-links {
background: linear-gradient(to right, rgba(lighten($teal, 54%), 0), lighten($teal, 54%));
@at-root .theme-dark & {
background: rgba($teal, .15) !important;
}
}
}

8
client/agenda/AgendaSettings.vue
View file

@ -457,6 +457,14 @@ onMounted(() => {
font-size: .8rem;
color: $gray-700;
text-shadow: 1px 1px 0 #FFF;
@at-root .theme-dark & {
background-color: $gray-900;
text-shadow: none;
border-bottom-color: $gray-700;
border-right-color: $gray-700;
color: #FFF;
}
}
&-calcoffset {

5
client/agenda/FloorPlan.vue
View file

@ -258,6 +258,11 @@ onMounted(() => {
border-radius: 5px;
font-weight: 500;
@at-root .theme-dark & {
background-color: darken($gray-900, 5%);
border-color: $gray-700;
}
a {
cursor: pointer;

8
client/agenda/agenda.scss
View file

@ -10,6 +10,10 @@
justify-content: space-between;
align-items: center;
@at-root .theme-dark & {
color: $gray-300;
}
@media screen and (max-width: $bs5-break-sm) {
justify-content: center;
@ -25,6 +29,10 @@
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
box-decoration-break: clone;
@at-root .theme-dark & {
background-image: linear-gradient(220deg, $yellow-200 20%, $orange-400 70%);
}
}
}

53
client/components/n-theme.vue
View file

@ -1,24 +1,45 @@
<template lang='pug'>
n-config-provider(:theme-overrides='themeOverrides')
n-config-provider(
:theme='currentTheme'
:theme-overrides='state.themeOverrides'
)
slot
</template>
<script>
import { NConfigProvider } from 'naive-ui'
<script setup>
import { computed, reactive, watch } from 'vue'
import { darkTheme, NConfigProvider } from 'naive-ui'
export default {
components: {
NConfigProvider
},
data () {
return {
themeOverrides: {
common: {
primaryColor: '#0d6efd',
primaryColorHover: '#0d6efd'
}
}
import { useSiteStore } from '../shared/store'
// STORES
const siteStore = useSiteStore()
// DATA
const state = reactive({
themeOverrides: {
common: {
primaryColor: '#0d6efd',
primaryColorHover: '#0d6efd'
}
}
}
})
// COMPUTED
const currentTheme = computed(() => {
return siteStore.theme === 'dark' ? darkTheme : null
})
// APPLY BODY THEME CLASS
watch(() => siteStore.theme, (newValue) => {
if (newValue === 'dark') {
document.body.classList.add('theme-dark')
} else {
document.body.classList.remove('theme-dark')
}
}, { immediate: true })
</script>

3
client/shared/store.js
View file

@ -6,6 +6,7 @@ export const useSiteStore = defineStore('site', {
criticalErrorLink: null,
criticalErrorLinkText: null,
isMobile: /Mobi/i.test(navigator.userAgent),
viewport: Math.round(window.innerWidth)
viewport: Math.round(window.innerWidth),
theme: null
})
})

12
ietf/templates/meeting/agenda.html
View file

@ -39,6 +39,10 @@
backdrop-filter: blur(10px);
}
.theme-dark #app-loading {
background-color: rgba(0,0,0,.75);
}
#app-loading:before {
content: '';
box-sizing: border-box;
@ -56,6 +60,10 @@
z-index: 2000000000;
}
.theme-dark #app-loading:before {
border-top-color: #FFF;
}
#app-loading:after {
content: 'Loading meeting {{ meetingData.meetingNumber }}...';
position: absolute;
@ -69,6 +77,10 @@
z-index: 2000000000;
}
.theme-dark #app-loading:after {
color: #FFF;
}
#app-loading-footer {
position: absolute;
text-align: center;