This commit is contained in:
thororen1234 2024-08-21 23:13:33 -04:00
parent 9ac31fa936
commit 029a0500d8
5 changed files with 47 additions and 35 deletions

View file

@ -4,6 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
import { MouseEvent } from "react";
import { useEffect, useState } from ".."; import { useEffect, useState } from "..";
import { SortOptions } from "../types"; import { SortOptions } from "../types";
import { SortIcon } from "./Icons"; import { SortIcon } from "./Icons";
@ -12,7 +14,7 @@ export default function ({ sort, onSortChange }: { sort: SortOptions, onSortChan
const [pos, setPos] = useState({ x: 0, y: 0 }); const [pos, setPos] = useState({ x: 0, y: 0 });
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
function rightClickContextMenu(e) { function rightClickContextMenu(e: MouseEvent<HTMLButtonElement, MouseEvent>) {
e.stopPropagation(); e.stopPropagation();
window.dispatchEvent(new Event("click")); window.dispatchEvent(new Event("click"));
setShowMenu(!showMenu); setShowMenu(!showMenu);
@ -80,6 +82,6 @@ export default function ({ sort, onSortChange }: { sort: SortOptions, onSortChan
</svg> </svg>
</button> </button>
</nav> : null} </nav> : null}
<button className="colorwaysPillButton" onClick={rightClickContextMenu}><SortIcon width={14} height={14} /> Sort By...</button> <button className="colorwaysPillButton" onClick={() => rightClickContextMenu}><SortIcon width={14} height={14} /> Sort By...</button>
</>; </>;
} }

View file

@ -4,6 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
import { MouseEvent } from "react";
import { useEffect, useRef, useState } from ".."; import { useEffect, useRef, useState } from "..";
export default function ({ onClick, onForceReload }: { onClick: () => void, onForceReload: () => void; }) { export default function ({ onClick, onForceReload }: { onClick: () => void, onForceReload: () => void; }) {
@ -11,7 +13,7 @@ export default function ({ onClick, onForceReload }: { onClick: () => void, onFo
const [pos, setPos] = useState({ x: 0, y: 0 }); const [pos, setPos] = useState({ x: 0, y: 0 });
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
function rightClickContextMenu(e) { function rightClickContextMenu(e: MouseEvent<HTMLButtonElement, MouseEvent>) {
e.stopPropagation(); e.stopPropagation();
window.dispatchEvent(new Event("click")); window.dispatchEvent(new Event("click"));
setShowMenu(!showMenu); setShowMenu(!showMenu);
@ -69,7 +71,7 @@ export default function ({ onClick, onForceReload }: { onClick: () => void, onFo
</svg> </svg>
</button> </button>
</nav> : null} </nav> : null}
<button className="colorwaysPillButton" onContextMenu={rightClickContextMenu} onClick={onClick}> <button className="colorwaysPillButton" onContextMenu={() => rightClickContextMenu} onClick={onClick}>
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
x="0px" x="0px"

View file

@ -4,6 +4,8 @@
* SPDX-License-Identifier: GPL-3.0-or-later * SPDX-License-Identifier: GPL-3.0-or-later
*/ */
import { MouseEvent } from "react";
import { useEffect, useRef, useState } from ".."; import { useEffect, useRef, useState } from "..";
export default function ({ source, sources, onSourceChange }: { source: { name: string, id: string; }, sources: { name: string, id: string; }[], onSourceChange: (sourceId: string) => void; }) { export default function ({ source, sources, onSourceChange }: { source: { name: string, id: string; }, sources: { name: string, id: string; }[], onSourceChange: (sourceId: string) => void; }) {
@ -12,7 +14,7 @@ export default function ({ source, sources, onSourceChange }: { source: { name:
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const [current, setCurrent] = useState(source); const [current, setCurrent] = useState(source);
function rightClickContextMenu(e) { function rightClickContextMenu(e: MouseEvent<HTMLButtonElement, MouseEvent>) {
e.stopPropagation(); e.stopPropagation();
window.dispatchEvent(new Event("click")); window.dispatchEvent(new Event("click"));
setShowMenu(!showMenu); setShowMenu(!showMenu);
@ -56,6 +58,6 @@ export default function ({ source, sources, onSourceChange }: { source: { name:
</button>; </button>;
})} })}
</nav> : null} </nav> : null}
<button className="colorwaysPillButton" onClick={rightClickContextMenu}>Source: {current.name}</button> <button className="colorwaysPillButton" onClick={() => rightClickContextMenu}>Source: {current.name}</button>
</>; </>;
} }

View file

@ -1,4 +1,3 @@
/* stylelint-disable color-function-notation */
/* stylelint-disable no-descending-specificity */ /* stylelint-disable no-descending-specificity */
/* stylelint-disable declaration-block-no-redundant-longhand-properties */ /* stylelint-disable declaration-block-no-redundant-longhand-properties */
/* stylelint-disable selector-id-pattern */ /* stylelint-disable selector-id-pattern */
@ -40,16 +39,19 @@
height: 50%; height: 50%;
} }
.discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(2)))>.discordColorwayPreviewColor { .discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(2)))
> .discordColorwayPreviewColor {
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
.discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(3)))>.discordColorwayPreviewColor { .discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(3)))
> .discordColorwayPreviewColor {
height: 100%; height: 100%;
} }
.discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(4)))>.discordColorwayPreviewColor:nth-child(3) { .discordColorwayPreviewColorContainer:not(:has(> .discordColorwayPreviewColor:nth-child(4)))
> .discordColorwayPreviewColor:nth-child(3) {
width: 100%; width: 100%;
} }
@ -177,7 +179,7 @@
} }
.colorwaysSettings-switch { .colorwaysSettings-switch {
background-color: rgb(85, 87, 94); background-color: rgb(85 87 94);
flex: 0 0 auto; flex: 0 0 auto;
position: relative; position: relative;
border-radius: 14px; border-radius: 14px;
@ -389,8 +391,8 @@
color: var(--brand-500); color: var(--brand-500);
} }
.colorwayCreator-colorPreviews>[class^="colorSwatch"], .colorwayCreator-colorPreviews > [class^="colorSwatch"],
.colorwayCreator-colorPreviews>[class^="colorSwatch"]>[class^="swatch"] { .colorwayCreator-colorPreviews > [class^="colorSwatch"] > [class^="swatch"] {
width: 100%; width: 100%;
border: none; border: none;
position: relative; position: relative;
@ -408,7 +410,7 @@
pointer-events: none; pointer-events: none;
} }
.colorwayCreator-colorPreviews>.colorSwatch-2UxEuG:has([fill="var(--primary-530)"])>.colorwaysPicker-colorLabel { .colorwayCreator-colorPreviews > .colorSwatch-2UxEuG:has([fill="var(--primary-530)"]) > .colorwaysPicker-colorLabel {
color: var(--primary-530); color: var(--primary-530);
} }
@ -553,7 +555,7 @@
max-height: 185px; max-height: 185px;
} }
.colorwaysCreator-settingCat-collapsed> :is(.colorwaysCreator-settingsList, .colorwayInfo-cssCodeblock), .colorwaysCreator-settingCat-collapsed > :is(.colorwaysCreator-settingsList, .colorwayInfo-cssCodeblock),
.colorwaysColorpicker-collapsed { .colorwaysColorpicker-collapsed {
display: none !important; display: none !important;
} }
@ -594,7 +596,7 @@
pointer-events: all; pointer-events: all;
} }
.colorwaysPreview-modal>.colorwaysPreview-wrapper { .colorwaysPreview-modal > .colorwaysPreview-wrapper {
height: 100%; height: 100%;
} }
@ -792,11 +794,11 @@
flex: 1 0 auto; flex: 1 0 auto;
} }
.colorwayPreview-channels>.colorwayPreview-topShadow { .colorwayPreview-channels > .colorwayPreview-topShadow {
border-top-left-radius: 8px; border-top-left-radius: 8px;
} }
.colorwayPreview-channels>.colorwayPreview-topShadow:hover { .colorwayPreview-channels > .colorwayPreview-topShadow:hover {
background-color: hsl(var(--primary-500-hsl) / 30%); background-color: hsl(var(--primary-500-hsl) / 30%);
} }
@ -1035,14 +1037,14 @@
align-items: end; align-items: end;
} }
.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child { .is-mobile .colorwaySelector-doublePillBar > .colorwaySelector-pillWrapper:first-child {
width: 100%; width: 100%;
gap: 4px; gap: 4px;
overflow-x: auto; overflow-x: auto;
justify-content: space-between; justify-content: space-between;
} }
.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child>.colorwaySelector-pill { .is-mobile .colorwaySelector-doublePillBar > .colorwaySelector-pillWrapper:first-child > .colorwaySelector-pill {
border-radius: 0; border-radius: 0;
border-top: none; border-top: none;
border-left: none; border-left: none;
@ -1053,7 +1055,10 @@
flex: 0 0 min-content; flex: 0 0 min-content;
} }
.is-mobile .colorwaySelector-doublePillBar>.colorwaySelector-pillWrapper:first-child>.colorwaySelector-pillSeparator { .is-mobile
.colorwaySelector-doublePillBar
> .colorwaySelector-pillWrapper:first-child
> .colorwaySelector-pillSeparator {
display: none; display: none;
} }
@ -1310,10 +1315,10 @@
background-color: var(--brand-experiment) !important; background-color: var(--brand-experiment) !important;
} }
.colorwayCreator-colorPreview_primary+.colorwayCreator-colorPreview_primary, .colorwayCreator-colorPreview_primary + .colorwayCreator-colorPreview_primary,
.colorwayCreator-colorPreview_secondary+.colorwayCreator-colorPreview_secondary, .colorwayCreator-colorPreview_secondary + .colorwayCreator-colorPreview_secondary,
.colorwayCreator-colorPreview_tertiary+.colorwayCreator-colorPreview_tertiary, .colorwayCreator-colorPreview_tertiary + .colorwayCreator-colorPreview_tertiary,
.colorwayCreator-colorPreview_accent+.colorwayCreator-colorPreview_accent { .colorwayCreator-colorPreview_accent + .colorwayCreator-colorPreview_accent {
display: none; display: none;
} }
@ -1455,14 +1460,14 @@
.dc-colorway-settings::before { .dc-colorway-settings::before {
/* stylelint-disable-next-line property-no-vendor-prefix */ /* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask: var(--si-vencordsettings) center/contain no-repeat !important; -webkit-mask: var(--si-equicordsettings) center/contain no-repeat !important;
mask: var(--si-vencordsettings) center/contain no-repeat !important; mask: var(--si-equicordsettings) center/contain no-repeat !important;
} }
.dc-colorway-ondemand::before { .dc-colorway-ondemand::before {
/* stylelint-disable-next-line property-no-vendor-prefix */ /* stylelint-disable-next-line property-no-vendor-prefix */
-webkit-mask: var(--si-vencordupdater) center/contain no-repeat !important; -webkit-mask: var(--si-equicordupdater) center/contain no-repeat !important;
mask: var(--si-vencordupdater) center/contain no-repeat !important; mask: var(--si-equicordupdater) center/contain no-repeat !important;
} }
.dc-colorway-sources-manager::before { .dc-colorway-sources-manager::before {
@ -1687,7 +1692,7 @@
gap: 8px; gap: 8px;
} }
.colorwaysModalFooter>.colorwaysPillButton { .colorwaysModalFooter > .colorwaysPillButton {
width: 100%; width: 100%;
} }
@ -1787,7 +1792,7 @@
border-top-color: var(--background-floating); border-top-color: var(--background-floating);
} }
.colorwaysTooltip-right>.colorwaysTooltipPointer { .colorwaysTooltip-right > .colorwaysTooltipPointer {
position: absolute; position: absolute;
right: 100%; right: 100%;
top: 50%; top: 50%;
@ -1837,6 +1842,6 @@
font-size: 12; font-size: 12;
} }
.colorwaysManagerConnectionValue>b { .colorwaysManagerConnectionValue > b {
color: #a0a6ae; color: #a0a6ae;
} }

View file

@ -1,4 +1,4 @@
/* stylelint-disable color-function-notation */ /* stylelint-disable property-no-vendor-prefix */
.colorwaySelectorModal[data-theme="discord"], .colorwaySelectorModal[data-theme="discord"],
.colorwayModal[data-theme="discord"] { .colorwayModal[data-theme="discord"] {
border: none; border: none;
@ -20,7 +20,7 @@
} }
[data-theme="discord"] .colorwaysSettings-switch { [data-theme="discord"] .colorwaysSettings-switch {
background-color: rgb(128, 132, 142); background-color: rgb(128 132 142);
} }
[data-theme="discord"] .colorwaysSettings-switch.checked { [data-theme="discord"] .colorwaysSettings-switch.checked {
@ -62,6 +62,7 @@
font-weight: 500; font-weight: 500;
line-height: 16px; line-height: 16px;
padding: 2px 16px; padding: 2px 16px;
-moz-user-select: none;
user-select: none; user-select: none;
} }
@ -134,7 +135,7 @@
align-items: center; align-items: center;
text-indent: 0; text-indent: 0;
font-weight: 600; font-weight: 600;
font-size: 12px; font-size: 0.625rem;
line-height: 16px; line-height: 16px;
} }