[applemusic] Fix dock styles and scrolling

This commit is contained in:
SuperSaltyGamer
2023-07-17 19:35:51 +03:00
parent 07351b40fd
commit ef2745ec5f
4 changed files with 101 additions and 105 deletions

File diff suppressed because one or more lines are too long

View File

@@ -1,7 +1,7 @@
// ==UserScript==
// @namespace ame-applemusic
// @name Ame (Apple Music)
// @version 1.6.0
// @version 1.6.1
// @author SuperSaltyGamer
// @run-at document-start
// @match https://music.apple.com/*

View File

@@ -1,5 +1,5 @@
import Handsontable from "handsontable/base";
import { registerPlugin, AutoColumnSize, ManualColumnMove, CopyPaste } from "handsontable/plugins";
import { registerPlugin, AutoColumnSize, ManualColumnMove, CopyPaste, DragToScroll } from "handsontable/plugins";
import infoIcon from "../assets/icons/info.svg?raw";
import { offAlbumRoute, onAlbumRoute } from "../glue/routing";
import { createButtonElement } from "../glue/sidebar";
@@ -10,6 +10,7 @@ import { Album, Resource } from "../types";
registerPlugin(AutoColumnSize);
registerPlugin(ManualColumnMove);
registerPlugin(CopyPaste);
registerPlugin(DragToScroll);
interface Row {
id: string;
@@ -138,6 +139,8 @@ async function showDock() {
let columns: (keyof Row)[] = JSON.parse(localStorage.getItem("ame-info-columns") || "[]");
if (columns.length !== COLUMN_ORDER.length) columns = COLUMN_ORDER;
document.body.appendChild(dockEl);
const table = new Handsontable(tableEl, {
licenseKey: "non-commercial-and-evaluation",
data: [],
@@ -147,7 +150,7 @@ async function showDock() {
manualColumnMove: true,
height: Math.max(320, Math.floor(innerHeight / 3)),
stretchH: "all",
fillHandle: "horizontal",
wordWrap: false,
renderer(instance, td, rowIndex, colIndex, prop, value, cellProperties) {
const row = instance.getSourceDataAtRow(rowIndex) as Row;
@@ -170,8 +173,7 @@ async function showDock() {
}
});
document.body.appendChild(dockEl);
const containerEl = document.querySelector<HTMLElement>('.app-container')!;
const containerEl = document.querySelector<HTMLElement>(".app-container")!;
containerEl.style.paddingBottom = dockEl!.clientHeight + "px";
async function render() {
@@ -225,7 +227,7 @@ function hideDock() {
dockEl = null;
const containerEl = document.querySelector<HTMLElement>('.app-container')!;
containerEl.style.paddingBottom = "";
if (containerEl) containerEl.style.paddingBottom = "";
}
function formatDuration(ms: number): string {

View File

@@ -226,17 +226,15 @@ dialog *,
#ame-dock-title {
width: 100%;
padding: .5rem;
background-color: #252526;
background-color: var(--keyColorBG);
color: white;
font-weight: bold;
border-top: 1px solid #3b3b3c;
border-bottom: 1px solid #3b3b3c;
cursor: pointer;
}
#ame-dock-control {
padding: .5rem;
background-color: #1f1f1f;
background-color: var(--pageBG);
}
#ame-dock-control input,
@@ -247,7 +245,3 @@ dialog *,
#ame-dock-control button {
padding: .1rem .25rem;
}
#ame-dock-title:hover {
background-color: #39393b;
}