Add book double view for large displays. Prettify.

RoboSats · Sep 28, 2022 · 344ba2a · 344ba2a
1 parent 7b8fcb3
commit 344ba2a
Show file tree

Hide file tree

Showing 14 changed files with 221 additions and 161 deletions.
diff --git a/frontend/src/components/BookPage.js b/frontend/src/components/BookPage.js
@@ -107,43 +107,90 @@ class BookPage extends Component {
     );
   };
 
-  mainView = () => {
+  mainView = (doubleView, widthEm, heightEm) => {
     if (this.props.bookNotFound) {
       return this.NoOrdersFound();
     }
 
-    if (this.state.view === 'depth') {
+    if (doubleView) {
+      const width = widthEm * 0.9;
+      const bookTableWidth = 85;
+      const chartWidthEm = width - bookTableWidth;
+      const tableWidthXS = (bookTableWidth / width) * 12;
+      const chartWidthXS = (chartWidthEm / width) * 12;
+      console.log(bookTableWidth, chartWidthEm, tableWidthXS, chartWidthXS);
       return (
-        <DepthChart
-          bookLoading={this.props.bookLoading}
-          orders={this.props.bookOrders}
-          lastDayPremium={this.props.lastDayPremium}
-          currency={this.props.currency}
-          compact={true}
-          setAppState={this.props.setAppState}
-          limits={this.props.limits}
-          maxWidth={(this.props.windowWidth / this.props.theme.typography.fontSize) * 0.8} // EM units
-          maxHeight={(this.props.windowHeight / this.props.theme.typography.fontSize) * 0.8 - 11} // EM units
-        />
+        <Grid
+          container
+          alignItems='center'
+          justifyContent='flex-start'
+          spacing={1}
+          direction='row'
+          style={{ width: `${widthEm}em`, position: 'relative', left: `${widthEm / 140}em` }}
+        >
+          <Grid item xs={tableWidthXS} style={{ width: `${bookTableWidth}em` }}>
+            <BookTable
+              loading={this.props.bookLoading}
+              orders={this.props.bookOrders}
+              type={this.props.type}
+              currency={this.props.currency}
+              maxWidth={bookTableWidth} // EM units
+              maxHeight={heightEm * 0.8 - 11} // EM units
+            />
+          </Grid>
+          <Grid
+            item
+            xs={chartWidthXS}
+            style={{ width: `${chartWidthEm}em`, position: 'relative', left: '-10em' }}
+          >
+            <DepthChart
+              bookLoading={this.props.bookLoading}
+              orders={this.props.bookOrders}
+              lastDayPremium={this.props.lastDayPremium}
+              currency={this.props.currency}
+              compact={true}
+              setAppState={this.props.setAppState}
+              limits={this.props.limits}
+              maxWidth={chartWidthEm} // EM units
+              maxHeight={heightEm * 0.8 - 11} // EM units
+            />
+          </Grid>
+        </Grid>
       );
     } else {
-      return (
-        <BookTable
-          loading={this.props.bookLoading}
-          orders={this.props.bookOrders}
-          type={this.props.type}
-          currency={this.props.currency}
-          maxWidth={(this.props.windowWidth / this.props.theme.typography.fontSize) * 0.97} // EM units
-          maxHeight={(this.props.windowHeight / this.props.theme.typography.fontSize) * 0.8 - 11} // EM units
-        />
-      );
+      if (this.state.view === 'depth') {
+        return (
+          <DepthChart
+            bookLoading={this.props.bookLoading}
+            orders={this.props.bookOrders}
+            lastDayPremium={this.props.lastDayPremium}
+            currency={this.props.currency}
+            compact={true}
+            setAppState={this.props.setAppState}
+            limits={this.props.limits}
+            maxWidth={widthEm * 0.8} // EM units
+            maxHeight={heightEm * 0.8 - 11} // EM units
+          />
+        );
+      } else {
+        return (
+          <BookTable
+            loading={this.props.bookLoading}
+            orders={this.props.bookOrders}
+            type={this.props.type}
+            currency={this.props.currency}
+            maxWidth={widthEm * 0.97} // EM units
+            maxHeight={heightEm * 0.8 - 11} // EM units
+          />
+        );
+      }
     }
   };
 
-  getTitle = () => {
+  getTitle = (doubleView) => {
     const { t } = this.props;
 
-    if (this.state.view == 'list') {
+    if (this.state.view == 'list' || doubleView) {
       if (this.props.type == 0) {
         return t('You are SELLING BTC for {{currencyCode}}', {
           currencyCode: this.props.bookCurrencyCode,
@@ -160,10 +207,10 @@ class BookPage extends Component {
     }
   };
 
-  render() {
+  mainFilters = () => {
     const { t } = this.props;
     return (
-      <Grid className='orderBook' container spacing={1} sx={{ minWidth: 400 }}>
+      <>
         <IconButton
           sx={{ position: 'fixed', right: '0px', top: '30px' }}
           onClick={() => this.setState({ loading: true }) & this.getOrderDetails()}
@@ -235,13 +282,26 @@ class BookPage extends Component {
             </Select>
           </FormControl>
         </Grid>
+      </>
+    );
+  };
+
+  render() {
+    const { t } = this.props;
+    const widthEm = this.props.windowWidth / this.props.theme.typography.fontSize;
+    const heightEm = this.props.windowHeight / this.props.theme.typography.fontSize;
+    const doubleView = widthEm > 115;
+
+    return (
+      <Grid className='orderBook' container spacing={1} sx={{ minWidth: 400 }}>
+        {this.mainFilters()}
         <Grid item xs={12} align='center'>
           <Typography component='h5' variant='h5'>
-            {this.getTitle()}
+            {this.getTitle(doubleView)}
           </Typography>
         </Grid>
         <Grid item xs={12} align='center'>
-          {this.mainView()}
+          {this.mainView(doubleView, widthEm, heightEm)}
         </Grid>
         <Grid item xs={12} align='center'>
           <ButtonGroup variant='contained' aria-label='outlined primary button group'>
@@ -250,17 +310,23 @@ class BookPage extends Component {
                 <Button variant='contained' color='primary' to='/make/' component={Link}>
                   {t('Make Order')}
                 </Button>
-                <Button color='inherit' style={{ color: '#111111' }} onClick={this.handleClickView}>
-                  {this.state.view == 'depth' ? (
-                    <>
-                      <FormatListBulleted /> {t('List')}
-                    </>
-                  ) : (
-                    <>
-                      <BarChart /> {t('Chart')}
-                    </>
-                  )}
-                </Button>
+                {doubleView ? null : (
+                  <Button
+                    color='inherit'
+                    style={{ color: '#111111' }}
+                    onClick={this.handleClickView}
+                  >
+                    {this.state.view == 'depth' ? (
+                      <>
+                        <FormatListBulleted /> {t('List')}
+                      </>
+                    ) : (
+                      <>
+                        <BarChart /> {t('Chart')}
+                      </>
+                    )}
+                  </Button>
+                )}
               </>
             ) : null}
             <Button color='secondary' variant='contained' to='/' component={Link}>

diff --git a/frontend/src/components/BottomBar.js b/frontend/src/components/BottomBar.js
@@ -171,12 +171,10 @@ class BottomBar extends Component {
 
   showProfileButton = () => {
     return (
-      this.props.avatarLoaded && (
-        window.NativeRobosats || (
-          (this.props.token ? getCookie('robot_token') === this.props.token : true) &&
-          getCookie('sessionid')
-        )
-      )
+      this.props.avatarLoaded &&
+      (window.NativeRobosats ||
+        ((this.props.token ? getCookie('robot_token') === this.props.token : true) &&
+          getCookie('sessionid')))
     );
   };
 

diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { HashRouter, BrowserRouter , Switch, Route } from 'react-router-dom';
+import { HashRouter, BrowserRouter, Switch, Route } from 'react-router-dom';
 
 import UserGenPage from './UserGenPage';
 import MakerPage from './MakerPage';
@@ -59,16 +59,16 @@ export default class HomePage extends Component {
   getBasename() {
     if (window.NativeRobosats) {
       // Only for Android
-      return window.location.pathname
+      return window.location.pathname;
     }
 
-    return ""
+    return '';
   }
 
   render() {
     const fontSize = this.props.theme.typography.fontSize;
     const fontSizeFactor = fontSize / 14; // default fontSize is 14
-    const Router = window.NativeRobosats ? HashRouter : BrowserRouter
+    const Router = window.NativeRobosats ? HashRouter : BrowserRouter;
 
     return (
       <Router basename={this.getBasename()}>

diff --git a/frontend/src/components/Robots/RobotAvatar/index.tsx b/frontend/src/components/Robots/RobotAvatar/index.tsx
@@ -30,13 +30,13 @@ const RobotAvatar: React.FC<Props> = ({
 }) => {
   const { t } = useTranslation();
 
-  const [avatarSrc, setAvatarSrc] = useState<string>()
+  const [avatarSrc, setAvatarSrc] = useState<string>();
 
   useEffect(() => {
     if (nickname) {
-      apiClient.fileImageUrl('/static/assets/avatars/' + nickname + '.png').then(setAvatarSrc)
+      apiClient.fileImageUrl('/static/assets/avatars/' + nickname + '.png').then(setAvatarSrc);
     }
-  }, [nickname])
+  }, [nickname]);
 
   const statusBadge = (
     <div style={{ position: 'relative', left: '6px', top: '1px' }}>

diff --git a/frontend/src/components/UserGenPage.js b/frontend/src/components/UserGenPage.js
@@ -296,10 +296,9 @@ class UserGenPage extends Component {
                             <IconButton
                               color='primary'
                               disabled={
-                                !this.props.avatarLoaded || (
-                                  !window.NativeRobosats && 
-                                  !(getCookie('robot_token') === this.state.token)
-                                )
+                                !this.props.avatarLoaded ||
+                                (!window.NativeRobosats &&
+                                  !(getCookie('robot_token') === this.state.token))
                               }
                               onClick={() =>
                                 saveAsJson(this.state.nickname + '.json', this.createJsonFile())
@@ -317,10 +316,9 @@ class UserGenPage extends Component {
                           <IconButton
                             color={this.props.copiedToken ? 'inherit' : 'primary'}
                             disabled={
-                              !this.props.avatarLoaded || (
-                                !window.NativeRobosats && 
-                                !(getCookie('robot_token') === this.state.token)
-                              )
+                              !this.props.avatarLoaded ||
+                              (!window.NativeRobosats &&
+                                !(getCookie('robot_token') === this.state.token))
                             }
                             onClick={() =>
                               copyToClipboard(getCookie('robot_token')) &
@@ -375,10 +373,9 @@ class UserGenPage extends Component {
           <ButtonGroup variant='contained' aria-label='outlined primary button group'>
             <Button
               disabled={
-                this.state.loadingRobot !== false || (
-                  !window.NativeRobosats &&
-                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
-                )
+                this.state.loadingRobot !== false ||
+                (!window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true))
               }
               color='primary'
               to='/make/'
@@ -396,10 +393,9 @@ class UserGenPage extends Component {
             />
             <Button
               disabled={
-                this.state.loadingRobot !== false || (
-                  !window.NativeRobosats &&
-                  !(this.props.token ? getCookie('robot_token') === this.props.token : true)
-                )
+                this.state.loadingRobot !== false ||
+                (!window.NativeRobosats &&
+                  !(this.props.token ? getCookie('robot_token') === this.props.token : true))
               }
               color='secondary'
               to='/book/'

diff --git a/frontend/src/components/i18n.Native.js b/frontend/src/components/i18n.Native.js
@@ -3,29 +3,29 @@ import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import HttpApi from 'i18next-http-backend';
 
-import translationEN from "../../static/locales/en.json";
-import translationES from "../../static/locales/es.json";
-import translationDE from "../../static/locales/de.json";
-import translationRU from "../../static/locales/ru.json";
-import translationPL from "../../static/locales/pl.json";
-import translationFR from "../../static/locales/fr.json";
-import translationCA from "../../static/locales/ca.json";
-import translationIT from "../../static/locales/it.json";
-import translationPT from "../../static/locales/pt.json";
-import translationEU from "../../static/locales/th.json";
+import translationEN from '../../static/locales/en.json';
+import translationES from '../../static/locales/es.json';
+import translationDE from '../../static/locales/de.json';
+import translationRU from '../../static/locales/ru.json';
+import translationPL from '../../static/locales/pl.json';
+import translationFR from '../../static/locales/fr.json';
+import translationCA from '../../static/locales/ca.json';
+import translationIT from '../../static/locales/it.json';
+import translationPT from '../../static/locales/pt.json';
+import translationEU from '../../static/locales/th.json';
 
 const config = {
   resources: {
-    en: {translations: translationEN},
-    es: {translations: translationES},
-    ru: {translations: translationRU},
-    de: {translations: translationDE},
-    pl: {translations: translationPL},
-    fr: {translations: translationFR},
-    ca: {translations: translationCA},
-    it: {translations: translationIT},
-    pt: {translations: translationPT},
-    eu: {translations: translationEU},
+    en: { translations: translationEN },
+    es: { translations: translationES },
+    ru: { translations: translationRU },
+    de: { translations: translationDE },
+    pl: { translations: translationPL },
+    fr: { translations: translationFR },
+    ca: { translations: translationCA },
+    it: { translations: translationIT },
+    pt: { translations: translationPT },
+    eu: { translations: translationEU },
   },
   fallbackLng: 'en',
   debug: false,
@@ -40,13 +40,8 @@ const config = {
   react: {
     useSuspense: false,
   },
-}
+};
 
-
-i18n
-  .use(HttpApi)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init(config);
+i18n.use(HttpApi).use(LanguageDetector).use(initReactI18next).init(config);
 
 export default i18n;
diff --git a/frontend/src/components/i18n.js b/frontend/src/components/i18n.js
@@ -26,13 +26,8 @@ const config = {
   react: {
     useSuspense: false,
   },
-}
+};
 
-
-i18n
-  .use(HttpApi)
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init(config);
+i18n.use(HttpApi).use(LanguageDetector).use(initReactI18next).init(config);
 
 export default i18n;