ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

新增全屏状态

Browse Source
This commit is contained in:
lyswhut
2022-03-08 17:19:34 +08:00
parent 05f6a953ea
commit 3acc0931d8
17 changed files with 161 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/core/Aside/ControlBtns.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :class="$style.controlBtn">
<div :class="$style.controlBtn" v-show="!isFullscreen">
<button type="button" :class="[$style.btn, $style.close]" :tips="$t('close')" @click="close">
<svg :class="$style.controlBtniIcon" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="100%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-close"></use>
@@ -16,10 +16,12 @@
<script>
import { base as eventBaseName } from '@renderer/event/names'
// import { getRandom } from '../../utils'
import { isFullscreen } from '@renderer/core/share'
export default {
setup() {
return {
isFullscreen,
min() {
window.eventHub.emit(eventBaseName.min)
},
src/renderer/components/core/Aside/NavBar.vue
+20 -4
View File
@@ -1,7 +1,7 @@
<template>
<div :class="$style.menu">
<ul :class="$style.list">
<li v-for="item in menus" :key="item.to">
<li v-for="item in menus" :key="item.to" :class="$style.navItem">
<router-link :class="$style.link" :active-class="$style.active" :to="item.to" :tips="item.tips">
<div :class="$style.icon">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" :viewBox="item.iconSize" space="preserve">
@@ -98,13 +98,26 @@ export default {
// .mixin-ellipsis-1;
// }
}
.navItem {
position: relative;
&:before {
content: '';
display: block;
width: 100%;
padding-bottom: 84%;
}
}
.link {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
// display: block;
box-sizing: border-box;
text-decoration: none;
position: relative;
padding: 18px 3px;
// padding: 18px 3px;
// margin: 5px 0;
// border-left: 5px solid transparent;
transition: @transition-theme;
@@ -114,6 +127,9 @@ export default {
font-size: 11.5px;
text-align: center;
outline: none;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.3s ease;
// border-radius: @radius-border;
src/renderer/components/core/Aside/index.vue
+14 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :class="$style.aside">
<div :class="[$style.aside, { [$style.fullscreen]: isFullscreen }]">
<ControlBtns v-if="setting.controlBtnPosition == 'left'" />
<div :class="$style.logo" v-else>L X</div>
<NavBar />
@@ -8,6 +8,7 @@
<script>
import { mapGetters } from 'vuex'
import { isFullscreen } from '@renderer/core/share'
import ControlBtns from './ControlBtns'
import NavBar from './NavBar'
@@ -15,6 +16,11 @@ import NavBar from './NavBar'
export default {
name: 'CoreAside',
components: { ControlBtns, NavBar },
setup() {
return {
isFullscreen,
}
},
computed: {
...mapGetters(['setting']),
},
@@ -36,6 +42,13 @@ export default {
-webkit-user-select: none;
display: flex;
flex-flow: column nowrap;
&.fullscreen {
-webkit-app-region: no-drag;
.logo {
display: none;
}
}
}
.logo {
src/renderer/components/core/PlayDetail/index.vue
+12 -1
View File
@@ -1,6 +1,6 @@
<template lang="pug">
transition(enter-active-class="animated lightSpeedIn" leave-active-class="animated slideOutDown" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave")
div(:class="$style.container" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
div(:class="[$style.container, , { [$style.fullscreen]: isFullscreen }]" @contextmenu="handleContextMenu" v-if="isShowPlayerDetail")
//- div(:class="$style.bg" :style="bgStyle")
//- div(:class="$style.bg2")
div(:class="[$style.header, $style.controlBtnLeft]" v-if="setting.controlBtnPosition == 'left'")
@@ -52,6 +52,7 @@ transition(enter-active-class="animated lightSpeedIn" leave-active-class="animat
<script>
import { useRefGetter, ref } from '@renderer/utils/vueTools'
import { isFullscreen } from '@renderer/core/share'
import { base as eventBaseName } from '@renderer/event/names'
import {
isShowPlayerDetail,
@@ -117,6 +118,7 @@ export default {
handleAfterEnter,
handleAfterLeave,
visibled,
isFullscreen,
min() {
window.eventHub.emit(eventBaseName.min)
},
@@ -161,6 +163,15 @@ export default {
box-sizing: border-box;
}
&.fullscreen {
.header {
-webkit-app-region: no-drag;
.close, .min {
display: none;
}
}
}
}
// .bg {
// position: absolute;
src/renderer/components/core/Toolbar/ControlBtns.vue
+3 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :class="$style.control">
<div :class="$style.control" v-show="!isFullscreen">
<button type="button" :class="[$style.btn, $style.min]" :tips="$t('min')" @click="min">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="60%" viewBox="0 0 24 24" space="preserve">
<use xlink:href="#icon-window-minimize-2"></use>
@@ -15,6 +15,7 @@
<script>
import { base as eventBaseName } from '@renderer/event/names'
import { isFullscreen } from '@renderer/core/share'
// import { getRandom } from '../../utils'
export default {
@@ -29,6 +30,7 @@ export default {
close() {
window.eventHub.emit(eventBaseName.close)
},
isFullscreen,
}
},
}
src/renderer/components/core/Toolbar/index.vue
+14 -1
View File
@@ -1,5 +1,5 @@
<template>
<div :class="[$style.toolbar, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]">
<div :class="[$style.toolbar, { [$style.fullscreen]: isFullscreen }, setting.controlBtnPosition == 'left' ? $style.controlBtnLeft : $style.controlBtnRight]">
<SearchInput />
<div :class="$style.logo" v-if="setting.controlBtnPosition == 'left'">L X</div>
<ControlBtns v-else />
@@ -11,10 +11,16 @@ import { mapGetters } from 'vuex'
import ControlBtns from './ControlBtns'
import SearchInput from './SearchInput'
import { isFullscreen } from '@renderer/core/share'
export default {
name: 'CoreToolBar',
components: { SearchInput, ControlBtns },
setup() {
return {
isFullscreen,
}
},
computed: {
...mapGetters(['setting']),
},
@@ -34,6 +40,13 @@ export default {
-webkit-app-region: drag;
z-index: 2;
&.fullscreen {
-webkit-app-region: no-drag;
.logo {
display: none;
}
}
&.controlBtnLeft {
.control {
display: none;