some tweaks to css, diagnostic icon

Author: bollwyvl

packages/jupyterlab-lsp/src/adapters/codemirror/features/diagnostics.ts

@@ -11,7 +11,8 @@ import {
   DIAGNOSTICS_LISTING_CLASS,
   DiagnosticsDatabase,
   DiagnosticsListing,
-  IEditorDiagnostic
+  IEditorDiagnostic,
+  diagnosticsIcon
 } from './diagnostics_listing';
 import { VirtualDocument } from '../../../virtual/document';
 import { VirtualEditor } from '../../../virtual/editor';
@@ -46,6 +47,7 @@ class DiagnosticsPanel {
     widget.id = 'lsp-diagnostics-panel';
     widget.title.label = 'Diagnostics Panel';
     widget.title.closable = true;
+    widget.title.icon = diagnosticsIcon;
     return widget;
   }
 

packages/jupyterlab-lsp/src/adapters/codemirror/features/diagnostics_listing.tsx

@@ -1,6 +1,6 @@
 import React, { ReactElement } from 'react';
 import { VDomModel, VDomRenderer } from '@jupyterlab/apputils';
-import { caretDownIcon, caretUpIcon } from '@jupyterlab/ui-components';
+import { caretDownIcon, caretUpIcon, LabIcon } from '@jupyterlab/ui-components';
 import * as lsProtocol from 'vscode-languageserver-protocol';
 import * as CodeMirror from 'codemirror';
 import { IEditorPosition } from '../../../positioning';
@@ -13,6 +13,13 @@ import { Cell } from '@jupyterlab/cells';
 import { diagnosticSeverityNames } from '../../../lsp';
 import { message_without_code } from './diagnostics';
 
+import diagnosticsSvg from '../../../../style/icons/diagnostics.svg';
+
+export const diagnosticsIcon = new LabIcon({
+  name: 'lsp:diagnostics',
+  svgstr: diagnosticsSvg
+});
+
 /**
  * Diagnostic which is localized at a specific editor (cell) within a notebook
  * (if used in the context of a FileEditor, then there is just a single editor)
@@ -163,17 +170,19 @@ class Column {
 function SortableTH(props: { name: string; listing: DiagnosticsListing }): any {
   const is_sort_key = props.name === props.listing.sort_key;
   const sortIcon =
-    props.listing.sort_direction === 1 ? caretUpIcon : caretDownIcon;
+    !is_sort_key || props.listing.sort_direction === 1
+      ? caretUpIcon
+      : caretDownIcon;
   return (
     <th
       key={props.name}
       onClick={() => props.listing.sort(props.name)}
       className={is_sort_key ? 'lsp-sorted-header' : null}
     >
-      {props.name}
-      {is_sort_key ? (
+      <div>
+        <label>{props.name}</label>
         <sortIcon.react tag="span" className="lsp-sort-icon" />
-      ) : null}
+      </div>
     </th>
   );
 }

packages/jupyterlab-lsp/src/typings.d.ts

@@ -2,3 +2,8 @@
 // Distributed under the terms of the Modified BSD License.
 
 /// <reference path="../typings/codemirror/codemirror.d.ts"/>
+
+declare module '*.svg' {
+  const script: string;
+  export default script;
+}

packages/jupyterlab-lsp/style/diagnostics_listing.css

@@ -19,8 +19,13 @@
   overflow-x: hidden;
 }
 
+.lsp-diagnostics-listing th,
+.lsp-diagnostics-listing td {
+  padding: 4px 12px 2px 12px;
+  height: 18px;
+}
+
 .lsp-diagnostics-listing th {
-  padding: 4px 12px;
   font-weight: 500;
   text-align: left;
   border-bottom: var(--jp-border-width) solid var(--jp-border-color1);
@@ -44,38 +49,35 @@
   content: ' > ';
 }
 
-.lsp-diagnostics-listing td:first-child,
-.lsp-diagnostics-listing td:last-child {
-  padding: 4px 12px;
-}
-
-.lsp-diagnostics-listing tbody td:not(:first-child):not(:last-child) {
-  padding: 4px 2px;
-}
-
 .lsp-diagnostics-listing tbody tr:hover {
   background: var(--jp-layout-color2);
 }
 
-.lsp-sorted-header {
-  flex: 0 0 auto;
-  display: flex;
+.lsp-diagnostics-listing thead th > div {
   flex-direction: row;
-  overflow: hidden;
+  display: flex;
+}
+
+.lsp-diagnostics-listing thead th > div > label {
+  flex: 1;
+  text-overflow: ellipsis;
 }
 
 .lsp-sort-icon {
-  top: -3px;
-  left: 3px;
-  position: relative;
-  height: 16px;
-  width: 16px;
-  display: block;
-  margin-left: auto;
+  flex: 0;
+  height: var(--jp-ui-font-size1);
+  width: var(--jp-ui-font-size1);
 }
 
 .lsp-sort-icon svg {
-  width: 20px;
   display: inline;
   height: auto;
 }
+
+.lsp-diagnostics-listing thead th:not(.lsp-sorted-header) .lsp-sort-icon {
+  opacity: 0;
+}
+
+.lsp-diagnostics-listing thead th:not(.lsp-sorted-header):hover .lsp-sort-icon {
+  opacity: 0.5;
+}