Skip to content
Snippets Groups Projects
Commit 91fd2bf9 authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

UI menu avatar

parent 1b0455bb
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/app/AppA11y.vue 0 → 100644
+ 46
− 0
View file @ 91fd2bf9
<template>
<div class="flex items-center text-gray-400">
<div class="flex items-end">
<fa
icon="font"
class="text-xs hover:text-hover cursor-pointer"
@click="onChangeSize(documentFontSize - 0.1)"
/>
<fa
icon="font"
class="text-sm px-1 hover:text-hover cursor-pointer"
@click="onChangeSize(1)"
/>
<fa
icon="font"
class="text-base hover:text-hover cursor-pointer"
@click="onChangeSize(documentFontSize + 0.1)"
/>
</div>
<div class="hover:text-hover mx-3 cursor-pointer" @click="onA11y">
<fa icon="wheelchair" />
</div>
</div>
</template>
<script>
export default {
data() {
return {
documentFontSize: 1,
}
},
methods: {
onChangeSize(size) {
this.documentFontSize = size < 0.8 ? 0.8 : size > 1.2 ? 1.2 : size
document.documentElement.style.fontSize = this.documentFontSize + 'em'
},
onA11y() {
console.log('a11y')
},
},
}
</script>
<style lang="scss" scoped></style>
components/layout/LayoutHeader.vue
+ 0
− 2
View file @ 91fd2bf9
...@@ -9,8 +9,6 @@ ...@@ -9,8 +9,6 @@
<div class="flex justify-end items-center relative"> <div class="flex justify-end items-center relative">
<LayoutHeaderMenu /> <LayoutHeaderMenu />
<AppDarkMode class="ml-2 mr-4" />
<LayoutHeaderMenuAvatar /> <LayoutHeaderMenuAvatar />
</div> </div>
</nav> </nav>
......
components/layout/LayoutHeaderMenu.vue
+ 5
− 2
View file @ 91fd2bf9
<template> <template>
<div class="flex"> <div class="flex mr-3">
<template v-for="(item, index) of menu"> <template v-for="(item, index) of menu">
<nuxt-link <nuxt-link
v-if="item.url.startsWith('/')" v-if="item.url.startsWith('/')"
...@@ -26,7 +26,10 @@ ...@@ -26,7 +26,10 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
Forum Forum
<fa icon="external-link-alt" class="w-3 ml-1 text-gray-500" /> <fa
icon="external-link-alt"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/>
</a> </a>
<LayoutHeaderMenuForum /> <LayoutHeaderMenuForum />
</t-dropdown> </t-dropdown>
......
components/layout/LayoutHeaderMenuAvatar.vue
+ 147
− 91
View file @ 91fd2bf9
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
:show.sync="show" :show.sync="show"
:classes="{ :classes="{
dropdown: dropdown:
'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 border-gray-100 border transform translate-y-1', 'absolute right-0 rounded-md shadow-lg bg-white dark:bg-gray-600 border-gray-100 dark:border-gray-500 border transform translate-y-1',
}" }"
> >
<div <div
...@@ -17,11 +17,13 @@ ...@@ -17,11 +17,13 @@
keydownHandler, keydownHandler,
isShown, isShown,
}" }"
class="inline-flex items-center relative px-2 dark:border-gray-500 border-2 rounded-full hover:shadow-lg focus:outline-none focus:ring-2 transition-shadow"
:class="{ 'shadow-lg': isShown }"
> >
<AppDarkMode />
<button <button
type="button" type="button"
class="inline-flex items-center relative px-2 dark:border-gray-500 border-2 rounded-full hover:shadow-lg focus:outline-none focus:ring-2 transition-shadow"
:class="{ 'shadow-lg': isShown }"
aria-label="User menu" aria-label="User menu"
aria-haspopup="true" aria-haspopup="true"
@mousedown="mousedownHandler" @mousedown="mousedownHandler"
...@@ -29,8 +31,6 @@ ...@@ -29,8 +31,6 @@
@blur="blurHandler" @blur="blurHandler"
@keydown="keydownHandler" @keydown="keydownHandler"
> >
<fa icon="bars" class="ml-2 text-gray-500" />
<div class="flex items-center h-10 w-10 pl-3"> <div class="flex items-center h-10 w-10 pl-3">
<img v-if="user" :src="user.avatar_url" class="rounded-full" /> <img v-if="user" :src="user.avatar_url" class="rounded-full" />
<fa v-else icon="user-circle" class="text-3xl" /> <fa v-else icon="user-circle" class="text-3xl" />
...@@ -38,36 +38,19 @@ ...@@ -38,36 +38,19 @@
</button> </button>
</div> </div>
<div v-if="user" class="pb-1" style="min-width: 15rem"> <div class="my-1" style="min-width: 15rem">
<div class="p-3 border-b mb-1"> <template v-if="user">
<div>{{ user.name }}</div> <div class="px-3 py-2">
<div class="text-sm text-gray-600 dark:text-gray-400"> <div>{{ user.name }}</div>
@{{ user.username }} <div class="text-sm text-gray-600 dark:text-gray-400">
@{{ user.username }}
</div>
</div> </div>
</div>
<a <hr class="border-t dark:border-gray-500 my-1" />
class="block hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full flex items-center"
href="/admin/#/" <a class="menu-item" href="/admin/#/" target="_blank"
target="_blank" ><svg
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
class="fill-current text-gray-400 mr-1"
>
<path
d="m13.366 3 5.625 5.493L19 19.169C19 20.176 18.156 21 17.125 21H5.865C4.836 21 4 20.176 4 19.17V4.83C4 3.825 4.834 3 5.866 3h7.5zM6.94 12.11a.94.94 0 1 0 0 1.88h9.12a.94.94 0 0 0 0-1.88H6.94zm0 3.89a.94.94 0 1 0 0 1.88h9.12a.94.94 0 1 0 0-1.88H6.94zm5.073-6h5.139l-5.14-5.053V10z"
></path></svg
>Contenus
</a>
<a
class="block hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full flex items-center justify-between"
href="/admin/#/workflow"
target="_blank"
>
<div class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="24" width="24"
height="24" height="24"
...@@ -75,74 +58,130 @@ ...@@ -75,74 +58,130 @@
class="fill-current text-gray-400 mr-1" class="fill-current text-gray-400 mr-1"
> >
<path <path
d="M10 4h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm7 0h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM3 4h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z" d="m13.366 3 5.625 5.493L19 19.169C19 20.176 18.156 21 17.125 21H5.865C4.836 21 4 20.176 4 19.17V4.83C4 3.825 4.834 3 5.866 3h7.5zM6.94 12.11a.94.94 0 1 0 0 1.88h9.12a.94.94 0 0 0 0-1.88H6.94zm0 3.89a.94.94 0 1 0 0 1.88h9.12a.94.94 0 1 0 0-1.88H6.94zm5.073-6h5.139l-5.14-5.053V10z"
></path></svg ></path></svg
>Flux >Contenus
</div> </a>
<div v-if="git"> <a
<span class="menu-item justify-between"
class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded" href="/admin/#/workflow"
v-text="git.draft.count" target="_blank"
/> >
<span <div class="flex items-center">
class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded" <svg
v-text="git.pending_review.count" xmlns="http://www.w3.org/2000/svg"
/> width="24"
<span height="24"
class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded" viewBox="0 0 24 24"
v-text="git.pending_publish.count" class="fill-current text-gray-400 mr-1.5"
/> >
</div> <path
</a> d="M10 4h3a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm7 0h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zM3 4h3a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z"
></path></svg
>Flux
</div>
<div v-if="git">
<span
class="bg-purple-200 text-purple-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.draft.count"
/>
<span
class="bg-yellow-200 text-yellow-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.pending_review.count"
/>
<span
class="bg-green-200 text-green-800 font-medium py-0.5 px-1 text-sm rounded"
v-text="git.pending_publish.count"
/>
</div>
</a>
<div class="border-t my-1" /> <hr class="border-t dark:border-gray-500 my-1" />
<a
class="block hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full flex items-center justify-between"
href="https://git.duniter.org/websites/monnaie-libre-fr"
target="_blank"
>
<div>Dépôt gitlab</div>
<span v-if="isLoading" class="loading-state h-6 w-6 border-gray-500" />
</a>
<template v-if="git">
<div class="flex text-xs">
<a
class="block hover:bg-hover-light hover:text-gray-600 px-3 py-1 text-gray-600 dark:text-gray-200 w-full whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/issues"
target="_blank"
v-text="`${git.issueStatusCounts.opened} tickets`"
/>
<a
class="block hover:bg-hover-light hover:text-gray-600 px-3 py-1 text-gray-600 dark:text-gray-200 w-full whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests"
target="_blank"
v-text="`${git.mergeRequests.count} demandes de fusion`"
/>
</div>
<a <a
class="block hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full flex items-center justify-between" class="menu-item justify-between"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/issues?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`" href="https://git.duniter.org/websites/monnaie-libre-fr"
target="_blank" target="_blank"
> >
<div>Mes tickets</div> <div>Dépôt gitlab</div>
<div <span
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full" v-if="isLoading === true"
v-text="git.my_issues.count" class="loading-state h-6 w-6 border-gray-500"
/>
<fa
v-if="isLoading === 'error'"
icon="exclamation-triangle"
class="w-3 ml-1.5 text-gray-500 opacity-75"
/> />
</a> </a>
<template v-if="git">
<div class="flex text-xs">
<a
class="menu-item whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/issues"
target="_blank"
v-text="`${git.issueStatusCounts.opened} tickets`"
/>
<a
class="menu-item whitespace-nowrap"
href="https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests"
target="_blank"
v-text="`${git.mergeRequests.count} demandes de fusion`"
/>
</div>
<a
class="menu-item justify-between"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/issues?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`"
target="_blank"
>
<div>Mes tickets</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
v-text="git.my_issues.count"
/>
</a>
<a
class="menu-item justify-between"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`"
target="_blank"
>
<div>Mes demandes de fusion</div>
<div
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full"
v-text="git.my_merge_requests.count"
/>
</a>
</template>
</template>
<template v-else>
<a <a
class="block hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full flex items-center justify-between" href="/admin/#/"
:href="`https://git.duniter.org/websites/monnaie-libre-fr/-/merge_requests?scope=all&utf8=%E2%9C%93&state=opened&author_username=${user.username}`"
target="_blank" target="_blank"
class="menu-item group"
@click="fetchLocalStorageChange"
> >
<div>Mes demandes de fusion</div> <span>Se connecter</span>
<div <fa
class="bg-gray-200 text-gray-800 font-medium w-5 h-5 text-center text-sm rounded-full" icon="external-link-alt"
v-text="git.my_merge_requests.count" class="w-3 ml-1.5 text-gray-500 opacity-75"
/> />
</a> </a>
<nuxt-link to="/contribuer" class="menu-item">
<span>Contribuer</span>
</nuxt-link>
</template> </template>
<hr class="border-t dark:border-gray-500 my-1" />
<div class="flex">
<nuxt-link to="/aide" class="menu-item">
<fa icon="info-circle" class="text-gray-400 mr-2" />
<span>Aide</span>
</nuxt-link>
<AppA11y class="ml-2" />
</div>
</div> </div>
</t-dropdown> </t-dropdown>
</template> </template>
...@@ -169,11 +208,20 @@ export default { ...@@ -169,11 +208,20 @@ export default {
}, },
}, },
mounted() { mounted() {
if (localStorage.getItem('netlify-cms-user')) { this.fetchCmsUser()
this.user = JSON.parse(localStorage.getItem('netlify-cms-user'))
}
}, },
methods: { methods: {
fetchCmsUser() {
if (localStorage.getItem('netlify-cms-user')) {
this.user = JSON.parse(localStorage.getItem('netlify-cms-user'))
}
},
// if User click on "Connect" link, wait for authentification
fetchLocalStorageChange() {
setInterval(() => {
this.fetchCmsUser()
}, 1000)
},
fetchGitlab() { fetchGitlab() {
this.isLoading = true this.isLoading = true
this.$axios this.$axios
...@@ -215,7 +263,15 @@ export default { ...@@ -215,7 +263,15 @@ export default {
this.lastFetch = Date.now() this.lastFetch = Date.now()
this.isLoading = false this.isLoading = false
}) })
.catch(() => {
this.isLoading = 'error'
})
}, },
}, },
} }
</script> </script>
<style lang="postcss" scoped>
.menu-item {
@apply flex items-center hover:bg-hover-light hover:text-gray-700 px-3 py-1 text-gray-600 dark:text-gray-200 w-full;
}
</style>
nuxt.config.js
+ 2
− 0
View file @ 91fd2bf9
...@@ -87,6 +87,8 @@ export default { ...@@ -87,6 +87,8 @@ export default {
'faAngry', 'faAngry',
'faCompressArrowsAlt', 'faCompressArrowsAlt',
'faExpandArrowsAlt', 'faExpandArrowsAlt',
'faFont',
'faWheelchair',
], ],
brands: [ brands: [
'faCreativeCommonsNcEu', 'faCreativeCommonsNcEu',
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment