Merge pull request #5 from futabooo/modify-option-layout

modify option layout
futabooo · Mar 25, 2024 · f22b97f · f22b97f
2 parents dcb4da5 + 84b2e37
commit f22b97f
Show file tree

Hide file tree

Showing 9 changed files with 1,383 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,10 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.22",
     "@types/chrome": "^0.0.256",
+    "autoprefixer": "^10.4.17",
+    "daisyui": "^4.6.1",
+    "postcss": "^8.4.33",
+    "tailwindcss": "^3.4.1",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   },

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/src/option.css b/src/option.css
@@ -1,17 +1,5 @@
 #container {
-  padding: 30px 70px 120px 70px;
-}
-
-#add {
-  margin: 10px 0 5px 3px;
-}
-
-#save {
-  margin: 20px 0 0 3px;
-}
-
-a {
-  font-size: 13px;
+  padding: 20px 50px 20px 50px;
 }
 
 rgb-string-color-picker {

diff --git a/src/option.html b/src/option.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="stylesheet" type="text/css" href="tailwind.css" />
     <link rel="stylesheet" type="text/css" href="option.css" />
   </head>
   <body>
     <div id="container">
-      <table id="conditions">
+      <table id="conditions" class="table">
         <tr>
           <th>Wordspace ID</th>
           <th>Color</th>
           <th></th>
         </tr>
       </table>
-      <div><a href="#" id="add">add new condition</a></div>
-      <button id="save">save</button>
+      <div class="w-full flex justify-center">
+        <button id="add" class="btn btn-ghost">add new condition</button>
+      </div>
+      <div class="w-full flex justify-end">
+        <button id="save" class="btn btn-primary mt-3">save</button>
+      </div>
     </div>
     <script type="module" src="/src/option.ts"></script>
   </body>

diff --git a/src/option.ts b/src/option.ts
@@ -2,39 +2,29 @@ import { RgbStringColorPicker } from "vanilla-colorful/rgb-string-color-picker.j
 import { Condition } from "./types";
 
 const addCondition = (condition: Condition | null) => {
-  let table = document.getElementById("conditions");
-  let conditionRow = document.createElement("tr");
+  const table = document.getElementById("conditions");
+  const conditionRow = document.createElement("tr");
   conditionRow.className = "condition";
 
-  let workspaceIdCell = document.createElement("td");
-  let workspaceIdInput = document.createElement("input");
-  workspaceIdInput.type = "text";
-  workspaceIdInput.placeholder = "Workspace ID";
-  workspaceIdInput.className = "workspace-id";
+  const workspaceIdCell = document.createElement("td");
+  const workspaceIdInput = createWorkspaceIdInput();
   workspaceIdCell.appendChild(workspaceIdInput);
 
-  let colorCell = document.createElement("td");
-  let colorInput = document.createElement("input");
-  colorInput.type = "text";
-  colorInput.className = "color";
+  const colorCell = document.createElement("td");
+  const colorInput = createColorInput();
   colorCell.appendChild(colorInput);
 
-  let removeCell = document.createElement("td");
-  let removeLink = document.createElement("a");
-  removeLink.href = "#";
-  removeLink.id = "remove";
-  removeLink.textContent = "remove";
-  removeCell.appendChild(removeLink);
+  const removeCell = document.createElement("td");
+  const removeButton = createRemoveButton();
+  removeCell.appendChild(removeButton);
 
   conditionRow.appendChild(workspaceIdCell);
   conditionRow.appendChild(colorCell);
   conditionRow.appendChild(removeCell);
 
-  let colorRgb = "rgb(32, 100, 227)";
   if (condition) {
     (workspaceIdInput as HTMLInputElement).value = condition.workspaceId;
-
-    colorRgb =
+    const colorRgb =
       "rgb(" +
       condition.color.r +
       ", " +
@@ -50,25 +40,82 @@ const addCondition = (condition: Condition | null) => {
 
   setChangeColorPickerVisibilityListeners(colorInput);
 
-  removeLink.addEventListener("click", (event: Event) => {
+  removeButton.addEventListener("click", (event: Event) => {
     event.preventDefault();
     conditionRow.remove();
   });
 };
 
+const createWorkspaceIdInput = (): HTMLInputElement => {
+  const workspaceIdInput = document.createElement("input");
+  workspaceIdInput.type = "text";
+  workspaceIdInput.placeholder = "Workspace ID";
+  workspaceIdInput.classList.add(
+    "workspace-id",
+    "input",
+    "input-sm",
+    "bg-neutral",
+    "text-neutral-content"
+  );
+  return workspaceIdInput;
+};
+
+const createColorInput = (): HTMLInputElement => {
+  const colorInput = document.createElement("input");
+  colorInput.type = "text";
+  colorInput.placeholder = "Color";
+  colorInput.classList.add(
+    "color",
+    "input",
+    "input-sm",
+    "bg-neutral",
+    "text-neutral-content"
+  );
+  return colorInput;
+};
+
+const createRemoveButton = (): HTMLButtonElement => {
+  const button = document.createElement("button");
+  button.id = "remove";
+
+  // DaisyUIのクラスを追加
+  button.classList.add("btn", "btn-sm", "btn-square");
+
+  button.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  `;
+
+  return button;
+};
+
+const createAlert = (): HTMLDivElement => {
+  const alert = document.createElement("div");
+  alert.role = "alert";
+  alert.className = "alert alert-success text-base mt-3 flex";
+  alert.innerHTML = `
+  <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+  </svg>
+  <span>saved!</span>
+  `;
+  return alert;
+};
+
 const addEmptyCondition = () => {
   addCondition(null);
 };
 
 const setChangeColorPickerVisibilityListeners = (
   colorInput: HTMLInputElement
 ) => {
-  let colorPicker = new RgbStringColorPicker();
+  const colorPicker = new RgbStringColorPicker();
   colorPicker.style.position = "absolute";
 
   // colorInputにフォーカスが当たったときにcolorPickerを表示
   colorInput.addEventListener("focus", () => {
-    let rect = colorInput.getBoundingClientRect();
+    const rect = colorInput.getBoundingClientRect();
     colorPicker.style.top = `${rect.bottom}px`;
     colorPicker.style.left = `${rect.left}px`;
     colorPicker.style.removeProperty("display");
@@ -104,13 +151,13 @@ const setChangeColorPickerVisibilityListeners = (
 };
 
 const saveConditions = () => {
-  let conditions: Condition[] = [];
-  let conditionElements = document.querySelectorAll(".condition");
+  const conditions: Condition[] = [];
+  const conditionElements = document.querySelectorAll(".condition");
 
   conditionElements.forEach((elem: Element) => {
-    let id = (elem.querySelector(".workspace-id") as HTMLInputElement)?.value;
-    let color = (elem.querySelector(".color") as HTMLInputElement)?.value;
-    let colorParts = color?.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const id = (elem.querySelector(".workspace-id") as HTMLInputElement)?.value;
+    const color = (elem.querySelector(".color") as HTMLInputElement)?.value;
+    const colorParts = color?.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
 
     if (id && colorParts) {
       conditions.push({
@@ -124,20 +171,22 @@ const saveConditions = () => {
     }
   });
 
-  let setting = {
+  const setting = {
     notionBarColorizeConditions: conditions,
   };
   console.log("save setting: ", setting);
 
   chrome.storage.sync.set(setting, function () {
     console.log("saved!");
-    let container = document.getElementById("container");
-    let message = document.createElement("span");
-    message.textContent = "saved!";
-    container?.appendChild(message);
+
+    // アラートを表示
+    const container = document.getElementById("container");
+    const alert = createAlert();
+    container?.appendChild(alert);
+
     setTimeout(function () {
-      message.remove();
-    }, 1000);
+      alert.remove();
+    }, 1500);
   });
 };
 

diff --git a/src/tailwind.css b/src/tailwind.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ["./src/**/*.{html,ts}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [require("daisyui")],
+  darkMode: "media",
+  daisyui: {
+    themes: ["light", "dark"],
+  },
+};
diff --git a/vite.config.ts b/vite.config.ts
@@ -15,7 +15,8 @@ const manifest = defineManifest({
   },
   action: {
     default_icon: "icons/icon-128.png",
-    default_title: "example",
+    default_title: "Notion Bar Colorize",
+    default_popup: "src/option.html",
   },
   background: {
     service_worker: "src/background.ts",