Passer au contenu principal

App FirstRunWizard : personnalisation panneaux "à propos"

 DOC TECHNIQUE    - EN COURS - 

image-1624874498221.png
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

image-1625467192593.png
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'));

La correspondance dans les fichiersEléments de traduction des fichiers fr.js et fr.json sera : 

"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

image-1625467634114.pngvisuel 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&#39;Académie de La Réunion</strong>
<!-- (...) -->
	</div>
</div>

Panneau 3 : Informations sur le service proposé page.values.php

image-1625467699730.pngvisuel 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 modifiées dans lesdes fichiers fr.js et fr.json 

"ANextcloud safe home for allputs your data"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." : "UneL'Académie cléde USBla virtuelleRéunion vous propose le Cloud académique pour partagerfaciliter l'échange de vos données"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

image-1625465950461.png
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 modifiées dans lesdes fichiers fr.js et fr.json 

"A%s safegives homeyou access to your files wherever you are. Our easy to use desktop and mobile clients are available for all yourmajor data"platforms at zero cost." : "Une%s clévous USBdonnes virtuelleaccè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 partagertoutes vosles données",plateformes majeures gratuitement!"

Panneau 5 : Assistance et liens vers la documentation page.filaos.php

image-1625467816022.png
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>
		<!-- <li><a href="<?php p(link_to_docs('admin-')) ?>"><?php p($l->t('Admin manual')); ?></a></li>
				<li><a href="<?php p(link_to_docs('developer-')) ?>"><?php p($l->t('Developer manual')); ?></a></li> -->
			<!--
			<p><?php p($l->t('You can also ask for help in our community support channels:')); ?></p>
			<ul>
				<li><a href="https://help.nextcloud.com"><?php p($l->t('the Nextcloud forums')); ?></a></li>
				<li><a href="https://riot.im/app/#/room/#freenode_#nextcloud:matrix.org"><?php p($l->t('the Nextcloud IRC chat channel on freenode.net')); ?></a></li>
			</ul>
			-->
		</div>
	</div>
	<div class="description">
		<div class="description-block">
			<!-- <h2 class="icon-user"><?php p($l->t('Start contributing')); ?></h2> -->
			<h2 class="icon-user">Centre de Servces FIL@OS</h2>
			<!-- <p><?php p($l->t('Do you want to get a certain improvement in Nextcloud? Did you find a problem? Do you want to help translate, promote or document Nextcloud?')); ?></p> -->
			<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://nextcloud.com/contribute/" class="button"><?php p($l->t('Become part of the Community')); ?></a> -->
			<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 class="description-block">
			<h2 class="icon-world"><?php p($l->t('Enterprise support')); ?></h2>
			<p><?php p($l->t('If you run Nextcloud in a mission critical environment with large numbers of users and big amounts of data and need the certainty of support from the experts behind the Nextcloud technology, an Enterprise Subscription from Nextcloud is available with email and phone support.')); ?></p>
			<a href="https://nextcloud.com/enterprise/buy" class="button"><?php p($l->t('Get enterprise support')); ?></a>
		</div>
		-->
	</div>
</div>

Eléments de traduction modifiées dans lesdes fichiers fr.js et fr.json 

"AThe safeNextcloud documentation for home for all your data"users:" : "UneLa clédocumentation USB virtuelleNextcloud pour partagerles vosutilisateurs données"à domicile:",