Commit f6220d8a authored by Kevin Di Lallo's avatar Kevin Di Lallo
Browse files

fixed frontend top bar alignment

parent ea953ebd

js-apps/meep-frontend/src/js/components/meep-top-bar.js

+110 −122
Original line number Diff line number Diff line
@@ -21,7 +21,6 @@ import { connect } from 'react-redux'; 


import { Toolbar, ToolbarRow, ToolbarSection } from '@rmwc/toolbar';

import { Elevation } from '@rmwc/elevation';

import { Grid, GridCell } from '@rmwc/grid';

import { TabBar, Tab } from '@rmwc/tabs';

import { Typography } from '@rmwc/typography';

import { Button } from '@rmwc/button';
@@ -134,6 +133,7 @@ class MeepTopBar extends Component { 
          <Elevation z={2}>

            <ToolbarRow>

              <ToolbarSection alignStart style={{display:'contents'}}>

                <div style={styles.flex}>

                  <img

                    id='idcc-logo'

                    className='idcc-toolbar-menu mdc-top-app-bar__navigation-icon'
@@ -141,61 +141,50 @@ class MeepTopBar extends Component { 
                    alt=''

                    onClick={() => this.handleItemClick(PAGE_HOME, PAGE_HOME_INDEX)}

                  />



                  <img id='AdvantEdgeLogo' height={50} src={this.advantEdge} alt='' />

                <Grid>

                  <GridCell span="12">



                  <TabBar

                    className='menu-tabs'

                    activeTabIndex={this.props.activeTabIndex}

                    onActivate={evt => this.props.changeTabIndex(evt.detail.index)}

                  >

                      <GridCell span="2">

                    <Tab

                      data-cy={MEEP_TAB_HOME}

                          style={styles.mdcTab}

                      label="Home"

                      onClick={() => { this.handleItemClick(PAGE_HOME, PAGE_HOME_INDEX); }}

                    />

                      </GridCell>

                      <GridCell span="2" style={{visibility:hideTabs?'hidden':null}}>

                    <Tab

                      hidden={hideTabs}

                      data-cy={MEEP_TAB_CFG}

                          style={styles.mdcTab}

                      style={{visibility:hideTabs?'hidden':null}}

                      label="Configure"

                      onClick={() => { this.handleItemClick(PAGE_CONFIGURE, PAGE_CONFIGURE_INDEX); }}

                    />

                      </GridCell>

                      <GridCell span="2" style={{visibility:hideTabs?'hidden':null}}>

                    <Tab

                      data-cy={MEEP_TAB_EXEC}

                          style={styles.mdcTab}

                      style={{visibility:hideTabs?'hidden':null}}

                      label="Execute"

                      onClick={() => { this.handleItemClick(PAGE_EXECUTE, PAGE_EXECUTE_INDEX); }}

                    />

                      </GridCell>

                      <GridCell span="2" style={{visibility:hideTabs?'hidden':null}}>

                    <Tab

                      data-cy={MEEP_TAB_MON}

                          style={styles.mdcTab}

                      style={{visibility:hideTabs?'hidden':null}}

                      label="Monitor"

                      onClick={() => { this.handleItemClick(PAGE_MONITOR, PAGE_MONITOR_INDEX); }}

                    />

                      </GridCell>

                      <GridCell span="2" style={{visibility:hideTabs?'hidden':null}}>

                    <Tab

                      data-cy={MEEP_TAB_SET}

                          style={styles.mdcTab}

                      style={{visibility:hideTabs?'hidden':null}}

                      label="Settings"

                      onClick={() => { this.handleItemClick(PAGE_SETTINGS, PAGE_SETTINGS_INDEX); }}

                    />

                      </GridCell>

                  </TabBar>

                  </GridCell>

                </Grid>

                </div>

              </ToolbarSection>



              <ToolbarSection alignEnd>

                <div style={styles.flex}>

                  <Button

                    style={{ marginLeft: 10 }}

                    onClick={() => {
@@ -245,7 +234,6 @@ class MeepTopBar extends Component { 
                      />

                    </MenuSurfaceAnchor>

                    : null

                  

                  }



                  { this.props.signInStatus === STATUS_SIGNED_OUT ?
@@ -257,7 +245,7 @@ class MeepTopBar extends Component { 
                    </Button>

                    : null 

                  } 



                </div>

              </ToolbarSection>

            </ToolbarRow>

          </Elevation>
@@ -268,10 +256,6 @@ class MeepTopBar extends Component { 
}



const styles = {

  mdcTab: {

    fontSize: 15,

    fontFamily: 'Roboto'

  },

  helpIcon: {

    color: '#ffffff'

  },
@@ -281,11 +265,15 @@ const styles = { 
    marginRight: 10

  },

  btnSignin: {

    marginTop: 6,

    marginBottom: 6,

    color: 'white',

    border: 'none',

    borderRadius: 0

  },

  flex: {

    display: 'flex',

    justifyContent: 'center',

    alignItems: 'center',

    height: 48

  }

};