Merge pull request #16 from Remicck/feature/no-background-mode

Feature/no background mode
Remicck · Jun 17, 2024 · 9a8ad99 · 9a8ad99
2 parents a2111a9 + 9cef62e
commit 9a8ad99
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 6 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "noshi-generator",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "NoshiGenerator",
-    "version": "0.1.3"
+    "version": "0.1.4"
   },
   "tauri": {
     "allowlist": {

diff --git a/src/App.tsx b/src/App.tsx
@@ -12,6 +12,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 function App() {
   const [formValue, setFormValue] = useState<FormValue>(initialFormValue);
   const [forceMincho, setForceMincho] = useState<boolean>(false);
+  const [disableBackground, setDisableBackground] = useState<boolean>(false);
   const handleChangeFormValue = (key: keyof FormValue, e: React.ChangeEvent<HTMLInputElement>) => {
     setFormValue((prev) => ({ ...prev, [key]: e.target.value }));
   };
@@ -28,7 +29,11 @@ function App() {
         <div className="grid grid-cols-4 gap-2 min-h-full">
           {/* Left:: preview */}
           <div className="col-span-3 flex justify-center items-center rounded-lg p-2">
-            <Preview formValue={formValue} forceMincho={forceMincho} />
+            <Preview
+              formValue={formValue}
+              forceMincho={forceMincho}
+              disableBackground={disableBackground}
+            />
           </div>
           {/* Right: Input */}
           <div className="h-full flex flex-col gap-4 bg-white p-2 rounded-lg">
@@ -69,7 +74,7 @@ function App() {
                 </div>
               </div>
             </div>
-            <div className="my-10 flex flex-col gap-4">
+            <div className="my-4 flex flex-col gap-4">
               <div className="flex flex-row gap-2">
                 <Checkbox
                   id="force-mincho-flg"
@@ -88,6 +93,20 @@ function App() {
                   </span>
                 </label>
               </div>
+              <div className="flex flex-row gap-2">
+                <Checkbox
+                  id="disable-background-flg"
+                  onCheckedChange={(checked: boolean) => {
+                    setDisableBackground(checked);
+                  }}
+                />
+                <label
+                  htmlFor="disable-background-flg"
+                  className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer select-none"
+                >
+                  背景を印刷に含めない
+                </label>
+              </div>
             </div>
             <Button className="w-full" onClick={handlePrintClick}>
               印刷

diff --git a/src/components/Preview.tsx b/src/components/Preview.tsx
@@ -7,9 +7,10 @@ import { ichikinFormat } from '@/lib/formatter';
 type PreviewProps = {
   formValue: FormValue;
   forceMincho: boolean;
+  disableBackground: boolean;
 };
 export function Preview(props: PreviewProps) {
-  const { formValue, forceMincho } = props;
+  const { formValue, forceMincho, disableBackground } = props;
   return (
     <div id="printableArea" className={clsx(styles.wrap, 'bg-white p-2 flex flex-row flex-nowrap')}>
       <div
@@ -43,7 +44,12 @@ export function Preview(props: PreviewProps) {
       <div className={clsx('w-[35%] flex items-center justify-start', styles.nouhinText)}>
         {formValue.item && <>{ichikinFormat(formValue.item)}也</>}
       </div>
-      <div className={clsx('w-[28%] flex items-start justify-end mt-5')}>
+      <div
+        className={clsx(
+          'w-[28%] flex items-start justify-end mt-5',
+          disableBackground && 'opacity-0'
+        )}
+      >
         <img src={noshiImage} alt="のし" className="w-1/2" />
       </div>
     </div>