boîte de dialogue des métadatas + css boutons

src/assets/_vars.scss

@@ -3,3 +3,4 @@ $txt-color: black;
 $bg-color: white;
 $button-border: 2px solid $txt-color;
 $button-border-small: 1px solid $txt-color;
+$button-width :42px;

src/assets/menupara.scss

@@ -1,7 +1,6 @@
 
 @import '_vars.scss';
 
-$button-width: 42px;
 
 .menubar {
 
@@ -11,8 +10,8 @@ $button-width: 42px;
     display: flex;
     flex-direction: column;
 
-    top: 100px;
-    right: 25px;
+    top: 150px;
+    right:  $button-width;
 
     button {
       cursor: pointer;

src/components/Dedediteur.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="editor">
 
+        <meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/>
+
         <div class="bottom-bar">
             <div>
                 <label>Paragraphes :</label><span>{{nbParagraphs}}</span>
@@ -19,12 +21,16 @@
 
 
         <div id="file_actions">
-            <button title="Ouvrir un fichier" id="input_button"
+            <button class="square_btn" title="Ouvrir un fichier" id="input_button"
                     onclick="document.getElementById('input').click()"></button>
-            <button title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
+            <button class="square_btn" title="Enregistrer" id="output_button" v-on:click="saveFile"></button>
             <input type="file" style="display:none;" id="input" v-on:change="loadFile()">
             <a style="display:none;" id="download_link" download="dedediteur-export-demo.html" href=”” >Download as Text File</a>
-            <button title="Export PDF" id="pdf_button" v-on:click="pdfExport"></button>
+            <button class="square_btn" title="Export PDF" id="pdf_button" v-on:click="pdfExport"></button>
+        </div>
+
+        <div id="meta_action">
+            <button v-on:click="isMetaEditorVisible=true" title="Éditer les métadonnées"></button>
         </div>
 
 
@@ -134,6 +140,7 @@
 
 
             <editor-content id="dedediteur" class="editor__content" :editor="editor"/>
+
         </div>
     </div>
 </template>
@@ -150,6 +157,7 @@
         Link
     } from 'tiptap-extensions'
 
+    import MetaEditor from './MetaEditor';
 
     import Environment from "../environments/Environement"
     import CustomStyle from "./extensions/CustomStyle"
@@ -159,7 +167,8 @@
         components: {
             EditorContent,
             EditorMenuBar,
-            EditorMenuBubble
+            EditorMenuBubble,
+            MetaEditor
         },
         data() {
             return {
@@ -167,6 +176,7 @@
                 nbParagraphs: 0,
                 nbSentences : 0,
                 environmentName: 'ar',
+                isMetaEditorVisible: false,
                 environment : new Environment(),
                 keepInBounds: true,
                 editor: new Editor({
@@ -296,6 +306,7 @@
     @import '../assets/menupara';
     @import '../assets/dedediteur.css';
 
+
     .bottom-bar{
         position: fixed;
         width: 100vw;
@@ -330,17 +341,34 @@
 
     #file_actions {
         /*border-bottom : 1px solid #2c3e50;*/
-        padding: 12px;
         position: fixed;
-        top: 10px;
-        left: 10px;
+        top: $button-width;
+        left: $button-width;
         z-index: 200;
+        display: flex;
+        flex-direction: column;
+    }
+
+    #meta_action {
+        position: fixed;
+        top: $button-width;
+        right: $button-width;
+
+        button{
+            width:  $button-width;
+            height: $button-width;
+            background-color: $txt-color;
+            border-radius: calc(#{$button-width} /2);
+            border: none;
+            cursor: pointer;
+        }
+
     }
 
-    #output_button, #input_button, #pdf_button {
+    .square_btn  {
         border: 1px solid black;
-        width: 24px;
-        height: 24px;
+        width:  $button-width;
+        height: $button-width;
         cursor: pointer;
         outline:none;
         &:focus {
@@ -354,11 +382,11 @@
 
     #output_button {
         background-color: black;
-        margin-left: 12px;
+        margin-top: $button-width;
     }
     #pdf_button{
         background-color: red;
-        margin-left: 12px;
+        margin-top: $button-width
     }
 
     /* editor*/

src/components/MetaEditor.vue

@@ -0,0 +1,126 @@
+<template>
+    <div class="meta-editor">
+        <div class="meta-editor-content">
+            <button title="fermer" class="close-btn" v-on:click="hide">
+
+                <svg viewPort="0 0 42 42" version="1.1"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <line x1="0" y1="42"
+                          x2="42" y2="0"
+                          stroke="black"
+                          stroke-width="1"/>
+                    <line x1="0" y1="0"
+                          x2="42" y2="42"
+                          stroke="black"
+                          stroke-width="1"/>
+                </svg>
+
+            </button>
+            <h3>Métadonnées</h3>
+            <div>
+                <label>Titre</label>
+                <input type="text" v-model="title"/>
+            </div>
+
+            <div>
+                <label>Auteur</label>
+                <input type="text" v-model="author"/>
+            </div>
+
+            <div>
+                <label>Date</label>
+                <input type="text" v-model="date"/>
+            </div>
+
+        </div>
+    </div>
+</template>
+
+<script>
+
+
+    export default {
+        components: {},
+        data() {
+            let today = new Date();
+            return {
+                title: "Lorem Ipsum",
+                author: "John Doe",
+                date: (today.getDate() < 10 ? ('0' + today.getDate()): today.getDate() )
+                    + '/' + (today.getMonth() < 9 ? '0' :'') + (today.getMonth() + 1) + '/' + today.getFullYear()
+            }
+        },
+        beforeDestroy() {
+
+        },
+
+        mounted() {
+
+        },
+
+        methods: {
+
+            hide: function(){
+                this.$emit('meta-editor:closed')
+            }
+
+        }
+    }
+</script>
+
+<style lang="scss">
+    @import '../assets/_vars';
+
+    .meta-editor {
+        width: 100vw;
+        height: 100vh;
+        background-color: rgba(100, 100, 100, 0.75);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 500;
+
+        h3 {
+            text-align: center;
+            margin-bottom: 50px;
+        }
+
+        .meta-editor-content {
+            padding: 10px;
+            width: 800px;
+            height: 400px;
+            background-color: $bg-color;
+            position: relative;
+
+            div {
+                margin: 5px;
+
+                label, input {
+                    display: inline-block;
+                    width: 200px;
+                }
+            }
+
+            .close-btn {
+                position: absolute;
+                top: 5px;
+                right: 5px;
+                padding:0;
+                margin : 0;
+                border: none;
+                cursor: pointer;
+                background-color: $bg-color;
+                height: $button-width;
+                svg{
+                    width: $button-width;
+                    height: 4$button-width;
+                }
+            }
+
+        }
+    }
+
+</style>