diff --git a/css/popup.css b/css/popup.css index 86c5c62..ca1e29d 100644 --- a/css/popup.css +++ b/css/popup.css @@ -157,6 +157,33 @@ input[type='checkbox'] { margin-right: 15px; } +input[type="color"] { + width: 23px; + height: 23px; + border-radius: 5px; + margin-right: 15px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: transparent; + border: none; + cursor: pointer; +} + +input[type="color"]::-webkit-color-swatch { + border-radius: 5px; + border: none; +} + +input[type="color"]::-moz-color-swatch { + border-radius: 5px; + border: none; +} + +input[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} + .ElementText { margin-left: 18px; color: white; @@ -318,6 +345,23 @@ input[type='checkbox'] { color: lightskyblue; } +.ColorsHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; +} + +.ResetColorsIcon { + width: 25px; + height: 25px; + margin-right: 15px; + display: inline-block; + vertical-align: middle; + filter: invert(82%) sepia(3%) saturate(242%) hue-rotate(202deg) brightness(85%) contrast(92%); + cursor: pointer; +} + #priceRefreshButton { background: var(--color-accent, #ff5722); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2); diff --git a/html/csfloat.html b/html/csfloat.html index d6c0347..dc0671f 100644 --- a/html/csfloat.html +++ b/html/csfloat.html @@ -94,4 +94,22 @@

Tab State Management

+ +
+
+ COLORS + +
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
\ No newline at end of file diff --git a/html/skinbid.html b/html/skinbid.html index 7b8803f..38724d4 100644 --- a/html/skinbid.html +++ b/html/skinbid.html @@ -42,4 +42,22 @@ +
+
+ COLORS + +
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
+

More features coming soon!

diff --git a/html/skinport.html b/html/skinport.html index c5ef52e..7aa87dd 100644 --- a/html/skinport.html +++ b/html/skinport.html @@ -75,4 +75,22 @@

Low and high floats in respect to each condition will get colored. 0.000X and 0.999X floats get the most prominent coloring.

+ +
+
+ COLORS + +
+
+

Profit color

+ +
+
+

Loss color

+ +
+
+

Neutral color

+ +
\ No newline at end of file diff --git a/public/reset.svg b/public/reset.svg new file mode 100644 index 0000000..438c331 --- /dev/null +++ b/public/reset.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/@typings/ExtensionTypes.d.ts b/src/@typings/ExtensionTypes.d.ts index 37997b1..ad5745e 100644 --- a/src/@typings/ExtensionTypes.d.ts +++ b/src/@typings/ExtensionTypes.d.ts @@ -32,8 +32,21 @@ export namespace Extension { skbBuffDifference: boolean; skbListingAge: boolean; skbStickerPrices: boolean; + colors: IColorsSites }; + export type IColors = { + profit: string; + loss: string; + neutral: string; + } + + export type IColorsSites = { + csfloat: IColors; + skinport: IColors; + skinbid: IColors; + } + export type CSGOTraderMapping = { [name: string]: { steam: { diff --git a/src/background.ts b/src/background.ts index 05cda66..85b789e 100644 --- a/src/background.ts +++ b/src/background.ts @@ -1,6 +1,6 @@ import { Extension } from './@typings/ExtensionTypes'; -const defaultSettings: Extension.Settings = { +export const defaultSettings: Extension.Settings = { enableCSFloat: true, autorefresh: true, stickerPrices: true, @@ -33,6 +33,23 @@ const defaultSettings: Extension.Settings = { skbBuffDifference: true, skbListingAge: true, skbStickerPrices: true, + colors: { + csfloat: { + profit: "#008000", + loss: "#ce0000", + neutral: "#708090" + }, + skinport: { + profit: "#008000", + loss: "#ce0000", + neutral: "#000000" + }, + skinbid: { + profit: "#0cb083", + loss: "#ce0000", + neutral: "#000000" + } + } }; // Check whether new version is installed diff --git a/src/csfloat/content_script.ts b/src/csfloat/content_script.ts index 1750671..d054633 100644 --- a/src/csfloat/content_script.ts +++ b/src/csfloat/content_script.ts @@ -1192,13 +1192,13 @@ async function addBuffPrice(item: CSFloat.FloatItem, container: Element, isPopou let backgroundColor; let differenceSymbol; if (difference < 0) { - backgroundColor = 'green'; + backgroundColor = extensionSettings.colors.csfloat.profit; differenceSymbol = '-$'; } else if (difference > 0) { - backgroundColor = '#ce0000'; + backgroundColor = extensionSettings.colors.csfloat.loss; differenceSymbol = '+$'; } else { - backgroundColor = 'slategrey'; + backgroundColor = extensionSettings.colors.csfloat.neutral; differenceSymbol = '-$'; } diff --git a/src/popup.ts b/src/popup.ts index d168a66..b79aa17 100644 --- a/src/popup.ts +++ b/src/popup.ts @@ -1,4 +1,5 @@ -import { refreshPrices } from './background'; +import { defaultSettings, refreshPrices } from './background'; +import { Extension } from './@typings/ExtensionTypes'; const permissionsButton = document.getElementsByClassName('PermissionsButton')[0]; @@ -54,6 +55,55 @@ function addListeners() { $('.MainContent').css('height', '528px'); $('.Warning').show(100); }); + // add listeners to all color pickers + $('input[type=color]').on('change', function () { + const attrName = $(this).attr('name'); + if (attrName) { + const [site, color] = attrName.split('-'); + + chrome.storage.local.get((data) => { + if (data.colors && data.colors[site]) { + data.colors[site][color] = $(this).val(); + chrome.storage.local.set({ + colors: data.colors + }); + } + else { + chrome.storage.local.set({ + colors: { + [site]: { + [color]: $(this).val() + } + }, + }); + } + }); + } + $('.SideBar').css('height', '528px'); + $('.MainContent').css('height', '528px'); + $('.Warning').show(100); + }); + // add listener to resetColors button + $('#resetColors').on('click', function () { + const defaultColors = defaultSettings.colors; + const attrSite = $(this).attr('site') as keyof Extension.IColorsSites; + + if (!attrSite || !defaultColors[attrSite]) return; + + chrome.storage.local.get((data) => { + if (data.colors) { + data.colors[attrSite] = defaultColors[attrSite]; + + chrome.storage.local.set({ + colors: data.colors, + }); + } + }); + + $('#InputProfitColor').val(defaultColors[attrSite].profit); + $('#InputLossColor').val(defaultColors[attrSite].loss); + $('#InputNeutralColor').val(defaultColors[attrSite].neutral); + }); } const host_permissions = chrome.runtime.getManifest().host_permissions; @@ -99,6 +149,9 @@ function loadForSettings() { const showBuffPercentageDifference = document.getElementById('InputBuffPercentageDifference'); const topButton = document.getElementById('InputTopButton'); const useTabStates = document.getElementById('InputTabStates'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { if (data.enableCSFloat) { @@ -148,6 +201,11 @@ function loadForSettings() { } else { useTabStates.checked = false; } + if (data.colors.csfloat) { + profitColor.value = data.colors.csfloat.profit; + lossColor.value = data.colors.csfloat.loss; + neutralColor.value = data.colors.csfloat.neutral; + } }); } @@ -158,6 +216,9 @@ function loadForSkinport() { const skinportSteamPrice = document.getElementById('SkinportSteamPrice'); const skinportInputBuffDifference = document.getElementById('SkinportInputBuffDifference'); const skinportFloatColoring = document.getElementById('SkinportFloatColoring'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { if (data.enableSkinport) { @@ -199,6 +260,11 @@ function loadForSkinport() { } else { skinportFloatColoring.checked = false; } + if (data.colors.skinport) { + profitColor.value = data.colors.skinport.profit; + lossColor.value = data.colors.skinport.loss; + neutralColor.value = data.colors.skinport.neutral; + } }); } @@ -227,11 +293,14 @@ function loadForAbout() { } function loadForSkinbid() { - let skinbidEnable = document.getElementById('InputSkinbid'); - let skinbidPriceReference = document.getElementById('SkinbidPriceReference'); - let skinbidInputBuffDifference = document.getElementById('SkinbidInputBuffDifference'); - let skinbidListingAge = document.getElementById('SkinbidListingAge'); - let skinbidStickerPrices = document.getElementById('SkinbidStickerPrices'); + const skinbidEnable = document.getElementById('InputSkinbid'); + const skinbidPriceReference = document.getElementById('SkinbidPriceReference'); + const skinbidInputBuffDifference = document.getElementById('SkinbidInputBuffDifference'); + const skinbidListingAge = document.getElementById('SkinbidListingAge'); + const skinbidStickerPrices = document.getElementById('SkinbidStickerPrices'); + const profitColor = document.getElementById('InputProfitColor'); + const lossColor = document.getElementById('InputLossColor'); + const neutralColor = document.getElementById('InputNeutralColor'); chrome.storage.local.get((data) => { console.log(data); @@ -258,6 +327,11 @@ function loadForSkinbid() { } else { skinbidListingAge.checked = false; } + if (data.colors.skinbid) { + profitColor.value = data.colors.skinbid.profit; + lossColor.value = data.colors.skinbid.loss; + neutralColor.value = data.colors.skinbid.neutral; + } }); } diff --git a/src/skinbid/content_script.ts b/src/skinbid/content_script.ts index cf84f7b..137d78f 100644 --- a/src/skinbid/content_script.ts +++ b/src/skinbid/content_script.ts @@ -298,7 +298,7 @@ async function addBuffPrice(item: Skinbid.HTMLItem, container: Element, selector discountContainer = discountSpan; } discountContainer.className += ' betterfloat-sale-tag'; - discountContainer.style.color = difference == 0 ? 'black' : difference < 0 ? '#0cb083' : '#ce0000'; + discountContainer.style.color = difference == 0 ? extensionSettings.colors.skinbid.neutral : difference < 0 ? extensionSettings.colors.skinbid.profit : extensionSettings.colors.skinbid.loss; discountContainer.style.fontWeight = '400'; discountContainer.style.fontSize = '14px'; discountContainer.textContent = difference == 0 ? `-${currencySymbol}0` : (difference > 0 ? '+' : '-') + currencySymbol + Math.abs(difference).toFixed(2); diff --git a/src/skinport/content_script.ts b/src/skinport/content_script.ts index 378f889..a39eb84 100644 --- a/src/skinport/content_script.ts +++ b/src/skinport/content_script.ts @@ -406,7 +406,7 @@ async function adjustItemPage(container: Element) { const newContainer = document.createElement('div'); const saleTag = document.createElement('span'); newContainer.className = 'ItemPage-discount betterfloat-discount-container'; - newContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? 'black' : difference < 0 ? 'green' : '#ce0000'})`; + newContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? extensionSettings.colors.skinport.neutral : difference < 0 ? extensionSettings.colors.skinport.profit : extensionSettings.colors.skinport.loss})`; newContainer.style.transform = 'skewX(-15deg)'; newContainer.style.borderRadius = '3px'; newContainer.style.paddingTop = '2px'; @@ -755,7 +755,7 @@ async function addBuffPrice(item: Skinport.Listing, container: Element) { const saleTag = discountContainer.firstChild; if (item.price !== 0 && !isNaN(item.price) && saleTag && tooltipLink && !discountContainer.querySelector('.betterfloat-sale-tag')) { saleTag.className = 'sale-tag betterfloat-sale-tag'; - discountContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? 'black' : difference < 0 ? 'green' : '#ce0000'})`; + discountContainer.style.background = `linear-gradient(135deg,#0073d5,${difference == 0 ? extensionSettings.colors.skinport.neutral : difference < 0 ? extensionSettings.colors.skinport.profit : extensionSettings.colors.skinport.loss})`; saleTag.textContent = difference == 0 ? `-${item.currency}0` : (difference > 0 ? '+' : '-') + item.currency + Math.abs(difference).toFixed(2); } } else { diff --git a/src/util/extensionsettings.ts b/src/util/extensionsettings.ts index 09cd887..1439c49 100644 --- a/src/util/extensionsettings.ts +++ b/src/util/extensionsettings.ts @@ -84,6 +84,9 @@ export async function initSettings(): Promise { if (data.skbStickerPrices) { extensionSettings.skbStickerPrices = Boolean(data.skbStickerPrices); } + if (data.colors) { + extensionSettings.colors = data.colors as Extension.Settings['colors']; + } }); // wait for settings to be loaded, takes about 1.5 seconds