Skip to content

Commit

Permalink
Merge pull request #98 from oatear/feature/pretty-welcome-buttons
Browse files Browse the repository at this point in the history
Welcome buttons have a gradient based on the hue calculated from the name
hristoiankov authored Jan 26, 2024
2 parents 46e1fab + 5932979 commit 86ddabb
Showing 4 changed files with 15 additions and 8 deletions.
6 changes: 6 additions & 0 deletions cider-app/README.md
Original file line number Diff line number Diff line change
@@ -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
7 changes: 3 additions & 4 deletions cider-app/src/app/welcome/welcome.component.html
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 1 addition & 2 deletions cider-app/src/app/welcome/welcome.component.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
}
7 changes: 5 additions & 2 deletions cider-app/src/app/welcome/welcome.component.ts
Original file line number Diff line number Diff line change
@@ -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
}
});

0 comments on commit 86ddabb

Please sign in to comment.