Adaptation des Apps Nextcloud
Guide explicatif sur les Apps Nextcloud remaniées pour l'instance académique
- App Document : afficher l'aperçu d'un document office
- App FirstRunWizard : personnalisation panneaux "à propos"
- App User_CAS : prise en charge EOLE_SSO sélective
- App terms_of_service : personnalisation cosmétique
App Document : afficher l'aperçu d'un document office
DOC TECHNIQUE
à l'origine il s'agit de l'app documents référencée sur https://apps.nextcloud.com/apps/documents et dont le dépôt github est accessible à l'adresse https://github.com/nextcloud/documents
Nextcloud Documents est un module d'édition collaborative de documents en texte enrichi.
Malheureusement, WebODF - la technologie sur laquelle repose l'app Documents - n'est plus développé et la société à l'origine de celui-ci a fermé ses portes. Nous pourrions continuer à essayer de garder Documents compatibles avec les versions Nextcloud. Mais, à mesure que les navigateurs changent et que les formats de documents Office évoluent, le moteur WebODF lui-même devrait commencer à présenter de plus en plus de problèmes au fil du temps et il cessera de fonctionner à un moment donné. À moins qu'un temps considérable ne puisse être investi dans WebODF, il n'y a pas grand-chose à faire à ce sujet.
- extrait du projet Documents sur github
A l'origine l'app permettait l'ouverture et l'édition collaborative de documents libre office depuis le navigateur, au sein de NextCloud.
Jusqu'à la version NextCloud 12
Sur NextCloud 14, il est possible de passer outre la limitation à la version 12 en indiquant une max-version à 14 en éditant le fichier de déclaration de l'app :
[ dossier nextcloud ]/ apps / documents / appinfo / info.xml
<dependencies>
<nextcloud min-version="12" max-version="14" />
</dependencies>L'app peut-être installée, toutefois avec les limites suivantes :
- l'édition (collaborative ou non) ne fonctionne pas du tout
- l'aperçu de document est approximatif : mise en page avancée non supportée, chevauchement d'images, débordements de paragraphe en dehors de la page
- la présentation visuelle de l'aperçu est perfectible ; page blanche sur fond blanc, page alignée à gauche
- le chemin de navigation permettant de fermer l'aperçu et de revenir sur le dossier courant ne fonctionne pas du tout
Nous avons jugé que l'aperçu d'un document open office, bien qu'imparfait, peut dépanner : cela présente un intérêt par opposition à l'obligation de télécharger systématiquement un document office lorsque l'on clique dessus - le fonctionnement normal de NextCloud sans activer cette app.
Nous avons donc appliqué des modifications pour :
- conserver la possibilité d'afficher un aperçu bien qu'approximatif en cliquant sur un document office
- désactiver l'accès à l'édition de document, qui ne fonctionne pas
- désactiver l'interface de navigation de l'aperçu, qui ne fonctionne pas :
pour quitter l'aperçu la seule solution consiste à revenir à la racine de son dossier NextCloud.
- mettre à niveau la présentation de l'aperçu en s'inspirant des codes visuels de l'app affichant les fichiers PDF (page centrée, fond gris sombre)
Détail des modifications :
Désactiver l'accès à l'édition non fonctionnelle de document
[ dossier nextcloud ]/ apps / documents / appinfo / app.php
commenter la ligne telle que ci-dessous pour désactiver la navigation
#$c->getServer()->getNavigationManager()->add($navigationEntry);Mettre à niveau la présentation de l'aperçu, et masquer les éléments de navigation non fonctionnels
rendu visuel de l'aperçu d'un document .odt (open document text) avec nos modifications CSS
[ dossier nextcloud ]/ apps / documents / css / odfviewer.css
#odf-canvas{
position: relative;
top: 37px;
left: calc( calc( 100% - 84em ) / 2); /* centrer la page */
border:1px solid darkgray;
border-left:0 none;
box-shadow: 0px 4px 10px #000;
-moz-box-shadow: 0px 4px 10px #000;
-webkit-box-shadow: 0px 4px 10px #000;
}
/* tout ce qui suit est rajouté */
/* visuel à la maniere du PDFviewer */
#odf-canvas > div {
width: 84em;
}
#controls {
height: 32px;
box-shadow: inset 1px 0 0 hsla(0,0%,100%,.08), inset 0 1px 1px hsla(0,0%,0%,.15), inset 0 -1px 0 hsla(0,0%,100%,.05), 0 1px 0 hsla(0,0%,0%,.15), 0 1px 1px hsla(0,0%,0%,.1);
background-color: #474747;
background-image: url(img/texture.png), linear-gradient(hsla(0,0%,32%,.99), hsla(0,0%,27%,.95));
}
#controls:after {
content: "Aperçu du document";
color: White;
font-weight: bold;
font-size: 1em;
top: 6px;
position: relative;
left: 1em;
}
#controls:before {
content: "! mise en forme à titre indicatif !";
color: rgba(255,255,255,0.8);
font-weight: bold;
font-size: 1.2em;
top: 7px;
position: absolute;
right: 6px;
}
#app-content {
background-color: #424242;
}
/* désactiver les élements de navigation non fonctionnels de l'aperçu */
#controls > .breadcrumb, #gallery-button, #odf_close {
display: none;
}
/* tentative de mise en cohérence responsive design */
@media only screen and (min-width: 480px) {
#odf-canvas {
zoom:0.3;
}
#controls:after {
display: inline-block;
font-size: 0.8em;
}
#controls:before {
display:none;
}
}
@media only screen and (min-width: 768px) {
#odf-canvas {
zoom:0.5;
}
#controls:after {
display: inline-block;
font-size: 1em;
}
#controls:before {
display: inline-block;
display:none;
}
}
@media only screen and (min-width: 1200px) {
#odf-canvas {
zoom:1;
}
#controls:after {
display: inline-block;
font-size: 1em;
}
#controls:before {
display: inline-block;
font-size: 1.2em;
}
}App FirstRunWizard : personnalisation panneaux "à propos"
DOC TECHNIQUE
Le menu paramètre propose, via l'option "à propos" une fenêtre modale proposant un certain nombre de panneaux d'information. Cette fonctionnalité est proposée par l'app "FirstRunWizard", littéralement : assistant de premier démarrage.
Il se lance donc lors de la première connection à l'application Web, puis peut-être de nouveau executé par l'option "à propos".
Détail des modifications :
Principe général
Les modifications sont apportés dans les fichiers situés dans
[ dossier nextcloud ]/ apps / firstrunwizard / templates /
Dans ce dossier, le fichier wizard.php orchestre l'ordre des panneaux en indiquant une référence à page.xxx correspondant à chacun des fichiers à inclure situés dans le même dossier page.xxx.php
Il suffit donc de créer des fichiers page.xxx.php et les référencer dans wizard.php pour construire la succession de panneaux qui s'affichera.
Pour notre adaptation de l'app, le contenu du fichier wizard.php est mis à jour ainsi :
<!-- ajout d'une modification de style pour afficher le logo académique -->
<style>
:root {
--logo-acad: url(https://www.ac-reunion.fr/fileadmin/APPLICATIONS/logo-academie.png);
}
.locoacad {
background-image: var(--logo-acad);
background-repeat: no-repeat;
background-size: 175px;
background-position: left;
width: 252px;
height: 120px;
margin: 0 auto;
}
</style>
<!-- (...) -->
<div id="firstrunwizard">
<div class="firstrunwizard-header">
<!-- (...) -->
</div>
<div class="firstrunwizard-content">
<?php
print_unescaped($this->inc('page.intro'));
print_unescaped($this->inc('page.conditions'));
print_unescaped($this->inc('page.values'));
print_unescaped($this->inc('page.clients'));
print_unescaped($this->inc('page.filaos'));
?>
<div class="wizard-navigation">
<!-- (...) -->
</div>
</div>
</div>Panneau 1 : accueil page.intro.php
visuel du panneau 1 modifié
<div class="page intro" data-title="<?php p($l->t('A safe home for all your data')); ?>" data-subtitle="">
<div class="content">
</div>
</div>Pour modifier les libellés en français, les traductions seront modifiées dans les fichiers fr.js et fr.json dans le dossier [ dossier nextcloud ]/ apps / firstrunwizard / l10n /
Avec ici l'appel depuis page.intro.php :p($l->t('A safe home for all your data'));
Eléments de traduction des fichiers fr.js et fr.json "A safe home for all your data" : "Une clé USB virtuelle pour partager vos données",
Panneau 2 : rappel des conditions d'utilisation page.conditions.php
visuel du panneau 2 modifié
Accéder aux conditions d'utilisation
<div class="page" data-title="Conditions d'utilisation" data-subtitle="">
<div class="content" style="max-height: 400px; overflow: auto;>">
<!-- Ci dessous le code HTML de rédaction des conditions d'utilisation -->
<p><strong>Juin 2021 - Service Cloud Académique de l'Académie de La Réunion</strong>
<!-- (...) -->
</div>
</div>Panneau 3 : Informations sur le service proposé page.values.php
visuel du panneau 3 modifié
<div class="page" data-title="<?php p($l->t('A safe home for all your data')); ?>" data-subtitle="">
<div class="content content-values">
<p>
<?php p($l->t('Nextcloud puts your data at your fingertips, under your control. Store your documents, calendar, contacts and photos on a server in your company, at home, at one of our providers or in a data center you know.')); ?>
</p>
<ul id="wizard-values">
<li>
<span class="icon-world"></span>
<h2><?php p($l->t('Host your data and files where you decide')); ?></h2>
</li>
<li>
<span class="icon-shared"></span>
<h2><?php p($l->t('Open Standards and Interoperability')); ?></h2>
</li>
<li>
<span class="icon-user"></span>
<h2><?php p($l->t('100% Open Source & community-focused')); ?></h2>
</li>
</ul>
</div>
</div>Eléments de traduction des fichiers fr.js et fr.json "Nextcloud puts your data at your fingertips, under your control. Store your documents, calendar, contacts and photos on a server in your company, at home, at one of our providers or in a data center you know." : "L'Académie de la Réunion vous propose le Cloud académique pour faciliter l'échange de vos données entre personnels de l'académie. Ce service ne remplace pas un serveur de fichiers institutionnel et doit-être envisagé comme un moyen supplémentaire facilitant l'échange et le stockage temporaire de données.",
"Host your data and files where you decide" : "Organisez vos données et fichiers comme vous le voulez",
"Open Standards and Interoperability" : "Normes ouvertes et interopérabilité",
"100%% Open Source & community-focused" : "100% Open Source & axé sur la communauté ",
Panneau 4 : Information sur les clients de synchronisation page.clients.php
visuel du panneau 4 modifié
<div class="page" data-title="<?php p($l->t('Stay in sync')); ?>" data-subtitle="">
<div class="content content-clients">
<p><?php p($l->t('Nextcloud gives you access to your files wherever you are.')); ?><br />
<?php p($l->t('Our easy to use desktop and mobile clients are available for all major platforms at zero cost!')); ?></p>
<div class="description-block">
<h2>Obtenez l'application client <b>compatible</b> avec ce service :</h2>
<a target="_blank" href="https://download.owncloud.com/desktop/stable/ownCloud-2.3.4.8624-setup.exe">
<img src="<?php p(image_path('core', 'nextcloud-client-windows.jpg')); ?>"
alt="Windows"/>
</a>
<a target="_blank" href="https://download.owncloud.com/desktop/stable/ownCloud-2.3.4.8537.pkg">
<img src="<?php p(image_path('core', 'nextcloud-client-macintosh.jpg')); ?>"
alt="image MacOS pkg" style="height:60px"/>
</a>
<a target="_blank" href="https://software.opensuse.org/download/package?project=isv:ownCloud:desktop:client-2.3.4&package=owncloud-client">
<img src="<?php p(image_path('core', 'nextcloud-client-linux.jpg')); ?>"
alt="Paquet Linux"
style="height:60px"/>
</a>
<div align="center"><p><a href="https://portail.ac-reunion.fr/ladoclela/books/cloud-academique/page/installation-du-client-de-synchronisation-windows" target="_documentation">Accédez au guide d'installation du client de synchronisation</a></p></div>
</div>
</div>
</div>Eléments de traduction des fichiers fr.js et fr.json "%s gives you access to your files wherever you are. Our easy to use desktop and mobile clients are available for all major platforms at zero cost." : "%s vous donnes accès à vos fichiers où que vous soyez.",
"Our easy to use desktop and mobile clients are available for all major platforms at zero cost!" : "Nos applications de bureau et mobiles faciles à utiliser sont disponibles pour toutes les plateformes majeures gratuitement!"
Panneau 5 : Assistance et liens vers la documentation page.filaos.php
visuel du panneau 5 modifié
<div class="page content-final" data-title="<?php p($l->t('Get help')); ?>" data-subtitle="">
<div class="description">
<div class="description-block">
<h2 class="icon-info"><?php p($l->t('Get more information')); ?></h2>
<ul>
<li> <p>Des tutoriels vidéos pour vous aider à utiliser l'application NextCloud :</p>
<a target="_wiki" href="https://aca.re/wiki/academie:10_outils:cloud">Accès au wiki academie:10_outils:cloud</a></li>
</ul>
<ul>
<li> <p><?php p($l->t('The Nextcloud documentation for home users:')); ?></p>
<a target="_doc" href="https://docs.nextcloud.com/server/14/Nextcloud_User_Manual.pdf"><?php p($l->t('User manual')); ?></a>
</br>(documentation en langue anglaise)</li>
</ul>
</div>
</div>
<div class="description">
<div class="description-block">
<h2 class="icon-user">Centre de Servces FIL@OS</h2>
<p>Vous avez la possibilité de contacter le CSF pour toute demande d'assistance en accédant à FIL@OS, et en déposant un dossier d'assistance précisant le produit "Cloud Académique".</p>
<a href="https://aca.re/filaos" target="_filaos" class="button">Accéder à FIL@OS</a>
<p>(*) : <i>Les personnels enseignants doivent s'adresser à leur informaticien en établissement : c'est ce dernier qui peut accéder à FIL@OS actuellement</i></p>
</div>
</div>
</div>Eléments de traduction des fichiers fr.js et fr.json "The Nextcloud documentation for home users:" : "La documentation Nextcloud pour les utilisateurs à domicile:",
App User_CAS : prise en charge EOLE_SSO sélective
DOC TECHNIQUE
PROBLEME CONNU l'app User_CAS se désactive d'elle-même en cas d'anomalie indeterminée ; pour pallier à cela un cron relance l'activation de l'app toutes les 5 min...
Cette App permet la prise en charge du service d'authentification Eole_SSO sur le serveur Magmatic. Par ailleurs, elle prend en charge la fédération d'identité provenant d'une authentification académique (serveur sso.ac-reunion.fr).
Elle facilite l'accès à tous les personnels Education Nationale de l'académie (dont les comptes sont synchronisés depuis l'Annuaire Académique Fédérateur - AAF) - ce qui exclue les autres types de personnels, les élèves et leurs responsables.
Elle provoque toutefois des dysfonctionnements avec les clients de synchronisation qui ne sont pas toujours capables, au grès des versions, d'afficher une mire d'authentification HTML (proposée par un service autre que NextCloud lui-même)
Modification apportée : contournement de l'app user_cas si la connexion provient d'un client de synchronisation.
Détail des modifications :
Désactiver l'exécution de l'app si le user_agent détecté contient la chaine "mirall" qui signe la présence d'un client de synchronisation
[ dossier nextcloud ]/ apps / user_cas / appinfo / app.php
le début du fichier est modifié comme suit :
/*
* @author
* @copyright
* LICENCE
*/
$app = new \OCA\UserCAS\AppInfo\Application();
$c = $app->getContainer();
$enabled = TRUE;
$script = (isset($_SERVER['SCRIPT_FILENAME']) ? $_SERVER['SCRIPT_FILENAME'] : '');
$requestUri = (isset($_SERVER['REQUEST_URI']) ? $_SERVER['REQUEST_URI'] : '');
# >>> CI-DESSOUS LIGNES AJOUTEES
$mirall=false;
if(isset($_SERVER['HTTP_USER_AGENT'])) {
$mirall=strpos($_SERVER['HTTP_USER_AGENT'], 'mirall');
}
# >>> CI-DESSOUS LE BLOC QUI TESTE LES CAS DE FIGURE OU L'APP USER_CAS NE DOIT PAS ETRE ACTIVE
if (in_array(basename($script), array('console.php', 'cron.php', 'status.php', 'version.php'))
# le "test du client de synchro" est ajouté ci-dessous
|| $mirall !== false
|| strpos($requestUri, "/richdocuments/wopi/")
|| strpos($requestUri, "/oauth2/")
|| strpos($requestUri, "/s/")
|| strpos($requestUri, 'logreader')
|| strpos($requestUri, '/gallery/slideshow')
|| preg_match('/.*(.*\.public).*/', $requestUri)) {
$enabled = FALSE;
}
# la suite du fichier est inchangé
[...]
App terms_of_service : personnalisation cosmétique
DOC TECHNIQUE
Détail des modifications :
Principe général
Les modifications sont apportés dans les fichiers situés dans
[ dossier nextcloud ]/ apps / terms_of_service / css / overlay.scss
les éléments suivants sont ainsi mis à jour :
- agrandissement de la fenêtre
- bordure épaisse aux angles légèrement arrondis, de la couleur primaire du thème en cours
- marge interne pour faciliter la lisibilité
Cela se traduit par le code CSS suivant :
#terms_of_service_confirm {
.v--modal-overlay {
z-index: 99999;
}
.v--modal-overlay .v--modal-box {
max-height: 800px;
overflow: auto;
}
.v--modal-box.v--modal {
top: 20vh !important;
left: 10vw !important;
width: 80vw !important;
height: 60vh !important;
padding: 4px !important;
border: var(--color-primary-element) solid 20px !important;
border-radius: 8px !important;
}
}