aboutpane

src/components/AboutPane.vue

@@ -0,0 +1,100 @@
+it <template>
+  <div class="about-pane dialog" v-if="visible">
+      <div class="dialog-content">
+        <button title="fermer" class="close-btn" v-on:click="collapse()">
+          <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="2"/>
+                              <line x1="0" y1="0"
+                                    x2="42" y2="42"
+                                    stroke="black"
+                                    stroke-width="2"/>
+            </svg>
+
+        </button>
+        <div class="about-content">
+          <h2>DEDITOR</h2>
+          <h3>DEDE EDITOR</h3>
+        </div>
+      </div>
+  </div>
+  <div v-else class="about-pane-button" v-on:click="expand"> ... </div>
+</template>
+
+
+<script>
+
+
+    export default {
+        components: {},
+        data() {
+          return {
+              visible : false
+            }
+        },
+        beforeDestroy() {
+
+        },
+
+        mounted() {
+
+        },
+
+        methods: {
+
+            expand : function(){
+                this.visible = true;
+                this.$forceUpdate();
+                console.log(this.visible);
+
+            },
+            collapse : function(){
+                this.visible = false;
+            },
+
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+@import '../assets/_dialog';
+
+  .dialog-content{
+    border: 2px solid black;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .about-pane-button{
+    position: fixed;
+    bottom : 5px;
+    right: 5px;
+    z-index: 55;
+    cursor: pointer;
+    font-weight: bold;
+  }
+
+  .about-content{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color : #aaa;
+
+    h2, h3{
+      margin : 0;
+      padding: 0;
+    }
+
+    h2{
+      font-size: 5rem;
+    }
+    h3{
+      font-size: 2rem;
+    }
+  }
+
+</style>

src/components/Dedediteur.vue

@@ -3,6 +3,7 @@
 
         <open-pane v-bind:environmentList="environmentList" v-on:open-pane:open="openEnvFile" v-if="isOpeningState"/>
         <meta-editor v-on:meta-editor:closed="isMetaEditorVisible=false" v-if="isMetaEditorVisible"/>
+        <about-pane/>
 
         <div class="bottom-bar">
             <div>
@@ -184,7 +185,7 @@
 
     import OpenPane from './OpenPane';
     import MetaEditor from './MetaEditor';
-
+    import AboutPane from './AboutPane';
 
     import Environment from "../environments/Environement"
     import CustomStyle from "./extensions/CustomStyle"
@@ -196,7 +197,8 @@
             EditorMenuBar,
             EditorMenuBubble,
             OpenPane,
-            MetaEditor
+            MetaEditor,
+            AboutPane
         },
         data() {
             return {

src/components/extensions/CustomStyle.js

@@ -1,5 +1,5 @@
 import {Mark} from "tiptap";
-import {toggleMark, updateMark} from "tiptap-commands";
+import {updateMark} from "tiptap-commands";
 
 
 // — Mot - Accronyme