From b625280f81fe98fec197c72a084270494d83a460 Mon Sep 17 00:00:00 2001 From: Haorui Harry Zheng <98264403+zhngharry@users.noreply.github.com> Date: Sun, 7 Jul 2024 17:47:13 +0200 Subject: [PATCH] feat: improve settings dialog (#792) * Improve spacing * Partially revert spacing change * Partially revert spacing * Implement raw DnD Skeleton * Add styling * Add styles * Add disable logic * Lint * Clean up code * Improve CSS, add DnD indicator * Remove TabRow (no longer used) and fix biome complaints * Add description --------- Co-authored-by: Isaac --- biome.json | 2 +- package.json | 3 +- pnpm-lock.yaml | 135 +++++++++++++++++++++ src/components/Modals/Settings/DnDList.tsx | 106 ++++++++++++++++ src/components/Modals/Settings/TabRow.tsx | 73 ----------- src/components/Modals/Settings/index.tsx | 74 ++++++----- src/resources/locales/ca.json | 1 + src/resources/locales/de-DE.json | 1 + src/resources/locales/en.json | 1 + src/resources/locales/es.json | 1 + src/resources/locales/et.json | 1 + src/resources/locales/fr.json | 1 + src/resources/locales/it.json | 1 + src/resources/locales/ja.json | 1 + src/resources/locales/pl.json | 1 + src/resources/locales/ru.json | 1 + src/resources/locales/uk.json | 1 + src/resources/locales/zh-CN.json | 1 + src/resources/locales/zh-TW.json | 1 + src/styles/components/_settings.scss | 36 +++++- 20 files changed, 333 insertions(+), 109 deletions(-) create mode 100644 src/components/Modals/Settings/DnDList.tsx delete mode 100644 src/components/Modals/Settings/TabRow.tsx diff --git a/biome.json b/biome.json index 1fb32962..2ba78d13 100644 --- a/biome.json +++ b/biome.json @@ -28,7 +28,7 @@ }, "javascript": { "formatter": { - "trailingComma": "none", + "trailingCommas": "none", "arrowParentheses": "always" } }, diff --git a/package.json b/package.json index 093a3049..38e6d087 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,7 @@ "build:local": "spicetify-creator --out=dist --minify", "build:prod": "pnpm build:local && pnpm copy:docs", "copy:docs": "copyfiles README.md dist/", - "lint": "biome check --apply *", + "lint": "biome check --write ./src", "lint:ci": "biome check *", "type-check": "tsc --noEmit", "watch": "spicetify-creator --watch", @@ -41,6 +41,7 @@ "i18next": "^23.11.3", "i18next-browser-languagedetector": "^8.0.0", "prismjs": "^1.29.0", + "react-beautiful-dnd": "^13.1.1", "react-dropdown": "^1.11.0", "react-i18next": "^14.1.0", "react-simple-code-editor": "^0.13.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7c0c66d0..bc7111a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -23,6 +23,9 @@ importers: prismjs: specifier: ^1.29.0 version: 1.29.0 + react-beautiful-dnd: + specifier: ^13.1.1 + version: 13.1.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-dropdown: specifier: ^1.11.0 version: 1.11.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) @@ -132,12 +135,18 @@ packages: '@types/chroma-js@2.4.4': resolution: {integrity: sha512-/DTccpHTaKomqussrn+ciEvfW4k6NAHzNzs/sts1TCqg333qNxOhy8TNIoQCmbGG3Tl8KdEhkGAssb1n3mTXiQ==} + '@types/hoist-non-react-statics@3.3.5': + resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==} + '@types/prop-types@15.7.8': resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==} '@types/react-dom@18.2.0': resolution: {integrity: sha512-8yQrvS6sMpSwIovhPOwfyNf2Wz6v/B62LFSVYQ85+Rq3tLsBIG7rP5geMxaijTUxSkrO6RzN/IRuIAADYQsleA==} + '@types/react-redux@7.1.33': + resolution: {integrity: sha512-NF8m5AjWCkert+fosDsN3hAlHzpjSiXlVy9EgQEmLoBhaNXbmyeGs/aj5dQzKuF+/q+S7JQagorGDW8pJ28Hmg==} + '@types/react@18.2.0': resolution: {integrity: sha512-0FLj93y5USLHdnhIhABk83rm8XEGA7kH3cr+YUlvxoUGp1xNt/DINUMvqPxLyOQMzLmZe8i4RTHbvb8MC7NmrA==} @@ -233,6 +242,9 @@ packages: core-util-is@1.0.3: resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + css-box-model@1.2.1: + resolution: {integrity: sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==} + cssesc@3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -489,6 +501,9 @@ packages: resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==} engines: {node: '>= 0.4.0'} + hoist-non-react-statics@3.3.2: + resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} + homedir-polyfill@1.0.3: resolution: {integrity: sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==} engines: {node: '>=0.10.0'} @@ -622,6 +637,9 @@ packages: resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==} engines: {node: '>=6'} + memoize-one@5.2.1: + resolution: {integrity: sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==} + mime@1.6.0: resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} engines: {node: '>=4'} @@ -668,6 +686,10 @@ packages: resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} engines: {node: '>=0.10.0'} + object-assign@4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} + engines: {node: '>=0.10.0'} + once@1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} @@ -748,9 +770,21 @@ packages: process-nextick-args@2.0.1: resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==} + prop-types@15.8.1: + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + prr@1.0.1: resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} + raf-schd@4.0.3: + resolution: {integrity: sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==} + + react-beautiful-dnd@13.1.1: + resolution: {integrity: sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ==} + peerDependencies: + react: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom@18.2.0: resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -775,6 +809,24 @@ packages: react-native: optional: true + react-is@16.13.1: + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + + react-is@17.0.2: + resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==} + + react-redux@7.2.9: + resolution: {integrity: sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==} + peerDependencies: + react: ^16.8.3 || ^17 || ^18 + react-dom: '*' + react-native: '*' + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + react-simple-code-editor@0.13.1: resolution: {integrity: sha512-XYeVwRZwgyKtjNIYcAEgg2FaQcCZwhbarnkJIV20U2wkCU9q/CPFBo8nRXrK4GXUz3AvbqZFsZRrpUTkqqEYyQ==} peerDependencies: @@ -795,6 +847,9 @@ packages: resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} engines: {node: '>=8.10.0'} + redux@4.2.1: + resolution: {integrity: sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==} + regenerator-runtime@0.14.0: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} @@ -900,6 +955,9 @@ packages: through2@2.0.5: resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==} + tiny-invariant@1.3.3: + resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} + tmp@0.2.1: resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==} engines: {node: '>=8.17.0'} @@ -939,6 +997,11 @@ packages: peerDependencies: browserslist: '>= 4.21.0' + use-memo-one@1.1.3: + resolution: {integrity: sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} @@ -1024,12 +1087,24 @@ snapshots: '@types/chroma-js@2.4.4': {} + '@types/hoist-non-react-statics@3.3.5': + dependencies: + '@types/react': 18.2.0 + hoist-non-react-statics: 3.3.2 + '@types/prop-types@15.7.8': {} '@types/react-dom@18.2.0': dependencies: '@types/react': 18.2.0 + '@types/react-redux@7.1.33': + dependencies: + '@types/hoist-non-react-statics': 3.3.5 + '@types/react': 18.2.0 + hoist-non-react-statics: 3.3.2 + redux: 4.2.1 + '@types/react@18.2.0': dependencies: '@types/prop-types': 15.7.8 @@ -1140,6 +1215,10 @@ snapshots: core-util-is@1.0.3: {} + css-box-model@1.2.1: + dependencies: + tiny-invariant: 1.3.3 + cssesc@3.0.0: {} csstype@3.1.2: {} @@ -1345,6 +1424,10 @@ snapshots: has@1.0.4: {} + hoist-non-react-statics@3.3.2: + dependencies: + react-is: 16.13.1 + homedir-polyfill@1.0.3: dependencies: parse-passwd: 1.0.0 @@ -1470,6 +1553,8 @@ snapshots: semver: 5.7.2 optional: true + memoize-one@5.2.1: {} + mime@1.6.0: optional: true @@ -1508,6 +1593,8 @@ snapshots: normalize-range@0.1.2: {} + object-assign@4.1.1: {} + once@1.4.0: dependencies: wrappy: 1.0.2 @@ -1579,9 +1666,31 @@ snapshots: process-nextick-args@2.0.1: {} + prop-types@15.8.1: + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + react-is: 16.13.1 + prr@1.0.1: optional: true + raf-schd@4.0.3: {} + + react-beautiful-dnd@13.1.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + '@babel/runtime': 7.24.1 + css-box-model: 1.2.1 + memoize-one: 5.2.1 + raf-schd: 4.0.3 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + react-redux: 7.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + redux: 4.2.1 + use-memo-one: 1.1.3(react@18.2.0) + transitivePeerDependencies: + - react-native + react-dom@18.2.0(react@18.2.0): dependencies: loose-envify: 1.4.0 @@ -1603,6 +1712,22 @@ snapshots: optionalDependencies: react-dom: 18.2.0(react@18.2.0) + react-is@16.13.1: {} + + react-is@17.0.2: {} + + react-redux@7.2.9(react-dom@18.2.0(react@18.2.0))(react@18.2.0): + dependencies: + '@babel/runtime': 7.24.1 + '@types/react-redux': 7.1.33 + hoist-non-react-statics: 3.3.2 + loose-envify: 1.4.0 + prop-types: 15.8.1 + react: 18.2.0 + react-is: 17.0.2 + optionalDependencies: + react-dom: 18.2.0(react@18.2.0) + react-simple-code-editor@0.13.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: react: 18.2.0 @@ -1633,6 +1758,10 @@ snapshots: dependencies: picomatch: 2.3.1 + redux@4.2.1: + dependencies: + '@babel/runtime': 7.24.1 + regenerator-runtime@0.14.0: {} require-directory@2.1.1: {} @@ -1754,6 +1883,8 @@ snapshots: readable-stream: 2.3.8 xtend: 4.0.2 + tiny-invariant@1.3.3: {} + tmp@0.2.1: dependencies: rimraf: 3.0.2 @@ -1782,6 +1913,10 @@ snapshots: escalade: 3.1.1 picocolors: 1.0.0 + use-memo-one@1.1.3(react@18.2.0): + dependencies: + react: 18.2.0 + util-deprecate@1.0.2: {} void-elements@3.1.0: {} diff --git a/src/components/Modals/Settings/DnDList.tsx b/src/components/Modals/Settings/DnDList.tsx new file mode 100644 index 00000000..85ee2595 --- /dev/null +++ b/src/components/Modals/Settings/DnDList.tsx @@ -0,0 +1,106 @@ +import React, { Component } from "react"; +import { DragDropContext, Draggable, type DropResult, Droppable } from "react-beautiful-dnd"; +import { LOCALSTORAGE_KEYS } from "../../../constants"; +import type { Config, TabItemConfig } from "../../../types/marketplace-types"; + +const DnDList = (props: { + modalConfig: Config; + updateConfig: (CONFIG: Config) => void; +}) => { + // Get Value of CSS variable + const colorVariable = getComputedStyle(document.body).getPropertyValue("--spice-button-disabled"); + + const getItemStyle = (isDragging, draggableStyle, isEnabled) => ({ + borderRadius: "5px", + border: isEnabled ? `2px solid ${colorVariable}` : "2px solid red", + userSelect: "none", + paddingTop: 12, + paddingBottom: 12, + width: "110px", + display: "flex", + alignItems: "center", + justifyContent: "center", + textDecoration: isEnabled ? "none" : "line-through", + ...draggableStyle + }); + + const getListStyle = (isDraggingOver) => ({ + display: "flex", + paddingTop: 8, + paddingBottom: 8, + gap: 8 + }); + + const onDragEnd = (result: DropResult) => { + const { source, destination } = result; + if (!destination) return; + + reorder(props.modalConfig.tabs, source.index, destination.index); + }; + + function reorder(tabs: TabItemConfig[], start: number, end: number) { + const result = Array.from(tabs); + const [removed] = result.splice(start, 1); + result.splice(end, 0, removed); + + props.modalConfig.tabs = result; + + localStorage.setItem(LOCALSTORAGE_KEYS.tabs, JSON.stringify(props.modalConfig.tabs)); + + props.updateConfig(props.modalConfig); + } + + const onToggleEnabled = (name) => { + const updatedTabs = props.modalConfig.tabs.map((tab) => (tab.name === name ? { ...tab, enabled: !tab.enabled } : tab)); + + props.modalConfig.tabs = updatedTabs; + localStorage.setItem(LOCALSTORAGE_KEYS.tabs, JSON.stringify(props.modalConfig.tabs)); + props.updateConfig(props.modalConfig); + }; + + return ( + + + {(provided, snapshot) => ( +
+ {props.modalConfig.tabs.map((item, index) => ( + + {(provided, snapshot) => ( +
onToggleEnabled(item.name)} + > +
+ + + + {item.name === "Extensions" ? "Extens." : item.name} +
+
+ )} + + ))} + {provided.placeholder} +
+ )} + + + ); +}; + +export default DnDList; diff --git a/src/components/Modals/Settings/TabRow.tsx b/src/components/Modals/Settings/TabRow.tsx deleted file mode 100644 index 710c3434..00000000 --- a/src/components/Modals/Settings/TabRow.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { t } from "i18next"; -import React from "react"; -import { LOCALSTORAGE_KEYS } from "../../../constants"; -import type { Config } from "../../../types/marketplace-types"; - -import Toggle from "../../Toggle"; - -const TabRow = (props: { - name: string; - modalConfig: Config; - updateConfig: (CONFIG: Config) => void; -}) => { - const toggleId = `toggle:${props.name}`; - - // Tab index? - const index: number = props.modalConfig.tabs.reduce((accum, tab, index) => { - return tab.name === props.name ? index : accum; - }, -1); // TODO: null protect... - const { enabled } = props.modalConfig.tabs[index]; - - const clickToggle = (e) => { - props.modalConfig.tabs[index].enabled = e.target.checked; - - // Persist the new enabled tabs - localStorage.setItem(LOCALSTORAGE_KEYS.tabs, JSON.stringify(props.modalConfig.tabs)); - // Saves the config settings to app as well as SettingsModal state - props.updateConfig(props.modalConfig); - }; - - function moveTab(currPos, dir) { - const newPos = currPos + dir; - - const temp = props.modalConfig.tabs[newPos]; - props.modalConfig.tabs[newPos] = props.modalConfig.tabs[currPos]; - props.modalConfig.tabs[currPos] = temp; - - localStorage.setItem(LOCALSTORAGE_KEYS.tabs, JSON.stringify(props.modalConfig.tabs)); - - // Saves the config settings to app as well as SettingsModal state - props.updateConfig(props.modalConfig); - } - - return ( -
- -
- - - -
-
- ); -}; - -export default TabRow; diff --git a/src/components/Modals/Settings/index.tsx b/src/components/Modals/Settings/index.tsx index edd7eda0..ecfd4f05 100644 --- a/src/components/Modals/Settings/index.tsx +++ b/src/components/Modals/Settings/index.tsx @@ -7,7 +7,7 @@ import { getLocalStorageDataFromKey, resetMarketplace, sleep } from "../../../lo import type { Config } from "../../../types/marketplace-types"; import Button from "../../Button"; import ConfigRow from "./ConfigRow"; -import TabRow from "./TabRow"; +import DnDList from "./DnDList"; interface Props { CONFIG: Config; @@ -73,46 +73,54 @@ const SettingsModal = ({ CONFIG, updateAppConfig }: Props) => { return (
-

{t("settings.optionsHeading")}

- - - - - - - - {AlbumArtColorDropDowns} - -

{t("settings.tabsHeading")}

-
- {modalConfig.tabs.map(({ name }) => { - return ; - })} +
+

{t("settings.optionsHeading")}

+ + + + + + + + {AlbumArtColorDropDowns}
-

{t("settings.resetHeading")}

-
- -
- +
+

{t("settings.tabsHeading")}

+ + +
+ +
+

{t("settings.resetHeading")}

+
+ +
+ +
-

{t("settings.backupHeading")}

-
- -
- +
+

{t("settings.backupHeading")}

+
+ +
+ +
-

{t("settings.versionHeading")}

-
- -
- +
+
+ +
+ +
diff --git a/src/resources/locales/ca.json b/src/resources/locales/ca.json index 1a4182f3..0ea0864f 100644 --- a/src/resources/locales/ca.json +++ b/src/resources/locales/ca.json @@ -14,6 +14,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturat:El color més destacat però amb molta menys bror \n Vibrant Clar: El color més villantibrant amb la brillantor augmentada una mica \n Prominent: El color més destacat a la portada de l'Àlbum \n Vibrant: El color més vibrant a la portada de l'Àlbum", "almbumArtColorsModeToolTip": "Monochrome Dark: Un esquema de colors basat en el color principal seleccionat, emprant diferentes tonalitats i barrejant tons grisos per crear l'esquema de colors, aquest és l'invers de Monochrome Light. \n Monochrome Light: Un esquema de colors basat en el color principal seleccionat, emprant diferentes tonalitats i barrejant tons grisos per crear l'esquema de colors. El colors del fins de Monochrome light seria el color de primer pla en Monochrome Dark i viceversa. \n Analògic: Un esquema de colors basat en el color principal seleccionat, emprant els colors adjacents en la roda de colors. \n Analògic Complementari: Un esquema de colors basat en el color principal seleccionat, emprant els colors adjacents en la roda de colors i el color complementari. \n Tríada: Un esquema de colors basat en el color principal seleccionat, emprant els colors de la roda de colors que estan separats de manera equidistant del color principal. \n Quad: Un esquema de colors basat en el color principal seleccionat, emprant els colors que es troben separats 90 graus entre si en la roda de colors.", "tabsHeading": "Pestanyes", + "tabsDescription": "Arrossegueu i deixeu anar per canviar l'ordre, feu clic per activar/desactivar", "resetHeading": "Restablir", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Borrar totes les extensions, temes i preferències", diff --git a/src/resources/locales/de-DE.json b/src/resources/locales/de-DE.json index f4c2d09a..37d09ba0 100644 --- a/src/resources/locales/de-DE.json +++ b/src/resources/locales/de-DE.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Entsättigt: Die am stärksten ausgeprägte Farbe, aber mit viel weniger Helligkeit \n Leicht lebhaft: Die am stärksten leuchtende Farbe, aber mit etwas mehr Helligkeit \n Prominent: Die Farbe, die im Albumcover am stärksten hervortritt \n Lebendig: Die lebendigste Farbe im Albumcover", "almbumArtColorsModeToolTip": "Monochrom Dunkel: Ein Farbschema, das direkt auf der ausgewählten Hauptfarbe basiert, wobei verschiedene Schattierungen der Hauptfarbe verwendet und Grautöne beigemischt werden, um ein Farbschema zu erstellen; dies ist das Gegenteil von Monochrom Hell. \n Monochrom Hell: Ein Farbschema, das direkt auf der ausgewählten Hauptfarbe basiert, wobei verschiedene Schattierungen der Hauptfarbe verwendet und Grautöne beigemischt werden, um ein Farbschema zu erstellen. Der Hintergrund von Monochrom hell wäre die Vordergrund- oder Textfarbe bei Monochrom dunkel und umgekehrt. \n Analogisch: Ein Farbschema, das auf der ausgewählten Hauptfarbe basiert und die Farben verwendet, die auf dem Farbkreis neben der Hauptfarbe liegen. \n Analogisch Komplementär: Ein Farbschema, das auf der ausgewählten Hauptfarbe basiert, wobei die Farben neben der Hauptfarbe auf dem Farbkreis und die Komplementärfarbe verwendet werden. \n Dreiklang: Ein Farbschema auf der Grundlage der ausgewählten Hauptfarbe, bei dem die Farben auf dem Farbkreis verwendet werden, die gleich weit von der Hauptfarbe entfernt sind. \n Vierer: Ein Farbschema auf der Grundlage der ausgewählten Hauptfarbe, bei dem die Farben auf dem Farbkreis verwendet werden, die 90 Grad von der Hauptfarbe entfernt sind.", "tabsHeading": "Register", + "tabsDescription": "Ziehen und Ablegen zum Ändern der Reihenfolge, Klicken zum Aktivieren/Deaktivieren", "resetHeading": "Zurücksetzen", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Deinstalliere alle Erweiterungen und Themes und setze Präferenzen zurück", diff --git a/src/resources/locales/en.json b/src/resources/locales/en.json index e03c9c23..2111b432 100644 --- a/src/resources/locales/en.json +++ b/src/resources/locales/en.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturated: The colour that is the most prominent but with much less brightness \n Light Vibrant: The most Vibrant colour but with the brightness amped up a tad \n Prominent: The colour that pops the most in the album art \n Vibrant: The most vibrant colour in the album art", "almbumArtColorsModeToolTip": "Monochrome Dark: A colour scheme based directly on the main colour selected, using different shades of the main colour and mixing in greys to create a colour scheme, this is the inverse of Monochrome Light. \n Monochrome Light: A colour scheme based directly on the main colour selected, using different shades of the main colour and mixing in greys to create a colour scheme. The background of monochrome light would be the foreground or text colour on Monochrome Dark and vice versa. \n Analogic: A colour scheme based on the main colour selected, using the colours adjacent to the main colour on the colour wheel. \n Analogic Complementary: A colour scheme based on the main colour selected, using the colours adjacent to the main colour on the colour wheel and the complementary colour. \n Triad: A colour scheme based on the main colour selected, using the colours on the colour wheel that are equidistant from the main colour. \n Quad: A colour scheme based on the main colour selected, using the colours on the colour wheel that are 90 degrees from the main colour.", "tabsHeading": "Tabs", + "tabsDescription": "Drag and drop to reorder, click to enable/disable", "resetHeading": "Reset", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Uninstall all extensions and themes, and reset preferences", diff --git a/src/resources/locales/es.json b/src/resources/locales/es.json index 22169f74..d233fe82 100644 --- a/src/resources/locales/es.json +++ b/src/resources/locales/es.json @@ -9,6 +9,7 @@ "hideInstalledLabel": "Esconder instalado cuando buscando", "colourShiftLabel": "Cambiar colores cada minuto", "tabsHeading": "Pestañas", + "tabsDescription": "Arrastre y suelte para cambiar el orden, haga clic para activar/desactivar", "resetHeading": "Reestablecer", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Borrar todas estensiones and temas, y borrar preferencias", diff --git a/src/resources/locales/et.json b/src/resources/locales/et.json index 8bc42447..1bff88b8 100644 --- a/src/resources/locales/et.json +++ b/src/resources/locales/et.json @@ -14,6 +14,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturated: Värv, mis on kõige silmatorkavam, kuid palju väiksema heledusega \n Light vibrant: Kõige erksam värv, kuid veidi suurendatud heledusega \n Prominent: Värv, mis ilmub albumi kujunduses kõige rohkem \n Vibrant: Albumipildi kõige elavam värv", "almbumArtColorsModeToolTip": "Monochrome dark: Värvilahendus, mis põhineb otse valitud põhivärvil, kasutades põhivärvi erinevaid toone ja segades värviskeemi loomiseks halle, see on ühevärvlise heleda pöördväärtus. \n Monochrome light: Värvilahendus, mis põhineb otse valitud põhivärvil, kasutades põhivärvi erinevaid toone ja segades värviskeemi loomiseks halle. Ühevärvilise valguse taust oleks ühevärvilise tumeda esiplaani või teksti värv ja vastupidi. \n Analogic: Valitud põhivärvil põhinev värviskeem, kasutades värviratta põhivärviga külgnevaid värve. \n Analogic complement: Valitud põhivärvil põhinev värviskeem, kasutades värviratta põhivärviga külgnevaid värve ja lisavärvi. \n Triad: Valitud põhivärvil põhinev värviskeem, kasutades põhivärvist võrdsel kaugusel asuvaid värviratta värve. \n Quad: Valitud põhivärvil põhinev värviskeem, kasutades värvirattal olevaid värve, mis on põhivärvist 90 kraadi.", "tabsHeading": "Vahekaardid", + "tabsDescription": "Järjekorra muutmiseks lohista ja eemalda, lubamiseks/välja lülitamiseks klõpsa", "resetHeading": "Reset", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Uninstall all extensions and themes, and reset preferences", diff --git a/src/resources/locales/fr.json b/src/resources/locales/fr.json index 2743c578..a38742da 100644 --- a/src/resources/locales/fr.json +++ b/src/resources/locales/fr.json @@ -14,6 +14,7 @@ "albumArtBasedColorsVibrancyToolTip": "Désaturé: La couleur qui est la plus proéminente mais avec beaucoup moins de luminosité\nVibrations Claires: La couleur la plus vibrante, mais avec une luminosité un peu plus forte\nPrometteur: La couleur qui ressort le plus dans la pochette de l'album\nVibrations: La couleur la plus vibrante dans la pochette de l'album", "albumArtColorsModeToolTip": "Monochrome foncé: une palette de couleurs basée directement sur la couleur principale sélectionnée, en utilisant différentes nuances de la couleur principale et en mélangeant des gris pour créer une palette de couleurs, c'est l'inverse du monochrome clair.\nMonochrome clair: Une palette de couleurs basée directement sur la couleur principale sélectionnée, en utilisant différentes nuances de la couleur principale et en mélangeant les gris pour créer une palette de couleurs. L'arrière-plan d'un monochrome clair sera le premier plan ou la couleur du texte d'un monochrome foncé et vice versa.\nAnalogique: Schéma de couleurs basé sur la couleur principale sélectionnée, utilisant les couleurs adjacentes à la couleur principale sur le cercle chromatique.\nAnalogique complémentaire: Un schéma de couleurs basé sur la couleur principale sélectionnée, utilisant les couleurs adjacentes à la couleur principale sur le cercle chromatique et la couleur complémentaire.\nTriade: Un schéma de couleurs basé sur la couleur principale sélectionnée, utilisant les couleurs équidistantes de la couleur principale sur le cercle chromatique.\nQuad: Un schéma de couleurs basé sur la couleur principale sélectionnée, utilisant les couleurs du cercle chromatique qui sont à 90 degrés de la couleur principale.", "tabsHeading": "Onglets", + "tabsDescription": "Glisser-déposer pour modifier l'ordre, cliquer pour activer/désactiver", "resetHeading": "Réinitialiser", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Désinstaller toutes les extensions et tous les thèmes, ainsi que l’ensemble des réglages", diff --git a/src/resources/locales/it.json b/src/resources/locales/it.json index 5d68b938..6e4e1468 100644 --- a/src/resources/locales/it.json +++ b/src/resources/locales/it.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturato: Il colore predominante ma con molta meno luminosità \n Vibrante Chiaro: Il colore più intenso ma con la luminosità aumentata leggermente \n Predominante: Il colore che spicca di più nella copertina dell'album \n Vibrante: Il colore più intenso nella copertina dell'album", "almbumArtColorsModeToolTip": "Monocromo Scuro: Uno schema di colori basato direttamente sul colore principale selezionato, utilizzando diverse sfumature del colore principale e mescolando i grigi per creare uno schema di colori; questo è l'inverso di Monocromo Chiaro. \n Monocromo Chiaro: Uno schema di colori basato direttamente sul colore principale selezionato, utilizzando diverse sfumature del colore principale e mescolando i grigi per creare uno schema di colori. Lo sfondo di Monocromo Chiaro sarebbe il colore del testo o di quello in primo piano su Monocromo Scuro e viceversa. \n Armonico: Uno schema di colori basato sul colore principale selezionato, utilizzando i colori adiacenti al colore principale sulla ruota dei colori.\n Armonico Complementare: Uno schema di colori basato sul colore principale selezionato, utilizzando i colori adiacenti al colore principale sulla ruota dei colori e il colore complementare. \n Ternario: Uno schema di colori basato sul colore principale selezionato, utilizzando i colori sulla ruota dei colori che sono equidistanti dal colore principale. \n Quaternario: Uno schema di colori basato sul colore principale selezionato, utilizzando i colori sulla ruota dei colori che sono a 90 gradi dal colore principale.", "tabsHeading": "Schede", + "tabsDescription": "Trascinare e rilasciare per cambiare l'ordine, cliccare per attivare/disattivare", "resetHeading": "Reimposta", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Disinstalla tutte le estensioni e i temi, e ripristina le preferenze", diff --git a/src/resources/locales/ja.json b/src/resources/locales/ja.json index db27d646..1b33f7ad 100644 --- a/src/resources/locales/ja.json +++ b/src/resources/locales/ja.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturated: 最も目立つ色だが、明るさがはるかに抑えられています \n Light Vibrant: 最も活気ある色ですが、明るさが少し増しています \n Prominent: アルバムアートで最も目立つ色です \n Vibrant: アルバムアートで最も鮮やかな色です", "almbumArtColorsModeToolTip": "Monochrome Dark: 選択したメインカラーを基にした色の配色スキームで、メインカラーの異なる濃淡やグレーを混ぜて配色することで、これはMonochrome Lightの反対です。 \n Monochrome Light: 選択したメインカラーを直接基にした色の配色スキームで、メインカラーの異なる濃淡やグレーを混ぜて配色します。Monochrome Lightの背景色は、Monochrome Darkの前景色やテキスト色となり、その逆も同様です。 \n Analogic: 選択されたメインカラーを基に、カラーホイール上でメインカラーに隣接する色を使用した配色スキームです。 \n Analogic Complementary: 選択したメインカラーを基に、カラーホイール上でメインカラーに隣接する色と補色を使用した配色スキームです。 \n Triad: 選択したメインカラーを基に、カラーホイール上でメインカラーから等距離にある色を使用した配色スキームです。 \n Quad: 選択されたメインカラーを基に、カラーホイール上でメインカラーから90度離れた色を使用した配色スキームです。", "tabsHeading": "タブ", + "tabsDescription": "ドラッグ＆ドロップで順序を変更し、クリックで有効／無効を切り替える", "resetHeading": "リセット", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "すべての拡張機能とテーマをアンインストールし、設定をリセットします", diff --git a/src/resources/locales/pl.json b/src/resources/locales/pl.json index ebb3f1c7..8673fd04 100644 --- a/src/resources/locales/pl.json +++ b/src/resources/locales/pl.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Nasycony: Kolor, który jest najbardziej widoczny, ale o znacznie mniejszej jasności. \nJasny wibrujący: Najbardziej żywy kolor, ale z nieco zwiększoną jasnością. \nWyraźny: Kolor, który najbardziej rzuca się w oczy na okładce albumu. \nWibrujący: Najbardziej żywy kolor na okładce albumu", "almbumArtColorsModeToolTip": "Monochromatyczny ciemny: Schemat kolorów oparty bezpośrednio na wybranym głównym kolorze, wykorzystujący różne odcienie głównego koloru i mieszający szarości w celu stworzenia schematu kolorów, jest to odwrotność Monochromatycznego jasnego. \nMonochromatyczny jasny: Schemat kolorów oparty bezpośrednio na wybranym głównym kolorze, wykorzystujący różne odcienie głównego koloru i mieszanie szarości w celu utworzenia schematu kolorów. Tło monochromatycznego światła będzie na pierwszym planie lub kolorem tekstu w monochromatycznym ciemnym i odwrotnie. \nAnalogowy: Schemat kolorów oparty na wybranym głównym kolorze, wykorzystujący kolory sąsiadujące z głównym kolorem na kole kolorów. \nUzupełnienie analogowe: Schemat kolorów oparty na wybranym głównym kolorze, wykorzystujący kolory sąsiadujące z głównym kolorem na kole kolorów i kolorem uzupełniającym. \nTriada: Schemat kolorów oparty na wybranym głównym kolorze, wykorzystujący kolory na kole kolorów, które są w równej odległości od głównego koloru. \nQuad: Schemat kolorów oparty na wybranym głównym kolorze, wykorzystujący kolory na kole kolorów, które są oddalone o 90 stopni od głównego koloru.", "tabsHeading": "Karty", + "tabsDescription": "Przeciągnij i upuść, aby zmienić kolejność, kliknij, aby włączyć/wyłączyć", "resetHeading": "Reset", "resetBtn": "Zresetuj", "resetDescription": "Odinstaluj wszystkie rozszerzenia, motywy i zresetuj preferencje", diff --git a/src/resources/locales/ru.json b/src/resources/locales/ru.json index 4fed840f..ca6f4503 100644 --- a/src/resources/locales/ru.json +++ b/src/resources/locales/ru.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Desaturated: наиболее часто встречаемый в обложке цвет с малой яркостью \n Light Vibrant: самый насыщенный цвет с повышенной яркостью \n Prominent: наиболее часто встречаемый цвет в обложке альбома \n Vibrant: самый насыщенный цвет в обложке альбома", "almbumArtColorsModeToolTip": "Monochrome Dark, Monochrome Light: основаны иcключительно на выбранном цвете, дополнительные цвета создаются путем изменения яркости основого. Противоположны друг другу: цвет, являющийся фоновым в Monochrome Light, в Monochrome Dark будет цветом переднего плана и наоборот. \n Analogic: палитра определяется выбранным и цветами, смежными с ним на цветовом круге. \n Analogic Complementary: схожа c Analogic, но сожержит также дополнительный цвет. \n Triad: палитра определяется основным цветом и цветами, равноудаленными от него. \n Quad: палитра определяется выбранным цветом и цветами, расположенных под углом 90 градусов к нему.", "tabsHeading": "Вкладки", + "tabsDescription": "Перетаскивание для изменения порядка, щелчок для включения/выключения", "resetHeading": "Сброс", "resetBtn": "Сбросить", "resetDescription": "Удалить все и сбросить настройки", diff --git a/src/resources/locales/uk.json b/src/resources/locales/uk.json index e42f7f42..286af7b5 100644 --- a/src/resources/locales/uk.json +++ b/src/resources/locales/uk.json @@ -15,6 +15,7 @@ "albumArtBasedColorsVibrancyToolTip": "Насичений: Колір, який є найбільш помітним, але з набагато меншою яскравістю \n Light Vibrant (Яскравий): Найяскравіший колір, але з дещо підвищеною яскравістю \n Виразний: Колір, який найбільше виділяється на обкладинці альбому \n Яскравий: Найяскравіший колір на обкладинці альбому", "almbumArtColorsModeToolTip": "Монохромний темний: кольорова схема, що базується безпосередньо на вибраному основному кольорі, з використанням різних відтінків основного кольору та змішуванням сірих кольорів для створення кольорової схеми, це протилежність монохромного світлого. \n Монохромний світлий: Кольорова схема, що базується безпосередньо на вибраному основному кольорі, з використанням різних відтінків основного кольору та змішуванням сірих кольорів для створення кольорової схеми. Тло монохромного світлого буде переднім планом або кольором тексту на монохромному темному, і навпаки. \n Аналоговий: Кольорова схема, заснована на вибраному основному кольорі з використанням кольорів, суміжних з основним кольором на колірному колі. \n Аналогово-доповнювальна: Кольорова схема на основі вибраного основного кольору з використанням сусідніх з ним кольорів на колірному колі та додаткового кольору. \n Тріада: Кольорова схема на основі вибраного основного кольору з використанням кольорів на колі кольорів, рівновіддалених від основного кольору. \n Квадрат: Кольорова схема на основі вибраного основного кольору з використанням кольорів на колі кольорів, розташованих під кутом 90 градусів до основного кольору.", "tabsHeading": "Вкладки", + "tabsDescription": "Перетягніть, щоб змінити порядок, натисніть, щоб увімкнути/вимкнути", "resetHeading": "Скинути", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "Видалити усі розширення і теми, та скинути налаштування", diff --git a/src/resources/locales/zh-CN.json b/src/resources/locales/zh-CN.json index b977b7ac..ac3cc20c 100644 --- a/src/resources/locales/zh-CN.json +++ b/src/resources/locales/zh-CN.json @@ -9,6 +9,7 @@ "hideInstalledLabel": "浏览时隐藏已安装项目", "colourShiftLabel": "每分钟进行色调偏移", "tabsHeading": "分页", + "tabsDescription": "拖放更改顺序，点击启用/禁用", "resetHeading": "重置", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "卸载所有扩展插件和主题，并重置设置" diff --git a/src/resources/locales/zh-TW.json b/src/resources/locales/zh-TW.json index d8a87fde..64495f2a 100644 --- a/src/resources/locales/zh-TW.json +++ b/src/resources/locales/zh-TW.json @@ -9,6 +9,7 @@ "hideInstalledLabel": "瀏覽時隱藏已安裝項目", "colourShiftLabel": "每分鐘進行色調偏移", "tabsHeading": "分頁", + "tabsDescription": "拖放更改顺序，点击启用/禁用", "resetHeading": "重設", "resetBtn": "$t(settings.resetHeading)", "resetDescription": "解除安裝所有擴充套件和主題， 並重設偏好設定", diff --git a/src/styles/components/_settings.scss b/src/styles/components/_settings.scss index 58e5948a..7cd1b9a1 100644 --- a/src/styles/components/_settings.scss +++ b/src/styles/components/_settings.scss @@ -1,11 +1,30 @@ #marketplace-config-container { + .settings-block { + padding-top: 10px; + padding-bottom: 10px; + } + + .settings-block-top { + padding-bottom: 10px; + } + + .settings-block-bottom { + padding-top: 10px; + } + + .settings-tabs-description { + font-style: italic; + font-size: 12px; + } + + .settings-row { display: flex; justify-content: space-between; .col { display: flex; - padding: 10px 0; + padding: 8px 0; align-items: center; &.action { @@ -67,6 +86,19 @@ button.arrow-btn { } } +.dnd-box { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100% +} + +.dnd-icon { + position: absolute; + left: 4px; +} + // Add snippet modal #marketplace-add-snippet-container input, textarea { width: 100%; @@ -78,3 +110,5 @@ button.arrow-btn { border: 1px solid var(--spice-button); border-radius: 4px; } + +