|
|
|
|
@ -1,5 +1,26 @@
|
|
|
|
|
<template>
|
|
|
|
|
<nav>
|
|
|
|
|
<nav :class="{ 'search-box-open': isSearchBoxOpen }">
|
|
|
|
|
<div class="win32-titlebar">
|
|
|
|
|
<div class="title">YesPlayMusic</div>
|
|
|
|
|
<div class="controls">
|
|
|
|
|
<div
|
|
|
|
|
class="button minimize codicon codicon-chrome-minimize"
|
|
|
|
|
@click="windowMinimize"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="button max-restore codicon"
|
|
|
|
|
@click="windowMaxRestore"
|
|
|
|
|
:class="{
|
|
|
|
|
'codicon-chrome-restore': windowIsMaximized,
|
|
|
|
|
'codicon-chrome-maximize': !windowIsMaximized,
|
|
|
|
|
}"
|
|
|
|
|
></div>
|
|
|
|
|
<div
|
|
|
|
|
class="button close codicon codicon-chrome-close"
|
|
|
|
|
@click="windowClose"
|
|
|
|
|
></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="navigation-buttons">
|
|
|
|
|
<button-icon @click.native="go('back')"
|
|
|
|
|
><svg-icon icon-class="arrow-left"
|
|
|
|
|
@ -30,6 +51,9 @@
|
|
|
|
|
v-if="settings.showGithubIcon !== false"
|
|
|
|
|
><svg-icon icon-class="github" class="github"
|
|
|
|
|
/></a>
|
|
|
|
|
<button-icon @click.native="toggleSearchBox()" class="search-button">
|
|
|
|
|
<svg-icon icon-class="search" />
|
|
|
|
|
</button-icon>
|
|
|
|
|
<div class="search-box">
|
|
|
|
|
<div class="container" :class="{ active: inputFocus }">
|
|
|
|
|
<svg-icon icon-class="search" />
|
|
|
|
|
@ -52,6 +76,15 @@
|
|
|
|
|
<script>
|
|
|
|
|
import ButtonIcon from "@/components/ButtonIcon.vue";
|
|
|
|
|
import { mapState } from "vuex";
|
|
|
|
|
const platformIsWin32 = window.require
|
|
|
|
|
? window.require("os").platform() == "win32"
|
|
|
|
|
? true
|
|
|
|
|
: false
|
|
|
|
|
: false;
|
|
|
|
|
|
|
|
|
|
const win = platformIsWin32
|
|
|
|
|
? window.require("electron").remote.getCurrentWindow()
|
|
|
|
|
: null;
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: "Navbar",
|
|
|
|
|
@ -63,6 +96,8 @@ export default {
|
|
|
|
|
inputFocus: false,
|
|
|
|
|
langs: ["zh-CN", "en"],
|
|
|
|
|
keywords: "",
|
|
|
|
|
isSearchBoxOpen: false,
|
|
|
|
|
windowIsMaximized: win ? win.isMaximized() : true,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
computed: {
|
|
|
|
|
@ -86,6 +121,24 @@ export default {
|
|
|
|
|
params: { keywords: this.keywords },
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
toggleSearchBox() {
|
|
|
|
|
this.isSearchBoxOpen = !this.isSearchBoxOpen;
|
|
|
|
|
},
|
|
|
|
|
windowMinimize() {
|
|
|
|
|
win.minimize();
|
|
|
|
|
},
|
|
|
|
|
windowMaxRestore() {
|
|
|
|
|
if (win.isMaximized()) {
|
|
|
|
|
win.restore();
|
|
|
|
|
this.windowIsMaximized = false;
|
|
|
|
|
} else {
|
|
|
|
|
win.maximize();
|
|
|
|
|
this.windowIsMaximized = true;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
windowClose() {
|
|
|
|
|
win.close();
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
@ -105,6 +158,9 @@ nav {
|
|
|
|
|
left: 10vw;
|
|
|
|
|
}
|
|
|
|
|
backdrop-filter: saturate(180%) blur(20px);
|
|
|
|
|
border-bottom: 1px solid transparent;
|
|
|
|
|
transition-property: padding-bottom, border-bottom;
|
|
|
|
|
transition-duration: 0.4s;
|
|
|
|
|
|
|
|
|
|
background-color: var(--color-navbar-bg);
|
|
|
|
|
z-index: 100;
|
|
|
|
|
@ -123,6 +179,70 @@ nav {
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.win32-titlebar {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-electron-platform-win32="yes"] {
|
|
|
|
|
nav {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
.win32-titlebar {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
position: fixed;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
right: 0;
|
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
--hover: #e6e6e6;
|
|
|
|
|
--active: #cccccc;
|
|
|
|
|
|
|
|
|
|
.title {
|
|
|
|
|
padding: 8px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
font-family: "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei",
|
|
|
|
|
sans-serif;
|
|
|
|
|
}
|
|
|
|
|
.controls {
|
|
|
|
|
height: 32px;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
display: flex;
|
|
|
|
|
.button {
|
|
|
|
|
height: 100%;
|
|
|
|
|
width: 46px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
&:hover {
|
|
|
|
|
background: var(--hover);
|
|
|
|
|
}
|
|
|
|
|
&:active {
|
|
|
|
|
background: var(--active);
|
|
|
|
|
}
|
|
|
|
|
&.close {
|
|
|
|
|
&:hover {
|
|
|
|
|
background: rgba(232, 17, 35, 0.9);
|
|
|
|
|
}
|
|
|
|
|
&:active {
|
|
|
|
|
background: #f1707a;
|
|
|
|
|
color: #000;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
&[data-theme="dark"] .win32-titlebar {
|
|
|
|
|
--hover: #191919;
|
|
|
|
|
--active: #333333;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.navigation-buttons {
|
|
|
|
|
flex: 1;
|
|
|
|
|
display: flex;
|
|
|
|
|
@ -248,5 +368,75 @@ nav {
|
|
|
|
|
color: var(--color-text);
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 400px) {
|
|
|
|
|
.github {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.search-button {
|
|
|
|
|
display: none;
|
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
.search-button {
|
|
|
|
|
display: flex;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
.right-part {
|
|
|
|
|
flex: 0;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 800px) {
|
|
|
|
|
.navigation-links > a {
|
|
|
|
|
margin: 4px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 700px) {
|
|
|
|
|
.navigation-buttons {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 600px) {
|
|
|
|
|
nav.search-box-open {
|
|
|
|
|
padding-bottom: 36px;
|
|
|
|
|
border-bottom-color: var(--color-secondary-bg-for-transparent);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.search-box {
|
|
|
|
|
display: block;
|
|
|
|
|
position: fixed;
|
|
|
|
|
top: 56px;
|
|
|
|
|
left: 16px;
|
|
|
|
|
right: 16px;
|
|
|
|
|
.container {
|
|
|
|
|
width: 100%;
|
|
|
|
|
opacity: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
transition-property: height, opacity;
|
|
|
|
|
transition-duration: 0.4s;
|
|
|
|
|
.input {
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[data-electron-platform-win32="yes"] {
|
|
|
|
|
.search-box {
|
|
|
|
|
// Add more 20px to top for title bar
|
|
|
|
|
top: calc(56px + 20px);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
nav.search-box-open .container {
|
|
|
|
|
opacity: 1;
|
|
|
|
|
height: 32px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
qier222
4 years ago
committed by
GitHub
