Skip to content

GitLab

Commit 596d28ba authored by Mahëd Benzerga's avatar Mahëd Benzerga
Browse files

Modifications UI suite incident OVH

parent ffb0a944
Hide whitespace changes
Inline Side-by-side
assets/styles/_settings.scss
View file @ 596d28ba
......@@ -66,6 +66,7 @@ $success: $green;
$success-text: $white;
$success-invert: findColorInvert($success);
$danger-text: $white;
$white: #FFFFFF;
$grey-light: #E5E5E5;
......
components/TwitterTimeline.vue 0 → 100644
View file @ 596d28ba
<template>
<div class="twitter">
<a
class="twitter-timeline"
data-lang="fr"
:data-height="height"
:data-width="width"
data-theme="light"
:href="href"
>Tweets by appsedufr</a
>
<script
async
src="https://platform.twitter.com/widgets.js"
charset="utf-8"
></script>
</div>
</template>
<script>
export default {
props: {
height: {
type: [String, Number],
default: null
},
width: {
type: [String, Number],
default: null
},
href: {
type: String,
default: "https://twitter.com/appsedufr?ref_src=twsrc%5Etfw"
}
}
}
</script>
\ No newline at end of file
components/applications/Application.vue
View file @ 596d28ba
......@@ -10,6 +10,13 @@
<h1 class="is-title is-neutral is-main is-mb-0">
{{ application.title }}
</h1>
<!-- Application disponible ou non -->
<p v-if="application.isDisabled" class="is-text is-mini-text has-text-danger">
{{ $t('common.unavailable') }}
</p>
<p v-else class="is-text is-mini-text has-text-success">
{{ $t('common.available') }}
</p>
<p class="is-text has-text-primary">
{{ application.subtitle }}
</p>
......@@ -20,8 +27,10 @@
<div class="action-container">
<platform-btn/>
</div>
</diV>
</div>
</div>
<p v-if="isDisabledMessage" class="is-disabled-notice has-text-danger" v-html="isDisabledMessage">
</p>
<!-- Textes sur l'application -->
<div class="applications-texts" v-if="application.texts">
<div :class="['text-container', !text.title ? 'no-title' : null]" v-for="(text, index) in application.texts" :key="index">
......@@ -55,6 +64,12 @@ export default {
type: Object,
default: null
}
},
computed: {
isDisabledMessage() {
if (!this.application.isDisabled) return "";
return `<b>${this.$t('incidentOvh.appErrorMessage')} ${this.$t("incidentOvh.errorMessageLink")}</b>`;
}
}
}
</script>
......@@ -66,6 +81,15 @@ export default {
<style lang="scss" scoped>
.application {
/* Textes et Descriptions */
.is-disabled-notice {
margin-bottom: 1rem;
}
.is-mini-text {
font-size: 0.875rem;
}
.text-title {
@include text;
font-weight: 600;
......
components/applications/ApplicationItem.vue
View file @ 596d28ba
......@@ -2,10 +2,19 @@
<card role="button" tabindex="0" v-if="application" class="item" @click.native="goToApplication(application)" :key="application.id">
<div class="container">
<div class="content">
<icon aria-hidden="true" :icon="application.icon" size="is-large" card/>
<icon aria-hidden="true" :icon="application.icon" size="is-large" card :type="application.isDisabled ? 'is-danger' : null" />
<div class="item-titles">
<h3 class="item-title">{{ application.title }}</h3>
<p class="is-text has-text-primary">{{ application.subtitle }} </p>
<h3 :class="['item-title', application.isDisabled ? 'has-text-danger' : null]">{{ application.title }}</h3>
<!-- Application disponible ou non -->
<template v-if="showAvailable">
<p v-if="application.isDisabled" class="is-text is-mini-text has-text-danger">
{{ $t('common.unavailable') }}
</p>
<p v-else class="is-text is-mini-text has-text-success">
{{ $t('common.available') }}
</p>
</template>
<p class="is-text has-text-primary">{{ application.subtitle }} </p>
</div>
</div>
</div>
......@@ -21,18 +30,26 @@ export default {
application: {
type: Object,
default: null
},
showAvailable: {
type: Boolean,
default: true
}
},
methods: {
async goToApplication(application) {
await this.$router.push({name: 'applications-id', params: {id: application.id}});
if (application.url) {
window.location.href = application.url;
} else {
await this.$router.push({name: 'applications-id', params: {id: application.id}});
}
}
}
}
</script>
<style lang="scss" scoped>
.item {
cursor: pointer;
display: flex;
justify-content: space-between;
......@@ -61,6 +78,11 @@ export default {
&:hover::after {
opacity: 1;
}
.is-mini-text {
font-size: 0.875rem;
}
.content {
display: flex;
align-items: center;
......
components/applications/ApplicationsList.vue
View file @ 596d28ba
<template>
<div class="applications-list">
<h2 class="applications-list-title is-large">
{{ $t('applications.listTitle') }}
{{ title }}
</h2>
<div class="columns is-multiline">
<div class="application column is-half-tablet is-one-third-fullhd" v-for="(application, index) in applications" :key="index">
<application-item :application="application"/>
<application-item :application="application" :show-available="showAvailable" />
</div>
</div>
</div>
......@@ -14,11 +14,21 @@
import ApplicationItem from './ApplicationItem';
export default {
props: {
title: {
type: String,
default() {
return this.$t('applications.listTitle');
}
},
applications: {
type: Array,
default() {
return []
}
},
showAvailable: {
type: Boolean,
default: true
}
},
components: {
......
components/base/Icon.vue
View file @ 596d28ba
......@@ -4,7 +4,7 @@
v-if="icon"
:is="card ? 'Card': 'span'"
>
<span :class="['app-icon']" v-if="appIcon" v-html="appIcon"></span>
<span :class="['app-icon', type === 'is-danger' ? type : null]" v-if="appIcon" v-html="appIcon"></span>
<b-icon v-else :type="type" :icon="icon" :custom-size="computedSize"></b-icon>
</component>
</template>
......@@ -57,7 +57,12 @@ export default {
},
computed: {
appIcon() {
return appIcons[this.icon] ? appIcons[this.icon] : false;
let appIcon = appIcons[this.icon] ? appIcons[this.icon] : false;
if (!appIcon) return false;
if (this.type === "is-danger") {
appIcon = appIcon.replace('fill="#011CAA"','fill="#ff3860"');
}
return appIcon;
},
computedSize() {
if (this.size === "is-medium") {
......@@ -99,6 +104,11 @@ export default {
display: block;
height: 36px;
}
.app-icon.is-danger svg path {
fill: $danger !important;
}
.is-app {
height: 36px;
width: 36px;
......
components/base/Message.vue
View file @ 596d28ba
......@@ -41,6 +41,14 @@ export default {
color: $success-text;
}
}
&.is-danger,
&.is-error {
background-color: $danger;
.message-body {
color: $danger-text;
}
}
&.no-border .message-body {
border: 0;
}
......
components/platform/PlatformAccess.vue
View file @ 596d28ba
......@@ -22,7 +22,7 @@
item-text="name"
>
</autocomplete>
<template v-if="selectedAcademie">
<template v-if="goToExternalPlatform && selectedAcademie">
<a class="selected-academie-link" :href="selectedAcademie.url"> {{ selectedAcademie.url }}</a>
<btn @click="goToPlatform">
{{ $t('platform.accessSelected') }}
......@@ -40,6 +40,10 @@ export default {
default() {
return []
}
},
goToExternalPlatform: {
type: Boolean,
default: true
}
},
data() {
......@@ -70,8 +74,12 @@ export default {
}
},
methods: {
selectAcademie(academie) {
return this.selectedAcademie = academie
async selectAcademie(academie) {
this.selectedAcademie = academie;
if (!this.goToExternalPlatform) {
await this.$router.push({name: "plateforme-id", params: {id: academie.id}});
this.isShown = false;
}
},
goToPlatform() {
if (!this.selectedAcademie || !this.selectedAcademie.url) return false;
......
data/applications.js
View file @ 596d28ba
......@@ -2,6 +2,7 @@ export default [
{
"id": "webconference",
"title": "Webconférence",
"isDisabled": true,
"subtitle": "Échanger en petit groupe",
"icon": "webconference",
"description": "Service de visio conférence via navigateur web.",
......@@ -26,6 +27,44 @@ export default [
"subtitle": "Vidéos",
"description": "Publication et partage de vidéos",
"icon": "peertube",
"urls": {
"corse": "https://tube-corse.beta.education.fr",
"nice": "https://tube-nice.beta.education.fr",
"grenoble": "https://tube-grenoble.beta.education.fr",
"clermont-ferrand": "https://tube-clermont-ferrand.beta.education.fr",
"bordeaux": "https://tube-bordeaux.beta.education.fr",
"amiens": "https://tube-amiens.beta.education.fr",
"nantes": "https://tube-nantes.beta.education.fr",
"poitiers": "https://tube-poitiers.beta.education.fr",
"montpellier": "https://tube-montpellier.beta.education.fr",
"limoges": "https://tube-limoges.beta.education.fr",
"lille": "https://tube-lille.beta.education.fr",
"orleans-tours": "https://tube-orleans-tours.beta.education.fr",
"dijon": "https://tube-dijon.beta.education.fr",
"besancon": "https://tube-besancon.beta.education.fr",
"aix-marseille": "https://tube-aix-marseille.beta.education.fr",
"normandie": "https://tube-normandie.beta.education.fr",
"lyon": "https://tube.ac-lyon.fr",
"nancy": "https://tube-nancy.beta.education.fr",
"reims": "https://tube-reims.beta.education.fr",
"strasbourg": "https://tube-strasbourg.beta.education.fr",
"guadeloupe": "https://tube-outremer.beta.education.fr",
"guyane": "https://tube-outremer.beta.education.fr",
"outre-mer": "https://tube-outremer.beta.education.fr",
"mayotte": "https://tube-outremer.beta.education.fr",
"martinique": "https://tube-outremer.beta.education.fr",
"noumea": "https://tube-outremer.beta.education.fr",
"polynesie": "https://tube-outremer.beta.education.fr",
"reunion": "https://tube-outremer.beta.education.fr",
"saint-pierre-et-miquelon": "https://tube-outremer.beta.education.fr",
"wallis-et-futuna": "https://tube-outremer.beta.education.fr",
"versailles": "https://tube-versailles.beta.education.fr",
"toulouse": "https://tube-toulouse.beta.education.fr",
"rennes": "https://tube-rennes.beta.education.fr",
"paris": "https://tube-paris.beta.education.fr",
"lyon": "https://tube-lyon.beta.education.fr",
"creteil": "https://tube-creteil.beta.education.fr",
},
"texts":[
{"title":"Partagez vos vidéos avec Peertube","body":
`<p>PeerTube est un service mis à disposition par le Ministère de l'Education Nationale et de la Jeunesse.</p>
......@@ -40,7 +79,8 @@ export default [
{
"id": "etherpad",
"title": "Etherpad",
"subtitle": "Rédaction à plusieurs mains",
"isDisabled": true,
"subtitle": "Rédaction à plusieurs",
"description": "Service de rédaction collaborative.",
"icon": "etherpad",
"texts":[
......@@ -76,6 +116,7 @@ export default [
{
"id": "nextcloud",
"title": "Nextcloud",
"isDisabled": true,
"subtitle": "Partage de documents",
"description": "Service d'hébergement, gestion et partage de fichiers.",
"icon": "nextcloud",
......@@ -98,6 +139,7 @@ export default [
{
"id": "blogs",
"title": "Blogs",
"isDisabled": true,
"subtitle": "Publication sur le web",
"description": "Service d'édition et de publication de blogs.",
"icon": "blogs",
......@@ -126,6 +168,7 @@ export default [
{
"id": "forum",
"title": "Discourse",
"isDisabled": true,
"subtitle": "Forums",
"description": "Forum de discussion",
"icon": "forum",
......
data/applicationsGeneral.js 0 → 100644
View file @ 596d28ba
export default [
{
"id": "visio-agents",
"title": "Visio agents",
"url": "https://visio-agents.education.fr/",
"category": "webconference",
"subtitle": "Webconférence agents",
"icon": "webconference",
},
{
"id": "visio-ecoles",
"title": "Visio écoles",
"url": "https://visio-ecoles.education.fr/",
"category": "webconference",
"subtitle": "Classes virtuelles écoles",
"icon": "webconference",
},
{
"id": "visio-lycees",
"title": "Visio lycées",
"url": "https://visio-lycees.education.fr/",
"category": "webconference",
"subtitle": "Classes virtuelles lycées",
"icon": "webconference",
},
{
"id": "visio-colleges",
"title": "Visio collèges",
"url": "https://visio-colleges.education.fr/",
"category": "webconference",
"subtitle": "Classes virtuelles collèges",
"icon": "webconference",
},
{
"id": "rendez-vous",
"title": "Rendez-vous",
"url": "https://rendez-vous.renater.fr/",
"category": "webconference",
"subtitle": "Réunions",
"icon": "webconference",
},
{
"id": "magistere",
"title": "Magistère",
"url": "https://magistere.education.fr/",
"category": "general",
"subtitle": "Formation continue",
"icon": "etherpad",
},
{
"id": "evento",
"title": "Evento",
"url": "https://evento.renater.fr/",
"category": "general",
"subtitle": "Planification d'événements",
"icon": "blogs",
},
{
"id": "tribu",
"title": "Tribu",
"url": "https://tribu.phm.education.gouv.fr/",
"category": "general",
"subtitle": "Espaces collaboratifs",
"icon": "blogs",
},
{
"id": "filesender",
"title": "Filesender",
"url": "https://filesender.renater.fr/",
"category": "general",
"subtitle": "Transfert de fichiers volumineux",
"icon": "nextcloud",
},
{
"id": "tchap",
"title": "Tchap",
"url": "https://www.tchap.gouv.fr/",
"category": "general",
"subtitle": "Messagerie de l'État",
"icon": "forum",
},
{
"id": "mastodon",
"title": "Mastodon",
"url": "https://mastodon.etalab.gouv.fr/",
"category": "general",
"subtitle": "Réseau social décentralisé",
"icon": "blogs",
},
];
\ No newline at end of file
data/index.js
View file @ 596d28ba
export {default as applications} from './applications';
export {default as applicationsGeneral} from './applicationsGeneral';
export {default as platform} from './platform';
export {default as bonnesPratiques} from './bonnesPratiques';
export {default as cgu} from './cgu';
......
data/platform.js
View file @ 596d28ba
export default {
"academies": [
{
"id": "aix-marseille",
"name": "Académie d'Aix-Marseille",
"url": "https://apps-Aix-Marseille.beta.education.fr"
},
{
"id": "amiens",
"name": "Académie d'Amiens",
"url": "https://apps-Amiens.beta.education.fr"
},
{
"id": "besancon",
"name": "Académie de Besançon",
"url": "https://apps-Besancon.beta.education.fr"
},
{
"id": "bordeaux",
"name": "Académie de Bordeaux",
"url": "https://apps-Bordeaux.beta.education.fr"
},
{
"id": "clermont-ferrand",
"name": "Académie de Clermont-Ferrand",
"url": "https://apps-Clermont-Ferrand.beta.education.fr"
},
{
"id": "corse",
"name": "Académie de Corse",
"url": "https://apps-Corse.beta.education.fr"
},
{
"id": "creteil",
"name": "Académie de Créteil",
"url": "https://apps-Creteil.beta.education.fr"
},
{
"id": "dijon",
"name": "Académie de Dijon",
"url": "https://apps-Dijon.beta.education.fr"
},
{
"id": "grenoble",
"name": "Académie de Grenoble",
"url": "https://apps-Grenoble.beta.education.fr"
},
{
"id": "guadeloupe",
"name":"Académie de Guadeloupe",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "guyane",
"name":"Académie de Guyane",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "outre-mer",
"name": "Académies d'Outre Mer",
"url": "https://apps-outremer.beta.education.fr"
},
{
"id": "lille",
"name": "Académie de Lille",
"url": "https://apps-Lille.beta.education.fr"
},
{
"id": "limoges",
"name": "Académie de Limoges",
"url": "https://apps-Limoges.beta.education.fr"
},
{
"id": "lyon",
"name": "Académie de Lyon",
"url": "https://apps-Lyon.beta.education.fr"
},
{
"id": "mayotte",
"name":"Académie de Mayotte",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "martinique",
"name":"Académie de Martinique",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "montpellier",
"name": "Académie de Montpellier",
"url": "https://apps-Montpellier.beta.education.fr"
},
{
"id": "nancy",
"name": "Académie de Nancy",
"url": "https://apps-Nancy.beta.education.fr"
},
{
"id": "nantes",
"name": "Académie de Nantes",
"url": "https://apps-Nantes.beta.education.fr"
},
{
"id": "nice",
"name": "Académie de Nice",
"url": "https://apps-Nice.beta.education.fr"
},
{
"id": "normandie",
"name": "Académie de Normandie",
"url": "https://apps-Normandie.beta.education.fr"
},
{
"id": "noumea",
"name":"Académie de Nouméa",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "orleans-tours",
"name": "Académie d'Orléans-Tours",
"url": "https://apps-Orleans-Tours.beta.education.fr"
},
{
"id": "paris",
"name": "Académie de Paris",
"url": "https://apps-Paris.beta.education.fr"
},
{
"id": "polynesie",
"name":"Académie de Polynésie",
"url":"https://apps-outremer.beta.education.fr"
},
{
"id": "poitiers",
"name": "Académie de Poitiers",
"url": "https://apps-Poitiers.beta.education.fr"
},
{
"id": "reims",
"name": "Académie de Reims",