Skip to content

Commit

Permalink
Implement metadata editor redesign
Browse files Browse the repository at this point in the history
  • Loading branch information
@gordlin
gordlin committed Nov 22, 2024
1 parent 9f92558 commit f5f1b84
Show file tree
Hide file tree
Showing 5 changed files with 165 additions and 47 deletions.
2 changes: 1 addition & 1 deletion src/app.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export default class App extends Vue {
</script>

<style lang="scss">
$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
.ovwContainer .layerTile {
max-width: initial;
Expand Down
8 changes: 7 additions & 1 deletion src/components/editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -373,10 +373,11 @@ export default class EditorV extends Vue {
}
.editor-input {
padding: 5px 10px;
padding: 10px 10px;
margin-top: 5px;
border: 1px solid black;
display: inline;
border-radius: 5px;
}
.editor-container .input-error {
Expand All @@ -390,6 +391,11 @@ export default class EditorV extends Vue {
transition-duration: 0.2s;
}
.editor-forms-button {
padding: 11px 15px;
border-radius: 5px;
}
.editor-button:hover:enabled {
background-color: #dbdbdb;
color: black;
Expand Down
162 changes: 121 additions & 41 deletions src/components/metadata-editor.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@
<!-- If the configuration file is being fetched, display a spinner to indicate loading. -->
<div class="editor-container">
<template v-if="!loadEditor">
<div class="px-20 py-5">
<div class="flex">
<div class="flex flex-1 text-2xl font-bold mb-5">
<div>
<header
class="flex flex-col md:flex-row justify-between border-b-2 border-black px-10 md:px-20 pt-10 pb-5 mb-5"
>
<div class="flex flex-1 my-2 mx-auto md:mx-0 text-2xl md:text-3xl font-bold">
{{ editExisting ? $t('editor.loadProduct') : $t('editor.createProduct') }}
</div>
<button class="editor-button" @click="swapLang()">
Expand Down Expand Up @@ -184,45 +186,123 @@
><br />
</span>

<!-- Button to switch between loading and renaming product UUIDs. -->
<span v-if="editExisting && loadStatus == 'loaded'" class="p-1">
<div class="editor-label"></div>
<button
class="align-center inline-block select-none text-sm"
@click="
renaming = !renaming;
changeUuid = '';
warning = warning == 'rename' ? 'none' : warning;
"
>
{{ renaming ? $t('editor.cancel') : $t('editor.changeUuid') }}
</button>
</span>
</div>
</div>
<br />
<div class="mb-4">
<h3 class="editor-h3">{{ $t('editor.productDetails') }}</h3>
<p>
{{ $t('editor.metadata.instructions') }}
</p>
</div>
<metadata-content
:metadata="metadata"
@metadata-changed="updateMetadata"
@logo-changed="onFileChange"
@logo-source-changed="onLogoSourceInput"
></metadata-content>
<br />

<section v-if="!editExisting || loadStatus === 'loaded'">
<section v-if="editExisting" class="pb-10">
<h1 class="text-2xl font-semibold">
{{ $t('editor.editMetadata.versionHistory.header') }}
</h1>
<p>
{{
storylineHistory.length === 0
? $t('editor.editMetadata.versionHistory.noResults')
: $t('editor.editMetadata.versionHistory.resultsFound')
}}
</p>
<div class="flex flex-col gap-5 pt-5" v-if="storylineHistory.length !== 0">
<div class="flex">
<button
class="editor-button editor-forms-button m-0 border border-black"
@click="() => (showHistory = !showHistory)"
>
{{
showHistory
? $t('editor.editMetadata.versionHistory.buttonHide')
: $t('editor.editMetadata.versionHistory.buttonShow')
}}
</button>
</div>

<!-- Version history table -->
<table v-show="showHistory" class="shadow-lg bg-white w-full md:w-3/4 lg:w-1/2">
<colgroup>
<col class="w-3/5" />
<col span="2" />
</colgroup>
<tr>
<td
style="background-color: #e7e7e7"
class="font-bold border-b border-solid border-black"
>
<div class="m-2 mr-0 ml-3">
{{ $t('editor.editMetadata.versionHistory.saveDate') }}
</div>
</td>
<td
style="background-color: #e7e7e7"
class="font-bold border-b border-solid border-black"
>
<div class="ml-0">
{{ $t('editor.editMetadata.versionHistory.actions') }}
</div>
</td>
</tr>
<tr v-for="(historyItem, idx) in storylineHistory" :key="idx">
<td
style="background-color: #f9f9f9"
class="border-b border-solid pl-4"
:class="
idx === storylineHistory.length - 1 ? 'border-black' : 'border-gray-200'
"
>
{{ historyItem.created }}
</td>
<td
style="background-color: #f9f9f9"
class="border-b border-solid py-3 pr-3"
:class="
idx === storylineHistory.length - 1 ? 'border-black' : 'border-gray-200'
"
>
<button
class="editor-button editor-forms-button m-0 border border-black"
@click="
() => {
selectHistory(historyItem);
loadHistory();
}
"
>
<span>{{ $t('editor.editMetadata.versionHistory.load') }}</span>
</button>
</td>
</tr>
</table>
</div>
</section>

<div class="mb-4">
<h1 class="text-2xl font-semibold">{{ $t('editor.productDetails') }}</h1>
<p>
{{ $t('editor.metadata.instructions') }}
</p>
</div>
<metadata-content
:metadata="metadata"
@metadata-changed="updateMetadata"
@logo-changed="onFileChange"
@logo-source-changed="onLogoSourceInput"
></metadata-content>
<button
v-if="editExisting"
@click="saveMetadata(true)"
class="editor-button editor-forms-button"
>
{{ $t('editor.saveChanges') }}
</button>
</section>
</section>
</div>

<div class="flex mt-8">
<button v-if="editExisting" @click="saveMetadata(true)" class="editor-button">
{{ $t('editor.saveChanges') }}
</button>
<div class="flex px-10 md:px-20 py-5 mt-8">
<router-link :to="{ name: 'home' }" target>
<button class="editor-button editor-forms-button m-0 border border-black">
{{ $t('editor.back') }}
</button>
</router-link>

<div class="ml-auto">
<router-link :to="{ name: 'home' }" target tabindex="-1">
<button class="editor-button">{{ $t('editor.back') }}</button>
</router-link>
<button
@click="warning === 'none' ? continueToEditor() : $vfm.open(`confirm-uuid-overwrite`)"
class="editor-button bg-black text-white"
Expand Down Expand Up @@ -1336,9 +1416,9 @@ export default class MetadataEditorV extends Vue {
get getStorylines() {
const userStore = useUserStore();
const userStorylines = userStore.userProfile?.storylines?.map((s) => ({ ...s, isUserStoryline: true })) || [];
const userStorylines = userStore.userProfile.storylines?.map((s) => ({ ...s, isUserStoryline: true })) || [];
const allStorylines =
userStore.userProfile?.allStorylines?.filter((s) => !userStorylines.some((u) => u.uuid === s.uuid)) || [];
userStore.userProfile.allStorylines?.filter((s) => !userStorylines.some((u) => u.uuid === s.uuid)) || [];
let combined = [...userStorylines, ...allStorylines];
if (this.uuid) {
Expand Down
2 changes: 1 addition & 1 deletion src/components/preview.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export default class StoryPreviewV extends Vue {
</script>

<style lang="scss">
$font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
$font-list: 'Segoe UI', system-ui, ui-sans-serif, Tahoma, Geneva, Verdana, sans-serif;
.storyramp-app {
h1,
Expand Down
38 changes: 35 additions & 3 deletions src/lang/lang.csv
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,14 +40,46 @@ editor.previousProducts.productInfo.title,Title,1,Titre,0
editor.previousProducts.lastModified,Last Modified,1,Dernière modification,0
editor.previousProducts.actions,Actions,1,Actes,0
editor.editMetadata,Edit Project Metadata,1,Modifier les métadonnées d’un projet,1
editor.editMetadata.load.cancel,Cancel load,1,Annuler le chargement,0
editor.editMetadata.editExistingHeader,Choose Storylines Product,1,Choisissez le produit Storylines,0
editor.editMetadata.input.tooltip,Press Esc to erase field.,1,Appuyez sur Esc pour effacer le champ.,0
editor.editMetadata.loading,Storyline product is loading. Larger products can take a while to load. Thank you for your patience.,1,Le produit Storyline est en cours de chargement. Le chargement des produits plus volumineux peut prendre un certain temps. Merci pour votre patience.,0
editor.editMetadata.message.error.noConfig,No config exists for storylines product.,1,Aucune configuration n'existe pour le produit Storylines.,0
editor.editMetadata.message.error.failedZipFile,Failed to process ZIP file.,1,Échec du traitement du fichier ZIP.,0
editor.editMetadata.message.error.noRequestedVersion,The requested version does not exist.,1,La version demandée n'existe pas.,0
editor.editMetadata.message.error.noResponseFromServer,"Failed to load product, no response from server",1,"Échec du chargement du produit, aucune réponse du serveur",0
editor.editMetadata.message.error.malformedProduct,The requested product {uuid} is malformed.,1,Le produit demandé {uuid} est mal formé.,0
editor.editMetadata.message.error.failedSave,Failed to save changes.,1,Échec de l'enregistrement des modifications.,0
editor.editMetadata.message.error.logoFailedLoad,Failed to load logo image.,1,Échec du chargement de l'image du logo.,0
editor.editMetadata.message.error.requiredFieldsNotFilled,Please fill out the required fields before proceeding.,1,Veuillez remplir les champs obligatoires avant de continuer.,0
editor.editMetadata.message.logoSuccessfulLoad,Successfully loaded logo image.,1,Image du logo chargée avec succès.,0
editor.editMetadata.message.successfulLoad,Successfully loaded storyline!,1,Scénario chargé avec succès!,0
editor.editMetadata.message.successfulSave,Successfully saved changes!,1,Modifications enregistrées avec succès!,0
editor.editMetadata.message.wait,Please wait. This may take several minutes.,1,"S'il vous plaît, attendez. Cela peut prendre plusieurs minutes.",0
editor.editMetadata.versionHistory.buttonShow,Show previous versions of product,1,Afficher les versions précédentes du produit,0
editor.editMetadata.versionHistory.buttonHide,Hide previous versions,1,Masquer les versions précédentes,0
editor.editMetadata.versionHistory.header,Version History,1,Historique des versions,0
editor.editMetadata.versionHistory.resultsFound,"We detected previous versions of this storylines product. If you wish to restore a previous version, please click 'Show previous versions of product'.",1,"Nous avons détecté des versions précédentes de ce produit Storylines. Si vous souhaitez restaurer une version précédente, veuillez cliquer sur « Afficher les versions précédentes du produit ».",0
editor.editMetadata.versionHistory.noResults,There are no previous versions of this storylines product.,1,Il n’existe aucune version précédente de ce produit Storylines.,0
editor.editMetadata.versionHistory.load,Load this version,1,Charger cette version,0
editor.editMetadata.versionHistory.actions,Actions,1,Actes,0
editor.editMetadata.versionHistory.saveDate,Save Date,1,Enregistrer la date,0
editor.editMetadata.retrievalAborted,Product retrieval manually aborted.,1,Récupération du produit interrompue manuellement.,0
editor.done,Done,1,Fini,0
editor.productDetails,Storylines product details,1,Détails du produit de scénarios,1
editor.metadata.instructions,Fill in metadata details about your new Storylines product. Use the "Preview" button to see what your slides will look like.,1,Inscrivez les métadonnées de votre nouveau produit de scénario. Utilisez la fonction « Afficher l’aperçu » pour voir à quoi ressemblent vos diapositives.,1
editor.uuid,UUID,1,UUID,1
editor.uuid,UUID,1,UUID,0
editor.uuid.required,(required),1,(obligatoire),0
editor.uuid.new,New UUID,1,New UUID,0
editor.warning.mustEnterUuid,You must first enter a UUID.,1,Vous devez d'abord saisir un UUID.,0
editor.warning.retrievalFailed,"Failed to load product, no response from server.",1,"Échec du chargement du produit, aucune réponse du serveur.",0
editor.warning.uuid,UUID already exists. Saving this will overwrite existing product.,1,L’IDUU existe déjà. Enregistrer ce produit écrasera le produit existant.,1
editor.warning.uuidNotFound,The requested UUID '{uuid}' does not exist.,1,L'UUID '{uuid}' ​​demandé n'existe pas,0
editor.metadata.uuidInstructions,"Please enter the UUID of an existing storylines product, then click the 'Load' button.",1,"Veuillez saisir l'UUID d'un produit de scénario existant, puis cliquez sur le bouton « Charger ».",0
editor.metadata.newUuidInstructions,"Enter a unique ID for your new storyline. One has been auto-generated for you, but you can also enter your own.",1,"Entrez un identifiant unique pour votre nouveau scénario. Un a été généré automatiquement pour vous, mais vous pouvez également saisir le vôtre.",0
editor.warning.rename,UUID already in use. Please choose a different ID.,1,UUID déjà utilisé. Veuillez choisir un autre identifiant.,0
editor.changeUuid,Click here to change UUID,1,Click here to change UUID,0
editor.changingUuid,You are changing this product UUID to {changeUuid}. Save changes required.,1,You are changing this product UUID to {changeUuid}. Save changes required.,0
editor.changeUuid,Click here to change UUID,1,Cliquez ici pour changer,0
editor.changingUuid,You are changing this product UUID to '{changeUuid}'. Save changes required.,1,Vous modifiez l'UUID de ce produit en '{changeUuid}'. Enregistrez les modifications requises.,0
editor.title,Title,1,Titre,1
editor.respectTitle,RAMP Storylines Editor & Creation Tool,1,Éditeur et outil de création de scénarios RAMP,0
editor.logo,Logo,1,Logo,1
Expand Down

0 comments on commit f5f1b84

Please sign in to comment.