Merge pull request #1580 from ecency/feature/input-vote

Vote 2.1: Added input type of voting
ecency · Mar 29, 2024 · f5f286b · f5f286b
2 parents a4007c0 + ce2ad20
commit f5f286b
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 69 deletions.
diff --git a/src/common/components/comment/__snapshots__/index.spec.tsx.snap b/src/common/components/comment/__snapshots__/index.spec.tsx.snap
@@ -7,6 +7,7 @@ exports[`(1) Default render 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -219,7 +220,7 @@ exports[`(1) Default render 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-eb89ac22-2702-4311-9bb6-70a8f5e909f8"
+      id="editor-tool-emoji-picker-e5a42640-c9b5-428e-9d26-7a6fcab63b93"
       role="none"
       title="Emoji"
     >
@@ -372,6 +373,7 @@ exports[`(2) Cancellable, in progress 1`] = `
 >
   <div
     className="editor-toolbar toolbar-sm"
+    id="editor-toolbar"
   >
     <div
       className="editor-tool"
@@ -584,7 +586,7 @@ exports[`(2) Cancellable, in progress 1`] = `
     </div>
     <div
       className="editor-tool"
-      id="editor-tool-emoji-picker-01be801c-eb95-4ea8-b8cd-9a74f7a3ffac"
+      id="editor-tool-emoji-picker-4ccdcb56-8dff-4dfe-9898-dfdf7c3d7fc6"
       role="none"
       title="Emoji"
     >

diff --git a/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/community-selector/__snapshots__/index.spec.tsx.snap
@@ -4,6 +4,7 @@ exports[`(1) Empty tags. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -27,6 +28,7 @@ exports[`(2) Tags with no community 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -59,6 +61,7 @@ exports[`(3) Tags with community. but in the end 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -91,6 +94,7 @@ exports[`(4) Tags with community. 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span
@@ -123,6 +127,7 @@ exports[`(5) Tags with community. But not valid 1`] = `
 <a
   className="community-selector"
   href="#"
+  id="community-picker"
   onClick={[Function]}
 >
   <span

diff --git a/src/common/components/decks/columns/helpers/_helpers.scss b/src/common/components/decks/columns/helpers/_helpers.scss
@@ -29,19 +29,16 @@
 
       .slider {
         grid-area: slider;
-
-        > div {
-          @apply w-full bg-gray-300 dark:bg-dark-default;
-
-          > div:first-child {
-            @apply bg-blue-dark-sky;
-          }
-        }
       }
 
       .estimated {
         grid-area: price;
         text-align: left;
+        position: absolute;
+        top: 1.5rem;
+        right: 7.5rem;
+        z-index: 20;
+        font-size: .675rem;
       }
 
       .percentage {
@@ -58,16 +55,6 @@
       }
     }
 
-    .voting-controls-down {
-      .slider {
-        > div {
-          > div:first-child {
-            @apply bg-red;
-          }
-        }
-      }
-    }
-
     @media screen and (max-width: 560px) {
       width: calc(100vw - 67px - 24px);
       left: -12px;

diff --git a/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap b/src/common/components/entry-vote-btn/__snapshots__/index.spec.tsx.snap
@@ -41,50 +41,67 @@ Array [
     <div
       className="slider slider-up"
     >
-      <span
-        className="w-full flex [&>div]:w-full"
-        onClick={[Function]}
-        onKeyUp={[Function]}
-        tabIndex={0}
+      <div
+        className="ecency-vote-input relative"
       >
         <div
-          className="css-yvszuv-Slider"
-          onMouseDown={[Function]}
-          onTouchStart={[Function]}
+          className="ecency-input-group flex items-stretch w-full [&>input]:rounded-[0] [&>input:first-child]:rounded-l-full [&>input:last-child]:rounded-r-full [&>.ecency-input-group-part>button]:rounded-tl-none [&>.ecency-input-group-part>button]:rounded-bl-none [&>.ecency-input-group-part>button]:h-[2.75rem]"
         >
-          <div
-            className="css-3g5hux-Slider"
-            style={
-              Object {
-                "width": "100%",
-              }
-            }
+          <input
+            className="border-2 rounded-3xl py-2 px-3 w-full outline-none shadow-0 focus:border-gray-500 hover:border-gray-300 duration-300 dark:border-gray-700 dark:hover:border-gray-600 dark:bg-gray-800 aria-invalid:border-red"
+            onChange={[Function]}
+            step="0.1"
+            type="number"
+            value={100}
           />
           <div
+            className="ecency-input-group-part ecency-input-group-append border-l-0 rounded-tr-full rounded-br-full dark:border-gray-600 flex items-center justify-center px-2.5 border-2 bg-gray-200 dark:bg-gray-600"
             onClick={[Function]}
-            onMouseDown={[Function]}
-            onTouchStart={[Function]}
-            style={
-              Object {
-                "left": "100%",
-                "position": "absolute",
-                "top": "50%",
-                "transform": "translate(-50%, -50%)",
-              }
-            }
           >
-            <div
-              className="css-1ldz52l-Slider"
-            />
+            %
           </div>
         </div>
-      </span>
+        <div
+          className="absolute right-10 top-0 bottom-0 flex flex-col justify-center items-center"
+        >
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29l-5-5a1,1,0,0,0-.33-.21,1,1,0,0,0-.76,0,1,1,0,0,0-.33.21l-5,5a1,1,0,0,0,1.42,1.42L11,9.41V17a1,1,0,0,0,2,0V9.41l3.29,3.3a1,1,0,0,0,1.42,0A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+          <div
+            className="cursor-pointer h-4 flex items-center text-blue-dark-sky opacity-75 hover:opacity-100"
+            onClick={[Function]}
+          >
+            <svg
+              fill="currentColor"
+              height="24"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M17.71,11.29a1,1,0,0,0-1.42,0L13,14.59V7a1,1,0,0,0-2,0v7.59l-3.29-3.3a1,1,0,0,0-1.42,1.42l5,5a1,1,0,0,0,.33.21.94.94,0,0,0,.76,0,1,1,0,0,0,.33-.21l5-5A1,1,0,0,0,17.71,11.29Z"
+              />
+            </svg>
+          </div>
+        </div>
+      </div>
     </div>
     <div
       className="percentage"
-    >
-      100.0%
-    </div>
+    />
     <button
       className="cursor-pointer rounded-full duration-300 no-wrap border-[1.25px] border-solid flex items-center justify-center gap-2 border-red hover:border-red-020 focus:border-red-030 text-red hover:text-red-020 focus:text-red-030 h-[2rem] text-sm font-[500] px-2 text-xs w-8 !p-0"
       onClick={[Function]}
@@ -153,7 +170,9 @@ Array [
 `;
 
 exports[`(2) Btn - No active user (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"
@@ -186,7 +205,9 @@ exports[`(2) Btn - No active user (1) Render 1`] = `
 `;
 
 exports[`(3) Btn - Up voted (1) Render 1`] = `
-<div>
+<div
+  onClick={[Function]}
+>
   <div>
     <div
       className="entry-vote-btn"

diff --git a/src/common/components/entry-vote-btn/index.tsx b/src/common/components/entry-vote-btn/index.tsx
@@ -27,7 +27,7 @@ import { _t } from "../../i18n";
 import "./_index.scss";
 import { useMappedStore } from "../../store/use-mapped-store";
 import { Button } from "@ui/button";
-import { ReactInputSliderWrapper } from "../../features/packages-helpers";
+import { InputVote } from "@ui/input";
 
 const setVoteValue = (
   type: "up" | "down" | "downPrevious" | "upPrevious",
@@ -324,12 +324,9 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
               </div>
               <div className="space" />
               <div className="slider slider-up">
-                <ReactInputSliderWrapper
-                  value={upSliderVal}
-                  onChange={(x) => this.upSliderChanged(x)}
-                />
+                <InputVote value={upSliderVal} setValue={(x) => this.upSliderChanged(x)} />
               </div>
-              <div className="percentage">{`${upSliderVal && upSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"
@@ -377,13 +374,14 @@ export class VoteDialog extends Component<VoteDialogProps, VoteDialogState> {
                 <FormattedCurrency {...this.props} value={this.estimate(downSliderVal)} fixAt={3} />
               </div>
               <div className="slider slider-down">
-                <ReactInputSliderWrapper
+                <InputVote
+                  mode="negative"
                   value={downSliderVal}
-                  onChange={(x) => this.downSliderChanged(x)}
+                  setValue={(x) => this.downSliderChanged(x)}
                 />
               </div>
               <div className="space" />
-              <div className="percentage">{`${downSliderVal.toFixed(1)}%`}</div>
+              <div className="percentage" />
               <Button
                 noPadding={true}
                 className="w-8"

diff --git a/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap b/src/common/components/tag-selector/__snapshots__/index.spec.tsx.snap
@@ -3,6 +3,7 @@
 exports[`(1) No tags 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -32,6 +33,7 @@ exports[`(1) No tags 1`] = `
 exports[`(2) With tags 1`] = `
 <div
   className="tag-selector has-tags"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"
@@ -115,6 +117,7 @@ exports[`(2) With tags 1`] = `
 exports[`(3) No tags with focus 1`] = `
 <div
   className="tag-selector"
+  id="submit-tags-selector"
 >
   <div
     className="suggestion relative z-[11]"

diff --git a/src/common/features/ui/input/_input-vote.scss b/src/common/features/ui/input/_input-vote.scss
@@ -0,0 +1,19 @@
+.entry-list-item .item-body .item-controls .ecency-vote-input svg {
+  max-width: 16px;
+  width: 16px;
+  height: 16px !important;
+  max-height: 16px;
+}
+
+.ecency-vote-input {
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type=number] {
+    background-color: transparent;
+    -moz-appearance: textfield;
+  }
+}
diff --git a/src/common/features/ui/input/index.ts b/src/common/features/ui/input/index.ts
@@ -2,3 +2,4 @@ export * from "./input-group";
 export * from "./input-group-copy-clipboard";
 export * from "./form-controls";
 export * from "./code-input";
+export * from "./input-vote";