From 38a6714414e98afc40a4ab642e7aa98c94c37fe1 Mon Sep 17 00:00:00 2001 From: penicillin0 Date: Sun, 19 Dec 2021 04:14:28 +0900 Subject: [PATCH] marker color changeable --- js/cssGenerate.js | 10 +++++----- js/scrapboxCssScript.js | 16 +++++++++++++--- src/components/Console.tsx | 14 ++++++++++++++ src/components/Demonstration.tsx | 9 ++++++--- src/components/MakerConsole.tsx | 30 ++++++++++++++++++++++++++---- 5 files changed, 64 insertions(+), 15 deletions(-) diff --git a/js/cssGenerate.js b/js/cssGenerate.js index c802a92..cf11a25 100644 --- a/js/cssGenerate.js +++ b/js/cssGenerate.js @@ -1,13 +1,13 @@ -export const getIndentCssRule = (marker, indentNumber) => { +export const getIndentCssRule = (marker, indentNumber, markerColor) => { switch (marker) { case '●': - return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important;border-color: rgba(0,0,0,0.65) !important;border: solid .1em rgba(0,0,0,0.65) !important;background-color: rgba(0,0,0,0.65) !important;}`; + return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important; border-color: ${markerColor} !important;border: solid .1em ${markerColor} !important; background-color: ${markerColor} !important;}`; case '○': - return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important;border-color: black !important;border: solid .1em rgba(0,0,0,0.65) !important;background-color: rgb(255,255,255) !important;}`; + return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important; border-color: black !important; border: solid .1em ${markerColor} !important; background-color: rgba(255,255,255, 0.4) !important;}`; case '■': - return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important;border-radius: 25% !important;background-color: rgba(0,0,0,0.65) !important;}`; + return `.c-${indentNumber} + .dot {height: .4em !important;width: .4em !important; border-radius: 0% !important; background-color: ${markerColor} !important;}`; case '□': - return `.c-${indentNumber} + .dot {height: .4em !important; width: .4em !important;border-radius: 25% !important; border: solid .1em rgba(0,0,0,0.65) !important;background-color: rgb(255,255,255) !important; }`; + return `.c-${indentNumber} + .dot {height: .4em !important; width: .4em !important; border-radius: 0% !important; border: solid .1em ${markerColor} !important; background-color: rgba(255,255,255, 0.4) !important; }`; default: break; } diff --git a/js/scrapboxCssScript.js b/js/scrapboxCssScript.js index 0106d5b..da7b191 100644 --- a/js/scrapboxCssScript.js +++ b/js/scrapboxCssScript.js @@ -2,7 +2,7 @@ import { getIndentCssRule, indentLineCss } from './cssGenerate.js'; -const insertIndentCSSRule = (scrapboxIndentOptions) => { +const insertIndentCSSRule = (scrapboxIndentOptions, scrapboxMarkerColor) => { // delete existing rules const cssRules = document.styleSheets[0].cssRules; const cssRulesNum = cssRules.length; @@ -23,7 +23,11 @@ const insertIndentCSSRule = (scrapboxIndentOptions) => { for (let i = 0; i < 20; i++) { if (i % 4 === indentNum - 1) { - const css = getIndentCssRule(scrapboxIndentOption.value, i); + const css = getIndentCssRule( + scrapboxIndentOption.value, + i, + scrapboxMarkerColor + ); document.styleSheets[0].insertRule(css); } } @@ -63,7 +67,10 @@ const insertIndentLineCSSRule = (isLining, indentColor) => { const makerAttachment = () => { chrome.storage.local.get('scrapboxIndentOption', (result) => { const scrapboxIndentOptions = result.scrapboxIndentOption; - insertIndentCSSRule(scrapboxIndentOptions); + chrome.storage.local.get('scrapboxMarkerColor', (result) => { + const scrapboxMarkerColor = result.scrapboxMarkerColor; + insertIndentCSSRule(scrapboxIndentOptions, scrapboxMarkerColor); + }); }); }; @@ -94,6 +101,9 @@ chrome.storage.onChanged.addListener((changes) => { case 'scrapboxIndentLineColor': liningAttachment(); break; + case 'scrapboxMarkerColor': + makerAttachment(); + break; default: break; } diff --git a/src/components/Console.tsx b/src/components/Console.tsx index c693d37..cf6423b 100644 --- a/src/components/Console.tsx +++ b/src/components/Console.tsx @@ -17,6 +17,7 @@ type Props = Record; export const Console: React.FC = () => { const [indentOptions, setIndentOptions] = useState(initialState); + const [markerColor, setMarkerColor] = useState('rgba(0,0,0,0.65)'); const [indentLining, setIndentLining] = useState(false); const [indentLiningColor, setIndentLiningColor] = useState('#dcdcdc'); @@ -53,6 +54,17 @@ export const Console: React.FC = () => { } else { setIndentLiningColor(scrapboxIndentLineColor); } + + const scrapboxMarkerColor = await getLocalStorage( + 'scrapboxMarkerColor' + ); + + if (!scrapboxMarkerColor) { + setLocalStorage('scrapboxMarkerColor', 'rgba(0,0,0,0.65)'); + setMarkerColor('rgba(0,0,0,0.65)'); + } else { + setMarkerColor(scrapboxMarkerColor); + } })(); }, []); @@ -69,11 +81,13 @@ export const Console: React.FC = () => { indentLining={indentLining} handleIndentLiningChange={handleIndentLiningChange} setIndentLiningColor={setIndentLiningColor} + setMarkerColor={setMarkerColor} /> ); diff --git a/src/components/Demonstration.tsx b/src/components/Demonstration.tsx index cad5e3d..b900d10 100644 --- a/src/components/Demonstration.tsx +++ b/src/components/Demonstration.tsx @@ -6,6 +6,7 @@ type Props = { hasLine: boolean; indentOptions: IndentOptionsType; indentLiningColor: string; + markerColor: string; }; export const Demonstration: React.FC = (props) => { @@ -32,7 +33,9 @@ export const Demonstration: React.FC = (props) => { ); })} - {indentOption.value} + + {indentOption.value} +     {indentOption.label} @@ -101,11 +104,11 @@ const IndentContent = styled.div` align-items: center; `; -const IndentValue = styled.span` +const IndentValue = styled.span<{ markerColor: string }>` font-size: 10px; transform: scale(0.75); font-weight: bold; - color: rgba(0, 0, 0, 0.8); + color: ${(props) => props.markerColor}; `; const IndentOption = styled.span` diff --git a/src/components/MakerConsole.tsx b/src/components/MakerConsole.tsx index c2306e5..e982f4b 100644 --- a/src/components/MakerConsole.tsx +++ b/src/components/MakerConsole.tsx @@ -23,6 +23,7 @@ type Props = { indentLining: boolean; handleIndentLiningChange: (checked: boolean) => void; setIndentLiningColor: (color: string) => void; + setMarkerColor: (color: string) => void; }; export const MakerConsole: React.FC = (props) => { @@ -60,9 +61,13 @@ export const MakerConsole: React.FC = (props) => { }; const handleColorChange = async ({ hex }: ColorResult) => { - setLocalStorage('scrapboxIndentLineColor', hex); - - props.setIndentLiningColor(hex); + if (anchorEl?.id === 'lineColor') { + setLocalStorage('scrapboxIndentLineColor', hex); + props.setIndentLiningColor(hex); + } else if (anchorEl?.id === 'markerColor') { + setLocalStorage('scrapboxMarkerColor', hex); + props.setMarkerColor(hex); + } }; const handleOnOutsideClick = () => { @@ -91,7 +96,7 @@ export const MakerConsole: React.FC = (props) => { - + @@ -117,6 +122,14 @@ export const MakerConsole: React.FC = (props) => { + + Marker Color + + + + {props.indentOptions.map((indentOption) => { const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1; @@ -143,6 +156,14 @@ export const MakerConsole: React.FC = (props) => { ); }; +const MarkerColorIconContainer = styled.div` + display: flex; + align-items: center; + position: absolute; + right: 6px; + top: -13px; +`; + const TitleWrapper = styled.div` display: flex; align-items: center; @@ -170,6 +191,7 @@ const SwitchLabel = styled.label` const IndentContainer = styled.div` margin: 0px 10px; + position: relative; `; const Spacer = styled.div<{ width: number }>`