mastermindzh/tidal-hifi
1
0
Fork 0
mirror of https://github.com/Mastermindzh/tidal-hifi.git synced 2024-10-22 23:18:28 +02:00
Code Issues Projects Releases Wiki Activity

Restyled settings menu to include version number and useful links on the about page. fixes #275

Browse Source
This commit is contained in:
Rick van Lieshout 2023-08-23 20:40:02 +02:00
parent d8e4a493b9
commit a962029b0b
5 changed files with 78 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.vscode/settings.json vendored
View File

@ -16,5 +16,9 @@
"tracklist", "tracklist",
"widevine", "widevine",
"xesam" "xesam"
] ],
"sonarlint.connectedMode.project": {
"connectionId": "public-sonarcloud",
"projectKey": "Mastermindzh_tidal-hifi"
}
} }

1
CHANGELOG.md
View File

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Fixes the last.fm bug. - Fixes the last.fm bug.
- Added settings to customize the Discord rich presence information - Added settings to customize the Discord rich presence information
- Discord settings are now also collapsible like the ListenBrainz ones are - Discord settings are now also collapsible like the ListenBrainz ones are
- Restyled settings menu to include version number and useful links on the about page
## [5.6.0] ## [5.6.0]

24
src/pages/settings/settings.html
View File

@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="./settings.css" /> <link rel="stylesheet" href="./settings.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head> </head>
<body class="settings-window"> <body class="settings-window">
@ -380,21 +381,24 @@
<section id="about-section" class="tabs__section about-section"> <section id="about-section" class="tabs__section about-section">
<img alt="tidal icon" class="about-section__icon" src="./icon.png" /> <img alt="tidal icon" class="about-section__icon" src="./icon.png" />
<p class="about-section__text"> <h4>TIDAL Hi-Fi</h4>
<a class="external-link" data-url="https://github.com/Mastermindzh/tidal-hifi">TIDAL Hi-Fi</a> <div class="about-section__version">
is made by <a href="">5.7.0</a>
<a class="external-link" data-url="https://www.rickvanlieshout.com"> </div>
Rick van Lieshout</a>. <br />It uses <div class="about-section__links">
<a class="external-link" data-url="https://castlabs.com/">Castlabs'</a> <a href="https://github.com/mastermindzh/tidal-hifi/" class="about-section__button">Github <i
version of Electron for widevine support. class="fa fa-external-link"></i></a>
</p> <a href="https://github.com/Mastermindzh/tidal-hifi/issues" class="about-section__button">Report an issue <i
class="fa fa-external-link"></i></a>
<a href="https://github.com/Mastermindzh/tidal-hifi/graphs/contributors"
class="about-section__button">Contributors <i class="fa fa-external-link"></i></a>
</div>
</section> </section>
<footer class="footer"> <footer class="footer">
<p class="footer__note"> <p class="footer__note">
Some settings may require a restart of TIDAL Hi-Fi. To do so, click the button below: <strong>Note</strong>: some settings may require a restart of TIDAL Hi-Fi.
</p> </p>
<button class="footer__button" id="restart">Restart TIDAL Hi-Fi</button>
</footer> </footer>
</div> </div>
</main> </main>

62
src/pages/settings/settings.scss
View File

@ -8,6 +8,7 @@ $tidal-grey: #72777f;
$tidal-grey-darker: #404248; $tidal-grey-darker: #404248;
$tidal-grey-darker-focus: #55585f; $tidal-grey-darker-focus: #55585f;
$tidal-grey-darkest: #242528; $tidal-grey-darkest: #242528;
$tidal-grey-darkest-focus: #2e2f33;
// --- Fonts --- // --- Fonts ---
@ -309,26 +310,75 @@ html {
} }
.about-section { .about-section {
padding-top: 120px; padding-top: 40px;
text-align: center; text-align: center;
&__icon { &__icon {
display: inline-block; display: inline-block;
width: 100px; width: 200px;
} }
&__text { &__text {
display: block; display: block;
max-width: 350px; max-width: 500px;
margin: 20px auto 0; margin: -15px auto 0;
}
&__table {
width: 120px;
margin: 0 auto 0;
td {
text-align: left;
}
}
&__version {
margin: -10px 0px 30px 0px;
a {
background-color: $tidal-grey-darker;
border: none;
color: $tidal-blue;
padding: 8px 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
display: inline-block;
border-radius: 100px;
}
} }
// --- Footer --- &__links {
width: 300px;
margin: 0 auto;
a {
border-radius: 10px;
border: none;
color: $white;
padding: 10px 10px 10px 20px;
margin: 8px;
text-align: left;
font-size: 16px;
line-height: 30px;
display: flex;
text-decoration: none;
justify-content: space-between;
background-color: $tidal-grey-darkest;
i {
color: $white;
line-height: 30px;
font-size: 18px;
}
&:hover {
background-color: $tidal-grey-darkest-focus;
}
}
}
} }
// --- Footer ---
.footer { .footer {
position: sticky; position: sticky;
top: calc(100% - 120px);
height: 100px; height: 100px;
padding-top: 20px; padding-top: 20px;
text-align: center; text-align: center;

4
src/scripts/settings.ts
View File

@ -63,8 +63,8 @@ const settingsModule = {
export const createSettingsWindow = function () { export const createSettingsWindow = function () {
settingsWindow = new BrowserWindow({ settingsWindow = new BrowserWindow({
width: 700, width: 650,
height: 600, height: 700,
resizable: true, resizable: true,
show: false, show: false,
transparent: true, transparent: true,