context menu improvements
- fixed previous change for artists breaking some parts - context menu direction class is now applied - context menus no longer go offscreen
This commit is contained in:
booploops
parent
d3c4c3fade
commit
0fbfb42385
3 changed files with 70 additions and 21 deletions
|
|
@ -5,11 +5,18 @@
|
|||
.menu-panel-body {
|
||||
background-color: @panelColors;
|
||||
backdrop-filter : blur(32px) saturate(180%);
|
||||
animation: menuIn .10s var(--appleEase);
|
||||
|
||||
&.menu-panel-body-down {
|
||||
animation: menuInDown .10s var(--appleEase);
|
||||
}
|
||||
|
||||
&.menu-panel-body-up {
|
||||
animation: menuInUp .10s var(--appleEase);
|
||||
}
|
||||
|
||||
@keyframes menuIn {
|
||||
}
|
||||
|
||||
@keyframes menuInUp {
|
||||
0% {
|
||||
opacity : 0;
|
||||
transform : translateY(-10px) translate3d(0,0,0);
|
||||
|
|
@ -23,6 +30,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@keyframes menuInDown {
|
||||
0% {
|
||||
opacity : 0;
|
||||
transform : translateY(10px) translate3d(0,0,0);
|
||||
background: @panelColorsFallback;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity : 1;
|
||||
transform : translateY(0);
|
||||
background: @panelColors;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,12 @@
|
|||
<div tabindex="0" class="cd-mediaitem-square-container"
|
||||
@click.self="app.routeView(item)"
|
||||
@controller-click="app.routeView(item)"
|
||||
@contextmenu.self="getContextMenu(item)"
|
||||
@contextmenu.self="getContextMenu"
|
||||
v-observe-visibility="{callback: visibilityChanged}"
|
||||
>
|
||||
<div v-if="reasonShown" class="reasonSP ">{{item?.meta?.reason?.stringForDisplay ?? ''}}</div>
|
||||
<div style="{'--spcolor': getBgColor()}"
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu(item)">
|
||||
class="cd-mediaitem-square" :class="getClasses()" @contextmenu="getContextMenu">
|
||||
<template>
|
||||
<div class="artwork-container">
|
||||
<div class="unavailable-overlay" v-if="unavailable">
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
:type="item.type"></mediaitem-artwork>
|
||||
</div>
|
||||
<button class="menu-btn" v-if="!nomenu.includes(item.type)"
|
||||
@click="getContextMenu(item)"><%- include("../svg/more.svg") %></button>
|
||||
@click="getContextMenu"><%- include("../svg/more.svg") %></button>
|
||||
<button class="play-btn" v-if="!noplay.includes(item.type)"
|
||||
@click="app.playMediaItem(item)"><%- include("../svg/play.svg") %></button>
|
||||
<div class="badge-container" v-if="itemBadges.length != 0">
|
||||
|
|
@ -108,12 +108,11 @@
|
|||
let color = `#${(this.item.attributes.artwork != null && this.item.attributes.artwork.bgColor != null) ? (this.item.attributes.artwork.bgColor) : ``}`
|
||||
return color
|
||||
},
|
||||
getContextMenu(item) {
|
||||
console.log(item)
|
||||
if (item.type == "artists") {
|
||||
return this.artistMenu(item)
|
||||
getContextMenu(event) {
|
||||
if (this.item.type == "artists") {
|
||||
return this.artistMenu(event)
|
||||
} else {
|
||||
return this.contextMenu(item)
|
||||
return this.contextMenu(event)
|
||||
}
|
||||
},
|
||||
getSubtitle() {
|
||||
|
|
@ -509,6 +508,7 @@
|
|||
}
|
||||
},
|
||||
async artistMenu (event) {
|
||||
console.debug(this.item)
|
||||
let self = this
|
||||
let followAction = "follow"
|
||||
let followActions = {
|
||||
|
|
@ -516,21 +516,21 @@
|
|||
icon: "./assets/feather/plus-circle.svg",
|
||||
name: app.getLz('action.follow'),
|
||||
action: ()=>{
|
||||
self.app.cfg.home.followedArtists.push(event.id)
|
||||
self.app.cfg.home.followedArtists.push(this.item.id)
|
||||
}
|
||||
},
|
||||
unfollow: {
|
||||
icon: "./assets/feather/x-circle.svg",
|
||||
name: app.getLz('action.unfollow'),
|
||||
action: ()=>{
|
||||
let index = self.app.cfg.home.followedArtists.indexOf(event.id)
|
||||
let index = self.app.cfg.home.followedArtists.indexOf(this.item.id)
|
||||
if (index > -1) {
|
||||
self.app.cfg.home.followedArtists.splice(index, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if(self.app.cfg.home.followedArtists.includes(event.id)) {
|
||||
if(self.app.cfg.home.followedArtists.includes(this.item.id)) {
|
||||
followAction = "unfollow"
|
||||
}
|
||||
app.showMenuPanel({
|
||||
|
|
@ -539,7 +539,7 @@
|
|||
icon: "./assets/feather/play.svg",
|
||||
name: app.getLz('action.startRadio'),
|
||||
action: ()=>{
|
||||
app.mk.setStationQueue({artist:event.id}).then(()=>{
|
||||
app.mk.setStationQueue({artist:this.item.id}).then(()=>{
|
||||
app.mk.play()
|
||||
})
|
||||
}
|
||||
|
|
@ -549,7 +549,7 @@
|
|||
icon: "./assets/feather/share.svg",
|
||||
name: app.getLz('term.share'),
|
||||
action: ()=>{
|
||||
self.app.copyToClipboard(event.attributes.url)
|
||||
self.app.copyToClipboard(this.item.id.attributes.url)
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script type="text/x-template" id="cider-menu-panel">
|
||||
<div class="menu-panel" @click.self="menuPanel.visible = false" @contextmenu.self="menuPanel.visible = false">
|
||||
|
||||
<div class="menu-panel-body" :style="getStyle()">
|
||||
<div class="menu-panel-body" ref="menubody" :style="elStyle" :class="getBodyClasses()">
|
||||
<div class="menu-header-text" v-if="content.name != ''">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
|
|
@ -46,18 +46,32 @@
|
|||
getSvgIcon: this.$root.getSvgIcon,
|
||||
position: [0, 0],
|
||||
size: [0, 0],
|
||||
event: this.$root.menuPanel.event
|
||||
event: this.$root.menuPanel.event,
|
||||
direction: "down",
|
||||
elStyle: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
console.log("MOUNTED")
|
||||
if (this.event) {
|
||||
this.position = [this.event.clientX, this.event.clientY];
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
|
||||
// this.size = [document.querySelector(".menu-panel-body").offsetWidth, document.querySelector(".menu-panel-body").offsetHeight];
|
||||
// ugly hack
|
||||
setTimeout(this.getStyle, 1)
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
getBodyClasses() {
|
||||
if (this.direction == "down") {
|
||||
return ["menu-panel-body-down"]
|
||||
} else if (this.direction == "up") {
|
||||
return ["menu-panel-body-up"]
|
||||
} else {
|
||||
return ["foo"]
|
||||
}
|
||||
},
|
||||
getClasses(item) {
|
||||
if (item["active"]) {
|
||||
return "active";
|
||||
|
|
@ -65,7 +79,8 @@
|
|||
},
|
||||
getStyle() {
|
||||
let style = {}
|
||||
|
||||
console.debug(this.$refs.menubody)
|
||||
this.size = [this.$refs.menubody.offsetWidth, this.$refs.menubody.offsetHeight];
|
||||
if (this.event) {
|
||||
style["position"] = "absolute";
|
||||
style["left"] = this.event.clientX + "px";
|
||||
|
|
@ -77,8 +92,21 @@
|
|||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
|
||||
|
||||
// if the panel is above the mouse, set the direction to up
|
||||
if (this.event.clientY < this.size[1]) {
|
||||
this.direction = "up";
|
||||
} else {
|
||||
this.direction = "down";
|
||||
}
|
||||
return style
|
||||
// check if the panel is too long and goes off the screen vertically,
|
||||
// if so move it upwards
|
||||
if (this.event.clientY + this.size[1] > window.innerHeight) {
|
||||
style["top"] = (this.event.clientY - this.size[1]) + "px";
|
||||
}
|
||||
}
|
||||
this.elStyle = style;
|
||||
},
|
||||
getItemStyle(item) {
|
||||
let style = {}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue