Merge pull request #726 from plotly/sidebar

sidebar tweaks

Author: nicolaskruchten

src/DefaultEditor.js

@@ -71,15 +71,17 @@ class DefaultEditor extends Component {
     return (
       <PanelMenuWrapper>
         {logo ? logo : null}
-        <GraphCreatePanel group={_('Graph')} name={_('Create')} />
-        <GraphSubplotsPanel group={_('Graph')} name={_('Subplots')} />
-        {this.hasTransforms() && <GraphTransformsPanel group={_('Graph')} name={_('Transform')} />}
+        <GraphCreatePanel group={_('Structure')} name={_('Traces')} />
+        <GraphSubplotsPanel group={_('Structure')} name={_('Subplots')} />
+        {this.hasTransforms() && (
+          <GraphTransformsPanel group={_('Structure')} name={_('Transforms')} />
+        )}
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
         <StyleLayoutPanel group={_('Style')} name={_('Layout')} />
         {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
         <StyleLegendPanel group={_('Style')} name={_('Legend')} />
         {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}
-        <StyleNotesPanel group={_('Style')} name={_('Annotate')} />
+        <StyleNotesPanel group={_('Style')} name={_('Annotation')} />
         <StyleShapesPanel group={_('Style')} name={_('Shapes')} />
         <StyleImagesPanel group={_('Style')} name={_('Images')} />
         {this.hasSliders() && <StyleSlidersPanel group={_('Style')} name={_('Sliders')} />}

src/components/containers/TraceRequiredPanel.js

@@ -22,8 +22,8 @@ class TraceRequiredPanel extends Component {
       <PanelEmpty heading={_("Looks like there aren't any traces defined yet.")}>
         <p>
           {_('Go to the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Create')}>{_('Create')}</a>
-          {_(' panel to define traces.')}
+          <a onClick={() => this.context.setPanel('Structure', 'Traces')}>{_('Traces')}</a>
+          {_(' panel under Structure to define traces.')}
         </p>
       </PanelEmpty>
     );

src/components/fields/AxesCreator.js

@@ -152,7 +152,7 @@ class UnconnectedAxesCreator extends Component {
         {controls}
         <Info>
           {_('You can style and position your axes in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
+          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>

src/components/fields/SubplotCreator.js

@@ -133,7 +133,7 @@ class UnconnectedSubplotCreator extends Component {
         />
         <Info>
           {_('You can style and position your subplots in the ')}
-          <a onClick={() => this.context.setPanel('Graph', 'Subplots')}>{_('Subplots')}</a>
+          <a onClick={() => this.context.setPanel('Structure', 'Subplots')}>{_('Subplots')}</a>
           {_(' panel.')}
         </Info>
       </PlotlySection>

src/default_panels/GraphCreatePanel.js

@@ -67,21 +67,27 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
           'Note: in vertical orientation, X values are used for binning. If Y values are provided, they are used as inputs to the histogram function which you can configure in the '
         )}
         <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(' panel. If Y values are omitted, the histogram function defaults to Count.')}
+        {_(
+          ' panel under Style. If Y values are omitted, the histogram function defaults to Count.'
+        )}
       </HistogramInfoVertical>
       <HistogramInfoHorizontal>
         {_(
           'Note: in horizontal orientation, Y values are used for binning. If X values are provided, they are used as inputs to the histogram function which you can configure in the '
         )}
         <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(' panel. If X values are omitted, the histogram function defaults to Count.')}
+        {_(
+          ' under Style panel. If X values are omitted, the histogram function defaults to Count.'
+        )}
       </HistogramInfoHorizontal>
       <Histogram2d>
         {_(
           'Note: X and Y Values are used for binning. If Z values are provided, they are used as inputs to the histogram function which you can configure in the '
         )}
         <a onClick={() => setPanel('Style', 'Traces')}>{_('Traces')}</a>
-        {_(' panel. If Z values are omitted, the histogram function defaults to Count.')}
+        {_(
+          ' under Style panel. If Z values are omitted, the histogram function defaults to Count.'
+        )}
       </Histogram2d>
       <DataSelector label={_('I (Optional)')} attr="i" />
       <DataSelector label={_('J (Optional)')} attr="j" />

src/styles/components/sidebar/_main.scss

@@ -10,7 +10,7 @@
   float: left;
   border-right: var(--border-default);
   flex-grow: 1;
-  @include scrollbar();
+  @include scrollbar(0px);
 
   &__group {
     background-color: var(--sidebar-group-background-base);
@@ -102,8 +102,8 @@
     line-height: var(--font-size-medium);
     text-transform: capitalize;
     background-color: var(--sidebar-item-background-base);
-    padding: var(--spacing-half-unit);
-    padding-left: var(--spacing-base-unit);
+    padding: 10px;
+    padding-left: 16px;
     padding-right: var(--spacing-quarter-unit);
     text-align: left;
     border-bottom: var(--border-light);