mirror of
https://github.com/nix-community/noogle.git
synced 2024-11-23 00:33:12 +03:00
ux: improve lists and mobile
This commit is contained in:
hsjobeki
parent
d220297933
commit
c46c532209
@ -32,6 +32,7 @@ export type BasicListProps = BasicDataViewProps & {
|
||||
interface SelectOptionProps {
|
||||
label: string;
|
||||
handleChange: (value: string) => void;
|
||||
selected?: string;
|
||||
options: {
|
||||
value: string;
|
||||
label: string;
|
||||
@ -53,17 +54,32 @@ const SelectOption = (props: SelectOptionProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<FormControl>
|
||||
<FormLabel>
|
||||
<Box>
|
||||
<FormControl
|
||||
sx={{
|
||||
// pl: 1.5,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
<FormLabel sx={{ width: "11rem", wordWrap: "unset" }}>
|
||||
<Typography>
|
||||
<IconButton aria-label="clear-button" onClick={handleClear}>
|
||||
<ClearIcon />
|
||||
</IconButton>
|
||||
{label}
|
||||
</Box>
|
||||
</Typography>
|
||||
</FormLabel>
|
||||
|
||||
<RadioGroup sx={{ pl: 1.5 }} value={value} onChange={_handleChange}>
|
||||
<RadioGroup
|
||||
sx={{
|
||||
// pl: 1.5,
|
||||
width: "100%",
|
||||
"&.MuiFormGroup-root": {
|
||||
flexDirection: "row",
|
||||
},
|
||||
}}
|
||||
value={value}
|
||||
onChange={_handleChange}
|
||||
>
|
||||
{options.map(({ value, label }) => (
|
||||
<FormControlLabel
|
||||
key={value}
|
||||
@ -78,7 +94,14 @@ const SelectOption = (props: SelectOptionProps) => {
|
||||
};
|
||||
|
||||
export function BasicList(props: BasicListProps) {
|
||||
const { items, pageCount = 1, handleSearch, handleFilter, preview } = props;
|
||||
const {
|
||||
items,
|
||||
pageCount = 1,
|
||||
handleSearch,
|
||||
handleFilter,
|
||||
preview,
|
||||
selected = "",
|
||||
} = props;
|
||||
// const [from, setFrom] = useState<NixType>("any");
|
||||
// const [to, setTo] = useState<NixType>("any");
|
||||
|
||||
@ -112,9 +135,9 @@ export function BasicList(props: BasicListProps) {
|
||||
clearSearch={() => _handleSearch("")}
|
||||
/>
|
||||
<Box>
|
||||
{/* <Stack direction="row"> */}
|
||||
<Grid container>
|
||||
<Grid item xs={12} lg={3}>
|
||||
<Stack direction="row">
|
||||
<Grid item xs={12} md={5}>
|
||||
<SelectOption
|
||||
label="from type"
|
||||
handleChange={(value) => {
|
||||
@ -122,15 +145,32 @@ export function BasicList(props: BasicListProps) {
|
||||
}}
|
||||
options={nixTypes.map((v) => ({ value: v, label: v }))}
|
||||
/>
|
||||
<Typography
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
md={2}
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
display: {
|
||||
md: "flex",
|
||||
xs: "none",
|
||||
},
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
// sx={{
|
||||
// width: "100%",
|
||||
// display: "flex",
|
||||
// justifyContent: "center",
|
||||
// alignItems: "center",
|
||||
// // flexDirection: "column",
|
||||
// }}
|
||||
>
|
||||
<ChevronRightIcon />
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={5}>
|
||||
<SelectOption
|
||||
label="to type"
|
||||
handleChange={(value) => {
|
||||
@ -138,18 +178,26 @@ export function BasicList(props: BasicListProps) {
|
||||
}}
|
||||
options={nixTypes.map((v) => ({ value: v, label: v }))}
|
||||
/>
|
||||
</Stack>
|
||||
</Grid>
|
||||
<Grid item xs={12} lg={9}>
|
||||
{preview}
|
||||
</Grid>
|
||||
</Grid>
|
||||
{/* </Stack> */}
|
||||
</Box>
|
||||
<List aria-label="basic-list" sx={{ pt: 0 }}>
|
||||
{items.map(({ item, key }) => (
|
||||
<ListItem key={key} aria-label={`item-${key}`} sx={{ px: 0 }}>
|
||||
<>
|
||||
{key === selected && (
|
||||
<ListItem
|
||||
key={`${key}-preview`}
|
||||
aria-label={`item-${key}`}
|
||||
sx={{ px: 0 }}
|
||||
>
|
||||
{preview}
|
||||
</ListItem>
|
||||
)}
|
||||
<ListItem sx={{ px: 0 }} key={key} aria-label={`item-${key}`}>
|
||||
{item}
|
||||
</ListItem>
|
||||
</>
|
||||
))}
|
||||
</List>
|
||||
|
||||
|
||||
@ -8,6 +8,7 @@ import {
|
||||
} from "@mui/material";
|
||||
import { Image } from "../image";
|
||||
import nixSnowflake from "../../public/nix-snowflake.svg";
|
||||
import nixWhite from "../../public/white.svg";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
// import Link from "next/link";
|
||||
export interface LayoutProps {
|
||||
@ -21,15 +22,15 @@ export function Layout(props: LayoutProps) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
height: "100vh",
|
||||
overflow: "hidden",
|
||||
bgcolor:
|
||||
theme.palette.mode === "light"
|
||||
? "rgb(242, 248, 253)"
|
||||
: "rgb(23, 17, 22)",
|
||||
}}
|
||||
>
|
||||
<header
|
||||
// style={{ position: "sticky", top: 0, width: "100%", zIndex: 100 }}
|
||||
>
|
||||
<header>
|
||||
<Box
|
||||
sx={{
|
||||
position: "fixed",
|
||||
@ -46,7 +47,13 @@ export function Layout(props: LayoutProps) {
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
p: 2,
|
||||
position: "fixed",
|
||||
top: 0,
|
||||
width: "100%",
|
||||
p: 1,
|
||||
zIndex: 1,
|
||||
borderBottomRightRadius: 16,
|
||||
borderBottomLeftRadius: 16,
|
||||
backgroundColor:
|
||||
theme.palette.mode === "light"
|
||||
? "primary.main"
|
||||
@ -54,7 +61,7 @@ export function Layout(props: LayoutProps) {
|
||||
}}
|
||||
>
|
||||
<Typography
|
||||
variant="h1"
|
||||
variant="h2"
|
||||
sx={{
|
||||
textAlign: "center",
|
||||
color: "#fff",
|
||||
@ -64,35 +71,44 @@ export function Layout(props: LayoutProps) {
|
||||
sx={{
|
||||
display: {
|
||||
xs: "none",
|
||||
md: "block",
|
||||
md: "inline-block",
|
||||
},
|
||||
}}
|
||||
component="span"
|
||||
>
|
||||
<Image
|
||||
src={nixSnowflake}
|
||||
src={nixWhite}
|
||||
alt="nix-logo"
|
||||
height={90}
|
||||
height={50}
|
||||
style={{
|
||||
marginBottom: "-1rem",
|
||||
marginBottom: "-0.5rem",
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box sx={{ ml: 1 }} component="span">{`noog\u03BBe`}</Box>
|
||||
<IconButton sx={{ float: "right", top: "1em", right: "1em" }}>
|
||||
<Link href="https://github.com/hsjobeki/noogle">
|
||||
<IconButton sx={{ float: "right", top: "0.5em", right: "1em" }}>
|
||||
<GitHubIcon
|
||||
fontSize="large"
|
||||
sx={{
|
||||
display: {
|
||||
xs: "none",
|
||||
md: "block",
|
||||
md: "inline-block",
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</IconButton>
|
||||
</Link>
|
||||
</Typography>
|
||||
</Box>
|
||||
</header>
|
||||
<main>
|
||||
<main
|
||||
style={{
|
||||
marginTop: "6em",
|
||||
maxHeight: "calc(100vh - 8em)",
|
||||
overflowY: "scroll",
|
||||
}}
|
||||
>
|
||||
<Container sx={{ pt: 0 }} maxWidth="xl">
|
||||
{children}
|
||||
</Container>
|
||||
|
||||
@ -32,7 +32,17 @@ export const Preview = (props: PreviewProps) => {
|
||||
?.replace(".nix", "");
|
||||
const docsRef = `https://nixos.org/manual/nixpkgs/stable/#function-library-lib.${libName}.${name}`;
|
||||
return (
|
||||
<Box sx={{ p: 1, width: "100%" }}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 1,
|
||||
pt: 2,
|
||||
mt: 2,
|
||||
mb: -2,
|
||||
width: "100%",
|
||||
borderTop: "solid 1px",
|
||||
borderTopColor: "primary.main",
|
||||
}}
|
||||
>
|
||||
<Typography variant="h2">{`${prefix}.${name}`}</Typography>
|
||||
<List sx={{ width: "100%" }}>
|
||||
<ListItem>
|
||||
|
||||
@ -5,10 +5,6 @@ import FunctionItem from "../components/functionItem/functionItem";
|
||||
import { NixType, nixTypes, MetaData, DocItem } from "../types/nix";
|
||||
import { Preview } from "../components/preview/preview";
|
||||
import metadata from "../models/data.json";
|
||||
// const mockData: FuncData[] = Object.entries(nixFuns).map(([key, value]) => ({
|
||||
// name: key,
|
||||
// info: value,
|
||||
// }));
|
||||
|
||||
const data: MetaData = metadata as MetaData;
|
||||
|
||||
@ -57,9 +53,6 @@ const filter =
|
||||
// const fn_from =
|
||||
const fn_to = args.at(-1);
|
||||
const parsedOutType = preProcess(fn_to);
|
||||
if (name.includes("escapeShellArgs")) {
|
||||
console.log({ args, inp_args: inpArgs, fn_to });
|
||||
}
|
||||
return (
|
||||
from.some((f) => parsedInpTypes.join(" ").includes(f)) &&
|
||||
to.some((t) => parsedOutType?.includes(t))
|
||||
@ -138,6 +131,7 @@ export default function FunctionsPage() {
|
||||
return (
|
||||
<Box sx={{ ml: 2 }}>
|
||||
<BasicList
|
||||
selected={selected}
|
||||
items={preRenderedItems}
|
||||
handleSearch={handleSearch}
|
||||
handleFilter={handleFilter}
|
||||
|
||||
188
public/white.svg
Normal file
188
public/white.svg
Normal file
@ -0,0 +1,188 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
inkscape:export-ydpi="600"
|
||||
inkscape:export-xdpi="600"
|
||||
inkscape:export-filename="/Users/samuel/Projects/nixos/nixos-artwork/logo/white.png"
|
||||
sodipodi:docname="white.svg"
|
||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||
version="1.1"
|
||||
id="svg2"
|
||||
viewBox="0 0 501.56252 435.00001"
|
||||
height="464"
|
||||
width="535">
|
||||
<defs
|
||||
id="defs4">
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
id="main">
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:0"
|
||||
offset="0"
|
||||
id="stop915" />
|
||||
<stop
|
||||
id="stop917"
|
||||
offset="0.23168644"
|
||||
style="stop-color:#ffffff;stop-opacity:1" />
|
||||
<stop
|
||||
style="stop-color:#ffffff;stop-opacity:1"
|
||||
offset="1"
|
||||
id="stop919" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
y2="880.37714"
|
||||
x2="-414.38654"
|
||||
y1="782.33563"
|
||||
x1="-584.19934"
|
||||
gradientTransform="translate(864.69589,-1491.3405)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="linearGradient1299"
|
||||
xlink:href="#main"
|
||||
inkscape:collect="always" />
|
||||
<linearGradient
|
||||
y2="460.51822"
|
||||
x2="389.57562"
|
||||
y1="351.41116"
|
||||
x1="200.59668"
|
||||
gradientTransform="translate(210.82018,-765.27605)"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
id="linearGradient1713"
|
||||
xlink:href="#main"
|
||||
inkscape:collect="always" />
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
inkscape:showpageshadow="false"
|
||||
borderlayer="true"
|
||||
inkscape:pagecheckerboard="false"
|
||||
units="px"
|
||||
inkscape:document-rotation="0"
|
||||
fit-margin-bottom="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-top="0"
|
||||
inkscape:snap-global="true"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:window-y="605"
|
||||
inkscape:window-x="1680"
|
||||
inkscape:window-height="1407"
|
||||
inkscape:window-width="2556"
|
||||
showgrid="false"
|
||||
inkscape:current-layer="layer1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:cy="474.733"
|
||||
inkscape:cx="19.850892"
|
||||
inkscape:zoom="0.45238095"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:pageopacity="1"
|
||||
borderopacity="1.0"
|
||||
bordercolor="#666666"
|
||||
pagecolor="#000000"
|
||||
id="base" />
|
||||
<metadata
|
||||
id="metadata7">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
style="display:none"
|
||||
transform="matrix(0.09048806,0,0,0.09048806,-14.15991,84.454917)"
|
||||
inkscape:label="(pdf) background"
|
||||
id="layer1"
|
||||
inkscape:groupmode="layer">
|
||||
<rect
|
||||
y="-2102.4253"
|
||||
x="-1045.6049"
|
||||
height="7145.4614"
|
||||
width="7947.0356"
|
||||
id="rect995"
|
||||
style="opacity:1;fill:#040404;fill-opacity:1;stroke-width:10.3605" />
|
||||
</g>
|
||||
<g
|
||||
sodipodi:insensitive="true"
|
||||
transform="translate(-156.48372,537.56136)"
|
||||
style="display:inline;opacity:1"
|
||||
inkscape:label="gradient-logo"
|
||||
id="layer3"
|
||||
inkscape:groupmode="layer">
|
||||
<g
|
||||
style="stroke-width:11.0512"
|
||||
transform="matrix(0.09048806,0,0,0.09048806,142.32381,-453.10644)"
|
||||
id="g955">
|
||||
<g
|
||||
transform="matrix(11.047619,0,0,11.047619,-1572.2888,9377.7107)"
|
||||
id="g869">
|
||||
<g
|
||||
transform="rotate(-60,226.35754,-449.37199)"
|
||||
id="g932"
|
||||
style="stroke-width:11.0512">
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path3336-6"
|
||||
d="m 449.71876,-420.51322 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8257 z"
|
||||
style="opacity:1;fill:url(#linearGradient1713);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:33.1535;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||
</g>
|
||||
<path
|
||||
sodipodi:nodetypes="cccccccccc"
|
||||
inkscape:connector-curvature="0"
|
||||
id="path4260-0"
|
||||
d="m 309.54892,-710.38827 122.19683,211.67512 -56.15706,0.5268 -32.6236,-56.8692 -32.85645,56.5653 -27.90237,-0.011 -14.29086,-24.6896 46.81047,-80.4901 -33.22946,-57.8256 z"
|
||||
style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:url(#linearGradient1299);fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:33.1535;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path3336-6"
|
||||
inkscape:transform-center-x="124.43045"
|
||||
inkscape:transform-center-y="151.59082"
|
||||
id="use3439-6"
|
||||
transform="rotate(60,728.23563,-692.24036)"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="stroke-width:11.0512" />
|
||||
<use
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path3336-6"
|
||||
inkscape:transform-center-x="59.669705"
|
||||
inkscape:transform-center-y="-139.94592"
|
||||
id="use3449-5"
|
||||
transform="rotate(180,477.5036,-570.81898)"
|
||||
width="100%"
|
||||
height="100%"
|
||||
style="stroke-width:11.0512" />
|
||||
<use
|
||||
style="display:inline;stroke-width:11.0512"
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path4260-0"
|
||||
id="use4354-5"
|
||||
transform="rotate(120,407.33916,-716.08356)"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
<use
|
||||
style="display:inline;stroke-width:11.0512"
|
||||
x="0"
|
||||
y="0"
|
||||
xlink:href="#path4260-0"
|
||||
id="use4362-2"
|
||||
transform="rotate(-120,407.28823,-715.86995)"
|
||||
width="100%"
|
||||
height="100%" />
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.5 KiB |
12
types/nix.ts
12
types/nix.ts
@ -1,15 +1,3 @@
|
||||
// {
|
||||
// "category": "./lib/customisation.nix",
|
||||
// "name": "overrideDerivation",
|
||||
// "fn_type": null,
|
||||
// "description": [
|
||||
// "`overrideDerivation drv f' takes a derivation (i.e., the result\nof a call to the builtin function `derivation') and returns a new\nderivation in which the attributes of the original are overridden\naccording to the function `f'. The function `f' is called with\nthe original derivation attributes.",
|
||||
// "`overrideDerivation' allows certain \"ad-hoc\" customisation\nscenarios (e.g. in ~/.config/nixpkgs/config.nix). For instance,\nif you want to \"patch\" the derivation returned by a package\nfunction in Nixpkgs to build another version than what the\nfunction itself provides, you can do something like this:",
|
||||
// "mySed = overrideDerivation pkgs.gnused (oldAttrs: {\nname = \"sed-4.2.2-pre\";\nsrc = fetchurl {\nurl = ftp://alpha.gnu.org/gnu/sed/sed-4.2.2-pre.tar.bz2;\nsha256 = \"11nq06d131y4wmf3drm0yk502d2xc6n5qy82cg88rb9nqd2lj41k\";\n};\npatches = [];\n});",
|
||||
// "For another application, see build-support/vm, where this\nfunction is used to build arbitrary derivations inside a QEMU\nvirtual machine."
|
||||
// ],
|
||||
// "example": null
|
||||
// },
|
||||
export type NixType = "attrset" | "list" | "string" | "int" | "bool" | "any";
|
||||
export const nixTypes: NixType[] = [
|
||||
"any",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user