Merge pull request #22 from penicillin0/feature-13/listmarker-color

marker color changeable
penicillin0 · Dec 18, 2021 · 8fdcdf2 · 8fdcdf2
2 parents 4d33012 + 38a6714
commit 8fdcdf2
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 15 deletions.
diff --git 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
@@ -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
@@ -17,6 +17,7 @@ type Props = Record<string, never>;
 export const Console: React.FC<Props> = () => {
   const [indentOptions, setIndentOptions] =
     useState<IndentOptionsType>(initialState);
+  const [markerColor, setMarkerColor] = useState<string>('rgba(0,0,0,0.65)');
   const [indentLining, setIndentLining] = useState<boolean>(false);
   const [indentLiningColor, setIndentLiningColor] = useState<string>('#dcdcdc');
 
@@ -53,6 +54,17 @@ export const Console: React.FC<Props> = () => {
       } else {
         setIndentLiningColor(scrapboxIndentLineColor);
       }
+
+      const scrapboxMarkerColor = await getLocalStorage<string | null>(
+        '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<Props> = () => {
         indentLining={indentLining}
         handleIndentLiningChange={handleIndentLiningChange}
         setIndentLiningColor={setIndentLiningColor}
+        setMarkerColor={setMarkerColor}
       />
       <Demonstration
         hasLine={indentLining}
         indentOptions={indentOptions}
         indentLiningColor={indentLiningColor}
+        markerColor={markerColor}
       />
     </MainContainer>
   );

diff --git 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> = (props) => {
@@ -32,7 +33,9 @@ export const Demonstration: React.FC<Props> = (props) => {
                     );
                   })}
                   <IndentContent>
-                    <IndentValue>{indentOption.value}</IndentValue>
+                    <IndentValue markerColor={props.markerColor}>
+                      {indentOption.value}
+                    </IndentValue>
                     &nbsp;&nbsp;&nbsp;
                     <IndentOption>{indentOption.label}</IndentOption>
                   </IndentContent>
@@ -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
@@ -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> = (props) => {
@@ -60,9 +61,13 @@ export const MakerConsole: React.FC<Props> = (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> = (props) => {
         <IconContext.Provider
           value={{ size: '20px', style: { padding: '2px' } }}
         >
-          <ColorLens onClick={handleColorIconClick} />
+          <ColorLens onClick={handleColorIconClick} id="LineColor" />
         </IconContext.Provider>
       </TitleWrapper>
 
@@ -117,6 +122,14 @@ export const MakerConsole: React.FC<Props> = (props) => {
       </Popper>
 
       <IndentContainer>
+        <MarkerColorIconContainer>
+          <span>Marker Color</span>
+          <IconContext.Provider
+            value={{ size: '20px', style: { padding: '2px' } }}
+          >
+            <ColorLens onClick={handleColorIconClick} id="markerColor" />
+          </IconContext.Provider>
+        </MarkerColorIconContainer>
         {props.indentOptions.map((indentOption) => {
           const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
 
@@ -143,6 +156,14 @@ export const MakerConsole: React.FC<Props> = (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 }>`