mirror of https://github.com/requarks/wiki
pull/5698/head
Nicolas Giard
2 years ago
parent
d9dbd0f62f
commit
c3bd7ff97e
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,40 @@
|
||||
/* roboto-300 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local(''),
|
||||
url('/_assets/fonts/roboto/roboto-all-300.woff2') format('woff2')
|
||||
}
|
||||
/* roboto-regular - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local(''),
|
||||
url('/_assets/fonts/roboto/roboto-all-regular.woff2') format('woff2')
|
||||
}
|
||||
/* roboto-500 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
src: local(''),
|
||||
url('/_assets/fonts/roboto/roboto-all-500.woff2') format('woff2')
|
||||
}
|
||||
/* roboto-700 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local(''),
|
||||
url('/_assets/fonts/roboto/roboto-all-700.woff2') format('woff2')
|
||||
}
|
||||
/* roboto-900 - vietnamese_latin-ext_latin_greek-ext_greek_cyrillic-ext_cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: 900;
|
||||
src: local(''),
|
||||
url('/_assets/fonts/roboto/roboto-all-900.woff2') format('woff2')
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,39 @@
|
||||
/* cyrillic-ext */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
src: url(/_assets/fonts/rubik/rubik-variable-cyrillic-ext.woff2) format('woff2');
|
||||
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||
}
|
||||
/* cyrillic */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
src: url(/_assets/fonts/rubik/rubik-variable-cyrillic.woff2) format('woff2');
|
||||
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||
}
|
||||
/* hebrew */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
src: url(/_assets/fonts/rubik/rubik-variable-hebrew.woff2) format('woff2');
|
||||
unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
|
||||
}
|
||||
/* latin-ext */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
src: url(/_assets/fonts/rubik/rubik-variable-latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Rubik';
|
||||
font-display: swap;
|
||||
src: url(/_assets/fonts/rubik/rubik-variable-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
|
||||
body.wiki-root {
|
||||
font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
Binary file not shown.
@ -1,190 +1,210 @@
|
||||
<template lang="pug">
|
||||
q-page.q-py-md(:style-fn='pageStyle')
|
||||
.text-header {{$t('profile.myInfo')}}
|
||||
.text-header {{t('profile.myInfo')}}
|
||||
q-item
|
||||
blueprint-icon(icon='contact')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.displayName`)}}
|
||||
q-item-label(caption) {{$t(`profile.displayNameHint`)}}
|
||||
q-item-label {{t(`profile.displayName`)}}
|
||||
q-item-label(caption) {{t(`profile.displayNameHint`)}}
|
||||
q-item-section
|
||||
q-input(
|
||||
outlined
|
||||
v-model='config.name'
|
||||
v-model='state.config.name'
|
||||
dense
|
||||
hide-bottom-space
|
||||
:aria-label='$t(`profile.displayName`)'
|
||||
:aria-label='t(`profile.displayName`)'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='envelope')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.email`)}}
|
||||
q-item-label(caption) {{$t(`profile.emailHint`)}}
|
||||
q-item-label {{t(`profile.email`)}}
|
||||
q-item-label(caption) {{t(`profile.emailHint`)}}
|
||||
q-item-section
|
||||
q-input(
|
||||
outlined
|
||||
v-model='config.email'
|
||||
v-model='state.config.email'
|
||||
dense
|
||||
:aria-label='$t(`profile.email`)'
|
||||
:aria-label='t(`profile.email`)'
|
||||
readonly
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='address')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.location`)}}
|
||||
q-item-label(caption) {{$t(`profile.locationHint`)}}
|
||||
q-item-label {{t(`profile.location`)}}
|
||||
q-item-label(caption) {{t(`profile.locationHint`)}}
|
||||
q-item-section
|
||||
q-input(
|
||||
outlined
|
||||
v-model='config.location'
|
||||
v-model='state.config.location'
|
||||
dense
|
||||
hide-bottom-space
|
||||
:aria-label='$t(`profile.location`)'
|
||||
:aria-label='t(`profile.location`)'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='new-job')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.jobTitle`)}}
|
||||
q-item-label(caption) {{$t(`profile.jobTitleHint`)}}
|
||||
q-item-label {{t(`profile.jobTitle`)}}
|
||||
q-item-label(caption) {{t(`profile.jobTitleHint`)}}
|
||||
q-item-section
|
||||
q-input(
|
||||
outlined
|
||||
v-model='config.jobTitle'
|
||||
v-model='state.config.jobTitle'
|
||||
dense
|
||||
hide-bottom-space
|
||||
:aria-label='$t(`profile.jobTitle`)'
|
||||
:aria-label='t(`profile.jobTitle`)'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='gender')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.pronouns`)}}
|
||||
q-item-label(caption) {{$t(`profile.pronounsHint`)}}
|
||||
q-item-label {{t(`profile.pronouns`)}}
|
||||
q-item-label(caption) {{t(`profile.pronounsHint`)}}
|
||||
q-item-section
|
||||
q-input(
|
||||
outlined
|
||||
v-model='config.pronouns'
|
||||
v-model='state.config.pronouns'
|
||||
dense
|
||||
hide-bottom-space
|
||||
:aria-label='$t(`profile.pronouns`)'
|
||||
:aria-label='t(`profile.pronouns`)'
|
||||
)
|
||||
.text-header.q-mt-lg {{$t('profile.preferences')}}
|
||||
.text-header.q-mt-lg {{t('profile.preferences')}}
|
||||
q-item
|
||||
blueprint-icon(icon='timezone')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.timezone`)}}
|
||||
q-item-label(caption) {{$t(`profile.timezoneHint`)}}
|
||||
q-item-label {{t(`profile.timezone`)}}
|
||||
q-item-label(caption) {{t(`profile.timezoneHint`)}}
|
||||
q-item-section
|
||||
q-select(
|
||||
outlined
|
||||
v-model='config.timezone'
|
||||
:options='timezones'
|
||||
v-model='state.config.timezone'
|
||||
:options='dataStore.timezones'
|
||||
option-value='value'
|
||||
option-label='text'
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
options-dense
|
||||
:aria-label='$t(`admin.general.defaultTimezone`)'
|
||||
:aria-label='t(`admin.general.defaultTimezone`)'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='calendar')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.dateFormat`)}}
|
||||
q-item-label(caption) {{$t(`profile.dateFormatHint`)}}
|
||||
q-item-label {{t(`profile.dateFormat`)}}
|
||||
q-item-label(caption) {{t(`profile.dateFormatHint`)}}
|
||||
q-item-section
|
||||
q-select(
|
||||
outlined
|
||||
v-model='config.dateFormat'
|
||||
v-model='state.config.dateFormat'
|
||||
emit-value
|
||||
map-options
|
||||
dense
|
||||
:aria-label='$t(`admin.general.defaultDateFormat`)'
|
||||
:options=`[
|
||||
{ label: $t('profile.localeDefault'), value: '' },
|
||||
{ label: 'DD/MM/YYYY', value: 'DD/MM/YYYY' },
|
||||
{ label: 'DD.MM.YYYY', value: 'DD.MM.YYYY' },
|
||||
{ label: 'MM/DD/YYYY', value: 'MM/DD/YYYY' },
|
||||
{ label: 'YYYY-MM-DD', value: 'YYYY-MM-DD' },
|
||||
{ label: 'YYYY/MM/DD', value: 'YYYY/MM/DD' }
|
||||
]`
|
||||
:aria-label='t(`admin.general.defaultDateFormat`)'
|
||||
:options='dateFormats'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item
|
||||
blueprint-icon(icon='clock')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.timeFormat`)}}
|
||||
q-item-label(caption) {{$t(`profile.timeFormatHint`)}}
|
||||
q-item-label {{t(`profile.timeFormat`)}}
|
||||
q-item-label(caption) {{t(`profile.timeFormatHint`)}}
|
||||
q-item-section.col-auto
|
||||
q-btn-toggle(
|
||||
v-model='config.timeFormat'
|
||||
v-model='state.config.timeFormat'
|
||||
push
|
||||
glossy
|
||||
no-caps
|
||||
toggle-color='primary'
|
||||
:options=`[
|
||||
{ label: $t('admin.general.defaultTimeFormat12h'), value: '12h' },
|
||||
{ label: $t('admin.general.defaultTimeFormat24h'), value: '24h' }
|
||||
]`
|
||||
:options='timeFormats'
|
||||
)
|
||||
q-separator.q-my-sm(inset)
|
||||
q-item(tag='label', v-ripple)
|
||||
blueprint-icon(icon='light-on')
|
||||
q-item-section
|
||||
q-item-label {{$t(`profile.darkMode`)}}
|
||||
q-item-label(caption) {{$t(`profile.darkModeHint`)}}
|
||||
q-item-label {{t(`profile.darkMode`)}}
|
||||
q-item-label(caption) {{t(`profile.darkModeHint`)}}
|
||||
q-item-section(avatar)
|
||||
q-toggle(
|
||||
v-model='config.darkMode'
|
||||
v-model='state.config.darkMode'
|
||||
color='primary'
|
||||
checked-icon='las la-check'
|
||||
unchecked-icon='las la-times'
|
||||
:aria-label='$t(`profile.darkMode`)'
|
||||
:aria-label='t(`profile.darkMode`)'
|
||||
)
|
||||
.actions-bar.q-mt-lg
|
||||
q-btn(
|
||||
icon='mdi-check'
|
||||
icon='las la-check'
|
||||
unelevated
|
||||
label='Save Changes'
|
||||
color='secondary'
|
||||
)
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
config: {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@company.com',
|
||||
location: '',
|
||||
jobTitle: '',
|
||||
pronouns: '',
|
||||
dateFormat: '',
|
||||
timeFormat: '12h',
|
||||
darkMode: false
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
timezones: get('data/timezones', false)
|
||||
},
|
||||
watch: {
|
||||
'config.darkMode' (newValue) {
|
||||
this.$q.dark.set(newValue)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
pageStyle (offset, height) {
|
||||
return {
|
||||
'min-height': `${height - 100 - offset}px`
|
||||
}
|
||||
}
|
||||
<script setup>
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useMeta, useQuasar } from 'quasar'
|
||||
import { onMounted, reactive, watch } from 'vue'
|
||||
|
||||
import { useSiteStore } from 'src/stores/site'
|
||||
import { useDataStore } from 'src/stores/data'
|
||||
|
||||
// QUASAR
|
||||
|
||||
const $q = useQuasar()
|
||||
|
||||
// STORES
|
||||
|
||||
const siteStore = useSiteStore()
|
||||
const dataStore = useDataStore()
|
||||
|
||||
// I18N
|
||||
|
||||
const { t } = useI18n()
|
||||
|
||||
// META
|
||||
|
||||
useMeta({
|
||||
title: t('profile.title')
|
||||
})
|
||||
|
||||
// DATA
|
||||
|
||||
const state = reactive({
|
||||
config: {
|
||||
name: 'John Doe',
|
||||
email: 'john.doe@company.com',
|
||||
location: '',
|
||||
jobTitle: '',
|
||||
pronouns: '',
|
||||
dateFormat: '',
|
||||
timeFormat: '12h',
|
||||
darkMode: false
|
||||
}
|
||||
})
|
||||
|
||||
const dateFormats = [
|
||||
{ value: '', label: t('profile.localeDefault') },
|
||||
{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
|
||||
{ value: 'DD.MM.YYYY', label: 'DD.MM.YYYY' },
|
||||
{ value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
|
||||
{ value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
|
||||
{ value: 'YYYY/MM/DD', label: 'YYYY/MM/DD' }
|
||||
]
|
||||
const timeFormats = [
|
||||
{ value: '12h', label: t('admin.general.defaultTimeFormat12h') },
|
||||
{ value: '24h', label: t('admin.general.defaultTimeFormat24h') }
|
||||
]
|
||||
|
||||
// METHODS
|
||||
|
||||
function pageStyle (offset, height) {
|
||||
return {
|
||||
'min-height': `${height - 100 - offset}px`
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
Reference in new issue