Merge pull request #6683 from ian-r-rose/alignment-tweaks

Center plugin listing alignment.
jupyterlab · Jun 21, 2019 · 2618a9a · 2618a9a
2 parents a8e4af9 + 897878f
commit 2618a9a
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 18 deletions.
diff --git a/packages/notebook/src/truststatus.tsx b/packages/notebook/src/truststatus.tsx
@@ -51,7 +51,7 @@ function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
   const source = cellTrust(props)[1];
-  return <IconItem source={source} offset={{ x: 0, y: 2 }} />;
+  return <IconItem source={source} />;
 }
 
 /**

diff --git a/packages/settingeditor/style/base.css b/packages/settingeditor/style/base.css
@@ -81,9 +81,11 @@
 }
 
 #setting-editor .jp-PluginList li {
+  display: flex;
+  flex-direction: row;
   border: 1px solid transparent;
   overflow: hidden;
-  padding: 2px 0 5px 5px;
+  padding: 4px 0 4px 4px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -112,7 +114,6 @@
   width: 20px;
   margin-right: 3px;
   position: relative;
-  top: 3px;
 }
 
 #setting-editor .jp-SettingsRawEditor .jp-Toolbar {

diff --git a/packages/statusbar/src/components/icon.tsx b/packages/statusbar/src/components/icon.tsx
@@ -26,16 +26,10 @@ export namespace IconItem {
  * A functional tsx component for an icon.
  */
 export function IconItem(
-  props: IconItem.IProps &
-    React.HTMLAttributes<HTMLDivElement> & {
-      offset: { x: number; y: number };
-    }
+  props: IconItem.IProps & React.HTMLAttributes<HTMLDivElement>
 ): React.ReactElement<IconItem.IProps> {
-  const { source, className, offset, ...rest } = props;
+  const { source, className, ...rest } = props;
   return (
-    <div
-      className={classes(className, source, style(icon(offset)))}
-      {...rest}
-    />
+    <div className={classes(className, source, style(icon()))} {...rest} />
   );
 }
diff --git a/packages/statusbar/src/defaults/runningSessions.tsx b/packages/statusbar/src/defaults/runningSessions.tsx
@@ -34,11 +34,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
+        <IconItem source={'jp-StatusItem-terminal'} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <IconItem source={'jp-StatusItem-kernel'} offset={{ x: 0, y: 2 }} />
+        <IconItem source={'jp-StatusItem-kernel'} />
       </GroupItem>
     </GroupItem>
   );

diff --git a/packages/statusbar/src/style/icon.ts b/packages/statusbar/src/style/icon.ts
@@ -4,12 +4,11 @@
 import vars from './variables';
 import { NestedCSSProperties } from 'typestyle/lib/types';
 
-export default ({ x, y }: { x: number; y: number }): NestedCSSProperties => {
+export default (): NestedCSSProperties => {
   return {
     backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
     backgroundSize: vars.iconImageSize,
-    backgroundPositionY: y !== 0 ? `${y}px` : undefined,
-    backgroundPositionX: x !== 0 ? `${x}px` : undefined,
     minHeight: vars.height,
     width: vars.iconWidth
   };

diff --git a/packages/statusbar/src/style/text.ts b/packages/statusbar/src/style/text.ts
@@ -11,6 +11,6 @@ export const baseText: NestedCSSProperties = {
 };
 
 export const textItem = style(baseText, {
-  lineHeight: '26px',
+  lineHeight: '24px',
   color: vars.textColor
 });