Using font awesome for toolbar

uqbar-project · Oct 13, 2024 · fdd9dd4 · fdd9dd4
1 parent 936aa7b
commit fdd9dd4
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 13 deletions.
diff --git a/public/repl/open.png b/public/repl/open.png
diff --git a/public/repl/save.png b/public/repl/save.png
diff --git a/public/repl/synced.png b/public/repl/synced.png
diff --git a/public/repl/synced_1.png b/public/repl/synced_1.png
diff --git a/public/repl/unsynced.png b/public/repl/unsynced.png
diff --git a/public/repl/unsynced_1.png b/public/repl/unsynced_1.png
diff --git a/public/repl/zoom_in.png b/public/repl/zoom_in.png
diff --git a/public/repl/zoom_out.png b/public/repl/zoom_out.png
diff --git a/src/content/components/landing-page/repl/dynamicDiagram.html b/src/content/components/landing-page/repl/dynamicDiagram.html
@@ -18,6 +18,8 @@
         display: block;
         height: 30rem;
         width: 50vw;
+        resize: vertical;
+        overflow: auto;
       }
     </style>
   </head>

diff --git a/src/content/components/landing-page/repl/replEditor.html b/src/content/components/landing-page/repl/replEditor.html
@@ -3,6 +3,7 @@
 
 <head>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
   <style type="text/css" media="screen">
     .file {
       display: flex;
@@ -12,23 +13,29 @@
     #editor {
       padding: 0.5rem 0;
       z-index: 10;
+      resize: vertical;
+      overflow: auto;
     }
 
     .sl-markdown-content :not(a, strong, em, del, span, input, code)+ :not(a, strong, em, del, span, input, code, :where(.not-content *)) {
       margin-top: 0;
     }
 
     .menu_option {
-      color: black;
-      width: 25px;
-      height: 25px !important;
+      color: indianred;
       border-radius: 5px;
     }
 
+    .save {
+      color: steelblue;
+    }
+
+    .zoom {
+      color: var(--sl-color-banner-bg);
+    }
+
     .menu_option:hover {
       cursor: pointer;
-      box-shadow: 0 0 5px gray;
-      text-shadow: 0 0 5px gray;
     }
 
     .theme {
@@ -130,8 +137,12 @@
 
   <div class="file">
     <div class="toolbar">
-      <img class="menu_option" src="/repl/zoom_in.png" title="Agrandar la letra" onclick="zoomInFont()" />
-      <img class="menu_option" src="/repl/zoom_out.png" title="Achicar la letra" onclick="zoomOutFont()" />
+      <div class="menu_option zoom" title="Agrandar la letra" onclick="zoomInFont()">
+        <i class="fa-solid fa-font fa-xl"></i>
+      </div>
+      <div class="menu_option zoom" title="Achicar la letra" onclick="zoomOutFont()">
+        <i class="fa-solid fa-font fa-md"></i>
+      </div>
       <select id="theme" class="theme" onchange="changeTheme()" title="Cambiar tema del editor">
         <option value="ambiance">Ambiance</option>
         <option value="chaos">Chaos</option>
@@ -182,9 +193,13 @@
         <option value="vibrant_ink">Vibrant Ink</option>
         <option value="xcode">Xcode</option>
       </select>
-      <img class="menu_option" id="editor_synced"/>
-      <img class="menu_option" src="/repl/save.png" title="Guardar los cambios en el navegador" onclick="saveFile()" />
-      <img class="menu_option" src="/repl/open.png" title="Cargar un archivo Wollok" onclick="openFile()" />
+      <!-- triangle-exclamation -->
+      <div class="menu_option save" title="Guardar los cambios en el navegador" onclick="saveFile()">
+        <i class="fa-solid fa-download fa-xl"></i>
+      </div>
+      <div class="menu_option" title="Cargar un archivo Wollok" onclick="openFile()">
+        <i class="fa-solid fa-file-arrow-up fa-xl"></i>
+      </div>
     </div>
     <div id="editor" style="margin: 0.5rem; height: 35rem; border: 1px solid gray;"></div>
     <input type="file" id="customFile" name="customFile" accept=".wlk" style="display: none;" onchange="fileSelected()" />
@@ -314,9 +329,9 @@
     }
 
     const loadSyncedImage = () => {
-      const imgSynced = document.getElementById('editor_synced')
-      imgSynced.src = synced ? '/repl/synced.png' : '/repl/unsynced.png'
-      imgSynced.title = synced ? 'El editor está actualizado' : 'El editor tiene cambios pendientes sin guardar'
+      // const imgSynced = document.getElementById('editor_synced')
+      // imgSynced.src = synced ? '/repl/synced.png' : '/repl/unsynced.png'
+      // imgSynced.title = synced ? 'El editor está actualizado' : 'El editor tiene cambios pendientes sin guardar'
     }
 
     let editor = ace.edit("editor")