Fixed positioning and modified UI.

Author: kpinnipa

src/CodeSnippetDisplay.tsx

@@ -434,7 +434,7 @@ export class CodeSnippetDisplay extends React.Component<
     target.addEventListener('mousemove', this.handleDragMove, true);
 
     // since a browser has its own drag'n'drop support for images and some other elements.
-    target.ondragstart = () => false;
+    target.ondragstart = (): boolean => false;
 
     event.preventDefault();
   }
@@ -566,7 +566,7 @@ export class CodeSnippetDisplay extends React.Component<
   }
 
   //Set the position of the option to be under to the three dots on snippet.
-  private _setOptionsPosition(
+  public static _setOptionsPosition(
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>
   ): void {
     const target = event.target as HTMLElement;
@@ -1083,7 +1083,7 @@ export class CodeSnippetDisplay extends React.Component<
           event: React.MouseEvent<HTMLButtonElement, MouseEvent>
         ): void => {
           showMoreOptions({ body: new OptionsHandler(this, codeSnippet) });
-          this._setOptionsPosition(event);
+          CodeSnippetDisplay._setOptionsPosition(event);
         }
       }
     ];

src/SortTools.tsx

@@ -10,9 +10,7 @@ const SORT_ICON_INACTIVE = 'jp-codeSnippet-sort-icon-inactive';
 const SORT_ICON_ACTIVE = 'jp-codeSnippet-sort-icon-active';
 const CODE_SNIPPET_SORT_CONTENT = 'jp-codeSnippet-sort-content';
 const CODE_SNIPPET_SORT_SORTBY = 'jp-codeSnippet-sort-sortby';
-const CODE_SNIPPET_SORT_LAST_MOD = 'jp-codeSnippet-sort-last-mod';
-const CODE_SNIPPET_SORT_DATE_NEW = 'jp-codeSnippet-sort-date-new';
-const CODE_SNIPPET_SORT_DATE_OLD = 'jp-codeSnippet-sort-date-old';
+const CODE_SNIPPET_SORT_OPTION = 'jp-codeSnippet-sort-option';
 
 /* Add on click to span and then create function to actually do the sorting*/
 /* Right now the coloring of the arrows is off, make sure when dialog disappears arrow turns back to gray*/
@@ -28,26 +26,46 @@ export class SortTools extends React.Component {
     this.handleClick = this.handleClick.bind(this);
   }
 
+  private _setSortToolPosition(
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ): void {
+    const target = event.target as HTMLElement;
+    const top: number;
+    top = target.getBoundingClientRect().top + 30;
+    const leftAsString =
+      (target.getBoundingClientRect().left - 164).toString(10) + 'px';
+    const topAsString = top.toString(10) + 'px';
+    document.documentElement.style.setProperty(
+      '--more-options-top',
+      topAsString
+    );
+    document.documentElement.style.setProperty(
+      '--more-options-left',
+      leftAsString
+    );
+  }
+
   public createOptionsNode(): HTMLElement {
     const body = document.createElement('div');
-
+    body.className = 'jp-codeSnippet-sort-test-container';
     const optionsContainer = document.createElement('div');
     optionsContainer.className = CODE_SNIPPET_SORT_CONTENT;
     const insertSnip = document.createElement('div');
     insertSnip.className = CODE_SNIPPET_SORT_SORTBY;
-    insertSnip.textContent = 'Sort by:';
+    // 4 space start to sortby
+    insertSnip.textContent = '    Sort by:';
     /*insertSnip.onclick = (): void => {};*/
     const copySnip = document.createElement('div');
-    copySnip.className = CODE_SNIPPET_SORT_LAST_MOD;
-    copySnip.textContent = 'Last Modified';
+    copySnip.className = CODE_SNIPPET_SORT_OPTION;
+    copySnip.textContent = '    Last Modified';
     /*copySnip.onclick = (): void => {};*/
     const editSnip = document.createElement('div');
-    editSnip.className = CODE_SNIPPET_SORT_DATE_NEW;
-    editSnip.textContent = 'Date Created: Newest';
+    editSnip.className = CODE_SNIPPET_SORT_OPTION;
+    editSnip.textContent = '    Date Created: Newest';
     /*editSnip.onclick = (): void => {};*/
     const deleteSnip = document.createElement('div');
-    deleteSnip.className = CODE_SNIPPET_SORT_DATE_OLD;
-    deleteSnip.textContent = 'Date Created: Oldest';
+    deleteSnip.className = CODE_SNIPPET_SORT_OPTION;
+    deleteSnip.textContent = '    Date Created: Oldest';
     /*deleteSnip.onclick = (): void => {};*/
     optionsContainer.appendChild(insertSnip);
     optionsContainer.appendChild(copySnip);
@@ -63,6 +81,7 @@ export class SortTools extends React.Component {
     // const parent = target.parentElement;
     this.handleClickHelper(target);
     showMoreOptions({ body: new OptionsHandler(this) });
+    this._setSortToolPosition(event);
   }
 
   handleClickHelper(parent: HTMLElement): void {

style/index.css

@@ -681,3 +681,19 @@ mark.jp-codeSnippet-search-bolding {
   float: right;
   cursor: pointer;
 }
+
+.jp-codeSnippet-sort-content {
+  width: 158px;
+}
+
+.jp-codeSnippet-sort-sortby {
+  white-space: pre;
+  border-bottom: 1px var(--jp-layout-color3) solid;
+  padding-bottom: 2px;
+}
+
+.jp-codeSnippet-sort-option {
+  padding-top: 2px;
+  white-space: pre;
+  cursor: pointer;
+}