leaflet.pub
a tool for shared writing and social publishing
make slider easier to click, adjusted pageWidth minmax full width button in themeSetters
cozylittle.house
+174
-159
+2
-2
components/ThemeManager/Pickers/ImagePicker.tsx
+2
-2
components/ThemeManager/Pickers/ImagePicker.tsx
···
73
73
});
74
74
}}
75
75
>
76
-
<div className="flex flex-col gap-2 w-full">
76
+
<div className="flex flex-col w-full">
77
77
<div className="flex gap-2">
78
78
<div
79
79
className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${repeat ? "text-[#595959]" : " text-[#969696]"}`}
···
122
122
}}
123
123
>
124
124
<Slider.Track
125
-
className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
125
+
className={`${repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`}
126
126
></Slider.Track>
127
127
<Slider.Thumb
128
128
className={`
+18
-11
components/ThemeManager/Pickers/PageWidthSetter.tsx
+18
-11
components/ThemeManager/Pickers/PageWidthSetter.tsx
···
13
13
closePicker: () => void;
14
14
}) => {
15
15
let { rep } = useReplicache();
16
+
17
+
let defaultPreset = 624;
18
+
let widePreset = 768;
16
19
let pageWidth = useEntity(props.entityID, "theme/page-width")?.data.value;
17
-
let currentValue = pageWidth || 624;
20
+
let currentValue = pageWidth || defaultPreset;
18
21
let [interimValue, setInterimValue] = useState<number>(currentValue);
19
22
let [selectedPreset, setSelectedPreset] = useState<
20
23
"default" | "wide" | "custom"
21
24
>(
22
-
currentValue === 624 ? "default" : currentValue === 756 ? "wide" : "custom",
25
+
currentValue === defaultPreset
26
+
? "default"
27
+
: currentValue === widePreset
28
+
? "wide"
29
+
: "custom",
23
30
);
24
-
let min = 324;
31
+
let min = 320;
25
32
let max = 1200;
26
33
27
34
let open = props.openPicker == props.thisPicker;
···
47
54
<div className="flex flex-col gap-2">
48
55
<div className="flex gap-2 items-center">
49
56
<button
50
-
className="font-bold text-[#000000] shrink-0 grow-0 w-fit"
57
+
className="font-bold text-[#000000] shrink-0 grow-0 w-full flex gap-2 items-start text-left"
51
58
onClick={() => {
52
59
if (props.openPicker === props.thisPicker) {
53
60
props.setOpenPicker("null");
···
57
64
}}
58
65
>
59
66
Max Page Width
67
+
<span className="flex font-normal text-[#969696]">
68
+
{currentValue}px
69
+
</span>
60
70
</button>
61
-
<div className="flex font-normal text-[#969696]">
62
-
{currentValue}px
63
-
</div>
64
71
</div>
65
72
{open && (
66
73
<div className="flex flex-col gap-1 px-3">
···
76
83
onChange={(e) => {
77
84
if (!e.currentTarget.checked) return;
78
85
setSelectedPreset("default");
79
-
setPageWidth(624);
86
+
setPageWidth(defaultPreset);
80
87
}}
81
88
>
82
89
<div
···
98
105
onChange={(e) => {
99
106
if (!e.currentTarget.checked) return;
100
107
setSelectedPreset("wide");
101
-
setPageWidth(756);
108
+
setPageWidth(widePreset);
102
109
}}
103
110
>
104
111
<div
···
126
133
}
127
134
}}
128
135
>
129
-
<div className="flex flex-col gap-2 w-full">
136
+
<div className="flex flex-col w-full">
130
137
<div className="flex gap-2">
131
138
<div
132
139
className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`}
···
188
195
}}
189
196
>
190
197
<Slider.Track
191
-
className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
198
+
className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`}
192
199
/>
193
200
<Slider.Thumb
194
201
className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
+2
-2
components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
+2
-2
components/ThemeManager/PubPickers/PubBackgroundPickers.tsx
···
245
245
props.setBgImage({ ...props.bgImage, repeat: 500 });
246
246
}}
247
247
>
248
-
<div className="flex flex-col gap-2 w-full">
248
+
<div className="flex flex-col w-full">
249
249
<div className="flex gap-2">
250
250
<div
251
251
className={`shink-0 grow-0 w-fit z-10 cursor-pointer ${props.bgImage?.repeat ? "text-[#595959]" : " text-[#969696]"}`}
···
284
284
}}
285
285
>
286
286
<Slider.Track
287
-
className={`${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
287
+
className={`${props.bgImage?.repeat ? "bg-[#595959]" : " bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`}
288
288
></Slider.Track>
289
289
<Slider.Thumb
290
290
className={`
+151
-143
components/ThemeManager/PubPickers/PubPageWidthSetter.tsx
+151
-143
components/ThemeManager/PubPickers/PubPageWidthSetter.tsx
···
11
11
openPicker: pickers;
12
12
setOpenPicker: (p: pickers) => void;
13
13
}) => {
14
-
let currentValue = props.pageWidth || 624;
14
+
let defaultPreset = 624;
15
+
let widePreset = 768;
16
+
17
+
let currentValue = props.pageWidth || defaultPreset;
15
18
let [interimValue, setInterimValue] = useState<number>(currentValue);
16
19
let [selectedPreset, setSelectedPreset] = useState<
17
20
"default" | "wide" | "custom"
18
21
>(
19
-
currentValue === 624 ? "default" : currentValue === 756 ? "wide" : "custom",
22
+
currentValue === defaultPreset
23
+
? "default"
24
+
: currentValue === widePreset
25
+
? "wide"
26
+
: "custom",
20
27
);
21
-
let min = 324;
28
+
let min = 320;
22
29
let max = 1200;
23
30
24
31
// Update interim value when current value changes
···
34
41
35
42
return (
36
43
<div className="pageWidthSetter flex flex-col gap-2 px-2 py-[6px] border border-[#CCCCCC] rounded-md bg-white">
37
-
<div className="flex flex-col gap-2">
38
-
<div className="flex gap-2 items-center">
39
-
<button
40
-
type="button"
41
-
className="font-bold text-[#000000] shrink-0 grow-0 w-fit"
42
-
onClick={() => props.setOpenPicker(props.thisPicker)}
43
-
>
44
-
Max Page Width
45
-
</button>
46
-
<div className="flex font-normal text-[#969696]">
47
-
{currentValue}px
48
-
</div>
49
-
</div>
50
-
{open && (
51
-
<div className="flex flex-col gap-1 px-3">
52
-
<label htmlFor="pub-default" className="w-full">
53
-
<Radio
54
-
radioCheckedClassName="text-[#595959]!"
55
-
radioEmptyClassName="text-[#969696]!"
56
-
type="radio"
57
-
id="pub-default"
58
-
name="pub-page-width-options"
59
-
value="default"
60
-
checked={selectedPreset === "default"}
61
-
onChange={(e) => {
62
-
if (!e.currentTarget.checked) return;
63
-
setSelectedPreset("default");
64
-
setPageWidth(624);
65
-
}}
44
+
<button
45
+
type="button"
46
+
className="font-bold text-[#000000] shrink-0 grow-0 w-full flex gap-2 text-left items-center"
47
+
onClick={() => {
48
+
if (!open) {
49
+
props.setOpenPicker(props.thisPicker);
50
+
} else {
51
+
props.setOpenPicker("null");
52
+
}
53
+
}}
54
+
>
55
+
Max Page Width
56
+
<div className="flex font-normal text-[#969696]">{currentValue}px</div>
57
+
</button>
58
+
59
+
{open && (
60
+
<div className="flex flex-col gap-1 px-3">
61
+
<label htmlFor="pub-default" className="w-full">
62
+
<Radio
63
+
radioCheckedClassName="text-[#595959]!"
64
+
radioEmptyClassName="text-[#969696]!"
65
+
type="radio"
66
+
id="pub-default"
67
+
name="pub-page-width-options"
68
+
value="default"
69
+
checked={selectedPreset === "default"}
70
+
onChange={(e) => {
71
+
if (!e.currentTarget.checked) return;
72
+
setSelectedPreset("default");
73
+
setPageWidth(defaultPreset);
74
+
}}
75
+
>
76
+
<div
77
+
className={`w-full cursor-pointer ${selectedPreset === "default" ? "text-[#595959]" : "text-[#969696]"}`}
66
78
>
67
-
<div
68
-
className={`w-full cursor-pointer ${selectedPreset === "default" ? "text-[#595959]" : "text-[#969696]"}`}
69
-
>
70
-
default (624px)
71
-
</div>
72
-
</Radio>
73
-
</label>
74
-
<label htmlFor="pub-wide" className="w-full">
75
-
<Radio
76
-
radioCheckedClassName="text-[#595959]!"
77
-
radioEmptyClassName="text-[#969696]!"
78
-
type="radio"
79
-
id="pub-wide"
80
-
name="pub-page-width-options"
81
-
value="wide"
82
-
checked={selectedPreset === "wide"}
83
-
onChange={(e) => {
84
-
if (!e.currentTarget.checked) return;
85
-
setSelectedPreset("wide");
86
-
setPageWidth(756);
87
-
}}
79
+
default (624px)
80
+
</div>
81
+
</Radio>
82
+
</label>
83
+
<label htmlFor="pub-wide" className="w-full">
84
+
<Radio
85
+
radioCheckedClassName="text-[#595959]!"
86
+
radioEmptyClassName="text-[#969696]!"
87
+
type="radio"
88
+
id="pub-wide"
89
+
name="pub-page-width-options"
90
+
value="wide"
91
+
checked={selectedPreset === "wide"}
92
+
onChange={(e) => {
93
+
if (!e.currentTarget.checked) return;
94
+
setSelectedPreset("wide");
95
+
setPageWidth(widePreset);
96
+
}}
97
+
>
98
+
<div
99
+
className={`w-full cursor-pointer ${selectedPreset === "wide" ? "text-[#595959]" : "text-[#969696]"}`}
88
100
>
89
-
<div
90
-
className={`w-full cursor-pointer ${selectedPreset === "wide" ? "text-[#595959]" : "text-[#969696]"}`}
91
-
>
92
-
wide (756px)
93
-
</div>
94
-
</Radio>
95
-
</label>
96
-
<label htmlFor="pub-custom" className="pb-3 w-full">
97
-
<Radio
98
-
type="radio"
99
-
id="pub-custom"
100
-
name="pub-page-width-options"
101
-
value="custom"
102
-
radioCheckedClassName="text-[#595959]!"
103
-
radioEmptyClassName="text-[#969696]!"
104
-
checked={selectedPreset === "custom"}
105
-
onChange={(e) => {
106
-
if (!e.currentTarget.checked) return;
107
-
setSelectedPreset("custom");
108
-
if (selectedPreset !== "custom") {
109
-
setPageWidth(currentValue);
110
-
setInterimValue(currentValue);
111
-
}
112
-
}}
113
-
>
114
-
<div className="flex flex-col gap-2 w-full">
115
-
<div className="flex gap-2">
116
-
<div
117
-
className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`}
118
-
>
119
-
custom
120
-
</div>
121
-
<div
122
-
className={`flex font-normal ${selectedPreset === "custom" ? "text-[#969696]" : "text-[#C3C3C3]"}`}
123
-
>
124
-
<Input
125
-
type="number"
126
-
className="w-10 text-right appearance-none bg-transparent"
127
-
max={max}
128
-
min={min}
129
-
value={interimValue}
130
-
onChange={(e) => {
131
-
setInterimValue(parseInt(e.currentTarget.value));
132
-
}}
133
-
onKeyDown={(e) => {
134
-
if (e.key === "Enter" || e.key === "Escape") {
135
-
e.preventDefault();
136
-
let clampedValue = interimValue;
137
-
if (!isNaN(interimValue)) {
138
-
clampedValue = Math.max(
139
-
min,
140
-
Math.min(max, interimValue),
141
-
);
142
-
setInterimValue(clampedValue);
143
-
}
144
-
setPageWidth(clampedValue);
145
-
}
146
-
}}
147
-
onBlur={() => {
101
+
wide (756px)
102
+
</div>
103
+
</Radio>
104
+
</label>
105
+
<label htmlFor="pub-custom" className="pb-3 w-full">
106
+
<Radio
107
+
type="radio"
108
+
id="pub-custom"
109
+
name="pub-page-width-options"
110
+
value="custom"
111
+
radioCheckedClassName="text-[#595959]!"
112
+
radioEmptyClassName="text-[#969696]!"
113
+
checked={selectedPreset === "custom"}
114
+
onChange={(e) => {
115
+
if (!e.currentTarget.checked) return;
116
+
setSelectedPreset("custom");
117
+
if (selectedPreset !== "custom") {
118
+
setPageWidth(currentValue);
119
+
setInterimValue(currentValue);
120
+
}
121
+
}}
122
+
>
123
+
<div className="flex flex-col w-full">
124
+
<div className="flex gap-2">
125
+
<div
126
+
className={`shrink-0 grow-0 w-fit z-10 cursor-pointer ${selectedPreset === "custom" ? "text-[#595959]" : "text-[#969696]"}`}
127
+
>
128
+
custom
129
+
</div>
130
+
<div
131
+
className={`flex font-normal ${selectedPreset === "custom" ? "text-[#969696]" : "text-[#C3C3C3]"}`}
132
+
>
133
+
<Input
134
+
type="number"
135
+
className="w-10 text-right appearance-none bg-transparent"
136
+
max={max}
137
+
min={min}
138
+
value={interimValue}
139
+
onChange={(e) => {
140
+
setInterimValue(parseInt(e.currentTarget.value));
141
+
}}
142
+
onKeyDown={(e) => {
143
+
if (e.key === "Enter" || e.key === "Escape") {
144
+
e.preventDefault();
148
145
let clampedValue = interimValue;
149
146
if (!isNaN(interimValue)) {
150
147
clampedValue = Math.max(
···
154
151
setInterimValue(clampedValue);
155
152
}
156
153
setPageWidth(clampedValue);
157
-
}}
158
-
/>
159
-
px
160
-
</div>
154
+
}
155
+
}}
156
+
onBlur={() => {
157
+
let clampedValue = interimValue;
158
+
if (!isNaN(interimValue)) {
159
+
clampedValue = Math.max(
160
+
min,
161
+
Math.min(max, interimValue),
162
+
);
163
+
setInterimValue(clampedValue);
164
+
}
165
+
setPageWidth(clampedValue);
166
+
}}
167
+
/>
168
+
px
161
169
</div>
162
-
<Slider.Root
163
-
className={`relative grow flex items-center select-none touch-none w-full h-fit px-1`}
164
-
value={[interimValue]}
165
-
max={max}
166
-
min={min}
167
-
step={16}
168
-
onValueChange={(value) => {
169
-
setInterimValue(value[0]);
170
-
}}
171
-
onValueCommit={(value) => {
172
-
setPageWidth(value[0]);
173
-
}}
174
-
>
175
-
<Slider.Track
176
-
className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px]`}
177
-
/>
178
-
<Slider.Thumb
179
-
className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
170
+
</div>
171
+
<Slider.Root
172
+
className={`relative grow flex items-center select-none touch-none w-full h-fit px-1`}
173
+
value={[interimValue]}
174
+
max={max}
175
+
min={min}
176
+
step={16}
177
+
onValueChange={(value) => {
178
+
setInterimValue(value[0]);
179
+
}}
180
+
onValueCommit={(value) => {
181
+
setPageWidth(value[0]);
182
+
}}
183
+
>
184
+
<Slider.Track
185
+
className={`${selectedPreset === "custom" ? "bg-[#595959]" : "bg-[#C3C3C3]"} relative grow rounded-full h-[3px] my-2`}
186
+
/>
187
+
<Slider.Thumb
188
+
className={`flex w-4 h-4 rounded-full border-2 border-white cursor-pointer
180
189
${selectedPreset === "custom" ? "bg-[#595959] shadow-[0_0_0_1px_#8C8C8C,inset_0_0_0_1px_#8C8C8C]" : "bg-[#C3C3C3]"}
181
190
`}
182
-
aria-label="Max Page Width"
183
-
/>
184
-
</Slider.Root>
185
-
</div>
186
-
</Radio>
187
-
</label>
188
-
</div>
189
-
)}
190
-
</div>
191
+
aria-label="Max Page Width"
192
+
/>
193
+
</Slider.Root>
194
+
</div>
195
+
</Radio>
196
+
</label>
197
+
</div>
198
+
)}
191
199
</div>
192
200
);
193
201
};