chore: implemented quill in bottom tabs

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/trade/analysis.js

@@ -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/charts/webtrader_chart.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/common.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/sass/_common/common.scss

@@ -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/reskin.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;
+}

src/sass/common.scss

@@ -23,3 +23,4 @@
 @import '_common/external/grid'; /* grid layout system */
 @import '_common/external/mmenu/jquery.mmenu.all';
 @import '_common/external/third-party';
+@import '_common/reskin.scss'

src/sass/reset.scss

@@ -0,0 +1,5 @@
+
+/* Style Resets */
+button {
+    background: initial;
+}

src/templates/app/trade/analysis.jsx

@@ -15,43 +15,7 @@ const ArrowsMobile = ({ direction, parent }) => (
 
 const Analysis = ({ no_graph }) => (
     <div id='trading_bottom_content'>
-        <TabContainer className='gr-padding-30 gr-parent full-width' theme='light'>
-            <div className='gr-row'>
-                <ArrowsMobile parent='trade_analysis' direction='left' />
-                <strong id='tab_mobile_header' className='align-self-center gr-hide gr-show-m' />
-                <ArrowsMobile parent='trade_analysis' direction='right' />
-            </div>
-            <TabsSubtabs
-                id='trade_analysis'
-                className='gr-padding-20 gr-parent tab-selector-wrapper'
-                items={[
-                    { id: 'tab_graph',        disabled: no_graph, text: it.L('Chart') },
-                    { id: 'tab_explanation',  text: it.L('Explanation') },
-                    { id: 'tab_last_digit',   className: 'invisible', text: it.L('Last Digit Stats') },
-                    { id: 'trade_analysis_selector', className: 'tab-selector' },
-                ]}
-            />
-            <div className='tab-content'>
-                <TabContentContainer id='analysis_content'>
-                    { !no_graph &&
-                    <TabContent id='tab_graph'>
-                        <p className='error-msg' id='chart-error' />
-                        <div id='trade_live_chart'>
-                            <div id='webtrader_chart' />
-                        </div>
-                    </TabContent>
-                    }
-
-                    <TabContent id='tab_explanation' className='selectedTab'>
-                        <Explanation />
-                    </TabContent>
-
-                    <TabContent id='tab_last_digit'>
-                        <LastDigit />
-                    </TabContent>
-                </TabContentContainer>
-            </div>
-        </TabContainer>
+        <div id='trading_bottom_content_tabs' />
     </div>
 );