plex checkbox

cj12312021 · Jan 22, 2024 · 6f7d6c5 · 6f7d6c5
1 parent dd8da7f
commit 6f7d6c5
Show file tree

Hide file tree

Showing 4 changed files with 185 additions and 13 deletions.
diff --git a/ui/v2.5/src/components/List/ListTable.tsx b/ui/v2.5/src/components/List/ListTable.tsx
@@ -75,9 +75,11 @@ export const ListTable = <T extends { id: string }>(
     return (
       <tr key={item.id}>
         <td className="select-col">
-          <label>
+          <div className="checkbox-wrapper">
             <Form.Control
               type="checkbox"
+              id={item.id}
+              // #2750 - add mousetrap class to ensure keyboard shortcuts work
               checked={selectedIds.has(item.id)}
               onChange={() =>
                 onSelectChange(item.id, !selectedIds.has(item.id), shiftKey)
@@ -89,7 +91,10 @@ export const ListTable = <T extends { id: string }>(
                 event.stopPropagation();
               }}
             />
-          </label>
+            <label htmlFor={item.id}>
+              <span />
+            </label>
+          </div>
         </td>
 
         {visibleColumns.map((column) => (

diff --git a/ui/v2.5/src/components/Scenes/styles.scss b/ui/v2.5/src/components/Scenes/styles.scss
@@ -702,6 +702,31 @@ input[type="range"].blue-slider {
 
 .select-col {
   width: 20px;
+
+  /* stylelint-disable */
+  .checkbox-wrapper {
+    position: relative;
+    z-index: 0;
+
+    input[type="checkbox"]:checked + label span {
+      transform: scale(0.8);
+    }
+
+    input[type="checkbox"]:checked + label:hover span {
+      transform: scale(0.8);
+    }
+
+    label {
+      margin: 0;
+      opacity: 1;
+      padding: 0;
+
+      span {
+        transform: scale(0.6);
+      }
+    }
+  }
+  /* stylelint-enable */
 }
 
 .scrape-dialog .rating-number.disabled {

diff --git a/ui/v2.5/src/components/Shared/GridCard.tsx b/ui/v2.5/src/components/Shared/GridCard.tsx
@@ -24,6 +24,8 @@ interface ICardProps {
 }
 
 export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
+  const cardID = props.url.substring(1).split("?")[0].replace("/", "-");
+  console.log(cardID);
   function handleImageClick(event: React.MouseEvent<HTMLElement, MouseEvent>) {
     const { shiftKey } = event;
 
@@ -65,17 +67,25 @@ export const GridCard: React.FC<ICardProps> = (props: ICardProps) => {
   function maybeRenderCheckbox() {
     if (props.onSelectedChanged) {
       return (
-        <Form.Control
-          type="checkbox"
-          // #2750 - add mousetrap class to ensure keyboard shortcuts work
-          className="card-check mousetrap"
-          checked={props.selected}
-          onChange={() => props.onSelectedChanged!(!props.selected, shiftKey)}
-          onClick={(event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
-            shiftKey = event.shiftKey;
-            event.stopPropagation();
-          }}
-        />
+        <div className="checkbox-wrapper">
+          <Form.Control
+            type="checkbox"
+            id={cardID}
+            // #2750 - add mousetrap class to ensure keyboard shortcuts work
+            className="card-check mousetrap"
+            checked={props.selected}
+            onChange={() => props.onSelectedChanged!(!props.selected, shiftKey)}
+            onClick={(
+              event: React.MouseEvent<HTMLInputElement, MouseEvent>
+            ) => {
+              shiftKey = event.shiftKey;
+              event.stopPropagation();
+            }}
+          />
+          <label htmlFor={cardID}>
+            <span />
+          </label>
+        </div>
       );
     }
   }

diff --git a/ui/v2.5/src/components/Shared/styles.scss b/ui/v2.5/src/components/Shared/styles.scss
@@ -484,6 +484,138 @@ div.react-datepicker {
   }
 }
 
+/* stylelint-disable */
+.card:has(input:checked) label,
+.checkbox-wrapper label:hover {
+  opacity: 1;
+}
+
+.checkbox-wrapper {
+  position: absolute;
+  z-index: 100;
+
+  .checkbox {
+    display: table-cell;
+    height: 100%;
+    text-align: center;
+    vertical-align: middle;
+    width: 100%;
+  }
+
+  input[type="checkbox"] {
+    display: none;
+  }
+
+  input[type="checkbox"]:checked + label {
+    span {
+      background-color: #e5a00d;
+      border: none;
+      opacity: 1;
+      transform: scale(1.2);
+    }
+
+    span:after {
+      background: #392803;
+      transition: width 150ms ease 100ms;
+      width: 10px;
+    }
+
+    span:before {
+      background: #392803;
+      transition: width 150ms ease 100ms;
+      width: 5px;
+    }
+  }
+
+  input[type="checkbox"]:checked + label:hover {
+    span {
+      background-color: #333;
+      transform: scale(1.2);
+    }
+
+    span:after {
+      background: #fff;
+      transition: width 150ms ease 100ms;
+      width: 10px;
+    }
+
+    span:before {
+      background: #fff;
+      transition: width 150ms ease 100ms;
+      width: 5px;
+    }
+  }
+
+  label {
+    color: #333;
+    cursor: pointer;
+    display: inline-block;
+    margin-bottom: 0;
+    margin-left: 0.6rem;
+    margin-top: 0.6rem;
+    opacity: 0;
+    position: relative;
+
+    span {
+      background-color: transparent;
+      border: 2px solid #fff;
+      border-radius: 50%;
+      display: inline-block;
+      height: 25px;
+      margin-right: 10px;
+      position: relative;
+      transition: background-color 150ms 200ms,
+        transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
+      transform-origin: center;
+      vertical-align: middle;
+      width: 25px;
+    }
+
+    span:before {
+      background: #fff0;
+      border-radius: 2px;
+      box-sizing: unset;
+      content: "";
+      height: 2px;
+      left: 9px;
+      position: absolute;
+      top: 13px;
+      transform: rotate(45deg);
+      transform-origin: 0% 0%;
+      transition: width 50ms ease 50ms;
+      width: 0px;
+    }
+
+    span:after {
+      background: #fff0;
+      border-radius: 2px;
+      box-sizing: unset;
+      content: "";
+      height: 2px;
+      left: 10px;
+      position: absolute;
+      transform: rotate(305deg);
+      top: 16px;
+      transform-origin: 0% 0%;
+      transition: width 50ms ease;
+      width: 0;
+    }
+  }
+
+  label:hover {
+    span:before {
+      transition: width 100ms ease;
+      width: 5px;
+    }
+
+    span:after {
+      transition: width 150ms ease 100ms;
+      width: 10px;
+    }
+  }
+}
+/* stylelint-enable */
+
 .string-list-row .input-group {
   flex-wrap: nowrap;
 }