修复控制交互;
宇天
parent
f9eddcec1c
commit
d32da5945b
|
|
@ -1 +1 @@
|
|||
body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold}body .quit:hover,body .lock:hover{color:#ff5061}body .quit:active,body .lock:active{color:#ffb618}body .lock{right:4rem}body .lock.active{color:#3fc2a7}body:hover{background:rgba(29,35,44,0.2)}body:hover .quit,body:hover .lock{visibility:visible}
|
||||
body{background:transparent}body .lrc-box{position:absolute;left:0;top:0;display:flex;flex-flow:column wrap;width:100%;height:100%;padding:0 5rem;line-height:5rem;color:#fff;font-size:3rem}body .lrc-box section{flex:1;display:flex}body .lrc-box section.left{justify-content:flex-start}body .lrc-box section.right{justify-content:flex-end}body .lrc-box section span{-webkit-background-clip:text !important;background-clip:text !important;color:transparent}body .lrc-box section span.shadow{text-shadow:0 0 0.5rem rgba(0,0,0,0.5)}body .touch-bar{position:absolute;right:0;top:0;z-index:9;height:2rem}body .quit,body .lock{visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;text-shadow:0 0 .1rem #fff}body .quit:hover,body .lock:hover{color:#ff5061}body .quit:active,body .lock:active{color:#ffb618}body .lock{right:4rem}body .lock.active{color:#3fc2a7}body:hover{background:rgba(29,35,44,0.15)}body:hover .quit,body:hover .lock{visibility:visible}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,10 @@ body {background:transparent;
|
|||
|
||||
}
|
||||
|
||||
.touch-bar {position:absolute;left:0;top:0;z-index:9;width:100%;height:2rem;}
|
||||
.touch-bar {position:absolute;right:0;top:0;z-index:9;height:2rem;}
|
||||
|
||||
.quit,
|
||||
.lock {visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;
|
||||
.lock {visibility:hidden;position:absolute;right:1rem;top:.5rem;font-size:1.8rem;font-weight:bold;text-shadow:0 0 .1rem #fff;
|
||||
&:hover {color:nth($cr, 1)}
|
||||
&:active {color:nth($co, 1)}
|
||||
}
|
||||
|
|
@ -39,7 +39,7 @@ body {background:transparent;
|
|||
}
|
||||
|
||||
|
||||
&:hover {background:rgba(29, 35, 44, 0.2);
|
||||
&:hover {background:rgba(29, 35, 44, 0.15);
|
||||
|
||||
.quit, .lock {visibility:visible;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem}
|
||||
.app{display:flex;width:100%;height:100%}.app .cover{overflow:hidden;flex:0 6rem;box-shadow:0 0 0.1rem rgba(0,0,0,0.1)}.app .cover img{width:100%}.app .ctrl{flex:1;padding:.8rem;line-height:2.2rem}.app .ctrl .title{font-weight:normal;font-size:1.2rem}.app .ctrl .btns{font-size:2.2rem}.app .ctrl .btns span:hover{color:#ffb618}.app .tools,.app .actions{display:flex;justify-content:center;align-items:center;position:absolute;right:.5rem;top:.5rem;line-height:2rem;font-size:1.6rem;text-align:center;color:#98acae}.app .tools span,.app .actions span{margin:0 .2rem}.app .tools span:hover,.app .actions span:hover{color:#3fc2a7}.app .tools span.close:hover,.app .actions span.close:hover{color:#ff5061}.app .tools span.active,.app .actions span.active{font-weight:bold}.app .actions{top:auto;bottom:.5rem}.app .actions span:nth-child(1){font-size:1.2rem}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,10 @@
|
|||
|
||||
@import "./var.scss";
|
||||
|
||||
// body {width:32rem;height:6rem;}
|
||||
|
||||
.app {display:flex;width:100%;height:100%;
|
||||
|
||||
.cover {overflow:hidden;flex:0 6rem;
|
||||
.cover {overflow:hidden;flex:0 6rem;box-shadow:0 0 .1rem rgba(0, 0, 0, .1);
|
||||
|
||||
img {width:100%;}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<script>window.LIBS_BASE_URL = location.origin + '/lib';</script>
|
||||
<script type="module" src="js/desktop-lrc.js"></script>
|
||||
</head>
|
||||
<body class="do-fn-noselect" :class="{'do-fn-drag': isMac || !isLock}" anot="lrc">
|
||||
<body class="do-fn-noselect do-fn-drag" anot="lrc">
|
||||
<div class="lrc-box">
|
||||
<section class="left">
|
||||
<span class="shadow" :text="lrc.l.txt"></span>
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
|
||||
<div class="touch-bar do-fn-nodrag">
|
||||
<a class="do-icon-lock lock" :class="{active: isLock}" :click="lock"></a>
|
||||
<a class="do-icon-lock lock" :visible="isMac" :class="{active: isLock}" :click="lock"></a>
|
||||
<a class="do-icon-close quit" :click="quit"></a>
|
||||
</div>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -124,10 +124,10 @@
|
|||
<span class="item prev s-icon-prev" data-key="prev"></span>
|
||||
<span
|
||||
class="item play"
|
||||
data-key="prev"
|
||||
data-key="play"
|
||||
:class="{'s-icon-play': !isPlaying, 's-icon-pause': isPlaying}">
|
||||
</span>
|
||||
<span class="item next s-icon-next" data-key="prev"></span>
|
||||
<span class="item next s-icon-next" data-key="next"></span>
|
||||
</div>
|
||||
|
||||
<div class="stat-box">
|
||||
|
|
|
|||
|
|
@ -52,7 +52,9 @@ Anot.ss('app-init', appInit)
|
|||
const LRC_WIN = createDesktopLrcWindow(MAIN_SCREEN)
|
||||
const MINI_WIN = createMiniWindow(MAIN_SCREEN, WIN)
|
||||
|
||||
// LRC_WIN.showInactive()
|
||||
// WIN.on('show', _ => {
|
||||
// MINI_WIN.hide()
|
||||
// })
|
||||
|
||||
Anot({
|
||||
$id: 'app',
|
||||
|
|
@ -207,6 +209,13 @@ Anot({
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 迷你模式开启时, 不响应托盘和dock栏的点击事件
|
||||
ipcRenderer.on('dock-click', () => {
|
||||
if (!MINI_WIN.isVisible()) {
|
||||
WIN.show()
|
||||
}
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
quit(force) {
|
||||
|
|
|
|||
|
|
@ -25,10 +25,9 @@ Anot({
|
|||
l: { bg: '#fff', txt: '暂无歌词...' },
|
||||
r: { bg: '', txt: '' }
|
||||
},
|
||||
isLock: JSON.parse(Anot.ss('lock'))
|
||||
isLock: +Anot.ls('lock-lrc')
|
||||
},
|
||||
mounted() {
|
||||
WIN.openDevTools()
|
||||
WIN.on('ktv-lrc', lrc => {
|
||||
this.lrc = lrc
|
||||
})
|
||||
|
|
@ -39,13 +38,9 @@ Anot({
|
|||
WIN.hide()
|
||||
},
|
||||
lock() {
|
||||
this.isLock = !this.isLock
|
||||
Anot.ss('lock', this.isLock)
|
||||
if (this.isMac) {
|
||||
WIN.setMovable(!this.isLock)
|
||||
} else {
|
||||
// location.reload()
|
||||
}
|
||||
WIN.setMovable(!!this.isLock)
|
||||
this.isLock = this.isLock ^ 1
|
||||
Anot.ls('lock-lrc', this.isLock)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@ app.once('ready', () => {
|
|||
// mac专属事件,点击dock栏图标,可激活窗口
|
||||
app.on('activate', _ => {
|
||||
if (win) {
|
||||
win.show()
|
||||
win.webContents.send('dock-click')
|
||||
}
|
||||
})
|
||||
} else {
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ module.exports = function(win) {
|
|||
{
|
||||
label: '显示主窗口',
|
||||
click() {
|
||||
win.show()
|
||||
win.webContents.send('dock-click')
|
||||
}
|
||||
},
|
||||
{ type: 'separator' },
|
||||
|
|
@ -27,7 +27,7 @@ module.exports = function(win) {
|
|||
|
||||
if (process.platform === 'darwin') {
|
||||
tray.on('click', _ => {
|
||||
win.show()
|
||||
win.webContents.send('dock-click')
|
||||
})
|
||||
tray.on('right-click', _ => {
|
||||
tray.popUpContextMenu(menuList)
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ exports.createMainWindow = function(icon) {
|
|||
|
||||
win.on('ready-to-show', _ => {
|
||||
win.show()
|
||||
win.openDevTools()
|
||||
// win.openDevTools()
|
||||
})
|
||||
|
||||
return win
|
||||
|
|
@ -50,7 +50,10 @@ exports.createErrorWindow = function() {
|
|||
maximizable: false,
|
||||
minimizable: false,
|
||||
resizable: false,
|
||||
titleBarStyle: 'hiddenInset'
|
||||
titleBarStyle: 'hiddenInset',
|
||||
webPreferences: {
|
||||
devTools: false
|
||||
}
|
||||
})
|
||||
win.setMenuBarVisibility(false)
|
||||
win.loadURL('app://local/depends.html')
|
||||
|
|
@ -76,7 +79,10 @@ exports.createDesktopLrcWindow = function(screen) {
|
|||
hasShadow: false,
|
||||
thickFrame: false,
|
||||
transparent: true,
|
||||
show: false
|
||||
show: false,
|
||||
webPreferences: {
|
||||
devTools: false
|
||||
}
|
||||
})
|
||||
|
||||
win.loadURL('app://local/desktop-lrc.html')
|
||||
|
|
@ -97,7 +103,10 @@ exports.createMiniWindow = function(screen) {
|
|||
x: screen.size.width - 320,
|
||||
y: 0,
|
||||
skipTaskbar: true,
|
||||
show: false
|
||||
show: false,
|
||||
webPreferences: {
|
||||
devTools: false
|
||||
}
|
||||
})
|
||||
|
||||
// win.loadURL('http://127.0.0.1:10240/mini-win.html')
|
||||
|
|
|
|||
Reference in New Issue