Restyling extensions page with tailwindcss (#2796)

* Setting up tailwind and css modules env Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Using tailwind with scss files also Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Introducing react-table Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Spread extensions to smaller components Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Add table sorting Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing inputs line-height Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fine-tuning page view Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Align table rows Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding extension notice Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fine-tuning overall styling Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Adding a extensions placeholder Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Updating MaterialIcons font Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Aligning not found state Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Making extension components observable Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing search input cross icon Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix drag-n-drop indication Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing extension name sorting Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fix linter Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Ignoring ts files to tailwind purge Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Cleaning up Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Renaming Table -> ReactTable Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Fixing integration tests Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving tailwind imports into app.scss Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Moving userExtensionList() out from extension-loader Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Transform extension list to array Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com> * Expand install input placeholder a bit Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
2025-05-20 05:10:56 +00:00 · 2021-05-23 15:15:42 +03:00
1 parent ef21eba724
commit 0899ace037
@@ -21,10 +21,7 @@

 .DropFileInput {
  &.droppable {
-    box-shadow: 0 0 0 5px $primary; // fixme: might not work sometimes
-
-    > * {
-      pointer-events: none;
-    }
+    box-shadow: inset 0 0 0 6px $primary;
+    transition: all 0.3s;
  }
 }
@@ -39,15 +39,21 @@ export interface DropFileMeta<T extends HTMLElement = any> {
@observer
 export class DropFileInput<T extends HTMLElement = any> extends React.Component<DropFileInputProps> {
  @observable dropAreaActive = false;
+  dragCounter = 0; // Counter preventing firing onDragLeave() too early (https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element)

  @autobind()
  onDragEnter() {
+    this.dragCounter++;
    this.dropAreaActive = true;
  }

  @autobind()
  onDragLeave() {
-    this.dropAreaActive = false;
+    this.dragCounter--;
+
+    if (this.dragCounter == 0) {
+      this.dropAreaActive = false;
+    }
  }

  @autobind()
@@ -50,6 +50,7 @@
    position: relative;
    padding: $padding /4 * 3 0;
    border-bottom: 1px solid $halfGray;
+    line-height: 1;

    &:after {
      content: "";
@@ -30,12 +30,13 @@
    color: inherit;
    background: none;
    border: none;
-    border-radius: $radius;
-    box-shadow: 0 0 0 1px $halfGray;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 0 1px var(--halfGray);
    padding: var(--spacing);

    .Icon {
-      height: $margin * 2;
+      height: calc(var(--margin) * 2);
+      width: calc(var(--margin) * 2);
    }
  }