leaflet.pub
a tool for shared writing and social publishing
wrap up styling tweaks to the publish popover
cozylittle.house
+46
-40
+25
-20
app/[leaflet_id]/actions/PublishButton.tsx
+25
-20
app/[leaflet_id]/actions/PublishButton.tsx
···
29
29
let params = useParams();
30
30
let router = useRouter();
31
31
32
-
if (!pub) return <PublishToPublication />;
32
+
if (!pub) return <PublishToPublicationButton />;
33
33
if (!pub?.doc)
34
34
return (
35
35
<ActionButton
···
86
86
);
87
87
};
88
88
89
-
const PublishToPublication = () => {
89
+
const PublishToPublicationButton = () => {
90
90
let { identity } = useIdentityData();
91
-
let params = useParams();
92
-
let router = useRouter();
91
+
93
92
let isMobile = useIsMobile();
94
-
let hasPubs =
95
-
identity && identity.atp_did && identity.publications.length > 0;
93
+
identity && identity.atp_did && identity.publications.length > 0;
94
+
let [selectedPub, setSelectedPub] = useState<string | undefined>(undefined);
96
95
97
96
return (
98
97
<Popover
99
98
asChild
100
99
side={isMobile ? "top" : "right"}
101
100
align={isMobile ? "center" : "start"}
102
-
className="max-w-xs w-[1000px]"
101
+
className="sm:max-w-sm w-[1000px]"
103
102
trigger={
104
103
<ActionButton
105
104
primary
···
119
118
<PostDetailsForm />
120
119
<hr className="border-border-light my-3" />
121
120
<div>
122
-
<PubSelector publications={identity.publications} />
121
+
<PubSelector
122
+
publications={identity.publications}
123
+
selectedPub={selectedPub}
124
+
setSelectedPub={setSelectedPub}
125
+
/>
123
126
</div>
124
127
<hr className="border-border-light mt-3 mb-2" />
125
128
126
129
<div className="flex gap-2 items-center place-self-end">
127
130
<ButtonTertiary>Save as Draft</ButtonTertiary>
128
-
<ButtonPrimary>Next</ButtonPrimary>
131
+
<ButtonPrimary disabled={selectedPub === undefined}>
132
+
Next{selectedPub === "create" && ": Create Pub!"}
133
+
</ButtonPrimary>
129
134
</div>
130
135
</div>
131
136
)}
···
154
159
};
155
160
156
161
const PubSelector = (props: {
162
+
selectedPub: string | undefined;
163
+
setSelectedPub: (s: string) => void;
157
164
publications: {
158
165
identity_did: string;
159
166
indexed_at: string;
···
163
170
}[];
164
171
}) => {
165
172
// HEY STILL TO DO
166
-
// copy over the menuItem styles and apply them if the option has been selected
167
173
// test out logged out, logged in but no pubs, and pubbed up flows
168
174
169
-
let [selectedPub, setSelectedPub] = useState<string | undefined>(undefined);
170
175
return (
171
176
<div className="flex flex-col gap-1">
172
177
<div className="text-sm text-tertiary">Publish to…</div>
173
178
{props.publications.length === 0 || props.publications === undefined ? (
174
-
<div className="flex flex-col gap-3">
179
+
<div className="flex flex-col gap-1">
175
180
<div className="flex gap-2 menuItem">
176
181
<LooseLeafSmall className="shrink-0" />
177
182
<div className="flex flex-col leading-snug">
···
197
202
</div>
198
203
</div>
199
204
) : (
200
-
<div className="flex flex-col gap-3">
205
+
<div className="flex flex-col gap-1">
201
206
<PubOption
202
-
selected={selectedPub === "looseleaf"}
203
-
onSelect={() => setSelectedPub("looseleaf")}
207
+
selected={props.selectedPub === "looseleaf"}
208
+
onSelect={() => props.setSelectedPub("looseleaf")}
204
209
>
205
210
<LooseLeafSmall />
206
211
Publish as Looseleaf
···
210
215
let pubRecord = p.record as PubLeafletPublication.Record;
211
216
return (
212
217
<PubOption
213
-
selected={selectedPub === p.uri}
214
-
onSelect={() => setSelectedPub(p.uri)}
218
+
selected={props.selectedPub === p.uri}
219
+
onSelect={() => props.setSelectedPub(p.uri)}
215
220
>
216
221
<>
217
222
<PubIcon record={pubRecord} uri={p.uri} />
···
221
226
);
222
227
})}
223
228
<PubOption
224
-
selected={selectedPub === "create"}
225
-
onSelect={() => setSelectedPub("create")}
229
+
selected={props.selectedPub === "create"}
230
+
onSelect={() => props.setSelectedPub("create")}
226
231
>
227
232
<>
228
233
<AddSmall /> Create New Publication
···
241
246
}) => {
242
247
return (
243
248
<button
244
-
className={`flex gap-2 menuItem font-bold text-secondary ${props.selected && "bg-test"}`}
249
+
className={`flex gap-2 menuItem font-bold text-secondary ${props.selected && "bg-[var(--accent-light)]! outline! outline-offset-1! outline-accent-contrast!"}`}
245
250
onClick={() => {
246
251
props.onSelect();
247
252
}}
+1
app/globals.css
+1
app/globals.css
+8
-2
components/Input.tsx
+8
-2
components/Input.tsx
···
100
100
JSX.IntrinsicElements["textarea"],
101
101
) => {
102
102
let { label, textarea, ...inputProps } = props;
103
-
let style = `appearance-none w-full font-normal not-italic bg-transparent text-base text-primary focus:outline-0 ${props.className} outline-hidden resize-none disabled:text-tertiary disabled:cursor-not-allowed`;
103
+
let style = `
104
+
appearance-none resize-none w-full
105
+
bg-transparent
106
+
outline-hidden focus:outline-0
107
+
font-normal not-italic text-base text-primary disabled:text-tertiary
108
+
disabled:cursor-not-allowed
109
+
${props.className}`;
104
110
return (
105
111
<label
106
-
className={`input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed!"}`}
112
+
className={`input-with-border flex flex-col gap-px text-sm text-tertiary font-bold italic leading-tight py-1! px-[6px]! ${props.disabled && "bg-border-light! cursor-not-allowed! hover:border-border!"}`}
107
113
>
108
114
{props.label}
109
115
{textarea ? (