blueprintjs removal (#4006)

* Remove blueprintJS * Fix chat title + `subtile` typo * Fix text color in inputs * Add tabindex to Settings elements - pressing Enter/Space doesn't work yet * Fix FullscreenMedia Escape handling * Update packages/frontend/src/components/Dialog/DialogBody.tsx Co-authored-by: WofWca <[email protected]> * Update packages/frontend/src/components/SmallSelectDialog.tsx Co-authored-by: WofWca <[email protected]> * Update packages/frontend/src/components/Settings/SettingsSelector.tsx Co-authored-by: WofWca <[email protected]> * Update packages/frontend/src/components/Settings/SettingsSwitch.tsx Co-authored-by: WofWca <[email protected]> * Drop type danger from showPassword * Some feedback fixes * Update packages/frontend/scss/misc/_context_menu.scss Co-authored-by: WofWca <[email protected]> * Button transparent changes * Fix fullscreenTransparent and callout * replace blueprint classes in gallery component * ProgressBar intent, remove button * Avatar button fixes * Fix Collapse, remove button.minimal * Update packages/frontend/scss/manifest.scss Co-authored-by: WofWca <[email protected]> * Update packages/frontend/src/components/Dialog/Dialog.tsx Co-authored-by: WofWca <[email protected]> * Fix Switch, delete unnecessary stuff * Fix formatting * Avoid hover on date & layout jump in gallery * Use variable instead of hard coded color * Use variable instead of hard coded color & flex gap * Remove left over bp4 style --------- Co-authored-by: WofWca <[email protected]> Co-authored-by: Nico de Haen <[email protected]>
deltachat · Oct 15, 2024 · 0e0d0b8 · 0e0d0b8
1 parent d085f8a
commit 0e0d0b8
Show file tree

Hide file tree

Showing 72 changed files with 976 additions and 1,305 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -21,6 +21,7 @@
 - Update local help (2024-10-02) #4165
 - trim whitepaces when reading from clipboard in qr code reader #4169
 - load chat lists faster (the chat list on the main screen, "Forward to..." dialog, etc)
+- replace BlueprintJS Button, Icon, Radio, RadioGroup, Collapse, Dialog with our implementation
 
 ### Fixed
 - fix that you can not click header button in dialog when they are on top of the navbar #4093

diff --git a/bin/topEvil.sh b/bin/topEvil.sh
@@ -3,7 +3,7 @@ cd "$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )/.."
 
 echo "Top-Evil TypeScript"
 
-res=$( grep -r "^import.*blueprint" packages/frontend/src --color=always )
+res=$( grep -r "} from '@blueprint" src --color=always )
 echo "🤔 Using Blueprint code: $( echo "$res" | wc -l )"
 code=$( echo "$res" | wc -l )
 echo "-----------------------------------------------------"
@@ -29,4 +29,5 @@ echo "CODE: $code | CLASSES: $classes | SCSS: $scss"
 # res=$( grep -r "^import.*electron" packages/target-electron/src/deltachat --color=always )
 # echo "🤔 Using Electron inside of the deltachat controller: $( echo "$res" | wc -l )"
 # echo "-----------------------------------------------------"
-# echo "$res"
+# echo "$res"
+
diff --git a/images/icons/chevron-left.svg b/images/icons/chevron-left.svg
diff --git a/images/icons/chevron-right.svg b/images/icons/chevron-right.svg
diff --git a/images/icons/eye-off.svg b/images/icons/eye-off.svg
diff --git a/images/icons/eye-open.svg b/images/icons/eye-open.svg
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -21,7 +21,6 @@
     "path": "path-browserify"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.20.2",
     "@deltachat-desktop/runtime-interface": "link:../runtime",
     "@deltachat-desktop/shared": "link:../shared",
     "@deltachat/jsonrpc-client": "catalog:",

diff --git a/packages/frontend/scss/_global.scss b/packages/frontend/scss/_global.scss
@@ -38,7 +38,6 @@ h3,
 h4,
 h5,
 p,
-.bp4-button,
 button > span,
 label {
   user-select: none;

diff --git a/packages/frontend/scss/_icons.scss b/packages/frontend/scss/_icons.scss
@@ -11,24 +11,6 @@
   }
 }
 
-.remove-icon {
-  margin-top: calc((64px - 20px) / 2);
-  margin-right: 10px;
-  .bp4-icon > svg {
-    width: 20px;
-    height: 20px;
-    fill: grey;
-  }
-}
-
-.remove-icon:hover {
-  .bp4-icon {
-    & > svg {
-      fill: #bf0000;
-    }
-  }
-}
-
 img.verified-icon {
   width: 1em;
   height: 1em;

diff --git a/packages/frontend/scss/components/_radios.scss b/packages/frontend/scss/components/_radios.scss
@@ -10,12 +10,15 @@
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    & > input {
+      margin: 0 3px 0 0;
+    }
     & > img {
       height: 36px;
       width: 36px;
     }
     & > label {
-      padding-left: 4px;
+      padding-left: 7px;
       padding-right: 4px;
       height: 36px;
       display: inline-flex;

diff --git a/packages/frontend/scss/contact/_contact-list.scss b/packages/frontend/scss/contact/_contact-list.scss
@@ -20,6 +20,13 @@
       cursor: 'default';
     }
   }
+
+  button.btn-remove {
+    appearance: none;
+    background: none;
+    border: none;
+    margin-right: 10px;
+  }
 }
 
 .delta-checkbox {

diff --git a/packages/frontend/scss/dialogs/_autocrypt_setup.scss b/packages/frontend/scss/dialogs/_autocrypt_setup.scss
@@ -7,19 +7,31 @@
   & > .row {
     width: 100%;
 
-    .bp4-input {
+    input {
       width: 66%;
       float: left;
       border: 1px solid var(--colorNone);
+      border-radius: 2px;
       box-shadow: none;
       text-align: center;
+      appearance: none;
+      background: #fff;
+      color: #1c2127;
+      font-size: 14px;
+      font-weight: 400;
+      height: 30px;
+      line-height: 30px;
+      outline: none;
+      padding: 0 10px;
+      transition: box-shadow 100ms cubic-bezier(0.4, 1, 0.75, 0.9);
+      vertical-align: middle;
     }
 
-    .bp4-input:focus {
+    input:focus {
       border-color: var(--bp4-input-focused);
     }
 
-    .bp4-input:disabled {
+    input:disabled {
       cursor: text;
       color: inherit;
       background: inherit;
@@ -33,10 +45,6 @@
       align-items: center;
       justify-content: center;
       height: 30px;
-
-      .bp4-icon > svg:not([fill]) {
-        fill: var(--bp4InputPlaceholder);
-      }
     }
   }
 }

diff --git a/packages/frontend/scss/dialogs/_qr-import.scss b/packages/frontend/scss/dialogs/_qr-import.scss
@@ -17,9 +17,6 @@ div.import-qr-code-dialog {
     position: absolute;
     right: 0px;
   }
-  .bp4-button {
-    margin: 10px;
-  }
 }
 
 .qr-data {

diff --git a/packages/frontend/scss/dialogs/_settings.scss b/packages/frontend/scss/dialogs/_settings.scss
@@ -22,11 +22,6 @@
   flex-wrap: wrap;
   justify-content: space-between;
   align-content: space-between;
-
-  .bp4-button {
-    width: 75px;
-    height: 75px;
-  }
 }
 
 .background-default-images {

diff --git a/packages/frontend/scss/gallery/_attachment-view.scss b/packages/frontend/scss/gallery/_attachment-view.scss
@@ -1,60 +1,48 @@
-.attachment-overlay {
-  .attachment-view {
-    height: 100%;
-    padding: 0;
-    margin: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(49, 49, 49, 1);
+.attachment-view {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(49, 49, 49, 1);
 
-    img,
-    video {
-      width: 100vw;
-      max-height: 100vh;
-      object-fit: contain;
-      user-select: none;
-    }
-
-    video {
-      width: 95vw;
-    }
-  }
-
-  .render-media-wrapper {
+  img,
+  video {
     width: 100vw;
-    height: 100vh;
+    max-height: 100vh;
+    object-fit: contain;
+    user-select: none;
   }
 
-  .btn-wrapper {
-    float: right;
-    position: absolute;
-    background-color: rgba(0, 0, 0, 0.75);
-    border-radius: 3px;
+  video {
+    width: 95vw;
+  }
+}
 
-    right: 8px;
-    top: 6px;
-    padding: 5px;
+.btn-wrapper {
+  float: right;
+  position: absolute;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: 3px;
+  display: flex;
 
-    .download-btn {
-      height: 32px;
-      width: 32px;
-      display: inline-block;
-      vertical-align: text-bottom;
-      @include color-svg(
-        './images/download.svg',
-        var(--fullScreenMediaButtons)
-      );
-      cursor: pointer;
-      margin-right: 5px;
+  right: 8px;
+  top: 6px;
+  padding: 5px;
 
-      &:hover {
-        background-color: var(--fullScreenMediaButtons);
-      }
-    }
+  .download-btn {
+    height: 32px;
+    width: 32px;
+    vertical-align: text-bottom;
+    @include color-svg('./images/download.svg', var(--fullScreenMediaButtons));
+    // to offset a bit visual center of the button
+    mask-position: 0px 2px;
+    cursor: pointer;
+    margin-right: 5px;
 
-    .bp4-icon-cross {
-      cursor: pointer;
+    &:hover {
+      background-color: var(--fullScreenMediaButtons);
     }
   }
 }
@@ -65,13 +53,6 @@
   top: calc(50vh - (60px / 2));
   background-color: #3131316b;
   border-radius: 8%;
-
-  .bp4-icon > svg:not([fill]) {
-    fill: var(--bp4ButtonHoverBg);
-    &:hover {
-      fill: white;
-    }
-  }
 }
 
 .media-previous-button {

diff --git a/packages/frontend/scss/gallery/_media.scss b/packages/frontend/scss/gallery/_media.scss
@@ -14,12 +14,33 @@ $tab-height: 46px;
     flex-grow: 1;
     text-align: end;
     align-self: center;
-    padding-right: 12px;
+    margin-right: 12px;
     font-size: 18px;
     color: var(--summary-text-color);
     white-space: nowrap;
   }
 
+  .tab-list {
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+    .tab-item {
+      font-size: 1.1rem;
+      padding-bottom: 6px;
+      &.selected,
+      &:hover {
+        color: var(--globalLinkColor);
+        border-bottom: 3px solid var(--globalLinkColor);
+        cursor: pointer;
+      }
+      &.big-date:hover {
+        color: var(--summary-text-color);
+        border-bottom: none;
+        cursor: default;
+      }
+    }
+  }
+
   & .gallery {
     height: 100%;
 
@@ -55,10 +76,6 @@ $tab-height: 46px;
     }
   }
 
-  .bp4-tab-panel {
-    margin-top: 0;
-  }
-
   .searchbar {
     input {
       border: none;