[IMP] playground: use fontawesome for icons

closes #68
This commit is contained in:
Géry Debongnie
2019-04-30 11:16:42 +02:00
parent 9cc1dd0524
commit 651f920d27
3 changed files with 7 additions and 11 deletions
+2
View File
@@ -7,6 +7,8 @@
<script src="../libs/ace.js" type="text/javascript" charset="utf-8"></script> <script src="../libs/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../libs/owl.js"></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 --> <!-- Application JS/CSS -->
<link rel="stylesheet" href="playground.css"> <link rel="stylesheet" href="playground.css">
+3 -9
View File
@@ -48,7 +48,7 @@ body {
} }
.menubar select { .menubar select {
margin-right: 15px; margin: 10px;
font-size: 16px; font-size: 16px;
height: 25px; height: 25px;
} }
@@ -76,17 +76,11 @@ body {
} }
.layout-selector { .layout-selector {
font-size: 33px;
cursor: pointer; cursor: pointer;
color: #cccccc; padding: 5px;
transform: rotate(90deg); margin: 5px;
padding: 0 5px;
} }
.layout-selector.active {
font-weight: bold;
color: white;
}
/* TABBED EDITOR ****************************************/ /* TABBED EDITOR ****************************************/
.tabbed-editor { .tabbed-editor {
+2 -2
View File
@@ -17,8 +17,8 @@
<t t-esc="sample.description"/> <t t-esc="sample.description"/>
</option> </option>
</select> </select>
<a class="btn flash" t-on-click="downloadCode" title="Download a Zip with this Code"></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-att-class="{active:state.splitLayout}" t-on-click="toggleLayout" title="Toggle Layout"></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> </div>
<t t-if="!state.splitLayout"> <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"/> <t t-widget="TabbedEditor" t-props="{js:state.js, css:state.css, xml: state.xml, display: 'js|xml|css'}" t-on-updateCode="updateCode"/>