Skip to content

Commit

Permalink
Popper ux tweaks, some copy tweaks
Browse files Browse the repository at this point in the history
  • Loading branch information
@justinsilvestre
justinsilvestre committed Nov 25, 2024
1 parent 10fbdee commit b171c97
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 35 deletions.
27 changes: 12 additions & 15 deletions app/features/dictionary/FigureTags.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@ export function FigureTags({
<ListTags
lists={lists}
isStandaloneCharacter={isStandaloneCharacter}
className={` rounded-sm border border-solid px-1 text-sm font-bold uppercase [padding-top:0.1rem]`}
className={` rounded-sm border-2 border-solid px-1 text-sm font-bold uppercase [padding-top:0.1rem]`}
/>
{isPriorityComponent && !isStandaloneCharacter ? (
<FigureTag
className={`rounded-sm border border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:bg-slate-600`}
className={`rounded-sm border-2 border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:border-slate-300 group-[ppo]:bg-slate-600`}
popoverContent={() => (
<>
<p className="mb-3 mt-0">
Expand All @@ -70,7 +70,7 @@ export function FigureTags({
) : null}
{isStandaloneCharacter && !isPriorityComponent ? (
<FigureTag
className={` rounded-sm border border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:bg-slate-600`}
className={` rounded-sm border-2 border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:border-slate-300 group-[ppo]:bg-slate-600`}
popoverContent={() => (
<>
<p className="mb-3 mt-0">
Expand Down Expand Up @@ -103,7 +103,7 @@ export function FigureTags({
) : null}
{isStandaloneCharacter && isPriorityComponent ? (
<FigureTag
className={` rounded-sm border border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:bg-slate-600`}
className={` rounded-sm border-2 border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:border-slate-300 group-[ppo]:bg-slate-600`}
popoverContent={() => (
<>
<p className="mb-3 mt-0">
Expand All @@ -129,7 +129,7 @@ export function FigureTags({
) : null}
{variantGroupId && variantGroupId !== id ? (
<FigureTag
className={` rounded-sm border border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white outline outline-1 -outline-offset-2 [padding-top:0.1rem] group-[ppo]:bg-slate-600`}
className={` rounded-sm border-2 border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white outline outline-1 -outline-offset-2 [padding-top:0.1rem] group-[ppo]:border-slate-300 group-[ppo]:bg-slate-600`}
popoverContent={() => (
<VariantPopoverContent
isStandaloneCharacter={isStandaloneCharacter}
Expand All @@ -142,7 +142,7 @@ export function FigureTags({
) : null}
{isAtomic ? (
<FigureTag
className={` rounded-sm border border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:bg-slate-600`}
className={` rounded-sm border-2 border-solid border-black bg-slate-800 px-1 text-sm font-bold uppercase text-white [padding-top:0.1rem] group-[ppo]:border-slate-300 group-[ppo]:bg-slate-600`}
popoverContent={() => (
<>
The {TOTAL_ATOMIC_COMPONENTS_COUNT} atomic components are the
Expand All @@ -165,7 +165,7 @@ export function FigureTags({
) : null}
{isPrioritySoundMark ? (
<FigureTag
className={`rounded-sm border border-solid border-yellow-400 bg-yellow-200 bg-opacity-50 px-1 text-sm font-bold uppercase [padding-top:0.1rem] group-[ppo]:border-yellow-300 group-[ppo]:bg-yellow-50`}
className={`[bg-top:0 group-[ppo]:border-der-300.1rem] group-[ppo]:bg-yellow-30 rounded-sm border-2 border-solid border-yellow-400 bg-yellow-200 bg-opacity-50 px-1 text-sm font-bold uppercase group-[ppo]:border-yellow-600 group-[ppo]:bg-yellow-300`}
popoverContent={() => (
<>
<p className="mb-3 mt-0">
Expand Down Expand Up @@ -228,10 +228,7 @@ function FigureTag({
return (
<>
<li
className={clsx(
" cursor-default ",
isOpen && !isClosing ? "groupppo" : null,
)}
className={clsx(isOpen && !isClosing ? "groupppo" : null)}
{...openEventHandlers}
ref={setReferenceElement}
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
Expand Down Expand Up @@ -530,7 +527,7 @@ function KanjiListTag({
case "6":
return (
<FigureTag
className={`${className} border-kyoiku-900 bg-kyoiku-700 text-white group-[ppo]:bg-kyoiku-600`}
className={`${className} border-kyoiku-800 bg-kyoiku-700 text-white group-[ppo]:border-kyoiku-300 group-[ppo]:bg-kyoiku-600`}
popoverContent={popoverContent}
>
primary grade {code}
Expand All @@ -539,7 +536,7 @@ function KanjiListTag({
case "j": {
return (
<FigureTag
className={`${className} border-joyo-900 bg-joyo-700 text-white group-[ppo]:bg-joyo-600`}
className={`${className} border-joyo-800 bg-joyo-700 text-white group-[ppo]:border-joyo-300 group-[ppo]:bg-joyo-600`}
popoverContent={popoverContent}
>
Jōyō
Expand All @@ -549,7 +546,7 @@ function KanjiListTag({
case "h":
return (
<FigureTag
className={`${className} border-hyogai-900 bg-hyogai-700 text-white group-[ppo]:bg-hyogai-600`}
className={`${className} border-hyogai-800 bg-hyogai-700 text-white group-[ppo]:border-hyogai-300 group-[ppo]:bg-hyogai-600`}
popoverContent={popoverContent}
>
extra-Jōyō
Expand All @@ -558,7 +555,7 @@ function KanjiListTag({
case "m":
return (
<FigureTag
className={`${className} border-jinmeiyo-900 bg-jinmeiyo-700 text-white group-[ppo]:bg-jinmeiyo-600`}
className={`${className} border-jinmeiyo-800 bg-jinmeiyo-700 text-white group-[ppo]:border-jinmeiyo-300 group-[ppo]:bg-jinmeiyo-600`}
popoverContent={popoverContent}
>
Jinmeiyō
Expand Down
34 changes: 18 additions & 16 deletions app/features/dictionary/RadicalSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,33 +92,35 @@ export function RadicalSection({
<p className="mb-4">
Some English speakers refer to all kanji components as "radicals",
but traditionally, the term "radicals" is a translation of 部首{" "}
<i>bushu</i>, literally meaning "section headers". These 部首{" "}
<i>bushu</i> are 214 kanji components that act as a system for
looking up kanji in traditional paper dictionaries. This system
<i>bushu</i>, literally meaning "section headers". These{" "}
<i>bushu</i> are 214 kanji components used for looking up kanji in
traditional paper dictionaries. This system of 214 <i>bushu</i>{" "}
was devised all the way back in 1716, when the compilers of the
authoritative 康熙字典 <i>Kangxi Dictionary</i> (Japanese:{" "}
<i>Kōki Jiten</i>) looked at each kanji and chose{" "}
<strong>one single component</strong> as its 部首 <i>bushu</i>.
The idea is that users of the dictionary can find an unknown
<strong>one single component</strong> as its <i>bushu</i>. The
idea is that users of the dictionary could find an unknown
character by first identifying its <em>section header</em>{" "}
component, and looking in the corresponding section of the
dictionary, where characters containing that component are sorted
according to the number of strokes needed to write them. This is
not always straightforward in practice, but this method of
organizing dictionaries is still used today.
component. By looking in the corresponding section of the
dictionary, they could find all the characters containing that{" "}
<i>bushu</i> component sorted according to the number of strokes
needed to write them. This is not always straightforward in
practice, but this method of organizing dictionaries is still used
today.
</p>
<h3 className=" mb-2 text-center font-bold">
What do these numbers mean?
</h3>
<p className="mb-4">
The first number given with the 部首 <i>bushu</i> here refers to
that section's order in the <i>Kangxi Dictionary</i>, which has
become the standard ordering throughout Asia. The second number is
the <i>traditional</i> number of strokes in the character{" "}
<em>outside</em> the <i>bushu</i> component (which may differ from
the modern stroke count). You can use this information to find
this kanji in any traditional paper dictionary which organizes
characters by <i>bushu</i> and stroke count.
become the standard ordering for kanji dictionaries throughout
Asia. The second number is the <i>traditional</i> number of
strokes in the character <em>outside</em> the <i>bushu</i>{" "}
component, as counted in the Kangxi Dictionary (which may differ
from the modern stroke count). You can use this information to
find this kanji in any traditional paper dictionary which
organizes characters by <i>bushu</i> and stroke count.
</p>
{radicalIndexes.length > 1 ? (
<p className="mb-4">
Expand Down
9 changes: 5 additions & 4 deletions app/features/dictionary/useHoverPopper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,11 +56,12 @@ export function useHoverPopper(options: PopperOptions) {
onMouseMove: () => {
!popper.isOpen ? open() : undefined;
},
onMouseDown: (e: React.MouseEvent) => {
if (popper.isOpen) {
onClick: (e: React.MouseEvent) => {
if (!popper.isOpen) {
open();
} else if (!popper.state?.elements.popper?.contains(e.target as Node)) {
close();
e.preventDefault();
} else open();
}
},
onFocus: () => {
open();
Expand Down

0 comments on commit b171c97

Please sign in to comment.