From 1dda06bf70e095d48a520300b8dc263331f44fd4 Mon Sep 17 00:00:00 2001 From: Estebene <49330942+Estebene@users.noreply.github.com> Date: Mon, 25 Oct 2021 00:10:20 +1300 Subject: [PATCH 1/4] Added Custom Color Inputs that you can Paste into (#1881) by Estebene * First commit * Fixed color popup placement and added easy paste colors * Fixed color popup placement and added easy paste colors * updated the color of the first button to provide more contrast * fixed color picker position * fixed laggy color picker drag * safari fix for picker position Co-authored-by: Jack --- SECURITY.md | 3 + src/js/misc.js | 13 + src/js/settings/theme-picker.js | 149 +- src/sass/inputs.scss | 48 +- src/sass/settings.scss | 17 +- static/index.html | 205 +- static/languages/estonian.json | 410 +- static/languages/estonian_10k.json | 20010 +++++++++++++-------------- static/languages/estonian_1k.json | 2010 +-- 9 files changed, 11545 insertions(+), 11320 deletions(-) diff --git a/SECURITY.md b/SECURITY.md index b6bbb4897..4ae4510bb 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -1,13 +1,16 @@ # Security Policy + We take the security and integrity of Monkeytype very seriously. If you have found a vulnerability, please report it ASAP so we can quickly remediate the issue. ### Reporting a Vulnerability For vulnerabilities that impact the confidentiality, integrity, and availability of Monkeytype services, please send your disclosure via (1) [email](jack@monkeytype.com), or (2) private Discord chat to Miodec(Miodec#1512). For non-security related platform bugs, follow the bug submission [guidelines](https://github.com/Miodec/monkeytype#bug-report-or-feature-request). Include as much detail as possible to ensure reproducibility. At a minimum, vulnerability disclosures should include: + - Vulnerability Description - Proof of Concept - Impact - Screenshots or Proof ### Submission Guidelines + Do not engage in activities that might cause a denial of service condition, create significant strains on critical resources, or negatively impact users of the site outside of test accounts. diff --git a/src/js/misc.js b/src/js/misc.js index b5fa4e65d..0263d3efb 100644 --- a/src/js/misc.js +++ b/src/js/misc.js @@ -760,6 +760,19 @@ export function regexIndexOf(string, regex, startpos) { return indexOf >= 0 ? indexOf + (startpos || 0) : indexOf; } +export function convertRGBtoHEX(rgb) { + rgb = rgb.match(/^rgb\((\d+), \s*(\d+), \s*(\d+)\)$/); + if (rgb === null) return; + if (rgb.length < 3) return; + function hexCode(i) { + // Take the last 2 characters and convert + // them to Hexadecimal. + + return ("0" + parseInt(i).toString(16)).slice(-2); + } + return "#" + hexCode(rgb[1]) + hexCode(rgb[2]) + hexCode(rgb[3]); +} + String.prototype.lastIndexOfRegex = function (regex) { var match = this.match(regex); return match ? this.lastIndexOf(match[match.length - 1]) : -1; diff --git a/src/js/settings/theme-picker.js b/src/js/settings/theme-picker.js index 944b0215a..fa1d62eae 100644 --- a/src/js/settings/theme-picker.js +++ b/src/js/settings/theme-picker.js @@ -14,6 +14,65 @@ export function updateActiveButton() { ); } +function updateColors(colorPicker, color, onlyStyle) { + if (onlyStyle) { + let colorid = colorPicker.find("input[type=color]").attr("id"); + document.documentElement.style.setProperty(colorid, color); + let pickerButton = colorPicker.find("label"); + pickerButton.val(color); + pickerButton.attr("value", color); + if (pickerButton.attr("for") !== "--bg-color") + pickerButton.css("background-color", color); + colorPicker.find("input[type=text]").val(color); + colorPicker.find("input[type=color]").attr("value", color); + return; + } + let colorREGEX = [ + { + rule: /\b[0-9]{1,3},\s?[0-9]{1,3},\s?[0-9]{1,3}\s*\b/, + start: "rgb(", + end: ")", + }, + { + rule: /\b[A-Z, a-z, 0-9]{6}\b/, + start: "#", + end: "", + }, + { + rule: /\b[0-9]{1,3},\s?[0-9]{1,3}%,\s?[0-9]{1,3}%?\s*\b/, + start: "hsl(", + end: ")", + }, + ]; + + color = color.replace("°", ""); + + for (let regex of colorREGEX) { + if (color.match(regex.rule)) { + color = regex.start + color + regex.end; + break; + } + } + + $(".colorConverter").css("color", color); + color = Misc.convertRGBtoHEX($(".colorConverter").css("color")); + if (!color) { + return; + } + + let colorid = colorPicker.find("input[type=color]").attr("id"); + + document.documentElement.style.setProperty(colorid, color); + let pickerButton = colorPicker.find("label"); + + pickerButton.val(color); + pickerButton.attr("value", color); + if (pickerButton.attr("for") !== "--bg-color") + pickerButton.css("background-color", color); + colorPicker.find("input[type=text]").val(color); + colorPicker.find("input[type=color]").attr("value", color); +} + export function refreshButtons() { let favThemesEl = $( ".pageSettings .section.themes .favThemes.buttons" @@ -65,15 +124,22 @@ export function refreshButtons() { export function setCustomInputs() { $( - ".pageSettings .section.themes .tabContainer .customTheme input[type=color]" + ".pageSettings .section.themes .tabContainer .customTheme .colorPicker" ).each((n, index) => { + console.log(index); let currentColor = Config.customThemeColors[ - ThemeController.colorVars.indexOf($(index).attr("id")) + ThemeController.colorVars.indexOf( + $(index).find("input[type=color]").attr("id") + ) ]; - $(index).val(currentColor); - $(index).attr("value", currentColor); - $(index).prev().text(currentColor); + + //todo check if needed + // $(index).find("input[type=color]").val(currentColor); + // $(index).find("input[type=color]").attr("value", currentColor); + // $(index).find("input[type=text]").val(currentColor); + + updateColors($(index), currentColor); }); } @@ -202,11 +268,73 @@ $( let $colorVar = $(e.currentTarget).attr("id"); let $pickedColor = $(e.currentTarget).val(); - document.documentElement.style.setProperty($colorVar, $pickedColor); - $(".colorPicker #" + $colorVar).attr("value", $pickedColor); - $(".colorPicker [for=" + $colorVar + "]").text($pickedColor); + //todo check if needed + // document.documentElement.style.setProperty($colorVar, $pickedColor); + // $(".colorPicker #" + $colorVar).attr("value", $pickedColor); + // $(".colorPicker #" + $colorVar).val($pickedColor); + // $(".colorPicker #" + $colorVar + "-txt").val($pickedColor); + // }); + + // $( + // ".pageSettings .section.themes .tabContainer .customTheme input[type=text]" + // ).on("input", (e) => { + // // UpdateConfig.setCustomTheme(true, true); + // let $colorVar = $(e.currentTarget).attr("id").replace("-txt", ""); + // let $pickedColor = $(e.currentTarget).val(); + + // document.documentElement.style.setProperty($colorVar, $pickedColor); + // $(".colorPicker #" + $colorVar).attr("value", $pickedColor); + // $(".colorPicker #" + $colorVar).val($pickedColor); + // $(".colorPicker #" + $colorVar + "-txt").val($pickedColor); + updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor, true); }); +$( + ".pageSettings .section.themes .tabContainer .customTheme input[type=color]" +).on("change", (e) => { + // UpdateConfig.setCustomTheme(true, true); + let $colorVar = $(e.currentTarget).attr("id"); + let $pickedColor = $(e.currentTarget).val(); + + //todo check if needed + // document.documentElement.style.setProperty($colorVar, $pickedColor); + // $(".colorPicker #" + $colorVar).attr("value", $pickedColor); + // $(".colorPicker #" + $colorVar).val($pickedColor); + // $(".colorPicker #" + $colorVar + "-txt").val($pickedColor); + // }); + + // $( + // ".pageSettings .section.themes .tabContainer .customTheme input[type=text]" + // ).on("input", (e) => { + // // UpdateConfig.setCustomTheme(true, true); + // let $colorVar = $(e.currentTarget).attr("id").replace("-txt", ""); + // let $pickedColor = $(e.currentTarget).val(); + + // document.documentElement.style.setProperty($colorVar, $pickedColor); + // $(".colorPicker #" + $colorVar).attr("value", $pickedColor); + // $(".colorPicker #" + $colorVar).val($pickedColor); + // $(".colorPicker #" + $colorVar + "-txt").val($pickedColor); + updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); +}); + +$(".pageSettings .section.themes .tabContainer .customTheme input[type=text]") + .on("blur", (e) => { + let $colorVar = $(e.currentTarget).attr("id"); + let $pickedColor = $(e.currentTarget).val(); + + updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); + }) + .on("keypress", function (e) { + if (e.which === 13) { + $(this).attr("disabled", "disabled"); + let $colorVar = $(e.currentTarget).attr("id"); + let $pickedColor = $(e.currentTarget).val(); + + updateColors($(".colorPicker #" + $colorVar).parent(), $pickedColor); + $(this).removeAttr("disabled"); + } + }); + $(".pageSettings .saveCustomThemeButton").click((e) => { let save = []; $.each( @@ -254,9 +382,8 @@ $(".pageSettings #loadCustomColorsFromPreset").click((e) => { } else if (colorName === "--colorful-error-extra-color") { color = themecolors.colorfulErrorExtra; } - $(".colorPicker #" + colorName).attr("value", color); - $(".colorPicker #" + colorName).val(color); - $(".colorPicker [for=" + colorName + "]").text(color); + + updateColors($(".colorPicker #" + colorName).parent(), color); }); }, 250); }); diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss index f89d4caf7..6f5d230c1 100644 --- a/src/sass/inputs.scss +++ b/src/sass/inputs.scss @@ -38,21 +38,12 @@ input[type="range"] { } input[type="color"] { - -webkit-appearance: none; + height: 3px; //i dont know why its 3, but safari gods have spoken - 3 makes it work + opacity: 0; padding: 0; - width: 100%; - // height: 32px; - height: 1.8rem; - overflow: hidden; - border-radius: var(--roundness); -} - -input[type="color"]::-webkit-color-swatch-wrapper { - padding: 0; -} - -input[type="color"]::-webkit-color-swatch { - border: none; + margin: 0; + position: absolute; + pointer-events: none; } ::-moz-color-swatch { @@ -71,35 +62,6 @@ input[type="number"] { -moz-appearance: textfield; } -.colorPicker { - text-align: center; - will-change: transform; - transition: transform 0.2s ease-in-out; - overflow: hidden; - border-radius: var(--roundness); - - & label { - position: absolute; - width: 100%; - // height: 32px; - line-height: 1.8rem; - display: flex; - align-items: center; - justify-content: center; - padding: auto; - color: var(--bg-color); - cursor: pointer; - } - - & [for="--bg-color"] { - color: var(--text-color); - } - - & #--bg-color { - border: 2px solid var(--sub-color); - } -} - .select2-dropdown { background-color: var(--bg-color); color: var(--text-color); diff --git a/src/sass/settings.scss b/src/sass/settings.scss index 68f339b89..fe9525a02 100644 --- a/src/sass/settings.scss +++ b/src/sass/settings.scss @@ -66,17 +66,13 @@ } } - .inputAndSave { + .inputAndButton { display: grid; grid-template-columns: 8fr 1fr; gap: 0.5rem; margin-bottom: 0.5rem; - input { - // grid-column: 1/3; - } - .save { - // grid-column: 3/4; + .button { height: auto; .fas { @@ -86,6 +82,15 @@ } } + &.themes .tabContainer [tabcontent="custom"] { + label.button:first-child { + color: var(--text-color); + } + label.button { + color: var(--bg-color); + } + } + &.customBackgroundFilter { .groups { grid-area: buttons; diff --git a/static/index.html b/static/index.html index 5291480a4..d875af48f 100644 --- a/static/index.html +++ b/static/index.html @@ -2108,7 +2108,7 @@ threshold.
-
+
-
+
-
+
-
+
-
+
-
+
+ + +
--> + + +
+