Skip to content
This repository has been archived by the owner on Jan 15, 2025. It is now read-only.

Vote 2.1: Added input type of voting #1580

Merged
merged 6 commits into from
Mar 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ exports[`(1) Default render 1`] = `
>
<div
className="editor-toolbar toolbar-sm"
id="editor-toolbar"
>
<div
className="editor-tool"
Expand Down Expand Up @@ -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"
>
Expand Down Expand Up @@ -372,6 +373,7 @@ exports[`(2) Cancellable, in progress 1`] = `
>
<div
className="editor-toolbar toolbar-sm"
id="editor-toolbar"
>
<div
className="editor-tool"
Expand Down Expand Up @@ -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"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ exports[`(1) Empty tags. 1`] = `
<a
className="community-selector"
href="#"
id="community-picker"
onClick={[Function]}
>
<span
Expand All @@ -27,6 +28,7 @@ exports[`(2) Tags with no community 1`] = `
<a
className="community-selector"
href="#"
id="community-picker"
onClick={[Function]}
>
<span
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -91,6 +94,7 @@ exports[`(4) Tags with community. 1`] = `
<a
className="community-selector"
href="#"
id="community-picker"
onClick={[Function]}
>
<span
Expand Down Expand Up @@ -123,6 +127,7 @@ exports[`(5) Tags with community. But not valid 1`] = `
<a
className="community-selector"
href="#"
id="community-picker"
onClick={[Function]}
>
<span
Expand Down
23 changes: 5 additions & 18 deletions src/common/components/decks/columns/helpers/_helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down Expand Up @@ -153,7 +170,9 @@ Array [
`;

exports[`(2) Btn - No active user (1) Render 1`] = `
<div>
<div
onClick={[Function]}
>
<div>
<div
className="entry-vote-btn"
Expand Down Expand Up @@ -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"
Expand Down
16 changes: 7 additions & 9 deletions src/common/components/entry-vote-btn/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
exports[`(1) No tags 1`] = `
<div
className="tag-selector"
id="submit-tags-selector"
>
<div
className="suggestion relative z-[11]"
Expand Down Expand Up @@ -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]"
Expand Down Expand Up @@ -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]"
Expand Down
19 changes: 19 additions & 0 deletions src/common/features/ui/input/_input-vote.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
1 change: 1 addition & 0 deletions src/common/features/ui/input/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Loading