removed typestyles

packages/toc/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jupyterlab/toc",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "private": false,
   "description": "Table of Contents extension for JupyterLab",
   "keywords": [
@@ -33,24 +33,21 @@
     "watch": "tsc -w"
   },
   "dependencies": {
-    "@jupyterlab/application": "^0.17.0",
-    "@jupyterlab/apputils": "^0.17.0",
-    "@jupyterlab/cells": "^0.17.0",
-    "@jupyterlab/coreutils": "^2.0.0",
-    "@jupyterlab/docmanager": "^0.17.0",
-    "@jupyterlab/docregistry": "^0.17.0",
-    "@jupyterlab/fileeditor": "^0.17.0",
-    "@jupyterlab/notebook": "^0.17.0",
-    "@jupyterlab/rendermime": "^0.17.0",
+    "@jupyterlab/application": "^0.18.0",
+    "@jupyterlab/apputils": "^0.18.0",
+    "@jupyterlab/cells": "^0.18.0",
+    "@jupyterlab/coreutils": "^2.1.0",
+    "@jupyterlab/docmanager": "^0.18.0",
+    "@jupyterlab/docregistry": "^0.18.0",
+    "@jupyterlab/fileeditor": "^0.18.0",
+    "@jupyterlab/notebook": "^0.18.0",
+    "@jupyterlab/rendermime": "^0.18.0",
     "@phosphor/algorithm": "^1.1.2",
     "@phosphor/coreutils": "^1.3.0",
     "@phosphor/messaging": "^1.2.2",
     "@phosphor/widgets": "^1.6.0",
-    "@types/react-codemirror": "^1.0.1",
-    "codemirror": "^5.39.2",
     "react": "~16.2.0",
-    "react-dom": "~16.2.0",
-    "typestyle": "^2.0.1"
+    "react-dom": "~16.2.0"
   },
   "devDependencies": {
     "@types/react": "~16.0.19",

packages/toc/src/generators/notebookgenerator/tagstool/styles/index.ts

@@ -1,11 +0,0 @@
-import { TagStyleClasses } from './tag-styles';
-import { TagListStyleClasses } from './tagslist-styles';
-import { TagsToolStyleClasses } from './tagstool-styles';
-
-const StyleClasses = {
-  TagStyleClasses,
-  TagListStyleClasses,
-  TagsToolStyleClasses
-};
-
-export default StyleClasses;

packages/toc/src/generators/notebookgenerator/tagstool/styles/shared-styles.ts

@@ -1,50 +0,0 @@
-import * as React from 'react';
-
-namespace SharedStyles {
-  export const tagInputStyleProperties = {
-    padding: '0px',
-    paddingBottom: '3px',
-    color: 'var(--jp-layout-color4)',
-    fontSize: '12px',
-    border: 'none',
-    outline: 'none',
-    resize: 'horizontal',
-    maxWidth: '100%',
-    backgroundColor: 'var(--jp-layout-color1)',
-    maxHeight: '30px'
-  } as React.CSSProperties;
-
-  export const tagStyleProperties = {
-    boxSizing: 'border-box',
-    height: '24px',
-    borderRadius: '20px',
-    padding: '10px',
-    paddingBottom: '4px',
-    paddingTop: '3px',
-    margin: '3px',
-    width: 'fit-content',
-    maxWidth: 'calc(100% - 25px)'
-  } as React.CSSProperties;
-
-  export const confirmButtonProperties = {
-    borderRadius: '3px',
-    backgroundColor: 'var(--jp-layout-color1)',
-    border: '1px solid #bdbdbd',
-    margin: '5px',
-    marginTop: '7px',
-    paddingLeft: '7px',
-    paddingRight: '7px',
-    paddingTop: '4px',
-    paddingBottom: '4px',
-    fontSize: '12px'
-  };
-
-  export const tagOperationsProperties = {
-    padding: '5px',
-    paddingLeft: '10px',
-    fontSize: '13px',
-    width: '100%'
-  };
-}
-
-export default SharedStyles;

packages/toc/src/generators/notebookgenerator/tagstool/styles/tag-styles.ts

@@ -1,30 +0,0 @@
-import { style } from 'typestyle';
-import SharedStyles from './shared-styles';
-
-export namespace TagStyleClasses {
-  export const tagLabelStyleClass = style({
-    fontSize: '11px',
-    maxWidth: '100%',
-    textOverflow: 'ellipsis',
-    display: 'inline-block',
-    overflow: 'hidden',
-    boxSizing: 'border-box',
-    //paddingRight: '25px',
-    paddingTop: '0px',
-    marginTop: '-1px',
-    marginBottom: '0px',
-    userSelect: 'none'
-  });
-
-  export const addTagStyleClass = style(SharedStyles.tagStyleProperties, {
-    backgroundColor: 'var(--jp-layout-color1)',
-    border: '1px solid var(--jp-layout-color4)',
-    maxWidth: '95%',
-    minHeight: '31px',
-    maxHeight: '31px'
-  });
-
-  export const tagIconLabelStyleClass = style({
-    position: 'absolute'
-  });
-}

packages/toc/src/generators/notebookgenerator/tagstool/styles/tagslist-styles.ts

@@ -1,33 +0,0 @@
-import { style } from 'typestyle';
-import SharedStyles from './shared-styles';
-
-export namespace TagListStyleClasses {
-  export const selectedTagStyleClass = style(SharedStyles.tagStyleProperties, {
-    color: 'white',
-    backgroundColor: '#2196F3',
-    outline: 'none'
-  });
-
-  export const unselectedTagStyleClass = style(
-    SharedStyles.tagStyleProperties,
-    {
-      backgroundColor: 'var(--jp-layout-color2)',
-      outline: 'none'
-    }
-  );
-
-  export const tagSubHeaderStyleClass = style({
-    paddingLeft: '10px',
-    marginBottom: '3px'
-  });
-
-  export const tagHolderStyleClass = style({
-    display: 'flex',
-    flexWrap: 'wrap',
-    padding: '4px',
-    height: 'fit-content',
-    width: '100%',
-    marginBottom: '20px',
-    paddingRight: '10px'
-  });
-}

packages/toc/src/generators/notebookgenerator/tagstool/styles/tagstool-styles.ts

@@ -1,62 +0,0 @@
-import { style } from 'typestyle';
-import SharedStyles from './shared-styles';
-
-export namespace TagsToolStyleClasses {
-  export const tagHeaderStyleClass = style({
-    paddingLeft: '10px',
-    paddingTop: '10px',
-    paddingBottom: '4px',
-    textTransform: 'uppercase',
-    fontSize: '13px'
-  });
-
-  export const tagHeaderHrStyleClass = style({
-    height: '0',
-    border: '0',
-    borderTop: 'var(--jp-border-width) solid var(--jp-border-color2)',
-    paddingTop: '0px',
-    marginTop: '0px'
-  });
-
-  export const cancelButtonStyleClass = style(
-    SharedStyles.confirmButtonProperties,
-    {
-      color: 'var(--jp-content-font-color0)'
-    }
-  );
-
-  export const deleteButtonStyleClass = style(
-    SharedStyles.confirmButtonProperties,
-    {
-      color: 'var(--jp-ui-inverse-font-color0)',
-      backgroundColor: '#bdbdbd'
-    }
-  );
-
-  export const tagOperationsPopUpStyleClass = style(
-    SharedStyles.tagOperationsProperties
-  );
-
-  export const bottomElementStyleClass = style({
-    marginBottom: '20px'
-  });
-
-  export const tagOperationsOptionStyleClass = style(
-    {
-      $nest: {
-        '&:hover': {
-          backgroundColor: 'var(--jp-layout-color2)'
-        }
-      }
-    },
-    SharedStyles.tagOperationsProperties
-  );
-
-  export const tagOperationsNoSelectedStyleClass = style(
-    SharedStyles.tagOperationsProperties,
-    {
-      color: '#A8A8A8',
-      fontWeight: 'lighter'
-    }
-  );
-}

packages/toc/src/generators/notebookgenerator/tagstool/tag.tsx

@@ -1,7 +1,4 @@
 import * as React from 'react';
-import StyleClasses from './styles';
-
-const TagStyleClasses = StyleClasses.TagStyleClasses;
 
 export interface TagComponentProps {
   selectionStateHandler: (newState: string, add: boolean) => void;
@@ -18,10 +15,7 @@ export abstract class TagComponent extends React.Component<TagComponentProps> {
     const tag = this.props.tag as string;
     return (
       <div>
-        <label
-          className={TagStyleClasses.tagLabelStyleClass}
-          key={new Date().toLocaleTimeString()}
-        >
+        <label className="toc-tag-label" key={new Date().toLocaleTimeString()}>
           {tag}
         </label>
       </div>

packages/toc/src/generators/notebookgenerator/tagstool/tagslist.tsx

@@ -1,9 +1,6 @@
 import { TagComponent } from './tag';
 
 import * as React from 'react';
-import StyleClasses from './styles';
-
-const TagListStyleClasses = StyleClasses.TagListStyleClasses;
 
 export interface TagListComponentProps {
   selectedTags: string[];
@@ -38,8 +35,8 @@ export class TagListComponent extends React.Component<
     return tags.map((tag, index) => {
       const tagClass =
         selectedTags.indexOf(tag) >= 0
-          ? TagListStyleClasses.selectedTagStyleClass
-          : TagListStyleClasses.unselectedTagStyleClass;
+          ? 'toc-selected-tag toc-tag'
+          : 'toc-unselected-tag toc-tag';
       return (
         <div
           key={tag}
@@ -65,10 +62,6 @@ export class TagListComponent extends React.Component<
     if (allTagsList) {
       renderedTagsForAllCells = this.renderElementForTags(allTagsList);
     }
-    return (
-      <div className={TagListStyleClasses.tagHolderStyleClass}>
-        {renderedTagsForAllCells}
-      </div>
-    );
+    return <div className="toc-tag-holder">{renderedTagsForAllCells}</div>;
   }
 }

packages/toc/style/index.css

@@ -361,3 +361,51 @@
 .tags-container {
   width: 100%;
 }
+
+/* styles for tags */
+
+.toc-tag-label {
+  font-size: 11px;
+  max-width: 100%;
+  text-overflow: ellipsis;
+  display: inline-block;
+  overflow: hidden;
+  box-sizing: border-box;
+  padding-top: 0px;
+  margin-top: -1px;
+  margin-bottom: 0px;
+  user-select: none;
+}
+
+.toc-tag {
+  box-sizing: border-box;
+  height: 24px;
+  border-radius: 20px;
+  padding: 10px;
+  padding-bottom: 4px;
+  padding-top: 3px;
+  margin: 3px;
+  width: fit-content;
+  max-width: calc(100% - 25px);
+}
+
+.toc-selected-tag {
+  color: white;
+  background-color: #2196f3;
+  outline: none;
+}
+
+.toc-unselected-tag {
+  background-color: var(--jp-layout-color2);
+  outline: none;
+}
+
+.toc-tag-holder {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 4px;
+  height: fit-content;
+  width: 100%;
+  margin-bottom: 20px;
+  padding-right: 10px;
+}