NervTN/nervtn-web
NervTN/nervtn-web
8
0
Fork 0
Code Issues 5 Pull requests Releases Activity

ModificationMenu

Browse source
This commit is contained in:
Pauline MAROT 2022-01-03 17:18:58 +01:00
parent a5d5526ce0
commit 5bf4a328d0
Signed by untrusted user: linepau
GPG key ID: 0F0ED996BFD1E3D9
15 changed files with 189 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/NervTN.vue
View file

@ -1,17 +1,12 @@
<script setup>
import ReloadPWA from './components/ReloadPWA.vue';
import NavMessage from './components/message/NavMessage.vue';
import NavContact from './components/message/NavContact.vue';
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<script>
export default{
components: {NavMessage}
}
</script>
<template>
<div id="appflex">
<div id="page">
@ -25,10 +20,15 @@ export default{
</div>
<div id="sidebar" class="sidebar">
<router-view name="Sidebar"></router-view>
<div id="menu">
<NavMessage/>
<router-view name="navMessage"></router-view>
</div>
<NavContact/>
<router-view name="navContact"></router-view>
</div>
</div>
</div>
<header class="navbar">
@ -36,6 +36,14 @@ export default{
<img id="main-logo" alt="" src="./assets/logo.svg"/>
<span id="site-name">{{ t('home.apps') }}</span>
</router-link>
<div class="menu">
<div class="navMessage">
<router-link to="/navMessage">💬 ✉️ {{ t('home.messages') }}</router-link>
</div>
<div class="navContact">
<router-link to="/navContact">👤 {{ t('home.contact') }}</router-link>
</div>
<div class="nav-menu">
<details>
@ -46,9 +54,10 @@ export default{
<li><router-link to="/">{{ t('home.account') }}</router-link></li>
<li><router-link to="/">{{ t('home.dashboard') }}</router-link></li>
<li><router-link to="/">{{ t('home.disconnect') }}</router-link></li>
</ul>
</ul>
</details>
</div>
</div>
</div>
<div class="links">
<router-view name="Links"></router-view>
@ -58,7 +67,8 @@ export default{
<option value="fr">Français</option>
<option value="nl">Nederlands</option>
</select>
</div>
</div>
</header>
<footer class="footer">
</footer>

51
src/assets/css/sidebar.less
View file

@ -24,39 +24,48 @@
}
#menu {
font-size: 1.1rem;
margin: 0.5rem;
padding: 1rem;
padding: 10px;
}
.menu {
display: inline-block;
margin-left: auto;
}
.navMessage{
vertical-align: top;
float: left;
padding: 10px;
max-height: 2em;
summary {
padding: 10px;
}
}
li {
list-style: none;
}
.navContact{
vertical-align: top;
float: left;
padding: 10px;
max-height: 2em;
}
.nav-menu{
margin-left: auto;
padding-right: 10px;
cursor: pointer;
}
vertical-align: top;
float: left;
padding: 10px;
max-height: 2em;
details{
padding: 0 .5em;
background: #282828;
border-radius: .5em;
color: #a0bede;
.connect {
padding: 0.5rem;
ul {
li {
padding: 0;
margin: 0;
list-style-type: none;
list-style: none;
}
}
}
.nav-connect {
list-style: none;
}
.nav-links {
display: inline-block;

11
src/components/contact/ContactsList.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<h1>Contacts List</h1>
</template>
<script>
</script>

18
src/components/contact/contact-routes.js
View file

@ -1,3 +1,19 @@
/* jshint -W097 */ // don't warn about "use strict"
"use strict";
/*Ne fonctionne pas */
const router = new VueRouter({
routes: [
{ path: '/navContact', component:NavContact ,
children: [
{
path: '/profile',
component: Profile
},
{
path: '/contactsList',
component: ContactsList
}
]
}
]
})

10
src/components/contact/contact-state.js
View file

@ -1,3 +1,13 @@
/* jshint -W097 */ // don't warn about "use strict"
"use strict";
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
export default store;

10
src/components/message/Message.vue → src/components/message/Chat.vue
View file

@ -2,17 +2,13 @@
<template>
<h1>Chat</h1>
<div
:class='["message", { dark }]'>
<div :class='["message", { dark }]'>
<h5>{{ user }}</h5>
{{ text }}
</div>
<ChatBox
class='chat-box'
@submit='onSubmit'
/>
<ChatBox class='chat-box' @submit='onSubmit'/>
</template>
@ -46,4 +42,4 @@ export default {
h5 {
margin: 0 0 .5rem 0;
}
</style>
</style>

29
src/components/message/NavContact.vue Normal file
View file

@ -0,0 +1,29 @@
<script setup>
import {useI18n} from 'vue-i18n';
const {t} = useI18n({useScope: 'local'});
</script>
<template>
<ul>
<li><router-link to="/navContact/profile">📝 {{ t('menu.profile') }}</router-link></li>
<li><router-link to="/navContact/contactsList">🗒️ {{ t('menu.contacts list') }}</router-link></li>
</ul>
</template>
<style scoped>
li {
list-style-type: none;
}
details {
padding-bottom: 5px;
}
</style>
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

30
src/components/message/NavMessage.vue
View file

@ -5,28 +5,14 @@ const {t} = useI18n({useScope: 'local'});
</script>
<template>
<details>
<summary>
<span>👤 {{ t('menu.contact') }}</span>
</summary>
<ul>
<li><router-link to="/profil">📝 {{ t('menu.profile') }}</router-link></li>
<li><router-link to="">🗒️ {{ t('menu.contacts list') }}</router-link></li>
</ul>
</details>
<details>
<summary>
<span>💬 ✉️ {{ t('menu.messages') }}</span>
</summary>
<ul>
<li><router-link to="/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
<li><router-link to="/chat">💬 {{ t('menu.chat') }}</router-link></li>
<li><router-link to="">🎥 {{ t('menu.video conferencing') }}</router-link></li>
</ul>
</details>
<ul>
<li><router-link to="/navMessage/correspondance">📭 {{ t('menu.correspondence') }}</router-link></li>
<li><router-link to="/navMessage/chat">💬 {{ t('menu.chat') }}</router-link></li>
<li><router-link to="/navMessage/videoConferencing">🎥 {{ t('menu.video conferencing') }}</router-link></li>
</ul>
</template>
<style scoped>
@ -40,4 +26,4 @@ const {t} = useI18n({useScope: 'local'});
<i18n lang="json" locale="en" src="./locale/en.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>
<i18n lang="json" locale="fr" src="./locale/fr.json"/>

6
src/components/message/locale/en.json
View file

@ -1,9 +1,7 @@
{
"menu": {
"contact": "Contact",
"profile": "Profil",
"profile": "Profile",
"contacts list": "contacts list",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Video conferencing"
@ -14,4 +12,4 @@
}
}
}

6
src/components/message/locale/fr.json
View file

@ -1,9 +1,7 @@
{
"menu": {
"contact": "Contact",
"profile ": "Profil",
"contacts list": "Liste des contacts",
"messages": "Messages",
"correspondence": "Correspondence",
"chat": "Chat",
"video conferencing": "Visioconférence"
@ -11,8 +9,8 @@
"pwa": {
"send": "Envoyer"
}
}
}

1
src/components/message/message-routes.js
View file

@ -1,3 +1,2 @@
/* jshint -W097 */ // don't warn about "use strict"
"use strict";

10
src/components/message/message-state.js
View file

@ -1,3 +1,13 @@
/* jshint -W097 */ // don't warn about "use strict"
"use strict";
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});
export default store;

4
src/locale/en.json
View file

@ -13,7 +13,9 @@
"connection": "Connection",
"account":"Account",
"dashboard": "Dashboard",
"disconnect": "Disconnect"
"disconnect": "Disconnect",
"messages": "Messages",
"contact": "Contact"
},
"pwa": {
"ready": "Your applications are ready for offline.",

6
src/locale/fr.json
View file

@ -13,7 +13,9 @@
"connection": "Connexion",
"account":"Compte",
"dashboard": "Tableau de bord",
"disconnect": "Déconnexion"
"disconnect": "Déconnexion",
"contact": "Contact",
"messages": "Messages"
},
"pwa": {
"ready": "Vous êtes prêts pour le mode hors-ligne.",
@ -22,5 +24,5 @@
"reload": "Recharger"
}
}

47
src/nervtn-routes.js
View file

@ -5,9 +5,12 @@ import * as VueRouter from 'vue-router';
const Apps = () => import('./components/NervTNApps.vue');
const Dashboard = () => import('./components/Dashboard.vue');
const Chat = () => import('./components/message/Message.vue');
const NavMessage = () => import('./components/message/NavMessage.vue');
const Chat = () => import('./components/message/Chat.vue');
const Correspondance = () => import('./components/message/Correspondance.vue');
const Profil = () =>import('./components/contact/Profile.vue');
const NavContact = () => import('./components/message/NavContact.vue');
const Profile = () => import('./components/contact/Profile.vue');
const ContactsList = () => import('./components/contact/ContactsList.vue');
const routes = [
@ -32,7 +35,17 @@ const routes = [
}
},
{
path: '/chat',
path: '/navMessage',
name: "NavMessage",
components: {
default: NavMessage,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/navMessage/chat',
name: "Chat",
components: {
default: Chat,
@ -42,7 +55,7 @@ const routes = [
}
},
{
path: '/correspondance',
path: '/navMessage/correspondance',
name: "Correspondance",
components: {
default: Correspondance,
@ -52,10 +65,30 @@ const routes = [
}
},
{
path: '/profil',
name: "Profil",
path: '/navContact',
name: "NavContact",
components: {
default: Profil,
default: NavContact,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/navContact/profile',
name: "Profile",
components: {
default: Profile,
//Links: {},
//Sidebar: {},
//ActionBar: {}
}
},
{
path: '/navContact/contactsList',
name: "ContactsList",
components: {
default: ContactsList,
//Links: {},
//Sidebar: {},
//ActionBar: {}