From 651f920d27194d52d7227e48fe1821141d80d314 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Tue, 30 Apr 2019 11:16:42 +0200
Subject: [PATCH] [IMP] playground: use fontawesome for icons

closes #68
---
 playground/index.html     |  2 ++
 playground/playground.css | 12 +++---------
 playground/templates.xml  |  4 ++--
 3 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/playground/index.html b/playground/index.html
index b4b33421..1009a642 100644
--- a/playground/index.html
+++ b/playground/index.html
@@ -7,6 +7,8 @@
 
     <script src="../libs/ace.js" type="text/javascript" charset="utf-8"></script>
     <script src="../libs/owl.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/solid.css" integrity="sha384-QokYePQSOwpBDuhlHOsX0ymF6R/vLk/UQVz3WHa6wygxI5oGTmDTv8wahFOSspdm" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/fontawesome.css" integrity="sha384-vd1e11sR28tEK9YANUtpIOdjGW14pS87bUBuOIoBILVWLFnS+MCX9T6MMf0VdPGq" crossorigin="anonymous">
 
     <!-- Application JS/CSS -->
     <link rel="stylesheet" href="playground.css">
diff --git a/playground/playground.css b/playground/playground.css
index e54ecb41..f5368101 100644
--- a/playground/playground.css
+++ b/playground/playground.css
@@ -48,7 +48,7 @@ body {
 }
 
 .menubar select {
-  margin-right: 15px;
+  margin: 10px;
   font-size: 16px;
   height: 25px;
 }
@@ -76,17 +76,11 @@ body {
 }
 
 .layout-selector {
-  font-size: 33px;
   cursor: pointer;
-  color: #cccccc;
-  transform: rotate(90deg);
-  padding: 0 5px;
+  padding: 5px;
+  margin: 5px;
 }
 
-.layout-selector.active {
-  font-weight: bold;
-  color: white;
-}
 /* TABBED EDITOR ****************************************/
 
 .tabbed-editor {
diff --git a/playground/templates.xml b/playground/templates.xml
index 352329af..30f5b6c1 100644
--- a/playground/templates.xml
+++ b/playground/templates.xml
@@ -17,8 +17,8 @@
               <t t-esc="sample.description"/>
             </option>
           </select>
-          <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code">↓</a>
-          <a class="layout-selector flash" t-att-class="{active:state.splitLayout}" t-on-click="toggleLayout" title="Toggle Layout">◫</a>
+          <a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"><i class="fas fa-download"></i></a>
+          <a class="layout-selector flash" t-on-click="toggleLayout" title="Toggle Layout"><i class="fas"  t-att-class="state.splitLayout ?  'fa-toggle-on' : 'fa-toggle-off'"></i></a>
         </div>
         <t t-if="!state.splitLayout">
           <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>