From 0368ba427885d0f999601a907ca3b99975a6f4ca Mon Sep 17 00:00:00 2001
From: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Date: Tue, 14 May 2024 16:23:07 +0200
Subject: [PATCH] Change editor layout (#8)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: bastien ollier <bastien.ollier@etu.uca.fr>
Co-authored-by: clfreville2 <clement.freville2@etu.uca.fr>
Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/8
Reviewed-by: Clément FRÉVILLE <clement.freville2@etu.uca.fr>
Co-authored-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
Co-committed-by: Bastien OLLIER <bastien.ollier@noreply.codefirst.iut.uca.fr>
---
 package-lock.json                             |   6 +-
 .../components/editor/editor.component.html   | 131 +++++++++++++-----
 .../components/editor/editor.component.scss   |  76 +++++++++-
 src/styles.scss                               |   9 ++
 4 files changed, 184 insertions(+), 38 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 869e044..46698d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -436,9 +436,9 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "17.1.1",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.1.1.tgz",
-      "integrity": "sha512-Q5qC6VUyT7N/hj8eETdh0bkmBmsXm0JZikhXdBvcDUl8yPbhMPKQCkx4UJzBrZJg/+78XyI9FI/q8w/yQAJZJA==",
+      "version": "17.3.8",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.8.tgz",
+      "integrity": "sha512-9UQovtq1R3iGppBP6c1xgnokhG3LaUObpm6htMyuQ2v034WinemoeMdHbqs/OvyUbqOUttQI/9vz37TVB0DjXA==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
diff --git a/src/app/components/editor/editor.component.html b/src/app/components/editor/editor.component.html
index 4ae2c11..df54939 100644
--- a/src/app/components/editor/editor.component.html
+++ b/src/app/components/editor/editor.component.html
@@ -1,40 +1,107 @@
-<div>
-  <div>
-    <codemirror6-editor
-      [(ngModel)]="editorContent"
-      [extensions]="extensions"></codemirror6-editor>
-  </div>
-
-  <pre [innerHTML]="resultContent | safeHTML"></pre>
+<div id="editor">
+  <div id="editor-bar-header">
+    <div class="editor-section-bar-header">
+      <div class="param-editor">
+        <label for="fileInput">
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M1 5C1 3.34315 2.34315 2 4 2H8.55848C9.84977 2 10.9962 2.82629 11.4045 4.05132L11.7208 5H20C21.1046 5 22 5.89543 22 7V9.00961C23.1475 9.12163 23.9808 10.196 23.7695 11.3578L22.1332 20.3578C21.9603 21.3087 21.132 22 20.1654 22H3C1.89543 22 1 21.1046 1 20V5ZM20 9V7H11.7208C10.8599 7 10.0956 6.44914 9.82339 5.63246L9.50716 4.68377C9.37105 4.27543 8.98891 4 8.55848 4H4C3.44772 4 3 4.44772 3 5V12.2709L3.35429 10.588C3.54913 9.66249 4.36562 9 5.31139 9H20ZM3.36634 20C3.41777 19.9109 3.4562 19.8122 3.47855 19.706L5.31139 11L21 11H21.8018L20.1654 20L3.36634 20Z"
+                fill="#000000"></path>
+            </g>
+          </svg>
+        </label>
+        <input
+          style="display: none"
+          type="file"
+          id="fileInput"
+          (change)="loadFromFile($event)" />
+      </div>
 
-  <div>
-    <label for="language">Langage de programmation</label>
-    <select id="language" [(ngModel)]="selectedLanguage">
-      @for (language of languages; track language.name) {
-        <option [ngValue]="language">{{ language.name }}</option>
+      <div class="param-editor">
+        <button class="button-icon" type="button" (click)="saveToFile()">
+          <svg
+            width="800px"
+            height="800px"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg">
+            <path
+              d="M3 15C3 17.8284 3 19.2426 3.87868 20.1213C4.75736 21 6.17157 21 9 21H15C17.8284 21 19.2426 21 20.1213 20.1213C21 19.2426 21 17.8284 21 15"
+              stroke="#1C274C"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+            <path
+              d="M12 3V16M12 16L16 11.625M12 16L8 11.625"
+              stroke="#1C274C"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round" />
+          </svg>
+        </button>
+      </div>
+    </div>
+    <div class="editor-section-bar-header">
+      @if (errorMessage) {
+        <div class="param-editor">
+          <p style="color: red">{{ errorMessage }}</p>
+        </div>
       }
-    </select>
-    <label for="showLines">Afficher les numéros de lignes</label>
-    <input type="checkbox" [(ngModel)]="linesNumbers" id="showLines" />
-  </div>
-
-  <div>
-    <button type="button" (click)="clear()">Remettre à zéro</button>
-  </div>
 
-  <button (click)="onRunButtonClicked()" [disabled]="isLoaded">Lancer</button>
+      <select id="language" [(ngModel)]="selectedLanguage">
+        @for (language of languages; track language.name) {
+          <option [ngValue]="language">{{ language.name }}</option>
+        }
+      </select>
 
-  <div>
-    <label for="fileInput">Charger à partir d'un fichier</label>
-    <input type="file" id="fileInput" (change)="loadFromFile($event)" />
+      <div class="param-editor">
+        <button
+          class="button-icon button-run"
+          type="button"
+          (click)="onRunButtonClicked()"
+          [disabled]="isLoaded">
+          <div>RUN</div>
+          <svg
+            viewBox="0 0 16 16"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="#000000">
+            <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+            <g
+              id="SVGRepo_tracerCarrier"
+              stroke-linecap="round"
+              stroke-linejoin="round"></g>
+            <g id="SVGRepo_iconCarrier">
+              <path
+                d="M2.78 2L2 2.41v12l.78.42 9-6V8l-9-6zM3 13.48V3.35l7.6 5.07L3 13.48z"></path>
+              <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M6 14.683l8.78-5.853V8L6 2.147V3.35l7.6 5.07L6 13.48v1.203z"></path>
+            </g>
+          </svg>
+        </button>
+      </div>
+    </div>
   </div>
 
-  <div>
-    <button type="button" (click)="saveToFile()">Sauvegarder</button>
-  </div>
-  @if (errorMessage) {
-    <div>
-      <p style="color: red">{{ errorMessage }}</p>
+  <div class="editor-center">
+    <div class="editor-child-element">
+      <codemirror6-editor [(ngModel)]="editorContent" [extensions]="extensions">
+      </codemirror6-editor>
     </div>
-  }
+    <div class="editor-child-element">
+      <pre id="resultDiv" [innerHTML]="resultContent | safeHTML"></pre>
+    </div>
+  </div>
 </div>
diff --git a/src/app/components/editor/editor.component.scss b/src/app/components/editor/editor.component.scss
index 4c38e51..0836334 100644
--- a/src/app/components/editor/editor.component.scss
+++ b/src/app/components/editor/editor.component.scss
@@ -1,4 +1,74 @@
-.ngx-codemirror {
-  border: 1px solid #060202;
-  padding-top: 10px;
+#editor-bar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  color: #fff;
+}
+
+.editor-section-bar-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.button-icon {
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+svg {
+  width: 30px;
+  height: auto;
+  aspect-ratio: 1;
+  cursor: pointer;
+}
+
+.button-run {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #04aa6d;
+  border: none;
+  color: white;
+  padding: 12px 16px;
+  font-size: 16px;
+  width: 100px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+select {
+  background-color: #0000f0;
+  border: none;
+  color: white;
+  padding: 12px 16px;
+  font-size: 16px;
+  cursor: pointer;
+  border-radius: 10px;
+}
+
+/*editor*/
+
+.editor-center {
+  height: 700px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0px 0px 0px 0px;
+}
+
+.editor-child-element {
+  min-height: 100px;
+  height: 100%;
+  width: 1000px;
+  background-color: black;
+  color: #fff;
+  border-right: 10px solid gray;
+}
+
+::ng-deep .codemirror6-editor {
+  height: 100%;
 }
diff --git a/src/styles.scss b/src/styles.scss
index d8fabd4..2279bae 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -17,3 +17,12 @@ body {
     overflow: hidden;
   }
 }
+
+html,
+body {
+  height: 100%;
+}
+body {
+  margin: 0;
+  font-family: Roboto, 'Helvetica Neue', sans-serif;
+}