Skip to content

Commit 679fa05

Browse files
penicillin0penicillin0
authored
Merge pull request #14 from penicillin0/feature-11/indent-line-color
make changeable indent line color
2 parents c9bcdd4 + 15f2906 commit 679fa05

File tree

6 files changed

+398
-139
lines changed

6 files changed

+398
-139
lines changed

‎js/scrapboxCssScript.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ const indentCSSRule = new Map([
66
{
77
before: ' .c-',
88
after:
9-
' + .dot {height: .4em !important;width: .4em !important;border-color: black !important;border: solid .1em rgba(0,0,0,0.65) !important;background-color: rgba(0,0,0,0.65) !important;}',
9+
' + .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;}',
1010
},
1111
],
1212
[
@@ -75,7 +75,7 @@ const indentLineCSS = [
7575
}`,
7676
];
7777

78-
const insertIndentLineCSSRule = (isLining) => {
78+
const insertIndentLineCSSRule = (isLining, indentColor) => {
7979
// delete existing rules
8080
const cssRules = document.styleSheets[0].cssRules;
8181
const cssRulesNum = cssRules.length;
@@ -97,6 +97,9 @@ const insertIndentLineCSSRule = (isLining) => {
9797
// insert new rules
9898
if (isLining) {
9999
indentLineCSS.map((css) => {
100+
if (css.includes('#dcdcdc')) {
101+
css = css.replace('#dcdcdc', indentColor);
102+
}
100103
document.styleSheets[0].insertRule(css);
101104
});
102105
}
@@ -112,7 +115,12 @@ const makerAttachment = () => {
112115
const liningAttachment = () => {
113116
chrome.storage.local.get('scrapboxIndentLining', (result) => {
114117
const isLining = result.scrapboxIndentLining;
115-
insertIndentLineCSSRule(isLining);
118+
119+
chrome.storage.local.get('scrapboxIndentLineColor', (result) => {
120+
const scrapboxIndentLineColor =
121+
result.scrapboxIndentLineColor || '#dcdcdc';
122+
insertIndentLineCSSRule(isLining, scrapboxIndentLineColor);
123+
});
116124
});
117125
};
118126

@@ -124,6 +132,9 @@ chrome.runtime.onMessage.addListener((request) => {
124132
if (request === 'scrapbox_indent_lining') {
125133
liningAttachment();
126134
}
135+
if (request === 'scrapbox_indent_lining_color') {
136+
liningAttachment();
137+
}
127138
});
128139

129140
// initialize

‎package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,10 @@
2929
},
3030
"dependencies": {
3131
"react": "^17.0.2",
32+
"react-color": "^2.19.3",
3233
"react-dom": "^17.0.2",
3334
"react-icons": "^4.3.1",
35+
"react-outside-click-handler": "^1.3.0",
3436
"react-scripts": "4.0.3",
3537
"react-select": "^5.2.1",
3638
"react-switch": "^6.0.0",
@@ -45,7 +47,9 @@
4547
"@types/jest": "^26.0.15",
4648
"@types/node": "^12.0.0",
4749
"@types/react": "^17.0.0",
50+
"@types/react-color": "^3.0.6",
4851
"@types/react-dom": "^17.0.0",
52+
"@types/react-outside-click-handler": "^1.3.0",
4953
"@types/react-select": "^5.0.1",
5054
"@types/styled-components": "^5.1.15",
5155
"@typescript-eslint/eslint-plugin": "^5.3.1",

‎src/components/Console.tsx‎

Lines changed: 25 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,8 @@
11
import React, { useEffect, useState } from 'react';
2-
import Select, { ActionMeta, SingleValue } from 'react-select';
3-
import Switch from 'react-switch';
42
import styled from 'styled-components';
53
import { IndentOptionsType } from '../utils/types';
64
import { Demonstration } from './Demonstration';
7-
8-
const options = [
9-
{ value: '●', label: '●' },
10-
{ value: '○', label: '○' },
11-
{ value: '■', label: '■' },
12-
{ value: '□', label: '□' },
13-
];
5+
import { MakerConsole } from './MakerConsole';
146

157
const initialState: IndentOptionsType = [
168
{ value: '●', label: 'indent-1' },
@@ -25,6 +17,7 @@ export const Console: React.FC<Props> = () => {
2517
const [indentOptions, setIndentOptions] =
2618
useState<IndentOptionsType>(initialState);
2719
const [indentLining, setIndentLining] = useState<boolean>(false);
20+
const [indentLiningColor, setIndentLiningColor] = useState<string>('#dcdcdc');
2821

2922
useEffect(() => {
3023
chrome.storage.local.get('scrapboxIndentOption', (result) => {
@@ -48,6 +41,17 @@ export const Console: React.FC<Props> = () => {
4841
setIndentLining(scrapboxIndentLining);
4942
}
5043
});
44+
45+
chrome.storage.local.get('scrapboxIndentLineColor', (result) => {
46+
const scrapboxIndentLineColor = result.scrapboxIndentLineColor;
47+
48+
if (!scrapboxIndentLineColor) {
49+
chrome.storage.local.set({ scrapboxIndentLineColor: '#dcdcdc' });
50+
setIndentLiningColor('#dcdcdc');
51+
} else {
52+
setIndentLiningColor(scrapboxIndentLineColor);
53+
}
54+
});
5155
}, []);
5256

5357
const handleIndentLiningChange = (checked: boolean) => {
@@ -65,86 +69,20 @@ export const Console: React.FC<Props> = () => {
6569
});
6670
};
6771

68-
const handleOnChange = (
69-
newValue: SingleValue<{
70-
value: string;
71-
label: string;
72-
}>,
73-
metaAction: ActionMeta<{
74-
value: string;
75-
label: string;
76-
}>
77-
) => {
78-
// eslint-disable-next-line
79-
const value = newValue!.value;
80-
const label = metaAction.name;
81-
82-
const newIndentOptions = indentOptions.map((option) => {
83-
if (option.label === label) {
84-
return { value, label };
85-
}
86-
return option;
87-
});
88-
89-
setIndentOptions(newIndentOptions);
90-
91-
chrome.storage.local.set({ scrapboxIndentOption: newIndentOptions });
92-
93-
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
94-
tabs.forEach((tab) => {
95-
if (tab.url === undefined || tab.id === undefined) return;
96-
const url = new URL(tab.url);
97-
if (url.hostname === 'scrapbox.io') {
98-
chrome.tabs.sendMessage(tab.id, 'scrapbox_list_maker');
99-
}
100-
});
101-
});
102-
};
103-
10472
return (
10573
<MainContainer>
106-
<TitleWrapper>
107-
<Title>Select Favorite List Maker</Title>
108-
<SwitchLabel>
109-
<Switch
110-
checked={indentLining}
111-
onChange={handleIndentLiningChange}
112-
onColor="#00b428"
113-
boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
114-
height={16}
115-
width={30}
116-
handleDiameter={18}
117-
checkedIcon={false}
118-
uncheckedIcon={false}
119-
/>
120-
<Spacer width={6} />
121-
<span>Indent Visible</span>
122-
</SwitchLabel>
123-
</TitleWrapper>
124-
<IndentContainer>
125-
{indentOptions.map((indentOption) => {
126-
const spaceNum = +indentOption.label.replace(/[^0-9]/g, '') - 1;
127-
128-
return (
129-
<>
130-
<IndentRow spaceNum={spaceNum}>
131-
<Select
132-
value={{
133-
value: indentOption.value,
134-
label: indentOption.value,
135-
}}
136-
onChange={handleOnChange}
137-
key={indentOption.label}
138-
name={indentOption.label}
139-
options={options}
140-
></Select>
141-
<Label>{indentOption.label}</Label>
142-
</IndentRow>
143-
</>
144-
);
145-
})}
146-
</IndentContainer>
147-
<Demonstration hasLine={indentLining} indentOptions={indentOptions} />
74+
<MakerConsole
75+
indentOptions={indentOptions}
76+
setIndentOptions={setIndentOptions}
77+
indentLining={indentLining}
78+
handleIndentLiningChange={handleIndentLiningChange}
79+
setIndentLiningColor={setIndentLiningColor}
80+
/>
81+
<Demonstration
82+
hasLine={indentLining}
83+
indentOptions={indentOptions}
84+
indentLiningColor={indentLiningColor}
85+
/>
14886
</MainContainer>
14987
);
15088
};
@@ -154,41 +92,3 @@ const MainContainer = styled.div`
15492
padding: 4px;
15593
padding-bottom: 8px;
15694
`;
157-
158-
const Spacer = styled.div<{ width: number }>`
159-
width: ${(props) => props.width}px;
160-
`;
161-
162-
const TitleWrapper = styled.div`
163-
display: flex;
164-
align-items: center;
165-
`;
166-
167-
const Title = styled.div`
168-
font-size: 16px;
169-
text-align: left;
170-
margin: 10px 12px;
171-
`;
172-
173-
const SwitchLabel = styled.label`
174-
margin-left: 8px;
175-
display: flex;
176-
align-items: center;
177-
`;
178-
179-
const Label = styled.div`
180-
font-size: 14px;
181-
margin-left: 12px;
182-
`;
183-
184-
const IndentContainer = styled.div`
185-
margin: 0px 10px;
186-
`;
187-
188-
const IndentRow = styled.div<{ spaceNum: number }>`
189-
margin-left: ${(props) => `${props.spaceNum * 30}px`};
190-
margin-top: 4px;
191-
margin-bottom: 4px;
192-
display: flex;
193-
align-items: center;
194-
`;

‎src/components/Demonstration.tsx‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { IndentOptionsType } from '../utils/types';
55
type Props = {
66
hasLine: boolean;
77
indentOptions: IndentOptionsType;
8+
indentLiningColor: string;
89
};
910

1011
export const Demonstration: React.FC<Props> = (props) => {
@@ -21,8 +22,12 @@ export const Demonstration: React.FC<Props> = (props) => {
2122
{[...Array(spaceNum)].map((j) => {
2223
return (
2324
<VerticalLineIndentContainer key={j}>
24-
{props.hasLine && <VerticalLine />}
25-
<Indent hasLine={props.hasLine} />
25+
{props.hasLine && (
26+
<VerticalLine
27+
indentLiningColor={props.indentLiningColor}
28+
/>
29+
)}
30+
<Indent />
2631
</VerticalLineIndentContainer>
2732
);
2833
})}
@@ -74,16 +79,16 @@ const VerticalLineIndentContainer = styled.div`
7479
position: relative;
7580
`;
7681

77-
const VerticalLine = styled.div`
82+
const VerticalLine = styled.div<{ indentLiningColor: string }>`
7883
width: 1px;
7984
height: 23px;
8085
position: absolute;
8186
top: 0;
8287
left: 45%;
83-
background-color: #dcdcdc;
88+
background-color: ${(props) => props.indentLiningColor};
8489
`;
8590

86-
const Indent = styled.div<{ hasLine: boolean }>`
91+
const Indent = styled.div`
8792
width: 24px;
8893
height: 23px;
8994
`;

0 commit comments

Comments
 (0)