MAINTENANCE

* Add migration warning
tonysamperi · Nov 4, 2023 · 409ef38 · 409ef38
1 parent fb90319
commit 409ef38
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 17 deletions.
diff --git a/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.html b/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.html
@@ -2,6 +2,18 @@
 <!-- * * * * * * * * * * * * POPPER DEMO! :) * * * * * * * * * * * -->
 <!-- * * * * * * * * * cloned from popper.js.org * * * * * * * * * -->
 <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<div class="warning-dialog" *ngIf="showWarning">
+	<span class="close" (click)="showWarning = !1">x</span>
+	<p>Dear ngx-popperjs users,
+	   <br />
+	   from v17, this library is not relying anymore on popper.js to render the popper.</p>
+	<p>This means that there's no point in having a library called ngx-popperjs, when it uses floating-ui underneath. This will be the <strong>last version</strong> of ngx-popperjs.</p>
+	<p>That's why I'm publishing along this, <strong>ngx-float-ui</strong> (damn ngx-floating-ui was already taken and I got no response in my request to claim the name I made more than 1 month ago).</p>
+	<p>I did this overlap to give everyone the time (as you know it's 6 months before the next major) to switch to the new library instead.</p>
+	<p>After that I'll mark ngx-popperjs v17 as <strong>deprecated</strong>.</p>
+	<p>Also, since last events after <strong>Chrome 118</strong> (or whatever broke ngx-popperjs), I think it could be a good idea to publish even previous versions of ngx-float-ui, since they don't need the Chrome workaround.</p>
+	<p>If there's a good number of requests I can do so. If you want to vote for the release of some v < 17, open an issue (if not already opened) and leave a thumb up.</p>
+</div>
 <div class="content"
 	 role="main">
 	<div class="pop-top-section">

diff --git a/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.scss b/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.scss
@@ -6,6 +6,27 @@ strong {
   color: map-get($pop-colors, primary-light);
 }
 
+.warning-dialog {
+  position: fixed;
+  left: 12px;
+  top: 12px;
+  width: 33%;
+  padding: 24px 16px 16px 16px;
+  color: #222;
+  background-color: darkorange;
+  z-index: 9999;
+  > .close {
+    position: absolute;
+    right: 16px;
+    top: 0;
+    cursor: pointer;
+  }
+
+  strong {
+    color: #222;
+  }
+}
+
 .pop-generic-section {
   padding: 50px 40px;
   max-width: 900px;
@@ -166,12 +187,9 @@ strong {
 
     &[pop-overflow], &[pop-flipping], &[pop-click], &[pop-loose] {
       > div.pop-popcorn-wrap {
+        @include pop-scrollbar();
         position: relative;
         width: 100%;
-        -webkit-scrollbar-color: rgba(255, 230, 157, 1) transparent;
-        -moz-scrollbar-color: rgba(255, 230, 157, 1) transparent;
-        -ms-scrollbar-color: rgba(255, 230, 157, 1) transparent;
-        scrollbar-color: rgba(255, 230, 157, 1) transparent;
         border-radius: 10px;
         overflow-y: scroll;
         overscroll-behavior: contain;
@@ -196,17 +214,6 @@ strong {
           //border: 2px solid blue;
         }
 
-        &::-webkit-scrollbar {
-          -webkit-appearance: none;
-          width: 7px;
-        }
-
-        &::-webkit-scrollbar-thumb {
-          border-radius: 4px;
-          background-color: rgba(255, 230, 157, 1);
-          -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
-        }
-
         .pop-popcorn-box {
           position: relative;
           left: 0;

diff --git a/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.ts b/projects/ngx-popperjs-repo/src/app/components/demo/demo.component.ts
@@ -1,5 +1,5 @@
 import {Component, OnInit} from "@angular/core";
-import {NgFor} from "@angular/common";
+import {NgFor, NgIf} from "@angular/common";
 import {
     NgxPopperjsPlacements,
     NgxPopperjsLooseDirective,
@@ -30,7 +30,7 @@ const codeTypes: NgxPopperjsArticleTypesRef<"css" | "markup"> = {
     templateUrl: "demo.component.html",
     styleUrls: ["demo.component.scss"],
     standalone: true,
-    imports: [NgFor, NgxPopperjsContentComponent, NgxPopperjsDirective, NgxPopperjsLooseDirective]
+    imports: [NgIf, NgFor, NgxPopperjsContentComponent, NgxPopperjsDirective, NgxPopperjsLooseDirective]
 })
 export class NgxPopperjsDemoComponent implements OnInit {
 
@@ -47,6 +47,7 @@ export class NgxPopperjsDemoComponent implements OnInit {
     // tslint:disable-next-line:no-bitwise
     positionButtons: NgxPopperjsPlacements[] = Object.values(NgxPopperjsPlacements).filter((v) => !~v.indexOf("auto"));
     selectedPosition: NgxPopperjsPlacements = this.positionButtons[0];
+    showWarning: boolean = !0;
     year: number = new Date().getFullYear();
 
     ngOnInit(): void {

diff --git a/projects/ngx-popperjs-repo/src/scss/vars.scss b/projects/ngx-popperjs-repo/src/scss/vars.scss
@@ -8,3 +8,21 @@ $pop-colors: (
 );
 
 $pop-angular-logo-size: 40px;
+
+@mixin pop-scrollbar() {
+  -webkit-scrollbar-color: rgba(255, 230, 157, 1) transparent;
+  -moz-scrollbar-color: rgba(255, 230, 157, 1) transparent;
+  -ms-scrollbar-color: rgba(255, 230, 157, 1) transparent;
+  scrollbar-color: rgba(255, 230, 157, 1) transparent;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(255, 230, 157, 1);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+  }
+}
diff --git a/projects/ngx-popperjs-repo/src/styles.scss b/projects/ngx-popperjs-repo/src/styles.scss
@@ -13,6 +13,7 @@
 }
 
 body {
+  @include pop-scrollbar();
   line-height: 1.6;
   background: map-get($pop-colors, background);
   color: map-get($pop-colors, accent);