me/owo-vencord
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

GameActivityToggle: option to use old icon

Browse source
This commit is contained in:
Nuckyz 2023-12-17 18:06:16 -03:00
parent 467c5e0c4c
commit 9950bf00b2
No known key found for this signature in database
GPG key ID: 440BF8296E1C4AD9
1 changed files with 33 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/plugins/gameActivityToggle/index.tsx
View file

@ -16,10 +16,11 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
import { definePluginSettings } from "@api/Settings";
import { disableStyle, enableStyle } from "@api/Styles"; import { disableStyle, enableStyle } from "@api/Styles";
import ErrorBoundary from "@components/ErrorBoundary"; import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants"; import { Devs } from "@utils/constants";
import definePlugin from "@utils/types"; import definePlugin, { OptionType } from "@utils/types";
import { findComponentByCodeLazy } from "@webpack"; import { findComponentByCodeLazy } from "@webpack";
import { StatusSettingsStores } from "@webpack/common"; import { StatusSettingsStores } from "@webpack/common";
@ -28,22 +29,31 @@ import style from "./style.css?managed";
const Button = findComponentByCodeLazy("Button.Sizes.NONE,disabled:"); const Button = findComponentByCodeLazy("Button.Sizes.NONE,disabled:");
function makeIcon(showCurrentGame?: boolean) { function makeIcon(showCurrentGame?: boolean) {
const controllerIcon = "M3.06 20.4q-1.53 0-2.37-1.065T.06 16.74l1.26-9q.27-1.8 1.605-2.97T6.06 3.6h11.88q1.8 0 3.135 1.17t1.605 2.97l1.26 9q.21 1.53-.63 2.595T20.94 20.4q-.63 0-1.17-.225T18.78 19.5l-2.7-2.7H7.92l-2.7 2.7q-.45.45-.99.675t-1.17.225Zm14.94-7.2q.51 0 .855-.345T19.2 12q0-.51-.345-.855T18 10.8q-.51 0-.855.345T16.8 12q0 .51.345 .855T18 13.2Zm-2.4-3.6q.51 0 .855-.345T16.8 8.4q0-.51-.345-.855T15.6 7.2q-.51 0-.855.345T14.4 8.4q0 .51.345 .855T15.6 9.6ZM6.9 13.2h1.8v-2.1h2.1v-1.8h-2.1v-2.1h-1.8v2.1h-2.1v1.8h2.1v2.1Z"; const { oldIcon } = settings.use(["oldIcon"]);
const redLinePath = !oldIcon
? "M22.7 2.7a1 1 0 0 0-1.4-1.4l-20 20a1 1 0 1 0 1.4 1.4Z"
: "M23 2.27 21.73 1 1 21.73 2.27 23 23 2.27Z";
const maskBlackPath = !oldIcon
? "M23.27 4.73 19.27 .73 -.27 20.27 3.73 24.27Z"
: "M23.27 4.54 19.46.73 .73 19.46 4.54 23.27 23.27 4.54Z";
return function () { return function () {
return ( return (
<svg width="20" height="20" viewBox="0 0 24 24"> <svg width="20" height="20" viewBox="0 0 24 24">
{showCurrentGame ? ( <path
<path fill="currentColor" d={controllerIcon} /> fill={!showCurrentGame && !oldIcon ? "var(--status-danger)" : "currentColor"}
) : ( mask={!showCurrentGame ? "url(#gameActivityMask)" : void 0}
<> d="M3.06 20.4q-1.53 0-2.37-1.065T.06 16.74l1.26-9q.27-1.8 1.605-2.97T6.06 3.6h11.88q1.8 0 3.135 1.17t1.605 2.97l1.26 9q.21 1.53-.63 2.595T20.94 20.4q-.63 0-1.17-.225T18.78 19.5l-2.7-2.7H7.92l-2.7 2.7q-.45.45-.99.675t-1.17.225Zm14.94-7.2q.51 0 .855-.345T19.2 12q0-.51-.345-.855T18 10.8q-.51 0-.855.345T16.8 12q0 .51.345 .855T18 13.2Zm-2.4-3.6q.51 0 .855-.345T16.8 8.4q0-.51-.345-.855T15.6 7.2q-.51 0-.855.345T14.4 8.4q0 .51.345 .855T15.6 9.6ZM6.9 13.2h1.8v-2.1h2.1v-1.8h-2.1v-2.1h-1.8v2.1h-2.1v1.8h2.1v2.1Z"
<mask id="gameActivityMask" > />
<rect fill="white" x="0" y="0" width="24" height="24" /> {!showCurrentGame && <>
<path fill="black" d="M23.27 4.73 19.27 .73 -.27 20.27 3.73 24.27Z" /> <path fill="var(--status-danger)" d={redLinePath} />
</mask> <mask id="gameActivityMask">
<path fill="var(--status-danger)" mask="url(#gameActivityMask)" d={controllerIcon} /> <rect fill="white" x="0" y="0" width="24" height="24" />
<path fill="var(--status-danger)" d="M22.7 2.7a1 1 0 0 0-1.4-1.4l-20 20a1 1 0 1 0 1.4 1.4Z" /> <path fill="black" d={maskBlackPath} />
</> </mask>
)} </>}
</svg> </svg>
); );
}; };
@ -63,10 +73,19 @@ function GameActivityToggleButton() {
); );
} }
const settings = definePluginSettings({
oldIcon: {
type: OptionType.BOOLEAN,
description: "Use the old icon style before Discord icon redesign",
default: false
}
});
export default definePlugin({ export default definePlugin({
name: "GameActivityToggle", name: "GameActivityToggle",
description: "Adds a button next to the mic and deafen button to toggle game activity.", description: "Adds a button next to the mic and deafen button to toggle game activity.",
authors: [Devs.Nuckyz, Devs.RuukuLada], authors: [Devs.Nuckyz, Devs.RuukuLada],
settings,
patches: [ patches: [
{ {