Merge pull request #98 from oatear/feature/pretty-welcome-buttons

Welcome buttons have a gradient based on the hue calculated from the name
oatear · Jan 26, 2024 · 86ddabb · 86ddabb
2 parents 46e1fab + 5932979
commit 86ddabb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 8 deletions.
diff --git a/cider-app/README.md b/cider-app/README.md
@@ -23,6 +23,12 @@ Run `npm outdated`
 ## Update dependency
 Run `ng update library@version` or `npm update library@version`. If it doesn't work use `ng update library@version --allow-dirty`.
 
+## Install dependencies from package-lock.json only
+Run `npm ci`
+
+## Install updated dependencies from package.json
+Run `npm install`
+
 # Other
 
 ## Electron application

diff --git a/cider-app/src/app/welcome/welcome.component.html b/cider-app/src/app/welcome/welcome.component.html
@@ -13,10 +13,9 @@
         (mouseout)="projectUrl.hover = false"
         (click)="openProject(projectUrl.url)"
         [style]="{
-            'background-color': projectUrl.hover 
-            ? 'hsl(' + projectUrl.hue + ' 19% 55%)'
-            : 'hsl(' + projectUrl.hue + ' 19% 45%)',
-            'border-color': 'hsl(' + projectUrl.hue + ' 19% 45%)'
+            'background': projectUrl.hover 
+            ? 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 19% 50%) 0%, hsl(' + projectUrl.hue2 + ' 19% 50%) 100%)'
+            : 'linear-gradient(45deg, hsl(' + projectUrl.hue + ' 19% 45%) 0%, hsl(' + projectUrl.hue2 + ' 19% 45%) 100%)'
         }"></p-button>
     </ng-container>
 </p-card>

diff --git a/cider-app/src/app/welcome/welcome.component.scss b/cider-app/src/app/welcome/welcome.component.scss
@@ -7,11 +7,10 @@
         margin-right: 21px;
         color: #e4e4e6;
         background: #343e4d;
-        border-color: #343e4d;
         border-radius: 10px;
+        border-width: 0;
         &:hover {
             background: #404d61;
-            border-color: #404d61;
         }
     }
 }

diff --git a/cider-app/src/app/welcome/welcome.component.ts b/cider-app/src/app/welcome/welcome.component.ts
@@ -28,7 +28,7 @@ export class WelcomeComponent implements OnInit {
   projectHomeUrl$: Observable<string | undefined>;
   projectUnsaved$: Observable<boolean>;
 
-  recentProjectUrls: { url: string; name: string; hue: number; hover: boolean}[] = [];
+  recentProjectUrls: { url: string; name: string; hue: number; hue2: number; hover: boolean}[] = [];
 
   constructor(private localStorageService: LocalStorageService,
     private confirmationService: ConfirmationService,
@@ -49,10 +49,13 @@ export class WelcomeComponent implements OnInit {
     this.localStorageService.getRecentProjectUrls().pipe(take(1)).subscribe(urls => {
       this.recentProjectUrls = urls.map(url => {
         let name = StringUtils.lastDirectoryFromUrl(url);
+        let hue = this.calculateHue(name);
+        let hue2diff = 60;
         return {
           url: url,
           name: name,
-          hue: this.calculateHue(name),
+          hue: hue,
+          hue2: hue + hue2diff > 255 ? hue - hue2diff : hue + hue2diff,
           hover: false
         }
       });