fix: sorting style and move org icons

ubiquity · Dec 4, 2023 · f087eb4 · f087eb4
1 parent 10787f9
commit f087eb4
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 33 deletions.
diff --git a/src/home/fetch-github-issues.ts b/src/home/fetch-github-issues.ts
@@ -5,7 +5,8 @@ import { renderGitHubIssues } from "./render-github-issues";
 
 export type GitHubIssueWithNewFlag = GitHubIssue & { isNew?: boolean };
 
-export type Sorting = "priority" | "time" | "price";
+export const SORTING_OPTIONS = ["priority", "time", "price"] as const;
+export type Sorting = (typeof SORTING_OPTIONS)[number];
 
 export async function fetchGitHubIssues(sorting?: Sorting) {
   const container = document.getElementById("issues-container") as HTMLDivElement;

diff --git a/src/home/home.ts b/src/home/home.ts
@@ -1,5 +1,5 @@
 import { authentication } from "./authentication";
-import { Sorting, fetchGitHubIssues } from "./fetch-github-issues";
+import { SORTING_OPTIONS, Sorting, fetchGitHubIssues } from "./fetch-github-issues";
 
 fetchGitHubIssues().catch((error) => console.error(error));
 authentication();
@@ -8,22 +8,54 @@ filterButtons();
 function filterButtons() {
   const filters = document.getElementById("filters");
   if (!filters) throw new Error("filters not found");
-  const buttons = filters.querySelectorAll("input");
 
-  buttons.forEach((button) => {
-    let isChecked = button.checked;
-    button.addEventListener("mousedown", () => {
-      isChecked = button.checked;
-    });
-    button.addEventListener("click", () => {
-      if (isChecked) {
-        button.checked = false;
+  const labels = document.createElement("div");
+  labels.className = "labels";
+
+  let lastChecked: HTMLInputElement | null = null;
+
+  SORTING_OPTIONS.forEach((option) => {
+    const dfg = document.createDocumentFragment();
+    const div = document.createElement("div");
+    const label = document.createElement("label") as HTMLLabelElement;
+    const input = document.createElement("input");
+    input.type = "radio";
+    input.value = option;
+    input.id = option;
+    input.name = "sort";
+
+    const defaultIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z"/></svg>`;
+    const activeIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M480-200 240-440l56-56 184 183 184-183 56 56-240 240Zm0-240L240-680l56-56 184 183 184-183 56 56-240 240Z"/></svg>`;
+
+    label.htmlFor = option;
+    div.className = "default icon";
+    div.innerHTML = defaultIcon;
+    const divActive = div.cloneNode(true) as HTMLDivElement;
+    divActive.className = "active icon";
+    divActive.innerHTML = activeIcon;
+    label.appendChild(div);
+    label.appendChild(divActive);
+    label.appendChild(document.createTextNode(option.charAt(0).toUpperCase() + option.slice(1)));
+    dfg.appendChild(input);
+    dfg.appendChild(label);
+    labels.appendChild(dfg);
+
+    input.addEventListener("click", () => {
+      if (input === lastChecked) {
+        input.checked = false;
+        lastChecked = null;
         fetchGitHubIssues().catch((error) => console.error(error));
       } else {
-        fetchGitHubIssues(button.value as Sorting).catch((error) => console.error(error));
+        lastChecked = input;
+        fetchGitHubIssues(input.value as Sorting).catch((error) => console.error(error));
       }
-      // Update the flag to the current state for the next click
-      isChecked = button.checked;
     });
   });
+  filters.appendChild(labels);
+
+  // const sortLabels = filters.querySelectorAll("input");
+
+  // sortLabels.forEach((label) => {
+
+  // });
 }
diff --git a/src/home/render-github-issues.ts b/src/home/render-github-issues.ts
@@ -64,7 +64,7 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH
         issue.title
       }</h3></div><div class="partner"><p class="organization-name">${organizationName}</p><p class="repository-name">${repositoryName}</p></div></div><div class="labels">${labels.join(
         ""
-      )}</div>`;
+      )}<img /></div>`;
 
       issueElement.addEventListener("click", () => {
         console.log(issue);
@@ -76,8 +76,9 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH
       // Set the issueWrapper background-image to the organization's avatar
       if (organizationName) {
         const cachedAvatar = avatarCache[organizationName];
+        const image = issueElement.querySelector("img") as HTMLImageElement;
         if (cachedAvatar) {
-          issueWrapper.style.backgroundImage = `url("${cachedAvatar}")`;
+          image.src = cachedAvatar;
         } else if (!fetchInProgress.has(organizationName)) {
           // Mark this organization's avatar as being fetched
           fetchInProgress.add(organizationName);
@@ -88,7 +89,7 @@ export async function renderGitHubIssues(container: HTMLDivElement, issues: GitH
             if (data && data.avatar_url) {
               avatarCache[organizationName] = data.avatar_url;
               localStorage.setItem("avatarCache", JSON.stringify(avatarCache));
-              issueWrapper.style.backgroundImage = `url("${data.avatar_url}")`;
+              image.src = data.avatar_url;
             }
           } catch (error) {
             console.error("Error fetching avatar:", error);

diff --git a/static/index.html b/static/index.html
@@ -17,13 +17,7 @@
             d="M132 41.1c0-2.3-1.3-4.5-3.3-5.7L69.4 1.2c-1-.6-2.1-.9-3.3-.9-1.1 0-2.3.3-3.3.9L3.6 35.4c-2 1.2-3.3 3.3-3.3 5.7v68.5c0 2.3 1.3 4.5 3.3 5.7l59.3 34.2c2 1.2 4.5 1.2 6.5 0l59.3-34.2c2-1.2 3.3-3.3 3.3-5.7V41.1zm-11.9 62.5c0 2.7-1.4 5.2-3.7 6.5l-46.6 27.5c-1.1.7-2.4 1-3.7 1s-2.5-.3-3.7-1l-46.6-27.5c-2.3-1.3-3.7-3.8-3.7-6.5V54.1c0-1.2.6-2.4 1.7-3 1.1-.6 2.3-.6 3.4 0l8 4.7c1.9 1.1 3 3.3 4.4 5.8.3.5.5 1 .8 1.4 3.5 6.3 5.2 13 6.8 19.5 3 11.9 6 24.2 21.3 28.2 5 1.3 10.4 1.3 15.4 0 15.2-4 18.3-16.3 21.3-28.2C96.8 76 98.5 69.3 102 63c.3-.5.5-1 .8-1.4 1.3-2.5 2.5-4.6 4.4-5.8l8-4.7c1-.6 2.3-.6 3.4 0s1.7 1.7 1.7 3v49.5zM62.6 13.7c2.2-1.3 4.9-1.3 7.1 0L110 37.6c1 .6 1.6 1 1.6 2.2 0 1.2-.6 1.9-1.6 2.5l-7.7 4.6c-3.4 2-5.1 5.2-6.6 8.1l-.1.2c-.2.4-.4.7-.6 1.1-3.8 6.8-6.6 14-8.2 20.4C83.6 89.1 82.4 97.3 72 100c-1.9.5-3.9.7-5.8.7-2 0-3.9-.3-5.8-.7C50 97.3 48.7 89.1 45.6 76.6 44 70.2 41.2 63 37.4 56.2c-.2-.3-.4-.7-.6-1l-.1-.3c-1.5-2.8-3.3-6.1-6.6-8.1l-7.7-4.6c-1-.6-1.6-1.3-1.6-2.5s.6-1.6 1.6-2.2l40.2-23.8z"
           ></path></svg
         ><span><span class="full">Ubiquity DAO | </span><span class="full">DevPool Directory</span></span></div
-      ><div id="filters">
-        <div class="labels">
-          <input type="radio" id="price" name="filter" value="price" /><label for="price">Price</label>
-          <input type="radio" id="time" name="filter" value="time" /><label for="time">Time</label>
-          <input type="radio" id="priority" name="filter" value="priority" /><label for="priority">Priority</label>
-        </div>
-      </div></div
+      ><div id="filters"></div></div
     >
     <script type="module" src="dist/src/home/home.js"></script>
   </body>

diff --git a/static/style/inverted-style.css b/static/style/inverted-style.css
@@ -119,6 +119,7 @@
     text-align: left;
     display: flex;
     padding: 12px 0;
+    align-items: center;
   }
   p.organization-name {
     opacity: 0.5;
@@ -141,7 +142,7 @@
     background-color: #7f7f7f20;
     width: 64px;
     letter-spacing: 0.5px;
-    flex-grow: 3;
+    flex-grow: 4;
     display: flex;
     justify-content: center;
     display: flex;
@@ -160,6 +161,10 @@
   }
   #filters label {
     cursor: pointer;
+    /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2216%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2216%22%3E%3Cpath%20fill%3D%22%23ffffff80%22%20d%3D%22M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z%22/%3E%3C/svg%3E"); */
+    /* background-repeat: no-repeat; */
+    /* background-position: 4px 4px; */
+    /* text-align: right; */
   }
   #filters label:hover {
     background-color: #7f7f7f40;
@@ -170,6 +175,23 @@
   input[type="radio"]:checked + label {
     background-color: #7f7f7f80 !important;
   }
+
+  input[type="radio"] + label > .icon > svg {
+    fill: #00000080;
+  }
+  input[type="radio"] + label > .active.icon > svg {
+    display: none;
+  }
+  input[type="radio"] + label > .default.icon > svg {
+    display: unset;
+  }
+  input[type="radio"]:checked + label > .default.icon > svg {
+    display: none;
+  }
+  input[type="radio"]:checked + label > .active.icon > svg {
+    display: unset;
+  }
+
   .labels {
     display: flex;
     margin-left: auto;
@@ -186,7 +208,7 @@
     opacity: 0.66;
     transition: 125ms opacity ease-in-out;
     align-items: center;
-    margin: 0 0 0 50px;
+    /* margin: 0 0 0 12px; */
   }
   #issues-container > .issue-element-wrapper {
     opacity: 0.5;
@@ -305,7 +327,7 @@
       display: block;
     }
     #issues-container .labels {
-      margin-left: 48px;
+      /* margin-left: 48px; */
       margin-top: 4px;
     }
     #branding {
@@ -329,4 +351,11 @@
     margin-top: 8px;
     margin-right: 8px;
   }
+  #issues-container img {
+    max-height: 24px;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
diff --git a/static/style/special.css b/static/style/special.css
@@ -2,15 +2,15 @@
   html {
     background-color: #06061aff;
   }
-  #toolbar.ready{
-    background-color: #06061a80
+  #toolbar.ready {
+    background-color: #06061a80;
   }
 }
 @media (prefers-color-scheme: light) {
   html {
     background-color: #f0f0f0;
   }
-  #toolbar.ready{
+  #toolbar.ready {
     background-color: #f0f0f080;
   }
 }
diff --git a/static/style/style.css b/static/style/style.css
@@ -119,6 +119,7 @@
     text-align: left;
     display: flex;
     padding: 12px 0;
+    align-items: center;
   }
   p.organization-name {
     opacity: 0.5;
@@ -141,7 +142,7 @@
     background-color: #80808020;
     width: 64px;
     letter-spacing: 0.5px;
-    flex-grow: 3;
+    flex-grow: 4;
     display: flex;
     justify-content: center;
     display: flex;
@@ -160,6 +161,10 @@
   }
   #filters label {
     cursor: pointer;
+    /* background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20height%3D%2216%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2216%22%3E%3Cpath%20fill%3D%22%23ffffff80%22%20d%3D%22M120-240v-80h240v80H120Zm0-200v-80h480v80H120Zm0-200v-80h720v80H120Z%22/%3E%3C/svg%3E"); */
+    /* background-repeat: no-repeat; */
+    /* background-position: 4px 4px; */
+    /* text-align: right; */
   }
   #filters label:hover {
     background-color: #80808040;
@@ -170,6 +175,23 @@
   input[type="radio"]:checked + label {
     background-color: #80808080 !important;
   }
+
+  input[type="radio"] + label > .icon > svg {
+    fill: #ffffff80;
+  }
+  input[type="radio"] + label > .active.icon > svg {
+    display: none;
+  }
+  input[type="radio"] + label > .default.icon > svg {
+    display: unset;
+  }
+  input[type="radio"]:checked + label > .default.icon > svg {
+    display: none;
+  }
+  input[type="radio"]:checked + label > .active.icon > svg {
+    display: unset;
+  }
+
   .labels {
     display: flex;
     margin-left: auto;
@@ -186,7 +208,7 @@
     opacity: 0.66;
     transition: 125ms opacity ease-in-out;
     align-items: center;
-    margin: 0 0 0 50px;
+    /* margin: 0 0 0 12px; */
   }
   #issues-container > .issue-element-wrapper {
     opacity: 0.5;
@@ -305,7 +327,7 @@
       display: block;
     }
     #issues-container .labels {
-      margin-left: 48px;
+      /* margin-left: 48px; */
       margin-top: 4px;
     }
     #branding {
@@ -329,4 +351,11 @@
     margin-top: 8px;
     margin-right: 8px;
   }
+  #issues-container img {
+    max-height: 24px;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }