Maxime/Clyde
1
0
Fork 0
forked from PGL/Clyde
Code Pull Requests Activity

Merge remote-tracking branch 'origin/master'

Browse Source
This commit is contained in:
Bartha Maxime
2024-04-21 23:34:19 +02:00
parent 1a266cdfbd 32810a9b01
commit 4d007534b3
118 changed files with 8650 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/App.vue
View File

@ -3,6 +3,7 @@
import { ref } from 'vue'
import i18n, { setLang } from './i18n.js'
import { isLogged } from '@/rest/Users.js'
import { notifications, fetchNotifications, archiveNotification } from '@/rest/notifications.js'
import { appList, currentView } from '@/rest/apps.js'
var prevURL;
@ -14,17 +15,20 @@ window.onhashchange = function() {
}
const Logged = ref(isLogged());
if(Logged.value){
fetchNotifications();
}
window.addEventListener('hashchange', () => {
if((location.hash === "#/home" && prevURL === "#/login") || (location.hash === "#/home" && prevURL === "#/profil")){
window.location.reload();
}
});
const home=ref(i18n("app.home"))
const notifications=ref(i18n("app.notifications"))
const settings=ref(i18n("app.settings"))
const login=ref(i18n("app.login"))
const active=ref(false)
const notification = ref(false)
const apps = ref([])
appList().then(e => apps.value = e)
@ -33,7 +37,6 @@ window.addEventListener('hashchange', () => {
<template>
<div class="container">
<div class="topBar">
<ul class="horizontal">
<li title=home>
@ -46,14 +49,17 @@ window.addEventListener('hashchange', () => {
</a></li>
<li style="float: right;" title=login>
<a class="icon" href="#/login">
<div class="fa-solid fa-user" :style="Logged ? 'color: orange' : 'haha'" style="margin-top: 7px; margin-bottom: 3px; "></div>
<div class="fa-solid fa-user" :style="Logged ? 'color: red' : ''" style="margin-top: 7px; margin-bottom: 3px; "></div>
</a></li>
<li style="float: right;" title=notifications>
<a class="icon" href="#Notifications">
<div class="fa-solid fa-bell" style="margin-top: 7px; margin-bottom: 3px;"></div>
<li style="float: right;" title=notifications @click="notification = !notification">
<a class="icon">
<div class="fa-solid fa-bell" :style="notifications.length != 0 ? 'color:orange': '' " style="margin-top: 7px; margin-bottom: 3px;"></div>
<ul v-if=notification id="notification">
<li v-for="notif in notifications" @click="archiveNotification(notif.id)"> {{ i18n(notif.subject) }} - {{ notif.body }}</li>
</ul>
</a></li>
<li @click="active=!active" class="option"style="float: right;" title=settings>
<a class="icon" >
<a class="icon">
<div class="fa-solid fa-gear" style="margin-top: 7px; margin-bottom: 3px;"></div>
<div v-if="active" class="dropdown">
<div class="dropdown-content">{{i18n("app.language")}}</div>
@ -69,7 +75,6 @@ window.addEventListener('hashchange', () => {
{{i18n("app.manage.profile")}}
</a>
</div>
</div>
</a></li>
</ul>
@ -99,20 +104,19 @@ window.addEventListener('hashchange', () => {
height: 100%;
width: 100%;
display:grid;
grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start]auto[endCol];
grid-template-rows:[firstRow-start]61px[firstRow-end secondRow-start] auto [endRow];
grid-template-columns:[firstCol-start]70px[firstCol-end secondCol-start] auto [endCol];
grid-template-rows:[firstRow-start] var(--header-size) [firstRow-end secondRow-start] calc(100% - var(--header-size)) [endRow];
grid-template-areas:
"topBar topBar"
"leftBar page";
row-gap:0px;
column-gap:0px;
}
.page {
grid-area:page;
height: 100%;
width: 100%;
place-self:center;
}
.topBar{
@ -155,7 +159,7 @@ window.addEventListener('hashchange', () => {
ul.vertical{
list-style-type: none;
margin-top: 61px;
margin-top: var(--header-size);
top:0;
left:0;
padding: 25px 0 0;
@ -203,7 +207,7 @@ window.addEventListener('hashchange', () => {
left:0;
position: fixed;
height:61px;
height:var(--header-size);
width: 100%;
background-color: rgb(24, 24, 24);
}
@ -219,8 +223,6 @@ window.addEventListener('hashchange', () => {
background-color: black;
border-radius:6px;
color:white;
transform: translate(0px ,1px);
}
ul.vertical:hover {
@ -235,6 +237,7 @@ window.addEventListener('hashchange', () => {
.text {
right: 0%;
width: 0%;
visibility: collapse;
opacity: 0;
color: white;
font-size: 1.2em;
@ -243,7 +246,8 @@ window.addEventListener('hashchange', () => {
}
ul.vertical:hover .text {
opacity: 1;
opacity:1;
visibility:visible;
width: 60%;
transition-duration: .3s;
padding-left: 15px;
@ -252,6 +256,32 @@ window.addEventListener('hashchange', () => {
.clyde:hover{
content: url("./assets/angry_clyde.png")
}
#notification{
position: absolute;
top: 61px;
right: 0;
background-color: white;
width: 300px;
height: 600px;
border-radius: 10px;
margin: 10px;
}
#notification > li{
color: black;
list-style: none;
font-size: 0.4em;
display: block;
background-color: #00FF00A0;
margin: 1px;
border-radius: 42px;
padding: 10px;
}
#notification > li:hover{
background-color: #00FF0000
}
</style>