diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json index c1459e9c..4b6b4e62 100644 --- a/client/public/locales/en/common.json +++ b/client/public/locales/en/common.json @@ -359,6 +359,9 @@ "help": { "list": "Help | Spoolman" }, + "locations": { + "list": "Locations | Spoolman" + }, "filament": { "list": "Filaments | Spoolman", "show": "#{{id}} Show Filament | Spoolman", @@ -382,7 +385,9 @@ } }, "locations": { + "locations": "Locations", "new_location": "New Location", - "no_location": "No Location" + "no_location": "No Location", + "no_locations_help": "This page lets you organize your spools in locations, add some spools to get started!" } } diff --git a/client/src/pages/locations/components/location.tsx b/client/src/pages/locations/components/location.tsx index 2a569961..a8b04ba5 100644 --- a/client/src/pages/locations/components/location.tsx +++ b/client/src/pages/locations/components/location.tsx @@ -1,4 +1,4 @@ -import { Button, Input } from "antd"; +import { Button, Input, theme } from "antd"; import type { Identifier, XYCoord } from "dnd-core"; import { useRef, useState } from "react"; import { useDrag, useDrop } from "react-dnd"; @@ -10,6 +10,8 @@ import { DragItem, ItemTypes, SpoolDragItem } from "../dnd"; import { EMPTYLOC } from "../functions"; import { SpoolList } from "./spoolList"; +const { useToken } = theme; + export function Location({ index, title, @@ -31,6 +33,7 @@ export function Location({ locationSpoolOrder: number[]; setLocationSpoolOrder: (spoolOrder: number[]) => void; }) { + const { token } = useToken(); const t = useTranslate(); const [editTitle, setEditTitle] = useState(false); const [newTitle, setNewTitle] = useState(title); @@ -133,6 +136,10 @@ export function Location({ const canEditTitle = title != EMPTYLOC; + const titleStyle = { + color: canEditTitle ? undefined : token.colorTextTertiary, + }; + return (
{displayTitle} diff --git a/client/src/pages/locations/components/locationContainer.tsx b/client/src/pages/locations/components/locationContainer.tsx index 20d8cfea..deba611d 100644 --- a/client/src/pages/locations/components/locationContainer.tsx +++ b/client/src/pages/locations/components/locationContainer.tsx @@ -176,19 +176,24 @@ export function LocationContainer() { }; return ( -
- {containers} -
-
); diff --git a/client/src/pages/locations/index.tsx b/client/src/pages/locations/index.tsx index f9f127e8..4c40d52a 100644 --- a/client/src/pages/locations/index.tsx +++ b/client/src/pages/locations/index.tsx @@ -1,4 +1,4 @@ -import { IResourceComponentsProps } from "@refinedev/core"; +import { IResourceComponentsProps, useTranslate } from "@refinedev/core"; import dayjs from "dayjs"; import utc from "dayjs/plugin/utc"; import React from "react"; @@ -11,10 +11,14 @@ import "./locations.css"; dayjs.extend(utc); export const Locations: React.FC = () => { + const t = useTranslate(); return ( - - - +
+

{t("locations.locations")}

+ + + +
); };