Change aspect

src/App.vue

@@ -1,19 +1,16 @@
 <template>
   <div id="app">
-    <barra/>
     <Base/>
       <br>
     <footerVue/>
   </div>
 </template>
 <script>
-import barra from './components/barra.vue'
 import Base from './components/basecanvas.vue'
 import footerVue from './components/extra/footerVue.vue'
 export default {
   name: 'App',
   components: {
-    barra,
     Base,
     footerVue
   }

src/components/basecanvas.vue

@@ -1,11 +1,11 @@
 <template>
-  <b-container>
-    <b-card :class="bytheme" class="yonce col-md-12 mb-3 w-100 mt-2 shadow-lg">
+  <div class="div-container">
+    <b-card :class="bytheme" class=" mb-3 shadow-lg">
       <b-container style="display: inline">
         <b-form-select
           class="text-center mt-1 text-secondary col-sm-2 font-weight-bold"
           v-model="standar"
-          style="background: rgba(0, 0, 0, 0)"
+          style="background: rgba(0, 0, 0, 0);"
           title="el estandar con el que se compilara c++"
         >
           <b-form-select-option value="c++11">c++11</b-form-select-option>
@@ -14,9 +14,10 @@
           <b-form-select-option value="c++2a">c++2a</b-form-select-option>
         </b-form-select>
         <b-form-select
+         variant="primary"
           class="ml-3 mt-1 text-center text-secondary col-md-1 font-weight-bold"
           v-model="optimizar"
-          style="background: rgba(0, 0, 0, 0)"
+          style="background: rgba(0, 0, 0, 0);"
           title="el nivel de optimizacion a la hora de compilar, esto se vera en el codigo ensamblador"
         >
           <b-form-select-option value="1">O1</b-form-select-option>
@@ -83,6 +84,16 @@
           <b-modal id="themes-modal">
             <themes />
           </b-modal>
+
+            <!-- <b-form-checkbox
+             class="ml-1 mt-2"
+            id="curlmode"
+            v-model="usecurl"
+            name="curlmode"
+            value="on"
+            unchecked-value="off"> USE libcurl </b-form-checkbox> -->
+
+
         </b-modal>
 
         <b-modal id="program-input">
@@ -92,16 +103,18 @@
         <b-modal id="headers">
           <headers />
         </b-modal>
+
       </b-container>
 
-      <div class="row">
-        <div class="rounded col-md-12 shadow-md mt-2">
+      <div class="row w-100 body-tam" >
+        <div class="rounded col-md-12 shadow-md mt-2 editor-canva">
           <div id="file-list" class="files mb-3">
 
             <button
               title="cambiar a modo de clases"
               @click="changeMode"
               class="classmode"
+               style="border-color:#5bc0de;"
             >
               {{getClassModeName}}
             </button>
@@ -111,10 +124,12 @@
               class="classmode"
               id="newspace-button"
               @click="addSpace"
+              style="border-color:#5bc0de;"
             >
               <b-icon variant="white" icon="file-earmark-plus"></b-icon>
             </button>
             <button
+               style="border-color:#5bc0de;"
               title="tab home"
               id="tab_id0"
               @click="setSpace({ id: 'tab_id0' })"
@@ -136,6 +151,8 @@
             />
           </div>
         </div>
+
+       <b-modal id="output-modal" hide-footer>
         <b-card
           class="w-100 mt-2"
           style="
@@ -151,15 +168,18 @@
             <b-icon icon="receipt-cutoff" variant="white"></b-icon>
           </b-badge>
           <br />
-          <span class="text-white" style="font-family: monospace">
+          <span class="text-dark" style="font-family: monospace">
             {{ output }}
           </span>
-        </b-card>
+        </b-card> 
+       </b-modal>
+
       </div>
       <b-button
         title="establer entrada del programa"
         v-b-modal.program-input
         variant="primary"
+        style="background: rgba(0, 0, 0, 0)"
         class="ml-1 float-right mt-1"
         >entrada <b-icon icon="input-cursor-text"></b-icon>
       </b-button>
@@ -168,26 +188,30 @@
         v-b-modal.headers
         class="float-right mt-1 ml-2"
         variant="secondary"
+        style="background: rgba(0, 0, 0, 0)"
         v-if="mode"
         >#include</b-button
       >
       <b-button
         title="compilar"
         @click="compile"
         variant="success"
+        style="background: rgba(0, 0, 0, 0)"
         class="ml-1 float-right mt-1"
+        v-b-modal.output-modal
         >compilar</b-button
       >
       <b-button
         title="resetear la salida"
         class="float-right mx-auto mt-1 ml-1"
+        style="background: rgba(0, 0, 0, 0)"
         variant="danger"
         @click="reset"
       >
         <b-icon icon="arrow-counterclockwise"></b-icon>
       </b-button>
     </b-card>
-  </b-container>
+  </div>
 </template>
 <script>
 import notas from "./extra/notas.vue";
@@ -200,6 +224,7 @@ import { mapGetters } from "vuex";
 import { codemirror } from "vue-codemirror";
 import "codemirror/lib/codemirror.css";
 
+
 import "codemirror/theme/dracula.css";
 import "codemirror/theme/yonce.css";
 import "codemirror/theme/monokai.css";
@@ -331,6 +356,14 @@ export default {
         this.$store.commit("superUpdate", { type: "optimizar", data: value });
       },
     },
+    usecurl: {
+      get(){
+        return this.$store.state.usecurl;
+      },
+      set(value) {
+        this.$store.commit("superUpdate",{type: "curl", data: value});
+      }
+    },
 
     ids: {
       get() {
@@ -342,7 +375,7 @@ export default {
     },
 
     bytheme() {
-      return this.$store.state.bytheme;
+      return this.$store.getters.bytheme;
     },
     getClassModeName() {
       return this.local_widthMatch ? '.h' : this.local_class_mode_name + this.local_mode;
@@ -368,15 +401,13 @@ export default {
 .base16-dark {
   background: rgb(21, 21, 21);
 }
-
 .files {
   margin-top: 5px;
   margin-bottom: 50px;
   margin-left: 20px;
   width: 100%;
   height: 28px;
   border-radius: 4px;
-  overflow: auto;
 }
 .tabs {
   width: 10%;
@@ -387,6 +418,7 @@ export default {
   color: white;
 }
 
+
 .classmode {
   width: 13%;
   height: 28px;
@@ -397,6 +429,19 @@ export default {
   margin-right: 10px;
 }
 
+.div-container {
+  margin: 0 auto;
+  max-width: 1800px;
+}
+
+
+.body-tam {
+  height: 510px;
+}
+
+.editor-canva {
+  height: 490px;
+}
 
 
 </style>

src/components/editor.vue

@@ -1,5 +1,5 @@
 <template>
-  <codemirror :id="ids" v-if="visible" v-model="model" :options="options" />
+  <codemirror class="CodeMirror" :id="ids" v-if="visible" v-model="model" :options="options" />
 </template>
 
 <script>
@@ -51,3 +51,8 @@ export default {
   },
 };
 </script>
+<style>
+.CodeMirror{
+  height: 430px;
+}
+</style>

src/components/test.vue

@@ -0,0 +1,46 @@
+<template>
+    <codemirror class="CodeMirror"  :options="options"  />
+</template>
+
+<script>
+import { codemirror } from "vue-codemirror";
+import "codemirror/lib/codemirror.css";
+
+import "codemirror/theme/dracula.css";
+import "codemirror/theme/yonce.css";
+import "codemirror/theme/monokai.css";
+import "codemirror/theme/base16-dark.css";
+
+import "codemirror/mode/clike/clike.js";
+import "codemirror/keymap/sublime.js";
+export default {
+    name: 'test',
+    components:{
+        codemirror
+    },
+    data(){
+        return {
+     options: {
+      lineWrapping: true,
+      lineWrapping: true,
+      autofocus: true,
+      lineNumbers: true,
+      smartIndent: true,
+      indentUnit: 2,
+      styleActiveLine: true,
+      keyMap: "sublime",
+      mode: "text/x-c++src",
+      theme: localStorage.getItem("theme") || "yonce",
+    },
+        }
+    }
+}
+</script>
+
+<style>
+.CodeMirror {
+ /* Set height, width, borders, and global font properties here */
+    font-family: monospace;
+    height: 100%;
+}
+</style>

src/store.js

@@ -25,6 +25,7 @@ export default new Vuex.Store({
     direct_msg: "",
 
     headers: "iostream string",
+    usecurl: "off",
     templates: [
       {
         code: `#include <iostream>
@@ -37,7 +38,7 @@ int main(int argc, char *argv[])
 
 int main(int argc, char *argv[]) {
 
-  return 0:
+  return 0;
 }
       `,
       },
@@ -97,6 +98,9 @@ int main() {
     baseCanvasthis: this,
     ids: 0,
     cmOption: {
+      lineWrapping: true,
+      lineWrapping: true,
+      autofocus: true,
       lineNumbers: true,
       smartIndent: true,
       indentUnit: 2,
@@ -141,6 +145,9 @@ int main() {
         case "optimizar":
           state.optimizar = payload.data;
           break;
+        case "curl":
+          state.usecurl = payload.data;
+          break;
         case "flags":
           if (payload.data.includes("-")) {
             state.cxxflags = payload.data;
@@ -188,6 +195,7 @@ int main() {
      * @param source_code - the code to be compiled
      * @returns The return value is the response data from the server.
      */
+
     async compileCore(state, source_code) {
       const res = await axios.post(`${state.API}addon/compile`, source_code, {
         headers: {
@@ -199,6 +207,7 @@ int main() {
           o: state.optimizar,
           flags: state.cxxflags,
           data: state.inputData,
+          usecurl: state.usecurl
         },
       });
       state.temp = res.data;
@@ -642,5 +651,8 @@ int main() {
     mode(state) {
       return state.mode;
     },
+    bytheme(state){
+      return state.bytheme;
+    }
   },
 });