chore: implemented quill in bottom tabs

Author: prince-deriv

build/cssmin.js

@@ -6,13 +6,13 @@ module.exports = {
         files: [
             {
                 src: [
-                    `${global.node_modules_paths.quill}/dist/assets/style.css`,
                     `${global.dist}/css/common.css`,
                     `${global.node_modules_paths.binary_style}/binary.css`,
                     `${global.node_modules_paths.binary_style}/binary.more.css`,
                 ],
                 dest: `${global.dist}/css/common.min.css`,
             },
+            { src: `${global.dist}/css/reset.css`,                              dest: `${global.dist}/css/reset.min.css` },
             { src: `${global.dist}/css/app.css`,                                dest: `${global.dist}/css/app.min.css` },
             { src: `${global.dist}/css/static.css`,                             dest: `${global.dist}/css/static.min.css` },
         ],

build/postcss.js

@@ -12,7 +12,7 @@ module.exports = function (grunt) {
             ],
         },
         dist: {
-            src: `${global.dist}/css/{app,common,static}.css`,
+            src: `${global.dist}/css/{app,common,static,reset}.css`,
         },
     };
 };

scripts/common.js

@@ -21,7 +21,7 @@ exports.sections_config = {
     '': { // '' is the default section when no 'section' specified in pages.js (to avoid adding 'app' as section for all)
         path     : '',
         js_files : ['vendor', 'binary'],
-        css_files: ['common.min', 'app.min', 'static.min'],
+        css_files: ['common.min', 'app.min', 'static.min','reset.min'],
         has_pjax : true,
     },
 };

scripts/render.js

@@ -32,9 +32,10 @@ const Crypto         = require('crypto');
 const fs             = require('fs');
 const Path           = require('path');
 const Url            = require('url');
-const common         = require('./common');
-const js_translation = require('./js_translation');
+const { Console } = require('console');
 const Gettext        = require('./gettext');
+const js_translation = require('./js_translation');
+const common         = require('./common');
 
 program
     .version('0.2.2')
@@ -336,6 +337,9 @@ const getFilteredPages = () => {
                 });
         }
 
+        console.log('Section');
+        console.log(sections);
+
         context_builder = await createContextBuilder(sections);
 
         await Promise.all(

src/javascript/app/pages/bottom/tabs.jsx

@@ -105,7 +105,7 @@ const TradingAnalysis = (() => {
 
             TabSelector.slideSelector(tab_selector_id, el_to_show);
             if (el_mobile_tab_header) {
-                el_mobile_tab_header.innerHTML = el_to_show.firstChild.innerHTML;
+                // el_mobile_tab_header.innerHTML = el_to_show.firstChild.innerHTML;
             }
         }
 

src/javascript/app/pages/trade/analysis.js

@@ -30,7 +30,7 @@ const WebtraderChart = (() => {
 
     const setChart = () => {
         const new_underlying = getElementById('underlying').value;
-        if ($('#tab_graph').hasClass('active') &&
+        if (
             (!chart || chart.data().instrumentCode !== new_underlying)
         ) {
             cleanupChart();

src/javascript/app/pages/trade/charts/webtrader_chart.js

@@ -3,6 +3,7 @@ const Symbols          = require('./symbols');
 const Tick             = require('./tick');
 const contractsElement = require('./contracts.jsx');
 const marketsElement   = require('./markets.jsx');
+const TabsElement      = require('../bottom/tabs.jsx');
 const formatMoney      = require('../../common/currency').formatMoney;
 const ActiveSymbols    = require('../../common/active_symbols');
 const elementInnerHtml = require('../../../_common/common_functions').elementInnerHtml;
@@ -58,6 +59,9 @@ const commonTrading = (() => {
 
     const displayMarkets = () => {
         marketsElement.init();
+
+        // All other Quill refactored components
+        TabsElement.init();
     };
 
     /*

src/javascript/app/pages/trade/common.js

@@ -194,11 +194,6 @@ button {
     vertical-align: top;
 }
 
-button:focus, input[type='submit']:focus {
-    background: $COLOR_GREEN;
-    outline: none;
-}
-
 button::-moz-focus-inner, input[type='submit']::-moz-focus-inner {
     border: 0;
 }
@@ -1119,3 +1114,5 @@ label + input {
         font-weight: bold !important;
     }
 }
+
+

src/sass/_common/common.scss

@@ -0,0 +1,19 @@
+.quill {
+    &-container {
+        &-centered {
+            width: 100%;
+            display: flex;
+            justify-content: center;
+        }
+    }
+}
+
+.tab-explanation {
+    h3 {
+       font-weight: 700; 
+    }
+}
+
+.explanation-container {
+    margin-block-end: 50px;
+}